:root{--ebony:#0c0e13;--surface:#14171f;--raised:#1e222d;--raised-hover:#282d3a;--line:#2b303d;--line-strong:#6b7385;--ivory:#f1ede4;--muted:#a4a9b6;--felt:#d6343f;--mint:#7ee8c4;--left:#ff9f1c;--right:#4f9dff;--miss:#ff5a5f;--gold:#f4c95d;--serif:ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;--ease:cubic-bezier(.2, .8, .2, 1);--target:max(44px, 2.75rem);--gap:clamp(6px, .6rem, 14px);--pad:clamp(12px, 1rem, 28px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--ivory);background:var(--ebony);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;touch-action:manipulation;font:500 clamp(.9375rem,.55vw + .5rem,1.375rem)/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html[data-pending] body{visibility:hidden;animation:0s 1.5s forwards reveal}body{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100dvh;margin:0;display:grid;overflow:hidden}@media (display-mode:standalone){body{height:100lvh}}h1,h2,p{margin:0}svg{flex:none;width:1.25em;height:1.25em}:focus-visible{--ring-offset:2px;outline:2px solid var(--ivory);outline-offset:var(--ring-offset)}:where(button,.button,select,a,input,[role=slider]):focus-visible{animation:focus-in .22s var(--ease)}.stepper button:focus-visible,.segmented button:focus-visible{--ring-offset:-4px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--muted)}button,.button,select{font:inherit;color:inherit;min-height:var(--target);background:var(--raised);-webkit-tap-highlight-color:transparent;border:1px solid #0000;border-radius:999px}button,.button{min-width:var(--target);white-space:nowrap;cursor:pointer;justify-content:center;align-items:center;gap:.5em;padding:0 1.1em;text-decoration:none;transition:background-color .15s,border-color .15s,transform .1s;display:inline-flex}button:hover:not(:disabled),.button:hover{background:var(--raised-hover)}button:active:not(:disabled),.button:active{transform:scale(.96)}button:disabled,[aria-disabled=true]{opacity:.38;cursor:default}.ghost{border-color:var(--line);background:0 0}.primary,.primary:hover:not(:disabled){background:var(--ivory);color:var(--ebony);font-weight:650}.primary:hover:not(:disabled){background:#fff}.icon{width:var(--target);padding:0}.link{color:var(--muted);text-underline-offset:.2em;background:0 0;text-decoration:underline}.link:hover:not(:disabled){color:var(--ivory);background:0 0}.wide{width:100%}.row{justify-content:center;gap:var(--gap);flex-wrap:wrap;display:flex}.stack{gap:1em;display:grid}kbd{border:1px solid var(--line);background:var(--raised);min-width:1.9em;font:inherit;text-align:center;color:var(--ivory);border-bottom-width:3px;border-radius:6px;padding:.05em .45em;font-size:.8125em;display:inline-block}.bar{align-items:center;gap:var(--gap);padding:calc(var(--pad) * .5) max(var(--pad), env(safe-area-inset-right)) calc(var(--pad) * .5) max(var(--pad), env(safe-area-inset-left));background:var(--surface);z-index:1;display:flex;position:relative}.top{padding-top:max(calc(var(--pad) * .5), env(safe-area-inset-top));border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;align-items:center;display:grid}.top .brand{grid-column:1}.top .piece{grid-column:2}.top .actions{grid-column:3}.actions{align-items:center;gap:2px;display:flex}.top .actions>button:not(.pro-chip){color:var(--muted);background:0 0;border-color:#0000}.top .actions>button:not(.pro-chip):hover:not(:disabled){background:var(--raised);color:var(--ivory)}.top #export:not(:disabled){color:var(--ivory)}.top .pro-chip{margin-right:.35em}.brand{min-height:var(--target);color:inherit;font:inherit;letter-spacing:-.01em;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:.5em;padding:0 .5em 0 0;font-weight:700;display:inline-flex}.brand:hover:not(:disabled),.brand:active:not(:disabled){background:0 0;transform:none}.brand:hover .label{color:#fff}.brand:hover svg{transform:translateY(-1px)}.brand svg{transition:transform .2s var(--ease)}.brand:focus-visible{outline:2px solid var(--ivory);outline-offset:2px}.brand svg{width:1.6em;height:1.6em}.piece{text-align:center;min-width:0;max-width:100%;color:var(--muted);align-content:center;justify-items:center;row-gap:.1em;margin:0;font-size:1em;font-weight:600;transition:opacity .3s;display:grid}.piece>span{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden}.piece.loaded #piece-title{color:var(--ivory);font-family:var(--serif);letter-spacing:-.01em;font-size:1.25em;line-height:1.1}.piece .by{font-size:.75em;font-weight:500;line-height:1.2}.piece .by:empty{display:none}.piece.pending{opacity:0}.piece{container-type:inline-size}@container (width<=80px){.piece>span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.cover{z-index:2;padding:var(--pad);-webkit-backdrop-filter:blur(14px)saturate(1.25);backdrop-filter:blur(14px)saturate(1.25);background:radial-gradient(80% 70% at 50% 42%,#14171fb3,#0c0e13f0);place-items:center;animation:.28s ease-out fade;display:grid;position:absolute;inset:0;overflow:auto}.cover-body{text-align:center;justify-items:center;gap:.6em;max-width:56em;display:grid}.cover-body>*{animation:rise .5s var(--ease) both}.cover-body>:nth-child(2){animation-delay:60ms}.cover-body>:nth-child(3){animation-delay:.12s}.cover-body>:nth-child(4){animation-delay:.18s}.cover-body>:nth-child(n+5){animation-delay:.24s}.cover-composer{color:var(--muted);letter-spacing:.01em;font-size:1.0625em}.cover-title{max-width:100%;font-family:var(--serif);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere;font-size:clamp(2.5rem,7.5vw,6.5rem);font-weight:600;line-height:1.1}.cover-arranger{color:var(--muted);font-family:var(--serif);font-size:1.0625em;font-style:italic}.facts{grid-auto-flow:column;margin:1.25em 0 .75em;display:grid}.facts>div{align-content:start;gap:.2em;padding:.1em clamp(1em,2.4vw,2em);display:grid}.facts>div+div{border-left:1px solid var(--line)}.facts dt{color:var(--muted);font-size:.8125em}.facts dd{font-variant-numeric:tabular-nums;margin:0;font-size:1.25em;font-weight:650}.facts small{color:var(--muted);margin-top:.15em;font-size:.65em;font-weight:500;display:block}.cover-hint{color:var(--muted);margin-top:.4em;font-size:.875em}@media (pointer:coarse){.cover-hint{display:none}}::view-transition-group(piece-title){animation-duration:.5s;animation-timing-function:var(--ease)}::view-transition-old(root){animation-duration:.3s}::view-transition-new(root){animation-duration:.3s}.chip{anchor-name:--device;border-color:var(--line);color:var(--muted);background:0 0;padding:0 1em;font-size:.875em}#device-name{text-overflow:ellipsis;max-width:14em;overflow:hidden}.chip .dot{background:var(--muted);border-radius:50%;width:.55em;height:.55em}.chip.live{color:var(--ivory)}.chip.live .dot{background:var(--mint);box-shadow:0 0 0 3px #7ee8c433}#stage{background:var(--ebony);min-height:0;position:relative;overflow:hidden}#stage>canvas{touch-action:none;display:block;position:absolute;inset:0}.empty{inset:0 0 calc(var(--keys,20%) + 6px) 0;padding:var(--pad);text-align:center;background:radial-gradient(62% 60%,#0c0e13f0 45%,#0c0e1300);grid-template-columns:minmax(0,1fr);place-content:safe center;justify-items:center;gap:1em;display:grid;position:absolute;overflow-y:auto}.empty>*{animation:rise .6s var(--ease) both}.empty>:nth-child(2){animation-delay:70ms}.empty>:nth-child(n+3){animation-delay:.14s}#stage>canvas{transition:opacity .6s}#stage.idle>canvas{opacity:.42}body:has(#stage.idle) :is(.transport,#export,#view){display:none}body:has(#stage.idle) section:has(>#tour-start){display:none}body:has(#stage.idle){padding-bottom:env(safe-area-inset-bottom)}body:has(#stage.idle) .brand .label{clip-path:none;width:auto;height:auto;position:static;overflow:visible}.empty h1{letter-spacing:-.025em;text-wrap:balance;max-width:16ch;font-size:clamp(1.5em,2.6vw,2.75em);font-weight:650;line-height:1.1}.empty p{max-width:42ch;color:var(--muted);text-wrap:pretty}.empty .row{margin-top:.5em}.empty .hint{font-size:.875em}.features{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:.6em 1.6em;margin:.75em 0 0;padding:0;font-size:.875em;list-style:none;display:flex}.features li{align-items:center;gap:.5em;display:inline-flex}.features svg{color:var(--ivory)}.library{text-align:left;gap:.6em;width:min(100%,72rem);margin-top:.5em;display:grid}.library h2{color:var(--muted);font-size:.875em;font-weight:600}.shelf{margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .4em;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent;grid-auto-columns:minmax(8rem,1fr);grid-auto-flow:column;gap:.6em;list-style:none;display:grid;overflow-x:auto}.shelf li{scroll-snap-align:start;display:grid;position:relative}#recent-shelf{grid-auto-columns:minmax(8rem,12rem)}.piece-card{border:1px solid var(--line);background:var(--surface);text-align:left;white-space:normal;border-radius:14px;grid-template-rows:auto auto 1fr;place-content:start stretch;gap:.15em;min-width:0;padding:0 0 .65em;display:grid;position:relative;overflow:hidden}.piece-card:hover:not(:disabled){background:var(--surface);border-color:#f1ede459}.piece-card canvas{aspect-ratio:16/9;border-bottom:1px solid var(--line);background:var(--ebony);width:100%;margin-bottom:.4em;display:block}.piece-card strong,.piece-card span:not(.level){padding-inline:.75em;line-height:1.3}.piece-card strong{text-wrap:balance;font-size:.875em;font-weight:650}.piece-card span:not(.level){color:var(--muted);font-size:.75em}.piece-card .level{background:#0c0e13d9;border-radius:999px;padding:.2em .6em;font-size:.6875em;font-weight:600;line-height:1.4;position:absolute;top:.5em;left:.5em}.shelf.list{grid-auto-flow:row;margin:0;padding:0;overflow:visible}.list .piece-card{border-radius:12px;grid-template-rows:auto auto auto;grid-template-columns:5.5rem 1fr;align-items:center;gap:.1em .75em;padding:.45em}#recent-list .piece-card{padding-right:var(--target)}.list .piece-card canvas{border:0;border-radius:8px;grid-row:1/4;margin:0}.list .piece-card strong,.list .piece-card span:not(.level){padding:0}.list .piece-card .level{color:var(--muted);background:0 0;justify-self:start;padding:0;font-weight:400;position:static}.hud{top:var(--pad);left:var(--pad);z-index:1;pointer-events:none;animation:rise .3s var(--ease);background:#14171feb;border-radius:16px;padding:.3em;display:flex;position:absolute;box-shadow:inset 0 0 0 1px #ffffff12,0 12px 32px #00000059}.count{inset:0 0 var(--keys,20%) 0;z-index:1;pointer-events:none;place-items:center;display:grid;position:absolute}.count span{aspect-ratio:1;width:clamp(5.5rem,22vmin,10rem);color:var(--ivory);font-variant-numeric:tabular-nums;background:#0c0e13b8;border-radius:50%;place-items:center;font-size:clamp(2.75rem,11vmin,5rem);font-weight:700;line-height:1;display:grid;box-shadow:inset 0 0 0 2px #ffffff24,0 12px 40px #0006}.count.accent span{color:var(--mint);box-shadow:inset 0 0 0 2px #7ee8c499,0 12px 40px #0006}.hud p{padding:.25em .85em;display:grid}.hud p+p{border-left:1px solid var(--line)}.hud span{letter-spacing:-.02em;font-variant-numeric:tabular-nums;justify-self:start;font-size:1.5em;font-weight:700;line-height:1.15}.hud small{color:var(--muted);font-size:.75em}.stars{color:var(--line-strong);gap:.35em;margin-bottom:.25em;display:flex}.stars svg{width:clamp(2.5rem,5vw,3.75rem);height:clamp(2.5rem,5vw,3.75rem)}.stars svg.on{color:var(--gold);filter:drop-shadow(0 0 16px #f4c95d59);animation:pop .55s var(--ease) .2s both}.stars svg.on:nth-child(2){animation-delay:.36s}.stars svg.on:nth-child(3){animation-delay:.52s}.results .cover-title{font-size:clamp(2.25rem,5.5vw,4.5rem)}.results .cover-arranger{text-wrap:balance;max-width:36ch}.results-notice{text-wrap:balance;max-width:44ch;margin-top:1em;font-size:.85em}.drop{inset:var(--pad);border:2px dashed var(--ivory);pointer-events:none;background:#0c0e13e0;border-radius:20px;place-items:center;font-size:1.25em;font-weight:650;display:grid;position:absolute}.recording{top:var(--pad);background:var(--felt);color:#fff;border-radius:999px;align-items:center;gap:.5em;padding:.4em 1em;font-size:.875em;font-weight:650;display:inline-flex;position:absolute;left:50%;translate:-50%}.recording .dot,.record[aria-pressed=true] .dot{background:#fff;animation:1.2s ease-in-out infinite pulse}.transport{column-gap:calc(var(--gap) * 2);padding-bottom:max(calc(var(--pad) * .5), env(safe-area-inset-bottom));border-top:1px solid var(--line);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.cluster{align-items:center;gap:var(--gap);display:flex}.play,.play:hover:not(:disabled){width:calc(var(--target) * 1.2);height:calc(var(--target) * 1.2);background:var(--ivory);color:var(--ebony);position:relative}.play svg{width:1.5em;height:1.5em}.play[aria-busy=true] svg{opacity:.25}.play[aria-busy=true]:after{content:"";border:2px solid;border-right-color:#0000;border-radius:50%;animation:.8s linear infinite spin;position:absolute;inset:22%}.seek{align-items:center;gap:.75em;min-width:0;display:flex}.seek output{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.875em}.map{--a:0%;--b:0%;min-width:0;height:var(--target);background:var(--ebony);box-shadow:inset 0 0 0 1px var(--line-strong);opacity:.5;border-radius:10px;flex:1;transition:opacity .2s;position:relative;overflow:hidden}.map.ready{opacity:1}.map:has(#scrubber:focus-visible){outline:2px solid var(--ivory);outline-offset:2px}#map-canvas{width:100%;height:100%;position:absolute;inset:0}.map-rest{border-left:2px solid var(--ivory);pointer-events:none;will-change:transform;background:#0c0e139e;position:absolute;inset:0}#scrubber{opacity:0;appearance:none;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}#scrubber:disabled{cursor:default}#scrubber::-webkit-slider-thumb{appearance:none;width:2px;height:var(--target)}#scrubber::-moz-range-thumb{width:2px;height:var(--target);border:0}.loop-range{inset:0 calc(100% - var(--b)) 0 var(--a);box-shadow:inset 0 2px var(--mint), inset 0 -2px var(--mint);touch-action:none;cursor:grab;background:#7ee8c41a;transition:background-color .15s;position:absolute}.loop-range:hover{background:#7ee8c429}.loop-range.dragging{cursor:grabbing;background:#7ee8c438}.handle{pointer-events:auto;touch-action:none;cursor:ew-resize;width:24px;position:absolute;top:0;bottom:0}.handle.a{left:-12px}.handle.b{right:-12px}.handle:before{content:"";background:var(--mint);border-radius:2px;transition:inset .15s;position:absolute;inset:0 10px}.handle:hover:before,.handle:focus-visible:before{inset-inline:9px}.handle:focus-visible{outline:none}.handle:focus-visible:before{box-shadow:0 0 0 2px var(--ivory)}.peek{z-index:5;border:1px solid var(--line);background:var(--raised);color:var(--ivory);text-align:center;white-space:pre;pointer-events:none;border-radius:10px;padding:.4em .75em;font-size:.9375em;line-height:1.3;position:fixed;translate:-50% calc(-100% - 10px);box-shadow:0 10px 30px #00000073}.peek:first-line{font-weight:650}.toggle[aria-pressed=true],.toggle[aria-pressed=true]:hover:not(:disabled){background:var(--mint);color:var(--ebony)}.stepper,.segmented{box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;align-items:center;display:inline-flex}.stepper button,.segmented button{background:0 0}.segmented{grid-auto-columns:1fr;grid-auto-flow:column;gap:2px;padding:3px;display:inline-grid}.segmented button{min-height:calc(var(--target) - 6px);position:relative}.segmented button:after{content:"";position:absolute;inset:-4px -2px}.hand{color:var(--muted);gap:.55em;padding:0 1em;transition:background-color .15s,color .15s,transform .1s}#hand-l{--hand:var(--left)}#hand-r{--hand:var(--right)}.hand svg{width:1.4em;height:1.4em;transition:color .15s}#hand-l svg{scale:-1 1}.segmented .hand[aria-pressed=true]{background:var(--raised);box-shadow:inset 0 0 0 1px var(--hand);color:var(--ivory)}.segmented .hand[aria-pressed=true]:hover{background:var(--raised-hover)}.hand[aria-pressed=true] svg{--fill:color-mix(in srgb, var(--hand) 30%, transparent);color:var(--hand)}.stepper output{text-align:center;font-variant-numeric:tabular-nums;min-width:3.4em;font-weight:650}select{appearance:none;border-color:var(--line-strong);background:var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23a4a9b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .85em center / 1em;cursor:pointer;padding:0 2.4em 0 1.1em}.record .dot{background:var(--felt);border-radius:50%;width:.7em;height:.7em}.record[aria-pressed=true],.record[aria-pressed=true]:hover:not(:disabled){background:var(--felt);color:#fff}.panel{width:min(25em, calc(100vw - 2 * var(--pad)));max-height:calc(100dvh - 2 * var(--pad));border:1px solid var(--line);background:var(--surface);color:var(--ivory);border-radius:20px;padding:1.25em;overflow:auto;box-shadow:0 24px 64px #0000008c}@supports (anchor-name:--device){.panel{position-anchor:--settings;inset:auto;top:calc(anchor(bottom) + 8px);right:anchor(right);max-height:calc(100dvh - var(--target) - 2 * var(--pad) - 8px - env(safe-area-inset-top));position-try-fallbacks:flip-inline, --pinned;margin:0}@position-try --pinned{right:auto;left:var(--pad)}#settings-panel,#library-panel,#install-panel{position-anchor:--settings}}.panel section{gap:.75em;display:grid}.panel section+section{border-top:1px solid var(--line);margin-top:1.25em;padding-top:1.25em}.panel h2{font-size:1em;font-weight:650}.panel p{font-size:.9375em;line-height:1.6}.privacy summary{cursor:pointer;padding-block:10px;font-weight:650;line-height:24px}.privacy div{gap:.75em;padding-top:.25em;display:grid}.panel .credits{color:var(--muted);font-size:.8125em}.credits a{color:inherit;text-underline-offset:.2em}.credits a:hover{color:var(--ivory)}.panel dl{gap:.6em;margin:0;font-size:.9375em;display:grid}.panel dl div{grid-template-columns:7.5em 1fr;align-items:baseline;gap:.75em;display:grid}.panel dd{color:var(--muted);margin:0}.panel select{width:100%}.panel ol{gap:.6em;margin:0;padding-left:1.25em;font-size:.9375em;line-height:1.6;display:grid}.panel li::marker{color:var(--muted)}.ear{gap:.6em;display:grid}.ear p{color:var(--muted);justify-content:space-between;align-items:baseline;gap:1em;display:flex}.ear strong{color:var(--mint);font-variant-numeric:tabular-nums;font-size:1.25em;font-weight:650}.ear strong.miss{color:var(--miss)}.meter{background:var(--raised);border-radius:999px;height:6px;overflow:hidden}.meter span{background:var(--mint);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.tip{background:var(--raised);border-radius:14px;gap:.75em;padding:1em;display:grid}.tip button{border-color:var(--line-strong);background:var(--surface)}dialog{border:1px solid var(--line);background:var(--surface);width:min(30em,100vw - 2rem);max-height:calc(100dvh - 2rem);color:var(--ivory);border-radius:24px;padding:0;box-shadow:0 32px 80px #0009}dialog[open]{animation:.24s cubic-bezier(.2,.8,.2,1) rise}dialog:focus{outline:none}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#050609b8}.sheet{gap:1.25em;padding:1.25em 1.5em 1.5em;display:grid}.sheet header{justify-content:space-between;align-items:center;gap:1em;margin-right:-.5em;display:flex}.sheet h2{letter-spacing:-.01em;font-size:1.25em;font-weight:650}.sheet header button{background:0 0}.loop-map{touch-action:none;cursor:pointer;flex:none;height:4.5em}.loop-map>canvas{width:100%;height:100%;position:absolute;inset:0}.loop-map .loop-range{box-shadow:inset 0 0 0 2px var(--mint);pointer-events:none;background:#7ee8c429;border-radius:8px;transition:inset .12s}.loop-grip{pointer-events:none;place-items:center;width:44px;display:grid;position:absolute;top:0;bottom:0}.loop-grip.a{left:calc(var(--a) - 22px)}.loop-grip.b{left:calc(var(--b) - 22px)}.loop-grip:before{content:"";background:var(--mint);width:14px;height:58%;box-shadow:0 0 0 2px var(--ebony);border-radius:7px}.loop-grip:after{content:"";background:var(--ebony);opacity:.6;border-radius:1px;width:2px;height:28%;position:absolute}.loop-map.dragging .loop-range{transition:none}.loop-map.fixed .loop-grip.b{display:none}.loop-map.fixed .loop-range{min-width:12px;box-shadow:none;background:#7ee8c438}.lengths .loop-map{margin-top:.75em}.lengths .loop-summary{margin-top:-.25em}.loop-range.marking{pointer-events:none;box-shadow:inset 0 2px var(--ivory), inset 0 -2px var(--ivory);background:#f1ede424}.mark-bar{top:var(--pad);z-index:1;width:max-content;max-width:calc(100% - var(--pad) * 2);border:1px solid var(--line-strong);background:color-mix(in srgb, var(--surface) 90%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em;padding:.6em .75em;display:flex;position:absolute;left:50%;translate:-50%;box-shadow:0 12px 32px #00000073}.mark-bar span{color:var(--muted);text-align:center;flex:100%;font-size:.875em}.mark-bar button{min-height:var(--target)}.loop-summary{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;margin-top:-.5em}.loop-ends{grid-template-columns:repeat(auto-fit,minmax(9.5em,1fr));gap:1em;display:grid}.loop-end{justify-items:center;gap:.5em;display:grid}.loop-end>span{color:var(--muted);font-size:.9375em}.loop-end output{min-width:3.6em;font-size:1.125em}.loop-count{color:var(--muted);gap:.5em;font-size:.9375em;display:grid}.loop-count select{width:100%;color:var(--ivory);font-size:1rem}#loop-dialog .row button{flex:10em}@media (height<=500px) and (orientation:landscape){.sheet{gap:.75em;padding-top:.75em}.loop-map{height:3em}.loop-summary{margin-top:-.25em}}fieldset{border:0;gap:.75em;margin:0;padding:0;display:grid}.option{border:1px solid var(--line);cursor:pointer;border-radius:16px;grid-template-columns:auto 1fr;gap:.85em;padding:1em 1.1em;transition:border-color .15s,background-color .15s;display:grid}.option:has(:checked){border-color:var(--ivory);background:var(--raised)}.option:has(:disabled){opacity:.45;cursor:default}.option:has(:focus-visible){outline:2px solid var(--ivory);outline-offset:2px}.option input{width:1.2em;height:1.2em;accent-color:var(--ivory);margin:.1em 0 0}.option input:focus-visible{outline:none}.option span{gap:.2em;display:grid}.option small{color:var(--muted);font-size:.875em}progress{appearance:none;background:var(--line);border:0;border-radius:999px;width:100%;height:.5em;overflow:hidden}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--ivory)}progress::-moz-progress-bar{background:var(--ivory)}#preview{aspect-ratio:9/16;background:#000;border-radius:16px;height:min(52dvh,28em);margin:0 auto;display:block}.lengths legend{color:var(--muted);padding:0 0 .6em;font-size:.875em}.fields{gap:.75em;display:grid}.field{gap:.45em;display:grid}.field span{color:var(--muted);font-size:.875em}.field input{width:100%;min-height:var(--target);border:1px solid var(--line-strong);background:var(--raised);color:var(--ivory);font:inherit;border-radius:12px;padding:0 1em;font-size:max(16px,1em)}.field input:hover{border-color:var(--muted)}.lengths:disabled{opacity:.45}.choices{flex-wrap:wrap;gap:.5em;display:flex}.choices label{cursor:pointer;position:relative}.lengths:disabled label{cursor:default}.choices input{opacity:0;cursor:inherit;margin:0;position:absolute;inset:0}.choices label>span{min-height:var(--target);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;padding:0 1.1em;transition:background-color .15s,color .15s;display:inline-flex}.choices label:hover :not(:checked,:disabled)+span{color:var(--ivory)}.choices :checked+span{background:var(--ivory);color:var(--ebony)}.choices :focus-visible+span{outline:2px solid var(--ivory);outline-offset:2px}.export-stage{place-items:center;display:grid}.export-stage canvas{background:#000;border-radius:16px;width:auto;height:min(40dvh,22em)}#export-cancel{justify-self:center}#export-result .row>*{flex:1}.toasts{inset:calc(var(--target) + var(--pad) * 1.5 + env(safe-area-inset-top)) 0 auto;z-index:10;padding:0 var(--pad);pointer-events:none;justify-items:center;gap:.5em;display:grid;position:fixed}.toast{border:1px solid var(--line);background:var(--raised);border-radius:14px;max-width:34em;padding:.7em 1.15em;font-size:.9375em;animation:.2s ease-out rise;box-shadow:0 12px 40px #00000073}.toast.error{border-color:var(--felt)}#open{anchor-name:--open}#settings{anchor-name:--settings;color:var(--muted)}#fullscreen{anchor-name:--fullscreen;color:var(--muted)}section:has(>#screen-mode){display:none}#settings:hover,#fullscreen:hover{color:var(--ivory)}.check{min-height:var(--target);cursor:pointer;align-items:center;gap:.65em;font-size:.9375em;display:flex}.check input{width:1.15em;height:1.15em;accent-color:var(--mint);cursor:inherit;margin:0}.check:has(:disabled){opacity:.38;cursor:default}.panel :is(#tour-start,#screen-mode){justify-self:start}.tour{width:100%;max-width:none;height:100%;max-height:none;color:var(--ivory);box-shadow:none;pointer-events:none;background:0 0;border:0;border-radius:0;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.tour:popover-open{animation:.3s ease-out fade}.tour-spot{box-shadow:0 0 0 2px var(--mint), 0 0 0 8px #7ee8c42e, 0 0 0 200vmax #050609bd;pointer-events:none;transition:left .45s var(--ease), top .45s var(--ease), width .45s var(--ease), height .45s var(--ease);border-radius:999px;position:fixed}.tour-card{pointer-events:auto;border:1px solid var(--line);background:var(--surface);width:min(22em,100vw - 24px);transition:left .45s var(--ease), top .45s var(--ease);border-radius:20px;gap:.5em;padding:1.25em 1.25em 1em;display:grid;position:fixed;overflow:hidden;box-shadow:0 24px 64px #0000008c}.tour-progress{background:var(--raised);height:3px;position:absolute;inset:0 0 auto}.tour-progress span{background:var(--mint);height:100%;transition:width .45s var(--ease);display:block}.tour-count{color:var(--mint);font-variant-numeric:tabular-nums;font-size:.8125em;font-weight:650}.tour-card h2{font-family:var(--serif);letter-spacing:-.01em;margin-top:.15em;font-size:1.375em;font-weight:600}.tour-card p.muted{text-wrap:pretty;line-height:1.55}.tour-actions{justify-content:flex-end;align-items:center;gap:var(--gap);margin-top:.6em;display:flex}.tour-actions .link{margin-right:auto;padding-inline:.25em}@keyframes reveal{to{visibility:visible}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}@keyframes fade{0%{opacity:0}}@keyframes pulse{50%{opacity:.35}}@keyframes spin{to{rotate:1turn}}@keyframes focus-in{0%{outline-offset:calc(var(--ring-offset) + 4px);outline-color:#0000}}@keyframes pop{0%{opacity:0;rotate:-24deg;scale:.3}60%{scale:1.15}}@media (width<=900px){.brand .label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.piece .by{display:none}.hand{width:var(--target);gap:.35em;padding:0}.hand .long{display:none}#wait{width:var(--target);padding:0}#wait .label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}@media (width>=641px) and (width<=1100px){.transport{grid-template-columns:auto auto;justify-content:space-between;row-gap:.4em}.seek{grid-column:1/-1}.transport .left{grid-row:2}}@media (width<=640px){.bar .label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#export,#record{width:var(--target);padding:0}.brand{padding-right:0}.transport{row-gap:.4em;column-gap:var(--gap);grid-template-columns:auto minmax(0,1fr)}.transport .right{grid-column:1/-1;justify-content:space-between}.facts{grid-template-columns:repeat(2,auto);grid-auto-flow:row;row-gap:1em}.facts>div:nth-child(odd){border-left:0}.seek{gap:.5em}#total{display:none}.stepper output{min-width:3em}.hud span{font-size:1.25em}dialog{border-bottom:0;border-radius:24px 24px 0 0;width:100%;max-width:100%;max-height:calc(100dvh - 1rem);margin:auto 0 0}.sheet{padding-bottom:max(1.5em, env(safe-area-inset-bottom))}#preview{height:min(46dvh,26em)}}@media (width<=640px) and (orientation:portrait){.top{gap:2px}.empty{background:#0c0e13eb;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),#0000);mask-image:linear-gradient(#000 calc(100% - 28px),#0000)}.top:has(#piece.loaded) .brand{width:var(--target);justify-content:center;padding:0}.top:has(#piece.loaded) .brand .label{display:none}.top:has(#piece.loaded) .piece{text-align:left;justify-items:start}.piece:not(.loaded)>span{clip-path:inset(50%);width:1px;height:1px;position:absolute}#fullscreen{display:none}section:has(>#screen-mode:not([hidden])){display:grid}@supports (anchor-name:--device){#install-panel{position-anchor:--settings}}.transport .right{column-gap:4px}}@media (width<=900px),(height<=500px) and (orientation:landscape){.top #export{width:var(--target);padding:0}.top #export .label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.segmented .hand[aria-pressed=true],.segmented .hand[aria-pressed=true]:hover{background:color-mix(in srgb, var(--hand) 22%, transparent);box-shadow:none}}@media (width<=359px){.transport .right{flex-wrap:wrap;row-gap:.4em}.stepper output{min-width:2.8em}.transport .segmented .hand{width:40px;min-width:0}.transport .right .stepper .icon{width:28px}.transport .right .stepper .icon:after{inset:0 -8px}}@media (pointer:coarse){.transport .stepper .icon,.transport .segmented .hand{position:relative}.transport .stepper .icon:after,.transport .segmented .hand:after{content:"";position:absolute;inset:-3px -6px}}.stepper .caption{display:none}@media (width<=900px),(height<=500px) and (orientation:landscape){.transport .stepper .icon{width:32px;min-width:0;position:relative}.transport .stepper .icon:after{content:"";position:absolute;inset:0 -6px}}@media (width>=641px) and (width<=900px),(width<=640px) and (orientation:landscape),(height<=500px) and (orientation:landscape){.transport .segmented{border-radius:18px}.transport .right{column-gap:4px}.transport .right :is(.hand,#wait,#record){width:auto;min-width:var(--target);border-radius:15px;flex-direction:column;gap:3px;padding:4px 8px}.transport .stepper .value{flex-direction:column;align-items:center;gap:2px;display:flex}.transport .right :is(.hand .long,#wait .label,#record .label,.stepper .caption){clip-path:none;width:auto;height:auto;font-size:.625rem;font-weight:550;line-height:1;display:block;position:static;overflow:visible}.transport .right :is(.hand,#wait) svg{width:1.25em;height:1.25em}}@media (width>=1800px) and (hover:none){:root{font-size:1.5rem}:focus-visible{outline-width:4px}body{padding:2.5vh 2.5vw}}@media (height<=500px) and (orientation:landscape){body{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) auto}#stage{margin-left:env(safe-area-inset-left);grid-area:1/1}.bar{padding-block:4px}.top{padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px 6px;border-bottom:0;border-left:1px solid var(--line);scrollbar-width:none;flex-direction:column;grid-area:1/2;justify-content:safe center;align-items:center;gap:4px;display:flex;overflow:hidden auto}.top .piece,.empty>p,.empty .features,.top .brand .label{display:none}.top .brand{width:var(--target);justify-content:center;padding:0}.empty{gap:.6em;padding-block:.75em}.empty h1{max-width:none}.empty .piece-card canvas{aspect-ratio:3}.top .label,#record .label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.top .actions{flex-direction:column;gap:4px}.top .pro-chip{margin:0 0 .75em}.top #export,#record{width:var(--target);justify-content:center;gap:.3em;padding:0}.transport{column-gap:var(--gap);grid-area:2/1/3/3}@media (width<=760px){#elapsed,#total{display:none}}@media (width<=640px){.top{grid-area:1/2/3/3}.transport{grid-area:2/1}}@media (height<=360px){.empty p{display:none}}.toasts{inset-block-start:max(var(--pad), env(safe-area-inset-top))}.hud{top:calc(var(--pad) * .5)}.hud p{padding:.1em .65em}.hud span{font-size:1.1em}.hud small{font-size:.6875em}.tour-card{gap:.3em;width:min(30em,100vw - 24px);padding:.9em 1.1em .75em}.tour-actions{margin-top:.3em}@supports (anchor-name:--device){.panel{top:max(var(--pad), env(safe-area-inset-top));right:calc(anchor(left) + 8px);max-height:calc(100dvh - 2 * var(--pad));position-try-fallbacks:none}}.transport{padding-bottom:max(4px, env(safe-area-inset-bottom));grid-template-columns:auto minmax(0,1fr) auto}.seek{grid-column:auto}.transport .left{grid-row:auto}.play,.play:hover:not(:disabled){width:var(--target);height:var(--target)}.empty{inset:0 0 calc(var(--keys,25%) + 6px) 0;gap:.6em}.empty h1{font-size:1.4em}.empty .hint,.features{display:none}.cover-body{gap:.35em}.cover-title{font-size:clamp(1.75rem,10vh,3rem)}.facts{margin:.5em 0 .4em}.cover-hint{display:none}}@media (pointer:coarse){.empty .hint,.cover-hint{display:none}.handle:after{content:"";position:absolute;inset:-10px}}@media (hover:none) and (pointer:coarse){.panel .shortcuts,.panel [data-i18n-html=keysHelp]{display:none}.keys-help:not(:has(.measured)){display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}html[data-pending] body{animation:0s 1.5s forwards reveal!important}}@media (prefers-reduced-transparency:reduce){.cover,dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.score-view{background:var(--ebony);touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;display:block;position:absolute;inset:0 0 auto;overflow:hidden}.score-view[hidden]{visibility:hidden}.score-strip{transform-origin:0 0;position:absolute;top:0;left:0}.score-svg{position:relative}.score-svg svg{width:auto;height:auto;display:block}.score-current{background:#ffffff0b;border-radius:8px;position:absolute}.score-loop{box-shadow:inset 2px 0 var(--mint), inset -2px 0 var(--mint);background:#7ee8c41a;position:absolute}.score-cursor{background:var(--miss);pointer-events:none;border-radius:1px;width:2px;margin-left:-1px;position:absolute;top:6%;bottom:6%;box-shadow:0 0 10px #ff5a5fb3}.score-view .waiting{animation:.8s ease-in-out infinite alternate score-pulse}@keyframes score-pulse{0%{opacity:1}to{opacity:.3}}.score-status{z-index:1;background:var(--ebony);color:var(--muted);place-items:center;margin:0;display:grid;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.score-view .waiting{opacity:.6;animation:none}.pro-cta:hover:not(:disabled):after{animation:none}}.pro-tag{background:var(--mint);color:var(--ebony);letter-spacing:.02em;vertical-align:middle;border-radius:999px;margin-left:.4em;padding:.05em .45em;font-size:.7em;font-weight:700;display:none}.lengths.locked .pro-tag{display:inline-block}.lengths.locked .choices input:not([value="15"])+span{opacity:.6}.pro-locked,.pro-locked:hover:not(:disabled){color:var(--muted)}.primary.pro-locked,.primary.pro-locked:hover:not(:disabled){background:var(--raised)}.pro-locked:after{content:"Pro";background:var(--mint);color:var(--ebony);letter-spacing:.02em;border-radius:999px;padding:.05em .45em;font-size:.7em;font-weight:700}:is(#wait,#view).pro-locked{position:relative}:is(#wait,#view).pro-locked:after{position:absolute;top:-.4em;right:-.4em}.choices label,.choices input{-webkit-tap-highlight-color:transparent;outline:none}.pro-why{color:var(--ivory);background:#7ee8c41f;border-radius:12px;padding:.6em .9em}.pro-features{gap:.5em;margin:0;padding-left:1.2em;display:grid}.pro-status{color:var(--mint);margin:0;font-weight:650}.pro-status:empty{display:none}.pro-prices{color:var(--muted);gap:.25em;margin:0;display:grid}.pro-restore summary{cursor:pointer;color:var(--muted);padding-block:10px;line-height:24px}.pro-restore .row{margin-top:.75em}#pro-dialog input{min-height:var(--target);border:1px solid var(--line-strong);background:var(--raised);color:var(--ivory);font:inherit;border-radius:12px;flex:12em;padding:0 1em;font-size:max(16px,1em)}.pro-chip{min-height:var(--target);color:var(--ebony);letter-spacing:.02em;background:0 0;border:0;padding:0 .2em;font-size:.8125em;font-weight:750}.pro-chip .label{background:linear-gradient(135deg, #b8f5df 0%, var(--mint) 55%, #4fd0a6 100%);transition:box-shadow .2s var(--ease), transform .2s var(--ease);border-radius:999px;padding:.4em .85em;box-shadow:0 0 0 1px #7ee8c473,0 2px 10px #7ee8c438}.bar .pro-chip .label{clip-path:none;width:auto;height:auto;position:static;overflow:visible}.pro-chip:hover:not(:disabled){background:0 0}.pro-chip:hover:not(:disabled) .label{transform:translateY(-1px);box-shadow:0 0 0 1px #7ee8c499,0 4px 14px #7ee8c459}.pro-chip:active:not(:disabled) .label{transform:scale(.97)}.pro-cta{min-height:var(--target);background:linear-gradient(135deg, #b8f5df 0%, var(--mint) 45%, #4fd0a6 100%);color:var(--ebony);letter-spacing:.01em;isolation:isolate;transition:box-shadow .2s var(--ease), transform .2s var(--ease);border:0;border-radius:999px;align-items:center;gap:.4em;padding:0 1em 0 .85em;font-size:.9375em;font-weight:750;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #7ee8c473,0 6px 20px #7ee8c44d}.pro-cta svg{fill:currentColor;width:1.1em;height:1.1em}.pro-cta:after{content:"";pointer-events:none;background:linear-gradient(100deg,#0000 0%,#ffffff8c 50%,#0000 100%);width:45%;position:absolute;inset:-40% auto -40% -60%;transform:skew(-18deg)}.pro-cta:hover:not(:disabled):after{animation:shine .8s var(--ease)}.pro-cta:hover:not(:disabled){background:linear-gradient(135deg,#c9f8e6 0%,#8ff0cc 45%,#5ad9ae 100%);transform:translateY(-1px);box-shadow:0 0 0 1px #7ee8c499,0 10px 28px #7ee8c473}.pro-cta:active:not(:disabled){transform:scale(.97)}.pro-cta{min-height:calc(var(--target) + 6px);flex:100%;justify-content:center;font-size:1em}@keyframes shine{0%{left:-60%}to{left:130%}}.forget{z-index:1;width:var(--target);height:var(--target);color:var(--ivory);background:0 0;border:0;place-items:center;display:grid;position:absolute;top:0;right:0}.forget span{width:28px;height:28px;box-shadow:0 0 0 1px var(--line-strong);background:#0c0e13cc;border-radius:50%;place-items:center;display:grid}.forget svg{width:1em;height:1em}.forget:hover span{background:var(--miss);color:#fff}.menu{gap:2px;display:grid}.menu .row{width:100%;color:var(--ivory);text-align:left;background:0 0;border:0;border-radius:12px;justify-content:flex-start;gap:.75em;padding:0 .75em;font-size:.9375em;font-weight:550}.menu .row:hover:not(:disabled){background:var(--raised)}.menu .row svg{width:1.25em;height:1.25em;color:var(--muted);flex:none}.menu #device{anchor-name:none;position:relative}.menu #device .dot{width:8px;height:8px;box-shadow:0 0 0 2px var(--surface);position:absolute;top:10px;left:1.6em}#device:not(.live) .dot{display:none}.menu #device-name{max-width:none}.pro-form{gap:.75em;display:grid}.pro-email{color:var(--muted);gap:.35em;font-size:.875em;display:grid}.pro-email input{font-size:max(16px,1.15em)}.pro-email small{font-size:inherit}.pro-plans{gap:var(--gap);display:grid}@media (width>=480px){.pro-plans{grid-template-columns:1fr 1fr}}.plan{text-align:left;white-space:normal;border-radius:16px;flex-direction:column;justify-content:center;align-items:flex-start;gap:.25em;min-width:0;min-height:4rem;padding:.75em 1em}.plan .label{display:block}.plan .label svg{vertical-align:-.15em;margin-right:.35em;display:inline-block}.plan small{opacity:.85;font-size:.75em;font-weight:500;line-height:1.3}.pro-secure{margin:0;font-size:.875em}