@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Theme: light or dark follows the device. Everything tinted derives from --seed, the
   average color of a block (from blocks.json). Changing it = update --seed here and the
   fallback block below. */
:root {
  --seed: #c75b17; /* orange poplar leaves (Wilderness Bound, 26.3). Back to blue ice #75a8fd for 26.4. */

  --accent: oklch(from var(--seed) .52 clamp(.07, c, .15) h);
  --on-accent: #fff;
  --bg: oklch(from var(--seed) .965 .006 h);
  --panel: oklch(from var(--seed) .995 .002 h);
  --raised: oklch(from var(--seed) .978 .004 h);
  --control: oklch(from var(--seed) .985 .003 h);
  --panel-border: oklch(from var(--seed) .905 .008 h);
  --control-border: oklch(from var(--seed) .84 .01 h);
  --text: #1b1b1f;
  --muted: #5f5d66;
  --faint: #7d7b84;
  --warn: #a15c07;
  --error: #dc2626;
  --shadow: 0 1px 2px rgb(30 25 15 / .06), 0 8px 24px -8px rgb(30 25 15 / .12);
  --shadow-hi: 0 2px 4px rgb(30 25 15 / .06), 0 18px 36px -12px rgb(30 25 15 / .22);
  --scrim: rgb(20 20 24 / .35);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-drawer: cubic-bezier(.34, 1.25, .64, 1);
  --enter: cubic-bezier(.22, 1, .36, 1);
  --head: 'IBM Plex Sans', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --c: var(--accent);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: oklch(from var(--seed) .78 clamp(.07, c, .14) h);
    --on-accent: oklch(from var(--seed) .2 .03 h);
    --bg: oklch(from var(--seed) .175 .012 h);
    --panel: oklch(from var(--seed) .215 .014 h);
    --raised: oklch(from var(--seed) .195 .013 h);
    --control: oklch(from var(--seed) .195 .013 h);
    --panel-border: oklch(from var(--seed) .285 .016 h);
    --control-border: oklch(from var(--seed) .35 .018 h);
    --text: oklch(from var(--seed) .95 .006 h);
    --muted: oklch(from var(--seed) .74 .014 h);
    --faint: oklch(from var(--seed) .6 .014 h);
    --warn: #fbbf24;
    --error: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -8px rgb(0 0 0 / .5);
    --shadow-hi: 0 2px 4px rgb(0 0 0 / .4), 0 18px 40px -12px rgb(0 0 0 / .7);
    --scrim: rgb(0 0 0 / .55);
  }
}
/* Browsers without relative color syntax get fixed values for the current seed. */
@supports not (color: oklch(from red l c h)) {
  :root { --accent: #ab4500; --bg: #f7f2f0; --panel: #fffdfc; --raised: #faf7f5; --control: #fcf9f8;
    --panel-border: #e4dedb; --control-border: #d0c9c5; }
  @media (prefers-color-scheme: dark) {
    :root { --accent: #ff9965; --on-accent: #21120a; --bg: #150f0c; --panel: #1f1814; --raised: #1a1310;
      --control: #1a1310; --panel-border: #312823; --control-border: #433833;
      --text: #f2edeb; --muted: #b3a8a3; --faint: #887e79; }
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; padding-left: 72px;
  background: var(--bg); color: var(--text);
  font: 16px/1.55 var(--body);
}
h1, h2, h3 { font-family: var(--head); line-height: 1.15; margin: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Page content glides up while fading in. */
main {
  max-width: 1000px; margin: 0 auto; padding: 48px 32px 72px;
  animation: enter .55s var(--enter) both;
}
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }

/* Line icons (24px grid), injected by shell.js. */
svg.ic {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--spring), color .2s;
}

/* Tool page header and panels. */
.head h1 { display: flex; align-items: center; gap: 14px; font-size: clamp(30px, 4vw, 40px); font-weight: 700; letter-spacing: -.025em; }
.head h1 svg.ic { width: 30px; height: 30px; stroke-width: 1.6; color: var(--accent); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.crumbs .btn { grid-auto-flow: column; gap: 8px; height: 36px; padding: 0 12px; font-size: 13px; }
.crumbs svg.ic { width: 16px; height: 16px; }
.crumbs .btn:hover .arr { transform: translateX(-3px); }
.head p { margin: 10px 0 0; color: var(--muted); max-width: 60ch; }
.panel {
  margin-top: 24px; padding: 22px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow);
}
.label { font: 500 12px var(--mono); color: var(--muted); }

/* Buttons lift on hover and squish on press. */
.btn {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px;
  background: var(--panel); border: 1px solid var(--control-border); border-radius: 10px;
  color: var(--text); font: 600 14px var(--body); text-decoration: none; cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }
.btn:active { transform: scale(.93); }
.btn.primary { background: var(--text); color: var(--bg); border-color: transparent; }
.btn .arr { transition: transform .25s var(--spring); }
.btn:hover .arr { transform: translateX(3px); }

.tag { font: 12px var(--mono); color: var(--faint); }

/* Icon rail */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 10; width: 72px; padding: 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px; overflow-y: auto;
  background: var(--raised); border-right: 1px solid var(--panel-border);
}
.rail-list { position: relative; display: flex; flex-direction: column; gap: 6px; }
.dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
a.dot:hover { color: var(--text); }
.dot[aria-current] { color: var(--accent); }
a.dot:hover svg.ic, a.entry:hover svg.ic { transform: scale(1.15) rotate(-6deg); }
a.dot:active svg.ic { transform: scale(.93); }
.dot.soon { opacity: .4; }

/* Sliding highlights (rail and drawer) */
.hl {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: transform .3s var(--spring), opacity .2s;
}

/* Drawer */
.scrim {
  position: fixed; inset: 0; z-index: 20; background: var(--scrim);
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 312px; max-width: 86vw;
  padding: 18px 14px; overflow-y: auto;
  background: var(--raised); border-right: 1px solid var(--panel-border); box-shadow: var(--shadow-hi);
  transform: translateX(-110%); visibility: hidden;
  transition: transform .6s var(--spring-drawer), visibility 0s .6s;
}
.drawer::before { /* covers the gap when the spring overshoots */
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 40px; background: var(--raised);
}
.drawer-open .scrim { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; visibility: visible; transition-delay: 0s; }
.drawer header { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 14px; }
.drawer header a { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; font-size: 18px; text-decoration: none; }
.drawer-list { position: relative; }
.drawer-list h2 { padding: 16px 12px 6px; font: 500 12px var(--mono); color: var(--faint); }
.entry {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.entry svg.ic { color: var(--muted); }
.entry[aria-current] svg.ic { color: var(--accent); }
.entry.soon { color: var(--faint); }
.entry.soon svg.ic { opacity: .6; }
.entry .tag { margin-left: auto; }

/* Crane rook logo: the crane loops forever, lifting its block, carrying it in along the
   jib, setting it down, then carrying it back out. Cable shortens as the hook rises. */
.logo { height: 34px; width: auto; flex: none; color: var(--text); overflow: visible; }
.logo .trolley, .logo .hook, .logo .cable { animation: 6s ease-in-out infinite; }
.logo .trolley { animation-name: crane-x; }
.logo .hook { animation-name: crane-y; }
.logo .cable { animation-name: crane-cable; transform-box: fill-box; transform-origin: top; }
@keyframes crane-x { 0%, 15% { transform: none; } 35%, 72% { transform: translateX(-48px); } 88%, 100% { transform: none; } }
@keyframes crane-y { 0%, 50%, 60%, 100% { transform: none; } 15%, 35%, 72%, 88% { transform: translateY(-40px); } }
@keyframes crane-cable { 0%, 50%, 60%, 100% { transform: none; } 15%, 35%, 72%, 88% { transform: scaleY(.574); } }

/* Wordmark: "R00K" in mono and the accent color, as in the logo. */
.wordmark b { font: inherit; font-family: var(--mono); font-weight: 700; color: var(--accent); }

/* Tool lists (home and hub pages): one hover highlight springs from row to row. */
.in { animation: enter .55s var(--enter) both; animation-delay: calc(var(--i) * 60ms); }
.tools-h { margin: 36px 0 10px 4px; font: 500 13px var(--mono); color: var(--muted); }
.tools { position: relative; margin: 0; padding: 6px; }
.tools .hl { left: 6px; right: 6px; height: 56px; border-radius: 10px; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 0; }
.tools:hover .hl { opacity: 1; }
.trow {
  position: relative; display: grid; grid-template-columns: 22px 170px 1fr auto; gap: 14px; align-items: center;
  height: 56px; padding: 0 14px; border-radius: 10px; color: var(--text); text-decoration: none;
}
.trow svg.ic { color: var(--muted); }
a.trow:hover svg.ic { transform: scale(1.15) rotate(-6deg); color: var(--accent); }
a.trow:active { transform: scale(.98); transition: transform .15s var(--spring); }
.trow b { font-weight: 600; }
.trow span { color: var(--muted); font-size: 15px; }
.trow small { font: 12px var(--mono); color: var(--faint); }
a.trow small { color: var(--text); transition: transform .25s var(--spring); }
a.trow:hover small { transform: translateX(-3px); }
.trow.soon b, .trow.soon svg.ic { opacity: .5; }
.head + .tools { margin-top: 28px; }
@media (max-width: 640px) {
  .trow { grid-template-columns: 20px 1fr auto; }
  .trow span { display: none; }
}

/* Copy: morphs into a checkmark. */
.copy { position: relative; gap: 8px; grid-auto-flow: column; }
.copy svg { width: 16px; height: 16px; }
.copy .ok { display: none; color: var(--accent); }
.copy.done { border-color: var(--accent); }
.copy.done .ok { display: block; animation: pop .35s var(--spring); }
.copy.done .ic { display: none; }
@keyframes pop { from { transform: scale(.3) rotate(-30deg); } }

@media (max-width: 640px) {
  main { padding: 28px 16px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Tool controls shared by the color tools: view pill, color + hex, chips, result tiles. */
/* Top / Side pill: the highlight springs between the two halves. */
.view {
  grid-column: 1 / -1; justify-self: start; position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 12px; background: var(--control); border: 1px solid var(--control-border);
}
.view-hl {
  position: absolute; inset: 4px auto 4px 4px; width: calc(50% - 4px); border-radius: 8px;
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  transition: transform .3s var(--spring);
}
.view:has([value=s]:checked) .view-hl { transform: translateX(100%); }
.view label { position: relative; cursor: pointer; }
.view input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.view span {
  display: flex; align-items: baseline; justify-content: center; gap: 6px; height: 36px; line-height: 36px; padding: 0 20px;
  color: var(--muted); font-weight: 500; font-size: 14px; transition: color .2s, transform .2s var(--spring);
}
.view small { color: var(--faint); font: 11px var(--mono); }
.view input:checked + span { color: var(--text); }
.view label:active span { transform: scale(.93); }
.view input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.color { display: grid; gap: 8px; }
.color div { display: flex; gap: 8px; }
.color input[type=color] {
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--control-border); border-radius: 10px;
  background: none; cursor: pointer; transition: transform .2s var(--spring);
}
.color input[type=color]::-webkit-color-swatch-wrapper { padding: 4px; }
.color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.color input[type=color]::-moz-color-swatch { border: 0; border-radius: 8px; }
.color input[type=color]:hover { transform: translateY(-2px); }
.color input[type=color]:active { transform: scale(.93); }
.hex {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border-radius: 10px;
  background: var(--control); border: 1px solid var(--control-border); color: var(--text);
  font: 500 14px var(--mono); text-transform: lowercase;
}
.hex:invalid { border-color: var(--error); }

input[type=range] { accent-color: var(--c); width: 100%; }

.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px;
  background: var(--control); border: 1px solid var(--control-border); color: var(--muted); font-size: 13px; font-weight: 500;
  transition: transform .2s var(--spring), background .2s, border-color .2s, color .2s;
}
.chip span::before {
  content: ''; width: 8px; height: 8px; border-radius: 2px; border: 1.5px solid var(--faint);
  transition: transform .25s var(--spring), background .2s, border-color .2s;
}
.chip:hover span { transform: translateY(-2px); }
.chip:active span { transform: scale(.93); }
.chip input:checked + span {
  color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--control));
  border-color: color-mix(in srgb, var(--c) 50%, transparent);
}
.chip input:checked + span::before { background: var(--c); border-color: var(--c); transform: scale(1.2); animation: dot-pop .4s var(--spring); }
.chip input:checked + span { animation: chip-pop .35s var(--spring); }
@keyframes dot-pop { 0% { transform: scale(.2); } 50% { transform: scale(1.9); } }
@keyframes chip-pop { 40% { transform: scale(1.08); } }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.row { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 10px; }
.row li { min-width: 0; animation: drop .45s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
.row li.same { animation: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-18px) scale(.85); } }
.tile {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: var(--hex); box-shadow: 0 6px 0 -2px rgb(0 0 0 / .25);
  transition: transform .25s var(--spring);
}
.tile.tex { background: var(--hex) var(--tex) top / 100% auto; image-rendering: pixelated; }
.pick { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 10px; }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pick:hover .tile { transform: translateY(-4px); }
.pick:active .tile { transform: scale(.9); transition-duration: .1s; }
.pick.hop .tile { animation: hop .5s var(--spring); }
@keyframes hop { 35% { transform: translateY(-14px) scale(1.08) rotate(-4deg); } 70% { transform: translateY(0) scale(.96, 1.04); } }
.pick.copied small { color: var(--accent); }
.row b { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.row small { display: block; color: var(--faint); font: 11px var(--mono); overflow-wrap: anywhere; }
.empty { margin: 18px 0 0; color: var(--muted); }
.meta { margin-top: 14px; color: var(--faint); font: 12px var(--mono); }
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; }
.filters legend { padding: 0; margin-bottom: 10px; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.result-head .label { margin-right: auto; }
/* Dye swatches (banner, fireworks): <div class="dyes"> of <button class="dye" style="--hex">.
   Picked with aria-checked (pick one) or aria-pressed (pick several). */
.dyes { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 8px; }
.dye {
  width: 36px; height: 36px; padding: 0; border-radius: 10px; cursor: pointer; background: var(--hex);
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); box-shadow: 0 4px 0 -1px rgb(0 0 0 / .22);
  transition: transform .2s var(--spring), box-shadow .2s, opacity .2s;
}
.dye:hover { transform: translateY(-3px); }
.dye:active { transform: scale(.93); }
.dye[aria-checked=true], .dye[aria-pressed=true] {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); animation: chip-pop .35s var(--spring);
}
.dye:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.dye:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Coordinate fieldsets: <fieldset class="side"><legend> + .xyz labels with inputs. */
.side {
  margin: 0; padding: 16px; border-radius: 12px; min-width: 0;
  background: var(--raised); border: 1px solid var(--panel-border);
}
.side legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font: 600 15px var(--head); }
.xyz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; clear: both; }
.xyz label { display: grid; gap: 6px; min-width: 0; }
.xyz input {
  width: 100%; height: 44px; padding: 0 12px; border-radius: 10px;
  background: var(--control); border: 1px solid var(--control-border); color: var(--text);
  font: 500 15px var(--mono); transition: border-color .2s;
}
.xyz input:focus { border-color: var(--c); outline: none; }
.xyz input:invalid { border-color: var(--error); }
.xyz input.tick { animation: tick .3s var(--spring); }
@keyframes tick { 40% { transform: translateY(-3px); color: var(--c); } }
/* Build command panel (shared/build.js) */
.build-help { margin: 12px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }
.build-help code, .meta code { font: 13px var(--mono); color: var(--text); }
.build-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* Load jar panel (shared/jar.js) */
.jar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jar p { margin: 0; flex: 1 1 280px; color: var(--muted); font-size: 13px; }
.jar input { display: none; }
/* Substitute picker (shared/swap.js): pops from the clicked block, options drop in one by one. */
.swap-pop {
  position: absolute; z-index: 40; width: min(320px, calc(100vw - 16px)); padding: 10px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--shadow-hi);
  animation: pop-in .3s var(--spring) both;
}
.swap-pop.out { animation: pop-out .15s ease-in both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.85) translateY(-6px); } }
@keyframes pop-out { to { opacity: 0; transform: scale(.92); } }
.swap-pop .tile { display: block; width: 32px; height: 32px; flex: none; border-radius: 7px; box-shadow: 0 3px 0 -1px rgb(0 0 0 / .25); }
.swap-pop header, .swap-list button { display: flex; align-items: center; gap: 12px; }
.swap-pop header { padding: 4px 6px 10px; border-bottom: 1px solid var(--panel-border); }
.swap-pop b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.swap-pop small { display: block; color: var(--faint); font: 11px var(--mono); overflow-wrap: anywhere; }
.swap-list { display: grid; margin-top: 6px; max-height: 50vh; overflow-y: auto; }
.swap-list button {
  all: unset; display: flex; gap: 12px; padding: 7px 6px; border-radius: 10px; cursor: pointer; text-align: left;
  animation: drop .35s var(--spring) both; animation-delay: calc(var(--i) * 35ms);
  transition: background .15s, transform .2s var(--spring);
}
.swap-list button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.swap-list button:hover .tile { transform: translateY(-2px) rotate(-4deg); }
.swap-list button:active { transform: scale(.96); }
.swap-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.swap-pop footer { display: flex; gap: 8px; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--panel-border); }
.swap-pop footer .btn { flex: 1; height: 38px; font-size: 13px; }
/* A tile the visitor swapped by hand. */
.swapped .tile { outline: 2px dashed var(--accent); outline-offset: 3px; }