:root{
  --paper:#f7f4ed;--paper-2:#fcfbf7;--ink:#506059;--ink-strong:#34453d;
  --sage:#81998b;--sage-deep:#61766a;--sage-soft:#dfe7e1;--blue:#aebfca;
  --gold:#c8b38d;--wood:#b9875f;--line:rgba(69,86,77,.14);
  --glass:rgba(252,251,247,.82);--shadow:0 18px 50px rgba(67,79,72,.12);
  --radius:28px;--serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang TC','Noto Sans TC',sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#faf8f3 0%,#f3efe6 100%);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit;color:inherit} button{cursor:pointer;touch-action:manipulation} button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(116,145,128,.25);outline-offset:3px}
.topbar{height:68px;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,54px);background:rgba(249,247,241,.88);backdrop-filter:blur(18px) saturate(1.1);border-bottom:1px solid rgba(80,95,87,.08)}
.brand{border:0;background:none;display:flex;align-items:center;gap:10px;padding:8px;border-radius:999px}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(71,88,79,.16);border-radius:50%;font:600 13px var(--serif);background:rgba(255,255,255,.65);box-shadow:0 5px 14px rgba(70,84,76,.06)}.brand-name{font:600 17px var(--serif);letter-spacing:.02em}
.ghost-btn,.back-btn{border:1px solid var(--line);background:rgba(255,255,255,.7);border-radius:999px;padding:9px 14px;box-shadow:0 5px 14px rgba(70,84,76,.05)}
main{min-height:calc(100vh - 120px)}.page{display:none}.page.active{display:block}.page-home{padding:22px clamp(14px,4vw,58px) 52px;max-width:1500px;margin:auto}
.hero-card{position:relative;aspect-ratio:1672/941;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:#eee9df;border:1px solid rgba(75,90,82,.08)}.hero-image{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(244,241,233,.08))}.hero-mobile-copy{display:none}
.intro-strip{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:18px 12px 2px;color:#7b8982;font-size:12px;letter-spacing:.04em}.intro-strip i{width:4px;height:4px;border-radius:50%;background:#b8c5bd}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}.feature-card{position:relative;overflow:hidden;min-height:178px;text-align:left;border:1px solid rgba(80,95,87,.12);border-radius:26px;padding:26px 28px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,248,245,.62));box-shadow:0 10px 30px rgba(65,75,70,.07);transition:.22s transform,.22s box-shadow,.22s border-color}.feature-card:after{content:'→';position:absolute;right:24px;top:24px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(112,137,123,.10);color:#657a6f;font-size:18px;transition:.2s transform}.feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(65,75,70,.11);border-color:rgba(101,126,112,.22)}.feature-card:hover:after{transform:translateX(3px)}.feature-card .feature-kicker{display:block;font-size:10px;letter-spacing:.2em;color:#8b9b92;margin-bottom:9px}.feature-card strong{display:block;font:500 32px var(--serif);color:var(--ink-strong)}.feature-card>span:not(.feature-kicker){display:block;margin-top:3px;font-weight:650}.feature-card small{display:block;margin-top:20px;color:#748179;line-height:1.6;padding-right:32px}
.page-tool{position:relative;min-height:calc(100vh - 68px);overflow:hidden;padding:24px clamp(14px,4vw,52px) 58px}.watercolor-bg{position:fixed;inset:68px 0 0;background-image:linear-gradient(rgba(247,244,237,.89),rgba(247,244,237,.89)),url('assets/hero.png');background-size:cover;background-position:70% center;filter:saturate(.9);z-index:-1}.tuner-bg{background-position:80% center}.tool-shell{max-width:1060px;margin:0 auto}.tool-heading{display:flex;align-items:center;gap:16px;margin:4px 0 22px}.back-btn{width:42px;height:42px;padding:0;font-size:22px}.tool-heading h2{font:500 clamp(30px,4vw,48px) var(--serif);margin:0;color:var(--ink-strong)}.tool-heading h2 span{font:600 15px var(--sans);margin-left:9px;color:#7e8c84}.eyebrow{font-size:11px;letter-spacing:.21em;text-transform:uppercase;color:#7e9387;margin:0 0 6px}
.glass-panel{background:var(--glass);border:1px solid rgba(95,108,100,.13);box-shadow:0 12px 36px rgba(66,78,71,.09);backdrop-filter:blur(17px) saturate(1.06);border-radius:var(--radius)}
.metro-main{padding:28px clamp(20px,4vw,42px);text-align:center}.measure-dots{height:28px;display:flex;justify-content:center;align-items:center;gap:9px;margin-bottom:3px}.beat-dot{width:8px;height:8px;border-radius:50%;background:#c7d1cb;transition:.07s}.beat-dot.accent{width:11px;height:11px}.beat-dot.current{background:#61766a;transform:scale(1.25);box-shadow:0 0 0 7px rgba(111,136,121,.10)}
.tempo-line{display:flex;align-items:center;justify-content:center;gap:28px}.tempo-display{display:flex;align-items:baseline;gap:10px}.tempo-display input{width:220px;border:0;background:transparent;text-align:center;font:500 clamp(72px,12vw,132px)/1 var(--serif);color:var(--ink-strong);outline:none;padding:0}.tempo-display span{font-size:13px;letter-spacing:.13em;color:#8a9890}.round-btn{width:56px;height:56px;border:1px solid var(--line);background:rgba(255,255,255,.74);border-radius:50%;font-size:30px;box-shadow:0 6px 16px rgba(65,80,72,.06)}
.range{width:100%;accent-color:#7f9588}.primary-actions{display:flex;justify-content:center;gap:14px;margin-top:22px}.secondary-btn{min-width:98px;border:1px solid var(--line);background:rgba(255,255,255,.70);border-radius:999px;padding:13px 20px;font-weight:700;letter-spacing:.08em}.play-btn{border:0;background:linear-gradient(135deg,#61766a,#4e6458);color:white;border-radius:999px;min-width:176px;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;box-shadow:0 9px 22px rgba(74,94,83,.22)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.setting-card{padding:20px}.setting-card.wide{grid-column:1/-1}.setting-card h3,.advanced-panel h3,.tuner-help h3,.calibration h3{font-size:15px;margin:0 0 10px;color:#4a5a52}.hint{font-size:12px;color:#859088;margin:5px 0 0;line-height:1.5}.inline-fields{display:flex;align-items:flex-end;gap:12px}.inline-fields label{flex:1}.inline-fields label span,.mini-grid label{display:block;font-size:12px;color:#7b8780}.inline-fields select,.mini-grid input{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.74);border-radius:12px;padding:11px 12px;margin-top:6px}.slash{font:28px var(--serif);padding-bottom:8px;color:#9aa69f}.segmented{display:flex;gap:7px;flex-wrap:wrap}.segmented button{flex:1;min-width:50px;border:1px solid var(--line);background:rgba(255,255,255,.68);padding:10px 12px;border-radius:13px}.segmented button.active{background:#60776a;color:white;border-color:#60776a;box-shadow:0 6px 14px rgba(78,104,90,.16)}.sound-options button{min-width:72px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px}.setting-row h3{margin:0}.switch{position:relative;width:48px;height:28px;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#cfd7d2;border-radius:999px;transition:.2s}.switch span:after{content:'';position:absolute;width:22px;height:22px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.12)}.switch input:checked+span{background:#71897c}.switch input:checked+span:after{transform:translateX(20px)}.volume-row output{font:600 18px var(--serif)}
.advanced-panel{margin-top:16px;padding:0 22px 20px}.advanced-panel summary{padding:19px 0;font-weight:700;cursor:pointer}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid var(--line);padding-top:18px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.mute-controls{grid-template-columns:1fr 1fr}.disabled-group{opacity:.42;pointer-events:none}.enabled-group{opacity:1;pointer-events:auto}
.tuner-panel{padding:25px clamp(18px,5vw,48px) 30px;text-align:center}.mic-status{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(136,151,142,.10);font-size:12px;color:#738178}.note-readout{margin:22px 0 18px}.note-name{font:500 clamp(84px,17vw,160px)/.88 var(--serif);color:var(--ink-strong);letter-spacing:-.04em}.frequency{margin-top:10px;font-size:17px;color:#7b8981}.tuner-gauge{max-width:740px;margin:0 auto}.gauge-scale{display:flex;justify-content:space-between;font-size:11px;color:#89948e;padding:0 4px}.gauge-track{height:46px;position:relative;margin-top:5px;border-top:1px solid rgba(73,89,80,.22);border-bottom:1px solid rgba(73,89,80,.10);background:linear-gradient(90deg,rgba(169,185,195,.08),rgba(143,163,151,.09))}.gauge-track:before,.gauge-track:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:rgba(86,103,94,.18)}.gauge-track:before{left:25%}.gauge-track:after{left:75%}.in-tune-zone{position:absolute;left:47%;right:47%;top:0;bottom:0;background:rgba(116,147,127,.13);box-shadow:0 0 26px rgba(117,154,130,.08)}.needle{position:absolute;left:50%;top:-8px;width:3px;height:62px;background:#6f8177;border-radius:3px;transform:translateX(-50%);transition:left .08s linear,box-shadow .15s}.needle.in-tune{box-shadow:0 0 0 9px rgba(113,151,127,.10),0 0 34px rgba(113,151,127,.40)}.cents{font:500 28px var(--serif);margin-top:14px}.tune-state{font-size:13px;min-height:20px;color:#819088;margin-top:3px}.mic-btn{margin-top:24px}.calibration{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);text-align:left}.calibration-control{display:flex;align-items:center;gap:12px}.calibration-control strong{min-width:92px;text-align:center;font:600 18px var(--serif)}.small-round{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.72)}.tuner-help{margin-top:16px;padding:19px 22px}.tuner-help p{font-size:13px;line-height:1.7;color:#718078;margin:0}
footer{text-align:center;padding:22px;font-size:11px;letter-spacing:.08em;color:#919b95}
@media(max-width:820px){
  .topbar{height:62px;padding:0 12px}.brand-name{display:none}.brand-mark{width:36px;height:36px}.page-home{padding:10px 10px 34px}.hero-card{aspect-ratio:1672/941;border-radius:22px}.hero-image{object-fit:cover;object-position:center}.intro-strip{padding:14px 8px 0;font-size:10px;gap:8px}.home-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.feature-card{min-height:142px;border-radius:22px;padding:22px}.feature-card strong{font-size:28px}.feature-card small{margin-top:14px}.feature-card:after{right:18px;top:18px}.page-tool{padding:18px 12px 40px}.watercolor-bg{inset:62px 0 0;background-image:linear-gradient(rgba(247,244,237,.91),rgba(247,244,237,.91)),url('assets/hero.png');background-position:77% center}.tool-heading{margin-bottom:14px}.tool-heading h2{font-size:30px}.tool-heading h2 span{display:block;margin:3px 0 0;font-size:12px}.metro-main{padding:22px 14px}.tempo-line{gap:12px}.tempo-display input{width:145px;font-size:80px}.tempo-display span{display:none}.round-btn{width:48px;height:48px}.settings-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}.setting-card.wide{grid-column:auto}.advanced-panel{margin-top:12px}.advanced-grid{grid-template-columns:1fr}.note-name{font-size:112px}.calibration{align-items:flex-start;flex-direction:column}.calibration-control{width:100%;justify-content:space-between}.primary-actions{gap:10px}.secondary-btn,.play-btn{min-height:48px}.tuner-panel{padding:20px 14px 24px}.gauge-track{height:42px}.tuner-help{padding:17px}.mini-grid{grid-template-columns:1fr 1fr}.trainer-controls label:last-child{grid-column:1/-1}
}
@media(max-width:390px){.tempo-display input{width:126px;font-size:72px}.round-btn{width:44px;height:44px}.primary-actions{flex-direction:column}.secondary-btn,.play-btn{width:100%}.sound-options{display:grid;grid-template-columns:1fr 1fr}.note-name{font-size:100px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* v1.2 mobile legibility + tighter homepage rhythm */
html,body{min-height:100%;}
body{font-size:17px;}
main{min-height:auto;}
.page-home{padding-bottom:18px;}
footer{padding:10px 18px max(12px,env(safe-area-inset-bottom));font-size:13px;letter-spacing:.07em;}
.intro-strip{font-size:14px;font-weight:600;}
.feature-card .feature-kicker{font-size:12px;}
.feature-card>span:not(.feature-kicker){font-size:18px;}
.feature-card small{font-size:16px;}
.setting-card h3,.advanced-panel h3,.tuner-help h3,.calibration h3{font-size:18px;}
.hint{font-size:14px;}
.inline-fields label span,.mini-grid label{font-size:14px;}
.segmented button,.secondary-btn,.play-btn,.inline-fields select,.mini-grid input{font-size:16px;}
.volume-row output{font-size:22px;}
.mic-status,.tune-state{font-size:14px;}
.frequency{font-size:20px;}
.cents{font-size:32px;}
.accent-strength{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:9px}.accent-strength>span{font-size:14px;color:#75837b;font-weight:700}.segmented.compact button{padding:9px 10px;font-size:14px}.level-mixer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.level-mixer label{display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}.level-mixer label>span{font-size:14px;font-weight:700}.level-mixer output{font:600 16px var(--serif)}.level-mixer input{grid-column:1/-1;width:100%}

@media(max-width:820px){
  body{font-size:18px}
  .page-home{padding:10px 10px 14px}
  .hero-card{aspect-ratio:4/3;min-height:0}
  .hero-image{object-fit:cover;object-position:69% 46%}
  .intro-strip{padding:16px 8px 2px;font-size:13px;line-height:1.5}
  .home-grid{gap:12px;margin-top:12px}
  .feature-card{min-height:154px;padding:24px}
  .feature-card strong{font-size:34px}
  .feature-card>span:not(.feature-kicker){font-size:19px}
  .feature-card small{font-size:16px;line-height:1.55;margin-top:15px}
  footer{padding-top:8px;padding-bottom:max(10px,env(safe-area-inset-bottom));font-size:12px}
  .tool-heading h2{font-size:34px}.tool-heading h2 span{font-size:15px}
  .eyebrow{font-size:13px}
  .tempo-display input{font-size:88px}
  .round-btn{font-size:32px}
  .setting-card{padding:22px}
  .setting-card h3,.advanced-panel h3,.tuner-help h3,.calibration h3{font-size:19px}
  .hint{font-size:15px}
  .inline-fields label span,.mini-grid label{font-size:15px}
  .inline-fields select,.mini-grid input,.segmented button{font-size:17px;min-height:46px}
  .secondary-btn,.play-btn{font-size:17px;min-height:52px}
  .level-mixer{grid-template-columns:1fr;gap:16px}
  .accent-strength{margin-top:18px}
  .note-name{font-size:120px}.frequency{font-size:21px}.cents{font-size:34px}
}
@media(max-width:430px){
  .hero-card{aspect-ratio:1.22/1}
  .hero-image{object-position:68% 46%}
  .intro-strip{font-size:12.5px;gap:7px}
  .feature-card strong{font-size:32px}
}

/* v1.3 — larger mobile typography, larger home cards, tighter footer, louder-control UI */
.boost-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center}.boost-row>span{font-size:16px;font-weight:750;color:#596b62}.boost-row .hint{grid-column:1/-1;margin-top:0}.boost-row .segmented{justify-self:stretch}

@media(max-width:820px){
  .topbar{height:68px;padding:0 14px}.brand-mark{width:42px;height:42px;font-size:15px}
  .page-home{padding:12px 12px 4px}
  .hero-card{border-radius:24px}
  .intro-strip{padding:17px 8px 4px;font-size:15px;gap:9px;line-height:1.45}
  .home-grid{gap:15px;margin-top:14px}
  .feature-card{min-height:190px;padding:30px 28px;border-radius:26px}
  .feature-card:after{right:22px;top:22px;width:44px;height:44px;font-size:25px}
  .feature-card .feature-kicker{font-size:14px;margin-bottom:11px}
  .feature-card strong{font-size:40px;line-height:1.06;padding-right:48px}
  .feature-card>span:not(.feature-kicker){font-size:22px;margin-top:8px}
  .feature-card small{font-size:18px;line-height:1.55;margin-top:18px;padding-right:18px}
  footer{padding:7px 12px max(8px,env(safe-area-inset-bottom));font-size:13px;line-height:1.35}

  .page-tool{padding:20px 12px 28px}
  .tool-heading{gap:14px;margin-bottom:17px}.back-btn{width:48px;height:48px;font-size:27px}
  .eyebrow{font-size:15px;margin-bottom:7px}
  .tool-heading h2{font-size:40px;line-height:1.08}.tool-heading h2 span{font-size:18px;margin-top:6px}
  .metro-main{padding:27px 17px}.measure-dots{height:34px;gap:11px}.beat-dot{width:10px;height:10px}.beat-dot.accent{width:14px;height:14px}
  .tempo-display input{width:174px;font-size:104px}.tempo-line{gap:14px}.round-btn{width:58px;height:58px;font-size:38px}
  .primary-actions{margin-top:25px}.secondary-btn,.play-btn{min-height:58px;font-size:20px;padding:15px 24px}.play-btn{min-width:190px}

  .settings-grid{gap:14px;margin-top:14px}.setting-card{padding:25px;border-radius:24px}
  .setting-card h3,.advanced-panel h3,.tuner-help h3,.calibration h3{font-size:22px;margin-bottom:12px}
  .hint{font-size:17px;line-height:1.55}
  .inline-fields label span,.mini-grid label{font-size:17px}
  .inline-fields select,.mini-grid input,.segmented button{font-size:19px;min-height:52px;padding:12px 13px}
  .switch{width:54px;height:32px}.switch span:after{width:26px;height:26px}.switch input:checked+span:after{transform:translateX(22px)}
  .accent-strength>span,.level-mixer label>span,.boost-row>span{font-size:17px}
  .segmented.compact button{font-size:17px;min-height:48px}
  .volume-row output{font-size:26px}.level-mixer output{font-size:18px}
  .advanced-panel{padding:0 24px 22px}.advanced-panel summary{padding:22px 0;font-size:20px}
  .boost-row{grid-template-columns:1fr;gap:9px;margin-top:20px;padding-top:18px}.boost-row .hint{grid-column:auto}

  .tuner-panel{padding:25px 18px 30px}.mic-status{font-size:17px;padding:9px 14px}
  .note-readout{margin:25px 0 20px}.note-name{font-size:136px}.frequency{font-size:25px;margin-top:13px}
  .gauge-scale{font-size:14px}.gauge-track{height:50px}.cents{font-size:40px}.tune-state{font-size:18px;min-height:24px}
  .calibration-control strong{font-size:24px;min-width:116px}.small-round{width:46px;height:46px;font-size:24px}
  .tuner-help{padding:22px}.tuner-help p{font-size:17px;line-height:1.75}
}
@media(max-width:430px){
  .feature-card{min-height:184px;padding:27px 24px}.feature-card strong{font-size:37px}.feature-card>span:not(.feature-kicker){font-size:21px}.feature-card small{font-size:17px}
  .intro-strip{font-size:14px}
  .tool-heading h2{font-size:37px}.tempo-display input{width:156px;font-size:98px}.round-btn{width:54px;height:54px}
  .note-name{font-size:128px}.frequency{font-size:23px}.cents{font-size:38px}
}
@media(max-width:390px){
  .feature-card{min-height:178px}.feature-card strong{font-size:35px}
  .tempo-display input{width:144px;font-size:90px}.round-btn{width:50px;height:50px}
  .note-name{font-size:118px}
}


/* v1.4 — compact mobile hero, fuller cards, chromatic proximity colors */
.gauge-track{transition:background .18s ease,box-shadow .18s ease,border-color .18s ease}
.gauge-track.near-tune{background:linear-gradient(90deg,rgba(189,116,103,.18),rgba(184,104,94,.34),rgba(189,116,103,.18));border-color:rgba(162,83,74,.32);box-shadow:inset 0 0 22px rgba(179,93,82,.16),0 0 22px rgba(179,93,82,.10)}
.gauge-track.in-tune{background:linear-gradient(90deg,rgba(96,147,110,.22),rgba(86,151,105,.52),rgba(96,147,110,.22));border-color:rgba(75,130,92,.42);box-shadow:inset 0 0 26px rgba(77,139,96,.24),0 0 28px rgba(77,139,96,.18)}
.gauge-track.dead-center{background:linear-gradient(90deg,rgba(78,147,98,.28),rgba(64,152,92,.68),rgba(78,147,98,.28));box-shadow:inset 0 0 30px rgba(56,132,82,.30),0 0 34px rgba(56,132,82,.24)}
.gauge-track.near-tune .in-tune-zone{background:rgba(172,89,78,.28);box-shadow:0 0 28px rgba(172,89,78,.18)}
.gauge-track.in-tune .in-tune-zone,.gauge-track.dead-center .in-tune-zone{background:rgba(62,139,86,.58);box-shadow:0 0 34px rgba(62,139,86,.34)}
.needle.near-tune{background:#a35f55;box-shadow:0 0 0 7px rgba(172,89,78,.12),0 0 24px rgba(172,89,78,.30)}
.needle.in-tune{background:#3f8b58;box-shadow:0 0 0 10px rgba(67,143,91,.16),0 0 38px rgba(67,143,91,.55)}
.cents.near-tune,.tune-state.near-tune{color:#95574e;font-weight:700}
.cents.in-tune,.tune-state.in-tune{color:#3f8154;font-weight:800}

@media(max-width:820px){
  .page-home{padding:10px 12px 2px}
  .hero-card{aspect-ratio:16/9;border-radius:22px}
  .hero-image{object-fit:contain;object-position:center center;background:#f5f1e8}
  .intro-strip{padding:12px 8px 2px;font-size:14px;gap:8px;line-height:1.35}
  .home-grid{gap:12px;margin-top:12px}
  .feature-card{min-height:166px;padding:25px 24px;border-radius:24px}
  .feature-card:after{right:20px;top:20px;width:42px;height:42px;font-size:23px}
  .feature-card .feature-kicker{font-size:13px;margin-bottom:8px}
  .feature-card strong{font-size:37px;line-height:1.06;padding-right:46px}
  .feature-card>span:not(.feature-kicker){font-size:21px;margin-top:6px}
  .feature-card small{font-size:17px;line-height:1.45;margin-top:13px;padding-right:12px}
  footer{padding:4px 12px max(6px,env(safe-area-inset-bottom));font-size:12px}
}
@media(max-width:430px){
  .hero-card{aspect-ratio:16/9}
  .feature-card{min-height:162px;padding:23px 22px}
  .feature-card strong{font-size:35px}
  .feature-card>span:not(.feature-kicker){font-size:20px}
  .feature-card small{font-size:16.5px}
  .intro-strip{font-size:13.5px}
}
@media(max-width:390px){
  .feature-card{min-height:158px}
  .feature-card strong{font-size:33px}
}


/* v1.4.1 — fix home title cropping, remove top logo gap, collapsible metronome settings, subdivision 5 */
.topbar{height:0;padding:0;border-bottom:0;background:transparent;backdrop-filter:none;position:sticky;top:0;z-index:50;overflow:visible;justify-content:flex-end}
.brand{display:none!important}
.top-actions{position:absolute;top:10px;right:12px}
.ghost-btn{padding:10px 14px;font-weight:700}
main{min-height:auto}
.page-home{padding-top:12px}
.hero-card{aspect-ratio:auto;display:block}
.hero-image{position:relative;display:block;width:100%;height:auto;object-fit:contain;object-position:center;background:#f5f1e8}
.hero-overlay{display:none}
.hero-mobile-copy{display:none}
.metro-options-panel{margin-top:16px;padding:0 22px 18px}
.metro-options-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0;font-weight:800;font-size:18px;cursor:pointer;color:var(--ink-strong)}
.metro-options-panel>summary::-webkit-details-marker{display:none}
.metro-options-panel>summary:after{content:'＋';flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(112,137,123,.10);font-size:22px;color:#657a6f;transition:.18s transform}
.metro-options-panel[open]>summary:after{content:'−'}
.metro-options-panel>summary span{font-weight:500;font-size:14px;color:#7b8780;margin-left:auto}
.metro-options-content{border-top:1px solid var(--line);padding-top:2px}
.metro-options-panel .settings-grid{margin-top:14px}
.metro-options-panel .advanced-panel{margin-bottom:0}
@media(max-width:820px){
  .top-actions{top:8px;right:10px}
  .page-home{padding:12px 12px 6px}
  .hero-card{border-radius:22px}
  .hero-image{width:100%;height:auto;max-height:none;object-position:center}
  .intro-strip{padding:12px 8px 2px;font-size:14px;gap:8px;line-height:1.35}
  .metro-options-panel{padding:0 18px 16px;border-radius:24px}
  .metro-options-panel>summary{font-size:21px;padding:20px 0}
  .metro-options-panel>summary span{display:none}
  .metro-options-panel>summary:after{width:40px;height:40px;font-size:25px}
  .metro-options-panel .settings-grid{margin-top:12px}
}
@media(max-width:430px){
  .page-home{padding:12px 10px 4px}
  .hero-card{border-radius:20px}
  .intro-strip{font-size:13.5px}
}


/* v1.4.3 — homepage spacing refinement + subtitle legibility; preserve true page navigation */
@media(max-width:820px){
  .page-home{
    padding:24px 12px 0;
  }
  .hero-card{
    margin-top:10px;
  }
  .intro-strip{
    padding:16px 8px 0;
    margin:0;
    font-size:14px;
    line-height:1.45;
  }
  .home-grid{
    margin-top:24px;
    gap:14px;
  }
  .feature-card{
    min-height:168px;
    padding:24px 22px;
  }
  .feature-card>span:not(.feature-kicker){
    font-size:24px;
    line-height:1.25;
    margin-top:8px;
    font-weight:750;
  }
  .feature-card small{
    font-size:17px;
    line-height:1.48;
    margin-top:14px;
  }
  .tool-heading h2 span{
    display:block;
    margin:8px 0 0;
    font-size:21px;
    line-height:1.25;
    font-weight:700;
  }
  footer{
    margin-top:0;
    padding:8px 12px max(4px,env(safe-area-inset-bottom));
    font-size:12px;
  }
}
@media(max-width:430px){
  .page-home{padding:26px 10px 0}
  .hero-card{margin-top:10px}
  .intro-strip{padding-top:15px;font-size:13.5px}
  .home-grid{margin-top:22px;gap:14px}
  .feature-card{min-height:166px;padding:23px 20px}
  .feature-card>span:not(.feature-kicker){font-size:23px}
  .feature-card small{font-size:16.5px}
  .tool-heading h2 span{font-size:20px}
}
/* Critical: inactive pages must stay hidden. */
.page:not(.active){display:none!important}


/* Classical Guitar V1.0 */
.home-grid{grid-template-columns:repeat(3,1fr)}
.practice-bg{background-position:76% center}
.practice-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px;padding:6px;background:rgba(247,244,237,.72);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(12px)}
.practice-tab{border:0;background:transparent;border-radius:13px;padding:13px 14px;font-weight:750}
.practice-tab.active{background:#657c6e;color:white;box-shadow:0 6px 16px rgba(70,92,80,.18)}
.practice-pane{display:none}.practice-pane.active{display:block}
.preset-panel,.integration-panel,.timer-panel{padding:22px}.integration-panel{margin-top:14px}.integration-panel h3,.preset-panel h3{margin:0 0 6px;font-size:20px;color:var(--ink-strong)}
.integration-panel p{margin:0;color:#718078;line-height:1.7}
.panel-heading-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.compact-btn{padding:10px 13px;white-space:nowrap}
.preset-list{display:grid;gap:10px}.preset-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 15px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.62)}
.preset-info strong{display:block;font-size:17px;color:var(--ink-strong)}.preset-info span{display:block;margin-top:4px;font-size:14px;color:#7b8981}.preset-actions{display:flex;align-items:center;gap:7px}.preset-play,.preset-delete{border:1px solid var(--line);background:rgba(255,255,255,.78);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}.preset-play{background:rgba(104,130,115,.12);color:#5f7769;font-weight:800}.preset-delete{color:#9a7d74}
.timer-panel{text-align:center}.timer-label{display:block;text-align:left;font-size:14px;font-weight:700;color:#65736b}.timer-label input{display:block;width:100%;margin-top:8px;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72);font-size:17px}.timer-display{font:500 clamp(60px,12vw,104px)/1 var(--serif);color:var(--ink-strong);margin:30px 0 24px;font-variant-numeric:tabular-nums}.timer-actions{display:flex;justify-content:center;gap:12px}.timer-summary{margin:22px 0 12px;padding:14px;border-radius:15px;background:rgba(129,153,139,.09);display:flex;justify-content:space-between;align-items:center}.timer-summary strong{font:600 20px var(--serif)}.return-book-btn{margin-top:14px;width:100%}.practice-context{margin-top:14px;padding:12px 14px;border-radius:13px;background:rgba(129,153,139,.10);font-size:14px;line-height:1.6}
@media(max-width:1000px){.home-grid{grid-template-columns:1fr 1fr}.home-grid .feature-card:last-child{grid-column:1/-1}}
@media(max-width:820px){
  .home-grid{grid-template-columns:1fr;gap:14px}.home-grid .feature-card:last-child{grid-column:auto}
  .hero-card{max-width:540px;margin-left:auto;margin-right:auto}
  .hero-image{width:100%;height:auto;object-fit:contain}
  .feature-card{min-height:158px}
  .practice-tabs{margin-top:2px}.practice-tab{font-size:17px;min-height:50px}
  .preset-panel,.integration-panel,.timer-panel{padding:20px 18px}
  .preset-info strong{font-size:18px}.preset-info span{font-size:15px}.preset-play,.preset-delete{width:44px;height:44px}
  .timer-label{font-size:16px}.timer-label input{font-size:18px;min-height:52px}.timer-display{font-size:82px}.timer-actions .play-btn,.timer-actions .secondary-btn{min-height:56px;font-size:18px}
}
@media(max-width:430px){.timer-display{font-size:70px}.panel-heading-row{align-items:flex-start}.integration-panel p{font-size:15px}}


/* Classical Guitar V1.1 — horizontal hero, pure guitar icon, richer preset management */
.hero-card{max-width:1000px;margin:0 auto;overflow:hidden;border-radius:28px}
.hero-image{width:100%;height:auto;display:block;object-fit:cover;object-position:center center}
@media(max-width:820px){
  .page-home{padding-top:20px}
  .hero-card{max-width:100%;border-radius:24px}
  .hero-image{width:100%;height:auto}
  .intro-strip{padding-top:14px}
  .home-grid{margin-top:18px}
}
.preset-row{grid-template-columns:1fr auto;align-items:flex-start;padding:16px 16px}
.preset-info strong{font-size:18px}
.preset-info span{display:block;margin-top:4px;font-size:14px;color:#708077;line-height:1.45}
.preset-info .preset-meta{font-size:13px;color:#877f6f}
.preset-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.preset-play,.preset-delete,.preset-edit{border:1px solid var(--line);background:rgba(255,255,255,.82);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.preset-play{background:rgba(104,130,115,.12);color:#5f7769;font-weight:800}
.preset-edit{color:#7a7f87}
.preset-delete{color:#9a7d74}
@media(max-width:820px){
  .preset-play,.preset-delete,.preset-edit{width:44px;height:44px}
  .preset-info strong{font-size:18px}
  .preset-info span{font-size:15px}
  .preset-info .preset-meta{font-size:14px}
}


/* Classical Guitar V1.2 — clearly horizontal homepage hero + always-visible preset controls */
.guitar-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  align-items:center;
  min-height:360px;
  aspect-ratio:16/7.2;
  overflow:hidden;
  padding:36px 38px 34px 48px;
  background:
    radial-gradient(circle at 76% 35%, rgba(192,211,201,.24), transparent 32%),
    radial-gradient(circle at 18% 18%, rgba(233,221,197,.32), transparent 32%),
    linear-gradient(135deg,#faf7f0 0%,#f4f1e9 55%,#edf1ec 100%);
  border:1px solid rgba(80,95,87,.11);
  box-shadow:var(--shadow);
}
.guitar-hero:before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(ellipse at 10% 85%,rgba(157,178,163,.18),transparent 26%),
    radial-gradient(ellipse at 88% 12%,rgba(174,194,205,.18),transparent 30%);
}
.hero-copy{position:relative;z-index:2;align-self:center;padding-right:16px}
.hero-copy h1{margin:0;color:var(--ink-strong);font:500 clamp(48px,6vw,82px)/.96 var(--serif);letter-spacing:-.03em}
.hero-copy h1 span{display:block}
.hero-edition{margin-top:18px;font-size:clamp(16px,1.8vw,24px);letter-spacing:.24em;font-weight:650;color:#6c8175}
.hero-divider{width:min(280px,68%);height:1px;margin:20px 0 18px;background:linear-gradient(90deg,rgba(112,137,123,.55),rgba(112,137,123,.08))}
.hero-copy p{margin:0;max-width:360px;font:500 clamp(17px,1.6vw,22px)/1.55 var(--serif);color:#53655c}
.hero-art{position:relative;z-index:1;height:100%;min-height:300px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.hero-art:after{content:'';position:absolute;left:6%;right:2%;bottom:4%;height:12%;border-radius:50%;background:rgba(99,96,77,.09);filter:blur(14px)}
.hero-art img{position:relative;z-index:2;display:block;max-height:100%;height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(73,70,57,.10))}

.preset-actions{display:grid;grid-template-columns:repeat(3,auto);gap:8px;align-items:center}
.preset-play,.preset-edit,.preset-delete{width:auto!important;height:40px!important;border-radius:999px!important;padding:0 12px!important;font-size:14px!important;line-height:1!important}
.preset-play:after{content:' 套用'}
.preset-edit:after{content:' 編輯'}
.preset-delete:after{content:' 刪除'}
.preset-delete{background:rgba(163,104,93,.07)!important}

@media(max-width:820px){
  .page-home{padding-top:16px}
  .guitar-hero{grid-template-columns:1.08fr .92fr;min-height:0;aspect-ratio:16/8.7;padding:24px 20px 22px 26px;border-radius:22px}
  .hero-copy h1{font-size:clamp(42px,10vw,62px)}
  .hero-edition{font-size:15px;letter-spacing:.18em;margin-top:12px}
  .hero-divider{margin:14px 0 12px;width:74%}
  .hero-copy p{font-size:16px;line-height:1.45;max-width:250px}
  .hero-art{min-height:220px}
  .hero-art img{height:112%;max-height:none;transform:translateY(6%)}
  .intro-strip{padding-top:12px}
  .home-grid{margin-top:16px}
  .preset-row{grid-template-columns:1fr;gap:12px}
  .preset-actions{display:flex;justify-content:flex-start;gap:8px}
  .preset-play,.preset-edit,.preset-delete{height:42px!important;padding:0 14px!important;font-size:14px!important}
}
@media(max-width:430px){
  .guitar-hero{aspect-ratio:16/9.2;padding:20px 14px 18px 20px}
  .hero-copy h1{font-size:40px}
  .hero-edition{font-size:13px;letter-spacing:.16em}
  .hero-copy p{font-size:14.5px;max-width:205px}
  .hero-art{min-height:190px}
  .hero-art img{height:116%;transform:translateY(9%)}
}


/* V1.2.2 home hero full image + larger preset icons */
.hero-full-card{position:relative;overflow:hidden;border-radius:24px;background:#f5f1e8;box-shadow:var(--shadow);border:1px solid rgba(80,95,87,.11);aspect-ratio:16/9;margin:0 auto}
.hero-full-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}

.preset-panel h3{font-size:34px}
.preset-panel .hint{font-size:17px;line-height:1.55}
.preset-row{padding:18px 18px;gap:14px}
.preset-info strong{font-size:20px!important;line-height:1.25}
.preset-info span{font-size:16px!important;line-height:1.5!important;margin-top:6px!important}
.preset-info .preset-meta{font-size:16px!important;color:#7d7669!important}
.preset-actions{display:flex!important;align-items:center;gap:10px!important;justify-content:flex-end}
.preset-play,.preset-edit,.preset-delete{width:50px!important;height:50px!important;padding:0!important;border-radius:50%!important;font-size:22px!important;line-height:1!important;display:grid!important;place-items:center!important}
.preset-play:after,.preset-edit:after,.preset-delete:after{content:none!important}
.preset-play{font-size:21px!important}
.preset-edit{font-size:23px!important;font-weight:700!important}
.preset-delete{font-size:28px!important}
@media(max-width:820px){
  .page-home{padding-top:18px}
  .hero-full-card{border-radius:22px;aspect-ratio:16/9}
  .intro-strip{padding-top:12px}
  .home-grid{margin-top:16px}
  .preset-panel h3{font-size:28px}
  .preset-panel .hint{font-size:16px}
  .preset-row{grid-template-columns:1fr!important;gap:12px!important;padding:16px 16px!important}
  .preset-actions{justify-content:flex-start!important}
  .preset-play,.preset-edit,.preset-delete{width:54px!important;height:54px!important;font-size:24px!important}
  .preset-delete{font-size:30px!important}
}


/* V1.2.3 — home banner full-width, preset actions on right, smaller circles larger icons */
.hero-banner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);align-items:center;min-height:350px;aspect-ratio:16/7.4;overflow:hidden;padding:34px 34px 30px 44px;background:radial-gradient(circle at 76% 35%, rgba(192,211,201,.24), transparent 32%), radial-gradient(circle at 18% 18%, rgba(233,221,197,.32), transparent 32%), linear-gradient(135deg,#faf7f0 0%,#f4f1e9 55%,#edf1ec 100%);border:1px solid rgba(80,95,87,.11);box-shadow:var(--shadow);position:relative}
.hero-banner:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.58;background:radial-gradient(ellipse at 10% 85%,rgba(157,178,163,.18),transparent 26%),radial-gradient(ellipse at 88% 12%,rgba(174,194,205,.18),transparent 30%)}
.hero-banner .hero-copy{position:relative;z-index:2;align-self:center;padding-right:16px}
.hero-banner .hero-copy h1{margin:0;color:var(--ink-strong);font:500 clamp(48px,6vw,82px)/.96 var(--serif);letter-spacing:-.03em}
.hero-banner .hero-copy h1 span{display:block}
.hero-banner .hero-edition{margin-top:18px;font-size:clamp(16px,1.8vw,24px);letter-spacing:.24em;font-weight:650;color:#6c8175}
.hero-banner .hero-divider{width:min(280px,68%);height:1px;margin:20px 0 18px;background:linear-gradient(90deg,rgba(112,137,123,.55),rgba(112,137,123,.08))}
.hero-banner .hero-copy p{margin:0;max-width:360px;font:500 clamp(17px,1.6vw,22px)/1.55 var(--serif);color:#53655c}
.hero-banner .hero-art{position:relative;z-index:1;height:100%;min-height:280px;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.hero-banner .hero-art:after{content:'';position:absolute;left:4%;right:2%;bottom:7%;height:10%;border-radius:50%;background:rgba(99,96,77,.08);filter:blur(14px)}
.hero-banner .hero-art img{position:relative;z-index:2;display:block;width:auto;max-width:100%;max-height:95%;height:auto;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(73,70,57,.10))}

.preset-row{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;padding:14px 16px!important;min-height:unset!important}
.preset-info strong{font-size:20px!important;line-height:1.2!important}.preset-info span{font-size:16px!important;line-height:1.38!important;margin-top:6px!important}.preset-info .preset-meta{font-size:15px!important;line-height:1.35!important}
.preset-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-shrink:0}
.preset-play,.preset-edit,.preset-delete{width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:grid!important;place-items:center!important}
.preset-play::before,.preset-edit::before,.preset-delete::before{display:block;line-height:1;color:currentColor}
.preset-play::before{content:'▶';font-size:20px}
.preset-edit::before{content:'✎';font-size:22px;font-weight:700}
.preset-delete::before{content:'×';font-size:28px}
.preset-play:after,.preset-edit:after,.preset-delete:after{content:none!important}
.preset-delete{background:rgba(163,104,93,.07)!important}
@media(max-width:820px){
  .hero-banner{grid-template-columns:minmax(0,1.02fr) minmax(150px,.98fr);min-height:0;aspect-ratio:16/8.8;padding:22px 18px 18px 24px;border-radius:22px}
  .hero-banner .hero-copy h1{font-size:clamp(40px,10vw,58px)}
  .hero-banner .hero-edition{font-size:14px;letter-spacing:.17em;margin-top:12px}
  .hero-banner .hero-divider{margin:14px 0 12px;width:74%}
  .hero-banner .hero-copy p{font-size:15px;line-height:1.42;max-width:220px}
  .hero-banner .hero-art{min-height:180px}
  .hero-banner .hero-art img{max-height:92%;height:auto;transform:none}
  .preset-row{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:10px!important;padding:12px 14px!important}
  .preset-actions{justify-content:flex-end!important;gap:8px!important}
  .preset-play,.preset-edit,.preset-delete{width:38px!important;height:38px!important}
  .preset-play::before{font-size:19px}.preset-edit::before{font-size:21px}.preset-delete::before{font-size:26px}
}
@media(max-width:430px){
  .hero-banner{aspect-ratio:16/9;padding:18px 14px 16px 20px}
  .hero-banner .hero-copy h1{font-size:38px}
  .hero-banner .hero-edition{font-size:13px;letter-spacing:.15em}
  .hero-banner .hero-copy p{font-size:14px;max-width:190px}
  .hero-banner .hero-art{min-height:160px}
  .preset-info strong{font-size:18px!important}
  .preset-info span{font-size:15px!important}
  .preset-info .preset-meta{font-size:14px!important}
}


/* V1.2.4 — home hero becomes true full-width banner, preset icons vertically centered */
.hero-banner{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(210px,.94fr);align-items:stretch;min-height:320px;aspect-ratio:16/7.35;overflow:hidden;padding:28px 24px 22px 32px;background:radial-gradient(circle at 78% 28%, rgba(195,210,203,.27), transparent 28%),radial-gradient(circle at 16% 16%, rgba(234,224,202,.35), transparent 30%),linear-gradient(135deg,#faf7f0 0%,#f5f1e8 55%,#eef1ec 100%);border:1px solid rgba(80,95,87,.11);box-shadow:var(--shadow);position:relative}
.hero-banner:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 8% 86%,rgba(177,192,181,.12),transparent 28%),radial-gradient(ellipse at 92% 12%,rgba(188,204,213,.12),transparent 28%);pointer-events:none}
.hero-banner .hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding-right:10px}
.hero-banner .hero-copy h1{margin:0;color:var(--ink-strong);font:500 clamp(50px,6vw,82px)/.96 var(--serif);letter-spacing:-.03em}
.hero-banner .hero-copy h1 span{display:block}
.hero-banner .hero-edition{margin-top:16px;font-size:clamp(16px,1.8vw,23px);letter-spacing:.22em;font-weight:650;color:#6c8175}
.hero-banner .hero-divider{width:min(220px,62%);height:1px;margin:18px 0 16px;background:linear-gradient(90deg,rgba(112,137,123,.52),rgba(112,137,123,.08))}
.hero-banner .hero-copy p{margin:0;max-width:330px;font:500 clamp(17px,1.6vw,22px)/1.5 var(--serif);color:#53655c}
.hero-banner .hero-art{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden}
.hero-banner .hero-art:after{content:'';position:absolute;left:18%;right:2%;bottom:6%;height:12%;border-radius:50%;background:rgba(99,96,77,.08);filter:blur(14px)}
.hero-banner .hero-art img{position:relative;z-index:2;display:block;width:auto;height:118%;max-height:none;max-width:100%;object-fit:contain;transform:translateX(4%) translateY(3%);filter:drop-shadow(0 14px 18px rgba(73,70,57,.10))}

.preset-row{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:12px!important;padding:12px 16px!important}
.preset-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;align-self:center!important;margin-top:0!important}
.preset-play,.preset-edit,.preset-delete{position:relative!important;width:40px!important;height:40px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;line-height:1!important;vertical-align:middle!important;font-size:0!important;flex:0 0 40px!important}
.preset-play::before,.preset-edit::before,.preset-delete::before{content:none!important}
.preset-play{font-size:19px!important;font-weight:800!important}
.preset-edit{font-size:21px!important;font-weight:700!important;color:#7d7f8c!important}
.preset-delete{font-size:28px!important}
.preset-play{padding-left:2px!important}
.preset-delete{padding-bottom:1px!important}
.preset-info strong{font-size:20px!important;line-height:1.2!important}.preset-info span{font-size:16px!important;line-height:1.35!important;margin-top:5px!important}.preset-info .preset-meta{font-size:15px!important;line-height:1.33!important}
@media(max-width:820px){
  .hero-banner{grid-template-columns:minmax(0,1.08fr) minmax(150px,.92fr);aspect-ratio:16/8.9;min-height:0;padding:20px 14px 16px 20px;border-radius:22px}
  .hero-banner .hero-copy h1{font-size:clamp(40px,10vw,58px)}
  .hero-banner .hero-edition{font-size:13.5px;letter-spacing:.16em;margin-top:12px}
  .hero-banner .hero-divider{width:70%;margin:14px 0 12px}
  .hero-banner .hero-copy p{font-size:14.8px;line-height:1.42;max-width:190px}
  .hero-banner .hero-art img{height:122%;transform:translateX(7%) translateY(7%)}
  .preset-row{padding:12px 14px!important;gap:10px!important}
  .preset-actions{gap:8px!important;justify-content:flex-end!important}
  .preset-play,.preset-edit,.preset-delete{width:38px!important;height:38px!important;flex-basis:38px!important}
  .preset-play{font-size:18px!important}.preset-edit{font-size:20px!important}.preset-delete{font-size:26px!important}
}
@media(max-width:430px){
  .hero-banner{aspect-ratio:16/9.2;padding:18px 12px 14px 18px}
  .hero-banner .hero-copy h1{font-size:38px}
  .hero-banner .hero-copy p{max-width:180px;font-size:14px}
  .hero-banner .hero-art img{height:126%;transform:translateX(10%) translateY(9%)}
}


/* V1.2.5 — single, complete horizontal hero artwork like the mandolin/guitar edition */
.hero-image-banner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  background:#f5f1e8!important;
  border:1px solid rgba(80,95,87,.11)!important;
  box-shadow:var(--shadow)!important;
}
.hero-banner-image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f5f1e8!important;
}
@media(max-width:820px){
  .page-home{padding-top:16px!important}
  .hero-image-banner{border-radius:22px!important}
  .hero-banner-image{width:100%!important;height:auto!important}
  .intro-strip{padding-top:13px!important}
}
@media(max-width:430px){
  .page-home{padding-top:16px!important}
  .hero-image-banner{border-radius:20px!important}
}

/* V1.2.6 — add small home feature icons without overpowering the cards */
.feature-card--icon{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  align-items:center;
  column-gap:16px;
  padding:22px 24px 22px 18px;
  min-height:146px;
}
.feature-card--icon:after{
  right:18px;
  top:50%;
  transform:translateY(-50%);
}
.feature-card--icon:hover:after{transform:translateY(-50%) translateX(3px)}
.feature-icon-badge{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(247,248,244,.96), rgba(239,243,239,.96));
  border:1px solid rgba(111,130,118,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 3px 12px rgba(80,95,87,.06);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.feature-icon-badge img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}
.feature-card--icon .feature-content{
  min-width:0;
  padding-right:44px;
}
.feature-card--icon .feature-kicker{margin-bottom:7px}
.feature-card--icon strong{font-size:28px;line-height:1.04;padding-right:0}
.feature-card--icon>span:not(.feature-kicker){font-size:18px}
.feature-card--icon .feature-content>span:not(.feature-kicker){display:block;margin-top:3px;font-weight:650}
.feature-card--icon small{margin-top:9px;padding-right:0;font-size:15px;line-height:1.45}

@media (max-width: 820px){
  .feature-card--icon{
    grid-template-columns:56px minmax(0,1fr);
    column-gap:14px;
    min-height:136px;
    padding:20px 20px 20px 16px;
  }
  .feature-icon-badge{width:50px;height:50px}
  .feature-icon-badge img{width:32px;height:32px}
  .feature-card--icon .feature-content{padding-right:42px}
  .feature-card--icon strong{font-size:26px}
  .feature-card--icon .feature-content>span:not(.feature-kicker){font-size:17px}
  .feature-card--icon small{font-size:14px;line-height:1.4}
}

@media (max-width: 480px){
  .feature-card--icon{
    grid-template-columns:54px minmax(0,1fr);
    column-gap:14px;
    padding:18px 18px 18px 14px;
    min-height:132px;
  }
  .feature-icon-badge{width:48px;height:48px}
  .feature-icon-badge img{width:30px;height:30px}
  .feature-card--icon:after{right:16px;width:38px;height:38px;font-size:20px}
  .feature-card--icon .feature-content{padding-right:38px}
  .feature-card--icon strong{font-size:24px}
  .feature-card--icon .feature-content>span:not(.feature-kicker){font-size:16.5px}
  .feature-card--icon small{font-size:13.5px}
}

/* V1.2.7 — home feature icons larger and without circular badge */
.feature-card--icon{
  grid-template-columns:68px minmax(0,1fr);
  column-gap:18px;
  padding:22px 24px 22px 20px;
}
.feature-icon-badge{
  width:56px;
  height:56px;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  display:grid;
  place-items:center;
}
.feature-icon-badge img{
  width:46px;
  height:46px;
  object-fit:contain;
  display:block;
}
.feature-card--icon .feature-content{padding-right:44px}

@media (max-width: 820px){
  .feature-card--icon{
    grid-template-columns:64px minmax(0,1fr);
    column-gap:16px;
    padding:20px 20px 20px 18px;
  }
  .feature-icon-badge{width:54px;height:54px}
  .feature-icon-badge img{width:42px;height:42px}
}

@media (max-width: 480px){
  .feature-card--icon{
    grid-template-columns:62px minmax(0,1fr);
    column-gap:15px;
    padding:18px 18px 18px 16px;
  }
  .feature-icon-badge{width:52px;height:52px}
  .feature-icon-badge img{width:40px;height:40px}
  .feature-card--icon .feature-content{padding-right:38px}
}

/* V1.2.8 — searchable presets + per-preset collapsible history */
.preset-toolbar{margin:16px 0 12px}
.preset-search-wrap{display:flex;align-items:center;gap:10px;width:100%;padding:0 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.72)}
.preset-search-wrap>span{font-size:24px;color:#829087;line-height:1}
.preset-search-wrap input{width:100%;min-height:46px;border:0;background:transparent;outline:0;font-size:16px;color:var(--ink-strong)}
.preset-search-wrap input::placeholder{color:#99a39d}
.preset-empty{padding:26px 12px;text-align:center;color:#8b968f;font-size:15px}
.preset-info .preset-meta{font-size:14px!important;color:#8a8274!important}

.history-panel{margin-top:16px;padding:0 22px 18px}
.history-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0;cursor:pointer;color:var(--ink-strong);font-weight:800;font-size:19px}
.history-panel>summary::-webkit-details-marker{display:none}
.history-panel>summary:after{content:'＋';order:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(112,137,123,.10);font-size:21px;color:#657a6f}
.history-panel[open]>summary:after{content:'−'}
.history-panel>summary small{margin-left:auto;font-size:13px;font-weight:600;color:#89958e}
.history-panel-content{border-top:1px solid var(--line);padding-top:15px}
.history-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.history-title-row strong{font-size:18px;color:var(--ink-strong)}
.history-title-row p{margin:5px 0 0;font-size:13px;line-height:1.55;color:#7d8982}
.history-list{display:grid;gap:9px}
.history-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:13px 13px 13px 15px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.62)}
.history-main strong,.history-main span,.history-main small{display:block}
.history-main strong{font-size:15px;color:var(--ink-strong)}
.history-main span{margin-top:4px;font-size:15px;font-weight:700;color:#66776d}
.history-main small{margin-top:4px;font-size:12px;color:#929b95}
.history-delete{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(164,105,94,.06);color:#9e7b72;font-size:22px;display:grid;place-items:center;padding:0}
.history-empty{padding:20px 12px;text-align:center;color:#8a958e;font-size:14px;line-height:1.6}
.backup-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.import-label{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}

@media(max-width:820px){
  .preset-toolbar{margin:14px 0 10px}
  .preset-search-wrap input{min-height:50px;font-size:17px}
  .history-panel{padding:0 18px 16px;border-radius:24px}
  .history-panel>summary{font-size:21px;padding:19px 0}
  .history-panel>summary:after{width:38px;height:38px;font-size:24px}
  .history-panel>summary small{font-size:14px}
  .history-title-row strong{font-size:19px}
  .history-title-row p{font-size:14px}
  .history-row{padding:14px}
  .history-main strong{font-size:16px}.history-main span{font-size:16px}.history-main small{font-size:13px}
  .history-delete{width:38px;height:38px;font-size:24px}
}

/* V1.2.9 — Timer becomes a recorded practice log; Preset BPM is current practice speed */
.timer-form-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;text-align:left}
.timer-label select,.timer-label textarea{display:block;width:100%;margin-top:8px;padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72);font-size:17px;color:var(--ink)}
.timer-label textarea{resize:vertical;min-height:72px;line-height:1.5;font-family:var(--sans)}
.timer-note-label{display:block;margin-top:14px;text-align:left}
.optional-label{font-size:.82em;font-weight:500;color:#909a94;margin-left:4px}
.timer-actions-main{flex-wrap:wrap}
.timer-save-btn{background:rgba(104,130,115,.12);border-color:rgba(96,119,106,.18);font-weight:750}
.timer-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left;background:transparent;padding:0;margin-top:20px}
.timer-summary-grid>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 15px;border-radius:15px;background:rgba(129,153,139,.09)}
.timer-summary-grid>div span{font-size:14px;color:#718078}
.timer-summary-grid>div strong{font:600 18px var(--serif);white-space:nowrap}
.timer-role-hint{margin-top:16px;text-align:left}
.timer-history-panel{margin-top:14px;padding:0 20px 18px}
.timer-history-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;font-weight:800;font-size:18px;cursor:pointer;color:var(--ink-strong)}
.timer-history-panel>summary::-webkit-details-marker{display:none}
.timer-history-panel>summary small{font-size:14px;font-weight:600;color:#859088}
.timer-history-content{border-top:1px solid var(--line);padding-top:12px}
.timer-history-list{display:grid;gap:9px}
.timer-history-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.58)}
.timer-history-main strong{display:block;font-size:17px;color:var(--ink-strong)}
.timer-history-main span{display:block;margin-top:4px;font-size:14px;color:#6f7e76}
.timer-history-main small{display:block;margin-top:5px;font-size:13px;color:#8a8f89;line-height:1.45}
.timer-history-main .timer-linked{color:#71897c}

@media(max-width:820px){
  .timer-form-grid{grid-template-columns:1fr;gap:12px}
  .timer-label select,.timer-label textarea{font-size:18px;min-height:52px}
  .timer-label textarea{min-height:82px}
  .timer-actions-main{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .timer-actions-main .play-btn{grid-column:1/-1;width:100%}
  .timer-actions-main .secondary-btn{width:100%;min-width:0}
  .timer-summary-grid{grid-template-columns:1fr;gap:9px}
  .timer-summary-grid>div span{font-size:16px}
  .timer-summary-grid>div strong{font-size:20px}
  .timer-history-panel{padding:0 18px 16px;border-radius:22px}
  .timer-history-panel>summary{font-size:20px;padding:19px 0}
  .timer-history-main strong{font-size:18px}
  .timer-history-main span{font-size:15px}
  .timer-history-main small{font-size:14px}
}

/* V1.3.0 — Timer mode, countdown, wake-lock hint, repeating alarm */
.timer-mode-block{margin:18px 0 4px;padding:16px;border:1px solid rgba(91,111,100,.11);border-radius:17px;background:rgba(251,249,244,.64);text-align:left}
.timer-mode-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#63746b;font-weight:700}
.timer-mode-heading small{font-weight:500;color:#87958e;font-size:12px;text-align:right}
.timer-mode-group{max-width:360px}
.countdown-controls{margin-top:14px;padding-top:14px;border-top:1px solid rgba(91,111,100,.10)}
.countdown-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.countdown-presets button{min-width:43px;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.68);color:#65776d;font-weight:700;font-size:15px}
.countdown-presets button.active{background:rgba(111,139,123,.16);border-color:rgba(92,121,104,.28);color:#4f695c}
.countdown-custom{display:flex;align-items:center;gap:9px;color:#65736b;font-size:14px;font-weight:700}
.countdown-custom input{width:76px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.82);font-size:16px;text-align:center}
.timer-alarm-banner{margin:-8px 0 20px;padding:16px;border-radius:16px;background:rgba(168,119,91,.11);border:1px solid rgba(160,107,76,.18);text-align:center}
.timer-alarm-banner strong{display:block;font:600 25px var(--serif);color:#8e624d;margin-bottom:5px}
.timer-alarm-banner span{display:block;color:#7d6d65;font-size:14px;line-height:1.5;margin-bottom:12px}
.timer-alarm-banner .play-btn{width:100%;max-width:300px;min-height:48px;background:#8b6d5e}
@media(max-width:600px){
  .timer-mode-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .timer-mode-heading small{text-align:left}
  .timer-mode-group{max-width:none;width:100%}
  .countdown-presets{gap:7px}
  .countdown-presets button{min-width:40px;height:38px;padding:0 9px}
}

/* V1.3.1 — timer-first layout and larger home typography */
.timer-panel{padding-top:24px}
.timer-meta-panel{margin-top:20px;border:1px solid rgba(80,95,87,.10);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(250,251,248,.42));padding:0 18px 16px;text-align:left}
.timer-meta-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0 16px;cursor:pointer;color:var(--ink-strong);font-weight:800;font-size:18px}
.timer-meta-panel>summary::-webkit-details-marker{display:none}
.timer-meta-panel>summary:after{content:'＋';width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(112,137,123,.10);color:#657a6f;font-size:22px;flex:0 0 auto}
.timer-meta-panel[open]>summary:after{content:'−'}
.timer-meta-panel>summary small{margin-left:auto;font-size:13px;font-weight:600;color:#89958e}
.timer-meta-panel .timer-form-grid{padding-top:2px}
.timer-meta-panel .timer-note-label{margin-top:14px}
.timer-label{font-size:15px}
.timer-label input,.timer-label select,.timer-label textarea{font-size:18px}
.feature-card--icon strong{font-size:30px}
.feature-card--icon .feature-content>span:not(.feature-kicker){font-size:19px}
.feature-card--icon small{font-size:15.5px;line-height:1.48}
.feature-card--icon .feature-kicker{font-size:13px;letter-spacing:.22em}
.intro-strip{font-size:18px}
@media (max-width: 820px){.feature-card--icon strong{font-size:30px}.feature-card--icon .feature-content>span:not(.feature-kicker){font-size:18px}.feature-card--icon small{font-size:15px}.timer-meta-panel{padding:0 16px 15px}.timer-meta-panel>summary{font-size:19px;padding:18px 0 15px}}
@media (max-width: 480px){.feature-card--icon{grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:20px 18px}.feature-icon-badge{width:40px;height:40px}.feature-icon-badge img{width:28px;height:28px}.feature-card--icon strong{font-size:28px;line-height:1.05}.feature-card--icon .feature-content>span:not(.feature-kicker){font-size:18px;margin-top:4px}.feature-card--icon small{font-size:15px;line-height:1.45}.intro-strip{font-size:17px;gap:12px;margin:14px auto 2px}.timer-meta-panel{margin-top:18px;padding:0 15px 14px;border-radius:20px}.timer-meta-panel>summary{font-size:18px;padding:16px 0 14px}.timer-meta-panel>summary small{font-size:13px}.timer-meta-panel>summary:after{width:36px;height:36px;font-size:24px}.timer-label{font-size:15px}.timer-label input,.timer-label select,.timer-label textarea{font-size:17px}}

/* V1.3.2 — compact home layout so hero + 3 cards fit on one mobile screen */
@media (max-width: 480px){
  .page-home{
    padding:10px 10px 18px!important;
  }
  .hero-image-banner{
    border-radius:20px!important;
  }
  .intro-strip{
    padding:10px 4px 0!important;
    gap:8px!important;
    font-size:14px!important;
    line-height:1.25!important;
    margin:10px auto 0!important;
  }
  .home-grid{
    gap:10px!important;
    margin-top:10px!important;
  }
  .feature-card--icon{
    grid-template-columns:34px minmax(0,1fr)!important;
    column-gap:12px!important;
    padding:15px 16px 15px 15px!important;
    min-height:118px!important;
    border-radius:22px!important;
  }
  .feature-icon-badge{
    width:34px!important;
    height:34px!important;
  }
  .feature-icon-badge img{
    width:24px!important;
    height:24px!important;
  }
  .feature-card--icon:after{
    right:14px!important;
    width:34px!important;
    height:34px!important;
    font-size:18px!important;
  }
  .feature-card--icon .feature-content{
    padding-right:34px!important;
  }
  .feature-card--icon .feature-kicker{
    font-size:12px!important;
    margin-bottom:4px!important;
    letter-spacing:.18em!important;
  }
  .feature-card--icon strong{
    font-size:26px!important;
    line-height:1.02!important;
  }
  .feature-card--icon .feature-content>span:not(.feature-kicker){
    font-size:19px!important;
    margin-top:2px!important;
    line-height:1.15!important;
  }
  .feature-card--icon small{
    font-size:14px!important;
    line-height:1.34!important;
    margin-top:7px!important;
  }
}

@media (min-width: 481px) and (max-width: 820px){
  .page-home{padding:12px 12px 22px!important}
  .home-grid{gap:12px!important;margin-top:12px!important}
  .feature-card--icon{min-height:126px!important;padding:17px 18px!important}
  .feature-card--icon strong{font-size:28px!important}
  .feature-card--icon .feature-content>span:not(.feature-kicker){font-size:19px!important}
  .feature-card--icon small{font-size:14.5px!important;line-height:1.38!important;margin-top:8px!important}
}

/* V1.3.3 — fuller home cards, collapsible Presets list, Google Drive sync */
.preset-list-panel{padding:0 22px 18px}
.preset-list-panel>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:19px 0;cursor:pointer;color:var(--ink-strong);font-weight:800;font-size:19px}
.preset-list-panel>summary::-webkit-details-marker{display:none}
.preset-list-panel>summary:after{content:'＋';order:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(112,137,123,.10);font-size:21px;color:#657a6f;flex:0 0 auto}
.preset-list-panel[open]>summary:after{content:'−'}
.preset-list-panel>summary small{margin-left:auto;font-size:13px;font-weight:600;color:#89958e}
.preset-list-content{border-top:1px solid var(--line);padding-top:14px}
.preset-list-actions{align-items:center}
.preset-list-actions .hint{margin:0}

.integration-panel{margin-top:14px}
.drive-sync-box{margin-top:14px;padding:16px;border-radius:17px;background:rgba(129,153,139,.07);border:1px solid rgba(98,119,107,.10)}
.drive-client-label{display:block;font-size:14px;font-weight:700;color:#65736b;text-align:left}
.drive-client-label input{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.78);font-size:15px;color:var(--ink-strong)}
.drive-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.drive-actions .play-btn,.drive-actions .secondary-btn{min-height:44px;padding:0 16px}
.drive-status{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.55);font-size:14px;color:#68766e;text-align:left}
.drive-status[data-state="ok"]{background:rgba(111,153,124,.12);color:#587461}
.drive-status[data-state="error"]{background:rgba(172,112,98,.10);color:#8f6258}
.drive-status[data-state="warn"]{background:rgba(182,151,92,.12);color:#806e47}
.drive-status[data-state="syncing"]{background:rgba(111,136,153,.10);color:#5e7180}
.backup-panel{margin-top:14px;border-top:1px solid var(--line);padding-top:2px}
.backup-panel>summary{cursor:pointer;padding:14px 0 8px;font-weight:700;color:#6d7b73}
.backup-panel .backup-actions{margin-top:8px}

/* use the available mobile height: taller cards + larger type */
@media (max-width:480px){
  .home-grid{gap:11px!important;margin-top:11px!important}
  .feature-card--icon{
    grid-template-columns:40px minmax(0,1fr)!important;
    column-gap:14px!important;
    padding:18px 17px 18px 16px!important;
    min-height:136px!important;
    border-radius:22px!important;
  }
  .feature-icon-badge{width:40px!important;height:40px!important}
  .feature-icon-badge img{width:29px!important;height:29px!important}
  .feature-card--icon .feature-content{padding-right:38px!important}
  .feature-card--icon .feature-kicker{font-size:13px!important;margin-bottom:5px!important;letter-spacing:.19em!important}
  .feature-card--icon strong{font-size:30px!important;line-height:1.03!important}
  .feature-card--icon .feature-content>span:not(.feature-kicker){font-size:20px!important;margin-top:3px!important;line-height:1.16!important}
  .feature-card--icon small{font-size:15.5px!important;line-height:1.38!important;margin-top:8px!important}
  .feature-card--icon:after{right:14px!important;width:36px!important;height:36px!important;font-size:20px!important}
  .preset-list-panel{padding:0 16px 15px}
  .preset-list-panel>summary{font-size:19px;padding:17px 0}
  .preset-list-panel>summary small{font-size:13px}
  .preset-list-panel>summary:after{width:36px;height:36px;font-size:24px}
  .drive-sync-box{padding:14px}
  .drive-actions{display:grid;grid-template-columns:1fr 1fr}
  .drive-actions #googleConnectBtn{grid-column:1/-1}
  .drive-client-label input{font-size:14px}
}

@media (min-width:481px) and (max-width:820px){
  .feature-card--icon{min-height:142px!important;padding:20px 20px!important}
  .feature-card--icon strong{font-size:32px!important}
  .feature-card--icon .feature-content>span:not(.feature-kicker){font-size:20px!important}
  .feature-card--icon small{font-size:16px!important}
}

/* V1.3.4 — simplified Google Drive sign-in */
.drive-sync-simple{display:grid;gap:12px}
.google-one-tap{width:100%;min-height:52px;font-size:17px}
.google-settings-panel{border-top:1px solid var(--line);margin-top:2px;padding-top:2px;text-align:left}
.google-settings-panel>summary{list-style:none;cursor:pointer;padding:12px 2px 8px;color:#7c8881;font-size:14px;font-weight:700}
.google-settings-panel>summary::-webkit-details-marker{display:none}
.google-settings-panel>summary:after{content:' ＋';color:#87958d}
.google-settings-panel[open]>summary:after{content:' −'}
.google-settings-panel .drive-client-label{display:block;margin-top:8px}
.google-settings-panel .drive-client-label input{width:100%;margin-top:7px}
.compact-drive-actions{margin-top:10px}
@media(max-width:480px){.google-one-tap{min-height:54px;font-size:18px}.google-settings-panel>summary{font-size:15px}}

/* Standalone Classical Guitar v1.4.0 — tuner sensitivity */
.tuner-sensitivity{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);text-align:left;
}
.tuner-sensitivity h3{margin:0}
.tuner-sensitivity .hint{margin-top:4px}
@media(max-width:820px){
  .tuner-sensitivity{align-items:flex-start;flex-direction:column;gap:12px}
  .tuner-sensitivity .segmented{width:100%}
  .tuner-sensitivity .segmented button{flex:1}
}