@font-face{font-family:Bricolage;src:url('./bricolage-grotesque-800.ttf') format('truetype');font-weight:800;font-display:swap}
:root{color-scheme:dark;--base:#0b0e13;--ink:#efece1;--muted:#b9b8af;--accent:#e3c994;--bits:#4e4d43;--focus:#f4ddb0}
*{box-sizing:border-box}
html{background:var(--base)}
body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;position:relative;isolation:isolate}
::selection{background:var(--accent);color:var(--base)}
.bit-field{position:absolute;inset:0 0 auto;z-index:-1;overflow:hidden;height:min(100%,960px);padding:10px 0 0 39%;pointer-events:none;color:var(--bits);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(55px,8.2vw,140px);font-weight:400;line-height:1.26;letter-spacing:-.1em;white-space:nowrap;mask-image:linear-gradient(160deg,#000 0%,#000 30%,transparent 76%)}
.bit-field div:nth-child(even){transform:translateX(-1.8ch)}
.page{width:min(100%,1680px);min-height:100vh;min-height:100svh;margin:0 auto;padding:clamp(25px,4.7vw,78px);padding-top:max(clamp(25px,4.7vw,78px),env(safe-area-inset-top));padding-bottom:max(25px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0 92px}
h1{font-family:Bricolage,Arial,sans-serif;font-size:clamp(84px,18.4vw,286px);font-weight:800;line-height:1.05;letter-spacing:-.075em;margin:0 0 clamp(70px,8.5vw,132px) -.05em;white-space:nowrap}
.letter{display:inline-block;transform-origin:50% 76%}
.dot{color:var(--accent)}
.letter.tilt{animation:tilt 1550ms cubic-bezier(.4,0,.2,1) both}
.below{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.playground{padding-top:0}
.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(24px,2.35vw,34px);letter-spacing:-.055em;display:flex;align-items:center;line-height:1.5}
.function{color:var(--muted)}
.code button{appearance:none;border:0;border-radius:0;border-bottom:1px dotted #9c8a65;background:none;color:var(--accent);font:inherit;letter-spacing:inherit;padding:0 2px;min-height:48px;min-width:76px;cursor:pointer;touch-action:manipulation}
.code button:hover{color:var(--focus);border-bottom-style:solid}
button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:6px}
.result{margin-top:24px;display:flex;align-items:center;gap:5px;color:var(--accent);min-height:44px}
.brace{font:30px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:#b8a47d}
#glyph{overflow:visible;flex-shrink:0}
#strokes{stroke:currentColor;stroke-width:3.5;stroke-linecap:round}
#binary{font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;margin-left:20px;color:var(--muted)}
.intro{padding-left:12%;padding-top:5px}
h2{font-size:18px;line-height:1.4;font-weight:400;letter-spacing:-.025em;margin:0 0 16px}
.intro p{font-size:clamp(22px,2.35vw,34px);line-height:1.32;letter-spacing:-.04em;color:var(--muted);margin:0}
footer{display:flex;gap:32px;align-items:center;justify-content:flex-end;font-size:13px;line-height:1.5}
a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:none;text-underline-offset:5px}
a:hover{text-decoration:underline}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes tilt{0%,100%{transform:rotate(0)}35%,55%{transform:rotate(var(--angle,-4deg)) translateY(-.012em)}}
@media(min-width:1680px){h1{font-size:286px}}
@media(max-width:700px){
 .page{padding-inline:26px}
 main{justify-content:center;padding:55px 0 64px}
 h1{font-size:18.4vw;margin-bottom:64px}
 .bit-field{padding-top:30px;padding-left:22%;font-size:72px;line-height:1.45;mask-image:linear-gradient(170deg,#000,transparent 85%);height:510px}
 .below{grid-template-columns:1fr;gap:48px}
 .intro{padding:0}
 .intro p{font-size:27px}
 h2{font-size:16px;margin-bottom:12px}
 .code{font-size:26px}
 .result{margin-top:18px}
 footer{justify-content:flex-start;gap:30px}
}
@media(max-width:360px){.page{padding-inline:21px}h1{margin-bottom:50px}main{padding-top:42px;padding-bottom:44px}.below{gap:38px}.intro p{font-size:24px}}
@media(prefers-reduced-motion:reduce){.letter.tilt{animation:none}}

.light-field{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;z-index:-1}.page{position:relative}

.light-field{opacity:.8156862745;transition:opacity 260ms cubic-bezier(.2,.7,.3,1)}@media(prefers-reduced-motion:reduce){.light-field{transition:none}}

/* Presentation precedes the experiment in reading and visual order. */
h1{letter-spacing:-.06em}.letter:first-child{margin-right:.018em}.intro{padding-left:0}.playground{padding-left:12%}@media(max-width:700px){.playground{padding-left:0}}

#pixels rect{fill:currentColor;opacity:.055;transition:opacity 180ms ease-out}#pixels rect.on{opacity:1}.result{gap:7px}@media(prefers-reduced-motion:reduce){#pixels rect{transition:none}}

h1 .dot{margin-inline:.022em}