/* ═══════════════════════════════════════════════════════════════
   a.cavallo // OS  —  components.css
   Panels · terminal · explorer · skill matrix · timeline · palette
   ═══════════════════════════════════════════════════════════════ */

.main { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 26px); padding-bottom: 60px; }

/* ── PANEL (window frame) ─────────────────────────────────────── */
.panel {
  background: var(--bg-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  scroll-margin-top: calc(var(--bar-h) + 18px);
  overflow: hidden;
  position: relative;
}
.panel-h {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.014), transparent);
}
.panel-dots { display: flex; gap: 6px; }
.panel-dots i { width: 10px; height: 10px; border-radius: 99px; background: var(--ink-faint); }
.panel-dots i:nth-child(1) { background: #2a2f36; }
.panel-title { font-size: 12px; color: var(--ink); letter-spacing: .02em; }
.panel-title .pfx { color: var(--ink-dimmer); }
.panel-title .acc { color: var(--acc); }
.panel-meta { margin-left: auto; font-size: 10.5px; color: var(--ink-dimmer); letter-spacing: .06em; display: flex; gap: 14px; align-items: center; }
.panel-meta .badge {
  font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--rule);
  color: var(--ink-dim);
}
.panel-meta .badge.ok { color: var(--ok); border-color: rgba(63,185,80,.3); background: rgba(63,185,80,.07); }
.panel-body { padding: clamp(18px, 2.4vw, 30px); }

/* ── HERO / WHOAMI ────────────────────────────────────────────── */
.hero { padding: clamp(26px, 4vw, 46px) clamp(18px, 3vw, 40px) clamp(30px, 4vw, 44px); }
.hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 12px; color: var(--ink-dim); }
.hero-top .prompt { color: var(--acc); }
.hero-top .cmd { color: var(--ink); }
.hero-top .run { margin-left: auto; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); display: flex; align-items: center; gap: 6px; }
.hero-top .run .d { width: 5px; height: 5px; border-radius: 99px; background: var(--ok); box-shadow: 0 0 7px var(--ok); }

.hero h1 {
  font-weight: 800; font-size: clamp(40px, 7.4vw, 92px); line-height: 0.96;
  letter-spacing: -0.04em; margin: 0 0 6px; color: var(--ink);
}
.hero h1 .last { color: var(--ink); }
.hero h1 .cur { color: var(--acc); font-weight: 400; }
.hero-role {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: clamp(13px, 1.6vw, 16px); color: var(--ink-dim); margin: 14px 0 26px;
}
.hero-role .at { color: var(--ink); }
.hero-role .sep { color: var(--ink-faint); }
.hero-role .loc { color: var(--acc); }

/* whoami JSON output */
.hero-json {
  background: var(--bg-0); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 16px 18px; font-size: 12.5px; line-height: 1.75; max-width: 560px;
  position: relative; overflow: hidden;
}
.hero-json .ln { display: block; white-space: pre; }
.hero-json .ln { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .hero-json .ln { white-space: pre-wrap; }
}
.j-key { color: var(--acc); }
.j-str { color: #9ece6a; }
.j-num { color: #e0af68; }
.j-bool { color: var(--violet); }
.j-punct { color: var(--ink-dimmer); }
.j-cursor { background: var(--acc); color: var(--acc); display: inline-block; width: 7px; height: 14px; transform: translateY(2px); animation: blink 1.1s step-end infinite; }

.hero-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-foot .stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg-1); min-width: 92px;
}
.hero-foot .stat .n { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.hero-foot .stat .n .acc { color: var(--acc); }
.hero-foot .stat .l { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); }

/* motto strip */
.motto {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-soft);
  font-size: clamp(15px, 2vw, 20px); color: var(--ink); letter-spacing: -0.01em;
}
.motto .acc { color: var(--acc); }
.motto .gloss { font-size: 11px; color: var(--ink-dimmer); letter-spacing: .04em; }

/* ── PROJECTS EXPLORER ────────────────────────────────────────── */
.explorer { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 460px; }
@media (max-width: 760px) { .explorer { grid-template-columns: 1fr; } }

.exp-tree { border-right: 1px solid var(--rule-soft); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 760px) {
  .exp-tree {
    border-right: none; border-bottom: 1px solid var(--rule-soft);
    flex-direction: row; gap: 7px; overflow-x: auto;
    padding: 11px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* compact selector pills — glyph + short name, no sub/dot */
  .exp-tree .exp-item {
    width: auto; flex: 0 0 auto; gap: 8px; padding: 8px 12px 8px 9px;
    border-color: var(--rule-soft); background: var(--bg-2); scroll-snap-align: start;
  }
  .exp-tree .exp-item.on { border-color: var(--pj, var(--acc)); }
  .exp-tree .ei-sub { display: none; }
  .exp-tree .ei-name { font-size: 12px; }
  .exp-tree .exp-glyph { width: 22px; height: 22px; font-size: 11px; }
}
.exp-tree-lab { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dimmer); padding: 8px 10px 6px; }
@media (max-width: 760px) { .exp-tree-lab { display: none; } }

.exp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease;
  text-align: left; background: none; width: 100%; color: inherit;
}
.exp-item:hover { background: var(--bg-2); }
.exp-item.on { background: var(--bg-2); border-color: var(--rule); }
.exp-item.on .ei-name { color: var(--ink); }
.exp-glyph {
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--bg-3); color: var(--pj, var(--acc)); border: 1px solid var(--rule);
}
.exp-item.on .exp-glyph { box-shadow: 0 0 0 1px var(--pj, var(--acc)); }
.ei-text { min-width: 0; flex: 1; }
.ei-name { display: block; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-sub { display: block; font-size: 10px; color: var(--ink-dimmer); letter-spacing: .04em; }
.ei-dot { width: 6px; height: 6px; border-radius: 99px; flex-shrink: 0; }
.ei-dot.active { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.ei-dot.stable { background: var(--acc); }
.ei-dot.archived { background: var(--ink-dimmer); }

.exp-detail { padding: clamp(16px, 2vw, 26px); min-width: 0; }
.exp-shot {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden; margin-bottom: 20px; background: var(--bg-0);
  aspect-ratio: 16 / 9;
}
.exp-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.exp-shot.noshot { display: grid; place-items: center; aspect-ratio: 21 / 9; }
.exp-shot .noshot-glyph { font-size: 44px; color: var(--pj, var(--acc)); opacity: .5; }
.exp-shot .shot-tag {
  position: absolute; left: 12px; top: 12px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: rgba(7,9,11,.7); backdrop-filter: blur(6px);
  border: 1px solid var(--rule); border-radius: 99px; padding: 4px 10px;
}

.exp-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.exp-head h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.exp-head .ehmeta { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tagbadge { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--rule); color: var(--ink-dim); }
.tagbadge.dotted { display: inline-flex; gap: 6px; align-items: center; }
.tagbadge.dotted i { width: 5px; height: 5px; border-radius: 99px; background: var(--ok); }
.exp-summary { font-size: 13.5px; line-height: 1.7; color: var(--ink-dim); max-width: 620px; margin: 0 0 22px; text-wrap: pretty; }

/* manifest json card */
.exp-manifest {
  background: var(--bg-0); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 12px; line-height: 1.7; margin-bottom: 20px;
}
.exp-manifest .mf-h { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); margin-bottom: 8px; }
.exp-manifest .ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }

.exp-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
@media (max-width: 600px) { .exp-grid { grid-template-columns: 1fr; } }
.exp-hl { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.exp-hl li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 12.5px; color: var(--ink); align-items: baseline; }
.exp-hl .tri { color: var(--acc); font-size: 10px; }
.exp-metrics { display: flex; flex-direction: column; gap: 8px; }
.exp-metric {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); background: var(--bg-2);
}
.exp-metric .mk { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dimmer); }
.exp-metric .mv { font-size: 14px; font-weight: 600; color: var(--acc); font-variant-numeric: tabular-nums; }

.exp-stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0; }
.exp-foot { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; }
.btn-repo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink); padding: 9px 15px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  background: var(--bg-2); transition: all .18s ease;
}
.btn-repo:hover { border-color: var(--acc); color: var(--acc); box-shadow: 0 0 18px var(--acc-soft); }
.btn-repo .arr { transition: transform .18s ease; }
.btn-repo:hover .arr { transform: translate(2px, -2px); }
.exp-foot .allrepos { font-size: 11.5px; color: var(--ink-dim); transition: color .18s ease; }
.exp-foot .allrepos:hover { color: var(--acc); }

/* ── SKILL MATRIX ─────────────────────────────────────────────── */
.matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mx-group { border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; }
.mx-group-h { padding: 10px 14px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--rule-soft); display: flex; justify-content: space-between; }
.mx-group-h .ct { color: var(--ink-dimmer); }
.mx-items { padding: 6px; display: flex; flex-direction: column; }
.mx-item { padding: 9px 8px; border-radius: 6px; transition: background .15s ease; }
.mx-item:hover { background: var(--bg-3); }
.mx-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.mx-name { font-size: 13px; color: var(--ink); }
.mx-lvl { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dimmer); }
.mx-bar { display: flex; gap: 3px; }
.mx-bar i { flex: 1; height: 4px; border-radius: 99px; background: var(--ink-faint); transition: background .4s ease, box-shadow .4s ease; }
.mx-bar i.fill { background: var(--acc); }
.mx-item:hover .mx-bar i.fill { box-shadow: 0 0 7px var(--acc-glow); }
.mx-note { font-size: 10.5px; color: var(--ink-dimmer); margin-top: 6px; }

/* ── RELEASE LOG / TIMELINE ───────────────────────────────────── */
.rel { position: relative; padding-left: 22px; }
.rel::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--rule); }
.rel-item { position: relative; padding: 0 0 26px; }
.rel-item:last-child { padding-bottom: 0; }
.rel-node {
  position: absolute; left: -22px; top: 4px; width: 11px; height: 11px; border-radius: 99px;
  background: var(--bg-1); border: 2px solid var(--ink-dimmer);
}
.rel-item.active .rel-node { border-color: var(--ok); box-shadow: 0 0 9px var(--ok); }
.rel-item.current .rel-node { border-color: var(--acc); box-shadow: 0 0 9px var(--acc-glow); }
.rel-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rel-tag {
  font-size: 11px; color: var(--acc); font-weight: 600; letter-spacing: .03em;
  padding: 2px 9px; border: 1px solid var(--acc-soft); border-radius: 99px; background: var(--acc-soft);
}
.rel-title { font-size: 14px; color: var(--ink); font-weight: 600; }
.rel-status { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); margin-left: auto; }
.rel-status.active { color: var(--ok); }
.rel-status.current { color: var(--acc); }
.rel-body { font-size: 12.5px; line-height: 1.65; color: var(--ink-dim); max-width: 640px; margin: 0 0 9px; }
.rel-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rel-tags .t { font-size: 10px; color: var(--ink-dimmer); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 1px 7px; }

/* ── WORDS ────────────────────────────────────────────────────── */
.words { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.word-card {
  display: block; padding: 16px; border: 1px solid var(--rule-soft); border-radius: var(--radius-sm);
  background: var(--bg-2); transition: border-color .18s ease, transform .18s ease;
}
.word-card:hover { border-color: var(--acc); transform: translateY(-2px); }
.word-card .wc-meta { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dimmer); margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.word-card .wc-meta .d { width: 4px; height: 4px; border-radius: 99px; background: var(--acc); }
.word-card .wc-title { font-size: 14px; line-height: 1.4; color: var(--ink); }
.word-card:hover .wc-title { color: var(--acc); }
.words-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--ink-dim); }
.words-foot a { color: var(--acc); }

/* ── SIGNAL ───────────────────────────────────────────────────── */
.signal-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .signal-grid { grid-template-columns: 1fr; } }
.signal-lead { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
.signal-lead .em { color: var(--ink); }
.signal-lead .mail {
  display: inline-block; color: var(--acc); border-bottom: 1px solid var(--acc-soft);
  transition: border-color .18s ease;
}
.signal-lead .mail:hover { border-color: var(--acc); }
.signal-sign { margin-top: 22px; display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dimmer); }
.signal-sign .ac { font-size: 18px; font-weight: 800; color: var(--acc); letter-spacing: -0.04em; text-transform: none; }

.links-list { display: flex; flex-direction: column; gap: 8px; }
.link-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); background: var(--bg-2);
  transition: border-color .18s ease, background .18s ease;
}
.link-row:hover { border-color: var(--acc); background: var(--bg-3); }
.link-row .lr-ico { width: 22px; text-align: center; color: var(--acc); font-size: 13px; }
.link-row .lr-k { font-size: 12.5px; color: var(--ink); }
.link-row .lr-v { margin-left: auto; font-size: 11px; color: var(--ink-dimmer); }
.link-row:hover .lr-v { color: var(--ink-dim); }
.link-row .arr { color: var(--ink-dimmer); transition: transform .18s ease, color .18s ease; }
.link-row:hover .arr { color: var(--acc); transform: translate(2px,-2px); }

/* ── LIVE CONSOLE ─────────────────────────────────────────────── */
.console { font-size: 12px; }
.console-body {
  background: var(--bg-0); border-radius: var(--radius-sm); border: 1px solid var(--rule-soft);
  padding: 14px 16px; height: 188px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.log-line { display: flex; gap: 10px; align-items: baseline; padding: 1.5px 0; opacity: 0; animation: logIn .3s ease forwards; line-height: 1.5; }
@keyframes logIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.log-line .ts { color: var(--ink-dimmer); flex-shrink: 0; }
.log-line .src { color: var(--ink-dim); min-width: 64px; flex-shrink: 0; }
.log-line .lvl { width: 6px; flex-shrink: 0; }
.log-line .msg { color: var(--ink); }
.log-line.ok .lvl { color: var(--ok); }
.log-line.info .lvl { color: var(--info); }
.log-line.warn .lvl { color: var(--warn); }
.log-line.ok .src { color: var(--ok); }
.log-line.warn .src { color: var(--warn); }

/* ── FOOTER ───────────────────────────────────────────────────── */
.os-foot {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto;
  padding: 22px var(--gutter) 30px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 10.5px; letter-spacing: .06em; color: var(--ink-dimmer); text-transform: uppercase;
}
.os-foot .acc { color: var(--acc); }
.os-foot a { color: var(--ink-dim); transition: color .18s ease; }
.os-foot a:hover { color: var(--acc); }
.os-foot .fl { display: flex; gap: 16px; }

/* ── COMMAND PALETTE ──────────────────────────────────────────── */
.cmdk {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: flex-start; justify-content: center;
  background: rgba(4,6,8,.6); backdrop-filter: blur(4px);
  padding-top: 13vh;
}
.cmdk.open { display: flex; }
.cmdk-box {
  width: min(560px, 92vw); background: var(--bg-1); border: 1px solid var(--rule-strong);
  border-radius: 12px; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px var(--rule);
  overflow: hidden; animation: cmdkIn .16s ease;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.cmdk-input-wrap { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--rule-soft); }
.cmdk-input-wrap .prompt { color: var(--acc); font-size: 14px; }
.cmdk-input { flex: 1; background: none; border: none; outline: none; color: var(--ink); font-family: var(--mono); font-size: 14px; }
.cmdk-input::placeholder { color: var(--ink-dimmer); }
.cmdk-esc { font-size: 9.5px; color: var(--ink-dimmer); border: 1px solid var(--rule); border-radius: 5px; padding: 2px 7px; letter-spacing: .08em; }
.cmdk-list { max-height: 320px; overflow-y: auto; padding: 7px; }
.cmdk-sect { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dimmer); padding: 9px 11px 5px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 11px; border-radius: 7px;
  cursor: pointer; color: var(--ink-dim); width: 100%; background: none; border: none; text-align: left;
  font-family: var(--mono); font-size: 12.5px;
}
.cmdk-item .ci-ico { width: 18px; text-align: center; color: var(--ink-dimmer); }
.cmdk-item .ci-name { color: var(--ink); }
.cmdk-item .ci-hint { margin-left: auto; font-size: 10px; color: var(--ink-dimmer); }
.cmdk-item.sel { background: var(--acc-soft); }
.cmdk-item.sel .ci-ico { color: var(--acc); }
.cmdk-item.sel .ci-hint { color: var(--acc); }
.cmdk-empty { padding: 24px; text-align: center; color: var(--ink-dimmer); font-size: 12px; }

/* ── TWEAKS ───────────────────────────────────────────────────── */
.tweaks {
  position: fixed; right: 18px; bottom: 18px; width: 234px; z-index: 160;
  background: var(--bg-1); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow: hidden; font-size: 11px;
}
.tweaks[hidden] { display: none; }
.tweaks-h { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.tweaks-h .acc { color: var(--acc); }
.tweaks-close { background: none; border: none; color: var(--ink-dimmer); cursor: pointer; font-size: 16px; line-height: 1; }
.tweaks-close:hover { color: var(--ink); }
.tweaks-b { padding: 14px; display: flex; flex-direction: column; gap: 15px; }
.tw-g { display: flex; flex-direction: column; gap: 9px; }
.tw-l { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dimmer); }
.tw-sw { display: flex; gap: 9px; }
.tw-sw button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--rule); background: var(--c); cursor: pointer; padding: 0; transition: transform .15s ease; }
.tw-sw button:hover { transform: scale(1.12); }
.tw-sw button.on { box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--ink); }
.tw-seg { display: flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.tw-seg button { flex: 1; background: none; border: none; padding: 7px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); cursor: pointer; transition: all .15s ease; }
.tw-seg button.on { background: var(--acc); color: var(--acc-ink); }

@media (max-width: 640px) { .tweaks { right: 12px; bottom: 12px; left: 12px; width: auto; } }

/* ── REVEAL ───────────────────────────────────────────────────
   Visible by default (safe if JS never runs / frozen contexts).
   The hidden pre-state is opt-in via html.anim, and opacity is NOT
   transitioned — so adding .in flips it visible instantly while the
   transform slides. Nothing can get stuck invisible. */
.r { opacity: 1; transform: none; }
html.anim .r { opacity: 0; transform: translateY(16px); transition: transform .7s cubic-bezier(.2,.6,.2,1); }
html.anim .r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.anim .r { opacity: 1; transform: none; transition: none; }
}