:root { color-scheme:dark; --ink:#f5f5f2; --soft:#a7abb0; --paper:#050505; --card:#090909; --line:#343434; --accent:#39bfff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 Helvetica Neue,Helvetica,Arial,sans-serif; }
a { color:var(--accent); text-underline-offset:3px; }
header { position:sticky; top:0; z-index:3; min-height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 max(4vw,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); background:rgba(5,5,5,.96); }
header a { font-weight:700; text-decoration:none; } .brand { color:var(--ink); letter-spacing:.04em; } nav { display:flex; gap:20px; font-size:.88rem; }
main { width:min(1240px,94vw); margin:0 auto 100px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.hero { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; min-height:610px; padding:76px 28px 54px; border-bottom:1px solid var(--line); }
.eyebrow,.contract-id { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }.hero>.eyebrow { grid-column:1/4; }
h1 { grid-column:4/12; max-width:10ch; margin:0; font-size:clamp(3.4rem,8vw,7rem); line-height:.88; letter-spacing:-.065em; }.lead { grid-column:4/10; max-width:62ch; color:var(--soft); font-size:1.08rem; }.hero-count { grid-column:10/13; align-self:end; display:flex; align-items:baseline; gap:10px; color:var(--soft); }.hero-count strong { color:var(--ink); font-size:3rem; font-weight:500; }
.principles { display:grid; grid-template-columns:3fr 9fr; padding:24px 28px 40px; border-bottom:1px solid var(--line); }.principles>p { margin:0; font-weight:700; }.principles ol { display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin:0; padding:0; list-style:none; counter-reset:rules; }.principles li { counter-increment:rules; padding:14px; border:1px solid var(--line); margin:-1px 0 0 -1px; color:var(--soft); }.principles li::before { content:"0" counter(rules); display:block; margin-bottom:12px; color:var(--accent); font-size:.68rem; }
.catalog-heading { display:grid; grid-template-columns:3fr 9fr; padding:18px 28px; border-bottom:1px solid var(--line); color:var(--soft); }.catalog-heading span:first-child { color:var(--ink); font-weight:700; }
.interface-card { display:grid; grid-template-columns:3fr 5fr 4fr; min-height:520px; border-bottom:1px solid var(--line); background:var(--card); }.card-index,.card-main,.contract-grid { padding:28px; }.card-index { display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--line); color:#7f8993; font-size:.76rem; }.card-index span:first-child { color:var(--accent); font-size:2.3rem; }.card-main { border-right:1px solid var(--line); }.card-main h2,.reading h2 { margin:.5rem 0 1.2rem; font-size:clamp(2rem,4vw,4rem); line-height:.95; letter-spacing:-.045em; }.purpose { max-width:48ch; color:var(--soft); font-size:1.02rem; }.related { display:inline-block; margin-top:32px; font-weight:700; text-decoration:none; }
.contract-grid { display:grid; align-content:start; gap:0; margin:0; }.contract-grid div { padding:16px 0; border-bottom:1px solid var(--line); }.contract-grid dt { margin-bottom:6px; color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.contract-grid dd { margin:0; color:var(--soft); font-size:.88rem; }
.reading { display:grid; grid-template-columns:5fr 7fr; gap:30px; padding:72px 28px; }.reading ol { margin:0; padding:0; list-style:none; }.reading li { padding:18px 0; border-top:1px solid var(--line); }.reading li>a { display:block; color:var(--ink); font-weight:700; }.reading li>span { color:#718197; font-size:.78rem; }.reading li>p { margin:.4rem 0 0; color:var(--soft); }
@media(max-width:780px){nav a:first-child{display:none}.hero{display:block;min-height:0;padding:48px 20px}.hero h1{margin:24px 0}.hero-count{margin-top:40px}.principles,.catalog-heading,.interface-card,.reading{display:block}.principles{padding:22px 20px}.principles ol{display:block;margin-top:18px}.interface-card{min-height:0}.card-index{min-height:120px;border-right:0;border-bottom:1px solid var(--line);flex-direction:row}.card-main{border-right:0;border-bottom:1px solid var(--line)}.card-main,.contract-grid{padding:24px 20px}.reading{padding:54px 20px}.reading ol{margin-top:32px}}