@charset "UTF-8";

:root {
    color-scheme: dark;
    --page: #090b10;
    --panel: #13161eea;
    --field: #0c0e14;
    --button: #232733;
    --line: #2c303d;
    --line-soft: #222631;
    --ink: #eef0f7;
    --muted: #a3aec8;
    --quiet: #727b90;
    --accent: #6977e8;
    --green: #83d6ad;
    --red: #ed858b;
    --yellow: #ffd451;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-synthesis: none;
    background: var(--page);
    color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
body:has(.modal-backdrop) { overflow: hidden; }
button, input, select { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .36; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #8798ff; outline-offset: 3px; }
::selection { background: #596aa866; }
input, select { color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 9px; min-width: 0; }
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { appearance: none; }
select { width: 100%; min-height: 44px; padding: 0 34px 0 16px; }
input[type="range"] { appearance: none; width: 100%; padding: 0; height: 20px; background: transparent; border: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 7px; border-radius: 7px; background: #202632; border: 1px solid #343c4e; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 19px; height: 19px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 2px solid #d1d8f2; box-shadow: 0 1px 4px #0006; }
input[type="range"]::-moz-range-track { height: 5px; border-radius: 7px; background: #202632; border: 1px solid #343c4e; }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 2px solid #d1d8f2; box-shadow: 0 1px 4px #0006; }
h1, h2, p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.icon { width: 21px; height: 21px; flex: 0 0 auto; vertical-align: middle; }
.app-backdrop, .custom-backdrop, .backdrop-shade { position: fixed; inset: 0; pointer-events: none; z-index: -2; }
.app-backdrop { background: radial-gradient(ellipse at 83% 45%, #28314355, transparent 53%), radial-gradient(ellipse at 12% 94%, #1e283633, transparent 53%), #090b10; overflow: hidden; }
.app-backdrop::after { content: ""; position: absolute; inset: -60%; transform: rotate(-33deg); background: repeating-linear-gradient(90deg, transparent 0 112px, #8e9ab405 114px 116px, transparent 118px 245px); mask-image: radial-gradient(ellipse, black, transparent 65%); }
.custom-backdrop { background-size: cover; background-position: center; z-index: -1; }
.backdrop-shade { background: #05070b; z-index: -1; }
.app-shell { max-width: 1510px; margin: 0 auto; padding: 30px 26px 40px; }
.account-bar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px; margin: -12px 0 18px; font-size: 13px; }
.account-name { color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.account-bar .button { min-height: 36px; padding: 7px 10px; }
.access-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.access-card { width: min(100%, 490px); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 5vw, 44px); background: linear-gradient(140deg, #1b2131ed, #11141ded); box-shadow: 0 24px 100px #0007; }
.access-card h1 { font-size: clamp(26px, 5vw, 34px); letter-spacing: -.035em; overflow-wrap: anywhere; }
.access-card form { display: grid; gap: 22px; margin-top: 28px; }
.remember-choice { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.remember-choice input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.access-note { color: var(--quiet); font-size: 12px; line-height: 1.7; margin: 24px 0 0; }
.members-page { max-width: 970px; margin: 30px auto; }
.members-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 25px; }
.members-heading h1 { font-size: 36px; letter-spacing: -.04em; }
.members-heading .muted { max-width: 540px; }
.access-panel { padding: clamp(18px, 3vw, 28px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 18px; min-width: 0; }
.access-panel h2 { font-size: 18px; margin-bottom: 20px; }
.invite-form { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.invite-form .field { flex: 1; min-width: 160px; }
.access-panel .field { display: grid; gap: 9px; margin: 0; color: var(--muted); font-size: 13px; }
.access-panel .field input { width: 100%; padding: 12px 14px; min-height: 45px; font-size: 15px; }
.invitation-result { padding: 20px; background: #1a284399; border: 1px solid #435885; border-radius: 10px; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.invitation-result .field { flex: 1 1 240px; }
.invitation-result p { flex-basis: 100%; color: var(--muted); font-size: 12px; margin: 0; line-height: 1.5; }
.member-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; border-top: 1px solid var(--line-soft); padding: 18px 0; }
.member-row > div:first-child { min-width: 0; flex: 1 1 230px; overflow-wrap: anywhere; }
.member-row:last-child { padding-bottom: 0; }
.member-detail { display: block; color: var(--muted); font-size: 12px; line-height: 1.65; margin-top: 5px; }
.browser-label { max-width: 500px; color: var(--quiet); }
.member-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.member-row .button { min-height: 38px; font-size: 13px; padding: 8px 13px; }
.resume-training { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); padding: 0 6px 15px; }
.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--ink); background: var(--button); border: 1px solid #3b4050; border-radius: 10px; min-height: 44px; padding: 10px 18px; font-weight: 700; box-shadow: 0 2px 3px #0003, inset 0 1px #ffffff04; transition: background .15s, border-color .15s; }
.button:hover:not(:disabled), .icon-button:hover { background: #303645; border-color: #525b72; }
.button-primary { background: #5364d1; border-color: #6d7deb; }
.button-primary:hover:not(:disabled) { background: #6676e2; }
.button-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.icon-button { width: 44px; padding: 10px; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.6; }
.eyebrow { color: var(--muted); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .14em; margin-bottom: 12px; }
.catalog-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 32px; align-items: start; }
.filter-sidebar { min-width: 0; padding-top: 1px; }
.search-field { display: flex; align-items: center; position: relative; }
.search-field .icon { position: absolute; left: 13px; width: 17px; color: var(--quiet); }
.search-field input { width: 100%; min-height: 44px; padding: 10px 12px 10px 39px; }
input::placeholder { color: #8f9ab5; opacity: 1; }
.filter-section { margin-top: 27px; }
.filter-section h2 { color: var(--muted); font-size: 12px; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: .075em; margin-bottom: 11px; }
.segmented { display: flex; gap: 3px; background: #1d202a; padding: 3px; border-radius: 8px; }
.segmented button { flex: 1; border: 0; background: transparent; border-radius: 6px; color: var(--muted); min-height: 36px; padding: 7px 8px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.segmented button:hover { color: var(--ink); }
.segmented .is-selected { background: #11141c; color: var(--ink); box-shadow: 0 1px 3px #0003; }
.count-slider { margin: 16px 0 12px; }
.count-input { display: flex; position: relative; align-items: center; }
.count-input input { text-align: center; width: 100%; min-height: 59px; font-weight: 700; font-size: 22px; padding: 10px 53px 10px 15px; }
.count-input > span { position: absolute; right: 17px; font-size: 12px; color: #697183; font-weight: 700; }
.count-range { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.count-range label { flex: 1; min-width: 0; }
.count-range label span { font-size: 11px; display: block; color: var(--quiet); margin-bottom: 7px; }
.count-range input { width: 100%; height: 52px; font-size: 20px; text-align: center; }
.filter-help { color: var(--quiet); font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.target-letters { margin-top: 16px; }
.target-heading { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.letter-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; }
.letter-button { min-height: 33px; border: 1px solid #303849; border-radius: 6px; background: #151a24; color: var(--muted); font-size: 14px; font-weight: 700; padding: 4px; }
.letter-button:hover:not(:disabled) { border-color: #7585b4; color: var(--ink); }
.letter-button.is-selected { background: #344362; color: #f0f4ff; border-color: #849bcd; }
.target-priority-label { color: var(--muted); font-size: 12px; margin: 17px 0 8px; }
.letter-priorities { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.letter-priorities li { display: flex; align-items: center; gap: 11px; padding: 4px 7px; border: 1px solid #303849; border-radius: 7px; background: #171d29; }
.priority-number { color: var(--quiet); font-size: 11px; min-width: 12px; }
.letter-priorities strong { margin-right: auto; font-size: 15px; }
.priority-button { background: transparent; border: 1px solid #384359; border-radius: 5px; color: var(--ink); width: 28px; height: 28px; padding: 0; font-size: 18px; }
.priority-button:hover:not(:disabled) { background: #34415b; }
.length-controls { display: flex; gap: 10px; }
.operator-button { width: 42px; padding: 0; font-size: 19px; }
.length-controls .segmented { min-width: 162px; }
.sort-controls { display: flex; gap: 8px; }
.sort-controls select { flex: 1; width: 145px; padding-left: 10px; font-size: 13px; }
.sort-controls .segmented button { font-size: 11px; padding: 8px; }
.sidebar-bottom { border-top: 1px solid var(--line-soft); margin-top: 29px; padding-top: 19px; }
.sidebar-bottom .button { padding-left: 0; font-size: 13px; }
.catalog-panel { background: var(--panel); border: 1px solid #353c4d; border-radius: 15px; padding: 15px 20px 18px; box-shadow: 0 18px 70px #0003; min-width: 0; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-soft); padding-bottom: 18px; margin-bottom: 20px; }
.catalog-tabs { display: flex; gap: 8px; }
.catalog-tabs .button { font-size: 13px; background: #1c202a; padding: 10px 14px; border-color: #2e3341; }
.catalog-tabs .tab-active { background: #2a3040; border-color: #56617c; }
.catalog-toolbar-end { display: flex; gap: 14px; align-items: center; }
.result-count { font-size: 16px; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.result-count span { font-size: 12px; }
.practice-start { font-size: 14px; padding: 10px 16px; }
.practice-start .icon { width: 14px; height: 14px; }
.syllable-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; }
.syllable-tile { border: 1px solid var(--line-soft); border-radius: 9px; display: flex; align-items: center; padding: 0 7px; min-height: 51px; background: #11141b; min-width: 0; transition: border-color .15s, background .15s; }
.syllable-tile:hover { border-color: #525a70; background: #1a1e28; }
.star-button { color: #726634; opacity: .46; background: transparent; border: 0; padding: 8px 3px; flex: 0 0 auto; line-height: 0; }
.star-button .icon { width: 18px; height: 18px; }
.star-button:hover { color: var(--yellow); opacity: .85; }
.is-bookmarked { color: var(--yellow) !important; opacity: 1; }
.syllable-open { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: 5px; color: var(--ink); background: none; border: 0; padding: 15px 0 15px 4px; }
.syllable-open strong { font-size: 18px; letter-spacing: .015em; }
.word-count { border: 1px solid #2a2e3b; color: #bac8e8; background: #0b0e15; border-radius: 4px; padding: 2px 4px; font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.syllable-perfect { background: #1e493744; border-color: #3c7657; }
.syllable-perfect:hover { background: #23523d77; }
.syllable-wrong { border: 1px dashed #cd6974; background: #25151b40; }
.syllable-wrong .syllable-open strong { color: #efabb0; }
.catalog-footer { margin-top: 31px; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pagination .button { font-size: 13px; min-height: 41px; padding: 9px 13px; }
.pagination .icon { width: 14px; }
.page-description { color: var(--muted); font-size: 13px; margin: 0 4px; }
.page-number { min-width: 40px; }
.pagination .is-current { background: var(--accent); border-color: #8290f6; color: white; }
.page-dots { color: var(--quiet); padding: 0 4px; }
.mobile-filter-button { display: none; }
.empty-state, .loading-state { text-align: center; padding: 85px 25px; color: var(--muted); }
.empty-state h1, .empty-state h2, .loading-state h2 { color: var(--ink); font-size: 24px; }
.empty-state p, .loading-state p { font-size: 14px; line-height: 1.6; }
.empty-state > .icon { width: 30px; height: 30px; margin-bottom: 20px; }
.loader { display: block; width: 34px; height: 34px; border: 2px solid #2c354a; border-top-color: #9aa8e8; border-radius: 50%; margin: 65px auto 28px; animation: spin 1s linear infinite; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 25px; background: #03050bd9; backdrop-filter: blur(9px); overscroll-behavior: contain; }
.dialog { background: #141820; border: 1px solid #3d4558; border-radius: 16px; padding: 28px; width: min(880px,100%); max-height: 88dvh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; box-shadow: 0 26px 100px #0008; }
.dialog-header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.dialog-header h2 { margin: 0; font-size: 30px; }
.dialog-header h2 .star-button { vertical-align: middle; }
.dialog-header .eyebrow { margin-bottom: 8px; }
.example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 25px 0 10px; }
.answer-example { display: flex; align-items: center; justify-content: center; min-height: 66px; border: 1px solid #353e52; border-radius: 9px; background: #1e2431; padding: 15px; font-size: 14px; overflow-wrap: anywhere; text-align: center; }
.more-answers { color: var(--ink); font-size: 30px; }
.more-answers:hover { background: #2f384c; }
.answer-list { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; margin: 20px 0 25px; }
.answer-list > span { padding: 7px 10px; background: #202634; color: #c2cce1; border: 1px solid #333c50; border-radius: 6px; font-size: 13px; overflow-wrap: anywhere; max-width: 100%; }
.background-dialog { max-width: 570px; }
.file-picker { border: 1px dashed #54617d; border-radius: 12px; background: #1a202d; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; margin: 24px 0; cursor: pointer; }
.file-picker > span { font-size: 12px; color: var(--muted); }
.file-picker:focus-within { outline: 2px solid #8798ff; outline-offset: 3px; }
.field { display: flex; flex-direction: column; gap: 15px; font-size: 13px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 27px; }
.practice-shell { min-height: calc(100dvh - 70px); display: flex; flex-direction: column; }
.practice-header { display: flex; align-items: center; justify-content: space-between; color: var(--quiet); font-size: 12px; }
.practice-header .button { font-size: 13px; }
.practice-header .icon-button { background: transparent; border-color: transparent; color: var(--muted); }
.header-dot { padding: 0 10px; color: #485269; }
.practice-stage { flex: 1; min-width: 0; }
.practice-center { width: min(520px,100%); margin: clamp(55px,11vh,120px) auto 25px; text-align: center; }
.prompt-meta { display: flex; align-items: center; justify-content: center; gap: 8px; color: #a7b8d9; font-size: 17px; font-variant-numeric: tabular-nums; margin-bottom: 22px; }
.prompt-track { position: relative; }
.prompt-track h1 { font-family: "Bahnschrift", "Trebuchet MS", sans-serif; font-size: clamp(66px,6.7vw,108px); line-height: 1.05; margin: 0; font-weight: 750; letter-spacing: .035em; text-shadow: 0 4px 32px #0006; animation: prompt-in .15s ease-out; }
.upcoming { position: absolute; top: 17%; left: calc(100% - 8px); display: flex; align-items: center; gap: 65px; color: #a4aec0; opacity: .28; pointer-events: none; font-family: "Bahnschrift", sans-serif; font-weight: 700; font-size: 42px; }
.upcoming span:last-child { font-size: 27px; opacity: .45; }
.practice-category { font-size: 11px; letter-spacing: .12em; color: #778198; margin: 18px 0 38px; text-transform: uppercase; }
.practice-input { width: 100%; height: 49px; text-align: center; font-size: 17px; padding: 10px 15px; background: #0b0d13d9; border-color: #31394c; }
.practice-input:focus { border-color: #697ba9; outline: 2px solid #57668733; outline-offset: 2px; }
.practice-input::placeholder { font-size: 15px; }
.practice-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.practice-actions .button { padding: 10px 16px; min-height: 46px; font-size: 14px; }
.bookmark-action .icon { width: 18px; color: #786b39; }
.bookmark-action.is-bookmarked .icon { color: var(--yellow); }
.bookmark-action span { color: var(--ink); }
kbd { font: 600 11px "Trebuchet MS", sans-serif; color: #8b93a6; margin-left: 5px; white-space: nowrap; }
.reveal-button { margin-top: 29px; font-size: 13px; color: #c0c8d9; background: #242936ae; }
.reveal-button .icon { width: 17px; }
.practice-feedback { min-height: 28px; font-size: 12px; margin-top: 22px; overflow-wrap: anywhere; }
.is-perfect { color: var(--green); }
.is-wrong { color: var(--red); }
.practice-stage[data-busy="true"] [data-practice-action] { pointer-events: none; }
.practice-answers { max-width: 960px; margin: 0 auto 30px; padding: 25px; background: #141923ef; border: 1px solid #364259; border-radius: 13px; }
.practice-answers header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.practice-answers h2 { margin: 0; font-size: 16px; }
.practice-answers header > span { font-size: 12px; color: var(--muted); }
.practice-footer { width: min(530px,100%); margin: 38px auto 10px; }
.practice-progress { height: 3px; border-radius: 5px; background: #242b3b; overflow: hidden; margin-bottom: 20px; }
.practice-progress span { display: block; height: 100%; background: #7588bd; transition: width .2s ease; }
.practice-footer-row { display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.practice-footer-row .exit-button { margin-left: auto; font-size: 12px; padding: 8px 15px; min-height: 36px; color: #e59097; border-color: #8b444d; background: #27161bcc; }
.practice-complete { text-align: center; max-width: 680px; margin: 12vh auto 30px; }
.practice-complete h1 { font-size: clamp(32px,5vw,55px); letter-spacing: -.04em; margin-bottom: 18px; }
.practice-complete p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.complete-icon { display: inline-grid; place-items: center; border: 1px solid #4c705b; color: var(--green); background: #1a352a77; width: 60px; height: 60px; border-radius: 20px; margin-bottom: 24px; }
.completion-counts { display: flex; justify-content: center; gap: 50px; margin: 30px 0; font-size: 13px; }
.completion-counts strong { font-size: 40px; display: block; margin-bottom: 5px; }
#blazor-error-ui { display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 100; padding: 18px; background: #291922; color: #f7c5d1; border: 1px solid #865165; border-radius: 9px; }
#blazor-error-ui a { text-decoration: underline; }
#blazor-error-ui .dismiss { float: right; background: none; border: none; color: inherit; }
.storage-error { position: fixed; bottom: 10px; left: 20px; right: 20px; z-index: 90; padding: 15px; background: #391f28; border: 1px solid #a45a72; border-radius: 8px; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes prompt-in { from { opacity: .55; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1450px) {
    .syllable-open { flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 0 9px 4px; }
}
@media (max-width: 1320px) {
    .catalog-layout { grid-template-columns: 250px minmax(0,1fr); gap: 22px; }
    .catalog-panel { padding-left: 14px; padding-right: 14px; }
    .catalog-toolbar { gap: 10px; flex-wrap: wrap; }
    .catalog-toolbar-end { margin-left: auto; }
    .syllable-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .upcoming { gap: 30px; font-size: 30px; }
    .upcoming span:last-child { display: none; }
}
@media (max-width: 1060px) {
    .app-shell { padding: 22px 18px; }
    .catalog-layout { grid-template-columns: 220px minmax(0,1fr); gap: 20px; }
    .syllable-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .catalog-tabs .button { padding: 9px 11px; font-size: 12px; }
    .upcoming { left: calc(100% - 55px); font-size: 25px; }
}
@media (max-width: 760px) {
    .app-shell { padding: 15px 12px 24px; }
    .catalog-layout { display: flex; flex-direction: column; gap: 15px; }
    .mobile-filter-button { display: flex; width: 100%; }
    .filter-sidebar { display: none; width: 100%; padding: 15px; border: 1px solid var(--line); background: #11151eef; border-radius: 12px; }
    .show-filters .filter-sidebar { display: block; }
    .filter-section { margin-top: 22px; }
    .catalog-panel { width: 100%; padding: 12px; }
    .catalog-toolbar { flex-wrap: wrap; gap: 14px; margin-bottom: 15px; }
    .catalog-toolbar-end { width: 100%; justify-content: space-between; }
    .catalog-tabs { width: 100%; }
    .catalog-tabs .button { flex: 1; }
    .syllable-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
    .syllable-tile { padding: 0 4px; min-height: 50px; }
    .syllable-open { flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 0 9px 3px; }
    .syllable-open strong { font-size: 17px; }
    .word-count { font-size: 12px; }
    .page-description { flex-basis: 100%; text-align: center; order: -1; margin-bottom: 7px; }
    .pagination { gap: 5px; }
    .pagination .button { min-height: 36px; padding: 8px 10px; font-size: 12px; }
    .pagination .button .icon { display: none; }
    .modal-backdrop { padding: 12px; }
    .dialog { padding: 20px; }
    .example-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .practice-header { font-size: 10px; }
    .practice-header .button { padding: 8px 5px; font-size: 11px; }
    .practice-center { margin-top: 11vh; max-width: 500px; }
    .upcoming { display: none; }
    .practice-category { margin-bottom: 32px; }
    .practice-actions { gap: 7px; }
    .practice-actions .button { font-size: 12px; padding: 10px; flex: 1; }
    .practice-actions kbd { font-size: 9px; margin-left: 0; }
    .bookmark-action span { display: none; }
    .practice-actions .bookmark-action { flex: 0; min-width: 47px; }
    .practice-input::placeholder { font-size: 13px; }
    .practice-footer-row { gap: 16px; font-size: 12px; }
    .practice-footer-row .exit-button { padding: 8px; }
    .practice-answers { padding: 17px; }
    .practice-complete { margin-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }