/* compoundcoast — app.css * Ported from the approved redesign mockup (cc-redesign-mockup.html). * * Visual system: light-default, cool off-white ground with a deep-evergreen * accent (#0b7a54), a single lime signal, and coral for the downside. Layout * paradigm: a sticky, backdrop-blurred top bar + a centered ~760px focus * column (the earlier left-rail app-shell is retired). Numbers are always * tabular monospace; whitespace is generous (density down, textbook-wall out). * * Two token layers: * 1. The mockup tokens (--bg / --panel / --green / --lime / --coral …) are * the single source of truth, themed light (default) + dark via BOTH * prefers-color-scheme and :root[data-theme]. * 2. A --co-* ALIAS layer maps the legacy design-system variable names onto * the evergreen tokens so the existing calculator markup, render/*.py * output, and window.COAST charts recolor for free without renaming a * single class or CSS var. * * No external resources (CSP-safe): system-first font stacks, no @font-face, * no @import. No inline styles required by any component here. */ /* ============================================================= tokens */ :root { /* --- mockup ground + accents (light default) --- */ --bg:#eef1ec; --panel:#ffffff; --panel-2:#f6f8f4; --ink:#0e1a14; --muted:#5c6b62; --faint:#8a978e; --line:#e0e5dc; --line-2:#ebefe7; --green:#0b7a54; --green-deep:#0a5f43; --green-ink:#0c3d2c; --lime:#2bd489; --lime-soft:rgba(43,212,137,.16); --band:rgba(11,122,84,.13); --coral:#e2603f; --amber:#e0972a; --coral-soft:rgba(226,96,63,.14); --amber-soft:rgba(224,151,42,.16); --shadow:0 1px 2px rgba(16,40,28,.05),0 12px 30px -14px rgba(16,40,28,.18); --shadow-sm:0 1px 2px rgba(16,40,28,.06); --scrim:rgba(16,40,28,.42); /* --- geometry --- */ --r:12px; --r-sm:9px; --r-pill:999px; --maxw:760px; /* --- type --- */ --sans:"Inter var","Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --mono:"SF Mono","JetBrains Mono","Roboto Mono",ui-monospace,Menlo,Consolas,monospace; /* --- motion --- */ --co-t:160ms cubic-bezier(.4,0,.2,1); color-scheme: light; } /* ---- legacy --co-* aliases (map onto the evergreen tokens above) ---- */ :root { --co-canvas:var(--bg); --co-surface:var(--panel); --co-surface-2:var(--panel-2); --co-inset:var(--panel-2); --co-hairline:var(--line); --co-ink:var(--ink); --co-heading:var(--ink); --co-muted:var(--muted); --co-faint:var(--faint); --co-link:var(--green); --co-link-hover:var(--green-deep); --co-indigo:var(--green); --co-indigo-deep:var(--green); --co-indigo-hover:var(--green-deep); --co-aqua:var(--green); --co-mint:var(--lime); --co-coral:var(--coral); --co-amber:var(--amber); --co-violet:var(--green-deep); --co-focus:var(--green); --co-shadow:var(--shadow); --co-shadow-sm:var(--shadow-sm); --co-track:var(--line); --co-scrim:var(--scrim); --co-tint-indigo:var(--band); --co-tint-aqua:var(--lime-soft); --co-tint-mint:var(--lime-soft); --co-tint-coral:var(--coral-soft); --co-tint-amber:var(--amber-soft); --co-sans:var(--sans); --co-mono:var(--mono); --co-r-panel:var(--r); --co-r-pill:var(--r-pill); --co-r-input:var(--r-sm); --co-deck-max:var(--maxw); --co-gap:1.25rem; } /* ---- OS-dark (only when the viewer hasn't pinned a theme) ---- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg:#0a1310; --panel:#111d17; --panel-2:#0e1813; --ink:#e8f1ea; --muted:#93a49a; --faint:#63776b; --line:#1e2c24; --line-2:#182219; --green:#28c98c; --green-deep:#1fa976; --green-ink:#bdead6; --lime:#37e694; --lime-soft:rgba(55,230,148,.14); --band:rgba(40,201,140,.16); --coral:#ff7a5c; --amber:#f0ad3e; --coral-soft:rgba(255,122,92,.16); --amber-soft:rgba(240,173,62,.15); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.6); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --scrim:rgba(6,9,20,.6); } } /* ---- explicit viewer toggle ALWAYS wins (stamped on ) ---- */ :root[data-theme="light"] { color-scheme: light; --bg:#eef1ec; --panel:#ffffff; --panel-2:#f6f8f4; --ink:#0e1a14; --muted:#5c6b62; --faint:#8a978e; --line:#e0e5dc; --line-2:#ebefe7; --green:#0b7a54; --green-deep:#0a5f43; --green-ink:#0c3d2c; --lime:#2bd489; --lime-soft:rgba(43,212,137,.16); --band:rgba(11,122,84,.13); --coral:#e2603f; --amber:#e0972a; --coral-soft:rgba(226,96,63,.14); --amber-soft:rgba(224,151,42,.16); --shadow:0 1px 2px rgba(16,40,28,.05),0 12px 30px -14px rgba(16,40,28,.18); --shadow-sm:0 1px 2px rgba(16,40,28,.06); --scrim:rgba(16,40,28,.42); } :root[data-theme="dark"] { color-scheme: dark; --bg:#0a1310; --panel:#111d17; --panel-2:#0e1813; --ink:#e8f1ea; --muted:#93a49a; --faint:#63776b; --line:#1e2c24; --line-2:#182219; --green:#28c98c; --green-deep:#1fa976; --green-ink:#bdead6; --lime:#37e694; --lime-soft:rgba(55,230,148,.14); --band:rgba(40,201,140,.16); --coral:#ff7a5c; --amber:#f0ad3e; --coral-soft:rgba(255,122,92,.16); --amber-soft:rgba(240,173,62,.15); --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -18px rgba(0,0,0,.6); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --scrim:rgba(6,9,20,.6); } /* ============================================================== reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05","ss01"; } h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; font-weight: 720; } h1 { font-size: clamp(1.55rem, 4vw, 1.9rem); font-weight: 780; letter-spacing: -.03em; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; } p { margin: 0 0 1rem; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-deep); text-decoration: underline; } img, svg, canvas { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; } code, kbd, samp { font-family: var(--mono); } /* Every number / KPI / badge is tabular mono. */ .num, .mono, .tile-value, .readout-value, .rangebar-scale span, .result-num, .srcchip, .delta, .stat b, .formula, .stat, [data-num] { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -.01em; } :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--green); color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ==================================== layout: focus column + top bar */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } main.wrap { display: block; padding-top: .25rem; padding-bottom: 3.5rem; min-height: 60vh; /* Container context so calculator grids collapse to the focus column. */ container: wrapcol / inline-size; } /* ---- sticky top bar (backdrop blur) ---- */ .topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .topbar .wrap { display: flex; align-items: center; gap: 14px; height: 58px; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 680; letter-spacing: -.02em; font-size: 16.5px; color: var(--ink); } .brand:hover { text-decoration: none; color: var(--ink); } .brand .mk { width: 22px; height: 22px; flex: none; } .brand b { font-weight: 780; } .brand .cc-a { color: var(--ink); } .brand .cc-b { color: var(--green); } .spacer { flex: 1; } /* ---- top navigation (fed by the NAV_HTML token = the flattened stage rail) ---- */ .topnav, .topbar .railnav-nav { display: flex; align-items: center; gap: 2px; min-width: 0; } .topbar .rail-group { display: contents; } .topbar .rail-group-head, .topbar .rail-sub { display: none; } .topnav a, .topbar .rail-link { display: inline-flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 560; padding: 7px 11px; border-radius: var(--r-pill); white-space: nowrap; transition: color var(--co-t), background var(--co-t); } .topbar .rail-link .rail-ico { display: none; } .topnav a:hover, .topbar .rail-link:hover { color: var(--ink); background: var(--panel-2); text-decoration: none; } .topnav a.is-active, .topbar .rail-link.is-active { color: var(--ink); background: var(--panel-2); font-weight: 640; } /* ---- theme toggle button ---- */ .tgl { width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: color var(--co-t), border-color var(--co-t); } .tgl:hover { color: var(--ink); border-color: var(--faint); } .tgl svg { width: 16px; height: 16px; } .tgl .ico-sun { display: none; } .tgl .ico-moon { display: inline; } :root[data-theme="light"] .tgl .ico-sun, .tgl[data-theme-is="light"] .ico-sun { display: inline; } :root[data-theme="light"] .tgl .ico-moon, .tgl[data-theme-is="light"] .ico-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tgl .ico-sun { display: none; } :root:not([data-theme]) .tgl .ico-moon { display: inline; } } @media (prefers-color-scheme: light) { :root:not([data-theme]) .tgl .ico-sun { display: inline; } :root:not([data-theme]) .tgl .ico-moon { display: none; } } /* ---- wayfinding breadcrumb ---- */ .wayfind { padding: .9rem 0 0; font-size: .8rem; color: var(--muted); font-family: var(--mono); } .wayfind ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; } .wayfind a { color: var(--muted); } .wayfind a:hover { color: var(--green); } .wayfind li + li::before { content: "/"; margin-right: .35rem; color: var(--faint); } .wayfind [aria-current="page"] { color: var(--ink); } /* ---- context masthead (page title + sub + source/review meta) ---- */ .mast { margin: 1.4rem 0 1.6rem; } .mast-title { margin: .55rem 0 .5rem; } .mast-sub { color: var(--muted); max-width: 44rem; margin: 0 0 .85rem; font-size: 1.02rem; } .mast-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* ============================= mockup: subject-forward ticker header */ .tick { padding: 1.6rem 0 .4rem; } .tick-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .tick-badge { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(150deg, var(--green), var(--green-deep)); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .01em; box-shadow: var(--shadow-sm); font-family: var(--mono); } .tick-name h1 { font-size: clamp(23px, 4.4vw, 30px); line-height: 1.08; } .tick-name p { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; } .tick-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; } .stat b { color: var(--ink); font-weight: 640; font-size: 13.5px; } .stat.src { color: var(--faint); } .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; } .chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--mono); letter-spacing: .01em; transition: .12s; } .chip:hover { border-color: var(--green); color: var(--ink); } .chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; } .chip small { opacity: .7; font-family: var(--sans); font-weight: 500; margin-left: 5px; } /* ===================================================== cards & panels */ .card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); } .panel { padding: 1.25rem 1.35rem; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .9rem; } .panel-head h2, .panel-head h3 { margin: 0; } .panel-note { font-size: .85rem; color: var(--muted); } /* deck stage heading (calculator hub, grouped by pillar) */ .deck-stage { margin: 1.8rem 0 .3rem; font-size: 1.15rem; } /* 12-col grid utility */ .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--co-gap); } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; } /* Within the ~760px focus column, asymmetric splits stack and card decks * go two-up. Container query first (accurate), viewport fallback after. */ @container wrapcol (max-width: 760px) { .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; } .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; } } @media (max-width: 820px) { .col-3 { grid-column: span 6; } .col-4 { grid-column: span 6; } .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; } } @media (max-width: 460px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .col-3, .col-4 { grid-column: span 6; } } /* panel links (deck cards) */ a.panel { display: block; color: inherit; transition: border-color var(--co-t), box-shadow var(--co-t), transform var(--co-t); } a.panel:hover { text-decoration: none; border-color: var(--green); box-shadow: var(--shadow); transform: translateY(-1px); } a.panel h3 { margin: .5rem 0 .35rem; } a.panel.is-current { border-color: var(--green); } /* ---- KPI stat tile ---- */ .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; } .tile-label { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } .tile-value { font-size: 1.9rem; font-weight: 720; line-height: 1.05; color: var(--ink); letter-spacing: -.02em; } .tile-value.pos { color: var(--green); } .tile-value.neg { color: var(--coral); } .tile-foot { font-size: .78rem; color: var(--muted); } /* ===================================================== RESULT hero */ .result { padding: 1.4rem 1.4rem .5rem; overflow: hidden; position: relative; } .result-eyebrow { font-size: 12.5px; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .result-num { font-weight: 720; font-size: clamp(42px, 10vw, 64px); line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 8px 0 6px; } .result-num .cur { color: var(--faint); font-size: .5em; vertical-align: .28em; font-weight: 600; margin-right: .06em; } .result-sub { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; color: var(--muted); font-size: 14.5px; } .result-sub b { color: var(--ink); font-family: var(--mono); font-weight: 640; } /* delta chip — base is the lime "up" signal; up/down/flat modifiers recolor */ .delta { display: inline-flex; align-items: center; gap: 5px; font-weight: 660; font-size: 14px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--lime-soft); color: var(--green-deep); border: 1px solid transparent; align-self: flex-start; } :root[data-theme="dark"] .delta { color: var(--lime); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .delta { color: var(--lime); } } .delta.up { color: var(--green-deep); background: var(--lime-soft); border-color: color-mix(in srgb, var(--lime) 40%, transparent); } .delta.down { color: var(--coral); background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 35%, transparent); } .delta.flat { color: var(--muted); background: var(--panel-2); } .delta .arrow { font-family: var(--mono); } :root[data-theme="dark"] .delta.up { color: var(--lime); } /* ============================================ mockup growth area chart */ .chartwrap { margin: 18px -1.4rem 0; padding: 0; } svg.chart { display: block; width: 100%; height: auto; } .legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 1.4rem 4px; font-size: 12.5px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .swatch { width: 22px; height: 9px; border-radius: 3px; flex: none; } .sw-med { background: var(--green); } .sw-band { background: var(--band); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .sw-inc { width: 22px; height: 0; border-top: 2.5px dashed var(--amber); } .takeaway { margin: 14px 1.4rem 20px; padding: 14px 16px; background: var(--panel-2); border-radius: var(--r-sm); border-left: 3px solid var(--green); font-size: 15px; line-height: 1.5; } .takeaway b { font-family: var(--mono); color: var(--ink); } /* =============================== percentile range bar (legacy figure) */ .rangebar { margin: .5rem 0 .25rem; } .rangebar-track { position: relative; height: 12px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--coral-soft) 0%, var(--line) 28%, var(--line) 72%, var(--lime-soft) 100%); border: 1px solid var(--line); } .rangebar-band { position: absolute; top: -1px; bottom: -1px; background: var(--band); border: 1px solid color-mix(in srgb, var(--green) 45%, transparent); border-radius: 6px; } .rangebar-mark { position: absolute; top: 50%; width: 3px; height: 20px; transform: translate(-50%, -50%); border-radius: 2px; } .rangebar-mark.p5 { background: var(--coral); } .rangebar-mark.median { background: var(--green); width: 4px; height: 24px; } .rangebar-mark.p95 { background: var(--lime); } .rangebar-mark::after { content: attr(data-label); position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .68rem; white-space: nowrap; color: var(--muted); } .rangebar-mark.median::after { color: var(--ink); } .rangebar-scale { display: flex; justify-content: space-between; margin-top: 2.2rem; font-family: var(--mono); font-size: .7rem; color: var(--faint); } .rangebar-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; font-size: .74rem; color: var(--muted); } .rangebar-legend span { display: inline-flex; align-items: center; gap: .35rem; } .rangebar-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .rangebar-legend .k-p5 { background: var(--coral); } .rangebar-legend .k-med { background: var(--green); } .rangebar-legend .k-p95 { background: var(--lime); } .rangebar-legend .k-band { background: var(--band); border: 1px solid color-mix(in srgb, var(--green) 40%, transparent); } /* ============================== distribution / generic SVG charts */ .chartbox { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .chartbox svg { display: block; max-width: 100%; height: auto; } .chart-mount { min-height: 0; } .chart-cap { font-size: .78rem; color: var(--muted); margin-top: .5rem; } .chart-axis { stroke: var(--line); } .chart-grid { stroke: var(--line); stroke-opacity: .7; } .chart-label { fill: var(--muted); font-family: var(--mono); font-size: 10px; } .chart-s1 { fill: var(--green); stroke: var(--green); } .chart-s2 { fill: var(--green); stroke: var(--green); } .chart-s3 { fill: var(--lime); stroke: var(--lime); } .spark { display: inline-block; vertical-align: middle; height: 1.1em; } .spark path { fill: none; stroke: var(--green); stroke-width: 1.5; } /* ===================================== calculator console (inputs) */ /* legacy: stacked field list inside a panel */ .console { display: flex; flex-direction: column; gap: 1.1rem; } /* mockup: 2-col field grid inside a single card */ .console-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } @container wrapcol (max-width: 520px) { .console-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .console-grid { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: .4rem; } .field.wide { grid-column: 1 / -1; } .field label, .field-label { font-size: 12.5px; font-weight: 640; color: var(--muted); letter-spacing: .02em; } .field > label { display: flex; justify-content: space-between; align-items: baseline; } .field-label { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; } .field label .v { font-family: var(--mono); color: var(--green); font-size: 13.5px; font-weight: 660; } .field-hint { font-size: .78rem; color: var(--faint); } .input, .select, .textarea { font: inherit; font-family: var(--mono); font-variant-numeric: tabular-nums; padding: .6rem .7rem; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--lime-soft); } /* mockup money input (leading $) */ .money { position: relative; } .money input { width: 100%; font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px 11px 26px; outline: none; } .money::before { content: "$"; position: absolute; left: 12px; top: 11px; color: var(--faint); font-family: var(--mono); font-size: 16px; } .money input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--lime-soft); } /* range slider (mockup gradient fill via --fill) */ input[type=range], .range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; outline: none; background: linear-gradient(to right, var(--green) var(--fill, 50%), var(--line) var(--fill, 50%)); accent-color: var(--green); margin: 8px 0 2px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--green); box-shadow: var(--shadow-sm); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--green); cursor: pointer; } /* live readout */ .readout { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .7rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); } .readout-value { font-size: 1.05rem; font-weight: 700; color: var(--ink); } .readout-label { font-family: var(--mono); font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } /* ---- segmented control ---- */ /* Legacy markup: