:root {
  --bg: #07090a;
  --bg-2: #0b0e10;
  --panel: #121619;
  --panel-hi: #171c20;
  --panel-lo: #0b0e10;
  --text: #f2f4ef;
  --muted: #8d969c;
  --muted-2: #616a70;
  --line: #2a3136;
  --line-hi: #3c464d;
  --acid: #c9ff32;
  --acid-soft: rgba(201,255,50,.12);
  --cyan: #63dcff;
  --cyan-soft: rgba(99,220,255,.11);
  --amber: #ffb94a;
  --shadow: 0 28px 80px rgba(0,0,0,.38);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 15% -10%,rgba(201,255,50,.07),transparent 28rem),radial-gradient(circle at 95% 0%,rgba(99,220,255,.055),transparent 30rem),linear-gradient(180deg,#060809 0%,#0a0c0e 48%,#07090a 100%);overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.07;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px);mask-image:linear-gradient(to bottom,black,transparent 78%)}
a{color:inherit}button,input{font:inherit}button{cursor:pointer}.site-header,main,footer{position:relative;z-index:2;width:min(1240px,calc(100% - 36px));margin-inline:auto}
.site-header{height:98px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}.brand-emblem{width:61px;height:51px;display:grid;place-items:center;border:1px solid var(--line-hi);border-radius:9px;background:linear-gradient(145deg,#22292d,#0b0e10 72%);box-shadow:inset 0 1px rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.35);position:relative}.brand-emblem:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.04);border-radius:5px}.brand-emblem svg{width:44px;height:34px}.anvil-fill{fill:var(--acid)}.anvil-cut{fill:#111618}.brand-copy{display:flex;flex-direction:column;gap:4px}.brand-name{font-weight:950;font-size:1.12rem;letter-spacing:.12em;line-height:1}.brand-name span,.footer-brand strong span{color:var(--acid)}.brand-sub{font:700 .58rem/1 var(--mono);letter-spacing:.16em;color:var(--muted-2)}
.header-nav{display:flex;align-items:center;gap:7px}.header-nav a{padding:11px 12px;text-decoration:none;text-transform:uppercase;font:800 .68rem/1 var(--mono);letter-spacing:.1em;color:var(--muted)}.header-nav a:hover{color:var(--text)}.lang-button,.utility-button{border:1px solid var(--line);background:#111518;color:var(--text);border-radius:8px;padding:10px 13px;font:800 .72rem/1 var(--mono);letter-spacing:.08em;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.hero{min-height:560px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:74px 0 72px}.status-line{display:flex;align-items:center;gap:10px;margin:0 0 24px;color:var(--acid);font:800 .68rem/1 var(--mono);letter-spacing:.12em}.status-led,.power-led,.mini-led{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 14px rgba(201,255,50,.65)}.hero h1{font-size:clamp(3.2rem,6.5vw,6.3rem);line-height:.9;letter-spacing:-.065em;margin:0;max-width:770px}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(242,244,239,.8);text-shadow:0 0 45px rgba(255,255,255,.025)}.hero-copy{max-width:650px;margin:30px 0 0;color:#a5adb3;font-size:1.08rem;line-height:1.7}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:34px}.primary-cta{display:inline-flex;align-items:center;gap:28px;text-decoration:none;color:#090b0b;background:var(--acid);padding:15px 18px 15px 20px;border-radius:7px;font:900 .75rem/1 var(--mono);letter-spacing:.06em;box-shadow:0 0 0 1px rgba(201,255,50,.5),0 10px 34px rgba(201,255,50,.08)}.primary-cta:hover{filter:brightness(1.05)}.hero-note{color:var(--muted-2);font:700 .65rem/1.3 var(--mono);letter-spacing:.05em}
.rack-preview{position:relative;min-height:350px;border:1px solid #3a4349;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 38%),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),#12171a;box-shadow:inset 0 1px rgba(255,255,255,.07),inset 0 -22px 70px rgba(0,0,0,.20),var(--shadow);padding:26px 30px}.rack-preview:before,.rack-preview:after{content:"";position:absolute;left:14px;right:14px;height:8px;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(0,0,0,.7)}.rack-preview:before{top:10px}.rack-preview:after{bottom:10px}.rack-screw,.module-screw{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#707981,#30363b 52%,#15191c 54%);box-shadow:0 0 0 1px #080a0b}.screw-a{left:9px;top:50%;transform:translateY(-50%)}.screw-b{right:9px;top:50%;transform:translateY(-50%)}.rack-label-row,.rack-footer{display:flex;justify-content:space-between;align-items:center;font:700 .6rem/1 var(--mono);letter-spacing:.1em;color:var(--muted-2)}.rack-ready{color:var(--acid)}.signal-path{display:flex;align-items:center;justify-content:space-between;margin:42px 0 32px}.signal-node{width:90px;height:88px;border:1px solid #384147;border-radius:8px;background:#0b0f11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 0 26px rgba(0,0,0,.4)}.signal-node.active{border-color:rgba(201,255,50,.45);box-shadow:inset 0 0 30px rgba(201,255,50,.045),0 0 30px rgba(201,255,50,.025)}.signal-node.blue{border-color:rgba(99,220,255,.4)}.signal-node strong{font:900 1.05rem/1 var(--mono);letter-spacing:.08em}.signal-node small{font:700 .5rem/1 var(--mono);letter-spacing:.08em;color:var(--muted-2)}.node-no{position:absolute;margin-top:-75px;margin-left:-64px;color:var(--muted-2);font:700 .48rem/1 var(--mono)}.signal-wire{flex:1;display:flex;align-items:center;margin:0 9px}.signal-wire:before,.signal-wire:after{content:"";width:4px;height:4px;border-radius:50%;background:#465158}.signal-wire span{height:1px;background:#364047;flex:1}.rack-display{border:1px solid #2f393f;border-radius:6px;background:#060909;padding:18px 20px;box-shadow:inset 0 0 28px rgba(0,0,0,.55);font-family:var(--mono)}.rack-display .display-label{display:block;margin-bottom:7px;color:var(--muted-2);font-size:.52rem;letter-spacing:.11em}.rack-display strong{color:var(--acid);font-size:.88rem;letter-spacing:.06em}.display-cursor{color:var(--acid);animation:blink 1s steps(1,end) infinite}@keyframes blink{50%{opacity:0}}.rack-footer{margin-top:24px}
.tool-index{padding:34px 0 72px;border-top:1px solid rgba(255,255,255,.07)}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:24px}.section-head>div{display:flex;align-items:baseline;gap:16px}.section-code{color:var(--acid);font:800 .62rem/1 var(--mono);letter-spacing:.08em}.section-head h2,.workbench-title h2{margin:0;font-size:1.7rem;letter-spacing:-.035em}.section-head p{max-width:530px;margin:0;color:var(--muted);font-size:.9rem;line-height:1.6}.index-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:7px;overflow:hidden}.index-card{min-height:112px;padding:18px 18px 16px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:11px 12px;text-decoration:none;background:#0e1214;border-right:1px solid var(--line);position:relative}.index-card:last-child{border-right:0}.index-card.live:hover{background:#121719}.index-card.live:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acid)}.index-card.live.blue:after{background:var(--cyan)}.index-num,.index-state{font:800 .55rem/1 var(--mono);letter-spacing:.08em}.index-num{color:var(--muted-2)}.index-state{justify-self:end;color:var(--acid)}.index-card.blue .index-state{color:var(--cyan)}.index-name{grid-column:1/-1;align-self:end;font-weight:800;font-size:.96rem}.index-card.future{opacity:.45}.index-card.future .index-state{color:var(--muted)}
.workbench{margin-bottom:48px}.workbench-header{height:78px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#181d20,#111518);padding:0 24px}.workbench-title{display:flex;align-items:baseline;gap:14px}.power-strip{display:flex;align-items:center;gap:9px;font:700 .56rem/1 var(--mono);letter-spacing:.08em;color:var(--muted-2)}
.module{position:relative;border:1px solid #343c42;background:repeating-linear-gradient(90deg,rgba(255,255,255,.008) 0 1px,transparent 1px 4px),linear-gradient(180deg,#151a1d,#0d1113);padding:34px 46px 40px;box-shadow:inset 0 1px rgba(255,255,255,.06),0 18px 55px rgba(0,0,0,.2)}.module+ .module{border-top:0}.module:last-child{border-radius:0 0 8px 8px}.module-rail{position:absolute;left:0;right:0;height:9px;background:linear-gradient(180deg,#1b2125,#090c0d);border-top:1px solid #31383d;border-bottom:1px solid #050708}.rail-top{top:0}.rail-bottom{bottom:0}.module-screw.tl{left:15px;top:17px}.module-screw.tr{right:15px;top:17px}.module-screw.bl{left:15px;bottom:17px}.module-screw.br{right:15px;bottom:17px}.module-header{display:flex;align-items:start;justify-content:space-between;gap:30px;margin-bottom:30px}.module-code{display:block;margin-bottom:8px;color:var(--acid);font:800 .58rem/1 var(--mono);letter-spacing:.11em}.blue-text{color:var(--cyan)}.module-header h3{margin:0;font-size:2rem;letter-spacing:-.045em}.module-header p{margin:9px 0 0;max-width:610px;color:var(--muted);line-height:1.55;font-size:.91rem}.utility-button{color:var(--muted);padding:10px 14px}.sync-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(99,220,255,.24);border-radius:5px;padding:9px 10px;color:var(--cyan);font:800 .58rem/1 var(--mono);letter-spacing:.1em}.sync-badge span{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(99,220,255,.6)}
.tap-console{display:grid;grid-template-columns:1.1fr .85fr .45fr;gap:22px;align-items:stretch}.digital-display{min-height:250px;border:1px solid #2e373c;border-radius:6px;background:radial-gradient(circle at 50% 45%,rgba(201,255,50,.04),transparent 55%),#050808;box-shadow:inset 0 0 42px rgba(0,0,0,.65);padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.digital-display:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,rgba(201,255,50,.018) 5px 6px);pointer-events:none}.display-label{font:700 .55rem/1 var(--mono);letter-spacing:.12em;color:#607268}.digital-display strong{font:900 clamp(4.5rem,9vw,8.3rem)/.85 var(--mono);letter-spacing:-.08em;color:var(--acid);text-shadow:0 0 22px rgba(201,255,50,.12);font-variant-numeric:tabular-nums}.display-bars{position:absolute;bottom:20px;display:flex;gap:5px}.display-bars i{width:16px;height:3px;background:#263228}.display-bars i:nth-child(-n+3){background:#607742}.tap-pad{min-height:250px;border:1px solid #3b444a;border-radius:6px;background:linear-gradient(145deg,#1b2023,#0b0e10);display:grid;place-items:center;position:relative;overflow:hidden;color:var(--text);box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -30px 70px rgba(0,0,0,.3)}.tap-pad:hover{border-color:#566167}.tap-pad:active,.tap-pad.is-tapping{transform:translateY(1px);border-color:rgba(201,255,50,.72);box-shadow:inset 0 0 70px rgba(201,255,50,.055),0 0 0 3px rgba(201,255,50,.035)}.tap-pad-ring{position:absolute;border-radius:50%;border:1px solid rgba(201,255,50,.16)}.tap-pad-ring.outer{width:184px;height:184px}.tap-pad-ring.inner{width:132px;height:132px;border-color:rgba(255,255,255,.09)}.tap-pad-core{width:104px;height:104px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 45% 35%,#30383d,#111518 62%);border:1px solid #454f55;box-shadow:inset 0 1px rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.35)}.tap-icon{font:950 1.05rem/1 var(--mono);letter-spacing:.12em}.tap-pad small{margin-top:6px;color:var(--muted-2);font:700 .48rem/1 var(--mono);letter-spacing:.06em}.tap-meters{display:grid;grid-template-rows:1fr 1fr;gap:12px}.tap-meters>div{border:1px solid var(--line);border-radius:6px;background:#0b0f11;padding:18px 16px;display:flex;flex-direction:column;justify-content:center}.tap-meters span{color:var(--muted-2);font:700 .52rem/1 var(--mono);letter-spacing:.1em}.tap-meters strong{margin-top:9px;font:900 2rem/1 var(--mono);font-variant-numeric:tabular-nums}
.delay-console{display:grid;grid-template-columns:.75fr 1.25fr;gap:24px}.tempo-control,.delay-grid-wrap{border:1px solid var(--line);border-radius:6px;background:#0b0f11;padding:22px}.control-label,.formula-block span,.delay-grid-head{color:var(--muted-2);font:700 .54rem/1 var(--mono);letter-spacing:.11em}.tempo-readout{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;margin-top:12px}.tempo-readout>button{border:1px solid #333c42;background:#151a1d;color:var(--text);border-radius:5px;font:500 1.5rem/1 var(--mono)}.input-shell{border:1px solid #343f45;border-radius:5px;background:#050808;display:flex;align-items:center;justify-content:center;gap:9px;padding:5px 10px;box-shadow:inset 0 0 22px rgba(0,0,0,.55)}.input-shell input{width:95px;border:0;outline:0;background:transparent;color:var(--cyan);font:900 2.3rem/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}.input-shell input::-webkit-outer-spin-button,.input-shell input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-shell span{color:var(--muted-2);font:700 .56rem/1 var(--mono)}.use-tap-button{width:100%;margin-top:10px;border:1px solid rgba(201,255,50,.22);border-radius:5px;background:rgba(201,255,50,.025);color:var(--text);padding:12px;display:flex;align-items:center;justify-content:center;gap:9px;font:800 .58rem/1 var(--mono);letter-spacing:.08em}.use-tap-button:hover{background:rgba(201,255,50,.055)}.formula-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.formula-block span{display:block;margin-bottom:8px}.formula-block code{color:#8f9a92;font:600 .68rem/1.5 var(--mono)}.delay-grid-wrap{padding:0;overflow:hidden}.delay-grid-head{height:41px;display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 16px;border-bottom:1px solid var(--line)}.delay-grid{display:grid;grid-template-columns:1fr 1fr}.delay-row{min-height:54px;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #242b2f}.delay-row:nth-child(odd){border-right:1px solid #242b2f}.delay-row:nth-last-child(-n+2){border-bottom:0}.delay-row span{color:#b7bdc1;font-size:.78rem}.delay-row strong{color:#dff8ff;font:800 .72rem/1 var(--mono);font-variant-numeric:tabular-nums}
.manifesto{min-height:114px;margin:0 0 58px;border:1px solid var(--line);border-radius:7px;background:#0d1113;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:22px 26px}.manifesto-mark{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--acid);font-size:1.4rem}.manifesto p{margin:0;font-size:1.08rem;color:var(--muted)}.manifesto strong{color:var(--text)}.manifesto-meta{font:700 .55rem/1.5 var(--mono);letter-spacing:.08em;color:var(--muted-2);text-align:right}
footer{min-height:116px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;gap:28px;color:var(--muted-2)}.footer-brand{display:flex;align-items:center;gap:11px}.footer-anvil{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;color:var(--acid);font:900 .65rem/1 var(--mono)}.footer-brand>span:last-child{display:flex;flex-direction:column;gap:3px}.footer-brand strong{color:var(--text);font-size:.77rem;letter-spacing:.12em}.footer-brand small{font:700 .5rem/1 var(--mono);letter-spacing:.1em}.footer-right{display:flex;align-items:center;gap:24px;font:600 .58rem/1 var(--mono);letter-spacing:.04em}
@media(max-width:960px){.hero{grid-template-columns:1fr;gap:44px;min-height:auto;padding-top:58px}.rack-preview{max-width:650px}.index-grid{grid-template-columns:1fr 1fr}.index-card:nth-child(2){border-right:0}.index-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.tap-console{grid-template-columns:1fr 1fr}.tap-meters{grid-column:1/-1;grid-template-columns:1fr 1fr;grid-template-rows:auto}.delay-console{grid-template-columns:1fr}.module{padding-inline:36px}}
@media(max-width:680px){.site-header,main,footer{width:min(100% - 24px,1240px)}.site-header{height:82px}.brand-emblem{width:48px;height:42px}.brand-emblem svg{width:36px}.brand-sub{display:none}.brand-name{font-size:.92rem}.header-nav a{display:none}.hero{padding:48px 0 54px}.hero h1{font-size:clamp(3rem,16vw,4.8rem)}.hero-copy{font-size:.98rem}.hero-actions{align-items:flex-start;flex-direction:column}.rack-preview{padding:24px 20px;min-height:320px}.signal-node{width:72px;height:76px}.signal-node small{display:none}.signal-wire{margin:0 4px}.section-head{align-items:flex-start;flex-direction:column;gap:12px}.index-grid{grid-template-columns:1fr}.index-card{border-right:0;border-bottom:1px solid var(--line)}.index-card:last-child{border-bottom:0}.workbench-header{padding:0 16px}.power-strip{display:none}.module{padding:32px 24px 36px}.module-header{flex-direction:column}.tap-console{grid-template-columns:1fr}.tap-meters{grid-column:auto;grid-template-columns:1fr 1fr}.digital-display,.tap-pad{min-height:220px}.delay-grid{grid-template-columns:1fr}.delay-row:nth-child(odd){border-right:0}.delay-row:nth-last-child(2){border-bottom:1px solid #242b2f}.manifesto{grid-template-columns:auto 1fr}.manifesto-meta{display:none}footer{align-items:flex-start;flex-direction:column;padding:28px 0}.footer-right{align-items:flex-start;flex-direction:column;gap:8px}}
@media(max-width:430px){.signal-path{gap:2px}.signal-node{width:66px}.rack-display strong{font-size:.75rem}.module{padding-inline:18px}.tempo-readout{grid-template-columns:46px 1fr 46px}.input-shell input{font-size:1.9rem;width:80px}.tap-meters{grid-template-columns:1fr}.manifesto{grid-template-columns:1fr}.manifesto-mark{display:none}}

/* v0.3 — multi-page structure */
.header-nav .nav-live{color:var(--text)}
.page-shell{padding:56px 0 70px}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:24px;color:var(--muted-2);font:700 .58rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.breadcrumb a{text-decoration:none;color:var(--muted)}.breadcrumb a:hover{color:var(--text)}
.tool-page-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:36px;padding:20px 0 42px}
.tool-page-hero h1{margin:8px 0 0;font-size:clamp(2.8rem,6vw,5.4rem);line-height:.92;letter-spacing:-.055em}
.tool-page-hero p{max-width:720px;margin:22px 0 0;color:#a5adb3;font-size:1rem;line-height:1.7}
.tool-page-badge{align-self:start;border:1px solid var(--line);border-radius:7px;padding:12px 14px;background:#0d1113;color:var(--muted);font:800 .58rem/1 var(--mono);letter-spacing:.08em;white-space:nowrap}
.tool-page-module{margin-bottom:34px}
.seo-copy{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:34px 0 56px}
.info-panel{border:1px solid var(--line);border-radius:7px;background:#0d1113;padding:26px}
.info-panel h2{margin:0 0 12px;font-size:1.2rem;letter-spacing:-.025em}
.info-panel p,.info-panel li{color:var(--muted);line-height:1.7;font-size:.9rem}
.info-panel ul{margin:12px 0 0;padding-left:20px}
.info-panel code{color:var(--cyan);font-family:var(--mono)}
.home-tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:48px}
.home-tool{display:flex;flex-direction:column;min-height:250px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#151a1d,#0d1113);padding:28px;text-decoration:none;position:relative;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.home-tool:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acid)}
.home-tool.blue:after{background:var(--cyan)}
.home-tool:hover{border-color:#465158;transform:translateY(-1px)}
.home-tool .home-tool-code{font:800 .58rem/1 var(--mono);letter-spacing:.1em;color:var(--acid)}
.home-tool.blue .home-tool-code{color:var(--cyan)}
.home-tool h3{margin:18px 0 10px;font-size:2rem;letter-spacing:-.04em}
.home-tool p{max-width:520px;margin:0;color:var(--muted);line-height:1.6}
.home-tool .open-label{margin-top:auto;padding-top:28px;color:var(--text);font:800 .62rem/1 var(--mono);letter-spacing:.08em}
.future-rack{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.future-slot{border:1px dashed #30383d;border-radius:7px;padding:18px;color:var(--muted-2);font:700 .58rem/1.4 var(--mono);letter-spacing:.07em}
.compact-hero{min-height:430px}
.no-js-note{margin:18px 0;color:var(--amber);font:700 .62rem/1.5 var(--mono)}
@media(max-width:780px){.home-tool-grid,.seo-copy{grid-template-columns:1fr}.tool-page-hero{grid-template-columns:1fr}.tool-page-badge{justify-self:start}.future-rack{grid-template-columns:1fr}}


/* v0.4 — Tool 03: Loop / Sample Length */
.home-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-tool.amber:after{background:var(--amber)}
.home-tool.amber .home-tool-code{color:var(--amber)}
.loop-console{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.loop-controls,.loop-results{border:1px solid var(--line);border-radius:6px;background:#0b0f11;padding:22px}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-block{display:flex;flex-direction:column;gap:8px}
.field-block>span{color:var(--muted-2);font:700 .54rem/1 var(--mono);letter-spacing:.11em}
.field-block input,.field-block select{width:100%;height:50px;border:1px solid #343f45;border-radius:5px;background:#050808;color:var(--text);padding:0 13px;outline:none;font:800 1rem/1 var(--mono)}
.field-block input:focus,.field-block select:focus{border-color:rgba(255,185,74,.62);box-shadow:0 0 0 3px rgba(255,185,74,.05)}
.meter-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.meter-slash{color:var(--muted-2);font:900 1rem/1 var(--mono)}
.bar-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.bar-presets button{border:1px solid #30383d;border-radius:4px;background:#111619;color:var(--muted);height:34px;font:800 .57rem/1 var(--mono)}
.bar-presets button:hover{border-color:#5b4a30;color:#ffd99b;background:rgba(255,185,74,.045)}
.loop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.loop-actions button{min-height:44px;border-radius:5px;font:800 .58rem/1 var(--mono);letter-spacing:.07em}
.loop-actions .use-tap-button{margin:0}
.copy-result{border:1px solid rgba(255,185,74,.25);background:rgba(255,185,74,.035);color:var(--text)}
.copy-result:hover{background:rgba(255,185,74,.075)}
.loop-assumption{margin:14px 0 0;color:var(--muted-2);font:650 .54rem/1.5 var(--mono)}
.result-main{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.result-card{min-height:112px;border:1px solid #293136;border-radius:5px;background:#070a0c;padding:15px;display:flex;flex-direction:column;justify-content:center}
.result-card span{color:var(--muted-2);font:700 .51rem/1 var(--mono);letter-spacing:.09em}
.result-card strong{margin-top:10px;color:#fff2d8;font:900 clamp(1rem,2.2vw,1.55rem)/1.05 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-card.primary{grid-column:span 2;border-color:rgba(255,185,74,.28);background:radial-gradient(circle at 10% 10%,rgba(255,185,74,.06),transparent 55%),#070a0c}
.result-card.primary strong{font-size:clamp(1.65rem,3.2vw,2.65rem);color:var(--amber)}
.secondary-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.metric-chip{border-top:1px solid var(--line);padding-top:14px}
.metric-chip span{display:block;color:var(--muted-2);font:700 .5rem/1 var(--mono);letter-spacing:.08em}
.metric-chip strong{display:block;margin-top:7px;font:800 .75rem/1.2 var(--mono);color:#cbd1d4;font-variant-numeric:tabular-nums}
.loop-table-wrap{margin-top:18px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0b0f11}
.loop-table-title{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;border-bottom:1px solid var(--line)}
.loop-table-title h3{margin:0;font-size:.9rem}
.loop-table-title span{color:var(--muted-2);font:700 .52rem/1 var(--mono);letter-spacing:.08em}
.loop-reference{width:100%;border-collapse:collapse}
.loop-reference th,.loop-reference td{padding:12px 16px;border-bottom:1px solid #232a2e;text-align:left}
.loop-reference th{color:var(--muted-2);font:700 .51rem/1 var(--mono);letter-spacing:.08em}
.loop-reference td{color:#b9c0c4;font-size:.78rem}
.loop-reference td:nth-child(2),.loop-reference td:nth-child(3){font-family:var(--mono);font-weight:800;font-variant-numeric:tabular-nums}
.loop-reference tr:last-child td{border-bottom:0}
@media(max-width:1040px){.home-tool-grid{grid-template-columns:1fr 1fr}.loop-console{grid-template-columns:1fr}}
@media(max-width:680px){.home-tool-grid{grid-template-columns:1fr}.control-grid{grid-template-columns:1fr}.bar-presets{grid-template-columns:repeat(3,1fr)}.loop-actions{grid-template-columns:1fr}.result-main{grid-template-columns:1fr 1fr}.result-card.primary{grid-column:1/-1}.secondary-metrics{grid-template-columns:1fr}.loop-table-wrap{overflow-x:auto}.loop-reference{min-width:520px}}


/* v0.8 — Tool 04: Note Frequency / MIDI */
.home-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-tool.violet:after{background:#b68cff}
.home-tool.violet .home-tool-code{color:#c8a7ff}
.pitch-console{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pitch-panel{border:1px solid var(--line);border-radius:7px;background:#0b0f11;padding:22px}
.pitch-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.pitch-panel-head h3{margin:0;font-size:.9rem;letter-spacing:.02em}
.pitch-panel-head span{color:#c8a7ff;font:800 .53rem/1 var(--mono);letter-spacing:.09em}
.pitch-global{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;border:1px solid #2c3439;border-radius:7px;padding:16px;background:#080b0d}
.pitch-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pitch-presets button,.spelling-toggle button{border:1px solid #30383d;background:#111619;color:var(--muted);border-radius:4px;height:32px;padding:0 11px;font:800 .55rem/1 var(--mono)}
.pitch-presets button:hover,.spelling-toggle button:hover,.spelling-toggle button.active{border-color:rgba(182,140,255,.55);color:#dfceff;background:rgba(182,140,255,.06)}
.spelling-toggle{display:flex;gap:6px;margin-top:8px}
.pitch-input-row{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}
.pitch-input-row.single{grid-template-columns:1fr}
.pitch-result-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;margin-top:16px}
.pitch-result{min-height:104px;border:1px solid #293136;border-radius:5px;background:#070a0c;padding:14px;display:flex;flex-direction:column;justify-content:center}
.pitch-result span{color:var(--muted-2);font:700 .5rem/1 var(--mono);letter-spacing:.08em}
.pitch-result strong{margin-top:9px;color:#e9ddff;font:900 clamp(.95rem,2vw,1.35rem)/1.05 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pitch-result.primary{border-color:rgba(182,140,255,.28);background:radial-gradient(circle at 12% 15%,rgba(182,140,255,.07),transparent 55%),#070a0c}
.pitch-result.primary strong{color:#c8a7ff;font-size:clamp(1.3rem,2.8vw,2.2rem)}
.pitch-actions{display:flex;gap:8px;margin-top:14px}
.pitch-actions button{min-height:42px;border-radius:5px;padding:0 14px;font:800 .57rem/1 var(--mono);letter-spacing:.07em}
.play-tone{border:1px solid rgba(182,140,255,.28);background:rgba(182,140,255,.04);color:#e7dcff}
.play-tone:hover{background:rgba(182,140,255,.09)}
.pitch-formula{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.pitch-formula span{display:block;color:var(--muted-2);font:700 .5rem/1 var(--mono);letter-spacing:.08em}
.pitch-formula code{display:block;margin-top:7px;color:#c8a7ff;font:700 .68rem/1.5 var(--mono)}
.cents-meter{margin-top:12px;height:8px;border:1px solid #2d353a;border-radius:99px;background:linear-gradient(90deg,#172026,#252c31 50%,#172026);position:relative;overflow:hidden}
.cents-meter:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#6d777d}
.cents-marker{position:absolute;top:1px;bottom:1px;width:5px;border-radius:99px;background:#c8a7ff;left:50%;transform:translateX(-50%);box-shadow:0 0 10px rgba(182,140,255,.55)}
.pitch-help{margin-top:8px;color:var(--muted-2);font:650 .52rem/1.5 var(--mono)}
@media(max-width:900px){.pitch-console{grid-template-columns:1fr}}
@media(max-width:680px){.pitch-global,.pitch-input-row,.pitch-result-grid{grid-template-columns:1fr}.home-tool-grid{grid-template-columns:1fr}}


/* v0.9 — Tool 05: Chord Transposer */
.home-tool.rose:after{background:#ff7aa8}
.home-tool.rose .home-tool-code{color:#ff9abb}
.transpose-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px;border:1px solid #2c3439;border-radius:7px;padding:16px;background:#080b0d}
.transpose-console{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.chart-panel{border:1px solid var(--line);border-radius:7px;background:#0b0f11;overflow:hidden}
.chart-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;border-bottom:1px solid var(--line)}
.chart-panel-head span:first-child{color:var(--muted-2);font:800 .53rem/1 var(--mono);letter-spacing:.09em}
.chart-panel-actions{display:flex;gap:6px;flex-wrap:wrap}
.chart-panel-actions button,.transpose-main-actions button{border:1px solid #30383d;background:#111619;color:var(--muted);border-radius:4px;min-height:34px;padding:0 10px;font:800 .54rem/1 var(--mono);letter-spacing:.04em}
.chart-panel-actions button:hover,.transpose-main-actions button:hover{border-color:rgba(255,122,168,.52);color:#ffc0d5;background:rgba(255,122,168,.06)}
.chart-editor{width:100%;min-height:420px;resize:vertical;border:0;outline:0;background:#070a0c;color:#d9dfe2;padding:18px;font:650 .79rem/1.75 var(--mono);tab-size:4}
.chart-editor::placeholder{color:#566168}
.chart-output{min-height:420px;white-space:pre-wrap;overflow:auto;background:#070a0c;color:#f1dbe3;padding:18px;font:650 .79rem/1.75 var(--mono)}
.chart-output .empty{color:var(--muted-2)}
.transpose-main-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.transpose-main-actions .primary-transpose{border-color:rgba(255,122,168,.34);background:rgba(255,122,168,.06);color:#ffd5e3}
.transpose-main-actions .primary-transpose:hover{background:rgba(255,122,168,.12)}
.transpose-status{margin-left:auto;color:var(--muted-2);font:700 .53rem/1.4 var(--mono)}
.shift-readout{display:flex;align-items:center;justify-content:center;height:50px;border:1px solid #343f45;border-radius:5px;background:#050808;color:#ffc4d8;font:900 .86rem/1 var(--mono)}
.transpose-note{margin:12px 0 0;color:var(--muted-2);font:650 .54rem/1.5 var(--mono)}
@media(max-width:1050px){.transpose-settings{grid-template-columns:1fr 1fr}.transpose-console{grid-template-columns:1fr}}
@media(max-width:620px){.transpose-settings{grid-template-columns:1fr}.chart-editor,.chart-output{min-height:330px}.transpose-status{width:100%;margin-left:0}}


/* v1.0 — Tool 06: Chord Identifier */
.home-tool.teal:after{background:#54e6c1}
.home-tool.teal .home-tool-code{color:#7af0d2}
.identify-top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin-bottom:18px}
.note-bank{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.note-pad{min-height:58px;border:1px solid #30383d;border-radius:6px;background:#0b1012;color:#aeb7bb;font:900 .72rem/1 var(--mono);transition:.12s ease}
.note-pad:hover{border-color:rgba(84,230,193,.42);color:#dafcf3}
.note-pad.active{border-color:rgba(84,230,193,.62);background:rgba(84,230,193,.09);color:#86f5d8;box-shadow:inset 0 0 0 1px rgba(84,230,193,.08),0 0 18px rgba(84,230,193,.04)}
.note-pad.black{background:#080b0d}
.identify-controls{display:flex;gap:8px;flex-wrap:wrap}
.identify-controls button{border:1px solid #30383d;background:#111619;color:var(--muted);border-radius:5px;min-height:40px;padding:0 12px;font:800 .55rem/1 var(--mono)}
.identify-controls button:hover{border-color:rgba(84,230,193,.48);color:#bdf8e8;background:rgba(84,230,193,.05)}
.selected-strip{display:grid;grid-template-columns:1fr 240px;gap:14px;margin-top:16px}
.selected-box,.bass-box{border:1px solid #2d353a;border-radius:6px;background:#080b0d;padding:14px}
.selected-box>span,.bass-box>span{display:block;color:var(--muted-2);font:800 .5rem/1 var(--mono);letter-spacing:.09em}
.selected-note-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;min-height:32px}
.selected-chip{display:inline-flex;align-items:center;border:1px solid rgba(84,230,193,.24);border-radius:99px;padding:7px 10px;background:rgba(84,230,193,.04);color:#c9fff1;font:800 .58rem/1 var(--mono)}
.bass-box select{width:100%;height:38px;margin-top:9px;border:1px solid #343f45;border-radius:5px;background:#050808;color:var(--text);padding:0 10px;font:800 .66rem/1 var(--mono)}
.match-section{margin-top:22px}
.match-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.match-section-head h3{margin:0;font-size:.92rem}
.match-section-head span{color:var(--muted-2);font:800 .5rem/1 var(--mono);letter-spacing:.08em}
.match-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chord-match{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:15px;display:grid;grid-template-columns:1fr auto;gap:12px}
.chord-match.exact{border-color:rgba(84,230,193,.25);background:radial-gradient(circle at 5% 10%,rgba(84,230,193,.06),transparent 45%),#090d0f}
.chord-match.close{border-color:#333a3f}
.chord-main strong{display:block;color:#dffbf4;font:900 1.35rem/1.05 var(--mono)}
.chord-main small{display:block;margin-top:7px;color:var(--muted);font:700 .58rem/1.35 var(--mono)}
.match-badge{align-self:start;border:1px solid rgba(84,230,193,.22);border-radius:99px;padding:6px 8px;color:#91f2d9;font:800 .48rem/1 var(--mono);letter-spacing:.06em}
.match-badge.near{border-color:#353d42;color:#8f9aa0}
.chord-meta{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;padding-top:12px;border-top:1px solid #242b2f}
.chord-meta div span{display:block;color:var(--muted-2);font:700 .47rem/1 var(--mono);letter-spacing:.08em}
.chord-meta div strong{display:block;margin-top:6px;color:#aeb8bd;font:750 .59rem/1.35 var(--mono);overflow-wrap:anywhere}
.empty-match{grid-column:1/-1;border:1px dashed #30383d;border-radius:7px;padding:18px;color:var(--muted-2);font:700 .59rem/1.5 var(--mono)}
@media(max-width:1000px){.note-bank{grid-template-columns:repeat(6,1fr)}.match-grid{grid-template-columns:1fr}}
@media(max-width:680px){.identify-top{grid-template-columns:1fr}.note-bank{grid-template-columns:repeat(4,1fr)}.selected-strip{grid-template-columns:1fr}.chord-meta{grid-template-columns:1fr}}


/* v1.1 — Producer Pack */
.home-tool.orange:after{background:#ffad52}
.home-tool.orange .home-tool-code{color:#ffc47f}
.home-tool.sky:after{background:#67cfff}
.home-tool.sky .home-tool-code{color:#92dcff}

/* Tool 07 — Kick/Bass Pocket Mapper */
.pocket-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px;margin-bottom:14px}
.pocket-controls.secondary{grid-template-columns:repeat(5,minmax(0,1fr))}
.pocket-presets{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}
.pocket-presets button,.pocket-actions button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em}
.pocket-presets button:hover,.pocket-actions button:hover{border-color:rgba(255,173,82,.52);color:#ffd6a8;background:rgba(255,173,82,.06)}
.seq-wrap{border:1px solid var(--line);border-radius:7px;background:#090d0f;overflow:auto}
.seq-row{display:grid;grid-template-columns:82px minmax(760px,1fr);border-bottom:1px solid #252c30}
.seq-row:last-child{border-bottom:0}
.seq-label{display:flex;align-items:center;padding:10px;color:var(--muted-2);font:900 .55rem/1 var(--mono);letter-spacing:.08em;background:#0d1214;position:sticky;left:0;z-index:3;border-right:1px solid #252c30}
.step-grid{display:grid;gap:3px;padding:9px;min-width:760px}
.seq-step{height:34px;border:1px solid #2d353a;border-radius:4px;background:#0b1012;color:#566168;font:800 .5rem/1 var(--mono);position:relative}
.seq-step.bar-start:before{content:"";position:absolute;left:-3px;top:-10px;bottom:-10px;width:1px;background:#4a5358}
.seq-step.beat-start{border-left-color:#485157}
.seq-step.active.kick{background:rgba(255,173,82,.15);border-color:rgba(255,173,82,.65);color:#ffd6a7;box-shadow:inset 0 0 0 1px rgba(255,173,82,.05)}
.seq-step.active.bass{background:rgba(103,207,255,.12);border-color:rgba(103,207,255,.58);color:#bdeaff}
.pocket-viz{display:grid;grid-template-columns:1.45fr .55fr;gap:14px;margin-top:16px}
.envelope-panel,.score-panel{border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px}
.envelope-canvas{display:block;width:100%;height:210px;border:1px solid #273035;border-radius:5px;background:#050809}
.score-panel{display:flex;flex-direction:column;justify-content:center}
.score-panel span{color:var(--muted-2);font:800 .51rem/1 var(--mono);letter-spacing:.09em}
.score-panel strong{margin-top:8px;color:#ffd1a0;font:900 2.5rem/1 var(--mono)}
.score-panel small{margin-top:10px;color:var(--muted);font:700 .57rem/1.5 var(--mono)}
.pocket-analysis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.hit-card{border:1px solid #2d353a;border-radius:7px;background:#090d0f;padding:14px}
.hit-card.clean{border-color:rgba(84,230,193,.28)}
.hit-card.partial{border-color:rgba(255,195,77,.28)}
.hit-card.swallowed{border-color:rgba(255,99,110,.32)}
.hit-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.hit-head strong{color:#dce2e5;font:900 .78rem/1 var(--mono)}
.hit-status{border-radius:99px;padding:5px 7px;font:900 .45rem/1 var(--mono);letter-spacing:.05em}
.hit-card.clean .hit-status{color:#8ff3da;background:rgba(84,230,193,.06)}
.hit-card.partial .hit-status{color:#ffd989;background:rgba(255,195,77,.06)}
.hit-card.swallowed .hit-status{color:#ffb0b6;background:rgba(255,99,110,.06)}
.hit-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.hit-metrics span{display:block;color:var(--muted-2);font:700 .45rem/1 var(--mono)}
.hit-metrics b{display:block;margin-top:5px;color:#aeb8bd;font:800 .59rem/1 var(--mono)}
.hit-suggestion{margin:10px 0 0;color:var(--muted);font:650 .56rem/1.5 var(--mono)}
.pocket-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

/* Tool 08 — Supersaw / Unison */
.unison-settings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.unison-presets{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 16px}
.unison-presets button,.unison-actions button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em}
.unison-presets button:hover,.unison-actions button:hover{border-color:rgba(103,207,255,.52);color:#c5eeff;background:rgba(103,207,255,.06)}
.unison-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.unison-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.unison-stat span{display:block;color:var(--muted-2);font:800 .49rem/1 var(--mono);letter-spacing:.08em}
.unison-stat strong{display:block;margin-top:8px;color:#c7efff;font:900 1.05rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
.unison-viz{height:190px;border:1px solid #283136;border-radius:7px;background:#06090b;margin-top:14px;position:relative;overflow:hidden}
.voice-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#7dd7ff;border:2px solid #d9f5ff;transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(103,207,255,.3)}
.voice-line{position:absolute;top:50%;width:1px;background:#2d353a;height:50%;transform-origin:top}
.unison-table-wrap{margin-top:14px;border:1px solid var(--line);border-radius:7px;overflow:auto;background:#090d0f}
.unison-table{width:100%;border-collapse:collapse;min-width:720px}
.unison-table th,.unison-table td{padding:11px 13px;border-bottom:1px solid #252c30;text-align:left}
.unison-table th{color:var(--muted-2);font:800 .48rem/1 var(--mono);letter-spacing:.08em}
.unison-table td{color:#b9c3c7;font:700 .62rem/1.25 var(--mono);font-variant-numeric:tabular-nums}
.unison-table tr:last-child td{border-bottom:0}
.inverse-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.inverse-result{display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:13px}
.inverse-result span{color:var(--muted-2);font:800 .48rem/1 var(--mono);letter-spacing:.08em}
.inverse-result strong{margin-top:8px;color:#bfeaff;font:900 .9rem/1.15 var(--mono)}
.unison-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}

@media(max-width:1100px){
  .pocket-controls{grid-template-columns:repeat(2,1fr)}
  .pocket-controls.secondary{grid-template-columns:repeat(3,1fr)}
  .unison-settings{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:780px){
  .pocket-viz{grid-template-columns:1fr}
  .pocket-analysis{grid-template-columns:1fr}
  .unison-summary{grid-template-columns:repeat(2,1fr)}
  .inverse-panel{grid-template-columns:1fr}
}
@media(max-width:620px){
  .pocket-controls,.pocket-controls.secondary,.unison-settings{grid-template-columns:1fr}
  .seq-row{grid-template-columns:66px minmax(760px,1fr)}
}


/* v1.2 — Rack visual refresh */
.rack-tool-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.rack-card{
  --accent:#b8ff37;
  --accent-rgb:184,255,55;
  min-height:270px;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);
  align-items:stretch;
  background:
    radial-gradient(circle at 82% 50%,rgba(var(--accent-rgb),.055),transparent 36%),
    linear-gradient(180deg,#151b1e,#0c1113);
  border-color:#303a40;
  isolation:isolate;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.rack-card:hover{
  border-color:rgba(var(--accent-rgb),.42);
  transform:translateY(-2px);
  box-shadow:0 14px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.05);
}
.rack-card:after{
  height:3px;
  background:var(--accent);
  box-shadow:0 0 18px rgba(var(--accent-rgb),.24);
}
.rack-card-copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px 18px 24px 28px;
}
.rack-card .home-tool-code{color:var(--accent)}
.rack-card h3{
  margin:17px 0 9px;
  font-size:clamp(1.65rem,2.4vw,2rem);
  line-height:1.02;
}
.rack-card p{
  max-width:470px;
  color:#a4adb2;
  font-size:.92rem;
  line-height:1.58;
}
.rack-card .open-label{padding-top:22px}
.rack-card-visual{
  position:relative;
  z-index:1;
  min-width:0;
  overflow:hidden;
  opacity:.9;
  filter:saturate(.92);
}
.rack-card-visual:before{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#101619 0%,rgba(16,22,25,.86) 8%,rgba(16,22,25,.26) 31%,rgba(16,22,25,0) 58%);
}
.rack-card-visual:after{
  content:"";
  position:absolute;
  z-index:6;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 35%,rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,255,255,.017) 35px,transparent 36px);
  mix-blend-mode:screen;
}
.rack-card.blue{--accent:#62dbff;--accent-rgb:98,219,255}
.rack-card.amber{--accent:#ffbc53;--accent-rgb:255,188,83}
.rack-card.violet{--accent:#bc93ff;--accent-rgb:188,147,255}
.rack-card.rose{--accent:#ff79a6;--accent-rgb:255,121,166}
.rack-card.teal{--accent:#5ae8c4;--accent-rgb:90,232,196}
.rack-card.orange{--accent:#4b9fff;--accent-rgb:75,159,255}
.rack-card.sky{--accent:#67d8ce;--accent-rgb:103,216,206}

/* Tap Tempo */
.tempo-visual{min-height:268px}
.tempo-readout-mini{
  position:absolute;right:20px;top:29px;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;color:var(--accent);
  font-family:var(--mono)
}
.tempo-readout-mini strong{font-size:1.65rem;line-height:1}
.tempo-readout-mini span{font-size:.58rem;margin-top:4px}
.tempo-orbit{
  position:absolute;left:48%;top:50%;border:1px solid rgba(var(--accent-rgb),.26);
  border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 28px rgba(var(--accent-rgb),.05),inset 0 0 22px rgba(var(--accent-rgb),.03)
}
.orbit-a{width:168px;height:168px}.orbit-b{width:130px;height:130px}.orbit-c{width:92px;height:92px;border-color:rgba(var(--accent-rgb),.62);box-shadow:0 0 28px rgba(var(--accent-rgb),.19)}
.tempo-tap{
  position:absolute;left:48%;top:50%;transform:translate(-50%,-50%);
  width:75px;height:75px;border-radius:50%;display:grid;place-items:center;
  color:var(--accent);font:900 1rem/1 var(--mono);
  background:rgba(var(--accent-rgb),.035);
  box-shadow:0 0 24px rgba(var(--accent-rgb),.14)
}
.tempo-bars{
  position:absolute;left:8%;right:8%;bottom:40px;height:68px;
  display:flex;align-items:center;justify-content:center;gap:5px
}
.tempo-bars i{display:block;width:5px;background:var(--accent);opacity:.62;border-radius:2px;box-shadow:0 0 8px rgba(var(--accent-rgb),.18)}

/* BPM → ms */
.sync-visual{padding:40px 18px 24px}
.sync-top{display:grid;grid-template-columns:1fr auto 1fr;gap:9px;align-items:center}
.sync-number{
  border:1px solid rgba(var(--accent-rgb),.32);border-radius:5px;padding:10px 7px;
  text-align:center;color:var(--accent);font:900 1.1rem/1 var(--mono);background:rgba(var(--accent-rgb),.035)
}
.sync-number small{font-size:.47rem;margin-left:3px}
.sync-arrow{color:var(--accent);font-size:1.4rem;text-align:center;opacity:.8}
.sync-notes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}
.sync-notes span{
  min-height:88px;border:1px solid #29353a;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#6d7980;background:#0a0f11;font-family:var(--mono)
}
.sync-notes span.active{border-color:rgba(var(--accent-rgb),.68);color:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.07)}
.sync-notes b{font-size:1.15rem;font-family:Arial,sans-serif}.sync-notes small{margin-top:8px;font-size:.48rem}.sync-notes em{margin-top:5px;font-size:.45rem;font-style:normal}

/* Loop */
.loop-visual{padding:34px 18px 24px}
.loop-caption{text-align:center;color:var(--accent);font:800 .5rem/1 var(--mono);letter-spacing:.06em}
.loop-bracket{position:absolute;left:14%;right:10%;top:58px;height:100px;border-top:1px solid rgba(var(--accent-rgb),.6);border-bottom:1px solid rgba(var(--accent-rgb),.42)}
.loop-bracket:before,.loop-bracket:after{content:"";position:absolute;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.4)}
.loop-bracket:before{left:-4px}.loop-bracket:after{right:-4px}
.loop-bracket i{position:absolute;top:0;bottom:0;width:1px;background:rgba(var(--accent-rgb),.55)}.loop-bracket i:first-child{left:0}.loop-bracket i:last-child{right:0}
.loop-wave{position:absolute;left:14%;right:10%;top:72px;width:76%;height:74px;filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.18))}
.loop-wave polyline{stroke:var(--accent);stroke-width:2;opacity:.7}
.loop-markers{position:absolute;left:14%;right:10%;top:164px;display:flex;justify-content:space-between;color:var(--accent);font:700 .46rem/1 var(--mono)}
.loop-result-mini{position:absolute;left:12%;right:8%;bottom:31px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:4px;padding:8px;background:rgba(var(--accent-rgb),.025);color:var(--accent);font:800 .5rem/1 var(--mono)}
.loop-result-mini i{font-style:normal;color:#758188}

/* Pitch */
.pitch-visual{padding:22px 18px 18px}
.pitch-badge{position:absolute;top:22px;right:104px;min-width:72px;padding:8px;border:1px solid rgba(var(--accent-rgb),.4);border-radius:5px;text-align:center;color:var(--accent);font:900 1rem/1 var(--mono);background:rgba(var(--accent-rgb),.04)}
.pitch-readouts{position:absolute;right:15px;top:28px;display:flex;flex-direction:column;gap:9px;color:#c9b3ff;font:700 .52rem/1 var(--mono)}
.mini-keys,.identify-keyboard{
  position:absolute;left:15%;right:10%;top:86px;height:80px;display:flex;align-items:flex-start;gap:2px
}
.mini-keys i,.identify-keyboard i{flex:1;height:72px;background:#263036;border:1px solid #3c474d;border-radius:0 0 3px 3px}
.mini-keys i.black,.identify-keyboard i.black{height:43px;background:#0a0d0f;z-index:2;margin:0 -5px}
.mini-keys i.lit,.identify-keyboard i.lit{background:rgba(var(--accent-rgb),.72);box-shadow:0 0 18px rgba(var(--accent-rgb),.4)}
.pitch-wave{position:absolute;left:8%;right:5%;bottom:20px;width:88%;height:58px}
.pitch-wave path{stroke:var(--accent);stroke-width:2;opacity:.72}

/* Transposer */
.transposer-visual{padding:28px 16px}
.transpose-shift{position:absolute;top:17px;left:50%;transform:translateX(-50%);color:var(--accent);font:900 .7rem/1 var(--mono)}
.chord-block{position:absolute;top:58px;width:98px;min-height:128px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:5px;background:rgba(10,14,16,.8);padding:11px;text-align:center;color:#d7dadd;font:700 .53rem/1.55 var(--mono)}
.chord-block:first-of-type{left:14%}.chord-block:nth-of-type(2){right:10%}
.chord-block strong{display:block;color:#ffe0ea;font-size:.82rem;margin-bottom:6px}
.chord-block span{display:block}
.transpose-arrow{position:absolute;left:50%;top:118px;transform:translate(-50%,-50%);color:var(--accent);font-size:2rem}
.transposer-visual:after{background:linear-gradient(90deg,#101619 0%,rgba(16,22,25,.8) 6%,rgba(16,22,25,.18) 26%,rgba(16,22,25,0) 58%)}
.ghost-keys{position:absolute;left:8%;right:4%;bottom:19px;height:48px;opacity:.12;background:repeating-linear-gradient(90deg,#d9dfe2 0 17px,#101416 18px 20px)}

/* Identifier */
.identify-visual{padding:24px 16px}
.identify-badge{position:absolute;right:104px;top:26px;padding:9px 15px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:5px;color:var(--accent);font:900 1rem/1 var(--mono);background:rgba(var(--accent-rgb),.04)}
.identify-notes{position:absolute;right:20px;top:31px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:5px;padding:8px 10px;color:#a9c7c0;font:700 .5rem/1.45 var(--mono)}
.identify-notes span{display:block}
.identify-keyboard{top:90px;height:108px}
.identify-keyboard i{height:100px}
.identify-keyboard i.black{height:58px}

/* Pocket */
.pocket-visual{padding:30px 14px}
.pocket-grid-mini{position:absolute;left:8%;right:4%;top:35px;display:grid;grid-template-columns:44px 1fr;gap:9px 8px;align-items:center}
.row-name{color:#78b7ff;font:800 .45rem/1 var(--mono)}
.row-name.bass{color:#a991ff}
.mini-steps{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.mini-steps i{height:18px;border:1px solid #26343b;border-radius:2px;background:#0c1114}
.kick-row i.on{background:#4b9fff;border-color:#70b6ff;box-shadow:0 0 9px rgba(75,159,255,.25)}
.bass-row i.on{background:#9b66ff;border-color:#b891ff;box-shadow:0 0 9px rgba(155,102,255,.22)}
.duck-wave{position:absolute;left:16%;right:4%;bottom:26px;width:78%;height:78px}
.duck-wave path{stroke:#a7cfff;stroke-width:2;opacity:.8}
.duck-label{position:absolute;left:8%;bottom:35px;color:#8899a4;font:800 .42rem/1 var(--mono)}

/* Unison */
.unison-visual{padding:28px 14px}
.unison-tags{position:absolute;right:10px;top:23px;display:flex;gap:6px}
.unison-tags span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:6px 8px;color:#a9f2ea;font:700 .47rem/1 var(--mono);background:rgba(var(--accent-rgb),.025)}
.unison-waves{position:absolute;left:8%;right:3%;top:70px;width:88%;height:120px}
.unison-waves path{stroke:var(--accent);stroke-width:1.7;opacity:.25}
.unison-waves path:nth-child(3){opacity:.7;stroke-width:2.2}.unison-waves path:nth-child(2),.unison-waves path:nth-child(4){opacity:.4}
.stereo-dots{position:absolute;left:17%;right:10%;bottom:24px;display:flex;align-items:center;justify-content:space-between;color:#88bfc0;font:800 .45rem/1 var(--mono)}
.stereo-dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.55}.stereo-dots i.hot{width:7px;height:7px;opacity:1;box-shadow:0 0 10px rgba(var(--accent-rgb),.45)}

@media(max-width:1080px){
  .rack-card{grid-template-columns:1fr;min-height:400px}
  .rack-card-copy{padding-right:28px}
  .rack-card-visual{min-height:180px}
  .rack-card-visual:before{background:linear-gradient(180deg,#101619 0%,rgba(16,22,25,.35) 30%,rgba(16,22,25,0) 70%)}
  .rack-card p{max-width:650px}
}
@media(max-width:780px){
  .rack-tool-grid{grid-template-columns:1fr}
  .rack-card{min-height:390px}
}
@media(max-width:520px){
  .rack-card{min-height:430px}
  .rack-card-copy{padding:24px 22px 20px}
  .rack-card h3{font-size:1.55rem}
  .rack-card-visual{min-height:200px}
  .sync-notes span{min-height:70px}
}


/* v1.3 — Tool 09 Phase / Comb Collision Mapper */
.rack-card.phase{--accent:#ff6f91;--accent-rgb:255,111,145}
.phase-card-visual{padding:26px 14px}
.phase-mini-tags{position:absolute;right:10px;top:24px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.phase-mini-tags span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:6px 7px;color:#ffb7c8;background:rgba(var(--accent-rgb),.025);font:700 .45rem/1 var(--mono)}
.phase-layer-waves{position:absolute;left:7%;right:3%;top:65px;width:90%;height:95px}
.phase-layer-waves path{fill:none;stroke-width:2}.phase-layer-waves .wave-a{stroke:#ff91aa;opacity:.75}.phase-layer-waves .wave-b{stroke:#70c9ff;opacity:.55}
.phase-comb-mini{position:absolute;left:12%;right:8%;bottom:32px;height:58px;display:flex;align-items:flex-end;gap:6px}
.phase-comb-mini i{flex:1;background:linear-gradient(180deg,#ff86a2,#3e2630);opacity:.72;border-radius:2px 2px 0 0}
.phase-risk-mini{position:absolute;left:9%;bottom:22px;color:#9c7d86;font:800 .4rem/1 var(--mono);letter-spacing:.08em}

.phase-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.phase-settings.secondary{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
.phase-preset-row,.phase-nudge-row,.phase-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.phase-preset-row button,.phase-nudge-row button,.phase-actions button{
  border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);
  min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em
}
.phase-preset-row button:hover,.phase-nudge-row button:hover,.phase-actions button:hover{border-color:rgba(255,111,145,.52);color:#ffc0cf;background:rgba(255,111,145,.06)}
.phase-readouts{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:14px}
.phase-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.phase-stat span{display:block;color:var(--muted-2);font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.phase-stat strong{display:block;margin-top:8px;color:#ffd1db;font:900 .95rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
.phase-stat.risk.aligned{border-color:rgba(84,230,193,.28)}.phase-stat.risk.aligned strong{color:#96f4dc}
.phase-stat.risk.mild{border-color:rgba(255,195,77,.28)}.phase-stat.risk.mild strong{color:#ffd989}
.phase-stat.risk.cancel{border-color:rgba(255,132,92,.30)}.phase-stat.risk.cancel strong{color:#ffbd99}
.phase-stat.risk.severe{border-color:rgba(255,99,110,.36)}.phase-stat.risk.severe strong{color:#ffabb3}
.phase-chart-panel{margin-top:14px;border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px}
.phase-chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.phase-chart-head span{color:var(--muted-2);font:800 .5rem/1 var(--mono);letter-spacing:.08em}
.phase-canvas{display:block;width:100%;height:280px;border:1px solid #273035;border-radius:5px;background:#050809}
.phase-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.phase-list{border:1px solid #2d353a;border-radius:7px;background:#090d0f;padding:14px}
.phase-list h3{margin:0 0 10px;font-size:.78rem}
.phase-list-items{display:flex;gap:6px;flex-wrap:wrap}
.phase-freq-chip{border:1px solid #313a3f;border-radius:4px;padding:7px 8px;color:#aeb9be;background:#080c0e;font:750 .54rem/1 var(--mono)}
.phase-nudge-box{margin-top:14px;border:1px solid rgba(255,111,145,.24);border-radius:7px;background:rgba(255,111,145,.035);padding:14px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.phase-nudge-box span{color:var(--muted-2);font:800 .49rem/1.2 var(--mono);letter-spacing:.08em}
.phase-nudge-box strong{color:#ffc3d1;font:900 .88rem/1.2 var(--mono)}
.phase-actions{justify-content:flex-end}
@media(max-width:1000px){.phase-settings,.phase-settings.secondary{grid-template-columns:repeat(2,1fr)}.phase-readouts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.phase-settings,.phase-settings.secondary,.phase-readouts,.phase-lists{grid-template-columns:1fr}.phase-canvas{height:230px}.phase-nudge-box{align-items:flex-start;flex-direction:column}}


/* v1.4 — Tool 10: Groove DNA / Microtiming Designer */
.rack-card.groove{--accent:#f7d84d;--accent-rgb:247,216,77}
.groove-card-visual{padding:24px 14px}
.groove-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.groove-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#f9e887;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.groove-mini-grid{position:absolute;left:8%;right:5%;top:65px;display:grid;grid-template-columns:24px 1fr;gap:7px 6px;align-items:center}
.groove-mini-grid>span{color:#8e999e;font:800 .44rem/1 var(--mono)}
.groove-mini-grid>div{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.groove-mini-grid i{height:14px;border:1px solid #273237;border-radius:2px;background:#0b1012}
.groove-mini-grid i.on{background:#f1c841;border-color:#ffdf70;box-shadow:0 0 8px rgba(247,216,77,.18)}
.groove-mini-grid i.sn{background:#ff8d74;border-color:#ffab98}
.groove-mini-grid i.hat{background:#7ad5ff;border-color:#9ce2ff;height:10px;margin-top:4px}
.groove-mini-grid i.late{transform:translateX(3px)}.groove-mini-grid i.early{transform:translateX(-3px)}
.groove-offset-line{position:absolute;left:8%;right:5%;bottom:44px;width:87%;height:54px}
.groove-offset-line path{stroke:#f7d84d;stroke-width:2;opacity:.72}
.groove-velocity-bars{position:absolute;right:5%;bottom:22px;width:33%;height:42px;display:flex;gap:4px;align-items:flex-end;opacity:.55}
.groove-velocity-bars i{flex:1;background:#7ad5ff;border-radius:2px 2px 0 0}

.groove-settings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.groove-preset-row,.groove-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.groove-preset-row button,.groove-actions button{
  border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);
  min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em
}
.groove-preset-row button:hover,.groove-actions button:hover{border-color:rgba(247,216,77,.52);color:#fff0a0;background:rgba(247,216,77,.06)}
.groove-actions .primary{border-color:rgba(247,216,77,.42);color:#fff0a0;background:rgba(247,216,77,.05)}
.groove-sequencer{margin-top:14px;border:1px solid var(--line);border-radius:7px;background:#090d0f;overflow:auto}
.groove-row{display:grid;grid-template-columns:108px minmax(920px,1fr);border-bottom:1px solid #252c30}
.groove-row:last-child{border-bottom:0}
.groove-lane-label{
  position:sticky;left:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 12px;background:#0d1214;border-right:1px solid #252c30;color:#aab5b9;
  font:850 .53rem/1 var(--mono);letter-spacing:.06em
}
.groove-midi-note{color:#5f6d74;font-size:.44rem}
.groove-grid{display:grid;gap:3px;padding:9px;min-width:920px}
.groove-step{
  position:relative;height:42px;border:1px solid #2b353a;border-radius:4px;background:#0b1012;color:#5e6a70;
  font:800 .45rem/1 var(--mono);overflow:visible
}
.groove-step.bar-start:before{content:"";position:absolute;left:-3px;top:-10px;bottom:-10px;width:1px;background:#555f64}
.groove-step.beat-start{border-left-color:#485157}
.groove-step.active{border-color:rgba(247,216,77,.62);background:rgba(247,216,77,.10);color:#fff0a0;box-shadow:inset 0 0 0 1px rgba(247,216,77,.05)}
.groove-step.selected{outline:2px solid rgba(122,213,255,.72);outline-offset:1px}
.groove-step .vel-bar{position:absolute;left:4px;right:4px;bottom:4px;height:4px;border-radius:99px;background:#1b252a;overflow:hidden}
.groove-step .vel-bar i{display:block;height:100%;background:#7ad5ff}
.groove-step .offset-dot{position:absolute;top:5px;left:50%;width:5px;height:5px;border-radius:50%;background:#f7d84d;transform:translateX(-50%)}
.groove-step .offset-dot.early{background:#67cfff}.groove-step .offset-dot.late{background:#ff9c7d}
.groove-editor{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:10px;margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.groove-selected-box{border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:13px;display:flex;flex-direction:column;justify-content:center}
.groove-selected-box span{color:var(--muted-2);font:800 .48rem/1 var(--mono);letter-spacing:.08em}
.groove-selected-box strong{margin-top:8px;color:#dce4e7;font:900 .8rem/1.25 var(--mono)}
.groove-selected-box small{margin-top:7px;color:var(--muted);font:650 .5rem/1.4 var(--mono)}
.groove-maps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.groove-map-panel{border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px}
.groove-map-panel h3{margin:0 0 10px;font-size:.8rem}
.groove-canvas{display:block;width:100%;height:220px;border:1px solid #273035;border-radius:5px;background:#050809}
.groove-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.groove-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.groove-stat span{display:block;color:var(--muted-2);font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.groove-stat strong{display:block;margin-top:8px;color:#f4e78f;font:900 .95rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
.groove-actions{justify-content:flex-end}
.groove-status{margin-right:auto;align-self:center;color:var(--muted);font:700 .52rem/1.4 var(--mono)}
@media(max-width:1050px){
  .groove-settings{grid-template-columns:repeat(3,1fr)}
  .groove-editor{grid-template-columns:repeat(2,1fr)}
  .groove-selected-box{grid-column:1/-1}
}
@media(max-width:760px){
  .groove-settings,.groove-editor,.groove-summary,.groove-maps{grid-template-columns:1fr}
  .groove-row{grid-template-columns:82px minmax(920px,1fr)}
  .groove-status{width:100%;margin-right:0}
}


/* v1.4.1 — Groove DNA 1/32 correction */
.groove-sequencer{
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
}
.groove-grid{
  width:max-content;
}
@media(max-width:760px){
  .groove-grid{min-width:920px}
}


/* v1.5 — Tool 11: Bassline Generator */
.rack-card.bassgen{--accent:#73ff8f;--accent-rgb:115,255,143}
.bassgen-card-visual{padding:24px 14px}
.bassgen-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.bassgen-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#a8ffba;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.bassgen-piano-mini{position:absolute;left:8%;right:5%;top:68px;bottom:45px;border:1px solid #263238;border-radius:4px;background:repeating-linear-gradient(180deg,#0a0e10 0 20px,#12191c 21px,#0a0e10 22px 42px);overflow:hidden}
.bassgen-piano-mini:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.035) 25px,transparent 26px)}
.bassgen-piano-mini span{position:absolute;border-radius:4px;background:rgba(var(--accent-rgb),.32);border:1px solid rgba(var(--accent-rgb),.66);box-shadow:0 0 10px rgba(var(--accent-rgb),.1)}
.bassgen-contour{position:absolute;left:8%;right:5%;bottom:22px;width:87%;height:55px}
.bassgen-contour path{stroke:#73ff8f;stroke-width:2;opacity:.7}
.bassgen-random{position:absolute;right:11%;bottom:26px;width:42px;height:42px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:50%;display:grid;place-items:center;color:#a6ffb7;font:900 .54rem/1 var(--mono);box-shadow:0 0 16px rgba(var(--accent-rgb),.08)}

.bassgen-settings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.bassgen-settings.secondary{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:10px}
.bassgen-presets,.bassgen-actions,.bassgen-locks{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.bassgen-presets button,.bassgen-actions button,.bassgen-locks button{
  border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);
  min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em
}
.bassgen-presets button:hover,.bassgen-actions button:hover,.bassgen-locks button:hover,.bassgen-locks button.active{
  border-color:rgba(115,255,143,.52);color:#bdffc9;background:rgba(115,255,143,.06)
}
.bassgen-actions .primary{border-color:rgba(115,255,143,.45);color:#caffd3;background:rgba(115,255,143,.055)}
.bassgen-roll-wrap{margin-top:14px;border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.bassgen-roll-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.bassgen-roll-head span{color:var(--muted-2);font:800 .5rem/1 var(--mono);letter-spacing:.08em}
.bassgen-roll{display:block;width:100%;height:360px;border:1px solid #273035;border-radius:5px;background:#050809;min-width:780px}
.bassgen-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.bassgen-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.bassgen-stat span{display:block;color:var(--muted-2);font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.bassgen-stat strong{display:block;margin-top:8px;color:#c9ffd3;font:900 .95rem/1.15 var(--mono);font-variant-numeric:tabular-nums}
.bassgen-pattern{margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#090d0f;padding:14px}
.bassgen-pattern h3{margin:0 0 10px;font-size:.8rem}
.bassgen-pattern pre{margin:0;white-space:pre-wrap;color:#b5c0c4;font:700 .62rem/1.65 var(--mono)}
.bassgen-actions{justify-content:flex-end}
.bassgen-status{margin-right:auto;align-self:center;color:var(--muted);font:700 .52rem/1.4 var(--mono)}
@media(max-width:1100px){
  .bassgen-settings,.bassgen-settings.secondary{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .bassgen-settings,.bassgen-settings.secondary,.bassgen-summary{grid-template-columns:1fr}
  .bassgen-status{width:100%;margin-right:0}
}


/* v1.5.1 — Bassline Generator fixes */
.bassgen-quickstart{
  margin:12px 0 14px;
  border-color:rgba(115,255,143,.18);
  background:linear-gradient(180deg, rgba(115,255,143,.045), rgba(115,255,143,.02));
}
.bassgen-quickstart h2{
  margin-top:0;
  color:#cbffd5;
}
.bassgen-quickstart p{
  margin-bottom:0;
}
.bassgen-roll{
  display:block;
  width:100%;
  height:420px;
  border:1px solid #273035;
  border-radius:5px;
  background:#050809;
  min-width:860px;
}
.bassgen-status{
  margin-right:auto;
  align-self:center;
  color:#b5c0c4;
  font:700 .52rem/1.45 var(--mono);
}


/* v1.5.2 — direct bass-note editing */
.bassgen-edit-hint{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 9px;padding:9px 11px;border:1px solid rgba(115,255,143,.16);
  border-radius:5px;background:rgba(115,255,143,.025)
}
.bassgen-edit-hint strong{color:#baffc6;font:900 .48rem/1 var(--mono);letter-spacing:.08em}
.bassgen-edit-hint span{color:#738087;font:700 .49rem/1.35 var(--mono);text-align:right}
.bassgen-roll{touch-action:none;cursor:crosshair;user-select:none}
.bassgen-note-editor{
  display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr)) auto;
  gap:10px;margin-top:11px;padding:13px;border:1px solid #2d353a;border-radius:7px;background:#080b0d
}
.bassgen-selected-note{
  display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;
  border-radius:6px;background:#070a0c;padding:11px 12px
}
.bassgen-selected-note span{color:var(--muted-2);font:800 .47rem/1 var(--mono);letter-spacing:.08em}
.bassgen-selected-note strong{margin-top:7px;color:#d6ffe0;font:900 .8rem/1.2 var(--mono)}
.bassgen-selected-note small{margin-top:6px;color:#6f7c82;font:650 .48rem/1.35 var(--mono)}
.bassgen-note-editor-actions{display:flex;align-items:flex-end;gap:6px}
.bassgen-note-editor-actions button{
  min-height:48px;border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);
  padding:0 10px;font:800 .49rem/1 var(--mono)
}
.bassgen-note-editor-actions button:not(:disabled):hover{border-color:rgba(115,255,143,.42);color:#c9ffd3}
.bassgen-note-editor-actions button:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:1100px){
  .bassgen-note-editor{grid-template-columns:repeat(3,1fr)}
  .bassgen-selected-note{grid-column:1/-1}
  .bassgen-note-editor-actions{align-items:stretch}
}
@media(max-width:700px){
  .bassgen-edit-hint{align-items:flex-start;flex-direction:column}
  .bassgen-edit-hint span{text-align:left}
  .bassgen-note-editor{grid-template-columns:1fr}
}


/* v1.6 — Tool 12: Riff Generator */
.rack-card.riffgen{--accent:#ff8b5f;--accent-rgb:255,139,95}
.riff-card-visual{padding:24px 14px}
.riff-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.riff-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#ffb69c;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.riff-piano-mini{position:absolute;left:8%;right:5%;top:67px;bottom:46px;border:1px solid #263238;border-radius:4px;background:repeating-linear-gradient(180deg,#0a0e10 0 20px,#12191c 21px,#0a0e10 22px 42px);overflow:hidden}
.riff-piano-mini:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.035) 25px,transparent 26px)}
.riff-piano-mini span{position:absolute;height:14%;border-radius:4px;background:rgba(var(--accent-rgb),.32);border:1px solid rgba(var(--accent-rgb),.70);box-shadow:0 0 9px rgba(var(--accent-rgb),.11)}
.riff-contour{position:absolute;left:8%;right:5%;bottom:22px;width:87%;height:55px}
.riff-contour path{stroke:#ff8b5f;stroke-width:2;opacity:.72}
.riff-badge{position:absolute;right:11%;bottom:26px;width:43px;height:43px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:50%;display:grid;place-items:center;color:#ffb39a;font:900 .5rem/1 var(--mono)}

.riff-settings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.riff-settings.secondary{margin-top:10px}
.riff-presets,.riff-locks,.riff-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.riff-presets button,.riff-locks button,.riff-actions button{
  border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);
  min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono);letter-spacing:.04em
}
.riff-presets button:hover,.riff-locks button:hover,.riff-locks button.active,.riff-actions button:hover{
  border-color:rgba(255,139,95,.52);color:#ffd0bf;background:rgba(255,139,95,.06)
}
.riff-actions .primary{border-color:rgba(255,139,95,.46);color:#ffd4c4;background:rgba(255,139,95,.055)}
.riff-quickstart{margin:12px 0 14px;border-color:rgba(255,139,95,.18);background:linear-gradient(180deg,rgba(255,139,95,.045),rgba(255,139,95,.02))}
.riff-quickstart h2{margin-top:0;color:#ffd3c3}
.riff-quickstart p{margin-bottom:0}
.riff-roll-wrap{margin-top:14px;border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.riff-roll-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.riff-roll-head span{color:var(--muted-2);font:800 .5rem/1 var(--mono);letter-spacing:.08em}
.riff-edit-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px;padding:9px 11px;border:1px solid rgba(255,139,95,.16);border-radius:5px;background:rgba(255,139,95,.025)}
.riff-edit-hint strong{color:#ffd1c0;font:900 .48rem/1 var(--mono);letter-spacing:.08em}
.riff-edit-hint span{color:#738087;font:700 .49rem/1.35 var(--mono);text-align:right}
.riff-roll{display:block;width:100%;height:420px;border:1px solid #273035;border-radius:5px;background:#050809;min-width:860px;touch-action:none;cursor:crosshair;user-select:none}
.riff-note-editor{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr)) auto;gap:10px;margin-top:11px;padding:13px;border:1px solid #2d353a;border-radius:7px;background:#080b0d}
.riff-selected-note{display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:11px 12px}
.riff-selected-note span{color:var(--muted-2);font:800 .47rem/1 var(--mono);letter-spacing:.08em}
.riff-selected-note strong{margin-top:7px;color:#ffe0d4;font:900 .8rem/1.2 var(--mono)}
.riff-selected-note small{margin-top:6px;color:#6f7c82;font:650 .48rem/1.35 var(--mono)}
.riff-note-editor-actions{display:flex;align-items:flex-end;gap:6px}
.riff-note-editor-actions button{min-height:48px;border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);padding:0 10px;font:800 .49rem/1 var(--mono)}
.riff-note-editor-actions button:not(:disabled):hover{border-color:rgba(255,139,95,.42);color:#ffd6c7}
.riff-note-editor-actions button:disabled{opacity:.35;cursor:not-allowed}
.riff-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.riff-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.riff-stat span{display:block;color:var(--muted-2);font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.riff-stat strong{display:block;margin-top:8px;color:#ffd3c4;font:900 .95rem/1.15 var(--mono)}
.riff-pattern{margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#090d0f;padding:14px}
.riff-pattern h3{margin:0 0 10px;font-size:.8rem}
.riff-pattern pre{margin:0;white-space:pre-wrap;color:#b5c0c4;font:700 .62rem/1.65 var(--mono)}
.riff-actions{justify-content:flex-end}
.riff-status{margin-right:auto;align-self:center;color:#b5c0c4;font:700 .52rem/1.45 var(--mono)}
@media(max-width:1100px){
  .riff-settings{grid-template-columns:repeat(3,1fr)}
  .riff-note-editor{grid-template-columns:repeat(3,1fr)}
  .riff-selected-note{grid-column:1/-1}
}
@media(max-width:760px){
  .riff-settings,.riff-summary,.riff-note-editor{grid-template-columns:1fr}
  .riff-edit-hint{align-items:flex-start;flex-direction:column}
  .riff-edit-hint span{text-align:left}
  .riff-status{width:100%;margin-right:0}
}


/* v1.6.1 — explicit BPM / MIDI tempo control */
.tempo-midi-field{min-width:0}
.tempo-midi-control{display:grid;grid-template-columns:auto auto minmax(78px,1fr) auto auto;gap:5px;align-items:center}
.tempo-midi-control .tempo-number{
  width:100%;height:39px;text-align:center;border:1px solid #39444a;border-radius:5px;
  background:#050809;color:#e4e9eb;font:900 .72rem/1 var(--mono)
}
.tempo-nudge{
  min-width:34px;height:39px;border:1px solid #30393e;border-radius:5px;background:#101518;color:#8e999f;
  font:850 .52rem/1 var(--mono);padding:0 6px
}
.tempo-nudge:hover{border-color:rgba(115,255,143,.38);color:#d4ffdc}
.riff-settings .tempo-nudge:hover{border-color:rgba(255,139,95,.42);color:#ffd1c0}
.tempo-range{width:100%;margin-top:8px;accent-color:#73ff8f}
.riff-settings .tempo-range{accent-color:#ff8b5f}
.tempo-midi-note{display:block;margin-top:5px;color:#637078;font:700 .45rem/1.25 var(--mono)}
@media(max-width:700px){
  .tempo-midi-control{grid-template-columns:auto auto 1fr auto auto}
}


/* v1.7 — Tool 13: Monophonic Audio → MIDI */
.rack-card.audiomidi{--accent:#70b9ff;--accent-rgb:112,185,255}
.audiomidi-card-visual{padding:24px 14px}
.audiomidi-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.audiomidi-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#a8d4ff;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.audiomidi-wave-mini{position:absolute;left:7%;top:62px;width:42%;height:78px}
.audiomidi-wave-mini polyline{stroke:#70b9ff;stroke-width:2;opacity:.7}
.audiomidi-arrow{position:absolute;left:51%;top:101px;color:#70b9ff;font-size:1.6rem}
.audiomidi-notes-mini{position:absolute;left:58%;right:5%;top:62px;height:120px;border:1px solid #26333a;border-radius:4px;background:repeating-linear-gradient(180deg,#0b1013 0 17px,#12191d 18px,#0b1013 19px 36px)}
.audiomidi-notes-mini i{position:absolute;height:12%;border:1px solid rgba(var(--accent-rgb),.72);background:rgba(var(--accent-rgb),.30);border-radius:3px}

.audio-drop-zone{position:relative;border:1px dashed rgba(112,185,255,.38);border-radius:9px;background:radial-gradient(circle at 50% 40%,rgba(112,185,255,.055),transparent 52%),#080c0f;padding:28px;text-align:center;transition:.16s ease}
.audio-drop-zone.dragover{border-color:#70b9ff;background:rgba(112,185,255,.065)}
.audio-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.audio-drop-zone strong{display:block;color:#c8e6ff;font:900 .8rem/1 var(--mono);letter-spacing:.07em}
.audio-drop-zone p{max-width:700px;margin:11px auto 0;color:#7e8b91;font-size:.78rem;line-height:1.55}
.audio-drop-zone .privacy{display:inline-block;margin-top:13px;color:#74a1c9;font:800 .46rem/1 var(--mono);letter-spacing:.07em}

.audio-file-strip{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px;margin-top:12px}
.audio-file-stat{border:1px solid #2b3438;border-radius:6px;background:#090d0f;padding:12px;min-width:0}
.audio-file-stat span{display:block;color:#68757b;font:800 .45rem/1 var(--mono);letter-spacing:.07em}
.audio-file-stat strong{display:block;margin-top:7px;color:#b9c5ca;font:800 .64rem/1.2 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.audio-midi-settings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.audio-midi-settings.secondary{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:10px}
.audio-midi-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.audio-midi-actions button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono)}
.audio-midi-actions button:hover:not(:disabled){border-color:rgba(112,185,255,.5);color:#cbe7ff;background:rgba(112,185,255,.05)}
.audio-midi-actions .primary{border-color:rgba(112,185,255,.45);color:#d6edff;background:rgba(112,185,255,.055)}
.audio-midi-actions button:disabled{opacity:.35;cursor:not-allowed}
.audio-midi-status{margin-left:auto;align-self:center;color:#8c999f;font:700 .51rem/1.4 var(--mono)}
.analysis-progress{height:7px;margin-top:10px;border:1px solid #263137;border-radius:99px;background:#050809;overflow:hidden}
.analysis-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#70b9ff,#7af0d2);transition:width .12s linear}

.audio-viz-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.audio-viz-panel{border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.audio-viz-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.audio-viz-head span{color:#68757b;font:800 .48rem/1 var(--mono);letter-spacing:.07em}
.audio-wave-canvas{display:block;width:100%;height:230px;min-width:820px;border:1px solid #273035;border-radius:5px;background:#050809}
.audio-roll-canvas{display:block;width:100%;height:440px;min-width:860px;border:1px solid #273035;border-radius:5px;background:#050809;touch-action:none;cursor:crosshair;user-select:none}

.audio-edit-hint{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;padding:9px 11px;border:1px solid rgba(112,185,255,.16);border-radius:5px;background:rgba(112,185,255,.025)}
.audio-edit-hint strong{color:#cbe7ff;font:900 .48rem/1 var(--mono);letter-spacing:.08em}
.audio-edit-hint span{color:#738087;font:700 .49rem/1.35 var(--mono);text-align:right}
.audio-note-editor{display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr)) auto;gap:10px;margin-top:11px;padding:13px;border:1px solid #2d353a;border-radius:7px;background:#080b0d}
.audio-selected-note{display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:11px 12px}
.audio-selected-note span{color:#68757b;font:800 .47rem/1 var(--mono);letter-spacing:.08em}
.audio-selected-note strong{margin-top:7px;color:#d7ecff;font:900 .8rem/1.2 var(--mono)}
.audio-selected-note small{margin-top:6px;color:#6f7c82;font:650 .48rem/1.35 var(--mono)}
.audio-note-editor-actions{display:flex;align-items:flex-end;gap:6px}
.audio-note-editor-actions button{min-height:48px;border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);padding:0 10px;font:800 .49rem/1 var(--mono)}
.audio-note-editor-actions button:disabled{opacity:.35}
.audio-note-editor-actions button:hover:not(:disabled){border-color:rgba(112,185,255,.42);color:#d5edff}

.audio-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.audio-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.audio-stat span{display:block;color:#68757b;font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.audio-stat strong{display:block;margin-top:8px;color:#cbe7ff;font:900 .95rem/1.15 var(--mono)}

@media(max-width:1050px){
  .audio-midi-settings,.audio-midi-settings.secondary{grid-template-columns:repeat(3,1fr)}
  .audio-file-strip{grid-template-columns:1fr 1fr}
  .audio-note-editor{grid-template-columns:repeat(3,1fr)}
  .audio-selected-note{grid-column:1/-1}
}
@media(max-width:720px){
  .audio-midi-settings,.audio-midi-settings.secondary,.audio-file-strip,.audio-summary,.audio-note-editor{grid-template-columns:1fr}
  .audio-edit-hint{flex-direction:column}
  .audio-edit-hint span{text-align:left}
  .audio-midi-status{width:100%;margin-left:0}
}


/* v1.8 — Tool 14: Drum Loop → MIDI / Groove Extractor */
.rack-card.drumgroove{--accent:#ffca62;--accent-rgb:255,202,98}
.drumgroove-card-visual{padding:24px 14px}
.drumgroove-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.drumgroove-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#ffe29d;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.drumgroove-wave-mini{position:absolute;left:7%;right:5%;top:57px;width:88%;height:64px}
.drumgroove-wave-mini polyline{stroke:#ffca62;stroke-width:1.7;opacity:.7}
.drumgroove-grid-mini{position:absolute;left:8%;right:5%;top:124px;display:grid;grid-template-columns:20px 1fr;gap:5px 6px;align-items:center}
.drumgroove-grid-mini>span{color:#7f898e;font:800 .42rem/1 var(--mono)}
.drumgroove-grid-mini>div{display:grid;grid-template-columns:repeat(16,1fr);gap:3px}
.drumgroove-grid-mini i{height:10px;border:1px solid #273237;border-radius:2px;background:#0b1012}
.drumgroove-grid-mini i.k{background:#ffca62;border-color:#ffe09b}
.drumgroove-grid-mini i.s{background:#ff8a72;border-color:#ffac9b}
.drumgroove-grid-mini i.h{background:#7ddcff;border-color:#a8e9ff}
.drumgroove-grid-mini i.late{transform:translateX(2px)}
.drumgroove-grid-mini i.early{transform:translateX(-2px)}

.drum-drop-zone{position:relative;border:1px dashed rgba(255,202,98,.4);border-radius:9px;background:radial-gradient(circle at 50% 38%,rgba(255,202,98,.055),transparent 52%),#080c0f;padding:28px;text-align:center;transition:.16s ease}
.drum-drop-zone.dragover{border-color:#ffca62;background:rgba(255,202,98,.065)}
.drum-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drum-drop-zone strong{display:block;color:#ffe8ae;font:900 .8rem/1 var(--mono);letter-spacing:.07em}
.drum-drop-zone p{max-width:720px;margin:11px auto 0;color:#7e8b91;font-size:.78rem;line-height:1.55}
.drum-drop-zone .privacy{display:inline-block;margin-top:13px;color:#a98d52;font:800 .46rem/1 var(--mono);letter-spacing:.07em}

.drum-file-strip{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px;margin-top:12px}
.drum-file-stat{border:1px solid #2b3438;border-radius:6px;background:#090d0f;padding:12px;min-width:0}
.drum-file-stat span{display:block;color:#68757b;font:800 .45rem/1 var(--mono);letter-spacing:.07em}
.drum-file-stat strong{display:block;margin-top:7px;color:#b9c5ca;font:800 .64rem/1.2 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.drum-settings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.drum-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.drum-actions button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono)}
.drum-actions button:hover:not(:disabled){border-color:rgba(255,202,98,.5);color:#ffe2a0;background:rgba(255,202,98,.05)}
.drum-actions .primary{border-color:rgba(255,202,98,.45);color:#ffe7ad;background:rgba(255,202,98,.055)}
.drum-actions button:disabled{opacity:.35;cursor:not-allowed}
.drum-status{margin-left:auto;align-self:center;color:#8c999f;font:700 .51rem/1.4 var(--mono)}
.drum-progress{height:7px;margin-top:10px;border:1px solid #263137;border-radius:99px;background:#050809;overflow:hidden}
.drum-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffca62,#7ddcff);transition:width .12s linear}

.drum-viz{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.drum-panel{border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.drum-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.drum-panel-head span{color:#68757b;font:800 .48rem/1 var(--mono);letter-spacing:.07em}
.drum-wave-canvas{display:block;width:100%;height:230px;min-width:820px;border:1px solid #273035;border-radius:5px;background:#050809}
.drum-map-canvas{display:block;width:100%;height:330px;min-width:860px;border:1px solid #273035;border-radius:5px;background:#050809;touch-action:none;cursor:crosshair;user-select:none}
.drum-edit-hint{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;padding:9px 11px;border:1px solid rgba(255,202,98,.16);border-radius:5px;background:rgba(255,202,98,.025)}
.drum-edit-hint strong{color:#ffe3a2;font:900 .48rem/1 var(--mono);letter-spacing:.08em}
.drum-edit-hint span{color:#738087;font:700 .49rem/1.35 var(--mono);text-align:right}

.drum-hit-editor{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr)) auto;gap:10px;margin-top:11px;padding:13px;border:1px solid #2d353a;border-radius:7px;background:#080b0d}
.drum-selected-hit{display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:11px 12px}
.drum-selected-hit span{color:#68757b;font:800 .47rem/1 var(--mono);letter-spacing:.08em}
.drum-selected-hit strong{margin-top:7px;color:#ffebba;font:900 .8rem/1.2 var(--mono)}
.drum-selected-hit small{margin-top:6px;color:#6f7c82;font:650 .48rem/1.35 var(--mono)}
.drum-hit-editor-actions{display:flex;align-items:flex-end;gap:6px}
.drum-hit-editor-actions button{min-height:48px;border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);padding:0 10px;font:800 .49rem/1 var(--mono)}
.drum-hit-editor-actions button:disabled{opacity:.35}
.drum-hit-editor-actions button:hover:not(:disabled){border-color:rgba(255,202,98,.42);color:#ffe5a5}

.drum-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.drum-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.drum-stat span{display:block;color:#68757b;font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.drum-stat strong{display:block;margin-top:8px;color:#ffe3a4;font:900 .95rem/1.15 var(--mono)}
.drum-pattern{margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#090d0f;padding:14px}
.drum-pattern h3{margin:0 0 10px;font-size:.8rem}
.drum-pattern pre{margin:0;white-space:pre-wrap;color:#b5c0c4;font:700 .6rem/1.6 var(--mono)}

@media(max-width:1100px){
  .drum-settings{grid-template-columns:repeat(3,1fr)}
  .drum-file-strip{grid-template-columns:1fr 1fr}
  .drum-hit-editor{grid-template-columns:repeat(3,1fr)}
  .drum-selected-hit{grid-column:1/-1}
}
@media(max-width:720px){
  .drum-settings,.drum-file-strip,.drum-summary,.drum-hit-editor{grid-template-columns:1fr}
  .drum-edit-hint{flex-direction:column}
  .drum-edit-hint span{text-align:left}
  .drum-status{width:100%;margin-left:0}
}


/* v1.9 — Tool 15: MIDI Mutation Lab */
.rack-card.mutation{--accent:#c58cff;--accent-rgb:197,140,255}
.mutation-card-visual{padding:24px 14px}
.mutation-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.mutation-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#dfbdff;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.mutation-roll-mini{position:absolute;top:67px;width:38%;height:122px;border:1px solid #273238;border-radius:4px;background:repeating-linear-gradient(180deg,#0a0e10 0 18px,#12191c 19px,#0a0e10 20px 38px);overflow:hidden}
.mutation-roll-mini.original{left:7%}.mutation-roll-mini.mutated{right:5%}
.mutation-roll-mini:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.035) 23px,transparent 24px)}
.mutation-roll-mini i{position:absolute;height:12%;border-radius:3px;border:1px solid rgba(var(--accent-rgb),.62);background:rgba(var(--accent-rgb),.23)}
.mutation-roll-mini.mutated i{background:rgba(197,140,255,.39);border-color:#d6adff}
.mutation-symbol{position:absolute;left:47%;top:104px;color:#c58cff;font-size:1.55rem;text-shadow:0 0 12px rgba(197,140,255,.25)}

.mut-drop-zone{position:relative;border:1px dashed rgba(197,140,255,.4);border-radius:9px;background:radial-gradient(circle at 50% 38%,rgba(197,140,255,.06),transparent 52%),#080c0f;padding:28px;text-align:center;transition:.16s ease}
.mut-drop-zone.dragover{border-color:#c58cff;background:rgba(197,140,255,.07)}
.mut-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}
.mut-drop-zone strong{display:block;color:#e4c6ff;font:900 .8rem/1 var(--mono);letter-spacing:.07em}
.mut-drop-zone p{max-width:720px;margin:11px auto 0;color:#7e8b91;font-size:.78rem;line-height:1.55}
.mut-drop-zone .privacy{display:inline-block;margin-top:13px;color:#9a75bd;font:800 .46rem/1 var(--mono);letter-spacing:.07em}

.mut-file-strip{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:9px;margin-top:12px}
.mut-file-stat{border:1px solid #2b3438;border-radius:6px;background:#090d0f;padding:12px;min-width:0}
.mut-file-stat span{display:block;color:#68757b;font:800 .45rem/1 var(--mono);letter-spacing:.07em}
.mut-file-stat strong{display:block;margin-top:7px;color:#b9c5ca;font:800 .64rem/1.2 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mut-settings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:14px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.mut-settings.secondary{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:10px}
.mut-locks,.mut-actions,.mut-transforms{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.mut-locks button,.mut-actions button,.mut-transforms button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono)}
.mut-locks button:hover,.mut-actions button:hover:not(:disabled),.mut-transforms button:hover:not(:disabled),.mut-locks button.active{border-color:rgba(197,140,255,.5);color:#e6caff;background:rgba(197,140,255,.055)}
.mut-actions .primary{border-color:rgba(197,140,255,.45);color:#e8d0ff;background:rgba(197,140,255,.06)}
.mut-actions button:disabled,.mut-transforms button:disabled{opacity:.35;cursor:not-allowed}
.mut-status{margin-left:auto;align-self:center;color:#8c999f;font:700 .51rem/1.4 var(--mono)}
.mut-transform-label{align-self:center;color:#7b688c;font:800 .48rem/1 var(--mono);letter-spacing:.08em;margin-right:4px}

.mut-rolls{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.mut-panel{border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.mut-panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}
.mut-panel-head span{color:#68757b;font:800 .48rem/1 var(--mono);letter-spacing:.07em}
.mut-canvas{display:block;width:100%;height:380px;min-width:860px;border:1px solid #273035;border-radius:5px;background:#050809}
#mutatedCanvas{touch-action:none;cursor:crosshair;user-select:none}
.mut-edit-hint{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;padding:9px 11px;border:1px solid rgba(197,140,255,.16);border-radius:5px;background:rgba(197,140,255,.025)}
.mut-edit-hint strong{color:#e1c4ff;font:900 .48rem/1 var(--mono);letter-spacing:.08em}
.mut-edit-hint span{color:#738087;font:700 .49rem/1.35 var(--mono);text-align:right}

.mut-note-editor{display:grid;grid-template-columns:1.25fr repeat(4,minmax(0,1fr)) auto;gap:10px;margin-top:11px;padding:13px;border:1px solid #2d353a;border-radius:7px;background:#080b0d}
.mut-selected-note{display:flex;flex-direction:column;justify-content:center;border:1px solid #2b3438;border-radius:6px;background:#070a0c;padding:11px 12px}
.mut-selected-note span{color:#68757b;font:800 .47rem/1 var(--mono);letter-spacing:.08em}
.mut-selected-note strong{margin-top:7px;color:#ead4ff;font:900 .8rem/1.2 var(--mono)}
.mut-selected-note small{margin-top:6px;color:#6f7c82;font:650 .48rem/1.35 var(--mono)}
.mut-note-editor-actions{display:flex;align-items:flex-end;gap:6px}
.mut-note-editor-actions button{min-height:48px;border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);padding:0 10px;font:800 .49rem/1 var(--mono)}
.mut-note-editor-actions button:disabled{opacity:.35}
.mut-note-editor-actions button:hover:not(:disabled){border-color:rgba(197,140,255,.42);color:#e8d0ff}

.mut-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.mut-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.mut-stat span{display:block;color:#68757b;font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.mut-stat strong{display:block;margin-top:8px;color:#e1c4ff;font:900 .95rem/1.15 var(--mono)}

@media(max-width:1100px){
  .mut-settings,.mut-settings.secondary{grid-template-columns:repeat(3,1fr)}
  .mut-file-strip{grid-template-columns:1fr 1fr}
  .mut-note-editor{grid-template-columns:repeat(3,1fr)}
  .mut-selected-note{grid-column:1/-1}
}
@media(max-width:720px){
  .mut-settings,.mut-settings.secondary,.mut-file-strip,.mut-summary,.mut-note-editor{grid-template-columns:1fr}
  .mut-edit-hint{flex-direction:column}
  .mut-edit-hint span{text-align:left}
  .mut-status{width:100%;margin-left:0}
}


/* v2.0 — Tool 16: Euclidean / Polyrhythm MIDI Generator */
.rack-card.euclid{--accent:#5ef0c3;--accent-rgb:94,240,195}
.euclid-card-visual{padding:24px 14px}
.euclid-mini-head{position:absolute;right:10px;top:22px;display:flex;gap:6px}
.euclid-mini-head span{border:1px solid rgba(var(--accent-rgb),.28);border-radius:4px;padding:5px 7px;color:#a9f8df;background:rgba(var(--accent-rgb),.025);font:700 .43rem/1 var(--mono)}
.euclid-orbit{position:absolute;fill:none;stroke:rgba(94,240,195,.22);stroke-width:1.5}
.euclid-orbit .hit{fill:#5ef0c3;stroke:none;filter:drop-shadow(0 0 4px rgba(94,240,195,.3))}
.euclid-orbit .hit.b{fill:#c58cff}
.euclid-orbit.orbit-a{width:112px;height:112px;left:8%;top:64px}
.euclid-orbit.orbit-b{width:112px;height:112px;left:29%;top:78px;opacity:.78}
.euclid-mini-grid{position:absolute;left:57%;right:5%;top:79px;display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.euclid-mini-grid i{height:19px;border:1px solid #2b3936;border-radius:3px;background:#0a100f}
.euclid-mini-grid i.on{border-color:#5ef0c3;background:rgba(94,240,195,.28);box-shadow:0 0 8px rgba(94,240,195,.08)}

.euclid-global{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:1px solid #2d353a;border-radius:7px;background:#080b0d;padding:16px}
.euclid-presets,.euclid-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.euclid-presets button,.euclid-actions button{border:1px solid #343b40;border-radius:5px;background:#111619;color:var(--muted);min-height:38px;padding:0 11px;font:800 .53rem/1 var(--mono)}
.euclid-presets button:hover,.euclid-actions button:hover{border-color:rgba(94,240,195,.5);color:#c6ffed;background:rgba(94,240,195,.055)}
.euclid-actions .primary{border-color:rgba(94,240,195,.45);color:#d4fff2;background:rgba(94,240,195,.06)}
.euclid-status{margin-left:auto;align-self:center;color:#8c999f;font:700 .51rem/1.4 var(--mono)}

.euclid-lanes{display:grid;gap:12px;margin-top:14px}
.euclid-lane-card{border:1px solid #2c363a;border-radius:8px;background:#080c0e;overflow:hidden}
.euclid-lane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid #273035;background:#0b1012}
.euclid-lane-name{display:flex;align-items:center;gap:9px;color:#d5e1e4;font:900 .66rem/1 var(--mono)}
.euclid-lane-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}
.euclid-mute{border:1px solid #343b40;border-radius:4px;background:#111619;color:#7c888d;height:29px;padding:0 9px;font:800 .46rem/1 var(--mono)}
.euclid-mute.active{border-color:#ff806d;color:#ff9f90;background:rgba(255,128,109,.07)}
.euclid-lane-controls{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;padding:12px 14px}
.euclid-lane-controls .field-block span{font-size:.42rem}
.euclid-pattern-block{padding:0 14px 14px}
.euclid-pattern-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.euclid-pattern-caption span{color:#68757b;font:800 .46rem/1 var(--mono);letter-spacing:.07em}
.euclid-step-grid{display:grid;gap:5px;overflow-x:auto;padding-bottom:3px}
.euclid-step{min-width:21px;height:28px;border:1px solid #2b3539;border-radius:4px;background:#0a0f11;color:#566268;font:800 .43rem/1 var(--mono);cursor:pointer}
.euclid-step.on{border-color:var(--lane-color);background:color-mix(in srgb,var(--lane-color) 25%,transparent);color:#e9ffff;box-shadow:0 0 8px color-mix(in srgb,var(--lane-color) 16%,transparent)}
.euclid-step.manual{outline:1px dashed rgba(255,255,255,.28);outline-offset:1px}

.euclid-timeline-panel{margin-top:14px;border:1px solid var(--line);border-radius:7px;background:#090d0f;padding:14px;overflow:auto}
.euclid-timeline-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:9px}
.euclid-timeline-head span{color:#68757b;font:800 .48rem/1 var(--mono);letter-spacing:.07em}
.euclid-canvas{display:block;width:100%;height:350px;min-width:900px;border:1px solid #273035;border-radius:5px;background:#050809}
.euclid-help{margin-top:9px;color:#718086;font:700 .5rem/1.5 var(--mono)}

.euclid-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.euclid-stat{border:1px solid #2b3438;border-radius:7px;background:#090d0f;padding:14px}
.euclid-stat span{display:block;color:#68757b;font:800 .47rem/1.2 var(--mono);letter-spacing:.07em}
.euclid-stat strong{display:block;margin-top:8px;color:#c7ffed;font:900 .95rem/1.15 var(--mono)}

@media(max-width:1250px){
  .euclid-lane-controls{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:820px){
  .euclid-global,.euclid-summary{grid-template-columns:1fr}
  .euclid-lane-controls{grid-template-columns:repeat(2,1fr)}
  .euclid-status{width:100%;margin-left:0}
}