:root {
  --ink: #3d2f45;
  --muted: #6d6376;
  --paper: #fffdf7;
  --lcd: #c7d1a4;
  --tint: #ffe3ee;
  --tint-2: #ffd2e3;
  --accent: #ff5c9d;
  --lamp: #f2c14e;
  --shell: #ff5c9d; /* shell body color, fills the phone frame's corners */
  --bezel: #3b3548; /* the dark frame around the screen */
  --btn: #6b4cff;
  --btn-light: #a996ff;
  --shadow: 0 3px 0 var(--edge);
  /* The soft look: a line is a darker tone of the body it sits on, never black; a thing's thickness is a thin darker edge
     under it, not a block of shadow thrown to one side; corners are a little round */
  --line: color-mix(in srgb, var(--ink) 46%, var(--shell));
  --edge: color-mix(in srgb, var(--ink) 26%, transparent);
  --round: 7px;
  color-scheme: only light; /* phones in dark mode (Chrome, Samsung, in-app browsers) keep this look, not a darkened copy */
}
/* The other themes are in themes.css */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Galmuri11", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Korean breaks only between words, never inside one */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* A pixel gingham tablecloth for the toy to sit on */
  background-color: var(--tint);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--tint-2) 70%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--tint-2) 70%, transparent) 50%, transparent 50%);
  background-size: 32px 32px;
}

/* A thin strip along the top of the screen's dark frame: the power light, DOVI in the middle, the settings gear.
   The two sides take equal room, so the name sits in the middle. */
.face-head { display: flex; align-items: center; gap: 6px; min-width: 0; height: 16px; margin: 0 0 3px; }
.head-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
.head-side.right { justify-content: flex-end; }

.face-head h1 { flex: none; margin: 0 0 0 3px; font-family: "Galmuri11", sans-serif; font-size: 12px; line-height: 1; letter-spacing: 3px; color: color-mix(in srgb, #fff 58%, var(--bezel)); }
.face-head .head-btn { flex: none; position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.face-head .head-btn::after { content: ""; position: absolute; inset: -9px -7px; } /* (a larger place to press) */
/* (the gear is drawn dark for paper: on the dark frame it is shown light) */
.face-head .head-btn img { width: 15px; height: 15px; image-rendering: pixelated; pointer-events: none; filter: brightness(0) invert(0.72); }
.face-head .head-btn:hover img { filter: brightness(0) invert(1); }

/* Presses and changes ease in and out rather than jump (the pet on the screen stays pixel-stepped; the handheld's
   own buttons move like buttons) */
.chip-btn, .primary, .speed-btn, .shell-btn, .text-btn, .event-action {
  transition: transform 130ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 130ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 160ms ease, filter 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .chip-btn, .primary, .speed-btn, .shell-btn, .text-btn, .event-action, .hw { transition: none; }
}
:root { --notched: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px); }

/* The handheld is the page: one column, on a phone and on a desk alike. Its screen stays on top, the window under it. */
.layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px);
  justify-content: center;
  align-items: start;
  margin: auto; /* (in the body's column: the very middle of the window, and never cut off when the window is short) */
  padding: 24px;
}
@media (min-width: 761px) { body { display: flex; flex-direction: column; } }
.device-col { display: grid; justify-items: center; gap: 12px; }
.dock { display: none; } /* (phones: an unseen marker at the bottom edge, see below) */
/* The log fills whatever height the card has (set by its row), and scrolls; its own messages never
   stretch the card, so the input stays right under the last message area */
.chat-card .chat-log { flex: 1 1 0; min-height: 0; max-height: none; contain: size; }

/* Talking with the pet: its lines on the left, the owner's on the right */
.chat-log { list-style: none; margin: 0 0 10px; padding: 0 2px 0 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; font-size: 14px; line-height: 1.45; }
.chat-log:empty::before { content: "말을 걸면 이 아이가 대답해요. 나눈 이야기는 기억해 둬요."; color: var(--muted); font-size: 13px; }
.chat-log li { white-space: pre-line; max-width: 85%; padding: 5px 10px; border: 2px solid var(--line); background: var(--paper); justify-self: start; }
.chat-log li.me { justify-self: end; background: var(--tint-2); }
/* Waiting for its answer: one dot, two, three, and round again */
.chat-log li.typing { color: var(--muted); letter-spacing: 2px; }
.chat-log li.typing i { font-style: normal; animation: typing-dot 1.2s steps(1) infinite; }
.chat-log li.typing i:nth-child(2) { animation-name: typing-dot-2; }
.chat-log li.typing i:nth-child(3) { animation-name: typing-dot-3; }
@keyframes typing-dot-2 { 0% { opacity: 0; } 33% { opacity: 1; } }
@keyframes typing-dot-3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@keyframes typing-dot { 0% { opacity: 1; } }
.chat-log li.memory { justify-self: stretch; max-width: none; border: 0; background: none; padding: 2px 0; text-align: center; color: var(--muted); font-size: 12px; }

.chat-bar { flex: none; height: 24px; }
.pet-card::before { content: ""; float: right; width: 34px; height: 24px; }

.chat-form { display: flex; gap: 8px; margin-top: auto; }
/* sulking (목업 27): the line to type in glows pink, the place where it mends */
.chat-form.soothe input { box-shadow: 0 0 0 3px #ffb7cf; animation: soothe-glow 1.6s ease-in-out infinite; }
@keyframes soothe-glow { 50% { box-shadow: 0 0 0 3px #ff7fae; } }
@media (prefers-reduced-motion: reduce) { .chat-form.soothe input { animation: none; } }
.chat-form input { flex: 1 1 0; width: 0; min-height: 38px; padding: 4px 10px; border: 2px solid var(--line); background: var(--paper); font: inherit; font-size: 16px; }
.chat-form button { padding: 6px 12px; }
/* Which build this is, small under the talk (version.js) */
.release { margin: 3px 0 0; font-size: 10px; line-height: 12px; text-align: center; color: var(--muted, #8a7d90); opacity: 0.75; letter-spacing: 0.5px; user-select: text; }
.chat-memory { margin-top: 10px; font-size: 13px; }
.chat-memory[hidden] { display: none; }
.chat-memory summary { cursor: pointer; }
.chat-memory ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.chat-memory li { position: relative; padding-left: 12px; line-height: 1.45; color: var(--ink); }
.chat-memory li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--accent); }

.device-frame { position: relative; }
.device { position: relative; image-rendering: pixelated; }
/* Phones: only the toy's front panel, shown twice as large, framed like the face of the device */
/* The handheld is drawn in pixels: its outline, stepped corners, highlight and shade are the edges of the handheld
   picture itself (assets/shell-<theme>.png, set as --shell-img), each of its pixels shown --u wide. */
:root { --u: 3px; }
.device-frame.face {
  overflow: hidden;
  background: var(--shell) padding-box;
  border: calc(4 * var(--u)) solid transparent;
  border-image: var(--shell-img) 4 / calc(4 * var(--u)) stretch;
  image-rendering: pixelated;
}
/* Its hard shadow, cut to the same stepped corners */
.device-col { position: relative; isolation: isolate; }
.device-col:has(> .device-frame)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(4px, 4px);
  background: var(--ink);
  clip-path: polygon(
    calc(4 * var(--u)) 0, calc(100% - 4 * var(--u)) 0, calc(100% - 4 * var(--u)) var(--u), calc(100% - 2 * var(--u)) var(--u),
    calc(100% - 2 * var(--u)) calc(2 * var(--u)), calc(100% - var(--u)) calc(2 * var(--u)), calc(100% - var(--u)) calc(4 * var(--u)), 100% calc(4 * var(--u)),
    100% calc(100% - 4 * var(--u)), calc(100% - var(--u)) calc(100% - 4 * var(--u)), calc(100% - var(--u)) calc(100% - 2 * var(--u)), calc(100% - 2 * var(--u)) calc(100% - 2 * var(--u)),
    calc(100% - 2 * var(--u)) calc(100% - var(--u)), calc(100% - 4 * var(--u)) calc(100% - var(--u)), calc(100% - 4 * var(--u)) 100%, calc(4 * var(--u)) 100%,
    calc(4 * var(--u)) calc(100% - var(--u)), calc(2 * var(--u)) calc(100% - var(--u)), calc(2 * var(--u)) calc(100% - 2 * var(--u)), var(--u) calc(100% - 2 * var(--u)),
    var(--u) calc(100% - 4 * var(--u)), 0 calc(100% - 4 * var(--u)), 0 calc(4 * var(--u)), var(--u) calc(4 * var(--u)),
    var(--u) calc(2 * var(--u)), calc(2 * var(--u)) calc(2 * var(--u)), calc(2 * var(--u)) var(--u), calc(4 * var(--u)) var(--u));
}
.device-frame.face .device { display: none; }
.face-panel { padding: 8px 6px 6px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.device-frame.face { display: flex; flex-direction: column; }
.face-buttons { flex: 1 1 auto; align-content: center; }
.face-foot { display: none; } /* (the panel below the screen takes its room; sound is in the settings) */
/* The mark and the speaker are cut straight out of the handheld picture, so they match the desktop pixel for pixel */
.face-mark, .face-grille { display: block; background-repeat: no-repeat; image-rendering: pixelated; }

/* Who it is and how it is doing: one plate under the screen, always in view */
.plate {
  margin-top: 12px;
  padding: 7px 10px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
}
.plate-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; line-height: 1.3; }
.plate-who b { font-weight: 400; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* How far along this age it is, and how long is left (or what is wrong right now) */
.plate-grow { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.plate-when { flex: none; font-size: 12px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.plate-when:empty { display: none; }
.plate-when.alert { color: #d22; }
.plate .grow-bar { flex: 1; height: 6px; margin: 0; }
.mini { display: none; } /* (the gauges are under the buttons) */
.mini .meter { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mini img { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.mini .cells { flex: 1; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.mini .cells i { height: 8px; border-width: 1.5px; }
.mini .cells.low i.on { background: #ff4d4d; }
.plate .flags { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0 !important; min-height: 0; }

.device-frame.tight .plate { margin-top: 8px; padding: 5px 8px 4px; }
.device-frame.tight .plate-grow { margin-bottom: 2px; }
.device-frame.tight .face-panel { padding: 4px 4px 4px; }

/* The screen gives way when the panel below would get too small (set by layout()) */
.face-bezel { align-self: center; width: var(--screen-w, 100%); box-sizing: border-box; }
.face-panel[hidden] { display: none; }
.face-bezel {
  position: relative;
  background: var(--bezel);
  border: 2px solid var(--line);
  padding: 4px 6px 6px;
  /* (a lighter line along its top edge, and one pixel missing at each corner, as on the handheld picture) */
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14);
  clip-path: var(--notched);
}
/* Power light: two pixels square, its top left one lit brighter */
.face-bezel::before { content: ""; position: absolute; left: 8px; top: 9px; width: 6px; height: 6px; background: linear-gradient(#ffb3b3, #ffb3b3) 0 0 / 3px 3px no-repeat, #ff4d4d; }

.face-bezel canvas {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 56;
  border: 2px solid var(--line);
  background: #c7d1a4;
}

/* The panel under the screen: one at a time, the others out of the way */
.panes { flex: 1 1 auto; min-height: 0; margin-top: 8px; position: relative; display: flex; }
.pane { display: none; flex: 1 1 auto; min-width: 0; min-height: 0; }
.pane.open { display: block; animation: pane-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pane-in { from { opacity: 0; transform: translateX(var(--from, 0px)); } }
.pane.card { overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; box-shadow: 0 3px 0 var(--edge); touch-action: pan-y; }
.pane.card h2 { font-size: 15px; margin-bottom: 6px; }
.pane.chat-card.open { display: flex; flex-direction: column; }
.pane[data-pane="care"].open { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) { .pane.open { animation: none; } }

/* 돌봄: what can be done right now (only what applies), over the four buttons */
/* The top of the care panel: what can be done right now, as chips; those that do not fit go to a second row */
.care-top { display: flex; align-items: flex-start; gap: 6px; flex: none; min-width: 0; }
.care-top .now { flex: 1 1 0; flex-wrap: wrap; overflow: visible; }

.now { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; } /* (room for a pressed chip and its ring: a row that scrolls clips at its edge) */
.now::-webkit-scrollbar { display: none; }
.now:not(:has(.chip-btn:not([hidden]))) { visibility: hidden; }
.chip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 9px 0 6px;
  background: var(--paper);
  border: 2px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.chip-btn[hidden] { display: none; }
/* What cannot wait (medicine for a sick pet): lit, and it bobs like a button that is wanted */
/* (it pulses in place: the row of chips scrolls sideways and so clips whatever moves above its edge) */
.chip-btn.urgent { background: var(--lamp, #f2c14e); animation: urgent-pulse 1s ease-in-out infinite; }
@keyframes urgent-pulse { 50% { background: var(--paper); } }
@media (prefers-reduced-motion: reduce) { .chip-btn.urgent { animation: none; } }
.chip-btn img { width: 18px; height: 18px; image-rendering: pixelated; }
.chip-btn b { font-weight: 400; }
.chip-btn:active { transform: translate(1px, 1px); }
.chip-btn:disabled { opacity: 0.5; cursor: default; }

.face-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; justify-items: center; }
/* Each button's own gauge under it: the thing this button fills */
.face-cell .cells { width: min(56px, 90%); grid-template-columns: repeat(5, 1fr); gap: 1px; }
.face-cell .cells i { height: 7px; border-width: 1.5px; }
.face-cell .cells.low i.on { background: #ff4d4d; }
.face-cell .cells.low { animation: gauge-low 0.9s steps(2) infinite; }
@keyframes gauge-low { 50% { opacity: 0.45; } }
/* A line on the screen that can be opened: its one button */
.event-action { margin-left: auto; flex: none; align-self: center; padding: 1px 9px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); font-size: 12px; cursor: pointer; pointer-events: auto; }
.event-action[hidden] { display: none; }
.event.with-action { display: flex; align-items: center; gap: 8px; }
.event.with-action[hidden] { display: none; }
.event.with-action .event-text { flex: 1 1 auto; min-width: 0; }
.mini .meter { cursor: pointer; }
.face-cell { display: grid; justify-items: center; gap: 10px; }
/* Buttons: the picture of what it does is the button itself; the caption under it says it in words.
   The one the pet needs bounces and glows, and the pet shows the same picture over its head. */
.hw {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  transition: transform 170ms cubic-bezier(0.25, 0.8, 0.3, 1.25); /* down softly, back up with a little spring */
}
.hw:hover { transform: translateY(-2px) scale(1.06); }
.hw:active, .hw.pressed { transform: translateY(2px) scale(0.96); }
/* A dark outline keeps the picture readable on any body color */
.hw-pic {
  width: 82%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 3px 0 rgb(0 0 0 / 0.25));
}
.hw-pic:not([src]) { visibility: hidden; }
.face-buttons { gap: 4px; }
.face-cell { min-width: 0; }
.face-buttons .hw { position: static; width: min(56px, 100%); height: auto; aspect-ratio: 1; }
.hw-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 0 5px;
  color: #fffdf7;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: -1px 0 var(--ink), 1px 0 var(--ink), 0 -1px var(--ink), 0 1px var(--ink), 1px 1px var(--ink);
}
.face-buttons .hw-label { position: static; transform: none; font-size: 13px; max-width: 100%; }

.hw-label.want {
  color: var(--ink);
  text-shadow: none;
  background: var(--lamp, #f2c14e);
  border: 2px solid var(--line);
  animation: want-label 0.9s ease-in-out infinite;
}
.hw.want { animation: want 0.9s ease-in-out infinite; }
.hw.want .hw-pic { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 0 6px var(--lamp, #f2c14e)) drop-shadow(0 0 6px var(--lamp, #f2c14e)); }
@keyframes want { 50% { transform: translateY(-5px); } }
@keyframes want-label { 50% { transform: translateX(-50%) translateY(-2px); } }
.face-buttons .hw-label.want { animation-name: want-label-static; }
@keyframes want-label-static { 50% { transform: translateY(-2px); } }

/* What the pet says, floating over its head */
.speech {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 10px));
  max-width: 240px;
  width: max-content;
  white-space: pre; /* (a line a sentence, as a messenger: voice.js chatty) */
  padding: 6px 12px 7px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.35;
  pointer-events: none;
  animation: pop 260ms cubic-bezier(.2, 1.4, .4, 1);
}
.speech[hidden] { display: none; }
.speech.long { white-space: pre-line; }
.speech::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes pop { from { transform: translate(-50%, calc(-100% - 10px)) scale(.6); opacity: 0; } }

/* The speed button on the name plate (with a 배속권, or in debug mode): lit while time runs fast */
.speed-btn {
  margin-left: auto;
  flex: none;
  min-height: 24px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.speed-btn.fast { background: var(--lamp); }
.speed-btn:active { transform: translate(1px, 1px); }

.pet-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pet-actions .primary[hidden] { display: none; }

/* The farewell letter */
.letter {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: #fffaf0;
  color: var(--ink);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.letter::backdrop { background: rgb(43 34 51 / 0.6); }
/* The 이어하기 code: twelve digits in three groups, big enough to copy down by hand */
.code-body { padding: 26px 24px 20px; display: grid; gap: 12px; }
.code-body .letter-title { margin: 0; }
.code-big { margin: 0; padding: 14px 8px; text-align: center; white-space: nowrap; font-size: clamp(20px, 6.4vw, 32px); letter-spacing: 1px; font-variant-numeric: tabular-nums; border: 2px dashed var(--line); background: var(--paper); user-select: all; }
/* 다른 곳에서 이어하기 (목업 27): the link's QR, and the two dialogs that say a name or a line rather than a code */
.pass-qr { padding: 12px; line-height: 0; user-select: none; }
.pass-qr canvas { width: 168px; height: 168px; image-rendering: pixelated; }
.pass-done { display: block; margin: 6px auto 0; }
#take-who, #inapp-big { white-space: normal; font-size: 22px; user-select: none; }
.code-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.code-input { width: 100%; min-height: 52px; padding: 6px 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 24px; letter-spacing: 2px; text-align: center; font-variant-numeric: tabular-nums; }
.code-warn { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.5; background: var(--tint); border: 2px solid var(--line); }
.code-error { margin: 0; min-height: 1em; font-size: 13px; color: var(--accent); }
.code-error:empty { display: none; }
.code-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.code-row b { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.code-row[hidden] { display: none; }
.empty-load { display: block; margin-top: 10px; font-size: 14px; }
.hatch-load { margin: 0; font-size: 13px; color: var(--muted); }
.hatch-load .text-btn { font-size: 13px; }
.letter-body {
  padding: 26px 26px 20px;
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--accent) 22%, transparent) 31px 32px);
  background-position: 0 58px;
}
.letter-title { margin: 0 0 22px; font-size: 20px; text-align: center; }
.letter-to { margin: 0 0 6px; font-size: 16px; }
.letter-text { margin: 0; font-size: 16px; line-height: 2; white-space: pre-line; }
.letter-from { text-align: right; margin: 14px 0 18px; font-size: 16px; }
.letter-life { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; font-size: 13px; color: var(--muted); background: #fffaf0; }
.letter-life dd { margin: 0; }
.epitaph { text-align: center; margin: 0 0 16px; font-size: 14px; color: var(--muted); background: #fffaf0; }
.letter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; align-items: center; background: #fffaf0; }

/* What it became: the raising-game ending card */
.career-kicker { margin: 0 0 4px; font-size: 14px; color: var(--muted); text-align: center; }
.career-title { margin: 0 0 18px; font-size: 26px; text-align: center; color: var(--accent); line-height: 1.3; }
.career .letter-life { margin-top: 16px; }
.career-line[hidden] { display: none; }

/* Owner questions: the same text box with a line to answer in */
.incident-answer { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
.incident-answer input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid #fffdf7;
  background: #fffdf7;
  color: #1b1c33;
  font: inherit;
  font-size: max(16px, var(--event-size, 14px)); /* 16px keeps phones from zooming in */
}
.incident-answer button { flex: none !important; padding: 4px 12px !important; }
.incident.question .event-tag { background: #4cb8ff; color: #1b1c33; }
.incident.outing .event-tag { background: #3ccf6e; color: #1b1c33; }

.heritage-line { margin: 0 !important; }
.heritage-line[hidden] { display: none; }

/* What a pet that does not talk really means: under its sounds, once the translator is open */
.mind { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); white-space: normal; }
.speech .mind { max-width: 220px; }
.mind-line { margin: 6px 0 0; padding: 6px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.mind-line[hidden] { display: none; }
.mind-line button { font-size: 12px; }
.heritage-note { margin: -4px 0 12px; font-size: 14px; color: var(--accent); }
.heritage-note[hidden] { display: none; }
.talks-block[hidden] { display: none; }

/* The memorial: one row per pet that lived here */
.memorial-note { margin: -10px 0 14px; font-size: 13px; color: var(--muted); background: #fffaf0; }
.memorial-note a { display: inline-block; margin-top: 4px; color: var(--ink); text-underline-offset: 3px; }

.memorial-list { list-style: none; margin: 0 0 16px; padding: 0; background: #fffaf0; }
.memorial-list li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.memorial-list canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.memorial-list strong { display: block; font-weight: 400; font-size: 15px; }
.memorial-list .career { color: var(--accent); font-size: 13px; }
.memorial-list .epitaph-line { color: var(--muted); font-size: 13px; }
.memorial-list button { justify-self: start; margin-top: 2px; font-size: 13px; }

/* (the screen sits a little inside the shell here: edge to edge, as on a phone, it looked as if it stuck out of it) */

/* A surprise event: the same text box, with two ways to respond and the time left to decide */
.incident { cursor: default; padding-bottom: 10px; }
.incident .event-tag { background: #ff6b5b; color: #fffdf7; }
.incident-choices { display: flex; gap: 8px; margin-top: 8px; }
.incident-choices button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid #fffdf7;
  background: transparent;
  color: #fffdf7;
  font-size: var(--event-size, 14px);
  cursor: pointer;
}
.incident-choices button:hover:not(:disabled), .incident-choices button:focus-visible { background: #fffdf7; color: #1b1c33; }
.incident-choices button.picked { background: var(--lamp, #f2c14e); color: #1b1c33; border-color: var(--lamp, #f2c14e); }
.incident-choices button:disabled:not(.picked) { opacity: 0.4; cursor: default; }
.incident-clock { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; }
.incident-clock b { display: block; height: 100%; background: #ff6b5b; width: 100%; transform-origin: left; }

/* What just happened, as a game text box laid over the bottom of the pixel screen */
.event {
  position: absolute;
  z-index: 3;
  padding: 7px 10px 8px;
  background: rgb(27 28 51 / 0.9);
  color: #fffdf7;
  border: 2px solid #fffdf7;
  outline: 2px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  animation: rise 220ms ease-out;
}
.event[hidden] { display: none; }
/* The narration box hides by itself; taps go through it to the screen (the droppings sit under it) */
#event { pointer-events: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.event-tag {
  position: absolute;
  top: -11px;
  left: 8px;
  padding: 0 7px;
  background: var(--lamp, #f2c14e);
  color: #22304a;
  border: 2px solid var(--line);
  font-size: 11px;
  line-height: 16px;
}
.event-text { margin: 0; font-size: var(--event-size, 14px); line-height: 1.45; min-height: 1.45em; }
.event-text.done::after { content: " ▼"; font-size: 0.7em; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.shell { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.lcd { position: absolute; image-rendering: pixelated; }
.hw { position: absolute; border-radius: 50%; padding: 0; cursor: pointer; }
.hw:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }

kbd {
  font-family: inherit;
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  margin-right: 4px;
}

button { font: inherit; color: inherit; }
.primary {
  border: 2px solid var(--line);
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
}
.primary:active { transform: translate(2px, 2px); box-shadow: 0 2px 0 var(--edge); }
.primary:disabled { opacity: .5; cursor: default; }
.text-btn { border: 0; background: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }

.card {
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  padding: 14px 16px 16px;
}
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0 0 10px; }

.pet-name { font-size: 22px !important; line-height: 1.25; margin-bottom: 0 !important; }
.pet-sub { display: flex; align-items: center; gap: 8px; margin: 3px 0 10px; }
.pet-meta { min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The life stage, as a badge beside what it is */
.stage-badge { flex: none; padding: 0 7px; border: 2px solid var(--line); background: var(--tint-2); color: var(--ink); font-size: 12px; line-height: 18px; }
.stage-badge[hidden] { display: none; }
/* Said no: the console buzzes twice, softly (웅, 웅) */
.device-frame.buzz { animation: buzz 560ms linear; }
@keyframes buzz {
  0%, 44%, 100% { transform: translate(0, 0); }
  6% { transform: translate(-1.5px, 0.5px); }
  12% { transform: translate(1.5px, -0.5px); }
  18% { transform: translate(-1px, -0.5px); }
  24% { transform: translate(1px, 0.5px); }
  30% { transform: translate(0, 0); }
  56% { transform: translate(-1.5px, 0.5px); }
  62% { transform: translate(1.5px, -0.5px); }
  68% { transform: translate(-1px, -0.5px); }
  74% { transform: translate(1px, 0.5px); }
  80% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .device-frame.buzz { animation: none; } }
.pet-name.long { font-size: 18px !important; }
.pet-stage { margin: 0 !important; }
.grow-bar { height: 8px; border: 2px solid var(--line); background: var(--paper); margin-bottom: 10px; overflow: hidden; }
.grow-bar b { display: block; height: 100%; background: var(--accent); width: 0; }
.grow-bar b.soon { animation: soon 0.8s steps(2) infinite; }
/* The windows' body: title, text and buttons, a little apart */
.shop-body { padding: 24px 22px 18px; display: grid; gap: 12px; }
.shop-body .letter-title { margin: 0; }

.notice-text { margin: 0; font-size: 15px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field textarea, .field input { width: 100%; padding: 8px 10px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 16px; color: var(--ink); resize: vertical; }
/* 도감: what the pets of this toy have become */
.codex-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.codex-tab { min-height: 36px; padding: 2px 4px; background: var(--paper); border: 2px solid var(--line); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.codex-tab[aria-selected="true"] { background: var(--lamp); }
.codex-body { min-height: 180px; }
.codex-empty { margin: 60px 0; text-align: center; font-size: 14px; color: var(--muted); }

/* Today's eggs, in the window where one is asked for; with none left the ways to choose a picture are put away */
.eggs-left { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.eggs-left[hidden] { display: none; }
.hatch.sold-out .eggs-left { padding: 10px 12px; border: 2px solid var(--line); background: var(--tint-2); color: var(--ink); font-size: 15px; line-height: 1.5; }
.hatch.sold-out .drop, .hatch.sold-out .samples { display: none; }
/* The first visit */
.intro-lead { margin: -4px 0 12px; text-align: center; font-size: 14px; color: var(--muted); }
.intro-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.intro-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--line); background: var(--paper); font-size: 14px; line-height: 1.45; }
.intro-steps img { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.intro-steps b { font-weight: 400; background: linear-gradient(transparent 60%, var(--tint-2) 60%); }
.intro-install { display: grid; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border: 2px dashed var(--line); font-size: 14px; line-height: 1.5; }
.intro-install[hidden] { display: none; }
.intro-install b { font-weight: 400; }
.intro-install small { font-size: 12px; color: var(--muted); }
.legal-links { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; font-size: 12px; }
.legal-links a { color: var(--muted); text-underline-offset: 3px; }
.jev-how { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.codex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.codex-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper); border: 2px solid var(--line); }
.codex-list b { font-size: 15px; font-weight: 400; }
.codex-list span { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

@keyframes soon { 50% { background: var(--lamp, #f2c14e); } }
/* ---------- 이야기: one way of setting text for the whole panel ----------
   Its own words in a speech bubble under the name; the facts as rows of a small label and a value, with a dashed rule
   between; each part below under a title with a rule running out from it; what it and its owner said as bubbles.
   (No tinted boxes with a colored bar down the left: the game's own boxes are paper with an ink line.) */
/* (its own words: a speech bubble like the ones on the screen, an ink line round paper with a small tail) */
.pet-card .pet-intro { position: relative; margin: 2px 0 12px !important; padding: 7px 11px 8px; background: var(--paper); border: 2px solid var(--line); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.pet-card .pet-intro::before { content: ""; position: absolute; left: 14px; top: -8px; width: 8px; height: 8px; background: var(--paper); border-left: 2px solid var(--line); border-top: 2px solid var(--line); transform: skewX(0deg) translateY(1px) rotate(45deg); }
.pet-card .mind-line { margin: -4px 0 10px; }
.facts-list { margin: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.fact { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); font-size: 14px; line-height: 1.5; }
.fact:has(> dd > [hidden]) { display: none; }
.fact dt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fact .chips { margin: 0; gap: 5px; }
.fact .chips li { font-size: 13px; line-height: 20px; }
/* (the career opens its card: it reads as a link) */
.career-line { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.career-line[hidden] { display: none; }
.story-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 13px !important; font-weight: 400; color: var(--muted); }
.story-title::after { content: ""; flex: 1; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
summary.story-title { cursor: pointer; list-style: none; }
summary.story-title::-webkit-details-marker { display: none; }
summary.story-title::before { content: "▸"; font-size: 12px; transition: transform 120ms; }
details[open] > summary.story-title::before { transform: rotate(90deg); }
/* What it asked, what its owner answered, what it said to that: three bubbles, the owner's on the right */
/* What it asked its owner: a card a question (10-10), not chat bubbles: when, its question as the title, then the
   answer and what it said to that, each under its name */
.talks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.5; }
.talks li { display: grid; gap: 6px; padding: 8px 10px 9px; background: none; overflow-wrap: anywhere;
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch;
  filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.14)); }
.talks p { margin: 0 !important; }
.talks .when { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.talks .stage-tag { padding: 0 5px; font-size: 11px; line-height: 15px; color: #3d2f45;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.talks .q { font-size: 15px; line-height: 1.45; color: var(--ink); }
.talks .q small { display: block; font-size: 12px; color: var(--muted); }
.talks .row { display: grid; grid-template-columns: 4.2em 1fr; column-gap: 8px; align-items: baseline; padding-top: 6px; border-top: 2px dashed color-mix(in srgb, var(--ink) 14%, transparent); }
.talks .row + .row { border-top: 0; padding-top: 0; }
.talks .row b { font-weight: 400; font-size: 11.5px; color: var(--accent); overflow-wrap: anywhere; }
.talks .row.reply span { color: #5b4f63; white-space: pre-line; }
.talks .row.reply small { display: block; font-size: 12px; color: var(--muted); white-space: normal; }
.story-title .count { font-size: 11px; color: var(--accent); }
.story-title .count:empty { display: none; }
.pet-card .pet-actions { margin-top: 14px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.diary-block h3 { font-size: 13px; }
/* Grown so far: numbered steps joined by a line, each opening to its story */
.diary { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.diary li { position: relative; padding-bottom: 8px; }
.diary li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  border-left: 3px dotted var(--line);
}
.diary summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  min-height: 26px;
}
.diary summary::-webkit-details-marker { display: none; }
.diary summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform 120ms; }
.diary details[open] summary::after { transform: rotate(90deg); }
.diary .step {
  flex: none;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--line);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}
.diary li:last-child .step { background: var(--lamp, #f2c14e); color: var(--ink); }
.diary .when { flex: none; color: var(--muted); font-size: 13px; }
.diary .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary details p { margin: 6px 0 4px 33px !important; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.jev-note { font-size: 13px; line-height: 1.5; padding: 6px 9px; border: 2px solid var(--line); background: var(--paper); }
.jev-note[hidden] { display: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.chips li { border: 2px solid var(--line); padding: 0 8px; background: var(--tint); font-size: 14px; white-space: nowrap; }

.meters { display: grid; gap: 6px; }
.meter { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.cells i { height: 12px; border: 2px solid var(--line); background: var(--paper); }
.cells i.on { background: var(--ink); }
.cells.low i.on { background: var(--accent); }
.flags { margin: 10px 0 0 !important; font-size: 14px; color: var(--muted); min-height: 1.6em; }

.jev-meta { color: var(--muted); font-size: 14px; }
.jev-row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 6px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); font-size: 14px; }
.jev-row strong { font-weight: 400; }
.opts { display: grid; gap: 3px; }
.opt { display: grid; grid-template-columns: 64px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.opt .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.opt.best .name { color: var(--ink); }
.opt .bar { height: 8px; background: color-mix(in srgb, var(--ink) 12%, transparent); position: relative; }
.opt .bar b { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
.opt.best .bar b { background: var(--ink); }
.opt small { text-align: right; font-size: 12px; color: var(--muted); }
/* Written behaviors are sentences: question on its own line, each sentence above its bar */
.jev-row.free { grid-template-columns: 1fr; gap: 4px; }
.jev-row.free .opt { grid-template-columns: 1fr 36px; row-gap: 2px; }
.jev-row.free .opt .name { grid-column: 1 / -1; white-space: normal; }

.hatch {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
}
.hatch::backdrop { background: rgb(43 34 51 / 0.45); }
.hatch-body { position: relative; padding: 18px 18px 0; display: grid; gap: 12px; }
.hatch-body h2 { padding-right: 40px; }
/* Two steps in one window: choosing a picture, then looking at what it becomes. The chosen step hides the
   choosing, so the result and its button are in view without scrolling. */
.hatch-pick { display: grid; gap: 12px; }
.hatch.chosen .hatch-pick, .hatch.chosen #hatch-cancel, .hatch:not(.chosen) #hatch-again, .hatch:not(.chosen) #do-hatch { display: none; }
.hatch-body h2 { margin: 0; font-size: 18px; }
.drop {
  display: grid;
  place-items: center;
  min-height: 90px;
  border: 2px dashed var(--line);
  background: var(--tint);
  cursor: pointer;
  text-align: center;
  padding: 12px;
}
.drop.over { background: var(--tint-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--line); outline-offset: 2px; }
.samples p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.samples[hidden] { display: none; }
.sample-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sample {
  width: 100%;
  aspect-ratio: 1;
  padding: 4px;
  border: 2px solid var(--line);
  background: var(--tint);
  cursor: pointer;
}
.sample img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sample[aria-pressed="true"] { background: var(--accent); }
.eggs { margin-bottom: 10px; }
.egg-pick { display: grid; justify-items: center; align-content: center; gap: 2px; aspect-ratio: auto; font: inherit; font-size: 11px; line-height: 1.25; color: var(--ink); }
.egg-pick canvas { width: 28px; height: 30px; image-rendering: pixelated; }
.preview { display: flex; gap: 12px; align-items: center; justify-content: center; }
.preview[hidden] { display: none; }
.preview img { width: min(120px, 36%); aspect-ratio: 1; height: auto; object-fit: contain; border: 2px solid var(--line); background: #fff; }
.preview canvas { width: min(192px, 58%); height: auto; aspect-ratio: 96 / 56; border: 2px solid var(--line); image-rendering: pixelated; }
.hatch-body > * { min-width: 0; }
/* Working on it: a pixel block sliding along a track, what is happening, and how long so far */
.busy { display: grid; gap: 6px; }
.busy[hidden] { display: none; }
.busy-bar {
  position: relative;
  height: 14px;
  border: 2px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.busy-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 60%, white) 8px 12px);
  animation: slide 1.1s steps(12) infinite;
}
@keyframes slide { from { left: -28%; } to { left: 100%; } }
.busy-line { font-size: 14px; }
.busy-line small { color: var(--muted); font-size: 12px; }
/* The long wait (redrawing a picture): a bar that fills, and the picture being "drawn" dot by dot */
.busy.long .busy-bar i { animation: none; left: 0; width: var(--done, 0%); transition: width 0.9s linear; }
.preview canvas#preview-gen[hidden] { display: none; }
.style-pick { display: flex; gap: 6px; }
.style-pick[hidden] { display: none; }
.style-pick button {
  flex: 1;
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 4px 10px;
  cursor: pointer;
}
.style-pick button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.hatch-status { margin: 0; min-height: 1.6em; font-size: 14px; color: var(--muted); }
.sizes { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; }
.sizes legend { float: left; margin-right: 12px; color: var(--muted); }
.sizes[hidden], .tolerance[hidden] { display: none; }
.tolerance { display: flex; gap: 10px; align-items: center; font-size: 14px; }
/* The buttons stay at the bottom of the window whatever is above them */
.hatch-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 0 -18px;
  padding: 12px 18px 14px;
  background: var(--paper);
  border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.hatch:not(.chosen) .hatch-actions { justify-content: flex-end; }
.hatch-actions button { white-space: nowrap; font-size: 15px; }
.hatch-actions .primary { padding: 8px 12px; }

.help {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
}
/* A scroll inside an open dialog stays inside it */
.help, .hatch { overscroll-behavior: contain; }
html:has(dialog[open]) { overflow: hidden; }
.help::backdrop { background: rgb(43 34 51 / 0.45); }
.help-body { padding: 20px 22px; }
/* 사용법: cards side by side, one in view; a swipe (or the arrows) goes to the next */
.slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; margin: 10px 0 0; touch-action: pan-x; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; gap: 8px; align-content: start; }
.slide-art { display: flex; align-items: center; justify-content: center; gap: 14px; height: 120px; background: var(--tint); border: 2px solid var(--line); }
.slide-art img { width: 48px; height: 48px; image-rendering: pixelated; }
.slide h3 { margin: 4px 0 0 !important; font-size: 17px !important; }
.slide p { margin: 0; font-size: 14px; line-height: 1.6; min-height: 4.8em; }
.slide-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 14px; }
.slide-step { width: 32px; height: 28px; padding: 0; border: 2px solid var(--line); background: var(--paper); box-shadow: 0 2px 0 var(--edge); font-size: 11px; cursor: pointer; }
.slide-step:active { transform: translate(2px, 2px); box-shadow: none; }
.slide-step:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.slide-dots { display: flex; gap: 6px; }
.slide-dots i { width: 8px; height: 8px; border: 2px solid var(--line); background: var(--paper); }
.slide-dots i.on { background: var(--accent); }
.help-body h2 { margin: 0 0 6px; font-size: 20px; }
.help-body h3 { margin: 18px 0 6px; font-size: 16px; }
.help-body p, .help-body li { font-size: 14px; }
.help-body ul { margin: 0; padding-left: 18px; }
.help-body li + li { margin-top: 4px; }
.keys { border-collapse: collapse; width: 100%; font-size: 14px; }
.keys th { width: 1%; text-align: left; font-weight: 400; white-space: nowrap; padding: 4px 12px 4px 0; vertical-align: top; }
.help-body .keys + ul { margin-top: 12px; }
.keys td { padding: 4px 0; }
.hint { color: var(--muted); margin: 8px 0 0; }
.help-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* A panel's own close button (and, on phones, the grip to drag it away) */
.sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* Phone: toy first, then how it is doing, then who it is, then the judgment details */
@media (max-width: 760px) {
  /* One screen, no scrolling: the handheld fills what the phone shows, down to the bottom edge. */
  html { height: 100%; }
  html, body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
  .pane.card, .chat-log, dialog { touch-action: pan-y; }
  button, .hw { touch-action: manipulation; }
  #lcd { touch-action: none; } /* a finger moving on the screen strokes the pet; it must not scroll or zoom */
  /* iPhone Safari places things against a layout viewport that can differ from what is visible (its toolbar
     collapses and returns without telling the page), and a bar in the page flow ends up under its tab bar.
     So the page is not trusted for its height: an unseen marker is fixed to the bottom edge, and the handheld is
     fitted down to where that marker really is. */
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  /* `overflow: hidden` does not stop a phone from scrolling the document: iOS scrolls it to bring a focused input
     above the keyboard, a swipe can chain out of a panel, and the base `min-height: 100vh` is taller than what
     Safari shows while its toolbar is out. The page cannot be scrolled back by hand, so the header would stay
     pushed off the top. Taken out of the flow, the body leaves the document nothing to scroll.
     (js: settlePage() puts back whatever still moves.) */
  body { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-height: 0; }
  .layout {
    flex: 1 1 auto;
    order: 2;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
  }
  .dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom) + 10px); pointer-events: none; }
  /* The screen as wide as the handheld allows: thin sides on the dark frame around it, and less shell beside it */
  :root { --u: 2px; }
  .face-panel, .device-frame.tight .face-panel { padding-left: 2px; padding-right: 2px; }
  .face-bezel { padding: 3px 4px 4px; }
  .face-bezel::before { left: 7px; top: 8px; }
  
  /* Typing: the handheld rises as far as the line being typed needs to clear the keyboard (js: onViewport) */
  .device-col { transform: translateY(calc(-1 * var(--kb, 0px))); transition: transform 200ms; }
  .card { box-shadow: 0 3px 0 var(--edge); }
}

@media (prefers-reduced-motion: reduce) {
  .primary:active { transform: none; }
  .busy-bar i { animation: none; left: 0; width: 100%; opacity: .5; }
  .event, .event-text.done::after { animation: none; }
  .hw.want, .hw-label.want { animation: none; }
  .hw:hover { transform: none; }
}

.incident .incident-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--lamp, #f2c14e); }
.incident .incident-tip[hidden] { display: none; }

/* Debugging: what the API calls took and cost */
.speed-btn[hidden] { display: none; }
/* Settings: groups inside one dialog */
.device-tools { display: grid; gap: 14px; }
.device-tools section { display: grid; gap: 6px; justify-items: start; padding-bottom: 12px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.device-tools section:last-child { border-bottom: 0; padding-bottom: 0; }
.device-tools section[hidden] { display: none; } /* (the grid above would otherwise show it) */
.device-tools h3 { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.device-tools .text-btn[hidden] { display: none; }
/* A setting that is on or off: a picture, its name, a switch (green and to the right when on) and the word for it */
.switch-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 9px; border: 2px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.switch-row[hidden] { display: none; }
.switch-row img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.switch-row .switch { margin-left: auto; flex: none; position: relative; width: 34px; height: 18px; border: 2px solid var(--line); background: color-mix(in srgb, var(--ink) 18%, var(--paper)); }
.switch-row .switch b { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--ink); transition: left 120ms; }
.switch-row[aria-pressed="true"] .switch { background: #7be495; }
.switch-row[aria-pressed="true"] .switch b { left: 17px; }
.switch-row em { flex: none; width: 30px; font-style: normal; font-size: 12px; color: var(--muted); }
#debug[aria-pressed="true"] { color: var(--accent); }
.debug-panel { margin-top: 14px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.debug-panel[hidden] { display: none; }
.debug-panel h3 { margin: 0 0 6px; font-size: 14px; }
.debug-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.debug-table th, .debug-table td { padding: 2px 4px; text-align: right; white-space: nowrap; }
.debug-table th:first-child, .debug-table td:first-child { text-align: left; }
.debug-table thead th { color: var(--muted); font-weight: 400; }
.debug-table tfoot { border-top: 2px solid var(--line); }
.debug-note { margin: 6px 0 2px !important; font-size: 11px; color: var(--muted); }

/* Dialog titles take the first focus (so dialogs open at the top) without showing a ring */
dialog h2[tabindex="-1"]:focus { outline: none; }

/* The console's small dot buttons (sound): just the picture, pressed in when tapped */
.shell-btn { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.shell-btn[hidden] { display: none; }
.shell-btn img { width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.shell-btn:hover img { filter: brightness(1.25); }
.shell-btn:active { transform: translateY(1px); }
.face-foot .shell-btn { position: static; width: 26px; height: 26px; margin-left: auto; margin-right: 10px; align-self: center; }

/* No pet yet: the plate says so and nothing else (no empty gauges, no growth bar) */
.no-pet .plate-grow, .no-pet #meters { display: none; }
.no-pet .plate { padding-bottom: 8px; }

/* 오늘: the day's strip on the 돌봄 pane, between the chips and the four buttons */
.today { flex: none; margin-top: 8px; padding: 6px 8px 7px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); }
.today[hidden] { display: none; }
.today-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; }
.today-head b { flex: none; }
.today-head span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #7a6f7f); padding: 2px 0; }
/* Whether it went along: a small lamp, as the power lamp on the handheld's frame */
.lamp { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--ink); }
.lamp.yes { background: #3ddc5a; }
.lamp.no { background: #ff4d5e; }

.took { margin-left: 8px; font-style: normal; color: var(--ink); }
.took.no { color: #e0263c; }
.mind-read { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.mind-read i { font-style: normal; font-size: 11px; line-height: 15px; padding: 0 5px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
.mind-rows { display: grid; gap: 3px; width: 100%; margin: 5px 0 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mind-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 34px; gap: 8px; align-items: center; font-size: 12px; line-height: 1.25; }
.mind-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted, #7a6f7f); }
.mind-row.best .name { color: var(--ink); }
.mind-row .bar { height: 7px; background: color-mix(in srgb, var(--ink) 12%, transparent); position: relative; }
.mind-row .bar b { position: absolute; inset: 0 auto 0 0; background: var(--muted, #7a6f7f); }
.mind-row.best .bar b { background: var(--ink); }
.mind-row small { text-align: right; font-size: 11px; color: var(--muted, #7a6f7f); }
.today-empty { display: block; font-size: 12px; color: var(--muted, #7a6f7f); }

/* The camera on the day's strip */
.photo-btn { flex: none; width: 26px; height: 26px; padding: 0; margin: -4px -2px -4px 0; background: var(--paper); border: 2px solid var(--line); cursor: pointer; display: grid; place-items: center; }
.photo-btn img { width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; }
.photo-btn:active { transform: translate(1px, 1px); }
/* Where it just arrived */
.place-tag { position: absolute; z-index: 3; padding: 3px 9px 4px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--edge); font-size: 12px; line-height: 1.2; pointer-events: none; animation: place-tag 2600ms ease both; }
.place-tag[hidden] { display: none; }
/* Training on the screen (목업 23): the praise card, a moment over the screen, and the tricks it knows under the ground */
.train-pop { position: absolute; z-index: 6; transform: translate(-50%, 0); width: max-content; max-width: 260px; padding: 5px 11px 6px; font-size: 13px; line-height: 1.4;
  color: #3d2f45; text-align: center; pointer-events: none; border-style: solid; border-width: 4px;
  border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; filter: drop-shadow(0 3px 0 rgb(0 0 0 / .25)); animation: train-pop 0.25s ease-out both; }
.train-pop[hidden] { display: none; }
.train-pop b { font-weight: 400; }
.train-pop .marks { display: inline-flex; gap: 3px; margin-left: 7px; vertical-align: -1px; }
.train-pop .marks i { width: 9px; height: 9px; background: #efe4ea; box-shadow: 0 0 0 2px #3d2f45; }
.train-pop .marks i.on { background: #ff5c9d; }
.train-pop small { display: block; font-size: 12px; color: #7a6f7f; }
.train-pop.done small { color: #1b3b26; display: inline-block; margin-top: 3px; padding: 0 5px; line-height: 17px;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
@keyframes train-pop { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tricks { position: absolute; z-index: 3; display: flex; flex-wrap: wrap; gap: 5px; pointer-events: none; }
.tricks[hidden] { display: none; }
.tricks span { padding: 0 6px; font-size: 11px; line-height: 17px; color: #3d2f45; white-space: nowrap;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-fff1c9-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.device-frame.sheet-ui[data-sheet="full"] .tricks, .device-frame.sheet-ui[data-sheet="full"] .train-pop { display: none !important; }
@keyframes place-tag { 0% { opacity: 0; transform: translateY(6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* The flash of a photo */
.flash { position: absolute; z-index: 5; background: #fff; pointer-events: none; animation: flash 360ms ease-out both; }
.flash[hidden] { display: none; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .place-tag, .flash { animation-duration: 1ms; } }

/* The tablecloth follows the day on the screen: dusk and night darken it a little (the handheld itself keeps its color) */
:root[data-phase="evening"] body { background-color: color-mix(in srgb, var(--tint) 86%, #6a3a5a); }
:root[data-phase="night"] body { background-color: color-mix(in srgb, var(--tint) 62%, #2b2440); }
body { transition: background-color 1200ms ease; }

/* ---- 화면 개편 3: a leaner name plate ---- */

/* what is needed right now: one place, the most pressing thing only */
.now .chip-btn:not([hidden]) ~ .chip-btn { display: none; }
/* the 속마음 box on the care panel: its answer and what was read of the pet (the bars are in its window) */
.today .mind-row { display: none; }
.back-menu { align-self: flex-start; flex: none; border: 0; background: none; padding: 0 0 4px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }

.back-menu { justify-self: start; text-align: left; }

/* ---- 화면 개편 4: the talk is the game. One stream on the first panel; the care buttons are quick words under it ---- */
.today { display: none !important; } /* (how it took things is in the stream now) */
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini .meter:nth-child(n + 5) { display: none; }
.pane[data-pane="care"] .chat-log { flex: 1 1 0; min-height: 0; max-height: none; contain: size; margin: 8px 0 0; padding: 8px; background: var(--paper); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); font-size: 13px; }
.pane[data-pane="care"] .chat-form { margin-top: 8px; flex: none; }
.chat-log li.did { justify-self: end; display: flex; align-items: center; gap: 5px; background: #ffe27a; padding: 2px 9px; }
.chat-log li.did img { width: 16px; height: 16px; image-rendering: pixelated; }
.chat-log li.took { max-width: 92%; }
.chat-log li.took .lamp { vertical-align: 1px; }
.chat-log li.took .mind-read { margin: 3px 0 1px; }
.chat-log li.news { justify-self: center; max-width: 96%; border: 0; background: var(--ink); color: var(--paper); padding: 1px 10px; font-size: 11px; text-align: center; }
/* the four care buttons under the stream, as they always looked: the picture itself is the button (a dark edge around it,
   straight on the handheld's body) and its name under it in white. No box. The one the pet needs bounces and glows. */
.pane[data-pane="care"] .face-buttons { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: normal; justify-items: center; gap: 4px; margin-top: 8px; padding: 0; }
.pane[data-pane="care"] .face-cell { display: grid; justify-items: center; gap: 1px; min-width: 0; cursor: pointer; }
.pane[data-pane="care"] .face-cell .hw { position: static; width: 38px; height: 38px; aspect-ratio: auto; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 32px; height: 32px; }
.pane[data-pane="care"] .face-cell .hw-label { position: static; transform: none; font-size: 12px; line-height: 18px; max-width: 100%; }
.pane[data-pane="care"] .face-cell .cells { display: none; }
/* what is needed right now sits just over the quick words, not over the stream */
.pane[data-pane="care"] .care-top { order: 2; margin-top: 8px; }
.pane[data-pane="care"] .chat-log { order: 1; }
.pane[data-pane="care"] .chat-mind { order: 1; }
.pane[data-pane="care"] .face-buttons { order: 3; }
.pane[data-pane="care"] .chat-form { order: 4; }
.pane[data-pane="care"] .release { order: 5; flex: none; }
.pane[data-pane="care"] .now:empty, .pane[data-pane="care"] .care-top:not(:has(.chip-btn:not([hidden]))) { display: none; }

/* the stream's plus and minus sit in its top right corner: its first line starts under them */
.pane[data-pane="care"] .chat-log { padding-top: 30px; }

.pane[data-pane="care"] .chat-log { margin-top: 0; padding-top: 8px; border-top: 0; }
.pane[data-pane="care"] .chat-log::before { content: none; }
.pane[data-pane="care"] .chat-log:empty::before { content: none; }
.pane[data-pane="care"] .chat-log:empty::after { content: "말을 걸면 이 아이가 대답해요. 나눈 이야기는 기억해 둬요."; color: var(--muted); font-size: 13px; }

/* the name plate's line is what gives the medicine while it is ill */
.plate-when.act { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; animation: blink-act 1.1s steps(2) infinite; }
@keyframes blink-act { 50% { opacity: 0.55; } }
/* with no pet yet there is nothing to go back to */
.no-pet .back-menu { display: none; }
/* what the pet brings up, in the stream: a card with its title, and the answers as buttons while it waits */
.chat-log li.event-line { justify-self: stretch; max-width: none; display: grid; gap: 3px; background: #fff3c2; }
.chat-log li.event-line b { font-weight: 400; font-size: 12px; background: var(--ink); color: var(--paper); justify-self: start; padding: 0 6px; }
.chat-log li.event-line small { color: var(--muted); font-size: 11px; }
.event-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.event-choices button { font: inherit; font-size: 12px; padding: 2px 10px 3px; border: 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--edge); cursor: pointer; }
.event-choices button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line), 0 1px 0 var(--edge); }
.incident-choices:empty { display: none; }
/* no chips over the care buttons any more: what they were for is on the name plate, on the screen or at the foot of the stream */
.pane[data-pane="care"] .care-top { display: none !important; }
.chat-log li.event-line.pinned { background: var(--paper); border-style: dashed; }

/* A short phone (a browser with its bars showing). The screen and the name plate stand side by side: the screen keeps a
   good size with nothing empty beside it, and the plate (its name, its gauges, one under another) takes the room to its
   right. Everything under them is the stream's. */
@media (max-height: 760px) and (max-width: 760px) {
  .face-panel { display: grid; grid-template-columns: var(--screen-w, 63%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 8px; align-content: stretch; }
  .face-panel > .face-bezel { grid-column: 1; grid-row: 1; width: auto; align-self: start; }
  .face-panel > .plate { grid-column: 2; grid-row: 1; margin-top: 0; align-self: stretch; padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
  .face-panel > .panes { grid-column: 1 / -1; grid-row: 2; }
  
  .face-panel > .face-foot { display: none; }
  .plate-grow { display: none; }
  .plate-who { flex-wrap: wrap; gap: 3px 5px; align-items: center; }
  .plate-who b { flex: 1 1 100%; white-space: normal; overflow: visible; font-size: 14px; line-height: 1.25; word-break: keep-all; }
  
  .plate .mini { grid-template-columns: 1fr; gap: 5px; }
  .plate .mini .meter { gap: 6px; }
    
  
  
  .pane[data-pane="care"] .face-cell .hw { width: 32px; height: 32px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 28px; height: 28px; }
  .pane[data-pane="care"] .face-buttons { margin-top: 5px; }
  .pane[data-pane="care"] .face-cell .hw-label { line-height: 16px; }
  .pane[data-pane="care"] .chat-form { margin-top: 6px; }
  .chat-form input { min-height: 34px; }
  
  
  
  
}
}
/* The care buttons belong to the chat window, always in view: a strip of four cells under what was said (as the menu
   panel at the foot of a messenger's chat room), each a picture over its name, thin lines between them, no boxes. Under
   it the line to type in. Title bar, stream, strip and line are one window. */
.pane[data-pane="care"] .chat-log { border-bottom: 0; box-shadow: none; margin-bottom: 0; }
.pane[data-pane="care"] .face-buttons { margin-top: 0; padding: 0; gap: 0; justify-items: stretch; background: color-mix(in srgb, var(--paper) 90%, var(--ink)); border: 2px solid var(--line); border-top-width: 2px; border-bottom: 0; }
.pane[data-pane="care"] .face-cell { padding: 5px 0 3px; gap: 0; }
.pane[data-pane="care"] .face-cell + .face-cell { box-shadow: -1px 0 0 color-mix(in srgb, var(--ink) 28%, transparent); }
.pane[data-pane="care"] .face-cell:active { background: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.pane[data-pane="care"] .face-cell:has(.hw.want) { background: #ffe27a; }
.pane[data-pane="care"] .face-cell .hw { width: 30px; height: 30px; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 26px; height: 26px; }
.pane[data-pane="care"] .face-cell .hw.want { animation: none; }
.pane[data-pane="care"] .face-cell .hw-label, .pane[data-pane="care"] .face-cell .hw-label.want { color: var(--ink); text-shadow: none; background: none; border: 0; padding: 0; animation: none; font-size: 12px; line-height: 16px; }
.pane[data-pane="care"] .chat-form { margin-top: 0; padding: 6px; gap: 6px; background: var(--paper); border: 2px solid var(--line); border-top-width: 2px; box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-form input { border-width: 2px; min-height: 34px; }
.pane[data-pane="care"] .chat-form button { box-shadow: none; border-width: 2px; padding: 4px 12px; }

@media (max-height: 760px) and (max-width: 760px) {
  .pane[data-pane="care"] .face-buttons { margin-top: 0; }
  .pane[data-pane="care"] .face-cell .hw { width: 26px; height: 26px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 22px; height: 22px; }
  .pane[data-pane="care"] .chat-form { margin-top: 0; padding: 5px; }
}

/* ---------- the soft look (in place of thick black lines and hard black shadows) ---------- */
.plate, .pane.card, dialog, .chip-btn, .text-btn, .primary, .speed-btn,
.chat-log li, .event, .incident, .speech, .stage-badge, .chat-form input, .mind-read i, .tags i, .codex-tabs button { border-radius: var(--round); }
.chat-log li.news, .chat-log li.event-line b, .stage-badge { border-radius: 4px; }
.chat-log li { border-color: color-mix(in srgb, var(--ink) 22%, var(--paper)); }
.chat-log li.me { border-color: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.chat-log li.did { border-color: #e3c05a; }
.chat-log li.event-line { border-color: #e3c05a; }
.mind-read i { border-width: 0; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); line-height: 17px; }

.pane[data-pane="care"] .chat-log { border-radius: 0; }
.pane[data-pane="care"] .face-buttons { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--paper) 93%, var(--ink)); }
.pane[data-pane="care"] .chat-form { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 0 0 var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-form input { border-color: color-mix(in srgb, var(--ink) 22%, var(--paper)); }

/* every window closes by the X in its top right corner */
dialog.has-x > form, dialog.has-x { position: relative; }
.dialog-x { position: sticky; top: 0; right: auto; float: right; justify-self: end; align-self: flex-end; margin: -4px -4px -32px auto; z-index: 5; border-radius: var(--round); } /* (stays in the corner while a long window is scrolled) */
dialog.has-x [hidden] { display: none !important; }
dialog.has-x h2 { padding-right: 40px; }

.shop-body > .dialog-x { margin-top: 0; }
.face-bezel { display: flex; flex-direction: column; }
.face-bezel > canvas { order: 1; }

/* The care buttons in the chat window: four pill chips in one line (as a messenger's quick replies), a small picture
   beside its name. No strip, no lines between. */
.pane[data-pane="care"] .face-buttons { display: flex; gap: 5px; padding: 6px 6px 0; background: var(--paper); border-top: 0; }
.pane[data-pane="care"] .face-cell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; padding: 2px 6px 2px 4px; min-height: 28px;
  background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 20%, var(--paper)); border-radius: 99px; box-shadow: none; cursor: pointer; }
.pane[data-pane="care"] .face-cell + .face-cell { box-shadow: none; }
.pane[data-pane="care"] .face-cell:active { background: color-mix(in srgb, var(--accent) 14%, #fff); }
.pane[data-pane="care"] .face-cell:has(.hw.want) { background: #fff3c4; border-color: #e3c05a; }
.pane[data-pane="care"] .face-cell .hw { width: 18px; height: 18px; flex: none; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 16px; height: 16px; }
.pane[data-pane="care"] .face-cell .hw-label, .pane[data-pane="care"] .face-cell .hw-label.want { font-size: 12px; line-height: 18px; white-space: nowrap; }
.pane[data-pane="care"] .chat-form { border-top: 0; }
@media (max-height: 760px) and (max-width: 760px) {
  .pane[data-pane="care"] .face-buttons { padding: 5px 5px 0; gap: 4px; }
  .pane[data-pane="care"] .face-cell .hw { width: 18px; height: 18px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 16px; height: 16px; }
}
/* (in a chip the picture needs no added outline: it has its own, and on white the added one only thickens it) */
.pane[data-pane="care"] .face-cell .hw-pic, .pane[data-pane="care"] .face-cell .hw.want .hw-pic { filter: none; }
.pane[data-pane="care"] .face-cell .hw:hover, .pane[data-pane="care"] .face-cell .hw:active, .pane[data-pane="care"] .face-cell .hw.pressed { transform: none; }

/* ---------- one window (2026-10-04) ----------
   The screen, and under it one window: its head (who it is and how it is doing), the talk, the care chips, and the line
   to type in with a plus that opens the tray of everything else. Whatever is opened comes up over the window as a
   sheet, and closing it goes back to the talk where it was. The debug speed is a key on the frame above the screen. */

/* the frame's strip: the name in the middle, the debug speed at its right end */
.face-head { height: 24px; margin: 0 0 4px; }
.face-head .head-side.right { gap: 4px; }
.face-head .speed-btn { flex: none; display: inline-flex; align-items: center; gap: 3px; width: auto; height: 22px; min-height: 0; margin: 0; padding: 0 7px 0 4px;
  border: 0; border-radius: 6px; background: color-mix(in srgb, #fff 12%, var(--bezel)); color: color-mix(in srgb, #fff 72%, var(--bezel)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3);
  clip-path: none; font: inherit; font-size: 11px; line-height: 1; letter-spacing: 0; cursor: pointer; animation: none; transform: none; }
.face-head .speed-btn img { display: block; width: 14px; height: 14px; image-rendering: pixelated; opacity: 0.6; }
.face-head .speed-btn b { font-weight: 400; font-variant-numeric: tabular-nums; }

.face-head .speed-btn.fast { color: #ffe27a; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3), 0 0 0 2px #ffd34d; }
.face-head .speed-btn.fast img { opacity: 1; }
.face-head .speed-btn:active { transform: translateY(1px); }

/* a short phone: the screen on its own row again (the plate it stood beside is the window's head now) */
@media (max-height: 760px) and (max-width: 760px) {
  .face-panel { display: flex; flex-direction: column; }
  .face-panel > .face-bezel { width: var(--screen-w, 100%); align-self: center; }
}

/* the window's head */
.pane[data-pane="care"] > .plate { order: -1; flex: none; display: block; margin: 8px 0 0; padding: 6px 9px 0; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--round) var(--round) 0 0; box-shadow: none; }
.plate .plate-who { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 22px; }
.plate .plate-who b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px; }
.plate .lamp { flex: none; margin: 0; box-shadow: 0 0 0 2px var(--paper); }
.plate .lamp.off { background: #6b5f78; }
.plate .stage-badge { font-size: 11px; line-height: 16px; padding: 0 5px; border: 0; border-radius: 4px; }
.plate .plate-when { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); font-size: 11px; }
.plate .plate-when.alert { color: #ff8a94; }

.plate-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; min-width: 0; }

.plate .mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; }
.plate .mini .meter { gap: 3px; }
.plate .mini img { width: 13px; height: 13px; }
.plate .mini .cells i { height: 6px; border-width: 1px; border-color: color-mix(in srgb, var(--paper) 40%, var(--ink)); }
.plate .plate-grow { display: block; margin: 5px -9px 0; }
.plate .grow-bar { height: 3px; margin: 0; border: 0; background: rgb(255 255 255 / 0.12); }
.no-pet .plate .plate-row { display: none; }
.no-pet .pane[data-pane="care"] > .plate { padding-bottom: 6px; }
.pane[data-pane="care"] .chat-log { margin-top: 0; border-top: 0; border-radius: 0; }

/* the plus, and the tray it opens under the line to type in */
.pane[data-pane="care"] .chat-form { align-items: center; }
.tray-toggle { flex: none; position: relative; width: 34px; height: 34px; padding: 0; border: 2px solid color-mix(in srgb, var(--ink) 20%, var(--paper)); border-radius: 50%;
  background: #fff; color: var(--ink); font: inherit; font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tray-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tray-toggle .dot, .tray .dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; border: 2px solid var(--paper); }
.tray-toggle .dot[hidden], .tray .dot[hidden] { display: none; }
.pane[data-pane="care"] .chat-form:has(~ .tray:not([hidden])) { border-radius: 0; box-shadow: none; }
.tray { order: 5; flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 4px; padding: 9px 8px 10px;
  background: color-mix(in srgb, var(--paper) 90%, var(--accent)); border: 2px solid var(--line); border-top: 0; border-radius: 0 0 var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
.tray[hidden] { display: none; }

.tray button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; line-height: 1.2; color: var(--ink); cursor: pointer; }
.tray .ic { position: relative; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 14%, var(--paper)); display: grid; place-items: center; }
.tray button:active .ic { transform: translateY(1px); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.tray .ic img { width: 24px; height: 24px; image-rendering: pixelated; }
.tray .n { position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: #ffe27a; font-weight: 400; font-size: 10px; line-height: 16px; }

/* a sheet over the window: the window stays in view behind it, dimmed */
.panes > .pane[data-pane="care"] { display: flex; flex-direction: column; animation: none; }
.panes > .pane.card.open { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; max-height: calc(100% - 36px); border-radius: 14px 14px 0 0; padding-top: 12px;
  animation: sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panes > .pane.card.open { animation: none; } }
.sheet-dim { position: absolute; inset: 8px 0 0; z-index: 5; background: rgb(43 34 51 / 0.35); border-radius: var(--round); }
.sheet-dim[hidden] { display: none; }
.panes > .pane.card .sheet-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; margin: 0; padding: 0; border: 2px solid var(--line); border-radius: var(--round);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1; text-align: center; }
.panes > .pane.card.open { padding-right: 46px; } /* (room for the X: nothing runs under it) */
.panes > .pane.card.open > :is(details, #pet-info, .chat-memory) { margin-right: -34px; } /* (rows below the title use the whole width again) */

.no-pet #speed { display: none; }
/* with no pet, what to do first fills the window instead (there is nothing behind it to go back to) */
.no-pet .panes > .pane.card.open { top: 8px; max-height: none; border-radius: var(--round); animation: none; }
.no-pet .sheet-dim { display: none; }

/* ---------- every window opens the same way (2026-10-04) ----------
   What the plus opens, whether a panel of the page or a window of its own, comes up from below as one kind of sheet:
   the window's width, rounded on top, an X in its top right corner, the rest of the page dimmed behind it; a press on
   the dimmed part closes it. */
dialog.letter, dialog.hatch, dialog.help { width: min(390px, calc(100vw - 42px)); max-height: min(72dvh, calc(100dvh - 60px)); margin: auto auto 30px; background: var(--paper);
  border: 2px solid var(--line); border-radius: 14px 14px var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
dialog.letter[open], dialog.hatch[open], dialog.help[open] { animation: sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { dialog.letter[open], dialog.hatch[open], dialog.help[open] { animation: none; } }
/* (the ones with a lot to read or to choose take more of the height) */
dialog.hatch, #letter-dialog, #career-dialog, #intro-dialog, #memorial-dialog, #codex-dialog { max-height: calc(100dvh - 60px); }
dialog.letter::backdrop, dialog.hatch::backdrop, dialog.help::backdrop { background: rgb(43 34 51 / 0.35); }
.panes > .pane.card.open { border-radius: 14px 14px var(--round) var(--round); }
.dialog-x, .hatch .sheet-close { width: 30px; height: 30px; font-size: 16px; border-radius: var(--round); }
.panes > .pane.card .sheet-x { top: 10px; right: 10px; }

/* the frame's strip: its name on the left, by the power light; and the screen from edge to edge of the frame */
.face-head .head-side.left { display: none; }
.face-head h1 { margin: 0 auto 0 16px; }
.face-bezel { padding: 3px 0 0; }
.face-head { padding: 0 5px 0 0; }
/* (one kind of title too: on the left, the same size, in a panel of the page or a window of its own) */
dialog .letter-title, dialog .hatch-body h2, dialog .help-body h2 { text-align: left; font-size: 16px; }
.panes > .pane.card h2 { font-size: 16px; }
.face-head h1 { margin-left: 20px; }

/* ---------- one size for every sheet (2026-10-04) ----------
   A panel of the page and a window of its own cover the same place: the window under the screen, from its head to its
   foot, whatever is in them (what does not fit scrolls). The screen above stays in view. */
.panes > .pane.card.open { top: 8px; max-height: none; }
dialog.letter, dialog.hatch, dialog.help, dialog.hatch, #letter-dialog, #career-dialog, #intro-dialog, #memorial-dialog, #codex-dialog, #board-dialog {
  position: fixed; inset: auto; margin: 0; left: var(--sheet-left, 21px); top: var(--sheet-top, 30vh);
  width: var(--sheet-w, calc(100vw - 42px)); max-width: none; height: var(--sheet-h, 65vh); max-height: none; }
/* the power light: level with the name beside it (the strip is 24px tall now) */
.face-bezel::before { top: 12px; left: 9px; }
/* (a sheet's corners are the window's own: rounder ones let the dark head behind show through at the top) */
.panes > .pane.card.open, dialog.letter, dialog.hatch, dialog.help { border-radius: var(--round); }

/* ---------- in the middle, and drawn in pixels (2026-10-04) ----------
   The plus and every X are little pixel drawings on an 8 by 8 grid (a letter sits off its middle in this font), and the
   buttons whose words sat a dot or two off their middle are evened out (measured from screenshots). */
.tray-toggle, .panes > .pane.card .sheet-x, .dialog-x, .hatch .sheet-close { font-size: 0; color: transparent; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; }
.tray-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%233d2f45'%3E%3Crect x='3' y='0' width='2' height='8'/%3E%3Crect x='0' y='3' width='8' height='2'/%3E%3C/svg%3E"); }
.tray-toggle[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%23fffaf2'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='1' y='1' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='6' y='0' width='2' height='2'/%3E%3Crect x='5' y='1' width='2' height='2'/%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='1' y='5' width='2' height='2'/%3E%3Crect x='0' y='6' width='2' height='2'/%3E%3C/svg%3E"); }
.panes > .pane.card .sheet-x, .dialog-x, .hatch .sheet-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%233d2f45'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='1' y='1' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='6' y='0' width='2' height='2'/%3E%3Crect x='5' y='1' width='2' height='2'/%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='1' y='5' width='2' height='2'/%3E%3Crect x='0' y='6' width='2' height='2'/%3E%3C/svg%3E"); background-size: 12px 12px; background-color: var(--paper); }
#chat-send { padding-top: 6px; padding-bottom: 2px; }

.codex-tab { padding: 5px 4px 0; }
.event-action { padding: 2px 9px 0; }

/* (this font leaves a little room right of each letter and below it: words are nudged a dot right and down) */
#chat-send { padding: 5px 11px 3px 13px; }

.codex-tab { padding: 4px 3px 1px 5px; }
.event-action { padding: 2px 8px 0 10px; }

.tray-toggle[aria-expanded="true"] { background-color: var(--ink); background-position: center; background-repeat: no-repeat; background-size: 12px 12px; }
/* the strip's name, keys and light sit 2px lower (the room comes from the gap above the screen) */
.face-head { margin: 2px 0 2px; }
.face-bezel::before { top: 14px; }
.face-head { margin: 4px 0 0; }
.face-bezel::before { top: 16px; }
.face-head { margin: 3px 0 1px; }
.face-bezel::before { top: 15px; }

/* the gauges in the window's head: one bar each, pixel-edged, its color says how it is (short ones blink) */
.plate .mini .meter { gap: 4px; align-items: center; }
.plate .mini img { width: 14px; height: 14px; }
.plate .mini .bar { flex: 1 1 auto; min-width: 0; height: 7px; padding: 1px; background: #2a2333; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 22%, var(--ink)); }
.plate .mini .bar::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--tone); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35); }
.plate .mini .bar.ok { --tone: #6fe08a; }
.plate .mini .bar.mid { --tone: #ffd34d; }
.plate .mini .bar.low { --tone: #ff4d5e; animation: bar-blink 1s steps(2) infinite; }
@keyframes bar-blink { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .plate .mini .bar.low { animation: none; } }

/* how far along this age it is: the words of what comes next ("청소년까지 39분") sit on a bar that fills up, in place
   of the thin line under the head. Something wrong instead: the words in red, no bar. */
.plate .plate-grow { display: none; }
.plate .plate-when { flex: 0 1 auto; min-width: 0; height: 18px; padding: 0 7px; border-radius: 3px; line-height: 18px; font-size: 11px; color: #fff8ee;
  background: linear-gradient(90deg, #ff5c9d var(--grow, 0%), rgb(255 255 255 / 0.13) var(--grow, 0%)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.22); }
.plate .plate-when.alert { background: rgb(255 77 94 / 0.22); color: #ffb3bb; }
.no-pet .plate .plate-when { display: none; }
/* a narrow phone: the age badge gives way so the name and what comes next are read whole (the age is in 이야기) */
@media (max-width: 370px) { .plate .stage-badge { display: none; } }

/* the head and the talk, apart: the head is a card of its own above the talk window, with a gap between */
.pane[data-pane="care"] > .plate { border-radius: var(--round); padding-bottom: 6px; margin-bottom: 6px; box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-log { border-top: 2px solid var(--line); border-radius: var(--round) var(--round) 0 0; }

/* time running fast: the arrows on the speed key run forward, in steps, the quicker the faster */
.face-head .speed-btn.fast img { animation: fast-run var(--run, 0.4s) steps(3) infinite; }
@keyframes fast-run { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
.face-head .speed-btn { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .face-head .speed-btn.fast img { animation: none; } }

/* the speed key's picture: two arrows going round, still at normal speed; turning while time runs fast (in eight
   steps, the quicker the faster) */
.face-head .speed-btn .sync { display: block; width: 13px; height: 13px; flex: none; color: color-mix(in srgb, #fff 55%, var(--bezel)); }
.face-head .speed-btn.fast .sync { color: #ffd34d; animation: sync-turn calc(var(--run, 0.4s) * 3) steps(8) infinite; }
@keyframes sync-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .face-head .speed-btn.fast .sync { animation: none; } }

/* (the arrows are drawn smooth now: they turn smoothly too) */
.face-head .speed-btn .sync { width: 14px; height: 14px; }
.face-head .speed-btn.fast .sync { animation-timing-function: linear; }

/* what it needs, by the name on the frame's strip: small red tags, blinking; the screen is left clear */
.face-head h1 { margin-right: 0; }
.strip-needs { flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; margin-left: 8px; overflow: hidden; }
.strip-needs:empty { display: none; }
.need-tag { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 3px; border: 0; border-radius: 5px; background: #ff5c6d; color: #fff;
  font: inherit; font-size: 10px; line-height: 1; letter-spacing: 0; cursor: pointer; animation: need-blink 1.2s steps(2) infinite; }
.need-tag img { width: 13px; height: 13px; image-rendering: pixelated; }
.need-tag:active { transform: translateY(1px); }
@keyframes need-blink { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .need-tag { animation: none; } }
@media (max-width: 370px) { .need-tag + .need-tag { display: none; } } /* (a narrow phone: the most pressing one) */
/* (the need tags: the same height, corners, letters and line as the speed key) */
.strip-needs { align-self: center; align-items: center; height: 22px; }
.need-tag { height: 22px; padding: 0 7px 0 4px; border-radius: 6px; font-size: 11px; gap: 3px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.25); }
.need-tag img { width: 14px; height: 14px; }
/* (as much room under the strip's keys as above them) */
.face-head { margin-bottom: 6px; }
/* (measured by eye: the light line along the frame's top reads as frame, so the dark room above the keys is 4px; below
   is made the same) */
.face-head { margin-bottom: 3px; }

/* the screen's message box: two lines at most and a little see-through, so the pet is not hidden behind it (the
   whole of what it says is in the talk) */
.event { padding: 4px 8px 5px; background: rgb(27 28 51 / 0.8); }
.event .event-text, #event-text, #incident-text { display: block; overflow: visible; } /* (the whole line, never cut short) */

/* the medicine chip, in the window right over the care chips (not on the frame: the thumb stays down here) */
.pane[data-pane="care"] > .strip-needs { order: 2; flex: none; height: auto; margin: 0; padding: 6px 6px 0; gap: 5px; background: var(--paper);
  border-left: 2px solid var(--line); border-right: 2px solid var(--line); align-self: stretch; overflow: visible; }
.pane[data-pane="care"] > .strip-needs:empty { display: none; }
.pane[data-pane="care"] > .strip-needs .need-tag { height: 28px; padding: 0 10px 0 6px; border-radius: 99px; font-size: 12px; gap: 4px; box-shadow: none; border: 2px solid #ff5c6d; }
.pane[data-pane="care"] > .strip-needs .need-tag img { width: 16px; height: 16px; }

/* a short window (a desk at 720px, a short phone): the tray's tiles smaller, so some of the talk stays in view */
@media (max-height: 760px) {
  .tray { gap: 4px 4px; padding: 6px 8px 7px; }
  .tray .ic { width: 36px; height: 36px; border-radius: 10px; }
  .tray .ic img { width: 20px; height: 20px; }
}
/* the little tag of the screen's message box sits up on its top edge, with room between it and the words */
.event-tag { top: -14px; }
.event { padding-top: 10px; }

/* first times and promises: cards in the talk, and lists in 이야기 */
.chat-log li.mark { justify-self: center; max-width: 96%; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 2px solid #e3c05a; background: #fff6d6;
  border-radius: var(--round); font-size: 12px; line-height: 1.35; }
.chat-log li.mark b { flex: none; font-weight: 400; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px; background: #e3a72f; color: #fff; }
.chat-log li.mark.promise { border-color: #f3a9c4; background: #fff0f5; }
.chat-log li.mark.promise b { background: #ff5c9d; }
.marks { margin: 4px 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; }
.marks li { padding: 3px 8px; border-radius: var(--round); background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
/* what it is (and a small note: when, or who they are to it) on its own line, then the rest under it */
.marks li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; }
.marks li b { font-weight: 400; color: var(--accent); }
.marks li small { font-size: 11px; color: var(--muted, #6d6376); white-space: nowrap; }
.marks li span { grid-column: 1 / -1; }

/* the pet's own time: a small pill over the screen's top right corner, the sun or the moon beside the hour */
.game-clock { position: absolute; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border-radius: 9px;
  background: rgb(27 28 51 / 0.42); color: #fffaf2; font-size: 11px; line-height: 16px; pointer-events: none; }
/* (a button since 2026-10-21, so the keyboard reaches 잘 시간: none of a button's own look) */
.game-clock { appearance: none; border: 0; margin: 0; font-family: inherit; text-align: left; cursor: default; }
.game-clock.bed:focus-visible { outline: 2px solid #ffd35c; outline-offset: 1px; }
.game-clock[hidden] { display: none; }
.game-clock img { width: 12px; height: 12px; image-rendering: pixelated; }
.game-clock b { font-weight: 400; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }

/* while the screen asks something (a question, an event to answer), the passing message box steps aside: the two
   used to sit on top of each other in the same place */
#device-frame:has(#incident:not([hidden])) #event { visibility: hidden; }

/* ---------- 오컴의 면도날 (2026-10-05): what a press does and what it grows, shown at once ---------- */
#speed[hidden] { display: none !important; } /* (only the debug speed is left) */

/* A press's result over the gauges it moved: +12 rising green, -3 sinking red */
#meters .meter { position: relative; }
.gauge-pop { position: absolute; right: 2px; top: -6px; z-index: 3; font-size: 15px; line-height: 1; font-weight: 700; pointer-events: none;
  text-shadow: 0 1px 0 #1b1c33, 1px 0 0 #1b1c33, -1px 0 0 #1b1c33, 0 -1px 0 #1b1c33; animation: gauge-pop 1.5s ease-out forwards; }
.gauge-pop.up { color: #6dff8e; }
.gauge-pop.down { color: #ff7b8b; animation-name: gauge-sink; }
@keyframes gauge-pop { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes gauge-sink { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(10px); } }

/* A leaning that grew, rising over the screen: 「다정 +1」, and the path when it changes */
.lean-pop { position: absolute; z-index: 4; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; animation: lean-rise 2.6s ease-out forwards; }
.lean-pop b { padding: 3px 10px; border: 2px solid var(--ink, #1b1c33); border-radius: 10px; background: #fff6c9; color: #1b1c33; font-size: 15px; line-height: 1.2; }
.lean-pop span { padding: 2px 8px; border-radius: 8px; background: rgb(27 28 51 / 0.75); color: #fffaf2; font-size: 12px; }
@keyframes lean-rise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.85); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  22% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, -10px); } 100% { opacity: 0; transform: translate(-50%, -18px); } }
.bents { display: grid; gap: 4px; margin: 2px 0 4px; }
.bent { display: grid; grid-template-columns: 3.4em 1fr 1.6em; align-items: center; gap: 6px; font-size: 13px; }
.bent b { font-weight: 400; color: var(--ink); }
.bent i { height: 8px; border: 2px solid var(--line); border-radius: 5px; background: linear-gradient(90deg, var(--accent) var(--v), transparent var(--v)); }
.bent small { text-align: right; color: var(--muted, #7a6f6a); }
.path-line { margin: 2px 0 0; font-size: 13px; color: var(--ink); }

.chips.gone { display: none; }

/* ---------- 오컴의 면도날 2 (2026-10-05 밤): one day a visit, the morning's plan ---------- */
/* 이야기 판의 사진 찍기와 친구 부르기: one row of two equal buttons, paper and ink like the game's other boxes */
.story-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.story-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 6px 8px;
  border: 2px solid var(--line); border-radius: var(--round); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px;
  line-height: 1.2; text-align: center; word-break: keep-all; box-shadow: 0 2px 0 var(--edge); cursor: pointer; }
.story-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
.story-btn img { flex: none; width: 18px; height: 18px; image-rendering: pixelated; }

/* The morning's plan: four big choices over the talk */
.plan-card { order: 1; margin: 6px 8px; padding: 10px 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff6c9; color: #1b1c33;
  box-shadow: 0 3px 0 var(--edge, #1b1c33); }
.plan-card[hidden] { display: none; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.plan-head b { font-size: 16px; }
.plan-head span { font-size: 12px; opacity: 0.75; }
.plan-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.plan-option { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 2px solid #1b1c33; border-radius: 12px;
  background: #fffaf2; color: #1b1c33; font: inherit; cursor: pointer; }
.plan-option:active { transform: translateY(1px); }
.plan-option img { width: 28px; height: 28px; image-rendering: pixelated; }
.plan-option b { font-size: 14px; font-weight: 400; }
.plan-option small { font-size: 11px; opacity: 0.7; }
.need-tag:disabled { opacity: 0.75; cursor: default; }
/* (kept small: on a short phone it must not push the buttons and the line to type in off the screen) */
.plan-card { margin: 4px 6px; padding: 6px 7px 7px; }
.plan-head { margin: 0 2px 5px; }
.plan-head b { font-size: 14px; }
.plan-option { padding: 4px 2px 3px; gap: 0; border-radius: 10px; }
.plan-option img { width: 20px; height: 20px; }
.plan-option b { font-size: 13px; line-height: 1.2; }
.plan-option small { font-size: 10px; white-space: nowrap; line-height: 1.2; }

/* The samples (2026-10-07): an animal, a thing and a person. Each tile shows the baby it hatches as, big, and the photo
   it comes from as a small round badge in the corner; its kind under it. Paper and ink, like the game's other buttons */
.sample-list:has(.photo-sample) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-sample { display: flex; flex-direction: column; align-items: stretch; gap: 6px; aspect-ratio: auto; padding: 6px 6px 7px;
  border: 2px solid var(--line); border-radius: var(--round); background: var(--paper); box-shadow: 0 2px 0 var(--edge);
  font: inherit; color: var(--ink); transition: transform .12s, box-shadow .12s, border-color .12s; }
.photo-sample:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--edge); }
.photo-sample .art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--round) - 2px); background: var(--tint); }
.photo-sample .baby { width: 78%; height: auto; image-rendering: pixelated; transform: translate(-7%, -5%); } /* (clear of the badge) */
.photo-sample .from { position: absolute; right: -5px; bottom: -5px; width: 40%; height: auto; aspect-ratio: 1; object-fit: cover;
  border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 2px var(--line); image-rendering: auto; }
.photo-sample .kind { font-size: 13px; line-height: 1.2; text-align: center; }
.photo-sample[aria-pressed="true"] { background: var(--paper); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.photo-sample[aria-pressed="true"] .kind { color: var(--accent); }
/* (before a picture is chosen the button row has nothing to show: no empty strip at the foot of the window) */
.hatch:not(.chosen) .hatch-actions { display: none; }
/* A short phone: the photo box takes less room, so the samples are in view without scrolling */
@media (max-height: 700px) {
  .hatch .drop { min-height: 56px; padding: 8px; }
  .hatch .hatch-load { margin-bottom: 6px; }
}

/* A name being taught (목업 12): its ears at each call, a dot for each of the calls it needs; then the card asking to keep it */
.chat-log li.ear { justify-self: center; display: flex; align-items: center; gap: 8px; padding: 2px 10px; border: 0; background: none; color: var(--muted); font-size: 12px; }
.name-dots { display: inline-flex; gap: 3px; }
.name-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 15%, var(--paper)); }
.name-dots i.on { background: var(--accent); }
.chat-log li.event-line.name-ask { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); border-color: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.chat-log li.event-line.name-ask b { background: var(--accent); }

/* The night (목업 11): the bedtime card in the evening (the day's recap, three things to do at bedtime, the note), and
   asleep, the diary being written and the wheel that sets when it wakes. The plan card is its model */
.night-card .recap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0 2px 8px; font-size: 12px; line-height: 1.4; }
.night-card .recap dt { opacity: 0.65; }
.night-card .recap dd { margin: 0; min-width: 0; }
.night-card .tuck { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.night-card .tuck .plan-option.on { background: color-mix(in srgb, var(--accent) 22%, #fffaf2); }
.night-card .tuck small { word-break: keep-all; }
.note-row { display: flex; gap: 6px; margin-top: 6px; }
.note-row[hidden] { display: none; }
.note-row input { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; border: 2px dashed #c98aa8; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; color: #1b1c33; }
.note-row .primary { flex: none; font-size: 12px; padding: 0 10px; }
.night-plain { display: block; margin: 6px auto 0; font-size: 12px; }
.night-writing { margin: 2px; text-align: center; font-size: 13px; color: #6d6376; }
.dots i { font-style: normal; animation: night-dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes night-dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; } }

/* the diary as it falls asleep and the dream in the morning, in the talk: paper cards */
.chat-log li.night-line { justify-self: stretch; max-width: none; display: grid; gap: 3px; background: #fffdf7; border-color: #e3d3da; }
.chat-log li.night-line .plan-head { margin: 0; }
.chat-log li.night-line .plan-head b { font-size: 13px; font-weight: 400; }
.chat-log li.night-line .plan-head span { font-size: 11px; }
.night-text { margin: 0; font-size: 12.5px; line-height: 1.6; white-space: pre-line; }
.chat-log li.event-line b .from-night { margin-left: 5px; padding: 0 5px; border-radius: 4px; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; }
/* the story's days: one a day, opened for its diary */
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.days li { border: 2px solid #e3d3da; border-radius: 8px; padding: 5px 8px; background: #fff; }
.days summary { cursor: pointer; font-size: 13px; }
.days summary b { font-weight: 400; color: #c2185b; font-size: 11px; margin-right: 6px; }
.days p { margin: 5px 0 0; padding-top: 5px; border-top: 2px dashed #e3d3da; font-size: 12.5px; line-height: 1.6; }
/* A short phone: while the night card is up the care buttons step aside (they do nothing for a sleeping pet, and the
   bedtime is what is being done), and the card itself is tighter */
@media (max-height: 700px) {
  #device-frame.night-up .face-buttons { display: none; }
  .night-card .recap { margin-bottom: 5px; font-size: 11px; gap: 1px 8px; }
  .night-card .tuck small { display: none; }
  .night-plain { margin-top: 4px; }
}
/* While it sleeps: into its dream (two scenes, two choices each), and once a day, wake it now */
.night-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.night-actions:empty { display: none; }
.dream-scene { margin: 0 2px 8px; font-size: 13px; line-height: 1.55; }
.dream-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dream-choices .plan-option b { word-break: keep-all; }

/* ---------- the last letter as an album (목업 14 A): a cover, the ages it lived with their photos, then the letter ---------- */
#letter-dialog .album-body { padding: 18px 16px 18px; background-image: none; display: grid; gap: 12px; }
.album-cover { display: grid; justify-items: center; gap: 4px; text-align: center; }
.album-cover small { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.album-cover .letter-title { margin: 0; font-size: 21px; }
#letter-dialog .epitaph { margin: 2px 0 0; padding: 2px 12px; border-radius: 999px; background: var(--ink); color: #fff8ee; font-size: 13px; }
#letter-dialog .epitaph:empty { display: none; }
.album-meta { margin: 0; font-size: 12px; color: var(--muted); }
.album-ages { list-style: none; margin: 0; padding: 4px 2px 0; position: relative; display: grid; gap: 14px; }
.album-ages::before { content: ""; position: absolute; left: 36px; top: 16px; bottom: 20px; border-left: 2px dashed color-mix(in srgb, var(--accent) 30%, #fffaf0); }
.album-age { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: start; }
.album-age.develop { animation: album-develop 0.7s ease-out both; }
@keyframes album-develop { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .album-age.develop { animation: none; } }
.album-no { position: absolute; left: -6px; top: -6px; z-index: 1; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-style: normal; font-size: 11px; box-shadow: 0 0 0 2px #fffaf0; }
.album-photo { position: relative; width: 72px; padding: 5px 5px 15px; background: #fff; border: 1.5px solid #ecdfe5; border-radius: 4px;
  box-shadow: 0 2px 6px rgb(61 47 69 / 0.15); transform: rotate(var(--tilt, -2deg)); }
.album-photo canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 2px; image-rendering: pixelated; background: linear-gradient(#cfeaff, #e8f6d6); }
.album-photo i { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-style: normal; font-size: 9.5px; color: var(--muted); }
.album-age h4 { margin: 2px 0 2px; font-size: 15px; font-weight: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.album-age h4 small { font-size: 11px; color: var(--muted); }
.album-age p { margin: 0 0 5px; font-size: 13px; line-height: 1.55; }
.album-marks { display: flex; flex-wrap: wrap; gap: 4px; }
.album-marks i { font-style: normal; font-size: 10.5px; padding: 1px 8px; border-radius: 999px; background: #fff1c9; color: #6b5200; }
.album-marks i.promise { background: #ffe4ec; color: #a3245a; }
.album-marks i.trophy { background: #e7f6ea; color: #2f7a45; }
/* then the letter on its lined paper, and four numbers */
.letter-paper { padding: 14px 16px 10px; border: 1.5px solid #ecdfe5; border-radius: 8px; background: #fffdf7;
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--accent) 22%, transparent) 31px 32px); background-position: 0 40px; }
.letter-paper-title { margin: 0 0 8px; font-size: 15px; font-weight: 400; color: var(--muted); }
.letter-paper .letter-from { margin: 10px 0 2px; }
#letter-dialog .letter-life { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; background: none; }
#letter-dialog .letter-life div { display: grid; gap: 1px; padding: 6px 4px; border: 1.5px solid #ecdfe5; border-radius: 8px; background: #fff; text-align: center; }
#letter-dialog .letter-life b { font-weight: 400; font-size: 14px; color: var(--ink); }
#letter-dialog .letter-life small { font-size: 11px; color: var(--muted); }

/* ---- 속마음 카드 (목업 13, 목업 27): what was read of it, and how it takes what its owner did ---- */
.chat-log li.mind-card { justify-self: stretch; max-width: none; display: grid; gap: 7px; padding: 8px 10px 9px; border: 1.5px solid #ecdfe5; border-radius: 14px;
  background: linear-gradient(180deg, #fffefb, #fff7f9); box-shadow: 0 4px 14px rgb(61 47 69 / 0.1); animation: mind-rise 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
.chat-log li.mind-card.opened { cursor: pointer; animation: none; }
@keyframes mind-rise { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
.mind-card.folding { transition: opacity 0.22s, transform 0.22s; opacity: 0; transform: scale(0.96); }
.mind-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mind-title { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: #a23766; min-width: 0; }
.mind-title img { width: 14px; height: 14px; image-rendering: pixelated; flex: none; }
.mind-state { flex: none; font-size: 10px; color: #9a8ea2; padding: 1px 7px; border-radius: 999px; background: #f5eef2; transition: background 0.3s, color 0.3s; }
.mind-state.done { background: #e7f6ea; color: #2f8a4c; }
.mind-reads { display: flex; flex-wrap: wrap; gap: 5px; }
.mind-reads i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 10.5px; padding: 1px 8px 1px 5px; border-radius: 999px; background: #f4eef2; color: #5b4f63; }
.mind-reads i img { width: 12px; height: 12px; image-rendering: pixelated; }
.mind-reads i.hot { background: #ffe4ec; color: #b0306a; }
.mind-state.no { background: #ffe9ef; color: #b0306a; }
/* how it takes it (목업 27): why (the toy's rule, or what its mood is), what it does, and what it says */
.mind-way { display: grid; gap: 2px; padding: 7px 10px 8px; border-radius: 10px; background: #e7f6ec; color: #1b3b26; animation: mind-pop 0.4s ease-out; }
.mind-way.no { background: #ffe9ef; color: #7a2048; }
.mind-way[hidden], .mind-hint[hidden] { display: none; }
.mind-way small { font-size: 10.5px; opacity: 0.8; }
.mind-way b { font-size: 13.5px; font-weight: normal; }
.mind-way q { font-size: 12.5px; }
@keyframes mind-pop { from { opacity: 0; transform: translateY(3px); } }
.mind-hint { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #7a6c82; }
.mind-hint button { font: inherit; font-size: 11px; padding: 1px 9px; color: var(--ink); background: #fff7d6; border: 2px solid var(--ink); border-radius: 6px; cursor: pointer; }
.chat-log li.took small.took-why { display: block; margin-top: 1px; font-size: 11px; color: #9a5a78; }
/* the took line, folded: the soft chip that opens the card again */
.mind-chip { margin-left: 6px; border: 0; font: inherit; font-size: 10px; padding: 1px 8px; border-radius: 999px; background: #f4eef2; color: #5b4f63; cursor: pointer; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) {
  .chat-log li.mind-card, .mind-way { animation: none; }
}
.chat-log li.took.has-mind { cursor: pointer; }

/* ---- 화면 속 알림 (목업 15 A, 2026-10-08): soft bubbles instead of the dark game text box ---- */
.event, .event.incident { padding: 7px 12px 8px; background: #fffdf7; color: var(--ink); border: 0; outline: 0; border-radius: 16px;
  box-shadow: 0 3px 0 rgb(61 47 69 / 0.18), 0 6px 16px rgb(27 28 51 / 0.22); animation: bubble-pop 0.42s cubic-bezier(0.2, 1.25, 0.4, 1); }
@keyframes bubble-pop { from { opacity: 0; transform: scale(0.6) translateY(6px); } }
.event .event-tag, .incident .event-tag { position: static; display: inline-block; margin: 0 0 2px -2px; padding: 0 7px; border: 0; border-radius: 999px; font-size: 10px; line-height: 16px; background: #ffe4ec; color: #b0306a; }
.event .event-tag[hidden] { display: none; }
.event .event-text { line-height: 1.4; }
.event .event-text.done::after { content: none; }
/* what the pet did: out of the pet, following it, its tail pointing down at it */
#event.pet-bubble { width: max-content; transform-origin: var(--tail, 50%) 100%; }
#event.pet-bubble::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 13px; height: 13px; margin-left: -6.5px; background: #fffdf7; border-radius: 0 0 4px 0; transform: rotate(45deg); box-shadow: 3px 3px 0 rgb(61 47 69 / 0.08); }
.event-says { display: block; margin-top: 2px; color: #9a5a7c; font-size: calc(var(--event-size, 13px) - 1px); line-height: 1.4; }
.event-says[hidden] { display: none; }
.event-says .mind { margin-top: 0; font-size: 11px; }
/* the game's own words, and what waits for an answer: across the top, a yellow "!" on the waiting one */
#event.notice .event-tag { background: #fff0c2; color: #6a5200; }
.event.incident { background: linear-gradient(180deg, #fffdf7, #fff1f6); padding-bottom: 12px; }
.event.incident .event-tag { background: #ff6b5b; color: #fffdf7; }
.event.incident.question .event-tag { background: #4cb8ff; color: #1b1c33; }
.event.incident.outing .event-tag { background: #3ccf6e; color: #1b1c33; }
.event-bang { position: absolute; right: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: #ffd23f; display: grid; place-items: center; font-size: 13px; line-height: 1; color: #5a4300; box-shadow: 0 2px 0 rgb(61 47 69 / 0.25); animation: bang-bob 1.6s ease-in-out 0.4s infinite; }
@keyframes bang-bob { 50% { transform: translateY(-3px) rotate(-8deg); } }
.incident .incident-clock { left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: #f3e7ec; }
.incident .incident-clock b { background: #ff8fb6; border-radius: 2px; }
.incident .incident-tip { color: #b0306a; }
.event .event-action { border: 0; border-radius: 999px; background: var(--accent); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .event, .event.incident, .event-bang { animation: none; } }
#incident-text:empty { display: none; }
.incident .incident-tip { margin: 2px 0 0; color: var(--ink); font-size: var(--event-size, 13px); }
.event-bang { right: auto; left: -6px; }
#event.pet-bubble { z-index: 5; } /* (it is gone in seconds: over what waits for an answer, which stays) */

/* ---- 픽셀 말풍선 (목업 15 D, 2026-10-08): the same bubbles in the toy's own pixel language. The cream is cut with
   stepped corners (::before); the ink outline is drawn around the whole shape, tail and all, by the drop shadows ---- */
.event, .event.incident { --px: 2px; background: none; border-radius: 0; box-shadow: none; color: #3d2f45;
  filter: drop-shadow(var(--px) 0 0 #3d2f45) drop-shadow(calc(-1 * var(--px)) 0 0 #3d2f45) drop-shadow(0 var(--px) 0 #3d2f45) drop-shadow(0 calc(-1 * var(--px)) 0 #3d2f45) drop-shadow(0 3px 0 rgb(27 28 51 / 0.35));
  animation: bubble-step 0.32s steps(4) both; }
.event::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff8e6;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px); }
.event.incident::before { background: #fff8e6; }
@keyframes bubble-step { from { opacity: 0; transform: translateY(6px); } }
.event .event-tag, .incident .event-tag { border-radius: 0; padding: 0 6px; background: #f2c14e; color: #3d2f45; }
#event.notice .event-tag { background: #a7e3ff; color: #1b1c33; }
.event.incident .event-tag { background: #ff6b5b; color: #fffdf7; }
.event-says { color: #9a5a7c; }
/* the tail: a little stair of pixels down to the pet */
#event.pet-bubble::after { left: var(--tail, 50%); bottom: -8px; width: 10px; height: 8px; margin-left: -5px; border-radius: 0; transform: none; box-shadow: none; background: #fff8e6;
  clip-path: polygon(0 0, 100% 0, 100% 2px, 8px 2px, 8px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 2px, 0 2px); }
.event-bang { border-radius: 0; box-shadow: none; width: 18px; height: 18px; top: -9px; left: -7px; font-size: 12px; background: #ffd23f;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
  animation: bang-hop 1.2s steps(2) 0.4s infinite; }
@keyframes bang-hop { 50% { transform: translateY(-2px); } }
.incident .incident-clock { border-radius: 0; background: #f0dfd0; height: 3px; }
.incident .incident-clock b { border-radius: 0; background: #ff8fb6; }
.event .event-action { border-radius: 0; background: #ff5c9d; }
@media (prefers-reduced-motion: reduce) { .event, .event.incident, .event-bang { animation: none; } }
/* the morning's plans its night wrote: two by two, the picture beside the name */
.plan-option .plan-words { display: contents; }
.plan-options.own { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-options.own .plan-option { flex-direction: row; justify-content: flex-start; gap: 7px; padding: 7px 8px; text-align: left; }
.plan-options.own .plan-option img { flex: none; width: 24px; height: 24px; }
.plan-options.own .plan-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.plan-options.own .plan-option b { font-size: 13px; overflow-wrap: anywhere; }

/* ---------- 대화 판 (목업 17, 2026-10-08): on a phone the screen is on top, as tall as the room it has (more rows of sky
   and ground at a whole-number scale, never bigger dots), and the talk is a sheet pulled up over it from the bottom:
   peek, half or full (layoutSheet). The name and the gauges live in the screen's frame. ---------- */
body.sheet-ui .layout { padding: env(safe-area-inset-top, 0px) 0 0; }
body.sheet-ui .device-col::before { display: none; }
.device-frame.sheet-ui { border: 0; border-image: none; background: var(--shell); }
.device-frame.sheet-ui .face-panel { position: relative; display: block !important; padding: 0 !important; flex: 1 1 auto; min-height: 0; }
.device-frame.sheet-ui .face-panel > .face-bezel { position: absolute; z-index: 1; left: 0; right: 0; top: 0; width: auto; display: flex; flex-direction: column; align-items: center;
  padding: 0 3px 5px; border: 0; clip-path: none; border-radius: 0 0 16px 16px; box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.1), 0 3px 0 rgb(27 28 51 / 0.18); }
.device-frame.sheet-ui .face-bezel > .face-head { align-self: stretch; margin: 2px 4px 2px 20px; }
.device-frame.sheet-ui .face-bezel::before { left: 9px; top: 9px; }
.device-frame.sheet-ui .face-bezel > canvas { flex: none; width: auto; height: auto; aspect-ratio: auto; border: 0; image-rendering: pixelated; }

/* the name and the gauges, in one row along the frame under the screen */
.device-frame.sheet-ui .face-bezel > .plate { order: 2; align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 7px 0; background: none; border: 0;
  border-radius: 0; box-shadow: none; color: var(--paper); }
.device-frame.sheet-ui .face-bezel > .plate .plate-who { flex: 0 1 auto; min-width: 0; font-size: 13px; line-height: 20px; }
.device-frame.sheet-ui .face-bezel > .plate .plate-who b { font-size: 13px; line-height: 20px; }
.device-frame.sheet-ui .face-bezel > .plate .plate-when,
.device-frame.sheet-ui .face-bezel > .plate .plate-grow { display: none; }
.device-frame.sheet-ui .face-bezel > .plate .plate-row { flex: 1 1 auto; margin: 0; min-width: 0; justify-content: flex-end; }
.device-frame.sheet-ui .face-bezel > .plate .mini { flex: 0 1 230px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
/* the sheet */
.device-frame.sheet-ui .panes { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; top: var(--sheet-top, 50%); margin: 0; display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--paper); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 18px rgb(27 28 51 / 0.28);
  transition: none; } /* (2026-10-09: every move is the spring's, glideSheet; a css glide of its own ran out of step with the screen) */
.device-frame.sheet-ui.sheet-drag .panes { transition: none; }
.device-frame.sheet-measure .panes { top: auto !important; height: auto; transition: none; }
.device-frame.sheet-measure .panes > .pane { flex: none !important; }
.sheet-grip { display: none; }
.device-frame.sheet-ui .sheet-grip { display: grid; place-items: center; flex: none; height: 20px; cursor: grab; touch-action: none; }
.device-frame.sheet-ui .sheet-grip i { width: 44px; height: 4px; border-radius: 2px; background: #d9c9d2; }
.device-frame.sheet-ui .panes > .pane { flex: 1 1 auto; min-height: 0; }
.device-frame.sheet-ui .pane[data-pane="care"] .chat-log { margin-top: 0; border: 0; box-shadow: none; background: none; }
.device-frame.sheet-ui .sheet-dim { display: none !important; }
/* peek: one line of what just happened over the buttons; pressed, the talk comes up */
.sheet-fresh { display: none; }
.device-frame.sheet-ui[data-sheet="peek"] .sheet-fresh { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; margin: 0 2px 6px; padding: 5px 10px; border: 0; border-radius: 10px;
  background: #fff3c2; color: #5b4f63; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.device-frame.sheet-ui .sheet-fresh.calm { background: #f4eef2; }
.sheet-fresh b { flex: none; font-weight: 400; font-size: 10.5px; padding: 0 6px; border-radius: 4px; background: #ff6b5b; color: #fff; }
.sheet-fresh b[hidden] { display: none; }
.sheet-fresh span { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; text-align: left; line-height: 1.45; } /* (all of it: 2026-10-09, a cut line read as a broken one) */
.sheet-fresh em { flex: none; font-style: normal; font-size: 11px; color: #b0306a; }
.device-frame.sheet-ui[data-sheet="peek"] .pane[data-pane="care"] .chat-log { display: none; }
/* full: the screen folded into a little window at the top left, the name and the gauges beside it */
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel { left: 8px; right: auto; top: 8px; padding: 3px; border-radius: 10px; cursor: pointer; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .face-head,
.device-frame.sheet-ui[data-sheet="full"] .face-bezel::before,
.device-frame.sheet-ui[data-sheet="full"] .game-clock:not(.bed),
.device-frame.sheet-ui[data-sheet="full"] ~ .speech,
.device-frame.sheet-ui[data-sheet="full"] #speech,
.device-frame.sheet-ui[data-sheet="full"] #event,
.device-frame.sheet-ui[data-sheet="full"] #incident,
.device-frame.sheet-ui[data-sheet="full"] #place-tag { display: none !important; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate { position: absolute; left: calc(100% + 12px); top: 6px; width: calc(100vw - 232px); flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 0; color: #fff; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-row { justify-content: flex-start; width: 100%; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini { flex: 1 1 auto; grid-template-columns: 1fr; gap: 5px; max-width: 120px; }
@media (prefers-reduced-motion: reduce) { .device-frame.sheet-ui .panes { transition: none; } }
/* (in the sheet the talk, the buttons and the line to type are one surface: no window lines of their own) */
.device-frame.sheet-ui .pane[data-pane="care"] .chat-form,
.device-frame.sheet-ui .pane[data-pane="care"] .face-buttons { border: 0; border-radius: 0; box-shadow: none; background: none; }
.device-frame.sheet-ui .pane[data-pane="care"] { padding: 0 10px 8px; }
/* (short, the talk sits at the bottom; longer than the window, it starts at the top so all of it can be scrolled to:
   2026-10-12, on Android Chrome plain "end" pushed what did not fit above the top edge, where no finger could reach it,
   and the talk did not scroll at all. Where "safe" is unknown the plain one stays.) */
.device-frame.sheet-ui .pane[data-pane="care"] .chat-log { align-content: end; align-content: safe end; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-who { flex-wrap: wrap; row-gap: 2px; }
.device-frame.sheet-ui .pane[data-pane="care"] .strip-needs { border: 0; box-shadow: none; background: none; }

/* ---------- 픽셀 대화 판 (2026-10-08): the talk under the screen in the toy's own pixel language ----------
   The screen above is pixels; the sheet under it was an ordinary chat app (soft radii, hairline borders, a radius with a
   2px border hugging it). Every surface of the sheet is now a pixel frame: a 9-slice of a few dots (border-image, drawn
   with crisp edges), stepped corners, one ink outline, and buttons with a pixel bevel that goes in when pressed. No
   border-radius anywhere in it, so no rounded corner fights a border. A shadow is a dot of ink under the shape. */
.device-frame.sheet-ui { --px-ink: #3d2f45; }
/* (the frames: little pictures of a few dots, one per surface and color) */
:root { --pxf-chip-fffdf8-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-chip-ffd6e6-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-chip-ffe39a-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23ffe39a'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23ffe39a'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23ffe39a'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-chip-fffdf8-cdb9c4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23cdb9c4'/%3E%3C/svg%3E"); --pxf-chip-efe6ec-efe6ec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%23efe6ec'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23efe6ec'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23efe6ec'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23efe6ec'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23efe6ec'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23efe6ec'/%3E%3C/svg%3E"); --pxf-chip-fff0bf-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23fff0bf'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23fff0bf'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23fff0bf'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-chip-ffe1ec-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-tag-f2c14e-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23f2c14e'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23f2c14e'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23f2c14e'/%3E%3C/svg%3E"); --pxf-tag-ff5c9d-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ff5c9d'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ff5c9d'/%3E%3C/svg%3E"); --pxf-card-fff0bf-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fff0bf'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fff0bf'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fff0bf'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fff0bf'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23fff0bf'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-tag-3d2f45-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-card-fffdf8-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-card-ffe1ec-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-card-f4efff-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23f4efff'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23f4efff'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23f4efff'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23f4efff'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23f4efff'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btn-fffdf8-3d2f45-e6d6c8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23e6d6c8'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23e6d6c8'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btnp-ffe1ec-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23ffe1ec'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-tag-f1e8ee-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23f1e8ee'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23f1e8ee'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23f1e8ee'/%3E%3C/svg%3E"); --pxf-tag-ffd6e6-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ffd6e6'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd6e6'/%3E%3C/svg%3E"); --pxf-tag-d9f2df-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23d9f2df'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23d9f2df'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23d9f2df'/%3E%3C/svg%3E"); --pxf-tag-ffd23f-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ffd23f'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ffd23f'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffd23f'/%3E%3C/svg%3E"); --pxf-card-fff8e6-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fff8e6'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fff8e6'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fff8e6'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fff8e6'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23fff8e6'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btnp-ffd6e6-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ffd6e6'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffd6e6'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ffd6e6'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23ffd6e6'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23ffd6e6'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-field-fffdf8-3d2f45-efe4ea: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23efe4ea'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btn-ff5c9d-3d2f45-c93c78: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ff5c9d'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23c93c78'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23c93c78'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btnp-ff5c9d-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ff5c9d'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23ff5c9d'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23ff5c9d'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btn-ffe27a-3d2f45-d9b13a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23ffe27a'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23ffe27a'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23ffe27a'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23ffe27a'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%23d9b13a'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%23d9b13a'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btnp-3d2f45-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%233d2f45'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%233d2f45'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%233d2f45'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%233d2f45'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-field-fffdf8-ff5c9d-ffe1ec: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%23ff5c9d'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23ffe1ec'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23ff5c9d'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23ff5c9d'/%3E%3C/svg%3E"); --pxf-chip-f6eff3-cdb9c4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' width='5' height='5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='3' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23f6eff3'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%23f6eff3'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='3' width='3' height='1' fill='%23f6eff3'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23cdb9c4'/%3E%3Crect x='1' y='4' width='3' height='1' fill='%23cdb9c4'/%3E%3C/svg%3E"); --pxf-tag-ff6b5b-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ff6b5b'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ff6b5b'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ff6b5b'/%3E%3C/svg%3E"); --pxf-card-fff8ec-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fff8ec'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fff8ec'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fff8ec'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fff8ec'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23fff8ec'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-tag-fff1c9-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23fff1c9'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23fff1c9'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23fff1c9'/%3E%3C/svg%3E"); --pxf-tag-ffe4ec-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ffe4ec'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ffe4ec'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffe4ec'/%3E%3C/svg%3E"); --pxf-tag-e7f6ea-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23e7f6ea'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23e7f6ea'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23e7f6ea'/%3E%3C/svg%3E"); --pxf-card-fffdf7-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%23fffdf7'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%23fffdf7'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%23fffdf7'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%23fffdf7'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='5' width='3' height='1' fill='%23fffdf7'/%3E%3Crect x='5' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); }
/* the sheet: cream paper with a stepped ink edge along its top */
.device-frame.sheet-ui .panes { border-radius: 0; box-shadow: none; padding-top: 2px;
  clip-path: polygon(0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% 100%, 0 100%);
  background:
    linear-gradient(var(--px-ink), var(--px-ink)) 6px 0 / calc(100% - 12px) 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) 4px 2px / 2px 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) 2px 4px / 2px 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) 0 6px / 2px 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) right 4px top 2px / 2px 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) right 2px top 4px / 2px 2px no-repeat,
    linear-gradient(var(--px-ink), var(--px-ink)) right 0 top 6px / 2px 2px no-repeat,
    linear-gradient(#fff, #fff) 6px 2px / calc(100% - 12px) 2px no-repeat,
    #fff8ec; }
.device-frame.sheet-ui .sheet-grip { height: 18px; }
.device-frame.sheet-ui .sheet-grip i { width: 36px; height: 4px; border-radius: 0; background: #d8c6cf; box-shadow: 0 2px 0 #fff; }
.device-frame.sheet-ui .sheet-grip:active i { background: #c3aab7; }

/* the talk */
.device-frame.sheet-ui .pane[data-pane="care"] .chat-log { gap: 8px; padding: 4px 2px 10px; font-size: 15px; } /* (13px read small on a phone: 2026-10-12) */
.device-frame.sheet-ui .chat-log li { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; box-shadow: none; padding: 3px 8px 4px; line-height: 1.45; max-width: 84%; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.16)); }
.device-frame.sheet-ui .chat-log li.me { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-ffd6e6-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 3px 8px 4px; }
.device-frame.sheet-ui .chat-log li.did { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-ffe39a-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 1px 8px 2px 6px; font-size: 12.5px; color: #4e3b00; }
.device-frame.sheet-ui .chat-log li.took { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fffdf8-cdb9c4) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 2px 8px 3px; font-size: 12.5px; filter: none; }
.device-frame.sheet-ui .chat-log li.took .lamp { margin-right: 6px; }
.device-frame.sheet-ui .chat-log li.news { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-efe6ec-efe6ec) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 0 8px 1px; font-size: 11.5px; color: #5b4f63; filter: none; }
.device-frame.sheet-ui .chat-log li.memory, .device-frame.sheet-ui .chat-log li.ear { border: 0; border-image: none; background: none; filter: none; }
/* (the game's own lines, in the middle of the talk: the bubbles' 84% from the left pushed them off center) */
.device-frame.sheet-ui .chat-log li.memory { justify-self: center; max-width: 92%; text-align: center; text-wrap: balance; }
.device-frame.sheet-ui .chat-log li.typing { padding: 1px 10px 2px; }
.device-frame.sheet-ui .chat-log li.mark { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fff0bf-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 2px 8px 2px 4px; }
.device-frame.sheet-ui .chat-log li.mark.promise { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-ffe1ec-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 2px 8px 2px 4px; }
.device-frame.sheet-ui .chat-log li.mark b { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-f2c14e-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 4px; color: #3d2f45; line-height: 16px; }
.device-frame.sheet-ui .chat-log li.mark.promise b { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 4px; color: #fff; }
/* 배웠어요, 잊었어요 (목업 22): what the owner taught it, with a small line under it of what that means now */
.chat-log li.mark span small { display: block; font-size: 11.5px; color: #7a6f7f; }
.device-frame.sheet-ui .chat-log li.mark.learned, .device-frame.sheet-ui .chat-log li.mark.unlearned { border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; padding: 4px 10px 4px 5px; }
.device-frame.sheet-ui .chat-log li.mark.learned b { border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; color: #1b3b26; }
.device-frame.sheet-ui .chat-log li.mark.unlearned b { border-image: var(--pxf-tag-f1e8ee-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; color: #3d2f45; }
.marks.taught li b { color: #2f7a4a; }
.marks.room li b { color: #8a5a12; }
/* Washing (목업 25): a line across the top of the screen while it lasts (as the game's own notices are): what to do now,
   and how far along */
.train-pop.wash-card { animation: none; transform: none; max-width: none; display: flex; align-items: center; gap: 6px; padding: 4px 8px 5px; text-align: left; white-space: nowrap; }
.train-pop.wash-card[hidden] { display: none; } /* (its display: flex above outranked [hidden]: an empty white box sat in the screen's corner) */
.wash-card .text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.wash-card .marks { flex: none; margin-left: 0; }
.wash-card b { flex: none; display: inline-block; padding: 0 6px; font-size: 11.5px; line-height: 17px; vertical-align: 1px;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-fff1c9-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.wash-card b.done { color: #1b3b26; border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.wash-card .marks i.on { background: #5bc0eb; }
.device-frame.sheet-ui[data-sheet="full"] .wash-card { display: none !important; }
/* The designer (목업 25) */
.designer-card .who { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.designer-card .who > img { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
.designer-card .who p { margin: 0; padding: 5px 10px; font-size: 14px; line-height: 1.45; flex: 1;
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; }
.designer-card .who small { display: block; font-size: 12px; color: var(--muted, #7a6f7f); }
.designer-card .ask textarea { width: 100%; resize: none; font: inherit; font-size: 16px; padding: 7px 9px; color: var(--ink); background: #fff; border: 3px solid var(--line); }
.designer-card .ask .row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.designer-card .ask .count { font-size: 12px; color: var(--muted, #7a6f7f); }
.designer-card .ask .primary { margin-left: auto; }
.designer-card .note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted, #7a6f7f); }
.designer-card .steps { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.designer-card .steps li { display: grid; grid-template-columns: 22px 4.4em 1fr; align-items: center; gap: 6px; font-size: 14px; }
.designer-card .steps li img { width: 20px; height: 20px; image-rendering: pixelated; }
.designer-card .steps li b { font-weight: 400; }
.designer-card .steps li .bar { height: 10px; background: #efe4ea; box-shadow: 0 0 0 2px var(--line); position: relative; }
.designer-card .steps li .bar b { position: absolute; inset: 0 auto 0 0; background: #ff5c9d; transition: width 1s linear; }
.designer-card .steps li.done { color: #2f7a4a; } .designer-card .steps li.wait { color: #9b8fa3; }
.designer-card .made { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.designer-card .made img, .designer-card .two img { width: 76px; height: 76px; padding: 4px; image-rendering: pixelated; background: #fff6fa; border: 3px solid var(--line); flex: none; }
.designer-card .made.small img { width: 56px; height: 56px; }
.designer-card .made b { display: block; font-weight: 400; font-size: 16px; } .designer-card .made small { color: var(--muted, #7a6f7f); font-size: 12px; }
.designer-card .two { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 10px; font-size: 12px; text-align: center; color: var(--muted, #7a6f7f); }
.designer-card .two img { display: block; margin-bottom: 3px; }
.designer-card .two .on img { border-color: #ff5c9d; box-shadow: 0 0 0 2px #ff5c9d; }
.designer-card .two .arrow { font-size: 18px; color: var(--ink); }
.designer-card .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 6px; }
.designer-card .acts .what { flex: 1 1 100%; font-size: 12.5px; color: var(--muted, #7a6f7f); }
.designer-card .closet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 8px; }
.designer-card .closet button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 5px 2px 4px; font: inherit; font-size: 11.5px; line-height: 1.25;
  color: var(--ink); background: #fff; border: 3px solid var(--line); cursor: pointer; }
.designer-card .closet button img { width: 44px; height: 44px; image-rendering: pixelated; }
.designer-card .closet button.on { border-color: #ff5c9d; box-shadow: 0 0 0 2px #ff5c9d; background: #fff1f6; }
.designer-card .closet button.on::after { content: "입음"; position: absolute; top: -9px; right: -6px; padding: 0 4px; font-size: 10.5px; color: #fff; background: #ff5c9d; border: 2px solid var(--line); }
.designer-card .closet button.old img { opacity: .7; }
.designer-card .closet button .age { position: absolute; top: -9px; left: -6px; padding: 0 4px; font-size: 10.5px; color: #3d2f45; background: #fff1c9; border: 2px solid var(--line); }
.designer-card .closet button.picked { outline: 2px dashed var(--line); outline-offset: 2px; }
/* 앨범 (목업 26): photos with friends, a scrapbook a page a day */
.story-btn.story-album { width: 100%; margin: 8px 0 0; justify-content: center; }
.story-btn.story-album b { font-weight: 400; color: var(--muted, #7a6f7f); }
.album-card { background: #f7ecd9; background-image: linear-gradient(transparent 23px, rgb(61 47 69 / .07) 24px); background-size: 100% 24px; }
.album-card .count { margin: 0 0 6px; font-size: 12.5px; color: var(--muted, #7a6f7f); }
.album-card .empty { margin: 12px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #7a6f7f); word-break: keep-all; }
.album-card .page { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; padding: 6px 4px 8px; }
.album-card .day { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: var(--muted, #7a6f7f); }
.album-card .day::after { content: ""; flex: 1; border-top: 2px dashed rgb(61 47 69 / .3); }
.album-card .slot { display: block; padding: 0; font: inherit; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer; }
.album-card .slot:nth-of-type(4n+1) .polaroid { transform: rotate(-2.5deg); } .album-card .slot:nth-of-type(4n+2) .polaroid { transform: rotate(2deg); }
.album-card .slot:nth-of-type(4n+3) .polaroid { transform: rotate(1.5deg); } .album-card .slot:nth-of-type(4n) .polaroid { transform: rotate(-1.5deg); }
.album-card .polaroid { position: relative; display: block; padding: 7px 7px 0; background: #fffdf8; box-shadow: 0 0 0 3px var(--line), 0 5px 0 3px rgb(61 47 69 / .25); }
.album-card .polaroid img { display: block; width: 100%; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--line); }
.album-card .polaroid .cap { display: block; padding: 5px 2px 7px; font-size: 12.5px; line-height: 1.3; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album-card .polaroid .cap small { display: block; font-size: 11px; color: var(--muted, #7a6f7f); }
.album-card .polaroid::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; margin-left: -23px; background: rgb(255 214 230 / .9); box-shadow: 0 0 0 2px rgb(61 47 69 / .35); transform: rotate(-4deg); }
.album-card .note { margin: 8px 2px 0; padding: 4px 7px; font-size: 12px; line-height: 1.4; background: #fff7b8; box-shadow: 0 0 0 2px var(--line); transform: rotate(-1deg); word-break: keep-all; }
.album-card .note b { font-weight: 400; color: #c2306d; }
.album-card .polaroid.big { width: 92%; margin: 14px auto 0; transform: rotate(-1deg); }
.album-card .said { margin: 16px 4px 0; display: grid; gap: 8px; }
.album-card .said p { margin: 0; padding: 6px 10px; font-size: 14px; line-height: 1.45; background: #fffdf8; box-shadow: 0 0 0 2px var(--line); word-break: keep-all; }
.album-card .said p b { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted, #7a6f7f); }
.album-card .said p.guest { background: #fff7b8; transform: rotate(-.6deg); }
.album-card .acts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 6px; }
/* A line typed in the sheet other than the talk's (the bedtime note, a name): the talk's own line and the care chips
   step aside while the keyboard is up */
.device-frame.sheet-ui.typing-other .chat-form, .device-frame.sheet-ui.typing-other .face-buttons, .device-frame.sheet-ui.typing-other .strip-needs { display: none; }
/* The status (목업 24): an icon and five hearts in the name plate, and the card it opens over the top of the talk */
/* 사이, the fourth gauge in the name plate (목업 24): a pink bar; pressed, the status card */
.plate .mini .bar.bond { --tone: #ff7eb3; }
.plate .mini .meter[data-gauge="사이"] { grid-column: 1 / -1; cursor: pointer; border-radius: 2px; padding: 1px 2px; gap: 6px; }
.plate .mini .meter[data-gauge="사이"] .name { flex: none; font-size: 12.5px; line-height: 1.2; white-space: nowrap; color: var(--ink); }
.plate .mini .meter[data-gauge="사이"] .more { flex: none; font-size: 11.5px; line-height: 1.2; white-space: nowrap; color: #c2306d; }
.plate .mini .meter[data-gauge="사이"] .bar { max-width: 120px; }
.plate .mini .meter[data-gauge="사이"].open { box-shadow: 0 0 0 2px var(--line); background: var(--tint-2); }
.plate .mini .meter[data-gauge="사이"].lit { animation: status-lit 0.6s steps(2) 3; }
.train-pop.bond .hearts img.off, .status-card .hearts img.off { filter: grayscale(1) opacity(.35); }
@keyframes status-lit { 50% { background: #ffd6e6; } }
.status { position: relative; height: 0; margin: 0 10px; z-index: 20; }
.status[hidden] { display: none; }
.status-card img, .chat-log li.changes img { width: 16px; height: 16px; image-rendering: pixelated; flex: none; }
.status-card { position: absolute; top: 0; left: 0; right: 0; padding: 8px 11px 10px; font-size: 13px; color: #3d2f45; max-height: 46vh; overflow-y: auto;
  filter: drop-shadow(0 4px 0 rgb(0 0 0 / .22));
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; }
.status-card[hidden] { display: none; }
.status-card { word-break: keep-all; text-align: left; }
.status-card .head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.status-card .head b { font-weight: 400; font-size: 14px; }
.status-card .close { width: 28px; height: 28px; padding: 0; font: inherit; font-size: 18px; line-height: 1; color: var(--ink); background: none; border: 2px solid var(--line); cursor: pointer; }
.status-card .bond-now { display: flex; align-items: center; justify-content: flex-start; gap: 8px; text-align: left; }
.status-card .bond-now .hearts { display: inline-flex; gap: 1px; flex: none; margin: 0; padding: 0; border: 0; background: none; }
.status-card .bond-now .hearts img { width: 16px; height: 16px; image-rendering: pixelated; }
.status-card .bond-now b { font-weight: 400; font-size: 16px; white-space: nowrap; }
.status-card .next { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 12.5px; }
.status-card .next .what { flex: none; white-space: nowrap; color: var(--muted, #7a6f7f); }
.status-card .next .bar { flex: 1; min-width: 40px; height: 8px; background: #efe4ea; box-shadow: 0 0 0 2px var(--line); position: relative; }
.status-card .next .bar b { position: absolute; inset: 0 auto 0 0; background: #ff5c9d; }
.status-card .how { margin: 2px 0 8px; font-size: 12px; color: var(--muted, #7a6f7f); }
.status-card .line { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px; white-space: nowrap; }
.status-card .k { font-size: 12px; color: var(--muted, #7a6f7f); }
.status-card .k.sub { margin: 4px 0 4px; }
.status-card .mind { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 3px 4px 3px 8px; font-size: 13.5px;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-fff1c9-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.status-card .mind span { flex: 1; min-width: 0; }
.status-card .mind button { flex: none; font: inherit; font-size: 12px; padding: 1px 7px; color: #fff; background: none; cursor: pointer; white-space: nowrap;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.status-card .learned { display: flex; flex-wrap: wrap; gap: 4px; }
.status-card .learned span { padding: 0 6px; font-size: 12px; line-height: 19px; color: #1b3b26;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
/* What a line of talk changed, under it; a new step, stamped */
.chat-log li.changes, .device-frame.sheet-ui .chat-log li.changes { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 6px 2px; padding: 0;
  border: none; border-image: none; background: none; box-shadow: none; max-width: 100%; justify-self: start; align-self: flex-start; }
.chat-log li.changes span { display: inline-flex; gap: 3px; align-items: center; padding: 0 6px; font-size: 11.5px; line-height: 18px; color: #3d2f45;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-fff1c9-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.chat-log li.changes span.pink { border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.chat-log li.changes span.green { border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; color: #1b3b26; }
.device-frame.sheet-ui .chat-log li.mark.bond { border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; padding: 4px 10px 4px 5px; }
.device-frame.sheet-ui .chat-log li.mark.bond b, .chat-log li.mark.bond b { border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; color: #fff; }
.train-pop.bond .hearts { display: flex; justify-content: center; gap: 2px; margin-bottom: 3px; }
.train-pop.bond .hearts img { width: 18px; height: 18px; image-rendering: pixelated; }
.train-pop.bond .hearts img.fill { animation: heart-pop 0.5s steps(3) 3; }
.train-pop.bond b { display: block; font-size: 14px; }
@keyframes heart-pop { 50% { transform: scale(1.35); } }
.device-frame.sheet-ui .sheet-fresh.taught-line b { border-image: var(--pxf-tag-9fe3b3-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; color: #1b3b26; }
/* what happened, and what to do about it */
.device-frame.sheet-ui .chat-log li.event-line, .device-frame.sheet-ui .chat-log li.mind-card, .device-frame.sheet-ui .chat-log li.night-line { justify-self: stretch; max-width: none; }
.device-frame.sheet-ui .chat-log li.event-line { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fff0bf-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 2px 6px 6px; gap: 4px; }
.device-frame.sheet-ui .chat-log li.event-line b { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-3d2f45-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px; color: #fff8ec; font-size: 12px; line-height: 17px; justify-self: start; }
.device-frame.sheet-ui .chat-log li.event-line b .from-night { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; margin-left: 6px; padding: 0 4px; color: #fff; font-style: normal; }
.device-frame.sheet-ui .chat-log li.event-line.pinned { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fffdf8-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 2px 6px 6px; }
.device-frame.sheet-ui .chat-log li.event-line.name-ask { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 2px 6px 6px; }
.device-frame.sheet-ui .chat-log li.event-line.name-ask b { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px; color: #fff; }
.device-frame.sheet-ui .chat-log li.night-line { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-f4efff-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 2px 6px 6px; }
.device-frame.sheet-ui .event-choices { gap: 6px; margin-top: 2px; }
.device-frame.sheet-ui .event-choices button, .device-frame.sheet-ui .chat-log .name-ask button { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 1px 10px 1px; font-size: 12.5px; line-height: 18px; color: #3d2f45; box-shadow: none; transition: transform 0.06s; }
.device-frame.sheet-ui .event-choices button:active, .device-frame.sheet-ui .chat-log .name-ask button:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); box-shadow: none; }
/* the 속마음 card */
.device-frame.sheet-ui .chat-log li.mind-card { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fffdf8-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 4px 8px 6px; background: none; box-shadow: none; animation: none; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-reads i { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-f1e8ee-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px 0 3px; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-reads i.hot { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px 0 3px; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-state { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-f1e8ee-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-state.done { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-d9f2df-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-state.no { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; color: #b0306a; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-way { border-style: solid; border-width: 2px; border-image: var(--pxf-tag-e7f6ea-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 5px 9px 6px; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-way.no { border-image: var(--pxf-tag-ffe4ec-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.device-frame.sheet-ui .chat-log li.mind-card .mind-hint button { border-radius: 0; }
.device-frame.sheet-ui .mind-chip { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-f1e8ee-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px; }

/* the morning's plan and the bedtime card */
.device-frame.sheet-ui .plan-card { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fff8e6-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 2px 6px 6px; margin: 2px 2px 8px; box-shadow: none; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.16)); animation: px-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.device-frame.sheet-ui .plan-head { margin: 2px 2px 6px; }
.device-frame.sheet-ui .plan-head b { font-size: 15px; }
.device-frame.sheet-ui .plan-option { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; box-shadow: none; transition: transform 0.06s; }
.device-frame.sheet-ui .plan-option:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); }
.device-frame.sheet-ui .night-card .tuck .plan-option.on { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ffd6e6-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); }
.device-frame.sheet-ui .night-plain { border: 0; background: none; color: #6d6376; text-decoration: underline dotted; text-underline-offset: 4px; }

/* what needs doing: a call to action, bobbing */
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs { gap: 8px; }
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-ff5c9d-3d2f45-c93c78) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; height: auto; padding: 1px 10px 1px 6px; color: #fff; font-size: 12.5px; box-shadow: none;
  animation: px-bob 1.6s ease-in-out infinite; }
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ff5c9d-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); animation: none; }
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag:disabled { opacity: 0.55; animation: none; }

/* the care buttons, the plus, the line to type in and the send key */
.device-frame.sheet-ui .pane[data-pane="care"] .face-buttons { gap: 8px; }
.device-frame.sheet-ui .pane[data-pane="care"] .face-cell { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 1px 4px 0; box-shadow: none !important; transition: transform 0.06s; }
.device-frame.sheet-ui .pane[data-pane="care"] .face-cell:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); }
.device-frame.sheet-ui .pane[data-pane="care"] .face-cell:has(.hw.want) { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-ffe27a-3d2f45-d9b13a) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; }
.device-frame.sheet-ui .chat-form { gap: 6px; align-items: stretch; }
.device-frame.sheet-ui #tray-toggle { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #fffdf8; background-clip: padding-box; background-position: center; background-repeat: no-repeat; background-size: 14px 14px; width: 40px; min-width: 40px; height: auto; padding: 0; color: #3d2f45; box-shadow: none; transition: transform 0.06s; }
.device-frame.sheet-ui #tray-toggle[aria-expanded="true"] { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-3d2f45-3d2f45) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #3d2f45; background-clip: padding-box; background-size: 12px 12px; }
.device-frame.sheet-ui #tray-toggle .dot { top: -6px; right: -6px; border-radius: 0; }
.device-frame.sheet-ui #tray-toggle:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #ffe1ec; background-clip: padding-box; transform: translateY(2px); }
.device-frame.sheet-ui #chat-input { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-field-fffdf8-3d2f45-efe4ea) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; min-height: 40px; padding: 2px 8px; outline: none; box-shadow: none; }
.device-frame.sheet-ui #chat-input:focus { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-field-fffdf8-ff5c9d-ffe1ec) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; }
/* (sulking, 목업 27: the pink of a focused line, blinking slowly, in the pixel look) */
.device-frame.sheet-ui .chat-form.soothe #chat-input { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-field-fffdf8-ff5c9d-ffe1ec) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none;  animation: soothe-blink 1.6s steps(2) infinite; }
@keyframes soothe-blink { 50% { filter: brightness(1.06) saturate(1.4); } }
@media (prefers-reduced-motion: reduce) { .device-frame.sheet-ui .chat-form.soothe #chat-input { animation: none; } }
.device-frame.sheet-ui #chat-send { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-ff5c9d-3d2f45-c93c78) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; padding: 0 14px; color: #fff; box-shadow: none; transition: transform 0.06s; }
.device-frame.sheet-ui #chat-send:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ff5c9d-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); }
.device-frame.sheet-ui #chat-send:disabled { opacity: 0.6; }

/* peek: the newest line, and the way up to the whole talk */
.device-frame.sheet-ui[data-sheet="peek"] .sheet-fresh { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-f6eff3-cdb9c4) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 3px 8px 4px; margin: 0 2px 8px; color: #3d2f45; font-size: 12.5px; }
.device-frame.sheet-ui[data-sheet="peek"] .sheet-fresh:not(.calm) { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fff0bf-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 3px 8px 4px; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.16)); }
.device-frame.sheet-ui .sheet-fresh b { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ff6b5b-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 4px; border-radius: 0; }
.device-frame.sheet-ui .sheet-fresh em { display: inline-flex; align-items: center; gap: 4px; color: #b0306a; font-size: 12px; }
.device-frame.sheet-ui .sheet-fresh em::after { content: ""; width: 10px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 4' width='5' height='4' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='1' height='1' fill='%23b0306a'/%3E%3Crect x='1' y='1' width='3' height='1' fill='%23b0306a'/%3E%3Crect x='0' y='2' width='2' height='1' fill='%23b0306a'/%3E%3Crect x='3' y='2' width='2' height='1' fill='%23b0306a'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23b0306a'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23b0306a'/%3E%3C/svg%3E") center / 10px 8px no-repeat; image-rendering: pixelated; }
.device-frame.sheet-ui .sheet-fresh:active { transform: translateY(1px); }

/* the frame: a slimmer strip on top with the time in it, the name and the gauges under the screen, stepped corners */
.device-frame.sheet-ui .face-panel > .face-bezel { border-radius: 0; box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px)); }
.device-frame.sheet-ui .face-bezel > .face-head { position: relative; height: 18px; margin: 1px 4px 1px; }
.device-frame.sheet-ui .face-bezel > .face-head h1 { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); font-size: 10px; letter-spacing: 4px; }
.device-frame.sheet-ui .face-bezel::before { left: 9px; top: 7px; }
.device-frame.sheet-ui:not([data-sheet="full"]) .game-clock { top: 2px !important; right: 8px !important; padding: 0 6px 0 3px; border-radius: 0; background: rgb(255 255 255 / 0.1); font-size: 10.5px; line-height: 15px; }
.device-frame.sheet-ui:not([data-sheet="full"]) .game-clock img { width: 11px; height: 11px; }
.device-frame.sheet-ui .face-bezel > .plate { padding: 6px 9px 4px; gap: 10px; }
.device-frame.sheet-ui .face-bezel > .plate .plate-who b { letter-spacing: 0.2px; }
.device-frame.sheet-ui .face-bezel > .plate .stage-badge { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 5px; color: #3d2f45; font-size: 11px; line-height: 15px; }
.device-frame.sheet-ui .face-bezel > .plate .mini .meter img { width: 14px; height: 14px; }
.device-frame.sheet-ui .face-bezel > .plate .mini .bar { height: 10px; padding: 2px; background: #1c1622; box-shadow: inset 0 0 0 2px #4b3f57; border-radius: 0; }
.device-frame.sheet-ui .face-bezel > .plate .mini .bar::after { background: linear-gradient(90deg, transparent 0 4px, rgb(0 0 0 / 0.16) 4px 6px) 0 0 / 6px 100% repeat-x, var(--tone);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35); }
/* the little window (typing, a panel open) */
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel { border-radius: 0; clip-path: none;
  animation: pip-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: 0 0; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > canvas {
  clip-path: polygon(0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px)); }
@keyframes pip-in { from { opacity: 0.4; transform: scale(1.12); } }

/* the windows over the page (the album, the settings, the shop...): the same frames */
body.sheet-ui dialog.letter, body.sheet-ui dialog.hatch, body.sheet-ui dialog.help { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fff8ec-3d2f45) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #fff8ec; background-clip: padding-box; box-shadow: none; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.16)); }
body.sheet-ui .dialog-x, body.sheet-ui .hatch .sheet-close, body.sheet-ui .panes > .pane.card .sheet-x { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #fffdf8; background-clip: padding-box; width: 34px; height: 36px; background-position: center; background-repeat: no-repeat; background-size: 12px 12px; box-shadow: none; }
body.sheet-ui .dialog-x:active, body.sheet-ui .hatch .sheet-close:active { transform: translateY(2px); }
body.sheet-ui dialog .primary, body.sheet-ui .letter-actions .primary { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btn-ff5c9d-3d2f45-c93c78) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; color: #fff; box-shadow: none; }
body.sheet-ui dialog .primary:active { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-btnp-ff5c9d-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0; background: none; transform: translateY(2px); }
body.sheet-ui #letter-dialog .epitaph { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-3d2f45-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 1px 10px; }
body.sheet-ui .album-no { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ff5c9d-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; width: 22px; height: 22px; box-shadow: none; }
body.sheet-ui .album-photo { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 / 4px 4px 4px 4px stretch; border-radius: 0; background-color: #fffdf8; background-clip: padding-box; padding: 3px 3px 13px; box-shadow: none; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.18)); }
body.sheet-ui .album-photo canvas { border-radius: 0; }
body.sheet-ui .album-marks i { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-fff1c9-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; }
body.sheet-ui .album-marks i.promise { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-ffe4ec-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; }
body.sheet-ui .album-marks i.trophy { border-style: solid; border-width: 2px 2px 2px 2px; border-image: var(--pxf-tag-e7f6ea-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; border-radius: 0; background: none; padding: 0 6px; }
body.sheet-ui .letter-paper { border-style: solid; border-width: 6px 6px 6px 6px; border-image: var(--pxf-card-fffdf7-3d2f45) 3 3 3 3 / 6px 6px 6px 6px stretch; border-radius: 0; background-color: #fffdf7; background-clip: padding-box; padding: 10px 12px 6px; background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--accent) 22%, transparent) 31px 32px); background-position: 0 36px; }
body.sheet-ui #letter-dialog .letter-life div { border-style: solid; border-width: 4px 4px 4px 4px; border-image: var(--pxf-chip-fffdf8-cdb9c4) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; background: none; padding: 3px 2px; }

/* motion: what comes into the talk slides up a little, a needed button bobs */
.device-frame.sheet-ui .chat-log li.fresh { animation: px-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes px-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .device-frame.sheet-ui .chat-log li.fresh, .device-frame.sheet-ui .plan-card, .device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel, .device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag { animation: none; }
}

/* ---------- 작은 게임기 (2026-10-08): the talk open all the way. The screen folds into a little handheld at the top left,
   with its own bezel (power light, the name on the lip, a big rounded corner at the bottom right like the handhelds of
   old), and its name and gauges on a pixel card beside it ---------- */
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel {
  left: 12px; top: 10px; padding: 7px 7px 17px; background: none; border: 0; border-radius: 0; box-shadow: none;
  clip-path: none; filter: none; overflow: visible; isolation: isolate; }
/* (its body is drawn behind it, so the stepped corners do not clip the card beside it) */
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: #3b3548; box-shadow: none; filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.3));
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 14px), calc(100% - 2px) calc(100% - 14px), calc(100% - 2px) calc(100% - 10px), calc(100% - 4px) calc(100% - 10px), calc(100% - 4px) calc(100% - 7px),
    calc(100% - 7px) calc(100% - 7px), calc(100% - 7px) calc(100% - 4px), calc(100% - 10px) calc(100% - 4px), calc(100% - 10px) calc(100% - 2px), calc(100% - 14px) calc(100% - 2px), calc(100% - 14px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)); }
/* the screen sits in a darker lip, square and crisp */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > canvas { clip-path: none; outline: 2px solid #231b29; outline-offset: 0; border-radius: 0; }
/* the lip under the screen: the power light and the toy's name */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel::after { content: "DOVI"; display: block; position: absolute; left: 9px; bottom: 3px; padding-left: 10px;
  font-size: 8px; line-height: 11px; letter-spacing: 2px; color: #a99db3;
  background: radial-gradient(circle at 3px 50%, #ff4d4d 0 2.5px, transparent 3px) no-repeat; }
/* beside it: the name, its age and the three gauges on a cream pixel card */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate {
  position: absolute; left: calc(100% + 10px); top: 0; bottom: 0; width: auto; right: auto; min-width: 0;
  max-width: calc(100vw - 100% - 46px); display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 7px 10px; color: #3d2f45; background: none;
  border-style: solid; border-width: 6px; border-image: var(--pxf-card-fff8ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; border-radius: 0;
  box-sizing: border-box; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-who { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; min-width: 0; color: #3d2f45; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #3d2f45; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-who .lamp,
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .flags { display: none !important; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .stage-badge { flex: none; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-row { width: 100%; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini { display: grid; grid-template-columns: 1fr; gap: 4px; max-width: none; width: 100%; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini .meter { display: flex; align-items: center; gap: 5px; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini .meter img { width: 13px; height: 13px; flex: none; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini .bar { flex: 1 1 auto; height: 9px; }

/* ---- one thing at a time (2026-10-08): while something waits for an answer, only its choices ---- */
.device-frame.answer-focus .pane[data-pane="care"] .face-buttons,
.device-frame.answer-focus .pane[data-pane="care"] .strip-needs { display: none !important; }
/* the one line at peek lights up when something new comes in (a press made with the sheet down is not missed) */
.device-frame.sheet-ui .sheet-fresh.lit { animation: fresh-lit 1.1s steps(6) both; }
@keyframes fresh-lit { 0% { background-color: #ffe27a; transform: translateY(-2px); } 40% { background-color: #ffe27a; transform: none; } 100% { } }
@media (prefers-reduced-motion: reduce) { .device-frame.sheet-ui .sheet-fresh.lit { animation: none; } }

/* ---- the 더하기 tray and the panels opened in the sheet, in the same pixel frames (2026-10-08) ---- */
/* the tray: a whole card under the line to type (its top edge used to slip under the line and look cut) */
.device-frame.sheet-ui .tray { margin: 6px 0 2px; padding: 8px 6px 9px; border-style: solid; border-width: 6px; border-radius: 0; box-shadow: none; background: none;
  border-image: var(--pxf-card-fff8ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .tray .ic { width: 46px; height: 46px; border-radius: 0; background: none; border-style: solid; border-width: 6px;
  border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .tray button:active .ic { transform: translateY(2px); border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .tray .ic img { width: 22px; height: 22px; image-rendering: pixelated; }
.device-frame.sheet-ui .tray-toggle[aria-expanded="true"] { border-image: var(--pxf-btnp-3d2f45-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; color: #fff; }
/* a panel opened in the sheet (이야기, 디자이너, 앨범): the sheet itself is its frame, no second border inside it */
.device-frame.sheet-ui .panes > .pane.card.open { top: 0; bottom: 0; max-height: none; border: 0; border-radius: 0; box-shadow: none; outline: 0;
  background: var(--paper); padding: 16px 14px 14px; clip-path: none; animation: none; }
.device-frame.sheet-ui .panes > .pane.card .sheet-x { top: 10px; right: 10px; }
/* inside the 이야기: the words in a pixel bubble, the two buttons and the leanings in the same frames */
.device-frame.sheet-ui .pet-card .pet-intro { border-style: solid; border-width: 6px; border-radius: 0; background: none; padding: 3px 7px 4px;
  border-image: var(--pxf-card-fffdf8-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .pet-card .pet-intro::before { left: 16px; top: -10px; width: 8px; height: 6px; border: 0; transform: none; background: #3d2f45;
  clip-path: polygon(2px 0, 6px 0, 6px 2px, 8px 2px, 8px 6px, 0 6px, 0 2px, 2px 2px); }
.device-frame.sheet-ui .story-btn { border-style: solid; border-width: 6px; border-radius: 0; box-shadow: none; background: none; min-height: 40px; padding: 2px 6px;
  border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .story-btn:active { transform: translateY(2px); box-shadow: none; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui .bent i { height: 10px; padding: 0; border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px #3d2f45;
  background: linear-gradient(90deg, #ff5c9d var(--v), #f3e7ec var(--v)) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat, #f3e7ec; }
/* the age tags everywhere in the sheet and the little handheld's card: a pixel tag, like the others */
.device-frame.sheet-ui .stage-badge { border-style: solid; border-width: 2px; border-radius: 0; background: none; padding: 0 5px; color: #3d2f45; font-size: 11px; line-height: 15px;
  border-image: var(--pxf-tag-ffd6e6-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; }
.device-frame.sheet-ui .panes > .pane.card.open { padding-right: 14px; }
.device-frame.sheet-ui .panes > .pane.card.open > *, .device-frame.sheet-ui .panes > .pane.card.open #pet-info > * { margin-right: 0; max-width: 100%; }
.device-frame.sheet-ui .panes > .pane.card.open :is(h2, .pet-name) { padding-right: 46px; }

/* ---------- 베젤 통일 (2026-10-09): one thin pixel bezel of the same width on every side, no strip on top and no thick bar
   under it (창석 님: it looked like a TV). The clock floats in the screen's corner; the name, what it needs now and the
   gauges are a cream status card of their own under the screen. ---------- */
.device-frame.sheet-ui:not([data-sheet="full"]) .face-panel > .face-bezel { background: none; clip-path: none; box-shadow: none; padding: 4px 3px 0; }
.device-frame.sheet-ui .face-bezel > .face-head, .device-frame.sheet-ui .face-bezel::before { display: none !important; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > canvas { box-shadow: 0 0 0 1px #231b29, 0 0 0 3px #3b3548; }
.device-frame.sheet-ui:not([data-sheet="full"]) .game-clock { top: 10px !important; right: 10px !important; padding: 1px 7px 1px 4px; border-radius: 0; background: rgb(35 27 41 / 0.62);
  color: #fff8ee; font-size: 11px; line-height: 15px; box-shadow: 0 0 0 1px rgb(35 27 41 / 0.35); }
/* the status card under the screen */
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate { order: 2; align-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 8px; row-gap: 3px; margin: 8px 6px 0; padding: 4px 6px 5px; color: #3d2f45; background: none;
  border-style: solid; border-width: 6px; border-radius: 0; border-image: var(--pxf-card-fff8ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate .plate-who { display: flex; align-items: center; gap: 5px; min-width: 0; color: #3d2f45; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate .plate-who b { color: #3d2f45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* what it needs right now (or how long until it grows), on the right of its name */
.device-frame.sheet-ui .face-bezel > .plate .plate-when { display: inline-block !important; flex: none; margin-left: auto; padding: 0 6px; font-size: 11px; line-height: 16px;
  color: #6d6376; background: #f3e7ec; white-space: nowrap; }
.device-frame.sheet-ui .face-bezel > .plate .plate-when.alert { color: #fff; background: #ff5c9d; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate .plate-row { grid-column: 1 / -1; display: flex; justify-content: stretch; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate .mini { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: none; }
.device-frame.sheet-ui:not([data-sheet="full"]) .face-bezel > .plate .mini .bar { background: #efe4ea; box-shadow: inset 0 0 0 2px #3d2f45; }

/* ---- the little handheld: the same bezel on every side (no lip under it), the power light a dot in its corner ---- */
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel { padding: 6px; }
.device-frame.sheet-ui[data-sheet="full"] .face-panel > .face-bezel::before {
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)) !important; }
/* (no power light in the corner: it sat in the top left step alone, and that one corner looked unlike the other three, 10-10) */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel::after { display: none; }
/* beside it: its name and age, what it needs now, how far it has grown, and the gauges small in one row */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate { gap: 4px; padding: 4px 8px; justify-content: center; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-who { flex-wrap: wrap; row-gap: 3px; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-when { margin-left: 0; order: 9; flex-basis: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-grow { display: flex !important; margin: 0; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-grow .grow-bar { height: 6px; border: 0; margin: 0; background: #efe4ea; box-shadow: inset 0 0 0 1px #3d2f45; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .plate-grow .grow-bar b { background: #ffb8cf; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini .meter img { width: 12px; height: 12px; }
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate .mini .bar { height: 8px; padding: 1px; background: #efe4ea; box-shadow: inset 0 0 0 1px #3d2f45; }
.device-frame.ended .pane[data-pane="care"] .face-buttons,
.device-frame.ended .pane[data-pane="care"] .strip-needs { display: none !important; }
/* the little handheld's card reaches to the right edge, so its gauges have room */
.device-frame.sheet-ui[data-sheet="full"] .face-bezel > .plate { right: auto; width: calc(100vw - 100% - 36px); max-width: none; }

/* ---- the egg window in the same pixel frames (2026-10-09) ---- */
body.sheet-ui .photo-sample { border-style: solid; border-width: 6px; border-radius: 0; box-shadow: none; background: none; padding: 2px 2px 3px;
  border-image: var(--pxf-btn-fffdf8-3d2f45-e6d6c8) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
body.sheet-ui .photo-sample:active { transform: translateY(2px); box-shadow: none; }
body.sheet-ui .photo-sample .art { border-radius: 0; }
body.sheet-ui .photo-sample[aria-pressed="true"] { box-shadow: none; border-image: var(--pxf-btnp-ffe1ec-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
body.sheet-ui .photo-sample .from { border-radius: 0; border-width: 2px; box-shadow: 0 0 0 2px #3d2f45; }
body.sheet-ui .hatch .drop, body.sheet-ui .hatch .dropzone { border-radius: 0; }
.device-frame.sheet-ui .face-bezel > .plate .plate-when:empty { display: none !important; }
/* (this morning's plans being thought of: the line takes the card's whole width, not one cell of the four) */
.plan-options .night-writing { grid-column: 1 / -1; padding: 10px 0; }
/* the day's event or the evening's question on its way: a quiet line in the middle of the talk, its dots coming one by one */
.chat-log li.typing.day-wait { align-self: center; max-width: none; background: none; border: 0; text-align: center; letter-spacing: 0; font-size: 12.5px; color: #6d6376; }
.chat-log li.typing.day-wait i { letter-spacing: 1px; }
.chat-log li.typing.day-wait i:nth-of-type(1) { animation-name: typing-dot; }
.chat-log li.typing.day-wait i:nth-of-type(2) { animation-name: typing-dot-2; }
.chat-log li.typing.day-wait i:nth-of-type(3) { animation-name: typing-dot-3; }
/* the plan it wants most today (wishedPlan): a small tag on its corner */
.plan-option.wish { position: relative; }
.plan-option .plan-wish { position: absolute; top: -12px; right: 6px; padding: 0 4px; font-style: normal; font-size: 9.5px; line-height: 13px; color: #fff; z-index: 1;
  border-style: solid; border-width: 2px; border-image: var(--pxf-tag-ff6b5b-3d2f45) 1 1 1 1 fill / 2px 2px 2px 2px stretch; background: none; pointer-events: none; }
/* its name, given as it hatches (#name-card): one field and its button on a line, the way out under it */
.name-card .name-form { display: flex; gap: 8px; margin: 8px 2px 4px; }
.name-card .name-form input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 6px 10px; color: #3d2f45; background: #fffdf8;
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch; border-radius: 0; outline: none; }
.name-card .name-ok { flex: none; font: inherit; font-size: 14px; padding: 0 12px; color: #fff; background: none; border-radius: 0; box-shadow: none;
  border-style: solid; border-width: 6px; border-image: var(--pxf-btn-ff5c9d-3d2f45-c93c78) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }
.name-card .name-ok:active { border-image: var(--pxf-btnp-ff5c9d-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; transform: translateY(2px); }
.name-card .name-help { margin: 2px 4px; font-size: 12px; color: #b0306a; }
.name-card .name-later { display: block; margin: 2px auto 0; padding: 4px 8px; font: inherit; font-size: 12.5px; color: #6d6376; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
/* bedtime, opened of itself: under it, the way to see to it first (with what it still needs, when it needs something) */
.night-card .night-later { display: block; margin: 8px auto 2px; padding: 4px 8px; font: inherit; font-size: 12.5px; color: #6d6376; background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; }
.night-card .night-later.needy { color: #b0306a; }
/* under the four plans, the two that ask nothing: left to it, or a day of rest */
.plan-card .plan-free { display: flex; justify-content: center; gap: 18px; margin: 8px 0 2px; }
.plan-card .plan-free button { padding: 4px 6px; font: inherit; font-size: 12.5px; color: #6d6376; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
/* two pixel tag colors (the talk's change tags use them; the mind wheel that first had them went on 10-15) */
:root { --pxf-tag-9fe3b3-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%239fe3b3'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%239fe3b3'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%239fe3b3'/%3E%3C/svg%3E"); --pxf-tag-ffc2d1-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' width='3' height='3' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='1' height='1' fill='%23ffc2d1'/%3E%3Crect x='0' y='1' width='3' height='1' fill='%23ffc2d1'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23ffc2d1'/%3E%3C/svg%3E"); }
/* 목업 19: the clock calling the night */
.game-clock.bed { cursor: pointer; pointer-events: auto; background: #5a3f8f; color: #fff; animation: clock-bed 1.4s steps(2) infinite; }
@keyframes clock-bed { 50% { background: #7b5cc0; } }
/* (잘 시간 stays where it can be pressed with the talk open all the way: over the little window's foot) */
.device-frame.sheet-ui[data-sheet="full"] .game-clock.bed { top: auto !important; bottom: 6px; right: auto !important; left: 50%; transform: translateX(-50%);
  font-size: 11px; line-height: 16px; padding: 1px 7px 1px 4px; border-radius: 0; white-space: nowrap; }
/* The pet's bubble on the screen, in the talk's own pixel frame (10-10: a round web bubble over the pixel screen read
   as from another game), with a stepped tail; smaller, so a long line does not cover the scene */
:root { --px-tail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4' width='7' height='4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='2' y='0' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='0' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='6' y='0' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='3' y='1' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='1' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='3' y='2' width='1' height='1' fill='%23fffdf8'/%3E%3Crect x='4' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); }
.device-frame.sheet-ui #speech { max-width: 210px; padding: 2px 8px 3px; font-size: 14px; line-height: 1.4; background: none; border-radius: 0;
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch;
  filter: drop-shadow(0 2px 0 rgb(61 47 69 / 0.28)); animation: speech-px 200ms steps(3); }
.device-frame.sheet-ui #speech::after { left: var(--tail, 50%); bottom: -10px; width: 14px; height: 8px; border: 0; background: var(--px-tail) 0 0 / 14px 8px no-repeat;
  transform: translateX(-50%); }
.device-frame.sheet-ui #speech .mind { margin-top: 0; font-size: 12px; }
@keyframes speech-px { from { transform: translate(-50%, calc(-100% - 6px)); opacity: 0; } }
/* 처음 하루 안내 (목업 21, web/js/tour.js): the screen dimmed but for one part, and a pixel card that points at it.
   The dim does not catch the finger: the part can be pressed at once */
.coach-spot { position: fixed; z-index: 9998; pointer-events: none; box-shadow: 0 0 0 9999px rgb(35 27 41 / 0.62);
  outline: 3px solid #fff0bf; animation: coach-dim 220ms ease-out, coach-pulse 1.2s steps(2) 220ms infinite; }
@keyframes coach-dim { from { box-shadow: 0 0 0 9999px rgb(35 27 41 / 0); outline-color: transparent; } }
@keyframes coach-pulse { 50% { outline-color: #ff5c9d; } }
.coach-tip { position: fixed; z-index: 9999; box-sizing: border-box; padding: 8px 12px 10px; color: #3d2f45; font-size: 14px; line-height: 1.5;
  border-style: solid; border-width: 4px; border-image: var(--pxf-chip-fffdf8-3d2f45) 2 2 2 2 fill / 4px 4px 4px 4px stretch;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / 0.25)); animation: coach-in 220ms ease-out; }
/* (its own coming in, a little rise and a fade: it once borrowed the speech bubble's, made for another place, and came
   in from half its width aside in three jerks, 10-10) */
@keyframes coach-in { from { opacity: 0; transform: translateY(6px); } }
.coach-tip.below { animation-name: coach-in-below; }
@keyframes coach-in-below { from { opacity: 0; transform: translateY(-6px); } }
.coach-tip b { display: block; font-size: 16px; font-weight: 400; margin: 0 0 2px; }
.coach-tip p { margin: 0; }
.coach-tip .coach-step { font-size: 11px; color: #ff5c9d; margin-bottom: 2px; }
.coach-tip::after { content: ""; position: absolute; left: var(--tail); bottom: -10px; width: 14px; height: 8px; transform: translateX(-50%);
  background: var(--px-tail) 0 0 / 14px 8px no-repeat; }
.coach-tip.below::after { bottom: auto; top: -10px; transform: translateX(-50%) scaleY(-1); }
.coach-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.coach-skip { font: inherit; font-size: 12px; color: #7a6f7f; background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.coach-next { font: inherit; font-size: 14px; color: #fff; padding: 0 14px; min-height: 34px; background: none; border-radius: 0;
  border-style: solid; border-width: 5px; border-image: var(--pxf-btn-ff5c9d-3d2f45-c93c78) 3 3 3 3 fill / 5px 5px 5px 5px stretch; }
@media (prefers-reduced-motion: reduce) { .coach-spot, .coach-tip { animation: none; } }
/* A pet still without a name: its plate is where the name is given (2026-10-21) */
#plate-name.naming { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* 하루 마치기 over the care chips: the night's purple (the clock's 잘 시간), not a need's red */
.need-tag[data-need="night"] { background: #5a3f8f; animation: none; }
.pane[data-pane="care"] > .strip-needs .need-tag[data-need="night"] { border-color: #5a3f8f; }
:root { --pxf-btn-7b5cc0-3d2f45-5a3f8f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%237b5cc0'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%235a3f8f'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%235a3f8f'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); --pxf-btnp-7b5cc0-3d2f45: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 8' width='7' height='8' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='3' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='1' width='3' height='1' fill='%237b5cc0'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='2' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='3' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='3' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='4' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='4' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='5' width='5' height='1' fill='%237b5cc0'/%3E%3Crect x='6' y='5' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='1' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='6' width='3' height='1' fill='%237b5cc0'/%3E%3Crect x='5' y='6' width='1' height='1' fill='%233d2f45'/%3E%3Crect x='2' y='7' width='3' height='1' fill='%233d2f45'/%3E%3C/svg%3E"); }
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag[data-need="night"] { border-image: var(--pxf-btn-7b5cc0-3d2f45-5a3f8f) 3 3 3 3 fill / 6px 6px 6px 6px stretch; background: none; animation: none; }
.device-frame.sheet-ui .pane[data-pane="care"] > .strip-needs .need-tag[data-need="night"]:active { border-image: var(--pxf-btnp-7b5cc0-3d2f45) 3 3 3 3 fill / 6px 6px 6px 6px stretch; }

/* ---------- 마당 (목업 28, 2026-10-21): the owners' board, a window as tall as the sheet ---------- */
.board-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.board-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 2px solid var(--line); background: #fffaf0; }
.board-head .letter-title { flex: 1; margin: 0; font-size: 17px; }
.board-back, .board-close { flex: none; width: 32px; height: 32px; padding: 0; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.board-back[hidden], .board-write[hidden] { display: none; }
.board-write { flex: none; padding: 4px 12px; font-size: 13px; }
.board-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 14px; }
.board-toast { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 10px; background: var(--ink); color: #fff; font-size: 13px; text-align: center; }
.board-toast[hidden] { display: none; }
.board-tabs { position: sticky; top: 0; z-index: 2; display: flex; background: #fffaf0; border-bottom: 2px solid var(--line); }
.board-tabs button { flex: 1; padding: 8px 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.board-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--tint); }
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 2px; }
.board-chip { padding: 2px 10px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.board-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.board-empty { margin: 18px 14px; color: var(--muted); font-size: 13.5px; }
.board-empty.small { margin: 10px 14px; font-size: 12.5px; }
.board-post { margin: 10px 12px; border: 2px solid var(--line); background: #fff; box-shadow: 0 3px 0 var(--edge); cursor: pointer; }
.board-post:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.board-post.is-hidden { opacity: 0.6; }
.board-who { display: flex; align-items: center; gap: 8px; padding: 9px 10px 4px; }
.board-face { flex: none; width: 36px; height: 36px; border: 2px solid var(--line); background: var(--tint); image-rendering: pixelated; object-fit: contain; }
.board-face.small { width: 28px; height: 28px; }
.board-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.board-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-name small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-topic { flex: none; padding: 0 7px; border: 2px solid var(--line); font-size: 11.5px; background: var(--tint); }
.board-topic.t-1 { background: #fff2c4; } .board-topic.t-2 { background: #d9f1ff; } .board-topic.t-3 { background: #e7f6dd; }
.board-text { margin: 2px 10px 6px; font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.board-text.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.board-note { margin: 6px 12px; padding: 7px 9px; background: #f3e9ee; color: var(--muted); font-size: 12.5px; }
.board-shot { display: block; width: calc(100% - 20px); margin: 2px 10px 6px; border: 2px solid var(--ink); image-rendering: pixelated; aspect-ratio: 192 / 112; background: #cde; }
.board-card { display: grid; gap: 3px; margin: 2px 10px 8px; padding: 8px 10px; border: 2px dashed var(--line); background: #fffaf0; font-size: 13px; line-height: 1.55; white-space: pre-line; }
.board-card b { font-size: 12px; color: #5a3f8f; font-weight: 400; }
.board-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.board-picks i { font-style: normal; font-size: 12px; padding: 0 7px; border: 2px solid var(--line); background: #fff; }
.board-picks i.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.board-acts { display: flex; align-items: center; gap: 12px; padding: 6px 10px 8px; border-top: 2px solid #f3e9ee; font-size: 13px; color: var(--muted); }
.board-acts .sp { flex: 1; }
.board-heart { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.board-heart.on { color: var(--accent); }
.board-menu { position: relative; flex: none; }
.board-dots { padding: 0 6px; border: 0; background: none; font: inherit; font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer; }
.board-pop { position: absolute; right: 0; top: 24px; z-index: 3; min-width: 150px; display: grid; background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--edge); }
.board-pop[hidden] { display: none; }
.board-pop button { padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 13px; text-align: left; color: var(--ink); cursor: pointer; }
.board-pop button + button { border-top: 2px solid #f3e9ee; }
.board-visit { display: block; margin: 0 12px 8px; padding: 7px; border: 2px solid var(--line); background: var(--tint); color: var(--ink); text-align: center; font-size: 13px; text-decoration: none; }
.board-comments { border-top: 2px solid var(--line); margin-top: 4px; padding: 4px 0; }
.board-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; }
.board-comment > div { flex: 1; min-width: 0; }
.board-comment.is-hidden p { color: var(--muted); }
.board-comment p { margin: 1px 0 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.board-cname { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.board-cname em { font-style: normal; font-size: 10.5px; padding: 0 5px; background: var(--accent); color: #fff; }
.board-cname small { color: var(--muted); font-size: 11px; }
.board-small { flex: none; padding: 1px 7px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.board-cform { position: sticky; bottom: -14px; display: flex; gap: 6px; padding: 10px 12px; background: #fffaf0; border-top: 2px solid var(--line); }
.board-cform input { flex: 1; min-width: 0; padding: 6px 8px; border: 2px solid var(--line); font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.board-cform .primary { padding: 4px 12px; font-size: 13px; }
.board-label { margin: 12px 12px 4px; font-size: 12.5px; color: var(--muted); }
.board-attach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 12px; }
.board-attach button { padding: 7px 2px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.board-attach button[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); }
.board-attach button:disabled { opacity: 0.4; cursor: default; }
.board-preview { display: grid; gap: 6px; justify-items: end; padding: 8px 0 0; }
.board-preview .board-shot, .board-preview .board-card { justify-self: stretch; margin: 0 12px; width: auto; }
.board-preview .board-small { margin-right: 12px; }
.board-wrap textarea { display: block; width: calc(100% - 24px); margin: 0 12px; min-height: 110px; padding: 8px; border: 2px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; }
.board-countdown { display: block; margin: 3px 12px 0; text-align: right; font-size: 11.5px; color: var(--muted); }
.board-go { display: block; width: calc(100% - 24px); margin: 10px 12px 0; padding: 9px; font-size: 15px; }
.board-more { display: block; margin: 6px auto 14px; padding: 6px 18px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }