:root { color-scheme: light; color: #151512; background: #f3f2ec; font-family: "IBM Plex Mono Embedded", "Noto Sans SC Embedded", monospace; }
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 24px; }
main { max-width: 760px; margin: auto; }
.work-header { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 28px; }
.work-header a { color: inherit; font-size: 11px; text-decoration: none; }
.work-header a:hover { text-decoration: underline; }
.work-header > span { font-size: 11px; }
h1 { grid-column: 1 / -1; margin: 24px 0 0; font: 700 clamp(32px, 6vw, 54px)/1.2 "Space Mono Embedded", monospace; letter-spacing: -.05em; }
.work-header p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: #77766f; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.viz-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid #b9b7af; }
button { font: inherit; font-size: 12px; padding: 10px 18px; min-height: 44px; border: 1px solid #151512; color: inherit; background: transparent; cursor: pointer; }
button:hover { background: #151512; color: #f3f2ec; }
button:focus-visible, a:focus-visible { outline: 2px solid #151512; outline-offset: 4px; }
[data-stage] { margin-left: auto; font-size: 11px; color: #77766f; }
.is-preview body { padding: 0; overflow: hidden; }
.is-preview .work-header, .is-preview .viz-controls { display: none; }
.is-preview main { max-width: none; }
.is-preview canvas { aspect-ratio: 2 / 1; }