:root {
  --bg: #F6FAFE; --card: #FFFFFF; --ink: #1F2A3D; --muted: #6C7B91; --line: #E3ECF5;
  --pupu: #A9D4F5; --pupu-deep: #8FC3EC; --pupu-soft: #E4F2FC; --face: #24324A;
  --btn: #1F2A3D; --btn-ink: #FFFFFF; --ok: #4FAE8A; --warn: #D9892B; --danger: #C9504F;
  --radius: 22px; --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E141D; --card: #161E2A; --ink: #E7EEF7; --muted: #8C9AAE; --line: #232E3E;
    --pupu-soft: #1B2A3B; --btn: #A9D4F5; --btn-ink: #10202F; --face: #1B2638;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px;
  line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; text-decoration: none; }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--pupu); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: 12px 24px; border-radius: 999px; background: var(--btn);
  color: var(--btn-ink); text-decoration: none; transition: transform .15s ease, opacity .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.soft { background: var(--pupu-soft); color: var(--ink); }
.btn.sm { padding: 8px 16px; font-size: 15px; }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.hero { text-align: center; padding: 28px 0 72px; }
.hero .pupu { margin: 0 auto 8px; }
.hero h1 { font-size: clamp(34px, 6.4vw, 60px); max-width: 720px; margin: 0 auto; }
.hero p.lead { font-size: clamp(17px, 2.4vw, 21px); color: var(--muted); max-width: 560px; margin: 18px auto 30px; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

section { padding: 56px 0; }
section > h2 { font-size: clamp(26px, 4vw, 36px); text-align: center; margin-bottom: 10px; }
section > p.sub { text-align: center; color: var(--muted); max-width: 560px; margin: 0 auto 34px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--pupu-soft); display: grid;
  place-items: center; font-weight: 800; margin-bottom: 14px; }

/* privacy demo */
.mask-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.bubble { border-radius: 20px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line);
  font-size: 16px; }
.bubble .cap { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
.arrow { font-size: 22px; color: var(--muted); }
.tag { display: inline-block; background: var(--pupu-soft); border-radius: 8px; padding: 0 7px; font-weight: 700;
  font-size: .86em; white-space: nowrap; }
mark.real { background: none; color: inherit; border-bottom: 2px solid var(--pupu); }

footer { padding: 40px 0 60px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- pupu ---------- */
.pupu { display: inline-block; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.pupu-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.pupu-body { fill: var(--pupu); }
.pupu-sprout { fill: none; stroke: var(--pupu-deep); stroke-width: 4.5; stroke-linecap: round; }
.pupu-shine { fill: #fff; opacity: .5; }
.pupu-shadow { fill: var(--ink); opacity: .09; transform-origin: 60px 109px; animation: pupu-shadow 3.4s ease-in-out infinite; }
.pupu-eye { fill: var(--face); transform-box: fill-box; transform-origin: center; animation: pupu-blink 4.6s infinite; }
.pupu-mouth, .pupu-eyes-happy path, .pupu-eyes-sleep path { fill: none; stroke: var(--face); stroke-width: 2.4; stroke-linecap: round; }
.pupu-face { transition: transform .18s ease-out; }
.pupu-float { animation: pupu-float 3.4s ease-in-out infinite; }
.pupu-squash { transform-origin: 60px 98px; animation: pupu-breathe 3.4s ease-in-out infinite; }
.pupu-eyes-happy, .pupu-eyes-sleep, .pupu-dots, .pupu-zzz { opacity: 0; transition: opacity .2s; }
.pupu-dots circle { fill: var(--pupu-deep); }
.pupu-zzz text { fill: var(--pupu-deep); font: 800 13px var(--font); }

.pupu[data-state="happy"] .pupu-eyes-open, .pupu[data-state="sleep"] .pupu-eyes-open { opacity: 0; }
.pupu[data-state="happy"] .pupu-eyes-happy { opacity: 1; }
.pupu[data-state="happy"] .pupu-float { animation: pupu-hop 1.1s ease-in-out infinite; }
.pupu[data-state="sleep"] .pupu-eyes-sleep, .pupu[data-state="sleep"] .pupu-zzz { opacity: 1; }
.pupu[data-state="sleep"] .pupu-float, .pupu[data-state="sleep"] .pupu-squash { animation-duration: 6s; }
.pupu[data-state="sleep"] .pupu-zzz text { animation: pupu-zzz 3s ease-in-out infinite; }
.pupu[data-state="sleep"] .pupu-zzz text:last-child { animation-delay: 1.2s; }
.pupu[data-state="think"] .pupu-dots { opacity: 1; }
.pupu[data-state="think"] .pupu-dots circle { animation: pupu-dot 1.2s ease-in-out infinite; }
.pupu[data-state="think"] .pupu-dots circle:nth-child(2) { animation-delay: .2s; }
.pupu[data-state="think"] .pupu-dots circle:nth-child(3) { animation-delay: .4s; }
.pupu[data-state="think"] .pupu-eyes-open { transform: translate(2.5px, -3px); }
.pupu.pupu-boop .pupu-squash { animation: pupu-boop .55s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes pupu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pupu-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-11px); } 60% { transform: translateY(-9px); } }
@keyframes pupu-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes pupu-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } }
@keyframes pupu-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes pupu-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes pupu-zzz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }
@keyframes pupu-boop { 0% { transform: scale(1, 1); } 30% { transform: scale(1.12, .84); } 60% { transform: scale(.94, 1.08); } 100% { transform: scale(1, 1); } }
@media (prefers-reduced-motion: reduce) {
  .pupu *, .pupu { animation: none !important; transition: none !important; }
}

/* ---------- cabinet ---------- */
.login { max-width: 420px; margin: 6vh auto 0; text-align: center; }
.login .card { padding: 34px 28px; }
.login h1 { font-size: 30px; margin: 6px 0 10px; }
.login .btn { width: 100%; margin-top: 12px; }
.head { display: flex; align-items: center; gap: 14px; padding: 8px 0 26px; }
.head h1 { font-size: 26px; }
.head .grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 16px; padding-bottom: 80px; }
.card h2 { font-size: 21px; margin-bottom: 4px; }
.card > p.muted { margin-bottom: 16px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.check { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); display: grid;
  place-items: center; font-size: 14px; font-weight: 800; color: transparent; margin-top: 1px; }
.steps li.done .check { background: var(--pupu); box-shadow: none; color: var(--face); }
.steps b { font-weight: 800; }
textarea, input[type="text"] { width: 100%; font: inherit; color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; resize: vertical; outline: none; }
textarea:focus, input[type="text"]:focus { border-color: var(--pupu-deep); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.seg { display: inline-flex; background: var(--bg); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; font: inherit; font-weight: 700; color: var(--muted); padding: 7px 16px;
  border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--pupu); color: #16263A; }
.field { display: grid; gap: 6px; margin-top: 14px; }
.field > span { font-weight: 700; }
.stats { display: flex; gap: 26px; flex-wrap: wrap; margin: 6px 0 14px; }
.stat b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; }
.stat span { color: var(--muted); font-size: 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--pupu-soft); border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 700; }
.bar { height: 8px; background: var(--pupu-soft); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; width: 0; background: var(--pupu-deep); border-radius: 99px; transition: width .4s ease; }
.chatlist { display: grid; gap: 10px; margin-top: 12px; }
.chat { border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
.chat .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.chat .name { font-weight: 800; overflow-wrap: anywhere; }
.chat select { font: inherit; font-size: 14px; border: 1.5px solid var(--line); border-radius: 999px; padding: 4px 10px;
  background: var(--bg); color: var(--ink); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 16px; margin-top: 12px; font-size: 15.5px; }
.msg { padding: 8px 12px; border-radius: 14px; background: var(--bg); margin-top: 6px; font-size: 15px; max-width: 88%;
  overflow-wrap: anywhere; }
.msg.me { margin-left: auto; background: var(--pupu-soft); }
details summary { cursor: pointer; font-weight: 700; margin-top: 12px; }
.note { border-radius: 14px; padding: 10px 14px; background: var(--pupu-soft); font-size: 15px; margin-top: 12px; }
.note.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); }
.err { color: var(--danger); font-size: 15px; margin-top: 8px; }
.hide { display: none !important; }

@media (max-width: 760px) {
  .grid3 { grid-template-columns: 1fr; }
  .mask-demo { grid-template-columns: 1fr; }
  .arrow { transform: rotate(90deg); justify-self: center; }
  section { padding: 40px 0; }
  .card { padding: 20px; }
}
.msg .tag, .chat .tag { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--pupu); }
.msg.me .tag { background: var(--card); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.ico .ico-fill { fill: var(--pupu); }

/* moods: color and pattern follow the owner's tone of voice */
.pupu-pattern { opacity: 0; color: var(--pupu-deep); transition: opacity .6s ease; }
.pupu-body, .pupu-sprout, .pupu-dots circle, .pupu-zzz text { transition: fill .6s ease, stroke .6s ease; }
.pupu[data-mood="warm"] { --pupu: #F7CDB5; --pupu-deep: #E8A98A; }
.pupu[data-mood="warm"] .pp-waves { opacity: .28; }
.pupu[data-mood="formal"] { --pupu: #BCCBDE; --pupu-deep: #8FA6C2; }
.pupu[data-mood="formal"] .pp-stripes { opacity: .22; }
.pupu[data-mood="playful"] { --pupu: #D9CBF7; --pupu-deep: #B59CEB; }
.pupu[data-mood="playful"] .pp-dots { opacity: .45; }
.pupu[data-mood="energetic"] { --pupu: #BFE9D2; --pupu-deep: #7FCCA6; }
.pupu[data-mood="energetic"] .pp-sparks { opacity: .36; }
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mood { text-align: center; }
.mood .pupu { margin: 0 auto 4px; }
.mood b { display: block; }
.mood span { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .moods { grid-template-columns: repeat(2, 1fr); } }

/* mood badges: small versions of the unlock card */
.badges { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.badge { --c1: #A9D4F5; --c2: #8FC3EC; position: relative; overflow: hidden; text-align: center; border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 8px 12px; background: radial-gradient(120% 70% at 50% 0%, var(--c1) 0%, var(--card) 62%);
  transition: transform .2s ease, box-shadow .2s ease; }
.badge .badge-pupu { position: relative; }
.badge .pupu { margin: 0 auto 2px; }
.badge-ring { position: absolute; left: 50%; top: 2px; width: 104px; height: 104px; margin-left: -52px; border-radius: 50%; opacity: .14;
  background: conic-gradient(from 0deg, var(--c2) 0 18%, transparent 18% 32%, var(--c2) 32% 52%, transparent 52% 66%, var(--c2) 66% 84%, transparent 84%);
  animation: unlock-spin 14s linear infinite; }
.badge-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none; }
.badge b { display: block; position: relative; }
.badge-state { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg);
  border-radius: 999px; padding: 1px 9px; margin: 4px 0 6px; position: relative; }
.badge p { font-size: 13px; color: var(--muted); line-height: 1.35; position: relative; }
.badge.clickable { cursor: pointer; }
.badge.clickable:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(31, 42, 61, .14); }
.badge.clickable:hover .badge-shine { animation: badge-shine .9s ease; }
.badge.clickable:hover .pupu-float { animation-duration: 1.2s; }
.badge.locked { background: var(--card); }
.badge.locked .badge-ring { opacity: .05; animation: none; }
.badge.locked .pupu { filter: grayscale(1); opacity: .3; }
.badge.locked b { color: var(--muted); }
.badge.current { box-shadow: 0 0 0 2px var(--c2); }
.badge.current .badge-ring { opacity: .22; animation-duration: 8s; }
.badge.current .badge-state { background: var(--c1); color: #1F2A3D; }
@keyframes badge-shine { to { transform: translateX(120%); } }
@media (max-width: 760px) { .badges { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-color-scheme: dark) { .badge { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c1) 55%, var(--card)) 0%, var(--card) 62%); } }

/* unlock card */
.unlock { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(16, 24, 40, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s; }
.unlock.show { opacity: 1; }
.unlock-card { --c1: #A9D4F5; --c2: #8FC3EC; position: relative; width: min(420px, 100%); max-height: calc(100vh - 40px); overflow: auto; text-align: center;
  padding: 36px 28px 28px; border-radius: 28px; overflow: hidden; color: #1F2A3D;
  background: radial-gradient(120% 90% at 50% 0%, var(--c1) 0%, #fff 62%);
  box-shadow: 0 30px 80px rgba(0,0,0,.35); transform: scale(.8) translateY(20px); opacity: 0; }
.unlock.show .unlock-card { animation: unlock-pop .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.unlock-ring { position: absolute; left: 50%; top: 36px; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--c2) 0 18%, transparent 18% 32%, var(--c2) 32% 52%, transparent 52% 66%, var(--c2) 66% 84%, transparent 84%);
  opacity: .13; animation: unlock-spin 9s linear infinite; }
.unlock-pupu { position: relative; height: 200px; display: grid; place-items: center; }
.unlock.show .unlock-pupu .pupu { animation: unlock-drop .7s cubic-bezier(.2, 1.5, .5, 1) both; animation-delay: .15s; }
.unlock-kicker { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c2); margin-top: 6px; }
.unlock-card h2 { font-size: 34px; margin: 4px 0 8px; }
.unlock-desc { color: #5B6A80; margin-bottom: 20px; }
.unlock-card .btn { background: #1F2A3D; color: #fff; }
.confetti { position: absolute; left: 50%; top: 150px; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; }
.unlock.show .confetti i { animation: confetti var(--t) cubic-bezier(.2, .8, .4, 1) forwards; animation-delay: .2s; }
@keyframes unlock-pop { to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes unlock-drop { from { transform: translateY(-40px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes unlock-spin { to { transform: rotate(360deg); } }
@keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); } }
@media (prefers-color-scheme: dark) { .unlock-card { background: radial-gradient(120% 90% at 50% 0%, var(--c1) 0%, #1A2231 62%); color: #E7EEF7; } .unlock-desc { color: #AAB6C8; } .unlock-card .btn { background: #E7EEF7; color: #10202F; } }
@media (prefers-reduced-motion: reduce) { .unlock, .unlock-card, .unlock-ring, .confetti i, .unlock-pupu .pupu { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } }

/* mood characters: shape and face (first five) */
.pupu-shape { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .6s ease; }
.pupu-sprout-dot { fill: var(--pupu-deep); }
.pupu-sprout.sp-warm, .pupu-sprout.sp-formal, .pupu-sprout-dot, .pupu-sprout.sp-playful, .pupu-sprout.sp-energetic,
.pupu-cheeks, .pupu-brows, .pupu-wink, .pupu-glasses, .pupu-bowtie, .pupu-mouth.m-warm, .pupu-mouth.m-formal,
.pupu-mouth.m-playful, .pupu-tongue, .pupu-mouth-open { opacity: 0; transition: opacity .3s; }
.pupu-cheeks circle { fill: #F2A49B; opacity: .6; }
.pupu-brows path, .pupu-wink, .pupu-glasses circle, .pupu-glasses path { fill: none; stroke: var(--face); stroke-width: 2.2; stroke-linecap: round; }
.pupu-glasses circle, .pupu-glasses path { stroke-width: 1.9; }
.pupu-bowtie { fill: var(--face); }
.pupu-tongue { fill: #F08A9B; }
.pupu-mouth-open { fill: var(--face); }
.pupu-eyes-open { transform-box: fill-box; transform-origin: center; transition: transform .3s; }

.pupu[data-mood="warm"] .pupu-shape { transform: scale(1.07, .95); }
.pupu[data-mood="warm"] .sp-calm, .pupu[data-mood="warm"] .m-calm { opacity: 0; }
.pupu[data-mood="warm"] .sp-warm, .pupu[data-mood="warm"] .pupu-cheeks, .pupu[data-mood="warm"] .m-warm { opacity: 1; }

.pupu[data-mood="formal"] .pupu-shape { transform: scale(.93, 1.06); }
.pupu[data-mood="formal"] .sp-calm, .pupu[data-mood="formal"] .m-calm { opacity: 0; }
.pupu[data-mood="formal"] .sp-formal, .pupu[data-mood="formal"] .pupu-glasses, .pupu[data-mood="formal"] .pupu-bowtie,
.pupu[data-mood="formal"] .m-formal { opacity: 1; }
.pupu[data-mood="formal"] .pupu-eyes-open { transform: scale(.8); }

.pupu[data-mood="playful"] .pupu-shape { transform: rotate(-7deg); }
.pupu[data-mood="playful"] .sp-calm, .pupu[data-mood="playful"] .m-calm, .pupu[data-mood="playful"] .pupu-eyes-open .eye-r { opacity: 0; }
.pupu[data-mood="playful"] .sp-playful, .pupu[data-mood="playful"] .pupu-wink, .pupu[data-mood="playful"] .m-playful { opacity: 1; }
.pupu[data-mood="playful"][data-state="happy"] .pupu-wink, .pupu[data-mood="playful"][data-state="sleep"] .pupu-wink { opacity: 0; }

.pupu[data-mood="energetic"] .sp-calm, .pupu[data-mood="energetic"] .m-calm { opacity: 0; }
.pupu[data-mood="energetic"] .sp-energetic, .pupu[data-mood="energetic"] .pupu-brows, .pupu[data-mood="energetic"] .m-energetic { opacity: 1; }
.pupu[data-mood="energetic"] .pupu-eyes-open { transform: scale(1.25); }
.pupu[data-mood="energetic"] .pupu-float { animation-duration: 1.7s; }
.pupu[data-mood="energetic"] .pupu-squash { animation-duration: 1.7s; }
.pupu[data-state="happy"] .m-energetic, .pupu[data-state="sleep"] .pupu-brows { opacity: 0; }

/* five more characters */
.pupu-cloud circle { fill: var(--pupu-deep); }
.pupu-crown { fill: var(--pupu-deep); }
.pupu-lids path { fill: var(--pupu); }
.pupu-monocle circle, .pupu-monocle path, .pupu-brows-strict path, .pupu-brow-bold, .pupu-beard { fill: none; stroke: var(--face); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pupu-monocle circle, .pupu-monocle path { stroke-width: 1.9; }
.pupu-cloud, .pupu-crown, .sp-strict, .sp-chill, .pupu-lids, .pupu-monocle, .pupu-brows-strict, .pupu-brow-bold,
.m-dreamy, .m-strict, .m-wise, .m-bold, .m-chill { opacity: 0; transition: opacity .3s; }

.pupu[data-mood="dreamy"] { --pupu: #F3CFE4; --pupu-deep: #D9A4C8; }
.pupu[data-mood="dreamy"] .pp-bubbles { opacity: .45; }
.pupu[data-mood="dreamy"] .sp-calm, .pupu[data-mood="dreamy"] .m-calm { opacity: 0; }
.pupu[data-mood="dreamy"] .pupu-cloud, .pupu[data-mood="dreamy"] .pupu-lids, .pupu[data-mood="dreamy"] .m-dreamy { opacity: 1; }
.pupu[data-mood="dreamy"] .pupu-float { animation-duration: 6s; }

.pupu[data-mood="strict"] { --pupu: #B5BBC8; --pupu-deep: #848C9F; }
.pupu[data-mood="strict"] .pp-grid { opacity: .3; }
.pupu[data-mood="strict"] .pupu-shape { transform: scale(.98, 1.04); }
.pupu[data-mood="strict"] .sp-calm, .pupu[data-mood="strict"] .m-calm { opacity: 0; }
.pupu[data-mood="strict"] .sp-strict, .pupu[data-mood="strict"] .pupu-brows-strict, .pupu[data-mood="strict"] .m-strict { opacity: 1; }
.pupu[data-mood="strict"] .pupu-float, .pupu[data-mood="strict"] .pupu-squash { animation-duration: 5s; }

.pupu[data-mood="wise"] { --pupu: #CFE3BE; --pupu-deep: #9FC689; }
.pupu[data-mood="wise"] .pp-leaves { opacity: .32; }
.pupu[data-mood="wise"] .pupu-lids, .pupu[data-mood="wise"] .pupu-monocle, .pupu[data-mood="wise"] .m-wise { opacity: 1; }

.pupu[data-mood="bold"] { --pupu: #F6B9AB; --pupu-deep: #E48D7B; }
.pupu[data-mood="bold"] .pp-diamonds { opacity: .3; }
.pupu[data-mood="bold"] .pupu-shape { transform: scale(1.03, 1.03); }
.pupu[data-mood="bold"] .sp-calm, .pupu[data-mood="bold"] .m-calm { opacity: 0; }
.pupu[data-mood="bold"] .pupu-crown, .pupu[data-mood="bold"] .pupu-brow-bold, .pupu[data-mood="bold"] .m-bold { opacity: 1; }

.pupu[data-mood="chill"] { --pupu: #EADFC9; --pupu-deep: #CDB890; }
.pupu[data-mood="chill"] .pp-hstripes { opacity: .3; }
.pupu[data-mood="chill"] .pupu-shape { transform: scale(1.05, .94); }
.pupu[data-mood="chill"] .sp-calm, .pupu[data-mood="chill"] .m-calm { opacity: 0; }
.pupu[data-mood="chill"] .sp-chill, .pupu[data-mood="chill"] .pupu-lids, .pupu[data-mood="chill"] .m-chill { opacity: 1; }
.pupu[data-mood="chill"] .pupu-float, .pupu[data-mood="chill"] .pupu-squash { animation-duration: 7s; }

.pupu[data-state="happy"] .pupu-lids, .pupu[data-state="sleep"] .pupu-lids, .pupu[data-state="sleep"] .pupu-brows-strict,
.pupu[data-state="sleep"] .pupu-brow-bold, .pupu[data-state="happy"] .m-strict { opacity: 0; }

/* facial animations per character */
.pupu-glint { stroke: #fff !important; stroke-width: 2.4 !important; opacity: 0; }
.pupu-cheeks circle, .pupu-glasses, .pupu-monocle, .pupu-wink, .pupu-tongue, .pupu-brows path, .pupu-brows-strict path,
.pupu-brow-bold, .pupu-mouth-open, .pupu-lids path, .pupu-beard, .m-warm, .m-bold, .m-chill, .m-dreamy, .m-playful, .m-strict,
.pupu-cloud, .pupu-crown, .pupu-eyes-open { transform-box: fill-box; transform-origin: center; }

/* calm: eyes wander now and then */
.pupu[data-mood="calm"] .pupu-eyes-open { animation: f-wander 9s ease-in-out infinite; }
/* warm: cheeks glow, smile widens */
.pupu[data-mood="warm"] .pupu-cheeks circle { animation: f-glow 3s ease-in-out infinite; }
.pupu[data-mood="warm"] .m-warm { transform-origin: 50% 0%; animation: f-smile 5s ease-in-out infinite; }
/* formal: glasses glint, tiny nod */
.pupu[data-mood="formal"] .pupu-glint { animation: f-glint 6s ease-in-out infinite; }
.pupu[data-mood="formal"] .pupu-face { animation: f-nod 7s ease-in-out infinite; }
/* playful: wink opens and closes, tongue wiggles */
.pupu[data-mood="playful"] .pupu-wink { animation: f-wink-arc 5s ease-in-out infinite; }
.pupu[data-mood="playful"] .pupu-eyes-open .eye-r { animation: f-wink-eye 5s ease-in-out infinite, pupu-blink 4.6s infinite; }
.pupu[data-mood="playful"] .pupu-tongue { transform-origin: 50% 0%; animation: f-tongue 1.4s ease-in-out infinite; }
/* energetic: brows bounce, mouth chatters, eyes dart */
.pupu[data-mood="energetic"] .pupu-brows path { animation: f-brows 1.1s ease-in-out infinite; }
.pupu[data-mood="energetic"] .pupu-mouth-open { animation: f-chatter .55s ease-in-out infinite; }
.pupu[data-mood="energetic"] .pupu-eyes-open { animation: f-dart 2.2s steps(1) infinite; }
/* dreamy: lids drift, eyes float up, mouth hums */
.pupu[data-mood="dreamy"] .pupu-lids path { transform-origin: 50% 0%; animation: f-lids 6s ease-in-out infinite; }
.pupu[data-mood="dreamy"] .pupu-eyes-open { animation: f-float-up 6s ease-in-out infinite; }
.pupu[data-mood="dreamy"] .m-dreamy { animation: f-hum 3s ease-in-out infinite; }
.pupu[data-mood="dreamy"] .pupu-cloud { animation: f-cloud 4s ease-in-out infinite; }
/* strict: brows press down, mouth tightens */
.pupu[data-mood="strict"] .pupu-brows-strict path { animation: f-press 4s ease-in-out infinite; }
.pupu[data-mood="strict"] .m-strict { animation: f-tight 4s ease-in-out infinite; }
/* wise: monocle glint, beard sways, slow nod */
.pupu[data-mood="wise"] .pupu-glint { animation: f-glint 7s ease-in-out infinite; }
.pupu[data-mood="wise"] .pupu-beard { transform-origin: 50% 0%; animation: f-beard 3.6s ease-in-out infinite; }
.pupu[data-mood="wise"] .pupu-face { animation: f-nod 9s ease-in-out infinite; }
/* bold: brow pops, smirk grows, crown gleams */
.pupu[data-mood="bold"] .pupu-brow-bold { animation: f-pop 3.5s ease-in-out infinite; }
.pupu[data-mood="bold"] .m-bold { transform-origin: 20% 50%; animation: f-smirk 3.5s ease-in-out infinite; }
.pupu[data-mood="bold"] .pupu-crown { transform-origin: 50% 100%; animation: f-crown 3.5s ease-in-out infinite; }
/* chill: slow heavy blinks, lazy smile */
.pupu[data-mood="chill"] .pupu-lids path { transform-origin: 50% 0%; animation: f-heavy 7s ease-in-out infinite; }
.pupu[data-mood="chill"] .m-chill { animation: f-lazy 7s ease-in-out infinite; }

@keyframes f-wander { 0%, 40%, 100% { transform: translate(0, 0); } 50%, 70% { transform: translate(2.5px, -1px); } 80%, 90% { transform: translate(-2px, 0); } }
@keyframes f-glow { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.18); } }
@keyframes f-smile { 0%, 70%, 100% { transform: scaleX(1); } 85% { transform: scaleX(1.12); } }
@keyframes f-glint { 0%, 88%, 100% { opacity: 0; transform: translateX(0); } 92% { opacity: 1; } 96% { opacity: 0; transform: translateX(3px); } }
@keyframes f-nod { 0%, 85%, 100% { transform: translateY(0); } 90% { transform: translateY(1.8px); } 95% { transform: translateY(0); } }
@keyframes f-wink-arc { 0%, 78%, 92%, 100% { opacity: 1; } 82%, 88% { opacity: 0; } }
@keyframes f-wink-eye { 0%, 78%, 92%, 100% { opacity: 0; } 82%, 88% { opacity: 1; } }
@keyframes f-tongue { 0%, 100% { transform: scaleY(1) rotate(0); } 50% { transform: scaleY(.75) rotate(4deg); } }
@keyframes f-brows { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes f-chatter { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
@keyframes f-dart { 0% { transform: translate(0, 0) scale(1.25); } 30% { transform: translate(2.5px, 0) scale(1.25); } 55% { transform: translate(-2.5px, .5px) scale(1.25); } 80% { transform: translate(0, -1px) scale(1.25); } }
@keyframes f-lids { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.25); } }
@keyframes f-float-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes f-hum { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35, 1.15); } }
@keyframes f-cloud { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.5px, -2px); } }
@keyframes f-press { 0%, 80%, 100% { transform: translateY(0); } 88% { transform: translateY(1.6px); } }
@keyframes f-tight { 0%, 80%, 100% { transform: scaleX(1); } 88% { transform: scaleX(.82); } }
@keyframes f-beard { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes f-pop { 0%, 75%, 100% { transform: translateY(0); } 82% { transform: translateY(-2.2px); } }
@keyframes f-smirk { 0%, 75%, 100% { transform: scale(1); } 82% { transform: scale(1.1, 1.2); } }
@keyframes f-crown { 0%, 75%, 100% { transform: scaleY(1); } 82% { transform: scaleY(1.12); } }
@keyframes f-heavy { 0%, 60%, 100% { transform: scaleY(1); } 70%, 78% { transform: scaleY(1.9); } 85% { transform: scaleY(1); } }
@keyframes f-lazy { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }