.typing-immersive-shell { min-height: 100dvh; background: #06172c; }
.typing-experience { min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); color: #edf7ff; background: radial-gradient(circle at 72% 12%, rgba(38, 202, 184, .19), transparent 34%), radial-gradient(circle at 12% 88%, rgba(72, 112, 255, .2), transparent 36%), linear-gradient(145deg, #07192f, #0d2541 52%, #071a2f); overflow: hidden; }
.typing-topbar { min-height: 76px; display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(160px, auto); align-items: center; gap: 24px; padding: 12px clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(183, 220, 255, .14); background: rgba(5, 20, 38, .58); backdrop-filter: blur(18px); }
.typing-topbar button { justify-self: start; min-width: 84px; height: 42px; border: 1px solid rgba(187, 224, 255, .25); border-radius: 14px; color: #dcefff; background: rgba(255, 255, 255, .06); font-weight: 700; cursor: pointer; }
.typing-topbar div { display: flex; align-items: baseline; gap: 14px; }
.typing-topbar span { color: #7fd9cf; font-size: 13px; letter-spacing: .08em; }
.typing-topbar strong { font-size: 21px; }
.typing-topbar em { justify-self: end; color: #a9c3d8; font-style: normal; font-weight: 700; }
.typing-topbar .typing-daily-clock { min-width: 136px; display: grid; justify-items: end; gap: 2px; }
.typing-topbar .typing-daily-clock small { color: #7894ab; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .08em; }
.typing-topbar .typing-daily-clock strong { color: #77e4d4; font-size: 22px; font-variant-numeric: tabular-nums; }
.typing-topbar .typing-session-tools { justify-self: end; display: flex; align-items: center; gap: 12px; }
.typing-topbar .typing-pause-toggle { min-width: 82px; height: 38px; border-color: rgba(119, 228, 212, .28); color: #a9ece2; background: rgba(95, 215, 199, .08); }
.typing-topbar .typing-pause-toggle.is-paused { color: #062a31; border-color: #8df0e2; background: #76dfd0; }
.typing-experience-body { position: relative; min-height: 0; padding: clamp(16px, 2vw, 32px) clamp(14px, 2vw, 34px) clamp(20px, 2.5vw, 38px); }
.typing-experience.is-paused .typing-experience-body > section { opacity: .22; filter: blur(2px); pointer-events: none; }
.typing-pause-state { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.typing-pause-state span { color: #78e1d2; font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.typing-pause-state strong { color: #fff; font-size: clamp(30px, 4vw, 52px); }
.typing-pause-state small { color: #9bb2c5; font-size: 15px; }
.typing-pause-state button { min-width: 170px; height: 48px; margin-top: 14px; border: 0; border-radius: 15px; color: #062a31; background: linear-gradient(135deg, #79e7d7, #72bfff); font-size: 15px; font-weight: 900; cursor: pointer; }
.typing-welcome { height: 100%; display: grid; grid-template-columns: minmax(340px, .75fr) minmax(580px, 1.25fr); align-items: center; gap: clamp(32px, 5vw, 80px); max-width: 1500px; margin: 0 auto; }
.typing-welcome-copy { align-self: center; }
.typing-eyebrow { display: inline-flex; padding: 8px 13px; border-radius: 999px; color: #73e0d0; background: rgba(49, 207, 184, .12); font-size: 13px; letter-spacing: .08em; }
.typing-welcome h1 { margin: 22px 0 16px; font-size: clamp(38px, 4.2vw, 68px); line-height: 1.08; letter-spacing: -.04em; }
.typing-welcome p { max-width: 640px; margin: 0; color: #a9bfd3; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.75; }
.typing-welcome-stats { display: flex; gap: 12px; margin: 30px 0; }
.typing-welcome-stats span { min-width: 110px; padding: 14px 18px; border: 1px solid rgba(178, 218, 255, .12); border-radius: 16px; color: #a9bfd3; background: rgba(255, 255, 255, .045); font-size: 12px; }
.typing-welcome-stats strong { display: block; margin-bottom: 4px; color: #fff; font-size: 25px; }
.typing-primary { min-width: 210px; height: 56px; border: 0; border-radius: 18px; color: #061c2d; background: linear-gradient(135deg, #70ead7, #6ab5ff); box-shadow: 0 16px 36px rgba(34, 190, 190, .22); font-size: 17px; font-weight: 800; cursor: pointer; }
.typing-welcome-board { position: relative; padding: clamp(24px, 3vw, 48px); border: 1px solid rgba(197, 230, 255, .14); border-radius: 34px; background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); box-shadow: 0 36px 80px rgba(0, 5, 16, .35); transform: perspective(1200px) rotateX(5deg) rotateY(-5deg); }
.typing-active { height: 100%; width: 100%; margin: 0; display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); }
.typing-active:focus { outline: none; }
.typing-side-panel { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px clamp(16px, 1.8vw, 28px) 14px 0; border: 0; border-right: 1px solid rgba(181, 219, 255, .13); border-radius: 0; background: transparent; }
.typing-phase-label span { color: #78dace; font-size: 13px; }
.typing-phase-label strong { display: block; margin-top: 8px; font-size: 30px; }
.typing-live-stats { display: grid; gap: 10px; }
.typing-live-stats span { padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.typing-live-stats small { display: block; color: #85a0b9; font-size: 11px; }
.typing-live-stats strong { display: block; margin-top: 5px; color: #f6fbff; font-size: 20px; }
.typing-live-stats strong b { color: #70e4d2; }
.typing-rounds-empty, .typing-rounds-list { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(174, 212, 246, .12); }
.typing-rounds-empty { display: grid; gap: 7px; color: #839bb1; font-size: 12px; }
.typing-rounds-empty strong, .typing-rounds-list > strong { color: #d9e9f7; font-size: 13px; }
.typing-rounds-list { display: grid; gap: 8px; }
.typing-rounds-list > span { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .045); }
.typing-rounds-list b { font-size: 12px; }
.typing-rounds-list em { color: #77dfd0; font-size: 12px; font-style: normal; }
.typing-rounds-list small { grid-column: 1 / -1; color: #7890a6; }
.typing-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(14px, 2vh, 24px); padding: clamp(14px, 1.8vw, 28px) 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.typing-target { min-height: 102px; display: grid; grid-template-columns: auto auto; grid-template-rows: 1fr 1fr; column-gap: 18px; align-items: center; }
.typing-target span { align-self: end; color: #8da8bf; font-size: 14px; }
.typing-target strong { grid-row: 1 / 3; grid-column: 2; color: #fff; font-size: clamp(72px, 8vw, 126px); line-height: .86; text-shadow: 0 0 36px rgba(90, 226, 208, .35); }
.typing-target em { align-self: start; color: #73dfcf; font-size: 16px; font-style: normal; font-weight: 800; }
.typing-alphabet-progress { width: min(100%, 980px); display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; }
.typing-alphabet-progress span { display: grid; place-items: center; height: 24px; border-radius: 7px; color: #5f7a92; background: rgba(255, 255, 255, .035); font-size: 10px; }
.typing-alphabet-progress span.done { color: #0d2c36; background: #65dac9; }
.typing-alphabet-progress span.current { color: #fff; background: #527ddc; box-shadow: 0 0 0 3px rgba(92, 140, 239, .2); }
.typing-keyboard { position: relative; isolation: isolate; width: min(100%, 980px); display: grid; gap: clamp(7px, .8vw, 12px); padding: clamp(16px, 2vw, 28px); border: 1px solid rgba(202, 232, 255, .16); border-radius: 25px; background: linear-gradient(180deg, #112d49, #081a2d); box-shadow: 0 24px 44px rgba(0, 5, 18, .34), inset 0 1px rgba(255,255,255,.07); overflow: hidden; }
.typing-key-row { display: flex; justify-content: center; gap: clamp(6px, .75vw, 11px); }
.typing-key-row.row-3 { padding-left: 4.5%; padding-right: 4.5%; }
.typing-key-row.row-4 { padding-left: 8.5%; padding-right: 8.5%; }
.typing-key { --finger-accent: #6e8aa3; --finger-wash: rgba(110, 138, 163, .11); position: relative; aspect-ratio: 1.12; flex: 1 1 0; max-width: 78px; min-width: 42px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid color-mix(in srgb, var(--finger-accent) 28%, rgba(196, 227, 255, .17)); border-bottom-width: 4px; border-radius: 12px; color: #ddecf8; background: linear-gradient(155deg, var(--finger-wash), rgba(18, 43, 69, .96)); box-shadow: 0 5px 10px rgba(0, 5, 14, .25), inset 0 1px rgba(255,255,255,.035); transition: transform .1s ease, background .14s ease, box-shadow .14s ease; }
.typing-key.is-wide { max-width: 112px; flex-grow: 1.45; aspect-ratio: auto; }
.typing-key::before { content: ""; position: absolute; inset: 5px auto auto 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--finger-accent); opacity: .72; }
.typing-key[data-typing-finger="left-pinky"], .typing-finger-legend [data-typing-finger="left-pinky"] { --finger-accent: #bd8add; --finger-wash: rgba(189, 138, 221, .13); }
.typing-key[data-typing-finger="left-ring"], .typing-finger-legend [data-typing-finger="left-ring"] { --finger-accent: #759fe4; --finger-wash: rgba(117, 159, 228, .13); }
.typing-key[data-typing-finger="left-middle"], .typing-finger-legend [data-typing-finger="left-middle"] { --finger-accent: #60c4d0; --finger-wash: rgba(96, 196, 208, .13); }
.typing-key[data-typing-finger="left-index"], .typing-finger-legend [data-typing-finger="left-index"] { --finger-accent: #71d79f; --finger-wash: rgba(113, 215, 159, .13); }
.typing-key[data-typing-finger="right-index"], .typing-finger-legend [data-typing-finger="right-index"] { --finger-accent: #55d4bd; --finger-wash: rgba(85, 212, 189, .13); }
.typing-key[data-typing-finger="right-middle"], .typing-finger-legend [data-typing-finger="right-middle"] { --finger-accent: #6ab6e8; --finger-wash: rgba(106, 182, 232, .13); }
.typing-key[data-typing-finger="right-ring"], .typing-finger-legend [data-typing-finger="right-ring"] { --finger-accent: #8d9ce8; --finger-wash: rgba(141, 156, 232, .13); }
.typing-key[data-typing-finger="right-pinky"], .typing-finger-legend [data-typing-finger="right-pinky"] { --finger-accent: #ca8ecf; --finger-wash: rgba(202, 142, 207, .13); }
.typing-key strong { font-size: clamp(16px, 1.7vw, 26px); }
.typing-key small { color: #7894ab; font-size: clamp(7px, .55vw, 9px); }
.typing-key.is-target { color: #052c33; border-color: #95f5e5; background: linear-gradient(145deg, #8af0df, #55cbbd); box-shadow: 0 0 0 5px rgba(91, 224, 207, .12), 0 12px 28px rgba(47, 220, 197, .25); transform: translateY(3px); }
.typing-key.is-target small { color: #155953; }
.typing-key.is-pressed, .typing-space-row span.is-pressed { color: #061d32; border-color: #b8f5ff; background: linear-gradient(145deg, #a8efff, #67bfff); box-shadow: 0 0 0 6px rgba(99, 195, 255, .14), 0 9px 24px rgba(63, 172, 255, .3); animation: typing-key-press .26s ease both; }
.typing-key.is-pressed small { color: #174a68; }
.typing-key.is-pressed-error, .typing-space-row span.is-pressed-error { color: #321019; border-color: #ffd1cf; background: linear-gradient(145deg, #ffb7ae, #ff7775); box-shadow: 0 0 0 6px rgba(255, 115, 113, .13), 0 9px 24px rgba(255, 103, 100, .3); animation: typing-key-press-error .26s ease both; }
.typing-key.is-pressed-error small { color: #702b35; }
.typing-key.is-delete-target { color: #33120f; border-color: #ffd19b; background: linear-gradient(145deg, #ffdba5, #f0a85c); box-shadow: 0 0 0 6px rgba(246, 176, 91, .14), 0 9px 24px rgba(241, 158, 66, .28); transform: translateY(3px); }
.typing-keyboard.is-assessment .typing-key::before { width: 4px; height: 4px; opacity: .52; }
.typing-keyboard.is-assessment .typing-key small { opacity: .72; }
.typing-space-row { display: flex; justify-content: center; }
.typing-space-row span { width: 44%; height: 24px; display: grid; place-items: center; border: 1px solid rgba(186, 220, 249, .12); border-bottom-width: 3px; border-radius: 9px; color: #69839b; background: #112b44; font-size: 8px; transition: background .15s, box-shadow .15s, color .15s; }
.typing-space-row span.is-target { color: #073338; border-color: #94f0e1; background: #6edfcf; box-shadow: 0 0 0 5px rgba(91, 224, 207, .12), 0 10px 24px rgba(47, 220, 197, .22); }
.typing-finger-legend { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; padding-top: 2px; }
.typing-finger-legend span { --finger-accent: #7890a6; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: #6f879c; font-size: 8px; white-space: nowrap; }
.typing-finger-legend i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--finger-accent); opacity: .72; }
.typing-hand-guide, .typing-welcome-hands { position: relative; width: min(100%, 980px); height: 142px; display: flex; justify-content: center; gap: 10px; }
.typing-hand-guide.is-hidden { visibility: hidden; }
.typing-hand-guide > p { position: absolute; inset: auto 0 -2px; z-index: 2; margin: 0; text-align: center; color: #87a1b8; font-size: 12px; }
.typing-hand-guide > p strong { color: #6fe3d0; }
.typing-hand-guide > p b { color: #fff; }
.typing-hand { position: relative; width: 250px; height: 138px; filter: drop-shadow(0 12px 22px rgba(0, 4, 14, .34)); }
.typing-hand svg { width: 100%; height: 100%; overflow: visible; }
.typing-hand-wrist, .typing-hand-palm, .typing-finger-body, .typing-thumb-body { fill: rgba(142, 188, 209, .38); stroke: rgba(218, 242, 251, .4); stroke-width: 1.4; transition: fill .16s, stroke .16s, filter .16s, transform .16s; }
.typing-hand-palm { fill: rgba(139, 187, 208, .46); }
.typing-finger-joint, .typing-palm-line { fill: none; stroke: rgba(219, 243, 252, .19); stroke-width: 1.4; stroke-linecap: round; }
.typing-finger-nail { fill: rgba(225, 245, 250, .12); stroke: rgba(229, 249, 255, .25); stroke-width: 1; }
.typing-finger-shape, .typing-thumb-shape { transform-box: fill-box; transform-origin: center bottom; translate: var(--finger-reach-x, 0) var(--finger-reach-y, 0); rotate: var(--finger-reach-rotate, 0deg); scale: 1 var(--finger-reach-scale, 1); transition: filter .18s, translate .22s ease, rotate .22s ease, scale .22s ease; }
.typing-finger-shape.is-target, .typing-thumb-shape.is-target { filter: drop-shadow(0 0 15px rgba(89, 235, 212, 1)); opacity: 1; }
.typing-finger-shape.is-target .typing-finger-body, .typing-thumb-shape.is-target .typing-thumb-body { fill: rgba(104, 248, 226, .98); stroke: #d8fff8; stroke-width: 2.4; }
.typing-finger-shape.is-target .typing-finger-nail, .typing-thumb-shape.is-target .typing-finger-nail { fill: rgba(255, 255, 255, .9); }
.typing-hand-side { position: absolute; inset: auto 0 -5px; color: #67869f; text-align: center; font-size: 9px; letter-spacing: .08em; }
.typing-hand-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.typing-hand-overlay .typing-hand { position: absolute; bottom: 22px; width: clamp(170px, 25%, 238px); height: 48%; opacity: .44; filter: drop-shadow(0 9px 16px rgba(0, 4, 14, .22)); transition: opacity .2s; }
.typing-hand-overlay .typing-hand.left { left: 34%; transform: translateX(-50%) rotate(-4deg); }
.typing-hand-overlay .typing-hand.right { right: 34%; transform: translateX(50%) rotate(4deg); }
.typing-hand-overlay .typing-hand-side { display: none; }
.typing-hand-overlay > p { position: absolute; inset: auto 50% 5px auto; z-index: 7; min-width: 160px; margin: 0; padding: 5px 10px; border: 1px solid rgba(115, 224, 208, .16); border-radius: 999px; color: #91acae; background: rgba(5, 20, 37, .72); text-align: center; font-size: 10px; transform: translateX(50%); backdrop-filter: blur(8px); }
.typing-hand-overlay.is-pressing .typing-finger-shape.is-target, .typing-hand-overlay.is-pressing .typing-thumb-shape.is-target { translate: var(--finger-reach-x, 0) calc(var(--finger-reach-y, 0) + 4px); scale: .98 var(--finger-reach-scale, 1); }
.typing-hand-overlay.is-correction .typing-hand { opacity: .52; }
.typing-hand-overlay.is-correction > p { color: #ffe3bc; border-color: rgba(246, 176, 91, .32); background: rgba(64, 32, 14, .78); }
.typing-phrase-target { width: min(100%, 820px); text-align: center; }
.typing-phrase-target > span { color: #73dccc; font-size: 13px; letter-spacing: .08em; }
.typing-phrase-characters { display: flex; justify-content: center; gap: .06em; margin: 7px 0 0; font-size: clamp(30px, 3.5vw, 54px); }
.typing-phrase-characters span { color: #567086; transition: color .15s, text-shadow .15s, transform .15s; }
.typing-phrase-characters .is-done { color: #6de0cf; }
.typing-phrase-characters .is-current { color: #fff; text-shadow: 0 0 25px rgba(102, 225, 207, .38); transform: translateY(-2px); }
.typing-pinyin-overview { display: flex; justify-content: center; gap: .48em; margin: 2px 0 7px; color: #647e95; font-size: clamp(12px, 1vw, 15px); letter-spacing: .08em; }
.typing-pinyin-overview span.is-done { color: #4f9f98; }
.typing-pinyin-overview span.is-current { color: #dcefff; }
.typing-current-pinyin { min-height: 54px; display: flex; justify-content: center; align-items: center; gap: 16px; margin: 0 auto 9px; }
.typing-current-pinyin > span { color: #8ca6bc; font-size: 12px; }
.typing-current-pinyin > span strong { color: #70dfcf; font-size: 18px; }
.typing-current-pinyin > div { display: flex; align-items: center; gap: 7px; }
.typing-current-pinyin b { width: 34px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(180, 219, 245, .12); border-radius: 11px; color: rgba(224, 240, 251, calc(.38 + (var(--pinyin-order) * .035))); background: rgba(255, 255, 255, .035); font-size: 19px; transition: color .12s, background .12s, box-shadow .12s, transform .12s; }
.typing-current-pinyin b.is-typed { color: #062d33; background: #68ddcd; }
.typing-current-pinyin b.is-next { color: #fff; border-color: rgba(113, 226, 211, .65); background: rgba(91, 211, 195, .16); box-shadow: 0 0 0 4px rgba(82, 217, 198, .1), 0 0 24px rgba(73, 218, 198, .22); transform: translateY(-2px); }
.typing-current-pinyin i { margin-left: 5px; color: #7792a8; font-size: 11px; font-style: normal; }
.typing-phrase-target label { display: grid; grid-template-columns: auto minmax(280px, 1fr); align-items: center; gap: 14px; padding: 9px 9px 9px 18px; border: 1px solid rgba(178, 221, 255, .15); border-radius: 16px; background: rgba(255, 255, 255, .045); }
.typing-phrase-target label span { color: #829cb3; font-size: 12px; }
.typing-phrase-target input { min-width: 0; height: 46px; padding: 0 16px; border: 1px solid rgba(106, 221, 205, .28); border-radius: 12px; outline: none; color: #fff; background: rgba(5, 21, 38, .8); font-size: 20px; }
.typing-phrase-target input:focus { border-color: #6ddfce; box-shadow: 0 0 0 4px rgba(82, 217, 198, .12); }
.typing-phrase-target input.is-error { animation: typing-shake .28s ease; border-color: #ff7b78; }
.typing-complete { height: 100%; max-width: 1120px; margin: 0 auto; padding: 10px 0 22px; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow-y: auto; text-align: center; }
.typing-complete-mark { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 22px; color: #062b32; background: #6ce0cf; font-size: 34px; box-shadow: 0 18px 42px rgba(55, 219, 197, .22); }
.typing-complete > span { margin-top: 14px; color: #73dccd; }
.typing-complete h1 { margin: 6px 0 8px; font-size: clamp(32px, 3.5vw, 54px); }
.typing-complete > p { margin: 0; color: #9eb4c8; font-size: 17px; }
.typing-result-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 14px; }
.typing-result-grid span { padding: 15px 18px; border: 1px solid rgba(190, 225, 255, .12); border-radius: 18px; color: #8fa8bd; background: rgba(255, 255, 255, .045); }
.typing-result-grid strong { display: block; margin-bottom: 5px; color: #fff; font-size: 25px; font-variant-numeric: tabular-nums; }
.typing-result-insights { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; text-align: left; }
.typing-result-insights article { min-width: 0; display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(190, 225, 255, .1); border-radius: 16px; background: rgba(5, 22, 40, .42); }
.typing-result-insights small { color: #72decf; font-size: 11px; letter-spacing: .06em; }
.typing-result-insights strong { color: #dcecf7; font-size: 14px; line-height: 1.55; }
.typing-complete-actions { display: flex; gap: 14px; }
.typing-secondary { min-width: 180px; padding: 14px 24px; border: 1px solid rgba(112, 225, 209, .45); border-radius: 14px; color: #8cebdd; background: rgba(93, 218, 200, .08); font-size: 15px; font-weight: 800; cursor: pointer; }
.typing-round-feedback { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.typing-round-feedback > span { color: #8ba8bf; font-size: 18px; }
.typing-round-feedback > strong { margin-top: 12px; color: #fff; font-size: clamp(60px, 9vw, 128px); line-height: 1; letter-spacing: -.06em; }
.typing-round-feedback h1 { margin: 20px 0 8px; color: #72e3d2; font-size: clamp(36px, 4vw, 60px); }
.typing-round-feedback p { margin: 0; color: #8da9bf; font-size: 17px; }
.typing-feedback-pulse { height: 54px; display: flex; align-items: center; gap: 7px; margin-top: 25px; }
.typing-feedback-pulse i { width: 6px; height: 18px; border-radius: 4px; background: #69decf; animation: typing-pulse .8s ease-in-out infinite alternate; }
.typing-feedback-pulse i:nth-child(2), .typing-feedback-pulse i:nth-child(4) { animation-delay: .12s; }
.typing-feedback-pulse i:nth-child(3) { animation-delay: .24s; }
.typing-phrase-intro { height: 100%; max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.typing-phrase-intro > span { color: #70e1d0; font-size: 15px; letter-spacing: .1em; }
.typing-phrase-intro h1 { margin: 18px 0 14px; font-size: clamp(40px, 5vw, 72px); }
.typing-phrase-intro p { max-width: 720px; margin: 0 0 32px; color: #9fb8cc; font-size: 19px; line-height: 1.8; }
.typing-formal-layout { height: 100%; min-height: 0; width: 100%; margin: 0; display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); }
.typing-formal-catalog { min-height: 0; display: flex; flex-direction: column; padding: 10px clamp(16px, 1.8vw, 28px) 10px 0; border: 0; border-right: 1px solid rgba(181, 219, 255, .13); border-radius: 0; background: transparent; }
.typing-formal-catalog > div { display: grid; gap: 4px; }
.typing-formal-catalog > div span { color: #70decf; font-size: 12px; }
.typing-formal-catalog > div strong { color: #fff; font-size: 25px; }
.typing-formal-catalog > div small { color: #758fa5; }
.typing-formal-catalog ol { min-height: 0; display: grid; gap: 7px; margin: 18px 0; padding: 0; overflow-y: auto; list-style: none; }
.typing-formal-catalog li { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 42px; padding: 7px 9px; border: 1px solid transparent; border-radius: 13px; color: #718ba2; background: rgba(255,255,255,.025); font-size: 12px; }
.typing-formal-catalog li i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: #6f8ca4; background: rgba(255,255,255,.05); font-style: normal; }
.typing-formal-catalog li.is-current { color: #eefbff; border-color: rgba(104, 226, 209, .38); background: rgba(85, 214, 196, .1); }
.typing-formal-catalog li.is-current i, .typing-formal-catalog li.is-done i { color: #062c32; background: #69dfce; }
.typing-formal-catalog li.is-done { color: #65a8a0; }
.typing-formal-catalog footer { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(174,212,246,.1); color: #7892a8; }
.typing-formal-catalog footer strong { color: #70dfcf; font-size: 25px; }
.typing-formal-stage { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(16px, 2vw, 30px) 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.typing-formal-stage.has-keyboard { justify-content: flex-start; padding: 0; overflow-y: auto; }
.typing-formal-stage > header { display: flex; align-items: center; justify-content: space-between; }
.typing-formal-stage > header div { display: grid; gap: 4px; }
.typing-formal-stage > header span { color: #70dfcf; font-size: 12px; letter-spacing: .08em; }
.typing-formal-stage > header strong { color: #fff; font-size: 22px; }
.typing-formal-stage > header em { padding: 7px 12px; border-radius: 999px; color: #9db6ca; background: rgba(255,255,255,.05); font-size: 12px; font-style: normal; }
.typing-countdown { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; margin: 24px 0; }
.typing-countdown > div { height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.typing-countdown i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fd7c7, #f2b757); transition: width .2s linear; }
.typing-countdown strong { min-width: 58px; color: #dceaf5; font-size: 16px; }
.typing-countdown.is-open i { background: linear-gradient(90deg, #62ddcc, #72bfff); }
.typing-countdown.is-open strong { min-width: 86px; color: #75e2d2; }
.typing-formal-target { display: grid; justify-items: center; text-align: center; }
.typing-formal-target > small { color: #7e99af; font-size: 13px; }
.typing-character-target { display: flex; justify-content: center; gap: .06em; letter-spacing: -.04em; }
.typing-formal-target h1 { margin: clamp(18px, 3vh, 38px) 0; font-size: clamp(44px, 5.4vw, 86px); }
.typing-character-target span { color: #607a90; transition: color .15s, transform .15s, text-shadow .15s; }
.typing-character-target span.is-done { color: #67decc; }
.typing-character-target span.is-current { color: #fff; transform: translateY(-3px); text-shadow: 0 0 28px rgba(101, 225, 208, .4); }
.typing-formal-target label { width: min(100%, 980px); display: grid; grid-template-columns: auto minmax(280px,1fr); align-items: center; gap: 14px; padding: 10px 10px 10px 19px; border: 1px solid rgba(178,221,255,.15); border-radius: 18px; background: rgba(255,255,255,.045); text-align: left; }
.typing-formal-target label span { color: #829cb3; font-size: 12px; }
.typing-formal-target input, .typing-remediation-input input { min-width: 0; height: 54px; padding: 0 17px; border: 1px solid rgba(106,221,205,.3); border-radius: 13px; outline: none; color: #fff; background: rgba(5,21,38,.84); font-size: 22px; }
.typing-formal-target input:focus, .typing-remediation-input input:focus { border-color: #6ddfce; box-shadow: 0 0 0 4px rgba(82,217,198,.12); }
.typing-formal-keyboard { width: min(100%, 980px); margin: clamp(16px, 2.2vh, 24px) auto 0; }
.typing-formal-keyboard .typing-finger-legend { display: none; }
.typing-formal-tip { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; color: #758fa5; font-size: 12px; }
.typing-formal-tip i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #70dfcf; background: rgba(92,218,200,.09); font-style: normal; }
.typing-remediation-inline { width: 100%; min-height: 0; height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; }
.typing-remediation-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(145px, .9fr) minmax(220px, 1.3fr) minmax(145px, .8fr) minmax(60px, .35fr) minmax(180px, 1fr) minmax(140px, .72fr); align-items: center; gap: clamp(7px, .8vw, 13px); padding: 4px 0 10px; border-bottom: 1px solid rgba(178, 221, 255, .1); }
.typing-remediation-heading { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 8px; }
.typing-remediation-heading h2 { min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: clamp(20px, 1.65vw, 29px); text-overflow: ellipsis; white-space: nowrap; }
.typing-remediation-heading small { grid-column: 1 / -1; overflow: hidden; color: #718da3; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.typing-remediation-context { margin: 0; overflow: hidden; color: #718ba1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.typing-remediation-content { min-height: 0; display: grid; place-items: center; overflow: hidden; }
.typing-remediation-eyebrow { color: #f0b968; font-size: 13px; }
.typing-remediation-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.typing-remediation-steps span { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 6px; border-radius: 10px; color: #6f899f; background: rgba(255,255,255,.035); font-size: 10px; white-space: nowrap; }
.typing-remediation-steps i { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.06); font-size: 9px; font-style: normal; }
.typing-remediation-steps span.is-current { color: #ecfbff; background: rgba(92,218,200,.12); }
.typing-remediation-steps span.is-done { color: #68cbbf; }
.typing-remediation-pinyin { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 7px; margin: 0; }
.typing-remediation-pinyin small { color: #7d98ae; font-size: 9px; }
.typing-remediation-pinyin > strong { min-width: 0; overflow: hidden; color: #72e2d1; font-size: clamp(18px,1.55vw,25px); letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.typing-remediation-pinyin [data-typing-remediation-pinyin-guide] { grid-column: 1 / -1; min-height: 18px; display: flex; justify-content: flex-start; gap: 4px; }
.typing-remediation-pinyin [data-typing-remediation-pinyin-guide] b { color: #415b72; font-size: 14px; transition: color .15s, transform .15s, text-shadow .15s; }
.typing-remediation-pinyin [data-typing-remediation-pinyin-guide] b.is-typed { color: #67decc; }
.typing-remediation-pinyin [data-typing-remediation-pinyin-guide] b.is-next { color: #fff; transform: translateY(-2px); text-shadow: 0 0 14px rgba(101,225,208,.6); }
.typing-remediation-pinyin.is-hidden strong { color: #7f99af; font-size: 15px; letter-spacing: 0; }
.typing-remediation-target { min-width: 0; display: grid; justify-items: center; gap: 1px; margin: 0; }
.typing-remediation-target small { color: #7d98ae; font-size: 9px; }
.typing-remediation-target h3 { margin: 0; font-size: clamp(27px, 2.5vw, 40px); }
.typing-remediation-input { min-width: 0; display: grid; gap: 3px; text-align: left; }
.typing-remediation-input span { color: #879fb3; font-size: 9px; }
.typing-remediation-input input { width: 100%; }
.typing-remediation-time { min-width: 0; display: grid; gap: 5px; }
.typing-remediation-time > em { color: #f3c47c; font-size: 10px; font-style: normal; text-align: right; white-space: nowrap; }
.typing-countdown.is-compact { margin: 0; gap: 7px; }
.typing-countdown.is-compact strong { min-width: 44px; font-size: 13px; }
.typing-remediation-guide { width: min(100%, 1060px); min-width: 0; display: grid; justify-items: center; align-content: center; gap: 6px; }
.typing-remediation-guide .typing-hand-side { display: none; }
.typing-remediation-guide.is-assessment { gap: 12px; }
.typing-assessment-label { display: grid; justify-items: center; gap: 4px; color: #7892a8; font-size: 12px; }
.typing-assessment-label strong { color: #dcecf8; font-size: 18px; }
.typing-remediation-independent { min-height: 260px; display: grid; place-content: center; gap: 8px; border: 1px dashed rgba(171,211,241,.14); border-radius: 22px; color: #7792a8; text-align: center; }
.typing-remediation-independent strong { color: #dcecf8; font-size: 22px; }
.typing-remediation-inline > footer { color: #718ba1; font-size: 12px; text-align: center; }
.typing-self-study { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: clamp(16px, 2vw, 30px); }
.typing-self-study-catalog { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px clamp(16px, 1.8vw, 28px) 10px 0; overflow-y: auto; border: 0; border-right: 1px solid rgba(181, 219, 255, .13); border-radius: 0; background: transparent; }
.typing-self-study-catalog > div { display: grid; gap: 5px; margin-bottom: 8px; }
.typing-self-study-catalog > div span { color: #72dfcf; font-size: 12px; }
.typing-self-study-catalog > div strong { color: #fff; font-size: 25px; }
.typing-self-study-catalog > div small { color: #7892a8; }
.typing-self-study-catalog > button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid transparent; border-radius: 14px; color: #dcecf8; background: rgba(255,255,255,.045); text-align: left; cursor: pointer; }
.typing-self-study-catalog > button.is-current { border-color: rgba(103, 226, 208, .42); background: rgba(91, 218, 199, .12); }
.typing-self-study-catalog button > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 10px; color: #74ddce; background: rgba(102, 223, 207, .1); font-style: normal; }
.typing-self-study-catalog button > span { display: grid; gap: 2px; }
.typing-self-study-catalog button small { color: #718ba2; font-size: 9px; }
.typing-self-study-catalog button strong { font-size: 13px; }
.typing-self-study-catalog button em { color: #6fe0cf; font-size: 10px; font-style: normal; }
.typing-self-study-catalog .typing-self-study-back { grid-template-columns: 1fr; margin-top: auto; color: #89a4b9; text-align: center; }
.typing-self-study-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(12px, 1.5vh, 20px); padding: clamp(14px, 1.8vw, 28px) 0; border: 0; border-radius: 0; background: transparent; overflow-y: auto; }
.typing-self-study-heading { display: flex; align-items: center; gap: 12px; }
.typing-self-study-heading span { color: #72dfcf; font-size: 12px; }
.typing-self-study-heading strong { color: #fff; font-size: 18px; }
.typing-self-study-heading small { color: #708aa0; }
.typing-pinyin-toggle { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 13px; border: 1px solid rgba(170, 208, 235, .2); border-radius: 999px; color: #91a9bd; background: rgba(255,255,255,.045); font-size: 12px; font-weight: 800; cursor: pointer; }
.typing-pinyin-toggle i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: #314960; transition: background .18s ease; }
.typing-pinyin-toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #b7c8d6; transition: transform .18s ease, background .18s ease; }
.typing-pinyin-toggle.is-on { color: #8cebdd; border-color: rgba(112, 225, 209, .42); background: rgba(93, 218, 200, .09); }
.typing-pinyin-toggle.is-on i { background: #3f9f92; }
.typing-pinyin-toggle.is-on i::after { background: #eafffb; transform: translateX(12px); }
.typing-self-study-done { min-width: min(100%, 520px); display: grid; gap: 8px; padding: 30px; border: 1px solid rgba(105, 225, 208, .3); border-radius: 22px; background: rgba(91, 218, 199, .08); text-align: center; }
.typing-self-study-done strong { color: #75e2d2; font-size: 28px; }
.typing-self-study-done span { color: #8ca6ba; }
.typing-input-guidance { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(2, 12, 24, .76); backdrop-filter: blur(12px); }
.typing-input-guidance-card { width: min(100%, 620px); display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(126, 231, 216, .28); border-radius: 30px; color: #eaf8ff; background: linear-gradient(160deg, #123353, #081c32); box-shadow: 0 34px 90px rgba(0, 6, 20, .56); text-align: center; }
.typing-input-guidance-eyebrow { color: #74e1d1; font-size: 13px; font-weight: 900; letter-spacing: .14em; }
.typing-input-guidance-card h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); }
.typing-input-guidance-card p { max-width: 520px; margin: 0; color: #bed0df; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.7; }
.typing-input-guidance-card > small { color: #7894aa; font-size: 13px; }
.typing-input-guidance-card > div:last-child { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
.typing-guidance-keyboard { width: min(100%, 510px); min-height: 128px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 22px; border: 1px solid rgba(189, 226, 255, .14); border-radius: 22px; background: rgba(3, 18, 34, .72); }
.typing-guidance-keyboard kbd { min-width: 66px; min-height: 64px; display: grid; place-items: center; padding: 0 15px; border: 1px solid rgba(195, 226, 252, .2); border-bottom-width: 5px; border-radius: 13px; color: #dcebf6; background: linear-gradient(155deg, #294b68, #16324e); box-shadow: 0 8px 18px rgba(0, 5, 15, .28); font-family: inherit; font-size: 17px; font-weight: 900; }
.typing-guidance-keyboard kbd.wide { min-width: 126px; }
.typing-guidance-keyboard kbd.space { width: min(54%, 250px); }
.typing-guidance-keyboard span { color: #718ca2; font-size: 28px; font-weight: 900; }
.typing-guidance-keyboard kbd.is-target { color: #073338; border-color: #a1f4e8; background: linear-gradient(145deg, #91ebdd, #55cbbd); box-shadow: 0 0 0 6px rgba(94, 222, 204, .13), 0 14px 32px rgba(50, 212, 190, .24); animation: typing-guidance-key 1.2s ease-in-out infinite; }
.typing-screen-note { display: none; }
@keyframes typing-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
@keyframes typing-pulse { from { height: 15px; opacity: .45; } to { height: 48px; opacity: 1; } }
@keyframes typing-guidance-key { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes typing-key-press { 0% { transform: translateY(0); } 45% { transform: translateY(4px) scale(.97); } 100% { transform: translateY(0); } }
@keyframes typing-key-press-error { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(-3px) translateY(3px); } 70% { transform: translateX(3px) translateY(3px); } }

@media (max-width: 1050px) {
  .typing-active { grid-template-columns: 1fr; }
  .typing-side-panel { display: grid; grid-template-columns: auto 1fr; min-height: auto; padding: 14px 18px; border-right: 0; border-bottom: 1px solid rgba(181, 219, 255, .13); }
  .typing-live-stats { grid-template-columns: repeat(3, 1fr); }
  .typing-rounds-empty, .typing-rounds-list { display: none; }
  .typing-welcome { grid-template-columns: 1fr; }
  .typing-welcome-board { display: none; }
  .typing-self-study { grid-template-columns: 1fr; }
  .typing-self-study-catalog { max-height: 190px; padding: 12px 0; border-right: 0; border-bottom: 1px solid rgba(181, 219, 255, .13); }
  .typing-formal-layout { grid-template-columns: 1fr; }
  .typing-formal-catalog { display: none; }
  .typing-remediation-toolbar { grid-template-columns: minmax(150px, .8fr) minmax(230px, 1.25fr) minmax(140px, .7fr) 60px minmax(170px, 1fr) minmax(130px, .7fr); }
}
@media (max-height: 1000px) and (min-width: 1051px) {
  .typing-topbar { min-height: 62px; padding-top: 8px; padding-bottom: 8px; }
  .typing-topbar button { height: 38px; }
  .typing-experience-body { padding-top: 10px; padding-bottom: 12px; }
  .typing-active, .typing-formal-layout, .typing-self-study { gap: clamp(12px, 1.4vw, 22px); }
  .typing-side-panel, .typing-formal-catalog, .typing-self-study-catalog { padding-top: 6px; padding-bottom: 6px; }
  .typing-phase-label strong { margin-top: 4px; font-size: 25px; }
  .typing-live-stats { gap: 7px; }
  .typing-live-stats span { padding: 9px 11px; border-radius: 12px; }
  .typing-live-stats strong { margin-top: 3px; font-size: 17px; }
  .typing-rounds-empty, .typing-rounds-list { padding-top: 10px; }
  .typing-stage { gap: 8px; padding-top: 6px; padding-bottom: 6px; }
  .typing-target { min-height: 66px; }
  .typing-target strong { font-size: clamp(60px, 6.5vw, 92px); }
  .typing-alphabet-progress { max-width: 900px; }
  .typing-alphabet-progress span { height: 20px; font-size: 8px; }
  .typing-keyboard { max-width: 900px; gap: 5px; padding: 9px 13px 7px; border-radius: 20px; }
  .typing-key-row { gap: 6px; }
  .typing-key { max-width: 62px; min-width: 36px; aspect-ratio: 1.3; border-bottom-width: 3px; }
  .typing-key strong { font-size: 17px; }
  .typing-key small { font-size: 7px; }
  .typing-finger-legend { display: none; }
  .typing-hand-guide, .typing-welcome-hands { max-width: 900px; height: 82px; }
  .typing-hand { width: 184px; height: 82px; }
  .typing-hand-guide > p { font-size: 10px; }
  .typing-current-pinyin { min-height: 46px; margin-bottom: 4px; }
  .typing-formal-stage.has-keyboard { padding-top: 2px; padding-bottom: 2px; overflow: hidden; }
  .typing-formal-stage > header strong { font-size: 18px; }
  .typing-formal-stage.has-keyboard .typing-countdown { margin: 9px 0; }
  .typing-countdown > div { height: 7px; }
  .typing-formal-stage.has-keyboard .typing-formal-target h1 { margin: 7px 0 10px; font-size: clamp(36px, 4.2vw, 58px); }
  .typing-formal-target input, .typing-remediation-input input { height: 46px; font-size: 19px; }
  .typing-formal-target label { max-width: 900px; padding-top: 7px; padding-bottom: 7px; }
  .typing-formal-keyboard { max-width: 900px; margin-top: 8px; }
  .typing-formal-tip { margin-top: 3px; font-size: 10px; }
  .typing-formal-tip i { width: 24px; height: 24px; }
  .typing-formal-catalog ol { gap: 4px; margin: 9px 0; }
  .typing-formal-catalog li { min-height: 34px; padding: 4px 7px; border-radius: 10px; }
  .typing-formal-catalog li i { width: 24px; height: 24px; }
  .typing-remediation-inline { gap: 5px; }
  .typing-remediation-toolbar { padding: 1px 0 6px; }
  .typing-remediation-steps span { min-height: 30px; }
  .typing-remediation-pinyin { margin: 0; }
  .typing-remediation-target { margin: 0; }
  .typing-remediation-guide { max-width: 930px; }
  .typing-remediation-inline > footer { font-size: 10px; }
  .typing-self-study-stage { gap: 8px; padding-top: 6px; padding-bottom: 6px; overflow: hidden; }
  .typing-phrase-characters { font-size: clamp(28px, 3vw, 44px); }
  .typing-phrase-target input { height: 42px; }
  .typing-complete { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .typing-topbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .typing-topbar div { display: grid; gap: 1px; }
  .typing-topbar div strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  .typing-topbar .typing-daily-clock { min-width: 74px; }
  .typing-topbar .typing-daily-clock small { display: none; }
  .typing-topbar .typing-daily-clock strong { font-size: 18px; }
  .typing-topbar > em:not(.typing-daily-clock) { display: none; }
  .typing-experience-body { padding: 14px; }
  .typing-side-panel { grid-template-columns: 1fr; }
  .typing-live-stats { grid-template-columns: repeat(3, 1fr); }
  .typing-stage { padding: 14px 8px; border-radius: 20px; }
  .typing-keyboard { padding: 10px 6px; gap: 5px; }
  .typing-key-row { gap: 4px; }
  .typing-key { min-width: 25px; border-radius: 7px; }
  .typing-key small, .typing-hand-guide { display: none; }
  .typing-hand-overlay { display: none; }
  .typing-finger-legend { display: none; }
  .typing-formal-stage.has-keyboard { padding: 14px 8px; }
  .typing-self-study-heading { width: 100%; flex-wrap: wrap; }
  .typing-self-study-heading small { order: 3; width: 100%; }
  .typing-pinyin-toggle { min-height: 44px; }
  .typing-result-grid { grid-template-columns: repeat(2, 1fr); }
  .typing-result-insights { grid-template-columns: 1fr; }
  .typing-input-guidance { padding: 14px; }
  .typing-input-guidance-card { padding: 24px 18px; border-radius: 22px; }
  .typing-guidance-keyboard { min-height: 104px; padding: 15px 10px; gap: 6px; }
  .typing-guidance-keyboard kbd { min-width: 48px; min-height: 54px; padding: 0 9px; font-size: 14px; }
  .typing-guidance-keyboard kbd.wide { min-width: 104px; }
  .typing-screen-note { position: fixed; inset: auto 12px 12px; z-index: 5; display: block; padding: 10px 14px; border-radius: 12px; color: #072a35; background: #78e0d0; text-align: center; font-size: 12px; font-weight: 800; }
}