:root {
  --paper: #f2eee5;
  --surface: #fffdf7;
  --ink: #171914;
  --muted: #6d736c;
  --line: #c8cdc5;
  --green: #008b72;
  --lime: #b5ff2d;
  --coral: #ff6855;
  --blue: #6d73f5;
  --yellow: #ffd86d;
  --soft: #e4e8e0;
  --panel: #20231e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --visual: #6d73f5;
  --reading: #ff6855;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 5% 3%, rgba(109,115,245,.1), transparent 28rem),
    radial-gradient(circle at 96% 5%, rgba(181,255,45,.1), transparent 28rem),
    var(--paper);
  font-family: "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 4px solid #1c5dff; outline-offset: 4px; }
code, pre { font-family: var(--mono); }

.page {
  width: min(1660px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 80px;
}

.hero {
  display: flex;
  min-height: 250px;
  padding: 12px 18px 28px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.hero-copy { min-width: 0; }
.eyebrow,
.section-heading p,
.control-label,
.inspector-heading p,
.reason-block > p,
.selected-block > p,
.inspector-label p {
  margin: 0;
  color: var(--green);
  font: 900 12px/1.2 var(--mono);
  letter-spacing: .13em;
}
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.eyebrow i { position: relative; width: 19px; height: 19px; border: 2px solid var(--blue); border-radius: 6px; }
.eyebrow i::after { position: absolute; inset: 5px -7px -7px 5px; z-index: -1; border-radius: 6px; background: var(--lime); content: ""; }
h1 { margin: 0; font-size: min(5.6vw, 88px); line-height: 1; letter-spacing: 0; white-space: nowrap; }
.lead { margin: 22px 0 0; color: var(--muted); font-size: clamp(17px, 1.55vw, 24px); font-weight: 750; }
.lead strong { color: var(--ink); }
.hero-actions { display: flex; flex: 0 0 auto; align-items: stretch; gap: 10px; }
.hero-actions > button { min-height: 52px; padding: 0 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 12px; font-weight: 900; cursor: pointer; }
.hero-actions > button.dark { border-color: var(--ink); background: var(--ink); color: white; }

.series-nav {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,253,247,.74);
}
.series-nav > p { display: flex; margin: 0; padding: 0 12px; align-items: center; color: var(--green); font: 900 10px/1.2 var(--mono); letter-spacing: .12em; white-space: nowrap; }
.series-nav a { display: grid; min-height: 48px; padding: 7px 10px 7px 44px; position: relative; align-content: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; }
.series-nav a > span { display: grid; position: absolute; inset: 7px auto 7px 7px; width: 30px; place-items: center; border-radius: 8px; background: var(--soft); color: var(--green); font: 900 10px/1 var(--mono); }
.series-nav a b { font-size: 12px; line-height: 1.2; }
.series-nav a small { margin-top: 2px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.series-nav a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: white; }
.series-nav a[aria-current="page"] > span { background: var(--lime); color: var(--ink); }
.series-nav a[aria-current="page"] small { color: #c9cec7; }

.lab, .guide { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: 0 18px 55px rgba(23,25,20,.07); }
.section-heading { display: flex; min-height: 112px; padding: 18px 26px; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.section-heading.compact { min-height: 104px; }
.section-number { display: grid; flex: 0 0 auto; width: 54px; height: 54px; place-items: center; border-radius: 16px; background: var(--coral); color: white; font: 900 12px/1 var(--mono); }
.section-number.blue { background: var(--blue); }
.section-heading h2 { margin: 4px 0 0; font-size: clamp(23px,2.2vw,35px); line-height: 1.08; }
.heading-status { display: flex; margin-left: auto; gap: 8px; }
.heading-status span, .heading-status b, .guide-note { padding: 9px 12px; border-radius: 999px; background: var(--soft); font: 900 10px/1 var(--mono); }
.heading-status b { background: var(--coral); color: white; }
.heading-status b.is-good { background: var(--lime); color: var(--ink); }
.guide-note { margin-left: auto; color: var(--blue); }

.lab-grid { display: grid; grid-template-columns: 286px minmax(540px,1fr) 330px; min-height: 700px; }
.controls { border-right: 1px solid var(--line); background: #f7f4ec; }
.control-block { padding: 24px 20px; border-bottom: 1px solid var(--line); }
.control-block h3 { margin: 6px 0 16px; font-size: 18px; }
.preset-list { display: grid; gap: 8px; }
.preset-button { display: grid; grid-template-columns: 38px 1fr auto; min-height: 60px; padding: 8px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: left; cursor: pointer; }
.preset-button > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--soft); color: var(--ink); font: 900 10px/1 var(--mono); }
.preset-button > span:nth-child(2) { min-width: 0; }
.preset-button b { display: block; font-size: 12px; }
.preset-button small { display: block; margin-top: 3px; color: var(--muted); font: 800 10px/1 var(--mono); }
.preset-button i { color: var(--muted); font-style: normal; }
.preset-button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.preset-button[aria-pressed="true"] > span:first-child { background: var(--lime); }
.preset-button[aria-pressed="true"] small, .preset-button[aria-pressed="true"] i { color: #c8cec5; }
.mode-switch, .path-switch { display: grid; grid-template-columns: repeat(3,1fr); padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.path-switch { grid-template-columns: repeat(3,1fr); }
.mode-switch button, .path-switch button { min-height: 40px; padding: 0 7px; border: 0; border-radius: 9px; background: transparent; font-size: 11px; font-weight: 900; cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--coral); color: white; }
.mode-switch button[data-mode="dom"][aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.mode-switch button[data-mode="css"][aria-pressed="true"] { background: var(--blue); color: white; }
.path-switch button[aria-pressed="true"] { background: var(--blue); color: white; }
.control-help { margin: 11px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.support-note { display: flex; min-height: 36px; margin-top: 12px; padding: 6px 8px; align-items: center; gap: 7px; border: 1px solid #b9dbd3; border-radius: 10px; background: #e5fff7; }
.support-note span { flex: none; padding: 5px 6px; border-radius: 6px; background: var(--green); color: white; font: 900 10px/1 var(--mono); white-space: nowrap; }
.support-note code { color: var(--ink); font-size: 10px; font-weight: 900; white-space: nowrap; }
.support-note b { flex: none; margin-left: auto; color: var(--green); font: 900 10px/1 var(--mono); white-space: nowrap; }
.support-note b.is-unsupported { color: #c54334; }
.scan-button { width: 100%; min-height: 46px; margin-top: 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--lime); font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 var(--ink); }
.scan-button:active { translate: 0 3px; box-shadow: 0 2px 0 var(--ink); }

.preview-panel { display: grid; min-width: 0; grid-template-rows: 54px 1fr 58px; background: #dfe3dc; }
.browser-bar { display: flex; padding: 0 18px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #b9bfb7; background: #cfd5cc; }
.browser-bar p { display: flex; margin: 0; align-items: center; gap: 5px; color: #747b73; font: 800 10px/1 var(--mono); }
.browser-bar p i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.browser-bar p i:nth-child(2) { background: var(--yellow); }
.browser-bar p i:nth-child(3) { margin-right: 5px; background: #55cf9e; }
.legend { display: flex; gap: 13px; font-size: 10px; font-weight: 900; }
.legend span { display: flex; align-items: center; gap: 5px; }
.visual-dot, .reading-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--visual); }
.reading-dot { background: var(--reading); }
.preview-canvas { display: grid; min-height: 588px; padding: 34px; position: relative; place-items: center; overflow: hidden; background-color: #f8f6ef; background-image: linear-gradient(rgba(30,34,29,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(30,34,29,.055) 1px,transparent 1px); background-size: 28px 28px; }
.demo-window { width: min(100%,800px); min-height: 440px; padding: 24px; position: relative; z-index: 1; border: 2px solid var(--ink); border-radius: 22px; background: #fffdf7; box-shadow: 10px 12px 0 rgba(23,25,20,.12); }
.demo-header { display: flex; min-height: 52px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.demo-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; }
.demo-brand i { width: 14px; height: 14px; border-radius: 4px; background: var(--lime); box-shadow: 4px 4px 0 var(--blue); }
.demo-header span { color: var(--muted); font: 800 10px/1 var(--mono); }
.demo-intro { display: flex; padding: 28px 0 20px; align-items: end; justify-content: space-between; gap: 20px; }
.demo-intro p { margin: 0; color: var(--green); font: 900 10px/1 var(--mono); letter-spacing: .12em; }
.demo-intro h3 { max-width: 510px; margin: 8px 0 0; font-size: clamp(26px,3vw,42px); line-height: .98; }
.demo-intro > span { padding: 8px 10px; border-radius: 999px; background: var(--ink); color: white; font: 900 10px/1 var(--mono); white-space: nowrap; }
.sequence-layout { position: relative; }
.sequence-item { min-width: 0; position: relative; border: 2px solid var(--ink); border-radius: 16px; background: var(--item-color,var(--surface)); color: var(--ink); cursor: pointer; transition: box-shadow .18s ease, translate .18s ease; }
.sequence-item:hover { translate: 0 -2px; }
.sequence-item.is-selected { box-shadow: 0 0 0 5px var(--lime),0 0 0 7px var(--ink); }
.sequence-item.is-scanning { box-shadow: 0 0 0 6px var(--reading),0 0 0 9px white; }
.item-number { display: grid; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--ink); color: white; font: 900 10px/1 var(--mono); }
.sequence-item small { display: block; margin-bottom: 8px; color: #3d453d; font: 900 10px/1 var(--mono); letter-spacing: .08em; }
.sequence-item strong { display: block; font-size: clamp(18px,1.8vw,28px); line-height: 1; }
.item-copy { display: block; margin: 8px 0 0; font-size: 11px; line-height: 1.45; }

.layout-flex { display: flex; gap: 12px; }
.layout-flex .sequence-item { flex: 1; min-height: 160px; padding: 54px 14px 16px; order: var(--visual-order); }
.layout-grid { display: grid; min-height: 280px; grid-template-columns: 1.25fr .75fr; grid-template-rows: repeat(2,1fr); gap: 12px; grid-template-areas: "primary secondary" "primary action"; }
.layout-grid .sequence-item { padding: 54px 18px 16px; grid-area: var(--area); }
.layout-grid .sequence-item[data-id="story"] strong { font-size: clamp(27px,3vw,43px); }
.layout-absolute { height: 285px; border: 1px dashed #b9beb7; border-radius: 18px; background: #f1eee5; }
.layout-absolute .sequence-item { width: var(--w); min-height: var(--h); padding: 48px 15px 14px; position: absolute; left: var(--x); top: var(--y); }
.layout-responsive { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.layout-responsive .sequence-item { min-height: 132px; padding: 48px 14px 14px; grid-column: span var(--span); order: var(--visual-order); }
.layout-responsive .sequence-item:first-child { min-height: 148px; }

.demo-window.use-css-fix .layout-flex { reading-flow: flex-visual; }
.demo-window.use-css-fix .layout-grid { reading-flow: grid-rows; }
.demo-window.use-css-fix .layout-responsive { reading-flow: grid-order; }
.demo-window.use-css-fix .layout-absolute { reading-flow: source-order; }
.demo-window.use-css-fix .layout-absolute .sequence-item { reading-order: var(--reading-order); }

.path-overlay { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; }
.path-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.path-line.visual { stroke: var(--visual); stroke-dasharray: 8 8; }
.path-line.reading { stroke: var(--reading); }
.path-marker circle { stroke: white; stroke-width: 3; }
.path-marker.visual circle { fill: var(--visual); }
.path-marker.reading circle { fill: var(--reading); }
.path-marker text { fill: white; font: 900 11px/1 var(--mono); text-anchor: middle; dominant-baseline: central; }
.preview-canvas[data-path="visual"] .reading, .preview-canvas[data-path="reading"] .visual { display: none; }
.preview-footer { display: flex; padding: 0 18px; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid #b9bfb7; background: #cfd5cc; }
.preview-footer p { margin: 0; color: #626961; font-size: 10px; font-weight: 800; }
.preview-footer button { min-height: 38px; padding: 0 13px; border: 1px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 11px; font-weight: 900; cursor: pointer; }

.inspector { min-width: 0; background: var(--panel); color: white; }
.inspector-heading { display: flex; min-height: 92px; padding: 20px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #3d413a; }
.inspector-heading strong { display: block; margin-top: 5px; font-size: 17px; }
.inspector-heading > span { padding: 8px 10px; border-radius: 999px; background: var(--coral); font: 900 10px/1 var(--mono); white-space: nowrap; }
.inspector-heading > span.is-good { background: var(--lime); color: var(--ink); }
.order-summary { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #3d413a; }
.order-summary > div { min-width: 0; padding: 18px 14px; }
.order-summary > div + div { border-left: 1px solid #3d413a; }
.order-summary p { display: flex; margin: 0 0 12px; align-items: center; gap: 5px; color: #9da49b; font: 900 10px/1 var(--mono); }
.order-summary ol { display: flex; margin: 0; padding: 0; gap: 4px; list-style: none; flex-wrap: wrap; }
.order-summary li { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #4d534b; border-radius: 7px; color: white; font: 900 10px/1 var(--mono); }
.order-summary li.is-different { border-color: var(--reading); color: var(--reading); }
.selected-block, .reason-block, .code-block { padding: 19px; border-bottom: 1px solid #3d413a; }
.selected-block > div { display: grid; grid-template-columns: 36px 1fr; margin-top: 12px; align-items: center; column-gap: 10px; }
.selected-block span { display: grid; width: 36px; height: 36px; grid-row: span 2; place-items: center; border-radius: 10px; background: var(--lime); color: var(--ink); font: 900 10px/1 var(--mono); }
.selected-block strong { font-size: 15px; }
.selected-block small { color: #aeb5ac; font: 800 10px/1.3 var(--mono); }
.reason-block strong { display: block; margin-top: 12px; color: var(--lime); font-size: 14px; line-height: 1.35; }
.reason-block > span { display: block; margin-top: 8px; color: #b7bdb5; font-size: 11px; line-height: 1.6; }
.inspector-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inspector-label button { min-height: 32px; padding: 0 10px; border: 1px solid #4d534b; border-radius: 8px; background: transparent; color: white; font-size: 10px; font-weight: 900; cursor: pointer; }
.code-block pre { min-height: 148px; margin: 12px 0 0; padding: 14px; overflow: auto; border: 1px solid #4d534b; border-radius: 11px; background: #121510; color: #dce2da; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }

.guide { margin-top: 18px; }
.rule-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.rule-grid article { min-height: 170px; padding: 28px; border-right: 1px solid var(--line); }
.rule-grid article:last-child { border-right: 0; }
.rule-grid article > span { color: var(--coral); font: 900 11px/1 var(--mono); }
.rule-grid h3 { margin: 15px 0 9px; font-size: 20px; }
.rule-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.rule-grid code { padding: 2px 4px; border-radius: 4px; background: var(--soft); font-size: 11px; }
.guide-footer { display: flex; padding: 24px 28px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); background: #f7f4ec; }
.guide-footer strong { font-size: 14px; }
.guide-footer p { max-width: 800px; margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.guide-footer > div:last-child { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.guide-footer a { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 10px; font-weight: 900; text-decoration: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 20; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: white; font-size: 11px; font-weight: 900; opacity: 0; translate: -50% 12px; pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; translate: -50% 0; }

@media (max-width: 1320px) {
  .hero { display: block; min-height: 0; padding-top: 30px; }
  .hero-actions { margin-top: 24px; }
  .lab-grid { grid-template-columns: 260px minmax(500px,1fr); }
  .inspector { grid-column: 1 / -1; display: grid; grid-template-columns: 270px 1fr 1fr; }
  .inspector-heading { grid-column: 1; }
  .order-summary { grid-column: 1; grid-row: 2 / span 2; grid-template-columns: 1fr; border-right: 1px solid #3d413a; }
  .order-summary > div + div { border-left: 0; border-top: 1px solid #3d413a; }
  .selected-block { grid-column: 2; grid-row: 1; }
  .reason-block { grid-column: 2; grid-row: 2 / span 2; border-right: 1px solid #3d413a; }
  .code-block { grid-column: 3; grid-row: 1 / span 3; }
}

@media (max-width: 920px) {
  .page { width: min(100% - 24px,780px); padding-top: 18px; }
  h1 { font-size: clamp(42px,8vw,68px); white-space: normal; }
  .series-nav { grid-template-columns: repeat(4,minmax(170px,1fr)); overflow-x: auto; overscroll-behavior-inline: contain; }
  .series-nav > p { grid-column: 1 / -1; min-height: 22px; padding-inline: 4px; }
  .lab-grid { display: block; }
  .controls { display: grid; grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--line); }
  .control-block { border-right: 1px solid var(--line); }
  .control-block:nth-child(2) { border-right: 0; }
  .control-block:nth-child(3) { grid-column: 1 / -1; border-right: 0; }
  .preview-canvas { min-height: 540px; padding: 24px; }
  .inspector { display: grid; grid-template-columns: 1fr 1fr; }
  .inspector-heading { grid-column: 1 / -1; }
  .order-summary { grid-column: 1; grid-row: auto; border-right: 1px solid #3d413a; }
  .selected-block { grid-column: 2; grid-row: auto; }
  .reason-block { grid-column: 1; grid-row: auto; }
  .code-block { grid-column: 2; grid-row: auto; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .guide-footer { align-items: flex-start; flex-direction: column; }
  .guide-footer > div:last-child { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .page { width: 100%; padding-top: 0; }
  .hero { padding: 28px 16px 24px; }
  h1 { font-size: 42px; }
  .lead { margin-top: 15px; font-size: 15px; line-height: 1.5; }
  .hero-actions { width: 100%; }
  .hero-actions button { flex: 1; min-height: 44px; padding-inline: 10px; }
  .series-nav { margin-inline: 12px; }
  .lab, .guide { border-inline: 0; border-radius: 0; }
  .section-heading { min-height: 88px; padding: 14px; }
  .section-number { width: 44px; height: 44px; border-radius: 13px; }
  .section-heading h2 { font-size: 20px; }
  .heading-status, .guide-note { display: none; }
  .controls { display: block; }
  .control-block { border-right: 0; }
  .preview-panel { grid-template-rows: 50px 1fr auto; }
  .browser-bar { padding-inline: 12px; }
  .legend { gap: 7px; }
  .preview-canvas { min-height: 520px; padding: 16px 10px; overflow: auto; place-items: start center; }
  .demo-window { min-width: 540px; min-height: 440px; }
  .preview-footer { min-height: 58px; padding: 9px 12px; }
  .preview-footer p { display: none; }
  .preview-footer button { width: 100%; }
  .inspector { display: block; }
  .order-summary { grid-template-columns: 1fr 1fr; border-right: 0; }
  .order-summary > div + div { border-top: 0; border-left: 1px solid #3d413a; }
  .reason-block { border-right: 0; }
  .rule-grid article, .guide-footer { padding-inline: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}