html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}html{scroll-behavior:auto}}body{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.6;color:var(--color-ink);background:var(--color-paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-accent);text-decoration:none;transition:color .2s var(--ease-out)}a:hover{color:var(--color-accent-hover);text-decoration:none}code{font-family:var(--font-mono);font-size:.9em}img,svg{display:block;max-width:100%}.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}.reveal.is-in{opacity:1;transform:translateY(0)}.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--s-6);height:100%;display:flex;align-items:center;gap:var(--s-8)}.brand{font-weight:700;font-size:var(--fs-lg);color:var(--color-ink);white-space:nowrap;letter-spacing:-.02em}.brand:hover,.brand span{color:var(--color-accent)}.hamburger{display:none;background:none;border:none;cursor:pointer;width:32px;height:32px;position:relative;margin-left:auto}.hamburger span{display:block;width:20px;height:2px;background:var(--color-ink);border-radius:2px;position:absolute;left:6px;transition:transform .3s var(--ease-out),opacity .3s var(--ease-out)}.hamburger span:nth-child(1){top:10px}.hamburger span:nth-child(2){top:16px}.hamburger span:nth-child(3){top:22px}@media(max-width:768px){.hamburger{display:block}html[data-nav-open] .hamburger span:nth-child(1){transform:rotate(45deg);top:16px}html[data-nav-open] .hamburger span:nth-child(2){opacity:0}html[data-nav-open] .hamburger span:nth-child(3){transform:rotate(-45deg);top:16px}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);font-family:var(--font-body);font-weight:600;font-size:var(--fs-base);border-radius:var(--r-pill);padding:var(--s-3) var(--s-6);cursor:pointer;border:none;transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out),background .2s var(--ease-out);text-decoration:none}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:var(--color-accent);color:var(--color-ink);font-size:var(--fs-lg);padding:var(--s-4) var(--s-8)}.btn-primary:hover{color:var(--color-ink);box-shadow:0 8px 32px color-mix(in oklch,var(--color-accent) 30%,transparent)}.btn-ghost{background:transparent;color:var(--color-ink);border:1px solid var(--color-rule-strong);font-size:var(--fs-lg);padding:var(--s-4) var(--s-8)}.btn-ghost:hover{color:var(--color-ink);border-color:var(--color-accent);box-shadow:0 8px 32px color-mix(in oklch,var(--color-accent) 8%,transparent)}.btn-sm{font-size:var(--fs-sm);padding:var(--s-2) var(--s-4)}#hero{position:relative;display:flex;align-items:center;padding:var(--s-12) 0 var(--s-16);overflow:hidden}#hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 1000px 600px at 50% -5%,color-mix(in oklch,var(--color-accent) 8%,transparent) 0%,transparent 70%),radial-gradient(ellipse 600px 400px at 80% 20%,color-mix(in oklch,var(--color-success) 5%,transparent) 0%,transparent 60%);animation:heroDrift 16s ease-in-out infinite alternate;pointer-events:none}@keyframes heroDrift{0%{transform:translate(0) scale(1)}to{transform:translate(-30px,15px) scale(1.03)}}.hero-content{position:relative;z-index:1;text-align:left;max-width:900px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-pill);padding:var(--s-1) var(--s-4);font-size:var(--fs-sm);color:var(--color-ink-2);margin-bottom:var(--s-8)}.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--color-success);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 color-mix(in oklch,var(--color-success) 40%,transparent)}50%{opacity:.7;box-shadow:0 0 0 6px color-mix(in oklch,var(--color-success) 0%,transparent)}}.hero-content h1{font-size:clamp(2.25rem,5vw + 1rem,4.5rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--color-ink);margin-bottom:var(--s-6)}.hero-sub{font-size:clamp(1rem,1.5vw + .5rem,1.35rem);color:var(--color-ink-2);line-height:1.7;max-width:680px;margin:0 auto var(--s-10)}.hero-sub code{color:var(--color-accent);background:color-mix(in oklch,var(--color-accent) 8%,transparent);padding:.1em .4em;border-radius:4px;font-size:.88em}.cta-row{display:flex;gap:var(--s-4);justify-content:center;flex-wrap:wrap}.hero-stat{margin-top:var(--s-12);display:flex;justify-content:flex-start;gap:var(--s-12);flex-wrap:wrap}.hero-stat-item{text-align:center}.hero-stat-item .num{font-size:var(--fs-3xl);font-weight:800;color:var(--color-ink);letter-spacing:-.03em}.hero-stat-item .num.broken{color:var(--color-danger)}.hero-stat-item .num.fixed{color:var(--color-success)}.hero-stat-item .label{font-size:var(--fs-sm);color:var(--color-ink-2);margin-top:var(--s-1)}#trust{padding:var(--s-10) 0;border-top:1px solid var(--color-rule);border-bottom:1px solid var(--color-rule);background:var(--color-paper-2)}.trust-inner{display:flex;align-items:center;justify-content:center;gap:var(--s-10);flex-wrap:wrap}.trust-label{font-size:var(--fs-sm);color:var(--color-ink-3);font-weight:500;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}.trust-logos{display:flex;align-items:center;gap:var(--s-10);flex-wrap:wrap;justify-content:center}.trust-logo{display:flex;align-items:center;gap:var(--s-2);color:var(--color-ink-3);font-size:var(--fs-sm);font-weight:500;opacity:.6;transition:opacity .3s var(--ease-out)}.trust-logo:hover{opacity:1}.trust-logo svg{width:28px;height:28px;flex-shrink:0}section{padding:var(--s-24) 0}.section-title{font-size:clamp(1.75rem,3vw + .5rem,2.75rem);font-weight:800;letter-spacing:-.03em;color:var(--color-ink);line-height:1.15;margin-bottom:var(--s-4)}.section-desc{font-size:var(--fs-lg);color:var(--color-ink-2);max-width:640px;line-height:1.7}#problem{background:var(--color-paper)}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12);align-items:center;margin-top:var(--s-12)}.problem-visual{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:var(--s-8);position:relative;overflow:hidden}.problem-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,color-mix(in oklch,var(--color-danger) 4%,transparent),transparent 70%);pointer-events:none}.problem-code{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.8;position:relative}.problem-code .kw{color:#7c3aed}.problem-code .fn{color:#b45309}.problem-code .str{color:var(--color-success)}.problem-code .comment{color:var(--color-ink-3);font-style:italic}.problem-code .strike{text-decoration:line-through;text-decoration-color:var(--color-danger);opacity:.5}.problem-callout{margin-top:var(--s-6);padding:var(--s-4) var(--s-6);background:color-mix(in oklch,var(--color-danger) 8%,transparent);border-left:3px solid var(--color-danger);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:var(--fs-sm);color:var(--color-danger);font-weight:500}@media(max-width:768px){.problem-grid{grid-template-columns:1fr}}#analysis{background:var(--color-paper-2)}.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);max-width:960px;margin:0 auto}.pattern-card{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-xl);padding:var(--s-8);position:relative}.pattern-card.pattern-b{border-color:color-mix(in oklch,var(--color-success) 30%,transparent)}.pattern-card.pattern-a{border-color:color-mix(in oklch,var(--color-warn-ink) 30%,transparent)}.pattern-badge{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--s-3)}.pattern-a .pattern-badge{color:#ca8a04}.pattern-b .pattern-badge{color:var(--color-success)}.pattern-card h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-2)}.pattern-queries{font-size:var(--fs-sm);color:var(--color-ink-3);font-weight:600;margin-bottom:var(--s-4)}.pattern-card p{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.6}.pattern-example{margin-top:var(--s-4);background:var(--color-paper-2);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4)}.pattern-example code{font-size:var(--fs-xs);color:var(--color-accent);word-break:break-all}.pattern-status{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);font-weight:600;padding:var(--s-3) var(--s-4);border-radius:var(--r-sm)}.pattern-status.solved{background:color-mix(in oklch,var(--color-success) 8%,transparent);color:var(--color-success)}.pattern-status.solved{background:color-mix(in oklch,var(--color-warn-ink) 8%,transparent);color:#ca8a04}.pattern-status .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.pattern-status.solved .status-dot{background:var(--color-success)}.pattern-status.solved .status-dot{background:#ca8a04}@media(max-width:768px){.pattern-grid{grid-template-columns:1fr}}#pattern-b{background:var(--color-paper)}#pattern-a{background:var(--color-paper-2)}.query-analysis{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-xl);margin-bottom:var(--s-8);overflow:hidden}.query-header{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-6) var(--s-8);border-bottom:1px solid var(--color-rule);background:var(--color-paper-2)}.query-num{width:48px;height:48px;border-radius:50%;background:var(--color-success);color:var(--color-paper);font-weight:800;font-size:var(--fs-xl);display:flex;align-items:center;justify-content:center;flex-shrink:0}.query-num.q-future{background:#ca8a04}.query-header h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-1)}.query-tag{font-size:var(--fs-xs);color:var(--color-ink-3);font-weight:500}.query-body{padding:var(--s-8)}.query-section{margin-bottom:var(--s-8)}.query-section:last-child{margin-bottom:0}.query-section h4{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink-2);margin-bottom:var(--s-3)}.code-block{background:#1e1e2e;color:#cdd6f4;border-radius:var(--r-md);padding:var(--s-6);font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.7;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word}.code-block .kw{color:#cba6f7}.code-block .fn{color:#89b4fa}.code-block .str{color:#a6e3a1}.code-block .esc{color:#f38ba8;font-weight:700}.code-block .comment{color:#6c7086;font-style:italic}.code-note{font-size:var(--fs-xs);color:var(--color-ink-3);margin-top:var(--s-2);line-height:1.5}.result-card{border-radius:var(--r-lg);padding:var(--s-6);margin-top:var(--s-3)}.result-card.success{background:color-mix(in oklch,var(--color-success) 4%,transparent);border:1px solid color-mix(in oklch,var(--color-success) 20%,transparent)}.result-card.future{background:color-mix(in oklch,var(--color-warn-ink) 4%,transparent);border:1px solid color-mix(in oklch,var(--color-warn-ink) 20%,transparent)}.result-header{display:flex;align-items:center;gap:var(--s-3);font-weight:700;font-size:var(--fs-base);margin-bottom:var(--s-4)}.result-icon{width:28px;height:28px;border-radius:50%;background:var(--color-success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.result-icon.future-icon{background:#ca8a04}.result-detail{margin-bottom:var(--s-4)}.result-explain{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.7}.lineage-row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}.lineage-src,.lineage-dst{font-family:var(--font-mono);font-size:var(--fs-xs);padding:var(--s-2) var(--s-3);background:var(--color-paper-2);border-radius:var(--r-sm);color:var(--color-ink);font-weight:600}.lineage-arrow{color:var(--color-success);font-weight:700}.lineage-row h5,.result-detail h5{font-size:var(--fs-xs);font-weight:600;color:var(--color-ink-2);margin:var(--s-3) 0 var(--s-2);text-transform:uppercase;letter-spacing:.06em}.lineage-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);font-family:var(--font-mono);margin-top:var(--s-2)}.lineage-table th{text-align:left;font-family:var(--font-body);font-weight:600;color:var(--color-ink-3);padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--color-rule);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}.lineage-table td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--color-rule);color:var(--color-ink)}.lineage-table td:nth-child(2){color:var(--color-success);font-weight:700;text-align:center;width:30px}.lineage-table td:nth-child(4){font-family:var(--font-body);font-size:.7rem;color:var(--color-ink-3)}.result-log{background:#1e1e2e;color:#a6adc8;border-radius:var(--r-md);padding:var(--s-4) var(--s-6);font-family:var(--font-mono);font-size:.7rem;line-height:1.6;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;margin-top:var(--s-4)}.extraction-chain{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-4) 0}.chain-step{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);text-align:center}.chain-step.resolved{border-color:var(--color-success);background:color-mix(in oklch,var(--color-success) 6%,transparent)}.chain-label{display:block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-ink-3);margin-bottom:var(--s-1)}.chain-step code{font-size:var(--fs-xs);color:var(--color-ink)}.chain-arrow{color:var(--color-ink-3);font-weight:700}.extraction-result{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--color-success);font-weight:600}#summary{background:var(--color-paper)}.summary-table-wrap{overflow-x:auto;margin-top:var(--s-8)}.summary-table{width:100%;border-collapse:collapse;min-width:700px}.summary-table th{text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--color-ink-3);text-transform:uppercase;letter-spacing:.06em;padding:var(--s-3) var(--s-4);border-bottom:2px solid var(--color-rule)}.summary-table td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--color-rule);font-size:var(--fs-sm);color:var(--color-ink);vertical-align:middle}.summary-table code{font-size:var(--fs-xs);background:var(--color-paper-2);padding:.1em .3em;border-radius:3px}.tag{display:inline-block;font-size:.65rem;font-weight:700;padding:2px 6px;border-radius:var(--r-sm);text-transform:uppercase;letter-spacing:.05em;margin-right:var(--s-1)}.tag-a{background:color-mix(in oklch,var(--color-warn-ink) 15%,transparent);color:#a16207}.tag-b{background:color-mix(in oklch,var(--color-success) 12%,transparent);color:#047857}.cell-broken{color:var(--color-danger);font-weight:600}.cell-fixed{color:var(--color-success);font-weight:600}.cell-future{color:#ca8a04;font-weight:600}.status-pill{font-size:var(--fs-xs);font-weight:700;padding:2px 10px;border-radius:var(--r-pill)}.solved-pill{background:color-mix(in oklch,var(--color-success) 12%,transparent);color:#047857}.future-pill{background:color-mix(in oklch,var(--color-warn-ink) 12%,transparent);color:#a16207}#solution{background:var(--color-paper-2);text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-8);margin-top:var(--s-12);max-width:960px;margin-left:auto;margin-right:auto}.step{background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:var(--s-8) var(--s-6);text-align:center;position:relative;transition:border-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}.step:hover{border-color:var(--color-accent);box-shadow:0 0 40px color-mix(in oklch,var(--color-accent) 8%,transparent)}.step-num{width:40px;height:40px;border-radius:50%;background:var(--color-accent);color:var(--color-paper);font-weight:700;font-size:var(--fs-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s-6)}.step h3{font-size:var(--fs-lg);font-weight:700;color:var(--color-ink);margin-bottom:var(--s-3)}.step p{font-size:var(--fs-sm);color:var(--color-ink-2);line-height:1.6}.step code{display:block;margin-top:var(--s-3);background:var(--color-paper-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);color:var(--color-accent);font-size:var(--fs-xs);word-break:break-all}@media(max-width:768px){.steps{grid-template-columns:1fr;max-width:400px}}#faq{background:var(--color-paper)}.faq-grid{max-width:760px;margin:var(--s-12) auto 0}.faq-grid details{border-bottom:1px solid var(--color-rule)}.faq-grid summary{display:flex;align-items:center;justify-content:space-between;padding:var(--s-6) 0;cursor:pointer;font-size:var(--fs-lg);font-weight:600;color:var(--color-ink);list-style:none;transition:color .2s var(--ease-out)}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid summary:after{content:"+";font-size:var(--fs-xl);color:var(--color-ink-3);transition:transform .3s var(--ease-out);flex-shrink:0;margin-left:var(--s-4)}.faq-grid details[open] summary:after{transform:rotate(45deg)}.faq-grid summary:hover{color:var(--color-accent)}.faq-grid details p{padding:0 0 var(--s-6);color:var(--color-ink-2);line-height:1.7;font-size:var(--fs-base)}#related{background:var(--color-paper-2)}.related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-top:var(--s-8)}.related-card{display:block;background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-lg);padding:var(--s-6);transition:border-color .3s var(--ease-out),transform .2s var(--ease-out);text-decoration:none}.related-card:hover{border-color:var(--color-accent);transform:translateY(-2px);text-decoration:none}.related-num{display:block;font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--color-accent);margin-bottom:var(--s-2)}.related-title{display:block;font-size:var(--fs-sm);color:var(--color-ink);font-weight:500;line-height:1.4;margin-bottom:var(--s-3)}.related-tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;color:var(--color-success);background:color-mix(in oklch,var(--color-success) 8%,transparent);padding:2px 8px;border-radius:var(--r-pill)}@media(max-width:768px){.related-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.related-grid{grid-template-columns:1fr}}#cta{background:var(--color-paper);text-align:center;padding:var(--s-32) 0;position:relative;overflow:hidden}#cta:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 800px 500px at 50% 60%,color-mix(in oklch,var(--color-accent) 4%,transparent) 0%,transparent 70%);pointer-events:none}.cta-content{position:relative;z-index:1}.install-box{display:inline-flex;align-items:center;gap:var(--s-3);background:var(--color-surface);border:1px solid var(--color-rule);border-radius:var(--r-md);padding:var(--s-4) var(--s-6);margin:var(--s-8) auto;font-family:var(--font-mono);font-size:clamp(.85rem,1.5vw,1.1rem);color:var(--color-accent);cursor:pointer;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}.install-box:hover{border-color:var(--color-accent);box-shadow:0 0 30px color-mix(in oklch,var(--color-accent) 8%,transparent)}.install-box .prompt{color:var(--color-ink-3);user-select:none}.install-box .copy-hint{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--color-ink-3);margin-left:var(--s-4);padding:var(--s-1) var(--s-2);border:1px solid var(--color-rule);border-radius:var(--r-sm);transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}.install-box:hover .copy-hint{color:var(--color-accent);border-color:var(--color-accent)}.footer-grid{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:var(--s-8)}.footer-brand{font-weight:700;font-size:var(--fs-lg);color:var(--color-ink);margin-bottom:var(--s-2)}.footer-tagline{font-size:var(--fs-sm);color:var(--color-ink-3)}.footer-links{display:flex;gap:var(--s-8);flex-wrap:wrap}.footer-col h4{font-size:var(--fs-sm);font-weight:600;color:var(--color-ink);margin-bottom:var(--s-3);text-transform:uppercase;letter-spacing:.06em}.footer-col a{display:block;font-size:var(--fs-sm);color:var(--color-ink-2);padding:var(--s-1) 0}.footer-col a:hover{color:var(--color-accent)}.footer-bottom{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--color-rule);font-size:var(--fs-xs);color:var(--color-ink-3);text-align:center}.hero-content .cta-row{justify-content:flex-start}