:root{--page: #f5f7f4;--panel: #ffffff;--panel-soft: #f6f8f7;--text: #1b2430;--text-strong: #13202b;--muted: #53636d;--muted-strong: #496071;--border: #d4dde0;--border-strong: #c7d2d8;--accent: #246b54;--accent-2: #2f7c62;--accent-soft: #e7f5ee;--success-soft: #e5f5ed;--success-strong: #0f7a52;--warn: #d59a2f;--warn-soft: #fff6df;--error: #b33a25;--error-soft: #ffe8e2;--current-soft: #dff0ff;--current: #176b9c;--combo-hot: #ff3d8b;--combo-spark: #6e5bff;--key: #fbfcfc;--key-text: #1e2e38;color:var(--text);background:var(--page);font-family:Inter,Pretendard,Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}:root[data-theme=dark]{--page: #111418;--panel: #191d22;--panel-soft: #20252b;--text: #d9dee3;--text-strong: #f2f4f6;--muted: #9aa5ad;--muted-strong: #aeb8bf;--border: #303741;--border-strong: #3b4651;--accent: #65c49b;--accent-2: #79d3aa;--accent-soft: #18352a;--success-soft: #173528;--success-strong: #8de0b7;--warn: #d0a44c;--warn-soft: #3a301e;--error: #ff8a70;--error-soft: #3a201c;--current-soft: #18324a;--current: #8fc8ff;--combo-hot: #ff5db1;--combo-spark: #9d8cff;--key: #20252b;--key-text: #eef2f4;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:1060px;min-height:100vh;background:var(--page)}html.ui-scale-active,body.ui-scale-active{overflow:hidden;height:100vh;width:100vw}html.ui-scale-active{scrollbar-width:none}html.ui-scale-active::-webkit-scrollbar,body.ui-scale-active::-webkit-scrollbar{width:0;height:0;display:none}body.ui-scale-active{min-width:0;min-height:100vh}body.ui-scale-active .app-shell{width:1240px;margin:0 auto;padding:12px 4px;transform-origin:top center;transform:scale(var(--ui-scale-x, 1),var(--ui-scale-y, 1))}body.ui-scale-active .top-bar{margin-bottom:8px}body.ui-scale-active .mode-tabs{margin-bottom:10px}body.ui-scale-active .mode-tabs button{min-height:56px;padding:8px 10px}body.ui-scale-active .target-panel{min-height:300px;padding:22px}body.ui-scale-active .stats-panel{min-height:300px;padding:10px}body.ui-scale-active .feedback-row{margin-top:8px}body.ui-scale-active .keyboard{margin-top:8px;padding:10px}button{font:inherit}.app-shell{width:min(1240px,calc(100vw - 48px));margin:0 auto;padding:24px 0 34px}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px}.eyebrow{margin:0 0 2px;color:var(--muted-strong);font-size:12px;font-weight:700}.layout-links{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-size:11px;font-weight:700;letter-spacing:.02em}.layout-links a{display:inline-flex;align-items:center;gap:5px;color:var(--accent);text-decoration:none;padding:1px 8px;border-radius:999px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);transition:background-color .16s ease,color .16s ease}.layout-links a:hover{background:color-mix(in srgb,var(--accent) 18%,var(--panel));color:var(--accent-2)}.layout-links a.github,.reference-links a.github{color:#fff;background:#24292f;box-shadow:inset 0 0 0 1px color-mix(in srgb,#ffffff 18%,transparent)}.layout-links a.github:hover,.reference-links a.github:hover{background:#1f2328;color:#fff}:root[data-theme=light] .layout-links a.github,:root[data-theme=light] .reference-links a.github{background:#1f2328;color:#fff}.layout-links a.naver,.reference-links a.naver{color:#fff;background:#1b3a2a;box-shadow:inset 0 0 0 1px color-mix(in srgb,#03c75a 35%,transparent)}.layout-links a.naver:hover,.reference-links a.naver:hover{background:#244c38;color:#fff}.layout-links a.naver .brand-icon,.reference-links a.naver .brand-icon{fill:#03c75a}.brand-icon{width:1em;height:1em;fill:currentColor;flex:0 0 auto}.reference-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}.reference-links a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;padding:6px 14px;border-radius:999px;background:var(--accent-soft);font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 28%,transparent);transition:background-color .16s ease,color .16s ease}.reference-links a:hover{background:color-mix(in srgb,var(--accent) 22%,var(--panel));color:var(--accent-2)}h1{margin:0;color:var(--text-strong);font-size:24px;line-height:1}.top-actions{display:flex;gap:8px}.ghost-button,.mode-tabs button{border:1px solid var(--border-strong);background:var(--panel);color:var(--text);cursor:pointer}.ghost-button{min-width:72px;height:30px;border-radius:8px;font-size:13px;font-weight:700}.ghost-button:hover,.mode-tabs button:hover{border-color:var(--accent)}.mode-tabs{display:grid;grid-template-columns:repeat(var(--mode-count, 5),minmax(0,1fr));gap:8px;margin-bottom:14px}.mode-tabs button{min-height:68px;border-radius:8px;padding:10px 12px;text-align:left}.mode-tabs button.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.mode-tabs span{display:block;margin-bottom:6px;color:var(--text-strong);font-size:16px;font-weight:800}.mode-tabs small{display:block;color:var(--muted);font-size:12px;line-height:1.35}.practice-board{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:12px;align-items:stretch}.practice-board.impact-hit{animation:board-tap .19s ease-out}.practice-board.impact-complete{animation:board-finish .32s cubic-bezier(.2,.9,.25,1.25)}.target-panel,.stats-panel,.feedback-row,.keyboard,.reference-panel,.settings-panel{border:1px solid var(--border);border-radius:8px;background:var(--panel)}.settings-panel{margin-bottom:12px;padding:12px;display:grid;gap:12px}.setting-group{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:18px;border-radius:8px;background:var(--panel-soft);padding:12px}.setting-group.compact{grid-template-columns:minmax(0,1fr) auto}.setting-title{display:block;margin-bottom:5px;color:var(--text-strong);font-size:16px;font-weight:800}.setting-group p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.setting-control{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:12px;align-items:center}.setting-control input[type=range]{width:100%;accent-color:var(--accent)}.number-field{height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;border:1px solid var(--border-strong);border-radius:8px;background:var(--panel);padding:0 9px}.number-field input{min-width:0;border:0;outline:0;background:transparent;color:var(--text-strong);font:inherit;font-weight:800}.number-field span{color:var(--muted);font-size:13px;font-weight:800}.segmented-control{display:inline-grid;grid-template-columns:repeat(3,68px);gap:4px;border:1px solid var(--border-strong);border-radius:8px;background:var(--panel);padding:4px}.segmented-control.layout-control{grid-template-columns:repeat(2,78px)}.segmented-control button{height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-weight:800}.segmented-control button.active{background:var(--accent-soft);color:var(--accent)}.target-panel{position:relative;overflow:hidden;min-height:366px;padding:32px 24px;display:flex;flex-direction:column;justify-content:space-between}.hit-feedback{position:absolute;right:18px;top:16px;z-index:2;padding:0;background:transparent!important;border:0;border-radius:0;box-shadow:none!important;text-align:right;font-family:Bungee,Russo One,Bebas Neue,Impact,system-ui,sans-serif;font-size:22px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;pointer-events:none;line-height:1;white-space:nowrap;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));animation:rhythm-burst .72s cubic-bezier(.18,.86,.18,1.18) forwards}.hit-feedback:before{content:"";position:absolute;inset:-18% -22%;border-radius:999px;background:radial-gradient(closest-side,color-mix(in srgb,currentColor 55%,transparent) 0%,transparent 70%);filter:blur(6px);pointer-events:none;z-index:-1;animation:indicator-aura .72s ease-out forwards;-webkit-text-fill-color:initial}.hit-feedback:after{content:"★";position:absolute;right:-2px;top:-8px;font-family:Bungee,system-ui,sans-serif;font-size:11px;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;color:#fffffff2;text-shadow:0 0 8px rgba(255,224,102,.95);animation:indicator-spark .72s ease-out forwards}.hit-feedback.hit{font-size:20px;color:#2ad3a0;text-shadow:0 0 1px #2ad3a0,0 0 8px color-mix(in srgb,#2ad3a0 80%,transparent),0 0 18px color-mix(in srgb,#1f7eff 55%,transparent),0 2px 6px rgba(0,0,0,.45)}.hit-feedback.complete{font-size:28px;color:#ff1f6d;text-shadow:0 0 1px #ff1f6d,0 0 12px color-mix(in srgb,#ff1f6d 80%,transparent),0 0 24px color-mix(in srgb,#ff8a1f 60%,transparent),0 0 38px color-mix(in srgb,#6f4dff 50%,transparent),0 2px 6px rgba(0,0,0,.45);animation:rhythm-clear .88s cubic-bezier(.18,.86,.18,1.22) forwards}.hit-feedback.miss{font-size:20px;color:#ff1f6d;text-shadow:0 0 1px #ff1f6d,0 0 8px color-mix(in srgb,#ff1f6d 80%,transparent),0 0 18px color-mix(in srgb,#ff5a3c 55%,transparent),0 2px 6px rgba(0,0,0,.45);animation:rhythm-miss .72s cubic-bezier(.2,.7,.2,1.1) forwards}@keyframes indicator-aura{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(1.6)}}@keyframes indicator-spark{0%{opacity:0;transform:translate(-6px,6px) rotate(-20deg) scale(.6)}25%{opacity:1;transform:translate(0) rotate(0) scale(1.1)}to{opacity:0;transform:translate(10px,-10px) rotate(40deg) scale(.8)}}@keyframes rhythm-burst{0%{opacity:0;transform:translateY(14px) scale(.55) rotate(-2deg);letter-spacing:.02em}18%{opacity:1;transform:translateY(-4px) scale(1.18) rotate(.5deg);letter-spacing:.16em}40%{opacity:1;transform:translateY(0) scale(1.04);letter-spacing:.1em}to{opacity:0;transform:translateY(-22px) scale(.96);letter-spacing:.18em}}@keyframes rhythm-clear{0%{opacity:0;transform:translateY(20px) scale(.4) rotate(-3deg);letter-spacing:.02em}20%{opacity:1;transform:translateY(-6px) scale(1.32) rotate(2deg);letter-spacing:.22em}45%{opacity:1;transform:translateY(0) scale(1.08) rotate(-1deg);letter-spacing:.14em}to{opacity:0;transform:translateY(-28px) scale(1.02);letter-spacing:.24em}}@keyframes rhythm-miss{0%{opacity:0;transform:translateY(6px) scale(.7) rotate(-4deg)}16%{opacity:1;transform:translate(-8px) scale(1.1) rotate(-2deg)}32%{transform:translate(8px) scale(1.05) rotate(2deg)}48%{transform:translate(-4px) scale(1.04)}to{opacity:0;transform:translateY(-14px) scale(.96)}}@keyframes indicator-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.target-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:15px;line-height:1.4}.target-meta strong{color:var(--accent);white-space:nowrap}.target-text{min-height:112px;color:var(--text-strong);font-size:43px;font-weight:800;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}.char-cell{position:relative;display:inline-grid;place-items:center;min-width:.64em;height:1.24em;margin:0 .005em;border-radius:6px;vertical-align:baseline;line-height:1}.char-cell.space{min-width:.4em}.char-cell.typed{color:var(--success-strong);text-shadow:0 0 .01px currentColor}.char-cell.next{background:var(--current-soft);color:var(--current);box-shadow:inset 0 -3px color-mix(in srgb,var(--current) 32%,transparent);animation:caret-breathe 1.1s ease-in-out infinite}.target-panel.combo-on .char-cell.next{background:linear-gradient(135deg,#ffeb6b,#ff9a3d,#ff3d8b,#9d8cff);background-size:320% 320%;color:#fff;text-shadow:0 0 6px rgba(255,255,200,.9),0 0 14px rgba(255,154,61,.85),0 1px 2px rgba(0,0,0,.35);box-shadow:inset 0 -3px color-mix(in srgb,#ff3d8b 60%,transparent),0 0 0 2px color-mix(in srgb,#ff9a3d 40%,transparent),0 0 22px color-mix(in srgb,#ff3d8b 55%,transparent),0 0 44px color-mix(in srgb,#ffeb6b 35%,transparent);animation:next-blaze .7s ease-in-out infinite alternate,indicator-shimmer 1.6s ease infinite}.target-panel.combo-on .char-cell.next:before{content:"";position:absolute;left:50%;top:50%;width:280%;height:220%;transform:translate(-50%,-50%) scale(1);border-radius:50%;background:radial-gradient(closest-side,#fff0a08c,#ff9a3d59 35%,#ff3d8b38 60%,#9d8cff1f,#9d8cff00);filter:blur(8px);mix-blend-mode:screen;pointer-events:none;z-index:0;animation:aura-pulse 1.6s ease-in-out infinite alternate;transform-origin:50% 50%}.target-panel.combo-on .char-cell.next:after{content:"";position:absolute;left:50%;top:50%;width:170%;height:150%;transform:translate(-50%,-50%) scale(1);border-radius:50%;background:radial-gradient(closest-side,#ffe682b3,#ff6eb459 50%,#ff6eb400 80%);filter:blur(4px);mix-blend-mode:screen;pointer-events:none;z-index:0;animation:aura-pulse-inner 1.1s ease-in-out infinite alternate;transform-origin:50% 50%}@keyframes next-blaze{0%{transform:translateY(0) scale(1);filter:brightness(1)}to{transform:translateY(-2px) scale(1.05);filter:brightness(1.18)}}@keyframes aura-pulse{0%{opacity:.7;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}to{opacity:.85;transform:translate(-50%,-50%) scale(1.02)}}@keyframes aura-pulse-inner{0%{opacity:.6;transform:translate(-50%,-50%) scale(.95)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.08)}to{opacity:.8;transform:translate(-50%,-50%) scale(1)}}.char-cell.remaining{color:color-mix(in srgb,var(--text-strong) 54%,var(--panel))}.bad-key-inline{z-index:2;min-width:42px;height:32px;padding:0 9px;display:inline-grid;place-items:center;border:1px solid color-mix(in srgb,var(--error) 70%,var(--panel));border-bottom-width:3px;border-radius:7px;background:var(--error-soft);color:var(--error);font-size:14px;font-weight:900;line-height:1;white-space:nowrap;pointer-events:none;box-shadow:inset 0 -2px color-mix(in srgb,var(--error) 25%,transparent),0 0 0 4px color-mix(in srgb,var(--error) 12%,transparent);animation:bad-key-inline .65s ease-out forwards}.input-strip{min-height:50px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.input-strip span{display:inline-flex;align-items:center;min-height:42px;border-radius:7px;padding:6px 12px;font-size:19px;font-weight:800;box-shadow:inset 0 -2px color-mix(in srgb,currentColor 18%,transparent)}.input-strip .placeholder{color:var(--muted);font-weight:600}.input-strip .ok{background:var(--success-soft);color:var(--success-strong)}.input-strip .bad{background:var(--error-soft);color:var(--error)}.input-strip .pending-keys{background:var(--accent-soft);color:var(--accent);letter-spacing:.04em;font-size:16px}.input-strip .abbrev-complete{background:var(--accent);color:var(--panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);animation:abbrev-pop .32s ease-out}@keyframes abbrev-pop{0%{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}.stats-panel{min-height:366px;padding:14px 12px;display:grid;grid-template-columns:1fr;gap:12px}.stats-panel>div,.feedback-row>div{min-height:46px;border-radius:8px;background:var(--panel-soft);padding:8px 10px}.stat-card .stat-content{background:transparent;padding:0;min-height:0}.stats-panel .stat-card.with-graph{background:transparent;border:1px solid color-mix(in srgb,var(--border) 60%,transparent)}.stat-card{position:relative;overflow:hidden;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}.stat-card.with-graph{padding:8px 12px}.stat-graph{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95;z-index:0}.sparkline-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 50%,transparent))}.sparkline-fill{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:none}.stat-card.with-graph:nth-child(1) .sparkline-line{stroke:color-mix(in srgb,#4dc3ff 70%,transparent);filter:drop-shadow(0 0 3px color-mix(in srgb,#4dc3ff 35%,transparent))}.stat-card.with-graph:nth-child(1) .sparkline-fill{fill:color-mix(in srgb,#4dc3ff 12%,transparent)}.sparkline-segment{fill:none;stroke-width:1.8;stroke-linecap:round}.sparkline-up{stroke:color-mix(in srgb,#6cf2c9 70%,transparent);filter:drop-shadow(0 0 3px color-mix(in srgb,#6cf2c9 40%,transparent))}.sparkline-down{stroke:color-mix(in srgb,#ff7a59 70%,transparent);filter:drop-shadow(0 0 3px color-mix(in srgb,#ff7a59 40%,transparent))}.sparkline-steady{stroke:color-mix(in srgb,var(--muted) 50%,transparent)}.sparkline-segment-fill{stroke:none}.sparkline-fill{transition:fill .28s ease}.sparkline-fill-up{fill:color-mix(in srgb,#6cf2c9 16%,transparent)}.sparkline-fill-down{fill:color-mix(in srgb,#ff7a59 16%,transparent)}.sparkline-fill-steady{fill:color-mix(in srgb,var(--muted) 10%,transparent)}.stat-card .stat-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;text-shadow:0 1px 0 var(--panel)}.stat-card.with-graph .stat-content strong{font-size:24px;font-weight:800;letter-spacing:-.01em;text-shadow:0 0 6px color-mix(in srgb,var(--panel) 80%,transparent),0 0 14px color-mix(in srgb,var(--panel) 55%,transparent)}.stat-card.with-graph .stat-content span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 4px var(--panel);color:var(--muted-strong)}.stat-card.with-graph .stat-delta{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:2px 6px;font-size:12px;font-weight:800;letter-spacing:.02em;border-radius:4px}.stat-card.with-graph .stat-delta.delta-up{background:color-mix(in srgb,var(--success-strong) 14%,transparent);color:var(--success-strong)}.stat-card.with-graph .stat-delta.delta-down{background:color-mix(in srgb,var(--error) 16%,transparent);color:var(--error)}.stat-card .stat-content span{grid-column:1;grid-row:1}.stat-card .stat-content strong{grid-column:1;grid-row:2}.stat-delta{grid-column:2;grid-row:1 / span 2;align-self:center;font-style:normal;font-size:13px;font-weight:800;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted-strong)}.stat-delta.delta-up{background:color-mix(in srgb,var(--success-strong) 18%,transparent);color:var(--success-strong)}.stat-delta.delta-down{background:color-mix(in srgb,var(--error) 22%,transparent);color:var(--error)}.stat-card.mistake-card{background:var(--panel-soft);transition:background-color .22s ease,box-shadow .22s ease}.stat-card.mistake-card.has-mistakes{background:color-mix(in srgb,var(--error) 8%,var(--panel-soft))}.stat-card.mistake-card.has-mistakes strong{color:color-mix(in srgb,var(--error) 70%,var(--text-strong))}.stat-card.mistake-card.shaking{background:color-mix(in srgb,var(--error) 28%,var(--panel-soft));box-shadow:0 0 0 1.5px color-mix(in srgb,var(--error) 45%,transparent);animation:mistake-shake .46s cubic-bezier(.36,.07,.19,.97)}.stat-card.mistake-card.shaking strong{color:var(--error)}@keyframes mistake-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.stat-card:after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;z-index:0}.stat-card.trend-up{background:var(--success-soft);transform:translateY(-1px)}.stat-card.trend-up strong{color:var(--success-strong)}.stat-card.trend-up:after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--success-strong) 22%,transparent),transparent);animation:metric-glint .68s ease-out}.stat-card.trend-down{background:var(--error-soft)}.stat-card.trend-down strong{color:var(--error)}.stats-panel span,.feedback-row span,.stat-content span{display:block;margin-bottom:4px;color:var(--muted);font-size:12px;font-weight:700}.stats-panel strong,.feedback-row strong,.stat-content strong{color:var(--text-strong);font-size:20px;line-height:1.1}.feedback-row{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:8px;margin-top:12px;padding:6px;align-items:stretch}.feedback-row>div{min-height:56px;display:flex;flex-direction:column;justify-content:center;padding:4px 8px}.abbrev-hints{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap}.feedback-row>div.abbrev-hints{flex-direction:row;justify-content:flex-start}.abbrev-hints>span{margin:0;white-space:nowrap;text-align:left;flex:0 0 auto}.abbrev-hints .hint-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;justify-content:center}.abbrev-hints .hint-empty{color:var(--muted);font-size:14px;font-weight:700;flex:1 1 auto;text-align:center;align-self:center;line-height:1.4;margin:0}.abbrev-hints .hint-list li{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:17px;font-weight:800;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 36%,transparent)}.abbrev-hints .hint-list li.combo-chip{padding:8px 16px;background:color-mix(in srgb,#ff6fbb 20%,var(--panel));color:var(--text-strong);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ff6fbb 55%,transparent)}.abbrev-hints .hint-list li.combo-chip em{font-style:normal;color:var(--text-strong);font-family:Noto Sans KR,Pretendard,Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif;font-size:22px;font-weight:800;letter-spacing:.04em;line-height:1.1}.abbrev-hints .hint-list em{font-style:normal;color:var(--text-strong);font-size:19px;font-weight:900}.abbrev-hints .hint-list code{padding:4px 12px;border-radius:8px;background:color-mix(in srgb,var(--accent) 24%,var(--panel));color:var(--accent);font-family:inherit;font-size:19px;letter-spacing:.06em;text-align:center;font-weight:900}:root[data-theme=light] .abbrev-hints .hint-list code{background:transparent;color:var(--accent);box-shadow:none;padding:0 4px}.feedback-row strong{display:block;min-height:24px;font-size:18px;overflow-wrap:anywhere}.error-text{color:var(--error)!important}.keyboard{--keyboard-gap: 6px;margin-top:12px;padding:14px;overflow:hidden}.keyboard-row{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:var(--keyboard-gap);margin:0 0 7px}.keyboard-row:before{content:"";display:block}.keyboard-row:nth-child(1):before{display:none}.keyboard-row:nth-child(2):before{grid-column:span 1}.keyboard-row:nth-child(3):before{grid-column:span 2}.keyboard-row:last-child{margin-bottom:0}.keycap{aspect-ratio:1.18 / 1;grid-column:span 2;min-width:0;border:1px solid var(--border-strong);border-bottom-width:3px;border-radius:8px;background:var(--key);padding:6px;display:flex;flex-direction:column;justify-content:space-between;transition:transform 45ms ease,border-color 45ms ease,background-color 45ms ease,box-shadow 45ms ease}.keycap strong{color:var(--key-text);font-size:15px}.keycap span{height:36px;color:var(--muted-strong);font-size:17px;font-weight:800;line-height:1.05;text-align:right;white-space:pre-line;display:grid;align-content:end}.keycap.expected{position:relative;border-color:transparent;background:linear-gradient(var(--key),var(--key)) padding-box,linear-gradient(135deg,#ff3d8b,#ffb347,#6cf2c9,#4dc3ff,#9d8cff,#ff3d8b) border-box;background-size:100% 100%,300% 300%;animation:expected-rainbow 4.5s ease infinite;box-shadow:0 0 0 2px color-mix(in srgb,#ff3d8b 22%,transparent),0 6px 18px -6px color-mix(in srgb,#6cf2c9 50%,transparent)}.keycap.expected strong,.keycap.expected span{color:#d63384}:root[data-theme=dark] .keycap.expected strong,:root[data-theme=dark] .keycap.expected span{color:#ff7eb6}@keyframes expected-rainbow{0%{background-position:0% 50%,0% 50%}50%{background-position:0% 50%,100% 50%}to{background-position:0% 50%,0% 50%}}.keycap.pressed{border-color:var(--border-strong);background:var(--panel-soft);transform:translateY(2px)}.keycap.pressed-correct{border-color:var(--accent);background:var(--success-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.keycap.wrong,.keycap.wrong.pressed{border-color:var(--warn);background:var(--warn-soft);transform:translateY(1px);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 22%,transparent)}.keycap.wrong span,.keycap.wrong strong{color:var(--warn)}@keyframes caret-breathe{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes hit-float{0%{opacity:0;transform:translateY(10px) scale(.94)}22%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-18px) scale(.98)}}@keyframes miss-shake{0%{opacity:0;transform:translate(0)}20%{opacity:1;transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-2px)}to{opacity:0;transform:translate(0) translateY(-12px)}}@keyframes bad-key-inline{0%{opacity:0;transform:translate(-6px) scale(.92)}20%{opacity:1;transform:translate(0) scale(1)}78%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(8px) scale(.96)}}@keyframes metric-glint{0%{opacity:0;transform:translate(-100%)}30%{opacity:1}to{opacity:0;transform:translate(100%)}}@keyframes board-tap{0%{transform:translateY(0) scale(1)}38%{transform:translateY(2px) scale(.998)}to{transform:translateY(0) scale(1)}}@keyframes board-finish{0%{transform:translate(0) scale(1);filter:brightness(1)}18%{transform:translate(-3px) scale(1.006)}36%{transform:translate(3px) scale(1.008)}58%{transform:translate(-1px) scale(1.004);filter:brightness(1.08)}to{transform:translate(0) scale(1);filter:brightness(1)}}.reference-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:color-mix(in srgb,var(--page) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:reference-overlay-in .18s ease-out}.reference-panel{position:relative;margin-top:0;padding:18px 22px 14px;width:min(960px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;box-shadow:0 24px 60px -20px #00000073,0 0 0 1px var(--border);animation:reference-modal-in .2s cubic-bezier(.2,.85,.25,1)}.reference-close{position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:8px;background:var(--panel);color:var(--muted-strong);font-size:14px;font-weight:800;cursor:pointer;transition:background-color .14s ease,color .14s ease,border-color .14s ease}.reference-close:hover{border-color:var(--accent);color:var(--accent)}.reference-panel img{display:block;width:100%;height:auto}@keyframes reference-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes reference-modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:1100px){body{min-width:0}.app-shell{width:calc(100vw - 28px)}.mode-tabs,.practice-board,.feedback-row,.setting-group,.setting-control{grid-template-columns:1fr}.target-text{font-size:31px}}