*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080c0d;color:#e0e6df;font-family:Arial,Helvetica,sans-serif}main{height:100%;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y pinch-zoom}.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,#02060675 100%)}.chrome{position:absolute;transition:opacity 1.6s;z-index:2}header{left:3.5%;right:3.5%;top:36px;display:flex;justify-content:space-between;align-items:start}.wordmark{color:inherit;text-decoration:none;font-family:Georgia,serif;font-size:30px;letter-spacing:.3em;font-weight:normal}.wordmark span{display:block;font-family:Arial,sans-serif;font-size:10px;letter-spacing:.24em;margin-top:11px;color:#b0bdbb}.edition{font-size:11px;letter-spacing:.17em;color:#a2b0ae;padding-top:8px}.instruction{bottom:133px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.09em;color:#c4ceca}.instruction span{display:block;margin-top:8px;font-size:11px;color:#8e9e9b}footer{bottom:34px;left:3.5%;right:3.5%;display:flex;justify-content:space-between;align-items:center;gap:16px}.caption{font-size:10px;letter-spacing:.2em;color:#a6b5b1;flex:1}.right{text-align:right}.audio-controls{display:flex;position:relative;align-items:center;border:1px solid #afc4bd35;border-radius:40px;background:#10181780;backdrop-filter:blur(16px);min-height:48px;padding:0 18px;gap:12px}.upload{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:12px;letter-spacing:.07em;min-height:46px}.upload svg{width:19px;height:22px;color:#b8cdc6}.plus{font-size:20px;color:#96aaa3;font-weight:200;margin-left:14px}#track{max-width:190px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}button{cursor:pointer;color:#d8e5dd;border:0;background:none;font-size:14px;min-width:30px;min-height:40px}#audio-file{position:absolute;width:1px;height:1px;opacity:0}#status{position:absolute;bottom:58px;left:50%;transform:translateX(-50%);width:280px;text-align:center;font-size:12px;color:#c7d2ce}.audio-controls:focus-within{outline:1px solid #b8cdc6;outline-offset:4px}.idle .chrome{opacity:0}.idle footer{opacity:.16}footer:hover,footer:focus-within{opacity:1!important}#error{position:absolute;top:45%;left:10%;width:80%;text-align:center;line-height:1.6} @media(max-width:600px){header{top:25px;left:24px;right:24px}.wordmark{font-size:25px}.wordmark span{font-size:9px}.edition{font-size:9px}footer{bottom:26px;justify-content:center}.caption{display:none}.instruction{bottom:112px}}@media(prefers-reduced-motion:reduce){.chrome{transition:none}}
header,.caption,.instruction{display:none!important}.vignette{background:radial-gradient(ellipse at 65% 48%,transparent 50%,#02060650 100%)}footer{justify-content:center}.audio-controls{background:#10181765}

/* Midnight palette */
html,body{background:#010308;color:#b2c3da}
.vignette{background:linear-gradient(110deg,#00030b80 0%,transparent 58%),radial-gradient(ellipse at 68% 43%,transparent 30%,#00020a73 100%)}
.audio-controls{background:#040914b3;border-color:#7999c226;box-shadow:0 8px 35px #0008}
.upload{color:#a9bbd3}.upload svg,.plus{color:#809aba}button{color:#b9cbe2}
.audio-controls:focus-within{outline-color:#789bc7}#status{color:#b9cbe2}