:root{--color-bg: #f5f5f3;--color-surface: #ffffff;--color-surface-2: #efefec;--color-border: #d9d9d4;--color-text: #22231f;--color-text-muted: #6c6d66;--color-text-past: #a3a49d;--color-accent: #3d5a80;--color-accent-text: #ffffff;--color-accent-soft: #e4eaf2;--color-current-bg: #f1ead8;--color-current-bar: #b08a3e;--color-next-bg: #e4eaf2;--color-kana: #5d6470;--color-kata-romaji: #8a5d3b;--color-romaji: #6c6d66;--color-danger: #a33a32;--color-danger-text: #ffffff;--color-warn: #8a5d1f;--color-reminder-bg: #f6efdc;--color-backdrop: rgba(20, 20, 18, .4);--color-player-bg: #1d1d1b;--font-ui: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;--font-lyrics: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;--radius-s: 4px;--radius-m: 8px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--touch: 44px;--btn-h: 36px;--header-h: 56px;--ui-size: 14px;--lyric-size: 19px;--lyric-lh: 24px;--rt-size: 10px;--rt-lh: 12px;--romaji-size: 12px;--romaji-lh: 14px;--line-pad: 4px;--para-gap: 16px;--time-size: 12px}@media(max-width:767.98px){:root{--lyric-size: 17px;--lyric-lh: 22px;--rt-size: 9px;--rt-lh: 11px;--romaji-size: 11px;--romaji-lh: 13px;--para-gap: 12px;--time-size: 11px;--header-h: 52px}}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);font-size:var(--ui-size);-webkit-text-size-adjust:100%}body{overflow-x:hidden}h1,h2,p{margin:0}button,input,textarea{font:inherit;color:inherit}[lang=ja]{font-family:var(--font-lyrics)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--btn-h);padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);line-height:1;white-space:nowrap;cursor:pointer;position:relative}.btn:after,.toggle:after,.segmented button:after{content:"";position:absolute;left:0;right:0;top:50%;height:var(--touch);transform:translateY(-50%)}.btn:hover:not(:disabled){background:var(--color-surface-2)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-text)}.btn-primary:hover:not(:disabled){background:var(--color-accent);filter:brightness(1.08)}.btn-ghost{border-color:transparent;background:transparent}.btn-link{border:none;background:none;color:var(--color-accent);text-decoration:underline;padding:0 var(--sp-2)}.btn-danger{color:var(--color-danger)}.btn-small{height:32px;padding:0 var(--sp-2);min-width:44px;font-variant-numeric:tabular-nums}.btn-large{height:48px;padding:0 var(--sp-6);font-size:16px}.icon-btn{width:var(--touch);height:var(--touch);border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--color-text-muted)}.spacer{flex:1}.muted{color:var(--color-text-muted)}.hint{color:var(--color-text-muted);font-size:13px;line-height:1.6}.error-text{color:var(--color-danger);font-size:13px}.info-text{font-size:13px;line-height:1.6}.page{max-width:760px;margin:0 auto;padding:var(--sp-4)}.list-head,.form-head{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--header-h)}.list-head{justify-content:space-between}.list-head h1,.form-head h1{font-size:20px}.notice{margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border-left:4px solid var(--color-current-bar);background:var(--color-surface);font-size:13px;line-height:1.6}.song-list{list-style:none;margin:var(--sp-4) 0;padding:0;border-top:1px solid var(--color-border)}.song-list li{border-bottom:1px solid var(--color-border)}.song-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:56px;padding:var(--sp-2) var(--sp-1);color:inherit;text-decoration:none}.song-row:hover{background:var(--color-surface)}.song-main{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}.song-title{font-weight:600;overflow-wrap:anywhere}.song-artist{color:var(--color-text-muted);font-size:13px}.song-meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);color:var(--color-text-muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}.empty{margin:var(--sp-8) 0}.list-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}.dict-status{position:fixed;right:var(--sp-3);bottom:var(--sp-3);padding:var(--sp-1) var(--sp-2);border:1px solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);color:var(--color-text-muted);font-size:12px}.dict-status.is-error{color:var(--color-danger)}.song-form{display:flex;flex-direction:column;gap:var(--sp-4)}.field{display:flex;flex-direction:column;gap:var(--sp-1)}.field-label{font-size:13px;font-weight:600;color:var(--color-text-muted)}.req{margin-left:var(--sp-2);color:var(--color-danger);font-weight:400;font-size:12px}.field input,.field textarea{width:100%;padding:var(--sp-2) var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);font-size:16px}.field input{height:var(--touch)}.field textarea{line-height:1.6;resize:vertical}.tidy-info{display:flex;align-items:center;font-size:13px;color:var(--color-text-muted);margin-top:calc(var(--sp-2) * -1)}.form-actions{display:flex;justify-content:flex-end}.form-preview{width:320px;max-width:100%}.player-preview{aspect-ratio:16 / 9}.player{position:relative;background:var(--color-player-bg);overflow:hidden}.player-host,.player-host>div,.player-host iframe{width:100%;height:100%;border:0;display:block}.player-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-4);background:var(--color-surface-2);text-align:center;line-height:1.6}.practice{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.practice-head{display:flex;align-items:center;gap:var(--sp-3);height:var(--header-h);padding:0 var(--sp-4);border-bottom:1px solid var(--color-border);background:var(--color-surface);flex:none}.head-title{display:flex;align-items:center;gap:var(--sp-3);flex:1;min-width:0}.head-title .song-title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.head-title .song-artist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.head-actions{display:flex;align-items:center;gap:var(--sp-2)}.save-state{color:var(--color-text-muted);font-size:12px;margin-right:var(--sp-2)}.save-state.is-error{color:var(--color-danger)}.pending-link{border:none;background:none;padding:0;height:var(--touch);color:var(--color-danger);text-decoration:underline;font-size:13px;white-space:nowrap;cursor:pointer}.practice-body{flex:1;min-height:0;display:grid;grid-template-columns:530px minmax(0,1fr)}.practice-left{padding:var(--sp-6) var(--sp-6) var(--sp-4);overflow-y:auto;border-right:1px solid var(--color-border)}.player-main{width:480px;height:270px}.left-controls{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-4);width:480px}.segmented{display:inline-flex;align-self:flex-start;border:1px solid var(--color-border);border-radius:var(--radius-s);overflow:hidden}.segmented button{position:relative;height:var(--btn-h);padding:0 var(--sp-4);border:none;background:var(--color-surface);line-height:1;cursor:pointer}.segmented button+button{border-left:1px solid var(--color-border)}.segmented button.is-on{background:var(--color-accent);color:var(--color-accent-text)}.toggle-row{display:flex;align-items:center;gap:var(--sp-2)}.toggle{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--btn-h);padding:0 var(--sp-3);border:1px solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);line-height:1;cursor:pointer}.toggle:before{content:"";width:12px;height:12px;border:1px solid var(--color-text-muted);border-radius:2px;background:var(--color-surface)}.toggle.is-on:before{border-color:var(--color-accent);background:var(--color-accent);box-shadow:inset 0 0 0 2px var(--color-surface)}.offset-row{display:flex;align-items:center;gap:var(--sp-2)}.offset-label{color:var(--color-text-muted);font-size:13px;margin-right:var(--sp-1)}.offset-value{min-width:64px;text-align:center;font-variant-numeric:tabular-nums}.kbd-help{color:var(--color-text-muted);font-size:12px;line-height:1.6}.tap-controls{display:flex;flex-direction:column;gap:var(--sp-3)}.btn-tap{height:72px;font-size:20px;font-weight:600;flex-direction:column;gap:var(--sp-1)}.kbd-hint{font-size:12px;font-weight:400;opacity:.8}.tap-sub{display:flex;gap:var(--sp-2)}.tap-sub .btn{flex:1}.lyrics-pane{position:relative;overflow-y:auto;padding:var(--sp-4) var(--sp-4) 0;--rt-row: 0px;overscroll-behavior:contain}.lyrics-pane.kana-on{--rt-row: var(--rt-lh)}.lyrics-tail{height:60%}.lyric-line{display:grid;grid-template-columns:4px 56px minmax(0,1fr) var(--touch);column-gap:var(--sp-2);align-items:start;padding:var(--line-pad) 0;border-radius:var(--radius-s);cursor:pointer}.is-tap .lyric-line{grid-template-columns:4px 56px minmax(0,1fr) 48px var(--touch)}.lyric-line.has-gap{margin-top:var(--para-gap)}.lyric-indicator{margin-top:var(--rt-row);height:var(--lyric-lh);border-radius:2px}.lyric-time,.lyric-tag{margin-top:var(--rt-row);height:var(--lyric-lh);display:flex;align-items:center;font-size:var(--time-size);color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.lyric-tag{color:var(--color-accent);font-weight:600}.lyric-segs{display:flex;flex-wrap:wrap;align-items:flex-end}.seg{display:inline-flex;flex-direction:column;align-items:center}.seg{--overhang: max( calc(var(--lyric-size) * -.5), min(0px, calc((var(--base-len, 1) * var(--lyric-size) - var(--rt-w, 0) * var(--rt-size)) / 2)) )}.seg.oh-l{margin-left:var(--overhang)}.seg.oh-r{margin-right:var(--overhang)}.seg .rt{height:var(--rt-lh);line-height:var(--rt-lh);font-size:var(--rt-size);color:var(--color-kana);white-space:nowrap}.seg .rt-romaji{color:var(--color-kata-romaji);font-family:var(--font-ui)}.seg .base{font-size:var(--lyric-size);line-height:var(--lyric-lh);white-space:pre}.lyric-romaji{font-family:var(--font-ui);font-size:var(--romaji-size);line-height:var(--romaji-lh);min-height:var(--romaji-lh);color:var(--color-romaji);overflow-wrap:anywhere}.lyric-line.is-current{background:var(--color-current-bg)}.lyric-line.is-current .lyric-indicator{background:var(--color-current-bar)}.lyric-line.is-current .base{font-weight:700}.lyric-line.is-past .base,.lyric-line.is-past .rt,.lyric-line.is-past .lyric-romaji{color:var(--color-text-past)}.lyric-line.is-next{background:var(--color-next-bg)}.lyric-line.is-next .lyric-indicator{background:var(--color-accent)}.lyric-edit{width:var(--touch);height:var(--touch);margin-top:calc(var(--rt-row) + (var(--lyric-lh) - var(--touch)) / 2);margin-bottom:calc((var(--lyric-lh) - var(--touch)) / 2);display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--color-text-muted);cursor:pointer;opacity:0}.lyric-line:hover .lyric-edit,.lyric-edit:focus-visible{opacity:1}@media(hover:none){.lyric-edit{opacity:.4}}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);background:var(--color-backdrop)}.dialog{width:400px;max-width:100%;max-height:calc(100dvh - var(--sp-8));display:flex;flex-direction:column;border-radius:var(--radius-m);background:var(--color-surface);outline:none}.dialog-wide{width:560px}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-1) var(--sp-1) 0 var(--sp-4)}.dialog-head h2{font-size:16px}.dialog-body{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-4);overflow-y:auto}.dialog-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--color-border)}.char-picker{display:flex;flex-wrap:wrap;gap:var(--sp-1)}.char-btn{min-width:var(--touch);height:var(--touch);padding:0 var(--sp-1);border:1px solid var(--color-border);border-radius:var(--radius-s);background:var(--color-surface);font-size:20px;line-height:1;cursor:pointer}.char-btn.is-selected{background:var(--color-accent-soft);border-color:var(--color-accent)}.char-btn.is-anchor{background:var(--color-accent);color:var(--color-accent-text)}.reading-info{display:flex;flex-direction:column;gap:var(--sp-1)}.reading-list{margin:0;padding-left:var(--sp-5);line-height:1.6}.reading-preview{display:flex;flex-direction:column;gap:var(--sp-1)}.preview-seg{display:inline-flex;flex-direction:column;align-items:center;align-self:flex-start;padding:var(--sp-1) var(--sp-2);background:var(--color-surface-2);border-radius:var(--radius-s)}.preview-seg .rt{font-size:12px;line-height:16px;color:var(--color-kana)}.preview-seg .base{font-size:24px;line-height:32px}.pending-list{list-style:none;margin:0;padding:0}.pending-list li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--color-border);line-height:1.6}.pending-main{flex:1;min-width:0;overflow-wrap:anywhere}.menu-list{display:flex;flex-direction:column}.menu-list .save-state{padding:var(--sp-1) 0 var(--sp-2)}.menu-item{height:var(--touch);padding:0 var(--sp-2);border:none;border-top:1px solid var(--color-border);background:none;text-align:left;cursor:pointer}.practice.is-mobile .practice-head{padding:0 var(--sp-1);gap:var(--sp-1)}.practice.is-mobile .head-title{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}.practice.is-mobile .head-title .song-title{font-size:15px;max-width:100%}.practice.is-mobile .head-title .song-artist{font-size:12px;max-width:100%}.icon-menu{width:var(--touch);height:var(--touch);font-size:20px;padding:0}.mobile-pending{padding:0 var(--sp-4);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.practice.is-mobile .practice-body{display:flex;flex-direction:column}.practice.is-mobile .practice-left{padding:0;border-right:none;border-bottom:1px solid var(--color-border);overflow:visible;flex:none}.practice.is-mobile .player-main{width:100%;height:auto;aspect-ratio:16 / 9}.practice.is-mobile .toggle-row{height:52px;padding:0 var(--sp-4);background:var(--color-surface)}.practice.is-mobile .lyrics-pane{flex:1;min-height:0;padding:var(--sp-2) var(--sp-2) 0}.practice.is-mobile .lyric-line{grid-template-columns:3px 48px minmax(0,1fr) var(--touch);column-gap:var(--sp-1)}.practice.is-mobile.is-tap .lyric-line{grid-template-columns:3px 48px minmax(0,1fr) 40px var(--touch)}.mobile-tapbar{flex:none;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background:var(--color-surface)}.mobile-tapbar .btn-tap{height:56px}.practice.is-mobile .offset-row .btn-small{min-width:48px}.list-head-actions{display:flex;align-items:center;gap:var(--sp-2)}.cloud-note{font-size:12px}.sync-line{display:flex;align-items:center;min-height:var(--touch);margin:var(--sp-2) 0}.sync-badge{display:inline-flex;align-items:center;color:var(--color-text-muted);font-size:12px;line-height:1.4}.sync-badge.is-warn{color:var(--color-warn)}.sync-badge.is-error{color:var(--color-danger)}.sync-badge.is-button{min-height:var(--touch);padding:0;border:none;background:none;text-decoration:underline;cursor:pointer;text-align:left}.reminder{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0;padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);border-radius:var(--radius-s);background:var(--color-reminder-bg);font-size:13px;line-height:1.6}.reminder>span:first-child{flex:1;min-width:0}.reminder-actions{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}.local-tag{margin-left:var(--sp-2);color:var(--color-warn);font-size:12px}.deleted-section{margin-top:var(--sp-8);padding-bottom:var(--sp-8)}.deleted-section h2{font-size:15px;margin-bottom:var(--sp-1)}.deleted-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) var(--sp-1)}.btn-danger-fill{background:var(--color-danger);border-color:var(--color-danger);color:var(--color-danger-text)}.btn-danger-fill:hover:not(:disabled){background:var(--color-danger);filter:brightness(1.08)}.menu-danger{color:var(--color-danger)}.menu-status{display:flex;align-items:center;min-height:var(--touch)}.account-email{overflow-wrap:anywhere}.rev-list{list-style:none;margin:0;padding:0}.rev-list li{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--color-border);line-height:1.6}.rev-main{flex:1;min-width:0;font-variant-numeric:tabular-nums}.practice:not(.is-mobile) .head-actions .icon-menu{width:var(--touch)}@media(max-width:767.98px){.list-head h1{font-size:18px}.list-head-actions .btn{padding:0 var(--sp-2)}}.practice-head>.btn-ghost:first-child{min-width:var(--touch)}