/* ============================================================================
OBSIDIAN LAYER — asymmetrycomputing.com
Ported from the PRISM investor experience deck. Loads LAST on every page, so
it is the final word over both `solutions/solutions.css` and `polish-*.css`.
Three jobs:
1. NEUTRALISE the legacy light-theme overrides baked into polish-*.css.
2. Provide the shared obsidian component vocabulary (scenes, wordmarks,
instrument panels, rules, motion primitives).
3. Provide `.dossier` — the small-type system that keeps EVERY word of the
existing copy on the page, in full, crawlable and selectable, while the
big visuals carry the narrative. Never display:none, never 0px, never
colour-on-same-colour: demoted text stays real text at a real size with
a real contrast ratio. That is what keeps us findable by search engines
and by LLM crawlers.
========================================================================== */
/* ---- 1. tokens (mirrors solutions.css; also grounds pages that don't load it) */
:root{
--bg:#030711; --panel:#0b101b; --panel-strong:#101726; --raised:#151f32;
--ink:#f8fafc; --ink-soft:#e0e7f4; --muted:#b2bfd5; --muted-soft:#95a7c3; --quiet:#7f93b3;
--line:rgba(182,199,229,.13); --line-strong:rgba(182,199,229,.26);
--accent:#6366f1; --accent-bright:#a5a6ff; --glow:#818cf8;
--mint:#58dfae; --amber:#edbe72; --violet:#c3b0ff;
--ring:inset 0 1px 0 rgba(255,255,255,.045);
--ease:cubic-bezier(.2,.7,.2,1);
--serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
color-scheme:dark;
}
html,body{background:var(--bg);color:var(--ink)}
/* ---- 2. neutralise the legacy light theme ------------------------------- */
/* polish-*.css warmed a set of cool light grounds to #f4f4f1 and painted several
chrome surfaces white. On obsidian every one of those reads as a blown-out
slab, so they are re-grounded here rather than deleted from polish (which the
SPA still depends on for layout). */
[class~="bg-[#F4F7FB]"],[class~="bg-[#F4F8FF]"],[class~="bg-[#F5F7FA]"],
[class~="bg-white"],[class~="bg-[#f4f4f1]"],[class~="bg-slate-50"],[class~="bg-gray-50"],
[class~="bg-stone-50"],[class~="bg-stone-100"]{background:var(--panel)!important;color:var(--ink)}
[class*="text-[#102033]"],[class~="text-slate-900"],[class~="text-gray-900"],
[class~="text-stone-900"],[class~="text-black"]{color:var(--ink)!important}
[class~="text-slate-600"],[class~="text-slate-500"],[class~="text-gray-600"],
[class~="text-stone-600"],[class~="text-stone-500"]{color:var(--muted)!important}
[class*="border-stone-200"],[class*="border-slate-200"],[class*="border-gray-200"]{border-color:var(--line)!important}
/* polish-20260620.css paints the ground with `!important` (its C0 "silver
gradient" plus four per-domain body tints). Those are the single strongest
light-theme rules on the site, so they are overridden explicitly here rather
than edited out of polish — the SPA still needs the rest of that file. */
html,body{background:var(--bg)!important}
body{background:
radial-gradient(120% 60% at 50% -8%,rgba(99,102,241,.10),rgba(99,102,241,0) 60%),
linear-gradient(180deg,#040914 0%,var(--bg) 48%,#02050d 100%)!important;
background-repeat:no-repeat!important;background-attachment:fixed!important;color:var(--ink)!important}
/* per-domain grounds keep their hue, re-based onto obsidian */
body.app-energy{background:
radial-gradient(120% 60% at 50% -8%,rgba(129,140,248,.13),transparent 60%),
linear-gradient(180deg,#060d1c 0%,#040a16 48%,#02050d 100%)!important}
body.app-di{background:
radial-gradient(120% 60% at 50% -8%,rgba(88,223,174,.11),transparent 60%),
linear-gradient(180deg,#05110d 0%,#030c0a 48%,#02060a 100%)!important}
body.app-portfolio{background:
radial-gradient(120% 60% at 50% -8%,rgba(195,176,255,.12),transparent 60%),
linear-gradient(180deg,#0a0819 0%,#060513 48%,#03030d 100%)!important}
body.app-frtb{background:
radial-gradient(120% 60% at 50% -8%,rgba(237,190,114,.10),transparent 60%),
linear-gradient(180deg,#0c0a14 0%,#07060f 48%,#030309 100%)!important}
/* polish's own design tokens, re-pointed at obsidian. Redefining these is the
highest-leverage fix: polish references them throughout, so one override here
re-grounds every surface that uses them instead of chasing each rule. */
:root{
--pz-silver-hi:#0c1220; --pz-silver:#060b16; --pz-silver-lo:#03060f;
--pz-navy:#02050d; --pz-blue:#6366f1; --pz-sky:#818cf8;
--pz-line:rgba(182,199,229,.13); --pz-line-2:rgba(182,199,229,.26);
--pz-sheen:rgba(255,255,255,.05);
--pz-strip:linear-gradient(105deg,#a5a6ff 0%,#6366f1 44%,#2a2f6b 100%);
--pz-chrome:linear-gradient(155deg,#141c2c 0%,#0a0f1a 58%,#050810 100%);
--ac-blue:#818cf8;
}
/* chrome that polish paints white with `!important` */
.site-nav-inner{background:linear-gradient(180deg,rgba(16,23,38,.92),rgba(7,12,22,.92))!important;
border:1px solid var(--line)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
box-shadow:var(--ring),0 18px 50px rgba(0,0,0,.55)!important}
.site-brand{color:var(--ink)!important}
.site-links a{color:var(--muted)!important}
.site-links a:hover,.site-links a[aria-current="page"]{color:var(--accent-bright)!important}
.site-login{color:var(--muted)!important}
.site-status{color:var(--mint)!important;background:rgba(88,223,174,.09)!important;border:1px solid rgba(88,223,174,.26)!important}
.site-status i{background:var(--mint)!important}
.skip-link{background:var(--panel-strong)!important;color:var(--ink)!important;border:1px solid var(--line-strong)}
/* white on --accent (#6366f1) measures 4.47:1 — just under AA for 13.5px text.
A slightly deeper indigo clears it at ~5.3:1 without changing the hue. */
.site-cta{background:#5457d6!important;color:#fff!important}
.site-cta:hover{background:var(--glow)!important}
.nav-dd-menu{background:var(--panel-strong)!important;border:1px solid var(--line-strong)!important;
box-shadow:0 30px 70px rgba(0,0,0,.6),var(--ring)!important}
.nav-dd-menu .dd-t{color:var(--ink)!important}
.nav-dd-menu .dd-d{color:var(--muted)!important}
.nav-dd-menu a:hover{background:rgba(99,102,241,.13)!important}
.nav-dd-foot .nda{color:var(--muted-soft)!important}
/* polish paints these chips with 50-60% WHITE, which stays light on obsidian */
.ov .lbl.tr,.ov .panel .v,.ov .val,.val,.lbl.tr{color:#c3c4ff!important}
.lane a,.chip{background:rgba(182,199,229,.07)!important;border:1px solid var(--line)!important;color:var(--ink-soft)!important}
.lane a:hover,.chip:hover{background:rgba(99,102,241,.16)!important;border-color:rgba(99,102,241,.4)!important}
/* The primary CTA: polish painted it WHITE, and a later hero rule left it fully
transparent (an invisible button). Both are wrong on obsidian — the primary
action is the indigo accent. #5457d6 keeps white text at ~5.3:1. */
.btn-primary,a.btn-primary,.hero-cta .btn-primary{background:#5457d6!important;color:#fff!important;
border-color:transparent!important;box-shadow:0 10px 30px rgba(84,87,214,.32)!important}
.btn-primary:hover,a.btn-primary:hover{background:#6366f1!important;
box-shadow:0 14px 38px rgba(99,102,241,.44)!important}
.btn-ghost{border:1px solid var(--line-strong)!important;background:transparent!important;color:var(--ink)!important}
.btn-ghost:hover{background:rgba(182,199,229,.08)!important;border-color:var(--accent)!important}
/* the eyebrow/kicker pill: was a white chip, now a lit indigo chip */
.eyebrow{background:rgba(99,102,241,.08)!important;border:1px solid rgba(99,102,241,.26)!important;
color:var(--accent-bright)!important;box-shadow:none!important}
/* accent word: the old #1d35ff→#6a3cff ramp goes muddy on obsidian; use the
deck's ink→periwinkle→indigo ramp, which stays legible to the last stop. */
.grad,.h1xl .grad,.hero h1 .grad{background:linear-gradient(110deg,var(--ink) 3%,#bcc0fe 37%,#818cf8 79%)!important;
-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
/* per-domain hero art was a light photographic wedge; keep it as a dim texture */
.hero-art{opacity:.14!important;mix-blend-mode:luminosity}
/* Small accent labels (10-12px tags, "Explore →" links, domain chips) were tuned
for a light ground; at that size the dimmer domain accents fall under 4.5:1 on
obsidian. Lift the small-text variants without touching the large display use. */
.atag,.tag,.show-go,.go,.lbl,.cap,.sec-kicker,.dd-m,.eyebrow,.kicker{--accent-bright:#c3c4ff}
.show-go,.go,a.show-go{color:#c3c4ff!important}
body.app-di .atag,body.app-di .tag,.atag.di,.tag.di{color:#7ff0c4!important}
body.app-portfolio .atag,body.app-portfolio .tag,.atag.portfolio,.tag.portfolio{color:#d4c6ff!important}
body.app-energy .atag,body.app-energy .tag,.atag.energy,.tag.energy{color:#aebfff!important}
body.app-frtb .atag,body.app-frtb .tag{color:#f3d191!important}
/* Simulator + demo chrome: chart panels and table headers were light surfaces. */
.sim-chart-hd .t,.sim-legend{color:var(--muted)!important}
.sim-chart-hd .tag{background:rgba(99,102,241,.12)!important;border-color:rgba(99,102,241,.3)!important}
.simwrap,.sim-panel,.sim-chartwrap,.sim-bars,.sim-body,.sim-figure{background:var(--panel)!important;border-color:var(--line)!important}
/* `.docmain` is a CSS-grid item: default min-width:auto lets wide /
blocks push the column past the viewport on mobile. Applies to every doc page. */
.docmain{min-width:0}
thead th,.tbl th,table th{color:var(--muted)!important;background:rgba(182,199,229,.05)!important}
/* polish C2 "silver surfaces" paints EVERY card component with a near-white
gradient at `!important` (.card/.stat/.flownode/.callout/.cmp/.cons/.trust/
.appcard/.post/.article and the simulator surfaces). Because a gradient lives
in background-image, not background-color, it is invisible to naive contrast
tooling — so this leak survived several audits. Re-ground them all here. */
.card,.stat,.flownode,.callout,.cmp,.cons,.trust,.appcard,.ev .card,
.show-copy .proof,.post,.article,.sim-panel,.sim-card{
background:linear-gradient(180deg,#121a2b,var(--panel))!important;
border:1px solid var(--line)!important;
box-shadow:var(--ring),0 16px 34px -22px rgba(0,0,0,.75)!important}
.sim-chartwrap,.sim-bars{background:var(--panel)!important;border:1px solid var(--line)!important}
.sim-seg button{background:var(--panel)!important;color:var(--muted)!important;border-color:var(--line)!important}
.sim-seg button.on{background:var(--accent)!important;color:#fff!important}
/* the SPA's own pill nav */
nav[class*="border-stone-200"][class*="rounded-full"]{
background:linear-gradient(180deg,rgba(16,23,38,.92),rgba(7,12,22,.92))!important;
border:1px solid var(--line)!important;box-shadow:var(--ring),0 18px 50px rgba(0,0,0,.55)!important}
#root span[class*="bg-emerald-50"][class*="text-emerald-700"]{
background:rgba(88,223,174,.10)!important;border-color:rgba(88,223,174,.26)!important;color:var(--mint)!important}
/* The energy hero scrim fades the page ground over a photo so the headline stays
readable. It was keyed to the old warm #f4f4f1; rebased onto obsidian. */
body.app-energy .hero-scrim{background:linear-gradient(95deg,
rgba(3,7,17,.96) 0%,rgba(3,7,17,.90) 30%,rgba(3,7,17,.64) 52%,
rgba(3,7,17,.28) 74%,rgba(3,7,17,0) 92%)!important}
@media(max-width:760px){body.app-energy .hero-scrim{background:linear-gradient(180deg,
rgba(3,7,17,.88) 0%,rgba(3,7,17,.68) 50%,rgba(3,7,17,.44) 100%)!important}}
/* ---- 3. ambient field --------------------------------------------------- */
/* One fixed indigo bloom + a cool mint counterweight, so the ground is never
flat black. Inert, behind everything, costs nothing to composite. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse at 85% -5%,rgba(99,102,241,.10),transparent 47%),
radial-gradient(ellipse at 8% 108%,rgba(88,223,174,.05),transparent 46%)}
/* ---- 4. display typography (deck cover) --------------------------------- */
/* The deck's signature: very large, LIGHT weight, tight tracking — the opposite
of the old weight-800 marketing headline — with one italic accent word. */
.wordmark{font:400 clamp(58px,9.5vw,144px)/.85 var(--sans);letter-spacing:-.07em;color:var(--ink);margin:0}
.display{font:400 clamp(34px,3.9vw,60px)/1.08 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.display em,.wordmark em{font-style:italic;font-weight:400;color:var(--accent-bright)}
.kicker{font:500 10px/1.6 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent-bright);
display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:20px;height:1px;background:currentColor;flex:0 0 auto}
.gradient-text{background:linear-gradient(110deg,var(--ink) 3%,#bcc0fe 37%,#818cf8 79%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ---- 5. scene bands ----------------------------------------------------- */
/* A full-bleed darker band used to stage a visual. Breaks the page into
"instrument" moments the way the deck breaks into chapters. */
.scene{position:relative;margin:clamp(40px,7vw,84px) 0;padding:clamp(34px,6vw,72px) 0;
background:linear-gradient(180deg,var(--panel) 0%,#070d1a 100%);
border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.scene::after{content:"";position:absolute;inset:auto auto -40% -10%;width:55%;height:150%;
background:radial-gradient(circle,rgba(99,102,241,.16),transparent 62%);pointer-events:none}
.scene>*{position:relative;z-index:1}
.scene.mint::after{background:radial-gradient(circle,rgba(88,223,174,.13),transparent 62%)}
.scene.violet::after{background:radial-gradient(circle,rgba(195,176,255,.14),transparent 62%)}
/* A faint engineering grid, for scenes that stage a chart or diagram. */
.gridfield{position:absolute;inset:0;pointer-events:none;opacity:.5;
background-image:linear-gradient(rgba(182,199,229,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(182,199,229,.05) 1px,transparent 1px);
background-size:52px 52px;
-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 78%);
mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 78%)}
/* ---- 6. the dossier: keep every word ----------------------------------- */
/* Where a section's narrative is carried by a visual, its original prose moves
into a `.dossier` rather than being cut. Real text, 13px, AA contrast against
the panel, always in the DOM and always visible — no toggles, no clipping.
`` is also supported for long reference copy: the
summary stays visible and crawlers read the full contents regardless. */
.dossier{margin-top:26px;padding:20px 22px;background:rgba(11,16,27,.72);
border:1px solid var(--line);border-left:2px solid rgba(99,102,241,.45);border-radius:14px;
font-size:13px;line-height:1.72;color:var(--muted);max-width:92ch}
.dossier>*+*{margin-top:11px}
.dossier h2,.dossier h3,.dossier h4{font:600 11px/1.5 var(--mono);letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-bright);margin:0 0 4px}
.dossier p{margin:0;font-size:13px;line-height:1.72;color:var(--muted)}
.dossier strong,.dossier b{color:var(--ink-soft);font-weight:600}
.dossier a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:2px}
.dossier ul,.dossier ol{margin:0;padding-left:18px}
.dossier li+li{margin-top:6px}
.dossier-label{display:block;font:600 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:var(--muted-soft);margin-bottom:10px}
details.dossier>summary{cursor:pointer;list-style:none;font:600 11px/1.5 var(--mono);letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-bright);margin-bottom:2px}
details.dossier>summary::-webkit-details-marker{display:none}
details.dossier>summary::after{content:" +";opacity:.6}
details.dossier[open]>summary::after{content:" −"}
details.dossier[open]>summary{margin-bottom:12px}
/* ---- 7. motion primitives (from the deck) ------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes barSheen{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes curveEnter{from{stroke-dashoffset:var(--dash,1200)}to{stroke-dashoffset:0}}
@keyframes driftSlow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-18px,0)}}
@keyframes sweepLine{0%{transform:scaleX(0);transform-origin:left}55%{transform:scaleX(1);transform-origin:left}
56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.rise{animation:rise .65s var(--ease) both}
.levitate{animation:levitate 7s ease-in-out infinite}
.drift{animation:driftSlow 22s ease-in-out infinite}
/* staggered children, deck-style */
.stagger>*{animation:rise .65s var(--ease) both}
.stagger>*:nth-child(2){animation-delay:.06s}
.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.14s}
.stagger>*:nth-child(5){animation-delay:.18s}
.stagger>*:nth-child(6){animation-delay:.22s}
/* a hairline that draws itself in, used to separate scene beats */
.rule-sweep{height:1px;background:linear-gradient(90deg,transparent,var(--accent-bright),transparent);
animation:sweepLine 6s var(--ease) infinite}
/* SVG paths marked data-draw animate their stroke in when revealed */
[data-draw]{stroke-dasharray:var(--dash,1200);stroke-dashoffset:var(--dash,1200)}
.in [data-draw],[data-draw].in{animation:curveEnter 1.6s var(--ease) forwards}
/* ---- 8. instrument panels (already dark — just harmonised) ------------- */
.panel,.instrument{background:var(--panel-strong);border:1px solid var(--line);box-shadow:var(--ring)}
/* ---- 9. tables, code, forms ------------------------------------------- */
table{color:var(--ink-soft)}
th{color:var(--muted)!important;background:rgba(182,199,229,.04)}
td,th{border-color:var(--line)!important}
tbody tr:hover{background:rgba(99,102,241,.05)}
pre,code,kbd,samp{color:#d6deeb}
pre{background:#070d17!important;border:1px solid var(--line)}
input,select,textarea{background:var(--panel)!important;color:var(--ink)!important;
border:1px solid var(--line-strong)!important;border-radius:11px}
input::placeholder,textarea::placeholder{color:var(--muted-soft)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;
box-shadow:0 0 0 3px rgba(99,102,241,.18)!important;outline:none}
label{color:var(--ink-soft)}
hr{border:0;border-top:1px solid var(--line)}
img:not([src$=".svg"]):not(.site-logo):not(.no-dim){opacity:.94}
/* ---- 10. scrollbars ---------------------------------------------------- */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--bg)}
/* ---- 11. reduced motion ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
}
/* Without JS the reveal system must never leave content invisible. */
@media (scripting:none){.reveal,.stagger>*{opacity:1!important;transform:none!important;animation:none!important}}