*{box-sizing:border-box} :root{--paper:#faf7ef;--ink:#171716;--orange:#ff572b;--line:#d9d5cc}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',sans-serif}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b52e0d;outline-offset:5px}a:hover{text-decoration-color:var(--orange)}.shell{max-width:1440px;padding:0 56px;margin:auto}.nav{height:112px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:29px;font-weight:700;letter-spacing:-1.5px;text-decoration:none}.brand-dot{color:var(--orange)}nav{display:flex;gap:40px;font:14px 'IBM Plex Mono',monospace}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:35px 0 55px}.hero-copy{position:relative;z-index:1}h1{font-size:clamp(80px,10.8vw,155px);letter-spacing:-.075em;line-height:.85;margin:0 0 26px;font-weight:700}.tagline{font:500 clamp(17px,2vw,27px)/1.4 'IBM Plex Mono',monospace;margin:0;white-space:nowrap}.intro{font:16px/1.7 'IBM Plex Mono',monospace;margin:38px 0 30px}.actions{display:flex;gap:16px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:16px 24px;border:1px solid var(--ink);font:500 14px 'IBM Plex Mono',monospace;text-decoration:none;transition:background .15s,transform .15s}.button:hover{background:#eee8dd;transform:translateY(-2px)}.primary{background:var(--orange);border-color:var(--orange);color:#171716}.primary:hover{background:#ed491e;border-color:#ed491e}.mascot{width:112%;height:auto;margin-left:-6%;mix-blend-mode:multiply}.demo{display:grid;grid-template-columns:1fr 1fr;background:#101111;color:var(--paper);border:1px solid #2e3030;border-radius:4px;overflow:hidden}.pane-label{min-height:48px;border-bottom:1px solid #303232;padding:14px 20px;font:11px 'IBM Plex Mono',monospace;display:flex;align-items:center;justify-content:space-between;gap:10px}.code-pane{border-right:1px solid #303232}pre{margin:0;padding:28px;font:13px/1.8 'IBM Plex Mono',monospace;overflow:auto}.muted{color:#9b9e9b}.orange{color:#ff8059}.visual-pane{position:relative;min-width:0;display:flex;flex-direction:column}canvas{width:100%;height:360px;display:block;flex:1;min-height:0}#motion{padding:2px 0;background:none;color:#d4d4ce;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:11px}.demo-controls{display:flex;gap:14px;align-items:center;padding:12px 20px;font:11px 'IBM Plex Mono',monospace;border-top:1px solid #303232}.demo-controls input{accent-color:var(--orange);width:100%;max-width:200px}.demo-controls span{color:#949791;margin-left:auto}.demo-caption{text-align:center;font:500 18px/1.6 'IBM Plex Mono',monospace;margin:35px 0 85px}.eyebrow{font:11px 'IBM Plex Mono',monospace;letter-spacing:.04em;color:#984023}h2{font-size:28px;letter-spacing:-1px;line-height:1.1;margin:22px 0 18px}footer{border-top:1px solid var(--line);padding:35px 0 45px;display:flex;gap:60px;justify-content:space-between;font:11px/1.8 'IBM Plex Mono',monospace;color:#62625b}footer p{max-width:570px;margin:0}footer div{display:flex;gap:24px;align-items:flex-start}footer span{white-space:nowrap}@media(min-width:1450px){.hero{padding-top:55px}}@media(max-width:800px){.shell{padding:0 24px}.nav{height:85px}.brand{font-size:24px}nav{gap:20px;font-size:12px}.hero{padding:30px 0;grid-template-columns:1fr}.hero-copy{z-index:1}h1{font-size:clamp(76px,17vw,130px)}.tagline{white-space:normal;font-size:19px}.intro{font-size:14px;margin:26px 0}.mascot{width:78%;margin:-15px auto -5px;max-width:440px}.demo{grid-template-columns:1fr}.code-pane{border-right:0;border-bottom:1px solid #303232}pre{font-size:11px;padding:20px;max-height:250px}canvas{height:320px;flex:auto}.demo-caption{font-size:14px;margin:25px 0 50px}footer{display:block}footer div{flex-wrap:wrap;margin-top:24px}.button{padding:15px 18px;font-size:12px}.actions{gap:10px}}@media(prefers-reduced-motion:reduce){.button{transition:none}}@media(min-width:801px){.hero{padding:22px 0 45px}.mascot{width:100%;max-width:560px;margin:0 auto}.hero-copy{padding:18px 0}h1{font-size:clamp(85px,10.8vw,155px)}}
.mascot{mix-blend-mode:darken}

.thunk-asterisk{display:inline-block;color:var(--orange);font-size:.48em;line-height:1;vertical-align:top;margin:0 0 0 .12em;letter-spacing:0;text-decoration:none}.thunk-asterisk:hover{color:#b53816}.thunk-note{position:relative;max-width:760px;margin:58px auto 65px;padding:0 32px;scroll-margin-top:35px;text-align:center}.note-asterisk{display:block;color:var(--orange);font-size:48px;line-height:1;margin-bottom:18px}.thunk-note figure{margin:0}.thunk-note blockquote{margin:0;font:500 22px/1.5 'Space Grotesk',sans-serif;letter-spacing:-.4px}.thunk-note figcaption{margin-top:14px;font:11px/1.9 'IBM Plex Mono',monospace;color:#64645c}.thunk-note cite{font-style:normal}.thunk-note .personal-quote{margin-top:34px}.personal-quote blockquote{font-size:20px}.personal-quote figcaption{margin-top:9px}@media(max-width:800px){.thunk-note{padding:0 8px;margin:40px auto 45px}.thunk-note blockquote{font-size:20px}.thunk-note figcaption{font-size:10px}}

/* Quotes read as a bold editorial footnote beneath the instrument. */
.thunk-note{max-width:none;margin:72px 0 80px;padding:0 0 0 64px;text-align:left;position:relative}
.note-asterisk{position:absolute;left:0;top:0;font-size:64px;margin:0}
.thunk-note figure{max-width:none}
.thunk-note blockquote{font-size:clamp(28px,3.1vw,44px);font-weight:700;line-height:1.16;letter-spacing:-1.3px}
.thunk-note figcaption{font-size:13px;font-weight:500;margin-top:18px;color:#52524b}
.thunk-note .personal-quote{margin-top:42px}
.personal-quote blockquote{font-size:clamp(28px,3.1vw,44px)}
.personal-quote figcaption{margin-top:18px}
@media(max-width:800px){.thunk-note{margin:44px 0 50px;padding-left:34px}.note-asterisk{font-size:40px}.thunk-note blockquote{font-size:28px;letter-spacing:-.8px}.thunk-note figcaption{font-size:12px}.thunk-note .personal-quote{margin-top:32px}}

/* Quiet monospace quotes, matching the attribution typography. */
.thunk-note blockquote,.personal-quote blockquote{font-family:'IBM Plex Mono',monospace;font-size:clamp(17px,1.6vw,22px);font-weight:500;line-height:1.65;letter-spacing:0}
.thunk-note{margin-top:52px;margin-bottom:56px;padding-left:44px}
.note-asterisk{font-size:42px;top:3px}
.thunk-note .personal-quote{margin-top:28px}
.thunk-note figcaption{margin-top:10px}
@media(max-width:800px){.thunk-note{padding-left:30px}.note-asterisk{font-size:32px}.thunk-note blockquote{font-size:16px}}

.thunk-note .quote-credit{font:inherit;color:#64645c;white-space:nowrap}

/* Optical punctuation and a quieter footnote rhythm. */
.thunk-note{margin:44px 0 48px;padding-left:34px}
.thunk-note blockquote,.personal-quote blockquote{font-size:clamp(16px,1.35vw,19px);font-weight:400;line-height:1.75;letter-spacing:-.025em}
.thunk-note .quote-mark{font-family:Georgia,'Times New Roman',serif;font-size:1.25em;line-height:0;vertical-align:-.04em;letter-spacing:0}
.thunk-note .quote-credit{font-size:.8em;font-weight:400;letter-spacing:0;color:#727168}
.thunk-note .personal-quote{margin-top:16px}
.note-asterisk{font-size:32px;top:5px}
@media(max-width:800px){.thunk-note{margin:32px 0 36px;padding-left:27px}.thunk-note blockquote{font-size:15px;line-height:1.8}.note-asterisk{font-size:27px;top:4px}.thunk-note .quote-credit{white-space:normal}}

.thunk-prose{max-width:78ch;margin:0;font:400 clamp(17px,1.5vw,20px)/1.75 'Space Grotesk',sans-serif;color:#44443e;letter-spacing:0}
.thunk-prose .quote-credit{font:400 .75em 'IBM Plex Mono',monospace;color:#727168;white-space:nowrap}
@media(max-width:800px){.thunk-prose{font-size:17px}.thunk-prose .quote-credit{white-space:normal}}

.thunk-prose .quote-credit{font:inherit;color:inherit;white-space:nowrap;margin-left:.35em}
@media(max-width:800px){.thunk-prose .quote-credit{white-space:normal}}