/* @importはpeitho.css(css/*.cssをファイル名順に連結)の先頭に来ないと無効。
   このファイル名はcss/内で必ず最初にソートされるよう00-を維持すること。
   琉球びんがたデザインシステムの指定フォント + コード用のM PLUS 1 Code。 */
@import url("fonts/shippori-mincho-b1/index.css");
@import url("fonts/zen-kaku-gothic-new/index.css");
@import url("fonts/cormorant-garamond/index.css");
@import url("fonts/m-plus-1-code/index.css");
.code-line {
  display: inline-block;
  width: 100%;
}

.code-line-emphasis,
.code-range-emphasis {
  background: var(--peitho-emphasis-background, rgba(217, 163, 0, 0.18));
}

.code-line-emphasis {
  box-shadow: inset 3px 0 0 var(--peitho-emphasis-marker, #d9a300);
}

.code-range-emphasis {
  border-radius: 0.15em;
}

pre:has(.code-line-emphasis, .code-range-emphasis)
  .code-line:not(.code-line-emphasis):not(:has(.code-range-emphasis)) {
  opacity: var(--peitho-emphasis-dim, 0.45);
}



/* 琉球びんがた Design System (claude.ai/design/p/660471f4) をスライドに適用したもの。
   地は生成(shironuno)、墨で書き、朱を1画面に1箇所。角は立てる(radius-none)、
   罫は1pxのヘアライン。トークン名はデザインシステムのものを引き継いでいる。 */

/* preview/presentは各スライドをShadow DOMに入れるので、:root はその中では
   何にも一致せず var() が全部空になる（＝背景も文字色も落ちて真っ黒になる）。
   ホストとスライド自身の両方に定義して、build/preview/present で同じに解決させる。 */
:root,
:host,
.peitho-slide {
  /* 顔料 */
  --shu-300: #EFA694;
  --shu-500: #D2462F;
  --fukugi-300: #F4D98C;
  --midori-300: #AFC189;
  --ai-500: #21447A;
  --ai-300: #8C9CBC;
  --kon-500: #16203C;

  /* 墨 / 生成 */
  --sumi-900: #23211F;
  --sumi-700: #4A453F;
  --sumi-600: #6B655C;
  --sumi-300: #CBC4B6;
  --sumi-200: #E2DCCF;
  --kinari-100: #F6F1E6;
  --shironuno: #FCFAF7;

  /* セマンティック */
  --text-primary: var(--sumi-900);
  --text-secondary: var(--sumi-700);
  --text-muted: var(--sumi-600);
  --accent: var(--shu-500);
  --link: var(--ai-500);
  --surface-page: var(--shironuno);
  --surface-sunken: var(--kinari-100);
  --surface-ink: var(--kon-500);
  --border-hairline: var(--sumi-200);
  --border-default: var(--sumi-300);

  /* タイポグラフィ */
  --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-latin: "Cormorant Garamond", Georgia, serif;
  --font-mono: "M PLUS 1 Code Variable", "Zen Kaku Gothic New", ui-monospace, Menlo, monospace;

  --tracking-body: 0.04em;
  --tracking-wide: 0.1em;
  --tracking-widest: 0.22em;
  /* System says 1.9; slides run far fewer lines per screen than the web pages
     the system was drawn from, so 1.9 reads as drift. Tightened deliberately. */
  --leading-body: 1.75;
  --leading-heading: 1.5;
}

/* ビルド版のレターボックス地。Peithoのビルトインstyleがpeitho.cssより後ろに
   出るので詳細度で勝たせる。色はトークンではなくリテラル（このルールは
   Shadow DOM の外に置かれ、そこでは :host のトークンが解決しないため）。 */
html:root,
html:root body,
html:root #peitho-slides {
  background: #F6F1E6;
}

.peitho-slide {
  width: 1280px;
  height: 720px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 56px 84px;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-feature-settings: "palt";
}

/* Single upstream rule so every code-ish element gets the webfont — slot-scoped
   rules kept leaking inline <code> in other slots to the browser default. */
pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

/* --- headings --- */

.intro h1 {
  margin: 0;
  font-size: 46px;
  line-height: var(--leading-heading);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-display);
  color: var(--text-primary);
  line-break: strict;
  word-break: auto-phrase;
}

/* --- cover --- */

.intro-cover {
  justify-content: center;
  align-items: center;
}

.cover-inner {
  max-width: 1000px;
  text-align: center;
}

.intro-cover h1 {
  font-size: 68px;
  letter-spacing: 0.04em;
}

.cover-subtitle {
  margin: 34px 0 0;
  font-size: 34px;
  font-family: var(--font-display);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-wide);
}

.cover-meta {
  margin: 48px 0 0;
  font-family: var(--font-latin);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  gap: 32px;
  letter-spacing: var(--tracking-wide);
}

/* --- statement --- */

.intro-statement {
  justify-content: center;
  align-items: center;
}

.statement-inner {
  max-width: 1040px;
  text-align: center;
}

.intro-statement h1 {
  font-size: 60px;
  letter-spacing: 0.05em;
}

/* --- shared body --- */

.topic-body {
  margin-top: 40px;
}

/* Footnotes sit at the slide's bottom edge as page furniture, below a
   hairline, in the muted ink. Lint exempts them from the 24pt floor. */
.footnotes {
  margin-top: auto;
}

.peitho-slide[data-empty-slots~="footnotes"] .footnotes {
  display: none;
}

.peitho-footnotes {
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
}

.peitho-footnotes ol {
  margin: 0;
  padding-left: 1.4em;
}

.peitho-footnotes p {
  margin: 0;
}

.peitho-footnotes a {
  color: var(--link);
}

.slot-body {
  font-size: 32px;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-secondary);
  line-break: strict;
  word-break: auto-phrase;
}

.slot-body p {
  margin: 0 0 24px;
  max-width: 34em;
}

/* 藍 alone marks a link at rest; the system's hairline underline is its
   hover state, which a slide never reaches. */
.slot-body a {
  color: var(--link);
  text-decoration: none;
}

/* Emphasis in JP typesetting comes from color and tracking, never weight. */
.slot-body strong {
  color: var(--accent);
  font-weight: inherit;
}

/* Inline code takes the tinted panel colour but no rule: hairlines are
   separators in this system, and a boxed span outshouts the sentence. */
.slot-body code {
  font-size: 1em;
  color: var(--text-primary);
  background: var(--surface-sunken);
  padding: 2px 8px;
}

/* Quoted source text: a 2px rule on the left, the words set in 明朝 so a
   borrowed line reads as borrowed. */
.slot-body blockquote {
  margin: 0 0 24px;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  color: var(--text-primary);
}

.slot-body blockquote p {
  margin: 0;
}

/* A second paragraph in a quote is its attribution ("— source"): set it in
   the body face and muted ink so it doesn't read as part of the quote. */
.slot-body blockquote p + p {
  margin-top: 4px;
  font-family: var(--font-body);
  color: var(--text-muted);
  text-align: right;
}

.slot-body ul {
  margin: 0;
  padding-left: 1.1em;
}

/* Bullets carry the body copy now, so they run longer per slide than they did
   as a summary list — tighter than a paragraph gap, or the lists overflow. */
.slot-body li {
  margin-bottom: 14px;
}

/* Markers mark structure, not emphasis. Leaving them 朱 put two accents on
   one screen and 強調 stopped reading as 強調. */
.slot-body li::marker {
  color: var(--sumi-300);
}

/* The second level's hollow circle is only a hairline, so 墨300 all but
   disappears on the cloth ground — give it the muted ink instead. */
.slot-body li li::marker {
  color: var(--sumi-600);
}

/* --- code --- */

.code-body {
  margin-top: 30px;
}

.intro-code .slot-body p {
  max-width: none;
  margin-bottom: 0;
}

/* A code slide with no prose has nothing between the title and the panel, so
   the two gaps collapse into one. Keep it wide enough that the title isn't
   sitting on the code. */
.intro-code[data-empty-slots~="body"] .code-body {
  display: none;
}

.intro-code[data-empty-slots~="body"] .code-panel {
  margin-top: 16px;
}

/* code-stack opens on a label rather than a panel, which reads as sitting on
   the title at 16px — give it the regular gap back. */
.intro-code-stack[data-empty-slots~="body"] .code-panel {
  margin-top: 28px;
}

.code-panel {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Code inverts to 紺 so it reads as a pasted-in field, the way a dyed panel
   sits on undyed cloth. Square corners, hairline edge — no radius. */
.intro pre {
  display: block;
  margin: 0;
  padding: 20px 30px;
  background: var(--surface-ink);
  border: 1px solid var(--kon-500);
  overflow: hidden;
}

.intro pre code {
  font-size: 32px;
  line-height: 1.5;
  color: #E4E7EF;
}

/* Three pigments, not five: 水色 and 藍 sat too close on 紺 to read as
   different things, so anything past these three keeps the panel's own ink. */
.intro pre .hl-comment {
  color: var(--ai-300);
}

.intro pre .hl-string {
  color: var(--midori-300);
}

.intro pre .hl-keyword,
.intro pre .hl-storage,
.intro pre .hl-type,
.intro pre .hl-entity {
  color: var(--fukugi-300);
}

/* Line emphasis: peitho's shell ships amber defaults, so the deck restates
   them in 福木 to keep the panel inside the bingata palette. The background
   alone carries the emphasis; no leading marker bar. */
.intro pre {
  --peitho-emphasis-background: rgba(244, 217, 140, 0.16);
  --peitho-emphasis-marker: transparent;
  --peitho-emphasis-dim: 0.4;
}

/* Build diagnostics keep the terminal's own colors: error in 朱, help in 福木,
   the message itself in the panel's ink. */
.intro pre .hl-invalid {
  color: var(--shu-300);
  font-weight: 700;
}

.intro pre .hl-inserted {
  color: var(--fukugi-300);
  font-weight: 700;
}

/* --- compare: code panels side by side, each under its own label --- */

.compare-row {
  margin-top: 32px;
  display: flex;
  gap: 32px;
  align-items: stretch;
  min-height: 0;
}

/* The columns stretch to the taller one, and the panel takes the rest of its
   column, so both panels end on the same line whatever their line counts. */
.compare-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.intro-compare pre {
  flex: 1;
}

/* Two-way comparisons leave the centre column out. */
.peitho-slide[data-empty-slots~="center"] .compare-col-center {
  display: none;
}

.code-label p {
  margin: 0 0 12px;
  font-size: 32px;
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
}

/* --- shot --- */

.intro-shot h1 {
  font-size: 40px;
}

.shot-body {
  margin-top: 20px;
}

.intro-shot .slot-body {
  font-size: 32px;
  line-height: 1.6;
}

.intro-shot .slot-body p {
  max-width: none;
  margin-bottom: 0;
}

.shot-frame {
  flex: 1;
  min-height: 0;
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Several images in one shot are frames of one diagram: stack them so each
   reveal step lays the next frame over the last. */
.slot-shot {
  display: grid;
}

.slot-shot > * {
  grid-area: 1 / 1;
}

/* Photography sits flat on the cloth — hairline border, no elevation. */
.shot-frame img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
  border: 1px solid var(--border-default);
}

/* --- profile --- */

.intro-profile {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.profile-photo {
  margin: 0 0 24px;
}

.profile-photo img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid var(--border-default);
  object-fit: cover;
}

.intro-profile h1 {
  font-size: 44px;
}

.profile-body {
  margin-top: 20px;
}

.intro-profile .slot-body {
  font-size: 32px;
  line-height: 1.8;
}

.intro-profile .slot-body p {
  max-width: none;
  margin: 0 0 10px;
}

/* --- books --- */

.intro-books h1 {
  font-size: 40px;
}

.books-row,
.books-row .slot-covers {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.books-row {
  margin-top: 40px;
}

.books-row img {
  height: 400px;
  width: auto;
  border: 1px solid var(--border-default);
}

/* --- photos: two portrait shots side by side --- */

.intro-photos h1 {
  font-size: 40px;
}

.photos-body {
  margin-top: 18px;
}

.intro-photos .slot-body {
  font-size: 32px;
  line-height: 1.6;
}

.intro-photos .slot-body p {
  max-width: none;
  margin-bottom: 0;
}

.photos-row,
.photos-row .slot-photos {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.photos-row {
  margin-top: 24px;
}

.photos-row img {
  max-height: 380px;
  width: auto;
  border: 1px solid var(--border-default);
}

/* --- embedded X posts --- */

/* Peitho emits .peitho-embed-card with no styling of its own, so the deck
   gives it one: a hairline card on the tinted panel, sized to the measure
   rather than running the full slide width. */
.peitho-embed-card {
  max-width: 30em;
  background: var(--surface-sunken);
  border: 1px solid var(--border-hairline);
  padding: 24px 28px;
  box-sizing: border-box;
}

.peitho-embed-card__author {
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  margin-bottom: 14px;
}

.peitho-embed-card__author-name {
  color: var(--text-primary);
  font-weight: 500;
}

.peitho-embed-card__handle,
.peitho-embed-card__date {
  color: var(--text-muted);
  font-size: 0.82em;
  text-decoration: none;
}

.peitho-embed-card__tweet-text {
  margin: 0;
  color: var(--text-secondary);
}

.peitho-embed-card__date {
  display: block;
  margin-top: 14px;
}

/* --- portrait: one tall image (an X screenshot) beside its text --- */

.intro-portrait {
  flex-direction: row;
  gap: 48px;
  align-items: stretch;
}

.portrait-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.intro-portrait h1 {
  font-size: 40px;
}

.intro-portrait .portrait-body {
  margin-top: 24px;
}

.intro-portrait .slot-body p {
  max-width: none;
}

.portrait-frame {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
}

/* The screenshot is the point of the slide — let it run the full height. */
.portrait-frame img {
  max-height: 608px;
  width: auto;
  border: 1px solid var(--border-default);
}

/* --- chapter: the divider between sections --- */

/* 紺 carries dark bands in this system, and a chapter opener is exactly that:
   one flat field, no rule, the number set in the latin face. */
.intro-chapter {
  justify-content: center;
  align-items: center;
  background: var(--surface-ink);
}

.chapter-inner {
  max-width: 1000px;
  text-align: center;
}

.intro-chapter h1 {
  font-size: 64px;
  color: var(--kinari-100);
  letter-spacing: 0.06em;
}

/* Keyed overrides: selectors are validated against each slide's layout slots,
   and every key must exist in the deck. */

/* whoami: web/GitHub/X icons before each link. The sapporo deck's PNGs
   recolored to 藍 #21447A so they sit in the bingata palette; inlined as data
   URIs so the build never has to copy them. */
[data-slide-key="whoami"] .slot-body a::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  vertical-align: -4px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* whoami: five lines of body under the photo — at the layout's 1.8 leading
   they run past the bottom edge, so this slide reads a little tighter. */
[data-slide-key="whoami"] .slot-body {
  line-height: 1.6;
}

[data-slide-key="whoami"] .slot-body p {
  margin-bottom: 4px;
}

[data-slide-key="whoami"] .slot-body a[href="https://mizzy.org"]::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAApVBMVEUhRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHo0vNvfAAAANXRSTlMAamsMQ6POCG8b7f/B0Ej5T/2H//KB6SIimCJhH1Xo/v0cmUvLr1b06f2lgM39ZMrrM//jmcMb6YcAAADZSURBVCjPhVIJbsIwEFyK7YSEs0ACpS13W+5z/v+1eu3YDmpQN5JHmrFnrxDVqCpe9PdP1IVUUFLUH+kohos4KvGNBCGSRuA9mVJTn06J/P20RdTuICncnH9xr9tDbOvBo0CvgKlNFHzf5xxAMEgMMyDPR14YQzIovFGGUvE0gWIw5llZeLf5FD70+Tk1MWNmbl9ILBiyUNrS5hBYkbV0wtpWpfv4Yky98G370J3/MLSMMt1sd0XnPKt9MDscT25WPN3zxWcJ0zX7uN7u+Z99PN9g1c6r/x6iX5s8JfrwoOKZAAAAAElFTkSuQmCC");
}

[data-slide-key="whoami"] .slot-body a[href="https://github.com/mizzy"]::before {
  background-image: url("data:image/png;base64,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");
}

[data-slide-key="whoami"] .slot-body a[href="https://x.com/gosukenator"]::before {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAABjFBMVEUhRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHohRHr1Ku6IAAAAgnRSTlMAt1cMt048JwTFxQRz+woAnfIMAbzQD+eiehkQgx9dWysxSEsrQEFkHosqWwCo5wbdegv+lRueACdVRsYEVSeDDpX+C9SyAAjnqBhpArRkQDOOfBBsghDKuwFPNAPQvBVwN0wWczs4I2k7PHUTinIgwcUCCN6vAQG7dwKz2QcQQBIwbDqeGgAAAShJREFUKM91kgVzwzAMhTXmdczQjpmZOmZmZl7HzJt++Z5iJ21yN93l+emTE8uOif6LIB3BFgkJRYRROOuI0DwyCkl0DFGsLsTFG9yVAJ+YBJecwpyals6cYRQyZVKWYbPhcnIheUjyhbv1Vz3wBYWQIioWXmL1UYqsrBxSIbzS33JVNXNNbZ1qoj5wMw2NzE3NBm9ptW2zDai9A9LZ5TiAbsAeL6TXeTR9zP0Dg8xDw47CyCjz2DhembDzySlZeXoGMmsrzKlePfOQhQC+KHQJz/IK8+qaxdeFb2xuMW/vwO2afE/4PtEBhsMjyLHiJ8JPxZ3BnF9AfJL5hF+qOVew1zfMt3dE9w9IHp9U4flF/89XenvH8PFpLvdlXgH6livy42/8V9+aP2xjfFNrfKGjAAAAAElFTkSuQmCC");
}

/* deck-placeholders: a wide screenshot of a Slides layout — let it use the
   full column instead of the shot layout's default height cap, or the
   placeholder labels stop being readable from the back of the room. */
[data-slide-key="deck-placeholders"] .shot-frame img {
  max-height: 520px;
}

/* champloo-2015: the embedded X post renders as a 1100x690 screenshot, so the
   shot layout's 400px cap left the tweet text small. This slide carries no
   body copy, so the frame can take the height. */
[data-slide-key="champloo-2015"] .shot-frame img {
  max-height: 540px;
}

/* works: three tall covers with no body copy. At 400px the row uses 991px of
   the 1112px box, so there is room in both axes — raise the height and pull
   the gap in so the widest cover still clears the edges. */
[data-slide-key="works"] .books-row,
[data-slide-key="works"] .books-row .slot-covers {
  gap: 44px;
}

[data-slide-key="works"] .books-row img {
  height: 470px;
}

/* deck-markdown: the example runs 12 lines once the blank separators are in,
   so the height comes out of the leading rather than the type size — the code
   stays at the panel's 32px (24pt), which is lint's floor. */
[data-slide-key="deck-markdown"] .slot-code code {
  line-height: 1.15;
}

/* X post embeds: peitho renders each post as a screenshot of the card, which
   already draws its own rounded border. The frame's square border doubled it
   and cut across the corners, so these three drop it and keep the card's. */
[data-slide-key="champloo-2015"] .shot-frame img,
[data-slide-key="roommate"] .portrait-frame img,
[data-slide-key="deck-love"] .portrait-frame img {
  border: none;
}

/* slot-contract-ok / -ng: the labels carry the verdict, so give them colour —
   藍 on the slide that passes, 朱 on the one that fails. */
[data-slide-key="slot-contract-ok"] .code-label p {
  color: var(--ai-500);
}

[data-slide-key="slot-contract-ng"] .code-label p {
  color: var(--shu-500);
}

/* lint-overflow-bounds: a wide diagram with small labels — give it the taller
   frame, same as the other full-width figures. */
[data-slide-key="lint-overflow-bounds"] .shot-frame img {
  max-height: 520px;
}

[data-slide-key="lint-overflow-clipped"] .shot-frame img {
  max-height: 520px;
}

/* closing: the bookend to the cover — centred on the cloth ground. */
[data-slide-key="closing"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}

[data-slide-key="closing"] h1 {
  font-size: 60px;
}

[data-slide-key="closing"] .topic-body {
  margin-top: 48px;
}

[data-slide-key="closing"] .slot-body ul {
  list-style: none;
  padding-left: 0;
}

/* lint-fontsize-waiver: the emphasis marks the one declaration that matters,
   but the rule around it is still read — dim it only slightly. */
[data-slide-key="lint-fontsize-waiver"] pre {
  --peitho-emphasis-dim: 0.7;
}

/* deck-encounter: the title names both the source and what it became, and
   runs a few characters past one line at the default 46px. */
[data-slide-key="deck-encounter"] h1 {
  font-size: 42px;
}