/* ==========================================================================
   Mac Desktop — native-pixel classic UI.
   All sizes are in native screen pixels; #screen is scaled by an integer factor
   (default 2x) with nearest-neighbour filtering.
   ========================================================================== */
@font-face { font-family: "Chicago"; src: url("../fonts/ChicagoKare-Regular.woff2") format("woff2"), url("../fonts/ChicagoKare-Regular.ttf") format("truetype"); }
@font-face { font-family: "Geneva12"; src: url("../fonts/Kurrajong12.ttf") format("truetype"); }
@font-face { font-family: "Geneva9"; src: url("../fonts/Kurrajong9.ttf") format("truetype"); }
@font-face { font-family: "Monaco9"; src: url("../fonts/Banksia9.ttf") format("truetype"); }
@font-face { font-family: "Geneva10"; src: url("../fonts/Kurrajong10.ttf") format("truetype"); }
@font-face { font-family: "Geneva14"; src: url("../fonts/Kurrajong14.ttf") format("truetype"); }
@font-face { font-family: "Geneva18"; src: url("../fonts/Kurrajong18.ttf") format("truetype"); }
@font-face { font-family: "Geneva24"; src: url("../fonts/Kurrajong24.ttf") format("truetype"); }
@font-face { font-family: "Monaco10"; src: url("../fonts/Banksia10.ttf") format("truetype"); }
@font-face { font-family: "Monaco12"; src: url("../fonts/Banksia12.ttf") format("truetype"); }
@font-face { font-family: "NewYork12"; src: url("../fonts/Ironbark12.ttf") format("truetype"); }
@font-face { font-family: "NewYork14"; src: url("../fonts/Ironbark14.ttf") format("truetype"); }
@font-face { font-family: "NewYork18"; src: url("../fonts/Ironbark18.ttf") format("truetype"); }
@font-face { font-family: "ChicagoSupp"; src: url("../fonts/ChicagoSupp.ttf") format("truetype"); }

:root {
  --ink: var(--pal-ink, #000); --paper: var(--pal-paper, #fff);   /* short names for the two inks */
  --cursor: arrow;   /* inherited; elements override it to pick the software cursor (js/cursors.js) */
  /* All pixel fonts are built on a 64-unit grid at 1024 upem: 16px = one font pixel per screen pixel. */
  --chicago: 16px/16px "Chicago", "ChicagoSupp", monospace;
  --geneva: 16px/15px "Geneva12", sans-serif;
  --geneva9: 16px/12px "Geneva9", sans-serif;
  --monaco: 16px/11px "Monaco9", monospace;
}

* { box-sizing: border-box; cursor: none !important; image-rendering: pixelated; -webkit-font-smoothing: none; }
#cursor { position: absolute; z-index: 400000; pointer-events: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); touch-action: pinch-zoom; }
/* only the surfaces that drag claim the touch for themselves; elsewhere pinch zoom still works */
.titlebar, .icon, .list-row, .icon-view, .edge, .grow-box, canvas, .menu-title, .menu-dropdown, .puzzle-tile { touch-action: none; }
/* fingers are larger than pixels: invisible hit areas around the small boxes, the drawing is unchanged */
@media (pointer: coarse) {
  .close-box::before, .zoom-box::before, .grow-box::before { content: ''; position: absolute; inset: -8px; }
  .menu-title { position: relative; }
  .menu-title::before { content: ''; position: absolute; inset: 0 0 -8px; }
}
html { font-synthesis: none; } /* never fake bold/italic on pixel fonts */
b, strong, h1, h2, h3, h4, th { font-weight: normal; }
body { user-select: none; -webkit-user-select: none; color: var(--ink); font: var(--geneva); }
input, textarea, [contenteditable="true"], [contenteditable="true"] * { --cursor: ibeam; user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
button:focus, input:focus, textarea:focus, [contenteditable]:focus, [tabindex]:focus { outline: none; }
::selection { background: var(--highlight, #000); color: var(--highlight-text, #fff); }
img.px-icon { display: block; image-rendering: pixelated; pointer-events: none; }

#screen {
  position: absolute; left: 0; top: 0; overflow: hidden;
  transform-origin: 0 0; background: var(--paper);
}
#screen::after { /* rounded CRT corners, drawn as pixels */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 300000;
  background:
    var(--corner-tl) left top no-repeat, var(--corner-tr) right top no-repeat,
    var(--corner-bl) left bottom no-repeat, var(--corner-br) right bottom no-repeat;
}

/* ---------- menu bar ---------- */
#menubar.modal .menu-title:not(.menu-icon) { color: var(--pal-gray); }
#menubar {
  position: absolute; left: 0; right: 0; top: 0; height: 20px; z-index: 100000;
  display: flex; align-items: stretch; padding: 0 0 0 10px;
  background: var(--paper); border-bottom: 1px solid var(--ink); font: var(--chicago);
}
#menubar.flash { filter: invert(1); }
.menu-title { height: 19px; padding: 1px 7px 0; white-space: nowrap; display: flex; align-items: center; }
.menu-title.open { background: var(--ink); color: var(--paper); }
.menu-title.open img { filter: invert(1); }
.menu-title .logo { display: block; width: 10px; height: 11px; margin: 0 2px; }
.menu-spacer { flex: 1; }
.menu-clock { padding: 1px 8px 0; display: flex; align-items: center; }
.menu-icon { width: 30px; display: flex; align-items: center; justify-content: center; }
.menu-icon.open { background: var(--ink); }
.menu-icon.open img { filter: invert(1); }

.menu-dropdown {
  position: absolute; z-index: 100001; min-width: 100px;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink);
  font: var(--chicago); padding: 0;
}
.menu-item { display: flex; align-items: center; height: 16px; padding: 0 10px 0 0; white-space: nowrap; }
.menu-item:not(.disabled):hover, .menu-item.blink { background: var(--ink); color: var(--paper); }
.menu-item:not(.disabled):hover.blink { background: var(--paper); color: var(--ink); }
.menu-check { width: 14px; text-align: center; flex: none; }
.menu-label { flex: 1; padding-right: 20px; }
.menu-icon-img { width: 16px; height: 16px; margin-right: 4px; flex: none; }
.menu-item:not(.disabled):hover .menu-icon-img, .menu-item.blink .menu-icon-img { filter: invert(1); }
.menu-item:not(.disabled):hover .outline, .menu-item.blink .outline { color: var(--ink); text-shadow: 1px 0 0 var(--paper), -1px 0 0 var(--paper), 0 1px 0 var(--paper), 0 -1px 0 var(--paper); }
.menu-swatch { width: 12px; height: 10px; border: 1px solid var(--ink); margin-right: 5px; flex: none; }
.menu-sep { height: 9px; display: flex; align-items: center; }
.menu-sep::after { content: ""; flex: 1; height: 1px; background: var(--d-gray); }

/* ---------- desktop ---------- */
#desktop { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; overflow: hidden; background-color: var(--paper); }
.desktop-icons { position: absolute; inset: 0; z-index: 1; }
#overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 200000; }
#overlay-layer > * { pointer-events: auto; }
#overlay-layer > .zoom-rect, #overlay-layer > .icon-ghost, #overlay-layer > .balloon-wrap { pointer-events: none; }
.zoom-rect { position: absolute; border: 1px solid transparent; border-image: var(--d-gray) 1; }
.drag-outline { position: absolute; z-index: 99999; pointer-events: none; border: 1px solid transparent; border-image: var(--d-gray) 1; }

/* ---------- icons ---------- */
.icon-view { position: relative; }
.icon { position: absolute; width: 68px; display: flex; flex-direction: column; align-items: center; }
.icon-img { width: 32px; height: 32px; }
.icon-label { margin-top: 1px; padding: 0 2px; max-width: 66px; height: 12px; font: var(--geneva9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--paper); }
.icon.selected .icon-label { background: var(--ink); color: var(--paper); max-width: none; position: relative; z-index: 1; }
.desktop-icons .icon-label { max-width: 76px; }   /* one column on the desktop: names have room */
.icon-ghost { position: absolute; display: flex; flex-direction: column; align-items: center; opacity: .6; z-index: 200001; }
.icon-ghost .icon-label { font: var(--geneva9); }
.marquee { position: absolute; pointer-events: none; z-index: 5; border: 1px solid transparent; border-image: var(--d-gray) 1; }

.icon-view.list-mode { padding: 0; }
.list-header, .list-row { display: grid; grid-template-columns: minmax(110px, 1fr) 44px 100px; align-items: center; padding: 0 4px; }
.list-header { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--ink); font: var(--geneva9); height: 15px; z-index: 2; }
.list-row { font: var(--geneva9); height: 18px; }
.list-row > span:nth-child(2) { text-align: right; padding-right: 8px; }
.list-name { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.list-row .icon-label { margin: 0; background: none; text-align: left; }
.list-row.selected .icon-label { background: var(--ink); color: var(--paper); }
.mini-icon { width: 16px; height: 16px; flex: none; display: block; }

/* ---------- windows ---------- */
.window {
  position: absolute; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink);
}
.titlebar {
  position: relative; flex: none; height: 18px;
  display: flex; align-items: flex-start; justify-content: center;
  border-bottom: 1px solid var(--ink); background: var(--paper);
}
.window.active .titlebar::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 11px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);
}
.title { position: relative; z-index: 1; max-width: calc(100% - 44px); padding-top: 1px; }
.window:not(:has(.zoom-box)) .title { max-width: calc(100% - 24px); margin-left: 12px; }
.title-text { display: block; padding: 0 6px; height: 16px; background: var(--paper); font: var(--chicago); white-space: nowrap; overflow: hidden; }
.close-box, .zoom-box {
  position: absolute; top: 3px; width: 13px; height: 11px; z-index: 2;
  background-color: var(--paper); background-repeat: no-repeat; background-position: 1px 0;
}
.close-box { left: 7px; }
.zoom-box { right: 7px; }
.window:not(.active) .close-box, .window:not(.active) .zoom-box { display: none; }
.win-body { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.grow-box { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; z-index: 4; border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); background: var(--paper) no-repeat 0 0; }
.edge { position: absolute; z-index: 3; }
.edge-n { top: -2px; left: 4px; right: 4px; height: 4px; }
.edge-s { bottom: -2px; left: 4px; right: 4px; height: 4px; }
.edge-e { right: -2px; top: 4px; bottom: 4px; width: 4px; }
.edge-w { left: -2px; top: 4px; bottom: 4px; width: 4px; }
.edge-ne, .edge-nw, .edge-se, .edge-sw { width: 6px; height: 6px; }
.edge-ne { right: -2px; top: -2px; } .edge-nw { left: -2px; top: -2px; }
.edge-se { right: -2px; bottom: -2px; } .edge-sw { left: -2px; bottom: -2px; }

/* desk-accessory window: black title bar, white title while active (Calculator, Alarm Clock) */
.win-da.active .titlebar { background: var(--ink); border-bottom-color: var(--ink); }
.win-da.active .titlebar::before { display: none; }
.win-da.active .title-text { background: var(--ink); color: var(--paper); }
.win-da.active .close-box { background-color: var(--ink); }

/* rounded System-7 style window (Puzzle) */
.win-rounded { border: 0; box-shadow: none; background: transparent; }
.win-rounded .titlebar { background: none; height: 22px; }
.win-rounded .title { padding-top: 0; }
.win-rounded.active .titlebar::before { display: none; }
.win-rounded .title-text { background: none; }
.win-rounded .win-body { border: 1px solid var(--ink); border-top: 0; box-shadow: 1px 1px 0 var(--ink); }
.win-rounded .close-box { top: 3px; left: 6px; }

/* picture window with dotted title and dithered frame (Scrapbook) */
.win-picture .titlebar { height: 14px; }
.win-picture.active .titlebar::before { top: 2px; height: 9px; background: var(--d-dotrows); }
.win-picture .title-text { display: none; }
.win-picture .close-box { top: 1px; left: 6px; }
.win-picture .win-body { display: flex; flex-direction: column; padding: 3px; background: var(--d-picture); }

/* ---------- scroll bars ---------- */
.px-scroll { overflow: auto; }
.px-scroll::-webkit-scrollbar { width: 16px; height: 16px; }
.px-scroll::-webkit-scrollbar-track { background-color: var(--paper); border-left: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-thumb { background: var(--paper); border: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-corner { background: var(--paper); }
.px-scroll::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background-color: var(--sb-arrow, var(--paper)); background-repeat: no-repeat; background-position: center; border-left: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:vertical:decrement { border-bottom: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:vertical:increment { border-top: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:horizontal { border-left: 0; border-top: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:horizontal:decrement { border-right: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:horizontal:increment { border-left: 1px solid var(--ink); }
.px-scroll::-webkit-scrollbar-button:active { filter: invert(1); }
.window:not(.active) .px-scroll::-webkit-scrollbar-track { background-image: none; }
.window:not(.active) .px-scroll::-webkit-scrollbar-thumb { background: transparent; border-color: transparent; }

/* ---------- controls ---------- */
.btn { min-width: 44px; height: 20px; padding: 0 6px; font: var(--chicago); line-height: 12px; text-align: center; white-space: nowrap; }
.btn.default { height: 28px; min-width: 66px; }
.radio, .check { display: inline-block; width: 12px; height: 12px; flex: none; background-repeat: no-repeat; vertical-align: middle; }
.ctl { display: inline-flex; align-items: center; gap: 4px; font: var(--geneva); }
.field { border: 1px solid var(--ink); background: var(--paper); font: var(--geneva); height: 19px; padding: 1px 3px; border-radius: 0; color: var(--ink); }
.balloon-wrap { position: absolute; z-index: 150000; filter: drop-shadow(1px 1px 0 var(--ink)); }
.balloon { padding: 4px 8px 6px; font: var(--geneva); max-width: 180px; white-space: normal; }
.balloon-tail { position: absolute; width: 12px; height: 10px; }

/* ---------- dialogs ---------- */
.modal-shield { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 22%; }
.dialog-box { max-width: 400px; padding: 10px 12px 10px; box-shadow: 1px 1px 0 var(--ink); }
.dialog-content { display: flex; gap: 14px; align-items: center; min-height: 36px; }
.dialog-icon { flex: none; width: 32px; height: 32px; }
.dialog-text { flex: 1; font: var(--chicago); min-width: 270px; padding-top: 2px; }
.dialog-input { display: block; width: 100%; margin-top: 8px; }
.dialog-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }

.boot-screen, .shutdown-screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--d-gray); }
.shutdown-screen { background: var(--ink); }
.boot-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 30px; }
.boot-text { font: var(--chicago); }

/* ---------- Finder ---------- */
.finder-info { flex: none; display: flex; justify-content: space-between; padding: 0 8px; height: 13px; border-bottom: 1px solid var(--ink); font: var(--geneva9); background: var(--pal-butter); }
.finder-info2 { height: 2px; border-bottom: 1px solid var(--ink); flex: none; }
.finder-trashbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 6px 3px 8px; border-bottom: 1px solid var(--ink); font: var(--geneva9); }
.finder-trashbar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-trashbar .btn { flex: none; }
.finder-pane { flex: 1; padding: 4px 2px 0; }
.finder-pane.list-mode { padding: 0; }
.info-window .win-body { padding: 8px 10px; gap: 2px; }
.info-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font: var(--chicago); border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.info-row { display: flex; gap: 6px; font: var(--geneva); }
.info-key { width: 56px; text-align: right; flex: none; }

/* ---------- Calculator ---------- */
.calc { padding: 5px 6px 7px; background: var(--d-calc); height: 100%; display: flex; flex-direction: column; gap: 6px; }
.calc-display { height: 17px; margin-right: 2px; border: 1px solid var(--ink); background: var(--pal-iris); text-align: right; font: var(--chicago); padding: 0 3px; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); }
.calc-pad { display: grid; justify-content: center; grid-template-columns: repeat(4, 18px); grid-auto-rows: 15px; gap: 5px 5px; }
.calc-key { border: 1px solid var(--ink); background: var(--pal-green); box-shadow: 2px 2px 0 var(--ink); font: var(--geneva9); display: flex; align-items: center; justify-content: center; }
.calc-key.pressed { background: var(--ink); color: var(--pal-green); box-shadow: none; transform: translate(1px, 1px); }
.calc-key.kadd { grid-row: span 2; }
.calc-key.k0 { grid-column: span 2; }

/* ---------- Note Pad ---------- */
.notepad { position: relative; height: 100%; background: var(--pal-yellow); }
.notepad-text { position: absolute; left: 0; top: 0; right: 0; bottom: 34px; height: auto; width: 100%; resize: none; border: 0; padding: 6px 8px 0; font: var(--geneva); color: var(--ink);
  background: repeating-linear-gradient(to bottom, transparent 0 14px, var(--pal-olive) 14px 15px) 0 5px / 100% 15px local; }
.notepad-text.turning { animation: turn .12s steps(2); }
@keyframes turn { 50% { background: var(--ink); color: var(--pal-yellow); } }
.notepad-num { position: absolute; left: 120px; bottom: 8px; font: var(--chicago); }
.notepad-ear { position: absolute; left: 0; bottom: 5px; width: 26px; height: 26px; }
.notepad-ear img { position: absolute; inset: 0; }
.notepad-ear-next, .notepad-ear-prev { position: absolute; inset: 0; }
.notepad-ear-next { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.notepad-ear-prev { clip-path: polygon(0 0, 0 100%, 100% 100%); }
.notepad-ear-next:active, .notepad-ear-prev:active { background: var(--ink); }
.notepad-stack { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-top: 1px solid var(--ink); background: repeating-linear-gradient(to bottom, var(--pal-yellow) 0 1px, var(--ink) 1px 2px); }

/* ---------- Key Caps ---------- */
.keycaps { background: var(--d-keycaps); height: 100%; padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.kc-display { height: 20px; background: var(--pal-violet); border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--paper); font: var(--chicago); padding: 1px 4px 0; white-space: pre; overflow: hidden; margin-right: 80px; }
.kc-board { display: flex; flex-direction: column; align-self: flex-start; border: 1px solid var(--ink); border-right: 0; border-bottom: 0; }
.kc-row { display: flex; }
.kc-key { width: 17px; height: 17px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--pal-lilac); font: var(--chicago); line-height: 16px; display: flex; align-items: center; justify-content: center; }
.kc-key.down { background: var(--ink); color: var(--pal-lilac); }
.kc-mod { font: var(--geneva9); }

/* ---------- Paint ---------- */
.paint { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr 40px; height: 100%; }
.paint-side { grid-row: 1; padding: 3px; border-right: 1px solid var(--ink); background: var(--pal-lavender); }
.paint-tools { display: grid; grid-template-columns: 24px 24px; grid-auto-rows: 20px; }
.paint-tool { border: 1px solid var(--ink); margin: 0 -1px -1px 0; background: var(--paper); display: flex; align-items: center; justify-content: center; }
.paint-tool.on { background: var(--ink); }
.paint-tool.on img { filter: invert(1); }
.paint-widths { margin-top: 6px; width: 47px; display: flex; flex-direction: column; border: 1px solid var(--ink); }
.paint-width { height: 11px; display: flex; align-items: center; padding: 0 4px; }
.paint-width span { display: block; width: 100%; background: var(--ink); }
.paint-width.on { background: var(--d-light); }
.paint-scroll { background: var(--d-paint); }
.paint-stage { position: relative; width: 416px; height: 240px; margin: 6px; background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); box-sizing: content-box; }
.paint-canvas, .paint-overlay { position: absolute; left: 0; top: 0; }
.paint-overlay { pointer-events: none; }
.paint-text-input { position: absolute; border: 0; font: var(--geneva); padding: 0; width: 200px; height: 15px; background: transparent; }
.paint-patterns { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; padding: 3px 22px 3px 6px; border-top: 1px solid var(--ink); background: var(--pal-lavender); overflow: hidden; }
.paint-current { width: 47px; height: 30px; margin-top: 6px; border: 1px solid var(--ink); flex: none; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }
.paint-pat-grid { flex: 1; display: grid; grid-template-columns: repeat(19, 1fr); grid-template-rows: repeat(2, 15px); border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
.paint-pat { border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.paint-pat.on { box-shadow: inset 0 0 0 1px var(--ink), inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--ink); }

/* ---------- Write ---------- */
.write { display: flex; flex-direction: column; height: 100%; }
.write-ruler { flex: none; border-bottom: 1px solid var(--ink); padding: 3px 4px 0; background: var(--d-write); }
.write-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.write-gap { width: 4px; }
.popup { display: inline-flex; align-items: center; gap: 6px; height: 18px; padding: 0 5px 0 6px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 1px 1px 0 var(--ink); font: var(--chicago); }
.popup.open { background: var(--ink); color: var(--paper); }
.popup.open .popup-arrow { filter: invert(1); }
.popup-label { display: grid; text-align: left; }
.popup-label > span { grid-area: 1 / 1; }
.popup-menu .menu-label { padding-right: 6px; }
.popup-menu .menu-key { display: none; }
.write-btn { min-width: 16px; height: 16px; border: 1px solid var(--ink); background: var(--paper); font: var(--chicago); line-height: 14px; display: inline-flex; align-items: center; justify-content: center; }
.write-btn.on { background: var(--ink); color: var(--paper); }
.write-btn.on img { filter: invert(1); }
.write-ticks { height: 8px; margin-top: 3px; background: var(--paper); margin-left: -4px; margin-right: -4px; padding: 0 4px; display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--ink); }
.write-ticks span { width: 1px; height: 2px; background: var(--ink); }
.write-ticks span.mid { height: 4px; }
.write-ticks span.major { height: 7px; }
.write-scroll { flex: 1; }
.write-locked { display: flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-bottom: 1px solid var(--ink); background: var(--pal-ice); font: var(--geneva9); }
.write-page { min-height: 100%; padding: 8px 12px; font: var(--geneva); }
.write-page h3 { font: var(--chicago); margin: 0 0 6px; }
.write-page p, .write-page ul { margin: 0 0 8px; }
.write-page ul, .write-page ol { padding-left: 16px; }
.write-page ol { margin: 0 0 8px; }
/* the site's writing (content/): headings step down through the Geneva strikes, code in Monaco */
.write-page h4 { font: 16px/18px "Geneva14", "ChicagoSupp"; margin: 10px 0 4px; }
.write-page h5 { font: var(--geneva); text-shadow: 1px 0 0 currentColor; margin: 8px 0 4px; }
.write-page code { font: 16px/14px "Monaco12", "ChicagoSupp"; }
.write-page pre { font: 16px/14px "Monaco12", "ChicagoSupp"; margin: 0 0 8px; padding: 4px 6px; border: 1px solid var(--ink); white-space: pre-wrap; }
.write-page blockquote { margin: 0 0 8px; padding: 0 0 0 10px; border-left: 2px solid var(--ink); }
.write-page hr { border: 0; height: 1px; margin: 10px 0; background: var(--ink); }
.write-page a { color: var(--ink); text-decoration: underline; }
.write-page .write-picture { display: block; margin: 0 0 8px; }
.write-page img { display: block; margin: 0 0 8px; max-width: 100%; image-rendering: pixelated; }
.write-page .doc-date { font: var(--geneva9); margin: -2px 0 10px; }
.write-page .doc-draft { font: var(--geneva9); display: inline-block; padding: 1px 4px; border: 1px solid var(--ink); background: var(--pal-butter); }
/* Classic QuickDraw text styles, drawn with exact 1px offsets. The browser's own
   editing commands toggle them: <b> bold, <i> outline, <strike> shadow. */
/* The real weight/style/decoration stay set (with font-synthesis off they draw nothing) so the
   browser can tell a style is on and toggle it off again; the look comes from the shadows. */
.write-page b, .write-page strong { font-weight: bold; text-shadow: 1px 0 0 currentColor; }
.write-page i, .write-page em { font-style: italic; }
.write-page i, .write-page em, .outline { color: var(--paper); text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink); }
.write-page strike, .write-page s { text-decoration: line-through transparent; }
.write-page strike, .write-page s, .shadow { color: var(--paper); text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink), 2px 1px 0 var(--ink), 1px 2px 0 var(--ink), 2px 2px 0 var(--ink); }
.write-btn.on .outline, .write-btn.on .shadow { color: var(--ink); text-shadow: 1px 0 0 var(--paper), -1px 0 0 var(--paper), 0 1px 0 var(--paper), 0 -1px 0 var(--paper); }

/* ---------- Puzzle ---------- */
.puzzle { display: flex; flex-direction: column; align-items: center; background: var(--ink); padding: 3px; }
.puzzle-grid { position: relative; background: var(--ink); }
.puzzle-tile { position: absolute; left: 0; top: 0; width: 20px; height: 20px; transition: transform .07s steps(3); background-repeat: no-repeat; box-shadow: inset 1px 1px 0 var(--pal-mintPale); }
.puzzle-tile:active, .puzzle.solved .puzzle-tile { filter: invert(1); }
.puzzle-status { font: var(--geneva9); color: var(--paper); height: 12px; margin-top: 2px; }

/* ---------- Alarm Clock ---------- */
.clock { padding: 4px 6px; display: flex; flex-direction: column; gap: 3px; background: var(--pal-peach); height: 100%; }
.clock-face { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--ink); padding: 1px 4px; background: var(--paper); }
.clock-time { font: var(--chicago); }
.clock-flap { width: 12px; height: 12px; border: 1px solid var(--ink); background: linear-gradient(135deg, var(--paper) 50%, var(--ink) 50%); }
.clock-date { font: var(--geneva9); text-align: center; }
.clock-panel { display: none; align-items: center; gap: 6px; border-top: 1px solid var(--ink); padding-top: 4px; font: var(--chicago); }
.clock-window.expanded .clock-panel { display: flex; }
.clock-input { width: 64px; }

/* ---------- Map ---------- */
.mapcp { padding: 6px 7px; display: flex; flex-direction: column; gap: 5px; font: var(--geneva); }
.map-view { position: relative; height: 112px; border: 1px solid var(--ink); overflow: hidden; background: var(--pal-mint); }
.map-view canvas { position: absolute; left: 0; top: 0; }
.map-marker { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; pointer-events: none; z-index: 1; }
.map-row { display: flex; align-items: center; gap: 6px; }
.map-grid { display: grid; grid-template-columns: 72px 38px 9px 38px 12px 14px 10px; align-items: center; row-gap: 3px; column-gap: 2px; }
.map-grid .field { width: 38px; height: 17px; }
.map-ver { margin-left: auto; padding-right: 2px; white-space: nowrap; }
.map-loc { flex: 1; }
.map-distance { width: 70px; }
.map-time { flex: 1; text-align: center; }

/* ---------- Sound / Mouse ---------- */
.soundcp { display: flex; height: 100%; font: var(--geneva); }
.sound-vol { width: 66px; background: var(--pal-ice); border-right: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sound-vol-label { text-align: center; }
.sound-slider { position: relative; margin-top: 6px; display: flex; gap: 3px; }
.sound-ticks { display: flex; flex-direction: column; padding-left: 4px; }
.sound-ticks span { height: 14px; line-height: 14px; padding-right: 3px; }
.sound-track { position: relative; width: 10px; height: 112px; border: 1px solid var(--ink); background: var(--d-slider); margin-top: 2px; }
.sound-knob { position: absolute; left: -3px; width: 14px; height: 7px; border: 1px solid var(--ink); background: var(--pal-lime); }
.sound-list-wrap { flex: 1; padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.sound-list { flex: 1; border: 1px solid var(--ink); padding: 2px 0; }
.sound-item { padding: 0 6px; height: 15px; }
.sound-item.on { background: var(--ink); color: var(--paper); }
.mousecp { display: flex; flex-direction: column; height: 100%; font: var(--geneva); }
.mouse-tracking { background: var(--pal-salmon); padding: 3px 8px 4px; border-bottom: 1px solid var(--ink); }
.mouse-dbl { flex: 1; background: var(--pal-purple); padding: 4px 8px 8px; }
.mouse-hand { grid-column: 2 / 4; grid-row: 1 / 3; align-self: center; }
.mouse-left { justify-self: start; }
.mouse-h { text-align: center; }
.mouse-grid { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; justify-items: center; row-gap: 2px; }
.mouse-cell { display: flex; justify-content: center; }

/* ---------- Scrapbook ---------- */
.scrap-inner { position: relative; flex: 1; background: var(--pal-lavender); display: flex; align-items: flex-end; justify-content: center; border: 2px solid var(--ink); overflow: hidden; }
.scrap-inner canvas { display: block; }
/* the strip under the picture: seafoam dither track with pink arrow boxes (as in the reference) */
.scrap-strip { flex: none; display: flex; height: 14px; margin-top: 3px; border: 1px solid var(--ink); background: var(--paper); }
.scrap-track { flex: 1; background: var(--d-scroll); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.scrap-count { background: var(--paper); font: var(--geneva9); padding: 0 3px; border: 1px solid var(--ink); height: 12px; line-height: 10px; }
.sb-arrow { width: 14px; height: 12px; background-color: var(--pal-pink); background-repeat: no-repeat; background-position: center; }
.sb-arrow.pressed { filter: invert(1); }

/* ---------- Control Panel ---------- */
.cp { padding: 6px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; font: var(--geneva); height: 100%; background: var(--pal-lilac); }
.cp-section { border: 1px solid var(--ink); padding: 3px 5px 5px; background: var(--paper); }
.cp-desktop { grid-column: 1 / 3; }
.cp-heading { font: var(--chicago); margin-bottom: 3px; }
.cp-pattern-row { display: flex; gap: 10px; align-items: center; }
.cp-fatbits { display: grid; grid-template-columns: repeat(8, 6px); grid-auto-rows: 6px; gap: 1px; padding: 1px; background: var(--pal-gray); border: 1px solid var(--ink); }
.cp-preview-col { display: flex; flex-direction: column; gap: 5px; align-items: center; flex: 1; }
.cp-preview { width: 100%; height: 30px; border: 1px solid var(--ink); }
.cp-arrows { display: flex; gap: 6px; align-items: center; }
.cp-arrow { width: 16px; height: 13px; border: 1px solid var(--ink); background: var(--paper) no-repeat center; }
.cp-arrow:active { filter: invert(1); }
.cp-swatches { display: flex; gap: 1px; flex-wrap: wrap; }
.cp-hl { padding: 0 3px; border: 1px solid var(--ink); }
.cp-swatch-row { display: flex; gap: 6px; margin-top: 3px; align-items: center; }
.cp-swatch-label { width: 34px; }
.cp-swatch { width: 10px; height: 10px; border: 1px solid var(--ink); }
.cp-swatch.on { box-shadow: inset 0 0 0 1px var(--paper), inset 0 0 0 2px var(--ink); }
.cp-radios { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.cp-radios label { display: flex; align-items: center; gap: 3px; }

/* ---------- About ---------- */
.about { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font: var(--geneva); }
.about-head { display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.about-title { font: var(--chicago); }
.about-total { font: var(--geneva9); display: flex; justify-content: space-between; }
.about-row { display: grid; grid-template-columns: 16px 1fr 44px 90px; align-items: center; gap: 5px; font: var(--geneva9); }
.about-kb { text-align: right; }
.about-bar { height: 9px; border: 1px solid var(--ink); display: block; background: var(--pal-leaf); }
.about-bar span { display: block; height: 100%; max-width: 100%; min-width: 4px; background: var(--d-dark); border-right: 1px solid var(--ink); }