@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:var(--experiments-colors-finale-192);background:var(--experiments-colors-finale-193)}*{box-sizing:border-box}html,body{margin:0;overflow:hidden;width:100%;height:100%}button,select,a{-webkit-tap-highlight-color:transparent}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}canvas:focus-visible{outline:none}body.keyboard canvas:focus-visible{outline:1px solid var(--experiments-colors-finale-194);outline-offset:-6px}header{position:fixed;inset:28px 34px auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3}.brand{pointer-events:auto;text-decoration:none;color:inherit;font-weight:600;letter-spacing:.1em;font-size:12px;line-height:1.2}.brand span{font-size:9px;display:block;letter-spacing:.35em;margin-top:3px}.study-label,.eyebrow{font-size:9px;letter-spacing:.2em;color:var(--experiments-colors-finale-195)}.intro{position:fixed;left:34px;top:100px;width:218px;pointer-events:none;transition:opacity .9s,transform .9s;z-index:2}.intro h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:76px;letter-spacing:-.035em;line-height:1;margin:0 0 18px}.intro h1 span{color:var(--experiments-colors-finale-196)}.tagline{font-size:14px;margin:0 0 12px}.instruction{font-size:12px;color:var(--experiments-colors-finale-197);line-height:1.7;margin:0;max-width:205px}.playing .intro{opacity:0;transform:translateY(-6px)}.controls{position:fixed;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:7px;background:var(--experiments-colors-finale-198);border:1px solid var(--experiments-colors-cffffff20);box-shadow:0 12px 36px var(--experiments-colors-c0004);backdrop-filter:blur(16px);border-radius:40px;z-index:4}.controls button,.controls select{height:44px;min-width:44px;border:0;background:transparent;color:var(--experiments-colors-ce9edf0);font:500 12px 'DM Sans',sans-serif;cursor:pointer;border-radius:24px}.controls button{padding:0 17px}.controls select{padding:0 28px 0 16px;max-width:135px}.controls select option{background:var(--experiments-colors-finale-199)}.controls button:hover,.controls select:hover{background:var(--experiments-colors-finale-200)}.controls svg{width:18px;height:18px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.5}.controls #help{font-size:16px;padding:0 15px}.divider{height:20px;width:1px;background:var(--experiments-colors-cffffff20);margin:0 6px}.hint{position:fixed;bottom:8px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.15em;color:var(--experiments-colors-finale-201);pointer-events:none;margin:0}.controls:focus-within{opacity:1}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--experiments-colors-finale-202);outline-offset:3px}dialog{width:min(420px,calc(100% - 36px));border:1px solid var(--experiments-colors-cffffff24);border-radius:22px;background:var(--experiments-colors-finale-203);color:var(--experiments-colors-finale-204);padding:32px;box-shadow:0 25px 120px var(--experiments-colors-finale-205)}dialog::backdrop{background:var(--experiments-colors-finale-206);backdrop-filter:blur(5px)}dialog h2{font:40px 'Instrument Serif',Georgia,serif;margin:14px 0 20px}dialog p{font-size:13px;line-height:1.75;color:var(--experiments-colors-finale-207)}dialog .eyebrow{font-size:9px}dialog .keys{font-size:11px;border-top:1px solid var(--experiments-colors-cffffff20);padding-top:15px}#close-help{position:absolute;right:12px;top:10px;width:40px;height:40px;color:inherit;background:none;border:0;font-size:24px;cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#status{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);font-size:12px;max-width:440px;text-align:center;pointer-events:none}#status:not(:empty){padding:8px 14px;border-radius:18px;background:var(--experiments-colors-finale-208)}#key-contact{position:fixed;width:18px;height:18px;border:1px solid var(--experiments-colors-finale-210);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 3px var(--experiments-colors-c0006);z-index:3}#metrics{position:fixed;top:70px;right:10px;padding:8px;background:var(--experiments-colors-finale-209);font:10px monospace;color:var(--experiments-colors-finale-210);z-index:12;white-space:pre-line;pointer-events:none}
@media(max-width:760px){header{inset:22px 22px auto}.study-label{font-size:8px}.intro{top:85px;left:24px;width:calc(100% - 48px)}.intro h1{font-size:58px;margin-bottom:8px}.tagline{font-size:13px;margin-bottom:5px}.instruction{max-width:280px;font-size:11px}.controls{bottom:max(30px,env(safe-area-inset-bottom));padding:5px}.controls button{padding:0 11px}.controls select{max-width:119px;padding-left:12px;padding-right:20px}.divider{margin:0 2px}.controls #help{padding:0 11px}.hint{font-size:7px}#status{bottom:100px;width:80%}}
@media(max-height:480px){header{inset:16px 22px auto}.intro{top:62px}.intro h1{font-size:44px;margin-bottom:9px}.instruction{max-width:185px}.controls{bottom:18px}.hint{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.study-label{display:flex;gap:16px}.study-label a{color:inherit;text-decoration:none;pointer-events:auto}.study-label a:hover{text-decoration:underline}.experiment-skip{position:fixed;left:16px;top:-90px;z-index:20;padding:12px;background:var(--color-surface-default);color:inherit}.experiment-skip:focus{top:12px}.fallback{position:fixed;top:40%;left:10%;right:10%;text-align:center;z-index:10}
