:root {
  --bg: #08080b;
  --panel: #101014;
  --panel-2: #15151b;
  --text: #f4f3f8;
  --muted: #9a98a6;
  --quiet: #666572;
  --accent: #8575ff;
  --accent-bright: #a89dff;
  --accent-soft: rgba(133, 117, 255, .14);
  --border: rgba(255, 255, 255, .09);
  --border-soft: rgba(255, 255, 255, .055);
  --success: #63e6be;
  --danger: #ff7c9d;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: 72px 72px;
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: 'cv01', 'ss03';
  -webkit-font-smoothing: antialiased;
}

button, select { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.hidden { display: none !important; }

.ambient { position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .32; }
.ambient-one { width: 540px; height: 540px; top: -300px; left: 38%; background: #5541d2; }
.ambient-two { width: 380px; height: 380px; right: -280px; top: 44%; background: #253f8d; opacity: .17; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: min(1180px, calc(100% - 40px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(8, 8, 11, .72);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.brand { display: flex; align-items: center; gap: 11px; border: 0; background: none; padding: 10px 0; font-size: 14px; font-weight: 600; letter-spacing: -.35px; cursor: pointer; }
.brand-slashes { color: var(--accent-bright); }
.brand-mark { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; gap: 2px; }
.brand-mark i { display: block; width: 3px; border-radius: 8px; background: var(--text); }
.brand-mark i:nth-child(1) { height: 9px; opacity: .55; }
.brand-mark i:nth-child(2) { height: 18px; }
.brand-mark i:nth-child(3) { height: 13px; opacity: .75; }
.brand-mark i:nth-child(4) { height: 5px; background: var(--accent-bright); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.daily-pill { min-height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; color: #c7c5d0; background: rgba(255,255,255,.025); font: 500 10px/1 var(--mono); letter-spacing: .06em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: rgba(255,255,255,.025); color: #c7c5d0; cursor: pointer; transition: .2s ease; }
.icon-button:hover { background: rgba(255,255,255,.07); color: white; transform: translateY(-1px); }
.icon-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.screen { min-height: calc(100dvh - 150px); }
.intro-screen { padding: 118px 0 46px; display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: auto auto; align-items: center; column-gap: 90px; }
.intro-copy { max-width: 640px; }
.eyebrow { display: flex; align-items: center; margin-bottom: 24px; color: var(--accent-bright); font: 500 10px/1.3 var(--mono); letter-spacing: .15em; }
.eyebrow::before { content: ''; width: 30px; height: 1px; margin-right: 12px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.intro-copy h1 { margin: 0; font-size: clamp(54px, 7vw, 92px); font-weight: 500; line-height: .94; letter-spacing: clamp(-5px, -.055em, -2.7px); text-wrap: balance; }
.intro-copy h1 span { color: #92909c; }
.intro-copy > p { max-width: 580px; margin: 32px 0 0; color: #aba9b5; font-size: 18px; line-height: 1.65; letter-spacing: -.22px; text-wrap: pretty; }
.intro-actions { display: flex; align-items: center; gap: 18px; margin-top: 38px; }
.primary-button, .secondary-button, .submit-button { min-height: 50px; border-radius: 999px; border: 0; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; font-size: 14px; font-weight: 600; letter-spacing: -.18px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button, .submit-button { background: var(--text); color: #0b0b0e; box-shadow: 0 10px 32px rgba(0,0,0,.28), inset 0 -1px rgba(0,0,0,.16); }
.primary-button:hover, .submit-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 42px rgba(0,0,0,.4), 0 0 0 5px rgba(133,117,255,.08); }
.primary-button svg, .submit-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.time-note { color: var(--quiet); font: 400 11px/1 var(--mono); }

.deck-preview { position: relative; width: min(100%, 390px); height: 430px; justify-self: center; perspective: 1000px; }
.preview-card { position: absolute; width: 315px; height: 390px; left: 50%; top: 50%; padding: 24px; border-radius: 24px; border: 1px solid var(--border); background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), #0d0d12; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.card-back { display: flex; flex-direction: column; }
.card-back > span { margin: auto; color: rgba(255,255,255,.09); font-size: 96px; font-weight: 500; }
.card-back-three { transform: translate(-42%, -46%) rotate(11deg); opacity: .35; }
.card-back-two { transform: translate(-57%, -49%) rotate(-7deg); opacity: .6; }
.card-back-one { transform: translate(-50%, -50%) rotate(1deg); animation: hovercard 5s ease-in-out infinite; }
.preview-top { display: flex; align-items: center; gap: 10px; color: #767482; font: 500 9px/1 var(--mono); letter-spacing: .08em; }
.slot-badge { width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; border: 1px solid rgba(133,117,255,.45); border-radius: 9px; background: var(--accent-soft); color: var(--accent-bright); font: 500 12px/1 var(--mono); }
.preview-lines { margin-top: 50px; display: grid; gap: 14px; }
.preview-lines i { display: block; height: 9px; border-radius: 9px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.055)); }
.preview-lines i:nth-child(2) { width: 88%; }
.preview-lines i:nth-child(3) { width: 94%; }
.preview-lines i:nth-child(4) { width: 60%; }
.preview-question { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border-soft); color: #858391; font: 500 10px/1 var(--mono); letter-spacing: .13em; }
@keyframes hovercard { 0%,100% { transform: translate(-50%,-50%) rotate(1deg) translateY(0); } 50% { transform: translate(-50%,-50%) rotate(1deg) translateY(-9px); } }

.trust-strip { grid-column: 1 / -1; margin-top: 76px; padding-top: 25px; border-top: 1px solid var(--border-soft); display: flex; gap: 56px; }
.trust-strip div { display: flex; align-items: baseline; gap: 9px; }
.trust-strip strong { font: 500 20px/1 var(--mono); color: #d8d6df; }
.trust-strip span { color: var(--quiet); font-size: 12px; }

.game-screen { padding: 75px 0 140px; max-width: 940px; margin: auto; }
.game-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }
.game-eyebrow { margin-bottom: 12px; }
.game-header h2 { margin: 0; font-size: clamp(38px, 5vw, 58px); font-weight: 500; letter-spacing: -.045em; }
.countdown { text-align: right; display: grid; gap: 6px; color: var(--quiet); font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.countdown strong { color: #b9b7c2; font-size: 12px; letter-spacing: .06em; }
.prompt-card { position: relative; overflow: hidden; padding: 34px 38px; border: 1px solid rgba(133,117,255,.24); border-radius: 20px; background: linear-gradient(130deg, rgba(133,117,255,.11), rgba(255,255,255,.025) 42%, rgba(255,255,255,.015)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 26px 80px rgba(0,0,0,.24); }
.prompt-card::after { content:''; position:absolute; width:220px; height:220px; right:-90px; top:-140px; border-radius:50%; background:var(--accent); filter:blur(70px); opacity:.16; }
.prompt-kicker { color: #8c88a1; font: 500 9px/1 var(--mono); letter-spacing: .12em; }
.provenance-chip { position: relative; z-index: 1; width: fit-content; margin-top: 14px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #777481; background: rgba(0,0,0,.16); font: 400 8px/1.3 var(--mono); letter-spacing: .025em; }
.provenance-chip span { margin-right: 7px; color: var(--accent-bright); font-weight: 500; letter-spacing: .08em; }
.spark { color: var(--accent-bright); margin-right: 7px; }
.prompt-card blockquote { position: relative; z-index: 1; margin: 25px 0 0; max-width: 830px; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.32; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.assignment-note { margin: 26px 3px 14px; display: flex; justify-content: space-between; color: var(--quiet); font: 400 10px/1 var(--mono); }
.response-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.response-card { min-height: 0; padding: 20px; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 18px; background: rgba(17,17,22,.91); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 18px 50px rgba(0,0,0,.14); opacity: 0; animation: cardin .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--delay); transition: border-color .2s, background .2s, transform .2s; }
.response-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.14); }
.response-card.has-selection { border-color: rgba(133,117,255,.38); background: linear-gradient(145deg, rgba(133,117,255,.055), transparent 45%), rgba(17,17,22,.96); }
@keyframes cardin { to { opacity:1; transform:translateY(0); } from { opacity:0; transform:translateY(14px); } }
.response-topline { display: flex; align-items: center; gap: 9px; color: #696774; font: 500 8px/1 var(--mono); letter-spacing: .09em; }
.response-topline .slot-badge { width: 26px; height: 26px; flex-basis: 26px; border-radius: 8px; font-size: 10px; }
.word-count { margin-left: auto; }
.response-card > p { margin: 24px 0 28px; color: #ceccd5; font-size: 15px; line-height: 1.65; letter-spacing: -.11px; }
.visual-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; margin: 17px 0 18px; padding: 0; overflow: hidden; display: block; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: #06070b; cursor: zoom-in; box-shadow: 0 12px 34px rgba(0,0,0,.27); }
.visual-frame img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s; }
.visual-frame:hover img { transform: scale(1.012); filter: brightness(1.05); }
.visual-expand { position: absolute; right: 9px; bottom: 9px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(7,7,11,.75); color: rgba(255,255,255,.72); backdrop-filter: blur(10px); font: 500 8px/1 var(--mono); letter-spacing: .06em; opacity: 0; transform: translateY(3px); transition: .2s ease; }
.visual-frame:hover .visual-expand, .visual-frame:focus-visible .visual-expand { opacity: 1; transform: translateY(0); }
.model-picker { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.picker-label { display: block; margin-bottom: 12px; color: #716f7c; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.model-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.model-choice { min-height: 46px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-soft); border-radius: 11px; background: rgba(255,255,255,.022); color: #85838f; font-size: 11px; cursor: pointer; transition: .18s ease; }
.model-choice > span:last-child { min-width: 0; text-align: left; line-height: 1.2; overflow-wrap: anywhere; }
.model-choice:hover { color: #dad8e1; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.045); }
.model-choice.assigned:not(.selected) { opacity: .38; }
.model-choice.selected { color: white; border-color: rgba(133,117,255,.55); background: rgba(133,117,255,.14); box-shadow: inset 0 0 0 1px rgba(133,117,255,.08); }
.model-mark { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border-radius: 7px; border: 1px solid currentColor; font: 500 9px/1 var(--mono); }
.model-mark.jade { color: #63e6be; background: rgba(99,230,190,.07); }
.model-mark.amber { color: #f1be7a; background: rgba(241,190,122,.07); }
.model-mark.blue { color: #78adff; background: rgba(120,173,255,.07); }
.model-mark.rose { color: #ff89a9; background: rgba(255,137,169,.07); }
.submit-dock { position: sticky; bottom: 18px; z-index: 10; margin: 26px auto 0; max-width: 520px; padding: 8px; display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: 999px; background: rgba(15,15,20,.88); backdrop-filter: blur(18px); box-shadow: 0 20px 70px rgba(0,0,0,.45); }
.submit-progress { position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: rgba(255,255,255,.05); overflow: hidden; }
.submit-progress span { display: block; height: 100%; width: 0; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent); transition: width .25s ease; }
.submit-button { width: 100%; }
.submit-button:disabled { cursor: not-allowed; background: rgba(255,255,255,.06); color: #5e5c68; box-shadow: none; }

.result-screen { max-width: 720px; margin: auto; padding: 70px 0 90px; }
.result-hero { text-align: center; }
.result-hero .eyebrow { justify-content: center; margin: 22px 0 14px; }
.result-hero .eyebrow::before { display: none; }
.result-orbit { width: 132px; height: 132px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(133,117,255,.35); border-radius: 50%; background: radial-gradient(circle, rgba(133,117,255,.16), rgba(133,117,255,.02) 65%); box-shadow: 0 0 80px rgba(133,117,255,.16), inset 0 0 30px rgba(133,117,255,.1); }
.result-orbit::before, .result-orbit::after { content:''; position:absolute; border:1px solid rgba(133,117,255,.12); border-radius:50%; }
.result-orbit::before { width:165px; height:165px; }
.result-orbit::after { width:198px; height:198px; opacity:.4; }
.result-orbit span { font: 500 31px/1 var(--mono); color: #e6e2ff; }
.result-hero h2 { margin: 0; font-size: clamp(40px, 7vw, 64px); letter-spacing: -.05em; font-weight: 500; }
.result-hero > p { max-width: 540px; margin: 18px auto 40px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.reveal-list { display: grid; gap: 9px; }
.reveal-card { padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--border); border-radius: 15px; background: rgba(255,255,255,.025); opacity:0; animation: cardin .45s ease forwards; animation-delay:var(--delay); }
.reveal-card.correct { border-color: rgba(99,230,190,.22); }
.reveal-card.wrong { border-color: rgba(255,124,157,.19); }
.reveal-thumb { width: 82px; height: 55px; margin-right: 13px; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: #07080d; }
.reveal-identity { display: flex; align-items: center; gap: 11px; }
.reveal-identity > div { display: grid; gap: 4px; }
.reveal-identity strong { font-size: 13px; font-weight: 600; }
.reveal-identity div span { color: var(--quiet); font-size: 10px; }
.reveal-status { width: 28px; height: 28px; margin-left: auto; display:grid; place-items:center; border-radius:50%; font:500 14px/1 var(--mono); }
.correct .reveal-status { color:var(--success); background:rgba(99,230,190,.08); }
.wrong .reveal-status { color:var(--danger); background:rgba(255,124,157,.08); }
.result-actions { margin-top: 28px; display: flex; justify-content: center; gap: 9px; }
.secondary-button { border: 1px solid var(--border); background: rgba(255,255,255,.035); color: #b3b1bc; }
.secondary-button:hover { background: rgba(255,255,255,.065); }
.tomorrow-note { margin-top: 27px; text-align: center; color: var(--quiet); font: 400 10px/1 var(--mono); }
.tomorrow-note strong { color: #a7a4b0; }

footer { width: min(1180px, calc(100% - 40px)); min-height: 78px; margin: 0 auto; border-top: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; color: #55535f; font: 500 9px/1 var(--mono); letter-spacing: .08em; }
.footer-center { font-family: var(--font); letter-spacing: 0; font-size: 11px; }
.prototype-note { color: #514f5a; }

.modal { width: min(460px, calc(100% - 30px)); padding: 32px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #121218; color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.66); }
.modal::backdrop, .visual-modal::backdrop { background: rgba(3,3,5,.78); backdrop-filter: blur(10px); }
.modal-close { position:absolute; top:16px; right:16px; width:34px; height:34px; border:1px solid var(--border); border-radius:50%; background:rgba(255,255,255,.03); color:#888692; font-size:20px; cursor:pointer; }
.modal-icon { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(133,117,255,.36); border-radius:14px; background:var(--accent-soft); color:var(--accent-bright); font:500 14px/1 var(--mono); }
.modal h3 { margin: 22px 0 24px; font-size: 32px; font-weight: 500; letter-spacing: -.04em; }
.modal ol { list-style:none; padding:0; margin:0 0 26px; display:grid; gap:18px; }
.modal li { display:flex; gap:14px; }
.modal li > span { padding-top:3px; color:var(--accent-bright); font:500 9px/1 var(--mono); }
.modal li div { display:grid; gap:4px; }
.modal li strong { font-size:13px; font-weight:600; }
.modal li p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.modal-primary { width:100%; }
.provenance-note { margin: 0 0 22px; padding: 13px 14px; border: 1px solid rgba(133,117,255,.17); border-radius: 12px; color: #8b8995; background: rgba(133,117,255,.045); font-size: 10px; line-height: 1.55; }
.provenance-note strong { color: #b9b4dd; font-weight: 600; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.stats-grid div { min-height:105px; padding:18px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.025); }
.stats-grid strong { font:500 29px/1 var(--mono); }
.stats-grid span { color:var(--quiet); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.stats-caption { margin:20px 0 0; text-align:center; color:var(--quiet); font-size:11px; }
.visual-modal { width: min(1120px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 48px 14px 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: #0b0b10; color: var(--text); box-shadow: 0 45px 140px rgba(0,0,0,.75); }
.visual-modal .modal-close { z-index: 2; }
.visual-modal-bar { position: absolute; top: 19px; left: 18px; right: 64px; display: flex; justify-content: space-between; color: #6e6c78; font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.visual-modal img { width: 100%; max-height: calc(100vh - 92px); display: block; object-fit: contain; border-radius: 12px; background: #05060a; }
.toast { position:fixed; left:50%; bottom:24px; z-index:50; transform:translate(-50%, 20px); padding:12px 16px; border:1px solid var(--border); border-radius:999px; background:#181820; color:#d7d5dd; font-size:12px; opacity:0; pointer-events:none; transition:.25s ease; box-shadow:0 15px 50px rgba(0,0,0,.4); }
.toast.visible { opacity:1; transform:translate(-50%,0); }

@media (max-width: 820px) {
  .topbar, main, footer { width: min(100% - 28px, 680px); }
  .topbar { height: 68px; }
  .daily-pill { display:none; }
  .intro-screen { padding: 70px 0 36px; grid-template-columns:1fr; gap:65px; }
  .intro-copy { text-align:center; margin:auto; }
  .intro-copy .eyebrow { justify-content:center; }
  .intro-copy .eyebrow::before { display:none; }
  .intro-copy h1 { font-size:clamp(48px, 14vw, 72px); }
  .intro-copy > p { font-size:16px; }
  .intro-actions { justify-content:center; flex-direction:column; gap:14px; }
  .primary-button { min-height:54px; }
  .deck-preview { height:400px; }
  .trust-strip { margin-top:25px; justify-content:center; gap:30px; }
  .trust-strip div { flex-direction:column; align-items:center; gap:5px; }
  .game-screen { padding-top:50px; }
  .response-grid { grid-template-columns:1fr; }
  .response-card { min-height:unset; }
  .submit-dock { position: static; }
  .game-header { align-items:start; }
  .countdown { padding-top:7px; }
  .prompt-card { padding:27px 24px; }
  .provenance-chip { max-width: 100%; line-height: 1.45; }
  .result-screen { padding-top:55px; }
  .footer-center { display:none; }
}

@media (max-width: 480px) {
  body { background-size:52px 52px; }
  .brand { font-size:12px; }
  .icon-button { width:34px; height:34px; }
  .intro-screen { padding-top:58px; }
  .intro-copy h1 { font-size:48px; }
  .intro-copy > p { margin-top:24px; font-size:15px; line-height:1.6; }
  .deck-preview { width:100%; height:350px; }
  .preview-card { width:260px; height:330px; padding:20px; }
  .trust-strip { gap:22px; }
  .trust-strip strong { font-size:17px; }
  .trust-strip span { font-size:9px; }
  .game-header h2 { font-size:38px; }
  .countdown { display:none; }
  .prompt-card blockquote { font-size:24px; }
  .assignment-note { font-size:8px; }
  .response-card { padding:19px; border-radius:15px; }
  .response-card > p { font-size:14px; }
  .model-choice { min-height:46px; padding:0 8px; font-size:10px; }
  .submit-dock { bottom:max(12px, env(safe-area-inset-bottom)); }
  .result-actions { flex-direction:column; }
  .result-actions button { width:100%; }
  footer { min-height:66px; }
  .prototype-note { text-align:right; }
  .modal { padding:25px; border-radius:20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}