:root{--color-primary: hsl(262, 83%, 58%);--color-primary-light: hsl(262, 83%, 68%);--color-primary-dark: hsl(262, 83%, 48%);--color-secondary: hsl(195, 100%, 50%);--color-success: hsl(142, 70%, 50%);--color-error: hsl(0, 84%, 60%);--color-bg-page: hsl(240, 10%, 4%);--color-bg-sidebar: hsl(240, 10%, 6%);--color-bg-secondary: hsl(240, 8%, 8%);--color-bg-card: hsl(240, 8%, 10%);--color-bg-elevated: hsl(240, 6%, 15%);--color-bg-code: hsl(240, 8%, 2%);--color-bg-header: hsla(240, 10%, 4%, .85);--color-text-main: hsl(0, 0%, 98%);--color-text-muted: hsl(0, 0%, 75%);--color-text-dim: hsl(0, 0%, 55%);--color-text-tertiary: hsl(0, 0%, 40%);--color-border: hsla(0, 0%, 100%, .08);--color-border-light: hsla(0, 0%, 100%, .15);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-xs: clamp(.2rem, 1vw, .25rem);--space-sm: clamp(.4rem, 2vw, .5rem);--space-md: clamp(.75rem, 4vw, 1rem);--space-lg: clamp(1rem, 6vw, 1.5rem);--space-xl: clamp(1.5rem, 8vw, 2rem);--space-2xl: clamp(2rem, 10vw, 3rem);--space-3xl: clamp(3rem, 12vw, 4rem);--header-height: 64px;--sidebar-width: 280px;--max-content-width: 1200px}@media(min-width:1024px){:root{--header-height: 72px;--sidebar-width: 300px}}:root{--font-size-xs: clamp(.65rem, 2vw, .75rem);--font-size-sm: clamp(.75rem, 2.5vw, .875rem);--font-size-base: clamp(.85rem, 3vw, 1rem);--font-size-lg: clamp(.95rem, 3.5vw, 1.125rem);--font-size-xl: clamp(1rem, 4.5vw, 1.25rem);--font-size-2xl: clamp(1.2rem, 6vw, 1.5rem);--font-size-3xl: clamp(1.4rem, 8vw, 1.875rem);--font-size-4xl: clamp(1.75rem, 10vw, 2.25rem);--font-weight-normal: 400;--font-weight-medium: 510;--font-weight-semibold: 620;--font-weight-bold: 750;--font-weight-extrabold: 850;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .4);--shadow-md: 0 8px 16px -4px rgba(0, 0, 0, .5);--shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .7);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-smooth: .4s cubic-bezier(.4, 0, .2, 1);--transition: var(--transition-base)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth}body{background-color:var(--color-bg-page);color:var(--color-text-main);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}.doc-layout{display:flex;flex-direction:column;min-height:100vh}.header{height:var(--header-height);position:fixed;top:0;left:0;right:0;z-index:100}.main-wrapper{display:flex;margin-top:var(--header-height);flex:1}.sidebar{width:var(--sidebar-width);position:fixed;top:var(--header-height);bottom:0;left:0;background:var(--color-bg-sidebar);border-right:1px solid var(--color-border);overflow-y:auto;padding:2rem 0;z-index:90;transition:transform var(--transition-smooth);scrollbar-width:thin;scrollbar-color:var(--color-bg-elevated) transparent}@media(max-width:1024px){.sidebar{transform:translate(-100%);z-index:1000;box-shadow:20px 0 50px #00000080}.sidebar.open{transform:translate(0)}}.content-area{flex:1;margin-left:var(--sidebar-width);padding:var(--space-2xl) var(--space-3xl);max-width:100%;transition:margin-left var(--transition-smooth)}@media(max-width:1024px){.content-area{margin-left:0;padding:var(--space-md) var(--space-sm)}}@media(max-width:320px){.content-area{padding:var(--space-sm) var(--space-xs)}}.content-container{max-width:var(--max-content-width);margin:0 auto}h1{font-size:clamp(1.5rem,8vw,4rem);font-weight:var(--font-weight-extrabold);margin-bottom:var(--space-md);color:var(--color-text-main);line-height:1.1;overflow-wrap:break-word;word-break:break-word}@media(max-width:480px){h1{padding:0 1rem}}h2{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);margin:var(--space-xl) 0 var(--space-md);padding-bottom:var(--space-sm);border-bottom:1px solid var(--color-border);letter-spacing:-.03em;color:var(--color-text-main)}@media(min-width:768px){h2{font-size:var(--font-size-3xl);margin:4rem 0 1.5rem;padding-bottom:1rem}}@media(max-width:480px){h2{padding-left:1rem;padding-right:1rem}}h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:var(--space-lg) 0 var(--space-sm);color:var(--color-text-main);letter-spacing:-.01em}@media(min-width:768px){h3{margin:3rem 0 1.25rem}}@media(max-width:480px){h3{padding:0 1rem}}p{margin-bottom:var(--space-md);color:var(--color-text-muted);font-size:var(--font-size-base);max-width:75ch;line-height:1.6}@media(min-width:768px){p{margin-bottom:1.5rem;line-height:1.7}}@media(max-width:480px){p{padding:0 1rem}}code{font-family:JetBrains Mono,monospace;background:var(--color-bg-code);border:1px solid var(--color-border);padding:.2rem .5rem;border-radius:var(--radius-sm);font-size:.85em;color:var(--color-secondary)}.nav-section{margin-bottom:2.5rem}.nav-label{padding:0 1.5rem .75rem;font-size:var(--font-size-xs);font-weight:var(--font-weight-extrabold);text-transform:uppercase;color:var(--color-text-dim);letter-spacing:.15em}@media(min-width:768px){.nav-label{padding:0 2rem .75rem}}.nav-link{display:flex;align-items:center;padding:.65rem 1.5rem;color:var(--color-text-muted);text-decoration:none;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:var(--transition-base);border-left:3px solid transparent;margin-bottom:2px}@media(min-width:768px){.nav-link{padding:.65rem 2rem}}.nav-link:hover{color:#fff;background:linear-gradient(to right,rgba(255,255,255,.04),transparent)}.nav-link.active{color:var(--color-primary-light);background:linear-gradient(to right,rgba(124,58,237,.1),transparent);border-left-color:var(--color-primary);font-weight:var(--font-weight-bold)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:0}@media(min-width:480px){.card{padding:1.25rem}}@media(min-width:768px){.card{padding:2.5rem}}.card{margin-bottom:2rem;box-shadow:var(--shadow-md);transition:var(--transition-base)}.card:hover{border-color:var(--color-border-light);box-shadow:var(--shadow-lg)}.tip{border-left:4px solid var(--color-primary);background:linear-gradient(to right,rgba(139,92,246,.08),transparent);padding:1rem;border-radius:0 var(--radius-md) var(--radius-md) 0;margin:1.5rem 0;font-size:.95rem;line-height:1.6}@media(min-width:768px){.tip{padding:1.5rem 2rem;margin:2.5rem 0;font-size:1rem}}.tip strong{color:var(--color-primary-light);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;display:block;margin-bottom:.25rem}.btn{padding:var(--space-sm) var(--space-md);min-height:40px}@media(min-width:480px){.btn{padding:.7rem 1.25rem;min-height:44px}}@media(min-width:768px){.btn{padding:.8rem 1.75rem}}.btn{border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:var(--transition-base);border:none;font-size:var(--font-size-sm);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);letter-spacing:.01em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;appearance:none}@media(max-width:480px){.btn{width:100%;margin:var(--space-xs) 0}}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:0 4px 12px #7c3aed33}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed66}.btn-outline{background:#ffffff05;border:1px solid var(--color-border);color:var(--color-text-main)}.btn-outline:hover{background:#ffffff0d;border-color:var(--color-border-light);transform:translateY(-2px)}@media(max-width:1024px){.sidebar{transform:translate(-100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}}kbd{background:var(--color-bg-code);border:1px solid var(--color-border-light);border-radius:4px;padding:2px 6px;font-family:inherit;font-size:.8rem;box-shadow:0 2px 0 var(--color-border);color:var(--color-secondary)}.shortcut-list{list-style:none}.shortcut-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px dashed var(--color-border);font-size:.95rem}.shortcut-list li:last-child{border-bottom:none}.gap-md{gap:.5rem}@media(min-width:480px){.gap-md{gap:1rem}}.mt-xl{margin-top:2rem}.container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-lg)}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.grid{display:grid}.inline-flex{display:inline-flex}.inline-block{display:inline-block}.block{display:block}.hidden{display:none}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-2xl{gap:var(--space-2xl)}.p-0{padding:0}.py-xs{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.py-md{padding-top:var(--space-md)}.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.py-2xl{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}.py-3xl{padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}.m-0{margin:0}.mt-auto{margin-top:auto}.mt-2xl{margin-top:var(--space-2xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.mb-3xl{margin-bottom:var(--space-3xl)}.text-center{text-align:center}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.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)}.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)}.font-extrabold{font-weight:var(--font-weight-extrabold)}.font-mono{font-family:var(--font-family-mono)}.w-full{width:100%}.h-full{height:100%}.overflow-hidden{overflow:hidden}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.transition-all{transition:all var(--transition-base)}.glass{background:#ffffff0d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.glass-strong{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.animate-fade-in{animation:fadeIn var(--transition-base) ease-out}.animate-slide-in-left{animation:slideInLeft var(--transition-base) ease-out}.animate-slide-in-right{animation:slideInRight var(--transition-base) ease-out}::-webkit-scrollbar{width:6px;height:6px}*{scrollbar-width:thin;scrollbar-color:var(--color-bg-elevated) transparent}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-bg-elevated);border-radius:var(--radius-full);border:2px solid var(--color-bg-page)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-light)}@media(max-width:768px){:root{--font-size-4xl: 2rem;--font-size-3xl: 1.75rem;--font-size-2xl: 1.5rem}}
