:root{--bg: #f2f5f1;--surface: #ffffff;--surface-soft: #f8faf7;--surface-strong: #eef3ee;--ink: #18201d;--muted: #65736d;--faint: #87928d;--line: #d9e1da;--line-strong: #c2cec6;--accent: #22684f;--accent-dark: #164b38;--accent-soft: #e3f2ea;--danger: #a63c46;--danger-soft: #f8e8ea;--warning: #86621d;--warning-soft: #f6edda;--info: #2f617d;--info-soft: #e6f0f5;--radius: 8px;--shadow: 0 18px 44px rgba(25, 34, 29, .07);color:var(--ink);background:var(--bg);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{align-items:center;background:#25312c;border:1px solid #25312c;border-radius:var(--radius);color:#fff;cursor:pointer;display:inline-flex;font-weight:760;gap:10px;justify-content:center;min-height:40px;padding:0 14px;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease,transform .12s ease}button:hover{background:#17231e;border-color:#17231e}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.58;transform:none}kbd{background:#ffffff29;border:1px solid rgba(255,255,255,.28);border-radius:5px;color:inherit;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;min-width:20px;padding:3px 5px;text-align:center}a{color:var(--info);font-weight:680;text-decoration:none}a:hover{text-decoration:underline}.shell{min-height:100vh}.topbar{align-items:center;background:#f2f5f1e0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:10px 24px;position:sticky;top:0;z-index:10}.brand{background:transparent;border:0;color:var(--ink);font-size:17px;font-weight:850;letter-spacing:0;min-height:34px;padding:0}.brand:hover{background:transparent;border-color:transparent;color:var(--accent-dark)}nav{display:flex;gap:6px}nav button{background:transparent;border-color:transparent;border-radius:999px;color:var(--muted);min-height:34px;padding:0 13px}nav button:hover{background:var(--surface-strong);border-color:transparent;color:var(--ink)}nav button.active{background:var(--surface);border-color:var(--line);box-shadow:0 1px #19221d0a;color:var(--ink)}main{margin:0 auto;max-width:1180px;padding:24px 24px 56px}.practice{display:grid;gap:18px}.prompt,.result,.settings section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.empty-state{min-height:260px}.meta-row{align-items:center;color:var(--muted);display:flex;font-size:13px;justify-content:space-between;gap:14px}.label{color:var(--faint);font-size:12px;font-weight:850;letter-spacing:.02em;margin-top:18px;text-transform:uppercase}h1{color:var(--ink);font-size:clamp(32px,3vw,44px);font-weight:850;letter-spacing:0;line-height:1.14;margin:10px 0 0}.hint,.subtle{color:var(--muted)}.hint{margin:12px 0 0}.recorder-panel{align-items:stretch;display:grid;gap:12px;grid-template-columns:144px minmax(280px,1fr) minmax(360px,1.2fr);margin-top:24px}.record-button{font-size:16px;font-weight:850;min-height:54px;width:100%}.record-button.recording{background:var(--danger);border-color:var(--danger)}.recorder-state{align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);display:flex;gap:12px;min-height:54px;min-width:0;padding:0 14px}.state-badge{background:var(--surface-strong);border-radius:999px;color:var(--muted);flex:0 0 92px;font-size:12px;font-weight:850;line-height:1;padding:7px 8px;text-align:center}.state-text{color:var(--muted);font-size:14px;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recorder-panel.recording .state-badge{background:var(--danger-soft);color:var(--danger)}.recorder-panel.processing .state-badge{background:var(--info-soft);color:var(--info)}.recorder-panel.done .state-badge{background:var(--accent-soft);color:var(--accent-dark)}.recorder-panel.error .state-badge{background:var(--danger-soft);color:var(--danger)}.playback-slot{align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);display:flex;min-height:54px;min-width:0;padding:7px 10px}.playback-slot.empty:before{color:var(--faint);content:"Audio replay appears here";font-size:13px}.playback{display:block;height:40px;width:100%}.level-meter{background:#e5ebe5;border-radius:999px;grid-column:1 / -1;height:7px;opacity:0;overflow:hidden;transition:opacity .12s ease}.level-meter.active{opacity:1}.level-meter span{background:var(--accent);display:block;height:100%;transition:width 80ms linear;width:0}.result-head{align-items:flex-end;border-bottom:1px solid var(--line);display:grid;gap:22px;grid-template-columns:auto minmax(0,1fr);margin-bottom:12px;padding-bottom:14px}.score-hero{align-items:flex-end;display:flex;gap:12px}.score-hero strong{color:var(--ink);font-size:clamp(54px,6vw,76px);font-weight:900;letter-spacing:0;line-height:.9}.score-hero span{color:var(--muted);font-size:15px;font-weight:750;padding-bottom:6px;white-space:nowrap}.score-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end;min-width:0}.metric{border-left:1px solid var(--line);min-width:96px;padding-left:16px}.metric strong{color:var(--ink);display:block;font-size:28px;font-weight:880;line-height:1}.metric span{color:var(--muted);display:block;font-size:13px;font-weight:720;margin-top:4px}.match-summary{align-items:center;background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;min-height:38px;padding:8px 10px}.match-summary strong{color:var(--ink);font-size:14px;font-weight:820}.match-note,.match-issue{border-radius:999px;font-size:12px;font-weight:760;padding:4px 8px}.match-note{background:var(--accent-soft);color:var(--accent-dark)}.match-issue.off,.match-issue.missing{background:var(--danger-soft);color:var(--danger)}.match-issue.extra{background:var(--warning-soft);color:var(--warning)}.reference-text{color:var(--ink);font-size:30px;font-weight:850;letter-spacing:0;line-height:1.24;margin:9px 0 12px}.reference-text.compact{font-size:clamp(24px,2.4vw,34px)}.reference-token{background:transparent;border:0;border-radius:4px;color:inherit;cursor:pointer;display:inline;font:inherit;line-height:inherit;min-height:0;padding:0 2px;text-decoration-thickness:3px;text-underline-offset:6px}.reference-token:hover,.reference-token.selected{background:var(--surface-strong)}.reference-token.ok{color:var(--accent-dark);text-decoration-color:#9bc9b5;text-decoration-line:underline}.reference-token.extra{color:var(--warning);text-decoration-color:#ddc48d;text-decoration-line:underline}.reference-token.off,.reference-token.missing{color:var(--danger);text-decoration-color:#e5a4ab;text-decoration-line:underline}.extra-words{align-items:center;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.extra-words strong,.extra-words span{background:var(--warning-soft);border:1px solid #e5d1a5;border-radius:999px;color:var(--warning);font-size:12px;font-weight:760;padding:5px 9px}.alternative-strip{color:var(--muted);display:grid;gap:7px;margin-top:14px}.alternative-strip span{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);font-size:13px;line-height:1.35;padding:8px 10px}.alternative-strip span.active{background:var(--accent-soft);border-color:#afd4c2;color:var(--accent-dark);font-weight:760}.word-detail{background:var(--surface-soft);border:1px solid var(--line);border-radius:var(--radius);margin-top:16px;padding:16px}.word-detail-header{align-items:center;display:flex;justify-content:space-between;gap:12px}.word-detail-header strong{color:var(--ink);font-size:19px}.word-detail-header em{color:var(--muted);font-style:normal;font-weight:650}.word-detail-header button{background:var(--surface);border-color:var(--line-strong);color:var(--muted);min-height:32px;padding:0 10px}.word-detail-header button:hover{background:var(--surface-strong);border-color:var(--line-strong);color:var(--ink)}.word-meta{color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}.word-meta span{background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:680;padding:5px 9px}.phone-section{border-top:1px solid var(--line);margin-top:4px;padding-top:13px}.phone-section-title{color:var(--faint);font-size:12px;font-weight:850;letter-spacing:.02em;margin-bottom:9px;text-transform:uppercase}.phones{display:flex;flex-wrap:wrap;gap:8px}.phones span{align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:7px;display:inline-flex;gap:7px;max-width:100%;padding:7px 9px}.phones strong{color:currentColor;font-size:18px;font-weight:850}.phones em{font-style:normal;font-weight:820}.phones small{color:inherit;font-size:12px;opacity:.68}.phones span.ok{background:var(--accent-soft);border-color:#c2decf;color:var(--accent-dark)}.phones span.extra{background:var(--warning-soft);border-color:#e5d1a5;color:var(--warning)}.phones span.missing,.phones span.off{background:var(--danger-soft);border-color:#edc2c7;color:var(--danger)}.rating-row{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}.rating-row button{font-size:17px;min-height:52px;padding:0 18px}.rating-row button.recommended{background:var(--accent);border-color:var(--accent-dark);box-shadow:0 0 0 4px #22684f24}.action-row{display:grid;gap:10px;grid-template-columns:minmax(240px,360px);margin-top:18px}.action-row button{min-height:48px}form{display:grid;gap:15px;margin-top:22px}label{color:#35413c;display:grid;gap:7px;font-size:14px;font-weight:760;min-width:0}input,select{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);min-height:44px;min-width:0;padding:0 12px;width:100%}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px #22684f1f;outline:0}.field-row{display:grid;gap:12px}.field-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:760px){.topbar,.meta-row{align-items:stretch;flex-direction:column}nav{display:grid;grid-template-columns:repeat(2,1fr)}main{padding:18px 14px 40px}.prompt,.result,.settings section{padding:18px}.recorder-panel,.rating-row,.action-row,.field-row,.field-row.three{grid-template-columns:1fr}.result-head{align-items:flex-start;grid-template-columns:1fr}.score-grid{justify-content:flex-start}h1{font-size:30px}.state-text{white-space:normal}}