@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap";:root{--color-bg: #FAFAFA;--color-bg-dark: #1A1A1A;--color-text: #1A1A1A;--color-text-muted: #666666;--color-border: #000000;--color-accent: #FFE600;--color-accent-hover: #E6CF00;--color-secondary: #0066FF;--color-white: #FFFFFF;--color-error: #FF3333;--color-success: #00CC66;--font-heading: "Space Grotesk", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-24: 96px;--border-width: 2px;--border-width-thick: 3px;--shadow-brutal: 4px 4px 0 var(--color-border);--shadow-brutal-hover: 6px 6px 0 var(--color-border);--shadow-brutal-active: 2px 2px 0 var(--color-border);--transition-fast: .15s ease;--transition-normal: .2s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background-color:var(--color-bg);min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2;margin-bottom:var(--space-4)}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}p{margin-bottom:var(--space-4)}a{color:var(--color-secondary);text-decoration:none;position:relative}a:hover{text-decoration:underline}code{font-family:var(--font-mono);background:var(--color-bg);padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-border);font-size:var(--text-sm)}.container{max-width:1200px;margin:0 auto;padding:var(--space-4)}.container-narrow{max-width:800px;margin:0 auto;padding:var(--space-4)}.card{background:var(--color-white);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);padding:var(--space-6);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.card-interactive{cursor:pointer}.card-interactive:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal-hover)}.card-interactive:active{transform:translate(2px,2px);box-shadow:none}.card-highlight{background:var(--color-accent)}.card-subtle{background:var(--color-bg)}.btn{font-family:var(--font-heading);font-weight:600;font-size:var(--text-base);padding:var(--space-3) var(--space-6);border:var(--border-width-thick) solid var(--color-border);background:var(--color-accent);color:var(--color-text);cursor:pointer;box-shadow:var(--shadow-brutal);transition:transform var(--transition-fast),box-shadow var(--transition-fast);text-decoration:none;display:inline-block;text-align:center}.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal-hover);text-decoration:none}.btn:active{transform:translate(2px,2px);box-shadow:none}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--shadow-brutal)}.btn-secondary{background:var(--color-white)}.btn-outline{background:transparent}.btn-danger{background:var(--color-error);color:var(--color-white)}.btn-sm{font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}.btn-lg{font-size:var(--text-lg);padding:var(--space-4) var(--space-8)}.input{width:100%;font-family:var(--font-body);font-size:var(--text-base);padding:var(--space-3) var(--space-4);border:var(--border-width-thick) solid var(--color-border);background:var(--color-white);box-shadow:var(--shadow-brutal-active);transition:box-shadow var(--transition-fast)}.input:focus{outline:none;box-shadow:var(--shadow-brutal)}.input::placeholder{color:var(--color-text-muted)}.header{background:var(--color-white);border-bottom:var(--border-width-thick) solid var(--color-border);padding:var(--space-4) var(--space-6);position:sticky;top:0;z-index:100}.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.header-logo{font-family:var(--font-heading);font-weight:700;font-size:var(--text-xl);color:var(--color-text);text-decoration:none;display:flex;align-items:center;gap:var(--space-2)}.header-logo:hover{text-decoration:none}.header-nav{display:flex;align-items:center;gap:var(--space-6)}.nav-link{font-family:var(--font-heading);font-weight:500;color:var(--color-text);text-decoration:none;position:relative;padding-bottom:var(--space-1)}.nav-link:after{content:"";position:absolute;bottom:0;left:0;width:0;height:var(--border-width);background:var(--color-accent);transition:width var(--transition-normal)}.nav-link:hover:after{width:100%}.nav-link:hover{text-decoration:none}.user-info{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--color-text-muted)}.chapter-list{display:flex;flex-direction:column;gap:var(--space-6)}.chapter-card{background:var(--color-white);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal)}.chapter-header{padding:var(--space-4) var(--space-6);border-bottom:var(--border-width) solid var(--color-border);display:flex;align-items:center;gap:var(--space-4)}.chapter-number{font-family:var(--font-heading);font-size:var(--text-3xl);font-weight:700;color:var(--color-accent);background:var(--color-text);padding:var(--space-2) var(--space-4);min-width:60px;text-align:center}.chapter-title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:600;margin:0}.chapter-content-list{padding:var(--space-4)}.content-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);border:var(--border-width) solid transparent;transition:all var(--transition-fast);text-decoration:none;color:var(--color-text)}.content-item:hover{background:var(--color-bg);border-color:var(--color-border);text-decoration:none}.content-item-completed{opacity:.7}.content-type-badge{font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-border);background:var(--color-bg);text-transform:uppercase;min-width:70px;text-align:center}.content-type-badge.video{background:var(--color-secondary);color:var(--color-white)}.content-type-badge.text{background:var(--color-accent)}.content-type-badge.game{background:var(--color-success);color:var(--color-white)}.content-title{flex:1;font-weight:500}.content-duration{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted)}.content-status{font-size:var(--text-lg)}.content-page{max-width:900px;margin:0 auto;padding:var(--space-6)}.content-breadcrumb{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}.content-breadcrumb a{color:var(--color-text-muted)}.content-breadcrumb a:hover{color:var(--color-text)}.content-header{margin-bottom:var(--space-6)}.content-header h1{font-size:var(--text-3xl);margin-bottom:var(--space-2)}.video-container{position:relative;aspect-ratio:16/9;background:var(--color-text);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);margin-bottom:var(--space-6)}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.game-thumbnail{position:relative;aspect-ratio:16/9;background:var(--color-text);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);margin-bottom:var(--space-6);cursor:pointer;overflow:hidden;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.game-thumbnail:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal-hover)}.game-thumbnail:active{transform:translate(2px,2px);box-shadow:none}.game-thumbnail img{width:100%;height:100%;object-fit:cover}.game-thumbnail-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--color-text) 0%,#333 100%)}.game-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:var(--color-accent);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.game-thumbnail:hover .game-play-btn{transform:translate(-50%,-50%) scale(1.1)}.game-play-btn svg{margin-left:4px}.game-overlay{position:fixed;inset:0;background:var(--color-text);z-index:1000;display:flex;align-items:center;justify-content:center}.game-overlay iframe{width:100%;height:100%;border:none}.game-overlay-close{position:absolute;top:var(--space-4);right:var(--space-4);width:48px;height:48px;background:var(--color-white);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1001;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.game-overlay-close:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-brutal-hover)}.game-overlay-close:active{transform:translate(2px,2px);box-shadow:none}.content-description{background:var(--color-white);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);padding:var(--space-6)}.content-description h2,.content-description h3,.content-description h4{margin-top:var(--space-6)}.content-description ul,.content-description ol{margin-left:var(--space-6);margin-bottom:var(--space-4)}.content-description li{margin-bottom:var(--space-2)}.content-description a{color:var(--color-secondary);text-decoration:underline}.content-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-6);border-top:var(--border-width) solid var(--color-border)}.content-nav-btn{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--color-white);border:var(--border-width) solid var(--color-border);color:var(--color-text);text-decoration:none;font-weight:500;transition:all var(--transition-fast)}.content-nav-btn:hover{background:var(--color-bg);text-decoration:none}.content-nav-btn.disabled{opacity:.4;pointer-events:none}.progress-bar{height:8px;background:var(--color-bg);border:var(--border-width) solid var(--color-border);overflow:hidden}.progress-bar-fill{height:100%;background:var(--color-accent);transition:width var(--transition-normal)}.progress-stats{display:flex;justify-content:space-between;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}.login-card{width:100%;max-width:400px;background:var(--color-white);border:var(--border-width-thick) solid var(--color-border);box-shadow:var(--shadow-brutal);padding:var(--space-8)}.login-title{text-align:center;margin-bottom:var(--space-6)}.login-form{display:flex;flex-direction:column;gap:var(--space-4)}.form-group{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-weight:500;font-size:var(--text-sm)}.otp-info{background:#fffde6;border:var(--border-width) solid var(--color-accent);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);font-size:var(--text-sm);text-align:center}.otp-input{text-align:center;letter-spacing:.3em;font-size:var(--text-lg);font-family:JetBrains Mono,monospace}.otp-links{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.otp-link{background:none;border:none;color:var(--color-secondary);font-size:var(--text-sm);cursor:pointer;padding:0;text-decoration:underline}.otp-link:hover{opacity:.7}.otp-link:disabled{opacity:.4;cursor:not-allowed}.login-notice{width:100%;max-width:400px;margin-top:var(--space-4);padding:var(--space-4);background:var(--color-bg);border:var(--border-width) solid var(--color-border);font-size:var(--text-sm);color:var(--color-text-muted)}.login-notice strong{display:block;margin-bottom:var(--space-2);color:var(--color-text)}.login-notice p{margin:0;line-height:1.5}.login-notice a{color:var(--color-secondary)}.error-message{background:#fee;border:var(--border-width) solid var(--color-error);color:var(--color-error);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);font-size:var(--text-sm)}@media(max-width:768px){:root{--text-5xl: 2.25rem;--text-3xl: 1.5rem}.header-inner{flex-direction:column;align-items:flex-start}.header-nav{width:100%;justify-content:space-between}.chapter-header{flex-direction:column;align-items:flex-start}.content-nav{flex-direction:column}.content-nav-btn{justify-content:center}}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}