:root{--bg-black: #08090a;--bg-panel: #0f1011;--bg-surface: #191a1b;--bg-elevated: #28282c;--text-primary: #f7f8f8;--text-secondary: #d0d6e0;--text-tertiary: #8a8f98;--text-quaternary: #62666d;--brand: #5e6ad2;--accent: #7170ff;--accent-hover: #828fff;--border-solid: #23252a;--border-subtle: rgba(255,255,255,.05);--border-standard: rgba(255,255,255,.08);--btn-bg: rgba(255,255,255,.02);--btn-bg-hover: rgba(255,255,255,.05);--green: #27a644;--emerald: #10b981;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-pill: 9999px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;font-size:16px}body{font-family:Inter,-apple-system,system-ui,Segoe UI,Roboto,sans-serif;font-feature-settings:"cv01","ss03";background:var(--bg-black);color:var(--text-secondary);line-height:1.6;-webkit-font-smoothing:antialiased}nav{position:sticky;top:0;z-index:100;background:#0f1011d9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);padding:0 24px}.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:8px}.nav-logo{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px;white-space:nowrap}.nav-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.nav-links::-webkit-scrollbar{display:none}.nav-links a{font-size:13px;font-weight:500;color:var(--text-tertiary);text-decoration:none;padding:6px 12px;border-radius:var(--radius-md);white-space:nowrap;transition:color .15s,background .15s}.nav-links a:hover{color:var(--text-primary);background:var(--btn-bg-hover)}.nav-feedback{background:var(--brand)!important;border:none!important;color:#fff!important;border-radius:var(--radius-md)!important;padding:6px 14px!important;font-weight:600!important}.nav-feedback:hover{background:var(--accent-hover)!important}.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:none;border:none;cursor:pointer;z-index:110}.hamburger span{display:block;width:100%;height:2px;background:var(--text-secondary);border-radius:2px;transition:transform .25s,opacity .2s}.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger.open span:nth-child(2){opacity:0}.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{max-width:1200px;margin:0 auto;padding:100px 24px 80px;text-align:center}.hero h1{font-size:64px;font-weight:600;color:var(--text-primary);line-height:1;letter-spacing:-1.408px;margin-bottom:20px}.hero h1 span{background:linear-gradient(135deg,var(--accent),var(--accent-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:18px;font-weight:400;color:var(--text-tertiary);line-height:1.6;max-width:600px;margin:0 auto;letter-spacing:-.165px}section{scroll-margin-top:72px;padding:80px 24px;border-top:1px solid var(--border-subtle)}.section-inner{max-width:900px;margin:0 auto}.phase-header{cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:8px 0 20px;-webkit-user-select:none;user-select:none}.phase-header:hover .phase-title{color:var(--accent-hover)}.phase-header-text{flex:1;min-width:0}.phase-label{display:inline-block;font-size:14px;font-weight:600;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px}.phase-title{font-size:48px;font-weight:700;color:var(--text-primary);line-height:1.1;letter-spacing:-1.2px;margin:0 0 16px;transition:color .2s}.phase-subtitle{font-size:17px;color:var(--text-tertiary);line-height:1.55;max-width:640px}.phase-chevron{width:32px;height:32px;flex-shrink:0;color:var(--text-quaternary);transition:transform .35s cubic-bezier(.4,0,.2,1);margin-top:44px}.phase-header.collapsed .phase-chevron{transform:rotate(-90deg)}.phase-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}.phase-content.collapsed{grid-template-rows:0fr}.phase-content-inner{overflow:hidden}section h3{font-size:20px;font-weight:600;color:var(--text-primary);line-height:1.3;letter-spacing:-.24px;margin-top:48px;margin-bottom:12px}section h3:first-child{margin-top:0}section h4{font-size:16px;font-weight:600;color:var(--text-primary);margin-top:32px;margin-bottom:8px}.link-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}.link-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-secondary);background:var(--btn-bg);border:1px solid var(--border-solid);border-radius:var(--radius-md);padding:8px 16px;text-decoration:none;transition:all .15s;white-space:nowrap}.link-btn:hover{color:var(--text-primary);background:var(--btn-bg-hover);border-color:#ffffff1f}.link-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.link-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.link-btn svg{width:14px;height:14px;opacity:.6}.code-block{position:relative;background:var(--btn-bg);border:1px solid var(--border-standard);border-radius:var(--radius-lg);margin-bottom:20px}.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border-subtle);background:#ffffff03;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.code-block-title{font-size:13px;font-weight:500;color:var(--text-tertiary)}.copy-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;font-family:inherit;color:var(--text-quaternary);background:#ffffff0a;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px 10px;cursor:pointer;transition:all .15s}.copy-btn:hover{color:var(--text-secondary);background:var(--btn-bg-hover);border-color:var(--border-standard)}.copy-btn.copied{color:var(--emerald);border-color:#10b9814d}.code-block pre{max-height:320px;overflow-y:auto;padding:16px 20px;margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13.5px;line-height:1.65;color:var(--text-secondary);white-space:pre-wrap;word-wrap:break-word;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}.code-block pre::-webkit-scrollbar{width:6px}.code-block pre::-webkit-scrollbar-track{background:transparent}.code-block pre::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}.tabs{display:flex;gap:8px;margin-bottom:0;border-bottom:1px solid var(--border-standard)}.tab-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:500;color:var(--text-tertiary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all .15s;white-space:nowrap}.tab-btn:hover{color:var(--text-secondary);background:var(--btn-bg-hover)}.tab-btn.active{color:var(--text-primary);border-bottom-color:var(--accent)}.tab-icon{font-size:18px}.tab-label{font-weight:600;color:inherit}.tab-title{color:inherit;opacity:.7}.tab-btn.active .tab-title{opacity:1}.tab-panel{padding:24px 0 0}.tab-desc{font-size:15px;color:var(--text-tertiary);line-height:1.6;margin-bottom:20px}@media(max-width:640px){.tabs{flex-direction:column;gap:0}.tab-btn{border-bottom:none;border-left:2px solid transparent;margin-bottom:0;padding:10px 16px}.tab-btn.active{border-left-color:var(--accent)}}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:32px}.card{background:var(--btn-bg);border:1px solid var(--border-standard);border-radius:var(--radius-lg);padding:24px;transition:background .15s}.card:hover{background:#ffffff09}.card-icon{font-size:28px;margin-bottom:12px}.card h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.card p{font-size:14px;color:var(--text-tertiary);line-height:1.55}.info-box{background:#5e6ad20f;border:1px solid rgba(94,106,210,.15);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:24px}.info-box h4{font-size:15px;font-weight:600;color:var(--accent);margin:0 0 8px}.info-box p{font-size:14px;color:var(--text-secondary);line-height:1.6}.table-wrapper{overflow-x:auto;margin-bottom:24px;border:1px solid var(--border-standard);border-radius:var(--radius-lg)}table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;font-weight:600;color:var(--text-primary);background:#ffffff08;padding:12px 16px;border-bottom:1px solid var(--border-standard);white-space:nowrap}td{padding:10px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary);vertical-align:top;line-height:1.5}tr:last-child td{border-bottom:none}tr:hover td{background:#ffffff04}.debug-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0 40px}.debug-card{background:var(--btn-bg);border:1px solid var(--border-standard);border-radius:var(--radius-lg);padding:24px 20px;text-align:center}.debug-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;font-size:16px;font-weight:700;color:var(--brand);background:#5e6ad21a;border-radius:50%;margin-bottom:12px}.debug-card h4{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.debug-card p{font-size:13px;color:var(--text-tertiary);line-height:1.5}.debug-grid.cols-3{grid-template-columns:repeat(3,1fr)}.steps{counter-reset:step;margin:20px 0 32px;padding-left:0;list-style:none}.steps li{counter-increment:step;position:relative;padding-left:40px;margin-bottom:16px;font-size:15px;color:var(--text-secondary);line-height:1.55}.steps li:before{content:counter(step);position:absolute;left:0;top:1px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;font-size:13px;font-weight:600;color:var(--accent);background:#7170ff1a;border-radius:50%}.divider{border:none;border-top:1px solid var(--border-subtle);margin:48px 0}.checklist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.checklist li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-secondary)}.checklist li:before{content:"☐";font-size:18px;color:var(--accent);flex-shrink:0}.accordion{background:var(--btn-bg);border:1px solid var(--border-standard);border-radius:var(--radius-lg);margin-top:48px;margin-bottom:12px}.accordion-summary{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:16px;font-weight:600;color:var(--text-primary);cursor:pointer;list-style:none;transition:color .15s}.accordion-summary::-webkit-details-marker{display:none}.accordion-summary:after{content:"+";font-size:20px;font-weight:400;color:var(--text-quaternary);transition:transform .2s}.accordion[open] .accordion-summary:after{content:"−"}.accordion-summary:hover{color:var(--accent-hover)}.accordion-body{padding:0 20px 20px}.accordion-body h4{margin-top:20px}.accordion-body h4:first-child{margin-top:0}footer{border-top:1px solid var(--border-subtle);padding:40px 24px;text-align:center;font-size:13px;color:var(--text-quaternary)}@media(max-width:768px){.hero{padding:60px 20px 48px}.hero h1{font-size:36px;letter-spacing:-.8px}.hero p{font-size:16px}section{padding:48px 20px}.phase-title{font-size:32px;letter-spacing:-.8px}.phase-chevron{margin-top:28px;width:26px;height:26px}.phase-subtitle{font-size:15px}.card-grid{grid-template-columns:1fr}.debug-grid{grid-template-columns:repeat(2,1fr)}.debug-grid.cols-3{grid-template-columns:repeat(3,1fr)}.nav-logo{font-size:13px}.link-group{gap:8px}.link-btn{font-size:13px;padding:7px 12px}.hamburger{display:flex}.nav-links{display:none;position:fixed;right:0;bottom:0;left:0;top:56px;flex-direction:column;gap:0;background:#0f1011f7;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:16px 24px;overflow-y:auto;z-index:100}.nav-links.open{display:flex}.nav-links a{font-size:16px;padding:14px 0;border-bottom:1px solid var(--border-subtle);border-radius:0;white-space:normal}.nav-links a:last-child{border-bottom:none}.nav-feedback{margin-top:8px;text-align:center;border-radius:var(--radius-md)!important;padding:12px 14px!important;border-bottom:none!important}}@media(max-width:480px){.hero h1{font-size:28px}.phase-title{font-size:26px}.debug-grid,.debug-grid.cols-3{grid-template-columns:1fr}}
