:root,html[data-theme=light]{--paper:#f3ecdd;--paper-deep:#e9dfcb;--ink:#1c1a16;--ink-soft:#5b554a;--line:#1c1a1624;--vermilion:#d2432a;--indigo:#2e3f8f;--ochre:#d49a2a;--sage:#3f7a63;--plum:#7a3a66;--slate:#4a5560;--grain-opacity:.035;--grain-blend:normal;--font-display:"Fraunces", serif;--font-ui:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"DM Mono", monospace;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--transition-fast:.15s ease-out;--transition-normal:.22s ease-out;--backdrop:#1c1a1659}html[data-theme=dark]{--paper:#1a1814;--paper-deep:#23201a;--ink:#ede5d3;--ink-soft:#a39b88;--line:#ede5d324;--vermilion:#e5573d;--indigo:#7f92e0;--ochre:#e0ac3f;--sage:#5fa386;--plum:#a8609a;--slate:#8593a3;--grain-opacity:.02;--grain-blend:soft-light;--backdrop:#0000008c}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;background-color:var(--paper);width:100%;height:100dvh;color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}body{padding-top:env(safe-area-inset-top,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;display:flex}input,select,textarea{font-size:16px}button{touch-action:manipulation}.paper-grain{pointer-events:none;opacity:var(--grain-opacity,.035);mix-blend-mode:var(--grain-blend,normal);z-index:9999;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:fixed;inset:0}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}#app{background-color:var(--paper);flex-direction:column;width:100%;height:100%;display:flex;position:relative}.gate-screen{padding:max(var(--space-2), env(safe-area-inset-top,8px)) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom,8px));text-align:center;z-index:10;transition:opacity var(--transition-normal), visibility var(--transition-normal);-webkit-overflow-scrolling:touch;background-color:#0000;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}.gate-screen>:not(.garden-background-canvas):not(.hero-garden-canvas):not(.gate-topbar){z-index:1;position:relative}.hero-garden-canvas{cursor:default;touch-action:none;z-index:1;width:100%;height:100%;display:block;position:absolute;inset:0}.garden-background-canvas{pointer-events:none;z-index:0;width:100vw;height:100dvh;position:fixed;inset:0}.gate-screen.hidden{opacity:0;visibility:hidden;pointer-events:none}.gate-topbar{top:var(--space-4);right:var(--space-4);z-index:20;align-items:center;gap:var(--space-2);display:flex;position:absolute}.try-yourself-section{flex-direction:column;align-items:center;width:100%;max-width:500px;margin-top:10px;display:flex}.try-yourself-row{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start;gap:8px;width:100%;padding:4px 6px;display:flex;overflow-x:auto}.try-yourself-row::-webkit-scrollbar{display:none}@media (width>=520px){.try-yourself-row{justify-content:center}}.try-yourself-card{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;text-align:left;scroll-snap-align:start;touch-action:manipulation;min-height:98px;transition:transform var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);flex-direction:column;flex:0 0 148px;align-items:flex-start;padding:10px 12px;display:flex}.try-yourself-card:hover{border-color:var(--ink-soft);transform:translateY(-1px)}.try-yourself-card:active{background-color:var(--paper);transform:translateY(0)}.try-yourself-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.try-yourself-tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--vermilion);margin-bottom:2px;font-size:.65rem;font-weight:500}.try-yourself-title{font-family:var(--font-display);color:var(--ink);margin-bottom:3px;font-size:.95rem;font-weight:500;line-height:1.2}.try-yourself-subtitle{font-family:var(--font-ui);color:var(--ink-soft);margin-bottom:4px;font-size:.72rem;line-height:1.2}.try-yourself-credit{font-family:var(--font-ui);color:var(--ink-soft);opacity:.85;white-space:nowrap;text-overflow:ellipsis;width:100%;margin-top:auto;font-size:.68rem;overflow:hidden}.gate-theme-wrapper{align-items:center;display:flex}.gate-brand-icon{justify-content:center;align-items:center;margin-top:0;margin-bottom:2px;display:flex}.gate-icon-img{object-fit:contain;filter:drop-shadow(0 4px 16px #1c1a161f);width:auto;height:84px;max-height:88px;transition:transform var(--transition-normal)}@media (width>=640px){.gate-brand-icon{margin-bottom:4px}.gate-icon-img{height:94px;max-height:98px}}.gate-icon-img:hover{transform:scale(1.04)}.header-brand-icon{object-fit:contain;vertical-align:middle;flex-shrink:0;width:30px;height:30px;margin-right:8px;display:inline-block}.icon-light-mode{display:inline-block}.icon-dark-mode{display:none}[data-theme=dark] .icon-light-mode{display:none!important}[data-theme=dark] .icon-dark-mode{display:inline-block!important}[data-theme=dark] .gate-icon-img{filter:drop-shadow(0 4px 20px #0009)}.hero-wordmark-container{background:0 0;justify-content:center;align-items:center;width:100%;max-width:900px;height:180px;margin-top:0;margin-bottom:4px;display:flex;position:relative;overflow:hidden}@media (width>=640px){.hero-wordmark-container{height:220px;margin-bottom:8px}}@media (width>=768px){.hero-wordmark-container{height:260px;margin-bottom:12px}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-title{z-index:1;justify-content:center;align-items:center;margin:0;line-height:1;display:flex;position:relative}.app-title-link{border-radius:var(--radius-sm,4px);z-index:1;justify-content:center;align-items:center;padding:4px;text-decoration:none;display:inline-flex;position:relative}.app-title-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.brand-wordmark{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:auto;max-width:min(92vw,420px);height:clamp(96px,22vw,136px);filter:none!important;box-shadow:none!important;background:0 0!important}@media (width>=768px){.brand-wordmark{max-width:min(90vw,760px);height:clamp(160px,20vw,220px)}}.wordmark-light{display:block}.wordmark-dark{display:none}[data-theme=dark] .wordmark-light{display:none!important}[data-theme=dark] .wordmark-dark{display:block!important}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .wordmark-light{display:none!important}:root:not([data-theme=light]) .wordmark-dark{display:block!important}}.app-subtitle{display:none!important}.start-btn{appearance:none;border:1px solid var(--ink);background-color:var(--ink);color:var(--paper);font-family:var(--font-ui);letter-spacing:.01em;border-radius:var(--radius-md);cursor:pointer;min-width:140px;min-height:42px;transition:background-color var(--transition-fast), transform var(--transition-fast), opacity var(--transition-fast);touch-action:manipulation;margin-top:2px;margin-bottom:4px;padding:10px 24px;font-size:.95rem;font-weight:500}.start-btn:hover{opacity:.92}.start-btn:active{transform:scale(.98)}.main-view{padding:max(var(--space-2), env(safe-area-inset-top,0px)) var(--space-3) var(--space-2);gap:var(--space-2);flex-direction:column;flex:1;height:100dvh;display:flex;overflow:hidden}.app-header{padding:0 var(--space-1);flex-wrap:nowrap;flex-shrink:0;justify-content:space-between;align-items:center;height:38px;display:flex;overflow:hidden}.header-left{align-items:center;gap:var(--space-2);flex:none;min-width:0;display:flex}.header-title{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:color var(--transition-fast), opacity var(--transition-fast);flex:none;align-items:center;font-size:1.25rem;font-weight:500;text-decoration:none;display:inline-flex;position:relative}.header-title:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header-title:hover{color:var(--ink-soft)}.header-title:active{opacity:.85}.header-title:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--radius-sm)}.save-failure-banner{justify-content:space-between;align-items:center;gap:var(--space-3);padding:8px var(--space-3);background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);margin:var(--space-1) 0;font-family:var(--font-ui);color:var(--ink);z-index:50;font-size:.84rem;display:flex}.save-failure-text{font-weight:500}.save-failure-actions{align-items:center;gap:8px;display:flex}.save-failure-btn{appearance:none;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-family:var(--font-ui);cursor:pointer;touch-action:manipulation;min-height:36px;transition:background-color var(--transition-fast), border-color var(--transition-fast);padding:6px 14px;font-size:.8rem;font-weight:500;position:relative}.save-failure-btn:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.save-failure-btn:hover{border-color:var(--ink)}.save-failure-leave{color:var(--ink-soft);background:0 0}.header-divider-dot{color:var(--ink-soft);opacity:.5;-webkit-user-select:none;user-select:none;font-size:.8rem}.creation-title-group{align-items:center;gap:6px;min-width:0;display:flex}.creation-title-input{font-family:var(--font-display);color:var(--ink);border-radius:var(--radius-sm);white-space:nowrap;text-overflow:ellipsis;cursor:pointer;min-width:70px;max-width:190px;transition:border-color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:1px solid #0000;padding:2px 6px;font-size:1rem;font-weight:500;overflow:hidden}.creation-title-input:hover{background-color:var(--paper-deep);border-color:var(--line)}.creation-title-input:focus{background-color:var(--paper);border-color:var(--ink);cursor:text;outline:none}.creation-save-status{font-family:var(--font-mono);color:var(--ink-soft);white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:.72rem;transition:opacity .3s ease-out}.creation-save-status.faded{opacity:0}.header-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.header-btn{appearance:none;background-color:var(--paper-deep);color:var(--ink);border:1px solid var(--line);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;touch-action:manipulation;min-height:32px;transition:background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);align-items:center;gap:4px;padding:4px 10px;font-size:.8rem;font-weight:500;display:flex;position:relative}.header-btn:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header-btn:hover{border-color:var(--ink-soft);filter:brightness(.96)}.header-btn:active{transform:scale(.98)}.header-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.header-help-circle-btn{appearance:none;background-color:var(--paper-deep);color:var(--ink);border:1px solid var(--line);font-family:var(--font-display);cursor:pointer;touch-action:manipulation;width:36px;min-width:36px;height:36px;min-height:36px;transition:background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast), transform var(--transition-fast);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:1.05rem;font-weight:500;line-height:1;display:inline-flex;position:relative}.header-help-circle-btn:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header-help-circle-btn:hover{border-color:var(--ink-soft);filter:brightness(.96)}.header-help-circle-btn:active{transform:scale(.96)}.header-help-circle-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.hdr-text-long{display:inline}.hdr-text-short{display:none}.sync-text{display:inline}.sync-icon{stroke:currentColor;width:16px;height:16px;display:none}.header-status{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap;font-size:.72rem}@media (width<=600px){.main-view{padding:max(4px, env(safe-area-inset-top,0px)) 6px 6px;gap:4px}.app-header{gap:4px;height:38px;padding:0 2px}.header-left{flex:none;gap:2px}.header-title{flex:none;font-size:1.05rem}.creation-title-group,.header-divider-dot{display:none}.header-actions{gap:4px}.header-btn{touch-action:manipulation;min-height:32px;padding:4px 6px;font-size:.72rem;position:relative}.header-btn:after{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hdr-text-long{display:none}.hdr-text-short{display:inline}.sync-text{display:none}.sync-icon{display:inline-block}.header-status{display:none}#header-studio-btn,#header-export-btn,.sync-pill-wrapper{display:none!important}.header-more-btn{justify-content:center;align-items:center;display:inline-flex!important}}@media (width<=380px){.app-header{gap:2px;padding:0 1px}.header-title{font-size:.95rem}.header-actions{gap:3px}.header-btn{min-height:30px;padding:3px 5px;font-size:.7rem}}.header-more-btn{display:none!important}.header-more-overlay{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:var(--z-modal);opacity:0;visibility:hidden;background-color:#1c1a1673;justify-content:center;align-items:flex-end;transition:opacity .18s ease-out,visibility .18s ease-out;display:flex;position:fixed;inset:0}.header-more-overlay.visible{opacity:1;visibility:visible}.header-more-sheet{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:500px;max-height:85vh;padding:var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom,0px));border-bottom:none;transition:transform .22s ease-out;overflow-y:auto;transform:translateY(100%);box-shadow:0 -4px 24px #1c1a1629}.header-more-overlay.visible .header-more-sheet{transform:translateY(0)}@media (prefers-reduced-motion:reduce){.header-more-overlay,.header-more-sheet{transition:none!important;transform:none!important}}.more-sheet-header{padding-bottom:var(--space-3);border-bottom:1px solid var(--line);margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.more-sheet-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:1.15rem;font-weight:600}.more-sheet-close{width:44px;height:44px;color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.more-sheet-close:hover{color:var(--ink);background:#1c1a160f}.more-sheet-section{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.more-sheet-section:last-child{border-bottom:none}.more-sheet-section-header{justify-content:space-between;align-items:baseline;gap:var(--space-2);display:flex}.more-sheet-section-title{font-family:var(--font-ui);color:var(--ink);font-size:.92rem;font-weight:600}.more-hw-info{font-family:var(--font-mono);color:var(--ink-soft);font-size:.72rem}.more-sheet-desc{font-family:var(--font-ui);color:var(--ink-soft);margin:4px 0 10px;font-size:.8rem;line-height:1.35}.more-action-btn{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--ink);border-radius:var(--radius-md);width:100%;min-height:44px;font-family:var(--font-ui);cursor:pointer;background:var(--paper-deep);color:var(--ink);padding:10px 16px;font-size:.88rem;font-weight:500;transition:background .12s ease-out,transform .12s ease-out;display:inline-flex}.more-action-btn.primary{background:var(--ink);color:var(--paper)}.more-action-btn:hover{opacity:.92}.canvas-container{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);touch-action:none;-webkit-touch-callout:none;flex:1;min-height:288px;display:flex;position:relative;overflow:hidden}.canvas-key-chip{z-index:5;appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;min-width:44px;min-height:44px;transition:all var(--transition-fast);color:var(--ink);pointer-events:auto;justify-content:center;align-items:center;gap:6px;padding:4px 10px;display:inline-flex;position:absolute;top:10px;right:12px}.canvas-key-chip:hover{border-color:var(--ink);background-color:var(--paper)}.canvas-key-dot{border:1px solid #1c1a1633;border-radius:50%;flex-shrink:0;width:8px;height:8px}.canvas-key-text{font-family:var(--font-mono);letter-spacing:.02em;font-size:.72rem;font-weight:500}@media (width<=599px){.canvas-key-chip{display:none!important}}@media (orientation:portrait){.canvas-container{min-height:max(288px,60dvh)}}@media (orientation:landscape) and (height<=520px){.canvas-container{min-height:75dvh}.app-header{height:26px}.instruversal-toolbar{padding-top:1px;padding-bottom:max(2px, env(safe-area-inset-bottom,2px))}}.instruversal-toolbar{padding-bottom:max(var(--space-2), env(safe-area-inset-bottom,8px));padding-top:var(--space-1);padding-left:var(--space-2);padding-right:var(--space-2);flex-shrink:0;justify-content:center;width:100%;max-width:100%;margin:0 auto;display:flex;position:relative}.dock-wrapper{align-items:center;width:max-content;max-width:100%;margin:0 auto;display:flex;position:relative}.dock-scroll-container{scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;white-space:nowrap;border-radius:var(--radius-lg);background-color:var(--paper-deep);border:1px solid var(--line);-webkit-user-select:none;user-select:none;width:max-content;max-width:100%;overflow:auto hidden;box-shadow:0 1px 3px #1c1a160d}.dock-scroll-container::-webkit-scrollbar{height:3px;display:block}.dock-scroll-container::-webkit-scrollbar-track{background:0 0}.dock-scroll-container::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}.dock-fade{pointer-events:none;z-index:2;width:16px;transition:opacity .15s ease-out;display:block;position:absolute;top:0;bottom:0}.dock-fade-left{background:linear-gradient(to right, var(--paper-deep), transparent);left:0}.dock-fade-right{background:linear-gradient(to left, var(--paper-deep), transparent);right:0}.dock-fade.hidden{opacity:0}.toolbar-inner{align-items:center;gap:var(--space-2);min-width:max-content;padding:4px 10px;display:flex}.toolbar-divider{background-color:var(--line);flex-shrink:0;width:1px;height:24px}.toolbar-btn{appearance:none;color:var(--ink);border-radius:var(--radius-md);cursor:pointer;width:44px;min-width:44px;height:44px;min-height:44px;transition:background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);touch-action:manipulation;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;padding:0;display:flex}.toolbar-btn:hover:not(:disabled){background-color:var(--line)}.toolbar-btn:active:not(:disabled){transform:scale(.96)}.toolbar-btn:disabled{opacity:.35;cursor:not-allowed}.toolbar-btn-play{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.toolbar-btn-play:hover:not(:disabled){opacity:.92;color:var(--paper)}.toolbar-btn-play.playing{opacity:.88;color:var(--paper)}.toolbar-tool-group{align-items:center;gap:6px;display:flex}.toolbar-tool-toggle{border:1px solid var(--line);border-radius:var(--radius-md);background-color:#1c1a160a;gap:2px;padding:2px;display:flex}.tool-seg-btn{appearance:none;color:var(--ink-soft);border-radius:var(--radius-sm);cursor:pointer;width:40px;min-width:40px;height:38px;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.tool-seg-btn:hover{color:var(--ink)}.tool-seg-btn.active{background-color:var(--paper);color:var(--ink);box-shadow:0 1px 2px #1c1a1614}.toolbar-history-sub{align-items:center;gap:2px;display:flex}.tool-icon-btn{width:38px;min-width:38px;height:38px;min-height:38px}.toolbar-dock-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-ui);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;height:40px;min-height:40px;transition:background-color var(--transition-fast), border-color var(--transition-fast);align-items:center;gap:6px;padding:0 12px;font-size:.8rem;font-weight:500;display:flex}.toolbar-dock-btn:hover{background-color:var(--paper-deep);border-color:var(--ink)}.dock-btn-text{font-size:.8rem;font-weight:500}.dock-btn-chevron{color:var(--ink-soft);align-items:center;display:inline-flex}.toolbar-btn:focus-visible,.tool-seg-btn:focus-visible,.mode-pill-btn:focus-visible,.stepper-btn:focus-visible,.palette-dot-btn:focus-visible,.toolbar-dock-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.toolbar-stepper{border:1px solid var(--line);border-radius:var(--radius-md);background-color:#1c1a160a;align-items:center;gap:2px;height:40px;padding:0 4px;display:flex}.stepper-btn{appearance:none;color:var(--ink);border-radius:var(--radius-sm);cursor:pointer;width:32px;height:32px;transition:background-color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}.stepper-btn:hover{background-color:#1c1a1614}.bpm-display{font-family:var(--font-mono);color:var(--ink);-webkit-user-select:none;user-select:none;justify-content:center;align-items:baseline;gap:3px;min-width:58px;padding:0 6px;font-size:.78rem;display:flex}.bpm-num{font-size:.85rem;font-weight:500}.bpm-lbl{color:var(--ink-soft);font-size:.68rem}.toolbar-palette{align-items:center;gap:2px;display:flex}.palette-dot-btn{appearance:none;cursor:pointer;touch-action:manipulation;background:0 0;border:none;justify-content:center;align-items:center;width:30px;min-width:30px;height:38px;padding:0;display:flex}.palette-dot{width:18px;height:18px;transition:transform var(--transition-fast), box-shadow var(--transition-fast);border:1px solid #1c1a1633;border-radius:50%}.palette-dot-btn:hover .palette-dot{transform:scale(1.12)}.palette-dot-btn.active .palette-dot{box-shadow:0 0 0 2px var(--paper-deep), 0 0 0 3.5px var(--ink);transform:scale(1.18)}.toolbar-clear-wrapper{align-items:center;display:flex}.inline-confirm{border-radius:var(--radius-md);background-color:#d2432a14;border:1px solid #d2432a40;align-items:center;gap:6px;height:38px;padding:0 8px;animation:.15s ease-out fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.confirm-query{font-family:var(--font-ui);color:var(--vermilion);font-size:.78rem;font-weight:500}.confirm-btn{appearance:none;font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;touch-action:manipulation;border:1px solid #0000;padding:4px 10px;font-size:.75rem;font-weight:500}.confirm-yes{background-color:var(--vermilion);color:var(--paper)}.confirm-yes:hover{filter:brightness(.9)}.confirm-no{color:var(--ink);border-color:var(--line);background-color:#0000}.confirm-no:hover{background-color:var(--line)}.panel-backdrop{background-color:var(--backdrop,#1c1a1659);z-index:50;transition:opacity var(--transition-normal);opacity:1;position:fixed;inset:0}.panel-backdrop.hidden{opacity:0;pointer-events:none}.track-panel{z-index:60;background-color:var(--paper);transition:transform var(--transition-normal);box-sizing:border-box;flex-direction:column;max-width:100vw;display:flex;position:fixed;overflow-x:hidden;box-shadow:0 4px 20px #1c1a1626}@media (width>=641px){.track-panel{border-left:1px solid var(--line);width:clamp(340px,28vw,380px);max-width:90vw;top:0;bottom:0;right:0;transform:translate(100%)}.track-panel.visible{transform:translate(0)}}@media (width<=640px){.track-panel{border-top:1px solid var(--line);width:100vw;max-width:100vw;max-height:70dvh;padding-bottom:max(var(--space-2), env(safe-area-inset-bottom,12px));border-radius:14px 14px 0 0;bottom:0;left:0;right:0;overflow-x:hidden;transform:translateY(100%)}.track-panel.visible{transform:translateY(0)}.panel-drag-handle{background-color:var(--line);cursor:grab;border-radius:2px;width:38px;height:4px;margin:4px auto}}.track-panel.hidden{display:none}.track-panel.visible{display:flex}.panel-header{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:var(--space-2);flex-shrink:0;display:flex;position:relative}.panel-tabs{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:4px;padding:2px;display:flex}.panel-tab-btn{appearance:none;color:var(--ink-soft);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;padding:4px 10px;font-size:.8rem;font-weight:500}.panel-tab-btn.active{background-color:var(--paper);color:var(--ink);box-shadow:0 1px 2px #1c1a160f}.panel-close-btn{appearance:none;color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;display:flex}.panel-close-btn:hover{color:var(--ink);background-color:var(--paper-deep)}.panel-content{overscroll-behavior:contain;padding:var(--space-3);-webkit-overflow-scrolling:touch;box-sizing:border-box;flex:1;overflow:hidden auto}.track-list{gap:var(--space-2);box-sizing:border-box;flex-direction:column;width:100%;list-style:none;display:flex}.track-row{border:1px solid var(--line);border-radius:var(--radius-md);background-color:var(--paper);transition:border-color var(--transition-fast), background-color var(--transition-fast);box-sizing:border-box;align-items:center;gap:6px;width:100%;min-width:0;padding:8px 10px;display:flex}.track-row.selected{border-color:var(--ink);background-color:var(--paper-deep)}.track-select-lead{appearance:none;cursor:pointer;font-family:var(--font-ui);color:var(--ink);background:0 0;border:none;flex:0 auto;align-items:center;gap:6px;min-width:0;max-width:88px;padding:0;font-size:.85rem;font-weight:500;display:flex}.track-name-lbl{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-dot-indicator{border:1px solid #1c1a1633;border-radius:50%;flex-shrink:0;width:14px;height:14px}.track-inst-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;flex:0 auto;align-items:center;gap:4px;min-width:0;max-width:82px;padding:3px 6px;font-size:.75rem;display:flex}.inst-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-inst-btn:hover{border-color:var(--ink-soft)}.chevron-icon{color:var(--ink-soft);flex-shrink:0;font-size:.7rem}.track-key-tag{appearance:none;border:1px solid var(--line);background-color:var(--paper-deep);color:var(--ink-soft);font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);flex-shrink:0;margin-left:2px;padding:2px 6px;font-size:.72rem;font-weight:500}.track-key-tag:hover{border-color:var(--ink);color:var(--ink)}.track-controls{flex-shrink:0;align-items:center;gap:4px;min-width:0;margin-left:auto;display:flex}.track-toggle-btn{appearance:none;border-radius:var(--radius-sm);border:1px solid var(--line);width:26px;height:26px;color:var(--ink-soft);font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-fast);touch-action:manipulation;background:0 0;justify-content:center;align-items:center;font-size:.75rem;font-weight:600;display:flex;position:relative}.track-toggle-btn:before{content:"";min-width:44px;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mute-btn.active{background-color:var(--vermilion);border-color:var(--vermilion);color:var(--paper)}.solo-btn.active{background-color:var(--ochre);border-color:var(--ochre);color:#1c1a16}.track-vol-slider{width:44px;min-width:0;max-width:50px;height:24px;accent-color:var(--ink);flex:36px}@media (width<=390px){.track-row{gap:3px;padding:6px 8px}.track-select-lead{max-width:72px}.track-name-lbl{max-width:48px}.track-inst-btn{max-width:70px;padding:3px 4px;font-size:.68rem}.track-vol-slider{width:34px;max-width:40px}.track-toggle-btn{width:24px;height:24px}}.instrument-picker-view{gap:var(--space-2);flex-direction:column;display:flex}.picker-header{padding-bottom:var(--space-2);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;display:flex}.picker-back-btn{appearance:none;color:var(--ink);font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;padding:0;font-size:.8rem;font-weight:500}.picker-title{font-family:var(--font-ui);color:var(--ink);align-items:center;gap:6px;font-size:.82rem;font-weight:600;display:flex}.palette-dot-small{border-radius:50%;width:10px;height:10px;display:inline-block}.instrument-list{flex-direction:column;gap:6px;list-style:none;display:flex}.instrument-item{border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--paper);justify-content:space-between;align-items:center;padding:6px 10px;display:flex}.instrument-item.selected{border-color:var(--ink);background-color:var(--paper-deep)}.inst-select-btn{appearance:none;font-family:var(--font-ui);color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;padding:0;font-size:.85rem;font-weight:500;display:flex}.inst-badge{font-family:var(--font-mono);background-color:var(--ink);color:var(--paper);border-radius:3px;padding:2px 6px;font-size:.65rem}.inst-audition-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;padding:4px 8px;font-size:.72rem}.inst-audition-btn:hover{border-color:var(--ink)}.picker-category-toggle{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.picker-category-toggle .mode-pill-btn{text-align:center;font-family:var(--font-ui);flex:1;justify-content:center;min-height:32px;font-size:.78rem;font-weight:500}.kit-select-btn{appearance:none;font-family:var(--font-ui);color:var(--ink);cursor:pointer;text-align:left;background:0 0;border:none;flex:1;justify-content:space-between;align-items:center;gap:8px;padding:0;font-size:.85rem;font-weight:500;display:flex}.kit-info-col{flex-direction:column;gap:2px;display:flex}.kit-desc-lbl{font-family:var(--font-ui);color:var(--ink-soft);font-size:.72rem;line-height:1.25}.kit-audition-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition-fast);flex-shrink:0;padding:4px 8px;font-size:.72rem}.kit-audition-btn:hover{border-color:var(--ink)}.key-picker-container{gap:var(--space-4);flex-direction:column;display:flex}.key-mode-section{padding-bottom:var(--space-2);border-bottom:1px solid var(--line);flex-direction:column;gap:6px;display:flex}.key-mode-toggle{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.key-mode-toggle .mode-pill-btn{text-align:center;font-family:var(--font-ui);flex:1;justify-content:center;min-height:44px;font-size:.78rem;font-weight:500}.key-mode-hint{font-family:var(--font-mono);color:var(--ink-soft);margin:0;font-size:.72rem;line-height:1.3}.key-colour-picker-row{grid-template-columns:repeat(6,1fr);gap:6px;padding:4px 0;display:grid}.key-colour-dot-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);border-radius:var(--radius-sm);cursor:pointer;min-height:48px;transition:all var(--transition-fast);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 2px;display:flex}.key-colour-dot-btn:hover{border-color:var(--ink-soft)}.key-colour-dot-btn.active{border-color:var(--ink);background-color:var(--paper-deep);box-shadow:inset 0 0 0 1px var(--ink)}.key-colour-dot-btn.is-beat{opacity:.65}.palette-dot-large{border:1px solid #1c1a1633;border-radius:50%;flex-shrink:0;width:14px;height:14px}.colour-dot-label{font-family:var(--font-mono);color:var(--ink);white-space:nowrap;font-size:.68rem}.key-section{gap:var(--space-2);flex-direction:column;display:flex}.section-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-size:.75rem}.root-note-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.root-note-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-mono);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all var(--transition-fast);padding:8px 4px;font-size:.85rem;font-weight:500}.root-note-btn:hover{border-color:var(--ink-soft)}.root-note-btn.active{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.scale-list-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.scale-pill-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:all var(--transition-fast);padding:8px 10px;font-size:.8rem;font-weight:500}.scale-pill-btn:hover{border-color:var(--ink-soft)}.scale-pill-btn.active{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.root-note-btn.audition-pressed,.scale-pill-btn.audition-pressed{border-color:var(--ink);transform:scale(.95)}.scale-strip-row{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;display:flex}.scale-strip{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.scale-strip-note{font-family:var(--font-mono);border:1px solid var(--line);background-color:var(--paper);color:var(--ink-soft);text-align:center;min-width:24px;transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);border-radius:4px;padding:3px 6px;font-size:.72rem;font-weight:500}.scale-strip-note.active,.scale-strip-note.chord-active{border-color:var(--ink);font-weight:600}.scale-replay-btn{appearance:none;font-family:var(--font-ui);border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--paper);color:var(--ink);cursor:pointer;white-space:nowrap;transition:background-color var(--transition-fast), border-color var(--transition-fast);padding:4px 10px;font-size:.72rem;font-weight:600}.scale-replay-btn:hover{background-color:var(--paper-deep);border-color:var(--ink)}.scale-beat-note{font-family:var(--font-ui);color:var(--ink-soft);margin-top:6px;padding-left:2px;font-size:.74rem;font-style:italic}.per-colour-actions-row{gap:8px;margin-top:8px;display:flex}.panel-secondary-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;text-align:center;transition:all var(--transition-fast);flex:1;min-height:38px;padding:8px 10px;font-size:.75rem;font-weight:500}.panel-secondary-btn:hover{border-color:var(--ink);background-color:var(--paper-deep)}.beat-key-disabled-banner{border:1px dashed var(--line);border-radius:var(--radius-sm);background-color:var(--paper-deep);font-family:var(--font-ui);color:var(--ink-soft);padding:8px 12px;font-size:.78rem}.beat-key-disabled-banner p{margin:0}.root-note-grid.disabled-grid,.scale-list-grid.disabled-grid,.scale-strip-row.disabled-grid{opacity:.4;pointer-events:none}@media (prefers-reduced-motion:reduce){.scale-strip-note,.root-note-btn,.scale-pill-btn,.key-colour-dot-btn,.mode-pill-btn,.track-key-tag{transition:none!important;transform:none!important}}.panel-checkbox-row{cursor:pointer;align-items:center;gap:8px;padding:6px 0;display:flex}.panel-checkbox{accent-color:var(--ink);cursor:pointer;width:16px;height:16px}.checkbox-label{font-family:var(--font-ui);color:var(--ink);-webkit-user-select:none;user-select:none;font-size:.82rem}.toolbar-mode-group{align-items:center;gap:var(--space-2);display:flex}.toolbar-mode-toggle{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);padding:2px;display:flex}.mode-pill-btn{appearance:none;color:var(--ink-soft);font-family:var(--font-ui);cursor:pointer;min-height:36px;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:6px 12px;font-size:.8rem;font-weight:500}.mode-pill-btn:hover{color:var(--ink)}.mode-pill-btn.active{background-color:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #1c1a1614}.toolbar-glide-ctrl{transition:opacity var(--transition-fast);align-items:center;gap:6px;padding:0 4px;display:flex}.toolbar-glide-ctrl.hidden{display:none}.glide-lbl{font-family:var(--font-ui);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:500}.glide-slider{appearance:none;background-color:var(--line);border-radius:2px;outline:none;width:56px;height:4px}.glide-slider::-webkit-slider-thumb{appearance:none;background-color:var(--ink);cursor:pointer;border:1px solid var(--paper);border-radius:50%;width:14px;height:14px}.glide-val{font-family:var(--font-mono);color:var(--ink);min-width:32px;font-size:.75rem}.toolbar-context-container{align-items:center;display:flex}.toolbar-beat-group{align-items:center;gap:var(--space-2);display:flex}.segmented-chips{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.chip-btn{appearance:none;color:var(--ink-soft);font-family:var(--font-mono);cursor:pointer;white-space:nowrap;min-height:32px;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:.72rem;font-weight:500}.chip-btn:hover{color:var(--ink)}.chip-btn.active{background-color:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px #1c1a1614}.toolbar-mini-slider{align-items:center;gap:6px;padding:0 4px;display:flex}.mini-slider-lbl{font-family:var(--font-ui);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:500}.mini-slider-input{appearance:none;background-color:var(--line);border-radius:2px;outline:none;width:50px;height:4px}.mini-slider-input::-webkit-slider-thumb{appearance:none;background-color:var(--ink);cursor:pointer;border:1px solid var(--paper);border-radius:50%;width:14px;height:14px}.mini-slider-val{font-family:var(--font-mono);color:var(--ink);min-width:32px;font-size:.75rem}.toolbar-eraser-options{align-items:center;gap:8px;animation:.15s ease-out fadeIn;display:flex}.toolbar-eraser-options.hidden{display:none!important}.eraser-size-slider .mini-slider-input{width:58px}.eraser-mode-chips{margin:0 2px}.eraser-track-only-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;padding:0 4px;display:flex}.eraser-track-checkbox{appearance:none;border:1px solid var(--ink-soft);background-color:var(--paper);cursor:pointer;width:14px;height:14px;transition:background-color var(--transition-fast), border-color var(--transition-fast);border-radius:3px;place-content:center;margin:0;display:grid}.eraser-track-checkbox:checked{background-color:var(--ink);border-color:var(--ink)}.eraser-track-checkbox:checked:before{content:"";border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);width:6px;height:3.5px;transform:rotate(-45deg)translate(.5px,-.5px)}.eraser-track-only-text{font-family:var(--font-ui);color:var(--ink-soft);white-space:nowrap;font-size:.72rem;font-weight:500}.eraser-track-only-label:hover .eraser-track-only-text{color:var(--ink)}.toolbar-select-options{align-items:center;gap:8px;animation:.15s ease-out fadeIn;display:flex}.toolbar-select-options.hidden{display:none!important}.select-option-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;min-height:40px;padding:0 4px;display:flex}.select-checkbox{appearance:none;border:1px solid var(--ink-soft);background-color:var(--paper);cursor:pointer;width:14px;height:14px;transition:background-color var(--transition-fast), border-color var(--transition-fast);border-radius:3px;place-content:center;margin:0;display:grid}.select-checkbox:checked{background-color:var(--ink);border-color:var(--ink)}.select-checkbox:checked:before{content:"";border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);width:6px;height:3.5px;transform:rotate(-45deg)translate(.5px,-.5px)}.select-option-text{font-family:var(--font-ui);color:var(--ink-soft);white-space:nowrap;font-size:.72rem;font-weight:500}.select-option-label:hover .select-option-text{color:var(--ink)}.selection-actions{align-items:center;gap:6px;margin-left:4px;display:flex}.selection-actions.hidden{display:none!important}.selection-count-badge{font-family:var(--font-mono);color:var(--ink);background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);white-space:nowrap;padding:3px 7px;font-size:.72rem;font-weight:500}.select-action-btn{height:30px;min-height:30px;padding:4px 8px;font-size:.72rem}.select-delete-btn{color:var(--vermilion)}.select-delete-btn:hover{border-color:var(--vermilion);background-color:#d2432a1a}.fx-backdrop{background-color:var(--backdrop,#1c1a1640);z-index:90;opacity:0;pointer-events:none;transition:opacity .2s ease-out;position:fixed;inset:0}.fx-backdrop.open{opacity:1;pointer-events:auto}.fx-panel{background-color:var(--paper);border-left:1px solid var(--line);z-index:100;flex-direction:column;width:380px;max-width:100vw;transition:transform .22s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%);box-shadow:-4px 0 18px #1c1a1614}.fx-panel.open{transform:translate(0)}@media (width<=640px){.fx-panel{border-left:none;border-top:1px solid var(--line);width:100vw;max-height:70dvh;padding-bottom:max(var(--space-2), env(safe-area-inset-bottom,12px));border-radius:14px 14px 0 0;inset:auto 0 0;transform:translateY(100%)}.fx-panel.open{transform:translateY(0)}.fx-panel .panel-drag-handle{background-color:var(--line);cursor:grab;border-radius:2px;width:38px;height:4px;margin:4px auto}}.fx-panel .panel-body{overscroll-behavior:contain;padding:var(--space-3);gap:var(--space-4);-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;display:flex;overflow-y:auto}.fx-section{gap:var(--space-2);flex-direction:column;display:flex}.fx-presets-row{flex-wrap:wrap;gap:6px;display:flex}.fx-preset-chip{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);color:var(--ink);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;min-height:44px;transition:background-color var(--transition-fast), border-color var(--transition-fast);padding:8px 14px;font-size:.82rem;font-weight:500}.fx-preset-chip:hover{border-color:var(--ink-soft);background-color:var(--paper)}.fx-preset-chip.fx-reset-btn{border-color:var(--ink-soft);color:var(--ink-soft);margin-left:auto}.fx-preset-chip.fx-reset-btn:hover{color:var(--vermilion);border-color:var(--vermilion)}.fx-row{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color var(--transition-fast);flex-direction:column;gap:8px;padding:10px 12px;display:flex}.fx-row:hover{border-color:#1c1a1647}.fx-row-header{justify-content:space-between;align-items:center;display:flex}.fx-row-title-wrap{flex-direction:column;gap:1px;display:flex}.fx-name{font-family:var(--font-ui);color:var(--ink);font-size:.9rem;font-weight:600}.fx-desc{font-family:var(--font-ui);color:var(--ink-soft);font-size:.72rem}.fx-bypass-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper-deep);font-family:var(--font-mono);cursor:pointer;min-height:32px;transition:background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);border-radius:4px;padding:4px 10px;font-size:.72rem;font-weight:600}.fx-bypass-btn.active{background-color:var(--sage);color:var(--paper);border-color:var(--sage)}.fx-bypass-btn.bypassed{background-color:var(--paper-deep);color:var(--ink-soft);border-color:var(--line)}.fx-control-group{flex-direction:column;gap:8px;padding-top:4px;display:flex}.fx-slider-row{align-items:center;gap:10px;min-height:36px;display:flex}.fx-param-lbl{font-family:var(--font-ui);color:var(--ink-soft);flex-shrink:0;width:80px;font-size:.78rem;font-weight:500}.fx-slider{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:3px;outline:none;flex:1;height:6px}.fx-slider.tactile-slider{background-color:var(--paper-deep);height:8px}.fx-slider::-webkit-slider-thumb{appearance:none;background-color:var(--ink);cursor:pointer;border:2px solid var(--paper);border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #1c1a1633}.fx-val-readout{font-family:var(--font-mono);color:var(--ink);text-align:right;flex-shrink:0;width:50px;font-size:.76rem}.fx-pills-row{align-items:center;gap:10px;min-height:36px;display:flex}.pills-wrap{flex:1;gap:4px;display:flex}.fx-pill-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper-deep);color:var(--ink-soft);font-family:var(--font-mono);cursor:pointer;min-height:32px;transition:background-color var(--transition-fast), color var(--transition-fast);border-radius:4px;padding:6px 10px;font-size:.75rem}.fx-pill-btn:hover{border-color:var(--ink)}.fx-pill-btn.active{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.sync-pill-wrapper{align-items:center;display:inline-flex;position:relative}.sync-settings-btn{font-family:var(--font-mono);letter-spacing:.04em;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);min-height:36px;color:var(--ink);cursor:pointer;transition:background-color var(--transition-fast), border-color var(--transition-fast);padding:6px 12px;font-size:.76rem}.sync-settings-btn:hover{border-color:var(--ink);background-color:var(--paper)}.sync-popup{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);z-index:100;opacity:0;pointer-events:none;flex-direction:column;gap:12px;width:310px;padding:14px 16px;transition:opacity .16s ease-out,transform .16s ease-out;display:flex;position:absolute;top:calc(100% + 8px);right:0;transform:translateY(-4px);box-shadow:0 4px 20px #1c1a161f}.sync-popup.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.sync-popup-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:baseline;padding-bottom:8px;display:flex}.sync-popup-title{font-family:var(--font-display);color:var(--ink);font-size:.95rem;font-weight:600}.sync-hw-info{font-family:var(--font-mono);color:var(--ink-soft);font-size:.68rem}.sync-section{flex-direction:column;gap:8px;display:flex}.sync-label{font-family:var(--font-ui);color:var(--ink);flex-direction:column;gap:2px;font-size:.8rem;font-weight:500;display:flex}.sync-hint{color:var(--ink-soft);font-size:.7rem;font-weight:400;line-height:1.3}.sync-slider-row{align-items:center;gap:8px;display:flex}.sync-range-lbl{font-family:var(--font-mono);color:var(--ink-soft);flex-shrink:0;font-size:.68rem}.sync-slider{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:3px;outline:none;flex:1;min-width:0;height:6px}.sync-slider::-webkit-slider-thumb{appearance:none;background-color:var(--ink);cursor:pointer;border:2px solid var(--paper);border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #1c1a1640}.sync-val-row{justify-content:space-between;align-items:center;display:flex}.sync-val-display{font-family:var(--font-mono);color:var(--ink);font-size:.82rem;font-weight:600}.sync-reset-btn{appearance:none;font-family:var(--font-mono);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;padding:4px;font-size:.7rem;text-decoration:underline}.sync-reset-btn:hover{color:var(--ink)}.sync-test-btn{appearance:none;border:1px solid var(--line);background-color:var(--paper-deep);color:var(--ink);font-family:var(--font-ui);border-radius:var(--radius-sm);cursor:pointer;text-align:center;min-height:40px;transition:background-color var(--transition-fast), border-color var(--transition-fast);padding:8px 10px;font-size:.78rem;font-weight:500}.sync-test-btn:hover{background-color:var(--paper);border-color:var(--ink)}.sync-test-hint{font-family:var(--font-ui);color:var(--ink-soft);margin:0;font-size:.7rem;line-height:1.35}.mixer-sync-section{border-top:1px solid var(--line);flex-direction:column;gap:8px;margin-top:16px;padding-top:14px;display:flex}.mixer-sync-header{justify-content:space-between;align-items:baseline;display:flex}@media (pointer:coarse),(width<=640px){input[type=range]::-webkit-slider-thumb{width:28px!important;height:28px!important}input[type=range]::-moz-range-thumb{width:28px!important;height:28px!important}.grid-switch-btn{cursor:pointer;min-width:44px;min-height:38px;color:var(--ink);touch-action:manipulation;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:6px;padding:0 6px;display:inline-flex;position:relative}.grid-switch-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.grid-switch-track{background-color:var(--paper);border:1px solid var(--line);box-sizing:border-box;border-radius:999px;flex-shrink:0;align-items:center;width:32px;height:18px;display:inline-flex;position:relative;overflow:hidden}.grid-switch-thumb{background-color:var(--ink);border-radius:50%;width:14px;height:14px;transition:transform .25s cubic-bezier(0,-.02,.4,1.25);position:absolute;top:1px;left:1px}.grid-switch-btn.active .grid-switch-thumb{transform:translate(14px)}.grid-switch-icon{width:10px;height:10px;color:var(--ink);opacity:0;justify-content:center;align-items:center;transition:opacity .25s ease-out,transform .25s ease-out;display:flex;position:absolute;top:3px;left:3px;transform:translate(-3px)}.grid-switch-btn.active .grid-switch-icon{opacity:1;transform:translate(0)}.grid-switch-label{font-family:var(--font-ui);color:var(--ink-soft);font-size:.8rem;font-weight:500}@media (width<=600px){.grid-switch-label{display:none}}@media (prefers-reduced-motion:reduce){.grid-switch-thumb,.grid-switch-icon{transition:none!important}}@media (pointer:coarse),(width<=640px){input[type=range]::-webkit-slider-thumb{width:28px!important;height:28px!important}input[type=range]::-moz-range-thumb{width:28px!important;height:28px!important}.toolbar-inner{gap:3px;padding:2px 4px}.toolbar-divider{height:20px;margin:0 2px}.toolbar-btn-play{width:34px;min-width:34px;min-height:44px;padding:0}.stepper-btn{width:24px;min-width:24px;min-height:44px;padding:0}.bpm-display{padding:0 2px}.bpm-num{font-size:.85rem}.bpm-lbl{font-size:.58rem}.tool-seg-btn{width:26px;min-width:26px;min-height:44px;padding:0}.toolbar-btn.tool-icon-btn{width:24px;min-width:24px;min-height:44px;padding:0}.palette-dot-btn{width:17px;min-width:17px;min-height:44px;padding:0}.palette-dot{width:14px;height:14px}.grid-switch-btn{min-width:38px;min-height:44px;padding:0 2px}.toolbar-dock-btn{min-height:44px;padding:0 8px;font-size:.76rem}}.silent-switch-hint{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-ui);color:var(--ink-soft);justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;padding:6px 12px;font-size:.78rem;animation:.2s ease-out fadeIn;display:flex}.silent-hint-dismiss{appearance:none;color:var(--ink-soft);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:2px 6px;font-size:.85rem}.silent-hint-dismiss:hover{color:var(--ink)}.audio-resume-banner{top:max(12px, env(safe-area-inset-top,12px));background-color:var(--ink);color:var(--paper);border-radius:var(--radius-md);z-index:1000;font-family:var(--font-ui);align-items:center;gap:12px;padding:8px 16px;font-size:.85rem;display:flex;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 4px 14px #1c1a1633}.resume-tap-btn{appearance:none;border:1px solid var(--paper);background-color:var(--paper);color:var(--ink);font-family:var(--font-ui);cursor:pointer;border-radius:4px;padding:4px 10px;font-size:.8rem;font-weight:600}.hint-overlay-backdrop{background-color:var(--backdrop,#1c1a1673);z-index:2000;padding:var(--space-4);justify-content:center;align-items:center;animation:.18s ease-out fadeIn;display:flex;position:fixed;inset:0}.hint-card{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);flex-direction:column;gap:16px;width:100%;max-width:380px;padding:24px 22px;display:flex;box-shadow:0 8px 28px #1c1a1629}.hint-title{font-family:var(--font-display);color:var(--ink);letter-spacing:-.01em;font-size:1.35rem;font-weight:600}.hint-list{flex-direction:column;gap:12px;list-style:none;display:flex}.hint-list li{align-items:flex-start;gap:12px;display:flex}.hint-num{font-family:var(--font-mono);color:var(--paper);background-color:var(--ink);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-top:1px;font-size:.78rem;font-weight:600;display:flex}.hint-text{font-family:var(--font-ui);color:var(--ink);font-size:.88rem;line-height:1.4}.hint-dismiss-btn{appearance:none;border:1px solid var(--ink);background-color:var(--ink);color:var(--paper);font-family:var(--font-ui);border-radius:var(--radius-md);cursor:pointer;text-align:center;min-height:44px;transition:background-color var(--transition-fast);touch-action:manipulation;margin-top:4px;padding:10px 18px;font-size:.9rem;font-weight:500}.hint-dismiss-btn:hover{opacity:.92}.hint-shortcuts-section{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--line);text-align:left}.hint-shortcuts-header{margin-bottom:var(--space-2)}.hint-section-title{font-family:var(--font-ui);color:var(--ink);letter-spacing:.01em;font-size:.85rem;font-weight:600}.hint-shortcuts-list{grid-template-columns:repeat(2,1fr);gap:6px 12px;margin:0;padding:0;font-size:.76rem;list-style:none;display:grid}.hint-shortcuts-list li{color:var(--ink-soft);justify-content:space-between;align-items:center;gap:6px;display:flex}.hint-shortcuts-list kbd{font-family:var(--font-mono);background-color:var(--paper-deep);border:1px solid var(--line);color:var(--ink);white-space:nowrap;border-radius:3px;padding:2px 5px;font-size:.7rem}@media (pointer:coarse),(width<=600px){.desktop-only{display:none!important}}html.theme-transitioning,html.theme-transitioning body,html.theme-transitioning #app,html.theme-transitioning header,html.theme-transitioning footer,html.theme-transitioning section,html.theme-transitioning button,html.theme-transitioning input,html.theme-transitioning select,html.theme-transitioning .main-view,html.theme-transitioning .canvas-container,html.theme-transitioning .instruversal-toolbar,html.theme-transitioning .track-panel,html.theme-transitioning .fx-panel,html.theme-transitioning .sync-popup,html.theme-transitioning .hint-overlay-card,html.theme-transitioning .theme-switch__container{transition:background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out,box-shadow .25s ease-out,fill .25s ease-out!important}html.theme-transitioning canvas,canvas.instruversal-canvas{transition:none!important}@media (prefers-reduced-motion:reduce){html.theme-transitioning,html.theme-transitioning *{transition:none!important}}.sw-update-toast{z-index:10000;align-items:center;gap:var(--space-3);background-color:var(--paper-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-ui);opacity:0;pointer-events:none;padding:8px 14px 8px 16px;font-size:.88rem;transition:opacity .2s ease-out,transform .2s ease-out;display:flex;position:fixed;bottom:24px;right:24px;transform:translateY(12px);box-shadow:0 4px 16px #1c1a161f}.sw-update-toast.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.sw-update-text{white-space:nowrap;font-weight:500}.sw-update-reload-btn{appearance:none;background-color:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-sm);font-family:var(--font-ui);cursor:pointer;touch-action:manipulation;min-height:36px;transition:opacity var(--transition-fast);padding:6px 14px;font-size:.82rem;font-weight:500}.sw-update-reload-btn:hover{opacity:.88}.sw-update-reload-btn:active{opacity:.75}.sw-update-reload-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.sw-update-dismiss-btn{appearance:none;color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;min-width:28px;min-height:28px;padding:4px;font-size:1rem;display:flex}.sw-update-dismiss-btn:hover{color:var(--ink)}.sw-update-dismiss-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (width<=600px){.sw-update-toast{left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);justify-content:space-between}}.mixer-loop-section{border-bottom:1px solid var(--line);flex-direction:column;gap:8px;margin-bottom:16px;padding-bottom:14px;display:flex}.mixer-loop-header{justify-content:space-between;align-items:baseline;display:flex}.loop-bars-display{font-family:var(--font-mono);color:var(--ink-soft);font-size:.78rem}.loop-hint{font-family:var(--font-ui);color:var(--ink-soft);margin:0;font-size:.76rem;line-height:1.35}.loop-mode-toggle{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.loop-mode-toggle .mode-pill-btn{text-align:center;font-family:var(--font-mono);flex:1;justify-content:center;min-height:44px;font-size:.82rem;font-weight:500}.export-modal-overlay{z-index:1250;background-color:var(--backdrop);padding:var(--space-4);opacity:1;visibility:visible;transition:opacity var(--transition-normal), visibility var(--transition-normal);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.export-modal-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.export-modal-dialog{background-color:var(--paper);width:100%;max-width:440px;color:var(--ink);border-radius:var(--radius-md);border:1px solid var(--line);padding:var(--space-4);gap:var(--space-3);flex-direction:column;max-height:90vh;display:flex;position:relative;overflow-y:auto;box-shadow:0 16px 40px #1c1a162e}.export-modal-header{border-bottom:1px solid var(--line);padding-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.export-modal-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:1.25rem;font-weight:600}.export-modal-close{color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);width:36px;height:36px;transition:color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.export-modal-close:hover{color:var(--ink)}.export-modal-body{gap:var(--space-3);flex-direction:column;display:flex}.export-config-view{flex-direction:column;gap:14px;display:flex}.export-info-card{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:space-between;align-items:baseline;padding:8px 12px;display:flex}.export-sketch-title{font-family:var(--font-ui);color:var(--ink);text-overflow:ellipsis;white-space:nowrap;max-width:65%;font-size:.95rem;font-weight:600;overflow:hidden}.export-sketch-meta{font-family:var(--font-mono);color:var(--ink-soft);font-size:.78rem}.export-field-group{flex-direction:column;gap:6px;display:flex}.export-field-label{font-family:var(--font-ui);color:var(--ink);font-size:.82rem;font-weight:600}.export-segmented{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.export-seg-btn{appearance:none;border-radius:var(--radius-sm);color:var(--ink-soft);font-family:var(--font-ui);cursor:pointer;text-align:center;min-height:40px;transition:background-color var(--transition-fast), color var(--transition-fast);background:0 0;border:1px solid #0000;flex:1;padding:8px 10px;font-size:.82rem;font-weight:500}.export-seg-btn:hover{color:var(--ink)}.export-seg-btn.active{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.export-field-hint{font-family:var(--font-ui);color:var(--ink-soft);margin-top:2px;font-size:.75rem}.export-actions{justify-content:flex-end;margin-top:6px;display:flex}.export-start-btn{appearance:none;background-color:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-sm);font-family:var(--font-ui);cursor:pointer;min-height:44px;transition:opacity var(--transition-fast);align-items:center;gap:8px;padding:10px 18px;font-size:.88rem;font-weight:500;display:inline-flex}.export-start-btn:hover{opacity:.88}.export-download-row{justify-content:space-between;align-items:center;margin-top:8px;display:flex}.export-download-btn{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-ui);cursor:pointer;min-height:40px;transition:border-color var(--transition-fast);align-items:center;gap:6px;padding:8px 14px;font-size:.82rem;font-weight:500;display:inline-flex}.export-download-btn:hover{border-color:var(--ink)}.export-fallback-link{font-family:var(--font-ui);color:var(--ink-soft);text-align:center;transition:color var(--transition-fast);margin-top:10px;padding:6px;font-size:.78rem;text-decoration:underline;display:block}.export-fallback-link:hover{color:var(--ink)}.export-recording-view{flex-direction:column;gap:12px;padding:8px 0;display:flex}.export-rec-notice{font-family:var(--font-ui);color:var(--ink);margin:0;font-size:.85rem;line-height:1.4}.export-progress-container{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;height:8px;overflow:hidden}.export-progress-fill{background-color:var(--ink);height:100%;transition:width .15s linear}.export-rec-status{font-family:var(--font-mono);color:var(--ink-soft);font-size:.8rem}.export-warning-text{font-family:var(--font-ui);color:var(--vermilion);margin:0;font-size:.78rem;line-height:1.35}.export-cancel-btn{appearance:none;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-ui);cursor:pointer;align-self:flex-start;min-height:40px;padding:8px 14px;font-size:.85rem}.export-cancel-btn:hover{border-color:var(--ink)}.export-complete-view{flex-direction:column;gap:12px;padding:6px 0;display:flex}.export-success-badge{font-family:var(--font-ui);color:var(--sage);align-items:center;gap:8px;font-size:.9rem;font-weight:500;display:flex}.export-file-label{font-family:var(--font-mono);color:var(--ink);word-break:break-all;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);margin:0;padding:8px 10px;font-size:.8rem}.export-clip-banner{background-color:var(--paper-deep);border:1px solid var(--vermilion);border-radius:var(--radius-sm);flex-direction:column;gap:6px;padding:10px 12px;display:flex}.export-clip-banner strong{color:var(--vermilion);font-size:.85rem}.export-clip-banner p{color:var(--ink-soft);margin:0;font-size:.78rem;line-height:1.35}.export-lower-btn{appearance:none;background-color:var(--vermilion);color:var(--paper);border-radius:var(--radius-sm);font-family:var(--font-ui);cursor:pointer;min-height:38px;transition:opacity var(--transition-fast);border:none;align-self:flex-start;padding:8px 12px;font-size:.8rem;font-weight:500}.export-lower-btn:hover{opacity:.88}.export-manual-download-btn{font-family:var(--font-ui);color:var(--ink);cursor:pointer;justify-content:center;align-items:center;padding:6px 0;font-size:.85rem;text-decoration:underline;display:inline-flex}.export-done-btn{appearance:none;background-color:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--radius-sm);font-family:var(--font-ui);cursor:pointer;align-self:flex-end;min-height:40px;padding:8px 16px;font-size:.85rem;font-weight:500}.export-done-btn:hover{opacity:.88}.practice-section{border-top:1px solid var(--line);flex-direction:column;gap:12px;margin-top:14px;padding-top:14px;display:flex}.practice-card{background:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);flex-direction:column;gap:8px;padding:10px 12px;display:flex}.practice-header-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.practice-label-group{flex-direction:column;gap:2px;display:flex}.practice-item-title{font-family:var(--font-ui);color:var(--ink);font-size:.84rem;font-weight:600}.practice-item-sub{font-family:var(--font-ui);color:var(--ink-soft);font-size:.72rem}.practice-toggle-btn{min-width:44px;min-height:32px;font-family:var(--font-ui);cursor:pointer;padding:4px 12px;font-size:.78rem;font-weight:600}.practice-controls-row{border-top:1px dashed var(--line);transition:opacity var(--transition-fast);flex-direction:column;gap:8px;padding-top:6px;display:flex}.practice-controls-row.practice-disabled{opacity:.38;pointer-events:none}.practice-follows-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.practice-sub-lbl{font-family:var(--font-ui);color:var(--ink-soft);font-size:.74rem}.practice-checkbox-row{font-family:var(--font-ui);color:var(--ink-soft);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;margin-top:2px;font-size:.76rem;display:flex}.practice-checkbox-row input[type=checkbox]{accent-color:var(--ink);cursor:pointer;width:16px;height:16px}.count-in-overlay{background:var(--paper);border:2px solid var(--ink);z-index:1000;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;transition:opacity .12s ease-out;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 20px #1c1a161f}.count-in-overlay.hidden{opacity:0;display:none}.count-in-overlay.visible{opacity:1;display:flex}.count-in-number{font-family:var(--font-display);color:var(--ink);font-size:3.2rem;font-weight:600;line-height:1}@keyframes countInPulse{0%{transform:translate(-50%,-50%)scale(1.12)}to{transform:translate(-50%,-50%)scale(1)}}.count-in-overlay.beat-pulse{animation:.18s ease-out countInPulse}@media (prefers-reduced-motion:reduce){.count-in-overlay.beat-pulse{animation:none}}.theme-switch-btn{cursor:pointer;touch-action:manipulation;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;min-width:44px;min-height:44px;margin:0;padding:0 2px;display:inline-flex;position:relative}.theme-switch-btn:before{content:"";width:100%;min-width:44px;height:100%;min-height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.theme-switch{--toggle-size:16px;--container-width:5.625em;--container-height:2.5em;--container-radius:6.25em;--container-light-bg:#e2d6bc;--container-night-bg:#1c1a16;--circle-container-diameter:3.375em;--sun-moon-diameter:2.125em;--sun-bg:#d49a2a;--moon-bg:#c9c2b0;--spot-color:#8f8878;--circle-container-offset:calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);--stars-color:#f3ecdd;--clouds-color:#f6f0e2;--back-clouds-color:#cfc3a8;--transition:.5s cubic-bezier(0, -.02, .4, 1.25);--circle-transition:.3s cubic-bezier(0, -.02, .35, 1.17);cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}@media (width>=601px){.theme-switch{--toggle-size:16px}}@media (width<=600px){.theme-switch{--toggle-size:10.5px}}@media (width<=380px){.theme-switch{--toggle-size:10px}}.theme-switch,.theme-switch *,.theme-switch :before,.theme-switch :after{box-sizing:border-box;font-size:var(--toggle-size);margin:0;padding:0}.theme-switch__checkbox{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;margin:-1px;padding:0;position:absolute;overflow:hidden;opacity:0!important;pointer-events:none!important;width:0!important;height:0!important}.theme-switch__checkbox:focus-visible+.theme-switch__container{outline:2px solid var(--ink);outline-offset:2px}.theme-switch__container{width:var(--container-width);height:var(--container-height);background-color:var(--container-light-bg);border-radius:var(--container-radius);cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;box-shadow:0 -.062em .062em #00000038,0 .062em .125em #ffffffb3}.theme-switch__container:before{content:"";z-index:1;border-radius:var(--container-radius);pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 .05em .187em #00000038}.theme-switch__circle-container{width:var(--circle-container-diameter);height:var(--circle-container-diameter);left:var(--circle-container-offset);top:var(--circle-container-offset);border-radius:var(--container-radius);transition:var(--circle-transition);pointer-events:none;background-color:#ffffff1a;display:flex;position:absolute;box-shadow:inset 0 0 0 3.375em #ffffff14,0 0 0 .625em #ffffff14,0 0 0 1.25em #ffffff14}.theme-switch__sun-moon-container{pointer-events:auto;z-index:2;width:var(--sun-moon-diameter);height:var(--sun-moon-diameter);border-radius:var(--container-radius);background-color:var(--sun-bg);filter:drop-shadow(.062em .125em .125em #00000038)drop-shadow(0 .062em .125em #00000038);transition:var(--transition);margin:auto;position:relative;overflow:hidden;box-shadow:inset .062em .062em .062em 0 #feffef9c,inset 0 -.062em .062em 0 #9b6c12}.theme-switch__moon{background-color:var(--moon-bg);border-radius:inherit;width:100%;height:100%;transition:var(--transition);position:relative;transform:translate(100%);box-shadow:inset .062em .062em .062em 0 #feffef9c,inset 0 -.062em .062em 0 #858074}.theme-switch__spot{border-radius:var(--container-radius);background-color:var(--spot-color);width:.75em;height:.75em;position:absolute;top:.75em;left:.312em;box-shadow:inset 0 .0312em .062em #00000038}.theme-switch__spot:nth-of-type(2){width:.375em;height:.375em;top:.937em;left:1.375em}.theme-switch__spot:nth-last-of-type(3){width:.25em;height:.25em;top:.312em;left:.812em}.theme-switch__clouds{background-color:var(--clouds-color);border-radius:var(--container-radius);width:1.25em;height:1.25em;box-shadow:.937em .312em var(--clouds-color), -.312em -.312em var(--back-clouds-color), 1.437em .375em var(--clouds-color), .5em -.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -.062em var(--back-clouds-color), 2.937em .312em var(--clouds-color), 2em -.312em var(--back-clouds-color), 3.625em -.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -.312em var(--clouds-color), 3.375em -.437em var(--back-clouds-color), 4.625em -1.75em 0 .437em var(--clouds-color), 4em -.625em var(--back-clouds-color), 4.125em -2.125em 0 .437em var(--back-clouds-color);transition:all .5s cubic-bezier(0,-.02,.4,1.25);position:absolute;bottom:-.625em;left:.312em}.theme-switch__stars-container{color:var(--stars-color);width:2.75em;height:auto;transition:var(--transition);position:absolute;top:-100%;left:.312em}.theme-switch__stars-container svg{width:100%;height:auto;display:block}.theme-switch__checkbox:checked+.theme-switch__container{background-color:var(--container-night-bg)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter))}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container:hover{left:calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - .187em)}.theme-switch__circle-container:hover{left:calc(var(--circle-container-offset) + .187em)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__moon{transform:translate(0)}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__clouds{bottom:-4.062em}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__stars-container{top:50%;transform:translateY(-50%)}@media (prefers-reduced-motion:reduce){.theme-switch__container,.theme-switch__circle-container,.theme-switch__sun-moon-container,.theme-switch__moon,.theme-switch__clouds,.theme-switch__stars-container{transition:background-color .15s ease-out!important;transform:none!important}.theme-switch__checkbox:checked+.theme-switch__container .theme-switch__circle-container,.theme-switch__circle-container{left:calc(var(--circle-container-offset) + .2em)!important}.theme-switch__clouds{display:none}}.theme-switch.no-anim,.theme-switch.no-anim *{transition:none!important}.library-overlay{z-index:1000;background-color:var(--backdrop);opacity:0;visibility:hidden;transition:opacity var(--transition-normal), visibility var(--transition-normal);justify-content:center;align-items:center;padding:0;display:flex;position:fixed;inset:0}.library-overlay.open{opacity:1;visibility:visible}.library-modal{background-color:var(--paper);width:100%;max-width:1020px;height:100%;max-height:100vh;color:var(--ink);flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 16px 40px #00000029}@media (width>=768px){.library-overlay{padding:var(--space-4)}.library-modal{border-radius:var(--radius-lg);border:1px solid var(--line);height:90vh}}.library-header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);background-color:var(--paper);justify-content:space-between;align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.library-title-group{align-items:baseline;gap:var(--space-2);display:flex}.library-heading{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.45rem;font-weight:600}.library-count-badge{font-family:var(--font-mono);color:var(--ink-soft);font-size:.78rem}.library-header-actions{align-items:center;gap:var(--space-2);display:flex}.library-btn{min-width:38px;height:38px;padding:0 var(--space-3);font-family:var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-fast), border-color var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;gap:6px;font-size:.85rem;font-weight:500;display:inline-flex}.library-btn:hover{background-color:var(--paper-deep)}.library-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.library-btn-primary{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.library-btn-primary:hover{background-color:var(--ink-soft);color:var(--paper)}.library-btn-icon-only{border-radius:var(--radius-md);width:44px;height:44px;padding:0}.library-subbar{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background-color:var(--paper-deep);border-bottom:1px solid var(--line);flex-wrap:wrap;flex-shrink:0;display:flex}.library-search-wrapper{flex:1;min-width:180px;max-width:320px;position:relative}.library-search-icon{color:var(--ink-soft);pointer-events:none;display:flex;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.library-search-input{width:100%;height:34px;font-family:var(--font-ui);background-color:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;padding:0 10px 0 32px;font-size:.85rem}.library-search-input:focus-visible{border-color:var(--ink)}.library-filter-group{align-items:center;gap:var(--space-2);display:flex}.library-sort-chips{border:1px solid var(--line);border-radius:var(--radius-sm);background-color:var(--paper);display:inline-flex;overflow:hidden}.library-sort-chip{font-family:var(--font-ui);color:var(--ink-soft);cursor:pointer;background:0 0;border:none;padding:4px 10px;font-size:.78rem}.library-sort-chip.active{background-color:var(--ink);color:var(--paper);font-weight:600}.library-private-banner{background-color:var(--paper-deep);color:var(--ink-soft);font-family:var(--font-ui);padding:6px var(--space-4);border-bottom:1px solid var(--line);align-items:center;gap:8px;font-size:.82rem;display:flex}.library-scroll-area{padding:var(--space-4);-webkit-overflow-scrolling:touch;flex:1;overflow-y:auto}.library-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));display:grid}@media (width<=540px){.library-grid{grid-template-columns:1fr}}.library-card{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);transition:transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);cursor:pointer;text-align:left;outline:none;flex-direction:column;display:flex;position:relative;overflow:hidden}.library-card:hover{border-color:var(--ink);box-shadow:0 4px 12px #0000000f}.library-card:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.library-card.active-creation{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}.card-thumbnail-box{aspect-ratio:16/10;background-color:var(--paper-deep);border-bottom:1px solid var(--line);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.card-svg-thumb{width:100%;height:100%;display:block}.card-play-btn{background-color:var(--ink);width:44px;height:44px;color:var(--paper);cursor:pointer;touch-action:manipulation;transition:transform var(--transition-fast), background-color var(--transition-fast);z-index:2;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:12px;right:12px;box-shadow:0 4px 10px #0003}.card-play-btn:hover{background-color:var(--ink-soft);transform:scale(1.06)}.card-play-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.card-info{padding:var(--space-3);flex-direction:column;flex:1;gap:4px;display:flex}.card-title-row{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.card-title{font-family:var(--font-display);color:var(--ink);word-break:break-word;margin:0;font-size:1.05rem;font-weight:600;line-height:1.25}.card-menu-btn{width:28px;height:28px;color:var(--ink-soft);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.card-menu-btn:hover{background-color:var(--paper-deep);color:var(--ink)}.card-meta-row{align-items:center;gap:var(--space-2);margin-top:2px;display:flex}.card-date{font-family:var(--font-ui);color:var(--ink-soft);font-size:.76rem}.card-tags{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.card-tag{font-family:var(--font-mono);background-color:var(--paper-deep);color:var(--ink-soft);border:1px solid var(--line);border-radius:3px;padding:2px 6px;font-size:.72rem}.card-inline-menu{background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);z-index:10;flex-direction:column;min-width:130px;display:flex;position:absolute;top:40px;right:12px;overflow:hidden;box-shadow:0 8px 24px #00000024}.card-inline-menu-item{font-family:var(--font-ui);color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:none;padding:8px 12px;font-size:.84rem}.card-inline-menu-item:hover{background-color:var(--paper-deep)}.card-inline-menu-item.danger{color:var(--vermilion)}.card-confirm-delete{padding:var(--space-2) var(--space-3);background-color:var(--paper-deep);border-top:1px solid var(--line);font-size:.8rem;font-family:var(--font-ui);justify-content:space-between;align-items:center;display:flex}.card-confirm-actions{gap:6px;display:flex}.card-confirm-btn{border:1px solid var(--line);background:var(--paper);cursor:pointer;border-radius:3px;padding:3px 8px;font-size:.78rem}.card-confirm-btn.yes{background-color:var(--vermilion);color:#fff;border-color:var(--vermilion)}.library-empty{text-align:center;min-height:280px;color:var(--ink-soft);padding:var(--space-5);flex-direction:column;justify-content:center;align-items:center;display:flex}.library-empty-title{font-family:var(--font-display);color:var(--ink);margin-bottom:var(--space-2);font-size:1.25rem;font-weight:500}.library-empty-desc{font-family:var(--font-ui);max-width:320px;margin-bottom:var(--space-4);font-size:.92rem;line-height:1.4}.skeleton-card{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-md);opacity:.6;height:240px}.library-toast{background-color:var(--ink);color:var(--paper);border-radius:var(--radius-md);font-family:var(--font-ui);z-index:20;align-items:center;gap:14px;padding:10px 18px;font-size:.88rem;animation:.18s ease-out toastIn;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000040}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.library-toast-undo-btn{color:var(--paper);font-family:var(--font-ui);cursor:pointer;background:0 0;border:1px solid #ffffff4d;border-radius:4px;padding:3px 8px;font-size:.82rem;font-weight:600}.library-toast-undo-btn:hover{background-color:#ffffff26}.gate-load-group{margin-top:var(--space-3);flex-direction:column;align-items:center;gap:6px;transition:opacity .3s ease-out,transform .3s ease-out;display:flex}.load-btn{appearance:none;color:var(--ink);border:1px solid var(--ink);font-family:var(--font-ui);letter-spacing:.01em;border-radius:var(--radius-md);cursor:pointer;width:100%;min-width:140px;max-width:200px;min-height:44px;transition:background-color var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);touch-action:manipulation;background-color:#0000;padding:11px 28px;font-size:.95rem;font-weight:500}.load-btn:hover{background-color:var(--paper-deep)}.load-btn:active{transform:scale(.98)}.load-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.load-count-badge{font-family:var(--font-mono);color:var(--ink-soft);letter-spacing:.02em;font-size:.76rem}.gate-resume-container{justify-content:center;align-items:center;margin-top:4px;display:flex}.gate-resume-link{appearance:none;color:var(--ink-soft);font-family:var(--font-ui);cursor:pointer;text-underline-offset:3px;text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);transition:color var(--transition-fast), text-decoration-color var(--transition-fast);touch-action:manipulation;background:0 0;border:none;align-items:center;gap:4px;min-height:44px;padding:6px 12px;font-size:.85rem;font-weight:500;display:inline-flex}.gate-resume-link:hover{color:var(--ink);-webkit-text-decoration-color:var(--ink);text-decoration-color:var(--ink)}.gate-resume-link:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--radius-sm)}.gate-resume-title{text-overflow:ellipsis;white-space:nowrap;max-width:170px;font-weight:600;overflow:hidden}.gallery-screen{z-index:100;background-color:var(--paper);height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);box-sizing:border-box;opacity:0;visibility:hidden;pointer-events:none;flex-direction:column;transition:opacity .3s ease-out,visibility .3s ease-out;display:flex;position:fixed;inset:0;overflow:hidden}.gallery-screen.open{opacity:1;visibility:visible;pointer-events:auto}.gallery-topbar{padding:var(--space-3) var(--space-4);z-index:20;pointer-events:auto;box-sizing:border-box;flex:none;justify-content:space-between;align-items:center;display:flex;position:static}.gallery-back-btn{min-width:44px;height:44px;padding:0 var(--space-3);font-family:var(--font-ui);background-color:var(--paper-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-fast), border-color var(--transition-fast);align-items:center;gap:8px;font-size:.88rem;font-weight:500;display:inline-flex}.gallery-back-btn:hover{background-color:var(--paper);border-color:var(--ink)}.gallery-back-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.gallery-hint{font-family:var(--font-ui);color:var(--ink-soft);opacity:.8;-webkit-user-select:none;user-select:none;font-size:.82rem}.gallery-canvas-container{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:auto;width:100%;min-height:0;position:relative;overflow:hidden}.gallery-canvas-container:active{cursor:grabbing}.gallery-bottom-bar{padding:6px var(--space-4) 14px;z-index:20;pointer-events:auto;box-sizing:border-box;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:8px;display:flex;position:static}.gallery-centered-caption{font-family:var(--font-mono);color:var(--ink-soft);text-align:center;letter-spacing:.02em;white-space:normal;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:0;max-width:90%;margin:0;padding:0;font-size:12px;line-height:1.4;transition:opacity .12s ease-out}.gallery-open-action-btn{appearance:none;background-color:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:var(--font-ui);border-radius:var(--radius-md);cursor:pointer;touch-action:manipulation;width:auto;min-width:140px;max-width:240px;min-height:44px;transition:background-color var(--transition-fast), transform var(--transition-fast);justify-content:center;align-items:center;gap:6px;padding:8px 24px;font-size:.88rem;font-weight:500;display:inline-flex;box-shadow:0 2px 8px #00000014}.gallery-open-action-btn:hover{background-color:var(--ink-soft);transform:translateY(-1px)}.gallery-open-action-btn:active{transform:scale(.98)}.gallery-open-action-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}@media (orientation:landscape) and (height<=520px){.gallery-topbar{padding:4px var(--space-4)}.gallery-bottom-bar{padding:4px var(--space-4) 8px;flex-direction:row;gap:16px}}.gallery-fallback-row{padding:0 var(--space-5);scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:center;gap:var(--space-4);display:none;position:absolute;inset:70px 0 90px;overflow:auto hidden}.gallery-fallback-card{aspect-ratio:4/5;scroll-snap-align:center;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);cursor:pointer;transition:transform var(--transition-fast), border-color var(--transition-fast);flex-direction:column;flex:0 0 280px;display:flex;overflow:hidden;box-shadow:0 4px 16px #0000000f}.gallery-fallback-card:hover,.gallery-fallback-card:focus-visible{border-color:var(--ink);outline:2px solid var(--ink);transform:translateY(-4px)}.gallery-fallback-canvas{flex:1;width:100%;display:block}.gallery-fallback-title{padding:var(--space-2) var(--space-3);font-family:var(--font-display);color:var(--ink);text-align:center;background-color:var(--paper-deep);border-top:1px solid var(--line);white-space:nowrap;text-overflow:ellipsis;font-size:1rem;font-weight:600;overflow:hidden}.gallery-sr-mirror{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.gate-load-group,.load-btn,.gallery-screen,.gallery-back-btn,.gallery-open-btn,.gallery-caption,.gallery-fallback-card{transition:none!important;animation:none!important;transform:none!important}}.account-overlay{z-index:1100;background-color:var(--backdrop);opacity:0;visibility:hidden;transition:opacity var(--transition-normal), visibility var(--transition-normal);justify-content:center;align-items:flex-end;padding:0;display:flex;position:fixed;inset:0}.account-overlay.open{opacity:1;visibility:visible}.account-sheet{background-color:var(--paper);width:100%;max-width:440px;color:var(--ink);border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);border:1px solid var(--line);padding:var(--space-4);gap:var(--space-3);max-height:90vh;transition:transform var(--transition-normal);border-bottom:none;flex-direction:column;display:flex;position:relative;overflow-y:auto;transform:translateY(100%);box-shadow:0 -8px 32px #1c1a161f}.account-overlay.open .account-sheet{transform:translateY(0)}@media (width>=600px){.account-overlay{padding:var(--space-4);align-items:center}.account-sheet{border-radius:var(--radius-lg);border-bottom:1px solid var(--line);transform:translateY(12px);box-shadow:0 16px 40px #1c1a162e}.account-overlay.open .account-sheet{transform:translateY(0)}}.account-header{justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.account-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:1.35rem;font-weight:500}.account-close-btn{color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);width:36px;min-width:44px;height:36px;min-height:44px;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:inline-flex}.account-close-btn:hover{color:var(--ink);background-color:var(--paper-deep)}.account-desc{font-family:var(--font-ui);color:var(--ink-soft);margin:0;font-size:.9rem;line-height:1.45}.account-btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);font-family:var(--font-ui);border-radius:var(--radius-md);border:1px solid var(--line);background-color:var(--paper-deep);color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);width:100%;font-size:.95rem;font-weight:500;display:inline-flex}.account-btn:hover{background-color:var(--paper);border-color:var(--ink-soft)}.account-btn-primary{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.account-btn-primary:hover{opacity:.92;background-color:var(--ink);border-color:var(--ink)}.account-btn-danger{color:var(--vermilion);background:0 0;border-color:#d2432a40}.account-btn-danger:hover{border-color:var(--vermilion);background-color:#d2432a14}.account-divider{align-items:center;gap:var(--space-2);color:var(--ink-soft);font-size:.8rem;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.05em;margin:var(--space-1) 0;display:flex}.account-divider:before,.account-divider:after{content:"";background-color:var(--line);flex:1;height:1px}.account-input-group{gap:var(--space-1);flex-direction:column;display:flex}.account-label{font-size:.8rem;font-family:var(--font-ui);color:var(--ink-soft)}.account-input{min-height:44px;padding:0 var(--space-3);font-family:var(--font-ui);color:var(--ink);background-color:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color var(--transition-fast);outline:none;font-size:.95rem}.account-input:focus{border-color:var(--ink)}.account-message{font-size:.85rem;font-family:var(--font-ui);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background-color:var(--paper-deep);color:var(--ink);display:none}.account-message.visible{display:block}.account-message.error{color:var(--vermilion);background-color:#d2432a14;border:1px solid #d2432a33}.account-user-card{padding:var(--space-3);background-color:var(--paper-deep);border-radius:var(--radius-md);border:1px solid var(--line);gap:var(--space-1);flex-direction:column;display:flex}.account-user-email{font-family:var(--font-ui);color:var(--ink);word-break:break-all;font-size:.95rem;font-weight:600}.account-user-status{align-items:center;gap:var(--space-1);font-size:.8rem;font-family:var(--font-mono);color:var(--sage);display:inline-flex}.account-user-status:before{content:"";background-color:var(--sage);border-radius:50%;width:6px;height:6px}.account-footer-links{padding-top:var(--space-2);border-top:1px solid var(--line);justify-content:space-between;align-items:center;display:flex}.account-link-btn{color:var(--ink-soft);font-family:var(--font-ui);cursor:pointer;text-underline-offset:2px;background:0 0;border:none;padding:0;font-size:.8rem;text-decoration:underline}.account-link-btn:hover{color:var(--ink)}.privacy-note-modal{max-width:480px;line-height:1.5}.privacy-draft-badge{font-family:var(--font-mono);text-transform:uppercase;border-radius:var(--radius-sm);color:var(--ochre);margin-bottom:var(--space-2);background-color:#d49a2a26;padding:2px 6px;font-size:.7rem;display:inline-block}.auth-pill-btn{align-items:center;gap:var(--space-1);height:32px;padding:0 var(--space-2);border-radius:var(--radius-md);border:1px solid var(--line);background-color:var(--paper);color:var(--ink);font-family:var(--font-ui);cursor:pointer;touch-action:manipulation;transition:background-color var(--transition-fast), border-color var(--transition-fast);white-space:nowrap;font-size:.8rem;font-weight:500;display:inline-flex}.auth-pill-btn:hover{background-color:var(--paper-deep);border-color:var(--ink-soft)}.auth-pill-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.auth-avatar-circle{background-color:var(--indigo);width:18px;height:18px;color:var(--paper);text-transform:uppercase;border-radius:50%;justify-content:center;align-items:center;font-size:.65rem;font-weight:600;display:inline-flex}.card-sync-badge{font-family:var(--font-mono);border-radius:var(--radius-sm);border:1px solid var(--line);background-color:var(--paper-deep);color:var(--ink-soft);align-items:center;gap:4px;padding:1px 6px;font-size:.72rem;display:inline-flex}.card-sync-badge.synced{color:var(--sage);background-color:#3f7a6314;border-color:#3f7a6340}.card-sync-badge.syncing{color:var(--ochre);background-color:#d49a2a14;border-color:#d49a2a40}.card-sync-badge.local{color:var(--ink-soft);border-color:var(--line);background-color:var(--paper-deep)}.card-sync-badge.error{color:var(--vermilion);background-color:#d2432a14;border-color:#d2432a40}.share-modal-overlay{z-index:1200;background-color:var(--backdrop);padding:var(--space-4);opacity:0;visibility:hidden;transition:opacity var(--transition-normal), visibility var(--transition-normal);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.share-modal-overlay.visible{opacity:1;visibility:visible}.share-modal-dialog{background-color:var(--paper);width:100%;max-width:420px;color:var(--ink);border-radius:var(--radius-lg);border:1px solid var(--line);padding:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex;position:relative;box-shadow:0 16px 40px #1c1a162e}.share-modal-header{justify-content:space-between;align-items:center;display:flex}.share-modal-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:1.25rem;font-weight:500}.share-modal-close{color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:inline-flex}.share-modal-close:hover{color:var(--ink);background-color:var(--paper-deep)}.share-toggle-row{justify-content:space-between;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line);display:flex}.share-toggle-info{flex-direction:column;gap:2px;display:flex}.share-toggle-label{font-family:var(--font-ui);color:var(--ink);font-size:.95rem;font-weight:500}.share-toggle-sub{font-family:var(--font-ui);color:var(--ink-soft);font-size:.8rem}.share-switch{flex-shrink:0;width:44px;height:24px;display:inline-block;position:relative}.share-switch input{opacity:0;width:0;height:0}.share-slider{cursor:pointer;background-color:var(--paper-deep);border:1px solid var(--line);border-radius:24px;transition:all .2s;position:absolute;inset:0}.share-slider:before{content:"";background-color:var(--ink-soft);border-radius:50%;width:18px;height:18px;transition:all .2s;position:absolute;bottom:2px;left:2px}.share-switch input:checked+.share-slider{background-color:var(--ink);border-color:var(--ink)}.share-switch input:checked+.share-slider:before{background-color:var(--paper);transform:translate(20px)}.share-link-box{gap:var(--space-2);margin-top:var(--space-2);flex-direction:column;display:none}.share-link-box.active{display:flex}.share-link-input{width:100%;min-height:40px;padding:0 var(--space-2);font-family:var(--font-mono);background-color:var(--paper-deep);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);outline:none;font-size:.85rem}.share-copy-btn{border-radius:var(--radius-sm);background-color:var(--ink);min-height:40px;color:var(--paper);border:1px solid var(--ink);font-family:var(--font-ui);cursor:pointer;transition:opacity var(--transition-fast);font-size:.9rem;font-weight:500}.share-copy-btn:hover{opacity:.9}.share-toast{font-family:var(--font-ui);color:var(--sage);text-align:center;opacity:0;min-height:1.2rem;font-size:.8rem;transition:opacity .2s}.share-toast.visible{opacity:1}.migration-sheet-overlay{z-index:1250;background-color:var(--backdrop);padding:var(--space-4);opacity:0;visibility:hidden;transition:opacity var(--transition-normal), visibility var(--transition-normal);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.migration-sheet-overlay.visible{opacity:1;visibility:visible}.migration-sheet-dialog{background-color:var(--paper);width:100%;max-width:440px;color:var(--ink);border-radius:var(--radius-lg);border:1px solid var(--line);padding:var(--space-4);gap:var(--space-3);flex-direction:column;display:flex;box-shadow:0 16px 40px #1c1a162e}.migration-sheet-header{justify-content:space-between;align-items:center;display:flex}.migration-sheet-title{font-family:var(--font-display);color:var(--ink);margin:0;font-size:1.25rem;font-weight:500}.migration-sheet-close{color:var(--ink-soft);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.migration-desc{font-family:var(--font-ui);color:var(--ink-soft);margin:0 0 var(--space-3) 0;font-size:.9rem;line-height:1.5}.migration-actions{gap:var(--space-2);flex-direction:column;display:flex}.migration-primary-btn{border-radius:var(--radius-md);background-color:var(--ink);min-height:44px;color:var(--paper);border:1px solid var(--ink);font-family:var(--font-ui);cursor:pointer;font-size:.95rem;font-weight:500}.migration-secondary-btn{border-radius:var(--radius-md);min-height:44px;color:var(--ink-soft);border:1px solid var(--line);font-family:var(--font-ui);cursor:pointer;background-color:#0000;font-size:.9rem}.migration-secondary-btn:hover{color:var(--ink);background-color:var(--paper-deep)}.public-shared-banner{padding:var(--space-2) var(--space-3);background-color:var(--paper-deep);border-bottom:1px solid var(--line);font-family:var(--font-ui);justify-content:space-between;align-items:center;gap:var(--space-2);z-index:100;font-size:.85rem;display:flex}.public-shared-meta{align-items:center;gap:var(--space-2);min-width:0;display:flex}.public-shared-badge{font-family:var(--font-mono);border-radius:var(--radius-sm);color:var(--indigo);white-space:nowrap;background-color:#2e3f8f1f;padding:1px 6px;font-size:.72rem}.public-shared-title{font-family:var(--font-display);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:500;overflow:hidden}.public-shared-actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.public-action-btn{height:32px;padding:0 var(--space-2);border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--line);background-color:var(--paper);color:var(--ink);justify-content:center;align-items:center;font-size:.8rem;font-weight:500;text-decoration:none;display:inline-flex}.public-action-btn.primary{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.public-action-btn.report{color:var(--ink-soft);background:0 0;border:none;font-size:.75rem}.studio-view{background-color:var(--paper);color:var(--ink);font-family:var(--font-ui,"Instrument Sans", sans-serif);z-index:50;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.studio-header{background-color:var(--paper-deep);border-bottom:1px solid var(--line);height:52px;min-height:52px;padding:0 var(--space-4,16px);justify-content:space-between;align-items:center;gap:var(--space-3,12px);z-index:20;display:flex}.studio-header-left,.studio-header-right{align-items:center;gap:var(--space-2,8px);display:flex}.studio-btn{background-color:var(--paper);min-width:34px;height:34px;min-height:34px;color:var(--ink);border:1px solid var(--line);cursor:pointer;touch-action:manipulation;border-radius:4px;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:.82rem;font-weight:500;transition:background-color .15s ease-out,border-color .15s ease-out;display:inline-flex}.studio-btn:hover{background-color:var(--paper-deep);border-color:var(--ink-soft)}.studio-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.studio-btn-primary{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.studio-btn-primary:hover{background-color:var(--ink-soft);color:var(--paper)}.studio-btn-icon{border-radius:4px;width:34px;padding:0}.studio-title-input{font-family:var(--font-display,"Fraunces", serif);color:var(--ink);background:0 0;border:1px solid #0000;border-radius:4px;max-width:220px;padding:2px 6px;font-size:1.05rem;font-weight:600}.studio-title-input:hover{border-color:var(--line)}.studio-title-input:focus{border-color:var(--ink);background-color:var(--paper);outline:none}.studio-transport-group{align-items:center;gap:4px;display:flex}.studio-readout{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap;padding:0 8px;font-size:.8rem}.studio-bpm-stepper{background-color:var(--paper);border:1px solid var(--line);border-radius:4px;align-items:center;height:34px;display:flex}.studio-bpm-btn{width:24px;height:100%;color:var(--ink);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.studio-bpm-value{font-family:var(--font-mono,"DM Mono", monospace);text-align:center;min-width:48px;padding:0 4px;font-size:.8rem}.studio-save-status{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);opacity:.75;font-size:.72rem}.studio-body{flex:1;display:flex;position:relative;overflow:hidden}.studio-timeline-container{background-color:var(--paper);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.studio-ruler-track-wrapper{scrollbar-width:thin;scrollbar-color:var(--line) transparent;flex-direction:column;flex:1;display:flex;position:relative;overflow:auto}.studio-ruler{background-color:var(--paper-deep);border-bottom:1px solid var(--line);z-index:10;cursor:pointer;align-items:center;height:36px;min-height:36px;display:flex;position:sticky;top:0}.studio-ruler-corner{border-right:1px solid var(--line);background-color:var(--paper-deep);width:140px;min-width:140px;height:100%;color:var(--ink-soft);align-items:center;padding:0 10px;font-size:.75rem;font-weight:500;display:flex}.studio-ruler-ticks{flex:1;height:100%;position:relative}.studio-ruler-bar{border-left:1px solid var(--line);font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);pointer-events:none;padding-top:4px;padding-left:4px;font-size:.7rem;position:absolute;top:0;bottom:0}.studio-loop-region-highlight{border-left:2px solid var(--ink);border-right:2px solid var(--ink);pointer-events:none;background-color:#1c1a1614;position:absolute;top:0;bottom:0}.studio-marker-flag{background-color:var(--ink);color:var(--paper);font-size:.68rem;font-family:var(--font-mono,"DM Mono", monospace);cursor:pointer;white-space:nowrap;z-index:5;border-radius:3px;padding:2px 6px;position:absolute;top:2px;transform:translate(-50%)}.studio-playhead-line{background-color:var(--ink);pointer-events:none;z-index:15;width:2px;position:absolute;top:0;bottom:0}.studio-playhead-head{background-color:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%);width:12px;height:12px;position:absolute;top:0;left:-5px}.studio-lanes{flex-direction:column;min-height:100%;display:flex;position:relative}.studio-lane-row{border-bottom:1px solid var(--line);outline:none;height:90px;min-height:90px;display:flex;position:relative}.studio-lane-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.studio-lane-row.selected .studio-lane-header{border-left:3px solid var(--ink);background-color:var(--paper)}.studio-lane-row.selected .studio-lane-track-area{background-color:#1c1a1608}.studio-lane-header{border-right:1px solid var(--line);background-color:var(--paper-deep);z-index:5;flex-direction:column;justify-content:space-between;width:140px;min-width:140px;height:100%;padding:8px 10px;display:flex;position:sticky;left:0}.studio-lane-header-top{justify-content:space-between;align-items:center;gap:4px;display:flex}.studio-lane-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;font-weight:600;overflow:hidden}.studio-lane-controls{align-items:center;gap:4px;display:flex}.studio-mini-btn{background:var(--paper);border:1px solid var(--line);width:24px;height:22px;color:var(--ink-soft);cursor:pointer;border-radius:3px;justify-content:center;align-items:center;font-size:.7rem;font-weight:600;display:flex}.studio-mini-btn.active{background-color:var(--ink);color:var(--paper);border-color:var(--ink)}.studio-mini-btn.active-solo{background-color:var(--ochre,#d49a2a);color:var(--ink);border-color:var(--ochre,#d49a2a)}.studio-lane-track-area{background-size:auto 100%;flex:1;height:100%;position:relative}.studio-clip{background-color:var(--paper-deep);border:1.5px solid var(--line);cursor:grab;touch-action:none;border-radius:6px;flex-direction:column;transition:box-shadow .12s ease-out,border-color .12s ease-out;display:flex;position:absolute;top:6px;bottom:6px;overflow:hidden}.studio-clip.selected{outline:2px solid var(--ink);outline-offset:1px}.studio-clip.sounding{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink), 0 2px 8px #1c1a162e;filter:brightness(1.05)}.studio-clip.dragging{opacity:.85;cursor:grabbing;box-shadow:0 4px 12px #1c1a1626}.studio-clip-header{border-bottom:1px solid var(--line);pointer-events:none;background-color:#1c1a160d;justify-content:space-between;align-items:center;height:20px;padding:0 6px;display:flex}.studio-clip-title{text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:600;overflow:hidden}.studio-clip-len{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);font-size:.65rem}.studio-clip-canvas-container{flex:1;display:flex;position:relative;overflow:hidden}.studio-clip-thumb{object-fit:cover;pointer-events:none;height:100%}.studio-clip-handle{cursor:ew-resize;z-index:4;width:12px;position:absolute;top:0;bottom:0}.studio-clip-handle-left{left:0}.studio-clip-handle-right{right:0}.studio-empty-state{padding:var(--space-8,32px);justify-content:center;align-items:center;gap:var(--space-3,12px);text-align:center;flex-direction:column;margin:auto;display:flex}.studio-empty-msg{color:var(--ink-soft);font-size:1rem}.studio-inspector{background-color:var(--paper-deep);border-left:1px solid var(--line);width:280px;min-width:280px;padding:var(--space-4,16px);gap:var(--space-3,12px);flex-direction:column;display:flex;overflow-y:auto}.studio-inspector-title{border-bottom:1px solid var(--line);padding-bottom:6px;font-size:.9rem;font-weight:600}.studio-field-row{justify-content:space-between;align-items:center;gap:var(--space-2,8px);display:flex}.studio-field-label{color:var(--ink-soft);font-size:.78rem}.studio-field-input{font-family:var(--font-mono,"DM Mono", monospace);border:1px solid var(--line);background-color:var(--paper);color:var(--ink);text-align:right;border-radius:4px;width:72px;padding:4px 6px;font-size:.8rem}.studio-sheet-overlay{z-index:100;background-color:#1c1a1666;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.studio-sheet{background-color:var(--paper);border:1px solid var(--line);border-bottom:none;border-top-left-radius:12px;border-top-right-radius:12px;flex-direction:column;width:100%;max-width:600px;max-height:85vh;display:flex;overflow:hidden;box-shadow:0 -4px 20px #1c1a1626}.studio-sheet-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.studio-landscape-hint{background-color:var(--paper-deep);border-bottom:1px solid var(--line);color:var(--ink-soft);justify-content:space-between;align-items:center;padding:6px 12px;font-size:.75rem;display:flex}.studio-list-view{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.studio-list-lane{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:6px;flex-direction:column;gap:8px;padding:12px;display:flex}.studio-list-item{background-color:var(--paper);border:1px solid var(--line);border-radius:4px;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}@media (width<=768px){.studio-header{height:48px;padding:0 8px}.studio-title-input{max-width:130px;font-size:.9rem}.studio-lane-header{width:90px;min-width:90px;padding:6px}.studio-ruler-corner{width:90px;min-width:90px}.studio-inspector{display:none}}.studio-colors-picker{flex-wrap:wrap;gap:5px;display:flex}.studio-color-chip{background-color:var(--paper);border:1px solid var(--line);color:var(--ink);cursor:pointer;touch-action:manipulation;border-radius:4px;align-items:center;gap:5px;padding:3px 7px;font-size:.72rem;display:inline-flex}.studio-color-chip.muted{opacity:.45;text-decoration:line-through}.studio-color-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.studio-color-badge{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);margin-left:2px;font-size:.62rem}.studio-mixer-panel{background-color:var(--paper);border-top:1.5px solid var(--ink);z-index:35;flex-direction:column;height:380px;max-height:380px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #1c1a161a}.studio-mixer-header{background-color:var(--paper-deep);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:38px;min-height:38px;padding:0 12px;display:flex}.studio-mixer-title{font-family:var(--font-display,"Fraunces", serif);color:var(--ink);align-items:center;gap:8px;font-size:.88rem;font-weight:600;display:flex}.studio-mixer-count{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);font-size:.68rem}.studio-mixer-header-actions{align-items:center;gap:6px;display:flex}.studio-btn-sm{height:24px;padding:0 8px;font-size:.72rem}.studio-mixer-body{flex:1;gap:12px;padding:8px 12px;display:flex;overflow:auto hidden}.studio-mixer-lanes{flex:1;gap:8px;display:flex;overflow-x:auto}.studio-channel-strip{background-color:var(--paper-deep);border:1px solid var(--line);box-sizing:border-box;border-radius:6px;flex-direction:column;gap:4px;width:110px;min-width:110px;padding:8px;display:flex}.studio-strip-header{justify-content:space-between;align-items:center;gap:4px;display:flex}.studio-strip-name{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:600;overflow:hidden}.studio-strip-ms{gap:2px;display:flex}.studio-strip-controls{flex-direction:column;gap:2px;margin-top:2px;display:flex}.studio-knob-row{box-sizing:border-box;justify-content:space-between;align-items:center;gap:4px;width:100%;min-width:0;display:flex}.studio-knob-label{color:var(--ink-soft);flex-shrink:0;width:22px;font-size:.62rem}.studio-slider-mini{width:0;min-width:0;height:12px;accent-color:var(--ink);cursor:pointer;flex:1 1 0}.studio-knob-readout{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);text-align:right;cursor:pointer;white-space:nowrap;flex-shrink:0;width:28px;min-width:28px;font-size:.6rem;overflow:hidden}.studio-fader-section{justify-content:center;align-items:center;gap:8px;height:120px;margin:4px 0;display:flex}.studio-meter-slot{background:#1c1a1614;border-radius:2px;width:8px;height:100%;position:relative;overflow:hidden}.studio-meter-track{width:100%;height:100%;position:relative}.studio-meter-fill{background-color:var(--sage,#3f7a63);border-radius:1px;height:0%;position:absolute;bottom:0;left:0;right:0}.studio-meter-fill.master-fill{background-color:var(--ink)}.studio-meter-peak{background-color:var(--ochre,#d49a2a);height:2px;position:absolute;bottom:0%;left:0;right:0}.studio-meter-peak.master-peak{background-color:var(--vermilion,#d2432a)}.studio-fader-track-container{justify-content:center;align-items:center;height:100%;display:flex}.studio-fader-vertical{writing-mode:vertical-lr;width:24px;height:115px;accent-color:var(--ink);cursor:pointer;direction:rtl}.studio-fader-readout{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);text-align:center;cursor:pointer;padding:2px 0;font-size:.68rem}.studio-master-strip{background-color:var(--paper-deep);border:1.5px solid var(--ink);border-radius:6px;flex-direction:column;width:240px;min-width:240px;padding:8px;display:flex;overflow-y:auto}.studio-clip-led{border:1px solid var(--line);background-color:#1c1a1633;border-radius:50%;width:8px;height:8px}.studio-clip-led.clipping{background-color:var(--vermilion,#d2432a);box-shadow:0 0 6px var(--vermilion,#d2432a)}.studio-master-loudness-row{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.studio-readout-mono{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);font-size:.65rem}.studio-clip-warning-text{color:var(--vermilion,#d2432a);text-align:center;opacity:0;height:14px;font-size:.65rem;font-weight:600;transition:opacity .12s ease-out}.studio-master-presets-row{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}.studio-presets-chips{flex-wrap:wrap;gap:3px;margin-top:2px;display:flex}.studio-preset-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:3px;padding:2px 5px;font-size:.65rem}.studio-preset-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.studio-preset-chip.custom{cursor:default;opacity:.8}.studio-eq-accordion,.studio-eq-section{border-top:1px solid var(--line);margin-top:6px;padding-top:4px;font-size:.7rem}.studio-eq-summary{cursor:pointer;color:var(--ink);-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;font-weight:600;display:flex}.studio-eq-header{justify-content:space-between;align-items:center;display:flex}.studio-eq-sliders{flex-direction:column;gap:2px;margin-top:3px;display:flex}.studio-eq-row,.studio-glue-row{color:var(--ink-soft);justify-content:space-between;align-items:center;gap:4px;width:100%;min-width:0;font-size:.62rem;display:flex}.studio-eq-val,.studio-glue-val{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);text-align:right;flex-shrink:0;width:28px;min-width:28px;font-size:.6rem}.studio-glue-accordion{border-top:1px solid var(--line);margin-top:6px;padding-top:4px;font-size:.7rem}.studio-glue-summary{cursor:pointer;color:var(--ink);justify-content:space-between;align-items:center;font-weight:600;display:flex}.studio-glue-state{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);font-size:.62rem}.studio-glue-content{flex-direction:column;gap:2px;margin-top:4px;display:flex}.studio-glue-toggle-row{color:var(--ink-soft);justify-content:space-between;align-items:center;font-size:.62rem;display:flex}@media (width<=768px){.studio-mixer-panel{border-radius:12px 12px 0 0;height:auto;max-height:85vh}.studio-master-strip{gap:3px;width:210px;min-width:210px;padding:6px}.studio-fader-section{height:100px;margin:2px 0}.studio-fader-vertical{height:95px}}.studio-export-overlay{z-index:1050;background-color:#1c1a1673;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.studio-export-dialog{background-color:var(--paper);border:1px solid var(--line);border-radius:8px;flex-direction:column;width:100%;max-width:460px;display:flex;overflow:hidden;box-shadow:0 8px 24px #1c1a162e}.studio-export-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.studio-export-title{font-family:var(--font-display,"Fraunces", serif);color:var(--ink);margin:0;font-size:1.1rem;font-weight:600}.studio-export-tabs{background-color:var(--paper-deep);border-bottom:1px solid var(--line);gap:4px;padding:4px 12px 0;display:flex}.studio-tab-btn{font-family:var(--font-ui,"Instrument Sans", sans-serif);color:var(--ink-soft);cursor:pointer;background:0 0;border:1px solid #0000;border-bottom:none;border-radius:6px 6px 0 0;padding:6px 14px;font-size:.8rem;font-weight:500}.studio-tab-btn.active{background-color:var(--paper);color:var(--ink);border-color:var(--line);font-weight:600}.studio-export-body{padding:16px}.studio-export-group{flex-direction:column;gap:6px;display:flex}.studio-chooser-group{flex-direction:column;gap:8px;display:flex}.studio-radio-label{color:var(--ink);cursor:pointer;align-items:center;gap:8px;font-size:.84rem;display:flex}.studio-radio-label.disabled{opacity:.5;cursor:not-allowed}.studio-recording-status{flex-direction:column;gap:12px;display:flex}.studio-rec-indicator{color:var(--ink);align-items:center;gap:8px;font-size:.84rem;font-weight:500;display:flex}.studio-rec-dot{background-color:var(--vermilion);border-radius:50%;width:10px;height:10px;animation:1.2s ease-in-out infinite pulse-recording}@keyframes pulse-recording{0%{opacity:.8;transform:scale(.9)}50%{opacity:1;transform:scale(1.3)}to{opacity:.8;transform:scale(.9)}}.studio-progress-bar-wrap{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:4px;width:100%;height:8px;overflow:hidden}.studio-progress-bar-fill{background-color:var(--ink);height:100%;transition:width .15s ease-out}.studio-countdown-text{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink-soft);font-size:.78rem}.studio-clip-warning-box{color:var(--ink);background-color:#d2432a14;border:1px solid #d2432a40;border-radius:6px;margin-top:10px;padding:10px 12px;font-size:.8rem}.studio-warning-box{color:var(--ink);background-color:#d49a2a1f;border:1px solid #d49a2a4d;border-radius:6px;padding:8px 10px;font-size:.76rem}.studio-export-success{flex-direction:column;gap:8px;display:flex}.studio-success-title{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);font-size:.84rem;font-weight:600;display:block}.studio-success-sub{color:var(--ink-soft);font-size:.78rem;display:block}.public-song-view{background-color:var(--paper);min-height:100dvh;color:var(--ink);flex-direction:column;display:flex}.public-song-container{flex-direction:column;gap:16px;width:100%;max-width:860px;margin:0 auto;padding:16px;display:flex}.public-song-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:12px;display:flex}.public-header-left,.public-header-right{align-items:center;gap:10px;display:flex}.public-badge{text-transform:uppercase;letter-spacing:.04em;background-color:var(--paper-deep);border:1px solid var(--line);color:var(--ink-soft);border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:600}.public-report-link{color:var(--ink-soft);font-size:.76rem;text-decoration:underline}.public-song-card{background-color:var(--paper-deep);border:1px solid var(--line);border-radius:8px;flex-direction:column;gap:16px;padding:20px;display:flex}.public-song-heading{font-family:var(--font-display,"Fraunces", serif);color:var(--ink);margin:0 0 4px;font-size:1.6rem;font-weight:600}.public-song-subline{color:var(--ink-soft);font-size:.82rem;font-family:var(--font-mono,"DM Mono", monospace)}.public-timeline-frame{aspect-ratio:16/9;background-color:var(--paper);border:1px solid var(--line);border-radius:6px;width:100%;max-height:380px;position:relative;overflow:hidden}.public-timeline-svg-wrapper{width:100%;height:100%}.public-timeline-svg-wrapper svg{width:100%;height:100%;display:block}.public-timeline-playhead{background-color:var(--ink);pointer-events:none;width:2px;transition:left 50ms linear;position:absolute;top:0;bottom:0;box-shadow:0 0 4px #1c1a1633}.public-controls-row{justify-content:space-between;align-items:center;gap:16px;padding-top:8px;display:flex}.public-transport-left{align-items:center;gap:10px;display:flex}.public-big-play-btn{align-items:center;gap:6px;height:38px;padding:0 16px;font-size:.88rem;display:flex}.public-time-readout{font-family:var(--font-mono,"DM Mono", monospace);color:var(--ink);font-size:.82rem}.public-volume-group{align-items:center;gap:8px;display:flex}.public-vol-label{color:var(--ink-soft);font-size:.76rem}}