:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  --canvas: oklch(0.96 0.008 95);
  --surface: oklch(0.99 0.004 95);
  --surface-2: oklch(0.965 0.007 95);
  --text: oklch(0.25 0.02 100);
  --text-2: oklch(0.52 0.02 100);
  --hairline: oklch(0.90 0.012 95);
  --divider: oklch(0.82 0.015 95);
  --brand: oklch(0.45 0.07 120);
  --primary: oklch(0.48 0.19 262);
  --primary-fg: #fff;
  --nav-selected: oklch(0.93 0.03 262);
  --income: oklch(0.50 0.12 150);
  --income-bg: oklch(0.94 0.04 150);
  --review: oklch(0.55 0.13 65);
  --review-bg: oklch(0.95 0.05 75);
  --warning: oklch(0.56 0.14 55);
  --warning-bg: oklch(0.95 0.05 65);
  --info-bg: oklch(0.94 0.03 262);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--text); }
body, button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
p { text-wrap: pretty; }

.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; border: 1px solid var(--primary); border-radius: 6px; background: var(--surface); color: var(--primary); font-size: 12px; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.desktop-bar { height: 34px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--hairline); background: var(--surface); color: var(--text-2); font-size: 10px; font-weight: 600; }
.site-header { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--hairline); background: color-mix(in oklch, var(--surface) 96%, transparent); backdrop-filter: blur(12px); }
.nav-shell { width: min(var(--max), calc(100% - 32px)); min-height: 58px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.wordmark { width: fit-content; display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.wordmark b { font-size: 15px; letter-spacing: -.02em; }
.wordmark small { margin-left: 4px; padding: 2px 5px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); font: 600 9px "IBM Plex Mono", ui-monospace, monospace; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; }
.nav-shell nav { display: flex; justify-content: flex-end; gap: 4px; }
.nav-shell nav a, .project-link { padding: 7px 10px; border-radius: 6px; color: var(--text-2); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.nav-shell nav a:hover, .nav-shell nav a:focus-visible { background: var(--surface-2); color: var(--text); }
.project-link { border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text); }
.menu-toggle { display: none; }

.button { min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 7px; font-size: 12px; font-weight: 700; text-decoration: none; }
.button-primary { background: var(--primary); color: var(--primary-fg); }
.button-secondary { border-color: var(--hairline); background: var(--surface); color: var(--text); }
a.button:hover { border-color: var(--divider); }
.button-disabled { cursor: default; user-select: none; }

.hero { padding: 64px 0 34px; }
.hero-shell { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: minmax(320px, .76fr) minmax(560px, 1.24fr); align-items: center; gap: 48px; }
.section-label { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); font: 600 10px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; }
.section-label span { padding: 3px 7px; border-radius: 4px; background: var(--review-bg); color: var(--review); }
.hero h1 { max-width: 560px; margin: 0; font-size: clamp(40px, 4.2vw, 58px); line-height: 1.18; letter-spacing: -.055em; }
.hero h1 em { color: var(--primary); font-style: normal; }
.hero-lede { max-width: 560px; margin: 24px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.9; }
.hero-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.release-note { margin: 11px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.6; }
.product-preview { margin: 0; overflow: hidden; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.preview-toolbar, .screen-panel-toolbar, .panel-toolbar { min-height: 48px; padding: 9px 13px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.preview-toolbar b, .screen-panel-toolbar b, .panel-toolbar b { font-size: 12.5px; }
.preview-toolbar span, .screen-panel-toolbar span, .panel-toolbar span { color: var(--text-2); font-size: 10px; }
.preview-toolbar small, .screen-panel-toolbar small, .panel-toolbar small { margin-left: auto; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); font: 600 9px "IBM Plex Mono", ui-monospace, monospace; }
.product-preview img { width: 100%; height: auto; background: var(--surface-2); }
.product-preview figcaption { padding: 8px 12px; border-top: 1px solid var(--hairline); color: var(--text-2); font-size: 9.5px; }

.status-strip { width: min(var(--max), calc(100% - 32px)); margin: 28px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); overflow: hidden; }
.status-strip article { min-width: 0; padding: 14px 16px; }
.status-strip article + article { border-left: 1px solid var(--hairline); }
.status-strip span { display: block; margin-bottom: 8px; color: var(--brand); font: 700 9px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; }
.status-strip b { display: block; font-size: 12px; }
.status-strip p { margin: 4px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.5; }

.section { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; padding: 86px 0; }
.section-heading { margin-bottom: 28px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 64px; }
.section-kicker { margin: 0 0 9px; color: var(--brand); font: 700 9.5px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; }
.section-heading h2, .closing-panel h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.25; letter-spacing: -.045em; }
.section-heading > p { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.8; }

.flow-panel { overflow: hidden; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface); }
.panel-toolbar > div { display: grid; gap: 2px; }
.flow-steps { margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; background: var(--surface-2); }
.flow-steps li { min-width: 0; min-height: 190px; padding: 15px; display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.flow-steps li > span { color: var(--text-2); font: 700 9px "IBM Plex Mono", ui-monospace, monospace; }
.flow-steps li b { margin-top: 22px; font-size: 13px; }
.flow-steps li p { margin: 8px 0 16px; color: var(--text-2); font-size: 10.5px; line-height: 1.65; }
.flow-steps li small { margin-top: auto; color: var(--text-2); font: 600 8.5px "IBM Plex Mono", ui-monospace, monospace; }
.flow-steps li.confirmed { border-color: var(--primary); background: var(--nav-selected); }
.flow-steps li.confirmed > span, .flow-steps li.confirmed small { color: var(--primary); }
.review-rule { margin: 0 16px 16px; padding: 10px 13px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; border-radius: 7px; background: var(--info-bg); color: var(--primary); }
.review-rule > span { font: 700 9px "IBM Plex Mono", ui-monospace, monospace; }
.review-rule p { margin: 0; font-size: 11px; line-height: 1.6; }

.screens-section { border-top: 1px solid var(--hairline); }
.screen-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface); }
.screen-sidebar { padding: 15px 12px; display: flex; flex-direction: column; border-right: 1px solid var(--hairline); background: var(--surface); }
.screen-sidebar > p { margin: 0 8px 10px; color: var(--text-2); font-size: 10px; font-weight: 600; }
.screen-tabs { display: grid; gap: 3px; }
.screen-tabs button { width: 100%; padding: 9px 10px; display: grid; gap: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.screen-tabs button b { font-size: 12px; }
.screen-tabs button span { color: var(--text-2); font-size: 9.5px; line-height: 1.45; }
.screen-tabs button[aria-selected="true"] { background: var(--nav-selected); color: var(--primary); }
.screen-tabs button[aria-selected="true"] span { color: var(--primary); }
.sidebar-note { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--hairline); }
.sidebar-note span { color: var(--income); font: 700 8.5px "IBM Plex Mono", ui-monospace, monospace; }
.sidebar-note p { margin: 4px 0 0; color: var(--text-2); font-size: 9px; line-height: 1.5; }
.screen-panel { min-width: 0; margin: 0; background: var(--surface-2); }
.screen-panel-toolbar > div { display: grid; gap: 2px; }
.screen-panel img { width: 100%; height: auto; background: var(--surface-2); }
.screen-panel figcaption { padding: 10px 13px; border-top: 1px solid var(--hairline); background: var(--surface); color: var(--text-2); font-size: 10px; line-height: 1.6; }

.workspace-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.workspace-grid article { grid-column: span 2; min-width: 0; padding: 17px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.workspace-grid article:nth-child(4), .workspace-grid article:nth-child(5) { grid-column: span 3; }
.workspace-grid header, .release-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workspace-grid header span, .release-card header span { color: var(--brand); font-size: 10px; font-weight: 700; }
.workspace-grid header small, .release-card header small { padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--text-2); font: 600 8.5px "IBM Plex Mono", ui-monospace, monospace; }
.workspace-grid h3 { margin: 20px 0 8px; font-size: 15px; }
.workspace-grid p { margin: 0; color: var(--text-2); font-size: 10.5px; line-height: 1.7; }
.workspace-grid ul { margin: 16px 0 0; padding: 10px 0 0; display: flex; flex-wrap: wrap; gap: 5px; border-top: 1px solid var(--hairline); list-style: none; }
.workspace-grid li { padding: 3px 7px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-size: 9px; }

.release-section { border-top: 1px solid var(--hairline); }
.release-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 10px; }
.release-card { padding: 18px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); }
.release-card.active { border-color: color-mix(in oklch, var(--income) 38%, var(--hairline)); background: var(--income-bg); }
.release-card.caution { border-color: color-mix(in oklch, var(--warning) 35%, var(--hairline)); background: var(--warning-bg); }
.release-card h3 { margin: 18px 0 14px; font-size: 15px; }
.release-card ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 10.5px; line-height: 1.9; }

.closing-panel { width: min(var(--max), calc(100% - 32px)); margin: 0 auto 22px; padding: 28px 30px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; border: 1px solid var(--hairline); border-radius: 9px; background: var(--surface); }
.closing-panel h2 { font-size: clamp(24px, 2.6vw, 34px); }
.closing-panel > div > p:last-child { margin: 9px 0 0; color: var(--text-2); font-size: 11px; }
.closing-actions { display: flex; gap: 8px; }

footer { width: min(var(--max), calc(100% - 32px)); min-height: 82px; margin: 0 auto; padding: 22px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; border-top: 1px solid var(--hairline); }
footer p { margin: 0; color: var(--text-2); font-size: 9.5px; }
footer p:last-child { text-align: right; }
a:focus-visible, button:focus-visible { outline: 3px solid color-mix(in oklch, var(--primary) 35%, transparent); outline-offset: 2px; }

@media (max-width: 980px) {
  .hero-shell { grid-template-columns: 1fr; }
  .hero-copy { max-width: 700px; }
  .status-strip { grid-template-columns: 1fr 1fr; }
  .status-strip article:nth-child(3) { border-left: 0; }
  .status-strip article:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .flow-steps { grid-template-columns: repeat(2, 1fr); }
  .flow-steps li:last-child { grid-column: 1 / -1; min-height: 150px; }
  .workspace-grid { grid-template-columns: 1fr 1fr; }
  .workspace-grid article, .workspace-grid article:nth-child(4), .workspace-grid article:nth-child(5) { grid-column: auto; }
  .workspace-grid article:last-child { grid-column: 1 / -1; }
  .release-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .desktop-bar { display: none; }
  .nav-shell { min-height: 56px; grid-template-columns: auto 1fr auto; gap: 10px; }
  .project-link { display: none; }
  .menu-toggle { justify-self: end; display: inline-flex; padding: 7px 9px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 10px; font-weight: 700; }
  .nav-shell nav { position: absolute; top: 56px; right: 0; left: 0; padding: 8px 16px 12px; display: none; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
  .nav-shell nav.is-open { display: flex; }
  .nav-shell nav a { padding: 10px; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(36px, 10vw, 50px); }
  .section { padding: 66px 0; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps li, .flow-steps li:last-child { grid-column: auto; min-height: 150px; }
  .review-rule { grid-template-columns: 1fr; gap: 5px; }
  .screen-shell { grid-template-columns: 1fr; }
  .screen-sidebar { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .screen-tabs { grid-template-columns: repeat(3, 1fr); }
  .screen-tabs button span, .sidebar-note { display: none; }
  .workspace-grid { grid-template-columns: 1fr; }
  .workspace-grid article:last-child { grid-column: auto; }
  .closing-panel { grid-template-columns: 1fr; }
  .closing-actions { justify-content: flex-start; }
  footer { grid-template-columns: 1fr; gap: 8px; }
  footer p:last-child { text-align: left; }
}

@media (max-width: 480px) {
  .nav-shell, .hero-shell, .status-strip, .section, .closing-panel, footer { width: min(100% - 22px, var(--max)); }
  .wordmark small { display: none; }
  .hero-actions, .closing-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .status-strip { grid-template-columns: 1fr; }
  .status-strip article + article { border-top: 1px solid var(--hairline); border-left: 0; }
  .screen-tabs { grid-template-columns: 1fr; }
  .workspace-grid { grid-template-columns: 1fr; }
}

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