/* Sakuga site: shared styles for every page. It sits on sakuga/tokens.css and sakuga/light-first.css (the light-first layer, generated by compile_tokens.py) and adds the page chrome. */
:root {
  --fill-off: #8b8a95;
  --page-shadow: 0 1px 2px rgba(11, 10, 16, 0.08), 0 12px 32px rgba(11, 10, 16, 0.1);
  --mark-ink: #1f232f;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1328px;
  --gut-l: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --fill-off: #6e6d78; --page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6); --mark-ink: #ffffff; }
}
:root[data-theme="dark"] { --fill-off: #6e6d78; --page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6); --mark-ink: #ffffff; }
/* A theatre block is always dark: the tokens.css dark block applies to any [data-theme="dark"] element. */
.theatre { --mark-ink: #ffffff; --page-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.6); color-scheme: dark; background: var(--bg-canvas); color: var(--text-primary); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Smooth only once the page has loaded: arriving at a #section from another page lands on it instead of flying down to it. */
@media (prefers-reduced-motion: no-preference) { html.loaded { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 16px/1.6 var(--font-sans);
  padding-left: var(--gut-l);
  padding-right: var(--gut-r);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, pre { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 700; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(0px, 3.2vw - 12px, 40px); }
.bleed { margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); }
.band { margin-left: calc(-1 * var(--gut-l)); margin-right: calc(-1 * var(--gut-r)); padding-left: var(--gut-l); padding-right: var(--gut-r); }
.skip { position: absolute; left: var(--gut-l); top: 8px; z-index: 20; padding: 10px 16px; border-radius: var(--radius-md); background: var(--action-primary); color: var(--text-inverse); font-weight: 700; transform: translateY(-150%); text-decoration: none; }
.skip:focus { transform: none; }

.eyebrow { font: 600 15px/20px var(--font-sans); color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.caption { font: 500 13px/18px var(--font-sans); color: var(--text-muted); }

/* Page buttons use Sakuga's button tokens so static and live buttons match */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--size-control-md); padding: 0 var(--space-5); border: 0; border-radius: var(--radius-md); font: 700 15px/18px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard); }
.btn:active { transform: scale(0.98); }
.btn-lg { min-height: var(--size-control-lg); padding: 0 var(--space-6); font-size: 16px; }
.btn-sm { min-height: var(--size-control-sm); padding: 0 14px; font-size: 14px; }
.btn-primary { background: var(--action-primary); color: var(--text-inverse); }
.btn-secondary { background: var(--action-secondary); color: var(--text-primary); font-weight: 600; }
.btn-outline { background: transparent; color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-control); font-weight: 600; }
.btn-outline:hover, .btn-ghost:hover { background: var(--bg-fill-subtle); }
.btn-ghost { background: transparent; color: var(--text-primary); font-weight: 600; }

/* Something announced but not out yet, drawn like Sakuga's PremiereSlot: a placeholder edge, no action */
.soon-pill { display: inline-flex; align-items: center; min-height: var(--size-control-sm); padding: 0 14px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-placeholder); font: 600 14px/18px var(--font-sans); color: var(--text-secondary); white-space: nowrap; }


/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--font-display); color: var(--text-primary); text-decoration: none; min-height: 44px; }
/* The Sakuga mark is an ink tile with the glyph cut out. Drawn as a mask, the tile takes the ink as supplied on light grounds and turns white on dark ones, so the glyph always shows the ground through it. */
.mark { width: 30px; height: 31px; flex: none; background: var(--mark-ink); -webkit-mask: url("art/sakuga-mark.png") center / contain no-repeat; mask: url("art/sakuga-mark.png") center / contain no-repeat; }
.top nav { display: flex; gap: 28px; }
.top nav a { font: 600 14px/20px var(--font-sans); color: var(--text-secondary); text-decoration: none; padding-block: 12px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text-primary); }
.top nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 900px) { .top nav { display: none; } }

/* Chapter heads, Wise-style: what the chapter is, and why it matters */
.chapter { padding-block: clamp(96px, 13vw, 184px) 0; }
.chapter-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--border-divider); font: 600 15px/20px var(--font-sans); margin-bottom: clamp(40px, 6vw, 88px); }
.chapter-head span + span { color: var(--text-muted); }
.h2 { font-family: var(--font-display); font-size: clamp(38px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.028em; max-width: 13em; }
.sub { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--text-secondary); max-width: 38em; margin-top: clamp(16px, 2vw, 24px); }

/* Code always sits on the media ground, so its colours are fixed: the accent for keywords, two quiet hues for types and values. */
.code { --code-fg: #dcdcde; --code-comment: #8f8e99; --code-keyword: #f4779f; --code-value: #f2c58f; --code-type: #ab9bff; --code-prop: #ffffff;
  background: var(--bg-media); color: var(--code-fg); border-radius: var(--radius-md); padding: 14px 16px; font: 500 13px/1.6 var(--font-mono); overflow-x: auto; white-space: pre; tab-size: 2; }
.code .t-c { color: var(--code-comment); font-style: italic; }
.code .t-k { color: var(--code-keyword); }
.code .t-s, .code .t-n { color: var(--code-value); }
.code .t-t { color: var(--code-type); }
.code .t-p { color: var(--code-prop); }
.code .t-ph { color: var(--code-comment); text-decoration: underline dashed; text-underline-offset: 3px; }

footer { padding-block: 0 calc(32px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 20px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.foot-row:first-child { border-top: 1px solid var(--border-divider); padding-top: 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer nav a { font: 600 14px/20px var(--font-sans); color: var(--text-secondary); text-decoration: none; padding-block: 12px; }
footer nav a:hover { color: var(--text-primary); }
.foot-small { padding-top: 20px; border-top: 1px solid var(--border-hairline); }
.foot-small p { font: 500 13px/18px var(--font-sans); color: var(--text-muted); }
.foot-small a { color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 3px; }
.foot-small a:hover { color: var(--text-primary); text-decoration-color: currentColor; }

.mount { min-height: var(--h, 120px); }

/* Counts roll into place digit by digit, the way a counter turns over. The plain number stays in the text for screen readers and when motion is reduced. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.roll { display: inline-flex; font-style: normal; font-variant-numeric: tabular-nums; }
.roll i { font-style: normal; }
.roll-d { display: inline-block; height: 1em; line-height: 1; overflow: hidden; }
.roll-s { display: flex; flex-direction: column; transform: translateY(calc(var(--to) * -1em)); }
.roll-s > i { height: 1em; }
.roll.go .roll-s { transition: transform 1500ms var(--ease-enter) var(--delay, 0ms); }
.mount[data-failed]::before { content: attr(data-failed); font: 500 13px/18px var(--font-sans); color: var(--text-muted); }