*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}[hidden]{display:none!important}:root{--ink:#070908;--glass:rgba(13,17,15,.84);--fg:#e7e4d8;--muted:#8e978f;--moss:#9cc47a;--amber:#f0a65a;--line:rgba(231,228,216,.14);--f-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;--f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;color-scheme:dark}html,body{height:100%;background:var(--ink);color:var(--fg);overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}body{position:fixed;top:0;right:0;bottom:0;left:0;width:100%}body{font-family:var(--f-body);font-size:14px;-webkit-font-smoothing:antialiased}#stage{position:fixed;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;touch-action:none}#fade{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;opacity:0;pointer-events:none}#outline{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.hud{position:fixed;left:0;right:0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-inline:16px;pointer-events:none}.hud>*{pointer-events:auto}#top{top:0;padding-top:calc(12px + env(safe-area-inset-top,0px));justify-content:space-between}#bottom{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:flex-end}.brand{display:flex;flex-direction:column;gap:2px;min-width:0}.brand b{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:24px;line-height:1;letter-spacing:.01em}.brand span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.seg{display:flex;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:3px}.seg button,.btn,.chip{font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg);background:transparent;border:0;border-radius:999px;padding:9px 13px;cursor:pointer}.seg button[aria-pressed=true]{background:var(--fg);color:var(--ink)}.tools{display:flex;gap:6px;flex-wrap:wrap}.btn{background:var(--glass);border:1px solid var(--line)}.btn:hover,.seg button:hover{border-color:var(--moss)}#b-sound[aria-pressed=true]{background:var(--moss);color:var(--ink);border-color:var(--moss)}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--moss);outline-offset:2px}.status{background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:6px;font-family:var(--f-mono);font-size:11.5px;font-variant-numeric:tabular-nums;min-width:0}.status div{display:flex;gap:10px;align-items:baseline}.status i{font-style:normal;color:var(--muted);width:2.4em;flex:none}.status .dot{width:7px;height:7px;border-radius:50%;background:var(--moss);flex:none;align-self:center}.status .dot.amber{background:var(--amber)}.status .dot.still{background:var(--fg)}.keys{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);letter-spacing:.04em;max-width:46ch;text-align:right}#calbar{display:none;gap:6px;align-items:center;flex-wrap:wrap;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:6px}body.cal #calbar{display:flex}#seqbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:0;max-width:100%}body.cal #seqbar{display:none}#seqbar .play{background:#7fd0ff;color:var(--ink);border-color:#7fd0ff}#seqbar input[type=range]{width:min(220px,40vw);accent-color:#7fd0ff;touch-action:pan-x}#sq-time{font:500 11px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);padding-inline:4px}#sq-ch .chip{padding:7px 9px;font-size:10.5px}#sq-ch .chip[aria-current=true]{border-color:#7fd0ff;color:#7fd0ff}.chip{border:1px solid var(--line)}.chip[aria-pressed=true]{background:var(--moss);color:var(--ink);border-color:var(--moss)}#calbar small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);padding-inline:6px}.handle{position:fixed;z-index:6;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--moss);background:#07090880;color:var(--fg);font:500 10px/26px var(--f-mono);text-align:center;cursor:grab;touch-action:none;padding:0}.handle.sel{background:var(--moss);color:var(--ink)}.handle.center{border-style:dashed;width:38px;height:38px;margin:-19px 0 0 -19px;line-height:34px}#drawer{position:fixed;z-index:7;top:0;right:0;bottom:0;width:min(360px,100%);background:#0a0d0bf2;border-left:1px solid var(--line);padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-user-select:text;user-select:text;display:grid;gap:18px;align-content:start;transform:translate(100%);transition:transform .25s ease}body.drawer #drawer{transform:none}#drawer h2{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:26px;margin:0;display:flex;justify-content:space-between;align-items:center}#drawer section{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}#drawer h3{margin:0;font:500 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}#drawer label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}#drawer p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}#keys-list{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:12.5px;align-items:baseline}#keys-list dt{margin:0}#keys-list dd{margin:0;color:var(--muted)}#keys-list kbd{display:inline-block;min-width:1.6em;text-align:center;font:500 11px var(--f-mono);color:var(--fg);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 6px;background:#151a17}#drawer input[type=number],#drawer select{width:6.5em;background:#151a17;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:13px var(--f-mono)}#drawer select{width:auto}#drawer input[type=range]{width:140px;accent-color:var(--moss)}#drawer input[type=checkbox]{accent-color:var(--moss);width:18px;height:18px}#drawer input[type=file]{font-size:11px;color:var(--muted);max-width:170px}#drawer textarea{width:100%;min-height:70px;background:#151a17;color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:8px;font:11px/1.4 var(--f-mono);box-sizing:border-box;resize:vertical}.row{display:flex;gap:6px;flex-wrap:wrap}#toast{position:fixed;z-index:9;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%);background:var(--fg);color:var(--ink);font:500 12px var(--f-mono);padding:8px 12px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none}body.hidehud .hud,body.hidehud .handle,body.hidehud #outline{display:none}#err{position:fixed;inset:auto 16px 50% 16px;z-index:10;text-align:center;font-family:var(--f-mono);color:var(--amber)}body.cal .keys{display:none}@media (max-width:1500px){.keys{display:none}}@media (max-width:640px){.keys{display:none}.brand b{font-size:20px}}@media (prefers-reduced-motion:reduce){#drawer{transition:none}}.hud,#drawer,.handle,#outline,#toast{display:none!important}#demo-intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:24px 16px;background:radial-gradient(ellipse at 50% 60%,#070c09b8,#030504f0);transition:opacity 1.2s ease}#demo-intro.gone{opacity:0;pointer-events:none}.di-card{display:grid;gap:22px;justify-items:center;text-align:center;width:min(100%,900px);min-width:0}.di-eyebrow{font:500 11px var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}.di-title{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,7.4vw,92px);letter-spacing:.22em;line-height:1;margin:0;padding-left:.22em;white-space:nowrap}.di-sub{margin:0;display:grid;gap:6px}.di-sub em{font-family:var(--f-display);font-size:clamp(19px,2.6vw,26px);font-style:italic}.di-sub span{font-family:var(--f-display);font-size:clamp(16px,2vw,20px);color:var(--muted)}.di-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}.di-btn{font:500 13px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:14px 22px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--fg)}.di-btn.primary{background:var(--fg);color:var(--ink);border-color:var(--fg)}.di-btn:hover{border-color:var(--moss)}.di-note{font:400 12px var(--f-body);color:var(--muted)}#demo-ctl{position:fixed;z-index:15;top:calc(14px + env(safe-area-inset-top,0px));left:16px;display:flex;gap:6px;transition:opacity .8s ease}#demo-menu{position:fixed;z-index:15;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:#0a0d0bb8;border:1px solid var(--line);transition:opacity .8s ease}#demo-ctl[hidden],#demo-menu[hidden]{display:none}#demo-cap{position:fixed;z-index:14;top:calc(70px + env(safe-area-inset-top,0px));left:16px;max-width:min(520px,calc(100vw - 32px));padding:16px 18px 18px;border-radius:14px;background:linear-gradient(180deg,#060907d1,#060907a8);border:1px solid var(--line);display:grid;gap:8px;opacity:0;transition:opacity .25s linear;pointer-events:none}#demo-cap .t{font-family:var(--f-display);font-weight:500;font-size:28px;letter-spacing:.2em}#demo-cap .en{font-family:var(--f-display);font-style:italic;font-size:22px;line-height:1.25;text-wrap:balance}#demo-cap .nl{font-family:var(--f-display);font-size:17px;line-height:1.3;color:var(--muted);text-wrap:balance}#demo-ctl.idle,#demo-menu.idle{opacity:.15}#demo-ctl button{display:grid;place-items:center;width:40px;height:40px;color:var(--fg);background:#0a0d0bb8;border:1px solid var(--line);border-radius:50%;padding:0;cursor:pointer}#demo-menu button{display:flex;align-items:center;gap:8px;font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);background:transparent;border:0;border-radius:999px;padding:11px 18px;cursor:pointer}#demo-menu button[aria-pressed=true]{background:var(--fg);color:var(--ink)}#demo-ctl button:hover,#demo-menu button:hover{border-color:var(--moss)}.di-load{display:grid;gap:10px;justify-items:center;min-height:52px}.di-bar{width:min(260px,60vw);height:2px;background:var(--line);border-radius:2px;overflow:hidden;position:relative}.di-bar:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:35%;background:var(--moss);border-radius:2px;animation:di-slide 1.4s ease-in-out infinite}@keyframes di-slide{0%{transform:translate(-100%)}to{transform:translate(290%)}}.di-status{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}body.pf-ready .di-load{display:none}body:not(.pf-ready) .di-actions{display:none}.di-small{display:none}.di-ios{line-height:1.6}.di-ios svg{vertical-align:-2px}.di-ios b{font-weight:600;color:var(--fg)}.di-ios span{opacity:.75}#demo-ctl button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.di-small span{opacity:.75}@media (max-height:520px),(max-width:760px){.di-small{display:block;line-height:1.5}}@media (max-height:520px){#demo-intro{padding:12px 16px}.di-card{gap:12px}.di-title{font-size:clamp(30px,6vw,52px)}.di-sub em{font-size:17px}.di-sub span{font-size:15px}.di-actions{margin-top:2px}.di-btn{padding:11px 22px}#demo-ctl{top:calc(10px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px))}#demo-ctl button{width:36px;height:36px}#demo-menu{bottom:calc(10px + env(safe-area-inset-bottom,0px))}#demo-menu button{padding:8px 13px;font-size:11px}#demo-cap{top:calc(54px + env(safe-area-inset-top,0px));left:calc(12px + env(safe-area-inset-left,0px));max-width:min(360px,46vw);padding:10px 12px 12px;gap:5px;border-radius:10px}#demo-cap .t{font-size:18px}#demo-cap .en{font-size:15px}#demo-cap .nl{font-size:12.5px}}body.has-ios-hint .di-small{display:none!important}html.pf-phone #demo-cap{top:auto;left:0;right:0;bottom:0;max-width:none;height:26vh;min-height:84px;border:0;border-radius:0;padding:10px calc(24px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px));background:linear-gradient(180deg,#04060500,#040605d1 30%,#040605f0);align-content:center;justify-items:center;text-align:center;gap:3px}html.pf-phone #demo-cap .t{font-size:clamp(17px,4.6vh,24px);letter-spacing:.22em;padding-left:.22em}html.pf-phone #demo-cap .en{font-size:clamp(14px,4.2vh,19px);max-width:62ch}html.pf-phone #demo-cap .nl{font-size:clamp(12px,3.4vh,15px);max-width:66ch}html.pf-phone #demo-menu{left:auto;right:calc(12px + env(safe-area-inset-right,0px));bottom:auto;top:calc(10px + env(safe-area-inset-top,0px));transform:none}html.pf-phone #demo-menu button span{display:none}html.pf-phone #demo-menu button{padding:8px 11px}@media (orientation:portrait){html.pf-phone #demo-cap{height:22vh;padding-left:calc(18px + env(safe-area-inset-left,0px));padding-right:calc(18px + env(safe-area-inset-right,0px));gap:6px}html.pf-phone #demo-cap .t{font-size:22px}html.pf-phone #demo-cap .en{font-size:18px}html.pf-phone #demo-cap .nl{font-size:14.5px}}