:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}body{margin:0}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-thai-400-normal-C2DaJlKK.woff2)format("woff2"),url(/assets/sarabun-thai-400-normal-CH-UbWgg.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-vietnamese-400-normal-igdrzAGY.woff2)format("woff2"),url(/assets/sarabun-vietnamese-400-normal-DPfkSCMy.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-latin-ext-400-normal-BbP7GpLL.woff2)format("woff2"),url(/assets/sarabun-latin-ext-400-normal-BsmTn0SS.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/sarabun-latin-400-normal-URPBxl-K.woff2)format("woff2"),url(/assets/sarabun-latin-400-normal-DmguIS-7.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/sarabun-thai-500-normal-BVssjame.woff2)format("woff2"),url(/assets/sarabun-thai-500-normal-C3iDLEzi.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/sarabun-vietnamese-500-normal-Dpe7Br9m.woff2)format("woff2"),url(/assets/sarabun-vietnamese-500-normal-CpRVvGRU.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/sarabun-latin-ext-500-normal-DE1LysqI.woff2)format("woff2"),url(/assets/sarabun-latin-ext-500-normal-Cot16Bd2.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/sarabun-latin-500-normal-BjUTcdxu.woff2)format("woff2"),url(/assets/sarabun-latin-500-normal-CJexTAnl.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-thai-600-normal-3dIAQ-_s.woff2)format("woff2"),url(/assets/sarabun-thai-600-normal-DWKeTe6a.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-vietnamese-600-normal-DkxrOlLB.woff2)format("woff2"),url(/assets/sarabun-vietnamese-600-normal-BMbOgAW-.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-latin-ext-600-normal-BRxjKUQ6.woff2)format("woff2"),url(/assets/sarabun-latin-ext-600-normal-0tXu9x_i.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/sarabun-latin-600-normal-DMD3TROr.woff2)format("woff2"),url(/assets/sarabun-latin-600-normal-9FonlkKx.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/sarabun-thai-700-normal-CbuDipM3.woff2)format("woff2"),url(/assets/sarabun-thai-700-normal-CP2-p8e-.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/sarabun-vietnamese-700-normal-DrMy3BMX.woff2)format("woff2"),url(/assets/sarabun-vietnamese-700-normal-lN6N8XBT.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/sarabun-latin-ext-700-normal-CnQtP196.woff2)format("woff2"),url(/assets/sarabun-latin-ext-700-normal-ykw7DJpk.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Sarabun;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/sarabun-latin-700-normal-DQKyWxHq.woff2)format("woff2"),url(/assets/sarabun-latin-700-normal-DUuqj4Ju.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}body{margin:0;font-family:Sarabun,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}button,input,select{font-family:inherit}button{cursor:pointer;border:0}.app-page{background-position:50%;background-size:cover;width:100%;height:100dvh;min-height:100dvh;padding:22px 14px;overflow:hidden}.app-shell{width:min(1280px,100%);height:100%;min-height:0;margin:0 auto}.panel{background:#fffffff5;border:1px solid #dbe4ee;border-radius:16px;box-shadow:0 5px 20px #0f172a17}.preview-switch-btn{z-index:1000;color:#0284c7;cursor:pointer;background:#fffffff2;border:1.5px solid #0284c7;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .18s,background .18s,color .18s,box-shadow .18s;display:flex;position:fixed;top:18px;right:22px;box-shadow:0 4px 14px #0284c740}.preview-switch-btn:hover{color:#fff;background:#0284c7;transform:scale(1.08);box-shadow:0 6px 18px #0284c759}.top-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex}.view-buttons,.monitor-buttons,.input-row,.vowel-list,.background-colors{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.view-buttons strong{color:#1e293b;font-size:15px}.soft-btn,.selected-btn,.blue-btn,.green-btn,.danger-btn{border-radius:8px;padding:8px 12px;font-size:13px;font-weight:700}.soft-btn{color:#475569;background:#f1f5f9}.selected-btn,.blue-btn{color:#fff;background:#0284c7}.green-btn{color:#fff;background:#16a34a}.danger-btn{color:#fff;background:#ef4444}.blue-btn:disabled{opacity:.6;cursor:wait}.main-grid{grid-template-columns:1fr;align-items:stretch;gap:20px;height:calc(100dvh - 44px);min-height:0;display:grid}.main-grid.split-layout{grid-template-columns:minmax(0,1fr) 410px}.main-grid>section{min-width:0;min-height:0;overflow:hidden auto}.staff-board-section,.main-grid>section:first-of-type,.display-board,.tone-board{scrollbar-width:none;-ms-overflow-style:none}.staff-board-section::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.main-grid>section:first-of-type::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.display-board::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.tone-board::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}.board-panel{min-width:0;padding:30px 22px}.presentation-panel{padding:45px 50px}.tone-board{width:100%}.board-footer-actions{flex-direction:column;align-items:flex-end;gap:8px;margin-top:14px;padding-right:6px;display:flex}.auto-play-tones-btn{color:#15803d;cursor:pointer;background:#f0fdf4;border:1.5px solid #22c55e;border-radius:999px;align-items:center;gap:7px;padding:7px 15px;font-size:13px;font-weight:700;transition:all .18s;display:inline-flex;box-shadow:0 2px 8px #22c55e2e}.auto-play-tones-btn:disabled{opacity:.5;cursor:not-allowed}.auto-play-tones-btn:hover:not(:disabled){color:#fff;background:#16a34a;border-color:#16a34a;transform:scale(1.04);box-shadow:0 4px 12px #16a34a47}.auto-play-tones-btn.playing{color:#fff;background:#15803d;border-color:#15803d;animation:1.4s infinite tonePulse}@keyframes tonePulse{0%{box-shadow:0 0 #22c55e99}70%{box-shadow:0 0 0 10px #22c55e00}to{box-shadow:0 0 #22c55e00}}.board-title{text-align:center;margin-bottom:18px;color:#4a148c!important}.board-title h2{margin:0;font-size:clamp(23px,2.3vw,30px);color:#4a148c!important}.board-title div{font-size:clamp(16px,1.5vw,19px);font-weight:600;color:#4a148c!important}.analysis-box{text-align:center;color:#0369a1;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;max-width:900px;margin:0 auto 22px;padding:10px 14px;font-size:14px;font-weight:600}.analysis-box strong{color:#0284c7}.analysis-item+.analysis-item{margin-top:6px}.analysis-tag{color:#075985;background:#e0f2fe;border-radius:5px;padding:2px 7px}.tone-row{width:100%;text-align:inherit;background:0 0;border-radius:12px;grid-template-columns:215px minmax(180px,1fr) 32px 100px;align-items:center;padding:7px 0;transition:transform .18s,background .18s,box-shadow .18s;display:grid;overflow:visible}.tone-line-number{text-align:center;-webkit-user-select:none;user-select:none;font-size:16px;font-weight:800;line-height:1;transition:transform .18s,color .18s}.tone-row.active .tone-line-number{transform:scale(1.18)}.tone-rows{flex-direction:column;gap:24px;min-height:min-content;padding-top:14px;display:flex;overflow:visible}.tone-row:not(.disabled-tone-row):not(.practice-locked):hover{background:#e0f2fe73}.tone-row.active{background:#e0f2fec7;transform:scale(1.025);box-shadow:0 4px 14px #0284c721}.disabled-tone-row{cursor:default;opacity:.72}.tone-row.practice-locked{cursor:default!important}.tone-name{text-align:right;white-space:nowrap;padding-right:20px;font-weight:700;transition:transform .18s}.clickable-tone-text{cursor:pointer;-webkit-user-select:none;user-select:none}.clickable-tone-text:hover{transform:scale(1.05)}.tone-name span{margin-left:4px;font-size:.92em}.tone-line-wrap{align-items:center;height:34px;transition:none;display:flex;position:relative;overflow:visible;transform:none}.tone-line{background:#94a3b8;width:100%;height:2px;transition:height .18s,background .18s}.tone-row.active .tone-line{background:#475569;height:4px}.tone-circle{aspect-ratio:1;white-space:nowrap;isolation:isolate;box-sizing:border-box;border-radius:50%;justify-content:center;align-items:center;font-weight:700;transition:transform .25s cubic-bezier(.175,.885,.32,1.275),background-color .25s,box-shadow .25s,filter .18s;display:flex;position:absolute;overflow:visible;transform:translate(-50%,-50%);box-shadow:0 4px 11px #0000003d}.tone-line-wrap>.tone-circle{top:50%}.tone-row.active .tone-circle{filter:brightness(1.12);transform:translate(-50%,-50%)scale(1.23);box-shadow:0 8px 20px #00000057}.multi-circles{align-items:center;gap:8px;transition:transform .18s;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.tone-row.active .multi-circles{transform:translate(-50%,-50%)scale(1.16)}.tone-row.active .multi-circles .tone-circle{transform:none}.slash{color:#64748b;font-size:21px;font-weight:700}.fixed-tone-label{text-align:center;font-size:16px;font-weight:700}.right-panel-wrapper{height:100%;min-height:0}.control-panel{flex-direction:column;gap:16px;min-height:0;padding:18px;display:flex}.control-panel h3{color:#1e293b;margin:0;font-size:19px}.control-group{color:#1e293b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;flex-direction:column;gap:9px;padding:13px;font-size:13px;display:flex}.radio-label,.toggle-label{color:#334155;cursor:pointer;align-items:center;gap:7px;display:flex}.input-row{flex-wrap:nowrap}.input-row input{background:#fff;border:1px solid #cbd5e1;border-radius:8px;flex:1;width:100%;min-width:0;padding:8px 10px;font-size:14px}.input-row .input-error{border:2px solid #ef4444}.error-text{color:#dc2626;font-size:12px;font-weight:700}.success-text{color:#059669;font-size:12px;font-weight:700}.section-label{color:#64748b;margin-bottom:6px;font-size:12px;font-weight:700}.green-label{color:#166534}.red-label{color:#991b1b;margin-top:10px}.consonant-grid{grid-template-columns:repeat(11,minmax(0,1fr));gap:5px;display:grid}.consonant-btn{background:#fff;border:1px solid #cbd5e1;border-radius:6px;height:34px;font-size:15px;font-weight:700}.low-class-groups{flex-direction:column;gap:10px;margin-top:12px;display:flex}.low-class-group{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:8px}.low-pair-label{color:#7c3aed}.low-single-label{color:#2563eb}.low-consonant-grid{grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;display:grid}.low-pair-btn{background:#faf5ff;border-color:#ddd6fe;color:#7c3aed!important}.low-single-btn{background:#eff6ff;border-color:#bfdbfe;color:#2563eb!important}.cluster-groups{flex-direction:column;gap:10px;margin-top:12px;display:flex}.cluster-label{margin-bottom:5px}.cluster-grid{grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;display:grid}.cluster-btn{background:#fff;border:1px solid #cbd5e1;border-radius:7px;min-height:34px;padding:6px 7px;font-size:14px;font-weight:700}.true-cluster{color:#0369a1;background:#f0f9ff;border-color:#bae6fd}.leading-ho-cluster{color:#7c3aed;background:#f5f3ff;border-color:#ddd6fe}.false-cluster{color:#c2410c;background:#fff7ed;border-color:#fed7aa}.vowel-list{gap:5px}.vowel-btn{border-radius:6px;padding:7px 9px;font-size:14px;font-weight:700}.long-vowel{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.short-vowel{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.select-label{color:#475569;flex-direction:column;gap:5px;font-size:12px;font-weight:700;display:flex}.select-label select,.select-label input[type=range]{width:100%}.select-label select{background:#fff;border:1px solid #cbd5e1;border-radius:7px;padding:7px}.color-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.color-picker{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;min-height:35px;padding:7px;font-size:12px;font-weight:700;display:flex}.color-picker input{opacity:0;width:0;height:0;position:absolute}.background-colors button{border:1px solid #cbd5e1;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:700}.background-colors .background-selected{outline:2px solid #0284c7}.upload-btn{color:#fff;cursor:pointer;background:#0284c7;border-radius:7px;width:fit-content;padding:7px 9px;font-size:12px;font-weight:700;display:inline-flex}.upload-btn input{display:none}.sound-manager-box{border-top:1px dashed #cbd5e1;flex-direction:column;gap:8px;margin-top:8px;padding-top:10px;display:flex}.sound-manager-box>input[type=text]{background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;font-size:13px}.sound-word-list{flex-direction:column;gap:6px;max-height:220px;display:flex;overflow-y:auto}.sound-word-row{background:#fff;border:1px solid #e2e8f0;border-radius:7px;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;display:flex}.sound-word-text{color:#1e293b;overflow-wrap:anywhere;font-size:14px;font-weight:700}.sound-word-actions{flex-shrink:0;gap:5px;display:flex}.sound-word-actions button,.sound-word-actions .sound-edit-btn{min-width:30px;padding:5px 7px;font-size:13px}.sound-edit-btn{cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.sound-edit-btn input{display:none}.api-section{border-top:1px solid #e2e8f0;padding-top:12px}.api-toggle{color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;width:100%;padding:9px;font-weight:700}.api-input-box{color:#475569;background:#f8fafc;border:1px dashed #94a3b8;border-radius:8px;margin-top:8px;padding:10px;font-size:12px}.api-input-box strong{margin-bottom:7px;display:block}.display-page{box-sizing:border-box;background-position:50%;background-size:cover;justify-content:center;align-items:center;width:100%;height:100dvh;min-height:100dvh;padding:clamp(10px,2vh,24px) clamp(10px,2vw,24px);display:flex;overflow:hidden}.display-board{scrollbar-width:none;-ms-overflow-style:none;background:#fffffff5;border:1px solid #cbd5e1;border-radius:clamp(16px,2vw,28px);flex-direction:column;width:min(1200px,96vw);max-width:1200px;height:min(94dvh,100dvh - 24px);min-height:0;max-height:calc(100dvh - 24px);padding:clamp(12px,3vh,44px);display:flex;overflow:hidden auto;box-shadow:0 16px 42px #0000002e}.display-board .tone-rows{flex-direction:column;flex:1;justify-content:space-evenly;gap:0;min-height:0;margin-top:2vh;padding-top:24px;display:flex;overflow:visible}.display-tip{color:#fff;white-space:nowrap;background:#0f172ab8;border-radius:999px;padding:7px 13px;font-size:12px;position:fixed;bottom:13px;left:50%;transform:translate(-50%)}@media (width<=980px){.app-page{overflow:hidden}.main-grid{height:calc(100dvh - 44px)}.main-grid.split-layout{grid-template-columns:1fr}.control-panel{min-height:0;position:static}}@media (width<=640px){.app-page{padding:10px}.top-bar{padding:12px}.board-panel,.presentation-panel{padding:22px 10px}.tone-row{grid-template-columns:112px minmax(115px,1fr) 22px 52px}.tone-line-number{font-size:13px}.tone-name{white-space:normal;padding-right:8px;font-size:13px!important}.fixed-tone-label{font-size:12px}.tone-rows{gap:20px}.tone-circle{width:39px!important;min-width:39px!important;max-width:39px!important;height:39px!important;padding:0!important;font-size:15px!important}.multi-circles{gap:4px}.slash{font-size:16px}.consonant-grid{gap:3px}.consonant-btn{height:31px;font-size:13px}.low-consonant-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}.cluster-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}.cluster-btn{min-height:31px;padding:5px 4px;font-size:13px}.display-board{width:96vw;height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:14px 8px}.display-board .analysis-box{margin-bottom:12px;font-size:11px}.display-board .tone-row{grid-template-columns:104px minmax(100px,1fr) 22px 48px}.display-tip{white-space:normal;text-align:center;max-width:92vw;font-size:10px}}.tone-circle:before{content:"";background-color:var(--note-color,transparent);z-index:-1;width:4px;height:42px;position:absolute;bottom:50%;right:0}.tone-circle:after{content:"";border-right:4px solid var(--note-color,transparent);border-top:6px solid var(--note-color,transparent);z-index:-1;border-top-right-radius:20px 22px;border-bottom-right-radius:4px;width:12px;height:20px;position:absolute;bottom:calc(50% + 18px);right:-12px}.tone-circle.target-test-active{--note-color:#ff6b35!important;z-index:100!important;background-color:#ff6b35!important;border:2.5px solid #fff!important;transform:translate(-50%,-50%)scale(1.48)!important;box-shadow:0 0 22px #ff6b35f2!important}.multi-circles .tone-circle.target-test-active{transform:scale(1.48)!important}.tone-circle.target-test-mismatch{animation:.38s mismatchBounce!important}@keyframes mismatchBounce{0%{transform:translate(-50%,-50%)scale(1)}50%{filter:brightness(1.25);transform:translate(-50%,-50%)scale(1.25)}to{transform:translate(-50%,-50%)scale(1)}}.multi-circles .tone-circle.target-test-mismatch{animation:.4s mismatchBounceMulti!important}@keyframes mismatchBounceMulti{0%{transform:scale(1)}50%{filter:brightness(1.25);transform:scale(1.25)}to{transform:scale(1)}}.practice-toggle-btn{color:#fff;cursor:pointer;background:#0284c7;border:1.5px solid #0284c7;border-radius:999px;align-items:center;gap:7px;padding:7px 15px;font-size:13px;font-weight:700;transition:all .18s;display:inline-flex;box-shadow:0 2px 8px #0284c740}.practice-toggle-btn:hover{background:#0369a1;border-color:#0369a1;transform:scale(1.04);box-shadow:0 4px 12px #0284c759}.practice-toggle-btn.cancel{background:#ef4444!important;border-color:#ef4444!important;box-shadow:0 2px 8px #ef444440!important}.practice-toggle-btn.cancel:hover{background:#dc2626!important;border-color:#dc2626!important}.practice-skip-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:1.5px solid #cbd5e1;border-radius:999px;align-items:center;gap:4px;padding:7px 14px;font-size:13px;font-weight:700;transition:all .18s;display:inline-flex;box-shadow:0 2px 6px #00000014}.practice-skip-btn:hover{color:#1e293b;background:#e2e8f0;transform:scale(1.04)}.practice-status-banner{background:#fff7ed;border:1.5px solid #fdba74;border-radius:8px;align-items:center;gap:12px;padding:6px 14px;font-size:13px;font-weight:700;animation:.25s fadeInBanner;display:flex}.practice-summary-banner{color:#065f46;background:#ecfdf5;border:1.5px solid #6ee7b7;border-radius:8px;align-items:center;gap:12px;padding:8px 16px;font-size:14px;font-weight:700;animation:.25s fadeInBanner;display:flex}.practice-summary-close-btn{color:#059669;cursor:pointer;background:0 0;border:none;border-radius:4px;margin-left:auto;padding:2px 6px;font-size:16px;font-weight:700;transition:background .15s}.practice-summary-close-btn:hover{background:#05966926}@keyframes fadeInBanner{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.practice-msg-text{color:#c2410c}.practice-timer-text{color:#dc2626}.practice-score-text{color:#16a34a}.quiz-toggle-btn{color:#fff;cursor:pointer;background:#f97316;border:1.5px solid #ea580c;border-radius:999px;align-items:center;gap:7px;padding:7px 15px;font-size:13px;font-weight:700;transition:all .18s;display:inline-flex;box-shadow:0 2px 8px #f9731647}.quiz-toggle-btn:hover{background:#ea580c;border-color:#ea580c;transform:scale(1.04);box-shadow:0 4px 12px #f9731661}.quiz-toggle-btn.cancel{background:#ef4444!important;border-color:#ef4444!important;box-shadow:0 2px 8px #ef444440!important}.quiz-toggle-btn.cancel:hover{background:#dc2626!important;border-color:#dc2626!important}.quiz-drag-station{background:#fff7ed;border:1.5px dashed #fdba74;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:85px;margin-top:18px;padding:14px;display:flex;position:relative}.quiz-instruction-text{color:#c2410c;font-size:13px;font-weight:700}.quiz-draggable-node{position:relative!important;top:auto!important;left:auto!important;box-shadow:0 6px 16px #f9731661!important}.shake-error{animation:.38s cubic-bezier(.36,.07,.19,.97) both shakeNode}@keyframes shakeNode{10%,90%{transform:translate(-3px)}20%,80%{transform:translate(5px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.quiz-next-btn{animation:1.5s infinite pulseNext;box-shadow:0 2px 8px #16a34a47;border-radius:999px!important;padding:7px 16px!important}@keyframes pulseNext{0%{box-shadow:0 0 #16a34a80}70%{box-shadow:0 0 0 8px #16a34a00}to{box-shadow:0 0 #16a34a00}}.quiz-revealing-node{animation:.8s cubic-bezier(.175,.885,.32,1.275) forwards quizRevealPulse!important}@keyframes quizRevealPulse{0%{transform:translate(-50%,-50%)scale(.9);--note-color:#f97316!important;background-color:#f97316!important}50%{transform:translate(-50%,-50%)scale(1.45);box-shadow:0 0 25px #f97316d9;--note-color:#f97316!important;background-color:#f97316!important}to{transform:translate(-50%,-50%)scale(1)}}.quiz-snap-node{animation:.35s cubic-bezier(.175,.885,.32,1.275) forwards quizSnapPop}@keyframes quizSnapPop{0%{transform:translate(-50%,-50%)scale(.85)}50%{transform:translate(-50%,-50%)scale(1.2)}to{transform:translate(-50%,-50%)scale(1)}}