*,:before,:after{box-sizing:border-box}html,body,figure,h1{margin:0}body{color:#151515;background:#fff;min-width:280px;min-height:100vh;font-family:General Sans,Arial,sans-serif}.page{flex-direction:column;width:min(100% - 32px,1440px);min-height:100vh;margin-inline:auto;display:flex}.site-header{border-bottom:1px solid #151515;align-items:center;min-height:96px;display:flex}.wordmark{align-items:center;gap:16px;display:flex}.mark{color:#fff;letter-spacing:-.12em;background:#151515;place-items:center;width:50px;height:50px;font-family:Martian Mono,monospace;font-size:16px;display:grid}.brand{letter-spacing:-.055em;font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1}.descriptor{border-left:1px solid #151515;align-self:stretch;align-items:center;padding-left:16px;font-size:16px;display:flex}.stage{flex-direction:column;flex:1;justify-content:center;gap:12px;padding-block:clamp(24px,4vw,56px);display:flex}.readout{letter-spacing:.04em;align-self:flex-end;align-items:baseline;gap:16px;font-family:Martian Mono,monospace;font-size:12px;display:flex}#fps{color:#ff743d;text-align:right;min-width:5ch}#sketchContainer{aspect-ratio:16/9;background:#eeeeea;border:1px solid #151515;width:100%;overflow:hidden}#sketchContainer canvas{display:block}@media (width>=900px){.page{width:min(100% - 84px,1440px)}}@media (width<=600px){.site-header{min-height:80px}.mark{width:42px;height:42px}.wordmark{gap:12px}.descriptor{padding-left:12px;font-size:14px}#sketchContainer{aspect-ratio:4/3}}