@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#101316;--panel:#16191c;--line:#2a2d30;--text:#eeeef0;--muted:#92959b;--mint:#b6e1c9;--accent:#b7a0ff;font-family:'DM Sans',sans-serif;font-size:13px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:5px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}button{background:none;border:0}.topbar{height:83px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;align-items:center;gap:10px;font-family:Manrope,sans-serif;font-size:23px;font-weight:700;letter-spacing:-1px;color:var(--text);text-decoration:none}.brandmark{display:flex;align-items:center;justify-content:center;color:#c5b1ff;transform:rotate(-12deg)}.brandmark svg{width:27px;height:31px}.edition{font-family:'DM Sans',sans-serif;margin:4px 0 0 18px;font-size:9px;color:#85888e;letter-spacing:1.65px;font-weight:500}.header-actions{display:flex;align-items:center;gap:15px}.live-label{display:flex;align-items:center;gap:9px;color:#a5aaa9;font-size:11px;margin-right:18px}.live-label i,.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px #b6e1c933}.icon-button{width:30px;height:32px;display:grid;place-items:center;color:#a8acb1;border:1px solid transparent;border-radius:6px;font-size:14px}.icon-button:hover{background:#ffffff09;color:white;border-color:#ffffff15}.icon-button svg{width:17px;height:17px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 328px;min-height:calc(100dvh - 83px)}.artwork{min-width:0;padding:22px 24px 0 26px;display:flex;flex-direction:column}.canvas-wrap{position:relative;min-height:460px;flex:1;overflow:hidden;background:#070b10;border:1px solid #272c33;border-radius:10px;isolation:isolate}#fluid,#particles{position:absolute;inset:0;width:100%;height:100%;display:block}#fluid{touch-action:none;cursor:crosshair}#particles{pointer-events:none}.canvas-header{pointer-events:none;position:absolute;left:25px;right:25px;top:26px;display:flex;align-items:center;justify-content:space-between;z-index:2}.eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:500;color:#aaaab8}.tiny-line{width:19px;height:1px;display:inline-block;vertical-align:middle;background:#bcb4dc;margin-right:8px}.session-tag{font-size:8px;letter-spacing:1.6px;color:#75798a}.intro{position:absolute;top:21%;left:7%;pointer-events:none;transition:opacity 1.5s;z-index:2;text-shadow:0 2px 20px #03070c}.intro p{font-family:Manrope,sans-serif;font-size:clamp(30px,3.8vw,58px);font-weight:400;line-height:1.23;letter-spacing:-2.4px;margin:0 0 18px;color:#f1edf9}.intro em{font-family:Georgia,serif;font-weight:400;color:#c3b4e2;letter-spacing:-1.5px}.intro>span{color:#a7a1b7;font-size:12px;font-weight:400;letter-spacing:.1px}.intro.faded{opacity:0}.canvas-bottom{position:absolute;bottom:22px;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;z-index:3;gap:10px}.palette{display:flex;align-items:center;gap:8px}.color{position:relative;border:1px solid transparent;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;padding:5px;transition:transform .2s,border-color .2s}.color>span{width:18px;height:18px;background:var(--color);border-radius:50%;box-shadow:0 0 14px color-mix(in srgb,var(--color) 25%,transparent)}.color.selected{border-color:var(--color)}.color:hover{transform:translateY(-2px)}.palette-hint{font-size:8px;letter-spacing:1.4px;color:#c2b9d4;margin-left:8px}.palette-hint span{color:#67667b}.canvas-tools{display:flex;gap:18px}.text-button{display:flex;gap:7px;align-items:center;font-size:10px;color:#b2b3c0;padding:7px 0}.text-button svg{width:12px;height:12px}.text-button:hover{color:#fff}.cursor{display:none;pointer-events:none;position:absolute;width:25px;height:25px;border:1px solid #d1bcff80;border-radius:50%;transform:translate(-50%,-50%);z-index:4}.note-toast{font-size:10px;letter-spacing:2px;color:#d9d3ea;opacity:0;transition:opacity .2s;pointer-events:none;text-shadow:0 1px 10px black}.note-toast.show{opacity:.8}.transport{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;min-height:88px;padding:14px 20px;border:1px solid #2b2e33;border-radius:10px;background:#181b1f}.play-group{display:flex;gap:13px;align-items:center;min-width:178px}.play-button{flex-shrink:0;width:43px;height:43px;background:var(--mint);color:#182921;border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}.play-button:hover{background:#d4f5e2;transform:scale(1.04)}.play-button svg{width:20px;height:20px}.play-button svg use[href="#play"]{fill:currentColor;stroke-width:0}.play-group strong{font-size:12px;display:block;font-weight:500}.play-group span{font-size:9px;color:#8d939b;margin-top:6px;display:block;max-width:190px;line-height:1.4}.chord-sequence{display:flex;align-items:center;gap:8px}.chord-chip{position:relative;min-width:55px;height:39px;border:1px solid #353840;border-radius:5px;display:grid;place-items:center;font-size:12px;overflow:hidden;color:#b5b6c2;isolation:isolate}.chord-chip.active{background:#b7a0ff10;border-color:#8f7bb8;color:#e0d3ff}.chord-chip .progress{position:absolute;height:2px;left:0;bottom:0;background:#b7a0ff;width:0;z-index:-1}.chord-arrow{font-size:10px;color:#5b5f68}.tempo{text-align:center;min-width:78px}.tempo>span{font-size:7px;letter-spacing:1.5px;color:#8b9099}.tempo>div{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:5px}.tempo button{font-size:15px;color:#7e848b;padding:0 2px}.tempo strong{font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}.tempo small{font-size:7px;color:#747a84;letter-spacing:1.4px;display:block;margin-top:3px}.art-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;color:#696f78;font-size:8px;letter-spacing:.3px}.art-footer>span:first-child{display:flex;align-items:center;gap:7px}.art-footer .status-dot{width:4px;height:4px;background:#818b88}.art-footer>span:nth-child(2){font-size:7px;letter-spacing:1px}.art-footer b{font-weight:400;margin:0 7px;color:#51565e}.art-footer a{color:#7e848d;text-decoration:none;font-size:8px}.art-footer a:hover{color:#c9cbd1}.panel{background:var(--panel);border-left:1px solid var(--line);padding:28px 24px 0;max-height:calc(100dvh - 83px);overflow:auto;scrollbar-width:thin;scrollbar-color:#3a3d42 transparent}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.panel-heading .eyebrow{font-size:8px;color:#777e84;letter-spacing:1.5px}.panel-heading h1{font-size:17px;font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-.6px;margin:9px 0 0}.panel-icon{color:#afa1cb}.panel-icon svg{width:22px;height:22px;stroke-width:1}.tabs{display:flex;border-bottom:1px solid #303236;gap:27px;margin-bottom:22px}.tabs button{padding:0 0 12px;color:#7e838a;font-size:11px;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{color:#ded8ed;border-color:#c5b2eb}.control-section{border-bottom:1px solid #2b2d31;margin-bottom:20px;padding-bottom:20px}.section-label{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:500;letter-spacing:1.5px;color:#9a9ea5;margin-bottom:12px}.section-label>span{font-size:8px;letter-spacing:0;color:#656b73}select{cursor:pointer;color:#d6d8de;border:1px solid #35383f;border-radius:5px;background-color:#1c2025;padding:10px 28px 10px 11px;font-size:11px;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='m1 1 4 4 4-4' stroke='%239599a2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}select:hover{border-color:#555761}.helper{font-size:9px;line-height:1.7;color:#777e87;margin:9px 0 0}.split-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.mini-row{color:#8d949d;font-size:10px;margin-top:10px}.mini-row select{background-color:transparent;border:0;width:92px;padding:4px 18px 4px 0;font-size:10px;background-position:right 2px center;color:#b3b8c3}.voice-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}.voice-dot{width:7px;height:7px;border-radius:50%;background:var(--color);flex-shrink:0}.voice-row label{font-size:10px;color:#aaaeb7;width:53px}.voice-row select{padding:7px 24px 7px 9px;font-size:10px;flex:1}.voice-row:last-child{margin-bottom:0}.slider-label{font-size:10px;color:#afb5bf;display:flex;justify-content:space-between;align-items:center;margin-top:17px;margin-bottom:8px}output{font-size:9px;color:#858c98;font-variant-numeric:tabular-nums}.effects .slider-label:first-of-type{margin-top:0}input[type=range]{display:block;width:100%;height:3px;margin:11px 0 8px;appearance:none;border-radius:3px;cursor:pointer;background:linear-gradient(to right,#afa4c7 var(--pct,50%),#35383d var(--pct,50%))}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#dad1ec;box-shadow:0 0 0 3px #c3b7d711}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:0;background:#dad1ec}.range-extents{display:flex;justify-content:space-between;font-size:8px;color:#616975;margin-top:8px}.effects{padding-bottom:23px;margin-bottom:18px}.autopour{padding:14px 13px;background:#202429;border:1px solid #34393e;border-radius:7px;margin-bottom:18px}.auto-title{display:flex;align-items:center;gap:9px}.auto-title>svg{width:15px;height:19px;color:#abcbbd}.auto-title>span{font-size:11px;color:#d1d7dc}.auto-title small{display:block;font-size:8px;color:#838c94;margin-top:4px}input[type=checkbox]{appearance:none;width:27px;height:15px;flex-shrink:0;border-radius:12px;background:#444951;cursor:pointer;position:relative;transition:background .2s}input[type=checkbox]:after{content:'';position:absolute;width:9px;height:9px;top:3px;left:3px;background:#c2c7ce;border-radius:50%;transition:transform .2s}input[type=checkbox]:checked{background:#afd6c0}input[type=checkbox]:checked:after{background:#243a30;transform:translateX(12px)}.rain-rate{margin-top:17px;border-top:1px solid #34383d;padding-top:12px}.rain-rate label{display:flex;justify-content:space-between;font-size:9px;color:#969da7}.rain-rate input{margin-top:12px}.panel-bottom{display:flex;align-items:center;justify-content:center;gap:7px;border-top:1px solid #2b2e32;color:#737c82;font-size:8px;letter-spacing:.1px;padding:16px 0 20px}.panel-bottom .status-dot{width:4px;height:4px;background:#818d83}.fluid-helper{margin:0 0 25px;font-size:11px}.option-row{font-size:11px;color:#c4c8d0}.option-row small{display:block;font-size:9px;color:#7d858f;margin-top:5px}.outline-button{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #4e485d;color:#d4c6ea;border-radius:5px;padding:11px 14px;font-size:11px;width:100%;margin-top:22px;background:#b7a0ff06}.outline-button svg{width:15px;height:15px}.outline-button:hover{background:#b7a0ff14}.custom-chords{margin-top:12px}.custom-chords label{display:block;font-size:9px;color:#9c93ab;margin-bottom:8px}.custom-chords input{width:calc(100% - 53px);background:#101318;color:#e3daf4;border:1px solid #4b405d;border-radius:4px;padding:8px;font-size:11px}.custom-chords button{padding:8px 4px;font-size:10px;color:#cbbbeb}.custom-chords small{display:block;font-size:9px;margin-top:7px;line-height:1.6;color:#958aab}dialog{max-width:460px;width:calc(100% - 36px);border:1px solid #494252;border-radius:14px;color:#d1ccd9;background:#181a20;padding:38px;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#070910c9;backdrop-filter:blur(8px)}dialog h2{font-family:Manrope,sans-serif;font-weight:400;letter-spacing:-1px;font-size:29px;color:#f2eef7;margin:20px 0}dialog p{font-size:12px;line-height:1.9;color:#a4a0b0}.close-dialog{position:absolute;right:17px;top:12px;font-size:23px;color:#8f899e}.keyboard{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:10px;margin-top:22px;color:#898292}kbd{border:1px solid #494350;padding:3px 5px;border-radius:3px;font-family:inherit;color:#c5bed1;font-size:9px;margin-right:5px}body.panel-hidden .workspace{grid-template-columns:minmax(0,1fr)}body.panel-hidden .panel{display:none}body.zen .topbar,body.zen .panel,body.zen .transport,body.zen .art-footer,body.zen .canvas-header,body.zen .intro,body.zen .palette{display:none}body.zen .workspace{display:block;height:100dvh}body.zen .artwork{padding:0;height:100%}body.zen .canvas-wrap{border:0;border-radius:0}body.zen #clear{display:none}body.zen .canvas-bottom{justify-content:flex-end}body.zen #zen{padding:8px 13px;border:1px solid #ffffff15;background:#10131a80;border-radius:6px}body.zen .canvas-tools{display:flex}.transport.paused .chord-chip.active{border-color:#494551}.autopour.off .rain-rate{opacity:.4}.autopour.off input[type=range]{pointer-events:none}[hidden]{display:none!important}
@media(min-width:1550px){.workspace{grid-template-columns:minmax(0,1fr) 360px}.panel{padding:32px 28px 0}.control-section{padding-bottom:24px;margin-bottom:24px}.canvas-wrap{min-height:610px}.transport{min-height:100px}.artwork{padding:26px 28px 0}.panel-heading h1{font-size:19px}.chord-chip{min-width:72px}.chord-sequence{gap:12px}}
@media(max-width:1100px){.edition{display:none}.workspace{grid-template-columns:minmax(0,1fr) 292px}.panel{padding:24px 18px 0}.artwork{padding:18px 18px 0}.session-tag{display:none}.transport{padding:13px;flex-wrap:wrap}.play-group{min-width:155px}.chord-sequence{order:3;width:100%;justify-content:center;padding-top:12px;border-top:1px solid #2c3036;margin-top:4px}.chord-chip{flex:1;max-width:90px}.art-footer>span:nth-child(2){display:none}.intro p{font-size:42px}.intro{left:8%;top:20%}.canvas-tools{gap:12px}.palette-hint{display:none}}
@media(max-width:720px){.topbar{height:66px;padding:0 18px}.brand{font-size:21px}.live-label{display:none}.header-actions{gap:8px}.workspace{display:flex;flex-direction:column;min-height:calc(100dvh - 66px)}.artwork{padding:12px 12px 0}.canvas-wrap{flex:auto;height:56dvh;min-height:380px}.canvas-header{left:18px;top:20px}.eyebrow{font-size:8px}.intro{top:20%;left:7%}.intro p{font-size:39px;letter-spacing:-1.5px}.intro>span{font-size:10px}.canvas-bottom{left:14px;right:14px;bottom:16px}.canvas-tools{gap:15px}.text-button{font-size:9px}.color{width:27px;height:27px}.color>span{width:16px;height:16px}.palette{gap:5px}.transport{margin-top:12px;padding:14px;min-height:122px}.chord-sequence{padding-top:12px}.chord-chip{height:33px;max-width:100px}.play-group{min-width:160px}.panel{border-top:1px solid var(--line);border-left:0;max-height:none;padding:27px 24px 0;display:block}.panel-heading{margin-bottom:24px}.panel-heading h1{font-size:20px}.control-section{margin-bottom:24px;padding-bottom:24px}.voice-row{margin-bottom:11px}.voice-row select{padding:10px;font-size:11px}.voice-row label{width:68px;font-size:11px}.section-label{font-size:9px}.helper{font-size:10px}.slider-label{font-size:11px}.art-footer{min-height:38px;font-size:7px}.art-footer a{font-size:7px}.tempo{min-width:66px}.panel-bottom{padding:20px}.art-footer>span:first-child{max-width:50%}body.panel-hidden .workspace{display:flex}body.zen .canvas-wrap{height:100dvh;min-height:0}.header-actions .icon-button{width:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep color behavior beside the palette so the selected voice is explicit. */
.palette-controls{display:flex;align-items:center;gap:18px;min-width:0}.palette-cycle{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#b8b4c8;font-size:10px;cursor:pointer;padding:7px 0}.palette-cycle input{margin:0}.color-guide{margin:0;font-size:10px;line-height:1.8}.color-guide strong{color:#c8bfd9;font-weight:500}.palette-hint{white-space:nowrap}body.zen .palette-controls{display:none}
@media(max-width:1100px){.palette-controls{gap:13px}.palette-cycle{font-size:9px}}
@media(max-width:720px){.canvas-bottom{flex-wrap:wrap;row-gap:10px}.palette-controls{width:100%;justify-content:space-between;gap:10px}.canvas-tools{margin-left:auto}.palette-cycle{font-size:10px;padding:4px 0}}
/* Rhythm controls and the optional beat studio. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.rhythm-enable{font-size:15px;color:#ddd7e8}.rhythm-enable small{display:block;font-size:9px;color:#828a95;margin-top:7px}.rhythm-on{color:#b6d6c6}.compact-button{margin-top:12px;padding:9px 12px}.rhythm-summary{display:flex;align-items:center;width:100%;gap:9px;padding:10px 0;text-align:left;border-bottom:1px solid #2b2d32;font-size:11px;color:#b9bec8}.rhythm-summary>span:nth-child(2){flex:1}.rhythm-summary small{font-size:8px;color:#7c8491}.rhythm-summary>span:last-child{color:#747981}.rhythm-summary:hover{color:#e8e0fa}.rhythm-summary:last-child{border-bottom:0}.rhythm-badge{pointer-events:auto;border:1px solid #b7a0ff38;background:#12141cd9;border-radius:20px;color:#b9afcf;display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:8px;letter-spacing:1.2px;white-space:nowrap}.rhythm-badge:hover{background:#24222fd9;color:#f3e9ff}.rhythm-badge #rhythmStep{font-size:8px;letter-spacing:.5px;color:#cdb9f2;min-width:31px;font-variant-numeric:tabular-nums}.beat-led{width:5px;height:5px;background:#b7a0ff;border-radius:50%;box-shadow:0 0 9px #b7a0ff55}.canvas-header:has(.rhythm-badge:not([hidden])) .session-tag{display:none}.beat-dialog{max-width:1000px;width:calc(100% - 42px);max-height:92dvh;padding:31px 32px 25px;overflow:auto;scrollbar-width:thin;scrollbar-color:#4c445c transparent}.beat-studio-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-right:22px}.beat-dialog h2{font-family:Manrope,sans-serif;font-size:31px;letter-spacing:-1px;margin:10px 0 4px;font-weight:400}.beat-studio-header p{font-size:11px;margin:0;color:#9992a7}.studio-transport{display:flex;align-items:center;gap:14px;margin-top:17px}.studio-transport>span{font-size:10px;color:#a69cb7;white-space:nowrap}.studio-transport .outline-button{margin:0;width:auto;padding:8px 12px;white-space:nowrap}.studio-transport>label{display:flex;align-items:center;gap:8px;font-size:10px;color:#c6bdcf;white-space:nowrap}.studio-toolbar{display:flex;gap:10px;align-items:center;margin-top:24px;padding:16px 0;border-top:1px solid #36313f;border-bottom:1px solid #36313f}.studio-toolbar select{max-width:225px}.studio-toolbar .outline-button{margin:0;width:auto;padding:10px 13px;white-space:nowrap}.studio-clear{font-size:10px;color:#94879f;padding:10px}.studio-clear:hover{color:#e4d3ed}.step-legend{display:flex;align-items:center;gap:6px;font-size:9px;color:#887d9b;margin-left:auto;white-space:nowrap}.step-legend i{width:8px;height:8px;border:1px solid #a898bc;border-radius:2px}.legend-hit{background:#a898bc45}.legend-accent{background:#c9ade8;margin-left:7px}.beat-dialog .studio-tip{font-size:10px;color:#8c849b;margin:12px 0 14px;line-height:1.7}.beat-lane{border:1px solid #35313d;background:#15171c;border-radius:8px;padding:13px 15px;margin:11px 0}.beat-lane-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}.lane-number{font-size:9px;color:var(--lane);letter-spacing:1px;min-width:18px}.beat-lane-top select{width:160px;padding:7px 24px 7px 9px;font-size:11px}.lane-mute{padding:6px 10px;border:1px solid #3b3545;border-radius:4px;color:#8b809b;font-size:9px}.lane-mute[aria-pressed=true]{color:#ecd4c8;background:#76554633;border-color:#7e5f4e}.lane-level{display:flex;align-items:center;gap:10px;font-size:9px;color:#877e95;margin-left:auto}.lane-level input[type=range]{width:95px;margin:0;--pct:50%;background:linear-gradient(to right,var(--lane) var(--pct),#35383d var(--pct))}.lane-level input::-webkit-slider-thumb{background:var(--lane)}.lane-level input::-moz-range-thumb{background:var(--lane)}.step-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px}.drum-step{position:relative;height:29px;min-width:0;border:1px solid #3b3644;border-radius:4px;color:#5e586b;font-size:8px;background:#1a1b22;transition:background .1s,border-color .1s}.drum-step.beat-start{border-left:2px solid #73677f}.drum-step.hit{color:color-mix(in srgb,var(--lane) 78%,white);background:color-mix(in srgb,var(--lane) 25%,#15171c);border-color:color-mix(in srgb,var(--lane) 48%,#35313d)}.drum-step.accent{color:#1b1821;background:color-mix(in srgb,var(--lane) 85%,#15171c);border-color:var(--lane);box-shadow:inset 0 -3px 0 #ffffff32}.drum-step:hover{border-color:var(--lane)}.drum-step.playhead:after{content:'';position:absolute;bottom:-5px;left:15%;right:15%;height:2px;border-radius:2px;background:#f1e8ff;box-shadow:0 0 7px #d9b7ff}.beat-lane.muted .step-grid{opacity:.35}.lane-pattern-tools{display:flex;align-items:center;gap:14px;margin-top:13px;color:#7d748d;font-size:9px}.lane-pattern-tools>label{display:flex;gap:6px;align-items:center}.lane-pattern-tools input[type=number]{background:#1c1c25;border:1px solid #3b3548;border-radius:4px;color:#c6b7dc;width:43px;padding:4px 3px 4px 6px;font-size:10px}.lane-pattern-tools button{padding:4px 0;font-size:9px;color:#a195b5}.lane-pattern-tools button:hover{color:#e1d0ff}.lane-pattern-tools button:last-child{margin-left:auto;color:#71687e}.studio-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:20px;padding-top:15px;border-top:1px solid #36313f}.studio-bottom>span{font-size:9px;color:#81778f;line-height:1.8}.studio-bottom .outline-button{width:auto;margin:0;padding:10px 15px;white-space:nowrap}.rhythm-intro .outline-button{margin-top:16px}
@media(max-width:900px){.beat-dialog{padding:25px 20px 21px}.studio-transport{flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:230px}.studio-transport>span{font-size:9px}.beat-studio-header .eyebrow{font-size:8px}.step-grid{gap:4px}.step-legend{display:none}.beat-lane{padding:12px}.lane-pattern-tools{gap:12px}}
@media(max-width:720px){.beat-dialog{width:calc(100% - 22px);padding:24px 15px 18px;max-height:94dvh}.beat-studio-header{flex-wrap:wrap;gap:10px;padding-right:20px}.beat-dialog h2{font-size:26px}.studio-transport{margin:0;max-width:none;justify-content:flex-start}.studio-transport .outline-button{padding:7px 10px;font-size:10px}.studio-transport>label{font-size:9px}.studio-toolbar{flex-wrap:wrap;margin-top:17px;gap:8px;padding:12px 0}.studio-toolbar select{flex:1;max-width:none;min-width:120px;font-size:10px}.studio-toolbar .outline-button{font-size:9px;padding:10px}.studio-clear{padding:7px 2px;font-size:9px}.beat-lane-top{flex-wrap:wrap;gap:7px}.beat-lane-top select{width:140px;font-size:10px}.lane-level{margin-left:auto;gap:6px}.lane-level input[type=range]{width:56px}.lane-level{font-size:8px}.lane-mute{padding:6px;font-size:8px}.lane-number{font-size:8px;min-width:15px}.step-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;row-gap:9px}.drum-step{height:28px;font-size:9px}.lane-pattern-tools{gap:9px;font-size:8px}.lane-pattern-tools button{font-size:8px}.lane-pattern-tools input[type=number]{width:35px;font-size:9px}.lane-pattern-tools>label{gap:4px}.studio-bottom{align-items:flex-start;flex-direction:column;gap:13px}.studio-bottom .outline-button{width:100%}.rhythm-badge{font-size:7px;gap:6px;padding:7px 9px}.canvas-header:has(.rhythm-badge:not([hidden]))>.eyebrow{max-width:155px;font-size:7px;line-height:1.5}.canvas-header:has(.rhythm-badge:not([hidden])) .tiny-line{display:none}}

.studio-effects{display:grid;grid-template-columns:1fr 1fr 140px;gap:28px;border:1px solid #37323f;background:#14161b;border-radius:7px;padding:14px 16px;margin:14px 0 18px;align-items:center}.studio-effects .slider-label{margin:0 0 12px;font-size:10px}.studio-effects input[type=range]{margin:8px 0}.studio-echo-spacing{font-size:9px;color:#9a90aa;display:flex;flex-direction:column;gap:7px}.studio-echo-spacing select{padding:7px 24px 7px 9px;font-size:10px}
@media(max-width:720px){.studio-effects{grid-template-columns:1fr 1fr;gap:16px;padding:13px}.studio-echo-spacing{grid-column:1/-1;flex-direction:row;align-items:center;gap:12px}.studio-echo-spacing select{width:125px}.studio-effects .slider-label{font-size:9px}}
/* The canvas as an expressive performance surface. */
.performance-enable{font-size:14px;color:#ddd7e8}.performance-enable small{display:block;font-size:9px;color:#828a95;margin-top:6px}.performance-hint{position:absolute;z-index:3;right:23px;top:72px;padding:7px 10px;border:1px solid #d2baff22;border-radius:20px;background:#0c10177a;backdrop-filter:blur(6px);font-size:9px;color:#a89bbd}.performance-hint:hover{color:#e3d6f9;border-color:#d2baff55}.gesture-hud{position:absolute;left:25px;top:76px;z-index:2;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s;background:#0d1017a6;border:1px solid #b7a0ff22;border-radius:6px;padding:10px 12px;min-width:170px;backdrop-filter:blur(6px)}.gesture-hud.active{opacity:1;transform:translateY(0)}.gesture-hud>div{display:flex;align-items:center;justify-content:space-between;gap:15px}.gesture-hud #gestureName{font-size:10px;letter-spacing:1px;color:#d4c4ec}.gesture-hud small{display:block;font-size:8px;color:#948ca7;margin-top:6px}.gesture-meter{width:44px;height:2px;background:#70617d4d;display:block;position:relative;border-radius:2px}.gesture-meter:after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--level,0%);background:#d6bbff;border-radius:2px}.expression-map{height:147px;border:1px solid #3e354f;border-radius:8px;background:radial-gradient(ellipse at 75% 20%,#7eaaa42e,transparent 65%),radial-gradient(ellipse at 20% 85%,#775ca448,transparent 65%),#14171f;position:relative;overflow:hidden}.expression-map:before,.expression-map:after{content:'';position:absolute;background:#c0abeb15}.expression-map:before{left:50%;top:12px;bottom:12px;width:1px}.expression-map:after{top:50%;left:12px;right:12px;height:1px}.expression-map>span{position:absolute;font-size:7px;letter-spacing:1px;color:#8d82a1}.map-air{top:12px;left:50%;transform:translateX(-50%);white-space:nowrap}.map-depth{bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap}.map-low{left:12px;top:48%}.map-high{right:12px;top:48%}.expression-map>i{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);background:#d6c3ee;box-shadow:0 0 13px #d6c3ee80}.gesture-guide article{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid #2b2d32}.gesture-guide article:first-child{padding-top:1px}.gesture-guide article:last-child{border:0;padding-bottom:0}.gesture-guide article>span{font-size:8px;color:#7c6d91;padding-top:2px}.gesture-guide h3{font-size:11px;font-weight:500;color:#cfbfdf;margin:0 0 5px}.gesture-guide p{font-size:10px;line-height:1.75;color:#85808e;margin:0}.tabs{gap:24px}body.zen .performance-hint{display:none}body.zen .gesture-hud{top:24px;left:24px}.cursor{transition:width .1s,height .1s}
@media(max-width:1100px){.tabs{gap:20px}.gesture-hud{left:20px;top:66px}.performance-hint{right:18px;top:68px;font-size:8px}}
@media(max-width:720px){.performance-hint{right:15px;top:60px;padding:6px 8px;font-size:8px}.gesture-hud{left:16px;top:90px;min-width:155px;padding:8px 10px}.gesture-hud small{font-size:7px}.gesture-hud #gestureName{font-size:9px}.gesture-guide p{font-size:11px}.gesture-guide h3{font-size:12px}.expression-map{height:160px}}

.arpeggiator .section-label{margin-top:19px}.arpeggiator .mini-row select{width:156px}.arp-pool-heading{display:flex;justify-content:space-between;gap:10px;margin:17px 0 9px;color:#91869f;font-size:9px}.arp-pool-heading output{color:#ddc7f4;font-size:10px;min-width:22px;text-align:right}.arp-notes{display:flex;flex-wrap:wrap;gap:5px}.arp-note{font-size:9px;line-height:1;padding:7px 6px;min-width:26px;text-align:center;border:1px solid #51435e70;border-radius:4px;background:#b7a0ff06;color:#a696b8;transition:background .08s,color .08s}.arp-note.active{background:#cdb2ec;color:#24192f;border-color:#e0cbf6;box-shadow:0 0 12px #cdb2ec26}

.arp-shape{margin-top:18px;padding:12px;border:1px solid #51435e70;border-radius:6px;background:#b7a0ff04}.arp-shape summary{cursor:pointer;color:#cab8dd;font-size:10px;line-height:1.5}.arp-shape summary span{display:block;font-size:8px;color:#897a98;margin:4px 0 0 13px}.arp-envelope{display:block;width:100%;height:auto;margin-top:12px;stroke-linejoin:round}.arp-envelope-grid{stroke:#a48ab229;stroke-width:1;fill:none}.arp-envelope polygon{fill:#c6a4e91c;stroke:none}.arp-envelope polyline{fill:none;stroke:#cdb2ec;stroke-width:2}.arp-shape #arpEnvelopeSummary{font-size:9px;line-height:1.7;color:#a395b1;margin:1px 0 15px}.arp-shape .helper:last-child{margin-bottom:0}

.arp-glide .option-row{margin:0}.arp-glide input:disabled{opacity:.35;cursor:default}.arp-glide #arpGlideSummary{line-height:1.7;font-size:9px;margin-bottom:15px}

.studio-kit{padding:12px 14px;border:1px solid #393240;border-radius:7px;background:#b7a0ff04;margin:12px 0 16px}.studio-kit>label{display:flex;align-items:center;gap:16px;color:#bdb0cc;font-size:10px}.studio-kit select{max-width:230px}.studio-kit .helper{margin:9px 0 0;font-size:10px}.drum-step.ghost{background:color-mix(in srgb,var(--lane) 8%,#1a1b22);border-color:color-mix(in srgb,var(--lane) 35%,#3b3644);color:var(--lane);border-style:dashed}.drum-step.ghost::before{content:'';position:absolute;bottom:3px;left:calc(50% - 1px);width:2px;height:2px;border-radius:50%;background:var(--lane)}.legend-ghost{border-style:dashed!important;background:#a898bc14}.legend-hit{margin-left:7px}@media(max-width:700px){.studio-kit>label{align-items:flex-start;flex-direction:column;gap:8px}.studio-kit select{max-width:none;width:100%}}

.record-launcher{border:1px solid #73608270;border-radius:5px;background:#b7a0ff0a;padding:8px 11px;font-size:10px;color:#d1c0e6;white-space:nowrap}.record-launcher.is-recording{color:#ffb0b0;border-color:#cf7474}.record-dialog{width:calc(100% - 36px);max-width:820px;max-height:90dvh;overflow:auto;padding:30px}.record-dialog h2{margin:10px 0;font-size:30px}.record-dialog .record-intro{margin:0 0 16px;font-size:11px}.recorder-status{padding:10px 12px;border:1px solid #75618355;background:#b7a0ff0a;border-radius:5px;font-size:11px!important;color:#d0c0e4!important;line-height:1.6!important}.record-columns{display:grid;grid-template-columns:1fr 1.25fr;gap:28px}.record-columns section+section{padding-left:24px;border-left:1px solid #494252}.record-columns h3{font-size:13px;font-weight:500;color:#dfd4e8;margin:15px 0 20px}.record-columns label:not(.record-auto):not(.slider-label){display:block;font-size:10px;color:#aaa0b8;margin:14px 0 8px}.record-columns input[type=text],.record-columns input[type=number]{width:100%;border:1px solid #4c4159;border-radius:4px;background:#10131a;color:#e3d9ee;padding:10px;font:inherit;font-size:11px}.record-columns .helper{font-size:10px;line-height:1.8;margin:12px 0}.record-columns .slider-label{margin-top:22px}.record-auto{display:flex;align-items:center;gap:8px;font-size:10px;color:#c1b7cf;line-height:1.6;margin-top:18px}.record-actions{display:flex;gap:8px;margin-top:8px}.record-actions .outline-button{margin-top:0;flex:1;padding:9px 7px;font-size:10px}.record-primary{border-color:#cf8c9066;background:#d3797912}.record-delete{color:#c1a1a7}.record-dialog button:disabled,.record-dialog select:disabled,.record-dialog input:disabled{opacity:.35;cursor:default}.record-bar{display:flex;align-items:center;gap:12px;border:1px solid #74607c70;border-radius:7px;background:#1d1b23;padding:12px 16px;margin-top:12px}.record-dot{width:7px;height:7px;border-radius:50%;background:#e39da6;box-shadow:0 0 10px #d17e9b55;flex-shrink:0}.record-bar>div{flex:1;min-width:0}.record-bar strong{display:block;font-size:10px;color:#d8c5e6;font-weight:500;line-height:1.5}.record-bar span{font-size:9px;color:#94869f;font-variant-numeric:tabular-nums}.record-bar progress{display:block;height:3px;width:100%;margin-top:6px;accent-color:#c4a5d7}.record-bar>button{font-size:10px;color:#e4cfe9;border:1px solid #6c5474;border-radius:4px;padding:8px 12px;white-space:nowrap}.performance-playback .panel,.performance-finishing .panel{pointer-events:none;opacity:.65}.performance-playback #fluid,.performance-finishing #fluid,.performance-playback .palette-controls,.performance-finishing .palette-controls,.performance-playback .tempo,.performance-finishing .tempo,.performance-playback #chords,.performance-finishing #chords,.performance-playback #clear,.performance-finishing #clear{pointer-events:none}.performance-playback .record-dot{background:#a8d3bc}.performance-playback #start,.performance-finishing #start{opacity:.4}@media(max-width:720px){.record-dialog{padding:25px 20px}.record-columns{grid-template-columns:1fr;gap:12px}.record-columns section+section{border-left:0;border-top:1px solid #494252;padding:15px 0 0}.record-launcher{font-size:9px;padding:7px 8px}.record-bar{gap:8px;padding:10px}.record-bar>button{font-size:9px;padding:8px}.record-bar strong{font-size:9px}.performance-playback .record-bar{position:relative;z-index:2}}

@media(max-width:400px){.record-launcher{font-size:8px;padding:7px 5px}.header-actions{gap:4px}.brand{font-size:19px}}

.community-dialog{width:calc(100% - 32px);max-width:850px;max-height:90dvh;padding:32px;overflow:auto}.community-dialog h2{font-size:32px;font-weight:400;margin:12px 0;color:#ebe1ee}.community-intro{font-size:12px!important;line-height:1.8!important;max-width:570px;color:#a9a0b6!important}.community-account{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:13px 0 20px;font-size:10px;color:#aca1b9}.community-account a{color:#d8bcf2;text-decoration:none;border-bottom:1px solid #8b7196;padding-bottom:3px}.community-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-top:17px;border-top:1px solid #51435670}.community-tabs button{padding:9px 12px;border:1px solid #514356;border-radius:22px;color:#afa2bc;font-size:10px}.community-tabs button[aria-pressed=true]{background:#b7a0ff1c;color:#e2d1f4;border-color:#9e7eb3}.community-chart-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}.community-chart-heading p{font-size:10px!important;line-height:1.7!important;color:#9c91a9!important}.community-chart-heading button{font-size:10px;white-space:nowrap}.community-status{font-size:11px!important;line-height:1.7!important;color:#d0bddf!important;min-height:1.7em;margin:10px 0!important}.community-tracks{display:grid;gap:9px}.community-track{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:17px 15px;border:1px solid #51435665;border-radius:8px;background:linear-gradient(110deg,#b7a0ff08,#73e2d004)}.track-rank{font-size:13px;color:#a594b4;font-variant-numeric:tabular-nums}.track-title{margin:0 0 5px;font-size:14px;font-weight:500;color:#e3d5eb;overflow-wrap:anywhere}.track-artist{font-size:10px;color:#b6a3c6;overflow-wrap:anywhere}.track-meta{display:block;margin-top:7px;font-size:9px;color:#8c8198}.track-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:225px}.track-actions button{border:1px solid #66517280;border-radius:5px;padding:8px 9px;font-size:10px;white-space:nowrap;color:#c5b0d7}.track-actions .track-play{color:#bddecf;border-color:#618d7680;background:#7fd7ab08}.track-actions button[aria-pressed=true]{background:#d997b21c;color:#efb8ce;border-color:#b27d98}.community-dialog button:disabled{opacity:.4;cursor:wait}.community-empty{padding:36px 20px;text-align:center;border:1px dashed #514356;border-radius:8px}.community-empty strong{color:#d8c6e4;font-size:14px;font-weight:400}.community-empty p{font-size:11px!important;color:#9789a5!important;line-height:1.8!important}.community-share{border-top:1px solid #51435680;margin-top:27px;padding-top:25px}.community-share h3{font-size:20px;font-weight:400;color:#decee8;margin:10px 0}.community-share>.outline-button{width:auto;margin:8px 0 20px}.community-share .helper{font-size:10px;line-height:1.8;color:#a696b2}.share-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.share-fields label{display:block;font-size:10px;color:#baabc9;margin:10px 0}.share-fields input{width:100%;border:1px solid #5f4a6d;border-radius:5px;background:#11141b;padding:12px;color:#e2d4ed;font-size:12px;font:inherit}.share-consent{display:flex;align-items:flex-start;gap:9px;margin:18px 0 12px;font-size:10px;line-height:1.8;color:#c2b0d1}.share-consent input{margin-top:4px;flex-shrink:0}.community-share progress{width:100%;height:5px;accent-color:#b7a0ff;margin-top:15px}#communityMore{margin-top:15px}dialog [hidden]{display:none!important}@media(max-width:720px){.community-dialog{padding:28px 18px}.community-dialog h2{font-size:26px}.share-fields{grid-template-columns:1fr;gap:0}.community-track{grid-template-columns:22px minmax(0,1fr);gap:9px;padding:15px 12px}.track-actions{grid-column:2;justify-content:flex-start;max-width:none;margin-top:3px}.community-tabs button{padding:8px 10px;font-size:9px}.header-actions{gap:6px}.community-account{font-size:9px}.community-chart-heading p{font-size:9px!important}}@media(max-width:450px){.topbar .brand .edition{display:none}.topbar .record-launcher{font-size:8px;padding:7px 6px}.topbar{padding-left:12px;padding-right:12px}.header-actions .live-label{display:none}}

.art-footer{flex-wrap:wrap}.footer-credits{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-left:auto;padding:9px 0}.art-footer .creator-credit{font-size:10px;color:#b8a8cc;letter-spacing:.1px}.art-footer .creator-credit:hover{color:#e2d2f4}

.record-bar strong{overflow-wrap:anywhere}.record-bar #recordBarFork{color:#d5c1ed;border-color:#85649b;background:#b7a0ff0c}

.palette-preview{display:grid;grid-template-columns:repeat(4,1fr);height:24px;gap:4px;margin:14px 0 10px}.palette-preview span{background:var(--color);border-radius:4px;opacity:.9}.palette-preview + .helper{margin-top:0}

/* A quiet workspace: five destinations, with finer controls opened as needed. */
.panel{height:calc(100dvh - 83px);max-height:calc(100dvh - 83px);padding:0;display:flex;flex-direction:column;overflow:hidden}
.panel-navigation{padding:24px 20px 0;flex-shrink:0;background:var(--panel);z-index:5;border-bottom:1px solid #303338}
.panel-heading{margin-bottom:19px}.panel-heading h1{font-size:18px;letter-spacing:-.65px}.panel-heading .eyebrow{color:#8d949c}
.panel .tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;border:1px solid #30343a;background:#101418;border-radius:8px;padding:4px;margin:0}
.panel .tabs button{min-width:0;min-height:36px;padding:9px 2px;font-size:10px;line-height:1.2;border:0;border-radius:5px;color:#979fa9;transition:background .15s,color .15s}
.panel .tabs button:hover{color:#ece7f5;background:#ffffff06}.panel .tabs button[aria-selected=true]{background:#35323f;color:#f0e9fb;box-shadow:inset 0 0 0 1px #c9b7e122}
.panel-description{font-size:10px;line-height:1.6;color:#8e979f;margin:13px 0 15px;min-height:32px}
.panel-content{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#46434f transparent;min-height:0;flex:1;padding:21px 20px 5px;scroll-padding-top:15px}
.panel-content>[role=tabpanel]{outline-offset:-2px}.panel-content .control-section{margin-bottom:21px;padding-bottom:21px}.panel-content .control-section:last-child{border-bottom:0}
.panel .section-label{font-size:9px;font-weight:500;letter-spacing:1.1px;color:#b0b5be}.panel h2.section-label{margin-top:0}.panel .helper{color:#9199a4;font-size:10px;line-height:1.7}
.panel .slider-label{font-size:11px;color:#bdc3cd}.panel output{font-size:10px;color:#aaa3b9}.panel .range-extents{color:#838b96;font-size:9px}.panel .mini-row{font-size:11px;color:#aab1bb}.panel .mini-row select{font-size:11px;width:120px;max-width:58%}
.panel select{min-height:37px}.panel .voice-row select{min-width:0}.panel .option-row small,.panel .performance-enable small,.panel .rhythm-enable small{font-size:10px;line-height:1.5;color:#8f98a4}
.panel .panel-bottom{flex-shrink:0;padding:13px 20px;font-size:9px;background:var(--panel);border-top:1px solid #303338;color:#8b959d}
.panel-note{font-size:10px;line-height:1.7;color:#939aa6;margin:0 0 16px}
.layer-card{--layer:#c3afe8;border:1px solid #3a3545;border-radius:10px;background:linear-gradient(135deg,#b7a0ff06,transparent 70%),#191c21;padding:16px 14px 0;margin-bottom:13px;overflow:hidden}
.layer-card.percussion{--layer:#a5cbbc}.layer-card.environment{--layer:#c9c194}.layer-card.is-enabled{border-color:color-mix(in srgb,var(--layer) 48%,#2f333b)}
.layer-card>.option-row,.layer-card>.rhythm-enable{font-size:13px;line-height:1.4;color:#e0dbe8}.layer-card>.option-row>span,.layer-card>.rhythm-enable>span{position:relative;padding-left:14px}.layer-card>.option-row>span:before,.layer-card>.rhythm-enable>span:before{content:'';position:absolute;width:5px;height:5px;border-radius:50%;left:0;top:7px;background:#555b65}.layer-card.is-enabled>.option-row>span:before,.layer-card.is-enabled>.rhythm-enable>span:before{background:var(--layer);box-shadow:0 0 9px color-mix(in srgb,var(--layer) 24%,transparent)}
.layer-card>.helper{font-size:9px;margin:10px 0 13px;line-height:1.6;overflow-wrap:anywhere}
.control-fold{border:1px solid #363a43;border-radius:8px;background:#15191e;margin:0 0 16px;overflow:hidden}.control-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;color:#d1c7df;font-size:11px;font-weight:500;line-height:1.4;min-height:48px}.control-fold>summary::-webkit-details-marker{display:none}.control-fold>summary small{display:block;color:#89939f;font-size:9px;font-weight:400;line-height:1.6;margin-top:4px;overflow-wrap:anywhere}.control-fold>summary>i{border-right:1px solid #a798b7;border-bottom:1px solid #a798b7;width:6px;height:6px;transform:rotate(45deg);margin:0 3px 3px;flex-shrink:0;transition:transform .15s}.control-fold[open]>summary>i{transform:rotate(225deg);margin-bottom:-3px}.control-fold>summary:hover{background:#b7a0ff07}.control-fold[open]>summary{border-bottom:1px solid #323741}.fold-content{padding:15px 14px}.fold-content>:first-child{margin-top:0}.fold-content>:last-child{margin-bottom:0}
.layer-card>.layer-editor{border:0;border-top:1px solid #363943;border-radius:0;background:transparent;margin:0 -14px}.layer-editor>summary{padding:12px 14px;color:#bfb1d0;font-size:10px}.layer-editor>summary small{font-size:9px;max-width:220px}.layer-editor>.fold-content{padding:18px 14px}.layer-editor .control-section{margin-bottom:18px;padding-bottom:18px}.layer-editor .section-label{font-size:8px}.layer-editor .mini-row select{width:150px;max-width:64%}.layer-editor .nested-fold{margin-top:20px}.layer-editor .outline-button{margin:12px 0}.layer-editor .arp-shape{padding:12px 10px}.layer-editor .arp-shape summary{font-size:11px}.layer-editor .arp-shape summary span{font-size:9px}
.panel .section-link{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;min-height:38px;color:#bcafd0;font-size:10px;line-height:1.6;padding:9px 1px;margin:6px 0 14px}.section-link:hover{color:#e3d5f6}.section-link span{font-size:13px}.panel .mix-state{font-size:8px;font-weight:400;letter-spacing:.5px;color:#8f839d;margin-left:7px}.panel .autopour{margin-top:22px;background:#1d2427}.panel #resetPerformance,.panel #bloom{margin:12px 0 20px}.panel .fluid-helper{margin-bottom:18px}
.panel .control-fold:focus-within,.panel .layer-card:focus-within{border-color:#88769f}.panel summary:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;border-radius:6px}
@media(min-width:1550px){.panel-navigation{padding:28px 24px 0}.panel-content{padding:24px 24px 5px}.panel-heading h1{font-size:20px}.panel .tabs button{font-size:11px}.panel-description{font-size:11px;min-height:35px}.panel .helper{font-size:11px}}
@media(max-width:1100px){.panel-navigation{padding:21px 14px 0}.panel-content{padding:18px 14px 5px}.panel .tabs{gap:1px;padding:3px}.panel .tabs button{font-size:9px;padding-left:0;padding-right:0}.panel-description{font-size:9px}.layer-card{padding-left:12px;padding-right:12px}.layer-card>.layer-editor{margin-left:-12px;margin-right:-12px}.layer-editor>.fold-content{padding-left:12px;padding-right:12px}}
@media(max-width:720px){.panel{height:auto;max-height:none;overflow:visible}.panel-navigation{position:sticky;top:0;padding:20px 20px 0;box-shadow:0 8px 18px #10131633}.panel-content{overflow:visible;flex:auto;padding:22px 20px 8px}.panel-heading{margin-bottom:15px}.panel-heading h1{font-size:20px}.panel .tabs{gap:3px;padding:4px}.panel .tabs button{font-size:11px;min-height:40px}.panel-description{font-size:10px;min-height:0;margin:11px 0 13px}.panel .helper{font-size:11px}.layer-card>.helper{font-size:10px}.control-fold>summary{font-size:12px;min-height:54px}.control-fold>summary small{font-size:10px}.layer-editor>summary{font-size:11px}.layer-editor>summary small{max-width:none;font-size:10px}.panel .panel-bottom{padding:17px 20px}.panel input[type=range]{height:4px;margin-top:17px;margin-bottom:13px}.panel input[type=range]::-webkit-slider-thumb{width:13px;height:13px}.panel input[type=range]::-moz-range-thumb{width:13px;height:13px}.panel .voice-row label{width:56px}}

/* A quiet, fixed-width readout: pitch and voice crossfade independently. */
.note-toast{display:flex;align-items:center;gap:14px;width:min(280px,calc(100% - 40px));height:48px;letter-spacing:0;transition:opacity 450ms ease;text-shadow:0 1px 12px #000b}
.note-toast.show{opacity:1}
.note-pitch,.note-voice{display:grid;align-items:center;min-width:0}
.note-pitch{width:68px;flex:none;font-size:30px;line-height:1.2;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.note-voice{flex:1;min-height:32px;padding-left:14px;border-left:1px solid #d9d3ea30;font-size:12px;line-height:1.3;color:#bcb5cb}
.note-pitch>span,.note-voice>span{grid-area:1/1;opacity:0}
@media(prefers-reduced-motion:reduce){.note-toast{transition:none}}

/* Phone workspace: a clear canvas, a reachable transport, and a focused controls sheet. */
.mobile-dock,.close-mobile-controls,.touch-intro{display:none}
@media(max-width:720px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
 body{padding-bottom:calc(88px + env(safe-area-inset-bottom));overscroll-behavior-y:none}
 .topbar{height:auto;min-height:112px;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto;gap:6px 12px}
 .topbar .brand{grid-column:1;grid-row:1;font-size:22px;min-height:44px}.topbar .brand .edition{display:none}
 .header-actions{display:contents}.header-actions .live-label,.header-actions #togglePanel{display:none}
 .header-actions #help{grid-column:2;grid-row:1;margin-right:48px}.header-actions #fullscreen{grid-column:2;grid-row:1;justify-self:end}
 .header-actions .icon-button{width:44px;height:44px;font-size:18px}
 .topbar .record-launcher{min-height:44px;font-size:13px;padding:10px 14px;border-radius:8px}
 #communityLauncher{grid-column:1;grid-row:2}#recordLauncher{grid-column:2;grid-row:2;min-width:142px}
 .workspace{min-height:0;display:flex;flex-direction:column}.artwork{width:100%;padding:10px max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
 .canvas-wrap{height:clamp(340px,calc(100svh - 330px),560px);min-height:340px;flex:none;border-radius:14px}
 .canvas-header{top:16px;left:16px;right:16px}.canvas-header .eyebrow{font-size:8px;letter-spacing:1px}.session-tag{display:none}
 .intro{top:22%;left:7%;right:7%}.intro p{font-size:clamp(30px,8vw,44px);letter-spacing:-1.3px;margin-bottom:12px}.intro>span{font-size:12px;line-height:1.5}
 .touch-intro{display:block;color:#bcb4cc;font-size:12px;line-height:1.5;margin-top:8px}
 .performance-hint{top:43px;right:10px;min-height:44px;padding:10px 12px;font-size:11px;display:flex;align-items:center}
 .canvas-bottom{left:8px;right:8px;bottom:8px;gap:0;flex-wrap:wrap;justify-content:center}
 .palette-controls{width:100%;justify-content:space-between;gap:0;flex-wrap:nowrap}.palette{gap:0}.palette-hint{display:none}
 .color{width:44px;height:44px;flex-shrink:0}.color>span{width:22px;height:22px}.palette-cycle{min-height:44px;font-size:12px;gap:6px;padding:0 3px}
 .canvas-tools{width:100%;justify-content:space-between;gap:12px;padding:0 6px}.text-button{min-height:44px;font-size:12px;padding:8px}.text-button svg{width:16px;height:16px}
 .gesture-hud{top:94px;left:14px;max-width:calc(100% - 28px)}
 .transport{margin-top:10px;min-height:0;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px}.transport>.play-group{display:none}
 .chord-sequence{order:0;width:100%;padding:0;gap:6px;justify-content:space-between}.chord-chip{flex:1;min-width:0;max-width:none;height:44px;font-size:13px}.chord-arrow{display:none}
 .tempo{width:100%;display:flex;align-items:center;justify-content:center;gap:10px}.tempo>span,.tempo small{font-size:10px;margin:0}.tempo>div{margin:0;gap:12px}.tempo button{width:44px;height:44px;font-size:22px;color:#c4becf}.tempo strong{font-size:16px}
 .art-footer{gap:8px;padding:8px 4px}.art-footer>span:nth-child(2){display:none}.art-footer>span:first-child{font-size:10px}.art-footer a{min-height:24px;display:flex;align-items:center;font-size:10px}.footer-credits{gap:2px;padding:0}
 .mobile-dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;bottom:0;left:0;right:0;z-index:20;padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#14191cf2;border-top:1px solid #3a3e43;backdrop-filter:blur(16px)}
 .mobile-dock button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid #655971;border-radius:10px;color:#e5d9f3;font-size:13px;font-weight:500;background:#b7a0ff0a}.mobile-dock .mobile-play{background:var(--mint);color:#193228;border-color:var(--mint)}.mobile-play use[href="#play"]{fill:currentColor;stroke:none}
 .panel{display:none;position:fixed;inset:auto 0 0;z-index:40;height:min(86dvh,800px);max-height:100dvh;border:1px solid #4c4458;border-bottom:0;border-radius:20px 20px 0 0;overflow:hidden;padding:0 0 env(safe-area-inset-bottom);box-shadow:0 -20px 80px #0008}
 body.mobile-controls-open{overflow:hidden}body.mobile-controls-open .panel{display:flex}
 .mobile-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:30;background:#03070bb3;backdrop-filter:blur(5px)}
 .close-mobile-controls{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;width:100%;padding:12px 20px;font-size:13px;color:var(--mint);border-bottom:1px solid #303338}
 .panel-navigation{position:static;padding:14px 16px 0}.panel-heading{margin-bottom:12px}.panel-heading .eyebrow{display:none}.panel-heading h1{font-size:21px;margin:0}.panel-description{font-size:12px;margin:10px 0 12px}
 .panel .tabs button{min-height:44px;font-size:12px}.panel-content{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:18px 16px 8px;scroll-padding:18px}
 .panel .panel-bottom{display:none}.panel .helper,.panel-note,.gesture-guide p{font-size:12px;line-height:1.7;color:#adb2bf}.panel .section-label{font-size:11px}.panel .slider-label,.panel .mini-row{font-size:13px}.panel output,.panel .range-extents{font-size:11px}
 .panel select,.panel .voice-row select,.panel .mini-row select,dialog select,dialog input[type=text],dialog input[type=number],.custom-chords input{font-size:16px;min-height:48px;min-width:0;max-width:100%}
 .panel .mini-row select{max-width:62%;width:160px}.panel .voice-row label{font-size:12px}.panel .option-row,.panel .rhythm-enable,.panel .performance-enable,.auto-title{min-height:48px}.panel .option-row small,.panel .rhythm-enable small,.panel .performance-enable small{font-size:12px}
 .panel input[type=range],dialog input[type=range]{height:44px;margin:4px 0;background:linear-gradient(to right,#afa4c7 var(--pct,50%),#35383d var(--pct,50%)) center / 100% 4px no-repeat}
 .panel input[type=range]::-webkit-slider-thumb,dialog input[type=range]::-webkit-slider-thumb{width:24px;height:24px}.panel input[type=range]::-moz-range-thumb,dialog input[type=range]::-moz-range-thumb{width:24px;height:24px}
 input[type=checkbox]{width:40px;height:24px;margin:10px 2px}input[type=checkbox]:after{width:18px;height:18px;top:3px;left:3px}input[type=checkbox]:checked:after{transform:translateX(16px)}
 .outline-button,.panel .section-link,.custom-chords button,.record-bar>button{min-height:44px;font-size:13px}.control-fold>summary{min-height:56px;font-size:14px}.control-fold>summary small{font-size:12px}.arp-shape summary{min-height:44px}
 dialog,.record-dialog,.community-dialog,.beat-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:58px 18px 24px;overscroll-behavior:contain;scroll-padding:58px 0 24px}
 .close-dialog{position:sticky;float:right;right:0;top:-50px;margin:-48px -8px 0 0;width:44px;height:44px;background:#22252e;border:1px solid #5d5369;border-radius:50%;z-index:10;font-size:26px;color:#e4d9f0}
 dialog p,dialog .helper,.record-dialog .record-intro,.record-columns .helper{font-size:13px!important;line-height:1.7!important}.record-columns label:not(.record-auto):not(.slider-label),.record-auto,.share-consent,.community-account{font-size:13px}.record-actions{flex-wrap:wrap}.record-actions .outline-button{min-width:110px;font-size:12px}
 .community-tabs button,.track-actions button,.community-chart-heading button{min-height:44px;font-size:12px}.track-actions{grid-column:1/-1}.share-fields{min-width:0}.community-track{min-width:0}.community-chart-heading{flex-wrap:wrap}
 .studio-transport{flex-wrap:wrap}.studio-toolbar{flex-wrap:wrap}.studio-toolbar select{max-width:none;width:100%}.beat-lane{padding:12px 8px}.beat-lane-top{flex-wrap:wrap}.beat-lane-top select{width:calc(100% - 36px);font-size:16px}.lane-level{width:100%;margin:0;justify-content:space-between}.lane-level input[type=range]{width:65%}.lane-mute,.lane-settings button{min-width:44px;min-height:44px;font-size:12px}
 .step-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.drum-step{height:44px;font-size:11px}.studio-tip{font-size:12px!important}.studio-bottom{flex-wrap:wrap;gap:12px}
 body.zen{padding-bottom:0}body.zen .mobile-dock{display:none}body.zen .canvas-wrap{height:100dvh;min-height:0}body.zen .canvas-tools{justify-content:flex-end}body.zen #zen{min-height:48px;margin-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:360px){.palette-cycle{font-size:10px;gap:3px;padding:0}.color{width:44px}.palette-cycle input{width:34px;margin-left:0;margin-right:0}.palette-cycle input:checked:after{transform:translateX(10px)}.intro p{font-size:30px}}
@media(max-width:720px) and (orientation:landscape),(max-width:1000px) and (max-height:500px) and (pointer:coarse){.canvas-wrap{height:360px}.panel{height:96dvh}.panel-heading,.panel-description{display:none}.panel-navigation{padding:8px 16px}.close-mobile-controls{min-height:44px}.intro{top:22%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:720px) and (orientation:landscape),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
 .topbar{display:flex;min-height:64px;gap:12px}.topbar .brand{font-size:20px;flex-shrink:0}.header-actions{display:flex;gap:6px}.header-actions #help{margin:0}.topbar .record-launcher{font-size:12px;padding:8px 10px}#recordLauncher{min-width:0}
 .canvas-wrap{height:clamp(240px,calc(100svh - 140px),360px);min-height:240px}.intro{top:22%}.intro p{font-size:32px;margin:0}.intro>span,.touch-intro{display:none}.performance-hint{top:12px}.canvas-header{right:180px}.gesture-hud{top:58px}
 .step-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media(max-width:720px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
 dialog .lane-level input[type=range]{background:linear-gradient(to right,var(--lane) var(--pct,50%),#35383d var(--pct,50%)) center / 100% 4px no-repeat}
 .lane-pattern-tools{flex-wrap:wrap;gap:8px;font-size:12px}.lane-pattern-tools button{min-height:44px;min-width:44px;font-size:12px;padding:8px}.lane-pattern-tools input[type=number]{width:64px}.studio-clear{min-height:44px;font-size:12px}.studio-transport>label,.studio-transport>span{font-size:12px}
}

.help-link{text-decoration:none}

/* Shared compact native picker treatment. Full selected details wrap below. */
select{min-width:0;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.select-detail{margin:7px 0 12px;line-height:1.65;overflow-wrap:anywhere;letter-spacing:0;color:var(--muted);font-size:11px}
.select-detail[hidden]{display:none}
.voice-row{flex-wrap:wrap}.voice-row .select-detail{flex-basis:100%;margin:0 0 3px 80px}
.studio-toolbar{flex-wrap:wrap}.studio-toolbar .select-detail{flex-basis:100%;margin:0}
.beat-lane-top{flex-wrap:wrap}.beat-lane-top .select-detail{flex-basis:100%;margin:0}
@media(max-width:700px){select{min-height:44px;font-size:16px}.voice-row select{min-height:44px;font-size:16px}.select-detail{font-size:12px}}

/* Keep the latest pitch and voice stacked to the right of the chords. */
.harmony-display{display:flex;flex:1;min-width:0;max-width:490px;align-items:center;gap:16px}
.harmony-display .chord-sequence{order:0;flex:1;min-width:0;width:auto;justify-content:center;padding:0;margin:0;border:0;gap:6px}
.harmony-display .chord-chip{flex:1;min-width:0;max-width:90px}
.current-note{display:flex;align-items:center;flex:0 0 112px;min-width:0;min-height:48px;padding-left:16px;border-left:1px solid #353840}
.current-note .note-toast{position:static;transform:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;max-width:100%;width:100%;height:48px;gap:4px;text-shadow:none}
.current-note .note-pitch{width:100%;font-size:22px;letter-spacing:-.5px}
.current-note .note-voice{flex:none;width:100%;min-height:0;padding:0;border:0;font-size:10px;line-height:1.3;overflow-wrap:anywhere}
@media(max-width:1100px){.harmony-display{order:3;flex-basis:100%;max-width:none;border-top:1px solid #2c3036;padding-top:12px;margin-top:4px}.harmony-display .chord-sequence{gap:8px}}
@media(max-width:720px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){.harmony-display{order:0;width:100%;flex-basis:100%;border:0;margin:0;padding:0;gap:10px}.harmony-display .chord-sequence{gap:6px}.harmony-display .chord-chip{max-width:none;font-size:11px}.current-note{flex-basis:88px;padding-left:10px}.current-note .note-voice{font-size:11px}}

/* A brief invitation, anchored to the audio control after the first silent gesture. */
.play-group{position:relative}
.listening-hint{position:absolute;left:0;bottom:calc(100% + 18px);z-index:25;width:235px;padding:12px 15px;border:1px solid #b6e1c94d;border-radius:10px;background:#192620f5;box-shadow:0 8px 28px #0005;color:#d6eddf;font-size:11px;line-height:1.6;font-weight:400;letter-spacing:.1px;pointer-events:none;opacity:0;transform:translateY(5px);transition:opacity .4s,transform .4s}
.listening-hint:after{content:'';position:absolute;bottom:-5px;left:17px;width:8px;height:8px;background:#192620;border-right:1px solid #b6e1c94d;border-bottom:1px solid #b6e1c94d;transform:rotate(45deg)}
.listening-invitation .listening-hint{opacity:1;transform:translateY(0)}
.listening-invitation :is(#quickPlay,.mobile-play){animation:listening-halo 2.8s ease-out 3;box-shadow:0 0 0 3px #b6e1c933,0 0 25px #b6e1c926}
@keyframes listening-halo{0%,100%{box-shadow:0 0 0 3px #b6e1c933,0 0 25px #b6e1c926}55%{box-shadow:0 0 0 11px #b6e1c900,0 0 35px #b6e1c955}}
.mobile-dock>.listening-hint{left:max(12px,env(safe-area-inset-left));bottom:calc(100% + 12px);width:min(235px,calc(100vw - 24px))}
.mobile-dock>.listening-hint:after{left:35px}
@media(prefers-reduced-motion:reduce){.listening-invitation :is(#quickPlay,.mobile-play){animation:none}}

.mini-row #voiceDelayBeats{width:170px;max-width:58%;font-size:11px}

/* Saved-session loops use the hero area for the piece and composer. */
.playback-hero[hidden]{display:none}
body.loop-playback #intro,body.loop-playback #performanceHint,body.loop-playback #gestureHud{display:none}
body.loop-playback .playback-hero{display:block;right:7%;opacity:1}
.playback-hero p{overflow-wrap:anywhere;font-size:clamp(28px,3.8vw,58px)}
body.loop-playback .playback-hero>span{display:block;overflow-wrap:anywhere;font-size:clamp(12px,1.3vw,16px);line-height:1.6;color:#c3b4e2}

/* Session workspace: the document and transport remain in sight. */
.session-header{display:flex;align-items:center;gap:18px;padding:16px 28px;border-bottom:1px solid #353a3c;background:#171b1e}.session-identity{flex:1;min-width:0}.session-identity label{display:block;color:#a9bcae;letter-spacing:1.4px;font-size:9px;line-height:1.5}.session-identity input{display:block;width:100%;max-width:600px;background:transparent;border:1px solid transparent;border-radius:5px;color:#f3eee7;font:500 21px Manrope,sans-serif;padding:4px 0}.session-identity input:focus{border-color:#a9c9b5;outline:none;padding-left:6px}.session-identity>span{font-size:10px;color:#a2afa5}.session-header>button,.home-actions>button,.take-tray-heading button{border:1px solid #454b49;border-radius:7px;padding:10px 13px;color:#d5ddd5;font-size:11px}.session-header>button:last-child{background:#bfd9c5;color:#1b3025;border-color:#bfd9c5}.session-home-panel{max-width:1060px;margin:65px auto;padding:0 28px}.session-home-panel h1{font:400 clamp(40px,6vw,72px)/1.08 Manrope,sans-serif;letter-spacing:-3px;color:#eceae2;margin:20px 0}.session-home-panel h1 em{font-family:Georgia,serif;font-weight:400;color:#bdd4c3}.session-home-panel>p{font-size:15px;line-height:1.8;color:#a9b1ac}.home-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 60px}.home-actions .session-primary{background:#bedbc7;color:#183026;border-color:#bedbc7;font-size:14px;padding:15px 24px}.session-home-panel h2{font-size:18px;font-weight:400;display:flex;justify-content:space-between;align-items:center}.session-home-panel h2 small{font-size:11px;color:#8b9a91}#recentSessions{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0}.recent-session{text-align:left;border:1px solid #3a4540;border-radius:10px;background:#1b211e;padding:22px;display:grid;gap:14px;color:#e0e4dc}.recent-session strong{font-size:16px;font-weight:500}.recent-session span,.recent-session small{font-size:11px;color:#a8b6ac}.recent-session:hover{border-color:#9db8a5;background:#222d26}.session-home .workspace,.session-home .mobile-dock{display:none!important}.session-notice{padding:14px 28px;color:#eed5ab;background:#362e20;font-size:13px;line-height:1.6;margin:0}.session-capture{margin-top:14px;border:1px solid #454941;background:#1d221e;border-radius:10px;padding:14px 16px}.capture-controls{display:flex;gap:8px;align-items:center}.capture-controls button{min-height:40px;padding:9px 14px;border:1px solid #566054;border-radius:6px;font-size:12px;color:#dce6db;white-space:nowrap}.capture-controls .capture-record{background:#e7ada7;border-color:#e7ada7;color:#3c201e;font-weight:600}.capture-controls button:disabled{opacity:.45}.capture-controls output{margin-left:auto;font:18px ui-monospace,monospace;color:#d6dfd4;font-variant-numeric:tabular-nums}.loop-control{display:flex;align-items:center;gap:6px;font-size:11px}.session-capture>p{margin:10px 0 6px;font-size:11px;color:#afc0ad;min-height:16px}.session-capture>progress{display:block;width:100%;height:3px;accent-color:#c5dfb8}.capture-options summary{font-size:10px;color:#aab6a7;cursor:pointer;padding-top:12px}.capture-options summary span{color:#859181}.capture-options section{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;border-top:1px solid #414b3f;margin-top:12px;padding-top:12px}.capture-options h3,.capture-options .helper,.capture-options .record-auto,.capture-options .record-actions{grid-column:1/-1}.capture-options h3{margin:0;font-size:12px}.capture-options label{font-size:11px}.capture-options input[type=text],.capture-options input[type=number]{background:#111713;border:1px solid #495545;color:#e1e9df;border-radius:4px;padding:8px;min-width:0;width:100%}.capture-options #recordStart{margin:0}.capture-options .helper{font-size:11px;margin:4px 0}.capture-options .record-auto{margin-top:5px}.take-tray{margin-top:16px;border-top:1px solid #353c37;padding-top:12px}.take-tray-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.take-tray-heading h2{font-size:13px;font-weight:500;color:#d3dace;margin:0}.take-tray-heading>div{display:flex;gap:6px}.take-tray-heading button{padding:7px 9px;font-size:10px}.take-tray-heading button:disabled{opacity:.4}.take-empty{color:#96a391;font-size:12px;line-height:1.6;margin:18px 0}.session-take{text-align:left;flex:0 0 172px;padding:13px 16px;border:1px solid #424b3e;border-radius:7px;color:#d6e1ce;display:grid;gap:7px;background:#1b211b}.session-take span{font-size:9px;letter-spacing:1.5px;color:#99aa92}.session-take strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.session-take small{font-size:10px;color:#a7b49f}.session-take.selected{border-color:#abc399;background:#2a3526}#sessionTakes{display:flex;gap:10px;overflow-x:auto;padding:12px 0}.record-columns{grid-template-columns:1fr}.record-columns section+section{border:0;padding:0}.session-header button:focus-visible,.session-capture button:focus-visible,.session-take:focus-visible,.recent-session:focus-visible{outline:2px solid #d1e4c6;outline-offset:3px}.session-home #recordLauncher{display:none}.session-home #togglePanel{display:none}.session-home #fullscreen{display:none}body.zen .session-header,body.zen .take-tray{display:none}body.zen .session-capture{position:fixed;bottom:12px;left:12px;right:12px;z-index:30;background:#171f19ee}body.zen .capture-options{display:none}.session-capture #recordName,.session-capture label[for=recordName],.session-capture #recordStart{display:none}
@media(min-width:721px){.workspace{min-height:calc(100dvh - 180px)}.canvas-wrap{min-height:330px}.session-capture{position:sticky;bottom:10px;z-index:12}.session-header{position:relative;z-index:13}}
@media(max-width:720px){.session-header{padding:12px;gap:8px;flex-wrap:wrap}.session-identity{order:-1;flex-basis:100%}.session-identity input{font-size:19px}.session-header>button{font-size:11px;min-height:40px;flex:1;padding:8px}.session-home-panel{margin:30px auto;padding:0 20px}.session-home-panel h1{letter-spacing:-1.5px}.home-actions{margin-bottom:35px}.session-capture{position:fixed;bottom:76px;left:8px;right:8px;margin:0;z-index:21;padding:10px;background:#1a231df5;backdrop-filter:blur(15px)}.capture-controls{gap:5px}.capture-controls button{padding:8px 10px;font-size:12px;min-height:44px}.capture-controls output{font-size:12px}.loop-control{font-size:10px;gap:3px}.session-capture>p{font-size:10px;margin:6px 0}.capture-options summary{font-size:11px;padding-top:7px}.capture-options[open]{max-height:65dvh;overflow:auto}.capture-options section{padding-bottom:10px}.take-tray{margin-bottom:12px}.artwork{padding-bottom:170px}.canvas-wrap{height:360px;min-height:300px}.take-tray-heading button{min-height:40px}.session-home .session-capture{display:none}.session-home{padding-bottom:0}body.zen .session-capture{bottom:8px}.session-notice{padding:12px;font-size:12px}.session-capture .record-actions button{font-size:12px}.session-capture .record-auto{font-size:12px}.session-home .topbar{min-height:66px;height:auto}}
.session-header~.workspace .transport>.play-group{display:none}.session-header~.workspace .record-bar{display:none}.session-capture .tempo{margin-left:8px;min-width:60px}.session-capture .tempo button{padding:0;min-height:24px;border:0;font-size:17px}.session-capture .tempo>span{font-size:8px}.session-capture .tempo strong{font-size:15px}.capture-controls{flex-wrap:wrap}.session-capture .tempo>div{gap:6px}@media(max-width:720px){.session-capture .tempo{display:none}.capture-controls .loop-control{margin-left:auto}.capture-controls output{margin-left:0}.session-capture .capture-options section{grid-template-columns:1fr}.session-capture .capture-options section>*{grid-column:1}.session-capture .record-actions{display:flex}.session-capture .tempo button{min-height:24px}}
.session-loading .workspace{visibility:hidden}.session-capture{margin-top:0;margin-bottom:14px;flex-shrink:0}#quickLive{font-size:10px;border-style:dashed;color:#afc6aa}#quickUseSetup{color:#e3d0fa;border-color:#8e75a5}.session-header{position:sticky;top:0;z-index:24}@media(min-width:721px){.session-capture{top:100px;bottom:auto}.capture-options[open]{max-height:65vh;overflow:auto}}@media(max-width:720px){.session-header{position:relative}.session-capture{margin-bottom:0}.session-capture #quickLive{order:4;min-height:30px}.session-capture #quickUseSetup{order:4;min-height:30px}}body.zen .session-capture{top:auto}

/* Zen keeps performance essentials at the edges, with a dedicated open canvas.
   Flow rows reserve actual space: wrapping controls can never cover Exit Zen. */
body.zen{overflow:hidden;padding:0}
body.zen .workspace{height:100dvh;min-height:0}
body.zen .artwork{height:100%;min-height:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0}
body.zen .session-capture{position:relative;inset:auto;grid-row:1;width:100%;max-width:920px;justify-self:center;margin:0;padding:8px 12px;border-radius:0 0 10px 10px;z-index:3;background:#171f19f2}
body.zen .capture-controls{gap:6px}
body.zen .capture-controls button{min-height:40px;padding:8px 12px}
body.zen .session-capture>p{margin:5px 0;font-size:10px;min-height:0}
body.zen .session-capture .tempo{display:block}
body.zen .session-capture .tempo button{min-height:32px;min-width:28px}
body.zen .canvas-wrap{grid-row:2;height:auto;min-height:0;width:100%}
body.zen .canvas-bottom{inset:0;display:block;pointer-events:none}
body.zen .canvas-bottom button,body.zen .canvas-bottom input,body.zen .palette-cycle{pointer-events:auto}
body.zen .canvas-tools{display:contents}
body.zen #zen{position:absolute;top:12px;right:12px;margin:0;min-height:44px;padding:10px 14px;background:#10161deb;color:#eeeef0}
body.zen #clear{display:flex;position:absolute;right:12px;bottom:12px;min-height:44px;padding:10px 12px;border:1px solid #ffffff20;border-radius:6px;background:#10161deb;color:#c6cbd2}
body.zen .palette-controls{display:flex;position:absolute;left:12px;bottom:12px;gap:8px;width:auto;max-width:calc(100% - 155px);padding:4px 8px;border:1px solid #ffffff20;border-radius:10px;background:#10161deb;pointer-events:auto}
body.zen .palette{display:flex;gap:2px}
body.zen .color{width:40px;height:40px}
body.zen .palette-hint{display:none}
body.zen .palette-cycle{font-size:11px;white-space:nowrap}
body.zen .transport{display:flex;grid-row:3;justify-self:center;width:100%;max-width:720px;min-height:0;margin:0;padding:8px 16px;border-radius:10px 10px 0 0;background:#151b20f2}
body.zen .transport>.play-group,body.zen .transport>.tempo{display:none}
body.zen .harmony-display{order:0;flex:1;width:100%;max-width:none;min-width:0;margin:0;padding:0;border:0;gap:12px}
body.zen .harmony-display .chord-sequence{justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;padding:3px}
body.zen .harmony-display .chord-chip{flex:1 0 52px;max-width:90px;height:40px;font-size:12px}
body.zen .current-note{flex:0 0 112px;min-height:48px;padding-left:12px}
body.zen .current-note .note-voice{color:#d2cbdc;font-size:11px}
body.zen .gesture-hud{top:12px;left:12px;max-width:calc(100% - 145px)}
body.zen .playback-hero{display:none}
@media(max-width:600px){
 body.zen .session-capture{padding:6px 8px}
 body.zen .capture-controls button{font-size:11px;padding:8px;min-height:44px}
 body.zen .capture-controls{gap:4px}
 body.zen .capture-controls output{font-size:12px}
 body.zen .session-capture .tempo{margin-left:auto;min-width:68px}
 body.zen .session-capture .tempo>span,body.zen .session-capture .tempo>small{display:none}
 body.zen .session-capture .tempo>div{margin:0}
 body.zen .palette-controls{max-width:calc(100% - 66px);gap:4px;flex-wrap:wrap}
 body.zen .palette-cycle{padding:0 4px;min-height:36px}
 body.zen #clear{width:44px;height:44px;font-size:0;justify-content:center;padding:10px}
 body.zen #clear svg{width:18px;height:18px}
 body.zen .transport{padding:5px 8px}
 body.zen .current-note{flex-basis:90px}
 body.zen .harmony-display{gap:8px}
}
@media(max-height:500px){
 body.zen .session-capture>p{display:none}
 body.zen .session-capture{padding:4px 8px}
 body.zen .transport{padding:3px 12px}
 body.zen .palette-controls{padding:0 4px}
}
/* Tempo remains available beside the musical readout on every screen size. */
body.zen .transport{max-width:820px;flex-wrap:nowrap;gap:10px}
body.zen .transport>.tempo{display:block;min-width:76px}
body.zen .transport>.tempo button{min-width:28px;min-height:40px}
body.zen .transport>.tempo>span,body.zen .transport>.tempo>small{display:none}
body.zen .transport>.tempo>div{gap:3px;margin:0}
@media(max-width:600px){body.zen .current-note{flex-basis:76px;padding-left:8px}body.zen .transport{gap:6px}body.zen .transport>.tempo{min-width:74px}}

/* Independent zen row handles belong to the canvas, so they remain reachable
   when either row is removed from the grid. Audio and recording keep running. */
.zen-row-toggle{display:none}
body.zen .zen-row-toggle{position:absolute;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;max-width:calc(100% - 280px);padding:7px 12px;border:1px solid #ffffff25;background:#10161deb;color:#c6cbd2;font-size:10px;line-height:1.4;white-space:nowrap;touch-action:manipulation}
body.zen .zen-row-toggle:hover{background:#202b33;color:#fff;border-color:#b6e1c966}
body.zen .zen-row-toggle span{font-size:16px;line-height:1}
body.zen .zen-transport-toggle{top:0;border-top:0;border-radius:0 0 8px 8px}
body.zen .zen-harmony-toggle{bottom:0;border-bottom:0;border-radius:8px 8px 0 0}
body.zen.zen-transport-collapsed .session-capture{display:none}
body.zen.zen-harmony-collapsed .transport{display:none}
/* Leave the palette and Clear canvas a separate lane above the bottom handle. */
body.zen .palette-controls,body.zen #clear{bottom:46px}
@media(max-width:600px){body.zen .zen-row-toggle{max-width:calc(100% - 32px);min-height:44px;padding:9px 12px}body.zen .zen-transport-toggle{left:12px;transform:none;max-width:calc(100% - 130px)}body.zen .gesture-hud{top:52px}body.zen .palette-controls,body.zen #clear{bottom:52px}}

.share-sign-in{padding:18px;border:1px solid #79618d;border-radius:8px;background:#b7a0ff0a;margin:12px 0}.share-sign-in h4{font-size:16px;font-weight:500;color:#e3d5eb;margin:0 0 8px}.share-sign-in .outline-button{display:inline-block;width:auto;margin:10px 10px 0 0;text-decoration:none}.community-dialog button:disabled{cursor:default}

/* Default workspace gives the living canvas the full height of the left column.
   Transport shares the controls column; takes open only when they are needed. */
.control-rail{min-width:0}
.take-tray>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:38px;cursor:pointer;color:#d3dace;font-size:12px;list-style:none}
.take-tray>summary::-webkit-details-marker{display:none}
.take-tray>summary:after{content:'＋';font-size:18px;color:#aab6a7}
.take-tray[open]>summary:after{content:'−'}
.take-tray>summary span{margin-left:auto;font-size:10px;color:#96a391}
.take-tray-heading{justify-content:flex-end}
.take-tray>summary:focus-visible{outline:2px solid #b6e1c9;outline-offset:2px;border-radius:4px}
@media(min-width:721px) and (min-height:501px),(min-width:1001px),(min-width:721px) and (pointer:fine){
 body:not(.zen) .topbar{height:64px}
 body:not(.zen) .session-header{padding:10px 24px;gap:16px}
 body:not(.zen) .session-identity input{font-size:18px;padding:2px 0}
 body:not(.zen):not(.session-home){height:100dvh;display:flex;flex-direction:column}
 body:not(.zen) .topbar,body:not(.zen) .session-header{flex-shrink:0}
 body:not(.zen) .workspace{height:auto;flex:1;min-height:500px;grid-template-rows:minmax(0,1fr)}
 body:not(.zen) .artwork{padding:14px 18px 0;min-height:0;height:100%;overflow:auto;scrollbar-width:thin}
 body:not(.zen) .canvas-wrap{height:auto;min-height:280px;flex:1 0 280px}
 body:not(.zen) .transport{margin-top:10px;min-height:70px;padding:8px 12px;flex-wrap:nowrap;flex-shrink:0;gap:10px}
 body:not(.zen) .harmony-display{flex:1;flex-basis:auto;max-width:none;order:0;border:0;margin:0;padding:0;gap:10px}
 body:not(.zen) .harmony-display .chord-sequence{gap:5px;overflow-x:auto;justify-content:flex-start;scrollbar-width:thin;padding:3px}
 body:not(.zen) .harmony-display .chord-chip{flex:1 0 48px;max-width:90px;height:40px;font-size:12px}
 body:not(.zen) .chord-arrow{display:none}
 body:not(.zen) .current-note{flex:0 0 88px;padding-left:10px}
 body:not(.zen) .transport>.tempo{min-width:76px;flex-shrink:0}
 body:not(.zen) .transport>.tempo>span,body:not(.zen) .transport>.tempo>small{display:none}
 body:not(.zen) .transport>.tempo>div{margin:0;gap:2px}
 body:not(.zen) .transport>.tempo button{min-width:28px;min-height:40px}
 body:not(.zen) .take-tray{margin-top:8px;padding-top:0;flex-shrink:0}
 body:not(.zen) .take-tray[open] #sessionTakes{max-height:150px;overflow:auto}
 body:not(.zen) .art-footer{min-height:28px;flex-shrink:0}
 body:not(.zen) .control-rail{display:flex;flex-direction:column;min-height:0;height:100%;border-left:1px solid var(--line);background:var(--panel)}
 body:not(.zen) .control-rail>.session-capture{position:relative;inset:auto;margin:14px 12px 0;padding:12px;flex-shrink:0}
 body:not(.zen) .control-rail .capture-controls{gap:6px}
 body:not(.zen) .control-rail .capture-controls button{padding:8px 10px;min-height:38px;font-size:11px}
 body:not(.zen) .control-rail .capture-controls output{font-size:15px}
 body:not(.zen) .control-rail .capture-options[open]{max-height:35dvh;overflow:auto}
 body:not(.zen) .control-rail .capture-options section{grid-template-columns:1fr}
 body:not(.zen) .control-rail .capture-options section>*{grid-column:1}
 body:not(.zen) .control-rail>.panel{height:auto;max-height:none;min-height:0;flex:1;border:0}
 body:not(.zen) .panel-heading{margin-bottom:14px}
 body:not(.zen) .panel-navigation{padding-top:18px}
 body.panel-hidden:not(.zen) .control-rail{display:none}
 body.panel-hidden:not(.zen) .artwork>.session-capture{position:relative;inset:auto;margin:0 0 10px;padding:8px 12px}
 body.panel-hidden:not(.zen) .artwork>.session-capture .capture-options{position:relative}
}
body.zen .control-rail{display:none}
@media(max-width:720px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
 .control-rail{display:contents}
 body:not(.zen) .artwork{display:flex;flex-direction:column}
 body:not(.zen) .take-tray{order:2;margin-top:10px;padding-top:0}
 body:not(.zen) .art-footer{order:3}
 body:not(.zen) .transport{margin-top:10px}
}

/* Keep the shared track and autoplay invitation visible in Zen view too. */
body.zen #sharedPreview:not([hidden]){display:flex;position:relative;flex-shrink:0}#previewStatus{display:block;color:var(--mint);font-size:12px;margin-top:5px}#previewStatus:empty{display:none}

/* Shared discoveries use the same little generative sleeve wherever they appear. */
.home-community{margin:0 0 52px;padding-top:28px;border-top:1px solid #35423d}.home-community-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.home-community-heading h2{font:400 30px Manrope,sans-serif;letter-spacing:-1px;margin:10px 0}.home-community-heading p{font-size:13px;line-height:1.7;color:#a9b1ac;margin:0}.home-community-heading>button,.home-community>button{border:1px solid #4b6056;border-radius:6px;padding:11px 14px;color:#c8dfd1;white-space:nowrap;font-size:12px;min-height:44px}.home-community-status{font-size:12px;line-height:1.6;color:#9aaa9f;min-height:20px;margin:18px 0}.home-community-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}.home-track{min-width:0}.home-track-cover{aspect-ratio:1;overflow:hidden;border-radius:8px;background:#141a20;border:1px solid #ffffff12}.home-track-cover svg,.track-cover svg{display:block;width:100%;height:100%}.home-track-info{padding:14px 0 12px}.home-track h3{font:500 16px/1.4 Manrope,sans-serif;color:#e7e7df;margin:0 0 4px;overflow-wrap:anywhere}.home-track p{font-size:12px;line-height:1.5;color:#b2c2b8;margin:0 0 6px;overflow-wrap:anywhere}.home-track-info>span{font-size:10px;color:#899c90}.home-track-actions{display:flex;gap:8px}.home-track-actions button{flex:1;border:1px solid #4a6054;border-radius:6px;min-height:44px;padding:10px 8px;font-size:12px;color:#c4dbc9}.home-track-actions button:first-child{background:#bdd4c318;color:#d8ecdf}.home-track-actions button:hover,.home-community button:hover{background:#bdd4c32c;border-color:#91b29c}.home-track-actions button:disabled{opacity:.5;cursor:wait}.home-community button:focus-visible{outline:2px solid #b7a0ff;outline-offset:4px}.community-track{grid-template-columns:22px 64px minmax(0,1fr) auto}.track-cover{width:64px;height:64px;overflow:hidden;border-radius:5px}.home-community-tracks[aria-busy=true]{opacity:.6}
@media(max-width:720px){.home-community-tracks{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.home-community-heading{align-items:flex-start}.home-community-heading h2{font-size:25px}.home-community-heading p{font-size:12px}.home-community-heading>button{font-size:11px;padding:9px}.home-track h3{font-size:14px}.home-track-actions{gap:5px}.home-track-actions button{font-size:11px;padding:8px 5px}.community-track{grid-template-columns:20px 52px minmax(0,1fr)}.track-cover{width:52px;height:52px}.community-track .track-actions{grid-column:2/-1}}
@media(max-width:380px){.home-community-heading{flex-direction:column;gap:10px}.home-community-tracks{grid-template-columns:1fr}}

/* The home tagline carries the human authorship promise beside the musical headline. */
.session-home-panel>p.home-tagline{font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:#bdd4c3;margin:0 0 22px}
#intro{right:7%}#intro p{font-size:clamp(28px,3.3vw,50px)}
@media(max-width:720px){#intro p{font-size:clamp(26px,6.5vw,40px);letter-spacing:-1px}}

/* A slow wash of Original glow colors welcomes listeners to the home page. */
body.session-home{position:relative;isolation:isolate;background:#101316}
body.session-home::before,body.session-home::after{content:"";position:fixed;inset:-18%;z-index:-1;pointer-events:none;background-repeat:no-repeat;will-change:transform}
body.session-home::before{
 background-image:radial-gradient(ellipse at 16% 22%,#b7a0ff38,transparent 48%),radial-gradient(ellipse at 86% 35%,#73e2d033,transparent 49%),radial-gradient(ellipse at 52% 90%,#ff9e9e2b,transparent 48%);
 animation:home-color-drift 38s ease-in-out infinite alternate;
}
body.session-home::after{
 background-image:radial-gradient(ellipse at 82% 82%,#edca8229,transparent 46%),radial-gradient(ellipse at 38% 52%,#b7a0ff1c,transparent 45%);
 animation:home-color-drift 53s ease-in-out -19s infinite alternate-reverse;
}
@keyframes home-color-drift{
 0%{transform:translate3d(-4%,-3%,0) rotate(-5deg) scale(1)}
 50%{transform:translate3d(3%,4%,0) rotate(3deg) scale(1.06)}
 100%{transform:translate3d(5%,-2%,0) rotate(7deg) scale(1.02)}
}
@media(prefers-reduced-motion:reduce){body.session-home::before,body.session-home::after{animation:none;will-change:auto}}

/* Session cards keep opening and deletion as separate keyboard controls. */
.recent-session{position:relative;padding:0;gap:0;overflow:hidden}.recent-session-open{display:grid;gap:14px;padding:22px 50px 22px 22px;text-align:left;width:100%;min-width:0;color:inherit}.recent-session-open strong{overflow-wrap:anywhere}.recent-session-delete{position:absolute;top:12px;right:10px;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:8px;border:0;border-radius:6px;color:#aa9b96}.recent-session-delete svg{display:block;pointer-events:none}.recent-session-delete:hover{background:#49302c;border-color:#bd8278}.recent-session-open:focus-visible,.recent-session-delete:focus-visible{outline:2px solid #d1e4c6;outline-offset:-4px}

/* The invitation follows the current session transport, including rail and Zen layouts. */
.listening-play-control{position:relative;display:inline-flex;flex-shrink:0}
.listening-play-control>.listening-hint{top:calc(100% + 12px);bottom:auto;left:0;width:225px;max-width:calc(100vw - 40px);text-align:left;white-space:normal}
.listening-play-control>.listening-hint:after{top:-5px;bottom:auto;left:18px;transform:rotate(225deg)}
.listening-invitation #quickPlay{border-color:var(--mint);color:#d6eddf;background:#b6e1c91a}
body.zen.listening-invitation.zen-transport-collapsed .zen-transport-toggle{animation:listening-halo 2.8s ease-out 3;border-color:var(--mint)}
body.zen.listening-invitation.zen-transport-collapsed .zen-transport-toggle:after{content:'Show transport, then press Play to hear your flow';position:absolute;top:calc(100% + 10px);left:0;padding:10px 14px;max-width:calc(100vw - 40px);border:1px solid #b6e1c94d;border-radius:8px;background:#192620f5;color:#d6eddf;white-space:normal;pointer-events:none}
@media(max-width:720px),(max-width:1000px) and (max-height:500px) and (pointer:coarse){
 body:not(.zen) .listening-play-control>.listening-hint{display:none}
 body:not(.zen).listening-invitation #quickPlay{animation:none;box-shadow:none;border-color:#454b49;background:transparent;color:inherit}
}
@media(prefers-reduced-motion:reduce){body.zen.listening-invitation.zen-transport-collapsed .zen-transport-toggle{animation:none;box-shadow:0 0 0 3px #b6e1c933}}

.arp-note.chord-tone{border-color:#b7a0d6;color:#e1cdef}.arp-chord-mark{display:block;font-size:10px;line-height:5px;margin-top:5px;color:#c6a7e6}.arp-note.active .arp-chord-mark{color:#24192f}

.sleep-veil{position:absolute;inset:0;background:#000;opacity:var(--sleep-dim,0);pointer-events:none;z-index:5}.zen-sleep{display:none;align-items:center;gap:8px;font-size:11px;color:var(--muted)}body.zen .zen-sleep{display:flex}.zen-sleep select{width:112px;font-size:11px;padding:5px 8px}.drift-controls select{margin:8px 0 16px}.drift-controls .option-row{margin-bottom:16px}

.sleep-notice{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:20;padding:9px 16px;border:1px solid #ffffff24;border-radius:24px;background:#111a1ee8;color:#dce5df;font-size:12px;pointer-events:none}.sleep-notice:empty{display:none}
body.zen .zen-sleep{position:absolute;right:12px;bottom:116px;pointer-events:auto;padding:6px 10px;border:1px solid #ffffff24;border-radius:8px;background:#10161deb;color:#cdd7d1}body.zen .zen-sleep select{pointer-events:auto;margin:0}body.zen .sleep-notice{top:76px}

.zen-energy{display:none;align-items:center;gap:8px;font-size:11px;color:var(--muted)}body.zen .zen-energy{display:flex;position:absolute;right:12px;bottom:160px;pointer-events:auto;padding:7px 10px;border:1px solid #ffffff24;border-radius:8px;background:#10161deb}.zen-energy input[type=range]{width:94px;margin:0}.zen-energy output{width:28px}

/* First run: the instrument occupies the room; controls remain one tap away. */
.intent-picker{display:flex;align-items:center}.intent-picker select{min-width:90px;margin:0;padding:9px 12px;font-size:12px;background:#17201db8;border-color:#bfd9c52b}.begin-flow{border:1px solid #b6d9c955;background:#bfd9c5;color:#1b3025;border-radius:7px;padding:10px 15px;white-space:nowrap;font-size:12px}#togglePanel{display:flex;align-items:center;gap:7px;width:auto;padding:9px 12px;font-size:12px}.canvas-first:not(.zen):not(.presentation-mode) .topbar{position:fixed;inset:0 0 auto;z-index:25;background:linear-gradient(#10191de6,#10191d00);border:0}.canvas-first:not(.zen) .topbar .edition,.canvas-first:not(.zen) #communityLauncher,.canvas-first:not(.zen) #recordLauncher,.canvas-first:not(.zen) #help,.canvas-first:not(.zen) #fullscreen{display:none}.canvas-first:not(.zen) .workspace{height:100dvh;min-height:0}.canvas-first:not(.zen) .artwork{padding:0;height:100%;min-height:0}.canvas-first:not(.zen) .canvas-wrap{height:100%;min-height:0;border:0;border-radius:0}.canvas-first:not(.zen) .canvas-header,.canvas-first:not(.zen) .transport,.canvas-first:not(.zen) .session-capture,.canvas-first:not(.zen) .art-footer,.canvas-first:not(.zen) .zen-row-toggle,.canvas-first:not(.zen) .mobile-dock{display:none}.canvas-first:not(.zen) .canvas-bottom{bottom:22px}.canvas-first:not(.zen){padding:0}.canvas-first .intro{pointer-events:none}.present-strip{display:none}body.zen .artwork{display:block;padding:0;position:relative}body.zen .canvas-wrap{height:100dvh}body.zen .session-capture,body.zen .transport,body.zen .zen-row-toggle,body.zen .canvas-bottom,body.zen .gesture-hud{display:none!important}body.zen .present-strip{display:flex;position:absolute;z-index:15;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);gap:16px;align-items:center;max-width:calc(100% - 24px);padding:10px 14px;border:1px solid #bfd9c52b;border-radius:12px;background:#101b1ee8;backdrop-filter:blur(16px);transition:opacity .5s;opacity:1}body.zen .present-strip label,body.zen .present-strip .zen-energy,body.zen .present-strip .zen-sleep{position:static;display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;color:#cdd7d1;font-size:11px;white-space:nowrap;pointer-events:auto}body.zen .present-strip button{min-height:44px;padding:8px 12px;border:1px solid #bfd9c52b;border-radius:7px;font-size:12px;white-space:nowrap}body.zen .present-strip select{width:auto;min-width:75px;font-size:12px;margin:0;padding:7px;background:#17201d}body.zen.present-idle{cursor:none}body.zen.present-idle #fluid{cursor:none}body.zen.present-idle #cursor{display:none!important}.present-strip :focus-visible,.begin-flow:focus-visible,.intent-picker select:focus-visible{outline:2px solid #c5dfce;outline-offset:4px}@media(max-width:720px){.canvas-first .topbar{padding:14px 16px;gap:8px}.canvas-first .brand{font-size:24px}.canvas-first .header-actions{gap:6px}.begin-flow{font-size:11px;padding:10px}#togglePanel{padding:9px;font-size:11px}.intent-picker select{min-width:70px;padding:8px;font-size:11px}body.zen .present-strip{flex-wrap:wrap;justify-content:center;gap:8px 12px;width:max-content}body.zen .present-strip .zen-energy input{width:70px}}@media(prefers-reduced-motion:reduce){body.zen .present-strip{transition:none}}

.canvas-first.mobile-controls-open .control-rail{display:block}body.zen.present-idle .cursor{display:none!important}.canvas-first .artwork{overflow:hidden}

.canvas-first:not(.session-home) #sessionHeader,.canvas-first .take-tray{display:none}body.zen .art-footer{display:none!important}

.title-card{display:flex;align-items:center;gap:6px}.title-card input{width:150px;min-width:0;border:1px solid #ffffff24;border-radius:6px;background:#111820;color:#e6e7eb;padding:7px}.present-strip{flex-wrap:wrap;max-width:calc(100% - 24px)}.export-options{margin:14px 0;padding:14px;border:1px solid #ffffff20;border-radius:10px}.export-options summary{cursor:pointer;margin-bottom:12px}.export-options>button{margin-top:12px;width:100%}.exporting-media #fluid,.exporting-media #presentStrip,.exporting-media #controlRail{pointer-events:none}.exporting-media #presentStrip{opacity:0}

/* Zen shares presentation's intentional doorway; canvas input never opens it. */
body:not(.zen) .zen-controls-toggle{display:none}
body.zen .zen-controls-toggle{z-index:16;cursor:pointer}
body.zen .present-strip{bottom:calc(70px + env(safe-area-inset-bottom,0px));box-sizing:border-box;width:max-content;max-height:calc(100dvh - 100px);overflow-y:auto;flex-wrap:wrap;justify-content:center;opacity:1;transition:opacity .24s ease,display .24s allow-discrete}
body.zen .present-strip[hidden]{display:none;opacity:0}
body.zen .present-strip label{min-height:44px}
body.zen .present-strip .title-card{flex-wrap:wrap}
body.zen .present-strip input[type=text]{max-width:100%}
@starting-style{body.zen .present-strip{opacity:0}}
@media(max-width:450px){body.zen .present-strip{width:calc(100% - 24px);gap:8px 12px;padding:12px}body.zen .present-strip .title-card{flex:1 0 100%;justify-content:center}body.zen .present-strip .title-card input{flex:1;max-width:210px}}
@media(prefers-reduced-motion:reduce){body.zen .present-strip{transition:none}}