/* DT Journey — styles */
:root{--ink:#2d2440;--paper:#fff8ec;--reward:#ffd166;--player:#ff6b6b;--s1:#2f6fd6;--s2:#d93a3a;--s3:#e8821e;--s4:#14a3a3;--s5:#2e9e4f;--s6:#8a4fd6;--s8:#e84f8a;--sky:#9fd3e6;--grass:#8fc36b}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1b2a3a;font-family:'Nunito',sans-serif;color:var(--ink);overflow:hidden}
:root{color-scheme:only light}
button{font-family:inherit;color:var(--ink)}
input,textarea,select{color:var(--ink);background-color:#fff}
button:disabled{color:var(--ink)}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#1b2a3a}
.stage-wrap{position:relative;width:1600px;height:900px;transform-origin:center center;flex:none}
.stage{position:absolute;inset:0;width:1600px;height:900px;overflow:hidden;background:var(--sky)}
.stage>svg{position:absolute;left:0;top:0}
.overlay{position:absolute;inset:0;pointer-events:none}
.overlay>*{pointer-events:auto}
.fredoka{font-family:'Fredoka',sans-serif}

/* ---------- animations ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes swing{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(16deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes slide{0%{transform:translateX(-10px)}100%{transform:translateX(10px)}}
@keyframes slidefar{0%{transform:translateX(-40px)}100%{transform:translateX(40px)}}
@keyframes puff{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-70px) scale(1.5)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes rise{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-90px);opacity:0}}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes belt{from{transform:translateX(-420px)}to{transform:translateX(1700px)}}
@keyframes beltticks{from{transform:translateX(0)}to{transform:translateX(60px)}}
@keyframes grow{0%{transform:scale(0);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sweep{0%{transform:translateX(0)}100%{transform:translateX(28px)}}
@keyframes press{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
@keyframes bend{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.5)}}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes flicker{0%,100%{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.1) scaleX(.95)}60%{transform:scaleY(.92) scaleX(1.05)}}
@keyframes spark{0%,100%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.3)}40%{opacity:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-40}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes popc{0%{transform:translateX(-50%) scale(.6);opacity:0}70%{transform:translateX(-50%) scale(1.08);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes confetti{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(960px) rotate(720deg)}}
.a-spin{transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite}
.a-spin-slow{transform-box:fill-box;transform-origin:center;animation:spin 10s linear infinite}
.a-spin-fast{transform-box:fill-box;transform-origin:center;animation:spin 1s linear infinite}
.a-spin-rev{transform-box:fill-box;transform-origin:center;animation:spin 5s linear infinite reverse}
.a-swing{transform-box:fill-box;transform-origin:bottom center;animation:swing 2.4s ease-in-out infinite}
.a-bob{animation:bob 2.2s ease-in-out infinite}
.a-blink{animation:blink 1.4s ease-in-out infinite}
.a-slide{animation:slide 1.6s ease-in-out infinite alternate}
.a-slide-far{animation:slidefar 2.4s ease-in-out infinite alternate}
.a-puff{transform-box:fill-box;transform-origin:center;animation:puff 3s ease-out infinite}
.a-drift{animation:drift 16s ease-in-out infinite alternate}
.a-drift-r{animation:drift 22s ease-in-out infinite alternate-reverse}
.a-pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-in-out infinite}
.a-rise{animation:rise 3s ease-out infinite}
.a-fill{animation:fill 1.6s ease-out both}
.a-fillx{animation:fillx 1.6s ease-out both}
.a-shake{animation:shake .6s ease-in-out infinite}
.a-belt{animation:belt 16s linear infinite}
.a-belt-ticks{animation:beltticks .6s linear infinite}
.a-grow{transform-box:fill-box;transform-origin:center;animation:grow .6s ease-out both}
.a-fade{animation:fade .8s ease-out both}
.a-sweep{animation:sweep 2.2s ease-in-out infinite alternate}
.a-press{animation:press 1.8s ease-in-out infinite}
.a-bend{transform-box:fill-box;transform-origin:bottom center;animation:bend 2.4s ease-in-out infinite}
.a-drip{animation:drip 1.4s ease-in infinite}
.a-flicker{transform-box:fill-box;transform-origin:bottom center;animation:flicker .5s ease-in-out infinite}
.a-spark{transform-box:fill-box;transform-origin:center;animation:spark 1.6s ease-out infinite}
.a-ring{transform-box:fill-box;transform-origin:center;animation:ring 1.8s ease-out infinite}
.a-dash{animation:dash 1s linear infinite}
.a-wobble{transform-box:fill-box;transform-origin:bottom center;animation:wobble 1.6s ease-in-out infinite}
.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}.d4{animation-delay:.6s}.d5{animation-delay:.75s}.d6{animation-delay:.9s}.d7{animation-delay:1.05s}.d8{animation-delay:1.2s}
.paused, .paused *{animation-play-state:paused!important}
.dim{opacity:.22;transition:opacity .5s}
.grey{filter:grayscale(1);opacity:.45}
.grey *{animation:none!important}
@media (prefers-reduced-motion:reduce){*:not(.vv-root, .vv-root *, .ko-root, .ko-root *){animation-duration:.01s!important;animation-iteration-count:1!important}}

/* ---------- callouts ---------- */
.tag{position:absolute;transform:translateX(-50%);font-family:'Fredoka',sans-serif;font-weight:700;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:5px 14px;box-shadow:0 4px 0 var(--ink);animation:popc .45s ease-out both;white-space:nowrap;line-height:1.15}
.tag.in,.tag.blue{background:#9fd3ff}.tag.pr,.tag.yellow{background:var(--reward)}.tag.out,.tag.pink{background:#f6c6da}.tag.auto,.tag.green{background:#bfe3a0}.tag.red{background:#f2b7a6}.tag.orange{background:#ffd5a1}.tag.grey{background:#dfe3e8}.tag.dark{background:var(--ink);color:#fff}
.note{position:absolute;font-weight:700;font-size:17px;line-height:1.3;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:12px 16px;box-shadow:0 5px 0 var(--ink);animation:pop .45s ease-out both}
.note.blue{background:#dff6ff}.note.yellow{background:#fff4c2}.note.red{background:#ffe3e3}.note.green{background:#e3f6e3}.note.pink{background:#ffe3ee}
.note b{font-family:'Fredoka',sans-serif;font-size:19px}
.biglabel{position:absolute;white-space:nowrap;transform:translateX(-50%);font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;color:#fff;border:4px solid var(--ink);border-radius:18px;padding:6px 22px;box-shadow:0 6px 0 var(--ink);animation:popc .5s ease-out both;letter-spacing:1px}
.counter{position:absolute;display:flex;flex-direction:column;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:6px 14px;box-shadow:0 4px 0 var(--ink);animation:pop .45s ease-out both}
.counter b{font-family:'Fredoka',sans-serif;font-size:34px;line-height:1}.counter span{font-size:12px;font-weight:800;opacity:.7}

/* ---------- UI ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:4px solid var(--ink);border-radius:16px;padding:10px 20px;box-shadow:0 6px 0 var(--ink);font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;cursor:pointer;color:var(--ink);background:var(--paper);transition:transform .12s,box-shadow .12s;text-decoration:none;line-height:1.1}
.btn:hover{transform:translateY(-3px)}.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--ink)}
.btn.primary{background:var(--s1);color:#fff}.btn.gold{background:var(--reward)}.btn.green{background:var(--s5);color:#fff}.btn.pink{background:var(--s8);color:#fff}.btn.red{background:var(--s2);color:#fff}
.btn.ghost{background:transparent;box-shadow:none;border-color:transparent;opacity:.75}.btn.ghost:hover{opacity:1;transform:none}
.btn.small{font-size:16px;padding:7px 14px;border-width:3px;box-shadow:0 4px 0 var(--ink)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.pill{display:inline-flex;align-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;color:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 12px}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:24px;box-shadow:0 10px 0 var(--ink);padding:20px 26px;color:var(--ink)}
.topbar{position:absolute;left:28px;top:20px;display:flex;align-items:center;gap:12px}
.hud{position:absolute;right:28px;top:20px;display:flex;align-items:center;gap:10px;background:var(--paper);border:4px solid var(--ink);border-radius:18px;padding:6px 14px;box-shadow:0 6px 0 var(--ink);font-family:'Fredoka',sans-serif}
.hud .avatar{width:38px;height:38px;border-radius:50%;background:var(--player);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:18px}
.hud .name{font-weight:700;font-size:18px}
.hud .stars{font-weight:600;font-size:15px;background:var(--reward);border:3px solid var(--ink);border-radius:12px;padding:3px 10px}
.title-big{font-family:'Fredoka',sans-serif;font-weight:700;font-size:54px;line-height:1;color:var(--paper);text-shadow:0 5px 0 var(--ink),-3px -3px 0 var(--ink),3px -3px 0 var(--ink),-3px 3px 0 var(--ink),3px 3px 0 var(--ink);letter-spacing:1px}
.subtitle{font-weight:800;font-size:16px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:4px 14px;display:inline-block}
.star-row{display:inline-flex;gap:4px}
.star-row i{width:22px;height:22px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#d9cfbb;display:inline-block}
.star-row i.on{background:var(--reward)}
.star-row.big i{width:48px;height:48px}

/* ---------- sign-in ---------- */
.signin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:720px;display:flex;flex-direction:column;gap:16px;align-items:stretch}
.signin h1{font-family:'Fredoka',sans-serif;font-size:40px;margin:0;line-height:1}
.signin p{margin:0;font-weight:700;font-size:16px}
.signin input{font-family:'Fredoka',sans-serif;font-size:32px;font-weight:700;letter-spacing:6px;text-align:center;border:4px solid var(--ink);border-radius:14px;padding:10px;background:#fff;color:var(--ink);width:100%}
.signin input:focus{outline:4px solid var(--reward)}
.namegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:300px;overflow:auto;padding:4px}
.namegrid button{border:3px solid var(--ink);border-radius:12px;background:#fff;padding:10px 6px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.namegrid button:hover{background:#fff4c2}.namegrid button.taken{opacity:.35;cursor:default;text-decoration:line-through}.namegrid button.sel{background:var(--reward)}
.pinrow{display:flex;gap:10px;justify-content:center}
.pinrow input{width:70px;font-size:40px;letter-spacing:0}
.err{color:var(--s2);font-weight:800}

/* ---------- map ---------- */
.badge{position:absolute;display:flex;align-items:center;gap:12px;background:var(--paper);border:4px solid var(--ink);border-radius:22px;padding:8px 16px 8px 8px;box-shadow:0 8px 0 var(--ink),0 14px 24px rgba(45,36,64,.25);cursor:pointer;font-family:'Fredoka',sans-serif;color:var(--ink);transition:transform .15s;text-align:left}
.badge:hover{transform:translateY(-4px) scale(1.03)}
.badge.locked{cursor:default;opacity:.8}.badge.locked:hover{transform:none}
.badge .num{width:46px;height:46px;border-radius:50%;border:4px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex:none}
.badge h3{margin:0;font-size:20px;font-weight:600;line-height:1}
.badge p{margin:3px 0 0;font-size:12px;font-family:'Nunito',sans-serif;font-weight:800;opacity:.75}
.lm{cursor:pointer;transition:filter .5s,opacity .5s}
.lm.off{filter:grayscale(1);opacity:.45}.lm.off *{animation:none!important}
.lm .halo{opacity:0;transition:opacity .5s}.lm.on .halo{opacity:.9}
.lm:hover{opacity:1}
.lm.sel .selring{opacity:1;transform-box:fill-box;transform-origin:center;animation:ring 1.4s ease-out infinite}
.lm .selring{opacity:0}
.lbl{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;font-family:'Fredoka',sans-serif;color:var(--ink);text-align:center}
.lbl b{font-size:13px;font-weight:700;color:#fff;border:3px solid var(--ink);border-radius:999px;padding:2px 10px}
.lbl > span:not(.lblrow){font-size:16px;font-weight:600;background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:4px 10px;box-shadow:0 4px 0 var(--ink);max-width:190px;line-height:1.1}
.panel{position:absolute;left:32px;right:32px;bottom:24px;min-height:150px;display:flex;align-items:center;gap:24px}
.panel .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(45,36,64,.9);color:var(--paper);border-radius:999px;padding:8px 18px;font-weight:800;font-size:14px}

/* ---------- lesson player ---------- */
.narr{position:absolute;left:28px;right:28px;bottom:20px;min-height:150px;display:flex;align-items:center;gap:22px;padding:16px 24px}
.narr .host{width:60px;height:60px;border-radius:50%;background:var(--s1);border:4px solid var(--ink);flex:none;display:flex;align-items:center;justify-content:center}
.narr .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.narr .body h2{font-family:'Fredoka',sans-serif;font-weight:700;font-size:25px;line-height:1.1;margin:0}
.narr .body p{margin:0;font-weight:600;font-size:17px;line-height:1.35;max-width:1100px;white-space:pre-line}
.narr .nav{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none}
.dots{position:absolute;left:28px;top:78px;display:flex;gap:5px;flex-wrap:wrap;max-width:620px;background:rgba(255,248,236,.85);border:3px solid var(--ink);border-radius:10px;padding:5px 8px}
.dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:#e4d9c6;display:block}
.dots i.on{background:var(--s1)}.dots i.done{background:var(--reward)}.dots i.part{width:4px;border:0;background:transparent}
.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:flex;align-items:center;gap:10px;border:4px solid var(--ink);border-radius:14px;padding:9px 14px;background:#fff;box-shadow:0 5px 0 var(--ink);font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px;color:var(--ink);cursor:pointer;text-align:left;line-height:1.15;transition:transform .12s}
.opt:hover{transform:translateY(-2px)}
.opt.right{background:#bfe3a0}.opt.wrong{background:#f2b7a6;opacity:.85}.opt.sel{background:#fff4c2}.opt:disabled{cursor:default;transform:none}
.feedback{font-weight:800;font-size:15px;min-height:20px}
.feedback.good{color:var(--s5)}.feedback.bad{color:var(--s2)}
.sortwrap{display:flex;gap:14px;align-items:flex-start}
.sortitems{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.sortbins{display:flex;gap:10px;flex:1.2}
.sortbin{flex:1;min-height:90px;border:4px dashed var(--ink);border-radius:14px;padding:8px;background:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:6px}
.sortbin h4{margin:0;font-family:'Fredoka',sans-serif;font-size:16px}
.sortbin.active{background:#fff4c2;border-style:solid}
.chip{border:3px solid var(--ink);border-radius:999px;padding:5px 12px;background:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.chip.sel{background:var(--reward)}.chip.right{background:#bfe3a0}.chip.wrong{background:#f2b7a6}
.orderlist{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.orderlist .slot{min-width:140px;min-height:40px;border:3px dashed var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;background:rgba(255,255,255,.5);padding:4px 10px}
.orderlist .slot.filled{border-style:solid;background:#fff}
textarea.written{width:100%;min-height:70px;border:4px solid var(--ink);border-radius:14px;padding:10px;font-family:'Nunito',sans-serif;font-weight:600;font-size:16px;resize:vertical;background:#fff}
.markbox{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600;line-height:1.35;max-height:120px;overflow:auto}
.markbox .hit{color:var(--s5);font-weight:800}.markbox .miss{color:var(--s2);font-weight:800}

/* stages */
.stagestrip{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stg{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:999px;padding:4px 12px 4px 4px;background:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.stg b{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#cfd8e0;font-size:15px}
.stg.done b{background:var(--s5);color:#fff}.stg.on{background:#fff4c2}.stg.on b{background:var(--s3);color:#fff}.stg.next b{background:var(--reward)}.stg.next{animation:bob 1.6s ease-in-out infinite}
.stg.locked{opacity:.45;cursor:default;box-shadow:none}
.hotspot.next circle:first-child,.hotspot.on circle:first-child{transform-box:fill-box;transform-origin:center}

/* ---------- quiz show ---------- */
.quiz{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#3b2f6b 0%,#1a1433 70%)}
.lights{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lights i{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--reward);box-shadow:0 0 16px var(--reward);animation:blink 1.2s ease-in-out infinite}
.qcard{position:absolute;left:50%;top:160px;transform:translateX(-50%);width:1240px;display:flex;flex-direction:column;gap:18px}
.qtext{font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;line-height:1.15}
.qnum{font-size:14px;font-weight:800;opacity:.7}
.scoreboard{position:absolute;left:28px;top:20px;display:flex;gap:10px}
.scoreboard .card{padding:8px 16px;display:flex;flex-direction:column;align-items:center;min-width:110px}
.scoreboard b{font-family:'Fredoka',sans-serif;font-size:30px;line-height:1}.scoreboard span{font-size:11px;font-weight:800;opacity:.7}
.timerbar{position:absolute;left:28px;right:28px;top:120px;height:14px;border:3px solid var(--ink);border-radius:8px;background:#e4d9c6;overflow:hidden}
.timerbar i{display:block;height:100%;background:var(--reward);transition:width .25s linear}
.timerbar.low i{background:var(--s2)}
.streak{position:absolute;right:220px;top:20px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:22px;color:#fff;background:var(--s8);border:4px solid var(--ink);border-radius:18px;padding:8px 18px;box-shadow:0 6px 0 var(--ink)}
.streak.hot{animation:wobble .6s ease-in-out infinite;background:var(--s3)}
.results{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.results h1{font-family:'Fredoka',sans-serif;font-size:44px;margin:0}
.results .pct{font-family:'Fredoka',sans-serif;font-size:80px;line-height:1;font-weight:700}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:12px;height:18px;animation:confetti 3s linear infinite}
.review{max-height:220px;overflow:auto;text-align:left;width:100%;font-size:14px;font-weight:600;line-height:1.3}
.review div{padding:6px 0;border-bottom:1px solid rgba(45,36,64,.15)}

/* ---------- sound controls & read-aloud ---------- */
#sndctl{position:fixed;right:10px;bottom:10px;display:flex;gap:8px;z-index:50}
.sndbtn{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--paper);box-shadow:0 4px 0 var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;padding:0}
.sndbtn.on{background:var(--reward)}
.sndbtn span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);font-family:'Fredoka',sans-serif;font-weight:700;font-size:11px;color:#fff;background:var(--ink);border-radius:6px;padding:0 4px;line-height:14px}
.sndbtn span:empty{display:none}
.sndbtn:hover{transform:translateY(-2px)}
button.host.speak{padding:0;cursor:pointer;position:relative;transition:transform .12s}
button.host.speak:hover{transform:scale(1.08)}
button.host.speak .spk{position:absolute;right:-8px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:var(--reward);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center}
.qspeak{position:absolute;z-index:3;right:18px;top:14px;width:42px;height:42px;border-radius:50%;border:3px solid var(--ink);background:var(--reward);box-shadow:0 3px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.qcard{position:absolute}
.qcard .qtext{padding-right:48px}

/* lesson-watched badge: grey book (not started) · progress ring (part watched) · green tick (completed) */
.lblrow{display:inline-flex;align-items:center;gap:6px;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:2px 8px 2px 3px;box-shadow:0 3px 0 var(--ink)}
.lblrow .star-row i{width:18px;height:18px}
.lbadge{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;flex:none;border:3px solid var(--ink);box-sizing:border-box;color:var(--ink)}
.lbadge.none{background:#fff;color:#9aa0a8;border-color:#9aa0a8}
.lbadge.part{background:radial-gradient(circle,#fff 44%,transparent 46%),conic-gradient(var(--s1) var(--p),#dfe3e8 0);color:var(--s1)}
.lbadge.done{background:var(--s5)}

/* drag-and-drop + press-and-hold (stages beats) */
.dragtok{position:absolute;width:100px;height:100px;border-radius:22px;border:4px solid var(--ink);background:var(--paper);box-shadow:0 6px 0 var(--ink),0 0 0 8px rgba(255,209,102,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;touch-action:none;padding:0;animation:bob 1.6s ease-in-out infinite;z-index:5}
.dragtok svg{width:70px;height:70px;pointer-events:none}
.dragtok b{position:absolute;top:104px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Fredoka',sans-serif;font-size:15px;background:var(--reward);border:3px solid var(--ink);border-radius:999px;padding:2px 10px;pointer-events:none}
.dragtok.dragging{cursor:grabbing;animation:none;transform:scale(1.08);box-shadow:0 10px 0 var(--ink),0 0 0 10px rgba(255,209,102,.8)}
.dragtok.gone{transition:transform .2s,opacity .2s;transform:scale(.3);opacity:0}
.droptgt{position:absolute;border-radius:50%;border:5px dashed var(--ink);background:rgba(255,209,102,.18);display:flex;align-items:flex-start;justify-content:center;pointer-events:none;animation:pulse 1.6s ease-in-out infinite;z-index:4}
.droptgt span{margin-top:-34px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:2px 10px;white-space:nowrap}
.droptgt.hot{background:rgba(46,158,79,.3);border-color:var(--s5);border-style:solid}
.holdbtn{position:absolute;width:124px;height:124px;border-radius:50%;border:4px solid var(--ink);background:conic-gradient(var(--s3) var(--p,0%),var(--paper) 0);box-shadow:0 6px 0 var(--ink),0 0 0 8px rgba(255,209,102,.55);cursor:pointer;touch-action:none;display:flex;align-items:center;justify-content:center;padding:0;z-index:5;animation:bob 1.6s ease-in-out infinite;--p:0%}
.holdbtn i{position:absolute;inset:14px;border-radius:50%;background:var(--paper);border:3px solid var(--ink)}
.holdbtn span{position:relative;font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;line-height:1.1;text-align:center;max-width:84px}
.holdbtn.holding{animation:shake .25s linear infinite}

.dragtok.nope{animation:shake .4s linear;background:#f2b7a6}
.dragmsg{position:absolute;transform:translateX(-50%);max-width:520px;text-align:center;font-weight:800;font-size:16px;color:#fff;background:var(--s2);border:3px solid var(--ink);border-radius:14px;padding:6px 14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:6}
.dragmsg.show{opacity:1}
.stagestrip.compact{gap:5px}
.stagestrip.compact .stg{font-size:13px;padding:2px 9px 2px 2px;border-width:2px}
.stagestrip.compact .stg b{width:21px;height:21px;font-size:12px}

/* ---------- guidance: what to do next ---------- */
.todo{align-self:flex-start;background:var(--reward);border:3px solid var(--ink);border-radius:12px;padding:4px 12px;font-weight:800;font-size:15px;line-height:1.3;box-shadow:0 3px 0 var(--ink);margin-bottom:2px}
.todo.soft{background:#f1e8d6;box-shadow:none;border-width:2px;font-weight:700;font-size:13.5px;opacity:.9}
.todo .dim{opacity:.6;font-weight:700}
.todo.small{font-size:13px;padding:3px 10px;box-shadow:none;margin-top:4px}
.linkbtn{border:0;background:none;font:inherit;font-weight:800;color:var(--s1);text-decoration:underline;cursor:pointer;padding:0 0 0 6px}
@keyframes nudge{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-6px) rotate(-2deg)}30%{transform:translateY(0) rotate(2deg)}45%{transform:translateY(-3px) rotate(-1deg)}60%{transform:translateY(0)}}
.nudge{animation:nudge 1.1s ease-in-out infinite!important;outline:4px solid rgba(255,209,102,.9);outline-offset:3px}
.ctl.nudge,.dragtok.nudge,.holdbtn.nudge{outline-color:#ff8a00}
@keyframes pointbob{0%,100%{transform:translate(-20%,0)}50%{transform:translate(-20%,-14px)}}
.pointer{position:absolute;pointer-events:none;margin-top:24px;margin-left:-4px;display:flex;flex-direction:column;align-items:center;animation:pointbob 1s ease-in-out infinite;z-index:4;opacity:0;animation-delay:.6s;animation-fill-mode:both}
.stage-wrap.live .pointer{opacity:1;transition:opacity .4s .8s}
.pointer span{font-size:46px;line-height:1;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.pointer b{font-family:'Fredoka',sans-serif;font-size:14px;background:var(--reward);border:3px solid var(--ink);border-radius:999px;padding:0 8px;margin-top:-4px}
.dots i.go{cursor:pointer}.dots i.go:hover{transform:scale(1.5);background:var(--s1)}
.topbar .btn.small{white-space:nowrap}
/* exam feedback panel */
.exfb{position:absolute;left:260px;width:1080px;overflow:auto;padding:12px 18px;font-weight:600;font-size:16px;line-height:1.4;animation:pop .35s ease-out both}
.exfb .exfbh{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;margin-bottom:4px;color:var(--s1)}
.exfb .hit{background:#bfe3a0;border-radius:6px;padding:0 5px}.exfb .miss{background:#f6c2b3;border-radius:6px;padding:0 5px}
.narr .youwrote{font-size:14px!important;opacity:.75;max-height:42px;overflow:hidden;text-overflow:ellipsis}
/* first-time coach */
.coachwrap{position:absolute;inset:0;background:rgba(45,36,64,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.coach{width:820px;padding:26px 34px;display:flex;flex-direction:column;gap:10px;animation:pop .35s ease-out both}
.coach h2{font-family:'Fredoka',sans-serif;font-size:34px;margin:0}
.coach ul{margin:0;padding-left:22px;font-weight:600;font-size:19px;line-height:1.45}
.coach li{margin:4px 0}.coach .btn{align-self:flex-end}
/* ---------- interactive controls ---------- */
.ctlscene{position:absolute;inset:0;pointer-events:none}
.ctl{position:absolute;transform:translateX(-50%);z-index:3;font-family:'Fredoka',sans-serif}
.ctl:not(.used){box-shadow:0 0 0 6px rgba(255,209,102,.75),0 5px 0 var(--ink)}
.ctl.slider{background:var(--paper);border:4px solid var(--ink);border-radius:16px;padding:8px 16px 6px;box-shadow:0 5px 0 var(--ink)}
.ctl.slider:not(.used){animation:pulse 1.8s ease-in-out infinite;animation-name:ctlglow}
@keyframes ctlglow{0%,100%{box-shadow:0 0 0 4px rgba(255,209,102,.6),0 5px 0 var(--ink)}50%{box-shadow:0 0 0 12px rgba(255,209,102,.9),0 5px 0 var(--ink)}}
.ctl.slider label{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:17px}
.ctl.slider .val{background:var(--reward);border:3px solid var(--ink);border-radius:999px;padding:0 10px;font-size:16px}
.ctl.slider input{width:100%;margin:8px 0 2px;accent-color:#e8821e;height:26px;cursor:pointer}
.ctl.slider .ends{display:flex;justify-content:space-between;font-family:Nunito,sans-serif;font-weight:800;font-size:12px;opacity:.65}
.ctl.toggle,.ctl.push{display:flex;align-items:center;gap:10px;border:4px solid var(--ink);border-radius:999px;padding:8px 18px 8px 10px;background:var(--paper);font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
.ctl.toggle:not(.used),.ctl.push:not(.used),.ctl.choice:not(.used){animation:ctlglow 1.8s ease-in-out infinite}
.ctl.toggle i{width:54px;height:30px;border-radius:999px;border:3px solid var(--ink);background:#cfc6b4;position:relative;transition:background .2s}
.ctl.toggle i u{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink);transition:left .2s}
.ctl.toggle.on i{background:var(--s5)}.ctl.toggle.on i u{left:26px}
.ctl.push{background:var(--s2);color:#fff;padding:10px 24px}
.ctl.push:active,.ctl.push.fire{transform:translateX(-50%) translateY(4px);box-shadow:0 1px 0 var(--ink)}
.ctl.choice{background:var(--paper);border:4px solid var(--ink);border-radius:16px;padding:6px 10px;box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;gap:4px;align-items:center}
.ctl.choice label{font-weight:700;font-size:16px}
.ctl.choice div{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ctl.choice button{font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;border:3px solid var(--ink);border-radius:10px;padding:4px 12px;background:#fff;cursor:pointer}
.ctl.choice button.sel{background:var(--s3);color:#fff}
.ctl.tap{transform:none;border-radius:50%;border:5px dashed var(--ink);background:rgba(255,209,102,.18);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding:0}
.ctl.tap:not(.used){animation:ctlglow 1.6s ease-in-out infinite;box-shadow:none}
.ctl.tap.used{border-color:transparent;background:transparent}
.ctl.tap.used:hover{border-color:rgba(45,36,64,.4)}
.ctl.tap span{margin-bottom:-34px;font-weight:700;font-size:15px;background:var(--reward);border:3px solid var(--ink);border-radius:999px;padding:2px 10px;white-space:nowrap}
.ctl.tap.on span{background:var(--s5);color:#fff}
.narr .live{font-family:'Fredoka',sans-serif;font-weight:700!important;color:var(--s1);font-size:18px!important}
.narr .live:empty{display:none}
.goals{display:flex;gap:8px;flex-wrap:wrap}
.goal{border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-weight:800;font-size:14px;background:#fff}
.goal.met{background:#bfe3a0;animation:pop .35s ease-out}
.ctl.nudge{animation:ctlglow .6s ease-in-out infinite!important;outline:0}
.narr .todo{position:absolute;left:104px;top:-22px;margin:0;z-index:2;max-width:1200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.narr .todo.nudge{outline:0}

/* ---------- coins ---------- */
.coinico{display:inline-block;width:30px;height:30px;vertical-align:middle;flex:none}
.coinpill{display:flex;align-items:center;gap:6px;background:#fff3c4;border:3px solid var(--ink);border-radius:999px;padding:2px 12px 2px 4px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;line-height:1;position:relative}
.coinpill .coinval{min-width:22px;text-align:center}
.coinpill.solo{position:absolute;right:28px;top:20px;z-index:6;border-width:4px;padding:5px 16px 5px 6px;font-size:24px;box-shadow:0 6px 0 var(--ink)}
.coinpill.solo .coinico{width:38px;height:38px}
@keyframes coinbump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.coinpill.bump{animation:coinbump .28s ease-out}
.coinpill.glow{box-shadow:0 0 0 8px rgba(255,209,102,.85),0 0 30px 10px rgba(255,209,102,.7),0 6px 0 var(--ink);transition:box-shadow .2s}
.flycoin{position:absolute;left:0;top:0;width:56px;height:56px;z-index:60;pointer-events:none;filter:drop-shadow(0 4px 0 rgba(45,36,64,.35))}
@keyframes sparkring{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(2.2);opacity:0}}
.coinspark{position:absolute;width:60px;height:60px;border-radius:50%;border:5px solid #ffd166;box-shadow:0 0 18px #ffd166;z-index:59;pointer-events:none;animation:sparkring .6s ease-out forwards}
@keyframes plusup{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.2);opacity:1}100%{transform:translate(-50%,-50px) scale(1);opacity:0}}
.coinplus{position:absolute;z-index:61;font-family:'Fredoka',sans-serif;font-weight:700;font-size:34px;color:#f6b73c;-webkit-text-stroke:2px var(--ink);pointer-events:none;animation:plusup 1.6s ease-out forwards}
@keyframes burstin{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{transform:translate(-50%,-50%) scale(1.15);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
.coinburst{position:absolute;z-index:58;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:520px;background:#fff3c4;border:4px solid var(--ink);border-radius:999px;padding:8px 22px 8px 10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;box-shadow:0 6px 0 var(--ink);pointer-events:none;animation:burstin 2.6s ease-out forwards}
.coinburst .coinico{width:44px;height:44px}
.coinburst span{font-size:17px;opacity:.75}
.coinline{display:flex;align-items:center;gap:8px;font-weight:800}
.narr .coinline{font-size:17px!important}
.results .coinline{justify-content:center;font-size:18px;background:#fff3c4;border:3px solid var(--ink);border-radius:14px;padding:4px 14px}

/* ---------- free-form activities ('act' beats) ---------- */
.actroot{position:absolute;inset:0;z-index:2;pointer-events:none}
.actroot > *{pointer-events:auto}
.actroot .noevents{pointer-events:none}
.actdrag{cursor:grab;user-select:none;touch-action:none}
.actdrag.dragging{cursor:grabbing;z-index:20!important;filter:drop-shadow(0 12px 6px rgba(45,36,64,.35))}
@keyframes hintglow{0%,100%{box-shadow:0 0 0 4px rgba(255,209,102,.55),0 0 0 0 rgba(255,209,102,0)}50%{box-shadow:0 0 0 9px rgba(255,209,102,.95),0 0 26px 8px rgba(255,209,102,.55)}}
.actroot .hint{animation:hintglow 1.5s ease-in-out infinite}
@keyframes hintsvg{0%,100%{filter:drop-shadow(0 0 2px #ffd166)}50%{filter:drop-shadow(0 0 12px #ffb000)}}
.actroot svg .hint,.stage svg .hint{animation:hintsvg 1.4s ease-in-out infinite}
@keyframes actpop{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}15%{transform:translate(-50%,-50%) scale(1.12);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-120%) scale(1);opacity:0}}
.actpop{position:absolute;z-index:30;pointer-events:none!important;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;border:3px solid var(--ink);border-radius:999px;padding:4px 14px;white-space:nowrap;box-shadow:0 4px 0 var(--ink);animation:actpop 2.1s ease-out forwards}
.actpop.green{background:#bfe3a0}.actpop.red{background:#f6c2b3}.actpop.yellow{background:var(--reward)}.actpop.blue{background:#9fd3ff}.actpop.pink{background:#f6c6da}
@keyframes actburst{0%{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateY(-260px) scale(.4);opacity:0}}
.actdone{position:absolute;left:800px;top:380px;width:0;height:0;z-index:40;pointer-events:none!important}
.actdone i{position:absolute;left:-7px;top:-7px;width:14px;height:22px;border-radius:4px;border:2px solid var(--ink);animation:actburst 1.2s cubic-bezier(.2,.7,.3,1) forwards}
.narr .nav .skip{opacity:.75}
/* reusable activity widgets */
.acard{position:absolute;background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);padding:10px 14px;font-weight:700;font-size:16px;line-height:1.3}
.achip{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink);padding:6px 12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;line-height:1.2;max-width:300px}
.abtn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;border:3px solid var(--ink);border-radius:12px;padding:6px 14px;background:var(--reward);box-shadow:0 4px 0 var(--ink);cursor:pointer}
.abtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.azone{position:absolute;border:4px dashed var(--ink);border-radius:16px;background:rgba(255,255,255,.35)}
.azone.hot{background:rgba(46,158,79,.22);border-color:var(--s5);border-style:solid}
/* ---- Section 8 world art (Design Studio Tower) ---- */
@keyframes s8bar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.s8-bar{transform-box:fill-box;transform-origin:bottom center;animation:s8bar 2.4s ease-in-out infinite}
@keyframes s8laser{0%,100%{transform:translateX(-16px)}50%{transform:translateX(16px)}}
.s8-laser{animation:s8laser 2.4s ease-in-out infinite}
@keyframes s8sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.s8-sway{transform-box:fill-box;transform-origin:top center;animation:s8sway 5s ease-in-out infinite}
@keyframes s8sweep{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}}
.s8-sweep{transform-box:fill-box;transform-origin:bottom center;animation:s8sweep 8s ease-in-out infinite}
@keyframes s8fly{0%,100%{transform:translate(0,0)}25%{transform:translate(110px,-18px)}50%{transform:translate(220px,0)}75%{transform:translate(110px,16px)}}
.s8-fly{animation:s8fly 16s ease-in-out infinite}
.s8-rays{transform-box:fill-box;transform-origin:center;animation:spin 120s linear infinite}
@keyframes s8flick{0%,89%,100%{opacity:1}90%{opacity:.35}92%{opacity:1}94%{opacity:.5}95%{opacity:1}}
.s8-neon{animation:s8flick 6s linear infinite}
@keyframes s8dash{to{stroke-dashoffset:-60}}
.s8-dash{animation:s8dash 3s linear infinite}
@keyframes s8travel{0%{transform:translateX(0)}100%{transform:translateX(var(--s8d,200px))}}
.s8-travel{animation:s8travel 4s ease-in-out infinite alternate}
/* nine lessons across the section screen: narrower labels so neighbours never touch */
body:has(#s8scene) .lbl > span:not(.lblrow){max-width:168px!important;font-size:14px;padding:3px 7px}
body:has(#s8scene) .lbl b{font-size:12px;padding:1px 8px}
.overlay > .narr,.overlay > .topbar,.overlay > .dots{z-index:5}
/* section panel: fixed compact height so it never rises into the landmark labels */
.panel{height:176px;min-height:0;box-sizing:border-box;padding-top:14px;padding-bottom:14px}
.panel .grow{gap:5px}
.panel .pblurb{font-weight:600;font-size:15px;line-height:1.3;max-width:780px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel .todo.small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:820px}

/* ---------- exam coach ---------- */
.exmodelink{font-size:14px;margin-left:14px;vertical-align:middle}
.exchoose{position:absolute;left:150px;width:1300px;animation:pop .35s ease-out both}
.exch-h{font-family:'Fredoka',sans-serif;font-weight:700;font-size:22px;text-align:center;margin-bottom:10px}
.exch-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.exopt{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:14px 12px;cursor:pointer;color:var(--ink);font-family:'Nunito',sans-serif;transition:transform .12s}
.exopt:hover{transform:translateY(-4px)}.exopt:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.exopt .ic{font-size:38px;line-height:1}.exopt b{font-family:'Fredoka',sans-serif;font-size:19px;line-height:1.15}.exopt span{font-size:14px;font-weight:700;opacity:.8;line-height:1.3}
.exopt.rec{background:#fff4c2;animation:hintglow 1.8s ease-in-out infinite}
.exhint{position:absolute;left:260px;width:1080px;padding:12px 18px;font-weight:700;font-size:17px;line-height:1.4;animation:pop .35s ease-out both}
.exhint-q{font-family:'Fredoka',sans-serif;font-size:24px;line-height:1.3;color:var(--s1);margin:4px 0}
.exhint-tip{margin-top:6px;font-size:14px;opacity:.8}
.excoach{position:absolute;left:36px;right:36px;top:112px;height:578px;display:flex;flex-direction:column;gap:10px}
.exsteps{display:flex;align-items:center;gap:8px;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px}
.exsteps span{display:flex;align-items:center;gap:6px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:3px 12px 3px 4px;opacity:.6}
.exsteps span b{width:24px;height:24px;border-radius:50%;background:#e4d9c6;display:flex;align-items:center;justify-content:center;font-size:14px}
.exsteps span.on{opacity:1;background:#fff4c2}.exsteps span.on b{background:var(--s3);color:#fff}.exsteps span.done{opacity:1}.exsteps span.done b{background:var(--s5);color:#fff}
.exsteps i{font-style:normal;opacity:.5}
.exqbig{background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:12px 20px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:25px;line-height:1.45;text-align:center}
.exqbig.clicky .qw{cursor:pointer;border-radius:6px;padding:0 2px}.exqbig.clicky .qw:hover{background:#fff4c2}
.qw.cmd{background:#f6c6da;border-bottom:4px solid var(--s8);border-radius:6px;padding:0 3px}.qw.foc{background:#bfe3ff;border-bottom:4px solid var(--s1);border-radius:6px;padding:0 3px}
.qmarks{font-size:19px;opacity:.85;border-radius:8px;padding:0 6px;white-space:nowrap}.qmarks.hint{cursor:pointer;animation:hintglow 1.5s ease-in-out infinite;background:#fff4c2}.qmarks.got{background:#bfe3a0}
.exask{background:var(--reward);border:3px solid var(--ink);border-radius:12px;padding:6px 14px;font-weight:800;font-size:17px;align-self:center;max-width:1300px;text-align:center}
.exmsg{display:inline-block;color:#b3261e;margin-left:6px}
.excards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.excard{background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:10px 14px;font-weight:700;font-size:16px;line-height:1.4;animation:pop .35s ease-out both}
.excard.cmd{border-color:var(--s8)}.excard.foc{border-color:var(--s1)}.excard.plan{border-color:var(--s5)}
.exc-h{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;margin-bottom:4px}
.explan{display:grid;grid-template-columns:430px 1fr;gap:18px;flex:1;min-height:0}
.expad{background:#fffdf3 repeating-linear-gradient(#fffdf3 0 33px,#b9d3ea 33px 35px);border:4px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);padding:10px 16px;overflow:hidden}
.exslot{font-family:'Fredoka',sans-serif;font-weight:600;font-size:22px;line-height:35px;min-height:35px}.exslot i{opacity:.4}.exslot.full{color:var(--s1);animation:pop .3s ease-out}
.expad.small .exslot{font-size:17px;line-height:30px;min-height:30px}.exslot.tick{color:var(--s5)}.exslot.now{background:#fff4c2;border-radius:8px;padding:0 6px}
.exbank{background:rgba(255,255,255,.6);border:4px dashed var(--ink);border-radius:14px;padding:10px 14px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.exbank .exc-h{width:100%}
.exchip{font-family:'Fredoka',sans-serif;font-weight:600;font-size:19px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink);padding:6px 16px;cursor:pointer}
.exchip:hover{background:#fff4c2}.exchip.gone{opacity:.35;text-decoration:line-through;cursor:default;box-shadow:none}
.exbuild{display:grid;grid-template-columns:250px 1fr 470px;gap:14px;flex:1;min-height:0}
.exline{background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.exl-tip{font-weight:700;font-size:14px;opacity:.75}
.exl-in{font-family:'Nunito',sans-serif;font-weight:700;font-size:18px;border:3px solid var(--ink);border-radius:12px;padding:8px 10px;resize:none;color:var(--ink);background:#fff;animation:hintglow 1.6s ease-in-out infinite}
.exl-btns{display:flex;gap:10px;align-items:center}
.exl-fb{font-weight:800;font-size:16px;line-height:1.35;color:#b3261e;background:#fdecea;border-radius:10px;padding:6px 10px}.exl-fb.ok{color:#1e6b35;background:#e3f4d8}
.exsofar{background:#fff;border:4px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:10px 14px;overflow:auto}
.exsofar.wide{flex:1}
.exm-line{display:grid;grid-template-columns:1fr 230px;gap:10px;align-items:start;padding:6px 0;border-bottom:2px dashed #e4d9c6;animation:pop .35s ease-out both}
.exsofar:not(.wide) .exm-line{grid-template-columns:1fr}
.exm-s{font-weight:700;font-size:17px;line-height:1.4}
.exm-why{font-size:13.5px;font-weight:700;line-height:1.3;background:#e3f4d8;border:2px solid #2e9e4f;border-radius:10px;padding:4px 8px}.exm-why b{color:#1e6b35}
.exm-empty{opacity:.5;font-weight:700;padding:10px 0}
.exqmini{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 14px;font-weight:700;font-size:17px;line-height:1.35}.exqmini b{color:var(--s8);margin-right:6px}.exqmini i{opacity:.7}
.exmodel{display:grid;grid-template-columns:420px 1fr;gap:20px;flex:1;min-height:0}
.exm-left{display:flex;flex-direction:column;gap:10px}
.exm-h{font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;display:flex;justify-content:space-between;align-items:center}
.exm-score{background:var(--reward);border:3px solid var(--ink);border-radius:999px;padding:0 12px;font-size:17px}
.exm-card{position:relative;background:#fff;border:4px solid var(--ink);border-radius:14px;box-shadow:0 6px 0 var(--ink);padding:26px 16px 14px;font-weight:700;font-size:18px;line-height:1.4;cursor:grab;touch-action:none;user-select:none;z-index:5}
.exm-card.dragging{cursor:grabbing;box-shadow:0 14px 10px rgba(45,36,64,.35)}
.exm-n{position:absolute;left:12px;top:-14px;background:var(--s8);color:#fff;font-family:'Fredoka',sans-serif;font-size:14px;border:3px solid var(--ink);border-radius:999px;padding:1px 10px}
.exm-left-tip{font-weight:700;font-size:14px;opacity:.75}
.exm-donecard{background:#e3f4d8;border:4px solid var(--s5);border-radius:16px;padding:14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.exm-donecard span{font-family:'Nunito',sans-serif;font-size:15px}
.exm-sheet{background:#fffdf3;border:4px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:10px 16px;overflow:auto}
.exm-sheet.hot{background:#e3f4d8;border-color:var(--s5)}
/* exam coach: help scale (most → least help) */
.exscale{display:flex;align-items:center;gap:10px;margin:0 6px 10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em}
.exscale i{flex:1;height:12px;border-radius:999px;border:3px solid var(--ink);background:linear-gradient(90deg,#2e9e4f,#9ccc4a,#ffd166,#e8821e)}
.exscale span:first-child{color:#1e6b35}.exscale span:last-child{color:#b35a00}
.exopt{position:relative;padding-top:34px}
.exopt.rec{animation:none}
.exopt.lvl4{background:#e3f4d8}.exopt.lvl3{background:#f0f7d4}.exopt.lvl2{background:#fff4c2}.exopt.lvl1{background:#ffe6cc}
.exhelp{position:absolute;left:0;right:0;top:-14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.exhelp em{font-style:normal;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 10px;opacity:1!important}
.exdots{display:inline-flex;gap:4px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px 6px}
.exdots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:#fff}
.lvl4 .exdots i.on{background:#2e9e4f}.lvl3 .exdots i.on{background:#9ccc4a}.lvl2 .exdots i.on{background:#f2b705}.lvl1 .exdots i.on{background:#e8821e}
.extried{position:absolute;right:8px;top:6px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;color:#fff;background:var(--s5);border-radius:999px;padding:0 8px;opacity:1!important}
.exagain{margin-top:10px;padding-top:10px;border-top:3px dashed #e4d9c6;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exagain-h{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px}
.exagain-b{position:relative;display:flex;align-items:center;gap:8px;text-align:left;border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);padding:6px 12px;cursor:pointer;color:var(--ink);font-family:'Nunito',sans-serif}
.exagain-b:hover{transform:translateY(-2px)}
.exagain-b .ic{font-size:26px}.exagain-b b{display:block;font-family:'Fredoka',sans-serif;font-size:15px}.exagain-b em{font-style:normal;font-weight:800;font-size:11.5px;margin-left:6px;opacity:.8}
.exagain-b.lvl4{background:#e3f4d8}.exagain-b.lvl3{background:#f0f7d4}.exagain-b.lvl2{background:#fff4c2}.exagain-b.lvl1{background:#ffe6cc}
.exagain-b .extried{position:static;margin-left:4px}
.exm-left .exagain{flex-direction:column;align-items:stretch}
.exfb .exagain{position:sticky;bottom:-12px;background:var(--paper);margin:10px -18px -12px;padding:8px 18px 10px}
.exopt .extried{top:auto;bottom:-12px;right:auto;left:50%;transform:translateX(-50%);border:2px solid var(--ink)}
.exchoose{animation:none}
/* ---- Section 1 world art (The Eco-City Hilltop) ---- */
.s1-rays{transform-box:fill-box;transform-origin:center;animation:spin 160s linear infinite}
@keyframes s1laser{0%,100%{transform:translateX(-36px)}50%{transform:translateX(36px)}}
.s1-laser{animation:s1laser 3.2s ease-in-out infinite}
@keyframes s1earth{to{transform:translateX(-100px)}}
.s1-earth{animation:s1earth 16s linear infinite}
@keyframes s1fly{0%,100%{transform:translate(0,0)}25%{transform:translate(90px,-14px)}50%{transform:translate(180px,0)}75%{transform:translate(90px,12px)}}
.s1-fly{animation:s1fly 18s ease-in-out infinite}
@keyframes s1birds{from{transform:translateX(-120px)}to{transform:translateX(1760px)}}
.s1-birds{animation:s1birds 48s linear infinite}
@keyframes s1flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.s1-flap{transform-box:fill-box;transform-origin:center;animation:s1flap .8s ease-in-out infinite}
@keyframes s1dash{to{stroke-dashoffset:-48}}
.s1-dash{animation:s1dash 2.4s linear infinite}
@keyframes s1glint{0%,72%,100%{opacity:0}82%{opacity:.85}}
.s1-glint{animation:s1glint 4.2s ease-in-out infinite}
@keyframes s1arm{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}}
.s1-arm{animation:s1arm 4s ease-in-out infinite}
@keyframes s1fore{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-14deg)}}
.s1-fore{animation:s1fore 4s ease-in-out infinite}
@keyframes s1charge{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes s1chargex{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
.s1-charge{transform-box:fill-box;transform-origin:bottom center;animation:s1charge 5s ease-in-out infinite}
@keyframes s1beacon{0%,100%{opacity:.6}50%{opacity:1}}
.s1-beacon{animation:s1beacon 2.6s ease-in-out infinite}
@keyframes s1roll{0%{transform:translateX(-6px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateX(60px);opacity:0}}
.s1-roll{animation:s1roll 4s ease-in infinite}
@keyframes s1belt{from{transform:translateX(-16px)}to{transform:translateX(16px)}}
.s1-belt{animation:s1belt 1.6s linear infinite}
@keyframes s1train{from{transform:translateX(-160px)}to{transform:translateX(560px)}}
.s1-train{animation:s1train 9s linear infinite}
@keyframes s1mearth{to{transform:translateX(-34px)}}
@keyframes s1mlaser{0%,100%{transform:translateX(-12px)}50%{transform:translateX(12px)}}
/* ---- Section 2 world art (The Grove & Quarry Research Campus) ---- */
.s2-rays{transform-box:fill-box;transform-origin:center;animation:spin 180s linear infinite}
@keyframes s2birds{from{transform:translateX(-120px)}to{transform:translateX(1760px)}}
.s2-birds{animation:s2birds 52s linear infinite}
@keyframes s2flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.s2-flap{transform-box:fill-box;transform-origin:center;animation:s2flap .8s ease-in-out infinite}
@keyframes s2truck{0%,8%{transform:translateX(0)}46%,58%{transform:translateX(16px)}92%,100%{transform:translateX(0)}}
.s2-truck{animation:s2truck 9s ease-in-out infinite}
@keyframes s2pend{0%,100%{transform:rotate(-70deg)}42%,50%{transform:rotate(0deg)}62%{transform:rotate(30deg)}}
.s2-pend{animation:s2pend 3.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes s2spark{0%,38%,62%,100%{opacity:0;transform:scale(.4)}44%{opacity:1;transform:scale(1.6)}}
.s2-spark{transform-box:fill-box;transform-origin:center;animation:s2spark 3.2s linear infinite}
@keyframes s2dust{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(14px,-10px)}}
.s2-dust{animation:s2dust 1.2s ease-out infinite}
@keyframes s2sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.s2-sway{transform-box:fill-box;transform-origin:top center;animation:s2sway 3.6s ease-in-out infinite}
@keyframes s2glow{0%,100%{opacity:.75}50%{opacity:1}}
.s2-glow{animation:s2glow 1.6s ease-in-out infinite}
@keyframes s2tip{0%,100%{transform:rotate(0deg)}35%,75%{transform:rotate(28deg)}}
.s2-tip{animation:s2tip 5s ease-in-out infinite}
@keyframes s2pour{0%,30%,85%,100%{opacity:0}40%,75%{opacity:1}}
.s2-pour{animation:s2pour 5s ease-in-out infinite}
@keyframes s2sparkfly{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--sx,10px),var(--sy,-30px))}}
.s2-sparkfly{animation:s2sparkfly 1.5s ease-out infinite}
@keyframes s2graze{0%,60%,100%{transform:rotate(0deg)}70%,90%{transform:rotate(9deg)}}
.s2-graze{transform-box:fill-box;transform-origin:30% 90%;animation:s2graze 5s ease-in-out infinite}
@keyframes s2dash{to{stroke-dashoffset:-64}}
.s2-dash{animation:s2dash 2.6s linear infinite}
@keyframes s2press{0%,20%,100%{transform:translateY(0)}45%,65%{transform:translateY(18px)}}
.s2-press{animation:s2press 3.4s ease-in-out infinite}
@keyframes s2dish{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
.s2-dish{animation:s2dish 7s ease-in-out infinite}
@keyframes s2follow{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.s2-follow{animation:s2follow 3s ease-in-out infinite}
@keyframes s2glowc{0%,100%{opacity:.55}50%{opacity:1}}
.s2-glowc{animation:s2glowc 2.4s ease-in-out infinite}
@keyframes s2holo{to{transform:rotate(360deg)}}
.s2-holo{animation:s2holo 24s linear infinite}
@keyframes s2fly{0%,100%{transform:translate(0,0)}25%{transform:translate(-60px,-16px)}50%{transform:translate(-110px,4px)}75%{transform:translate(-50px,14px)}}
.s2-fly{animation:s2fly 14s ease-in-out infinite}
@keyframes s2shaft{0%,100%{opacity:.65}50%{opacity:1}}
.s2-shaft{animation:s2shaft 7s ease-in-out infinite}
@keyframes s2beacon{0%,100%{opacity:.6}50%{opacity:1}}
.s2-beacon{animation:s2beacon 2.6s ease-in-out infinite}
@keyframes s2balloon{0%,100%{transform:translate(0,0)}50%{transform:translate(-90px,-14px)}}
.s2-balloon{animation:s2balloon 30s ease-in-out infinite}
@keyframes s2trolley{0%,15%{transform:translateX(0)}45%,60%{transform:translateX(44px)}90%,100%{transform:translateX(0)}}
.s2-trolley{animation:s2trolley 8s ease-in-out infinite}
@keyframes s2hoist{0%,100%{transform:translateY(0)}20%,40%{transform:translateY(-8px)}65%,85%{transform:translateY(6px)}}
.s2-hoist{animation:s2hoist 8s ease-in-out infinite}
@keyframes s2mpuff{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-22px) scale(1.4)}}
.s2-mpuff{transform-box:fill-box;transform-origin:center;animation:s2mpuff 3s ease-out infinite}
@keyframes s2fall{to{stroke-dashoffset:-64}}
.s2-fall{animation:s2fall 1.1s linear infinite}
@keyframes s2dig{0%,100%{transform:rotate(0deg)}40%,55%{transform:rotate(-16deg)}75%{transform:rotate(10deg)}}
.s2-dig{animation:s2dig 4.5s ease-in-out infinite}
/* ---- Section 3 world art (The Production Works) ---- */
.s3-rays{transform-box:fill-box;transform-origin:center;animation:spin 200s linear infinite}
@keyframes s3plume{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:.85}100%{opacity:0;transform:translate(var(--px,70px),var(--py,-120px)) scale(2.3)}}
.s3-plume{transform-box:fill-box;transform-origin:center;animation:s3plume 11s ease-out infinite}
@keyframes s3gulls{from{transform:translateX(-120px)}to{transform:translateX(1760px)}}
.s3-gulls{animation:s3gulls 60s linear infinite}
@keyframes s3flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.s3-flap{transform-box:fill-box;transform-origin:center;animation:s3flap .9s ease-in-out infinite}
@keyframes s3flare{0%,100%{transform:scale(1,1)}30%{transform:scale(.9,1.2)}60%{transform:scale(1.1,.85)}}
.s3-flare{transform-box:fill-box;transform-origin:50% 100%;animation:s3flare .7s ease-in-out infinite}
@keyframes s3glow{0%,100%{opacity:.7}50%{opacity:1}}
.s3-glow{animation:s3glow 1.8s ease-in-out infinite}
@keyframes s3trolley{0%,12%{transform:translateX(0)}45%,60%{transform:translateX(-120px)}92%,100%{transform:translateX(0)}}
.s3-trolley{animation:s3trolley 14s ease-in-out infinite}
@keyframes s3sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.s3-sway{transform-box:view-box;transform-origin:0 0;animation:s3sway 3.4s ease-in-out infinite}
@keyframes s3train{from{transform:translateX(-560px)}to{transform:translateX(1700px)}}
.s3-train{animation:s3train 34s linear infinite;animation-delay:-15s}
@keyframes s3press{0%,30%,100%{transform:translateY(0)}55%,70%{transform:translateY(9px)}}
.s3-press{animation:s3press 3s ease-in-out infinite}
@keyframes s3bend{0%,30%,100%{d:path("M326 410 Q348 410 370 410")}55%,70%{d:path("M326 410 Q348 424 370 410")}}
.s3-bend{fill:none;animation:s3bend 3s ease-in-out infinite}
@keyframes s3flash{0%,50%,80%,100%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.7)}}
.s3-flash{transform-box:fill-box;transform-origin:center;animation:s3flash 3s linear infinite}
@keyframes s3needle{0%,30%,100%{transform:rotate(-60deg)}58%,70%{transform:rotate(70deg)}}
.s3-needle{animation:s3needle 3s ease-in-out infinite}
@keyframes s3dash{to{stroke-dashoffset:-44}}
.s3-dash{animation:s3dash 1.6s linear infinite}
@keyframes s3arm{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(18deg)}}
.s3-arm{animation:s3arm 2.6s ease-in-out infinite}
@keyframes s3box{0%{transform:translateX(0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translateX(196px);opacity:0}}
.s3-box{animation:s3box 8s linear infinite}
@keyframes s3scan{0%,100%{transform:translateX(-34px)}50%{transform:translateX(34px)}}
.s3-scan{animation:s3scan 2.4s ease-in-out infinite}
@keyframes s3pass{0%,45%{opacity:1}50%,95%{opacity:.12}100%{opacity:1}}
.s3-pass{animation:s3pass 4s linear infinite}.s3-fail{animation:s3pass 4s linear infinite;animation-delay:-2s}
@keyframes s3drill{0%,25%,100%{transform:translateY(0)}50%,65%{transform:translateY(12px)}}
.s3-drill{animation:s3drill 2.2s ease-in-out infinite}
@keyframes s3pour{0%,100%{opacity:.85}50%{opacity:1}}
.s3-pour{animation:s3pour .5s ease-in-out infinite}
@keyframes s3spark{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--sx,10px),var(--sy,-30px))}}
.s3-spark{animation:s3spark 1.4s ease-out infinite}
@keyframes s3roll{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.s3-roll{animation:s3roll 4s ease-in-out infinite}
@keyframes s3wave{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.s3-wave{animation:s3wave 3s linear infinite}
@keyframes s3earth{to{transform:translateX(-38px)}}
.s3-earth{animation:s3earth 9s linear infinite}
@keyframes s3glit{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(6px)}}
.s3-glit{animation:s3glit 2.6s ease-in-out infinite}
@keyframes s3ripple{to{stroke-dashoffset:-64}}
.s3-ripple{animation:s3ripple 5s linear infinite}
@keyframes s3log{0%{transform:translateX(0);opacity:0}8%{opacity:1}85%{opacity:1}100%{transform:translateX(150px);opacity:0}}
.s3-log{animation:s3log 27s linear infinite}
@keyframes s3barge{from{transform:translateX(-180px)}to{transform:translateX(1780px)}}
.s3-barge{animation:s3barge 90s linear infinite;animation-delay:-38s}
@keyframes s3bargeR{from{transform:translateX(1780px)}to{transform:translateX(-180px)}}
.s3-barge-r{animation:s3bargeR 110s linear infinite;animation-delay:-70s}
@keyframes s3shaft{0%,100%{opacity:.6}50%{opacity:1}}
.s3-shaft{animation:s3shaft 7s ease-in-out infinite}
@keyframes s3beacon{0%,100%{opacity:.6}50%{opacity:1}}
.s3-beacon{animation:s3beacon 2.6s ease-in-out infinite}
/* ---- Section 5 world art (The Workshop Quarter) ---- */
@keyframes s5mpuff{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.4)}}
.s5-mpuff{transform-box:fill-box;transform-origin:center;animation:s5mpuff 2.8s ease-out infinite}
@keyframes s5glow{0%,100%{opacity:.7}50%{opacity:1}}
.s5-glow{animation:s5glow 1.4s ease-in-out infinite}
@keyframes s5spark{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--sx,10px),var(--sy,-30px))}}
.s5-spark{animation:s5spark 1.3s ease-out infinite}
@keyframes s5mdust{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-8px)}}
.s5-mdust,.s5-chip{animation:s5mdust 1.4s ease-out infinite}
@keyframes s5mist{0%{opacity:0;transform:translate(0,0) scale(.5)}35%{opacity:.85}100%{opacity:0;transform:translate(10px,-6px) scale(1.5)}}
.s5-mmist,.s5-mist{transform-box:fill-box;transform-origin:center;animation:s5mist 2.6s ease-out infinite}
@keyframes s5sway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
.s5-msway,.s5-bunt{transform-box:fill-box;transform-origin:top center;animation:s5sway 4s ease-in-out infinite}
@keyframes s5beam{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.s5-msway2,.s5-sway{transform-box:fill-box;transform-origin:top center;animation:s5beam 3.6s ease-in-out infinite}
@keyframes s5mtrolley{0%,12%{transform:translateX(0)}45%,62%{transform:translateX(30px)}92%,100%{transform:translateX(0)}}
.s5-mtrolley{animation:s5mtrolley 10s ease-in-out infinite}
@keyframes s5mhoist{0%,100%{transform:translateY(0)}50%,60%{transform:translateY(-14px)}}
.s5-mhoist{animation:s5mhoist 10s ease-in-out infinite}
@keyframes s5mfork{0%,10%{transform:translateX(0)}45%,60%{transform:translateX(-120px)}95%,100%{transform:translateX(0)}}
.s5-mfork{animation:s5mfork 12s ease-in-out infinite}
.s5-rays{transform-box:fill-box;transform-origin:center;animation:spin 170s linear infinite}
@keyframes s5birds{from{transform:translateX(-120px)}to{transform:translateX(1760px)}}
.s5-birds{animation:s5birds 46s linear infinite}
@keyframes s5flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
.s5-flap{transform-box:fill-box;transform-origin:center;animation:s5flap .8s ease-in-out infinite}
@keyframes s5train{0%{transform:translateX(0)}100%{transform:translateX(-960px)}}
.s5-train{animation:s5train 22s linear infinite}
@keyframes s5steam{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:.8}100%{opacity:0;transform:translate(26px,-14px) scale(1.5)}}
.s5-steam,.s5-tpuff,.s5-exhaust{transform-box:fill-box;transform-origin:center;animation:s5steam 2.4s ease-out infinite}
.s5-tpuff{animation-duration:5s}.s5-exhaust{animation-duration:1.8s}
@keyframes s5shaft{0%,100%{opacity:.6}50%{opacity:1}}
.s5-shaft{animation:s5shaft 7s ease-in-out infinite}
@keyframes s5trolley{0%,12%{transform:translateX(0)}45%,62%{transform:translateX(-70px)}92%,100%{transform:translateX(0)}}
.s5-trolley{animation:s5trolley 12s ease-in-out infinite}
@keyframes s5hoist{0%,100%{transform:translateY(0)}20%,35%{transform:translateY(-34px)}70%,85%{transform:translateY(40px)}}
.s5-hoist{animation:s5hoist 12s ease-in-out infinite}
@keyframes s5hoistc{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.s5-hoistc{animation:s5hoistc 6s ease-in-out infinite}
@keyframes s5idle{0%,100%{transform:translateY(0)}50%{transform:translateY(.8px)}}
.s5-idle{animation:s5idle .25s linear infinite}
@keyframes s5fork{0%,8%{transform:translateX(0)}42%,58%{transform:translateX(-62px)}92%,100%{transform:translateX(0)}}
.s5-fork{animation:s5fork 9s ease-in-out infinite}
@keyframes s5flicker{0%,100%{opacity:.75}40%{opacity:1}60%{opacity:.85}}
.s5-flicker{animation:s5flicker 2.2s ease-in-out infinite}
@keyframes s5door{0%,30%{transform:scaleX(1)}50%,80%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
.s5-door{animation:s5door 6s ease-in-out infinite}
@keyframes s5hammer{0%,100%{transform:rotate(-30deg)}40%{transform:rotate(-30deg)}55%{transform:rotate(25deg)}70%{transform:rotate(-30deg)}}
.s5-hammer{animation:s5hammer 1.6s ease-in infinite}
@keyframes s5saw{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
.s5-saw{animation:s5saw .9s ease-in-out infinite}
@keyframes s5glaze{0%,100%{opacity:.6}50%{opacity:1}}
.s5-glaze{animation:s5glaze 3s ease-in-out infinite}
@keyframes s5turn{to{transform:translateX(8px)}}
.s5-turn{animation:s5turn .4s linear infinite}
@keyframes s5drill{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.s5-drill{animation:s5drill 2.4s ease-in-out infinite}
@keyframes s5tip{0%,100%{transform:rotate(0deg)}35%,75%{transform:rotate(-32deg)}}
.s5-tip{animation:s5tip 5s ease-in-out infinite}
@keyframes s5pour{0%,30%,85%,100%{opacity:0}40%,75%{opacity:1}}
.s5-pour{animation:s5pour 5s ease-in-out infinite}
@keyframes s5press{0%,25%,100%{transform:translateY(0)}45%,60%{transform:translateY(12px)}}
.s5-press{animation:s5press 2.6s ease-in-out infinite}
@keyframes s5heat{0%,100%{opacity:.55}50%{opacity:1}}
.s5-heat{animation:s5heat 1.2s ease-in-out infinite}
@keyframes s5sag{0%,20%{transform:scaleY(.2)}60%,90%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.s5-sag{animation:s5sag 4s ease-in-out infinite}
@keyframes s5gran{0%{transform:translateY(0)}100%{transform:translateY(6px)}}
.s5-gran{animation:s5gran 1s linear infinite}
@keyframes s5arc{0%,100%{opacity:1}10%{opacity:.35}20%{opacity:.95}30%{opacity:.5}45%{opacity:1}60%{opacity:.4}75%{opacity:.9}}
.s5-arc{animation:s5arc .9s steps(1) infinite}
.s5-arcglow{animation:s5arc 1.3s steps(1) infinite}
@keyframes s5mote{0%{opacity:0;transform:translate(0,0)}25%{opacity:.95}75%{opacity:.7}100%{opacity:0;transform:translate(26px,-34px)}}
.s5-mote{animation:s5mote 8s ease-in-out infinite}
@keyframes s5beacon{0%,100%{opacity:.6}50%{opacity:1}}
.s5-beacon{animation:s5beacon 2.6s ease-in-out infinite}
@keyframes s3mbox{0%{transform:translateX(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateX(24px);opacity:0}}
.s3-mbox{animation:s3mbox 4s linear infinite}
@keyframes s3mtrolley{0%,15%{transform:translateX(0)}45%,60%{transform:translateX(-50px)}90%,100%{transform:translateX(0)}}
.s3-mtrolley{animation:s3mtrolley 12s ease-in-out infinite}
@keyframes s3mtrain{from{transform:translateX(470px)}to{transform:translateX(1110px)}}
.s3-mtrain{animation:s3mtrain 16s linear infinite;animation-delay:-6s}
@keyframes s3smoke{0%,100%{transform:skewX(0deg) scaleX(1)}50%{transform:skewX(-6deg) scaleX(1.06)}}
.s3-smoke{transform-box:view-box;transform-origin:0 0;animation:s3smoke 8s ease-in-out infinite}

/* ================= PHONE MODE (html.phone — see js/phone.js) ================= */
html.phone,html.phone body{overscroll-behavior:none;-webkit-text-size-adjust:100%}
html.phone #app{display:block;right:58px;overflow:hidden;background:#1b2a3a;padding:0}
html.phone #app.phzoom{overflow:auto;-webkit-overflow-scrolling:touch}
html.phone .phsizer{position:absolute;left:0;top:0;pointer-events:none}
html.phone .stage-wrap{position:absolute}
/* tool rail */
.phrail{display:none}
html.phone .phrail{position:fixed;right:0;top:0;bottom:0;width:58px;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:max(8px,env(safe-area-inset-top)) 4px max(8px,env(safe-area-inset-bottom));background:#1b2a3a;border-left:2px solid #2d3e52;box-sizing:border-box;font-family:'Fredoka',sans-serif}
.phrail .phb{width:48px;min-height:44px;border-radius:12px;border:3px solid #2d2440;background:#fff8ec;color:#2d2440;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 0;box-shadow:0 3px 0 #0e1620;font-family:inherit;flex:none}
.phrail .phb span{font-size:19px;line-height:1;font-weight:700}
.phrail .phb i{font-style:normal;font-size:9px;font-weight:700;line-height:1.1;margin-top:2px;white-space:nowrap}
.phrail .phb.on{background:#ffd166}
.phrail .phb:active{transform:translateY(2px);box-shadow:0 1px 0 #0e1620}
.phrail .phcount{color:#fff8ec;font-weight:700;font-size:15px;line-height:1;text-align:center;margin:2px 0}
.phrail .phcount small{font-size:11px;opacity:.7}
.phrail .phgap{flex:1}
@media (max-height:330px){.phrail .phb i{display:none}.phrail .phb{min-height:36px}}
/* lesson top bar + dots move into the rail; coin counter / HUD drawn at real phone size */
html.phone .stage-wrap.phlesson .overlay>.topbar{display:none}
html.phone .stage-wrap .overlay>.dots{display:none}
html.phone .stage-wrap .topbar{transform:scale(calc(var(--inv) * .6));transform-origin:0 0;left:10px;top:8px}
html.phone .stage-wrap .coinpill.solo{transform:scale(calc(var(--inv) * .6));transform-origin:100% 0;right:10px;top:8px}
html.phone .stage-wrap .hud{transform:scale(calc(var(--inv) * .6));transform-origin:100% 0;right:10px;top:8px}
/* narration card: real phone size, docked to the bottom of the stage, tucks away */
html.phone .stage-wrap .narr{left:0;right:auto;bottom:0;width:var(--sw);box-sizing:border-box;transform:scale(var(--inv));transform-origin:0 100%;min-height:0;max-height:var(--nh);padding:16px 10px 8px 8px;gap:8px;border-radius:14px 14px 0 0;border-width:3px;border-bottom:0;box-shadow:0 -3px 12px rgba(0,0,0,.25);align-items:flex-start}
html.phone .stage-wrap .narr .host{width:34px;height:34px;border-width:3px;margin-top:2px}
html.phone .stage-wrap .narr .host svg{width:22px;height:22px}
html.phone .stage-wrap .narr .body{gap:3px;max-height:calc(var(--nh) - 26px);overflow-y:auto;-webkit-overflow-scrolling:touch}
html.phone .stage-wrap .narr .body h2{font-size:15px;line-height:1.15}
html.phone .stage-wrap .narr .body p{font-size:12.5px;line-height:1.32}
html.phone .stage-wrap .narr .live{font-size:12.5px!important}
html.phone .stage-wrap .narr .todo{left:48px;top:-13px;font-size:11.5px;padding:2px 8px;border-width:2px;border-radius:9px;max-width:calc(100% - 60px);box-shadow:0 2px 0 var(--ink)}
html.phone .stage-wrap .narr .nav{gap:5px;padding-top:2px}
html.phone .stage-wrap .narr .btn{font-size:13px;padding:7px 11px;border-width:3px;border-radius:12px;box-shadow:0 3px 0 var(--ink);min-height:36px}
html.phone .stage-wrap .narr .btn.small,html.phone .stage-wrap .narr .btn.ghost{font-size:11.5px;padding:5px 9px;min-height:30px}
html.phone .stage-wrap .narr .goals{gap:4px}
html.phone .stage-wrap .narr .goals>*{font-size:10.5px;padding:1px 6px}
html.phone .stage-wrap .narr .stagestrip .stg{font-size:10.5px;padding:3px 6px;min-height:28px}
html.phone .stage-wrap .narr .stagestrip .stg b{font-size:11px}
html.phone .stage-wrap.phmini .narr{padding:14px 8px 5px 8px;max-height:58px;cursor:pointer}
html.phone .stage-wrap.phmini .narr .host,html.phone .stage-wrap.phmini .narr .body>*:not(.todo):not(.live){display:none}
html.phone .stage-wrap.phmini .narr .body{flex-direction:row;align-items:center;overflow:hidden}
html.phone .stage-wrap.phmini .narr .live{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone .stage-wrap.phmini .narr .nav{flex-direction:row-reverse;align-items:center}
html.phone .stage-wrap.phmini .narr .todo{left:8px}
html.phone .stage-wrap.phmini .narr::before{content:'▲ tap for the text';position:absolute;right:10px;top:-13px;font:700 10px Fredoka,sans-serif;background:#2d2440;color:#fff8ec;border-radius:8px;padding:2px 7px}
html.phone #app.phzoom .narr{display:none}
/* turn-sideways screen */
.phrotate{display:none}
@media (orientation:portrait){html.phone:not(.phupright) .phrotate{display:flex;position:fixed;inset:0;z-index:100;background:#1b2a3a;color:#fff8ec;align-items:center;justify-content:center;text-align:center;font-family:'Fredoka',sans-serif;padding:24px}
 html.phone:not(.phupright) .phrail{display:none}}
.phrotate h2{font-size:24px;margin:12px 0 6px}.phrotate p{font-family:Nunito,sans-serif;font-weight:700;opacity:.85;margin:0 0 16px}
.phrotate .phturn{transform-origin:60px 60px;animation:phturn 2.4s ease-in-out infinite}
@keyframes phturn{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* writing sheet */
.phsheet{position:fixed;inset:0;z-index:120;background:rgba(27,42,58,.96);display:flex;align-items:flex-start;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 12px 10px}
.phsheet .phs-in{width:100%;max-width:760px;background:#fff8ec;border:3px solid #2d2440;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;max-height:100%}
.phsheet .phs-l{overflow-y:auto;max-height:34vh;font-family:Nunito,sans-serif;font-weight:700;font-size:14px;line-height:1.35}
.phsheet .phq{background:#fff;border:2px solid #2d2440;border-radius:10px;padding:6px 9px;margin-bottom:6px}
.phsheet .phtip{opacity:.85;font-size:13px}
.phsheet .phs-f{width:100%;box-sizing:border-box;font:700 16px Nunito,sans-serif;border:3px solid #2d2440;border-radius:10px;padding:8px 10px;background:#fff;color:#2d2440;resize:none}
.phsheet textarea.phs-f{min-height:96px;flex:1}
.phsheet .phs-b{display:flex;align-items:center;justify-content:space-between;gap:10px}
.phsheet .phs-n{font:700 12px Nunito,sans-serif;opacity:.7}
.phsheet .phs-done{font-size:16px;padding:8px 18px}
/* one-off tip */
.phtoast{position:fixed;left:50%;top:10px;transform:translateX(calc(-50% - 29px));z-index:90;max-width:min(560px,80vw);background:#fff8ec;border:3px solid #2d2440;border-radius:14px;box-shadow:0 4px 0 #2d2440;padding:8px 12px;font:700 12.5px/1.35 Nunito,sans-serif;color:#2d2440;display:flex;flex-direction:column;gap:6px}
.phtoast b{font-family:Fredoka,sans-serif;font-size:14px}.phtoast .btn{align-self:flex-end;font-size:12px;padding:4px 12px}
html.phone #sndctl{display:none}
.phmenu{position:fixed;right:64px;bottom:max(8px,env(safe-area-inset-bottom));z-index:60;background:#fff8ec;border:3px solid #2d2440;border-radius:14px;box-shadow:0 4px 0 #2d2440;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:220px}
.phmenu .phm{display:flex;align-items:center;gap:10px;font:700 14px Nunito,sans-serif;color:#2d2440;background:#fff;border:2px solid #2d2440;border-radius:10px;padding:8px 10px;text-align:left}
.phmenu .phm span{width:22px;text-align:center;font:700 17px Fredoka,sans-serif}
/* quiz show */
html.phone .stage-wrap .qcard{width:calc((var(--sw) - 28px) / .8);transform:translateX(-50%) scale(calc(var(--inv) * .8));transform-origin:50% 0;top:150px;gap:12px}
html.phone .stage-wrap .scoreboard{transform:scale(calc(var(--inv) * .55));transform-origin:0 0;left:10px;top:8px}
html.phone .stage-wrap .streak{transform:scale(calc(var(--inv) * .55));transform-origin:100% 0;top:8px}
html.phone .stage-wrap .results{transform:translate(-50%,-50%) scale(calc(var(--inv) * .62));max-height:calc((100vh - 16px) / .62);overflow-y:auto;box-sizing:border-box}
/* sign-in, coach card, section panel */
html.phone .stage-wrap .signin{transform:translate(-50%,-50%) scale(calc(var(--inv) * .6))}
html.phone .stage-wrap .coach{animation:none;transform:scale(calc(var(--inv) * .62));max-height:calc((100vh - 16px) / .62);overflow-y:auto;box-sizing:border-box}
html.phone .stage-wrap .panel{left:0;right:auto;bottom:0;width:calc(var(--sw) / .66);height:auto;max-height:calc(var(--nh) / .66);transform:scale(calc(var(--inv) * .66));transform-origin:0 100%;border-radius:18px 18px 0 0;border-bottom:0;box-sizing:border-box;padding:12px 16px;gap:14px}
html.phone .stage-wrap .panel .pblurb{font-size:16px}
/* phone: checks inside the narration card */
html.phone .stage-wrap .narr .opts{gap:6px}
html.phone .stage-wrap .narr .opt{font-size:13px;padding:6px 8px;border-width:3px;border-radius:10px;box-shadow:0 3px 0 var(--ink);gap:6px;min-height:38px;line-height:1.2}
html.phone .stage-wrap .narr .chip{font-size:12px;padding:4px 9px;border-width:2px;box-shadow:0 2px 0 var(--ink);min-height:30px}
html.phone .stage-wrap .narr .sortwrap{gap:8px}
html.phone .stage-wrap .narr .sortbins{gap:6px}
html.phone .stage-wrap .narr .sortbin{min-height:48px;border-width:3px;padding:5px;gap:4px;border-radius:10px}
html.phone .stage-wrap .narr .sortbin h4{font-size:12px}
html.phone .stage-wrap .narr .orderlist .slot{min-width:70px;min-height:30px;font-size:12px;border-width:2px}
html.phone .stage-wrap .narr .feedback{font-size:12px;min-height:0}
html.phone .stage-wrap .narr textarea.written{font-size:14px;min-height:54px;border-width:3px;padding:6px 8px}
html.phone .stage-wrap .narr .markbox{font-size:12px;max-height:110px;padding:6px 9px}
html.phone .stage-wrap.phmini .narr{max-height:50px;padding:8px 8px 6px 8px;align-items:center}
html.phone .stage-wrap.phmini .narr .todo{position:static;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone .stage-wrap.phmini .narr .body{flex-direction:row;gap:8px;min-width:0}
html.phone .stage-wrap.phmini .narr .nav .btn.ghost:not(.skip){display:none}
html.phone .stage-wrap.phmini .narr::before{top:-18px}
/* phone: exam chooser drawn larger; quiz card scrolls if long */
html.phone .stage-wrap .exchoose{left:50%;width:calc((var(--sw) - 16px) / .62);transform:translateX(-50%) scale(calc(var(--inv) * .62));transform-origin:50% 0}
html.phone .stage-wrap .panel .todo.small{display:none}
html.phone .stage-wrap .qcard{max-height:calc((100vh - 150px / var(--inv) - 6px) / .8);overflow-y:auto;box-sizing:border-box}
/* phone: exam coach (teach / model), hint card and feedback drawn larger, fitted above the text card */
html.phone .stage-wrap .excoach{left:8px;right:auto;top:100px;width:calc((var(--sw) - 16px) / .62);height:calc((100vh - 100px / var(--inv) - var(--nrh, 120px) - 6px) / .62);transform:scale(calc(var(--inv) * .62));transform-origin:0 0;overflow-y:auto;box-sizing:border-box}
html.phone .stage-wrap .exhint,html.phone .stage-wrap .exfb{left:50%;width:calc((var(--sw) - 16px) / .62);transform:translateX(-50%) scale(calc(var(--inv) * .62));transform-origin:50% 0;overflow-y:auto;box-sizing:border-box;animation:none}
html.phone .stage-wrap .exchoose{top:96px!important}
html.phone .stage-wrap .narr textarea.written{min-height:34px;height:34px;max-height:34px;resize:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;padding:5px 8px;cursor:text}
html.phone .stage-wrap .narr:has(#wr) .body>p:not(.youwrote){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* phone: stage strip compact; long nav buttons wrap; scene controls bigger with chunkier slider thumbs */
html.phone .stage-wrap .narr .stagestrip{margin-top:3px;gap:4px}
html.phone .stage-wrap .narr .stg{font-size:11px;padding:2px 8px 2px 2px;border-width:2px;gap:4px;min-height:24px}
html.phone .stage-wrap .narr .stg b{width:18px;height:18px;font-size:10px}
html.phone .stage-wrap .narr .nav .btn{max-width:190px;white-space:normal;line-height:1.15;text-align:center}
html.phone .stage-wrap .ctl:not(.tap){transform:translateX(-50%) scale(1.25);transform-origin:50% 0}
html.phone .stage-wrap .ctl.slider input{height:34px}
html.phone .stage-wrap .ctl.slider input::-webkit-slider-thumb{width:30px;height:30px}
html.phone .stage-wrap.phlesson .narr{left:var(--nl,0px);bottom:var(--nb,0px);width:var(--nw,var(--sw))}
html.phone .stage-wrap.phlesson .narr .todo{max-width:calc(100% - 160px)}
/* phone: tucked-away text card v2 — instruction + one line of text + the task checklist always visible,
   never taller than the strip kept clear below the scene (--rsv), so it never covers the activity */
html.phone .stage-wrap.phmini .narr{max-height:var(--rsv,96px);padding:9px 8px 6px 10px;align-items:flex-start;overflow:hidden}
html.phone .stage-wrap.phmini .narr .body{flex-direction:column;align-items:stretch;gap:3px;overflow:hidden;min-width:0}
html.phone .stage-wrap.phmini .narr .body>.todo{display:block!important;position:static;align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.phone .stage-wrap.phmini .narr .body>p:not(.live):not(.coinline){display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;opacity:.8}
html.phone .stage-wrap.phmini .narr .body:has(>p.live:not(:empty))>p:not(.live){display:none!important}
html.phone .stage-wrap.phmini .narr .body>p.live:not(:empty){display:-webkit-box!important;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;font-size:12px!important}
html.phone .stage-wrap.phmini .narr .body>.goals,html.phone .stage-wrap.phmini .narr .body>.stagestrip{display:flex!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-top:1px}
html.phone .stage-wrap.phmini .narr .body>.goals>*,html.phone .stage-wrap.phmini .narr .body>.stagestrip>*{flex:none}
html.phone .stage-wrap.phmini .narr .nav{flex-direction:column;align-items:flex-end;align-self:center}
html.phone .stage-wrap.phmini .narr::before{top:-16px}
html.phone .stage-wrap .narr .goals>*{font-size:11px;padding:1px 7px;border-width:2px;border-radius:8px}
html.phone .stage-wrap.phmini .narr .body>.goals,html.phone .stage-wrap.phmini .narr .body>.stagestrip{flex-wrap:wrap;overflow:hidden;gap:3px 4px}
html.phone .stage-wrap.phmini .narr .stagestrip .stg:not(.next):not(.on){font-size:0;padding:2px;gap:0}
html.phone .stage-wrap.phmini .narr .stagestrip .stg:not(.next):not(.on) b{font-size:10px}
/* phone: portrait exam writer (shown instead of "turn sideways" on the exam question and written quiz questions) */
.phport{display:none}
html.phone.phportex .phrotate{display:none!important}
html.phone.phportex .phrail{display:none}
html.phone.phportex .phport{display:flex;position:fixed;left:0;right:0;top:0;height:100vh;z-index:110;background:#1b2a3a;padding:max(8px,env(safe-area-inset-top)) 8px 8px;box-sizing:border-box}
.phport .php-in{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;background:#fff8ec;border:3px solid #2d2440;border-radius:14px;padding:8px 10px;color:#2d2440;font-family:Nunito,sans-serif}
.phport .php-top{flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch}
.phport .php-h{font:700 15px Fredoka,sans-serif}
.phport .php-q{background:#fff;border:2px solid #2d2440;border-radius:10px;padding:7px 9px;font-weight:800;font-size:15px;line-height:1.35}
.phport .php-q i{font-weight:700;opacity:.7;font-style:normal}
.phport .php-t{font:700 14px Fredoka,sans-serif;margin-top:2px}
.phport .php-tip{font-weight:700;font-size:13px;line-height:1.35;opacity:.9}
.phport .php-hint{background:#fff3c4;border:2px solid #2d2440;border-radius:10px;padding:6px 9px;font-weight:700;font-size:13.5px;line-height:1.35}
.phport .php-hint .exhint-q{font:600 16px Fredoka,sans-serif;margin:2px 0}
.phport .php-hint .exhint-tip,.phport .php-hint .exfbh{font-size:12px}
.phport .php-fb{background:#fff;border:2px solid #2d2440;border-radius:10px;padding:6px 9px;font-weight:600;font-size:13px;line-height:1.4}
.phport .php-fb .exfbh{font:700 14px Fredoka,sans-serif;margin-bottom:3px}
.phport .php-turn{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-weight:700;font-size:14px;line-height:1.35;padding:6px 4px}
.phport .php-turn b{font:700 16px Fredoka,sans-serif}
.phport .php-w{flex:1 1 90px;min-height:70px;width:100%;box-sizing:border-box;font:700 16px/1.4 Nunito,sans-serif;border:3px solid #ffd166;outline:0;border-radius:10px;padding:8px 10px;background:#fff;color:#2d2440;resize:none}
.phport .php-wc{font-weight:800;font-size:11px;opacity:.6;text-align:right;margin-top:-3px}
.phport .php-b{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:none}
.phport .php-btn{font:700 14px Fredoka,sans-serif;border:3px solid #2d2440;border-radius:12px;padding:7px 12px;background:#fff;color:#2d2440;box-shadow:0 3px 0 #2d2440;min-height:40px}
.phport .php-btn.gold{background:#ffd166}.phport .php-btn.primary{background:#2f6fd6;color:#fff}
.phport .php-btn.ghost{font-size:12.5px;box-shadow:none;border-width:2px;min-height:34px}
.phport .php-btn.link{background:none;border:0;box-shadow:none;color:#2f6fd6;text-decoration:underline;font-size:13px;min-height:30px;padding:4px}
.phport .php-btn.opt{flex:1 1 100%;text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.phport .php-btn small{font:700 11px Nunito,sans-serif;opacity:.7}
.phsheet .phs-in{height:100%;min-height:0}
.phsheet .phs-l{flex:0 1 auto;min-height:0;max-height:none}
.phsheet textarea.phs-f{min-height:44px}
.phsheet .phs-up{font:700 11px Nunito,sans-serif;opacity:.7;flex:1;text-align:center}
.phsheet{align-items:stretch}
.phport.typing .php-top{flex:0 1 auto;max-height:38%}
.phport.typing .php-tip{display:none}
.phport.typing .php-w{min-height:56px}
.phport.typing .php-btn.link,.phport.typing .php-btn.ghost{display:none}
.phport.typing .php-b{flex-wrap:nowrap}
.phport.typing .php-btn{min-height:34px;font-size:13px;padding:5px 9px}
/* phone portrait: Teach me / Build the model answer mirrored in one column */
.phport .php-todo{background:#ffd166;border:2px solid #2d2440;border-radius:10px;padding:4px 9px;font-weight:800;font-size:13px;align-self:flex-start}
.phport .php-coach .excoach{position:static!important;inset:auto!important;width:auto!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;gap:8px;overflow:visible}
.phport .php-coach .explan,.phport .php-coach .exbuild,.phport .php-coach .exmodel,.phport .php-coach .excards{display:flex!important;flex-direction:column;gap:8px;flex:none}
.phport .php-coach .exsteps{flex-wrap:wrap;gap:4px;font-size:11px}
.phport .php-coach .exsteps span{padding:1px 8px 1px 2px;border-width:2px}.phport .php-coach .exsteps span b{width:18px;height:18px;font-size:10px}
.phport .php-coach .exsteps i{display:none}
.phport .php-coach .exqbig{font-size:16px;padding:8px 10px;border-width:3px;box-shadow:0 3px 0 #2d2440;line-height:1.5}
.phport .php-coach .qw.cmd,.phport .php-coach .qw.foc{border-bottom-width:3px}
.phport .php-coach .exask{font-size:13px;padding:5px 9px;max-width:none}
.phport .php-coach .excard{font-size:13.5px;padding:7px 10px;border-width:3px;box-shadow:0 3px 0 #2d2440}
.phport .php-coach .exc-h{font-size:14px}
.phport .php-coach .expad{background:#fffdf3 repeating-linear-gradient(#fffdf3 0 27px,#b9d3ea 27px 28px);border-width:3px;padding:6px 10px}
.phport .php-coach .exslot,.phport .php-coach .expad.small .exslot{font-size:15px;line-height:28px;min-height:28px}
.phport .php-coach .exbank{border-width:3px;padding:7px 9px;gap:7px}
.phport .php-coach .exchip{font-size:14px;padding:5px 11px;border-width:2px;box-shadow:0 3px 0 #2d2440}
.phport .php-coach .exline{border-width:3px;padding:8px 10px;gap:6px}
.phport .php-coach .exl-tip{font-size:12.5px}
.phport .php-coach .exl-in{font-size:16px;width:100%;box-sizing:border-box;min-height:64px}
.phport .php-coach .exl-fb{font-size:13px}
.phport .php-coach .exsofar,.phport .php-coach .exm-sheet{border-width:3px;padding:7px 10px;overflow:visible;max-height:none}
.phport .php-coach .exm-line{grid-template-columns:1fr!important;gap:5px}
.phport .php-coach .exm-s{font-size:14px}.phport .php-coach .exm-why{font-size:12px}
.phport .php-coach .exm-h,.phport .php-coach .exm-score{font-size:14px}
.phport .php-coach .exqmini{font-size:13px;padding:6px 9px}
.phport .php-coach .exm-card{font-size:14.5px;padding:20px 12px 10px;border-width:3px;box-shadow:0 4px 0 #2d2440;animation:hintglow 1.6s ease-in-out infinite;cursor:pointer}
.phport .php-coach .exm-card::after{content:'👆 Tap the card to add it to the answer';display:block;margin-top:6px;font:700 11.5px Nunito,sans-serif;opacity:.7}
.phport .php-coach .exm-left-tip{display:none}
.phport .php-coach .exm-donecard{font-size:16px;border-width:3px;padding:10px}
.phport .php-coach .btn{font-size:14px;padding:7px 12px;border-width:3px}
.phport .php-coach .exagain{flex-direction:column;align-items:stretch;gap:6px}
.phport.coach .php-top{flex:1 1 auto}
.phport.coach.typing .php-top{max-height:none}
.phport.coach .php-w,.phport.coach .php-wc{display:none!important}
/* "Exam time! Turn your phone upright" prompt (landscape) and "Exam done! Turn sideways" (portrait) */
.phupnote{display:none}
html.phone .phupnote{display:flex;position:fixed;inset:0;z-index:105;background:rgba(27,42,58,.94);color:#fff8ec;align-items:center;justify-content:center;text-align:center;font-family:'Fredoka',sans-serif;padding:16px}
.phupnote h2{font-size:22px;margin:6px 0 4px}.phupnote p{font-family:Nunito,sans-serif;font-weight:700;margin:0 0 12px;opacity:.9}
.phupnote .phturnup{transform-origin:60px 60px;transform:rotate(-90deg);animation:phturnup 2.4s ease-in-out infinite}
@keyframes phturnup{0%,25%{transform:rotate(-90deg)}55%,85%{transform:rotate(0)}100%{transform:rotate(-90deg)}}
.phrotate .phrot-b{display:none}
html.phleftexam .phrotate .phrot-a{display:none}html.phleftexam .phrotate .phrot-b{display:block}
.phport{width:100%;overflow:hidden}
.phport .php-in{min-width:0;max-width:100%;overflow:hidden}
.phport .php-top{overflow-x:hidden;min-width:0}
.phport .php-coach,.phport .php-coach *{max-width:100%;box-sizing:border-box;min-width:0}
.phport .php-coach .exm-left,.phport .php-coach .exm-sheet,.phport .php-coach .exsofar,.phport .php-coach .exline,.phport .php-coach .expad,.phport .php-coach .exbank{width:auto!important}
.phport .php-coach .exm-s,.phport .php-coach .exm-why,.phport .php-coach .exm-card,.phport .php-coach .exqmini{white-space:normal;overflow-wrap:anywhere}
.phport .php-todo{max-width:100%;white-space:normal}
/* quiz show star path */
.starpath{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:4;background:rgba(27,20,48,.55);border:3px solid rgba(255,248,236,.25);border-radius:16px;padding:6px 12px 4px}
.sp-row{display:flex;align-items:center;gap:6px}
.sp-d{width:20px;height:20px;border-radius:50%;background:#4a4166;border:3px solid #2d2440;box-shadow:inset 0 2px 0 rgba(255,255,255,.12);transition:background .3s}
.sp-d.lit{background:#ffd166;box-shadow:0 0 10px 2px rgba(255,209,102,.8),inset 0 -3px 0 #e8a92b}
.sp-d.red{background:#e2453c;box-shadow:inset 0 -3px 0 #a3241d}
.sp-s{display:flex;align-items:center;justify-content:center;gap:0;height:34px;padding:0 6px;border-radius:999px;background:#4a4166;border:3px solid #2d2440;transition:background .3s}
.sp-s svg{width:18px;height:18px;fill:#8d84aa;stroke:#2d2440;stroke-width:1.5}
.sp-s.s1{min-width:34px}.sp-s.s2{min-width:44px}.sp-s.s3{min-width:58px}
.sp-s.s2 svg,.sp-s.s3 svg{width:16px;height:16px;margin:0 -1px}
.sp-s.lit{background:#ffd166;box-shadow:0 0 16px 4px rgba(255,209,102,.9)}.sp-s.lit svg{fill:#fff8ec}
.sp-s.lost{background:#6e3a4a;opacity:.7}.sp-s.lost svg{fill:#a5707f}
.sp-d.pop,.sp-s.pop{animation:sppop .6s ease-out}
@keyframes sppop{0%{transform:scale(.4)}60%{transform:scale(1.45)}100%{transform:scale(1)}}
.sp-msg{font:700 13px Fredoka,sans-serif;color:#fff8ec;letter-spacing:.02em;white-space:nowrap}
.starpath.big{position:static;transform:none;background:#2d2440;margin:2px 0}
.starpath.big .sp-d{width:18px;height:18px}
html.phone .stage-wrap .starpath:not(.big){transform:translateX(-50%) scale(calc(var(--inv) * .62));transform-origin:50% 0;top:6px}
.timerbar{top:126px}
html.phone .stage-wrap .qtitle{display:none}
/* ===== Section 6: The Fashion House (textiles) ===== */
.s6-snipA{transform-box:view-box;transform-origin:0 0;animation:s6snipA 1.2s ease-in-out infinite}
.s6-snipB{transform-box:view-box;transform-origin:0 0;animation:s6snipB 1.2s ease-in-out infinite}
@keyframes s6snipA{0%,100%{transform:rotate(0)}50%{transform:rotate(16deg)}}
@keyframes s6snipB{0%,100%{transform:rotate(0)}50%{transform:rotate(-16deg)}}
.s6-needle{animation:s6needle .45s ease-in-out infinite}
@keyframes s6needle{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* valley map */
.s6-msweep{transform-box:fill-box;transform-origin:bottom center;animation:s6msweep 7s ease-in-out infinite}
@keyframes s6msweep{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
.s6-mturnA,.s6-mturnB{transform-box:fill-box;transform-origin:center;animation:s6turnA 6s ease-in-out infinite}
.s6-mturnB{animation-name:s6turnB}
@keyframes s6turnA{0%{transform:scaleX(0)}8%,42%{transform:scaleX(1)}50%,100%{transform:scaleX(0)}}
@keyframes s6turnB{0%,50%{transform:scaleX(0)}58%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.s6-mspot{transform-box:view-box;transform-origin:0 0;animation:s6mspot 3s ease-in-out infinite}
@keyframes s6mspot{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.s6-mwalk{animation:s6mwalk 9s ease-in-out infinite}
@keyframes s6mwalk{0%,6%{transform:translateX(0)}44%,56%{transform:translateX(76px)}94%,100%{transform:translateX(0)}}
.s6-mflag{transform-box:fill-box;transform-origin:top center;animation:s6mflag 2.2s ease-in-out infinite}
@keyframes s6mflag{0%,100%{transform:skewX(-7deg)}50%{transform:skewX(7deg)}}
.s6-mpuff{transform-box:fill-box;transform-origin:center;animation:s6mpuff 3s ease-out infinite}
@keyframes s6mpuff{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.95}100%{opacity:0;transform:translate(6px,-18px) scale(1.6)}}
.s6-mglow{animation:s5glow 2s ease-in-out infinite}
/* section screen */
.s6-silk{animation:s6silk 10s ease-in-out infinite}
@keyframes s6silk{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(14px) scaleY(1.04)}}
.s6-sweep{transform-box:fill-box;transform-origin:bottom center;animation:s6sweep 9s ease-in-out infinite}
@keyframes s6sweep{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(32deg)}}
.s6-sway{animation:s5sway 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}
.s6-banner{transform-box:fill-box;transform-origin:top center;animation:s6banner 2.6s ease-in-out infinite}
@keyframes s6banner{0%,100%{transform:skewX(-5deg)}50%{transform:skewX(5deg)}}
.s6-flyer{transform-box:fill-box;transform-origin:left center;animation:s6flyer 2.4s ease-in-out infinite}
@keyframes s6flyer{0%,100%{transform:skewY(-4deg) scaleY(1)}50%{transform:skewY(5deg) scaleY(.88)}}
.s6-neon{animation:s6neon 3.2s ease-in-out infinite}
@keyframes s6neon{0%,100%{opacity:1}46%{opacity:1}48%{opacity:.55}50%{opacity:1}53%{opacity:.7}55%{opacity:1}}
.s6-feed{animation:s6feed .9s linear infinite}
@keyframes s6feed{from{transform:translateX(0)}to{transform:translateX(12px)}}
.s6-zip{animation:s6zip 2.4s ease-in-out infinite}
@keyframes s6zip{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}
.s6-cut{animation:s6cut 6s ease-in-out infinite}
@keyframes s6cut{0%,8%{transform:translateX(0)}50%,58%{transform:translateX(150px)}100%{transform:translateX(0)}}
.s6-steam{transform-box:fill-box;transform-origin:center;animation:s6steam 3s ease-out infinite}
@keyframes s6steam{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.9}100%{opacity:0;transform:translate(10px,-46px) scale(1.8)}}
.s6-vglow{animation:s5glow 2.2s ease-in-out infinite}
.s6-spot{transform-box:view-box;transform-origin:0 0;animation:s6spot 5s ease-in-out infinite}
@keyframes s6spot{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
.s6-parade{animation:s6parade 27s linear infinite}
@keyframes s6parade{from{transform:translateX(-60px)}to{transform:translateX(1680px)}}
.s6-confetti{transform-box:fill-box;transform-origin:center;animation:s6confetti 9s linear infinite}
@keyframes s6confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.95}85%{opacity:.9}100%{opacity:0;transform:translate(40px,330px) rotate(720deg)}}
.s6-flicker{animation:s5flicker 2.2s ease-in-out infinite}
.s6-beacon{animation:s3beacon 2.6s ease-in-out infinite}
/* ===== Section 4: The Paper Pavilion (paper and board) ===== */
/* valley map */
.s4-mflip{transform-box:view-box;animation:s4mflip 3.4s ease-in-out infinite}
@keyframes s4mflip{0%,12%{transform:scaleX(1)}42%,62%{transform:scaleX(-1)}92%,100%{transform:scaleX(1)}}
.s4-mflap{transform-box:fill-box;transform-origin:bottom center;animation:s4mflap 3s ease-in-out infinite}
@keyframes s4mflap{0%,18%{transform:scaleY(1)}45%,70%{transform:scaleY(-.3)}100%{transform:scaleY(1)}}
.s4-mfly{transform-box:fill-box;transform-origin:center;animation:s4mfly 2.7s ease-out infinite}
@keyframes s4mfly{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(44px,-50px) rotate(-40deg)}}
.s4-mout{animation:s4mout 1.35s linear infinite}
@keyframes s4mout{0%{opacity:0;transform:translateX(-8px)}20%,80%{opacity:1}100%{opacity:0;transform:translateX(9px)}}
.s4-glint{animation:s4glint 3.6s ease-in-out infinite}
@keyframes s4glint{0%,55%{transform:translateX(-60px)}100%{transform:translateX(70px)}}
.s4-rock{transform-box:fill-box;transform-origin:bottom center;animation:s4rock 3s ease-in-out infinite}
@keyframes s4rock{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(1.5px)}}
.s4-wing{transform-box:fill-box;transform-origin:bottom center;animation:s4wing .7s ease-in-out infinite}
@keyframes s4wing{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-.55)}}
.s4-sway{transform-box:fill-box;transform-origin:top center;animation:s5sway 4s ease-in-out infinite}
/* section screen */
.s4-stream{animation:s4stream 7s ease-in-out infinite}
@keyframes s4stream{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.s4-fly{animation:s4fly 40s linear infinite}
@keyframes s4fly{from{transform:translateX(-140px)}to{transform:translateX(1780px)}}
.s4-stamp{animation:s4stamp 1.9s ease-in infinite}
@keyframes s4stamp{0%,38%{transform:translateY(0)}52%,62%{transform:translateY(40px)}100%{transform:translateY(0)}}
.s4-web{animation:s4web .7s linear infinite}
@keyframes s4web{to{stroke-dashoffset:-24}}
.s4-sheet{transform-box:fill-box;transform-origin:center;animation:s4sheet 4.4s ease-out infinite}
@keyframes s4sheet{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translate(150px,-230px) rotate(-260deg)}}
.s4-confetti{transform-box:fill-box;transform-origin:center;animation:s4confetti 9s linear infinite}
@keyframes s4confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:.95}85%{opacity:.9}100%{opacity:0;transform:translate(46px,320px) rotate(680deg)}}
.s4-glintB{animation:s4glintB 4.6s ease-in-out infinite}
@keyframes s4glintB{0%,50%{transform:translateX(-320px)}100%{transform:translateX(320px)}}
.s4-flip{transform-box:view-box;animation:s4mflip 4.4s ease-in-out infinite}
.s4-feed{animation:s4feed .9s linear infinite}
@keyframes s4feed{to{stroke-dashoffset:-16}}
.s4-beacon{animation:s3beacon 2.6s ease-in-out infinite}
.s4-uv{animation:s5glow 1.6s ease-in-out infinite}

/* ================= Design Valley landing page (js/valley.js) — all classes prefixed vv- ================= */
.vv-root{font-family:Fredoka,Nunito,'Arial Rounded MT Bold',Arial,sans-serif}
@keyframes vv-spin{to{transform:rotate(360deg)}}
@keyframes vv-smoke{0%{transform:translate(0,4px) scale(.7);opacity:0}25%{opacity:.75}100%{transform:translate(6px,-22px) scale(1.5);opacity:0}}
@keyframes vv-ray{0%,100%{opacity:.85}50%{opacity:.45}}
@keyframes vv-tw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes vv-shim{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes vv-fall{to{stroke-dashoffset:-48}}
@keyframes vv-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes vv-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vv-armA{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes vv-armB{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}}
@keyframes vv-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}
@keyframes vv-flag{0%,100%{transform:skewY(0)}50%{transform:skewY(4deg)}}
@keyframes vv-nod{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes vv-swing{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(22deg)}}
@keyframes vv-drive{0%{transform:translateX(-30px);opacity:0}15%,85%{opacity:1}100%{transform:translateX(60px);opacity:0}}
@keyframes vv-conv{to{stroke-dashoffset:-14}}
.vv-root .vv-spin{animation:vv-spin 6s linear infinite}
.vv-root .vv-spinSlow{animation:vv-spin 12s linear infinite;transform-box:fill-box;transform-origin:center}
.vv-root .vv-spinRev{animation:vv-spin 8s linear infinite reverse;transform-box:fill-box;transform-origin:center}
.vv-root .vv-smoke{animation:vv-smoke 6s linear infinite;transform-box:fill-box;transform-origin:center}
.vv-root .vv-ray{animation:vv-ray 7s ease-in-out infinite}
.vv-root .vv-sparkle{animation:vv-tw 2.6s ease-in-out infinite}
.vv-root .vv-shimmer{animation:vv-shim 4s ease-in-out infinite}
.vv-root .vv-fall path{animation:vv-fall 1s linear infinite}
.vv-root .vv-pulse,.vv-root .vv-mist{animation:vv-pulse 1.8s ease-in-out infinite}
.vv-root .vv-bob{animation:vv-bob 1.6s ease-in-out infinite}
.vv-root .vv-bob2{animation:vv-bob 2.4s ease-in-out infinite}
.vv-root .vv-armA{animation:vv-armA 3s ease-in-out infinite}.vv-root .vv-armB{animation:vv-armB 3.4s ease-in-out infinite}
.vv-root .vv-cloudA{animation:vv-drift 40s ease-in-out infinite}.vv-root .vv-cloudB{animation:vv-drift 55s ease-in-out infinite reverse}
.vv-root .vv-flag{animation:vv-flag 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
.vv-root .vv-nod{animation:vv-nod 2.4s ease-in-out infinite}
.vv-root .vv-swing{animation:vv-swing 2.2s ease-in-out infinite}
.vv-root .vv-drive{animation:vv-drive 6s linear infinite}
.vv-root .vv-conv{animation:vv-conv 1s linear infinite}
/* dormant lessons & sleeping scenery: precomputed muted colours, nothing moves */
.vv-root .vv-dorm *,.vv-root .vv-still *{animation:none!important}
.vv-root .vv-dorm .vv-smoke,.vv-root .vv-still .vv-smoke,.vv-root .vv-dorm .vv-sparkle{opacity:0}
/* landmarks & plates are buttons into their section */
.vv-lm,.vv-plate{cursor:pointer}
.vv-lm{transition:transform .2s ease}
.vv-lm:hover{transform:translateY(-3px);filter:brightness(1.1) drop-shadow(0 0 5px rgba(255,226,120,.95))}
.vv-plate:hover rect:nth-of-type(2){stroke:#ffcf2a;stroke-width:2.6}
/* compact sector pennants */
.badge.vv-badge{gap:8px;padding:4px 14px 4px 5px;border:2px solid var(--ink);border-radius:999px 10px 10px 999px;background:rgba(255,250,238,.95);box-shadow:0 3px 0 var(--ink),0 6px 14px rgba(45,36,64,.3);border-left:6px solid var(--sc,#888);z-index:3}
.badge.vv-badge .num{width:26px;height:26px;border-width:2px;font-size:15px}
.badge.vv-badge h3{font-size:14px;font-weight:700;white-space:nowrap}
.badge.vv-badge p{font-size:11px;margin-top:1px;white-space:nowrap}
.badge.vv-badge.done{background:#fff6d6;border-color:#a87010;box-shadow:0 3px 0 #a87010,0 0 16px rgba(255,214,90,.8)}
.badge.vv-badge.done p{color:#8a5a00;opacity:1}
.badge.vv-badge.chosen{border-color:#a87010;box-shadow:0 3px 0 #a87010,0 0 0 3px #ffd34d}
.badge.vv-badge.here .num{box-shadow:0 0 0 3px #ffe066}
.vv-bstar{font-style:normal;color:#ffcf2a;font-size:18px;text-shadow:0 1px 0 #a87010;margin-left:-2px}
.vv-badge.vv-soon{position:absolute;display:flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;border:2px dashed #7a6a5a;border-radius:999px;background:rgba(255,250,238,.85);font-family:'Fredoka',sans-serif;pointer-events:none;opacity:.9}
.vv-badge.vv-soon .num{width:22px;height:22px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.vv-badge.vv-soon h3{margin:0;font-size:13px;color:#5a4a3a}
.toast.vv-toast{left:40px;bottom:auto;top:132px;transform:none;font-size:13px;padding:6px 16px;max-width:560px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;background:rgba(45,36,64,.82)}
.toast.vv-toast b{color:#ffd860}
.vv-topbar .title-big{font-size:46px}
/* phone: pennants and the status pill drawn near real size, details trimmed */
html.phone .stage-wrap .badge.vv-badge{transform:scale(calc(var(--inv) * .6));transform-origin:0 0}
html.phone .stage-wrap .badge.vv-badge p{display:none}
html.phone .stage-wrap .vv-badge.vv-soon{display:none}
html.phone .stage-wrap .toast.vv-toast{left:14px;top:124px;transform:scale(calc(var(--inv) * .62));transform-origin:0 0;max-width:700px}
html.phone .stage-wrap .badge.vv-badge.vv-b2,html.phone .stage-wrap .badge.vv-badge.vv-b6{transform-origin:100% 0}
html.phone .stage-wrap .badge.vv-badge.vv-b8{top:104px!important;left:905px!important}
html.phone .stage-wrap .badge.vv-badge.vv-b1{top:814px!important}
html.phone .stage-wrap .badge.vv-badge.vv-b2{top:814px!important}
html.phone .stage-wrap .vv-topbar .ar-mapbtn,html.phone .stage-wrap .vv-topbar .ko-mapbtn{width:36px;max-width:36px;padding:7px 0 7px 8px;overflow:hidden;justify-content:flex-start;animation:none}
html.phone .stage-wrap .badge.vv-badge::after{content:'';position:absolute;left:-4px;right:-4px;top:-10px;bottom:-10px}
/* lesson DONE (quiz < 3★) and NEXT: in colour but still — movement is the 3★ reward */
.vv-root .vv-done *,.vv-root .vv-next *{animation:none!important}
.vv-root .vv-done .vv-smoke,.vv-root .vv-next .vv-smoke,.vv-root .vv-done .vv-sparkle,.vv-root .vv-next .vv-sparkle{opacity:0}

/* performance governor (valley.js govern): lite pauses per-lesson motion except hovered + spotlight sector */
.vv-root.vv-lite .vv-alive *,.vv-root.vv-lite .va-top *,.vv-root.vv-lite .vv-own *{animation-play-state:paused!important}
.vv-root.vv-lite2 *{animation-play-state:paused!important}
.vv-root.vv-spot-1 .vv-s1 *,.vv-root.vv-hover-1 .vv-s1 *,.vv-root.vv-spot-2 .vv-s2 *,.vv-root.vv-hover-2 .vv-s2 *,.vv-root.vv-spot-3 .vv-s3 *,.vv-root.vv-hover-3 .vv-s3 *,
.vv-root.vv-spot-4 .vv-s4 *,.vv-root.vv-hover-4 .vv-s4 *,.vv-root.vv-spot-5 .vv-s5 *,.vv-root.vv-hover-5 .vv-s5 *,.vv-root.vv-spot-6 .vv-s6 *,.vv-root.vv-hover-6 .vv-s6 *,
.vv-root.vv-spot-8 .vv-s8 *,.vv-root.vv-hover-8 .vv-s8 *{animation-play-state:running!important}
.vv-root.vv-rm *{animation-play-state:paused!important}
.vv-root .vv-beacon,.vv-root .vv-beacon *{animation-play-state:running!important}
/* accessories shop (always animated, not a lesson reward) */
@keyframes vv-coinspin{0%,100%{transform:scaleX(1)}25%{transform:scaleX(.12)}50%{transform:scaleX(-1)}75%{transform:scaleX(.12)}}
@keyframes vv-coinbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.vv-root .vv-coinspin{animation:vv-coinspin 2.4s linear infinite}
.vv-root .vv-coinbob{animation:vv-coinbob 1.8s ease-in-out infinite}
.vv-root .vv-coinsp{animation:vv-tw 1.6s ease-in-out infinite}
.vv-root .vv-shopcoin>ellipse{animation:vv-pulse 1.8s ease-in-out infinite}
.vv-root .vv-shopcoin,.vv-root .vv-shopcoin *{animation-play-state:running!important}
.vv-shopb{cursor:pointer}
.vv-shopb>*{transition:transform .2s ease}
.vv-shopb:hover>*{transform:translateY(-3px)}

/* ===================== avatar (js/avatar.js) ===================== */
.hud .avatar{overflow:hidden;background:#cfe9f2;padding:0}
.hud .avatar svg{display:block}
.av-twinkle{transform-box:fill-box;transform-origin:center;animation:avtwinkle 1.8s ease-in-out infinite}
@keyframes avtwinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.15)}}
.av-blink{animation:blink 1.2s ease-in-out infinite}
.av-flame{transform-box:fill-box;transform-origin:50% 0;animation:avflame .18s ease-in-out infinite alternate}
@keyframes avflame{from{transform:scaleY(.75)}to{transform:scaleY(1.15)}}
.av-bob{animation:bob 2.4s ease-in-out infinite}
.av-hover{animation:avhover 1.6s ease-in-out infinite}
@keyframes avhover{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.4px)}}
.av-prop{transform-box:fill-box;transform-origin:center;animation:avprop .12s linear infinite alternate}
@keyframes avprop{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.av-flutter{transform-box:fill-box;transform-origin:100% 50%;animation:avflutter 1.6s ease-in-out infinite}
.av-root g[transform="scale(-1 1)"] .av-flutter{transform-origin:100% 50%}
@keyframes avflutter{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
.av-wag{transform-box:fill-box;transform-origin:0 100%;animation:avwag .5s ease-in-out infinite alternate}
@keyframes avwag{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}

/* ===================== Accessories Shop + Changing Room (js/shop.js) ===================== */
.shop-stage .stage{background:#ffe7da}
.coinpill[role=button]{cursor:pointer}
.coinpill[role=button]:hover{filter:brightness(1.06)}
.shop-top{z-index:6}
.shop-coin{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.17em;margin-right:.12em}
.shop-coin svg{display:block}
.shop-stagearea,.cr-stagearea{position:absolute;pointer-events:none}
.shop-stagearea{left:230px;top:128px;width:340px;height:568px}
.shop-me{width:100%;height:100%;display:block;overflow:visible}
.shop-stagearea.try,.cr-stagearea.try{animation:shoptry .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes shoptry{0%{transform:scale(.94,1.04)}60%{transform:scale(1.03,.98)}100%{transform:none}}
.shop-bubble{position:absolute;left:18px;top:372px;width:262px;background:#fff;border:4px solid var(--ink);border-radius:20px;padding:10px 14px;font-family:Fredoka,sans-serif;font-weight:600;font-size:17px;line-height:1.2;box-shadow:0 5px 0 var(--ink);z-index:3}
.shop-bubble::after{content:'';position:absolute;left:84px;bottom:-17px;width:22px;height:22px;background:#fff;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg)}
.shop-bubble.pop{animation:pop .35s ease-out}
.shop-infow{position:absolute;left:254px;bottom:12px;width:332px;z-index:3}
.shop-info{background:var(--paper);border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:8px 12px 10px;display:flex;flex-direction:column;gap:4px}
.shop-info b{font-family:Fredoka,sans-serif}
.shop-info.empty span{font-size:14px;font-weight:800;line-height:1.25}
.shop-info-h{display:flex;align-items:center;gap:8px;font-size:20px;line-height:1.05}
.shop-cat{font-family:Fredoka,sans-serif;font-size:11px;font-weight:700;background:var(--ink);color:#fff;border-radius:8px;padding:2px 7px;text-transform:uppercase;letter-spacing:.5px;flex:none}
.shop-desc{font-size:13px;font-weight:800;opacity:.8;line-height:1.2}
.shop-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px}
.shop-acts .btn{font-size:17px;padding:7px 13px;border-width:3px;box-shadow:0 4px 0 var(--ink)}
.shop-acts .btn.small{font-size:14px;padding:6px 10px}
.shop-ok{font-family:Fredoka,sans-serif;font-weight:700;color:#1f7a3a}
.shop-need{background:#ffe1e1;color:#9b1c1c}
.btn.shake{animation:shake .4s}
.shop-buy{animation:shopglow 1.6s ease-in-out infinite}
@keyframes shopglow{0%,100%{box-shadow:0 4px 0 var(--ink),0 0 0 0 rgba(255,209,102,.0)}50%{box-shadow:0 4px 0 var(--ink),0 0 0 7px rgba(255,209,102,.55)}}
.shop-panel{position:absolute;left:600px;top:122px;width:976px;height:712px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;border-radius:26px;background:#fff8ec;z-index:2}
.shop-tabs{display:flex;gap:8px;flex:none}
.shop-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--ink);border-radius:14px 14px 10px 10px;background:#ffe3ef;font-family:Fredoka,sans-serif;font-weight:700;font-size:19px;padding:8px 6px;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .1s;white-space:nowrap}
.shop-tab .ic{font-size:20px}
.shop-tab:hover{transform:translateY(-2px)}
.shop-tab.on{background:var(--s8);color:#fff;transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.shop-gridw{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 4px 10px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.shop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.shop-card{position:relative;height:196px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;border:3px solid var(--ink);border-radius:18px;background:#fff;padding:8px 6px 8px;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s;font-family:Nunito,sans-serif;touch-action:manipulation}
.shop-card:hover{transform:translateY(-4px) rotate(-.6deg)}
.shop-card:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.shop-card.sel{background:#fff3c4;box-shadow:0 0 0 5px var(--reward),0 5px 0 var(--ink)}
.shop-card.cant .shop-thw{opacity:.62}
.shop-card.cant .shop-price{background:#f1e4e4;color:#9b1c1c}
.shop-card.fancy{background:linear-gradient(160deg,#fff 0%,#fff 55%,#fff0fb 100%)}
.shop-thw{width:100%;height:106px;display:flex;align-items:center;justify-content:center;flex:none}
.shop-th{width:106px;height:106px;display:block;overflow:visible}
.shop-nm{font-family:Fredoka,sans-serif;font-weight:600;font-size:15.5px;line-height:1.1;text-align:center;flex:1;display:flex;align-items:center}
.shop-price{font-family:Fredoka,sans-serif;font-weight:700;font-size:19px;background:#fff3c4;border:3px solid var(--ink);border-radius:999px;padding:1px 12px 1px 6px;line-height:1.2;flex:none}
.shop-own{font-family:Fredoka,sans-serif;font-weight:700;font-size:13px;background:#d8f5df;color:#1f6b35;border:2px solid #1f6b35;border-radius:999px;padding:2px 10px;flex:none;text-align:center;line-height:1.1}
.shop-card.wearing .shop-own,.shop-card .shop-own:first-letter{letter-spacing:.2px}
.shop-tag{position:absolute;top:-8px;right:-8px;background:var(--s2);color:#fff;font-family:Fredoka,sans-serif;font-weight:700;font-size:13px;border:3px solid var(--ink);border-radius:8px;padding:1px 7px;transform:rotate(9deg);z-index:2}
.shop-tag.gold{background:var(--reward);color:var(--ink)}
.shop-sp{position:absolute;width:14px;height:14px;pointer-events:none;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink));animation:avtwinkle 1.6s ease-in-out infinite}
.shop-sp.s1{left:12px;top:14px}.shop-sp.s2{right:16px;top:58px;animation-delay:.5s;width:11px;height:11px}.shop-sp.s3{left:24px;top:96px;animation-delay:1s;width:9px;height:9px}
.shop-card.hint{background:#eaf4ff;border-style:dashed;justify-content:center}
.shop-hint-ic{font-size:44px;line-height:1.2}
.shop-hint-tx{font-size:13px;font-weight:800;text-align:center;line-height:1.2}
.shop-modal{position:absolute;inset:0;background:rgba(27,20,40,.45);display:flex;align-items:center;justify-content:center;z-index:20}
.shop-modal[hidden]{display:none}
.shop-confirm{width:520px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:pop .3s ease-out}
.shop-confirm h2{margin:0;font-family:Fredoka,sans-serif;font-size:30px}
.shop-confirm p{margin:0;font-weight:800;font-size:18px}
.shop-cthw .shop-th{width:150px;height:150px}
.shop-confirm .shop-acts .btn{font-size:22px;padding:10px 22px}
.shop-burst{position:absolute;left:50%;top:45%;width:0;height:0}
.shop-burst i{position:absolute;width:16px;height:16px;margin:-8px;border-radius:4px;background:var(--c);border:2px solid var(--ink);animation:shopburst 1.2s ease-out both}
@keyframes shopburst{0%{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:1}100%{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1) rotate(200deg);opacity:0}}
.shop-burst b{position:absolute;left:-80px;top:-200px;width:160px;text-align:center;font-family:Fredoka,sans-serif;font-size:44px;color:var(--reward);-webkit-text-stroke:2px var(--ink);paint-order:stroke;animation:shopnew 1.6s ease-out both}
@keyframes shopnew{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.2);opacity:1}80%{opacity:1}100%{transform:translateY(-40px);opacity:0}}
.shop-bulb{animation:blink 1.1s ease-in-out infinite}
.shop-beam{animation:shopbeam 4s ease-in-out infinite}
@keyframes shopbeam{0%,100%{opacity:.75}50%{opacity:1}}
/* changing room */
.cr-stage .stage{background:#efe2f7}
.cr-stagearea{left:204px;top:176px;width:340px;height:614px}
.cr-mirror{position:absolute;left:722px;top:300px;width:200px;height:428px;pointer-events:none}
.cr-mirror-svg{width:100%;height:100%;display:block}
.cr-panel{left:934px;width:642px;gap:8px}
.cr-panel .shop-grid{grid-template-columns:repeat(4,1fr)}
.cr-panel .shop-tab{font-size:14.5px;padding:7px 2px;gap:3px;flex-direction:column;border-radius:12px}
.cr-panel .shop-tab .ic{font-size:22px}
.cr-panel .shop-card{height:196px}
.cr-panel .shop-thw{height:104px}.cr-panel .shop-th{width:104px;height:104px}
.cr-panel .shop-card.wearing{background:#e6f9ea;box-shadow:0 0 0 5px #3fae5a,0 5px 0 var(--ink)}
.cr-panel .shop-card.off{justify-content:center}
.cr-h{display:flex;align-items:baseline;gap:12px;flex:none}
.cr-h b{font-family:Fredoka,sans-serif;font-size:26px}
.cr-h span{font-weight:800;font-size:14px;opacity:.7}
.cr-acts{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex:none;border-top:3px dashed rgba(45,36,64,.2);padding-top:10px}
.cr-acts .cr-save{font-size:22px;padding:9px 22px;margin-left:auto}
.cr-me{display:flex;flex-direction:column;gap:18px;padding:8px 6px}
.cr-row b{font-family:Fredoka,sans-serif;font-size:20px;display:block;margin-bottom:8px}
.cr-sw{display:flex;gap:12px;flex-wrap:wrap}
.cr-dot{width:54px;height:54px;border-radius:50%;border:4px solid var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.cr-dot.on{box-shadow:0 0 0 5px var(--reward),0 4px 0 var(--ink)}
.cr-hs{display:flex;flex-direction:column;align-items:center;gap:2px;border:3px solid var(--ink);border-radius:16px;background:#fff;padding:6px 10px;cursor:pointer;font-family:Fredoka,sans-serif;font-weight:600;font-size:15px;box-shadow:0 4px 0 var(--ink)}
.cr-hs svg{background:#cfe9f2;border-radius:50%;border:3px solid var(--ink)}
.cr-hs.on{background:#fff3c4;box-shadow:0 0 0 5px var(--reward),0 4px 0 var(--ink)}
.cr-free{margin:0;font-weight:800;opacity:.7}
/* phone: bigger type and fewer columns so cards stay tappable */
html.phone .stage-wrap .shop-grid{grid-template-columns:repeat(4,1fr);gap:16px}
html.phone .stage-wrap .shop-card{height:300px}
html.phone .stage-wrap .shop-thw{height:150px}html.phone .stage-wrap .shop-th{width:150px;height:150px}
html.phone .stage-wrap .shop-nm{font-size:27px}
html.phone .stage-wrap .shop-price{font-size:32px}
html.phone .stage-wrap .shop-own,html.phone .stage-wrap .shop-hint-tx{font-size:22px}
html.phone .stage-wrap .shop-tab{font-size:26px}
html.phone .stage-wrap .shop-tab .ic{font-size:30px}
html.phone .stage-wrap .shop-panel{top:150px;height:684px}
html.phone .stage-wrap .shop-info{padding:10px 14px}
html.phone .stage-wrap .shop-infow{left:150px;bottom:10px;width:442px}
html.phone .stage-wrap .shop-info-h{font-size:30px}
html.phone .stage-wrap .shop-desc,html.phone .stage-wrap .shop-info.empty span{font-size:22px}
html.phone .stage-wrap .shop-acts .btn{font-size:26px;padding:8px 14px}
html.phone .stage-wrap .shop-bubble{font-size:24px;width:300px;top:250px}
html.phone .stage-wrap .shop-stagearea{top:140px;height:556px;left:250px;width:300px}
html.phone .stage-wrap .shop-confirm{width:760px}
html.phone .stage-wrap .shop-confirm h2{font-size:44px}html.phone .stage-wrap .shop-confirm p{font-size:28px}
html.phone .stage-wrap .shop-confirm .shop-acts .btn{font-size:34px}
html.phone .stage-wrap .cr-panel .shop-grid{grid-template-columns:repeat(3,1fr)}
html.phone .stage-wrap .cr-panel .shop-tab{font-size:22px}
html.phone .stage-wrap .cr-h span{display:none}
html.phone .stage-wrap .cr-acts .btn{font-size:26px}
html.phone .stage-wrap .cr-acts .cr-save{font-size:30px}

/* ================= MINI-GAMES ARCADE (#arcade · js/arcade.js) ================= */
.ar-titlerow{display:flex;align-items:center;gap:18px}
.ar-mapbtn{font-size:19px;padding:7px 14px;white-space:nowrap;animation:arNudge 3.2s ease-in-out 1.2s infinite}
.ar-mapbtn:hover{animation:none}
.ko-mapbtn{font-size:19px;padding:7px 14px;white-space:nowrap;background:#8fd3ff}
@keyframes arNudge{0%,86%,100%{transform:none}90%{transform:translateY(-4px) rotate(-2deg)}95%{transform:translateY(0) rotate(1.5deg)}}
.stage.ar-stage{background:#1a1236}
.ar-stage .ar-sign .ar-flick{animation:arFlick 6s linear infinite}
.ar-stage .ar-chase{animation:arChase 1.2s linear infinite}
@keyframes arFlick{0%,40%,44%,46%,100%{opacity:1}42%,45%{opacity:.55}}
@keyframes arChase{to{stroke-dashoffset:-15}}
.ar-sub{position:absolute;left:50%;top:164px;transform:translateX(-50%);white-space:nowrap;font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px;color:#ffe3f6;letter-spacing:.5px;text-shadow:0 2px 0 #120c26}
.ar-row{position:absolute;left:30px;right:30px;top:206px;display:flex;gap:20px;justify-content:center;align-items:flex-end;pointer-events:none}
.ar-cab{pointer-events:auto;position:relative;width:212px;height:556px;padding:0;display:flex;flex-direction:column;align-items:stretch;border:5px solid var(--ink);border-radius:26px 26px 14px 14px;background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.12) 40%,rgba(0,0,0,.22)),var(--c1);box-shadow:0 10px 0 var(--ink),0 22px 30px rgba(0,0,0,.4);cursor:pointer;font-family:'Fredoka',sans-serif;color:var(--ink);transition:transform .15s;animation:arIn .5s ease-out both;text-align:left}
.ar-cab.live{width:300px;height:600px}
.ar-cab:hover{transform:translateY(-6px)}
.ar-cab.live::after{content:'';position:absolute;inset:-14px;border-radius:34px;box-shadow:0 0 0 4px #ffd166,0 0 36px 8px rgba(255,209,102,.55);animation:arPulse 1.8s ease-in-out infinite;pointer-events:none}
@keyframes arPulse{50%{box-shadow:0 0 0 4px #ffd166,0 0 60px 18px rgba(255,209,102,.8)}}
@keyframes arIn{from{opacity:0;transform:translateY(40px)}}
.ar-cab.soon{filter:grayscale(.8) brightness(.78)}
.ar-cab.soon:hover{transform:translateY(-3px);filter:grayscale(.55) brightness(.9)}
.ar-cab.shake{animation:shake .4s}
.ar-marq{display:flex;align-items:center;justify-content:center;height:70px;margin:-1px;background:#120c26;border-bottom:5px solid var(--ink);border-radius:21px 21px 0 0;padding:0 8px}
.ar-marq b{font-weight:700;font-size:25px;letter-spacing:1px;color:var(--c2);text-shadow:0 0 12px var(--c2);text-align:center;line-height:1}
.ar-cab.live .ar-marq b{font-size:33px}
.ar-bezel{display:block;margin:14px 12px 0;background:#120c26;border:4px solid var(--ink);border-radius:16px;padding:10px}
.ar-scr{display:block;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:200/140;border:3px solid #000;box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.ar-scr svg{display:block;width:100%;height:100%}
.ar-scr::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);pointer-events:none}
.ar-play,.ar-soon{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;border:3px solid var(--ink);border-radius:999px;padding:2px 14px;font-weight:700;font-size:19px;z-index:1}
.ar-play{background:#ffd166;animation:arBlink 1.1s steps(2) infinite}
.ar-soon{background:#dfe3e8;font-size:15px}
@keyframes arBlink{50%{background:#fff3b0}}
.ar-fr-belt{animation:arBelt .8s linear infinite}
@keyframes arBelt{to{transform:translateX(20px)}}
.ar-fr-box{animation:arBox 2.6s linear infinite}
.ar-fr-box.b2{animation-delay:-1.3s}
@keyframes arBox{from{transform:translateX(-10px)}to{transform:translateX(210px)}}
.ar-deck{display:flex;align-items:center;justify-content:center;gap:16px;height:50px;margin:14px 8px 0;background:rgba(18,12,38,.85);border:4px solid var(--ink);border-radius:12px;transform:perspective(220px) rotateX(26deg)}
.ar-joy{width:14px;height:30px;border-radius:7px;background:#3b3340;border:3px solid var(--ink);position:relative}
.ar-joy::before{content:'';position:absolute;left:50%;top:-12px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#e8574f;border:3px solid var(--ink)}
.ar-b1,.ar-b2{width:20px;height:20px;border-radius:50%;border:3px solid var(--ink);background:#ffd166}
.ar-b2{background:#4db8ff}
.ar-info{flex:1;display:flex;flex-direction:column;gap:6px;margin:14px 10px 12px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;padding:10px 12px}
.ar-info b{font-family:'Nunito',sans-serif;font-weight:800;font-size:16px;line-height:1.25}
.ar-cab.live .ar-info b{font-size:19px}
.ar-info em{font-style:normal;font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;opacity:.65;line-height:1.25}
.ar-best{margin-top:auto;align-self:flex-start;background:#ffd166;border:3px solid var(--ink);border-radius:999px;padding:2px 12px;font-weight:700;font-size:17px}
.ar-coins{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;white-space:nowrap;background:var(--paper);border:4px solid var(--ink);border-radius:999px;padding:6px 22px 6px 8px;box-shadow:0 6px 0 var(--ink);font-family:'Fredoka',sans-serif;font-size:19px}
.ar-coins .coinico{width:40px;height:40px}
.ar-bar{display:block;width:150px;height:16px;border:3px solid var(--ink);border-radius:9px;background:#e8e0f0;overflow:hidden}
.ar-bar i{display:block;height:100%;background:#ffd166}
.ar-coins em{font-style:normal;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;opacity:.75}
.ar-toast{position:absolute;left:50%;top:116px;transform:translateX(-50%);z-index:20;white-space:nowrap;background:#fff3c4;border:4px solid var(--ink);border-radius:16px;padding:10px 20px;box-shadow:0 6px 0 var(--ink);font-family:'Nunito',sans-serif;font-weight:800;font-size:18px}
.ar-toast.pop{animation:popc .35s ease-out both}
html.phone .ar-sub{top:178px;font-size:28px}
html.phone .ar-row{top:214px;gap:16px}
html.phone .ar-cab{width:222px;height:540px}
html.phone .ar-cab.live{width:318px;height:572px}
html.phone .ar-info b{font-size:21px}
html.phone .ar-cab.live .ar-info b{font-size:24px}
html.phone .ar-info em{font-size:18px}
html.phone .ar-marq b{font-size:28px}
html.phone .ar-coins{font-size:26px;bottom:14px}
html.phone .ar-coins em{display:none}
html.phone .ar-toast{font-size:26px}
/* ---------- arcade hub carousel (any number of games) ---------- */
.ar-chips{position:absolute;left:50%;top:200px;transform:translateX(-50%);display:flex;gap:8px;white-space:nowrap;z-index:3}
.ar-chip{display:flex;align-items:center;gap:6px;font:700 15px 'Fredoka',sans-serif;color:#fff3fb;background:rgba(18,12,38,.85);border:3px solid #3d2e66;border-radius:999px;padding:4px 14px 4px 6px;cursor:pointer;transition:transform .15s,border-color .15s}
.ar-chip[data-f=all]{padding-left:14px}
.ar-chip i{font-style:normal;background:#ffd166;color:var(--ink);border-radius:999px;padding:0 7px;font-size:13px}
.ar-chip span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sc);border:2px solid var(--ink);color:#fff;font-size:13px}
.ar-chip:hover{transform:translateY(-2px);border-color:#ff7ad9}
.ar-chip.on{background:#fff3fb;color:var(--ink);border-color:#ff7ad9;box-shadow:0 0 14px rgba(255,122,217,.6)}
.ar-hall{position:absolute;left:0;right:0;top:246px;height:560px;display:flex;align-items:center}
.ar-track{flex:1;display:flex;gap:24px;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scrollbar-width:none;padding:18px 22px 26px;height:100%;box-sizing:border-box;align-items:flex-start;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.ar-hall.one .ar-track{justify-content:center}
.ar-track::-webkit-scrollbar{display:none}
.ar-track .ar-cab,.ar-track .ar-cab.live{flex:0 0 250px;width:250px;height:500px;scroll-snap-align:start}
.ar-track .ar-cab.live::after{animation:none;opacity:0;transition:opacity .2s}
.ar-track .ar-cab.live:hover::after,.ar-track .ar-cab.live:focus-visible::after{opacity:1;animation:arPulse 1.8s ease-in-out infinite}
.ar-track .ar-marq{height:62px}
.ar-track .ar-marq b,.ar-track .ar-cab.live .ar-marq b{font-size:25px}
.ar-track .ar-bezel{margin:12px 12px 0;padding:8px}
.ar-track .ar-deck{height:40px;margin:12px 10px 0}
.ar-track .ar-info{margin:12px 10px 12px;padding:9px 11px;gap:5px;min-height:0;overflow:hidden}
.ar-track .ar-info b,.ar-track .ar-cab.live .ar-info b{font-size:16px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ar-track .ar-info em{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ar-track .ar-best{font-size:15px;white-space:nowrap}
.ar-arrow{flex:none;width:56px;height:96px;margin:0 6px;border-radius:18px;border:4px solid var(--ink);background:#ffd166;color:var(--ink);font:700 54px/1 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 5px 0 var(--ink),0 0 24px rgba(255,209,102,.55);z-index:2;padding:0 0 8px}
.ar-arrow:hover:not(:disabled){transform:translateY(-2px)}
.ar-arrow:disabled{opacity:.25;cursor:default;box-shadow:0 5px 0 var(--ink)}
.ar-hall.one .ar-arrow{visibility:hidden}
.ar-dots{position:absolute;left:50%;top:806px;transform:translateX(-50%);display:flex;gap:10px}
.ar-dots button{width:14px;height:14px;border-radius:50%;border:3px solid var(--ink);background:#5a4a86;padding:0;cursor:pointer}
.ar-dots button.on{background:#ffd166;width:34px;border-radius:999px}
html.phone .ar-chips{top:212px;gap:6px}
html.phone .ar-chip{font-size:20px;padding:6px 16px 6px 8px}
html.phone .ar-chip span{width:28px;height:28px;font-size:16px}
html.phone .ar-chip:not(.on):not([data-f=all]){font-size:0;gap:0;padding:6px}
html.phone .ar-hall{top:258px;height:528px}
html.phone .ar-track .ar-cab,html.phone .ar-track .ar-cab.live{flex-basis:300px;width:300px;height:490px}
html.phone .ar-track .ar-info b,html.phone .ar-track .ar-cab.live .ar-info b{font-size:20px;-webkit-line-clamp:3}
html.phone .ar-track .ar-info em{display:none}
html.phone .ar-arrow{width:70px;height:120px;font-size:64px}
html.phone .ar-dots{top:790px}
html.phone .ar-dots button{width:20px;height:20px}html.phone .ar-dots button.on{width:44px}


/* ================= FACTORY RUSH (#game/factory · js/g-factory.js) ================= */
.stage.fr-stage{background:#1f3346}
.stage.fr-dim>svg{filter:brightness(.62) saturate(.9)}
.stage.fr-shake{animation:frShake .35s}
@keyframes frShake{20%{transform:translate(-9px,3px)}40%{transform:translate(8px,-4px)}60%{transform:translate(-6px,2px)}80%{transform:translate(5px,-1px)}}
.fr-beam{animation:frBeam 5s ease-in-out infinite}
@keyframes frBeam{50%{opacity:.6}}
.fr-top{position:absolute;left:28px;top:20px;display:flex;gap:12px}
.fr-logo{position:absolute;left:50%;top:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.fr-logo b{font-family:'Fredoka',sans-serif;font-weight:700;font-size:78px;line-height:1;letter-spacing:3px;color:#ffd166;text-shadow:0 6px 0 var(--ink),-4px -4px 0 var(--ink),4px -4px 0 var(--ink),-4px 4px 0 var(--ink),4px 4px 0 var(--ink),0 0 40px rgba(255,209,102,.5);transform:rotate(-2deg)}
.fr-logo span{font-family:'Nunito',sans-serif;font-weight:800;font-size:20px;color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:5px 18px;white-space:nowrap}
.fr-logo u{text-decoration:none;background:#ffd166;border-radius:6px;padding:0 4px}
.fr-zgrid{position:absolute;left:120px;right:120px;top:186px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fr-zc{position:relative;display:flex;align-items:center;gap:14px;height:196px;padding:14px 18px 14px 12px;border:5px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:0 9px 0 var(--ink);cursor:pointer;text-align:left;font-family:'Fredoka',sans-serif;transition:transform .14s;overflow:hidden}
.fr-zc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:150px;background:var(--zc);border-right:4px solid var(--ink)}
.fr-zc:hover{transform:translateY(-5px) rotate(-.5deg)}
.fr-zc:active{transform:translateY(3px);box-shadow:0 5px 0 var(--ink)}
.fr-zic{position:relative;width:124px;height:124px;flex:none;filter:drop-shadow(0 4px 0 rgba(45,36,64,.35))}
.fr-zt{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:16px}
.fr-zt b{font-weight:700;font-size:36px;line-height:1}
.fr-zt span{font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;line-height:1.2}
.fr-zt em{font-style:normal;font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;opacity:.6;line-height:1.25}
.fr-zb{position:absolute;right:12px;top:12px;background:#ffd166;border:3px solid var(--ink);border-radius:999px;padding:1px 12px;font-weight:700;font-size:16px}
.fr-how{position:absolute;left:120px;right:120px;bottom:26px;display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:14px;padding:14px 18px;border-radius:20px}
.fr-how>div{display:flex;align-items:center;gap:10px;font-family:'Nunito',sans-serif;font-weight:700;font-size:16px;line-height:1.25}
.fr-how>div>i{flex:none;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#ffd166;border:3px solid var(--ink);font:700 20px Fredoka,sans-serif;font-style:normal}
.fr-how .coinico{width:38px;height:38px}
.fr-how b{font-weight:800}
/* --- play field --- */
.fr-belt{position:absolute;height:26px;overflow:hidden;border:3px solid var(--ink);border-radius:8px;pointer-events:none!important;background:#2b3646}
.fr-belt i{position:absolute;left:0;top:0;bottom:0;width:calc(100% + 96px);background:repeating-linear-gradient(90deg,#46566b 0 26px,#2b3646 26px 48px);will-change:transform}
.fr-ba{left:4px;top:290px;width:1478px}
.fr-bb{left:280px;top:654px;width:1216px}
.fr-belt.hot{box-shadow:0 0 0 3px #ffd166,0 0 22px 6px rgba(255,209,102,.55)}
.fr-belt.hot i{background:repeating-linear-gradient(90deg,#8a6a2a 0 26px,#3a3426 26px 48px)}
.fr-belt.hot2{box-shadow:0 0 0 3px #ff8c42,0 0 30px 10px rgba(255,140,66,.7)}
.fr-belt.surge{animation:frSurge .9s ease-out}
@keyframes frSurge{30%{box-shadow:0 0 0 4px #5ff0b0,0 0 34px 12px rgba(95,240,176,.8)}}
.fr-belt.stopped i{background:repeating-linear-gradient(90deg,#5a2a2a 0 26px,#2b2020 26px 48px)}
.fr-row{position:absolute;left:0;right:0;pointer-events:none!important}
.fr-bins{top:348px;height:176px}
.fr-machs{top:706px;height:182px}
.fr-bin,.fr-mach{pointer-events:auto;position:absolute;top:0;width:285px;height:100%;padding:0;border:0;background:none;cursor:pointer;font-family:'Fredoka',sans-serif;transition:transform .12s,opacity .25s,filter .25s}
.fr-bin[hidden],.fr-mach[hidden]{display:none}
.fr-art{position:absolute;inset:0;width:100%;height:100%}
.fr-lab{position:absolute;left:30px;right:30px;top:42px;height:82px;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 6px;background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 rgba(45,36,64,.5)}
.fr-mach .fr-lab{left:22px;right:22px;top:56px;height:84px}
.fr-lab b{flex:1;font-weight:700;font-size:25px;line-height:1.02;text-align:center;color:var(--ink);overflow-wrap:normal;hyphens:manual}
.fr-lab b.long{font-size:21px}
.fr-lab b.xl{font-size:18px}
.fr-sw{flex:none;width:44px;height:44px;display:block}
.fr-sw svg{width:100%;height:100%;display:block}
.fr-ic{flex:none;font-style:normal;font-size:32px;line-height:1;width:40px;text-align:center}
.fr-bin kbd,.fr-mach kbd{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;min-width:30px;padding:0 6px;height:30px;line-height:24px;border:3px solid var(--ink);border-radius:8px;background:#fff8ec;font:700 19px Fredoka,sans-serif;box-shadow:0 3px 0 var(--ink)}
.fr-bin kbd{bottom:-6px}
.fr-mach kbd{bottom:24px;left:auto;right:30px;transform:none}
.fr-lamp{position:absolute;left:36px;top:150px;width:20px;height:20px;border-radius:50%;background:#2e9e4f;border:3px solid var(--ink)}
.fr-row.off .fr-bin,.fr-row.off .fr-mach{opacity:.5;filter:saturate(.35) brightness(.85);cursor:default}
.fr-row:not(.off) .fr-bin:hover,.fr-row:not(.off) .fr-mach:hover,.fr-bin.hov,.fr-mach.hov{transform:translateY(-6px)}
.fr-row:not(.off) .fr-bin:hover .fr-lab,.fr-row:not(.off) .fr-mach:hover .fr-lab,.fr-bin.hov .fr-lab,.fr-mach.hov .fr-lab{background:#fff3c4}
.fr-row.nudge{animation:frNudge .5s}
@keyframes frNudge{25%{transform:translateY(-10px)}55%{transform:translateY(4px)}}
.fr-bin.flip .fr-lab,.fr-mach.flip .fr-lab{animation:frFlip .38s ease-out}
@keyframes frFlip{from{transform:rotateX(90deg)}to{transform:none}}
.fr-bin.good .fr-lab,.fr-mach.good .fr-lab{background:#bff3cf}
.fr-bin.bad .fr-lab,.fr-mach.bad .fr-lab{background:#ffc9c2;animation:shake .4s}
.fr-bin.gulp{animation:frGulp .35s ease-out}
@keyframes frGulp{40%{transform:scale(1.06,.92)}}
.fr-mach.work{animation:frWork .14s linear 4}
.fr-mach.work .fr-lamp{background:#ffd166;box-shadow:0 0 14px 5px #ffd166}
@keyframes frWork{50%{transform:translate(2px,-2px)}}
.fr-items{position:absolute;inset:0;pointer-events:none!important}
.fr-item{position:absolute;left:0;top:0;width:124px;height:124px;pointer-events:auto;will-change:transform;cursor:grab;touch-action:none}
.fr-item.drag{cursor:grabbing;z-index:5}
.fr-item.drag .fr-isvg{filter:drop-shadow(0 12px 0 rgba(0,0,0,.35))}
.fr-isvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fr-item.cur::before{content:'';position:absolute;left:12px;right:12px;bottom:-8px;height:16px;border-radius:50%;background:rgba(255,209,102,.5);filter:blur(3px)}
.fr-item.rush .fr-isvg{filter:drop-shadow(0 0 6px #ffd166) drop-shadow(0 0 2px #ffb000)}
.fr-item.rush::before{background:rgba(255,176,0,.85)}
.fr-item.shipped{pointer-events:none!important}
.fr-itag{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:1px 12px;font:700 19px Fredoka,sans-serif;box-shadow:0 3px 0 var(--ink);pointer-events:none}
.fr-item.rush .fr-itag{background:#ffd166}
.fr-watch{position:absolute;right:-22px;top:-8px;width:44px;height:44px;animation:frTick 1s steps(2) infinite}
.fr-watch svg{width:100%;height:100%}
@keyframes frTick{50%{transform:rotate(8deg)}}
/* ticket */
.fr-ticket{position:absolute;left:14px;top:348px;width:254px;height:540px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px;background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:0 7px 0 var(--ink);font-family:'Fredoka',sans-serif}
.fr-tk-h{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:-10px -12px 0;padding:6px 12px;background:#2b3646;color:#ffd166;border-radius:13px 13px 0 0;font-weight:700;font-size:19px;letter-spacing:1px}
.fr-rushb{background:#ffd166;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:0 8px;font-size:14px;animation:arBlink .8s steps(2) infinite}
.fr-tk-wait{margin:auto;text-align:center;font-weight:600;font-size:20px;opacity:.6}
.fr-tk-art{height:118px;display:flex;justify-content:center;background:#e9eef2;border:3px solid var(--ink);border-radius:12px;padding:6px}
.fr-tk-art svg{height:100%;width:auto}
.fr-tk-n{font-weight:700;font-size:28px;line-height:1.02;text-align:center}
.fr-tk-need{font-family:'Nunito',sans-serif;font-weight:800;font-size:17px;line-height:1.22;text-align:center;opacity:.8;min-height:42px}
.fr-tk-st{display:flex;align-items:center;gap:8px;padding:6px 8px;border:3px solid var(--ink);border-radius:12px;background:#eef0f3;opacity:.55}
.fr-tk-st i{flex:none;width:28px;height:28px;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:16px;background:#fff}
.fr-tk-st span{font-weight:700;font-size:16px;letter-spacing:.5px}
.fr-tk-st{flex-wrap:wrap;row-gap:2px}
.fr-tk-st b{margin-left:auto;font-weight:700;font-size:18px;text-align:right;line-height:1.05}
.fr-tk-st.done b{flex-basis:100%;text-align:left;padding-left:36px;font-size:19px}
.fr-tk-st.on{opacity:1;background:#fff3c4;box-shadow:0 0 0 3px #ffd166}
.fr-tk-st.on i{background:#ffd166}
.fr-tk-st.done{opacity:1;background:#d8f5e0}
.fr-tk-st.done b{color:#1d7a3a}
.fr-tk-hint{margin-top:auto;text-align:center;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;opacity:.8}
.fr-tk-hint span{white-space:nowrap}
.fr-tk-hint kbd{display:inline-block;border:2px solid var(--ink);border-radius:5px;padding:0 4px;background:#fff;font:700 13px Fredoka,sans-serif}
/* HUD */
.fr-hud{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none!important}
.fr-hud>*{pointer-events:auto;position:absolute;font-family:'Fredoka',sans-serif}
.fr-hl{left:20px;top:16px;display:flex;align-items:center;gap:10px}
.fr-pbtn{font-size:18px;padding:5px 14px;gap:6px}
.fr-pbtn svg{width:18px;height:20px}
.fr-zone{display:inline-block;background:var(--zc);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:3px 14px;font:700 19px Fredoka,sans-serif;text-shadow:0 2px 0 rgba(45,36,64,.5);box-shadow:0 3px 0 var(--ink)}
.fr-score,.fr-combo,.fr-ship{display:flex;flex-direction:column;align-items:center;background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);padding:2px 16px 4px;line-height:1}
.fr-score{left:50%;transform:translateX(-50%);top:12px;min-width:200px}
.fr-score b{font-size:44px;font-weight:700}
.fr-score span,.fr-combo span,.fr-ship span,.fr-speed>span{font-size:13px;font-weight:700;letter-spacing:1.5px;opacity:.65}
.fr-combo{left:calc(50% + 120px);top:16px}
.fr-combo b{font-size:34px;font-weight:700}
.fr-combo.m2{background:#fff3c4}.fr-combo.m3{background:#ffd9a8}.fr-combo.m4{background:#ffb3c6;box-shadow:0 6px 0 var(--ink),0 0 24px 6px rgba(255,122,217,.6)}
.fr-combo.pop{animation:frPop .4s ease-out}
.fr-speed{left:calc(50% - 400px);top:16px;display:flex;flex-direction:column;gap:4px;background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:0 6px 0 var(--ink);padding:5px 12px 8px}
.fr-speed>span{color:var(--ink)}
.fr-gauge{display:flex;gap:4px}
.fr-gauge i{width:14px;height:22px;border-radius:4px;border:2px solid var(--ink);background:#dfe3e8}
.fr-gauge i.on{background:#5ff0b0}
.fr-gauge i.on:nth-child(n+5){background:#ffd166}.fr-gauge i.on:nth-child(n+8){background:#ff7a5c}
.fr-lives{right:250px;top:18px;display:flex;gap:8px;background:#1b2533;border:4px solid var(--ink);border-radius:16px;padding:8px 12px;box-shadow:0 6px 0 var(--ink)}
.fr-lives i{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:#3b2626;transition:background .2s,box-shadow .2s}
.fr-lives i.on{background:#5ff0b0;box-shadow:0 0 12px 3px rgba(95,240,176,.7)}
.fr-ship{right:20px;top:12px;min-width:190px}
.fr-ship b{font-size:36px;font-weight:700}
.fr-ship em{font-style:normal;display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;margin-top:2px}
.fr-ship .coinico{width:20px;height:20px}
.fr-ship.bump{animation:coinbump .3s ease-out}
/* effects */
.fr-fx{position:absolute;inset:0;pointer-events:none!important;z-index:8}
.fr-count{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffd166;border:7px solid var(--ink);box-shadow:0 10px 0 var(--ink);font:700 120px Fredoka,sans-serif;animation:frCount .72s ease-out both}
.fr-count.go{background:#5ff0b0;font-size:84px;width:300px;margin-left:-150px;border-radius:110px}
@keyframes frCount{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.1);opacity:1}70%{transform:scale(1)}100%{transform:scale(1.25);opacity:0}}
.fr-banner{position:absolute;left:50%;top:520px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 34px 12px;background:#2b3646;border:5px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);white-space:nowrap;animation:frBan 1.7s ease-out both}
.fr-banner b{font:700 50px Fredoka,sans-serif;color:#5ff0b0;letter-spacing:2px;line-height:1}
.fr-banner span{font:700 20px Nunito,sans-serif;color:#fff}
.fr-banner.rush b{color:#ffd166}.fr-banner.combo b{color:#ff9ec4}.fr-banner.fix b{color:#9fd3ff}
@keyframes frBan{0%{opacity:0;transform:translate(-120%,-50%) skewX(-12deg)}15%{opacity:1;transform:translate(-50%,-50%) skewX(0)}80%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(30%,-50%) skewX(10deg)}}
.fr-pts{position:absolute;transform:translate(-50%,-50%);font:700 36px Fredoka,sans-serif;color:#5ff0b0;-webkit-text-stroke:2px var(--ink);paint-order:stroke;text-shadow:0 3px 0 var(--ink);white-space:nowrap;animation:frPts 1.1s ease-out both}
.fr-pts.gold{color:#ffd166;font-size:44px}.fr-pts.hint{color:#fff;font-size:28px}.fr-pts.coin{color:#ffd166;font-size:30px}
@keyframes frPts{0%{opacity:0;margin-top:10px}15%{opacity:1}100%{opacity:0;margin-top:-70px}}
.fr-burst{position:absolute;width:0;height:0}
.fr-burst i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:3px;background:var(--c);border:2px solid var(--ink);animation:frBurst .8s ease-out forwards}
@keyframes frBurst{from{transform:rotate(var(--a)) translateY(0) scale(1)}to{transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(.3);opacity:0}}
.fr-jam{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-6deg);display:flex;flex-direction:column;align-items:center;padding:16px 40px;background:#d93a3a;border:7px solid var(--ink);border-radius:24px;box-shadow:0 10px 0 var(--ink);animation:frStamp .5s cubic-bezier(.3,1.6,.6,1) both}
.fr-jam b{font:700 82px Fredoka,sans-serif;color:#fff;letter-spacing:3px;line-height:1}
.fr-jam span{font:700 24px Nunito,sans-serif;color:#ffe3e0}
@keyframes frStamp{from{transform:translate(-50%,-50%) rotate(-6deg) scale(2.2);opacity:0}}
/* modal: why pop-up / pause */
.fr-modal{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:rgba(18,26,38,.42)}
.fr-modal[hidden]{display:none}
.fr-why{width:820px;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:18px 26px 14px;cursor:pointer;position:relative;overflow:hidden;animation:frPop .3s ease-out both;border-color:var(--ink);box-shadow:0 10px 0 var(--ink),0 0 0 6px #ff8a7a}
.fr-why.slow{box-shadow:0 10px 0 var(--ink),0 0 0 6px #ffd166}
.fr-wh{display:flex;align-items:center;gap:16px}
.fr-wh svg{width:96px;height:96px;flex:none;background:#e9eef2;border:3px solid var(--ink);border-radius:14px}
.fr-wh span{display:flex;flex-direction:column;gap:2px}
.fr-wh small{font:700 16px Fredoka,sans-serif;letter-spacing:1px;opacity:.6}
.fr-wh b{font:700 38px Fredoka,sans-serif;color:#c0302c;line-height:1.05}
.fr-why.slow .fr-wh b{color:#b06a00}
.fr-why p{margin:0;font-family:'Nunito',sans-serif;font-weight:700;font-size:23px;line-height:1.3;padding:6px 12px;border-radius:12px}
.fr-wbad{background:#ffe6e2}
.fr-wgood{background:#ddf6e4}
.fr-wfoot{display:flex;justify-content:space-between;font:700 17px Fredoka,sans-serif;opacity:.75}
.fr-wbar{position:absolute;left:0;right:0;bottom:0;height:7px;background:#e8e0d0}
.fr-wbar i{display:block;height:100%;background:#2e9e4f;transform-origin:0 0;animation:frBar linear both}
@keyframes frBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.fr-pause{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 36px;animation:frPop .3s ease-out both}
@keyframes frPop{from{transform:scale(.6);opacity:0}70%{transform:scale(1.03)}to{transform:none;opacity:1}}
.fr-pause h2{margin:0;font:700 46px Fredoka,sans-serif}
.fr-pause p{margin:0;font:800 20px Nunito,sans-serif}
.fr-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* results */
.fr-res-wrap{position:absolute;inset:0;z-index:14;display:flex;align-items:center;justify-content:center;background:rgba(18,26,38,.55)}
.fr-res{width:1080px;max-height:830px;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:20px 28px;animation:frPop .4s ease-out both}
.fr-res-h{display:flex;align-items:center;gap:16px}
.fr-res-h h1{margin:0;font:700 46px Fredoka,sans-serif;line-height:1}
.fr-res-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.fr-res-stats>div{display:flex;flex-direction:column;align-items:center;background:#eef0f3;border:3px solid var(--ink);border-radius:14px;padding:6px 4px}
.fr-res-stats>div:first-child{background:#fff3c4}
.fr-res-stats b{font:700 34px Fredoka,sans-serif;line-height:1.05}
.fr-res-stats span{font:800 14px Nunito,sans-serif;opacity:.7;text-align:center}
.fr-res-coin{justify-content:center;font-size:19px;background:#fff3c4;border:3px solid var(--ink);border-radius:14px;padding:6px 14px;font-family:'Nunito',sans-serif;text-align:center}
.fr-res-rev{flex:1;min-height:0;overflow-y:auto;border:3px solid var(--ink);border-radius:14px;padding:8px 12px;background:#fff;max-height:400px}
.fr-res-rev h3{margin:0 0 6px;font:700 22px Fredoka,sans-serif}
.fr-rv{display:flex;align-items:center;gap:12px;padding:6px 0;border-top:2px dashed #e0d8c8;font-family:'Nunito',sans-serif;font-weight:700;font-size:17px;line-height:1.3}
.fr-rv svg{width:54px;height:54px;flex:none;background:#e9eef2;border:2px solid var(--ink);border-radius:10px}
.fr-rv s{color:#c0302c}
.fr-rv b.ok{color:#1d7a3a}
.fr-rv em{display:block;font-style:normal;opacity:.75;font-size:15px}
.fr-rv.none{justify-content:center;font-size:20px;border:0;padding:16px}
/* phone: a little more text size where it matters (stage is drawn at ~0.43×) */
html.phone .fr-lab b{font-size:28px}
html.phone .fr-lab b.long{font-size:24px}
html.phone .fr-itag{font-size:24px}
html.phone .fr-tk-need{font-size:19px}
html.phone .fr-tk-hint{display:none}
html.phone .fr-why{width:1000px}
html.phone .fr-why p{font-size:30px}
html.phone .fr-wh b{font-size:44px}
html.phone .fr-res{width:1300px;max-height:880px}
html.phone .fr-rv{font-size:22px}
html.phone .fr-rv em{font-size:19px}
html.phone .fr-zt span{font-size:22px}
html.phone .fr-how>div{font-size:20px}
html.phone .fr-logo span{font-size:24px}
.fr-okb{position:absolute;right:4px;top:4px;width:40px;height:40px;border-radius:50%;background:#2e9e4f;color:#fff;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font:700 24px Fredoka,sans-serif}
/* company HQ (valley.js companyHQ) */
.vv-hq{cursor:pointer}
.vv-hq>*{transition:transform .2s ease}
.vv-hq:hover>*{transform:translateY(-3px)}
.vv-root .vv-hqmark,.vv-root .vv-hqmark *,.vv-root .vv-hqpend{animation-play-state:running!important}
.vv-root .vv-hqpend{animation:vv-pulse 1.4s ease-in-out infinite}
@keyframes vv-hqvan{0%{transform:translate(466px,802px);opacity:0}4%{opacity:1}12%{transform:translate(462px,826px)}18%{transform:translate(480px,840px)}40%{transform:translate(620px,840px)}62%{transform:translate(760px,838px)}80%{transform:translate(900px,836px);opacity:1}84%,100%{transform:translate(950px,835px);opacity:0}}
.vv-root .vv-hqvan{animation:vv-hqvan 10s linear infinite}
.vv-root.vv-lite:not(.vv-lite2) .vv-hqvans *{animation-play-state:running!important}

/* ===================== YOUR DESIGN COMPANY (js/company.js) — prefix co- ===================== */
.co-stage .stage{background:#9fd3e6}
.co-logo{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:3px solid var(--ink);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;line-height:1;flex:none;box-shadow:0 3px 0 var(--ink)}
.co-top{z-index:5}
.co-plate{display:flex;align-items:center;gap:12px;padding:6px 18px 6px 8px;border-radius:20px;box-shadow:0 6px 0 var(--ink)}
.co-plate b{display:block;font-size:24px;line-height:1.05}
.co-plate em{display:block;font-style:normal;font-weight:800;font-size:13px;opacity:.75}
.co-tiles{position:absolute;left:28px;top:356px;width:972px;height:78px;display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:12px}
.co-tile{background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:8px 14px;display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative}
.co-tl{font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;letter-spacing:.3px;opacity:.8;white-space:nowrap}
.co-tv{font-family:'Fredoka',sans-serif;font-weight:700;font-size:30px;line-height:1.05;white-space:nowrap}
.co-ts{font-size:13px;font-weight:800;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-tile.inc .co-tv{color:#2361c4}.co-tile.cost .co-tv{color:#c0521a}.co-tile.prof{background:#e6f7e3}.co-tile.prof .co-tv{color:#1f7a3a}
.co-tile.prof.neg{background:#ffe3e1}.co-tile.prof.neg .co-tv{color:#c62828}
.co-tile.prof::before{content:'';position:absolute;inset:-4px;border-radius:18px;pointer-events:none}
.co-tile.chart{padding:6px 10px;justify-content:space-between}
.co-spark{width:100%;height:40px;display:block}
.co-empty{font-size:13px;font-weight:800;opacity:.7;line-height:1.3}
.co-right{position:absolute;left:1024px;top:100px;width:548px;bottom:62px;display:flex;flex-direction:column;gap:14px}
.co-dials{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--paper);border:4px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:6px 8px 8px;flex:none}
.co-dial{display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.co-dial svg{width:96px;height:54px;display:block}
.co-dial b{font-family:'Fredoka',sans-serif;font-size:22px;line-height:1;margin-top:-4px}
.co-dial span{font-size:12px;font-weight:800;opacity:.75;white-space:nowrap}
.co-dial i{position:absolute;right:4px;top:2px;font-style:normal;font-size:12px;font-weight:800;border-radius:8px;padding:0 5px;border:2px solid var(--ink)}
.co-dial i.up{background:#c9f0c4}.co-dial i.dn{background:#ffd0cc}
.co-panel{flex:1;min-height:0;display:flex;flex-direction:column;padding:10px 12px 12px;border-radius:20px;gap:8px}
.co-tabs{display:flex;gap:8px;flex:none}
.co-tab{flex:1;border:3px solid var(--ink);border-radius:12px;background:#eef3f8;font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;padding:6px;cursor:pointer;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}
.co-tab.on{background:var(--s1);color:#fff;transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.co-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:12px;background:#ff6b6b;color:#fff;border:2px solid var(--ink);font-style:normal;font-size:14px;padding:0 5px;animation:pulse 1.6s ease-in-out infinite}
.co-pbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:7px;padding:2px 4px 6px 2px;-webkit-overflow-scrolling:touch}
.co-row{display:flex;align-items:center;gap:10px;border:3px solid var(--ink);border-radius:14px;background:#fff;padding:7px 10px;text-align:left;font-family:inherit;box-shadow:0 3px 0 var(--ink);flex:none}
button.co-row{cursor:pointer}button.co-row:hover{transform:translateY(-2px)}
.co-row.pend{background:#fff3c4}
.co-row.locked{background:#f1ede6;opacity:.85;box-shadow:none;border-style:dashed}
.co-row .pill{font-size:14px;padding:1px 9px;flex:none}
.co-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.co-rt b{font-family:'Fredoka',sans-serif;font-size:18px;line-height:1.1}
.co-rt em{font-style:normal;font-size:13px;font-weight:800;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-go{font-family:'Fredoka',sans-serif;font-weight:700;color:#1f7a3a;font-size:17px;white-space:nowrap}
.co-lock{font-size:18px;opacity:.6}
.co-sub{font-size:13px;font-weight:800;opacity:.7;margin:6px 2px 0}
.co-none{background:#eef8ec;border:3px dashed #7cbf7a;border-radius:14px;padding:12px 14px;font-weight:700;font-size:15px;line-height:1.35}
.co-mh{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;margin-top:6px;border-bottom:3px solid var(--ink);padding-bottom:2px}
.co-mrow{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:700;padding:1px 2px}
.co-mrow b{white-space:nowrap}.co-mrow b.neg{color:#c62828}
.co-mrow.tot{border-top:2px dashed rgba(45,36,64,.4);font-size:15px;font-weight:800;padding-top:3px}
.co-adv{position:absolute;left:28px;top:240px;width:560px;display:flex;gap:10px;align-items:flex-start;z-index:3}
.co-advface{width:74px;height:86px;flex:none;filter:drop-shadow(0 4px 0 rgba(45,36,64,.25))}
.co-advb{background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:8px 14px 10px;position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.co-advb::before{content:'';position:absolute;left:-14px;top:24px;width:20px;height:20px;background:#fff;border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg)}
.co-adv.worried .co-advb{background:#fff1ef}.co-adv.worried .co-advb::before{background:#fff1ef}
.co-advn{font-family:'Fredoka',sans-serif;font-size:13px;opacity:.7;letter-spacing:.3px}
.co-advb p{margin:0;font-weight:700;font-size:15px;line-height:1.3}
.co-advb .btn.small{font-size:14px;padding:5px 10px;white-space:normal;text-align:left}
.co-advl{font-size:13px;font-weight:800;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.co-link{border:2px solid var(--ink);background:#e9f1ff;border-radius:10px;font-weight:800;font-size:13px;padding:2px 8px;cursor:pointer}
.co-link:hover{background:#d4e4ff}
.co-shelf{position:absolute;left:28px;top:692px;width:972px;height:128px;padding-top:10px!important;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:0 2px 4px;scrollbar-width:thin}
.co-prod{flex:none;width:222px;height:94px;cursor:pointer;font-family:inherit;text-align:left;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:4px 8px 4px 4px;animation:pop .4s ease-out both}
.co-prod .co-psvg{grid-row:1 / 3;width:44px;height:58px}
.co-prod>b{font-family:'Fredoka',sans-serif;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.co-prod.ghost span{font-size:12px;font-weight:800;opacity:.75;white-space:nowrap}
.co-prod.ghost{background:rgba(255,248,236,.6);border-style:dashed;box-shadow:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:6px 10px}
.co-ticker{position:absolute;left:28px;top:824px;width:972px;height:46px;display:flex;align-items:center;background:#fff8ec;border:4px solid var(--ink);border-radius:14px;box-shadow:0 5px 0 var(--ink);overflow:hidden}
.co-ticker>b{flex:none;background:var(--ink);color:#ffd166;font-family:'Fredoka',sans-serif;font-size:15px;letter-spacing:1px;padding:0 12px;height:100%;display:flex;align-items:center}
.co-tickw{flex:1;overflow:hidden;white-space:nowrap}
.co-tickr{display:inline-block;padding-left:20px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:18px;animation:coTick 38s linear infinite}
.co-tickr i{font-style:normal;margin:0 16px;color:#e8821e}
@keyframes coTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.co-toastw{position:absolute;left:250px;top:440px;width:720px;display:flex;flex-direction:column;gap:10px;z-index:8;pointer-events:none}
.co-toast{position:relative;pointer-events:auto;padding:12px 44px 12px 18px;font-size:17px;font-weight:700;line-height:1.35;border-radius:18px;animation:coIn .45s cubic-bezier(.3,1.5,.5,1) both;background:#fffbe6}
.co-toast em{display:block;font-style:normal;font-size:14px;opacity:.75;margin-top:2px}
.co-toast.out{animation:coOut .4s ease-in both}
.co-tx,.co-x{position:absolute;right:8px;top:6px;width:34px;height:34px;border:3px solid var(--ink);border-radius:50%;background:#fff;font-size:22px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.co-fee{display:inline-block;background:#ffe3cc;border:2px solid var(--ink);border-radius:10px;padding:0 8px;font-size:14px;font-weight:800}
.co-fee.free{background:#d8f5d0}
@keyframes coIn{from{opacity:0;transform:translateY(-16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes coOut{to{opacity:0;transform:translateY(-12px)}}
/* decision card */
.co-modal{position:absolute;inset:0;background:rgba(45,36,64,.55);z-index:40;animation:fadeIn .2s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.co-mcard{position:absolute;left:36px;top:22px;width:1528px;height:856px;display:flex;flex-direction:column;gap:8px;padding:14px 22px 16px;border-radius:26px;animation:coIn .35s ease-out}
.co-mhead{display:flex;align-items:center;gap:14px;position:relative;padding-right:40px}
.co-mpill{font-size:24px;padding:4px 16px}
.co-mtw{min-width:0}
.co-kick{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;letter-spacing:1px;opacity:.7;text-transform:uppercase}
.co-mtw h2{margin:0;font-family:'Fredoka',sans-serif;font-size:36px;line-height:1.05}
.co-x{top:0;right:0;width:42px;height:42px;font-size:28px}
.co-why{margin:0;background:#e9f1ff;border:3px solid var(--ink);border-radius:14px;padding:7px 14px;font-weight:700;font-size:16px;line-height:1.35}
.co-opts{display:grid;gap:14px;height:420px;flex:none}
.co-opts.n2{grid-template-columns:repeat(2,1fr)}.co-opts.n3{grid-template-columns:repeat(3,1fr)}.co-opts.n4{grid-template-columns:repeat(4,1fr)}.co-opts.n5{grid-template-columns:repeat(5,1fr)}
.co-opt{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:left;border:4px solid var(--ink);border-radius:20px;background:#fff;padding:10px 12px 10px;box-shadow:0 6px 0 var(--ink);cursor:pointer;font-family:inherit;min-width:0;overflow:hidden;transition:transform .12s}
.co-opt:hover{transform:translateY(-3px)}
.co-opt:focus-visible{outline:4px solid #2f6fd6;outline-offset:3px}
.co-opt.sel{background:#fff3c4;box-shadow:0 0 0 5px var(--reward),0 6px 0 var(--ink);transform:translateY(-3px)}
.co-opt.mast{background:linear-gradient(160deg,#fff7d6,#ffe6a8)}
.co-opt.mast.sel{background:linear-gradient(160deg,#fff3c4,#ffd97a)}
.co-opt.locked{filter:grayscale(.85);opacity:.75}
.co-oart{height:112px;display:flex;justify-content:center;flex:none}
.co-art{height:112px;width:170px;overflow:visible}
.co-on{font-family:'Fredoka',sans-serif;font-size:21px;line-height:1.08}
.co-od{font-size:14.5px;font-weight:700;line-height:1.3;opacity:.85}
.co-oprof{margin-top:auto;font-size:14px;font-weight:800;background:#f3efe6;border:2px solid var(--ink);border-radius:10px;padding:3px 8px}
.co-oprof b{font-family:'Fredoka',sans-serif;font-size:17px}
.co-oprof.up{background:#d8f5d0}.co-oprof.dn{background:#ffe0dc}
.co-chips{display:flex;flex-wrap:wrap;gap:4px}
.co-chip{font-size:12.5px;font-weight:800;border:2px solid var(--ink);border-radius:9px;padding:0 6px;background:#fff;white-space:nowrap}
.co-chip.up{background:#d8f5d0}.co-chip.dn{background:#ffe0dc}.co-chip.cost{background:#ffe9cc}.co-chip.new{background:#e1ecff}
.co-curb,.co-mb{position:absolute;top:8px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:12px;border:2px solid var(--ink);border-radius:8px;padding:0 6px;z-index:1}
.co-curb{left:8px;background:#2e9e4f;color:#fff}
.co-mb{right:8px;background:#ffd166}
.co-olock{margin-top:auto;font-size:14px;font-weight:800;background:#fff;border:2px dashed var(--ink);border-radius:10px;padding:5px 8px}
.co-prev{flex:1;min-height:0;display:flex;gap:18px;align-items:stretch;border-top:3px dashed rgba(45,36,64,.3);padding-top:8px}
.co-pv0{flex:1;font-size:19px;font-weight:700;display:flex;align-items:center}
.co-pvl{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.co-pvh{font-family:'Fredoka',sans-serif;font-size:16px;letter-spacing:.5px;opacity:.8}
.co-big{font-family:'Fredoka',sans-serif;font-size:30px;line-height:1.1}
.co-big b.up{color:#1f7a3a}.co-big b.dn{color:#c62828}
.co-big span{font-size:16px;opacity:.7}
.co-pvrow{font-size:15px;font-weight:700}
.co-pvbe{font-size:16px;font-weight:700;background:#fff8d8;border:2px solid var(--ink);border-radius:10px;padding:4px 10px;line-height:1.3}
.co-pvev{font-size:13px;font-weight:800;opacity:.8}
.co-sbars{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px}
.co-sbar{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:8px;font-size:13px;font-weight:800}
.co-sbar i{position:relative;height:12px;border:2px solid var(--ink);border-radius:8px;background:#f1ede6;overflow:hidden}
.co-sbar em{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.co-sbar b{text-align:right}.co-sbar b.up{color:#1f7a3a}.co-sbar b.dn{color:#c62828}
.co-graph{width:470px;flex:none;display:flex;flex-direction:column}
.co-gh{font-family:'Fredoka',sans-serif;font-size:15px;font-weight:700}
.co-graph svg{width:470px;height:200px;background:#fff;border:3px solid var(--ink);border-radius:12px}
.co-gl{display:flex;gap:12px;font-size:12px;font-weight:800;margin-top:2px}
.co-gl i{display:inline-block;width:18px;height:5px;border-radius:3px;vertical-align:middle;margin-right:4px}
.co-gl i.dot{width:12px;height:12px;border-radius:50%;background:#ffd166;border:2px solid var(--ink)}
.co-pacts{display:flex;flex-direction:column;justify-content:center;padding-bottom:40px;align-items:flex-end;gap:8px;flex:none;width:230px}
.co-confirm{font-size:22px}
/* setup */
.co-setup{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:1120px;display:flex;flex-direction:column;gap:8px;padding:22px 30px}
.co-setup h1{margin:0;font-family:'Fredoka',sans-serif;font-size:40px}
.co-setup p{margin:0;font-weight:700;font-size:17px;line-height:1.35}
.co-sk{font-family:'Fredoka',sans-serif;font-weight:600;font-size:14px;letter-spacing:1.2px;opacity:.65}
.co-lab{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;margin-top:6px}
.co-namerow{display:flex;gap:10px;align-items:center}
.co-namerow input{flex:1;font-family:'Fredoka',sans-serif;font-size:28px;border:4px solid var(--ink);border-radius:14px;padding:8px 14px}
.co-sw{display:flex;gap:10px;flex-wrap:wrap}
.co-dot{width:46px;height:46px;border-radius:50%;border:4px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.co-dot.on,.co-ic.on{box-shadow:0 0 0 5px var(--reward),0 3px 0 var(--ink);transform:translateY(-2px)}
.co-ic{width:50px;height:50px;border-radius:14px;border:3px solid var(--ink);background:#fff;font-size:26px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.co-preview{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:28px}
.co-sacts{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.co-starters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.co-start{display:flex;flex-direction:column;align-items:center;gap:6px;border:4px solid var(--ink);border-radius:22px;background:#fff;padding:12px 14px 14px;cursor:pointer;box-shadow:0 6px 0 var(--ink);font-family:inherit;text-align:center}
.co-start:hover{transform:translateY(-3px)}
.co-start.sel{background:#fff3c4;box-shadow:0 0 0 6px var(--reward),0 6px 0 var(--ink)}
.co-ssvg{width:120px;height:120px}
.co-start>b{font-size:24px}
.co-sd{font-size:15px;font-weight:700;line-height:1.3;opacity:.85;min-height:58px}
.co-snum{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;width:100%;font-size:13.5px;font-weight:700;text-align:left;background:#f6f1e7;border-radius:12px;padding:6px 10px}
.co-snum b{font-family:'Fredoka',sans-serif;font-size:16px}
/* the lesson / quiz "Company Update" pop-up */
.co-pop{position:absolute;left:24px;top:108px;width:400px;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;z-index:45;border-radius:20px;background:#fffbe6;animation:coSlide .5s cubic-bezier(.3,1.4,.5,1) both}
.co-pop.out{animation:coOut .25s ease-in both}
@keyframes coSlide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.co-pb{display:flex;flex-direction:column;gap:4px;min-width:0}
.co-pt{font-family:'Fredoka',sans-serif;font-size:22px;line-height:1.1}
.co-pb p{margin:0;font-size:14px;font-weight:700;line-height:1.35}
.co-pb p em{font-style:normal;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:0 5px;white-space:nowrap;display:inline-block;margin:1px 0}
.co-pa{display:flex;gap:6px;margin-top:4px}
.results~.co-pop,.co-pop{max-height:640px}
/* ---- YOUR DESIGN COMPANY on phones (html.phone): real-size sheets, like the quiz/results cards ---- */
html.phone .stage-wrap .co-ph{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(calc(var(--inv) * .72));width:calc(var(--sw) / .72);height:calc(100vh / .72);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:10px 14px 30px;box-sizing:border-box}
html.phone .stage-wrap .co-ph>*{position:static!important;flex:none}
html.phone .stage-wrap .co-phtop{display:flex;align-items:center;gap:10px}
html.phone .stage-wrap .co-ph .hud{position:static;transform:none;margin-left:auto;padding:4px 10px}
html.phone .stage-wrap .co-ph .hud .btn{display:none}
html.phone .stage-wrap .co-ph .co-plate b{font-size:22px}
html.phone .stage-wrap .co-ph .co-tiles{width:auto;height:118px;grid-template-columns:1fr 1fr 1fr}
html.phone .stage-wrap .co-ph .co-tile.chart{display:none}
html.phone .stage-wrap .co-ph .co-tl{font-size:17px}
html.phone .stage-wrap .co-ph .co-tv{font-size:42px}
html.phone .stage-wrap .co-ph .co-ts{font-size:15px}
html.phone .stage-wrap .co-ph .co-dial span{font-size:15px}
html.phone .stage-wrap .co-ph .co-dial b{font-size:26px}
html.phone .stage-wrap .co-ph .co-phscene{border:4px solid var(--ink);border-radius:18px;overflow:hidden;background:#9fd3e6;box-shadow:0 6px 0 var(--ink)}
html.phone .stage-wrap .co-ph .co-phscene svg{display:block;width:100%;height:300px}
html.phone .stage-wrap .co-ph .co-adv{width:auto}
html.phone .stage-wrap .co-ph .co-advb p{font-size:19px}
html.phone .stage-wrap .co-ph .co-advb .btn.small{font-size:17px}
html.phone .stage-wrap .co-ph .co-advl,html.phone .stage-wrap .co-ph .co-link{font-size:15px}
html.phone .stage-wrap .co-ph .co-shelf{width:auto;height:auto;flex-wrap:wrap;overflow:visible}
html.phone .stage-wrap .co-ph .co-prod{width:206px;height:92px}
html.phone .stage-wrap .co-ph .co-prod b{font-size:16px}
html.phone .stage-wrap .co-ph .co-prod span{font-size:14px}
html.phone .stage-wrap .co-ph .co-panel{min-height:0}
html.phone .stage-wrap .co-ph .co-pbody{overflow:visible}
html.phone .stage-wrap .co-ph .co-tab{font-size:22px;padding:8px}
html.phone .stage-wrap .co-ph .co-rt b{font-size:21px}
html.phone .stage-wrap .co-ph .co-rt em,html.phone .stage-wrap .co-ph .co-sub{font-size:15px}
html.phone .stage-wrap .co-ph .co-mrow{font-size:17px}
html.phone .stage-wrap .co-ph .co-none{font-size:18px}
html.phone .stage-wrap .co-ph .co-ticker{width:auto}
html.phone .stage-wrap .co-ph .co-toastw{width:auto;gap:8px}
html.phone .stage-wrap .co-ph .co-toastw:empty{display:none}
html.phone .stage-wrap .co-ph .co-toast{font-size:19px}
/* decision card on phones: a scrolling sheet, two options per row, preview underneath */
html.phone .stage-wrap .co-modal{background:rgba(45,36,64,.7)}
html.phone .stage-wrap .co-mcard{left:0;top:0;transform-origin:0 0;transform:scale(calc(var(--inv) * .72));width:calc(var(--sw) / .72);height:calc(100vh / .72);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:0;padding:12px 16px 24px;box-sizing:border-box;animation:none}
html.phone .stage-wrap .co-mtw h2{font-size:30px}
html.phone .stage-wrap .co-why{font-size:17px}
html.phone .stage-wrap .co-opts{height:auto;grid-template-columns:1fr 1fr!important}
html.phone .stage-wrap .co-opt{min-height:300px}
html.phone .stage-wrap .co-on{font-size:22px}
html.phone .stage-wrap .co-od{font-size:16.5px}
html.phone .stage-wrap .co-oprof{font-size:16px}
html.phone .stage-wrap .co-chip{font-size:14.5px}
html.phone .stage-wrap .co-prev{flex-wrap:wrap;flex:none}
html.phone .stage-wrap .co-pvl{flex:1 1 100%}
html.phone .stage-wrap .co-pvrow,html.phone .stage-wrap .co-pvbe{font-size:17px}
html.phone .stage-wrap .co-sbar{font-size:15px;grid-template-columns:140px 1fr 70px}
html.phone .stage-wrap .co-graph{flex:1 1 auto}
html.phone .stage-wrap .co-pacts{flex:1 1 200px;padding-bottom:0}
html.phone .stage-wrap .co-pv0{font-size:19px;flex:1 1 100%}
/* setup + pop-up on phones */
html.phone .stage-wrap .co-setup{transform:translate(-50%,-50%) scale(calc(var(--inv) * .62));max-height:calc(100vh / .62);overflow-y:auto;box-sizing:border-box;top:50%}
html.phone .stage-wrap .co-pop{transform-origin:0 0;transform:scale(calc(var(--inv) * .6));left:8px;top:8px}
html.phone .stage-wrap .co-pop p{font-size:15px}

/* ---- demand vs supply indicators + production lines (product detail) ---- */
.co-prod:hover{transform:translateY(-2px)}.co-prod:focus-visible{outline:4px solid #2f6fd6;outline-offset:2px}
.co-ds{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-dsr{display:grid;grid-template-columns:44px 1fr 30px;align-items:center;gap:4px;font-size:11px;font-weight:800}
.co-dsr em{font-style:normal;opacity:.8}
.co-dsr i{position:relative;height:9px;border:2px solid var(--ink);border-radius:6px;background:#f1ede6;overflow:hidden}
.co-dsr s{position:absolute;left:0;top:0;bottom:0;border-radius:4px;text-decoration:none}
.co-dsr i.d s{background:#e84f8a}.co-dsr i.s s{background:#2f6fd6}
.co-dsr b{text-align:right;font-size:12px}
.co-dsm{font-size:11px;font-weight:800;border-radius:6px;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-ds.lost .co-dsm{background:#ffe0dc;color:#a8231b}.co-ds.spare .co-dsm{background:#fff1c9;color:#7a5200}.co-ds.ok .co-dsm{background:#d8f5d0;color:#1f6b33}
.co-ds.big{width:390px;margin-left:auto;margin-right:50px;gap:4px;flex:none;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px}
.co-ds.big .co-dsr{grid-template-columns:70px 1fr 50px;font-size:15px}.co-ds.big .co-dsr i{height:14px}.co-ds.big .co-dsr b{font-size:17px;font-family:'Fredoka',sans-serif}.co-ds.big .co-dsm{font-size:14px;padding:1px 8px}
.co-pcard{gap:9px}
.co-phead{flex:none}.co-pbig{width:66px;height:72px;display:block}
.co-key{display:inline-flex;align-items:center;gap:5px;font-size:13px;margin-left:8px;opacity:.85}.co-key u{display:inline-block;width:4px;height:16px;background:#e84f8a;border-radius:2px}
.co-chain{display:flex;align-items:stretch;gap:4px;flex:none;padding-top:10px}
.co-arr{align-self:center;font-style:normal;font-size:18px;opacity:.45;flex:none}
.co-stg{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:4px;border:4px solid var(--ink);border-radius:16px;background:#fff;padding:14px 10px 8px;text-align:left;cursor:pointer;box-shadow:0 5px 0 var(--ink);font-family:inherit;transition:transform .12s}
.co-stg:hover{transform:translateY(-3px)}.co-stg:focus-visible{outline:4px solid #2f6fd6;outline-offset:3px}
.co-stg.bn{border-color:#c62828;background:#fff0ee;box-shadow:0 5px 0 #8f1d1d}
.co-stg.sel{box-shadow:0 0 0 5px var(--reward),0 5px 0 var(--ink);transform:translateY(-3px)}
.co-bnb{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#d93a3a;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;border:2px solid var(--ink);border-radius:8px;padding:0 8px;white-space:nowrap;animation:pulse 1.4s ease-in-out infinite}
.co-sn{font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;line-height:1.1}
.co-stg em{font-style:normal;font-size:12.5px;font-weight:800;opacity:.72;line-height:1.2;height:30px;overflow:hidden}
.co-cbar{position:relative;height:14px;border:2px solid var(--ink);border-radius:8px;background:#f1ede6;margin-top:2px}
.co-cbar i{position:absolute;left:0;top:0;bottom:0;background:#2f6fd6;border-radius:5px}
.co-stg.bn .co-cbar i{background:#d93a3a}
.co-cbar u{position:absolute;top:-6px;bottom:-6px;width:4px;margin-left:-2px;background:#e84f8a;border-radius:2px}
.co-stg>b{font-family:'Fredoka',sans-serif;font-size:24px;line-height:1}.co-stg>b small{font-size:13px;opacity:.7;margin-left:2px}
.co-pips{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.co-pips i{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:#fff}.co-pips i.on{background:#ffd166}
.co-boost{font-size:11px;font-weight:800;background:#e1ecff;border:2px solid var(--ink);border-radius:8px;padding:0 5px;margin-left:5px;white-space:nowrap}
.co-tiersh{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600}
.co-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:none}
.co-tier{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;border:4px solid var(--ink);border-radius:18px;background:#fff;padding:8px 12px 10px;box-shadow:0 5px 0 var(--ink);cursor:pointer;font-family:inherit;min-height:150px}
.co-tier:hover{transform:translateY(-2px)}.co-tier:focus-visible{outline:4px solid #2f6fd6;outline-offset:3px}
.co-tier.sel{background:#fff3c4;box-shadow:0 0 0 5px var(--reward),0 5px 0 var(--ink)}
.co-tier.cur{background:#e6f7e3}.co-tier.cur.sel{background:#d6f0d0}
.co-tier.old{opacity:.6}.co-tier.locked{filter:grayscale(.75);opacity:.85}
.co-tl2{font-family:'Fredoka',sans-serif;font-weight:600;font-size:12px;letter-spacing:1px;opacity:.7}
.co-tier>b{font-family:'Fredoka',sans-serif;font-size:19px;line-height:1.1}
.co-td{font-size:13.5px;font-weight:700;opacity:.85;line-height:1.3}
.co-tier .co-olock{margin-top:auto}
.co-pvbe.warn{background:#ffe9cc}
.co-uprev{min-height:0}
html.phone .stage-wrap .co-ph .co-shelf{height:auto}
html.phone .stage-wrap .co-ph .co-prod{width:290px;height:auto;padding:6px 10px 6px 6px}
html.phone .stage-wrap .co-ph .co-prod>b{font-size:18px}
html.phone .stage-wrap .co-ph .co-prod .co-psvg{width:56px;height:70px}
html.phone .stage-wrap .co-dsr{font-size:14px;grid-template-columns:64px 1fr 40px}
html.phone .stage-wrap .co-dsr b{font-size:15px}
html.phone .stage-wrap .co-dsm{font-size:14px}
html.phone .stage-wrap .co-dsr i{height:12px}
html.phone .stage-wrap .co-pcard .co-mhead{flex-wrap:wrap}
html.phone .stage-wrap .co-ds.big{width:100%;margin:4px 0 0}
html.phone .stage-wrap .co-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 10px}
html.phone .stage-wrap .co-arr{display:none}
html.phone .stage-wrap .co-sn{font-size:18px}
html.phone .stage-wrap .co-stg em{font-size:15px;height:36px}
html.phone .stage-wrap .co-boost{font-size:13px}
html.phone .stage-wrap .co-tier>b{font-size:21px}
html.phone .stage-wrap .co-td{font-size:16px}
html.phone .stage-wrap .co-tiersh{font-size:20px}
html.phone .stage-wrap .co-uprev .co-big{font-size:24px}
.co-payok{color:#1f7a3a;font-size:17px}.co-payno{color:#c62828}
.co-day{margin-top:4px;background:#eef6ff;border:2px solid var(--ink);border-radius:10px;padding:4px 8px;font-size:14px;font-weight:700;line-height:1.35}.co-dayev{display:block;margin-top:2px}.co-toast .co-day{display:block;font-size:15px}.co-paywhy{font-size:13px;opacity:.75;font-weight:700}
html.phone .stage-wrap .co-pop .co-day{font-size:15px}

/* ---- goals, savings, ladder, trophies, campaigns, tutorial ---- */
.co-howbtn{white-space:nowrap}
.co-sav{position:absolute;left:640px;top:14px;display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#fff4c4,#ffd97a);border:4px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:4px 18px 4px 14px;z-index:5}
.co-savl{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.co-savv{font-family:'Fredoka',sans-serif;font-weight:700;font-size:42px;line-height:1;color:#1f5f2e;min-width:150px;transition:color .3s}
.co-savv.up{color:#1f9e3a;text-shadow:0 0 12px rgba(46,158,79,.5)}.co-savv.dn{color:#c62828}
.co-sav.mini{position:static;padding:2px 10px;border-width:3px;box-shadow:0 3px 0 var(--ink);border-radius:14px;flex:none}.co-sav.mini .co-savv{font-size:24px;min-width:0}.co-sav.mini .co-savl{font-size:14px}
.co-pacts .co-sav.mini{margin-bottom:4px}
.co-i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--ink);background:#e9f1ff;font:italic 800 13px Georgia,serif;cursor:pointer;padding:0;vertical-align:middle;flex:none;color:var(--ink)}
.co-i:hover{background:#cfe0ff}
.co-goal{position:absolute;left:28px;top:94px;width:972px;height:250px;padding:8px 16px 8px;border-radius:22px;display:flex;flex-direction:column;gap:6px;background:#fffdf4}
.co-goal.ready{background:#eaffe4;box-shadow:0 0 0 5px #7fd67a,0 10px 0 var(--ink)}
.co-gtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.co-gh1{font-family:'Fredoka',sans-serif;font-weight:600;font-size:21px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.co-gh1 b{color:#2361c4}
.co-ladder{display:flex;align-items:center;gap:2px;flex:none}
.co-rung{display:flex;flex-direction:column;align-items:center;width:62px;opacity:.45;filter:grayscale(.8)}
.co-rung i{font-style:normal;font-size:22px;line-height:1}.co-rung em{font-style:normal;font-size:11px;font-weight:800;white-space:nowrap}
.co-rung.done{opacity:.8;filter:none}.co-rung.cur{opacity:1;filter:none;background:#ffd166;border:2px solid var(--ink);border-radius:10px}
.co-rarr{opacity:.35;font-size:14px}
.co-gbody{display:flex;gap:14px;align-items:stretch;flex:none}
.co-reqs{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.co-req{display:grid;grid-template-columns:330px 1fr 160px;align-items:center;gap:10px;font-weight:800;font-size:14.5px;line-height:1.3}
.co-rl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-rb{display:block;position:relative;height:14px;border:2px solid var(--ink);border-radius:8px;background:#f1ede6;overflow:hidden}
.co-rb s{position:absolute;left:0;top:0;bottom:0;background:#f0a830;border-radius:5px}
.co-req.met .co-rb s{background:#2e9e4f}
.co-req b{text-align:right;font-family:'Fredoka',sans-serif;font-size:16px;white-space:nowrap}
.co-unl{font-size:13px;font-weight:800;opacity:.7}
.co-gmove{width:200px;flex:none;display:flex;align-items:center;justify-content:center}
.co-movebtn{flex-direction:column;gap:2px;font-size:20px;padding:10px 14px;animation:shopglow 1.6s ease-in-out infinite}.co-movebtn small{font-family:Nunito,sans-serif;font-size:13px;opacity:.9}
.co-gleft{display:flex;flex-direction:column;align-items:center;font-family:'Fredoka',sans-serif}.co-gleft b{font-size:32px}.co-gleft span{font-size:14px;opacity:.75}
.co-tip{margin-top:auto;display:flex;align-items:center;gap:10px;background:#eef6ff;border:3px solid var(--ink);border-radius:14px;padding:2px 10px 2px 4px}
.co-tip.worried{background:#fff1ef}
.co-tip .co-advface{width:44px;height:52px}
.co-tip>div{flex:1;min-width:0}.co-tip p{margin:0;font-weight:700;font-size:14.5px;line-height:1.25}
.co-tip .btn.small{font-size:14px;padding:5px 10px;flex:none;max-width:250px;white-space:normal;text-align:center}
.co-gsub{margin:0;font-weight:700}
.co-goal1{margin-top:4px;font-size:13px;font-weight:800;background:#fff4c4;border:2px solid var(--ink);border-radius:10px;padding:2px 8px}
.co-prodw{flex:none;display:flex;flex-direction:column;gap:3px}
.co-prodw .co-prod{height:84px}
.co-mkt{border:2.5px solid var(--ink);border-radius:10px;background:#ffe3ef;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;padding:1px 8px;cursor:pointer;box-shadow:0 2px 0 var(--ink)}
.co-mkt:hover{background:#ffcfe3}.co-mkt.locked{background:#eee;opacity:.8}
.co-dsr s.cx{background:repeating-linear-gradient(45deg,#e84f8a 0 4px,#ffb3cf 4px 8px)}
.co-ctag{font-size:11px;font-weight:800;border-radius:6px;padding:0 5px;background:#ffe3ef;align-self:flex-start;white-space:nowrap}.co-ctag.fade{background:#f1ede6}
.co-ds.big .co-ctag{font-size:13px}
.co-trophies{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.co-tro{border:3px solid var(--ink);border-radius:12px;background:#f6f2ea;padding:4px 8px;display:grid;grid-template-columns:30px 1fr;column-gap:6px;align-items:center}
.co-tro.got{background:#fff4c4}
.co-tcup{grid-row:1 / 5;font-size:22px;text-align:center}.co-tro:not(.got) .co-tcup{opacity:.5}
.co-tro b{font-family:'Fredoka',sans-serif;font-size:15px;line-height:1.1}.co-tro em{font-style:normal;font-size:11.5px;font-weight:700;opacity:.75;line-height:1.2}
.co-tro .co-rb{height:9px}.co-tprog,.co-tdone{font-size:11px;font-weight:800;opacity:.8}.co-tdone{color:#1f7a3a;opacity:1}
.co-chip.no{background:#ffe0dc}
.co-aff{display:block;font-size:13px;font-weight:800;border-radius:8px;padding:2px 8px;max-width:230px;text-align:center}.co-aff.ok{background:#d8f5d0;color:#1f6b33}.co-aff.no{background:#ffe9cc;color:#8a4b00}
.co-floorw{background:#fff1c9}
.co-ccard{gap:10px}
.co-ctypes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;flex:none}
.co-ctype{position:relative;display:flex;flex-direction:column;gap:4px;text-align:left;border:4px solid var(--ink);border-radius:18px;background:#fff;padding:8px 10px;box-shadow:0 5px 0 var(--ink);cursor:pointer;font-family:inherit;min-height:200px}
.co-ctype:hover{transform:translateY(-2px)}.co-ctype.sel{background:#fff3c4;box-shadow:0 0 0 5px var(--reward),0 5px 0 var(--ink)}.co-ctype.locked{filter:grayscale(.7);opacity:.8}
.co-cic{font-size:30px;line-height:1}.co-ctype>b{font-family:'Fredoka',sans-serif;font-size:18px;line-height:1.1}
.co-days{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-size:18px;flex:none}.co-days b{font-size:24px;min-width:160px;text-align:center}.co-days em{font-style:normal;font-size:14px;background:#d8f5d0;border-radius:8px;padding:0 8px}
.co-lockbig{font-size:20px;font-weight:700;line-height:1.4;background:#f6f2ea;border:3px dashed var(--ink);border-radius:18px;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.co-celebrate{display:flex;align-items:center;justify-content:center}
.co-celcard,.co-tutcard{width:760px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;animation:coIn .45s cubic-bezier(.3,1.5,.5,1) both;position:relative;z-index:2}
.co-celcard h2,.co-tutcard h2{margin:0;font-family:'Fredoka',sans-serif;font-size:38px}
.co-celcard p,.co-tutcard p{margin:0;font-weight:700;font-size:18px;line-height:1.4}
.co-celic,.co-tutic{font-size:70px;line-height:1}
.co-celun{background:#eaffe4;border:3px solid var(--ink);border-radius:12px;padding:4px 12px}
.co-tut{display:flex;align-items:center;justify-content:center}
.co-tutdots{display:flex;gap:6px}.co-tutdots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:#fff}.co-tutdots i.on{background:#ffd166}
.co-tutacts{display:flex;gap:10px;align-items:center;margin-top:6px}
/* phone */
html.phone .stage-wrap .co-ph .co-sav{position:static;align-self:stretch;justify-content:space-between}
html.phone .stage-wrap .co-ph .co-savv{font-size:44px}
html.phone .stage-wrap .co-ph .co-goal{position:static;width:auto;height:auto}
html.phone .stage-wrap .co-ph .co-gtop{flex-direction:column;align-items:flex-start}
html.phone .stage-wrap .co-ph .co-gh1{font-size:22px;white-space:normal}
html.phone .stage-wrap .co-ph .co-gbody{flex-direction:column}
html.phone .stage-wrap .co-ph .co-req{grid-template-columns:1fr 160px;font-size:17px}
html.phone .stage-wrap .co-ph .co-req .co-rb{grid-column:1 / 3;grid-row:2}
html.phone .stage-wrap .co-ph .co-gmove{width:auto}
html.phone .stage-wrap .co-ph .co-tip p{font-size:17px}
html.phone .stage-wrap .co-ph .co-unl{font-size:15px}
html.phone .stage-wrap .co-ph .co-tiles{height:auto}
html.phone .stage-wrap .co-ph .co-mkt{font-size:16px;padding:4px 10px}
html.phone .stage-wrap .co-ph .co-prodw .co-prod{height:auto}
html.phone .stage-wrap .co-trophies{grid-template-columns:1fr 1fr 1fr}
html.phone .stage-wrap .co-tro b{font-size:17px}html.phone .stage-wrap .co-tro em{font-size:14px}
html.phone .stage-wrap .co-ctypes{grid-template-columns:1fr 1fr}
html.phone .stage-wrap .co-ctype .co-td{font-size:15px}
html.phone .stage-wrap .co-celcard,html.phone .stage-wrap .co-tutcard{transform:scale(calc(var(--inv) * .62));max-width:none}
html.phone .stage-wrap .co-aff{font-size:15px}
html.phone .stage-wrap .co-pcard .co-sav.mini,html.phone .stage-wrap .co-ccard .co-sav.mini{order:5}
.co-prod{position:relative}.co-prod .co-ctag{position:absolute;top:-10px;right:6px;border:2px solid var(--ink);z-index:1}
html:not(.phone) .co-goal .co-tip p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.phone .stage-wrap .co-ccard .co-mhead{flex-wrap:wrap}
html.phone .stage-wrap .co-ccard .co-mtw{flex:1 1 60%;min-width:0}
html.phone .stage-wrap .co-ccard .co-ds.big{width:100%;margin:14px 0 0;position:relative}
.co-lockbig>p{margin:0}
html.phone .stage-wrap .co-celcard,html.phone .stage-wrap .co-tutcard{animation:none;width:calc((var(--sw) - 60px) / .62);box-sizing:border-box}
/* ===================== phase 5: product slots + the R&D studio ===================== */
.co-shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;overflow:visible;padding:10px 0 0!important}
.co-prodw{min-width:0;flex:initial}
.co-prodw .co-prod,.co-shelf .co-prod{width:auto;height:86px;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto 1fr;padding:3px 6px 3px 3px;align-items:start;column-gap:4px}
.co-shelf .co-prod .co-psvg{grid-row:1;width:30px;height:36px}
.co-shelf .co-prod>b{font-size:12.5px;line-height:1.1;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-right:30px;align-self:center}
.co-shelf .co-prod .co-ds{grid-column:1 / 3;align-self:end}
.co-shelf .co-dsr{grid-template-columns:minmax(0,1fr) 26px;font-size:10px}.co-shelf .co-dsr em{display:none}.co-shelf .co-dsr i{height:8px}.co-shelf .co-dsr b{font-size:11px}
.co-shelf .co-dsm{font-size:9.5px;padding:0 3px}
.co-rb2{position:absolute;right:4px;top:3px;background:#2d2440;color:#ffd166;border-radius:8px;padding:0 5px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:13px;line-height:1.25;display:flex;flex-direction:column;align-items:center}
.co-rb2 i{font-style:normal;font-size:7px;letter-spacing:-1px;color:#ffd166;line-height:1}
.co-rb2.big{position:static;display:inline-flex;flex-direction:row;gap:6px;font-size:20px;padding:2px 10px;vertical-align:middle}.co-rb2.big i{font-size:13px;letter-spacing:0}
.co-pbtns{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.co-pbtns .co-mkt,.co-ur{font-size:11px;padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-ur{border:2.5px solid var(--ink);border-radius:10px;background:#e3f0ff;font-family:'Fredoka',sans-serif;font-weight:700;cursor:pointer;box-shadow:0 2px 0 var(--ink)}.co-ur:hover{background:#cfe4ff}
.co-indev{position:absolute;left:4px;top:-11px;background:#fff1c9;border:2px solid var(--ink);border-radius:8px;font-size:10px;font-weight:800;padding:0 5px;z-index:1}.co-indev.leg{background:#ffe0dc}
.co-prodw.legacy .co-prod{border-style:dashed}
.co-slot{height:112px;border:3px dashed var(--ink);border-radius:14px;background:rgba(255,248,236,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:4px;font-family:inherit;min-width:0}
.co-slot i{font-style:normal;font-size:26px;line-height:1}.co-slot b{font-family:'Fredoka',sans-serif;font-size:13px;line-height:1.1}.co-slot span{font-size:10.5px;font-weight:800;opacity:.75}
button.co-slot{cursor:pointer}button.co-slot.new{background:#e9f9e4;border-color:#1f6b33;color:#1f6b33;animation:rdPulse 2.4s ease-in-out infinite}button.co-slot.new:hover{background:#d4f3cb}
button.co-slot.draft{background:#fff4c4}.co-slot.locked{opacity:.65}.co-slot.over{background:#ffe0dc}
@keyframes rdPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,158,79,.0)}50%{box-shadow:0 0 0 6px rgba(46,158,79,.25)}}
.co-urbtn{margin-top:4px}
.co-urcard{left:200px;top:70px;width:1200px;height:auto;max-height:760px}
.co-urm{display:grid;grid-template-columns:repeat(5,1fr) 220px;gap:10px;align-items:center}
.co-urr{display:flex;flex-direction:column;align-items:center;gap:2px}.co-urr>b{font-family:'Fredoka',sans-serif;font-size:44px;line-height:1}.co-urr em{font-size:13px;font-weight:700;text-align:center}
.co-urs{display:flex;gap:14px}
.co-uro{flex:1;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;font-family:inherit;background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:0 6px 0 var(--ink);padding:14px 16px;cursor:pointer}
.co-uro:hover:not([disabled]){transform:translateY(-2px);background:#f4fbff}.co-uro[disabled]{opacity:.5;cursor:not-allowed}.co-uro.warn{background:#fff3f0}
.co-uro i{font-style:normal;font-size:34px}.co-uro b{font-family:'Fredoka',sans-serif;font-size:24px}.co-uro em{font-style:normal;font-weight:700;font-size:15px}.co-uro>span:last-child{font-size:13px;font-weight:800;opacity:.75}
.rd-bar.sm{grid-template-columns:1fr;gap:2px}.rd-bar.sm span{font-size:13px}.rd-bar.sm b{font-size:18px}
/* ---- studio layout ---- */
.rd-stage .stage{background:#e9dfcf}
.rd{position:absolute;inset:0;font-family:inherit}
.rd-top{position:absolute;left:18px;right:18px;top:12px;height:66px;display:flex;align-items:center;gap:14px;z-index:5}
.rd-title{display:flex;flex-direction:column;color:#fff;line-height:1.05}.rd-title b{font-size:26px;letter-spacing:1px;color:#ffd166}.rd-title em{font-style:normal;font-size:13px;font-weight:800;opacity:.85}
.rd-steps{display:flex;align-items:center;gap:4px;margin:0 auto}
.rd-sarr{color:#fff;opacity:.5;font-size:20px}
.rd-step{display:flex;align-items:center;gap:6px;border:3px solid #fff;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;padding:5px 14px 5px 8px;cursor:pointer}
.rd-step i{font-style:normal;font-size:18px}.rd-step.past{background:rgba(95,211,138,.35)}.rd-step.on{background:#ffd166;color:var(--ink);border-color:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.35)}
.rd-step[disabled]{opacity:.4;cursor:not-allowed}.rd-step:focus-visible{outline:3px solid #9fd3ff;outline-offset:2px}
.co-sav.rd{position:static;flex:none;padding:2px 14px 2px 10px;border-width:3px}.co-sav.rd .co-savv{font-size:30px}
.rd-left{position:absolute;left:18px;top:96px;width:568px;height:724px;overflow-y:auto;padding:12px 16px 20px;box-sizing:border-box;border-radius:22px;scrollbar-width:thin}
.rd-stagebox{position:absolute;left:600px;top:96px;width:520px;height:724px}
.rd-right{position:absolute;left:1134px;top:96px;width:448px;height:724px;overflow-y:auto;padding:12px 16px;box-sizing:border-box;border-radius:22px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin}
.rd-nav{position:absolute;left:18px;right:18px;top:836px;height:52px;display:flex;align-items:center;gap:14px}
.rd-nav .rd-next{margin-left:auto;font-size:20px}.rd-spent{font-weight:800;font-size:15px;background:#fff8ec;border:3px solid var(--ink);border-radius:12px;padding:5px 12px}
.rd .co-toastw{left:auto;right:24px;top:96px;width:440px;z-index:30}
/* ---- left panel ---- */
.rd-h{font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;margin:12px 0 6px;display:flex;align-items:center;gap:8px}.rd-h:first-child{margin-top:2px}
.rd-h>span{font-family:inherit;font-size:13px;font-weight:800;opacity:.65;margin-left:auto}
.rd-p{margin:0 0 6px;font-weight:700;font-size:15px;line-height:1.35}
.rd-ada{display:flex;gap:8px;align-items:flex-start;background:#e9f2ff;border:3px solid #2f6fd6;border-radius:14px;padding:8px 10px;font-weight:700;font-size:14.5px;line-height:1.35;margin-bottom:6px}
.rd-note{background:#fff8ec;border:2.5px dashed var(--ink);border-radius:12px;padding:8px 10px;font-weight:700;font-size:14px;margin-top:8px}
.rd-mats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rd-mat{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;font-family:inherit;background:#fff;border:3px solid var(--ink);border-left:10px solid var(--mc);border-radius:12px;padding:5px 8px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.rd-mat i{font-style:normal;font-size:24px;grid-row:1 / 3}.rd-mat b{font-family:'Fredoka',sans-serif;font-size:14.5px;line-height:1.1}.rd-mat em{font-style:normal;font-size:12px;font-weight:800;opacity:.7}
.rd-mat.sel{background:#fff4c4;outline:3px solid #e8b21e}.rd-mat.full{opacity:.6}
.rd-types,.rd-tgs,.rd-strats,.rd-feats,.rd-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd-type,.rd-tg,.rd-strat,.rd-feat,.rd-opt,.rd-form,.rd-tog,.rd-pm,.rd-test{font-family:inherit;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);padding:7px 9px;cursor:pointer;display:flex;flex-direction:column;gap:3px;position:relative}
.rd-type:hover:not(.locked),.rd-tg:hover,.rd-strat:hover:not(.locked),.rd-feat:hover,.rd-opt:hover:not(.locked),.rd-form:hover,.rd-tog:hover:not(.locked),.rd-pm:hover:not(.locked),.rd-test:hover:not([disabled]){background:#f4fbff}
.rd-type.sel,.rd-tg.sel,.rd-strat.sel,.rd-feat.sel,.rd-opt.sel,.rd-form.sel,.rd-tog.sel,.rd-pm.sel{background:#fff4c4;outline:3px solid #e8b21e;outline-offset:-1px}
.locked{cursor:not-allowed}.rd-type.locked,.rd-strat.locked,.rd-opt.locked,.rd-tog.locked,.rd-pm.locked{background:#eeeae2;color:#6a6474}
.rd-type.locked .rd-tsvg{filter:grayscale(1);opacity:.45}
.rd-type b,.rd-tg b,.rd-strat b,.rd-feat b,.rd-opt b,.rd-form b,.rd-tog b{font-family:'Fredoka',sans-serif;font-size:15px;line-height:1.15}
.rd-type em,.rd-tg em,.rd-strat em,.rd-feat em,.rd-form em,.rd-tog em{font-style:normal;font-size:12.5px;font-weight:700;line-height:1.25;opacity:.85}
.rd-tsvg{width:52px;height:56px;position:absolute;right:6px;top:4px}.rd-type b,.rd-type em{padding-right:54px}
.rd-tn{font-size:11.5px;font-weight:800;opacity:.7}.rd-tl{font-size:12px;font-weight:800;color:#a8231b}
.rd-les{font-size:12.5px;align-self:flex-start;background:#fff1c9;border:2px solid var(--ink);border-radius:8px;padding:1px 7px;font-weight:800;cursor:pointer}
.rd-name{width:100%;box-sizing:border-box;font-family:'Fredoka',sans-serif;font-size:22px;padding:6px 12px;border:3px solid var(--ink);border-radius:12px}
.rd-tg i{font-style:normal;font-size:22px}.rd-tg span{font-size:11.5px;font-weight:800}.rd-tg u,.rd-form u{text-decoration:none;color:#a8231b;font-weight:800;font-size:12px}.rd-tg u.ok,.rd-form u.ok{color:#1f6b33}.rd-form u{color:#7a5200}
.rd-ef{display:inline-block;font-size:11.5px;font-weight:800;border:2px solid var(--mc,#2d2440);border-radius:8px;padding:0 5px;margin:1px 3px 1px 0;background:#fff}
.rd-ef.up{background:color-mix(in srgb,var(--mc) 15%,#fff)}.rd-ef.dn{background:#ffe0dc;border-color:#d93a3a}.rd-ef.cost{border-color:#8a6a3a;background:#fff1c9}
.rd-budget{font-size:15px!important;opacity:1!important;color:#2f6fd6;letter-spacing:1px}
.rd-res{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:7px 10px;margin-bottom:7px;box-shadow:0 3px 0 var(--ink)}
.rd-res.done{background:#eefbea}
.rd-rh{display:flex;align-items:center;gap:8px}.rd-rh i{font-style:normal;font-size:22px}.rd-rh b{font-family:'Fredoka',sans-serif;font-size:16px;flex:1}
.rd-res>em{display:block;font-style:normal;font-size:13px;font-weight:700;opacity:.85;margin:1px 0 3px}
.rd-rw2{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.rd-rdone{font-size:13px;font-weight:800;color:#1f6b33}.rd-rdone.no{color:#a8231b}
.rd-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:5px}
.rd-tier{font-family:inherit;border:3px solid var(--ink);border-radius:11px;padding:3px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 0 var(--ink);background:#fff}
.rd-tier b{font-family:'Fredoka',sans-serif;font-size:14px}.rd-tier span{font-size:11.5px;font-weight:800}
.rd-tier.t-basic{background:#f1f5f9}.rd-tier.t-advanced{background:#dff0ff}.rd-tier.t-mastery{background:#fff1c9}
.rd-tier:hover:not([disabled]){transform:translateY(-1px)}.rd-tier[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}.rd-tier.locked{background:#eeeae2}.rd-tier.no{opacity:.6}
.rd-strats .rd-strat span{display:flex;flex-wrap:wrap}
.rd-forms{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rd-form{padding:6px 7px}
.rd-cols{display:flex;gap:8px;flex-wrap:wrap}
.rd-col{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--ink);position:relative}
.rd-col.sel{outline:4px solid #e8b21e;outline-offset:2px}.rd-col span{position:absolute;inset:auto 0 -16px;font-size:10px;font-weight:800;text-align:center}
.rd-togs{display:flex;flex-direction:column;gap:6px}
.rd-tog{display:grid;grid-template-columns:30px 1fr auto;grid-template-rows:auto auto auto;column-gap:8px;align-items:center}
.rd-tog .rd-cb{grid-row:1 / 4;width:24px;height:24px;border:3px solid var(--ink);border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:900;background:#fff}
.rd-tog.sel .rd-cb{background:#2e9e4f;color:#fff}.rd-tog .pill,.rd-tog .rd-les{grid-column:3;grid-row:1;align-self:start}.rd-tog em,.rd-tog>span:not(.rd-cb){grid-column:2}
.rd-feat i{font-style:normal;font-size:20px;position:absolute;right:8px;top:6px}.rd-feat b{padding-right:26px}
.rd-pms{display:flex;gap:8px}.rd-pm{flex:1;flex-direction:row;align-items:center;gap:6px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px}.rd-pm em{font-family:inherit;font-style:normal;font-size:11px;font-weight:800;opacity:.7}
.rd-testbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:7px}
.rd-test{align-items:center;text-align:center;background:#e9f2ff}.rd-test i{font-style:normal;font-size:24px}.rd-test b{font-family:'Fredoka',sans-serif;font-size:15px}.rd-test span{font-size:11.5px;font-weight:800}
.rd-test[disabled]{opacity:.45;cursor:not-allowed}
.rd-plog{list-style:none;padding:0;margin:7px 0 0;display:flex;flex-direction:column;gap:4px}.rd-plog li{font-size:13px;font-weight:700;background:#eefbea;border:2px solid #2e9e4f;border-radius:10px;padding:4px 8px}.rd-plog li.flaw{background:#fff4c4;border-color:#e8b21e}.rd-plog i{font-style:normal}
.rd-opt span{display:flex;flex-wrap:wrap}
.rd-sl{background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px 8px}
.rd-slt{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:800}.rd-slt b{font-family:'Fredoka',sans-serif;font-size:22px}
.rd-slw{position:relative;height:30px}
.rd-slw input{position:absolute;inset:0;width:100%;margin:0;accent-color:#2f6fd6;cursor:pointer;height:30px}
.rd-slock{position:absolute;top:9px;height:12px;background:repeating-linear-gradient(45deg,#c9c3ba 0 5px,#e6e0d6 5px 10px);border-radius:6px}
.rd-danger{position:absolute;top:9px;height:12px;background:rgba(217,58,58,.25);border-radius:6px}
.rd-slnote{font-size:12px;font-weight:800;color:#7a5200}.rd-sln{font-size:13px;font-weight:700;min-height:18px}.rd-sln b.dn{color:#a8231b}.rd-sln b.up{color:#1f6b33}
.rd-sum{margin:0;padding-left:18px;font-weight:700;font-size:15px;line-height:1.5}
.rd-launchrow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}.rd-launch{font-size:24px;padding:12px 22px}
.rd-binrow{margin-top:18px}
.rd-launched{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:30px}.rd-launched h2{font-family:'Fredoka',sans-serif;font-size:32px;margin:0}.rd-launched p{font-weight:700;font-size:16px;margin:0}
.rd-big{font-size:70px;animation:pop .6s ease-out}
.rd-stars{color:#e8b21e;letter-spacing:1px}.rd-stars i{font-style:normal;color:#d6cfc2}.rd-stars.big{font-size:40px}
/* ---- right panel ---- */
.rd-sh{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;letter-spacing:1px;display:flex;flex-direction:column}.rd-sh span{font-family:inherit;font-size:11.5px;font-weight:800;opacity:.6;letter-spacing:0}
.rd-empty{font-weight:700;font-size:14px;opacity:.75}
.rd-bar{display:grid;grid-template-columns:128px 1fr 40px 34px;align-items:center;gap:6px;font-family:inherit;background:none;border:0;padding:2px 0;text-align:left;cursor:pointer;width:100%}
.rd-bar span{font-weight:800;font-size:14px}.rd-bar span .co-i{width:15px;height:15px;font-size:10px;vertical-align:1px}
.rd-track,.rd-bar>i{display:block;position:relative;height:18px;border:3px solid var(--ink);border-radius:9px;background:#f1ede6;overflow:hidden}
.rd-track s,.rd-bar>i s{position:absolute;left:0;top:0;bottom:0;background:var(--mc);border-radius:5px;transition:width .7s cubic-bezier(.2,.9,.3,1.2)}
.rd-bar b{font-family:'Fredoka',sans-serif;font-size:21px;text-align:right}
.rd-bar.open{background:#f4efe6;border-radius:10px}
.rd-d{font-style:normal;font-weight:900;font-size:13px;border-radius:8px;padding:0 4px;animation:rdDelta 1.6s ease-out both}.rd-d.up{color:#1f6b33;background:#d8f5d0}.rd-d.dn{color:#a8231b;background:#ffe0dc}
@keyframes rdDelta{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.35);opacity:1}100%{transform:scale(1)}}
.rd-parts{background:#fff8ec;border:2.5px solid var(--ink);border-radius:12px;padding:6px 10px;font-size:12.5px;font-weight:700}
.rd-parts ul{list-style:none;padding:0;margin:4px 0 0;max-height:150px;overflow-y:auto}.rd-parts li{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed #d6cfc2}.rd-parts li b.up{color:#1f6b33}.rd-parts li b.dn{color:#a8231b}
.rd-rating{display:flex;align-items:center;gap:12px;background:#2d2440;color:#fff;border-radius:16px;padding:8px 12px;margin-top:4px}
.rd-rw{position:relative;width:104px;height:104px;flex:none}.rd-ring{width:104px;height:104px}.rd-ring circle{transition:stroke-dasharray .8s ease-out}
.rd-rv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-size:40px;color:#fff}
.rd-rt{display:flex;flex-direction:column;gap:2px}.rd-rt>b{font-family:'Fredoka',sans-serif;font-size:22px;color:#ffd166}.rd-rt .rd-stars{font-size:24px}.rd-mult{font-size:12.5px;font-weight:700;opacity:.9}.rd-mult .co-i{width:15px;height:15px;font-size:10px}
.rd-fc{display:grid;grid-template-columns:1fr 1fr;gap:4px}.rd-fc span{background:#fff8ec;border:2px solid var(--ink);border-radius:10px;padding:2px 8px;font-size:12px;font-weight:800;display:flex;flex-direction:column}.rd-fc b{font-family:'Fredoka',sans-serif;font-size:18px}.rd-fc span.neg b{color:#d93a3a}
.rd-weak{font-size:13px;font-weight:700;background:#e9f2ff;border-radius:10px;padding:6px 9px}
/* ---- the stage ---- */
.rd-scene{position:absolute;inset:0;border:4px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 6px 0 var(--ink)}
.rd-sk{position:absolute;left:14px;top:10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;letter-spacing:2px;opacity:.7;z-index:2}
.rd-hint{position:absolute;left:16px;right:16px;bottom:12px;text-align:center;font-weight:800;font-size:13px;opacity:.75;z-index:2}
.rd-prod{position:absolute;left:50%;top:44%;width:300px;height:312px;transform:translate(-50%,-50%);transition:filter .5s,opacity .5s;overflow:visible;z-index:1}
.rd-q{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:'Fredoka',sans-serif;font-size:140px;color:#5b7aa6;opacity:.35}
.rd-label{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);background:#fff8ec;border:3px solid var(--ink);border-radius:12px;padding:3px 14px;text-align:center;white-space:nowrap;z-index:3;box-shadow:0 3px 0 var(--ink)}
.rd-label b{display:block;font-family:'Fredoka',sans-serif;font-size:19px}.rd-label em{font-style:normal;font-size:12px;font-weight:800;opacity:.75}
.rd-persona{position:absolute;right:12px;top:40px;width:150px;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:6px 8px;transform:rotate(2deg);z-index:2;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.rd-persona i{font-style:normal;font-size:26px}.rd-persona b{display:block;font-family:'Fredoka',sans-serif;font-size:13px}.rd-persona em{font-style:normal;font-size:11px;font-weight:700}
.s-brief{background:#eef5ff;background-image:linear-gradient(#cfe0f5 1px,transparent 1px),linear-gradient(90deg,#cfe0f5 1px,transparent 1px);background-size:24px 24px}
.s-research{background:#c9955a;background-image:radial-gradient(#b07a40 1.5px,transparent 2px),radial-gradient(#dcae74 1px,transparent 2px);background-size:14px 14px,9px 9px;background-position:0 0,5px 7px}
.s-research .rd-sk{color:#fff;opacity:.9}.s-research .rd-hint{color:#fff;opacity:.95}
.s-design.paper{background:#fffdf5;background-image:linear-gradient(transparent 27px,#d8e6f5 28px);background-size:100% 28px}
.s-design.cad{background:#0e1b33;color:#bdf3ff}.s-design.cad .rd-sk,.s-design.cad .rd-hint{color:#7fe8ff;opacity:.9}
.rd-cadgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(127,232,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(127,232,255,.13) 1px,transparent 1px);background-size:20px 20px;box-shadow:inset 0 0 80px rgba(0,180,255,.35)}
.rd-dims i{position:absolute;border-color:#7fe8ff;opacity:.8}.rd-dims i.h{left:110px;right:110px;top:470px;border-top:2px dashed}.rd-dims i.v{top:150px;bottom:250px;left:80px;border-left:2px dashed}
.rd-dims span{position:absolute;font-size:12px;font-weight:800;color:#7fe8ff;font-family:monospace}.rd-dims .dh{left:50%;top:476px;transform:translateX(-50%)}.rd-dims .dv{left:24px;top:330px;transform:rotate(-90deg)}
.s-develop{background:#d9c3a0;background-image:linear-gradient(90deg,rgba(0,0,0,.05) 50%,transparent 50%);background-size:60px 100%}
.rd-bench{position:absolute;left:0;right:0;top:61%;bottom:0;background:#8a5a36;border-top:6px solid #5e3a20}
.s-develop .rd-prod{top:42%}
.rd-angry{position:absolute;inset:60px 10px auto 10px;display:flex;justify-content:space-between;z-index:3}.rd-angry span{background:#fff;border:3px solid #d93a3a;color:#a8231b;border-radius:14px;padding:4px 8px;font-weight:900;font-size:14px;animation:rdShake .5s ease-in-out infinite alternate}
.rd-angry span:nth-child(2){margin-top:60px;animation-delay:.15s}.rd-angry span:nth-child(3){margin-top:20px;animation-delay:.3s}
@keyframes rdShake{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.rd-calm{position:absolute;right:14px;top:50px;background:#d8f5d0;border:3px solid #2e9e4f;border-radius:12px;padding:4px 10px;font-weight:900;z-index:2}
.rd-src{position:absolute;left:12px;top:44px;background:#fff8ec;border:3px solid var(--ink);border-radius:12px;padding:3px 9px;font-weight:800;font-size:13px;z-index:2}
.rd-tag{position:absolute;right:30px;top:52%;background:#ffd166;border:3px solid var(--ink);border-radius:8px 14px 14px 8px;padding:3px 10px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:20px;transform:rotate(-8deg);z-index:3}
.rd-tests{position:absolute;left:12px;right:12px;bottom:92px;display:flex;justify-content:center;gap:6px;z-index:2}.rd-tests span{background:#eefbea;border:2px solid #2e9e4f;border-radius:10px;padding:1px 7px;font-size:12px;font-weight:800}.rd-tests span.flaw{background:#fff4c4;border-color:#e8b21e}
.s-launch{background:#1b1530;color:#fff}.rd-spot{position:absolute;left:50%;top:-40px;width:560px;height:680px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 0%,rgba(255,244,196,.65),rgba(255,244,196,.12) 55%,transparent 70%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.s-launch .rd-label{background:#ffd166}
.rd-box{position:absolute;left:50%;top:52%;width:200px;height:120px;transform:translate(-30%,-10%) rotate(-6deg);background:#e84f8a;border:4px solid var(--ink);border-radius:8px;z-index:0}
.rd-shine{position:absolute;left:50%;top:44%;width:300px;height:312px;transform:translate(-50%,-50%);background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:300% 100%;mix-blend-mode:screen;animation:rdShine 3.2s ease-in-out infinite;pointer-events:none;z-index:2;-webkit-mask:radial-gradient(circle,#000 45%,transparent 70%);mask:radial-gradient(circle,#000 45%,transparent 70%)}
@keyframes rdShine{0%{background-position:120% 0}60%,100%{background-position:-20% 0}}
.rd-review{position:absolute;left:16px;right:16px;bottom:100px;text-align:center;background:#fff8ec;color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:6px 10px;z-index:3;box-shadow:0 4px 0 #000}
.rd-review b{display:block;font-family:'Fredoka',sans-serif;font-size:18px}.rd-review em{font-style:normal;font-size:12px;font-weight:800;opacity:.7}.rd-review .rd-stars{font-size:22px}
.s-launch.live .rd-prod{animation:rdRise 1s cubic-bezier(.2,1.4,.4,1)}
@keyframes rdRise{from{transform:translate(-50%,-20%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
/* product "looks" through the process */
.rd-ghost *{fill:none!important;stroke:#5b7aa6!important;stroke-dasharray:7 5;stroke-width:2.4!important}
.rd-faint{opacity:.6}
.rd-sketch{filter:url(#rdPencil)}.rd-sketch *{fill-opacity:.2;stroke:#3a3846!important;stroke-width:2.1!important}
.rd-cad{filter:drop-shadow(0 0 5px #6fe3ff)}.rd-cad *{fill:rgba(111,227,255,.07)!important;stroke:#7fe8ff!important;stroke-width:1.2!important}
.rd-card *{fill:#ead7b0!important;stroke:#7a5a32!important}
.rd-print *{fill:url(#rdLayer)!important;stroke:#a24f12!important}
.rd-render,.rd-proto2{filter:drop-shadow(0 16px 12px rgba(0,0,0,.4))}
.f-bold *{stroke-width:4.2}.f-minimal *{stroke-width:2}.rd-render.f-organic,.rd-proto2.f-organic{filter:url(#rdWobble) drop-shadow(0 16px 12px rgba(0,0,0,.4))}
.rd-calls{position:absolute;inset:0;z-index:3;pointer-events:none}
.rd-call{position:absolute;top:calc(118px + var(--i) * 54px);background:#fff;border:2.5px solid var(--ink);border-radius:10px;padding:2px 8px;font-size:12.5px;font-weight:800;max-width:150px;animation:pop .4s ease-out both}
.rd-call.l{left:10px}.rd-call.r{right:10px}
.rd-call.l::after,.rd-call.r::after{content:'';position:absolute;top:50%;width:36px;border-top:2px dashed currentColor}.rd-call.l::after{left:100%}.rd-call.r::after{right:100%}
.cad .rd-call{background:#0e1b33;color:#7fe8ff;border-color:#7fe8ff}
/* research pins */
.rd-pins{position:absolute;inset:0;z-index:2}
.rd-pin{position:absolute;width:188px;transform:rotate(var(--r));background:#fff59d;border-radius:4px;padding:12px 9px 7px;box-shadow:0 5px 8px rgba(0,0,0,.3);font-size:12px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.rd-pin.partial{background:#ffe0b2}.rd-pin.fail{background:#e6e6e6}
.rd-pin b{font-family:'Fredoka',sans-serif;font-size:13.5px;line-height:1.1}.rd-pin em{font-style:normal;font-size:11.5px;font-weight:800;opacity:.75}
.rd-pg{color:#1f6b33;font-weight:900}.rd-ins{background:rgba(255,255,255,.7);border-radius:6px;padding:2px 4px}.rd-ins.no{opacity:.8}
.rd-tack{position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#d93a3a;border:2px solid var(--ink)}
.rd-pin.new{animation:rdPin .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes rdPin{from{transform:rotate(var(--r)) translateY(-60px) scale(1.4);opacity:0}to{transform:rotate(var(--r))}}
/* research reveal + prototype tests */
.rd-reveal{position:absolute;inset:0;background:rgba(20,15,35,.6);border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:10;animation:fadeIn .25s ease-out}
.rd-reveal.out{opacity:0;transition:opacity .3s}
.rd-rcard{width:400px;padding:14px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:coIn .35s ease-out}.rd-rcard.small{width:420px}
.rd-kick{font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px}
.rd-dial{width:200px;height:200px}
.rd-needle{animation:rdSpin 1.4s cubic-bezier(.12,.75,.2,1) forwards}
@keyframes rdSpin{from{transform:rotate(0deg)}to{transform:rotate(var(--to))}}
.rd-key{display:flex;gap:6px;font-size:12px;font-weight:800}.rd-key span{border-radius:8px;padding:1px 6px;border:2px solid var(--ink)}.rd-key .s{background:#5fd38a}.rd-key .p{background:#ffd166}.rd-key .f{background:#ff8a8a}
.rd-rres{min-height:60px;display:flex;flex-direction:column;gap:3px;font-weight:800;font-size:14px}
.rd-rres>b{font-family:'Fredoka',sans-serif;font-size:24px;animation:pop .4s ease-out}.rd-rres b.success{color:#1f8a43}.rd-rres b.partial{color:#b07400}.rd-rres b.fail{color:#c0392b}
.rd-rres em{font-style:normal;background:#fff59d;border-radius:8px;padding:3px 8px;animation:pop .5s .2s ease-out both}.rd-rres em.no{background:#eee}.rd-rres i{font-style:normal;color:#2f6fd6}
.rd-rig{position:relative;width:340px;height:300px}
.rd-tp{position:absolute;inset:0}.rd-tp .rd-prod{width:220px;height:230px;top:58%}
.t-stress .rd-weight{position:absolute;left:50%;top:0;width:110px;height:60px;margin-left:-55px;background:#59636f;border:4px solid var(--ink);border-radius:8px;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;animation:rdPress 1.3s ease-in forwards}
@keyframes rdPress{0%{transform:translateY(-80px)}55%{transform:translateY(60px)}70%{transform:translateY(50px)}100%{transform:translateY(54px)}}
.t-drop .rd-tp{animation:rdDrop 1.3s cubic-bezier(.5,0,1,1) forwards}
@keyframes rdDrop{0%{transform:translateY(-140px) rotate(-10deg)}60%{transform:translateY(0) rotate(0)}75%{transform:translateY(-30px) rotate(6deg)}100%{transform:translateY(0) rotate(0)}}
.rd-floor{position:absolute;left:10px;right:10px;bottom:6px;height:10px;background:#59636f;border-radius:4px}
.rd-users{position:absolute;left:0;right:0;top:4px;display:flex;justify-content:space-around;font-size:44px;z-index:2}.rd-users i{font-style:normal;animation:rdBob .5s ease-in-out infinite alternate}.rd-users i:nth-child(2){animation-delay:.2s}.rd-users i:nth-child(3){animation-delay:.35s}
@keyframes rdBob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.rd-defs{position:absolute;width:0;height:0}
/* ---- phone: one scrolling sheet ---- */
html.phone .stage-wrap .rd.rd-ph{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(calc(var(--inv) * .72));width:calc(var(--sw) / .72);height:calc(100vh / .72);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:10px 14px 30px;box-sizing:border-box;background:#e9dfcf}
html.phone .stage-wrap .rd-ph>*{position:relative;left:auto;right:auto;top:auto;width:auto;height:auto}
html.phone .stage-wrap .rd-ph .rd-top{flex-wrap:wrap;background:#2d2440;border-radius:16px;padding:8px 10px;gap:8px}
html.phone .stage-wrap .rd-ph .rd-steps{order:3;width:100%;justify-content:space-between}
html.phone .stage-wrap .rd-ph .rd-sarr{display:none}
html.phone .stage-wrap .rd-ph .rd-step{font-size:15px;padding:4px 9px 4px 6px}
html.phone .stage-wrap .rd-ph .rd-stagebox{height:470px}
html.phone .stage-wrap .rd-ph .rd-left,html.phone .stage-wrap .rd-ph .rd-right{overflow:visible}
html.phone .stage-wrap .rd-ph .rd-nav{position:sticky;bottom:-30px;background:#e9dfcf;padding:8px 0;z-index:6;flex-wrap:wrap}
html.phone .stage-wrap .rd-ph .co-toastw{position:fixed;left:10px;right:10px;width:auto;top:10px}
html.phone .stage-wrap .rd-ph .rd-types,html.phone .stage-wrap .rd-ph .rd-tgs{grid-template-columns:1fr 1fr}
html.phone .stage-wrap .rd-ph .rd-tier b,html.phone .stage-wrap .rd-ph .rd-type b{font-size:17px}
html.phone .stage-wrap .co-urcard{left:0;top:0;transform-origin:0 0;transform:scale(calc(var(--inv) * .72));width:calc(var(--sw) / .72);max-height:none;height:calc(100vh / .72);overflow-y:auto;border-radius:0;box-sizing:border-box}
html.phone .stage-wrap .co-urs{flex-direction:column}html.phone .stage-wrap .co-urm{grid-template-columns:1fr 1fr}
html.phone .stage-wrap .co-ph .co-shelf{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.phone .stage-wrap .co-ph .co-shelf .co-prod{height:auto;min-height:110px}
html.phone .stage-wrap .co-ph .co-shelf .co-prod>b{font-size:16px}html.phone .stage-wrap .co-ph .co-shelf .co-dsr{font-size:13px}
html.phone .stage-wrap .co-ph .co-slot{height:140px}html.phone .stage-wrap .co-ph .co-slot b{font-size:17px}html.phone .stage-wrap .co-ph .co-slot span{font-size:13px}
html.phone .stage-wrap .co-ph .co-pbtns .co-mkt,html.phone .stage-wrap .co-ph .co-ur{font-size:15px;padding:4px}
.rd-label{color:var(--ink)}
.rd-persona.br{top:auto;bottom:96px;right:12px;transform:rotate(-2deg)}
.rd-pin{width:180px}
.rd-nav{right:150px}
.rd-shine{opacity:.35}
.rd-tog>b{grid-column:2;grid-row:1}.rd-tog>em{grid-column:2;grid-row:2}.rd-tog>span:not(.rd-cb):not(.pill):not(.rd-les){grid-column:2;grid-row:3}
.rd-tog>.pill,.rd-tog>.rd-les{grid-column:3!important;grid-row:1!important;align-self:start;justify-self:end}
.rd-les{display:inline-block}
.rd-type .rd-les,.rd-strat .rd-les,.rd-opt .rd-les,.rd-pm .rd-les{margin-top:2px}
.rd-angry{align-items:flex-start;top:92px}
.rd-rt .rd-d{align-self:flex-start}
html.phone .stage-wrap .rd-ph>*{flex:none}
html.phone .stage-wrap .rd-ph .rd-stagebox{height:430px}html.phone .stage-wrap .rd-ph .rd-reveal{position:absolute;left:0;right:0;border-radius:0;z-index:20}html.phone .stage-wrap .rd-ph .rd-rcard{transform:scale(1.1)}
html.phone .stage-wrap .co-ph .co-shelf .co-prod{width:auto;grid-template-columns:52px minmax(0,1fr)}
html.phone .stage-wrap .co-ph .co-shelf .co-prod .co-psvg{width:52px;height:60px}
html.phone .stage-wrap .co-ph .co-shelf .co-prod>b{font-size:17px;padding-right:44px}
html.phone .stage-wrap .co-ph .co-rb2{font-size:17px}
html.phone .stage-wrap .co-ph .co-shelf .co-dsr{grid-template-columns:minmax(0,1fr) 46px}
.co-shelf .co-prod .co-ctag{right:auto;left:34px}
/* ===================== phase 6: analytics — product scorecards + company metric screens ===================== */
.an-click{cursor:pointer}.co-tile.an-click:hover,.co-dial.an-click:hover{box-shadow:0 0 0 4px rgba(47,111,214,.35)}.an-click:focus-visible{outline:4px solid #2f6fd6;outline-offset:2px}
.co-tile.an-click::after{content:'📊';position:absolute;right:8px;top:6px;font-size:14px;opacity:.55}.co-tile{position:relative}
.co-sav.an-click:hover{filter:brightness(1.05);box-shadow:0 6px 0 var(--ink),0 0 0 4px rgba(47,111,214,.35)}
.co-urbtns{display:inline-flex;gap:6px;margin-top:4px}.co-urbtns .co-urbtn{margin-top:0}
/* scorecard */
.an-score{overflow-y:auto}
.an-render{flex:none;width:110px;height:110px;background:radial-gradient(circle at 50% 35%,#fff4c4,#2d2440 75%);border:4px solid var(--ink);border-radius:18px;display:flex;align-items:center;justify-content:center}
.an-big{width:92px;height:98px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.an-rev{margin:2px 0 0;font-weight:800;font-style:italic;opacity:.8}
.an-rate{margin-left:auto;margin-right:50px;display:flex;flex-direction:column;align-items:center;background:#2d2440;color:#fff;border-radius:18px;padding:6px 20px}.an-rate>b{font-family:'Fredoka',sans-serif;font-size:52px;line-height:1}.an-rate .rd-stars{font-size:22px}.an-rate em{font-style:normal;font-weight:800;color:#ffd166}
.an-sbody{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.an-ch{font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px;margin:8px 0 6px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.an-ch>span{font-family:inherit;font-size:12.5px;font-weight:800;opacity:.65}
.an-met{border:3px solid var(--ink);border-radius:14px;background:#fff;margin-bottom:7px;overflow:hidden}.an-met.open{box-shadow:0 0 0 3px var(--mc)}
.an-mh{width:100%;display:grid;grid-template-columns:170px 1fr 44px 70px;gap:8px;align-items:center;background:none;border:0;padding:7px 10px;font-family:inherit;text-align:left;cursor:pointer}
.an-mh>span{font-weight:800;font-size:15px}.an-mh>b{font-family:'Fredoka',sans-serif;font-size:22px;text-align:right}.an-mh>em{font-style:normal;font-size:12px;font-weight:800;color:#2f6fd6;text-align:right}.an-mh .rd-track s{background:var(--mc)}
.an-met .an-rows{padding:2px 10px 8px}
.an-box{background:#fff8ec;border:3px solid var(--ink);border-radius:16px;padding:6px 12px 10px;margin-bottom:10px}.an-box p{margin:0 0 6px;font-weight:700}.an-box.warn{background:#fff4e6}
.an-tips{margin:0;padding-left:18px;font-weight:700;font-size:14px;line-height:1.45}
.an-cmp{margin-top:6px}.an-cmp table{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:13px;font-weight:800}
.an-cmp th{text-align:left;font-size:12px;padding:0 6px}.an-cmp td{background:#fff;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:3px 6px;white-space:nowrap}
.an-cmp td:first-child{border-left:2px solid var(--ink);border-radius:10px 0 0 10px;display:flex;align-items:center;gap:6px}.an-cmp td:last-child{border-right:2px solid var(--ink);border-radius:0 10px 10px 0}
.an-cmp tr{cursor:pointer}.an-cmp tr.cur td{background:#fff4c4}.an-cmp tr:hover td{background:#f4fbff}.an-cmp td.neg{color:#d93a3a}
.an-mini{width:26px;height:28px}.an-mb{display:inline-block;width:46px;height:9px;border:2px solid var(--ink);border-radius:5px;background:#f1ede6;position:relative;overflow:hidden;vertical-align:middle;margin-right:4px}.an-mb s{position:absolute;left:0;top:0;bottom:0;background:var(--mc)}
/* contribution rows */
.an-rows{display:flex;flex-direction:column;gap:3px}
.an-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 84px;gap:8px;align-items:center;font-size:13.5px;font-weight:700;padding:2px 0;border-bottom:1px dashed #e0d6c4}
.an-rl{display:flex;align-items:baseline;gap:6px;min-width:0}.an-rl i{font-style:normal;flex:none}.an-rl em{font-style:normal;font-size:11.5px;opacity:.65;margin-left:4px;white-space:nowrap}
.an-rb{height:14px;border-radius:7px;background:#f1ede6;position:relative;overflow:hidden}.an-rb s{position:absolute;top:0;bottom:0;left:0;background:#2e9e4f;border-radius:7px}
.an-row.neg .an-rb s{background:#d93a3a}.an-row.k-curve .an-rb s,.an-row.k-cap .an-rb s{background:#9aa9b4}.an-row.k-start .an-rb s{background:#2f6fd6}
.an-row>b{text-align:right;font-family:'Fredoka',sans-serif;font-size:16px}.an-row.neg>b{color:#c0392b}.an-row.pos>b{color:#1f6b33}
.an-row.total{border-bottom:0;border-top:3px solid var(--ink);margin-top:3px;padding-top:4px}.an-row.total>b{color:var(--ink);font-size:20px}.an-row.total .an-rl{font-family:'Fredoka',sans-serif;font-size:16px}
/* metric screens */
.an-stage .stage{background:#e9dfcf}
.an{position:absolute;inset:0}
.an-top{position:absolute;left:18px;right:18px;top:10px;height:72px;display:flex;align-items:center;gap:14px;z-index:5}
.an-title{display:flex;flex-direction:column;color:#fff;min-width:250px}.an-title b{font-size:26px;color:#ffd166}.an-title em{font-style:normal;font-size:13px;font-weight:800;opacity:.85}
.an-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;justify-content:flex-end}
.an-tab{border:2.5px solid #fff;background:rgba(255,255,255,.1);color:#fff;border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;padding:3px 10px;cursor:pointer}.an-tab.on{background:#ffd166;color:var(--ink);border-color:#ffd166}.an-tab:focus-visible{outline:3px solid #9fd3ff}
.an-l{position:absolute;left:18px;top:100px;width:740px;height:786px;overflow-y:auto;padding:12px 18px;box-sizing:border-box;border-radius:22px}
.an-r{position:absolute;left:774px;top:100px;width:808px;height:786px;overflow-y:auto;padding:12px 18px;box-sizing:border-box;border-radius:22px}
.an-hero{display:flex;align-items:center;gap:16px}.an-val{font-family:'Fredoka',sans-serif;font-size:64px;line-height:1}.an-hero span{font-weight:700;font-size:14px;opacity:.8}.an-dial{width:120px;flex:none}
.an-trend{width:100%;height:auto;background:#fff;border:3px solid var(--ink);border-radius:14px}
.an-empty{font-weight:800;opacity:.7;padding:8px 0}
.an-eff{margin:0;padding-left:20px;font-weight:700;font-size:15px;line-height:1.5}.an-eff b{white-space:nowrap}
.an-wi{display:flex;align-items:center;gap:12px}.an-wi input{flex:1;accent-color:#2f6fd6}.an-wi b{font-family:'Fredoka',sans-serif;font-size:26px;width:44px;text-align:right}.an-wio{font-weight:700;font-size:14px}.an-wio b.up{color:#1f6b33}.an-wio b.dn{color:#c0392b}
.an-led{list-style:none;padding:0;margin:0;font-size:13px;font-weight:700}.an-led li{display:grid;grid-template-columns:120px 1fr 90px;gap:8px;border-bottom:1px dashed #e0d6c4;padding:2px 0}.an-led em{font-style:normal;opacity:.8}.an-led b{text-align:right}.an-led b.neg{color:#c0392b}.an-led b.pos{color:#1f6b33}
.an-imp{display:flex;flex-direction:column;gap:7px}.an-ti{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 10px;font-weight:700;font-size:14px}.an-ti span{flex:1}.an-ti .btn{flex:none}
/* phone */
html.phone .stage-wrap .an.an-ph{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(calc(var(--inv) * .72));width:calc(var(--sw) / .72);height:calc(100vh / .72);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;padding:10px 14px 30px;box-sizing:border-box;background:#e9dfcf}
html.phone .stage-wrap .an-ph>*{position:relative;left:auto;top:auto;width:auto;height:auto;flex:none;overflow:visible}
html.phone .stage-wrap .an-ph .an-top{flex-wrap:wrap;background:#2d2440;border-radius:16px;padding:8px 10px}
html.phone .stage-wrap .an-ph .an-tabs{justify-content:flex-start;margin-left:0}html.phone .stage-wrap .an-ph .an-tab{font-size:16px}
html.phone .stage-wrap .an-ph .an-row,html.phone .stage-wrap .an-ph .an-eff,html.phone .stage-wrap .an-ph .an-ti{font-size:16px}
html.phone .stage-wrap .an-sbody{grid-template-columns:1fr}
html.phone .stage-wrap .an-mh{grid-template-columns:140px 1fr 40px 60px}
.an-r,.an-l{padding-bottom:70px}
.co-tile.an-click::after{top:auto;bottom:5px;right:7px}
/* Exam Hall landmark on the valley map */
.vv-exhall{cursor:pointer}
.vv-exhall>*{transition:transform .2s ease}
.vv-exhall:hover>*{transform:translateY(-3px)}
@keyframes vv-exh-spin{to{transform:rotate(360deg)}}
@keyframes vv-exh-flag{0%,100%{transform:skewY(0)}50%{transform:skewY(-6deg)}}
@keyframes vv-exh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.vv-root .vv-exh-min,.vv-root .vv-exh-hr{transform-box:fill-box;transform-origin:center}
.vv-root .vv-exh-min{animation:vv-exh-spin 12s linear infinite}
.vv-root .vv-exh-hr{animation:vv-exh-spin 144s linear infinite}
.vv-root .vv-exh-flag{transform-box:fill-box;transform-origin:left center;animation:vv-exh-flag 2.6s ease-in-out infinite}
.vv-root .vv-exh-paper{animation:vv-exh-float 2.4s ease-in-out infinite}
.vv-root .vv-exhall *{animation-play-state:running!important}
.ex-mapbtn{font-size:16px;padding:5px 12px;white-space:nowrap;background:#ffe08a}
html.phone .stage-wrap .vv-topbar .ex-mapbtn{width:36px;max-width:36px;padding:7px 0 7px 8px;overflow:hidden;justify-content:flex-start}