:root{--wall:#7fcbe4;--wall-alt:#aee3f2;--silver:#d6d2ca;--silver-lit:#fff;--silver-dim:#87817a;--silver-dark:#3c3833;--title-a:#0a2a8c;--title-b:#2f93da;--page:#fff;--ink:#16161a;--muted:#53606e;--faint:#8691a0;--line-soft:#dde7ef;--blue:#1430c8;--cyan:#00a4c6;--pink:#d61a78;--amber:#e8a200;--green:#0f8a3c;--red:#d42020;--font-ui:Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif;--font-han:"Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "PingFang SC", "Hiragino Sans GB", serif;--font-data:"Lucida Console", "DejaVu Sans Mono", Menlo, monospace;--tap:44px;--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--c-paper:var(--page);--c-ink:var(--title-a);--c-muted:var(--muted);--c-rule:#9fb6c9;--c-rule-soft:var(--line-soft);--c-rule-strong:#9fb6c9;--c-user:var(--red);--c-flag:var(--amber)}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--wall);background-image:linear-gradient(45deg, var(--wall-alt) 25%, transparent 25%), linear-gradient(-45deg, var(--wall-alt) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--wall-alt) 75%), linear-gradient(-45deg, transparent 75%, var(--wall-alt) 75%);color:var(--ink);font-family:var(--font-ui);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background-position:0 0,0 13px,13px -13px,-13px 0;background-size:26px 26px;font-size:13px;line-height:1.5;overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:none;border-radius:0;padding:0}#app{max-width:600px;padding:0 0 calc(10px + env(safe-area-inset-bottom));background:var(--silver);border:1px solid var(--silver-dark);box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim), 4px 4px 0 #08284652;margin:10px auto 22px}.masthead,.panel-bar,.topbar{background:linear-gradient(90deg, var(--title-a), var(--title-b));color:#fff;align-items:center;gap:8px;font-weight:700;display:flex}.masthead{margin:3px;padding:5px 4px 5px 9px}.masthead h1{font-family:var(--font-han);letter-spacing:.06em;text-shadow:1px 1px #0006;margin:0;font-size:17px;font-weight:700}.masthead .romanised{font-size:12px}.masthead .tagline{letter-spacing:.1em;text-transform:uppercase;opacity:.92;margin-left:auto;font-size:10px}.dots{gap:2px;margin-left:4px;display:flex}.dots b{background:var(--silver);border:1px solid var(--silver-dark);width:17px;height:15px;box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);color:var(--ink);place-items:center;font-size:9px;font-weight:700;line-height:1;display:grid}.panel{margin:11px 10px 0}.panel-bar{letter-spacing:.05em;padding:3px 3px 3px 8px;font-size:11px}.panel-body{background:var(--page);border:1px solid var(--silver-dim);box-shadow:inset 1px 1px 0 #0000002e, inset -1px -1px 0 var(--silver-lit);padding:9px}.panel-body.is-flush{padding:0}.search{margin:11px 10px 0;position:relative}.search input{width:100%;font-size:16px;font-family:var(--font-ui);color:var(--ink);background:var(--page);border:1px solid var(--silver-dim);box-shadow:inset 1px 1px 0 #0003, inset -1px -1px 0 var(--silver-lit);min-height:var(--tap);-webkit-appearance:none;appearance:none;border-radius:0;padding:11px 44px 11px 11px}.search input::placeholder{color:var(--faint)}.search input:focus{outline:2px solid var(--blue);outline-offset:-2px}.search .clear{background:var(--silver);border:1px solid var(--silver-dark);width:28px;height:26px;box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);font-size:12px;font-weight:700;line-height:1;position:absolute;top:50%;right:7px;transform:translateY(-50%)}.hint{color:#2d3c4c;margin:7px 10px 0;font-size:11px}.chips{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px;display:grid}.chip{background:var(--silver);border:1px solid var(--silver-dark);min-height:42px;box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);text-align:left;align-items:center;gap:7px;padding:0 9px;font-size:12px;font-weight:700;display:flex}.chip:hover{background:#e8f4fc}.chip:active{box-shadow:inset -1px -1px 0 var(--silver-lit), inset 1px 1px 0 var(--silver-dim);transform:translate(1px,1px)}.chip .glyph{min-width:1.5em;color:var(--pink);flex:none;font-size:15px;line-height:1}.chip-label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.words{margin:0;padding:0;list-style:none}.word-row{text-align:left;border-bottom:1px solid var(--line-soft);align-items:center;gap:12px;width:100%;min-height:54px;padding:8px 10px;display:flex}.words li:nth-child(2n) .word-row{background:#f1f9fe}.word-row:hover{background:#d9edfc}.word-row .hanzi{font-family:var(--font-han);flex:none;min-width:2.3em;font-size:24px;line-height:1.1}.word-row .meta{flex:1;min-width:0}.word-row .pinyin{color:var(--blue);font-size:14px;font-weight:700;display:block}.word-row .gloss{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:11px;display:block;overflow:hidden}.word-row .tones{letter-spacing:.1em;color:var(--pink);flex:none;font-size:17px;line-height:1}.empty{color:var(--muted);padding:20px 12px;font-size:12px}.topbar{margin:3px;padding:4px 4px 4px 5px}.back{background:var(--silver);border:1px solid var(--silver-dark);min-height:30px;box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);color:var(--ink);align-items:center;gap:5px;padding:0 10px;font-size:11px;font-weight:700;display:inline-flex}.back:active{box-shadow:inset -1px -1px 0 var(--silver-lit), inset 1px 1px 0 var(--silver-dim)}.drill-label{letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:.92;margin-left:auto;padding-right:4px;font-size:10px;font-weight:700}.stage:empty{display:none}.stage{background:var(--page);border:1px solid var(--silver-dim);box-shadow:inset 1px 1px 0 #0000002e, inset -1px -1px 0 var(--silver-lit);margin:11px 10px 0;padding:13px 12px 12px}.word-head .hanzi{font-family:var(--font-han);letter-spacing:.03em;font-size:clamp(50px,16vw,74px);font-weight:500;line-height:1}.word-head .pinyin{color:var(--blue);margin-top:6px;font-size:21px;font-weight:700}.word-head .gloss{color:var(--muted);margin-top:1px;font-size:12px}.sandhi{border:1px solid var(--amber);color:#51400f;background:#fff8dc;gap:7px;margin-top:12px;padding:8px 10px;font-size:11.5px;line-height:1.55;display:flex}.sandhi b{color:#7d4a00}.legend{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;gap:4px 14px;padding-bottom:7px;font-size:10px;font-weight:700;display:flex}.legend span{align-items:center;gap:5px;display:inline-flex}.legend i{background:currentColor;width:16px;height:3px}.legend .is-target{color:var(--title-a)}.legend .is-you{color:var(--red)}.legend .is-inferred i{background:repeating-linear-gradient(90deg,currentColor 0 4px,#0000 4px 8px)}canvas.chart{width:100%;height:clamp(180px,30vh,260px);display:block}.result{align-items:flex-start;gap:14px;margin-top:0;display:flex}.result .score{font-family:var(--font-data);font-variant-numeric:tabular-nums;color:var(--blue);flex:none;font-size:42px;font-weight:700;line-height:.9}.result .score small{font-family:var(--font-ui);color:var(--faint);font-size:11px;font-weight:700}.result .verdict .zh{font-family:var(--font-han);color:var(--pink);font-size:18px;font-weight:700}.result .verdict .en{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:5px;font-size:10px;font-weight:700}.result .advice{margin-top:5px;font-size:12px;line-height:1.55}.per-syllable{margin:10px 0 0;padding:0;list-style:none}.per-syllable li{color:var(--muted);border-top:1px solid var(--line-soft);align-items:baseline;gap:9px;padding:6px 0;font-size:11.5px;line-height:1.5;display:flex}.per-syllable .syl{color:var(--blue);min-width:3.4em;font-weight:700}.per-syllable .bar{background:var(--page);border:1px solid var(--silver-dim);flex:none;align-self:center;width:44px;height:10px;padding:1px;box-shadow:inset 1px 1px #00000029}.per-syllable .bar i{background:var(--green);height:100%;display:block}.per-syllable .bar.is-low i{background:var(--red)}.per-syllable .bar.is-mid i{background:var(--amber)}.error{color:#8d1212;border:1px solid var(--red);background:#ffecec;margin-top:10px;padding:8px 10px;font-size:12px;line-height:1.55}.console{z-index:2;background:var(--silver);border:1px solid var(--silver-dark);box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);margin:11px 10px 0;padding:10px;position:sticky;bottom:0}.controls{justify-content:center;align-items:center;gap:20px;display:flex}.mic{background:var(--page);border:2px solid var(--silver-dark);width:66px;height:66px;box-shadow:inset 2px 2px 0 var(--silver-lit), inset -2px -2px 0 var(--silver-dim);color:var(--red);border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.mic svg{width:24px;height:24px}.mic:active{box-shadow:inset -2px -2px 0 var(--silver-lit), inset 2px 2px 0 var(--silver-dim)}.mic[data-state=recording]{background:var(--red);color:#fff}.mic[data-state=busy]{opacity:.55}.mic .ring{border:2px solid var(--red);opacity:0;border-radius:50%;position:absolute;top:-7px;bottom:-7px;left:-7px;right:-7px}.mic[data-state=recording] .ring{animation:1.3s ease-out infinite pulse}@keyframes pulse{0%{opacity:.75;transform:scale(.95)}to{opacity:0;transform:scale(1.2)}}.side-btn{min-width:58px;min-height:var(--tap);background:var(--silver);border:1px solid var(--silver-dark);box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);place-items:center;gap:4px;padding:5px 7px;font-size:10px;font-weight:700;display:grid}.side-btn svg{width:17px;height:17px;color:var(--blue)}.side-btn:disabled{opacity:.4;cursor:default}.side-btn:not(:disabled):active{box-shadow:inset -1px -1px 0 var(--silver-lit), inset 1px 1px 0 var(--silver-dim)}.mic-caption{text-align:center;color:#2d3c4c;min-height:1.3em;margin:9px 0 0;font-size:11px;font-weight:700}.nav-row{gap:5px;margin-top:9px;display:flex}.nav-btn{background:var(--silver);border:1px solid var(--silver-dark);min-height:38px;box-shadow:inset 1px 1px 0 var(--silver-lit), inset -1px -1px 0 var(--silver-dim);flex:1;font-size:11px;font-weight:700}.nav-btn:hover{background:#e8f4fc}.nav-btn:active{box-shadow:inset -1px -1px 0 var(--silver-lit), inset 1px 1px 0 var(--silver-dim);transform:translate(1px,1px)}@media (min-width:680px){body{font-size:14px}#app{max-width:660px;margin-top:24px;margin-bottom:34px}canvas.chart{height:clamp(210px,34vh,300px)}.word-head .hanzi{font-size:82px}.mic{width:72px;height:72px}}@media (max-height:560px) and (orientation:landscape){#app{max-width:1060px}#app.view-practice{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;display:grid}#app.view-practice .topbar,#app.view-practice #app.view-practice #head,#app.view-practice #result{grid-column:1;margin-right:5px}#app.view-practice .chart-block,#app.view-practice .console,#app.view-practice .chrome-bar{grid-column:2;margin-left:5px}#app.view-practice .console{position:static}canvas.chart{height:128px}.word-head .hanzi{font-size:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:focus-visible{outline:2px solid var(--blue);outline-offset:2px}:root{--aqua:#00a3e0;--aqua-deep:#0071ad;--lime:#7ac943;--chrome-1:#fff;--chrome-2:#e4ebf0;--chrome-3:#b9c6cf;--chrome-4:#8f9fab}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 12% 18%,#ffffffd9 0 4px,#0000 5px),radial-gradient(circle at 78% 9%,#ffffffb3 0 7px,#0000 8px),radial-gradient(circle at 90% 62%,#ffffffbf 0 5px,#0000 6px),radial-gradient(circle at 6% 74%,#ffffffa6 0 9px,#0000 10px),radial-gradient(circle at 33% 92%,#ffffffb3 0 5px,#0000 6px),radial-gradient(circle at 62% 44%,#ffffff80 0 3px,#0000 4px),radial-gradient(circle at 50% 0,#ffffff8c 0%,#fff0 60%);position:fixed;top:0;bottom:0;left:0;right:0}#app{z-index:1;position:relative}.masthead,.panel-bar,.topbar{position:relative;overflow:hidden}.masthead:after,.panel-bar:after,.topbar:after{content:"";pointer-events:none;background:linear-gradient(#fff6,#ffffff0d);position:absolute;top:0;bottom:50%;left:0;right:0}.masthead>*,.panel-bar>*,.topbar>*{z-index:1;position:relative}.chrome-bar{border:1px solid var(--silver-dark);background:linear-gradient(to bottom, var(--chrome-1) 0%, var(--chrome-2) 38%, var(--chrome-4) 50%, var(--chrome-2) 62%, var(--chrome-1) 100%);height:10px;margin:12px 10px 0;box-shadow:inset 0 0 0 1px #fff9}.chrome-bar.is-tall{height:14px}.mic{background:linear-gradient(to bottom, #fffffff2 0%, #ffffff59 48%, #cedce68c 52%, #ffffffe6 100%), var(--page)}.mic:after{content:"";pointer-events:none;background:linear-gradient(#fffffff2,#fff0);border-radius:50%;width:62%;height:34%;position:absolute;top:5px;left:50%;transform:translate(-50%)}.mic[data-state=recording]{background:linear-gradient(to bottom, #ffffff80 0%, #ffffff14 50%, #0000001f 100%), var(--red)}.chip,.nav-btn,.side-btn,.back,.dots b,.search .clear{background-image:linear-gradient(#ffffffd9,#fff0 52%,#0000000d)}.panel-bar .pip{background:var(--lime);border-radius:50%;width:7px;height:7px;margin-right:2px;display:inline-block;box-shadow:inset 0 1px #ffffffe6,0 0 4px #7ac943e6}.result .score{background:linear-gradient(to bottom, var(--aqua), var(--aqua-deep));color:#0000;-webkit-background-clip:text;background-clip:text}.verdict-wrap{flex:1;min-width:0}.bar-title{letter-spacing:.1em;text-transform:uppercase;opacity:.95;font-size:11px}.word-head{align-items:flex-start;gap:12px;display:flex}.wh-main{flex:1;min-width:0}.wh-tones{text-align:right;flex:none;justify-items:end;gap:3px;padding-top:4px;display:grid}.tone-marks{letter-spacing:.1em;color:var(--pink);font-size:30px;line-height:1}.tone-names{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:9px;font-weight:700}body{background-color:#a8ddf0;background-image:linear-gradient(#a8ddf09e,#96d2ecbd),url(./town-BKKWYKHN.webp);background-position:50%,bottom;background-repeat:no-repeat,no-repeat;background-size:cover,cover;background-attachment:fixed,fixed}body:before{content:"";z-index:0;pointer-events:none;opacity:.85;background-image:url(./bubbles-BK1IHVbD.png),url(./bubbles-BK1IHVbD.png);background-position:-60px -40px,right -30px bottom -20px;background-repeat:no-repeat,no-repeat;background-size:460px 460px,240px 240px;position:fixed;top:0;bottom:0;left:0;right:0}.pets{flex:none;align-items:center;gap:2px;display:inline-flex}.pets .dog{width:22px;height:20px;image-rendering:pixelated;filter:drop-shadow(0 1px #00000073)}.wh-note{border-left:3px solid var(--aqua);color:#2d3c4c;background:#f1f9fe;margin-top:8px;padding:6px 8px;font-size:11px;line-height:1.5}@media (min-width:680px){body:before{background-size:620px 620px,320px 320px}.pets .dog{width:25px;height:23px}}