/* Solustation — 3D Office UI */
:root {
  --signal: #E85D2A; --signal-text: #B8461A; --ink-brand: #0E1420;
  --ink: #0E1420; --muted: #5B6676; --paper: #EEF2F6; --surface: #FFFFFF; --surface-2: #EEF1F5; --line: #DCE1E8;
  --glass: rgba(255,255,255,.82); --glass-line: rgba(14,20,32,.08);
  --shadow: 0 2px 6px rgba(14,20,32,.06), 0 18px 40px -12px rgba(14,20,32,.22);
  --ok: #138A5B; --err: #C93A2E; --wa: #13873F;
  --font: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --signal-text: #F07A4E; --ink: #F5F7FA; --muted: #9AA4B2; --paper: #0B1019; --surface: #1A2330; --surface-2: #141C28; --line: #2C3746;
  --glass: rgba(20,28,40,.8); --glass-line: rgba(245,247,250,.08);
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 24px 50px -12px rgba(0,0,0,.6);
  --ok: #3FCB8E; --err: #FF7A6B;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

#of-c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; cursor: pointer; }
.of-skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--signal); color: #fff; font-weight: 600; }
.of-skip:focus { top: 12px; }

/* loader */
.of-load { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--paper); transition: opacity .6s var(--ease), visibility .6s; }
.of-load svg { width: 64px; height: 64px; }
.of-load .ld-s { stroke-dasharray: 80; stroke-dashoffset: 80; animation: lds 1.4s var(--ease) infinite alternate; }
@keyframes lds { to { stroke-dashoffset: 0; } }
.of-load p { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.ld-bar { width: 140px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--signal); animation: ldb 1.1s var(--ease) infinite; }
@keyframes ldb { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
body.ready .of-load { opacity: 0; visibility: hidden; }

/* glass UI pieces */
.of-top, .of-panel, .of-map, .of-hint, .of-rooms { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.of-top { position: fixed; z-index: 10; left: 14px; right: 14px; top: 14px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); }
.of-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; letter-spacing: -.03em; }
.of-brand svg { width: 26px; height: 32px; }
.of-mode { display: inline-flex; padding: 4px; margin-left: auto; margin-right: auto; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; }
.of-mode > a, .of-mode > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; color: var(--muted); transition: color .25s, background .25s; }
.of-mode a:hover { color: var(--ink); }
.of-mode > span { background: var(--ink-brand); color: #fff; box-shadow: 0 6px 14px -6px rgba(14,20,32,.6); }
.of-mode span svg { width: 15px; height: 15px; color: #F07A4E; }
:root[data-theme="dark"] .of-mode > span { background: #fff; color: var(--ink-brand); }
.of-acts { display: inline-flex; align-items: center; gap: 8px; }
.of-ib { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s var(--ease); }
.of-ib:hover { box-shadow: 0 0 0 1px var(--signal); transform: translateY(-1px); }
.of-ib svg { width: 18px; height: 18px; }
.of-ib.sq { width: 40px; padding: 0; justify-content: center; }
.of-ib .i-moon { display: none; } :root[data-theme="dark"] .of-ib .i-moon { display: block; } :root[data-theme="dark"] .of-ib .i-sun { display: none; }
.of-ib[aria-expanded="true"] { background: var(--ink-brand); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .of-ib[aria-expanded="true"] { background: #fff; color: var(--ink-brand); }
.of-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--signal); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(232,93,42,.7); transition: transform .25s var(--ease), background .25s; white-space: nowrap; }
.of-cta svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.of-cta:hover { transform: translateY(-1px); background: #D24E1E; }
.of-cta:hover svg { transform: translateX(3px); }

/* rooms menu */
.of-rooms { position: absolute; right: 8px; top: calc(100% + 10px); width: 250px; max-height: calc(100dvh - 120px); overflow: auto; padding: 8px; border-radius: 20px; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); display: grid; gap: 2px; animation: pop .3s var(--ease); }
.of-rooms[hidden] { display: none; }
.of-rooms button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 500; text-align: left; transition: background .2s; }
.of-rooms button:hover, .of-rooms button:focus-visible { background: var(--surface-2); }
.of-rooms .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.of-rooms button.on { font-weight: 700; } .of-rooms button.on .dot { border-color: var(--signal); background: var(--signal); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* labels over the 3D scene */
.of-labels { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.of-lb { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; }
.of-lb > * { display: block; }
.of-lb.room { pointer-events: auto; cursor: pointer; }
.of-lb.room span { transform: translate(-50%, -100%); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass); color: var(--ink); box-shadow: 0 0 0 1px var(--glass-line), 0 6px 16px -6px rgba(14,20,32,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, color .25s, box-shadow .25s; }
.of-lb.room:hover span { box-shadow: 0 0 0 1px var(--signal), 0 6px 16px -6px rgba(232,93,42,.5); }
.of-lb.room.on span { background: var(--ink-brand); color: #fff; }
:root[data-theme="dark"] .of-lb.room.on span { background: #fff; color: var(--ink-brand); }
.of-lb.you { transform-origin: 0 0; }
.of-lb.you::before { content: "YOU"; display: block; transform: translate(-50%, -100%); padding: 3px 9px; border-radius: 8px; font: 700 10.5px/1.3 var(--mono); letter-spacing: .08em; background: var(--signal); color: #fff; box-shadow: 0 6px 14px -6px rgba(232,93,42,.8); }
.of-lb.you { font-size: 0; }
.of-lb.npc { transition: opacity .35s var(--ease); }
.of-lb.npc b, .of-lb.npc i { transform: translate(-50%, -100%); }
.of-lb.npc b { font: 600 10.5px/1.3 var(--mono); padding: 2px 8px; border-radius: 6px; background: var(--ink-brand); color: #fff; width: max-content; margin: 0 auto; }
:root[data-theme="dark"] .of-lb.npc b { background: #fff; color: var(--ink-brand); }
.of-lb.npc i { display: none; font-style: normal; font-size: 12.5px; font-weight: 500; padding: 7px 11px; border-radius: 12px 12px 12px 3px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); margin-top: -50px; position: relative; }
.of-lb.npc.talk i { display: block; animation: pop .35s var(--ease); }

/* minimap */
.of-map { position: fixed; z-index: 8; left: 14px; bottom: 14px; width: 190px; padding: 8px; border-radius: 18px; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); }
.of-map svg { width: 100%; height: auto; aspect-ratio: 100 / 69; overflow: visible; }
.of-map rect { fill: var(--surface-2); stroke: var(--line); stroke-width: .5; cursor: pointer; transition: fill .25s; }
.of-map rect:hover { fill: rgba(232,93,42,.18); }
.of-map rect.on { fill: rgba(232,93,42,.3); stroke: var(--signal); }
.of-map .mm-me { fill: var(--signal); stroke: #fff; stroke-width: .8; }
.of-map .mm-l { position: absolute; right: 12px; top: 8px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* hint */
.of-hint { position: fixed; z-index: 8; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; padding: 9px 16px; border-radius: 999px; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); font-size: 13px; color: var(--muted); white-space: nowrap; transition: opacity .6s, transform .6s var(--ease); }
.of-hint b { color: var(--ink); font-weight: 600; }
.of-hint.gone { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

/* room panel */
.of-panel { position: fixed; z-index: 9; right: 14px; top: 82px; width: 380px; max-height: calc(100dvh - 100px); overflow: auto; padding: 22px; border-radius: 24px; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); transform: translateX(calc(100% + 30px)); opacity: 0; transition: transform .55s var(--ease), opacity .4s; overscroll-behavior: contain; touch-action: pan-y; }
.of-panel.open { transform: none; opacity: 1; }
.of-panel::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0; background: var(--signal); }
.op-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.op-x svg { width: 16px; height: 16px; }
.op-x:hover { color: var(--ink); }
.op-body > * { margin: 0; }
.op-body > * + * { margin-top: 12px; }
.of-panel.open .op-body > * { animation: rise .5s var(--ease) both; }
.of-panel.open .op-body > *:nth-child(2) { animation-delay: .04s; } .of-panel.open .op-body > *:nth-child(3) { animation-delay: .08s; } .of-panel.open .op-body > *:nth-child(4) { animation-delay: .12s; } .of-panel.open .op-body > *:nth-child(5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.p-k { font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-text); padding-right: 40px; }
.op-body h2 { font-size: 22px; line-height: 1.15; letter-spacing: -.03em; margin-top: 6px !important; padding-right: 30px; }
.op-body p { font-size: 14.5px; line-height: 1.6; }
.p-sub { font-weight: 600; font-size: 13px !important; color: var(--muted); }
.p-note { font-size: 12.5px !important; color: var(--muted); font-style: italic; }
.p-go { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-go button { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; font-weight: 600; text-align: left; transition: box-shadow .2s, transform .2s var(--ease); }
.p-go button svg { width: 14px; height: 14px; flex: none; color: var(--signal); }
.p-go button:hover { box-shadow: 0 0 0 1px var(--signal); transform: translateY(-1px); }
.p-list { padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.p-list li { padding-left: 16px; position: relative; color: var(--muted); }
.p-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--signal); }
.p-list b { color: var(--ink); font-weight: 600; }
.p-tags { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.p-tags li { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.p-acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.ob { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform .25s var(--ease), box-shadow .25s, background .25s; }
.ob svg { width: 15px; height: 15px; }
.ob:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--signal); }
.ob.sig { background: var(--signal); color: #fff; box-shadow: 0 8px 18px -8px rgba(232,93,42,.7); }
.ob.sig:hover { background: #D24E1E; }
.ob.wa { background: var(--wa); color: #fff; box-shadow: none; }
.ob:disabled { opacity: .6; cursor: progress; }
.p-steps { padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
.p-steps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; font-size: 13.5px; line-height: 1.4; }
.p-steps li::before { content: "0" counter(s); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 600 10px var(--mono); background: var(--ink-brand); color: #fff; }
:root[data-theme="dark"] .p-steps li::before { background: #fff; color: var(--ink-brand); }
.p-steps span { color: var(--muted); }
.p-time { padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--signal); display: grid; gap: 8px; font-size: 13.5px; }
.p-time li { position: relative; color: var(--muted); line-height: 1.4; }
.p-time li::before { content: ""; position: absolute; left: -20px; top: .4em; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--signal); }
.p-time b { display: block; color: var(--ink); font-weight: 700; }
.p-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.p-brands a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease); }
.p-brands a:hover { box-shadow: 0 0 0 1px var(--signal); transform: translateY(-1px); }
.p-brands b { font-size: 13.5px; } .p-brands span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.p-me { display: flex; align-items: center; gap: 12px; }
.p-me img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--signal); }
.p-me h2 { margin-top: 2px !important; }
.p-form { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.p-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.p-form input, .p-form textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); font-size: 15px; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.p-form input:focus, .p-form textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(232,93,42,.16); }
.p-form .ob { justify-content: center; }
.p-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.p-msg { font-size: 12.5px !important; min-height: 1em; color: var(--muted); }
.p-msg.err { color: var(--err); } .p-msg a { text-decoration: underline; }
.p-done { display: grid; gap: 4px; padding: 6px 2px; } .p-done b { color: var(--ok); font-size: 15px; } .p-done span { font-size: 13.5px; color: var(--muted); }

/* joystick */
.of-joy { position: fixed; z-index: 8; left: 22px; bottom: calc(26px + env(safe-area-inset-bottom)); width: 112px; height: 112px; border-radius: 50%; background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line), var(--shadow); touch-action: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.of-joy[hidden] { display: none; }
.of-joy span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--signal); box-shadow: 0 6px 16px -4px rgba(232,93,42,.7), inset 0 0 0 3px rgba(255,255,255,.35); transition: transform .12s; }

/* fallback */
.of-fail { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--paper); }
.of-fail[hidden] { display: none; }
.of-fail > div { max-width: 460px; }
.of-fail h1 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 10px; }
.of-fail p { color: var(--muted); }
.of-fail ul { padding-left: 18px; line-height: 2; }
.of-fail a { color: var(--signal-text); font-weight: 600; }
.of-fail .of-cta { color: #fff; margin-top: 12px; }

/* responsive */
@media (max-width: 1080px) { .of-mode { margin-left: auto; margin-right: 0; } }
@media (max-width: 900px) {
  .of-cta { padding: 0 14px; }
  .of-ib span { display: none; } .of-ib { width: 40px; padding: 0; justify-content: center; }
  .of-map { width: 150px; }
}
@media (max-width: 760px) {
  .of-top { left: 8px; right: 8px; top: 8px; padding: 6px 6px 6px 10px; gap: 6px; flex-wrap: wrap; border-radius: 24px; }
  .of-brand span { display: none; }
  .of-mode { margin: 0 auto 0 0; font-size: 12.5px; }
  .of-mode > a, .of-mode > span { padding: 6px 11px; }
  .of-cta { height: 40px; padding: 0 13px; font-size: 13px; }
  .of-cta svg { display: none; }
  .of-ib { width: 38px; height: 38px; } .of-ib.sq { width: 38px; }
  .of-map { display: none; }
  .of-hint { bottom: calc(150px + env(safe-area-inset-bottom)); font-size: 12px; white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
  .of-panel { left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-height: 52dvh; padding: 18px 16px 16px; border-radius: 22px; transform: translateY(calc(100% + 24px)); }
  .of-panel.open { transform: none; }
  .of-panel::before { top: 0; left: 22px; right: 22px; bottom: auto; width: auto; height: 4px; border-radius: 0 0 4px 4px; }
  body.panel-open .of-joy { bottom: calc(var(--ph, 200px) + 18px + env(safe-area-inset-bottom)); width: 92px; height: 92px; }
  .of-joy { transition: bottom .5s var(--ease), width .3s, height .3s; }
  .op-body h2 { font-size: 19px; }
  .p-go { grid-template-columns: 1fr 1fr; }
  .of-rooms { right: 0; width: min(280px, calc(100vw - 16px)); }
  .of-lb.room span { font-size: 11px; padding: 4px 9px; }
}
@media (max-width: 380px) { .of-mode > a, .of-mode > span { padding: 6px 9px; } .of-mode span svg { display: none; } .of-cta { padding: 0 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.sh { display: none; }
@media (max-width: 760px) {
  .of-top { flex-wrap: nowrap; border-radius: 999px; padding: 5px; gap: 5px; }
  .of-brand { display: none; }
  .lg { display: none; } .sh { display: inline; }
  .of-mode { margin: 0 auto 0 0; padding: 3px; }
  .of-mode > a, .of-mode > span { padding: 7px 11px; }
  .of-mode span svg { width: 13px; height: 13px; }
  .of-acts { gap: 5px; }
  .of-cta { padding: 0 12px; height: 38px; font-size: 12.5px; }
  .of-panel { max-height: 46dvh; }
  body.panel-open .of-hint { opacity: 0; pointer-events: none; }
}
@media (max-width: 350px) { .of-mode span svg { display: none; } .of-cta .sh { font-size: 0; } .of-cta .sh::before { content: "Start"; font-size: 12.5px; } }

/* rooms menu: solid, and the room panel steps aside while it's open */
.of-rooms { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 12; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -16px rgba(14,20,32,.45); }
:root[data-theme="dark"] .of-rooms { box-shadow: 0 0 0 1px var(--line), 0 24px 60px -16px rgba(0,0,0,.7); }
body.rooms-open .of-panel.open { opacity: 0; transform: translateX(24px) scale(.98); pointer-events: none; }
@media (max-width: 760px) { body.rooms-open .of-panel.open { transform: translateY(24px); } }

/* bug fixes */
body.of { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
.of-panel input, .of-panel textarea { -webkit-user-select: text; user-select: text; }
.op-body p, .op-body li, .op-body h2 { -webkit-user-select: text; user-select: text; }
@media (pointer: coarse) { .of-map { display: none; } }                 /* the joystick owns that corner on touch screens */
@media (max-width: 760px) { .of-panel { bottom: calc(8px + env(safe-area-inset-bottom) + var(--kb, 0px)); } body.panel-open .of-panel.open { transition: transform .55s var(--ease), opacity .4s, bottom .25s; } }
@media (max-height: 520px) and (min-width: 761px) { .of-panel { top: 70px; max-height: calc(100dvh - 82px); width: 340px; padding: 16px; } .of-top { top: 8px; } .of-hint { display: none; } .op-body h2 { font-size: 19px; } }

/* ---------- interactive movement guide ---------- */
.of-coach { position: fixed; z-index: 11; left: 50%; bottom: 22px; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); padding: 18px 20px 18px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 30px 70px -20px rgba(14,20,32,.5), 0 20px 40px -24px rgba(232,93,42,.5); }
.of-coach[hidden] { display: none; }
.of-coach.in { animation: ccin .7s cubic-bezier(.34,1.56,.64,1) both; }
.of-coach.out { animation: ccout .4s var(--ease) both; }
@keyframes ccin { from { opacity: 0; transform: translate(-50%, 30px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes ccout { to { opacity: 0; transform: translate(-50%, 20px) scale(.96); } }
.of-coach > * { margin: 0; }
.of-coach > * + * { margin-top: 8px; }
.cc-dots { display: flex; gap: 6px; }
.cc-dots i { width: 22px; height: 5px; border-radius: 5px; background: var(--line); transition: background .3s, width .3s; }
.cc-dots i.on { width: 36px; background: var(--signal); }
.cc-dots i.done { background: var(--ok); }
.cc-skip { position: absolute; right: 14px; top: 12px; margin: 0 !important; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.cc-skip:hover { color: var(--ink); background: var(--surface-2); }
.cc-k { font: 600 11.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--signal-text); margin-top: 12px !important; }
.of-coach h3 { font-size: 18px; letter-spacing: -.02em; line-height: 1.25; }
.of-coach p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.of-coach p b { color: var(--ink); }
.cc-keys { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.cc-or { font-size: 12px; color: var(--muted); }
.cc-wasd { display: grid; justify-items: center; gap: 4px; }
.cc-wasd span { display: flex; gap: 4px; }
.cc-keys kbd { display: grid; place-items: center; width: 34px; height: 32px; border-radius: 8px; font: 700 13px var(--mono); background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -3px 0 var(--line), 0 0 0 1px var(--line); transition: transform .12s, background .12s, color .12s, box-shadow .12s; }
.cc-keys kbd.hit { background: var(--signal); color: #fff; transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.of-coach[data-step="1"] .cc-keys .cc-wasd:first-child kbd { animation: kbpulse 2.4s infinite; }
.of-coach[data-step="1"] .cc-keys .cc-wasd:first-child kbd:nth-child(1) { animation-delay: 0s; }
.of-coach[data-step="1"] .cc-keys .cc-wasd:first-child span kbd:nth-child(1) { animation-delay: .6s; } .of-coach[data-step="1"] .cc-keys .cc-wasd:first-child span kbd:nth-child(2) { animation-delay: 1.2s; } .of-coach[data-step="1"] .cc-keys .cc-wasd:first-child span kbd:nth-child(3) { animation-delay: 1.8s; }
@keyframes kbpulse { 0%, 22%, 100% { box-shadow: inset 0 -3px 0 var(--line), 0 0 0 1px var(--line); } 8% { box-shadow: inset 0 -3px 0 var(--line), 0 0 0 2px var(--signal); } }
.cc-bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: 12px !important; }
.cc-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #E85D2A, #F48A60); transition: width .25s var(--ease); }
.cc-pin { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); vertical-align: -3px; font-size: 14px; }
.cc-pin svg { width: 15px; height: 15px; }
.cc-ok { margin-top: 12px !important; padding: 10px 18px; border-radius: 999px; background: var(--signal); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 18px -8px rgba(232,93,42,.7); }
.cc-ok:hover { background: #D24E1E; }
.of-coach[data-step="4"] h3 { color: var(--ok); }
/* highlight the Go to button during step 3 */
.of-ib.cc-spot { position: relative; box-shadow: 0 0 0 2px var(--signal); }
.of-ib.cc-spot::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid var(--signal); animation: ccring 1.5s ease-out infinite; pointer-events: none; }
@keyframes ccring { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.25); } }
/* "Tap here" tag over the floor target */
.of-lb.cc-tag { pointer-events: none; }
@keyframes ccbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
/* animated hand over the joystick (touch, step 1) */
.cc-hand { position: fixed; z-index: 12; left: calc(22px + 56px - 14px); bottom: calc(26px + 56px - 44px + env(safe-area-inset-bottom)); width: 46px; height: 56px; pointer-events: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 56'%3E%3Cpath d='M17 6a4 4 0 0 1 8 0v18l2-1a4 4 0 0 1 4 1l1 1 1-1a4 4 0 0 1 5 1l1 1a4 4 0 0 1 5 3v12c0 8-6 14-14 14h-4c-5 0-9-3-11-7L7 33a4 4 0 0 1 6-5l4 4Z' fill='%23fff' stroke='%230E1420' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 6px 10px rgba(14,20,32,.35)); animation: cchand 2.2s cubic-bezier(.45,0,.2,1) infinite; }
.cc-hand[hidden] { display: none; }
@keyframes cchand { 0% { transform: translate(0, 0) scale(1); opacity: .2; } 10% { opacity: 1; } 25% { transform: translate(0, 0) scale(.9); } 60% { transform: translate(26px, -30px) scale(.9); } 80% { transform: translate(26px, -30px) scale(.9); opacity: 1; } 100% { transform: translate(26px, -30px) scale(1); opacity: 0; } }
@media (max-width: 760px) {
  .of-coach { top: calc(66px + env(safe-area-inset-top)); bottom: auto; left: 8px; right: 8px; width: auto; transform: none; padding: 14px 16px; border-radius: 20px; }
  .of-coach.in { animation-name: ccinm; } .of-coach.out { animation-name: ccoutm; }
  @keyframes ccinm { from { opacity: 0; transform: translateY(-20px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes ccoutm { to { opacity: 0; transform: translateY(-14px) scale(.97); } }
  .of-coach h3 { font-size: 16.5px; }
  .of-coach p { font-size: 13px; }
}
@media (pointer: coarse) { body.coach-on .of-hint { display: none; } }
body.coach-joy .of-joy { box-shadow: 0 0 0 1px var(--glass-line), var(--shadow), 0 0 0 0 rgba(232,93,42,.6); animation: joypulse 1.6s ease-out infinite; }
@keyframes joypulse { 0% { box-shadow: 0 0 0 1px var(--glass-line), var(--shadow), 0 0 0 0 rgba(232,93,42,.55); } 100% { box-shadow: 0 0 0 1px var(--glass-line), var(--shadow), 0 0 0 22px rgba(232,93,42,0); } }

/* guide v2: highlighted card; on phones it sits at the bottom with the joystick lifted above it */
.of-coach { border: 2px solid var(--signal); box-shadow: 0 0 0 4px rgba(232,93,42,.16), 0 30px 70px -20px rgba(14,20,32,.5), 0 0 40px -6px rgba(232,93,42,.55); animation: none; }
.of-coach.in { animation: ccin .7s cubic-bezier(.34,1.56,.64,1) both, ccglow 2.2s ease-in-out .7s infinite; }
@keyframes ccglow { 0%, 100% { box-shadow: 0 0 0 4px rgba(232,93,42,.16), 0 30px 70px -20px rgba(14,20,32,.5), 0 0 30px -8px rgba(232,93,42,.45); } 50% { box-shadow: 0 0 0 8px rgba(232,93,42,.22), 0 30px 70px -20px rgba(14,20,32,.5), 0 0 48px -2px rgba(232,93,42,.7); } }
.of-coach::before { content: ""; position: absolute; left: 18px; right: 18px; top: -2px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; animation: ccshine 2.4s linear infinite; opacity: .8; }
@keyframes ccshine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.of-coach.bump > * { animation: ccstep .45s var(--ease) both; }
@keyframes ccstep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.of-coach .cc-k { color: var(--signal); }
/* hand now lives inside the joystick */
.of-joy .cc-hand { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -10px; bottom: auto; }
@media (max-width: 760px) {
  .of-coach { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); left: 8px; right: 8px; }
  .of-coach.in { animation: ccinb .6s cubic-bezier(.34,1.56,.64,1) both, ccglow 2.2s ease-in-out .6s infinite; }
  .of-coach.out { animation: ccoutb .4s var(--ease) both; }
  @keyframes ccinb { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes ccoutb { to { opacity: 0; transform: translateY(24px) scale(.97); } }
  body.coach-on .of-joy { bottom: calc(var(--ch, 190px) + 22px + env(safe-area-inset-bottom)); }
  .of-joy { transition: bottom .5s var(--ease), width .3s, height .3s; }
  body.coach-on .of-hint { display: none; }
}

/* step 2: a hand that taps different spots on the floor */
.of-lb.cc-tag .cc-tap { position: relative; width: 0; height: 0; }
.cc-tap .cc-rip { position: absolute; left: -26px; top: -14px; width: 52px; height: 28px; border-radius: 50%; border: 3px solid var(--signal); background: rgba(232,93,42,.18); opacity: 0; }
.cc-tap .cc-tapper { position: absolute; left: -12px; top: -4px; width: 42px; height: 52px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 56'%3E%3Cpath d='M17 6a4 4 0 0 1 8 0v18l2-1a4 4 0 0 1 4 1l1 1 1-1a4 4 0 0 1 5 1l1 1a4 4 0 0 1 5 3v12c0 8-6 14-14 14h-4c-5 0-9-3-11-7L7 33a4 4 0 0 1 6-5l4 4Z' fill='%23fff' stroke='%230E1420' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 6px 8px rgba(14,20,32,.35)); opacity: 0; }
.cc-tap.go .cc-tapper { animation: cctap 1.8s cubic-bezier(.45,0,.2,1) infinite; }
.cc-tap.go .cc-rip { animation: ccrip 1.8s ease-out infinite; }
.cc-tap.go .cc-rip.r2 { animation-delay: .15s; }
@keyframes cctap { 0% { opacity: 0; transform: translate(18px, 26px) scale(1.1); } 22% { opacity: 1; transform: translate(0, 6px) scale(1); } 38% { transform: translate(0, 0) scale(.88); } 52% { transform: translate(0, 4px) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 6px) scale(1); } }
@keyframes ccrip { 0%, 34% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }

/* step 3: a hand under the Go to button, tapping up at it */
.cc-point { position: fixed; z-index: 13; width: 0; height: 0; pointer-events: none; }
.cc-point[hidden] { display: none; }
.cc-point b { position: absolute; left: -15px; top: 0; width: 40px; height: 50px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 56'%3E%3Cpath d='M17 6a4 4 0 0 1 8 0v18l2-1a4 4 0 0 1 4 1l1 1 1-1a4 4 0 0 1 5 1l1 1a4 4 0 0 1 5 3v12c0 8-6 14-14 14h-4c-5 0-9-3-11-7L7 33a4 4 0 0 1 6-5l4 4Z' fill='%23fff' stroke='%230E1420' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); filter: drop-shadow(0 6px 10px rgba(14,20,32,.4)); animation: ccpoint 1.3s cubic-bezier(.45,0,.2,1) infinite; }
.cc-point span { position: absolute; left: 50%; top: 56px; transform: translateX(-30%); padding: 4px 10px; border-radius: 999px; background: var(--signal); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 14px -4px rgba(232,93,42,.8); animation: ccbob2 1.3s ease-in-out infinite; }
@keyframes ccpoint { 0%, 100% { transform: translateY(14px); } 45% { transform: translateY(0) scale(.92); } 60% { transform: translateY(4px); } }
@keyframes ccbob2 { 0%, 100% { transform: translate(-30%, 4px); } 50% { transform: translate(-30%, 0); } }
.cc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-row .cc-ok { margin-top: 12px !important; }
.cc-ghost { margin-top: 12px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.cc-ghost:hover { box-shadow: 0 0 0 1px var(--signal); }