:root {
  color-scheme: light;
  --paper: #f6f8f6;
  --white: #fff;
  --ink: #142820;
  --muted: #465e53;
  --line: #cad7ce;
  --accent: #065c42;
  --accent-deep: #054533;
  --mint: #dff2e7;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.75;
  background: var(--paper);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { width: min(70rem, calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; }
a { color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid #a04113; outline-offset: 4px; }
.skip { position: absolute; z-index: 2; inset: .6rem auto auto 1rem; background: var(--white); padding: .65rem 1rem; }
.skip:not(:focus) { clip-path: inset(50%); }
.site-header, .site-footer { background: var(--white); }
.site-header { border-bottom: 1px solid var(--line); }
.site-footer { border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 7rem); }
.header-row, .foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1.4rem; padding-block: .65rem; }
.foot-row { padding-block: 1.5rem; font-size: .875rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; color: var(--ink); text-decoration: none; min-height: 2.75rem; }
.mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: var(--white); background: var(--accent); font-size: 1.45rem; line-height: 1; }
nav { display: flex; flex-wrap: wrap; gap: .15rem clamp(.65rem, 3vw, 1.5rem); }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--muted); font-size: .86rem; font-weight: 700; }
nav a[aria-current] { color: var(--accent); text-decoration-thickness: .17em; }
h1, h2, h3 { line-height: 1.28; overflow-wrap: anywhere; }
h1, h2, h3, p { margin: 0; }
p + p { margin-top: .8rem; }
p + .button { margin-top: 1rem; }
h1 { font-size: clamp(2.1rem, 5.1vw, 4.55rem); letter-spacing: -.055em; }
h2 { font-size: clamp(1.35rem, 3vw, 2.05rem); letter-spacing: -.035em; }
h3 { font-size: 1.05rem; }
h1 + p, h2 + p, h3 + p { margin-top: .7rem; }
.lead { font-size: clamp(1.04rem, 2vw, 1.2rem); max-width: 43rem; color: var(--muted); }
.eyebrow, .panel-top, .number, .meta { color: var(--accent); font-weight: 800; }
.eyebrow, .panel-top, .number { font: 700 .82rem/1.4 ui-monospace, Menlo, monospace; letter-spacing: .09em; }
.eyebrow { margin-bottom: .75rem; }
.dot { display: inline-block; margin-inline-end: .4rem; width: .56rem; height: .56rem; border-radius: 50%; background: var(--accent); }
.hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: clamp(1.4rem, 5vw, 4.5rem); padding-block: clamp(2.2rem, 8vw, 6rem) clamp(2rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.release-panel { min-width: 0; border-radius: 1rem; padding: clamp(1.05rem, 3vw, 2.05rem); background-color: #e6f2e9; background-image: linear-gradient(#cbded180 1px, transparent 1px), linear-gradient(90deg, #cbded180 1px, transparent 1px); background-size: 1.25rem 1.25rem; border: 1px solid #afc7b8; }
.release-panel h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-top: 1.4rem; }
.release-panel > a { display: inline-block; margin-top: 1rem; font-weight: 750; }
.panel-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pill { color: var(--accent-deep); background: var(--white); border: 1px solid #afc7b8; padding: .2rem .55rem; border-radius: 2rem; letter-spacing: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem .95rem; border: 1px solid transparent; border-radius: .55rem; font-weight: 760; text-decoration: none; }
.primary { color: var(--white); background: var(--accent); }
.primary:hover { color: var(--white); background: var(--accent-deep); }
.secondary { color: var(--accent-deep); background: var(--white); border-color: #afc7b8; }
.secondary:hover { background: var(--mint); }
.hint, .muted, .file-list span { color: var(--muted); }
.hint { margin-top: .75rem; font-size: .875rem; }
.intro { padding-block: clamp(2rem, 6vw, 4.25rem) 1.5rem; max-width: 50rem; }
.back { display: inline-block; margin-bottom: 1.5rem; }
.section { margin-top: clamp(2rem, 5vw, 4rem); }
.intro + .section { margin-top: 1rem; }
.cards, .history, .chapters, .file-list { padding: 0; list-style: none; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 1rem 0 0; }
.cards li, .notice { border: 1px solid var(--line); border-radius: .75rem; padding: 1.15rem; background: var(--white); }
.cards h3 { margin-top: .65rem; }
.cards p, .chapters p { color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.2rem; align-items: start; }
.notice { background: #edf5ee; margin-top: 1rem; }
.split .notice { margin-top: 0; }
.notice > a { display: inline-block; margin-top: .65rem; }
.history, .chapters { border-top: 1px solid var(--line); }
.history li, .chapters li, .file-list li { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.history li { display: grid; grid-template-columns: minmax(9rem, 1fr) 3fr minmax(8rem, auto); gap: .55rem 1.15rem; align-items: start; }
.history h2 { font-size: 1.35rem; }
.meta { font-size: .9rem; }
.end-link { margin-top: 1.5rem; }
.file-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.chapters li { display: flex; gap: 1rem; align-items: baseline; }
code { overflow-wrap: anywhere; }
@media (max-width: 47rem) {
  .hero, .split, .cards, .history li { grid-template-columns: 1fr; }
  .release-panel h2 { margin-top: .8rem; }
}

/* Legacy visual reference: cream paper, teal controls and a circuit grid. */
:root {
  --paper: #f7f2e7;
  --white: #fffaf1;
  --ink: #1c2a26;
  --muted: #4c5750;
  --line: #d8d1c1;
  --accent: #204c46;
  --accent-deep: #173a35;
  --mint: #e2e9df;
  --sand: #efe8d8;
  font-family: "Hiragino Sans", "Yu Gothic", "Avenir Next", system-ui, sans-serif;
}
.wrap, .interior main { width: min(1150px, calc(100% - clamp(2rem, 5vw, 4rem))); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 3; background: var(--white); }
.header-row { min-height: 71px; gap: 1rem; }
.brand img, .workspace-top img { border-radius: .55rem; box-shadow: 0 2px 8px #352d2020; flex: none; }
.brand span, .workspace-top div { display: grid; line-height: 1.1; }
.brand small, .workspace-top small { color: var(--muted); font-size: .65rem; font-weight: 500; letter-spacing: .04em; }
.main-nav { margin-inline-start: auto; gap: clamp(.5rem, 2.2vw, 2rem); }
.main-nav a, .header-github { text-decoration: none; font-size: .83rem; font-weight: 750; }
.main-nav a:hover, .header-github:hover { text-decoration: underline; }
.header-github { padding: .58rem .68rem; border-inline-start: 1px solid var(--line); }
.skip { position: fixed; z-index: 4; }
#product, #versions, #examples, [id^="section-"] { scroll-margin-top: 8rem; }
.hero-band {
  background-color: #f2ede1;
  background-image: linear-gradient(110deg,#e4e8de7a 0%,#f8f1e243 50%,#eee5dcb0 100%),
    repeating-linear-gradient(0deg,transparent 0 23px,#554b3917 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,#554b3917 23px 24px);
  border-bottom: 1px solid var(--line);
}
.hero { grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4.3vw, 4rem); padding-block: clamp(3.2rem, 6.45vw, 6.05rem); border: 0; }
.hero h1 { font-size: clamp(2.55rem, 5.65vw, 4.25rem); letter-spacing: -.06em; font-weight: 800; line-height: 1.12; }
.hero .eyebrow { margin-bottom: 1.1rem; }
.hero .lead { margin-top: 1.65rem; line-height: 1.84; }
.hero .actions { margin-top: 2rem; }
.hero .hint { margin-top: 1rem; }
.dot { background: #9b5742; width: .42rem; height: .42rem; }
.status-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #2a6a62; margin-right: .3rem; }
.eyebrow, .number, .micro { font: 700 .72rem/1.4 "Avenir Next", system-ui, sans-serif; letter-spacing: .075em; }
.number { color: #8b4937; }
.button { border-radius: .4rem; min-height: 3rem; padding-inline: 1.35rem; font-size: .92rem; }
.secondary { border-color: #817e71; color: var(--ink); }
.workspace { border: 1px solid #dfd6c5; border-radius: .85rem; overflow: hidden; min-width: 0;
  background: var(--white); box-shadow: 0 24px 38px #3327191b; }
.workspace-top { display: flex; align-items: center; gap: .6rem; min-height: 62px; padding: .65rem .85rem; }
.workspace-top b { font-size: .92rem; }
.workspace-top > span { color: var(--accent); font-size: .66rem; font-weight: 750; margin-left: auto; }
.workspace-main { display: grid; grid-template-columns: 17% minmax(0,1fr) 24%; min-height: clamp(13rem, 22vw, 20.4rem); border-block: 1px solid var(--line); }
.tools { padding: .7rem .55rem; min-width: 0; }
.tools b { display: block; font-size: .53rem; color: var(--accent); margin: .15rem 0 .4rem; }
.tools i { display: block; height: 2rem; border: 1px solid var(--line); border-radius: .4rem; margin-bottom: .38rem; background: #fffdf7; }
.board { display: grid; place-items: center; min-width: 0; padding: .45rem;
  border-inline: 1px solid var(--line); background-color: #f1ead8;
  background-image: linear-gradient(#73624d26 1px,transparent 1px),linear-gradient(90deg,#73624d26 1px,transparent 1px);
  background-size: 24px 24px; }
.board img { width: 90%; height: auto; transform: translateY(15%); }
.workspace-version { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem .65rem; min-width: 0; }
.workspace-version small, .workspace-bottom { font-size: .56rem; color: var(--muted); }
.workspace-version strong { margin-top: .45rem; color: var(--accent); font: 650 clamp(.8rem,2vw,1.5rem)/1.3 system-ui,sans-serif; overflow-wrap: anywhere; }
.workspace-version a { font-size: .61rem; font-weight: 750; margin-top: auto; }
.workspace-bottom { padding: .44rem .75rem; }
.home-band { border-bottom: 1px solid var(--line); padding-block: clamp(3.2rem,6.4vw,6rem); }
.feature-band { background: #fffbf343; }
.home-band h2 { font-size: clamp(1.7rem,3.15vw,2.75rem); font-weight: 550; line-height: 1.25; }
.feature-band .cards { gap: 0; border: 1px solid var(--line); border-radius: .48rem; overflow: hidden; margin-top: 2.2rem; }
.feature-band .cards li { border: 0; border-radius: 0; min-height: 185px; padding: clamp(1rem,2vw,1.8rem); background: #fffaf178; }
.feature-band .cards li + li { border-inline-start: 1px solid var(--line); }
.feature-band .cards h3 { margin-top: 2rem; font-weight: 600; }
.feature-band .cards p { font-size: .86rem; }
.featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, .42fr); gap: 1.9rem;
  border: 1px solid var(--line); border-left: 5px solid #3c7770; border-radius: .8rem; background: var(--white);
  box-shadow: 0 20px 35px #33271913; padding: clamp(1.2rem,3.4vw,3.3rem); }
.featured h2, .version-card h3 { font-family: ui-monospace, Menlo, monospace; font-weight: 500; letter-spacing: -.075em; }
.featured-download { border-inline-start: 1px solid var(--line); padding-inline-start: 1.9rem; overflow-wrap: anywhere; }
.featured-download .button { width: 100%; }
.versions-band { background: var(--sand); }
.section-heading { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; align-items: end; margin-bottom: 2.1rem; }
.section-heading > p { color: var(--muted); }
.version-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.version-card { background: var(--white); border: 1px solid var(--line); border-radius: .55rem; padding: clamp(1rem,2vw,1.8rem); }
.version-card.current { border-inline-start: 5px solid #3c7770; }
.version-card h3 { margin: 1rem 0; font-size: clamp(1.7rem,3vw,2.55rem); }
.version-card .meta { margin: 1.1rem 0; border-top: 1px solid var(--line); padding-top: .8rem; }
.notice { background: var(--white); }
.notice summary { cursor: pointer; font-weight: 750; }
.notice summary span { margin-inline: .4rem .75rem; }
.home .site-footer { margin-top: 0; }
.foot-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: start; padding-block: 2rem; }
.foot-row > div > a:not(.brand) { display: block; margin-bottom: .3rem; }
.footer-brand p { font-size: .8rem; color: var(--muted); }
.footer-base { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-block: .8rem; font-size: .78rem; color: var(--muted); }

.guide-intro { padding-bottom: 1.2rem; }
.guide-layout { display: grid; grid-template-columns: minmax(9rem,13rem) minmax(0, 1fr); gap: clamp(1rem,3vw,3rem); align-items: start; }
.guide-menu { display: block; background: var(--white); padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .6rem; }
.guide-menu ol { padding-left: 1.45rem; margin: 0; }
.guide-menu a { min-height: 2.35rem; }
.guide-body { min-width: 0; max-width: 56rem; overflow-wrap: anywhere; }
.guide-body h2 { margin: 2rem 0 .75rem; font-size: clamp(1.35rem,3vw,1.95rem); }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin-top: 1.6rem; }
.guide-body img { display: block; height: auto; max-width: 100%; margin-top: 1.5rem; border: 1px solid var(--line); border-radius: .45rem; }
.figure-caption { display: block; font-size: .86rem; color: var(--muted); margin: .35rem 0 1rem; }
.guide-body blockquote, .guide-body pre { margin-inline: 0; padding: 1rem; border-inline-start: .2rem solid var(--accent); background: var(--white); }
.guide-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; max-width: 100%; margin-block: 1rem; }
.guide-body table { border-collapse: collapse; background: var(--white); min-width: min(32rem,100%); }
.guide-body th, .guide-body td { border: 1px solid var(--line); padding: .5rem .65rem; text-align: start; }
.guide-body th { background: var(--sand); }
.chapter-links { justify-content: space-between; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: .65rem; }
@media (max-width: 47rem) {
  .header-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .25rem .5rem; padding-block: .55rem; }
  .main-nav { grid-row: 2; grid-column: 1/-1; margin: 0; gap: 0 1rem; }
  .main-nav a { min-height: 2.2rem; }
  .header-github { grid-column: 2; grid-row: 1; padding-inline: .5rem 0; }
  .brand small { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2.25rem,12vw,3.45rem); max-width: 21rem; }
  .hero .actions { flex-direction: column; }
  .hero .button { width: 100%; }
  .feature-band .cards li { min-height: 0; }
  .feature-band .cards li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .feature-band .cards h3 { margin-top: .6rem; }
  .featured, .version-grid, .section-heading, .guide-layout { grid-template-columns: 1fr; }
  .featured-download { border-inline-start: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
  .foot-row { grid-template-columns: 1fr 1fr; }
  .guide-menu ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.15rem; }
}