.rhythm-page{--paper:#f7f4ed;--ink:#29251f;--muted:#70695e;--line:#d6d0c5;background:var(--paper);color:var(--ink);font:13px/1.5 Arial,Helvetica,sans-serif}.rhythm-page *{box-sizing:border-box}.rhythm-page button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-text-fill-color:currentColor}.rhythm-page button:disabled{cursor:default;opacity:.35}.rhythm-page a{color:inherit;text-decoration:none}.rhythm-page svg{display:block}.rhythm-page button svg,.rhythm-back svg,.rhythm-drawer summary>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}.rhythm-page :focus-visible{outline:1.5px solid #846537;outline-offset:5px}.rhythm-header,.rhythm-main{width:calc(100% - 96px);max-width:1240px;margin:auto}.rhythm-header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.rhythm-back{display:flex;align-items:center;gap:16px;font-size:11px;min-height:44px}.rhythm-private,.rhythm-eyebrow{text-transform:uppercase;font-size:9px;letter-spacing:.14em;font-weight:400;color:var(--muted)}.rhythm-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding:32px 0 34px}.rhythm-intro .rhythm-eyebrow{margin:0 0 14px}.rhythm-intro h1{font:normal clamp(44px,5.3vw,72px)/1.04 var(--serif);letter-spacing:-.055em;margin:0}.rhythm-intro h1 em{font-weight:400}.rhythm-intro>p{font:18px/1.4 var(--serif);color:var(--muted);margin:0 0 5px}.rhythm-stage{display:grid;grid-template-columns:1.05fr 1fr;gap:5%;align-items:center;min-height:400px;padding-bottom:24px}.orbit-space{min-width:0}.rhythm-orbit{position:relative}.rhythm-orbit>svg{width:100%;height:auto;max-height:375px}.rhythm-orbit-top{position:absolute;top:12px;left:2%;right:2%;display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.orbit-track{fill:none;stroke:#cdc5b6;stroke-width:.8}.orbit-spoke{stroke:#d6cdbf;stroke-width:.6;stroke-dasharray:1 8}.orbit-note{fill:var(--paper);stroke:#a49a89;stroke-width:1;transition:fill .2s,r .15s,stroke-width .15s}.orbit-note.is-on{fill:var(--voice);stroke:var(--voice)}.orbit-note.is-playing{r:10;stroke:var(--paper);stroke-width:3}.orbit-halo{fill:none;stroke:var(--voice);stroke-width:.9;opacity:0;transition:opacity .1s}.orbit-halo.is-playing{opacity:.55}.orbit-center{fill:var(--paper);stroke:#d6cdbf;stroke-width:.8}#orbit-count{font:italic 24px var(--serif);fill:#6e6050}.orbit-caption{display:flex;flex-direction:column;align-items:center;gap:12px;min-height:48px;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}#rhythm-beat-dots{display:flex;gap:7px;align-items:center;min-height:8px}#rhythm-beat-dots>*{width:4px;height:4px;border-radius:50%;background:#c9c0b1;transition:background .1s,transform .1s}#rhythm-beat-dots>.is-current{background:var(--ink);transform:scale(1.7)}.rhythm-transport{display:flex;justify-content:center;margin-top:12px}.rhythm-page .rhythm-play{display:flex;align-items:center;justify-content:center;gap:12px;min-width:118px;min-height:46px;border:1px solid #8a8173;border-radius:40px;background:transparent;font-size:11px}.rhythm-play[aria-pressed=true],.rhythm-play:hover{background:var(--ink);color:var(--paper)}.rhythm-playground{min-width:0}.playground-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.playground-top>.rhythm-eyebrow{font-size:8px}.rhythm-page .rhythm-record{display:flex;align-items:center;gap:9px;padding:7px 12px;min-height:36px;border:1px solid var(--line);border-radius:30px;font-size:10px;white-space:nowrap}.record-dot{width:5px;height:5px;border-radius:50%;background:#b6ad9e}.rhythm-record[aria-pressed=true] .record-dot{background:#796252;box-shadow:0 0 0 3px #79625213}.rhythm-record[aria-pressed=true]{border-color:#aa9b89;background:#ede6da66}.rhythm-pads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rhythm-pad-card{min-width:0;position:relative;background:#eee8dd33;border:1px solid var(--line);transition:background .15s,border-color .15s,transform .15s}.rhythm-page .rhythm-pad{position:relative;width:100%;min-height:121px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 5px 8px;border:0;background:none}.rhythm-pad .pad-icon{height:30px;width:38px;stroke:var(--voice,#796252);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}.pad-name{font:normal 25px/1.15 var(--serif);letter-spacing:-.025em}.pad-hint{font:8px/1.35 Arial,sans-serif;color:var(--muted)}.rhythm-pad small{position:absolute;right:9px;top:7px;font:8px Arial;color:#938a7c}.rhythm-page .rhythm-pad-mute{display:block;font:8px Arial,sans-serif;min-height:29px;width:100%;padding:7px 3px;text-align:center;color:var(--muted);border-top:1px solid #d6d0c555}.rhythm-pad-card.is-present{background:color-mix(in srgb,var(--voice,#796252) 5%,var(--paper))}.rhythm-pad-card.is-playing,.rhythm-pad-card:has(.rhythm-pad.is-playing){background:color-mix(in srgb,var(--voice,#796252) 15%,var(--paper));border-color:var(--voice,#796252);transform:translateY(-2px)}.rhythm-pad:active{transform:scale(.97)}.rhythm-pad-card.is-muted{background:transparent}.rhythm-pad-card.is-muted .pad-icon,.rhythm-pad-card.is-muted .pad-name{opacity:.4}.rhythm-pad-card.is-muted .rhythm-pad-mute{color:var(--ink)}.rhythm-pad-help{margin:17px 0 3px;font:italic 14px/1.4 var(--serif);color:var(--ink)}#rhythm-status{font-size:10px;color:var(--muted);margin:0;min-height:26px;line-height:1.5}.rhythm-quick-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:8px;border-top:1px solid var(--line);padding-top:5px}.rhythm-quick-actions>span{font-size:8px;color:var(--muted)}.rhythm-quick-actions>div{display:flex;align-items:center;gap:24px}.rhythm-quick-actions button{display:flex;align-items:center;gap:10px;min-height:40px;padding:7px 0;font-size:10px}.rhythm-starting-points{display:flex;align-items:center;justify-content:space-between;gap:40px;border-top:1px solid var(--line);padding:24px 0}.rhythm-starting-points>.rhythm-eyebrow{font-size:8px}.rhythm-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;flex:1;max-width:740px}.rhythm-presets button{text-align:left;padding:6px 0;min-height:50px}.rhythm-presets button>span{display:block;font:26px/1.2 var(--serif);letter-spacing:-.025em}.rhythm-presets button>small{display:block;margin-top:4px;font:9px Arial;color:var(--muted)}.rhythm-presets button:hover>span{font-style:italic}.rhythm-drawer{border-top:1px solid var(--line)}.rhythm-drawer summary{display:flex;justify-content:space-between;align-items:center;gap:30px;cursor:pointer;list-style:none;padding:21px 0;min-height:64px;font-size:12px}.rhythm-drawer summary::-webkit-details-marker{display:none}.rhythm-drawer summary small{color:var(--muted);font-size:9px;margin-left:22px}.rhythm-drawer[open] summary>svg{transform:rotate(45deg)}.rhythm-settings-content{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:15px 0 12px}.rhythm-dials{display:flex;gap:50px;flex:1;max-width:600px}.rhythm-dials label{width:50%}.rhythm-dials label>span{display:flex;align-items:baseline;gap:7px;font-size:10px;color:var(--muted);margin-bottom:10px}.rhythm-dials output{margin-left:auto;color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}.rhythm-dials small{font-size:8px}.rhythm-dials input{width:100%;height:25px;margin:0;cursor:pointer;accent-color:#796252}.rhythm-length{display:flex;align-items:center;gap:24px;font-size:10px}.rhythm-length>span{color:var(--muted)}.rhythm-length button{min-height:44px;padding:10px 0}.rhythm-length button[aria-pressed=true]{text-decoration:underline;text-underline-offset:7px}.rhythm-help{color:var(--muted);font-size:9px;margin:5px 0 24px}.rhythm-score-scroll{overflow-x:auto;padding:8px 4px 10px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:#c2b9aa transparent}.rhythm-step-labels,.rhythm-voice-row{display:grid;grid-template-columns:86px repeat(var(--steps,8),minmax(0,1fr));gap:9px;align-items:center}.rhythm-step-labels{font-size:8px;text-align:center;color:var(--muted);margin-bottom:12px}.rhythm-voice-row{margin-bottom:10px}.rhythm-score[data-length='16']{min-width:780px}.rhythm-layer-label{display:flex;align-items:center;justify-content:space-between;gap:7px;position:sticky;left:0;z-index:1;background:var(--paper)}.rhythm-step-labels>span:first-child{position:sticky;left:0;z-index:1;background:var(--paper);height:100%}.rhythm-layer-mute{display:inline-flex;align-items:center;gap:8px;padding:8px 0;min-height:40px;font-size:10px;white-space:nowrap;text-align:left}.rhythm-layer-mute:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--voice)}.rhythm-layer-remove{font-size:14px;color:var(--muted);padding:6px;min-height:36px;min-width:22px}.rhythm-note{height:44px;border:1px solid var(--line);background:transparent;border-radius:2px;position:relative;display:grid;place-items:center;transition:background .15s,border-color .15s}.rhythm-note:after{content:'';width:4px;height:4px;border-radius:50%;background:#b8b0a1}.rhythm-note[aria-pressed=true]{background:color-mix(in srgb,var(--voice) 9%,transparent);border-color:var(--voice)}.rhythm-note[aria-pressed=true]:after{width:8px;height:8px;background:var(--voice)}.rhythm-note[data-current=true]:before{content:'';position:absolute;bottom:-4px;left:calc(50% - 6px);width:12px;height:1px;background:var(--ink)}.rhythm-note.is-playing{background:color-mix(in srgb,var(--voice) 25%,transparent)}.rhythm-voice-row.is-muted .rhythm-note{opacity:.4}.rhythm-voice-row.is-muted .rhythm-layer-mute{text-decoration:line-through;color:var(--muted)}.rhythm-scroll-hint{display:none}.rhythm-editor-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 0 22px}.rhythm-editor-foot p{font-size:9px;color:var(--muted)}.rhythm-editor-foot button{font-size:10px;min-height:44px;padding:8px 0}.rhythm-footer{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:25px 0 30px;border-top:1px solid var(--line)}.rhythm-footer>span{font:italic 17px var(--serif);color:var(--muted)}.rhythm-footer p{font-size:9px;color:var(--muted);margin:0}.rhythm-skip{position:fixed;top:12px;left:12px;transform:translateY(-200%);z-index:10;background:var(--paper);padding:12px;font-size:12px}.rhythm-skip:focus{transform:none}
@media(max-width:950px){.rhythm-header,.rhythm-main{width:calc(100% - 48px)}.rhythm-stage{gap:4%;grid-template-columns:1fr 1.1fr}.rhythm-pad .pad-icon{height:24px;width:31px}.rhythm-page .rhythm-pad{min-height:104px}.pad-name{font-size:23px}.playground-top>.rhythm-eyebrow{max-width:90px;line-height:1.5}.rhythm-pads{gap:7px}.rhythm-presets{gap:24px}.rhythm-starting-points{gap:28px}.rhythm-dials{gap:28px}}
@media(max-width:650px){.rhythm-header,.rhythm-main{width:calc(100% - 40px)}.rhythm-header{height:66px}.rhythm-intro{padding:25px 0 10px;display:block}.rhythm-intro h1{font-size:clamp(40px,10vw,58px)}.rhythm-intro .rhythm-eyebrow{font-size:8px;margin-bottom:11px}.rhythm-intro>p{font-size:14px;margin:12px 0 0}.rhythm-intro>p br{display:none}.rhythm-stage{grid-template-columns:1fr;gap:16px;padding-bottom:22px}.rhythm-orbit>svg{max-height:205px}.rhythm-orbit-top{top:8px;font-size:8px}.orbit-caption{min-height:35px;gap:8px;font-size:8px}.rhythm-transport{margin-top:10px}.rhythm-page .rhythm-play{min-height:39px;min-width:105px}.playground-top{margin:0 0 12px}.playground-top>.rhythm-eyebrow{max-width:none;font-size:8px}.rhythm-page .rhythm-pad{min-height:96px;padding-top:13px}.rhythm-pads{gap:8px}.pad-name{font-size:23px}.pad-hint{font-size:7px}.rhythm-page .rhythm-pad-mute{min-height:28px}.rhythm-pad-help{font-size:13px;margin-top:13px}.rhythm-quick-actions{margin-top:4px}.rhythm-starting-points{display:block;padding:21px 0}.rhythm-presets{gap:18px;margin-top:12px}.rhythm-presets button>span{font-size:24px}.rhythm-presets button>small{font-size:8px;line-height:1.5}.rhythm-drawer summary{padding:18px 0;min-height:59px;font-size:11px}.rhythm-drawer summary small{font-size:8px;margin-left:10px}.rhythm-settings-content{flex-direction:column;align-items:stretch;gap:14px;padding-top:5px}.rhythm-dials{max-width:none}.rhythm-length{justify-content:flex-start;gap:28px}.rhythm-step-labels,.rhythm-voice-row{grid-template-columns:58px repeat(var(--steps,8),minmax(0,1fr));gap:5px}.rhythm-score[data-length='16']{min-width:650px}.rhythm-layer-mute{font-size:9px;gap:4px}.rhythm-layer-remove{padding:3px;min-width:15px}.rhythm-layer-label{gap:1px;padding-right:3px}.rhythm-note{height:38px}body:has(#rhythm-score[data-length='16']) .rhythm-scroll-hint{display:block;font-size:9px;color:var(--muted);margin:3px 0 12px}.rhythm-editor-foot p{max-width:220px;font-size:8px}.rhythm-editor-foot button{font-size:9px}.rhythm-footer{gap:24px;align-items:flex-start;padding-top:23px}.rhythm-footer>span{font-size:14px;line-height:1.3;max-width:160px}.rhythm-footer p{font-size:8px;line-height:1.5;max-width:130px;text-align:right}}
@media(prefers-reduced-motion:reduce){.rhythm-page *{transition:none!important;animation:none!important}.rhythm-pad:active,.rhythm-pad-card.is-playing,.rhythm-pad-card:has(.rhythm-pad.is-playing){transform:none}.orbit-note.is-playing{r:6}.orbit-halo{display:none}#rhythm-beat-dots>.is-current{transform:none}}

/* Performance edition. Paper, ink and a playable field. */
.performance-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:18px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.performance-bar .rhythm-transport{margin:0}.performance-bar .rhythm-play{min-width:95px;min-height:40px}.master-volume{display:flex;align-items:center;gap:13px;font-size:9px;color:var(--muted);margin-left:auto}.master-volume input{width:85px}.record-set{display:flex;align-items:center;gap:9px;font-size:10px;min-height:40px;border:1px solid var(--line)!important;border-radius:25px!important;padding:0 14px!important}.record-set i{width:6px;height:6px;border-radius:50%;background:#976457}.record-set[aria-pressed=true]{background:#e7d8ce!important;border-color:#976457!important}.recording-time{font-size:10px;font-variant-numeric:tabular-nums}.recording-time:empty{display:none}.recording-meta{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);min-height:12px;padding-top:5px}.recording-meta a{border-bottom:1px solid var(--line);padding:4px 0;min-height:28px}.scene-section{padding:13px 0 26px}.scene-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.scene-heading p{margin:0;color:var(--muted);font-size:10px}.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.scene-card{min-width:0;border:1px solid var(--line);background:#eee8dd33}.scene-launch{display:flex;align-items:center;gap:12px;width:100%;min-height:61px;padding:10px 15px!important;text-align:left}.scene-launch small{font-size:8px;color:var(--muted)}.scene-launch span{font:24px/1.2 var(--serif);letter-spacing:-.035em}.scene-launch i{height:4px;width:4px;margin-left:auto;border-radius:50%;background:transparent}.scene-launch[aria-pressed=true]{background:#e7dfd2!important}.scene-launch[aria-pressed=true] i{background:var(--ink)}.scene-launch.is-queued{outline:1px solid #887066;outline-offset:-1px;background:#eee3d966!important}.scene-launch.is-queued i{background:#887066;box-shadow:0 0 0 3px #88706625}.scene-save{display:block;width:100%;font-size:8px!important;color:var(--muted)!important;border-top:1px solid var(--line)!important;min-height:28px;padding:5px 15px!important;text-align:left}.scene-help{font-size:9px;color:var(--muted);margin:9px 0 0}.rhythm-stage{grid-template-columns:.84fr 1.16fr;gap:4%;align-items:start}.rhythm-orbit>svg{max-height:265px}.rhythm-orbit-top{font-size:8px}.orbit-caption{gap:8px;min-height:38px}.playground-top{margin-bottom:10px;min-height:25px}.rhythm-pads{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.rhythm-page .rhythm-pad{min-height:86px;padding:8px 4px 4px;gap:4px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.rhythm-pad .pad-icon{height:24px;width:29px}.rhythm-pad .pad-name{font-size:23px}.rhythm-pad .pad-hint{font-size:7px;min-height:12px}.rhythm-pad-mute{min-height:25px!important;font-size:8px!important}.rhythm-pad small{font-size:7px}.kaka-pad{display:flex;align-items:center;gap:17px;width:100%;border:1px solid var(--line)!important;margin-top:9px;padding:11px 16px!important;min-height:70px;text-align:left;touch-action:none;user-select:none;-webkit-user-select:none;background:#ebe2d338!important;transition:background .15s,transform .15s}.kaka-pad>svg{width:62px;height:34px;fill:#5b5045;flex:none}.kaka-pad strong{display:block;font:27px/1 var(--serif);font-weight:400;letter-spacing:-.03em}.kaka-pad small{display:block;font-size:8px;margin-top:5px;color:var(--muted)}.kaka-pad .kaka-spark{margin-left:auto;color:var(--muted);font-size:16px}.kaka-pad.is-playing{background:#e1d3bd!important;transform:translateY(-1px)}.rhythm-pad-help{margin-top:13px}.expression-heading{display:flex;align-items:center;justify-content:space-between;margin:14px 0 9px}.expression-heading button{font-size:9px;padding:5px 0}.expression-field{height:120px;position:relative;overflow:hidden;touch-action:none;border:1px solid var(--line);background:linear-gradient(0deg,#efe9df88,transparent),radial-gradient(#c9bda955 .7px,transparent .7px);background-size:auto,14px 14px;cursor:crosshair}.expression-field:before,.expression-field:after{content:'';position:absolute;pointer-events:none;background:#b9ac982b}.expression-field:before{top:50%;height:1px;left:0;right:0}.expression-field:after{left:50%;width:1px;top:0;bottom:0}.expression-label{position:absolute;pointer-events:none;font-size:8px;color:var(--muted)}.expression-label.left{left:10px;bottom:9px}.expression-label.right{right:10px;bottom:9px}.expression-label.top{top:8px;left:50%;transform:translateX(-50%)}.expression-puck{position:absolute;pointer-events:none;left:var(--expression-x,72%);top:var(--expression-y,84%);width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #87705f;background:#b1987944;box-shadow:0 0 0 7px #b1987912}.expression-dials{display:flex;gap:20px;margin-top:2px}.expression-dials label{display:flex;align-items:center;gap:10px;font-size:8px;color:var(--muted);width:50%}.expression-dials input{width:100%;min-width:0}.rhythm-starting-points{display:none}
@media(min-width:1050px){.rhythm-intro{padding:26px 0}.rhythm-intro h1{font-size:63px}.rhythm-main,.rhythm-header{max-width:1300px}}
@media(max-width:800px){.rhythm-stage{grid-template-columns:1fr}.orbit-space{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:center}.rhythm-orbit{grid-column:1;grid-row:1/5}.rhythm-orbit>svg{height:195px}.orbit-caption{grid-column:1;grid-row:5}.expression-heading,.expression-field,.expression-dials{grid-column:2}.expression-heading{margin:4px 0 9px}.expression-field{height:120px}.rhythm-playground{margin-top:18px}.rhythm-pads{grid-template-columns:repeat(4,minmax(0,1fr))}.rhythm-page .rhythm-pad{min-height:91px}.scene-launch{padding:8px 11px!important;gap:8px}.scene-launch span{font-size:23px}}
@media(max-width:520px){.rhythm-intro{padding:25px 0 20px}.rhythm-intro h1{font-size:49px}.performance-bar{gap:10px;flex-wrap:wrap}.performance-bar .rhythm-play{min-width:77px;font-size:10px}.performance-bar .rhythm-record{padding:6px 10px;min-height:40px}.master-volume{order:4;margin-left:0;flex:1}.master-volume input{width:100%;max-width:130px}.record-set{margin-left:auto}.recording-time{margin-left:auto}.scene-section{padding-bottom:18px}.scene-grid{gap:7px}.scene-launch{flex-wrap:wrap;gap:5px;min-height:63px;padding:8px!important}.scene-launch small{width:100%;font-size:7px}.scene-launch span{font-size:21px}.scene-save{padding:5px 8px!important;font-size:7px!important}.scene-heading p{font-size:8px}.scene-help{font-size:8px}.rhythm-pads{grid-template-columns:repeat(3,minmax(0,1fr))}.rhythm-pad .pad-name{font-size:25px}.rhythm-pad .pad-hint{font-size:7px}.rhythm-page .rhythm-pad{min-height:94px}.orbit-space{gap:0 15px}.rhythm-orbit>svg{height:147px}.rhythm-orbit-top{display:none}.expression-field{height:95px}.expression-heading .rhythm-eyebrow{font-size:7px}.expression-dials{gap:8px}.expression-dials label{gap:4px;font-size:7px}.orbit-caption{font-size:8px}.kaka-pad{min-height:66px}.rhythm-quick-actions>span{max-width:135px}.recording-meta{font-size:9px}}
@media(prefers-reduced-motion:reduce){.kaka-pad.is-playing{transform:none}}

@media(min-width:801px) and (max-height:850px){.rhythm-header{height:54px}.rhythm-intro{padding:18px 0}.rhythm-intro h1{font-size:48px}.rhythm-intro .rhythm-eyebrow{margin-bottom:8px}.rhythm-intro>p{font-size:16px}.performance-bar{padding:8px 0}.scene-section{padding:8px 0 17px}.scene-heading{margin-bottom:8px}.scene-launch{min-height:45px}.scene-save{min-height:24px}.rhythm-orbit>svg{max-height:213px}.expression-field{height:96px}.rhythm-page .rhythm-pad{min-height:76px}.kaka-pad{min-height:58px;padding:8px 16px!important}.rhythm-pad .pad-name{font-size:22px}}
@media(min-width:801px) and (max-height:850px){.rhythm-header{height:44px}.rhythm-intro{padding:12px 0}.rhythm-intro h1{font-size:42px}.rhythm-intro .rhythm-eyebrow{display:none}.rhythm-intro>p{font-size:14px}.scene-section{padding:6px 0 12px}.scene-heading{margin-bottom:6px}.scene-launch{min-height:40px}.scene-help{font-size:8px;margin:5px 0 0}.recording-meta{font-size:9px;min-height:10px}.playground-top{min-height:20px}.rhythm-pad-mute{min-height:23px!important}}

@media(max-width:620px){.rhythm-header{height:58px}.rhythm-intro{padding:19px 0}.rhythm-intro .rhythm-eyebrow{display:none}.rhythm-intro h1{font-size:43px}.rhythm-intro>p{font-size:15px;margin-top:11px}.rhythm-instrument{display:flex;flex-direction:column}.rhythm-stage{display:contents}.rhythm-playground{order:1;margin-top:12px}.scene-section{order:2;padding:24px 0 15px}.orbit-space{order:3;margin:10px 0 24px}.rhythm-drawer{order:4}.scene-launch span{font-size:19px}.rhythm-pads{gap:7px}.rhythm-page .rhythm-pad{min-height:86px}.recording-meta{min-height:10px}.rhythm-intro{gap:5px}}
.rhythm-page .kaka-pad>svg{width:62px;height:34px;fill:#5b5045;stroke:none;flex:none}.rhythm-skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0}

.rhythm-house img{width:62px;height:57px;object-fit:contain}.rhythm-footer>.rhythm-signature{font:9px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.1em}.rhythm-page input{color:inherit}.rhythm-page input[type=range]{appearance:none;-webkit-appearance:none;background:transparent}
.rhythm-page input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}.rhythm-page input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--ink);margin-top:-4.5px}.rhythm-page input[type=range]::-moz-range-track{height:1px;background:var(--line)}.rhythm-page input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--ink)}

/* Touch layouts keep the instrument reachable as the viewport changes. */
.rhythm-page {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.rhythm-header { min-height: 62px; }
.rhythm-house { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.rhythm-house img { height: 49px; }
.performance-bar { top: env(safe-area-inset-top); }
.performance-bar::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--paper);
}
.rhythm-page button, .rhythm-page summary, .rhythm-page a { touch-action: manipulation; }
.rhythm-page .rhythm-pad, .rhythm-page .kaka-pad { touch-action: none; }
.rhythm-page input[type=range] { height: 32px; margin-block: 0; }
.recording-meta a { display: inline-flex; align-items: center; gap: 10px; }
.recording-meta a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.rhythm-quick-actions, .scene-heading, .recording-meta { flex-wrap: wrap; }
.rhythm-playground { scroll-margin-top: 132px; }
.rhythm-score-scroll { overscroll-behavior-x: contain; }

@media (any-pointer: coarse), (max-width: 1024px) {
  .rhythm-page .rhythm-play,
  .rhythm-page .rhythm-record,
  .rhythm-page .record-set,
  .rhythm-page .scene-launch,
  .rhythm-page .scene-save,
  .rhythm-page .rhythm-pad-mute,
  .rhythm-page .rhythm-quick-actions button,
  .rhythm-page .expression-heading button,
  .rhythm-page .rhythm-layer-mute,
  .rhythm-page .rhythm-layer-remove,
  .rhythm-page .rhythm-length button,
  .recording-meta a {
    min-height: 44px !important;
    min-width: 44px;
  }
  .rhythm-page .scene-save, .rhythm-page .rhythm-pad-mute { font-size: 10px !important; }
  .rhythm-page input[type=range] { height: 44px; }
  .rhythm-page input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7.5px; }
  .rhythm-page input[type=range]::-moz-range-thumb { width: 16px; height: 16px; }
  .rhythm-step-labels, .rhythm-voice-row {
    grid-template-columns: 110px repeat(var(--steps, 8), minmax(44px, 1fr));
    gap: 7px;
  }
  .rhythm-score { min-width: 518px; }
  .rhythm-score[data-length='16'] { min-width: 926px; }
  .rhythm-note { height: 44px; }
  .rhythm-scroll-hint { display: block; font-size: 9px; color: var(--muted); }
}

@media (max-width: 620px) {
  .performance-bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; }
  .performance-bar .rhythm-transport { grid-column: 1; grid-row: 1; }
  .performance-bar .rhythm-record { grid-column: 2; grid-row: 1; }
  .performance-bar .record-set { grid-column: 3; grid-row: 1; font-size: 10px; justify-content: center; }
  .master-volume { grid-column: 1 / 3; grid-row: 2; width: 100%; min-width: 0; }
  .master-volume input { flex: 1; min-width: 70px; max-width: none; }
  .recording-time { grid-column: 3; grid-row: 2; justify-self: end; }
  .rhythm-page .rhythm-pad { min-height: 82px; }
  .rhythm-pad .pad-hint { font-size: 8px; }
  .scene-grid { gap: 6px; }
  .scene-launch { display: grid; grid-template-columns: 1fr auto; min-height: 67px !important; padding-inline: 7px !important; }
  .scene-launch small { grid-column: 1 / -1; }
  .scene-launch span { font-size: 17px; }
  .scene-launch i { display: none; }
  .rhythm-quick-actions > span { display: none; }
  .rhythm-quick-actions > div { justify-content: space-between; width: 100%; }
}

@media (max-height: 500px) and (max-width: 950px) {
  .rhythm-header { min-height: 48px; height: 48px; }
  .rhythm-house img { height: 42px; }
  .rhythm-intro { display: flex; align-items: center; padding: 12px 0; }
  .rhythm-intro h1 { font-size: 34px; }
  .rhythm-intro .rhythm-eyebrow, .rhythm-intro > p { display: none; }
  .performance-bar { padding-block: 6px; }
}

/* Browsers that expose two panes keep controls clear of the hinge. */
@media (horizontal-viewport-segments: 2) {
  .rhythm-page { padding-inline: 0; }
  .rhythm-main {
    width: 100%;
    max-width: none;
    padding-inline: 20px;
    display: grid;
    grid-template-columns: calc(env(viewport-segment-width 0 0) - 40px)
      calc(env(viewport-segment-width 1 0) - 40px);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 40px);
    align-items: start;
  }
  .rhythm-instrument, .rhythm-stage { display: contents; }
  .rhythm-intro { grid-column: 1; grid-row: 1; }
  .rhythm-intro h1 { font-size: clamp(32px, 4vw, 50px); }
  .rhythm-intro > p { display: none; }
  .performance-bar { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; gap: 8px; }
  .master-volume { order: 4; margin-left: 0; flex: 1 1 100%; }
  .recording-meta { grid-column: 2; grid-row: 2; }
  .scene-section { grid-column: 1; grid-row: 2; }
  .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rhythm-playground { grid-column: 2; grid-row: 3 / span 3; margin-top: 0; }
  .rhythm-pads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orbit-space { grid-column: 1; grid-row: 3; display: block; }
  .rhythm-drawer, .rhythm-footer { grid-column: 1; }
  .rhythm-header { width: calc(100% - 40px); max-width: none; }
}

.sound-modes { display: flex; flex-shrink: 0; padding: 4px; gap: 2px; border: 1px solid var(--line); border-radius: 30px; }
.rhythm-page .sound-modes button { min-height: 44px; min-width: 72px; padding: 10px 18px; border-radius: 24px; font-size: 12px; }
.sound-modes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sound-modes button:hover { background: var(--line); color: var(--ink); }
.sound-modes button[aria-pressed="true"]:hover { background: var(--ink); color: var(--paper); }
.club-controls { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.club-controls[hidden] { display: none; }
.rhythm-page .club-start { display: flex; flex-shrink: 0; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 30px; padding: 10px 14px; min-height: 44px; font-size: 10px; }
.club-start:hover { background: var(--ink); color: var(--paper); }
.rumble-control { display: flex; align-items: center; flex: 1; gap: 12px; font-size: 10px; }
.rumble-control input { width: 100%; min-width: 0; }
@media(max-width:650px) { .rhythm-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .rhythm-page .sound-modes button { padding-inline: 12px; } }
@media(max-width:800px) { .club-controls { grid-column: 2; flex-wrap: wrap; gap: 8px; } .rumble-control { flex-basis: 100%; } }

.sound-modes button.is-queued { outline: 1px dashed var(--muted); outline-offset: -5px; }
#rhythm-seed.is-queued { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 5px; }