:root { color-scheme: dark; --bg:#0c0f10; --panel:#181c1f; --text:#f0f3f4; --muted:#aeb8bd; --line:rgba(255,255,255,.1); --accent:#8fd3e8; --accent-dark:#073342; --radius:24px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.page-shell { width:min(1080px,calc(100% - 32px)); margin:16px auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 16px 34px rgba(0,0,0,.22); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:750; letter-spacing:-.04em; text-decoration:none; }
.brand img { width:30px; height:30px; filter:invert(1); }
.brand small { color:var(--accent); font-size:12px; letter-spacing:.08em; }
nav { display:flex; gap:22px; color:var(--muted); font-size:13px; font-weight:650; } nav a { text-decoration:none; } nav a:hover,nav .is-active { color:var(--accent); }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:20px; font-size:clamp(46px,7vw,78px); line-height:.95; letter-spacing:-.07em; } h2 { margin-bottom:8px; font-size:clamp(32px,4.5vw,58px); line-height:1.02; letter-spacing:-.06em; } h3 { margin:0; font-size:clamp(28px,3vw,44px); line-height:1.02; letter-spacing:-.05em; }
.eyebrow { margin-bottom:18px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; }
.hero-copy { max-width:530px; margin:0; font-size:18px; line-height:1.5; }
.lab-home-hero { display:grid; grid-template-columns:1.25fr .75fr; min-height:430px; gap:24px; margin-top:16px; padding:42px 46px; border:1px solid var(--line); border-radius:var(--radius); background:#dcefe5; color:#173c37; box-shadow:0 16px 34px rgba(0,0,0,.22); }
.lab-home-hero>div:first-child { display:flex; flex-direction:column; justify-content:flex-end; } .lab-home-hero .eyebrow { color:#287267; } .lab-intro-note { display:flex; align-items:flex-end; justify-content:flex-end; } .lab-intro-note p { max-width:230px; margin:0; font-size:15px; line-height:1.45; } .lab-note-mark { color:#287267; font-size:34px; line-height:1; }
.library-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-top:56px; } .library-heading h2 { margin-bottom:0; } .library-count { color:var(--muted); font-size:12px; }
.lab-filters { display:flex; gap:8px; margin:22px 0 14px; } .filter-button { padding:9px 15px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:12px; } .filter-button:hover,.filter-button.is-active { border-color:var(--accent); background:var(--accent); color:var(--accent-dark); }
.research-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:14px; } .research-card { min-height:390px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 34px rgba(0,0,0,.22); } .research-card--featured { position:relative; display:block; background:#181c1f; text-decoration:none; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; } .research-card--featured:hover,.research-card--featured:focus-visible { transform:translateY(-4px); border-color:rgba(143,211,232,.48); box-shadow:0 20px 38px rgba(0,0,0,.28); }
.research-art-caption { display:block; margin-top:26px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.14em; } .research-card-body { position:relative; z-index:2; display:flex; min-height:390px; flex-direction:column; align-items:flex-start; padding:30px; background:linear-gradient(90deg,rgba(24,28,31,.96) 0%,rgba(24,28,31,.78) 55%,rgba(24,28,31,.38) 100%); } .research-card-meta { display:flex; width:100%; justify-content:space-between; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.12em; } .research-card h3 { max-width:520px; margin:34px 0 12px; font-size:clamp(26px,3vw,40px); } .research-card-body p { max-width:420px; color:var(--muted); font-size:15px; line-height:1.5; } .read-link { margin-top:auto; color:var(--text); font-size:13px; font-weight:700; } .read-link span { margin-left:5px; color:var(--accent); }
.research-card-body .research-art-caption { margin-top:auto; }
.tetris-field { position:absolute; inset:0; opacity:.9; } .tetris-piece { position:absolute; display:block; width:46px; height:46px; border:1px solid rgba(143,211,232,.13); border-radius:8px; background:#536e76; box-shadow:inset 5px 5px 0 rgba(255,255,255,.13),inset -5px -5px 0 rgba(0,0,0,.2),0 12px 20px rgba(0,0,0,.16); } .tetris-piece::after { position:absolute; inset:6px; border:1px solid rgba(255,255,255,.12); border-radius:4px; content:''; } .tetris-piece--i { top:34px; left:28px; width:46px; height:138px; background:#466771; animation:tetris-fall-i 7s cubic-bezier(.22,1,.36,1) infinite; } .tetris-piece--t { top:102px; left:112px; width:138px; height:46px; background:#687d72; animation:tetris-fall-t 8s cubic-bezier(.22,1,.36,1) -2s infinite; } .tetris-piece--t::before { position:absolute; bottom:-46px; left:46px; width:46px; height:46px; border-radius:8px; background:inherit; box-shadow:inset 5px 5px 0 rgba(255,255,255,.13),inset -5px -5px 0 rgba(0,0,0,.2); content:''; } .tetris-piece--o { right:28px; bottom:80px; width:92px; height:92px; background:#586774; animation:tetris-float-o 9s ease-in-out -3s infinite; } .tetris-piece--z { right:70px; bottom:32px; width:138px; height:46px; background:#756b62; transform:rotate(-7deg); animation:tetris-fall-z 10s cubic-bezier(.22,1,.36,1) -4s infinite; } .tetris-piece--z::before { position:absolute; top:-46px; left:46px; width:46px; height:46px; border-radius:8px; background:inherit; box-shadow:inset 5px 5px 0 rgba(255,255,255,.13),inset -5px -5px 0 rgba(0,0,0,.2); content:''; } .tetris-piece--l { bottom:12px; left:126px; width:46px; height:92px; background:#536b63; transform:rotate(4deg); animation:tetris-fall-l 11s cubic-bezier(.22,1,.36,1) -6s infinite; } .tetris-piece--l::before { position:absolute; bottom:0; left:46px; width:46px; height:46px; border-radius:8px; background:inherit; box-shadow:inset 5px 5px 0 rgba(255,255,255,.13),inset -5px -5px 0 rgba(0,0,0,.2); content:''; } .tetris-piece--back { top:0; right:18px; opacity:.3; transform:rotate(12deg) scale(.8); animation:tetris-float-back 12s ease-in-out -5s infinite; }
@keyframes tetris-fall-i { 0%,100% { transform:translateY(-18px) rotate(-4deg); } 45%,70% { transform:translateY(20px) rotate(2deg); } } @keyframes tetris-fall-t { 0%,100% { transform:translateY(18px) rotate(5deg); } 45%,70% { transform:translateY(-12px) rotate(-2deg); } } @keyframes tetris-float-o { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-18px) rotate(7deg); } } @keyframes tetris-fall-z { 0%,100% { transform:translateY(-8px) rotate(-7deg); } 50% { transform:translateY(16px) rotate(3deg); } } @keyframes tetris-fall-l { 0%,100% { transform:translateY(12px) rotate(4deg); } 50% { transform:translateY(-13px) rotate(-5deg); } } @keyframes tetris-float-back { 0%,100% { transform:translate(0,0) rotate(12deg) scale(.8); } 50% { transform:translate(-16px,22px) rotate(20deg) scale(.86); } }
.research-card--empty { display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:#202b2f; } .research-card--empty .empty-mark { color:var(--accent); font-size:32px; } .research-card--empty h3 { margin-top:60px; } .research-card--empty p:last-child { max-width:250px; margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.5; } [data-category][hidden] { display:none; }
.lab-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); } .lab-principles>div { padding:0 10px; } .principle-number { display:block; margin-bottom:42px; color:var(--accent); font-size:12px; } .lab-principles strong { display:block; font-size:20px; letter-spacing:-.04em; } .lab-principles p { margin:8px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.lab-intro,.lab-article-header,.lab-explainer,.msi-simulator,.lab-next-step { border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 16px 34px rgba(0,0,0,.22); }
.lab-intro { display:grid; grid-template-columns:1.25fr .75fr; min-height:430px; gap:24px; margin-top:16px; padding:42px 46px; background:#dcefe5; color:#173c37; }
.lab-intro-copy { display:flex; flex-direction:column; justify-content:flex-end; } .lab-intro .eyebrow { color:#287267; } .lab-intro-note { display:flex; align-items:flex-end; justify-content:flex-end; } .lab-intro-note p { max-width:230px; margin:0; font-size:15px; line-height:1.45; } .lab-note-mark { color:#287267; font-size:34px; line-height:1; }
.lab-article-header { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-top:16px; padding:34px 38px; background:var(--panel); } .article-subtitle { margin:0; color:var(--muted); font-size:18px; } .article-meta { display:flex; flex-direction:column; flex:none; gap:8px; color:var(--muted); font-size:12px; text-align:right; }
.lab-prose { max-width:780px; margin:0 auto; padding:10px 28px; color:#d2dadd; font-size:18px; line-height:1.7; } .lab-prose p { margin-bottom:18px; } .lab-prose em { color:var(--text); } .lab-prose a { color:var(--accent); text-underline-offset:3px; } .lab-prose--opening { padding-top:38px; } .lab-prose--closing { padding:24px 28px 18px; }
.lab-explainer { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:35px; padding:32px 38px; background:#202b2f; } .lab-explainer>p { max-width:480px; margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
.msi-simulator { margin-top:16px; padding:32px 38px 24px; background:#151a1c; } .simulator-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; } .simulator-heading .eyebrow { margin-bottom:13px; } .simulator-heading>p { max-width:300px; margin:0; color:var(--muted); font-size:14px; line-height:1.45; text-align:right; }
.simulator-layout { display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:32px; } .purchase-controls { display:grid; gap:10px; } .purchase-control { padding:17px 18px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.035); } .purchase-control-heading { display:flex; justify-content:space-between; margin-bottom:13px; } .purchase-control-heading strong { font-size:15px; } output { color:var(--accent); font-size:14px; font-weight:700; }
.purchase-control label { display:grid; grid-template-columns:70px 1fr; align-items:center; gap:10px; margin-top:10px; color:var(--muted); font-size:12px; } .purchase-control label output { grid-column:2; grid-row:1; justify-self:end; margin-bottom:24px; font-size:11px; } input { grid-column:2; width:100%; accent-color:var(--accent); } select { grid-column:2; width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:#202629; color:var(--text); font:inherit; font-size:12px; }
.simulator-chart-wrap { display:flex; min-height:385px; flex-direction:column; justify-content:space-between; padding:22px; border:1px solid var(--line); border-radius:18px; background:#202629; } .chart-summary { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font-size:12px; } .chart-summary strong { color:#f1b494; font-size:18px; } .simulator-chart { display:grid; height:260px; grid-template-columns:repeat(6,1fr); align-items:end; gap:12px; padding:20px 8px 0; border-bottom:1px solid var(--line); } .chart-column { display:flex; height:100%; flex-direction:column; align-items:center; justify-content:end; gap:8px; } .chart-bar { width:min(42px,76%); min-height:4px; border-radius:8px 8px 2px 2px; background:linear-gradient(#8fd3e8,#4f9aad); transition:height .35s ease,background .35s ease; } .chart-column.is-peak .chart-bar { background:linear-gradient(#f1b494,#c56b55); } .chart-value,.chart-month { color:var(--muted); font-size:10px; } .chart-month { font-size:11px; } .chart-column.is-peak .chart-month { color:#f1b494; font-weight:700; } .chart-legend { display:flex; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:11px; } .legend-dot { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:#70b8ca; } .legend-dot--peak { background:#d7856b; }
.simulator-disclaimer { margin:20px 0 0; color:#7f8d91; font-size:11px; line-height:1.5; } .lab-next-step { display:flex; align-items:center; gap:24px; margin-top:16px; padding:26px 32px; background:#dcecf2; color:#202326; } .lab-next-step .lab-note-mark { color:#286177; } .lab-next-step .eyebrow { margin-bottom:8px; color:#286177; } .lab-next-step strong { display:block; max-width:730px; font-size:24px; letter-spacing:-.04em; }
footer { display:flex; justify-content:space-between; gap:16px; padding:22px 8px 8px; color:#77797d; font-size:12px; } footer a { color:var(--muted); }
@media (max-width:760px) { .page-shell { width:min(100% - 20px,560px); margin:10px auto; } .topbar { padding:15px 16px; } .lab-home-hero,.lab-intro { display:flex; min-height:470px; flex-direction:column; padding:28px 22px; } .lab-intro-note { align-items:flex-start; justify-content:flex-start; gap:14px; } .library-heading { align-items:flex-start; flex-direction:column; margin-top:42px; } .research-grid { grid-template-columns:1fr; } .research-card--featured { display:block; } .research-card-body { min-height:390px; padding:24px 22px; } .research-card--empty { min-height:300px; } .lab-principles { grid-template-columns:1fr; gap:28px; margin-top:42px; } .principle-number { margin-bottom:14px; } .lab-article-header { align-items:flex-start; flex-direction:column; padding:28px 22px; } .article-meta { text-align:left; } .lab-prose { padding-right:10px; padding-left:10px; font-size:16px; } .lab-explainer { display:flex; flex-direction:column; align-items:flex-start; padding:28px 22px; } .msi-simulator { padding:28px 16px 20px; } .simulator-heading { align-items:flex-start; flex-direction:column; } .simulator-heading>p { text-align:left; } .simulator-layout { display:flex; flex-direction:column; gap:18px; } .simulator-chart-wrap { min-height:340px; padding:16px; } .simulator-chart { height:220px; gap:5px; padding-right:0; padding-left:0; } .chart-value { font-size:8px; } .lab-next-step { align-items:flex-start; padding:24px 22px; } .lab-next-step strong { font-size:20px; } footer { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }