@font-face{font-family:Google Sans Flex;src:url("/fonts/Google Sans Flex 18pt-normal-400-100.ttf")format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Google Sans Flex;src:url("/fonts/Google Sans Flex 18pt-normal-500-100.ttf")format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Google Sans Flex;src:url("/fonts/Google Sans Flex 18pt-normal-500-100.ttf")format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Google Sans Flex;src:url("/fonts/Google Sans Flex 18pt-normal-500-100.ttf")format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--color-white:#fff;--color-black:#181818;--color-gray:#747474;--color-light-gray:#e1e1e1;--color-lighter-gray:#f2f2f2;--color-blue:#4890e8;--color-border:#cecece;--color-bg:#fbfaf9;--primary:var(--color-blue);--primary-light:#93c5fd;--bg-color:var(--color-bg);--text-color:var(--color-black);--glass-bg:#ffffffb3;--glass-border:var(--color-border);--shadow:0 4px 20px 0 #0000000d;--font-family:"Google Sans Flex",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--card-bg:white}[data-theme=dark]{--color-bg:#0f0f0f;--color-black:#f5f5f5;--color-gray:#a0a0a0;--color-light-gray:#3a3a3a;--color-lighter-gray:#2a2a2a;--color-border:#404040;--bg-color:#0f0f0f;--text-color:#f5f5f5;--glass-bg:#1e1e1ecc;--glass-border:#404040;--shadow:0 4px 20px 0 #0000004d;--card-bg:#1a1a1a}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;line-height:1.15}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);min-height:100vh;transition:background-color .3s,color .3s;overflow-x:hidden}.app-container{flex-direction:column;gap:1.5rem;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem;display:flex}header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:.5rem 0 1.5rem;display:flex}.logo{color:var(--color-blue);align-items:center;gap:.5rem;font-size:1.5rem;font-weight:500;display:flex}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:16px;padding:1.5rem;transition:transform .2s,box-shadow .2s}.glass-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px #00000014}.glass-card:has(.video-container):hover{transform:none}.hero{text-align:center;padding:2rem 0 1rem}.hero h1{color:var(--color-black);margin-bottom:.75rem;font-size:2.5rem;font-weight:500}.hero p{color:var(--color-gray);max-width:550px;margin:0 auto;font-size:1rem;line-height:1.6}.main-content{grid-template-columns:1.5fr 1fr;gap:2rem;display:grid}@media (max-width:968px){.main-content{grid-template-columns:1fr}.hero h1{font-size:2rem}}.video-container{aspect-ratio:4/3;width:100%;max-width:640px;box-shadow:var(--shadow);background:#000;border-radius:12px;margin:0 auto;position:relative;overflow:hidden}#webcam{object-fit:cover;width:100%;height:100%;transform:rotateY(180deg)}#output_canvas{width:100%;height:100%;position:absolute;top:0;left:0;transform:rotateY(180deg)}.controls{flex-direction:column;gap:1.25rem;display:flex}.prediction-box{text-align:center;padding:1.5rem}.prediction-box h2{color:var(--primary);text-transform:uppercase;letter-spacing:.1rem;margin-bottom:.75rem;font-size:.875rem;font-weight:500}#predicted-sign{color:var(--primary);justify-content:center;align-items:center;height:5rem;font-size:4rem;font-weight:500;display:flex}.train-controls{grid-template-columns:repeat(auto-fill,minmax(55px,1fr));gap:.4rem;margin-top:.75rem;display:grid}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:500;line-height:1.4;transition:all .2s;display:flex}.btn-primary{background:var(--color-black);color:var(--color-white);border:1px solid var(--color-black)}.btn-primary:hover{background:#181818d9;transform:translateY(-1px)}[data-theme=dark] .btn-primary{background:var(--color-blue);border-color:var(--color-blue);color:#fff}[data-theme=dark] .btn-primary:hover{background:#5a9aef;border-color:#5a9aef}.btn-outline{background:var(--color-white);border:1px solid var(--color-border);color:var(--color-black);padding:.5rem 1rem;font-weight:400;box-shadow:0 1px 2px #0000000d}.btn-outline:hover{border-color:var(--color-blue);color:var(--color-blue);transform:translateY(-1px)}[data-theme=dark] .btn-outline{background:var(--card-bg);border-color:var(--color-border);color:var(--text-color)}[data-theme=dark] .btn-outline:hover{border-color:var(--color-blue);color:var(--color-blue)}select.btn-outline{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px;padding-right:2.25rem}[data-theme=dark] select.btn-outline{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:16px}.btn-train{border:1px solid var(--color-border);background:var(--card-bg);color:var(--text-color);border-radius:8px;padding:.4rem;font-size:1rem}.btn-train:hover{border-color:var(--color-blue);transform:translateY(-1px)}.btn-train:active{background:var(--color-blue);color:#fff;border-color:var(--color-blue)}.status-bar{color:var(--color-gray);align-items:center;gap:.5rem;font-size:.8rem;display:flex}.status-dot{background:var(--color-light-gray);border-radius:50%;width:8px;height:8px}.status-dot.active{background:#10b981;box-shadow:0 0 8px #10b981}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:.5s ease-out forwards fadeIn}#word-display span{padding:0 .15rem;transition:color .2s}#word-display span.current{color:var(--color-blue);border-bottom:3px solid var(--color-blue)}#word-display span.completed{color:#10b981}#word-display span.pending{color:var(--color-gray)}.glass-card h3{color:var(--color-black);font-size:1rem;font-weight:500}.glass-card label{color:var(--color-gray);font-size:.8rem;font-weight:500}.glass-card p{color:var(--color-gray);font-size:.85rem;line-height:1.5}footer{text-align:center;color:var(--color-gray);margin-top:auto;padding-top:1.5rem;font-size:.8rem}.split-view{flex-direction:column;height:100vh;display:flex;overflow:hidden}.camera-pane{background:#000;flex:1;justify-content:center;align-items:center;min-height:40vh;display:flex;position:relative;overflow:hidden}.learning-pane{background:var(--bg-color);border-top:1px solid var(--glass-border);flex:1;padding:1.5rem;overflow-y:auto}.camera-pane .video-container{aspect-ratio:auto;background:#000;justify-content:center;align-items:center;width:100%;max-width:none;height:100%;display:flex;position:relative}#webcam{object-fit:contain;width:auto;height:100%}#output_canvas{object-fit:contain;width:auto;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)rotateY(180deg)}.units-grid{flex-direction:column;gap:1.5rem;display:flex}.unit-card{padding:1.5rem}.unit-card h3{color:var(--primary);margin-top:0;margin-bottom:1rem}.lessons-container{flex-wrap:wrap;gap:.8rem;display:flex}.lesson-btn{border-radius:2rem;min-width:60px;padding:.5rem 1rem}.lesson-header{grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin-bottom:2rem;display:grid}.lesson-header>:first-child{justify-self:start}.lesson-header>:last-child{justify-self:end}.word-challenge{text-align:center;margin-top:2rem}.target-word{letter-spacing:.2rem;margin-bottom:.5rem;font-size:3rem;font-weight:800}.success-animation{animation:.5s bounce;color:#4ade80!important}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.units-grid{align-items:center;padding-bottom:4rem}.unit-card{width:100%;max-width:600px;padding:1rem 0;background:0 0!important;border:none!important}.unit-card h3{text-align:center;color:var(--text-color);background:var(--card-bg);border:1px solid var(--glass-border);border-radius:12px;margin-bottom:1.5rem;padding:.8rem;font-size:1.2rem}.lessons-container{flex-direction:column;align-items:center;gap:2rem;position:relative}.lesson-btn{color:#fff;text-align:center;z-index:2;cursor:pointer;background:#58cc02;border:none;border-bottom:5px solid #46a302;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;font-size:.9rem;font-weight:800;transition:all .1s;display:flex;box-shadow:0 4px 10px #58cc024d}.lessons-container .lesson-btn:after{display:none}.unit-card:nth-child(2n) .lesson-btn{background:#ce82ff;border-bottom-color:#a568cc;box-shadow:0 4px 10px #ce82ff4d}.unit-card:nth-child(3n) .lesson-btn{background:#ff9600;border-bottom-color:#cc7800;box-shadow:0 4px 10px #ff96004d}.unit-card:nth-child(4n) .lesson-btn{background:#1cb0f6;border-bottom-color:#168dbd;box-shadow:0 4px 10px #1cb0f64d}.camera-pane{min-height:50vh;display:none;position:relative}.learning-pane{height:100vh}body.lesson-active .camera-pane{display:flex}body.lesson-active .learning-pane{flex:1;height:auto}body.lesson-active #units-view{display:none}.lesson-btn{white-space:normal;word-break:break-word;color:#1e293b;background:#cbd5e1;border-bottom:5px solid #94a3b8;width:80px;height:80px;padding:.2rem;font-size:.8rem;line-height:1.1;box-shadow:0 4px 10px #0000001a}.lesson-btn.completed{color:#fff;background:#58cc02;border-bottom:5px solid #46a302;box-shadow:0 4px 10px #58cc024d}.lesson-btn:active{box-shadow:none;border-bottom-width:0;margin-top:5px}.lessons-container .lesson-btn:nth-child(odd){margin-right:60px}.lessons-container .lesson-btn:nth-child(2n){margin-left:60px}.unit-card:nth-child(2n) .lesson-btn,.unit-card:nth-child(3n) .lesson-btn,.unit-card:nth-child(4n) .lesson-btn{background:#cbd5e1;border-bottom-color:#94a3b8;box-shadow:0 4px 10px #0000001a}.unit-card:nth-child(n) .lesson-btn.completed{background:#58cc02;border-bottom-color:#46a302;box-shadow:0 4px 10px #58cc024d}[data-theme=dark] .lesson-btn{color:#e0e0e0;background:#3a3a3a;border-bottom:5px solid #2a2a2a;box-shadow:0 4px 10px #0000004d}[data-theme=dark] .unit-card:nth-child(2n) .lesson-btn,[data-theme=dark] .unit-card:nth-child(3n) .lesson-btn,[data-theme=dark] .unit-card:nth-child(4n) .lesson-btn{color:#e0e0e0;background:#3a3a3a;border-bottom-color:#2a2a2a;box-shadow:0 4px 10px #0000004d}[data-theme=dark] .lesson-btn.completed,[data-theme=dark] .unit-card:nth-child(n) .lesson-btn.completed{color:#fff;background:#58cc02;border-bottom-color:#46a302;box-shadow:0 4px 10px #58cc024d}#handshape-tooltip{pointer-events:none}#hold-progress-container{z-index:20;background:#fff3;width:100%;height:8px;position:absolute;bottom:0;left:0}#hold-progress-bar{background:var(--color-blue);width:0%;height:100%;box-shadow:0 0 10px var(--color-blue);transition:width 50ms linear,background .15s}