: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;
  --ring-width: 3px;
  --ring-offset: 3px;
  --ring-primary: #1c5dff;
  --ring-contrast: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  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 { 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; }
h1 code { font-family: inherit; }
.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; }

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

.lab-grid { display: grid; grid-template-columns: 306px minmax(560px,1fr) 360px; min-height: 760px; }
.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; }
.pattern-list { display: grid; gap: 7px; }
.pattern-button { display: grid; grid-template-columns: 36px 1fr auto; min-height: 58px; padding: 8px 10px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; cursor: pointer; }
.pattern-button > span:first-child { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--soft); color: var(--green); font: 900 10px/1 var(--mono); }
.pattern-button b, .pattern-button small { display: block; }
.pattern-button b { font-size: 12px; }
.pattern-button small { margin-top: 3px; color: var(--muted); font: 800 10px/1 var(--mono); }
.pattern-button i { color: var(--muted); font-style: normal; }
.pattern-button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: white; }
.pattern-button[aria-pressed="true"] > span:first-child { background: var(--lime); color: var(--ink); }
.pattern-button[aria-pressed="true"] small, .pattern-button[aria-pressed="true"] i { color: #cbd0c9; }

.range-control { display: block; margin-top: 14px; }
.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; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.color-grid label { display: grid; grid-template-columns: 29px 1fr; min-width: 0; padding: 8px; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.color-grid label > span { grid-column: 1 / -1; color: var(--muted); font: 800 10px/1 var(--mono); }
.color-grid input { width: 29px; height: 29px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; }
.color-grid output { min-width: 0; overflow: hidden; font: 900 10px/1 var(--mono); text-overflow: ellipsis; }
.color-grid label.is-disabled { opacity: .35; pointer-events: none; }
.theme-switch { display: grid; grid-template-columns: repeat(3,1fr); padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.theme-switch button { min-height: 39px; padding: 0 4px; border: 0; border-radius: 9px; background: transparent; font: 900 10px/1 var(--mono); cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--blue); color: white; }
.practice-block { padding: 19px 20px 24px; }
.practice-block p { margin: 0 0 13px; font-size: 11px; line-height: 1.5; }
.practice-block p strong, .practice-block p span { display: block; }
.practice-block p span { color: var(--muted); }
.practice-block button { display: flex; width: 100%; min-height: 49px; padding: 0 13px; align-items: center; justify-content: center; gap: 8px; 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 button:active { translate: 0 3px; box-shadow: 0 2px 0 var(--ink); }
.practice-block kbd { padding: 4px 6px; border: 1px solid var(--ink); border-radius: 5px; background: white; font-size: 10px; }

.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: 12px; 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; }
.input-state { display: flex; gap: 6px; }
.input-state span, .input-state b { padding: 7px 9px; border-radius: 999px; background: var(--green); color: white; font: 900 10px/1 var(--mono); }
.input-state b { background: var(--lime); color: var(--ink); }
.preview-canvas { display: grid; min-height: 648px; padding: 30px; 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-surface { width: min(100%,820px); min-height: 540px; position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 22px; background: #fdfbf5; box-shadow: 11px 13px 0 rgba(23,25,20,.13); }
.demo-surface a { color: inherit; text-decoration: none; }
.demo-header { display: grid; grid-template-columns: 1fr auto auto; min-height: 68px; padding: 0 18px; align-items: center; gap: 18px; border-bottom: 2px solid var(--ink); background: #fdfbf5; }
.demo-brand { display: inline-flex; width: max-content; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; }
.demo-brand i { width: 17px; height: 17px; border: 2px solid var(--ink); border-radius: 5px; background: var(--lime); }
.demo-header nav { display: flex; gap: 17px; }
.demo-header nav a { padding: 8px 3px; font-size: 11px; font-weight: 800; }
.icon-button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--ink); color: white; cursor: pointer; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.demo-body { padding: 28px; }
.demo-intro > p { margin: 0; color: var(--green); font: 900 10px/1 var(--mono); letter-spacing: .12em; }
.demo-intro h3 { margin: 9px 0 17px; font-size: clamp(30px,3.1vw,51px); line-height: .92; letter-spacing: 0; }
.filter-row { display: flex; gap: 7px; }
.filter-row button { min-height: 34px; padding: 0 13px; border: 1px solid #aeb4ac; border-radius: 999px; background: transparent; font-size: 10px; font-weight: 900; cursor: pointer; }
.filter-row button:first-child { border-color: var(--ink); background: var(--ink); color: white; }
.showcase-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 12px; margin-top: 23px; }
.showcase-card { display: grid; min-height: 158px; padding: 18px; position: relative; align-content: space-between; overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; }
.showcase-card.coral { background: var(--coral); }
.showcase-card.blue { background: var(--blue); }
.showcase-card span { position: relative; z-index: 1; font: 900 10px/1 var(--mono); }
.showcase-card strong { position: relative; z-index: 1; font-size: 28px; line-height: .9; }
.showcase-card i { width: 114px; height: 114px; position: absolute; top: 23px; right: 18px; border: 3px solid var(--ink); border-radius: 50%; }
.showcase-card i::after { position: absolute; inset: 22px; border: 3px solid var(--ink); border-radius: 50%; background: var(--lime); content: ""; }
.showcase-card.blue i { width: 120px; height: 26px; top: 67px; right: -18px; border-radius: 999px; background: var(--yellow); rotate: -18deg; }
.showcase-card.blue i::after { inset: 34px 20px auto; height: 22px; border-radius: 999px; background: var(--coral); }
.demo-form { margin-top: 14px; }
.demo-form label { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 900; }
.demo-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.demo-form input { width: 100%; min-width: 0; min-height: 43px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 10px; background: white; font-size: 12px; }
.demo-form button { width: auto; min-width: 108px; min-height: 43px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--lime); font-size: 11px; font-weight: 900; white-space: nowrap; cursor: pointer; }

/* The five comparison modes apply only inside the demo. */
.demo-surface.mode-ua [data-focus-demo]:focus {
  outline: revert !important;
  outline-offset: revert !important;
  box-shadow: none !important;
}
.demo-surface.mode-hidden [data-focus-demo]:focus { outline: none !important; box-shadow: none !important; }
.demo-surface.mode-focus [data-focus-demo]:focus {
  outline: var(--ring-width) solid var(--ring-primary) !important;
  outline-offset: var(--ring-offset) !important;
  box-shadow: none !important;
}
.demo-surface.mode-visible [data-focus-demo]:focus { outline: none; box-shadow: none; }
.demo-surface.mode-visible [data-focus-demo]:focus-visible {
  outline: var(--ring-width) solid var(--ring-primary) !important;
  outline-offset: var(--ring-offset) !important;
}
.demo-surface.mode-two-tone [data-focus-demo]:focus { outline: none; box-shadow: none; }
.demo-surface.mode-two-tone [data-focus-demo]:focus-visible {
  outline: var(--ring-width) solid var(--ring-contrast) !important;
  outline-offset: var(--ring-offset) !important;
  box-shadow: 0 0 0 calc(var(--ring-width) * 2 + var(--ring-offset)) var(--ring-primary) !important;
}
.preview-canvas.theme-dark .demo-surface { background: #20231e; color: #fdfbf5; }
.preview-canvas.theme-dark .demo-header { border-color: #fdfbf5; background: #20231e; }
.preview-canvas.theme-dark .demo-brand i { border-color: #fdfbf5; }
.preview-canvas.theme-dark .icon-button { border-color: #fdfbf5; background: #fdfbf5; color: var(--ink); }
.preview-canvas.theme-dark .filter-row button { border-color: #bec3bc; color: #fdfbf5; }
.preview-canvas.theme-dark .filter-row button:first-child { background: #fdfbf5; color: var(--ink); }
.preview-canvas.theme-dark .demo-form input { border-color: #fdfbf5; }
.preview-canvas.theme-dark .demo-form button { border-color: #fdfbf5; color: var(--ink); }
.preview-canvas.theme-light .showcase-card { background: #fdfbf5; }
.preview-canvas.theme-light .showcase-card.blue { background: #e8ebff; }

.focus-caption { display: flex; width: min(100% - 74px,740px); min-height: 54px; padding: 11px 15px; position: absolute; left: 50%; bottom: 42px; z-index: 30; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #3d413a; border-radius: 13px; background: rgba(23,25,20,.95); color: white; translate: -50% 0; }
.focus-caption span { flex: 0 0 auto; color: var(--lime); font: 900 10px/1 var(--mono); }
.focus-caption p { margin: 0; color: #d6d9d3; font-size: 11px; font-weight: 800; text-align: right; }
.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 { display: flex; margin: 0; align-items: center; gap: 7px; color: #626961; font-size: 10px; font-weight: 800; }
.preview-footer p i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.preview-footer button { min-height: 34px; padding: 0 11px; border: 1px solid #929990; border-radius: 8px; background: #edf0e9; font: 900 10px/1 var(--mono); cursor: pointer; }

.inspector { overflow: hidden; border-left: 1px solid #3c403a; background: var(--panel); color: white; }
.inspector-heading { display: flex; min-height: 78px; padding: 18px 19px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #3d413a; }
.inspector-heading p, .why-block > p, .inspector-label p, .check-block > p { color: #858d84; }
.inspector-heading code { display: block; max-width: 215px; margin-top: 8px; overflow: hidden; color: white; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.inspector-heading > span { padding: 8px 10px; border-radius: 999px; background: #343931; color: #cbd0c9; font: 900 10px/1 var(--mono); }
.inspector-heading > span.is-visible { background: var(--lime); color: var(--ink); }
.inspector-heading > span.is-hidden { background: var(--coral); color: white; }
.focus-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; border-bottom: 1px solid #3d413a; }
.focus-summary div { min-width: 0; min-height: 72px; padding: 16px 12px; border-right: 1px solid #3d413a; }
.focus-summary div:last-child { border-right: 0; }
.focus-summary dt { color: #858d84; font: 900 10px/1 var(--mono); letter-spacing: .1em; }
.focus-summary dd { margin: 10px 0 0; overflow: hidden; color: var(--lime); font: 900 10px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.why-block, .code-block, .check-block { padding: 20px; border-bottom: 1px solid #3d413a; }
.why-block strong { display: block; margin-top: 12px; color: var(--lime); font-size: 15px; line-height: 1.35; }
.why-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 > div > span { display: block; margin-top: 5px; color: #9ea59d; font: 800 10px/1 var(--mono); }
.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: 230px; max-height: 278px; 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.58; white-space: pre-wrap; }
.check-block ul { display: grid; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }
.check-block li { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; color: #b7bdb5; font-size: 10px; line-height: 1.45; }
.check-block li::before { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #343931; color: #9ea59d; content: "·"; font-weight: 900; }
.check-block li.pass::before { background: var(--lime); color: var(--ink); content: "✓"; }
.check-block li.fail::before { background: var(--coral); color: white; content: "!"; }

.guide { margin-top: 18px; }
.rule-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.rule-grid article { min-height: 185px; padding: 25px; border-right: 1px solid var(--line); }
.rule-grid article:last-child { border-right: 0; }
.rule-grid span { color: var(--green); font: 900 10px/1 var(--mono); }
.rule-grid h3 { margin: 34px 0 8px; font-size: 18px; }
.rule-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.rule-grid code { color: var(--blue); font-weight: 900; }
.guide-footer { display: flex; min-height: 92px; padding: 20px 25px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); background: #f7f4ec; }
.guide-footer p { max-width: 900px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.guide-footer 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: 10px; color: var(--ink); background: var(--surface); font-size: 10px; font-weight: 900; text-decoration: none; }

.toast { min-width: 180px; padding: 13px 16px; position: fixed; right: 22px; bottom: 22px; z-index: 100; border-radius: 12px; background: var(--ink); color: white; font-size: 12px; font-weight: 900; text-align: center; opacity: 0; translate: 0 12px; transition: .2s ease; pointer-events: none; }
.toast.is-visible { opacity: 1; translate: 0 0; }

@media (max-width: 1280px) {
  .page { width: min(100% - 28px,1180px); }
  h1 { font-size: min(5.2vw,66px); }
  .lab-grid { grid-template-columns: 270px minmax(480px,1fr) 320px; }
  .preview-canvas { padding: 22px; }
  .demo-body { padding: 23px; }
  .demo-intro h3 { font-size: 38px; }
}

@media (max-width: 1040px) {
  .hero { padding-inline: 4px; }
  .hero-actions { display: none; }
  h1 { font-size: clamp(39px,7.4vw,70px); white-space: normal; }
  .lab-grid { grid-template-columns: 280px 1fr; }
  .inspector { grid-column: 1 / -1; border-top: 1px solid #3d413a; border-left: 0; }
  .code-block pre { min-height: 160px; }
  .rule-grid { grid-template-columns: 1fr 1fr; }
  .rule-grid article:nth-child(2) { border-right: 0; }
  .rule-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .page { width: min(100% - 18px,680px); padding-top: 18px; }
  h1 { font-size: clamp(37px,11vw,58px); }
  .lead { margin-top: 16px; }
  .section-heading { min-height: 94px; padding: 16px; }
  .heading-status, .guide-note { display: none; }
  .section-heading h2 { font-size: 24px; }
  .lab-grid { display: block; }
  .controls { border-right: 0; }
  .pattern-list { grid-template-columns: 1fr 1fr; }
  .preview-canvas { min-height: 580px; padding: 18px 12px 84px; place-items: start center; }
  .demo-surface { width: 100%; min-width: 0; min-height: 0; }
  .demo-header { grid-template-columns: auto 1fr auto; padding-inline: 10px; gap: 7px; }
  .demo-header nav { justify-self: center; gap: 3px; }
  .demo-header nav a { padding-inline: 2px; font-size: 10px; }
  .demo-brand { font-size: 12px; }
  .demo-body { padding: 20px 14px; }
  .demo-intro h3 { font-size: 30px; }
  .showcase-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .showcase-card { min-height: 145px; padding: 13px; }
  .showcase-card strong { font-size: 22px; }
  .showcase-card i { width: 92px; height: 92px; right: 8px; }
  .showcase-card.blue i { width: 96px; right: -26px; }
  .focus-caption { bottom: 19px; }
  .rule-grid { grid-template-columns: 1fr; }
  .rule-grid article, .rule-grid article:nth-child(2) { min-height: 145px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-grid article:last-child { border-bottom: 0; }
  .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; }
  .toast { transition: none; }
}