/* The Pocket Study desktop: one full-bleed room, one window stack, one dock.
   Every colour, font, space, and shadow comes from tokens.css. */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; }

button,
input { font: inherit; }

img { image-rendering: pixelated; }

:root {
  --ui-dock-width: 58px;
  --ui-dock-height: 56px;
  --ui-dock-icon: 27px;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--ss-color-ink);
  background: var(--ss-color-stage);
  font-family: var(--ss-font-ui);
  overscroll-behavior: none;
}

.ui-desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.ui-scene-surface {
  background-color: var(--ss-color-stage);
}

/* The room is the whole screen: no header, no letterbox, no second layer. */
.ui-desktop-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  background: none;
}

.ui-desktop-stage > * {
  pointer-events: auto;
}

/* ---- the dock ---------------------------------------------------------- */

.ui-pouch-trigger {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ui-pouch {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 2px;
  border: var(--ss-border-light);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-shadow-soft);
  font-size: var(--ss-text-dock);
  line-height: 1.2;
  text-align: center;
}

.ui-pouch-trigger:focus-visible { outline: 3px solid var(--ss-color-pink-strong); outline-offset: 2px; }

.ui-pouch [data-pouch-balance] {
  overflow-wrap: anywhere;
}

.ui-pouch-balance__amount,
.ui-pouch-balance__coin { display: none; }

.ui-pouch-balance__room-label { white-space: normal; }

.ui-pouch-balance__unit {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-dock {
  position: fixed;
  /* Above every window in the stack, whatever its z-order. */
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ui-dock-width);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--ss-space-2) 6px;
  padding-left: calc(6px + env(safe-area-inset-left));
  background: transparent;
}

[data-skin="keepsake"] .ui-dock,
[data-skin="keepsake"] .ui-dock :is(.ui-profile-badge, .ui-pouch, .ui-dock-app span, .ui-dock-system span, .ui-settings-trigger span) {
  font-family: var(--ss-font-window-title);
}

[data-skin="keepsake"] .ui-pouch [data-pouch-balance],
[data-skin="clean"] .ui-pouch [data-pouch-balance] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .2em;
  overflow-wrap: normal;
  white-space: nowrap;
}

[data-skin="keepsake"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__room-label,
[data-skin="clean"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__room-label { display: none; }

[data-skin="keepsake"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__amount,
[data-skin="keepsake"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__coin,
[data-skin="clean"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__amount,
[data-skin="clean"] .ui-pouch-balance[data-balance-state="ready"] .ui-pouch-balance__coin { display: inline-block; }

[data-skin="keepsake"] .ui-pouch-balance__coin,
[data-skin="clean"] .ui-pouch-balance__coin { width: 1em; height: 1em; }

/* Coins that could not load keep the chip's size and look: the coin and a muted dash stand in for the number. */
[data-skin="keepsake"] .ui-pouch-balance[data-balance-state="unavailable"] .ui-pouch-balance__room-label,
[data-skin="clean"] .ui-pouch-balance[data-balance-state="unavailable"] .ui-pouch-balance__room-label { display: none; }
[data-skin="keepsake"] .ui-pouch-balance[data-balance-state="unavailable"] :is(.ui-pouch-balance__amount, .ui-pouch-balance__coin),
[data-skin="clean"] .ui-pouch-balance[data-balance-state="unavailable"] :is(.ui-pouch-balance__amount, .ui-pouch-balance__coin) { display: inline-block; }
.ui-pouch-balance[data-balance-state="unavailable"] :is(.ui-pouch-balance__amount, .ui-pouch-balance__room-label),
.ui-shop [data-shop-balance][data-balance-state="unavailable"] { color: var(--ss-color-muted, #856e70); }

.ui-dock-app,
.ui-dock-system,
.ui-dock > .ui-settings-trigger {
  position: relative;
  display: grid;
  width: 44px;
  min-height: 44px;
  justify-items: center;
  align-content: center;
  padding: 6px;
  border: var(--ss-border-light);
  border-color: var(--ss-color-purple-dark);
  border-radius: var(--ss-radius-button);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-shadow-soft);
  cursor: pointer;
}

.ui-dock-apps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.ui-dock-app span,
.ui-dock-system span,
.ui-dock > .ui-settings-trigger span {
  position: absolute;
  top: 50%;
  left: calc(100% + 9px);
  z-index: 2;
  padding: 5px 7px;
  border: var(--ss-border-light);
  border-radius: var(--ss-radius-sm);
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
  box-shadow: var(--ss-shadow-soft);
  font: 700 var(--ss-text-dock)/1 var(--ss-font-pixel);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity 100ms linear, transform 100ms linear;
}

.ui-dock-app:hover span,
.ui-dock-app:focus-visible span,
.ui-dock-system:hover span,
.ui-dock-system:focus-visible span,
.ui-dock > .ui-settings-trigger:hover span,
.ui-dock > .ui-settings-trigger:focus-visible span {
  opacity: 1;
  transform: translate(0, -50%);
}

.ui-dock-system,
.ui-dock > .ui-settings-trigger {
  min-height: 36px;
  height: 36px;
  color: var(--ss-color-ink);
  background: var(--ss-color-paper);
}

.ui-dock-system .ui-icon,
.ui-dock > .ui-settings-trigger .ui-icon { --ui-icon-size: 20px; }

.ui-dock-system > .ui-dock-home-room-icon { display: none; }

.ui-dock-system:hover,
.ui-dock-system:focus-visible,
.ui-dock > .ui-settings-trigger:hover,
.ui-dock > .ui-settings-trigger:focus-visible { background: var(--ss-color-pink-soft); }

.ui-dock-system[aria-current="true"] {
  border-color: var(--ss-color-pink-strong);
  background: var(--ss-color-dock-selected);
}

.ui-dock-app > .ui-icon {
  width: var(--ui-dock-icon);
  height: var(--ui-dock-icon);
}

.ui-dock-app__room-icon {
  display: none;
  width: var(--ui-dock-icon);
  height: var(--ui-dock-icon);
  image-rendering: pixelated;
}

.ui-dock-app:hover {
  filter: brightness(1.06);
}

.ui-dock-app[aria-current="true"] {
  border-color: var(--ss-color-pink-strong);
  color: var(--ss-color-ink);
  background: var(--ss-color-dock-selected);
}

/* Open, and minimized to the dock: the lamp says which. */
.ui-dock-app::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: var(--ss-radius-xs);
  background: transparent;
}

.ui-dock-app[data-state="open"]::after,
.ui-dock-app[data-state="minimized"]::after {
  background: var(--ss-color-ink);
}

.ui-dock-app[aria-current="true"]::after {
  background: var(--ss-color-pink-strong);
}

.ui-dock-app[data-state="minimized"]::after {
  width: 4px;
  opacity: .55;
}


/* ---- system dialogs --------------------------------------------------- */

.ui-workspace-migration {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(49, 35, 43, .62);
}

.ui-workspace-migration__surface {
  width: min(560px, calc(100vw - 36px));
  padding: 24px;
  text-align: center;
}

.ui-workspace-migration__surface > small,
.ui-os-settings-surface .ui-settings-header small { color: var(--ss-color-pink-strong); font: 700 var(--ss-text-xs)/1 var(--ss-font-pixel); }
.ui-workspace-migration__surface h2,
.ui-os-settings-surface h2 { margin: 8px 0; font: 700 var(--ss-text-xl)/1.2 var(--ss-font-pixel); }
.ui-workspace-migration__surface p { line-height: 1.55; }
.ui-workspace-migration__note { color: var(--ss-color-muted); font-family: var(--ss-font-reading); }
.ui-workspace-migration__surface:focus { outline: none; }
.ui-workspace-migration__actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

.ui-os-settings-backdrop { position: fixed; }
.ui-os-settings-surface .ui-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ss-color-border-soft);
  background: var(--ss-color-purple-soft);
}
.ui-os-settings-surface .ui-settings-header h2 { margin-bottom: 0; }
.ui-os-settings-surface .ui-settings-header button { width: 38px; min-height: 38px; }
.ui-os-settings-surface .ui-settings-scroll { padding: 12px 18px 18px; }
.ui-os-settings-surface .ui-settings-section__heading { margin: 10px 0 4px; font: 700 var(--ss-text-lg)/1.2 var(--ss-font-pixel); }

/* ---- what an app gets inside its panel --------------------------------- */

.workspace-module {
  display: flex;
  flex-direction: column;
  height: 100%;
  container-type: inline-size;
}

.workspace-module iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  border: 0;
  background: transparent !important;
}

.ui-workspace-window.is-space .workspace-module {
  background: transparent;
}

/* Music scrolls inside its own window, never the desktop. */
.workspace-module-music {
  overflow: auto;
  padding: var(--ss-space-3);
  background: var(--ss-color-surface);
  container-name: music;
  container-type: inline-size;
  /* its scrollbar is the shared slim pixel one (primitives.css) */
}

@media (max-width: 720px), (orientation: portrait) {
  :root {
    --ui-dock-height: 56px;
    --ui-dock-icon: 26px;
  }

  .ui-dock {
    top: auto;
    right: 0;
    width: auto;
    min-height: var(--ui-dock-height);
    flex-direction: row;
    gap: 4px;
    justify-content: space-around;
    padding: 5px max(5px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(5px, env(safe-area-inset-left));
    border-right: 0;
    border-top: var(--ss-border);
    border-color: var(--ss-color-purple-dark);
    background: linear-gradient(var(--ss-color-purple-soft), var(--ss-color-shell));
    box-shadow: 0 -2px 0 rgba(73, 51, 48, 0.18);
  }

  .ui-pouch-trigger { flex: 0 0 44px; width: 44px; }
  .ui-pouch { width: 44px; padding: 4px 1px; }

  .ui-dock-app {
    width: 44px;
    min-height: 42px;
    flex: 0 1 52px;
    padding: 5px;
  }

  .ui-dock-apps {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .ui-dock-app { flex: 0 0 44px; }
  .ui-dock-app span,
  .ui-dock-system span,
  .ui-dock > .ui-settings-trigger span { display: none; }
  .ui-dock-system,
  .ui-dock > .ui-settings-trigger { flex: 0 0 44px; min-height: 44px; }

}

/* ---- the phone's Pocket Study menu ------------------------------------- */
/* On a phone the dock steps aside and the ⊞ Pocket Study button at the top left opens the apps as a drop-down.
   The shell sets --ss-phone-nav-inset, and every app's phone top bar leaves that much room at its start. */

:root { --ss-phone-nav-inset: 0px; }

.ui-phone-nav { display: none; }

@media (max-width: 720px), (orientation: portrait) {
  :root {
    --ui-phone-nav-edge: 8px;
    --ui-phone-nav-size: 36px;
    --ui-phone-nav-top: 11px;
    --ss-phone-nav-inset: calc(env(safe-area-inset-left) + var(--ui-phone-nav-edge) * 2 + var(--ui-phone-nav-size));
  }

  /* The old dock stays in the page for one landing, hidden on a phone. */
  .ui-dock { display: none; }
  .ui-room-background { bottom: 0; }

  .ui-phone-nav { display: contents; }

  .ui-phone-nav__button {
    --ui-icon-button-size: var(--ui-phone-nav-size);
    position: fixed;
    z-index: 7;
    top: calc(env(safe-area-inset-top) + var(--ui-phone-nav-top));
    left: calc(env(safe-area-inset-left) + var(--ui-phone-nav-edge));
  }
  .ui-phone-nav__button::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }

  .ui-phone-nav__button .ui-icon { --ui-icon-size: 20px; }

  /* While Pocket Study is still opening (or failed to open) there is no top bar and nothing for ⊞ to open yet: it waits. */
  .ui-desktop:not(:has(> .ui-phone-home:not([hidden]))):has(.ui-workspace-window [data-dockview]:empty, .ui-workspace-window [data-dockview] > :is(.ui-opening, .ui-load-failure)) .ui-phone-nav__button { visibility: hidden; }

  .ui-phone-nav__button[aria-expanded="true"] {
    border-color: var(--ss-role-selected-edge, var(--ss-color-pink-strong));
    background: var(--ss-role-selected-soft, var(--ss-color-pink-soft));
  }

  /* The open menu dims what is behind it; a tap there closes the menu. */
  .ui-phone-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: 6;
    background: var(--ss-color-backdrop);
  }

  .ui-phone-nav__scrim[hidden],
  .ui-phone-nav__menu[hidden] { display: none; }

  .ui-phone-nav__menu {
    position: fixed;
    z-index: 7;
    top: calc(env(safe-area-inset-top) + var(--ui-phone-nav-top) + var(--ui-phone-nav-size) + 6px);
    left: calc(env(safe-area-inset-left) + var(--ui-phone-nav-edge));
    box-sizing: border-box;
    display: grid;
    width: min(264px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - var(--ui-phone-nav-edge) * 2));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--ui-phone-nav-top) - var(--ui-phone-nav-size) - 14px);
    overflow-y: auto;
    gap: 2px;
    padding: var(--ss-space-1);
    border: var(--ss-border-light);
    border-radius: var(--ss-radius-md);
    color: var(--ss-color-ink);
    background: var(--ss-color-paper);
    box-shadow: var(--ss-shadow-soft);
    font-family: var(--ss-font-chrome);
    animation: ui-phone-nav-open 120ms ease-out;
  }

  .ui-phone-nav__title {
    margin: 4px 10px 6px;
    color: var(--ss-color-ink-soft);
    font-size: var(--ss-text-xs);
    font-weight: 700;
  }

  .ui-phone-nav__item,
  .ui-phone-nav__chip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--ss-radius-md);
    color: var(--ss-color-ink);
    background: transparent;
    font: inherit;
    font-size: var(--ss-text-base);
    text-align: start;
    cursor: pointer;
  }

  .ui-phone-nav__item {
    gap: 12px;
    width: 100%;
    padding: 0 10px;
  }

  .ui-phone-nav__item .ui-icon { --ui-icon-size: 24px; }
  .ui-phone-nav__item--quiet { color: var(--ss-color-ink-soft); }
  .ui-phone-nav__item--quiet .ui-icon { --ui-icon-size: 20px; margin-inline: 2px; }

  .ui-phone-nav__item[aria-current="true"] { color: var(--ss-role-on-selected, var(--ss-color-paper)); background: var(--ss-role-selected, var(--ss-lock-ground)); }

  .ui-phone-nav__chips {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ss-space-1);
    margin-block: 6px 2px;
  }

  .ui-phone-nav__chip {
    min-width: 0;
    padding: 0 12px;
    border-color: var(--ss-color-border-soft);
    overflow-wrap: anywhere;
  }

  /* Each box says what it is (your profile, your Pocket Points) over its value. */
  .ui-phone-nav__chip { display: grid; justify-items: start; align-content: center; gap: 2px; text-align: start; }
  .ui-phone-nav__chip > small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.2 var(--ss-font-reading); }
  .ui-phone-nav__chip > span { color: var(--ss-color-ink); font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  .ui-phone-nav__points { display: inline-flex; align-items: center; gap: .3em; }
  .ui-phone-nav__chip[hidden] { display: none; }
  .ui-phone-nav__coin { --ui-icon-size: 1em; }
  .ui-phone-nav__chip[data-balance-state="unavailable"] .ui-phone-nav__coins { color: var(--ss-color-muted, #856e70); }

  @media (hover: hover) { :is(.ui-phone-nav__item, .ui-phone-nav__chip):hover:not(:disabled):not([aria-current="true"]) { background: var(--ss-role-hover, var(--ss-color-purple-soft)); } }
  :is(.ui-phone-nav__item, .ui-phone-nav__chip):focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: -2px; }

  /* The windows keep clear of the phone's own edges now that no dock sits under them, and draw no rim at the bottom. */
  .ui-desktop-stage.is-phone-workspace > .ui-workspace-window { border-bottom-width: 0; }
  .ui-desktop-stage.is-phone-workspace > .ui-workspace-window:not(.is-space) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* A frameless window (Journal) draws its own top bar, sized from --ui-phone-nav-top and --ui-phone-nav-size so ⊞ sits
     centred in it, and is full bleed: no skin's rim around it. */
  .ui-desktop-stage.is-phone-workspace > .ui-workspace-window.is-space { border: 0; border-image: none; }
}

/* ---- the phone's Home ------------------------------------------------- */
/* On a phone Home is a calm page instead of the room (PC-only): the skin's shaded top bar holding ⊞ and
   "Pocket Study", the greeting and date in the letter face, one pink Next up action, and the four apps. */

.ui-phone-home { display: none; }

@media (max-width: 720px), (orientation: portrait) {
  .ui-phone-home:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    color: var(--ss-color-ink);
    background: var(--ss-color-paper);
    font-family: var(--ss-font-chrome);
  }

  .ui-phone-home__bar.ui-titlebar {
    min-height: calc(var(--ui-phone-nav-top) * 2 + var(--ui-phone-nav-size));
    box-sizing: content-box;
    justify-content: flex-start;
    /* The same room on both sides (⊞ on the left, the gear on the right), so the title sits in the screen's middle. */
    padding: env(safe-area-inset-top) max(9px, calc(env(safe-area-inset-right) + var(--ui-phone-nav-edge) * 2 + var(--ui-phone-nav-size))) 0 max(9px, var(--ss-phone-nav-inset));
    border-width: 0;
    border-radius: 0;
    font-size: var(--ss-text-window-title-mobile);
  }

  .ui-phone-home__brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .ui-phone-home__page {
    display: grid;
    align-content: start;
    gap: var(--ss-space-6);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ss-space-6) max(var(--ss-space-5), env(safe-area-inset-right)) max(var(--ss-space-5), env(safe-area-inset-bottom)) max(var(--ss-space-5), env(safe-area-inset-left));
  }

  .ui-phone-home__hello { display: grid; gap: var(--ss-space-1); }

  .ui-phone-home__greeting {
    margin: 0;
    color: var(--ss-color-ink);
    font: 400 var(--ss-text-display)/1.15 var(--ss-font-letter);
    text-wrap: balance;
  }

  .ui-phone-home__date {
    margin: 0;
    color: var(--ss-color-ink-soft);
    font: var(--ss-text-base)/1.4 var(--ss-font-letter);
  }

  .ui-phone-home__apps-section { display: grid; gap: var(--ss-space-2); }

  .ui-phone-home__heading {
    margin: 0;
    color: var(--ss-color-ink-soft);
    font: 700 var(--ss-text-xs)/1.2 var(--ss-font-chrome);
  }

  .ui-phone-home__action.ui-control-button {
    justify-content: flex-start;
    gap: var(--ss-space-3);
    width: 100%;
    min-height: calc(76px * var(--ss-text-scale));
    padding: var(--ss-space-3) var(--ss-space-4);
    text-align: start;
  }

  .ui-phone-home__action .ui-icon { --ui-icon-size: 28px; flex: 0 0 auto; }

  .ui-phone-home__action-text,
  .ui-phone-home__app-text { display: grid; gap: 2px; min-width: 0; }

  .ui-phone-home__action-text strong { font: 700 var(--ss-text-title)/1.2 var(--ss-font-chrome); }
  .ui-phone-home__action-text small { font: var(--ss-text-xs)/1.3 var(--ss-font-chrome); opacity: .9; }

  .ui-phone-home__apps { display: grid; margin: 0; padding: 0; list-style: none; }
  .ui-phone-home__apps > li + li { border-top: 1px solid color-mix(in srgb, var(--ss-color-border-soft) 40%, transparent); }

  .ui-phone-home__app {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ss-space-3);
    width: 100%;
    min-height: calc(64px * var(--ss-text-scale));
    margin: 0;
    padding: var(--ss-space-2) var(--ss-space-1);
    border: 0;
    border-radius: var(--ss-radius-md);
    color: var(--ss-color-ink);
    background: transparent;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }

  .ui-phone-home__app .ui-icon { --ui-icon-size: 26px; flex: 0 0 auto; color: var(--ss-color-purple-dark, currentColor); }
  .ui-phone-home__app-text strong { font: 700 var(--ss-text-base)/1.25 var(--ss-font-chrome); }
  .ui-phone-home__app-text small { color: var(--ss-color-ink-soft); font: var(--ss-text-xs)/1.35 var(--ss-font-chrome); }
  @media (hover: hover) { .ui-phone-home__app:hover { background: var(--ss-role-hover, var(--ss-color-purple-soft)); } }
  .ui-phone-home__app:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: -2px; }
}

@keyframes ui-phone-nav-open { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .ui-phone-nav__menu { animation: none; }
}

@media (max-width: 560px) {
  .ui-workspace-migration__actions { flex-direction: column; }
  .ui-os-settings-surface .ui-settings-row { grid-template-columns: 34px minmax(0, 1fr); }
  .ui-os-settings-surface .ui-settings-row__control { grid-column: 1 / -1; justify-self: stretch; }
  .ui-os-settings-surface .ui-segmented-choice { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-dock-app span { transition: none; }
}

/* The live room is below the existing window stack. Only its exposed area receives input. */
.ui-room-background { position: absolute; inset: 0; z-index: 1; }
.ui-room-background iframe { display: block; width: 100%; height: 100%; border: 0; }
.ui-shop { width: min(560px, calc(100% - 24px)); }
.ui-shop-item { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; align-items: center; gap: var(--ss-space-3); padding: var(--ss-space-4); }
.ui-shop-item img { width: 128px; height: 140px; object-fit: contain; opacity: .72; }
.ui-shop-item img.is-owned { opacity: 1; }
/* Drag a window back into the Journal to dock it (D060): a quiet paper note at the room's bottom right while a Journal panel
   floats; it never takes a click, so a window's corner under it can still be dragged. */
.ui-dock-back-hint { position: absolute; z-index: 4; right: 14px; bottom: 14px; max-width: 16em; margin: 0; padding: 8px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); font: 600 var(--ss-text-xs)/1.35 var(--ss-font-reading); text-align: center; pointer-events: none; }
.ui-dock-back-hint[hidden] { display: none; }
/* Home's "Keep a copy: Download my data" (phone-home.mjs): one quiet line on paper, its link underlined, Not now at its end. */
.ui-phone-home__backup:not([hidden]) { display: flex; align-items: center; gap: 6px; margin: 0; padding: 4px 4px 4px 12px; border: 1px solid var(--ss-color-tan-border); border-radius: var(--ss-radius-control); color: var(--ss-color-ink); background: var(--ss-color-paper); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
.ui-phone-home__backup-open { padding: 0; border: 0; color: var(--ss-lock-ground); background: none; font: 700 var(--ss-text-xs)/1.3 var(--ss-font-reading); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui-phone-home__backup-close.ui-icon-button { width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin-inline-start: auto; padding: 0; --ui-icon-size: 14px; }
/* Touch areas of 44 x 44 or more (the accessibility check, 18 Oct) without changing how these small controls look: each
   one's ::after reaches past its edge to make a 44 x 44 square round its middle (its inset is measured inside the border). */
.ui-phone-home__backup-open, .ui-phone-home__backup-close.ui-icon-button { position: relative; }
.ui-phone-home__backup-open::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
.ui-phone-home__backup-close.ui-icon-button::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
.ui-desktop > .ui-phone-home .ui-phone-home__backup:not([hidden]) { margin: 4px 16px 0; }
/* Bought, the price is a flat sage Owned tag (D027), not a button. */
.ui-shop-item strong.is-owned { justify-self: start; align-self: center; width: max-content; padding: 2px 10px; border-radius: 4px; color: var(--ss-color-ink); background: var(--ss-crane-sage); font-weight: 700; }
.ui-shop-status:not(:empty) { margin: var(--ss-space-3) 0 0; }
.ui-shop-item h2, .ui-shop-item p { margin: 0 0 var(--ss-space-2); }
.ui-shop-placement { padding: 0 var(--ss-space-4) var(--ss-space-3); }
.ui-shop-status { min-height: 1.5em; margin: 0; padding: 0 var(--ss-space-4) var(--ss-space-4); }
@media (max-width: 560px) {
  .ui-shop-backdrop { padding: 8px; }
  .ui-shop-item { grid-template-columns: 92px minmax(0, 1fr); padding: var(--ss-space-3); }
  .ui-shop-item img { width: 92px; height: 108px; }
  .ui-shop-item > button { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 720px), (orientation: portrait) {
  .ui-room-background { bottom: var(--ui-dock-height); }
}

/* The Room dock uses the same raised button face as in-window controls. */
[data-skin="room"] .ui-pouch,
[data-skin="room"] :is(.ui-dock-app, .ui-dock-system, .ui-dock > .ui-settings-trigger) { border: 2px solid var(--ss-window-outline); border-radius: var(--ss-radius-sm); box-shadow: var(--ss-button-shadow-hard); }
[data-skin="room"] :is(.ui-dock-system, .ui-dock > .ui-settings-trigger) { color: var(--ss-color-ink); background: var(--ss-color-paper); }
[data-skin="room"] .ui-dock-app { color: var(--ss-color-title); background: var(--ss-color-purple); }
[data-skin="room"] .ui-dock-app[aria-current="true"] { border-color: var(--ss-color-pink-strong); color: var(--ss-color-ink); background: var(--ss-color-pink); }
[data-skin="room"] .ui-dock-app > .ui-icon--lucide,
[data-skin="room"] .ui-dock-system > [data-ui-icon="house"] { display: none; }
[data-skin="room"] .ui-dock-app__room-icon,
[data-skin="room"] .ui-dock-system > .ui-dock-home-room-icon { display: block; }
[data-skin="room"] .ui-dock-app[data-state="open"]::after,
[data-skin="room"] .ui-dock-app[data-state="minimized"]::after { background: var(--ss-color-title); }

/* v94's phone Home: a centred title; one greeting card (the date, the greeting in the pixel title face, the next step as the main
   button); each app a card with its Japanese name on the look's band, its name in the pixel title face, its line and an arrow. */
@media (max-width: 720px), (orientation: portrait) {
  .ui-phone-home .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ui-phone-home:not([hidden]) { background: var(--ss-color-bg); font-family: var(--ss-font-reading); }
  .ui-phone-home__bar.ui-titlebar { justify-content: center; font-family: var(--ss-font-pixel-title, var(--ss-font-window-title)); }
  .ui-phone-home__page { gap: 14px; padding-top: 16px; padding-inline: max(16px, env(safe-area-inset-left)); }
  .ui-phone-home__hello { gap: 8px; padding: 16px; border: 1px solid var(--ss-color-border-soft); border-radius: 6px; background: var(--ss-color-paper); box-shadow: var(--ss-shadow-soft); }
  .ui-phone-home__greeting { font: 600 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); color: var(--ss-v94-icon-ink, var(--ss-color-ink)); }
  .ui-phone-home__date { font: 400 var(--ss-text-base)/1.3 var(--ss-font-reading); color: var(--ss-color-ink-soft); }
  .ui-phone-home__apps { display: grid; gap: 14px; }
  .ui-phone-home__apps > li + li { border-top: 0; }
  .ui-phone-home__app { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 0 0 16px; border: 2px solid var(--ss-color-border); border-radius: 6px; overflow: hidden; text-align: start; background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard, var(--ss-shadow-soft)); }
  .ui-phone-home__band { grid-column: 1 / -1; padding: 8px 16px; color: var(--ss-strip-calendar-ink, var(--ss-color-ink)); background: var(--ss-strip-calendar, var(--ss-color-bg)); font: 400 var(--ss-text-title)/1.2 var(--ss-font-jp); }
  .ui-phone-home__app-text { padding: 14px 16px 0; }
  .ui-phone-home__app-text strong { font: 600 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  .ui-phone-home__app::after { content: ""; grid-column: 2; grid-row: 2; margin: 14px 18px 0 0; width: 0; height: 0; border-block: 7px solid transparent; border-inline-start: 7px solid var(--ss-color-border); }
}
@media (max-width: 720px), (orientation: portrait) {
  .ui-phone-home__action-text strong { font: 600 var(--ss-text-base)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
}
/* v94 Home, batch 4: the gear at the top bar's right, mirroring ⊞; the band's Japanese name small (17 px in v94); each row's
   line in ink and one small detail under it; the padlock beside Journal when it's locked; This week, its streak and cards,
   and the seven days Monday to Sunday (filled when studied, today in the band's colour until then). */
@media (max-width: 720px), (orientation: portrait) {
  .ui-phone-home__bar.ui-titlebar { position: relative; }
  .ui-phone-home__settings.ui-control-button {
    --ui-icon-button-size: var(--ui-phone-nav-size);
    position: absolute;
    top: calc(env(safe-area-inset-top) + var(--ui-phone-nav-top));
    right: calc(env(safe-area-inset-right) + var(--ui-phone-nav-edge));
    color: var(--ss-v94-icon-ink, var(--ss-color-ink));
  }
  .ui-phone-home__settings .ui-icon { --ui-icon-size: 20px; }
  .ui-phone-home__settings.ui-control-button::after { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)); }
  .ui-phone-home__band { padding: 4px 16px; font: 500 calc(17px * var(--ss-text-scale, 1))/1.3 var(--ss-font-jp); }
  .ui-phone-home__app-text { gap: 2px; }
  .ui-phone-home__line { font: 400 var(--ss-text-base)/1.35 var(--ss-font-reading); color: var(--ss-color-ink); }
  .ui-phone-home__sub { font: 400 var(--ss-text-xs)/1.35 var(--ss-font-reading); color: var(--ss-color-ink-soft); }
  .ui-phone-home__sub[hidden], .ui-phone-home__lock[hidden], .ui-phone-home__week[hidden] { display: none; }
  .ui-phone-home__lock { display: inline-block; position: relative; width: 12px; height: 10px; margin-inline-start: 8px; background: var(--ss-color-ink-soft); }
  .ui-phone-home__lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 7px; box-sizing: border-box; border: 2px solid var(--ss-color-ink-soft); border-bottom: 0; }
  .ui-phone-home__week { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--ss-color-border-soft); border-radius: 6px; background: var(--ss-color-paper); box-shadow: var(--ss-shadow-soft); }
  .ui-phone-home__week-text { display: grid; gap: 2px; min-width: 0; }
  .ui-phone-home__week-text strong { font: 800 var(--ss-text-base)/1.3 var(--ss-font-reading); color: var(--ss-color-ink); }
  .ui-phone-home__week-text small { font: 400 var(--ss-text-xs)/1.35 var(--ss-font-reading); color: var(--ss-color-ink-soft); }
  .ui-phone-home__days { display: flex; flex: none; gap: 5px; }
  .ui-phone-home__days > i { display: block; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--ss-v94-icon-ink, var(--ss-color-border)); border-radius: 3px; }
  .ui-phone-home__days > i.on { background: var(--ss-v94-icon-ink, var(--ss-color-border)); }
  .ui-phone-home__days > i.now { border-color: var(--ss-strip-calendar, var(--ss-color-border-soft)); background: color-mix(in srgb, var(--ss-strip-calendar, var(--ss-color-bg)) 45%, var(--ss-color-paper)); }
}
/* v94: while a zone's pushed page is in front (it has its own ‹), ⊞ steps aside. */
@media (max-width: 720px), (orientation: portrait) {
  .ui-desktop[data-phone-pushed] .ui-phone-nav__button { display: none; }
  .ui-desktop[data-app-modal] .ui-phone-nav__button { visibility: hidden; }
  .ui-desktop:is([data-phone-pushed], [data-phone-own-bar]) .is-phone-workspace > .ui-workspace-window > .ui-workspace-titlebar { display: none; } /* the zone draws its own bar */
  .ui-desktop:is([data-phone-pushed], [data-phone-own-bar]) .is-phone-workspace > .ui-workspace-window { border-width: 0; } /* …from the screen's edge */
}

/* Home's computer-only parts stay hidden on a phone: the app icons and the week's day names. */
@media (max-width: 720px), (orientation: portrait) {
  .ui-phone-home__icon, .ui-phone-home__days > i > span { display: none; }
}

/* The Home card on a computer (the desktop's D010, D011): whenever no app is in front, one card over the room, at its right
   (Emily, 18 Oct: D010's B, so the desk, the window and the person stay in view) until she moves it: the date and the greeting on the look's band; the big button for the app used last, as on the phone (Emily, 17 Oct:
   same features on both sizes); Learn, Journal, Arcade and Decks in the dock's order (the phone's too), each a raised row
   with its icon in a square, its name in the pixel title face, where you stand in it, and an arrow; then This week, the
   days 月 Mon to 日 Sun, those with study in sage and today (今日) outlined. The phone's bar is the phone's. */
@media (min-width: 721px) and (orientation: landscape) {
  .ui-desktop > .ui-phone-home:not([hidden]) { position: absolute; z-index: 3; top: 112px; right: 24px; left: auto; translate: none; display: block; box-sizing: border-box; width: min(520px, calc(100% - 180px)); max-height: calc(100% - 136px); overflow: auto; border: 1px solid rgba(81, 71, 111, .45); border-radius: 8px; color: var(--ss-color-ink); background: var(--ss-color-bg); box-shadow: 0 4px 0 rgba(81, 71, 111, .42), 0 22px 44px -14px rgba(42, 31, 34, .45); font-family: var(--ss-font-reading); }
  .ui-phone-home .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ui-phone-home__bar, .ui-phone-home__band { display: none !important; }
  .ui-phone-home__page { display: grid; gap: 8px; padding: 0 0 12px; }
  /* The band is the date and the greeting; the big button sits under it on the card's ground, still inside the handle. */
  .ui-phone-home__hello { display: grid; gap: 0; padding: 0 0 4px; }
  .ui-phone-home__date, .ui-phone-home__greeting { color: var(--ss-strip-calendar-ink, var(--ss-color-ink)); background: var(--ss-strip-calendar, var(--ss-color-bg)); }
  .ui-phone-home__date { margin: 0; padding: 12px 20px 2px; font: 600 var(--ss-text-xs)/1.3 var(--ss-font-reading); letter-spacing: .08em; text-transform: uppercase; }
  .ui-phone-home__greeting { margin: 0; padding: 0 20px 12px; font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  .ui-phone-home__action.ui-control-button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; justify-content: stretch; gap: 14px; box-sizing: border-box; width: auto; min-height: 64px; margin: 12px 16px 0; padding: 10px 16px 10px 12px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: var(--ss-v94-raise, 2px 3px 0 rgba(81, 71, 111, .42)); text-align: start; cursor: pointer; }
  .ui-phone-home__action::after { content: ""; width: 0; height: 0; border-block: 6px solid transparent; border-inline-start: 7px solid currentColor; }
  .ui-phone-home__action > .ui-icon { justify-self: center; width: 28px; height: 28px; }
  .ui-phone-home__action-text { display: grid; gap: 2px; min-width: 0; }
  .ui-phone-home__action-text > strong { font: 400 var(--ss-text-title)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); }
  .ui-phone-home__action-text > small { font: 500 var(--ss-text-base)/1.3 var(--ss-font-reading); opacity: .9; }
  .ui-phone-home__action:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: 2px; }
  .ui-phone-home__apps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 4px 16px 0; list-style: none; }
  .ui-phone-home__app { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; box-sizing: border-box; width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-v94-raise, 2px 3px 0 rgba(81, 71, 111, .42)); text-align: start; cursor: pointer; }
  .ui-phone-home__app::after { content: ""; width: 0; height: 0; border-block: 6px solid transparent; border-inline-start: 7px solid var(--ss-lock-ground); }
  .ui-phone-home__icon { display: grid; place-items: center; width: 40px; height: 40px; box-sizing: border-box; border: 2px solid var(--ss-lock-ground); border-radius: 4px; color: var(--ss-lock-ground); background: var(--ss-color-bg); }
  .ui-phone-home__icon > .ui-icon { width: 24px; height: 24px; }
  .ui-phone-home__app-text { display: grid; gap: 2px; min-width: 0; }
  .ui-phone-home__app-text > strong { color: var(--ss-v94-icon-ink, var(--ss-color-ink)); font: 400 var(--ss-text-title)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); }
  .ui-phone-home__line { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-base)/1.3 var(--ss-font-reading); }
  .ui-phone-home__sub { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
  .ui-phone-home__week:not([hidden]) { display: grid; gap: 6px; padding: 6px 16px 0; }
  .ui-phone-home__week-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ui-phone-home__week-text > strong { font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  .ui-phone-home__week-text > small { color: var(--ss-color-ink); font: 700 var(--ss-text-xs)/1.2 var(--ss-font-reading); }
  .ui-phone-home__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
  .ui-phone-home__days > i { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; box-sizing: border-box; border: 1px solid rgba(81, 71, 111, .3); border-radius: 4px; color: var(--ss-color-ink-soft); font: 600 var(--ss-text-xs)/1 var(--ss-font-reading); font-style: normal; white-space: nowrap; }
  .ui-phone-home__days > i.on { border-color: rgba(81, 71, 111, .45); color: var(--ss-color-ink); background: var(--ss-crane-sage); }
  .ui-phone-home__days > i.now { border: 2px solid var(--ss-lock-ground); color: var(--ss-v94-icon-ink, var(--ss-color-ink)); background: var(--ss-color-paper); }
  .ui-phone-home__day-ja, .ui-phone-home__today { font: 500 var(--ss-text-xs)/1 var(--ss-font-jp); }
  .ui-phone-home__today, .ui-phone-home__days > i.now > .ui-phone-home__day-ja { display: none; }
  .ui-phone-home__days > i.now > .ui-phone-home__today { display: inline; }
  /* Today's tile says only 今日, so it has the same room inside its outline as the other days. */
  .ui-phone-home__days > i.now > .ui-phone-home__day-en { display: none; }
  /* It moves like a window by its band (modules/shell/phone-home.mjs) and keeps the place it was moved to. */
  .ui-desktop > .ui-phone-home[data-home-card-placed]:not([hidden]) { top: var(--home-card-top); left: var(--home-card-left); translate: none; }
  .ui-phone-home__hello { cursor: grab; touch-action: none; user-select: none; }
  .ui-phone-home__hello > .ui-phone-home__action { cursor: pointer; }
  .ui-phone-home[data-home-card-dragging] .ui-phone-home__hello { cursor: grabbing; }
  .ui-phone-home__hello:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: -4px; }
}

/* v94 looks, the dock on a computer as the desktop board draws it (D010): one paper rail at the left, centred down the
   screen: the profile's name on cream at its top, then Home, the apps, the coins and Settings, each a 76 x 56 button with
   its icon over its name (no hover label); the one in front (Home while Home shows) plum with lit cream words. */
@media (min-width: 721px) and (orientation: landscape) {
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) { --ui-dock-width: 110px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock { top: 50%; bottom: auto; left: calc(14px + env(safe-area-inset-left)); translate: 0 -50%; width: 88px; max-height: calc(100% - 16px); gap: 6px; padding: 6px; overflow-y: auto; border: 1px solid rgba(81, 71, 111, .45); border-radius: 8px; background: var(--ss-color-paper); box-shadow: 2px 3px 0 rgba(81, 71, 111, .3), 0 12px 22px -12px rgba(59, 43, 46, .35); scrollbar-width: none; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-dock-apps { gap: 6px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock :is(.ui-dock-app, .ui-dock-system, .ui-settings-trigger, .ui-pouch-trigger) { display: grid; grid-auto-flow: row; justify-items: center; align-content: center; gap: 2px; box-sizing: border-box; width: 76px; min-width: 76px; height: 56px; min-height: 56px; padding: 4px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-v94-icon-ink, var(--ss-color-ink)); background: var(--ss-color-paper); box-shadow: var(--ss-v94-raise, 2px 3px 0 rgba(81, 71, 111, .42)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock :is(.ui-dock-app, .ui-dock-system, .ui-settings-trigger) span { position: static; padding: 0; border: 0; color: inherit; background: none; box-shadow: none; opacity: 1; transform: none; font: 600 var(--ss-text-xs)/1 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock :is(.ui-dock-app, .ui-dock-system, .ui-settings-trigger) > .ui-icon { width: 22px; height: 22px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock :is(.ui-dock-app, .ui-dock-system)[aria-current="true"] { color: var(--ss-lock-ink); background: var(--ss-lock-ground); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), inset -1px -1px 0 rgba(31, 37, 80, .55), 2px 3px 0 var(--ss-lock-raise); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-profile-badge { box-sizing: border-box; width: 76px; min-height: 30px; padding: 2px 6px; border: 1px solid rgba(81, 71, 111, .45); border-radius: 6px; color: var(--ss-v94-icon-ink, var(--ss-color-ink)); background: var(--ss-color-bg); box-shadow: inset 0 -2px 0 rgba(81, 71, 111, .2); font: 700 var(--ss-text-xs)/1.2 var(--ss-font-reading); }
}
@media (min-width: 721px) and (orientation: landscape) {
  /* the coins: the coin over the amount, no chip of its own; an app that is open carries a small tan square (D012) */
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-pouch-trigger .ui-pouch { padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: 600 var(--ss-text-xs)/1 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-pouch-trigger .ui-pouch [data-pouch-balance] { flex-direction: column-reverse; gap: 4px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-pouch-trigger .ui-pouch-balance__coin { width: 20px; height: 20px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-pouch-trigger .ui-pouch-balance__amount:not([data-unit=""])::after { content: " " attr(data-unit); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-dock .ui-dock-app:is([data-state="open"], [data-state="minimized"])::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border: 1px solid var(--ss-lock-ground); border-radius: 2px; background: var(--ss-lock-main-edge); }
}

/* v94 looks on a computer, the desktop's two small questions as paper pop-ups (D013, D018, in D040's style): the pixel
   title at the left in plum, the words under it, the quieter choice at the left and the main one at the right. Previous
   workspace found shows the three windows it would bring back beside its question, and its promise in a box. */
@media (min-width: 721px) and (orientation: landscape) {
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: 1px solid rgba(81, 71, 111, .45); border-radius: 10px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: 2px 4px 0 rgba(81, 71, 111, .42), 0 22px 44px -14px rgba(42, 31, 34, .55); text-align: start; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-workspace-migration__surface { width: min(600px, calc(100vw - 36px)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) #desktop-reset-dialog { width: min(560px, calc(100vw - 36px)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) h2 { margin: 0; color: var(--ss-lock-ground); font: 400 var(--ss-text-title)/1.25 var(--ss-font-pixel-title, var(--ss-font-display)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) p { margin: 0; font: 500 var(--ss-text-base)/1.45 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) .ui-workspace-migration__actions { justify-content: space-between; margin-top: 8px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) .ui-workspace-migration__actions > .ui-control-button { min-height: 40px; padding: 4px 22px; font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  /* The main button keeps the pixel title face (house style, 17 Oct). */
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) :is(.ui-workspace-migration__surface, #desktop-reset-dialog) .ui-workspace-migration__actions > .ui-control-button--primary { font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
  .ui-workspace-migration__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 20px; }
  .ui-workspace-migration__text { display: grid; gap: 12px; }
  .ui-workspace-migration__note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); }
  .ui-workspace-migration__note::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 4px; border: 1px solid var(--ss-lock-ground); border-radius: 3px; background: var(--ss-crane-sage); }
  .ui-workspace-migration__picture { position: relative; height: 200px; overflow: hidden; border: 1px solid rgba(81, 71, 111, .45); border-radius: 6px; background: var(--ss-strip-calendar, var(--ss-color-bg)); }
  .ui-workspace-migration__picture > i { position: absolute; display: grid; place-items: start center; width: 110px; height: 72px; box-sizing: border-box; padding-top: 12px; border: 1px solid var(--ss-lock-ground); border-top-width: 8px; border-radius: 3px; background: var(--ss-color-paper); box-shadow: 2px 3px 0 rgba(81, 71, 111, .3); font-style: normal; }
  .ui-workspace-migration__picture > i:nth-child(1) { left: 10px; top: 14px; }
  .ui-workspace-migration__picture > i:nth-child(2) { left: 76px; top: 62px; background: var(--ss-color-bg); }
  .ui-workspace-migration__picture > i:nth-child(3) { left: 30px; top: 116px; }
  .ui-workspace-migration__picture b { color: var(--ss-lock-ground); font: 400 var(--ss-text-base)/1 var(--ss-font-pixel-title, var(--ss-font-display)); }
}
@media (max-width: 720px), (orientation: portrait) {
  .ui-workspace-migration__picture { display: none; }
}

/* v94 looks on a computer, the Room shop (the desktop's D026 to D029): a paper window, "Room shop" in the pixel title face
   with the coins as a raised chip and a quiet close square at its right; the item as one card: its name, its picture on
   cream, its line, its price, and Buy (or Place it) as the plum main button across the card. */
@media (min-width: 721px) and (orientation: landscape) {
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop.ui-settings-surface { width: min(460px, calc(100% - 36px)); border: 1px solid rgba(81, 71, 111, .45); border-radius: 10px; background: var(--ss-color-paper); box-shadow: 2px 4px 0 rgba(81, 71, 111, .42), 0 22px 44px -14px rgba(42, 31, 34, .55); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop > .ui-settings-header { align-items: center; padding: 18px 20px 12px; border: 0; color: var(--ss-color-ink); background: none; box-shadow: none; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop > .ui-settings-header > div { display: flex; flex: 1; align-items: center; gap: 12px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop > .ui-settings-header small { display: none; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop > .ui-settings-header :is(h1, h2) { flex: 1; margin: 0; color: var(--ss-lock-ground); font: 400 var(--ss-text-title)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop [data-shop-balance] { margin: 0; padding: 4px 12px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-v94-raise, 2px 3px 0 rgba(81, 71, 111, .42)); font: 700 var(--ss-text-xs)/1.2 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop [data-shop-close] { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 1px solid rgba(81, 71, 111, .55); border-radius: 5px; color: var(--ss-lock-ground); background: var(--ss-color-paper); box-shadow: 1px 2px 0 rgba(81, 71, 111, .22); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop [data-shop-close] > .ui-icon { width: 14px; height: 14px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop > .ui-settings-scroll { padding: 0 20px 18px; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border: 1px solid rgba(81, 71, 111, .3); border-radius: 8px; background: var(--ss-color-paper); box-shadow: 2px 3px 0 rgba(81, 71, 111, .2); text-align: center; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item > img { order: -1; width: 100%; height: 220px; padding: 16px; box-sizing: border-box; border-radius: 6px; background: var(--ss-color-bg); object-fit: contain; image-rendering: pixelated; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item > div { display: contents; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item h2 { margin: 0; order: -2; color: var(--ss-lock-ground); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); text-align: start; }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item p { margin: 0; font: 500 var(--ss-text-base)/1.4 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item strong { color: var(--ss-lock-ground); font: 800 var(--ss-text-base)/1.3 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item > button { width: 100%; min-height: 40px; font: 700 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-item > button.ui-control-button--primary { font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title); }
  :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-placement, :is([data-skin="keepsake"]):is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-shop-status { padding-inline: 0; text-align: center; }
}

/* v94 looks, the phone's ⊞ (phone build v94, "Today · evening"): a 40 paper square 12 from the edge, its line icon at 22; the
   bars it sits in are 56 high. It wears the gear's look exactly, the plum edge and the one house lift (Emily's iPhone, 18 Oct:
   the old navy edge under a pale bevel read as "a button on top of a button"). */
@media (max-width: 720px), (orientation: portrait) {
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) { --ui-phone-nav-edge: 12px; --ui-phone-nav-size: 40px; --ui-phone-nav-top: 8px; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__button { border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-purple-dark); background: var(--ss-color-paper); box-shadow: var(--ss-v94-raise, var(--ss-button-shadow-hard)); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__button .ui-icon { --ui-icon-size: 22px; }
}

/* v94 looks, the phone's ⊞ (phone build v94, "Apps sheet"): a sheet that rises from the foot with its grip, "Pocket Study"
   and ×; Home as one wide row, then the four apps as tiles two by two, each with its kanji mark; the profile, Pocket Points
   and Settings stay at its foot. */
.ui-phone-nav__mark { display: none; }
@media (max-width: 720px), (orientation: portrait) {
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 88dvh; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 32px 20px calc(20px + env(safe-area-inset-bottom)); border: 0; border-top: 2px solid var(--ss-lock-ground); border-radius: 16px 16px 0 0; background: var(--ss-crane-cream); box-shadow: none; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu::before { content: ""; position: absolute; top: 10px; left: calc(50% - 20px); width: 40px; height: 4px; border-radius: 2px; background: var(--ss-guide-tan); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__title { grid-column: 1 / -1; margin: 0 0 4px; color: var(--ss-color-ink); text-align: center; font: 400 var(--ss-text-base)/1.4 var(--ss-font-pixel-title, var(--ss-font-display)); }
  .ui-phone-nav__close { display: none; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__close { position: absolute; top: 24px; right: 14px; display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; color: var(--ss-color-ink); background: none; box-shadow: none; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu :is([data-phone-nav-action="home"], [data-phone-nav-app]) { border: 2px solid var(--ss-lock-ground); border-radius: 6px; background: var(--ss-color-paper); box-shadow: 2px 3px 0 rgba(81, 71, 111, .42); }
  /* Where you are is solid plum with paper words, as every chosen thing (house style, 17 Oct). */
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [aria-current="true"]:is([data-phone-nav-action="home"], [data-phone-nav-app]) { color: var(--ss-lock-ink); background: var(--ss-lock-ground); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [aria-current="true"][data-phone-nav-app] > :is(.ui-phone-nav__mark, span:last-child) { color: var(--ss-lock-ink); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [aria-current="true"][data-phone-nav-action="home"] { color: var(--ss-lock-ink); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [aria-current="true"][data-phone-nav-action="home"]::after { border-inline-start-color: var(--ss-lock-ink); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-action="home"] { grid-column: 1 / -1; min-height: 52px; gap: 14px; padding: 0 16px; color: var(--ss-lock-ground); font: 400 var(--ss-text-base)/1.2 var(--ss-font-pixel-title, var(--ss-font-display)); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-action="home"]::after { content: ""; margin-inline-start: auto; border-block: 7px solid transparent; border-inline-start: 7px solid var(--ss-lock-ground); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-app] { display: grid; align-content: center; justify-items: start; gap: 2px; min-height: 86px; padding: 10px 16px; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-app] > .ui-icon { display: none; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__mark { display: block; color: var(--ss-lock-ground); font: 400 var(--ss-text-display)/1.1 var(--ss-font-study-japanese, var(--ss-font-reading)); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__mark.is-icon > .ui-icon { display: block; width: 1em; height: 1em; }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-app] > span:last-child { color: var(--ss-color-ink); font: 500 var(--ss-text-base)/1.2 var(--ss-font-reading); }
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__chips,
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__menu [data-phone-nav-action="settings"] { grid-column: 1 / -1; margin: 0; }
  /* The profile and points boxes are raised paper tiles like the apps above them, not flat fields. */
  :root[data-skin="keepsake"]:is([data-palette="room-tan"], [data-palette="paper-crane"], [data-palette="fuji-pink"]) .ui-phone-nav__chip { justify-items: start; min-height: 56px; padding: 8px 14px; border: 2px solid var(--ss-lock-ground); border-radius: 6px; background: var(--ss-color-paper); box-shadow: var(--ss-button-shadow-hard); }
}

/* The first-day quest on Home (modules/shell/phone-home.mjs, Emily's design, 18 Oct): a raised card under the greeting with
   its band ("First day はじめの日", how many of 5 are done), the five steps as rows with their tick boxes (the next one on
   the band's colour), and a dashed line over "Gift at the end" and "I know my way around". The same card on both sizes. */
.ui-first-day:not([hidden]) { display: grid; flex: none; border: 2px solid var(--ss-lock-ground); border-radius: 6px; color: var(--ss-color-ink); background: var(--ss-color-paper); box-shadow: var(--ss-v94-raise, var(--ss-button-shadow-hard, var(--ss-shadow-soft))); }
.ui-first-day__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-radius: 4px 4px 0 0; color: var(--ss-strip-calendar-ink, var(--ss-color-ink)); background: var(--ss-strip-calendar, var(--ss-color-bg)); }
.ui-first-day__head > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.ui-first-day__title { color: var(--ss-v94-icon-ink, var(--ss-color-ink)); font: 400 var(--ss-text-title)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); }
.ui-first-day__title-ja { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.2 var(--ss-font-jp); }
.ui-first-day__count { flex: none; color: var(--ss-v94-icon-ink, var(--ss-color-ink)); font: 400 var(--ss-text-base)/1 var(--ss-font-pixel-title, var(--ss-font-display)); }
.ui-first-day__rows { display: grid; gap: 2px; margin: 0; padding: 8px 10px 6px; list-style: none; }
.ui-first-day__rows[hidden], .ui-first-day__foot[hidden] { display: none; }
.ui-first-day__row { display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 4px; color: var(--ss-color-ink); background: none; font: 500 var(--ss-text-base)/1.3 var(--ss-font-reading); text-align: start; cursor: pointer; }
.ui-first-day__row.is-next { background: var(--ss-strip-calendar, var(--ss-color-bg)); font: 700 var(--ss-text-base)/1.3 var(--ss-font-reading); }
.ui-first-day__row.is-done { color: var(--ss-color-ink-soft); }
.ui-first-day__row:focus-visible { outline: 2px solid var(--ss-role-focus, var(--ss-color-purple-dark)); outline-offset: 1px; }
.ui-first-day__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 14px; padding: 6px 0 8px; border-top: 1px dashed var(--ss-color-border-soft); color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.3 var(--ss-font-reading); }
.ui-first-day__foot.is-gift { padding-top: 10px; border-top: 0; color: var(--ss-color-ink); font: 600 var(--ss-text-base)/1.3 var(--ss-font-reading); }
.ui-first-day__skip { min-height: 36px; padding: 0 2px; border: 0; color: var(--ss-v94-icon-ink, var(--ss-color-ink)); background: none; font: 600 var(--ss-text-xs)/1.3 var(--ss-font-reading); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ui-first-day__open.ui-control-button { min-height: 40px; padding: 4px 14px; }
@media (min-width: 721px) and (orientation: landscape) {
  .ui-phone-home__page > .ui-first-day { margin: 4px 16px 0; }
}

/* Day 1 done! (modules/shell/first-day-reward.mjs): the gift in the brand's game box over a dimmed Home: the crane, the two
   gifts on paper with a tan edge, then Later and Put it in my Room in tan. */
.ui-first-day-reward:not([hidden]) { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.ui-first-day-reward[hidden], .ui-first-day-reward [hidden] { display: none; }
.ui-first-day-reward__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ss-focus-veil) 45%, transparent); }
.ui-first-day-reward__box { position: relative; display: grid; justify-items: center; gap: 10px; box-sizing: border-box; width: min(340px, 100%); padding: 14px 10px 12px; border: 8px solid transparent; border-image: url("/ui/assets/textbox/game-box-9slice@1x.png") 8 fill / 8px / 0 stretch; image-rendering: pixelated; color: var(--ss-game-box-text); text-align: center; }
@media (min-resolution: 2dppx) { .ui-first-day-reward__box { border-image: url("/ui/assets/textbox/game-box-9slice@2x.png") 16 fill / 8px / 0 stretch; } }
@media (min-resolution: 3dppx) { .ui-first-day-reward__box { border-image: url("/ui/assets/textbox/game-box-9slice@3x.png") 24 fill / 8px / 0 stretch; } }
.ui-first-day-reward__crane { width: 58px; height: 54px; image-rendering: pixelated; }
.ui-first-day-reward__box > h2 { margin: 0; font: 400 calc(var(--ss-text-title) * 1.4)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); }
.ui-first-day-reward__line { margin: 0; white-space: pre-line; font: 500 var(--ss-text-base)/1.4 var(--ss-font-reading); }
.ui-first-day-reward__gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.ui-first-day-reward__gift { display: grid; place-content: center; justify-items: center; gap: 2px; min-height: 76px; padding: 8px 6px; box-sizing: border-box; border: 2px solid var(--ss-game-box-highlight); border-radius: 4px; color: var(--ss-color-ink); background: var(--ss-game-box-text); }
.ui-first-day-reward__gift > strong { font: 600 var(--ss-text-base)/1.2 var(--ss-font-reading); }
.ui-first-day-reward__gift > strong.is-big { font: 400 var(--ss-text-title)/1 var(--ss-font-pixel-title, var(--ss-font-display)); }
.ui-first-day-reward__gift > small { color: var(--ss-color-ink-soft); font: 500 var(--ss-text-xs)/1.2 var(--ss-font-reading); }
.ui-first-day-reward__dots { display: flex; gap: 4px; margin-bottom: 4px; }
.ui-first-day-reward__dots > i { width: 8px; height: 8px; }
.ui-first-day-reward__dots > [data-dot="plum"] { background: var(--ss-game-box-fill); }
.ui-first-day-reward__dots > [data-dot="pink"] { background: var(--ss-crane-pink); }
.ui-first-day-reward__dots > [data-dot="sage"] { background: var(--ss-crane-sage); }
.ui-first-day-reward__dots > [data-dot="lilac"] { background: var(--ss-crane-lilac); }
.ui-first-day-reward__dots > [data-dot="sky"] { background: var(--ss-crane-sky); }
.ui-first-day-reward__dots > [data-dot="butter"] { background: var(--ss-crane-butter); }
.ui-first-day-reward__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; width: 100%; margin-top: 2px; }
.ui-first-day-reward__actions.is-done { grid-template-columns: minmax(0, 1fr); }
.ui-first-day-reward__actions > .ui-control-button { min-height: 44px; padding: 4px 14px; border: 2px solid var(--ss-game-box-line); border-radius: 4px; color: var(--ss-game-box-line); background: var(--ss-game-box-text); box-shadow: 0 3px 0 var(--ss-game-box-line); font: 400 var(--ss-text-base)/1.1 var(--ss-font-pixel-title, var(--ss-font-display)); }
.ui-first-day-reward__actions > .ui-first-day-reward__take { background: var(--ss-game-box-highlight); }
.ui-first-day-reward__actions > .ui-control-button:focus-visible { outline: 2px solid var(--ss-game-box-text); outline-offset: 2px; }