/* Geometry Works — shared look. Blueprint night + safety orange. Never overflow:hidden on body (iOS scroll). */
.gw {
  --o: #fb923c; --o2: #f97316; --y: #fde047; --m: #e879f9; --b: #38bdf8; --v: #a78bfa; --r: #fb7185; --c: #22d3ee;
  --paper: #fff7e6; --paper-ink: #2a1a0a;
  --card: rgba(18, 26, 70, 0.92);
  --gline: rgba(125, 211, 252, 0.07);
}
body.gw {
  background-color: #0a1033;
  background-image:
    linear-gradient(var(--gline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gline) 1px, transparent 1px),
    linear-gradient(rgba(125,211,252,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,.035) 1px, transparent 1px),
    radial-gradient(900px 500px at 100% -10%, rgba(249, 115, 22, 0.20), transparent 60%),
    radial-gradient(800px 500px at -10% 30%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(700px 600px at 60% 120%, rgba(56, 189, 248, 0.16), transparent 60%),
    linear-gradient(170deg, #121a4a 0%, #0b1238 50%, #070b26 100%);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px, auto, auto, auto, auto;
}
.gw .app { max-width: 1040px; }
.gw .app::before { opacity: .35; }

/* top bar */
.gw-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gw-top .right { display: flex; gap: 8px; align-items: center; }
.gw-iconbtn { min-width: 44px; min-height: 44px; border-radius: 14px; display: inline-grid; place-items: center; font-size: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.gw-iconbtn:active { transform: scale(.95); }

/* crew mode switch */
.crew-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.crew-switch button { min-height: 38px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 14px; color: #c7d2fe; transition: background .2s, color .2s; }
.crew-switch button[aria-pressed="true"] { background: linear-gradient(135deg, var(--y), var(--o)); color: #2a1300; box-shadow: 0 4px 14px rgba(249,115,22,.45); }

/* Title wordmark */
.gw-word { font-family: var(--font); font-weight: 900; letter-spacing: -0.03em; line-height: 1; margin: 0;
  background: linear-gradient(95deg, var(--y) 0%, var(--o) 30%, var(--m) 62%, var(--b) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-kicker { font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--y); margin: 0 0 6px; }

/* Robot foreman */
.foreman { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; margin: 12px 0; }
.torque { width: 64px; height: 72px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.torque .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.6s infinite; }
.torque .mouth { transform-box: fill-box; transform-origin: center; }
.torque.talking .mouth { animation: talk .22s infinite alternate; }
.torque .bulb { animation: bulb 2.4s ease-in-out infinite; }
.torque.happy { animation: hop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes talk { from { transform: scaleY(.4); } to { transform: scaleY(1.6); } }
@keyframes bulb { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-12px) rotate(-6deg); } 100% { transform: translateY(0); } }
.bubble { position: relative; background: #fffdf5; color: #1f1640; border-radius: 18px; padding: 11px 44px 11px 14px; font-size: 16px; line-height: 1.38;
  box-shadow: 0 8px 26px rgba(0,0,0,.35); min-height: 48px; }
.bubble::before { content: ""; position: absolute; left: -8px; top: 18px; border: 8px solid transparent; border-left: 0; border-right-color: #fffdf5; }
.bubble .who { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #c2410c; margin-bottom: 2px; }
.bubble .hear { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; border-radius: 12px; background: #ffedd5; font-size: 17px; }
.bubble .txt { transition: opacity .2s; }
.bubble.swap .txt { opacity: 0; }

/* Cards */
.gw-card { background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 24px; padding: 16px; box-shadow: var(--shadow); }
.gw-card h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.gw-card p { margin: 0 0 8px; color: #dbe2ff; font-size: 16px; }
.gw-card .soft { color: var(--ink-soft); font-size: 14px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 16px;
  font-weight: 900; font-size: 16px; color: #2a1300; background: linear-gradient(135deg, var(--y), var(--o)); box-shadow: 0 6px 18px rgba(249,115,22,.4);
  transition: transform .1s ease, filter .2s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn.alt { background: rgba(255,255,255,.08); color: #e0e7ff; border: 1.5px solid rgba(255,255,255,.18); box-shadow: none; }
.btn.blue { background: linear-gradient(135deg, var(--c), var(--v)); color: #0b0a2a; box-shadow: 0 6px 18px rgba(56,189,248,.35); }
.btn.mag { background: linear-gradient(135deg, var(--m), var(--v)); color: #1d0630; box-shadow: 0 6px 18px rgba(232,121,249,.35); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .torque .eye, .torque .bulb, .torque.talking .mouth, .torque.happy { animation: none !important; }
}

/* ---------- Module home ---------- */
.gw-hero { position: relative; display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 6px; padding: 18px 18px 14px; border-radius: 28px; overflow: hidden;
  border: 2px solid transparent;
  background: linear-gradient(160deg, #18205a, #0f1546) padding-box, linear-gradient(120deg, var(--y), var(--o), var(--m), var(--b)) border-box;
  box-shadow: 0 0 34px rgba(249,115,22,.28), 0 0 70px rgba(167,139,250,.18), var(--shadow); }
.gw-hero .gw-word { font-size: clamp(40px, 9vw, 68px); }
.gw-hero .tag { margin: 6px 0 0; font-size: 17px; color: #e0e7ff; max-width: 34ch; }
.gw-hero .art { width: 100%; max-width: 360px; justify-self: center; }
@media (min-width: 760px) { .gw-hero { grid-template-columns: 1.1fr 1fr; align-items: center; padding: 26px 28px; } .gw-hero .art { justify-self: end; } }
.hero-art .tile { transform-box: fill-box; transform-origin: center; }

.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0 4px; }
.rung { position: relative; border-radius: 14px; padding: 8px 6px 7px; text-align: center; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1); }
.rung b { display: block; font-size: 13px; color: var(--lc); letter-spacing: .02em; }
.rung span { display: block; font-size: 10px; color: var(--ink-soft); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rung .bar { display: block; height: 5px; border-radius: 3px; background: var(--lc); margin: 0 auto 6px; width: calc(var(--n) * 16%); opacity: .9; }
.rung.here { border-color: var(--lc); box-shadow: 0 0 16px color-mix(in srgb, var(--lc) 55%, transparent); background: color-mix(in srgb, var(--lc) 14%, transparent); }
.rung.here::after { content: "first job"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: var(--lc); color: #2a0a12; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }

.sec-h { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 2px 8px; }
.sec-h h2 { margin: 0; font-size: 21px; letter-spacing: -.02em; }
.sec-h span { font-size: 13px; color: var(--ink-soft); }
.board { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .board { grid-template-columns: 1fr 1fr; } .board .live { grid-column: 1 / -1; } }

.ticket { position: relative; display: grid; gap: 6px; padding: 16px 16px 14px 22px; border-radius: 18px; color: var(--paper-ink); text-decoration: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(251,146,60,.16), transparent 60%), var(--paper);
  box-shadow: 0 10px 30px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; transition: transform .15s ease, box-shadow .2s; }
.ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 18px 0 0 18px; background: var(--tc, var(--o)); }
.ticket::after { content: ""; position: absolute; left: 14px; right: 14px; top: 7px; border-top: 2px dashed rgba(42,26,10,.14); }
a.ticket:hover { transform: translateY(-2px) rotate(-.3deg); }
a.ticket:active { transform: scale(.985); }
.ticket .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 700 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #7c4a1a; letter-spacing: .04em; margin-top: 4px; }
.ticket .meta .lv { padding: 3px 7px; border-radius: 6px; background: var(--lvc, #fb7185); color: #2a0a12; }
.ticket h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; color: #1c1206; }
.ticket p { margin: 0; color: #4a3520; font-size: 15px; }
.ticket .pr { font-size: 13px; font-weight: 800; color: #9a3412; }
.ticket .go { justify-self: start; margin-top: 6px; }
.ticket .stamp { position: absolute; right: 14px; top: 18px; transform: rotate(9deg); font: 900 13px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 9px; border: 3px solid currentColor; border-radius: 8px; color: #dc2626; opacity: .85; mix-blend-mode: multiply; }
.ticket.soon { opacity: .78; filter: saturate(.75); }
.ticket.soon .stamp { color: #6b7280; }
.ticket.live { padding: 18px 18px 16px 24px; }
.ticket.live h3 { font-size: 28px; }
.ticket .prog { display: flex; gap: 4px; margin-top: 4px; }
.ticket .prog i { width: 22px; height: 6px; border-radius: 3px; background: rgba(42,26,10,.14); }
.ticket .prog i.on { background: linear-gradient(90deg, var(--o), var(--m)); }
.live-art { position: absolute; right: 12px; bottom: 12px; width: 120px; opacity: .95; pointer-events: none; }
@media (max-width: 460px) { .live-art { width: 84px; opacity: .5; } }

.shelf { display: flex; gap: 12px; flex-wrap: wrap; }
.shelf .slot { width: 104px; text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-soft); }
.shelf .slot svg { width: 92px; height: 92px; display: block; margin: 0 auto 4px; }
.shelf .slot.off svg { filter: grayscale(1) brightness(.6); opacity: .45; }
.guide { display: grid; gap: 8px; }
.guide .pc { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); font-size: 15px; color: #dbe2ff; }
.guide .pc b { color: var(--y); }
.guide .pc.off { opacity: .55; }
.fine { margin: 26px 2px 30px; font-size: 13px; color: var(--ink-soft); }

/* ---------- Lesson shell ---------- */
.lesson-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; }
.lesson-head .id { font: 800 12px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: #2a1300; background: var(--y); padding: 6px 8px; border-radius: 8px; }
.lesson-head h1 { font-family: var(--font); font-weight: 900; font-size: clamp(26px, 5vw, 38px); letter-spacing: -.03em; margin: 0; }
.rail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 4px; }
.rail button { position: relative; min-height: 46px; border-radius: 14px; font-size: 12px; font-weight: 800; color: #c7d2fe; background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1); display: grid; place-items: center; line-height: 1.1; padding: 4px 2px; transition: background .25s, border-color .25s, transform .15s; }
.rail button .n { font-size: 17px; }
.rail button .l { display: block; font-size: 10.5px; letter-spacing: .02em; }
.rail button.on { background: linear-gradient(135deg, rgba(253,224,71,.25), rgba(249,115,22,.25)); border-color: var(--o); color: #fff; transform: translateY(-1px); }
.rail button.done::after { content: "✓"; position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--y); color: #2a1300; font-size: 11px; display: grid; place-items: center; }
@media (max-width: 420px) { .rail button .l { display: none; } }

.stage { position: relative; }
.step-wrap { animation: stepIn .45s cubic-bezier(.2,.9,.3,1.1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.split { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .split { grid-template-columns: 1.45fr 1fr; } .split.even { grid-template-columns: 1fr 1fr; } }
.scene { width: 100%; height: auto; display: block; border-radius: 22px; background: #0e1546; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.scene text { font-family: -apple-system, system-ui, sans-serif; }
.pnl { display: grid; gap: 12px; }
.nav { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 30px; }
.nav .btn { min-width: 130px; }

/* job ticket paper */
.paper { position: relative; color: var(--paper-ink); background: var(--paper); border-radius: 18px; padding: 18px 18px 16px 24px; box-shadow: 0 12px 34px rgba(0,0,0,.4);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(56,189,248,.18) 27px 28px); background-position: 0 58px; }
.paper::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 18px 0 0 18px; background: linear-gradient(var(--o), var(--m)); }
.paper .hd { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font: 800 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; color: #9a3412; letter-spacing: .05em; text-transform: uppercase; }
.paper h2 { margin: 8px 0 6px; font-size: 24px; color: #1c1206; letter-spacing: -.02em; }
.paper dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 15px; line-height: 28px; }
.paper dt { font-weight: 800; color: #7c4a1a; }
.paper dd { margin: 0; color: #2a1a0a; }
.paper .note { margin: 8px 0 0; font-family: "Marker Felt", "Comic Sans MS", "Chalkboard SE", cursive; color: #c2410c; font-size: 17px; transform: rotate(-1deg); }
.paper .stamp-big { position: absolute; right: 16px; top: 34px; font: 900 18px/1 var(--font); letter-spacing: .14em; padding: 6px 10px; border: 4px solid #dc2626; color: #dc2626; border-radius: 10px; transform: rotate(10deg); opacity: .8; mix-blend-mode: multiply; }
.paper .stamp-big.closed { color: #7c3aed; border-color: #7c3aed; }
.stamp-slam { animation: slam .5s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes slam { from { transform: rotate(10deg) scale(3); opacity: 0; } to { transform: rotate(10deg) scale(1); opacity: .85; } }

.choice-row { display: flex; gap: 10px; flex-wrap: wrap; }
.qcard { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 14px; }
.qcard h3 { margin: 0 0 8px; font-size: 18px; }
.qcard p { margin: 0 0 6px; color: #dbe2ff; }
.seg { display: inline-flex; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); gap: 4px; flex-wrap: wrap; }
.seg button { min-height: 42px; padding: 0 14px; border-radius: 11px; font-weight: 800; color: #c7d2fe; }
.seg button[aria-pressed="true"] { background: linear-gradient(135deg, var(--c), var(--v)); color: #0b0a2a; }

/* readouts */
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ro { padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); transition: border-color .25s, box-shadow .25s, background .25s; }
.ro .k { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ro .v { font-size: clamp(24px, 5vw, 32px); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ro .s { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ro.ang .v { color: var(--m); } .ro.dia .v { color: var(--y); } .ro.side .v { color: var(--o); font-size: 22px; }
.ro.win { border-color: var(--y); background: rgba(253,224,71,.12); box-shadow: 0 0 22px rgba(253,224,71,.35); }
.verdict-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font-weight: 900; font-size: 15px; background: rgba(255,255,255,.08); }
.verdict-pill.ok { background: linear-gradient(135deg, var(--y), var(--o)); color: #2a1300; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; font-size: 15px; color: #dbe2ff; }
.checks li i { width: 26px; height: 26px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.3); display: grid; place-items: center; font-style: normal; font-size: 14px; transition: all .3s; }
.checks li.got i { border: 0; background: linear-gradient(135deg, var(--y), var(--o)); color: #2a1300; animation: pop .45s cubic-bezier(.3,1.7,.5,1); }
.checks li.got { color: #fff; }
@keyframes pop { from { transform: scale(.2); } to { transform: scale(1); } }
.log { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; display: grid; gap: 2px; }
.log b { color: #fff; font-weight: 800; }
.log .row { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.04); animation: stepIn .3s ease; }
.log .row.sq { background: rgba(253,224,71,.15); color: #fde68a; }

/* SVG scene bits */
.stake-handle { cursor: grab; }
.stake-handle.grab { cursor: grabbing; }
.stake-handle .halo { transition: r .2s, opacity .2s; }
.stake-handle.grab .halo { opacity: .55; }
.pulse-ring { transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.sq-mark { transition: opacity .25s; }
.wobble { transform-box: fill-box; transform-origin: 0% 100%; animation: wob 1s ease-in-out 2; }
@keyframes wob { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2deg); } }
.blink-red { animation: br 1s ease-in-out infinite; }
@keyframes br { 50% { opacity: .35; } }

/* tile math */
.eq { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: clamp(22px, 5vw, 32px); font-weight: 900; font-variant-numeric: tabular-nums; }
.eq .o { color: var(--o); } .eq .b { color: var(--b); } .eq .m { color: var(--m); } .eq .op { color: #94a3b8; }
.eq span { transition: transform .3s; display: inline-block; }
.eq .lit { transform: scale(1.18); text-shadow: 0 0 18px currentColor; }
.counter { font-size: 15px; font-weight: 800; color: var(--ink-soft); text-align: center; }
.range { width: 100%; accent-color: var(--m); height: 36px; }
.principle { border-radius: 20px; padding: 14px 16px; background: linear-gradient(135deg, rgba(232,121,249,.18), rgba(56,189,248,.14)); border: 1.5px solid rgba(232,121,249,.45); }
.principle .k { font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--m); }
.principle h3 { margin: 2px 0 4px; font-size: 20px; }
.principle p { margin: 0; color: #e0e7ff; font-size: 15px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* bars */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 70px; gap: 8px; align-items: center; font-size: 14px; font-weight: 800; }
.bar-row .track { height: 18px; border-radius: 9px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 9px; width: 0; transition: width 1s cubic-bezier(.2,.9,.3,1); }

/* sort (junior) */
.sort-zone { display: grid; gap: 12px; }
.deck { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-height: 120px; }
@media (max-width: 520px) { .deck { grid-template-columns: repeat(4, 1fr); gap: 8px; } }
.scard { position: relative; aspect-ratio: 1; border-radius: 18px; background: #fffaf0; box-shadow: 0 8px 20px rgba(0,0,0,.35); touch-action: none; cursor: grab; display: grid; place-items: center; transition: box-shadow .2s; -webkit-user-select: none; user-select: none; }
.scard svg { width: 86%; height: 86%; pointer-events: none; }
.scard.drag { cursor: grabbing; z-index: 50; box-shadow: 0 18px 40px rgba(0,0,0,.5); transition: none; }
.scard.gone { visibility: hidden; }
.bins { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bin { min-height: 130px; border-radius: 22px; border: 3px dashed rgba(255,255,255,.25); padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; transition: background .2s, border-color .2s, transform .2s; }
.bin h3 { width: 100%; margin: 0 0 4px; font-size: 18px; text-align: center; }
.bin.yes { border-color: rgba(253,224,71,.6); } .bin.no { border-color: rgba(251,113,133,.6); }
.bin.hot { transform: scale(1.03); background: rgba(255,255,255,.08); }
.bin .mini { width: 44px; height: 44px; border-radius: 10px; background: #fffaf0; display: grid; place-items: center; animation: pop .35s cubic-bezier(.3,1.7,.5,1); }
.bin .mini svg { width: 90%; height: 90%; }
.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

/* mission form */
.mform { display: grid; gap: 12px; }
.mform .row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 520px) { .mform .row3 { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 4px; }
.fld label { font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.fld .pair { display: flex; gap: 6px; align-items: center; }
.fld input { width: 100%; min-height: 48px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(7,11,38,.7); color: #fff; font-size: 20px; font-weight: 800; padding: 0 10px; font-variant-numeric: tabular-nums; }
.fld input:focus { outline: none; border-color: var(--o); box-shadow: 0 0 0 3px rgba(249,115,22,.3); }
.fld .u { font-size: 14px; color: var(--ink-soft); font-weight: 800; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 42px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 15px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.14); color: #e0e7ff; }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--y), var(--o)); color: #2a1300; border-color: transparent; }
.vcard { border-radius: 22px; padding: 14px; background: #fffaf0; color: #1c1206; display: grid; gap: 8px; grid-template-columns: 120px 1fr; align-items: center; animation: stepIn .4s ease; }
.vcard h3 { margin: 0; font-size: 22px; }
.vcard p { margin: 0; color: #3b2a16; font-size: 15px; }
.vcard .big { font-size: 28px; font-weight: 900; color: #c2410c; }
.hunt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hunt .spot { aspect-ratio: 1; border-radius: 20px; border: 3px dashed rgba(255,255,255,.25); display: grid; place-items: center; font-size: 40px; }
.hunt .spot.got { border: 0; background: radial-gradient(circle at 35% 30%, #fde68a, #f97316); animation: pop .45s cubic-bezier(.3,1.7,.5,1); }

/* badge */
.badge-stage { display: grid; place-items: center; padding: 10px 0; position: relative; overflow: hidden; isolation: isolate; }
.badge-stage svg.badge-big { width: min(260px, 70vw); height: auto; filter: drop-shadow(0 0 30px rgba(249,115,22,.55)); }
.badge-in { animation: badgeIn 1.1s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes badgeIn { 0% { transform: scale(.1) rotate(-200deg); opacity: 0; } 70% { transform: scale(1.08) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.badge-big .shine { animation: shine 2.6s ease-in-out 1s infinite; }
@keyframes shine { 0% { transform: skewX(-20deg) translateX(0); } 60%, 100% { transform: skewX(-20deg) translateX(260px); } }
.rays { position: absolute; width: min(380px, 95vw); aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(253,224,71,.18) 0 10deg, transparent 10deg 20deg); animation: spin 18s linear infinite; z-index: -1;
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); }
@keyframes spin { to { transform: rotate(360deg); } }
textarea.explain { width: 100%; min-height: 110px; border-radius: 16px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(7,11,38,.7); color: #fff; font: 500 17px/1.4 var(--font); padding: 12px; }
textarea.explain:focus { outline: none; border-color: var(--m); box-shadow: 0 0 0 3px rgba(232,121,249,.3); }
.model { border-left: 4px solid var(--m); padding: 8px 12px; color: #e0e7ff; background: rgba(232,121,249,.1); border-radius: 0 12px 12px 0; animation: stepIn .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .step-wrap, .badge-in, .stamp-slam, .wobble, .pulse-ring, .rays, .badge-big .shine, .blink-red { animation: none !important; }
}
.qcard .soft { color: var(--ink-soft); font-size: 14px; }
.tri-key { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; font-weight:800; color:var(--ink-soft); }
.vcard svg { width: 120px; height: 120px; }

/* ---- Voice: auto-read toggle, card read-aloud buttons ---- */
.gw-iconbtn.gw-voice { padding: 0 12px; gap: 4px; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.gw-iconbtn.gw-voice .lbl { font-size: 14px; }
.gw-iconbtn.gw-voice.off { opacity: .7; }
@media (max-width: 420px) { .gw-iconbtn.gw-voice .lbl { display: none; } }
.has-read { position: relative; }
.read-btn { float: right; margin: -4px -4px 6px 8px; min-height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(253,224,71,.16); color: #fde68a; font: 800 13px/1 system-ui, -apple-system, sans-serif; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.paper .read-btn { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.read-btn:active { transform: scale(.95); }
.has-read.reading { box-shadow: 0 0 0 3px rgba(253,224,71,.55); transition: box-shadow .2s; }
.has-read.reading > .read-btn { background: #fde047; color: #1c1206; }
@media (max-width: 380px) { .read-btn span { display: none; } }

/* ---------- "Begin with the end in mind" opener (gw-opener.js + per-lesson scene) ---------- */
.opener { display: grid; gap: 10px; }
.op-frame { position: relative; border-radius: 24px; overflow: hidden; isolation: isolate;
  border: 2px solid transparent; background: linear-gradient(#0e1546, #0e1546) padding-box, linear-gradient(120deg, var(--y), var(--o), var(--m), var(--b)) border-box;
  box-shadow: 0 0 30px rgba(249,115,22,.25), var(--shadow); }
.op-scene { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.op-scene text { font-family: -apple-system, system-ui, sans-serif; paint-order: stroke; }
.op-top { position: absolute; left: 10px; right: 10px; top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.op-kicker { pointer-events: none; font: 900 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #2a1300; background: rgba(253,224,71,.92); padding: 7px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.op-skip { pointer-events: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 900 15px/1 var(--font); color: #fff; background: rgba(11,18,56,.78); border: 1.5px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.op-skip:active { transform: scale(.95); }
.op-cap { position: absolute; left: 50%; top: 50px; transform: translateX(-50%); max-width: 92%; text-align: center; pointer-events: none;
  font: 900 clamp(15px, 3.4vw, 22px)/1.15 var(--font); letter-spacing: -.01em; color: #fff; background: rgba(11,18,56,.82); padding: 8px 14px; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); opacity: 0; }
.op-cap:empty { display: none; }
.op-cap.in { animation: capIn .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes capIn { from { opacity: 0; transform: translate(-50%, -10px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.opener.ended .op-cap { opacity: 0 !important; animation: none; }
.op-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(11,18,56,.4); }
.op-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--y), var(--o), var(--m)); }
.op-poster { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(circle at 50% 50%, rgba(11,18,56,.15), rgba(11,18,56,.45)); }
.op-poster[hidden] { display: none; }
.op-play { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--y), var(--o)); box-shadow: 0 0 0 8px rgba(253,224,71,.3), 0 10px 30px rgba(0,0,0,.4); animation: opPulse 1.8s ease-in-out infinite; }
.op-play .tri { width: 0; height: 0; margin-left: 8px; border-left: 30px solid #2a1300; border-top: 19px solid transparent; border-bottom: 19px solid transparent; }
.op-play:active { transform: scale(.94); }
@keyframes opPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(253,224,71,.35), 0 10px 30px rgba(0,0,0,.4); } 50% { box-shadow: 0 0 0 16px rgba(253,224,71,.08), 0 10px 30px rgba(0,0,0,.4); } }
.op-ptxt { font: 900 17px/1.2 var(--font); color: #fff; background: rgba(11,18,56,.8); padding: 7px 12px; border-radius: 12px; }
.op-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.op-chip { min-height: 46px; border-radius: 14px; display: grid; place-items: center; line-height: 1.1; padding: 4px 2px; font-weight: 800; font-size: 11px; color: #c7d2fe;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1); transition: background .25s, border-color .25s, transform .15s; }
.op-chip .i { font-size: 18px; }
.op-chip.seen { color: #fff; border-color: rgba(253,224,71,.35); }
.op-chip.on { background: linear-gradient(135deg, rgba(253,224,71,.3), rgba(249,115,22,.3)); border-color: var(--o); color: #fff; transform: translateY(-2px); }
@media (max-width: 420px) { .op-chip .t { display: none; } }
.op-end { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; animation: stepIn .4s ease; }
.op-end[hidden] { display: none; }
.op-go { font-size: 18px; min-height: 54px; padding: 0 22px; animation: opNudge 2.2s ease-in-out 1s infinite; }
@keyframes opNudge { 0%, 80%, 100% { transform: none; } 88% { transform: translateX(5px); } 94% { transform: translateX(-2px); } }
.op-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex-basis: 100%; }
.op-hint { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
/* scene life */
.op-scene .op-sun .rays { animation: spin 40s linear infinite; transform-box: view-box; }
.op-scene .op-cloud.c1 { animation: drift1 38s linear infinite; }
.op-scene .op-cloud.c2 { animation: drift2 52s linear infinite; }
@keyframes drift1 { from { transform: translate(-80px, 60px); } to { transform: translate(880px, 60px); } }
@keyframes drift2 { from { transform: translate(300px, 104px); } to { transform: translate(900px, 104px); } }
.op-scene .op-swing { transform-origin: 668px 208px; animation: swing 3.2s ease-in-out infinite; }
@keyframes swing { 0%,100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
.op-scene .op-lamp { animation: bulb 2.6s ease-in-out infinite; }
.op-scene.intro .op-pop { transform-box: fill-box; transform-origin: 50% 100%; animation: opPop .7s cubic-bezier(.2,1.5,.4,1) var(--d, 0s) both; }
@keyframes opPop { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
.op-bird { cursor: pointer; outline: none; }
.op-bird .hop.go { animation: birdHop .55s cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes birdHop { 0% { transform: none; } 35% { transform: translateY(-16px) rotate(-12deg); } 70% { transform: translateY(0) scaleY(.85); } 100% { transform: none; } }
.op-doortap, .op-ghosttap { cursor: pointer; outline: none; }
.op-shed.op-wobble { transform-box: fill-box; transform-origin: 30% 100%; animation: shedWob .5s ease-in-out 3; }
@keyframes shedWob { 0%,100% { transform: none; } 30% { transform: rotate(-1.4deg); } 70% { transform: rotate(1deg); } }
.op-dust { animation: dust .8s ease-out forwards; }
@keyframes dust { from { opacity: .9; transform: translate(0,0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.8); } }
.op-call g { transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) {
  .op-scene .op-sun .rays, .op-scene .op-cloud, .op-scene .op-swing, .op-scene .op-lamp, .op-scene.intro .op-pop, .op-play, .op-go, .op-shed.op-wobble, .op-dust { animation: none !important; }
}
@media (max-width: 600px) { .op-cap { top: 40px; font-size: 14px; padding: 6px 10px; } .op-kicker { font-size: 9px; padding: 5px 8px; } }