*{box-sizing:border-box} [hidden]{display:none!important}
:root{color-scheme:dark;--ink:#060b17;--paper:#fff;--muted:#b4bfd0;--accent:#67d6a0;--teal:#21a7b7;--red:#ef2706;font-family:Tahoma,Arial,sans-serif;font-synthesis:none}
html{min-width:320px;background:var(--ink)}body{margin:0;color:var(--paper);background:var(--ink)}
img{max-width:100%;height:auto}button,input,textarea{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:4px}#main:focus{outline:none}button:disabled{cursor:not-allowed;opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;right:12px;z-index:999;padding:12px 18px;background:var(--accent);color:#111}.skip-link:focus{top:12px}
.loading-screen,.noscript{min-height:80vh;display:grid;place-content:center;text-align:center;padding:24px}
.site{min-height:100vh;min-height:100svh;position:relative;isolation:isolate;display:flex;flex-direction:column}
.site::before{content:'';position:fixed;inset:0;z-index:-2;background:var(--scene) center top/cover no-repeat}
.site::after{content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(5,10,20,.8),rgba(5,10,20,.22))}
.topbar{width:min(1280px,100%);margin:0 auto;display:flex;direction:ltr;align-items:center;justify-content:space-between;padding:20px 28px;gap:16px;flex:none}
.brand{display:block;width:132px;flex-shrink:0;line-height:0}.brand img{width:100%;height:auto}
.toolbar{direction:rtl;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-start;gap:8px;min-width:0}
.mini-button{border:1px solid #6d7a8a;background:#0b1422eb;color:white;border-radius:8px;min-height:40px;padding:9px 13px;font-size:.85rem;text-align:center}.mini-button:hover{border-color:var(--accent)}
.timer{direction:ltr;display:flex;gap:7px;align-items:center;color:#fff;font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:bold;white-space:nowrap}.timer img{width:34px;height:40px;object-fit:contain}.timer.warning{color:var(--accent)}.timer.expired{color:#ff755e}
.main-wrap{width:min(1120px,calc(100% - 48px));margin:12px auto 0;padding-bottom:32px;flex:1}
.breadcrumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.84rem;color:#d0d9e6;margin:0 0 24px;line-height:1.7}.breadcrumb a{padding:4px 0}.breadcrumb a:hover{color:var(--accent)}
.panel{position:relative;background:#030403f5;border:2px solid #d9e0e7;border-radius:22px;box-shadow:0 12px 36px #0004;padding:36px clamp(20px,4vw,48px)}
.siren{display:none}
h1,h2,h3,p{overflow-wrap:break-word}h1{font-size:clamp(1.5rem,2.8vw,2.2rem);margin:0 0 18px;line-height:1.5}h2{font-size:1.4rem;line-height:1.6;margin:0 0 12px}.eyebrow{margin:0 0 12px;color:var(--accent);font-size:.85rem}.subtle{color:var(--muted);line-height:1.8;margin:8px 0 0;font-size:.95rem}
.welcome-main{width:min(940px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:center;padding:10px 0 30px;flex:1}
.welcome-composition{width:min(100%,780px);display:flex;flex-direction:column;align-items:center;gap:16px}
.welcome-art{display:block;width:auto;max-width:100%;max-height:58svh;object-fit:contain}.welcome-mobile-copy{display:none}
.welcome-cta{display:block;width:clamp(160px,25vw,240px);line-height:0;transition:transform .2s}.welcome-cta img{display:block;width:100%}.welcome-cta:hover{transform:translateY(-3px)}
.age-main{width:min(1100px,calc(100% - 40px));margin:0 auto;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:clamp(150px,30vh,350px) 0 42px}
.age-title{font-size:clamp(1.5rem,3vw,2.3rem);text-align:center;text-shadow:0 2px 10px #000;margin-bottom:26px}
.age-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:100%}.age-choice{display:block;line-height:0;transition:transform .2s}.age-choice img{width:100%;height:auto;display:block}.age-choice:hover{transform:translateY(-5px)}.age-copy{margin:22px 0 0;font-size:.9rem;text-align:center;line-height:1.8;color:#d6deeb}
.panel-top{display:flex;gap:24px;justify-content:space-between;align-items:center;margin-bottom:24px}.age-badge{width:210px;max-width:35%;height:auto;flex-shrink:0}
.case-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.case-choice{min-width:0;border:1px solid #526172;border-radius:16px;padding:20px;background:#0e1721;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.case-number{display:inline-block;color:var(--accent);font-size:.9rem;padding:5px 0}.solved-label{color:#8ede98;font-size:.85rem}
.case-title-preview{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:8px}.case-choice h2{margin:0}.case-choice p{color:#c8d3df;line-height:1.8;font-size:.94rem;margin:0 0 8px}.case-choice .btn{margin-top:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid transparent;border-radius:9px;padding:11px 22px;font-weight:700;background:var(--accent);color:#17110a;text-align:center;line-height:1.55;max-width:100%;transition:transform .15s}.btn:hover{transform:translateY(-2px)}.btn.secondary{color:#fff;background:transparent;border-color:#83929f;font-weight:400}.btn.teal{background:var(--teal);color:#fff}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}.actions.end{justify-content:flex-end}
.case-stepper{display:flex;align-items:center;gap:10px;margin:0 0 24px;color:#afbdcc;flex-wrap:wrap;font-size:.85rem;line-height:1.8}.case-stepper .active{color:var(--accent)}
.scenario-text{margin:24px 0 30px;line-height:2;font-size:clamp(1.08rem,2vw,1.5rem);white-space:pre-line;max-width:900px}
.original-action{display:block;width:min(100%,300px);line-height:0}.original-action img{display:block;width:100%;height:auto}
.evidence-note{font-size:.95rem;color:#c3ced9;line-height:1.8}.evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 18px}
.evidence-card{min-width:0;border:1px solid #415161;color:white;background:#111821;border-radius:14px;padding:0;overflow:hidden;text-align:right;transition:border-color .2s}.evidence-card:hover{border-color:var(--accent)}
.evidence-card img{width:100%;height:210px;object-fit:contain;display:block;background:#080b10;padding:8px}.evidence-label{display:flex;justify-content:space-between;gap:8px;padding:13px;font-size:.78rem;align-items:center;flex-wrap:wrap}.evidence-label strong{color:var(--accent)}.viewed-mark{color:#87dc92}
.evidence-dialog{width:min(950px,calc(100% - 28px));max-height:calc(100dvh - 32px);color:white;background:#090f19;border:1px solid #c5d0dc;border-radius:18px;padding:0;overflow:auto}.evidence-dialog::backdrop{background:#000d;backdrop-filter:blur(4px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid #3f4b59}.dialog-top h2{font-size:1.2rem;margin:0}.close-button{border:1px solid #596d80;border-radius:7px;padding:8px 13px;background:#1a2530;color:white;min-height:40px;flex-shrink:0}
.dialog-image-wrap{padding:20px;display:flex;align-items:center;justify-content:center;background:#040609}.dialog-image-wrap img{width:auto;max-width:100%;max-height:60dvh;object-fit:contain}.dialog-caption{padding:18px 22px 20px;line-height:1.8;color:#d7e0e9;margin:0}
.solve-main{max-width:980px}.field-row{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:center;gap:16px;margin-bottom:16px}.field-row label{font-weight:700;line-height:1.7}.text-input{width:100%;min-width:0;border:1px solid #81878d;background:#424850;color:#fff;border-radius:8px;min-height:48px;padding:10px 13px}.text-input::placeholder{color:#d0d7df;font-size:.9rem}
.solution-title{margin-top:30px;font-size:clamp(1.2rem,2vw,1.6rem)}.solution-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.solution-option{border:1px solid #647180;background:#0d151f;color:white;min-height:58px;padding:12px;border-radius:10px;font-size:clamp(1rem,1.7vw,1.25rem);font-weight:700;text-align:center;line-height:1.7}.solution-option:hover{background:#19232d;border-color:var(--accent)}.solution-option.wrong{background:#992415;border-color:#ff806a}
.feedback{margin-top:20px;border-right:3px solid #ff6651;background:#f1371f1c;color:#ffcfc8;padding:12px 16px;line-height:1.8;font-size:.95rem}.correct-banner{border-right:3px solid #76ce79;color:#b0e2b2;background:#0b210f;padding:14px 18px;margin:0 0 24px;line-height:1.8}
.prevention-textarea{display:block;width:100%;min-height:220px;padding:16px;border:1px solid #8792a0;border-radius:10px;background:#333b45;color:white;resize:vertical;line-height:1.8}.prevention-textarea::placeholder{color:#ddd}.char-counter{color:#b5c0ca;margin:10px 0 0;font-size:.8rem;text-align:left;direction:ltr;unicode-bidi:isolate}
.success-main{width:min(1000px,calc(100% - 40px));margin:0 auto;padding:16px 0 32px;flex:1}.success-art{display:block;width:auto;max-width:100%;max-height:48svh;object-fit:contain;margin:0 auto}.success-summary{max-width:850px;margin:24px auto 0;text-align:center;background:#03080ff2;padding:26px;border:1px solid #526172;border-radius:16px}.success-summary h1{font-size:1.5rem}.success-summary p{color:#d8e3eb;line-height:1.9;font-size:.95rem}.success-summary .actions{justify-content:center}.completion{color:#b8dfa7}
.timeout-note{color:#ffc7b7;background:#3c140d;border:1px solid #b86450;border-radius:9px;margin:14px 0 0;padding:14px;line-height:1.7;display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.notfound{max-width:700px}.site-footer{color:#bbc4d0;font-size:.75rem;text-align:center;padding:20px;line-height:1.7;margin-top:auto}
@media(max-width:900px){.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.age-choices{gap:16px}.panel{padding:28px}.case-choices{gap:16px}.topbar{padding:18px 24px}}
@media(max-width:600px){.topbar{padding:16px;gap:12px;align-items:flex-start}.brand{width:105px}.toolbar{justify-content:flex-end;gap:7px}.mini-button{font-size:.75rem;padding:8px;min-height:36px}.timer{font-size:.95rem}.timer img{width:28px;height:33px}.main-wrap{width:calc(100% - 28px);margin-top:10px}.panel{padding:24px 18px;border-radius:18px}.breadcrumb{font-size:.75rem;gap:7px;margin-bottom:18px}.panel-top{flex-direction:column;align-items:flex-start;gap:16px}.age-badge{max-width:100%;width:190px}.case-choices{grid-template-columns:1fr}.case-choice{padding:16px}.welcome-main{width:calc(100% - 28px);padding:20px 0}.welcome-composition{gap:24px}.welcome-cta{width:190px}.welcome-art{max-height:none}.age-main{padding-top:180px;width:calc(100% - 40px)}.age-choices{grid-template-columns:1fr;gap:18px;max-width:340px}.age-title{margin-bottom:24px}.age-copy{font-size:.8rem}.scenario-text{font-size:1.1rem}.original-action{width:min(100%,280px)}.case-stepper{font-size:.75rem;gap:8px}.evidence-grid{gap:10px}.evidence-card img{height:155px;padding:5px}.evidence-label{padding:10px;font-size:.7rem;flex-direction:column;align-items:flex-start}.field-row{grid-template-columns:1fr;gap:8px}.solution-choices{gap:10px}.solution-option{padding:10px 8px;font-size:1rem}.actions .btn{flex:1;min-width:min(130px,100%);font-size:.9rem}.dialog-top{padding:12px}.dialog-image-wrap{padding:12px}.dialog-caption{padding:16px;font-size:.9rem}.success-summary{padding:22px 16px}.success-main{width:calc(100% - 28px)}.success-art{max-height:none}.prevention-textarea{min-height:200px}}
@media(max-height:520px) and (orientation:landscape){.topbar{padding:12px 22px}.brand{width:100px}.welcome-main{padding-top:0}.welcome-art{max-height:52svh}.welcome-composition{gap:8px}.welcome-cta{width:150px}.age-main{padding-top:80px;padding-bottom:24px}.site-footer{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Gentle motion on the start and age buttons; replayed on each visit. */
@keyframes button-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-7px) scale(1.025)} }
.welcome-cta { animation:button-float 2.8s ease-in-out infinite; }
.age-choice { animation:button-float 3.2s ease-in-out infinite; }
.age-choice:nth-child(2) { animation-delay:.35s; }
.age-choice:nth-child(3) { animation-delay:.7s; }
.welcome-cta:hover,.age-choice:hover { animation-play-state:paused; filter:brightness(1.1); }
@keyframes answer-shake { 0%,100%{transform:translateX(0)} 15%,55%{transform:translateX(-9px)} 35%,75%{transform:translateX(9px)} 90%{transform:translateX(-4px)} }
.solution-option.wrong { background:#bd281b; border:2px solid #ff7564; box-shadow:0 0 18px #ff3b354d; animation:answer-shake .48s ease-in-out; }
.celebration-overlay { position:fixed; inset:0; z-index:1000; overflow:hidden; pointer-events:none; }
.celebration-overlay i { position:absolute; top:-25px; width:11px; height:17px; border-radius:2px; animation:confetti-fall 3.5s ease-in forwards; }
@keyframes confetti-fall { 0%{transform:translate(0,-30px) rotate(0);opacity:1} 85%{opacity:1} 100%{transform:translate(var(--drift),110vh) rotate(var(--spin));opacity:0} }
@media(prefers-reduced-motion:reduce) { .welcome-cta,.age-choice,.solution-option.wrong{animation:none!important}.celebration-overlay{display:none} }

/* One continuous result card, using the original artwork and green theme. */
.success-main{width:min(820px,calc(100% - 40px));display:flex;align-items:center;justify-content:center;padding:20px 0 36px}
.success-card{width:100%;background:linear-gradient(to bottom,transparent 0 12%,#d3d3d3 12% 100%);border-radius:24px;overflow:hidden;border-bottom:5px solid #21845f;filter:drop-shadow(0 16px 26px #0005)}
.success-art{display:block;width:100%;max-width:100%;max-height:none;height:auto;margin:0;object-fit:contain}
.success-summary{max-width:none;margin:0;padding:8px clamp(20px,5vw,48px) 30px;border:0;border-radius:0;background:transparent;color:#102a24;text-align:center}
.success-summary h1{color:#125d43;font-size:clamp(1.25rem,3vw,1.7rem);margin:0 0 8px}
.success-summary p{color:#344b45;margin:0;line-height:1.8}
.success-summary .actions{justify-content:center;margin-top:20px}
.success-summary .btn{background:#176c4d;color:#fff;border:1px solid #125b40;border-radius:12px;box-shadow:0 5px 12px #145d4020;min-height:48px}
.success-summary .btn:hover{background:#125b40}
.success-summary .btn:focus-visible{outline-color:#125b40}
@media(max-width:600px){.success-main{width:calc(100% - 28px);padding:18px 0 28px}.success-card{border-radius:16px}.success-summary{padding:14px 18px 24px}.success-summary .btn{flex:initial;width:100%;font-size:.85rem}}
