/* ============================================================================ Innovate Mind Labs — shared design system v2 An editorial data-intelligence language: ink-on-paper neutrals, one restrained accent per Lab (--lab), Spectral display + IBM Plex Sans/Mono. Built for trust: quiet surfaces, precise type, visible provenance, real states, subtle motion. ========================================================================== */ :root{ /* neutrals — warm-cool ink on paper */ --paper:#F4F5F2; --surface:#FBFBF9; --s2:#EDEEE9; --s3:#E3E5DD; --ink:#171A1F; --soft:#3A4048; --mut:#646D78; --faint:#949BA4; --line:#DEE0D9; --line2:#CBCEC4; /* brand accent (Labs default) + per-Lab override via --lab */ --accent:#2B4B8C; --asoft:#E7ECF6; --aink:#20376A; --lab:var(--accent); --lab-soft:var(--asoft); --lab-ink:var(--aink); /* semantic (independent of accent) */ --good:#2E7D5B; --gs:#E4F0EA; --warn:#B4791E; --ws:#F6ECD9; --crit:#B23D2E; --cs:#F5E3DF; --info:#2B6C8C; --is:#E1EEF3; /* per-Lab palettes (set on ) */ --violet:#5B4B9C; --vs:#ECE8F6; --teal:#1C6E62; --ts:#DEEEEB; /* elevation */ --e1:0 1px 2px rgba(20,24,30,.05); --e2:0 1px 2px rgba(20,24,30,.04),0 8px 20px -12px rgba(20,24,30,.18); --e3:0 2px 4px rgba(20,24,30,.05),0 18px 44px -20px rgba(20,24,30,.30); /* type */ --serif:"Spectral",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; /* space + radius */ --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:36px;--sp7:56px;--sp8:88px; --r1:6px;--r2:10px;--r3:14px;--r4:20px; --ease:cubic-bezier(.22,.61,.36,1); --maxw:1200px; } html[data-lab="casino-reality"]{--lab:#B23D2E;--lab-soft:var(--cs);--lab-ink:#8f2f22} html[data-lab="crypto-reality"]{--lab:#5B4B9C;--lab-soft:var(--vs);--lab-ink:#463a7a} html[data-lab="decision-replay"]{--lab:#B4791E;--lab-soft:var(--ws);--lab-ink:#8a5c13} html[data-lab="revenue-flow"]{--lab:#1C6E62;--lab-soft:var(--ts);--lab-ink:#155249} html[data-lab="affiliateledger"]{--lab:#2B4B8C;--lab-soft:var(--asoft);--lab-ink:#20376A} @media (prefers-color-scheme:dark){:root:not([data-theme=light]){ --paper:#0F1216; --surface:#171B21; --s2:#1F242C; --s3:#272D36; --ink:#ECEEF0; --soft:#C6CBD2; --mut:#98A1AB; --faint:#69727C; --line:#282E37; --line2:#38404B; --accent:#8AA7E4; --asoft:#1B2540; --aink:#B4C6EF; --good:#6FBF97; --gs:#16281F; --warn:#D9A24E; --ws:#2E2410; --crit:#E08375; --cs:#301B17; --info:#6FB6D6; --is:#12242C; --vs:#1E1836; --ts:#0F2723; --e1:0 1px 2px rgba(0,0,0,.4); --e2:0 1px 2px rgba(0,0,0,.35),0 10px 26px -14px rgba(0,0,0,.7); --e3:0 2px 6px rgba(0,0,0,.4),0 22px 50px -22px rgba(0,0,0,.85); } html[data-lab="casino-reality"]:not([data-theme=light]){--lab:#E08375;--lab-soft:#301B17;--lab-ink:#e3a99f} html[data-lab="crypto-reality"]:not([data-theme=light]){--lab:#A99BE0;--lab-soft:#1E1836;--lab-ink:#c3b8ee} html[data-lab="decision-replay"]:not([data-theme=light]){--lab:#D9A24E;--lab-soft:#2E2410;--lab-ink:#e6bd7f} html[data-lab="revenue-flow"]:not([data-theme=light]){--lab:#5FC0B2;--lab-soft:#0F2723;--lab-ink:#8ed3c8} html[data-lab="affiliateledger"]:not([data-theme=light]){--lab:#8AA7E4;--lab-soft:#1B2540;--lab-ink:#B4C6EF}} :root[data-theme=dark]{ --paper:#0F1216;--surface:#171B21;--s2:#1F242C;--s3:#272D36;--ink:#ECEEF0;--soft:#C6CBD2; --mut:#98A1AB;--faint:#69727C;--line:#282E37;--line2:#38404B;--accent:#8AA7E4;--asoft:#1B2540; --aink:#B4C6EF;--good:#6FBF97;--gs:#16281F;--warn:#D9A24E;--ws:#2E2410;--crit:#E08375;--cs:#301B17; --info:#6FB6D6;--is:#12242C;--vs:#1E1836;--ts:#0F2723; --e2:0 1px 2px rgba(0,0,0,.35),0 10px 26px -14px rgba(0,0,0,.7);--e3:0 2px 6px rgba(0,0,0,.4),0 22px 50px -22px rgba(0,0,0,.85); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv05"} ::selection{background:var(--lab-soft);color:var(--lab-ink)} a{color:var(--lab);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:2px} img{max-width:100%;display:block} .mono{font-family:var(--mono)}.tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--lab);outline-offset:2px;border-radius:3px} [hidden]{display:none!important} /* motion — plays on load from a nearly-visible state; disabled for reduced-motion */ @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .rise{animation:rise .5s var(--ease) both} .rise-2{animation:rise .5s var(--ease) .06s both} .rise-3{animation:rise .5s var(--ease) .12s both} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}} /* ---------- top nav ---------- */ .labs-top{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--surface) 88%,transparent); backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .labs-top .bar{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:6px 18px;padding:10px clamp(16px,4vw,32px);flex-wrap:wrap} .labs-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .labs-brand:hover{text-decoration:none} .labs-brand .mk{width:24px;height:24px;flex:none;border-radius:7px;background:linear-gradient(135deg,var(--lab),var(--lab-ink));position:relative;box-shadow:var(--e1)} .labs-brand .mk::after{content:"";position:absolute;inset:0;border-radius:7px;background: radial-gradient(circle at 70% 30%,color-mix(in oklab,var(--paper) 85%,transparent) 0 2.5px,transparent 3px)} .labs-brand small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);font-weight:500;margin-top:1px} .labs-nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center} .labs-nav a{position:relative;font-size:13.5px;color:var(--mut);padding:6px 11px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s} .labs-nav a:hover{color:var(--ink);background:var(--s2);text-decoration:none} .labs-nav a.on{color:var(--ink);font-weight:600} .labs-nav a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2px;border-radius:2px;background:var(--lab)} .labs-nav a .b2{font-family:var(--mono);font-size:8px;color:var(--faint);vertical-align:super;margin-left:3px;letter-spacing:.04em} .themebtn{background:none;border:1px solid var(--line);color:var(--mut);border-radius:8px;width:32px;height:32px;padding:0;cursor:pointer;font-size:14px;display:grid;place-items:center} .themebtn:hover{color:var(--ink);border-color:var(--line2)} /* ---------- layout ---------- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,32px)} .narrow{max-width:840px} main{padding:clamp(20px,4vw,34px) 0 var(--sp8)} .crumb{font-size:13px;color:var(--mut);margin:0 0 var(--sp3)} .crumb a{color:var(--mut)}.crumb a:hover{color:var(--ink)} .lab-head{padding:8px 0 var(--sp4);margin-bottom:var(--sp5);border-bottom:1px solid var(--line)} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--lab);font-weight:600;display:flex;gap:10px;align-items:center;flex-wrap:wrap} h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.75rem,3.6vw,2.55rem);letter-spacing:-.015em;line-height:1.1;margin:12px 0 8px;text-wrap:balance} h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2.4vw,1.6rem);letter-spacing:-.01em;margin:var(--sp6) 0 var(--sp3)} h3{font-size:1.12rem;font-weight:600;margin:var(--sp5) 0 var(--sp2)} h4{font-size:.98rem;font-weight:600;margin:0 0 var(--sp1)} .dek{color:var(--soft);max-width:68ch;margin:0 0 var(--sp2);font-size:1.04rem;line-height:1.55} p{margin:0 0 1em}.muted{color:var(--mut)}.small{font-size:13px}.tight{margin:0} .lead{font-size:1.12rem;color:var(--soft)} code{font-family:var(--mono);font-size:.88em;background:var(--s2);padding:1px 5px;border-radius:4px} /* ---------- badges / chips ---------- */ .status{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;gap:5px} .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9} .status.alpha{background:var(--gs);color:var(--good);border-color:color-mix(in oklab,var(--good) 28%,transparent)} .status.beta{background:var(--is);color:var(--info);border-color:color-mix(in oklab,var(--info) 28%,transparent)} .status.experiment{background:var(--vs);color:var(--violet);border-color:color-mix(in oklab,var(--violet) 28%,transparent)} .status.research{background:var(--ws);color:var(--warn);border-color:color-mix(in oklab,var(--warn) 28%,transparent)} html[data-theme=dark] .status.experiment,html:not([data-theme=light]) .status.experiment{color:var(--violet)} .aud{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.05em;padding:2px 7px;border-radius:5px;background:var(--s2);color:var(--mut);border:1px solid var(--line)} .chip{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--s2);color:var(--soft);border:1px solid var(--line);white-space:nowrap;display:inline-flex;gap:4px;align-items:center} .chip.on{background:var(--lab-soft);color:var(--lab-ink);border-color:color-mix(in oklab,var(--lab) 30%,transparent)} .livedot{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in oklab,var(--good) 22%,transparent);display:inline-block;flex:none} .simdot{width:7px;height:7px;border-radius:50%;background:var(--warn);display:inline-block;flex:none} /* provenance ladder (shared vocabulary) */ .prov{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:4px;font-weight:600;white-space:nowrap;display:inline-block} .prov.l1,.prov.obs{background:var(--gs);color:var(--good)} .prov.l2,.prov.ext{background:var(--asoft);color:var(--aink)} .prov.l3,.prov.calc{background:var(--ws);color:var(--warn)} .prov.l4,.prov.interp{background:var(--vs);color:var(--violet)} .prov.verified{background:var(--gs);color:var(--good)} /* source chip — where a number came from */ .source{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--mut); background:var(--s2);border:1px solid var(--line);border-radius:6px;padding:2px 7px} .source svg{width:11px;height:11px;opacity:.7} /* ---------- cards / grid / kpi ---------- */ .grid{display:grid;gap:var(--sp4)} .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--sp5);box-shadow:var(--e2)} .card.flat{box-shadow:none} .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--sp4)} .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;margin:var(--sp4) 0} .kpi>div{background:var(--surface);padding:var(--sp4) var(--sp5)} .kpi .n{font-family:var(--mono);font-size:1.55rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1} .kpi .n.good{color:var(--good)}.kpi .n.bad{color:var(--crit)} .kpi .l{font-size:12px;color:var(--mut);line-height:1.3;margin-top:5px} /* ---------- controls ---------- */ button,.btn{font:inherit;font-weight:600;font-size:14px;background:var(--lab);color:#fff;border:1px solid transparent; border-radius:var(--r1);padding:9px 16px;cursor:pointer;transition:filter .14s,transform .05s,box-shadow .14s;line-height:1.2} button:hover,.btn:hover{filter:brightness(1.06);text-decoration:none} button:active,.btn:active{transform:translateY(1px)} button.ghost,.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line2)} button.ghost:hover,.btn.ghost:hover{background:var(--s2);filter:none;border-color:var(--lab)} button.sm,.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:var(--r1)} button:disabled{opacity:.5;cursor:not-allowed;filter:none} .dark-fix{color:#fff} input,select,textarea{font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r1); background:var(--surface);color:var(--ink);width:100%;transition:border-color .14s,box-shadow .14s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lab);box-shadow:0 0 0 3px color-mix(in oklab,var(--lab) 18%,transparent)} input::placeholder{color:var(--faint)} label{font-size:12.5px;color:var(--soft);font-weight:600;display:block;margin-bottom:5px;letter-spacing:.01em} .field{margin-bottom:var(--sp3)} .row{display:flex;gap:var(--sp3);flex-wrap:wrap;align-items:end} /* segmented control */ .seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--s2);border:1px solid var(--line);border-radius:var(--r1);padding:3px} .seg button{background:transparent;color:var(--mut);border:0;font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:5px} .seg button:hover{color:var(--ink);filter:none} .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--e1);font-weight:600} /* tabs */ .tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:var(--sp5) 0} .tabs button{background:none;color:var(--mut);border:0;border-bottom:2px solid transparent;border-radius:0;padding:10px 14px;font-weight:600;font-size:14px} .tabs button:hover{color:var(--ink);filter:none} .tabs button.on{color:var(--ink);border-bottom-color:var(--lab)} /* ---------- tables ---------- */ .scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r3);background:var(--surface)} table{border-collapse:collapse;width:100%;font-size:13.5px} th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top} thead th{background:var(--s2);font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:600;position:sticky;top:0} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background .1s}tbody tr:hover{background:var(--s2)} /* ---------- notes / banners / states ---------- */ .banner{border:1px solid var(--line2);background:var(--s2);border-radius:var(--r2);padding:12px 16px;margin:var(--sp4) 0;font-size:13.5px;color:var(--soft)} .banner.accent{background:var(--lab-soft);border-color:color-mix(in oklab,var(--lab) 28%,transparent)} .banner.warn{background:var(--ws);border-color:color-mix(in oklab,var(--warn) 30%,transparent)} .banner.good{background:var(--gs);border-color:color-mix(in oklab,var(--good) 30%,transparent)} .banner b{color:var(--ink)} .banner .lh{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:5px;font-weight:600} .quote{border-left:3px solid var(--lab);background:var(--s2);padding:8px 12px;border-radius:0 6px 6px 0;font-size:13px;color:var(--soft);font-style:italic;margin:6px 0} .hash{font-family:var(--mono);font-size:11px;color:var(--faint);word-break:break-all} /* empty / loading / error */ .state{display:grid;place-items:center;text-align:center;padding:var(--sp7) var(--sp4);color:var(--mut);border:1px dashed var(--line2);border-radius:var(--r3);background:var(--surface)} .state .ic{font-size:1.6rem;margin-bottom:var(--sp2);opacity:.6} .state h4{color:var(--ink);margin-bottom:var(--sp1)} .state.err{border-color:color-mix(in oklab,var(--crit) 40%,transparent);color:var(--crit)} .skeleton{background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 37%,var(--s2) 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:6px} @keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}} .spinner{display:inline-block;width:14px;height:14px;border:2px solid color-mix(in oklab,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px;margin-right:7px} @keyframes spin{to{transform:rotate(360deg)}} /* toast */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--paper); padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:var(--e3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---------- timeline / diff (shared data components) ---------- */ .tl{position:relative;margin:var(--sp4) 0;padding-left:26px} .tl::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line)} .tl .ev{position:relative;padding:0 0 var(--sp4) 0} .tl .ev::before{content:"";position:absolute;left:-23px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--lab)} .tl .ev.mod::before{background:var(--lab)} .tl .ev .t{font-family:var(--mono);font-size:11px;color:var(--mut)} .diff{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:8px 0} .diff .box{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-family:var(--mono);font-size:13px} .diff .box.from{color:var(--crit);background:var(--cs);border-color:color-mix(in oklab,var(--crit) 22%,transparent)} .diff .box.to{color:var(--good);background:var(--gs);border-color:color-mix(in oklab,var(--good) 22%,transparent)} .diff .arw{color:var(--mut);font-family:var(--mono)} @media(max-width:520px){.diff{grid-template-columns:1fr}.diff .arw{transform:rotate(90deg)}} /* ---------- footer ---------- */ .labs-foot{border-top:1px solid var(--line);margin-top:var(--sp8);background:var(--surface)} .labs-foot .in{max-width:var(--maxw);margin:0 auto;padding:var(--sp5) clamp(16px,4vw,32px);display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.03em} .labs-foot a{color:var(--mut)} .labs-foot .in .sep{opacity:.4}