:root { --ink:#050809; --panel:#0b1416; --panel-2:#0e1a1d; --line:#2c3527; --line-soft:#1e271a; --muted:#8e9986; --text:#edf0eb; --orange:#ff5a1f; --signal:#A7BF62; --signal-ink:#121707; --teal:var(--signal); --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; --display:Impact,"Arial Narrow",sans-serif; --glass:rgba(7,12,13,.86); color-scheme:dark; font-family:var(--mono); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--ink); color:var(--text); overflow:hidden; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible,canvas:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.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; }

.viewer-shell { height:100svh; }
.stage { position:relative; height:100svh; overflow:hidden; background:radial-gradient(circle at 50% 45%,#142528 0,#091012 40%,#050809 74%); isolation:isolate; }
#cloud-canvas { position:absolute; top:0; right:0; bottom:0; left:240px; width:calc(100% - 240px); height:100%; display:block; touch-action:none; cursor:grab; z-index:1; } #cloud-canvas:active { cursor:grabbing; }
.stage-grid { position:absolute; top:0; right:0; bottom:0; left:240px; z-index:0; opacity:.16; background-image:linear-gradient(rgba(167,191,98,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(167,191,98,.12) 1px,transparent 1px); background-size:48px 48px; mask-image:radial-gradient(circle at center,black,transparent 72%); }

/* top bar */
.viewer-topbar { position:absolute; z-index:12; top:14px; left:16px; right:16px; display:flex; align-items:center; gap:16px; }
.wordmark { color:var(--text); text-decoration:none; font:bold 20px/1 var(--display); letter-spacing:.045em; display:flex; align-items:center; gap:9px; padding:7px 12px; background:var(--glass); border:1px solid var(--line-soft); border-radius:12px; }
.wordmark-back { font-family:var(--mono); font-size:20px; font-weight:400; color:var(--muted); margin-right:2px; }
.wordmark span span { color:var(--orange); } .wordmark-mark { width:11px; height:11px; border:3px solid var(--teal); border-radius:50%; box-shadow:0 0 14px rgba(167,191,98,.5); }
.doc-title { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; }
.doc-title strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 15px/1.1 var(--mono); letter-spacing:.02em; color:var(--text); }
.doc-meta { color:var(--muted); font-size:11px; letter-spacing:.05em; }
.topbar-utilities { display:flex; align-items:center; gap:8px; }
.local-badge { display:flex; align-items:center; gap:7px; border:1px solid #2c494a; color:#a5c7c4; background:var(--glass); padding:8px 10px; border-radius:10px; font-size:10px; letter-spacing:.12em; } .local-badge i { width:6px; height:6px; background:var(--teal); border-radius:50%; box-shadow:0 0 9px var(--teal); }
.language-switcher { display:flex; overflow:hidden; border:1px solid #2c494a; background:var(--glass); border-radius:10px; } .language-switcher button { min-width:32px; min-height:32px; border:0; border-right:1px solid #2c494a; background:transparent; color:#819391; font-size:10px; letter-spacing:.08em; } .language-switcher button:last-child { border-right:0; } .language-switcher button[aria-pressed="true"] { background:#183233; color:var(--teal); } .language-switcher button:hover:not([aria-pressed="true"]) { color:#d9ebea; }
.icon-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line-soft); border-radius:10px; background:var(--glass); color:#a7bcba; font-size:22px; line-height:1; } .icon-button svg { width:18px; height:18px; } .icon-button:hover:not(:disabled) { color:var(--orange); border-color:var(--orange); } .icon-button:disabled { opacity:.35; cursor:not-allowed; }
.cloud-menu-button { display:none; color:var(--signal); }

/* approved selector A: persistent left rail on desktop */
.cloud-selector { position:absolute; z-index:11; top:64px; bottom:0; left:0; width:240px; padding:20px 16px; border-top:1px solid var(--line-soft); border-right:1px solid var(--line); background:rgba(6,11,12,.96); box-shadow:14px 0 30px rgba(0,0,0,.18); }
.cloud-selector-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.cloud-selector-head p { display:grid; gap:5px; margin:0; color:var(--signal); font-size:10px; font-weight:800; letter-spacing:.13em; }
.cloud-selector-head small { color:var(--muted); font-size:8px; letter-spacing:.09em; }
.selector-close { display:none; width:34px; height:34px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:20px; }
.cloud-options { display:grid; gap:10px; }
.cloud-options > button { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:9px; min-height:76px; padding:13px 12px; border:1px solid #303a2b; border-radius:0; background:#091011; color:#aeb7aa; text-align:left; transition:border-color .15s,background .15s,color .15s; }
.cloud-options > button:hover:not(:disabled) { border-color:#637348; color:var(--text); }
.cloud-options > button[aria-checked="true"] { border-color:var(--signal); background:rgba(167,191,98,.1); color:var(--text); box-shadow:inset 3px 0 var(--signal); }
.cloud-options > button:focus-visible { outline-color:var(--signal); }
.cloud-options > button:disabled { opacity:.55; cursor:wait; }
.cloud-option-mark { color:var(--signal); font-size:16px; line-height:1; }
.cloud-options > button > span:last-child { display:grid; gap:6px; min-width:0; }
.cloud-options strong { font-size:13px; letter-spacing:.02em; }
.cloud-options small { color:var(--muted); font:9px/1.35 var(--mono); }
.cloud-selector-note { position:absolute; right:16px; bottom:16px; left:16px; margin:0; padding-top:12px; border-top:1px solid var(--line-soft); color:#707b6b; font-size:8px; line-height:1.5; letter-spacing:.07em; text-transform:uppercase; }
.cloud-selector-backdrop { display:none; }

/* side rails */
.zoom-rail,.tool-rail { position:absolute; z-index:11; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; } .zoom-rail { left:258px; } .tool-rail { right:18px; }
.rail-button { display:grid; place-items:center; width:46px; height:46px; border:1px solid var(--line-soft); border-radius:13px; background:var(--glass); color:#b7cbc9; backdrop-filter:blur(6px); transition:background .15s,border-color .15s,color .15s; } .rail-button svg { width:22px; height:22px; }
.rail-button:hover:not(:disabled) { color:var(--text); border-color:#3a5658; background:rgba(16,28,30,.9); }
.rail-button.is-active { color:var(--orange); border-color:var(--orange); background:rgba(255,90,31,.12); }
.rail-button:disabled { opacity:.32; cursor:not-allowed; }

/* info popover */
.info-panel { position:absolute; z-index:13; top:60px; right:16px; width:260px; padding:15px 16px; background:var(--glass); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(0,0,0,.4); backdrop-filter:blur(10px); }
.info-panel[hidden] { display:none; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; color:#a8bcbd; font-size:10px; letter-spacing:.15em; text-transform:uppercase; } .section-heading > span:last-child { color:#637779; font-size:9px; }
.info-panel dl { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:0; } .info-panel dl div { min-width:0; } .info-panel dt { margin-bottom:4px; color:#708386; font-size:9px; letter-spacing:.11em; } .info-panel dd { margin:0; overflow:hidden; color:#d4e4e1; font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .info-panel dd#meta-visible { color:var(--teal); }
.info-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); color:#637779; font-size:9px; letter-spacing:.12em; }
.text-button { padding:0; border:0; background:transparent; color:#8fa6a5; font-size:10px; text-decoration:underline; text-underline-offset:3px; } .text-button:hover { color:var(--orange); } .text-button:disabled { opacity:.4; cursor:not-allowed; }

/* empty / loading */
.empty-state { position:absolute; z-index:5; top:50%; left:calc(50% + 120px); width:min(480px,calc(100% - 282px)); text-align:center; transform:translate(-50%,-52%); }
.empty-state[hidden] { display:none; }
.reticle { width:50px; height:50px; margin:0 auto 18px; position:relative; border:1px solid rgba(0,207,194,.68); transform:rotate(45deg); } .reticle::before,.reticle::after { content:""; position:absolute; background:var(--orange); width:7px; height:7px; } .reticle::before { top:-4px; right:-4px; } .reticle::after { bottom:-4px; left:-4px; } .reticle span { position:absolute; inset:11px; border:1px solid rgba(0,207,194,.4); }
.eyebrow { margin:0 0 9px; color:var(--teal); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.empty-state h1 { margin:0; font:clamp(40px,5.4vw,74px)/.87 var(--display); letter-spacing:.015em; text-transform:uppercase; }
.empty-copy { width:min(360px,100%); margin:20px auto; color:#a0b2b4; font:13px/1.6 var(--mono); }
.format-note { color:#738589; font-size:10px; letter-spacing:.1em; } .format-note span { color:#425355; }
.button { min-height:44px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:0 18px; border-radius:11px; color:var(--text); font-size:11px; letter-spacing:.06em; text-transform:uppercase; } .button kbd { color:currentColor; font:10px var(--mono); opacity:.68; }
.button-primary { border-color:var(--signal); background:var(--signal); color:var(--signal-ink); font-weight:800; box-shadow:0 10px 26px rgba(167,191,98,.24); } .button-primary:hover { background:#bbd472; }
.pixel-loader { position:absolute; z-index:8; inset:0 0 0 240px; overflow:hidden; background:rgba(5,8,9,.96); opacity:1; transition:opacity .18s ease; }
.pixel-loader[hidden] { display:none; }
.pixel-loader.is-complete { opacity:0; pointer-events:none; }
#pixel-loader-canvas { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }
.pixel-loader-copy { position:absolute; z-index:1; top:50%; left:50%; width:min(390px,calc(100% - 48px)); padding:19px 20px 17px; border:1px solid rgba(167,191,98,.32); background:rgba(7,12,13,.88); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 55px rgba(0,0,0,.36); transform:translate(-50%,-50%); }
.pixel-loader-kicker { margin:0 0 20px; color:var(--signal); font-size:9px; font-weight:800; letter-spacing:.16em; }
.progress-label { display:flex; justify-content:space-between; gap:20px; margin-bottom:11px; color:#b3c0b0; font-size:11px; } .progress-label strong { color:var(--signal); font-weight:700; font-variant-numeric:tabular-nums; }
.progress-track { height:2px; overflow:hidden; background:#1b2920; } .progress-track i { display:block; width:0; height:100%; background:var(--signal); transition:width .18s cubic-bezier(.16,1,.3,1); }
.pixel-loader .text-button { display:block; margin-top:16px; color:#9baa8e; }
.cloud-loading .zoom-rail,.cloud-loading .tool-rail,.cloud-loading .paint-panel { opacity:0; pointer-events:none; }

/* bottom colorization panel */
.paint-panel { position:absolute; z-index:10; left:calc(50% + 120px); bottom:16px; transform:translateX(-50%); width:min(660px,calc(100% - 368px)); padding:16px 18px 18px; background:var(--glass); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.45); backdrop-filter:blur(14px); }
body:not(.cloud-open) .paint-panel { display:none; }
.paint-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.paint-head > span:first-child { color:#a8bcbd; font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.paint-visible { color:var(--teal); font-size:11px; letter-spacing:.04em; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #2b3b3e; border-radius:10px; overflow:hidden; } .segmented button { min-height:36px; padding:0 4px; border:0; border-right:1px solid #2b3b3e; background:transparent; color:#8a9fa0; font-size:11px; letter-spacing:.03em; } .segmented button:last-child { border-right:0; } .segmented button[aria-checked="true"] { background:rgba(167,191,98,.14); color:var(--signal); box-shadow:inset 0 -2px var(--signal); } .segmented button:disabled { opacity:.42; cursor:not-allowed; }
.colormaps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.colormaps[hidden] { display:none; }
.colormaps button { display:grid; gap:6px; padding:6px; border:1px solid #2b3b3e; border-radius:10px; background:transparent; color:#8a9fa0; font-size:10px; letter-spacing:.02em; } .colormaps button:hover { color:#d9ebea; border-color:#3a5658; } .colormaps button[aria-checked="true"] { border-color:var(--orange); color:var(--orange); background:rgba(255,90,31,.08); }
.ramp { display:block; height:16px; border-radius:4px; }
.ramp-turbo { background:linear-gradient(90deg,#30123b,#4662d7,#36abf8,#1ae4b6,#71fe5a,#c9ef34,#fabb39,#f56b19,#a11a03); }
.ramp-viridis { background:linear-gradient(90deg,#440154,#414487,#2a788e,#22a884,#7ad151,#fde725); }
.ramp-spectral { background:linear-gradient(90deg,#2b6cff,#00cfc2,#7ff34e,#f4d13d,#ff8a1f,#d61f1f); }
.ramp-gray { background:linear-gradient(90deg,#0a0f11,#e8f2f0); }
.range-label { display:flex; justify-content:space-between; margin-top:16px; color:#99adae; font-size:10px; letter-spacing:.03em; } .range-label output { color:var(--orange); }
input[type="range"] { width:100%; height:20px; margin:6px 0 0; accent-color:var(--orange); cursor:pointer; }
input[type="range"]:disabled { opacity:.38; cursor:not-allowed; }

/* A direct file:// open is a clean launcher, never a half-started engine UI. */
.launcher-mode #cloud-canvas,
.launcher-mode .doc-title,
.launcher-mode .topbar-utilities,
.launcher-mode .zoom-rail,
.launcher-mode .tool-rail,
.launcher-mode .info-panel,
  .launcher-mode .pixel-loader,
.launcher-mode .paint-panel { display:none!important; }
.launcher-mode .cloud-selector,.launcher-mode .cloud-selector-backdrop,.launcher-mode .cloud-menu-button { display:none!important; }
.launcher-mode .empty-state { z-index:20; }

.no-script { position:fixed;bottom:0;margin:0;width:100%;padding:12px;background:var(--orange);color:#1f0b02;text-align:center; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

@media (max-width:820px) {
  .doc-title { display:none; }
  .paint-panel { width:calc(100% - 96px); }
}
@media (max-width:720px) {
  #cloud-canvas,.stage-grid { left:0; width:100%; }
  .cloud-menu-button { display:grid; }
  .cloud-selector { top:0; width:min(300px,84vw); padding-top:76px; transform:translateX(-104%); transition:transform .2s ease; box-shadow:20px 0 50px rgba(0,0,0,.55); }
  .selector-open .cloud-selector { transform:translateX(0); }
  .selector-close { display:grid; place-items:center; }
  .cloud-selector-backdrop { position:absolute; z-index:10; inset:0; width:100%; height:100%; border:0; background:rgba(0,0,0,.52); }
  .selector-open .cloud-selector-backdrop { display:block; }
  .zoom-rail { left:10px; }
  .empty-state { left:50%; width:min(480px,calc(100% - 42px)); }
  .pixel-loader { left:0; }
  .paint-panel { left:50%; width:min(660px,calc(100% - 96px)); }
}
@media (max-width:560px) {
  .viewer-topbar { top:10px; left:10px; right:10px; gap:8px; }
  .wordmark { padding:7px 8px; font-size:16px; }
  .wordmark-back,.wordmark-mark { display:none; }
  .local-badge { display:none; }
  .zoom-rail { left:10px; } .tool-rail { right:10px; gap:7px; }
  .rail-button { width:42px; height:42px; } .rail-button svg { width:20px; height:20px; }
  .paint-panel { left:10px; right:10px; transform:none; width:auto; bottom:10px; padding:13px 14px; }
  .colormaps button span { font-size:9px; }
  .info-panel { right:10px; width:calc(100% - 20px); max-width:280px; }
  .pixel-loader-copy { width:calc(100% - 36px); }
}