:root {
  --paper: #f2eee5;
  --surface: #fffdf7;
  --ink: #171914;
  --muted: #697069;
  --line: #c8cdc5;
  --green: #008b72;
  --lime: #b5ff2d;
  --coral: #ff6855;
  --blue: #6d73f5;
  --yellow: #ffd86d;
  --soft: #e4e8e0;
  --panel: #20231e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --obstacle-size: 72px;
  --safe-gap: 16px;
}

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

.hero { display: flex; 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, .why-block > p, .inspector-label p, .check-block > 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(4.75vw, 78px); 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 a, .hero-actions button { display: grid; min-height: 52px; padding: 0 17px; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.hero-actions button.dark { border-color: var(--ink); background: var(--ink); color: white; }

.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 span { color: var(--blue); }
.heading-status b { background: var(--coral); color: white; }
.heading-status b.is-safe { background: var(--lime); color: var(--ink); }
.guide-note { margin-left: auto; color: var(--blue); }

.lab-grid { display: grid; grid-template-columns: 306px minmax(580px,1fr) 360px; min-height: 780px; }
.controls { border-right: 1px solid var(--line); background: #f7f4ec; }
.control-block { padding: 23px 20px; border-bottom: 1px solid var(--line); }
.compact-block { padding-block: 20px; }
.control-block h3 { margin: 6px 0 16px; font-size: 18px; }
.scenario-list { display: grid; gap: 7px; }
.scenario-button { display: grid; min-height: 58px; padding: 8px 10px; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; }
.scenario-button b { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--soft); color: var(--green); font: 900 10px/1 var(--mono); }
.scenario-button i { color: var(--muted); font-style: normal; }
.scenario-button strong, .scenario-button small { display: block; }
.scenario-button strong { font-size: 11px; }
.scenario-button small { margin-top: 3px; color: var(--muted); font: 800 10px/1 var(--mono); }
.scenario-button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.scenario-button[aria-pressed="true"] b { background: var(--lime); color: var(--ink); }
.scenario-button[aria-pressed="true"] small, .scenario-button[aria-pressed="true"] i { color: #cbd0c9; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.mode-switch button { min-height: 43px; 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="fixed"][aria-pressed="true"] { background: var(--lime); color: var(--ink); }
.range-control { display: block; margin-top: 16px; }
.range-control > span { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; font-weight: 800; }
.range-control output { color: var(--blue); font: 900 10px/1 var(--mono); }
input[type="range"] { width: 100%; margin: 12px 0 0; accent-color: var(--blue); cursor: pointer; }
.practice-block { padding: 20px; }
.practice-block p { margin: 0 0 13px; font-size: 11px; line-height: 1.55; }
.practice-block p strong, .practice-block p span { display: block; }
.practice-block p span { color: var(--muted); }
.practice-block button { width: 100%; min-height: 51px; padding: 0 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); }
.practice-block kbd { padding: 4px 7px; border-radius: 6px; background: var(--ink); color: white; font-size: 10px; }

.preview-panel { display: grid; min-width: 0; grid-template-rows: 48px 1fr 56px; background: #dfe3dc; }
.browser-bar, .preview-footer { display: flex; padding: 0 18px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #bcc3ba; }
.browser-bar p { display: flex; margin: 0; align-items: center; color: #717970; font: 800 10px/1 var(--mono); }
.browser-bar p i { width: 8px; height: 8px; margin-right: 5px; 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: 10px; background: #5fd6a7; }
.browser-bar > div { display: flex; gap: 8px; }
.browser-bar span, .browser-bar b { padding: 8px 10px; border-radius: 999px; background: var(--green); color: white; font: 900 10px/1 var(--mono); }
.browser-bar b { background: var(--coral); }
.browser-bar b.is-safe { background: var(--lime); color: var(--ink); }
.preview-canvas { display: grid; min-height: 670px; padding: 26px 22px 94px; position: relative; place-items: center; overflow: hidden; background-color: #fbfaf4; background-image: linear-gradient(#e9e7df 1px,transparent 1px),linear-gradient(90deg,#e9e7df 1px,transparent 1px); background-size: 28px 28px; }
.demo-shell { width: min(100%,790px); height: 548px; position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 20px; background: white; box-shadow: 12px 14px 0 rgba(23,25,20,.12); }
.demo-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--blue) transparent; }
.demo-page { min-height: 1180px; padding-bottom: 46px; background: #fffdf7; transition: padding .2s ease; }
.demo-site-header { display: flex; height: 66px; padding: 0 22px; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--ink); background: #fffdf7; }
.demo-logo { color: var(--ink); font: 900 13px/1 var(--mono); text-decoration: none; }
.demo-site-header nav { display: flex; align-items: center; gap: 15px; }
.demo-site-header nav a { color: var(--ink); font-size: 10px; font-weight: 900; text-decoration: none; }
.round-button { width: 42px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: var(--ink); color: white; font-size: 10px; font-weight: 900; cursor: pointer; }
.demo-hero { min-height: 300px; padding: 55px 34px 30px; position: relative; overflow: hidden; background: var(--lime); border-bottom: 2px solid var(--ink); }
.demo-hero::after { width: 180px; height: 180px; position: absolute; top: 52px; right: 36px; border: 3px solid var(--ink); border-radius: 50%; background: var(--blue); box-shadow: inset 0 0 0 34px var(--coral); content: ""; }
.demo-hero p, .demo-section header p { margin: 0; color: var(--green); font: 900 10px/1 var(--mono); letter-spacing: .14em; }
.demo-hero h3 { margin: 17px 0 25px; position: relative; z-index: 1; font-size: 45px; line-height: .88; letter-spacing: 0; }
.primary-action { min-height: 38px; padding: 0 14px; position: relative; z-index: 1; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); font-size: 10px; font-weight: 900; cursor: pointer; }
.demo-section { padding: 34px; border-bottom: 2px solid var(--ink); }
.demo-section > header { display: flex; margin-bottom: 21px; align-items: flex-end; justify-content: space-between; }
.demo-section h4 { margin: 6px 0 0; font-size: 30px; line-height: 1; }
.demo-section > header > a { color: var(--ink); font-size: 10px; font-weight: 900; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project-card { min-height: 170px; padding: 17px; position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 15px; color: var(--ink); text-decoration: none; }
.project-card.coral { background: var(--coral); }
.project-card.blue { background: var(--blue); }
.project-card small, .project-card strong { display: block; position: relative; z-index: 1; }
.project-card small { font: 900 9px/1 var(--mono); }
.project-card strong { margin-top: 53px; font-size: 26px; line-height: .86; }
.project-card i { width: 96px; height: 96px; position: absolute; top: 28px; right: 20px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.project-card.blue i { height: 25px; top: 57px; right: -10px; border-radius: 999px; background: var(--lime); rotate: -17deg; }
.settings-section { border-bottom: 0; }
.setting-row { display: flex; min-height: 68px; padding: 13px 16px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.setting-row + .setting-row { margin-top: 8px; }
.setting-row b, .setting-row small { display: block; }
.setting-row b { font-size: 12px; }
.setting-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.setting-row input { width: 20px; height: 20px; accent-color: var(--blue); }
.action-row { display: flex; margin-top: 20px; justify-content: flex-end; gap: 8px; }
.action-row button { min-height: 41px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 11px; font-weight: 900; cursor: pointer; }
.action-row .save-button { background: var(--lime); }
.terms { margin: 18px 0 0; color: var(--muted); font-size: 10px; }
.terms a { color: var(--ink); font-weight: 900; }
.demo-focus { scroll-margin-block: var(--safe-gap); }
.demo-focus:focus-visible { position: relative; z-index: 6; outline: 4px solid white; outline-offset: 2px; box-shadow: 0 0 0 8px #1c5dff; }

.obstacle { display: flex; position: absolute; z-index: 12; pointer-events: none; color: white; background: var(--coral); box-shadow: 0 5px 18px rgba(23,25,20,.28); transition: inset .2s ease, width .2s ease, height .2s ease, background .2s ease; }
.obstacle span { font: 900 9px/1 var(--mono); letter-spacing: .12em; }
.obstacle strong { font-size: 13px; }
.obstacle i { position: relative; width: 29px; height: 29px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; }
.obstacle i::before, .obstacle i::after { width: 9px; height: 2px; position: absolute; top: 12px; left: 8px; background: currentColor; content: ""; }
.obstacle i::after { rotate: 90deg; }
.obstacle-header { height: var(--obstacle-size); inset: 0 0 auto; padding: 0 22px; align-items: center; justify-content: space-between; }
.obstacle-footer, .obstacle-cookie { height: var(--obstacle-size); inset: auto 0 0; padding: 0 22px; align-items: center; justify-content: space-between; }
.obstacle-float { width: 205px; height: calc(var(--obstacle-size) + 36px); inset: auto 16px 16px auto; padding: 17px; flex-direction: column; justify-content: space-between; border: 2px solid var(--ink); border-radius: 16px; background: var(--blue); }
.obstacle-float i { position: absolute; top: 15px; right: 15px; }
.obstacle-cookie { min-height: 92px; height: var(--obstacle-size); background: var(--ink); }
.demo-shell.is-fixed .obstacle { background: var(--green); }
.demo-shell.is-fixed[data-scenario="header"] .demo-scroll { scroll-padding-block-start: calc(var(--obstacle-size) + var(--safe-gap)); }
.demo-shell.is-fixed[data-scenario="footer"], .demo-shell.is-fixed[data-scenario="cookie"] { --bottom-safe: calc(var(--obstacle-size) + var(--safe-gap)); }
.demo-shell.is-fixed[data-scenario="footer"] .demo-scroll, .demo-shell.is-fixed[data-scenario="cookie"] .demo-scroll { scroll-padding-block-end: var(--bottom-safe); }
.demo-shell.is-fixed[data-scenario="footer"] .demo-page, .demo-shell.is-fixed[data-scenario="cookie"] .demo-page { padding-bottom: calc(var(--obstacle-size) + var(--safe-gap) + 46px); }
.demo-shell.is-fixed[data-scenario="float"] .demo-page { padding-inline-end: calc(205px + var(--safe-gap)); }
.demo-shell.is-fixed[data-scenario="float"] .demo-scroll { scroll-padding-block-end: calc(var(--obstacle-size) + 52px); }

.focus-caption { display: flex; min-height: 59px; padding: 0 14px; position: absolute; right: 34px; bottom: 18px; left: 34px; z-index: 20; align-items: center; gap: 13px; border: 2px solid var(--ink); border-radius: 13px; background: var(--panel); color: white; box-shadow: 0 6px 0 rgba(23,25,20,.25); }
.focus-caption span { min-width: 76px; color: var(--lime); font: 900 10px/1 var(--mono); }
.focus-caption p { margin: 0; font-size: 11px; font-weight: 750; line-height: 1.35; }
.focus-caption.is-danger span { color: var(--coral); }
.preview-footer { border-top: 1px solid #bcc3ba; border-bottom: 0; background: #d3d8d0; }
.preview-footer p { display: flex; margin: 0; align-items: center; gap: 8px; color: #5f675f; font-size: 10px; font-weight: 800; }
.preview-footer p i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 3px; background: var(--coral); }
.preview-footer button { min-height: 36px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--surface); font-size: 10px; font-weight: 900; cursor: pointer; }

.inspector { min-width: 0; color: #f8faf5; background: var(--panel); }
.inspector-heading { display: flex; min-height: 101px; padding: 21px; align-items: center; justify-content: space-between; border-bottom: 1px solid #41463e; }
.inspector-heading p { color: #90978e; font-size: 10px; }
.inspector-heading code { display: block; max-width: 240px; margin-top: 9px; overflow: hidden; color: white; font-size: 14px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.inspector-heading > span { padding: 8px 10px; border-radius: 999px; background: #555b53; font: 900 10px/1 var(--mono); }
.inspector-heading > span.is-danger { background: var(--coral); }
.inspector-heading > span.is-safe { background: var(--lime); color: var(--ink); }
.focus-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-bottom: 1px solid #41463e; }
.focus-summary div { min-width: 0; padding: 17px 13px; border-right: 1px solid #41463e; }
.focus-summary div:last-child { border-right: 0; }
.focus-summary dt { color: #90978e; font: 900 9px/1 var(--mono); letter-spacing: .1em; }
.focus-summary dd { margin: 8px 0 0; color: var(--lime); font: 900 14px/1 var(--mono); }
.why-block, .code-block, .check-block { padding: 21px; border-bottom: 1px solid #41463e; }
.why-block > p, .inspector-label p, .check-block > p { color: #90978e; font-size: 10px; }
.why-block strong, .why-block span { display: block; }
.why-block strong { margin-top: 13px; color: var(--lime); font-size: 18px; line-height: 1.25; }
.why-block span { margin-top: 9px; color: #c5cbc2; font-size: 11px; line-height: 1.55; }
.inspector-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inspector-label span { display: block; margin-top: 5px; color: var(--lime); font: 900 9px/1 var(--mono); }
.inspector-label button { min-height: 32px; padding: 0 10px; border: 1px solid #596057; border-radius: 8px; background: transparent; color: white; font-size: 10px; font-weight: 900; cursor: pointer; }
.code-block pre { min-height: 172px; margin: 15px 0 0; padding: 14px; overflow: auto; border: 1px solid #465046; border-radius: 11px; background: #151813; color: #f7faf4; font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.check-block ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.check-block li { padding-left: 18px; position: relative; color: #c5cbc2; font-size: 10px; line-height: 1.35; }
.check-block li::before { width: 9px; height: 9px; position: absolute; top: 2px; left: 0; border-radius: 3px; background: #687066; content: ""; }
.check-block li.pass::before { background: var(--lime); }
.check-block li.fail::before { background: var(--coral); }

.guide { margin-top: 22px; }
.rule-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.rule-grid article { min-height: 210px; padding: 28px 25px; border-right: 1px solid var(--line); }
.rule-grid article:last-child { border-right: 0; }
.rule-grid article > span { color: var(--green); font: 900 10px/1 var(--mono); }
.rule-grid h3 { margin: 42px 0 10px; font-size: 21px; }
.rule-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.guide-footer { display: flex; padding: 22px 25px; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); background: #f7f4ec; }
.guide-footer p { max-width: 870px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.guide-footer p strong { color: var(--ink); }
.guide-footer div { display: flex; flex: 0 0 auto; gap: 8px; }
.guide-footer a { padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 10px; font-weight: 900; text-decoration: none; }
.toast { padding: 12px 16px; position: fixed; right: 20px; bottom: 20px; z-index: 100; translate: 0 16px; border-radius: 12px; opacity: 0; pointer-events: none; background: var(--ink); color: white; font-size: 12px; font-weight: 900; transition: .2s ease; }
.toast.is-visible { translate: 0; opacity: 1; }

@media (max-width: 1380px) {
  .lab-grid { grid-template-columns: 292px minmax(540px,1fr) 330px; }
  .preview-canvas { padding-inline: 16px; }
  .demo-shell { height: 525px; }
}

@media (max-width: 1160px) {
  .page { width: min(1120px,calc(100% - 28px)); }
  .hero { align-items: flex-start; flex-direction: column; }
  h1 { font-size: clamp(46px,7vw,72px); }
  .lab-grid { grid-template-columns: 290px minmax(0,1fr); }
  .inspector { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .inspector-heading, .focus-summary { min-height: 112px; }
  .why-block, .check-block { border-left: 1px solid #41463e; }
  .rule-grid { grid-template-columns: 1fr 1fr; }
  .rule-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .rule-grid article:nth-child(2) { border-right: 0; }
}

@media (max-width: 760px) {
  .page { width: min(100% - 18px,680px); padding-top: 18px; }
  .hero { padding-inline: 8px; }
  h1 { font-size: clamp(36px,10.5vw,56px); white-space: normal; }
  .lead { margin-top: 16px; }
  .hero-actions { width: 100%; flex-wrap: wrap; }
  .hero-actions a { width: 100%; }
  .hero-actions button { flex: 1; }
  .section-heading { min-height: 94px; padding: 16px; }
  .heading-status, .guide-note { display: none; }
  .section-heading h2 { font-size: 23px; }
  .lab-grid { display: block; }
  .controls { border-right: 0; }
  .preview-canvas { min-height: 620px; padding: 18px 10px 92px; }
  .demo-shell { width: 100%; height: 515px; }
  .demo-site-header { padding-inline: 12px; }
  .demo-site-header nav { gap: 7px; }
  .demo-site-header nav a { display: none; }
  .demo-hero { padding-inline: 18px; }
  .demo-hero::after { width: 130px; height: 130px; right: 12px; }
  .demo-hero h3 { font-size: 36px; }
  .demo-section { padding: 25px 18px; }
  .project-card { min-height: 145px; padding: 12px; }
  .project-card strong { font-size: 21px; }
  .project-card i { width: 74px; height: 74px; right: 8px; }
  .focus-caption { right: 20px; left: 20px; }
  .obstacle-float { width: 178px; }
  .demo-shell.is-fixed[data-scenario="float"] .demo-page { padding-inline-end: calc(178px + var(--safe-gap)); }
  .preview-footer { padding-inline: 11px; }
  .preview-footer p { max-width: 66%; }
  .inspector { display: block; }
  .why-block, .check-block { border-left: 0; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid article { min-height: 155px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-grid h3 { margin-top: 22px; }
  .guide-footer { align-items: flex-start; flex-direction: column; }
  .guide-footer div { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-page, .obstacle, .toast { transition: none; }
}