@font-face {
  font-family: "Pocket Pixel JP";
  src: url("./fonts/PixelMplus12-Regular-journal.woff2") format("woff2");
  font-display: swap;
}

.ui-pixel-text {
  -webkit-font-smoothing: none;
  font-smooth: never;
}

@font-face {
  font-family: "Pocket Pixel JP";
  src: url("./fonts/PixelMplus12-Bold-journal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pocket Pixel Display";
  src: url("./fonts/PixelifySans-400-latin.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Pocket Pixel Title"; /* Jersey 15 (OFL, fonts/OFL-Jersey15.txt): the v94 looks' titles, section labels and big buttons, never under 16px, never numerals or Japanese */
  src: url("./fonts/Jersey15-latin.woff2") format("woff2");
  font-display: swap;
  size-adjust: 125%; /* as phone build v94 sets it: Jersey 15 draws small for its size */
}

@font-face {
  font-family: "Pocket Chrome";
  src: url("./fonts/CourierPrime-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pocket Chrome";
  src: url("./fonts/CourierPrime-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pocket Pixel Display";
  src: url("./fonts/PixelifySans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Clean's serif, with Iowan Old Style's line height so shipped and system text take the same room. */
@font-face {
  font-family: "Charis SIL";
  src: url("./fonts/CharisSIL-400-latin.woff2") format("woff2");
  font-weight: 400;
  ascent-override: 103.6%;
  descent-override: 32.9%;
  line-gap-override: 0%;
  font-display: swap;
}

@font-face {
  font-family: "Charis SIL";
  src: url("./fonts/CharisSIL-700-latin.woff2") format("woff2");
  font-weight: 700;
  ascent-override: 103.6%;
  descent-override: 32.9%;
  line-gap-override: 0%;
  font-display: swap;
}

:root {
  color-scheme: light;

  --ss-text-scale: 1;

  --ss-color-editor-move: #b42318;
  --ss-color-stage: #ead9d1;
  --ss-color-bg: #fcf6ef;
  --ss-color-shell: #f8ede3;
  --ss-color-paper: #fffaf4;
  --ss-color-surface: #fcf6ef;
  --ss-color-panel: #fffaf4;
  --ss-color-ink: #3b2b2e;
  --ss-color-ink-soft: #856e70;
  --ss-color-ink-faint: #b7a3a0;
  --ss-color-border: #70565b;
  --ss-color-border-soft: rgba(112, 86, 91, 0.68);
  --ss-language-tab-frame: #755c62;
  --ss-language-tab-shadow: inset 2px 2px 0 var(--ss-color-input), inset -2px -2px 0 #b99d95, 2px 3px 0 rgba(91, 63, 61, .42);
  --ss-color-tan-border: #9a7777;
  --ss-color-tan-border-soft: #d9c7bf;
  --ss-color-pink: #f7b5c5;
  --ss-color-pink-strong: #b85876;
  --ss-color-pink-soft: #f8ccd8;
  --ss-color-dock-selected: var(--ss-color-pink);
  --ss-color-purple: #6f719f;
  --ss-color-purple-light: #797aa9;
  --ss-color-purple-dark: #51476f;
  --ss-color-purple-soft: #eee8f7;
  --ss-color-green: #87a66f;
  --ss-color-green-strong: #4d633d;
  --ss-color-green-soft: #cfe0b8;
  /* v94's flashcard ratings, the same in every look (palette v3: pink, butter, sage) */
  --ss-rating-dont-know: #f7b5c5;
  --ss-rating-still-learning: #f2c46d;
  --ss-rating-got-it: #a9c48e;
  /* v94's Unread mark on a waiting letter (palette v3: terraSoft) */
  --ss-mail-unread: #d98b6a;
  --ss-color-terra-soft: #d98b6a;
  /* Delete, discard, archive and reset (the owner's rule): palette v3 app.brick, its edge app.brickEdge */
  --ss-role-destructive: #9b4a3e;
  --ss-role-destructive-edge: #6e2f27;
  /* The writing-sheet cross in a kanji's practice square (KANJI-BOX): palette v3 tan, drawn at half strength */
  --ss-guide-tan: #d9a873;
  /* Palette v3's six crane colours, always in this order: cream, pink, sage, lilac, sky, butter (crane.colourRow). Journal's
     passcode slots fill in this order as she types. */
  --ss-crane-cream: #f3e6cf;
  --ss-crane-pink: #f7b5c5;
  --ss-crane-sage: #a9c48e;
  --ss-crane-lilac: #c9bfdc;
  --ss-crane-sky: #a9c0dc;
  --ss-crane-butter: #f2c46d;
  --ss-color-mint: #8cc1b8; /* palette v3 accents.mint */
  /* The brand's game box (pocket-study-social/brand/textbox, owner 12 Oct) and the videos' "look here" focus, for the hints
     and the first-day reward (packages/ui/hint.mjs, Emily 18 Oct). Fixed art colours from palette v3, the same in every look. */
  --ss-game-box-fill: #51476f;
  --ss-game-box-text: #fffaf4;
  --ss-game-box-second: #f3e6cf;
  --ss-game-box-quiet: #c9bfdc;
  --ss-game-box-highlight: #d9a873;
  --ss-game-box-line: #2a1f22;
  --ss-focus-line: #fbf2e2;
  --ss-focus-veil: #2a1f22;
  /* The colours of the desktop-wide pixel scenes' side bands (Pixel, 16 Oct). Each is named by its hex so it can be found in the scene's
     json. They are the art's own colours, fixed: a look may repaint the palette tokens, but never a picture. */
  --ss-scene-161a3b: #161a3b;
  --ss-scene-1f2550: #1f2550;
  --ss-scene-283070: #283070;
  --ss-scene-2c336a: #2c336a;
  --ss-scene-3d3557: #3d3557;
  --ss-scene-3e3658: #3e3658;
  --ss-scene-51476f: #51476f;
  --ss-scene-5f7ca6: #5f7ca6;
  --ss-scene-6f8f5a: #6f8f5a;
  --ss-scene-6f8fb8: #6f8fb8;
  --ss-scene-7d72a0: #7d72a0;
  --ss-scene-8eaad0: #8eaad0;
  --ss-scene-8eab73: #8eab73;
  --ss-scene-a9c0dc: #a9c0dc;
  --ss-scene-a9c48e: #a9c48e;
  --ss-scene-aea2c8: #aea2c8;
  --ss-scene-c9bfdc: #c9bfdc;
  --ss-scene-cddfb8: #cddfb8;
  --ss-scene-d3e0ef: #d3e0ef;
  --ss-scene-dcab52: #dcab52;
  --ss-scene-e2cfae: #e2cfae;
  --ss-scene-e4ddef: #e4ddef;
  --ss-scene-e597ad: #e597ad;
  --ss-scene-f0bea5: #f0bea5;
  --ss-scene-f3e6cf: #f3e6cf;
  --ss-scene-f7b5c5: #f7b5c5;
  --ss-scene-f8dd9f: #f8dd9f;
  --ss-scene-fbd6df: #fbd6df;
  --ss-scene-fbf2e2: #fbf2e2;
  --ss-scene-fffaf4: #fffaf4;
  /* The plum lock pages (v94's lock, the desktop's D077 to D080), the same in every look: the plum ground, the crane's lit
     cream for its words and outlines, navy under its raised keys, and palette v3 tan under its cream main button. */
  --ss-lock-ground: #51476f;
  --ss-lock-ink: #fbf2e2;
  --ss-lock-raise: #1f2550;
  --ss-lock-main-edge: #d9a873;
  /* Settings' On/Off switch on a computer (the desktop's D014, D076): On is palette v3 tan with a navy square. */
  --ss-switch-on: #d9a873;
  --ss-switch-on-mark: #1f2550;
  --ss-color-shadow: #493330;
  --ss-color-title: #fff7f1;
  --ss-color-input: #fff;
  --ss-color-backdrop: rgba(59, 43, 46, 0.58);

  /* Mail's letter is paper art and keeps its colours in every skin and palette. The band's edge is Deep rose beside the
     band art; the band's navy and its rim's mauve are the band art's own, for where the art itself can't show. */
  --ss-mail-band-edge: #93546b;
  --ss-mail-band-navy: #25426b;
  --ss-mail-band-rim: #bb9196;
  /* The seasonal postmark's wine ink, sampled from the owner's four postmarks (#8b3f59 to #92435e), for the date in its
     ring, the cancellation waves beside it, the envelope's 〒 and postcode boxes, and the divider under her name. */
  --ss-mail-postmark-ink: #8e425c;
  /* Each season's paper hue: a quarter of it mixed into the skin's paper tints the letter sheet (below). */
  --ss-mail-hue-spring: #ebd2c8;
  --ss-mail-hue-summer: #b3d2ec;
  --ss-mail-hue-autumn: #e3d6bc;
  --ss-mail-hue-winter: #bfd6f0;
  --ss-font-letter: "Charis SIL", Georgia, serif;
  /* The 〆 that seals the envelope's back is brushed ink, so it is set in the device's Mincho in every skin. */
  --ss-font-seal: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  /* Decks' warm paint, one token per value so a palette (skins/palettes.css) can recolour it; Keepsake and Clean keep these. */
  --ss-decks-field-edge: #8e7374;
  --ss-decks-dialog-outline: #35252d;
  --ss-decks-dialog-shade: #9a7777;
  --ss-decks-rule: #d5bdb4;
  --ss-decks-card-field-edge: #785e65;
  --ss-decks-card-field-shade: #dfccc3;
  --ss-decks-field-shade: #e1d0c8;
  --ss-decks-reading-ink: #765166;
  --ss-decks-reading-fill: #fff4f7;
  --ss-decks-text-ink: #704257;
  --ss-decks-heading-ink: #75465a;
  --ss-decks-choice-edge: #927678;
  /* Journal's warm paint, one token per value so a palette (skins/palettes.css) can recolour it; Keepsake and Clean keep these. */
  --ss-journal-rail-edge: #dac6bb;
  --ss-journal-rail-divider: #ddcbc0;
  --ss-journal-date-divider: #e3d1c8;
  --ss-journal-card-ink: #594449;
  --ss-journal-card-off-edge: #d8cbc4;
  --ss-journal-card-off-fill: #f5eee8;
  --ss-journal-date-ink: #897277;
  --ss-journal-rail-note: #9a7e80;
  --ss-journal-empty-ink: #826b70;
  --ss-journal-next-ink: #795767;
  --ss-journal-popover-edge: #b66a85;
  --ss-journal-popover-shade: #dcbfc0;
  --ss-journal-popover-heading: #694453;
  --ss-journal-popover-note: #987f82;
  --ss-journal-popover-rule: #ead7cc;
  --ss-journal-popover-close-edge: #c7a0aa;
  --ss-journal-popover-close-ink: #754356;
  --ss-journal-popover-close-fill: #fff5f4;
  --ss-journal-feeling-edge: #d8c4bb;
  --ss-journal-feeling-ink: #6d555d;
  --ss-journal-feeling-note: #91787d;
  --ss-journal-phone-frame: #49363d;
  --ss-journal-phone-shade: #aa8883;
  --ss-journal-phone-nav-edge: #80636a;

  --ss-color-accent: var(--ss-color-purple);
  --ss-color-accent-strong: var(--ss-color-purple-dark);
  --ss-color-accent-soft: var(--ss-color-purple-soft);
  --ss-color-on-accent: var(--ss-color-title);

  --ss-border-weight-outer: 2px;
  --ss-border-weight-inner: 1px;
  --ss-border: var(--ss-border-weight-outer) solid var(--ss-color-border);
  --ss-border-light: var(--ss-border-weight-inner) solid var(--ss-color-border-soft);
  --ss-panel-outline: 1px solid var(--ss-color-border);

  --ss-shadow: 2px 3px 0 rgba(73, 51, 48, 0.42);
  --ss-shadow-soft: 1px 2px 0 rgba(73, 51, 48, 0.24);
  --ss-shadow-lifted: 3px 3px 0 rgba(73, 51, 48, 0.9), 7px 8px 14px rgba(73, 51, 48, 0.3);
  --ss-panel-shadow-soft: inset 1px 1px 0 var(--ss-color-input), 2px 3px 0 rgba(73, 51, 48, .12);
  --ss-control-shadow-soft: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(73,51,48,.16), 1px 2px 0 rgba(48,58,59,.22);
  --ss-titlebar-shadow: inset 1px 1px 0 #8a8bb8, inset -1px -1px 0 #4c4d78, 0 1px 0 #d9c7bf;

  /* Room's original hard-edged window and control paint. */
  --ss-window-outline: var(--ss-color-ink);
  --ss-bevel-light: #fff4ec;
  --ss-bevel-shade: var(--ss-color-tan-border);
  --ss-titlebar-bevel-light: #8279a2;
  --ss-titlebar-bevel-shade: #40375f;
  --ss-shadow-hard: 3px 3px 0 rgba(73, 51, 48, 0.35);
  --ss-button-shadow-hard: inset 1px 1px 0 var(--ss-bevel-light), inset -1px -1px 0 var(--ss-bevel-shade), 2px 2px 0 rgba(73, 51, 48, 0.42);
  --ss-button-shadow-secondary: inset 1px 1px 0 var(--ss-bevel-light), inset -1px -1px 0 var(--ss-bevel-shade);
  --ss-button-shadow-pressed: inset 1px 1px 0 var(--ss-bevel-shade), inset -1px -1px 0 var(--ss-bevel-light);
  --ss-press-shift-lg: 2px;
  --ss-press-shift-sm: 1px;
  --ss-window-bevel: inset 2px 2px 0 var(--ss-bevel-light), inset -2px -2px 0 var(--ss-bevel-shade);
  --ss-titlebar-bevel: inset 1px 1px 0 var(--ss-titlebar-bevel-light), inset -1px -1px 0 var(--ss-titlebar-bevel-shade), 0 -2px 0 var(--ss-color-purple-dark);
  --ss-panel-bevel: inset 1px 1px 0 var(--ss-bevel-light);
  --ss-field-bevel: inset 2px 2px 0 var(--ss-color-tan-border-soft), inset -1px -1px 0 var(--ss-bevel-light);
  --ss-close-face: #f7d4df;
  --ss-disabled-face: #c9c6c2;
  --ss-disabled-ink: #77706e;
  --ss-disabled-outline: #8f8985;
  --ss-select-chevron: var(--ss-color-ink);

  --ss-radius-xs: 1px;
  --ss-radius-sm: 3px;
  --ss-radius-md: 5px;
  --ss-radius-shell: 5px;
  --ss-radius-panel: 3px;
  --ss-radius-button: 3px;
  /* House style corners (17 Oct): a control or card 6px, a dialog 10px, a sheet's top 16px. */
  --ss-radius-control: 6px;
  --ss-radius-dialog: 10px;
  --ss-radius-sheet: 16px;
  /* One motion for every change of screen or step (Emily, 18 Oct: smooth transitions are vital): a 220 ms ease-out
     crossfade, the new one sliding in 16px from the side it comes from. With reduced motion it is a plain 120 ms fade. */
  --ss-motion-duration: 220ms;
  --ss-motion-ease: cubic-bezier(.2, .7, .2, 1);
  --ss-motion-shift: 16px;

  --ss-space-1: calc(6px * var(--ss-text-scale));
  --ss-space-2: calc(10px * var(--ss-text-scale));
  --ss-space-3: calc(14px * var(--ss-text-scale));
  --ss-space-4: calc(18px * var(--ss-text-scale));
  --ss-space-5: calc(24px * var(--ss-text-scale));
  --ss-space-6: calc(34px * var(--ss-text-scale));

  --ss-text-xs: calc(0.8125rem * var(--ss-text-scale));
  --ss-text-base: calc(1rem * var(--ss-text-scale));
  --ss-text-title: calc(1.375rem * var(--ss-text-scale));
  --ss-text-display: calc(2.25rem * var(--ss-text-scale));
  --ss-text-hero: calc(2.925rem * var(--ss-text-scale));
  /* Text fields on touch screens: iOS Safari zooms the page when a focused field's text is under 16px, so a field is base or 1rem, whichever is larger. */
  --ss-text-field: max(1rem, var(--ss-text-base));
  --ss-text-sm: var(--ss-text-xs);
  --ss-text-lg: var(--ss-text-title);
  --ss-text-xl: var(--ss-text-display);
  --ss-text-dock: 0.8125rem;
  --ss-text-profile-badge: 0.6875rem;
  --ss-text-profile-badge-mobile: 0.625rem;
  --ss-text-window-title: 1.5rem;
  --ss-text-window-title-mobile: 1.25rem;
  --ss-font-display: "Pocket Pixel Display", "Pocket Pixel JP", monospace;
  /* House style (17 Oct): the pixel title face (Jersey 15) on the main button, tabs and titles, in every look; every other
     button word in the reading face. */
  --ss-font-pixel-title: "Pocket Pixel Title", var(--ss-font-reading);
  --ss-font-pixel: var(--ss-font-display);
  --ss-font-retro: "Pocket Pixel JP", "Yu Gothic", monospace;
  --ss-font-chrome: "Pocket Chrome", "Courier New", var(--ss-font-jp);
  --ss-font-window-title: var(--ss-font-pixel-title);
  --ss-line-window-title: 1.25;
  --ss-font-ui: var(--ss-font-retro);
  --ss-font-reading: ui-rounded, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --ss-font-body: var(--ss-font-reading);
  --ss-font-jp: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;

  --ss-control-height: calc(42px * var(--ss-text-scale));
  --ss-secondary-icon-button-size: 32px;
  --ss-panel-padding: calc(16px * var(--ss-text-scale));
  --ss-panel-header-gap: calc(12px * var(--ss-text-scale));
  --ss-icon-size: 25px;

  /* Colour roles. Each skin (keepsake.css, clean.css) sets the value on its skin root so the
     role resolves against that skin's palette; skins without roles keep their old paint through
     each rule's fallback. Pink = you: your choice and where you are. Lavender = the app
     answering you, and the material you study. Paper and tan for everything else.
     --ss-role-selected / -selected-edge  selected tab, option or choice (fill / edge)
     --ss-role-selected-soft              the picked row or day when a full fill is too loud
     --ss-role-primary / -primary-edge    the one primary button on a screen
     --ss-role-star                       stars and bookmarks
     --ss-role-highlight                  the word being taught, marked in a sentence
     --ss-role-pressed-glyph              a bare glyph while it is pressed (Read's side arrows)
     --ss-role-hover / -hover-edge        the wash and edge when the pointer is over a control
     --ss-role-focus                      the keyboard focus ring and text-field focus edge
     --ss-role-progress-done              steps already done, and audio already played
     --ss-role-progress-current           the step you are on now, and the playhead
     --ss-role-tag / -tag-ink             small labels, counts and chips (fill / text)
     --ss-role-notice / -notice-edge      the app telling you something (toasts, notes)
     --ss-role-study-card / -study-card-edge  a card you study from (question, answer, flashcard)
     --ss-role-right / -right-edge        a right answer (green)
     --ss-role-wrong / -wrong-edge        a wrong answer (red)
     --ss-role-accent                     warmth only: thin rules and small marks, never a fill,
                                          never on a control (Decks only for now) */

  /* The answer look: how right and wrong read everywhere (Decks' answer comparison, Check Japanese, Mail),
     drawn by .ui-answer-box and .ui-answer-ink in primitives.css. The values here are the bevelled paper box;
     each skin sets its own on its skin root. --ss-answer-bevel is left unset for the bevel drawn from the
     -bevel colours below; a flat skin sets it to none. */
  --ss-answer-right-ink: #47704e;
  --ss-answer-right-edge: #73916b;
  --ss-answer-right-paper: #f0f6e8;
  --ss-answer-right-bevel: #c4d4b8;
  --ss-answer-wrong-ink: var(--ss-role-destructive); /* brick, as every error (house style, 17 Oct) */
  --ss-answer-wrong-edge: var(--ss-role-destructive);
  --ss-answer-wrong-paper: #fffaf7;
  --ss-answer-wrong-bevel: #d9beb7;
  --ss-answer-box-ink: #3d3035;
  --ss-answer-box-edge: #a58d88;
  --ss-answer-box-paper: #fffaf7;
  --ss-answer-box-bevel: #d9beb7;
  --ss-answer-bevel-light: #fff;
  --ss-answer-edge-width: 2px;
  --ss-answer-radius: 0;
  --pink: var(--ss-color-pink);
  --pink-edge: var(--ss-color-pink-strong);
  --ink: var(--ss-color-ink);
  --paper: var(--ss-color-paper);
  --muted: var(--ss-color-ink-soft);
  --purple: var(--ss-color-purple);
  --purple-dark: var(--ss-color-purple-dark);
  --line: var(--ss-color-border);
}

/* The letter sheet's seasonal paper, worked out wherever a skin sets its paper so every skin and palette keeps the same
   strength. On Keepsake's paper (#fffaf4) these are the owner's letter papers exactly: spring #faf0e9, summer #ecf0f2,
   autumn #f8f1e6, winter #eff1f3. */
:root, [data-skin] {
  --ss-mail-paper-spring: color-mix(in srgb, var(--ss-mail-hue-spring) 25%, var(--ss-color-paper));
  --ss-mail-paper-summer: color-mix(in srgb, var(--ss-mail-hue-summer) 25%, var(--ss-color-paper));
  --ss-mail-paper-autumn: color-mix(in srgb, var(--ss-mail-hue-autumn) 25%, var(--ss-color-paper));
  --ss-mail-paper-winter: color-mix(in srgb, var(--ss-mail-hue-winter) 25%, var(--ss-color-paper));
}

:root[data-text-size="small"] { --ss-text-scale: 0.875; }
:root[data-text-size="standard"] { --ss-text-scale: 1; }
:root[data-text-size="large"] { --ss-text-scale: 1.125; }
:root[data-text-size="extra-large"] { --ss-text-scale: 1.3; }
@media (prefers-reduced-motion: reduce) {
  :root { --ss-motion-duration: 120ms; --ss-motion-shift: 0px; }
}