:root {
  --bg: #0e0d0c;
  --ink: #efe6d8;
  --dim: #9a9087;
  --faint: #5a534c;
  --line: rgba(239, 230, 216, 0.1);
  --panel: rgba(18, 16, 14, 0.78);
  --copper: #d6834a;
  --gold: #e9bd62;
  --visitor: #93b6d8;
  --earn: #a8d08f;
  --bad: #e38a74;
  --display: 'Doto', 'JetBrains Mono', ui-monospace, monospace;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 20px;
  /* Gutters that also keep clear of a phone's notch, Dynamic Island and home bar. */
  --gt: max(var(--gutter), env(safe-area-inset-top));
  --gr: max(var(--gutter), env(safe-area-inset-right));
  --gb: max(var(--gutter), env(safe-area-inset-bottom));
  --gl: max(var(--gutter), env(safe-area-inset-left));
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 13px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
#scene.hovering { cursor: pointer; }
#scene:active { cursor: grabbing; }

button, input { font: inherit; color: inherit; }

button {
  background: rgba(239, 230, 216, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
button:hover { background: rgba(239, 230, 216, 0.12); border-color: rgba(239, 230, 216, 0.22); }
button:active { transform: translateY(1px); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
button, .attach { touch-action: manipulation; }
/* iPhone zooms the whole page into any text box smaller than 16px. */
@media (pointer: coarse) { input { font-size: 16px; } }

[hidden] { display: none !important; }

/* brand */
.brand {
  position: fixed;
  top: var(--gt);
  left: var(--gl);
  pointer-events: none;
  user-select: none;
}
.brand h1 {
  margin: 0;
  font: 900 54px/0.9 var(--display);
  letter-spacing: 0.02em;
  color: var(--copper);
}
.brand .tag { margin: 6px 0 12px; color: var(--dim); }
.status { display: flex; align-items: center; gap: 8px; }
.pip {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 0 rgba(214, 131, 74, 0.6);
}
.pip.awake { background: var(--copper); animation: pulse 1.6s infinite; }
.pip.sleeping { background: #6d7c8e; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(214, 131, 74, 0.55); }
  100% { box-shadow: 0 0 0 9px rgba(214, 131, 74, 0); }
}

.clock { color: var(--faint); margin-left: 6px; }
.minimap {
  display: block;
  width: 132px;
  height: 132px;
  margin-top: 14px;
  border-radius: 50%;
  pointer-events: none;
}

/* feelings */
.feelings {
  position: fixed;
  top: var(--gt);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  z-index: 3;
}
.feelings:empty { display: none; }
.feel { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 6px; row-gap: 4px; font-size: 11px; color: var(--dim); }
.feel .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.feel .meter {
  grid-column: 1 / -1;
  width: 68px;
  height: 6px;
  position: relative;
  background-image: radial-gradient(circle, var(--faint) 1.3px, transparent 1.5px);
  background-size: 6px 6px;
}
.feel .meter i {
  position: absolute;
  inset: 0 auto 0 0;
  background-image: radial-gradient(circle, var(--c) 1.5px, transparent 1.7px);
  background-size: 6px 6px;
  transition: width 0.8s;
}

/* tokens */
.tokens {
  position: fixed;
  top: var(--gt);
  right: var(--gr);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: none;
  border: none;
  border-radius: 12px;
  padding: 0;
}
.tokens:hover { background: none; }
.tokens .num {
  font: 900 64px/0.9 var(--display);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(233, 189, 98, 0.18);
}
.tokens .lbl { color: var(--dim); letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; margin-top: 4px; }
.tokens.bump .num { animation: bump 0.5s; }
@keyframes bump { 30% { transform: scale(1.08); } }
.token-pop {
  position: fixed;
  top: calc(var(--gt) + 82px);
  right: var(--gr);
  pointer-events: none;
  font: 800 18px var(--display);
  text-align: right;
}
.token-pop span { display: block; animation: rise 2.4s forwards; }
.token-pop .plus { color: var(--earn); }
.token-pop .minus { color: var(--copper); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } to { opacity: 0; transform: translateY(-14px); } }

/* panels */
.panel {
  position: fixed;
  background: var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  overflow: auto;
  z-index: 5;
}
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.panel h2 { margin: 0; font: 800 22px var(--display); color: var(--gold); }
.panel h3 { margin: 16px 0 6px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.x { padding: 2px 10px; font-size: 16px; line-height: 1.4; }
.ledger { top: calc(var(--gt) + 98px); right: var(--gr); width: min(380px, calc(100vw - var(--gl) - var(--gr))); max-height: calc(100dvh - var(--gt) - 98px - 150px); }
.ledger-totals { display: flex; gap: 18px; color: var(--dim); }
.budget { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--dim); font-size: 12px; }
.budget .bar {
  flex: 1;
  height: 6px;
  position: relative;
  background-image: radial-gradient(circle, var(--faint) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
}
.budget .bar i {
  position: absolute; inset: 0 auto 0 0;
  background-image: radial-gradient(circle, var(--gold) 1.6px, transparent 1.8px);
  background-size: 6px 6px;
  transition: width 0.6s;
}
.ledger-totals b { color: var(--ink); font-weight: 600; }
table.earn { width: 100%; border-collapse: collapse; }
table.earn td { padding: 2px 0; border-bottom: 1px dashed var(--line); }
table.earn td:last-child { text-align: right; color: var(--gold); white-space: nowrap; padding-left: 12px; }
.prices { color: var(--dim); }
.prices b { color: var(--copper); font-weight: 600; }
.entries { list-style: none; margin: 0; padding: 0; }
.entries li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--dim); }
.entries li .amt { white-space: nowrap; }
.entries li.earn .amt { color: var(--earn); }
.entries li.spend .amt { color: var(--copper); }

/* mind feed */
.mind {
  position: fixed;
  left: var(--gl);
  bottom: var(--gb);
  width: min(400px, calc(100vw - var(--gl) - var(--gr)));
  max-height: min(46dvh, 460px);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.mind-head {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 6px;
}
#feed {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow-y: auto;
  pointer-events: auto;
  mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
  padding-top: 40px;
  scrollbar-width: none;
}
#feed::-webkit-scrollbar { display: none; }
#feed li { padding: 3px 0; word-wrap: break-word; overflow-wrap: anywhere; }
#feed li.thought { color: var(--ink); }
#feed li.thought.live::after { content: '▍'; color: var(--copper); animation: blink 1s steps(2) infinite; }
#feed li.action { color: var(--dim); }
#feed li.action::before { content: '→ '; color: var(--copper); }
#feed li.result { color: var(--faint); font-size: 12px; }
#feed li.result.bad { color: var(--bad); }
#feed li.say { color: var(--gold); }
#feed li.say::before { content: '“'; }
#feed li.say::after { content: '”'; }
#feed li .who { opacity: 0.7; }
#feed li.visitor { color: var(--visitor); }
#feed li.visitor .who { opacity: 0.7; }
#feed li.earn { color: var(--earn); font-size: 12px; }
#feed li.spend { color: var(--copper); font-size: 12px; }
#feed li.system { color: var(--faint); font-size: 12px; font-style: italic; }
#feed li.ask { color: var(--gold); font-style: italic; }
@keyframes blink { 50% { opacity: 0; } }

/* live code */
.code {
  position: fixed;
  right: var(--gr);
  top: 50%;
  transform: translateY(-50%);
  width: min(460px, 38vw);
  max-height: 46dvh;
  display: flex;
  flex-direction: column;
  background: rgba(14, 13, 12, 0.82);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  z-index: 4;
}
.code-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--copper); }
.code .blink { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); animation: blink 1s steps(2) infinite; }
.code.done .blink { animation: none; background: var(--earn); }
#code-text {
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  font: 11.5px/1.55 var(--mono);
  color: #d9cfc0;
  white-space: pre;
  flex: 1;
}

/* center dock: what she's doing, actions, view */
.center-dock {
  position: fixed;
  left: 50%;
  bottom: var(--gb);
  transform: translateX(-50%);
  width: min(440px, calc(100vw - var(--gl) - var(--gr)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
}
.doing {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 8px 16px;
  background: var(--panel);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-align: center;
}
.doing .pip { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6d7c8e; }
.doing.awake .pip { background: var(--copper); animation: pulse 1.6s infinite; }
.dock-row { display: flex; gap: 8px; align-items: center; }
#actions-btn { color: var(--gold); }
.view-toggle { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: rgba(239, 230, 216, 0.04); }
.view-toggle button { border: none; background: none; padding: 5px 12px; font-size: 12px; color: var(--dim); }
.view-toggle button[aria-pressed='true'] { background: rgba(214, 131, 74, 0.2); color: var(--copper); }
.actions-menu { position: static; width: 100%; max-height: 46dvh; padding: 12px 16px; }
.actions-menu h3:first-child { margin-top: 0; }
.action-list { display: flex; flex-wrap: wrap; gap: 6px; }
.action-list button { padding: 5px 12px; font-size: 12px; }
.action-list button.here { border-color: rgba(214, 131, 74, 0.55); color: var(--copper); }
.menu-note { margin: 12px 0 0; color: var(--faint); font-size: 12px; }
.menu-note.first { margin: 0 0 4px; color: var(--dim); }
.replay {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: rgba(214, 131, 74, 0.14);
  border: 1px solid rgba(214, 131, 74, 0.4);
  color: var(--copper);
  font-size: 12px;
}
.replay .blink { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); animation: blink 1s steps(2) infinite; }
.replay button { padding: 2px 10px; font-size: 12px; }
#replay-again { font-size: 12px; color: var(--dim); }
#follow-btn { padding: 6px 12px; font-size: 12px; color: var(--dim); }

/* Follow mode: nothing on screen but her world (and what she says). */
body.following > :not(#scene):not(#bubble):not(#follow-exit) { display: none !important; }
body.following #scene { cursor: none; }
body.following.stirred #scene { cursor: auto; }
.follow-exit {
  display: none;
  position: fixed;
  top: var(--gt);
  right: var(--gr);
  z-index: 40;
  font-size: 12px;
  color: var(--dim);
  background: var(--panel);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.following .follow-exit { display: block; }
body.following.stirred .follow-exit { opacity: 1; pointer-events: auto; }

/* actions */
.actions {
  position: fixed;
  right: var(--gr);
  bottom: var(--gb);
  width: min(360px, calc(100vw - var(--gl) - var(--gr)));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
#msg-form { display: flex; gap: 8px; }
.attach {
  display: inline-flex; align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.attach:hover { color: var(--ink); border-color: rgba(239, 230, 216, 0.22); }
.pic-chip { display: flex; justify-content: flex-end; align-items: center; gap: 6px; color: var(--visitor); font-size: 12px; }
.pic-chip button { padding: 0 8px; }
#msg {
  flex: 1;
  min-width: 0;
  background: rgba(239, 230, 216, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
}
#msg::placeholder { color: var(--faint); }
.toast { color: var(--dim); text-align: right; font-size: 12px; }

.info { right: var(--gr); bottom: calc(var(--gb) + 100px); width: min(420px, calc(100vw - var(--gl) - var(--gr))); max-height: min(62dvh, 640px); }
.tabs { display: flex; gap: 6px; }
.tabs button { padding: 4px 12px; }
.tabs button[aria-selected='true'] { background: rgba(214, 131, 74, 0.18); border-color: rgba(214, 131, 74, 0.5); color: var(--copper); }
.item { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.item:last-child { border-bottom: none; }
.item .name { font-weight: 600; color: var(--ink); }
.item .meta { color: var(--faint); font-size: 12px; }
.item .desc { color: var(--dim); margin-top: 2px; }
.item button { margin-top: 6px; padding: 3px 10px; font-size: 12px; }
.item a { color: var(--visitor); overflow-wrap: anywhere; }
.info h3:first-of-type { margin-top: 4px; }
.about p { color: var(--dim); margin: 0 0 10px; }
.about b { color: var(--ink); font-weight: 600; }
.about a { color: var(--visitor); }

.diary { left: var(--gl); top: calc(var(--gt) + 130px); width: min(390px, calc(100vw - var(--gl) - var(--gr))); max-height: calc(100dvh - var(--gt) - 130px - var(--gb)); z-index: 6; }
.mood { margin: 6px 0 12px; }
.mood-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.mood-head span:last-child { color: var(--gold); text-transform: none; letter-spacing: 0; }
#mood-arc { width: 100%; height: 60px; display: block; }
#mood-arc .midline { stroke: var(--faint); stroke-dasharray: 1 5; stroke-linecap: round; }
#mood-arc .arc { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 0.1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.diary-entries, .me-list { list-style: none; margin: 0; padding: 0; }
.diary-entries li { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.diary-entries li:last-child { border-bottom: none; }
.diary-entries p { margin: 4px 0 0; color: var(--ink); }
.entry-head { display: flex; gap: 6px; align-items: center; }
.tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(214, 131, 74, 0.16); color: var(--copper); }
.tag.place { background: rgba(147, 182, 216, 0.14); color: var(--visitor); }
.when { color: var(--faint); font-size: 11px; margin-left: auto; }
.me-list li { padding: 4px 0; color: var(--dim); }
.me-list .when { margin: 0 4px 0 0; }
.empty { color: var(--faint); }
.name-form { display: flex; align-items: center; gap: 8px; }
.name-form label { color: var(--dim); }
.name-form input { flex: 1; min-width: 0; background: rgba(239, 230, 216, 0.05); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--visitor); }
.me-meta { color: var(--faint); font-size: 12px; margin: 8px 0 0; }
.me-notes { color: var(--ink); margin: 0; }

.source { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - var(--gl) - var(--gr))); max-height: 80dvh; z-index: 8; }
#source-desc { color: var(--dim); margin: 0 0 10px; }
#source-code { margin: 0; font: 12px/1.55 var(--mono); color: #d9cfc0; white-space: pre; overflow: auto; background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 12px; }

/* bubble + tip */
.bubble {
  position: fixed;
  left: 0; top: 0;
  max-width: 280px;
  padding: 9px 13px;
  background: var(--ink);
  color: #1a1715;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 12px; height: 12px;
  background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.tip {
  position: fixed;
  left: 0; top: 0;
  max-width: 300px;
  padding: 8px 12px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 10px;
  pointer-events: none;
  transform: translate(14px, 14px);
  z-index: 6;
}
.tip .name { color: var(--copper); font-weight: 600; }
.tip .desc { color: var(--dim); }
.tip .link { color: var(--visitor); font-size: 12px; }

.hint {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: var(--faint);
  font-size: 11px;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 1s;
}
.hint.gone { opacity: 0; }

.admin {
  position: fixed;
  left: 50%;
  top: var(--gt);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 14px;
  background: var(--panel);
  border: 1px solid rgba(214, 131, 74, 0.4);
  border-radius: 999px;
  color: var(--copper);
  z-index: 9;
}
.admin button { padding: 3px 10px; font-size: 12px; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--dim); }

/* At ground level the scene is busy, so give text something to sit on. */
body.view-3d .mind {
  background: rgba(14, 13, 12, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px 6px;
}
body.view-3d #feed { padding-top: 24px; mask-image: linear-gradient(to bottom, transparent 0, #000 36px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px); }
body.view-3d .brand h1, body.view-3d .brand .tag, body.view-3d .status { text-shadow: 0 1px 12px #000, 0 0 2px #000; }
body.view-3d .tokens .num { text-shadow: 0 1px 14px #000; }

@media (max-width: 1180px) {
  .mind { width: 300px; }
  .actions { width: 300px; }
  .center-dock { width: min(300px, calc(100vw - var(--gl) - var(--gr))); }
  .feel .meter { width: 52px; }
  .feelings { gap: 12px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  :root { --gutter: 16px; }
  .brand h1 { font-size: 40px; }
  .brand .tag { display: none; }
  .tokens .num { font-size: 44px; }
  .token-pop { top: calc(var(--gt) + 58px); }
  .ledger { top: calc(var(--gt) + 76px); max-height: calc(100dvh - var(--gt) - 76px - 300px); }
  .mind { max-height: 18dvh; bottom: calc(var(--gb) + 184px); width: calc(100vw - var(--gl) - var(--gr)); }
  #feed { padding-top: 18px; mask-image: linear-gradient(to bottom, transparent 0, #000 22px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
  .center-dock { bottom: calc(var(--gb) + 92px); width: calc(100vw - var(--gl) - var(--gr)); gap: 6px; }
  .feelings { top: calc(var(--gt) + 58px); gap: 8px; padding: 7px 12px; }
  .feel { font-size: 0; column-gap: 0; }
  .feel .pip { margin: 0 auto; }
  .feel .meter { width: 44px; }
  .minimap { width: 96px; height: 96px; margin-top: 96px; }
  .diary { top: calc(var(--gt) + 104px); max-height: calc(100dvh - var(--gt) - 104px - var(--gb) - 220px); }
  .clock { display: none; }
  .actions { left: var(--gl); width: auto; }
  .actions .buttons { position: absolute; right: 0; bottom: 50px; }
  .buttons { justify-content: flex-start; }
  .code { top: calc(var(--gt) + 144px); transform: none; width: calc(100vw - var(--gl) - var(--gr)); max-height: 26dvh; left: var(--gl); }
  .info { bottom: calc(var(--gb) + 112px); left: var(--gl); width: auto; max-height: 56dvh; }
  .hint { display: none; }
  .admin { top: auto; bottom: calc(var(--gb) + 152px); }
}

/* Short portrait screens (a small iPhone, or the folded iPhone Duo): her
   thoughts get a few lines, so there's room left to see her world. */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) {
  .mind { max-height: 104px; }
  .view-3d .mind { max-height: 116px; }
  .mind-head { margin-bottom: 2px; }
}

/* On its side (a phone turned sideways, or an unfolded iPhone Duo): her world
   in the middle, her thoughts down the left, everything else down the right. */
@media (orientation: landscape) and (max-width: 1020px), (orientation: landscape) and (max-height: 500px) {
  :root { --gutter: 12px; --side: min(300px, 38vw); }
  .brand h1 { font-size: 34px; }
  .brand .tag { display: none; }
  .clock { display: none; }
  .status { font-size: 12px; }
  .minimap { display: none; }
  .tokens .num { font-size: 40px; }
  .tokens .lbl { font-size: 10px; }
  .token-pop { top: calc(var(--gt) + 52px); }
  .feelings { left: auto; right: var(--gr); transform: none; top: calc(var(--gt) + 64px); gap: 8px; padding: 6px 12px; }
  .feel { font-size: 0; column-gap: 0; }
  .feel .pip { margin: 0 auto; }
  .feel .meter { width: 40px; }
  .mind { top: calc(var(--gt) + 64px); bottom: var(--gb); max-height: none; width: min(280px, calc(100vw - var(--gl) - var(--gr) - var(--side) - 24px)); justify-content: flex-end; }
  #feed { padding-top: 18px; mask-image: linear-gradient(to bottom, transparent 0, #000 22px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
  .center-dock { left: auto; right: var(--gr); transform: none; width: var(--side); bottom: calc(var(--gb) + 84px); gap: 6px; }
  .actions-menu { max-height: calc(100dvh - var(--gt) - var(--gb) - 200px); }
  .doing { width: 100%; justify-content: center; padding: 7px 14px; font-size: 12px; }
  .dock-row { width: 100%; justify-content: flex-end; gap: 6px; }
  .dock-row > button, .buttons button { padding: 6px 11px; font-size: 12px; }
  .view-toggle button { padding: 4px 9px; }
  .actions { width: var(--side); gap: 6px; }
  .ledger { top: calc(var(--gt) + 56px); max-height: calc(100dvh - var(--gt) - 56px - var(--gb)); z-index: 7; }
  .diary { top: var(--gt); left: var(--gl); max-height: calc(100dvh - var(--gt) - var(--gb)); width: min(390px, calc(100vw - var(--gl) - var(--gr) - var(--side) - 12px)); }
  .info { top: var(--gt); bottom: var(--gb); right: calc(var(--gr) + var(--side) + 12px); max-height: none; width: min(420px, calc(100vw - var(--gl) - var(--gr) - var(--side) - 12px)); }
  .code { top: calc(var(--gt) + 64px); bottom: var(--gb); left: var(--gl); right: auto; transform: none; width: min(380px, calc(100vw - var(--gl) - var(--gr) - var(--side) - 24px)); max-height: none; }
  .source { max-height: calc(100dvh - var(--gt) - var(--gb)); }
  .hint { display: none; }
  .admin { top: auto; bottom: var(--gb); left: var(--gl); transform: none; }
}