:root{--blue-900: #2E5490;--blue-800: #355FA1;--blue-700: #3968AF;--blue-600: #466EAB;--blue-500: #7594C4;--blue-400: #92BBDB;--blue-300: #B0C6DE;--blue-100: #E4EDF8;--blue-050: #E3EAF5;--orange-700: #C88130;--orange-600: #E27333;--orange-500: #E68D36;--orange-400: #EC963A;--orange-300: #F0A33A;--ink: #000000;--paper: #FAF7EF;--paper-cool: #FBFBFB;--white: #FFFFFF;--display: "Marvin", "Times New Roman";--text: "Gotham", "Times New Roman";--garfield: "Garfield", "Times New Roman"}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--blue-400);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}.screen{position:fixed;top:0;left:0;width:100vw;height:100vh}.screen-art{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:var(--art-fit, cover);z-index:0;pointer-events:none}.screen-art-missing{background:var(--blue-400)}.place{position:absolute;top:var(--y, 50%);left:var(--x, 50%);translate:-50% 0;width:var(--w, auto);z-index:10}.screen-welcome .cta{--y: 83%;--w: 50%}.screen-q1 .options{--y: 32%;--w: 65%}.screen-q2 .options{--y: 60%;--w: 65%}.screen-q3 .options{--y: 35%;--w: 65%}.screen-q4 .options{--y: 62%;--w: 65%}.screen-q5 .options{--y: 34%;--w: 65%}.screen-analysing .dial{--y: 40.67%;--x: 49.95%;--w: 52.5%}.screen-result .score{--y: 20%;--size: 10vh}.screen-result .actions{--y: 57%;--w: 70%}.screen-pass .score{--y: 22%;--size: 10vh}.screen-pass .notice,.screen-pass .actions{--y: 62%;--w: 70%}.pass{--bleed: 15px}.pass .pass-score{--y: 20%;--size: 121px}.qr-modal{--qr: 46vh}.screen-error .error-panel{--y: 34%;--w: 70%}.score{margin:0;font-family:var(--display);font-weight:900;font-size:var(--size, 14vh);line-height:1;text-align:center;color:var(--orange-600)}.button-primary{display:flex;align-items:center;justify-content:center;gap:20px;width:62%;padding:22px 34px;border:2px solid var(--ink);border-radius:30px;background:var(--orange-500);color:var(--paper);font-family:var(--garfield);font-weight:800;font-size:3.2vw;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer}.button-primary:active{transform:translateY(2px)}.button-arrow{width:7vw;flex:none}.actions{display:flex;flex-direction:column;gap:14px;align-items:center}.actions form{display:contents}:where(a,button):focus-visible{outline:3px solid var(--orange-600);outline-offset:3px}.options{display:grid;gap:1.5vw}.option{display:flex;align-items:stretch;overflow:hidden;border:5px solid var(--ink);border-radius:40px;background:var(--white);color:inherit;text-align:left;cursor:pointer;padding:0;font-family:var(--garfield);transition:transform .12s ease,background .12s ease;animation:rise .28s cubic-bezier(.2,.7,.3,1) backwards}.option-key{flex:0 0 44px;display:grid;place-items:center;padding:3vw;background:var(--orange-500);border-right:5px solid var(--ink);font-size:3vw;font-weight:900}.option-label{padding:3vw;font-size:3vw;font-weight:500;line-height:1.2;text-align:center;width:100%}.option:active{transform:translateY(2px);background:#fbeed6}@media(hover:hover){.option:hover{background:#fff8ea}}.option-chosen{transform:translateY(2px);background:#fbeed6}.notice{margin:0;font-family:var(--text);font-weight:700;font-size:22px;line-height:1.3;text-align:center;color:var(--ink)}.qr-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:100;display:grid;place-items:center;background:#000000a6;animation:fade .2s ease}.qr-modal{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px;border:5px solid var(--ink);border-radius:40px;background:var(--white);animation:rise .28s cubic-bezier(.2,.7,.3,1)}.qr-code{width:var(--qr, 46vh);height:var(--qr, 46vh);display:block}.qr-caption{margin:0;min-height:var(--qr, 46vh);display:grid;place-items:center;max-width:12ch;font-family:var(--garfield);font-size:30px;line-height:1.25;text-align:center;color:var(--ink)}.qr-code+.qr-caption{min-height:0;display:block;max-width:none}.qr-modal .button-primary{width:auto}.error-panel{text-align:center;font-family:var(--text);color:var(--white)}.error-panel h1{font-family:var(--garfield);font-size:44px;margin:0 0 10px}.error-panel p{margin:0 0 22px;font-size:20px}.screen-error{background:var(--blue-400)}.pass{position:relative;width:100%;aspect-ratio:var(--pass-ratio, 1000 / 1400);overflow:hidden;border-style:solid;border-color:#fff;border-width:var(--bleed, 15px)}.pass-art{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.pass-score{position:absolute;top:var(--y, 34%);left:0;right:0;margin:0;font-family:var(--display);font-weight:900;font-size:var(--size, 22cqw);line-height:1;text-align:center;color:var(--orange-600)}.dial{aspect-ratio:1;container-type:inline-size}.dial-face,.dial-sweep{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.dial-ring{fill:none;stroke:#16130f29;stroke-width:3}.dial-tick{fill:#16130f59}.dial-tick-major{fill:var(--ink)}.dial-arc{fill:none;stroke:var(--orange-500);stroke-width:5;stroke-linecap:butt;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%;animation:fill-dial var(--dial-duration, 5s) linear forwards}@keyframes fill-dial{to{stroke-dashoffset:0}}.dial-readout{position:absolute;top:0;right:0;bottom:0;left:0;margin-top:2vw;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:6vw;line-height:1;text-align:center;color:var(--ink)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:ease}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}.dial-arc{animation-duration:var(--dial-duration, 5s)!important}}
