@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");:root{--grid:8px;--safe-zone:15%;--safe-zone-min:16px;--max-width:1048px;--radius-soft:16px;--radius-large:32px;--panel-radius:40px;--color-emerald:#22c55e;--color-mint:#4ade80;--color-sky:#93c5fd;--color-blue:#60a5fa;--color-violet:#4f46e5;--color-amber:#f59e0b;--color-pink:#f472b6;--color-ink:#0f172a;--color-paper:#f8faff;--shadow-ui:0 8px 20px rgba(0,0,0,.08);--shadow-magic:0 0 24px rgba(79,70,229,.25);--text-display:48px;--text-h1:40px;--text-h2:32px;--text-h3:24px;--text-body-lg:20px;--text-body:16px;--text-caption:14px;--duration-ui:220ms;--duration-hover:140ms;--duration-reward:800ms;--duration-cinematic:1200ms;--duration-region:200ms;--duration-flame:3.4s;--duration-crystal:3.6s;--duration-trace:1800ms;--mascot-height:248px;--mascot-width:120px;--mascot-head-ratio:38%;--mascot-body-ratio:42%;--mascot-leg-ratio:10%;--mascot-flame-ratio:15%;--max-flame-shift:3%}*{box-sizing:border-box}* :focus-visible{outline:2px solid var(--color-violet);outline-offset:2px}body,html{margin:0;min-height:100%}body{min-height:100vh;font-family:Atkinson Hyperlegible,sans-serif;color:var(--color-ink);background:radial-gradient(circle at 30% 8%,rgba(79,70,229,.18),transparent 38%),linear-gradient(180deg,var(--color-sky),var(--color-emerald))}main{width:100%}.safe-zone,body{padding:max(var(--safe-zone-min),var(--safe-zone))}.safe-zone{min-height:100vh;display:grid;grid-gap:calc(var(--grid) * 2);gap:calc(var(--grid) * 2);align-content:start}.panel,.safe-zone{width:100%;margin:0 auto}.panel{max-width:var(--max-width);padding:calc(var(--grid) * 3);border:2px solid rgba(15,23,42,.12);border-radius:var(--panel-radius);background:rgba(248,250,255,.92);box-shadow:var(--shadow-ui)}.home-shell{width:min(100%,var(--max-width))}.home-panel,.styleguide-section{text-align:left}.panel h1{margin:0 0 calc(var(--grid) * 2);font-size:var(--text-h1);line-height:1.1}h2{font-size:var(--text-h2);line-height:1.15}h2,h3{margin:0 0 calc(var(--grid) * 1.5)}h3{font-size:var(--text-h3);line-height:1.2}button,input,label,li,p{font-size:var(--text-body);line-height:1.45}.caption{display:block;margin:0 0 var(--grid);font-size:var(--text-caption);text-transform:uppercase;letter-spacing:.02em}.button-pill,.button-primary,.button-secondary,.pill-chip{font-size:16px}.button-primary{display:inline-flex;width:min(100%,240px);height:64px;border:0;border-radius:24px;padding:0 24px;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:700;transition:transform var(--duration-hover) ease,box-shadow var(--duration-hover) ease;background:linear-gradient(135deg,var(--color-violet),var(--color-mint));box-shadow:var(--shadow-magic)}.button-primary:focus-visible,.button-primary:hover{transform:translateY(-1px)}.button-secondary{display:inline-flex;height:56px;border:0;border-radius:16px;padding:0 16px;font-weight:700;background:rgba(96,165,250,.24);color:var(--color-ink)}.button-pill,.button-secondary{align-items:center;justify-content:center}.button-pill{border:0;border-radius:999px;height:38px;padding:0 12px;background:rgba(96,165,250,.22)}.button-row{display:flex;flex-wrap:wrap;gap:var(--grid);align-items:center;margin-top:var(--grid)}.styleguide-root{display:grid;grid-gap:calc(var(--grid) * 2);gap:calc(var(--grid) * 2)}.scene-title{margin-bottom:var(--grid)}.scene-metadata{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:calc(var(--grid) * 2)}.meta{border-radius:999px;padding:4px 10px;background:rgba(15,23,42,.09);color:var(--color-ink)}.portal-wrap{display:grid;place-items:center;grid-gap:16px;gap:16px}.portal-canvas{position:relative;width:min(480px,100%);aspect-ratio:3/4;border-radius:32px;overflow:hidden;background:linear-gradient(180deg,rgba(74,222,128,.32),rgba(147,197,253,.35));box-shadow:var(--shadow-ui),0 0 28px rgba(79,70,229,.25)}.portal-halo{position:absolute;width:min(350px,90%);height:min(350px,90%);left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(79,70,229,.35),transparent 62%);pointer-events:none}.portal-door{position:absolute;inset:10% 20% 10% 12%;border-radius:48px;border:2px solid hsla(0,0%,100%,.35);background:linear-gradient(180deg,rgba(34,197,94,.86),rgba(79,70,229,.62));transition:transform var(--duration-cinematic) ease,-webkit-clip-path var(--duration-cinematic) ease;transition:clip-path var(--duration-cinematic) ease,transform var(--duration-cinematic) ease;transition:clip-path var(--duration-cinematic) ease,transform var(--duration-cinematic) ease,-webkit-clip-path var(--duration-cinematic) ease;-webkit-clip-path:inset(0 52% 0 0);clip-path:inset(0 52% 0 0);box-shadow:inset 0 0 22px rgba(79,70,229,.25)}.portal-door.open{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}.portal-door:after{content:"";position:absolute;inset:8px;border-radius:44px;border:2px solid rgba(248,250,255,.45)}.portal-char{position:absolute;right:-10%;top:24%;transform:translateX(-12%)}.portal-caption{text-align:center;margin:0;color:var(--color-ink)}.map-card{position:relative;width:min(640px,100%);height:min(360px,56vw);margin:0 auto;border-radius:32px;overflow:hidden;background:var(--color-blue);box-shadow:var(--shadow-ui)}.map-layers{border-radius:32px;overflow:hidden}.map-layer,.map-layers{position:absolute;inset:0;transition:transform var(--duration-region) ease-out}.layer-z0{background:radial-gradient(circle at 80% 10%,rgba(240,249,255,.8),transparent 55%),linear-gradient(180deg,var(--color-sky),var(--color-blue))}.layer-z1{background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.09)),linear-gradient(145deg,rgba(34,197,94,.36),rgba(22,163,74,.2))}.layer-z2{background:linear-gradient(120deg,rgba(15,23,42,.16),transparent 35%),repeating-linear-gradient(-45deg,rgba(74,222,128,.32),rgba(74,222,128,.32) 4px,transparent 0,transparent 14px);-webkit-mask-image:radial-gradient(circle at 50% 55%,#000 62%,transparent 84%);mask-image:radial-gradient(circle at 50% 55%,#000 62%,transparent 84%)}.layer-z3{background:radial-gradient(circle at 20% 80%,hsla(0,0%,100%,.22),transparent 45%),linear-gradient(145deg,rgba(22,163,74,.3),rgba(74,222,128,.08))}.crystal{width:280px;height:280px;max-width:65%;max-height:65%;background:radial-gradient(circle,hsla(0,0%,100%,.82),rgba(79,70,229,.24));box-shadow:0 0 0 0 rgba(79,70,229,.2);animation:crystalPulse var(--duration-crystal) ease-in-out infinite}.crystal,.crystal:before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}.crystal:before{content:"";width:min(350px,95%);height:min(350px,95%);background:radial-gradient(circle,rgba(147,197,253,.22),rgba(147,197,253,0));pointer-events:none}.crystal:after{content:"";position:absolute;inset:16%;border-radius:50%;background:linear-gradient(145deg,rgba(96,165,250,.65),rgba(34,197,94,.45))}.region-frame{position:absolute;inset:14%;border:2px solid rgba(15,23,42,.12);border-radius:16px;display:grid;place-items:center;transition:transform var(--duration-region) ease-out}.region-frame.zoomed{transform:scale(1.35)}.region-label{padding:8px 14px;border-radius:16px;background:hsla(0,0%,100%,.86);color:var(--color-ink);font-weight:700;box-shadow:var(--shadow-ui)}.kingdom-levelline{display:flex;gap:var(--grid);margin-top:var(--grid);flex-wrap:wrap}.kingdom-levelline span{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid rgba(15,23,42,.2);font-weight:700}.kingdom-levelline .active-level{border-color:var(--color-violet);color:var(--color-violet)}.evolution-levels{display:grid;grid-gap:var(--grid);gap:var(--grid)}.level-pill{display:grid;grid-template-columns:48px 1fr;grid-gap:12px;gap:12px;align-items:center;padding:12px;border-radius:18px;background:hsla(0,0%,100%,.7)}.level-pill.active{border:2px solid rgba(79,70,229,.45);box-shadow:var(--shadow-magic)}.level-num{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--color-violet);color:#fff;font-weight:700}.weather-card{border:2px solid rgba(15,23,42,.1);border-radius:20px;background:hsla(0,0%,100%,.86);overflow:hidden}.weather-event{padding:14px 16px;border-left:6px solid var(--color-mint)}.hero-state{display:grid;grid-gap:var(--grid);gap:var(--grid)}.flame-shell{display:flex;align-items:flex-end;gap:12px}.flame-holder{position:relative;width:96px;height:96px;display:grid;place-items:center}.courage-flame{position:absolute;bottom:8px;width:calc(var(--mascot-height) * var(--mascot-flame-ratio));height:calc(var(--mascot-height) * var(--mascot-flame-ratio));border-radius:50% 50% 40% 40%;transform-origin:center;background:radial-gradient(circle,var(--color-amber),var(--color-pink));animation:flameIdle var(--duration-flame) ease-in-out infinite;box-shadow:0 0 16px rgba(245,158,11,.45)}.courage-flame.sleep{animation-name:flameSleep;background:radial-gradient(circle,#cbd5e1,#94a3b8);box-shadow:0 0 8px rgba(148,163,184,.2)}.trace-area{min-height:72px;border-radius:14px;border:2px solid rgba(15,23,42,.1);background:hsla(0,0%,100%,.85);padding:10px 12px;overflow:hidden}.trace-text{display:inline-block;font-size:var(--text-body-lg);font-weight:700;color:var(--color-violet);white-space:nowrap;transform:translateX(-5%);-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);opacity:0;transition:opacity var(--duration-trace) linear,-webkit-clip-path var(--duration-trace) linear;transition:clip-path var(--duration-trace) linear,opacity var(--duration-trace) linear;transition:clip-path var(--duration-trace) linear,opacity var(--duration-trace) linear,-webkit-clip-path var(--duration-trace) linear}.trace-text.active{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);opacity:1}.mascot-sprite{position:relative;width:var(--mascot-width);height:var(--mascot-height);margin:0 auto}.mascot-arm,.mascot-body,.mascot-cap,.mascot-cape,.mascot-head,.mascot-leg{background:#000}.mascot-head{top:0;width:40px;height:calc(var(--mascot-height) * var(--mascot-head-ratio));border-radius:50% 50% 48% 48%;z-index:2}.mascot-body,.mascot-head{position:absolute;left:50%;transform:translateX(-50%)}.mascot-body{top:calc(var(--mascot-height) * var(--mascot-head-ratio));width:48px;height:calc(var(--mascot-height) * var(--mascot-body-ratio));border-radius:46% 46% 42% 42%;z-index:1}.mascot-leg{position:absolute;bottom:0;width:18px;height:calc(var(--mascot-height) * var(--mascot-leg-ratio));border-radius:0 0 8px 8px;z-index:0}.mascot-leg.left{left:32px}.mascot-leg.right{right:32px}.mascot-leg:before{content:"";position:absolute;left:2px;top:2px;width:14px;height:8px;border-radius:0 0 4px 4px}.mascot-arm{position:absolute;top:calc(var(--mascot-height) * .58);left:24px;width:62px;height:22px;transform:rotate(-28deg);border-radius:12px;transform-origin:left center}.mascot-arm:before{content:"";position:absolute;right:-2px;top:2px;width:16px;height:12px;border-radius:8px}.mascot-cap{position:absolute;left:42px;top:4px;width:34px;height:18px;border-radius:16px 16px 0 0}.mascot-cape{position:absolute;left:34px;top:calc(var(--mascot-height) * .62);width:52px;height:76px;border-radius:0 0 48px 48px;background:rgba(79,70,229,.22)}.mascot-hat-none .mascot-cap{display:none}.mascot-hat-cap .mascot-cap{display:block;background:var(--color-violet)}.mascot-hat-leaf .mascot-cap{display:block;background:var(--color-emerald);border-radius:50% 50% 30% 30%;width:30px;height:22px}.mascot-cape-soft .mascot-cape{background:rgba(74,222,128,.23)}.mascot-cape-storm .mascot-cape{background:linear-gradient(180deg,rgba(96,165,250,.4),rgba(79,70,229,.2))}.mascot-cape-rune .mascot-cape{background:linear-gradient(160deg,rgba(245,158,11,.3),rgba(79,70,229,.24))}.mascot-aura-dawn:after,.mascot-aura-mist:after{content:"";position:absolute;left:10px;top:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:50%;pointer-events:none}.mascot-aura-dawn:after{box-shadow:0 0 0 0 rgba(245,158,11,.24);animation:auraDawn 4s linear infinite}.mascot-aura-mist:after{box-shadow:0 0 0 0 rgba(96,165,250,.2);animation:auraMist 4s linear infinite}.mascot-signature{margin-top:10px;text-align:center}.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:8px;gap:8px}.book-cell{min-height:80px;border-radius:14px;border:2px solid rgba(15,23,42,.06);background:#fff;box-shadow:var(--shadow-ui);display:grid;place-items:center}.book-cell.empty{background:hsla(0,0%,100%,.4)}.book-cell.active-item{border-color:rgba(79,70,229,.35);box-shadow:var(--shadow-magic)}.question-card{margin-bottom:12px;border:2px solid rgba(15,23,42,.12);border-radius:18px;padding:12px;background:hsla(0,0%,100%,.75)}.question-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.feedback{margin:8px 0 0;color:var(--color-ink);font-weight:600}.day-input{margin-top:8px;margin-right:8px;width:min(220px,100%);height:48px;border:2px solid rgba(15,23,42,.15);border-radius:12px;padding:0 12px;font-size:var(--text-body)}.mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;gap:8px}.mini-cell{min-height:96px;border:2px solid rgba(15,23,42,.09);border-radius:14px;padding:10px;background:hsla(0,0%,100%,.9)}.mini-cell h3{margin-bottom:8px;font-size:18px}.mini-cell p{margin:0;font-size:14px}.pill-chip{display:inline-flex;align-items:center;justify-content:center;border:2px solid rgba(15,23,42,.2);border-radius:999px;height:38px;padding:0 12px;font-weight:700;background:hsla(0,0%,100%,.85)}.pill-chip.active{border-color:rgba(79,70,229,.5);background:rgba(79,70,229,.2)}.meta-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-gap:6px;gap:6px}.trace-hint{margin:0 0 8px}@keyframes crystalPulse{0%{transform:translate(-50%,-50%) scale(.98);box-shadow:0 0 0 0 rgba(79,70,229,.18)}50%{transform:translate(-50%,-50%) scale(1.015);box-shadow:0 0 0 35px rgba(79,70,229,0)}to{transform:translate(-50%,-50%) scale(.98);box-shadow:0 0 0 0 rgba(79,70,229,.18)}}@keyframes flameIdle{0%{transform:translateY(0) scale(1)}50%{transform:translateY(calc(-1 * var(--max-flame-shift))) scale(1.03)}to{transform:translateY(0) scale(1)}}@keyframes flameSleep{0%{transform:translateY(0) scale(1)}to{transform:translateY(2px) scale(.96)}}@keyframes auraDawn{0%{box-shadow:0 0 0 0 rgba(245,158,11,.24)}70%{box-shadow:0 0 0 16px rgba(245,158,11,0)}to{box-shadow:0 0 0 0 rgba(245,158,11,.24)}}@keyframes auraMist{0%{box-shadow:0 0 0 0 rgba(96,165,250,.2)}70%{box-shadow:0 0 0 16px rgba(96,165,250,0)}to{box-shadow:0 0 0 0 rgba(96,165,250,.2)}}@media (max-width:860px){.panel{padding:calc(var(--grid) * 2)}.button-primary,.map-card,.portal-canvas{width:100%}h1{font-size:32px}h2{font-size:28px}h3{font-size:20px}.crystal{width:65vw;height:65vw}}