/* Roundel OS site. Plain CSS, one file, nothing loaded from elsewhere. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-display: swap;
}

/* ---------- Tokens. Dark is the default; light is below. ---------- */
:root {
  color-scheme: dark;
  --bg: #09090b;            --fg: #fafafa;
  --panel: #1b1d29;         --panel-border: rgba(255,255,255,.09);
  --raised: #2a2d3d;
  --border: #27272a;        --muted: #1c1c1f;      --muted-fg: #a1a1aa;
  --shadow-panel: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -16px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);

  --accent: #fbc711;        --accent-hover: #ddaf0f;   --on-accent: #09090b;
  --accent-container: #4b3c05; --on-accent-container: #fde694;
  --brand-navy: #111827;

  --link: #2295f1;
  --danger: #f34236;   --danger-bg: #350f0c;
  --success: #4bae4f;  --success-bg: #102611;
  --warning: #ffc006;  --warning-bg: #382a01;
  --info: #2295f1;     --info-bg: #072135;

  --radius: 0.875rem;
  --panel-radius: 1.375rem;
  --wrap: 78rem;
  --wash: rgba(9,9,11,.72);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;            --fg: #09090b;
  --panel: #ffffff;         --panel-border: rgba(24,24,40,.10);
  --raised: #f7f7f9;
  --border: #e4e4e7;        --muted: #f4f4f5;      --muted-fg: #71717a;
  --shadow-panel: 0 1px 2px rgba(24,24,40,.05), 0 8px 24px -16px rgba(24,24,40,.18);
  --shadow-lift: 0 2px 6px rgba(24,24,40,.08), 0 18px 40px -22px rgba(24,24,40,.35);
  --accent-container: #fff8e2; --on-accent-container: #5f4c06;
  --accent-hover: #ddaf0f;  --on-accent: #645007;
  --link: #1b74bc;
  --danger: #cc372d;   --danger-bg: #fef2f1;
  --success: #38813a;  --success-bg: #f2f9f3;
  --warning: #8f6c03;  --warning-bg: #fffbee;
  --info: #1b74bc;     --info-bg: #f0f8fe;
  --wash: rgba(255,255,255,.74);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;            --fg: #09090b;
    --panel: #ffffff;         --panel-border: rgba(24,24,40,.10);
    --raised: #f7f7f9;
    --border: #e4e4e7;        --muted: #f4f4f5;      --muted-fg: #71717a;
    --shadow-panel: 0 1px 2px rgba(24,24,40,.05), 0 8px 24px -16px rgba(24,24,40,.18);
    --shadow-lift: 0 2px 6px rgba(24,24,40,.08), 0 18px 40px -22px rgba(24,24,40,.35);
    --accent-container: #fff8e2; --on-accent-container: #5f4c06;
    --on-accent: #645007;
    --link: #1b74bc;
    --danger: #cc372d;   --danger-bg: #fef2f1;
    --success: #38813a;  --success-bg: #f2f9f3;
    --warning: #8f6c03;  --warning-bg: #fffbee;
    --info: #1b74bc;     --info-bg: #f0f8fe;
    --wash: rgba(255,255,255,.74);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", "Noto Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--link); }
a:hover { color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); letter-spacing: -.03em; line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -.02em; font-weight: 600; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 .85rem; }
p:last-child { margin-bottom: 0; }
ul { margin: 0 0 .85rem; padding-left: 1.15rem; }
li { margin-bottom: .3rem; }
code {
  font-family: "DejaVu Sans Mono", ui-monospace, monospace;
  font-size: .875em; background: var(--muted); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; padding: .1em .35em;
  overflow-wrap: anywhere;
}
pre {
  margin: 0 0 .85rem; background: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .85rem 1rem; overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: .8125rem; }
.wrap { width: min(var(--wrap), calc(100% - 2.5rem)); margin-inline: auto; }
.lead { font-size: 1.125rem; color: var(--muted-fg); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: var(--on-accent); padding: .6rem 1rem; border-radius: var(--radius); z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--border);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-head { background: var(--bg); }
}
.head-row { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--fg); text-decoration: none; letter-spacing: -.01em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand span { white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.nav a {
  color: var(--muted-fg); text-decoration: none; font-weight: 600; font-size: .9375rem;
  padding: .45rem .7rem; border-radius: var(--radius); border: 1px solid transparent;
}
.nav a:hover { color: var(--fg); background: var(--muted); }
.nav a[aria-current="page"] { color: var(--fg); background: var(--accent-container); border-color: var(--accent-container); }
.theme-btn {
  margin-left: .35rem; width: 2.25rem; height: 2.25rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--border); background: var(--panel);
  color: var(--fg); cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .moon { display: none; }
:root[data-theme="light"] .theme-btn .moon { display: block; }
:root[data-theme="light"] .theme-btn .sun { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn .moon { display: block; }
  :root:not([data-theme="dark"]) .theme-btn .sun { display: none; }
}

/* ---------- The menu on a narrow screen ---------- */
.menu { display: none; }
.menu-btn {
  list-style: none; width: 2.75rem; height: 2.75rem; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border); background: var(--panel);
  color: var(--fg); position: relative; z-index: 2;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover { border-color: var(--accent); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu .cross { display: none; }
.menu[open] .cross { display: block; }
.menu[open] .bars { display: none; }
.menu[open] .menu-btn { background: var(--accent-container); border-color: var(--accent-container);
  color: var(--on-accent-container); }
.menu-sheet {
  position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
  background: var(--bg); padding: 1rem 1.25rem 2rem; overflow-y: auto;
}
.menu-list { display: block; }
.menu-list a {
  display: flex; align-items: center; min-height: 3.25rem;
  padding: .75rem 1rem; border-radius: var(--radius);
  color: var(--fg); text-decoration: none; font-weight: 600; font-size: 1.0625rem;
  border-bottom: 1px solid var(--border);
}
.menu-list a:last-child { border-bottom: 0; }
.menu-list a[aria-current="page"] { background: var(--accent-container); color: var(--on-accent-container); }

@media (max-width: 50rem) {
  .site-head { z-index: 60; }
  .menu { position: static; }
  .nav { display: none; }
  .menu { display: block; margin-left: .35rem; }
  .theme-btn { margin-left: auto; width: 2.75rem; height: 2.75rem; }
}
@media (min-width: 50.0625rem) {
  .theme-btn { margin-left: .35rem; }
}

/* ---------- Sections ---------- */
section { padding: 3.25rem 0; }
.sec-head { display: flex; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; max-width: 46ch; color: var(--muted-fg); }

/* ---------- Panels and grids ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  padding: 1.5rem; min-width: 0;
}
.panel > h3 { margin-top: 0; }
.panel p, .panel li { color: var(--muted-fg); }
.panel p strong, .panel li strong { color: var(--fg); }
.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.split { display: grid; gap: 1.5rem; grid-template-columns: 1.3fr 1fr; align-items: start; }
.split.flip { grid-template-columns: 1fr 1.35fr; }
.span2 { grid-column: span 2; }
@media (max-width: 68rem) { .split, .split.flip { grid-template-columns: 1fr; } .span2 { grid-column: auto; } }
.grid > .panel code, .grid > .panel p { overflow-wrap: anywhere; }

.lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 45%, var(--panel-border)); }

.ico { width: 26px; height: 26px; color: var(--accent); display: block; margin-bottom: .7rem; }
.ico-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.ico-row .ico { margin: 0; }
.ico-row h3 { margin: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 4rem 0 3rem; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
@media (max-width: 68rem) { .hero-grid { grid-template-columns: 1fr; gap: 1.75rem; } }
.hero h1 { margin-bottom: .9rem; }
.hero .lead { font-size: 1.1875rem; max-width: 52ch; color: var(--fg); }
.mark { width: min(23rem, 78vw); height: auto; margin-inline: auto; display: block; }
.mark .spin { transform-box: fill-box; transform-origin: center; }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: var(--radius); font-weight: 700;
  text-decoration: none; border: 1px solid transparent; white-space: normal;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-quiet { background: var(--panel); border-color: var(--border); color: var(--fg); }
.btn-quiet:hover { border-color: var(--accent); color: var(--fg); }

/* ---------- Numbers ---------- */
.stats { display: grid; gap: 1px; background: var(--panel-border);
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stat { background: var(--panel); padding: 1.15rem 1.25rem; min-width: 0; }
.stat b { display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat span { display: block; font-size: .875rem; color: var(--muted-fg); }

/* ---------- Ring diagram ---------- */
.ring-fig { display: block; width: 100%; height: auto; }
.ring-fig .dot { fill: var(--raised); stroke: var(--muted-fg); }
.ring-fig .dot { fill: color-mix(in srgb, var(--fg) 13%, var(--panel));
  stroke: color-mix(in srgb, var(--fg) 30%, transparent); }
.ring-fig .dot-on { fill: var(--accent); stroke: none; }
.ring-fig .band { fill: none; stroke: var(--muted-fg); stroke-opacity: .35; }
.ring-fig .plate { fill: var(--muted); stroke: var(--border); stroke-width: 1; }
.ring-fig .t { fill: var(--fg); font-family: "Manrope", sans-serif; }
.ring-fig .t-dim { fill: var(--muted-fg); font-family: "Manrope", sans-serif; font-size: 11px; }
.ring-fig .glyph { fill: var(--muted-fg); }
.ring-fig .glyph-on { fill: var(--on-accent); }
figure { margin: 0; }
figcaption { font-size: .8125rem; color: var(--muted-fg); margin-top: .6rem; }

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: .85rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2rem 1fr;
  gap: .2rem .85rem; margin: 0; color: var(--muted-fg); }
.steps li::before {
  content: counter(s); display: grid; place-items: center;
  grid-column: 1; grid-row: 1;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--accent-container); color: var(--on-accent-container);
  font-weight: 700; font-size: .875rem;
}
.steps li > b { grid-column: 2; grid-row: 1; color: var(--fg); align-self: center; }
.steps li > span { grid-column: 2; grid-row: 2; }

/* ---------- Key/value rows ---------- */
.rows { display: grid; gap: 0; }
.rows div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--border); }
.rows div:first-child { border-top: 0; }
.rows dt, .rows b { font-weight: 600; color: var(--fg); }
.rows span { color: var(--muted-fg); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 44rem) { .rows div { grid-template-columns: 1fr; gap: .1rem; } }

/* ---------- Notes ---------- */
.note {
  border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .9375rem;
  border: 1px solid var(--border); background: var(--muted); color: var(--fg);
}
.note b { font-weight: 700; }
.note.warn { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.note.good { background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.note.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 35%, transparent); }


/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--border); background: var(--muted); padding: 2.25rem 0 2rem; margin-top: 1rem; }
.foot-grid { display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 62rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 34rem) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); margin-bottom: .6rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .35rem; }
.site-foot a { color: var(--fg); text-decoration: none; font-size: .9375rem; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.foot-note { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: .8125rem; color: var(--muted-fg); }

/* ---------- Movement ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.js .reveal.d1.in { transition-delay: .06s; }
.js .reveal.d2.in { transition-delay: .12s; }
.js .reveal.d3.in { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
  .lift, .lift:hover { transition: none; transform: none; }
  .mark .spin { transform: none !important; }
  * { animation: none !important; }
}

/* ---------- Pictures ----------
   A painting is always shown whole: the Roundel mark hidden in it can sit
   anywhere in the frame, so nothing here crops one. */
.shot { position: relative; overflow: hidden; border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border); box-shadow: var(--shadow-panel);
  background: var(--panel); min-width: 0; margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
/* words wrap so a line never ends on a lone word */
p, li, figcaption, .note, .stat span, .rows span, .post-sum, .demo-say { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.picard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.picard img { display: block; width: 100%; height: auto; }
.picard .body { padding: 1.25rem 1.35rem 1.4rem; }
.picard .body h3 { margin-bottom: .4rem; }

/* A band: a whole painting and a block of words, on a tinted strip. */
.band { background: var(--muted); border-block: 1px solid var(--border);
  padding: 3rem 0; margin: 3.25rem 0; }
.band-in { display: grid; gap: 1.75rem; grid-template-columns: 1fr 1fr; align-items: center; }
.band-in > * { min-width: 0; }
.band.strip .band-in { grid-template-columns: 1fr; gap: 2rem; }
.band.strip .band-media { max-width: 52rem; margin-inline: auto; }
.band-media { min-width: 0; }
.band-media > .panel { padding: 1.1rem; }
.band h2 { margin-bottom: .6rem; }
.band-words { min-width: 0; }
.holder { max-width: 46rem; }
@media (max-width: 68rem) { .band-in { grid-template-columns: 1fr; } }

/* The top of a page: a soft wash, not a cropped painting. */
.hero-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 26rem at 78% -12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50rem 24rem at 6% 8%, color-mix(in srgb, var(--link) 12%, transparent), transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .hero-wash { background: none; } }

/* ---------- More drawings ---------- */
.fig { display: block; width: 100%; height: auto; }
.fig .plate { fill: var(--muted); stroke: var(--border); stroke-width: 1; }
.fig .panel-fill { fill: var(--panel); stroke: var(--panel-border); stroke-width: 1; }
.fig .chip { fill: color-mix(in srgb, var(--fg) 13%, var(--panel)); stroke: none; }
.fig .chip-on { fill: var(--accent); stroke: none; }
.fig .line { stroke: var(--muted-fg); stroke-opacity: .4; fill: none; }
.fig .line-on { stroke: var(--accent); fill: none; }
.fig .t { fill: var(--fg); font-family: "Manrope", sans-serif; font-size: 11px; }
.fig .t-dim { fill: var(--muted-fg); font-family: "Manrope", sans-serif; font-size: 10px; }
.fig .t-on { fill: var(--on-accent); font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; }
.fig .glyph { fill: none; stroke: var(--muted-fg); stroke-width: 1.4; stroke-linecap: round; }

/* ---------- The ring you can try ----------
   Everything inside is drawn on a fixed 400 by 400 square and the whole
   square is scaled to fit, so the clock, the tray and the icons keep their
   proportions at every width and nothing can overlap or spill out. */
.demo { position: relative; }
.demo-head h3 { font-size: 1.0625rem; }
.demo-head p { color: var(--muted-fg); margin-bottom: 1rem; }
.demo-screen { display: none; }
.js .demo-screen {
  display: block; position: relative; width: 100%; max-width: 32.5rem;
  height: 20rem; margin-inline: auto;
  border-radius: var(--panel-radius); border: 1px solid var(--border);
  background:
    radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--muted);
  touch-action: none;
}
.js .demo-still { display: none; }
.demo-help { font-size: .8125rem; color: var(--muted-fg); margin-top: .8rem; }

.demo-stage {
  position: absolute; top: 0; left: 50%; width: 400px; height: 400px;
  transform-origin: top center; transform: translateX(-50%) scale(1);
}

.demo-corner {
  position: absolute; top: 0; left: 0; z-index: 5;
  display: flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: .45rem .9rem .45rem .55rem;
  border: 0; border-top-left-radius: var(--panel-radius);
  border-bottom-right-radius: var(--panel-radius);
  background: var(--panel); color: var(--fg);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-panel); max-width: 60%;
}
.demo-corner:hover { color: var(--on-accent-container); background: var(--accent-container); }
.demo-corner-words { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-corner-mark {
  width: 1.1rem; height: 1.1rem; border-radius: 999px; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.demo-screen.is-open .demo-corner-words { opacity: .45; }
@media (max-width: 30rem) { .demo-screen.is-open .demo-corner-words { display: none; } }

.demo-ring {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transform: scale(.92); transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.demo-screen.is-open .demo-ring { opacity: 1; visibility: visible; transform: none; }

/* Design-space sizes: these are inside the 400px square, never on screen. */
.demo-centre {
  position: absolute; left: 200px; top: 200px; transform: translate(-50%, -50%);
  width: 184px; height: 184px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; padding: 8px;
}
.demo-clock { font-size: 42px; line-height: 1; font-weight: 300; letter-spacing: -1px;
  font-variant-numeric: tabular-nums; }
.demo-date { font-size: 13px; line-height: 1.3; color: var(--muted-fg); margin-top: 4px;
  text-align: center; white-space: nowrap; }
.demo-tray { display: flex; gap: 2px; margin-top: 8px;
  background: color-mix(in srgb, var(--fg) 6%, transparent); border-radius: 999px; padding: 2px 5px; }
.tray-btn { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: none; color: var(--muted-fg); cursor: pointer; padding: 0; }
.tray-btn svg { width: 16px; height: 16px; }
.tray-btn:hover { background: var(--accent); color: var(--on-accent); }

.demo-apps { list-style: none; margin: 0; padding: 0; }
.demo-apps .slot {
  position: absolute; left: 200px; top: 200px; margin: 0;
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px));
  transition: transform .25s ease;
}
.demo-apps .slot.is-held { transition: none; z-index: 4; }
.app {
  width: 56px; height: 56px; padding: 0; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--panel-border);
  background: var(--panel); color: var(--fg); cursor: grab;
  box-shadow: var(--shadow-panel); touch-action: none;
}
.app svg { width: 26px; height: 26px; pointer-events: none; }
.app:hover, .app:focus-visible { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.app:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.slot.is-held .app { cursor: grabbing; }

.demo-say {
  margin: .75rem 0 0; padding: .5rem .9rem; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--panel-border);
  font-size: .8125rem; color: var(--fg); min-height: 2.5rem;
  display: flex; align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .demo-ring, .demo-apps .slot { transition: none; }
}

/* ---------- The paintings ---------- */
/* The painter a wallpaper nods to */
.manner-line { display: inline-block; font-size: .8125rem; font-weight: 600;
  color: var(--on-accent-container); background: var(--accent-container);
  border-radius: 999px; padding: .2rem .7rem; }

/* ---------- Blog ---------- */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.posts li { margin: 0; }
.post-link {
  display: grid; gap: .25rem; padding: 1.35rem 1.5rem;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius); box-shadow: var(--shadow-panel);
  text-decoration: none; color: var(--fg);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--panel-border)); color: var(--fg); }
.post-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.post-date { font-size: .8125rem; font-weight: 600; color: var(--muted-fg); }
.post-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.post-sum { color: var(--muted-fg); }
.post-back a { display: inline-flex; align-items: center; gap: .4rem;
  font-size: .875rem; font-weight: 600; text-decoration: none; color: var(--muted-fg); }
.post-back a:hover { color: var(--fg); }
.post-back svg { width: 16px; height: 16px; }
article .hero .post-date { display: block; margin-bottom: .35rem; }
@media (prefers-reduced-motion: reduce) { .post-link, .post-link:hover { transition: none; transform: none; } }

/* ---------- The two sub-footers ---------- */
.gh-foot { border-top: 1px solid var(--border); background: var(--bg); padding: 1.1rem 0; }
.gh-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.gh-marks { display: flex; align-items: center; gap: .9rem; }
.gh-marks a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 999px; color: var(--muted-fg); }
.gh-marks a:hover { color: var(--fg); background: var(--muted); }
.gh-links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-left: auto; }
.gh-links a { color: var(--muted-fg); text-decoration: none; font-size: .8125rem;
  display: inline-flex; align-items: center; min-height: 2.75rem; }
.gh-links a:hover { color: var(--fg); text-decoration: underline; }

.legal { border-top: 1px solid var(--border); background: var(--muted); padding: 1.1rem 0 1.4rem; }
.legal-inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1.5rem; }
.legal-text { margin: 0; font-size: .75rem; line-height: 1.7; color: var(--muted-fg); }
.legal-links { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-left: auto; }
.legal-links a { color: var(--muted-fg); text-decoration: none; font-size: .75rem;
  display: inline-flex; align-items: center; min-height: 2.75rem; }
.legal-links a:hover { color: var(--fg); text-decoration: underline; }
@media (max-width: 40rem) {
  .gh-links, .legal-links { margin-left: 0; }
}

/* ---------- The beta line ---------- */
.beta { background: var(--muted); border-bottom: 1px solid var(--border); }
.beta p {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  margin: 0; padding: .5rem 0; text-align: center;
  font-size: .8125rem; line-height: 1.5; color: var(--muted-fg);
}
.beta b, .beta strong { color: var(--fg); font-weight: 700; }
.beta-dot {
  width: .5rem; height: .5rem; flex: none; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (max-width: 34rem) {
  .beta p { align-items: flex-start; text-align: left; gap: .45rem; }
  .beta-dot { margin-top: .4rem; }
}

/* ---------- The Lightmorphic apps button ----------
   Drawn by a shared script into this box; the panel it opens lives in a
   shadow root, so nothing here reaches it. The box just holds its place. */
.all-apps { width: 2.75rem; height: 2.75rem; flex: none; margin-left: .35rem;
  display: grid; place-items: center; }
@media (max-width: 50rem) {
  .all-apps { margin-left: .25rem; }
  .theme-btn { margin-left: auto; }
}