/* Areté — application stylesheet. Split from arete-app.html. */ /* Tokens moved to css/tokens.css (Stage 0 item 1, 2026-09-14). They were declared here AND in arete-system.css, which overwrote 25 of them. */ html,body{ max-width:100%; overflow-x:hidden; } body{ background:var(--bg); } /* cold atmospheric trace — very subtle ice-cyan at top-left only (obsidian instrument aesthetic) */ .aurora{ position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.18; } .aurora span{ position:absolute; border-radius:50%; } .a1{ width:38vw; height:38vw; left:-8%; top:-16%; background:radial-gradient(circle,rgba(0,191,255,0.6),transparent 65%); animation:drift1 28s ease-in-out infinite; } .a2{ width:28vw; height:28vw; right:-6%; top:8%; background:radial-gradient(circle,rgba(102,217,255,0.4),transparent 68%); opacity:.6; animation:drift2 34s ease-in-out infinite; } .a3{ width:22vw; height:22vw; left:38%; bottom:-14%; background:radial-gradient(circle,rgba(0,191,255,0.35),transparent 70%); opacity:.4; animation:drift1 38s ease-in-out infinite reverse; } @keyframes drift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(4%,3%)} } @keyframes drift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-3%,5%)} } @media (prefers-reduced-motion: reduce){ .aurora span{ animation:none !important; } } /* scanline texture — the signature surgical layer over obsidian. Alive but barely: one 4px pattern-period of vertical drift over ~18s — a seamless, compositor-only (transform) loop; disabled cleanly under reduced-motion. */ body::after{ content:''; position:fixed; inset:-4px 0 0 0; z-index:1; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,191,255,0.018) 2px,rgba(0,191,255,0.018) 4px); opacity:1; } @media (prefers-reduced-motion: no-preference){ body::after, #landing::after{ animation:scanDrift 18s linear infinite; } } @keyframes scanDrift{ from{ transform:translateY(0) } to{ transform:translateY(4px) } } .glass{ background:rgba(11,15,26,0.66); -webkit-backdrop-filter:blur(18px) saturate(1.05); backdrop-filter:blur(18px) saturate(1.05); } /* INSTRUMENT card — crisp hairline, obsidian surface, cursor-tracked cyan highlight */ .card{ position:relative; border-radius:var(--card-radius); border:1px solid transparent; background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(0,191,255,calc(var(--glow,0)*0.6)), transparent 60%) padding-box, linear-gradient(rgba(17,17,20,0.82),rgba(10,10,10,0.88)) padding-box, linear-gradient(135deg,rgba(0,191,255,0.09),rgba(0,191,255,0.03) 55%) border-box; -webkit-backdrop-filter:blur(12px) saturate(1.06); backdrop-filter:blur(12px) saturate(1.06); will-change:transform; transform-style:preserve-3d; box-shadow:0 12px 32px -16px rgba(0,0,0,0.85); transition:box-shadow .3s, border-color .3s; } .card:hover{ box-shadow:0 18px 44px -20px rgba(0,0,0,0.92); } /* hero card — ice-cyan border trace */ .card-hero{ background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(0,191,255,calc(var(--glow,0)*0.5)), transparent 60%) padding-box, linear-gradient(rgba(17,17,20,0.82),rgba(10,10,10,0.88)) padding-box, linear-gradient(135deg,rgba(0,191,255,0.28),rgba(102,217,255,0.10) 55%,rgba(0,191,255,0.04)) border-box; box-shadow:0 20px 56px -24px rgba(0,0,0,0.92), 0 0 40px -18px rgba(0,191,255,0.12); } /* mobile: lighter blur for perf */ @media (max-width:768px){ .card,.card-hero,.glass{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .card,.card-hero{ background:linear-gradient(rgba(17,17,20,0.88),rgba(10,10,10,0.92)) padding-box, linear-gradient(135deg,rgba(0,191,255,0.08),rgba(0,191,255,0.02) 55%) border-box; } } .grad-text{ background:linear-gradient(135deg,#eef0f3 0%,#b4b4bc 52%,#66D9FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* entrance that never leaves content hidden (screenshot + reduced-motion safe) */ /* view-section entrances are handled by GSAP (setView); CSS fallback keeps content visible */ .nav-item{ border:1px solid transparent; color:#8a8a94; position:relative; transition:.2s cubic-bezier(.22,1,.36,1); } .nav-item:hover{ background:rgba(0,191,255,0.04); color:#eef0f3; } /* WHERE YOU ARE — the current section reads cyan (the instrument accent), unmistakable */ .nav-item.active{ background:linear-gradient(90deg,rgba(0,191,255,0.16),rgba(0,191,255,0.03)); color:var(--ice); border-color:rgba(0,191,255,0.30); } .nav-item.active svg{ color:var(--ice); } .nav-item.active::before{ content:''; position:absolute; left:-4px; top:50%; transform:translateY(-50%); width:2.5px; height:17px; border-radius:2px; background:linear-gradient(#7fe3ff,#00BFFF); box-shadow:0 0 10px rgba(0,191,255,0.7); } /* PAGE TITLE — a distinct crisp platinum, cool-edged; not the body silver, not the nav cyan */ #page-title{ background:linear-gradient(118deg,#f6f9ff 0%,#dfeafc 46%,#a9cdea 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } html[data-theme="light"] #page-title{ background:linear-gradient(118deg,#0d1626 0%,#233450 52%,#1a6f9e 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; } /* IA — grouped nav: tracked-caps hairline section labels (instrument register, not chrome) */ .nav-group-label{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:600; letter-spacing:.04em; color:#4e4e58; padding:0 4px 0 12px; margin:8px 0 3px; user-select:none; } .nav-group-label::after{ content:''; flex:1 1 0; height:1px; background:linear-gradient(90deg,rgba(0,191,255,0.09),rgba(255,255,255,0)); } .nav-group:first-child .nav-group-label{ margin-top:2px; } #sidebar nav{ scrollbar-width:thin; } #sidebar nav::-webkit-scrollbar{ width:4px; } input[type=range]{-webkit-appearance:none;height:4px;border-radius:0;background:rgba(0,191,255,0.08)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:2px;background:#00BFFF;border:1px solid rgba(0,0,0,0.4);cursor:pointer;box-shadow:0 0 10px rgba(0,191,255,0.4)} input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:2px;background:#00BFFF;border:1px solid rgba(0,0,0,0.4);cursor:pointer;box-shadow:0 0 10px rgba(0,191,255,0.4)} input[type=range]::-moz-range-track{height:4px;background:rgba(0,191,255,0.08);border:none} ::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(0,191,255,0.08);border-radius:8px} .pill{ display:inline-flex;align-items:center;gap:6px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border:1px solid; } #ob-optA svg,#ob-optB svg{ width:100%; height:100%; display:block; } #sig-fns svg{ width:100%; height:100%; display:block; } #ob-anchor-grid svg,#ob-arbit-grid svg{ width:100%; height:auto; display:block; } .ob-cell{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:8%; border-radius:4px; border:1px solid rgba(0,191,255,0.06); background:rgba(0,191,255,0.025); cursor:pointer; transition:border-color .18s,transform .15s,box-shadow .18s,background .18s; } .ob-cell:hover{ border-color:rgba(0,191,255,0.4); transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,0.5); } .ob-cell.sel{ border-color:#00BFFF; background:rgba(0,191,255,0.06); box-shadow:0 0 18px rgba(0,191,255,0.14); } /* clinical reading — mono body text with precise line cadence */ .read-prose{ font-family:inherit; font-size:14.5px; line-height:1.72; letter-spacing:.01px; color:#b4b4bc; } .read-prose b,.read-prose em{ color:#eef0f3; } .read-prose{ max-width:64ch; } .deep-firstpara::first-letter{ font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:3.2em; line-height:.8; float:left; padding:.06em .12em 0 0; color:#00BFFF; font-weight:200; letter-spacing:-.03em; } /* ultra-thin display type — weight 200-300 editorial sans for large display numbers/headlines */ .serif-display{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',-apple-system,sans-serif !important; font-weight:200; letter-spacing:-.03em; } /* Landing hero headline. Sizing lives in CSS (NOT inline) because the GSAP entrance (gsap.from('#landing .relative.z-10 > *', {clearProps:'all'})) strips inline styles off the h1 after animating, which would otherwise collapse it to the 16px fallback. A stylesheet rule survives clearProps → the headline stays responsive & hero-scale. */ /* ── TYPE SYSTEM · tier-1 label: the instrument overline — heavy mono uppercase tracking ── text-decoration:none !important neutralizes Tailwind's runtime `overline` utility (same class name, injected later) which otherwise draws a stray line above every label. */ /* ── UNIFIED TYPE SYSTEM — one voice across every section ── Prose / reads / titles = Inter (the base); labels / eyebrows / data = monospace (the instrument accent). This removes the section-to-section font jump (some reads were mono, some Inter) while keeping the terminal character on the structural labels. */ html, body{ font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",-apple-system,"Helvetica Neue",sans-serif; } .overline, .brief-section-head, .brief-dateline-date, .brief-dateline-op, .brief-empty-overline, .nav-group-label, .proof-eyebrow, .proof-exhibit-head{ font-family:"Manrope",system-ui,sans-serif; } .overline{ font-size:12px; font-weight:500; letter-spacing:.02em; text-transform:none; color:var(--svg-faint); overflow-wrap:anywhere; text-decoration:none !important; } /* signature detail: card section headers carry a precise hairline tick — unmistakably Areté */ h2.overline::before{ display:none; } /* cold hairline rule — replacing gold with surgical silver */ .gold-rule{ height:1px; background:linear-gradient(90deg,transparent,rgba(0,191,255,0.10),transparent); } /* reading-progress bar (Deep Read) */ #read-progress{ transition:opacity .3s; } #read-progress-bar{ box-shadow:0 0 8px rgba(0,191,255,.5); transition:width .1s linear; } /* ── Behavioral signal (passive interaction dynamics) — live-sampling pulse dot. Colors ride the theme vars (--svg-tick idle, --ok live) so both themes are covered. ── */ .bhv-dot{ position:relative; display:inline-block; width:5px; height:5px; border-radius:0; background:var(--svg-tick); transition:background .4s, box-shadow .4s; flex:none; } .bhv-dot.live{ background:var(--ice); box-shadow:0 0 6px var(--ice); } .bhv-dot.live::after{ content:''; position:absolute; inset:-4px; border-radius:0; border:1px solid var(--ice); opacity:.5; animation:bhvPulse 1.6s ease-out infinite; } @keyframes bhvPulse{ 0%{ transform:scale(.55); opacity:.7; } 100%{ transform:scale(1.55); opacity:0; } } @media (prefers-reduced-motion: reduce){ .bhv-dot.live::after{ animation:none; opacity:0; } } /* ── Blind-Spot Library accordion ── */ #bs-lib details{ align-self:start; } #bs-lib details>summary{ list-style:none; } #bs-lib details>summary::-webkit-details-marker{ display:none; } #bs-lib details>summary:hover{ background:rgba(127,127,127,0.05); } #bs-lib .bs-chev{ transition:transform .2s cubic-bezier(.22,1,.36,1); } #bs-lib details[open] .bs-chev{ transform:rotate(180deg); } /* ── Reasoning Faults — the fallacy & bias library (Bias Analysis) ── */ .ff-search{ width:100%; background:rgba(0,191,255,0.04); border:1px solid rgba(0,191,255,0.10); border-radius:6px; padding:9px 14px; font-family:inherit; font-size:13px; color:rgb(var(--ink)); outline:none; transition:border-color .18s; } .ff-search::placeholder{ color:var(--svg-faint); } .ff-search:focus{ border-color:rgba(0,191,255,0.45); } html[data-theme="light"] .ff-search{ background:rgba(15,20,28,0.04); border-color:rgba(15,20,28,0.12); } #ff-lib details{ align-self:start; border:1px solid rgba(0,191,255,0.08); background:rgba(0,191,255,0.02); border-radius:4px; overflow:hidden; transition:border-color .2s, box-shadow .3s; } #ff-lib details:hover{ border-color:rgba(0,191,255,0.22); } #ff-lib details[open]{ border-color:rgba(0,191,255,0.28); } #ff-lib details>summary{ list-style:none; cursor:pointer; padding:13px 16px; } #ff-lib details>summary::-webkit-details-marker{ display:none; } #ff-lib details>summary:hover{ background:rgba(127,127,127,0.05); } #ff-lib .ff-chev{ transition:transform .2s cubic-bezier(.22,1,.36,1); } #ff-lib details[open] .ff-chev{ transform:rotate(180deg); } html[data-theme="light"] #ff-lib details{ border-color:rgba(15,20,28,0.10); background:rgba(15,20,28,0.02); } html[data-theme="light"] #ff-lib details:hover{ border-color:rgba(17,98,137,0.30); } html[data-theme="light"] #ff-lib details[open]{ border-color:rgba(17,98,137,0.35); } .ff-tag{ display:inline-flex; align-items:center; flex:none; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; padding:2.5px 6px 2.5px 9px; border-radius:3px; border:1px solid rgba(0,191,255,0.30); background:rgba(0,191,255,0.07); color:var(--ice); } .ff-tag.ff-tag-bias{ border-color:rgba(102,217,255,0.30); background:rgba(102,217,255,0.07); color:#66D9FF; } html[data-theme="light"] .ff-tag{ border-color:rgba(17,98,137,0.30); background:rgba(17,98,137,0.06); color:#116289; } html[data-theme="light"] .ff-tag.ff-tag-bias{ border-color:rgba(71,105,134,0.32); background:rgba(71,105,134,0.07); color:#476986; } .ff-body{ padding:2px 16px 16px; border-top:1px solid rgba(0,191,255,0.06); } html[data-theme="light"] .ff-body{ border-top-color:rgba(15,20,28,0.08); } #ff-lib details.ff-flash{ border-color:rgba(0,191,255,0.65); box-shadow:0 0 0 1px rgba(0,191,255,0.35), 0 0 24px rgba(0,191,255,0.12); } html[data-theme="light"] #ff-lib details.ff-flash{ border-color:rgba(17,98,137,0.60); box-shadow:0 0 0 1px rgba(17,98,137,0.30); } .ff-watch-link{ background:none; border:none; border-bottom:1px dotted rgba(0,191,255,0.5); padding:0; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ice); -webkit-tap-highlight-color:transparent; } .ff-watch-link:hover{ border-bottom-style:solid; } html[data-theme="light"] .ff-watch-link{ color:#116289; border-bottom-color:rgba(17,98,137,0.5); } /* ── cognitive dial — a calibrated precision instrument ── */ .sigil{ position:relative; width:100%; height:100%; display:grid; place-items:center; } .sigil-aura{ position:absolute; inset:-8%; border-radius:50%; background:radial-gradient(circle, rgba(0,191,255,.20), rgba(102,217,255,.06) 50%, transparent 72%); filter:blur(12px); } .sigil-dial{ position:absolute; inset:0; width:100%; height:100%; } .sigil-core{ width:48%; height:48%; filter:drop-shadow(0 0 12px rgba(0,191,255,.45)); } .sigil-core svg{ width:100%; height:100%; display:block; } @media (prefers-reduced-motion: no-preference){ .sigil-spin{ transform-origin:50% 50%; animation:spin 60s linear infinite; } .sigil-aura{ animation:auraBreathe 5s ease-in-out infinite; } } @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes auraBreathe{ 0%,100%{ opacity:.72; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } } /* ── massive thin glowing instrument numbers (CIS + key metrics) ── */ .cis-live{ animation:cisBreathe 3.2s ease-in-out infinite; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:200; letter-spacing:-.04em; color:var(--ice); } @keyframes cisBreathe{ 0%,100%{ text-shadow:0 0 40px rgba(0,191,255,.18), 0 0 60px rgba(0,191,255,.08); } 50%{ text-shadow:0 0 60px rgba(0,191,255,.32), 0 0 100px rgba(0,191,255,.12); } } @media (prefers-reduced-motion: reduce){ .cis-live{ animation:none; text-shadow:0 0 60px rgba(0,191,255,.25); } } .live-wave{ overflow:hidden; border-radius:8px; } .live-wave svg{ display:block; width:200%; height:100%; } @media (prefers-reduced-motion: no-preference){ .live-wave path{ animation:waveMove 5.5s linear infinite; } .live-dot{ animation:liveDot 1.6s ease-in-out infinite; } } @keyframes waveMove{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes liveDot{ 0%,100%{ opacity:.45; transform:scale(1); } 50%{ opacity:1; transform:scale(1.6); } } /* premium stat tiles */ .stat-ico{ height:38px; width:38px; border-radius:12px; display:grid; place-items:center; color:rgb(var(--c)); background:rgba(var(--c),.13); border:1px solid rgba(var(--c),.28); } /* radar emblem — cold sonar sweep, ice-cyan signal trace */ .radar-emblem{ position:relative; width:100%; height:100%; } .radar-emblem svg{ position:relative; z-index:1; } .radar-emblem::before{ content:''; position:absolute; inset:9%; border-radius:50%; pointer-events:none; z-index:0; background:conic-gradient(from 0deg, transparent 0deg, rgba(0,191,255,0.14) 34deg, transparent 60deg); } @media (prefers-reduced-motion: no-preference){ .radar-emblem::before{ animation:radarSweep 8s linear infinite; } } @keyframes radarSweep{ to{ transform:rotate(360deg); } } /* reveal animations */ @keyframes pop{ 0%{opacity:0;transform:scale(.55)} 62%{opacity:1;transform:scale(1.07)} 100%{transform:scale(1)} } @keyframes fadeUp{ from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes glowpulse{ 0%,100%{filter:drop-shadow(0 0 8px rgba(0,191,255,.30))} 50%{filter:drop-shadow(0 0 20px rgba(0,191,255,.60))} } /* surgical whole-panel entrance — the view resolves into place on every navigation, like an instrument coming online. Container-level so it never fights .reveal-up. */ @keyframes viewSettle{ from{ opacity:0; transform:translateY(9px) scale(.994); } to{ opacity:1; transform:translateY(0) scale(1); } } @media (prefers-reduced-motion: no-preference){ .reveal-pop{ animation:pop 1s cubic-bezier(.22,1,.36,1) both; } .reveal-up{ animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both; } .reveal-up.d1{animation-delay:.07s}.reveal-up.d2{animation-delay:.14s}.reveal-up.d3{animation-delay:.21s}.reveal-up.d4{animation-delay:.28s}.reveal-up.d5{animation-delay:.35s} #gate > div:not(.hidden){ animation:fadeUp .45s cubic-bezier(.22,1,.36,1); } .pulse-glow{ animation:glowpulse 3.5s ease-in-out infinite; } .view.view-enter{ animation:viewSettle .42s cubic-bezier(.22,1,.36,1) both; } } /* landing */ /* primary CTA — ice-cyan instrument accent */ .landing-cta{ background:linear-gradient(160deg,#00BFFF 0%,#1e8ab8 100%); box-shadow:0 10px 32px -12px rgba(0,191,255,.30), inset 0 1px 0 rgba(0,191,255,.18); transition:transform .2s, box-shadow .2s; color:#03101f; font-weight:600; } .landing-cta:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(0,191,255,.45), inset 0 1px 0 rgba(255,255,255,.22); } /* landing kicker — flanked by hairline ticks, precision scale framing */ #landing .overline{ display:inline-flex; align-items:center; gap:14px; } #landing .overline::before,#landing .overline::after{ content:''; display:inline-block; width:28px; height:1px; flex:none; background:linear-gradient(90deg,transparent,rgba(0,191,255,.40)); } #landing .overline::after{ background:linear-gradient(90deg,rgba(0,191,255,.40),transparent); } html[data-theme="light"] #landing .overline::before{ background:linear-gradient(90deg,transparent,rgba(17,98,137,.5)); } html[data-theme="light"] #landing .overline::after{ background:linear-gradient(90deg,rgba(17,98,137,.5),transparent); } @media (max-width:480px){ #landing .overline::before,#landing .overline::after{ display:none; } } /* calibration option polish */ #ob-optA,#ob-optB{ transition:transform .18s, border-color .18s, box-shadow .25s, background .18s; } #ob-optA:hover,#ob-optB:hover{ transform:translateY(-3px) scale(1.01); box-shadow:0 14px 38px -16px rgba(0,191,255,.30); } /* ── tactile press feedback (mobile-first): options + primary CTAs answer to touch ── */ #ob-optA:active,#ob-optB:active{ transform:scale(.97); box-shadow:0 6px 18px -12px rgba(0,191,255,.28); } .ob-cell:active{ transform:scale(.96); } .landing-cta:active{ transform:translateY(0) scale(.98); box-shadow:0 8px 24px -14px rgba(47,123,234,.5); } #ob-bio-btn,#sim-run,#ob-proto-begin{ transition:transform .14s ease, opacity .2s ease; } #ob-bio-btn:active,#sim-run:active,#ob-proto-begin:active{ transform:scale(.98); } /* ── inline loading spinner ── */ .spin-ring{ display:inline-block; width:12px; height:12px; border-radius:50%; border:1.5px solid rgba(0,191,255,.22); border-top-color:#00BFFF; animation:spin .7s linear infinite; vertical-align:-2px; } @media (prefers-reduced-motion: reduce){ .spin-ring{ animation:none; } } /* ═══════════ PREMIUM LAYER ═══════════ */ html{ scroll-behavior:smooth; } ::selection{ background:rgba(0,191,255,0.24); color:#eef0f3; } /* obsidian instrument base — no warm gradients; the aurora provides the cold atmosphere */ body{ background:var(--bg); } /* crisp hairline edge-light on cards (obsidian version) */ .card{ box-shadow:0 1px 0 rgba(0,191,255,0.04) inset, 0 16px 48px -28px rgba(0,0,0,0.92); } .card::after{ content:''; position:absolute; top:1px; left:12px; right:12px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(0,191,255,0.10),transparent); } .card-hero{ box-shadow:0 1px 0 rgba(0,191,255,0.06) inset, 0 24px 60px -28px rgba(0,0,0,0.95), 0 0 48px -20px rgba(0,191,255,0.10); } /* type */ h1,h2,.text-headline-sm{ text-wrap:balance; } .grad-text{ background:linear-gradient(135deg,#eef0f3 0%,#b4b4bc 52%,#66D9FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .font-mono{ font-variant-numeric:tabular-nums; letter-spacing:-0.015em; } /* ── ONE ACCENT · primary CTA rides the ice-cyan ramp ── */ .bg-gradient-to-r.from-primary.to-indigo{ background-image:linear-gradient(160deg,#00BFFF 0%,#2a8fc2 100%); } html[data-theme="light"] .bg-gradient-to-r.from-primary.to-indigo{ background-image:linear-gradient(160deg,#3aa8d6 0%,#116289 100%); } /* moving sheen on primary CTAs */ .landing-cta, .sheen{ position:relative; overflow:hidden; } .landing-cta::after, .sheen::after{ content:''; position:absolute; top:0; left:-70%; width:45%; height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,0.28),transparent); transform:skewX(-18deg); transition:left .65s cubic-bezier(.22,1,.36,1); pointer-events:none; } .landing-cta:hover::after, .sheen:hover::after{ left:135%; } /* refined nav + pills + focus */ .nav-item{ border-radius:10px; } .pill{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } /* ═══════════════════════════════════════════════════════════════════════════════ INSTRUMENT-GRADE PASS — de-consumer-ize toward Palantir / Jobs: a flat obsidian field (no particle nebula), a single flat ice accent on CTAs, and precision-sharp corners. The surface is a judgment instrument, not a premium app. ═══════════════ */ /* 1 · IMMERSIVE RESTORED (per founder) — the moving WebGL blue + aurora are back on; when the WebGL layer is active the body goes transparent so the atmosphere shows through. */ body.webgl-on .aurora{ display:none !important; } body{ background:radial-gradient(70% 55% at 50% 0%, rgb(14,58,107) 0%, rgb(0,31,63) 40%, rgb(3,16,31) 100%) fixed !important; } /* the Intercept's Midnight Glow field, app-wide (founder 09-01) */ body.webgl-on{ background:transparent !important; } html[data-theme="light"] body{ background:radial-gradient(70% 55% at 50% 0%, rgb(226,236,246) 0%, rgb(243,246,250) 60%) fixed !important; } /* 2 · FLAT CTAs — one flat ice fill, ink text, no gradient, no moving sheen */ .bg-gradient-to-r.from-primary.to-indigo{ background:#00BFFF !important; background-image:none !important; color:#05070e !important; box-shadow:none !important; } .bg-gradient-to-r.from-primary.to-indigo:hover{ background:#6fd0f8 !important; opacity:1 !important; } html[data-theme="light"] .bg-gradient-to-r.from-primary.to-indigo{ background:#116289 !important; background-image:none !important; color:#f6fbff !important; } html[data-theme="light"] .bg-gradient-to-r.from-primary.to-indigo:hover{ background:#2a8fc2 !important; } .landing-cta::after, .sheen::after{ display:none !important; } /* 3 · SHARP RADII — precision corners across the instrument */ /* --card-radius lived here too, at 2px. It was DEAD: arete-system.css declared it 10px and loaded later, so 10px is what the product has always rendered. Removed with the rest of the duplicate token declarations — a token lives in tokens.css and nowhere else. (Stage 0 item 1, 2026-09-14) */ .rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl{ border-radius:2px !important; } .nav-item{ border-radius:2px !important; } .pill{ border-radius:2px !important; } /* ── FOCUS SYSTEM — ice-cyan hairline ring ── Uses box-shadow so layout is never disturbed; outline:none removes browser default. :focus-visible targets keyboard/programmatic focus only — mouse users unaffected. */ :focus-visible{ outline:none; box-shadow:0 0 0 1.5px rgba(0,191,255,0.80),0 0 0 3.5px rgba(0,191,255,0.14); border-radius:4px; } button:focus-visible{ outline:none; box-shadow:0 0 0 1.5px rgba(102,217,255,0.85),0 0 0 3.5px rgba(0,191,255,0.16); } a:focus-visible{ outline:none; box-shadow:0 0 0 1.5px rgba(0,191,255,0.80),0 0 0 3.5px rgba(0,191,255,0.14); border-radius:2px; } input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:none; box-shadow:0 0 0 1.5px rgba(0,191,255,0.70) !important; border-color:rgba(0,191,255,0.50) !important; } [role="button"]:focus-visible{ outline:none; box-shadow:0 0 0 1.5px rgba(0,191,255,0.80),0 0 0 3.5px rgba(0,191,255,0.14); } /* inherit element shape */ .rounded-full:focus-visible,.rounded-xl:focus-visible,.rounded-2xl:focus-visible{ border-radius:inherit; } .rounded-lg:focus-visible{ border-radius:inherit; } .nav-item:focus-visible{ box-shadow:0 0 0 1.5px rgba(0,191,255,0.70),0 0 0 3.5px rgba(0,191,255,0.12); border-radius:10px; } .theme-toggle:focus-visible{ box-shadow:0 0 0 1.5px rgba(0,191,255,0.70),0 0 0 3.5px rgba(0,191,255,0.12); border-radius:11px; } .ob-cell:focus-visible{ box-shadow:0 0 0 1.5px rgba(0,191,255,0.70),0 0 0 4px rgba(0,191,255,0.12); border-radius:4px; } .landing-cta:focus-visible{ box-shadow:0 0 0 2px rgba(0,191,255,0.9),0 0 0 4.5px rgba(0,191,255,0.22); } /* skip-to-content link */ .skip-link{ position:fixed; top:-100px; left:1rem; z-index:9999; padding:.55em 1.15em; border-radius:4px; font-size:12px; font-weight:600; letter-spacing:.08em; background:var(--accent); color:#03101f; text-decoration:none; transition:top .15s; } .skip-link:focus{ top:.75rem; } ::-webkit-scrollbar-thumb:hover{ background:rgba(0,191,255,0.16); } /* hairline section dividers read as intentional, not flat */ header.glass{ box-shadow:0 1px 0 rgba(0,191,255,0.04); } aside.glass{ box-shadow:1px 0 0 rgba(0,191,255,0.04); } /* JOBS PASS: generous whitespace — views breathe on desktop (print stylesheet still wins) */ @media (min-width:1024px){ main.view{ padding:2.25rem 2.25rem 3rem; } } /* ═══════════ IMMERSIVE WEBGL LAYER ═══════════ */ #webgl-bg{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.4s ease; } #webgl-bg.ready{ opacity:1; } body.webgl-on .aurora{ display:none; } /* WebGL replaces the CSS aurora when active */ body.webgl-on #landing{ background:radial-gradient(circle at 50% 28%, rgba(7,10,20,0.88), rgba(4,6,13,0.985) 74%) !important; -webkit-backdrop-filter:blur(14px) saturate(1.1) !important; backdrop-filter:blur(14px) saturate(1.1) !important; } body.webgl-on #landing h1{ text-shadow:0 2px 30px rgba(4,8,18,0.8); } @media (prefers-reduced-motion: reduce){ #webgl-bg{ transition:none; } } /* ═══════════ MOBILE / TOUCH POLISH ═══════════ */ /* tight instrument rows on pointer desktops; comfortable ~44px touch targets on touch devices */ .nav-item{ min-height:32px; line-height:1.3; } @media (pointer:coarse){ .nav-item{ min-height:44px; } #sidebar .mt-auto button{ min-height:44px; } .brief-recal-btn{ min-height:44px; } .ob-felt-b{ min-height:44px; } #fb-felt button{ min-height:44px; } #ov-streak-btn{ min-height:44px; } /* front door: the quick-read alternate path and the legal link are the only landing controls a thumb could miss (measured 20px / 15px) */ #landing-quick{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; } #landing a[href="/legal.html"]{ display:inline-flex; align-items:center; min-height:44px; } /* practitioner surfaces: every button thumb-sized, consent boxes visible */ #view-team button, #view-cohort button, #view-practice button{ min-height:44px; } #view-team input[type=checkbox], #view-practice input[type=checkbox]{ width:20px; height:20px; } #tm-mail, #tm-wa, #ch-mail, #ch-wa{ display:inline-flex; align-items:center; min-height:44px; } /* the Intercept's choice pills + dictation chip — the at-work overlay is thumb-first */ .int-pill{ min-height:44px; } .dict-chip{ min-height:44px; min-width:64px; } .int-seek-counsel{ min-height:44px; } #intercept-close{ min-height:44px; min-width:44px; } /* THE BLANKET THUMB RULE — on touch, every block-level button in every view stands at least 44px. Sensor switches keep their drawn size (the pill IS the visual); inline text-links are untouched by min-height by nature. */ .view button:not([id^=sns-]), .view [role="button"], .view select{ min-height:44px; } .view input[type=checkbox]{ width:20px; height:20px; } /* the signed-out landing's small doors: the quick-read opt-in and legal links */ #landing-quick, #landing a{ min-height:44px; display:inline-flex; align-items:center; } /* the notification center lives outside the views — its controls join the rule */ #notif-panel button{ min-height:44px; } /* the command palette's rows, likewise outside the views */ .cmdk-item{ min-height:44px; } /* the issued documents' overlay chrome (Print, Close) — the whole memo family */ #memo-overlay button{ min-height:44px; } /* Sliders: the 4px track is the HIT AREA on desktop — unusable by thumb. On touch, the input grows to 28px with the 4px track painted centered, thumb enlarged. */ input[type=range]{ height:28px; background:transparent; background-image:linear-gradient(rgba(0,191,255,0.08),rgba(0,191,255,0.08)); background-size:100% 4px; background-position:center; background-repeat:no-repeat; } input[type=range]::-webkit-slider-thumb{ height:24px; width:24px; } html[data-theme="light"] input[type=range]{ background:transparent; background-image:linear-gradient(rgba(15,20,28,0.10),rgba(15,20,28,0.10)); background-size:100% 4px; background-position:center; background-repeat:no-repeat; } } /* ── THE VEIL — discretion at work. One tap and the instrument goes opaque: every view blurs (visual only, layout untouched), interaction pauses, one tap anywhere resumes. For the desk someone just walked up to. ── */ html.veil-on .view{ filter:blur(16px) saturate(.55); pointer-events:none; user-select:none; } html.veil-on #load-bar, html.veil-on #load-val, html.veil-on #streak-pill, html.veil-on #page-title{ filter:blur(7px); } #veil-scrim{ position:fixed; inset:0; z-index:46; display:flex; align-items:center; justify-content:center; cursor:pointer; background:rgba(4,6,12,0.25); } #veil-scrim .veil-chip{ font-family:"Manrope",system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; color:#9fb4c8; border:1px solid rgba(127,140,160,0.35); background:rgba(9,12,20,0.85); border-radius:5px; padding:10px 18px; } #veil-scrim .veil-sub{ display:block; margin-top:6px; font-weight:400; letter-spacing:.18em; font-size:8.5px; color:#6b7788; text-transform:none; } /* honour device safe areas (notches / home indicator) on the sticky header + drawer */ @supports (padding:max(0px)){ header.glass{ padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); } @media (min-width:640px){ header.glass{ padding-left:max(1.5rem,env(safe-area-inset-left)); padding-right:max(1.5rem,env(safe-area-inset-right)); } } #sidebar{ padding-left:max(1rem,env(safe-area-inset-left)); padding-top:max(1rem,env(safe-area-inset-top)); padding-bottom:max(1rem,env(safe-area-inset-bottom)); } } /* roomier diagnostic cards + comfortable tap targets on narrow phones */ @media (max-width:430px){ #ob-diag,#ob-anchor,#ob-arbit,#ob-bio,#ob-auth,#ob-synth,#ob-proto{ padding:1.5rem; } #ob-optA,#ob-optB{ padding:1.25rem; min-height:132px; } #ob-anchor-grid{ gap:.6rem; } } /* decision-ledger stake selector */ .dl-stake-opt.sel{ border-color:#00BFFF; background:rgba(0,191,255,0.08); color:#eef0f3; } /* ═══════════ DECISIONS RADAR ═══════════ */ .radar-item{ border-radius:var(--card-radius); background:rgba(0,191,255,0.025); border:1px solid rgba(0,191,255,0.07); padding:14px 16px; transition:border-color .18s; } .radar-item:hover{ border-color:rgba(0,191,255,0.18); } .radar-item-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:7px; } .dec-type-tag{ display:inline-flex; align-items:center; font-family:inherit; font-size:8.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; padding:2px 8px; border-radius:3px; border:1px solid rgba(0,191,255,0.28); background:rgba(0,191,255,0.07); color:var(--ice); flex:none; } .radar-source-lbl{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--svg-faint); flex:none; } .radar-fit{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; letter-spacing:.04em; flex:none; } .radar-fit-aligned{ color:var(--ok); } .radar-fit-caution{ color:var(--warn); } .radar-fit-mismatch{ color:var(--crit); } .radar-rationale{ font-size:11.5px; line-height:1.6; color:rgb(var(--ink3)); margin-top:4px; } .radar-action{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; font-weight:600; letter-spacing:.04em; padding:4px 10px; border-radius:3px; border:1px solid rgba(0,191,255,0.25); background:rgba(0,191,255,0.06); color:var(--ice); cursor:pointer; transition:background .15s,border-color .15s; -webkit-tap-highlight-color:transparent; } .radar-action:hover{ background:rgba(0,191,255,0.12); border-color:rgba(0,191,255,0.40); } .radar-action:active{ transform:scale(.97); } .radar-action-warn{ border-color:rgba(127,184,217,0.35); background:rgba(127,184,217,0.08); color:rgb(127,184,217); } .radar-action-warn:hover{ background:rgba(127,184,217,0.15); border-color:rgba(127,184,217,0.55); } /* the irreversibility mark, as a class instead of an inline style, so the light theme can reach it (2026-09-12 accessibility pass) */ .pill-irrev{ font-size:8.5px; padding:2px 7px; border-color:rgba(127,184,217,0.35); color:rgb(127,184,217); background:rgba(127,184,217,0.08); } /* LIGHT THEME: #7FB8D9 on the light panel measures 1.8:1, far under the 4.5 floor. The light-theme ice (#116289) is already the token for this job and measures 5.61:1. Dark theme is untouched: it already reads 8.89:1. */ html[data-theme="light"] .radar-action-warn, html[data-theme="light"] .pill-irrev{ color:#116289; border-color:rgba(17,98,137,0.38); background:rgba(17,98,137,0.07); } html[data-theme="light"] .radar-action-warn:hover{ background:rgba(17,98,137,0.13); border-color:rgba(17,98,137,0.58); } html[data-theme="light"] .radar-item{ background:rgba(15,20,28,0.025); border-color:rgba(15,20,28,0.09); } html[data-theme="light"] .radar-item:hover{ border-color:rgba(17,98,137,0.22); } html[data-theme="light"] .dec-type-tag{ border-color:rgba(17,98,137,0.25); background:rgba(17,98,137,0.06); color:#116289; } /* ═══════════ THEME TOGGLE CONTROL ═══════════ */ .theme-toggle{ height:36px; width:36px; border-radius:6px; display:grid; place-items:center; color:rgb(var(--ink2)); border:1px solid rgba(0,191,255,0.08); background:rgba(0,191,255,0.03); cursor:pointer; transition:color .2s, background .2s, border-color .2s, transform .15s, box-shadow .2s; -webkit-tap-highlight-color:transparent; } .theme-toggle:hover{ color:rgb(var(--ink)); background:rgba(0,191,255,0.06); border-color:rgba(0,191,255,0.14); } .theme-toggle:active{ transform:scale(.92); } .theme-toggle svg{ transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s; } .theme-toggle .icon-sun{ display:none; } .theme-toggle .icon-moon{ display:block; } html[data-theme="light"] .theme-toggle .icon-sun{ display:block; } html[data-theme="light"] .theme-toggle .icon-moon{ display:none; } html[data-theme="light"] .theme-toggle{ color:rgb(var(--ink2)); border-color:rgba(15,20,28,0.10); background:rgba(15,20,28,0.025); } html[data-theme="light"] .theme-toggle:hover{ color:rgb(var(--ink)); background:rgba(15,20,28,0.05); border-color:rgba(15,20,28,0.16); } /* smooth one-shot cross-theme fade (added on toggle, removed after ~0.6s) */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{ transition-property: background-color, border-color, color, box-shadow, fill, stroke !important; transition-duration:.5s !important; transition-timing-function:cubic-bezier(.4,0,.2,1) !important; } @media (prefers-reduced-motion: reduce){ html.theme-anim, html.theme-anim *{ transition:none !important; } } /* ═══════════════════════ LIGHT THEME ═══════════════════════ */ /* Tokens moved to css/tokens.css (Stage 0 item 1, 2026-09-14). They were declared here AND in arete-system.css, which overwrote 25 of them. */ /* cold-neutral base surface */ html[data-theme="light"] body{ background:linear-gradient(180deg,#f8f8f8 0%,#f2f2f2 100%); } html[data-theme="light"] body::after{ opacity:.008; } html[data-theme="light"] .aurora{ display:none !important; } html[data-theme="light"] #webgl-bg{ display:none !important; opacity:0 !important; } /* frosted white glass surfaces */ html[data-theme="light"] .glass{ background:rgba(255,255,255,0.82); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2); } /* clean white cards with hairline border */ html[data-theme="light"] .card{ background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(17,98,137,calc(var(--glow,0)*0.5)), transparent 60%) padding-box, #ffffff padding-box, linear-gradient(rgba(15,20,28,0.08),rgba(15,20,28,0.06)) border-box; box-shadow:0 1px 2px rgba(15,20,28,0.04), 0 4px 18px rgba(15,20,28,0.06); } html[data-theme="light"] .card:hover{ box-shadow:0 1px 2px rgba(15,20,28,0.04), 0 8px 26px rgba(15,20,28,0.08); } html[data-theme="light"] .card::after{ display:none; } html[data-theme="light"] .card-hero{ background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(17,98,137,calc(var(--glow,0)*0.4)), transparent 60%) padding-box, #ffffff padding-box, linear-gradient(135deg,rgba(17,98,137,0.22),rgba(63,103,137,0.08) 55%,rgba(15,20,28,0.05)) border-box; box-shadow:0 1px 2px rgba(15,20,28,0.03), 0 5px 20px rgba(15,20,28,0.06), 0 0 36px -24px rgba(17,98,137,0.22); } @media (max-width:768px){ html[data-theme="light"] .card, html[data-theme="light"] .card-hero{ background:#ffffff padding-box, linear-gradient(rgba(15,20,28,0.08),rgba(15,20,28,0.06)) border-box; } html[data-theme="light"] .glass{ background:rgba(255,255,255,0.92); } } html[data-theme="light"] .grad-text{ background:linear-gradient(135deg,#0f141c 0%,#2a3650 52%,#116289 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } html[data-theme="light"] .nav-item{ color:#6c7888; } html[data-theme="light"] .nav-item:hover{ background:rgba(15,20,28,0.04); color:#0f141c; } html[data-theme="light"] .nav-item.active{ background:linear-gradient(90deg,rgba(17,98,137,0.14),rgba(17,98,137,0.03)); color:#0e6a94; border-color:rgba(17,98,137,0.30); } html[data-theme="light"] .nav-item.active svg{ color:#0e6a94; } html[data-theme="light"] .nav-item.active::before{ background:linear-gradient(#116289,#3f6789); box-shadow:0 0 8px rgba(17,98,137,0.35); } html[data-theme="light"] .nav-group-label{ color:#93a0b2; } html[data-theme="light"] .nav-group-label::after{ background:linear-gradient(90deg,rgba(15,20,28,0.12),rgba(15,20,28,0)); } html[data-theme="light"] input[type=range]{ background:rgba(15,20,28,0.10); } html[data-theme="light"] input[type=range]::-webkit-slider-thumb{ background:#116289; border:1px solid rgba(255,255,255,0.8); box-shadow:0 1px 4px rgba(10,30,60,0.28); } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:rgba(15,20,28,0.12); } html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{ background:rgba(15,20,28,0.20); } html[data-theme="light"] .read-prose{ color:#3c4658; } html[data-theme="light"] .read-prose b, html[data-theme="light"] .read-prose em{ color:#0f141c; } html[data-theme="light"] .deep-firstpara::first-letter{ color:#116289; } /* the light .overline override was REMOVED: it pinned the app's most-used label class to #8c96a8 (2.6:1) and overrode the token ladder that already resolves per theme. See scripts/split/ink-pass-3.js. */ html[data-theme="light"] .gold-rule{ background:linear-gradient(90deg,transparent,rgba(15,20,28,0.12),transparent); } /* calibration cells on light */ html[data-theme="light"] .ob-cell{ border-color:rgba(15,20,28,0.09); background:#f0f0f0; box-shadow:inset 0 1px 2px rgba(15,20,28,0.03); } html[data-theme="light"] .ob-cell:hover{ border-color:rgba(17,98,137,0.42); box-shadow:0 6px 20px rgba(10,30,60,0.10); } html[data-theme="light"] .ob-cell.sel{ border-color:#116289; background:rgba(17,98,137,0.06); box-shadow:0 0 18px rgba(17,98,137,0.12); } html[data-theme="light"] .dl-stake-opt.sel{ border-color:#116289; background:rgba(17,98,137,0.08); color:#0f141c; } html[data-theme="light"] ::selection{ background:rgba(17,98,137,0.16); color:#0f141c; } html[data-theme="light"] header.glass{ box-shadow:0 1px 0 rgba(15,20,28,0.06); } html[data-theme="light"] aside.glass{ box-shadow:1px 0 0 rgba(15,20,28,0.05); border-color:rgba(15,20,28,0.07); } html[data-theme="light"] .radar-emblem::before{ background:conic-gradient(from 0deg, transparent 0deg, rgba(17,98,137,0.10) 34deg, transparent 60deg); } html[data-theme="light"] :focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.85),0 0 0 3.5px rgba(17,98,137,0.12); } html[data-theme="light"] button:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.85),0 0 0 3.5px rgba(17,98,137,0.12); } html[data-theme="light"] a:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.85),0 0 0 3.5px rgba(17,98,137,0.12); } html[data-theme="light"] input:focus-visible,html[data-theme="light"] textarea:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.75) !important; border-color:rgba(17,98,137,0.50) !important; } html[data-theme="light"] .nav-item:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.75),0 0 0 3.5px rgba(17,98,137,0.10); } html[data-theme="light"] .theme-toggle:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.75),0 0 0 3.5px rgba(17,98,137,0.10); } html[data-theme="light"] .ob-cell:focus-visible{ box-shadow:0 0 0 1.5px rgba(17,98,137,0.75),0 0 0 4px rgba(17,98,137,0.10); } html[data-theme="light"] .landing-cta:focus-visible{ box-shadow:0 0 0 2px rgba(17,98,137,0.9),0 0 0 4.5px rgba(17,98,137,0.20); } html[data-theme="light"] .skip-link{ background:#116289; color:#ffffff; } /* white alpha utilities → dark-on-light */ html[data-theme="light"] .bg-white\/5{ background-color:rgba(15,20,28,0.032); } html[data-theme="light"] .bg-white\/10{ background-color:rgba(15,20,28,0.055); } html[data-theme="light"] .hover\:bg-white\/5:hover{ background-color:rgba(15,20,28,0.045); } html[data-theme="light"] .hover\:bg-white\/10:hover{ background-color:rgba(15,20,28,0.065); } html[data-theme="light"] .hover\:bg-white\/15:hover{ background-color:rgba(15,20,28,0.08); } html[data-theme="light"] .bg-white\/\[0\.04\]{ background-color:rgba(15,20,28,0.032); } html[data-theme="light"] .bg-white\/\[0\.03\]{ background-color:rgba(15,20,28,0.028); } html[data-theme="light"] .bg-white\/\[0\.02\]{ background-color:rgba(15,20,28,0.022); } html[data-theme="light"] .bg-white\/\[0\.025\]{ background-color:rgba(15,20,28,0.025); } html[data-theme="light"] .border-white\/10{ border-color:rgba(15,20,28,0.10); } html[data-theme="light"] .border-white\/8{ border-color:rgba(15,20,28,0.08); } html[data-theme="light"] .border-white\/5{ border-color:rgba(15,20,28,0.06); } html[data-theme="light"] .border-white\/15{ border-color:rgba(15,20,28,0.13); } html[data-theme="light"] .border-white\/\[0\.07\]{ border-color:rgba(15,20,28,0.07); } html[data-theme="light"] .divide-white\/5 > :not([hidden]) ~ :not([hidden]){ border-color:rgba(15,20,28,0.07); } html[data-theme="light"] .bg-black\/20{ background-color:rgba(15,20,28,0.05); } html[data-theme="light"] .bg-black\/60{ background-color:rgba(15,20,28,0.30); } /* cold severity text utilities on light */ html[data-theme="light"] .text-amber-400{ color:#3f6789; } html[data-theme="light"] .text-amber-200\/75{ color:#3f6789; } html[data-theme="light"] .text-amber-100\/90{ color:#3f6789; } html[data-theme="light"] .hover\:text-amber-100:hover{ color:#116289; } html[data-theme="light"] .text-red-400{ color:var(--bad); } html[data-theme="light"] .text-red-300\/90{ color:var(--bad); } html[data-theme="light"] .text-emerald-400{ color:#116289; } html[data-theme="light"] .text-emerald-300\/90{ color:#116289; } /* modal scrims + landing hero */ html[data-theme="light"] #landing, html[data-theme="light"] body.webgl-on #landing{ background:linear-gradient(180deg,#f8f8f8,#f0f0f0 80%) !important; -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important; } html[data-theme="light"] body.webgl-on #landing h1{ text-shadow:none; } html[data-theme="light"] #gate{ background:rgba(244,244,244,0.80) !important; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } html[data-theme="light"] #protocol{ background:rgba(244,244,244,0.88) !important; } /* landing glyph */ /* primary CTA on light */ html[data-theme="light"] .landing-cta{ background:linear-gradient(160deg,#116289 0%,#0f5a80 100%); box-shadow:0 10px 28px -10px rgba(15,90,128,.35), inset 0 1px 0 rgba(255,255,255,.22); color:#ffffff; } html[data-theme="light"] .landing-cta:hover{ box-shadow:0 16px 38px -10px rgba(15,90,128,.45), inset 0 1px 0 rgba(255,255,255,.28); } html[data-theme="light"] .stat-ico{ background:rgba(var(--c),.12); border-color:rgba(var(--c),.28); } /* stat-tile numbers — cold on light */ html[data-theme="light"] #m-bad{ color:var(--bad) !important; } html[data-theme="light"] #m-pend{ color:#3f6789 !important; } html[data-theme="light"] .pill{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } /* ── Bias v2 · premium four-layer stack visual ── */ .stack-viz{ display:flex; flex-direction:column; gap:9px; align-items:center; } .stack-band{ border:1px solid rgba(var(--sb),0.26); border-radius:14px; padding:12px 16px; background:linear-gradient(120deg, rgba(var(--sb),0.11), rgba(var(--sb),0.03)); box-shadow:inset 0 1px 0 rgba(0,191,255,0.05); transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease; min-width:min(100%,240px); } .stack-band:hover{ transform:translateY(-2px) scale(1.015); border-color:rgba(var(--sb),0.55); box-shadow:0 10px 26px -12px rgba(var(--sb),0.45), inset 0 1px 0 rgba(0,191,255,0.08); } .stack-band-hot{ border-color:rgba(var(--sb),0.6); } @media (prefers-reduced-motion: no-preference){ .stack-band-hot{ animation:sbPulse 2.6s ease-in-out infinite; } } @keyframes sbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--sb),0.0), inset 0 1px 0 rgba(0,191,255,0.05); } 50%{ box-shadow:0 0 26px -4px rgba(var(--sb),0.5), inset 0 1px 0 rgba(0,191,255,0.05); } } html[data-theme="light"] .stack-band{ background:linear-gradient(120deg, rgba(var(--sb),0.09), rgba(var(--sb),0.02)); box-shadow:none; } /* ── Bias v2 · smooth accordion cards (Full Bias Study) ── */ .bx-card{ border-radius:14px; overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease; } .bx-head{ width:100%; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; } .bx-head:focus-visible{ outline:1.5px solid rgba(0,191,255,.55); outline-offset:-2px; border-radius:4px; } .bx-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.22,1,.36,1); } .bx-card.open .bx-body{ grid-template-rows:1fr; } .bx-inner{ overflow:hidden; min-height:0; } .bx-chev{ transition:transform .26s cubic-bezier(.22,1,.36,1); } .bx-card.open .bx-chev{ transform:rotate(180deg); } /* ── Bias v2 · escalating state read ── */ .sr-card{ position:relative; overflow:hidden; } .sr-card::before{ content:''; position:absolute; inset:0 auto 0 0; width:3px; background:rgb(var(--sr)); opacity:.85; } @media (prefers-reduced-motion: no-preference){ .sr-dot{ animation:liveDot 1.6s ease-in-out infinite; } } /* ═══════════ CONSISTENCY ENGINE · record + milestones + check-in acknowledgment ═══════════ */ /* header consistency pill — cold steel (check-in indicator) */ .streak-pill{ display:none; align-items:center; gap:6px; height:36px; border-radius:6px; padding:0 12px; border:1px solid rgba(102,217,255,0.28); background:rgba(102,217,255,0.07); color:#66D9FF; cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s,border-color .2s,transform .15s; -webkit-tap-highlight-color:transparent; } .streak-pill.show{ display:flex; } .streak-pill:hover{ background:rgba(102,217,255,0.12); border-color:rgba(102,217,255,0.42); } .streak-pill:active{ transform:scale(.94); } .streak-pill.pending{ border-color:rgba(102,217,255,0.18); background:rgba(102,217,255,0.04); color:rgba(102,217,255,0.65); } .streak-pill svg{ flex:none; } html[data-theme="light"] .streak-pill{ border-color:rgba(17,98,137,0.24); background:rgba(17,98,137,0.06); color:#116289; } html[data-theme="light"] .streak-pill:hover{ background:rgba(17,98,137,0.10); } html[data-theme="light"] .streak-pill.pending{ border-color:rgba(17,98,137,0.16); background:rgba(17,98,137,0.03); color:rgba(17,98,137,0.65); } /* record gallery */ .ach-card{ position:relative; border-radius:8px; border:1px solid; padding:18px 18px 16px; overflow:hidden; transition:border-color .25s; } .ach-card.locked .ach-ico{ filter:grayscale(1); opacity:.45; } .ach-ico{ height:44px; width:44px; border-radius:4px; display:grid; place-items:center; flex:none; } .ach-bar{ height:2px; border-radius:0; overflow:hidden; } .ach-bar>div{ height:100%; border-radius:0; transition:width .8s cubic-bezier(.22,1,.36,1); } /* check-in acknowledgment overlay */ #celebrate{ -webkit-backdrop-filter:blur(12px) saturate(1.1); backdrop-filter:blur(12px) saturate(1.1); } html[data-theme="light"] #celebrate{ background:rgba(244,244,241,0.84) !important; } .cb-unlock{ display:flex; align-items:center; gap:10px; border:1px solid; border-radius:12px; padding:10px 12px; } /* ═══════════ NOTIFICATIONS · header bell + center panel ═══════════ */ .notif-bell{ position:relative; } .notif-badge{ position:absolute; top:-5px; right:-6px; min-width:16px; height:16px; border-radius:2px; background:#7fb8d9; color:#eef0f3; font-size:9px; font-weight:700; line-height:16px; text-align:center; padding:0 4px; box-shadow:0 0 0 2px rgba(10,10,10,0.94); font-variant-numeric:tabular-nums; pointer-events:none; letter-spacing:.02em; } html[data-theme="light"] .notif-badge{ background:#7fb8d9; box-shadow:0 0 0 2px #f4f4f2; } .notif-panel{ position:fixed; top:calc(68px + env(safe-area-inset-top,0px)); right:12px; z-index:45; width:min(400px, calc(100vw - 16px)); display:flex; flex-direction:column; max-height:min(72dvh, 620px); border-radius:var(--card-radius); overflow:hidden; border:1px solid rgba(160,225,255,.18); background:rgba(0,24,48,.90); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 40px 90px -40px rgba(18,64,184,.9); } html[data-theme="light"] .notif-panel{ border-color:rgba(15,23,42,0.12); background:rgba(248,248,247,0.98); box-shadow:0 24px 56px -20px rgba(10,20,40,0.28); } .notif-list{ overflow-y:auto; overscroll-behavior:contain; flex:1; min-height:0; } .notif-group{ padding:10px 16px 4px; } .notif-item{ display:flex; gap:12px; width:100%; text-align:left; padding:12px 16px; cursor:pointer; border-bottom:1px solid rgba(0,191,255,0.05); transition:background .18s; -webkit-tap-highlight-color:transparent; } .notif-item:last-child{ border-bottom:none; } .notif-item:hover{ background:rgba(0,191,255,0.05); } html[data-theme="light"] .notif-item{ border-color:rgba(15,23,42,0.06); } html[data-theme="light"] .notif-item:hover{ background:rgba(15,23,42,0.04); } .notif-item.read{ opacity:.6; } .notif-ico{ height:34px; width:34px; border-radius:10px; display:grid; place-items:center; flex:none; margin-top:1px; } .notif-dot{ height:5px; width:5px; border-radius:0; background:var(--ice,#00BFFF); flex:none; margin-top:8px; box-shadow:0 0 6px rgba(0,191,255,0.5); } html[data-theme="light"] .notif-dot{ background:#116289; box-shadow:0 0 5px rgba(17,98,137,0.4); } .notif-time{ height:34px; border-radius:9px; border:1px solid rgba(0,191,255,0.14); background:rgba(0,191,255,0.05); color:rgb(var(--ink)); font-size:12px; padding:0 8px; font-family:inherit; color-scheme:dark; } html[data-theme="light"] .notif-time{ border-color:rgba(15,23,42,0.16); background:#fff; color:#0f1b2d; color-scheme:light; } /* ═══════════ UX POLISH LAYER · skeletons · tactile press · first-run ═══════════ */ /* Loading skeletons — structured shimmer placeholders while views fetch (both themes) */ .sk-line{ position:relative; overflow:hidden; border-radius:8px; background:rgba(0,191,255,0.055); } html[data-theme="light"] .sk-line{ background:rgba(15,23,42,0.065); } @media (prefers-reduced-motion: no-preference){ .sk-line::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(0,191,255,0.085),transparent); animation:skSweep 1.5s ease-in-out infinite; } html[data-theme="light"] .sk-line::after{ background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8),transparent); } } @keyframes skSweep{ to{ transform:translateX(100%); } } /* uniform tactile press feedback — :where() keeps specificity at zero so every bespoke :active rule (theme-toggle, ob-cells, CTAs) still wins untouched */ :where(button){ transition:transform .13s ease; } :where(button:not(:disabled)):active{ transform:scale(.984); } /* ── First-run welcome (3-step orientation) ── */ .wdot{ height:3px; width:6px; border-radius:0; background:rgba(0,191,255,0.14); transition:width .3s cubic-bezier(.22,1,.36,1), background .3s, box-shadow .3s; } .wdot.on{ width:20px; background:linear-gradient(90deg,#00BFFF,#66D9FF); box-shadow:0 0 8px rgba(0,191,255,.4); } html[data-theme="light"] .wdot{ background:rgba(15,23,42,0.12); } html[data-theme="light"] .wdot.on{ background:linear-gradient(90deg,#116289,#3aa8d6); box-shadow:0 0 7px rgba(17,98,137,.32); } html[data-theme="light"] #welcome{ background:rgba(244,244,241,0.85) !important; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); } /* ═══════════ CONVERSION LANDING · the B2B story below the hero ═══════════ Same instrument language as the app (Jobs restraint): graphite base, ONE ice-blue accent, mono numerals, .overline kickers, house curve cubic-bezier(.22,1,.36,1). Sections are static (no .card tilt chrome). */ .lp-sec{ padding:104px 0; } @media (max-width:640px){ .lp-sec{ padding:66px 0; } } .lp-h2{ font-size:clamp(1.6rem,3.2vw,2.4rem); line-height:1.10; letter-spacing:-0.025em; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:200; } /* scroll reveal — IO adds .in; reduced-motion / no-IO stays fully visible */ .lp-reveal{ opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); } .lp-reveal.in{ opacity:1; transform:none; } .lp-reveal.ld1{ transition-delay:.08s } .lp-reveal.ld2{ transition-delay:.16s } .lp-reveal.ld3{ transition-delay:.24s } @media (prefers-reduced-motion: reduce){ .lp-reveal{ opacity:1; transform:none; transition:none; } } /* story card — hairline border, obsidian surface, surgical restraint */ .lp-card{ border-radius:var(--card-radius); border:1px solid rgba(0,191,255,0.07); background:rgba(0,191,255,0.022); padding:24px 22px; text-align:left; } html[data-theme="light"] .lp-card{ border-color:rgba(15,23,42,0.09); background:#ffffff; box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 4px 16px rgba(16,24,40,0.05); } .lp-rule{ height:1px; max-width:480px; margin:0 auto; background:linear-gradient(90deg,transparent,rgba(0,191,255,0.08),transparent); } html[data-theme="light"] .lp-rule{ background:linear-gradient(90deg,transparent,rgba(15,23,42,0.12),transparent); } .lp-ico{ height:38px; width:38px; border-radius:4px; display:grid; place-items:center; flex:none; color:var(--ice); border:1px solid rgba(0,191,255,0.22); background:rgba(0,191,255,0.06); } html[data-theme="light"] .lp-ico{ color:#116289; border-color:rgba(17,98,137,0.22); background:rgba(17,98,137,0.05); } /* scroll cue at the base of the first screen */ .lp-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:rgb(var(--ink2)); opacity:.7; cursor:pointer; background:none; border:none; padding:8px 14px; transition:opacity .2s, color .2s; -webkit-tap-highlight-color:transparent; } .lp-cue:hover{ opacity:1; color:rgb(var(--ink)); } /* the cue's arrow looped forever. §10: nothing loops at rest except the cube and the Record ring. It moves on hover, which is when it means something. */ @media (prefers-reduced-motion: no-preference){ .lp-cue:hover svg{ animation:lpCue 2.6s cubic-bezier(.22,1,.36,1) infinite; } } @keyframes lpCue{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(5px) } } /* the cue is the last thing worth 34px: on a short screen the stack keeps them and the case is still one scroll away. Was 620px; an SE is 667 and overflowed. */ @media (max-height:700px){ .lp-cue{ display:none; } } /* pricing tiers — surgical instrument panels */ .lp-tier{ position:relative; display:flex; flex-direction:column; border-radius:var(--card-radius); padding:28px 24px; text-align:left; border:1px solid rgba(0,191,255,0.07); background:rgba(0,191,255,0.022); } .lp-tier-hot{ border-color:rgba(0,191,255,0.36); background:linear-gradient(180deg,rgba(0,191,255,0.04),rgba(0,191,255,0.008)); box-shadow:0 0 44px -16px rgba(0,191,255,0.18); } html[data-theme="light"] .lp-tier{ border-color:rgba(15,23,42,0.09); background:#ffffff; box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 5px 18px rgba(16,24,40,0.05); } html[data-theme="light"] .lp-tier-hot{ border-color:rgba(17,98,137,0.38); box-shadow:0 1px 2px rgba(16,24,40,0.03), 0 8px 28px rgba(10,30,60,0.09), 0 0 36px -20px rgba(17,98,137,0.28); } /* tier kickers are left-aligned card labels — no flanking hero hairlines inside a tier */ #landing .lp-tier .overline::before, #landing .lp-tier .overline::after{ display:none; } .lp-tier-tag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap; border-radius:2px; font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 12px; color:#03101f; background:linear-gradient(160deg,#00BFFF 0%,#1e8ab8 100%); box-shadow:0 6px 18px -8px rgba(0,191,255,.40); } .lp-feat{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.55; color:rgb(var(--ink2)); } .lp-feat svg{ flex:none; margin-top:3px; } .lp-soon{ display:inline-block; font-family:inherit; font-size:11px; letter-spacing:.04em; border:1px solid rgba(0,191,255,0.12); color:rgb(var(--ink3)); border-radius:2px; padding:1px 5px; vertical-align:1px; margin-left:7px; white-space:nowrap; } html[data-theme="light"] .lp-soon{ border-color:rgba(15,23,42,0.16); color:rgb(var(--ink2)); } /* feature-comparison table */ .lp-cmp{ width:100%; border-collapse:collapse; font-size:12px; } .lp-cmp th{ font-family:inherit; font-size:9.5px; letter-spacing:.04em; font-weight:600; color:rgb(var(--ink3)); padding:10px 6px; text-align:center; border-bottom:1px solid rgba(0,191,255,0.08); } .lp-cmp th:first-child{ text-align:left; padding-left:2px; } .lp-cmp td{ padding:10px 6px; text-align:center; border-bottom:1px solid rgba(0,191,255,0.05); color:rgb(var(--ink2)); } .lp-cmp td:first-child{ text-align:left; padding-left:2px; color:rgb(var(--ink)); font-size:12.5px; } .lp-cmp td .lp-yes{ color:var(--ice); display:inline-block; } .lp-cmp td .lp-no{ opacity:.35; } .lp-cmp td .lp-soon{ margin-left:0; } html[data-theme="light"] .lp-cmp th{ border-color:rgba(15,23,42,0.12); } html[data-theme="light"] .lp-cmp td{ border-color:rgba(15,23,42,0.06); } html[data-theme="light"] .lp-cmp td .lp-yes{ color:#116289; } /* ── PRINT — "Save as PDF": a clean one-page report. The beforeprint hook flips dark → light first (SVG chart colors are inlined at render time), so paper always gets dark-ink-on-white. Chrome only (the app's own print button). ── */ @media print{ @page{ margin:9mm; } html,body{ background:#fff !important; overflow:visible !important; } body::before, body::after, .aurora, #webgl-bg{ display:none !important; } #sidebar, header.glass, #notif-panel, #sb-backdrop, #read-progress, #verify-banner, .no-print{ display:none !important; } .lg\:ml-60{ margin-left:0 !important; } .view{ padding:0 !important; } .card, .card-hero{ background:#fff !important; border:1px solid #d6dde8 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; break-inside:avoid; page-break-inside:avoid; transform:none !important; } .grad-text{ background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; color:#12233f !important; } /* compact the Insights report so a full week fits one page */ #view-insights{ zoom:0.78; } #ins-body{ gap:12px !important; } #ins-body .card, #ins-body .card-hero{ padding:14px !important; border-radius:10px !important; } a[href]::after{ content:'' !important; } } /* ── ORG ADMIN CONSOLE — premium workspace management (leader only) ── Hairline separators, mono/tabular numerals, one ice-blue accent, generous whitespace. A serious instrument's control panel — not a utilitarian form. Light-theme overrides cover every token so both modes are flawless. */ .adm-section{padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(0,191,255,0.07);} .adm-label{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--svg-label);margin-bottom:10px;display:block;} .adm-input{background:rgba(0,191,255,0.042);border:1px solid rgba(0,191,255,0.10);border-radius:10px;padding:9px 13px;font-size:13px;color:rgb(var(--ink));outline:none;transition:border-color .18s cubic-bezier(.22,1,.36,1);min-width:0;width:100%;} .adm-input:focus{border-color:rgba(0,191,255,0.45);} .adm-btn{border-radius:6px;border:1px solid rgba(0,191,255,0.09);background:rgba(0,191,255,0.04);color:rgb(var(--ink));font-size:12px;font-weight:600;letter-spacing:0;padding:8px 16px;cursor:pointer;transition:background .18s cubic-bezier(.22,1,.36,1),border-color .18s;white-space:nowrap;line-height:1.4;} .adm-btn:hover:not(:disabled){background:rgba(0,191,255,0.07);border-color:rgba(0,191,255,0.13);} .adm-btn:disabled{opacity:.30;cursor:default;} .adm-btn-primary{border-color:rgba(0,191,255,0.24);background:rgba(0,191,255,0.07);color:var(--ice);} .adm-btn-primary:hover:not(:disabled){background:rgba(0,191,255,0.12);border-color:rgba(0,191,255,0.34);} .adm-btn-warn{border-color:rgba(102,217,255,0.24);background:rgba(102,217,255,0.06);color:#66D9FF;} .adm-btn-warn:hover:not(:disabled){background:rgba(102,217,255,0.11);border-color:rgba(102,217,255,0.34);} .adm-btn-danger{border-color:rgba(127,184,217,0.24);background:rgba(127,184,217,0.06);color:#66D9FF;} .adm-btn-danger:hover:not(:disabled){background:rgba(127,184,217,0.12);border-color:rgba(127,184,217,0.34);} /* roster — hairline rows, tabular numerals, no heavy box */ .adm-tbl{width:100%;border-collapse:collapse;} .adm-tbl thead th{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--svg-label);padding:0 14px 10px 0;text-align:left;border-bottom:1px solid rgba(0,191,255,0.08);} .adm-tbl thead th:last-child{padding-right:0;} .adm-tbl tbody td{padding:12px 14px 12px 0;vertical-align:middle;} .adm-tbl tbody td:last-child{padding-right:0;} .adm-tbl tbody tr{border-bottom:1px solid rgba(0,191,255,0.055);} .adm-tbl tbody tr:last-child{border-bottom:none;} .adm-avatar{height:32px;width:32px;border-radius:50%;border:1px solid rgba(0,191,255,0.12);background:rgba(0,191,255,0.06);display:grid;place-items:center;font-size:10.5px;font-weight:700;font-family:"Manrope",system-ui,sans-serif;color:rgb(var(--ink2));flex-shrink:0;letter-spacing:.04em;} .adm-role-leader{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--accent-soft);} .adm-role-member{font-size:11px;color:rgb(var(--ink2));font-weight:500;} .adm-code-val{font-family:inherit;font-size:1.35rem;letter-spacing:.28em;color:var(--ice);font-variant-numeric:tabular-nums;} .adm-count-badge{display:inline-flex;align-items:center;gap:6px;border-radius:8px;border:1px solid rgba(0,191,255,0.10);background:rgba(0,191,255,0.04);padding:5px 11px;font-size:11px;font-weight:600;color:rgb(var(--ink2));font-variant-numeric:tabular-nums;} /* light theme — every token remapped for dark-ink-on-light-surface */ html[data-theme="light"] .adm-section{border-color:rgba(15,23,42,0.08);} html[data-theme="light"] .adm-label{color:#64748b;} html[data-theme="light"] .adm-input{background:rgba(15,23,42,0.032);border-color:rgba(15,23,42,0.12);color:rgb(var(--ink));} html[data-theme="light"] .adm-input:focus{border-color:rgba(17,98,137,0.50);} html[data-theme="light"] .adm-btn{border-color:rgba(15,23,42,0.12);background:rgba(15,23,42,0.04);color:rgb(var(--ink));} html[data-theme="light"] .adm-btn:hover:not(:disabled){background:rgba(15,23,42,0.07);border-color:rgba(15,23,42,0.18);} html[data-theme="light"] .adm-btn-primary{border-color:rgba(17,98,137,0.26);background:rgba(17,98,137,0.06);color:#116289;} html[data-theme="light"] .adm-btn-primary:hover:not(:disabled){background:rgba(17,98,137,0.11);} html[data-theme="light"] .adm-btn-warn{border-color:rgba(127,184,217,0.24);background:rgba(127,184,217,0.05);color:var(--bad);} html[data-theme="light"] .adm-btn-warn:hover:not(:disabled){background:rgba(127,184,217,0.10);} html[data-theme="light"] .adm-btn-danger{border-color:rgba(127,184,217,0.22);background:rgba(127,184,217,0.04);color:var(--bad);} html[data-theme="light"] .adm-btn-danger:hover:not(:disabled){background:rgba(127,184,217,0.09);} html[data-theme="light"] .adm-tbl thead th{border-color:rgba(15,23,42,0.10);color:var(--svg-faint);} html[data-theme="light"] .adm-tbl tbody tr{border-color:rgba(15,23,42,0.07);} html[data-theme="light"] .adm-avatar{border-color:rgba(15,23,42,0.12);background:rgba(15,23,42,0.04);color:rgb(var(--ink2));} html[data-theme="light"] .adm-role-leader{color:#116289;} html[data-theme="light"] .adm-count-badge{border-color:rgba(15,23,42,0.10);background:rgba(15,23,42,0.03);color:rgb(var(--ink2));} html[data-theme="light"] .adm-code-val{color:#116289;} /* ── COLD SEVERITY REMAP — neutralize Tailwind's warm defaults globally ── Dark theme: ice-cyan for ok/positive, steel-blue for warn/elevated, cold-alarm for critical. Light theme: scoped overrides above maintain WCAG-AA contrast on white surfaces. These rules sit at low specificity so light-theme scoped rules win cleanly. */ .text-red-400{ color:var(--bad); } .text-red-300\/90{ color:var(--bad); } .hover\:text-red-400:hover{ color:#66D9FF; } .bg-red-500\/10{ background-color:rgba(127,184,217,0.07); } .hover\:bg-red-500\/10:hover{ background-color:rgba(127,184,217,0.10); } .border-red-400\/30{ border-color:rgba(127,184,217,0.22); } .text-emerald-400{ color:#00BFFF; } .text-emerald-300\/90{ color:#00BFFF; } .bg-emerald-500\/10{ background-color:rgba(0,191,255,0.07); } .hover\:bg-emerald-500\/10:hover{ background-color:rgba(0,191,255,0.10); } .border-emerald-400\/30{ border-color:rgba(0,191,255,0.20); } .text-amber-400{ color:#66D9FF; } .text-amber-200\/75{ color:#66D9FF; } .text-amber-100\/90{ color:#66D9FF; } .hover\:text-amber-100:hover{ color:#00BFFF; } .bg-amber-400\/10{ background-color:rgba(102,217,255,0.07); } .border-amber-400\/30{ border-color:rgba(102,217,255,0.22); } .border-amber-400\/10{ border-color:rgba(102,217,255,0.08); } /* ── hero h1 — ensure thin display weight for the main headline ── */ /* ═══════════ DRAMA LAYER · deck-grade cover + instrument opening ═══════════ Majesty from confidence + space + precision: a deep radial depth field under the obsidian, the landing as a cover (thin tracked ARETÉ + signal-bars emblem + one cyan rule), and the Overview opening on a massive weight-200 glowing reading. */ /* deep radial depth beneath the app (dark only) — static, restrained */ body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(110% 75% at 50% -12%, rgba(0,191,255,0.05), transparent 58%), radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,0.55), transparent 58%); } html[data-theme="light"] body::before{ display:none; } /* landing cover atmosphere — the overlay needs its own scanline + radial (it sits above body::after) */ #landing::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(85% 62% at 50% 24%, rgba(0,191,255,0.055), transparent 62%), radial-gradient(130% 90% at 50% 118%, rgba(0,0,0,0.60), transparent 58%); } /* the scanline over the entrance is GONE (2026-09-14). The constitution retires it (§12) and it was the one texture on the front door that no room in the product carries — visible as banding straight across the wordmark. The body scanline underneath is untouched; this was the landing's own second copy. */ html[data-theme="light"] #landing::before{ display:none; } /* the cover is absolute — while the landing is up, the app shell beneath stays void (no dashboard text ghosting through the scrim, even without backdrop-filter support) */ body:has(> #landing:not(.hidden)) > div.relative.z-10{ visibility:hidden; } /* signal-bars emblem — the owned mark: thin vertical bars on a shared baseline */ .sig-emblem{ display:flex; align-items:flex-end; gap:5px; height:26px; } .sig-emblem i{ display:block; width:2px; background:var(--ice); } .sig-emblem i:nth-child(3){ box-shadow:0 0 10px rgba(0,191,255,.55); } html[data-theme="light"] .sig-emblem i{ background:#116289; } html[data-theme="light"] .sig-emblem i:nth-child(3){ box-shadow:0 0 8px rgba(17,98,137,.30); } /* two-bar brand mark (the logo): a small signal beside a bigger one; glow on the tall bar */ .sig-emblem.sig-duo i:nth-child(2){ box-shadow:0 0 10px rgba(0,191,255,.55); } html[data-theme="light"] .sig-emblem.sig-duo i:nth-child(2){ box-shadow:0 0 8px rgba(17,98,137,.30); } /* Bias Analysis — the strata instrument + legend; stacks on narrow screens so the ring can be large */ .bias-strata-wrap{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; align-items:center; } @media (max-width:560px){ .bias-strata-wrap{ grid-template-columns:1fr; justify-items:center; } .bias-strata-wrap>div:last-child{ width:100%; } } /* Blind Spots — The Field as a periodic table of reasoning faults */ .fault-fam{ margin-top:22px; } .fault-fam-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:9px; border-bottom:1px solid var(--grid); } .fault-fam-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; box-shadow:0 0 9px currentColor; } .fault-fam-lbl{ font-family:"Manrope",system-ui,sans-serif; font-size:11px; letter-spacing:.04em; color:rgb(var(--ink)); font-weight:600; } .fault-fam-sub{ font-size:11.5px; color:var(--svg-label); font-style:italic; } .fault-fam-n{ margin-left:auto; font-family:"Manrope",system-ui,sans-serif; font-size:10px; letter-spacing:.1em; color:var(--svg-faint); } .fault-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:9px; } .fault-el{ position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 4px 9px; border-radius:6px; border:1px solid rgba(var(--c),0.28); background:linear-gradient(158deg, rgba(var(--c),0.11), rgba(var(--c),0.015)); cursor:pointer; overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .fault-el::before{ content:''; position:absolute; inset:0; background:radial-gradient(115% 80% at 50% -10%, rgba(var(--c),0.16), transparent 68%); opacity:.75; pointer-events:none; } .fault-el:hover{ transform:translateY(-3px); border-color:rgba(var(--c),0.62); box-shadow:0 12px 30px -14px rgb(var(--c)); } .fault-el-num{ position:absolute; top:5px; left:7px; font-family:"Manrope",system-ui,sans-serif; font-size:8.5px; color:rgba(var(--c),0.8); } .fault-el-sym{ position:relative; font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:23px; font-weight:600; letter-spacing:-.01em; line-height:1; color:rgb(var(--c)); } .fault-el-name{ position:relative; font-size:8px; line-height:1.16; text-align:center; color:var(--svg-label); max-width:100%; overflow:hidden; } @media (max-width:560px){ .fault-grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); } .fault-el-sym{ font-size:20px; } } /* MENU — four modes: original (labelled) · icons (rail) · moving (auto-hide sliver) · hidden (disappears) */ .nav-mode-sel{ display:flex; align-items:center; gap:4px; padding:0 2px 8px; margin-bottom:6px; border-bottom:1px solid rgba(0,191,255,0.06); } .nm-btn{ width:24px; height:22px; display:grid; place-items:center; border-radius:4px; border:1px solid rgba(0,191,255,0.08); color:var(--svg-label); cursor:pointer; transition:border-color .15s,background .15s,color .15s; -webkit-tap-highlight-color:transparent; } .nm-btn:hover{ border-color:rgba(0,191,255,0.35); color:var(--ice); } .nm-btn.on{ border-color:rgba(0,191,255,0.55); background:rgba(0,191,255,0.10); color:var(--ice); } @media (min-width:1024px){ #sidebar{ transition:transform .3s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); } #content-wrap{ transition:margin-left .3s cubic-bezier(.4,0,.2,1); } body.nav-hidden #sidebar{ transform:translateX(-100%) !important; } body.nav-hidden #content-wrap{ margin-left:0 !important; } /* Instagram-style auto-hide: sidebar rides in view, slides away on scroll-down and returns on scroll-up (content reflows with it); hovering the left edge peeks it back while hidden. */ body.nav-moving.nav-scrolled #sidebar{ transform:translateX(-100%) !important; } body.nav-moving.nav-scrolled #content-wrap{ margin-left:0 !important; } body.nav-moving #sidebar:hover{ transform:translateX(0) !important; } body.nav-icons #sidebar{ width:66px !important; padding-left:9px !important; padding-right:9px !important; } body.nav-icons #content-wrap{ margin-left:66px !important; } body.nav-icons #sidebar .sb-wordmark, body.nav-icons #sidebar .nav-group-label, body.nav-icons #sidebar .sb-minor, body.nav-icons #sidebar .nav-mode-sel, body.nav-icons #sidebar .nav-item > span{ display:none !important; } body.nav-icons #sidebar .brand-row{ justify-content:center; padding-left:0; padding-right:0; gap:0; } body.nav-icons #sidebar .nav-item{ justify-content:center; gap:0; padding:9px 0 !important; font-size:0 !important; } body.nav-icons #sidebar .nav-item svg{ width:19px; height:19px; } body.nav-icons #sidebar .sb-foot button{ justify-content:center; gap:0; font-size:0 !important; padding-left:0 !important; padding-right:0 !important; } /* LAYING DOWN — the nav as a horizontal top bar that auto-hides on scroll (Instagram-style) */ body.nav-lay #sidebar{ inset:0 auto auto 0 !important; width:100% !important; height:54px !important; flex-direction:row; align-items:center; gap:8px; padding:0 14px !important; border-right:0; border-bottom:1px solid rgba(0,191,255,0.10); } html[data-theme="light"] body.nav-lay #sidebar{ border-bottom-color:rgba(15,20,28,0.10); } body.nav-lay #content-wrap{ margin-left:0 !important; padding-top:54px; transition:padding-top .3s cubic-bezier(.4,0,.2,1); } body.nav-lay #content-wrap > header{ position:static !important; } body.nav-lay #sidebar .brand-row{ margin:0 !important; padding:0 6px 0 2px !important; } body.nav-lay #sidebar .sb-wordmark{ display:none; } body.nav-lay #sidebar > nav{ flex-direction:row !important; overflow-x:auto; overflow-y:hidden; flex:1 1 auto; min-width:0; padding:0 !important; margin:0 !important; gap:2px; scrollbar-width:none; } body.nav-lay #sidebar > nav::-webkit-scrollbar{ display:none; } body.nav-lay #sidebar .nav-group{ display:flex; align-items:center; gap:2px; } body.nav-lay #sidebar .nav-group > div{ flex-direction:row !important; gap:2px !important; } body.nav-lay #sidebar .nav-group-label{ display:none; } body.nav-lay #sidebar .nav-item{ padding:7px 10px !important; white-space:nowrap; font-size:12px; } body.nav-lay #sidebar .sb-foot{ flex-direction:row; margin:0 !important; padding:0 !important; gap:6px; } body.nav-lay #sidebar .sb-foot > *:not(.nav-mode-sel){ display:none !important; } body.nav-lay #sidebar .nav-mode-sel{ border:0 !important; margin:0 !important; padding:0 !important; } body.nav-lay.nav-scrolled #sidebar{ transform:translateY(-100%) !important; } body.nav-lay.nav-scrolled #content-wrap{ padding-top:0; } body.nav-lay #sidebar .sb-foot{ flex:none; } /* EVERYTHING HIDDEN — both the left sidebar AND the top toolbar gone; a floating ☰ restores it */ body.nav-allhidden #sidebar{ transform:translateX(-100%) !important; } body.nav-allhidden #content-wrap{ margin-left:0 !important; padding-top:0 !important; } body.nav-allhidden #content-wrap > header{ display:none !important; } } #nav-float{ display:none; } body.nav-allhidden #nav-float{ display:flex; } @media (max-width:1023px){ .nav-mode-sel{ display:none; } body.nav-allhidden #content-wrap > header{ display:flex !important; } body.nav-allhidden #nav-float{ display:none; } } /* the mark is ALIVE — a slow, exact signal: each bar breathes on its own phase around the shared baseline. Transform-only (no layout), amplitudes near 1 so it reads as a live trace, never as animation. Fully static under prefers-reduced-motion: reduce. */ @media (prefers-reduced-motion: no-preference){ .sig-emblem i{ transform-origin:50% 100%; animation:sigLive 5.6s cubic-bezier(.45,0,.55,1) infinite; } .sig-emblem i:nth-child(1){ animation-delay:-2.9s; --amp:.74; } .sig-emblem i:nth-child(2){ animation-delay:-1.2s; --amp:.82; } .sig-emblem i:nth-child(3){ animation-delay:0s; --amp:.88; } .sig-emblem i:nth-child(4){ animation-delay:-4.1s; --amp:.80; } .sig-emblem i:nth-child(5){ animation-delay:-2.0s; --amp:.72; } /* measuring variant — the same mark actively sampling (loading / pending states) */ .sig-measure i{ animation-name:sigMeasure; animation-duration:1.15s; } .sig-measure i:nth-child(1){ animation-delay:-.46s; } .sig-measure i:nth-child(2){ animation-delay:-.92s; } .sig-measure i:nth-child(3){ animation-delay:-.15s; } .sig-measure i:nth-child(4){ animation-delay:-.69s; } .sig-measure i:nth-child(5){ animation-delay:-.29s; } } @keyframes sigLive{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(var(--amp,.8)); } } @keyframes sigMeasure{ 0%,100%{ transform:scaleY(.34); } 50%{ transform:scaleY(1); } } /* calibration motif — the mark measuring + a tracked mono caption; replaces plain spinners */ .cal-wait{ display:flex; align-items:center; gap:12px; } .cal-wait .sig-emblem{ flex:none; } .cal-wait-lbl{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--svg-label); } /* ═══════════════════════════════════════════════════════════════════════════ THE ENTRANCE (2026-09-14) — the front door, rebuilt onto the constitution. Order on the screen, and nothing else on it: the mark · what it is · the instruction · the line you type in · the two ways in · the team door and the disclaimer. Every value below is a token or a constitution value. There are no new colours, no new radii, and one new type token (--f-mark, the wordmark face). Rhythm follows §6 — hand-tuned, small, not a uniform 24. ═══════════════════════════════════════════════════════════════════════════ */ #landing{ background:var(--bg); } /* three parts down the screen: air, the stack, the floor. .ent-in takes auto margins so it is centred in whatever is left above the floor — the floor is never pushed off the bottom and the air is never dumped in the middle. */ .ent{ position:relative; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; flex-shrink:0; padding:var(--sp-6) var(--room-pad,24px) var(--sp-5); min-height:100vh; min-height:100svh; } /* the field, one source, upper middle — the website's .sky and every room's ground */ .ent::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(ellipse 70% 55% at 50% -10%,rgba(31,126,219,.20),transparent 60%), linear-gradient(180deg,var(--bg2),var(--bg) 70%); } html[data-theme="light"] .ent::before{ background: radial-gradient(ellipse 70% 55% at 50% -10%,rgba(17,98,137,.09),transparent 60%), linear-gradient(180deg,var(--bg2),var(--bg) 70%); } .ent-in{ position:relative; width:100%; max-width:34rem; margin:auto; text-align:center; } /* ── THE MARK. Glyph and wordmark are one object, on the website's lockup: the open cube beside ARETE in Michroma at .22em, in --ice-hi. ── */ .ent-mark{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.6vw,22px); margin-bottom:18px; } .ent-glyph{ flex:none; width:clamp(34px,6.4vw,52px); height:clamp(34px,6.4vw,52px); display:block; } .ent-wordmark{ font-family:var(--f-mark); font-weight:400; font-size:clamp(25px,5.4vw,44px); line-height:1; letter-spacing:.22em; /* .22em of tracking hangs off the last letter; pull it back so the lockup is optically centred rather than centred on its own trailing air. */ margin-right:-.22em; color:var(--ice-hi); white-space:nowrap; } /* what it is. A stamp (§2), not the old uppercase-tracked overline (§12). */ .ent-stamp{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); letter-spacing:0; margin:0; } /* the hairline. It separates; it does not glow (§5: borders never glow). */ .ent-rule{ height:1px; width:88px; margin:26px auto 30px; background:var(--hair2); } /* the sentence of the room (§2): Syne 500, 28–36px, −.024em, ≤22ch */ .ent-say{ font:500 clamp(28px,4.4vw,36px)/1.06 var(--f-disp); letter-spacing:-.024em; color:rgb(var(--ink)); margin:0 0 12px; text-wrap:balance; } .ent-sub{ font:400 16px/1.5 var(--f-body); color:rgb(var(--ink2)); max-width:34ch; margin:0 auto; text-wrap:balance; } /* ── THE DOOR · one open line. The operator brings their own answer; the instrument offers no menu of what their decision might be. ── */ .ent-door{ margin:36px 0 0; } .door{ display:flex; align-items:center; gap:10px; width:100%; margin:0 auto; padding:0 2px 12px; position:relative; } .door::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hair2); transition:background var(--dur-2) var(--ease-inst); } .door:focus-within::after{ background:var(--ice); } .door-in{ flex:1 1 auto; min-width:0; background:transparent; border:0; outline:0; color:rgb(var(--ink)); font:400 clamp(16px,2.2vw,18px)/1.5 var(--f-body); padding:9px 0; letter-spacing:-.005em; } .door-in::placeholder{ color:rgb(var(--ink3)); } .door-go{ flex:none; width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center; background:none; cursor:pointer; color:rgb(var(--ink3)); border:1px solid transparent; transition:color var(--dur-1), border-color var(--dur-1), transform var(--dur-2) var(--ease-inst); } .door-go:hover{ color:rgb(var(--ink)); border-color:var(--hair2); transform:translateX(2px); } .door-go:active{ transform:translateX(2px) scale(.985); } .door-go:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; color:rgb(var(--ink)); } .door-note{ font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); margin:14px 0 0; } /* ── THE TWO WAYS IN. Quiet text exits (§9), 44px targets: this is the only route into onboarding on a phone and in the installed Android build. ── */ .ent-exits{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 22px; margin-top:26px; } .door-alt{ font:500 14px var(--f-body); color:rgb(var(--ink2)); background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; min-height:44px; padding:0 8px; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; text-decoration-color:var(--hair2); transition:color var(--dur-1), text-decoration-color var(--dur-1); } .door-alt:hover{ color:rgb(var(--ink)); text-decoration-color:currentColor; } .door-alt:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; border-radius:var(--r-1); } /* the team door: real, and one rung further back than the two personal ones */ .door-alt--quiet{ font-size:13px; color:rgb(var(--ink3)); } /* ── THE FLOOR. Not a third block in the stack: the stack is centred in the screen and this sits at the bottom of it, so the middle of the composition stays empty on purpose instead of by accident. ── */ .ent-floor{ position:relative; width:100%; text-align:center; padding-top:18px; display:flex; flex-direction:column; align-items:center; gap:8px; } .ent-legal{ font:400 12.5px/1.55 var(--f-body); color:rgb(var(--ink3)); max-width:44ch; margin:0; } .ent-legal a{ color:rgb(var(--ink2)); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--hair2); } .ent-legal a:hover{ color:rgb(var(--ink)); } /* the cue rides in the flow now — it was absolute on the section floor and landed on top of the disclaimer at 700px tall. */ .ent-floor .lp-cue{ position:static; transform:none; margin-top:0; padding:6px 14px; } .ent-floor .lp-cue span{ font:500 13px var(--f-body); letter-spacing:0; color:inherit; } /* ── ARRIVAL. Opacity plus a 12px rise, staggered 80ms, once (§10). Nothing moves at rest on this screen. ── */ @media (prefers-reduced-motion:no-preference){ .ent-in > *{ animation:ent-rise var(--dur-3) var(--ease-inst) both; } .ent-in > :nth-child(1){ animation-delay:0ms; } .ent-in > :nth-child(2){ animation-delay:80ms; } .ent-in > :nth-child(3){ animation-delay:160ms; } .ent-in > :nth-child(4){ animation-delay:240ms; } .ent-in > :nth-child(5){ animation-delay:320ms; } .ent-in > :nth-child(6){ animation-delay:400ms; } .ent-in > :nth-child(7){ animation-delay:480ms; } .ent-in > :nth-child(8){ animation-delay:560ms; } } @keyframes ent-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } /* ── PHONE. Its own composition, not the desktop narrowed (§11): the lockup stacks so the wordmark keeps its tracking instead of shrinking to hold a glyph beside it, the two ways in become one column of full-width 44px targets, and the rhythm closes up so the door stays above the fold. ── */ @media (max-width:600px){ .ent{ padding:var(--sp-6) 20px calc(var(--sp-6) + env(safe-area-inset-bottom,0px)); } .ent-mark{ flex-direction:column; gap:16px; margin-bottom:16px; } .ent-glyph{ width:40px; height:40px; } .ent-wordmark{ font-size:clamp(23px,7.6vw,30px); } .ent-rule{ margin:22px auto 24px; } .ent-door{ margin-top:30px; } .ent-exits{ flex-direction:column; gap:2px; margin-top:24px; width:100%; } .ent-exits .door-alt{ width:100%; justify-content:center; } .ent-floor{ padding-top:var(--sp-5); } } /* THE SHORT PHONE (an SE is 375x667). Measured: the stack came to 758px, so the floor fell off the bottom and the entrance scrolled. The rhythm closes by a third — nothing is removed, and the type never drops below the 16px the input needs to stop iOS zooming on focus. */ @media (max-width:600px) and (max-height:740px){ .ent{ padding-top:var(--sp-5); padding-bottom:var(--sp-4); } .ent-mark{ gap:12px; margin-bottom:12px; } .ent-glyph{ width:34px; height:34px; } .ent-rule{ margin:16px auto 18px; } .ent-say{ font-size:26px; } .ent-door{ margin-top:24px; } .ent-exits{ margin-top:16px; } .ent-floor{ padding-top:12px; gap:6px; } } /* landscape phone: the screen is all width and no height — hold the door on it */ @media (max-height:560px) and (max-width:1023px){ .ent{ min-height:0; padding-top:var(--sp-5); padding-bottom:var(--sp-5); } .ent-rule{ margin:16px auto 18px; } .ent-door{ margin-top:24px; } .ent-floor{ padding-top:var(--sp-5); } } /* ── OVERVIEW · instrument opening — the reading as a precision verdict ── */ .instrument-hero{ position:relative; padding:8px 4px 30px; border-bottom:1px solid var(--grid2); } .ih-head{ display:flex; align-items:center; gap:16px; margin-bottom:28px; } .ih-head .gold-rule{ flex:1; } .ih-num{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',-apple-system,sans-serif; font-weight:200; letter-spacing:-.045em; font-size:clamp(6.5rem,19vw,18rem); line-height:.86; font-variant-numeric:tabular-nums; display:inline-block; } @media (min-width:1024px){ .ih-num{ font-size:clamp(10rem,15.5vw,18rem); } } .ih-unit{ font-size:clamp(.8rem,1.4vw,1.05rem); letter-spacing:.18em; color:var(--svg-label); } .ih-cap{ font-size:12px; letter-spacing:.04em; color:var(--svg-faint); } .ih-ruler{ height:12px; max-width:430px; margin-top:18px; background: repeating-linear-gradient(90deg, var(--grid2) 0 1px, transparent 1px 48px) 0 0/100% 100% no-repeat, repeating-linear-gradient(90deg, var(--grid2) 0 1px, transparent 1px 8px) 0 100%/100% 6px no-repeat; -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent); mask-image:linear-gradient(90deg,#000 62%,transparent); } .ih-verdict{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',-apple-system,sans-serif; font-weight:200; letter-spacing:-.03em; } /* ── SIGNATURE MOMENTS · the reading locks in, the ruler draws, the verdict arrives ── One-shot classes added by JS. Every keyframe binding lives inside no-preference, so prefers-reduced-motion: reduce disables ALL of it — values still land instantly. */ @media (prefers-reduced-motion: no-preference){ .ih-lock{ animation:ihLock .6s cubic-bezier(.22,1,.36,1); } .ih-ruler-draw{ animation:rulerDraw .9s cubic-bezier(.22,1,.36,1) both; } .ih-verdict-in{ animation:verdictIn .5s cubic-bezier(.22,1,.36,1) both; } } @keyframes ihLock{ 0%{ filter:brightness(1.45); } 100%{ filter:brightness(1); } } @keyframes rulerDraw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } } @keyframes verdictIn{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } } /* instrument roster row — hairline, not soft consumer card */ .ws-row{ display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(0,191,255,0.05);padding:10px 0; } .ws-row:first-child{ border-top:1px solid rgba(0,191,255,0.05); } html[data-theme="light"] .ws-row{ border-color:rgba(15,20,28,0.07); } html[data-theme="light"] .ws-row:first-child{ border-color:rgba(15,20,28,0.07); } /* instrument tag — cold, square, tracked */ .inst-tag{ display:inline-flex;align-items:center;gap:5px;border-radius:2px;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border:1px solid; } /* calendar note — cold-neutral, no warm yellow */ .cal-note-cold{ border-color:rgba(0,191,255,0.20)!important;background:rgba(0,191,255,0.05)!important; } html[data-theme="light"] .cal-note-cold{ border-color:rgba(17,98,137,0.18)!important;background:rgba(17,98,137,0.04)!important; } /* achievement card — already hairline, just fix border-radius */ .ach-card{ border-radius:4px!important; } .ach-ico{ border-radius:4px!important; } /* notif panel + items — tighten radius */ .notif-panel{ border-radius:4px!important; } .notif-ico{ border-radius:4px!important; } .cb-unlock{ border-radius:4px!important; } /* stat-ico — square instrument icon */ .stat-ico{ border-radius:4px!important; } /* ── RECALIBRATION PROTOCOL — cold surgical instrument panel ── */ #recal-panel{ background:rgba(4,7,16,0.96); } html[data-theme="light"] #recal-panel{ background:rgba(244,244,244,0.96) !important; } @media (prefers-reduced-motion: no-preference){ #recal-arc, #recal-arc-glow{ transition:stroke-dashoffset 80ms linear; } } .recal-restore{ font-family:"Manrope",system-ui,sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; } .recal-phase-lbl{ font-size:11px; font-weight:700; letter-spacing:.04em; font-family:"Manrope",system-ui,sans-serif; color:var(--svg-faint); margin-top:2px; } .recal-timer{ font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif; font-weight:200; letter-spacing:-.04em; color:var(--ice); line-height:1; } .recal-btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; border-radius:999px; border:1px solid rgba(160,225,255,.26); background:rgba(140,220,255,.05); color:rgb(var(--ink)); font-family:inherit; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; padding:0 16px; cursor:pointer; transition:background .18s,border-color .18s; } .recal-btn:hover{ background:rgba(0,191,255,0.14); border-color:rgba(0,191,255,0.45); } .recal-btn:active{ transform:scale(.98); } html[data-theme="light"] .recal-btn{ border-color:rgba(17,98,137,0.35); background:rgba(17,98,137,0.08); color:var(--ice); } /* row-mode variant: the base is width:100% for stacked use; inline rows size to content */ .recal-btn.recal-inline{ width:auto; padding-left:22px; padding-right:22px; } html[data-theme="light"] .recal-btn:hover{ background:rgba(17,98,137,0.14); border-color:rgba(17,98,137,0.5); } /* ═══════════ THE STANDING · DAILY BRIEF ═══════════ Classified-brief aesthetic: tracked mono, hairline rules, cold-monochrome, large thin glowing CIS number, spare command language. */ .brief-doc{ max-width:none; } .brief-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 52px; } @media(max-width:860px){ .brief-cols{ grid-template-columns:1fr; gap:0; } } .brief-dateline{ display:flex; flex-direction:column; gap:3px; padding-bottom:18px; border-bottom:1px solid rgba(0,191,255,0.10); margin-bottom:28px; } .brief-dateline-date{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-label); } .brief-dateline-op{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint); } html[data-theme="light"] .brief-dateline{ border-color:rgba(15,20,28,0.12); } .brief-section{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--grid); } .brief-section:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0; } .brief-section-head{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint); margin-bottom:14px; display:flex; align-items:center; gap:10px; } .brief-section-head::before{ display:none; } .brief-cis{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif; font-weight:200; letter-spacing:-.04em; line-height:.88; font-variant-numeric:tabular-nums; color:var(--ice); display:inline-block; } .brief-verdict{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif; font-weight:200; letter-spacing:-.02em; } /* block-level flex: the status verdict owns its row — buttons queue beneath, never beside */ .brief-status-compromised{ display:flex; align-items:center; gap:8px; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--bad,#7fb8d9); margin-top:8px; } .brief-status-clear{ display:flex; align-items:center; gap:8px; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ok,#00BFFF); margin-top:8px; } .brief-recal-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; border-radius:4px; border:1px solid rgba(0,191,255,0.30); background:rgba(0,191,255,0.06); color:var(--ice); font-family:inherit; font-size:10px; font-weight:700; letter-spacing:0; text-transform:none; padding:9px 18px; cursor:pointer; transition:background .18s,border-color .18s; } .brief-recal-btn:hover{ background:rgba(0,191,255,0.12); border-color:rgba(0,191,255,0.48); } .brief-recal-btn:active{ transform:scale(.98); } html[data-theme="light"] .brief-recal-btn{ border-color:rgba(17,98,137,0.30); background:rgba(17,98,137,0.07); color:#116289; } .brief-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--grid); font-size:13px; } .brief-row:last-child{ border-bottom:none; } .brief-row-bullet{ flex:none; width:4px; height:4px; border-radius:0; background:var(--svg-label); margin-top:8px; opacity:.55; } /* the second voice, shared: couture serif for prose the instrument WRITES (letters, directives) — mono stays the instrument, sans stays the interface */ .voice-counsel{ font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; } /* THE COMMON PULSE — the whole instrument breathes as one: every section's accent tick shares a single slow luminance breath, same phase everywhere (one 7s heartbeat; still under prefers-reduced-motion). Life, not motion. */ @media (prefers-reduced-motion: no-preference){ h2.overline::before, .brief-section-head::before{ display:none; } } @keyframes house-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } } /* the live state rides every room's title — a small breathing dot in the tier's color */ #page-title::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--state-col,#66D9FF); box-shadow:0 0 8px var(--state-col,#66D9FF); margin-right:10px; vertical-align:middle; } @media (prefers-reduced-motion: no-preference){ #page-title::before{ animation: house-pulse 7s ease-in-out infinite; } } /* THE DIRECTIVE speaks in the second voice — the couture serif of counsel (the two-voices doctrine: mono = the instrument, serif = the human command). System didones only: no network, no GDPR surface. */ .brief-directive{ font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; font-style:italic; font-weight:400; letter-spacing:.005em; color:var(--ice); border-left:2px solid var(--ice); padding:2px 0 2px 18px; line-height:1.5; } /* the verdict settles like ink: one breath of blur resolving to sharp — the signature motion of the daily moment (still under the section stagger) */ @media (prefers-reduced-motion: no-preference){ .brief-verdict{ animation: verdict-settle .8s cubic-bezier(.22,.61,.36,1) both; } } @keyframes verdict-settle{ from{ opacity:0; transform:translateY(8px); filter:blur(7px); } to{ opacity:1; transform:none; filter:none; } } /* the state-field ribbon's backdrop, theme-aware — the dark-tuned gradient read as a grey slab in light */ .brief-ribbon-bg{ border-radius:6px; background:radial-gradient(120% 140% at 50% 0%, rgba(20,28,46,0.5), rgba(9,11,18,0.35) 70%, transparent); } html[data-theme="light"] .brief-ribbon-bg{ background:radial-gradient(120% 140% at 50% 0%, rgba(17,98,137,0.09), rgba(15,20,28,0.03) 70%, transparent); } .brief-empty{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:80px 24px; gap:20px; } .brief-empty-overline{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint); } .brief-hold-flag{ display:inline-block; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; border:1px solid rgba(111,157,204,0.38); color:var(--bad); border-radius:2px; padding:2px 6px; vertical-align:1px; margin-left:7px; } /* brief ready banner on Overview — subtle hairline entry, dismissible */ #brief-banner{ border-color:rgba(0,191,255,0.18); background:linear-gradient(90deg,rgba(0,191,255,0.05),transparent 72%); } html[data-theme="light"] #brief-banner{ border-color:rgba(17,98,137,0.16); background:linear-gradient(90deg,rgba(17,98,137,0.05),transparent 72%); } /* ═══════════ AFFORDANCE TOOLTIPS — hover / keyboard-focus / tap reveals what each control does ═══════════ Every control tells you its job the moment you reach for it. Cold obsidian chip, mono label — a Bloomberg / Palantir affordance, not a browser tooltip: instant, styled, and (unlike native title) it also fires on tap. */ #aret-tip{ position:fixed; z-index:200; pointer-events:none; max-width:264px; opacity:0; transform:translateY(-2px); font-family:inherit; font-size:11.5px; line-height:1.5; letter-spacing:.005em; color:rgb(var(--ink)); background:linear-gradient(rgba(17,17,20,0.94),rgba(10,10,10,0.97)); border:1px solid rgba(0,191,255,0.14); border-radius:var(--card-radius); padding:7px 11px; box-shadow:0 12px 34px -14px rgba(0,0,0,0.75); transition:opacity .12s ease, transform .12s ease; } #aret-tip.on{ opacity:1; transform:translateY(0); } #aret-tip .tip-key{ color:var(--ice,#00BFFF); font-variant-numeric:tabular-nums; } #aret-tip::after{ content:""; position:absolute; left:var(--ax,16px); width:7px; height:7px; background:rgb(17,17,20); border:1px solid rgba(0,191,255,0.14); transform:rotate(45deg); } #aret-tip[data-pos="below"]::after{ top:-4px; border-right:none; border-bottom:none; } #aret-tip[data-pos="above"]::after{ bottom:-4px; border-left:none; border-top:none; } html[data-theme="light"] #aret-tip{ background:linear-gradient(#ffffff,#fbfbfa); border-color:rgba(15,23,42,0.14); box-shadow:0 12px 34px -16px rgba(15,23,42,0.28); } html[data-theme="light"] #aret-tip::after{ background:#fff; border-color:rgba(15,23,42,0.14); } @media (prefers-reduced-motion: reduce){ #aret-tip{ transition:opacity .12s ease; transform:none; } #aret-tip.on{ transform:none; } } /* ═══════════ SECTION INDICATOR — on entering a section, a chip states what happens there ═══════════ Click a section icon and this slides in under the header — its icon, its name, and one line on what the section is for — then fades. Answers "what happens in that section" the moment you arrive. */ #section-ind{ position:fixed; z-index:19; display:flex; align-items:center; gap:11px; max-width:min(540px, calc(100vw - 24px)); padding:9px 13px; border-radius:var(--card-radius); border:1px solid rgba(0,191,255,0.10); border-left:2px solid var(--ice,#00BFFF); background:linear-gradient(rgba(17,17,20,0.92),rgba(10,10,10,0.95)); box-shadow:0 16px 44px -18px rgba(0,0,0,0.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transform:translateY(-9px); pointer-events:none; transition:opacity .32s ease, transform .32s ease, visibility .32s; } #section-ind.on{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; } #section-ind .si-ico{ display:grid; place-items:center; width:27px; height:27px; border-radius:var(--card-radius); color:var(--ice,#00BFFF); background:var(--ice-dim,rgba(0,191,255,0.10)); border:1px solid var(--ice-border,rgba(0,191,255,0.32)); flex:none; } #section-ind .si-txt{ display:flex; flex-direction:column; min-width:0; } #section-ind .si-name{ font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:rgb(var(--ink)); line-height:1.25; } #section-ind .si-what{ font-family:inherit; font-size:11.5px; color:rgb(var(--ink2)); line-height:1.4; } #section-ind .si-x{ margin-left:6px; flex:none; width:20px; height:20px; border-radius:var(--card-radius); display:grid; place-items:center; color:var(--svg-faint,#55555f); font-size:16px; line-height:1; background:transparent; border:none; cursor:pointer; transition:color .15s, background .15s; } #section-ind .si-x:hover{ color:rgb(var(--ink)); background:rgba(0,191,255,0.06); } html[data-theme="light"] #section-ind{ background:linear-gradient(#ffffff,#fbfbfa); border-color:rgba(15,23,42,0.12); border-left-color:#116289; box-shadow:0 16px 44px -22px rgba(15,23,42,0.3); } html[data-theme="light"] #section-ind .si-x:hover{ background:rgba(15,23,42,0.05); } @media (prefers-reduced-motion: reduce){ #section-ind{ transition:opacity .2s ease, visibility .2s; transform:none; } #section-ind.on{ transform:none; } } /* ═══════════ THE PROOF — exhibit cards, on the app's own card system (2px, gradient border) ═══════════ */ .proof-hero{ padding:4px 0 28px; margin-bottom:26px; border-bottom:1px solid rgba(0,191,255,0.08); } .proof-eyebrow{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ice,#00BFFF); } .proof-title{ font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif; font-weight:200; letter-spacing:-.03em; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.05; margin:14px 0 0; color:rgb(var(--ink)); max-width:22ch; text-wrap:balance; } .proof-sub{ color:rgb(var(--ink2)); font-size:14px; margin-top:12px; max-width:58ch; line-height:1.62; } .proof-verdict{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:8px 14px; border-radius:var(--card-radius); border:1px solid var(--ice-border,rgba(0,191,255,0.32)); background:var(--ice-dim,rgba(0,191,255,0.10)); font-family:inherit; font-size:11.5px; letter-spacing:.04em; color:rgb(var(--ink2)); } .proof-verdict b{ color:var(--ice,#00BFFF); font-weight:600; font-variant-numeric:tabular-nums; } .proof-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } @media(max-width:760px){ .proof-grid{ grid-template-columns:1fr; } } .proof-exhibit{ position:relative; overflow:hidden; border-radius:var(--card-radius); border:1px solid transparent; padding:20px 22px 22px; background:linear-gradient(rgba(17,17,20,0.82),rgba(10,10,10,0.88)) padding-box, linear-gradient(135deg,rgba(0,191,255,0.09),rgba(0,191,255,0.03) 55%) border-box; box-shadow:0 12px 32px -16px rgba(0,0,0,0.85); } .proof-exhibit::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, rgba(0,191,255,0.6), rgba(0,191,255,0) 55%); } .proof-exhibit.span2{ grid-column:1 / -1; } .proof-exhibit-head{ font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint,#55555f); margin-bottom:14px; } html[data-theme="light"] .proof-hero{ border-color:rgba(15,23,42,0.10); } html[data-theme="light"] .proof-exhibit{ background:linear-gradient(#ffffff,#fbfbfa) padding-box, linear-gradient(135deg,rgba(15,23,42,0.12),rgba(15,23,42,0.05) 55%) border-box; box-shadow:0 16px 48px -28px rgba(0,0,0,0.35); } html[data-theme="light"] .proof-exhibit::before{ background:linear-gradient(90deg, rgba(17,98,137,0.6), rgba(17,98,137,0) 55%); } /* ═══════════ THE COMMAND DECK — ⌘K · the operator's keyboard-first control surface ═══════════ Opens showing your live cognitive state, then a state-appropriate command set. No consumer app's command bar knows the mind operating it; this one does. Bloomberg command line meets the cognitive instrument — for a principal who lives in the keyboard and has no time. */ #cmdk{ position:fixed; inset:0; z-index:130; display:none; align-items:flex-start; justify-content:center; padding-top:max(12dvh,env(safe-area-inset-top,0px)); background:rgba(2,4,10,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .cmdk-panel{ width:min(648px,94vw); border-radius:var(--card-radius); border:1px solid transparent; overflow:hidden; background:linear-gradient(rgba(15,16,20,0.97),rgba(9,9,11,0.98)) padding-box, linear-gradient(135deg,rgba(0,191,255,0.32),rgba(0,191,255,0.05) 60%) border-box; box-shadow:0 44px 110px -30px rgba(0,0,0,0.86), 0 0 70px -32px rgba(0,191,255,0.28); animation:cmdkIn .16s cubic-bezier(.2,1,.36,1); } @keyframes cmdkIn{ from{ opacity:0; transform:translateY(-8px) scale(.985); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .cmdk-panel{ animation:none; } } .cmdk-state{ display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid rgba(0,191,255,0.07); } .cmdk-cis{ font-family:Inter,ui-sans-serif,sans-serif; font-weight:200; font-size:27px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; flex:none; } .cmdk-state-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; } .cmdk-state-word{ font-family:"Manrope",system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; } .cmdk-state-dir{ font-size:12px; color:rgb(var(--ink2)); line-height:1.35; } .cmdk-bs{ margin-left:auto; text-align:right; flex:none; padding-left:12px; } .cmdk-bs-l{ font-family:"Manrope",system-ui,sans-serif; font-size:7.5px; letter-spacing:.2em; color:var(--svg-faint); } .cmdk-bs-v{ font-size:11.5px; color:rgb(var(--ink2)); margin-top:2px; } .cmdk-inp-row{ display:flex; align-items:center; gap:11px; padding:0 16px; border-bottom:1px solid rgba(0,191,255,0.07); } .cmdk-prompt{ font-family:"Manrope",system-ui,sans-serif; color:var(--ice); font-size:16px; line-height:1; } #cmdk-input{ flex:1; background:transparent; border:0; color:rgb(var(--ink)); font:400 14.5px/1.2 Inter,ui-sans-serif,system-ui,sans-serif; padding:15px 0; outline:none; } #cmdk-input::placeholder{ color:var(--svg-faint); } #cmdk-list{ max-height:46dvh; overflow:auto; padding:6px 6px 8px; overscroll-behavior:contain; } .cmdk-group{ font-family:"Manrope",system-ui,sans-serif; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint); padding:12px 12px 6px; } .cmdk-group:first-child{ padding-top:5px; } .cmdk-item{ display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--card-radius); cursor:pointer; } .cmdk-item.on{ background:var(--ice-dim,rgba(0,191,255,0.10)); } .cmdk-tag{ font-family:"Manrope",system-ui,sans-serif; font-size:7.5px; font-weight:700; letter-spacing:.04em; min-width:34px; flex:none; } .cmdk-label{ flex:1; font-size:13.5px; color:rgb(var(--ink2)); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cmdk-item.on .cmdk-label{ color:rgb(var(--ink)); } .cmdk-key{ font-family:"Manrope",system-ui,sans-serif; font-size:10px; color:var(--svg-label,#8792a3); border:1px solid rgba(0,191,255,0.16); border-radius:3px; padding:2px 7px; letter-spacing:.04em; flex:none; } .cmdk-foot{ display:flex; gap:18px; padding:9px 16px; border-top:1px solid rgba(0,191,255,0.06); font-family:"Manrope",system-ui,sans-serif; font-size:11px; letter-spacing:.04em; color:var(--svg-faint); } .cmdk-empty{ padding:22px 16px; color:var(--svg-faint); font-size:12.5px; } html[data-theme="light"] .cmdk-panel{ background:linear-gradient(#ffffff,#fbfbfa) padding-box, linear-gradient(135deg,rgba(17,98,137,0.32),rgba(15,23,42,0.08) 60%) border-box; box-shadow:0 44px 110px -34px rgba(15,23,42,0.4); } html[data-theme="light"] .cmdk-key{ border-color:rgba(15,23,42,0.18); } /* ═══════════ THE INTERCEPT — pull any decision through Areté in ~10 seconds ═══════════ */ #intercept-panel{ -webkit-backdrop-filter:blur(24px) saturate(1.12); backdrop-filter:blur(24px) saturate(1.12); } html[data-theme="light"] #intercept-panel{ background:rgba(240,242,244,0.94) !important; } .int-input{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(0,191,255,0.14); border-radius:0; padding:8px 2px 14px; font-family:inherit; font-size:19px; font-weight:300; letter-spacing:-.01em; color:rgb(var(--ink)); outline:none; transition:border-color .18s; } .int-input:focus{ border-bottom-color:rgba(0,191,255,0.55); } .int-input::placeholder{ color:var(--svg-label); } html[data-theme="light"] .int-input{ border-bottom-color:rgba(15,20,28,0.16); } html[data-theme="light"] .int-input:focus{ border-bottom-color:rgba(17,98,137,0.55); } .int-pill{ border-radius:3px; border:1px solid rgba(0,191,255,0.10); background:rgba(0,191,255,0.04); color:rgb(var(--ink2)); font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; padding:6px 12px; cursor:pointer; transition:border-color .18s,background .18s,color .18s; -webkit-tap-highlight-color:transparent; white-space:nowrap; } .int-pill:hover:not(.sel){ border-color:rgba(0,191,255,0.18); background:rgba(0,191,255,0.06); } .int-pill.sel{ border-color:rgba(0,191,255,0.48); background:rgba(0,191,255,0.10); color:rgb(var(--ink)); } html[data-theme="light"] .int-pill{ border-color:rgba(15,20,28,0.12); background:rgba(15,20,28,0.03); } html[data-theme="light"] .int-pill.sel{ border-color:rgba(17,98,137,0.48); background:rgba(17,98,137,0.09); } .int-verdict-proceed{ color:var(--ok,#00BFFF); } .int-verdict-hold{ color:var(--warn,#66D9FF); } .int-verdict-recal{ color:var(--bad,#7fb8d9); } .int-action-btn{ display:flex; align-items:center; justify-content:center; flex:1; border-radius:3px; border:1px solid; padding:12px 0; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .18s,border-color .18s,box-shadow .2s; white-space:nowrap; } .int-action-primary{ border-color:rgba(0,191,255,0.55); background:linear-gradient(92deg, rgba(38,130,186,0.95), rgba(0,191,255,0.9)); color:#fff; text-shadow:0 1px 6px rgba(4,18,30,0.35); box-shadow:0 8px 26px rgba(0,191,255,0.22); } .int-action-primary:hover{ background:linear-gradient(92deg, rgba(45,145,205,1), rgba(96,208,255,0.95)); border-color:rgba(140,220,255,0.7); box-shadow:0 10px 30px rgba(0,191,255,0.3); } .int-action-secondary{ border-color:rgba(0,191,255,0.10); background:rgba(0,191,255,0.04); color:rgb(var(--ink2)); } .int-action-secondary:hover{ background:rgba(0,191,255,0.08); border-color:rgba(0,191,255,0.18); } html[data-theme="light"] .int-action-primary{ border-color:rgba(17,98,137,0.35); background:rgba(17,98,137,0.08); color:#116289; } html[data-theme="light"] .int-action-primary:hover{ background:rgba(17,98,137,0.14); } html[data-theme="light"] .int-action-secondary{ border-color:rgba(15,20,28,0.12); background:rgba(15,20,28,0.03); color:rgb(var(--ink2)); } /* header trigger button */ .intercept-hdr-btn{ display:flex; align-items:center; gap:6px; height:36px; border-radius:6px; padding:0 11px; border:1px solid rgba(0,191,255,0.32); background:rgba(0,191,255,0.08); color:var(--ice); font-family:inherit; font-size:10.5px; font-weight:700; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .18s,border-color .18s,transform .13s; -webkit-tap-highlight-color:transparent; white-space:nowrap; } .intercept-hdr-btn:hover{ background:rgba(0,191,255,0.15); border-color:rgba(0,191,255,0.52); } .intercept-hdr-btn:active{ transform:scale(.96); } html[data-theme="light"] .intercept-hdr-btn{ border-color:rgba(17,98,137,0.30); background:rgba(17,98,137,0.07); color:#116289; } @media (max-width:480px){ .intercept-hdr-btn .int-label{ display:none; } } /* intercept report grid */ /* instrument-panel backdrop for canvas anchors — keeps light-tuned glows legible in BOTH themes (a dark data-panel on a light dashboard reads premium, à la a terminal widget). */ .viz-dark{ background:radial-gradient(130% 120% at 50% 22%, #10192e 0%, #0b1120 68%, #080c17 100%) !important; border-radius:4px; } /* intercept report — a vertical instrument read-out (label over content, hairline-separated) */ .int-report-grid{ display:flex; flex-direction:column; } .int-rg-cell{ padding:0 16px; } .int-rg-key{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--svg-faint); line-height:1.4; margin-top:16px; padding-bottom:5px; border:0 !important; } .int-report-grid > .int-rg-key:first-child{ margin-top:14px; } .int-rg-sep{ border-bottom:0; } .int-rg-border-r{ border-right:0; } .int-report-grid > .int-rg-cell:not(.int-rg-key){ padding-bottom:16px; border-bottom:1px solid rgba(0,191,255,0.06); } html[data-theme="light"] .int-report-grid > .int-rg-cell:not(.int-rg-key){ border-color:rgba(15,20,28,0.08); } .int-report-grid > .int-rg-cell:not(.int-rg-key):last-child{ border-bottom:0; } /* SEEK COUNSEL button — inline grid-cell action, Areté voice */ .int-seek-counsel{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:3px; border:1px solid rgba(0,191,255,0.28); background:rgba(0,191,255,0.06); color:var(--ice); cursor:pointer; transition:background .15s,border-color .15s; -webkit-tap-highlight-color:transparent; } .int-seek-counsel:hover{ background:rgba(0,191,255,0.12); border-color:rgba(0,191,255,0.42); } .int-seek-counsel:active{ transform:scale(.97); } html[data-theme="light"] .int-seek-counsel{ border-color:rgba(17,98,137,0.30); background:rgba(17,98,137,0.06); color:#116289; } html[data-theme="light"] .int-seek-counsel:hover{ background:rgba(17,98,137,0.12); border-color:rgba(17,98,137,0.45); } /* ── severity-graded intercept ── */ .int-sev{ font-family:inherit; font-weight:700; letter-spacing:.04em; font-size:clamp(0.95rem,3vw,1.2rem); line-height:1.1; } .int-sev-clear{ color:var(--ok); } .int-sev-guarded{ color:var(--warn); } .int-sev-compromised{ color:var(--bad); } .int-sev-critical{ color:var(--crit); } .int-sev-ungraded{ color:var(--svg-faint); } .int-fresh{ font-family:inherit; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--svg-label); } .int-verdict-gate{ color:var(--crit); } /* stale-read re-confirm strip (the 3-tap micro-probe) */ .int-probe{ border-top:1px solid rgba(0,191,255,0.06); padding:11px 14px; } html[data-theme="light"] .int-probe{ border-color:rgba(15,20,28,0.07); } .int-probe-btn{ border-radius:3px; border:1px solid rgba(0,191,255,0.12); background:rgba(0,191,255,0.03); color:rgb(var(--ink2)); font-family:inherit; font-size:9.5px; font-weight:700; letter-spacing:0; text-transform:none; padding:6px 11px; cursor:pointer; transition:border-color .18s,background .18s,color .18s; -webkit-tap-highlight-color:transparent; } .int-probe-btn:hover{ border-color:rgba(0,191,255,0.42); color:rgb(var(--ink)); } .int-probe-btn.sel{ border-color:rgba(0,191,255,0.48); background:rgba(0,191,255,0.10); color:rgb(var(--ink)); } html[data-theme="light"] .int-probe-btn{ border-color:rgba(15,20,28,0.14); background:rgba(15,20,28,0.03); } html[data-theme="light"] .int-probe-btn:hover{ border-color:rgba(17,98,137,0.45); } html[data-theme="light"] .int-probe-btn.sel{ border-color:rgba(17,98,137,0.48); background:rgba(17,98,137,0.09); } /* the friction gate — grave, dignified; the ONLY place the cold red frames a surface */ .int-gate{ border-top:1px solid rgba(180,83,95,0.35); background:rgba(180,83,95,0.045); padding:14px; } html[data-theme="light"] .int-gate{ border-color:rgba(162,58,72,0.30); background:rgba(162,58,72,0.045); } .int-gate-head{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--crit); } /* ── THE INTERCEPT · wide command-surface layout — decision left, the read right; panes scroll internally (thin instrument scrollbar), never the whole card ── */ #intercept-panel{ backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .int-card{ max-width:1120px; max-height:min(92dvh,780px); padding:0; overflow:hidden; display:flex; flex-direction:column; position:relative; } html:not([data-theme="light"]) .int-card{ background: radial-gradient(120% 80% at 50% -8%, rgba(0,191,255,0.075) 0%, transparent 46%), radial-gradient(140% 115% at 50% 70%, #0b0f1b 0%, #070a12 80%) !important; box-shadow:0 46px 110px rgba(0,0,0,0.62), 0 0 0 1px rgba(0,191,255,0.05); } html:not([data-theme="light"]) .int-card::before{ content:''; position:absolute; top:0; left:8%; right:8%; height:1px; background:linear-gradient(90deg, transparent, rgba(0,191,255,0.55), transparent); z-index:2; pointer-events:none; } .int-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid rgba(0,191,255,0.07); flex:none; } html[data-theme="light"] .int-head{ border-color:rgba(15,20,28,0.08); } .int-shell{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); flex:1; min-height:0; } .int-pane-l{ display:flex; flex-direction:column; padding:22px; border-right:1px solid rgba(0,191,255,0.06); overflow-y:auto; min-height:0; } html[data-theme="light"] .int-pane-l{ border-color:rgba(15,20,28,0.08); } .int-pane-r{ min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,191,255,0.28) transparent; } .int-pane-r::-webkit-scrollbar{ width:7px; } .int-pane-r::-webkit-scrollbar-thumb{ background:rgba(0,191,255,0.22); border-radius:4px; } .int-pane-r::-webkit-scrollbar-track{ background:transparent; } .int-actions{ margin-top:auto; padding-top:20px; } @media (max-width:1023px){ .int-card{ max-width:32rem; } .int-shell{ display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; } .int-pane-l{ border-right:0; overflow-y:visible; flex:none; padding-bottom:10px; } .int-pane-r{ overflow-y:visible; } .int-actions{ margin-top:20px; padding-top:0; } } /* THE RETICLE — the Intercept's living instrument (left pane) */ .int-reticle{ flex:1; min-height:230px; margin-top:22px; position:relative; overflow:hidden; border:1px solid rgba(0,191,255,0.06); box-shadow:inset 0 0 64px rgba(3,5,10,0.65); } /* instrument key ticks — every report label carries the house accent */ .int-report-grid .int-rg-key::before{ content:''; display:inline-block; width:9px; height:1px; background:var(--ice); opacity:.5; margin-right:8px; vertical-align:middle; } html[data-theme="light"] .int-reticle{ border-color:rgba(15,20,28,0.10); } @media (max-width:1023px){ .int-reticle{ flex:none; height:190px; min-height:0; } } /* the dictation button injected after the input — keep it a quiet chip, right-aligned */ .int-pane-l > #intercept-input + button{ align-self:flex-end; margin:10px 0 0 0 !important; } /* the self-armed badge — lit only when the instrument opened the gate on its own */ .int-armed{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--warn); border:1px solid rgba(217,164,65,0.35); background:rgba(217,164,65,0.07); padding:4px 10px; border-radius:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .int-armed-dot{ width:5px; height:5px; border-radius:50%; background:var(--warn); flex:none; animation:intArmedPulse 1.6s ease-in-out infinite; } @keyframes intArmedPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } } @media (max-width:640px){ .int-armed{ display:none } } /* gate actions */ .int-action-override{ border-color:rgba(180,83,95,0.38); background:rgba(180,83,95,0.06); color:var(--crit); } .int-action-override:hover{ background:rgba(180,83,95,0.12); border-color:rgba(180,83,95,0.55); } html[data-theme="light"] .int-action-override{ border-color:rgba(162,58,72,0.38); background:rgba(162,58,72,0.05); color:var(--crit); } /* intercept record (the audit trail) */ .int-rec-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border:1px solid rgba(0,191,255,0.06); border-radius:3px; padding:9px 12px; } html[data-theme="light"] .int-rec-row{ border-color:rgba(15,20,28,0.09); } .int-rec-sev{ font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; } .int-rec-flag{ display:inline-block; font-family:inherit; font-size:11px; font-weight:700; letter-spacing:.04em; border:1px solid rgba(180,83,95,0.42); color:var(--crit); border-radius:2px; padding:2px 6px; } html[data-theme="light"] .int-rec-flag{ border-color:rgba(162,58,72,0.42); } /* ══════════════════ ARETE SENSE · Sensor panel ══════════════════ */ .sense-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;min-height:24px} .sense-switch{position:relative;width:36px;height:20px;border-radius:10px;border:1px solid rgba(0,191,255,0.14);background:rgba(0,191,255,0.07);transition:background .25s,border-color .25s;flex:none} .sense-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:7px;background:#8a8a94;transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s} [aria-checked="true"] .sense-switch{background:rgba(0,191,255,0.20);border-color:rgba(0,191,255,0.40)} [aria-checked="true"] .sense-switch::after{transform:translateX(16px);background:#00BFFF} html[data-theme="light"] .sense-switch{background:rgba(15,20,28,0.07);border-color:rgba(15,20,28,0.14)} html[data-theme="light"] [aria-checked="true"] .sense-switch{background:rgba(17,98,137,0.15);border-color:rgba(17,98,137,0.40)} html[data-theme="light"] [aria-checked="true"] .sense-switch::after{background:#116289} .sense-bar-track{height:2px;border-radius:0;background:rgba(0,191,255,0.06);overflow:hidden} .sense-bar-fill{height:100%;border-radius:0;transition:width .8s cubic-bezier(.22,1,.36,1),background .5s} html[data-theme="light"] .sense-bar-track{background:rgba(15,20,28,0.07)} .sense-bars{display:flex;align-items:flex-end;gap:2px;height:13px;flex:none} .sense-bar-seg{width:3px;border-radius:1px 1px 0 0;background:rgba(0,191,255,0.08);transition:background .4s,height .4s cubic-bezier(.22,1,.36,1)} .sense-bar-seg.on{background:var(--ice)} html[data-theme="light"] .sense-bar-seg{background:rgba(15,20,28,0.10)} html[data-theme="light"] .sense-bar-seg.on{background:var(--ice)} .sense-conf{font-size:11px;font-weight:700;letter-spacing:.04em;border-radius:2px;padding:2px 7px;border:1px solid;line-height:1.4;white-space:nowrap} .sense-conf.s-high{color:#00BFFF;border-color:rgba(0,191,255,0.32);background:rgba(0,191,255,0.06)} .sense-conf.s-medium{color:#66D9FF;border-color:rgba(102,217,255,0.26);background:rgba(102,217,255,0.04)} .sense-conf.s-low,.sense-conf.s-unavail{color:var(--svg-faint);border-color:rgba(85,85,95,0.22);background:transparent} html[data-theme="light"] .sense-conf.s-high{color:#116289;border-color:rgba(17,98,137,0.32);background:rgba(17,98,137,0.06)} html[data-theme="light"] .sense-conf.s-medium{color:#3f6789;border-color:rgba(63,103,137,0.26);background:rgba(63,103,137,0.04)} html[data-theme="light"] .sense-conf.s-low,html[data-theme="light"] .sense-conf.s-unavail{color:var(--svg-faint);border-color:rgba(140,150,168,0.20)} .sense-load-num{font-family:Inter,ui-sans-serif,system-ui,'Segoe UI',sans-serif;font-weight:200;letter-spacing:-.04em;color:var(--ice);font-size:clamp(2.8rem,9vw,4.6rem);line-height:1;transition:color .5s} .sense-live-dot{width:5px;height:5px;border-radius:0;background:var(--ice);box-shadow:0 0 6px var(--ice);flex:none} @media (prefers-reduced-motion: no-preference){.sense-live-dot{animation:bhvPulse 1.6s ease-out infinite}} .sense-row{border-bottom:1px solid rgba(0,191,255,0.05);padding:14px 0} .sense-row:last-child{border-bottom:none;padding-bottom:0} html[data-theme="light"] .sense-row{border-color:rgba(15,20,28,0.06)} .sense-field{background:rgba(0,191,255,0.04);border:1px solid rgba(0,191,255,0.10);border-radius:4px;color:rgb(var(--ink));font-family:inherit;font-size:13px;padding:6px 10px;width:88px;transition:border-color .18s} .sense-field:focus{outline:none;border-color:rgba(0,191,255,0.50)} html[data-theme="light"] .sense-field{background:rgba(15,20,28,0.03);border-color:rgba(15,20,28,0.12)} html[data-theme="light"] .sense-field:focus{border-color:rgba(17,98,137,0.45)} /* ── INSTALLED FULL-SCREEN: THE SAFE AREAS ───────────────────────────── The document declares viewport-fit=cover, so once Areté is installed (Android TWA, iOS standalone) the page owns the strips behind the status bar and the gesture bar. In a browser tab that never showed, because Chrome's own address bar sat in the top strip — which is exactly why the layout only broke when the address bar came off. Pad the surfaces that touch a screen edge. env() resolves to 0px everywhere else, so desktop and in-tab rendering are untouched. Portrait-locked in the manifest, so left/right insets are deliberately left alone. Completes the three rules at ~399: those already inset the header's sides and the drawer (leave those to them — the convention here is max(), which keeps the design's own spacing as the floor rather than adding to it). The gap was the header's TOP, which nothing covered. */ header.sticky{padding-top:env(safe-area-inset-top,0px);height:calc(4rem + env(safe-area-inset-top,0px))} #read-progress{top:calc(4rem + env(safe-area-inset-top,0px))} main.view{padding-bottom:max(1.5rem,env(safe-area-inset-bottom,0px))} #landing{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)} #gate,#welcome,#protocol,#celebrate,#recal-panel,#intercept-panel{padding-top:max(1rem,env(safe-area-inset-top,0px));padding-bottom:max(1rem,env(safe-area-inset-bottom,0px))} /* ── THE INSTRUMENT IN A HAND (≤640px) ───────────────────────────────── Measured at 390px, not assumed: six 36px controls plus their gaps claimed 288px of the bar, leaving #page-title 2px to render a 146px word. The name of the view the operator is looking at was erased on every phone. Earlier mobile work proved there was no horizontal overflow — true, and not the same thing as fitting: the layout collapsed the title instead of scrolling. The desk affordances step out of a phone header. The floating window is Document Picture-in-Picture, which Android Chrome does not implement at all; the command palette is Ctrl/⌘K, a keyboard's tool. The Veil stays — it is the one control that matters MORE with someone sitting beside you. */ @media (max-width:640px){ #float-btn,#cmdk-btn{display:none!important} header.sticky{padding-left:max(0.75rem,env(safe-area-inset-left));padding-right:max(0.75rem,env(safe-area-inset-right))} header.sticky > div:last-child{gap:0.375rem} header.sticky .theme-toggle,header.sticky #avatar{width:34px;height:34px} #page-title{font-size:0.95rem;letter-spacing:-0.01em} /* The label voice is drawn for a wide column. At .42em tracking, 9.5px type plus overflow-wrap:anywhere, a phone breaks "COGNITIVE ARCHITECTURE" in half and snaps a date across two lines mid-number. Loosen the tracking — the label still reads as a label, and stops fracturing. */ .overline{ letter-spacing:.22em; overflow-wrap:normal; } } /* ── THE BRIEF'S LABEL COLUMN ────────────────────────────────────────── The brief states each fact as label-then-fact across two columns: a fixed gutter for the label, the rest for the reading. At desk width that is the right shape. At 390px the gutter still claimed 132 of 358 usable pixels for one short word, and the sentence beside it broke every three words. Below 640px the two columns become two lines — the label sits above the fact it names, and the fact gets the whole width of the phone. */ .brief-row{ display:grid; grid-template-columns:132px 1fr; gap:22px; } .brief-row-canon{ grid-template-columns:118px 1fr; gap:26px; } @media (max-width:640px){ .brief-row,.brief-row-canon{ grid-template-columns:1fr; gap:8px; } /* The dateline carries the app's widest tracking (.52em) on its longest string — "DAILY BRIEF · MONDAY, AUGUST 17, 2026" needs ~377px of the 358 a phone has, so the year fell to a line of its own under the date it belongs to. Tighter here, and it holds one line. */ .brief-dateline-date,.brief-dateline-op{ letter-spacing:.26em; } } html[data-theme="light"] #view-anatomy .brief-recal-btn{ color:#7fdcff !important; border-color:rgba(127,220,255,.5) !important; }