:root{--bg: #f8fafc;--text: #0f172a;--muted: #64748b;--border: #e2e8f0;--card: #ffffff;--primary: #2563eb;--primary-weak: #eff6ff}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text)}.app-shell{display:flex;flex-direction:column;min-height:100vh;position:relative;overflow-x:hidden}.site-nav{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f8fafcd9;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,40px);border-bottom:1px solid rgba(148,163,184,.25)}.site-nav .logo{font-weight:700;font-size:1.05rem;color:var(--text);text-decoration:none}.site-nav .nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}.site-nav .nav-links a{color:var(--muted);text-decoration:none;font-weight:500}.site-nav .nav-links a:hover{color:var(--primary)}@media (max-width: 820px){.site-nav{flex-wrap:wrap;gap:12px}.site-nav .nav-links{flex-wrap:wrap;justify-content:center;width:100%}}.hero{display:grid;gap:clamp(24px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:clamp(40px,8vw,88px) clamp(16px,5vw,72px);align-items:center;position:relative}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at top right,rgba(59,130,246,.25),transparent 45%),radial-gradient(circle at bottom left,rgba(56,189,248,.2),transparent 45%);z-index:-2}.hero-copy{max-width:620px;position:relative;z-index:1}.hero-kicker{text-transform:uppercase;font-weight:600;letter-spacing:.08em;color:#3b82f6;font-size:.8rem}.hero h1{font-size:clamp(2.4rem,4vw,3.6rem);margin:12px 0;line-height:1.1}.hero-sub{color:var(--muted);font-size:1.05rem;margin:0 0 24px}.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}.cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:999px;background:var(--primary);color:#fff;text-decoration:none;font-weight:600;border:1px solid transparent}.cta:hover{filter:brightness(.94)}.cta.ghost{background:transparent;color:var(--text);border-color:#2563eb59}.hero-badges{display:flex;gap:12px;flex-wrap:wrap}.hero-badge{display:grid;gap:2px;padding:10px 14px;border-radius:10px;border:1px solid rgba(37,99,235,.15);text-decoration:none;background:#2563eb0f;min-width:140px}.badge-label{font-size:.72rem;text-transform:uppercase;color:#1d4ed8;letter-spacing:.08em}.badge-value{font-weight:700;font-size:1.1rem;color:#1e293b}.hero-demo{min-height:clamp(280px,40vw,500px);background:#ffffffe6;border-radius:20px;padding:clamp(12px,3vw,22px);box-shadow:0 30px 70px #0f172a29;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;width:min(100%,640px);margin:0 auto}.hero-demo:after{content:"";position:absolute;top:18px;right:18px;bottom:18px;left:18px;border-radius:18px;border:1px solid rgba(37,99,235,.12);pointer-events:none}main{display:flex;flex-direction:column;gap:clamp(48px,8vw,88px);padding:0 clamp(16px,5vw,72px) clamp(56px,8vw,120px)}.section{display:grid;gap:24px}.section-header{display:grid;gap:8px;max-width:720px}.section-header p{color:var(--muted);margin:0}.feature-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.feature-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;box-shadow:0 1px 2px #0f172a0a;display:grid;gap:10px}.feature-icon{font-size:1.8rem}.example-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.example-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;display:grid;gap:16px;box-shadow:0 1px 2px #0f172a0d}.example-card h3{margin:0}.example-card footer{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center}.example-card footer button{padding:8px 12px;border-radius:999px;background:var(--primary);border:none;color:#fff;font-weight:600;cursor:pointer}.example-card footer button:hover{filter:brightness(.92)}.example-card footer a{color:var(--muted);text-decoration:none;font-weight:500}.example-card footer a:hover{color:var(--primary)}.tag-row{display:flex;gap:8px;flex-wrap:wrap}.tag-row span{font-size:.75rem;background:#2563eb14;color:#1d4ed8;padding:2px 8px;border-radius:999px}.card-top{display:grid;gap:6px}.battle-card{padding:0;overflow:hidden}.perf-chart{display:grid;gap:14px;margin-top:18px}.perf-row{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:left;display:grid;gap:10px;cursor:pointer;box-shadow:0 1px 2px #0f172a0a;transition:transform .16s ease,box-shadow .16s ease}.perf-row:hover{transform:translateY(-2px);box-shadow:0 12px 24px #0f172a1a}.perf-row-header{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.perf-label{font-weight:600}.perf-tag{background:#2563eb1f;color:#1d4ed8;padding:2px 8px;border-radius:999px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.perf-badge{margin-left:auto;font-weight:600;color:#0ea5e9}.perf-bar{height:8px;border-radius:999px;background:#94a3b840;overflow:hidden}.perf-bar-fill{height:100%;background:linear-gradient(90deg,#2563eb,#22d3ee);border-radius:inherit}.perf-row p{margin:0;color:var(--muted);font-size:.92rem}.playground{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:24px}.playground aside{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;max-height:520px;overflow:auto}.playground aside ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}.playground aside button{width:100%;text-align:left;background:transparent;border:1px solid transparent;padding:8px 10px;border-radius:8px;color:var(--muted);cursor:pointer}.playground aside button:hover{background:#2563eb14}.playground aside button.active{background:var(--primary);color:#fff}.playground-preview{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;min-height:320px;overflow:auto;box-shadow:inset 0 0 0 1px #94a3b81f}@media (max-width: 960px){.playground{grid-template-columns:1fr}}.api-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.api-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px #0f172a0a}.api-card h3{margin-top:0}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.site-footer{margin-top:auto;padding:40px clamp(16px,5vw,72px);background:#0f172a;color:#f1f5f9c7;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.site-footer strong{color:#fff}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#60a5fae6;text-decoration:none}.footer-links a:hover{text-decoration:underline}.footer-meta{font-size:.85rem;color:#94a3b8e6}table{width:100%;border-collapse:collapse;border:1px solid var(--border);background:var(--card)}th,td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left}thead th{background:#f1f5f9;font-weight:600}table td input{width:100%;min-width:0}input,button{font:inherit}input[type=text],input:not([type]),input[type=email],input[type=number],input[type=search],textarea{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);min-width:100px}label{display:grid;gap:6px;margin:8px 0}button{background:var(--primary);color:#fff;border:1px solid transparent;border-radius:8px;padding:8px 12px;cursor:pointer}button:hover{filter:brightness(.96)}button.ghost{background:transparent;color:var(--text);border-color:var(--border)}pre{background:#0b1220;color:#e2e8f0;padding:10px;border-radius:8px;overflow:auto;max-height:360px}.md{line-height:1.6}.md h1,.md h2,.md h3,.md h4,.md h5{margin:1em 0 .4em}.md p{margin:.5em 0}.md a{color:var(--primary);text-decoration:none}.md a:hover{text-decoration:underline}.md code{background:#f1f5f9;padding:2px 6px;border-radius:6px}.md pre code{background:transparent;padding:0}.md pre{max-height:480px}.md ul,.md ol{padding-left:1.25rem;margin:.5rem 0}.md blockquote{border-left:3px solid var(--border);margin:.6rem 0;padding-left:.8rem;color:var(--muted)}@keyframes cellPulse{0%{box-shadow:0 0 #2563eb80;border-color:#60a5fa}to{box-shadow:none;border-color:var(--border)}}.cell-updated{animation:cellPulse 2s ease-out 1}.cell-dirty{border-color:#ef4444!important}@keyframes changedFade{0%{background:#fef3c7}to{background:transparent}}.cell-changed{animation:changedFade 2s ease-out 1}.sudoku{display:grid;gap:18px}.sudoku header p{color:var(--muted)}.sudoku-board{overflow-x:auto}.sudoku-board table{margin:0 auto;border-collapse:collapse;width:auto}.sudoku-board td{padding:0;border:1px solid var(--border)}.cell-wrapper{width:48px;height:48px}.cell-wrapper.r0{border-top:2px solid #1d4ed8}.cell-wrapper.r2,.cell-wrapper.r5,.cell-wrapper.r8{border-bottom:2px solid #1d4ed8}.cell-wrapper.c0{border-left:2px solid #1d4ed8}.cell-wrapper.c2,.cell-wrapper.c5,.cell-wrapper.c8{border-right:2px solid #1d4ed8}.sudoku-cell{width:100%;height:100%;text-align:center;border:none;font-size:1.1rem;background:transparent}.sudoku-cell:focus{outline:2px solid #2563eb;outline-offset:-2px}.sudoku-cell.locked{background:#e2e8f0;font-weight:600}.sudoku-panels{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.sudoku-panels section{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px}.sudoku-panels ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}.sudoku-panels li{font-size:.95rem}.game2048{display:grid;gap:18px;--tile-size: 70px;--tile-gap: 10px;--tile-unit: calc(var(--tile-size) + var(--tile-gap))}.game2048 header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}.game2048 .muted{color:var(--muted);max-width:420px}.game2048 .scoreboard{display:flex;gap:12px;align-items:center}.game2048 .score{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-weight:600;min-width:110px;text-align:center}.game2048 .board-frame{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:4px 12px;width:fit-content;margin:0 auto;align-items:center}.game2048 .axis{font-weight:600;color:var(--muted);text-align:center;font-size:.85rem}.game2048 .axis-top{display:grid;grid-template-columns:repeat(4,var(--tile-size));column-gap:var(--tile-gap);margin-left:calc(var(--tile-gap))}.game2048 .axis-left{display:grid;grid-template-rows:repeat(4,var(--tile-size));row-gap:var(--tile-gap);margin-top:calc(var(--tile-gap));justify-items:center}.game2048 .axis-left span{display:flex;align-items:center;justify-content:flex-end;width:28px;padding-right:4px}.game2048 .axis-top span{display:flex;align-items:center;justify-content:center;height:var(--tile-size)}.game2048 .axis-corner{width:28px;height:20px}.game2048 .board{position:relative;width:calc(var(--tile-size) * 4 + var(--tile-gap) * 5);height:calc(var(--tile-size) * 4 + var(--tile-gap) * 5);padding:var(--tile-gap);background:#bbada0;border-radius:12px}.game2048 .board-grid{position:absolute;inset:var(--tile-gap);display:grid;grid-template-columns:repeat(4,var(--tile-size));grid-template-rows:repeat(4,var(--tile-size));gap:var(--tile-gap)}.game2048 .grid-cell{background:#eee4da59;border-radius:6px}.game2048 .tile-layer{position:absolute;inset:var(--tile-gap);pointer-events:none}.game2048 .tile{position:absolute;top:0;left:0;width:var(--tile-size);height:var(--tile-size);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#f9f6f2;will-change:transform;transition:transform .16s ease}.game2048 .tile-0{background:#eee4da26;color:transparent}.game2048 .tile-2{background:#eee4da;color:#776e65}.game2048 .tile-4{background:#ede0c8;color:#776e65}.game2048 .tile-8{background:#f2b179}.game2048 .tile-16{background:#f59563}.game2048 .tile-32{background:#f67c5f}.game2048 .tile-64{background:#f65e3b}.game2048 .tile-128{background:#edcf72}.game2048 .tile-256{background:#edcc61}.game2048 .tile-512{background:#edc850}.game2048 .tile-1024{background:#edc53f}.game2048 .tile-2048{background:#edc22e}.game2048 .controls{display:grid;place-items:center;gap:10px}.game2048 .controls button{min-width:54px;min-height:44px}.game2048 .controls-row{display:flex;gap:12px}.game2048 .status{text-align:center;min-height:1.2em;font-weight:600;color:var(--muted)}.game2048 .status.won{color:#16a34a}.game2048 .status.lost{color:#dc2626}.game2048 .summaries{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.game2048 .summaries section{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px}.game2048 .summaries ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}.game2048.compact{--tile-size: 54px;--tile-gap: 8px;gap:16px;align-items:center;justify-items:center;width:100%}.game2048.compact header,.game2048.compact .scoreboard,.game2048.compact .panel,.game2048.compact .controls,.game2048.compact .status,.game2048.compact .summaries{display:none}.game2048.compact .board-frame{margin:0}.game2048.compact .compact-body{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}.game2048.compact .compact-sidebar{display:grid;gap:12px;justify-items:center;width:100%;max-width:320px}.mini-stats{display:grid;grid-auto-flow:column;gap:16px}.mini-stats span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.mini-stats strong{font-size:1.1rem}.mini-console{display:grid;gap:6px;text-align:center;font-size:.8rem;color:var(--muted);width:100%;max-width:320px}.mini-console span{display:block;font-weight:600;color:var(--text);font-size:.75rem}.mini-console code{display:block;background:#0f172a0d;padding:6px 8px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.72rem;white-space:pre;overflow-x:auto}.mini-controls{display:grid;gap:8px;justify-items:center;width:100%}.mini-hint{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.mini-controls button{background:#2563eb1f;color:#1d4ed8;border:none;width:40px;height:40px;border-radius:50%;font-weight:600;cursor:pointer}.mini-controls button:hover{filter:brightness(.94)}.mini-controls-row{display:flex;gap:8px}.mini-reset{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;width:auto;padding:6px 16px;border-radius:999px;align-self:center}.mini-status{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:center}.mini-status{padding-top:4px}.compact-body .board-frame{align-self:center}@media (min-width: 960px){.game2048.compact{--tile-size: 60px;justify-items:stretch}.game2048.compact .compact-body{flex-direction:row;align-items:flex-start;gap:20px;justify-content:center}.game2048.compact .compact-sidebar{width:auto;align-items:flex-start;justify-items:flex-start}.mini-console{text-align:left}}.mini-status.won{color:#16a34a}.mini-status.lost{color:#dc2626}.card,.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 1px 2px #0f172a0d}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}