@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Mono:wght@400;500;600&family=Roboto:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";:root{--color-gray-white: #FFFFFF;--color-gray-05: #F5F5F5;--color-gray-10: #EBEBEB;--color-gray-20: #DEDEDE;--color-gray-30: #C7C7C7;--color-gray-40: #A8A8A8;--color-gray-50: #757575;--color-gray-60: #5C5C5C;--color-gray-70: #404040;--color-gray-80: #323232;--color-gray-90: #222222;--color-gray-95: #111111;--color-blue-10: #E0F1FF;--color-blue-20: #BDE1FF;--color-blue-30: #9CCFFF;--color-blue-40: #64B0FC;--color-blue-50: #2E8BF6;--color-blue-60: #045DD2;--color-blue-70: #014492;--color-blue-80: #012E65;--color-blue-90: #001C3D;--color-green-10: #E1F9EF;--color-green-20: #C2F5DE;--color-green-30: #92EDC3;--color-green-40: #4BE2AB;--color-green-50: #14CC95;--color-green-60: #06A37E;--color-green-70: #007057;--color-green-80: #044D3B;--color-green-90: #033025;--color-red-05: #FFF2F2;--color-red-10: #FFE5E5;--color-red-20: #FACECC;--color-red-30: #FAAFAE;--color-red-40: #FF8A8C;--color-red-50: #F56166;--color-red-60: #D03541;--color-red-70: #AC1527;--color-red-80: #6B0B19;--color-red-90: #400710;--color-orange-10: #FCF3E3;--color-orange-20: #FAE7C7;--color-orange-30: #F9D39A;--color-orange-40: #FFBA6B;--color-orange-50: #FC912C;--color-orange-60: #F17204;--color-orange-70: #AB4307;--color-orange-80: #6F2806;--color-orange-90: #401602;--color-yellow-10: #FFFCE6;--color-yellow-50: #FEE65E;--color-yellow-60: #FFD700;--color-yellow-70: #D3B200;--color-purple-10: #EEEBFF;--color-purple-20: #DCD6FF;--color-purple-30: #C4BAFC;--color-purple-40: #AFA2F6;--color-purple-50: #927CF4;--color-purple-60: #694DDB;--color-purple-70: #5030BB;--color-purple-80: #3A1F93;--color-purple-90: #291268;--color-fg-action: var(--color-blue-60);--color-fg-destructive: var(--color-red-60);--color-fg-alert: var(--color-orange-70);--color-fg-success: var(--color-green-70);--color-fg-live-stream: var(--color-purple-70);--color-fg-primary: var(--color-gray-90);--color-fg-secondary: var(--color-gray-60);--color-fg-disabled: var(--color-gray-40);--color-bg-action: var(--color-blue-60);--color-bg-alert: var(--color-orange-50);--color-bg-destructive: var(--color-red-60);--color-bg-live-stream: var(--color-purple-70);--color-bg-success: var(--color-green-70);--surface-1: var(--color-gray-10);--surface-2: var(--color-gray-05);--surface-3: var(--color-gray-white);--surface-4: var(--color-gray-white);--font-family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Roboto Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;--font-family-non-latin: "Noto Sans", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-base: 1.5;--line-height-relaxed: 1.75;--spacing-xxs: 4px;--spacing-xs: 8px;--spacing-s: 12px;--spacing-m: 16px;--spacing-l: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--spacing-1: var(--spacing-xxs);--spacing-2: var(--spacing-xs);--spacing-3: var(--spacing-s);--spacing-4: var(--spacing-m);--spacing-6: var(--spacing-l);--spacing-8: var(--spacing-xl);--spacing-12: var(--spacing-xxl);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal: 400;--z-popover: 500;--z-tooltip: 600;--header-height: 64px;--sidebar-width: 280px;--sidebar-width-collapsed: 64px;--footer-height: 56px;--content-max-width: 1200px;--bg-primary: var(--surface-3);--bg-secondary: var(--surface-2);--bg-tertiary: var(--surface-1);--text-primary: var(--color-fg-primary);--text-secondary: var(--color-fg-secondary);--text-disabled: var(--color-fg-disabled);--border-color: var(--color-gray-20);--border-color-hover: var(--color-gray-30);--color-action: var(--color-fg-action);--color-action-hover: var(--color-blue-70);--color-success: var(--color-fg-success);--color-warning: var(--color-fg-alert);--color-error: var(--color-fg-destructive)}@media(prefers-color-scheme:dark){:root{--surface-1: var(--color-gray-95);--surface-2: var(--color-gray-90);--surface-3: var(--color-gray-80);--surface-4: var(--color-gray-70);--bg-primary: var(--surface-2);--bg-secondary: var(--surface-1);--bg-tertiary: var(--surface-3);--text-primary: var(--color-gray-05);--text-secondary: var(--color-gray-40);--text-disabled: var(--color-gray-60);--border-color: var(--color-gray-70);--border-color-hover: var(--color-gray-60);--color-fg-primary: var(--color-gray-05);--color-fg-secondary: var(--color-gray-40);--color-fg-disabled: var(--color-gray-60)}}.dark-theme{--surface-1: var(--color-gray-95);--surface-2: var(--color-gray-90);--surface-3: var(--color-gray-80);--surface-4: var(--color-gray-70);--bg-primary: var(--surface-2);--bg-secondary: var(--surface-1);--bg-tertiary: var(--surface-3);--text-primary: var(--color-gray-05);--text-secondary: var(--color-gray-40);--text-disabled: var(--color-gray-60);--border-color: var(--color-gray-70);--border-color-hover: var(--color-gray-60);--color-fg-primary: var(--color-gray-05);--color-fg-secondary: var(--color-gray-40);--color-fg-disabled: var(--color-gray-60)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{min-height:100vh;font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html:focus-within{scroll-behavior:smooth}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate;min-height:100vh}ul,ol{list-style:none;padding:0}a{color:var(--color-action);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-action-hover)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--text-primary)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}code,pre{font-family:var(--font-family-mono)}button{cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.6}:focus-visible{outline:2px solid var(--color-action);outline-offset:2px}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.hidden{display:none}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.gap-xxs{gap:var(--spacing-xxs)}.gap-xs{gap:var(--spacing-xs)}.gap-s{gap:var(--spacing-s)}.gap-m{gap:var(--spacing-m)}.gap-l{gap:var(--spacing-l)}.gap-xl{gap:var(--spacing-xl)}.gap-xxl{gap:var(--spacing-xxl)}.gap-1{gap:var(--spacing-xxs)}.gap-2{gap:var(--spacing-xs)}.gap-3{gap:var(--spacing-s)}.gap-4{gap:var(--spacing-m)}.gap-6{gap:var(--spacing-l)}.gap-8{gap:var(--spacing-xl)}.p-0{padding:0}.p-xxs{padding:var(--spacing-xxs)}.p-xs{padding:var(--spacing-xs)}.p-s{padding:var(--spacing-s)}.p-m{padding:var(--spacing-m)}.p-l{padding:var(--spacing-l)}.p-xl{padding:var(--spacing-xl)}.p-xxl{padding:var(--spacing-xxl)}.px-xs{padding-left:var(--spacing-xs);padding-right:var(--spacing-xs)}.px-s{padding-left:var(--spacing-s);padding-right:var(--spacing-s)}.px-m{padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.px-l{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}.px-xl{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.py-xs{padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.py-s{padding-top:var(--spacing-s);padding-bottom:var(--spacing-s)}.py-m{padding-top:var(--spacing-m);padding-bottom:var(--spacing-m)}.py-l{padding-top:var(--spacing-l);padding-bottom:var(--spacing-l)}.py-xl{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-xl)}.m-0{margin:0}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.mb-xxs{margin-bottom:var(--spacing-xxs)}.mb-xs{margin-bottom:var(--spacing-xs)}.mb-s{margin-bottom:var(--spacing-s)}.mb-m{margin-bottom:var(--spacing-m)}.mb-l{margin-bottom:var(--spacing-l)}.mb-xl{margin-bottom:var(--spacing-xl)}.mb-xxl{margin-bottom:var(--spacing-xxl)}.mt-xxs{margin-top:var(--spacing-xxs)}.mt-xs{margin-top:var(--spacing-xs)}.mt-s{margin-top:var(--spacing-s)}.mt-m{margin-top:var(--spacing-m)}.mt-l{margin-top:var(--spacing-l)}.mt-xl{margin-top:var(--spacing-xl)}.mt-xxl{margin-top:var(--spacing-xxl)}.p-1{padding:var(--spacing-xxs)}.p-2{padding:var(--spacing-xs)}.p-3{padding:var(--spacing-s)}.p-4{padding:var(--spacing-m)}.p-6{padding:var(--spacing-l)}.p-8{padding:var(--spacing-xl)}.mb-1{margin-bottom:var(--spacing-xxs)}.mb-2{margin-bottom:var(--spacing-xs)}.mb-3{margin-bottom:var(--spacing-s)}.mb-4{margin-bottom:var(--spacing-m)}.mb-6{margin-bottom:var(--spacing-l)}.mb-8{margin-bottom:var(--spacing-xl)}.mt-4{margin-top:var(--spacing-m)}.mt-6{margin-top:var(--spacing-l)}.mt-8{margin-top:var(--spacing-xl)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-disabled{color:var(--text-disabled)}.text-action{color:var(--color-action)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-mono{font-family:var(--font-family-mono)}.border{border:1px solid var(--border-color)}.border-0{border:none}.rounded-xs{border-radius:var(--radius-xs)}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-none{box-shadow:none}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-tertiary{background-color:var(--bg-tertiary)}.bg-action{background-color:var(--color-bg-action)}.bg-success{background-color:var(--color-bg-success)}.bg-alert{background-color:var(--color-bg-alert)}.bg-destructive{background-color:var(--color-bg-destructive)}.w-full{width:100%}.w-screen{width:100vw}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.visible{visibility:visible}.invisible{visibility:hidden}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.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}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-m);font-family:var(--font-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px;text-decoration:none;border:none;border-radius:var(--radius-xs);cursor:pointer;transition:all var(--transition-base)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background-color:var(--color-bg-action);color:var(--color-gray-white)}.btn-primary:hover:not(:disabled){background-color:var(--color-action-hover)}.btn-primary:active:not(:disabled){background-color:var(--color-blue-80)}.btn-secondary{background-color:var(--color-gray-20);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background-color:var(--color-gray-30)}.btn-secondary:active:not(:disabled){background-color:var(--color-gray-40)}.btn-flat{background-color:transparent;color:var(--color-action);padding:var(--spacing-xs) var(--spacing-s)}.btn-flat:hover:not(:disabled){background-color:var(--color-blue-10)}.btn-flat:active:not(:disabled){background-color:var(--color-blue-20)}.btn-destructive{background-color:var(--color-bg-destructive);color:var(--color-gray-white)}.btn-destructive:hover:not(:disabled){background-color:var(--color-red-70)}.btn-success{background-color:var(--color-bg-success);color:var(--color-gray-white)}.btn-success:hover:not(:disabled){background-color:var(--color-green-80)}.btn-sm{padding:var(--spacing-xxs) var(--spacing-xs);font-size:var(--font-size-xs)}.btn-lg{padding:var(--spacing-s) var(--spacing-l);font-size:var(--font-size-base)}.layout{display:flex;flex-direction:column;min-height:100vh}.header{background-color:var(--color-gray-white);color:var(--color-gray-white);padding:var(--spacing-m) var(--spacing-xl);box-shadow:var(--shadow-md);height:var(--header-height);display:flex;align-items:center}.header-content{display:flex;align-items:center;gap:var(--spacing-m);max-width:1400px;margin:0 auto;width:100%}.sidebar-toggle{background:none;border:none;color:var(--color-gray-white);font-size:var(--font-size-2xl);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-xs);transition:background-color var(--transition-base);display:flex;align-items:center;justify-content:center;width:40px;height:40px}.sidebar-toggle:hover{background-color:#ffffff1a}.header-title{text-decoration:none;color:var(--color-gray-white)}.header-title h1{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:inherit}.main-container{display:flex;flex:1;max-width:1400px;margin:0 auto;width:100%}.sidebar{width:var(--sidebar-width);background-color:var(--surface-2);padding:var(--spacing-l);overflow-y:auto;border-right:1px solid var(--border-color);transition:transform var(--transition-slow)}.sidebar.closed{transform:translate(-100%);position:absolute}.sidebar-nav{display:flex;flex-direction:column;gap:var(--spacing-xs)}.nav-link{padding:var(--spacing-s) var(--spacing-m);text-decoration:none;color:var(--text-primary);border-radius:var(--radius-xs);transition:all var(--transition-base);display:block;font-size:var(--font-size-sm);border-left:3px solid transparent}.nav-link:hover{background-color:var(--color-blue-10);color:var(--color-action)}.nav-link.active{background-color:var(--color-blue-10);color:var(--color-action);font-weight:var(--font-weight-medium);border-left-color:var(--color-action)}.nav-category{margin-top:var(--spacing-m)}.category-title{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--text-secondary);margin:0 0 var(--spacing-xs) var(--spacing-m);letter-spacing:.5px}.content{flex:1;padding:var(--spacing-xl);overflow-y:auto;background-color:var(--bg-primary)}.footer{background-color:var(--surface-2);padding:var(--spacing-m) var(--spacing-xl);text-align:center;border-top:1px solid var(--border-color);color:var(--text-secondary);height:var(--footer-height);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-m)}.footer p{margin:0;font-size:var(--font-size-sm)}.update-status{background:var(--color-gray-20);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:var(--spacing-xs) var(--spacing-m);font-size:var(--font-size-xs);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;gap:var(--spacing-xs)}.update-status:hover:not(:disabled){background:var(--color-gray-30)}.update-status:disabled{cursor:wait;opacity:.7}.update-status.update-available{background:var(--color-success-light, #dcfce7);border-color:var(--color-success, #22c55e);color:var(--color-success-dark, #166534);animation:pulse-update 2s infinite}.update-status.updating{background:var(--color-blue-10);border-color:var(--color-action);color:var(--color-action)}.update-action{font-weight:var(--font-weight-medium)}@keyframes pulse-update{0%,to{opacity:1}50%{opacity:.7}}@media(max-width:768px){.sidebar{position:fixed;left:0;top:var(--header-height);bottom:0;z-index:var(--z-dropdown);box-shadow:var(--shadow-lg)}.sidebar.closed{transform:translate(-100%)}.content,.header{padding:var(--spacing-m)}}.error-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;padding:var(--spacing-xl);text-align:center}.error-icon{font-size:var(--spacing-xxl);margin-bottom:var(--spacing-m)}.error-fallback h1{color:var(--text-primary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-2xl)}.error-message{color:var(--text-secondary);margin-bottom:var(--spacing-l);max-width:400px}.error-actions{display:flex;gap:var(--spacing-m);flex-wrap:wrap;justify-content:center}.error-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-m);border-radius:var(--radius-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px;cursor:pointer;text-decoration:none;transition:all var(--transition-base)}.error-button.primary{background:var(--color-bg-action);color:var(--color-gray-white);border:none}.error-button.primary:hover{background:var(--color-action-hover)}.error-button.secondary{background:var(--color-gray-20);color:var(--text-primary);border:none}.error-button.secondary:hover{background:var(--color-gray-30)}.error-details{margin-top:var(--spacing-xl);width:100%;max-width:600px;text-align:left}.error-details summary{cursor:pointer;color:var(--text-secondary);margin-bottom:var(--spacing-xs);font-size:var(--font-size-sm)}.error-details pre{background:var(--surface-2);padding:var(--spacing-m);border-radius:var(--radius-sm);overflow-x:auto;font-size:var(--font-size-xs);color:var(--color-error);font-family:var(--font-family-mono)}.home{max-width:900px;margin:0 auto}.hero{text-align:center;padding:var(--spacing-xxl) 0;border-bottom:2px solid var(--border-color);margin-bottom:var(--spacing-xxl)}.hero h1{font-size:var(--font-size-4xl);margin:0 0 var(--spacing-m) 0;color:var(--text-primary)}.hero-subtitle{font-size:var(--font-size-xl);color:var(--text-secondary);margin:0 0 var(--spacing-l) 0}.offline-badge{display:inline-block;background-color:var(--color-bg-success);color:var(--color-gray-white);padding:var(--spacing-xs) var(--spacing-m);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.quick-start,.help-section,.features{margin-bottom:var(--spacing-xxl)}.quick-start h2,.help-section h2,.features h2{font-size:1.75rem;margin-bottom:var(--spacing-m);color:var(--text-primary)}.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-l);margin-top:var(--spacing-xl)}.article-card{background:var(--surface-3);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-l);text-decoration:none;color:var(--text-primary);transition:all var(--transition-base);position:relative;display:flex;flex-direction:column}.article-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-action);color:var(--text-primary)}.card-number{position:absolute;top:var(--spacing-m);right:var(--spacing-m);background-color:var(--color-action);color:var(--color-gray-white);width:var(--spacing-xl);height:var(--spacing-xl);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);font-size:var(--font-size-base)}.article-card h3{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-size-lg);color:var(--text-primary);padding-right:var(--spacing-xl)}.article-card p{margin:0;color:var(--text-secondary);font-size:var(--font-size-sm);flex:1}.card-badge{display:inline-block;margin-top:var(--spacing-s);font-size:var(--font-size-xs);color:var(--text-secondary);background-color:var(--surface-1);padding:var(--spacing-xxs) var(--spacing-xs);border-radius:var(--radius-xs)}.help-section{background-color:var(--color-orange-10);border-left:var(--spacing-xxs) solid var(--color-bg-alert);padding:var(--spacing-l);border-radius:var(--radius-xs)}.help-section h2{margin-top:0;color:var(--color-orange-80)}.inline-link{color:var(--color-action);text-decoration:underline;font-weight:var(--font-weight-semibold)}.inline-link:hover{color:var(--color-action-hover)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-xl);margin-top:var(--spacing-xl)}.feature{text-align:center}.feature-icon{font-size:var(--spacing-xxl);margin-bottom:var(--spacing-xs)}.feature h3{font-size:var(--font-size-lg);margin:var(--spacing-xs) 0;color:var(--text-primary)}.feature p{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}@media(max-width:768px){.hero h1{font-size:var(--font-size-3xl)}.hero-subtitle{font-size:var(--font-size-base)}.article-grid{grid-template-columns:1fr}.features-grid{grid-template-columns:repeat(2,1fr)}}.article{max-width:800px;margin:0 auto;padding-bottom:var(--spacing-xxl)}.article-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.back-button{background-color:var(--color-gray-20);border:none;padding:var(--spacing-xs) var(--spacing-m);border-radius:var(--radius-xs);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;transition:background-color var(--transition-base)}.back-button:hover{background-color:var(--color-gray-30)}.article-category{background-color:var(--color-bg-action);color:var(--color-gray-white);padding:var(--spacing-xxs) var(--spacing-s);border-radius:var(--radius-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:.5px;text-transform:uppercase}.article-title{font-size:var(--font-size-4xl);margin:0 0 var(--spacing-xl) 0;color:var(--text-primary);line-height:var(--line-height-tight);font-weight:var(--font-weight-bold)}.article-media{margin:var(--spacing-xl) 0;border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-md)}.article-image{width:100%;height:auto;display:block}.article-video{width:100%;height:auto;display:block;background-color:var(--color-gray-95)}.article-content{font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);color:var(--text-secondary)}.article-content p{margin:0 0 var(--spacing-l) 0}.article-content strong{font-weight:var(--font-weight-semibold);color:var(--text-primary)}.article-content h2{font-size:1.75rem;font-weight:var(--font-weight-bold);color:var(--text-primary);margin:var(--spacing-xxl) 0 var(--spacing-m) 0;padding-bottom:var(--spacing-xs);border-bottom:2px solid var(--border-color)}.article-content h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--text-primary);margin:var(--spacing-xl) 0 var(--spacing-s) 0}.article-content h4{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--text-secondary);margin:var(--spacing-l) 0 var(--spacing-xs) 0}.article-content ul,.article-content ol{margin:0 0 var(--spacing-l) 0;padding-left:var(--spacing-l)}.article-content ul{list-style-type:disc}.article-content ol{list-style-type:decimal}.article-content li{margin-bottom:var(--spacing-xs);line-height:1.6}.article-content li:last-child{margin-bottom:0}.article-content li ul,.article-content li ol{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.article-content .checkbox{font-size:1.1em;margin-right:var(--spacing-xxs)}.article-content .checkbox.checked{color:var(--color-success)}.article-content code{background-color:var(--surface-1);color:var(--color-red-60);padding:2px var(--spacing-xs);border-radius:var(--radius-xs);font-family:var(--font-family-mono);font-size:var(--font-size-sm)}.article-content .table-wrapper{overflow-x:auto;margin:var(--spacing-l) 0;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.article-content .markdown-table{width:100%;border-collapse:collapse;font-size:var(--font-size-base);background:var(--surface-3)}.article-content .markdown-table th,.article-content .markdown-table td{padding:var(--spacing-s) var(--spacing-m);text-align:left;border-bottom:1px solid var(--border-color)}.article-content .markdown-table th{background-color:var(--surface-2);font-weight:var(--font-weight-semibold);color:var(--text-primary);border-bottom:2px solid var(--color-gray-30)}.article-content .markdown-table tr:last-child td{border-bottom:none}.article-content .markdown-table tbody tr:hover td{background-color:var(--surface-2)}.article-content .markdown-table td strong{color:var(--color-action);font-weight:var(--font-weight-semibold)}.article-navigation{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-m);margin-top:var(--spacing-xxl);padding-top:var(--spacing-xl);border-top:2px solid var(--border-color)}.nav-button{display:flex;flex-direction:column;padding:var(--spacing-m);border:1px solid var(--border-color);border-radius:var(--radius-sm);text-decoration:none;color:var(--text-primary);transition:all var(--transition-base)}.nav-button:hover{border-color:var(--color-action);background-color:var(--surface-2);transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--text-primary)}.nav-button.prev{text-align:left}.nav-button.next{text-align:right;grid-column:2}.nav-label{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-xxs)}.nav-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);color:var(--text-primary)}.article-footer{text-align:center;margin-top:var(--spacing-xl)}.home-link-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background-color:var(--color-bg-action);color:var(--color-gray-white);padding:var(--spacing-xs) var(--spacing-m);border-radius:var(--radius-xs);text-decoration:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px;transition:background-color var(--transition-base)}.home-link-button:hover{background-color:var(--color-action-hover);color:var(--color-gray-white)}.article-not-found{text-align:center;padding:var(--spacing-xxl) var(--spacing-xl)}.article-not-found h1{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-m);color:var(--text-primary)}.article-not-found .button{display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-bg-action);color:var(--color-gray-white);padding:var(--spacing-xs) var(--spacing-m);border-radius:var(--radius-xs);text-decoration:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.5px;margin-top:var(--spacing-m);transition:background-color var(--transition-base)}.article-not-found .button:hover{background-color:var(--color-action-hover)}@media(max-width:768px){.article-title{font-size:var(--font-size-3xl)}.article-content{font-size:var(--font-size-base)}.article-content h2{font-size:var(--font-size-2xl)}.article-content h3{font-size:var(--font-size-xl)}.article-navigation{grid-template-columns:1fr}.nav-button.next{grid-column:1}}