/* ── Foundations ─────────────────────────────────────────────
   The passport's own world, carried through the app: aged parchment,
   the deep ink-blue its map is printed in, and the red-brown of a
   rubber stamp. Colour otherwise still belongs to the subjects, so
   they stay the thing you recognise at a glance.               */

:root {
  --paper:      #F4EEE1;   /* parchment */
  --card:       #FCF8EF;
  --ink:        #22303F;   /* passport ink */
  --ink-2:      #5C6875;
  --ink-3:      #97A1AD;
  --line:       #E4DAC8;
  --line-soft:  #EEE7D8;
  --done:       #3F7D5F;
  --late:       #A56B33;
  --stamp:      #9A4A38;   /* the red-brown of an inked stamp */
  --tint:       14%;       /* subject colour over parchment */
  --on-ink:     #FBF7EE;

  /* The notebook page a reminder is written on. */
  --leaf:       #FBF7ED;   /* the sheet itself */
  --leaf-rule:  #DCE2EC;   /* the ruled lines */
  --leaf-red:   #E0A6A0;   /* the margin down the side */
  --leaf-hole:  #E9E2D4;   /* punched, with the paper showing through */
  --leaf-pencil:#98A5BB;   /* what is written in the margins */

  --font-script: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', cursive;
  --font-hand:   'Bradley Hand', 'Segoe Print', cursive;

  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino,
                  'Book Antiqua', Georgia, 'Times New Roman', serif;

  --r-card:     18px;
  --r-pill:     999px;
  --shadow:     0 1px 2px rgba(56,44,28,.06), 0 10px 28px -16px rgba(56,44,28,.30);
  --shadow-lift:0 2px 6px rgba(56,44,28,.09), 0 18px 40px -18px rgba(56,44,28,.38);

  --ease:       cubic-bezier(.32,.72,0,1);
  --spring:     cubic-bezier(.34,1.32,.64,1);

  --gutter:     20px;
  --tabbar-h:   62px;
  /* How much of the desk shows at the foot of the homework screen. The
     picture is 1.68 times as wide as it is tall, so at full width it stands
     59.5vw high — measured off the width, because that is what sets how big
     the books and the cup look. Capped against the height so a short screen
     is not all desk; the cap crops rather than shrinking them. */
  --desk-band:  min(59.5vw, 38vh);
  /* And how far clear of the tab bar it stands. Flush against it, the picture
     reads as tucked underneath. */
  --desk-lift:  12px;

  color-scheme: light;
}

/* Dark tokens apply in two situations: the viewer's OS is dark and they haven't
   overridden it, or they've explicitly asked for dark. Same values, both gates. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #13171C;
    --card:      #1B2027;
    --ink:       #EFE7D7;
    --ink-2:     #9AA3AE;
    --ink-3:     #6B7480;
    --line:      #2A313A;
    --line-soft: #232931;
    --done:      #5FA87F;
    --late:      #C99150;
    --stamp:     #C4705A;
    --tint:      24%;
    --on-ink:    #12161B;
    --leaf:      #1A1F26;
    --leaf-rule: #2C3440;
    --leaf-red:  #7A4F4C;
    --leaf-hole: #11151A;
    --leaf-pencil:#6C7A90;
    --shadow:    0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.75);
    --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:     #13171C;
  --card:      #1B2027;
  --ink:       #EFE7D7;
  --ink-2:     #9AA3AE;
  --ink-3:     #6B7480;
  --line:      #2A313A;
  --line-soft: #232931;
  --done:      #5FA87F;
  --late:      #C99150;
  --stamp:     #C4705A;
  --tint:      24%;
  --on-ink:    #12161B;
  --leaf:      #1A1F26;
  --leaf-rule: #2C3440;
  --leaf-red:  #7A4F4C;
  --leaf-hole: #11151A;
  --leaf-pencil:#6C7A90;
  --shadow:    0 1px 2px rgba(0,0,0,.45), 0 10px 28px -16px rgba(0,0,0,.75);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55), 0 18px 40px -18px rgba(0,0,0,.85);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

.ico {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }


/* ── App frame ───────────────────────────────────────────── */

.app, .subject-page {
  max-width: 540px;
  margin-inline: auto;
}

.view {
  padding: 0 var(--gutter);
  padding-top: calc(env(safe-area-inset-top) + 26px);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 40px);
  min-height: 100dvh;
  animation: view-in .22s var(--ease);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
}

.head { margin-bottom: 22px; }

.head h1 {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.1;
}

.head-sub {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 15px;
  letter-spacing: -.01em;
}

.section-title {
  margin: 34px 0 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.list { display: flex; flex-direction: column; gap: 8px; }

.card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.foot-note {
  margin-top: 12px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}


/* ── Homework row ────────────────────────────────────────────
   The card belongs to its subject: the name runs down the spine, the
   colour washes the whole card, the date says when it is for, and the
   circle waits on the right. */

/* The card carries the subject's own mark, then says what it is, what it is
   about, and when it is for — the date as a chip rather than a line of prose. */
.hw {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease), opacity .22s linear, box-shadow .2s var(--ease);
  touch-action: pan-y;
}

.hw:active { transform: scale(.985); }

/* Swipe-right-to-complete reveals a green field behind the card. */
.hw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--done) 24%, var(--card));
  opacity: 0;
  transition: opacity .16s linear;
  pointer-events: none;
}
.hw.is-swiping::before { opacity: 1; }

.hw-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 2px 14px 14px;
  cursor: pointer;
  text-align: left;
}

.hw-tile {
  width: 54px; height: 54px;
  border-radius: 16px;
  font-size: 21px;
}
.hw-tile .ico { width: 26px; height: 26px; }

.hw-words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hw-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hw-subject {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  line-height: 1.2;
  color: color-mix(in srgb, var(--sc) 76%, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* When it is for. Grey while that is a long way off, warmer as it closes in. */
.hw-when {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 8px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.hw-when .ico { width: 13px; height: 13px; stroke-width: 2; }
.hw.is-soon .hw-when {
  background: color-mix(in srgb, var(--stamp) 15%, transparent);
  color: var(--stamp);
}
.hw.is-late .hw-when {
  background: color-mix(in srgb, var(--late) 18%, transparent);
  color: var(--late);
}

.hw-title {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -.016em;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.hw-note {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* The circle. Big target, quiet until it matters. */
.check {
  --size: 28px;
  display: grid;
  place-items: center;
  width: 56px;
  flex: none;
  align-self: center;
}

.check-circle {
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: 1.9px solid color-mix(in srgb, var(--sc) 45%, var(--ink-3));
  background: color-mix(in srgb, var(--card) 55%, transparent);
  transition: border-color .16s var(--ease), background-color .16s var(--ease),
              transform .24s var(--spring);
  display: grid;
  place-items: center;
}

.check:active .check-circle { transform: scale(.86); }

.check-mark {
  width: 15px; height: 15px;
  stroke: var(--on-ink);
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.hw.is-done .check-circle {
  background: var(--done);
  border-color: var(--done);
  transform: scale(1.06);
}
.hw.is-done .check-mark { animation: draw .2s var(--ease) .02s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hw.is-done .hw-title,
.hw.is-done .hw-due { color: var(--ink-3); transition: color .3s ease; }
.hw.is-done .hw-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* Collapse out of the list once the tick has landed. */
.hw-slot { overflow: hidden; transition: height .19s var(--ease), opacity .16s linear; }
.hw-slot.is-leaving { opacity: 0; }

/* ── Empty states ────────────────────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 24px 40px;
  animation: view-in .26s var(--ease);
}

.empty-mark {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--done) 13%, transparent);
  color: var(--done);
  margin-bottom: 18px;
}
.empty-mark .ico { width: 28px; height: 28px; stroke-width: 2; }

.empty h2 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.02em;
}

.empty p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 15.5px;
}


/* Nothing left to do. The homework screen clears down to one sentence, one
   button, and a desk that has been tidied for the day. The picture bleeds to
   both edges and fades into the paper, so nothing frames it. */

.empty-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  /* The desk is behind the whole screen now, so this only has to stand clear
     of it — the same band, off the same figure, so the two cannot drift apart
     on a screen shaped differently from a phone. */
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
                   - 134px - var(--tabbar-h) - var(--desk-lift) - var(--desk-band));
  padding-bottom: 22px;
}

.empty-home-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-inline: var(--gutter);
  text-align: center;
  color: var(--ink);
}

/* The only move worth making, drawn as a target rather than a glyph. */
.empty-add {
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.6px solid color-mix(in srgb, var(--done) 44%, transparent);
  color: color-mix(in srgb, var(--done) 82%, var(--ink));
  transition: transform .24s var(--spring), background-color .2s var(--ease);
}
.empty-add .ico { width: 24px; height: 24px; stroke-width: 1.7; }
.empty-add:active {
  transform: scale(.9);
  background: color-mix(in srgb, var(--done) 12%, transparent);
}

/* The desk the homework sits on, whether there is any or not. It is fixed to
   the foot of the screen and the list scrolls over it, so it reads as the
   room the app is in rather than as one more thing in the column. The top
   fades into the paper so the photograph never ends on an edge. */
.desk-art {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--desk-lift));
  z-index: 0;
  width: 100%;
  /* A band of the photograph rather than the whole of it, so that what shows
     is the shelf of books, the cup and the plant — the foreground falls below
     the fold. Measured against the width, because that is what sets how big
     the things on the desk are; capped against the height so a short screen
     is not all desk. --desk-band is the same figure the cleared screen uses
     to know how much room to leave. */
  height: var(--desk-band);
  object-fit: cover;
  /* Anchored to the foot of the picture: the books, the cup and the plant
     stand on its bottom edge, and it is the wall above them that gets cut
     when a screen is too short. */
  object-position: 50% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  -webkit-user-drag: none;
  /* Soft at both ends. The top has always faded into the paper; the foot needs
     it too now that it no longer meets the tab bar — the desk surface is a few
     shades off the paper in daylight and a good deal lighter than it at night,
     so a hard edge there would read as a cut rather than a photograph. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 93%, transparent 100%);
}

.desk-art.is-ready { opacity: 1; }

/* Everything on the homework screen stands in front of it. */
#view-home .head,
#home-list { position: relative; z-index: 1; }

/* The scene is lit for a bright room; at night it dims down to the paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .desk-art {
    filter: brightness(.42) saturate(.72) contrast(1.06) opacity(.9);
  }
}
:root[data-theme="dark"] .desk-art {
  filter: brightness(.42) saturate(.72) contrast(1.06) opacity(.9);
}


/* ── Adding a reminder: a page out of a notebook ───────────
   Punched down the side, a red margin just inside the holes, and every field
   sitting on its own rule. The rules are the rows' own bottom borders rather
   than a background of lines, so nothing has to be nudged to make the writing
   sit on them — the row is the line.

   The handwriting is whatever script the phone already has. An iPhone has
   Snell Roundhand for the title and Bradley Hand for the margins, which is
   what the drawing uses; anything else falls back to its own cursive. No font
   is downloaded for it. */

.sheet-paper { background: var(--leaf); }
.sheet-paper .sheet-grip { background: var(--leaf-rule); }

.paper {
  position: relative;
  max-height: 86dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* One hole every row-height, so they keep step with the rules. */
.paper-holes {
  position: absolute;
  left: 15px;
  top: 62px;
  bottom: 8px;
  width: 13px;
  pointer-events: none;
  background-image: radial-gradient(circle at 6.5px 6.5px,
    var(--leaf-hole) 5.6px, transparent 6.2px);
  background-size: 13px 58px;
  background-repeat: repeat-y;
}

.paper-margin {
  position: absolute;
  left: 45px;
  top: 46px;
  bottom: 0;
  width: 1px;
  background: var(--leaf-red);
  opacity: .8;
  pointer-events: none;
}

.paper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px var(--gutter) 10px;
}

.paper-title {
  font-family: var(--font-script);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink);
}

.paper-btn {
  flex: none;
  border: 0;
  background: none;
  padding: 6px 2px;
  font-size: 16px;
  color: var(--ink);
  transition: opacity .18s var(--ease);
}
.paper-btn.is-save { font-weight: 700; }
.paper-btn:disabled { opacity: .32; }
.paper-btn:active { opacity: .5; }

/* Every row is a ruled line, and the writing sits on it. */
.paper-rule {
  position: relative;
  border-bottom: 1px solid var(--leaf-rule);
  padding: 8px var(--gutter) 9px 64px;
  min-height: 58px;
}
.paper-rule[hidden] { display: none; }

/* What someone has written in the margins of their own notebook. */
.paper-margins {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding-left: 64px;
}
.paper-margins i {
  font-family: var(--font-hand);
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--leaf-pencil);
  max-width: 45%;
}
.paper-margins .is-left  { transform: rotate(-4deg); }
.paper-margins .is-right {
  transform: rotate(3deg);
  text-align: right;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.paper-field { display: block; }

.paper-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: .035em;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.paper-field input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
}
.paper-field input:focus { outline: none; }
.paper-field input::placeholder { color: var(--ink-3); font-weight: 400; }

.paper-chips {
  display: flex;
  gap: 8px;
  padding-top: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.paper-chips::-webkit-scrollbar { display: none; }

.p-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--leaf-rule);
  background: transparent;
  font-size: 14px;
  color: var(--ink-2);
  transition: transform .18s var(--spring);
}
.p-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}
.p-chip.is-on .chip-dot { background: var(--on-ink); }
.p-chip:active { transform: scale(.94); }

.paper-foot {
  font-family: var(--font-hand);
  font-size: 12.5px;
  color: var(--leaf-pencil);
  padding: 13px var(--gutter) 2px 64px;
  transform: rotate(-3deg);
  transform-origin: left center;
}

/* A reminder can carry a line about itself now, the way homework does. */
.note-sub {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 1px;
}


/* ── Subjects ────────────────────────────────────────────── */

.subject-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 14px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-align: left;
  transition: transform .2s var(--ease);
}
.subject-row:active { transform: scale(.985); }

.subject-tile {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--sc) var(--tint), var(--card));
  color: var(--sc);
  flex: none;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.02em;
}
.subject-tile .ico { width: 21px; height: 21px; }

.subject-row-name {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subject-row-count {
  font-size: 15px;
  color: var(--ink-3);
  flex: none;
}

.subject-row .ico-chevron {
  width: 18px; height: 18px;
  color: var(--ink-3);
  opacity: .6;
  stroke-width: 2;
}


/* Subject detail, pushed over the tab bar */
.subject-page {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--paper);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: push-in .34s var(--ease);
}
@keyframes push-in {
  from { transform: translateX(18px); opacity: 0; }
}
.subject-page.is-leaving { animation: push-out .24s var(--ease) forwards; }
@keyframes push-out {
  to { transform: translateX(18px); opacity: 0; }
}

#subject-page-body {
  max-width: 540px;
  margin-inline: auto;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 48px);
}

.back-btn {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: calc(env(safe-area-inset-top) + 10px) 0 0 max(calc((100% - 540px)/2 + 12px), 12px);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
}
.back-btn .ico { width: 20px; height: 20px; stroke-width: 2; }

.subject-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0 24px;
}
.subject-hero .subject-tile { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; }
.subject-hero .subject-tile .ico { width: 25px; height: 25px; }
.subject-hero h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  min-width: 0;
  overflow-wrap: anywhere;
}




/* ── Onboarding ──────────────────────────────────────────── */


/* ── Buttons ─────────────────────────────────────────────── */

.btn-primary {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .18s var(--spring), opacity .2s ease;
}
.btn-primary:active { transform: scale(.975); }
.btn-primary:disabled { opacity: .28; pointer-events: none; }

.btn-ghost {
  display: grid;
  place-items: center;
  width: 54px;
  border-radius: 16px;
  background: var(--line-soft);
  color: var(--ink-2);
  flex: none;
}
.btn-danger:active { color: #C4553F; }


/* Floating add button */
.fab {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 18px);
  right: calc(max(calc((100% - 540px) / 2 + var(--gutter)), var(--gutter)) + 56px);
  z-index: 22;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-lift);
  transition: transform .22s var(--spring);
}
.fab .ico { width: 23px; height: 23px; stroke-width: 2.2; }
.fab:active { transform: scale(.9); }


/* ── Tab bar ─────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  display: flex;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  /* Bar spans the screen; the tabs stay over the content column. */
  padding-inline: max(calc((100% - 540px) / 2), 0px);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: .005em;
  transition: color .18s ease;
}
.tab .ico { width: 23px; height: 23px; }
.tab.is-active { color: var(--ink); }
.tab:active .ico { transform: scale(.9); transition: transform .15s var(--ease); }


/* ── Sheets ──────────────────────────────────────────────── */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20,19,17,.38);
  animation: fade-in .26s ease;
}
.scrim.is-leaving { animation: fade-out .22s ease forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  max-width: 540px;
  margin-inline: auto;
  background: var(--paper);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px -12px rgba(0,0,0,.28);
  animation: sheet-in .28s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-leaving { animation: sheet-out .2s var(--ease) forwards; }
@keyframes sheet-in { from { transform: translateY(101%); } }
@keyframes sheet-out { to { transform: translateY(101%); } }

.sheet-grip {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 9px auto 0;
}

.sheet-body { padding: 12px var(--gutter) 18px; }

.hw-note-input,
.hw-title {
  width: 100%;
  padding: 4px 2px 14px;
  border: 0;
  background: none;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.02em;
}
input.hw-title:focus { outline: none; }
input.hw-title::placeholder { color: var(--ink-3); }

.chips {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chips-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px var(--gutter) 4px;
  margin: 0 calc(var(--gutter) * -1);
  scroll-padding-inline: var(--gutter);
}
.chips-scroll::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-2);
  transition: box-shadow .16s var(--ease), background-color .16s ease,
              color .16s ease, transform .16s var(--spring);
}
.chip:active { transform: scale(.95); }

.chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sc);
  flex: none;
}

.chip.is-on {
  background: color-mix(in srgb, var(--sc) var(--tint), var(--card));
  box-shadow: inset 0 0 0 1.6px color-mix(in srgb, var(--sc) 46%, transparent);
  color: color-mix(in srgb, var(--sc) 88%, var(--ink));
}

.chip-due.is-on {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
}
.chip-due .ico { width: 16px; height: 16px; }

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}


/* ── Level card ──────────────────────────────────────────── */

.level-card {
  padding: 22px;
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
}

.level-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.level-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.026em;
}

.level-xp {
  font-size: 14px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.bar {
  margin-top: 14px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--done);
  transition: width .7s var(--ease);
}

.level-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-3);
}


/* ── History ─────────────────────────────────────────────── */

.day-title {
  margin: 20px 4px 8px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink-2);
}
.day-title:first-child { margin-top: 0; }

.done-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.done-row .ico-check {
  width: 17px; height: 17px;
  color: var(--done);
  stroke-width: 2.4;
  flex: none;
}

.done-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.done-subject {
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--sc);
}

.done-title {
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.done-time {
  font-size: 13.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}


/* ── Settings ────────────────────────────────────────────── */

.settings { overflow: hidden; }

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 16px;
  min-height: 58px;
}
.setting + .setting { border-top: 1px solid var(--line-soft); }

.setting-label {
  font-size: 16px;
  letter-spacing: -.012em;
}
.setting-label em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-3);
}

.switch {
  appearance: none;
  width: 50px; height: 30px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink-3) 40%, transparent);
  position: relative;
  flex: none;
  cursor: pointer;
  transition: background-color .24s var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
  transition: transform .26s var(--spring);
}
.switch:disabled { opacity: .4; cursor: default; }

/* Why the reminders can't be switched on, said where the switches are. */
.blocked {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--late) 11%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.blocked strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: color-mix(in srgb, var(--late) 72%, var(--ink));
}
.blocked span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.is-unavailable .setting-label { opacity: .55; }

.switch:checked { background: var(--done); }
.switch:checked::after { transform: translateX(20px); }

.time-input {
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: var(--line-soft);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.time-input:focus { outline: none; box-shadow: inset 0 0 0 1.6px var(--ink); }

/* The real date field, invisible but full-size over its chip, so a tap on the
   chip opens the phone's own date picker. */
.chip-date { position: relative; cursor: pointer; }

.chip-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  background: transparent;
  color: transparent;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.chip-date:focus-within {
  box-shadow: inset 0 0 0 1.8px var(--ink);
}


/* ── Toast ───────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 20px);
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 12px 12px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  box-shadow: var(--shadow-lift);
  white-space: nowrap;
  animation: toast-in .34s var(--spring);
}
.toast.is-leaving { animation: toast-out .22s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translate(-50%, 14px) scale(.94); } }
@keyframes toast-out { to   { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }

.toast-undo {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--on-ink) 16%, transparent);
  color: inherit;
  font-size: 14.5px;
  font-weight: 600;
}


/* ── Level up ────────────────────────────────────────────── */

.levelup {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  animation: fade-in .3s ease;
}
.levelup.is-leaving { animation: fade-out .3s ease forwards; }

.levelup-card {
  text-align: center;
  animation: pop .5s var(--spring);
}
@keyframes pop { from { opacity: 0; transform: scale(.82); } }

.levelup-ring {
  width: 104px; height: 104px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--done) 14%, transparent);
  box-shadow: inset 0 0 0 2.5px var(--done);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--done);
  font-variant-numeric: tabular-nums;
}

.levelup h2 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.028em;
}

.levelup p {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 16px;
}

.spark {
  position: fixed;
  z-index: 59;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Homework lists collapse their own spacing when a row leaves. */
.list-hw { gap: 0; }
.list-hw .hw-slot { box-sizing: border-box; padding-bottom: 8px; }


/* ── Bag: what to bring, and your own reminders ──────────── */

.chip-day { position: relative; min-width: 62px; justify-content: center; }
.chip-day.is-on { background: var(--ink); color: var(--on-ink); box-shadow: none; }

.today-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--done);
  margin-left: 2px;
}

.note-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 8px 13px 16px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.note-text {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.35;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.note-tag {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.note-del {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--ink-3);
}
.note-del .ico { width: 15px; height: 15px; stroke-width: 2; }
.note-del:active { background: var(--line-soft); color: var(--ink); }

.note-add { display: flex; gap: 8px; margin-top: 2px; }

.note-add input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 15.5px;
  letter-spacing: -.01em;
}
.note-add input:focus { outline: none; box-shadow: inset 0 0 0 1.8px var(--ink); }

.note-add button {
  flex: none;
  padding: 0 20px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 15px;
  font-weight: 600;
}


/* ── Timetable ───────────────────────────────────────────── */

.tt-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 20px);
  right: max(calc((100% - 540px) / 2 + var(--gutter)), var(--gutter));
  z-index: 22;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform .2s var(--spring);
}
.tt-btn .ico { width: 20px; height: 20px; }
.tt-btn:active { transform: scale(.9); }

.timetable {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  animation: tt-in .2s var(--ease);
}
.timetable.is-leaving { animation: tt-out .18s var(--ease) forwards; }
@keyframes tt-in  { from { opacity: 0; transform: scale(.98); } }
@keyframes tt-out { to   { opacity: 0; transform: scale(.98); } }

.tt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 18px) var(--gutter) 14px;
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
}

.tt-head h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.028em;
}

.tt-close {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--line-soft);
}
.tt-close .ico { width: 18px; height: 18px; stroke-width: 2; }

.tt-body {
  flex: 1;
  overflow: auto;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 28px);
  max-width: 900px;
  width: 100%;
  margin-inline: auto;
}

.tt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tt-grid {
  border-collapse: separate;
  border-spacing: 4px;
  min-width: 560px;
  width: 100%;
  table-layout: fixed;
}

.tt-grid th, .tt-grid td { padding: 0; }

.tt-grid thead th {
  padding: 6px 4px 8px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--ink-2);
  text-align: center;
}
.tt-grid thead th.is-today { color: var(--ink); }

.tt-day { display: block; }
.tt-day-he { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-3); }

.tt-corner { width: 74px; }

.tt-time {
  width: 74px;
  text-align: right;
  padding-right: 8px !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.tt-num {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}

.tt-grid tbody td {
  height: 52px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--sc) var(--tint), var(--card));
  vertical-align: middle;
  text-align: center;
  box-shadow: var(--shadow);
}

.tt-cell {
  display: block;
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: color-mix(in srgb, var(--sc) 78%, var(--ink));
  overflow-wrap: anywhere;
}

.tt-grid tbody td.tt-free {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--line-soft);
}

.tt-grid tbody td.is-today { box-shadow: var(--shadow), inset 0 0 0 1.8px color-mix(in srgb, var(--ink) 26%, transparent); }
.tt-grid tbody td.tt-free.is-today { box-shadow: inset 0 0 0 1.8px color-mix(in srgb, var(--ink) 16%, transparent); }


/* ── Packing lists ───────────────────────────────────────── */


/* ── Timetable preview ───────────────────────────────────── */


/* ── Reminders page ──────────────────────────────────────── */

.note-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.note-lesson {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--sc);
}


/* Five tabs need a little more room for their labels. */
.tab { font-size: 9.5px; }
.tab .ico { width: 22px; height: 22px; }


/* ── The bag, drawn ──────────────────────────────────────────
   The backpack in the middle, everything that goes in it around the outside.
   Nothing points at anything: what is on the page is what you take, and the
   picture reads at a glance without being told how. Each thing is its own
   picture placed by percentage, so the whole scene scales together; the words
   are HTML laid over it, so they stay real text at a real size and wrap when
   a day has a lot of subjects. */

.bag-scene {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 2px auto 0;
}

/* Every thing is a picture of its own, laid at its own spot, so each keeps
   its artwork exactly as drawn. */
.bag-pic {
  position: absolute;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 5px rgba(107, 91, 69, .18));
}



.bag-label {
  position: absolute;
  transform: translate(-50%, 0);
  width: max-content;
  max-width: 33%;
  text-align: center;
  pointer-events: none;
}
.bag-label.is-wide { max-width: 40%; }

/* The name sits in a soft wash of its own thing's colour. */
.bag-label b {
  display: inline-block;
  padding: 5px clamp(9px, 3vw, 13px);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tint) 26%, var(--card));
  font-size: clamp(11px, 3.25vw, 13.5px);
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--ink);
}

/* What it is for goes under the chip, plainly. */
.bag-label i {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: clamp(9.5px, 2.75vw, 11.5px);
  line-height: 1.3;
  letter-spacing: -.004em;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* Everything arrives, one after another, and then stays put. */
.bag-pic { animation: bag-in .4s var(--ease) backwards; }
.bag-thing:nth-of-type(2) { animation-delay: .06s; }
.bag-thing:nth-of-type(3) { animation-delay: .12s; }
.bag-thing:nth-of-type(4) { animation-delay: .18s; }
.bag-thing:nth-of-type(5) { animation-delay: .24s; }
.bag-thing:nth-of-type(6) { animation-delay: .3s; }
@keyframes bag-in { from { opacity: 0; } }


/* ── The list under it, for your own notes ────────────────── */

.pack-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pack-line {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  min-height: 54px;
}

/* Name over detail, so "Biology · Arabic · English" has the width to sit on. */
.pack-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pack-line + .pack-line { border-top: 1px solid var(--line-soft); }

.pack-emoji {
  font-size: 21px;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex: none;
}

.pack-item {
  font-size: 16.5px;
  letter-spacing: -.012em;
  overflow-wrap: anywhere;
}

.pack-for {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}


/* Compact lesson strip: the day at a glance, tap to change its kit. */


/* ── Mini timetable inside the corner button ─────────────── */

.tt-btn { width: 46px; height: 46px; }

.tt-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5px;
  width: 26px;
}

.tt-mini-col { display: flex; flex-direction: column; gap: 1.5px; }

.tt-mini-cell {
  height: 3px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--sc) 70%, transparent);
}
.tt-mini-cell.is-free { background: color-mix(in srgb, var(--ink-3) 22%, transparent); }


/* ── Full timetable: the whole week in one frame ─────────── */

.tt-scroll { overflow-x: visible; }

.tt-grid {
  min-width: 0;
  width: 100%;
  border-spacing: 3px;
}

.tt-corner, .tt-time { width: 42px; }

.tt-time {
  padding-right: 4px !important;
  font-size: 9.5px;
  line-height: 1.2;
}
.tt-num { font-size: 12px; }

.tt-grid thead th { font-size: 11.5px; padding: 4px 2px 6px; }
.tt-day-he { font-size: 9px; }

.tt-grid tbody td { height: 46px; border-radius: 9px; }

.tt-cell {
  padding: 3px 3px;
  font-size: 9.5px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
}


/* ── Today / All switch ──────────────────────────────────── */

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
}

.seg {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--ink-2);
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.seg.is-on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }

.seg-count {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}



/* A row leaving must not re-run the entry animation. */
.hw-slot.is-leaving { animation: none !important; }


/* ── Empty screens, one mood each ────────────────────────── */

.empty-mark { position: relative; }

/* Done: the mark rests, and now and then a few sparks pop off it. */
.empty-done .empty-mark { animation: e-settle 6s ease-in-out infinite; }
@keyframes e-settle { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-3deg); } }

.empty-done .empty-mark i {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--done);
  opacity: 0;
}
.spark-a { top: 4px;  left: 6px;  animation: spark 4.5s ease-out infinite .2s; }
.spark-b { top: 10px; right: 2px; animation: spark 4.5s ease-out infinite .5s; }
.spark-c { bottom: 6px; left: 16px; animation: spark 4.5s ease-out infinite .8s; }
@keyframes spark {
  0%   { opacity: 0; transform: scale(.4) translate(0, 0); }
  12%  { opacity: .9; }
  34%  { opacity: 0; transform: scale(1) translate(-8px, -14px); }
  100% { opacity: 0; }
}

/* Invite: a tappable block that keeps offering itself. */
.empty-invite { border: 0; background: none; width: 100%; }
.empty-invite .empty-mark {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  animation: e-breathe 2.8s ease-in-out infinite;
}
.empty-invite:active .empty-mark { transform: scale(.9); }
@keyframes e-breathe {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 16%, transparent); }
  50%     { transform: scale(1.07); box-shadow: 0 0 0 12px transparent; }
}

/* Reminders: the bell leans, waits, leans back. */
.empty-ring { border: 0; background: none; width: 100%; }
.empty-ring .empty-mark {
  background: color-mix(in srgb, var(--late) 13%, transparent);
  color: var(--late);
  transform-origin: 50% 14%;
  animation: e-swing 5s ease-in-out infinite;
}
@keyframes e-swing {
  0%, 62%, 100% { transform: rotate(0deg); }
  68% { transform: rotate(13deg); }
  76% { transform: rotate(-10deg); }
  84% { transform: rotate(6deg); }
  92% { transform: rotate(-3deg); }
}

/* Rest: nothing scheduled, so the bag just breathes slowly. */
.empty-rest .empty-mark {
  background: color-mix(in srgb, var(--ink-3) 15%, transparent);
  color: var(--ink-2);
  animation: e-rest 7s ease-in-out infinite;
}
@keyframes e-rest {
  0%,100% { transform: scale(1) translateY(0); }
  50%     { transform: scale(1.05) translateY(-3px); }
}

/* The desk used to drift 1.8% larger and back over eighteen seconds. Nobody
   could see it, and it never stopped: a full-width photograph being
   transformed for as long as the screen was up, which is the one thing on a
   cleared screen that kept waking the main thread after the plane had landed.
   It is still now. */

.empty h2 { animation: rise .45s var(--ease) .06s backwards; }
.empty p  { animation: rise .45s var(--ease) .13s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

/* Lists arrive one after another rather than all at once — but only when the
   screen itself is arriving. Running this on every redraw made finishing one
   row look like the whole page reloading. */
.list.is-entering > * { animation: rise .38s var(--ease) backwards; }
.list.is-entering > *:nth-child(1) { animation-delay: 0ms; }
.list.is-entering > *:nth-child(2) { animation-delay: 40ms; }
.list.is-entering > *:nth-child(3) { animation-delay: 80ms; }
.list.is-entering > *:nth-child(4) { animation-delay: 120ms; }
.list.is-entering > *:nth-child(5) { animation-delay: 160ms; }
.list.is-entering > *:nth-child(n+6) { animation-delay: 200ms; }

/* The cleared screen still arrives, whenever it turns up. */
.empty-home { animation: rise .42s var(--ease) backwards; }

.pack-line { animation: rise .38s var(--ease) backwards; }
.pack-line:nth-child(1) { animation-delay: 0ms; }
.pack-line:nth-child(2) { animation-delay: 35ms; }
.pack-line:nth-child(3) { animation-delay: 70ms; }
.pack-line:nth-child(4) { animation-delay: 105ms; }
.pack-line:nth-child(5) { animation-delay: 140ms; }
.pack-line:nth-child(n+6) { animation-delay: 175ms; }

/* A row leaving must not re-run the entry animation. */
.hw-slot.is-leaving { animation: none !important; }
@keyframes dv-in  { from { opacity: 0; transform: scale(.98); } }
@keyframes dv-out { to   { opacity: 0; transform: scale(.98); } }

.dv-close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: calc(env(safe-area-inset-top) + 12px) 0 0
          max(calc((100% - 540px) / 2 + var(--gutter)), var(--gutter));
  border-radius: 50%;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
}
.dv-close .ico { width: 17px; height: 17px; stroke-width: 2; }

.dv-body {
  max-width: 540px;
  margin-inline: auto;
  padding: 6px var(--gutter) calc(env(safe-area-inset-bottom) + 44px);
}

.dv-body .bar { margin-top: 12px; }


/* ── The journey: a full screen, a plane, a new memory ─────── */

.journey {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--paper);
  overflow: hidden;
  animation: jn-in .4s var(--ease);
}
.journey.is-leaving { animation: jn-out .42s var(--ease) forwards; }


/* ── Travel dress ────────────────────────────────────────────
   A serif carries the headings, the way a passport prints a name;
   everything you operate stays in the sans, where it reads faster. */

.head h1,
.empty h2,
.empty-home-line,
.level-name,
.subject-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.012em;
}

/* The serif carries its own weight, so it wants less negative tracking
   and a touch more size than the sans it replaces. */
.head h1 { font-size: 36px; letter-spacing: -.015em; }
.empty h2 { font-size: 23px; letter-spacing: -.01em; }
.empty-home-line { font-size: clamp(24px, 7.1vw, 30px); letter-spacing: -.015em; }
.level-name { font-size: 26px; letter-spacing: -.012em; }
.subject-hero h1 { font-size: 31px; letter-spacing: -.014em; }

/* Small labels read as stamped ink. */
.section-title,
.dv-levels {
  color: var(--ink-2);
  letter-spacing: .13em;
  font-weight: 650;
}

.hw-subject { letter-spacing: .08em; }
.done-subject { letter-spacing: .08em; }

/* Cards sit on parchment, so they need an edge as well as a shadow. */
.card, .subject-row, .level-card, .done-row, .note-row, .pack-list {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

/* A faint grain, so the ground reads as paper rather than flat colour.
   It lives in the body background, not a layer over it - a fixed overlay
   would fight every position: fixed element in the app. */
body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix type=%27saturate%27 values=%270%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url(%23g)%27 opacity=%27.05%27/%3E%3C/svg%3E");
}

/* On a dark screen the grain just reads as noise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: none; }
}
:root[data-theme="dark"] body { background-image: none; }

/* Primary actions take the passport's ink rather than plain black. */
.btn-primary, .fab, .toast, .chip-day.is-on, .chip-due.is-on { background: var(--ink); color: var(--on-ink); }


/* ── How rare they are ───────────────────────────────────────
   The same five words everywhere: on the shelf, on their page, and over the
   egg as it opens. The colour is the whole signal, so it never needs saying
   twice. */

.is-common    { --rank: #8A94A2; }
.is-uncommon  { --rank: #4FA83D; }
.is-rare      { --rank: #3E63DD; }
.is-epic      { --rank: #9B51C9; }
.is-legendary { --rank: #D9A94A; }

.mon-rank {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rank);
}

.page-rank {
  margin-top: 5px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--rank) 16%, transparent);
  color: color-mix(in srgb, var(--rank) 80%, var(--ink));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* On the hatching screen the rarity is the headline. */
.ar-kicker.is-common,
.ar-kicker.is-uncommon,
.ar-kicker.is-rare,
.ar-kicker.is-epic,
.ar-kicker.is-legendary {
  color: var(--rank);
  font-size: 13px;
  letter-spacing: .2em;
}

.ar-level {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-3);
  animation: rise .5s var(--ease) 3.3s backwards;
}


/* ── The collection ──────────────────────────────────────────
   A shelf of little creatures. Each one drawn, not photographed, so they
   all belong to the same family. */

.collection {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px 8px;
  padding: 16px 14px 14px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}

.mon-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 2px 6px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mc, var(--ink-3)) 9%, transparent);
  transition: transform .22s var(--spring), background-color .2s ease;
}
button.mon-slot:active { transform: scale(.93); }

.mon-slot.is-empty {
  background: none;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--line) 80%, transparent);
  min-height: 76px;
  border-radius: 14px;
}

.mon-slot.is-locked { background: color-mix(in srgb, var(--ink-3) 8%, transparent); color: var(--ink-3); }

.mon { width: 46px; height: 46px; display: block; overflow: visible; }
.mon-q { font-size: 30px; font-weight: 700; fill: currentColor; opacity: .35; font-family: var(--font-display); }

.mon-name {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-align: center;
}
.mon-slot.is-locked .mon-name { color: var(--ink-3); font-weight: 550; }

/* A slow breath, so the shelf is alive without being busy. */
.mon-slot .mon { animation: mon-bob 4.2s ease-in-out infinite; }
.mon-slot:nth-child(3n) .mon { animation-duration: 5.1s; animation-delay: .5s; }
.mon-slot:nth-child(4n) .mon { animation-duration: 4.7s; animation-delay: 1.1s; }
@keyframes mon-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
.mon-slot.is-locked .mon, .mon-slot.is-empty .mon { animation: none; }


/* ── Eggs ────────────────────────────────────────────────── */

.egg { width: 46px; height: 46px; display: block; overflow: visible; }


/* ── The book, closed ────────────────────────────────────────
   On Profile the collection is a book you can see before you open it,
   because a shelf of small drawings was too easy to walk past. */

.book-cover {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 14px 16px 24px;
  margin-bottom: 10px;
  border-radius: 5px 16px 16px 5px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ink) 88%, #000), var(--ink) 60%);
  color: var(--on-ink);
  box-shadow: var(--shadow-lift);
  text-align: left;
  transition: transform .22s var(--spring);
}
.book-cover:active { transform: scale(.985); }

/* The spine, and the edge of the pages showing past the cover. */
.bc-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 11px;
  border-radius: 5px 0 0 5px;
  background: color-mix(in srgb, #000 26%, transparent);
  box-shadow: inset -1px 0 0 color-mix(in srgb, var(--on-ink) 24%, transparent);
}

.bc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.bc-count {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
}

/* Whoever turned up most recently peeks over the cover. */
.bc-peek-row { display: flex; align-items: center; margin-left: auto; }
.bc-peek {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  margin-left: -9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mc) 82%, var(--on-ink));
  box-shadow: 0 0 0 2px var(--ink);
}
.bc-peek .mon { width: 78%; height: 78%; }

.bc-go {
  flex: none;
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  opacity: .85;
}
.bc-go .ico { width: 15px; height: 15px; stroke-width: 2.4; }


/* ── The book, open ──────────────────────────────────────────
   Two facing pages at a time: who they are on the left, everything else
   about them on the right. */

.book {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overscroll-behavior: contain;
  animation: dv-in .22s var(--ease);
}
.book.is-leaving { animation: dv-out .2s var(--ease) forwards; }

.book .dv-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 14px;
  z-index: 4;
}

.book-frame {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 64px) 12px 4px;
  touch-action: none;
}

.spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 520px);
  height: 100%;
  max-height: 680px;
  perspective: 1500px;
  border-radius: 4px 10px 10px 4px;
  background: var(--card);
  box-shadow: 0 2px 5px rgba(56, 44, 28, .10), 0 26px 48px -26px rgba(56, 44, 28, .55);
  overflow: hidden;
}

/* Where the two pages meet, the paper dips into the binding. */
.spread::after {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 26px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(to right,
    transparent,
    rgba(0, 0, 0, .07) 42%,
    rgba(0, 0, 0, .13) 50%,
    rgba(0, 0, 0, .07) 58%,
    transparent);
}

.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 12px 16px;
  backface-visibility: hidden;
}
.page-l { align-items: center; text-align: center; padding-right: 20px; }
.page-r { padding-left: 20px; }

.portrait {
  width: min(29vw, 122px);
  height: min(29vw, 122px);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mc) 15%, transparent);
}
.portrait .mon { width: 80%; height: 80%; animation: mon-bob 4s ease-in-out infinite; }
.portrait-egg .egg { width: 84%; height: 84%; }

.page-name {
  margin-top: 13px;
  font-family: var(--font-display);
  font-size: clamp(18px, 5.4vw, 25px);
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.12;
}

.page-sub {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.page-facts {
  width: 100%;
  margin: 15px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  text-align: left;
}
.page-facts dt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-facts dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.33;
  letter-spacing: -.004em;
  overflow-wrap: anywhere;
}

/* The shell they came out of, kept at the bottom of their own page. */
.page-egg {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.page-egg .egg { width: 38px; height: 38px; }
.page-egg span {
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.page-fact {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.42;
  color: var(--ink-2);
}

/* The page of whoever is still in their egg. */
.page-wait {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
.page-rules {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 16px;
}
.page-rules i { display: block; height: 1px; background: var(--line); }

.page-hint {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.page-l.is-waiting .portrait { background: color-mix(in srgb, var(--mc) 10%, transparent); }

/* Turning a page: the arriving page swings in off the spine. */
.turn-next .page-r { transform-origin: left center;  animation: pg-flip-r .3s var(--ease) both; }
.turn-next .page-l { animation: pg-soft .22s ease both; }
.turn-prev .page-l { transform-origin: right center; animation: pg-flip-l .3s var(--ease) both; }
.turn-prev .page-r { animation: pg-soft .22s ease both; }
@keyframes pg-flip-r { from { transform: rotateY(-74deg); opacity: .2; } }
@keyframes pg-flip-l { from { transform: rotateY(74deg);  opacity: .2; } }
@keyframes pg-soft   { from { opacity: 0; } }

.book-nav {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 12px var(--gutter) calc(env(safe-area-inset-bottom) + 20px);
}

.page-btn {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s var(--spring), opacity .2s ease;
}
.page-btn .ico { width: 19px; height: 19px; stroke-width: 2.2; }
.page-btn.is-next .ico { transform: rotate(180deg); }
.page-btn:disabled { opacity: .28; box-shadow: none; }
.page-btn:not(:disabled):active { transform: scale(.89); }

.book-dots { display: flex; align-items: center; gap: 6px; }
.bd {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color .2s ease, transform .2s var(--spring);
}
.bd.is-on { background: var(--ink); transform: scale(1.35); }
.bd.is-egg { background: transparent; box-shadow: inset 0 0 0 1.2px var(--ink-3); }
.bd.is-egg.is-on { background: var(--ink-3); }


/* ── Someone new hatching ────────────────────────────────────
   The egg drops in, wobbles, cracks along its middle and breaks open.
   One fixed CSS timeline start to finish, so there is nothing to drift. */

.arrival-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: var(--paper);
  animation: fade-in .34s ease;
}
.arrival-screen.is-leaving { animation: fade-out .34s ease forwards; }

.ar-stage {
  text-align: center;
  padding: 0 var(--gutter);
  width: min(92vw, 460px);
}

.ar-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: rise .5s var(--ease) .15s backwards;
}

.hatch {
  position: relative;
  display: grid;
  place-items: center;
  margin: 22px auto 0;
  width: min(62vw, 250px);
  height: min(62vw, 250px);
}

.hatch-glow {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mc) 30%, transparent) 0%,
                              color-mix(in srgb, var(--mc) 16%, transparent) 52%, transparent 72%);
  animation: h-glow 1s var(--ease) 2.35s both;
}
@keyframes h-glow {
  0%   { opacity: 0; transform: scale(.45); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

.hatch-egg, .hatch-mon {
  position: absolute;
  inset: 9%;
  display: grid;
  place-items: center;
}
.hatch-egg .egg, .hatch-mon .mon { width: 100%; height: 100%; }

/* Drops in, then rocks — the second animation waits out the first. */
.hatch-egg {
  z-index: 2;
  animation: h-drop .55s var(--spring) both, h-wobble 1.45s ease-in-out .62s forwards;
}
@keyframes h-drop {
  from { opacity: 0; transform: translateY(-42px) scale(.5); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes h-wobble {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-5deg); }
  26% { transform: rotate(4.5deg); }
  40% { transform: rotate(-7deg); }
  54% { transform: rotate(6deg); }
  68% { transform: rotate(-9.5deg); }
  84% { transform: rotate(7deg); }
}

/* The crack draws itself, then the two halves go their separate ways. */
.egg-crack {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  animation: h-crack .68s ease-out 1.5s both, h-vanish .2s linear 2.3s both;
}
@keyframes h-crack  { to { stroke-dashoffset: 0; } }
@keyframes h-vanish { to { opacity: 0; } }

.egg-top, .egg-bot { transform-box: fill-box; transform-origin: center; }
.egg-top { animation: h-top .8s var(--ease) 2.3s both; }
.egg-bot { animation: h-bot .8s var(--ease) 2.3s both; }
@keyframes h-top {
  0%   { transform: none; opacity: 1; }
  62%  { opacity: 1; }
  100% { transform: translate(-26px, -46px) rotate(-38deg); opacity: 0; }
}
@keyframes h-bot {
  0%   { transform: none; opacity: 1; }
  62%  { opacity: 1; }
  100% { transform: translate(7px, 30px) rotate(18deg); opacity: 0; }
}

/* Bits of shell, thrown outwards. */
.hatch-shards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hatch-shards i {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 11px;
  margin: -5px 0 0 -4px;
  border-radius: 3px 3px 2px 2px;
  background: var(--shell);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 45%, transparent);
  animation: h-shard .85s var(--ease) 2.32s both;
}
@keyframes h-shard {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.7); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.6); }
}
.hatch-shards i:nth-child(1) { --dx: -86px; --dy: -40px; --r: -120deg; }
.hatch-shards i:nth-child(2) { --dx: -54px; --dy: -78px; --r:  -60deg; }
.hatch-shards i:nth-child(3) { --dx:  -8px; --dy: -92px; --r:   30deg; }
.hatch-shards i:nth-child(4) { --dx:  52px; --dy: -76px; --r:   84deg; }
.hatch-shards i:nth-child(5) { --dx:  88px; --dy: -34px; --r:  130deg; }
.hatch-shards i:nth-child(6) { --dx:  74px; --dy:  36px; --r:  168deg; }
.hatch-shards i:nth-child(7) { --dx:   4px; --dy:  74px; --r:  -20deg; }
.hatch-shards i:nth-child(8) { --dx: -70px; --dy:  44px; --r: -150deg; }

/* And out they come. */
.hatch-mon { z-index: 3; animation: h-out .95s var(--spring) 2.45s both; }
.hatch-mon .mon { animation: mon-bob 3.6s ease-in-out 3.5s infinite; }
@keyframes h-out {
  0%   { opacity: 0; transform: translateY(16px) scale(.2); }
  50%  { opacity: 1; transform: translateY(-12px) scale(1.14); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.ar-name {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.018em;
  animation: rise .5s var(--ease) 3.05s backwards;
}

.ar-line {
  margin-top: 6px;
  font-size: 16px;
  color: var(--ink-2);
  animation: rise .5s var(--ease) 3.2s backwards;
}

.ar-continue {
  width: min(72vw, 280px);
  margin-top: 28px;
  animation: rise .5s var(--ease) 3.4s backwards;
}