: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);-webkit-font-smoothing:antialiased;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:22px;line-height:1.5}.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);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;top:0;bottom:0;left:0;right: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)}.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);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}#screen-player{padding:40px var(--screen-pad) 48px;gap:0}#player-ui{flex-direction:column;gap:20px;height:100%;display:flex}#lesson-title-display{color:var(--color-text);flex-shrink:0;font-size:28px;font-weight:600;line-height:1.3}#yt-player{background:#000;border-radius:10px;flex:1;min-height:0;overflow:hidden}#yt-player iframe{border:none;width:100%;height:100%;display:block}#player-controls{flex-shrink:0;align-items:center;gap:24px;display:flex}.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)}:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px;border-radius:6px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}
/*$vite$:1*/