:root {
  --desk: #2f5257;
  --desk-hi: #46777b;
  --desk-deep: #16282b;
  --face: #d6d0c2;
  --face-2: #e9e4d8;
  --hi: #fffdf5;
  --lo: #8a8478;
  --dk: #2a2823;
  --title: #1d2c4c;
  --title-2: #4a6890;
  --paper: #f4eedd;
  --ink: #23211c;
  --red: #b3261e;
  --amber: #ffb547;
  --hand-ink: #1f3a86;
  --tb-h: calc(42px + env(safe-area-inset-bottom, 0px));
  --ui: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --type: "Courier Prime", "Courier New", monospace;
  --hand: "Caveat", "Segoe Print", cursive;
  --crt: "VT323", ui-monospace, monospace;
  --out: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--face-2);
  --in: inset 1px 1px var(--lo), inset -1px -1px var(--hi), inset 2px 2px var(--dk), inset -2px -2px var(--face-2);
  --well: inset 1px 1px var(--lo), inset -1px -1px var(--hi);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
html { -webkit-text-size-adjust: 100%; }
button, a, [role="button"], .spine, .frame, .fitem, .dicon { touch-action: manipulation; }
body {
  background: var(--desk-deep);
  color: var(--ink);
  font: 13px/1.45 var(--ui);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px dotted var(--dk); outline-offset: -3px; }

/* ---------- Desktop ---------- */

#desktop {
  position: fixed;
  inset: 0 0 var(--tb-h) 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 28% 18%, var(--desk-hi) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, var(--desk) 30%, var(--desk-deep) 100%);
}
.wallpaper {
  position: absolute;
  right: 2%;
  bottom: -2%;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  pointer-events: none;
}
.wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/img/lighthouse-line.jpg) center bottom / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.5;
}
.lamp {
  position: absolute;
  left: 44.5%;
  top: 12.5%;
  width: 12.5%;
  height: 10.5%;
  padding: 0;
  border: 0;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.55), rgba(255, 196, 90, 0.18) 45%, transparent 70%);
  pointer-events: auto;
  cursor: pointer;
  animation: lamp 4.5s ease-in-out infinite;
}
.lamp:hover, .lamp:focus-visible { animation: none; opacity: 1; background: radial-gradient(circle, rgba(255, 224, 140, 0.85), rgba(255, 196, 90, 0.3) 45%, transparent 72%); outline: none; }
@keyframes lamp { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
.desk-seal {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  color: rgba(255, 253, 245, 0.22);
  font: 600 11px/1.3 var(--ui);
  letter-spacing: 0.3em;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

#icons {
  position: absolute;
  top: 10px;
  left: 8px;
  bottom: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 82px);
  grid-auto-columns: 92px;
  gap: 2px 6px;
  z-index: 1;
}
.dicon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px 4px;
  border: 0;
  background: none;
  color: #fff;
  font: 500 12px/1.25 var(--ui);
  text-align: center;
}
.dicon svg { width: 40px; height: 40px; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35)); }
.dicon span { padding: 1px 4px; text-shadow: 1px 1px 0 #0b1416; overflow-wrap: anywhere; }
.dicon:hover span { background: rgba(29, 44, 76, 0.55); }
.dicon:focus-visible { outline: none; }
.dicon:focus-visible span, .dicon.sel span { background: var(--title); outline: 1px dotted #fff; }

.note {
  --nc: #fff68f;
  --nb: #d9c84e;
  position: absolute;
  z-index: 2;
  width: 168px;
  border: 1px solid #1a1a1a;
  background: var(--nc);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.note.pink { --nc: #ffcad7; --nb: #e09aae; }
.note.blue { --nc: #cde8ff; --nb: #8fbde2; }
.note.green { --nc: #d6f5c6; --nb: #96c982; }
.note-link {
  display: block;
  margin-top: 8px;
  padding: 2px 8px;
  border: 1px solid #1a1a1a;
  background: #1a1a1a;
  color: var(--nc);
  font: 18px/1 var(--crt);
  cursor: pointer;
}
.note-link:hover { background: #333; }
.note-bar {
  position: relative;
  height: 13px;
  border-bottom: 1px solid #1a1a1a;
  background: repeating-linear-gradient(to bottom, var(--nb) 0 1px, var(--nc) 1px 2px);
}
.note-close {
  position: absolute;
  top: 2px;
  left: 4px;
  width: 11px;
  height: 7px;
  padding: 0;
  border: 1px solid #1a1a1a;
  background: var(--nc);
  box-shadow: 0 0 0 2px var(--nc);
}
.note-body {
  min-height: 92px;
  padding: 6px 9px 9px;
  color: #1a1a1a;
  font: 20px/1.05 var(--crt);
  white-space: pre-line;
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.75), inset -1px -1px rgba(0, 0, 0, 0.12);
}

/* ---------- Windows ---------- */

#windows { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 170px;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--out), 0 14px 34px rgba(0, 0, 0, 0.38);
  resize: both;
  overflow: hidden;
  pointer-events: auto;
}
.win:focus { outline: none; }
.win.minimized { display: none; }
.win.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  resize: none;
}
.win.opening { animation: win-open 0.14s ease-out; }
@keyframes win-open { from { transform: scale(0.96); opacity: 0.4; } }

.titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 24px;
  padding: 0 3px 0 5px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color: #fff;
  user-select: none;
  touch-action: none;
  cursor: default;
}
.win:not(.active) .titlebar { background: linear-gradient(90deg, #7c776c, #a8a295); color: #ebe7dc; }
.titlebar svg { width: 16px; height: 16px; flex: none; }
.titlebar h2 {
  flex: 1;
  margin: 0;
  overflow: hidden;
  font: 600 12px/1 var(--ui);
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tbtns { display: flex; gap: 2px; }
.tbtn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  background: var(--face);
  color: var(--dk);
  box-shadow: var(--out);
}
.tbtn:active { box-shadow: var(--in); }
.tbtn svg { width: 10px; height: 10px; }

.menubar { display: flex; flex: none; gap: 2px; padding: 3px 2px 1px; font-size: 12px; user-select: none; }
.menubar span { padding: 1px 7px; }
.menubar span::first-letter { text-decoration: underline; }

.wbody {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: 3px;
  overflow: auto;
  background: #fff;
  box-shadow: var(--in);
}
.wbody.gray { background: #5f5b52; }
.wbody.flush { overflow: hidden; }

.statusbar { display: flex; flex: none; gap: 3px; margin-top: 3px; font-size: 11px; }
.statusbar span {
  flex: 1;
  min-width: 0;
  padding: 2px 7px;
  overflow: hidden;
  box-shadow: var(--well);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statusbar span:last-child:not(:first-child) { flex: 0 0 auto; }

/* Buttons inside windows */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 12px;
  border: 0;
  background: var(--face);
  color: var(--ink);
  font: 500 12px var(--ui);
  text-decoration: none;
  box-shadow: var(--out);
}
.btn:active { box-shadow: var(--in); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.primary { outline: 1px solid var(--dk); outline-offset: -1px; }
.toolbar {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 4px 3px;
}
.toolbar .spacer { flex: 1; }
.field {
  height: 26px;
  min-width: 0;
  padding: 2px 6px;
  border: 0;
  background: #fff;
  font: 12px var(--ui);
  box-shadow: var(--in);
}

/* ---------- Taskbar & start menu ---------- */

#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--tb-h);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--face);
  box-shadow: inset 0 1px var(--face-2), inset 0 2px var(--hi);
}
#start {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 0;
  background: var(--face);
  font: 700 13px var(--ui);
  letter-spacing: 0.04em;
  box-shadow: var(--out);
}
#start svg { width: 22px; height: 22px; }
#start[aria-expanded="true"] { box-shadow: var(--in); }
#tasks { display: flex; flex: 1; gap: 4px; min-width: 0; overflow: hidden; }
.task {
  display: flex;
  flex: 0 1 190px;
  align-items: center;
  gap: 6px;
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  background: var(--face);
  font: 12px var(--ui);
  text-align: left;
  white-space: nowrap;
  box-shadow: var(--out);
}
.task svg { width: 16px; height: 16px; flex: none; }
.task span { overflow: hidden; text-overflow: ellipsis; }
.task.active {
  background: repeating-conic-gradient(var(--face-2) 0 25%, var(--face) 0 50%) 0 0 / 2px 2px;
  font-weight: 600;
  box-shadow: var(--in);
}
#tray {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  box-shadow: var(--well);
}
#tray button { display: grid; padding: 0; border: 0; background: none; }
#tray svg { width: 16px; height: 16px; }

#startmenu {
  position: fixed;
  left: 4px;
  bottom: calc(var(--tb-h) - 3px);
  z-index: 9001;
  display: flex;
  width: 264px;
  padding: 3px;
  background: var(--face);
  box-shadow: var(--out), 4px 4px 0 rgba(0, 0, 0, 0.3);
}
.sm-band {
  display: flex;
  align-items: flex-end;
  width: 30px;
  padding: 10px 0;
  background: linear-gradient(0deg, var(--title), var(--title-2));
  color: #fff;
  font: 700 15px var(--ui);
  letter-spacing: 0.12em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.sm-band b { color: var(--amber); }
.sm-items { display: flex; flex: 1; flex-direction: column; padding: 2px 0; }
.sm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 13px var(--ui);
  text-align: left;
  text-decoration: none;
}
.sm-item svg { width: 24px; height: 24px; flex: none; }
.sm-item:hover, .sm-item:focus-visible { background: var(--title); color: #fff; outline: none; }
.sm-sep { margin: 3px 2px; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); }

/* ---------- Notepad / terminal ---------- */

.notepad { padding: 12px 16px; font: 13px/1.6 var(--ui); white-space: normal; }
.notepad p { margin: 0 0 12px; max-width: 62ch; }
.toc { margin: 0 0 14px; padding: 0 0 0 2ch; list-style: none; }
.toc li { display: grid; grid-template-columns: 19ch 1fr; gap: 1ch; }
.toc a { position: relative; overflow: hidden; white-space: nowrap; }
.toc a::after { content: " ........................"; color: var(--ink); text-decoration: none; display: inline-block; }
@container (max-width: 460px) {
  .toc li { grid-template-columns: 1fr; margin-bottom: 6px; }
  .toc a::after { display: none; }
  .toc span { padding-left: 2ch; color: #555; }
}
.notepad a { color: var(--title); }

.term {
  min-height: 100%;
  padding: 14px 16px 20px;
  background: #0e0c08;
  color: var(--amber);
  font: 20px/1.2 var(--crt);
  text-shadow: 0 0 5px rgba(255, 170, 60, 0.45);
}
.term .sec { margin: 14px 0 6px; color: #ffe0a8; letter-spacing: 0.08em; }
.term .sec:first-child { margin-top: 0; }
.term .row { display: grid; grid-template-columns: 7ch 1fr; gap: 1ch; }
.term .row a, .term .row button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 181, 71, 0.4);
  text-underline-offset: 3px;
}
.term .row button:hover { color: #fff1d6; }
.term .t { color: #ffd28a; }
.term .cursor { display: inline-block; width: 0.6em; height: 1em; background: var(--amber); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Paper documents ---------- */

.desk-gray { min-height: 100%; padding: 18px; background: #5f5b52; }
.paper {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 34px 38px 40px;
  background: var(--paper);
  background-image: radial-gradient(rgba(120, 100, 60, 0.07) 1px, transparent 1px);
  background-size: 3px 3px;
  color: var(--ink);
  font: 14px/1.6 var(--type);
  box-shadow: 0 2px 0 #d9d1bb, 0 8px 22px rgba(0, 0, 0, 0.35);
}
.paper h3 { margin: 22px 0 6px; font: 700 13px/1.3 var(--type); letter-spacing: 0.12em; }
.paper p { margin: 0 0 10px; }
.paper ul, .paper ol { margin: 0 0 10px; padding-left: 22px; }
.paper li { margin-bottom: 6px; }
.paper a[data-person], .paper a[data-open] { color: inherit; text-decoration: underline; text-decoration-color: rgba(179, 38, 30, 0.55); text-underline-offset: 2px; }
.paper a[data-person]:hover, .paper a[data-open]:hover { background: rgba(179, 38, 30, 0.1); }
.paper blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 3px solid #cbbf9f; }
.paper h4 { margin: 14px 0 4px; font: 700 13px var(--type); }
.doc-head { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 3px double var(--ink); }
.doc-org { font: 700 12px/1.3 var(--type); letter-spacing: 0.16em; }
.doc-kind { font: 700 22px/1.2 var(--type); letter-spacing: 0.06em; }
.stamp {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 3px 10px;
  border: 3px double var(--red);
  color: var(--red);
  font: 700 17px var(--ui);
  letter-spacing: 0.16em;
  opacity: 0.78;
  transform: rotate(-11deg);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 8px;
  border-top: 1.5px solid var(--ink);
  border-left: 1.5px solid var(--ink);
}
.form-grid > div { padding: 4px 8px 6px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid dt { font: 700 10px/1.2 var(--ui); letter-spacing: 0.1em; color: #6b6352; }
.form-grid dd { margin: 2px 0 0; font: 15px/1.3 var(--type); }
.lanes li { padding-left: 4px; }
.hand { font: 600 26px/1.1 var(--hand); color: var(--hand-ink); }
.margin-note { margin-top: 18px; transform: rotate(-2deg); }
.sig { margin-top: 18px; }
.redact { background: var(--ink); color: var(--ink); letter-spacing: -0.1em; }
.result { font-weight: 700; }

.sealed { margin: 6px 0 12px; }
.seal-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px dashed #9a8f73;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.035) 0 8px, transparent 8px 16px);
  font: 700 12px var(--ui);
  letter-spacing: 0.08em;
  text-align: left;
}
.seal-btn:hover { border-color: var(--red); }
.wax {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d0463c, #8e1b15 70%);
  color: #f6d7cf;
  font: 700 11px var(--type);
  box-shadow: 0 0 0 3px rgba(142, 27, 21, 0.25);
}
.seal-body { display: none; }
.sealed.open .seal-btn { display: none; }
.sealed.open .seal-body { display: block; padding: 10px 14px 2px; border-left: 3px solid var(--red); background: rgba(179, 38, 30, 0.05); }

.inventory { width: 100%; border-collapse: collapse; font: 13px/1.4 var(--type); }
.inventory th { padding: 4px 6px; border-bottom: 2px solid var(--ink); font: 700 10px var(--ui); letter-spacing: 0.1em; text-align: left; }
.inventory td { padding: 5px 6px; border-bottom: 1px dotted #a99d80; vertical-align: top; }
.inventory td:first-child { width: 3ch; color: #6b6352; }
.inventory td:last-child { width: 30%; }

.paper a.tape-link, .tape-link {
  display: inline-block;
  margin: 0 2px;
  padding: 0 6px;
  border-radius: 2px;
  background: #1a1a1a;
  color: #f3ead0;
  font: 700 10px/17px var(--ui);
  letter-spacing: 0.08em;
  text-decoration: none;
  vertical-align: 1px;
  white-space: nowrap;
}
.paper a.tape-link:hover, .tape-link:hover { background: var(--red); }
.tape-link.doc-link { background: #f3ead0; color: #1a1a1a; box-shadow: inset 0 0 0 1px #6b6352; }
.reading-by { margin-top: -6px; color: #6b6352; font-size: 13px; }
.reading { margin: 14px 0 0; font: 15px/1.7 var(--type); white-space: pre-line; }
.seal-confirm {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px dashed var(--red);
  font: 600 12px var(--ui);
}
.sealed.asking .seal-btn { display: none; }
.sealed.asking .seal-confirm { display: flex; }

/* ---------- Dossier ---------- */

.dossier-top { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: start; margin-bottom: 14px; }
.mug { margin: 0; }
.mug svg { display: block; width: 100%; height: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 11ch 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px dotted #a99d80; }
.facts dt { font: 700 10px/1.9 var(--ui); letter-spacing: 0.1em; color: #6b6352; }
.facts dd { margin: 0; }
.profile-line { font-style: italic; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sheet-label {
  margin: 26px 0 4px !important;
  padding-top: 12px;
  border-top: 1.5px solid var(--ink);
  font: 700 11px var(--ui) !important;
  letter-spacing: 0.14em !important;
  color: #6b6352;
}
.dossier section h3 { margin-top: 18px; }
.cut-doc .stamp { border-color: #444; color: #444; }
.corrupt-err { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.corrupt-err svg { width: 24px; height: 24px; flex: none; }
.corrupt-dump {
  margin: 14px 0;
  padding: 10px 12px;
  background: #101410;
  color: #8fd68f;
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

@container (max-width: 520px) {
  .paper { padding: 24px 18px 30px; }
  .dossier-top { grid-template-columns: 96px 1fr; gap: 12px; }
  .stamp { top: 10px; right: 10px; font-size: 13px; }
  .form-grid { grid-template-columns: 1fr; }
}
.wbody { container-type: inline-size; }

/* ---------- Explorer ---------- */

.addr { display: flex; flex: none; align-items: center; gap: 6px; padding: 4px 4px 2px; font-size: 12px; }
.addr .field { flex: 1; display: flex; align-items: center; }
.explorer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-content: start;
  gap: 6px;
  padding: 12px;
}
.fitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: 11.5px/1.25 var(--ui);
  text-align: center;
  overflow-wrap: anywhere;
}
.fitem svg { width: 34px; height: 34px; }
.fitem:hover span { background: #dfe5f0; }
.fitem:focus-visible { outline: none; }
.fitem:focus-visible span { background: var(--title); color: #fff; outline: 1px dotted var(--dk); }

/* ---------- Viewers ---------- */

.viewer { display: grid; place-items: center; height: 100%; padding: 14px; background: #4b4842; }
.viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.viewer.zoom { display: block; overflow: auto; }
.viewer.zoom img { max-width: none; max-height: none; margin: 0 auto; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; background: #4b4842; min-height: 100%; }
.pages img { display: block; width: 100%; max-width: 820px; height: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); background: #fff; }

.dialog-body { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 8px; }
.dialog-body svg { width: 34px; height: 34px; flex: none; }
.dialog-body p { margin: 0 0 6px; }
.dialog-actions { display: flex; justify-content: center; gap: 8px; padding: 6px 0 12px; }

/* ---------- About box ---------- */

.wbody.about-body { display: flex; flex-direction: column; background: var(--face); box-shadow: none; }
.about-top { display: flex; gap: 14px; padding: 16px 16px 8px; font: 12px/1.6 var(--ui); }
.about-top svg { width: 40px; height: 40px; flex: none; }
.about-top b { font-size: 14px; }
.about-actions { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px 12px; margin-top: auto; }
.roll { flex: 1; min-height: 0; margin: 6px 12px 0; overflow-y: auto; background: #0e0c08; box-shadow: var(--in); }
.roll:focus-visible { outline: 1px dotted #fff; outline-offset: -4px; }
.roll-track { padding: 22px 16px 28px; color: #f3ead0; font: 12.5px/1.55 var(--ui); text-align: center; }
.roll-title { color: var(--amber); font: 30px/1 var(--crt); letter-spacing: 0.06em; }
.roll-head { margin: 26px 0 8px; color: var(--amber); font: 600 11px var(--ui); letter-spacing: 0.24em; }
.roll-sub { margin: 14px 0 4px; color: #9fb7bb; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.roll-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roll-row span:first-child { text-align: right; color: #c9c2b0; }
.roll-row span:last-child { text-align: left; }
.roll-thanks { margin: 0 0 10px; }
.roll-thanks a { color: var(--amber); }
.roll-last { margin: 26px 0 0; color: #c9c2b0; font-style: italic; }
.roll-last a { color: var(--amber); }

/* ---------- Notepad extras ---------- */

.np-h { margin: 0 0 10px; font: 600 13px var(--ui); letter-spacing: 0.08em; }
.notepad ul { margin: 0 0 12px; padding-left: 22px; max-width: 62ch; }
.notepad li { margin-bottom: 4px; }
.console {
  margin: 0 0 14px;
  padding: 10px 14px;
  max-width: 64ch;
  background: #0e0c08;
  color: var(--amber);
  font: 19px/1.2 var(--crt);
  text-shadow: 0 0 5px rgba(255, 170, 60, 0.45);
  box-shadow: var(--in);
}
.console p { margin: 0 0 10px; }
.console b { color: #fff1d6; font-weight: normal; }
.console-cmd { color: #ffe0a8; margin-bottom: 6px; }

/* ---------- Tapes ---------- */

.tapes { display: grid; grid-template-columns: 220px 1fr; height: 100%; background: #2d2a25; }
.shelf { padding: 10px; overflow: auto; background: linear-gradient(90deg, #4a3a29, #5a4733); box-shadow: inset -3px 0 8px rgba(0, 0, 0, 0.35); }
.spine {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  margin-bottom: 7px;
  padding: 0 8px;
  border: 0;
  background: linear-gradient(#232323, #111);
  box-shadow: 0 2px 0 #000, inset 0 1px rgba(255, 255, 255, 0.08);
  text-align: left;
}
.spine span {
  flex: 1;
  padding: 2px 8px;
  overflow: hidden;
  background: #f1ebdb;
  color: #1c1a16;
  font: 700 19px/1.15 var(--hand);
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: rotate(-0.6deg);
}
.spine.missing span { background: #c9c2b0; color: #6c6556; text-decoration: line-through; }
.spine[aria-pressed="true"] { outline: 2px solid var(--amber); outline-offset: 1px; }
.deck { display: flex; flex-direction: column; min-width: 0; padding: 14px; gap: 10px; overflow: auto; }
.tv {
  display: grid;
  flex: 1;
  place-items: center;
  min-height: 240px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(#3a3631, #1f1c18);
  box-shadow: inset 0 0 0 2px #4d4841, inset 0 0 30px rgba(0, 0, 0, 0.6);
}
.screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 210px;
  overflow: hidden;
  border-radius: 18px / 14px;
  background: #050605;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9);
}
.screen video { max-width: 100%; max-height: 100%; display: block; }
.screen.portrait video { height: 100%; max-height: 62vh; }
.static {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .8 0 0 0 0 .8 0 0 0 1.2 -.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: static 0.4s steps(4) infinite;
  color: #fff;
  font: 26px var(--crt);
  text-shadow: 0 0 6px #000, 0 0 2px #000;
  letter-spacing: 0.08em;
  text-align: center;
}
@keyframes static { 0% { background-position: 0 0; } 25% { background-position: -40px 30px; } 50% { background-position: 50px -20px; } 75% { background-position: -30px -50px; } }
.cassette { width: min(320px, 90%); }
.cassette .reel { transform-box: fill-box; transform-origin: center; }
.cassette.playing .reel { animation: spin 2.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.deck audio { width: 100%; }
.deck-label { color: #e9e2cf; font: 12px/1.5 var(--ui); }
.deck-label b { color: var(--amber); font-weight: 600; letter-spacing: 0.06em; }

@container (max-width: 560px) {
  .tapes { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .shelf { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
  .spine { flex: 0 0 170px; margin: 0; }
}

/* ---------- Photos ---------- */

.contact { min-height: 100%; padding: 16px; background: #1a1916; color: #d9d2bf; }
.contact h3 { margin: 22px 0 12px; font: 600 12px var(--ui); letter-spacing: 0.14em; color: var(--amber); }
.contact h3:first-child { margin-top: 0; }
.frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.frame {
  display: block;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 6px solid #0c0b09;
  background: #2b2924;
  box-shadow: 0 0 0 1px #3d3a33;
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame.blank { display: grid; place-items: center; color: #5d584c; font: 11px var(--ui); letter-spacing: 0.1em; cursor: default; }
.contact .msg { margin: 0 0 14px; max-width: 52ch; font-size: 12px; color: #aaa38f; }
.photo-view { position: relative; height: 100%; }
.photo-nav { position: absolute; inset: auto 0 10px; display: flex; justify-content: center; gap: 8px; }

/* ---------- Case board (relationship map) ---------- */

.board { display: flex; flex-direction: column; height: 100%; }
.board-main { position: relative; display: grid; grid-template-columns: 1fr 300px; flex: 1; min-height: 0; }
.cork {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background-color: #b48655;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23c)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, #c4975f, #9c7041);
  box-shadow: inset 0 0 0 6px #5b3d22, inset 0 0 0 8px #3e2914, inset 0 0 40px rgba(0, 0, 0, 0.35);
  cursor: grab;
  touch-action: none;
}
.cork.panning { cursor: grabbing; }
.graph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.edge { fill: none; stroke: #a8231b; stroke-width: 1.4; stroke-linecap: round; opacity: 0.38; transition: opacity 0.2s, stroke-width 0.2s; }
.graph.has-hot .edge { opacity: 0.1; }
.graph .edge.hot { opacity: 0.95; stroke-width: 2.2; }
.graph.focusing .edge { opacity: 0; }
.graph.focusing .edge.near { opacity: 0.18; stroke: #6b2a22; stroke-width: 1; }
.graph.focusing .edge.on { opacity: 0.95; stroke-width: 2.4; }
.node { cursor: pointer; transition: opacity 0.25s; }
.node .card { transition: transform 0.25s; }
.node:hover .card, .node:focus-visible .card { transform: scale(1.12); }
.node:focus { outline: none; }
.node .paper-card { fill: #fbf8ef; }
.node .ini { fill: #fbf8ef; font: 700 17px var(--type); text-anchor: middle; }
.node .nm { fill: #1f1d18; font: 700 9.5px var(--type); text-anchor: middle; }
.node.dim { opacity: 0.2; }
.graph.focusing .node.faded { opacity: 0.07; pointer-events: none; }
.node.focused .card { transform: scale(1.45); }
.node.hl .card { transform: scale(1.18); }
.node.focused .paper-card { fill: #fff; }
.board-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 3px 8px;
  background: rgba(251, 248, 239, 0.9);
  font: 11px var(--ui);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.zoom-btns { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.zoom-btns .btn { justify-content: center; width: 28px; min-height: 26px; padding: 0; font-weight: 700; }

.board-panel { min-width: 0; overflow: auto; background: var(--paper); border-left: 2px solid #3e2914; font: 13px/1.5 var(--type); }
.panel-in { padding: 14px 16px 24px; }
.panel-in h3 { margin: 0 0 4px; font: 700 18px/1.2 var(--type); }
.panel-in .kicker { font: 700 10px var(--ui); letter-spacing: 0.14em; color: #6b6352; }
.panel-in .sub { margin: 0 0 10px; color: #4b463b; }
.legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid #b5aa8d;
  background: #fffaf0;
  font: 11px var(--ui);
}
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.3); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.index h4 { margin: 14px 0 4px; font: 700 10px var(--ui); letter-spacing: 0.14em; color: #6b6352; }
.index button, .conn-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: none;
  font: 13px/1.35 var(--type);
  text-align: left;
}
.index button:hover, .conn-name:hover { color: var(--red); }
.index button small, .conn-name small { color: #7a725f; font-size: 11px; }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); transform: translateY(-1px); }
.pcard { display: grid; grid-template-columns: 74px 1fr; gap: 12px; margin-bottom: 8px; }
.pcard svg { width: 74px; height: auto; display: block; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
.pcard .role { margin: 2px 0 0; color: #4b463b; font-size: 12px; }
.pcard .tier { margin-top: 4px; font: 10px var(--ui); letter-spacing: 0.08em; color: #6b6352; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.conns { margin: 0; padding: 0; list-style: none; }
.conns li { padding: 8px 0; border-top: 1px dotted #a99d80; }
.conns q { display: block; margin: 3px 0 0 14px; font-size: 12px; line-height: 1.45; quotes: none; }
.conns q b { display: block; font: 700 9.5px var(--ui); letter-spacing: 0.1em; color: #7a725f; }
.conns li.hot { background: rgba(179, 38, 30, 0.07); }

@container (max-width: 640px) {
  .board-main { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(0, 46%); }
  .board-panel { border-left: 0; border-top: 2px solid #3e2914; }
  .board-hint { display: none; }
}

/* ---------- SkiSea ---------- */

.ss { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; background: #0d1a1d; user-select: none; touch-action: none; }
.ss-stage { position: relative; }
.ss-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; cursor: crosshair; }
.ss-hud {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 10px;
  padding: 2px 8px 3px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font: 16px/1 var(--crt);
  pointer-events: none;
}
.ss-hud b { font-weight: normal; text-align: right; }
.ss-throttle { position: absolute; top: 8px; left: 8px; width: 74px; height: 10px; border: 1px solid #000; background: #fff; pointer-events: none; }
.ss-throttle i { display: block; width: 100%; height: 100%; background: #2e7d74; }
.ss-throttle.low i { background: #d03a2f; }
.ss-toast {
  position: absolute;
  top: 36%;
  left: 50%;
  padding: 2px 10px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font: 20px var(--crt);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.25s;
  pointer-events: none;
}
.ss-toast.show { opacity: 1; }
.ss-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; background: rgba(8, 18, 22, 0.5); }
.ss-card { max-width: 380px; padding: 14px 18px 12px; background: var(--face); box-shadow: var(--out); color: var(--ink); font: 12px/1.5 var(--ui); text-align: center; }
.ss-card h3 { margin: 0 0 6px; color: var(--title); font: 46px/1 var(--crt); letter-spacing: 0.04em; }
.ss-card p { margin: 0 0 8px; }
.ss-card kbd { display: inline-block; min-width: 18px; padding: 0 4px; background: #fff; font: 11px var(--ui); box-shadow: var(--out); }
.ss-card .btn { margin: 4px 0 6px; }
.ss-warn { color: var(--red); font-weight: 600; }
.ss-best { color: #6b6352; font-size: 11px; }
.ss-card .ss-credit { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--lo); color: #6b6352; font-size: 10px; letter-spacing: 0.04em; }
.ss-boost { display: none; position: absolute; right: 8px; bottom: 8px; padding: 8px 10px; border: 0; background: var(--face); font: 700 11px var(--ui); box-shadow: var(--out); }
.ss-boost:active { box-shadow: var(--in); }
@media (pointer: coarse) { .ss-boost { display: block; } }

/* ---------- Boot ---------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 26px 30px;
  overflow: hidden;
  background: #000;
  color: #c9c9c9;
  font: 22px/1.18 var(--crt);
  cursor: pointer;
}
#boot .bios { white-space: pre-wrap; }
#boot .bios b { color: #fff; font-weight: normal; }
#boot .ok { color: #7fd36b; }
#boot .skip { position: absolute; left: 30px; bottom: 22px; color: #777; font-size: 18px; }
#boot.login { display: grid; place-items: center; background: var(--desk); cursor: default; }
.login-box { width: min(380px, 92vw); padding: 3px; background: var(--face); box-shadow: var(--out), 0 14px 34px rgba(0, 0, 0, 0.4); color: var(--ink); font: 13px var(--ui); }
.login-box .titlebar { cursor: default; }
.login-inner { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px 14px 14px; }
.login-inner svg { width: 44px; height: 44px; }
.login-inner p { margin: 0 0 10px; }
.login-inner label { display: grid; grid-template-columns: 9ch 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.login-inner .field { height: 24px; line-height: 20px; }
.login-actions { display: flex; justify-content: flex-end; gap: 6px; grid-column: 1 / -1; }
#boot.fade { opacity: 0; transition: opacity 0.35s; }

/* ---------- CRT overlay ---------- */

.crt {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.32) 100%);
}
body.no-crt .crt { display: none; }

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  #icons {
    right: 8px;
    bottom: auto;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: 92px;
    grid-auto-columns: auto;
  }
  .note { display: none; }
  .wallpaper { width: 88vw; right: -10vw; }
  .win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; resize: none; }
  .win.dialog { left: 12px !important; top: 18% !important; width: calc(100% - 24px) !important; height: auto !important; }
  .win .tbtn[data-act="max"] { display: none; }
  .task { flex-basis: 120px; }
  #tray .clock-date { display: none; }
  .desk-seal { display: none; }
}

/* ---------- Touch screens: bigger targets ---------- */

@media (pointer: coarse), (max-width: 720px) {
  .titlebar { height: 40px; padding-left: 10px; }
  .titlebar h2 { font-size: 14px; }
  .titlebar svg { width: 20px; height: 20px; }
  .tbtn { width: 40px; height: 32px; }
  .tbtn svg { width: 13px; height: 13px; }
  .tbtns { gap: 4px; }
  .btn { min-height: 40px; padding: 6px 14px; font-size: 13px; }
  .field { height: 40px; font-size: 16px; }
  .toolbar { gap: 8px; padding: 6px 4px 4px; }
  .sm-item { padding: 12px 14px; font-size: 15px; }
  .task { height: 34px; }
  .zoom-btns .btn { width: 42px; min-height: 42px; font-size: 18px; }
  .fitem { padding: 10px 4px; }
  .spine { height: 48px; }
  .seal-btn { padding: 16px 14px; }
  .conns li { padding: 10px 0; }
  .index button, .conn-name { padding: 6px 0; }
}
@media (max-width: 720px) {
  .menubar { display: none; }
  .desk-gray { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}