:root{--orange-300:#fdba74;--orange-400:#fb923c;--orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;--zinc-950:#09090b;--zinc-900:#18181b;--zinc-800:#27272a;--zinc-700:#3f3f46;--zinc-600:#52525b;--zinc-500:#71717a;--zinc-400:#a1a1aa;--zinc-200:#e4e4e7;--zinc-50:#fafafa;--red-400:#f87171;--color-bg:var(--zinc-950);--color-surface:var(--zinc-800);--color-surface-2:var(--zinc-700);--color-primary:var(--orange-500);--color-primary-dim:var(--orange-600);--color-text:var(--zinc-50);--color-text-2:var(--zinc-400);--color-border:var(--zinc-700);--screen-pad:clamp(32px, 4vw, 64px);--ease-out:cubic-bezier(0, 0, .2, 1);--dur-fast:.16s;--dur-mid:.24s}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden}body{background-color:var(--color-bg);color:var(--color-text);cursor:default;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,sans-serif;font-size:22px;line-height:1.5}.auth-screen{background-color:var(--color-bg);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.auth-card{background:var(--color-surface);border:4px solid var(--color-border);border-radius:12px;flex-direction:column;align-items:center;gap:24px;width:clamp(480px,40vw,680px);padding:48px 56px;display:flex;box-shadow:0 24px 64px #00000080}.auth-title{letter-spacing:-.5px;color:var(--color-text);text-align:center;font-size:clamp(36px,4vw,52px);font-weight:700;line-height:1.15}.auth-subtitle{color:var(--color-text-2);text-align:center;letter-spacing:3px;text-transform:uppercase;margin-top:-10px;margin-bottom:4px;font-size:16px;font-weight:600}.auth-divider{background:#f9731659;width:80%;height:1px;margin:-4px auto 4px}.auth-form{flex-direction:column;align-items:stretch;gap:20px;width:100%;display:flex}.auth-label{color:var(--color-text);text-align:center;letter-spacing:.3px;font-size:20px;font-weight:500}.input-wrapper{cursor:text;border-radius:10px;width:100%}.input-wrapper input{letter-spacing:10px;text-align:center;background-color:var(--zinc-900);width:100%;color:var(--color-text);border:6px solid var(--color-border);transition:border-color var(--dur-fast) var(--ease-out);pointer-events:auto;cursor:text;border-radius:10px;outline:none;padding:20px 24px;font-family:ui-monospace,Courier New,monospace;font-size:clamp(36px,4vw,48px)}.input-wrapper:hover:not(.focused) input{border-color:var(--orange-400)}.input-wrapper.focused input{border-color:var(--color-primary)}.input-wrapper input::placeholder{color:var(--zinc-500);letter-spacing:8px}.input-wrapper input:disabled{opacity:.4;cursor:default}.auth-form button{letter-spacing:.5px;background:var(--color-primary);color:#fff;cursor:pointer;pointer-events:auto;width:100%;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);border:4px solid #0000;border-radius:10px;padding:20px;font-family:inherit;font-size:24px;font-weight:600}.auth-form button:hover:not(:disabled){background:var(--orange-400)}.auth-form button.focused:not(:disabled){background:var(--color-primary-dim);outline:6px solid var(--orange-300);outline-offset:3px}.auth-form button:active:not(:disabled){transform:scale(.97)}.auth-form button:disabled{background:var(--color-surface-2);cursor:default;opacity:.5;border-color:#0000}.btn-loading{justify-content:center;align-items:center;gap:16px;display:flex}.spinner{border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;flex-shrink:0;width:24px;height:24px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.error-area{opacity:0;min-height:36px;transition:opacity var(--dur-mid) var(--ease-out);justify-content:center;align-items:center;display:flex}.error-area.visible{opacity:1}.error{color:var(--red-400);text-align:center;font-size:20px}.screen{width:100vw;height:100vh;padding:var(--screen-pad);flex-direction:column;display:flex;overflow:hidden}.app-title{letter-spacing:-.5px;color:var(--color-text);flex-shrink:0;margin-bottom:clamp(24px,3vh,48px);font-size:clamp(36px,4vw,56px);font-weight:700;line-height:1.15}.screen-header{flex-shrink:0;align-items:center;gap:32px;margin-bottom:40px;display:flex}.screen-header h2{color:var(--color-text);font-size:42px;font-weight:700;line-height:1.2}.grid-scroll{scrollbar-width:thin;scrollbar-color:var(--zinc-700) transparent;flex:1;padding:8px 4px 32px;overflow:hidden auto;-webkit-mask-image:linear-gradient(#0000 0,#000 8px calc(100% - 32px),#0000 100%);mask-image:linear-gradient(#0000 0,#000 8px calc(100% - 32px),#0000 100%)}.grid-scroll::-webkit-scrollbar{width:6px}.grid-scroll::-webkit-scrollbar-track{background:0 0}.grid-scroll::-webkit-scrollbar-thumb{background:var(--zinc-700);border-radius:3px}.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;display:grid}.card{background:var(--color-surface);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out), transform .1s var(--ease-out);border:6px solid #0000;border-radius:12px;outline:none;flex-direction:column;display:flex;overflow:hidden}.card-thumb{background:var(--zinc-700);width:100%;padding-bottom:56.25%;position:relative;overflow:hidden}.card-thumb>img{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.card>span{color:var(--color-text);padding:14px 18px 8px;font-size:20px;font-weight:600;line-height:1.35}.card>small{color:var(--color-text-2);padding:0 18px 14px;font-size:17px}.card.focused{border-color:var(--orange-500)}.card:active{transform:scale(.97)}.ctrl-btn{min-width:130px;height:76px;color:var(--color-text);background:var(--color-surface);border:3px solid var(--color-border);cursor:pointer;transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform .1s var(--ease-out);border-radius:10px;outline:none;justify-content:center;align-items:center;padding:0 40px;font-size:26px;font-weight:600;display:inline-flex}.ctrl-btn:hover{background:var(--color-surface-2);border-color:var(--orange-400)}.ctrl-btn.focused{background:var(--color-primary-dim);border-color:var(--orange-500);color:#fff}.ctrl-btn:active{transform:scale(.97)}.loading-msg,.error-msg{color:var(--color-text-2);flex:1;justify-content:center;align-items:center;font-size:34px;font-weight:500;display:flex}.error-msg{color:var(--red-400)}#screen-player{padding:40px var(--screen-pad) 48px;gap:0}#player-ui{flex-direction:column;gap:20px;height:100%;display:flex;position:relative}#lesson-title-display{color:var(--color-text);flex-shrink:0;font-size:28px;font-weight:600;line-height:1.3}#player-wrapper{background:#000;border-radius:10px;flex:1;min-height:0;position:relative;overflow:hidden}#yt-player{width:100%;height:100%}#yt-player iframe{border:none;width:100%;height:100%;display:block}.player-touch-area{z-index:2;cursor:pointer;display:none;position:absolute;inset:0}@media (pointer:coarse){.player-touch-area{display:block}}#player-controls{transition:opacity var(--dur-mid) var(--ease-out);flex-shrink:0;align-items:center;gap:24px;display:flex}.controls-hidden{opacity:0;pointer-events:none}.overlay-center{z-index:10;background:#000000bf;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:absolute;inset:0}:focus-visible{outline:3px solid var(--color-primary);outline-offset:3px;border-radius:10px}@media (pointer:coarse){.ctrl-btn{min-width:56px;min-height:56px}.card{min-height:44px}.auth-form button{min-height:56px}}@media screen and (height<=720px){body{font-size:15px}.auth-card{gap:16px;padding:32px 40px}.auth-form{gap:14px}.auth-form button{padding:14px;font-size:16px}.input-wrapper input{padding:14px 18px}.error-area{min-height:24px}.error{font-size:14px}.screen-header{gap:22px;margin-bottom:28px}.screen-header h2{font-size:28px}.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.card>span{padding:10px 12px 6px;font-size:14px}.card>small{padding:0 12px 10px;font-size:12px}.ctrl-btn{min-width:90px;height:52px;padding:0 28px;font-size:17px}#screen-player{padding:28px var(--screen-pad) 32px}#player-ui{gap:14px}#lesson-title-display{font-size:19px}#player-controls{gap:16px}.loading-msg,.error-msg{font-size:22px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}.spinner{animation-duration:1.4s!important}}