/* Font loading (preconnect + non-blocking preload) lives in research-engine.html's , not here — a stylesheet @import is render-blocking and can't be discovered until this file itself has loaded. */ :root{ --red:#d14343;--red-ink:#e26060;--red2:#a63333;--green:#cfcfd4;--amber:#d9d9dd;--blue:#d9d9dd; --bg:#0c0c0d;--bg2:#131315;--panel:#161618;--panel2:#1d1d20;--line:#2a2a2e; --line2:#3a3a40;--text:#ededee;--soft:#c4c4c9;--muted:#9a9aa0;--white:#fff; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:132px} body{min-height:100vh;background:radial-gradient(circle at 50% -12%,rgba(209,67,67,.05),transparent 32%),linear-gradient(180deg,var(--bg),var(--bg2) 46%,#0e0e10);color:var(--text);font:400 15px/1.55 Inter,system-ui,sans-serif;overflow-x:hidden} button,input,select{font:inherit} button{cursor:pointer} a{color:inherit} .skip{position:fixed;left:12px;top:-80px;z-index:10000;background:var(--red);color:#fff;padding:10px 14px;border-radius:10px;font-weight:900;text-decoration:none}.skip:focus{top:12px} .top-strip{padding:8px 16px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#0c0c0d,#17171a,#0c0c0d);color:var(--muted);font-size:.78rem;font-weight:800}.top-strip strong{color:var(--red-ink)} .nav{position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:66px;padding:10px 22px;border-bottom:1px solid var(--line);background:rgba(12,12,13,.94);backdrop-filter:blur(20px)} .brand{font-family:'Barlow Condensed',sans-serif;font-size:1.65rem;font-weight:900;letter-spacing:2px;color:var(--red-ink);text-decoration:none;white-space:nowrap}.nav-links{display:flex;align-items:center;justify-content:center;gap:5px;flex:1}.nav-links a,.nav-action{padding:8px 10px;border-radius:999px;color:var(--muted);font-size:.73rem;font-weight:900;letter-spacing:1px;text-decoration:none;text-transform:uppercase;white-space:nowrap}.nav-links a:hover,.nav-links a.active,.nav-action:hover{color:var(--red-ink);background:rgba(255,255,255,.06)}.nav-action{border:1px solid var(--line2);background:rgba(29,29,32,.72)}#theme-toggle{border:1px solid var(--line2);background:rgba(29,29,32,.72);border-radius:999px;color:var(--muted);cursor:pointer;font-size:.73rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:8px 10px;display:inline-flex;align-items:center;gap:6px} .wrap{width:min(1440px,calc(100% - 36px));margin:0 auto} .hero{padding:58px 0 22px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:22px;align-items:stretch}.hero-copy,.system-card{border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(29,29,32,.94),rgba(14,14,16,.96));box-shadow:0 30px 90px rgba(0,0,0,.32)}.hero-copy{padding:34px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(209,67,67,.28);border-radius:999px;background:rgba(209,67,67,.10);color:var(--red-ink);font-size:.7rem;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.hero h1{margin-top:16px;font-family:'Barlow Condensed',sans-serif;font-size:clamp(3.4rem,7vw,7.2rem);font-weight:900;letter-spacing:-1px;line-height:.82;text-transform:uppercase}.hero h1 span{display:block;color:var(--text)}.hero-copy>p{max-width:850px;margin-top:20px;color:var(--soft);font-size:1rem}.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line2);border-radius:999px;background:rgba(255,255,255,.035);color:var(--muted);font-size:.68rem;font-weight:900;letter-spacing:.7px;text-transform:uppercase}.chip.green{color:var(--green);border-color:var(--line2);background:rgba(255,255,255,.05)}.chip.amber{color:var(--amber);border-color:var(--line2);background:rgba(255,255,255,.05)}.chip.red{color:var(--red-ink);border-color:rgba(209,67,67,.28);background:rgba(209,67,67,.10)} .system-card{padding:26px}.system-card h2,.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;text-transform:uppercase}.system-card h2{font-size:1.55rem;color:var(--text);width:fit-content;padding-bottom:7px;border-bottom:3px solid rgba(209,67,67,.28)}.system-list{display:grid;gap:10px;margin-top:16px}.system-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid rgba(255,255,255,.065);border-radius:14px;background:rgba(0,0,0,.18)}.system-row span{color:var(--muted);font-size:.8rem;font-weight:800}.system-row b{font-size:.74rem;color:var(--soft);text-transform:uppercase}.dot{width:8px;height:8px;border-radius:999px;background:var(--amber);box-shadow:0 0 0 5px rgba(255,255,255,.08)}.dot.ok{background:var(--green);box-shadow:0 0 0 5px rgba(255,255,255,.08)}.dot.bad{background:var(--red);box-shadow:0 0 0 5px rgba(209,67,67,.10)} .gate{margin:8px 0 34px;padding:26px;border:1px solid rgba(209,67,67,.28);border-radius:26px;background:linear-gradient(135deg,rgba(209,67,67,.06),rgba(22,22,24,.95))}.gate-grid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:22px;align-items:center}.gate h2{font:900 2.1rem/1 'Barlow Condensed',sans-serif;text-transform:uppercase}.gate p{margin-top:9px;color:var(--muted)}.gate-form{display:grid;grid-template-columns:1fr auto;gap:9px}.field,.select{width:100%;min-width:0;padding:12px 13px;border:1px solid var(--line2);border-radius:13px;background:#0f0f11;color:var(--text);font-weight:750;outline:0}.field:focus,.select:focus{border-color:var(--red-ink);box-shadow:0 0 0 4px rgba(209,67,67,.10)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 15px;border:0;border-radius:999px;background:var(--red);color:#fff;font-size:.76rem;font-weight:950;letter-spacing:.8px;text-decoration:none;text-transform:uppercase;box-shadow:0 12px 28px rgba(0,0,0,.35)}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn.ghost{border:1px solid var(--line2);background:rgba(255,255,255,.035);box-shadow:none;color:var(--text)}.btn.small{min-height:34px;padding:7px 11px;font-size:.68rem}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .message{min-height:20px;margin-top:8px;color:var(--muted);font-size:.78rem}.message.ok{color:var(--green)}.message.error{color:var(--red-ink)} .engine{display:none}.engine.unlocked{display:block} .toolbar{position:sticky;top:66px;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:11px 13px;border:1px solid var(--line);border-radius:18px;background:rgba(19,19,21,.94);backdrop-filter:blur(18px)}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line2);border-radius:999px;color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase}.status-pill strong{color:var(--text)} .module-nav{position:sticky;top:128px;z-index:850;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px;padding:8px;border:1px solid var(--line);border-radius:20px;background:rgba(12,12,13,.94);backdrop-filter:blur(18px)}.module-tab{border:1px solid transparent;border-radius:14px;background:transparent;color:var(--muted);padding:12px;font-weight:950;letter-spacing:1px;text-transform:uppercase}.module-tab:hover{color:var(--text);background:rgba(255,255,255,.035)}.module-tab.active{border-color:rgba(209,67,67,.28);background:linear-gradient(135deg,rgba(209,67,67,.14),rgba(209,67,67,.05));color:#fff} .module{display:none;padding:8px 0 48px}.module.active{display:block}.module-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.module-head h2{font:900 clamp(2.2rem,4vw,3.5rem)/.92 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--text);width:fit-content;padding-bottom:8px;border-bottom:3px solid rgba(209,67,67,.28)}.module-head p{max-width:800px;color:var(--muted);font-size:.86rem}.module-controls{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.control{display:grid;gap:5px;min-width:120px}.control label{color:var(--muted);font-size:.64rem;font-weight:900;letter-spacing:1px;text-transform:uppercase}.control .field,.control .select{padding:9px 11px;border-radius:11px;font-size:.8rem} .source-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:15px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(22,22,24,.72);color:var(--muted);font-size:.74rem}.source-bar b{color:var(--text)} .kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}.kpi{min-height:106px;padding:15px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(29,29,32,.94),rgba(16,16,18,.94));overflow:hidden}.kpi span{display:block;color:var(--muted);font-size:.64rem;font-weight:900;letter-spacing:1px;text-transform:uppercase}.kpi b{display:block;margin-top:8px;font:900 2rem/.95 'Barlow Condensed',sans-serif;color:var(--text)}.kpi small{display:block;margin-top:7px;color:var(--muted);font-size:.68rem}.kpi.positive b{color:var(--green)}.kpi.negative b{color:var(--red-ink)}.kpi.caution b{color:var(--amber)} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.panel{min-width:0;margin-bottom:14px;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(29,29,32,.9),rgba(14,14,16,.94));box-shadow:0 20px 65px rgba(0,0,0,.22)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}.panel h3{font:900 1.35rem/1 'Barlow Condensed',sans-serif;text-transform:uppercase}.panel-head p,.panel-note{margin-top:5px;color:var(--muted);font-size:.73rem}.panel-note{padding:10px 12px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:12px}.panel-note.red{border-color:rgba(209,67,67,.28);background:rgba(209,67,67,.08)}.panel-note.green{border-color:var(--line2);background:rgba(255,255,255,.04)} .chart{position:relative;min-height:330px;border:1px solid rgba(255,255,255,.055);border-radius:16px;background:rgba(0,0,0,.2);overflow:hidden}.chart svg{display:block;width:100%;height:100%;min-height:330px}.chart-empty{display:grid;place-items:center;min-height:330px;padding:28px;text-align:center;color:var(--muted)}.chart-tooltip{position:absolute;z-index:10;pointer-events:none;display:none;padding:8px 10px;border:1px solid var(--line2);border-radius:10px;background:#0a0a0b;color:var(--text);font-size:.72rem;box-shadow:0 12px 32px rgba(0,0,0,.4)} .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:rgba(10,10,11,.35)}table{width:100%;min-width:760px;border-collapse:collapse}th{position:sticky;top:0;z-index:1;padding:11px 10px;border-bottom:1px solid var(--line);background:#1a1a1c;color:var(--muted);font-size:.63rem;font-weight:900;letter-spacing:1px;text-align:left;text-transform:uppercase;white-space:nowrap}td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.055);color:var(--soft);font-size:.78rem;vertical-align:middle}tbody tr:hover{background:rgba(255,255,255,.025)}td.num{text-align:right;font-variant-numeric:tabular-nums}td.good{color:var(--green);background:rgba(255,255,255,.04)}td.bad{color:var(--red-ink);background:rgba(209,67,67,.08)}td.warn{color:var(--amber);background:rgba(255,255,255,.055)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.73rem} .heatmap{display:grid;grid-template-columns:160px repeat(4,minmax(68px,1fr));gap:5px}.heatmap>div{display:grid;place-items:center;min-height:44px;padding:7px;border:1px solid rgba(255,255,255,.055);border-radius:9px;color:var(--soft);font-size:.7rem;text-align:center}.heatmap .h{min-height:32px;background:#1a1a1c;color:var(--muted);font-weight:900;text-transform:uppercase}.heatmap .label{justify-items:start;background:#1a1a1c;font-weight:800;text-align:left}.heat-0{background:rgba(255,255,255,.04)}.heat-1{background:rgba(255,255,255,.08)}.heat-2{background:rgba(255,255,255,.12)}.heat-3{background:rgba(255,255,255,.18);color:var(--green)!important} .lab-inputs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:12px}.profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0}.profile{padding:10px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.16)}.profile b{display:block;color:var(--text);font-size:.78rem}.profile span{display:block;margin-top:4px;color:var(--muted);font-size:.65rem}.profile strong{display:block;margin-top:8px;font:900 1.35rem 'Barlow Condensed',sans-serif}.profile.good strong{color:var(--green)}.profile.bad strong{color:var(--red-ink)} .formula{margin-top:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#0d0d0e;color:var(--muted);font:600 .68rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto} .loader{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.18);border-top-color:var(--red-ink);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .skeleton{position:relative;overflow:hidden;color:transparent!important;background:#232326!important}.skeleton:after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:shimmer 1.2s infinite}@keyframes shimmer{to{transform:translateX(100%)}} .footer{margin-top:40px;padding:30px 18px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.76rem}.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px}.footer a{color:var(--red-ink);text-decoration:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:1120px){.nav-links{display:none}.hero-grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:1fr 1fr}.lab-inputs{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){.wrap{width:min(100% - 22px,1440px)}.nav{padding:10px 12px}.nav-action,#theme-toggle{font-size:.64rem}.hero{padding-top:34px}.hero-copy,.system-card{padding:22px}.hero h1{font-size:clamp(3.2rem,18vw,5rem)}.gate-grid,.grid-2,.grid-3{grid-template-columns:1fr}.gate-form{grid-template-columns:1fr}.toolbar{top:66px;align-items:flex-start}.toolbar-right{justify-content:flex-end}.module-nav{top:139px;grid-template-columns:repeat(2,1fr)}.module-head{align-items:flex-start;flex-direction:column}.module-controls{width:100%}.control{flex:1;min-width:130px}.kpis{grid-template-columns:1fr 1fr}.lab-inputs{grid-template-columns:1fr 1fr}.profile-grid{grid-template-columns:1fr 1fr}.heatmap{grid-template-columns:110px repeat(4,minmax(60px,1fr));overflow:auto}.chart,.chart svg,.chart-empty{min-height:280px}} @media(max-width:460px){.kpis{grid-template-columns:1fr}.lab-inputs,.profile-grid{grid-template-columns:1fr}.module-nav{top:151px}.hero-chips{gap:6px}.top-strip{font-size:.68rem}} /* Page-wide ambient red pulse (mirrors index.html), so the lightning/black- red theme is consistent site-wide rather than home-page-only. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 85% 0%, rgba(209,67,67,.05) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(255,255,255,.03) 0%, transparent 55%); animation: pagePulse 9s ease-in-out infinite; } @keyframes pagePulse { 0%,100% { opacity:.55; } 50% { opacity: var(--page-pulse-peak, 1); } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; opacity: .75; } } /* Keyboard focus ring. Plain text links previously showed no visible focus change at all, so keyboard users could not tell where they were. 2px at 3:1+ against both the dark surfaces and the white chart panel satisfies WCAG 2.4.7 and 1.4.11. :focus-visible keeps mouse clicks ring-free. */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--red-ink,#e26060);outline-offset:3px;border-radius:4px;} /* These inputs set outline:0 for their resting state, which also killed the sitewide focus ring; restate it at matching specificity. */ .field:focus-visible,.control:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--red-ink,#e26060);outline-offset:2px;} /* ─── LIGHT MODE ─────────────────────────────────────────────────────────── theme.js stores the visitor's choice as localStorage['st-theme'] and puts .light-mode on ; without this block research-engine.html stayed black for anyone who picked Light on the homepage. Same variable names, spec light values. Every rule below either re-points a variable or restates a hard-coded dark surface / white overlay that would vanish or invert on white. */ body.light-mode{ --red:#b3251d;--red-ink:#b3251d;--red2:#8c1a14;--green:#3f3f46;--amber:#26262a;--blue:#26262a; --bg:#ffffff;--bg2:#f6f6f7;--panel:#ffffff;--panel2:#fafafa;--line:#e3e3e6; --line2:#cfcfd4;--text:#141416;--soft:#3f3f46;--muted:#5f5f66;--white:#141416; } body.light-mode{background:radial-gradient(circle at 50% -12%,rgba(179,37,29,.04),transparent 32%),linear-gradient(180deg,#ffffff,#f6f6f7 46%,#eeeef0)} body.light-mode::before{ background:radial-gradient(ellipse 80% 50% at 85% 0%, rgba(179,37,29,.04) 0%, transparent 55%), radial-gradient(ellipse 60% 40% at 10% 100%, rgba(0,0,0,.03) 0%, transparent 55%); } /* nav + strips */ body.light-mode .top-strip{background:linear-gradient(90deg,#ffffff,#f2f2f4,#ffffff)} body.light-mode .nav{background:rgba(255,255,255,.94)} body.light-mode .nav-links a:hover,body.light-mode .nav-links a.active,body.light-mode .nav-action:hover{background:rgba(0,0,0,.05)} body.light-mode .nav-action,body.light-mode #theme-toggle{background:rgba(0,0,0,.03)} /* hero + system card */ body.light-mode .hero-copy,body.light-mode .system-card{background:linear-gradient(145deg,#ffffff,#fafafa);box-shadow:0 20px 54px rgba(0,0,0,.07)} body.light-mode .eyebrow{border-color:rgba(179,37,29,.22);background:rgba(179,37,29,.07)} body.light-mode .system-card h2,body.light-mode .module-head h2{border-bottom-color:rgba(179,37,29,.22)} body.light-mode .chip{background:rgba(0,0,0,.03)} body.light-mode .chip.green,body.light-mode .chip.amber{background:rgba(0,0,0,.04)} body.light-mode .chip.red{border-color:rgba(179,37,29,.22);background:rgba(179,37,29,.07)} body.light-mode .system-row{border-color:rgba(0,0,0,.07);background:rgba(0,0,0,.025)} body.light-mode .dot,body.light-mode .dot.ok{box-shadow:0 0 0 5px rgba(0,0,0,.06)} body.light-mode .dot.bad{box-shadow:0 0 0 5px rgba(179,37,29,.07)} /* gate + controls */ body.light-mode .gate{border-color:rgba(179,37,29,.22);background:linear-gradient(135deg,rgba(179,37,29,.05),#ffffff)} body.light-mode .field,body.light-mode .select{background:#ffffff} body.light-mode .field:focus,body.light-mode .select:focus{box-shadow:0 0 0 4px rgba(179,37,29,.10)} body.light-mode .btn{box-shadow:0 10px 24px rgba(0,0,0,.14)} body.light-mode .btn.ghost{background:rgba(0,0,0,.035)} /* toolbar + module nav */ body.light-mode .toolbar{background:rgba(255,255,255,.94)} body.light-mode .module-nav{background:rgba(255,255,255,.94)} body.light-mode .module-tab:hover{background:rgba(0,0,0,.04)} body.light-mode .module-tab.active{border-color:rgba(179,37,29,.22);background:rgba(179,37,29,.07);color:var(--red)} body.light-mode .source-bar{background:rgba(0,0,0,.025)} /* panels + kpis */ body.light-mode .kpi{background:linear-gradient(145deg,#ffffff,#fafafa)} body.light-mode .panel{background:linear-gradient(145deg,#ffffff,#fafafa);box-shadow:0 14px 40px rgba(0,0,0,.06)} body.light-mode .panel-note{background:rgba(0,0,0,.025)} body.light-mode .panel-note.red{border-color:rgba(179,37,29,.22);background:rgba(179,37,29,.06)} body.light-mode .panel-note.green{background:rgba(0,0,0,.035)} /* charts */ body.light-mode .chart{border-color:rgba(0,0,0,.07);background:rgba(0,0,0,.02)} body.light-mode .chart-tooltip{background:#ffffff;box-shadow:0 12px 32px rgba(0,0,0,.16)} /* tables */ body.light-mode .table-wrap{background:#ffffff} body.light-mode th{background:#f2f2f4} body.light-mode td{border-bottom-color:rgba(0,0,0,.07)} body.light-mode tbody tr:hover{background:rgba(0,0,0,.025)} body.light-mode td.good{background:rgba(0,0,0,.035)} body.light-mode td.bad{background:rgba(179,37,29,.06)} body.light-mode td.warn{background:rgba(0,0,0,.05)} /* heatmap: the intensity ramp was white-on-black, so invert it to black-on-white */ body.light-mode .heatmap>div{border-color:rgba(0,0,0,.08)} body.light-mode .heatmap .h,body.light-mode .heatmap .label{background:#f2f2f4} body.light-mode .heat-0{background:rgba(0,0,0,.035)} body.light-mode .heat-1{background:rgba(0,0,0,.07)} body.light-mode .heat-2{background:rgba(0,0,0,.11)} body.light-mode .heat-3{background:rgba(0,0,0,.16)} /* misc surfaces */ body.light-mode .profile{background:rgba(0,0,0,.025)} body.light-mode .formula{background:#f6f6f7} body.light-mode .loader{border-color:rgba(0,0,0,.14);border-top-color:var(--red)} body.light-mode .skeleton{background:#e8e8ea!important} body.light-mode .skeleton:after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent)} /* ─── RESULT PROVENANCE ──────────────────────────────────────────────────── Study numbers are hypothetical and gross, and they only mean anything with the timing convention that produced them. This strip sits directly above the numbers it qualifies (never in the footer): a short tag plus a one-line statement, with the full frozen convention one click away in the expander. `.missing` is the pre-fix cached-snapshot state and borrows the existing red accent token — no new colour literal. */ .provenance{display:grid;gap:8px;margin-bottom:15px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)} .provenance-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .provenance-tag{flex:none;padding:5px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--text);font-size:.64rem;font-weight:900;letter-spacing:1px;text-transform:uppercase} .provenance-line{color:var(--muted);font-size:.75rem} .provenance-detail{margin-top:2px} .provenance-detail summary{color:var(--soft);font-size:.66rem;font-weight:900;letter-spacing:1px;text-transform:uppercase} .provenance-detail[open] summary{margin-bottom:9px} .provenance-list{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:7px 14px} .provenance-list dt{color:var(--muted);font-size:.64rem;font-weight:900;letter-spacing:.9px;text-transform:uppercase} .provenance-list dd{color:var(--soft);font-size:.75rem} .provenance.missing{border-color:var(--red-ink);background:rgba(255,255,255,.045)} .provenance.missing .provenance-tag{color:var(--red-ink);border-color:var(--red-ink)} .provenance.missing .provenance-line{color:var(--red-ink)} /* Short form repeated beside each study table, so a hit rate is never read without the basis it was computed on. */ .result-basis{margin:0 0 8px;color:var(--muted);font-size:.65rem;font-weight:900;letter-spacing:.9px;text-transform:uppercase} .result-basis.missing{color:var(--red-ink)} .basis-pill.missing strong{color:var(--red-ink)} @media(max-width:760px){.provenance-list{grid-template-columns:1fr;gap:3px 0}.provenance-list dd{margin-bottom:6px}} body.light-mode .provenance{background:rgba(0,0,0,.025)} body.light-mode .provenance.missing{background:rgba(0,0,0,.035)} /* ─── NARROW VIEWPORTS ─────────────────────────────────────────────────── .hero h1 was clamp(3.4rem, 7vw, 7.2rem): at 380px the 7vw term is ~27px, so the 3.4rem (54px) FLOOR won -- the headline could never shrink and a long word ("CONDITION.") pushed the page 70px wide. The floor has to be small enough for the narrowest supported width. */ @media (max-width: 620px) { .hero h1 { font-size: clamp(2.1rem, 9vw, 7.2rem); overflow-wrap: anywhere; } .hero-copy, .system-card { padding: 20px 16px; border-radius: 20px; } }