:root {
  color-scheme: light;
  --bg: #f0efe7; --fg: #1f2a22; --muted: #5f665a; --faint: rgba(31, 42, 34, .13);
  --card: #fafaf3; --pill: #e7e6e1; --sel: #1d1d1b; --sel-fg: #ffffff;
  --accent: #1d1d1b; --code-bg: #e8e7e2; --shadow: rgba(31, 42, 34, .22);
  --focus: #2f6fd6;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 80px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; line-height: 1.12; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: .2em; }
code { background: var(--code-bg); padding: .1em .35em; border-radius: 5px; font: .85em var(--mono); overflow-wrap: anywhere; }
pre { background: var(--code-bg); padding: 16px 18px; border-radius: 14px; overflow-x: auto; margin: .8em 0 1.2em; font-size: .9rem; line-height: 1.5; }
pre code { background: none; padding: 0; overflow-wrap: normal; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--fg); color: var(--bg); padding: 8px 12px; z-index: 20; }
.skip:focus { top: 8px; }

/* header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.bar { display: flex; gap: 8px 24px; align-items: center; justify-content: space-between; padding-top: clamp(24px, 4vw, 48px); }
.brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; text-decoration: none; color: var(--fg); }
.dot { color: var(--sel); }
.tag { margin: 0; font: .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--fg); display: flex; align-items: center; gap: .9em; text-align: right; }
.pip { width: 9px; height: 9px; border-radius: 50%; background: var(--sel); flex: none; }

/* hero */
.hero { min-height: 100vh; min-height: 100svh; padding-top: 112px; }
.hero-main { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 72px; }
.hero-copy { align-self: flex-start; z-index: 2; max-width: 26rem; margin-bottom: 8px; }
.hero-copy h1 { font-size: clamp(2.8rem, 5.2vw, 8.5rem); letter-spacing: -.02em; line-height: 1.04; margin-bottom: .35em; }
.lead { font-size: clamp(1rem, 1.5vw, 1.25rem); color: var(--muted); line-height: 1.55; margin-bottom: 1.6em; }
.quiet { font: .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); max-width: 22rem; margin: 0; }
.quiet strong { color: var(--fg); font-weight: 600; }
.stage { width: 100%; display: flex; flex-direction: column; align-items: center; }
.viewer { position: relative; overflow: hidden; }
.viewer canvas { display: block; width: 100%; height: 100%; }
.hero-viewer { width: clamp(260px, 48svh, 560px); max-width: 100%; aspect-ratio: 1; }
.shadow { width: clamp(260px, 48svh, 560px); max-width: 100%; height: 26px; margin: -30px 0 10px; position: relative; z-index: 0; pointer-events: none; opacity: var(--shadow-on, 0); transition: opacity .3s ease; }
.hero-viewer { z-index: 1; } /* the canvas paints over its ground shadow */
.shadow::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--shadow-w, min(52%, 380px)); height: var(--shadow-h, 26px); transform: translate(-50%, calc(-50% + var(--shadow-y, 0px))); border-radius: 50%; background: radial-gradient(closest-side, var(--shadow), transparent); filter: blur(5px); opacity: var(--shadow-o, 1); }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; margin: 0; color: var(--muted); font-size: .9rem; }
.fallback[hidden] { display: none; }

.card { background: var(--card); border-radius: 28px; padding: 18px 24px; width: min(680px, 100%); display: grid; gap: 8px; box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 12px; align-items: center; }
.lbl { font: .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.pills, .swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font: inherit; font-size: .9rem; padding: 6px 14px; min-height: 36px; border-radius: 14px; border: 0; background: var(--pill); color: var(--fg); cursor: pointer; text-transform: capitalize; }
.pill:hover { filter: brightness(.97); }
.pill[aria-pressed="true"] { background: var(--sel); color: var(--sel-fg); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; margin: 4px 4px 4px 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--sel); }

.hero-nav { position: absolute; left: var(--gutter); bottom: 20px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hero-nav a { font: .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-decoration: none; padding: 8px 0; }
.hero-nav a:hover { color: var(--fg); text-decoration: underline; }
.hint { position: absolute; right: var(--gutter); bottom: 20px; margin: 0; padding: 8px 0; font: .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

.roster-wrap { padding-bottom: 0; }
.roster { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.tile { width: 96px; text-align: center; }
.tile button { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 14px; text-align: center; }
.tile button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile .viewer { aspect-ratio: 1; display: block; }
.tile .nm { font: .66rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; display: block; }
.tile .sp { font: .62rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; }

/* sections */
.section { padding: 8rem 0; }
.hero + .section { padding-top: 10rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px 64px; align-items: start; }
.side .sub { margin-top: 1.2em; color: var(--muted); max-width: 22rem; }
.sub { color: var(--muted); }
.mono-h { font: .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 24px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 24px 0; border-top: 1px solid var(--faint); }
.list li:first-child { padding-top: 0; border-top: 0; }
.list h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: .45em; }
.list p { margin: 0; color: var(--muted); max-width: 40rem; }
.badge { font: .64rem/1 var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--faint); background: none; vertical-align: middle; }
.badge.ok { color: var(--accent); border-color: currentColor; }
.badge.plan { color: var(--muted); border-style: dashed; }

.mochi-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; }

.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px 80px; align-items: start; margin-top: 4rem; }
.section > .wrap > h2 { margin-bottom: 24px; }
.panel { min-width: 0; }
.panel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: .6em; }
.panel p { color: var(--muted); }
.steps { padding-left: 1.3em; }
.steps li { margin-bottom: 1.2em; padding-left: .3em; }
.steps li::marker { font-family: var(--mono); color: var(--muted); }
.label { font: .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--fg) !important; margin: 2em 0 0; display: flex; gap: 12px; align-items: center; }
.licence { list-style: none; padding: 0; margin: 0 0 1.5em; }
.licence li { padding: 16px 0; border-top: 1px solid var(--faint); }
.licence li:first-child { border-top: 0; padding-top: 0; }
.split > div > p { color: var(--muted); max-width: 40rem; }
.site-footer { padding: 4rem 0 3rem; color: var(--muted); font: .7rem/1.8 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.site-footer p { margin: 0; }

@media (max-width: 900px) {
  .split, .cols { grid-template-columns: minmax(0, 1fr); }
  .cols { margin-top: 3rem; }
}
@media (max-width: 700px) {
  .section { padding: 6rem 0; }
  .hero + .section { padding-top: 7rem; }
  .hero { padding-top: 96px; }
  .tag { font-size: .62rem; letter-spacing: .12em; }
  .hero-main { padding-bottom: 112px; }
  .hero-nav { bottom: 56px; }
  .hint { left: var(--gutter); right: auto; bottom: 16px; }
  .card { padding: 18px 16px; border-radius: 24px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero-copy { margin-bottom: 0; }
}

@media (min-width: 1000px) {
  .hero-copy { position: absolute; top: clamp(0px, 4vh, 48px); left: var(--gutter); margin: 0; }
}

.powered { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 7px 14px; border: 1px solid var(--faint); border-radius: 999px; text-decoration: none; color: var(--muted); font: .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; }
.powered img { display: block; height: 14px; width: auto; }
.powered:hover, .powered:focus-visible { color: var(--fg); border-color: var(--fg); }
.powered-foot { margin: 0 0 24px; }

.kamikin-logo { display: block; height: auto; max-width: 100%; margin: 0 0 20px; }

/* hero caption, hidden control rows */
.hero-cap { margin: 0 0 14px; font: .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: center; min-height: 1.4em; }
.row[hidden] { display: none; }

/* library: tabs + carousel */
.roster-wrap { padding-bottom: 24px; }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tab { font: .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; padding: 10px 16px; min-height: 40px; border-radius: 14px; border: 0; background: var(--pill); color: var(--fg); cursor: pointer; }
.tab:hover { filter: brightness(.97); }
.tab[aria-selected="true"] { background: var(--sel); color: var(--sel-fg); }
.car-nav { display: flex; gap: 6px; flex: none; }
.car-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; border: 0; background: var(--pill); color: var(--fg); cursor: pointer; padding: 0; }
.car-btn:disabled { opacity: .35; cursor: default; }
@media (pointer: coarse) { .car-nav { display: none; } }
.panel-lib[hidden] { display: none; }
.track { --fl: 0px; --fr: 36px; list-style: none; margin: 0; padding: 10px 4px 8px; display: flex; gap: 8px 16px; position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.track::-webkit-scrollbar { display: none; }
.track .tile { flex: none; width: 112px; scroll-snap-align: start; }
.track .tile button { padding: 4px; margin: -4px; width: calc(100% + 8px); border-radius: 16px; box-sizing: border-box; }
.track .tile button[aria-pressed="true"] { background: var(--pill); }
.track .tile button[aria-pressed="true"] .nm { color: var(--accent); font-weight: 700; }
.hint-note { font: .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 24px 0; }
@media (max-width: 700px) { .lib-head { flex-wrap: wrap; } .track .tile { width: 96px; } }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--faint); }
.tl-item { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; padding: 0 0 2.4rem 1.6rem; position: relative; }
.tl-item::before { content: ""; position: absolute; left: -4px; top: .45em; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.tl-milestone::before { background: var(--accent, #1d1d1b); }
.tl-item time { font: .7rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tl-item h3 { margin: 0 0 .35em; }
.tl-item p { margin: 0; color: var(--muted); line-height: 1.55; }
.tl-item .tl-meta { margin-top: .6em; font: .66rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); opacity: .7; }
.tl-img { margin-top: .9rem; max-width: 34rem; border: 1px solid var(--faint); border-radius: 10px; overflow: hidden; background: var(--faint); }
.tl-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tl-loading { padding: 0 0 1rem 1.6rem; color: var(--muted); }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: .3rem; } }

/* workshops menu (header button and dropdown; logic in workshop/menu.js) */
.bar > .tag { margin-left: auto; }
.ws { position: relative; }
.ws-btn { display: inline-flex; align-items: center; gap: .7em; min-height: 40px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--faint); background: var(--card); color: var(--fg); font: .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.ws-btn:hover { border-color: var(--fg); }
.ws-btn[aria-expanded="true"] { background: var(--sel); border-color: var(--sel); color: var(--sel-fg); }
.ws-btn svg { transition: transform .15s; }
.ws-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ws-menu { position: absolute; right: 0; top: calc(100% + 10px); width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 8px; border-radius: 24px; background: var(--card); box-shadow: 0 1px 0 var(--faint), 0 24px 50px -24px var(--shadow); z-index: 30; }
.ws-menu[hidden] { display: none; }
.ws-menu ul { list-style: none; margin: 0; padding: 0; }
.ws-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 18px; color: var(--fg); text-decoration: none; }
.ws-item:hover, .ws-item:focus-visible { background: var(--pill); }
.ws-item[aria-current="page"] { background: var(--pill); }
.ws-item img { display: block; width: 56px; height: 56px; border-radius: 14px; background: var(--bg); object-fit: contain; }
.ws-txt b { display: block; font: 600 .74rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.ws-txt > span { display: block; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.ws-foot { margin: 6px 10px 8px; font: .62rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; }
  .hero { padding-top: 116px; }
  .ws { order: 1; margin-left: auto; }
  .bar > .tag { order: 2; flex-basis: 100%; margin-left: 0; text-align: left; }
  .ws-menu { position: fixed; left: 8px; right: 8px; top: 72px; width: auto; }
}

/* Desktop hero: the model sits to the right, clear of the headline. The control card stays centred. */
@media (min-width: 900px) {
  .stage .hero-viewer,
  .stage .shadow,
  .stage .hero-cap { align-self: flex-end; margin-right: clamp(0px, 7vw, 140px); }
}

/* Selector rail: one dropdown per control group. The card design is stashed behind ?selector=card. */
.card.controls[data-selector="rail"] { width: auto; max-width: 100%; padding: 8px; border-radius: 999px; display: block; }
.card.controls[data-selector="rail"] > .row { display: none; }
.card.controls[data-selector="card"] > .rail { display: none; }
.rail { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rail-dd { position: relative; }
.rail-dd[hidden] { display: none; }
.rail-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px 6px 16px; border: 0; border-radius: 999px; background: var(--pill); color: var(--fg); font: inherit; font-size: .9rem; cursor: pointer; }
.rail-btn:hover { filter: brightness(.97); }
.rail-btn[aria-expanded="true"] { background: var(--sel); color: var(--sel-fg); }
.rail-lbl { font: .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.rail-btn[aria-expanded="true"] .rail-lbl { color: inherit; opacity: .8; }
.rail-val { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.rail-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.rail-dot[hidden] { display: none; }
.rail-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.rail-menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 100%; margin: 0; padding: 6px; list-style: none; background: var(--card); border-radius: 18px; box-shadow: 0 1px 0 var(--faint), 0 18px 40px -18px var(--shadow); max-height: 16rem; overflow: auto; }
.rail-menu[hidden] { display: none; }
.rail-menu li { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 12px; font-size: .9rem; cursor: pointer; white-space: nowrap; outline: none; }
.rail-menu li:hover, .rail-menu li:focus-visible { background: var(--pill); }
.rail-menu li[aria-selected="true"] { background: var(--sel); color: var(--sel-fg); }
@media (max-width: 640px) { .card.controls[data-selector="rail"] { border-radius: 24px; } .rail-dd { flex: 1 1 calc(50% - 6px); } .rail-btn { width: 100%; justify-content: space-between; } }

/* Section links live in the top bar. */
.hero-cap[hidden] { display: none; }
.top-nav { display: flex; flex-wrap: nowrap; gap: 4px 22px; margin-left: clamp(16px, 3vw, 48px); }
.top-nav a { font: .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-decoration: none; padding: 8px 0; white-space: nowrap; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--fg); text-decoration: underline; }
@media (max-width: 1180px) { .bar > .tag { display: none; } .ws { margin-left: auto; } }
@media (max-width: 700px) {
  .top-nav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; gap: 18px; padding-bottom: 2px; }
  .bar > .tag { display: none; }
}

/* ==== Library browser (Live gallery): list on the left, tiles on the right. Logic: libraries.js ==== */
.lb-intro { max-width: 40rem; }
.lb-intro .sub { margin: 1.2em 0 0; }
.lb { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 24px 56px; margin-top: 3.5rem; align-items: start; }
.lb-navwrap { position: sticky; top: 24px; min-width: 0; }
.lb-group { margin: 0 0 26px; }
.lb-gh { display: block; font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin: 0 0 8px 14px; }
.lb-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 12px; border-left: 2px solid var(--faint); color: var(--muted); font: .74rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: padding .16s ease, color .16s ease, border-color .16s ease; user-select: none; }
.lb-opt:hover { color: var(--fg); border-left-color: var(--muted); }
.lb-opt:focus-visible { outline: 3px solid var(--focus); outline-offset: -1px; border-radius: 4px; }
.lb-opt.is-on, .lb-opt[aria-selected="true"] { color: var(--accent); border-left-color: var(--accent); padding-left: 20px; font-weight: 600; }
.lb-n { font: .62rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); padding: 3px 7px; border: 1px solid var(--faint); border-radius: 999px; font-variant-numeric: tabular-nums; }
.lb-opt[aria-selected="true"] .lb-n { color: var(--accent); border-color: currentColor; }

.lb-main { min-width: 0; min-height: 560px; }
.lb-body { transition: opacity .14s ease; }
.lb-body.is-out { opacity: 0; }
.lb-titlerow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.lb-badge { font-variant-numeric: tabular-nums; }
.lb-logo { display: block; height: 34px; width: auto; margin-left: auto; }
.lb-logo[hidden], .lb-note[hidden], .lb-tintwrap[hidden], .lb-detail[hidden] { display: none; }
.lb-desc { margin: .7em 0 0; color: var(--muted); max-width: 42rem; }
.lb-note { margin: .8em 0 0; max-width: 42rem; font: .66rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-left: 12px; border-left: 2px dashed var(--faint); }
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 24px 0 20px; padding: 14px 0; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.lb-tintwrap { display: flex; align-items: center; gap: 12px; }
.lb-tintwrap .swatches { gap: 4px; }
.swatch-own { background: conic-gradient(#ff7a59, #ffd23f, #5ec27a, #4aa8ff, #b583ff, #ff7eb6, #ff7a59); }
.lb-searchwrap { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; justify-content: flex-end; min-width: 0; }
.lb-search { font: .74rem/1 var(--mono); letter-spacing: .04em; min-height: 40px; width: min(280px, 100%); padding: 0 16px; border-radius: 999px; border: 1px solid var(--faint); background: var(--card); color: var(--fg); }
.lb-search::placeholder { color: var(--muted); }
.lb-search:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb-status { font: .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); white-space: nowrap; min-width: 4.5em; }
.lb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 16px 12px; }
.lb-grid .tile { width: auto; }
.lb-grid .tile[hidden] { display: none; }
.lb-grid .tile button { padding: 8px 6px 10px; width: auto; border-radius: 18px; transition: background .15s ease; }
.lb-grid .tile button:hover { background: rgba(31, 42, 34, .04); }
.lb-grid .tile button[aria-pressed="true"] { background: var(--pill); }
.lb-grid .tile button[aria-pressed="true"] .nm { color: var(--accent); font-weight: 700; }
.lb-grid .tile .nm, .lb-grid .tile .sp { overflow-wrap: anywhere; }
.lb-grid .hint-note { grid-column: 1 / -1; }
.lb-lines { position: absolute; left: 50%; transform: translateX(-50%); height: auto; pointer-events: none; transform-origin: 50% 100%; overflow: visible; }

.lb-detail { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px 24px; align-items: center; background: var(--card); border-radius: 28px; padding: 16px 24px 16px 16px; margin: 0 0 22px; box-shadow: 0 1px 0 var(--faint), 0 18px 40px -28px var(--shadow); }
.lb-dv { aspect-ratio: 1; border-radius: 20px; background: var(--bg); }
.lb-dt { min-width: 0; }
.lb-dt h4 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.lb-dmeta { margin: .35em 0 .8em; font: .66rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.lb-mats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; }
.lb-mats[hidden] { display: none; }
.lb-mat { display: inline-flex; align-items: center; gap: 6px; font: .62rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lb-mat i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.lb-mat-clay { background: conic-gradient(#ff7a59, #ffd23f, #5ec27a, #4aa8ff, #b583ff, #ff7eb6, #ff7a59); }
.lb-chips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chips:empty { display: none; }
.lb-chips li { font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 4px 9px; border: 1px solid var(--faint); border-radius: 999px; color: var(--muted); }
.lb-path { margin: 0 0 12px; }
.lb-path code { font-size: .72rem; }
.lb-dact { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-dact .pill[hidden] { display: none; }

@media (max-width: 900px) {
  .lb { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 2.5rem; }
  .lb-navwrap { position: static; margin: 0 calc(-1 * var(--gutter)); }
  .lb-nav { display: flex; align-items: center; gap: 6px 4px; overflow-x: auto; padding: 4px var(--gutter) 8px; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - 36px), transparent 100%); }
  .lb-nav::-webkit-scrollbar { display: none; }
  .lb-group { display: flex; align-items: center; gap: 6px; margin: 0 14px 0 0; flex: none; }
  .lb-gh { margin: 0 2px 0 0; font-size: .58rem; letter-spacing: .16em; }
  .lb-opt { flex: none; gap: 8px; align-items: center; padding: 9px 12px; min-height: 40px; border-left: 0; border-radius: 999px; background: var(--pill); white-space: nowrap; }
  .lb-opt:hover { background: var(--pill); }
  .lb-opt.is-on, .lb-opt[aria-selected="true"] { background: var(--sel); color: var(--sel-fg); padding-left: 12px; }
  .lb-opt[aria-selected="true"] .lb-n { color: var(--sel-fg); }
  .lb-main { min-height: 0; }
}
@media (max-width: 700px) {
  .lb-searchwrap { justify-content: space-between; flex-basis: 100%; }
  .lb-search { width: auto; flex: 1 1 auto; }
  .lb-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 8px; }
  .lb-detail { grid-template-columns: minmax(0, 1fr); padding: 16px; justify-items: stretch; }
  .lb-dv { width: min(180px, 100%); justify-self: center; }
}

/* Desktop: the selector rail sits directly under the model, centred on it. */
@media (min-width: 900px) {
  .stage { --model-w: clamp(260px, 48svh, 560px); }
  .stage .card.controls { align-self: flex-end; margin-right: clamp(0px, 7vw, 140px); width: max-content; } /* main.js alignRail() centres it on the model */
}
.lb-dact .pill { text-transform: none; }
.lb-path code { word-break: break-all; }

/* Large screens: the headline keeps growing and its column widens so it still sets in two or three lines. */
@media (min-width: 900px) {
  .hero-copy { max-width: min(48vw, 70rem); }
}

/* Main models can be turned with the cursor (see spin.js). */
.spinnable { cursor: grab; touch-action: pan-y; }
.spinnable.spinning { cursor: grabbing; }
.spinnable:focus-visible { outline: 2px solid var(--focus, #2f6fd6); outline-offset: 4px; border-radius: 12px; }

/* Contact call to action */
.cta-row { margin: 1.4em 0 .8em; }
.cta { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--sel); color: var(--sel-fg); font: .74rem/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; text-decoration: none; }
.cta:hover, .cta:focus-visible { filter: brightness(1.12); }

/* Custom scroll bar for the page itself and for scrolling boxes (chat, menus). */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sel, #1d1d1b) 55%, transparent) var(--bg); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sel, #1d1d1b) 45%, transparent); border: 3px solid var(--bg); border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: var(--sel, #1d1d1b); }
.rail-menu, .ws-menu, .lb-body, pre { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sel, #1d1d1b) 50%, transparent) transparent; }
.rail-menu::-webkit-scrollbar, .ws-menu::-webkit-scrollbar, pre::-webkit-scrollbar { width: 8px; height: 8px; }
.rail-menu::-webkit-scrollbar-thumb, .ws-menu::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--sel, #1d1d1b) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.rail-menu::-webkit-scrollbar-track, .ws-menu::-webkit-scrollbar-track, pre::-webkit-scrollbar-track { background: transparent; }
.lead strong { color: var(--fg); font-weight: 700; }

/* Page nav: shrink and scroll inside its own box instead of pushing the page wider. */
@media (min-width: 701px) { .top-nav { min-width: 0; overflow-x: auto; scrollbar-width: none; } .top-nav::-webkit-scrollbar { display: none; } }

/* Five dropdowns are wider than the stage on mid-size screens: tighten them there. */
@media (min-width: 900px) and (max-width: 1700px) {
  .rail { gap: 4px; }
  .rail-btn { gap: 7px; padding: 6px 10px 6px 12px; font-size: .82rem; }
  .rail-lbl { font-size: .58rem; letter-spacing: .1em; }
}

/* Bubble-letter logo in the header; the earlier text wordmark moved to the footer. */
.brand-bubble { display: inline-flex; align-items: center; line-height: 0; }
.brand-bubble img { display: block; height: clamp(40px, 3.4vw, 52px); width: auto; }
.brand-old { display: inline-block; margin-bottom: .6rem; font-size: 1.2rem; }

/* 3D header logo (site/logo3d.js). The canvas covers the SVG's box plus room for the pop overshoot;
   the flat <img> is hidden only once the first 3D frame is drawn. */
.brand-bubble { position: relative; }
.brand-bubble canvas.logo3d { position: absolute; left: -13.4%; top: -25.4%; width: 126.8%; height: 150.8%; pointer-events: none; visibility: hidden; }
.brand-bubble.is-3d canvas.logo3d { visibility: visible; }
.brand-bubble.is-3d img { visibility: hidden; }

/* The open dropdown must sit above the carousel tiles below it. */
.card.controls { position: relative; z-index: 40; }

/* ---- Works-with logo rail (monochrome, calm) ---- */
.ww-rail-wrap { padding-bottom: 20px; }
.ww-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); padding: 6px 0; min-height: 56px; }
.ww-lbl { font: .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--fg); flex: none; }
.ww-scroll { flex: 1 1 0; min-width: 0; }
.ww-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; }
.ww-item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 10px; color: rgba(29,29,27,.6); text-decoration: none; font: 600 .86rem/1 var(--sans); letter-spacing: -.005em; white-space: nowrap; scroll-snap-align: start; transition: color .15s; }
.ww-item:hover, .ww-item:focus-visible { color: #1d1d1b; }
.ww-item.plan { color: rgba(29,29,27,.42); }
.ww-item.plan:hover, .ww-item.plan:focus-visible { color: rgba(29,29,27,.85); }
.ww-mark { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ww-mark.ww-svg { background: none; -webkit-mask: none; mask: none; }
.ww-item:has(.ww-mark:first-child) .ww-name { font-weight: 600; }
.ww-item:not(:has(.ww-mark)) .ww-name { font-family: var(--mono); font-size: .76rem; font-weight: 500; }
.ww-tag { font: .52rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: inherit; opacity: .8; border: 1px solid currentColor; border-radius: 999px; padding: 2px 5px; }
.ww-item.ok .ww-tag { background: #1d1d1b; color: #fff; border-color: #1d1d1b; opacity: 1; }
.ww-fine { flex: 1 0 100%; margin: 0; font: .68rem/1.3 var(--sans); color: var(--muted); text-align: center; }
@media (max-width: 1240px) {
  .ww-rail { display: block; padding: 10px 0 8px; }
  .ww-lbl { display: block; margin-bottom: 4px; }
  .ww-scroll { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .ww-scroll::-webkit-scrollbar { display: none; }
  .ww-list { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
  .ww-fine { text-align: left; margin-top: 4px; }
}
/* works-with rail: stack status tag under the name so the row stays single-line */
.ww-item { display: grid; grid-template-columns: auto auto; grid-template-areas: "mark name" "mark tag"; column-gap: 7px; row-gap: 3px; align-items: center; justify-items: start; }
.ww-item:not(:has(.ww-mark)) { grid-template-columns: auto; grid-template-areas: "name" "tag"; }
.ww-item .ww-mark { grid-area: mark; }
.ww-item .ww-name { grid-area: name; line-height: 1; }
.ww-item .ww-tag { grid-area: tag; }
.ww-list { gap: 0 4px; }
@media (max-width: 700px) { .ww-item { padding: 6px 8px; } }

/* Works-with rail: logos only, no labels, tags or captions. */
.ww-rail.ww-logos { border: 0; display: flex; justify-content: center; align-items: center; gap: clamp(28px, 5vw, 64px); padding: 14px 0; min-height: 0; }
.ww-logo { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; border-radius: 10px; color: rgba(29, 29, 27, .55); text-decoration: none; }
.ww-logo:hover, .ww-logo:focus-visible { color: #1d1d1b; }
.ww-logo .ww-mark { width: 34px; height: 34px; }
@media (max-width: 700px) { .ww-rail.ww-logos { gap: 24px; } .ww-logo .ww-mark { width: 30px; height: 30px; } }

/* tech- : "Built with" technology logo rail */
.tech-band { padding: 8px 0 22px; }
.tech-rail { display: flex; align-items: center; gap: 12px 28px; }
.tech-lbl { font: .72rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--fg); flex: none; }
.tech-scroll { flex: 1 1 0; min-width: 0; }
.tech-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.tech-list li { flex: none; scroll-snap-align: start; }
.tech-logo { display: inline-flex; align-items: center; height: 36px; padding: 0 3px; color: rgba(29, 29, 27, .58); text-decoration: none; border-radius: 6px; transition: color .15s; }
.tech-logo:hover, .tech-logo:focus-visible { color: #1d1d1b; }
.tech-mark { display: block; width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tech-kosmos .tech-mark { width: 104px; height: 21px; }
.tech-fine { color: var(--muted); font-size: .72rem; }
@media (max-width: 900px) {
  .tech-rail { display: block; }
  .tech-lbl { display: block; margin-bottom: 4px; }
  .tech-scroll { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .tech-scroll::-webkit-scrollbar { display: none; }
  .tech-list { flex-wrap: nowrap; width: max-content; padding-right: 36px; }
}

/* Works-with rail v3: label + ten logos, compact, monochrome */
.ww-rail-wrap { padding-bottom: 0; }
.ww-rail.ww-logos { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 22px; padding: 6px 0; margin: 0; min-height: 0; }
.ww-rail.ww-logos .ww-lbl { margin: 0 4px 0 0; white-space: nowrap; color: var(--muted); }
.ww-rail.ww-logos .ww-logo { flex: none; padding: 4px 0; border-radius: 6px; color: rgba(29, 29, 27, .6); scroll-snap-align: start; transition: color .15s, opacity .15s; }
.ww-rail.ww-logos .ww-logo:hover, .ww-rail.ww-logos .ww-logo:focus-visible { color: #1d1d1b; }
.ww-rail.ww-logos .ww-mark { width: 32px; height: 32px; }
.ww-rail.ww-logos .ww-wide .ww-mark { width: 64px; height: 24px; }
.ww-rail.ww-logos .ww-img, .ww-rail.ww-logos .ww-glyph { display: block; height: 32px; width: auto; max-width: 64px; }
.ww-rail.ww-logos .ww-glyph { width: 32px; }
.ww-rail.ww-logos .ww-img { filter: grayscale(1); opacity: .6; transition: opacity .15s; }
.ww-rail.ww-logos .ww-logo:hover .ww-img, .ww-rail.ww-logos .ww-logo:focus-visible .ww-img { opacity: 1; }
.ww-rail.ww-logos .ww-logo:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.ww-rail-wrap + .roster-wrap { margin-top: 0; }
@media (max-width: 900px) {
  .ww-rail.ww-logos { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .ww-rail.ww-logos::-webkit-scrollbar { display: none; }
  .ww-rail.ww-logos .ww-lbl { display: inline-block; margin: 0 4px 0 0; scroll-snap-align: start; }
}

/* Works-with rail now sits under the character carousel, with room above and below. */
.ww-rail-wrap { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(32px, 5vw, 64px); }
.ww-rail-wrap + .roster-wrap { margin-top: 0; }
.roster-wrap + .ww-rail-wrap { margin-top: 0; }

/* ---- Effect dropdown: multi-select checkmark list (rail.js group flag multi). State is the check + bold label;
   the dark pill is for hover / keyboard focus only. ---- */
.rail-menu[aria-multiselectable="true"] li { gap: 8px; padding-left: 8px; }
.rail-menu[aria-multiselectable="true"] li[aria-selected="true"] { background: none; color: inherit; font-weight: 650; }
.rail-menu[aria-multiselectable="true"] li:hover,
.rail-menu[aria-multiselectable="true"] li:focus-visible { background: var(--sel); color: var(--sel-fg); }
.rail-check { flex: none; width: 16px; height: 16px; position: relative; }
.rail-menu li[aria-selected="true"] > .rail-check::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.rail-menu li.rail-clear { margin-top: 4px; padding-left: 12px; font-size: .84rem; color: var(--muted); border-top: 1px solid var(--faint); border-radius: 0 0 12px 12px; }
.rail-menu li.rail-clear:hover, .rail-menu li.rail-clear:focus-visible { color: var(--sel-fg); border-radius: 12px; }
.rail-menu li.rail-clear[aria-disabled="true"] { opacity: .45; }
.rail-text { white-space: nowrap; }
@media (max-width: 640px) { .rail-dd:has(.rail-menu[aria-multiselectable="true"]) .rail-btn { gap: 6px; padding-right: 10px; } .rail-dd .rail-val { min-width: 0; } }

/* Accessory rail row: slot headings inside the multi-select menu */
.rail-menu li.rail-head { cursor: default; padding: 10px 12px 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .55; pointer-events: none; }
.rail-menu li.rail-head:hover { background: none; }