@font-face{font-family:Kanit;src:url(fonts/Kanit-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Kanit;src:url(fonts/Kanit-SemiBold.ttf) format('truetype');font-weight:600 900;font-display:swap}
:root {
    --bg-color: hsl(340, 30%, 96%);
    --bg-color-rgb: 250, 243, 245;
    --sidebar-bg: hsl(340, 40%, 92%);
    --card-bg: hsl(0, 0%, 100%);
    --text-muted: hsl(340, 10%, 60%);
    --text-main: hsl(340, 20%, 40%);
    --text-active: hsl(340, 50%, 25%);
    --text-correct: hsl(150, 40%, 45%);
    --text-error: hsl(350, 70%, 65%);
    --text-error-extra: hsl(350, 50%, 40%);
    --caret-color: hsl(330, 80%, 65%);
    --primary: hsl(330, 80%, 65%);
    --primary-hover: hsl(330, 80%, 55%);
    --gold: hsl(45, 100%, 50%);
    
    --font-body: 'Kanit', sans-serif;
    --font-mono: 'Kanit', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
.modal.hidden{display:none}
input,button,select,textarea{font-family:var(--font-body)}
.typing-text,.stats-bar,.key,.stat-label{letter-spacing:0;font-variant-numeric:tabular-nums}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Typography Utilities */
.text-primary { color: var(--primary) !important; }
.text-correct { color: var(--text-correct) !important; }
.text-error { color: var(--text-error) !important; }
.text-gold { color: var(--gold) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Sidebar */
.sidebar {
    width: 250px;
    background-color: var(--sidebar-bg);
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.4);
    box-shadow: 4px 0 15px rgba(0,0,0,0.02);
    z-index: 10;
}

.sidebar .logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-active);
    margin-bottom: 3rem;
    padding-left: 1rem;
}
.sidebar .logo svg { color: var(--primary); }

.nav-links { list-style: none; flex-grow: 1; }
.nav-links li { margin-bottom: 0.5rem; }
.nav-links a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-main);
    text-decoration: none;
    border-radius: 8px;
    transition: 0.2s;
}
.nav-links a:hover { background: rgba(255,255,255,0.5); color: var(--text-active); transform: translateX(5px); }
.nav-links a.active { background: var(--primary); color: white; font-weight: 600; box-shadow: 0 4px 10px rgba(255, 105, 180, 0.2); }

.sidebar-bottom { margin-top: auto; }
.learning-band{padding:20px 0;border-top:1px solid #dddee2;margin-top:20px}.learning-band h3{font-size:18px;margin-bottom:14px}.learning-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.learning-form label,.learning-help-form label{display:grid;gap:6px;font-size:14px}.learning-form input,.learning-form select,.learning-help-form textarea,.learning-reply-form textarea,.learning-reply-form select{font:inherit;color:var(--text-main);background:#fff;border:1px solid #cdd4d8;border-radius:6px;padding:9px;max-width:100%;min-width:0}.learning-form .learning-check{display:flex;align-items:center;align-self:center}.learning-check input{width:18px;height:18px}.learning-plan{border-left:3px solid #169c85;padding:12px 16px;margin-top:18px}.learning-plan p{margin:8px 0}.learning-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.learning-comparison span,.learning-comparison strong{display:block;margin-bottom:10px}.learning-comparison strong{font-size:20px}.learning-progress-row{display:flex;width:100%;justify-content:space-between;gap:16px;text-align:left;border:0;border-bottom:1px solid #e1dde0;background:transparent;color:var(--text-main);font:inherit;padding:10px 0;cursor:pointer}.learning-progress-row small{flex-shrink:0;color:#137765}.learning-help-form{display:grid;gap:12px}.learning-help-form button{justify-self:start}.learning-help-row,.learning-coach-row{padding:16px 0;border-bottom:1px solid #ddd}.learning-help-row p,.learning-coach-row p{overflow-wrap:anywhere;margin:8px 0}.learning-reply-form{display:grid;gap:10px;margin-top:16px}.learning-reply-form button{justify-self:start}.learning-reminders{background:#fff3ce;color:#795709;padding:12px;border-left:3px solid #dba21d}.learning-band>p{margin:10px 0}[hidden]{display:none!important}@media(max-width:760px){.learning-comparison{grid-template-columns:1fr}.learning-form>*{width:100%}.learning-form input,.learning-form select{width:100%}.learning-form .learning-check input{width:18px}.learning-progress-row span{overflow-wrap:anywhere}.learning-band h3{font-size:17px}}
.sidebar { overflow-y:auto; flex-shrink:0; }
.sidebar:has(.lesson-sidebar:not([hidden])) .nav-links { flex-grow:0; }
.lesson-sidebar { margin:0.5rem 0 1rem; }
.lesson-sidebar[hidden] { display:none; }
.lesson-sidebar p { font-size:12px; font-weight:600; margin:16px 8px 6px; }
.lesson-sidebar button { display:block; width:100%; text-align:left; border:0; border-left:3px solid transparent; border-radius:4px; background:transparent; color:var(--text-main); padding:8px; cursor:pointer; font:inherit; font-size:12px; }
.lesson-sidebar button span,.lesson-sidebar button small { display:block; overflow-wrap:anywhere; }
.lesson-sidebar button small { color:var(--text-muted); margin-top:4px; }
.lesson-sidebar button.completed small { color:#167564; }
.lesson-sidebar button:hover { background:rgba(255,255,255,0.5); }
.lesson-sidebar button[aria-current="true"] { background:#fff; border-left-color:var(--primary); }
.sidebar-bottom { display:grid; gap:8px; }
.sidebar-bottom a { white-space:normal; font-size:12px; }
.key.key-pressed { transform:translateY(3px); filter:brightness(1.3); box-shadow:inset 0 0 0 3px #fff,0 0 12px var(--primary); }
.key.key-flash { animation:key-flash 180ms ease-out; }
@keyframes key-flash { from { filter:brightness(1.6); } to { filter:brightness(1); } }
@media(max-width:760px) {
    .lessons-nav:has(.lesson-sidebar:not([hidden])) { width:100%; }
    .lesson-sidebar { max-height:280px; overflow:auto; width:100%; }
}

/* Main Content Area */
.content {
    flex-grow: 1;
    padding: 2rem 1.5rem;
    min-width: 0;
    overflow-y: auto;
    position: relative;
}

.view { display: none; max-width: 1000px; margin: 0 auto; animation: fadeIn 0.3s; }
.view.active { display: block; }
#view-practice { max-width: none; width: 100%; }
.posture-image { display:block; width:100%; max-width:800px; height:auto; margin:1rem auto; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; border-bottom: 2px dashed rgba(0,0,0,0.05); padding-bottom: 1rem; }
header h2 { color: var(--text-active); font-size: 2rem; font-weight: 600; text-shadow: 1px 1px 0px rgba(255,255,255,0.8); }

/* Buttons */
.btn { background: none; border: none; color: var(--text-main); font-family: var(--font-body); font-size: 1rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 6px; transition: all 0.2s ease; }
.btn:hover { background: rgba(255,255,255,0.05); color: var(--text-active); }
.btn.active { color: var(--primary); background: rgba(255,255,255,0.05); }
.btn-primary { background-color: var(--primary); color: #000; font-weight: 600; }
.btn-primary:hover { background-color: var(--primary-hover); color: #000; }
.btn-outline { border: 1px solid rgba(255,255,255,0.2); }
.btn-outline:hover { border-color: var(--text-active); }
.btn-icon { padding: 0.5rem; display: flex; justify-content: center; align-items: center; opacity: 0.7; }
.btn-icon:hover { opacity: 1; }

/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { background: var(--card-bg); padding: 1.5rem; border-radius: 20px; border: none; box-shadow: 0 8px 24px rgba(255, 154, 162, 0.15); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.card:hover { transform: translateY(-5px) scale(1.02); }
.card.wide-card { grid-column: span 3; }
.card h3 { font-size: 1.2rem; color: var(--text-active); margin-bottom: 0.5rem; font-weight: 600; }
.card:nth-child(1) h3 { color: hsl(200, 80%, 45%); }
.card:nth-child(2) h3 { color: hsl(45, 90%, 45%); }
.card:nth-child(3) h3 { color: hsl(150, 60%, 40%); }
.card.wide-card h3 { color: hsl(330, 80%, 65%); }
.card .val { font-size: 2.8rem; font-family: var(--font-mono); line-height: 1; margin-bottom: 0.25rem; font-weight: 700; }
.card .subtext { font-size: 0.95rem; color: var(--text-muted); }

.weak-keys-container { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.key-badge { background: rgba(255, 105, 180, 0.1); padding: 0.5rem 1rem; border-radius: 12px; font-family: var(--font-mono); font-size: 1.4rem; font-weight: bold; color: var(--primary); border: 2px dashed var(--primary); }

/* Lessons List */
.main-lesson-card { background: var(--card-bg); border-radius: 20px; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); overflow: hidden; }
.main-lesson-header { padding: 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: rgba(255,105,180,0.05); transition: 0.3s; }
.main-lesson-header:hover { background: rgba(255,105,180,0.1); }
.main-lesson-title { font-weight: 600; font-size: 1.2rem; color: var(--text-active); }
.main-lesson-progress { font-size: 0.9rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; }
.sub-lessons-container { display: none; padding: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; border-top: 1px dashed rgba(0,0,0,0.05); }
.typing-text.lesson-ten-lines { height:auto; overflow:visible; display:block; }
.vk-container { max-width:100%; overflow-x:auto; }
@media(max-width:760px){.stats-bar{flex-wrap:wrap;gap:1rem}.typing-text{font-size:1.4rem}.word{max-width:100%;flex-wrap:wrap}}
.lesson-typing-line { display:flex; flex-wrap:wrap; min-height:46px; padding:4px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.sub-lessons-container.open { display: flex; flex-direction: column; animation: fadeIn 0.3s; }
.lesson-level { display:block; font-size:0.85rem; color:var(--text-muted); margin-bottom:6px; }
@media(max-width:650px){.main-lesson-header{flex-wrap:wrap;gap:12px}.main-lesson-title{font-size:1rem}.sub-lessons-container{padding:16px}.tips-grid>.card{grid-column:1 / -1!important}}

.sub-lesson-card { background: var(--bg-color); padding: 1.2rem; border-radius: 16px; border: 1px solid rgba(0,0,0,0.05); cursor: pointer; transition: 0.2s; position: relative; }
.sub-lesson-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255,154,162,0.2); border-color: var(--primary); }
.sub-lesson-card.locked { opacity: 0.6; filter: grayscale(1); cursor: not-allowed; }
.sub-lesson-card.locked:hover { transform: none; box-shadow: none; border-color: rgba(0,0,0,0.05); }
.sub-lesson-title { font-weight: 600; margin-bottom: 0.5rem; font-size: 1.05rem; color: var(--text-active); display: flex; justify-content: space-between; align-items: flex-start; }
.lesson-stars { color: var(--text-muted); font-size: 1.1rem; letter-spacing: 1px; }
.lesson-stars.earned { color: var(--gold); }
.lesson-stats { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }

/* Practice Area */
.stats-bar { display: flex; gap: 2rem; font-size: 1.5rem; color: var(--primary); font-family: var(--font-mono); margin-bottom: 1rem; }
.stat-box { display: flex; flex-direction: column; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-weight: 500; }

.typing-container { position: relative; width: 100%; min-height: 150px; cursor: text; margin-top: 2rem; }
#hidden-input { position: absolute; opacity: 0; pointer-events: none; top: 0; left: 0; }
.typing-text { font-family: var(--font-mono); font-size: 1.8rem; line-height: 1.6; word-break: break-all; user-select: none; color: var(--text-muted); display: flex; flex-wrap: wrap; align-content: flex-start; position: relative; height: 140px; overflow: hidden; }
.word { margin-right: 0.6em; display: inline-flex; }
.letter { position: relative; border-bottom: 2px solid transparent; }
.letter.correct { color: var(--text-active); }
.letter.incorrect { color: var(--text-error); }
.letter.incorrect.extra { color: var(--text-error-extra); }

.caret { position: absolute; width: 4px; height: 1.2em; background-color: #c2185b; box-shadow:0 0 0 1px white,0 0 6px rgba(194,24,91,.5); pointer-events:none; z-index: 10; }
.caret.hidden { display: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.focus-overlay { position: absolute; inset: 0; background: rgba(var(--bg-color-rgb), 0.8); display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: var(--text-active); z-index: 20; backdrop-filter: blur(2px); transition: opacity 0.2s; border-radius: 8px; }
.focus-overlay.hidden { opacity: 0; pointer-events: none; }
.actions { display: flex; justify-content: center; margin-top: 2rem; }

/* Game Area */
.game-container { position: relative; width: 100%; height: 600px; background: var(--card-bg); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; }
.game-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 50; }
.game-word { position: absolute; font-family: var(--font-mono); font-size: 1.5rem; color: var(--text-muted); background: rgba(0,0,0,0.5); padding: 0.2rem 0.5rem; border-radius: 6px; white-space: nowrap; transition: color 0.1s; }
.game-word.active { color: var(--text-active); background: rgba(255,255,255,0.1); border: 1px solid var(--primary); }
.game-word span.typed { color: var(--primary); }
.game-word.error { color: var(--text-error); animation: shake 0.2s; }
.game-explosion { position:absolute; pointer-events:none; z-index:5; }
.game-explosion span { position:absolute; width:8px; height:8px; border-radius:50%; background:#facc15; animation:word-burst .5s ease-out forwards; }
.game-explosion span:nth-child(3n) { background:#38bdf8; }
.game-explosion span:nth-child(3n + 1) { background:#f472b6; }
@keyframes word-burst { from { transform:translate(-50%,-50%) scale(1); opacity:1; } to { transform:translate(var(--burst-x),var(--burst-y)) scale(.2); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .game-explosion span { animation:none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 1; transition: opacity 0.3s ease; }
.modal.hidden { opacity: 0; pointer-events: none; }
.modal-content { background: var(--bg-color); padding: 3rem; border-radius: 12px; text-align: center; max-width: 600px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); }
.modal-content h2 { color: var(--text-active); margin-bottom: 1rem; font-size: 2rem; }
.final-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 1rem; }
.f-stat { display: flex; flex-direction: column; }
.f-val { font-size: 3rem; font-family: var(--font-mono); color: var(--text-active); line-height: 1; margin-bottom: 0.5rem; }
.f-lbl { color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

/* Virtual Keyboard */
.vk-container { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; opacity: 1; transition: 0.3s; }
.vk-container.hidden { display: none; }
.keyboard-row { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; justify-content: center; }
.key { width: 3.5rem; height: 3.5rem; border-radius: 8px; background: var(--card-bg); border: 2px solid rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.1s; position: relative; }
.key .top-char { position: absolute; top: 4px; left: 6px; font-size: 0.8rem; opacity: 0.7; }
.key .main-char { font-size: 1.1rem; font-weight: 500; color: var(--text-main); }
.key.space { width: 18rem; }
.key.shift { width: 6rem; font-size: 0.8rem; }
.key.backspace { width: 5rem; font-size: 0.8rem; }
.key.enter { width: 5.5rem; font-size: 0.8rem; }
.key.caps { width: 4.5rem; font-size: 0.8rem; }
.key.tab { width: 4rem; font-size: 0.8rem; }
.key.highlight { background: var(--primary); color: white; border-color: var(--primary); transform: scale(1.05); box-shadow: 0 5px 15px rgba(255,105,180,0.4); z-index: 10; }
.key.highlight .main-char, .key.highlight .top-char { color: white; }
.key.p-l,.key.r-l,.key.m-l,.key.i-l,.key.i-r,.key.m-r,.key.r-r,.key.p-r,.key.t-b { color:white; }
.key .main-char { color:inherit; }
.key.home-key { border-color:rgba(0,0,0,.5); box-shadow:0 3px 5px rgba(0,0,0,.18); }
.key.highlight { outline:3px solid var(--text-main); outline-offset:2px; }

/* Hands */
.hands-container { display: flex; gap: 5rem; margin-top: 1rem; justify-content: center; }
.hand { position: relative; width: 120px; height: 120px; }
.hand svg { width: 100%; height: 100%; fill: var(--text-muted); opacity: 0.2; transition: 0.2s; }
.hand .finger-dot { position: absolute; width: 15px; height: 15px; background: var(--primary); border-radius: 50%; opacity: 0; transition: 0.2s; box-shadow: 0 0 10px var(--primary); }
.hand.left .pinky { top: 15px; left: 15px; }
.hand.left .ring { top: 0px; left: 35px; }
.hand.left .middle { top: -5px; left: 60px; }
.hand.left .index { top: 15px; left: 85px; }
.hand.left .thumb { top: 60px; left: 110px; }

.hand.right .index { top: 15px; right: 85px; }
.hand.right .middle { top: -5px; right: 60px; }
.hand.right .ring { top: 0px; right: 35px; }
.hand.right .pinky { top: 15px; right: 15px; }
.hand.right .thumb { top: 60px; right: 110px; }

.finger-dot.active { opacity: 1; transform: scale(1.5); }
.hands-real{position:relative;display:block;width:320px;max-width:100%;aspect-ratio:3/2;margin:12px auto 0;gap:0}.hands-real img{display:block;width:100%;height:100%;object-fit:contain}.hands-real .hand{position:absolute;top:0;width:50%;height:100%}.hands-real .hand.left{left:0}.hands-real .hand.right{right:0}.hands-real .hand .finger-dot{width:10px;height:10px;border:2px solid white;box-shadow:0 0 0 3px var(--primary);transform:translate(-50%,-50%)}.hands-real .hand.left .pinky{left:17%;top:28%}.hands-real .hand.left .ring{left:34%;top:14%}.hands-real .hand.left .middle{left:51%;top:10%}.hands-real .hand.left .index{left:72%;top:14%}.hands-real .hand.left .thumb{left:91%;top:45%}.hands-real .hand.right .pinky{left:82%;right:auto;top:28%}.hands-real .hand.right .ring{left:62%;right:auto;top:14%}.hands-real .hand.right .middle{left:48%;right:auto;top:10%}.hands-real .hand.right .index{left:30%;right:auto;top:14%}.hands-real .hand.right .thumb{left:8%;right:auto;top:45%}

/* Home Row Guide */
.hr-keyboard { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; background: rgba(0,0,0,0.02); padding: 1rem; border-radius: 12px; }
.hr-row { display: flex; gap: 0.3rem; }
.hr-key { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; border-radius: 6px; font-weight: 600; font-family: var(--font-body); color: white; opacity: 0.8; border: 2px solid transparent; }
.hr-key.active-hr { border: 2px solid #333; opacity: 1; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transform: scale(1.05); }
.hr-key.spacebar { width: 15rem; background: var(--purple) !important; opacity: 0.8; }
.p-l { background-color: #ef4444; } /* Red */
.r-l { background-color: #f97316; } /* Orange */
.m-l { background-color: #eab308; } /* Yellow */
.i-l { background-color: #22c55e; } /* Green */
.t-b { background-color: #a855f7; } /* Purple */
.i-r { background-color: #3b82f6; } /* Blue */
.m-r { background-color: #6366f1; } /* Indigo */
.r-r { background-color: #d946ef; } /* Fuchsia */
.p-r { background-color: #ec4899; } /* Pink */

.legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-main); font-weight: 500; }
.color-box { width: 1.2rem; height: 1.2rem; border-radius: 4px; display: inline-block; }

.dashboard-shortcuts { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.25rem; }
.dashboard-shortcuts a, .sidebar-bottom a { text-decoration:none; text-align:center; }
.hr-key.spacebar { background:#a855f7 !important; }
.home-row-guide { overflow-x:auto; }
@media (max-width: 760px) {
    body { height:auto; min-height:100vh; overflow:auto; flex-direction:column; }
    .sidebar { width:100%; padding:1rem; }
    .nav-links { display:flex; flex-wrap:wrap; gap:0.25rem; }
    .sidebar-bottom { display:flex; gap:0.75rem; margin-top:1rem; }
    .content { padding:1rem; overflow:visible; width:100%; }
    header { flex-wrap:wrap; gap:0.75rem; }
    .dashboard-grid { display:flex; flex-direction:column; }
    .profile-card { flex-wrap:wrap; }
    .tips-grid { grid-template-columns:1fr; }
    .hr-keyboard { min-width:620px; }
    .modal-content { max-width:calc(100vw - 2rem); }
}

/* Tips List */
.tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.tips-list { margin-left: 1.5rem; color: var(--text-main); line-height: 1.6; }
.tips-list li { margin-bottom: 0.5rem; }
.hand-guide { background: rgba(0,0,0,0.02); padding: 1rem; border-radius: 12px; min-width: 150px; }
.hand-guide h4 { color: var(--text-active); margin-bottom: 0.5rem; text-align: center; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 0.5rem; }
.hand-guide ul { list-style: none; padding: 0; margin: 0; }
.hand-guide li { margin-bottom: 0.3rem; font-size: 0.9rem; }
.typing-error-status{color:#bf214d;font-size:14px;min-height:22px}.actions{flex-wrap:wrap;gap:10px}.vk-container{max-width:920px;margin:18px auto}.key{width:3rem;height:3rem;font-size:13px;border-radius:6px}.key.space{max-width:280px}.keyboard-row{gap:5px;margin-bottom:6px}.letter.incorrect{color:#d82f58!important;text-decoration:underline;text-decoration-color:#d82f58}
.vk-container{overflow:visible;width:100%}.keyboard-row{width:min(800px,100%);max-width:100%;gap:5px}.keyboard-row .key{flex:1 1 0;width:auto;min-width:0}.keyboard-row .key.shift{flex-grow:2}.keyboard-row .key.backspace,.keyboard-row .key.enter{flex-grow:1.7}.keyboard-row .key.tab,.keyboard-row .key.caps{flex-grow:1.5}.keyboard-row:has(.space){width:min(280px,70%)}.key.space .main-char{font-size:13px}@media(max-width:760px){.keyboard-row{gap:3px}.keyboard-row .key{height:36px;border-radius:4px;font-size:8px}.key .main-char{font-size:15px}.key .top-char{font-size:9px;top:1px;left:2px}.key.shift,.key.backspace,.key.enter,.key.tab,.key.caps{font-size:8px}.hands-real{width:290px}}
.keyboard-row .key.shift,.keyboard-row .key.backspace,.keyboard-row .key.enter,.keyboard-row .key.tab,.keyboard-row .key.caps{font-size:18px}@media(max-width:760px){.key .main-char{margin-top:7px;line-height:1.1}}