:root{--bg:#1e1e1e;--bg-deep:#111313;--panel:#171a1a;--panel-raised:#202423;--text:#eef4f5;--text-soft:#aab6b8;--text-muted:#7e8b8e;--text-faint:#596568;--line:#ffffff17;--line-strong:#ffffff26;--cyan:#00e5ff;--cyan-soft:#00e5ff1c;--green:#71f5b5;--amber:#ffb547;--mono:"Cascadia Mono", "Consolas", "Courier New", monospace;--sans:"Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth;min-width:320px}body{background:var(--bg);min-width:320px;min-height:100vh;color:var(--text);font-family:var(--sans);margin:0;font-size:16px;line-height:1.5}#root{min-height:100vh}button,input,textarea,select{font:inherit}button{color:inherit}a{color:var(--cyan)}h1,h2,h3,p,dl,dd{margin:0}button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}::selection{color:#fff;background:#00e5ff47}::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff29 padding-box padding-box;border:2px solid #0000;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff40 padding-box padding-box}.app-shell{background:radial-gradient(at 50% -8%,#00e5ff13,#0000 42%),radial-gradient(at 92% 28%,#00e5ff09,#0000 30%),linear-gradient(#222424 0%,#191b1b 45%,#111313 100%);min-height:100vh;position:relative;overflow:hidden}.app-shell:before{z-index:0;content:"";opacity:.1;pointer-events:none;background-image:radial-gradient(#ffffff1a 1px,#0000 1px);background-size:30px 30px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 28%,#000 0%,#0000 68%);mask-image:radial-gradient(at 50% 28%,#000 0%,#0000 68%)}.ambient{z-index:0;filter:blur(28px);pointer-events:none;border-radius:50%;position:absolute}.ambient--top{background:radial-gradient(circle,#00e5ff14,#0000 68%);width:760px;height:760px;top:-380px;left:-180px}.ambient--bottom{background:radial-gradient(#00e5ff14,#0000 70%);width:760px;height:260px;bottom:70px;right:8%}.page-frame{z-index:1;width:min(100%,1920px);margin:0 auto;padding:36px clamp(22px,3.4vw,64px) 42px;position:relative}.site-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px;animation:.52s cubic-bezier(.22,1,.36,1) both rise-in;display:flex}.brand{min-width:0}.eyebrow{color:#7f8d90;letter-spacing:2.6px;text-transform:uppercase;align-items:center;gap:9px;font-size:10px;font-weight:650;line-height:1;display:flex}.eyebrow--cyan{color:#7ca4a8}.status-dot{border-radius:50%;flex:none;width:6px;height:6px;display:inline-block}.status-dot--cyan{background:var(--cyan);box-shadow:0 0 10px #00e5ffcc}.status-dot--green{background:var(--green);box-shadow:0 0 9px #71f5b5a6}.brand h1{color:#f2f7f8;letter-spacing:-1.1px;margin-top:10px;font-size:clamp(38px,3.15vw,54px);font-weight:720;line-height:1.06}.brand__subtitle{color:#97a4a6;letter-spacing:.1px;margin-top:9px;font-size:15px}.brand__meta{flex-wrap:wrap;gap:8px;margin-top:17px;display:flex}.brand__meta span{color:#68777a;letter-spacing:.45px;background:#ffffff06;border:1px solid #ffffff14;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:600;line-height:1}.header-actions{flex:none;align-items:stretch;gap:12px;margin-left:auto;display:flex}.status-card{background:linear-gradient(145deg,#292d2eeb,#17191af0);border:1px solid #ffffff1c;border-radius:16px;min-width:190px;padding:12px 14px;box-shadow:inset 0 1px #ffffff12,0 12px 26px #00000029}.status-card__label{color:#6d7a7d;letter-spacing:1.8px;font-size:8px;font-weight:650;line-height:1}.ime-state{justify-content:space-between;align-items:center;gap:20px;margin-top:9px;display:flex}.ime-state__name{color:#dee8e9;font-size:15px;font-weight:600;line-height:1.1}.ime-state__hint{color:#6f7d80;letter-spacing:.2px;margin-top:6px;font-size:9px;line-height:1}.ime-badge{border-radius:12px;place-items:center;width:48px;height:48px;font-size:26px;font-weight:700;line-height:1;display:grid;box-shadow:0 0 18px #00e5ff40,inset 0 1px #ffffff94}.ime-badge--cn{color:#06262b;background:linear-gradient(#7af4ff,#00d5ef)}.ime-badge--en{color:#2e1e06;background:linear-gradient(#ffd286,#f0a52e);box-shadow:0 0 18px #ffb5473d,inset 0 1px #ffffff8c}.demo-control{width:278px;min-height:86px;color:var(--text);text-align:left;cursor:pointer;background:linear-gradient(145deg,#292d2eeb,#17191af0);border:1px solid #ffffff1c;border-radius:16px;align-items:center;gap:12px;padding:13px 14px;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff12,0 12px 26px #00000029}.demo-control:hover{border-color:#00e5ff57;box-shadow:inset 0 1px #ffffff14,0 0 28px #00e5ff14,0 12px 26px #0000002e}.demo-control:active{transform:translateY(1px)}.demo-control.is-playing{border-color:#00e5ff85;box-shadow:inset 0 1px #ffffff17,0 0 34px #00e5ff1a}.demo-control__icon{width:38px;height:38px;color:var(--cyan);background:#00e5ff14;border:1px solid #00e5ff3d;border-radius:10px;flex:none;place-items:center;font-size:15px;line-height:1;display:grid}.demo-control__copy{flex-direction:column;gap:5px;min-width:0;display:flex}.demo-control__copy strong{color:#e7f1f2;font-size:13px;font-weight:620;line-height:1.1}.demo-control__copy small{color:#718083;letter-spacing:.15px;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:500;line-height:1.35;overflow:hidden}.demo-control__progress{transform-origin:0;background:linear-gradient(90deg, #00e5ff33, var(--cyan));height:2px;transition:transform .12s linear;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 10px #00e5ff8c}.pinyin-launch{width:214px;min-height:86px;color:var(--text);text-align:left;cursor:pointer;background:radial-gradient(at 100% 0,#71f5b514,#0000 54%),linear-gradient(145deg,#23302aeb,#151918f0);border:1px solid #71f5b533;border-radius:16px;align-items:center;gap:12px;padding:13px 14px;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff12,0 12px 26px #00000029}.pinyin-launch:after{content:"";opacity:0;background:linear-gradient(90deg,#0000,#71f5b5b3,#0000);height:1px;transition:opacity .16s;position:absolute;bottom:0;left:14px;right:14px}.pinyin-launch:hover{border-color:#71f5b56b;box-shadow:inset 0 1px #ffffff14,0 0 28px #71f5b517,0 12px 26px #0000002e}.pinyin-launch:hover:after{opacity:1}.pinyin-launch:active{transform:translateY(1px)}.pinyin-launch__icon{width:38px;height:38px;color:var(--green);font-family:var(--mono);text-shadow:0 0 16px #71f5b552;background:#71f5b514;border:1px solid #71f5b542;border-radius:10px;flex:none;place-items:center;font-size:19px;font-weight:620;line-height:1;display:grid}.pinyin-launch__copy{flex-direction:column;gap:5px;min-width:0;display:flex}.pinyin-launch__copy strong{color:#e7f1f2;font-size:13px;font-weight:620;line-height:1.1}.pinyin-launch__copy small{color:#718083;letter-spacing:.15px;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:500;line-height:1.35;overflow:hidden}.pinyin-launch__arrow{color:#4d7467;font-size:10px;line-height:1;transition:color .16s;position:absolute;top:9px;right:11px}.pinyin-launch:hover .pinyin-launch__arrow{color:var(--green)}.workspace{grid-template-columns:minmax(0,1fr) 350px;align-items:start;gap:24px;margin-top:28px;animation:.64s cubic-bezier(.22,1,.36,1) 40ms both rise-in;display:grid}.stage-column{min-width:0}.popup-dock{justify-content:center;align-items:flex-end;min-height:202px;padding-bottom:15px;display:flex}.popup-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(145deg,#262b2cf7 0%,#171a1bfa 100%);border:1px solid #70ebf940;border-radius:20px;width:min(100%,1000px);padding:20px 28px 22px 34px;animation:2s cubic-bezier(.22,1,.36,1) both popup-life;position:relative;overflow:hidden;box-shadow:0 28px 70px #00000061,0 0 0 1px #0000002e,inset 0 1px #ffffff13,0 0 44px #00e5ff0e}.popup-card__accent{background:linear-gradient(#69f7ff 0%,#00e5ff38 100%);border-radius:3px;width:3px;position:absolute;top:20px;bottom:20px;left:0;box-shadow:0 0 16px #00e5ff80}.popup-card__meta{justify-content:space-between;align-items:center;gap:16px;display:flex}.popup-card__kicker{color:#9ba9ac;letter-spacing:1.7px;align-items:center;gap:8px;font-size:10.5px;font-weight:650;line-height:1;display:flex}.source-chip{color:#79979a;font-family:var(--mono);letter-spacing:.6px;white-space:nowrap;background:#ffffff09;border:1px solid #ffffff17;border-radius:5px;flex:none;padding:5px 8px;font-size:9px;font-weight:600;line-height:1}.source-chip--demo{color:#7c9da1}.source-chip--live{color:#82a99a}.popup-card__title-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:11px;display:flex}.popup-card__title{color:var(--text);letter-spacing:-.4px;font-size:clamp(27px,2vw,35px);font-weight:720;line-height:1.12}.popup-card__description{color:#b3bfc1;letter-spacing:.05px;margin-top:9px;font-size:17px;line-height:1.5}.popup-card__tip{color:#d6b981;letter-spacing:.08px;margin-top:7px;font-size:12px;line-height:1.45}.popup-card__timer{background:#ffffff0f;border-radius:2px;height:2px;position:absolute;bottom:8px;left:34px;right:28px;overflow:hidden}.popup-card__timer:after{content:"";transform-origin:0;background:linear-gradient(90deg,#00e5ff47,#00e5ffe6);width:100%;height:100%;animation:2s linear both timer-drain;display:block}.idle-card{color:#97a4a6;background:#181b1b7a;border:1px dashed #ffffff1f;border-radius:18px;align-items:center;gap:16px;width:min(100%,1000px);padding:16px 20px;display:flex}.idle-card__icon{color:#78dce5;background:#00e5ff0b;border:1px solid #00e5ff2e;border-radius:12px;flex:none;place-items:center;width:46px;height:46px;font-size:22px;display:grid}.idle-card strong{color:#c4d2d3;font-size:13px;font-weight:600;display:block}.idle-card p{color:#69777a;margin-top:4px;font-size:11px;line-height:1.45}.key-tokens{flex-wrap:wrap;align-items:center;gap:6px;display:inline-flex}.key-tokens__item{align-items:center;gap:6px;display:inline-flex}.key-tokens__separator{color:#5d6b6e;font-size:11px;font-weight:500;line-height:1}.key-token{color:#d6fbff;min-width:30px;height:29px;font-family:var(--mono);letter-spacing:.12px;white-space:nowrap;background:linear-gradient(#00e5ff21,#00e5ff0e);border:1px solid #00e5ff47;border-radius:7px;justify-content:center;align-items:center;padding:0 9px;font-size:12.5px;font-weight:650;line-height:1;display:inline-flex;box-shadow:inset 0 1px #ffffff14}.key-tokens--compact,.key-tokens--compact .key-tokens__item{gap:5px}.key-tokens--compact .key-token{color:#d0f9fd;border-color:#00e5ff36;border-radius:5px;min-width:25px;height:25px;padding:0 7px;font-size:11.5px}.key-tokens--compact .key-tokens__separator{font-size:9px}.keyboard-stage{width:100%;min-width:0;position:relative}.keyboard-stage__inner{transform-origin:top;will-change:transform;transition:transform .18s;position:absolute;top:0;left:50%}.keyboard-shell{background:linear-gradient(155deg,#bdbaae 0%,#acaa9e 32%,#949186 70%,#838077 100%);border:1px solid #ece9dd8f;border-radius:19px;width:1500px;height:522px;padding:14px 22px 18px;position:relative;box-shadow:0 42px 88px #000000a3,0 10px 24px #00000057,inset 0 2px #ffffff80,inset 0 -2px #0000003d,0 0 0 1px #00000073}.keyboard-rail{border-bottom:1px solid #2727211f;justify-content:space-between;align-items:center;width:1456px;height:24px;margin-bottom:10px;padding:0 3px;display:flex}.keyboard-rail__brand{color:#2727218a;letter-spacing:2.1px;align-items:center;gap:12px;font-size:7.5px;font-weight:650;line-height:1;display:flex}.keyboard-rail__divider{background:#27272133;width:1px;height:8px}.keyboard-rail__status{color:#27272194;letter-spacing:1.2px;align-items:center;gap:13px;font-size:7.5px;font-weight:650;line-height:1;display:flex}.rail-led{align-items:center;gap:5px;display:flex}.rail-led__dot{border-radius:50%;width:4.5px;height:4.5px;display:inline-block}.rail-led__dot--cyan{background:#00cfea;box-shadow:0 0 7px #00e5ffcc}.rail-led__dot--green{background:#42c68e;box-shadow:0 0 6px #42c68eb3}.power-button{color:#27272173;background:radial-gradient(circle at 35% 28%,#ffffff57,#ffffff0a 70%);border:1px solid #27272152;border-radius:50%;place-items:center;width:20px;height:20px;display:grid;box-shadow:inset 0 1px 1px #ffffff40,0 1px 1px #00000026}.keyboard-rows{flex-direction:column;gap:8px;width:1456px;display:flex}.key-row{gap:6px;width:100%;display:flex}.key-row--function{height:42px}.key-row--main{height:62px}.key-row--lower{height:56px}.keyboard-bottom-main{flex-grow:12.5;flex-basis:0;gap:6px;min-width:0;display:flex}.keyboard-arrow-group{flex-grow:3;flex-basis:0;gap:6px;min-width:0;display:flex}.keyboard-lower-spacer{flex-grow:12.5;flex-basis:0}.keycap{color:#eeece2;-webkit-user-select:none;user-select:none;background:linear-gradient(#5c5c54 0%,#4b4b44 100%);border:1px solid #30302b;border-bottom:2px solid #24241f;border-radius:9.5px;justify-content:center;align-items:center;min-width:0;height:100%;transition:background 80ms linear,transform 80ms,box-shadow .12s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff29,inset 0 -2px #00000024,0 2px 3px #0000003d}.keycap--function{background:linear-gradient(#5b5b54 0%,#494942 100%);border-radius:7.5px}.keycap--modifier{background:linear-gradient(#5a5a53 0%,#484841 100%)}.keycap--nav,.keycap--arrow{background:linear-gradient(#56564f 0%,#474740 100%)}.keycap.is-active{color:#fff;background:linear-gradient(#6ff7ff 0%,#00e5ff 47%,#00bed6 100%);border-color:#cdfcfff5 #cdfcfff5 #a8f8ff;transform:translateY(1.8px)scale(.982);box-shadow:0 0 0 1px #00e5ff3d,0 0 20px #00e5ffad,0 0 48px #00e5ff3d,inset 0 1px #ffffff94}.keycap__sheen{pointer-events:none;background:linear-gradient(#ffffff13,#fff0);border-radius:8px;height:46%;position:absolute;top:1px;left:1px;right:1px}.keycap.is-active .keycap__sheen{background:linear-gradient(#ffffff42,#fff0)}.keycap__label{max-width:calc(100% - 10px);color:inherit;letter-spacing:0;text-overflow:clip;white-space:nowrap;padding:0 4px;font-size:21px;font-weight:560;line-height:1;overflow:hidden}.keycap--modifier .keycap__label,.keycap--function .keycap__label,.keycap--nav .keycap__label{font-weight:500}.keycap__label--symbol{font-size:20.5px;font-weight:550}.keycap__stack{z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:relative}.keycap__stack--compact{gap:3px}.keycap__sub{color:#cfccbf;font-size:11.5px;font-weight:500;line-height:1}.keycap__hint{color:#cfccbf;font-size:7.5px;font-weight:500;line-height:1}.keycap.is-active .keycap__sub,.keycap.is-active .keycap__hint{color:#ffffffd1}.glyph{flex-shrink:0;display:block}.stage-meta{color:#89979a;border-top:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:18px;margin-top:18px;padding-top:14px;font-size:11px;display:flex}.stage-meta__item{color:#a7b4b6;letter-spacing:.25px;align-items:center;gap:8px;font-weight:600;display:flex}.stage-meta__hint{color:#708083}.stage-meta__note{color:#596669;text-align:right;font-size:9.5px}.mobile-tip{color:#657376;text-align:center;margin-top:12px;font-size:10px;display:none}.history-panel{background:linear-gradient(160deg,#202424f7 0%,#111313fa 100%);border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;min-height:450px;max-height:calc(100vh - 48px);display:flex;position:sticky;top:24px;overflow:hidden;box-shadow:0 26px 56px #00000047,inset 0 1px #ffffff0f}.history-panel__header{justify-content:space-between;align-items:flex-start;gap:14px;padding:21px 20px 13px;display:flex}.history-panel__header h2{color:#eef6f7;letter-spacing:-.3px;margin-top:8px;font-size:25px;font-weight:680;line-height:1}.text-button{color:#879598;cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:6px;padding:5px 7px;font-size:10px;line-height:1;transition:color .14s,border-color .14s,background .14s}.text-button:hover:not(:disabled){color:#c7faff;background:#00e5ff0f;border-color:#00e5ff52}.text-button:disabled{opacity:.35;cursor:default}.history-panel__summary{color:#627073;letter-spacing:.25px;justify-content:space-between;align-items:center;gap:12px;padding:0 20px 12px;font-size:10px;display:flex}.history-count{color:#728f92;font-family:var(--mono);white-space:nowrap;font-size:9.5px}.history-list{scrollbar-gutter:stable;flex:1;min-height:0;padding:0 14px 12px;overflow-y:auto}.history-empty{color:#6d7b7e;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:280px;padding:24px;display:flex}.history-empty__key{color:#7f9295;background:#ffffff06;border:1px solid #ffffff1a;border-radius:14px;place-items:center;width:54px;height:54px;margin-bottom:13px;font-size:25px;display:grid}.history-empty p{color:#a0adaf;font-size:14px;font-weight:600}.history-empty small{color:#5f6c6f;margin-top:5px;font-size:11px;line-height:1.5}.history-entry{border-top:1px solid #ffffff13;padding:13px 10px 12px;animation:.24s cubic-bezier(.22,1,.36,1) both history-in}.history-entry:first-child{border-top:0}.history-entry__meta{color:#5f7073;font-family:var(--mono);letter-spacing:.25px;justify-content:space-between;align-items:center;gap:10px;font-size:8.5px;line-height:1;display:flex}.history-entry__index{color:#466064}.history-entry__message{color:#b5c2c4;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px;font-size:13px;line-height:1.45;display:flex}.history-entry__action{color:#8beff8;margin-top:6px;font-size:11.5px;line-height:1.4}.history-panel__hint{color:#566467;text-align:center;border-top:1px solid #ffffff13;padding:11px 20px 14px;font-size:9.5px;line-height:1.4}.reference-sections{flex-direction:column;gap:28px;margin-top:72px;display:flex}.doc-section{background:linear-gradient(160deg,#1f2323d1 0%,#131515e6 100%);border:1px solid #ffffff17;border-radius:24px;padding:clamp(24px,3vw,38px);box-shadow:0 24px 60px #0000002e,inset 0 1px #ffffff0b}.doc-section__heading{justify-content:space-between;align-items:flex-start;gap:22px;display:flex}.doc-section__heading h2{color:#edf5f6;letter-spacing:-.5px;margin-top:9px;font-size:clamp(25px,2.12vw,33px);font-weight:690;line-height:1.15}.doc-badge{color:#7daeb2;font-family:var(--mono);letter-spacing:.6px;white-space:nowrap;background:#00e5ff0b;border:1px solid #00e5ff33;border-radius:7px;flex:none;padding:7px 9px;font-size:10px;line-height:1}.doc-section__lede{color:#89979a;max-width:900px;margin-top:12px;font-size:14.5px;line-height:1.65}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px;display:grid}.reference-group{background:#ffffff05;border:1px solid #ffffff14;border-radius:15px;overflow:hidden}.reference-group__header{border-bottom:1px solid #ffffff12;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 18px 14px;display:flex}.reference-group__header h3{color:#dbe8e9;font-size:17px;font-weight:620;line-height:1.2}.reference-group__header p{color:#617073;margin-top:4px;font-size:11px;line-height:1.4}.reference-group__header>span{color:#5b7d81;font-family:var(--mono);font-size:11px;line-height:1}.key-reference-list{padding:3px 18px 8px}.key-reference-row{border-top:1px solid #ffffff0e;grid-template-columns:minmax(96px,.34fr) 1fr;gap:16px;padding:10px 0;display:grid}.key-reference-row:first-child{border-top:0}.key-reference-row dt{color:#a4eaf0;font-family:var(--mono);font-size:13px;font-weight:560;line-height:1.5}.key-reference-row dd{color:#96a3a5;font-size:13.5px;line-height:1.6}.compact-note{background:#ffb5470b;border:1px solid #ffb54738;border-radius:16px;margin-top:18px;padding:20px 22px;position:relative}.compact-note__label{color:#b38c53;font-family:var(--mono);letter-spacing:1.3px;font-size:8.5px;font-weight:650}.compact-note h3{color:#d8c296;margin-top:8px;font-size:15px;font-weight:620}.compact-note ul{color:#a7987b;gap:6px;margin:12px 0 0;padding-left:18px;font-size:13px;line-height:1.65;display:grid}.shortcut-table-wrap{border:1px solid #ffffff14;border-radius:15px;margin-top:26px;overflow-x:auto}.shortcut-table{border-collapse:collapse;text-align:left;width:100%;min-width:720px}.shortcut-table thead{background:#ffffff06}.shortcut-table th,.shortcut-table td{vertical-align:middle;border-bottom:1px solid #fff1;padding:13px 16px}.shortcut-table thead th{color:#68777a;letter-spacing:1.2px;text-transform:uppercase;font-size:10px;font-weight:650;line-height:1}.shortcut-table tbody tr:last-child th,.shortcut-table tbody tr:last-child td{border-bottom:0}.shortcut-table tbody tr{transition:background .14s}.shortcut-table tbody tr:hover{background:#00e5ff09}.shortcut-table tbody th{color:#d8f9fc;width:190px;font-weight:500}.shortcut-table code{color:#bff6fb;font-family:var(--mono);white-space:nowrap;font-size:12.5px}.shortcut-table td{color:#9fadaf;font-size:13.5px;line-height:1.55}.shortcut-table td:nth-child(2){color:#cfdddf;width:185px;font-weight:560}.ime-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;display:grid}.ime-note{background:#ffffff05;border:1px solid #ffffff12;border-radius:12px;align-items:flex-start;gap:13px;padding:15px 16px;display:flex}.ime-note>span{color:#47757a;font-family:var(--mono);font-size:9px;line-height:1.7}.ime-note p{color:#9daaac;font-size:13px;line-height:1.7}.site-footer{color:#586669;letter-spacing:.2px;border-top:1px solid #ffffff12;justify-content:space-between;align-items:center;gap:16px;margin-top:34px;padding-top:18px;font-size:9px;line-height:1.5;display:flex}@keyframes popup-life{0%{opacity:0;transform:translateY(16px)scale(.94)}9%{opacity:1;transform:translateY(0)scale(1.012)}16%{transform:translateY(0)scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-4px)scale(.99)}}@keyframes timer-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes history-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (width<=1280px){.workspace{grid-template-columns:minmax(0,1fr) 300px;gap:18px}.demo-control{width:250px}.pinyin-launch{width:196px}.status-card{min-width:178px}}@media (width<=1100px){.workspace{grid-template-columns:minmax(0,1fr)}.history-panel{min-height:330px;max-height:none;position:static}.history-list{max-height:330px}.history-empty{min-height:210px}.header-actions{flex-wrap:wrap;justify-content:flex-end}.pinyin-launch{width:200px}}@media (width<=900px){.page-frame{padding:26px 20px 32px}.site-header{flex-direction:column;gap:22px}.header-actions{justify-content:stretch;width:100%}.status-card{flex:1}.demo-control{flex:1.4;width:auto}.pinyin-launch{flex:1;width:auto}.popup-dock{min-height:180px}.reference-grid,.ime-notes{grid-template-columns:minmax(0,1fr)}.stage-meta__note{display:none}.reference-sections{margin-top:48px}}@media (width<=640px){.page-frame{padding:20px 14px 28px}.eyebrow{letter-spacing:1.8px;font-size:8.5px}.brand h1{font-size:36px}.brand__subtitle{font-size:13px}.brand__meta{margin-top:13px}.header-actions{flex-direction:column}.status-card{width:100%}.demo-control,.pinyin-launch{width:100%;min-height:72px}.popup-dock{min-height:168px;padding-bottom:12px}.popup-card{border-radius:16px;padding:16px 18px 19px 23px}.popup-card__accent{top:16px;bottom:16px}.popup-card__meta{flex-direction:column;align-items:flex-start;gap:7px}.popup-card__title{font-size:25px}.popup-card__description{font-size:14px}.popup-card__tip{font-size:10.5px}.popup-card__timer{left:23px;right:18px}.idle-card{padding:13px 14px}.idle-card__icon{width:38px;height:38px;font-size:18px}.idle-card strong{font-size:12px}.idle-card p{font-size:10px}.stage-meta{flex-wrap:wrap;justify-content:flex-start;gap:10px 18px;font-size:9.5px}.stage-meta__hint{order:3;width:100%}.mobile-tip{display:block}.history-panel__header{padding:17px 15px 11px}.history-panel__header h2{font-size:22px}.history-panel__summary{padding:0 15px 10px}.history-list{padding:0 9px 10px}.history-entry{padding:12px 9px}.history-entry__message{flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}.history-entry__action{font-size:11px}.reference-sections{gap:18px;margin-top:36px}.doc-section{border-radius:18px;padding:20px 16px}.doc-section__heading{flex-direction:column;gap:12px}.doc-section__heading h2{font-size:24px}.doc-section__lede{font-size:13px}.reference-group__header{padding:14px 14px 12px}.key-reference-list{padding:2px 14px 7px}.key-reference-row{grid-template-columns:1fr;gap:4px}.key-reference-row dt{font-size:12.5px}.key-reference-row dd{font-size:13px}.compact-note{padding:16px}.compact-note ul{font-size:12px}.shortcut-table{min-width:640px}.ime-note{padding:13px}.ime-note p{font-size:12px}.site-footer{flex-direction:column;align-items:flex-start;gap:6px;font-size:8.5px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.status-dot--amber{background:var(--amber);box-shadow:0 0 10px #ffb547a6}.pinyin-overlay{z-index:200;-webkit-backdrop-filter:blur(16px);background:radial-gradient(at 50% 0,#00e5ff17,#0000 42%),#050809d1;place-items:center;padding:clamp(12px,2.2vw,28px);animation:.18s both pinyin-overlay-in;display:grid;position:fixed;inset:0}.pinyin-overlay:before{content:"";opacity:.12;pointer-events:none;background-image:radial-gradient(#ffffff1c 1px,#0000 1px);background-size:26px 26px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 0,#000,#0000 72%);mask-image:radial-gradient(at 50% 0,#000,#0000 72%)}.pinyin-dialog{background:radial-gradient(at 8% 0,#00e5ff13,#0000 36%),linear-gradient(150deg,#1c2122 0%,#151919 52%,#111414 100%);border:1px solid #00e5ff2b;border-radius:24px;outline:none;flex-direction:column;width:min(1200px,100%);height:min(900px,100dvh - 44px);animation:.26s cubic-bezier(.22,1,.36,1) both pinyin-dialog-in;display:flex;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0006,0 28px 90px #00000094,inset 0 1px #ffffff0f}.pinyin-dialog__header{z-index:1;background:linear-gradient(#ffffff05,#0000);border-bottom:1px solid #ffffff13;flex:none;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 28px 20px;display:flex;position:relative}.pinyin-dialog__heading{min-width:0}.pinyin-dialog__heading h2{color:#f1f8f9;letter-spacing:-.8px;margin-top:10px;font-size:clamp(28px,2.4vw,38px);font-weight:720;line-height:1.04}.pinyin-dialog__heading p{color:#8c9b9e;max-width:580px;margin-top:8px;font-size:12.5px;line-height:1.65}.pinyin-dialog__header-actions{flex:none;align-items:center;gap:10px;display:flex}.pinyin-count-pill{white-space:nowrap;background:#ffffff06;border:1px solid #ffffff17;border-radius:12px;align-items:center;gap:5px;height:42px;padding:0 13px;display:flex}.pinyin-count-pill strong{color:#dff5f7;font-family:var(--mono);font-size:14px;font-weight:650}.pinyin-count-pill span{color:#6d7d80;letter-spacing:.3px;font-size:9px}.pinyin-count-pill i{background:#ffffff1a;width:1px;height:15px;margin:0 4px}.pinyin-close{color:#96a5a8;cursor:pointer;background:#ffffff08;border:1px solid #ffffff1c;border-radius:12px;flex:none;place-items:center;width:42px;height:42px;padding:0;transition:border-color .16s,background .16s,color .16s;display:grid}.pinyin-close span{margin-top:-3px;font-size:26px;font-weight:300;line-height:1}.pinyin-close:hover{color:#e7fbfe;background:#00e5ff14;border-color:#00e5ff5c}.pinyin-dialog__body{overscroll-behavior:contain;flex:auto;grid-template-columns:minmax(0,1fr) 326px;gap:24px;min-height:0;padding:24px 28px 28px;display:grid;overflow-y:auto}.pinyin-main{min-width:0}.pinyin-console{background:radial-gradient(at 10% 0,#00e5ff1c,#0000 48%),linear-gradient(145deg,#192a2ce0,#0f1617f0);border:1px solid #00e5ff33;border-radius:20px;padding:18px 20px 15px;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0e,0 16px 34px #0000002e}.pinyin-console:after{content:"";pointer-events:none;background:radial-gradient(circle at 100% 0,#00e5ff1a,#0000 68%);width:150px;height:150px;position:absolute;top:0;right:0}.pinyin-console__topline{z-index:1;color:#607679;font-family:var(--mono);letter-spacing:1.7px;justify-content:space-between;align-items:center;gap:16px;font-size:8px;font-weight:650;display:flex;position:relative}.pinyin-mode-toggle{color:#7d9295;cursor:pointer;letter-spacing:.2px;background:0 0;border:0;align-items:center;gap:7px;padding:0;transition:color .15s;display:inline-flex}.pinyin-mode-toggle:hover{color:#b9e9ec}.pinyin-mode-toggle__label{font-family:var(--sans);font-size:9px;font-weight:600}.pinyin-mode-toggle__state{color:#536669;font-family:var(--mono);letter-spacing:.8px;font-size:7px;font-weight:650;transition:color .15s}.pinyin-mode-toggle__track{background:#ffffff09;border:1px solid #ffffff21;border-radius:999px;width:31px;height:17px;transition:border-color .16s,background .16s,box-shadow .16s;display:inline-block;position:relative}.pinyin-mode-toggle__track i{background:#687a7d;border-radius:50%;width:11px;height:11px;transition:transform .18s cubic-bezier(.22,1,.36,1),background .16s;position:absolute;top:2px;left:2px;box-shadow:inset 0 1px #ffffff38}.pinyin-mode-toggle.is-on{color:#a5f7cd}.pinyin-mode-toggle.is-on .pinyin-mode-toggle__state{color:#71f5b5}.pinyin-mode-toggle.is-on .pinyin-mode-toggle__track{background:#71f5b51f;border-color:#71f5b56b;box-shadow:0 0 14px #71f5b51a}.pinyin-mode-toggle.is-on .pinyin-mode-toggle__track i{background:var(--green);transform:translate(14px);box-shadow:0 0 9px #71f5b580,inset 0 1px #fff6}.pinyin-console__playing{color:#708589;font-family:var(--sans);letter-spacing:.1px;flex:none;align-items:center;gap:7px;font-size:9.5px;font-weight:500;display:inline-flex}.pinyin-console__playing.is-playing{color:#8df7ff}.pinyin-signal,.pinyin-card__signal{align-items:flex-end;gap:2px;height:11px;display:inline-flex}.pinyin-signal i,.pinyin-card__signal i{opacity:.6;background:currentColor;border-radius:2px;width:2px;height:4px}.pinyin-console__playing.is-playing .pinyin-signal i,.pinyin-card.is-playing .pinyin-card__signal i{opacity:1;animation:.68s ease-in-out infinite alternate pinyin-signal}.pinyin-signal i:nth-child(2),.pinyin-card__signal i:nth-child(2){animation-delay:.14s}.pinyin-signal i:nth-child(3),.pinyin-card__signal i:nth-child(3){animation-delay:.28s}.pinyin-console__readout{z-index:1;color:#effeff;min-height:82px;font-family:var(--mono);letter-spacing:-1.5px;text-shadow:0 0 32px #00e5ff38;word-break:break-all;align-items:center;gap:4px;margin-top:7px;font-size:clamp(54px,6.1vw,76px);font-weight:620;line-height:1;display:flex;position:relative}.pinyin-console__readout.is-empty{color:#476065;letter-spacing:1px;text-shadow:none;font-size:clamp(36px,4vw,50px)}.pinyin-console__readout.is-error{color:#ffd18a;text-shadow:0 0 26px #ffb5472e}.pinyin-console__cursor{background:var(--cyan);border-radius:2px;width:3px;height:.82em;margin-left:3px;animation:1.05s steps(2,jump-none) infinite pinyin-cursor;display:inline-block;box-shadow:0 0 12px #00e5ffcc}.pinyin-console__statusline{z-index:1;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px 16px;display:flex;position:relative}.pinyin-console__status{color:#93a4a7;align-items:center;gap:8px;min-height:18px;font-size:11.5px;line-height:1.6;display:flex}.pinyin-console__actions{z-index:1;align-items:center;gap:9px;margin-top:14px;display:flex;position:relative}.pinyin-single-indicator{color:#8ccbb0;white-space:nowrap;background:#71f5b509;border:1px dashed #71f5b538;border-radius:11px;align-items:center;gap:8px;min-height:42px;padding:0 14px;font-size:10.5px;font-weight:550;display:inline-flex}.pinyin-play,.pinyin-clear{cursor:pointer;border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:42px;padding:0 15px;transition:transform .15s,border-color .15s,background .15s,opacity .15s;display:inline-flex}.pinyin-play{color:#04282d;background:linear-gradient(135deg,#85f7ff,#00d9f2);border:1px solid #00e5ffb3;font-size:12px;font-weight:680;box-shadow:0 8px 24px #00e5ff24}.pinyin-play>span{font-size:10px}.pinyin-play:hover:not(:disabled){background:linear-gradient(135deg,#a1fbff,#1ee5ff);transform:translateY(-1px)}.pinyin-clear{color:#9dadaf;background:#ffffff08;border:1px solid #ffffff1a;font-size:11px}.pinyin-clear:hover:not(:disabled){color:#e5f0f1;background:#ffffff0e;border-color:#fff3}.pinyin-play:disabled,.pinyin-clear:disabled{cursor:not-allowed;opacity:.36}.pinyin-play:active:not(:disabled),.pinyin-clear:active:not(:disabled){transform:translateY(1px)}.pinyin-console kbd{min-width:21px;height:19px;color:inherit;font-family:var(--mono);background:#042b311f;border:1px solid #062b3026;border-radius:5px;justify-content:center;align-items:center;padding:0 5px;font-size:8px;font-weight:650;line-height:1;display:inline-flex;box-shadow:inset 0 -1px #0000002e}.pinyin-clear kbd,.pinyin-console__hints kbd{color:#bdc9ca;box-shadow:none;background:#ffffff0a;border-color:#ffffff1a}.pinyin-console__hints{z-index:1;color:#687a7d;flex-wrap:wrap;align-items:center;gap:6px 15px;margin-top:12px;font-size:9px;line-height:1.5;display:flex;position:relative}.pinyin-console__hints span{align-items:center;gap:5px;display:inline-flex}.pinyin-console__hints strong{color:#c7e2e4;font-family:var(--mono);font-weight:600}.pinyin-console__hints kbd{min-width:18px;height:18px;padding:0 4px;font-size:7.5px}.pinyin-groups{flex-direction:column;gap:21px;margin-top:24px;display:flex}.pinyin-group{min-width:0}.pinyin-group__header{border-bottom:1px solid #fff1;justify-content:space-between;align-items:flex-end;gap:18px;padding:0 1px 10px;display:flex}.pinyin-group__eyebrow{color:#4d686b;font-family:var(--mono);letter-spacing:1.7px;font-size:7.5px;font-weight:600;line-height:1}.pinyin-group__header h3{color:#d8e7e9;margin-top:5px;font-size:16px;font-weight:630;line-height:1.2}.pinyin-group__meta{text-align:right;align-items:flex-end;gap:10px;display:flex}.pinyin-group__meta>span{color:#7d9295;font-family:var(--mono);white-space:nowrap;font-size:10px}.pinyin-group__meta small{color:#526366;font-size:9px;line-height:1.4}.pinyin-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:11px;display:grid}.pinyin-card{color:#d7e5e6;cursor:pointer;background:linear-gradient(160deg,#ffffff0b,#ffffff03),#101515a3;border:1px solid #ffffff17;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:75px;padding:12px 7px 9px;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0a}.pinyin-card:after{content:"";background:linear-gradient(90deg, transparent, var(--cyan), transparent);opacity:0;height:1px;transition:opacity .15s;position:absolute;bottom:0;left:16%;right:16%}.pinyin-card:hover{z-index:1;background:linear-gradient(160deg,#00e5ff1a,#ffffff05),#131d1ee6;border-color:#00e5ff52;transform:translateY(-2px);box-shadow:inset 0 1px #ffffff12,0 8px 18px #0000002e}.pinyin-card.is-playing{background:radial-gradient(at 50% 0,#00e5ff33,#0000 62%),#122122f0;border-color:#00e5ff94;box-shadow:inset 0 1px #ffffff17,0 0 22px #00e5ff1f}.pinyin-card.is-playing:after{opacity:1}.pinyin-card__label{font-family:var(--mono);letter-spacing:-.6px;font-size:clamp(19px,1.8vw,24px);font-weight:620;line-height:1.05}.pinyin-card.is-playing .pinyin-card__label{color:#9ffaff;text-shadow:0 0 18px #00e5ff57}.pinyin-card__mnemonic{color:#65777a;font-size:9.5px;font-weight:500;line-height:1.2}.pinyin-card.is-playing .pinyin-card__mnemonic{color:#86b8bc}.pinyin-card__signal{height:8px;color:var(--cyan);opacity:0;transition:opacity .15s;position:absolute;top:8px;right:8px}.pinyin-card__signal i{height:3px}.pinyin-card.is-playing .pinyin-card__signal{opacity:1}.pinyin-aside{flex-direction:column;align-self:start;gap:14px;min-width:0;display:flex;position:sticky;top:0}.pinyin-download-card,.pinyin-reference{background:linear-gradient(145deg,#242a2bcc,#131718e0);border:1px solid #ffffff16;border-radius:18px;box-shadow:inset 0 1px #ffffff0a}.pinyin-download-card{background:radial-gradient(at 100% 0,#ffb5471a,#0000 55%),linear-gradient(145deg,#2b271fbd,#141616e6);border-color:#ffb5472e;padding:18px}.pinyin-download-card__label{color:#6f7a78;font-family:var(--mono);letter-spacing:1.65px;font-size:7.5px;font-weight:600;line-height:1}.pinyin-download-card h3,.pinyin-reference h3{color:#e6ece9;font-size:17px;font-weight:630;line-height:1.2}.pinyin-download-card h3{margin-top:7px}.pinyin-download-card p{color:#8b918d;margin-top:8px;font-size:10.5px;line-height:1.65}.pinyin-download-card p strong{color:#e8d3a9;font-family:var(--mono);font-size:11px;font-weight:600}.pinyin-download-button{color:#352509;background:linear-gradient(135deg,#ffe0a1,#ffb547);border-radius:12px;align-items:center;gap:11px;min-height:54px;margin-top:14px;padding:10px 12px;text-decoration:none;transition:transform .15s,box-shadow .15s,filter .15s;display:flex;box-shadow:0 10px 22px #ffb5471f,inset 0 1px #ffffff7a}.pinyin-download-button:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 13px 26px #ffb54730,inset 0 1px #ffffff8c}.pinyin-download-button:active{transform:translateY(1px)}.pinyin-download-button__icon{width:32px;height:32px;font-family:var(--mono);background:#49300417;border:1px solid #35250924;border-radius:9px;flex:none;place-items:center;font-size:19px;font-weight:700;line-height:1;display:grid}.pinyin-download-button>span:last-child{flex-direction:column;gap:2px;min-width:0;display:flex}.pinyin-download-button strong{font-size:12px;font-weight:700;line-height:1.2}.pinyin-download-button small{color:#3525099c;font-family:var(--mono);letter-spacing:.7px;font-size:7.5px;font-weight:600}.pinyin-download-card__note{color:#6b706b;margin-top:10px;font-size:9px;line-height:1.5;display:block}.pinyin-reference{padding:16px}.pinyin-reference header{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.pinyin-reference h3{margin-top:7px}.pinyin-reference__expand{color:#8bd5b9;white-space:nowrap;cursor:pointer;background:#71f5b50d;border:1px solid #71f5b533;border-radius:7px;flex:none;justify-content:center;align-items:center;margin-top:3px;padding:5px 8px;font-size:8.5px;font-weight:600;line-height:1.2;transition:border-color .15s,background .15s,color .15s;display:inline-flex}.pinyin-reference__expand:hover{color:#b6ffe0;background:#71f5b51a;border-color:#71f5b56b}.pinyin-reference__chart{width:100%;color:inherit;text-align:inherit;cursor:zoom-in;background:#0c1415;border:1px solid #ffffff14;border-radius:11px;margin-top:12px;padding:0;transition:border-color .16s,box-shadow .16s;display:block;overflow:hidden;box-shadow:0 12px 24px #00000029}.pinyin-reference__chart:hover{border-color:#00e5ff42;box-shadow:0 12px 24px #00000029,0 0 24px #00e5ff0f}.pinyin-reference__chart svg{width:100%;height:auto;display:block}.pinyin-reference p{color:#5e6d70;margin-top:9px;font-size:9px;line-height:1.55}.pinyin-chart-overlay{z-index:260;-webkit-backdrop-filter:blur(18px);background:radial-gradient(at 50% 0,#00e5ff17,#0000 44%),#040708e0;place-items:center;padding:clamp(12px,2.2vw,28px);animation:.18s both pinyin-overlay-in;display:grid;position:fixed;inset:0}.pinyin-chart-dialog{background:radial-gradient(at 12% 0,#00e5ff14,#0000 36%),linear-gradient(150deg,#1b2122 0%,#141919 54%,#0f1414 100%);border:1px solid #00e5ff2e;border-radius:24px;outline:none;flex-direction:column;width:min(1000px,100%);height:min(94dvh,1100px);animation:.26s cubic-bezier(.22,1,.36,1) both pinyin-dialog-in;display:flex;overflow:hidden;box-shadow:0 28px 90px #0000009e,inset 0 1px #ffffff0f}.pinyin-chart-dialog__header{background:linear-gradient(#ffffff05,#0000);border-bottom:1px solid #ffffff13;flex:none;justify-content:space-between;align-items:flex-start;gap:24px;padding:21px 26px 18px;display:flex}.pinyin-chart-dialog__header h2{color:#f1f8f9;letter-spacing:-.7px;margin-top:8px;font-size:clamp(25px,2.1vw,34px);font-weight:720;line-height:1.05}.pinyin-chart-dialog__header p{color:#839396;margin-top:7px;font-size:11.5px;line-height:1.55}.pinyin-chart-dialog__body{overscroll-behavior:contain;background:radial-gradient(at 50% 0,#00e5ff09,#0000 55%),#080c0c38;flex:auto;min-height:0;padding:22px 26px 28px;overflow-y:auto}.pinyin-chart-dialog__canvas{background:#0b1314;border:1px solid #00e5ff1c;border-radius:16px;width:min(880px,100%);margin:0 auto;overflow:hidden;box-shadow:0 18px 45px #00000042,inset 0 1px #ffffff09}.pinyin-chart-dialog__canvas svg{width:100%;height:auto;display:block}@keyframes pinyin-overlay-in{0%{opacity:0}}@keyframes pinyin-dialog-in{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes pinyin-signal{0%{opacity:.55;height:3px}to{opacity:1;height:10px}}@keyframes pinyin-cursor{0%,48%{opacity:1}49%,to{opacity:0}}@media (width<=1040px){.pinyin-dialog{height:min(920px,100dvh - 32px)}.pinyin-dialog__body{grid-template-columns:minmax(0,1fr) 292px;gap:20px;padding:20px 22px 24px}.pinyin-dialog__header{padding:21px 22px 18px}}@media (width<=860px){.pinyin-dialog__body{flex-direction:column;display:flex}.pinyin-main{display:contents}.pinyin-console{flex-shrink:0;order:0}.pinyin-aside{flex-shrink:0;order:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;display:grid;position:static}.pinyin-groups{flex-shrink:0;order:2;margin-top:0}}@media (width<=700px){.pinyin-overlay,.pinyin-chart-overlay{-webkit-backdrop-filter:none;place-items:stretch stretch;padding:0}.pinyin-chart-dialog{border:0;border-radius:0;width:100%;height:100dvh}.pinyin-chart-dialog__header{gap:12px;padding:16px 15px 14px}.pinyin-chart-dialog__header h2{margin-top:7px;font-size:24px}.pinyin-chart-dialog__header p{margin-top:5px;font-size:10.5px}.pinyin-chart-dialog__body{padding:12px}.pinyin-chart-dialog__canvas{border-radius:11px}.pinyin-dialog{border:0;border-radius:0;width:100%;height:100dvh;max-height:none}.pinyin-dialog__header{gap:12px;padding:16px 15px 14px}.pinyin-dialog__heading h2{margin-top:7px;font-size:25px}.pinyin-dialog__heading p{margin-top:6px;font-size:11px}.pinyin-count-pill{display:none}.pinyin-close{border-radius:10px;width:38px;height:38px}.pinyin-close span{font-size:24px}.pinyin-dialog__body{gap:16px;padding:14px 13px 20px}.pinyin-aside{grid-template-columns:minmax(0,1fr);gap:10px}.pinyin-reference{display:none}.pinyin-console{border-radius:16px;padding:14px 13px 12px}.pinyin-console__topline{letter-spacing:1.1px;gap:8px;font-size:7px}.pinyin-mode-toggle{gap:5px}.pinyin-mode-toggle__label{font-size:8.5px}.pinyin-mode-toggle__state{font-size:6.5px}.pinyin-mode-toggle__track{width:29px;height:16px}.pinyin-mode-toggle__track i{width:10px;height:10px}.pinyin-mode-toggle.is-on .pinyin-mode-toggle__track i{transform:translate(13px)}.pinyin-console__statusline{align-items:flex-start;gap:4px}.pinyin-console__playing{font-size:8.5px}.pinyin-console__readout{min-height:68px;margin-top:6px;font-size:clamp(46px,14vw,64px)}.pinyin-console__readout.is-empty{font-size:34px}.pinyin-console__status{font-size:10px}.pinyin-console__actions{margin-top:11px}.pinyin-play,.pinyin-clear{min-height:38px;padding:0 11px;font-size:10.5px}.pinyin-single-indicator{white-space:normal;flex:auto;min-height:38px;padding:0 10px;font-size:9.5px}.pinyin-console__hints{gap:5px 10px;margin-top:10px;font-size:8px}.pinyin-console__hints span:last-child{width:100%}.pinyin-groups{gap:18px;margin-top:0}.pinyin-group__header{align-items:flex-start;gap:10px;padding-bottom:8px}.pinyin-group__header h3{font-size:15px}.pinyin-group__meta{flex-direction:column;align-items:flex-end;gap:1px;padding-top:2px}.pinyin-group__meta small{display:none}.pinyin-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-top:9px}.pinyin-card{border-radius:11px;min-height:67px;padding:10px 5px 7px}.pinyin-card__label{font-size:20px}.pinyin-card__mnemonic{font-size:8.5px}.pinyin-aside{position:static}.pinyin-download-card{border-radius:15px;padding:14px}.pinyin-download-card p{margin-top:6px}.pinyin-download-button{min-height:48px;margin-top:10px}.pinyin-download-card__note{display:none}}@media (height<=620px) and (width>=701px){.pinyin-dialog{height:calc(100dvh - 20px)}.pinyin-dialog__header{padding-top:15px;padding-bottom:13px}.pinyin-dialog__heading h2{font-size:26px}.pinyin-dialog__heading p{display:none}}@media (prefers-reduced-motion:reduce){.pinyin-overlay,.pinyin-dialog,.pinyin-chart-overlay,.pinyin-chart-dialog,.pinyin-signal i,.pinyin-card__signal i,.pinyin-console__cursor{animation:none}}