:root {
  --octc-color-primary: #b57bff;
  --octc-color-primary-hover: #cfa6ff;
  --octc-color-bg: #00001F;
  --octc-color-bg-alt: #141020;
  --octc-color-text: #f2effd;
  --octc-color-text-muted: #9a92b8;
  --octc-color-border: #2a2140;
  --octc-color-code-bg: #0d0a17;
  --octc-color-code-bg-top: #0d0a17;
  --octc-color-code-text: #f2effd;
}
[data-theme="dark"] {
  --octc-color-primary: #b57bff;
  --octc-color-primary-hover: #cfa6ff;
  --octc-color-bg: #00001F;
  --octc-color-bg-alt: #141020;
  --octc-color-text: #f2effd;
  --octc-color-text-muted: #9a92b8;
  --octc-color-border: #2a2140;
  --octc-color-code-bg: #0d0a17;
  --octc-color-code-bg-top: #0d0a17;
  --octc-color-code-text: #f2effd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-primary: #b57bff;
    --octc-color-primary-hover: #cfa6ff;
    --octc-color-bg: #00001F;
    --octc-color-bg-alt: #141020;
    --octc-color-text: #f2effd;
    --octc-color-text-muted: #9a92b8;
    --octc-color-border: #2a2140;
    --octc-color-code-bg: #0d0a17;
    --octc-color-code-bg-top: #0d0a17;
    --octc-color-code-text: #f2effd;
  }
}
:root {
  --octc-sidebar-width: 0px;
  --octc-header-height: 66px;
  --octc-max-content-width: 960px;
}
: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: 180ms;
  --octc-motion-base: 360ms;
  --octc-motion-slow: 900ms;
  --octc-motion-ease: cubic-bezier(0.2, 0.9, 0.2, 1);
  --octc-motion-spring: cubic-bezier(0.34, 1.5, 0.64, 1);
  --octc-motion-rise: 0.7rem;
  --octc-color-code-line-highlight: color-mix(in srgb, #7c8cff 16%, transparent);
  --octc-color-code-line-warning: color-mix(in srgb, #ffd60a 18%, transparent);
  --octc-color-code-line-warning-border: #ffd60a;
  --octc-color-code-line-error: color-mix(in srgb, #ff5c8a 20%, transparent);
  --octc-color-code-line-error-border: #ff5c8a;
  --octc-color-code-line-add: color-mix(in srgb, #3ddc97 16%, transparent);
  --octc-color-code-line-add-border: #3ddc97;
  --octc-color-code-line-remove: color-mix(in srgb, #ff5c8a 14%, transparent);
  --octc-color-code-line-remove-border: #ff5c8a;
  --octc-color-code-line-focus: color-mix(in srgb, #b57bff 16%, transparent);
  --octc-color-code-line-dim: 0.35;
  --octc-color-code-title-bg: color-mix(in srgb, #0d0a17 92%, #f2effd);
  --octc-color-code-title-text: color-mix(in srgb, #f2effd 88%, #0d0a17);
  --octc-color-code-title-border: color-mix(in srgb, #f2effd 22%, transparent);
  --octc-color-code-line-number: color-mix(in srgb, #f2effd 48%, transparent);
  --octc-color-code-frame-border: color-mix(in srgb, #2a2140 92%, transparent);
  --octc-color-backdrop: rgba(4, 3, 6, 0.62);
  --octc-surface-glass: color-mix(in srgb, #141020 62%, #0a0812);
  --octc-surface-line: color-mix(in srgb, #2a2140 72%, #0a0812);
  --octc-brand-violet: #c77dff;
  --octc-brand-cyan: #4fd6e8;
  --octc-brand-lime: #3ddc97;
  --octc-brand-coral: #ff5c8a;
  --octc-brand-navy: color-mix(in srgb, #f2effd 70%, #0a0812);
  --octc-brand-violet-rgb: 199, 125, 255;
  --octc-brand-cyan-rgb: 79, 214, 232;
  --octc-brand-lime-rgb: 61, 220, 151;
  --octc-brand-coral-rgb: 255, 92, 138;
  --octc-accent-a: #b57bff;
  --octc-accent-b: #c77dff;
  --octc-accent-c: #4fd6e8;
  --octc-accent-warm: #ffd60a;
  --octc-accent-cool: #7c8cff;
  --octc-accent-a-ink: #b57bff;
  --octc-accent-b-ink: #c77dff;
  --octc-accent-c-ink: #4fd6e8;
  --octc-accent-warm-ink: #ffd60a;
  --octc-accent-cool-ink: #7c8cff;
  --octc-accent-coral-ink: #ff5c8a;
  --octc-syntax-foreground: #f2effd;
  --octc-syntax-background: #0d0a17;
  --octc-syntax-token-comment: color-mix(in srgb, #f2effd 55%, #0d0a17);
  --octc-syntax-token-punctuation: color-mix(in srgb, #f2effd 72%, #0d0a17);
  --octc-syntax-token-keyword: #c77dff;
  --octc-syntax-token-string: #3ddc97;
  --octc-syntax-token-string-expression: #3ddc97;
  --octc-syntax-token-constant: #ffd60a;
  --octc-syntax-token-function: #7c8cff;
  --octc-syntax-token-parameter: #ff5c8a;
  --octc-syntax-token-link: #4fd6e8;
}
[data-theme="dark"] {
  --octc-color-code-line-highlight: color-mix(in srgb, #7c8cff 16%, transparent);
  --octc-color-code-line-warning: color-mix(in srgb, #ffd60a 18%, transparent);
  --octc-color-code-line-warning-border: #ffd60a;
  --octc-color-code-line-error: color-mix(in srgb, #ff5c8a 20%, transparent);
  --octc-color-code-line-error-border: #ff5c8a;
  --octc-color-code-line-add: color-mix(in srgb, #3ddc97 16%, transparent);
  --octc-color-code-line-add-border: #3ddc97;
  --octc-color-code-line-remove: color-mix(in srgb, #ff5c8a 14%, transparent);
  --octc-color-code-line-remove-border: #ff5c8a;
  --octc-color-code-line-focus: color-mix(in srgb, #b57bff 16%, transparent);
  --octc-color-code-line-dim: 0.35;
  --octc-color-code-title-bg: color-mix(in srgb, #0d0a17 92%, #f2effd);
  --octc-color-code-title-text: color-mix(in srgb, #f2effd 88%, #0d0a17);
  --octc-color-code-title-border: color-mix(in srgb, #f2effd 22%, transparent);
  --octc-color-code-line-number: color-mix(in srgb, #f2effd 48%, transparent);
  --octc-color-code-frame-border: color-mix(in srgb, #2a2140 92%, transparent);
  --octc-color-backdrop: rgba(4, 3, 6, 0.62);
  --octc-surface-glass: color-mix(in srgb, #141020 62%, #0a0812);
  --octc-surface-line: color-mix(in srgb, #2a2140 72%, #0a0812);
  --octc-brand-violet: #c77dff;
  --octc-brand-cyan: #4fd6e8;
  --octc-brand-lime: #3ddc97;
  --octc-brand-coral: #ff5c8a;
  --octc-brand-navy: color-mix(in srgb, #f2effd 70%, #0a0812);
  --octc-brand-violet-rgb: 199, 125, 255;
  --octc-brand-cyan-rgb: 79, 214, 232;
  --octc-brand-lime-rgb: 61, 220, 151;
  --octc-brand-coral-rgb: 255, 92, 138;
  --octc-accent-a: #b57bff;
  --octc-accent-b: #c77dff;
  --octc-accent-c: #4fd6e8;
  --octc-accent-warm: #ffd60a;
  --octc-accent-cool: #7c8cff;
  --octc-accent-a-ink: #b57bff;
  --octc-accent-b-ink: #c77dff;
  --octc-accent-c-ink: #4fd6e8;
  --octc-accent-warm-ink: #ffd60a;
  --octc-accent-cool-ink: #7c8cff;
  --octc-accent-coral-ink: #ff5c8a;
  --octc-syntax-foreground: #f2effd;
  --octc-syntax-background: #0d0a17;
  --octc-syntax-token-comment: color-mix(in srgb, #f2effd 55%, #0d0a17);
  --octc-syntax-token-punctuation: color-mix(in srgb, #f2effd 72%, #0d0a17);
  --octc-syntax-token-keyword: #c77dff;
  --octc-syntax-token-string: #3ddc97;
  --octc-syntax-token-string-expression: #3ddc97;
  --octc-syntax-token-constant: #ffd60a;
  --octc-syntax-token-function: #7c8cff;
  --octc-syntax-token-parameter: #ff5c8a;
  --octc-syntax-token-link: #4fd6e8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --octc-color-code-line-highlight: color-mix(in srgb, #7c8cff 16%, transparent);
    --octc-color-code-line-warning: color-mix(in srgb, #ffd60a 18%, transparent);
    --octc-color-code-line-warning-border: #ffd60a;
    --octc-color-code-line-error: color-mix(in srgb, #ff5c8a 20%, transparent);
    --octc-color-code-line-error-border: #ff5c8a;
    --octc-color-code-line-add: color-mix(in srgb, #3ddc97 16%, transparent);
    --octc-color-code-line-add-border: #3ddc97;
    --octc-color-code-line-remove: color-mix(in srgb, #ff5c8a 14%, transparent);
    --octc-color-code-line-remove-border: #ff5c8a;
    --octc-color-code-line-focus: color-mix(in srgb, #b57bff 16%, transparent);
    --octc-color-code-line-dim: 0.35;
    --octc-color-code-title-bg: color-mix(in srgb, #0d0a17 92%, #f2effd);
    --octc-color-code-title-text: color-mix(in srgb, #f2effd 88%, #0d0a17);
    --octc-color-code-title-border: color-mix(in srgb, #f2effd 22%, transparent);
    --octc-color-code-line-number: color-mix(in srgb, #f2effd 48%, transparent);
    --octc-color-code-frame-border: color-mix(in srgb, #2a2140 92%, transparent);
    --octc-color-backdrop: rgba(4, 3, 6, 0.62);
    --octc-surface-glass: color-mix(in srgb, #141020 62%, #0a0812);
    --octc-surface-line: color-mix(in srgb, #2a2140 72%, #0a0812);
    --octc-brand-violet: #c77dff;
    --octc-brand-cyan: #4fd6e8;
    --octc-brand-lime: #3ddc97;
    --octc-brand-coral: #ff5c8a;
    --octc-brand-navy: color-mix(in srgb, #f2effd 70%, #0a0812);
    --octc-brand-violet-rgb: 199, 125, 255;
    --octc-brand-cyan-rgb: 79, 214, 232;
    --octc-brand-lime-rgb: 61, 220, 151;
    --octc-brand-coral-rgb: 255, 92, 138;
    --octc-accent-a: #b57bff;
    --octc-accent-b: #c77dff;
    --octc-accent-c: #4fd6e8;
    --octc-accent-warm: #ffd60a;
    --octc-accent-cool: #7c8cff;
    --octc-accent-a-ink: #b57bff;
    --octc-accent-b-ink: #c77dff;
    --octc-accent-c-ink: #4fd6e8;
    --octc-accent-warm-ink: #ffd60a;
    --octc-accent-cool-ink: #7c8cff;
    --octc-accent-coral-ink: #ff5c8a;
    --octc-syntax-foreground: #f2effd;
    --octc-syntax-background: #0d0a17;
    --octc-syntax-token-comment: color-mix(in srgb, #f2effd 55%, #0d0a17);
    --octc-syntax-token-punctuation: color-mix(in srgb, #f2effd 72%, #0d0a17);
    --octc-syntax-token-keyword: #c77dff;
    --octc-syntax-token-string: #3ddc97;
    --octc-syntax-token-string-expression: #3ddc97;
    --octc-syntax-token-constant: #ffd60a;
    --octc-syntax-token-function: #7c8cff;
    --octc-syntax-token-parameter: #ff5c8a;
    --octc-syntax-token-link: #4fd6e8;
  }
}
@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}.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-vo-a:var(--octc-accent-warm,var(--octc-color-primary));--octc-vo-b:var(--octc-accent-b,var(--octc-color-primary));--octc-vo-c:var(--octc-accent-a,var(--octc-color-primary));--octc-vo-arc:linear-gradient(
100deg,var(--octc-vo-a) 0%,var(--octc-vo-b) 46%,var(--octc-vo-c) 100%
);--octc-vo-ink:linear-gradient(
100deg,var(--octc-accent-warm-ink,var(--octc-color-primary)) 0%,var(--octc-accent-b-ink,var(--octc-color-primary)) 46%,var(--octc-accent-a-ink,var(--octc-color-primary)) 100%
);--octc-vo-radius:16px}.header,.sidebar,.toc,.search-modal,.content pre,.content blockquote,.feature-card,.hero-action,.hero-notice,.social-link,.search-button,.theme-toggle,.content img,.content table{border-radius:var(--octc-vo-radius)}.header{border-radius:0;background:color-mix(in srgb,var(--octc-color-bg) 86%,transparent);border-bottom:1px solid color-mix(in srgb,var(--octc-color-border) 55%,transparent)}.header-title{font-weight:800;letter-spacing:-0.03em;font-size:1.1rem}.sidebar{border-radius:0;border-right:1px solid color-mix(in srgb,var(--octc-color-border) 45%,transparent);--octc-skin-sidebar-bg:transparent;background:transparent}.toc{border-left:1px solid color-mix(in srgb,var(--octc-color-border) 45%,transparent)}.nav-title,.toc-title{font-weight:700;text-transform:uppercase;letter-spacing:0.14em;font-size:0.66rem}.nav-link,.toc-link{border-radius:10px;font-weight:500}.nav-link:hover,.toc-link:hover{--octc-skin-nav-hover-bg:color-mix(in srgb,var(--octc-vo-b) 12%,transparent);background:color-mix(in srgb,var(--octc-vo-b) 12%,transparent)}.nav-link.active{background:color-mix(in srgb,var(--octc-vo-b) 13%,transparent);color:var(--octc-accent-b-ink,var(--octc-color-primary));font-weight:700}.hero-action,.feature-card,.search-button,.theme-toggle,.social-link{border:1px solid transparent;background:linear-gradient(var(--octc-color-bg),var(--octc-color-bg)) padding-box,var(--octc-vo-arc) border-box}.search-button:hover,.theme-toggle:hover,.social-link:hover{transform:translateY(-1px);box-shadow:0 0 0 1px color-mix(in srgb,var(--octc-vo-b) 32%,transparent)}.content h1,.content h2,.content h3{font-weight:800;letter-spacing:-0.032em}.content h1{font-size:clamp(2.4rem,5.4vw,3.4rem);line-height:1.04}.content h2{border-bottom:0;padding-bottom:0.55rem;position:relative}.content h2::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;background:var(--octc-vo-arc);opacity:0.75}.content a{font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--octc-vo-b) 60%,transparent)}.content a:hover{text-decoration-color:var(--octc-vo-b)}.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-vo-arc) border-box !important}.content :not(pre)>code{border-radius:7px;background:color-mix(in srgb,var(--octc-vo-b) 13%,transparent);padding:0.12em 0.42em;font-weight:500}.content blockquote{border:0;border-left:3px solid transparent;border-image:var(--octc-vo-arc) 1;background:color-mix(in srgb,var(--octc-vo-b) 7%,var(--octc-color-bg-alt))}.content table{border:1px solid color-mix(in srgb,var(--octc-color-border) 62%,transparent)}.content th,.content td{border:1px solid color-mix(in srgb,var(--octc-color-border) 26%,transparent)}.content thead th{border-bottom:2px solid color-mix(in srgb,var(--octc-vo-b) 45%,transparent)}.content hr{border:0;height:2px;border-radius:2px;background:var(--octc-vo-arc)}.hero-name{font-weight:850;letter-spacing:-0.055em;line-height:0.88;font-size:clamp(3.4rem,12vw,8rem)}@supports (background-clip:text) or (-webkit-background-clip:text){.hero-name{background:var(--octc-vo-ink);-webkit-background-clip:text;background-clip:text;color:transparent}}.hero-text{font-weight:700;font-size:clamp(1.1rem,2.4vw,1.5rem);letter-spacing:-0.015em}.hero-tagline{max-width:54ch;margin-inline:auto}.hero-action{font-weight:700;letter-spacing:-0.01em;padding-inline:1.9rem}.hero-action-brand{--octc-brand-fill:var(--octc-vo-ink);--octc-brand-fill-hover:var(--octc-vo-ink);--octc-brand-edge:transparent;--octc-brand-edge-hover:transparent;--octc-brand-ink:var(--octc-color-bg)}.hero-action:hover{transform:translateY(-2px)}.features .feature-card{padding:1.4rem}.features .feature-card:hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--octc-vo-b) 26%,transparent)}.feature-title{font-weight:750;letter-spacing:-0.018em}:focus-visible{outline:2px solid var(--octc-vo-b);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)
)}:root:root .nav-link:hover,:root:root .toc-link:hover,:root:root .content a:hover{font-style:inherit}.header{border-bottom:0}.header{background-color:transparent;background-image:none;box-shadow:none}.content pre{box-shadow:none !important}
.search-button,
            .theme-toggle,
            .mobile-footer {
              display: none;
            }

            .header {
              position: fixed;
              inset: 0 0 auto;
              background-color: rgba(0, 0, 31, 0.6);
              backdrop-filter: none !important;
              -webkit-backdrop-filter: none !important;
              opacity: 0;
              visibility: hidden;
              pointer-events: none;
              transform: translateY(-100%);
              transition:
                opacity var(--octc-motion-base) var(--octc-motion-ease),
                transform var(--octc-motion-base) var(--octc-motion-ease),
                visibility var(--octc-motion-base) step-end;
            }

            .header.is-visible {
              opacity: 1;
              visibility: visible;
              pointer-events: auto;
              transform: translateY(0);
              transition:
                opacity var(--octc-motion-base) var(--octc-motion-ease),
                transform var(--octc-motion-base) var(--octc-motion-ease),
                visibility 0s step-start;
            }

            @media (prefers-reduced-motion: reduce) {
              .header,
              .header.is-visible {
                transition: none;
              }
            }

            .header-logo {
              grid-column: 1;
              grid-row: 1 / 3;
              width: 2.25rem;
              height: 2.25rem;
              content: url("/assets/cover.png");
              object-fit: contain;
            }

            .header-title {
              display: grid;
              grid-template-columns: auto auto;
              grid-template-rows: auto auto;
              column-gap: 0.75rem;
              row-gap: 0;
              align-items: center;
              font-size: 0;
            }

            .header-title::before,
            .header-title::after {
              grid-column: 2;
              line-height: 1.15;
            }

            .header-title::before {
              content: "Findy presents";
              grid-row: 1;
              align-self: end;
              font-size: 0.8rem;
            }

            .header-title::after {
              content: "エンジニアの楽園ラジオ";
              grid-row: 2;
              align-self: start;
              font-size: 1rem;
            }

            :root {
              color-scheme: dark;
            }

            .radio-hero {
              display: grid;
              place-items: center;
              min-height: min(76svh, 52rem);
              margin-bottom: clamp(3rem, 10vw, 8rem);
            }

            .radio-hero img {
              width: min(100%, 34rem);
              margin: 0;
              border: 0;
              background: transparent;
              box-shadow: none;
            }

            .program-title span {
              display: block;
            }

            .program-title span:first-child {
              margin-bottom: 0.35em;
              font-size: 0.5em;
              line-height: 1;
            }

            .program-title span:last-child {
              font-size: 0.667em;
            }

            .platform-grid {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 1rem;
            }

            .platform-grid a {
              display: inline-flex;
              align-items: center;
              gap: 0.65rem;
            }

            .platform-grid img {
              width: 2.5rem;
              height: 2.5rem;
              margin: 0;
              border: 0;
              border-radius: 0;
              background: transparent;
              box-shadow: none;
              object-fit: contain;
            }

            .primary-platform {
              justify-content: center;
              padding-block: 1em 2em;
            }

            .primary-platform a {
              width: 50%;
              flex-direction: column;
              justify-content: center;
              text-align: center;
            }

            .primary-platform img {
              width: 100%;
              height: auto;
            }

            .platform-list {
              max-width: 24rem;
              margin-block-start: 2em;
              margin-inline: auto;
              justify-content: center;
              flex-wrap: nowrap;
              gap: clamp(0.4rem, 2vw, 1rem);
            }

            .platform-list img {
              width: 4rem;
              height: 4rem;
            }

            .personality {
              display: flow-root;
              margin-block: 2rem 3rem;
            }

            .personality-heading {
              display: flex;
              align-items: baseline;
              gap: 1rem;
              white-space: nowrap;
            }

            .personality-heading h3,
            .personality-heading p {
              margin-block: 0 1rem;
            }

            .personality > img {
              float: right;
              width: 7rem;
              height: 7rem;
              margin: 0 0 1rem 1.5rem;
              border-radius: 50%;
              object-fit: cover;
            }

            .message-form {
              width: 100%;
              min-height: 70rem;
              margin-block-start: 1rem;
              border: 0;
              frame-sizing: content;
            }

            .credits {
              margin-top: clamp(4rem, 10vw, 8rem);
              font-size: 0.875rem;
              opacity: 0.72;
            }

            @media (max-width: 32rem) {
              .radio-hero {
                min-height: 62svh;
              }

              .personality > img {
                display: block;
                float: none;
                width: 6rem;
                height: 6rem;
                margin: 0 auto 1rem;
              }
            }