:root{--ink:#404356;--muted:#797b8b;--paper:#fffaf2;--white:#fff;--stroke:#eee8e4;--peach:#fff1dc;--yellow:#ffe2a0;--coral:#ff8292;--hot:#f56e82;--mint:#80d9c0;--blue:#8bc7f3;--lilac:#c7b0ee;--shadow:0 20px 55px rgba(117,89,80,.09)}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-rounded,"Hiragino Maru Gothic ProN","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;line-height:1.6}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #4486c1;outline-offset:4px}a{color:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .shell{max-width:1050px;margin:0 auto;padding:0 24px 40px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 0 14px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:18px;font-weight:900;letter-spacing:-.6px}.brandmark{width:41px;height:41px;border-radius:14px;border:3px solid white;background:#ff8292;display:grid;place-items:center;box-shadow:0 5px 14px #ff82924a;transform:rotate(-7deg);font-size:23px}.top-actions{display:flex;align-items:center;gap:8px}.phase{font-size:11px;letter-spacing:.05em;color:#925868;background:#ffe7ea;padding:6px 10px;border-radius:999px;font-weight:900}.back{border:1px solid var(--stroke);background:white;border-radius:999px;text-decoration:none;padding:9px 15px;font-size:12px;font-weight:800;white-space:nowrap}.back:hover{border-color:var(--coral)}

.workspace{display:flex;flex-direction:column;max-width:860px;gap:18px;margin:0 auto}.workspace>.player,.workspace>.side{width:100%}.panel{background:#fff;border:1px solid #f0ebe7;border-radius:27px;box-shadow:var(--shadow)}.player{padding:24px 27px 27px;overflow:hidden;position:relative}.player::before{content:"";position:absolute;right:-55px;top:-90px;width:210px;height:210px;border-radius:50%;background:#fff4e9;pointer-events:none}.player-inner{position:relative;z-index:1}.player-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.player-heading h1{font-size:17px;font-weight:950;margin:0;line-height:1.45}.subpill{display:flex;align-items:center;gap:7px;border-radius:999px;background:#f3f9fb;color:#50798a;padding:7px 11px;font-size:11px;font-weight:900}.subpill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#8bc7f3}.subpill.on{background:#e4f8ec;color:#438667}.subpill.on i{background:#66c9a8;animation:twinkle 1.3s infinite}
.tempo-box{background:linear-gradient(135deg,#fff1dc 0%,#fff8ed 54%,#ffeaf0 100%);border:1px solid #ffe9d7;border-radius:24px;margin-top:19px;padding:20px 14px 23px;text-align:center}.tempo-caption{font-size:11px;color:#a5795c;font-weight:900;letter-spacing:.15em}.bpm-adjust{margin:4px auto 0;display:flex;align-items:center;justify-content:center;gap:13px;max-width:465px}.bpm-control{width:57px;height:57px;flex:0 0 57px;border-radius:18px;background:white;border:2px solid #f3e2d5;box-shadow:0 4px 0 #f4e5dc;color:var(--ink);font-weight:900;font-size:30px;display:grid;place-items:center;line-height:1;transition:transform .1s}.bpm-control:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #f4e5dc}.bpm-number{min-width:0;flex:1;max-width:223px;display:flex;flex-direction:column;align-items:center}.bpm-number input{display:block;width:100%;border:0;outline:0;background:transparent;font-size:clamp(58px,9vw,88px);font-weight:950;text-align:center;letter-spacing:-.07em;color:var(--ink);line-height:1.05;appearance:textfield;-moz-appearance:textfield;padding:0}.bpm-number input::-webkit-inner-spin-button,.bpm-number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-number input:focus-visible{background:#ffffff80;border-radius:12px;outline:2px solid var(--blue)}.bpm-number label{font-size:11px;font-weight:900;color:#9c7567;letter-spacing:.14em;margin-top:-2px}.bpm-help{margin:9px 0 0;color:#a07c6a;font-size:11px;font-weight:750}
.bpm-slider-area{max-width:570px;margin:16px auto 0;padding:0 14px}.bpm-slider-label{display:block;text-align:left;color:#8a665a;font-weight:850;font-size:12px;margin:0 0 4px}.bpm-slider{display:block;width:100%;height:40px;padding:0;margin:0;cursor:pointer;background:transparent;accent-color:var(--hot);-webkit-appearance:none;appearance:none;touch-action:pan-y}.bpm-slider::-webkit-slider-runnable-track{height:10px;border-radius:100px;background:linear-gradient(to right,var(--coral) 0%,var(--coral) var(--track-progress,40%),#f3dcd7 var(--track-progress,40%),#f3dcd7 100%)}.bpm-slider::-moz-range-track{height:10px;border-radius:100px;background:linear-gradient(to right,var(--coral) 0%,var(--coral) var(--track-progress,40%),#f3dcd7 var(--track-progress,40%),#f3dcd7 100%)}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-10px;border:5px solid white;border-radius:50%;background:var(--hot);box-shadow:0 2px 0 #efabb0,0 2px 12px #9b687a33}.bpm-slider::-moz-range-thumb{width:22px;height:22px;border:5px solid white;border-radius:50%;background:var(--hot);box-shadow:0 2px 0 #efabb0,0 2px 12px #9b687a33}.bpm-slider:focus-visible{outline:3px solid #4486c1;outline-offset:3px;border-radius:20px}.bpm-slider-markers{display:flex;justify-content:space-between;color:#947e78;font-size:11px;font-weight:900;line-height:1.4}.bpm-slider-markers small{font-size:10px;font-weight:650}
.beats-wrap{text-align:center;margin-top:25px}.beats-title{font-size:12px;font-weight:850;color:var(--muted);margin:0 0 12px}.beatline{display:flex;justify-content:center;align-items:center;gap:14px}.beat-dot{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:#f5f2f0;color:#a5a4a8;font-weight:900;font-size:15px;border:2px solid transparent;transition:background .07s,border-color .07s,transform .07s}.beat-dot:first-child{background:#fff0e9;color:#e58a80}.beat-dot.hit{background:var(--mint);border-color:#5ac3a4;color:#295e4c;transform:scale(1.14);box-shadow:0 7px 14px #80d9c054}.beat-dot:first-child.hit{background:var(--coral);border-color:var(--hot);color:white;box-shadow:0 7px 15px #ff82924f}.beat-caption{height:24px;margin:10px 0 2px;font-size:12px;color:var(--muted);font-weight:750}
.playbtn{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;background:var(--coral);border:0;border-radius:19px;color:white;padding:17px 22px;font-size:20px;font-weight:950;letter-spacing:.03em;box-shadow:0 7px 0 #f36b81;margin-top:16px;transition:background .15s,transform .1s}.playbtn:hover{background:#fa768b}.playbtn:active{transform:translateY(4px);box-shadow:0 3px 0 #f36b81}.playbtn.playing{background:#626b8e;box-shadow:0 7px 0 #485272}.playbtn.playing:hover{background:#707999}.playbtn.playing:active{box-shadow:0 3px 0 #485272}.action-symbol{font-size:21px;line-height:1}
.soundbar{margin-top:24px;padding:18px 18px 17px;border:1px solid var(--stroke);border-radius:19px;background:#fffdfb}.soundtitle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:900}.volume-row{display:flex;align-items:center;gap:12px;margin-top:11px}.mutebtn{height:46px;width:48px;flex:0 0 48px;border-radius:14px;border:1px solid #eee6df;background:#fff;display:grid;place-items:center;color:#626b80;box-shadow:0 2px 0 #f2ece6;font-size:20px}.mutebtn[aria-pressed="true"]{background:#fff0f1;border-color:#ffc2cb;color:#c34e67}.volume-row input{min-width:0;width:100%;accent-color:#f38191;height:30px;cursor:pointer}.vol-amount{width:48px;text-align:right;color:var(--muted);font-size:12px;font-weight:900;font-variant-numeric:tabular-nums}
.side{display:flex;flex-direction:column;gap:16px}.info-panel{padding:23px 21px 22px}.info-panel h2{display:flex;align-items:center;gap:10px;margin:0 0 17px;font-size:18px;font-weight:950;letter-spacing:-.035em}.info-icon{height:35px;width:35px;display:grid;place-items:center;background:#e2f6ed;border-radius:11px;font-size:17px}.tip{display:flex;align-items:flex-start;gap:11px;margin:13px 0}.tip-num{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#fff2dc;color:#9f784d;font-size:12px;font-weight:950}.tip b{display:block;font-size:13px;margin-bottom:1px}.tip span{display:block;font-size:12px;color:var(--muted);line-height:1.65}.tip-foot{margin-top:20px;padding:12px 13px;background:#f2f9fc;border-radius:13px;font-size:11px;color:#547a88;font-weight:700;line-height:1.75}.usage{padding:22px 21px;background:#fff6e7;border:1px solid #ffecd6;border-radius:24px}.usage strong{font-size:14px}.usage p{font-size:12px;color:#806c5b;line-height:1.85;margin:8px 0 0}.notice{border-radius:12px;background:#fff0f1;border:1px solid #ffcbd0;padding:11px 13px;font-size:12px;font-weight:760;color:#9d4d56;margin-top:11px;display:none}.notice.visible{display:block}.footer{text-align:center;margin:29px 0 0;font-size:11px;color:#98939a}.footer a{text-decoration:underline;text-underline-offset:3px}
.workspace>.player{min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:flex-start}.workspace>.player .player-inner{width:100%}
@keyframes twinkle{50%{opacity:.45;transform:scale(.76)}}
@media(max-width:780px){.workspace{gap:15px}.side{gap:12px}.info-panel,.usage{padding:20px}}
@media(max-width:540px){.workspace>.player{min-height:calc(100vh - 52px);min-height:calc(100svh - 52px)}.bpm-slider-area{margin-top:13px;padding:0 12px}.bpm-slider-label{font-size:11px}.bpm-slider{height:40px}.bpm-help{margin-top:8px}.player-heading h1{font-size:15px}.shell{padding:0 14px 30px}.topbar{padding:14px 0 9px}.brand{font-size:16px;gap:7px}.brandmark{width:36px;height:36px;font-size:20px;border-radius:12px}.phase{font-size:10px;padding:5px 8px}.back{padding:8px 11px;font-size:11px}.player{padding:17px 15px 19px;border-radius:23px}.tempo-box{margin-top:13px;padding:17px 8px 19px}.bpm-adjust{gap:5px}.bpm-control{width:52px;height:52px;flex-basis:52px;border-radius:16px;font-size:28px}.bpm-number input{font-size:67px}.bpm-help{font-size:10px}.beats-wrap{margin-top:19px}.beatline{gap:10px}.beat-dot{width:41px;height:41px;border-radius:14px}.playbtn{font-size:18px;padding:14px 18px}.soundbar{padding:14px;margin-top:20px}.info-panel{padding:19px 20px}.usage{padding:17px 20px}.info-panel h2{margin-bottom:10px}.tip{margin:10px 0}.footer{margin-top:22px}}
@media(max-width:350px){.shell{padding:0 10px 25px}.player{padding:15px 11px}.bpm-number input{font-size:57px}.bpm-control{width:47px;height:47px;flex-basis:47px}.beatline{gap:8px}.beat-dot{width:37px;height:37px}.brand{font-size:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Phase 3: extra controls remain visually secondary to the main metronome */
.player-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.fullscreen-btn{border:1px solid #e4e8ef;background:#f4f7fb;border-radius:999px;padding:7px 10px;color:#56627c;font-size:11px;font-weight:900;white-space:nowrap}
.fullscreen-btn:hover{background:#e9f3ff}
.tap-row{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.tap-btn{border:2px solid #fad4ad;background:#fff;border-radius:13px;padding:9px 14px;color:#9e6844;font-size:12px;font-weight:950;box-shadow:0 3px 0 #f3e3d6;min-height:42px}
.tap-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #f3e3d6}
.tap-status{color:#927e79;font-size:11px;font-weight:750}
.advanced{margin-top:18px;background:#fffdfb;border:1px solid #efe8e3;border-radius:19px;overflow:hidden}
.advanced summary{cursor:pointer;font-weight:900;font-size:13px;list-style:none;padding:15px 17px;display:flex;align-items:center;gap:10px;min-height:48px}
.advanced summary::-webkit-details-marker{display:none}.advanced summary::after{content:'⌄';font-size:21px;line-height:1;margin-left:auto;color:#8d8390}.advanced[open] summary::after{content:'⌃'}
.advanced-hint{font-size:11px;color:#8a8b96;font-weight:700}
.advanced-inner{border-top:1px solid var(--stroke);padding:16px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.setting-item label{font-size:12px;font-weight:850;display:block;margin-bottom:6px}
.setting-item select{appearance:auto;width:100%;padding:10px 11px;min-height:45px;border:1px solid #e8e3e0;border-radius:11px;background:#fff;color:var(--ink);font-weight:800}
.subdivide-field{border:0;padding:0;margin:18px 0 0;min-width:0}
.subdivide-field legend{font-size:12px;font-weight:850;margin-bottom:8px;padding:0}
.subdivide-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.subchip{min-height:42px;border:1px solid #e9e5e2;border-radius:12px;background:#fff;font-size:12px;font-weight:900;color:#656777;white-space:nowrap}
.subchip.active{background:#ffe5e9;border:2px solid var(--coral);color:#a8475a}
.setting-explain{color:#8a7d81;font-size:11px;margin:7px 0 0}
.accent-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:16px;padding:14px 13px;border-radius:13px;background:#f7f9fa;cursor:pointer}
.accent-row b{display:block;font-size:12px}.accent-row small{display:block;font-size:11px;color:#7a7b85;margin-top:2px}
.accent-row input{flex-shrink:0;width:22px;height:22px;accent-color:var(--hot);cursor:pointer}
.saved-note{font-size:11px;color:#5b967e;margin:12px 1px 0;font-weight:750}
.player:fullscreen,.player.fullscreen-fallback{width:100vw;max-width:none;height:100vh;height:100dvh;min-height:0!important;padding:clamp(15px,3vw,35px);overflow:auto;background:white;border-radius:0;box-shadow:none}
.player.fullscreen-fallback{position:fixed;inset:0;z-index:9999}.player:fullscreen .player-inner,.player.fullscreen-fallback .player-inner{max-width:860px;margin:0 auto}
body.fallback-active{overflow:hidden}
@media(max-width:540px){.fullscreen-btn{font-size:10px;padding:7px 8px}.player-tools{gap:5px}.player-heading h1{font-size:14px}.tap-row{gap:6px}.tap-btn{font-size:11px;padding:8px 10px}.tap-status{font-size:10px}.settings-grid{grid-template-columns:1fr}.advanced-inner{padding:12px}.subdivide-options{gap:5px}.subchip{font-size:11px;padding:0 3px}.advanced-hint{font-size:10px}}
@media(max-width:350px){.subchip{font-size:10px}.player-heading h1{font-size:13px}.subpill{padding:6px 8px}.tap-row{flex-direction:column;gap:4px}.advanced summary{padding:12px}}

/* Phase 3: compact mode switch and a non-intrusive, optional practice coach */
.mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;background:#f7f4f3;padding:5px;border-radius:16px;margin-top:18px}
.mode-btn{min-height:44px;border:1px solid transparent;background:transparent;color:#7b7785;border-radius:12px;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:6px}
.mode-btn.active{background:white;border-color:#f2dfd9;color:#a44e67;box-shadow:0 3px 7px #7a5f5f1b}
.coach-settings{margin-top:13px;padding:16px;background:linear-gradient(120deg,#f1fbf7,#fdf7ff);border:1px solid #d9f0e7;border-radius:18px}
.coach-top{display:flex;align-items:center;gap:9px;justify-content:space-between}.coach-top strong{font-size:14px}.coach-top span{font-size:11px;color:#71807c;font-weight:800}
.coach-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.coach-field label{display:block;font-size:11px;font-weight:900;color:#66766e;margin-bottom:4px}.coach-field input{width:100%;border:1px solid #d7e5df;background:white;color:var(--ink);border-radius:12px;padding:9px 10px;min-height:44px;font-size:18px;font-weight:950;text-align:center;appearance:textfield;-moz-appearance:textfield}.coach-field input::-webkit-inner-spin-button{-webkit-appearance:none}
.coach-steps{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}.coach-steps>span{font-size:11px;font-weight:900;color:#66766e;margin-right:auto}.coach-step{border:1px solid #d6e5e3;background:white;border-radius:999px;min-height:37px;min-width:53px;padding:5px 10px;font-weight:900;font-size:12px;color:#66766e}.coach-step.active{border:2px solid #5ebd9d;background:#dcf7ea;color:#286951}
.coach-apply{display:block;width:100%;margin-top:12px;padding:10px 12px;min-height:43px;border:1px solid #90d7be;border-radius:12px;background:#fff;color:#387e66;font-weight:900;font-size:12px}.coach-apply:hover{background:#edfff7}.coach-validation{font-size:11px;color:#a74f66;min-height:0;margin:7px 1px 0;font-weight:800}.coach-help{font-size:11px;line-height:1.7;color:#697d75;margin:8px 0 0}
.coach-progress{margin-top:20px;padding:17px 16px;background:linear-gradient(145deg,#f2fbf8,#fff9ed);border:1px solid #e1efdf;border-radius:18px}
.coach-progress-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.coach-progress-head strong{font-size:14px}.coach-progress-head span{font-size:12px;color:#4e9278;font-weight:950;font-variant-numeric:tabular-nums}.coach-track{height:12px;border-radius:999px;background:#e7e6e1;margin-top:10px;overflow:hidden}.coach-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#80d9c0,#79bff0);transition:width .2s}.coach-marks{display:flex;justify-content:space-between;font-size:11px;font-weight:850;color:#71827c;margin-top:6px}.coach-guide{font-size:12px;color:#647970;margin:10px 0}.coach-actions{display:grid;grid-template-columns:1fr 1.15fr;gap:9px;margin-top:13px}.coach-retry,.coach-done{min-height:49px;border-radius:13px;font-size:13px;font-weight:950;padding:8px}.coach-retry{border:1px solid #d6e6da;background:white;color:#607b70}.coach-done{border:0;background:#80d9c0;color:#204f41;box-shadow:0 4px 0 #54b99b}.coach-done:hover{background:#72d6b9}.coach-done:active{transform:translateY(2px);box-shadow:0 2px 0 #54b99b}.coach-celebrate{text-align:center;background:#fff4d9;border:1px solid #f8dfa4;border-radius:13px;padding:14px 10px;margin-top:12px}.coach-celebrate b{display:block;font-size:16px;color:#ad7340}.coach-celebrate span{font-size:12px;color:#887350}.coach-feedback{font-size:11px;color:#387e66;min-height:0;margin:8px 0 0;font-weight:850}.hidden{display:none!important}
@media(max-width:540px){.mode-toggle{margin-top:14px}.mode-btn{font-size:12px;min-height:42px}.coach-settings{padding:13px 12px}.coach-progress{padding:14px 12px}.coach-top{align-items:flex-start}.coach-top span{max-width:48%;text-align:right}.coach-steps{gap:6px}.coach-steps>span{width:100%}.coach-step{min-width:55px}.coach-actions{gap:7px}.coach-retry,.coach-done{font-size:12px}}


/* Phase 4 - bilingual navigation, sharing and footer. First-view layout remains unchanged. */
.lang-link{font-size:12px;font-weight:950;text-decoration:none;border-radius:999px;padding:8px 12px;color:#546983;background:#ecf7ff;border:1px solid #dbeeff;white-space:nowrap}
.lang-link:hover{background:#d7eefd}.share-panel{max-width:860px;margin:20px auto 0;padding:24px}.share-panel h2{margin:0 0 7px;font-size:18px}.share-panel p{font-size:12px;color:#777987;margin:0 0 13px}.share-buttons{display:flex;gap:9px;flex-wrap:wrap}.share-buttons a,.share-buttons button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border-radius:13px;background:#f4f7fa;color:#404356;text-decoration:none;border:1px solid #e7e9ec;font-weight:850;font-size:12px}.share-buttons a:hover,.share-buttons button:hover{background:#e8f2ff}.share-msg{font-size:12px;color:#487a65;min-height:1.6em;margin:11px 0 0}.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin:9px auto 0}.footer-nav a{text-decoration:underline;text-underline-offset:3px}.footnote{padding:0 8px}@media(max-width:540px){.lang-link{padding:7px 9px;font-size:11px}.share-panel{padding:19px 16px}.share-buttons a,.share-buttons button{flex:1;min-width:75px}.top-actions{gap:5px}.phase{font-size:9px;padding:5px 7px}}

/* Phase 5: correct the 1–3 step bubbles on all viewport sizes.
   The former .tip span selector overrode .tip-num's grid centering. */
.tip > .tip-num{display:grid;place-items:center;align-items:center;justify-content:center;
  flex:0 0 30px;width:30px;height:30px;min-width:30px;min-height:30px;
  margin:0;border-radius:50%;line-height:1;font-size:13px;font-weight:900;
  background:#fff1d9;color:#926f49;text-align:center;letter-spacing:0;font-variant-numeric:tabular-nums}
.tip{align-items:flex-start;gap:14px}
.tip > div{flex:1;min-width:0}
/* Phase 5: FAQ is below the tool; does not crowd the first view. */
.seo-faq{margin:22px 0 0;padding:clamp(22px,4vw,34px);background:#fff;border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow)}
.seo-faq h2{font-size:clamp(20px,2.6vw,25px);margin:0 0 5px;color:var(--ink)}
.seo-faq>.seo-intro{color:var(--muted);margin:0 0 18px;font-size:13px}
.seo-faq details{border-top:1px solid var(--stroke);padding:13px 0}
.seo-faq summary{cursor:pointer;font-size:14px;font-weight:850;list-style:revert}
.seo-faq details p{font-size:13px;line-height:1.85;color:#616575;margin:8px 0 0 18px}
@media(max-width:540px){.tip > .tip-num{flex-basis:30px;width:30px;height:30px}.seo-faq{padding:19px 17px}}