:root{--cyan:#2af;--cyan-dark:#0086e6;--blue:#2764b7;--lime:#cf6;--success:#83cf16;--error:#e94b55;--ink:#0d1730;--muted:#66788d;--soft:#f4f9fd;--border:#dce8f1;--surface:#fff;--shadow:0 16px 42px #0d173017;color:var(--ink);font-synthesis:none;text-rendering:geometricprecision;background:#f7fbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{background:radial-gradient(circle at 7% 5%,#22aaff24,#0000 28%),radial-gradient(circle at 94% 8%,#ccff6624,#0000 24%),#f7fbff;min-height:100dvh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}:focus-visible{outline-offset:3px;outline:3px solid #2af6}.app-root{min-height:100dvh;padding:18px}.app-shell{border:1px solid var(--border);width:min(900px,100vw - 36px);min-height:calc(100dvh - 36px);box-shadow:var(--shadow);background:#fffffff5;border-radius:28px;margin:0 auto;overflow:hidden}.app-screen{flex-direction:column;min-height:calc(100dvh - 36px);display:flex}.app-header{border-bottom:1px solid var(--border);background:#ffffffeb;grid-template-columns:54px 1fr 54px;align-items:center;gap:8px;min-height:68px;padding:8px 18px;display:grid}.app-title,.app-subtitle{text-align:center;margin:0}.app-title{color:var(--blue);letter-spacing:.08em;text-transform:uppercase;font-size:.76rem;font-weight:850}.app-subtitle{color:#8998a8;margin-top:2px;font-size:.68rem}.app-main{flex-direction:column;flex:1;justify-content:center;align-self:center;gap:20px;width:min(100%,690px);padding:28px;display:flex}.hero-main{max-width:650px}.hero-copy{gap:12px;display:grid}.ui-eyebrow{color:var(--blue);letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:.74rem;font-weight:850}.ui-heading-xl,.ui-heading-lg{letter-spacing:-.035em;margin:0;line-height:1.08}.ui-heading-xl{font-size:clamp(2rem,7vw,3.5rem)}.ui-heading-lg{font-size:clamp(1.65rem,5vw,2.5rem)}.hero-lead,.ui-body{color:var(--muted);margin:0;line-height:1.6}.hero-lead{font-size:1.05rem}.prototype-badge{width:fit-content;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;background:#22aaff1f;border-radius:999px;padding:7px 12px;font-size:.72rem;font-weight:800}.ui-card{border:1px solid var(--border);background:var(--surface);border-radius:20px;padding:20px;box-shadow:0 8px 24px #0d17300d}.ui-card-title{margin:0 0 12px;font-size:1rem}.how-card{gap:15px;display:grid}.info-row{grid-template-columns:38px 1fr;align-items:start;gap:12px;display:grid}.info-index{color:#fff;background:linear-gradient(135deg, var(--blue), var(--cyan));border-radius:50%;place-items:center;width:34px;height:34px;font-size:.78rem;font-weight:850;display:grid}.info-row strong,.info-row p{display:block}.info-row p{color:var(--muted);margin:4px 0 0;font-size:.82rem;line-height:1.45}.ui-button{border:0;border-radius:14px;width:100%;min-height:54px;font-weight:850;transition:transform .15s,box-shadow .15s}.ui-button:active{transform:translateY(1px)}.ui-button-primary{color:#fff;background:linear-gradient(135deg, var(--cyan), var(--cyan-dark));box-shadow:0 10px 22px #22aaff40}.ui-button-secondary{color:var(--blue);border:2px solid var(--cyan);background:#fff}.ui-button-ghost{color:var(--blue);background:0 0}.ui-icon-button{min-width:48px;min-height:48px;color:var(--blue);background:0 0;border:0;border-radius:50%;padding:4px;font-size:.66rem;font-weight:800}.stack-sm,.stack-md{display:grid}.stack-sm{gap:10px}.stack-md{gap:16px}.privacy-line{color:#8190a0;text-align:center;margin:0;font-size:.76rem}.check-list{color:var(--muted);gap:10px;margin:0 0 22px;padding:0;list-style:none;display:grid}.check-list li:before{content:"✓";color:var(--success);margin-right:10px;font-weight:900}.check-list.is-boundary{margin-bottom:0}.check-list.is-boundary li:before{content:"×";color:var(--error)}.danger-title{color:#b6323b}.choice-grid,.measure-grid,.result-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.choice-card{text-align:left;border:2px solid var(--border);min-height:116px;color:var(--ink);background:#fff;border-radius:16px;gap:8px;padding:16px;display:grid}.choice-card span{color:var(--muted);font-size:.78rem;line-height:1.45}.choice-card.is-selected{border-color:var(--cyan);background:#22aaff0f}.measure-card{border:1px solid var(--border);background:#fff;border-radius:18px;grid-template-columns:48px 1fr;gap:14px;min-height:130px;padding:18px;display:grid}.measure-card h2,.measure-card p{margin:0}.measure-card h2{font-size:1rem}.measure-card p{color:var(--muted);margin-top:7px;font-size:.8rem;line-height:1.45}.measure-icon{color:#fff;background:linear-gradient(135deg, var(--blue), var(--cyan));border-radius:14px;place-items:center;width:46px;height:46px;font-weight:900;display:grid}.measure-icon.is-frame{color:#4c7900;background:var(--lime)}.ui-tip-card{color:var(--muted);background:var(--soft);border-radius:15px;grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:15px;font-size:.8rem;line-height:1.5;display:grid}.ui-tip-card p{margin:0}.tip-symbol{width:30px;height:30px;color:var(--blue);background:#22aaff24;border-radius:50%;place-items:center;font-weight:900;display:grid}.centre{text-align:center}.timing-main{max-width:560px}.timing-orbit{border:2px solid var(--border);border-radius:50%;place-items:center;width:100px;height:100px;margin:0 auto 8px;display:grid}.timing-orbit span{background:var(--cyan);border-radius:50%;width:34px;height:34px;box-shadow:0 0 0 12px #22aaff1a}.timing-orbit.is-running{animation:.7s ease-in-out infinite alternate timing-pulse}@keyframes timing-pulse{to{transform:scale(1.08)}}.timing-card{gap:0;display:grid}.timing-row{border-bottom:1px solid var(--border);min-height:48px;color:var(--muted);justify-content:space-between;align-items:center;display:flex}.timing-row strong{color:var(--ink)}.timing-row strong.is-good{color:#5b9600}.timing-quality{text-align:center;border-radius:12px;margin-top:16px;padding:11px;font-weight:850}.timing-quality.is-good{color:#477800;background:#ccff6640}.timing-quality.is-acceptable{color:#875d00;background:#fff6d8}.timing-quality.is-limited{color:#a32f37;background:#fff0f1}.timing-placeholder{color:var(--muted);text-align:center;padding:22px}.preview-card{gap:12px;display:grid}.task-preview-question{text-align:center;margin:0;font-weight:850}.stimulus-wrap{aspect-ratio:1;width:min(76vw,330px);margin:0 auto}.stimulus-svg{width:100%;height:100%;color:var(--cyan)}.orbit-line{fill:none;stroke:#2764b724;stroke-width:.8px;stroke-dasharray:2.2 2.2}.fixation line{stroke:var(--ink);stroke-width:.8px;stroke-linecap:round}.stimulus-masks{fill:currentColor;stroke:none}.response-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.task-response-button,.tutorial-answer{border:2px solid var(--cyan);min-height:60px;color:var(--blue);background:#fff;border-radius:14px;justify-content:center;align-items:center;gap:10px;font-size:1.05rem;font-weight:900;display:flex}.task-response-button kbd{min-width:34px;color:var(--blue);background:var(--soft);font:inherit;border:1px solid #2764b747;border-bottom-width:3px;border-radius:7px;padding:3px 8px 5px;line-height:1}.preview-response{pointer-events:none}.preference-list{border-top:1px solid var(--border);display:grid}.setting-row{border:0;border-bottom:1px solid var(--border);text-align:left;background:0 0;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:12px 0;display:flex}.setting-row small{color:var(--muted);margin-top:4px;display:block}.toggle{background:#cfd9e2;border-radius:999px;flex:none;width:48px;height:27px;padding:3px}.toggle i{background:#fff;border-radius:50%;width:21px;height:21px;transition:transform .16s;display:block}.toggle.is-on{background:var(--cyan)}.toggle.is-on i{transform:translate(21px)}.tutorial-main{max-width:620px}.mini-steps{color:var(--blue);text-align:center;grid-template-columns:repeat(3,1fr);gap:8px;font-size:.74rem;font-weight:800;display:grid}.task-screen{background:#fff}.task-main{grid-template-rows:auto auto 1fr auto auto;align-self:center;gap:8px;width:min(100%,760px);height:calc(100dvh - 36px);padding:18px 28px 20px;display:grid}.task-topline{color:var(--muted);justify-content:space-between;font-size:.76rem;font-weight:800;display:flex}.task-progress{background:#e8eef3;border-radius:999px;height:6px;overflow:hidden}.task-progress span{border-radius:inherit;background:linear-gradient(90deg, var(--blue), var(--cyan));height:100%;transition:width .18s;display:block}.task-stage{border:1px solid var(--border);background:#fff;border-radius:22px;grid-template-rows:42px minmax(260px,1fr) 34px;align-items:center;min-height:0;display:grid}.task-stage-copy{text-align:center;place-items:center;min-height:42px;padding:6px 14px 0;font-weight:850;display:grid}.task-stage-copy p{margin:0}.task-feedback{place-items:center;min-height:34px;display:grid}.task-feedback .is-correct{color:#65a600}.task-feedback .is-incorrect{color:var(--error)}.task-responses{width:min(100%,620px);margin:0 auto}.task-footnote{color:var(--muted);text-align:center;margin:0;font-size:.7rem}.completion-mark{color:#4d8300;background:var(--lime);border-radius:50%;place-items:center;width:72px;height:72px;margin:0 auto;font-size:2rem;font-weight:900;display:grid;box-shadow:0 0 0 10px #ccff662e}.result-card{border:1px solid var(--border);text-align:center;background:#fff;border-radius:18px;gap:4px;padding:18px;display:grid}.result-card strong{color:var(--blue);font-size:2.2rem}.result-card>span:not(.metric-label){color:var(--blue);font-size:.72rem;font-weight:800}.result-card small{color:var(--muted);margin-top:8px;line-height:1.4}.metric-label{color:var(--muted);font-size:.76rem;font-weight:800}.frame-cost-card div{justify-content:space-between;gap:16px;display:flex}.frame-cost-card strong{color:var(--blue)}.frame-cost-card p{color:var(--muted);margin:8px 0 0;font-size:.8rem}.quality-strip{grid-template-columns:1fr 1fr;gap:10px;display:grid}.quality-strip span{background:var(--soft);color:var(--muted);border-radius:12px;padding:12px;font-size:.76rem}.quality-strip strong{color:var(--ink);margin-top:4px;display:block}.boundary-note,.config-note{color:#7a5900;background:#fff7db;border-radius:14px;padding:14px;font-size:.78rem;line-height:1.5}.roadmap-list{gap:14px;display:grid}.sign-in-card{gap:12px;display:grid}.ui-input,.feedback-form input,.feedback-form select,.feedback-form textarea{width:100%;color:var(--ink);background:#fff;border:1px solid #bdcfdd;border-radius:12px;padding:13px 14px}.form-status{color:var(--blue);margin:0;font-size:.78rem}.honeypot{width:1px;height:1px;position:absolute;left:-10000px;overflow:hidden}.feedback-form{gap:16px;display:grid}.feedback-form label,.feedback-form legend{color:var(--ink);font-size:.82rem;font-weight:800}.feedback-form label>input,.feedback-form label>select,.feedback-form label>textarea{margin-top:7px;font-weight:500}.feedback-form fieldset{border:0;margin:0;padding:0}.rating-row{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;display:grid}.rating-row label{position:relative}.rating-row input{opacity:0;position:absolute}.rating-row span{border:1px solid var(--border);background:#fff;border-radius:12px;place-items:center;min-height:48px;display:grid}.rating-row input:checked+span{color:#fff;border-color:var(--cyan);background:var(--cyan)}.decision-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.decision-grid span{color:var(--muted);background:var(--soft);border-radius:12px;padding:13px;font-size:.76rem;line-height:1.45}.decision-grid strong{color:var(--blue);display:block}@media (width<=620px){.app-root{padding:0}.app-shell,.app-screen{border:0;border-radius:0;width:100%;min-height:100dvh}.app-main{justify-content:flex-start;padding:22px 18px 34px}.choice-grid,.measure-grid,.result-grid{grid-template-columns:1fr}.task-main{height:100dvh;padding:14px 14px 18px}.task-stage{grid-template-rows:50px minmax(230px,1fr) 36px}.stimulus-wrap{width:min(78vw,310px)}.app-header{z-index:10;position:sticky;top:0}}@media (height<=740px) and (width>=621px){.app-root{padding:9px}.app-shell,.app-screen{min-height:calc(100dvh - 18px)}.app-main{gap:14px;padding:18px 24px}.task-main{height:calc(100dvh - 18px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}