/* Lapsa – the device's tokens (lapsa/docs/plan.md, section 3) */
:root {
  --cream: #FBF6EC;
  --paper: #FFFDF8;
  --ink: #3A2E26;
  --ink-soft: #6E5F53;
  --fox: #E8793A;
  --fox-deep: #A4481C;
  --fox-tip: #7A4130;
  --muzzle: #FFF8EE;
  --ear-inner: #FBE3CF;
  --blush: #F4A3A0;
  --star: #E8A417;
  --lavender: #E9E4FB;
  --mint: #DDF1EC;
  --peach: #FDE6D6;
  --pink: #FBE3EC;
  --butter: #FFF1CC;
  --sky: #E2EEFB;
  --leaf: #E3F2DA;
  --night: #1B1E2E;
  --night-card: #2A2E45;
  --moon: #F5C96B;
  --night-ink: #8E93B5;
  --hand: "Gaegu", "Comic Sans MS", cursive;
  --round: "Baloo 2", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 500 18px/1.55 var(--round);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--fox-deep); }
h1, h2, h3 { font-weight: 800; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(34px, 5vw, 56px); }
p { margin: 0 0 1em; }
.scribble { font-family: var(--hand); font-size: 1.35em; line-height: 1.1; color: var(--fox-deep); }
button { font: inherit; color: inherit; cursor: pointer; }

.btn {
  display: inline-block;
  background: var(--fox);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  padding: 14px 26px 12px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 5px 0 var(--fox-deep);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 7px 0 var(--fox-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--fox-deep); }
.btn-soft { background: var(--butter); color: var(--ink); box-shadow: 0 5px 0 #E6CF8F; }
.btn-soft:hover { box-shadow: 0 7px 0 #E6CF8F; }
.btn-moon { background: var(--moon); color: var(--night); box-shadow: 0 5px 0 #B98E35; }
.btn-moon:hover { box-shadow: 0 7px 0 #B98E35; }

/* ------------------------------------------------ header */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: 1280px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 30px; }
.logo-fox { width: 46px; height: 46px; display: block; }
.top nav { display: flex; gap: 22px; align-items: center; font-family: var(--hand); font-size: 23px; }
.top nav a { color: var(--ink); text-decoration: none; }
.top nav a:hover { color: var(--fox-deep); text-decoration: underline wavy var(--fox) 2px; text-underline-offset: 5px; }
.top nav .nav-cta { background: var(--butter); padding: 2px 14px; border-radius: 14px 18px 12px 20px; transform: rotate(-2deg); }

/* ------------------------------------------------ hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 24px var(--gutter) 90px;
}
.hero h1 { font-size: clamp(40px, 5.6vw, 74px); }
.hero-kicker { margin: 0 0 10px; transform: rotate(-3deg); transform-origin: left; display: inline-block; }
.hl {
  white-space: nowrap; padding: 0 .1em; margin: 0 -.1em; border-radius: .5em .3em .6em .25em;
  background: linear-gradient(176deg, transparent 56%, var(--c) 57% 80%, transparent 81%) no-repeat left / 0 100%;
  animation: marker .55s ease-out forwards; animation-delay: var(--d, .3s);
}
.hl-1 { --c: #CFE2F8; --d: .3s; }
.hl-2 { --c: #D3EBC4; --d: .55s; }
.hl-3 { --c: #F8D3E0; --d: .8s; }
.hl-4 { --c: #DCD3F7; --d: 1.05s; }
@keyframes marker { to { background-size: 100% 100%; } }
.lead { font-size: 20px; color: var(--ink-soft); max-width: 34em; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }
.try-me { display: inline-flex; align-items: center; gap: 4px; transform: rotate(4deg); }
.try-me svg { width: 70px; height: 34px; fill: none; stroke: var(--fox-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hero-device { position: relative; }
.device {
  position: relative; width: min(100%, 520px); margin: 0 auto;
  padding: 22px; border-radius: 46px 50px 44px 52px;
  background: linear-gradient(160deg, #F6E3CB, #E9C9A4 70%, #DDB58B);
  box-shadow: inset 0 3px 0 #FFF4E4, inset 0 -6px 0 #CFA276, 0 30px 50px -22px #A4481C66;
  transform: rotate(var(--tilt, 2deg));
  animation: settle 1s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes settle { from { transform: translateY(40px) rotate(-6deg); opacity: 0; } }
.device::after { /* the stand's shadow on the table */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -26px; height: 24px;
  background: radial-gradient(closest-side, #7A413033, transparent); z-index: -1;
}
.device-button {
  position: absolute; top: -9px; right: 70px; width: 56px; height: 14px; border-radius: 10px 10px 3px 3px;
  background: var(--fox); box-shadow: inset 0 -3px 0 var(--fox-deep);
}
.screen {
  position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden;
  container-type: inline-size; background: #6FB0E8;
  box-shadow: 0 0 0 6px #3A2E26, 0 0 0 8px #CFA276;
  user-select: none; -webkit-user-select: none;
}
.sky { position: absolute; inset: 0; transition: background 1.2s ease; }
.screen[data-window="morning"] .sky { background: linear-gradient(#F7A98B, #FFD59A 55%, #FFE7B8); }
.screen[data-window="day"] .sky { background: linear-gradient(#3F8FE0, #7DB9EE 60%, #A9D3F4); }
.screen[data-window="evening"] .sky { background: linear-gradient(#9B86D8, #E8A6B6 55%, #F6C891); }
.screen[data-window="night"] .sky { background: linear-gradient(var(--night), #222742); }
.sun-disc {
  position: absolute; width: 22cqw; aspect-ratio: 1; border-radius: 50%; right: 12cqw; top: 26cqw;
  background: radial-gradient(circle, #FFF2B8 45%, #FFE38A00 70%); transition: opacity 1s, top 1.2s;
}
.screen[data-window="day"] .sun-disc { top: 16cqw; opacity: .8; }
.screen[data-window="evening"] .sun-disc { top: 52cqw; background: radial-gradient(circle, #FFD1A0 40%, #FFB07000 70%); }
.screen[data-window="night"] .sun-disc { opacity: 0; }
.clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud {
  position: absolute; left: 0; height: 7cqw; border-radius: 99px; background: #fff; opacity: .92;
  animation: drift linear infinite;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 45%; aspect-ratio: 1; left: 15%; bottom: 35%; }
.cloud::after { width: 32%; aspect-ratio: 1; left: 50%; bottom: 40%; }
.screen[data-window="evening"] .cloud { background: #FFE9EC; }
.screen[data-window="night"] .cloud { opacity: 0; }
@keyframes drift { from { transform: translateX(-40cqw); } to { transform: translateX(120cqw); } }
.stars-bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; }
.screen[data-window="night"] .stars-bg { opacity: 1; }
.stars-bg i { position: absolute; width: 1cqw; height: 1cqw; border-radius: 50%; background: #FFF6D8; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; } }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34cqw; }
.hill-back { fill: #7FBF83; transition: fill 1s; }
.hill-front { fill: #5FA86C; transition: fill 1s; }
.screen[data-window="morning"] .hill-back { fill: #9CC98A; }
.screen[data-window="morning"] .hill-front { fill: #84B974; }
.screen[data-window="evening"] .hill-back { fill: #8E9E7E; }
.screen[data-window="evening"] .hill-front { fill: #71866A; }
.screen[data-window="night"] .hill-back { fill: #262B45; }
.screen[data-window="night"] .hill-front { fill: #2E3453; }

.pills { position: absolute; top: 3.5cqw; left: 5cqw; right: 5cqw; display: flex; justify-content: space-between; z-index: 2; }
.pill {
  display: flex; align-items: center; gap: 2cqw; height: 13cqw; padding: 0 4.5cqw; border-radius: 99px;
  font-weight: 700; font-size: 6.5cqw; background: var(--muzzle);
}
.pill img { width: 7.5cqw; }
.star-pill { background: var(--butter); color: #7A4F00; }
.screen[data-window="night"] .pill { background: var(--night-card); color: var(--night-ink); }
.screen[data-window="night"] .star-pill { opacity: 0; }

.tiles {
  position: absolute; top: 20cqw; left: 5cqw; right: 5cqw; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.3cqw;
  transition: opacity .5s, transform .5s;
}
.tile {
  aspect-ratio: 1.24; border-radius: 5cqw; border: 0; padding: 0;
  display: grid; place-items: center;
  transition: transform .2s ease-out; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
.tile img { width: 45%; pointer-events: none; }
.tile:active, .tile.squish { transform: scale(.9); }
.tile:hover img { animation: wiggle .5s ease-in-out; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.screen[data-window="night"] .tiles { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.night-ui { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .8s; pointer-events: none; }
.screen[data-window="night"] .night-ui { opacity: 1; }
.night-moon { position: absolute; width: 22cqw; left: 39cqw; top: 17cqw; animation: bob 5s ease-in-out infinite; }
.night-sounds { position: absolute; top: 44cqw; left: 0; right: 0; display: flex; justify-content: center; gap: 4cqw; }
.night-sounds span { width: 15cqw; aspect-ratio: 1; border-radius: 50%; border: .5cqw solid #3A3F5C; display: grid; place-items: center; }
.night-sounds img { width: 60%; }

.peek {
  position: absolute; z-index: 3; left: 50%; bottom: 0; width: 34cqw; aspect-ratio: 1;
  border: 0; padding: 0; background: none;
  transform: translate(-50%, 38%); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), width .5s;
}
.peek:hover { transform: translate(-50%, 30%); }
.peek.up { transform: translate(-50%, -18cqw); width: 56cqw; }
.screen.talking .tiles, .screen.talking .night-ui { opacity: .15; }

.bubble {
  position: absolute; z-index: 5; left: 50%; top: -10px; max-width: 330px; width: max-content;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 26px 22px 28px 20px;
  padding: 12px 18px 10px; font-family: var(--hand); font-size: 25px; line-height: 1.1;
  transform: translate(-50%, 10px) scale(.7) rotate(-2deg); opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1), opacity .2s;
  box-shadow: 5px 6px 0 #3A2E2622;
}
.bubble::after {
  content: ""; position: absolute; left: 44%; bottom: -16px; width: 22px; height: 22px;
  background: var(--paper); border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  transform: skewX(20deg) rotate(45deg); border-radius: 0 0 6px 0;
}
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-2deg); }
.bubble-tone { display: block; font-family: var(--round); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--fox); }

.time-note { margin-top: 44px; text-align: center; font-size: 24px; }
.time-chips { display: flex; justify-content: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.time-chips button {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--hand); font-size: 20px;
  background: var(--paper); border: 2px dashed #CFA276; border-radius: 16px 12px 18px 14px; padding: 2px 12px 2px 6px;
  transition: transform .15s;
}
.time-chips button:nth-child(odd) { transform: rotate(-2deg); }
.time-chips button:nth-child(even) { transform: rotate(1.5deg); }
.time-chips button:hover { transform: rotate(0) scale(1.06); }
.time-chips button[aria-pressed="true"] { background: var(--butter); border-style: solid; border-color: var(--star); }
.time-chips img { width: 26px; }

/* ------------------------------------------------ the fox (SVG built in main.js) */
.fox-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fox-svg .body { animation: bob 3.6s ease-in-out infinite; transform-origin: 100px 180px; }
.fox-svg .eye { transform-box: fill-box; transform-origin: center; }
.fox-svg.blink .eye { animation: blink .16s ease-in-out; }
.fox-svg .ear-l, .fox-svg .ear-r { transform-origin: 64px 70px; transition: transform .25s; }
.fox-svg .ear-r { transform-origin: 136px 70px; }
.fox-svg.twitch-l .ear-l { animation: twitch-l .22s ease-in-out; }
.fox-svg.twitch-r .ear-r { animation: twitch-r .22s ease-in-out; }
.fox-svg .mouth-open { opacity: 0; transform-box: fill-box; transform-origin: top; }
.fox-svg.speaking .mouth-open { opacity: 1; animation: talk .32s ease-in-out infinite alternate; }
.fox-svg.speaking .mouth-closed { opacity: 0; }
.fox-svg.speaking .ear-l, .fox-svg.speaking .ear-r { transform: rotate(0); }
.fox-svg.listening .ear-l { transform: rotate(-6deg); }
.fox-svg.listening .ear-r { transform: rotate(6deg); }
@keyframes bob { 50% { transform: translateY(3px); } }
@keyframes blink { 50% { transform: scaleY(.08); } }
@keyframes twitch-l { 50% { transform: rotate(-10deg); } }
@keyframes twitch-r { 50% { transform: rotate(10deg); } }
@keyframes talk { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.fox-svg.sleepy .body { animation-duration: 6s; }

/* ------------------------------------------------ is / isn't */
.isnt {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 40px var(--gutter) 110px;
}
.notebook {
  position: relative; padding: 38px 36px 30px 76px; transform: rotate(-1.2deg);
  background:
    linear-gradient(90deg, transparent 56px, #F0A2A0 56px, #F0A2A0 58px, transparent 58px),
    repeating-linear-gradient(var(--paper) 0 37px, #D7E6F5 37px 39px);
  background-color: var(--paper);
  box-shadow: 0 18px 40px -20px #3A2E2655, 0 2px 0 #E8DCC8;
}
.scribble-title { font-family: var(--hand); font-weight: 700; font-size: 38px; color: var(--ink); margin: 0 0 6px; line-height: 39px; }
.scribble-title.is { margin-top: 20px; color: var(--fox-deep); }
.notebook ul { list-style: none; padding: 0; margin: 0; font-family: var(--hand); font-size: 28px; line-height: 39px; }
.crossed li span { position: relative; }
.crossed li span::after {
  content: ""; position: absolute; left: -6px; right: -6px; top: 52%; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 70 10, 110 5 S 170 3, 198 7' fill='none' stroke='%23E8793A' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path .5s ease-out;
}
.crossed.seen li span::after { clip-path: inset(0 0 0 0); }
.crossed.seen li:nth-child(2) span::after { transition-delay: .35s; }
.crossed.seen li:nth-child(3) span::after { transition-delay: .7s; }
.crossed.seen li:nth-child(4) span::after { transition-delay: 1.05s; }
.crossed.seen li:nth-child(5) span::after { transition-delay: 1.4s; }
.crossed li { color: var(--ink-soft); }
.ticked li::before { content: "✓ "; color: var(--fox); font-weight: 700; }
.tape { position: absolute; width: 110px; height: 30px; background: #F5C96B99; box-shadow: 0 1px 2px #0001; }
.tape-a { top: -12px; left: 38%; transform: rotate(-4deg); }
.tape-b { bottom: -10px; right: 24px; transform: rotate(6deg); background: #DDF1ECcc; }
.tape-c { bottom: -12px; left: 30px; transform: rotate(-7deg); background: #FBE3ECdd; }
.isnt-side { position: relative; }
.big-quote { font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.isnt-side p:not(.big-quote) { color: var(--ink-soft); }
.float-icon { position: absolute; width: 70px; animation: bob 4s ease-in-out infinite; }
.fi-1 { top: -70px; right: 10px; transform: rotate(14deg); }
.fi-2 { bottom: -70px; left: 30%; width: 56px; animation-delay: -1.7s; }

/* ------------------------------------------------ a day */
.section-head { max-width: 1180px; margin: 0 auto 28px; padding: 0 var(--gutter); }
.section-head p { color: var(--ink-soft); max-width: 40em; }
.section-head .scribble { color: var(--fox-deep); }
.day { padding-bottom: 110px; }
.day-scroll { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; scrollbar-color: var(--fox) transparent; }
.day-scroll:focus-visible { outline: 3px dashed var(--fox); }
.day-track {
  display: flex; gap: 46px; width: max-content; padding: 50px var(--gutter) 70px;
  background: linear-gradient(90deg, #FFE3D1 0%, #FFF1CC 18%, #E2EEFB 38%, #E2EEFB 55%, #FDE0C4 70%, #E6DDF7 84%, #262B45 95%, var(--night) 100%);
  border-radius: 0;
}
.moment { scroll-snap-align: center; width: 290px; flex: none; position: relative; }
.polaroid {
  background: #fff; padding: 12px 12px 14px; box-shadow: 0 16px 30px -14px #3A2E2666, 0 1px 3px #0002;
  transform: rotate(var(--rot, 0deg)); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.polaroid:hover { transform: rotate(0deg) scale(1.04); }
.polaroid img { border-radius: 6px; width: 100%; height: auto; aspect-ratio: 1; }
.polaroid .cap { font-family: var(--hand); font-size: 22px; line-height: 1.05; padding: 10px 4px 0; min-height: 3.2em; }
.moment time {
  position: absolute; z-index: 2; top: -40px; left: 6px; font-family: var(--hand); font-weight: 700; font-size: 30px;
  transform: rotate(-6deg); color: var(--fox-deep);
}
.moment .says { margin-top: 18px; font-size: 16px; color: var(--ink-soft); padding-left: 12px; border-left: 3px solid var(--fox); }
.moment .says b { color: var(--ink); font-weight: 600; }
.moment.dark time { color: var(--moon); }
.moment.dark .says { color: var(--night-ink); border-color: var(--moon); }
.moment.dark .says b { color: #E8E6F5; }
.moment .pin { position: absolute; top: -8px; left: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--pin, var(--fox)); box-shadow: inset -3px -3px 0 #0002, 0 3px 4px #0003; z-index: 1; }

/* ------------------------------------------------ words */
.words {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 20px var(--gutter) 120px;
}
.words-copy p { color: var(--ink-soft); }
.words-copy em { color: var(--fox-deep); font-style: normal; font-weight: 700; }
.retell { color: var(--ink) !important; font-size: 30px; background: var(--butter); padding: 12px 18px 10px; border-radius: 20px 26px 18px 24px; transform: rotate(-1deg); display: inline-block; }
.small { font-size: 15px; }
.deck-wrap { text-align: center; }
.deck { position: relative; height: 330px; margin-bottom: 26px; }
.line-card {
  position: absolute; inset: 0; margin: auto; width: min(100%, 420px); height: 300px;
  background: var(--paper); border-radius: 18px; padding: 30px 30px 24px; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 14px 30px -16px #3A2E2677, 0 1px 0 #E8DCC8;
  background-image: repeating-linear-gradient(transparent 0 33px, #F1E7D6 33px 34px);
  transition: transform .5s cubic-bezier(.3, 1.2, .5, 1), opacity .4s;
}
.line-card .when { font-family: var(--hand); font-size: 24px; color: var(--fox-deep); }
.line-card .tone { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; color: var(--ink-soft); margin: 4px 0 8px; }
.line-card .text { font-size: 24px; font-weight: 600; line-height: 1.3; }
.line-card.gone { transform: translate(120%, -40px) rotate(24deg); opacity: 0; }
.deck-note { font-size: 20px; margin-top: 16px; }

/* ------------------------------------------------ parents */
.parents { padding-bottom: 120px; }
.phones { display: flex; justify-content: center; gap: clamp(30px, 8vw, 120px); flex-wrap: wrap; padding: 30px var(--gutter) 0; }
.phone-col { position: relative; }
.phone {
  width: 300px; border-radius: 48px; padding: 11px; background: #2B2522;
  box-shadow: 0 30px 50px -20px #3A2E2688, inset 0 0 0 2px #50463F;
  transform: rotate(var(--rot, -2deg));
}
.phone-screen {
  height: 610px; border-radius: 38px; overflow: hidden; background: #F2F1F6; padding: 14px 16px;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; font-size: 13px; color: #111;
}
.app-insights { background: #FAF6EE; }
.status { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; padding: 0 12px 26px; }
.status .dots { letter-spacing: -1px; font-size: 8px; }
.phone-screen h3 { font-family: inherit; font-size: 30px; font-weight: 800; margin: 0 6px 12px; letter-spacing: -.02em; }
.card { background: #fff; border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; }
.star-card { display: flex; gap: 12px; align-items: center; }
.star-card .fox-slot { width: 64px; height: 64px; flex: none; }
.star-card b { font-size: 19px; }
.star-card small { color: var(--fox); font-size: 11px; }
.star-row { display: flex; gap: 3px; margin: 4px 0 2px; }
.star-row img { width: 20px; }
.star-row img.off { filter: grayscale(1) opacity(.3); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.q { border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 10px; font-size: 11px; font-weight: 600; color: var(--fox); text-align: center; line-height: 1.1; }
.q img { width: 34px; }
.q-star { background: #F4ECCC; }
.q-feel { background: #C9DDF4; }
.q-calm { background: #C8E8E4; }
.log ul { list-style: none; padding: 0; margin: 8px 0 0; }
.log li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 6px 0; font-size: 13.5px; align-items: start; }
.log li img { width: 18px; margin-top: 1px; }
.log li small { color: #888; font-size: 11px; }
.log li .sub { grid-column: 2; color: #777; font-size: 12px; margin-top: -3px; }
.seg { display: flex; background: #ECE7DE; border-radius: 12px; padding: 3px; margin-bottom: 12px; text-align: center; }
.seg span { flex: 1; padding: 5px; border-radius: 10px; font-size: 12.5px; }
.seg .on { background: #fff; font-weight: 600; }
.note { background: #FAE8D8; }
.note p { font-size: 13.5px; line-height: 1.4; margin: 6px 0; }
.note small { color: #998; font-size: 10.5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { margin: 0; display: flex; flex-direction: column; }
.stat small { color: #999; font-size: 11px; }
.stat b { font-size: 19px; }
.sticky {
  position: absolute; width: 180px; padding: 22px 16px 16px; font-family: var(--hand); font-size: 22px; line-height: 1.05;
  box-shadow: 0 12px 20px -12px #3A2E2677; z-index: 2;
  transform: rotate(var(--rot, 3deg)); transition: transform .2s;
}
.sticky:hover { transform: rotate(0) scale(1.05); }
.sticky .tape { top: -12px; left: 50%; margin-left: -45px; width: 90px; height: 24px; transform: rotate(-3deg); }
.sticky-yellow { background: #FFF0A8; left: -185px; top: 70px; }
.sticky-blue { background: #D4E8FA; left: -185px; bottom: 90px; }
.sticky-pink { background: #FBD5E2; right: -185px; top: 120px; }
.sticky-green { background: #DDF1D2; right: -185px; bottom: 70px; }

/* ------------------------------------------------ apps */
.apps { padding-bottom: 120px; }
.sticker-sheet {
  max-width: 1080px; margin: 0 auto; padding: 44px 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 18px;
  background: var(--paper); border-radius: 30px; box-shadow: 0 20px 40px -26px #3A2E2677;
  position: relative;
  width: calc(100% - 2 * var(--gutter));
}
.sticker {
  width: 150px; text-align: center; border: 0; background: none; padding: 6px;
  transform: rotate(var(--rot, 0deg)); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.sticker img {
  width: 84px; margin: 0 auto;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 5px #3A2E2644);
  transition: transform .25s;
}
.sticker b { display: block; font-size: 18px; margin-top: 6px; line-height: 1.1; }
.sticker span { display: block; font-family: var(--hand); font-size: 19px; color: var(--fox-deep); line-height: 1; margin-top: 3px; }
.sticker:hover, .sticker:focus-visible { transform: rotate(0) scale(1.08); outline: none; }
.sticker:hover img, .sticker:focus-visible img { transform: translateY(-6px) rotate(-6deg); }
.sticker.peeled img { animation: peel .6s ease-in-out; }
@keyframes peel { 30% { transform: translateY(-14px) rotate(12deg) scale(1.15); } 70% { transform: translateY(-4px) rotate(-6deg); } }

/* ------------------------------------------------ owl and parrot */
.neighbours { padding-bottom: 120px; }
.neighbour-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }
.neighbour { margin: 0; background: var(--paper); padding: 18px; box-shadow: 0 20px 40px -26px #3A2E2677; display: flex; gap: 20px; align-items: flex-start; }
.neighbour:nth-child(1) { transform: rotate(-1deg); }
.neighbour:nth-child(2) { transform: rotate(1.3deg); margin-top: 40px; }
.neighbour img { width: 44%; flex: none; border-radius: 18px; }
.neighbour h3 { font-size: 24px; }
.neighbour p { font-size: 16px; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------ rules */
.rules { padding: 0 var(--gutter) 140px; }
.poster {
  position: relative; max-width: 780px; margin: 0 auto; padding: 44px 50px 36px;
  background: #F1E1C6;
  background-image: radial-gradient(#E3CDA8 1px, transparent 1.5px);
  background-size: 14px 14px;
  transform: rotate(.8deg); box-shadow: 0 20px 40px -24px #3A2E2688;
}
.poster h2 { font-family: var(--hand); font-weight: 700; font-size: 58px; text-align: center; color: var(--fox-deep); }
.poster ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.poster li { counter-increment: r; position: relative; padding: 10px 0 10px 64px; font-size: 18px; color: var(--ink-soft); }
.poster li b { color: var(--ink); display: block; font-size: 21px; }
.poster li::before {
  content: counter(r); position: absolute; left: 0; top: 10px; width: 46px; height: 46px; display: grid; place-items: center;
  font-family: var(--hand); font-weight: 700; font-size: 30px; color: #fff; background: var(--dot, var(--fox));
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; transform: rotate(var(--rot, -4deg));
}

/* ------------------------------------------------ night footer */
.night {
  position: relative; overflow: hidden; background: linear-gradient(var(--cream) 0, #E6DDF7 110px, #9C8FC9 230px, #3B3A64 380px, var(--night) 560px);
  color: #E8E6F5; padding: 260px var(--gutter) 30px; min-height: 760px;
}
.night-sky { position: absolute; inset: 0; pointer-events: none; }
.night-sky i { position: absolute; border-radius: 50%; background: #FFF6D8; animation: twinkle ease-in-out infinite; }
.footer-moon { position: absolute; width: 130px; right: 12%; top: 170px; animation: bob 6s ease-in-out infinite; }
.night-copy { position: relative; max-width: 560px; margin: 0 auto; text-align: center; }
.night-copy h2 { color: #fff; }
.night-copy p { color: var(--night-ink); font-size: 20px; }
.night-langs { color: var(--moon) !important; margin-top: 26px; font-size: 24px !important; }
/* she sleeps behind the hill, as she peeks on the device */
.sleepy-fox { width: 240px; height: 240px; margin: 40px auto -60px; position: relative; }
.fine {
  position: relative; text-align: center; font-size: 13px; color: #8E93B5;
  margin: 0 calc(-1 * var(--gutter)) -30px; padding: 20px var(--gutter) 24px; background: #2E3453; overflow: visible;
}
.fine span { position: relative; }
.fine::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -44px; height: 90px;
  background: #2E3453; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* paw prints left by clicks */
.paw { position: fixed; width: 28px; pointer-events: none; z-index: 50; animation: paw 1.6s ease-out forwards; }
@keyframes paw { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(var(--rot)); } 15% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(var(--rot)); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9) rotate(var(--rot)); } }

/* ------------------------------------------------ narrow screens */
@media (max-width: 1100px) and (min-width: 901px) {
  .sticky-yellow, .sticky-blue { left: -60px; }
  .sticky-pink, .sticky-green { right: -60px; }
}
@media (max-width: 900px) {
  body { font-size: 17px; }
  .top nav a:not(.nav-cta) { display: none; }
  .hero, .isnt, .words, .neighbour-row { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: 60px; }
  .hero-device { margin-top: 70px; }
  .isnt { gap: 90px; }
  .notebook { padding: 32px 18px 26px 64px; }
  .notebook ul { font-size: 21px; }
  .scribble-title { font-size: 31px; }
  .neighbour { flex-direction: column; }
  .neighbour img { width: 100%; }
  .neighbour:nth-child(2) { margin-top: 0; }
  .poster { padding: 36px 22px 30px; }
  .phone-col { padding: 0 0 190px; }
  .sticky { width: 160px; font-size: 20px; top: auto !important; bottom: 10px !important; }
  .sticky-yellow, .sticky-pink { left: -8px !important; right: auto !important; }
  .sticky-blue, .sticky-green { right: -8px !important; left: auto !important; bottom: 30px !important; }
  .bubble { font-size: 21px; max-width: 280px; }
  .footer-moon { width: 90px; right: 8%; }
}
@media (max-width: 420px) {
  .phone { width: 280px; }
  .sticker { width: 130px; }
  .sticker-sheet { padding: 30px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}