/* Ventano Datenzwerg: 16-bit garden at dusk. Fixed 1440x960 stage, scaled to the window by app.js. */
:root {
  --ink: #2b1a0e;
  --ink-soft: #6b4a2a;
  --parch: #f4e6c3;
  --parch-dark: #e6d1a0;
  --wood: #8b5a2b;
  --wood-dark: #5d3a1a;
  --wood-light: #b07a45;
  --red: #c0392b;
  --moss: #4f7a3a;
  --sky-top: #141a3a;
  --sky-bottom: #3d5f70;
  --px: 4px;
  --pixel-font: "Press Start 2P", monospace;
  --text-font: "VT323", monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky-top); }
body { font-family: var(--text-font); color: var(--ink); }
img, svg { image-rendering: pixelated; }

#app {
  position: absolute; left: 0; top: 0; width: 1440px; height: 960px;
  transform-origin: 0 0; overflow: hidden;
  background: linear-gradient(var(--sky-top), #243464 45%, var(--sky-bottom));
}
.sky { position: absolute; inset: 0 0 68px 0; pointer-events: none; }
.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 120px 60px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 460px 30px, #ffe 50%, transparent 51%),
    radial-gradient(2px 2px at 700px 110px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 980px 160px, #cdf 50%, transparent 51%),
    radial-gradient(2px 2px at 1250px 180px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 580px 420px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 1100px 480px, #ffe 50%, transparent 51%);
  animation: twinkle 4s steps(2) infinite;
}
@keyframes twinkle { 50% { opacity: .55; } }
.moon {
  position: absolute; left: 540px; top: 40px; width: 36px; height: 36px; background: #fdf3c4;
  box-shadow: 0 0 0 4px #fdf3c433, 0 0 30px #fdf3c455;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.ground {
  position: absolute; left: 0; right: 0; top: 892px; bottom: 0;
  background:
    repeating-linear-gradient(90deg, #3e6b2e 0 8px, #4f7a3a 8px 16px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, #6b4a2a 0 12px, #5d3a1a 12px 20px, #77522f 20px 32px) 0 8px / 100% 100%;
  border-top: 4px solid #2d4f22;
}

/* ------------------------------------------------------------- panels */
.panel {
  position: absolute; background: var(--parch); color: var(--ink);
  border: 4px solid var(--wood-dark);
  box-shadow: 0 0 0 4px var(--wood), 0 0 0 8px #1a1208, inset 0 0 0 2px var(--parch-dark), 8px 10px 0 8px #0006;
}
.panel-tag {
  position: absolute; left: 10px; top: -18px; padding: 4px 8px; background: var(--wood-dark); color: var(--parch);
  font: 9px/1 var(--pixel-font); letter-spacing: 1px; box-shadow: 0 0 0 2px #1a1208;
}
.pix-btn {
  font: 11px/1 var(--pixel-font); color: var(--parch); background: var(--red); border: 0; padding: 10px 12px;
  cursor: pointer; box-shadow: inset -3px -3px 0 #7b241c, inset 3px 3px 0 #e74c3c, 0 0 0 3px #1a1208;
}
.pix-btn:hover { filter: brightness(1.1); }
.pix-btn:active { box-shadow: inset 3px 3px 0 #7b241c, 0 0 0 3px #1a1208; transform: translateY(1px); }
.pix-btn.small { padding: 6px 8px; font-size: 9px; }
.pix-btn.ghost { background: var(--wood); box-shadow: inset -3px -3px 0 var(--wood-dark), inset 3px 3px 0 var(--wood-light), 0 0 0 3px #1a1208; }
.pix-btn:disabled { filter: grayscale(.8); cursor: default; }

/* ------------------------------------------------------------- brand */
.brand { position: absolute; left: 24px; top: 14px; display: flex; align-items: center; gap: 14px; }
.acmee { height: 92px; }
.brand-text { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
.ventano { height: 34px; width: auto; box-shadow: 0 0 0 3px #1a1208; }
.brand h1 {
  margin: 0; font: 26px/1 var(--pixel-font); color: #fdf3c4; letter-spacing: 1px; display: flex; align-items: flex-end;
  text-shadow: 3px 3px 0 #1a1208, -1px -1px 0 #1a1208;
}
.a-gnome { width: 34px; height: 34px; margin: 0 -6px -2px -5px; filter: drop-shadow(2px 2px 0 #1a1208); }

/* ------------------------------------------------------------- downloads (L) and finder (N) */
.downloads { left: 780px; top: 26px; width: 330px; height: 88px; padding: 10px 12px; }
.dl-items {
  display: flex; gap: 10px; height: 100%; align-items: center; overflow: auto hidden;
  scrollbar-color: var(--wood) var(--parch-dark); scrollbar-width: thin;
}
.dl-empty { margin: 0; color: var(--ink-soft); font-size: 18px; }
.dl-item {
  width: 56px; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  cursor: pointer; background: none; border: 0; padding: 0; font: 15px/1 var(--text-font); color: var(--ink); flex: none;
}
.dl-item .ico { width: 40px; height: 44px; image-rendering: pixelated; }
.dl-item:hover .ico { transform: translateY(-3px); }
.dl-item.sent { opacity: .45; cursor: default; }
.finder { left: 1134px; top: 26px; width: 244px; height: 88px; padding: 12px 10px 8px; }
.finder form { display: flex; gap: 8px; }
.finder input {
  font: 19px/1 var(--text-font); background: #fffaf0; border: 0; padding: 6px 8px; width: 100%; color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--parch-dark), 0 0 0 3px var(--wood-dark);
}
.date-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 10px var(--pixel-font); color: var(--ink-soft); }
.date-row input { width: auto; flex: 1; font-size: 18px; }

/* ------------------------------------------------------------- walkway (I), stairs (K), ledge, path (J) */
.walkway {
  position: absolute; left: 556px; top: 200px; width: 870px; height: 14px; z-index: 3;
  background: repeating-linear-gradient(90deg, var(--wood-light) 0 22px, var(--wood) 22px 26px, #9a6a3a 26px 46px, var(--wood-dark) 46px 48px);
  box-shadow: 0 4px 0 var(--wood-dark), 0 8px 0 #0005;
}
.walkway::before { /* posts */
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 18px;
  background: repeating-linear-gradient(90deg, transparent 0 88px, var(--wood-dark) 88px 96px);
}
.rail {
  position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  background:
    linear-gradient(var(--wood-light), var(--wood-light)) 0 0 / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 44px, var(--wood) 44px 48px);
  opacity: .9;
}
.stairs {
  position: absolute; left: 556px; top: 214px; width: 44px; height: 118px; z-index: 2;
  background:
    linear-gradient(90deg, var(--wood-dark) 0 4px, transparent 4px calc(100% - 4px), var(--wood-dark) calc(100% - 4px)),
    repeating-linear-gradient(var(--wood-light) 0 6px, var(--wood) 6px 10px, transparent 10px 18px);
}
.ledge {
  position: absolute; left: 540px; top: 330px; width: 196px; height: 18px; z-index: 2;
  background: linear-gradient(#4f7a3a 0 6px, #3e6b2e 6px 8px, var(--wood) 8px 14px, var(--wood-dark) 14px);
  box-shadow: 0 4px 0 #0005;
}
.path-j {
  position: absolute; left: 602px; top: 348px; width: 72px; height: 546px;
  background:
    radial-gradient(circle at 30% 30%, #9e9e9e 0 7px, transparent 8px) 0 0 / 36px 34px,
    radial-gradient(circle at 70% 70%, #8a8a8a 0 8px, transparent 9px) 0 0 / 36px 34px,
    linear-gradient(90deg, #3e6b2e 0 6px, #6b5a3a 6px calc(100% - 6px), #3e6b2e calc(100% - 6px));
  box-shadow: inset 0 0 0 2px #2d4f22;
}
.path-j::before, .path-j::after { /* toadstools along the path */
  content: ""; position: absolute; width: 18px; height: 18px;
  background:
    radial-gradient(circle at 50% 100%, var(--red) 0 9px, transparent 10px) 0 0 / 18px 10px no-repeat,
    linear-gradient(#fffaf0, #fffaf0) 7px 10px / 4px 8px no-repeat;
}
.path-j::before { left: -20px; top: 180px; }
.path-j::after { right: -20px; top: 420px; }

/* ------------------------------------------------------------- printer (K) */
.printer { position: absolute; left: 640px; top: 136px; width: 80px; height: 64px; z-index: 4; }
.printer svg { width: 80px; height: 64px; display: block; }
.printer.working { animation: shake .12s steps(2) infinite; }
.printer.working .crank { animation: crank .4s steps(4) infinite; transform-origin: 38px 15.5px; }
.printer.working .led { fill: #2ecc71; animation: blink .3s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(1px, -1px); } }
@keyframes crank { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .2; } }
.paper {
  position: absolute; left: 22px; top: 22px; width: 36px; height: 0; background: #fffaf0;
  box-shadow: 0 0 0 2px #1a1208; background-image: repeating-linear-gradient(transparent 0 4px, #c9b48a 4px 5px);
  background-size: 70% 100%; background-repeat: no-repeat; background-position: 5px 4px;
}

/* ------------------------------------------------------------- input area (A/B) */
.input-area { left: 24px; top: 158px; width: 500px; height: 600px; overflow: hidden; }
.input-hint { padding: 26px 26px 0; font-size: 21px; line-height: 1.15; color: var(--ink-soft); transition: opacity .3s; }
.hint-big { font: 15px/1.4 var(--pixel-font); color: var(--red); margin: 0 0 12px; }
.prompt {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 10px;
  max-height: calc(100% - 28px);
}
.prompt-box {
  flex: 1; background: #fffaf0; box-shadow: inset 2px 2px 0 var(--parch-dark), 0 0 0 3px var(--wood-dark);
  display: flex; flex-direction: column; max-height: 100%; min-height: 44px;
}
.prompt textarea {
  font: 22px/1.1 var(--text-font); color: var(--ink); background: transparent; border: 0; outline: 0; resize: none;
  padding: 10px 10px 8px; width: 100%; overflow-y: hidden; max-height: 540px;
}
.prompt textarea.scrolling { overflow-y: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.chips:not(:empty) { padding-top: 8px; }
.chip { font: 16px/1 var(--text-font); background: var(--parch-dark); padding: 4px 6px; display: flex; gap: 6px; align-items: center; }
.chip button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--red); padding: 0; }
.pix-btn.plus { font-size: 18px; padding: 10px 14px; background: var(--moss); box-shadow: inset -3px -3px 0 #2d4f22, inset 3px 3px 0 #6fa356, 0 0 0 3px #1a1208; }
.pix-btn.send { font-size: 18px; padding: 10px 14px; }

/* crusher: jaws with hazard stripes squash the question into a data brick */
.crusher { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.jaw {
  position: absolute; background:
    repeating-linear-gradient(45deg, #f1c40f 0 12px, #1a1208 12px 24px);
  box-shadow: 0 0 0 4px #4a4a4a, inset 0 0 0 4px #7f8c8d; visibility: hidden;
}
.jaw.top { left: 0; right: 0; height: 26px; top: -30px; }
.jaw.left { top: 0; bottom: 0; width: 26px; left: -30px; }
.jaw.right { top: 0; bottom: 0; width: 26px; right: -30px; }
.crushing .jaw { visibility: visible; }

/* ------------------------------------------------------------- data brick */
.brick {
  position: absolute; left: 0; top: 0; width: 344px; height: 44px; z-index: 6; will-change: transform;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 2px), #7b241c calc(50% - 2px) calc(50% + 2px), transparent 0) 0 0 / 86px 22px,
    linear-gradient(90deg, transparent 0 calc(100% - 4px), #7b241c 0) 43px 22px / 86px 22px,
    linear-gradient(#7b241c, #7b241c) 0 20px / 100% 4px no-repeat,
    linear-gradient(#cd6155, var(--red));
  box-shadow: 0 0 0 4px #1a1208, inset 0 3px 0 #e6b0aa, inset 0 -3px 0 #641e16;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brick b {
  font: 10px/1.2 var(--pixel-font); color: #fdf3c4; background: #1a1208cc; padding: 5px 8px; max-width: 92%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rope { position: absolute; height: 4px; z-index: 6; transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, #d2a86e 0 4px, #a87d45 4px 8px); box-shadow: 0 1px 0 #5d3a1a; }

/* ------------------------------------------------------------- output area */
.output { left: 740px; top: 236px; width: 420px; height: 362px; overflow: visible; z-index: 1; }
.scroll-row { position: absolute; left: 0; right: 0; top: 10px; height: 52px; }
.out-head {
  position: absolute; left: 10px; right: 10px; top: 14px; height: 40px; display: flex; align-items: center; gap: 8px;
  font: 10px/1.3 var(--pixel-font); color: var(--ink);
}
.out-head span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.out-head a { font: 18px var(--text-font); color: var(--red); }
.out-body {
  position: absolute; left: 10px; right: 6px; top: 62px; bottom: 10px; overflow-y: auto; padding: 0 8px 12px 2px;
  font-size: 19px; line-height: 1.1; scrollbar-color: var(--wood) var(--parch-dark); scrollbar-width: thin;
}
.out-empty { color: var(--ink-soft); text-align: center; margin-top: 110px; }
.q { background: #fffaf0; padding: 6px 8px; margin: 10px 0 6px; box-shadow: 0 0 0 2px var(--parch-dark); }
.q small { display: block; font: 8px var(--pixel-font); color: var(--red); margin-bottom: 4px; }
.feed { margin: 4px 0 8px; font-size: 16px; color: var(--ink-soft); }
.feed div { padding-left: 18px; position: relative; overflow-wrap: anywhere; }
.feed div.new { animation: line-in .25s steps(3); }
.feed div::before { position: absolute; left: 0; font-size: 14px; }
.feed .say { color: var(--ink); font-size: 18px; }
.feed .say::before { content: "\203A"; color: var(--red); }
.feed .sql::before { content: "\25A4"; color: #2471a3; }
.feed .sql { font-family: monospace; font-size: 12px; color: #1f4e79; padding-top: 2px; }
.feed .read::before { content: "\25AB"; }
.feed .code::before { content: "\2692"; }
.feed .srv::before { content: "\2601"; color: #7f8c8d; }
.feed .cmd::before { content: "$"; }
.feed .think { font-style: italic; opacity: .8; }
.feed .think::before { content: "\2026"; }
.feed .sys { font: 8px/2 var(--pixel-font); color: var(--moss); }
.feed .err { color: var(--red); }
.feed details summary { cursor: pointer; font: 8px/2 var(--pixel-font); color: var(--ink-soft); }
@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } }
.answer { font-size: 19px; }
.answer .result { border-left: 4px solid var(--red); padding-left: 10px; margin-bottom: 4px; }
.answer h1, .answer h2, .answer h3 { font: 11px/1.4 var(--pixel-font); color: var(--red); margin: 12px 0 6px; }
.answer p { margin: 6px 0; }
.answer code { font: 13px monospace; background: var(--parch-dark); padding: 0 3px; }
.answer pre { font: 12px/1.3 monospace; background: #2b1a0e; color: var(--parch); padding: 8px; overflow-x: auto; }
.answer pre code { background: none; padding: 0; color: inherit; }
.answer table { border-collapse: collapse; margin: 8px 0; font-size: 17px; display: block; overflow-x: auto; }
.answer th, .answer td { border: 2px solid var(--parch-dark); padding: 2px 6px; text-align: left; }
.answer th { background: var(--parch-dark); }
.answer ul, .answer ol { margin: 6px 0; padding-left: 22px; }
.answer a { color: var(--red); }
.bugbox { margin: 8px 0; padding: 6px 8px; background: #fdecea; box-shadow: 0 0 0 2px var(--red); }
.bugbox b { font: 9px var(--pixel-font); color: var(--red); display: block; margin-bottom: 4px; }
.case-files { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.case-files b { font: 9px var(--pixel-font); color: var(--red); width: 100%; }
.case-files a { font-size: 18px; color: var(--ink); text-decoration: none; background: var(--parch-dark); padding: 2px 8px;
  box-shadow: 0 0 0 2px var(--wood-dark); overflow-wrap: anywhere; }
.case-files a:hover { background: var(--wood-light); color: #fff; }
.case-files small { color: var(--ink-soft); font-size: 15px; }
.case-files a:hover small { color: #fff; }
.choices { display: grid; gap: 8px; margin: 14px 0 6px; }
.choice { display: flex; align-items: center; gap: 10px; font: 10px var(--pixel-font); }
.choice span { flex: 1; }
.choice button { font: 10px var(--pixel-font); border: 0; padding: 7px 10px; cursor: pointer; background: var(--parch-dark); color: var(--ink);
  box-shadow: 0 0 0 2px var(--wood-dark); }
.choice button.on { background: var(--moss); color: #fff; }
.choice button.on.no { background: var(--ink-soft); }
.choice button:disabled { cursor: default; }
.failbox { color: var(--red); margin: 8px 0; }
.typing::after { content: "\2588"; animation: blink .6s steps(2) infinite; color: var(--red); }

/* compactor G: piston at the top left, press bar at the bottom */
.piston { position: absolute; left: -2px; top: 6px; width: 30px; height: 60px; z-index: 7; visibility: hidden; }
.piston .plate { position: absolute; right: 0; top: 0; width: 12px; height: 60px; background: #7f8c8d;
  box-shadow: inset 0 0 0 3px #4a4a4a, 0 0 0 3px #1a1208; }
.piston .rod { position: absolute; left: 0; top: 26px; height: 8px; width: 18px; background: #bdc3c7; box-shadow: 0 0 0 2px #1a1208; }
.press { position: absolute; left: 0; right: 0; bottom: -24px; height: 24px; z-index: 6; visibility: hidden; }
.press-bar {
  position: absolute; left: 6px; right: 6px; top: 0; height: 18px;
  background: repeating-linear-gradient(45deg, #f1c40f 0 10px, #1a1208 10px 20px);
  box-shadow: 0 0 0 3px #4a4a4a;
}
.press::after { /* feet */
  content: ""; position: absolute; left: 30px; right: 30px; top: 18px; height: 8px;
  background: repeating-linear-gradient(90deg, #4a4a4a 0 14px, transparent 14px 120px);
}
.compacting .press, .compacting .piston { visibility: visible; }

/* result scroll */
.rscroll {
  position: absolute; height: 44px; width: 340px; z-index: 6; display: flex; align-items: center; will-change: transform;
}
.rscroll .body {
  flex: 1; height: 34px; background: #fbf3dc; box-shadow: 0 0 0 3px #1a1208, inset 0 -4px 0 var(--parch-dark);
  font: 17px/34px var(--text-font); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink);
}
.rscroll::before, .rscroll::after {
  content: ""; width: 12px; height: 44px; background: linear-gradient(90deg, #a0522d, #deb887 50%, #a0522d);
  box-shadow: 0 0 0 3px #1a1208; flex: none;
}

/* ------------------------------------------------------------- factory (F), smoke, process bay (E) */
.factory { position: absolute; left: 800px; top: 578px; width: 300px; height: 270px; z-index: 2; pointer-events: none; }
.factory img { width: 300px; height: 270px; display: block; }
.win { position: absolute; background: #ffd34d; opacity: 0; mix-blend-mode: screen; transition: opacity .15s steps(2); }
.factory.working .win.lit { opacity: .75; box-shadow: 0 0 12px #ffd34d; }
.win.sky { clip-path: polygon(0 100%, 100% 0, 100% 100%); }  /* glass under the sloped roof */
.smoke { position: absolute; left: 1036px; top: 560px; width: 60px; height: 10px; z-index: 8; pointer-events: none; }
.puff {
  position: absolute; left: 10px; top: 0; width: 34px; height: 24px; background: #e8e8e8;
  clip-path: polygon(20% 0, 80% 0, 80% 10%, 100% 10%, 100% 80%, 80% 80%, 80% 100%, 20% 100%, 20% 80%, 0 80%, 0 10%, 20% 10%);
  box-shadow: inset -4px -4px 0 #b8b8b8;
}
.process {
  position: absolute; left: 760px; top: 846px; width: 400px; height: 46px; z-index: 2;
  background: repeating-linear-gradient(45deg, #4a4a4a 0 10px, #5f5f5f 10px 20px);
  box-shadow: 0 0 0 4px #1a1208, inset 0 4px 0 #7f8c8d;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;
}
.process span { font: 8px var(--pixel-font); color: #f1c40f; background: #1a1208; padding: 3px 5px; }

/* ------------------------------------------------------------- shelf (M) and ladder (H) */
.shelf { position: absolute; left: 1180px; top: 218px; width: 172px; height: 674px; z-index: 2; }
.shelf-window {
  position: absolute; left: 0; right: 0; top: 28px; bottom: 28px; overflow: hidden; cursor: grab;
  background: #3b2412; box-shadow: 0 0 0 4px var(--wood-dark), 0 0 0 8px #1a1208, inset 6px 0 0 #2a190c;
}
.shelf-window.dragging { cursor: grabbing; }
.shelf-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.slot {
  position: absolute; left: 6px; right: 6px; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: linear-gradient(transparent 40px, var(--wood-light) 40px 44px, var(--wood-dark) 44px);
  user-select: none;
}
.slot .num { font: 9px var(--pixel-font); color: #fdf3c4; min-width: 30px; cursor: pointer; }
.slot .lbl { font: 15px/1 var(--text-font); color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.slot .mini { width: 10px; height: 30px; flex: none; background: linear-gradient(90deg, #a0522d, #deb887 50%, #a0522d); box-shadow: 0 0 0 2px #1a1208; }
.slot.empty .mini, .slot.empty .num { visibility: hidden; }
.slot.link { background: linear-gradient(transparent 40px, #5dade2 40px 44px, #2471a3 44px); }
.slot.link .lbl { color: #aed6f1; font-style: italic; }
.slot.out .mini { visibility: hidden; }
.slot.active { outline: 2px dashed #f1c40f; outline-offset: -2px; }
.slot.mine .num::after { content: "\2022"; color: #f1c40f; margin-left: 2px; }
.cog {
  position: absolute; right: -14px; width: 44px; height: 44px; z-index: 3;
  background:
    radial-gradient(circle, #1a1208 0 5px, #95a5a6 6px 13px, transparent 14px),
    conic-gradient(#7f8c8d 0 10%, transparent 0 15%, #7f8c8d 0 35%, transparent 0 40%, #7f8c8d 0 60%, transparent 0 65%, #7f8c8d 0 85%, transparent 0 90%, #7f8c8d 0);
  border-radius: 50%; box-shadow: 0 0 0 3px #1a1208;
}
.cog.top { top: 2px; }
.cog.bottom { bottom: 2px; }
.ladder {
  position: absolute; left: 1374px; top: 200px; width: 42px; height: 692px; z-index: 1;
  background:
    linear-gradient(90deg, var(--wood-dark) 0 6px, transparent 6px 36px, var(--wood-dark) 36px),
    repeating-linear-gradient(transparent 0 22px, var(--wood-light) 22px 28px, var(--wood) 28px 30px);
}

/* ------------------------------------------------------------- gnomes and effects */
#field { position: absolute; inset: 0; pointer-events: none; z-index: 9; }
.gnome {
  position: absolute; left: 0; top: 0; width: 96px; height: 96px; background: url(gfx/gnome.png?v=1793879896) 0 0 / 416px 728px;
  image-rendering: pixelated; will-change: transform;
}
.dust {
  position: absolute; width: 16px; height: 16px; background: #d5c4a1; box-shadow: 0 0 0 2px #8a7a5a;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
}
.spark { position: absolute; width: 6px; height: 6px; background: #f1c40f; box-shadow: 0 0 6px #f39c12; }
.flyer { position: absolute; z-index: 10; }

/* ------------------------------------------------------------- misc */
.account { position: absolute; left: 24px; top: 912px; display: flex; align-items: center; gap: 12px; z-index: 10;
  font: 9px var(--pixel-font); color: #fdf3c4; }
.offline { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 20; background: var(--red);
  color: #fff; font: 10px var(--pixel-font); padding: 8px 12px; box-shadow: 0 0 0 3px #1a1208; }
.toasts { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 20; display: grid; gap: 8px; }
.toast { background: var(--parch); color: var(--ink); font: 20px var(--text-font); padding: 8px 14px; box-shadow: 0 0 0 3px #1a1208, 4px 4px 0 3px #0006; }
.toast.bad { background: #fdecea; color: var(--red); }
dialog { border: 0; padding: 12px; background: transparent; overflow: visible; max-width: 96vw; }
dialog::backdrop { background: #0b0e1fcc; }
#login-form {
  background: var(--parch); padding: 26px 28px 20px; width: 340px; display: grid; gap: 12px; position: relative;
  box-shadow: 0 0 0 4px var(--wood-dark), 0 0 0 8px var(--wood), 0 0 0 12px #1a1208;
}
#login-form h2 { margin: 0 0 4px; font: 13px var(--pixel-font); color: var(--red); }
#login-form label { display: grid; gap: 4px; font: 9px var(--pixel-font); color: var(--ink-soft); }
#login-form input { font: 22px var(--text-font); padding: 6px 8px; border: 0; background: #fffaf0; box-shadow: 0 0 0 3px var(--wood-dark); }
.dlg-gnome { position: absolute; right: 18px; top: -40px; width: 64px; height: 64px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; }
.err { color: var(--red); margin: 0; min-height: 1em; font-size: 18px; }
.locked .input-area, .locked .output, .locked .shelf, .locked .finder, .locked .downloads { filter: grayscale(.6) brightness(.8); }
.input-area.drop { outline: 4px dashed var(--red); outline-offset: -10px; }