/* Video Currency · cutting-room UI
   Neutral graphite surround (colour-critical viewing), one grease-pencil accent. */

@font-face { font-family: 'Geist'; src: url(fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url(fonts/jetbrains-mono.woff2) format('woff2'); font-weight: 100 800; font-display: block; }
@font-face { font-family: 'Instrument Serif'; src: url(fonts/instrument-serif.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; src: url(fonts/instrument-serif-italic.woff2) format('woff2'); font-display: block; }

:root {
  /* colour */
  --surround: #1E1E20;
  --panel: #252528;
  --raised: #2F2F33;
  --well: #18181A;
  --line: #3A3A3F;
  --line-soft: #2E2E32;
  --ink: #ECEAE5;
  --ink-2: #A9A7A1;
  --ink-3: #75736E;
  --pencil: #F1D27A;
  --pencil-ink: #241D08;
  --pencil-dim: rgba(241, 210, 122, .14);
  --bad: #EB7A64;
  --good: #8FCCA8;

  /* type */
  --sans: 'Geist', -apple-system, 'Helvetica Neue', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-15: 15px; --t-19: 19px; --t-24: 24px; --t-30: 30px; --t-48: 48px;

  /* space (4-based) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* radii by hierarchy: screens are square, controls are soft, tokens are round */
  --r-screen: 2px; --r-thumb: 3px; --r-control: 6px; --r-sheet: 10px; --r-pill: 999px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --sidebar: 288px;
  --inspector: 344px;
  --strip: 150px;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--surround); color: var(--ink);
  font: 400 var(--t-13)/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
  user-select: none; -webkit-user-select: none;
}
input, textarea, select, button { font: inherit; color: inherit; }
textarea, input[type=text], input[type=password], input[type=url] { user-select: text; -webkit-user-select: text; }
button { cursor: pointer; background: none; border: 0; }
:focus-visible { outline: 2px solid var(--pencil); outline-offset: 2px; }
::selection { background: var(--pencil); color: var(--pencil-ink); }
.tc { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- top bar (window chrome) ---------- */
.bar {
  height: 52px; display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4) 0 92px; border-bottom: 1px solid var(--line-soft);
  -webkit-app-region: drag;
}
.bar > * { -webkit-app-region: no-drag; }
.bar .crumb { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.bar .home-link { color: var(--ink-3); text-decoration: none; font-size: var(--t-13); padding: 4px 0; }
.bar .home-link:hover { color: var(--ink); }
.bar .title {
  font: italic 400 var(--t-24)/1 var(--serif); color: var(--ink); background: none; border: 0;
  padding: 2px 4px; margin-left: -4px; border-radius: var(--r-control); min-width: 60px; max-width: 46vw;
  user-select: text; -webkit-user-select: text; outline: none;
}
.bar .title:hover { background: var(--raised); }
.bar .title:focus { background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.bar .spacer { flex: 1; }
.bar .ai-state { font-size: var(--t-12); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.bar .ai-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.bar .ai-state.on i { background: var(--good); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: 32px; padding: 0 var(--s4); border-radius: var(--r-control);
  background: var(--raised); color: var(--ink); font-weight: 500; white-space: nowrap;
  transition: background .12s, transform .08s, opacity .12s;
}
.btn:hover { background: #38383D; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.primary { background: var(--pencil); color: var(--pencil-ink); font-weight: 600; }
.btn.primary:hover { background: #F6DC92; }
.btn.big { height: 44px; padding: 0 var(--s5); font-size: var(--t-15); }
.btn.quiet { background: none; color: var(--ink-2); padding: 0 var(--s2); }
.btn.quiet:hover { color: var(--ink); background: var(--raised); }
.btn.danger:hover { color: var(--bad); }
.icon-btn { width: 32px; height: 32px; border-radius: var(--r-control); display: inline-grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--raised); color: var(--ink); }
.icon-btn svg, .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 500 var(--t-11) var(--sans); color: inherit; opacity: .6; margin-left: 2px; }

/* ---------- home ---------- */
.home { height: 100%; overflow: auto; padding: var(--s8) var(--s8) var(--s7); }
.home-inner { max-width: 1080px; }
.home h1 { font: 400 var(--t-48)/1 var(--serif); letter-spacing: -.01em; }
.home .lede { color: var(--ink-2); font-size: var(--t-15); margin-top: var(--s3); max-width: 52ch; }
.home .start { margin-top: var(--s6); display: flex; gap: var(--s3); align-items: center; }
.reel-list { margin-top: var(--s7); display: grid; gap: 2px; }
.reel-row {
  display: grid; grid-template-columns: 168px 1fr auto; gap: var(--s5); align-items: center;
  padding: var(--s3); border-radius: var(--r-control); text-align: left; width: 100%;
  transition: background .12s;
}
.reel-row:hover { background: var(--panel); }
.reel-row .poster { aspect-ratio: 16/9; background: var(--well) center/cover; border-radius: var(--r-thumb); }
.reel-row h3 { font: italic 400 var(--t-24)/1.1 var(--serif); }
.reel-row .meta { color: var(--ink-3); margin-top: var(--s1); }
.reel-row .when { color: var(--ink-3); font-size: var(--t-12); }
.home .empty-home { margin-top: var(--s7); color: var(--ink-3); }
.dropping .home::after, .dropping .ws::after {
  content: 'Drop to add'; position: fixed; inset: 60px 12px 12px; border: 1.5px dashed var(--pencil);
  border-radius: var(--r-sheet); display: grid; place-items: center; background: rgba(30,30,32,.82);
  font: italic 400 var(--t-30) var(--serif); color: var(--pencil); z-index: 50; pointer-events: none;
}

/* ---------- workspace ---------- */
#main { height: calc(100% - 52px); }
.ws {
  height: 100%; display: grid;
  grid-template-columns: var(--sidebar) 1fr var(--inspector);
  grid-template-rows: 1fr var(--strip);
  grid-template-areas: 'bin monitor side' 'bin strip side';
}

.ws.reels-mode { grid-template-columns: var(--sidebar) 1fr; grid-template-areas: 'bin monitor' 'bin monitor'; }
.ws.reels-mode .strip, .ws.reels-mode .side { display: none; }

/* bin */
.bin { grid-area: bin; border-right: 1px solid var(--line-soft); overflow-y: auto; padding: var(--s4) 0 var(--s7); }
.bin section + section { margin-top: var(--s5); }
.bin-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s3) 0 var(--s4); height: 28px; }
.bin-head h2 { font: 600 var(--t-13)/1 var(--sans); }
.bin-head .count { color: var(--ink-3); font-weight: 400; margin-left: 6px; }
.clip {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--s3); align-items: center;
  padding: 6px var(--s3) 6px var(--s4); position: relative;
}
.clip:hover { background: var(--panel); }
.clip .th { width: 64px; aspect-ratio: 16/9; border-radius: var(--r-thumb); background: var(--well) center/cover; position: relative; overflow: hidden; }
.clip .th.audio { background: var(--well); display: grid; place-items: center; }
.clip .th.audio img { width: 100%; height: 60%; object-fit: cover; opacity: .9; }
.clip .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip .sub { color: var(--ink-3); font-size: var(--t-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clip .sub.err { color: var(--bad); white-space: normal; }
.clip .x { position: absolute; right: 8px; top: 50%; translate: 0 -50%; opacity: 0; }
.clip:hover .x, .clip .x:focus-visible { opacity: 1; }
.meter { height: 2px; background: var(--line); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--pencil); width: 0; transition: width .3s var(--ease); }
.bin .add-row { margin: var(--s1) var(--s4) 0; width: calc(100% - 2 * var(--s4)); justify-content: flex-start; }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 var(--s4); }
.ref-grid .ref { aspect-ratio: 1; border-radius: var(--r-thumb); background: var(--well) center/cover; position: relative; }
.ref-grid .ref .x { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; background: rgba(0,0,0,.6); opacity: 0; }
.ref-grid .ref:hover .x { opacity: 1; }
.ref-text { margin: 6px var(--s4) 0; padding: 8px 10px; background: var(--panel); border-radius: var(--r-control); font-size: var(--t-12); color: var(--ink-2); display: flex; gap: 8px; align-items: flex-start; }
.ref-text span { flex: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.ref-text button { color: var(--ink-3); }
.link-in { margin: var(--s2) var(--s4) 0; display: flex; gap: 4px; }
.field {
  width: 100%; height: 32px; padding: 0 10px; border-radius: var(--r-control);
  background: var(--well); border: 1px solid var(--line-soft); color: var(--ink);
  transition: border-color .12s;
}
.field:focus { outline: none; border-color: var(--ink-3); }
.field::placeholder, textarea::placeholder { color: var(--ink-3); }
.style-read { margin: var(--s3) var(--s4) 0; font: italic 400 var(--t-19)/1.3 var(--serif); color: var(--ink); }
.style-read small { display: block; font: 400 var(--t-12)/1.4 var(--sans); color: var(--ink-3); margin-top: 6px; }
.bin-empty { padding: 0 var(--s4); color: var(--ink-3); font-size: var(--t-12); }

/* monitor */
.monitor { grid-area: monitor; display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; }
.mon-tabs { display: flex; align-items: center; gap: var(--s1); padding: var(--s3) var(--s4) 0; }
.tab { height: 30px; padding: 0 var(--s3); border-radius: var(--r-control); color: var(--ink-3); font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab[aria-selected=true] { color: var(--ink); background: var(--raised); }
.versions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--t-12); }
.versions select { background: var(--raised); border: 0; border-radius: var(--r-control); height: 28px; padding: 0 8px; color: var(--ink); }

.screen-wrap { position: relative; min-height: 0; display: grid; place-items: center; padding: var(--s4) var(--s5); }
.screen { position: relative; background: #000; border-radius: var(--r-screen); max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px var(--line-soft); }
.screen video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-screen); }
.screen .veil {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s3);
  background: rgba(14,14,15,.72); backdrop-filter: blur(3px); text-align: center; padding: var(--s5);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.screen .veil.on { opacity: 1; pointer-events: auto; }
.veil .msg { font: italic 400 var(--t-24)/1.2 var(--serif); }
.veil .sub { color: var(--ink-2); max-width: 40ch; }
.veil .bar-big { width: 220px; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.veil .bar-big i { display: block; height: 100%; background: var(--pencil); transition: width .35s var(--ease); }

.transport { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s5) var(--s3); }
.transport .tc { font-size: var(--t-13); color: var(--ink-2); white-space: nowrap; }
@media (max-width: 1320px) { .transport .stale span { display: none; } }
.transport .tc b { color: var(--ink); font-weight: 500; }
.transport .stale { font-size: var(--t-12); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.transport .stale i { width: 6px; height: 6px; border-radius: 50%; background: var(--pencil); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.seg-ctl { display: inline-flex; background: var(--well); border-radius: var(--r-control); padding: 2px; }
.seg-ctl button { height: 26px; padding: 0 10px; border-radius: 4px; color: var(--ink-3); font-size: var(--t-12); font-weight: 500; }
.seg-ctl button:hover { color: var(--ink); }
.seg-ctl button[aria-pressed=true] { background: var(--raised); color: var(--ink); }

/* brief composer: the first-cut moment */
.composer { width: min(640px, 100%); }
.composer h2 { font: 400 var(--t-48)/1.02 var(--serif); letter-spacing: -.01em; }
.composer p.hint { color: var(--ink-2); margin-top: var(--s3); font-size: var(--t-15); }
.composer textarea {
  margin-top: var(--s5); width: 100%; min-height: 128px; resize: vertical; padding: var(--s4);
  background: var(--well); border: 1px solid var(--line-soft); border-radius: var(--r-sheet);
  font: 400 var(--t-15)/1.55 var(--sans); color: var(--ink);
}
.composer textarea:focus { outline: none; border-color: var(--ink-3); }
.composer .opts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); margin-top: var(--s4); align-items: center; }
.composer .opt { display: flex; align-items: center; gap: var(--s2); color: var(--ink-3); font-size: var(--t-12); }
.composer .go { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s4); }
.composer .go .note { color: var(--ink-3); font-size: var(--t-12); max-width: 44ch; }
.drop-first { text-align: left; width: min(560px, 100%); }
.drop-first h2 { font: 400 var(--t-48)/1.02 var(--serif); }
.drop-first p { color: var(--ink-2); margin: var(--s3) 0 var(--s5); font-size: var(--t-15); max-width: 46ch; }

/* film strip timeline */
.strip { grid-area: strip; border-top: 1px solid var(--line-soft); position: relative; overflow-x: auto; overflow-y: hidden; padding: var(--s3) var(--s5) var(--s2); }
.strip-inner { position: relative; height: 100%; min-width: 100%; }
.track { position: relative; height: 72px; }
.seg {
  position: absolute; top: 0; height: 72px; border-radius: var(--r-thumb); overflow: hidden;
  background: var(--raised) center/cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
  cursor: pointer; transition: box-shadow .12s, opacity .12s;
}
.seg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,.65)); }
.seg .lb { position: absolute; left: 6px; right: 6px; bottom: 4px; z-index: 1; font-size: var(--t-11); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.seg:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.seg.sel { box-shadow: inset 0 0 0 2px var(--pencil); }
.seg.dragging { opacity: .4; }
.seg.drop-before { box-shadow: -3px 0 0 var(--pencil); }
.seg .tr { position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; background: repeating-linear-gradient(-55deg, rgba(241,210,122,.55) 0 2px, transparent 2px 6px); }
.sprockets { position: relative; height: 14px; margin-top: 6px; }
.sprockets i { position: absolute; top: 3px; width: 1px; height: 6px; background: var(--ink-3); opacity: .6; }
.sprockets i.bar { height: 10px; top: 1px; opacity: 1; background: var(--ink-2); }
.ruler { position: relative; height: 14px; font-size: var(--t-11); color: var(--ink-3); }
.ruler span { position: absolute; top: 0; translate: -50% 0; }
.playhead { position: absolute; top: -6px; bottom: 0; width: 2px; background: var(--pencil); z-index: 5; pointer-events: none; translate: -1px 0; }
.playhead::before { content: ''; position: absolute; top: 0; left: -4px; border: 5px solid transparent; border-top: 6px solid var(--pencil); }
.strip-empty { display: grid; place-items: center; height: 100%; color: var(--ink-3); }

/* inspector side */
.side { grid-area: side; border-left: 1px solid var(--line-soft); overflow-y: auto; display: flex; flex-direction: column; }
.side section { padding: var(--s5) var(--s5); border-bottom: 1px solid var(--line-soft); }
.side h2 { font: 600 var(--t-13)/1 var(--sans); margin-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; }
.side h2 .faint { font-weight: 400; }
.director { font: italic 400 var(--t-19)/1.35 var(--serif); color: var(--ink); }
.director + .by { margin-top: var(--s2); font-size: var(--t-12); color: var(--ink-3); }
.changes { margin-top: var(--s3); padding-left: var(--s3); border-left: 2px solid var(--pencil); color: var(--ink-2); }
.note-box { position: relative; }
.note-box textarea {
  width: 100%; min-height: 76px; resize: none; padding: 10px 12px 40px; border-radius: var(--r-control);
  background: var(--well); border: 1px solid var(--line-soft); line-height: 1.5;
}
.note-box textarea:focus { outline: none; border-color: var(--ink-3); }
.note-box .btn { position: absolute; right: 6px; bottom: 6px; height: 28px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.quick button { height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--raised); color: var(--ink-2); font-size: var(--t-12); }
.quick button:hover { color: var(--ink); background: #38383D; }

.kv { display: grid; grid-template-columns: 88px 1fr; gap: var(--s2) var(--s3); align-items: center; }
.kv label { color: var(--ink-3); font-size: var(--t-12); }
.kv select, .kv input[type=number] { height: 30px; background: var(--well); border: 1px solid var(--line-soft); border-radius: var(--r-control); padding: 0 8px; width: 100%; }
.kv input[type=range] { width: 100%; accent-color: var(--pencil); }
.nudge { display: flex; align-items: center; gap: 4px; }
.nudge .tc { flex: 1; text-align: center; height: 30px; display: grid; place-items: center; background: var(--well); border-radius: var(--r-control); }
.nudge button { width: 30px; height: 30px; border-radius: var(--r-control); background: var(--raised); color: var(--ink-2); }
.nudge button:hover { color: var(--ink); }
.why { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-12); }
.seg-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }

.presets { display: grid; gap: 2px; }
.preset { display: grid; grid-template-columns: 18px 1fr auto; gap: var(--s2); align-items: center; padding: 7px 8px; border-radius: var(--r-control); cursor: pointer; }
.preset:hover { background: var(--panel); }
.preset input { accent-color: var(--pencil); width: 14px; height: 14px; margin: 0; }
.preset .dim { color: var(--ink-3); font-size: var(--t-12); }
.preset .shape { width: 22px; height: 14px; display: grid; place-items: center; }
.preset .shape i { display: block; border: 1.4px solid var(--ink-3); border-radius: 2px; }
.deliver-go { margin-top: var(--s4); width: 100%; }
.exports { margin-top: var(--s4); display: grid; gap: 2px; }
.exp { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: center; padding: 6px 8px; border-radius: var(--r-control); }
.exp:hover { background: var(--panel); }
.exp .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp .sub { font-size: var(--t-12); color: var(--ink-3); }
.exp.err .sub { color: var(--bad); }

/* reels view */
.reels-wrap { min-height: 0; overflow: auto; padding: var(--s4) var(--s5); }
.reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--s5) var(--s4); }
.reel video, .reel .ph { width: 100%; aspect-ratio: 9/16; background: #000; border-radius: var(--r-screen); display: block; object-fit: cover; }
.reel .ph { display: grid; place-items: center; color: var(--ink-3); }
.reel h3 { font: italic 400 var(--t-19)/1.15 var(--serif); margin-top: var(--s3); }
.reel .hook { color: var(--ink-2); font-size: var(--t-12); margin-top: var(--s1); }
.reel .row { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); }
.reel .score { font-size: var(--t-12); color: var(--ink-3); margin-top: var(--s2); }
.reel .row .btn:last-child { margin-left: auto; }
.reel .score b { color: var(--pencil); font-weight: 600; }
.reels-intro { max-width: 520px; padding: var(--s7) 0; }
.reels-intro h2 { font: 400 var(--t-30)/1.1 var(--serif); }
.reels-intro p { color: var(--ink-2); margin: var(--s3) 0 var(--s5); }

/* toasts */
.toasts { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; display: grid; gap: 8px; z-index: 80; }
.toast { background: var(--ink); color: #1A1A1B; padding: 10px 14px; border-radius: var(--r-control); font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.45); display: flex; gap: 12px; align-items: center; animation: rise .25s var(--ease); max-width: 520px; }
.toast.bad { background: var(--bad); color: #2A0E08; }
.toast button { text-decoration: underline; font-weight: 600; }
@keyframes rise { from { translate: 0 8px; opacity: 0; } }

/* settings sheet */
dialog { margin: auto; border: 0; padding: 0; background: var(--panel); color: var(--ink); border-radius: var(--r-sheet); width: min(520px, 92vw); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line); }
dialog::backdrop { background: rgba(10,10,11,.6); backdrop-filter: blur(2px); }
.sheet { padding: var(--s6); }
.sheet h2 { font: italic 400 var(--t-30)/1 var(--serif); }
.sheet .group { margin-top: var(--s5); }
.sheet .group > label { display: block; font-weight: 600; margin-bottom: 6px; }
.sheet .help { color: var(--ink-3); font-size: var(--t-12); margin-top: 6px; }
.sheet .help a { color: var(--ink-2); }
.sheet select { width: 100%; height: 32px; background: var(--well); border: 1px solid var(--line-soft); border-radius: var(--r-control); padding: 0 8px; }
.sheet .check { display: flex; gap: 10px; align-items: flex-start; }
.sheet .check input { accent-color: var(--pencil); margin-top: 3px; }
.sheet .foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s6); }
.sys { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); color: var(--ink-3); font-size: var(--t-12); display: grid; gap: 4px; }
.sys b { color: var(--ink-2); font-weight: 500; }

@media (max-width: 1280px) { :root { --sidebar: 248px; --inspector: 300px; } }

/* scrollbars that belong in a dark suite */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 3px solid var(--surround); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }