:root{--bg: #f4f8f2;--surface: #ffffff;--text: #24312a;--text-sub: #6b7a70;--accent: #4f9d3a;--accent-soft: #e4f2dd;--sky: #3d86c6;--sky-soft: #e3eef8;--border: #dbe5d8;--current-bg: #eef7e9;--range-bg: #eaf3fb;--shadow: 0 1px 3px rgba(36, 49, 42, .08)}@media (prefers-color-scheme: dark){:root{--bg: #171d19;--surface: #1f2721;--text: #e2ebe4;--text-sub: #8fa295;--accent: #6fbf58;--accent-soft: #263a20;--sky: #5a9fd6;--sky-soft: #1d2a36;--border: #2c362f;--current-bg: #223326;--range-bg: #1e2c3a;--shadow: 0 1px 3px rgba(0, 0, 0, .4)}}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Sans,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;line-height:1.7}#app{max-width:720px;margin:0 auto;padding:0 16px 80px}.site-header{display:flex;align-items:center;gap:16px;padding:20px 0 12px;flex-wrap:wrap}.logo{font-size:1.3rem;letter-spacing:.02em}#material-select{flex:1;min-width:200px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.9rem}.controls{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 0;border-bottom:1px solid var(--border)}.controls-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:7px 12px;font-size:.95rem;cursor:pointer;box-shadow:var(--shadow);transition:background .15s,border-color .15s}.btn:hover{border-color:var(--accent)}.btn.icon{width:42px;text-align:center;padding:7px 0}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-size:1.05rem}.btn.toggle.active,.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--text-sub)}.pos{font-variant-numeric:tabular-nums;color:var(--text-sub);font-size:.85rem;min-width:3.5em}.speed{display:flex;align-items:center;gap:6px;flex:1;min-width:140px}.speed input[type=range]{flex:1;accent-color:var(--accent)}.speed-val{font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--text-sub);min-width:3.4em}.sep{width:1px;height:24px;background:var(--border)}#repeat-count{padding:7px 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text)}.hint{min-height:1.2em;font-size:.82rem;color:var(--sky);padding-top:4px}.sentences{padding:18px 0;display:flex;flex-direction:column;gap:6px}.sentence{display:flex;gap:12px;padding:10px 14px;border-radius:10px;border-left:4px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.sentence:hover{background:var(--surface)}.sentence .num{color:var(--text-sub);font-size:.78rem;font-variant-numeric:tabular-nums;padding-top:5px;min-width:1.8em;text-align:right;-webkit-user-select:none;user-select:none}.sentence .en{font-size:1.05rem}.sentence .ja{font-size:.85rem;color:var(--text-sub);margin-top:2px}body.hide-ja .sentence .ja{display:none}.sentence .en .w{border-radius:4px;padding:0 1px;transition:background .1s}body.picking-word .sentence .en .w{cursor:pointer}body.picking-word .sentence .en .w:hover{background:var(--sky-soft);outline:1px solid var(--sky)}.w.now{background:var(--accent-soft);box-shadow:inset 0 -2px 0 var(--accent)}.w.phrase{background:var(--range-bg);box-shadow:inset 0 -2px 0 var(--sky)}.w.phrase.now{background:var(--accent-soft)}.sentence.current{background:var(--current-bg);border-left-color:var(--accent)}.sentence.current .en{font-weight:600}.sentence.in-range{background:var(--range-bg)}.sentence.in-range.current{background:var(--current-bg)}.sentence.range-a .num:before{content:"A ";color:var(--sky);font-weight:700}.sentence.range-b .num:after{content:" B";color:var(--sky);font-weight:700}.empty{color:var(--text-sub);padding:40px 0;text-align:center}.site-footer{padding-top:24px;border-top:1px solid var(--border);font-size:.85rem}.site-footer a{color:var(--sky);text-decoration:none}.site-footer a:hover{text-decoration:underline}