:root { --ink:#e9eef8; --dim:#8f9bb3; --line:rgba(233,238,248,.22); --amber:#ffc45a; --cyan:#5ad8ff; --bg:#04060b; --warm:#fff1d6; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-tap-highlight-color:transparent; }
body { display:flex; flex-direction:column; align-items:center; min-height:100vh; overflow-x:hidden; }
button { font:inherit; color:inherit; }
button:focus-visible, input:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
#sky { position:fixed; inset:0; width:100%; height:100%; z-index:0; }

.top { position:fixed; top:0; left:0; right:0; z-index:5; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:10px 12px; pointer-events:none; }
.top > * { pointer-events:auto; }
.tag { font-size:12px; letter-spacing:.14em; color:var(--dim); padding-top:6px; }
.tools { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; align-items:center; }
.tools > button, .looking button { border:1px solid var(--line); background:rgba(4,6,11,.55); border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tools > button[aria-expanded="true"] { border-color:var(--ink); }
.looking { display:flex; align-items:center; gap:4px; }
.looking .lab { font-size:11px; color:var(--dim); margin-right:2px; }
.looking button[aria-pressed="true"] { background:var(--ink); color:#04060b; border-color:var(--ink); }

.pop { position:fixed; z-index:6; top:48px; right:12px; width:min(330px,92vw); padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:rgba(8,11,19,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:14px; }
.pophead { margin:0 0 8px; font-size:12px; color:var(--dim); letter-spacing:.06em; }
.chk { display:flex; gap:10px; align-items:flex-start; padding:7px 0; cursor:pointer; line-height:1.35; }
.chk input { margin-top:3px; accent-color:var(--amber); width:16px; height:16px; }
.chk em { font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--cyan); border:1px solid rgba(90,216,255,.5); border-radius:4px; padding:0 4px; margin-left:4px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; vertical-align:1px; }
.dot.amber { background:var(--amber); box-shadow:0 0 8px var(--amber); }
.dot.cyan { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.small { font-size:12px; color:var(--dim); margin:8px 0 0; line-height:1.45; }

main { position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; padding:52px 16px 22px; gap:12px; }
#stage { position:relative; width:min(92vw,62vh); aspect-ratio:1/1; touch-action:none; user-select:none; -webkit-user-select:none; }
#port { position:absolute; left:7%; top:7%; width:86%; height:86%; border-radius:50%; overflow:hidden; background:#000; cursor:grab; isolation:isolate; }
#port.drag { cursor:grabbing; }
#port.point { cursor:pointer; }
#port canvas { display:block; width:100%; height:100%; }
#port::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:inset 0 0 40px 10px rgba(0,0,0,.55); z-index:2; }
#fail { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20%; color:var(--dim); font-size:14px; line-height:1.5; z-index:4; }
#fail[hidden] { display:none; }
#ring { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
#comet { pointer-events:auto; cursor:grab; outline:none; touch-action:none; }
#comet:focus-visible .halo { stroke:var(--ink); stroke-width:3; }

#labels { position:absolute; inset:0; pointer-events:none; z-index:3; }
.lbl { position:absolute; left:0; top:0; white-space:nowrap; font-size:12px; letter-spacing:.04em; color:var(--ink); text-shadow:0 1px 6px #000, 0 0 2px #000; padding-bottom:6px; text-align:center; transition:opacity .2s; }
.lbl small { display:block; font-size:10px; letter-spacing:.1em; color:var(--dim); text-transform:none; }
.lbl.home { color:var(--warm); font-weight:600; }
.lbl.home::after, .lbl.focus::after { content:""; position:absolute; left:50%; bottom:0; width:1px; height:6px; background:currentColor; opacity:.6; }
.lbl.sample { color:var(--cyan); font-size:11px; }
.lbl.sample small { color:var(--cyan); opacity:.8; }
.lbl.focus { color:var(--amber); }
.lbl.room { font-size:13px; }
.lbl.room.hot { color:var(--amber); }
.lbl.room.locked { color:#6c768c; }
.lbl.thing.hot { color:var(--amber); }
.lbl.note { font-size:12px; color:var(--dim); transform-origin:center; }

.card { position:absolute; z-index:4; left:0; top:0; min-width:150px; max-width:66%; padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(6,9,16,.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:13px; line-height:1.4; transform:translate(-50%, calc(-100% - 14px)); }
.card.hover { pointer-events:none; }
.card b { display:block; font-weight:600; }
.card .mut { color:var(--dim); font-size:12px; display:block; }
.card .one { color:var(--amber); font-size:12px; display:block; }
.card .tagS { color:var(--cyan); font-size:10px; letter-spacing:.1em; }
.card button { margin-top:7px; }

.inring { position:absolute; left:50%; bottom:11%; transform:translateX(-50%); width:68%; z-index:4; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; pointer-events:none; }
.inring > * { pointer-events:auto; }
.inring .name { font-size:clamp(15px,2.4vw,19px); font-weight:500; letter-spacing:.02em; text-shadow:0 1px 8px #000; pointer-events:none; }
.inring .line { font-size:13px; color:#c3cbdb; text-shadow:0 1px 6px #000; pointer-events:none; background:rgba(4,6,11,.62); border-radius:10px; padding:3px 10px; }
.inring .center { position:absolute; bottom:auto; }
.btn { border:1px solid var(--line); background:rgba(233,238,248,.08); border-radius:999px; padding:7px 14px; font-size:13px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.btn:hover { background:rgba(233,238,248,.16); }
.btn.amber { border-color:rgba(255,196,90,.7); color:#ffe2a8; }
.btn.small { padding:4px 10px; font-size:12px; }
.btnrow { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.btnrow .btn[aria-pressed="true"] { background:var(--ink); color:#04060b; border-color:var(--ink); }
.rowbox { background:rgba(6,9,16,.9); border:1px solid rgba(255,196,90,.5); border-radius:12px; padding:8px 10px; font-size:12px; line-height:1.45; max-height:7.5em; overflow:auto; text-align:left; word-break:break-word; width:100%; }
.legend { background:rgba(4,6,11,.62); border-radius:10px; padding:3px 10px; display:flex; gap:12px; font-size:12px; color:var(--ink); justify-content:center; flex-wrap:wrap; text-shadow:0 1px 6px #000; pointer-events:none; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.swatch { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:6px; border:1px solid rgba(255,255,255,.4); }
.cross { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border:1.5px solid rgba(255,255,255,.9); border-radius:4px; box-shadow:0 0 0 1px rgba(0,0,0,.6); pointer-events:none; z-index:3; }
.nothing { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--dim); z-index:3; pointer-events:none; }
.hint { position:absolute; left:50%; top:22%; transform:translateX(-50%); font-size:13px; color:var(--dim); white-space:nowrap; text-shadow:0 1px 6px #000; z-index:3; pointer-events:none; }

.barrow { display:flex; flex-direction:column; align-items:center; gap:8px; width:min(560px,92vw); }
.bar { position:relative; width:100%; }
.bar input { width:100%; padding:14px 170px 14px 22px; font-size:18px; color:var(--ink); background:rgba(233,238,248,.05); border:1px solid var(--line); border-radius:999px; outline:none; letter-spacing:.02em; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.bar input:focus { border-color:rgba(233,238,248,.6); outline:none; }
.bar input::placeholder { color:transparent; }
.ghost { position:absolute; left:23px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--dim); font-size:18px; display:flex; align-items:center; gap:2px; }
.ghost b { display:inline-block; width:2px; height:22px; background:var(--ink); animation:blink 1.1s steps(1) infinite; }
.bar.has .ghost, .bar input:focus ~ .ghost { display:none; }
.bar .go { position:absolute; right:6px; top:6px; bottom:6px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:rgba(233,238,248,.1); color:var(--ink); font-size:15px; cursor:pointer; }
@keyframes blink { 50% { opacity:0; } }
.keychip { border:1px solid rgba(255,196,90,.7); color:#ffe2a8; background:rgba(255,196,90,.08); border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; }
.keychip::before { content:""; display:inline-block; width:8px; height:8px; border:2px solid currentColor; border-radius:50%; margin-right:8px; vertical-align:0; }

.read { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:min(560px,92vw); }
.read div { flex:1 1 0; min-width:0; border:1px solid var(--line); border-radius:14px; padding:9px 14px; background:rgba(4,6,11,.6); transition:border-color .25s; }
.read span { display:block; font-size:12px; color:var(--dim); letter-spacing:.06em; }
.read strong { display:block; font-weight:500; font-size:16px; margin-top:2px; min-height:22px; line-height:1.25; overflow-wrap:anywhere; }
.read div.hit { border-color:var(--amber); }

.rungs { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:min(680px,96vw); }
.rungs button { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:8px 14px; font-size:14px; cursor:pointer; }
.rungs button.on { background:var(--ink); color:#04060b; border-color:var(--ink); }
.rungs button[aria-disabled="true"] { color:#6c768c; border-style:dashed; }
.rungs .back { border-color:rgba(233,238,248,.4); }
.status { min-height:18px; margin:0; font-size:13px; color:var(--amber); text-align:center; }
.note { font-size:12px; color:var(--dim); text-align:center; max-width:560px; line-height:1.5; margin:0; min-height:18px; }

.panel { position:fixed; z-index:7; top:0; right:0; bottom:0; width:min(400px,100vw); overflow:auto; padding:14px 18px 30px; background:rgba(7,10,17,.96); border-left:1px solid var(--line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:15px; line-height:1.5; }
.phead { display:flex; justify-content:space-between; align-items:center; gap:10px; position:sticky; top:-14px; background:rgba(7,10,17,.98); padding:6px 0; }
.panel h2 { font-size:17px; font-weight:600; margin:0; outline:none; }
.panel h3 { font-size:13px; color:var(--dim); font-weight:500; letter-spacing:.06em; margin:18px 0 6px; }
.panel .close { border:1px solid var(--line); background:transparent; border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer; }
.panel .lead { font-size:15px; margin:12px 0 6px; }
.honest { padding-left:18px; margin:0; font-size:14px; }
.honest li { margin:6px 0; }
.seg { display:flex; gap:6px; }
.seg button { border:1px solid var(--line); background:transparent; border-radius:999px; padding:6px 14px; cursor:pointer; font-size:13px; }
.seg button[aria-pressed="true"] { background:var(--ink); color:#04060b; }
.lst { list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:6px; }
.lst button { width:100%; text-align:left; border:1px solid var(--line); background:rgba(233,238,248,.04); border-radius:12px; padding:9px 12px; cursor:pointer; font-size:14px; }
.lst button:hover { background:rgba(233,238,248,.1); }
.lst button .mut { color:var(--dim); font-size:12px; display:block; }
.lst button[aria-disabled="true"] { color:#7d879c; border-style:dashed; }
.lst .here { font-size:13px; color:var(--dim); }

body.paused *, body.paused *::before, body.paused *::after { animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce) { .ghost b { animation:none; } .lbl { transition:none; } }
@media (max-width:520px) {
  .looking .lab { display:none; }
  .tag { display:none; }
  .top { justify-content:center; }
  .tools { justify-content:center; }
  main { padding-top:84px; }
  .read { gap:6px; }
  .read div { padding:7px 9px; }
  .read strong { font-size:14px; white-space:normal; line-height:1.25; overflow-wrap:anywhere; }
  .rungs button { padding:7px 11px; font-size:13px; }
  .inring .line { font-size:12px; }
}

/* Round 2: sky, business, belt overlay */
.sq { display:inline-block; width:8px; height:8px; margin-right:7px; background:#7cf0b4; box-shadow:0 0 8px #7cf0b4; vertical-align:0; }
.chk em.bz { color:#7cf0b4; border-color:rgba(124,240,180,.5); letter-spacing:.02em; }
.rungs .lookup { border-color:rgba(255,196,90,.7); color:#ffe2a8; }
.rungs .lookup[aria-pressed="true"] { background:#ffc45a; color:#04060b; border-color:#ffc45a; }
.lbl.star { font-size:11px; color:#c9d4ea; letter-spacing:.03em; }
.lbl.planet { font-size:12px; color:#ffe2a8; }
.lbl.compass { font-size:13px; font-weight:600; color:#e9eef8; letter-spacing:.1em; padding-bottom:0; }
.lbl.biz { color:#9ff2c8; font-weight:600; }
.lbl.biz small { color:#9ff2c8; opacity:.85; }
.lbl.acct { font-size:11px; color:#9ff2c8; }
.lbl.acct small { color:#9ff2c8; }
.bizcard { pointer-events:auto; display:flex; flex-direction:column; gap:3px; align-items:center; background:rgba(6,9,16,.86); border:1px solid rgba(124,240,180,.45); border-radius:14px; padding:9px 12px; font-size:13px; line-height:1.35; max-width:100%; }
.bizcard b { font-size:15px; }
.bizcard .mut { color:#b9c3d6; font-size:12px; }
.bizcard a, .card a { color:#9ff2c8; font-size:12px; }
.ovwrap { position:absolute; inset:0; z-index:3; border-radius:50%; overflow:hidden; background:#14110c; }
.ovwrap[hidden] { display:none; }
.beltsvg { width:100%; height:100%; display:block; }
.teach { width:min(560px,92vw); border:1px solid var(--line); border-radius:14px; padding:8px 12px; background:rgba(4,6,11,.6); font-size:13px; line-height:1.45; }
.teach p { margin:4px 0; }
.teach .tag { display:inline-block; font-size:10px; letter-spacing:.1em; border-radius:4px; padding:1px 6px; margin-right:7px; font-weight:600; }
.teach .known { background:#1f3b2e; color:#9ff2c8; }
.teach .theory { background:#3b2e14; color:#ffd27a; }
.teach .objection { background:#2e2340; color:#c9b8ff; }
.teach .stamp { display:inline-block; font-size:10px; letter-spacing:.06em; color:#ffd27a; border:1px dashed rgba(255,210,122,.7); border-radius:4px; padding:0 5px; margin-right:7px; transform:rotate(-2deg); }
#inring .btnrow .btn { pointer-events:auto; }
.skybar { display:flex; flex-direction:column; align-items:center; gap:6px; width:min(620px,96vw); margin-top:-4px; }
.skybar[hidden] { display:none; }
.skybar .line { font-size:13px; color:#c3cbdb; text-align:center; line-height:1.4; }

/* Round 3: the free tools, drawn inside the O */
.rungs .toolsbtn { border-color:rgba(90,216,255,.6); color:#bfefff; }
.rungs .toolsbtn[aria-pressed="true"] { background:#5ad8ff; color:#04060b; border-color:#5ad8ff; }
.bar .sayit { position:absolute; right:76px; top:6px; bottom:6px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,196,90,.55); background:rgba(255,196,90,.07); color:#ffe2a8; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.bar .sayit svg { width:15px; height:15px; }
.bar .sayit[aria-pressed="true"] { background:#ffc45a; color:#04060b; }
.oline, .tline { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); width:66%; margin:0; z-index:6; text-align:center; font-size:clamp(12px,1.9vw,15px); line-height:1.45; color:#fff1d6; background:rgba(6,9,16,.92); border:1px solid rgba(255,196,90,.55); border-radius:14px; padding:9px 14px; pointer-events:none; }
.oline[hidden], .tline[hidden] { display:none; }
.toolwrap { position:absolute; inset:0; z-index:2; border-radius:50%; container-type:size; touch-action:none; user-select:none; -webkit-user-select:none; }
.toolwrap[hidden] { display:none; }
.toolwrap canvas { position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:50%; }
.tui { position:absolute; inset:0; pointer-events:none; }
.tui > * { pointer-events:auto; }
.tline { font-size:clamp(11px,3.2cqw,15px); }
.tu { position:absolute; left:50%; transform:translate(-50%,-50%); display:flex; gap:clamp(4px,1.4cqw,8px); align-items:center; justify-content:center; white-space:nowrap; max-width:84%; }
.tu.wide { width:64%; }
.tu.spread { width:64%; justify-content:space-between; }
.tu .spacer { flex:1; }
.tu.center { pointer-events:none; }
.tu.center > * { pointer-events:auto; }
.tlabel { font-size:clamp(10px,2.7cqw,13px); color:#aeb8cc; text-shadow:0 1px 6px #000; white-space:nowrap; }
.toolwrap .btn { background:rgba(4,6,11,.66); }
.toolwrap .btn.small { font-size:clamp(11px,2.9cqw,13px); padding:clamp(4px,1.2cqw,6px) clamp(8px,2.5cqw,13px); }
.toolwrap .btn.chip { min-width:clamp(28px,8cqw,40px); padding-left:clamp(6px,1.8cqw,10px); padding-right:clamp(6px,1.8cqw,10px); }
.toolwrap .btn.big { font-size:clamp(13px,3.6cqw,16px); padding:clamp(7px,1.8cqw,10px) clamp(18px,5cqw,28px); }
.toolwrap .btn.amber { background:rgba(40,28,8,.72); }
.toolwrap .btn:disabled { opacity:.45; cursor:default; }
.toolwrap .btn[hidden] { display:none; }
.toolwrap .seg { display:flex; gap:4px; }
.toolwrap .seg button { border:1px solid var(--line); background:rgba(4,6,11,.66); border-radius:999px; padding:clamp(3px,1cqw,5px) clamp(8px,2.4cqw,12px); cursor:pointer; font-size:clamp(11px,2.9cqw,13px); }
.toolwrap .seg button[aria-pressed="true"] { background:var(--ink); color:#04060b; }
/* tool ring */
.arcnav { position:absolute; inset:0; pointer-events:none; }
.arcbtn { position:absolute; transform:translate(-50%,-50%); width:20cqw; height:10cqw; border:none; background:transparent; border-radius:999px; cursor:pointer; pointer-events:auto; }
.arcbtn:focus-visible { outline:2px solid var(--amber); outline-offset:0; }
.medals { position:absolute; inset:0; pointer-events:none; }
.medal { position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:clamp(3px,1cqw,6px); background:none; border:none; padding:0; cursor:pointer; color:var(--ink); pointer-events:auto; }
.medal svg { width:clamp(40px,14cqw,72px); height:clamp(40px,14cqw,72px); padding:clamp(8px,2.6cqw,14px); border-radius:50%; border:1px solid rgba(233,238,248,.35); background:radial-gradient(circle at 35% 28%, rgba(233,238,248,.18), rgba(10,14,22,.85) 62%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -6px 14px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.5); color:#e9eef8; transition:border-color .15s, box-shadow .15s, color .15s; }
.medal span { font-size:clamp(10px,2.8cqw,13px); letter-spacing:.02em; text-shadow:0 1px 6px #000; white-space:nowrap; }
.medal:hover svg, .medal:focus-visible svg { border-color:var(--amber); color:#ffe2a8; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 22px rgba(255,196,90,.35); }
.medal:focus-visible { outline:none; }
.medal:focus-visible span { outline:2px solid var(--amber); outline-offset:2px; border-radius:4px; }
.sensename { position:absolute; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; pointer-events:none; }
.sensename b { font-size:clamp(15px,5cqw,24px); font-weight:400; color:#fff3d6; letter-spacing:.06em; }
.sensename span { font-size:clamp(10px,2.6cqw,12px); color:#8f9bb3; }
/* metronome */
.bignum { width:clamp(70px,24cqw,130px); font:300 clamp(30px,11cqw,60px)/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:#fff3d6; text-align:center; background:transparent; border:none; border-bottom:1px solid rgba(233,238,248,.25); padding:2px 0; -moz-appearance:textfield; appearance:textfield; }
.bignum::-webkit-outer-spin-button, .bignum::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bignum:focus { outline:none; border-bottom-color:var(--amber); }
.tapbtn { width:clamp(84px,30cqw,170px); height:clamp(84px,30cqw,170px); border-radius:50%; border:1.5px solid rgba(255,196,90,.6); background:radial-gradient(circle at 40% 32%, rgba(255,214,140,.22), rgba(20,14,4,.85) 65%); color:#ffe2a8; font-size:clamp(12px,3.4cqw,16px); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 20px rgba(0,0,0,.5); touch-action:manipulation; }
.tapbtn.hit { background:radial-gradient(circle at 40% 32%, rgba(255,226,168,.75), rgba(255,196,90,.35) 70%); color:#04060b; }
/* calendar */
.calgrid { position:absolute; left:23.1%; top:26.7%; width:53.8%; height:53.8%; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr); align-items:center; justify-items:center; }
.calgrid .wd { font-size:clamp(9px,2.4cqw,12px); color:#8f9bb3; letter-spacing:.06em; }
.calgrid .day { width:88%; height:88%; border:none; background:transparent; border-radius:50%; font-size:clamp(11px,3.1cqw,15px); color:var(--ink); cursor:pointer; position:relative; padding:0; }
.calgrid .day:hover { background:rgba(233,238,248,.1); }
.calgrid .day.today { box-shadow:inset 0 0 0 1.5px var(--amber); color:#ffe2a8; }
.calgrid .day.has::after { content:""; position:absolute; left:50%; bottom:10%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber); }
.tu .yearbtn { min-width:0; }
.tcard { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:66%; z-index:5; display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; padding:12px 14px; border:1px solid rgba(255,196,90,.5); border-radius:16px; background:rgba(6,9,16,.95); font-size:clamp(12px,3cqw,14px); line-height:1.4; box-shadow:0 10px 30px rgba(0,0,0,.6); }
.tcard[hidden] { display:none; }
.tcard input { width:100%; font-size:16px; padding:8px 12px; color:var(--ink); background:rgba(233,238,248,.06); border:1px solid var(--line); border-radius:999px; }
.tcard .mut { color:#8f9bb3; font-size:clamp(10px,2.6cqw,12px); }
.tcard a { color:#9ff2c8; word-break:break-all; }
.tcard .qrtext { word-break:break-word; max-height:6em; overflow:auto; }
.tcard.result { top:50%; }
/* notes */
.noteform { width:100%; }
.noteform input { width:100%; font-size:16px; padding:8px 14px; color:var(--ink); background:rgba(233,238,248,.07); border:1px solid var(--line); border-radius:999px; }
.noteform input:focus { border-color:rgba(233,238,248,.6); outline:none; }
.notelist { position:absolute; left:50%; top:36%; transform:translateX(-50%); width:68%; height:39%; overflow:auto; list-style:none; margin:0; padding:0; -webkit-mask-image:linear-gradient(transparent, #000 6%, #000 90%, transparent); mask-image:linear-gradient(transparent, #000 6%, #000 90%, transparent); scrollbar-width:thin; }
.notelist li { display:flex; gap:8px; align-items:center; padding:6px 4px; border-bottom:1px solid rgba(90,216,255,.14); font-size:clamp(12px,3.3cqw,15px); line-height:1.35; }
.notelist li.empty { color:#8f9bb3; justify-content:center; border:none; }
.notelist li.note .nt::before { content:"\2022"; color:#5ad8ff; margin-right:8px; }
.notelist .nt, .notelist label { flex:1; min-width:0; overflow-wrap:anywhere; }
.notelist input[type=checkbox] { accent-color:var(--amber); width:17px; height:17px; flex:none; }
.notelist li.done label { text-decoration:line-through; color:#8f9bb3; }
.notelist .del { flex:none; border:none; background:none; color:#8f9bb3; font-size:clamp(10px,2.6cqw,12px); cursor:pointer; padding:4px; }
.notelist .del:hover { color:var(--ink); }
/* help */
.helpbox { position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); width:70%; height:64%; overflow:auto; font-size:clamp(11px,3cqw,14px); line-height:1.5; color:#c9d1e0; -webkit-mask-image:linear-gradient(transparent, #000 5%, #000 92%, transparent); mask-image:linear-gradient(transparent, #000 5%, #000 92%, transparent); padding:6px 4px 24px; scrollbar-width:thin; }
.helpbox h4 { margin:12px 0 2px; font-size:clamp(10px,2.6cqw,12px); letter-spacing:.1em; text-transform:uppercase; color:#ffc45a; font-weight:600; }
.helpbox p { margin:2px 0 6px; }
.helpbox:focus-visible { outline:1px solid var(--amber); }
.laps { font-variant-numeric:tabular-nums; }
.panel .lead.free { color:#ffe2a8; }
@media (max-width:520px) {
  .looking .lab { display:inline; font-size:10px; }
  .bar input { padding-right:150px; font-size:16px; }
  .ghost { font-size:16px; }
  .bar .sayit { right:66px; padding:0 10px; font-size:13px; }
  .bar .go { padding:0 14px; }
}

/* Round 4: the world's stamp by the Where readout */
.vstamp { font-style:normal; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding:0 5px; margin-left:6px; border-radius:4px; border:1px solid rgba(233,238,248,.35); color:#c3cbdb; vertical-align:1px; }
.vstamp.reality { color:#9ff2c8; border-color:rgba(124,240,180,.45); }
.vstamp.theory { color:#ffc45a; border-color:rgba(255,196,90,.55); }
.vstamp.private { color:#fff1d6; border-color:rgba(255,241,214,.5); }
.vstamp.creative { color:#5ad8ff; border-color:rgba(90,216,255,.5); }

/* Round 4: doors, settings, footprints, echo */
.tu a.btn, a.btn { text-decoration:none; display:inline-flex; align-items:center; }
.doorlink { white-space:normal; text-align:center; max-width:100%; }
.setrow { gap:10px; }
.setlab { font-size:clamp(11px,3cqw,13px); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); min-width:4.6em; text-align:right; }
.feet { position:absolute; inset:0; pointer-events:none; z-index:4; }
.feet[hidden] { display:none; }
.foot { position:absolute; transform:translate(-50%,-50%); pointer-events:auto; display:inline-flex; align-items:center; gap:4px; padding:2px 7px 2px 5px; border-radius:999px; border:1px solid rgba(233,238,248,.14); background:rgba(6,9,16,.45); color:rgba(233,238,248,.55); font-size:10px; letter-spacing:.03em; cursor:pointer; white-space:nowrap; }
.foot i { width:5px; height:5px; border-radius:50%; background:rgba(255,196,90,.55); }
.foot:hover, .foot:focus-visible { color:#fff1d6; border-color:rgba(255,196,90,.6); background:rgba(6,9,16,.85); outline:none; }
.feetask { position:absolute; left:50%; top:27%; transform:translate(-50%,-50%); width:58%; z-index:7; text-align:center; background:rgba(6,9,16,.94); border:1px solid rgba(255,196,90,.55); border-radius:16px; padding:12px 14px; color:#fff1d6; font-size:clamp(12px,3.4cqw,15px); }
.feetask[hidden] { display:none; }
.feetask p { margin:0 0 6px; } .feetask .small { color:var(--dim); font-size:.82em; }
.feetask .btnrow { justify-content:center; margin-top:6px; }
.echo { min-height:1.4em; margin:6px 0 0; text-align:center; font-size:13px; letter-spacing:.02em; transition:opacity .4s; }
.echo .kept { color:#fff1d6; } .echo .skip { color:rgba(143,155,179,.55); text-decoration:line-through; text-decoration-color:rgba(143,155,179,.35); }
.echo[hidden] { display:block; visibility:hidden; }
.about-slogan { font-size:17px; color:#ffe2a8; letter-spacing:.02em; margin:4px 0 2px; }
.about-love { color:var(--dim); margin:0 0 10px; font-style:italic; }
/* the privacy page: same look, plain words */
body.doc { overflow:auto; }
.docmain { max-width:760px; margin:0 auto; padding:84px 20px 60px; line-height:1.55; color:var(--ink); }
.docmain h1 { font-weight:500; letter-spacing:.02em; margin:0 0 8px; }
.docmain h2 { font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:#ffe2a8; margin:28px 0 8px; font-weight:600; }
.docmain .lead { color:#c3cbdb; }
.hosts { width:100%; border-collapse:collapse; font-size:14px; }
.hosts th, .hosts td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid rgba(233,238,248,.12); }
.hosts th { color:var(--dim); font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.docmain a, .about a { color:#ffe2a8; }
.pathchip { border-color:rgba(255,196,90,.55); }
.packseg button { font-size:clamp(9px,2.5cqw,11.5px); padding:3px 6px; }
.packrow { max-width:96%; }

/* Round 5: the vessel contract */
.vlayer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; border-radius:50%; }
.vsc { position:absolute; inset:0; pointer-events:none; }
.vsc > * { pointer-events:auto; }
.vsc button, .vsc a { min-height:32px; }
.choose { position:absolute; left:50%; top:30%; transform:translate(-50%,-50%); width:62%; z-index:7; text-align:center; background:rgba(6,9,16,.94); border:1px solid rgba(90,216,255,.55); border-radius:16px; padding:12px 14px; color:#e9eef8; font-size:clamp(12px,3.2cqw,15px); }
.choose[hidden] { display:none; }
.choose p { margin:0 0 8px; }
.calgrid .day.vline::before { content:""; position:absolute; left:50%; top:8%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.tcard .vcal { color:#bff0ff; font-size:clamp(11px,2.8cqw,13px); }
.tcard .vcal em { font-style:normal; font-size:.78em; letter-spacing:.08em; color:var(--cyan); border:1px solid rgba(90,216,255,.5); border-radius:4px; padding:0 4px; margin-right:4px; }
.lbl.room.num { width:20px; height:20px; padding:0; border-radius:50%; background:rgba(255,196,90,.9); color:#04060b; font-weight:700; text-shadow:none; line-height:20px; }
.shp { display:inline-block; width:11px; height:11px; margin-right:7px; vertical-align:-1px; }
.shpname { color:var(--dim); font-size:11px; }
.vpanel { position:fixed; z-index:6; display:flex; flex-direction:column; overflow:hidden; background:rgba(7,10,17,.94); border:1px solid var(--line); border-radius:16px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-size:14px; line-height:1.5; color:var(--ink); }
.vpanel[hidden] { display:none; }
.vpanel .vhandle { display:none; }
.vphead { display:flex; align-items:center; gap:8px; padding:10px 12px 6px; border-bottom:1px solid rgba(233,238,248,.1); }
.vptitle { flex:1; min-width:0; }
.vptitle h2 { display:inline; font-size:15px; font-weight:600; margin:0; outline:none; }
.vpsizes { display:none; gap:4px; }
.vpsizes button, .vpanel .close { border:1px solid var(--line); background:transparent; border-radius:999px; padding:5px 11px; font-size:12px; cursor:pointer; min-height:32px; }
.vpsizes button[aria-pressed="true"] { background:var(--ink); color:#04060b; }
.vpbody { overflow:auto; padding:6px 14px 14px; }
.vpbody h3 { font-size:13px; color:#ffe2a8; font-weight:600; margin:12px 0 4px; letter-spacing:.04em; }
.vpbody p { margin:4px 0; }
.vpbody .mut { color:var(--dim); font-size:13px; }
.vpbody .tagS { font-style:normal; color:var(--cyan); font-size:10px; letter-spacing:.1em; border:1px solid rgba(90,216,255,.5); border-radius:4px; padding:0 4px; }
.vpbody a { color:#9ff2c8; }
.vpanel.sheet { left:0; right:0; bottom:0; top:auto; border-radius:18px 18px 0 0; border-bottom:none; }
.vpanel.sheet .vhandle { display:block; align-self:center; width:100%; height:24px; border:none; background:transparent; cursor:pointer; position:relative; }
.vpanel.sheet .vhandle::after { content:""; position:absolute; left:50%; top:9px; width:44px; height:5px; margin-left:-22px; border-radius:3px; background:rgba(233,238,248,.45); }
.vpanel.sheet .vpsizes { display:flex; }
.vpanel.sheet[data-size="peek"] { height:22vh; }
.vpanel.sheet[data-size="half"] { height:50vh; }
.vpanel.sheet[data-size="full"] { height:88vh; }
@media (pointer:coarse) { .vsc button, .vsc a, .vpsizes button, .vpanel .close, .vpbody button, .vpanel .vhandle, .choose .btn { min-height:48px; min-width:48px; } }
/* Round 5: the key chip and the path chip lie over the empty line under the bar, so nothing moves when they appear */
.barrow { position:relative; }
.barrow .keychip { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); z-index:3; white-space:nowrap; }
.barrow:has(.pathchip:not([hidden])) .keychip:not(.pathchip) { left:0; transform:none; }
.barrow:has(.keychip:not(.pathchip):not([hidden])) .pathchip { left:auto; right:0; transform:none; }
.barrow:has(.keychip:not([hidden])) ~ .echo { visibility:hidden; }
/* Round 5: the three readouts keep room for two lines, so a longer name never moves the pills */
.read strong { min-height:calc(2 * 1.25em); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }

/* Round 6: joins on the ring, the Across pill, the controls under the ring */
.rimlayer { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; }
.rimbtns { position:absolute; inset:0; pointer-events:none; z-index:5; }
.rimbtns[hidden] { display:none; }
.rimbtn { position:absolute; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; border:0; background:transparent; cursor:pointer; pointer-events:auto; padding:0; }
.rimbtn:focus-visible { outline:2px solid var(--amber); outline-offset:1px; }
.rungs .acrossbtn { border-color:rgba(255,196,90,.7); color:#ffe2a8; }
.rungs .acrossbtn[aria-pressed="true"] { background:#ffc45a; color:#04060b; border-color:#ffc45a; }
.acrossctl { position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); z-index:6; display:flex; gap:6px; flex-wrap:nowrap; white-space:nowrap; align-items:center; justify-content:center; }
.acrossctl[hidden] { display:none; }
.acrossctl .btn { background:rgba(6,9,16,.9); min-height:34px; }
.acrossctl .btn.amber { background:rgba(40,28,8,.92); }
.vsc img { max-width:60%; max-height:40%; border-radius:10px; }
@media (max-width:520px) { .acrossctl { bottom:-8px; gap:4px; } .acrossctl .btn.small { padding:4px 9px; font-size:12px; } }
@media (pointer:coarse) { .rimbtn { width:44px; height:44px; margin:-22px 0 0 -22px; } .acrossctl { height:48px; } .acrossctl .btn { min-height:48px; height:48px; box-sizing:border-box; padding-top:0; padding-bottom:0; } }
.rungs { width:min(800px,96vw); }
.vpbody { flex:1 1 auto; min-height:0; }   /* round 6: long panel text scrolls inside the panel (it was clipped) */
/* view3d: the 3D model view and the scanned room (shell/view3d/) */
.inring .v3pull { display:flex; align-items:center; gap:8px; font-size:12px; color:#c3cbdb; background:rgba(4,6,11,.62); border-radius:999px; padding:3px 12px; pointer-events:auto; text-shadow:0 1px 6px #000; }
.inring .v3slide { width:clamp(110px,22vw,190px); accent-color:#ffc45a; touch-action:pan-x; margin:0; min-height:24px; }
.inring .v3row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.vpfoot { margin:0; padding:7px 14px 10px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); line-height:1.4; }
.vpfoot[hidden] { display:none; }
.v3edit { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.v3edit label { font-size:12px; color:var(--dim); }
.v3edit input, .v3edit textarea { background:rgba(233,238,248,.06); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font:inherit; font-size:14px; }
.v3edit .btn { align-self:flex-start; }
@media (pointer:coarse) { .inring .v3slide { min-height:40px; } }
/* Round 6 merge (DESIGN-R6 section 14, model view 1): no words over the model; one row at the bottom of the ring.
   On phones the buttons sit under the ring and only the slider stays inside it. */
.inring.v3mode { bottom:7%; width:72%; }
.inring .v3bar { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:6px; pointer-events:auto; }
.inring .v3bar .v3pull { padding:3px 10px; }
.inring .v3bar .v3slide { width:clamp(90px,14vw,150px); }
.inring .v3btns { display:flex; flex-wrap:nowrap; gap:5px; }
.inring .v3end { font-size:11px; }
@media (max-width:600px) {
  /* phones: the slider over a row of buttons, both low in the ring where it is wide enough (the O clips its inside) */
  .inring.v3mode { bottom:12%; width:96%; }
  .inring.v3mode .v3bar { flex-direction:column; gap:6px; }
  .inring.v3mode .v3btns { white-space:nowrap; gap:3px; }
  .inring.v3mode .v3btns .btn.small { padding-left:8px; padding-right:8px; font-size:12px; }
  .inring.v3mode .v3btns .btn { background:rgba(6,9,16,.92); }
}
/* Round 6 merge (DESIGN-R6 section 14, towns 3): the town's credits sit in the line under the pills, not over it */
.credits3d { margin:4px auto 0; max-width:min(800px,94vw); font-size:11px; line-height:1.35; color:#b4bccd; text-align:center; letter-spacing:.02em; }
.credits3d[hidden] { display:none; }
/* Round 6 merge: T.field, one form field for scenes */
.vsc .vfield { display:inline-flex; flex-direction:column; gap:4px; font-size:12px; color:var(--dim); pointer-events:auto; text-align:left; }
.vsc .vfield.check { flex-direction:row; align-items:center; gap:8px; }
.vsc .vfield input, .vsc .vfield select, .vsc .vfield textarea { background:rgba(233,238,248,.06); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:7px 10px; font:inherit; font-size:14px; min-height:44px; box-sizing:border-box; }
.vsc .vfield input[type="checkbox"] { min-height:24px; width:24px; height:24px; }
/* Round 6 merge: devices (DESIGN-R6 section 10, item 1). Nothing sits under a notch or the home bar (the page uses
   viewport-fit=cover), and on touch screens every control is at least 44 px tall and wide. */
.top { padding-top:max(10px, env(safe-area-inset-top)); padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); }
main { padding-top:calc(52px + env(safe-area-inset-top)); padding-bottom:calc(22px + env(safe-area-inset-bottom)); padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
.panel { padding-top:max(14px, env(safe-area-inset-top)); padding-bottom:calc(30px + env(safe-area-inset-bottom)); padding-right:max(18px, env(safe-area-inset-right)); }
.vpanel.sheet { padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.pop { top:calc(48px + env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
@media (pointer:coarse) {
  .tools > button, .looking button, .rungs button, .btn, .vpsizes button, .vpanel .close, .panel .close, .seg button, .bar button, .keychip, .lst button, .sayit, .go { min-height:44px; min-width:44px; }
  .chk { min-height:44px; align-items:center; }
  .chk input { width:24px; height:24px; margin-top:0; }
  .panel a, .vpanel a { display:inline-block; min-height:44px; line-height:44px; }
}

/* phones with touch: the header's two rows of 44 px controls need more room above the ring */
@media (max-width:600px) and (pointer:coarse) { main { padding-top:calc(118px + env(safe-area-inset-top)); } }
/* Round 6 merge: a vessel's backdrop behind the page (manifest backdrop: { img, dim }) */
.vbackdrop { position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; opacity:0; pointer-events:none; transition:opacity .6s; }
/* Round 6 merge (a shell request): on phones the Across controls sit inside the ring, under the globe and above the
   ring's bottom edge (never across it) */
@media (max-width:520px) { .acrossctl { bottom:calc(4.5% + 6px); } .acrossctl .btn.small { padding-left:8px; padding-right:8px; } }
/* the comet's wider grab circle is for touch screens only (mouse users keep round 6's comet) */
#comet .hit { pointer-events:none; }
@media (pointer:coarse) { #comet .hit { pointer-events:all; } }