:root{--bg-base: #060d1a;--bg-surface: #0d1829;--bg-card: #111f35;--bg-elevated: #162540;--bg-hover: #1a2d4a;--border: #1e3552;--border-light: #253d5e;--text-primary: #f0f6ff;--text-secondary: #7a9cc4;--text-muted: #3d5a7a;--accent: #6366f1;--accent-hover: #7c7ff7;--accent-glow: rgba(99,102,241,.25);--green: #22c55e;--red: #ef4444;--orange: #f59e0b;--blue: #38bdf8;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-xl: 24px;--shadow-sm: 0 1px 4px rgba(0,0,0,.4);--shadow-md: 0 4px 20px rgba(0,0,0,.5);--shadow-lg: 0 12px 40px rgba(0,0,0,.6);--shadow-glow: 0 0 0 2px var(--accent-glow)}*,*:before,*:after{box-sizing:border-box}html{overflow-x:hidden;scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg-base);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}*{scrollbar-width:thin;scrollbar-color:var(--border-light) var(--bg-base)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button,input,textarea,select{outline:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:0 0 0 2px var(--accent-glow),0 0 0 1px var(--accent)}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit}input,textarea,select{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:border-color .15s,box-shadow .15s}input:hover,textarea:hover,select:hover{border-color:var(--border-light)}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}pre{overflow-x:auto;max-width:100%}.app-root{max-width:980px;margin:0 auto;padding:0 24px 80px}.app-header{display:flex;justify-content:space-between;align-items:center;padding:28px 0 22px;border-bottom:1px solid var(--border);margin-bottom:32px;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:100;background:var(--bg-base);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mode-picker{display:flex;gap:8px;margin-bottom:24px}.split-body{display:flex;gap:20px;align-items:flex-start}.split-body .editor-col{flex:1;min-width:0}.split-body .preview-col{flex-shrink:0}.app-tabs{display:flex;gap:4px;margin-bottom:32px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;padding-bottom:1px}.app-tabs::-webkit-scrollbar{display:none}.course-card{padding:24px 28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color .2s,box-shadow .2s}.course-card:hover{border-color:var(--border-light);box-shadow:var(--shadow-md)}@media (max-width: 899px){.app-root{padding:0 16px 56px}.app-header{padding:20px 0 18px;margin-bottom:24px}.course-card{padding:18px 20px}.split-body{flex-direction:column}.split-body .preview-col{width:100%!important;align-items:flex-start}}@media (max-width: 639px){.app-root{padding:0 12px 48px}.app-header{padding:14px 0 12px;margin-bottom:16px;gap:10px}.course-card{padding:14px 16px}.app-tabs{gap:0}.mode-picker{flex-direction:column;gap:6px}video{max-width:100%!important;width:100%!important}pre{overflow-x:auto!important;white-space:pre!important;word-break:normal!important}}@keyframes spin{to{transform:rotate(360deg)}}