.cheetah-shell{--radius:1rem;--background:#f6f8ff;--foreground:#152341;--card:#fff;--card-foreground:#152341;--popover:#fff;--popover-foreground:#152341;--primary:#693ad4;--primary-foreground:#fcfcfc;--secondary:#007084;--secondary-foreground:#fcfcfc;--muted:#e9eefc;--muted-foreground:#4e5b72;--accent:#f9d544;--accent-foreground:#152341;--destructive:#e40014;--destructive-foreground:#fcfcfc;--border:#d9deec;--input:#d0d7ec;--ring:#693ad4;--pink:#f45693;--sky:#c4f0ff;--lilac:#ece7ff;--chart-1:#693ad4;--chart-2:#007084;--chart-3:#f9d544;--chart-4:#f45693;--chart-5:#4cb86a;--sidebar:#fff;--sidebar-foreground:#152341;--sidebar-primary:#693ad4;--sidebar-primary-foreground:#fcfcfc;--sidebar-accent:#e9eefc;--sidebar-accent-foreground:#152341;--sidebar-border:#d9deec;--sidebar-ring:#693ad4;color:var(--foreground);background:var(--background);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:IBM Plex Sans Thai,sans-serif}@supports (color:lab(0% 0 0)){.cheetah-shell{--background:lab(97.6253% .0680089 -3.78776);--foreground:lab(13.6438% 2.9691 -21.4016);--card:lab(100% 0 0);--card-foreground:lab(13.6438% 2.9691 -21.4016);--popover:lab(100% 0 0);--popover-foreground:lab(13.6438% 2.9691 -21.4016);--primary:lab(38.0481% 48.3107 -73.3898);--primary-foreground:lab(98.84% .0000298023 -.0000119209);--secondary:lab(42.6107% -24.8611 -21.0088);--secondary-foreground:lab(98.84% .0000298023 -.0000119209);--muted:lab(94.0868% .199407 -7.54006);--muted-foreground:lab(38.3399% -1.14164 -14.5343);--accent:lab(86.6497% 2.03314 72.0242);--accent-foreground:lab(13.6438% 2.9691 -21.4016);--destructive:lab(48.4493% 77.4328 61.5452);--destructive-foreground:lab(98.84% .0000298023 -.0000119209);--border:lab(88.2864% .206292 -7.53636);--input:lab(85.9033% .414461 -11.2506);--ring:lab(38.0481% 48.3107 -73.3898);--pink:lab(60.363% 64.9403 .91753);--sky:lab(92.172% -12.4446 -12.1347);--lilac:lab(92.6109% 6.17501 -13.5331);--chart-1:lab(38.0481% 48.3107 -73.3898);--chart-2:lab(42.6107% -24.8611 -21.0088);--chart-3:lab(86.6497% 2.03314 72.0242);--chart-4:lab(60.363% 64.9403 .91753);--chart-5:lab(67.0945% -45.2256 29.7459);--sidebar:lab(100% 0 0);--sidebar-foreground:lab(13.6438% 2.9691 -21.4016);--sidebar-primary:lab(38.0481% 48.3107 -73.3898);--sidebar-primary-foreground:lab(98.84% .0000298023 -.0000119209);--sidebar-accent:lab(94.0868% .199407 -7.54006);--sidebar-accent-foreground:lab(13.6438% 2.9691 -21.4016);--sidebar-border:lab(88.2864% .206292 -7.53636);--sidebar-ring:lab(38.0481% 48.3107 -73.3898)}}.cheetah-shell .cheetah-room{color:#302344;background:linear-gradient(140deg,#f4e9ff,#e4f7ff 45%,#fff2d7);max-width:1440px;margin:auto;padding:24px;font-size:18px;line-height:1.8}.cheetah-shell .cheetah-room h1{font-size:clamp(30px,5vw,54px);font-weight:800}.cheetah-shell .cheetah-room h2{margin:10px 0;font-size:clamp(22px,3vw,30px);font-weight:800}.cheetah-shell .cheetah-room h3{margin:12px 0;font-size:23px;font-weight:700}.cheetah-shell .room-banner{color:#fff;background:linear-gradient(110deg,#6335bd,#c22a87);border-radius:26px;padding:34px;position:relative;overflow:hidden}.cheetah-shell .room-banner:after{content:"♪ ♫ ★";opacity:.12;pointer-events:none;font-size:95px;position:absolute;bottom:-30px;right:25px}.cheetah-shell .room-banner>button{float:right;color:#6335bd!important;background:#fff!important}.cheetah-shell .room-banner>span{letter-spacing:2px;font-size:13px;font-weight:800}.cheetah-shell .room-top{grid-template-columns:1fr 1.3fr;gap:22px;display:grid}.cheetah-shell .room-card{background:#fff;border:2px solid #ece1ff;border-radius:26px;margin:24px 0;padding:26px;scroll-margin-top:20px;box-shadow:0 8px #d8c8ed55}.cheetah-shell .cheetah-room button,.cheetah-shell .cheetah-room a{transition:transform .15s}.cheetah-shell .cheetah-room button{color:#4e2996;cursor:pointer;background:#ede5ff;border-radius:12px;min-height:44px;padding:10px 18px;font-weight:700}.cheetah-shell .cheetah-room button:disabled{opacity:.4;cursor:default}.cheetah-shell .cheetah-room button:hover:not(:disabled){background:#e0d0ff;transform:translateY(-2px)}.cheetah-shell .cheetah-room :focus-visible{outline-offset:3px;outline:4px solid #fb923c}.cheetah-shell .cheetah-room a{color:#5c28b0;font-weight:700;text-decoration:underline}.cheetah-shell .room-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:10px 0;display:flex}.cheetah-shell .room-calendar{text-align:center;grid-template-columns:repeat(7,1fr);gap:4px;margin:20px 0;display:grid}.cheetah-shell .room-calendar button{background:#f6f3fb;padding:5px}.cheetah-shell .room-calendar .has-lesson{color:#fff;background:#6f39c5;box-shadow:0 0 0 3px #f9c747}.cheetah-shell .room-small{color:#695979;font-size:14px}.cheetah-shell .lesson-session{text-align:left;width:100%;background:#f0e6ff!important;border-left:6px solid #9c5fe6!important;padding:20px!important}.cheetah-shell .cheetah-room progress{accent-color:#a343d1;width:100%}.cheetah-shell .cheetah-room input,.cheetah-shell .cheetah-room select{color:#302344;background:#fff;border:2px solid #cbb5e6;border-radius:10px;max-width:100%;padding:10px}.cheetah-shell .cheetah-room input{width:100%;margin:8px 0;display:block}.cheetah-shell .stage-tabs{flex-wrap:wrap;gap:8px;margin:20px 0;display:flex}.cheetah-shell .stage-tabs button{font-size:16px}.cheetah-shell .stage-tabs .active{color:#fff;background:#6c38c6}.cheetah-shell .stage-content{background:#faf6ff;border:2px dashed #cab2ed;border-radius:20px;min-height:210px;padding:24px}.cheetah-shell .stage-content>span{color:#74409c;font-size:16px}.cheetah-shell .room-clock{text-align:center;color:#7f3ebc;font-size:36px;font-weight:800}.cheetah-shell .room-clock button{margin:3px;padding:6px 12px;font-size:14px}.cheetah-shell .scale-bubbles{flex-wrap:wrap;justify-content:center;gap:10px;padding:24px 0;display:flex}.cheetah-shell .scale-bubbles button{color:#302344;border:2px solid #fff;min-width:70px;font-size:27px;box-shadow:0 4px #30234422}.cheetah-shell .scale-bubbles small{font-size:13px;display:block}.cheetah-shell .room-center{text-align:center}.cheetah-shell .lesson-piano{touch-action:manipulation;width:100%;height:auto;max-height:245px;margin:15px auto;display:block}.cheetah-shell .lesson-piano [role=button]{cursor:pointer}.cheetah-shell .lesson-piano [role=button]:focus{filter:brightness(.85);outline:none}.cheetah-shell .chord-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px;display:grid}.cheetah-shell .chord-card{background:linear-gradient(#fff,#f8f3ff);border:2px solid #e9dcfa;border-radius:20px;padding:18px}.cheetah-shell .chord-card:nth-child(3n+2){background:linear-gradient(#fff,#e7f9ff)}.cheetah-shell .chord-card:nth-child(3n){background:linear-gradient(#fff,#fff4dc)}.cheetah-shell .chord-card h3{color:#7938b7;font-size:34px}.cheetah-shell .chord-card>small{color:#675078;margin-top:10px;display:block}.cheetah-shell .lesson-video{aspect-ratio:16/9;border:0;border-radius:20px;width:100%;margin:15px 0}.cheetah-shell .game-options{grid-template-columns:repeat(6,1fr);gap:10px;display:grid}.cheetah-shell .game-options button{background:#fef1c7;font-size:24px}.cheetah-shell .obs-mode{max-width:none;padding:16px;font-size:24px}.cheetah-shell .obs-mode .stage-content{font-size:28px}.cheetah-shell .obs-mode .room-banner{padding:16px 26px}.cheetah-shell .obs-mode .room-banner h1{font-size:28px}.cheetah-shell .obs-mode .room-banner p{display:none}.cheetah-shell:has(.obs-mode)>.site-header{display:none}.cheetah-shell:has(.obs-mode) .site-header{display:none}.cheetah-shell:has(.obs-mode) footer{display:none}.cheetah-shell .obs-mode .chord-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:750px){.cheetah-shell .cheetah-room{padding:12px;font-size:17px}.cheetah-shell .room-card{padding:18px}.cheetah-shell .room-top{grid-template-columns:1fr;gap:0}.cheetah-shell .room-top .room-card{margin-bottom:0}.cheetah-shell .chord-grid,.cheetah-shell .obs-mode .chord-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cheetah-shell .game-options{grid-template-columns:repeat(4,1fr)}.cheetah-shell .room-banner{padding:22px}.cheetah-shell .room-banner>button{float:none;margin-bottom:14px;display:block}.cheetah-shell .stage-content{padding:16px}.cheetah-shell .chord-card{padding:12px}.cheetah-shell .chord-card p{font-size:14px}}@media(max-width:450px){.cheetah-shell .chord-grid,.cheetah-shell .obs-mode .chord-grid{grid-template-columns:1fr}.cheetah-shell .scale-bubbles button{min-width:48px;padding:8px;font-size:22px}.cheetah-shell .room-calendar button{padding:5px}}.cheetah-shell .obs-mode .chord-section,.cheetah-shell .obs-mode .video-section,.cheetah-shell .obs-mode .game-section,.cheetah-shell .obs-mode .homework-section,.cheetah-shell .obs-mode .scale-area{display:none}.cheetah-shell .obs-mode.stage-1 .scale-area,.cheetah-shell .obs-mode.stage-2 .chord-section,.cheetah-shell .obs-mode.stage-3 .video-section,.cheetah-shell .obs-mode.stage-4 .game-section,.cheetah-shell .obs-mode.stage-5 .homework-section{display:block}.cheetah-shell .obs-mode .theory-section{display:none}.cheetah-shell .room-calendar button[aria-pressed=true]{outline:2px solid #a96de5}.cheetah-shell .score-panel summary{cursor:pointer;background:#f0e7ff;border-radius:12px;padding:16px;font-weight:700}.cheetah-shell .scale-poster{border:1px solid #e4cf6e;border-radius:20px;width:100%;height:auto;margin-top:24px;display:block}.cheetah-shell .piano-controls{flex-wrap:wrap;align-items:center;gap:12px;margin-block:20px;display:flex}.cheetah-shell .piano-controls label{flex-direction:column;gap:6px;font-size:14px;display:flex}.cheetah-shell .piano-controls input{accent-color:#d42f87;width:140px}.cheetah-shell .piano-chart-scroll{border-radius:20px;overflow-x:auto}.cheetah-shell .piano-chart-surface{min-width:760px;position:relative}.cheetah-shell .piano-chart-surface .scale-poster{border:0;border-radius:0;margin:0}.cheetah-shell .piano-hitboard{width:87.5%;height:22.9167%;position:absolute;top:63.5417%;left:6.25%}.cheetah-shell .piano-hit{cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:4px;padding:0;position:absolute;top:0}.cheetah-shell .piano-hit-white{z-index:1;height:100%}.cheetah-shell .piano-hit-black{z-index:2;height:61.8182%}.cheetah-shell .piano-hit span{opacity:0;pointer-events:none}.cheetah-shell .piano-hit:hover{background:#ffd2004d}.cheetah-shell .piano-hit:focus-visible{outline-offset:-4px;outline:4px solid #dc2686}.cheetah-shell .piano-hit.piano-sounding{background:#ffdc00a6;box-shadow:inset 0 0 0 4px #e93691,0 0 18px #f9b827}.cheetah-shell .home-welcome{grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding-top:24px;display:grid;position:relative}.cheetah-shell .home-welcome img{border-radius:26px;width:100%}.cheetah-shell .home-welcome h1{margin:12px 0;font-size:clamp(28px,4vw,45px);font-weight:800;line-height:1.4}.cheetah-shell .home-welcome p{font-size:18px}.cheetah-shell .home-welcome a{color:var(--primary);margin-top:20px;font-weight:700;display:inline-block}.cheetah-shell .home-schedule{border-radius:28px;max-width:none;padding:18px;scroll-margin-top:100px}.cheetah-shell .home-schedule .room-card{margin:0;padding:24px}.cheetah-shell .home-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.cheetah-shell .category-tile{border:1px solid var(--border);border-radius:24px;padding:26px;transition:transform .15s;display:block}.cheetah-shell .category-tile:hover{transform:translateY(-3px)}.cheetah-shell .category-tile>span{font-size:34px}.cheetah-shell .category-tile h2{margin:8px 0;font-size:23px;font-weight:800}.cheetah-shell .category-tile p{font-size:16px}.cheetah-shell .home-folder{border:1px solid var(--border);background:var(--card);border-radius:22px;margin:14px 0;scroll-margin-top:110px}.cheetah-shell .home-folder>summary{cursor:pointer;padding:22px;font-size:22px;font-weight:700}.cheetah-shell .home-folder[open]>summary{border-bottom:1px solid var(--border);background:var(--secondary);margin-bottom:24px}.cheetah-shell .home-folder>section{margin:20px}.cheetah-shell .home-folder>summary::marker{color:var(--primary)}.cheetah-shell .learning-nav{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:center;gap:20px;padding:18px;font-weight:700;display:flex}.cheetah-shell .learning-nav a[aria-current=page]{color:var(--primary)}@media(max-width:700px){.cheetah-shell .home-welcome{grid-template-columns:1fr;gap:14px}.cheetah-shell .home-welcome img{object-fit:cover;max-height:220px}.cheetah-shell .home-categories{grid-template-columns:1fr}.cheetah-shell .home-schedule .room-top{gap:16px}.cheetah-shell .category-tile{padding:20px}.cheetah-shell .home-folder>section{margin:10px}.cheetah-shell .learning-nav{gap:12px;font-size:15px}}.cheetah-shell .bg-lilac{background:#eee7ff}.cheetah-shell .bg-sky{background:#e6f5ff}.cheetah-shell .bg-pink{background:#f9c4e3}.cheetah-shell .cheetah-school-header{z-index:50;position:relative}.cheetah-shell:has(.obs-mode) .cheetah-school-header{display:none}.cheetah-shell .font-display{font-family:IBM Plex Sans Thai,sans-serif}.cheetah-shell .eyebrow{letter-spacing:.1em;color:var(--primary);font-size:13px;font-weight:700}.cheetah-shell .field{border:2px solid var(--input);background:var(--background);width:100%;color:var(--foreground);border-radius:12px;padding:10px}