/* ============================================================
   山内陽 Portfolio — Console Stylesheet
   Concept: the whole page IS a maximized Windows PowerShell
   window. Real conhost blue (#012456), a Windows title bar,
   PS prompts as CHAPTER markers (one per section, not one per
   card), PSReadLine-style syntax color, and real screenshots
   graded to sit inside the console rather than pasted on top
   of it. Monospace carries structure (paths, prompts, tables);
   Noto Sans JP carries anything meant to actually be read.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap");

:root {
  /* Classic Windows PowerShell console host palette */
  --ps-blue: #012456;
  --ps-blue-deep: #01193d;
  --ps-blue-deeper: #010e24;
  --ps-text: #f2f2f2;
  --ps-white: #ffffff;
  --ps-gray: #b9c2dd;     /* PSReadLine: Parameter / secondary content */
  --ps-muted: #93a1c4;    /* meta: dates, labels */
  --ps-dim: #8492ba;      /* chrome: prompts, dividers — quieter than content, still >=4.5:1 */
  --ps-yellow: #f5d76b;   /* PSReadLine: Command */
  --ps-cyan: #6fdada;     /* PSReadLine: String / links */
  --ps-green: #5fcf8a;    /* PSReadLine: OK / success */
  --ps-red: #ff6b6b;

  --line: #1f3c66;
  --line-soft: #15305a;

  --chrome-bg: #f3f3f3;
  --chrome-border: #d3d3d3;
  --chrome-text: #1c1c1c;
  --chrome-icon: #4a4a4a;
  --close-red: #e81123;

  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", ui-monospace, monospace;
  --prose: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;

  --max: 1040px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

html, body {
  margin: 0;
  background: var(--ps-blue);
  color: var(--ps-text);
  font-family: var(--mono);
  font-size: 17px;
}

/* Faint graph-paper grid — engineering-log texture behind the whole
   page, echoing a code editor's guide lines. Never competes with
   content: one hairline every 96px, ~3% opacity. */
body {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
}

img { max-width: 100%; display: block; }
/* AVIF を出し分ける <picture> は箱を作らず、中の img がそのまま並ぶようにする */
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; }

::selection { background: #d0e4ff; color: #012456; }

::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--ps-blue-deep); }
::-webkit-scrollbar-thumb { background: #274a7a; border: 3px solid var(--ps-blue-deep); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #33578c; }

:focus-visible {
  outline: 2px solid var(--ps-cyan);
  outline-offset: 2px;
}

.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }

/* A narrower reading column for anything meant to be read line by
   line (records, prose, tokens) — the full container width is for
   the nav and the image grid, not for a single Name/Date row. Left-
   anchored on purpose: the ragged right edge is negative space, not
   an accident. */
.measure { max-width: 760px; }

/* Alternating full-bleed zones — gives the page real "chapters" to
   scroll through instead of one continuous flat field, the way the
   reference's blocky panels break up its scroll. Breaks out of
   .container on purpose; content inside stays constrained by it. */
/* 帯の地を画面の端まで塗る。100vw はスクロールバーの幅も含むので、要素の幅を
   広げると横スクロールが出る。border-image の outset は塗るだけで幅を取らない */
.zone-alt {
  background: var(--ps-blue-deep);
  border-image: linear-gradient(var(--ps-blue-deep), var(--ps-blue-deep)) fill 0 / 0 / 0 100vw;
}

/* ============================================================
   Window chrome — title bar + prompt/nav bar. This is the ONE
   piece of chrome that repeats identically everywhere; it is the
   page's "you are here" instrument, not decoration.
   ============================================================ */

.titlebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 40px;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-border);
}

.titlebar-icon { width: 16px; height: 16px; margin-left: 14px; flex-shrink: 0; }

.titlebar-text {
  margin-left: 9px;
  font-family: "Segoe UI", var(--prose), system-ui, sans-serif;
  font-size: 14px;
  color: var(--chrome-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.caption-btns { display: flex; height: 100%; flex-shrink: 0; }

.cap-btn {
  width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chrome-icon);
  transition: background 0.1s ease, color 0.1s ease;
}
.cap-btn:hover { background: #e2e2e2; }
.cap-btn.close:hover { background: var(--close-red); color: #fff; }
.cap-btn svg { width: 10px; height: 10px; }

.promptbar {
  position: sticky;
  top: 40px;
  z-index: 19;
  background: var(--ps-blue-deep);
  border-bottom: 1px solid var(--line);
}

.promptbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  gap: 20px;
}

.promptbar .path { color: var(--ps-dim); white-space: nowrap; flex-shrink: 0; }
.promptbar .path b { color: var(--ps-gray); font-weight: 600; }
/* 作品ページでは、パスの途中の階層がリンクになる（portfolio → トップ、focus-areas → 作品一覧） */
.promptbar .path a {
  color: inherit;
  text-decoration: underline dotted var(--ps-dim);
  text-underline-offset: 4px;
}
.promptbar .path a:hover { color: var(--ps-yellow); text-decoration-style: solid; text-decoration-color: currentColor; }

.promptbar nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.promptbar nav a {
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--ps-dim);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.promptbar nav a:hover { color: var(--ps-yellow); }
.promptbar nav a.is-current {
  color: var(--ps-yellow);
  background: rgba(245, 215, 107, 0.08);
}
.promptbar nav a.is-current::before { content: "\25B8 "; }

/* ============================================================
   Chapter — a plain-language title carries "what is this section",
   the §NN badge carries "where am I", and the PS> command underneath
   is atmosphere/flavor only — quiet on purpose, because the title
   above it already did the actual communicating.
   ============================================================ */

.chapter {
  position: relative;
  margin: 0 0 22px;
  padding-top: 64px;
}

/* A big ghosted numeral behind the heading — one bold typographic
   beat per chapter, the way a section marker earns real presence
   instead of just a small badge. Pure background texture: it never
   carries meaning the badge/title don't already carry, so it's safe
   to ignore. */
.chapter::before {
  content: attr(data-num);
  position: absolute;
  top: 40px;
  right: 0;
  font-family: var(--mono);
  font-size: 132px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.chapter-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
}

.chapter-cmd { position: relative; z-index: 1; }

.chapter-num {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--ps-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 7px;
}

.chapter-title {
  margin: 0;
  font-family: var(--prose);
  font-size: 25px;
  font-weight: 700;
  color: var(--ps-white);
}

.chapter-title .ch { display: inline-block; }

.chapter-cmd { font-size: 15px; color: var(--ps-dim); overflow-wrap: anywhere; }
.chapter-cmd .cmd { color: var(--ps-dim); font-weight: 600; }
.chapter-cmd .param { color: var(--ps-dim); opacity: 0.75; }
.chapter-cmd .str { color: var(--ps-dim); opacity: 0.85; }

section[id] { scroll-margin-top: 96px; }

/* ============================================================
   Hero — the one dominant, high-contrast moment on the page.
   ============================================================ */

.hero { padding: 54px 0 10px; }

.boot { margin: 0 0 30px; }
.boot .line {
  font-size: 14px;
  color: var(--ps-dim);
  line-height: 1.9;
}
.boot .ok { color: var(--ps-green); font-weight: 600; white-space: nowrap; }

.hero h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ps-white);
}

.hero h1 .marker { color: var(--ps-dim); font-weight: 600; transition: opacity 150ms ease; }
.hero h1 .accent {
  color: var(--ps-cyan);
  opacity: 0;
  transition: opacity 500ms ease;
}
.hero h1 .accent.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent { transition: none; }
}

.hero .lead {
  font-family: var(--prose);
  font-size: 19px;
  line-height: 2;
  color: var(--ps-gray);
  max-width: 620px;
  margin: 26px 0 34px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 74px; }

.keycap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ps-blue-deep);
  color: var(--ps-text);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
button.keycap { line-height: inherit; cursor: pointer; }
.keycap:hover { border-color: var(--ps-cyan); background: #052a5c; transform: translateY(-1px); }
.keycap:active { transform: translateY(0); }
.keycap .key {
  font-size: 12px;
  color: var(--ps-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
}
.keycap.primary { border-color: var(--ps-cyan); }
.keycap.primary .key { color: var(--ps-cyan); border-color: var(--ps-cyan); }

/* ============================================================
   Format-List — real PowerShell object rendering, used for the
   profile summary.
   ============================================================ */

.fmt-list { margin: 0 0 26px; }

.fmt-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 5px 0;
}

.fmt-key { width: 118px; flex-shrink: 0; color: var(--ps-dim); font-size: 14.5px; }
.fmt-colon { width: 14px; flex-shrink: 0; color: var(--ps-dim); font-size: 14.5px; }
.fmt-val {
  font-family: var(--prose);
  font-size: 17px;
  color: var(--ps-text);
}
.fmt-val a { color: var(--ps-cyan); text-decoration: underline; text-underline-offset: 2px; }

.prose-block {
  font-family: var(--prose);
  font-size: 18px;
  line-height: 2;
  color: var(--ps-gray);
  max-width: 620px;
  margin: 4px 0 24px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
  align-items: start;
}

.about-content {
  min-width: 0;
}

.about-aside {
  display: block;
}

.about-frame {
  transition: border-color 0.2s ease;
}

.about-frame:hover {
  border-color: var(--ps-cyan);
}

.about-imgwrap {
  position: relative;
  margin: 9px;
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
}

.about-imgwrap img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center 15%;
  filter: saturate(0.88) contrast(1.04) brightness(0.96);
  transition: transform 0.4s ease;
}

.about-frame:hover .about-imgwrap img {
  transform: scale(1.035);
}

.about-imgwrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(1, 36, 86, 0.22), rgba(1, 36, 86, 0.04) 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ============================================================
   Get-ChildItem — directory listing for focus areas.
   ============================================================ */

.gci-header { font-size: 14px; color: var(--ps-dim); margin: 0 0 6px; }

.gci-cols, .gci-rule {
  display: grid;
  grid-template-columns: 66px 150px 70px 1fr;
  font-size: 13.5px;
  color: var(--ps-dim);
  padding: 3px 0;
}

.gci-row {
  display: grid;
  grid-template-columns: 66px 150px 70px 1fr auto;
  align-items: baseline;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.gci-row:hover { background: rgba(255, 255, 255, 0.06); }

/* 押せば、その領域のページへ移る。リンクだと分かるように、名前に下線を引き、行の終わりに矢印を置く */
.gci-row::after {
  content: "→";
  align-self: center;
  padding: 0 4px 0 16px;
  font-family: var(--prose);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ps-cyan);
  transition: transform 0.15s ease;
}
.gci-row:hover::after,
.gci-row:focus-visible::after { transform: translateX(5px); }
.gci-row .name-main {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--ps-cyan) 55%, transparent);
}
.gci-row:hover .name-main,
.gci-row:focus-visible .name-main { color: var(--ps-white); text-decoration-color: var(--ps-cyan); }

.gci-row .mode, .gci-row .len { color: var(--ps-dim); font-size: 14px; }
.gci-row .date { color: var(--ps-muted); font-size: 14px; font-variant-numeric: tabular-nums; }

/* The readable category name leads — it's what answers "what is
   this", not the folder slug next to it, which is secondary/technical. */
.gci-row .name-main {
  font-family: var(--prose);
  color: var(--ps-cyan);
  font-weight: 700;
  font-size: 16.5px;
}
.gci-row .name-slug {
  margin-left: 9px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ps-dim);
}
.gci-row .name-desc {
  display: block;
  margin-top: 4px;
  font-family: var(--prose);
  font-size: 14.5px;
  color: var(--ps-muted);
}

.works-list { margin: 0 0 8px; padding: 0; list-style: none; }

/* トップの作品一覧。行ごとではなく、カテゴリ名と作品名がそれぞれリンクになる。
   読み終えた人がそのまま作品へ移れるよう、どれも下線つきの文字リンクにそろえる */
.works-list .gci-row { padding: 14px 8px; }
.works-list .gci-row:hover { background: none; }
.works-list .gci-row::after { content: none; }
.works-list .name-main {
  font-size: 18px;
  text-decoration-thickness: 2px;
  transition: color 0.15s ease;
}
.works-list .name-main::after {
  content: "→";
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.15s ease;
}
.works-list .name-main:hover,
.works-list .name-main:focus-visible { color: var(--ps-white); text-decoration-color: var(--ps-cyan); }
.works-list .name-main:hover::after,
.works-list .name-main:focus-visible::after { transform: translateX(4px); }
.name-works {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 10px 0 2px;
  padding: 0;
  list-style: none;
  font-family: var(--prose);
  font-size: 15.5px;
}
.name-works a {
  color: var(--ps-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ps-cyan) 45%, transparent);
}
.name-works a:hover,
.name-works a:focus-visible { color: var(--ps-white); text-decoration-color: var(--ps-cyan); }

/* 連絡先の文中にある作品名 */
.contact-block .prose-block a {
  color: var(--ps-cyan);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.contact-block .prose-block a:hover { color: var(--ps-white); }

/* ============================================================
   Featured works — real screenshots, graded to sit inside the
   console. This is the visually richest section on the page,
   deliberately: it is the thing worth lingering on.
   ============================================================ */

.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  margin-bottom: 8px;
}

.featured-item { text-decoration: none; color: inherit; display: block; }

.tframe {
  position: relative;
  border: 1px solid #23477a;
  border-radius: 4px;
  background: var(--ps-blue-deep);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.featured-item:hover .tframe { border-color: var(--ps-cyan); }

.tframe-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 9px 0 0 9px;
  background: rgba(1, 36, 86, 0.7);
  border: 1px solid #2a4d80;
  border-radius: 2px;
  font-size: 12px;
  color: var(--ps-gray);
}
.tframe-tag::before { content: "\25B8"; color: var(--ps-cyan); }

.tframe-imgwrap { position: relative; margin: 9px; border-radius: 2px; overflow: hidden; line-height: 0; }
.tframe-imgwrap img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.96);
  transition: transform 0.4s ease;
}
.featured-item:hover .tframe-imgwrap img { transform: scale(1.035); }
.tframe-imgwrap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(1, 36, 86, 0.22), rgba(1, 36, 86, 0.04) 55%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.featured-meta { padding: 14px 2px 0; }
.featured-num { font-size: 12.5px; color: var(--ps-dim); }
.featured-item h3 {
  font-family: var(--mono);
  font-size: 18.5px;
  font-weight: 700;
  color: var(--ps-white);
  margin: 4px 0 6px;
}
.featured-tags { font-size: 13px; color: var(--ps-muted); margin: 0 0 8px; }
.featured-result {
  font-family: var(--prose);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ps-gray);
  margin: 0;
}

/* ============================================================
   Format-Table — credentials & awards.
   ============================================================ */

.ftable-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ps-dim);
  margin: 26px 0 8px;
}
.ftable-label:first-child { margin-top: 0; }
.ftable-label::before { content: "# "; }

.ftable { width: 100%; margin-bottom: 6px; }

.ftable .ftable-cols, .ftable .ftable-rule {
  display: grid;
  font-size: 13.5px;
  color: var(--ps-dim);
  padding: 3px 0;
}
.ftable.certs .ftable-cols, .ftable.certs .ftable-rule, .ftable.certs .ftable-row {
  grid-template-columns: 1fr 90px;
}
.ftable.awards .ftable-cols, .ftable.awards .ftable-rule, .ftable.awards .ftable-row {
  grid-template-columns: 86px 130px 1fr;
}

/* A sub-header inside the table instead of repeating the category
   name on every row — 国家資格 said once groups the rows under it,
   rather than reading identically three times down a column. */
.ftable-group {
  margin: 14px 0 2px;
  padding: 0 8px;
  font-family: var(--prose);
  font-size: 13px;
  font-weight: 700;
  color: var(--ps-muted);
}
.ftable-group:first-of-type { margin-top: 4px; }

.ftable-row {
  display: grid;
  align-items: baseline;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.ftable-row:hover { background: rgba(255, 255, 255, 0.05); }

.ftable-row .c1 { color: var(--ps-muted); font-size: 13.5px; }
.ftable-row .c2 {
  font-family: var(--prose);
  font-size: 15.5px;
  color: var(--ps-text);
}
.ftable-row .c3 { color: var(--ps-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ftable-row a { color: var(--ps-cyan); text-decoration: underline; text-underline-offset: 2px; }
.ftable-row .c2-note {
  display: block;
  font-family: var(--prose);
  font-size: 13.5px;
  color: var(--ps-muted);
  margin-top: 3px;
}

/* Award results as pills, not plain text — a rank-based result
   (12位/660人) is a different kind of accomplishment than a
   category award (技術力賞), and now looks like one at a glance. */
.ftable.awards .ftable-row .c2col {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  background: var(--line);
  color: var(--ps-gray);
  white-space: nowrap;
}
.ftable.awards .ftable-row .c2col.hi {
  background: rgba(245, 215, 107, 0.16);
  color: var(--ps-yellow);
}

/* ============================================================
   Skills — plain module tokens, not forced into a table (this
   content is a tag cloud, not a record set — the console's color
   language dresses it, the PS metaphor doesn't have to).
   ============================================================ */

.skill-block { margin-bottom: 30px; }
.skill-block:last-of-type { margin-bottom: 10px; }

.skill-tier-label {
  font-family: var(--prose);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ps-text);
  margin: 0 0 4px;
}
.skill-tier-label .tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ps-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px;
  margin-right: 8px;
}

.skill-tokens { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 8px; }
.skill-token {
  padding: 5px 12px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--ps-blue-deep);
  color: var(--ps-gray);
  font-size: 14px;
}
.skill-block.primary .skill-token { border-color: #2a4d80; color: var(--ps-cyan); }

.skill-note {
  font-family: var(--prose);
  font-size: 14.5px;
  color: var(--ps-muted);
  line-height: 1.8;
  margin: 0;
  max-width: 600px;
}

/* ============================================================
   Contact
   ============================================================ */

.contact-block { padding-bottom: 70px; }

.cursor-blink {
  display: inline-block;
  width: 8px;
  height: 17px;
  background: var(--ps-text);
  vertical-align: -3px;
  margin-left: 4px;
  animation: blink 1s steps(1) infinite;
}
.cursor-blink.sm {
  width: 6px;
  height: 12px;
  vertical-align: -2px;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Live session readout (promptbar + statusbar) ----------
   A page is a screenshot; a session is running. These two small,
   real ticking values (wall clock + elapsed time) are the cheapest
   honest way to say "this is live" without any decorative noise. */

.promptbar .path .cursor-blink { background: var(--ps-gray); }

.statusbar-live {
  font-variant-numeric: tabular-nums;
  color: var(--ps-muted);
}
.statusbar-live .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ps-green);
  margin-right: 6px;
  box-shadow: 0 0 5px 1px rgba(95, 207, 138, 0.7);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .statusbar-live .dot { animation: none; }
}

/* ============================================================
   Status bar — bookends the title bar at the very bottom.
   ============================================================ */

.statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  background: var(--ps-blue-deeper);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ps-dim);
}
.statusbar-left, .statusbar-right { display: flex; align-items: center; gap: 14px; }
.statusbar a { color: var(--ps-dim); text-decoration: none; }
.statusbar a:hover { color: var(--ps-cyan); }
.statusbar .branch::before { content: "\2442 "; }

/* ============================================================
   Console sequence — every element in a chapter is part of the
   same live performance, not just the rows.
   Scroll a section into view once ->
     1) its PS> command types itself live (clip-path wiped open in
        discrete character-width steps — steps(n) timing, like a
        monospace caret actually moving — with a blinking cursor
        riding the edge)
     2) a short "running" beat
     3) EVERY piece of content in that section — table headers,
        rows, cards, paragraphs, buttons, tags, notes — grows open
        from nothing (max-height 0 -> its own natural size) while
        simultaneously wiping its text in, one after another. The
        page's own scrollable length grows as this happens, because
        collapsed content really has zero height, not just zero
        opacity.
   One-shot per section, driven by inline styles js/console.js sets
   synchronously before first paint. The rules below only describe
   the resting (fully revealed, non-clipped) state, so the page is
   completely readable with no JS or with reduced motion. */

.chapter-cursor { opacity: 0; transition: opacity 200ms ease; }

/* A brief highlight the instant something finishes printing — the
   "just executed" beat, not a decorative loop. */
@keyframes print-flash {
  from {
    box-shadow: inset 0 0 0 1px rgba(111, 218, 218, 0.55), 0 0 16px 1px rgba(111, 218, 218, 0.22);
  }
  to {
    box-shadow: inset 0 0 0 1px rgba(111, 218, 218, 0), 0 0 0 0 rgba(111, 218, 218, 0);
  }
}
.stagger-item.printed { animation: print-flash 480ms ease-out; }
.chapter-cmd.printed { animation: print-flash 420ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .stagger-item, .chapter-cmd {
    opacity: 1 !important;
    max-height: none !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .chapter-cursor { display: none; }
  .cursor-blink { animation: none; }
}

/* ============================================================
   Subpages — project detail pages. Reuse the console vocabulary
   already built for index.html (.chapter/.chapter-title/.measure/
   .keycap/.skill-token/pill patterns) rather than inventing a
   second visual language.
   ============================================================ */

.subpage-main { padding-bottom: 24px; }

/* パンくずはプロンプトのすぐ下に固定して、読んでいる途中でも一覧へ戻れるようにする。
   固定する位置（--stick-crumb）は reading.js がプロンプトの高さを測って決める。 */
.subpage-crumb {
  position: sticky;
  top: var(--stick-crumb, 81px);
  z-index: 18; /* 重なり順：プロンプト(19) > パンくず(18) > 作品タブ(17)。開いたメニューが下の段に隠れないように */
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ps-dim);
}
.subpage-crumb::before {
  content: "";
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background: var(--ps-blue-deep);
  border-bottom: 1px solid var(--line-soft);
}
.subpage-crumb a { color: var(--ps-dim); text-decoration: none; }
.subpage-crumb a:hover { color: var(--ps-cyan); }
.subpage-crumb .sep { color: var(--line); }
.subpage-crumb .current { color: var(--ps-muted); font-weight: 600; }
.subpage-crumb > a { padding: 3px 4px; }

/* 「作品一覧」と、いまのカテゴリ名は押すとメニューが開く。
   ▾ と、乗せたときの地の色で、押せる場所だと分かるようにする */
.crumb-menu { position: relative; }
.crumb-menu summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 3px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.crumb-menu summary::-webkit-details-marker { display: none; }
.crumb-menu summary::after { content: "▾"; font-size: 11px; color: var(--ps-dim); }
.crumb-menu summary:hover,
.crumb-menu[open] summary { background: rgba(255, 255, 255, 0.07); color: var(--ps-white); }
.crumb-menu summary:hover .current,
.crumb-menu[open] .current { color: var(--ps-white); }
.crumb-menu summary:focus-visible { outline: 1px solid var(--ps-cyan); outline-offset: 1px; }

.crumb-menu ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 250px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--ps-blue-deeper);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.crumb-menu li.all { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.crumb-menu ul a { display: flex; gap: 12px; padding: 8px 14px; color: var(--ps-gray); font-size: 14px; white-space: nowrap; }
.crumb-menu ul a span { font-family: var(--mono); font-size: 12px; color: var(--ps-dim); }
.crumb-menu ul a[href]:hover { background: var(--ps-blue); color: var(--ps-yellow); }
.crumb-menu ul a[aria-current] { color: var(--ps-white); font-weight: 700; }
.crumb-menu ul a[aria-current] span { color: var(--ps-yellow); }

/* 右上のメニューの「作品一覧」。見た目はほかの項目と同じにして、▾ だけ足す。
   狭い画面ではメニュー列が横スクロールで中身を切るので、開いた一覧は crumb.js が画面に対して置く */
.promptbar nav .nav-menu summary {
  padding: 5px 10px;
  color: var(--ps-dim);
  transition: color 0.15s ease, background 0.15s ease;
}
.promptbar nav .nav-menu summary.is-current { color: var(--ps-yellow); background: rgba(245, 215, 107, 0.08); }
.promptbar nav .nav-menu summary.is-current::before { content: "\25B8"; }
.promptbar nav .nav-menu summary:hover,
.promptbar nav .nav-menu[open] summary { color: var(--ps-yellow); background: rgba(245, 215, 107, 0.14); }
.promptbar nav .nav-menu ul { position: fixed; top: auto; left: auto; }
.promptbar nav .nav-menu ul a { border-radius: 0; }

/* 前後のカテゴリへ。端のカテゴリでは、押せない矢印だけを薄く残して位置をそろえる */
.cat-step { display: flex; gap: 6px; margin-left: auto; padding-left: 16px; }
.cat-step > * {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 28px;
  justify-content: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
.cat-step > * span { font-size: 13px; }
.cat-step a { color: var(--ps-gray); }
.cat-step a:hover { border-color: var(--ps-cyan); color: var(--ps-cyan); }
.cat-step > span { color: var(--line); border-color: var(--line-soft); }

/* A second sticky bar, same chrome language as .promptbar, for
   jumping between the projects on this page and moving to the next
   category. */
.reading-nav {
  position: sticky;
  top: 81px;
  z-index: 17;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 0;
  margin: 18px 0 8px;
  background: color-mix(in srgb, var(--ps-blue-deep) 96%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.reading-nav .jump { display: flex; gap: 2px; flex-wrap: wrap; }
.reading-nav .jump a {
  padding: 6px 11px;
  border-radius: 999px;
  color: var(--ps-dim);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.reading-nav .jump a:hover { color: var(--ps-yellow); }
.reading-nav .jump a.is-current { color: var(--ps-yellow); background: rgba(245, 215, 107, 0.1); }
.reading-nav .jump a span { font-family: var(--mono); color: inherit; opacity: 0.65; margin-right: 6px; }
.reading-nav .actions { display: flex; gap: 16px; flex-shrink: 0; }
.reading-nav .actions a { color: var(--ps-dim); text-decoration: none; }
.reading-nav .actions a:hover { color: var(--ps-cyan); }

/* Video thumbnail — links out instead of embedding an <iframe> */
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--ps-blue-deeper);
}
.video-thumb img { height: 100%; cursor: pointer; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-play::before {
  content: "";
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(1, 9, 24, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background 0.15s ease;
}
.video-play::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(2px);
}
.video-thumb:hover .video-play::before { background: var(--ps-cyan); }

/* ---------- Code blocks ---------- */

pre {
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: 6px;
  background: var(--ps-blue-deeper);
  border: 1px solid var(--line);
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
  color: var(--ps-gray);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
}
.deep-dive-content :not(pre) > code {
  background: rgba(111, 218, 218, 0.12);
  color: var(--ps-cyan);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.88em;
}

/* ---------- Deep-dive disclosure ---------- */

/* ---------- Deep-dive disclosure (Terminal Command Style) ---------- */

.tech-deep-dive {
  margin: 20px 0;
  border-radius: 6px;
  background: var(--ps-blue-deep);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tech-deep-dive:hover {
  border-color: rgba(111, 218, 218, 0.45);
}
.tech-deep-dive[open] {
  border-color: rgba(111, 218, 218, 0.65);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.tech-deep-dive.executing {
  animation: print-flash 420ms ease-out;
}

.tech-deep-dive {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin: 18px 0;
  background: var(--ps-blue-deep);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tech-deep-dive:hover {
  border-color: rgba(111, 218, 218, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.tech-deep-dive[open] {
  border-color: rgba(111, 218, 218, 0.55);
}

.tech-deep-dive summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  user-select: none;
  background: rgba(1, 14, 36, 0.7);
  border-bottom: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tech-deep-dive summary::-webkit-details-marker,
.tech-deep-dive summary::marker { display: none; }

.tech-deep-dive summary:hover {
  background: rgba(1, 14, 36, 0.95);
}

.tech-deep-dive[open] summary {
  border-bottom: 1px solid var(--line);
  background: var(--ps-blue-deeper);
}

/* コマンドライン行 */
.deep-dive-cmd-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  min-width: 0;
  flex: 1 1 280px;
}

.deep-dive-cmd-row .ps-prompt {
  color: var(--ps-cyan);
  font-weight: 700;
  white-space: nowrap;
}

.deep-dive-cmd-row .ps-prompt-short {
  display: none;
}

.deep-dive-cmd-row .cmd {
  color: var(--ps-yellow);
  font-weight: 600;
}

.deep-dive-cmd-row .param {
  color: #e5e5e5;
  font-weight: 500;
  transition: color 0.15s ease;
}

.deep-dive-cmd-row .deep-dive-comment {
  color: var(--ps-dim);
  font-family: var(--prose);
  font-size: 12.5px;
  margin-left: 4px;
  transition: color 0.15s ease;
}

.tech-deep-dive summary:hover .deep-dive-cmd-row .param {
  color: var(--ps-cyan);
}

.tech-deep-dive summary:hover .deep-dive-cmd-row .deep-dive-comment {
  color: var(--ps-muted);
}

/* 実行キートリガー */
.deep-dive-run-trigger {
  flex-shrink: 0;
  pointer-events: none;
}

.deep-dive-run-trigger .keycap {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(1, 18, 48, 0.9);
  border: 1px solid var(--line);
  color: var(--ps-muted);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-deep-dive summary:hover .deep-dive-run-trigger .keycap {
  border-color: var(--ps-cyan);
  color: var(--ps-white);
  background: #052a5c;
  box-shadow: 0 0 10px rgba(111, 218, 218, 0.35), 0 2px 0 rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.tech-deep-dive[open] .deep-dive-run-trigger .keycap {
  border-color: rgba(111, 218, 218, 0.4);
  color: var(--ps-cyan);
  background: rgba(111, 218, 218, 0.08);
  box-shadow: none;
  transform: translateY(0);
}

/* 実行パルス演出 */
@keyframes deepDiveExecPulse {
  0% {
    box-shadow: inset 0 0 0 1px rgba(111, 218, 218, 0.9), 0 0 20px rgba(111, 218, 218, 0.4);
    background: rgba(5, 42, 92, 0.85);
  }
  100% {
    box-shadow: inset 0 0 0 1px rgba(111, 218, 218, 0), 0 0 0 transparent;
    background: var(--ps-blue-deeper);
  }
}

.tech-deep-dive.executing summary {
  animation: deepDiveExecPulse 0.42s ease-out;
}

/* STDOUT 出力バー */
.deep-dive-stdout-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 16px;
  background: #011129;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ps-dim);
  letter-spacing: 0.03em;
}

.stdout-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stdout-prompt {
  color: var(--ps-cyan);
  font-weight: 700;
}

.stdout-file {
  color: var(--ps-muted);
  font-weight: 600;
}

.stdout-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.stdout-badge {
  color: var(--ps-dim);
  font-size: 10.5px;
}

.stdout-exit {
  color: #4ec9b0;
  font-weight: 600;
}

/* 開閉アニメーション用ボディラッパー */
.deep-dive-body {
  overflow: hidden;
  background: var(--ps-blue-deep);
}

.deep-dive-content {
  padding: 16px 20px 22px;
}

.deep-dive-content h4 {
  font-family: var(--prose);
  font-size: 14px;
  margin: 18px 0 8px;
  color: var(--ps-cyan);
}

.deep-dive-content h4:first-child {
  margin-top: 0;
}

.deep-dive-content p {
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ps-gray);
  margin: 0 0 12px;
}

.deep-dive-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--ps-gray);
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.85;
}

.deep-dive-content li {
  margin-bottom: 6px;
}

.deep-dive-content li strong {
  color: var(--ps-white);
}

@media (max-width: 760px) {
  .deep-dive-cmd-row .ps-prompt-full { display: none; }
  .deep-dive-cmd-row .ps-prompt-short { display: inline; }
  .stdout-badge { display: none; }
}

/* ---------- 作品セクションの位置（固定ナビの下に止める） ---------- */

/* 作品ページでは、固定段（プロンプト・パンくず・作品タブ）の高さぶん下にずらして止める */
html:has(.subpage-crumb) { scroll-padding-top: var(--stick-end, 160px); }
section.project-detail[id] { scroll-margin-top: 6px; }

/* ---------- After-read nav ---------- */

.work-after-nav { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.back-to-overview { display: inline-block; margin-bottom: 14px; color: var(--ps-dim); font-size: 13px; text-decoration: none; }
.back-to-overview:hover { color: var(--ps-cyan); }
.project-pagination { display: flex; gap: 8px; margin-bottom: 16px; }
.pagination-link {
  flex: 1 1 0;
  padding: 14px 16px;
  border-radius: 6px;
  background: var(--ps-blue-deep);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.pagination-link:hover { border-color: var(--ps-cyan); }
.pagination-link.next { text-align: right; }
.pagination-link-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ps-dim); text-transform: uppercase; margin-bottom: 3px; }
.pagination-link-name { font-family: var(--prose); font-size: 14.5px; font-weight: 700; color: var(--ps-white); }
.reach-out-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px 8px 8px 2px;
  background: rgba(111, 218, 218, 0.08);
}
.reach-out-cta p { margin: 0; font-family: var(--prose); font-size: 14px; color: var(--ps-gray); }

/* ---------- Lightbox (js/lightbox.js) ---------- */

#lb-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  background: rgba(1, 9, 24, 0.92);
}
#lb-overlay.lb-active { display: flex; }
#lb-img { max-width: min(1100px, 92vw); max-height: 76vh; width: auto; height: auto; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
#lb-caption { margin: 0; max-width: 680px; color: rgba(255,255,255,0.82); font-family: var(--prose); font-size: 13px; line-height: 1.7; text-align: center; }
#lb-close {
  position: fixed; top: 20px; right: 24px;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
#lb-close:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   ページを移動しても、ウィンドウは同じまま（View Transitions）
   タイトルバー・プロンプト・ステータスバーは動かさず、中身だけが入れ替わる。
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.titlebar { view-transition-name: titlebar; }
.promptbar { view-transition-name: promptbar; }
.statusbar { view-transition-name: statusbar; }

::view-transition-group(titlebar),
::view-transition-group(promptbar),
::view-transition-group(statusbar) { animation: none; }
::view-transition-old(titlebar),
::view-transition-old(promptbar),
::view-transition-old(statusbar) { display: none; }
::view-transition-new(titlebar),
::view-transition-new(promptbar),
::view-transition-new(statusbar) { animation: none; }

::view-transition-old(root) { animation: 140ms linear both vt-fade-out; }
::view-transition-new(root) { animation: 200ms 60ms linear both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* 代表作品のサムネイル → 作品ページの表紙 */
::view-transition-group(work-cover) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }
::view-transition-old(work-cover),
::view-transition-new(work-cover) { height: 100%; object-fit: cover; }

/* ============================================================
   ヒーローの「手触り」— 一文字ずつ、つまんで引っぱれる
   ============================================================ */

.hero h1 .accent.is-touchable { cursor: grab; }
.hero h1 .grab-ch {
  display: inline-block;
  position: relative;
  z-index: 2; /* 下の段落より手前に（段落は clip-path で重なりの層を持つ） */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
}
.hero h1 .accent.is-grabbing,
.hero h1 .accent.is-grabbing .grab-ch { cursor: grabbing; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   技術スキル — カーソルを合わせると、そのスキルを使った作品に絞り込む
   ============================================================ */

button.skill-token {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.skill-tokens button.skill-token:hover { border-color: var(--ps-cyan); color: var(--ps-white); }
.skill-tokens button.skill-token[aria-pressed="true"] {
  border-color: var(--ps-yellow);
  background: var(--ps-yellow);
  color: var(--ps-blue);
}

.skill-out {
  margin: 18px 0 4px;
  font-size: 14px;
}
.skill-out[hidden] { display: none; }
.skill-out .cmdline { margin: 0 0 10px; color: var(--ps-dim); overflow-wrap: anywhere; }
.skill-out .cmdline .cmd { color: var(--ps-yellow); }
.skill-out .cmdline .param { color: var(--ps-gray); }
.skill-out .cmdline .str { color: var(--ps-cyan); }
.skill-out .cols,
.skill-out .rule,
.skill-out a {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 16px;
}
.skill-out .cols { color: var(--ps-dim); }
.skill-out .rule { color: var(--ps-dim); margin-bottom: 2px; }
.skill-out a {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 4px;
  color: var(--ps-cyan);
  text-decoration: none;
}
.skill-out a:hover { background: rgba(255, 255, 255, 0.06); }
.skill-out a span:last-child { color: var(--ps-muted); }
.skill-out .none { margin: 0; color: var(--ps-muted); font-family: var(--prose); }

/* 横に余裕があるときは、結果を右の欄に出す。
   本文の途中に差し込むと、カーソルを動かすたびに下の段が上下にずれるため */
@media (min-width: 1000px) {
  .skills-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 44px;
    align-items: start;
  }
  .skills-layout .skill-out {
    position: sticky;
    top: 130px;
    margin: 0;
    min-height: 260px;
    padding: 2px 0 0 24px;
    border-left: 1px solid var(--line-soft); /* 分割したペインの境目 */
  }
  .skills-layout .skill-out .cols,
  .skills-layout .skill-out .rule,
  .skills-layout .skill-out a { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
  .skills-layout .skill-out a span:last-child { font-size: 13px; white-space: nowrap; }
}

/* ============================================================
   最後のプロンプト — 灰色の exit は PSReadLine の入力候補。押すと実行する
   ============================================================ */

.exit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  margin: 40px 0 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.exit-prompt { color: var(--ps-gray); }
.exit-input { display: inline-flex; align-items: baseline; }
.exit-input .cursor-blink { margin: 0 2px 0 0; }
.exit-predict {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ps-dim);
  cursor: pointer;
}
.exit-predict:hover,
.exit-predict:focus-visible { color: var(--ps-gray); text-decoration: underline dotted; text-underline-offset: 3px; }
.exit-predict.is-typed { color: var(--ps-text); text-decoration: none; }
.exit-predict.is-typed + .cursor-blink { margin-left: 2px; }

/* ============================================================
   連絡先 — Send-Mail を実行する
   ============================================================ */

.mail-out {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ps-gray);
}
.mail-out[hidden] { display: none; }
.mail-out .cmdline { color: var(--ps-dim); }
.mail-out .cmdline .cmd { color: var(--ps-yellow); }
.mail-out .cmdline .param { color: var(--ps-gray); }
.mail-out .cmdline .str { color: var(--ps-cyan); }
.mail-out .k { display: inline-block; width: 86px; color: var(--ps-dim); }
.mail-out .ok { color: var(--ps-green); font-weight: 600; }
.mail-out .note { font-family: var(--prose); color: var(--ps-muted); }

/* ============================================================
   404 — Set-Location のエラー
   ============================================================ */

.err-block {
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.err-block .cmdline { color: var(--ps-dim); margin: 0 0 2px; }
.err-block .cmdline .cmd { color: var(--ps-yellow); }
.err-block .cmdline .str { color: var(--ps-cyan); }
/* Windows PowerShell 5 のエラーは、黒地に赤い文字 */
.err-block .err {
  display: inline;
  padding: 1px 0;
  background: #000;
  color: #ff6b6b;
  white-space: pre-wrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.nf-lead {
  font-family: var(--prose);
  font-size: 17px;
  color: var(--ps-gray);
  line-height: 1.9;
  margin: 20px 0 26px;
}

/* ============================================================
   ステータスバー — 見た作品の数
   ============================================================ */

.statusbar .works-seen { font-variant-numeric: tabular-nums; }
.statusbar .works-seen.is-all { color: var(--ps-yellow); }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 760px) {
  .promptbar-inner { flex-wrap: wrap; gap: 8px 4px; padding: 8px 0; }
  .promptbar nav { justify-content: flex-start; width: 100%; overflow-x: auto; }
  .promptbar .path { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .promptbar .path .root { display: none; } /* 狭い画面では、押せる階層と現在地が切れないよう手前を省く */
  /* パンくずは1行に収める。トップへはパスと上のメニューからも行けるので「ホーム」を省き、前後は矢印だけにする */
  .subpage-crumb > a:first-child, .subpage-crumb > a:first-child + .sep { display: none; }
  .crumb-menu { min-width: 0; }
  .crumb-menu summary { padding: 3px 6px; }
  .crumb-menu .current { overflow: hidden; text-overflow: ellipsis; }
  .cat-step { padding-left: 8px; }
  .cat-step > * span { display: none; }
  .reading-nav { flex-direction: column; align-items: flex-start; }
  .reading-nav .jump { width: 100%; }
  .reading-nav .actions { width: 100%; justify-content: space-between; }
  .gci-cols span:nth-child(2), .gci-cols span:nth-child(3),
  .gci-rule span:nth-child(2), .gci-rule span:nth-child(3) { display: none; }
  .gci-cols, .gci-rule { grid-template-columns: 50px 1fr; }
  .gci-row { grid-template-columns: 50px 1fr auto; }
  .gci-row .date, .gci-row .len { display: none; }
  .featured-grid { grid-template-columns: 1fr; }
  .ftable.certs .ftable-cols, .ftable.certs .ftable-rule, .ftable.certs .ftable-row { grid-template-columns: 1fr 76px; }
  .ftable.awards .ftable-cols, .ftable.awards .ftable-rule, .ftable.awards .ftable-row { grid-template-columns: 72px 1fr; }
  .ftable.awards .ftable-cols span:nth-child(2), .ftable.awards .ftable-row .c2col { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 20px; }
  .about-aside { max-width: 280px; }
  .statusbar { flex-wrap: wrap; }
}

/* 404 の一覧は Mode と Name だけ */
.nf-cols { grid-template-columns: 66px 1fr !important; }
.nf-list .gci-row { grid-template-columns: 66px 1fr auto !important; }