:root{--paper:#e6e3d8;--ink:#252720;--line:#aaa99e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:11px 'Courier New',monospace}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}[hidden]{display:none!important}.console{height:100svh;min-height:560px;padding:0 28px;display:grid;grid-template-rows:88px minmax(0,1fr) 104px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid;gap:24px;font-size:10px}.wordmark{font:900 clamp(30px,4vw,55px)/.8 Impact,'Arial Black',sans-serif;letter-spacing:-.045em}.wordmark small{font:10px 'Courier New',monospace;letter-spacing:.13em;margin-left:14px}main{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:0}aside{border-right:1px solid var(--line);padding:26px 25px 20px 0;display:flex;flex-direction:column;min-height:0}.label{font-size:10px;letter-spacing:.08em}h1{font:italic 31px/1.05 Georgia,serif;letter-spacing:-1.5px;margin:25px 0 32px}.tracks{border-top:1px solid}.track{width:100%;display:flex;align-items:center;text-align:left;padding:23px 12px;gap:14px;border-bottom:1px solid;transition:background .15s}.track:hover{background:#25272012}.track.selected{background:var(--ink);color:var(--paper)}.track>span{font-size:10px}.track>span:last-child{margin-left:auto}.track strong{font:bold 26px/1 Arial,sans-serif;letter-spacing:-1px}.track small{display:block;font:8px 'Courier New',monospace;letter-spacing:.03em;margin-top:12px}.aside-bottom{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding-top:20px}.aside-bottom b{font:100px/.8 Georgia,serif}.aside-bottom p{font-weight:bold;font-size:12px;line-height:1.6}.aside-bottom>small{grid-column:1/-1;margin-top:22px;font-size:9px}.art-panel{position:relative;min-width:0;overflow:hidden;background-image:radial-gradient(#25272025 .65px,transparent .65px);background-size:7px 7px}canvas{display:block;width:100%;height:100%}.art-top,.art-bottom{position:absolute;left:26px;right:0;display:flex;justify-content:space-between;gap:12px;z-index:1;font-size:9px;letter-spacing:.05em}.art-top{top:26px}.art-bottom{bottom:22px;align-items:center}.art-index{position:absolute;left:26px;top:64px;font:italic 38px Georgia,serif;letter-spacing:-2px}.art-index small{display:block;font:8px 'Courier New',monospace;letter-spacing:.08em;margin-top:7px}.modes{display:flex;gap:4px}.modes button{border:1px solid;padding:9px;font-size:9px}.modes .active{background:var(--ink);color:var(--paper)}#enter{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);background:var(--ink);color:var(--paper);border:1px solid var(--paper);padding:16px 24px;white-space:nowrap}footer{border-top:2px solid;display:grid;grid-template-columns:285px 136px 1fr 110px;gap:24px;align-items:center}.now{display:flex;flex-direction:column;gap:5px}.now small,.now #message{font-size:8px}.now strong{font:bold 24px Arial,sans-serif;letter-spacing:-1px}.controls{display:flex;align-items:center;justify-content:space-between}.controls button{font-size:24px;padding:5px}.controls #play{border:1px solid;width:51px;height:51px;font-size:19px}.timeline>div{display:flex;justify-content:space-between;font-size:10px;margin-bottom:9px}input[type=range]{width:100%;accent-color:var(--ink);cursor:pointer;height:12px;margin:0}.volume{display:flex;gap:10px;align-items:center;font-size:9px}.volume input{width:70px}@media(max-height:700px) and (min-width:761px){.aside-bottom b{font-size:60px}.aside-bottom>small{display:none}h1{margin:20px 0}.console{grid-template-rows:72px minmax(0,1fr) 90px}}@media(max-width:1000px){.stamp,.caption{display:none}footer{grid-template-columns:220px 120px 1fr;gap:20px}.volume{display:none}main{grid-template-columns:260px minmax(0,1fr)}}@media(max-width:760px){.console{padding:0 16px;min-height:620px;grid-template-rows:68px minmax(0,1fr) 125px}.wordmark{font-size:38px}.wordmark small{font-size:8px;margin-left:10px}header{font-size:8px}main{display:flex;flex-direction:column}aside{border-right:0;padding:14px 0;flex-shrink:0}aside>.label,h1,.aside-bottom{display:none}.tracks{display:flex;border:0;gap:8px}.track{border:1px solid;padding:12px 10px;gap:8px}.track strong{font-size:22px}.track small{font-size:7px;margin-top:7px}.track>span{font-size:8px}.art-panel{flex:1;border-top:1px solid var(--line)}.art-top,.art-bottom{left:0;right:0}.art-top{top:12px;font-size:8px}.art-index{left:0;top:37px;font-size:29px}.art-bottom{bottom:12px;justify-content:center}.modes button{padding:9px 12px;font-size:8px}#enter{bottom:62px;padding:12px 16px;font-size:10px}footer{grid-template-columns:1fr 125px;gap:8px 20px;padding:12px 0}.timeline{grid-column:1/-1}.now strong{font-size:22px}.timeline>div{margin-bottom:3px}.controls #play{height:42px;width:42px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* The sculpture extends past its registration marks and panel boundaries. */
body{overflow-x:clip}.console{isolation:isolate;overflow:clip}.art-panel{overflow:visible}canvas{position:absolute;left:-22%;top:-25%;width:144%;height:150%;pointer-events:none}.art-top,.art-bottom,.art-index,#enter{z-index:2}.art-top span,.art-index,.caption{background:var(--paper)}.modes button{background:var(--paper)}header,footer,aside{position:relative;z-index:3}header,footer{background:var(--paper)}aside{background:linear-gradient(90deg,var(--paper) 95%,#e6e3d8e8)}.tracks{min-height:100px;overflow-y:auto;flex-shrink:1}.track{flex-shrink:0}.track strong{min-width:0;overflow-wrap:anywhere}.track>span{flex-shrink:0}.import{padding:18px 0;flex-shrink:0}.import button{border:1px solid;width:100%;padding:12px 6px;font-size:10px}.import button:hover{background:var(--ink);color:var(--paper)}.import small{display:block;margin-top:8px;font-size:8px}.aside-bottom{flex-shrink:0}.now{min-width:0}.now strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-height:760px){.aside-bottom{display:none}}@media(max-width:760px){canvas{left:-25%;top:-15%;width:150%;height:130%}.tracks{overflow-x:auto;overflow-y:hidden;min-height:0}.track{width:calc(50% - 4px);min-width:150px}.import{padding:10px 0 0}.import button{padding:8px}.import small{display:none}.art-index{z-index:2}aside{background:var(--paper)}.art-top span{max-width:50%}}
:root{color-scheme:light;--dots:#25272025;--hover:#25272012}html[data-theme=dark]{color-scheme:dark;--paper:#191b18;--ink:#e6e3d8;--line:#53564c;--dots:#e6e3d825;--hover:#e6e3d815}.art-panel{background-image:radial-gradient(var(--dots) .65px,transparent .65px)}aside{background:var(--paper)}.track:hover{background:var(--hover)}.track.selected{background:var(--ink);color:var(--paper)}#theme{border:1px solid var(--ink);padding:10px 13px;font-size:10px;white-space:nowrap}.zoom{display:flex;background:var(--paper);border:1px solid var(--ink);flex-shrink:0}.zoom button{padding:8px 10px;font-size:11px;min-width:30px}#zoom-reset{min-width:54px;font-size:9px;border-inline:1px solid var(--line)}.zoom button:disabled{opacity:.35;cursor:default}canvas{pointer-events:auto;touch-action:none}.art-bottom{flex-wrap:wrap}.tracks{flex-shrink:0;max-height:48%;min-height:0}.track{padding-block:19px}.aside-bottom{min-height:0}@media(max-width:760px){header>span{display:none}#theme{font-size:9px;padding:9px}.art-bottom{justify-content:space-between;gap:6px}.zoom button{padding:8px 6px}.modes button{padding:9px 7px}.tracks{max-height:none}.track{padding-block:12px}.aside-bottom{display:none}}
.modes{flex-wrap:wrap}.art-bottom{row-gap:8px}@media(max-width:760px){.art-bottom{justify-content:center}.zoom{order:2}.modes{justify-content:center;flex-basis:100%}.modes button{padding:9px 10px}#enter{bottom:105px}}
/* Compact, scan-friendly track rows. */
h1{font-size:26px;margin:18px 0 22px}.track{padding:11px 10px;gap:10px;min-height:52px}.track strong{font-size:19px;letter-spacing:-.5px}.track small{font-size:7px;margin-top:5px}.track>span{font-size:9px}.import{padding:12px 0}.import button{padding:9px 6px}.tracks{max-height:55%}@media(max-width:760px){.tracks{display:flex;flex-direction:column;gap:0;max-height:165px;overflow-y:auto;border-top:1px solid var(--ink)}.track{width:100%;min-width:0;min-height:44px;padding:8px 10px;border:0;border-bottom:1px solid var(--line)}.track strong{font-size:17px;display:flex;align-items:baseline;gap:12px;flex:1}.track small{font-size:7px;margin:0}.track>span{font-size:8px}.import{padding-top:8px}aside{padding:10px 0}}
.palette-control{position:absolute;right:0;top:60px;z-index:3;display:flex;align-items:center;gap:8px;padding:5px 0 5px 8px;background:var(--paper);font-size:8px;letter-spacing:.06em}.palette-control select{max-width:160px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:0;padding:8px;font:10px 'Courier New',monospace;cursor:pointer}.palette-control select:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}@media(max-width:760px){.palette-control{top:38px;gap:4px;font-size:7px}.palette-control select{max-width:125px;font-size:9px;padding:6px}}