/* ============================================================
* GUARDIAN — stations design system (Cowork starter, scoped)
* Source: Cowork 2026-05-17 brief package
* Filed by: Vanguard 2026-05-17
*
* MERGE STRATEGY (per guardian_design_system_NOTES.md Option A):
* - All variable declarations scoped to .g-scope (avoids :root
* collision with existing guardian.css --gold-bright etc).
* - Global resets * {...} and html/body styles stripped (existing
* guardian.css owns those for auth/standby/dashboard pages).
* - @font-face kept as-is; browser falls back to system fonts when
* the WOFF2 files don't yet exist at /fonts/.
*
* Usage in station HTML:
* (existing — auth/standby surfaces)
* (this — new station surfaces)
*
*
*
*
* Companion docs:
* guardian_spec.md (v1.0)
* guardian_spec_v1_1.md (v1.1 amendments)
* guardian_build_brief.md (build sequence)
* guardian_api_contract.md (JSON shapes)
* ============================================================ */
/* ------------------------------------------------------------
* Fonts. Self-hosted only — CSP blocks Google Fonts CDN.
* WOFF2 files at /fonts/. Browser falls back to system
* fonts when missing (Cinzel→serif, Share Tech Mono→monospace,
* Cormorant Garamond→serif italic).
* ------------------------------------------------------------ */
@font-face {
font-family: 'Cinzel';
src: url('/fonts/Cinzel-Regular.woff2') format('woff2');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Cinzel';
src: url('/fonts/Cinzel-Bold.woff2') format('woff2');
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: 'Share Tech Mono';
src: url('/fonts/ShareTechMono-Regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Cormorant Garamond';
src: url('/fonts/CormorantGaramond-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* ------------------------------------------------------------
* Design tokens — SCOPED to .g-scope (not :root)
* to avoid collision with existing guardian.css --gold-bright.
* Station HTML wraps content in .
* ------------------------------------------------------------ */
.g-scope {
/* Void blacks — for backgrounds */
--void-1: #04161e;
--void-2: #020b14;
--void-3: #01060c;
--void-4: #000308;
--void-radial: radial-gradient(ellipse 75% 50% at 50% 35%,
var(--void-1) 0%,
var(--void-2) 38%,
var(--void-3) 72%,
var(--void-4) 100%);
/* Teal — primary system pulse, 95% of UI */
--teal: #1ab8a4;
--teal-bright: #3aecd0;
--teal-pale: #7afbe0;
--teal-text-bright: #bdfff0;
--teal-dim: #0c6450;
/* Magenta — Sentinel-raised escalations, alarms */
--magenta: #ff3580;
--magenta-bright: #ff7a98;
--magenta-text: #ffc8dc;
--magenta-text-bright: #ffe0ec;
--magenta-dim: #a02060;
--magenta-meta: #bc7080;
--magenta-deep: #7a4858;
/* Gold — Invocations, commit seals, ornament */
--gold: #d4a000;
--gold-bright: #f0c440;
--gold-text: #ffe9a8;
--gold-muted: #a08440;
--gold-deep: #806000;
--gold-meta: #7a6020;
/* Bronze — Override commit seals only */
--bronze: #b87422;
--bronze-bright: #d29440;
--bronze-text: #f2c898;
--bronze-dim: #7a4810;
/* Blood — HALT only */
--blood: #ff2030;
--blood-bright: #ff5060;
--blood-text: #ff8090;
--blood-dim: #a01018;
--blood-meta: #a05868;
/* Greys for muted text */
--grey-1: #d6f5ee;
--grey-2: #7aa49b;
--grey-3: #6a9a8e;
--grey-4: #4a8a7e;
--grey-5: #5a7a72;
/* Borders (transparency over the void) */
--border-cyan-faint: rgba(26,184,164,.18);
--border-cyan-soft: rgba(26,184,164,.28);
--border-cyan: rgba(26,184,164,.45);
--border-cyan-strong: rgba(58,236,208,.7);
--border-magenta-soft: rgba(255,53,128,.35);
--border-magenta: rgba(255,53,128,.6);
--border-magenta-strong: rgba(255,53,128,.85);
--border-gold-soft: rgba(212,160,0,.35);
--border-gold: rgba(212,160,0,.6);
--border-gold-strong: rgba(212,160,0,.85);
--border-bronze: rgba(184,116,34,.6);
--border-blood: rgba(255,32,48,.7);
/* Typography */
--font-display: 'Cinzel', 'Trajan Pro', serif;
--font-mono: 'Share Tech Mono', monospace;
--font-prose: 'Cormorant Garamond', serif;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
/* Radii */
--radius-card: 2px;
--radius-button: 1px;
--radius-phone: 34px;
--radius-notch: 3px;
/* Shadows / glows */
--halo-teal-sm: 0 0 4px rgba(58,236,208,.5);
--halo-teal-md: 0 0 8px rgba(26,184,164,.7), 0 0 22px rgba(26,184,164,.4);
--halo-teal-lg: 0 0 2px #3aecd0, 0 0 8px rgba(26,184,164,.7), 0 0 22px rgba(26,184,164,.45), 0 0 50px rgba(26,184,164,.22);
--halo-magenta-sm: 0 0 4px rgba(255,53,128,.5);
--halo-magenta-md: 0 0 8px rgba(255,53,128,.7), 0 0 22px rgba(255,53,128,.4);
--halo-gold-sm: 0 0 4px rgba(212,160,0,.5);
--halo-gold-md: 0 0 6px rgba(212,160,0,.6), 0 0 18px rgba(212,160,0,.3);
--halo-blood-sm: 0 0 4px rgba(255,32,48,.7);
}
/* ------------------------------------------------------------
* Backdrop — the void and the scanline overlay
* ------------------------------------------------------------ */
.g-void {
background: var(--void-radial);
}
.g-scan {
position: absolute;
inset: 0;
background: repeating-linear-gradient(180deg,
transparent 0,
transparent 3px,
rgba(26,184,164,.02) 3px,
rgba(26,184,164,.02) 4px);
pointer-events: none;
}
/* ------------------------------------------------------------
* Typography
* ------------------------------------------------------------ */
.g-cinzel { font-family: var(--font-display); font-weight: 500; }
.g-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: 8px; color: var(--teal-bright); text-shadow: var(--halo-teal-lg); line-height: 1; }
.g-wordmark-md { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: 5px; color: var(--teal-bright); text-shadow: var(--halo-teal-md); }
.g-wordmark-sm { font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: 4px; color: var(--teal-bright); text-shadow: var(--halo-teal-sm); }
.g-tag { font-family: var(--font-display); font-weight: 500; font-size: 9px; letter-spacing: 4px; color: var(--grey-3); text-transform: uppercase; }
.g-section { font-family: var(--font-display); font-weight: 500; font-size: 7.5px; letter-spacing: 3px; color: var(--grey-4); text-transform: uppercase; }
.g-label { font-family: var(--font-display); font-weight: 500; font-size: 7px; letter-spacing: 1.5px; color: var(--grey-4); }
.g-chip { font-family: var(--font-display); font-weight: 500; font-size: 8px; letter-spacing: 2px; }
.g-wordmark-magenta { color: var(--magenta-bright); text-shadow: 0 0 2px var(--magenta-bright), 0 0 8px rgba(255,53,128,.7), 0 0 22px rgba(255,53,128,.45), 0 0 50px rgba(255,53,128,.22); }
.g-mono { font-family: var(--font-mono); }
.g-data { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.5px; }
.g-data-sm { font-family: var(--font-mono); font-size: 7px; letter-spacing: 1px; color: var(--grey-4); }
.g-status { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1.5px; color: var(--grey-4); }
.g-prose { font-family: var(--font-prose); font-style: italic; font-size: 11px; line-height: 1.35; color: var(--grey-5); }
.g-prose-sm { font-family: var(--font-prose); font-style: italic; font-size: 9px; line-height: 1.3; color: var(--magenta-meta); }
.g-quote { font-family: var(--font-prose); font-style: italic; font-size: 11px; color: var(--grey-5); letter-spacing: 0.5px; line-height: 1.35; text-align: center; }
.g-sentinel-prose { font-family: var(--font-prose); font-style: italic; font-size: 10px; text-align: center; color: var(--magenta-text); line-height: 1.4; }
/* ------------------------------------------------------------
* Layout primitives
* ------------------------------------------------------------ */
.g-phone {
position: relative;
width: 392px;
border: 1.5px solid #1a3a3a;
border-radius: var(--radius-phone);
overflow: hidden;
background: var(--void-radial);
color: var(--grey-1);
font-family: var(--font-mono);
}
.g-phone-notch {
height: 24px;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 4px;
}
.g-phone-notch span {
width: 54px;
height: 5px;
background: #000;
border-radius: var(--radius-notch);
border: .5px solid #1a3a3a;
}
.g-phone-body {
position: relative;
padding: 14px 16px 20px;
}
.g-status-strip {
display: flex;
justify-content: space-between;
font-size: 8px;
letter-spacing: 1.5px;
color: var(--grey-4);
margin-bottom: 14px;
padding: 0 2px;
}
.g-status-strip.warn { color: var(--magenta-deep); }
.g-status-strip.warn .warn-text { color: var(--magenta-bright); }
.g-bcrumb {
display: flex;
justify-content: space-between;
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 3px;
color: var(--grey-3);
margin-bottom: 18px;
padding: 0 2px;
}
.g-bcrumb a { color: var(--teal-bright); text-decoration: none; opacity: 0.85; }
.g-rule {
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(212,160,0,.55) 22%,
rgba(212,160,0,.85) 50%,
rgba(212,160,0,.55) 78%,
transparent);
margin: 10px 22px 8px;
position: relative;
}
.g-rule::before, .g-rule::after {
content: '';
position: absolute;
top: -2px;
width: 5px;
height: 5px;
border: .5px solid var(--border-gold);
background: #000;
transform: rotate(45deg);
}
.g-rule::before { left: 18%; }
.g-rule::after { right: 18%; }
.g-divider {
display: flex;
align-items: center;
gap: 8px;
margin: 14px 4px 8px;
font-family: var(--font-display);
font-size: 7.5px;
letter-spacing: 3px;
color: var(--grey-4);
}
.g-divider .line {
flex: 1;
height: .5px;
background: var(--border-cyan-faint);
}
.g-divider.gold { color: var(--gold-muted); }
.g-divider.gold .line { background: var(--border-gold-soft); }
.g-divider.warn { color: var(--magenta-deep); }
.g-divider.warn .line { background: var(--border-magenta-soft); }
/* ------------------------------------------------------------
* Panels (containers — usually hold other things)
* ------------------------------------------------------------ */
.g-panel {
margin: 0 4px 14px;
padding: 10px 12px;
border-radius: var(--radius-card);
position: relative;
border: .5px solid var(--border-cyan-soft);
background: linear-gradient(180deg, rgba(26,184,164,.05), rgba(26,184,164,.01));
}
.g-panel.gold { border-color: var(--border-gold-soft); background: linear-gradient(180deg, rgba(212,160,0,.08), rgba(212,160,0,.015)); }
.g-panel.magenta { border-color: var(--border-magenta-soft); background: linear-gradient(180deg, rgba(255,53,128,.06), rgba(255,53,128,.015)); }
.g-panel.blood { border-color: var(--border-blood); background: linear-gradient(180deg, rgba(255,32,48,.15), rgba(255,32,48,.02)); }
.g-panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: .5px dashed var(--border-cyan-faint);
padding-bottom: 6px;
margin-bottom: 8px;
}
.g-panel-head .title { font-family: var(--font-display); font-size: 10px; letter-spacing: 3px; color: var(--grey-1); }
.g-panel-head .status { font-family: var(--font-display); font-size: 7.5px; letter-spacing: 2px; color: var(--teal-bright); display: flex; align-items: center; gap: 5px; }
/* ------------------------------------------------------------
* Cards (escalation/commit cards inside panels)
* ------------------------------------------------------------ */
.g-card {
padding: 9px 11px;
border-radius: var(--radius-card);
border: 1px solid;
position: relative;
}
.g-card.magenta {
border-color: var(--border-magenta);
background: linear-gradient(180deg, rgba(255,53,128,.18), rgba(255,53,128,.04));
box-shadow: inset 0 1px 0 rgba(255,120,170,.5), 0 0 14px rgba(255,53,128,.22);
}
.g-card.gold {
border-color: var(--border-gold-strong);
background: linear-gradient(180deg, rgba(212,160,0,.18), rgba(212,160,0,.04));
box-shadow: inset 0 1px 0 rgba(240,196,64,.5), 0 0 14px rgba(212,160,0,.25);
}
.g-card.bronze {
border-color: var(--border-bronze);
background: linear-gradient(180deg, rgba(184,116,34,.18), rgba(120,70,16,.04));
box-shadow: inset 0 1px 0 rgba(210,150,60,.5), 0 0 14px rgba(184,116,34,.22);
}
.g-card.blood {
border-color: var(--border-blood);
background: linear-gradient(180deg, rgba(255,32,48,.18), rgba(255,32,48,.04));
box-shadow: inset 0 1px 0 rgba(255,120,120,.5), 0 0 14px rgba(255,32,48,.28);
}
.g-card.cyan {
border-color: var(--border-cyan-strong);
background: linear-gradient(180deg, rgba(58,236,208,.14), rgba(58,236,208,.03));
box-shadow: inset 0 1px 0 rgba(74,230,207,.45);
}
.g-card.dimmed { opacity: 0.32; filter: blur(0.3px); }
/* ------------------------------------------------------------
* Wax seals
* ------------------------------------------------------------ */
.g-seal {
width: 18px;
height: 18px;
border-radius: 50%;
margin: 1px auto 5px;
}
.g-seal.magenta { background: radial-gradient(circle, var(--magenta), var(--magenta-dim)); border: .5px solid var(--magenta-bright); box-shadow: 0 0 6px rgba(255,53,128,.65); }
.g-seal.gold { background: radial-gradient(circle, var(--gold-bright), var(--gold-deep)); border: .5px solid var(--gold-bright); box-shadow: 0 0 8px rgba(212,160,0,.7); }
.g-seal.bronze { background: radial-gradient(circle, var(--bronze-bright), var(--bronze-dim)); border: .5px solid var(--bronze-bright); box-shadow: 0 0 6px rgba(184,116,34,.7); }
.g-seal.blood { background: radial-gradient(circle, var(--blood-bright), var(--blood-dim)); border: .5px solid var(--blood-text); box-shadow: 0 0 6px rgba(255,32,48,.8); }
.g-seal.cyan { background: radial-gradient(circle, var(--teal-bright), var(--teal-dim)); border: .5px solid var(--teal-bright); box-shadow: 0 0 6px rgba(58,236,208,.7); }
/* ------------------------------------------------------------
* Buttons
* ------------------------------------------------------------ */
.g-btn {
font-family: var(--font-display);
font-size: 7.5px;
letter-spacing: 2px;
padding: 5px 4px;
text-align: center;
border-radius: var(--radius-button);
border: .5px solid var(--border-magenta);
background: rgba(255,53,128,.1);
color: var(--magenta-text);
cursor: pointer;
transition: all .12s ease;
}
.g-btn:hover { background: rgba(255,53,128,.18); }
.g-btn.pressed,
.g-btn.primary {
border: .5px solid rgba(255,200,220,.95);
background: rgba(255,53,128,.35);
color: var(--magenta-text-bright);
box-shadow: 0 0 0 1px rgba(255,200,220,.55), 0 0 8px rgba(255,53,128,.7);
}
.g-btn-gold {
position: relative;
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 2.5px;
padding: 8px 6px;
text-align: center;
border-radius: var(--radius-button);
border: 1px solid var(--border-gold-strong);
background: linear-gradient(180deg, rgba(212,160,0,.14), rgba(212,160,0,.03));
color: var(--gold-text);
text-shadow: 0 0 4px rgba(212,160,0,.45);
box-shadow: inset 0 1px 0 rgba(240,196,64,.4), 0 0 12px rgba(212,160,0,.15);
cursor: pointer;
}
.g-btn-gold::before,
.g-btn-gold::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border: 1px solid var(--border-gold);
}
.g-btn-gold::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.g-btn-gold::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.g-btn-sentinel {
font-family: var(--font-display);
font-size: 6.5px;
letter-spacing: 1.5px;
padding: 6px 3px;
text-align: center;
border-radius: var(--radius-button);
border: .5px solid var(--border-magenta);
background: rgba(255,53,128,.08);
color: var(--magenta-text);
}
/* ------------------------------------------------------------
* Ornament — iron-cross brackets, hazard chevrons, tick rails
* ------------------------------------------------------------ */
.g-iron-cross {
position: relative;
}
.g-iron-cross::before,
.g-iron-cross::after {
content: '';
position: absolute;
width: 9px;
height: 9px;
border: 1px solid var(--border-gold);
}
.g-iron-cross::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.g-iron-cross::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.g-hazard {
height: 4px;
background: repeating-linear-gradient(135deg,
var(--blood) 0,
var(--blood) 4px,
#1a0408 4px,
#1a0408 8px);
opacity: 0.7;
}
.g-tick-rail {
position: absolute;
top: 4px;
bottom: 4px;
right: 0;
width: 6px;
background: repeating-linear-gradient(180deg,
transparent 0,
transparent 3px,
var(--gold) 3px,
var(--gold) 4px);
opacity: 0.4;
}
.g-roman {
font-family: var(--font-display);
font-size: 9px;
letter-spacing: 1.5px;
color: var(--gold-muted);
text-shadow: 0 0 4px rgba(212,160,0,.35);
}
.g-decree-stamp {
text-align: center;
font-family: var(--font-display);
font-size: 8px;
letter-spacing: 4px;
color: var(--gold);
text-shadow: 0 0 6px rgba(212,160,0,.45);
margin-top: 10px;
}
.g-decree-stamp::before { content: ' '; }
.g-decree-stamp::after { content: ' '; }
/* ------------------------------------------------------------
* Stack disc layout classes
* ------------------------------------------------------------ */
.g-stack-mini { width: 40px; height: 40px; display: inline-block; }
.g-stack-md { width: 120px; height: 120px; display: inline-block; }
.g-stack-lg { width: 240px; height: 240px; display: inline-block; }
.g-stack-cy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* ------------------------------------------------------------
* Animations — locked motion vocabulary
* ------------------------------------------------------------ */
@keyframes g-pmag {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes g-mhalo {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
}
@keyframes g-bord {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,53,128,.4), 0 0 8px rgba(255,53,128,.4); }
50% { box-shadow: 0 0 0 1px rgba(255,53,128,.7), 0 0 18px rgba(255,53,128,.7); }
}
@keyframes g-pcrit {
0%, 100% { box-shadow: inset 0 1px 0 rgba(255,120,170,.4), 0 0 10px rgba(255,53,128,.3); }
50% { box-shadow: inset 0 1px 0 rgba(255,120,170,.7), 0 0 24px rgba(255,53,128,.65); }
}
@keyframes g-halo-p {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.g-anim-pulse-magenta { animation: g-pmag 1.6s ease-in-out infinite; }
.g-anim-halo-pulse { animation: g-mhalo 2.4s ease-in-out infinite; }
.g-anim-border-pulse { animation: g-bord 2s ease-in-out infinite; }
.g-anim-critical { animation: g-pcrit 1.6s ease-in-out infinite; }
.g-anim-halo-soft { animation: g-halo-p 1.6s ease-in-out infinite; }
/* ------------------------------------------------------------
* Pulse dots (status indicators)
* ------------------------------------------------------------ */
.g-pulse-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal-bright);
box-shadow: 0 0 6px rgba(58,236,208,.85);
animation: g-halo-p 1.6s ease-in-out infinite;
}
.g-pulse-dot.magenta { background: var(--magenta); box-shadow: 0 0 6px rgba(255,53,128,.85); }
.g-pulse-dot.gold { background: var(--gold); box-shadow: 0 0 5px rgba(212,160,0,.7); animation: none; opacity: 0.6; }
.g-pulse-dot.blood { background: var(--blood); box-shadow: 0 0 6px rgba(255,32,48,.8); }
.g-pulse-dot.cyan { background: var(--teal-bright); box-shadow: 0 0 6px rgba(58,236,208,.85); }
.g-pulse-dot.steady { animation: none; opacity: 1; }
.g-engine-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}
.g-engine-dot.live { background: var(--teal-bright); box-shadow: 0 0 5px rgba(58,236,208,.85); }
.g-engine-dot.off { background: var(--blood); box-shadow: 0 0 4px rgba(255,32,48,.7); }
/* ------------------------------------------------------------
* Zone labels (regime / drawdown tier indicators)
* ------------------------------------------------------------ */
.g-zone {
font-family: var(--font-display);
font-size: 7px;
letter-spacing: 2px;
padding: 1px 5px;
border-radius: 1px;
border: .5px solid;
}
.g-zone.green { color: var(--teal-bright); border-color: rgba(58,236,208,.55); background: rgba(58,236,208,.08); }
.g-zone.amber-green { color: #ffe9a0; border-color: rgba(166,230,194,.4); background: rgba(166,230,194,.05); }
.g-zone.amber { color: var(--gold); border-color: rgba(212,160,0,.5); background: rgba(212,160,0,.06); }
.g-zone.amber-red { color: #e08840; border-color: rgba(224,136,64,.5); background: rgba(224,136,64,.06); }
.g-zone.red { color: var(--magenta-bright); border-color: var(--border-magenta); background: rgba(255,53,128,.12); }
/* ------------------------------------------------------------
* Aquila (ghosted eagle behind BRIDGE header)
* ------------------------------------------------------------ */
.g-aquila {
position: absolute;
top: 36px;
left: 50%;
transform: translateX(-50%);
opacity: 0.08;
width: 78%;
pointer-events: none;
}
.g-aquila g { fill: var(--teal-bright); }
.g-aquila.warn { opacity: 0.12; }
.g-aquila.warn g { fill: var(--magenta); }
.g-aquila.halt g { fill: var(--blood); }
/* ------------------------------------------------------------
* Footer (status bar at bottom of each station)
* ------------------------------------------------------------ */
.g-foot {
margin-top: 18px;
padding: 0 6px;
}
.g-foot-bar {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 8px;
letter-spacing: 2px;
color: var(--grey-4);
padding-top: 10px;
border-top: .5px solid var(--border-cyan-faint);
}
/* ------------------------------------------------------------
* Halt slider (Extremis surface, bottom of WATCH)
* ------------------------------------------------------------ */
.g-halt {
position: relative;
margin: 0 4px 8px;
padding: 13px 12px 12px;
border: 1.5px solid var(--border-blood);
background: linear-gradient(180deg, rgba(255,32,48,.18), rgba(255,32,48,.02));
box-shadow: inset 0 1px 0 rgba(255,120,120,.45), 0 0 16px rgba(255,32,48,.22);
border-radius: var(--radius-card);
}
.g-halt-label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 4px;
color: var(--blood-text);
text-shadow: 0 0 6px rgba(255,32,48,.7);
text-align: center;
margin: 6px 0 4px;
}
.g-halt-quote {
font-family: var(--font-prose);
font-style: italic;
font-size: 9.5px;
color: #ffb0b8;
text-align: center;
letter-spacing: 0.5px;
margin-bottom: 9px;
line-height: 1.3;
}
.g-halt-grip {
margin: 0 auto;
width: 86%;
height: 32px;
border: 1px solid rgba(255,32,48,.65);
border-radius: 1px;
background: linear-gradient(90deg, rgba(255,32,48,.05) 0%, rgba(255,32,48,.18) 100%);
position: relative;
display: flex;
align-items: center;
}
.g-halt-knob {
width: 26px;
height: 24px;
background: linear-gradient(180deg, var(--blood-bright), var(--blood-dim));
border: .5px solid var(--blood-text);
box-shadow: 0 0 8px rgba(255,32,48,.7);
margin-left: 4px;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 9px;
color: #fff;
letter-spacing: 1px;
}
/* ------------------------------------------------------------
* Stack disc SVG defs — paste this into a hidden