:root{
    --bg:#05070F;
    --bg-void:#02030A;
    --surface:rgba(16,22,42,0.55);
    --surface-2:rgba(26,35,64,0.62);
    --ink:#EDEFF5;
    --ink-muted:#8B93AB;
    --on-accent:#0A0F1E;
    --amber:#D4AF37;
    --rust:#C08552;
    --gold:#9FB2C7;
    --wine:#2E8B6E;
    --bronze:#8B6FB3;
    --good:#4CAF82;
    --bad:#D6484B;
    --line:rgba(237,239,245,0.12);
    --line-bright:rgba(237,239,245,0.24);
    --depth-1:0 1px 2px rgba(2,3,10,0.6), 0 6px 16px -6px rgba(2,3,10,0.7);
    --depth-2:0 2px 6px rgba(2,3,10,0.5), 0 22px 48px -18px rgba(2,3,10,0.9);
    --depth-3:0 4px 12px rgba(2,3,10,0.55), 0 56px 100px -34px rgba(2,3,10,0.95), 0 18px 44px -16px rgba(2,3,10,0.75);
    --ease-deep:cubic-bezier(.16,.84,.26,1);
    --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
    --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--bg-void);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}

  /* ═══ DEEP SPACE ════════════════════════════════════════════════
     Layered depth: void gradient → galactic core → 3D star field
     (canvas) → drifting nebulae → dust grain → vignette.
     Every layer moves at its own rate so scrolling reads as travel
     through space rather than a sliding picture.                   */
  #galaxy-bg{
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    background:
      radial-gradient(125% 90% at 50% -14%, #19224a 0%, #101740 26%, #0a0f26 52%, #05070f 76%, #02030a 100%);
    transition:opacity 1.1s var(--ease-deep);
  }
  .gx-layer{position:absolute;inset:0;will-change:transform;}
  .gx-cloud{position:absolute;inset:-32% -24%;will-change:transform;backface-visibility:hidden;}

  /* the galactic core — a lens of violet light with a gold heart */
  .gx-core{
    background:
      radial-gradient(48% 17% at 50% 44%, rgba(168,142,255,0.34), rgba(88,66,206,0.14) 44%, transparent 74%),
      radial-gradient(21% 7.5% at 50% 44%, rgba(255,236,190,0.40), rgba(212,175,55,0.15) 46%, transparent 76%);
    filter:blur(26px);mix-blend-mode:screen;
  }
  /* a slow light sweep crossing the whole field */
  .gx-beam{
    background:linear-gradient(104deg, transparent 34%, rgba(176,196,255,0.10) 47%, rgba(255,240,205,0.07) 51%, transparent 64%);
    filter:blur(30px);mix-blend-mode:screen;
  }
  .gx-nebula1{
    background:
      radial-gradient(41% 33% at 15% 19%, rgba(112,74,222,0.42), transparent 68%),
      radial-gradient(33% 27% at 83% 9%, rgba(50,96,226,0.32), transparent 70%);
    filter:blur(14px);mix-blend-mode:screen;
  }
  .gx-nebula2{
    background:
      radial-gradient(39% 34% at 87% 65%, rgba(148,64,210,0.32), transparent 68%),
      radial-gradient(31% 25% at 24% 85%, rgba(38,74,208,0.28), transparent 70%);
    filter:blur(22px);mix-blend-mode:screen;
  }
  .gx-nebula3{
    background:
      radial-gradient(27% 20% at 62% 34%, rgba(46,139,110,0.17), transparent 70%),
      radial-gradient(23% 18% at 8% 57%, rgba(212,175,55,0.14), transparent 72%),
      radial-gradient(18% 14% at 44% 92%, rgba(139,111,179,0.20), transparent 72%);
    filter:blur(34px);mix-blend-mode:screen;
  }
  #gx-stars{position:absolute;inset:0;display:block;width:100%;height:100%;}
  .gx-dust{
    position:absolute;inset:0;opacity:0.14;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .gx-vignette{
    position:absolute;inset:0;
    background:radial-gradient(118% 82% at 50% 34%, transparent 40%, rgba(2,3,10,0.45) 74%, rgba(2,3,10,0.86) 100%);
  }

  @media (prefers-reduced-motion: no-preference){
    .gx-core{animation:gxSpin 240s linear infinite;}
    .gx-beam{animation:gxSweep 46s ease-in-out infinite alternate;}
    .gx-nebula1{animation:gxDrift1 84s ease-in-out infinite alternate;}
    .gx-nebula2{animation:gxDrift2 112s ease-in-out infinite alternate;}
    .gx-nebula3{animation:gxDrift3 148s ease-in-out infinite alternate;}
  }
  @keyframes gxSpin{
    from{transform:rotate(0deg) scale(1.05);}
    to{transform:rotate(360deg) scale(1.05);}
  }
  @keyframes gxSweep{
    0%{transform:translate3d(-16%,-8%,0) rotate(-3deg);opacity:0.45;}
    100%{transform:translate3d(16%,8%,0) rotate(3deg);opacity:0.9;}
  }
  @keyframes gxDrift1{
    0%{transform:translate3d(-2.5%,1%,0) scale(1) rotate(0deg);}
    50%{transform:translate3d(3%,-2.5%,0) scale(1.16) rotate(4deg);}
    100%{transform:translate3d(-1%,2.5%,0) scale(1.05) rotate(-3deg);}
  }
  @keyframes gxDrift2{
    0%{transform:translate3d(2%,-1.5%,0) scale(1.08) rotate(2deg);}
    50%{transform:translate3d(-3.5%,2%,0) scale(1) rotate(-4deg);}
    100%{transform:translate3d(1.5%,-2%,0) scale(1.14) rotate(3deg);}
  }
  @keyframes gxDrift3{
    0%{transform:translate3d(0,2%,0) scale(1.12) rotate(-2deg);}
    50%{transform:translate3d(2.5%,-2%,0) scale(1) rotate(3deg);}
    100%{transform:translate3d(-2%,1%,0) scale(1.1) rotate(-1deg);}
  }

  /* during an exercise the sky recedes so the ear can lead */
  body.exercise-mode #galaxy-bg{opacity:0.34;}

  :focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:2px;}
  .choice-btn:focus-visible, .lr-go:focus-visible, .level-pill:focus-visible{border-color:var(--mod-color, var(--amber));}

  /* ═══ DEPTH REVEALS ═════════════════════════════════════════════ */
  .reveal{
    opacity:0;
    transform:perspective(1400px) translate3d(0,44px,-190px) rotateX(6deg);
    filter:blur(9px);
    transition:opacity 1s var(--ease-deep), transform 1.25s var(--ease-deep), filter 1s var(--ease-deep);
  }
  .reveal.in{opacity:1;transform:none;filter:none;}

  /* staggered children rise out of the same depth (uses the
     independent `translate`/`scale` props so hover `transform`
     still composes on top) */
  @keyframes gxRise{
    from{opacity:0;translate:0 26px;scale:0.975;}
    to{opacity:1;translate:0 0;scale:1;}
  }
  .hero-copy > *, .hero-stats > div, .feature, .price-card, .lesson-row, .level-pill{opacity:0;translate:0 26px;}
  .reveal.in .hero-copy > *, .reveal.in .hero-stats > div,
  .reveal.in .feature, .reveal.in .price-card,
  .reveal.in .lesson-row, .reveal.in .level-pill{
    animation:gxRise .9s var(--ease-deep) forwards;
  }
  .reveal.in > *:nth-child(1), .reveal.in .hero-copy > *:nth-child(1){animation-delay:.04s;}
  .reveal.in .hero-copy > *:nth-child(2){animation-delay:.12s;}
  .reveal.in .hero-copy > *:nth-child(3){animation-delay:.20s;}
  .reveal.in .hero-copy > *:nth-child(4){animation-delay:.28s;}
  .reveal.in .feature:nth-child(1), .reveal.in .price-card:nth-child(1), .reveal.in .lesson-row:nth-child(1), .reveal.in .hero-stats > div:nth-child(1), .reveal.in .level-pill:nth-child(1){animation-delay:.06s;}
  .reveal.in .feature:nth-child(2), .reveal.in .price-card:nth-child(2), .reveal.in .lesson-row:nth-child(2), .reveal.in .hero-stats > div:nth-child(2), .reveal.in .level-pill:nth-child(2){animation-delay:.14s;}
  .reveal.in .feature:nth-child(3), .reveal.in .price-card:nth-child(3), .reveal.in .lesson-row:nth-child(3), .reveal.in .hero-stats > div:nth-child(3), .reveal.in .level-pill:nth-child(3){animation-delay:.22s;}
  .reveal.in .feature:nth-child(4), .reveal.in .lesson-row:nth-child(4), .reveal.in .level-pill:nth-child(4){animation-delay:.30s;}
  .reveal.in .feature:nth-child(5), .reveal.in .lesson-row:nth-child(5){animation-delay:.38s;}
  .reveal.in .feature:nth-child(6), .reveal.in .lesson-row:nth-child(6){animation-delay:.46s;}
  .reveal.in .lesson-row:nth-child(n+7){animation-delay:.54s;}
  .reveal.in .hero-stats > div:nth-child(1){animation-delay:.36s;}
  .reveal.in .hero-stats > div:nth-child(2){animation-delay:.44s;}
  .reveal.in .hero-stats > div:nth-child(3){animation-delay:.52s;}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;filter:none;transition:none;}
    .gx-layer{transform:none !important;}
    .gx-cloud{animation:none !important;}
    .hero-copy > *, .hero-stats > div, .feature, .price-card, .lesson-row, .level-pill{opacity:1;translate:none;animation:none !important;}
  }

  #app{position:relative;z-index:1;}
  #app{max-width:820px;margin:0 auto;padding:0 20px 70px;}
  a{color:inherit;}
  button{cursor:pointer;font-family:inherit;}

  .topnav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px 20px;margin:0 -20px;border-bottom:1px solid var(--line);
    background:linear-gradient(to bottom, rgba(5,7,15,0.92), rgba(5,7,15,0.62) 70%, rgba(5,7,15,0));
    backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);}
  .brand{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-0.01em;}
  .topnav nav{display:flex;gap:22px;font-size:14px;color:var(--ink-muted);}
  .topnav nav a{text-decoration:none;}
  .topnav nav a:hover{color:var(--ink);}

  .hero{padding:56px 0 40px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:start;}
  .hero{position:relative;}
  .hero::before{content:'';position:absolute;left:-14%;top:-6%;width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle, rgba(140,116,255,0.16), transparent 66%);filter:blur(26px);z-index:-1;}
  .hero h1{font-family:var(--serif);font-weight:700;font-size:46px;line-height:1.08;margin:0 0 18px;letter-spacing:-0.018em;max-width:14ch;
    background:linear-gradient(168deg, #FFFFFF 6%, #E4E8F5 38%, #B9C2DC 78%, #8D9ABC 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 22px 48px rgba(2,3,10,0.6);}
  .hero p.lead{color:var(--ink-muted);font-size:16.5px;line-height:1.6;max-width:48ch;margin:0 0 26px;}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
  .cta-primary{background:linear-gradient(175deg, #E7C558, var(--amber) 52%, #B8932A);color:var(--on-accent);border:none;border-radius:5px;padding:14px 24px;font-size:15px;font-weight:600;text-decoration:none;display:inline-block;
    box-shadow:var(--depth-2), inset 0 1px 0 rgba(255,255,255,0.32);
    transition:transform .35s var(--ease-deep), box-shadow .35s var(--ease-deep);}
  .cta-primary:hover{transform:translateY(-3px);box-shadow:var(--depth-3), 0 0 34px -8px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.32);}
  .cta-ghost{background:rgba(237,239,245,0.03);border:1px solid var(--line);color:var(--ink);border-radius:5px;padding:14px 24px;font-size:15px;text-decoration:none;display:inline-block;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:transform .35s var(--ease-deep), border-color .3s ease, background .3s ease;}
  .cta-ghost:hover{border-color:var(--line-bright);background:rgba(237,239,245,0.07);transform:translateY(-3px);}
  .hero-stats{display:flex;gap:34px;margin-top:40px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;}
  .hero-stats div b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;}
  .hero-stats div span{color:var(--ink-muted);font-size:13px;}

  .hero-panel{background:linear-gradient(162deg, rgba(38,48,84,0.62), rgba(12,17,34,0.58));border:1px solid var(--line);border-radius:12px;padding:22px 22px 8px;position:relative;overflow:hidden;
    backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
    box-shadow:var(--depth-3), inset 0 1px 0 rgba(237,239,245,0.09);}
  .hero-panel::before{content:'';position:absolute;top:0;left:-40%;width:180%;height:2px;background:linear-gradient(90deg, transparent, var(--amber), rgba(168,142,255,0.8), transparent);}
  .hero-panel::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 55% at 78% -10%, rgba(168,142,255,0.14), transparent 70%);}
  @media (prefers-reduced-motion: no-preference){
    .hero-panel::before{animation:gxScan 7.5s var(--ease-deep) infinite;}
  }
  @keyframes gxScan{0%,100%{transform:translateX(-22%);opacity:0.35;}50%{transform:translateX(22%);opacity:1;}}
  .hero-panel h4{font-family:var(--serif);font-size:13px;margin:0 0 6px;color:var(--ink-muted);font-weight:600;letter-spacing:0.01em;}
  .hero-panel-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:13.5px;}
  .hero-panel-row:first-of-type{border-top:none;}
  .hero-panel-row .hp-label{display:flex;align-items:center;}
  .hero-panel-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:10px;flex:0 0 auto;}
  .hero-panel-row b{font-family:var(--serif);font-weight:600;color:var(--ink-muted);font-size:12.5px;}

  .features{display:flex;flex-direction:column;margin:54px 0;border-top:1px solid var(--line);}
  .feature{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-bottom:1px solid var(--line);}
  .feature{transition:transform .4s var(--ease-deep);}
  .feature:hover{transform:translateX(5px);}
  .feature .f-mark{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:14px;flex:0 0 auto;color:var(--on-accent);
    box-shadow:0 0 0 1px rgba(2,3,10,0.6), 0 0 26px -6px currentColor, var(--depth-1);}
  .feature-body h3{font-size:16px;margin:0 0 6px;font-weight:600;}
  .feature-body p{font-size:13.5px;color:var(--ink-muted);line-height:1.6;margin:0;max-width:58ch;}

  .pricing-intro{margin:56px 0 26px;}
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:56px;align-items:start;}
  .price-card{position:relative;border:1px solid var(--line);border-radius:10px;background:linear-gradient(164deg, rgba(34,44,78,0.56), rgba(11,16,32,0.56));padding:26px 22px;display:flex;flex-direction:column;
    backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
    box-shadow:var(--depth-2), inset 0 1px 0 rgba(237,239,245,0.07);
    transition:transform .45s var(--ease-deep), box-shadow .45s var(--ease-deep), border-color .3s ease;}
  .price-card:hover{transform:translateY(-8px);box-shadow:var(--depth-3);border-color:var(--line-bright);}
  .price-card.featured{border-color:rgba(212,175,55,0.55);background:linear-gradient(164deg, rgba(52,48,84,0.66), rgba(16,20,40,0.62));margin-top:-12px;
    box-shadow:var(--depth-3), 0 0 60px -22px rgba(212,175,55,0.5), inset 0 1px 0 rgba(255,231,176,0.16);}
  .price-card.featured:hover{transform:translateY(-8px);}
  .price-card .ribbon{position:absolute;top:-11px;right:18px;background:var(--amber);color:var(--on-accent);font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;}
  .price-card h3{font-family:var(--serif);font-size:18px;margin:4px 0 2px;font-weight:600;}
  .price-card .plan-sub{color:var(--ink-muted);font-size:12.5px;margin-bottom:16px;}
  .price-card .amount{font-family:var(--serif);font-size:32px;font-weight:600;}
  .price-card .amount .per{font-size:13px;color:var(--ink-muted);font-family:var(--sans);font-weight:400;}
  .price-card .save-note{font-size:12px;color:var(--amber);margin:6px 0 0;}
  .price-card ul{list-style:none;padding:0;margin:18px 0 22px;font-size:13.5px;color:var(--ink-muted);flex:1;}
  .price-card li{padding:4px 0;}
  .price-card li:before{content:'— ';color:var(--amber);}
  .plan-btn{background:var(--amber);color:var(--on-accent);border:none;border-radius:4px;padding:12px 18px;font-size:14px;font-weight:600;width:100%;}
  .plan-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink);}
  .plan-btn:hover{opacity:0.92;}
  .soon-note{font-size:12px;color:var(--ink-muted);margin-top:10px;text-align:center;display:none;}
  .soon-note.show{display:block;}
  @keyframes cardFlash{ 0%{box-shadow:0 0 0 0 rgba(212,175,55,0.55);} 100%{box-shadow:0 0 0 14px rgba(212,175,55,0);} }
  .price-card.flash{animation:cardFlash 0.9s ease-out;}
  .reveal.in .price-card.flash{animation:gxRise .9s var(--ease-deep) forwards, cardFlash 0.9s ease-out;}

  h2.section-title{font-family:var(--serif);font-size:28px;margin:0 0 6px;}
  p.section-sub{color:var(--ink-muted);font-size:14px;margin:0 0 22px;}
  .level-filter{display:flex;gap:8px;margin-bottom:34px;flex-wrap:wrap;}
  .level-pill{background:rgba(237,239,245,0.04);border:1px solid var(--line);color:var(--ink-muted);border-radius:20px;padding:7px 16px;font-size:13px;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--depth-1);
    transition:transform .3s var(--ease-deep), border-color .25s ease, color .25s ease;}
  .level-pill:hover{transform:translateY(-2px);border-color:var(--line-bright);color:var(--ink);}
  .level-pill.active{background:var(--amber);color:var(--on-accent);border-color:var(--amber);font-weight:600;}

  .module{position:relative;margin-bottom:38px;padding-left:20px;}
  .module::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
    background:linear-gradient(to bottom, var(--mod-color, var(--amber)), rgba(237,239,245,0.06));
    box-shadow:0 0 22px -3px var(--mod-color, var(--amber));}
  .module-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;flex-wrap:wrap;gap:6px;}
  .module-head h3{font-family:var(--serif);font-size:21px;margin:0;font-weight:600;}
  .module-count{color:var(--ink-muted);font-size:12px;}
  .module p.module-desc{color:var(--ink-muted);font-size:13.5px;margin:0 0 14px;max-width:56ch;line-height:1.5;}

  .lesson-row{display:flex;align-items:center;gap:12px;padding:12px 10px 12px 0;border-top:1px solid var(--line);border-radius:6px;
    transition:transform .35s var(--ease-deep), background .3s ease;}
  .lesson-row:hover{transform:translateX(6px);background:linear-gradient(90deg, rgba(237,239,245,0.05), transparent 72%);}
  .lesson-row:first-of-type{border-top:none;}
  .lesson-row .check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--good);}
  .lesson-row .check.done{border-color:var(--good);background:rgba(76,175,130,0.18);}
  .lesson-row .lr-main{flex:1;min-width:0;}
  .lesson-row .lr-title{font-size:14.5px;font-weight:500;}
  .lesson-row .lr-meta{font-size:12px;color:var(--ink-muted);margin-top:2px;}
  .tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);color:var(--ink-muted);margin-right:6px;}
  .lesson-row .lr-go{background:none;border:1px solid var(--mod-color, var(--amber));color:var(--mod-color, var(--amber));border-radius:4px;padding:8px 14px;font-size:13px;white-space:nowrap;}
  .lesson-row .lr-go:hover{background:var(--surface-2);}
  .lesson-row .lr-go.locked{border-color:var(--line);color:var(--ink-muted);}
  .lesson-row .check.lock{font-size:10px;color:var(--ink-muted);}
  .tag.tag-free{border-color:var(--good);color:var(--good);}
  .tag.tag-premium{border-color:var(--amber);color:var(--amber);}

  footer.note{margin-top:50px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-muted);font-size:13px;line-height:1.6;}

  .back-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-muted);font-size:14px;padding:20px 0 6px;margin:0;}
  .back-link:hover{color:var(--ink);}
  .lesson-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
  .lesson-head h2{font-family:var(--serif);font-size:21px;margin:0;}
  .progress-text{color:var(--ink-muted);font-size:13px;}
  .progress-bar{height:3px;background:var(--surface-2);border-radius:2px;margin-bottom:32px;overflow:hidden;}
  .progress-fill{height:100%;background:var(--mod-color, var(--amber));transition:width .3s ease;}

  .play-zone{display:flex;flex-direction:column;align-items:center;margin-bottom:34px;}
  .play-zone{position:relative;}
  .play-btn{position:relative;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 50% 28%, rgba(46,58,98,0.8), rgba(9,13,28,0.85));border:1.5px solid var(--mod-color, var(--amber));color:var(--mod-color, var(--amber));display:flex;align-items:center;justify-content:center;font-size:26px;
    box-shadow:var(--depth-2), 0 0 44px -14px var(--mod-color, var(--amber)), inset 0 1px 0 rgba(237,239,245,0.12);
    transition:transform .12s ease, background .15s ease, box-shadow .3s ease;}
  .play-btn::before,.play-btn::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--mod-color, var(--amber));opacity:0;pointer-events:none;}
  @media (prefers-reduced-motion: no-preference){
    .play-btn::before{animation:gxPulse 3.4s ease-out infinite;}
    .play-btn::after{animation:gxPulse 3.4s ease-out 1.7s infinite;}
  }
  @keyframes gxPulse{0%{opacity:0.5;transform:scale(1);}100%{opacity:0;transform:scale(1.85);}}
  .play-btn:active{transform:scale(0.94);}
  .play-btn:hover{background:var(--surface-2);}
  .play-hint{margin-top:10px;color:var(--ink-muted);font-size:13px;text-align:center;max-width:36ch;}

  .choices{display:flex;flex-direction:column;gap:10px;}
  .choice-btn{background:linear-gradient(160deg, rgba(32,42,74,0.55), rgba(11,16,32,0.55));border:1px solid var(--line);border-radius:6px;padding:14px 16px;color:var(--ink);font-size:15px;text-align:left;display:flex;align-items:center;gap:14px;
    transition:border-color .2s ease, background .2s ease, transform .3s var(--ease-deep), box-shadow .3s ease;
    backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);
    box-shadow:var(--depth-1), inset 0 1px 0 rgba(237,239,245,0.06);}
  .choice-btn:not(:disabled):hover{border-color:var(--mod-color, var(--amber));transform:translateY(-2px);box-shadow:var(--depth-2), inset 0 1px 0 rgba(237,239,245,0.08);}
  .choice-btn:disabled{cursor:default;}
  .choice-btn.correct{border-color:var(--good);background:rgba(76,175,130,0.14);}
  .choice-btn.wrong{border-color:var(--bad);background:rgba(214,72,75,0.14);}

  .rhythm-bar{display:flex;gap:2px;height:20px;flex:0 0 130px;}
  .rhythm-seg{background:var(--mod-color, var(--amber));border-radius:2px;}
  .rhythm-seg.rest{background:transparent;border:1px dashed var(--ink-muted);}

  .next-zone{margin-top:24px;display:flex;justify-content:flex-end;}
  .primary-btn{background:var(--mod-color, var(--amber));color:var(--on-accent);border:none;border-radius:4px;padding:12px 22px;font-size:14px;font-weight:600;}
  .primary-btn:hover{opacity:0.92;}
  .primary-btn:disabled{opacity:0.4;cursor:default;}

  .mic-gate{text-align:center;padding:50px 20px;}
  .mic-gate .mic-icon{width:64px;height:64px;border-radius:50%;background:var(--surface);border:1.5px solid var(--mod-color, var(--amber));display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 20px;color:var(--mod-color, var(--amber));}
  .mic-gate h2{font-family:var(--serif);font-size:22px;margin:0 0 10px;}
  .mic-gate p{color:var(--ink-muted);font-size:14px;max-width:44ch;margin:0 auto 26px;line-height:1.6;}
  .mic-gate .privacy{font-size:12px;color:var(--ink-muted);margin-top:18px;}
  .mic-error{color:var(--bad);font-size:13px;margin-top:16px;}

  .tuner{background:linear-gradient(162deg, rgba(34,44,78,0.56), rgba(11,16,32,0.58));border:1px solid var(--line);border-radius:12px;padding:28px 20px;text-align:center;margin-bottom:24px;
    backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
    box-shadow:var(--depth-3), inset 0 1px 0 rgba(237,239,245,0.08);}
  .tuner .note-name{font-family:var(--serif);font-size:40px;font-weight:600;min-height:48px;}
  .tuner .cents-track{position:relative;height:8px;background:var(--surface-2);border-radius:4px;margin:18px auto 8px;max-width:280px;overflow:visible;}
  .tuner .cents-mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--line);}
  .tuner .cents-needle{position:absolute;top:-5px;width:10px;height:18px;border-radius:3px;background:var(--ink-muted);transform:translateX(-50%);transition:left .08s linear, background .15s ease;left:50%;}
  .tuner .cents-label{font-size:12px;color:var(--ink-muted);}
  .target-box{background:var(--surface-2);border-radius:6px;padding:16px 18px;margin-bottom:22px;font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
  .target-box b{display:block;font-family:var(--serif);font-size:19px;margin-bottom:2px;font-weight:600;}
  .round-feedback{text-align:center;padding:14px;border-radius:6px;margin-bottom:18px;font-size:14px;font-weight:600;}
  .round-feedback.good{background:rgba(76,175,130,0.16);color:var(--good);}
  .round-feedback.mid{background:rgba(159,178,199,0.16);color:var(--gold);}
  .round-feedback.bad{background:rgba(214,72,75,0.16);color:var(--bad);}

  .clap-visual{background:linear-gradient(162deg, rgba(34,44,78,0.56), rgba(11,16,32,0.58));border:1px solid var(--line);border-radius:12px;padding:24px 20px;margin-bottom:22px;
    backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
    box-shadow:var(--depth-3), inset 0 1px 0 rgba(237,239,245,0.08);}
  .clap-visual .rhythm-bar{height:34px;flex:1;width:100%;}
  .clap-status{text-align:center;color:var(--ink-muted);font-size:13px;margin-top:12px;}
  .record-btn{width:100%;background:var(--mod-color, var(--amber));color:var(--on-accent);border:none;border-radius:6px;padding:16px;font-size:15px;font-weight:600;margin-bottom:8px;}
  .record-btn:disabled{opacity:0.5;}

  .summary{text-align:center;padding:44px 20px;}
  .summary .score{font-family:var(--serif);font-size:60px;font-weight:600;margin:12px 0 4px;
    background:linear-gradient(170deg,#FFFFFF,#DCE2F2 42%,#9AA7C8);-webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 20px 50px rgba(168,142,255,0.28);}
  .summary .score span{color:var(--ink-muted);font-size:28px;}
  .summary p.msg{color:var(--ink-muted);font-size:15px;margin-bottom:32px;}
  .summary p.adaptive-hint{color:var(--amber);font-size:13.5px;font-weight:600;margin:-20px 0 24px;}
  .summary-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .secondary-btn{background:none;border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:12px 22px;font-size:14px;}
  .secondary-btn:hover{border-color:var(--ink-muted);}

  @media (max-width:640px){
    .hero{grid-template-columns:1fr;gap:28px;}
    .hero h1{font-size:32px;}
    .pricing-grid{grid-template-columns:1fr;}
    .price-card.featured{margin-top:0;}
    .hero h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);text-shadow:0 12px 30px rgba(2,3,10,0.6);}
    .brand{font-size:16px;}
  }
  .auth-form{max-width:360px;margin:0 auto;}
  .field{margin-bottom:14px;text-align:left;}
  .field label{display:block;font-size:12.5px;color:var(--ink-muted);margin-bottom:5px;}
  .field input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:11px 12px;color:var(--ink);font-size:14px;}
  .field input:focus-visible{outline:2px solid var(--amber);outline-offset:1px;}
  .auth-tabs{display:flex;gap:8px;margin-bottom:22px;justify-content:center;}
  .auth-tab{background:none;border:1px solid var(--line);color:var(--ink-muted);border-radius:20px;padding:7px 16px;font-size:13px;}
  .auth-tab.active{background:var(--amber);color:var(--on-accent);border-color:var(--amber);font-weight:600;}
  .auth-error{color:var(--bad);font-size:13px;margin:10px 0;}
  .auth-note{color:var(--ink-muted);font-size:12px;margin-top:16px;}
  .auth-link{background:none;border:none;color:var(--amber);font-size:13px;padding:0;text-decoration:underline;}

  .nav-account{background:none;border:1px solid var(--line);color:var(--ink);border-radius:20px;padding:6px 14px;font-size:13px;}
  .nav-account:hover{border-color:var(--amber);}

  .dash-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0;}
  .dash-stat{background:linear-gradient(162deg, rgba(34,44,78,0.52), rgba(11,16,32,0.54));border:1px solid var(--line);border-radius:10px;padding:16px;
    backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);
    box-shadow:var(--depth-2), inset 0 1px 0 rgba(237,239,245,0.07);}
  .dash-stat b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;}
  .dash-stat span{color:var(--ink-muted);font-size:12px;}
  .dash-module-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;}
  .dash-module-row:first-of-type{border-top:none;}
  .dash-bar{flex:1;height:6px;background:var(--surface-2);border-radius:3px;margin:0 12px;overflow:hidden;}
  .dash-bar-fill{height:100%;background:var(--mod-color, var(--amber));}
  .config-note{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:16px 18px;font-size:13px;color:var(--ink-muted);line-height:1.6;margin-bottom:20px;}

  /* ═══ CONSERVATOIRE / AUDITORIUM — direction artistique 2026 ═══ */
  :root{
    --bg:#16090c;--bg-void:#090506;--surface:rgba(34,16,18,.82);--surface-2:rgba(70,34,35,.72);
    --ink:#fff8e9;--ink-muted:#c9bca9;--on-accent:#24130b;--amber:#e1b75a;
    --rust:#d27653;--gold:#f0dba4;--wine:#b85362;--bronze:#b58a5a;
    --good:#76bd8b;--bad:#e06767;--line:rgba(240,219,164,.19);--line-bright:rgba(240,219,164,.38);
    --depth-1:0 2px 5px rgba(0,0,0,.35);--depth-2:0 16px 34px -20px rgba(0,0,0,.8);
    --depth-3:0 28px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,248,233,.08);
  }
  body{background:#080405;}
  #galaxy-bg{opacity:1!important;isolation:isolate;background-color:#080405;background-image:
    radial-gradient(ellipse 82% 72% at 50% 42%,rgba(17,7,8,.06) 18%,rgba(8,4,5,.46) 76%,rgba(4,2,3,.82) 100%),
    linear-gradient(180deg,rgba(10,4,5,.2),rgba(10,4,5,.42) 62%,rgba(5,2,3,.72)),
    url('/assets/backgrounds/auditorium-piano.jpg');
    background-size:cover;background-position:center center;background-repeat:no-repeat;filter:saturate(.88) brightness(.86);transition:filter .45s ease,opacity .45s ease;}
  @supports(background-image:image-set(url('/assets/backgrounds/auditorium-piano.webp') type('image/webp'))){
    #galaxy-bg{background-image:
      radial-gradient(ellipse 82% 72% at 50% 42%,rgba(17,7,8,.06) 18%,rgba(8,4,5,.46) 76%,rgba(4,2,3,.82) 100%),
      linear-gradient(180deg,rgba(10,4,5,.2),rgba(10,4,5,.42) 62%,rgba(5,2,3,.72)),
      image-set(url('/assets/backgrounds/auditorium-piano.webp') type('image/webp'),url('/assets/backgrounds/auditorium-piano.jpg') type('image/jpeg'));}
  }
  #galaxy-bg .gx-layer,#gx-stars,#galaxy-bg .gx-dust,#galaxy-bg .gx-vignette{display:none!important;}
  #galaxy-bg::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,2,2,.58),transparent 22% 78%,rgba(3,2,2,.58));}
  #galaxy-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 42% at 50% 54%,rgba(218,155,72,.08),transparent 72%);}
  body.exercise-mode #galaxy-bg{opacity:1!important;filter:saturate(.72) brightness(.52);}
  @media(max-width:680px){#galaxy-bg{background-position:center center;filter:saturate(.84) brightness(.76)}body.exercise-mode #galaxy-bg{filter:saturate(.68) brightness(.48)}}
  .topnav{background:linear-gradient(to bottom,rgba(18,7,9,.97),rgba(18,7,9,.76) 72%,transparent);}
  .hero::before{background:radial-gradient(ellipse,rgba(225,183,90,.2),transparent 68%);}
  .hero h1,.summary .score{background:linear-gradient(165deg,#fffdf6,#f0dba4 65%,#b98d43);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 18px 40px rgba(0,0,0,.65);}
  .hero-panel,.module,.price-card,.dash-stat,.clap-visual,.music-card,.metronome-panel{background:linear-gradient(150deg,rgba(73,31,34,.83),rgba(22,10,12,.9));border-color:rgba(240,219,164,.2);}
  .hero-panel::before{background:linear-gradient(90deg,transparent,#e1b75a,#fff2c8,#e1b75a,transparent);}
  .cta-primary,.primary-btn{background:linear-gradient(175deg,#f4d47f,#d9a947 58%,#ad782b);}
  /* Was a Unicode Musical Symbols treble-clef glyph (𝄞), unreliable on
     mobile browser font stacks (see studio/renderer-v2.js for the full
     fix of this issue across the app's rendered notation) — an inline
     SVG data: URI is font-independent and renders identically everywhere. */
  .brand::before{content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-12%20-6%2052%2070%22%3E%3Cpath%20d%3D%22M14%206%20C22%206%2026%2012%2026%2019%20C26%2027%2019%2031%2012%2031%20C3%2031%20-2%2024%20-2%2016%20C-2%204%208%20-4%2018%20-4%20C30%20-4%2038%206%2038%2018%20C38%2034%2024%2044%2012%2046%20C-2%2048%20-10%2040%20-10%2030%20C-10%2020%20-2%2014%206%2016%20M8%2044%20C4%2052%204%2058%2010%2062%22%20fill%3D%22none%22%20stroke%3D%22%23D4AF37%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");display:inline-block;width:0.5em;height:0.68em;vertical-align:-0.05em;margin-right:8px;}
  .module{border-radius:10px;box-shadow:var(--depth-3);}
  .module::before{content:"";display:block;height:2px;background:linear-gradient(90deg,transparent,var(--mod-color),transparent);opacity:.7;}
  .reveal{transform:translateY(24px);filter:none;}

  /* Music notation and interaction */
  .music-card{border:1px solid var(--line);border-radius:12px;padding:18px;margin:18px 0;box-shadow:var(--depth-2);overflow-x:auto;}
  .staff-svg{display:block;width:100%;min-width:280px;height:auto;color:#2b1915;background:#fffaf0;border-radius:8px;box-shadow:inset 0 0 22px rgba(95,58,33,.08);}
  .staff-svg text{font-family:Georgia,'Times New Roman',serif;}
  .lesson-intro{border-left:3px solid var(--mod-color,var(--amber));padding:12px 15px;margin:12px 0 20px;background:rgba(255,248,233,.045);color:var(--ink-muted);font-size:13.5px;line-height:1.55;}
  .lesson-intro b{color:var(--ink);display:block;margin-bottom:3px;}
  .theory-sheet{max-width:780px;margin:18px auto 50px;background:linear-gradient(150deg,rgba(73,31,34,.84),rgba(22,10,12,.94));border:1px solid rgba(240,219,164,.24);border-radius:18px;padding:clamp(20px,5vw,38px);box-shadow:var(--depth-2);}
  .theory-kicker{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;}
  .theory-sheet h2{font-family:var(--serif);font-size:clamp(26px,5vw,39px);line-height:1.1;margin:0 0 8px;}
  .theory-lead{color:var(--ink-muted);margin:0 0 24px;line-height:1.55;}
  .theory-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 26px;}
  .theory-block{background:rgba(255,248,233,.05);border:1px solid var(--line);border-radius:11px;padding:15px;line-height:1.55;font-size:13.5px;color:var(--ink-muted);}
  .theory-block strong{display:block;color:var(--ink);font-family:var(--serif);font-size:16px;margin-bottom:5px;}
  .theory-start{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:22px;}
  .theory-start small{color:var(--ink-muted);line-height:1.45;max-width:390px;}
  .level-group{margin-top:20px;}
  .level-group-title{display:flex;align-items:center;gap:10px;margin:18px 0 8px;color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
  .level-group-title:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent);}
  .level-filter{display:grid;grid-template-columns:repeat(8,minmax(64px,1fr));gap:8px;margin:20px 0 16px;}
  .year-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:62px;border-radius:10px!important;padding:8px!important;font-family:var(--serif);font-size:22px!important;}
  .year-pill small{font-family:var(--sans);font-size:8px;letter-spacing:.14em;color:var(--ink-muted);}
  .year-pill.active small{color:var(--on-accent);opacity:.7;}
  .year-overview{display:grid;grid-template-columns:1.15fr 1.4fr .8fr;gap:24px;align-items:center;background:linear-gradient(145deg,rgba(91,39,42,.84),rgba(27,11,14,.94));border:1px solid rgba(240,219,164,.28);border-radius:16px;padding:24px;margin:0 0 24px;box-shadow:var(--depth-3);}
  .year-eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:var(--gold);}
  .year-overview h2{font-family:var(--serif);font-size:30px;margin:5px 0 3px;}
  .year-overview p{margin:0;color:var(--ink-muted);}
  .year-overview ul{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:0;padding:0;list-style:none;color:var(--ink-muted);font-size:12.5px;line-height:1.4;}
  .year-overview li{position:relative;padding-left:15px;}
  .year-overview li:before{content:'♪';position:absolute;left:0;color:var(--amber);}
  .year-progress{text-align:right;}
  .year-progress>b{display:block;font-family:var(--serif);font-size:34px;color:var(--gold);}
  .year-progress>span{display:block;font-size:10px;color:var(--ink-muted);margin-bottom:8px;}
  .year-progress>div{height:6px;background:rgba(255,248,233,.09);border-radius:99px;overflow:hidden;}
  .year-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--wine),var(--gold));border-radius:inherit;}
  .random-year-btn{width:100%;margin-top:12px;padding:9px 10px!important;font-size:11px!important;}
  .random-panel{max-width:760px;margin:28px auto;background:linear-gradient(145deg,rgba(91,39,42,.84),rgba(27,11,14,.96));border:1px solid rgba(240,219,164,.28);border-radius:18px;padding:clamp(22px,5vw,38px);box-shadow:var(--depth-3);}
  .random-panel h2{font-family:var(--serif);font-size:clamp(28px,5vw,42px);margin:0 0 8px;}
  .random-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:24px 0;}
  .random-year-choice{border:1px solid var(--line);background:rgba(255,248,233,.05);color:var(--ink);border-radius:10px;padding:13px 8px;font-size:13px;}
  .random-year-choice.active{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:800;}
  .session-format-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:0 0 24px;}
  .session-format{min-height:78px;border:1px solid var(--line);background:rgba(255,248,233,.045);color:var(--ink);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
  .session-format b{font-family:var(--serif);font-size:18px;}
  .session-format span{font-size:10px;color:var(--ink-muted);line-height:1.25;}
  .session-format.active{background:rgba(212,175,55,.16);border-color:var(--amber);box-shadow:0 0 0 1px rgba(212,175,55,.12) inset;}
  .session-format.active span{color:var(--ink);}
  .session-breakdown{max-width:620px;margin:22px auto;display:grid;gap:7px;}
  .session-breakdown>div{display:flex;justify-content:space-between;gap:20px;border:1px solid var(--line);background:rgba(255,248,233,.045);border-radius:8px;padding:10px 13px;color:var(--ink-muted);font-size:12px;text-align:left;}
  .session-breakdown b{color:var(--gold);}
  .writing-stage{max-width:820px;margin:0 auto;}
  .writing-staff{cursor:crosshair;touch-action:manipulation;outline:none;}
  .writing-staff:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
  .note-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px 0;}
  .note-palette button{border:1px solid var(--line);background:rgba(255,248,233,.06);color:var(--ink);border-radius:999px;padding:8px 12px;cursor:pointer;}
  .writing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:15px 0;}
  .rhythm-compose{max-width:820px;margin:0 auto;}
  .rhythm-token-palette{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0;}
  .rhythm-token{width:68px;height:82px;border:1px solid rgba(240,219,164,.3);border-radius:11px;background:#fffaf0;color:#24140f;cursor:pointer;display:grid;place-items:center;transition:transform .12s ease,box-shadow .12s ease;}
  .rhythm-token:hover,.rhythm-token:focus-visible{transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.25);outline:2px solid var(--gold);}
  .rhythm-token.active{outline:3px solid var(--gold);box-shadow:0 0 0 4px rgba(207,166,80,.22);transform:translateY(-2px);}
  .rhythm-token:disabled{opacity:.28;transform:none;cursor:not-allowed;}
  .rhythm-token svg{width:48px;height:62px;display:block;}
  .measure-meter{height:7px;border-radius:999px;background:rgba(255,248,233,.08);overflow:hidden;margin:10px 0;}
  .measure-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--wine));transition:width .2s ease;}
  .arp-write-form{max-width:600px;margin:24px auto;}
  .arp-write-form input{width:100%;background:rgba(255,248,233,.07);border:1px solid rgba(240,219,164,.32);border-radius:10px;padding:15px;color:var(--ink);font-size:18px;text-align:center;}
  .arp-write-form input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
  .correction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0;}
  .correction-stat{background:rgba(255,248,233,.05);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;color:var(--ink-muted);font-size:11px;}
  .correction-stat b{display:block;color:var(--ink);font-size:17px;margin-bottom:2px;}
  .correction-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
  .correction-compare .music-card{margin:0;}
  .audio-toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:12px 0 18px;}
  .audio-status{font-size:12px;color:var(--ink-muted);min-height:18px;}
  .volume-control{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-muted);}
  .volume-control input{accent-color:var(--amber);width:100px;}
  .tap-pad{width:100%;min-height:150px;border:1px solid rgba(240,219,164,.42);border-radius:16px;background:radial-gradient(circle at 50% 35%,rgba(225,183,90,.24),rgba(69,25,30,.86) 58%,rgba(20,8,10,.95));color:var(--ink);font-size:24px;font-family:var(--serif);font-weight:700;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 22px 50px -24px #000;transition:transform .06s ease,filter .1s ease;}
  .tap-pad.is-hit{transform:scale(.985);filter:brightness(1.35);}
  .tap-pad:disabled{opacity:.46;}
  .tap-help{text-align:center;color:var(--ink-muted);font-size:12px;margin:8px 0 16px;}
  .tap-timeline{position:relative;height:64px;border:1px solid var(--line);border-radius:8px;margin:15px 0;background:rgba(0,0,0,.18);overflow:hidden;}
  .tap-mark{position:absolute;width:3px;border-radius:3px;transform:translateX(-50%);}
  .tap-mark.expected{height:18px;top:10px;background:var(--gold);}
  .tap-mark.actual{height:18px;bottom:10px;background:var(--good);}
  .tap-mark.actual.miss{background:var(--bad);}
  .timeline-legend{display:flex;gap:18px;font-size:11px;color:var(--ink-muted);}
  .metronome-panel{border:1px solid var(--line);border-radius:14px;padding:22px;margin:20px 0;box-shadow:var(--depth-3);}
  .dictation-metro{display:grid;grid-template-columns:auto 1fr 1.2fr;align-items:center;gap:12px;border:1px solid var(--line);background:rgba(255,248,233,.045);border-radius:10px;padding:11px 14px;margin:0 0 20px;color:var(--ink-muted);font-size:12px;}
  .dictation-metro .metro-light{margin:0;width:13px;height:13px;}
  .dictation-metro label{display:flex;align-items:center;gap:7px;}
  .dictation-metro input[type="range"]{accent-color:var(--amber);min-width:90px;flex:1;}
  @media (max-width:760px){
    .level-filter{grid-template-columns:repeat(4,1fr);}
    .year-overview{grid-template-columns:1fr;gap:18px;}
    .year-overview ul{grid-template-columns:1fr;}
    .year-progress{text-align:left;}
    .dictation-metro{grid-template-columns:auto 1fr;}
    .dictation-metro label:last-child{grid-column:1/-1;}
  }
  .metro-display{text-align:center;font-family:var(--serif);font-size:48px;color:var(--gold);}
  .metro-light{width:18px;height:18px;border-radius:50%;margin:8px auto 18px;background:rgba(240,219,164,.2);box-shadow:0 0 0 1px var(--line);}
  .metro-light.on{background:var(--amber);box-shadow:0 0 24px var(--amber);}
  .metro-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .metro-controls label{font-size:12px;color:var(--ink-muted);}
  .metro-controls input,.metro-controls select{width:100%;margin-top:5px;accent-color:var(--amber);background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:9px;}
  .metro-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
  .piano{display:flex;height:120px;margin:18px auto;max-width:560px;overflow:hidden;border-radius:8px;border:1px solid #2b1915;background:#2b1915;}
  .piano-key{flex:1;border:0;border-right:1px solid #c9bca9;background:linear-gradient(#fffef8,#e9dfcc);color:#281711;padding:76px 3px 8px;font-weight:700;min-width:38px;}
  .piano-key:last-child{border-right:0}.piano-key:active{background:#e1b75a;}
  .sound-fab{position:fixed;right:14px;bottom:14px;z-index:50;border:1px solid var(--line);background:rgba(29,12,15,.94);color:var(--ink);border-radius:999px;padding:10px 14px;font-size:12px;box-shadow:var(--depth-2);}
  #lang-switcher{position:fixed;top:12px;right:14px;z-index:60;display:flex;align-items:center;gap:6px;background:rgba(10,15,30,.88);border:1px solid var(--line);border-radius:999px;padding:6px 10px 6px 12px;box-shadow:var(--depth-2);backdrop-filter:blur(6px);}
  #lang-switcher .ls-globe{font-size:13px;color:var(--ink-muted);line-height:1;}
  #lang-switcher select{appearance:none;-webkit-appearance:none;background:transparent;color:var(--ink);border:0;font:600 13px var(--sans);padding:4px 18px 4px 2px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93AB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right center;background-size:14px;}
  #lang-switcher select:focus{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px;}
  #lang-switcher option{background:#0A0F1E;color:var(--ink);}
  @media(max-width:640px){#lang-switcher{top:auto;bottom:14px;left:14px;right:auto;padding:7px 10px;}#lang-switcher select{font-size:12px;}}
  .exercise-mode #lang-switcher{opacity:.55;transform:scale(.92);transition:opacity .2s,transform .2s;}
  .exercise-mode #lang-switcher:hover,.exercise-mode #lang-switcher:focus-within{opacity:1;transform:scale(1);}
  @media(max-width:640px){.topnav nav a{display:none}.topnav{padding-top:max(14px,env(safe-area-inset-top))}.metro-controls{grid-template-columns:1fr}.music-card{padding:10px;margin-inline:-4px}.tap-pad{min-height:170px}.hero-panel{display:block}.staff-svg{min-width:250px}.theory-grid{grid-template-columns:1fr}.theory-start{align-items:stretch;flex-direction:column}.theory-start .primary-btn{width:100%}.correction-compare{grid-template-columns:1fr}.correction-grid{grid-template-columns:1fr 1fr}.session-format-grid{grid-template-columns:1fr 1fr}.random-year-grid{grid-template-columns:repeat(2,1fr)}}

  /* ---------------- STUDIO DE PARTITION ---------------- */
  .studio-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px;}
  .studio-form .field{margin-bottom:0;}
  .studio-form .field.wide{grid-column:1/-1;}
  .field select{width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:11px 12px;font-size:14px;}
  .studio-tempo-row{display:flex;align-items:center;gap:10px;}
  .studio-tempo-row input[type=range]{flex:1;accent-color:var(--amber);}
  .studio-tempo-row input[type=number]{width:64px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:8px;text-align:center;}
  .studio-scores-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
  .studio-score-row{display:flex;align-items:center;gap:12px;padding:12px 10px;border:1px solid var(--line);border-radius:6px;flex-wrap:wrap;}
  .studio-score-row .ssr-main{flex:1;min-width:140px;}
  .studio-score-row .ssr-title{font-weight:600;}
  .studio-score-row .ssr-meta{font-size:12px;color:var(--ink-muted);}
  .studio-score-row .ssr-actions{display:flex;gap:6px;flex-wrap:wrap;}
  .studio-score-row .ssr-actions button{background:none;border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:7px 10px;font-size:12px;}
  .studio-score-row .ssr-actions button.danger{border-color:var(--wine);color:var(--wine);}
  .studio-editor-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px;}
  .studio-editor-head input{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:4px;padding:9px 10px;font-size:14px;}
  .studio-editor-head input.studio-title-input{font-family:var(--serif);font-size:18px;font-weight:600;min-width:180px;}
  .studio-save-indicator{font-size:12px;color:var(--ink-muted);white-space:nowrap;}
  .studio-save-saved{color:var(--wine);}
  .studio-save-offline{color:var(--rust);}
  .studio-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
  .studio-toolbar .studio-group{display:flex;gap:4px;align-items:center;padding:0 8px;border-right:1px solid var(--line);}
  .studio-toolbar .studio-group:last-child{border-right:none;}
  .studio-btn{background:rgba(237,239,245,0.04);border:1px solid var(--line);color:var(--ink);border-radius:6px;min-width:38px;height:38px;font-size:17px;display:flex;align-items:center;justify-content:center;padding:0 8px;}
  .studio-dur-icon{display:block;flex:none;}
  .studio-btn.active{background:var(--amber);color:var(--on-accent);border-color:var(--amber);}
  .studio-btn:disabled{opacity:.35;}
  .studio-stage{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:#1a1310;padding:14px 6px;}
  .studio-stage[data-staff-target="staff-rh"]::after,.studio-stage[data-staff-target="staff-lh"]::after{content:"";position:absolute;left:8px;right:8px;height:46%;border:3px solid rgba(212,175,55,.8);border-radius:10px;pointer-events:none;box-shadow:inset 0 0 24px rgba(212,175,55,.16);z-index:5;}
  .studio-stage[data-staff-target="staff-rh"]::after{top:8px}.studio-stage[data-staff-target="staff-lh"]::after{bottom:8px}
  .studio-stage-inner{height:210px;display:flex;align-items:flex-start;}
  .studio-stage-inner.v2{height:auto;min-height:360px;display:block;background:#fffef9;}
  .studio-score-v2{display:block;width:100%;height:auto;min-width:760px;background:#fffef9;cursor:pointer;}
  .studio-score-v2 .score-line,.studio-score-v2 .score-bar{stroke:#211914;stroke-width:1.15}.studio-score-v2 .score-brace{fill:none;stroke:#211914;stroke-width:3}.studio-score-v2 .score-clef{font:44px serif;fill:#17110e}.studio-score-v2 .score-time{font:700 15px Georgia,serif;fill:#17110e}.studio-score-v2 .score-measure-number{font:11px Arial,sans-serif;fill:#6b625c}.studio-score-v2 .score-head{fill:#17110e;stroke:#17110e}.studio-score-v2 .score-head.open{fill:#fffef9;stroke-width:1.8}.studio-score-v2 .score-stem{stroke:#17110e;stroke-width:1.7}.studio-score-v2 .score-beam.primary{stroke:#17110e;stroke-width:5}.studio-score-v2 .score-beam.secondary{stroke:#17110e;stroke-width:4}.studio-score-v2 .score-accidental{font:18px serif;fill:#17110e}.studio-score-v2 .score-rest{font:24px serif;fill:#17110e}.studio-score-v2 .score-fingering{font:600 10px Georgia,serif;text-anchor:middle;fill:#17110e}.studio-score-v2 .score-direction{font:italic 13px Georgia,serif;fill:#17110e}.studio-score-v2 .score-direction.dynamic{font:bold italic 17px Georgia,serif}.studio-score-v2 .score-direction.tempo{font:bold 15px Georgia,serif}.studio-score-v2 .score-hairpin{fill:none;stroke:#17110e;stroke-width:1.2}.score-text-spanner{fill:none;stroke:#17110e;stroke-width:1;stroke-dasharray:4 5}.studio-score-v2 .score-slur{fill:none;stroke:#17110e;stroke-width:1.5;stroke-linecap:round}.studio-score-v2 .score-event{cursor:grab;touch-action:none}.studio-score-v2 .score-event:active{cursor:grabbing}.studio-score-v2 .score-event.selected .score-head{fill:#b24b58;stroke:#b24b58}.studio-score-v2 .score-direction-item{cursor:move;touch-action:none}.studio-voice-bar,.studio-pro-panel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;margin:10px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.studio-voice-bar button.active{background:var(--amber);color:#211914}
  .studio-tool-section{margin:10px 0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.studio-tool-section summary{cursor:pointer;padding:10px 12px;font-weight:700;color:var(--ink)}.studio-tool-section .studio-pro-panel{margin:0;border:0;border-top:1px solid var(--line);border-radius:0}.studio-properties{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin:10px 0;border:1px solid rgba(225,183,90,.42);border-radius:8px;background:rgba(225,183,90,.08)}.studio-properties .label{font-size:12px;color:var(--ink-muted)}.studio-properties select{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:7px}.studio-mode-chip{font-size:12px;border-radius:999px;padding:5px 10px;background:var(--surface-2);color:var(--ink-muted)}.studio-mode-chip.active{background:var(--amber);color:var(--on-accent)}
  .studio-staff-svg{height:100%;width:auto;display:block;cursor:pointer;touch-action:manipulation;}
  .studio-zoom-row{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-top:8px;font-size:12px;color:var(--ink-muted);}
  .studio-zoom-row input{accent-color:var(--amber);}
  .studio-tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 184px;gap:14px;align-items:start;}
  .studio-tool-layout.studio-listen-layout{grid-template-columns:minmax(0,1fr);max-width:900px;margin:0 auto;}
  .studio-listen-head{display:flex;flex-direction:column;gap:2px;margin-bottom:4px;}
  .studio-listen-head h1{font-size:22px;margin:0;color:var(--ink);}
  .studio-listen-head .studio-listen-composer{font-size:14px;color:var(--ink-muted);}
  .studio-transport.studio-transport-listen{justify-content:center;border-top:1px solid var(--line);padding-top:14px;margin-top:10px;}
  .studio-transport-listen .studio-play-btn-big{font-size:17px;padding:14px 30px;min-width:180px;}
  .studio-listen-secondary{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;}
  .studio-listen-secondary button, .studio-listen-secondary label{font-size:12.5px;}
  .studio-category-rail{position:sticky;top:12px;display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(28,18,20,.94);}
  .studio-category-rail button{min-height:40px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:#f6ede4;padding:8px 10px;cursor:pointer;}
  .studio-category-rail button.active{background:var(--amber);color:#241516;font-weight:700;}
  .studio-context-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px;margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);}
  .studio-context-bar select,.studio-instrument-bar select,.studio-properties select{appearance:none;background:#2b2021;color:#fff;border:1px solid #73584d;border-radius:7px;min-height:40px;padding:7px 30px 7px 10px;background-image:linear-gradient(45deg,transparent 50%,#d9b06f 50%),linear-gradient(135deg,#d9b06f 50%,transparent 50%);background-position:calc(100% - 15px) 16px,calc(100% - 10px) 16px;background-size:5px 5px;background-repeat:no-repeat;}
  .studio-audio-mix{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;}
  .studio-audio-mix label{display:flex;gap:6px;align-items:center;}
  :where(button,input,select):focus-visible{outline:3px solid #efbf70;outline-offset:2px;}
  .studio-save-pending{color:#b86d16}.studio-save-saving{color:#95610e}.studio-save-saved,.studio-save-savedLocal{color:#177548}.studio-save-offline{color:#a63333}
  .studio-transport{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px;}
  .studio-piano-toggle{display:flex;gap:6px;margin-left:auto;}
  .studio-piano{position:relative;height:130px;margin:16px 0;border-radius:8px;overflow:hidden;background:#2b1915;border:1px solid #2b1915;}
  .studio-piano-white{position:absolute;top:0;bottom:0;border-right:1px solid #c9bca9;background:linear-gradient(#fffef8,#e9dfcc);}
  .studio-piano-white:active,.studio-piano-white.pressed{background:#e1b75a;}
  .studio-piano-black{position:absolute;top:0;height:62%;background:#1a1108;border-radius:0 0 3px 3px;z-index:2;}
  .studio-piano-black:active,.studio-piano-black.pressed{background:#5a3d1c;}
  .studio-guest-note{margin:14px 0;}
  .audio-fallback-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9000;max-width:min(560px,92vw);display:none;align-items:center;gap:12px;background:var(--surface,#1a1310);border:1px solid var(--amber);border-radius:10px;padding:10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.45);font-size:13px;line-height:1.4;color:var(--ink);}
  .audio-fallback-banner.visible{display:flex;}
  .audio-fallback-banner .afb-icon{font-size:18px;flex:0 0 auto;}
  .audio-fallback-banner .afb-text{flex:1 1 auto;}
  .audio-fallback-banner .afb-close{flex:0 0 auto;background:none;border:1px solid var(--line);color:var(--ink-muted);border-radius:6px;padding:4px 9px;cursor:pointer;font-size:12px;min-height:28px;}
  .audio-fallback-banner .afb-close:hover{color:var(--ink);border-color:var(--amber);}
  @media(max-width:480px){.audio-fallback-banner{bottom:10px;font-size:12.5px;padding:9px 12px;}}
  .studio-omr-backdrop{position:fixed;inset:0;z-index:9500;background:rgba(2,3,10,.72);display:flex;align-items:center;justify-content:center;padding:16px;}
  .studio-omr-modal{width:min(520px,100%);max-height:88vh;overflow-y:auto;background:var(--surface-2,#151b30);border:1px solid var(--line-bright);border-radius:14px;padding:20px;box-shadow:var(--depth-3);color:var(--ink);}
  .studio-omr-modal h3{margin:0 0 10px;font-family:var(--serif);font-size:19px;}
  .studio-omr-modal p{font-size:13.5px;line-height:1.5;color:var(--ink-muted);margin:0 0 12px;}
  .studio-omr-modal .studio-omr-file-row{display:flex;flex-direction:column;gap:10px;margin:14px 0;}
  .studio-omr-modal .studio-omr-hint{font-size:12px;color:var(--ink-muted);}
  .studio-omr-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 4px;text-align:center;}
  .studio-omr-spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--amber);animation:studio-omr-spin 0.9s linear infinite;}
  @keyframes studio-omr-spin{to{transform:rotate(360deg);}}
  .studio-omr-progress-track{width:100%;height:8px;border-radius:999px;background:var(--line);overflow:hidden;}
  .studio-omr-progress-fill{height:100%;background:var(--amber);transition:width .25s ease;}
  .studio-omr-warnings{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;}
  .studio-omr-warnings li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.35);border-radius:8px;padding:8px 10px;color:var(--ink);}.studio-omr-zones{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}.studio-omr-zone{display:flex;gap:12px;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid rgba(212,175,55,.32);background:rgba(212,175,55,.07)}.studio-omr-zone small{display:block;color:var(--ink-muted);margin-top:2px}.studio-omr-zone>div>div{font-size:12px;color:var(--ink-muted);margin-top:4px}
  .studio-omr-error-box{font-size:13.5px;line-height:1.5;background:rgba(214,72,75,.12);border:1px solid var(--bad);border-radius:8px;padding:10px 12px;margin:12px 0;color:var(--ink);}
  .studio-omr-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap;}
  @media(max-width:640px){
    .studio-omr-backdrop{align-items:flex-end;padding:0;}
    .studio-omr-modal{width:100%;max-width:none;max-height:92dvh;border-radius:16px 16px 0 0;padding:16px max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}
    .studio-omr-modal h3{font-size:18px;}
    .studio-omr-file-row .primary-btn,.studio-omr-actions button{min-height:44px;}
    .studio-omr-actions{position:sticky;bottom:0;background:var(--surface-2,#151b30);padding-top:10px;margin-top:12px;}
    .studio-omr-actions button{flex:1 1 140px;}
  }
  .studio-empty-note{color:var(--ink-muted);font-size:14px;margin-top:6px;}
  .studio-credits-list{display:flex;flex-direction:column;gap:14px;margin-top:16px;}
  .studio-credit-row{border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
  .studio-credit-row .scr-name{font-weight:600;margin-bottom:2px;}
  .studio-credit-row .scr-license{font-size:12px;color:var(--accent);margin-bottom:6px;}
  .studio-credit-row .scr-attribution{font-size:13px;color:var(--ink-muted);line-height:1.5;}
  .studio-input-mode-label{font-size:12px;color:var(--ink-muted);margin:14px 0 6px;font-weight:600;letter-spacing:.02em;}
  .studio-note-palette{margin:6px 0 16px;}
  .studio-palette-octaves{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-bottom:10px;}
  .studio-palette-oct-btn{flex:0 0 auto;min-width:52px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:600;}
  .studio-palette-oct-btn.active{background:var(--amber);color:var(--on-accent);border-color:var(--amber);}
  .studio-palette-notes{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px;}
  .studio-palette-note-btn{flex:0 0 auto;min-width:56px;min-height:52px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:600;padding:6px 8px;}
  .studio-palette-note-btn:active,.studio-palette-note-btn.pressed{background:var(--amber);color:var(--on-accent);border-color:var(--amber);}
  .studio-palette-note-pair{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;}
  .studio-palette-note-pair .studio-palette-note-btn{min-width:64px;min-height:24px;font-size:13px;padding:2px 8px;}
  .studio-chord-panel{margin:6px 0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
  .studio-chord-status{font-size:13px;color:var(--ink-muted);margin-bottom:8px;}
  .studio-chord-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
  .studio-chord-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:4px 6px 4px 12px;font-size:13px;}
  .studio-chord-chip button{background:transparent;border:none;color:var(--ink-muted);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;}
  .studio-chord-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .studio-staff-svg .studio-chord-preview{pointer-events:none;}
  .studio-palette-note-btn.studio-out-of-range,.studio-piano-white.studio-out-of-range,.studio-piano-black.studio-out-of-range{opacity:.42;}
  .studio-drum-palette{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px;}
  .studio-drum-btn{flex:0 0 auto;min-width:104px;min-height:52px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:14px;font-weight:600;padding:6px 10px;}
  .studio-drum-btn:active,.studio-drum-btn.pressed{background:var(--amber);color:var(--on-accent);border-color:var(--amber);}
  .studio-instrument-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:13px;}
  .studio-instrument-bar .sib-item{display:flex;align-items:center;gap:6px;}
  .studio-instrument-bar label{color:var(--ink-muted);font-weight:600;}
  .studio-instrument-bar select{font-size:13px;padding:4px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);}
  .studio-instrument-bar .sib-note{color:var(--ink-muted);font-size:12px;}
  .studio-preview-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);border-radius:16px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;}
  .studio-preview-btn:active{background:var(--amber);color:var(--on-accent);}
  .studio-instrument-picker{display:flex;flex-direction:column;gap:14px;margin:10px 0 6px;}
  .studio-instrument-family{display:flex;flex-direction:column;gap:6px;}
  .studio-instrument-family-title{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--ink-muted);text-transform:uppercase;}
  .studio-instrument-grid{display:flex;flex-wrap:wrap;gap:8px;}
  .studio-instrument-card{flex:0 0 auto;min-width:132px;display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface-2);cursor:pointer;}
  .studio-instrument-card.active{border-color:var(--amber);background:rgba(230,168,64,.16);}
  .studio-instrument-card .sic-icon{font-size:22px;}
  .studio-instrument-card .sic-name{font-size:13px;font-weight:600;text-align:center;}
  .studio-instrument-card .sic-preview{font-size:11px;color:var(--ink-muted);border:none;background:transparent;cursor:pointer;padding:2px 6px;}
  @media(max-width:760px){.studio-tool-layout{grid-template-columns:minmax(0,1fr)}.studio-category-rail{position:static;display:flex;overflow-x:auto;order:-1}.studio-category-rail button{min-width:max-content;min-height:44px}.studio-form{grid-template-columns:1fr;}.studio-toolbar .studio-group{border-right:none;border-bottom:1px solid var(--line);padding:6px 0;width:100%;}.studio-editor-head{flex-direction:column;align-items:stretch;}.studio-palette-note-btn{min-width:60px;min-height:56px;font-size:16px;}.studio-palette-note-pair .studio-palette-note-btn{min-width:68px;}.studio-btn,.studio-context-bar button{min-width:44px;min-height:44px}.studio-properties{align-items:stretch}.studio-properties select{min-height:44px}}
  @media print{body *{visibility:hidden!important}.studio-print-root,.studio-print-root *{visibility:visible!important}.studio-print-root{position:absolute;inset:0;background:white}.studio-score-v2{min-width:0;width:100%}.studio-stage{border:0;padding:0;background:white;overflow:visible}}

  /* Studio UX V3 — simpler, contextual editor shell. */
  .studio-tool-layout{display:block;}
  .studio-category-rail{display:none!important;}
  .studio-main-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 8px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
  .studio-main-tabs button{flex:0 0 auto;border:0;background:transparent;color:var(--ink-muted);padding:10px 14px;border-radius:8px;font-weight:700;cursor:pointer;min-height:42px;}
  .studio-main-tabs button.active{background:var(--amber);color:var(--on-accent);}
  .studio-subtabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;padding-bottom:2px;}
  .studio-subtabs button{flex:0 0 auto;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:7px 11px;border-radius:999px;font-size:12px;font-weight:650;cursor:pointer;min-height:38px;}
  .studio-subtabs button.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset;background:rgba(230,168,64,.12);}
  .studio-inspector-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:10px;margin:10px 0;}
  .studio-inspector-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px;min-width:0;}
  .studio-inspector-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-weight:800;}
  .studio-inspector-help{font-size:12px;color:var(--ink-muted);line-height:1.45;margin-bottom:10px;}
  .studio-inspector-fields{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:8px;align-items:end;}
  .studio-inspector-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--ink-muted);}
  .studio-inspector-fields input,.studio-inspector-fields select{width:100%;min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);padding:6px 8px;font-size:13px;}
  .studio-inspector-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .studio-inspector-wide{grid-column:1/-1;}
  .studio-context-bar{border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--surface);}
  .studio-toolbar{position:sticky;top:6px;z-index:20;background:color-mix(in srgb,var(--bg, #fff) 88%, transparent);backdrop-filter:blur(10px);border-radius:12px;padding:8px;box-shadow:0 3px 16px rgba(0,0,0,.08);}
  .studio-toolbar .studio-group{gap:4px;}
  .studio-toolbar .studio-btn{min-width:38px;min-height:38px;}
  .studio-voice-bar{margin:8px 0;}
  .studio-stage{border-radius:12px;}
  .studio-advanced-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .studio-advanced-row select,.studio-advanced-row input{min-height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);padding:5px 8px;}
  .studio-section-label{font-weight:800;font-size:12px;color:var(--ink);margin-right:3px;}
  .studio-tool-divider{width:1px;height:28px;background:var(--line);margin:0 4px;}
  .studio-tablet-audio-badge{font-size:11px;color:var(--ink-muted);padding:4px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);}
  .studio-advanced-details{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.studio-advanced-details summary{cursor:pointer;font-weight:800;font-size:12px;color:var(--ink);padding:7px 0;list-style:none}.studio-advanced-details summary::-webkit-details-marker{display:none}.studio-advanced-details summary::before{content:'＋';display:inline-block;width:20px;color:var(--amber)}.studio-advanced-details[open] summary::before{content:'−'}.studio-advanced-details .studio-inspector-fields{margin-top:8px}.studio-advanced-details input[type=checkbox]{width:22px;min-height:22px;align-self:flex-start}.studio-inspector-fields input[type=range]{padding:0}
  @media(max-width:900px){.studio-inspector-grid{grid-template-columns:1fr}.studio-inspector-fields{grid-template-columns:repeat(2,minmax(0,1fr));}.studio-toolbar{top:0}.studio-main-tabs{margin-top:8px}}
  @media(max-width:600px){
    .studio-main-tabs button{padding:9px 11px;min-height:44px}.studio-subtabs button{min-height:42px}.studio-inspector-fields{grid-template-columns:1fr 1fr}.studio-inspector-card{padding:10px}.studio-editor-head{gap:8px}.studio-toolbar{overflow-x:auto;display:flex;flex-wrap:nowrap}.studio-toolbar .studio-group{flex:0 0 auto;width:auto!important;border:0!important;padding:0!important}.studio-voice-bar{overflow-x:auto;flex-wrap:nowrap}.studio-voice-bar>*{flex:0 0 auto}.studio-context-bar{overflow-x:auto}.studio-context-bar>span{min-width:max-content}.studio-stage{margin-top:8px}.studio-inspector-grid{position:relative}.studio-inspector-actions button{min-height:44px}
  }