@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap";:root{--paper: #f5f1e8;--card: #fbfaf6;--ink: #202a2a;--muted: #75817c;--line: #d9d6ca;--coral: #e86f55;--mint: #dce8d9;--yellow: #f1d77d;--shadow: 0 18px 50px rgba(42, 47, 41, .08);font-family:DM Sans,sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper)}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app-shell{max-width:1380px;min-height:100vh;margin:auto;padding:0 5.5vw;position:relative;overflow:hidden}.topbar{height:92px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:-.03em;font-size:18px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--ink);color:var(--paper);font:500 12px DM Mono;letter-spacing:-.15em;padding-right:3px}.session-chip,.small-hint,footer{color:var(--muted);font:11px DM Mono,monospace;letter-spacing:.02em}.spark{color:var(--coral);font-size:17px;vertical-align:-1px;margin-right:5px}.page-grid{display:grid;grid-template-columns:62px minmax(0,810px);gap:clamp(35px,8vw,125px);max-width:1000px;margin:0 auto;padding:74px 0 80px}.side-note{border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;min-height:660px;padding-right:19px}.vertical-word{writing-mode:vertical-rl;transform:rotate(180deg);color:#a0a69f;font:10px DM Mono;letter-spacing:.18em}.side-bottom{display:flex;flex-direction:column;gap:13px;align-items:center;color:#a0a69f;font:9px DM Mono;writing-mode:vertical-rl}.page-number{color:var(--coral);font-size:13px}.side-rule{height:54px;width:1px;background:var(--line)}.practice-page{min-width:0}.intro-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px}.kicker,.eyebrow{color:var(--coral);font:10px DM Mono;letter-spacing:.12em;text-transform:uppercase;margin:0 0 13px}h1{font-size:clamp(42px,5.1vw,70px);line-height:.98;letter-spacing:-.065em;margin:0;font-weight:600}h1 em{color:var(--coral);font-family:Fraunces,serif;font-weight:500;letter-spacing:-.07em}.progress-track{width:128px;display:flex;align-items:center;gap:7px;padding-bottom:6px}.progress-track span{width:19px;height:3px;background:#d3d5ca;border-radius:5px}.progress-track span.current{background:var(--coral);width:30px}.progress-track span.done{background:var(--ink)}.progress-track small{margin-left:4px;color:var(--muted);font:10px DM Mono}.paper-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.setup-card{position:relative;padding:34px 38px 38px}.card-number{position:absolute;right:31px;top:27px;color:#bdc2b9;font:12px DM Mono}.sentence-field{position:relative;display:block}.sentence-autocomplete{display:block;width:100%}.sentence-input,.sentence-autocomplete .p-autocomplete-input{display:block;width:100%;min-height:78px;border:0;border-bottom:1px solid var(--line);border-radius:0;outline:0;padding:0 35px 25px 0;background:transparent;color:var(--ink);font:600 28px/1.25 Fraunces,serif;letter-spacing:-.035em;box-shadow:none}.sentence-input::placeholder{color:#b8beb4}.completion-hint{display:block;margin-top:12px;color:#a6ada3;font:10px DM Mono}.completion-hint kbd{border:1px solid #c9c8bd;border-bottom-width:2px;border-radius:3px;padding:2px 5px;color:var(--ink);font:10px DM Mono;margin-right:4px}.sentence-field:has(.p-autocomplete-panel){padding-bottom:205px}.p-autocomplete-panel{position:absolute!important;z-index:20;left:0!important;right:0!important;width:100%!important;max-width:100%;max-height:190px;margin-top:8px;border:1px solid var(--line);border-radius:3px;background:var(--card);box-shadow:var(--shadow);overflow-y:auto;overflow-x:hidden}.p-autocomplete-list{padding:5px}.p-autocomplete-option{padding:0!important;border-radius:2px}.p-autocomplete-option.p-focus{background:var(--mint)!important;color:var(--ink)!important}.suggestion-option{display:grid;grid-template-columns:minmax(72px,1fr) minmax(64px,.8fr) minmax(0,2fr);gap:10px;align-items:baseline;min-width:0;padding:10px 12px}.suggestion-option strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 16px Fraunces,serif}.suggestion-option span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--coral);font:11px DM Mono}.suggestion-option small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}.sentence-field:has(.suggestion-tray){padding-bottom:0}.sentence-editor{min-width:0}.suggestion-tray{margin-top:20px;border:1px solid #d9d6ca;border-radius:3px;background:#f7f5ee;box-shadow:0 12px 28px #2a2f290d;overflow:hidden}.tray-heading{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #dfddd3;color:#65716a;font:10px DM Mono;letter-spacing:.04em}.tray-heading span{display:inline-flex;align-items:center;gap:7px}.tray-heading i{width:6px;height:6px;border-radius:50%;background:var(--coral)}.tray-heading small{color:#9aa29a;font:inherit}.suggestion-list{max-height:318px;overflow-y:auto;overscroll-behavior:contain;padding:6px}.suggestion-item{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:3px 18px;border:0;border-left:2px solid transparent;border-radius:2px;padding:10px 12px;background:transparent;color:var(--ink);text-align:left;transition:background .15s,border-color .15s}.suggestion-item:hover,.suggestion-item.active{border-left-color:var(--coral);background:#e6eee3}.suggestion-word{min-width:0;font:600 18px/1.1 Fraunces,serif;letter-spacing:-.02em}.suggestion-phonetic{align-self:center;color:#b25945;font:11px DM Mono;white-space:nowrap}.suggestion-translation{grid-column:1 / -1;display:-webkit-box;overflow:hidden;color:#63706b;font-size:12px;line-height:1.45;white-space:pre-line;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tray-footnote{margin:0;padding:9px 14px;border-top:1px solid #dfddd3;color:#939b93;font:10px DM Mono}.active-definition{border-top:1px solid #dfddd3;padding:11px 14px 12px;background:#fcfbf7}.active-definition span{color:#b25945;font:10px DM Mono}.active-definition p{max-height:82px;margin:6px 0 0;overflow-y:auto;color:#53615b;font-size:12px;line-height:1.55;white-space:pre-line}.selector-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:27px 0 31px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{padding:0}.segmented{display:flex;gap:7px}.segmented button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:10px 12px;border-radius:4px;font-size:12px;transition:.2s}.segmented button.selected{color:var(--ink);border-color:var(--ink);background:var(--mint)}.segmented button:hover{border-color:var(--ink)}.segmented.compact button{min-width:82px}.flag{color:var(--coral);font:10px DM Mono;margin-right:5px}.primary-button{width:100%;border:0;border-radius:3px;padding:16px 18px;background:var(--ink);color:var(--paper);font-weight:600;text-align:left;transition:transform .2s,background .2s}.primary-button span{float:right;color:var(--yellow);font-size:20px;line-height:14px}.primary-button:hover:not(:disabled){background:var(--coral);transform:translateY(-2px)}.small-hint{margin:19px 0}.small-hint span{color:var(--coral);font-size:18px;vertical-align:-2px;margin-right:4px}.practice-area{display:grid;gap:14px}.sentence-display{position:relative;padding:25px 31px 28px}.sentence-display p{max-width:650px;margin:0;font:500 clamp(25px,3vw,38px)/1.18 "Fraunces",serif;letter-spacing:-.04em}.change-button{border:0;background:none;color:var(--muted);padding:0;margin-top:20px;font:10px DM Mono;text-decoration:underline;text-underline-offset:4px}.reference-card{background:var(--mint);border:1px solid #c9d9c8;padding:21px 27px 19px}.reference-topline,.reference-content{display:flex;align-items:center}.reference-topline{justify-content:space-between}.voice-note{color:#65816d;font:10px DM Mono}.dot{display:inline-block;width:6px;height:6px;background:#719e7c;border-radius:50%;margin-right:5px}.reference-content{gap:17px;padding:13px 0 11px}.play-button{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:14px}.waveform{height:35px;flex:1;display:flex;align-items:center;gap:3px}.waveform i{display:block;width:3px;height:var(--height);min-height:6px;background:#8aa896;border-radius:3px;transition:height .2s}.waveform.active i:nth-child(3n){background:var(--coral);animation:pulse .65s infinite alternate}.listen-label{color:#5e7368;font:10px DM Mono;white-space:nowrap}.progress-line{height:2px;background:#c6d7c7}.progress-line span{display:block;height:100%;background:var(--coral);transition:width .2s}.ipa-line{display:flex;align-items:baseline;gap:12px;border-top:1px solid #c6d7c7;padding-top:12px}.ipa-line .eyebrow{color:#65816d;margin:0}.ipa-line strong{color:var(--ink);font:500 17px DM Mono;letter-spacing:.02em}.recorder-card{position:relative;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:15px;min-height:102px;padding:20px 25px;border:1px dashed #c9bfb0;background:#fbfaf680}.recorder-card.recording{border-color:var(--coral);background:#fff5f0}.recorder-card.ready{border-style:solid}.recording-orbit{width:47px;height:47px;border:1px solid #d7d3c8;border-radius:50%;display:grid;place-items:center;position:relative}.recording-orbit span{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral)}.recording-orbit span:nth-child(2){width:31px;height:31px;border:1px solid #eeb09f;background:transparent}.recording-orbit span:nth-child(3){width:3px;height:3px;background:var(--paper)}.recording{animation:breathe 1.4s infinite}.recorder-copy{display:grid;gap:4px}.recorder-copy .eyebrow{margin:0}.recorder-copy strong{font:600 17px Fraunces,serif}.recorder-copy small{color:var(--muted);font-size:11px}.recorder-actions{display:flex;align-items:center;gap:8px}.record-button{border:0;border-radius:3px;background:var(--coral);color:#fff;padding:12px 15px;font-size:12px;font-weight:600;white-space:nowrap}.record-button:hover:not(:disabled){background:#d85e47}.record-button.stop{background:var(--ink)}.upload-button{border:1px solid #c9bfb0;border-radius:3px;background:transparent;color:var(--ink);padding:11px 13px;font-size:12px;font-weight:600;white-space:nowrap}.upload-button:hover:not(:disabled){border-color:var(--coral);color:var(--coral)}.mic-mark{font-size:8px;margin-right:8px;color:var(--yellow)}.stop-mark{display:inline-block;width:9px;height:9px;background:var(--yellow);margin-right:8px}.text-button{grid-column:2;justify-self:start;border:0;background:none;color:var(--muted);font:10px DM Mono}.inline-error,.error-banner{color:#b74836;font-size:12px}.inline-error{margin:0}.recording-help{grid-column:2 / -1;display:grid;gap:4px;padding:10px 12px;border-left:3px solid var(--coral);background:#fff1ec}.recording-help small{color:#8c665c;font-size:10px;line-height:1.5}.error-banner{border-left:3px solid var(--coral);padding:10px 13px;background:#fff1ec;margin:0}.recorded-playback{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0 0;border-top:1px solid #ddd7cc}.recorded-playback>div{display:grid;gap:3px}.recorded-playback .eyebrow{margin:0;color:var(--ink)}.recorded-playback small{color:var(--muted);font-size:11px}.recorded-playback audio{width:min(330px,100%);height:34px}.processing{color:var(--muted);font:11px DM Mono;margin:0}.loader{width:8px;height:8px;display:inline-block;border:1px solid var(--coral);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;margin-right:7px}.results-card{background:var(--ink);color:var(--paper);padding:28px 31px 30px;margin-top:10px}.results-card .eyebrow{color:var(--yellow)}.result-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.result-heading h2{font:500 27px/1.1 Fraunces,serif;letter-spacing:-.04em;margin:0}.score-ring{display:grid;place-items:center;width:77px;height:77px;flex:0 0 auto;border:1px solid #67716b;border-radius:50%;transform:rotate(-8deg)}.score-ring strong{color:var(--yellow);font:600 26px Fraunces;transform:rotate(8deg)}.score-ring span{color:#9ba59e;font:9px DM Mono;transform:rotate(8deg);margin-top:-25px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #4e5a54;border-bottom:1px solid #4e5a54;margin:25px 0 19px}.metric-row div{padding:13px 0;display:flex;flex-direction:column;gap:5px}.metric-row div+div{border-left:1px solid #4e5a54;padding-left:20px}.metric-row span{color:#9ba59e;font:9px DM Mono;text-transform:uppercase}.metric-row strong{color:var(--paper);font:500 21px Fraunces}.heard-line p{margin:7px 0 0;font:17px Fraunces}.coaching-note{display:flex;align-items:flex-start;gap:10px;background:#2d3934;padding:12px;margin-top:20px;color:#c8d2c9;font-size:11px;line-height:1.5}.coaching-note p{margin:0}.coaching-note b{color:var(--yellow);font-family:DM Mono}.note-pin{display:grid;place-items:center;width:16px;height:16px;flex:0 0 auto;border-radius:50%;background:var(--yellow);color:var(--ink);font:11px DM Mono}footer{max-width:1000px;margin:0 auto;padding:22px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between}@keyframes pulse{0%{transform:scaleY(.7)}to{transform:scaleY(1.2)}}@keyframes breathe{50%{box-shadow:0 0 0 5px #e86f551a}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:720px){.app-shell{padding:0 20px}.topbar{height:70px}.session-chip{display:none}.page-grid{display:block;padding:46px 0 60px}.side-note{display:none}.intro-row{margin-bottom:34px}.progress-track{width:105px}.setup-card{padding:28px 22px 26px}.selector-grid{grid-template-columns:1fr;gap:18px}.sentence-input,.sentence-autocomplete .p-autocomplete-input{font-size:24px}.suggestion-option{grid-template-columns:1fr 1fr}.suggestion-option small{grid-column:1 / -1}.sentence-field:has(.p-autocomplete-panel){padding-bottom:220px}.recorder-card{grid-template-columns:44px 1fr;padding:18px}.record-button{grid-column:2;justify-self:start}.recorded-playback{align-items:flex-start;flex-direction:column;gap:10px}.recorded-playback audio{width:100%}.reference-content{flex-wrap:wrap}.waveform{min-width:150px}.listen-label{width:100%;margin-left:60px}.result-heading h2{font-size:23px}.score-ring{width:66px;height:66px}.metric-row div+div{padding-left:10px}.metric-row strong{font-size:17px}footer{font-size:9px;gap:15px}}@media(max-width:480px){.app-shell{padding:0 14px}.topbar{height:62px}.brand{font-size:16px}.brand-mark{width:27px;height:27px}.page-grid{padding:32px 0 42px}.intro-row{align-items:flex-start;gap:18px;margin-bottom:28px}h1{font-size:clamp(34px,11vw,48px)}.progress-track{width:86px;flex-wrap:wrap;justify-content:flex-end;gap:4px}.progress-track span{width:13px}.progress-track span.current{width:20px}.progress-track small{width:100%;margin:2px 0 0;text-align:right}.setup-card{padding:24px 17px 20px}.card-number{right:17px;top:20px}.sentence-input{min-height:105px;padding-right:0;font-size:23px}.suggestion-tray{margin-top:14px}.tray-heading{padding:9px 10px}.suggestion-list{max-height:250px;padding:4px}.suggestion-item{grid-template-columns:minmax(0,1fr);gap:5px;padding:10px}.suggestion-phonetic{grid-row:2;white-space:normal;font-size:10px}.suggestion-translation{grid-row:3}.active-definition{padding:10px}.segmented{flex-wrap:wrap}.segmented button{min-height:42px;flex:1 1 auto}.segmented.compact button{min-width:0}.sentence-display{padding:20px 18px 22px}.sentence-display p{font-size:27px;overflow-wrap:anywhere}.reference-card{padding:17px 18px}.reference-topline{gap:10px;align-items:flex-start}.reference-content{gap:11px}.waveform{min-width:0;width:calc(100% - 54px)}.listen-label{margin-left:53px}.ipa-line{align-items:flex-start;flex-direction:column;gap:7px}.ipa-line strong{font-size:15px;line-height:1.5;overflow-wrap:anywhere}.recorder-card{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px}.recording-orbit{width:40px;height:40px}.recorder-copy strong{font-size:16px}.recorder-copy small{line-height:1.4}.recorder-actions{grid-column:1 / -1;width:100%}.recorder-actions .record-button,.recorder-actions .upload-button{flex:1}.record-button{grid-column:1 / -1;width:100%}.recorder-actions .record-button{grid-column:auto;width:auto}.text-button{grid-column:1 / -1;justify-self:start}.recording-help{grid-column:1 / -1}.results-card{padding:22px 18px 24px}.result-heading{align-items:center}.result-heading h2{font-size:21px}.score-ring{width:60px;height:60px}.score-ring strong{font-size:22px}.metric-row{margin:20px 0 16px}.metric-row div{padding:11px 0}.metric-row div+div{padding-left:8px}.metric-row strong{font-size:16px}.heard-line p{font-size:16px;overflow-wrap:anywhere}.coaching-note{padding:10px}footer{flex-direction:column;gap:8px;line-height:1.4}}