.js-guide {
  --jsg-dark: #0c1220;
  --jsg-panel: #121a29;
  --jsg-line: #d9d0bc;
  --jsg-green: #239668;
  background: #fbf7ef;
}

.jsg-hero,
.jsg-code,
.jsg-production,
.jsg-seatlayer,
.jsg-final {
  color: #edf2ff;
  background: var(--jsg-dark);
}

.jsg-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4.6rem, 8vw, 7rem) 0;
  background-image:
    radial-gradient(circle at 86% 18%, rgba(244,183,64,.16), transparent 29rem),
    linear-gradient(rgba(112,132,170,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,132,170,.055) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

.jsg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.jsg-kicker,
.jsg-stack-head span,
.jsg-boundary > span,
.jsg-production-grid article > span,
.jsg-decision-grid article > span,
.jsg-sdk-links > span,
.jsg-state-flow article > span,
.jsg-race > div > span {
  font: 700 .66rem var(--mono);
  letter-spacing: .12em;
}

.jsg-kicker { color: #f4c767; }
.jsg-kicker i { display:inline-block; width:8px; height:8px; margin-right:.6rem; border-radius:50%; background:#f4b740; box-shadow:0 0 14px rgba(244,183,64,.8); }
.jsg-hero h1 { max-width: 760px; margin: 1.2rem 0 0; color:#f5f7fd; font-size:clamp(2.75rem,5.7vw,5.25rem); line-height:.97; letter-spacing:-.058em; }
.jsg-answer { max-width: 700px; margin:1.55rem 0 0; color:#aeb9cc; font-size:clamp(1rem,1.45vw,1.22rem); line-height:1.65; }
.jsg-hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.jsg-hero-actions .btn { min-height:50px; }
.jsg-scope { max-width:680px; margin:1.15rem 0 0; padding-left:1rem; border-left:2px solid #f4b740; color:#8f9bb0; font-size:.78rem; line-height:1.55; }
.jsg-scope b { color:#dbe2f0; }

.jsg-stack { border:1px solid #2b374c; border-radius:18px; padding:1.2rem; background:rgba(12,18,32,.88); box-shadow:0 24px 80px rgba(0,0,0,.28); }
.jsg-stack-head { padding:.3rem .25rem 1.05rem; border-bottom:1px solid #253146; }
.jsg-stack-head span { display:block; color:#f4c767; }
.jsg-stack-head b { display:block; margin-top:.42rem; color:#e8edf8; font-size:1.05rem; }
.jsg-stack ol { display:grid; gap:.55rem; margin:.8rem 0 0; padding:0; list-style:none; }
.jsg-stack li { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:.8rem; min-height:62px; padding:.72rem .85rem; border:1px solid #243047; border-radius:10px; background:#111927; }
.jsg-stack li > span { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:#111722; background:#f4b740; font:800 .7rem var(--mono); }
.jsg-stack li b { display:block; color:#eef2fa; font-size:.87rem; }
.jsg-stack li small { display:block; margin-top:.2rem; color:#8290a6; font:.63rem var(--mono); }

.jsg-prototype,
.jsg-rendering,
.jsg-state,
.jsg-decision,
.jsg-faq { padding:clamp(4rem,7vw,6.4rem) 0; }
.jsg-head { max-width:830px; }
.jsg-head h2,.jsg-faq-head h2 { margin:.9rem 0 0; color:#0f1625; font-size:clamp(2.15rem,4.5vw,4rem); line-height:1.02; letter-spacing:-.052em; }
.jsg-head > p { margin:1.15rem 0 0; color:#626d82; font-size:1rem; line-height:1.65; }
.jsg-head code { font: .9em var(--mono); color:#805c12; }
.jsg-head-light h2 { color:#f1f4fb; }
.jsg-head-light > p { color:#aeb9cc; }
.jsg-head-light code { color:#f4c767; }

.jsg-prototype-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:1rem; margin-top:2rem; align-items:stretch; }
.jsg-demo,.jsg-boundary { border:1px solid var(--jsg-line); border-radius:16px; background:#fff; box-shadow:0 14px 40px rgba(23,30,44,.08); }
.jsg-demo { padding:1.1rem; }
.jsg-demo-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.jsg-demo-head span,.jsg-demo-head em { display:block; color:#8b6a21; font:700 .62rem var(--mono); letter-spacing:.1em; font-style:normal; }
.jsg-demo-head b { display:block; margin-top:.32rem; color:#141b28; }
.jsg-demo-head em { padding:.4rem .55rem; border-radius:999px; color:#7a622b; background:#fff4d4; }
.jsg-stage { width:min(78%,520px); margin:1.55rem auto 1.3rem; padding:.6rem; border-radius:50% 50% 8px 8px; color:#6e7888; background:#edf0f4; text-align:center; font:700 .62rem var(--mono); letter-spacing:.18em; }
.jsg-seat-grid { display:grid; grid-template-columns:repeat(5,minmax(48px,1fr)); gap:.6rem; max-width:620px; margin:0 auto; }
.jsg-seat-grid button { min-width:44px; min-height:48px; border:1px solid #8e9bb1; border-radius:9px; color:#273247; background:#f6f8fb; font:750 .7rem var(--mono); cursor:pointer; }
.jsg-seat-grid button:not(:disabled):hover { border-color:#b57a00; transform:translateY(-1px); }
.jsg-seat-grid button[aria-pressed="true"] { border-color:#146a49; color:#fff; background:var(--jsg-green); box-shadow:0 0 0 3px rgba(35,150,104,.16); }
.jsg-seat-grid button.sold { border-color:#d6d9df; color:#9ca3af; background:repeating-linear-gradient(135deg,#eceef2,#eceef2 5px,#f8f9fb 5px,#f8f9fb 10px); opacity:.75; }
.jsg-seat-grid button:focus-visible,.jsg-demo-foot button:focus-visible { outline:3px solid #7f55e8; outline-offset:3px; }
.jsg-demo-foot { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-top:1.25rem; padding-top:1rem; border-top:1px solid #e4ded1; }
.jsg-demo-foot p { margin:0; color:#4f596b; font-size:.78rem; line-height:1.5; }
.jsg-demo-foot button { min-height:44px; padding:.65rem .9rem; border:1px solid #c6bda9; border-radius:8px; color:#1c2432; background:#fffaf0; font-weight:750; cursor:pointer; }
.jsg-demo-foot button:disabled { cursor:not-allowed; opacity:.55; }
.jsg-noscript { margin:.8rem 0 0; color:#8a3a31; font-size:.74rem; }
.jsg-boundary { padding:1.35rem; }
.jsg-boundary > span { color:#1b7c58; }
.jsg-boundary > span.jsg-not-proof { display:block; margin-top:1.7rem; color:#a14538; }
.jsg-boundary h3 { margin:.55rem 0 0; color:#121a28; font-size:1.25rem; }
.jsg-boundary ul { display:grid; gap:.52rem; margin:.8rem 0 0; padding:0; list-style:none; }
.jsg-boundary li { position:relative; padding-left:1.05rem; color:#5f6879; font-size:.82rem; line-height:1.45; }
.jsg-boundary li::before { content:""; position:absolute; left:0; top:.48rem; width:6px; height:6px; border-radius:50%; background:#8090a8; }

.jsg-code { padding:clamp(4rem,7vw,6rem) 0; }
.jsg-code-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(480px,1.15fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.jsg-code-block { max-width:100%; margin:0; padding:1.35rem; overflow:auto; border:1px solid #29364d; border-radius:14px; color:#d8e1f1; background:#080d16; font: .78rem/1.72 var(--mono); tab-size:2; box-shadow:0 18px 50px rgba(0,0,0,.25); }
.jsg-code-block .c { color:#728199; }

.jsg-table { margin-top:2rem; overflow:auto; border:1px solid var(--jsg-line); border-radius:14px; background:#fff; }
.jsg-table table { width:100%; min-width:720px; border-collapse:collapse; }
.jsg-table th,.jsg-table td { padding:1rem; border-bottom:1px solid #e6dfd2; color:#5a6577; text-align:left; vertical-align:top; font-size:.82rem; line-height:1.5; }
.jsg-table thead th { color:#6f5822; background:#fff6df; font:700 .66rem var(--mono); letter-spacing:.08em; }
.jsg-table tbody th { width:18%; color:#151c29; }
.jsg-table tr:last-child th,.jsg-table tr:last-child td { border-bottom:0; }
.jsg-source-note,.jsg-qualification { margin:1.2rem 0 0; color:#687386; font-size:.74rem; line-height:1.65; }
.jsg-source-note a { color:#6f551b; }

.jsg-production { padding:clamp(4rem,7vw,6.4rem) 0; }
.jsg-production-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin-top:2rem; }
.jsg-production-grid article { min-height:190px; padding:1.15rem; border:1px solid #28344a; border-radius:12px; background:var(--jsg-panel); }
.jsg-production-grid article > span { color:#f4c767; }
.jsg-production-grid h3 { margin:.8rem 0 0; color:#eef2fa; font-size:1.05rem; }
.jsg-production-grid p { margin:.65rem 0 0; color:#95a2b7; font-size:.78rem; line-height:1.55; }

.jsg-state-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:.7rem; align-items:center; margin-top:2rem; }
.jsg-state-flow article { min-height:130px; padding:1rem; border:1px solid var(--jsg-line); border-radius:12px; background:#fff; }
.jsg-state-flow article > span { color:#8a6822; }
.jsg-state-flow b,.jsg-state-flow small { display:block; }
.jsg-state-flow b { margin-top:.8rem; color:#141c29; font-size:.92rem; }
.jsg-state-flow small { margin-top:.3rem; color:#788194; font:.63rem var(--mono); }
.jsg-state-flow > i { color:#9a7b34; font-style:normal; }
.jsg-race { display:grid; grid-template-columns:1fr 150px 1fr; align-items:center; max-width:860px; margin:1.4rem auto 0; border:1px solid var(--jsg-line); border-radius:14px; overflow:hidden; background:#fff; }
.jsg-race > div { padding:1.1rem; text-align:center; }
.jsg-race > div > span { display:block; color:#7f6a3c; }
.jsg-race b { display:block; margin:.45rem 0 .65rem; }
.jsg-race em { display:inline-block; padding:.32rem .48rem; border-radius:999px; font:700 .62rem var(--mono); font-style:normal; }
.jsg-race .ok { color:#176746; background:#dff5e9; }
.jsg-race .conflict { color:#8b382e; background:#fde8e4; }
.jsg-race-seat { color:#f7f9fd; background:#111927; font-weight:800; }
.jsg-race-seat small { display:block; margin-top:.3rem; color:#8f9cb0; font:.58rem var(--mono); }

.jsg-decision { border-top:1px solid #e2dacb; }
.jsg-decision-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2rem; }
.jsg-decision-grid article { padding:1.4rem; border:1px solid var(--jsg-line); border-radius:14px; background:#fff; }
.jsg-decision-grid article > span { color:#826522; }
.jsg-decision-grid h3 { margin:.7rem 0 0; color:#111826; font-size:1.35rem; }
.jsg-decision-grid ul { display:grid; gap:.65rem; margin:1rem 0 0; padding-left:1.1rem; color:#5e6879; font-size:.82rem; line-height:1.5; }
.jsg-decision-grid .jsg-decision-sdk { border-color:#d4a132; background:#fff7df; }

.jsg-seatlayer { padding:clamp(4rem,7vw,6.5rem) 0; }
.jsg-architecture { display:block; margin-top:2rem; padding:1rem; border:1px solid #28344a; border-radius:16px; background:#101827; }
.jsg-architecture img { display:block; width:100%; height:auto; }
.jsg-sdk-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:1rem; margin-top:1rem; }
.jsg-sdk-links { padding:1.35rem; border:1px solid #2b374c; border-radius:14px; background:#111927; }
.jsg-sdk-links > span { color:#f4c767; }
.jsg-sdk-links h3 { margin:.7rem 0 0; color:#f0f3fa; font-size:1.25rem; }
.jsg-sdk-links p { color:#9eabbf; font-size:.8rem; line-height:1.55; }
.jsg-sdk-links a { display:flex; min-height:44px; align-items:center; border-top:1px solid #29354a; color:#d6b45f; font-size:.76rem; text-decoration:none; }

.jsg-faq-head { max-width:760px; }
.jsg-faq .faq { margin-top:2rem; }
.jsg-faq details { border-color:#dcd3c2; }
.jsg-final { padding:clamp(4rem,7vw,6rem) 0; text-align:center; }
.jsg-final .eyebrow { justify-content:center; }
.jsg-final h2 { max-width:940px; margin:.9rem auto 0; color:#f2f5fb; font-size:clamp(2.2rem,4.7vw,4.3rem); line-height:1.03; letter-spacing:-.052em; }
.jsg-final p { max-width:850px; margin:1.15rem auto 0; color:#aeb9cc; line-height:1.65; }
.jsg-final-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1.6rem; }
.jsg-final-actions .btn { min-height:52px; }

@media (max-width:1000px) {
  .jsg-hero-grid,.jsg-code-grid,.jsg-sdk-grid { grid-template-columns:1fr; }
  .jsg-prototype-grid { grid-template-columns:1fr; }
  .jsg-production-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .jsg-state-flow { grid-template-columns:1fr; }
  .jsg-state-flow > i { transform:rotate(90deg); text-align:center; }
}

@media (max-width:700px) {
  .jsg-hero { padding-top:3.7rem; }
  .jsg-hero-grid { gap:2rem; }
  .jsg-stack { padding:.85rem; }
  .jsg-production-grid,.jsg-decision-grid { grid-template-columns:1fr; }
  .jsg-production-grid article { min-height:0; }
  .jsg-race { grid-template-columns:1fr; }
  .jsg-race-seat { order:-1; }
  .jsg-demo-foot { align-items:flex-start; flex-direction:column; }
}

@media (max-width:420px) {
  .jsg-seat-grid { grid-template-columns:repeat(5,minmax(42px,1fr)); gap:.35rem; }
  .jsg-seat-grid button { min-height:44px; }
  .jsg-demo,.jsg-boundary { padding:.9rem; }
  .jsg-code-block { padding:1rem; font-size:.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .jsg-seat-grid button { transition:none; }
}