:root {
  --layout-columns:4;
  --layout-gutter:8px;
  --layout-margin:16px;
  --layout-reading:644px;
  --layout-unit:8px;
  --layout-top:24px;
  --layout-space:64px;
  --identity-column:1 / -1;
  --content-column:1 / -1;
  --guide-major:oklch(.69589658 .07266173 33.271573);
  --guide-minor:var(--line);
}
:root[data-theme=dark] {
  --guide-major:oklch(.47331429 .08726633 38.312351);
}
.page,.intro,.section,.footer,.article-layout {
  display:grid;
  grid-template-columns:repeat(var(--layout-columns),minmax(0,1fr));
  column-gap:var(--layout-gutter);
}
.page {
  position:relative;
  isolation:isolate;
  width:calc(100% - 2 * var(--layout-margin));
  margin-inline:var(--layout-margin);
  padding-block:var(--layout-top) 64px;
}
.page > :not(.layout-guides) {grid-column:1 / -1;min-width:0}
.page-tools {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px;min-height:48px}
.appearance-tools {display:flex;align-items:center;gap:8px;margin-inline-start:auto}
/* The homepage opens on one shared row; controls occupy its trailing columns. */
.home-page .page-tools {position:absolute;inset-block-start:var(--layout-top);inset-inline-end:0;margin:0}
.home-page :is(.grid-toggle,.theme-toggle) {align-items:start}
.home-page .avatar {margin-bottom:16px}
.home-page {min-height:100vh;min-height:100dvh;align-content:start;padding-block-end:16px}
.home-page > .footer {margin-block-start:calc(var(--layout-space) + var(--footer-grid-shift,0px))}
.page-back {font-size:var(--type-body-size);line-height:var(--type-body-leading);min-height:52px;display:flex;align-items:center}
.grid-toggle,.theme-toggle {position:static;min-width:48px;height:48px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.grid-toggle,.theme-toggle {font:inherit}
.tool-icon {position:relative;display:block;width:20px;height:20px}
.tool-icon svg {display:block;width:20px;height:20px}
.grid-icon-disable,.grid-toggle[aria-pressed=true] .grid-icon-enable {display:none}
.grid-toggle[aria-pressed=true] .grid-icon-disable {display:block}
.tool-tooltip {position:absolute;z-index:6;inset-block-start:calc(100% + 8px);inset-inline-start:50%;width:max-content;padding:5px 8px;border-radius:6px;background:var(--ink);color:var(--page);font-family:inherit;font-size:.875rem;font-weight:400;line-height:calc(20 / 14);white-space:nowrap;text-align:center;text-decoration:none;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-2px) scale(.97);transform-origin:top center}
/* Bridge the gap so the floating label stays visible while hovered. */
.tool-tooltip::before {content:"";position:absolute;inset-inline:0;inset-block-end:100%;height:8px}
/* The trailing control's label grows inward at every viewport width. */
.theme-toggle .tool-tooltip {inset-inline-start:auto;inset-inline-end:-14px;transform:translateY(-2px) scale(.97);transform-origin:top right}
[data-tooltip-trigger]:not([data-tooltip-dismissed]):focus-visible .tool-tooltip {visibility:visible;opacity:1;pointer-events:auto;transform:translateX(-50%)}
.theme-toggle:not([data-tooltip-dismissed]):focus-visible .tool-tooltip {transform:none}
@media(hover:hover) and (pointer:fine) {
  [data-tooltip-trigger]:not([data-tooltip-dismissed]):hover .tool-tooltip {visibility:visible;opacity:1;pointer-events:auto;transform:translateX(-50%)}
  .theme-toggle:not([data-tooltip-dismissed]):hover .tool-tooltip {transform:none}
}
@media(prefers-reduced-motion:no-preference) {
  .tool-tooltip {transition:opacity 125ms var(--ease-out),transform 125ms var(--ease-out),visibility 0s linear 125ms}
  @media(hover:hover) and (pointer:fine) {
    [data-tooltip-trigger]:not([data-tooltip-dismissed]):hover .tool-tooltip {transition-delay:180ms,180ms,180ms}
  }
  [data-tooltip-trigger]:not([data-tooltip-dismissed]):focus-visible .tool-tooltip {transition-delay:0ms}
}
.intro-identity,.section > h2 {grid-column:var(--identity-column);min-width:0}
.intro > .prose,.intro > .updated {grid-column:var(--content-column);margin-top:24px;min-width:0}
.section,.footer {margin-top:var(--layout-space)}
.section-content {grid-column:var(--content-column);min-width:0}
.section > h2 {margin:0 0 24px;padding:0}
.section-content > .index-list:first-child {margin-top:0}
.section-note + .index-list {margin-top:16px}
.section .prose {margin-top:0}
.footer > p {grid-column:var(--content-column);min-width:0}
.footer > a {grid-column:var(--identity-column);justify-self:start}
.article-page {--article-column:1 / -1}
.article-layout {grid-column:1 / -1;min-width:0}
.article-prose,.article-footer {grid-column:var(--article-column);min-width:0}
.article-header,.article-prose {display:grid;grid-template-columns:minmax(0,1fr)}
.article-header {grid-column:1 / -1;margin-bottom:24px}
.article-identity {grid-column:1 / -1;min-width:0}
.article-deck {grid-column:1 / -1}
/* Every article block shares the body text rail, including media and live demos. */
.article-prose > * {grid-column:1 / -1;min-width:0}
.article-prose > p {margin-block:28px 0}
.article-prose > p:first-child {margin-top:0}
.article-prose > h2 {margin-block:64px 0}
.article-prose > h2 + p {margin-top:20px}
.article-prose > figure {margin:32px 0 0}
.article-prose > figure:first-child {margin-top:0}
.article-prose > figure + p {margin-top:32px}
.article-media,.article-demo,.merge-study {display:grid;grid-template-columns:minmax(0,1fr)}
.article-media > :is(.article-image-frame,.article-video-frame),.article-demo > .merge-study,.merge-stage {grid-column:1 / -1;min-width:0}
.article-media > figcaption,.article-demo > figcaption,.merge-controls {grid-column:1 / -1;min-width:0;width:100%;max-width:100%;margin-inline:0}
.article-code {width:100%;margin-inline:0}
.article-code > figcaption {max-width:none;margin-inline:0}
/* Other page text keeps its existing bounded reading measure. */
.intro > .prose,.intro > .updated,.section-note,.section-link,.section .prose,
.row-content,.contributions p,.footer > p {max-inline-size:var(--layout-reading)}
/* The isolated page keeps guides above its background and below its content. */
.layout-guides {position:absolute;inset:0;min-height:100vh;min-height:100dvh;z-index:-1;pointer-events:none;--guide-draw-duration:180ms;--guide-stagger:30ms;--guide-ease-out:var(--ease-out);--guide-rows-delay:calc(var(--guide-draw-duration) + (var(--layout-columns) - 1) * var(--guide-stagger))}
.layout-guide-columns {position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--layout-columns),minmax(0,1fr));column-gap:var(--layout-gutter)}
.layout-guide-columns > span {border-inline:1px solid var(--guide-major);clip-path:inset(0)}
.layout-guide-columns > :nth-child(n+5) {display:none}
.layout-guide-rows {position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:calc(var(--layout-unit) * 8);align-content:start;overflow:hidden}
.layout-guide-rows > span {clip-path:inset(0);background-image:linear-gradient(to bottom,var(--guide-major) 1px,transparent 1px),linear-gradient(to bottom,var(--guide-minor) 1px,transparent 1px);background-size:100% calc(var(--layout-unit) * 8),100% var(--layout-unit);background-position:0 var(--layout-top)}
@media(prefers-reduced-motion:no-preference) {
  .layout-guides[data-reveal="shown"] .layout-guide-columns > span,
  .layout-guides[data-reveal="shown"] .layout-guide-rows > span {transition:clip-path var(--guide-draw-duration) var(--guide-ease-out),opacity var(--guide-draw-duration) var(--guide-ease-out)}
  .layout-guides[data-reveal="shown"] .layout-guide-columns > span {transition-delay:calc(var(--guide-order) * var(--guide-stagger))}
  /* Cap off-screen delays so long articles do not create a prolonged reveal. */
  .layout-guides[data-reveal="shown"] .layout-guide-rows > span {transition-delay:calc(var(--guide-rows-delay) + min(var(--guide-order),10) * var(--guide-stagger))}
  .layout-guides[data-reveal="start"] .layout-guide-columns > span {clip-path:inset(0 0 100% 0);opacity:0}
  .layout-guides[data-reveal="start"] .layout-guide-rows > span {clip-path:inset(0 100% 0 0);opacity:0}
}
.layout-guides[hidden],.grid-toggle[hidden] {display:none}
@media(min-width:768px) {
  :root {--layout-columns:8;--layout-gutter:16px;--layout-top:32px;--layout-margin:24px;--layout-space:96px;--identity-column:1 / span 2;--content-column:4 / span 5}
  /* Keep the sparse homepage within a comfortable viewport when it fits.
     Only the section gaps adapt; text, artwork and content can grow naturally. */
  .home-page {--layout-space:48px}
  @supports (margin-top:round(down,1dvh,4px)) {
    .home-page {--layout-space:round(down,clamp(32px,calc(20dvh - 128px),128px),var(--baseline-step))}
  }
  .page-tools {margin-bottom:32px}
  .article-page {--article-column:4 / span 5}
  .article-header {grid-column:1 / span 3;grid-row:1;align-self:start;margin-bottom:0}
  .article-prose {grid-row:1;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--layout-gutter)}
  /* Reserve two whole columns beside the deck for the appearance controls. */
  .article-prose > .article-deck {grid-column:1 / span 3}
  .article-prose > .article-deck:not(:first-child) {grid-column:1 / -1}
  /* Reserve controls beside the location, not beside every intro paragraph. */
  .home-page .intro-location {max-inline-size:calc(100% - 120px)}
  .intro > .prose,.intro > .updated {margin-top:0}
  .section > h2 {margin-bottom:0}
  .layout-guide-columns > :nth-child(-n+8) {display:block}
}
@media(min-width:1024px) {
  :root {--layout-columns:12;--layout-margin:32px;--layout-space:128px;--identity-column:1 / span 3;--content-column:5 / -1}
  .article-page {--article-column:5 / span 6}
  .article-prose {grid-template-columns:minmax(0,1fr)}
  .article-prose > .article-deck {grid-column:1 / -1}
  .home-page .intro > .prose {grid-column:5 / span 6}
  .home-page .intro-location {max-inline-size:none}
  .layout-guide-columns > :nth-child(n) {display:block}
}
/* Reduce the span as columns widen instead of cutting through a grid track. */
@media(min-width:1600px) {
  .article-page {--article-column:5 / span 5}
}
@media(min-width:1920px) {
  .article-page {--article-column:5 / span 4}
}
@media(min-width:2560px) {
  .article-page {--article-column:5 / span 3}
}
@media print {
  .page-tools,.layout-guides {display:none}
}