:root{--green:#164d42;--lime:#d8ed9c;--bg:#f5f4ee;--ink:#223d35}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}header{max-width:850px;margin:auto;padding:24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce1d5}.brand{color:var(--green);text-decoration:none;font-size:26px;font-weight:700}.brand span{display:block;font-size:11px;letter-spacing:2px;margin-top:5px;font-weight:500}button,input,select,textarea{font:inherit}button{cursor:pointer;background:white;border:1px solid #d6ddcf;border-radius:12px;padding:12px 16px;color:var(--green)}button:hover{background:#edf2e5}button:disabled{opacity:.5;cursor:default}main{max-width:650px;margin:auto;padding:22px 24px 40px}.hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:12px 0 32px}h1{font-size:34px;line-height:1.2;letter-spacing:-1px;margin:0;font-weight:700}h1 em{font-style:normal;color:#6e8a49}.tile{width:130px;flex-shrink:0;background:var(--green);color:white;border-radius:22px;padding:22px 20px;margin-right:8px;transform:rotate(2deg);box-shadow:8px 8px 0 #e4e8d9}.tile small{font-size:10px;letter-spacing:2px}.tile strong{display:block;font-size:50px;line-height:1.2;margin:16px 0 10px;color:white}.tile span{font-size:14px;color:var(--lime)}.workspace{background:white;border:1px solid #e1e5da;border-radius:24px;padding:24px}.approach{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#69756c;min-height:44px;margin-bottom:8px}.approach button{border:0;padding:10px 12px;font-size:13px;min-height:40px;background:transparent;border-radius:10px;line-height:20px}.approach button:hover{background:#edf2e5}.tabs{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #d6ddcf;margin-bottom:20px}.tabs button{border:0;border-radius:0;border-bottom:3px solid transparent;background:transparent;padding:12px 0;color:var(--ink)}.tabs button.active{border-bottom-color:var(--green);font-weight:600}label{display:block;font-size:13px;margin:16px 0 6px}select,input,textarea{width:100%;padding:13px;border:1px solid #d6ddcf;border-radius:12px;background:white;color:var(--ink)}.rule{background:#f1f5e9;border-radius:14px;padding:18px;margin:22px 0;font-size:14px;line-height:1.7}.rule strong{display:block;margin-bottom:6px}table{width:100%;border-collapse:collapse}td{padding:12px 0;border-bottom:1px solid #e7eadf}td:first-child{color:#758272}td:nth-child(2){font-size:22px;font-weight:600}td button{border:0;padding:10px}button.primary{width:100%;background:var(--green);color:white;border:0;border-radius:16px;padding:18px;margin-top:22px}button.primary:hover{background:#246b59}.exercise{text-align:center}.count{font-size:13px;text-align:left;color:#69756c;margin:24px 0 12px}.track{height:4px;background:#e7ecdf;border-radius:4px}.track i{display:block;height:100%;background:#8fad57;border-radius:4px}.phrase{font-size:27px;line-height:1.4;margin:30px 0 16px;font-weight:500;overflow-wrap:anywhere}.hint{font-size:14px;color:#69756c;margin:18px 0}.speakButton{display:flex;align-items:center;justify-content:center;min-height:66px}.speakButton svg{width:28px;height:28px}.feedback{background:#e7efdb;border-radius:14px;padding:18px;margin:20px 0;line-height:1.6;white-space:pre-line}.feedback.wrong{background:#fff0e6}.minor{font-size:13px;color:#69756c;background:transparent;border:0;margin-top:12px}.keyboard{margin-top:16px}.keyboard summary{font-size:13px;color:#69756c;cursor:pointer}.keyboard input{margin-top:12px}.settings{margin-top:30px;border-top:1px solid #e5e9de;padding-top:18px;font-size:12px;color:#69756c}.settings summary{cursor:pointer}.settings button{font-size:13px}.settings a{display:block;color:var(--green);margin-top:18px}h2{font-size:24px}.result{text-align:center;padding:24px 0}.result strong{display:block;font-size:45px}.result p{color:#69756c}dialog{border:0;border-radius:20px;padding:26px;width:90%;max-width:480px}dialog::backdrop{background:#123c3580}[hidden]{display:none!important}:focus-visible{outline:3px solid #a0bf58;outline-offset:3px}@media(max-width:420px){header{padding:18px}.brand{font-size:23px}header button{font-size:12px;padding:10px}main{padding:20px 16px}.workspace{padding:18px}.hero{gap:12px}h1{font-size:27px}.tile{width:112px;padding:20px 16px}.tile strong{font-size:46px}.tabs{gap:8px}.tabs button{font-size:14px}.phrase{font-size:25px}}
.brand{display:flex;align-items:center;gap:12px}.brand .logo-icon{position:relative;display:flex;align-items:center;justify-content:center;width:54px;height:54px;flex-shrink:0;border-radius:14px;background:#164d42;margin:0;letter-spacing:0}.brand .logo-card{position:absolute;width:27px;height:35px;border-radius:5px;background:#93af67;transform:rotate(-15deg) translate(-5px,-1px);margin:0}.brand .logo-front{display:flex;align-items:center;justify-content:center;background:#fffef9;color:#164d42;transform:rotate(8deg) translate(4px,1px)}.brand .monogram{font:italic 500 23px/1 Georgia,serif;letter-spacing:-5px;padding-right:5px;margin:0}.brand .monogram span{display:inline;font:inherit;color:#6e8a49;margin:0;letter-spacing:inherit}.brand .logo-type{margin:0;letter-spacing:0}.brand .wordmark{font:400 32px/1.1 Georgia,serif;letter-spacing:-1px;margin:0;color:#164d42}.brand .wordmark em{color:#6e8a49}.brand .tagline{font:500 9px/1.4 system-ui,sans-serif;letter-spacing:1.5px;margin:6px 0 0}header{gap:12px}header #sound{font-size:12px;white-space:nowrap}.tile{box-shadow:0 2px 4px #163d3514,0 8px 20px #163d351a}.approach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;width:calc(100% - 12px);margin:0 auto 14px;min-height:44px}.approach #approachLabel,.approach #progressButton{height:44px;min-height:44px;max-height:44px;border:0;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 8px;line-height:20px;font-size:13px;font-weight:500;box-sizing:border-box;width:100%}.approach #approachLabel{background:#6e8a49;color:white}.approach #progressButton{background:#d8ed9c;color:#164d42;gap:7px}.approach #progressButton:hover{background:#cde48a}.approach #backApproach{grid-column:1 / -1;justify-self:center;min-height:40px;margin-top:-8px}.exercise .phrase{background:#f1f5e9;border-radius:14px;padding:20px;margin:20px 0 14px;font-size:25px}.exercise .count{padding-bottom:12px;border-bottom:1px solid #d6ddcf}.feedback{background:#edf5df}#progressDialog{width:calc(100% - 32px);max-width:490px;max-height:85dvh;overflow-y:auto;border-radius:24px;padding:24px;background:#fffef9;box-shadow:0 3px 10px #10251f1f,0 20px 48px #10251f33}#progressDialog::backdrop{background:#10251f66;backdrop-filter:blur(2px)}.modalHead{display:flex;align-items:center;justify-content:space-between;gap:14px}.modalHead h2{margin:0}.modalHead button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#e4e8d9;font-size:28px;padding:0;flex-shrink:0}.progressSummary{display:flex;gap:14px;background:#f5f8ed;border-radius:14px;padding:16px}.progressSummary div{flex:1;min-width:0}.progressSummary strong{display:block;font-size:24px;font-weight:600}.progressSummary span{display:block;font-size:12px;color:#63735f;margin-top:5px}.statDetail{padding:14px 0;border-bottom:1px solid #e9eddf}.statDetail summary{cursor:pointer;min-height:24px}.statDetail summary strong{float:right;font-weight:500}.statDetail td{font-size:14px!important;font-weight:400!important}.statDetail td:last-child{text-align:right}.statDetail .hint{margin:14px 0}#progressDialog .hint{color:#63735f;font-size:13px}@media(max-width:420px){.brand{gap:9px}.brand .logo-icon{width:44px;height:44px;border-radius:12px}.brand .wordmark{font-size:27px}.brand .tagline{font-size:8px;letter-spacing:1px}header #sound{font-size:11px;padding:8px}header{padding:18px 12px}.approach{gap:20px;width:calc(100% - 8px)}#progressDialog{padding:20px}.progressSummary{gap:10px;padding:14px}.progressSummary strong{font-size:22px}}

.brand .wordmark{font-size:42px}.brand .logo-icon{width:64px;height:64px;border-radius:17px}.brand .logo-card{width:32px;height:42px}.brand .monogram{font-size:28px;letter-spacing:-6px;padding-right:6px}.brand .tagline{font-size:10px;letter-spacing:2px}.brand{gap:16px}@media(max-width:420px){header{padding:20px 18px}.brand .wordmark{font-size:36px}.brand .logo-icon{width:56px;height:56px;border-radius:15px}.brand .tagline{font-size:9px;letter-spacing:1.5px}.brand{gap:12px}}@media(max-width:350px){.brand .wordmark{font-size:32px}.brand .logo-icon{width:50px;height:50px}}
.compactPronunciation .tenseRow{display:flex;align-items:center;gap:14px;margin:8px 0 0}.compactPronunciation .tenseRow label{margin:0;flex-shrink:0;font-size:14px}.compactPronunciation .tenseRow select{flex:1;min-width:0;padding:10px 12px}.compactPronunciation .exercise{margin-top:16px}.dashProgress{display:flex;gap:8px;margin:0 0 16px}.dashProgress span{flex:1;height:4px;border-radius:4px;background:#e2e8d8}.dashProgress span.done{background:#164d42}.compactPronunciation .exercise .phrase{margin:0 0 12px;padding:18px}.compactPronunciation .hint{margin:14px 0}.compactPronunciation .primary{margin-top:12px}
.hero{align-items:stretch;gap:18px;margin-bottom:24px}.heroLeft{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:space-between}.heroTime{margin-top:22px}.heroTime label{font-size:11px;margin:0 0 5px;color:#657c56}.heroTime select{padding:8px 24px 8px 10px;font-size:13px;background:#edf2e4;border:0;border-radius:10px;width:100%}.tile{position:relative;align-self:flex-start;padding-bottom:34px;min-height:172px}.tile #verbSelect{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;outline:none}.tile:focus-within{outline:none}.tile #verbSelect:focus-visible{outline:none}.tile .cardArrow{position:absolute;right:12px;bottom:8px;font-size:25px;line-height:1;color:#d8ed9c;pointer-events:none}.tile #todayVerb{white-space:nowrap;letter-spacing:-.6px;max-width:100%;line-height:1.2}.tile #todayMeaning{display:block;overflow-wrap:anywhere;line-height:1.35}.exercise .hint:empty{display:none}.speakButton{min-height:72px}.speakButton svg{width:36px;height:36px;stroke-width:1.8}
/* Approved mobile composition and introductory guide. */
header #accountButton{width:44px;height:44px;min-height:44px;flex-shrink:0;border-radius:50%;padding:0;background:#edf2e4;display:grid;place-items:center;font-size:17px}
h1{font-size:30px;line-height:1.15}h1 em{display:block;font-size:20px;line-height:1.1;margin-top:8px}
.heroTime{margin-top:20px}.tile{align-self:stretch;transform:rotate(2deg) translateY(-4px);transform-origin:bottom left;margin-right:4px}.tile small{color:#fffef9}.tile strong{color:#fffef9}.tile #todayMeaning,.tile .cardArrow{color:#d8ed9c}
.approach{width:100%;margin-left:0;margin-right:0}.speakButton{min-height:84px}.speakButton svg{width:46.8px;height:46.8px}
.brand .logo-front{width:32px;height:42px;display:flex;align-items:center;justify-content:center}.brand .monogram{font:italic 500 26px/1 Georgia,serif;letter-spacing:-3px;padding:0 2px 0 0;white-space:nowrap}
#accountDialog,#guideDialog{background:#fffef9;color:#223d35;border-radius:24px;box-shadow:0 3px 10px #10251f1f,0 20px 48px #10251f33;max-height:calc(100dvh - 32px);overflow:auto;padding:22px;width:calc(100% - 32px)}
#accountDialog::backdrop,#guideDialog::backdrop{background:#10251f66;backdrop-filter:blur(2px)}.modalHead button{display:grid;place-items:center;line-height:1;width:44px;height:44px;padding:0;flex-shrink:0}.accountIdentity{margin:22px 0;color:#164d42}.accountRow{width:100%;text-align:left;display:flex;justify-content:space-between;border:0;border-bottom:1px solid #dfe4d8;border-radius:0;padding:15px 0;background:transparent}
#guideDialog{max-width:410px}#guideDialog .modalHead{align-items:flex-start}#guideTitle{font-size:26px;line-height:1.15;letter-spacing:-.6px}.guideRhythm{display:flex;justify-content:space-between;gap:18px;background:#d8ed9c;border-radius:16px;padding:18px 28px;margin:20px 0 22px}.guideMetric{display:flex;flex-direction:column;align-items:center;width:max-content;min-width:0}.metricTop{display:flex;align-items:center;justify-content:center;gap:10px;height:41px}.metricTop svg{width:40.8px;height:40.8px;flex-shrink:0;color:#164d42}.metricTop svg.clock{width:36px;height:36px}.metricTop strong{font-size:36px;line-height:1.1;color:#164d42;font-weight:600}.guideMetric>span{font-size:12px;line-height:1.35;margin-top:6px;text-align:center;white-space:nowrap;color:#164d42}.guideStep{display:flex;gap:13px;margin-bottom:18px}.guideStep>span{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;font-size:25px;color:#6e8a49}.guideStep strong{font-size:15px}.guideStep p,.guideTense p{margin:3px 0 0;font-size:14px;line-height:1.45;color:#52634c}.guideTense{background:#eef3e5;border-radius:16px;padding:16px 18px;margin-bottom:18px}.guideTense strong{font-size:14px}#guideDialog .primary{margin:0;min-height:52px;padding:14px}
@media(max-width:420px){.brand .wordmark{font-size:30px}.brand .logo-icon{width:44px;height:48px;border-radius:12px}.brand .logo-card{width:27px;height:34px}.brand .monogram{font-size:20px;letter-spacing:-2px}.brand{gap:10px}.brand .tagline{font-size:8px;letter-spacing:1.5px}header{padding:22px 18px;gap:8px}h1{font-size:25px}h1 em{font-size:17px;line-height:1.1}.approach{width:100%;gap:20px}}
@media(max-width:350px){.brand .wordmark{font-size:26px}.brand .tagline{font-size:7px;letter-spacing:1px}.guideRhythm{padding-left:18px;padding-right:18px;gap:12px}#guideTitle{font-size:23px}h1{font-size:23px}h1 em{font-size:16px}}

.settings .backupNotice{display:block;margin:16px 0 0;padding:14px 16px;border-radius:12px;font-size:14px;line-height:1.5;color:#164d42;background:#edf2e4}.settings .backupNotice.success{background:#d8ed9c;color:#164d42;font-weight:600}.settings .backupNotice.error{background:#fff0e6;color:#794326}

/* One segmented progress line for every training mode. */
.exercise .dashProgress{display:flex;gap:8px;margin:16px 0}.exercise .dashProgress span{flex:1;min-width:0;height:4px;border-radius:4px;background:#e7efdc}.exercise .dashProgress span.done{background:#b2ce83}.compactPronunciation .exercise .dashProgress{margin:16px 0}

/* Native selection behavior with consistent text and chevron insets. */
#tenseSelect,#directionSelect,#voiceSelect{appearance:none;-webkit-appearance:none;padding-left:16px;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23223d35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px 16px}

/* Reduce vertical whitespace while preserving horizontal alignment. */
header{padding-top:12px;padding-bottom:12px}
main{padding-top:12px;padding-bottom:20px}
.hero{margin-top:4px;margin-bottom:16px}
.heroTime{margin-top:12px}
.approach{margin-bottom:10px}
.tabs{margin-bottom:14px}
.tabs button{padding-top:10px;padding-bottom:10px}
#directionSelect,#voiceSelect{padding-top:9px;padding-bottom:9px}
.exercise .dashProgress,.compactPronunciation .exercise .dashProgress{margin-top:12px;margin-bottom:12px}
.exercise .phrase,.compactPronunciation .exercise .phrase{margin-top:14px;margin-bottom:10px;padding-top:16px;padding-bottom:16px}
.exercise .primary,.compactPronunciation .exercise .primary{margin-top:12px;padding-top:12px;padding-bottom:12px;min-height:72px}
.settings{margin-top:20px;padding-top:14px}
@media(max-width:420px){header{padding-top:12px;padding-bottom:12px}main{padding-top:12px;padding-bottom:20px}}

/* Irregularity is teaching metadata, never an answer error or a speech rewrite. */
.tile .verbKind{position:absolute;left:16px;top:43px;max-width:calc(100% - 32px);padding:2px 4px;border-radius:4px;background:#d8ed9c;color:#164d42;font-size:9px;line-height:1.3;letter-spacing:0;white-space:nowrap;pointer-events:none}
.tile.hasIrregularVerb #todayVerb{margin-top:22px}
.irregularForm{color:#8c5128;background:#fbefdb;border-radius:6px;padding:2px 5px;white-space:nowrap}
.irregularForm::after{content:'*';font-size:.6em;vertical-align:super;margin-left:2px;line-height:1}
.rule .irregularLegend{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:#8c5128}

.exercise .subjectCue{display:block;margin:0 0 6px;text-align:left;color:#657c56;font-size:12px;line-height:1.4}

/* Keep the completion action visible without the large result-page gaps. */
.result{padding:8px 0 0}
.result h2{margin:0 0 12px;line-height:1.2}
.result strong{line-height:1.15}
.result p{margin:12px 0 0}
.result .primary,.compactPronunciation .result .primary{margin-top:16px;min-height:52px;padding:14px 16px}

.authForm{display:grid;gap:10px;margin:0 0 16px}
.authForm label{display:grid;gap:4px;font-size:14px}
.authForm input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d5d8cf;border-radius:10px;font:inherit}
.authForm .primary,#logoutButton,#revokeOthers,#legacyLeave,#legacyImport{margin-top:4px}
#sessionPanel{display:grid;gap:8px;margin-bottom:12px}
.lockedVerb{position:relative;margin-top:8px}
.lockedPreview{filter:blur(5px);user-select:none;pointer-events:none;opacity:.7}
.lockedCall{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:#f5f4eecc;border-radius:16px}
.lockedCall h2{margin:0 0 6px;font-size:20px}
.lockedCall .hint{margin:0 0 14px;max-width:420px}
.authTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px}
.authTabs button[aria-pressed="true"]{background:#164d42;color:white;border-color:#164d42}
.authForm .linkButton{justify-self:start;border:0;background:transparent;padding:4px 0;color:#164d42;text-decoration:underline;font-size:14px}
.authForm label.consent{display:flex;gap:8px;align-items:flex-start;line-height:1.4}
.authForm label.consent input{width:auto;margin-top:3px}
.authForm label.consent a,.legalLinks a{color:#164d42}
#authNotice:empty,#googleStatus:empty{display:none}
.authFields{display:grid;gap:10px}
.authForm .googleButton{background:white;border:1px solid #d5d8cf}
#googleLink,#googleUnlink{margin-top:4px}
#reauthForm{margin-top:12px}
.billingPanel{margin:14px 0;padding:14px;border:1px solid #d5d8cf;border-radius:12px}
.billingPanel h3{margin:0 0 6px;font-size:17px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.testBadge{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#fff1c2;color:#6b4e00}
.billingPanel .plans{border:0;padding:0;margin:0;display:grid;gap:8px}
.billingPanel .plans legend{font-size:14px;margin-bottom:4px}
.billingPanel .plans label{display:flex;gap:8px;align-items:center}
.billingPanel .plans input{width:auto}
#billingStatus:empty{display:none}
.voiceSetting{display:grid;gap:4px;font-size:14px;margin:16px 0 4px}
.voiceSetting select{width:100%;padding:10px 12px;border:1px solid #d5d8cf;border-radius:10px;background:white}
#legacyPreview{margin:8px 0 12px}
.legacyPair{padding:8px 0;border-top:1px solid #e4e6df}
#deleteAccount{margin-top:18px}
#deletionSubmit{background:#fff6f2;border-color:#e4c4b8;color:#6b3a2a}
#micNotice{background:#fffef9;color:#223d35;border:0;border-radius:24px;max-width:440px;padding:22px}
#micNotice::backdrop{background:#10251f66}
#micNotice p{margin:8px 0 16px}
#micNotice button{margin-right:8px}