@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #5BC2B5;
}

:root {
  --miku-soft: #5BC2B5;
  --miku-forest: #3A9E90;
  --miku-soft-ink: #1C7A70;
  --miku-forest-ink: #15645B;
  --dev: #A8F25C;
  --dev-ink: #3D6B0E;

  --syn-kw: var(--dev);
  --syn-str: var(--miku-soft);
  --syn-fn: #8FC9FF;
  --syn-num: #E8C170;
  --syn-com: #6F7672;

  --page: #0B0C0D;
  --panel: #121415;
  --ink: #E4E6E2;
  --muted: #979C98;
  --faint: #2A2E2E;
  --on-accent: #0B0C0D;
  --paper: #ECE9E1;
  --paper-ink: #0E1010;

  --accent: var(--miku-soft);

  --rule: 1px;
  --line: color-mix(in srgb, var(--ink) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  --pad-x: 56px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --f-display: "Archivo", "Arial Narrow", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-jp: "Zen Kaku Gothic New", sans-serif;

  color-scheme: dark;
}

html[data-mode="code"] { --accent: var(--dev); }

html[data-theme="light"] {
  --page: #F1F1EC;
  --panel: #E8E8E2;
  --ink: #0E1010;
  --muted: #555B57;
  --faint: #C9CBC5;
  --on-accent: #F1F1EC;
  --accent: var(--miku-soft-ink);
  --syn-kw: var(--dev-ink);
  --syn-str: var(--miku-soft-ink);
  --syn-fn: #1F5FA0;
  --syn-num: #8A5A00;
  --syn-com: #7A807C;
  color-scheme: light;
}
html[data-theme="light"][data-mode="code"] { --accent: var(--dev-ink); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.55;
  transition: background-color 400ms var(--ease-io), color 400ms var(--ease-io), --accent 500ms var(--ease-io);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mono { font-family: var(--f-mono); }
.jp { font-family: var(--f-jp); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; }

/* ---------- mode visibility ---------- */
html[data-mode="design"] [data-only="code"],
html[data-mode="code"] [data-only="design"] { display: none !important; }

/* ---------- ruled grid primitives ---------- */
.rule-b { position: relative; }
.rule-b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rule);
  background: var(--line-strong); transform-origin: left; transform: scaleX(1);
  transition: background-color 400ms var(--ease-io);
}
.is-loading .rule-b::after { transform: scaleX(0); }
.rule-b.drawn::after { transition: transform 1100ms var(--ease-out) calc(min(var(--d, 0), 8) * 80ms), background-color 400ms var(--ease-io); }

.cell-r { border-right: var(--rule) solid var(--line); transition: border-color 400ms var(--ease-io); }
.cell-b { border-bottom: var(--rule) solid var(--line); transition: border-color 400ms var(--ease-io); }

/* ---------- logo ---------- */
.logo { width: 30px; height: 30px; flex: none; display: block; color: var(--ink); transition: transform 700ms var(--ease-out), color 400ms var(--ease-io); }
.brand:hover .logo, .adm-brand:hover .logo { transform: rotate(-8deg) scale(1.08); color: var(--accent); }

/* ---------- nav ---------- */
.nav {
  display: grid;
  grid-template-columns: auto 380px minmax(0, 1fr) repeat(3, auto) 72px;
  height: 76px; position: sticky; top: 0; z-index: 20;
  background: var(--page);
  transition: background-color 400ms var(--ease-io);
}
.brand { display: flex; align-items: center; gap: 14px; padding: 0 var(--pad-x); }
.brand-name { font-weight: 900; font-stretch: 75%; font-size: 24px; letter-spacing: 0.01em; white-space: nowrap; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; position: relative; isolation: isolate; }
.mode-switch::before {
  content: ""; position: absolute; inset: 0 50% 0 0; background: var(--accent); z-index: -1;
  transition: transform 520ms var(--ease-out), background-color 400ms;
}
html[data-mode="code"] .mode-switch::before { transform: translateX(100%); }
.mode-btn {
  border: 0; background: transparent; cursor: pointer; padding: 0 12px;
  font-weight: 800; font-stretch: 75%; font-size: 19px; letter-spacing: 0.03em;
  display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  color: var(--muted); transition: color 350ms var(--ease-io);
}
.mode-btn .jp { font-size: 13px; font-weight: 500; }
.mode-btn[aria-pressed="true"] { color: var(--on-accent); }
.mode-btn:first-child { border-right: var(--rule) solid var(--line); }

.nav-link {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; padding: 0 22px;
  position: relative; overflow: hidden; isolation: isolate;
}
.nav-link::before {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 22px; height: 1px; background: var(--accent); z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out);
}
.nav-link:hover::before, .nav-link[aria-current="page"]::before { transform: scaleX(1); }

.theme-btn { border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.theme-btn svg { width: 22px; height: 22px; transition: transform 700ms var(--ease-out); }
.theme-btn:hover svg { transform: rotate(180deg); }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 20% 40%, #000 20%, transparent 75%);
  transition: opacity 700ms var(--ease-io);
}
html[data-mode="code"] .hero::before { opacity: 1; }
.hero-main { padding: 104px var(--pad-x) 96px; display: flex; flex-direction: column; gap: 36px; }
.kicker { font-family: var(--f-mono); font-size: 14px; color: var(--muted); }
.headline {
  margin: 0; font-weight: 900; font-stretch: 62%;
  font-size: clamp(56px, 9vw, 140px); line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase;
}
.line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.line > span { display: inline-block; }
.is-loading .line > span { transform: translateY(105%); }
.line > span { transition: transform 1100ms var(--ease-out); }
.line:nth-child(2) > span { transition-delay: 120ms; }

.swapword { color: var(--accent); animation: rise 800ms var(--ease-out) both; }
@keyframes rise { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
.is-loading .swapword { animation: none; transform: translateY(105%); }
.swapword.dev {
  animation: none; font-family: var(--f-mono); font-weight: 600; font-stretch: 100%; text-transform: none;
  font-size: 0.6em; letter-spacing: -0.045em; line-height: 1.25;
}
.tw-caret { display: inline-block; width: 0.55em; height: 0.95em; margin-left: 0.08em; vertical-align: -0.08em; background: var(--accent); animation: blink 1.05s steps(1) infinite; }
.kicker .tw-caret { width: 0.6em; height: 1.05em; vertical-align: -0.2em; }
.lede { margin: 0; font-size: 20px; line-height: 1.55; max-width: 700px; }

.facts { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 14px; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 22px 40px; }
.fact > span:first-child { color: var(--muted); }
.fact .dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 8px; animation: pulse 2.4s var(--ease-io) infinite; }
.now { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.now-title { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; font-size: 36px; line-height: 1; }
.counter { font-variant-numeric: tabular-nums; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- mode panels ---------- */
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.panel {
  border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 88px 80px; position: relative; overflow: hidden; min-width: 0;
  transition: opacity 600ms var(--ease-io), filter 600ms var(--ease-io);
}
.panel-label { position: absolute; top: 32px; font-family: var(--f-mono); font-size: 13px; }
.panel-label.l { left: var(--pad-x); font-weight: 600; }
.panel-label.r { right: var(--pad-x); color: var(--muted); }
.art { height: 380px; position: relative; transition: transform 700ms var(--ease-out); }
.panel:hover .art { transform: translateY(-6px); }

.crop { position: absolute; width: 16px; height: 16px; transition: transform 500ms var(--ease-out); }
.crop::before, .crop::after { content: ""; position: absolute; background: var(--muted); transition: background-color 400ms; }
.crop::before { width: 16px; height: 1.5px; }
.crop::after { width: 1.5px; height: 16px; }
.crop.tl { left: -26px; top: -26px; } .crop.tl::before { top: 25px; } .crop.tl::after { left: 25px; }
.crop.tr { right: -26px; top: -26px; } .crop.tr::before { top: 25px; right: 0; } .crop.tr::after { right: 25px; }
.crop.bl { left: -26px; bottom: -26px; } .crop.bl::before { bottom: 25px; } .crop.bl::after { left: 25px; bottom: 0; }
.crop.br { right: -26px; bottom: -26px; } .crop.br::before { bottom: 25px; right: 0; } .crop.br::after { right: 25px; bottom: 0; }
.panel:hover .crop.tl { transform: translate(-6px, -6px); }
.panel:hover .crop.tr { transform: translate(6px, -6px); }
.panel:hover .crop.bl { transform: translate(-6px, 6px); }
.panel:hover .crop.br { transform: translate(6px, 6px); }

html[data-mode="design"] .panel[data-set-mode="code"],
html[data-mode="code"] .panel[data-set-mode="design"] { opacity: 0.32; filter: grayscale(1); }
html[data-theme="light"][data-mode="design"] .panel[data-set-mode="code"],
html[data-theme="light"][data-mode="code"] .panel[data-set-mode="design"] { opacity: 0.55; filter: grayscale(1) contrast(0.9); }
.panel:hover { opacity: 1 !important; filter: none !important; }

.art-design {
  background: #0A0B0B; color: var(--paper-ink);
  outline: var(--rule) solid var(--line-strong);
}
.cover-raven { outline: 1px solid rgba(255, 255, 255, 0.18); }
.cover { position: absolute; transition: transform 800ms var(--ease-out); }
.cover-raven { left: 36px; top: 40px; width: 180px; height: 290px; background: var(--paper-ink); color: var(--paper); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-raven b { font-weight: 900; font-stretch: 62%; font-size: 44px; line-height: 0.9; }
.cover-raven i { width: 52px; height: 52px; border-radius: 50%; background: var(--miku-soft); }
.cover-stamp { left: 236px; top: 70px; width: 160px; height: 200px; background: var(--paper); border: 7px dotted var(--paper-ink); outline: 5px solid var(--paper); padding: 14px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-stamp i { width: 60px; height: 60px; border-radius: 50%; border: 9px solid var(--miku-forest); align-self: center; }
.cover-stamp b { font-weight: 900; font-stretch: 62%; font-size: 30px; align-self: flex-end; }
.cover-thesis { right: 36px; top: 40px; width: 150px; height: 290px; background: var(--miku-soft); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-thesis b { font-weight: 900; font-stretch: 62%; font-size: 38px; line-height: 0.9; }
.cover-thesis i { height: 12px; background: repeating-linear-gradient(90deg, var(--paper-ink) 0 8px, transparent 8px 14px); }
.panel:hover .cover-raven { transform: rotate(-3deg); }
.panel:hover .cover-stamp { transform: rotate(3deg) translateY(-4px); }
.panel:hover .cover-thesis { transform: rotate(-2deg); }
.art img.cover-img { width: 100%; height: 100%; object-fit: cover; }
.cover.photo { padding: 0; background: var(--panel); border: 0; outline: 1px solid rgba(255, 255, 255, 0.12); overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); }
.cover.photo img { width: 100%; height: 100%; object-fit: cover; }
.cover.photo.cover-raven { left: 6%; width: 31%; }
.cover.photo.cover-stamp { left: 41%; width: 24%; }
.cover.photo.cover-thesis { left: auto; right: 6%; width: 26%; }

.art-code { background: #0A0B0B; color: #E4E6E2; display: flex; flex-direction: column; font-family: var(--f-mono); outline: var(--rule) solid var(--line-strong); }
.tabs { display: flex; border-bottom: 1.5px solid #333836; font-size: 12px; }
.tabs span { padding: 10px 16px; color: #979C98; border-right: 1.5px solid #333836; }
.tabs span.on { background: #E4E6E2; color: #0A0B0B; font-weight: 600; }
.code { margin: 0; padding: 22px; font-size: 16px; line-height: 1.85; white-space: pre; flex: 1; overflow: hidden; font-family: var(--f-mono); }
.code .ln { color: #5E6461; margin-right: 18px; }
.code .kw { color: var(--dev); }
.code .st { color: var(--miku-soft); }
.code .cm { color: #6F7672; font-style: italic; }
.code-line { display: block; }
.term { border-top: 1.5px solid #333836; padding: 12px 22px; font-size: 13px; color: #979C98; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--dev); vertical-align: -2px; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing .code-line { clip-path: inset(0 100% 0 0); animation: type 520ms steps(24) forwards; }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* ---------- light theme panels ---------- */
html[data-theme="light"] .art-design { background: #E4E4DE; }
html[data-theme="light"] .art-code { background: #F7F7F3; color: #1A1C1B; }
html[data-theme="light"] .tabs { border-bottom-color: var(--line); }
html[data-theme="light"] .tabs span { color: var(--muted); border-right-color: var(--line); }
html[data-theme="light"] .tabs span.on { background: var(--ink); color: var(--page); }
html[data-theme="light"] .code .ln { color: #9AA09C; }
html[data-theme="light"] .code .kw { color: var(--dev-ink); }
html[data-theme="light"] .code .st { color: var(--miku-soft-ink); }
html[data-theme="light"] .code .cm { color: #8A908C; }
html[data-theme="light"] .term { border-top-color: var(--line); color: var(--muted); }
html[data-theme="light"] .caret { background: var(--dev-ink); }
html[data-theme="light"] .cover-raven { outline-color: transparent; }
html[data-theme="light"] .cover.photo { outline-color: rgba(0, 0, 0, 0.08); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
html[data-theme="light"][data-mode="design"] .panel[data-set-mode="code"],
html[data-theme="light"][data-mode="code"] .panel[data-set-mode="design"] { opacity: 0.45; filter: grayscale(1); }

/* ---------- work table ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 120px var(--pad-x) 40px; }
.section-title { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(48px, 5.5vw, 80px); line-height: 0.9; text-transform: uppercase; }
.section-title .jp { font-size: 0.36em; font-weight: 500; color: var(--muted); margin-left: 10px; }
.filters { display: flex; }
.filter {
  border: var(--rule) solid var(--line-strong); background: transparent; cursor: pointer; margin-left: calc(var(--rule) * -1);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600; padding: 10px 16px; min-height: 44px;
  transition: background-color 300ms, color 300ms;
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--page); }

.table-head, .row { display: grid; grid-template-columns: 90px 160px minmax(0, 1fr) 340px 90px; }
.table-head { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.table-head > span { padding: 14px 24px; border-right: 0 !important; }
.table-head > span:first-child { padding-left: var(--pad-x); }

.row { min-height: 160px; position: relative; isolation: isolate; }
.row::before {
  content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out);
}
.row:hover::before { transform: scaleX(1); }

.row > * { padding: 32px 24px; display: flex; align-items: center; transition: color 300ms; border-right: 0 !important; }
.row-n { padding-left: var(--pad-x) !important; font-family: var(--f-mono); font-size: 15px; font-weight: 600; align-items: flex-start; }
.row-thumb { padding: 22px 16px; }
.thumb { flex: 1; align-self: stretch; display: flex; align-items: center; justify-content: center; font-weight: 900; font-stretch: 62%; font-size: 34px; overflow: hidden; background: var(--panel); color: var(--accent); transition: transform 600ms var(--ease-out); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.row:hover .thumb { transform: scale(0.94) rotate(-1.5deg); }
.row-main { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 6px; }
.row-title { font-weight: 800; font-stretch: 75%; font-size: 34px; line-height: 1; text-transform: uppercase; }
.row-desc { font-size: 16px; }
.row-tags { font-family: var(--f-mono); font-size: 14px; line-height: 1.6; text-transform: uppercase; }
.row-arrow { justify-content: center; font-size: 30px; font-weight: 900; color: var(--accent); transition: transform 500ms var(--ease-out), color 300ms; }
.row:hover .row-arrow { transform: translate(6px, -6px); }
.empty { padding: 40px 28px; font-family: var(--f-mono); color: var(--muted); }

/* ---------- toolkit ---------- */
.toolkit-head, .tool-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 260px; }
.toolkit-head { color: var(--muted); font-family: var(--f-mono); font-size: 12px; border-bottom: var(--rule) solid var(--line); }
.toolkit-head > span, .tool-row > span { padding: 20px 24px; border-right: 0 !important; }
.toolkit-head > span:first-child, .tool-row > span:first-child { padding-left: var(--pad-x); }
.tool-row { font-size: 17px; transition: opacity 500ms var(--ease-io); }
.tool-row .cat { font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 20px; }
.tool-row .src { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
html[data-mode="design"] .tool-row[data-kind="code"],
html[data-mode="code"] .tool-row[data-kind="design"] { opacity: 0.38; }

/* ---------- footer ---------- */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) 320px 320px; margin-top: 120px; border-top: var(--rule) solid var(--line); }
.foot-big { padding: 72px var(--pad-x); display: flex; flex-direction: column; gap: 14px; }
.foot-big .big { font-weight: 900; font-stretch: 62%; font-size: clamp(56px, 7vw, 104px); line-height: 0.86; text-transform: uppercase; }
.foot-links { display: flex; flex-direction: column; font-family: var(--f-mono); font-size: 14px; }
.foot-links a { flex: 1; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; transition: background-color 300ms, color 300ms; }
.foot-links a:hover { color: var(--accent); }
.foot-cv { background: var(--accent); color: var(--on-accent); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; transition: background-color 400ms; }
.foot-cv .big { font-weight: 900; font-stretch: 62%; font-size: 72px; line-height: 0.86; transition: transform 600ms var(--ease-out); }
.foot-cv:hover .big { transform: translateY(-6px); }
.cv-dls { display: flex; flex-wrap: wrap; gap: 10px; }
.cv-dl { font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; padding: 10px 14px; border: 1.5px solid currentColor; color: inherit; text-decoration: none; transition: background-color 200ms, color 200ms; }
.cv-dl:hover { background: var(--on-accent); color: var(--accent); }
.colophon { display: flex; justify-content: space-between; gap: 20px; padding: 20px var(--pad-x); font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

/* ---------- inner pages ---------- */
.page-head { padding: 104px var(--pad-x) 56px; display: flex; flex-direction: column; gap: 16px; }
.page-title { margin: 0; font-weight: 900; font-stretch: 62%; font-size: clamp(64px, 10vw, 150px); line-height: 0.86; text-transform: uppercase; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.prose { padding: 56px var(--pad-x) 72px; font-size: 19px; line-height: 1.7; max-width: 820px; }
.prose h2 { font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 34px; line-height: 1; margin: 1.6em 0 0.5em; }
.prose h3 { font-weight: 800; font-stretch: 75%; font-size: 24px; margin: 1.4em 0 0.4em; }
.prose code { font-family: var(--f-mono); font-size: 0.88em; background: var(--panel); padding: 2px 6px; }
.prose pre { background: var(--panel); padding: 18px 20px; overflow-x: auto; outline: var(--rule) solid var(--line-strong); }
.prose figure.video { margin: 1.4em 0; }
.prose figure.video video { width: 100%; display: block; background: #000; outline: var(--rule) solid var(--line-strong); }
.prose figure.video figcaption { font-family: var(--f-mono); font-size: 13px; opacity: .7; margin-top: 8px; }
.prose pre code { background: none; padding: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose img { margin: 1.6em 0; outline: var(--rule) solid var(--line); }
.prose blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin: 1.4em 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: var(--rule) solid var(--line); }
.prose th { font-family: var(--f-mono); font-size: 0.8em; color: var(--muted); font-weight: 500; }
.prose .hl { margin: 1.4em 0; }
.prose .hl pre { margin: 0; font-size: 14px; line-height: 1.7; }
.hl .k, .hl .kd, .hl .kn, .hl .kr, .hl .kc, .hl .kt, .hl .ow, .hl .nt { color: var(--syn-kw); }
.hl .s, .hl .s1, .hl .s2, .hl .sb, .hl .sd, .hl .se, .hl .si, .hl .sa, .hl .sx, .hl .dl { color: var(--syn-str); }
.hl .nf, .hl .fm, .hl .nc, .hl .nb, .hl .bp, .hl .na, .hl .nd { color: var(--syn-fn); }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo, .hl .il { color: var(--syn-num); }
.hl .c, .hl .c1, .hl .cm, .hl .cp, .hl .ch, .hl .cs { color: var(--syn-com); font-style: italic; }
.meta-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); font-family: var(--f-mono); font-size: 14px; }
.meta-row > span { padding: 20px 24px; border-right: 0 !important; }
.meta-row > span:first-child { padding-left: var(--pad-x); color: var(--muted); }
.detail-cover { padding: 56px var(--pad-x); }
.detail-cover img, .detail-cover .ph { width: 100%; max-height: 720px; object-fit: cover; outline: var(--rule) solid var(--line); }
.detail-cover .ph { height: 420px; display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--accent); font-weight: 900; font-stretch: 62%; font-size: 120px; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 0 var(--pad-x) 56px; }
.gallery img { outline: var(--rule) solid var(--line-strong); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  border: var(--rule) solid var(--line-strong); font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.06em;
  box-shadow: none; transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), background-color 300ms;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btns { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 var(--pad-x) 72px; }

.timeline-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.timeline-row > span { padding: 24px; border-right: 0 !important; }
.timeline-row > span:first-child { padding-left: var(--pad-x); font-family: var(--f-mono); font-size: 14px; color: var(--accent); }

/* ---------- forms (admin login uses the public layout) ---------- */
form input, form textarea, form select {
  font: inherit; color: var(--ink); background: var(--panel); border: var(--rule) solid var(--line-strong); padding: 12px 14px; min-height: 48px; width: 100%;
}
form button, form input[type="submit"] { width: auto; cursor: pointer; background: var(--accent); color: var(--on-accent); border: var(--rule) solid var(--line-strong); padding: 12px 20px; font-family: var(--f-mono); font-weight: 600; }

/* ---------- scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(18px); }
.js .stagger.in > * { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.is-loading .load-in { opacity: 0; transform: translateY(-10px); }
.load-in { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

/* ---------- theme switch reveal ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { grid-template-columns: auto minmax(0, 1fr) repeat(3, 100px) 64px; }
  .mode-note, .nav-spacer { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-main { border-right: 0 !important; }
  .facts { border-top: var(--rule) solid var(--line); }
  .table-head, .row { grid-template-columns: 70px 130px minmax(0, 1fr) 70px; }
  .row-tags, .table-head .th-tags { display: none !important; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-big { grid-column: 1 / -1; border-right: 0 !important; border-bottom: var(--rule) solid var(--line); }
}
@media (max-width: 760px) {
  :root { --pad-x: 20px; }
  body { font-size: 16px; }
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)) 56px; height: auto; position: static; }
  .brand { grid-column: 1 / 4; grid-row: 1; padding: 16px; height: 60px; }
  .theme-btn { grid-column: 4; grid-row: 1; border-left: var(--rule) solid var(--line); }
  .mode-switch { grid-column: 1 / -1; grid-row: 2; height: 56px; border-right: 0 !important; border-top: var(--rule) solid var(--line); }
  .nav-link { grid-row: 3; height: 48px; border-top: var(--rule) solid var(--line); font-size: 13px; }
  .nav-link.nl-3 { grid-column: 3 / 5; border-right: 0; }
  .headline { font-size: clamp(44px, 13vw, 72px); }
  .hero-main { padding: 56px var(--pad-x) 48px; }
  .fact { padding: 16px var(--pad-x); }
  .panels { grid-template-columns: minmax(0, 1fr); }

  .code { overflow-x: auto; }
  .panel { padding: 72px 40px 56px; }
  .panel:first-child { border-right: 0 !important; border-bottom: var(--rule) solid var(--line); }
  .art { height: 300px; transform-origin: top left; }
  .art-design { overflow: hidden; }
  .cover-raven { transform: scale(0.8); transform-origin: top left; }
  .cover-stamp { left: 170px; transform: scale(0.8); transform-origin: top left; }
  .cover-thesis { display: none; }
  .code { font-size: 13px; padding: 16px; }
  .section-head { padding: 72px var(--pad-x) 24px; flex-direction: column; align-items: flex-start; }
  .table-head { display: none; }
  .row { grid-template-columns: 90px minmax(0, 1fr); min-height: 0; }
  .row-n, .row-arrow { display: none !important; }
  .row > * { padding: 16px; }
  .row-title { font-size: 26px; }
  .toolkit-head { display: none; }
  .tool-row { grid-template-columns: 1fr; }
  .tool-row > span { border-right: 0 !important; padding: 6px 16px !important; }
  .tool-row > span:first-child { padding-top: 16px !important; }
  .tool-row > span:last-child { padding-bottom: 16px !important; }
  .foot { grid-template-columns: 1fr; }
  .foot-links { border-right: 0 !important; border-bottom: var(--rule) solid var(--line); }
  .foot-big, .page-head, .prose { padding-left: 16px; padding-right: 16px; }
  .two-col { grid-template-columns: 1fr; }
  .two-col > * { border-right: 0 !important; }
  .meta-row, .timeline-row { grid-template-columns: 110px minmax(0, 1fr); }
  .meta-row > span, .timeline-row > span { padding: 14px 16px !important; }
  .gallery { grid-template-columns: 1fr; gap: 16px; }
  .detail-cover { padding: 16px; }
  .btns { padding: 0 16px 32px; }
  .colophon { flex-direction: column; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .stagger > *, .is-loading .load-in, .is-loading .line > span { opacity: 1 !important; transform: none !important; }
  .is-loading .rule-b::after { transform: none !important; }
}

/* product pages: ザキCards + GlyphOCR */
.zk-wrap { --zk: #F5A9C3; }
.zk-page, .zk-wrap { --zk: #F5A9C3; }
.go-page { --go: #5BC2B5; }
.zk-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 520px; }
.zk-copy { padding: 56px var(--pad-x); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.zk-brand { display: flex; align-items: center; gap: 18px; }
.zk-logo { width: 64px; height: 64px; flex: none; }
.zk-logo-lg { width: 96px; height: 96px; }
.zk-title { font-family: var(--f-display); font-size: clamp(48px, 6vw, 88px); line-height: .9; margin: 0; letter-spacing: -.01em; }
.zk-title span { color: var(--zk); }
.zk-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.zk-points li::before { content: "✦ "; color: var(--zk); }
.zk-btn { background: var(--zk); color: #0b0c0d; border-color: var(--zk); }
.zk-btn:hover { filter: brightness(1.08); }
.zk-small { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin: 0; }
.zk-visual { position: relative; display: block; background: #000; overflow: hidden; min-height: 420px; }
.zk-shot { position: absolute; border: 1px solid #222; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); transition: transform .8s var(--ease-out); }
.zk-shot-a { width: 78%; left: 6%; top: 10%; }
.zk-shot-b { width: 62%; right: 4%; bottom: 8%; }
.zk-visual:hover .zk-shot-a { transform: translate(-8px, -8px) rotate(-1deg); }
.zk-visual:hover .zk-shot-b { transform: translate(10px, 6px) rotate(1deg); }
.zk-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 60% 40%, color-mix(in srgb, var(--zk) 14%, transparent), transparent 70%); pointer-events: none; }
.zk-hero-copy { display: flex; flex-direction: column; gap: 18px; }
.zk-feats { display: grid; grid-template-columns: 1fr 1fr; }
.zk-feat { padding: 22px 26px; }
.zk-feat h3, .zk-step h3 { margin: 0 0 6px; font-size: 17px; }
.zk-feat p, .zk-step p { margin: 0; color: var(--muted); line-height: 1.6; }
.zk-page .zk-feat h3::before { content: "✦ "; color: var(--zk); }
.zk-step { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 18px; padding: 26px var(--pad-x); align-items: start; }
.zk-n { font-family: var(--f-mono); font-size: 28px; color: var(--zk, var(--accent)); }
.go-page .zk-n { color: var(--go); }
.zk-step code { font-family: var(--f-mono); font-size: .9em; background: var(--panel); padding: 1px 6px; border-radius: 4px; }
.zk-inline { margin-top: 16px; max-width: 760px; width: 100%; border: 1px solid #222; border-radius: 8px; }
.zk-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); }
.zk-sc { display: flex; gap: 14px; align-items: center; padding: 16px 26px; color: var(--muted); }
.zk-keys { display: flex; gap: 6px; min-width: 120px; }
.zk-keys kbd { font-family: var(--f-mono); font-size: 12px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 7px; color: var(--ink); }
.zk-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px var(--pad-x); }
.zk-gallery figure { margin: 0; }
.zk-gallery img { width: 100%; display: block; border: 1px solid #222; border-radius: 8px; }
.zk-gallery figcaption { font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 8px; }
.zk-faq { padding: 18px var(--pad-x); }
.zk-faq summary { cursor: pointer; font-size: 17px; }
.zk-faq summary::marker { color: var(--zk); }
.zk-faq p { color: var(--muted); margin: 10px 0 0; line-height: 1.6; }
.go-title .go-accent { color: var(--go); }
.go-btn { background: var(--go); color: #0b0c0d; border-color: var(--go); }
.go-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.go-stat { padding: 28px var(--pad-x); display: flex; flex-direction: column; gap: 6px; }
.go-stat b { font-family: var(--f-display); font-size: 44px; color: var(--go); }
.go-stat span { color: var(--muted); font-size: 14px; }
.go-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 32px var(--pad-x); }
.go-plan { border: 1px solid var(--line-strong); border-radius: 12px; padding: 26px; }
.go-plan h3 { margin: 0 0 12px; }
.go-plan div b { font-family: var(--f-display); font-size: 40px; }
.go-plan div span { color: var(--muted); margin-left: 8px; font-size: 13px; }
.go-plan ul { margin: 16px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.8; }
.go-plan-pro { border-color: var(--go); box-shadow: 0 0 40px -18px var(--go); }
@media (max-width: 900px) {
  .zk-feature { grid-template-columns: 1fr; }
  .zk-visual { min-height: 300px; }
  .zk-feats, .zk-shortcuts, .zk-gallery, .go-plans { grid-template-columns: 1fr; }
  .go-stats { grid-template-columns: 1fr 1fr; }
  .zk-step { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 20px; }
  .zk-copy { padding: 36px 20px; }
}
.zk-title { font-size: clamp(44px, 4.6vw, 76px); white-space: nowrap; }
.zk-copy .btns, .zk-hero-copy .btns { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.zk-copy .btns .btn, .zk-hero-copy .btns .btn { margin: 0; }