/* Shared visual language for the lobby, live practice and song practice. */
:root {
  --bg:#101513;--surface:#19201d;--surface2:#222c26;--line:#344139;
  --text:#f2f1e8;--text2:#c3ccc4;--muted:#a0afa4;--dim:#87978c;
  --accent:#edca83;--ok:#80bded;--okbg:#192b34;--okline:#345060;
  --panel:var(--surface);--panel-2:#141c17;--line-2:#46584a;
  --faint:var(--dim);--accent-ink:var(--bg);--accent-soft:#2c3020;
  --teal:var(--ok);--danger:#f0a17e;--radius:18px;
  --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  color-scheme:dark;
  --fret-nut:#c9cbd0;--fret-line:#5a5e66;--fret-label:#a3a6ad;
  --fret-dot:#edca83;--fret-dot-ink:#101513;--fret-board:#2a2420;--status-ink:#121316;
  --wave-loop:rgba(237,202,131,.14);--wave-line:#344139;--wave-past:#edca83;--wave-next:#6a8885;--wave-head:#eceae4;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--text);font-family:var(--sans);line-height:1.65;background:radial-gradient(ellipse at 75% 0%,#30433255,transparent 48%),var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.studio-shell{width:min(1180px,100%);margin:0 auto;padding:0 32px 24px}
.studio-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px;border-bottom:1px solid var(--line);margin:0 0 28px;padding:0;background:transparent}
.studio-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;font:700 12px var(--mono);letter-spacing:3px}
.studio-brand img{display:block;width:38px;height:38px;border-radius:10px}
.studio-links{display:flex;align-items:center;gap:28px;align-self:stretch}
.studio-links>a{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;font-size:13px;color:var(--muted);white-space:nowrap}
.studio-links>a:hover,.studio-links>a[aria-current=page]{color:var(--accent)}
.studio-links>a[aria-current=page]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent);border-radius:3px 3px 0 0}
.studio-theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:center;min-height:44px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text2);font-size:12px;cursor:pointer;white-space:nowrap}
.studio-theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.studio-theme-toggle svg{width:17px;height:17px;flex-shrink:0}
.studio-theme-toggle .theme-moon{display:none}
html[data-theme=light] .studio-theme-toggle .theme-sun{display:none}
html[data-theme=light] .studio-theme-toggle .theme-moon{display:block}
.studio-main{display:flex;flex-direction:column;gap:24px}
.lobby-intro{position:relative;isolation:isolate;padding:25px 28px 30px;overflow:hidden}
.lobby-intro:before{content:'';position:absolute;inset:-40px -55px -30px 32%;z-index:-1;background:url('studio-strings.svg') right center/contain no-repeat;opacity:.7;pointer-events:none}
.studio-eyebrow{font:11px var(--mono);letter-spacing:3px;color:var(--accent);margin:0 0 15px}
.lobby-intro h1{font-size:clamp(30px,4.5vw,54px);line-height:1.25;letter-spacing:1px;margin:0 0 18px;font-weight:900}
.lobby-intro p:last-child{color:var(--text2);margin:0;font-size:16px;letter-spacing:2px}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mode-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0;padding:30px;border:1px solid #506354;border-radius:22px;background:linear-gradient(145deg,#25342b99,#141d17 80%);box-shadow:0 16px 50px #0002}
.mode-card.mode-featured{border-color:#b49a65;background:linear-gradient(140deg,#2d3b2f99,#141d17 78%)}
.mode-card h2{font-size:clamp(23px,2.6vw,30px);margin:0 0 8px;line-height:1.4;letter-spacing:.3px}
.mode-card>.studio-eyebrow{font-size:10px;letter-spacing:2.5px;margin-bottom:12px}
.mode-copy{font-size:14px;color:var(--text2);margin:0 0 22px}
.chord-preview{display:flex;align-items:center;gap:24px;min-height:170px;margin-bottom:18px}
.sample-diagram{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#10171380;border:1px solid #455548;border-radius:14px;padding:10px 16px;flex:0 0 128px}
.sample-diagram b{font:700 26px var(--mono);line-height:1.3;margin-bottom:3px}
.sample-diagram svg{height:128px;width:92px;display:block}
.sample-notes{flex:1;min-width:0}.sample-notes p{font-size:12px;color:var(--muted);margin:16px 0 0}
.chord-pills{display:flex;align-items:center;gap:7px;font:700 16px var(--mono)}
.chord-pills span{display:flex;align-items:center;justify-content:center;min-width:39px;height:43px;padding:0 9px;border:1px solid var(--line);background:#ffffff04;border-radius:10px;color:var(--text2)}
.chord-pills span:first-child{color:var(--accent);border-color:#b49a65;background:#edca830c}.chord-pills i{font-style:normal;color:var(--dim);font-size:11px}
.mode-features{font-size:12px;color:var(--muted);margin:auto 0 18px;letter-spacing:.2px}
.studio-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:48px;padding:10px 22px;border:1px solid #9e895d;border-radius:11px;background:transparent;color:var(--accent);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.studio-button:hover{background:#edca8310;transform:translateY(-2px)}
.studio-button.primary{color:#172017;background:linear-gradient(115deg,#f2d999,#e5bb68);border-color:#e9c681;box-shadow:0 4px 20px #edca830d}
.studio-button.primary:hover{box-shadow:0 5px 24px #edca8322}
.song-preview{display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:170px;margin-bottom:18px}
.sample-wave{width:100%;height:94px;display:block;border-radius:12px;background:#0e171340}
.sample-measures{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font:700 15px var(--mono);text-align:center}
.sample-measures span{padding:8px;border:1px solid var(--line);border-radius:8px;background:#ffffff03}.sample-measures .active{border-color:#b49a65;color:var(--accent);background:#edca8310}
.studio-utilities{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;background:linear-gradient(110deg,#25342b66,#19201d88);padding:20px 24px;gap:24px}
.utility-item{display:flex;align-items:center;gap:18px;min-width:0;text-decoration:none;border-radius:8px}
.utility-item>svg{width:32px;height:38px;flex-shrink:0;color:var(--text2)}
.utility-copy{flex:1;min-width:0}.utility-copy b{display:block;font-size:14px}.utility-copy small{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.utility-arrow{font-size:13px;color:var(--accent);white-space:nowrap}.recent-item{border-left:1px solid var(--line);padding-left:24px}.recent-item .utility-arrow{color:var(--muted)}
.studio-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #34413980;padding-top:20px;margin-top:26px;color:var(--dim);font-size:10px;letter-spacing:1px}
.studio-footer span:first-child{font-family:var(--mono)}
.studio-install{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:20px;display:flex;align-items:center;gap:20px}
.studio-install h2{margin:0 0 3px;font-size:15px}.studio-install p{margin:0;color:var(--muted);font-size:12px}.studio-install>div{flex:1}.studio-install .studio-button{white-space:nowrap;min-height:44px}
.studio-notice{position:fixed;z-index:100;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--surface2);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 18px;font-size:13px;max-width:min(440px,92vw);width:max-content;box-shadow:0 10px 40px #0007}
.studio-skip{position:absolute;left:16px;top:-80px;z-index:101;background:var(--accent);color:var(--bg);padding:10px 20px;border-radius:8px}.studio-skip:focus{top:12px}
/* Keep the original audio and practice controls; share the studio's chrome. */
.practice-app #app{padding-top:0}.practice-app .studio-nav{margin-bottom:28px}
.practice-app .home-intro h1{font-size:36px;letter-spacing:0}.practice-app .home-intro{margin:4px 0 10px}
.practice-app .hero-practice{min-height:246px;background:linear-gradient(130deg,#2d3d30,#19231c);border-color:#9e895d}
.practice-app .card,.practice-app .navlink,.practice-app .level{box-shadow:0 8px 28px #0001}
.practice-app .settings-column{scroll-margin-top:24px}.practice-app .foot{letter-spacing:.5px;gap:12px;flex-wrap:wrap}
.practice-app .top{border-bottom:1px solid #34413980;padding-bottom:16px}
.practice-app .target{border-color:#657052;background:linear-gradient(135deg,#2c3b2e,#19201d)}
.song-app .wrap{max-width:1180px;padding:0 32px 32px}.song-app .studio-shell{padding-bottom:0}
.song-app .upload-grid{padding-top:0;gap:16px 24px}
.song-app .upload-left h1{font-size:clamp(30px,3.6vw,42px);line-height:1.35;margin:0;letter-spacing:0}
.song-app .upload-left>p{font-size:14px;line-height:1.8}
.song-app .drop{min-height:300px;border:1px dashed #81906b;background:linear-gradient(135deg,#25352a,#19201d);border-radius:20px}
.song-app .drop svg{color:var(--accent)}.song-app .drop .drop-main{font-size:16px}.song-app .drop:hover{background:#26382c;border-color:var(--accent)}
.song-app .card{border-radius:18px;background:linear-gradient(140deg,#1f2b22,var(--surface) 75%);border-color:var(--line);box-shadow:0 8px 28px #0001}
.song-app .app-header{gap:20px;margin-bottom:2px}.song-app .logo{background:#edca8310;color:var(--accent);border:1px solid #edca8328}
.song-app .play-btn,.song-app .btn.primary{background:linear-gradient(115deg,#f2d999,#e5bb68);color:var(--bg)}
.song-app .transport{background:#17211bf5;border-color:#536047;backdrop-filter:blur(16px)}
.song-app .song-name{font-size:22px}.song-app .now-chord{color:var(--accent)}
.song-app .studio-footer{width:min(1116px,calc(100% - 64px));margin:12px auto 0;padding-bottom:24px}
.song-app .studio-install{width:min(1116px,calc(100% - 64px));margin:16px auto}
.song-app .analysis-intro{margin:0 0 14px;color:var(--accent);font:10px var(--mono);letter-spacing:3px}
.song-app .dialog{background:var(--surface);color:var(--text);border-color:var(--line)}
.song-app .row>label{white-space:nowrap;flex-shrink:0}
.song-app #speed-presets .chip{padding:0 9px;font-size:12px}
@media(min-width:1100px){.mode-card{min-height:395px}.song-app .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.song-app .cards>.card{padding:16px;gap:12px}}
@media(max-width:1000px){.mode-card{padding:24px}.chord-preview{gap:15px}.sample-diagram{flex-basis:108px;padding:8px 12px}.chord-pills{gap:4px;font-size:14px}.chord-pills span{min-width:32px;padding:0 6px}.chord-pills i{font-size:10px}.studio-links{gap:22px}}
@media(max-width:760px){
  .studio-shell{padding:0 20px 24px}.studio-nav{gap:16px;min-height:78px;flex-wrap:wrap;margin-bottom:22px;padding:16px 0 0}.studio-brand{font-size:11px;letter-spacing:2px}.studio-brand img{width:32px;height:32px}
  .studio-links{width:100%;gap:0;justify-content:space-between;min-height:44px}.studio-links>a{font-size:12px;padding:0 8px}.studio-links>a:first-child{padding-left:0}
  .lobby-intro{padding:12px 0 22px}.lobby-intro:before{inset:-10px -50px 0 10%;opacity:.4}.lobby-intro h1{font-size:34px;letter-spacing:0;margin-bottom:14px}.lobby-intro p:last-child{font-size:13px;letter-spacing:1px}.studio-eyebrow{font-size:9px;letter-spacing:2px}
  .studio-main{gap:18px}.mode-grid{gap:16px;grid-template-columns:1fr}.mode-card{padding:24px}.mode-card h2{font-size:27px}.mode-copy{font-size:13px;margin-bottom:14px}.chord-preview,.song-preview{min-height:148px;margin-bottom:14px}.sample-diagram{flex-basis:112px}.sample-diagram svg{height:112px}.chord-pills{gap:6px}.chord-pills span{min-width:34px}.sample-notes p{font-size:11px}.mode-features{font-size:11px}.studio-button{min-height:46px}.sample-wave{height:84px}
  .studio-utilities{grid-template-columns:1fr;padding:20px;gap:18px}.recent-item{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.utility-arrow{font-size:11px}.utility-item{gap:14px}.utility-item>svg{width:27px}.utility-copy small{font-size:10px}
  .studio-footer{font-size:9px;letter-spacing:0;flex-wrap:wrap;margin-top:20px}.studio-install{align-items:flex-start;flex-direction:column;gap:12px}
  .practice-app .studio-nav{margin-bottom:22px}.practice-app .home-intro h1{font-size:30px}.practice-app .home-intro{gap:8px}.practice-app .intro-copy{max-width:200px}.practice-app .mic-action{margin-top:24px}.practice-app .brandnote{display:none}
  .song-app .wrap{padding:0 20px 24px}.song-app .upload-grid{gap:16px}.song-app .drop{min-height:235px;padding:20px}.song-app .drop .drop-main{font-size:14px}.song-app .upload-left h1{font-size:30px}.song-app .upload-left>p{font-size:13px}.song-app .song-name{font-size:18px}.song-app .studio-footer,.song-app .studio-install{width:calc(100% - 40px)}
}
@media(max-width:360px){.studio-shell{padding-left:16px;padding-right:16px}.lobby-intro h1{font-size:29px}.mode-card{padding:20px}.mode-card h2{font-size:24px}.chord-preview{gap:12px}.sample-diagram{flex-basis:90px;padding:8px}.chord-pills{gap:4px;font-size:12px}.chord-pills span{min-width:29px;padding:0 5px}.chord-pills i{font-size:9px}.mode-copy{font-size:12px}.practice-app .home-intro{flex-wrap:wrap}.practice-app .mic-action{margin-top:0}.song-app .wrap{padding-left:16px;padding-right:16px}}
@media(orientation:landscape) and (max-height:520px){.practice-app:not([data-screen=home]) .studio-nav{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.practice-app>[data-install]{width:min(1108px,calc(100% - 32px));margin:16px auto 24px}
@media(max-width:450px),(min-width:761px) and (max-width:1000px){
  .chord-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:160px}
  .chord-pills i{display:none}.chord-pills span{min-width:0;height:35px;padding:0 9px}
}

/* Warm ivory, sage and bronze: the same studio in daylight. */
html[data-theme=light]{
  color-scheme:light;
  --bg:#f5f3eb;--surface:#fffef9;--surface2:#e9eee5;--line:#c7d0bf;
  --text:#24372b;--text2:#465b4b;--muted:#5d705f;--dim:#6a796b;
  --accent:#80551b;--ok:#22658a;--okbg:#e6f0f6;--okline:#a8c7da;
  --bad:#a54d20;--badbg:#fff0e4;--badline:#d8ac8c;--danger:#a3462a;
  --panel-2:#eef1e8;--line-2:#b2c0ac;--accent-ink:#1c2e20;--accent-soft:#f2e8cf;
  --fret-nut:#405847;--fret-line:#82937c;--fret-label:#546b57;
  --fret-dot:#9b691e;--fret-dot-ink:#fffef9;--fret-board:#e9e3d2;--status-ink:#fffef9;
  --wave-loop:rgba(155,105,30,.12);--wave-line:#c7d0bf;--wave-past:#936321;--wave-next:#7c988d;--wave-head:#334d3b;
}
html[data-theme=light] body{background:radial-gradient(ellipse at 75% 0%,#e0e9d6aa,transparent 55%),var(--bg)}
html[data-theme=light] .lobby-intro:before{filter:brightness(.6);opacity:.5}
html[data-theme=light] .mode-card{background:linear-gradient(145deg,#e9efdf,var(--surface) 82%);border-color:#abbc9e;box-shadow:0 12px 36px #374c2910}
html[data-theme=light] .mode-card.mode-featured{background:linear-gradient(140deg,#edf0df,var(--surface) 82%);border-color:#b29a65}
html[data-theme=light] .sample-diagram{background:#ffffff80;border-color:var(--line)}
html[data-theme=light] .sample-wave{background:#e4ebe140}
html[data-theme=light] .sample-measures span,html[data-theme=light] .chord-pills span{background:#ffffff60}
html[data-theme=light] .sample-measures .active,html[data-theme=light] .chord-pills span:first-child{background:var(--accent-soft);border-color:#b29a65}
html[data-theme=light] .studio-button:hover{background:#80551b0a}
html[data-theme=light] .studio-button.primary{color:var(--accent-ink);background:linear-gradient(115deg,#f0d796,#e4c071)}
html[data-theme=light] .studio-utilities{background:linear-gradient(110deg,#e5ecdd,var(--surface));box-shadow:0 6px 22px #374c2908}
html[data-theme=light] .studio-footer{border-color:var(--line)}
html[data-theme=light] .practice-app .hero-practice,html[data-theme=light] .practice-app .target{background:linear-gradient(135deg,#e1ead6,var(--surface));border-color:#a9b690}
html[data-theme=light] .practice-app .hero-practice .tx>span{color:var(--text2)}
html[data-theme=light] .practice-app .hero-practice .hero-kicker,html[data-theme=light] .practice-app .hero-cta{color:var(--accent)}
html[data-theme=light] .practice-app .chord-art [stroke]{stroke:var(--accent)}
html[data-theme=light] .practice-app .chord-art [fill]{fill:var(--accent)}
html[data-theme=light] .practice-app .seg{background:#e9eee5;border-color:var(--line)}
html[data-theme=light] .practice-app .navlink:hover,html[data-theme=light] .practice-app .level:hover{background:#e4ecdd;border-color:#97ac8f}
html[data-theme=light] .practice-app .top{background:#f5f3ebed;border-color:var(--line)}
html[data-theme=light] .practice-app .micoff{background:var(--badbg);box-shadow:0 5px 20px #374c2910}
html[data-theme=light] .practice-app .chip.ok,html[data-theme=light] .practice-app .tag{background:#e1edf5}
html[data-theme=light] .practice-app .chip.bad{background:#f6e5d7}
html[data-theme=light] .practice-app .tag.warn,html[data-theme=light] .practice-app .entry{background:#f3e9d3;border-color:#ccb98c}
html[data-theme=light] .practice-app .navlink .ic{background:var(--surface2)!important}
html[data-theme=light] .practice-app .bars i:not(.t){background:#ccd5c7}
html[data-theme=light] .practice-app .steps li.done .v,html[data-theme=light] .practice-app .isteps li.done .v{color:var(--ok)}
html[data-theme=light] .practice-app .ana-t tr.bad td{color:var(--bad)}
html[data-theme=light] .practice-app .fb .dot svg{stroke:var(--status-ink)}
html[data-theme=light] .song-app .card{background:linear-gradient(140deg,#edf1e5,var(--surface) 75%);box-shadow:0 7px 24px #374c2908}
html[data-theme=light] .song-app .drop{background:linear-gradient(135deg,#e6eddd,var(--surface));border-color:#9eaf8e}
html[data-theme=light] .song-app .drop:hover{background:#e3ecd8;border-color:var(--accent)}
html[data-theme=light] .song-app .transport{background:#fbfcf5f5;border-color:#b1bc9c}
html[data-theme=light] .song-app .play-btn,html[data-theme=light] .song-app .btn.primary{color:var(--accent-ink)}
html[data-theme=light] .song-app .chip[aria-pressed=true],html[data-theme=light] .song-app .chip.on,html[data-theme=light] .song-app .seg.on,html[data-theme=light] .song-app .beat-dot.lit{color:var(--surface)}
html[data-theme=light] .song-app .switch span{background:var(--surface)}
html[data-theme=light] .song-app .logo{background:#f1e7ce;border-color:#d7c69d}
html[data-theme=light] .song-app .tl-seg{background:#e4ebdf}
html[data-theme=light] .song-app .tl-seg.active{background:var(--accent);color:var(--surface)}
@media(max-width:760px){.studio-theme-toggle{min-width:44px;padding:0 8px;gap:4px;font-size:11px}.studio-theme-toggle svg{width:15px;height:15px}}
@media(max-width:360px){.studio-theme-toggle [data-theme-label]{display:none}}

/* 大廳三張模式卡：指板找根音 → 和弦基本功 → 歌曲陪練 */
.fb-preview{display:flex;flex-direction:column;justify-content:center;gap:12px;min-height:170px;margin-bottom:18px}
.fb-mini{width:100%;height:auto;max-height:130px}
.fb-ask{display:flex;flex-direction:column;gap:4px}.fb-q{font-size:15px;color:var(--text)}.fb-q b{color:var(--accent);font-size:18px}.fb-hint{font-size:12px;color:var(--text2)}
@media(min-width:1001px){.mode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-card{padding:26px}.mode-card h2{font-size:clamp(22px,2vw,27px)}
.chord-preview{gap:14px}.chord-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:150px}.chord-pills i{display:none}.chord-pills span{min-width:0;height:38px;padding:0 8px}}
@media(min-width:761px) and (max-width:1000px){.mode-grid>.mode-card:first-child{grid-column:1/-1}.mode-grid>.mode-card:first-child .fb-preview{flex-direction:row;align-items:center;gap:24px;min-height:0}.mode-grid>.mode-card:first-child .fb-mini{flex:0 0 55%;max-width:360px}}