/* ═══════════════════════════════════════════════════════════
   CODED NATURE — UI System · Component Layer

   Depends on: tokens.css (tokens + semantic type)
   
   Every component honors THE CONTRACT:
     rest    → organic radius (pill, surface, round)
     active  → technical radius (--r-technical = 4px)
   
   Touch devices: add .touched to the element to trigger the
   active state. Bind it on tap in your own JS.
   ═══════════════════════════════════════════════════════════ */


/* ── Reset (minimal) ─────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }


/* ═══════════════════════════════════════════════════════════
   FIELDS — Spatial containers (not grid cells)
   ═══════════════════════════════════════════════════════════ */
.field {
    padding: var(--s9) max(var(--s5), 14vw);
    position: relative;
}
.field + .field { border-top: 1px solid var(--ink-06); }
.field--tight { padding-top: var(--s7); padding-bottom: var(--s7); }
.field--flush { border-top: none !important; }

@media (max-width: 768px) {
    .field { padding-left: var(--s5); padding-right: var(--s5); }
}


/* ═══════════════════════════════════════════════════════════
   MOLECULES — Atomic data unit
   Rest: organic pill, muted.  Active: technical block, data emerges.
   ═══════════════════════════════════════════════════════════ */
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); }

.mol {
    padding: var(--s3) var(--s5);
    background: var(--bg-elevated);
    border-radius: var(--r-surface);
    font-family: var(--font-data);
    font-size: var(--size-small);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    border: 1px solid var(--ink-06);
    transition: all var(--t-med) var(--fluid);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.mol i { font-size: 1rem; opacity: 0.5; transition: opacity var(--t-fast); }

.mol:hover, .mol:active, .mol.touched {
    border-radius: var(--r-technical);
    background: var(--ink);
    color: var(--bg);
    border-color: transparent;
    transform: scale(var(--scale-hover));
    box-shadow: var(--shadow-md);
}
.mol:hover i, .mol:active i, .mol.touched i { opacity: 1; }

.mol-detail {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: all var(--t-med) var(--fluid);
    color: inherit;
    font-weight: 300;
}
.mol:hover .mol-detail, .mol:active .mol-detail, .mol.touched .mol-detail {
    max-width: 160px;
    opacity: 0.55;
    margin-left: var(--s2);
}

.mol--accent { border-color: var(--accent-25); color: var(--accent); }
.mol--accent:hover, .mol--accent.touched { background: var(--accent); color: var(--accent-ink); }
.mol--pos { border-color: var(--pos-25); }
.mol--pos:hover, .mol--pos.touched { background: var(--pos); color: var(--accent-ink); }
.mol--neg { border-color: var(--neg-25); }
.mol--neg:hover, .mol--neg.touched { background: var(--neg); color: var(--accent-ink); }
.mol--warn { border-color: var(--warn-25); }
.mol--warn:hover, .mol--warn.touched { background: var(--warn); color: var(--accent-ink); }


/* ═══════════════════════════════════════════════════════════
   BUTTONS — Action molecules
   ═══════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    font-family: var(--font-data);
    font-size: var(--size-small);
    padding: var(--s3) var(--s6);
    border-radius: var(--r-surface);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    transition: all var(--t-med) var(--fluid);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.btn--fill { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--fill:hover, .btn--fill:active, .btn--fill.touched {
    border-radius: var(--r-technical);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}
.btn--fill:active { transform: translateY(0); box-shadow: none; }

.btn--ghost { border-color: var(--ink-12); color: var(--ink-60); }
.btn--ghost:hover, .btn--ghost:active, .btn--ghost.touched {
    border-radius: var(--r-technical);
    border-color: var(--ink);
    color: var(--ink);
    background: var(--ink-06);
}

.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent:hover, .btn--accent:active, .btn--accent.touched {
    border-radius: var(--r-technical);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-accent);
}

.btn--text { color: var(--ink-60); padding: var(--s2) var(--s3); }
.btn--text:hover, .btn--text:active, .btn--text.touched {
    color: var(--accent);
    background: var(--accent-06);
    border-radius: var(--r-technical);
}

.btn--neg { border-color: var(--neg-25); color: var(--neg); }
.btn--neg:hover, .btn--neg:active, .btn--neg.touched {
    border-radius: var(--r-technical);
    background: var(--neg);
    color: var(--accent-ink);
    border-color: var(--neg);
}

.btn--icon {
    width: 38px; height: 38px;
    padding: 0;
    border-radius: var(--r-round);
    border: 1px solid var(--ink-06);
    background: var(--bg-elevated);
    color: var(--ink-25);
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-med) var(--fluid);
    cursor: pointer;
}
.btn--icon:hover, .btn--icon:active, .btn--icon.touched {
    border-radius: var(--r-technical);
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    transform: scale(var(--scale-hover));
}

.btn--sm { padding: var(--s2) var(--s4); font-size: var(--size-micro); }
.btn--lg { padding: var(--s4) var(--s7); font-size: var(--size-body); }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--r-surface) 0 0 var(--r-surface); }
.btn-group .btn:last-child  { border-radius: 0 var(--r-surface) var(--r-surface) 0; }
.btn-group .btn + .btn { border-left: none; }
.btn-group .btn:hover,
.btn-group .btn:active,
.btn-group .btn.touched { border-radius: inherit; }


/* ═══════════════════════════════════════════════════════════
   INPUTS
   Rest: organic pill. Focus: technical. Label glows accent.
   ═══════════════════════════════════════════════════════════ */
.input-field { margin-bottom: var(--s5); }

.input-field label {
    display: block;
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink-25);
    margin-bottom: var(--s2);
    transition: color var(--t-fast);
}
.input-field:focus-within label { color: var(--accent); }

.input {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--size-body);
    padding: var(--s3) var(--s5);
    background: var(--bg-elevated);
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    color: var(--ink);
    outline: none;
    transition: all var(--t-med) var(--fluid);
}
.input::placeholder { color: var(--ink-25); }
.input:hover { border-color: var(--ink-12); }
.input:focus {
    border-radius: var(--r-technical);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-12);
}
.input--error { border-color: var(--neg); }
.input--error:focus { box-shadow: 0 0 0 3px var(--neg-25); }

.input-hint {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    color: var(--ink-25);
    margin-top: var(--s1);
}
.input-hint--error { color: var(--neg); }

textarea.input { min-height: 100px; resize: vertical; }
textarea.input:focus { border-radius: var(--r-technical); }

.select-wrap { position: relative; }
.select-wrap::after {
    content: '↓';
    position: absolute;
    right: var(--s5); top: 50%;
    transform: translateY(-50%);
    color: var(--ink-25);
    pointer-events: none;
    font-family: var(--font-data);
    font-size: var(--size-small);
    transition: color var(--t-fast);
}
.select-wrap:focus-within::after { color: var(--accent); }
select.input { appearance: none; padding-right: var(--s8); }


/* ═══════════════════════════════════════════════════════════
   TOGGLES & CHECKBOXES
   ═══════════════════════════════════════════════════════════ */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.toggle-track {
    width: 44px; height: 24px;
    background: var(--ink-06);
    border-radius: var(--r-surface);
    position: relative;
    transition: all var(--t-med) var(--fluid);
    border: 1px solid var(--ink-06);
}
.toggle-thumb {
    width: 18px; height: 18px;
    background: var(--ink-25);
    border-radius: var(--r-round);
    position: absolute;
    top: 2px; left: 2px;
    transition: all var(--t-med) var(--snap);
}
.toggle.on .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: var(--r-technical);
}
.toggle.on .toggle-thumb {
    left: 22px;
    background: var(--accent-ink);
    border-radius: var(--r-technical);
}
.toggle-text {
    font-family: var(--font-data);
    font-size: var(--size-small);
    color: var(--ink-60);
}

.check {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.check-box {
    width: 20px; height: 20px;
    border: 1.5px solid var(--ink-25);
    border-radius: var(--r-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--t-med) var(--fluid);
    flex-shrink: 0;
}
.check-mark {
    width: var(--s2); height: var(--s2);
    background: transparent;
    border-radius: var(--r-round);
    transition: all var(--t-med) var(--snap);
}
.check.on .check-box {
    border-color: var(--accent);
    background: var(--accent);
    border-radius: var(--r-technical);
}
.check.on .check-mark {
    background: var(--accent-ink);
    border-radius: var(--r-technical);
}
.check-text { color: var(--ink-60); font-family: var(--font-data); font-size: var(--size-small); }


/* ═══════════════════════════════════════════════════════════
   CARDS
   Rest: --r-surface. Active: --r-technical.
   ═══════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    padding: var(--s6);
    transition: all var(--t-med) var(--fluid);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--fluid);
}
.card:hover, .card.touched {
    border-radius: var(--r-technical);
    border-color: var(--accent-25);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.card:hover::before, .card.touched::before { transform: scaleX(1); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s5);
}
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s4);
}
.card-icon {
    width: 36px; height: 36px;
    border-radius: var(--r-round);
    background: var(--accent-12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all var(--t-med) var(--fluid);
}
.card:hover .card-icon, .card.touched .card-icon {
    border-radius: var(--r-technical);
    background: var(--accent);
    color: var(--accent-ink);
}
.card-title {
    font-size: var(--size-heading);
    font-weight: 500;
    margin-bottom: var(--s2);
}
.card-body {
    color: var(--ink-60);
    line-height: var(--lh-compact);
}
.card-foot {
    margin-top: var(--s4);
    padding-top: var(--s4);
    border-top: 1px solid var(--ink-06);
    display: flex;
    gap: var(--s4);
}


/* ═══════════════════════════════════════════════════════════
   BADGES — non-interactive signal molecules
   ═══════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-tight);
    padding: var(--s1) var(--s3);
    border-radius: var(--r-surface);
    border: 1px solid var(--ink-06);
    color: var(--ink-60);
    transition: border-radius var(--t-med) var(--fluid);
}
.badge:hover { border-radius: var(--r-technical); }
.badge-dot {
    width: 5px; height: 5px;
    border-radius: var(--r-round);
    background: currentColor;
}
.badge--pos  { color: var(--pos); border-color: var(--pos-25); }
.badge--warn { color: var(--warn); border-color: var(--warn-25); }
.badge--neg  { color: var(--neg); border-color: var(--neg-25); }
.badge--info { color: var(--info); border-color: var(--info-25); }
.badge--accent { color: var(--accent); border-color: var(--accent-25); background: var(--accent-06); }
.badge--neutral { color: var(--ink-60); border-color: var(--ink-06); }


/* ═══════════════════════════════════════════════════════════
   TABS — Container = surface, Inner = inset radius.
   Active morphs SUBSTANCE (bg, shadow), not shape.
   ═══════════════════════════════════════════════════════════ */
.tabs {
    display: inline-flex;
    gap: var(--s1);
    background: var(--ink-06);
    border-radius: var(--r-surface);
    padding: var(--s1);
}
.tab {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    padding: var(--s2) var(--s5);
    border-radius: 12px;
    color: var(--ink-25);
    background: transparent;
    border: none;
    transition: all var(--t-med) var(--fluid);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.tab:hover { color: var(--ink); }
.tab.on {
    background: var(--bg-elevated);
    color: var(--ink);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════════════════════════
   AVATARS
   ═══════════════════════════════════════════════════════════ */
.avatar {
    width: 36px; height: 36px;
    border-radius: var(--r-round);
    background: var(--accent-12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-data);
    font-size: var(--size-micro);
    font-weight: 500;
    flex-shrink: 0;
    transition: all var(--t-med) var(--fluid);
    border: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.avatar:hover, .avatar.touched {
    border-radius: var(--r-technical);
    border-color: var(--accent);
}
.avatar--sm { width: 26px; height: 26px; font-size: 0.6rem; }
.avatar--lg { width: var(--s7); height: var(--s7); font-size: var(--size-small); }


/* ═══════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════ */
.table-wrap {
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    background: var(--bg-elevated);
    overflow: hidden;
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
}
.data-table th {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink-25);
    text-align: left;
    padding: var(--s4) var(--s5);
    border-bottom: 1px solid var(--ink-06);
}
.data-table td {
    padding: var(--s3) var(--s5);
    border-bottom: 1px solid var(--ink-06);
    color: var(--ink-60);
    transition: color var(--t-fast);
}
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--accent-06); }
.data-table tbody tr:hover td { color: var(--ink); }
.data-table tbody tr:last-child td { border-bottom: none; }
.td-mono { font-family: var(--font-data); }
.td-strong { font-weight: 500; color: var(--ink); }


/* ═══════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════ */
.acc-item {
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    overflow: hidden;
    transition: all var(--t-med) var(--fluid);
}
.acc-item + .acc-item { margin-top: var(--s3); }
.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    background: var(--bg-elevated);
    border: none;
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 500;
    color: var(--ink);
    text-align: left;
    transition: background var(--t-fast);
    cursor: pointer;
}
.acc-trigger:hover { background: var(--ink-06); }
.acc-arrow {
    font-family: var(--font-data);
    font-size: var(--size-small);
    color: var(--ink-25);
    transition: all var(--t-med) var(--fluid);
}
.acc-item.open { border-color: var(--accent-25); border-radius: var(--r-technical); }
.acc-item.open .acc-arrow { transform: rotate(90deg); color: var(--accent); }
.acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-med) var(--fluid);
}
.acc-item.open .acc-content { max-height: 320px; }
.acc-body {
    padding: 0 var(--s5) var(--s5);
    color: var(--ink-60);
    line-height: var(--lh-compact);
}


/* ═══════════════════════════════════════════════════════════
   PROGRESS & LOADING
   ═══════════════════════════════════════════════════════════ */
.progress {
    height: 3px;
    background: var(--ink-06);
    border-radius: var(--r-surface);
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--r-surface);
    transition: width 0.8s var(--fluid);
}
.skel {
    background: linear-gradient(90deg, var(--ink-06) 25%, var(--bg-sunken) 50%, var(--ink-06) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s ease infinite;
    border-radius: var(--r-surface);
}
.skel-line { height: var(--s3); margin-bottom: var(--s3); }
.skel-line:last-child { width: 55%; }
.skel-circle { width: 36px; height: 36px; border-radius: var(--r-round); }
@keyframes skel-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.spin {
    width: 20px; height: 20px;
    border: 2px solid var(--ink-06);
    border-top-color: var(--accent);
    border-radius: var(--r-round);
    animation: spin 0.7s linear infinite;
}
.spin--lg { width: var(--s6); height: var(--s6); border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-veil {
    position: fixed; inset: 0;
    background: rgba(8, 8, 10, 0.25);
    backdrop-filter: blur(14px);
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
}
.modal-veil.open { opacity: 1; pointer-events: all; }
.modal-box {
    background: var(--bg-elevated);
    border: 1px solid var(--ink-06);
    border-radius: var(--r-surface);
    padding: var(--s7);
    max-width: 480px;
    width: 90%;
    transform: scale(0.88) translateY(24px);
    transition: all var(--t-med) var(--snap);
}
.modal-veil.open .modal-box {
    transform: scale(1) translateY(0);
    border-radius: var(--r-surface);
}
.modal-title {
    font-size: var(--size-heading);
    font-weight: 500;
    margin-bottom: var(--s3);
}
.modal-body {
    color: var(--ink-60);
    line-height: var(--lh-compact);
    margin-bottom: var(--s6);
}
.modal-actions { display: flex; gap: var(--s3); justify-content: flex-end; }


/* ═══════════════════════════════════════════════════════════
   TOASTS
   Enter organic, settle technical. The morph IS the notification.
   ═══════════════════════════════════════════════════════════ */
.toast-tray {
    position: fixed;
    bottom: var(--s6); right: var(--s6);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.toast {
    font-family: var(--font-data);
    font-size: var(--size-small);
    padding: var(--s4) var(--s5);
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--r-surface);
    display: flex;
    align-items: center;
    gap: var(--s3);
    box-shadow: var(--shadow-lg);
    animation: toast-enter 0.5s var(--snap) forwards;
    max-width: 380px;
}
.toast--pos  { background: var(--pos); color: var(--accent-ink); }
.toast--warn { background: var(--warn); color: var(--accent-ink); }
.toast--neg  { background: var(--neg); color: var(--accent-ink); }
.toast.out { animation: toast-leave 0.35s var(--fluid) forwards; }
@keyframes toast-enter {
    from { opacity: 0; transform: translateX(80px) scale(0.85); border-radius: var(--r-surface); }
    to   { opacity: 1; transform: translateX(0) scale(1); border-radius: var(--r-technical); }
}
@keyframes toast-leave { to { opacity: 0; transform: translateX(80px) scale(0.9); } }


/* ═══════════════════════════════════════════════════════════
   AMBIENT FIELD — Drifting orbs. Decorative.
   ═══════════════════════════════════════════════════════════ */
.ambient {
    position: fixed; inset: 0;
    z-index: -1; pointer-events: none;
    overflow: hidden;
}
.ambient .orb {
    position: absolute;
    border-radius: var(--r-round);
    filter: blur(100px);
    will-change: transform;
}
.ambient .orb:nth-child(1) {
    width: 50vmax; height: 50vmax;
    top: -15%; right: -10%;
    background: var(--accent-06);
    animation: orbit 30s var(--drift) infinite alternate;
}
.ambient .orb:nth-child(2) {
    width: 35vmax; height: 35vmax;
    bottom: -10%; left: 5%;
    background: rgba(0, 200, 83, 0.03);
    animation: orbit 40s var(--drift) infinite alternate-reverse;
}
@keyframes orbit {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate(-30px, 20px) rotate(5deg) scale(1.05); }
    100% { transform: translate(15px, -25px) rotate(-3deg) scale(0.97); }
}


/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL
   ═══════════════════════════════════════════════════════════ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-slow) var(--fluid), transform var(--t-slow) var(--fluid);
}
.reveal.awake { opacity: 1; transform: translateY(0); }

.stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-med) var(--fluid), transform var(--t-med) var(--fluid);
}
.stagger.awake > *:nth-child(1) { transition-delay: 0.04s; }
.stagger.awake > *:nth-child(2) { transition-delay: 0.08s; }
.stagger.awake > *:nth-child(3) { transition-delay: 0.12s; }
.stagger.awake > *:nth-child(4) { transition-delay: 0.16s; }
.stagger.awake > *:nth-child(5) { transition-delay: 0.20s; }
.stagger.awake > *:nth-child(6) { transition-delay: 0.24s; }
.stagger.awake > *:nth-child(7) { transition-delay: 0.28s; }
.stagger.awake > *:nth-child(8) { transition-delay: 0.32s; }
.stagger.awake > * { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-12); border-radius: var(--r-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-25); }