:root{--bg:#fdf6e3;--surface:#eee8d5;--surface-hover:#e6dfcc;--text:#3b4d54;--text-secondary:#586e75;--text-muted:#839496;--accent:#cb6800;--accent-hover:#b45d00;--accent-rgb:203, 104, 0;--accent-soft:rgba(var(--accent-rgb), .1);--accent-border:rgba(var(--accent-rgb), .3);--on-accent:#fdf6e3;--success:#5c7a4f;--success-rgb:92, 122, 79;--error:#dc322f;--error-rgb:220, 50, 47;--border:#c9c0ab;--border-subtle:#0000000f;--overlay-rgb:0, 0, 0;--highlight-rgb:255, 255, 255;--glass:#fdf6e3ed;--glass-hover:#f3eddcf2;--glass-deep:#f5efdff5;--surface-card:#ffffff73;--surface-card-hover:#ffffff8c;--shadow-card:0 1px 3px #785a320f;--shadow-card-hover:0 2px 8px #785a321a;--radius:10px;--radius-lg:14px;--radius-sm:6px;--font-ui:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-read:"Newsreader", "Georgia", serif;--fs-2xs:.6rem;--fs-xs:.75rem;--fs-sm:.85rem;--fs-md:.95rem;--fs-lg:1.05rem;--fs-xl:1.2rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--font-ui);background:var(--bg);color:var(--text);min-height:100vh;padding:0 1rem}body:before,body:after{content:"";pointer-events:none;z-index:0;opacity:.6;background:url(/flowers.svg) bottom/contain no-repeat;width:180px;height:220px;position:fixed;bottom:0}body:before{left:0}body:after{right:0;transform:scaleX(-1)}main,header{z-index:1;position:relative}@media (width<=1200px){body:before,body:after{display:none}}header{flex-direction:column;gap:.6rem;max-width:900px;margin:0 auto;padding:1rem 0;display:flex}.header-top{justify-content:space-between;align-items:center;display:flex}.header-nav{background:var(--surface);border-radius:var(--radius-sm);gap:2px;padding:3px;display:flex}.nav-link{color:var(--text-secondary);font-size:var(--fs-md);letter-spacing:.02em;background:0 0;border-radius:4px;align-items:center;padding:.4rem 1rem;font-weight:600;text-decoration:none;transition:color .15s,background-color .15s;display:inline-flex}.nav-link:hover:not(.active){color:var(--text)}.nav-link.active{color:var(--accent);background:var(--accent-soft)}.nav-badge{background:var(--accent);min-width:1.2rem;color:var(--on-accent);font-size:var(--fs-2xs);letter-spacing:.02em;border-radius:999px;justify-content:center;align-items:center;margin-left:.45rem;padding:.05rem .4rem;font-weight:700;line-height:1.4;display:inline-flex}.header-controls{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.3rem 0 .3rem .4rem;display:flex}.control-row{align-items:center;gap:.4rem;display:flex}.control-row label{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em;font-weight:500}.control-row input[type=password]{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:170px;color:var(--text);font-family:var(--font-ui);font-size:var(--fs-sm);padding:.3rem .5rem;transition:border-color .2s}.control-row input[type=password]:focus{border-color:var(--accent-border);outline:none}.control-row select{border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-sm);border:none;padding:.3rem .5rem}.control-row select:focus{outline:none}.control-row input[type=range]{width:80px;accent-color:var(--accent)}#speed-value{text-align:center;min-width:1.8em;display:inline-block}.banner{z-index:100;border-radius:var(--radius);background:var(--error);color:#fff;max-width:28rem;font-size:var(--fs-sm);cursor:pointer;flex-wrap:wrap;align-items:center;gap:.75rem;margin:0 auto;padding:.6rem 1rem;display:flex;position:fixed;bottom:1rem;left:1rem;right:1rem;box-shadow:0 2px 8px #00000040}.banner-success{background:var(--success)}.banner-info{background:var(--surface-alt,#555)}.banner-action{color:#fff;border-radius:var(--radius);cursor:pointer;font-size:var(--fs-sm);white-space:nowrap;background:#fff3;border:none;padding:.25rem .6rem}.banner-action:hover{background:#ffffff59}.banner-details{border-radius:var(--radius);width:100%;max-height:8rem;font-family:monospace;font-size:var(--fs-xs);white-space:pre-wrap;word-break:break-word;cursor:text;-webkit-user-select:text;user-select:text;background:#0003;margin:0;padding:.4rem .6rem;overflow:auto}main{max-width:900px;margin:0 auto}#library-view textarea{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-card);width:100%;box-shadow:var(--shadow-card);color:var(--text);font-family:var(--font-read);font-size:var(--fs-lg);resize:vertical;padding:1rem;line-height:1.7;transition:border-color .2s}#library-view textarea:focus{border-color:var(--accent-border);outline:none}#library-view textarea::placeholder{color:var(--text-muted);font-family:var(--font-read);font-style:italic}#start-btn{border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:var(--fs-md);cursor:pointer;border:none;margin-top:.75rem;padding:.65rem 1.8rem;font-weight:600;transition:background-color .2s,transform .1s}#start-btn:hover{background:var(--accent-hover)}#start-btn:active{transform:scale(.98)}#history-list{margin-top:1.25rem}.history-loading-inline{justify-content:center;margin-bottom:.6rem;display:flex}.load-more-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:rgba(var(--highlight-rgb), .05);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;margin:.25rem auto 0;padding:.4rem 1.4rem;font-weight:500;transition:color .2s,border-color .2s;display:block}.load-more-btn:hover{color:var(--text);border-color:var(--accent-border)}.stories-actions{gap:.5rem;margin-top:.25rem;display:flex}.stories-action-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:rgba(var(--highlight-rgb), .05);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;padding:.4rem 1rem;font-weight:500;text-decoration:none;transition:color .2s,border-color .2s}.stories-action-btn:hover{color:var(--text);border-color:var(--accent-border)}.stories-custom{margin-top:.25rem}.data-controls{border-top:1px solid var(--border-subtle);gap:.5rem;margin-top:.25rem;padding-top:.75rem;display:flex}.data-controls button{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:rgba(var(--highlight-rgb), .05);color:var(--text-secondary);font-size:var(--fs-sm);cursor:pointer;padding:.4rem .9rem;transition:color .2s,border-color .2s}.data-controls button:hover{color:var(--text);border-color:var(--accent-border)}#library-view{flex-direction:column;gap:.5rem;padding-bottom:2rem;display:flex}.library-section{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-card);overflow:hidden}.library-section-title{font-family:var(--font-ui);font-size:var(--fs-md);color:var(--text);align-items:center;margin:0;padding:.7rem .85rem;font-weight:600;display:flex}.library-section-title-collapsible{cursor:pointer;-webkit-user-select:none;user-select:none}.collapse-chevron{font-size:var(--fs-xs);margin-right:.4rem;transition:transform .15s;display:inline-block}.collapse-chevron-collapsed{transform:rotate(-90deg)}.library-section-content{flex-direction:column;gap:.35rem;padding:0 .6rem .6rem;display:flex}#my-stories-list,#recent-list,.library-level-texts{flex-direction:column;gap:.35rem;display:flex}.library-level-header{width:100%;font-family:var(--font-ui);font-size:var(--fs-md);color:var(--text);background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 0;font-weight:600;display:flex}.library-level-title{text-align:left}.library-level-dot{border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.library-level-stats{font-size:var(--fs-xs);color:var(--text-muted);margin-left:auto;font-weight:400}.library-card{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:rgba(var(--highlight-rgb), .05);cursor:pointer;color:inherit;padding:.6rem .75rem;text-decoration:none;transition:border-color .2s;display:block}.library-card:hover{border-color:var(--accent-border)}.library-card-added{border-left:3px solid var(--success);background:rgba(var(--success-rgb), .04)}.library-card-scene{font-family:var(--font-read);font-size:var(--fs-lg);color:var(--text);line-height:1.5;display:block}.library-card-bottom{align-items:center;gap:.5rem;margin-top:.3rem;display:flex}.library-card-meta{font-size:var(--fs-xs);color:var(--text-muted)}.library-card-preview-link{font-family:var(--font-ui);font-size:var(--fs-xs);color:var(--text-muted);cursor:pointer;text-underline-offset:2px;text-transform:lowercase;background:0 0;border:none;padding:0;font-weight:400;text-decoration:underline}.library-card-preview-link:hover{color:var(--text-secondary)}.library-card-delete{color:var(--text-muted);font-size:var(--fs-xl);cursor:pointer;background:0 0;border:none;margin-left:auto;padding:0 .25rem;line-height:1;transition:color .2s}.library-card-delete:hover,.library-card-delete.confirming{color:var(--error)}.library-preview{background:rgba(var(--overlay-rgb), .03);border-radius:var(--radius-sm);font-family:var(--font-read);font-size:var(--fs-lg);color:var(--text-secondary);margin-top:.5rem;padding:.6rem .75rem;line-height:1.6}#text-view{flex-direction:column;gap:.75rem;display:flex}#back-btn{color:var(--text-secondary);font-size:var(--fs-sm);text-decoration:none;transition:color .2s}#back-btn:hover{color:var(--text)}.text-controls{border-top:1px solid var(--border-subtle);align-items:center;gap:.5rem;padding-top:.5rem;display:flex}.text-controls button{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;padding:.45rem 1rem;transition:color .2s,background-color .2s,border-color .2s}.text-controls button:hover{color:var(--text);background:var(--surface-card-hover);border-color:var(--accent-border)}.text-controls button.active{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.sentences-area{position:relative}.sentences-panel{background:var(--surface-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);line-height:2.2;font-family:var(--font-read);font-size:var(--fs-xl);padding:.8rem 1.25rem}.sentence{cursor:pointer;outline-offset:1px;border-radius:4px;outline:2px solid #0000;padding:.15rem 0;transition:background-color .3s,outline-color .2s;display:inline}.sentence:first-child{margin-left:0}.sentence:hover{outline-color:rgba(var(--highlight-rgb), .18)}.sentence.active{outline-color:rgba(var(--accent-rgb), .55)}.sentence.full-playing{outline-color:rgba(var(--accent-rgb), .45)}.sentences-panel.text-hidden .sentence{color:#0000;outline-color:rgba(var(--overlay-rgb), .03)}.sentences-panel.text-hidden .sentence.active{outline-color:rgba(var(--accent-rgb), .55)}.sentences-panel.text-hidden .sentence:hover{outline-color:var(--text-muted)}.sentences-panel.text-hidden .sentence::selection{color:#0000}.sentences-panel.text-hidden .sentence.revealed{color:var(--text)}.inline-player{z-index:10;border-radius:var(--radius);background:var(--glass);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(var(--highlight-rgb), .1);width:14rem;max-width:min(24rem,100%);box-shadow:0 4px 20px rgba(var(--overlay-rgb), .15), 0 0 0 1px rgba(var(--overlay-rgb), .05);flex-direction:column;transition:width .2s ease-out,top .2s,left .2s;display:flex;position:absolute;overflow:hidden}.inline-player.expanded{width:100%}.inline-player.disabled{border-color:rgba(var(--highlight-rgb), .05);box-shadow:0 4px 16px rgba(var(--overlay-rgb), .12)}.inline-player-controls{white-space:nowrap;cursor:pointer;align-items:center;gap:.5rem;padding:.25rem .7rem .25rem .25rem;display:flex}.inline-player:not(.disabled) .inline-player-controls:hover{background:var(--glass-hover)}.inline-player.disabled .inline-player-controls{cursor:not-allowed}.inline-player .play-icon{border:2px solid var(--accent);width:36px;height:36px;color:var(--accent);font-size:var(--fs-md);background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;line-height:1;transition:border-color .2s,background-color .2s;display:flex}.inline-player:not(.disabled) .inline-player-controls:hover .play-icon{background:var(--accent-soft)}.inline-player .play-icon.loading{border-color:var(--text-muted);cursor:default}.inline-player .play-icon.awaiting-record{border-color:var(--error)}.inline-player.recording .play-icon{border-color:var(--error);animation:1s infinite pulse}.inline-player.disabled .play-icon{border-color:var(--text-muted);color:var(--text-muted)}.inline-player .phase-label{font-size:var(--fs-sm);color:var(--text-secondary)}.inline-player-explain{border:1px solid var(--border);width:26px;height:26px;color:var(--text-muted);font-size:var(--fs-xs);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;font-weight:600;transition:color .2s,border-color .2s,background-color .2s;display:flex}.inline-player-explain:hover{color:var(--text);border-color:var(--text-secondary);background:rgba(var(--highlight-rgb), .06)}.inline-player-explain .spinner{border-width:1.5px;width:12px;height:12px}.inline-player-word{border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text);flex-direction:column;gap:.25rem;padding:.55rem .85rem;animation:.2s ease-out section-reveal;display:flex}.word-header{align-items:center;gap:.4rem;min-height:26px;line-height:1.5;display:flex}.word-header .spinner{vertical-align:-2px;border-width:1.5px;width:13px;height:13px}.word-name{color:var(--text);font-weight:600}.word-pos{font-size:var(--fs-xs);color:var(--text-muted);letter-spacing:.02em}.word-translation{font-family:var(--font-read);color:var(--text);font-style:italic;line-height:1.5}.word-actions{align-items:center;gap:.15rem;margin-left:auto;display:flex}.word-action{cursor:pointer;color:var(--text-muted);font-size:var(--fs-md);background:0 0;border:none;justify-content:center;align-items:center;width:26px;height:26px;padding:0;line-height:1;transition:color .2s;display:inline-flex}.word-action .spinner{border-width:1.5px;width:12px;height:12px}.word-action .icon-stop{width:8px;height:8px}.word-action:hover:not(:disabled){color:var(--text)}.word-action:disabled{cursor:default;opacity:.4}.word-action.saved{color:var(--accent)}.word-details{font-size:var(--fs-sm);color:var(--text-secondary);flex-wrap:wrap;gap:.1rem .6rem;line-height:1.5;display:flex}.word-infinitive{white-space:nowrap}.word-synonyms{white-space:normal}.word-usage{color:var(--text-secondary);line-height:1.5}.inline-player-explanation{border-top:1px solid var(--border-subtle);font-size:var(--fs-sm);color:var(--text);flex-direction:column;gap:.3rem;padding:.55rem .85rem;animation:.2s ease-out section-reveal;display:flex}.explain-translation{font-family:var(--font-read);color:var(--text);font-style:italic;line-height:1.55}.explain-grammar{color:var(--text-secondary);line-height:1.55}.sentence.active .word{cursor:pointer;border-radius:3px;transition:background-color .15s}.sentence.active .word:hover{background:rgba(var(--accent-rgb), .2)}.sentence .word-highlighted{background:rgba(var(--accent-rgb), .3);border-radius:3px}.word.saved{-webkit-text-decoration:underline dotted var(--accent);text-decoration:underline dotted var(--accent);text-underline-offset:2px;text-decoration-thickness:1.5px}.full-player{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-card);box-shadow:var(--shadow-card);align-items:center;gap:.75rem;padding:.65rem .85rem;display:flex}.full-player-btn{border:2px solid var(--accent);width:38px;height:38px;color:var(--accent);font-size:var(--fs-lg);cursor:pointer;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;line-height:1;transition:background-color .2s;display:flex}.full-player-btn:hover{background:var(--accent-soft)}.full-player-btn.loading{cursor:default}.full-player-track{background:rgba(var(--overlay-rgb), .09);cursor:pointer;border-radius:2px;flex:1;height:4px;position:relative}.full-player-track:before{content:"";position:absolute;inset:-14px 0}.full-player-fill{background:var(--accent);pointer-events:none;border-radius:2px;height:100%;position:absolute;top:0;left:0}.full-player-caret{background:var(--accent);pointer-events:none;width:12px;height:12px;box-shadow:0 0 6px rgba(var(--accent-rgb), .3);border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.full-player-track.disabled{cursor:default;opacity:.3;pointer-events:none}.full-player-time{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;min-width:4.5em}.words-header{border-bottom:1px solid var(--border-subtle);align-items:center;gap:1rem;margin-bottom:1.25rem;padding:0 0 .75rem;display:flex}.pill-group{background:rgba(var(--overlay-rgb), .07);border-radius:var(--radius-sm);padding:3px;display:flex}.pill-group>button,.pill-group>select{color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:.25rem .75rem;font-weight:500;transition:color .2s,background-color .2s}.pill-group>button:hover,.pill-group>select:hover{color:var(--text)}.pill-group>.active,.pill-group>.filtered{background:rgba(var(--highlight-rgb), .12);color:var(--text);box-shadow:0 1px 3px rgba(var(--overlay-rgb), .12)}.pill-group>select:focus{outline:none}#words-text-filter{max-width:12rem}.words-sort-controls{flex-shrink:0;margin-left:auto}.word-card{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-card);box-shadow:var(--shadow-card);cursor:pointer;grid-template-rows:auto auto auto;grid-template-columns:1fr auto;column-gap:.5rem;margin-bottom:.5rem;padding:.6rem 1.2rem;transition:background-color .2s,box-shadow .2s;display:grid;position:relative}@media (hover:hover){.word-card:hover{background:var(--surface-card-hover);box-shadow:var(--shadow-card-hover)}}.word-card-sentence{font-family:var(--font-read);font-size:var(--fs-lg);color:var(--text);grid-column:1;line-height:1.8}.word-card-actions{z-index:2;grid-area:1/2/3;align-self:center;gap:.25rem;display:flex;position:relative}.word-card-gap-wrap{display:inline-block}.word-card-gap{border:none;border-bottom:2px dashed rgba(var(--accent-rgb), .4);min-width:5em;color:var(--text);font-size:inherit;text-align:center;cursor:pointer;background:0 0;padding:.1rem .3rem;font-family:inherit;transition:border-color .2s,color .2s;display:inline-block}@media (hover:hover){.word-card-gap:hover{border-bottom-color:rgba(var(--accent-rgb), .6)}}.word-card-gap.revealed{border-bottom-style:solid;border-bottom-color:rgba(var(--highlight-rgb), .15);cursor:default;font-weight:500}.word-card-gap.correct{border-bottom-color:var(--success);color:var(--success)}.word-card-gap.incorrect{border-bottom-color:var(--error);color:var(--error)}.word-card-info{font-size:var(--fs-xs);color:var(--text-muted);gap:.75rem;margin-top:.35rem;display:flex}.word-card-stats{white-space:nowrap;cursor:pointer;border-radius:var(--radius-sm);margin:-.4rem -.2rem -.4rem -.6rem;padding:.4rem .6rem}@media (hover:hover){.word-card-stats:hover{color:var(--text-secondary);background:rgba(var(--highlight-rgb), .06)}}.word-card-translation{color:var(--text-secondary);font-style:italic}.word-card-synonyms{color:var(--text-muted);font-size:.85em}.word-card-synonyms:before{content:" · "}.word-card-btn{border-radius:var(--radius-sm);width:30px;height:30px;color:var(--text-muted);font-size:var(--fs-sm);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s,background-color .2s;display:flex}@media (hover:hover){.word-card-btn:hover{color:var(--text);background:rgba(var(--highlight-rgb), .08)}}.word-card-btn.confirming{color:var(--error);background:rgba(var(--error-rgb), .12)}.word-card-delete{opacity:.35;transition:opacity .2s,color .2s,background-color .2s}@media (hover:hover){.word-card-delete:hover{opacity:1}}.word-card.not-due{opacity:.45}.word-card.not-due.focused{opacity:1}@media (hover:hover){.word-card.not-due:hover{opacity:1}}.word-card.focused{box-shadow:inset 3px 0 0 var(--accent), var(--shadow-card-hover)}.word-card-btn.loading{pointer-events:none;cursor:default}.word-card-btn .spinner{border-width:1.5px;width:14px;height:14px}.word-card-btn .icon-stop{width:10px;height:10px}.word-card-grade-bar{z-index:2;grid-area:3/1/auto/-1;justify-content:flex-end;gap:.5rem;max-height:0;padding-top:0;transition:max-height .22s,padding-top .22s;display:flex;position:relative;overflow:hidden}.word-card.revealed .word-card-grade-bar{max-height:60px;padding-top:.5rem}.grade-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);min-width:72px;color:var(--text-secondary);font-size:var(--fs-lg);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:.3rem .85rem;font-weight:500;line-height:1;transition:background-color .15s,color .15s,border-color .15s,transform 50ms;display:inline-flex}.grade-btn.grade-miss{color:var(--error);border-color:rgba(var(--error-rgb), .3)}.grade-btn.grade-know{color:var(--success);border-color:rgba(var(--success-rgb), .3)}.grade-btn.grade-miss.selected{background:rgba(var(--error-rgb), .15);border-color:var(--error)}.grade-btn.grade-know.selected{background:rgba(var(--success-rgb), .15);border-color:var(--success)}@media (hover:hover){.grade-btn.grade-miss:hover{background:rgba(var(--error-rgb), .1);border-color:var(--error)}.grade-btn.grade-know:hover{background:rgba(var(--success-rgb), .1);border-color:var(--success)}}.grade-btn:active{transform:scale(.98)}.word-cards-empty{color:var(--text-muted);font-size:var(--fs-md);text-align:center;padding:3rem 2rem}.due-divider{color:var(--text);font-size:var(--fs-md);background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:var(--radius);flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;margin:1.25rem 0;padding:.75rem 1rem;display:flex}.due-divider-icon{background:var(--accent);width:1.5rem;height:1.5rem;color:var(--bg);font-size:var(--fs-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.due-divider-text{text-align:center}.due-divider .load-more-btn{background:var(--bg);border-color:var(--accent-border);color:var(--accent);margin:0}.due-divider .load-more-btn:hover{color:var(--accent-hover);border-color:var(--accent)}.shortcuts-help{font-size:var(--fs-xs);color:var(--text-muted);opacity:.5;flex-wrap:wrap;gap:.3rem 1rem;padding-top:.25rem;transition:opacity .2s;display:flex}.shortcuts-help:hover{opacity:.85}.shortcut kbd{border:1px solid var(--border);background:var(--surface);border-radius:3px;padding:.1rem .35rem;font-family:inherit;line-height:1.2;display:inline-block}.icon-record{background:currentColor;border-radius:50%;width:12px;height:12px;display:block}.icon-stop{background:currentColor;border-radius:2px;width:12px;height:12px;display:block}.icon-triangle{border-top:5px solid #0000;border-bottom:5px solid #0000;border-left:8px solid;width:0;height:0;margin-left:2px;display:block}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(var(--error-rgb), .4)}50%{box-shadow:0 0 0 8px rgba(var(--error-rgb), 0)}}@keyframes section-reveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid #0000;border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}.loading-spinner-small{border-width:2px;width:18px;height:18px}.loading-view,.login-view{justify-content:center;align-items:center;min-height:100vh;display:flex}.content-loading{justify-content:center;align-items:center;padding:4rem 0;display:flex}.login-view{padding:1rem}.login-form{flex-direction:column;gap:.75rem;width:100%;max-width:340px;display:flex}.login-title{font-size:var(--fs-xl);color:var(--text);text-align:center;margin-bottom:.5rem;font-weight:600}.login-form input[type=email],.login-form input[type=password]{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-md);padding:.65rem .85rem;transition:border-color .2s}.login-form input:focus{border-color:var(--accent-border);outline:none}.login-form input::placeholder{color:var(--text-muted)}.login-form button[type=submit]{border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:var(--fs-md);cursor:pointer;border:none;padding:.65rem;font-weight:600;transition:background-color .2s}.login-form button[type=submit]:hover{background:var(--accent-hover)}.login-form button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.login-google-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:var(--fs-md);cursor:pointer;padding:.65rem;font-weight:500;transition:background-color .2s,border-color .2s}.login-google-btn:hover{background:var(--surface-hover);border-color:var(--accent-border)}.login-divider{color:var(--text-muted);font-size:var(--fs-sm);align-items:center;gap:.75rem;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--border);flex:1;height:1px}.login-error{color:var(--error);font-size:var(--fs-sm);text-align:center}.login-toggle{color:var(--text-muted);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;text-align:center;background:0 0;border:none;padding:0;transition:color .2s}.login-toggle:hover{color:var(--text)}.header-user{align-items:center;gap:.5rem;display:flex}.user-email{font-size:var(--fs-sm);color:var(--text-muted)}.logout-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-xs);cursor:pointer;background:0 0;padding:.3rem .7rem;transition:color .2s,border-color .2s}.logout-btn:hover{color:var(--text);border-color:var(--text-secondary)}.stories-onboarding{text-align:center;max-width:420px;margin:2rem auto}.stories-onboarding-title{font-size:var(--fs-xl);margin-bottom:.5rem;font-weight:700}.stories-onboarding-desc{font-size:var(--fs-md);color:var(--text-secondary);margin-bottom:1.5rem}.stories-onboarding-levels{flex-direction:column;gap:.6rem;display:flex}.onboarding-level-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-card);cursor:pointer;text-align:left;width:100%;font-family:var(--font-ui);justify-content:space-between;align-items:center;padding:1rem 1.2rem;transition:background .15s,box-shadow .15s;display:flex}.onboarding-level-btn:hover{background:var(--surface-card-hover);box-shadow:var(--shadow-card-hover)}.onboarding-level-label{font-size:var(--fs-md);color:var(--text);font-weight:700}.onboarding-level-desc{font-size:var(--fs-sm);color:var(--text-muted)}.stories-subheader{max-width:900px;margin:0 auto;padding-bottom:.4rem}.stories-level-nav{align-items:center;gap:.4rem;padding:.3rem 0;display:flex}.stories-level-arrow{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);font-size:var(--fs-lg);cursor:pointer;font-family:var(--font-ui);background:0 0;flex-shrink:0;justify-content:center;align-items:center;transition:color .15s,border-color .15s;display:flex}.stories-level-arrow:hover:not(:disabled){color:var(--text);border-color:var(--text-secondary)}.stories-level-arrow:disabled{opacity:.25;cursor:default}.stories-level-info{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.stories-level-name{font-size:var(--fs-md);color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.stories-level-progress{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}.stories-add-btn{border:1px dashed var(--border);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--text-secondary);font-size:var(--fs-lg);cursor:pointer;line-height:1;font-family:var(--font-ui);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding-bottom:2px;transition:color .15s,border-color .15s,background .15s;display:flex}.stories-add-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}.stories-go-current{color:var(--accent);font-family:var(--font-ui);font-size:var(--fs-xs);cursor:pointer;white-space:nowrap;opacity:.8;background:0 0;border:none;padding:.15rem .3rem;transition:opacity .15s}.stories-go-current:hover{opacity:1}.stories-go-current-short{display:none}.stories-custom-input{padding:.5rem 0}.stories-custom-input textarea{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);font-family:var(--font-ui);font-size:var(--fs-sm);resize:vertical;padding:.5rem .75rem}.stories-custom-actions{gap:.5rem;margin-top:.4rem;display:flex}.stories-custom-add-btn{border-radius:var(--radius-sm);background:var(--accent);color:var(--on-accent);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;border:none;padding:.4rem .9rem;font-weight:600;transition:background .15s}.stories-custom-add-btn:hover{background:var(--accent-hover)}.stories-custom-cancel-btn{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-ui);font-size:var(--fs-sm);cursor:pointer;background:0 0;padding:.4rem .9rem}.stories-cards{--fade-size:2rem;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;gap:.5rem;padding:.3rem 2px .5rem;display:flex;overflow-x:auto}.stories-cards-fade-left{-webkit-mask-image:linear-gradient(to right, transparent, black var(--fade-size));-webkit-mask-image:linear-gradient(to right, transparent, black var(--fade-size));mask-image:linear-gradient(to right, transparent, black var(--fade-size))}.stories-cards-fade-right{-webkit-mask-image:linear-gradient(to left, transparent, black var(--fade-size));-webkit-mask-image:linear-gradient(to left, transparent, black var(--fade-size));mask-image:linear-gradient(to left, transparent, black var(--fade-size))}.stories-cards-fade-left.stories-cards-fade-right{-webkit-mask-image:linear-gradient(to right, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);-webkit-mask-image:linear-gradient(to right, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent);mask-image:linear-gradient(to right, transparent, black var(--fade-size), black calc(100% - var(--fade-size)), transparent)}.stories-cards::-webkit-scrollbar{display:none}.stories-card{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--surface-card);min-width:9rem;max-width:13rem;color:var(--text);font-family:var(--font-ui);text-align:left;cursor:pointer;scroll-snap-align:center;flex-direction:column;flex-shrink:0;align-items:flex-start;gap:.2rem;padding:.55rem .85rem;transition:background .15s,border-color .15s,box-shadow .15s;display:flex;position:relative}.stories-card:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border);box-shadow:var(--shadow-card)}.stories-card-active:hover:not(:disabled){background:rgba(var(--accent-rgb), .18);border-color:var(--accent-border)}.stories-card-title{font-size:var(--fs-sm);color:var(--text);text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;max-width:100%;font-weight:600;line-height:1.2;display:-webkit-box;overflow:hidden}.stories-card-meta{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;align-items:center;gap:.35rem;line-height:1.2;display:inline-flex}.stories-card-indicator{flex-shrink:0;justify-content:center;align-items:center;width:.85em;height:.85em;font-size:.9em;line-height:1;display:inline-flex}.stories-card-indicator-progress{background:conic-gradient(currentColor var(--progress,0%), transparent 0);border:1px solid;border-radius:50%}.stories-card-completed .stories-card-meta{color:var(--success)}.stories-card-active{background:var(--accent-soft)}.stories-card-active .stories-card-title,.stories-card-active .stories-card-meta{color:var(--accent)}.stories-card-locked{opacity:.5;cursor:default}.stories-card-locked:hover{background:var(--surface-card);box-shadow:none}.stories-card-custom{border-style:dashed;border-color:var(--border)}.stories-card-loading{cursor:default}.stories-card-loading:hover{background:var(--surface-card);border-color:var(--border-subtle);box-shadow:none}.stories-card-loading .stories-card-meta{min-height:1.2em}.stories-card-skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg, var(--surface-hover) 0%, var(--border-subtle) 50%, var(--surface-hover) 100%);background-size:200% 100%;width:4.5rem;height:.7em;animation:1.4s ease-in-out infinite stories-skeleton-shimmer;display:inline-block}@keyframes stories-skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.stories-complete-btn{transition:color .15s}.stories-complete-btn-ready{color:var(--success);font-weight:600}.stories-empty{text-align:center;max-width:900px;color:var(--text-muted);font-size:var(--fs-md);margin:2rem auto}.stories-inline-actions{gap:.5rem;margin-left:auto;display:flex}.stories-delete-btn{opacity:.5}.stories-delete-btn:hover{opacity:1}.stories-delete-btn.confirming{opacity:1;border-color:var(--error);color:var(--error);background:0 0}.hidden{display:none!important}body{-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media (width<=640px){body{padding:0 .5rem}header{gap:.4rem;padding:.75rem 0}.nav-link{font-size:var(--fs-sm);padding:.4rem .55rem}.user-email{display:none}.header-controls{grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:.4rem .75rem;padding:.4rem .6rem;display:grid}.control-row{display:contents}.control-row select{min-width:0;padding:.35rem .5rem}.sentences-panel{padding:.4rem .75rem;line-height:2}.text-controls{flex-wrap:wrap}.shortcuts-help{display:none}.words-header{padding-left:0}.word-card{padding:.5rem .75rem}.word-card-sentence{grid-column:1/-1}.word-card-actions{grid-area:2/2}.word-card-info{font-size:var(--fs-xs);align-self:center}.word-card.has-translation .word-card-stats{display:none}.word-card-btn{width:38px;height:38px;font-size:var(--fs-md)}.full-player-btn{width:44px;height:44px;font-size:var(--fs-lg)}.data-controls{flex-wrap:wrap}.stories-level-arrow,.stories-add-btn{width:44px;height:44px}.stories-level-name{font-size:var(--fs-sm)}.stories-go-current-full{display:none}.stories-go-current-short{display:inline}.stories-card{min-width:8rem;max-width:11rem;padding:.45rem .6rem .45rem .7rem}.stories-card-title{font-size:var(--fs-xs)}.stories-onboarding{margin:1rem auto;padding:0 .5rem}.onboarding-level-btn{flex-direction:column;align-items:flex-start;gap:.2rem}}