multi.css

:root{color-scheme:dark;--ink:#f3eee5;--muted:#9f998f;--amber:#ffc373;--line:rgb(255 255 255/.17);--light-x:50vw;--light-y:32vh;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}html{background:#11100e}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 50% 0,#282117,#11100e 38rem);overflow-x:hidden}header{height:72px;padding:0 clamp(20px,5vw,70px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header a,header p{color:inherit;text-decoration:none;font:700 10px monospace;letter-spacing:.15em}.brand i{display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 15px var(--amber)}header p{color:var(--muted)}main{padding:90px clamp(20px,6vw,90px) 120px}.intro{display:grid;grid-template-columns:1.2fr .7fr;column-gap:7vw;align-items:end;position:relative}.intro .eyebrow{grid-column:1/-1}.eyebrow{color:var(--amber);font:10px monospace;letter-spacing:.16em}.intro h1{font:500 clamp(4rem,8vw,8.5rem)/.83 Georgia,serif;letter-spacing:-.07em;margin:.25em 0}.intro h1 em{font-weight:400;color:var(--amber)}.intro>p:not(.eyebrow){max-width:520px;color:#b5afa5;font:17px/1.65 Georgia,serif;margin-bottom:30px}.status{position:absolute;right:0;bottom:-60px;display:grid;grid-template-columns:10px auto;column-gap:10px;align-items:center;font-family:monospace}.status>span{width:7px;height:7px;border-radius:50%;background:#d9a453;box-shadow:0 0 12px #d9a453;grid-row:1/3}.status strong{font-size:9px;letter-spacing:.1em}.status small{font-size:8px;color:#777168;margin-top:4px}.ready .status>span{background:#8ec777;box-shadow:0 0 12px #8ec777}.workbench{margin-top:150px;min-height:680px;display:flex;align-items:flex-start;justify-content:center;gap:clamp(28px,5vw,80px)}.material-panel{position:relative;min-width:290px;min-height:300px;max-width:min(760px,88vw);max-height:720px;resize:both;overflow:hidden;border:1px solid rgb(255 255 255/.26);box-shadow:0 35px 80px rgb(0 0 0/.48);isolation:isolate}.material-panel.second{margin-top:90px}.material-panel canvas,.shade{position:absolute;inset:0;width:100%;height:100%}.material-panel canvas{z-index:-3;display:block}.shade{z-index:-2;background:linear-gradient(135deg,rgb(4 3 2/.72),rgb(5 4 3/.23) 58%,rgb(3 2 1/.52)),linear-gradient(0deg,rgb(0 0 0/.55),transparent 70%);pointer-events:none}.panel-copy{height:100%;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.panel-copy>p:first-child{font:9px monospace;letter-spacing:.16em;color:var(--amber)}.panel-copy h2{max-width:600px;margin:.35em 0;font:500 clamp(2.6rem,5vw,5.7rem)/.9 Georgia,serif;letter-spacing:-.055em;color:transparent;background:radial-gradient(circle 260px at var(--local-x,75%) var(--local-y,15%),#fff8e8,#ffc681 30%,#a66c3d 68%,#543222);background-clip:text;-webkit-background-clip:text;filter:drop-shadow(var(--shadow-x,-12px) var(--shadow-y,10px) 6px rgb(0 0 0/.45))}.body-copy{max-width:520px;color:#e0d9ce;font:15px/1.6 Georgia,serif;text-shadow:0 2px 10px #000}.panel-copy a{margin-top:22px;padding-bottom:8px;border-bottom:1px solid #d6d0c5;color:#fff;text-decoration:none;font:9px monospace;letter-spacing:.09em;text-transform:uppercase}.panel-copy a span{margin-left:18px}.panel-copy a:focus-visible,.brand:focus-visible,header>a:focus-visible{outline:2px solid var(--amber);outline-offset:5px}.resize-corner{position:absolute;right:5px;bottom:3px;color:#fff7e7;font:17px monospace;pointer-events:none;text-shadow:0 1px 6px #000}.explanation{margin:85px auto 0;max-width:950px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:rgb(255 255 255/.02)}.explanation>div{display:grid;grid-template-columns:.6fr 1fr;padding:28px}.explanation>div+div{border-left:1px solid var(--line)}.explanation strong{font:10px monospace;letter-spacing:.14em;color:var(--amber)}.explanation span{font:11px/1.9 monospace;color:var(--muted)}.light-marker{position:fixed;z-index:20;left:var(--light-x);top:var(--light-y);display:flex;align-items:center;gap:12px;pointer-events:none;transform:translate(-6px,-6px)}.light-marker i{display:block;width:12px;height:12px;border-radius:50%;background:#fff6df;box-shadow:0 0 8px #fff,0 0 30px #ffb24c,0 0 80px #d76e28}.light-marker span{font:8px monospace;letter-spacing:.14em;color:#fff1d4;text-shadow:0 1px 4px #000}@media(max-width:900px){header p{display:none}.intro{grid-template-columns:1fr}.status{position:relative;right:auto;bottom:auto;margin-top:25px}.workbench{flex-direction:column;align-items:center;margin-top:100px}.material-panel,.material-panel.second{margin-top:0;width:min(560px,88vw)!important}.explanation{grid-template-columns:1fr}.explanation>div+div{border-left:0;border-top:1px solid var(--line)}}