/* Miso — cream paper, warm ink, and the pastels of the cats' own art pack. */

:root {
  --paper: #fff8ef;
  --paper-2: #fdeee2;
  --card: #fffdf6;
  --blush: #fbdcd3;
  --peach: #f7c3a4;
  --rose: #e07f7c;
  --rose-deep: #c9605d;
  --butter: #fbe5a3;
  --mint: #cfe7d2;
  --sky: #cfe3ec;
  --lilac: #e4d8ef;
  --taupe: #c9ae9e;
  --ink: #33201a;
  --ink-2: #6e4f43;
  --ink-3: #9a7b6d;
  --line: rgba(51, 32, 26, 0.14);
  --shadow: #33201a;
  --wall-a: #ffe9dc;
  --wall-b: #fcd6d0;
  --wall-c: #d9e7ef;
  --glass: rgba(255, 250, 244, 0.72);
  --r: 16px;
  --r-sm: 10px;
  --display: 'Mochiy Pop One', 'Zen Maru Gothic', ui-rounded, system-ui, sans-serif;
  --body: 'Zen Maru Gothic', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --pixel: 'Silkscreen', ui-monospace, monospace;
  color-scheme: light;
}

:root[data-theme='night'] {
  --paper: #1c1724;
  --paper-2: #231c2d;
  --card: #2a2235;
  --blush: #4a2f3f;
  --peach: #7a4d4a;
  --rose: #f09a92;
  --rose-deep: #f7b3aa;
  --butter: #6b5a33;
  --mint: #2f4a3f;
  --sky: #2c3d52;
  --lilac: #3d3052;
  --taupe: #6c5a5e;
  --ink: #f8ebdf;
  --ink-2: #d9c3b6;
  --ink-3: #a58f88;
  --line: rgba(248, 235, 223, 0.14);
  --shadow: #0c0910;
  --wall-a: #2b2340;
  --wall-b: #3d2b44;
  --wall-c: #1d2940;
  --glass: rgba(34, 27, 44, 0.74);
  color-scheme: dark;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 56px;
}

body {
  margin: 0;
  position: relative;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* A touch of paper grain over everything. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0 0.1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme='night'] body::before { mix-blend-mode: screen; opacity: 0.05; }

img { max-width: 100%; display: block; }
.pix, .stamp, .pc-sprite, .decor { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--rose); color: #fff; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 400;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 10px;
}
.skip:focus { top: 8px; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ------------------------------------------------------------ type */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pixel); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: ''; width: 14px; height: 12px; flex: none;
  background: currentColor;
  -webkit-mask: var(--paw) center / contain no-repeat; mask: var(--paw) center / contain no-repeat;
}
:root {
  --paw: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'><path d='M1 0h1v1H1zM5 0h1v1H5zM0 2h1v1H0zM6 2h1v1H6zM2 2h3v1H2zM1 3h5v2H1zM2 5h3v1H2z'/></svg>");
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.28rem; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-2); max-width: 60ch; }

.mark {
  background: linear-gradient(transparent 58%, var(--blush) 58%, var(--blush) 92%, transparent 92%);
  padding: 0 0.08em;
}
:root[data-theme='night'] .mark { background: linear-gradient(transparent 58%, #6b3d4c 58%, #6b3d4c 92%, transparent 92%); }

/* ------------------------------------------------------------ buttons */

.btn {
  --bg: var(--card);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 1rem; line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--shadow); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.btn-primary { --bg: var(--rose); color: #fff; }
:root[data-theme='night'] .btn-primary { color: #2a1a18; }
.btn-primary .apple { width: 17px; height: 17px; margin-top: -2px; }
.btn-lg { padding: 17px 28px 16px; font-size: 1.08rem; }
.btn-sm { padding: 8px 14px 7px; font-size: 0.88rem; border-width: 2px; box-shadow: 0 3px 0 var(--shadow); }
.btn-ghost { box-shadow: none; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; padding-inline: 8px; }
.btn-ghost:hover, .btn-ghost:active { box-shadow: none; transform: none; color: var(--rose-deep); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pixel); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 5px 10px 4px; border-radius: 999px;
  border: 2px solid var(--ink); background: var(--butter); color: var(--ink);
}

/* ------------------------------------------------------------ menu bar */

.menubar {
  position: sticky; top: 0; z-index: 100;
  height: 44px;
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 2px solid var(--ink);
  font-size: 14.5px;
}
.menubar nav a, .menubar .brand, .menubar button.mb { text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer; line-height: 1; }
.menubar nav a:hover, .menubar button.mb:hover { background: var(--line); }
.menubar .brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 17px; padding-right: 14px; }
.brand img { width: 26px; height: 26px; border-radius: 7px; }
.brand-sub { font-family: var(--pixel); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-left: 2px; transform: translateY(2px); }
@media (max-width: 420px) { .menubar .brand-sub { display: none; } }
.menubar nav { display: flex; gap: 2px; font-weight: 500; }
.menubar nav a[aria-current='page'] { background: var(--ink); color: var(--paper); }
.menubar .spacer { flex: 1; }
.menubar .status { display: flex; align-items: center; gap: 4px; }
.menubar .clock { font-variant-numeric: tabular-nums; padding: 0 8px; color: var(--ink-2); white-space: nowrap; }
.mb svg { width: 16px; height: 16px; vertical-align: -3px; }
.mb .label { margin-left: 5px; }
.menubar .btn { margin-left: 6px; }
.menu-toggle { display: none; }

.cat-count { font-family: var(--pixel); font-size: 11px; }

@media (max-width: 900px) {
  .menubar nav { display: none; }
  .menubar .clock, .mb .label { display: none; }
  .menu-toggle { display: inline-flex; }
  .menubar.open nav {
    display: flex; flex-direction: column; position: absolute; top: 44px; left: 0; right: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink); padding: 8px 12px 14px;
  }
  .menubar.open nav a { padding: 12px; font-size: 1.05rem; }
}

/* ------------------------------------------------------------ windows */

.win {
  position: relative;
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 6px 7px 0 var(--shadow);
  transition: background-color 0.6s;
}
.win-bar {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px;
  border-bottom: 2.5px solid var(--ink);
  background: var(--paper-2);
  border-radius: calc(var(--r) - 3px) calc(var(--r) - 3px) 0 0;
  font-family: var(--pixel); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-2);
  transition: background-color 0.6s;
  user-select: none;
}
.win-bar .dots { display: flex; gap: 6px; margin-right: 6px; }
.win-bar .dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); display: block; }
.win-bar .dots i:nth-child(1) { background: #f08c86; }
.win-bar .dots i:nth-child(2) { background: #f6d27a; }
.win-bar .dots i:nth-child(3) { background: #9fd3a8; }
.win-bar .title { flex: 1; text-align: center; margin-right: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-body { padding: 24px; }

/* ------------------------------------------------------------ hero desktop */

.desk {
  position: relative;
  min-height: min(880px, calc(100svh - 44px));
  padding: 84px 0 128px;
  overflow: clip;
  background:
    radial-gradient(60% 55% at 12% 8%, var(--wall-a) 0%, transparent 70%),
    radial-gradient(55% 60% at 92% 18%, var(--wall-b) 0%, transparent 72%),
    radial-gradient(70% 60% at 60% 105%, var(--wall-c) 0%, transparent 70%),
    var(--paper-2);
  border-bottom: 2.5px solid var(--ink);
  transition: background 0.6s;
}
:root[data-theme='night'] .desk {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32% 12%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 48% 30%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 9%, #fff8 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 34%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 14%, #fff5 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 52%, #fff5 50%, transparent 51%),
    radial-gradient(60% 55% at 12% 8%, var(--wall-a) 0%, transparent 70%),
    radial-gradient(55% 60% at 92% 18%, var(--wall-b) 0%, transparent 72%),
    radial-gradient(70% 60% at 60% 105%, var(--wall-c) 0%, transparent 70%),
    var(--paper-2);
}

/* Pixel clouds drifting across the wallpaper. */
.cloud {
  position: absolute; width: 132px; height: 48px; opacity: 0.9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8' shape-rendering='crispEdges'><path fill='%23fffdf7' d='M6 1h4v1h2V1h3v1h1v1h2v1h1v1h1v2H1V6h1V5h1V3h2V2h1z'/><path fill='%23f3dcd2' d='M1 6h20v1H1z'/></svg>") center / contain no-repeat;
  animation: drift 90s linear infinite;
  pointer-events: none;
}
:root[data-theme='night'] .cloud { opacity: 0.12; }
.cloud.c1 { top: 12%; left: -10%; }
.cloud.c2 { top: 48%; left: -20%; width: 90px; height: 33px; animation-duration: 130s; animation-delay: -60s; }
.cloud.c3 { top: 28%; left: -15%; width: 180px; height: 66px; animation-duration: 160s; animation-delay: -110s; }
@keyframes drift { to { transform: translateX(130vw); } }

.moon {
  position: absolute; top: 60px; right: 7%; width: 64px; height: 64px; border-radius: 50%;
  background: #fff4d6; box-shadow: 0 0 0 10px #fff4d620, 0 0 0 26px #fff4d610;
  opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s;
}
:root[data-theme='night'] .moon { opacity: 1; transform: none; }

.desk-stage { position: relative; width: min(1240px, 100% - 32px); margin: 0 auto; height: 640px; }

.win-welcome { position: absolute; left: 0; top: 50px; width: min(640px, 52%); z-index: 3; }
.win-welcome .win-body { padding: 32px 36px 32px; }
.win-welcome h1 { font-size: clamp(2.4rem, 4.3vw, 3.7rem); margin: 16px 0 18px; }
.win-welcome .lede { margin-bottom: 26px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.fine { font-size: 0.86rem; color: var(--ink-3); margin-top: 18px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.fine span::before { content: '✦ '; color: var(--rose); }

.win-notes { position: absolute; right: 4%; top: 24px; width: 300px; z-index: 1; }
.win-music { position: absolute; right: 14%; top: 280px; width: 330px; z-index: 2; }
.win-photo { position: absolute; left: 52%; top: 452px; width: 250px; z-index: 0; }
.win-sticky { position: absolute; right: 0; top: 470px; width: 214px; z-index: 4; background: var(--butter); }

.notes-list { list-style: none; margin: 0; padding: 16px 18px 18px; font-size: 0.95rem; display: grid; gap: 7px; }
.notes-list li { display: flex; gap: 10px; align-items: baseline; }
.notes-list li::before {
  content: ''; width: 13px; height: 13px; flex: none; border: 2px solid var(--ink); border-radius: 4px; transform: translateY(2px);
}
.notes-list li.done { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.notes-list li.done::before { background: var(--rose) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='white' d='M6 1h1v2H6v1H5v1H4v1H3V5H2V4H1V3h2v1h1V3h1V2h1z'/></svg>") center / 9px no-repeat; }

.music { padding: 16px 18px 18px; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.music .art { width: 64px; height: 64px; border-radius: 10px; border: 2px solid var(--ink); background: var(--lilac); display: grid; place-items: center; overflow: hidden; }
.music .track { font-weight: 700; line-height: 1.2; }
.music .artist { font-size: 0.85rem; color: var(--ink-3); }
.progress { grid-column: 1 / -1; height: 10px; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--paper-2); }
.progress i { display: block; height: 100%; width: 38%; background: var(--rose); animation: play 40s linear infinite; }
@keyframes play { from { width: 8%; } to { width: 100%; } }
.controls { grid-column: 1 / -1; display: flex; justify-content: center; gap: 22px; font-size: 14px; color: var(--ink-2); margin-top: -4px; }

.photo { height: 150px; background: linear-gradient(var(--sky), var(--mint)); border-radius: 0 0 calc(var(--r) - 3px) calc(var(--r) - 3px); position: relative; overflow: hidden; }
.photo .decor { position: absolute; bottom: 8px; }

.sticky-note { padding: 14px 16px 16px; font-size: 0.92rem; line-height: 1.45; }
.sticky-note b { font-family: var(--display); font-weight: 400; display: block; margin-bottom: 4px; font-size: 1rem; }
.win-sticky .win-bar { background: color-mix(in srgb, var(--butter) 70%, var(--ink) 8%); }

.dock {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: flex-end; gap: 10px;
  padding: 10px 14px;
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 2.5px solid var(--ink); border-radius: 22px;
  box-shadow: 0 6px 0 var(--shadow);
}
.dock .app { width: 50px; height: 50px; border-radius: 13px; border: 2px solid var(--ink); position: relative; display: grid; place-items: center; transition: transform 0.18s cubic-bezier(.3,1.6,.5,1); }
.dock .app:hover { transform: translateY(-8px) scale(1.12); }
.dock .app.running::after { content: ''; position: absolute; bottom: -9px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.dock .app img { width: 100%; height: 100%; border-radius: 11px; }
.dock .sep { width: 2px; align-self: stretch; background: var(--line); margin: 4px 2px; }
.dock .glyph { width: 26px; height: 26px; }

/* On smaller screens the desktop becomes a stack. */
@media (max-width: 1020px) {
  .desk { padding: 110px 0 130px; min-height: 0; }
  .desk-stage { row-gap: 110px; }
  .desk-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .win-welcome, .win-notes, .win-music, .win-photo, .win-sticky { position: relative; left: auto; right: auto; top: auto; width: auto; transform: none; }
  .win-welcome { grid-column: 1 / -1; }
  .win-photo, .win-sticky { display: none; }
}
@media (max-width: 640px) {
  .desk-stage { grid-template-columns: 1fr; }
  .win-music { display: none; }
  .win-welcome .win-body { padding: 26px 22px; }
  .desk { padding-top: 150px; }
  .pc-bubble { max-width: min(300px, 64vw); }
  .dock .app { width: 40px; height: 40px; border-radius: 11px; }
  .dock .hide-sm { display: none; }
}

/* ------------------------------------------------------------ try-it hint + ribbon */

.hint {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px 10px 18px;
  border: 2.5px dashed var(--ink); border-radius: 18px;
  background: var(--card);
  font-size: 0.95rem;
}
.hint kbd { font-family: var(--pixel); font-size: 11px; padding: 2px 6px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); }

.ribbon {
  position: relative; z-index: 2;
  background: var(--ink); color: var(--paper);
  border-block: 2.5px solid var(--ink);
  overflow: hidden; white-space: nowrap;
  font-family: var(--pixel); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 0 13px;
}
.ribbon .track { display: inline-flex; gap: 36px; animation: marquee 40s linear infinite; padding-left: 36px; }
.ribbon .track span::after { content: '✦'; margin-left: 36px; color: var(--rose); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ sections */

.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section-head { display: grid; gap: 16px; margin-bottom: 52px; max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }

/* Feature bento: every card is a window, and every window is a ledge. */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 34px 26px; }
.bento > * { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .span-7 { grid-column: span 7; }
.bento .span-5 { grid-column: span 5; }
.bento .span-8 { grid-column: span 8; }
.bento .span-12 { grid-column: span 12; }
@media (max-width: 980px) { .bento > *, .bento .span-5, .bento .span-7, .bento .span-8 { grid-column: span 6; } .bento .span-12 { grid-column: span 12; } }
@media (max-width: 680px) { .bento > *, .bento [class*='span-'] { grid-column: 1 / -1; } }

.feature { container-type: inline-size; }
.feature .win-body { display: grid; gap: 12px; }
.feature p { color: var(--ink-2); font-size: 0.99rem; }
.feature .demo {
  height: 170px; margin: -24px -24px 6px; position: relative; overflow: hidden;
  border-bottom: 2.5px solid var(--ink);
  background: var(--paper-2);
  display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding-bottom: 22px;
}
.feature .demo.tall { height: 220px; }
.feature .try { justify-self: start; margin-top: 4px; }
.tint-rose .demo { background: var(--blush); }
.tint-sky .demo { background: var(--sky); }
.tint-mint .demo { background: var(--mint); }
.tint-butter .demo { background: var(--butter); }
.tint-lilac .demo { background: var(--lilac); }
.tint-peach .demo { background: var(--peach); }

/* A walking cat on a miniature window, for the ledge card. */
.mini-desk { position: absolute; inset: 0; }
.mini-win { position: absolute; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); }
.mini-win::before { content: ''; position: absolute; inset: 0 0 auto; height: 12px; border-bottom: 2px solid var(--ink); background: var(--paper-2); border-radius: 6px 6px 0 0; }
.mini-win.a { left: 10%; right: 38%; top: 72px; bottom: -20px; }
.mini-win.b { left: 50%; right: 8%; top: 118px; bottom: -20px; }
.walker { position: absolute; left: 12%; top: 72px; transform: translateY(-100%); animation: stroll 9s ease-in-out infinite; }
.walker .stamp { display: block; }
@keyframes stroll {
  0% { left: 12%; } 45% { left: calc(62% - 70px); } 50% { left: calc(62% - 70px); transform: translateY(-100%) scaleX(-1); }
  95% { left: 12%; transform: translateY(-100%) scaleX(-1); } 100% { left: 12%; transform: translateY(-100%); }
}

.file-icon {
  width: 34px; height: 42px; position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: 3px 10px 3px 3px;
  box-shadow: 3px 3px 0 var(--shadow); animation: bob 2.4s ease-in-out infinite;
}
.file-icon::after { content: 'PDF'; position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-family: var(--pixel); font-size: 8px; color: var(--rose-deep); }
@keyframes bob { 50% { transform: translateY(-6px); } }

.arc { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 3 8; stroke-linecap: round; opacity: 0.55; }

.bars { display: grid; gap: 10px; width: 78%; margin-bottom: 4px; }
.bar { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 10.5px; text-transform: uppercase; }
.bar .fill { height: 14px; border: 2px solid var(--ink); border-radius: 99px; background: var(--card); overflow: hidden; }
.bar .fill i { display: block; height: 100%; background: var(--c, var(--rose)); width: var(--v); animation: breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { from { width: calc(var(--v) - 14%); } to { width: var(--v); } }

.seg-control { display: inline-flex; border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px; background: var(--card); gap: 2px; flex-wrap: wrap; }
.seg-control button { border: 0; background: none; padding: 7px 13px 6px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.88rem; }
.seg-control button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.helpers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.helpers li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; color: var(--ink-2); line-height: 1.45; }
.helpers li b { display: block; color: var(--ink); font-weight: 700; }
.px-ico { width: 34px; height: 34px; border: 2px solid var(--ink); border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); }
.px-ico svg { width: 20px; height: 20px; }
@container (max-width: 520px) { .helpers { grid-template-columns: 1fr; } }
.feature .tour-body { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
@container (max-width: 640px) { .feature .tour-body { grid-template-columns: 1fr; } }

.privacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.privacy-grid div { border: 2px solid var(--ink); border-radius: 12px; padding: 12px 14px; background: var(--paper-2); }
.privacy-grid strong { font-family: var(--display); font-weight: 400; font-size: 1.6rem; display: block; line-height: 1.1; }
.privacy-grid span { font-size: 0.85rem; color: var(--ink-2); }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline; color: var(--ink-2); font-size: 0.96rem; }
.steps li::before { content: counter(s); font-family: var(--pixel); font-size: 12px; width: 26px; height: 26px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; background: var(--butter); color: var(--ink); }
.steps li b { color: var(--ink); }

/* ------------------------------------------------------------ decor crops from the art pack */

.decor { background: url('../assets/items/decor.png') no-repeat; background-size: calc(1024px * var(--s, 1)) auto;
  width: calc(var(--w) * var(--s, 1) * 1px); height: calc(var(--h) * var(--s, 1) * 1px);
  background-position: calc(var(--x) * var(--s, 1) * -1px) calc(var(--y) * var(--s, 1) * -1px); }
.decor.tree { --x: 556; --y: 222; --w: 116; --h: 166; }
.decor.plant { --x: 134; --y: 296; --w: 48; --h: 112; }
.decor.post { --x: 188; --y: 14; --w: 70; --h: 114; }
.decor.bed { --x: 198; --y: 134; --w: 118; --h: 84; }
.decor.window { --x: 672; --y: 298; --w: 96; --h: 146; }
.decor.bowl { --x: 330; --y: 616; --w: 54; --h: 38; }
.decor.mouse { --x: 452; --y: 620; --w: 56; --h: 38; }
.decor.food { --x: 588; --y: 542; --w: 44; --h: 64; }
.decor.frames { --x: 448; --y: 198; --w: 98; --h: 98; }
.decor.sleeper { --x: 964; --y: 780; --w: 52; --h: 38; }
.decor.shelf { --x: 8; --y: 286; --w: 110; --h: 132; }

/* ------------------------------------------------------------ quiet-by-default */

.quiet { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .quiet { grid-template-columns: 1fr; } }
.states { display: grid; gap: 10px; margin-top: 28px; }
.state {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center;
  padding: 12px 14px; border: 2.5px solid var(--line); border-radius: 14px; transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
}
.state b { font-family: var(--pixel); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.state span { color: var(--ink-2); font-size: 0.95rem; }
.state.on { border-color: var(--ink); background: var(--card); transform: translateX(6px); box-shadow: 4px 4px 0 var(--shadow); }
.state.on b::after { content: ' ●'; color: var(--rose); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.editor textarea {
  width: 100%; min-height: 190px; resize: vertical; border: 0; outline: 0; background: transparent;
  padding: 20px 22px; font: inherit; font-size: 1.05rem; color: var(--ink); line-height: 1.6;
}
.editor textarea::placeholder { color: var(--ink-3); }
.editor .foot { border-top: 2px solid var(--line); padding: 14px 18px 18px; display: grid; gap: 10px; }
.slider-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font-size: 0.9rem; font-weight: 700; }
.slider-labels { display: flex; justify-content: space-between; font-family: var(--pixel); font-size: 10px; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper-2); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--rose); cursor: grab; box-shadow: 0 2px 0 var(--shadow); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--rose); cursor: grab; }

/* ------------------------------------------------------------ a day with it */

.day { background: var(--paper-2); border-block: 2.5px solid var(--ink); overflow: hidden; }
.day-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 300px); gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px max(16px, calc((100vw - 1200px) / 2)) 50px;
  scroll-padding-inline: max(16px, calc((100vw - 1200px) / 2));
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
  background: linear-gradient(90deg, #ffe6cf 0%, #d6ecf5 22%, #e7f3e4 40%, #fff0c4 56%, #fbd2c5 72%, #cbb9dc 86%, #3a3354 100%);
}
:root[data-theme='night'] .day-track { background: linear-gradient(90deg, #3d2d3a, #26334a 30%, #2a3c38 45%, #4b3f2a 60%, #4a2f3f 75%, #2b2340 90%, #15111e); }
.moment { scroll-snap-align: start; }
.moment .win-body { display: grid; gap: 10px; padding: 20px; }
.moment .time { font-family: var(--pixel); font-size: 22px; letter-spacing: 0.02em; }
.moment .scene { height: 120px; border: 2px solid var(--ink); border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; background: var(--paper-2); position: relative; overflow: hidden; }
.moment p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.5; }
.moment q { display: block; font-family: var(--display); font-size: 0.96rem; color: var(--ink); quotes: '“' '”'; }
.day-hint { font-family: var(--pixel); font-size: 11px; text-transform: uppercase; color: var(--ink-3); text-align: right; }

/* ------------------------------------------------------------ breeds */

.family-tabs { display: flex; justify-content: center; margin-bottom: 30px; }
.breed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.breed {
  position: relative; display: grid; justify-items: center; gap: 8px; text-align: center;
  padding: 20px 10px 14px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--card);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, background-color 0.3s;
  box-shadow: 0 4px 0 var(--shadow);
}
.breed:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 8px 0 var(--shadow); }
.breed:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow); }
.breed .pad { height: 92px; display: flex; align-items: flex-end; justify-content: center; }
.breed .name { font-weight: 700; line-height: 1.2; }
.breed .temper { font-family: var(--pixel); font-size: 10px; text-transform: uppercase; color: var(--ink-3); }
.breed .adopt { position: absolute; top: 8px; right: 8px; font-family: var(--pixel); font-size: 9.5px; background: var(--rose); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 7px 1px; opacity: 0; transform: scale(0.8); transition: 0.15s; }
.breed:hover .adopt, .breed:focus-visible .adopt { opacity: 1; transform: none; }
.breed.adopted { background: var(--blush); }
.breed.adopted .adopt { opacity: 1; transform: none; background: var(--ink); }
.household-note { text-align: center; margin-top: 26px; color: var(--ink-2); font-size: 0.95rem; }

/* ------------------------------------------------------------ numbers */

.numbers { background: var(--ink); color: var(--paper); border-block: 2.5px solid var(--ink); }
.numbers .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding-block: 56px; }
.numbers div { display: grid; gap: 6px; }
.numbers strong { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; color: var(--peach); }
:root[data-theme='night'] .numbers { background: #0f0c14; color: var(--ink); }
.numbers span { font-size: 0.95rem; opacity: 0.85; }
@media (max-width: 860px) { .numbers .wrap { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------ faq */

.faq { display: grid; gap: 14px; max-width: 820px; margin-inline: auto; }
.faq details { border: 2.5px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--shadow); overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 56px 18px 22px; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-family: var(--pixel); font-size: 20px; transition: transform 0.2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > div { padding: 0 22px 20px; color: var(--ink-2); }

/* ------------------------------------------------------------ final call */

.finale { text-align: center; }
.finale .win { max-width: 760px; margin: 0 auto; }
.finale .win-body { padding: 54px 32px 44px; display: grid; justify-items: center; gap: 18px; }
.finale h2 { max-width: 14ch; }
.finale .bedside { display: flex; align-items: flex-end; gap: 12px; margin-top: 10px; }

/* ------------------------------------------------------------ footer */

.footer { border-top: 2.5px solid var(--ink); background: var(--paper-2); padding: 56px 0 40px; font-size: 0.93rem; }
.footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer h4 { font-family: var(--pixel); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin: 0 0 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer .small { color: var(--ink-3); font-size: 0.84rem; margin-top: 12px; max-width: 42ch; }
.footer .legal { grid-column: 1 / -1; border-top: 2px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--ink-3); font-size: 0.84rem; }
@media (max-width: 760px) { .footer .wrap { grid-template-columns: 1fr 1fr; } .footer .wrap > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------ page heroes (pricing, download) */

.page-hero { padding: 90px 0 120px; min-height: 0; }
@media (max-width: 1020px) { .page-hero { padding: 110px 0 110px; } .page-hero .desk-stage { display: block; } }
.page-hero .win-welcome { position: relative; left: auto; top: auto; width: min(820px, 100%); margin: 0 auto; }
.page-hero .win-welcome h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
.page-hero .desk-stage { height: auto; }

/* ------------------------------------------------------------ pricing */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; align-items: stretch; margin-top: -70px; position: relative; z-index: 6; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.plan { display: flex; flex-direction: column; }
.plan .win-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.plan .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .price strong { font-family: var(--display); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.plan .price span { color: var(--ink-3); font-size: 0.95rem; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; }
.plan li::before { content: ''; width: 14px; height: 12px; background: var(--rose); -webkit-mask: var(--paw) center / contain no-repeat; mask: var(--paw) center / contain no-repeat; transform: translateY(1px); }
.plan .btn { width: 100%; }
.plan.featured { background: var(--blush); transform: translateY(-14px); }
.plans.solo { grid-template-columns: 1fr; max-width: 860px; margin-inline: auto; }
.plan-solo { transform: none; }
.plan-solo .win-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: center; padding: 34px; }
.plan-buy { display: grid; gap: 14px; justify-items: start; }
.plan-solo ul { flex: none; }
@media (max-width: 760px) { .plan-solo .win-body { grid-template-columns: 1fr; padding: 26px; } }
.plan.featured .win-bar { background: var(--peach); }
@media (max-width: 960px) { .plan.featured { transform: none; } }
.ribbon-tag { position: absolute; top: -16px; right: 18px; z-index: 2; }

.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 5px 0 var(--shadow); font-size: 0.96rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 2px solid var(--line); }
.compare thead th { background: var(--paper-2); font-family: var(--pixel); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2.5px solid var(--ink); }
.compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 20%; }
.compare .yes::before { content: ''; display: inline-block; width: 14px; height: 12px; background: var(--rose); -webkit-mask: var(--paw) center / contain no-repeat; mask: var(--paw) center / contain no-repeat; }
.compare .no { color: var(--ink-3); }
.table-wrap { overflow-x: auto; padding: 4px 4px 10px; }

.never { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.never div { border: 2.5px solid var(--ink); border-radius: 14px; padding: 18px; background: var(--card); text-align: center; font-weight: 700; }
.never s { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; text-decoration-color: var(--rose); text-decoration-thickness: 3px; margin-bottom: 4px; }
.never span { font-weight: 400; font-size: 0.88rem; color: var(--ink-2); }
@media (max-width: 800px) { .never { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ download */

.dl-card { max-width: 860px; margin: -70px auto 0; position: relative; z-index: 6; }
.dl-card .win-body { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 34px; }
.dl-card .icon { width: 128px; height: 128px; }
.dl-card h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.dl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; }
.dl-meta .chip { background: var(--paper-2); }
@media (max-width: 640px) { .dl-card .win-body { grid-template-columns: 1fr; justify-items: center; text-align: center; } .dl-meta, .dl-card .cta-row { justify-content: center; } }

.install { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 860px) { .install { grid-template-columns: 1fr; } }
.install .demo { height: 150px; }

.changelog { max-width: 820px; margin: 0 auto; }
.changelog .win-body { display: grid; gap: 18px; }
.changelog h3 { display: flex; align-items: center; gap: 10px; }
.changelog ul { margin: 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 6px; }

.pocket { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.phone { width: 230px; height: 420px; border: 3px solid var(--ink); border-radius: 44px; background: var(--card); position: relative; box-shadow: 8px 8px 0 var(--shadow); overflow: hidden; }
.phone .island { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 104px; height: 30px; background: #120c0a; border-radius: 20px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; }
.phone .island .stamp { transform: translateY(-2px); }
.phone .screen { position: absolute; inset: 60px 14px 20px; border-radius: 20px; background: linear-gradient(var(--sky), var(--mint)); display: grid; place-items: end center; padding-bottom: 20px; border: 2px solid var(--ink); }
@media (max-width: 760px) { .pocket { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* ------------------------------------------------------------ prose pages */

.prose { max-width: 720px; margin: 0 auto; }
.prose .win-body { padding: 36px; display: grid; gap: 16px; }
.prose h2 { font-size: 1.6rem; margin-top: 10px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol:not(.steps) { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.prose h2 { scroll-margin-top: 70px; }
.prose .updated { font-family: var(--pixel); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.prose address { font-style: normal; color: var(--ink); line-height: 1.6; }
.summary { border: 2.5px dashed var(--ink); border-radius: 14px; padding: 16px 18px; background: var(--paper-2); display: grid; gap: 8px; }
.summary b { color: var(--ink); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-nav a { text-decoration: none; }
.legal-nav a[aria-current='page'] { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------ reveal */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; }

.load-in { animation: pop-in 0.8s cubic-bezier(.2,1.3,.4,1) both; }
.load-in.d1 { animation-delay: 0.1s; } .load-in.d2 { animation-delay: 0.22s; } .load-in.d3 { animation-delay: 0.34s; } .load-in.d4 { animation-delay: 0.46s; }
@keyframes pop-in { from { opacity: 0; translate: 0 30px; scale: 0.96; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ the cats themselves */

.pc-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 60; pointer-events: none; transition: opacity 0.4s; }
.pc-layer.hidden { opacity: 0; visibility: hidden; }
.pc-cat { position: absolute; left: 0; top: 0; will-change: transform; }
.pc-cat.leaving { opacity: 0; transition: opacity 0.45s; }
.pc-sprite { position: absolute; inset: 0; background-repeat: no-repeat; }
.pc-hit {
  position: absolute; bottom: 0; pointer-events: auto; cursor: grab;
  background: none; border: 0; padding: 0; margin: 0; border-radius: 40% 40% 12px 12px;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.pc-cat.held .pc-hit { cursor: grabbing; }
.pc-ball {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; border: 0; padding: 0;
  background-color: transparent; background-repeat: no-repeat;
  image-rendering: pixelated; touch-action: none; will-change: transform;
}
.pc-ball.leaving { opacity: 0; transition: opacity 0.4s; }
.pc-bubble {
  position: absolute; left: 0; top: 0; max-width: 300px; width: max-content;
  padding: 8px 13px 7px; border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--card); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 3px 0 var(--shadow);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.pc-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--card); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg);
}
.pc-bubble.show { opacity: 1; }
.pc-bubble.side::after { display: none; }
.pc-heart {
  position: absolute; width: 14px; height: 12px; margin-left: -7px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'><path fill='%2333201a' d='M1 0h2v1h1V0h2v1h1v2H6v1H5v1H4v1H3V5H2V4H1V3H0V1h1z'/><path fill='%23f08c86' d='M1 1h2v1h1V1h2v2H5v1H4v1H3V4H2V3H1z'/></svg>") center / contain no-repeat;
  animation: heart 1.1s ease-out both;
}
@keyframes heart { from { opacity: 0; transform: translate(0, 6px) scale(0.6); } 20% { opacity: 1; } to { opacity: 0; transform: translate(var(--drift), -52px) scale(1.2); } }