:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-primary:#38bdf8;--accent-secondary:#818cf8;--success:#4ade80;--warning:#fbbf24;--danger:#f87171;--font-family:"Outfit", sans-serif;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-family);justify-content:center;align-items:center;min-height:100vh;display:flex;overflow:hidden}#root{flex-direction:column;justify-content:center;width:100%;max-width:500px;height:100vh;padding:1rem;display:flex}h1{background:linear-gradient(to right, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:clamp(2rem,8vh,3rem);font-weight:800}.card{background:var(--bg-secondary);box-shadow:var(--shadow-lg);border:1px solid #ffffff1a;border-radius:2rem;flex-direction:column;gap:1rem;padding:clamp(1rem,3vh,2rem);display:flex}.timer-display{font-variant-numeric:tabular-nums;margin:.5rem 0;font-size:clamp(3rem,12vh,5rem);font-weight:900;line-height:1}.status-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-size:1rem;font-weight:600}.progress-container{background:var(--bg-primary);border-radius:4px;width:100%;height:8px;overflow:hidden}.progress-bar{background:linear-gradient(to right, var(--accent-primary), var(--accent-secondary));height:100%;transition:width .1s}.controls{justify-content:center;gap:1.5rem;display:flex}button{cursor:pointer;border:none;border-radius:1.5rem;align-items:center;gap:.75rem;padding:1.5rem 3rem;font-size:1.5rem;font-weight:700;transition:transform .2s,background .2s;display:flex}button:active{transform:scale(.95)}.btn-primary{background:var(--accent-primary);color:var(--bg-primary)}.btn-primary:hover{background:#7dd3fc}.btn-secondary{color:var(--text-primary);background:#ffffff1a}.btn-secondary:hover{background:#fff3}.transition-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172ae6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.transition-text{color:var(--warning);margin-bottom:.5rem;font-size:clamp(2rem,10vh,4rem);font-weight:900}.character-canvas{background:#ffffff0d;border-radius:1rem;width:100%;height:clamp(120px,20vh,180px);overflow:hidden}.coaching-container{background:#ffffff08;border:1px solid #ffffff0d;border-radius:1.5rem;padding:1rem}.coaching-title{color:var(--accent-primary);text-transform:uppercase;margin-bottom:1rem;font-size:1.1rem;font-weight:700}.teeth-diagram{width:clamp(60px,15vh,100px);height:clamp(60px,15vh,100px);margin:0 auto .5rem}.coaching-instruction{color:var(--text-secondary);font-size:1rem;font-weight:500}.history-badge{color:var(--text-secondary);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:1rem;align-self:center;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.4rem .8rem;font-size:.75rem;display:inline-flex}