.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid #354766;border-radius:10px;background:#172039;color:#d5eeff;font-size:11px;font-weight:800;white-space:nowrap}
.site-return{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 10px;border:1px solid #354766;border-radius:10px;background:#172039;color:#d5eeff;text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
.site-return:hover{background:#243451;border-color:#58d8c4}
.site-return:focus-visible{outline:2px solid #66f0d1;outline-offset:2px}
.site-return svg{display:block;width:17px;height:17px;flex:none}
.theme-toggle:hover{background:#243451;border-color:#58d8c4}
.theme-toggle svg{display:block;width:17px;height:17px;flex:none}
html[data-theme="light"] .theme-toggle{background:#fff;border-color:#c5d8da;color:#25454d}
html[data-theme="light"] .theme-toggle:hover{background:#ecf7f3;border-color:#6cae9d}
html[data-theme="light"] .site-return{background:#fff;border-color:#c5d8da;color:#25454d}
html[data-theme="light"] .site-return:hover{background:#ecf7f3;border-color:#6cae9d}
.resume-card{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:13px 15px;border:1px solid #39786f;border-radius:13px;background:#163033;color:#e7fbf6}
.resume-copy{display:grid;gap:3px;min-width:0}.resume-copy small{color:#78ddc7;font-size:10px;font-weight:800}.resume-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.resume-copy span{color:#b9d1d3;font-size:10px}
.resume-actions{display:flex;align-items:center;gap:7px;flex:none}.resume-button{border:0;border-radius:9px;padding:9px 11px;background:#61e0c2;color:#102b2e;font-size:11px;font-weight:800}.resume-clear{border:1px solid #63827e;border-radius:9px;padding:8px 10px;background:transparent;color:#d5e9e5;font-size:10px;font-weight:700}
.resume-button:hover{background:#8df2da}.resume-clear:hover{border-color:#9cc3bb;background:#ffffff12}
html[data-theme="light"] .resume-card{background:#eaf7f1;border-color:#b7dbcc;color:#1b3b3c}html[data-theme="light"] .resume-copy small{color:#176e5d}html[data-theme="light"] .resume-copy span{color:#506e71}html[data-theme="light"] .resume-button{background:#147864;color:#fff}html[data-theme="light"] .resume-button:hover{background:#0d604f}html[data-theme="light"] .resume-clear{border-color:#a8c8bf;color:#2c5651}html[data-theme="light"] .resume-clear:hover{background:#d9eee6}
.missing-audio{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:9px 0;padding:10px;border:1px solid #7fa9a5;border-radius:10px;background:#19353a;color:#e3f5f2;font-size:11px;line-height:1.5}.missing-audio .secondary-btn{flex:none}.storage-warning{position:fixed;z-index:20;left:50%;bottom:18px;transform:translateX(-50%);max-width:min(620px,calc(100vw - 30px));padding:11px 15px;border:1px solid #e1ab57;border-radius:10px;background:#fff2dc;color:#583b1e;box-shadow:0 8px 25px #0003;font-size:12px;line-height:1.5}
html[data-theme="light"] .missing-audio{background:#eef8f4;border-color:#b7dacc;color:#2a4c4a}

/* Allow the focused word to scroll above an overlaid mobile keyboard. */
html.keyboard-open{scroll-behavior:auto}
html.keyboard-open .practice-page{padding-bottom:calc(110px + var(--keyboard-inset,0px))}
@media(min-width:761px) and (min-height:701px){
 html.keyboard-open,html.keyboard-open body,html.keyboard-open #app,html.keyboard-open .app-shell{height:auto;min-height:100%;overflow-x:hidden}
 html.keyboard-open body{overflow-y:auto;-webkit-overflow-scrolling:touch}
 html.keyboard-open .practice-page{height:auto;overflow:visible}
 html.keyboard-open .workbench{flex:none;min-height:0;align-items:start}
 html.keyboard-open .listen-surface,html.keyboard-open .insight-surface{height:auto;overflow:visible}
 html.keyboard-open .word-entry{flex:none;overflow:visible}
}

/* Keep the keyboard scrolling fix in both color modes. */
@media(max-width:760px),(max-height:700px){
 html,body,#app,.app-shell{height:auto;min-height:100%;overflow-x:hidden}
 body{overflow-y:auto;-webkit-overflow-scrolling:touch}
 .home-page,.practice-page{height:auto;min-height:calc(100svh - 55px);overflow:visible}
 .neon-load{overflow:visible}
 .practice-page{display:block;scroll-padding-bottom:24px}
 .workbench{display:grid;position:static;grid-template-rows:auto;flex:none;align-items:start;min-height:0}
 .listen-surface,.insight-surface{position:static;height:auto;min-height:0;overflow:visible}
 .listen-surface{display:flex!important}
 .insight-surface{display:flex!important}
 .insight-surface .tool-tabs{height:auto;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px}
 .insight-surface .tool-tabs button{font-size:12px;padding:9px 4px}
 .insight-surface .tool-tabs .compact-write-tab{display:none!important}
 .insight-surface .tool-content,.workbench.compact-tool-open .tool-content{display:block;overflow:visible}
 .workbench.compact-tool-open .listen-surface,.workbench.compact-tool-open .insight-surface{display:flex;height:auto}
 .word-entry{flex:none;min-height:130px;max-height:none;overflow:visible}
 .hint-word-list{max-height:none;overflow:visible}
 .listen-surface textarea{flex:none;min-height:130px}
 .word-slot .word-input,.text-input,.listen-surface textarea,.cue-navigation select,.speed-select{font-size:16px}
 .score-flow{max-height:none;overflow:visible}
 .tool-content{flex:none}
}
@media(max-width:760px){
 .top-actions{gap:7px}
 .theme-toggle{width:32px;min-height:32px;padding:5px}
 .theme-toggle span{display:none}
 .site-return{width:32px;min-height:32px;padding:5px}
 .site-return span{display:none}
 .resume-card{align-items:stretch;flex-direction:column;gap:10px}.resume-actions{justify-content:flex-start}.missing-audio{align-items:stretch;flex-direction:column}
 .home-page{min-height:calc(100svh - 55px)}.practice-page{min-height:calc(100svh - 55px);padding:12px}
 .home-story{height:auto;min-height:170px}.neon-load{flex:none}.load-mode{flex:none}.load-bottom{grid-template-columns:minmax(0,1fr) auto}
 .workbench{grid-template-columns:minmax(0,1fr);gap:10px}
 .listen-surface,.insight-surface{padding:14px;border-radius:16px}
 .insight-surface{padding:0}.tool-content{padding:15px}
 .home-story p,.load-head p{font-size:13px}.load-footer span,.scope-label,.url-mode label{font-size:12px}
 .practice-head .eyebrow,.cue-label,.cue-time,.strip-stat small,.session-progress>span{font-size:11px}
 .head-buttons .ghost-btn,.player-time,.write-label small,.tool-note,.ai-caution{font-size:12px}
 .strip-stat b{font-size:14px}.write-label span,.tool-kicker{font-size:15px}
 .word-slot{padding:7px 8px;min-width:56px}.word-slot .word-input{font-size:16px}.word-slot .slot-number,.slot-length{font-size:11px}
 .hint-word{min-height:35px}.hint-word b{font-size:12px}.hint-word small,.hint-focus small{font-size:11px}.hint-focus-word{font-size:23px}
 .write-actions .secondary-btn,.write-actions .primary-btn,.pill-btn,.speed-select{font-size:12px}
}
@media(max-width:360px){.topbar .brand-mark{display:none}}
@media(max-height:700px) and (min-width:761px){
 .topbar{height:56px}.practice-page{min-height:calc(100svh - 56px)}
 .workbench{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
 .listen-surface,.insight-surface{padding:16px}.insight-surface{padding:0}
 .word-entry{min-height:180px}.tool-content{padding:16px}
}

/* Keep the two destinations explicit and the caption time readable. */
html .topbar .brand{border:0;background:transparent;padding:0;text-align:left;cursor:pointer}
html .topbar .brand:hover{color:var(--green)}
html .cue-bar>div:first-child{min-width:0;flex:1}
html .cue-bar h2{max-width:100%}
html .cue-navigation{flex:none}
html .cue-navigation select{width:136px;max-width:none;min-width:0;font-size:13px}
html .write-actions .caption-actions{display:flex;gap:7px}
html .write-actions .caption-actions button{white-space:nowrap}
html .word-slot.correct .word-input:disabled{opacity:1;cursor:default;-webkit-text-fill-color:currentColor}
html .word-slot.correct{user-select:none}
@media(max-width:760px),(max-height:700px){
 html,body,#app,.app-shell{overflow-x:clip}
 body{overflow-y:visible}
 html .practice-page .listen-surface .player{position:sticky;top:calc(env(safe-area-inset-top) + 8px);z-index:5;box-shadow:0 8px 22px #10182726}
}
html.keyboard-open,html.keyboard-open body,html.keyboard-open #app,html.keyboard-open .app-shell{overflow-x:clip}
html.keyboard-open body{overflow-y:visible}
html.keyboard-open .practice-page .listen-surface .player{position:sticky;top:calc(env(safe-area-inset-top) + 8px);z-index:5;box-shadow:0 8px 22px #10182726}
@media(max-width:760px){
 html .topbar{height:auto;min-height:55px;flex-wrap:wrap;row-gap:5px;padding-top:5px;padding-bottom:5px}
 html .topbar .top-actions{margin-left:auto}
 html .site-return{width:auto;min-height:32px;padding:5px 8px}
 html .site-return span{display:inline}
 html .cue-navigation select{width:145px;font-size:16px}
 html .write-actions{flex-direction:column;align-items:stretch}
 html .write-actions .caption-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
 html .write-actions .caption-actions button{min-width:0;padding:8px 4px}
 html .write-actions .ai-caution{align-self:flex-end}
}