/* Inter Tight (OFL), one self-made subset: Latin + Latin Ext-A, Hausa ɓ ɗ ƙ ƴ, Yoruba/Igbo ẹ ọ ṣ ị ụ ṅ and the
   combining tone marks. One file on purpose: a tone mark only sits right when it is shaped in the same file as its
   letter (Onest and split Google subsets put the marks of ẹ́ / ọ̀ between letters). */
@font-face{font-family:'Inter Tight';src:url('assets/inter-tight.woff2') format('woff2');font-weight:400 900;font-display:swap}

:root{
  color-scheme:light;
  --paper:#f8f5ed;--desk:#ebe7df;--ink:#1f1b3a;--ink-soft:#5f5876;
  --purple:#6a40e3;--purple-deep:#4b2aa8;--lavender:#e4ddf7;--lavender-hover:#d8cef4;--panel:#efe9f7;--chip:#e3d9fb;
  --lime:#a8ea5f;--lime-edge:#7fbf37;--lime-hover:#b5f06d;--lime-ink:#1d3310;
  --wrong:#ffdcd3;--wrong-ink:#8c3324;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-arrive:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--desk);color:var(--ink);font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
::selection{background:#d9cdfb;color:var(--ink)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,p,ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
[hidden]{display:none!important}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.icon{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Shell: fixed root sized from the real viewport (app.js sets --app-h; in-app browsers lie about 100vh). */
.landing{position:fixed;inset:0;margin:auto;width:min(100%,480px);height:100%;height:var(--app-h,100dvh);background:radial-gradient(120% 70% at 50% 0%,#fcfaf5,var(--paper) 62%);overflow:hidden;container:landing/size}
.screen{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.screen.entering{animation:screen-in .38s var(--ease-arrive) both}

/* Primary action: the mockup's chunky lime key. Its 5px edge is the key's body, so pressing sinks it. */
.cta{position:relative;display:flex;justify-content:center;align-items:center;gap:14px;width:100%;min-width:0;min-height:clamp(52px,7.4cqh,62px);padding:12px 18px;border:0;border-radius:18px;background:var(--lime);color:var(--lime-ink);text-decoration:none;font-size:clamp(17px,4.9cqw,19px);font-weight:800;letter-spacing:.03em;line-height:1.15;box-shadow:0 5px 0 var(--lime-edge),0 14px 24px -12px #4f7f1f73;transition:transform .14s var(--ease-out),box-shadow .14s var(--ease-out),background-color .2s ease,color .2s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.cta>span{min-width:0}
.cta .icon{width:22px;height:22px;stroke-width:2.6;transition:transform .2s var(--ease-out)}
.cta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 7px #a8ea5f3b;opacity:0}
.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--lime-edge),0 6px 14px -10px #4f7f1f73}
@media (hover:hover) and (pointer:fine){.cta:hover{background:var(--lime-hover)}.cta:hover .icon{transform:translateX(3px)}}

/* ---------- Intro ---------- */
.intro{grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(8px,2cqh,22px);text-align:center;padding-top:max(32px,5.5cqh,env(safe-area-inset-top));padding-bottom:max(26px,4cqh,env(safe-area-inset-bottom))}
h1{font-size:clamp(36px,min(13.4cqw,7.4cqh),60px);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1 .line{display:block}
.accent{color:var(--purple)}
.intro-bottom{display:grid;gap:clamp(14px,3.2cqh,30px);min-width:0}
.intro-prompt{font-size:clamp(22px,min(8.2cqw,4.4cqh),32px);font-weight:800;line-height:1.14;letter-spacing:-.012em;color:var(--purple);text-wrap:balance}

.hero-art{position:relative;width:100%;height:100%;min-height:0;max-width:420px;justify-self:center;container-type:size;--u:min(1cqw,1.25cqh)}
.hero-art>*{position:absolute;left:50%;top:50%}
.orbit{border:1.5px solid #e1daee;border-radius:50%}
.orbit-a{width:calc(94*var(--u));height:calc(62*var(--u));margin:calc(-31*var(--u)) 0 0 calc(-47*var(--u));transform:rotate(-12deg)}
.orbit-b{width:calc(80*var(--u));height:calc(76*var(--u));margin:calc(-38*var(--u)) 0 0 calc(-40*var(--u));transform:rotate(24deg);border-color:#e9e4f2}
.deco.spark-a{width:calc(11*var(--u));height:calc(11*var(--u));margin:calc(-43*var(--u)) 0 0 calc(-45*var(--u));fill:#ac8cf8}
.deco.spark-b{width:calc(7.5*var(--u));height:calc(7.5*var(--u));margin:calc(33*var(--u)) 0 0 calc(35*var(--u));fill:var(--purple)}
.dot{border-radius:50%}
.dot-a{width:calc(1.6*var(--u));height:calc(1.6*var(--u));min-width:5px;min-height:5px;margin:calc(-24*var(--u)) 0 0 calc(45*var(--u));background:#4c68c7}
.dot-b{width:calc(2*var(--u));height:calc(2*var(--u));min-width:6px;min-height:6px;margin:calc(29*var(--u)) 0 0 calc(-44*var(--u));background:#f7a190}
.card{border-radius:calc(7*var(--u));display:grid;place-items:center}
.card svg{width:86%;height:86%;overflow:visible}
.card-main{z-index:2;width:calc(46*var(--u));height:calc(60*var(--u));margin:calc(-30*var(--u)) 0 0 calc(-23*var(--u));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:calc(5*var(--u));padding-top:calc(4*var(--u));background:linear-gradient(165deg,#8664f5,#6a40e3 55%,#5d34d6);box-shadow:inset 0 1px 0 #ffffff4d,0 calc(1.8*var(--u)) 0 var(--purple-deep),0 calc(6*var(--u)) calc(8*var(--u)) -1px #3b1f8a40;transform:rotate(-3deg)}
.card-q{font-size:calc(41*var(--u));font-weight:900;line-height:.8;color:#dff98a;text-shadow:calc(.7*var(--u)) calc(1.1*var(--u)) 0 #3f238f}
.card-dash{display:flex;gap:calc(1.6*var(--u))}
.card-dash i{width:calc(7*var(--u));height:max(3px,calc(1.1*var(--u)));border-radius:9px;background:#a68ef6}
.card-dash i:first-child{background:#dff98a}
.card-space{width:calc(38*var(--u));height:calc(48*var(--u));margin:calc(-22*var(--u)) 0 0 calc(-50*var(--u));background:linear-gradient(165deg,#36325f,#211f3d);box-shadow:inset 0 1px 0 #ffffff1f,0 calc(4*var(--u)) calc(7*var(--u)) -2px #1b16384d;transform:rotate(-15deg)}
.card-nature{width:calc(38*var(--u));height:calc(48*var(--u));margin:calc(-22*var(--u)) 0 0 calc(12*var(--u));background:linear-gradient(165deg,#f9c0b5,#ef9b8d);box-shadow:inset 0 1px 0 #ffffff59,0 calc(4*var(--u)) calc(7*var(--u)) -2px #a24f3f40;transform:rotate(14deg)}

/* Cards deal out of one stack on arrival, then breathe slowly while the visitor reads. */
.intro .card-main{animation:card-rise .7s var(--ease-arrive) .06s backwards,float-main 4.2s ease-in-out .9s infinite}
.intro .card-space{animation:fan-left .8s var(--ease-arrive) .16s backwards,float-left 4.8s ease-in-out 1s infinite}
.intro .card-nature{animation:fan-right .8s var(--ease-arrive) .2s backwards,float-right 4.4s ease-in-out 1s infinite}
.intro .orbit,.intro .dot{animation:fade-in .9s var(--ease-out) .3s backwards}
.intro .deco.spark-a,.intro .deco.spark-b,.twinkle{transform-box:fill-box;transform-origin:center;animation:twinkle 2.8s ease-in-out infinite}
.intro .deco.spark-b,.twinkle.late{animation-delay:1.2s}
.intro h1 .line{animation:rise .55s var(--ease-out) backwards}
.intro h1 .line+.line{animation-delay:.07s}
.intro-prompt{animation:rise .55s var(--ease-out) .32s backwards}
.intro .cta{animation:rise .55s var(--ease-out) .4s backwards}
.intro .cta::after,.result .cta::after{animation:breathe 2.4s ease-in-out 1.2s infinite}

/* ---------- Quiz ---------- */
.quiz{grid-template-rows:auto minmax(0,1fr);gap:clamp(12px,2.4cqh,24px);padding-top:max(22px,3.2cqh,env(safe-area-inset-top));padding-bottom:max(24px,3.6cqh,env(safe-area-inset-bottom))}
.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:22px;padding-inline:4px}
.progress{display:flex;gap:8px}
.progress i{position:relative;display:block;width:clamp(30px,10.4cqw,42px);height:7px;border-radius:9px;background:#e7e2db;overflow:hidden}
.progress i::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--purple);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.progress i.on::after{transform:none}
.counter{font-size:15px;font-weight:700;letter-spacing:.06em;color:#787190;font-variant-numeric:tabular-nums}
.question{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(10px,2.4cqh,24px);min-height:0;min-width:0}
.quiz h2{font-size:clamp(24px,min(8.6cqw,4.4cqh),36px);font-weight:800;line-height:1.1;letter-spacing:-.015em;text-align:center;text-wrap:balance;outline:none}
.question-art{position:relative;min-height:0}
/* Absolute fill: a percentage height on an SVG in a grid row does not resolve, it would overflow into the answers. */
.visual{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-line{fill:none;stroke:#e1daee;stroke-width:1.5}
.orbit-line.faint{stroke:#ece7f3}
.moon{transform-box:view-box;transform-origin:130px 130px;animation:orbit 18s linear infinite}
.moon.slow{animation-duration:26s;animation-direction:reverse}
.halo{fill:none;stroke:#ff9165;stroke-width:9;opacity:0;transform-box:view-box;transform-origin:130px 130px}
.earth .halo{stroke:#86bcff}
.planet.reveal .halo{animation:halo .95s var(--ease-out)}
.mars-dark{fill:#b4402f;opacity:.4}
.mars-light{fill:#ffb995;opacity:.3}
.crater-rim{fill:#ffb08a;opacity:.6}
.crater-pit{fill:#a9372f;opacity:.85}
.land{fill:#a8df53;stroke:#c8f07a;stroke-width:1.3;stroke-linejoin:round}

/* Chameleon: skin colours are plain fills so one class can repaint the whole animal. */
.skin{fill:#5bb58b}
.skin-light{fill:#78cb9b}
.skin-dark{fill:#3d8d6c}
.stripe{stroke:#d8ee55;opacity:.82}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 5.2s 1.6s infinite}
.pupil{animation:look 7s ease-in-out infinite}
/* The colour run fits into the 1 s freeze after an answer, before the question leaves. */
.chameleon.shift .skin{animation:skin 1.15s ease-in-out}
.chameleon.shift .skin-light{animation:skin-light 1.15s ease-in-out}
.chameleon.shift .skin-dark{animation:skin-dark 1.15s ease-in-out}
.chameleon.shift .stripe{animation:stripe 1.15s ease-in-out}

.answers{display:grid;gap:clamp(8px,1.4cqh,12px);min-width:0}
.answer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:clamp(48px,6.8cqh,58px);padding:10px 50px;border:0;border-radius:16px;background:var(--lavender);color:#29244f;font-size:clamp(16px,4.7cqw,18px);font-weight:500;line-height:1.2;text-align:center;transition:background-color .2s ease,color .2s ease,opacity .25s ease,transform .14s var(--ease-out);touch-action:manipulation}
.answer:active:not(:disabled){transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.answer:hover:not(:disabled){background:var(--lavender-hover)}}
.answer:disabled{cursor:default}
.mark{position:absolute;right:14px;top:50%;display:grid;place-items:center;width:28px;height:28px;margin-top:-14px;border-radius:50%;color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .34s var(--ease-arrive)}
.mark .icon{width:16px;height:16px;stroke-width:3.2}
.answer.correct{background:linear-gradient(180deg,#d4f7a3,#c2f084);color:var(--lime-ink);font-weight:600}
.answer.correct .mark{background:#5d9c2b;opacity:1;transform:none}
.answer.wrong{background:var(--wrong);color:var(--wrong-ink);font-weight:600}
.answer.wrong .mark{background:#d65f4b;opacity:1;transform:none}
.answers.answered .answer:not(.correct):not(.wrong){opacity:.45}

/* ---------- Result ---------- */
.result{grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(10px,2cqh,18px);text-align:center;padding-top:max(28px,4.6cqh,env(safe-area-inset-top))}
.result h2{font-size:clamp(40px,min(14cqw,7.2cqh),60px);font-weight:900;line-height:1.02;letter-spacing:-.025em;color:var(--purple);outline:none;text-wrap:balance}
.result-sub{margin-top:clamp(4px,1cqh,10px);font-size:clamp(20px,min(6.8cqw,3.6cqh),28px);font-weight:700;line-height:1.16;letter-spacing:-.01em;text-wrap:balance}
.trophy-art{position:relative;min-height:0;margin-bottom:calc(-1 * clamp(10px,2cqh,18px) - 8px)}
/* Bottom-aligned and clipped: the card pile is cut by the panel edge, as in the mockup. */
.trophy-art svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
#score-text{font-family:'Inter Tight',system-ui,sans-serif;font-size:44px;font-weight:900;letter-spacing:-1px;fill:#dff98a}
.pitch{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;align-items:center;gap:clamp(8px,1.4cqh,14px);padding:clamp(14px,2.4cqh,22px) 18px;border-radius:22px;background:var(--panel)}
.pitch-icon{display:grid;place-items:center;width:clamp(46px,8cqh,66px);aspect-ratio:1;border-radius:50%;background:#ddd1fb;color:var(--purple)}
.pitch-icon .icon{width:64%;height:64%;stroke-width:3.4}
.pitch p{max-width:21ch;font-size:clamp(17px,min(5.6cqw,3cqh),22px);font-weight:700;line-height:1.24;letter-spacing:0;text-wrap:balance}
.features{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:clamp(12px,3.6cqw,14px);line-height:1.22;color:#3b3556}
.features li{display:grid;justify-items:center;align-content:start;gap:6px;min-width:0;overflow-wrap:anywhere}
.feature-icon{display:grid;place-items:center;width:clamp(38px,6cqh,46px);aspect-ratio:1;border-radius:50%;background:var(--chip);color:var(--purple)}
.feature-icon .icon{width:56%;height:56%;stroke-width:2.6}
.feature-icon.solid .icon{fill:currentColor;stroke:none}

/* The cards from the intro come back as the trophy's pedestal; confetti bursts out from behind the cup. */
.result-head>*{animation:rise .55s var(--ease-out) backwards}
.result-sub{animation-delay:.06s}
.pile{animation:pile-in .6s var(--ease-out) .1s backwards}
.plaque{animation:pile-in .55s var(--ease-out) .16s backwards}
.cup{transform-box:fill-box;transform-origin:50% 100%;animation:cup-pop .85s var(--ease-arrive) .28s backwards}
.rays{transform-box:view-box;transform-origin:160px 100px;animation:rays-in .6s var(--ease-out) .7s backwards,rays-pulse 2.6s ease-in-out 1.4s infinite}
.confetti>*{transform-box:fill-box;transform-origin:center;animation:burst .95s var(--ease-out) backwards,drift 5s ease-in-out infinite;animation-delay:.6s,1.6s}
.confetti>:nth-child(3n){animation-delay:.66s,2.2s;animation-duration:.95s,6.2s}
.confetti>:nth-child(3n+1){animation-delay:.72s,1.9s;animation-duration:.95s,4.4s}
.pitch{animation:rise .55s var(--ease-out) .5s backwards}
.result .cta{animation:rise .55s var(--ease-out) .58s backwards}
.features li{animation:rise .5s var(--ease-out) .66s backwards}
.features li+li{animation-delay:.72s}
.features li+li+li{animation-delay:.78s}

@keyframes screen-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes card-rise{from{opacity:0;transform:translateY(calc(6*var(--u))) rotate(-3deg) scale(.94)}}
@keyframes fan-left{from{opacity:0;transform:translateX(calc(26*var(--u))) rotate(-3deg)}}
@keyframes fan-right{from{opacity:0;transform:translateX(calc(-26*var(--u))) rotate(-3deg)}}
@keyframes float-main{0%,100%{transform:rotate(-3deg)}50%{transform:translateY(calc(-2*var(--u))) rotate(-1deg)}}
@keyframes float-left{0%,100%{transform:rotate(-15deg)}50%{transform:translateY(calc(1.4*var(--u))) rotate(-19deg)}}
@keyframes float-right{0%,100%{transform:rotate(14deg)}50%{transform:translateY(calc(-1.6*var(--u))) rotate(18deg)}}
@keyframes twinkle{0%,100%{transform:scale(.84) rotate(0deg);opacity:.6}50%{transform:scale(1.12) rotate(24deg);opacity:1}}
@keyframes breathe{0%,100%{opacity:0;transform:scale(.97)}50%{opacity:1;transform:scale(1.01)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes halo{0%{opacity:.55;transform:scale(.97)}100%{opacity:0;transform:scale(1.14)}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes look{0%,28%,100%{transform:none}36%,58%{transform:translate(-4px,3px)}66%,88%{transform:translate(2px,-3px)}}
@keyframes skin{0%,100%{fill:#5bb58b}22%{fill:#f3b23f}46%{fill:#f2707e}70%{fill:#8a68f0}}
@keyframes skin-light{0%,100%{fill:#78cb9b}22%{fill:#f9cb6c}46%{fill:#f8929c}70%{fill:#a98cf6}}
@keyframes skin-dark{0%,100%{fill:#3d8d6c}22%{fill:#cc8622}46%{fill:#cc4b60}70%{fill:#6141c6}}
@keyframes stripe{0%,100%{stroke:#d8ee55}22%{stroke:#ffe891}46%{stroke:#ffd3a8}70%{stroke:#d5c8ff}}
@keyframes pile-in{from{opacity:0;transform:translateY(26px)}}
@keyframes cup-pop{0%{opacity:0;transform:translateY(30px) scale(.84)}58%{opacity:1;transform:translateY(-6px) scale(1.04)}100%{transform:none}}
@keyframes rays-in{from{opacity:0;transform:scale(.7)}}
@keyframes rays-pulse{0%,100%{opacity:1;transform:none}50%{opacity:.55;transform:scale(1.05)}}
@keyframes burst{from{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.3) rotate(-120deg)}}
@keyframes drift{0%,100%{transform:none}50%{transform:translateY(-5px) rotate(8deg)}}

/* ---------- Sizes ---------- */
/* Desktop: the phone sits on the desk as a framed screen. */
@media (min-width:600px) and (min-height:600px){
  .landing{width:430px;height:min(900px,calc(var(--app-h,100dvh) - 32px));border-radius:32px;box-shadow:0 0 0 1px #2b214a0d,0 30px 70px -24px #2b214a3d}
}
@media (orientation:landscape) and (max-height:599px){.landing{width:100%;height:var(--app-h,100dvh)}}

/* Short portrait phones (SE, older Androids): the result pitch turns into a row. */
@container landing (orientation:portrait) and (max-height:720px){
  .pitch{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:14px;padding:12px 16px;border-radius:20px}
  .pitch-icon{width:48px}
  .pitch p{max-width:none;font-size:clamp(16px,4.6cqw,18px)}
  .result-sub{font-size:clamp(19px,6cqw,24px)}
}
@container landing (orientation:portrait) and (max-height:620px){
  .screen{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .features{font-size:12px}
  .feature-icon{width:36px}
  .cta{min-height:50px}
}

/* Phone landscape: two columns, art on the left, everything you read and tap on the right. */
@container landing (orientation:landscape) and (max-height:560px){
  .screen{width:min(100%,860px);margin-inline:auto;padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));column-gap:clamp(16px,4cqw,40px)}
  .cta{min-height:46px;font-size:16px;padding:8px 16px;border-radius:15px}
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"art ." "art title" "art bottom" "art .";row-gap:14px;padding-block:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-bottom))}
  .intro h1{grid-area:title;font-size:clamp(30px,9.5cqh,46px)}
  .hero-art{grid-area:art;max-width:none}
  .intro-bottom{grid-area:bottom;gap:14px}
  .intro-prompt{font-size:clamp(18px,5.6cqh,24px)}
  .quiz{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);row-gap:10px}
  .quiz-top{grid-column:1/-1}
  .question{grid-column:1/-1;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"art ." "art title" "art answers" "art .";column-gap:clamp(16px,4cqw,40px);row-gap:12px}
  .question-art{grid-area:art}
  .quiz h2{grid-area:title;font-size:clamp(19px,6cqh,26px)}
  .answers{grid-area:answers;gap:8px}
  .answer{min-height:clamp(36px,10.5cqh,46px);font-size:15px;padding-block:6px;border-radius:12px}
  .mark{width:24px;height:24px;margin-top:-12px}
  .result{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto auto auto;grid-template-areas:"art head" "art pitch" "art cta" "art features";row-gap:10px;align-content:center}
  .result-head{grid-area:head}
  .result h2{font-size:clamp(30px,10cqh,44px)}
  .result-sub{font-size:clamp(16px,5cqh,21px);margin-top:4px}
  .trophy-art{grid-area:art;margin-bottom:calc(-1 * max(12px,env(safe-area-inset-bottom)))}
  .pitch{grid-area:pitch;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:12px;padding:9px 14px;border-radius:16px}
  .pitch-icon{width:38px}
  .pitch p{max-width:none;font-size:15px}
  .result .cta{grid-area:cta}
  .features{grid-area:features;font-size:12px}
  .feature-icon{width:32px}
}
@media (max-width:350px) and (orientation:portrait){
  .answer{font-size:15px}
}

/* Reduced motion: everything lands in its final state at once; colour (the chameleon) is not motion and stays. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .chameleon.shift .skin,.chameleon.shift .skin-light,.chameleon.shift .skin-dark,.chameleon.shift .stripe{animation-duration:1.15s!important}
  .cta::after{opacity:0!important}
}