:root{color-scheme:dark;--bg:#151615;--ink:#eeede6;--accent:#f18c73}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--bg)}canvas,.shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.shade{background:linear-gradient(90deg,rgba(21,22,21,.12),transparent 65%);z-index:1}header,footer{position:fixed;left:4.4vw;right:4.4vw;display:flex;align-items:center;justify-content:space-between;z-index:3}header{top:30px}.mark{color:var(--ink);font-size:25px;font-weight:700;letter-spacing:-1.8px;text-decoration:none}.mark span{font-size:9px;vertical-align:top;display:inline-block;margin:5px 0 0 5px;letter-spacing:0}.edition,.coordinate,.interaction,.modes{font-size:10px;letter-spacing:.1em}.edition{color:#a7a9a1}main{position:relative;z-index:2;min-height:100svh;display:flex;align-items:center;padding:105px 4.4vw 110px;pointer-events:none}h1{margin:0;font-weight:500;font-size:clamp(50px,8.05vw,144px);line-height:.96;letter-spacing:-.065em}.line{display:block}.author{position:relative;display:block;width:max-content;max-width:100%;text-decoration:none;color:inherit;pointer-events:auto;outline-offset:12px}.author em{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.07em;color:var(--accent)}.amp{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:.84em;letter-spacing:-.06em;color:#b4b6af}.computational{margin-top:.1em}.accent{color:var(--accent)}.period{color:var(--ink)}.author-reveal{position:absolute;left:calc(100% + 30px);bottom:12%;width:220px;font-size:11px;line-height:1.6;letter-spacing:.025em;color:var(--ink);opacity:0;transform:translateX(-12px);transition:opacity .3s,transform .4s;white-space:nowrap}.author-reveal:before{content:'';display:block;width:34px;height:1px;background:var(--accent);margin-bottom:8px}.author-reveal span{margin-left:12px;color:var(--accent);font-size:17px}.author:hover .author-reveal,.author:focus-visible .author-reveal{opacity:1;transform:translateX(0)}.author em,.model-word{transition:color .35s ease}.author:hover em,.author:focus-visible em{color:var(--ink)}.author:hover .model-word,.author:focus-visible .model-word{color:var(--accent)}footer{bottom:30px;gap:20px}.interaction{display:flex;gap:10px;align-items:center;color:#a7a9a1}.dot{height:4px;width:4px;border-radius:50%;background:var(--accent)}.modes{display:flex;gap:26px}.modes button{border:0;background:none;color:#838780;padding:9px 0;font:inherit;cursor:pointer;position:relative;transition:color .2s}.modes button span{font-size:9px;margin-right:6px;opacity:.6}.modes button[aria-pressed=true],.modes button:hover{color:var(--ink)}.modes button:after{content:'';position:absolute;bottom:2px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}.modes button[aria-pressed=true]:after{transform:scaleX(1)}button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:6px}.coordinate{color:#a7a9a1}h1{animation:arrive 1.2s cubic-bezier(.2,.8,.2,1) both} @keyframes arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){h1{font-size:8.05vw}}@media(max-width:900px){.author-reveal{left:0;bottom:calc(100% + 18px);width:auto}.edition{font-size:9px}.modes{gap:16px}.coordinate{display:none}h1{font-size:9vw}main{padding-left:5vw}header,footer{left:5vw;right:5vw}}@media(max-width:560px){header{top:24px}.edition{max-width:140px;text-align:right;line-height:1.6;font-size:8px}h1{font-size:10.8vw;line-height:1.07;letter-spacing:-.065em}main{padding-top:90px;padding-bottom:130px}footer{bottom:24px;align-items:flex-start;flex-direction:column;gap:12px}.modes{width:100%;justify-content:space-between;gap:12px}.modes button{font-size:10px}.interaction{font-size:9px}.author-reveal{font-size:10px;bottom:calc(100% + 14px)}.author-reveal:before{margin-bottom:4px}.computational{margin-top:.22em}}
@media(hover:none){.author-reveal{opacity:0;transform:none}.author:focus .author-reveal{opacity:1}.interaction #hint{font-size:0}.interaction #hint:after{content:'Touch to deform';font-size:9px}}@media(prefers-reduced-motion:reduce){h1{animation:none}*,*:before,*:after{transition:none!important}}
