:root{--accent2:#b797ff;--ok:#9fd35b;--warn:#ffcf6a;--shadow:0 18px 32px rgba(0,0,0,.28)}
html,body{margin:0;min-height:100%}
body{font-family:var(--ap-body);background:var(--ap-backdrop) fixed;color:var(--ap-text)}
*{box-sizing:border-box}
a{color:inherit}
button,input,select{font:inherit}
button,.button{
  border-radius:0;border:1px solid var(--ap-stroke);cursor:pointer;color:var(--ap-text);
  background:linear-gradient(165deg,var(--ap-btn-raised) 0%,var(--ap-btn) 56%,var(--ap-btn-active) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -5px 0 var(--ap-depth),0 4px 10px rgba(0,0,0,.34);
  clip-path:var(--ap-cut-btn);padding:10px 14px 12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ap-display);letter-spacing:.045em;text-transform:uppercase
}
button:hover:not(:disabled),.button:hover{filter:brightness(1.12)}
button:active:not(:disabled),.button:active{transform:translateY(2px)}
button:disabled{opacity:.45;cursor:default}
button.primary{background:linear-gradient(165deg,var(--ap-accent),var(--ap-btn-raised) 80%);border-color:var(--ap-accent)}
button.record{background:linear-gradient(175deg,#93414b,#592331 72%,#33141d);border-color:#b96d77;color:#ffe2e1}
input[type=range]{accent-color:var(--ap-accent-strong)}
select,input:not([type=range]){background:var(--ap-btn-active);color:var(--ap-text);border:1px solid var(--ap-stroke-subtle);padding:9px 10px;clip-path:var(--ap-cut-card)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.button:focus-visible{outline:2px solid var(--ap-accent-strong);outline-offset:3px}

.app-shell{padding:18px}
.panel{background:rgba(13,27,41,.9);border:1px solid var(--ap-stroke-subtle);border-top:2px solid var(--ap-stroke);clip-path:var(--ap-cut-card);box-shadow:var(--shadow)}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-wrap,.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-mark{width:58px;height:46px;display:grid;place-items:center;background:linear-gradient(170deg,var(--ap-btn-raised),var(--ap-btn-active));border:1px solid var(--ap-accent);border-bottom:5px solid var(--ap-depth);clip-path:var(--ap-cut-card);font-family:var(--ap-display);font-size:22px;color:var(--ap-accent-strong)}
.brand-copy strong{display:block;font-family:var(--ap-display);font-size:clamp(26px,3vw,40px);line-height:1;color:var(--ap-headline);letter-spacing:.05em}
.brand-copy small{display:block;margin-top:6px;color:var(--ap-muted);font-size:11px;letter-spacing:.18em}
.secondary-link{opacity:.88}

.workspace-layout{display:grid;grid-template-columns:290px 1fr;gap:18px;align-items:start}
.sidebar{padding:18px 18px 20px;position:sticky;top:18px}
.sidebar-head h1,.hero h2,.mission-card h3,.sectionhead h3,.instrument-head h3,.export h3,.editor-top h3{font-family:var(--ap-display);font-weight:800;letter-spacing:.03em;color:var(--ap-headline);margin:6px 0 10px}
.sidebar-head h1{font-size:27px}
.sidebar p,.hero p,.mission-card p,.panel p,.hint{color:var(--ap-muted)}
.tiny-kicker{font-family:var(--ap-display);color:var(--ap-accent);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.lesson-nav{display:grid;gap:8px;margin:16px 0 20px}
.lesson-tab{width:100%;text-align:left;justify-content:flex-start;min-height:58px;background:transparent;box-shadow:none;padding:10px 12px;border:1px solid transparent}
.lesson-tab:hover{background:rgba(255,255,255,.04);border-color:var(--ap-stroke-subtle)}
.lesson-tab.active{background:linear-gradient(115deg,var(--ap-panel-raised),var(--ap-btn));border-color:var(--ap-accent);box-shadow:inset 4px 0 0 var(--ap-accent-strong)}
.lesson-tab.done .lesson-index{color:var(--ok)}
.lesson-index{font-family:var(--ap-display);font-size:22px;color:var(--ap-accent);width:28px;display:inline-block}
.lesson-copy{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.lesson-copy strong{font-size:15px}
.lesson-copy small{color:var(--ap-dim);font-size:11px;letter-spacing:.05em;text-transform:none}
.sidebar-meta{display:grid;gap:10px;margin-top:12px}
.meta-block{background:rgba(255,255,255,.04);border:1px solid var(--ap-stroke-subtle);padding:10px 12px;clip-path:var(--ap-cut-card)}
.meta-label{display:block;color:var(--ap-dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.sidebar-footer{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.sidebar-footer a{color:var(--ap-muted);font-size:13px}

.mainstage{display:grid;gap:18px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;padding:22px}
.hero h2{font-size:clamp(34px,4vw,56px);line-height:1.02;margin-bottom:14px}
.hero-art{min-height:220px;position:relative;display:grid;place-items:center;background:linear-gradient(140deg,rgba(103,84,220,.92),rgba(71,55,171,.86));clip-path:var(--ap-cut-card);overflow:hidden}
.hero-art strong{position:relative;z-index:2;font-family:var(--ap-display);font-size:clamp(34px,4vw,54px);line-height:.9;color:#fff;text-align:center;text-shadow:2px 2px 0 rgba(26,19,87,.7)}
.hero-bars{position:absolute;inset:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;opacity:.88}
.hero-bars span{flex:1;border-radius:0;background:linear-gradient(180deg,#d6f25f,#7ee6f3);clip-path:var(--ap-cut-chip)}
.hero-bars span:nth-child(odd){height:44%}.hero-bars span:nth-child(3n){height:72%}.hero-bars span:nth-child(4n){height:30%}.hero-bars span:nth-child(5n){height:86%}

.mission-card{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:18px 22px}
.mission-card h3{font-size:28px;margin-top:8px}
.mission-status{font-weight:700;color:var(--ap-accent-strong)}
.mission-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}

.transport{padding:16px 18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.transport-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.transport-fields label{display:flex;align-items:center;gap:8px;color:var(--ap-muted);font-size:13px}
#bpm{min-width:66px;text-align:left;color:var(--ap-text);font-family:var(--ap-display)}

.composer-grid{display:grid;grid-template-columns:310px 1fr;gap:18px;align-items:start}
.track-panel,.editor,.bottom-grid>.panel,.export{padding:18px}
.sectionhead{margin-bottom:12px}
.field-block{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:var(--ap-muted);font-size:13px;margin:10px 0 14px}
#tracks{display:grid;gap:10px}
.track{padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--ap-stroke-subtle);clip-path:var(--ap-cut-card)}
.track.selected{border-color:var(--ap-accent);box-shadow:0 0 0 1px rgba(125,187,209,.25)}
.track-top{display:flex;gap:6px;align-items:center}
.track-top .choose{flex:1;text-align:left;justify-content:flex-start;background:transparent;box-shadow:none;border:0;padding:7px 4px 9px}
.track-top button{font-size:11px;padding:7px 9px 9px;min-width:40px}
.track label{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;color:var(--ap-dim);font-size:11px}
.track input{width:120px}
.track .on,#record.on{background:linear-gradient(175deg,#c85f68,#771f34);color:#ffe9ea;border-color:#d88f97}

.editor-top,.instrument-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.editor-controls{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.bar-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.bar-tabs button{padding:8px 10px 10px}.bar-tabs .active{border-color:var(--ap-accent);color:var(--ap-text);background:linear-gradient(165deg,var(--ap-btn-top),var(--ap-btn))}
.grid-wrap{overflow:auto;padding:4px 2px 2px}
.step-grid{display:grid;grid-template-columns:70px repeat(16,minmax(28px,1fr));gap:5px;min-width:650px}
.step-grid .row-label{align-self:center;font-size:12px;color:var(--ap-text);font-family:var(--ap-display);letter-spacing:.04em}
.step-grid .beat{font-size:11px;text-align:center;color:var(--ap-dim);padding:2px 0 5px}
.cell{border:1px solid var(--ap-stroke-subtle);background:rgba(255,255,255,.06);min-height:34px;padding:0;box-shadow:none;clip-path:none}
.cell.group{background:rgba(255,255,255,.09)}
.cell.hit{background:linear-gradient(180deg,var(--accent2),#6954dd);border-color:var(--accent2);box-shadow:inset 0 -3px 0 #42309c}
.cell.tail{background:rgba(183,151,255,.45);border-color:rgba(183,151,255,.55)}
.cell.playhead{outline:2px solid var(--warn);outline-offset:-2px}
.instrument-head{margin:22px 0 10px}.instrument-head #instrumentHint{font-size:12px;color:var(--ap-dim)}
.pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pad{min-height:68px;font-size:14px}.pad:nth-child(4n+1){background:linear-gradient(165deg,#6c50e3,#322565)}.pad:nth-child(4n+2){background:linear-gradient(165deg,#4c8cb3,#182f47)}.pad:nth-child(4n+3){background:linear-gradient(165deg,#84793d,#35301d)}.pad:nth-child(4n){background:linear-gradient(165deg,#5b7f46,#23301d)}
.keys{display:flex;gap:6px;margin-top:12px}.key{flex:1;padding:40px 0 12px;min-height:102px;font-size:12px;clip-path:none;background:linear-gradient(180deg,#fbfbfd,#d9d9e5);color:#1f2432;border-color:#9099ab;box-shadow:inset 0 -5px 0 #adb4c5}.key:nth-child(2),.key:nth-child(4),.key:nth-child(7){background:linear-gradient(180deg,#20252d,#0f141a);color:#f1f6f7;border-color:#3d4654;position:relative;z-index:2;margin:0 -10px 0 -10px;max-width:70px}

.bottom-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:18px}
.actions,.lab-controls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
canvas{width:100%;height:140px;background:linear-gradient(180deg,#071827,#0d2533);border:1px solid var(--ap-stroke-subtle);clip-path:var(--ap-cut-card)}
.lab-panel .hint{margin-top:10px}

.export{display:flex;justify-content:space-between;align-items:center;gap:16px}
#status{position:sticky;bottom:10px;z-index:8;margin:0;padding:12px 16px;background:rgba(13,27,41,.96);border:1px solid var(--ap-accent);clip-path:var(--ap-cut-card);box-shadow:var(--shadow);color:var(--ap-text)}

.guide-overlay{position:fixed;inset:0;background:rgba(6,10,14,.72);z-index:80}
.guide-focus{position:fixed;border:2px solid var(--ap-accent-strong);box-shadow:0 0 0 9999px rgba(6,10,14,.76),0 0 0 4px rgba(125,187,209,.16),0 0 28px rgba(125,187,209,.38);border-radius:0;pointer-events:none;clip-path:var(--ap-cut-card);transition:all .18s ease}
.guide-card{position:fixed;right:24px;bottom:24px;max-width:420px;width:min(420px,calc(100vw - 32px));padding:18px 18px 16px;z-index:81;background:rgba(16,35,50,.98);border:1px solid var(--ap-accent);border-top:3px solid var(--ap-accent)}
.guide-card h3{font-size:24px;margin:8px 0 10px;font-family:var(--ap-display)}
.guide-card p{margin:0 0 10px}.guide-note{color:var(--ap-accent)}.guide-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

@media(max-width:1180px){.workspace-layout,.composer-grid,.bottom-grid,.hero{grid-template-columns:1fr}.sidebar{position:static}.topbar{flex-direction:column}.mission-card,.export{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.app-shell{padding:12px}.brand-copy strong{font-size:26px}.hero{padding:18px}.hero-art{min-height:180px}.mission-card h3,.hero h2{font-size:28px}.transport{padding:14px}.track input{width:96px}.step-grid{min-width:580px}.pads{grid-template-columns:repeat(2,minmax(0,1fr))}.keys{overflow:auto}.guide-card{left:12px;right:12px;bottom:12px;width:auto}}
@media(max-width:540px){.topbar-actions{width:100%}.topbar-actions>*{flex:1 1 auto}.brand-mark{width:46px;height:38px;font-size:18px}.brand-copy strong{font-size:22px}.brand-copy small{font-size:9px}.sidebar-head h1{font-size:22px}.mission-card,.track-panel,.editor,.bottom-grid>.panel,.export{padding:14px}.transport-row{width:100%}.transport-row>*{flex:1 1 auto}.cell{min-height:30px}.key{min-width:64px}.guide-actions{justify-content:stretch}.guide-actions button{flex:1 1 30%}}

/* GUIDE STUDIO: spotlight remains visual and the highlighted UI stays clickable. */
.guide-overlay{background:transparent;pointer-events:none}
.guide-focus{pointer-events:none}
.guide-card{pointer-events:auto;max-height:calc(100vh - 24px);overflow:auto}
.guide-overlay[hidden]{display:none!important}
/* COMPOSER_01 · Optional author-defined content tiles (zero audio dependencies). */
.kcg-layout-slot{display:contents}
.kcg-custom-tile{padding:18px;min-width:0;border-top:2px solid var(--ap-accent);background:var(--ap-panel)}
.kcg-custom-tile h3{font:800 clamp(20px,2.4vw,29px) var(--ap-display);letter-spacing:.02em;margin:8px 0;color:var(--ap-headline)}
.kcg-custom-tile p{color:var(--ap-muted);margin:0;white-space:pre-wrap}

#kcgHeroArtText{white-space:pre-line}

/* KCG03 · WORKFLOW01: real dedicated pages, one global transport, MPC instrument groups. */
[hidden]{display:none!important}
body{padding-bottom:110px}
body.is-landing{padding-bottom:0}
.app-shell{padding:14px 18px 22px;max-width:1920px;margin:auto}
.workspace-layout{grid-template-columns:minmax(220px,264px) minmax(0,1fr);gap:14px}
.sidebar{top:12px;max-height:calc(100vh - 132px);overflow:auto;padding:12px 14px 16px}
.sidebar .sidebar-head p{font-size:12px;line-height:1.45}
.sidebar .sidebar-head h1{font-size:23px}
.sidebar .lesson-details{margin-top:16px;border-top:1px solid var(--ap-stroke-subtle);padding-top:14px}
.lesson-details summary{font:700 13px var(--ap-display);letter-spacing:.08em;color:var(--ap-accent);cursor:pointer}
.lesson-details .lesson-tab{min-height:44px;padding:7px}
.lesson-details .lesson-index{font-size:16px}
.page-nav{display:grid;gap:5px;margin:17px 0}
.page-link{min-height:42px;justify-content:flex-start;border-color:transparent;box-shadow:none;background:transparent;text-align:left;font-size:14px;padding:10px 12px}
.page-link:hover,.page-link.active{border-color:var(--ap-stroke);background:linear-gradient(115deg,var(--ap-panel-raised),var(--ap-btn));box-shadow:inset 3px 0 0 var(--ap-accent-strong)}
#navToggle{min-width:46px;min-height:46px;font-size:23px}
.close-sidebar{display:none;margin-left:auto;font-size:15px;padding:7px 12px}
body.nav-collapsed .workspace-layout{grid-template-columns:minmax(0,1fr)}
body.nav-collapsed #workspaceSidebar{display:none}
body.nav-open #workspaceSidebar{display:block}
#navBackdrop{display:none}
.mainstage{gap:14px;min-width:0}
.kcg-page{display:grid;gap:14px;min-width:0;align-content:start}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:7px 6px}
.page-heading h2{font:800 clamp(28px,3vw,42px)/1 var(--ap-display);color:var(--ap-headline);letter-spacing:.04em;margin:7px 0}
.page-heading p{font-size:13px;color:var(--ap-muted);margin:7px 0}
#page-home{max-width:1480px}
.hero{min-height:315px;padding:24px;grid-template-columns:1fr minmax(360px,42%)}
.hero-image{background:linear-gradient(140deg,#7733c2,#271266);min-height:260px}
.hero-image img{width:100%;height:100%;display:block;object-fit:cover}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feature{padding:22px 18px}.feature h3{font:800 clamp(20px,2vw,27px) var(--ap-display);margin:8px 0}.feature p{line-height:1.45}
.landing-cta{padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.landing-cta h2{font:800 clamp(23px,2.5vw,33px) var(--ap-display);margin:8px 0}
#startGroove{font-size:21px;min-height:65px;white-space:nowrap}
.production-mission{padding:11px 18px}
.production-mission h3{font-size:21px;margin:4px 0}
.production-mission .mission-copy p{font-size:12px;margin:4px 0}
.production-mission .mission-status{color:var(--ap-accent-strong)}
.production-mission .mission-actions button{padding:9px 11px;font-size:11px}
.global-transport{position:fixed;z-index:35;bottom:0;left:0;right:0;border-top:2px solid var(--ap-stroke);border-left:0;border-right:0;border-bottom:0;border-radius:0;clip-path:none!important;background:rgba(10,20,28,.97);box-shadow:0 -12px 35px rgba(0,0,0,.5);padding:9px 16px;display:flex;justify-content:center;align-items:center;gap:18px}
.global-transport .transport-row{display:flex;align-items:center;gap:7px}
.global-transport button{font-size:12px;padding:8px 12px 11px}
#stop{color:var(--warn)}
.transport-position{font:800 13px var(--ap-display);color:var(--ap-accent);min-width:80px}
#status{position:fixed;bottom:86px;left:50%;transform:translateX(-50%);z-index:34;font:12px var(--ap-mono);text-align:center;width:max-content;max-width:min(94vw,1050px);padding:8px 18px;pointer-events:none}
.is-landing #status{position:relative;bottom:auto;left:auto;transform:none;width:auto;max-width:none}
.pad-stage{padding:20px 24px 17px;min-height:550px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
.pad-toolbar{width:min(800px,100%);display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.pad-settings{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pad-settings label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ap-muted)}
#repeatHold[aria-pressed="true"]{background:linear-gradient(165deg,var(--ap-accent),var(--ap-panel-raised));color:var(--ap-headline)}
#padStageHost{width:min(800px,100%)}
#pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;touch-action:manipulation}
#pads .pad{aspect-ratio:1.12/1;min-height:94px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;position:relative;border:1px solid var(--ap-stroke);border-bottom:6px solid var(--ap-depth);font:800 clamp(12px,1.6vw,20px) var(--ap-display);color:#fff7dc;text-shadow:0 2px 1px rgba(0,0,0,.5);user-select:none;touch-action:none}
#pads .pad .pad-number{position:absolute;top:8px;left:9px;font:11px var(--ap-mono);opacity:.7}
#pads .pad .pad-led{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}
#pads .pad.pad-drums{background:linear-gradient(150deg,#6d6243,#3b372d 58%,#27241d)}
#pads .pad.pad-percussion{background:linear-gradient(150deg,#326451,#253b34 58%,#1b2923);border-color:#579c80}
#pads .pad.pad-bass{background:linear-gradient(150deg,#355e95,#233a61 58%,#1a273d);border-color:#6489ba}
#pads .pad.pressed{filter:brightness(1.5);transform:translateY(3px)}
#pads .pad.pressed .pad-led{background:#eff8d4;box-shadow:0 0 9px #fff}
.pad-bottom{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:min(800px,100%);color:var(--ap-muted)}
.pad-bottom #padStatus{margin-left:auto;font:12px var(--ap-mono)}
.legend{font:700 11px var(--ap-display);letter-spacing:.07em;padding:6px 10px;border:1px solid var(--ap-stroke)}
.legend.drum{color:#d6bd7b}.legend.percussion{color:#75c5a6}.legend.bass{color:#8dbbe9}
.page-help{padding:12px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.page-help>strong{color:var(--ap-accent)}.page-help>span{color:var(--ap-muted);flex:1;font-size:13px}
#page-sequencer .composer-grid{grid-template-columns:minmax(220px,250px) minmax(0,1fr)}
#page-sequencer .editor{min-width:0}
#page-sequencer .track-panel{align-self:start}
.seq-tabs{display:flex;gap:8px;flex-wrap:wrap;width:100%;margin-bottom:10px}
.seq-tabs button{min-width:110px}
.seq-tabs button.active{border-color:var(--ap-accent);box-shadow:inset 0 3px 0 var(--ap-accent-strong)}
.drum-sequencer{grid-template-columns:135px repeat(16,minmax(28px,1fr));min-width:750px}
.drum-sequencer .row-label{font-size:10px;color:#d7c39b}.drum-sequencer .row-label.bass{color:#8dbbe9}.drum-sequencer .row-label.percussion{color:#75c5a6}
.drum-cell.hit{background:#9e8e5e}.drum-cell.playhead{outline-color:#f6d765}
#drumGrid{max-height:520px;overflow:auto}
.keys-stage{padding:22px;min-height:55vh;display:flex;flex-direction:column;gap:18px}
.keys-stage #keys{flex:1;align-items:stretch;min-height:250px}
.keys-stage .key{min-height:250px;max-height:450px}
#page-sound #soundSection,#page-lab #lab{padding:20px}
#page-mix .mix-panel{padding:20px}
#mixTracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mix-track{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:13px;border:1px solid var(--ap-stroke-subtle);background:var(--ap-panel-soft)}
.mix-track strong{min-width:96px;color:var(--ap-headline);font:800 15px var(--ap-display)}
.mix-track label{display:flex;gap:7px;align-items:center;font-size:11px;color:var(--ap-muted)}
.mix-track button.on{border-color:#c98b62;background:#57412d}
#page-mix .export{margin-top:5px}
@media(max-width:1140px){.hero{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr 1fr}.global-transport{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}}
@media(max-width:900px){
 .workspace-layout,body.nav-collapsed .workspace-layout{grid-template-columns:minmax(0,1fr)}
 #workspaceSidebar{position:fixed;z-index:56;left:0;top:0;bottom:0;width:min(85vw,310px);max-height:100vh;overflow-y:auto;box-shadow:20px 0 50px rgba(0,0,0,.55)}
 body.nav-collapsed #workspaceSidebar{display:none}
 #navBackdrop:not([hidden]){display:block;position:fixed;z-index:55;inset:0;background:rgba(0,0,0,.65)}
 .close-sidebar{display:block}
 .topbar{flex-direction:row;align-items:center;flex-wrap:wrap}
 #page-sequencer .composer-grid{grid-template-columns:1fr}
 .global-transport{padding:8px 10px;gap:15px}
}
@media(max-width:620px){
 .app-shell{padding:8px}
 .topbar{gap:8px;margin-bottom:8px}
 .brand-copy strong{font-size:21px}
 .topbar-actions{flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}
 .topbar-actions button,.topbar-actions .button{flex:0 0 auto;font-size:11px;padding:8px}
 #page-home .hero{padding:12px;min-height:0}
 .hero h2{font-size:32px}.hero-image{min-height:185px}
 .feature-grid{grid-template-columns:1fr}
 .landing-cta{flex-direction:column;align-items:stretch;padding:16px}
 #startGroove{font-size:16px}
 .page-heading h2{font-size:28px}
 .production-mission{padding:10px}.production-mission .mission-copy p{display:none}
 .pad-stage{padding:12px 7px;min-height:auto}
 #pads{gap:5px;grid-template-columns:repeat(4,minmax(0,1fr))}
 #pads .pad{min-height:62px;aspect-ratio:1/1;font-size:clamp(9px,2.5vw,14px);padding:14px 2px 8px}
 #pads .pad .pad-number{top:4px;left:4px;font-size:8px}
 #pads .pad .pad-led{top:5px;right:5px;width:5px;height:5px}
 .pad-toolbar,.pad-settings{justify-content:center;width:100%}
 #mixTracks{grid-template-columns:1fr}
 .transport-fields label{font-size:11px}
 #status{bottom:90px}
 .global-transport .transport-row{flex:0 0 auto}
 .global-transport button{padding:8px;font-size:11px}
 .global-transport .transport-fields{gap:12px}
 .global-transport #tempo{width:75px}
}

/* KCG031 FIRST GROOVE: readable quarter-note counter and beginner-friendly transport. */
.guide-focus{box-shadow:0 0 0 9999px rgba(2,5,9,.88),0 0 0 5px rgba(125,187,209,.23),0 0 25px rgba(125,187,209,.52)!important;border-width:3px!important}
.guide-card{border-color:var(--ap-accent-strong)!important;box-shadow:0 15px 34px rgba(0,0,0,.65)!important}
.guide-card button:disabled{opacity:.65;cursor:default}
.metronome-control{display:inline-flex;gap:6px;align-items:center;color:var(--ap-text);font:700 12px var(--ap-display);white-space:nowrap}
.metronome-control input{width:16px;height:16px;accent-color:var(--ap-accent-strong)}
.beat-counter{display:flex;align-items:center;gap:12px;padding:3px 8px;background:var(--ap-panel-soft);border:1px solid var(--ap-stroke-subtle);min-width:215px}
.counter-label{font:700 11px var(--ap-display);white-space:nowrap;color:var(--ap-muted)}
.counter-beats{display:flex;gap:5px;align-items:center}
.counter-beats b{display:grid;place-items:center;width:25px;height:29px;border:1px solid var(--ap-stroke);background:var(--ap-btn-active);font:800 20px var(--ap-display);color:var(--ap-muted);transition:background .08s,color .08s}
.counter-beats b.current{background:var(--ap-accent-strong);color:#031722;box-shadow:0 0 15px var(--ap-glow);border-color:var(--ap-accent)}
@media(max-width:760px){.beat-counter{min-width:0;gap:7px}.counter-beats b{width:23px;height:26px;font-size:18px}}

/* Large count-in / metrical pulse, visible directly above the drum pads. */
.pad-beat-counter{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px 15px;width:min(800px,100%);background:var(--ap-panel-soft);border:1px solid var(--ap-stroke-subtle);color:var(--ap-accent)}
.pad-beat-counter>span{font:800 12px var(--ap-display);letter-spacing:.12em}
.pad-beats{display:flex;gap:12px}
.pad-beats b{display:grid;place-items:center;width:54px;height:48px;border:1px solid var(--ap-stroke);background:var(--ap-btn-active);font:800 36px var(--ap-display);color:var(--ap-muted);transition:background-color .07s,color .07s}
.pad-beats b.current{background:var(--ap-accent-strong);color:#031722;border-color:var(--ap-accent);box-shadow:0 0 25px var(--ap-glow)}
@media(max-width:620px){.pad-beat-counter{padding:7px;gap:7px}.pad-beats{gap:5px}.pad-beats b{width:40px;height:39px;font-size:30px}}

/* Quantization is an expert option, not part of the first groove tutorial. */
.transport-advanced{position:relative;flex:0 0 auto;font:800 11px var(--ap-display)}
.transport-advanced summary{list-style:none;cursor:pointer;min-width:44px;padding:7px 10px;border:1px solid var(--ap-stroke);background:var(--ap-btn-raised);color:var(--ap-text);font-family:var(--ap-display)}
.transport-advanced summary::-webkit-details-marker{display:none}
.transport-advanced[open]{padding:3px 8px;display:flex;align-items:center;gap:8px}
.transport-advanced .advanced-quantize{display:flex;align-items:center;gap:6px;white-space:nowrap}

/* KCG v0.3.2 · Guide Wissensrepository & bewusste Startwahl */
.guide-menu-shell{position:relative;flex:0 0 auto}
.guide-menu-shell:has(.guide-nav-panel:not([hidden])){z-index:110}
.guide-nav-panel[hidden],.start-choice-backdrop[hidden]{display:none!important}
.guide-nav-panel{
 position:absolute;right:0;top:calc(100% + 10px);width:min(390px,calc(100vw - 24px));
 max-height:min(75vh,660px);overflow:auto;padding:14px;z-index:110;
 background:rgba(11,27,39,.99);border-color:var(--ap-accent);box-shadow:0 20px 50px rgba(0,0,0,.75)
}
.guide-nav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ap-headline);font:800 17px var(--ap-display);letter-spacing:.05em}
.guide-nav-head button{padding:5px 10px 8px}
.guide-nav-panel>p{font-size:12px;line-height:1.5;margin:8px 0 12px;color:var(--ap-muted)}
.guide-continue{width:100%;justify-content:flex-start;font-size:12px;margin-bottom:12px;border-color:var(--ap-accent)}
.guide-chapters{display:grid;gap:8px}
.guide-menu-chapter{border:1px solid var(--ap-stroke-subtle);background:var(--ap-panel-soft)}
.guide-menu-chapter[open]{border-color:var(--ap-accent)}
.guide-menu-chapter>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;
 font:800 13px var(--ap-display);color:var(--ap-headline);list-style:none}
.guide-menu-chapter>summary::-webkit-details-marker{display:none}
.guide-menu-chapter>summary::before{content:'▸';color:var(--ap-accent-strong)}
.guide-menu-chapter[open]>summary::before{content:'▾'}
.guide-menu-chapter>summary span{flex:1}
.guide-menu-chapter>summary small{color:var(--ap-muted);font:11px var(--ap-mono);white-space:nowrap}
.guide-menu-cards{display:grid;gap:3px;padding:2px 8px 10px}
.guide-menu-card{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:10px;text-align:left;
 padding:10px;min-height:42px;box-shadow:none;clip-path:none;font:12px var(--ap-body);text-transform:none;letter-spacing:0;
 background:rgba(125,187,209,.05);color:var(--ap-text);border:1px solid transparent}
.guide-menu-card:hover,.guide-menu-card.active{border-color:var(--ap-accent);background:rgba(125,187,209,.18)}
.guide-menu-number{font:11px var(--ap-mono);color:var(--ap-accent-strong);min-width:20px}
.start-choice-backdrop{position:fixed;inset:0;z-index:120;background:rgba(2,7,13,.84);
 display:grid;place-items:center;padding:16px;overflow-y:auto}
.start-choice-card{width:min(760px,100%);padding:clamp(18px,3vw,30px);border:1px solid var(--ap-accent);
 background:rgba(12,30,44,.99);box-shadow:0 22px 70px rgba(0,0,0,.75)}
.start-choice-card h2{font:800 clamp(24px,3vw,35px) var(--ap-display);color:var(--ap-headline);margin:8px 0 12px}
.start-choice-card>p{color:var(--ap-muted);line-height:1.6;font-size:16px;margin:0 0 22px}
.start-choice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.start-option{display:flex;flex-direction:column;align-items:flex-start;text-align:left;justify-content:center;gap:9px;min-height:130px;
 padding:22px;white-space:normal;border:1px solid var(--ap-stroke);clip-path:var(--ap-cut-card)}
.start-option strong{font:800 18px var(--ap-display)}
.start-option span{font:14px/1.5 var(--ap-body);color:var(--ap-muted);text-transform:none;letter-spacing:normal}
.start-option.guided{border-color:var(--ap-accent-strong);background:linear-gradient(160deg,var(--ap-panel-raised),var(--ap-btn-active))}
.start-cancel{margin-top:20px;font-size:12px}
@media(max-width:620px){
 .guide-nav-panel{position:fixed;left:8px;right:8px;top:110px;width:auto;max-height:calc(100dvh - 135px)}
 .start-choice-actions{grid-template-columns:1fr}
 .start-option{min-height:100px;padding:15px}
 .start-choice-card>p{font-size:14px}
}
/* FIRSTGROOVE033: teaching feedback, groove variations and MPC editing */
.guide-feedback{padding:10px 12px;background:rgba(207,146,63,.16);border-left:3px solid #e8be6e;color:#f4d9a0;font-weight:700;margin-top:9px!important}
.guide-feedback[hidden],.groove-variations[hidden]{display:none!important}
.pad-edit-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 16px}
.pad-edit-actions button{font-size:12px}
#padEditNote{font-size:12px;color:var(--ap-muted)}
.groove-variations{padding:18px 22px;margin-top:12px;display:grid;gap:10px}
.groove-variations h3{font-family:var(--ap-display);margin:5px 0}
.groove-variation-buttons{display:flex;gap:10px;flex-wrap:wrap}
.groove-variation-buttons button{flex:0 1 auto}
#variationStatus{color:var(--ap-accent-strong);font-size:13px}
.meter-control{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:12px;color:var(--ap-muted)}
.meter-control select{min-width:65px}
@media(max-width:650px){.pad-edit-actions{padding:10px}.pad-edit-actions button{flex:1 1 auto}.groove-variations{padding:12px}.groove-variation-buttons button{flex:1 1 46%}}

/* KCG035: product/mode separation, editable full-width hero, responsive Pad Studio */
body.mode-free .production-mission,body.mode-free .lesson-details,body.mode-free .page-help,body.mode-free #status,body.mode-free #grooveVariations,body.mode-free #sidebarGuide{display:none!important}
.theme-picker{display:flex;flex-direction:column;gap:3px;color:var(--ap-muted);font:10px var(--ap-display);letter-spacing:.09em}
.theme-picker select{min-width:148px;max-width:200px;padding:8px 22px 8px 10px;border:1px solid var(--ap-stroke);background:var(--ap-panel);color:var(--ap-text);font:12px var(--ap-display);clip-path:var(--ap-cut-btn)}
#kcgHero{background-image:linear-gradient(90deg,rgba(6,17,28,.92) 0%,rgba(6,17,28,.65) 51%,rgba(6,17,28,.18) 100%),url('./assets/hero-equalizer-clean.png');background-position:center;background-size:cover;min-height:315px;display:flex;align-items:center}
#kcgHero .hero-copy{position:relative;z-index:1;max-width:690px}
#kcgHero .hero-art{display:none!important}
#kcgHero h2{font-size:clamp(35px,4.8vw,76px);color:#f1f8fc;text-shadow:0 2px 14px rgba(0,0,0,.8)}
#kcgHero p{max-width:480px;color:#f1f8fc;text-shadow:0 1px 8px rgba(0,0,0,.75)}
#kcgHero .tiny-kicker{color:#9ad5e7}
.pad-library{margin-top:16px;padding:12px 15px;background:var(--ap-panel-soft);border-color:var(--ap-stroke-subtle)}
.pad-library-heading,.pad-library-fields{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.pad-library-heading strong{font:700 17px var(--ap-display);color:var(--ap-accent-strong)}
.pad-library-heading span,#padScaleSource{font-size:12px;color:var(--ap-muted)}
.pad-library-fields label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ap-muted)}
.pad-library-fields select{max-width:320px;min-width:120px}
#padRecordInfo{font-size:12px;color:var(--ap-muted);margin:6px 0 0}
.pad-mode-switch{display:flex;gap:4px}.pad-mode-switch button[aria-pressed=true]{background:var(--ap-accent);color:#061923;border-color:var(--ap-accent)}
.pad.selected-pad{outline:3px solid var(--ap-accent-strong);outline-offset:-3px}
.pad.pad-scale{background:linear-gradient(155deg,#305d88,#162c42);border-color:#77b1db}
.pad.pad-scale strong{font-size:clamp(15px,2vw,21px)}
:root[data-ap-theme=red]{--ap-bg:#08080c;--ap-surface:#111015;--ap-panel:#18141b;--ap-panel-raised:#282027;--ap-panel-soft:#1e171c;--ap-btn:#24191e;--ap-btn-raised:#40232c;--ap-btn-active:#130e12;--ap-stroke:#a84352;--ap-stroke-subtle:#5c2734;--ap-accent:#df4e63;--ap-accent-strong:#ff6673;--ap-text:#fff1f2;--ap-headline:#ffedef;--ap-muted:#d4a5aa;--ap-dim:#bb818a;--ap-backdrop:linear-gradient(125deg,#09090b,#210c12);--ap-glow:rgba(235,53,86,.24);--ap-depth:#050407;color-scheme:dark}
:root[data-ap-theme=azure]{--ap-bg:#eef5fb;--ap-surface:#fff;--ap-panel:#f5faff;--ap-panel-raised:#e2eff8;--ap-panel-soft:#edf7ff;--ap-btn:#f2f7fd;--ap-btn-raised:#fff;--ap-btn-active:#d8edf9;--ap-stroke:#197db3;--ap-stroke-subtle:#9bc5df;--ap-accent:#157eb9;--ap-accent-strong:#005b9b;--ap-text:#163c5a;--ap-headline:#093d6b;--ap-muted:#557587;--ap-dim:#627f94;--ap-backdrop:linear-gradient(125deg,#f7fbff,#d8edfa);--ap-glow:rgba(11,126,187,.16);--ap-depth:#a1bfce;color-scheme:light}
:root[data-ap-theme=azure] .pad,:root[data-ap-theme=azure] .primary{color:#fff}
:root[data-ap-theme=azure] .theme-picker select{color:var(--ap-text)}
:root[data-ap-theme=azure] .guide-card,:root[data-ap-theme=azure] .guide-nav-panel{background:#f5faff}
:root[data-ap-theme=azure] .topbar .brand-mark{color:#a47c25;border-color:#c49a42}
:root[data-ap-theme=aurum] .pad-library{background:var(--ap-panel-soft)}
@media(max-width:760px){#kcgHero{min-height:220px;padding:18px;background-position:60% center}#kcgHero h2{font-size:clamp(31px,8vw,52px)}.pad-library-fields{align-items:stretch}.pad-library-fields label{width:100%;flex-wrap:wrap}.pad-library-fields select{max-width:100%;width:100%}.pad-mode-switch{width:100%}.pad-mode-switch button{flex:1}}

/* v0.3.5 finishing touches */
.pad-library{width:min(800px,100%)}
body.mode-free #status[data-alert=true]{display:block!important}
:root[data-ap-theme=azure] .panel{background:var(--ap-panel);color:var(--ap-text)}
:root[data-ap-theme=azure] .global-transport{background:rgba(248,252,255,.97)}
:root[data-ap-theme=azure] .sidebar{background:#f8fcff}
:root[data-ap-theme=azure] .guide-nav-panel,:root[data-ap-theme=azure] .start-choice-card,:root[data-ap-theme=azure] .guide-card{background:#f5faff;color:var(--ap-text)}
:root[data-ap-theme=azure] .start-option{background:#eaf5ff;color:var(--ap-text)}
:root[data-ap-theme=azure] .start-option span{color:var(--ap-muted)}
:root[data-ap-theme=azure] #pads .pad{color:#fff}
:root[data-ap-theme=azure] #status{background:#f8fcff;color:var(--ap-text)}
:root[data-ap-theme=azure] .track{background:#eaf5fd}

body.mode-free .kcg-page .page-heading p,body.mode-free .kcg-page .hint:not(#sampleInfo):not(#labInfo){display:none!important}
@media(max-width:530px){.topbar .brand-copy strong{font-size:clamp(18px,5vw,26px)}.topbar-actions{gap:5px}.theme-picker select{min-width:106px;max-width:160px}}