:root {
  color-scheme: light;
  --ink: #10111a;
  --paper: #fffdf7;
  --sky: #edf2ff;
  --blue: #2447f2;
  --pink: #ed77b6;
  --yellow: #ffd84a;
  --mint: #82dfbf;
  --orange: #ff825b;
  --line: 2px solid var(--ink);
  --shadow-blue: 8px 9px 0 var(--blue);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 17px; font-weight: 650; line-height: 1.45; }
button, input, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 4px; }
button { color: inherit; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, .wordmark, .stage-name { font-weight: 950; letter-spacing: -.045em; }
h1 { max-width: 9.5ch; font-size: clamp(4rem, 9vw, 6rem); line-height: .92; }
h2 { max-width: 14ch; font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: .94; }
h3 { font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1; }
p { max-width: 70ch; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.section { padding-block: clamp(72px, 11vw, 130px); }
.section + .section { border-top: var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.section-heading p { font-size: 1.08rem; }
.small-note { font-size: .82rem; font-weight: 800; }

.topbar { background: var(--sky); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 90px; border-bottom: var(--line); }
.wordmark { max-width: 11ch; font-size: 1.08rem; line-height: .86; text-transform: uppercase; text-decoration: underline; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: .92rem; font-weight: 900; }
.nav-links a { text-decoration: none; border-bottom: 3px solid var(--blue); }
.hero { min-height: 610px; padding-block: 52px 72px; background: var(--sky); border-bottom: var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .7fr); gap: clamp(46px, 8vw, 110px); align-items: center; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy > p { max-width: 33rem; color: var(--blue); font-size: 1.04rem; font-weight: 900; }
.hero-note { position: relative; display: grid; gap: 22px; padding: 30px; border: var(--line); background: var(--pink); box-shadow: 12px 14px 0 var(--paper), 14px 16px 0 var(--ink); animation: settle .7s cubic-bezier(.16, 1, .3, 1) both; }
.hero-note h2 { max-width: 10ch; font-size: clamp(2rem, 4vw, 3.6rem); }
@keyframes settle { from { transform: translateY(18px) rotate(1deg); opacity: .5; box-shadow: 2px 3px 0 var(--paper), 4px 5px 0 var(--ink); } to { transform: none; opacity: 1; box-shadow: 12px 14px 0 var(--paper), 14px 16px 0 var(--ink); } }

.routes { background: var(--paper); }
.route-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border: var(--line); }
.route { display: grid; min-height: 280px; align-content: space-between; gap: 30px; padding: 28px; color: inherit; text-decoration: none; }
.route + .route { border-left: var(--line); }
.route:nth-child(1) { background: var(--yellow); }
.route:nth-child(2) { background: var(--mint); }
.route:nth-child(3) { background: var(--orange); }
.route h3 { margin-bottom: 8px; }
.route:hover .route-arrow { transform: translateX(8px); }
.route p { max-width: 25ch; }
.route-arrow { font-size: 2.4rem; line-height: 1; transition: transform .18s ease-out; }

.framework { background: var(--sky); }
.stage-strip { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); overflow-x: auto; border: var(--line); background: var(--paper); }
.stage-tab { min-height: 116px; padding: 16px; border: 0; border-right: var(--line); background: var(--paper); text-align: left; cursor: pointer; }
.stage-tab:last-child { border-right: 0; }
.stage-tab[aria-selected="true"] { background: var(--yellow); }
.stage-number { display: block; margin-bottom: 18px; color: var(--blue); font-size: .78rem; font-weight: 900; }
.stage-name { display: block; font-size: 1.08rem; line-height: 1; }
.stage-board { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); border: var(--line); border-top: 0; background: var(--paper); box-shadow: var(--shadow-blue); }
.stage-main { display: grid; gap: 28px; min-height: 430px; padding: clamp(28px, 5vw, 54px); }
.stage-main h3 { max-width: 15ch; font-size: clamp(2.5rem, 5vw, 4.8rem); }
.stage-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.stage-copy div { padding-top: 14px; border-top: var(--line); }
.stage-copy strong, .stage-side strong { display: block; margin-bottom: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.stage-side { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 34px; padding: 30px; border-left: var(--line); background: var(--pink); }
.stage-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 6px 11px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .78rem; font-weight: 900; cursor: pointer; }
.tag::after { content: "+"; color: var(--blue); font-size: .95rem; line-height: 1; }
.tag:hover { background: var(--yellow); transform: translateY(-2px); }
.tag:active { transform: translateY(1px); }
.stage-hint { align-self: end; max-width: 27ch; padding-top: 18px; border-top: var(--line); color: var(--ink); font-size: .85rem; font-weight: 900; }

.explainer-dialog { width: min(calc(100% - 28px), 620px); max-height: min(760px, calc(100% - 28px)); padding: 0; overflow: visible; border: var(--line); background: var(--paper); color: var(--ink); box-shadow: 12px 14px 0 var(--blue); }
.explainer-dialog::backdrop { background: rgba(16, 17, 26, .72); }
.explainer-card { max-height: min(756px, calc(100vh - 32px)); overflow-y: auto; }
.explainer-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: start; padding: 24px; border-bottom: var(--line); background: var(--pink); }
.explainer-kind { margin-bottom: 8px; font-size: .75rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.explainer-head h3 { max-width: 12ch; font-size: clamp(2rem, 7vw, 3.5rem); }
.dialog-close { display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.75rem; font-weight: 900; line-height: 1; cursor: pointer; }
.dialog-close:hover { background: var(--yellow); }
.explainer-body { display: grid; gap: 24px; padding: 26px; }
.explainer-section { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.explainer-section strong, .explainer-try strong { display: block; margin-bottom: 7px; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
.explainer-try { padding: 18px; border: var(--line); background: var(--yellow); }

.toolbox { background: var(--sky); }
.toolbox-intro { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--line); margin-bottom: 54px; }
.tool-kind { min-height: 180px; padding: 24px; background: var(--paper); }
.tool-kind + .tool-kind { border-left: var(--line); }
.tool-kind:nth-child(2) { background: var(--yellow); }
.tool-kind:nth-child(3) { background: var(--mint); }
.tool-kind h3 { margin-bottom: 16px; }
.plugin-setup { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 34px; border: var(--line); background: var(--paper); }
.plugin-step { min-height: 134px; padding: 20px; }
.plugin-step + .plugin-step { border-left: var(--line); }
.plugin-step strong { display: block; margin-bottom: 10px; color: var(--blue); font-size: .8rem; text-transform: uppercase; }
.plugin-step p { font-size: .94rem; }
.tool-search { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; margin-bottom: 22px; font-size: .85rem; font-weight: 900; }
.tool-search input { min-height: 54px; width: 100%; padding: 12px 16px; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); }
.tool-group { border: var(--line); background: var(--paper); }
.tool-group + .tool-group { border-top: 0; }
.tool-group > summary { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; min-height: 104px; padding: 22px 26px; cursor: pointer; list-style: none; }
.tool-group > summary::-webkit-details-marker { display: none; }
.tool-count { color: var(--blue); font-size: .8rem; font-weight: 900; }
.tool-summary-copy p { margin-top: 5px; font-size: .93rem; font-weight: 650; }
.tool-toggle { font-size: 1.7rem; }
.tool-group[open] .tool-toggle { transform: rotate(45deg); }
.tool-list { border-top: var(--line); }
.tool-card { display: grid; grid-template-columns: 106px 150px minmax(0, 1fr); gap: 22px; align-items: start; padding: 26px; }
.tool-card + .tool-card { border-top: var(--line); }
.tool-card[hidden], .tool-group[hidden] { display: none; }
.tool-visual { display: grid; width: 92px; height: 92px; place-items: center; flex: 0 0 auto; border: var(--line); background: var(--visual-bg, var(--paper)); box-shadow: 5px 6px 0 var(--blue); }
.tool-visual span { display: block; max-width: 80px; padding: 8px; font-size: 1.4rem; font-weight: 950; letter-spacing: -.04em; line-height: .9; text-align: center; }
.tool-visual--dialog { width: 68px; height: 68px; box-shadow: 4px 4px 0 var(--blue); }
.tool-visual--dialog span { font-size: 1.1rem; }
.tool-meta { display: grid; gap: 8px; align-content: start; }
.tool-badge { width: fit-content; padding: 5px 9px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--pink); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.tool-card h4 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 950; letter-spacing: -.025em; }
.tool-detail { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding-top: 4px; }
.tool-detail > div { padding-top: 12px; border-top: 1.5px solid var(--ink); }
.tool-detail strong { display: block; margin-bottom: 6px; font-size: .76rem; text-transform: uppercase; }
.install-stack { display: grid; gap: 8px; margin-top: 10px; }
.install-command { display: block; max-width: 100%; padding: 10px 12px; overflow-x: auto; border: var(--line); background: var(--ink); color: var(--paper); font: 750 .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: nowrap; user-select: all; }
.try-this { grid-column: 1 / -1; padding: 16px !important; border: var(--line) !important; background: var(--yellow); }
.docs-link { grid-column: 1 / -1; font-size: .82rem; }
.empty-results { display: none; padding: 28px; border: var(--line); background: var(--yellow); }
.empty-results.visible { display: block; }

.rule { background: var(--pink); }
.rule-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; }
.rule-grid p { font-size: 1.18rem; }
footer { padding-block: 32px; border-top: var(--line); background: var(--ink); color: var(--paper); }
footer .shell { display: flex; justify-content: space-between; gap: 28px; font-size: .78rem; }

@media (max-width: 860px) {
  .hero-grid, .section-heading, .stage-board, .rule-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-note { max-width: 520px; }
  .route-grid { grid-template-columns: 1fr; }
  .route { min-height: 210px; }
  .route + .route { border-left: 0; border-top: var(--line); }
  .stage-strip { grid-template-columns: repeat(7, 128px); }
  .stage-side { border-left: 0; border-top: var(--line); }
  .toolbox-intro { grid-template-columns: 1fr; }
  .tool-kind + .tool-kind { border-left: 0; border-top: var(--line); }
  .plugin-setup { grid-template-columns: repeat(2, 1fr); }
  .plugin-step:nth-child(3) { border-left: 0; border-top: var(--line); }
  .plugin-step:nth-child(4) { border-top: var(--line); }
  .tool-card { grid-template-columns: 96px minmax(0, 1fr); }
  .tool-card > .tool-copy { grid-column: 2; }
  .tool-detail { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .shell { width: min(calc(100% - 24px), var(--max)); }
  .nav { min-height: 76px; }
  .nav-links { gap: 14px; font-size: .8rem; }
  .hero { padding-block: 42px 58px; }
  h1 { font-size: clamp(3.3rem, 17vw, 5rem); }
  .hero-note { padding: 24px; box-shadow: 8px 9px 0 var(--paper), 10px 11px 0 var(--ink); }
  .section { padding-block: 74px; }
  .section-heading { gap: 20px; margin-bottom: 36px; }
  .stage-copy, .tool-detail { grid-template-columns: 1fr; }
  .stage-main { min-height: 0; }
  .tool-card { grid-template-columns: 1fr; }
  .tool-visual { width: 82px; height: 82px; }
  .tool-card > .tool-copy { grid-column: auto; }
  .tool-meta { grid-template-columns: auto auto; justify-content: start; }
  .plugin-setup { grid-template-columns: 1fr; }
  .plugin-step + .plugin-step, .plugin-step:nth-child(3) { border-left: 0; border-top: var(--line); }
  .tool-group > summary { grid-template-columns: 1fr auto; }
  .tool-count { grid-column: 1 / -1; }
  .tool-search { grid-template-columns: 1fr; }
  footer .shell { flex-direction: column; }
  .explainer-dialog { box-shadow: 7px 8px 0 var(--blue); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}