pbr.css

:root{color-scheme:dark;--light-x:72vw;--light-y:36vh;--shadow-x:-18px;--shadow-y:12px;--ink:#f7f2e8;--amber:#ffc77c;--muted:#aaa49a;--line:rgb(255 255 255/.19);font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#15120e}body{margin:0;color:var(--ink);background:#15120e;min-height:100vh}#material{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#17130e}.topbar{height:72px;position:fixed;z-index:10;left:0;right:0;top:0;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgb(12 10 8/.28);backdrop-filter:blur(12px)}.topbar a{text-decoration:none;color:inherit}.brand,.topbar p,.back{font:700 10px/1 monospace;letter-spacing:.16em}.brand span{display:inline-block;width:8px;height:8px;background:var(--amber);border-radius:50%;margin-right:10px;box-shadow:0 0 18px var(--amber)}.topbar p{color:#b4aea4}.back{color:#dad4c9}.stage{position:relative;z-index:1;min-height:100vh;padding:clamp(125px,14vh,180px) clamp(24px,7vw,112px) 80px;display:grid;grid-template-columns:minmax(320px,760px) 1fr;align-items:center;isolation:isolate}.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(5 4 3/.72) 0%,rgb(6 5 4/.34) 48%,transparent 76%),linear-gradient(0deg,rgb(4 3 2/.5),transparent 40%)}.hero-copy{max-width:760px}.eyebrow{font:11px/1.3 monospace;letter-spacing:.18em;color:var(--amber);margin:0}.hero-copy h1,.anatomy h2{font:500 clamp(4.5rem,9vw,9.5rem)/.82 Georgia,serif;letter-spacing:-.075em;margin:.28em 0}.hero-copy h1 em{font-weight:400}.lit h1,.lit h3{color:transparent;background:radial-gradient(circle 330px at var(--local-light-x,80%) var(--local-light-y,20%),#fff9e8 0,#ffd79b 22%,#b97b45 58%,#493226 100%);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(var(--shadow-x) var(--shadow-y) 7px rgb(0 0 0/.42))}.lede{max-width:620px;color:#d4cec2;font:18px/1.65 Georgia,serif;text-shadow:0 2px 12px #000}.actions{display:flex;align-items:center;gap:35px;margin-top:42px}.actions a{color:#eee8dd;font:11px monospace;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}.primary{display:flex;justify-content:space-between;min-width:230px;padding:15px 0;border-bottom:1px solid #d4cec2}.primary:focus-visible,.actions a:focus-visible,.mode-list button:focus-visible,.back:focus-visible,.brand:focus-visible{outline:2px solid var(--amber);outline-offset:6px}.telemetry{position:absolute;right:5vw;bottom:52px;display:flex;gap:12px;align-items:center;font-family:monospace}.status-dot{width:7px;height:7px;border-radius:50%;background:#91c277;box-shadow:0 0 14px #91c277}.telemetry strong,.telemetry small{display:block}.telemetry strong{font-size:10px;letter-spacing:.1em}.telemetry small{font-size:8px;color:#aaa59d;margin-top:5px}.material-controls{position:absolute;right:5vw;top:125px;width:190px;padding:18px;border:1px solid var(--line);background:rgb(16 13 10/.48);backdrop-filter:blur(14px)}.material-controls>p{margin:0 0 14px;color:#aaa49a;font:9px monospace;letter-spacing:.14em}.mode-list{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mode-list button{border:1px solid rgb(255 255 255/.12);background:rgb(255 255 255/.04);color:#a8a198;padding:8px 5px;font:9px monospace;cursor:pointer}.mode-list button[aria-pressed=true]{color:#25180c;background:var(--amber);border-color:var(--amber)}.material-controls label{display:block;margin-top:16px;color:#b7b0a6;font:9px monospace;text-transform:uppercase}.material-controls output{float:right;color:#fff}.material-controls input{width:100%;margin-top:9px;accent-color:var(--amber)}.light-marker{position:fixed;z-index:3;left:var(--light-x);top:var(--light-y);pointer-events:none;transform:translate(-7px,-7px);display:flex;align-items:center;gap:13px}.light-marker i{width:14px;height:14px;border:1px solid #fff5d9;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff,0 0 28px #ffc26b,0 0 80px #e98d37}.light-marker span{font:8px monospace;letter-spacing:.13em;color:#fff1d4;text-shadow:0 1px 4px #000}.anatomy{position:relative;z-index:2;min-height:100vh;padding:130px clamp(24px,8vw,130px);background:#12100d;border-top:1px solid var(--line)}.anatomy h2{font-size:clamp(4rem,8vw,8rem);margin:.25em 0 .6em}.pipeline-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.pipeline-card{padding:clamp(28px,5vw,70px);background:#181510;min-height:380px}.pipeline-card>p{font:9px monospace;letter-spacing:.15em;color:var(--amber)}.pipeline-card h3{font:500 clamp(2.2rem,4vw,4.4rem)/1 Georgia,serif;margin:.75em 0}.pipeline-card ul{padding:0;list-style:none;color:var(--muted);font:14px/2 monospace}.pipeline-card li{border-bottom:1px solid rgb(255 255 255/.08)}.credit{margin-top:50px;color:#756f66;font:9px monospace;text-transform:uppercase}.webgl-error .status-dot{background:#e66;box-shadow:0 0 14px #e66}@media(max-width:850px){.topbar p{display:none}.stage{grid-template-columns:1fr;padding-top:130px}.material-controls{position:relative;right:auto;top:auto;margin-top:60px;width:min(100%,360px)}.telemetry{bottom:24px}.light-marker span{display:none}.pipeline-grid{grid-template-columns:1fr}.actions{align-items:flex-start;flex-direction:column}.hero-copy h1{font-size:clamp(4rem,18vw,7rem)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}