@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@300;400;500;600;700;900&family=Russo+One&family=Orbitron:wght@700;900&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--primary-50: hsl(210, 70%, 95%);--primary-100: hsl(210, 65%, 85%);--primary-200: hsl(210, 60%, 72%);--primary-300: hsl(210, 58%, 60%);--primary-400: hsl(210, 60%, 50%);--primary-500: hsl(210, 70%, 40%);--primary-600: hsl(210, 75%, 35%);--primary-700: hsl(210, 80%, 28%);--primary-800: hsl(210, 85%, 20%);--primary-900: hsl(210, 90%, 12%);--accent-50: hsl(38, 90%, 95%);--accent-100: hsl(38, 85%, 85%);--accent-200: hsl(38, 80%, 72%);--accent-300: hsl(38, 78%, 62%);--accent-400: hsl(38, 80%, 55%);--accent-500: hsl(38, 82%, 48%);--accent-600: hsl(35, 85%, 42%);--accent-warm: hsl(25, 75%, 50%);--neutral-50: hsl(220, 15%, 96%);--neutral-100: hsl(220, 14%, 90%);--neutral-200: hsl(220, 12%, 80%);--neutral-300: hsl(220, 10%, 65%);--neutral-400: hsl(220, 8%, 50%);--neutral-500: hsl(220, 10%, 35%);--neutral-600: hsl(220, 12%, 25%);--neutral-700: hsl(220, 15%, 18%);--neutral-800: hsl(220, 18%, 13%);--neutral-850: hsl(220, 20%, 11%);--neutral-900: hsl(220, 22%, 8%);--neutral-950: hsl(220, 25%, 5%);--bg-body: var(--neutral-950);--bg-surface: var(--neutral-900);--bg-card: var(--neutral-850);--bg-card-hover: var(--neutral-800);--bg-elevated: var(--neutral-800);--bg-glass: hsla(220, 20%, 15%, .6);--bg-glass-hover: hsla(220, 20%, 18%, .7);--text-primary: hsl(0, 0%, 95%);--text-secondary: hsl(0, 0%, 70%);--text-tertiary: hsl(0, 0%, 50%);--text-accent: var(--accent-400);--text-link: var(--primary-300);--border-subtle: hsla(220, 15%, 30%, .4);--border-default: hsla(220, 15%, 35%, .5);--border-accent: hsla(38, 80%, 55%, .3);--shadow-sm: 0 1px 2px hsla(0, 0%, 0%, .3);--shadow-md: 0 4px 12px hsla(0, 0%, 0%, .4);--shadow-lg: 0 8px 32px hsla(0, 0%, 0%, .5);--shadow-xl: 0 16px 48px hsla(0, 0%, 0%, .6);--shadow-glow-primary: 0 0 30px hsla(210, 70%, 50%, .2);--shadow-glow-accent: 0 0 30px hsla(38, 80%, 55%, .15);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--font-sans: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;--font-display: "Inter", "Noto Sans TC", sans-serif;--font-brand: "Russo One", sans-serif;--font-brand-alt: "Orbitron", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--text-5xl: 3.25rem;--text-6xl: 4rem;--leading-tight: 1.2;--leading-normal: 1.6;--leading-relaxed: 1.8;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .02em;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--z-dropdown: 50;--z-sticky: 100;--z-overlay: 200;--z-modal: 300;--z-tooltip: 400;--container-sm: 640px;--container-md: 768px;--container-lg: 1024px;--container-xl: 1200px;--container-2xl: 1400px;--content-width: var(--container-xl);--nav-height: 72px}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-body);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:0}body>*{position:relative;z-index:1}a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}a:hover{color:var(--primary-200)}img{max-width:100%;height:auto;display:block}.container{width:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--space-6)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.text-gradient{background:linear-gradient(135deg,var(--primary-200),var(--accent-400));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-accent{color:var(--accent-400)}.section-padding{padding-block:var(--space-24)}.fade-in-section{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}.fade-in-section.visible{opacity:1;transform:translateY(0)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--neutral-900)}::-webkit-scrollbar-thumb{background:var(--neutral-600);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--neutral-500)}::selection{background:#2680d94d;color:var(--text-primary)}table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--space-6) 0;font-size:var(--text-sm);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-subtle)}thead{background:#1f242ecc}thead th{padding:var(--space-3) var(--space-4);font-weight:600;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);text-align:left;border-bottom:1px solid var(--border-default)}tbody td{padding:var(--space-3) var(--space-4);color:var(--text-primary);border-bottom:1px solid hsla(220,15%,20%,.3);vertical-align:top;line-height:1.5}tbody tr:last-child td{border-bottom:none}tbody tr:nth-child(2n){background:#1a1d234d}tbody tr:hover{background:#272c3566}.lesson-info-box{border-radius:var(--radius-md);padding:var(--space-5);margin:var(--space-6) 0;border-left:3px solid}.lesson-info-box.tip{background:#10b9810f;border-color:#12d393}.lesson-info-box.fun-fact{background:#6366f10f;border-color:#5b5df1}.info-title{font-weight:700;margin-bottom:var(--space-2);font-size:var(--text-sm)}.info-title.tip{color:#2cedac}.info-title.fun-fact{color:#8a8bf5}.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:#101319d9;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-subtle);z-index:var(--z-sticky);transition:background var(--duration-normal) var(--ease-out)}.nav.scrolled{background:#0c0e13f2;box-shadow:var(--shadow-lg)}.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:var(--content-width);margin-inline:auto;padding-inline:var(--space-6)}.nav-logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--text-primary)}.nav-logo-icon{font-size:var(--text-2xl)}.nav-logo-text{font-family:var(--font-brand);font-size:1.4rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase}.nav-logo-sub{font-size:10px;color:var(--text-tertiary);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-family:var(--font-sans)}.nav-links{display:flex;align-items:center;gap:var(--space-1);list-style:none}.nav-links a{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out)}.nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--bg-glass)}.nav-links a.active{color:var(--accent-400)}.nav-cta{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff!important;font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-full);transition:all var(--duration-normal) var(--ease-out);box-shadow:var(--shadow-glow-primary)}.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 40px #2680d959}.nav-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:var(--text-xl);cursor:pointer;padding:var(--space-2)}.nav-mobile{display:none;position:fixed;top:var(--nav-height);left:0;right:0;bottom:0;background:#0c0e13fa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:var(--z-overlay);padding:var(--space-8) var(--space-6)}.nav-mobile.open{display:flex;flex-direction:column;gap:var(--space-2);animation:slideDown .3s var(--ease-out)}.nav-mobile a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-4);color:var(--text-secondary);font-size:var(--text-lg);font-weight:500;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-out)}.nav-mobile a:hover{color:var(--text-primary);background:var(--bg-glass)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-family:var(--font-sans);font-size:var(--text-base);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);text-decoration:none;white-space:nowrap}.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-lg)}.btn-primary{background:linear-gradient(135deg,var(--primary-500),var(--primary-600));color:#fff;box-shadow:var(--shadow-glow-primary)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 40px #2680d959;color:#fff}.btn-accent{background:linear-gradient(135deg,var(--accent-500),var(--accent-600));color:var(--neutral-950);box-shadow:var(--shadow-glow-accent)}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 0 40px #e8a5304d;color:var(--neutral-950)}.btn-glass{background:var(--bg-glass);color:var(--text-primary);border:1px solid var(--border-subtle);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-glass:hover{background:var(--bg-glass-hover);border-color:var(--border-default);transform:translateY(-1px);color:var(--text-primary)}.btn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--border-default)}.btn-outline:hover{background:var(--bg-glass);border-color:var(--primary-400);color:var(--primary-300)}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration-normal) var(--ease-out)}.card:hover{background:var(--bg-card-hover);border-color:var(--border-default);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.card-glass{background:var(--bg-glass);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;transition:all var(--duration-normal) var(--ease-out)}.card-glass:hover{background:var(--bg-glass-hover);border-color:var(--border-default);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.card-body{padding:var(--space-6)}.card-img{width:100%;aspect-ratio:16/9;object-fit:cover}.section-header{text-align:center;max-width:720px;margin-inline:auto;margin-bottom:var(--space-16)}.section-label{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);background:#2680d91a;border:1px solid hsla(210,70%,50%,.2);border-radius:var(--radius-full);color:var(--primary-300);font-size:var(--text-sm);font-weight:600;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-6)}.section-title{font-size:var(--text-4xl);font-weight:800;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-4)}.section-desc{font-size:var(--text-lg);color:var(--text-secondary);line-height:var(--leading-relaxed)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-full);letter-spacing:var(--tracking-wide)}.badge-primary{background:#2680d926;color:var(--primary-300);border:1px solid hsla(210,70%,50%,.25)}.badge-accent{background:#e8a53026;color:var(--accent-300);border:1px solid hsla(38,80%,55%,.25)}.badge-success{background:#2eb86726;color:#47d181;border:1px solid hsla(145,60%,45%,.25)}.footer{background:var(--neutral-950);border-top:1px solid var(--border-subtle);padding-block:var(--space-16) var(--space-8)}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:var(--space-12);margin-bottom:var(--space-12)}.footer-brand p{color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin-top:var(--space-4);max-width:300px}.footer-col h4{font-size:var(--text-sm);font-weight:700;color:var(--text-primary);letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-bottom:var(--space-4)}.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.footer-col a{color:var(--text-secondary);font-size:var(--text-sm);transition:color var(--duration-fast) var(--ease-out)}.footer-col a:hover{color:var(--accent-400)}.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-8);border-top:1px solid var(--border-subtle);color:var(--text-tertiary);font-size:var(--text-sm)}.footer-social{display:flex;gap:var(--space-3)}.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-lg);transition:all var(--duration-fast) var(--ease-out)}.footer-social a:hover{color:var(--accent-400);border-color:var(--accent-400);transform:translateY(-2px)}@media(max-width:1024px){.section-title{font-size:var(--text-3xl)}.footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-8)}}@media(max-width:768px){:root{--nav-height: 64px}.nav-links{display:none}.nav-toggle{display:block}.section-padding{padding-block:var(--space-16)}.section-title{font-size:var(--text-2xl)}.section-header{margin-bottom:var(--space-10)}.footer-grid{grid-template-columns:1fr;gap:var(--space-8)}.footer-bottom{flex-direction:column;gap:var(--space-4);text-align:center}.container{padding-inline:var(--space-4)}}