:root{--sei-type-size:16px}
html[data-sei-text-size="large"]{--sei-type-size:18px}
html[data-sei-text-size="xlarge"]{--sei-type-size:20px}
html{font-size:var(--sei-type-size)}
body{font-size:1rem}

#textSizeSetting{min-height:44px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--purple);font:inherit;font-size:1rem;font-weight:700}
#textSizeSetting:focus-visible{outline:3px solid var(--purple);outline-offset:3px}

html[data-sei-text-size="large"] button,
html[data-sei-text-size="large"] input,
html[data-sei-text-size="large"] select,
html[data-sei-text-size="large"] textarea,
html[data-sei-text-size="xlarge"] button,
html[data-sei-text-size="xlarge"] input,
html[data-sei-text-size="xlarge"] select,
html[data-sei-text-size="xlarge"] textarea{font-size:max(1rem,1em);line-height:1.35}

html[data-sei-text-size="large"] .app-shell{padding-bottom:104px}
html[data-sei-text-size="xlarge"] .app-shell{padding-bottom:112px}
html[data-sei-text-size="large"] .topbar,
html[data-sei-text-size="xlarge"] .topbar{height:auto;min-height:74px;gap:12px;padding-top:12px;padding-bottom:12px}
html[data-sei-text-size="large"] .bottom-nav button,
html[data-sei-text-size="xlarge"] .bottom-nav button{min-width:0;font-size:.78rem;line-height:1.25}
html[data-sei-text-size="large"] .bottom-nav i,
html[data-sei-text-size="xlarge"] .bottom-nav i{font-size:20px}

html[data-sei-text-size="large"] .brand i,
html[data-sei-text-size="xlarge"] .brand i{font-size:13px}
html[data-sei-text-size="large"] .sei span,
html[data-sei-text-size="xlarge"] .sei span{font-size:24px}
html[data-sei-text-size="large"] .book>i,
html[data-sei-text-size="xlarge"] .book>i{font-size:24px}
html[data-sei-text-size="large"] .friend i,
html[data-sei-text-size="xlarge"] .friend i{font-size:22px}

html[data-sei-text-size="large"] .setting-row,
html[data-sei-text-size="xlarge"] .setting-row{align-items:flex-start}
html[data-sei-text-size="large"] .storage-setting>summary,
html[data-sei-text-size="xlarge"] .storage-setting>summary{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:1rem}
html[data-sei-text-size="large"] .storage-setting>summary b,
html[data-sei-text-size="xlarge"] .storage-setting>summary b{float:none;flex:0 1 auto;margin-left:0;font-size:.875rem;text-align:right;overflow-wrap:anywhere}
html[data-sei-text-size="large"] .storage-setting-content,
html[data-sei-text-size="xlarge"] .storage-setting-content{font-size:1rem}
html[data-sei-text-size="xlarge"] #settings .setting-row select{width:100%}

html[data-sei-text-size="large"] .input-tools,
html[data-sei-text-size="xlarge"] .input-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-sei-text-size="large"] .input-tools>span,
html[data-sei-text-size="xlarge"] .input-tools>span{grid-column:1/-1;text-align:left}
html[data-sei-text-size="large"] .soft,
html[data-sei-text-size="xlarge"] .soft,
html[data-sei-text-size="large"] .practice-tabs button,
html[data-sei-text-size="xlarge"] .practice-tabs button{white-space:normal;overflow-wrap:anywhere}
html[data-sei-text-size="large"] .repeat-row,
html[data-sei-text-size="xlarge"] .repeat-row,
html[data-sei-text-size="large"] .result-actions,
html[data-sei-text-size="xlarge"] .result-actions{flex-wrap:wrap}
/* Preserve the normal four-button row and the existing landscape controls. */
@media (orientation:portrait){
  html:is([data-sei-text-size="large"],[data-sei-text-size="xlarge"]) body:not(.practice-landscape) .practice-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html:is([data-sei-text-size="large"],[data-sei-text-size="xlarge"]) body:not(.practice-landscape) .practice-quick-actions :is(#listenBtn,#allSentencesToggle,.start-landscape,.talk){font-size:1rem;line-height:1.4;white-space:normal;overflow-wrap:anywhere;letter-spacing:normal;min-height:48px;height:100%;padding:10px 8px}
}
html[data-sei-text-size="large"] .record-tools>div,
html[data-sei-text-size="xlarge"] .record-tools>div{flex-wrap:wrap;overflow:visible}
html[data-sei-text-size="large"] .book div,
html[data-sei-text-size="xlarge"] .book div,
html[data-sei-text-size="large"] .friend div,
html[data-sei-text-size="xlarge"] .friend div,
html[data-sei-text-size="large"] .speak-bar input,
html[data-sei-text-size="xlarge"] .speak-bar input{min-width:0}
html[data-sei-text-size="large"] #toast,
html[data-sei-text-size="xlarge"] #toast{width:max-content;max-width:calc(100vw - 32px);white-space:normal;text-align:center;overflow-wrap:anywhere}

html[data-sei-text-size="large"] body.practice-landscape,
html[data-sei-text-size="xlarge"] body.practice-landscape{overflow:auto}
html[data-sei-text-size="large"] body.practice-landscape .result,
html[data-sei-text-size="xlarge"] body.practice-landscape .result{overflow:auto}
html[data-sei-text-size="large"] body.practice-landscape .sentence-panel,
html[data-sei-text-size="xlarge"] body.practice-landscape .sentence-panel{height:auto;min-height:100dvh;overflow-y:auto}
html[data-sei-text-size="large"] body.practice-landscape .sentence-card-top,
html[data-sei-text-size="xlarge"] body.practice-landscape .sentence-card-top{flex-wrap:wrap}
html[data-sei-text-size="large"] body.practice-landscape .card-practice-tabs,
html[data-sei-text-size="xlarge"] body.practice-landscape .card-practice-tabs{margin-left:0;flex-wrap:wrap}