:root{--ink: #17121d;--ink-2: #221a2b;--ink-3: #2d2435;--brass: #c9a24b;--brass-hi: #e6c87d;--cream: #ece3d2;--muted: rgba(236, 227, 210, .52);--line: rgba(201, 162, 75, .26);--line-soft: rgba(236, 227, 210, .1);--curtain: #9e2b3a;--font-display: ui-serif, "New York", "Hiragino Mincho ProN", Georgia, serif;--font-sans: -apple-system, ui-sans-serif, "Hiragino Sans", system-ui, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;font-family:var(--font-sans);color:var(--cream)}[data-theme=day]{--ink: #f4eedd;--ink-2: #ece3cd;--ink-3: #e2d6bb;--brass: #b5832c;--brass-hi: #936916;--cream: #2a2018;--muted: rgba(42, 32, 24, .55);--line: rgba(120, 85, 30, .32);--line-soft: rgba(42, 32, 24, .12)}[data-theme=day] .panel{background:linear-gradient(180deg,#f7f2e4f2,#eee6d2f2);box-shadow:0 12px 34px #46321438,inset 0 1px #ffffff80}[data-theme=day] .btn-primary,[data-theme=day] .chip-on,[data-theme=day] .toggle-on.solo{color:#fff}[data-theme=day] .name-label{background:#f7f2e4eb;color:#2a2018}[data-theme=day] .ui-toggle{background:#f7f2e4eb}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{width:100%;height:100%;overflow:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none}.app{position:relative;width:100vw;height:100vh}.app canvas{display:block;touch-action:none}.ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ui-layer>div{position:absolute;pointer-events:none}.top-left{top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));display:flex;flex-direction:column;gap:12px;width:224px}.top-right{top:calc(16px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));display:flex;flex-direction:column;gap:12px;width:264px;max-height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}.bottom-center{bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%)}.bottom-left{bottom:calc(20px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left))}.panel{pointer-events:auto;background:linear-gradient(180deg,#221a2beb,#17121df0);border:1px solid var(--line);border-radius:4px;padding:15px 16px;box-shadow:0 14px 44px #00000080,inset 0 1px #ffffff0a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.song-selector h1{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:27px;line-height:1;letter-spacing:.005em;color:var(--cream);margin-bottom:14px}.song-selector h1:after{content:"";display:block;width:58px;height:13px;margin-top:9px;background:repeating-linear-gradient(to bottom,var(--brass) 0 1px,transparent 1px 3px);opacity:.7}.panel-title{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi);display:flex;align-items:center;gap:8px;padding-bottom:9px;margin-bottom:13px;border-bottom:1px solid var(--line)}.dot{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px #0000004d}.field{display:flex;flex-direction:column;gap:5px;font-size:11px;letter-spacing:.04em;margin-bottom:11px}.field span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px}select,.text-input,.color-input{width:100%;font-family:var(--font-sans);font-size:16px;color:var(--cream);background:var(--ink);border:1px solid var(--line);border-radius:3px;padding:9px 10px}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:right 12px center,right 7px center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}.color-input{height:34px;padding:3px;cursor:pointer}.name-label{pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;font-family:var(--font-sans);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cream);background:#17121dd1;padding:3px 9px;border-radius:2px;border:1px solid var(--line)}.slider-row{display:flex;flex-direction:column;gap:4px;font-size:11px;margin-bottom:11px}.slider-row span{color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:24px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)}input[type=range]::-moz-range-track{height:2px;background:var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--brass-hi),var(--brass) 70%);border:1px solid rgba(0,0,0,.35);box-shadow:0 1px 5px #00000080}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brass);border:1px solid rgba(0,0,0,.35)}button{cursor:pointer;font-family:var(--font-sans);font-size:13px;letter-spacing:.03em;color:var(--cream);border:1px solid var(--line);border-radius:3px;background:var(--ink-2);padding:9px 14px;transition:background .15s,border-color .15s,color .15s,transform .05s}button:hover{border-color:var(--brass);background:var(--ink-3)}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}.btn{background:var(--ink-2)}.btn-primary{background:var(--brass);border-color:var(--brass-hi);color:#1c1407;font-weight:700;letter-spacing:.05em}.btn-primary:hover{background:var(--brass-hi)}.btn-danger{background:var(--curtain);border-color:#ffffff2e;color:#fff;width:100%;margin-top:8px}.btn-danger:hover{background:#b5333f;border-color:#ffffff4d}.transport{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;min-width:460px;padding:14px 18px}.transport-buttons{display:flex;gap:8px}.transport .slider-row{margin-bottom:0;min-width:128px}.transport .toggle{flex:0 0 auto;min-width:52px}.progress{flex-basis:100%;height:4px;border-radius:2px;background:var(--line);cursor:pointer;overflow:hidden}.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brass),var(--brass-hi))}.preset-grid,.instrument-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}.chip{background:var(--ink);color:var(--cream);font-size:11px;letter-spacing:0;padding:8px 5px;text-align:center;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-on{background:var(--brass);border-color:var(--brass-hi);color:#1c1407;font-weight:700}.chip:disabled{opacity:.35;cursor:not-allowed}.hint{font-size:10.5px;color:var(--muted);letter-spacing:.02em;margin-top:11px;line-height:1.55}.song-selector .btn{width:100%;margin-top:9px}.toggle-row{display:flex;gap:8px;margin-bottom:13px}.toggle{flex:1;background:var(--ink);color:var(--cream);font-size:12px;letter-spacing:.04em;padding:9px 8px}.toggle-on.solo{background:var(--brass);border-color:var(--brass-hi);color:#1c1407;font-weight:700}.toggle-on.mute{background:var(--curtain);border-color:#ffffff2e;color:#fff;font-weight:700}.share-buttons{display:flex;gap:6px}.share-buttons .btn{flex:1;min-width:0;padding:9px 6px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.share-buttons .btn:disabled{opacity:.35;cursor:not-allowed}.rec-btn{width:100%;margin-top:6px}.share-msg{font-size:10.5px;color:var(--brass-hi);letter-spacing:.04em;margin-top:9px;text-align:center}.camera-buttons{display:flex;gap:6px}.ui-toggle{pointer-events:auto;position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translate(-50%);width:40px;height:40px;padding:0;border-radius:50%;font-size:15px;line-height:1;color:var(--brass-hi);background:#17121dd9;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.sample-status{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.04em;color:var(--muted);padding:11px 14px}.spinner{width:12px;height:12px;border:2px solid var(--line);border-top-color:var(--brass);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(pointer:coarse){button{min-height:44px}.chip{min-height:40px}input[type=range]{height:32px}}@media(max-width:820px){.panel{padding:11px 12px;border-radius:4px}.top-left{top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));width:42vw;max-width:172px;gap:9px;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.top-right{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:42vw;max-width:172px;gap:9px;max-height:62vh}.song-selector h1{font-size:21px}.song-selector h1:after{width:46px;height:11px}.preset-grid,.instrument-grid{grid-template-columns:1fr}.chip{font-size:11px;padding:7px}.bottom-center{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100vw - 20px);display:flex;justify-content:center}.transport{min-width:0;width:100%;max-width:540px;gap:9px 12px;padding:11px 13px}.transport .slider-row{min-width:76px;flex:1}.bottom-left{bottom:calc(132px + env(safe-area-inset-bottom));left:calc(10px + env(safe-area-inset-left))}.camera-panel{padding:9px 11px}}@media(min-width:821px)and (orientation:landscape)and (pointer:coarse){.top-right{flex-direction:row-reverse;align-items:flex-start;width:auto;max-width:72vw;gap:10px}.top-right>.panel{width:252px;max-height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}.top-left{width:248px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}