/* Tumblewood: the artifact.
   A found object, not AppZoo: a woodshop plan sheet on sawdust paper, in pencil ink, with a cherry Race button.
   Its one nod to the Zoo is its title, set in Ultra.
   Scope: every selector sits under [data-artifact="tumblewood"], so nothing reaches the cabinet around it.
   Colour literals live only in the palette blocks below (decisions/028). */

[data-artifact="tumblewood"] {
  --tw-sheet: #efe4cd;          /* sawdust paper */
  --tw-raised: #f8f1e2;
  --tw-pencil: #2b2620;         /* text, outlines */
  --tw-soft: #5e5346;
  --tw-walnut: #4a3222;         /* heavy accents */
  --tw-cherry: #a4442a;         /* the one loud colour: Race */
  --tw-on-cherry: #fbf3e4;
  --tw-felt: #2f5d50;           /* finish tray, success */
  --tw-line: #cdbb98;           /* hairlines */
  --tw-bench: #d9cdb4;          /* the stage behind the bench */
  --tw-link: #7a3320;
  --tw-focus: #2f5d50;
  --tw-m0: #e3bd22; --tw-m1: #3d7a37; --tw-m2: #a3301f; --tw-m3: #2b5e9e; /* the four marbles: Canary, Moss, Brick, Lake */
}
:root[data-theme="dark"] [data-artifact="tumblewood"] {
  --tw-sheet: #16120e; --tw-raised: #201a14; --tw-pencil: #efe3cb; --tw-soft: #b3a48b; --tw-walnut: #e2c08f; --tw-cherry: #e0755a;
  --tw-on-cherry: #16120e; --tw-felt: #7fbfa8; --tw-line: #3e342a; --tw-bench: #0f0c09; --tw-link: #f0b48a; --tw-focus: #7fbfa8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="tumblewood"] {
    --tw-sheet: #16120e; --tw-raised: #201a14; --tw-pencil: #efe3cb; --tw-soft: #b3a48b; --tw-walnut: #e2c08f; --tw-cherry: #e0755a;
    --tw-on-cherry: #16120e; --tw-felt: #7fbfa8; --tw-line: #3e342a; --tw-bench: #0f0c09; --tw-link: #f0b48a; --tw-focus: #7fbfa8;
  }
}

[data-artifact="tumblewood"] {
  --tw-face: "Karla", "Segoe UI", system-ui, sans-serif;
  --tw-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --tw-display: "Ultra", "Rockwell Extra Bold", Georgia, serif; /* the nod: a heavy slab title */

  box-sizing: border-box;
  max-width: 80rem;
  margin: 0 auto var(--space-12);
  padding: var(--space-4);
  background: var(--tw-sheet);
  color: var(--tw-pencil);
  font: 400 1.0625rem/1.55 var(--tw-face);
  border: 2px solid var(--tw-pencil);
}
[data-artifact="tumblewood"] *, [data-artifact="tumblewood"] *::before, [data-artifact="tumblewood"] *::after { box-sizing: border-box; }
@media (min-width: 48rem) {
  [data-artifact="tumblewood"] { padding: var(--space-8); }
}

[data-artifact="tumblewood"] :where(p) { margin: 0 0 var(--space-3); max-width: 68ch; }
[data-artifact="tumblewood"] h2 { margin: var(--space-8) 0 var(--space-3); font: 700 1.375rem/1.2 var(--tw-face); letter-spacing: .04em; text-transform: uppercase; color: var(--tw-walnut); padding-bottom: var(--space-1); border-bottom: 2px solid var(--tw-pencil); }
[data-artifact="tumblewood"] h3 { margin: 0 0 var(--space-2); font: 700 1.125rem/1.3 var(--tw-face); }
[data-artifact="tumblewood"] :where(ul, ol) { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
[data-artifact="tumblewood"] :where(li) { margin-bottom: var(--space-1); }
[data-artifact="tumblewood"] a { color: var(--tw-link); text-underline-offset: 3px; }
[data-artifact="tumblewood"] :focus-visible { outline: 3px solid var(--tw-focus); outline-offset: 2px; }
[data-artifact="tumblewood"] kbd { font: 500 .8125rem/1 var(--tw-mono); padding: 1px 5px; border: 1.5px solid var(--tw-pencil); background: var(--tw-raised); }

[data-artifact="tumblewood"] .tw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); border-bottom: 2px solid var(--tw-pencil); padding-bottom: var(--space-2); margin-bottom: var(--space-3); }
[data-artifact="tumblewood"] .tw-title { margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: .01em; font: 400 clamp(2rem, 4.5vw, 2.75rem)/1 var(--tw-display); color: var(--tw-walnut); }
[data-artifact="tumblewood"] .tw-lede { margin: 0; color: var(--tw-soft); max-width: 62ch; }
[data-artifact="tumblewood"] .tw-plate { font: 500 .75rem/1.4 var(--tw-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tw-soft); }

[data-artifact="tumblewood"] .tw-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 55rem) {
  [data-artifact="tumblewood"] .tw-work { grid-template-columns: minmax(0, 1fr) 18.75rem; align-items: start; }
}
[data-artifact="tumblewood"] .tw-stage { position: relative; min-width: 0; height: clamp(21rem, 64vh, 45rem); overflow: hidden; border: 2px solid var(--tw-pencil); background: var(--tw-bench); touch-action: none; display: grid; place-items: center; padding: var(--space-4); }
[data-artifact="tumblewood"] .tw-stage canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; outline: none; }
[data-artifact="tumblewood"] .tw-intro { max-width: 34rem; background: var(--tw-raised); border: 1.5px solid var(--tw-line); padding: var(--space-4); }
[data-artifact="tumblewood"] .tw-intro p:last-child { margin-bottom: 0; }

[data-artifact="tumblewood"] .tw-side { display: grid; gap: var(--space-3); min-width: 0; }
[data-artifact="tumblewood"] .tw-panel { background: var(--tw-raised); border: 2px solid var(--tw-pencil); padding: var(--space-3); }
[data-artifact="tumblewood"] .tw-panel h2 { margin-top: 0; font-size: 1.0625rem; }
[data-artifact="tumblewood"] .tw-status { margin: 0; min-height: 1.5em; font: 400 .9375rem/1.4 var(--tw-mono); color: var(--tw-soft); }
[data-artifact="tumblewood"] .tw-race { background: var(--tw-cherry); color: var(--tw-on-cherry); border: 2px solid var(--tw-pencil); font: 700 1rem/1 var(--tw-face); padding: .75rem 1rem; min-height: 2.75rem; cursor: pointer; }

[data-artifact="tumblewood"] .tw-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 55rem) {
  [data-artifact="tumblewood"] .tw-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
[data-artifact="tumblewood"] .tw-notes > div { border-top: 2px solid var(--tw-line); padding-top: var(--space-3); }

[data-artifact="tumblewood"] [hidden] { display: none !important; }
[data-artifact="tumblewood"] .tw-message { margin: 0 0 var(--space-3); color: var(--tw-soft); }
[data-artifact="tumblewood"] .tw-message[data-kind="error"] { color: var(--tw-cherry); }
[data-artifact="tumblewood"] .tw-stage canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--tw-focus); }

[data-artifact="tumblewood"] .tw-hud { position: absolute; left: var(--space-2); top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); pointer-events: none; }
[data-artifact="tumblewood"] .tw-chip { font: 500 .8125rem/1 var(--tw-mono); background: var(--tw-raised); color: var(--tw-pencil); border: 1.5px solid var(--tw-pencil); padding: 6px 8px; font-variant-numeric: tabular-nums; }
[data-artifact="tumblewood"] .tw-xray { position: absolute; top: var(--space-2); right: var(--space-2); }
[data-artifact="tumblewood"] .tw-btn.tw-xray[aria-pressed="true"], [data-artifact="tumblewood"] .tw-btn.tw-xray[aria-pressed="true"]:hover { background: var(--tw-pencil); color: var(--tw-sheet); }
[data-artifact="tumblewood"] .tw-btn.tw-xray[aria-pressed="true"] kbd { color: var(--tw-sheet); border-color: var(--tw-sheet); background: transparent; }
[data-artifact="tumblewood"] .tw-hint { position: absolute; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); margin: 0; max-width: 32.5rem; font: 400 .8125rem/1.35 var(--tw-face); color: var(--tw-pencil); background: var(--tw-raised); border: 1px solid var(--tw-line); padding: 6px 8px; pointer-events: none; }

[data-artifact="tumblewood"] .tw-panel { display: grid; gap: var(--space-3); }
[data-artifact="tumblewood"] .tw-panel h2 { display: flex; justify-content: space-between; gap: var(--space-2); border: 0; padding: 0; margin: 0; font: 600 .8125rem/1.2 var(--tw-mono); letter-spacing: .08em; }
[data-artifact="tumblewood"] .tw-panel h2 span { color: var(--tw-soft); font-weight: 400; letter-spacing: .02em; text-transform: none; }
[data-artifact="tumblewood"] .tw-tools { display: grid; gap: var(--space-3); }
[data-artifact="tumblewood"] .tw-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 6px; }
[data-artifact="tumblewood"] .tw-part { appearance: none; border: 1.5px solid var(--tw-line); background: var(--tw-sheet); color: var(--tw-pencil); padding: 6px 4px 5px; min-height: 3rem; display: grid; justify-items: center; align-content: center; gap: 2px; cursor: pointer; font: 600 .75rem/1.15 var(--tw-face); text-align: center; }
[data-artifact="tumblewood"] .tw-part svg { width: 34px; height: 34px; }
[data-artifact="tumblewood"] .tw-part small { font: 400 .6875rem/1.1 var(--tw-mono); color: var(--tw-soft); }
[data-artifact="tumblewood"] .tw-part:hover { border-color: var(--tw-pencil); }
[data-artifact="tumblewood"] .tw-part[aria-pressed="true"] { border-color: var(--tw-pencil); background: var(--tw-raised); box-shadow: inset 0 0 0 2px var(--tw-pencil); }
[data-artifact="tumblewood"] .tw-row { display: flex; flex-wrap: wrap; gap: 6px; }
[data-artifact="tumblewood"] .tw-btn { appearance: none; border: 1.5px solid var(--tw-pencil); background: var(--tw-sheet); color: var(--tw-pencil); padding: 8px 10px; min-height: 2.75rem; font: 600 .875rem/1 var(--tw-face); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
[data-artifact="tumblewood"] .tw-btn:hover { background: var(--tw-raised); }
[data-artifact="tumblewood"] .tw-btn[disabled] { opacity: .45; cursor: not-allowed; }
[data-artifact="tumblewood"] .tw-btn.tw-race { background: var(--tw-cherry); color: var(--tw-on-cherry); border-color: var(--tw-pencil); font-size: 1rem; flex: 1 1 auto; }
[data-artifact="tumblewood"] .tw-btn.tw-race[disabled] { opacity: .6; }
[data-artifact="tumblewood"] .tw-field { display: grid; gap: 4px; font: 600 .8125rem/1.2 var(--tw-face); }
[data-artifact="tumblewood"] .tw-field select { font: 400 .9375rem/1.2 var(--tw-face); min-height: 2.75rem; padding: 7px 8px; border: 1.5px solid var(--tw-pencil); background: var(--tw-sheet); color: var(--tw-pencil); width: 100%; }
[data-artifact="tumblewood"] .tw-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
[data-artifact="tumblewood"] .tw-seg { display: inline-flex; border: 1.5px solid var(--tw-pencil); overflow: hidden; }
[data-artifact="tumblewood"] .tw-seg button { appearance: none; border: 0; background: var(--tw-sheet); color: var(--tw-pencil); font: 500 .8125rem/1 var(--tw-mono); min-height: 2.75rem; padding: 7px 10px; cursor: pointer; }
[data-artifact="tumblewood"] .tw-seg button + button { border-left: 1.5px solid var(--tw-pencil); }
[data-artifact="tumblewood"] .tw-seg button[aria-pressed="true"] { background: var(--tw-pencil); color: var(--tw-sheet); }
[data-artifact="tumblewood"] .tw-status.tw-bad { color: var(--tw-cherry); }
[data-artifact="tumblewood"] .tw-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
[data-artifact="tumblewood"] .tw-results li { display: grid; grid-template-columns: 22px 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .875rem; padding: 4px 0; margin: 0; border-bottom: 1px dashed var(--tw-line); }
[data-artifact="tumblewood"] .tw-results li:last-child { border-bottom: 0; }
[data-artifact="tumblewood"] .tw-place { font: 500 .8125rem/1 var(--tw-mono); color: var(--tw-soft); }
[data-artifact="tumblewood"] .tw-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--tw-pencil); }
[data-artifact="tumblewood"] .tw-dot[data-marble="0"] { background: var(--tw-m0); }
[data-artifact="tumblewood"] .tw-dot[data-marble="1"] { background: var(--tw-m1); }
[data-artifact="tumblewood"] .tw-dot[data-marble="2"] { background: var(--tw-m2); }
[data-artifact="tumblewood"] .tw-dot[data-marble="3"] { background: var(--tw-m3); }
[data-artifact="tumblewood"] .tw-t { font: 500 .875rem/1 var(--tw-mono); font-variant-numeric: tabular-nums; }
[data-artifact="tumblewood"] .tw-out { color: var(--tw-soft); font-style: italic; text-align: right; }
[data-artifact="tumblewood"] .tw-win .tw-t { color: var(--tw-felt); font-weight: 700; }
[data-artifact="tumblewood"] .tw-record { margin: 0; color: var(--tw-soft); font-size: .875rem; }
@media (prefers-reduced-motion: reduce) { [data-artifact="tumblewood"] * { transition: none !important; animation: none !important; } }
@media (min-width: 55rem) {
  [data-artifact="tumblewood"] .tw-stage { position: sticky; top: var(--space-4); }
}