:root {
  --octc-color-primary: #0969da;
  --octc-color-primary-hover: #0550ae;
  --octc-color-bg: #ffffff;
  --octc-color-bg-alt: #f6f8fa;
  --octc-color-text: #1f2328;
  --octc-color-text-muted: #59636e;
  --octc-color-border: #d1d9e0;
  --octc-color-code-bg: #f6f8fa;
  --octc-color-code-bg-top: #f6f8fa;
  --octc-color-code-text: #1f2328;
}
[data-theme="dark"] {
  --octc-color-primary: #4493f8;
  --octc-color-primary-hover: #6cb6ff;
  --octc-color-bg: #0d1117;
  --octc-color-bg-alt: #151b23;
  --octc-color-text: #f0f6fc;
  --octc-color-text-muted: #9198a1;
  --octc-color-border: #3d444d;
  --octc-color-code-bg: #151b23;
  --octc-color-code-bg-top: #151b23;
  --octc-color-code-text: #f0f6fc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-primary: #4493f8;
    --octc-color-primary-hover: #6cb6ff;
    --octc-color-bg: #0d1117;
    --octc-color-bg-alt: #151b23;
    --octc-color-text: #f0f6fc;
    --octc-color-text-muted: #9198a1;
    --octc-color-border: #3d444d;
    --octc-color-code-bg: #151b23;
    --octc-color-code-bg-top: #151b23;
    --octc-color-code-text: #f0f6fc;
  }
}
:root {
  --octc-sidebar-width: 266px;
  --octc-header-height: 66px;
  --octc-max-content-width: 920px;
}
:root {
  --octc-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --octc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;
}
:root {
  --octc-motion-fast: 220ms;
  --octc-motion-base: 420ms;
  --octc-motion-slow: 1000ms;
  --octc-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --octc-motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --octc-motion-rise: 0.7rem;
  --octc-color-code-line-highlight: color-mix(in srgb, #0969da 16%, transparent);
  --octc-color-code-line-warning: color-mix(in srgb, #9a6700 18%, transparent);
  --octc-color-code-line-warning-border: #9a6700;
  --octc-color-code-line-error: color-mix(in srgb, #cf222e 20%, transparent);
  --octc-color-code-line-error-border: #cf222e;
  --octc-color-code-line-add: color-mix(in srgb, #1a7f37 16%, transparent);
  --octc-color-code-line-add-border: #1a7f37;
  --octc-color-code-line-remove: color-mix(in srgb, #cf222e 14%, transparent);
  --octc-color-code-line-remove-border: #cf222e;
  --octc-color-code-line-focus: color-mix(in srgb, #0969da 16%, transparent);
  --octc-color-code-line-dim: 0.45;
  --octc-color-code-title-bg: color-mix(in srgb, #f6f8fa 92%, #1f2328);
  --octc-color-code-title-text: color-mix(in srgb, #1f2328 88%, #f6f8fa);
  --octc-color-code-title-border: color-mix(in srgb, #1f2328 22%, transparent);
  --octc-color-code-line-number: color-mix(in srgb, #1f2328 48%, transparent);
  --octc-color-code-frame-border: color-mix(in srgb, #d1d9e0 92%, transparent);
  --octc-color-backdrop: rgba(89, 89, 89, 0.62);
  --octc-surface-glass: color-mix(in srgb, #f6f8fa 62%, #ffffff);
  --octc-surface-line: color-mix(in srgb, #d1d9e0 72%, #ffffff);
  --octc-brand-violet: #8250df;
  --octc-brand-cyan: #1b7c83;
  --octc-brand-lime: #1a7f37;
  --octc-brand-coral: #cf222e;
  --octc-brand-navy: color-mix(in srgb, #1f2328 70%, #ffffff);
  --octc-brand-violet-rgb: 130, 80, 223;
  --octc-brand-cyan-rgb: 27, 124, 131;
  --octc-brand-lime-rgb: 26, 127, 55;
  --octc-brand-coral-rgb: 207, 34, 46;
  --octc-accent-a: #0969da;
  --octc-accent-b: #8250df;
  --octc-accent-c: #1b7c83;
  --octc-accent-warm: #9a6700;
  --octc-accent-cool: #0969da;
  --octc-accent-a-ink: #0969da;
  --octc-accent-b-ink: #8250df;
  --octc-accent-c-ink: #1b7c83;
  --octc-accent-warm-ink: #9a6700;
  --octc-accent-cool-ink: #0969da;
  --octc-accent-coral-ink: #cf222e;
  --octc-syntax-foreground: #1f2328;
  --octc-syntax-background: #f6f8fa;
  --octc-syntax-token-comment: color-mix(in srgb, #1f2328 55%, #f6f8fa);
  --octc-syntax-token-punctuation: color-mix(in srgb, #1f2328 72%, #f6f8fa);
  --octc-syntax-token-keyword: #8250df;
  --octc-syntax-token-string: #1a7f37;
  --octc-syntax-token-string-expression: #1a7f37;
  --octc-syntax-token-constant: #9a6700;
  --octc-syntax-token-function: #0969da;
  --octc-syntax-token-parameter: #cf222e;
  --octc-syntax-token-link: #1b7c83;
}
[data-theme="dark"] {
  --octc-color-code-line-highlight: color-mix(in srgb, #4493f8 16%, transparent);
  --octc-color-code-line-warning: color-mix(in srgb, #d29922 18%, transparent);
  --octc-color-code-line-warning-border: #d29922;
  --octc-color-code-line-error: color-mix(in srgb, #ff7b72 20%, transparent);
  --octc-color-code-line-error-border: #ff7b72;
  --octc-color-code-line-add: color-mix(in srgb, #3fb950 16%, transparent);
  --octc-color-code-line-add-border: #3fb950;
  --octc-color-code-line-remove: color-mix(in srgb, #ff7b72 14%, transparent);
  --octc-color-code-line-remove-border: #ff7b72;
  --octc-color-code-line-focus: color-mix(in srgb, #4493f8 16%, transparent);
  --octc-color-code-line-dim: 0.35;
  --octc-color-code-title-bg: color-mix(in srgb, #151b23 92%, #f0f6fc);
  --octc-color-code-title-text: color-mix(in srgb, #f0f6fc 88%, #151b23);
  --octc-color-code-title-border: color-mix(in srgb, #f0f6fc 22%, transparent);
  --octc-color-code-line-number: color-mix(in srgb, #f0f6fc 48%, transparent);
  --octc-color-code-frame-border: color-mix(in srgb, #3d444d 92%, transparent);
  --octc-color-backdrop: rgba(5, 6, 8, 0.62);
  --octc-surface-glass: color-mix(in srgb, #151b23 62%, #0d1117);
  --octc-surface-line: color-mix(in srgb, #3d444d 72%, #0d1117);
  --octc-brand-violet: #bc8cff;
  --octc-brand-cyan: #39c5cf;
  --octc-brand-lime: #3fb950;
  --octc-brand-coral: #ff7b72;
  --octc-brand-navy: color-mix(in srgb, #f0f6fc 70%, #0d1117);
  --octc-brand-violet-rgb: 188, 140, 255;
  --octc-brand-cyan-rgb: 57, 197, 207;
  --octc-brand-lime-rgb: 63, 185, 80;
  --octc-brand-coral-rgb: 255, 123, 114;
  --octc-accent-a: #4493f8;
  --octc-accent-b: #bc8cff;
  --octc-accent-c: #39c5cf;
  --octc-accent-warm: #d29922;
  --octc-accent-cool: #4493f8;
  --octc-accent-a-ink: #4493f8;
  --octc-accent-b-ink: #bc8cff;
  --octc-accent-c-ink: #39c5cf;
  --octc-accent-warm-ink: #d29922;
  --octc-accent-cool-ink: #4493f8;
  --octc-accent-coral-ink: #ff7b72;
  --octc-syntax-foreground: #f0f6fc;
  --octc-syntax-background: #151b23;
  --octc-syntax-token-comment: color-mix(in srgb, #f0f6fc 55%, #151b23);
  --octc-syntax-token-punctuation: color-mix(in srgb, #f0f6fc 72%, #151b23);
  --octc-syntax-token-keyword: #bc8cff;
  --octc-syntax-token-string: #3fb950;
  --octc-syntax-token-string-expression: #3fb950;
  --octc-syntax-token-constant: #d29922;
  --octc-syntax-token-function: #4493f8;
  --octc-syntax-token-parameter: #ff7b72;
  --octc-syntax-token-link: #39c5cf;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-code-line-highlight: color-mix(in srgb, #4493f8 16%, transparent);
    --octc-color-code-line-warning: color-mix(in srgb, #d29922 18%, transparent);
    --octc-color-code-line-warning-border: #d29922;
    --octc-color-code-line-error: color-mix(in srgb, #ff7b72 20%, transparent);
    --octc-color-code-line-error-border: #ff7b72;
    --octc-color-code-line-add: color-mix(in srgb, #3fb950 16%, transparent);
    --octc-color-code-line-add-border: #3fb950;
    --octc-color-code-line-remove: color-mix(in srgb, #ff7b72 14%, transparent);
    --octc-color-code-line-remove-border: #ff7b72;
    --octc-color-code-line-focus: color-mix(in srgb, #4493f8 16%, transparent);
    --octc-color-code-line-dim: 0.35;
    --octc-color-code-title-bg: color-mix(in srgb, #151b23 92%, #f0f6fc);
    --octc-color-code-title-text: color-mix(in srgb, #f0f6fc 88%, #151b23);
    --octc-color-code-title-border: color-mix(in srgb, #f0f6fc 22%, transparent);
    --octc-color-code-line-number: color-mix(in srgb, #f0f6fc 48%, transparent);
    --octc-color-code-frame-border: color-mix(in srgb, #3d444d 92%, transparent);
    --octc-color-backdrop: rgba(5, 6, 8, 0.62);
    --octc-surface-glass: color-mix(in srgb, #151b23 62%, #0d1117);
    --octc-surface-line: color-mix(in srgb, #3d444d 72%, #0d1117);
    --octc-brand-violet: #bc8cff;
    --octc-brand-cyan: #39c5cf;
    --octc-brand-lime: #3fb950;
    --octc-brand-coral: #ff7b72;
    --octc-brand-navy: color-mix(in srgb, #f0f6fc 70%, #0d1117);
    --octc-brand-violet-rgb: 188, 140, 255;
    --octc-brand-cyan-rgb: 57, 197, 207;
    --octc-brand-lime-rgb: 63, 185, 80;
    --octc-brand-coral-rgb: 255, 123, 114;
    --octc-accent-a: #4493f8;
    --octc-accent-b: #bc8cff;
    --octc-accent-c: #39c5cf;
    --octc-accent-warm: #d29922;
    --octc-accent-cool: #4493f8;
    --octc-accent-a-ink: #4493f8;
    --octc-accent-b-ink: #bc8cff;
    --octc-accent-c-ink: #39c5cf;
    --octc-accent-warm-ink: #d29922;
    --octc-accent-cool-ink: #4493f8;
    --octc-accent-coral-ink: #ff7b72;
    --octc-syntax-foreground: #f0f6fc;
    --octc-syntax-background: #151b23;
    --octc-syntax-token-comment: color-mix(in srgb, #f0f6fc 55%, #151b23);
    --octc-syntax-token-punctuation: color-mix(in srgb, #f0f6fc 72%, #151b23);
    --octc-syntax-token-keyword: #bc8cff;
    --octc-syntax-token-string: #3fb950;
    --octc-syntax-token-string-expression: #3fb950;
    --octc-syntax-token-constant: #d29922;
    --octc-syntax-token-function: #4493f8;
    --octc-syntax-token-parameter: #ff7b72;
    --octc-syntax-token-link: #39c5cf;
  }
}
@property --octc-sweep{syntax:"<percentage>";inherits:false;initial-value:0%}@property --octc-spin{syntax:"<angle>";inherits:false;initial-value:0deg}@view-transition{navigation:auto}.header{view-transition-name:octc-header}.sidebar{view-transition-name:octc-sidebar}.main{view-transition-name:octc-main}@media (prefers-reduced-motion:no-preference){::view-transition-old(octc-main){animation:octc-swap-out var(--octc-motion-base) var(--octc-motion-ease) both}::view-transition-new(octc-main){animation:octc-swap-in var(--octc-motion-base) var(--octc-motion-ease) both}}@keyframes octc-swap-out{to{opacity:0;transform:translateY(-0.5rem)}}@keyframes octc-swap-in{from{opacity:0;transform:translateY(0.75rem)}}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.content>h2,.feature-card{animation:octc-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}.features-grid>:nth-child(2n){animation-range:entry 3% entry 58%}.features-grid>:nth-child(3n){animation-range:entry 6% entry 62%}.hero-name,.hero-text,.hero-tagline,.hero-actions{animation:octc-hero-in var(--octc-motion-slow) var(--octc-motion-spring) both}.hero-text{animation-delay:90ms}.hero-tagline{animation-delay:160ms}.hero-actions{animation-delay:240ms}}}@keyframes octc-rise{from{opacity:0;transform:translateY(var(--octc-motion-rise,0.6rem))}}@keyframes octc-hero-in{from{opacity:0;transform:translateY(var(--octc-motion-rise,0.6rem)) scale(0.994)}}.nav-link,.toc-link,.feature-card,.hero-action,.social-link,.search-button,.theme-toggle,.content a{transition:color var(--octc-motion-fast) var(--octc-motion-ease),background-color var(--octc-motion-fast) var(--octc-motion-ease),border-color var(--octc-motion-fast) var(--octc-motion-ease),box-shadow var(--octc-motion-base) var(--octc-motion-ease),transform var(--octc-motion-base) var(--octc-motion-spring)}.search-modal-overlay{transition:opacity var(--octc-motion-base) var(--octc-motion-ease),display var(--octc-motion-base) allow-discrete}@media (prefers-reduced-motion:no-preference){.search-modal{transition:transform var(--octc-motion-base) var(--octc-motion-spring)}@starting-style{.search-modal{transform:translateY(-0.75rem) scale(0.97)}}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}}.entry-page .main{padding-inline:0}.entry-page .layout{padding-top:0}.entry-content{max-width:none;padding-inline:0}.entry-content>.content,.features{max-width:var(--octc-max-content-width);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2rem)}.hero{padding-inline:clamp(1.5rem,6vw,4rem);background-color:transparent;border-bottom:0;min-height:min(100vh,56rem);padding-block:calc(var(--octc-header-height) + clamp(3rem,11vh,7rem)) clamp(3.5rem,11vh,7rem)}.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:clamp(6rem,22vh,14rem);z-index:0;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--octc-color-bg))}.hero-content,.hero-notice,.hero-image{position:relative;z-index:1}.features{border-top:0}.header{background:transparent;border-bottom:0;box-shadow:none}body:not(.entry-page) .header{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}@supports (animation-timeline:scroll()){.header{animation:var(--octc-header-scroll,octc-header-settle) linear both;animation-timeline:scroll(root block);animation-range:0 7rem}}@keyframes octc-header-settle{from{backdrop-filter:blur(0px) saturate(100%);-webkit-backdrop-filter:blur(0px) saturate(100%)}to{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}}.sidebar,.toc{top:0;padding-top:calc(var(--octc-header-height) + 1rem)}.header-actions .social-link,.header-actions .theme-toggle{opacity:0.62;transition:opacity var(--octc-motion-fast) var(--octc-motion-ease)}.header:hover .social-link,.header:hover .theme-toggle,.header-actions :focus-visible{opacity:1}.content h1,.content h2,.content h3,.hero-name,.hero-text,.feature-title{text-wrap:balance}.content p,.content li,.hero-tagline,.feature-details{text-wrap:pretty}.content{hanging-punctuation:first last}.content table{font-variant-numeric:tabular-nums}.content a{text-underline-offset:0.18em;text-decoration-skip-ink:auto}.content h1 a,.content h2 a,.content h3 a{text-decoration:none}::selection{background:color-mix(in srgb,var(--octc-color-primary) 28%,transparent);color:var(--octc-color-text)}.sidebar,.toc,.content pre,.search-results{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--octc-color-text) 22%,transparent) transparent}.content pre{scroll-padding-inline:1rem}.content img,.content video,.content iframe{max-width:100%;height:auto}[data-theme="dark"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--octc-ho-radius:14px;--octc-ho-foil:linear-gradient(
115deg,color-mix(in srgb,var(--octc-accent-a,var(--octc-color-primary)) 55%,transparent) 0%,color-mix(in srgb,var(--octc-accent-c,var(--octc-color-primary)) 55%,transparent) 26%,color-mix(in srgb,var(--octc-accent-b,var(--octc-color-primary)) 55%,transparent) 52%,color-mix(in srgb,var(--octc-accent-warm,var(--octc-color-primary)) 55%,transparent) 74%,color-mix(in srgb,var(--octc-accent-a,var(--octc-color-primary)) 55%,transparent) 100%
);--octc-ho-tint:color-mix(in srgb,var(--octc-color-bg) 82%,transparent);--octc-ho-foil-ink:linear-gradient(
115deg,var(--octc-accent-a-ink,var(--octc-color-primary)) 0%,var(--octc-accent-c-ink,var(--octc-color-primary)) 26%,var(--octc-accent-b-ink,var(--octc-color-primary)) 52%,var(--octc-accent-warm-ink,var(--octc-color-primary)) 74%,var(--octc-accent-a-ink,var(--octc-color-primary)) 100%
)}.header,.sidebar,.toc,.search-modal,.content pre,.content blockquote,.feature-card,.hero-action,.hero-notice,.social-link,.search-button,.theme-toggle,.content img{border-radius:var(--octc-ho-radius)}.header{border-radius:0}.header-title{font-weight:700}.sidebar{border-radius:0;--octc-skin-sidebar-bg:var(--octc-ho-tint);background:var(--octc-ho-tint);backdrop-filter:blur(14px);border-right:1px solid color-mix(in srgb,var(--octc-color-border) 40%,transparent)}.toc{border-left:1px solid color-mix(in srgb,var(--octc-color-border) 40%,transparent)}.nav-link,.toc-link{border-radius:9px}.nav-link:hover,.toc-link:hover{--octc-skin-nav-hover-bg:color-mix(
in srgb,var(--octc-accent-c,var(--octc-color-primary)) 14%,transparent
);background:color-mix(in srgb,var(--octc-accent-c,var(--octc-color-primary)) 14%,transparent);transform:translateX(3px)}.nav-link.active{background:var(--octc-ho-foil-ink);background-size:200% 100%;color:var(--octc-color-bg);font-weight:650}.search-button,.theme-toggle,.social-link,.hero-action,.feature-card{position:relative;border:1px solid color-mix(in srgb,var(--octc-color-border) 45%,transparent);background:linear-gradient(var(--octc-ho-tint),var(--octc-ho-tint)) padding-box,var(--octc-ho-foil) border-box;background-size:100% 100%,300% 100%;background-position:0 0,0% 0;transition:background-position var(--octc-motion-slow) var(--octc-motion-ease),transform var(--octc-motion-base) var(--octc-motion-spring),box-shadow var(--octc-motion-base) var(--octc-motion-ease)}.search-button:hover,.theme-toggle:hover,.social-link:hover,.hero-action:hover,.feature-card:hover{background-position:0 0,100% 0;transform:translateY(-3px);box-shadow:0 18px 40px -20px
color-mix(in srgb,var(--octc-accent-b,var(--octc-color-primary)) 60%,transparent)}.search-modal{background:color-mix(in srgb,var(--octc-color-bg) 88%,transparent);backdrop-filter:blur(30px) saturate(170%);border:1px solid transparent;border-image:var(--octc-ho-foil) 1}.content h2{border-bottom:2px solid transparent;border-image:var(--octc-ho-foil) 1}.content a{text-decoration-color:var(--octc-accent-b,var(--octc-color-primary))}.content pre{border:1px solid transparent;background:linear-gradient(180deg,var(--octc-color-code-bg-top),var(--octc-color-code-bg)) padding-box,var(--octc-ho-foil) border-box !important}.content :not(pre)>code{border-radius:6px;background:color-mix(in srgb,var(--octc-accent-c,var(--octc-color-primary)) 14%,transparent);padding:0.1em 0.4em}.content blockquote{border:0;border-left:3px solid transparent;border-image:var(--octc-ho-foil) 1;background:color-mix(in srgb,var(--octc-color-bg-alt) 70%,transparent)}.content table{border-radius:12px;overflow:hidden}.content hr{border:0;height:2px;background:var(--octc-ho-foil)}.hero{background-image:radial-gradient(
60% 48% at 20% 6%,color-mix(in srgb,var(--octc-accent-a,var(--octc-color-primary)) 26%,transparent),transparent 70%
),radial-gradient(
52% 46% at 82% 26%,color-mix(in srgb,var(--octc-accent-c,var(--octc-color-primary)) 24%,transparent),transparent 72%
),radial-gradient(
58% 44% at 52% 96%,color-mix(in srgb,var(--octc-accent-b,var(--octc-color-primary)) 20%,transparent),transparent 74%
)}.hero-name{letter-spacing:-0.035em}.hero-action{font-weight:660}.features .feature-card{padding:1.35rem}.feature-title{font-weight:650}:focus-visible{outline:2px solid var(--octc-accent-b,var(--octc-color-primary));outline-offset:3px}.hero-action-brand,.hero-action-brand:hover,.hero-action-brand:focus-visible{background:var(--octc-brand-fill,var(--octc-color-primary));border-color:var(--octc-brand-edge,var(--octc-color-primary));color:var(--octc-brand-ink,var(--octc-color-bg))}.hero-action-brand:hover{background:var(--octc-brand-fill-hover,var(--octc-color-primary-hover));border-color:var(--octc-brand-edge-hover,var(--octc-color-primary-hover))}.hero-action-alt,.hero-action-alt:hover{color:var(--octc-color-text)}:root:root .sidebar{background:var(
--octc-skin-sidebar-bg,color-mix(in srgb,var(--octc-color-bg-alt) 16%,var(--octc-color-bg))
)}:root:root .nav-link:not(.active):hover{background:var(
--octc-skin-nav-hover-bg,color-mix(in srgb,var(--octc-color-bg-alt) 58%,transparent)
)}.header{border-bottom:0}.header{background-color:transparent;background-image:none;box-shadow:none}.content pre{box-shadow:none}
/* ---- Starlight 互換のCSS変数レイヤー ----
   本文中の手書きSVG図(7ページ・38箇所)は var(--sl-color-*) を参照して
   いるため、コンテンツを書き換えずに ox-content のテーマ変数(--octc-*)
   へ橋渡しする。--octc-* はライト/ダークで値ごと切り替わるので、
   ここでの割り当てだけで両テーマに追従する。
   グレースケール(gray-1〜7)は Starlight の「テキスト色→背景色」の
   段階を color-mix で再現する。 */
:root {
  --sl-color-white: var(--octc-color-text);
  --sl-color-black: var(--octc-color-bg);
  --sl-color-gray-1: color-mix(in srgb, var(--octc-color-text) 90%, var(--octc-color-bg));
  --sl-color-gray-2: color-mix(in srgb, var(--octc-color-text) 76%, var(--octc-color-bg));
  --sl-color-gray-3: color-mix(in srgb, var(--octc-color-text) 55%, var(--octc-color-bg));
  --sl-color-gray-4: color-mix(in srgb, var(--octc-color-text) 35%, var(--octc-color-bg));
  --sl-color-gray-5: color-mix(in srgb, var(--octc-color-text) 22%, var(--octc-color-bg));
  --sl-color-gray-6: color-mix(in srgb, var(--octc-color-text) 12%, var(--octc-color-bg));
  --sl-color-gray-7: color-mix(in srgb, var(--octc-color-text) 6%, var(--octc-color-bg));
  --sl-color-accent: var(--octc-color-primary);
  --sl-color-accent-high: var(--octc-color-primary-hover, var(--octc-color-primary));
  --sl-color-accent-low: color-mix(in srgb, var(--octc-color-primary) 22%, var(--octc-color-bg));
  --sl-color-orange: #b06000;
  --sl-color-orange-low: color-mix(in srgb, #b06000 18%, var(--octc-color-bg));
  --sl-color-red: #d02f4c;
  --sl-text-sm: 0.875rem;
  --sl-text-xs: 0.8125rem;
  --__sl-font-mono: var(--octc-font-mono, ui-monospace, monospace);
}

:root[data-theme='dark'] {
  --sl-color-orange: #e0af68;
  --sl-color-red: #f7768e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --sl-color-orange: #e0af68;
    --sl-color-red: #f7768e;
  }
}

/* ---- ヘッダーを全幅の帯として独立させる ----
   holoスキンは .sidebar/.toc を top:0 で画面最上部まで伸ばし、透過
   ヘッダーを列の上に重ねるため、タイトルがサイドバー境界線をまたぐ。
   列をヘッダーの下から開始させて回り込ませる。スクロール時に本文が
   ヘッダー下へ潜る挙動(fixed + z-index)は維持する。
   768px以下はサイドバーがボトムシートになるため対象外。 */
@media (min-width: 769px) {
  .sidebar {
    top: var(--octc-header-height);
    padding-top: 1rem;
  }

  .toc {
    top: var(--octc-header-height);
    padding-top: 2rem;
  }
}

/* ヘッダー帯の輪郭。holoが消したborder-bottomをドキュメントページ
   でのみ戻す(エントリページはヒーローに重ねる意匠のまま)。 */
body:not(.entry-page) .header {
  border-bottom: 1px solid color-mix(in srgb, var(--octc-color-border) 48%, transparent);
}

/* モバイルのサイドバーは alpha.9 (#915) から「header〜footer 間のフル
   シートを translateY で開閉し、内部を overflow-y: auto でスクロール」
   という設計になった。holoの無スコープな top:0 がベーステーマの
   top: var(--octc-header-height) を上書きしてシートがヘッダーの裏まで
   伸びるため、ベーステーマの値へ戻す(top を外すと高さ制約が消えて
   シートがコンテンツ全高になり、内部スクロールが死ぬ)。 */
@media (max-width: 768px) {
  .sidebar {
    top: var(--octc-header-height);
    padding-top: 1.5rem;
  }

  /* ベーステーマの左右padding(0.5rem、480px以下は0.4rem)は本文が
     画面端に張り付いて窮屈なので少し広げる。 */
  .main {
    padding-inline: 1rem;
  }

  /* holoの overflow:hidden がベースの overflow-x:auto を潰し、幅広
     テーブルを横スクロールできなくなるため戻す。 */
  .content table {
    overflow-x: auto;
  }

  /* モバイルではページ遷移(cross-document view transition)の後に
     ヘッダーの backdrop-filter が効かなくなる(WebKit系の挙動)。
     ヘッダーを遷移スナップショット(view-transition-name)から外し、
     スクロール連動のブラー導入アニメーション(octc-header-settle)も
     使わず、ダイレクトアクセス時と同じ常時ブラーに固定する。 */
  body:not(.entry-page) .header {
    view-transition-name: none;
    animation: none;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}

/* ---- Code Play: インタラクティブ実行ブロック ----
   ウィジェット本体(枠・ツールバー・タブ)は @ox-content/code-play が
   注入する CODE_PLAY_STYLES が --octc-* 変数で描画する。ここでは
   本文フォントへの追従と、タイトルバー(.play-title)の結合のみ行う。 */
ox-code-play {
  display: block;
}

/* preprocess-docs.mjs が RustPlay の title 属性から生成するタイトルバー。
   直後の Code Play ウィジェットと1つの箱に見えるよう結合する。 */
.play-title {
  margin: 1.25rem 0 0;
  padding: 0.4rem 1rem 0.35rem;
  border: 1px solid var(--octc-color-border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: var(--sl-color-gray-6);
  color: var(--octc-color-text);
  font-size: var(--sl-text-sm);
  font-weight: 600;
}

.play-title + ox-code-play {
  margin-top: 0;
}

.play-title + ox-code-play .ox-code-play,
.play-title + ox-code-play > pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* holoスキンの .content pre (箔ボーダー+丸角+background!important) を
   ウィジェット内ではフラットに戻す。 */
.content ox-code-play pre {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* 実行結果や設定パネルの文字はコード用フォントに合わせる */
.ox-code-play__panel pre,
.ox-code-play__panel code {
  font-family: var(--__sl-font-mono);
  font-size: var(--sl-text-xs);
}

/* ---- Aside (:::note → v3 containers) ----
   枠・ティント・タイトルは ssg.css の .ox-container が描画する。
   デフォルトの左ボーダー(3px)は角丸に巻き込まれて曲がって見えるため、
   旧 :::note 実装と同じくボーダー無しのティント箱にする。
   日本語ラベル「ノート」向けにタイトルの字詰めも調整する。 */
.content .ox-container {
  border-left: none;
}

.content .ox-container-title {
  font-size: var(--sl-text-sm);
  letter-spacing: 0.02em;
}

/* ---- 前後ページリンク (v3 ssg.pagination) ----
   デフォルトはテキストリンクのみなので、旧 inject-pager と同じ
   カード型に整える。ラベルの日本語化は ja-ui.js が行う。 */
.pager {
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--octc-color-border);
  justify-content: space-between;
  font-size: inherit;
}

.pager-link {
  width: calc(50% - 0.5rem);
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--octc-color-border);
  border-radius: 0.5rem;
  transition:
    background-color var(--octc-motion-fast) var(--octc-motion-ease),
    transform var(--octc-motion-base) var(--octc-motion-spring);
}

/* ホバーはサイドメニュー/目次と同じ仕様(背景ティント+右シフト)。
   ボーダー色や文字色は変えない。 */
.pager-link:hover {
  background: color-mix(in srgb, var(--octc-accent-c, var(--octc-color-primary)) 14%, transparent);
  transform: translateX(3px);
  text-decoration: none;
}

.pager-link:hover .pager-title {
  color: var(--octc-color-text);
}

.pager-label {
  font-size: var(--sl-text-xs);
  color: var(--sl-color-gray-3);
}

.pager-title {
  font-weight: 600;
  color: var(--octc-color-text);
  overflow-wrap: anywhere;
}

.pager-link--prev .pager-title::before {
  content: '← ';
}

.pager-link--next .pager-title::after {
  content: ' →';
}

@media (max-width: 640px) {
  .pager {
    flex-direction: column;
  }

  .pager-link {
    width: 100%;
  }

  .pager-link--next {
    text-align: left;
    margin-left: 0;
  }
}

/* ---- テーブルの角丸整合 ----
   holoは .content table に border-radius:12px + overflow:hidden を当てる
   が、ベースはセル個別ボーダーの border-collapse:collapse のため、角で
   セルのボーダーと背景が斜めに切れて見える。外周ボーダーをtable本体に
   持たせ、セルは内側の区切り線のみとし、コーナーセルへ外周と揃う丸みを
   与える。 */
.content table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--octc-color-border);
  border-radius: 12px;
}

.content th,
.content td {
  border: 0;
  border-block-end: 1px solid var(--octc-color-border);
  border-inline-end: 1px solid var(--octc-color-border);
}

/* 最終列・最終行の区切り線は外周ボーダーと二重になるため消す */
.content table tr > :last-child {
  border-inline-end: 0;
}

.content table > :last-child > tr:last-child > * {
  border-block-end: 0;
}

/* 外周半径12pxからボーダー1px分を引いた丸みをコーナーセルへ */
.content table > :first-child > tr:first-child > :first-child {
  border-start-start-radius: 11px;
}

.content table > :first-child > tr:first-child > :last-child {
  border-start-end-radius: 11px;
}

.content table > :last-child > tr:last-child > :first-child {
  border-end-start-radius: 11px;
}

.content table > :last-child > tr:last-child > :last-child {
  border-end-end-radius: 11px;
}

/* ---- 目次ホバーをサイドメニューと揃える ----
   ベーステーマは .toc-link:hover に左ボーダーとプライマリ文字色を
   与えるが、サイドメニュー(.nav-link:hover)は背景ティント+通常文字色
   (ティントとtranslateXはholoが両者に付与)。目次も同じ挙動にする。 */
.toc-link {
  border-left: 0;
}

.toc-link:hover {
  color: var(--octc-color-text);
}

/* ---- 本文の折り返しを通常の貪欲アルゴリズムに戻す ----
   holoは本文に text-wrap:pretty を当てるが、Safariのpretty実装は
   段落全体を最適化するため、和文では行末が大きく空く(折り返しが
   早すぎるように見える)。既定の折り返しへ戻す。見出しのbalanceは
   維持する。 */
.content p,
.content li {
  text-wrap: wrap;
}

/* ---- 用語(初出)の強調 ---- */
.term {
  font-weight: 600;
}

/* ---- 手書きSVG図のテーマ対応 ---- */
.book-figure {
  margin: 1.5rem auto;
  text-align: center;
}

.book-figure svg {
  max-width: 100%;
  height: auto;
}

.book-figure figcaption {
  margin-top: 0.5rem;
  font-size: var(--sl-text-sm);
  color: var(--sl-color-gray-3);
}