:root{color-scheme:dark;--ink:#dddcd7;--muted:#898c95;--line:#ffffff24;--accent:#ccffdf}*{box-sizing:border-box}body{margin:0;background:#07090d;color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;overflow:hidden}#art{position:fixed;inset:0;width:100%;height:100%;touch-action:none;outline:none}header,footer{position:fixed;left:3.4vw;right:3.4vw;display:flex;justify-content:space-between;align-items:center;z-index:2}header{top:32px;padding-bottom:23px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);letter-spacing:.14em;font-weight:700;font-size:21px}.brand span{display:block;margin-top:9px;font-size:9px;letter-spacing:.2em;font-weight:400;color:var(--muted)}.edition{font:11px monospace;text-align:right;letter-spacing:.15em}.edition span{display:block;margin-top:10px;color:var(--muted);letter-spacing:.06em}.caption{position:fixed;left:5.4vw;bottom:18vh;pointer-events:none;z-index:1}.eyebrow{font:10px monospace;letter-spacing:.2em;color:#a7b3ad;margin-bottom:24px}h1{font-family:"Microsoft YaHei",sans-serif;font-size:clamp(36px,4.4vw,76px);letter-spacing:.06em;font-weight:300;margin:0}h1 span{display:block;font:12px monospace;letter-spacing:.33em;margin-top:18px;color:#b9bbb9}.caption p{font-size:12px;color:var(--muted);margin-top:30px;letter-spacing:.12em}.instrument{position:fixed;right:3.4vw;top:32%;width:185px;z-index:2;padding:20px 0 20px 22px;border-left:1px solid var(--line)}.instrument-title{font-size:12px;margin-bottom:25px}.instrument-title span{display:block;font:8px monospace;letter-spacing:.12em;margin-top:8px;color:var(--muted)}label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#afb3b7}output{font:10px monospace;color:var(--accent)}input[type=range]{appearance:none;width:100%;height:2px;background:#ffffff25;margin:16px 0 26px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#d0dad6;width:8px;height:8px;border-radius:50%}button{color:inherit;background:transparent;border:1px solid var(--line);padding:9px 10px;cursor:pointer;font:11px "Microsoft YaHei",sans-serif;transition:background .2s,border-color .2s}button:hover{background:#ffffff16;border-color:#ffffff60}button:focus-visible,input:focus-visible{outline:2px solid #adf9d4;outline-offset:5px}.palettes{display:flex;gap:5px}.palettes button{flex:1;padding:8px 0;font-size:10px}.palettes .selected{border-color:#b8e9d0;color:#dcffeb;background:#b8e9d00d}.actions{display:flex;gap:6px;margin-top:18px}.actions button{border:none;padding-left:0;color:var(--muted)}footer{bottom:25px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;color:var(--muted);gap:15px}.instruction b{color:#c7ceca;font-weight:400}.instruction i{font-style:normal;margin:0 10px;color:#5a646a}.tools{display:flex;align-items:center;gap:17px}.tools button{border:none;font-size:10px;padding:4px 0;color:#babfc0}#mode{font:9px monospace;color:#91bba8}.cursor{position:fixed;width:22px;height:22px;border:1px solid #d7ffdc65;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transform:translate(-50%,-50%)}#toast{position:fixed;bottom:85px;left:50%;transform:translateX(-50%);font-size:12px;background:#17201ed9;padding:12px 20px;opacity:0;pointer-events:none;z-index:9;transition:opacity .2s}#fallback{position:fixed;z-index:4;left:30%;top:40%;max-width:40%;font-size:15px;padding:25px;background:#111a20}body:after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 160px #0007;z-index:0}
@media(max-width:720px){header{top:22px;left:22px;right:22px;padding-bottom:17px}.brand{font-size:17px}.brand span{font-size:7px}.edition{font-size:9px}.caption{left:24px;bottom:28%;}.eyebrow{font-size:8px;margin-bottom:15px}h1{font-size:36px}h1 span{font-size:9px;margin-top:12px}.caption p{font-size:10px;margin-top:18px}.instrument{top:auto;bottom:80px;left:24px;right:24px;width:auto;border-left:none;border-top:1px solid var(--line);padding:15px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.instrument-title{display:none}label{font-size:10px}input[type=range]{margin:12px 0 16px}label[for=speed]{grid-column:2;grid-row:1}#tension{grid-column:1;grid-row:2}#speed{grid-column:2;grid-row:2}.palettes{grid-column:1}.actions{grid-column:2;grid-row:3;margin:0;justify-content:flex-end;align-items:center}.actions button{font-size:10px}footer{left:24px;right:24px;bottom:17px;display:block;padding-top:12px}.instruction{font-size:9px;white-space:nowrap}.instruction i{margin:0 3px}.tools{justify-content:space-between;margin-top:10px;gap:10px}.cursor{display:none}#fallback{left:10%;max-width:80%;top:25%}}
@media(prefers-reduced-motion:reduce){*{transition:none}}

#volume{width:58px;height:2px;margin:0;vertical-align:middle}#sound[aria-pressed="true"]{color:#caffdf}@media(max-width:720px){.tools{gap:9px;flex-wrap:wrap}#volume{width:42px}.tools button{font-size:9px}#mode{font-size:8px}}

/* Published artwork navigation */
.return-nav{position:fixed;top:83px;right:38px;z-index:5;display:flex;gap:8px}.return-nav a{display:inline-flex;align-items:center;min-height:32px;padding:7px 12px;border:1px solid #91b5bd40;border-radius:4px;background:#09161bba;color:#c5dbdf;text-decoration:none;font-size:11px;letter-spacing:1px;backdrop-filter:blur(10px)}.return-nav a:hover{border-color:#a2dcd3;color:#effffb;background:#23423d}.return-nav a:focus-visible{outline:2px solid #d6e9bb;outline-offset:3px}@media(max-width:700px){.return-nav{top:75px;right:20px;gap:6px}.return-nav a{font-size:10px;min-height:32px;padding:6px 9px}}