.sound-generator-page {
  --bg: var(--page-bg);
  --bg2: var(--panel-soft);
  --card: var(--panel);
  --card2: var(--panel-hover);
  --bdr: var(--header-border);
  --bdr2: color-mix(in srgb, var(--text-muted) 32%, var(--header-border));
  --t1: var(--text-strong);
  --t2: var(--text-soft);
  --t3: var(--text-muted);
  --gold: var(--accent);
  --gold2: var(--accent-strong);
  --blue: #3b82f6;
  --green: #22c55e;
  --red: #ef4444;
  --cyan: #06d6a0;
  --grad: linear-gradient(135deg, var(--accent), var(--accent-strong));
  --r: 12px;
  --rm: 8px;
  --rs: 6px;
  --font: var(--font-display);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shad: var(--shadow);
  min-height: 100vh;
  padding: 2rem 1rem 1rem;
  position: relative;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-soft), transparent),
    var(--bg);
  color: var(--t1);
  font-family: var(--font);
}

.sound-generator-page *,
.sound-generator-page *::before,
.sound-generator-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sound-generator-page .anim-delay-02 { animation-delay: .02s; }
.sound-generator-page .anim-delay-04 { animation-delay: .04s; }
.sound-generator-page .anim-delay-06 { animation-delay: .06s; }
.sound-generator-page .anim-delay-07 { animation-delay: .07s; }
.sound-generator-page .anim-delay-09 { animation-delay: .09s; }
.sound-generator-page .anim-delay-11 { animation-delay: .11s; }
.sound-generator-page .anim-delay-12 { animation-delay: .12s; }
.sound-generator-page .anim-delay-14 { animation-delay: .14s; }
.sound-generator-page .wave-state { display: flex; align-items: center; gap: 6px; }
.sound-generator-page .cb-tight { padding: .75rem; }
.sound-generator-page .cb-scene { padding: .75rem 1rem; }
.sound-generator-page::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--gold) 2.5%, transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb, var(--gold) 2.5%, transparent) 1px,transparent 1px);
  background-size:52px 52px;
}
.sound-generator-page .inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;}

/* ── Header ── */
.sound-generator-page .hdr{text-align:center;margin-bottom:1.75rem;padding-bottom:1.5rem;border-bottom:1px solid var(--bdr);}
.sound-generator-page .hdr-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb, var(--gold) 8%, transparent);border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  border-radius:100px;padding:4px 16px 4px 10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--gold);margin-bottom:.9rem;
}
.sound-generator-page .bdot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:blink 1.8s ease-in-out infinite;}
.sound-generator-page .hdr h1{font-size:clamp(2rem,5.5vw,3.4rem);font-weight:800;letter-spacing:0;line-height:1;margin-bottom:.55rem;}
.sound-generator-page .hdr h1 .shine{
  background:linear-gradient(135deg,var(--gold) 0%,color-mix(in srgb, #fff 78%, var(--gold)) 45%,var(--gold) 90%);
  background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:shine 3.5s linear infinite;
}
.sound-generator-page .hdr p{color:var(--t2);font-size:.88rem;letter-spacing:.01em;}

/* ── Use Case strip ── */
.sound-generator-page .uc-strip{margin-bottom:1.5rem;overflow-x:auto;display:flex;gap:8px;padding-bottom:4px;scrollbar-width:none;}
.sound-generator-page .uc-strip::-webkit-scrollbar{display:none;}
.sound-generator-page .uc-pill{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:100px;border:1.5px solid var(--bdr2);
  background:var(--card);color:var(--t2);font-family:var(--font);
  font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.sound-generator-page .uc-pill:hover{border-color:color-mix(in srgb, var(--gold) 60%, transparent);color:var(--gold);}
.sound-generator-page .uc-pill.on{border-color:var(--gold);background:color-mix(in srgb, var(--gold) 12%, transparent);color:var(--gold);box-shadow:0 0 20px color-mix(in srgb, var(--gold) 15%, transparent);}

/* ── Main grid ── */
.sound-generator-page .main-grid{display:grid;grid-template-columns:330px 1fr 290px;gap:1rem;align-items:start;}
@media(max-width:1080px){.sound-generator-page .main-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.sound-generator-page .main-grid{grid-template-columns:1fr;}}
.sound-generator-page .col{display:flex;flex-direction:column;gap:1rem;}

/* ── Card ── */
.sound-generator-page .card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);overflow:hidden;animation:fadeUp .45s ease both;}
.sound-generator-page .ch{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.018);}
.sound-generator-page .cl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);display:flex;align-items:center;gap:7px;}
.sound-generator-page .cl-ico{font-size:.88rem;}
.sound-generator-page .cbadge{font-family:var(--mono);font-size:.57rem;color:var(--t3);background:var(--bg2);border:1px solid var(--bdr);padding:2px 8px;border-radius:100px;}
.sound-generator-page .cb{padding:1rem;}

/* ── Selection grids ── */
.sound-generator-page .sg4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.sound-generator-page .sg3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
@media(max-width:480px){.sound-generator-page .sg4{grid-template-columns:repeat(3,1fr);}}

.sound-generator-page .sb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 4px 8px;border-radius:var(--rm);border:1.5px solid var(--bdr2);
  background:var(--bg2);cursor:pointer;gap:5px;transition:all .18s;
  font-family:var(--font);position:relative;overflow:hidden;
}
.sound-generator-page .sb::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb, var(--gold) 10%, transparent),transparent);opacity:0;transition:.2s;}
.sound-generator-page .sb .ico{font-size:1.18rem;line-height:1;position:relative;z-index:1;}
.sound-generator-page .sb .nm{font-size:.59rem;font-weight:700;color:var(--t2);text-align:center;line-height:1.2;letter-spacing:.01em;position:relative;z-index:1;}
.sound-generator-page .sb:hover{border-color:color-mix(in srgb, var(--gold) 55%, transparent);transform:translateY(-2px);}
.sound-generator-page .sb:hover::before{opacity:1;}
.sound-generator-page .sb:hover .nm{color:var(--gold);}
.sound-generator-page .sb.on{border-color:var(--gold);background:color-mix(in srgb, var(--gold) 10%, transparent);box-shadow:0 0 14px color-mix(in srgb, var(--gold) 20%, transparent),inset 0 0 12px color-mix(in srgb, var(--gold) 5%, transparent);}
.sound-generator-page .sb.on::before{opacity:1;}
.sound-generator-page .sb.on .nm{color:var(--gold);font-weight:700;}
.sound-generator-page .sb.on::after{content:'✓';position:absolute;top:3px;right:4px;font-size:.48rem;color:var(--gold);font-weight:800;z-index:1;}

/* ── Waveform ── */
.sound-generator-page .wave-wrap{position:relative;background:#040608;border-radius:var(--rm);overflow:hidden;height:130px;}
.sound-generator-page #waveCanvas{width:100%;height:100%;display:block;}
.sound-generator-page .wave-status{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:6px;}
.sound-generator-page .sdot{width:7px;height:7px;border-radius:50%;background:var(--t3);transition:all .3s;flex-shrink:0;}
.sound-generator-page .sdot.live{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.22);animation:pulse 1.5s infinite;}
.sound-generator-page .slbl{font-family:var(--mono);font-size:.58rem;color:var(--t3);}

/* ── Scene label ── */
.sound-generator-page .scene-box{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--rm);padding:.75rem 1rem;font-size:.74rem;color:var(--t2);line-height:1.75;min-height:48px;font-style:italic;letter-spacing:.01em;}

/* ── Layer list ── */
.sound-generator-page .layers-scroll{max-height:290px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bdr2) transparent;}
.sound-generator-page .layer-empty{text-align:center;padding:1.5rem .5rem;color:var(--t3);font-size:.7rem;font-family:var(--mono);line-height:2.2;}
.sound-generator-page .li{display:flex;align-items:center;gap:.55rem;padding:.48rem .6rem;background:var(--bg2);border-radius:var(--rm);margin-bottom:5px;border:1px solid var(--bdr);transition:border-color .2s;}
.sound-generator-page .li:hover{border-color:var(--bdr2);}
.sound-generator-page .li-ico{font-size:.86rem;flex-shrink:0;}
.sound-generator-page .li-name{font-size:.65rem;font-weight:700;color:var(--t2);flex:0 0 56px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sound-generator-page .li-cat{font-size:.53rem;color:var(--t3);font-family:var(--mono);flex:0 0 34px;}
.sound-generator-page .li-vol{flex:1;-webkit-appearance:none;height:3px;background:var(--bdr2);border-radius:2px;outline:none;cursor:pointer;}
.sound-generator-page .li-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 6px color-mix(in srgb, var(--gold) 40%, transparent);}
.sound-generator-page .li-pct{font-family:var(--mono);font-size:.57rem;color:var(--gold);width:27px;text-align:right;flex-shrink:0;}
.sound-generator-page .li-vu{width:4px;height:26px;background:var(--bdr);border-radius:2px;overflow:hidden;flex-shrink:0;position:relative;}
.sound-generator-page .li-vub{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,#22c55e,#84cc16,#eab308,#ef4444);border-radius:2px;height:30%;transition:height .09s;}
.sound-generator-page .li-rm{width:18px;height:18px;border-radius:50%;border:1px solid var(--bdr2);background:transparent;color:var(--t3);cursor:pointer;font-size:.54rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0;}
.sound-generator-page .li-rm:hover{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.1);}

/* ── Master vol ── */
.sound-generator-page .mv-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem;}
.sound-generator-page .mv-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);flex-shrink:0;width:42px;}
.sound-generator-page .mv-row input[type=range]{flex:1;-webkit-appearance:none;height:4px;background:var(--bdr2);border-radius:2px;outline:none;cursor:pointer;}
.sound-generator-page .mv-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent);cursor:pointer;}
.sound-generator-page .mv-val{font-family:var(--mono);font-size:.64rem;color:var(--gold);width:36px;text-align:right;flex-shrink:0;}

/* ── Buttons ── */
.sound-generator-page .bg2x{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.sound-generator-page .btn-play{padding:.85rem;border-radius:var(--rm);border:none;background:var(--grad);color:#090500;font-family:var(--font);font-weight:800;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .22s;box-shadow:0 4px 20px color-mix(in srgb, var(--gold) 28%, transparent);letter-spacing:.02em;}
.sound-generator-page .btn-play:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb, var(--gold) 44%, transparent);}
.sound-generator-page .btn-play.live{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 20px rgba(16,185,129,.3);}
.sound-generator-page .btn-stop{padding:.85rem;border-radius:var(--rm);border:1.5px solid var(--bdr2);background:transparent;color:var(--t2);font-family:var(--font);font-weight:700;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;}
.sound-generator-page .btn-stop:hover{border-color:var(--red);color:var(--red);background:rgba(239,68,68,.06);}
.sound-generator-page .btn-out{width:100%;padding:.72rem;border-radius:var(--rm);border:1.5px solid var(--bdr2);background:transparent;color:var(--t2);font-family:var(--font);font-weight:600;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;margin-bottom:8px;}
.sound-generator-page .btn-out:hover{border-color:var(--gold);color:var(--gold);background:color-mix(in srgb, var(--gold) 5%, transparent);}
.sound-generator-page .btn-exp{width:100%;padding:.72rem;border-radius:var(--rm);border:1.5px solid rgba(59,130,246,.3);background:rgba(59,130,246,.07);color:#60a5fa;font-family:var(--font);font-weight:600;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;position:relative;overflow:hidden;}
.sound-generator-page .btn-exp:hover{border-color:var(--blue);background:rgba(59,130,246,.15);}
.sound-generator-page .btn-exp:disabled{opacity:.5;cursor:not-allowed;}
.sound-generator-page .exp-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(59,130,246,.22);width:0%;transition:width .25s;}
.sound-generator-page .exp-lbl{position:relative;z-index:1;}

/* ── Tips ── */
.sound-generator-page .tips{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;}
@media(max-width:560px){.sound-generator-page .tips{grid-template-columns:1fr;}}
.sound-generator-page .tip{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:1rem 1.1rem;}
.sound-generator-page .tip-i{font-size:1.2rem;margin-bottom:.35rem;}
.sound-generator-page .tip-t{font-size:.75rem;font-weight:700;margin-bottom:.2rem;}
.sound-generator-page .tip-b{font-size:.7rem;color:var(--t2);line-height:1.65;}

/* ── Animations ── */
@keyframes shine{from{background-position:200% center}to{background-position:-200% center}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.22)}50%{box-shadow:0 0 0 6px rgba(34,197,94,.07)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}