/* Link — soft pastel edition.
   Layout: a homepage, then one centred column for the game: progress pills, the active link on a soft card,
   tools, keyboard. Each weekday has its own pastel palette, and a light wash drifts with the time of day. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("fonts/nunito-latin-wght-normal.woff2") format("woff2");
}

/* Lets the time-of-day colour fade smoothly when it changes */
@property --tod { syntax: "<color>"; inherits: true; initial-value: transparent; }

/* ---------- Colour: each weekday has its own pastel set (wash, strong, deep). Wednesday is the default. ---------- */
:root { --surface: #ffffff; --ink: #2a2733; --ink-2: #57536a; --muted: #8b8698; --on-deep: #ffffff; --on-strong-dark: 0; --hint-fill: #fbe8bd; --hint-mid: #efcd78; --hint-ink: #6b4a00; --reveal-fill: #ecebf1; --reveal-ink: #6f6b7d; --bad: #cf4a66; --scrim: rgba(42, 39, 51, 0.32); --tod-amt: 42%; --wash: #fdf2eb; --strong: #f7c3a3; --deep: #9c4a22; --on-strong: #9c4a22; --tod: transparent; color-scheme: light; }
[data-day="mon"] { --wash: #f4f1fc; --strong: #c4b5f4; --deep: #5a45ad; --on-strong: #5a45ad; }
[data-day="tue"] { --wash: #ecf8f2; --strong: #a3e0c3; --deep: #23705a; --on-strong: #23705a; }
[data-day="wed"] { --wash: #fdf2eb; --strong: #f7c3a3; --deep: #9c4a22; --on-strong: #9c4a22; }
[data-day="thu"] { --wash: #edf5fd; --strong: #a9d1f3; --deep: #275f8e; --on-strong: #275f8e; }
[data-day="fri"] { --wash: #fcf7e6; --strong: #f2d67e; --deep: #765800; --on-strong: #765800; }
[data-day="sat"] { --wash: #fcf0f4; --strong: #f3b4c6; --deep: #96304f; --on-strong: #96304f; }
[data-day="sun"] { --wash: #f1f6ee; --strong: #bcd6aa; --deep: #46662f; --on-strong: #46662f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --surface: #24212b; --ink: #f2eff7; --ink-2: #c6c1d2; --muted: #918b9f; --on-deep: #1a1720; --hint-fill: #4a3b18; --hint-mid: #b8953f; --hint-ink: #f6dd9e; --reveal-fill: #312e39; --reveal-ink: #b6b1c3; --bad: #ff8aa0; --scrim: rgba(0, 0, 0, 0.55); --tod-amt: 22%; color-scheme: dark; --wash: #201813; --strong: #c98a66; --deep: #f8d2bb; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="mon"], :root:not([data-theme="light"]) [data-day="mon"] { --wash: #1a1724; --strong: #8f7fd0; --deep: #d6ccfb; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="tue"], :root:not([data-theme="light"]) [data-day="tue"] { --wash: #141f1b; --strong: #5fae8c; --deep: #b8ecd3; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="wed"], :root:not([data-theme="light"]) [data-day="wed"] { --wash: #201813; --strong: #c98a66; --deep: #f8d2bb; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="thu"], :root:not([data-theme="light"]) [data-day="thu"] { --wash: #141b24; --strong: #6c9fce; --deep: #c3def7; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="fri"], :root:not([data-theme="light"]) [data-day="fri"] { --wash: #1f1c12; --strong: #c2a64a; --deep: #f3e2a6; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="sat"], :root:not([data-theme="light"]) [data-day="sat"] { --wash: #22161b; --strong: #c47790; --deep: #f7c9d6; --on-strong: #1a1720; }
  :root:not([data-theme="light"])[data-day="sun"], :root:not([data-theme="light"]) [data-day="sun"] { --wash: #171e14; --strong: #86a873; --deep: #cfe3c1; --on-strong: #1a1720; }
}
:root[data-theme="dark"] { --surface: #24212b; --ink: #f2eff7; --ink-2: #c6c1d2; --muted: #918b9f; --on-deep: #1a1720; --hint-fill: #4a3b18; --hint-mid: #b8953f; --hint-ink: #f6dd9e; --reveal-fill: #312e39; --reveal-ink: #b6b1c3; --bad: #ff8aa0; --scrim: rgba(0, 0, 0, 0.55); --tod-amt: 22%; color-scheme: dark; --wash: #201813; --strong: #c98a66; --deep: #f8d2bb; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="mon"], :root[data-theme="dark"] [data-day="mon"] { --wash: #1a1724; --strong: #8f7fd0; --deep: #d6ccfb; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="tue"], :root[data-theme="dark"] [data-day="tue"] { --wash: #141f1b; --strong: #5fae8c; --deep: #b8ecd3; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="wed"], :root[data-theme="dark"] [data-day="wed"] { --wash: #201813; --strong: #c98a66; --deep: #f8d2bb; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="thu"], :root[data-theme="dark"] [data-day="thu"] { --wash: #141b24; --strong: #6c9fce; --deep: #c3def7; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="fri"], :root[data-theme="dark"] [data-day="fri"] { --wash: #1f1c12; --strong: #c2a64a; --deep: #f3e2a6; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="sat"], :root[data-theme="dark"] [data-day="sat"] { --wash: #22161b; --strong: #c47790; --deep: #f7c9d6; --on-strong: #1a1720; }
:root[data-theme="dark"][data-day="sun"], :root[data-theme="dark"] [data-day="sun"] { --wash: #171e14; --strong: #86a873; --deep: #cfe3c1; --on-strong: #1a1720; }

:root {
  --font: "Nunito", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --soft-shadow: 0 2px 6px color-mix(in srgb, var(--deep) 7%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--deep) 45%, transparent);
  --key-shadow: 0 2px 0 color-mix(in srgb, var(--deep) 12%, transparent);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
/* Stops quick taps on the keyboard being read as a double-tap zoom. Pinch zoom still works. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, a, .key { touch-action: manipulation; }
body { margin: 0; background: var(--wash); color: var(--ink); font: 500 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 2.5px solid var(--deep); outline-offset: 2px; }
p, h1, h2, h3, h4, ol, ul, dl, dd, figure { margin: 0; }

/* The sky: day colour plus a time-of-day glow, behind everything */
.sky {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Many colour stops with an eased falloff, mixed in OKLab, keep the glows smooth instead of stepped */
  background:
    radial-gradient(130% 75% at 50% -12%,
      color-mix(in oklab, var(--tod) var(--tod-amt), transparent) 0%,
      color-mix(in oklab, var(--tod) calc(var(--tod-amt) * 0.75), transparent) 18%,
      color-mix(in oklab, var(--tod) calc(var(--tod-amt) * 0.45), transparent) 36%,
      color-mix(in oklab, var(--tod) calc(var(--tod-amt) * 0.2), transparent) 54%,
      color-mix(in oklab, var(--tod) calc(var(--tod-amt) * 0.06), transparent) 68%,
      transparent 80%),
    radial-gradient(95% 60% at 100% 108%,
      color-mix(in oklab, var(--strong) 32%, transparent) 0%,
      color-mix(in oklab, var(--strong) 22%, transparent) 22%,
      color-mix(in oklab, var(--strong) 11%, transparent) 44%,
      color-mix(in oklab, var(--strong) 3%, transparent) 62%,
      transparent 76%),
    radial-gradient(75% 50% at -12% 60%,
      color-mix(in oklab, var(--strong) 18%, transparent) 0%,
      color-mix(in oklab, var(--strong) 10%, transparent) 30%,
      color-mix(in oklab, var(--strong) 3%, transparent) 55%,
      transparent 75%),
    var(--wash);
  transition: --tod 20s linear;
}
/* Fine grain over the gradients: it dithers the last of the banding on 8-bit screens */
.sky::after { content: ""; position: absolute; inset: 0; background: url("grain.png") repeat; background-size: 128px 128px; opacity: 0.55; }

.app { min-height: 100%; display: flex; flex-direction: column; }
.load-error { max-width: 460px; margin: 48px auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); color: var(--ink-2); }

/* ---------- Homepage ---------- */
.home {
  min-height: 100%; display: flex; flex-direction: column; align-items: center;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-block: 28px 18px;
}
.home-main { flex: 1; width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding-block: 24px; }
.home-main > * { animation: rise 0.6s var(--ease) both; }
.home-main > *:nth-child(2) { animation-delay: 0.06s; } .home-main > *:nth-child(3) { animation-delay: 0.12s; }
.home-main > *:nth-child(4) { animation-delay: 0.18s; } .home-main > *:nth-child(5) { animation-delay: 0.24s; }
.home-main > *:nth-child(6) { animation-delay: 0.3s; } .home-main > *:nth-child(7) { animation-delay: 0.36s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.home-mark { width: 92px; height: 58px; }
.home-mark .ring-a { stroke: var(--ink); }
.home-mark .ring-b { stroke: var(--deep); }
.home-title { font-weight: 900; font-size: 52px; line-height: 1; letter-spacing: -0.02em; }
.home-tag { font-size: 19px; line-height: 1.4; color: var(--ink-2); font-weight: 600; text-wrap: balance; max-width: 30ch; }
.home-day { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.home-date { font-weight: 700; color: var(--ink-2); font-size: 14.5px; }
.home-status { font-weight: 700; font-size: 14.5px; color: var(--deep); }
.home-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 260px; margin-top: 6px; }
.home-actions .btn { height: 50px; font-size: 16px; }
.home-top { width: 100%; max-width: 460px; min-height: 40px; display: flex; justify-content: flex-start; align-items: center; }
.home-account-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 5px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--key-shadow); font-weight: 800; font-size: 13.5px; color: var(--ink); max-width: 60vw; }
.home-account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-account-btn.is-signed-out { padding: 0 18px; }
.home-foot { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.home-foot a { color: inherit; text-decoration: none; padding: 4px 2px; border-radius: 4px; }
.home-foot a:hover { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Header ---------- */
.top { padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px)); }
.top-inner { max-width: 460px; margin: 0 auto; height: 58px; display: flex; align-items: center; gap: 4px; }
.wordmark { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; margin-right: auto; border: 0; background: none; padding: 4px; border-radius: 10px; }
.wordmark span { font-weight: 900; font-size: 23px; letter-spacing: -0.01em; line-height: 1; }
.mark { width: 30px; height: 19px; }
.mark-a { stroke: var(--ink); }
.mark-b { stroke: var(--deep); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); flex: none; transition: background 0.2s, color 0.2s; }
.icon-btn:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--ink); }

/* ---------- Main column ---------- */
.main {
  flex: 1; width: 100%; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 4px 14px;
}
.meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.day-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--strong) 55%, var(--surface)); color: var(--deep); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.meta-text { font-weight: 700; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta-back { margin-left: auto; }

/* ---------- Progress ---------- */
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.step { height: 22px; display: flex; align-items: center; border: 0; background: none; padding: 0; border-radius: 999px; }
.step-bar { display: block; width: 100%; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--deep) 11%, transparent); transition: background 0.4s var(--ease), transform 0.3s var(--ease), box-shadow 0.2s; }
.step.is-clean .step-bar { background: var(--strong); }
.step.is-hint .step-bar { background: var(--hint-mid); }
.step.is-reveal .step-bar { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.step.is-active .step-bar { box-shadow: 0 0 0 2.5px var(--surface), 0 0 0 4.5px var(--deep); }
.step.is-just-solved .step-bar { animation: pop-bar 0.6s var(--ease); }
@keyframes pop-bar { 40% { transform: scaleY(1.6); } }

/* ---------- The card ---------- */
.panel { background: var(--surface); border-radius: 28px; box-shadow: var(--soft-shadow); padding: 12px 14px 20px; display: flex; flex-direction: column; align-items: center; }
.panel.anim-fwd { animation: in-fwd 0.32s var(--ease) both; }
.panel.anim-back { animation: in-back 0.32s var(--ease) both; }
.panel.anim-enter { animation: rise 0.45s var(--ease) both; }
@keyframes in-fwd { from { opacity: 0; transform: translateX(16px); } }
@keyframes in-back { from { opacity: 0; transform: translateX(-16px); } }
.stage-head { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.stage-label { font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.nav { width: 34px; height: 34px; color: var(--muted); }
.nav:disabled { visibility: hidden; }

.chain { display: flex; flex-direction: column; align-items: center; width: 100%; }
.word { font-weight: 850; font-size: clamp(25px, 7.4vw, 31px); line-height: 1.1; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; overflow-wrap: anywhere; padding: 6px 0; }
.join { width: 4px; height: 18px; border-radius: 2px; background: color-mix(in srgb, var(--deep) 13%, transparent); position: relative; overflow: hidden; }
.join::after { content: ""; position: absolute; inset: 0; background: var(--strong); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease); }
.chain.is-clean .join::after { transform: scaleY(1); }
.chain.is-hint .join::after { background: var(--hint-mid); transform: scaleY(1); }
.chain.is-reveal .join::after { background: color-mix(in srgb, var(--muted) 45%, transparent); transform: scaleY(1); }
.chain.is-just-solved .join:last-of-type::after { transition-delay: 0.3s; }

.cells { display: flex; justify-content: center; gap: 7px; width: 100%; padding: 8px 0; --cell-fs: 23px; }
.cells[style*="--n"] { --cell-fs: clamp(14px, calc(150px / var(--n)), 25px); }
.cell {
  flex: 0 1 50px; min-width: 0; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 14px;
  background: color-mix(in srgb, var(--strong) 18%, var(--wash)); color: var(--ink);
  font-weight: 850; font-size: var(--cell-fs); text-transform: uppercase;
  transition: background-color 0.3s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease), color 0.3s;
}
.cell.is-filled { background: var(--surface); transform: translateY(-2px); box-shadow: 0 3px 0 color-mix(in srgb, var(--deep) 14%, transparent), 0 8px 16px -10px color-mix(in srgb, var(--deep) 40%, transparent); }
.cell.is-next { box-shadow: inset 0 0 0 2.5px var(--strong); }
.cell.is-typed { animation: typed 0.18s var(--ease); }
@keyframes typed { from { transform: translateY(1px) scale(0.92); } }
.cell.is-locked { background: var(--hint-fill); color: var(--hint-ink); }
.cell.is-wrong { color: var(--bad); box-shadow: inset 0 0 0 2px var(--bad); }
.cells.is-shaking { animation: shake 0.35s ease; }
@keyframes shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.chain.is-clean .cell, .chain.is-hint .cell, .chain.is-reveal .cell { transform: none; box-shadow: none; }
.chain.is-clean .cell { background: var(--strong); color: var(--on-strong); }
.chain.is-hint .cell { background: var(--hint-fill); color: var(--hint-ink); }
.chain.is-reveal .cell { background: var(--reveal-fill); color: var(--reveal-ink); }
.chain.is-just-solved .cell { animation: settle 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes settle { 0% { transform: translateY(0); } 35% { transform: translateY(-7px); } 100% { transform: translateY(0); } }

.result { margin-top: 12px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.result-text { font-size: 14px; color: var(--muted); font-weight: 600; text-wrap: balance; max-width: 34ch; }
.result-text.is-warning { color: var(--hint-ink); background: var(--hint-fill); padding: 6px 12px; border-radius: 12px; }
.result.is-fresh { animation: rise 0.4s 0.35s var(--ease) both; }
.compounds { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.compound { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--strong) 28%, var(--surface)); color: var(--deep); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.compound.is-tappable { transition: background 0.2s, transform 0.15s; }
.compound.is-tappable:hover { background: color-mix(in srgb, var(--strong) 50%, var(--surface)); }
.compound.is-tappable:active { transform: scale(0.97); }
.compound[aria-expanded="true"] { background: var(--strong); color: var(--on-strong); }
.result .plus { color: var(--muted); font-weight: 800; }
.note { font-size: 13.5px; color: var(--muted); font-weight: 600; max-width: 36ch; min-height: 20px; text-wrap: pretty; }
.note.is-open { color: var(--ink-2); animation: rise 0.25s var(--ease) both; }
.note strong { color: var(--deep); font-weight: 800; text-transform: capitalize; }

/* ---------- Tools ---------- */
.tools { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.hint { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); font-weight: 600; }
.hint strong { font-weight: 850; letter-spacing: 0.05em; color: var(--deep); }
.tool-btns { display: flex; gap: 6px; flex: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); box-shadow: var(--key-shadow); font-weight: 800; font-size: 13.5px; white-space: nowrap; text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.12s, opacity 0.2s;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; }
.btn svg { flex: none; }
.btn-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--strong) 35%, var(--wash)); color: var(--deep); font-size: 11.5px; font-weight: 900; }
.btn-soft { background: color-mix(in srgb, var(--strong) 38%, var(--surface)); color: var(--deep); box-shadow: none; }
.btn-soft:hover:not(:disabled) { background: color-mix(in srgb, var(--strong) 60%, var(--surface)); }
.btn-primary { background: var(--deep); color: var(--on-deep); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--deep) 70%, transparent); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--deep) 88%, var(--ink)); }
.btn.is-armed { background: var(--deep); color: var(--on-deep); }
.btn-small { height: 32px; padding: 0 12px; font-size: 12.5px; }
.btn-block { width: 100%; height: 48px; margin-top: 20px; font-size: 15px; }
.btn-danger { background: transparent; box-shadow: inset 0 0 0 1.5px var(--bad); color: var(--bad); }
.btn-danger.is-armed { background: var(--bad); color: var(--surface); box-shadow: none; }

/* ---------- Keyboard ---------- */
.keys { margin-top: auto; display: flex; flex-direction: column; gap: 7px; user-select: none; -webkit-user-select: none; }
.krow { display: flex; justify-content: center; gap: 5px; }
.key {
  flex: 1 1 0; min-width: 0; max-width: 42px; height: 52px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px;
  background: var(--surface); color: var(--ink); box-shadow: var(--key-shadow); font-weight: 800; font-size: 17px; text-transform: uppercase;
  transition: background 0.1s, transform 0.08s;
}
.key:active, .key.is-down { background: color-mix(in srgb, var(--strong) 55%, var(--surface)); transform: translateY(1px); }
.key-wide { flex: 1.55 1 0; max-width: 68px; font-size: 13px; letter-spacing: 0.03em; }
.key-enter { background: var(--deep); color: var(--on-deep); }
.key-enter:active, .key-enter.is-down { background: color-mix(in srgb, var(--deep) 80%, var(--ink)); }

/* ---------- Toast ---------- */
.toasts { position: fixed; z-index: 40; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.toast { background: var(--ink); color: var(--surface); font-weight: 800; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; box-shadow: var(--soft-shadow); animation: toast-in 0.25s var(--ease) both; }
.toast.is-leaving { animation: toast-out 0.25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-4px); } }

/* ---------- Sheets ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s ease both;
  padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px));
  padding-block: calc(16px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 560px) { .scrim { align-items: center; } }
@keyframes fade { from { opacity: 0; } }
.sheet { position: relative; width: 100%; max-width: 440px; max-height: 100%; overflow-y: auto; background: var(--surface); border-radius: 28px; padding: 26px 22px 22px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35); animation: sheet-in 0.36s var(--ease) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(28px); } }
.sheet-close { position: absolute; top: 10px; right: 10px; }

.eyebrow { font-weight: 800; font-size: 11px; line-height: 1.3; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.eyebrow.section { margin: 24px 0 10px; }
.sheet-title { font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; margin-top: 6px; text-wrap: balance; padding-right: 30px; }
.sheet-lede { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); font-weight: 600; max-width: 60ch; }
.sheet-note { margin-top: 16px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.section-text { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; max-width: 60ch; font-weight: 600; }
.text-link { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; font-weight: 700; }

.demo { margin-top: 18px; padding: 16px 12px 14px; border-radius: 22px; background: var(--wash); }
.demo .word { font-size: 20px; padding: 3px 0; }
.demo .join { height: 12px; }
.demo .cells { --cell-fs: 15px; padding: 5px 0; }
.demo .cell { flex: 0 0 34px; border-radius: 10px; }
.demo figcaption { margin-top: 12px; font-size: 13px; color: var(--muted); text-align: center; text-wrap: balance; font-weight: 600; }

.rules { padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.legend { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); font-weight: 600; }
.legend-row { display: flex; align-items: center; gap: 10px; }
.swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--deep) 11%, transparent); }
.is-clean > .swatch { background: var(--strong); }
.is-hint > .swatch { background: var(--hint-mid); }
.is-reveal > .swatch { background: color-mix(in srgb, var(--muted) 45%, transparent); }

.chain-list { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 6px; }
.chain-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: var(--wash); min-width: 0; }
.chain-words { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font-weight: 800; font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.chain-words .plus { color: var(--muted); }
.chain-tag { font-weight: 800; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 8px; border-radius: 16px; background: var(--wash); text-align: center; }
.stat dd { font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--deep); font-variant-numeric: tabular-nums; }
.stat dt { font-weight: 800; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.2; }
.freeze { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 14px; border-radius: 999px; background: var(--wash); font-weight: 700; font-size: 13px; color: var(--muted); }
.freeze-dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.freeze.is-ready { color: var(--deep); }
.freeze.is-ready .freeze-dot { background: var(--strong); box-shadow: 0 0 0 3px color-mix(in srgb, var(--strong) 35%, transparent); }

.heatmap { display: grid; gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.hm-grid { display: flex; gap: 4px; }
.hm-col { display: grid; grid-template-rows: repeat(7, 14px); gap: 4px; }
.hm { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--deep) 8%, transparent); }
.hm.is-off { background: transparent; }
.hm.lv0 { background: color-mix(in srgb, var(--strong) 25%, var(--wash)); }
.hm.lv1 { background: color-mix(in srgb, var(--strong) 45%, var(--wash)); }
.hm.lv2 { background: color-mix(in srgb, var(--strong) 70%, var(--wash)); }
.hm.lv3 { background: var(--strong); }
.hm.lv4 { background: color-mix(in srgb, var(--strong) 60%, var(--deep)); }
.hm.lv5 { background: var(--deep); }
.hm-legend { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.hm-legend span:first-child { margin-right: 4px; }
.hm-legend span:last-child { margin-left: 4px; }

.dist { display: grid; gap: 7px; }
.dist-row { display: grid; grid-template-columns: 14px 1fr 28px; align-items: center; gap: 10px; font-weight: 800; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dist-track { height: 10px; background: var(--wash); border-radius: 999px; overflow: hidden; }
.dist-bar { display: block; height: 100%; width: var(--w, 0%); background: color-mix(in srgb, var(--strong) 70%, var(--wash)); border-radius: 999px; transform-origin: left; animation: grow 0.6s var(--ease) both; }
.dist-bar.is-today { background: var(--deep); }
.dist-count { text-align: right; color: var(--ink-2); }
@keyframes grow { from { transform: scaleX(0); } }

.sheet-foot { margin-top: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.countdown { display: flex; flex-direction: column; gap: 4px; }
.countdown-time { font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.share-fallback { display: block; width: 100%; margin-top: 14px; padding: 12px; font: 600 14px/1.4 var(--font); color: var(--ink); background: var(--wash); border: 0; border-radius: 14px; resize: none; }

/* ---------- Archive calendar (each day cell takes its own weekday colour) ---------- */
.calendar { display: grid; gap: 22px; margin-top: 18px; }
.cal-title { font-weight: 900; font-size: 15px; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-head { text-align: center; font-weight: 800; font-size: 11px; color: var(--muted); padding-bottom: 2px; }
.cal-day {
  aspect-ratio: 1 / 1; min-width: 0; border: 0; border-radius: 14px; background: var(--wash); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0;
  font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; transition: transform 0.15s, background 0.2s;
}
button.cal-day:hover { background: color-mix(in srgb, var(--strong) 45%, var(--wash)); }
button.cal-day:active { transform: scale(0.95); }
.cal-day.is-off { background: transparent; color: color-mix(in srgb, var(--muted) 55%, transparent); font-weight: 700; }
.cal-day.is-done { background: color-mix(in srgb, var(--strong) 55%, var(--wash)); }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--deep); }
.cal-day.is-current { background: var(--strong); color: var(--on-strong); }
.dots { display: flex; gap: 2px; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.dot.is-clean { background: var(--deep); }
.dot.is-hint { background: var(--hint-mid); }
.cal-ring { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--deep); }

/* ---------- Account ---------- */
.account-btn { height: 34px; padding: 0 14px; margin-right: 2px; flex: none; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--key-shadow); color: var(--ink); font-weight: 800; font-size: 13px; }
.account-btn.is-signed-in { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; display: grid; place-items: center; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--on-deep); font-weight: 900; font-size: 13px; line-height: 1; }

.field { display: grid; gap: 8px; }
.field-label { font-weight: 800; font-size: 13.5px; }
.field-row { display: flex; gap: 8px; }
.field-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--wash); color: var(--ink); font: 700 15px var(--font); }
.field-input:focus-visible { outline: 2.5px solid var(--strong); outline-offset: 0; }
.field-row .btn { height: 44px; }
.field-note { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.field-note.is-error { color: var(--bad); }
.section-figures { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); font-weight: 700; }
.section-figures strong { color: var(--deep); font-weight: 900; font-variant-numeric: tabular-nums; margin-right: 2px; }
.device-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.device-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--wash); font-size: 14px; }
.device-row.is-loading { color: var(--muted); }
.device-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.device-name { font-weight: 800; overflow-wrap: anywhere; }
.device-meta { font-weight: 700; font-size: 12px; color: var(--muted); }
.device-meta.is-current { color: var(--deep); }
.danger { margin-top: 24px; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.danger .eyebrow { color: var(--bad); margin-bottom: 8px; }

/* ---------- Text pages (privacy, terms) ---------- */
.doc { max-width: 640px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); padding-block: 28px 64px; }
.doc h1 { font-weight: 900; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; margin: 10px 0 14px; text-wrap: balance; }
.doc h2 { font-weight: 850; font-size: 18px; margin: 30px 0 8px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 65ch; font-weight: 600; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 20px; display: grid; gap: 6px; margin: 8px 0 0; }
.doc strong { color: var(--ink); }
.doc a:not(.btn) { color: var(--deep); font-weight: 800; }
.doc-back { margin-bottom: 18px; }
.doc-updated { font-size: 13px; color: var(--muted); font-weight: 700; }

@media (max-height: 700px) {
  .main { gap: 10px; }
  .key { height: 46px; }
  .word { font-size: clamp(21px, 6vw, 26px); padding: 3px 0; }
  .join { height: 12px; }
  .home-main { gap: 12px; }
}

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