:root {
  color-scheme:dark;
  --ink:#f3f1ed; --dim:#aaa8a4; --gold:#dfa987; --mars:#dfa987;
  --surface:#1c1d1e; --raised:#252627; --stroke:#ffffff14;
  --dock-bottom:max(16px, env(safe-area-inset-bottom));
  --panel-bottom:calc(var(--dock-bottom) + 78px);
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; overflow:hidden; background:#06070d; color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; }
button, input, a { font:inherit; -webkit-tap-highlight-color:transparent; }
button, a { touch-action:manipulation; }
button { color:inherit; cursor:pointer; }
a { color:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--mars); outline-offset:3px; }
.icon { display:inline-block; width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#c { position:fixed; inset:0; display:block; background:#06070d; }
.glass { background:var(--surface); border:1px solid var(--stroke); border-radius:14px; box-shadow:0 8px 28px #0000001f; }
#brand { position:fixed; top:20px; left:20px; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 16px; }
#brand .logo { display:grid; place-items:center; color:var(--mars); }
#brand .logo .icon { width:24px; height:24px; }
#brand b { display:block; font-size:14px; line-height:1.3; font-weight:500; letter-spacing:-.3px; }
#brand small { display:block; color:var(--dim); font-size:11px; margin-top:2px; }
#brand .brand-count { margin-left:18px; border-left:1px solid var(--stroke); padding-left:18px; color:var(--dim); font-size:11px; white-space:nowrap; }
#brand .brand-count b { display:inline; margin-right:4px; color:var(--ink); font-size:14px; font-variant-numeric:tabular-nums; }
#dock { position:fixed; bottom:var(--dock-bottom); left:50%; transform:translateX(-50%); z-index:6; display:flex; gap:4px; padding:6px; align-items:center; max-width:calc(100vw - 24px); }
.ib { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:58px; height:50px; flex:none; border:0; border-radius:9px; color:var(--dim); background:transparent; transition:color .15s, background .15s; }
.ib span { font-size:10px; line-height:1; }
.ib:hover, .ib.on { color:var(--ink); background:#ffffff0c; }
.ib.on .icon { color:var(--mars); }
.cta { display:flex; align-items:center; justify-content:center; gap:8px; height:44px; margin:0 3px 0 6px; padding:0 16px; border-radius:8px; text-decoration:none; font-weight:500; font-size:12px; color:#202122; background:var(--ink); white-space:nowrap; }
.cta .icon { width:15px; height:15px; }
.cta:hover, #land:hover { background:#dedbd5; }
.panel { position:fixed; bottom:var(--panel-bottom); left:50%; transform:translate(-50%,8px); z-index:6; width:min(380px,calc(100vw - 24px)); max-height:min(76vh,560px); max-height:min(76dvh,calc(100dvh - var(--panel-bottom) - 96px),560px); padding:20px; opacity:0; visibility:hidden; pointer-events:none; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#575755 transparent; transition:opacity .18s,transform .18s,visibility .18s; }
.panel.open { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel h2 { margin:0; font-size:16px; font-weight:500; letter-spacing:-.4px; }
.panel h3 { margin:24px 0 10px; font-size:12px; font-weight:500; color:var(--dim); }
.panel-close { display:grid; place-items:center; width:40px; height:40px; margin:-8px -8px -8px 0; flex:none; background:transparent; border:0; border-radius:8px; color:var(--dim); }
.panel-close:hover { background:#ffffff0a; color:var(--ink); }
.panel-note { margin:-4px 0 16px; color:var(--dim); font-size:12px; line-height:1.6; }
.search-field { display:flex; align-items:center; gap:10px; padding:0 12px; background:#ffffff05; border:1px solid #ffffff22; border-radius:9px; }
.search-field:focus-within { border-color:var(--mars); }
.search-field .icon { width:17px; color:var(--dim); }
#q { width:100%; min-width:0; padding:12px 0; border:0; background:transparent; color:var(--ink); outline:none; font-size:16px; }
#q::placeholder { color:#858581; }
#found { font-size:12px; line-height:1.7; margin-top:12px; color:var(--dim); overflow-wrap:anywhere; }
#found:empty { margin:0; }
#found a { color:var(--ink); text-underline-offset:3px; }
.row { display:flex; align-items:center; gap:12px; width:100%; border:0; border-bottom:1px solid var(--stroke); padding:12px 4px; background:transparent; text-align:left; }
.row:last-child { border-bottom:0; }
.row:hover { background:#ffffff05; }
.pos { width:20px; color:var(--dim); font-size:11px; font-variant-numeric:tabular-nums; }
.row .nm { display:flex; align-items:center; flex:1; min-width:0; font-size:13px; }
.row .nm .handle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .lv { color:var(--dim); font-size:11px; white-space:nowrap; }
.lvls { display:flex; flex-direction:column; }
.lvl { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--stroke); font-size:12px; }
.lvl b { font-weight:400; }
.lvl span { color:var(--dim); font-size:11px; white-space:nowrap; }
.phl { position:relative; display:flex; align-items:baseline; gap:12px; padding:9px 0 9px 16px; color:var(--dim); }
.phl::before { content:''; position:absolute; left:1px; top:14px; width:5px; height:5px; border-radius:50%; background:#626363; }
.phl.now::before { background:var(--mars); box-shadow:0 0 0 3px #dfa98715; }
.phl b { font-size:12px; font-weight:400; }
.phl.now b { color:var(--ink); }
.phl em { margin-left:auto; font-style:normal; font-size:10px; white-space:nowrap; }
.how { margin-top:16px; color:var(--dim); font-size:12px; line-height:1.8; }
.how b { color:var(--ink); font-weight:400; }
.info-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:18px; padding-top:14px; border-top:1px solid var(--stroke); }
.info-links a { display:flex; align-items:center; gap:7px; min-height:36px; font-size:12px; color:var(--dim); text-decoration:none; }
.info-links a:hover { color:var(--ink); }
.info-links .icon { width:16px; height:16px; }
.source-counts { margin-top:12px; font-size:11px; color:var(--dim); }
#pPerson { width:min(400px,calc(100vw - 24px)); padding:0; overflow:hidden; }
#person { display:flex; flex-direction:column; max-height:inherit; min-height:0; }
#person .person-head { flex:none; padding:20px 20px 16px; border-bottom:1px solid var(--stroke); }
#person .ph { display:flex; align-items:center; gap:7px; }
#person .ph b { min-width:0; flex:1; font-size:15px; font-weight:500; overflow-wrap:anywhere; line-height:1.4; }
#person .sub { margin:6px 0 18px; font-size:11px; color:var(--dim); }
#person .base-stats { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; color:var(--dim); font-size:11px; }
#person .base-stats b { color:var(--ink); font-weight:500; }
#person .personal-progress { height:3px; border-radius:3px; overflow:hidden; margin-top:10px; background:#ffffff12; }
#person .personal-progress i { display:block; height:100%; background:var(--mars); }
#person .person-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
#person .comments-count { margin:0; font-size:11px; color:var(--dim); }
.zoom-base { display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid #ffffff24; border-radius:7px; min-height:36px; padding:0 10px; color:var(--ink); font-size:11px; background:transparent; white-space:nowrap; }
.zoom-base:hover { background:#ffffff0a; }
.zoom-base .icon { width:15px; height:15px; }
#person .comments-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#575755 transparent; padding:0 20px; }
#person .cm { padding:18px 0; margin:0; border:0; border-bottom:1px solid var(--stroke); }
#person .cm:last-child { border-bottom:0; }
#person .video-info { display:flex; align-items:center; gap:10px; min-width:0; margin-bottom:12px; }
#person .cm img, #person .noimg { width:36px; height:44px; object-fit:cover; flex:none; border-radius:4px; background:var(--raised); }
#person .noimg { display:grid; place-items:center; color:var(--dim); }
#person .noimg .icon { width:15px; height:15px; }
#person .video-copy { flex:1; min-width:0; }
#person .vt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--dim); font-size:11px; line-height:1.5; font-weight:400; text-decoration:none; overflow-wrap:anywhere; }
#person a.vt:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
#person .comment-entry { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:10px; }
#person q { min-width:0; color:var(--ink); font-size:13px; line-height:1.6; quotes:none; overflow-wrap:anywhere; white-space:pre-wrap; }
#person time { flex:none; color:var(--dim); font-size:10px; line-height:1.6; }
#person .empty { padding:24px 0; font-size:12px; line-height:1.8; color:var(--dim); }
.retry-comments { display:block; margin-top:12px; }
#tag, #rtag { position:fixed; z-index:5; pointer-events:none; transform:translate(-50%,-120%); padding:10px 14px; border-radius:10px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:500; white-space:nowrap; box-shadow:0 4px 18px #00000020; display:none; max-width:calc(100vw - 24px); overflow:hidden; text-overflow:ellipsis; }
#tag small { display:block; margin-top:4px; color:var(--dim); font-size:10px; font-weight:400; }
#rtag { transform:translate(-50%,-130%); }
body.planet #tag, body.planet #rtag, body.panel-open #tag, body.panel-open #rtag, body.panel-open #help { display:none !important; }
#demo { position:fixed; bottom:24px; right:20px; z-index:5; font-size:10px; letter-spacing:.04em; color:var(--ink); background:var(--surface); padding:6px 10px; border-radius:6px; display:none; }
#help { position:fixed; bottom:94px; left:50%; transform:translateX(-50%); z-index:5; padding:8px 12px; color:var(--dim); font-size:11px; white-space:nowrap; transition:opacity 1s; }
#feed { position:fixed; left:20px; bottom:20px; z-index:5; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:6px; max-width:320px; padding:12px 16px; font-size:11px; line-height:1.5; animation:tin .25s ease-out,tout .4s ease-in 5.5s forwards; }
.toast b { font-weight:500; }
.toast > .icon { width:15px; height:15px; color:var(--mars); }
@keyframes tin { from { opacity:0; transform:translateY(6px); } }
@keyframes tout { to { opacity:0; transform:translateY(-4px); } }
.phase { padding:14px 16px; }
.phase .ph-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.phase .ph-top b { min-width:0; font-size:12px; font-weight:400; }
.phase .ph-top .phase-step { flex:none; color:var(--dim); font-size:10px; }
.phase .bar { height:3px; overflow:hidden; background:#ffffff15; border-radius:3px; margin:10px 0 8px; }
.phase .bar i { display:block; height:100%; background:var(--mars); transition:width .8s; }
.phase .ph-num { color:var(--dim); font-size:10px; line-height:1.5; }
.phase .ph-num b { color:var(--ink); font-weight:400; }
#phase { position:fixed; top:20px; right:20px; z-index:5; width:260px; }
#intro { position:fixed; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 20px 6vh; text-align:center; pointer-events:none; transition:opacity .6s; }
#intro .kicker { color:var(--dim); font-size:10px; letter-spacing:.16em; }
#intro h1 { margin:12px 0; font-size:clamp(32px,4.5vw,56px); font-weight:500; letter-spacing:-2px; line-height:1.05; text-shadow:0 3px 20px #00000050; }
#intro h1 span { color:var(--mars); }
#intro p { margin:0 0 20px; max-width:370px; font-size:13px; line-height:1.7; color:var(--dim); }
#intro .phase { width:min(340px,100%); text-align:left; pointer-events:auto; }
#land { display:flex; align-items:center; gap:12px; pointer-events:auto; margin-top:16px; height:44px; padding:0 18px; border:0; border-radius:9px; color:#202122; background:var(--ink); font-size:12px; font-weight:500; }
#land .icon { width:17px; height:17px; }
#fade { position:fixed; inset:0; z-index:7; pointer-events:none; opacity:0; background:#e6b48c; }
body.planet #dock, body.planet #phase, body.planet #feed, body.planet #help, body.planet #tag, body.planet .panel { display:none; }
body:not(.planet) #intro { opacity:0; visibility:hidden; }
body:not(.planet) #intro * { pointer-events:none !important; }
.pf { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:none; margin-right:5px; color:var(--dim); vertical-align:-2px; }
.pf .icon { width:14px; height:14px; }
.pf.pf-en { color:#2D7FE0; }
#loading { position:fixed; inset:0; z-index:9; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--dim); background:#06070d; font-size:13px; transition:opacity .6s; }
#loading .icon { color:var(--mars); }
@media (min-width:761px) { #pPerson { left:auto; right:20px; transform:translateY(8px); } #pPerson.open { transform:translateY(0); } }
@media (max-width:760px) {
  :root { --dock-bottom:max(12px,env(safe-area-inset-bottom)); --panel-bottom:calc(var(--dock-bottom) + 72px); }
  #brand { top:max(12px,env(safe-area-inset-top)); left:12px; right:12px; padding:12px 14px; gap:10px; }
  #brand .brand-count { margin-left:auto; padding-left:14px; }
  #brand b { font-size:13px; }
  #brand small { font-size:10px; }
  #brand .logo .icon { width:21px; height:21px; }
  #phase { top:calc(max(12px,env(safe-area-inset-top)) + 74px); left:12px; right:auto; width:210px; padding:10px 12px; }
  #phase .ph-num { display:none; }
  #phase .bar { margin-bottom:0; }
  #phase .ph-top b { font-size:11px; }
  #phase .phase-step { font-size:9px; }
  #dock { gap:2px; padding:5px; }
  .ib { width:44px; height:48px; gap:5px; }
  .ib span { font-size:9px; }
  .ib .icon { width:19px; height:19px; }
  .cta { height:42px; padding:0 10px; margin:0 2px 0 4px; font-size:11px; gap:6px; }
  .cta .icon { display:none; }
  .panel { padding:18px; max-height:min(76dvh,calc(100dvh - var(--panel-bottom) - max(96px,env(safe-area-inset-top))),560px); }
  #person .person-head { padding:18px 18px 14px; }
  #person .comments-scroll { padding:0 18px; }
  #help, #feed, #demo { display:none !important; }
  body.panel-open #phase { display:none; }
  #intro { padding:0 20px 4vh; }
  #intro h1 { font-size:36px; letter-spacing:-1.3px; }
  #intro p { font-size:12px; max-width:290px; margin-bottom:14px; }
}
@media (max-height:480px) {
  body.panel-open #phase, body.panel-open #brand { display:none; }
  .panel { max-height:calc(100dvh - var(--panel-bottom) - 20px); }
  #person .person-head { padding:12px 16px; }
  #person .sub { margin:4px 0 8px; }
  #person .person-actions { margin-top:8px; }
  #person .comments-count { display:none; }
  #person .zoom-base { min-height:30px; }
  #person .comments-scroll { padding:0 16px; }
  #intro { padding-bottom:18px; }
  #intro h1 { font-size:30px; margin:8px 0; }
  #intro p, #intro .kicker { display:none; }
  #intro .phase { padding:10px 14px; }
  #land { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) { .panel, .phase .bar i, #intro { transition:none; } .toast { animation:none; } }

/* domes panel */
.dome-no { display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 6px; border-radius:7px; background:#FFC94D; color:#2A1A08; font-weight:600; font-size:13px; font-variant-numeric:tabular-nums; }
.dome-no.big { min-width:40px; height:40px; font-size:20px; border-radius:10px; }
.dome-back { display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--dim); font-size:12px; padding:2px 0 12px; cursor:pointer; }
.dome-back:hover { color:var(--ink); }
.dome-back .icon { width:15px; height:15px; }
.dome-head { display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--stroke); }
.dome-head b { display:block; font-weight:500; font-size:15px; }
.dome-head small { color:var(--dim); font-size:11px; }
.dome-list, .dome-res { max-height:min(52dvh,420px); overflow:auto; }
/* music toggle */
.music-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-left:10px; flex:none; border:0; border-radius:9px; background:#ffffff0c; color:var(--dim); cursor:pointer; }
.music-btn:hover { color:var(--ink); }
.music-btn.on { color:var(--mars); }
.music-btn .icon { width:18px; height:18px; }

/* dome chip: appears after flying to a dome */
#domeChip { position:fixed; left:50%; bottom:calc(var(--dock-bottom) + 76px); transform:translate(-50%,8px); z-index:6; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 10px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100vw - 24px); }
#domeChip.show { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
#domeChip .chip-txt b { display:block; font-weight:500; font-size:13px; }
#domeChip .chip-txt small { color:var(--dim); font-size:11px; }
#domeChip .chip-btn { border:0; border-radius:8px; padding:8px 12px; background:var(--mars); color:#fff; font-size:12px; cursor:pointer; white-space:nowrap; }
#domeChip .chip-x { border:0; background:transparent; color:var(--dim); padding:4px; cursor:pointer; display:inline-flex; }
#domeChip .chip-x .icon { width:15px; height:15px; }
body.planet #domeChip, body.panel-open #domeChip { display:none; }