/* Hack the Claude Status Bar — Full Gibson design system.
   Copyright (C) 2026 Stephen Shanafelt
   SPDX-License-Identifier: GPL-3.0-only

   Tokens ported verbatim from design/cards (colors.html, type.html, effects.html).
   Effects budget: scanlines on screen-like surfaces only, one roll bar per page,
   glitch on titles/transitions only, grid floor on the landing only.
   Everything animated is static under prefers-reduced-motion. */

:root {
  --gib-void:#04060a; --gib-bg:#0a1016; --gib-surface:#0f1720; --gib-line:#1e2c3c;
  --gib-green:#00ff66; --gib-cyan:#00e5ff; --gib-magenta:#ff2ea6; --gib-amber:#ffb300;
  --gib-red:#ff3b4d; --gib-violet:#8b5cff; --gib-claude:#ff8a5c;
  --gib-text:#d2e8da; --gib-bright:#f0fff7; --gib-dim:#7ba08e; --gib-faint:#4a6455;
  --mono:"CaskaydiaCove NFM","CaskaydiaCove NF","Cascadia Code",Consolas,ui-monospace,monospace;
}

* { box-sizing:border-box; margin:0; }

html, body {
  min-height:100vh; background:var(--gib-void); color:var(--gib-text);
  font:14px/1.55 var(--mono);
}

* { scrollbar-width:thin; scrollbar-color:var(--gib-line) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--gib-line); border-radius:4px; }
::-webkit-scrollbar-track { background:transparent; }

a { color:var(--gib-cyan); text-decoration:none; }
a:hover { text-shadow:0 0 8px rgba(0,229,255,.6); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--gib-cyan); outline-offset:2px;
}
/* FocusOnNavigate parks focus on the page h1 for screen readers — no ring needed there.
   It adds tabindex, so this must outrank the [tabindex]:focus-visible rule above. */
h1:focus, h1:focus-visible, h1[tabindex]:focus-visible { outline:none; }

::selection { background:rgba(0,229,255,.25); color:var(--gib-bright); }

/* ── Type scale (type.html) ─────────────────────────────────────────────── */
.t-display { font-size:44px; line-height:1.05; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--gib-bright);
  text-shadow:0 0 6px rgba(0,255,102,.65), 0 0 26px rgba(0,255,102,.3); }
.t-h1 { font-size:26px; line-height:1.15; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gib-bright); }
.t-h2 { font-size:18px; line-height:1.25; font-weight:600; color:var(--gib-bright); }
.t-section { font-size:12px; line-height:1.3; font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; color:var(--gib-magenta); }
.t-small { font-size:12px; line-height:1.5; color:var(--gib-dim); }
.t-micro { font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.18em; color:var(--gib-faint); }

/* ── Buttons (effects.html interactive chrome) ──────────────────────────── */
.btn { font:600 13px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gib-cyan); background:transparent; border:1px solid var(--gib-cyan);
  border-radius:2px; padding:10px 18px; cursor:pointer; transition:box-shadow .15s, background .15s;
  display:inline-flex; align-items:center; gap:8px; }
.btn:hover { background:rgba(0,229,255,.08);
  box-shadow:0 0 10px rgba(0,229,255,.5), inset 0 0 10px rgba(0,229,255,.15); }
.btn.brand { color:var(--gib-claude); border-color:var(--gib-claude); }
.btn.brand:hover { background:rgba(255,138,92,.08);
  box-shadow:0 0 10px rgba(255,138,92,.5), inset 0 0 10px rgba(255,138,92,.15); }
.btn.go { color:#04060a; background:var(--gib-green); border-color:var(--gib-green);
  font-weight:700; box-shadow:0 0 12px rgba(0,255,102,.4); }
.btn.go:hover { box-shadow:0 0 18px rgba(0,255,102,.65); }
.btn.danger { color:var(--gib-red); border-color:var(--gib-red); }
.btn.danger:hover { background:rgba(255,59,77,.08); box-shadow:0 0 14px rgba(255,59,77,.45); }
.btn.ghost { color:var(--gib-dim); border-color:var(--gib-line); }
.btn.ghost:hover { color:var(--gib-bright); border-color:var(--gib-cyan);
  background:rgba(0,229,255,.05); box-shadow:0 0 8px rgba(0,229,255,.3); }

/* ── Shared effects ─────────────────────────────────────────────────────── */
.scanlines { position:relative; }
.scanlines::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.vignette::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }

.glitch { position:relative; }
.glitch::before, .glitch::after { content:attr(data-text); position:absolute; inset:0; opacity:0;
  pointer-events:none; }
.glitch::before { color:var(--gib-cyan); animation:gl-a 4.1s steps(1) infinite; }
.glitch::after { color:var(--gib-magenta); animation:gl-b 4.1s steps(1) infinite; }
@keyframes gl-a {
  0%, 91% { opacity:0; }
  92% { opacity:.85; transform:translate(-3px,1px); clip-path:inset(12% 0 58% 0); }
  94% { opacity:.85; transform:translate(2px,-1px); clip-path:inset(60% 0 8% 0); }
  96%, 100% { opacity:0; } }
@keyframes gl-b {
  0%, 92% { opacity:0; }
  93% { opacity:.85; transform:translate(3px,-1px); clip-path:inset(55% 0 20% 0); }
  95% { opacity:.85; transform:translate(-2px,2px); clip-path:inset(5% 0 70% 0); }
  97%, 100% { opacity:0; } }

.rollband { position:absolute; left:0; right:0; height:56px; top:-56px; pointer-events:none; z-index:3;
  background:linear-gradient(180deg, transparent, rgba(210,255,230,.05) 45%, rgba(210,255,230,.08) 50%, rgba(210,255,230,.05) 55%, transparent);
  animation:roll 8s linear infinite; }
@keyframes roll { to { top:100%; } }

@media (prefers-reduced-motion:reduce) {
  .rollband { animation:none; display:none; }
  .glitch::before, .glitch::after { animation:none; opacity:0; }
  .caret { animation:none !important; }
  * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

.caret { display:inline-block; width:.55em; height:1.05em; background:var(--gib-cyan);
  box-shadow:0 0 6px rgba(0,229,255,.7); animation:blink 1.1s steps(1) infinite;
  vertical-align:text-bottom; }
@keyframes blink { 50% { opacity:0; } }

/* ── App shell ──────────────────────────────────────────────────────────── */
.shell { min-height:100vh; display:flex; flex-direction:column; }

.topbar { display:flex; align-items:center; gap:14px; padding:10px 18px;
  border-bottom:1px solid var(--gib-line); background:rgba(10,16,22,.92); position:relative; z-index:20; }
.topbar .mark { width:26px; height:23px; flex:none; }
.topbar .word { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gib-bright); white-space:nowrap; }
.topbar .word i { font-style:normal; color:var(--gib-claude); }
.topbar nav { margin-left:auto; display:flex; gap:4px; align-items:center; }
.topbar nav a { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gib-dim);
  padding:8px 12px; border-radius:2px; border-bottom:2px solid transparent; }
.topbar nav a:hover { color:var(--gib-bright); text-shadow:none; }
.topbar nav a.active { color:var(--gib-cyan); border-bottom-color:var(--gib-cyan); }
.topbar nav a.jackout { color:var(--gib-claude); border:1px solid var(--gib-claude); margin-left:8px; }
.topbar nav a.jackout:hover { background:rgba(255,138,92,.08); box-shadow:0 0 10px rgba(255,138,92,.4); }

.content { flex:1; display:flex; flex-direction:column; }

.foot { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:12px 18px; border-top:1px solid var(--gib-line); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gib-faint); }
.foot a { color:var(--gib-faint); }
.foot a:hover { color:var(--gib-cyan); }

/* ── Landing (grid floor lives here only) ───────────────────────────────── */
.hero { position:relative; flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:64px 24px 80px; overflow:hidden; min-height:70vh; }
.hero .horizon { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero .plane { position:absolute; left:-50%; right:-50%; bottom:-30%; height:75%;
  transform:perspective(340px) rotateX(62deg);
  background:
    linear-gradient(90deg, rgba(0,229,255,.28) 0 1px, transparent 1px 100%) 0 0/44px 100%,
    linear-gradient(0deg, rgba(0,229,255,.28) 0 1px, transparent 1px 100%) 0 0/100% 34px; }
.hero .glowline { position:absolute; left:0; right:0; top:26%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gib-violet), transparent);
  box-shadow:0 0 12px 1px rgba(139,92,255,.6); }
.hero .fade { position:absolute; inset:0;
  background:linear-gradient(180deg, var(--gib-void) 18%, transparent 45%); }
.hero > * { position:relative; }
.hero .heromark { width:120px; height:104px; margin-bottom:28px;
  filter:drop-shadow(0 0 18px rgba(0,255,102,.25)); }
.hero h1 { font-size:clamp(28px, 6vw, 52px); line-height:1.05; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--gib-bright);
  text-shadow:0 0 6px rgba(0,255,102,.65), 0 0 26px rgba(0,255,102,.3); }
.hero h1 i { font-style:normal; color:var(--gib-claude);
  text-shadow:0 0 6px rgba(255,138,92,.8), 0 0 24px rgba(255,138,92,.4); }
.hero .tagline { margin:14px 0 34px; color:var(--gib-dim); font-size:14px; max-width:64ch; }
.hero .cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.hero .facts { display:flex; gap:26px; margin-top:44px; flex-wrap:wrap; justify-content:center;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gib-faint); }
.hero .facts b { color:var(--gib-dim); font-weight:400; }

/* ── Builder workspace ──────────────────────────────────────────────────── */
.workspace { flex:1; display:grid; gap:14px; padding:14px 18px 18px;
  grid-template-columns:300px minmax(0,1fr) 320px;
  grid-template-areas:"palette main style"; align-items:start; }
.ws-palette { grid-area:palette; position:sticky; top:14px; }
.ws-main { grid-area:main; min-width:0; display:flex; flex-direction:column; gap:14px; }
.ws-style { grid-area:style; position:sticky; top:14px; }
@media (max-width:1280px) {
  .workspace { grid-template-columns:260px minmax(0,1fr); grid-template-areas:"palette main" "style main"; }
  .ws-style { position:static; }
}
@media (max-width:900px) {
  .workspace { grid-template-columns:1fr; grid-template-areas:"main" "palette" "style"; }
  .ws-palette { position:static; }
}

.panel { background:var(--gib-bg); border:1px solid var(--gib-line); border-radius:3px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px 10px; border-bottom:1px solid var(--gib-line); }
.panel-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.22em;
  color:var(--gib-magenta); }

/* Style-panel breadcrumb: always-visible path with "status bar" as the fixed root. */
.crumbs { gap:6px; }
.crumbtrail { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.crumb { font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; background:transparent; border:none; padding:2px 0;
  color:var(--gib-faint); }
button.crumb { cursor:pointer; }
button.crumb:hover { color:var(--gib-cyan); }
.crumb.on { color:var(--gib-magenta); }
.csep { color:var(--gib-dim); font-size:10px; }

/* ── Element palette ────────────────────────────────────────────────────── */
.rail-search { display:flex; align-items:center; gap:8px; background:var(--gib-surface);
  border:1px solid var(--gib-line); border-radius:2px; padding:0 10px; margin:10px 14px;
  color:var(--gib-faint); font-size:13px; }
.rail-search:focus-within { border-color:var(--gib-cyan); box-shadow:0 0 10px rgba(0,229,255,.25); }
.rail-search input { flex:1; background:transparent; border:none; color:var(--gib-bright);
  font:13px var(--mono); padding:8px 0; min-width:0; }
.rail-search input:focus { outline:none; }
.rail-search .n { font-size:10px; letter-spacing:.15em; color:var(--gib-faint); }

.cat { border-top:1px solid var(--gib-line); }
.cat-head { width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; font-size:10px; text-transform:uppercase; letter-spacing:.18em;
  color:var(--gib-dim); cursor:pointer; background:transparent; border:none; font-family:var(--mono); }
.cat-head:hover { color:var(--gib-cyan); }
.cat-head .n { color:var(--gib-faint); }
.chips { padding:2px 10px 12px; display:flex; flex-wrap:wrap; gap:6px; }
.pchip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gib-text);
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px;
  padding:5px 9px; cursor:grab; transition:border-color .12s, box-shadow .12s;
  font-family:var(--mono); }
.pchip .ico { color:var(--gib-dim); }
.pchip:hover { border-color:var(--gib-cyan); color:var(--gib-bright);
  box-shadow:0 0 8px rgba(0,229,255,.35); }
.pchip.dragging { border-color:var(--gib-magenta); color:var(--gib-bright);
  box-shadow:0 0 10px rgba(255,46,166,.5); transform:rotate(-2deg); cursor:grabbing; }

/* ── Segment canvas ─────────────────────────────────────────────────────── */
.canvas { padding:16px 18px; }
.canvas .panel-head { margin:-16px -18px 14px; }
.ph-side { display:flex; align-items:center; gap:12px; min-width:0; }
.wipebtn { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0;
  background:transparent; border:1px dashed var(--gib-line); border-radius:2px; padding:5px 10px;
  cursor:pointer; font-family:var(--mono); transition:border-color .12s, box-shadow .12s; }
.wipebtn .w-main { font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; color:var(--gib-dim); }
.wipebtn .w-sub { font-size:9px; letter-spacing:.12em; color:var(--gib-faint); }
.wipebtn:hover { border-color:var(--gib-red); border-style:solid;
  box-shadow:0 0 10px rgba(255,59,77,.4); }
.wipebtn:hover .w-main { color:var(--gib-red); text-shadow:0 0 6px rgba(255,59,77,.5); }
.rowlab { font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--gib-faint);
  margin:10px 0 8px 2px; display:flex; gap:10px; align-items:center; }
.rowlab:first-child { margin-top:0; }
.rowlab button { font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--gib-faint);
  border:1px dashed var(--gib-line); background:transparent; border-radius:2px; padding:2px 8px; cursor:pointer; }
.rowlab button:hover { color:var(--gib-cyan); border-color:var(--gib-cyan); }
.rowlab.on .rowbtn { color:var(--gib-cyan); border-style:solid; border-color:var(--gib-cyan);
  box-shadow:0 0 10px rgba(0,229,255,.35); text-shadow:0 0 6px rgba(0,229,255,.5); }
.rowlab .rowhint { color:var(--gib-dim); letter-spacing:.14em; }

.segrow { display:flex; align-items:stretch; flex-wrap:wrap; row-gap:14px; min-height:38px; }
.segrow.rowselected { outline:2px solid var(--gib-cyan); outline-offset:6px; border-radius:2px;
  box-shadow:0 0 18px rgba(0,229,255,.22); }
.seg { position:relative; display:flex; align-items:center; gap:7px; font-size:13px;
  padding:8px 10px 8px 20px; color:#04060a; font-weight:600; cursor:pointer; margin-right:14px;
  border:none; font-family:var(--mono); }
.seg:first-child, .seg.chainstart { padding-left:12px; border-radius:2px 0 0 2px; }
.seg .cap { position:absolute; left:100%; top:0; bottom:0; width:14px; z-index:2;
  background:inherit; clip-path:polygon(0 0, 100% 50%, 0 100%); }
.seg .ico { opacity:.75; }
.seg:hover { filter:brightness(1.12); }
.seg.selected { outline:2px solid var(--gib-cyan); outline-offset:3px;
  box-shadow:0 0 14px rgba(0,229,255,.45); z-index:3; }
.seg .del { position:absolute; top:-9px; right:-2px; z-index:4; width:16px; height:16px;
  display:none; align-items:center; justify-content:center; font-size:10px; border-radius:50%;
  background:var(--gib-red); color:#04060a; border:none; cursor:pointer; font-family:var(--mono);
  box-shadow:0 0 8px rgba(255,59,77,.6); padding:0; line-height:1; }
.seg.selected .del { display:flex; }

.segspacer { display:flex; align-items:center; padding:0 12px; color:var(--gib-faint);
  font-size:10px; letter-spacing:.2em; border:1px dashed var(--gib-line); border-radius:2px;
  margin-right:14px; cursor:pointer; background:transparent; font-family:var(--mono);
  text-transform:uppercase; }
.segspacer.selected { outline:2px solid var(--gib-cyan); outline-offset:3px; position:relative; }
.segspacer .del { position:absolute; top:-9px; right:-8px; z-index:4; width:16px; height:16px;
  display:none; align-items:center; justify-content:center; font-size:10px; border-radius:50%;
  background:var(--gib-red); color:#04060a; border:none; cursor:pointer; padding:0; line-height:1;
  box-shadow:0 0 8px rgba(255,59,77,.6); font-family:var(--mono); }
.segspacer.selected .del { display:flex; }

.droptarget { width:3px; margin:-2px 12px -2px -2px; border-radius:2px; background:var(--gib-magenta);
  box-shadow:0 0 10px rgba(255,46,166,.8); flex:none; }
.ghostadd { display:flex; align-items:center; padding:8px 14px; color:var(--gib-faint); font-size:12px;
  border:1px dashed var(--gib-line); border-radius:2px; cursor:pointer; background:transparent;
  font-family:var(--mono); }
.ghostadd:hover { color:var(--gib-cyan); border-color:var(--gib-cyan); }
.ghostadd.dragover { color:var(--gib-magenta); border-color:var(--gib-magenta);
  box-shadow:0 0 10px rgba(255,46,166,.5); }

/* ── Style panel ────────────────────────────────────────────────────────── */
.sect { padding:12px 14px; border-bottom:1px solid var(--gib-line); }
.sect:last-child { border-bottom:none; }
.s-lab { font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--gib-faint);
  margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.s-lab .reset { visibility:hidden; color:var(--gib-faint); cursor:pointer; border:none;
  background:transparent; font-family:var(--mono); font-size:12px; padding:0 2px; }
.sect:hover .s-lab .reset { visibility:visible; }
.s-lab .reset:hover { color:var(--gib-cyan); }
.p-elem { font-size:11px; color:var(--gib-dim); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }

.segctl { display:flex; border:1px solid var(--gib-line); border-radius:2px; overflow:hidden;
  margin-bottom:10px; }
.segctl button { flex:1; text-align:center; font-size:11px; padding:6px 0; color:var(--gib-dim);
  cursor:pointer; background:transparent; border:none; font-family:var(--mono); }
.segctl button + button { border-left:1px solid var(--gib-line); }
.segctl button:hover { color:var(--gib-bright); }
.segctl button.on { background:rgba(0,229,255,.1); color:var(--gib-cyan);
  box-shadow:inset 0 0 8px rgba(0,229,255,.15); }

.swrow { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.swrow .k { font-size:11px; color:var(--gib-dim); width:34px; flex:none; }
.sw { width:20px; height:20px; border-radius:2px; border:1px solid rgba(255,255,255,.12);
  cursor:pointer; padding:0; flex:none; }
.sw.on { outline:2px solid var(--gib-cyan); outline-offset:1px; box-shadow:0 0 8px rgba(0,229,255,.5); }
.sw.none { background:repeating-linear-gradient(45deg, #202830 0 4px, #0f1720 4px 8px); }
.hexfield { margin-left:auto; display:flex; align-items:center; gap:4px; }
.hexfield input[type="text"] { width:74px; font-size:11px; color:var(--gib-text);
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px;
  padding:4px 7px; font-family:var(--mono); }
.hexfield input[type="color"] { width:26px; height:26px; padding:0; border:1px solid var(--gib-line);
  border-radius:2px; background:var(--gib-surface); cursor:pointer; }

.attrs { display:flex; gap:6px; }
.attr { width:34px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gib-line); border-radius:2px; color:var(--gib-dim); cursor:pointer;
  font-size:13px; background:transparent; font-family:var(--mono); }
.attr:hover { color:var(--gib-bright); border-color:var(--gib-cyan); }
.attr.on { color:var(--gib-cyan); border-color:var(--gib-cyan);
  background:rgba(0,229,255,.1); box-shadow:0 0 8px rgba(0,229,255,.35); }
.attr:disabled { opacity:.3; cursor:default; }
.attr:disabled:hover { color:var(--gib-dim); border-color:var(--gib-line); }
.rowmove { display:flex; gap:6px; }

.iconrow { display:flex; align-items:center; gap:10px; }
.icochip { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px; font-size:17px;
  flex:none; }
.iconname { font-size:11px; color:var(--gib-dim); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.browse { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gib-cyan);
  border:1px solid var(--gib-cyan); border-radius:2px; padding:7px 12px; cursor:pointer;
  background:transparent; margin-left:auto; font-family:var(--mono); flex:none; }
.browse:hover { background:rgba(0,229,255,.08); box-shadow:0 0 8px rgba(0,229,255,.4); }

.selrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.selrow:last-child { margin-bottom:0; }
.selrow .k { font-size:11px; color:var(--gib-dim); flex:none; }
.selrow select, .selrow input[type="text"], .selrow input[type="number"] {
  font-size:11px; color:var(--gib-text); background:var(--gib-surface);
  border:1px solid var(--gib-line); border-radius:2px; padding:5px 8px; font-family:var(--mono);
  max-width:170px; min-width:0; }
.selrow input[type="text"].wide { flex:1; max-width:none; }
.selrow select:hover, .selrow select:focus { border-color:var(--gib-cyan); }

.toggle { display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--gib-dim);
  cursor:pointer; background:transparent; border:none; font-family:var(--mono); padding:0; }
.tk { width:30px; height:16px; border-radius:8px; background:var(--gib-surface);
  border:1px solid var(--gib-line); position:relative; flex:none; }
.tk::after { content:""; position:absolute; top:2px; left:3px; width:10px; height:10px;
  border-radius:50%; background:var(--gib-faint); transition:left .12s, background .12s; }
.toggle.on .tk::after { left:15px; background:var(--gib-green); box-shadow:0 0 6px rgba(0,255,102,.7); }
.toggle.on { color:var(--gib-text); }

.threshrow { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.threshrow input[type="number"] { width:58px; font-size:11px; color:var(--gib-text);
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px;
  padding:4px 6px; font-family:var(--mono); }
.threshrow .x { margin-left:auto; color:var(--gib-faint); background:transparent; border:none;
  cursor:pointer; font-family:var(--mono); }
.threshrow .x:hover { color:var(--gib-red); }
.addlink { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--gib-dim);
  border-bottom:1px dotted var(--gib-faint); background:transparent; border-top:none;
  border-left:none; border-right:none; cursor:pointer; font-family:var(--mono); padding:0; }
.addlink:hover { color:var(--gib-cyan); border-color:var(--gib-cyan); }

/* Bar color-zone presets: the chip's background IS the preset. */
.zonechips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.zchip { font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-family:var(--mono);
  font-weight:600; color:#101014; border:1px solid var(--gib-line); border-radius:2px;
  padding:3px 8px; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.zchip:hover { border-color:var(--gib-cyan); box-shadow:0 0 8px rgba(0,229,255,.35); }

/* ── Preview terminal (the hero surface) ────────────────────────────────── */
/* The header + green edge glow exist to pull the eye here: the canvas chips wear the
   theme's colors too, so the actual output needs to outshine them. */
.prevhead { display:flex; align-items:baseline; gap:12px; margin:16px 2px 8px; }
.prevtitle { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.26em;
  color:var(--gib-green); text-shadow:0 0 12px rgba(0,255,102,.6); }
.prevtitle .caret { width:.5em; height:.9em; background:var(--gib-green);
  box-shadow:0 0 6px rgba(0,255,102,.7); }
.prevsub { font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--gib-faint); }

.monitor { background:linear-gradient(180deg, #131a24, #0b1119); border:1px solid rgba(0,255,102,.32);
  border-radius:8px; padding:14px 14px 10px;
  box-shadow:0 0 22px rgba(0,255,102,.12), 0 12px 40px rgba(0,0,0,.6); }
.monitor.bare { background:transparent; box-shadow:none; border-radius:3px; }
.screen { position:relative; background:#000; border-radius:4px; overflow:hidden;
  border:1px solid #0a141d; padding:12px 12px 14px; }
.monitor.bare .screen { border-radius:2px; }
.monitor.bare .screen::before, .monitor.bare .screen::after { display:none; }
.screen::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%); }
.screen::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
#term { min-height:24px; }
#term .xterm-viewport { overflow:hidden !important; scrollbar-width:none; }
#term .xterm-viewport::-webkit-scrollbar { display:none; }
.xterm-helper-textarea { opacity:0 !important; }

.monbar { display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:9px 4px 2px; flex-wrap:wrap; }
.monmeta { font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--gib-faint); }
.monmeta b { color:var(--gib-dim); font-weight:400; }
.knobs { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.knob { display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gib-faint); }
.knob input[type="range"] { width:90px; accent-color:var(--gib-cyan); height:14px; }
.colbtns { display:flex; border:1px solid var(--gib-line); border-radius:2px; overflow:hidden; }
.colbtns button { font-size:10px; letter-spacing:.1em; padding:4px 8px; color:var(--gib-dim);
  background:transparent; border:none; cursor:pointer; font-family:var(--mono); }
.colbtns button + button { border-left:1px solid var(--gib-line); }
.colbtns button.on { color:var(--gib-cyan); background:rgba(0,229,255,.1); }

/* ── Sample data feed (drawer sliding down from the monitor) ────────────── */
.feedbtn { display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gib-dim); background:transparent;
  border:1px solid var(--gib-line); border-radius:2px; padding:4px 10px; cursor:pointer;
  font-family:var(--mono); }
.feedbtn:hover { color:var(--gib-bright); border-color:var(--gib-cyan);
  box-shadow:0 0 8px rgba(0,229,255,.3); }
.feedbtn.on { color:var(--gib-cyan); border-color:var(--gib-cyan); background:rgba(0,229,255,.1); }
.feedbtn .fc { font-style:normal; display:inline-block; transition:transform .2s; }
.feedbtn.on .fc { transform:rotate(180deg); }

.feed { display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.feed.open { grid-template-rows:1fr; }
.feedclip { overflow:hidden; min-height:0; }
.feedbody { margin-top:10px; padding:12px 2px 4px; border-top:1px dashed var(--gib-line);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(225px, 1fr)); gap:12px 20px;
  align-items:start; }
.fg-lab { font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--gib-magenta);
  margin-bottom:7px; }
.frow { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.frow .k { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--gib-faint);
  width:78px; flex:none; }
.frow input[type="text"], .frow input[type="number"], .frow select { flex:1; width:0; min-width:0;
  font-size:11px; color:var(--gib-text); background:var(--gib-surface);
  border:1px solid var(--gib-line); border-radius:2px; padding:4px 7px; font-family:var(--mono); }
.frow input[type="number"] { appearance:textfield; -moz-appearance:textfield; }
.frow input[type="number"]::-webkit-inner-spin-button,
.frow input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.frow input:hover, .frow input:focus, .frow select:hover, .frow select:focus {
  border-color:var(--gib-cyan); }
.frow input[type="range"] { flex:1; min-width:0; accent-color:var(--gib-cyan); height:14px; }
.frow .v { font-size:10px; color:var(--gib-dim); width:24px; text-align:right; flex:none; }

/* ── Icon browser modal ─────────────────────────────────────────────────── */
.backdrop { position:fixed; inset:0; background:rgba(4,6,10,.75); z-index:60;
  display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px 16px; }
.modal { width:460px; max-width:100%; max-height:84vh; display:flex; flex-direction:column;
  background:var(--gib-bg); border:1px solid var(--gib-line); border-radius:3px;
  box-shadow:0 16px 60px rgba(0,0,0,.7), 0 0 24px rgba(0,229,255,.06); }
.m-head { padding:12px 14px; border-bottom:1px solid var(--gib-line); display:flex;
  justify-content:space-between; align-items:center; flex:none; }
.m-title { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.22em;
  color:var(--gib-magenta); }
.m-close { color:var(--gib-faint); cursor:pointer; background:transparent; border:none;
  font-family:var(--mono); font-size:14px; }
.m-close:hover { color:var(--gib-red); }
.m-search { margin:12px 14px 10px; display:flex; align-items:center; gap:8px; flex:none;
  background:var(--gib-surface); border:1px solid var(--gib-cyan); border-radius:2px;
  padding:0 10px; font-size:13px; color:var(--gib-text);
  box-shadow:0 0 10px rgba(0,229,255,.25); }
.m-search input { flex:1; background:transparent; border:none; color:var(--gib-bright);
  font:13px var(--mono); padding:8px 0; min-width:0; }
.m-search input:focus { outline:none; }
.m-search .hits { color:var(--gib-faint); font-size:10px; flex:none; }
.filters { display:flex; gap:6px; padding:0 14px 12px; flex-wrap:wrap; flex:none; }
.fchip { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gib-dim);
  border:1px solid var(--gib-line); border-radius:12px; padding:4px 11px; cursor:pointer;
  background:transparent; font-family:var(--mono); }
.fchip:hover { color:var(--gib-bright); border-color:var(--gib-cyan); }
.fchip.on { color:var(--gib-cyan); border-color:var(--gib-cyan); background:rgba(0,229,255,.08); }
.pasteany { margin-left:auto; width:170px; font:13px var(--mono); color:var(--gib-bright);
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px;
  padding:4px 9px; }
.pasteany::placeholder { color:var(--gib-faint); font-size:11px; }
.pasteany:focus { outline:none; border-color:var(--gib-cyan);
  box-shadow:0 0 10px rgba(0,229,255,.25); }
.icongrid { flex:1; overflow-y:auto; padding:0 14px 12px; min-height:120px;
  scrollbar-width:thin; scrollbar-color:var(--gib-line) transparent; }
.icongrid .grow { display:grid; grid-template-columns:repeat(8, 1fr); gap:5px; margin-bottom:5px; }
.cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:17px;
  background:var(--gib-surface); border:1px solid var(--gib-line); border-radius:2px;
  color:var(--gib-text); cursor:pointer; padding:0; font-family:var(--mono); overflow:hidden; }
.cell:hover { border-color:var(--gib-cyan); color:var(--gib-bright);
  box-shadow:0 0 8px rgba(0,229,255,.35); }
.cell.sel { border-color:var(--gib-green); color:var(--gib-green);
  box-shadow:0 0 10px rgba(0,255,102,.45); }
.m-foot { border-top:1px solid var(--gib-line); padding:10px 14px; display:flex; flex:none;
  justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:var(--gib-dim); }
.m-foot .det { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-foot b { color:var(--gib-green); font-weight:400; }
.use { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#04060a;
  background:var(--gib-green); border:none; border-radius:2px; padding:8px 14px; cursor:pointer;
  font-weight:700; box-shadow:0 0 12px rgba(0,255,102,.4); font-family:var(--mono); flex:none; }
.nfhint { margin:0 14px 10px; font-size:11px; color:var(--gib-amber); border:1px solid rgba(255,179,0,.4);
  border-radius:2px; padding:7px 10px; display:flex; justify-content:space-between; gap:10px; flex:none; }
.nfhint button { color:var(--gib-amber); background:transparent; border:none; cursor:pointer;
  font-family:var(--mono); }

/* ── Export screen ──────────────────────────────────────────────────────── */
.export { max-width:680px; margin:32px auto; padding:0 18px 40px; width:100%; }
.export h1 { font-size:26px; text-transform:uppercase; letter-spacing:.06em; color:var(--gib-bright);
  text-shadow:0 0 6px rgba(255,138,92,.6), 0 0 20px rgba(255,138,92,.3); margin-bottom:4px; }
.export .sub { color:var(--gib-dim); font-size:13px; margin-bottom:22px; }
.sheet { background:var(--gib-bg); border:1px solid var(--gib-line); border-radius:3px; }
.linkrow { display:flex; gap:8px; padding:14px 18px; border-bottom:1px solid var(--gib-line); }
.linkbox { flex:1; display:flex; align-items:center; overflow:hidden; background:var(--gib-surface);
  border:1px solid var(--gib-line); border-radius:2px; padding:9px 12px; font-size:12px;
  color:var(--gib-cyan); white-space:nowrap; position:relative; }
.linkbox::after { content:""; position:absolute; right:0; top:0; bottom:0; width:40px;
  background:linear-gradient(90deg, transparent, var(--gib-surface)); }
.copybtn { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gib-cyan);
  border:1px solid var(--gib-cyan); border-radius:2px; padding:0 14px; cursor:pointer;
  display:flex; align-items:center; background:transparent; font-family:var(--mono); flex:none; }
.copybtn:hover { background:rgba(0,229,255,.08); box-shadow:0 0 8px rgba(0,229,255,.4); }
.tabs { display:flex; border-bottom:1px solid var(--gib-line); }
.tab { flex:1; text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gib-dim); padding:11px 6px; cursor:pointer; border:none; background:transparent;
  border-bottom:2px solid transparent; font-family:var(--mono); }
.tab:hover { color:var(--gib-bright); }
.tab.on { color:var(--gib-claude); border-bottom-color:var(--gib-claude);
  text-shadow:0 0 8px rgba(255,138,92,.5); }
.pane { padding:16px 18px; }
.ostabs { display:flex; gap:6px; margin-bottom:10px; }
.codeblock { position:relative; background:#000; border:1px solid var(--gib-line); border-radius:2px;
  padding:12px 14px; font-size:12px; line-height:1.6; color:var(--gib-green); overflow-x:auto;
  white-space:pre; margin-bottom:10px; }
.codeblock .c { color:var(--gib-faint); }
.codeblock .copy2 { position:absolute; top:8px; right:8px; font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gib-dim); border:1px solid var(--gib-line); border-radius:2px;
  padding:3px 8px; cursor:pointer; background:rgba(10,16,22,.85); font-family:var(--mono); }
.codeblock .copy2:hover { color:var(--gib-cyan); border-color:var(--gib-cyan); }
.hint { font-size:11px; color:var(--gib-faint); margin-top:10px; }
.hint b { color:var(--gib-dim); font-weight:400; }
.tplhint { font-size:11px; color:var(--gib-faint); margin-top:16px; }

/* ── Templates gallery ──────────────────────────────────────────────────── */
.gallery { max-width:1100px; margin:0 auto; padding:34px 22px 60px; }
.gallery h1 { font-size:26px; text-transform:uppercase; letter-spacing:.06em; color:var(--gib-bright);
  margin-bottom:6px; }
.gallery .sub { color:var(--gib-dim); font-size:13px; margin-bottom:22px; }
/* One card per row: bars compose at 80 columns and get the full width to breathe. */
.tplgrid { display:flex; flex-direction:column; gap:18px; }
.tplcard { background:var(--gib-bg); border:1px solid var(--gib-line); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden; }
.tplcard:hover { border-color:var(--gib-cyan); box-shadow:0 0 14px rgba(0,229,255,.15); }
.tplterm { padding:14px 14px; overflow-x:auto; border-bottom:1px solid var(--gib-line); }
.ansiline { font-family:var(--mono); font-size:13px; line-height:1.55; white-space:pre; }
.tplmeta { padding:10px 12px 0; display:flex; flex-direction:column; gap:3px; }
.tplmeta b { color:var(--gib-bright); font-size:13px; font-weight:600; }
.tplbtns { display:flex; gap:8px; padding:12px; margin-top:auto; }
.tplbtns .btn { font-size:10px; padding:7px 12px; }
.tplcard.tplsubmit { align-items:flex-start; justify-content:center; gap:12px; padding:18px;
  border-style:dashed; }
.tplcard.tplsubmit:hover { border-color:var(--gib-claude); box-shadow:0 0 14px rgba(255,138,92,.15); }
.tplpalette { display:flex; flex-wrap:wrap; gap:5px; padding:10px 12px 0; }
.swatch { width:18px; height:18px; border-radius:2px; border:1px solid var(--gib-line); flex:none; }
.tpldesc { color:var(--gib-dim); font-size:12px; line-height:1.5; }
.dlrow { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* ── Template submit modal (the icon browser owns .modal — this is its own) ─ */
.modalback { position:fixed; inset:0; z-index:90; background:rgba(4,6,10,.72);
  display:flex; align-items:center; justify-content:center; padding:16px; }
.submodal { width:min(460px, 92vw); background:var(--gib-surface); border:1px solid var(--gib-cyan);
  border-radius:3px; box-shadow:0 0 28px rgba(0,229,255,.22); padding:18px;
  display:flex; flex-direction:column; gap:12px; }
.submodal label { display:flex; flex-direction:column; gap:6px; font-size:10px;
  text-transform:uppercase; letter-spacing:.18em; color:var(--gib-faint); }
.submodal label .opt { text-transform:none; letter-spacing:.06em; color:var(--gib-dim); }
.submodal input, .submodal textarea { font-size:13px; color:var(--gib-text); background:var(--gib-bg);
  border:1px solid var(--gib-line); border-radius:2px; padding:7px 9px;
  font-family:var(--mono); resize:vertical; }
.submodal input:focus, .submodal textarea:focus { border-color:var(--gib-cyan); outline:none; }
.submodal .suberr { color:var(--gib-red); }
.modalbtns { display:flex; gap:10px; justify-content:flex-end; }

.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:80;
  display:inline-flex; align-items:center; gap:10px; font-size:12px;
  background:var(--gib-surface); border:1px solid var(--gib-green); border-radius:2px;
  padding:9px 14px; color:var(--gib-text); box-shadow:0 0 14px rgba(0,255,102,.25); }
.toast b { color:var(--gib-green); font-weight:700; }
.toast.err { border-color:var(--gib-red); box-shadow:0 0 14px rgba(255,59,77,.25); }
.toast.err b { color:var(--gib-red); }

.remixchip { display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gib-violet); border:1px solid var(--gib-violet);
  border-radius:12px; padding:4px 12px; }
.remixchip button { color:var(--gib-violet); background:transparent; border:none; cursor:pointer;
  font-family:var(--mono); font-size:12px; padding:0 0 0 2px; line-height:1; }
.remixchip button:hover { color:var(--gib-bright); }

/* ── Boot sequence (overlay in index.html, runs while WASM loads) ───────── */
#boot { position:fixed; inset:0; z-index:100; background:#000; display:flex;
  align-items:center; justify-content:center; font-family:var(--mono); }
#boot .scr { position:relative; width:min(560px, 92vw); font-size:14px; line-height:1.9;
  padding:24px; }
#boot::after { content:""; position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
#boot .bline { opacity:0; color:var(--gib-faint); white-space:pre-wrap; }
#boot .bline.g { color:var(--gib-green); } #boot .bline.a { color:var(--gib-amber); }
#boot .bline.c { color:var(--gib-cyan); }
#boot .bline.show { opacity:1; }
#boot .blogo { position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; background:#000; }
#boot .blogo.show { display:flex; }
#boot .bmark { position:relative; width:84px; height:73px; }
#boot .bmark i { position:absolute; inset:0; clip-path:polygon(0 0, 68% 50%, 0 100%);
  transform:translateX(-120px); opacity:0; transition:transform .28s ease-out, opacity .2s; }
#boot .bmark .c1 { background:var(--gib-green); box-shadow:0 0 10px rgba(0,255,102,.5); }
#boot .bmark .c2 { left:22%; background:var(--gib-cyan); transition-delay:.09s; }
#boot .bmark .c3 { left:44%; background:var(--gib-claude); transition-delay:.18s; }
#boot .blogo.show .bmark i { transform:translateX(0); opacity:1; }
#boot .bword { font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gib-bright); text-shadow:0 0 8px rgba(0,255,102,.7), 0 0 28px rgba(0,255,102,.35);
  text-align:center; }
#boot .bword i { font-style:normal; color:var(--gib-claude);
  text-shadow:0 0 8px rgba(255,138,92,.8), 0 0 28px rgba(255,138,92,.4); }
#boot .btag { font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--gib-dim); }
#boot .bbar { width:200px; height:5px; border:1px solid var(--gib-line); border-radius:2px; }
#boot .bbar i { display:block; height:100%; width:0; background:var(--gib-green);
  box-shadow:0 0 8px rgba(0,255,102,.7); transition:width 1s linear; }
#boot .blogo.show .bbar i { width:100%; }
#boot .skip { position:absolute; right:12px; bottom:10px; z-index:2; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gib-dim);
  border:1px solid var(--gib-line); border-radius:2px; padding:10px 14px;
  background:rgba(10,16,22,.85); cursor:pointer; font-family:var(--mono); }
#boot .skip:hover { color:var(--gib-cyan); border-color:var(--gib-cyan); }
#boot.out { transition:opacity .25s; opacity:0; pointer-events:none; }

/* ── Blazor plumbing (kept from template, restyled) ─────────────────────── */
#blazor-error-ui { color-scheme:dark only; background:var(--gib-surface); color:var(--gib-text);
  border-top:1px solid var(--gib-red); bottom:0; box-shadow:0 -2px 12px rgba(255,59,77,.25);
  box-sizing:border-box; display:none; left:0; padding:.6rem 1.25rem .7rem; position:fixed;
  width:100%; z-index:1000; font-family:var(--mono); font-size:13px; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem;
  color:var(--gib-red); }
.loading-progress { position:absolute; display:block; width:8rem; height:8rem;
  inset:20vh 0 auto 0; margin:0 auto; }
.loading-progress circle { fill:none; stroke:var(--gib-line); stroke-width:0.6rem;
  transform-origin:50% 50%; transform:rotate(-90deg); }
.loading-progress circle:last-child { stroke:var(--gib-green);
  stroke-dasharray:calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition:stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position:absolute; text-align:center; font-weight:bold;
  inset:calc(20vh + 3.25rem) 0 auto 0.2rem; color:var(--gib-dim);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:11px; }
.loading-progress-text:after { content:var(--blazor-load-percentage-text, "jacking in"); }