:root{--ink:#12313d;--ink-soft:#47646d;--paper:#fbf7ec;--paper-strong:#fffdf7;--sand:#e8d9b5;--sea-deep:#0f5a75;--sea:#2e8fa3;--sea-light:#7fc8d8;--foam:#f4f7f5;--algae:#6e8b3d;--warning:#d9822b;--danger:#b54a3a;--good:#2f7d5b;--radius:20px;--radius-sm:14px;--shadow:0 18px 40px #0f445624;--shadow-soft:0 8px 20px #0f44561a;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--ink);-webkit-tap-highlight-color:transparent;background-color:#0000;background-image:radial-gradient(circle at 15% 5%,#fff6d6f2,#0000 42%),linear-gradient(#f7efd9 0%,#e7f0ed 48%,#cfe7ea 100%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box;margin:0}#root{min-height:100dvh}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.02em;line-height:1.1}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--sea-deep);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app{width:100%;max-width:560px;min-height:100dvh;padding:max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));flex-direction:column;gap:12px;margin:0 auto;display:flex}.topbar{align-items:center;gap:10px;min-height:44px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:8px;font-weight:800;display:flex}.brand-mark{width:26px;height:26px;color:var(--sea-deep);flex:0 0 26px}.icon-button{min-height:40px;color:var(--ink-soft);cursor:pointer;background:#fffdf7c7;border:1px solid #12313d24;border-radius:999px;margin-left:auto;padding:8px 13px;font-size:.8rem;font-weight:700}.round-pill,.streak-pill{background:var(--paper-strong);color:var(--ink-soft);border:1px solid #12313d1a;border-radius:999px;padding:8px 12px;font-size:.8rem;font-weight:700}.streak-pill{color:var(--good);background:#2f7d5b1a;border-color:#2f7d5b33}.hero-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #12313d14;overflow:hidden}.hero-scene{background:var(--sea);height:clamp(180px,28vh,240px)}.hero-copy{flex-direction:column;gap:12px;padding:20px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:var(--sea-deep);font-size:.72rem;font-weight:800}.hero-copy h1{color:var(--ink);font-size:clamp(2.2rem,8vw,3.2rem)}.lead{color:var(--ink-soft);max-width:34ch;font-size:1.05rem;line-height:1.45}.primary-button{background:linear-gradient(135deg, var(--sea-deep), var(--sea));color:#fff;cursor:pointer;border:0;border-radius:999px;min-height:52px;padding:15px 22px;font-size:1.02rem;font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 10px 20px #0f5a7540}.primary-button:active{transform:scale(.98);box-shadow:0 6px 14px #0f5a7538}.secondary-button{color:var(--sea-deep);cursor:pointer;background:#fffdf7cc;border:2px solid #0f5a7540;border-radius:999px;min-height:50px;padding:13px 20px;font-weight:800}.text-button{color:var(--sea-deep);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;align-self:flex-start;padding:10px 0;font-size:.92rem;font-weight:700;text-decoration:underline}.help-list{color:var(--ink-soft);margin:0;padding-left:18px;font-size:.95rem;line-height:1.6}.best-score{color:var(--ink-soft);font-size:.85rem}.footnote{color:var(--ink-soft);text-align:center;opacity:.85;padding:4px 8px 0;font-size:.74rem;line-height:1.45}.game,.end{gap:10px}.meters-card{border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);background:#fffdf7d1;border:1px solid #12313d14;flex-direction:column;gap:9px;padding:12px 14px;display:flex}.meter{flex-direction:column;gap:4px;display:flex}.meter-head{color:var(--ink-soft);justify-content:space-between;gap:8px;font-size:.78rem;font-weight:700;display:flex}.meter-track{background:#12313d1a;border-radius:999px;height:8px;overflow:hidden}.meter-fill{background:linear-gradient(90deg, var(--sea-light), var(--sea-deep));border-radius:999px;height:100%;transition:width .5s}.scene-card{border-radius:var(--radius);height:clamp(170px,26vh,220px);box-shadow:var(--shadow-soft);background:var(--sea);border:1px solid #12313d14;overflow:hidden}.problem-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-soft);border:1px solid #12313d14;flex-direction:column;gap:5px;padding:18px;display:flex}.problem-card h1{font-size:clamp(1.5rem,5.5vw,1.9rem)}.problem-card p:last-child{color:var(--ink-soft);line-height:1.45}.choices{flex-direction:column;gap:10px;display:flex}.choice-card{text-align:left;background:var(--paper-strong);width:100%;min-height:62px;box-shadow:var(--shadow-soft);cursor:pointer;border:2px solid #12313d1a;border-radius:16px;align-items:center;gap:12px;padding:13px 14px;transition:transform .15s,border-color .15s,background .15s;display:flex}.choice-card:hover{border-color:var(--sea);background:#fff}.choice-card:active{transform:scale(.99)}.choice-letter{width:34px;height:34px;color:var(--sea-deep);background:#2e8fa324;border-radius:50%;flex:0 0 34px;place-items:center;font-weight:800;display:grid}.choice-label{font-weight:650;line-height:1.3}.feedback{background:var(--paper);border-radius:var(--radius);border-left:7px solid var(--sea);box-shadow:var(--shadow-soft);flex-direction:column;gap:9px;padding:18px;animation:.25s both card-in;display:flex}.feedback-correct{border-left-color:var(--good)}.feedback-partial{border-left-color:var(--warning)}.feedback-wrong{border-left-color:var(--danger)}.feedback-label{text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800}.feedback-correct .feedback-label{color:var(--good)}.feedback-partial .feedback-label{color:var(--warning)}.feedback-wrong .feedback-label{color:var(--danger)}.feedback-meter{color:var(--sea-deep);font-size:.95rem;font-weight:800}.fact{color:var(--ink);background:#2e8fa314;border-radius:12px;padding:11px 12px;font-size:.92rem;line-height:1.45}.source{color:var(--ink-soft);font-size:.85em}.feedback .primary-button{margin-top:4px}.result-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #12313d14;flex-direction:column;gap:10px;padding:18px;display:flex}.result-card h1{font-size:clamp(1.9rem,7vw,2.6rem)}.score-line{color:var(--ink-soft);font-size:1.05rem}.score-line strong{color:var(--sea-deep);font-size:2.6rem;line-height:1}.before-after{border-radius:var(--radius-sm);background:var(--sea);touch-action:pan-y;height:clamp(180px,28vh,230px);margin:6px 0;position:relative;overflow:hidden}.ba-layer{position:absolute;inset:0}.ba-after{z-index:1}.ba-label{z-index:3;color:var(--ink-soft);background:#fffdf7d9;border-radius:999px;padding:5px 9px;font-size:.72rem;font-weight:800;position:absolute;top:10px}.ba-label-left{left:10px}.ba-label-right{right:10px}.ba-range{z-index:4;width:calc(100% - 32px);accent-color:var(--sea-deep);position:absolute;bottom:12px;left:16px;right:16px}.actions-card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-soft);border:1px solid #12313d14;flex-direction:column;gap:8px;padding:16px 18px;display:flex}.actions-card h2{color:var(--sea-deep);font-size:1.08rem}.actions-card ul{color:var(--ink-soft);flex-direction:column;gap:6px;margin:0;padding-left:18px;line-height:1.4;display:flex}.end-buttons{flex-direction:column;gap:10px;display:flex}.share-note{text-align:center;color:var(--good);font-size:.9rem;font-weight:700}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (width>=700px){.app{padding-top:24px;padding-bottom:28px}.hero-scene{height:250px}.scene-card{height:230px}}@media (height<=680px){.app{padding-top:max(10px, env(safe-area-inset-top));gap:7px}.topbar{min-height:40px}.hero-scene{height:160px}.scene-card{height:120px}.meters-card{gap:5px;padding:7px 11px}.problem-card{gap:2px;padding:10px 12px}.problem-card h1{font-size:1.32rem}.choices{gap:7px}.choice-card{min-height:50px;padding:9px 11px}.choice-letter{flex-basis:30px;width:30px;height:30px}}@property --water-top{syntax:"<color>";inherits:true;initial-value:#6f8f5a}@property --water-bottom{syntax:"<color>";inherits:true;initial-value:#3f5b45}.sea-scene{--water-top:#6f8f5a;--water-bottom:#3f5b45;border-radius:inherit;width:100%;height:100%;transition:--water-top .9s,--water-bottom .9s;display:block;position:relative;overflow:hidden}.sea-scene svg{width:100%;height:100%;display:block}.sea-water-stop{transition:stop-color .9s}@keyframes sea-wave-drift{0%{translate:0}to{translate:100px}}.sea-wave{fill:none;stroke:#f4f7f5;stroke-width:1.4px;stroke-linecap:round;opacity:.45;animation:13s linear infinite sea-wave-drift}.sea-wave--back{stroke-width:1px;opacity:.28;animation-duration:19s;animation-direction:reverse}@keyframes sea-fish-swim{0%,to{translate:0}50%{translate:5px -1.5px}}.sea-fish{animation:6s ease-in-out infinite sea-fish-swim}.sea-fish:nth-of-type(2n){animation-duration:7.5s;animation-delay:-1.5s}.sea-fish:nth-of-type(3n){animation-duration:9s;animation-delay:-3s}@keyframes sea-seal-bob{0%,to{translate:0}50%{translate:0 -2.5px}}.sea-seal{animation:5s ease-in-out infinite sea-seal-bob}@keyframes sea-kelp-sway{0%,to{rotate:-2deg}50%{rotate:2.5deg}}.sea-kelp{transform-box:fill-box;transform-origin:50% 100%;animation:6s ease-in-out infinite sea-kelp-sway}.sea-kelp:nth-of-type(2n){animation-duration:8s;animation-direction:reverse;animation-delay:-2.5s}@keyframes sea-algae-pulse{0%,to{opacity:.62}50%{opacity:.95}}.sea-algae-blob{animation:5s ease-in-out infinite sea-algae-pulse}.sea-algae-blob:nth-of-type(2n){animation-duration:6.5s;animation-delay:-2s}.sea-algae-blob:nth-of-type(3n){animation-duration:7.5s;animation-delay:-4s}@keyframes sea-oil-drift{0%,to{translate:0}50%{translate:3px .5px}}.sea-oil{animation:9s ease-in-out infinite sea-oil-drift}@keyframes sea-litter-bob{0%,to{translate:0}50%{translate:0 -1.8px}}.sea-litter{animation:4.5s ease-in-out infinite sea-litter-bob}.sea-litter:nth-of-type(2n){animation-duration:6s;animation-delay:-1.8s}@keyframes sea-pill-drift{0%,to{translate:0}50%{translate:3px -2px}}.sea-pill{animation:7s ease-in-out infinite sea-pill-drift}.sea-pill:nth-of-type(2n){animation-duration:9s;animation-delay:-2.5s}@keyframes sea-invasive-wiggle{0%,to{translate:0}50%{translate:2px -1px}}.sea-invasive{animation:5.5s ease-in-out infinite sea-invasive-wiggle}@media (prefers-reduced-motion:reduce){.sea-scene *,.sea-scene :before,.sea-scene :after{animation:none!important}}