/* REXFACTORY studio appearance. Audio, grading and persistence stay in their existing modules. */
:root,html[data-theme=dark]{
 --bg:#101d19;--surface:#192a23;--surface2:#24382d;--line:#364a3e;--line-2:#506549;
 --text:#eaece0;--text2:#c9d3c6;--muted:#a5b6aa;--dim:#9baa9b;--accent:#d0b17a;--accent-soft:#303c28;
 --panel:var(--surface);--panel-2:#14271e;--accent-ink:#223d2b;--faint:var(--dim);
 --sans:'Noto Sans TC','Noto Sans CJK TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
 --mono:'Space Mono','Noto Sans Mono CJK TC',ui-monospace,monospace;
 --ink:var(--text);--gold:var(--accent);--paper:var(--surface);--sage:var(--surface2);--green:#203f35;--on-green:#f4f1e4;
 --fret-nut:#b6c3ae;--fret-line:#49604a;--fret-label:#bdc8b5;--fret-board:#15291d;--fret-dot:#d4ba82;--fret-dot-ink:#203b2b;
 --wave-line:#40533e;--wave-past:#d0b17a;--wave-next:#77937c;--wave-head:#e6dbc0;
}
html[data-theme=light]{
 --bg:#f4f2ec;--surface:#fcfbf7;--surface2:#e7ebe2;--line:#d9ddd3;--line-2:#c4cbb8;
 --text:#213c34;--text2:#435749;--muted:#66746c;--dim:#69796b;--accent:#94713a;--accent-soft:#efe7d5;
 --panel-2:#eef0e7;--fret-nut:#617160;--fret-line:#b5bda9;--fret-label:#5e705d;--fret-board:#eef0e7;--fret-dot:#294b35;--fret-dot-ink:#fffdf3;
 --wave-line:#d3d8c7;--wave-past:#99723a;--wave-next:#92a28b;--wave-head:#334d3b;
}
body.refined{position:relative;isolation:isolate;min-height:100vh;font-family:var(--sans);background:#eae3d2;-webkit-font-smoothing:antialiased}
body.refined::before,body.refined::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-2}
body.refined::before{background:url('studio-light.webp') center top/cover no-repeat}
body.refined::after{z-index:-1;background:linear-gradient(180deg,#f8f5e280 0%,transparent 20% 47%,#f4f1e5ad 83%,#f4f1e5df 100%)}
html[data-theme=dark] body.refined{background:#12251a}
html[data-theme=dark] body.refined::before{filter:brightness(.5) saturate(.72)}
html[data-theme=dark] body.refined::after{background:linear-gradient(125deg,#0c281d66,transparent 58%,#0b1b14a6),linear-gradient(180deg,#0d241a1a,transparent 35%,#10251be6 100%)}
/* 底圖調亮後，替首頁左上的小字補一層柔和暗色，維持文字對比 */
@media(min-width:701px){html[data-theme=dark] body.refined.lobby-app::after{background:radial-gradient(ellipse 46% 42% at 12% 26%,#0a1a13c4,#0a1a1380 55%,transparent 100%),linear-gradient(125deg,#0c281d66,transparent 58%,#0b1b14a6),linear-gradient(180deg,#0d241a1a,transparent 35%,#10251be6 100%)}}
body.refined :is(button,input,select,textarea){font-family:var(--sans)}
body.refined :is(h1,h2,h3){font-family:var(--sans);font-weight:650}
.refined .studio-shell,.refined.practice-app #app{max-width:1304px;padding:0 52px 26px;margin:auto;width:100%}
.refined .studio-nav{min-height:104px;margin:0 -22px 30px;padding:0 22px;border-radius:0 0 14px 14px;background:#faf8edcc;border-bottom-color:#d9d4c6;backdrop-filter:blur(16px)}
html[data-theme=dark] .refined .studio-nav{background:#14291fd9;border-color:#52604666}
.refined .studio-brand{gap:13px;font-size:13px;letter-spacing:2.1px;color:var(--text)}
.studio-mark{height:42px;width:34px;color:var(--accent);transform:rotate(-8deg)}.studio-mark svg{width:100%;height:100%}
.studio-brand>span:last-child:after{content:'THE GUITAR STUDIO';display:block;font:8px var(--mono);color:var(--muted);letter-spacing:2.1px;margin-top:7px}
.refined .studio-links{gap:31px}.refined .studio-links>a{font-size:12px;color:var(--muted)}.refined .studio-links>a[aria-current=page]{color:var(--text)}
.refined .studio-links>a[aria-current=page]:after{bottom:25px;left:35%;right:35%;height:2px}
.refined .studio-theme-toggle{border-radius:50%;width:38px;min-height:38px;padding:0;flex-shrink:0;background:transparent}.studio-theme-toggle [data-theme-label]{display:none}
.refined .studio-footer{border-color:var(--line);color:var(--muted);font-size:10px;padding:23px 0;margin-top:25px}
.refined .studio-main{gap:0}.hero{min-height:327px;padding:29px 0 48px;display:block}.hero>div{max-width:770px}
.eyebrow{font:10px var(--mono);letter-spacing:2.6px;color:var(--accent);margin:0 0 14px}
.hero h1{font-size:57px;line-height:1.55;font-weight:600;letter-spacing:1px;margin:0;text-shadow:0 2px 14px #fff9dd7a}.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:18px 0 24px;font-size:13px;letter-spacing:1.2px;color:var(--text2)}.hero-foot{display:flex;align-items:center;gap:17px;font-size:11px;color:var(--text2)}.hero-foot:before{content:'';width:35px;height:1px;background:var(--accent)}
html[data-theme=dark] .hero h1{text-shadow:0 2px 16px #081b1380}
.section-top{display:flex;justify-content:space-between;align-items:center;margin:8px 0 20px}.section-top h2{font-size:15px;letter-spacing:1px;margin:0}.section-top>span{font:9px var(--mono);letter-spacing:2px;color:var(--muted)}
.lobby-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.lobby-cards .mode-card{text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;min-width:0;min-height:0}
.lobby-cards .mode-card>p{margin:0;color:var(--muted)}.card-index{display:flex;justify-content:space-between;color:var(--muted)}.card-index>span:first-child{color:var(--accent)}
.card-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-weight:600}.round-arrow{display:grid;place-items:center}
.lobby-utilities{display:grid;grid-template-columns:1fr 1fr;gap:18px}.utility{display:flex;align-items:center;gap:16px;text-decoration:none;min-width:0}.utility b{font-size:12px;font-weight:500}.utility p{font-size:11px;color:var(--muted);margin:4px 0 0}.utility .arrow{margin-left:auto;color:var(--accent)}
.refined .studio-button,.refined .btn{border-radius:9px;border-color:var(--card-edge);background:var(--card-fill);color:var(--text);box-shadow:var(--inset),0 2px 4px #1c331e08}
.refined .studio-button.primary,.refined .btn.primary{background:linear-gradient(135deg,#35563c,#203e2d);border-color:#516c4e;color:#f7f3e5;box-shadow:inset 0 1px 0 #d1dfb829,0 3px 6px #142e211c}
html[data-theme=dark] .refined .studio-button.primary,html[data-theme=dark] .refined .btn.primary{background:linear-gradient(135deg,#ebd5a5,#c8ad78);color:#233d2d;border-color:#d9c08a;box-shadow:inset 0 1px 0 #fff4d280,0 3px 6px #0002}
.refined .studio-button:disabled,.refined .btn:disabled{transform:none;opacity:.55}
.refined :focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* Fine edges, recessed illustrations and restrained brass details. */
:root{--card-edge:#d1cfbc;--card-rule:#dedccd;--card-fill:#faf9f2;--card-glow:#ffffffd6;--card-low:#f4f2e8;--well:#eeefe6;--well-line:#dcded0;--brass:#9c7e44;--brass-light:#e0c895;--inset:inset 0 1px 0 #ffffffc9,inset 0 -1px 0 #d8d3bc33}
html[data-theme=dark]{--card-edge:#4b5e48;--card-rule:#475a46;--card-fill:#1b3025;--card-glow:#99ac6826;--card-low:#14271e;--well:#13251b;--well-line:#3d523e;--brass:#dcc18b;--brass-light:#ddcba4;--inset:inset 0 1px 0 #d8dfaa16,inset 0 -1px 0 #050d0833}
body.refined .mode-card{padding:26px 26px 23px;border-radius:22px;border:1px solid var(--card-edge);background:radial-gradient(ellipse at 0% 0%,var(--card-glow),transparent 70%),linear-gradient(145deg,var(--card-fill),var(--card-low));box-shadow:var(--inset),0 3px 6px #28342305,0 20px 36px -12px #26351e29;transition:transform .25s,border-color .25s,box-shadow .25s;isolation:isolate}
body.refined .mode-card:before{content:'';pointer-events:none;position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--card-edge) 40%,transparent);border-radius:17px;z-index:-1;mask-image:linear-gradient(#000,transparent 65%)}
body.refined .mode-card:after{content:'';pointer-events:none;position:absolute;top:0;left:28px;right:28px;height:1px;background:linear-gradient(90deg,transparent,var(--brass-light),transparent);opacity:.8}
body.refined .mode-card:hover{transform:translateY(-5px);border-color:var(--brass);box-shadow:var(--inset),0 7px 13px #2834230a,0 24px 44px -12px #26351e3d}
.card-top{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:10px}
body.refined .card-index{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:8px;letter-spacing:1.8px}
body.refined .card-index>span:last-child{font:10px var(--sans);letter-spacing:1.6px;color:var(--muted)}
.card-emblem{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--card-edge);border-radius:12px;color:var(--brass);background:linear-gradient(135deg,#ffffff66,#ffffff00);box-shadow:var(--inset);transform:rotate(-5deg)}
.card-emblem svg{width:21px;height:21px;transform:rotate(5deg)}
body.refined .mode-card h2{font-size:25px;letter-spacing:.1px;margin:21px 0 9px;line-height:1.4}
body.refined .mode-card>p{font-size:11px;line-height:1.9;letter-spacing:.2px}
.card-display{height:167px;border:1px solid var(--well-line);border-radius:12px;margin:24px 0 19px;padding:13px 14px;background:radial-gradient(ellipse at 0% 0%,#ffffff26,transparent 75%),var(--well);box-shadow:inset 0 2px 7px #253a2910,0 1px 0 #ffffff60;color:var(--ink);overflow:hidden;position:relative}
.display-head,.display-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px}
.display-head{height:20px}.display-foot{font-size:8px}.display-foot>span:first-child{font:7px var(--mono);letter-spacing:1px}
.mini-status{font:12px var(--sans);display:flex;align-items:center;gap:6px;color:var(--gold)}
.mini-status i{width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%,transparent)}
.root-art{height:105px;padding:2px 0 7px}.root-art svg{width:100%;height:100%}
.mode-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin:0 0 21px;min-height:20px}
.mode-tags span{font-size:9px;color:var(--muted);padding:2px 7px;border:1px solid var(--card-rule);border-radius:4px;background:#ffffff0a}
body.refined .mode-card .card-link{padding-top:18px;border-color:var(--card-rule);font-size:12px;min-height:66px;margin-top:auto;letter-spacing:.6px}
.card-link small{display:block;font:9px var(--sans);letter-spacing:.5px;color:var(--muted);margin-top:5px}
body.refined .round-arrow{width:38px;height:38px;border-radius:12px;border-color:var(--card-edge);color:var(--brass);background:linear-gradient(135deg,#ffffff55,#ffffff00);box-shadow:var(--inset);flex-shrink:0;transition:background .2s,transform .2s}
.round-arrow svg{width:15px;height:15px}.mode-card:hover .round-arrow{transform:translate(2px,-2px)}
body.refined .mode-card.featured{--card-edge:#728369;--card-rule:#65765e;--card-fill:#2e503b;--card-glow:#a5b98430;--card-low:#183a2b;--well:#193626;--well-line:#53694d;--brass:#e2c999;--brass-light:#eed6a2;color:#f5f2e5;--ink:#ede9d8;--muted:#c7d0bd;--gold:#e1c691;background:radial-gradient(ellipse at 0% 0%,var(--card-glow),transparent 78%),linear-gradient(140deg,var(--card-fill),var(--card-low));border-color:var(--card-edge);box-shadow:inset 0 1px 0 #e5e8bf33,0 4px 8px #20321f0d,0 20px 40px -12px #152b2247}
body.refined .featured .card-emblem{background:linear-gradient(135deg,#dcc58414,transparent);box-shadow:inset 0 1px 0 #e5d6a52b}
body.refined .featured .card-display{box-shadow:inset 0 2px 9px #07160f52,0 1px 0 #c1ceac26}
body.refined .featured .round-arrow{background:linear-gradient(135deg,#f2e0b7,#c6a56c);border-color:#ebd29b;color:#254432;box-shadow:inset 0 1px 0 #fff2d2b0,0 3px 8px #0a1d172e}
.chord-display{display:grid;grid-template-columns:87px 1fr;gap:15px;align-items:center;padding:12px 14px;color:var(--brass)}
.diagram-inset{height:139px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--well-line);padding-right:14px}.diagram-inset svg{width:73px;height:126px}
.progression{min-width:0}.display-label{font:7px var(--mono);letter-spacing:1px;color:var(--muted);display:block;margin-bottom:12px;white-space:nowrap}
.progression-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.progression-grid b{border:1px solid var(--well-line);border-radius:6px;font:18px/1.7 var(--sans);text-align:center;background:#ffffff03}.progression-grid .current{color:#e9d3a2;border-color:#b8a575;background:linear-gradient(135deg,#d1b7791f,#d1b77908);box-shadow:inset 0 1px 0 #dccb9812}
.progression-note{font-size:8px;color:var(--muted);margin-top:12px;display:block;white-space:nowrap}.progression-note i{display:inline-block;height:3px;width:3px;background:var(--brass);border-radius:50%;margin-right:3px}
.song-display .display-head{font:7px var(--mono);letter-spacing:.3px}.mini-track{display:flex;gap:7px;align-items:center}.mini-track i{display:grid;place-items:center;font-style:normal;border:1px solid var(--well-line);border-radius:50%;height:20px;width:20px;font-size:7px;color:var(--gold)}
.song-display .mini-wave{width:100%;height:60px;color:var(--gold);margin:12px 0 11px}.mini-chords{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.mini-chords span{text-align:center;border:1px solid var(--well-line);border-radius:5px;font:13px/1.7 var(--sans)}.mini-chords .current{border-color:var(--brass);color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
body.refined .lobby-utilities{gap:18px;margin-top:22px;margin-bottom:34px}
body.refined .utility{border:1px solid var(--card-edge);border-radius:14px;padding:17px 20px;background:linear-gradient(125deg,var(--card-glow),transparent 75%),var(--card-fill);box-shadow:var(--inset),0 9px 20px #23331b0b;min-width:0;transition:transform .2s,border-color .2s}
.utility:hover{transform:translateY(-2px);border-color:var(--brass)!important}
body.refined .utility-icon{width:36px;height:36px;border:1px solid var(--card-rule);border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:var(--brass);background:var(--well)}
.utility-icon svg{width:22px;height:22px}.utility .arrow svg{width:14px;height:14px}.utility .arrow{align-self:center;flex-shrink:0}.utility>div{min-width:0}.utility p{overflow-wrap:anywhere}

/* Shared card materials on existing functional pages. */
.refined :is(.fret-settings,.fret-exercise,.timing-card,.studio-install),.refined.practice-app :is(.card:not(.target),.navlink,.level),.refined.song-app :is(.card,.drop){border:1px solid var(--card-edge);border-radius:18px;background:radial-gradient(ellipse at 0% 0%,var(--card-glow),transparent 70%),linear-gradient(145deg,var(--card-fill),var(--card-low));box-shadow:var(--inset),0 13px 30px -12px #25341e27}
.refined.practice-app .tune-part{border:0;border-radius:0;background:transparent;box-shadow:none}
.refined.practice-app .tune-part+.tune-part{border-top:1px solid var(--card-rule)!important}
.refined.practice-app .home-intro h1,.refined .fret-heading h1,.refined.song-app .title{font-size:35px;letter-spacing:.5px;font-weight:650}
.refined.practice-app .home-intro{margin:7px 0 13px}.refined.practice-app .intro-copy{font-size:12px;line-height:1.8}
.refined.practice-app .hero-practice{border-radius:20px;border-color:#718266;background:radial-gradient(ellipse at 0% 0%,#a5b98430,transparent 78%),linear-gradient(140deg,#2e503b,#183a2b);box-shadow:inset 0 1px 0 #eff3d436,0 15px 30px -10px #163a2b38;color:#f4f1e4}
.refined.practice-app .hero-practice .tx>span{color:#c7d0bd}.refined.practice-app .hero-practice .hero-kicker,.refined.practice-app .hero-practice .hero-cta{color:#e1c691}.refined.practice-app .hero-practice b{font-size:30px;font-weight:550}
.refined.practice-app :is(.navlink,.level):hover{border-color:var(--brass);background:var(--card-low)}
.refined.practice-app .navlink .ic{border:1px solid var(--card-edge);background:var(--well)!important;color:var(--accent)!important}
.refined.practice-app .seg,.refined .fret-segment{border:1px solid var(--well-line);padding:4px;border-radius:9px;background:var(--well);box-shadow:inset 0 1px 3px #162b2010}
.refined.practice-app .seg button,.refined .fret-segment button{border:1px solid transparent;border-radius:6px;min-height:38px;font-size:12px}
.refined.practice-app .seg button[aria-checked=true],.refined .fret-segment button[aria-checked=true]{border-color:var(--card-edge);background:var(--card-fill);color:var(--accent);box-shadow:0 2px 5px #102a1b12,inset 0 1px 0 var(--card-glow)}
.refined.practice-app .top{background:var(--card-fill);border-color:var(--card-rule);border-radius:0 0 10px 10px}
.refined .fret-main{gap:21px}.refined .fret-back{min-height:30px;font-size:11px;margin-top:-12px}.refined .fret-heading{margin:0 0 5px}
.refined .fret-heading .studio-eyebrow{font:9px var(--mono);letter-spacing:2px;color:var(--accent);margin:0 0 10px}.refined .fret-heading p{font-size:12px;margin:10px 0 0}
.refined .fret-settings{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,1fr);gap:28px;padding:22px 24px;align-items:start;width:100%}
.refined .setting-block{gap:9px}.refined .setting-block+ .setting-block{padding-left:28px;border-left:1px solid var(--card-rule)}
.refined .setting-label{color:var(--text);font-size:12px}.refined .setting-block small{font-size:10px}.refined .fret-segment button{flex:1;min-width:0}
.refined .fret-exercise{overflow:hidden;min-width:0;width:100%}.exercise-label{display:flex;align-items:center;justify-content:space-between;padding:16px 25px;background:var(--well);border-bottom:1px solid var(--card-rule);font:9px var(--mono);letter-spacing:1px;color:var(--muted)}
.refined .exercise-label .question-number{position:static;border:1px solid var(--card-edge);border-radius:5px;padding:3px 7px;background:var(--card-fill);font:9px var(--mono);color:var(--accent)}
.refined .fret-exercise .target-card{justify-content:flex-start;min-height:155px;border:0;border-radius:0;background:transparent;padding:26px;text-align:left;box-shadow:none}
.refined .fret-exercise .target-copy{display:grid;grid-template-columns:95px minmax(0,1fr);gap:4px 24px;width:100%;align-items:center;text-align:left}
.refined .target-note{grid-column:1;grid-row:1/4;font:450 72px/1.1 var(--sans);color:var(--accent);letter-spacing:-3px;align-self:center}
.refined .target-prompt{grid-column:2;grid-row:1;font-size:16px;color:var(--text)}
.refined .note-alias{grid-column:2;grid-row:2}.refined .target-feedback{grid-column:2;grid-row:3;align-items:flex-start;min-height:2em;font-size:12px;max-width:none;text-align:left;margin-top:4px}
.refined .target-card:has(.reference-button:not([hidden])){padding-right:215px}
.refined .reference-button{font-size:11px;right:24px}
.refined .fret-exercise .board-card{margin:0 24px;padding:14px 13px 12px;border:1px solid var(--well-line);border-radius:12px;background:linear-gradient(180deg,var(--well),var(--card-low));box-shadow:inset 0 2px 8px #10291e0b,0 1px 0 var(--card-glow)}
.refined .fret-cell{background:transparent;border-right-width:1px}.refined .fret-cell[data-fret="0"]{background:transparent;border-right-width:3px}.refined .fret-cell.target-string:before{height:2px;opacity:.8}
.refined .fret-cell.hint-region{background:var(--accent-soft)}.refined .fret-cell:enabled:hover{background:var(--surface2)}
.refined .fret-actions{padding:21px 24px;gap:15px}.refined .fret-actions .studio-button{font-size:12px;min-height:43px;min-width:130px}.refined .fret-actions .primary{min-width:150px}
.refined .fret-notes{font-size:10px}.refined .timing-card{padding:22px 24px}.refined .timing-heading h2{font-size:14px;font-weight:550}.refined .timing-heading>span{font-size:11px}
.refined .timing-stat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;padding:14px 16px;border:1px solid var(--well-line);border-radius:10px;background:var(--well);box-shadow:inset 0 1px 3px #1d332407}
.refined .timing-stat>b{grid-column:2;grid-row:1/3;font:450 27px var(--sans);white-space:nowrap;color:var(--text)}.refined .timing-stat>span{font-size:11px}.refined .timing-stat>small{font-size:9px}
.refined .timing-grid[data-level=mastery] .timing-stat{display:grid;gap:8px}.refined .timing-grid[data-level=mastery] .timing-stat>b{margin:0}.refined .timing-note{font-size:10px}
.refined.song-app .wrap{max-width:1304px;padding:0 52px 30px}.refined.song-app .studio-shell{padding-bottom:0}.refined.song-app .studio-footer,.refined.song-app .studio-install{max-width:1200px;width:calc(100% - 104px)}
.refined.song-app .upload-grid{padding-top:0}.refined.song-app .drop{border-style:solid;position:relative;min-height:280px;overflow:hidden}.refined.song-app .drop:before{content:'';position:absolute;inset:8px;border:1px dashed var(--card-edge);border-radius:12px;pointer-events:none}
.refined.song-app .drop>svg{color:var(--accent);padding:9px;width:60px;height:60px;border:1px solid var(--card-edge);border-radius:17px;background:var(--well);box-shadow:var(--inset),0 3px 6px #213a2010}
.refined.song-app .drop:hover{background:var(--card-low);border-color:var(--brass)}.refined.song-app .drop .drop-main{font-size:15px;font-weight:500}.refined.song-app .about{background:var(--well)}
.refined.song-app .card{padding:23px}.refined.song-app .label{color:var(--text);font-size:12px}.refined.song-app .bar-track{background:var(--well)}
.refined.song-app .transport{background:var(--card-fill);border-color:var(--card-edge);box-shadow:var(--inset),0 10px 25px #122a1c2b}
.refined.song-app .play-btn{background:linear-gradient(135deg,#35563c,#203e2d);color:#f4f1e4;border:1px solid #64795b;box-shadow:var(--inset),0 3px 7px #203c231a}
html[data-theme=dark] .refined.song-app .play-btn{background:linear-gradient(135deg,#ebd5a5,#c8ad78);color:#233d2d}
.refined.song-app .wave-wrap{border-color:var(--well-line);background:var(--well)}.refined.song-app .dialog{background:var(--card-fill);border-color:var(--card-edge);border-radius:18px}
@media(min-width:701px){
 .refined .fretboard{grid-template-columns:36px repeat(13,minmax(0,1fr));min-width:0;width:100%}
 .refined .board-scroll{overflow-x:hidden}.refined .board-touch-tip{display:none}.refined .fret-cell{height:42px}.refined .string-label{min-height:42px;font-size:11px}
 .refined .fret-cell>span{min-width:25px;height:25px;font-size:11px}
}
@media(min-width:1100px),(min-width:768px) and (min-height:600px) and (orientation:landscape){
 body.refined:not(.lobby-app)::before{inset:-90px;filter:blur(38px);transform:translateZ(0)}
 body.refined:not(.lobby-app)::after{background:linear-gradient(180deg,#f4f0df4d,#ece9dc80 55%,#efebdfbf)}
 html[data-theme=dark] body.refined:not(.lobby-app)::before{filter:brightness(.45) saturate(.72) blur(38px)}
 html[data-theme=dark] body.refined:not(.lobby-app)::after{background:linear-gradient(125deg,#0c281d80,#091c1459),linear-gradient(180deg,transparent,#10251be6)}
 .refined :is(.fret-settings,.fret-exercise,.timing-card),.refined.practice-app :is(.card:not(.target),.hero-practice,.navlink),.refined.song-app :is(.card,.drop){box-shadow:var(--inset),0 5px 9px #1b291913,0 26px 45px -15px #172f244d}
 html[data-theme=dark] .refined :is(.fret-settings,.fret-exercise,.timing-card),html[data-theme=dark] .refined.practice-app :is(.card:not(.target),.hero-practice,.navlink),html[data-theme=dark] .refined.song-app :is(.card,.drop){box-shadow:var(--inset),0 5px 12px #0003,0 28px 50px -12px #0007}
}
@media(max-width:1100px){.refined .studio-shell,.refined.practice-app #app{padding-left:28px;padding-right:28px}.refined.song-app .wrap{padding-left:28px;padding-right:28px}.refined.song-app .studio-footer,.refined.song-app .studio-install{width:calc(100% - 56px)}.refined .studio-links{gap:22px}.hero h1{font-size:48px}.lobby-cards{gap:15px}body.refined .mode-card{padding:23px 20px}body.refined .mode-card h2{font-size:22px}.refined .fret-settings{gap:22px}.refined .setting-block+ .setting-block{padding-left:22px}}
@media(min-width:701px) and (max-width:900px){.lobby-cards{grid-template-columns:1fr 1fr}.lobby-cards .song-card{grid-column:1/-1}.refined .studio-links{gap:16px}.refined .studio-brand{font-size:11px}.refined .fret-settings{grid-template-columns:minmax(0,1.1fr) minmax(220px,1fr)}.refined .fret-segment button{padding:8px}.refined .fret-cell>span{font-size:10px;min-width:24px;height:24px}}
@media(max-width:760px){.refined .studio-shell,.refined.practice-app #app{padding-left:21px;padding-right:21px}.refined .studio-nav{margin:0 -12px 24px;padding:19px 12px 0;min-height:115px;border-radius:0 0 10px 10px;gap:0;align-items:flex-start;flex-wrap:wrap}.refined .studio-brand{font-size:12px;gap:10px;min-height:33px}.studio-mark{width:28px;height:33px}.studio-brand>span:last-child:after{font-size:7px;letter-spacing:1.5px;margin-top:4px}.refined .studio-links{width:100%;gap:0;justify-content:space-between;height:44px;min-height:44px;margin-top:12px;align-self:auto}.refined .studio-links>a{font-size:11px;padding:0 5px;min-height:44px;height:44px}.refined .studio-links>a[aria-current=page]:after{bottom:0;left:25%;right:25%}.refined .studio-theme-toggle{width:32px;min-height:32px;height:32px;align-self:center}.refined .studio-theme-toggle svg{width:15px;height:15px}.refined.song-app .wrap{padding:0 21px 24px}.refined.song-app .studio-footer,.refined.song-app .studio-install{width:calc(100% - 42px)}}
@media(max-width:700px){
 body.refined::before{background-size:auto 100%;background-position:42% top}body.refined::after{background:linear-gradient(180deg,#fff8e566 0%,#f5efdf42 25%,#f4f1e5d6 75%,#f4f1e5f0 100%)}
 html[data-theme=dark] body.refined::before{filter:brightness(.5) saturate(.7)}html[data-theme=dark] body.refined::after{background:linear-gradient(125deg,#0c281d59,transparent),linear-gradient(180deg,transparent,#10251b88 35%,#10251bf2 100%)}html[data-theme=dark] body.refined.lobby-app::after{background:radial-gradient(ellipse 52% 46% at 14% 24%,#0a1a13c4,#0a1a1380 55%,transparent 100%),linear-gradient(125deg,#0c281d59,transparent),linear-gradient(180deg,transparent,#10251b88 35%,#10251bf2 100%)}
 .hero{padding:13px 0 31px;min-height:216px}.hero h1{font-size:32px;letter-spacing:0;white-space:nowrap}.hero p{font-size:11px;margin:16px 0 18px;letter-spacing:.5px}.hero .eyebrow{font-size:8px;letter-spacing:1.7px}.hero-foot{font-size:9px;gap:11px}.hero-foot:before{width:25px}
 .section-top{margin:8px 0 16px}.section-top h2{font-size:13px}.section-top>span{font-size:8px;letter-spacing:1px}.lobby-cards{grid-template-columns:1fr;gap:16px}
 body.refined .mode-card{padding:25px 25px 22px;border-radius:21px}body.refined .mode-card h2{font-size:24px;margin-top:20px}body.refined .mode-card>p{font-size:11px}.card-display{height:168px;margin:23px 0 17px;padding:13px 14px}.chord-display{grid-template-columns:89px 1fr;gap:17px}.diagram-inset{padding-right:16px}.display-label{font-size:7px;letter-spacing:1px}.mode-tags{gap:7px;margin-bottom:19px}.mode-tags span{font-size:9px;padding:2px 7px}.card-link small{font-size:9px}
 body.refined .lobby-utilities{grid-template-columns:1fr;gap:12px;margin-top:17px}body.refined .utility{padding:17px;gap:12px}.utility b{font-size:11px}.utility p{font-size:9px}
 .refined .studio-footer{font-size:9px;letter-spacing:0;gap:14px;flex-wrap:wrap;padding:20px 0}.refined .studio-footer>span:first-child{font-size:8px}
 .refined .fret-main{gap:17px}.refined .fret-heading h1,.refined.practice-app .home-intro h1,.refined.song-app .title{font-size:28px}.refined .fret-heading p{font-size:11px}.refined .fret-back{margin-top:-12px}
 .refined .fret-settings{grid-template-columns:1fr;gap:16px;padding:19px 17px}.refined .setting-block+ .setting-block{border-left:0;border-top:1px solid var(--card-rule);padding:16px 0 0}.refined .fret-segment button{font-size:12px}
 .exercise-label{padding:14px 17px;font-size:8px}.refined .fret-exercise .target-card{padding:24px 18px;min-height:155px}.refined .fret-exercise .target-copy{grid-template-columns:68px minmax(0,1fr);gap:4px 17px}.refined .target-note{font-size:57px}.refined .target-prompt{font-size:14px}.refined .target-feedback{font-size:11px;min-height:2.5em}
 .refined .fret-exercise .board-card{margin:0 13px;padding:12px 8px}.refined .board-touch-tip{font-size:9px}.refined .target-card:has(.reference-button:not([hidden])){padding:24px 18px;align-items:stretch}.refined .reference-button{align-self:flex-start;max-width:100%}
 .refined .fret-actions{padding:18px 16px;gap:10px}.refined .fret-actions .studio-button{min-width:0;font-size:11px}.refined .fret-actions .primary{min-width:0}.refined .timing-card{padding:19px 17px}.refined .timing-stat{padding:12px;font-size:10px}.refined .timing-stat>b{font-size:22px}.refined .timing-heading h2{font-size:13px}.refined .timing-heading>span{font-size:10px}
 .refined.practice-app .card{padding:18px}.refined.practice-app .hero-practice b{font-size:26px}.refined.practice-app .intro-copy{font-size:11px}.refined.practice-app .top{padding-top:10px}.refined.practice-app .navlink{padding:17px}.refined.song-app .card{padding:19px}.refined.song-app .drop{min-height:245px}.refined.song-app .drop .drop-main{font-size:13px}
}
@media(max-width:360px){.hero h1{font-size:27px}.hero p{font-size:10px}.hero-foot{font-size:8px}body.refined .mode-card{padding:23px 21px}body.refined .mode-card h2{font-size:21px}.chord-display{grid-template-columns:71px 1fr;gap:11px}.display-label{font-size:6px;letter-spacing:.3px}.display-head{font-size:8px}.song-display .display-head{font-size:6px}.progression-note{font-size:7px}.refined .studio-brand{font-size:11px}}
/* Keep the existing compact live-practice screens usable on phones in landscape. */
@media(orientation:landscape) and (max-height:520px){.refined.practice-app:not([data-screen=home]) .studio-nav{display:none}.refined.practice-app:not([data-screen=home]) #app{padding:6px 16px!important}.refined.practice-app:not([data-screen=home]) .card{box-shadow:none}.refined.practice-app .top{border-radius:0}.refined.practice-app .inv-target{background:var(--card-fill)}}
@media(prefers-reduced-motion:reduce){.refined *, .refined *:before,.refined *:after{transition:none!important;animation:none!important}}

.progression-grid.chord-pills{max-width:none;font:inherit}
/* Match the approved dark green feature card in both themes. */
html[data-theme=light] .refined.practice-app .hero-practice{background:radial-gradient(ellipse at 0% 0%,#a5b98430,transparent 78%),linear-gradient(140deg,#2e503b,#183a2b);border-color:#718266;color:#f4f1e4}
html[data-theme=light] .refined.practice-app .hero-practice .tx>span{color:#c7d0bd}
html[data-theme=light] .refined.practice-app .hero-practice .hero-kicker,html[data-theme=light] .refined.practice-app .hero-practice .hero-cta{color:#e1c691}
html[data-theme=light] .refined .studio-button.primary{background:linear-gradient(135deg,#35563c,#203e2d);border-color:#516c4e;color:#f7f3e5}
.refined.practice-app .mic-action{background:linear-gradient(135deg,#35563c,#203e2d)!important;color:#f7f3e5!important;border:1px solid #516c4e!important}
html[data-theme=dark] .refined.practice-app .mic-action{background:linear-gradient(135deg,#ebd5a5,#c8ad78)!important;color:#233d2d!important;border-color:#d9c08a!important}
/* Give the painted layer an explicit viewport height on every page. */
body.refined::before{min-height:100vh}
@media(min-width:1100px),(min-width:768px) and (min-height:600px) and (orientation:landscape){body.refined:not(.lobby-app)::before{min-height:calc(100vh + 180px)}}

/* Underline grows from the left and exits toward the right. */
.refined .studio-links>a::after,
.refined .studio-links>a[aria-current=page]::after{
 content:'';position:absolute;display:block;left:0;right:0;bottom:7px;height:1px;
 border-radius:0;background:var(--accent);pointer-events:none;
 transform:scaleX(0);transform-origin:right center;
 transition:transform .45s cubic-bezier(.7,0,.2,1);
}
.refined .studio-links>a[aria-current=page]{font-weight:600}
.refined .studio-links>a:hover::after,
.refined .studio-links>a:focus-visible::after{
 transform:scaleX(1);transform-origin:left center;
}
@media(max-width:760px){
 .refined .studio-links>a::after,
 .refined .studio-links>a[aria-current=page]::after{bottom:0}
}