:root{--ink:#624750;--muted:#846773;--pink:#b94369;--border:#efd7df;--paper:#fffaf8;font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 88% 18%,#fce6ec88,transparent 48%),var(--paper);min-height:100vh}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #963659;outline-offset:5px}button{cursor:pointer}.header{max-width:1160px;margin:auto;padding:32px 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:24px}.brand{display:flex;align-items:center;gap:13px;font-size:23px;font-weight:700;letter-spacing:-.8px}.brand-sub{display:block;font-size:10px;font-weight:400;letter-spacing:1.1px;margin-top:5px;color:var(--muted)}nav{display:flex;align-items:center;gap:28px;font-size:13px}nav a{padding:10px 0;border-bottom:2px solid transparent}nav a[aria-current]{border-bottom-color:#d4879f}nav a:hover{color:var(--pink)}main{max-width:1160px;margin:0 auto;padding:0 34px}.hero{min-height:530px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:20px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:700;color:#99747e}.eyebrow>span{color:#c26d8b;font-size:17px;margin-right:7px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-1.7px}h1{font-size:53px;line-height:1.19;margin:25px 0 20px}h1 em{color:#b2607c;font-weight:400}p{color:var(--muted);font-size:15px;line-height:1.85;margin:0 0 25px}.button{background:var(--pink);color:#fff;padding:15px 22px;border:0;border-radius:30px;display:inline-flex;justify-content:space-between;align-items:center;gap:28px;font-size:13px;font-weight:700;box-shadow:0 5px 12px #ac54721a;transition:background .15s,transform .15s}.button:hover{background:#9c3457;transform:translateY(-2px)}.tiny-note{display:block;font-size:11px;line-height:1.6;color:var(--muted);margin-top:13px}.illustration{height:415px;position:relative;isolation:isolate}.art-circle{position:absolute;inset:30px 20px 35px 28px;background:#f9e4e8;border-radius:52% 48% 43% 57% / 47% 49% 51% 53%;z-index:-2}.branch{position:absolute;width:310px;right:-6px;top:0;z-index:2}.mochi-group{position:absolute;left:30px;right:20px;bottom:87px;display:flex;align-items:flex-end;justify-content:center;gap:0}.mochi{width:144px;height:117px;border-radius:50% 50% 36% 36% / 65% 65% 30% 30%;background:radial-gradient(ellipse at 36% 24%,#ffeaf0,#f3aec4 68%,#e79cb6);position:relative;display:inline-block;box-shadow:inset -7px -10px 12px #b8607c15,0 8px 5px #9c738315;flex-shrink:0;transform:rotate(-5deg);border:1.5px solid #d996ad}.mochi:before{content:'';position:absolute;top:18px;left:26px;width:32px;height:13px;border-radius:50%;background:#ffffff75;transform:rotate(-25deg)}.mochi.cream{background:radial-gradient(ellipse at 32% 22%,#fffdf3,#f2e3c6);border-color:#d7c5a4;transform:rotate(-12deg);width:127px;height:105px}.mochi.green{background:radial-gradient(ellipse at 32% 22%,#edf2d6,#cbd9ac);border-color:#a7b78a;transform:rotate(9deg);width:116px;height:98px}.mochi-group>.pink{z-index:1;margin-left:-15px;margin-right:-17px;bottom:3px}.face{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);width:48px;display:flex;justify-content:space-between;align-items:center}.face i{width:5px;height:9px;background:#624750;border-radius:50%;display:block}.face b{width:11px;height:7px;border:2px solid #624750;border-top:0;border-radius:0 0 10px 10px;margin-top:7px}.cheek{position:absolute;top:67%;width:15px;height:8px;border-radius:50%;background:#db779a70}.cheek.left{left:25%}.cheek.right{right:25%}.plate{position:absolute;left:16px;right:8px;bottom:64px;height:57px;background:#fffaf5;border:2px solid #e1c3cf;border-radius:50%;box-shadow:0 12px 0 -5px #eed0da;z-index:-1}.art-label{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#a47a89}.art-spark{position:absolute;color:#b78974;font-size:27px}.spark-one{left:26px;top:160px}.spark-two{right:26px;bottom:147px}.beginning{margin:0 0 60px;border-top:1px solid var(--border);padding:34px 15px 0;display:flex;gap:28px;align-items:center}.section-flower{font-size:38px;color:#d398ae}.beginning h2{font-size:30px;margin:11px 0 10px;letter-spacing:-.7px}.beginning p{font-size:13px;margin:0}.little-sticker{margin-left:auto;border:1px dashed #d39aac;background:#fff0f2;padding:20px 26px;font-family:Georgia,serif;line-height:1.7;text-align:center;font-size:13px;color:#a1697b;transform:rotate(6deg);border-radius:50%}.little-sticker strong{font-style:italic;font-weight:400;font-size:18px}footer{border-top:1px solid var(--border);display:flex;justify-content:center;align-items:center;gap:10px;color:var(--muted);font-size:11px;padding:24px}.flower{color:#cc8ba1;font-size:18px}.footer-dot{margin:0 6px}.petals{pointer-events:none;position:absolute;inset:0;overflow:hidden;height:700px;z-index:-1}.petals span{position:absolute;color:#edb7c780;font-size:24px;transform:rotate(27deg)}.petals span:nth-child(1){left:2%;top:20%}.petals span:nth-child(2){right:5%;top:60%;font-size:18px}.petals span:nth-child(3){left:43%;top:76%;font-size:15px}.petals span:nth-child(4){right:25%;top:4%;font-size:13px}.mini.mochi{width:38px;height:30px;border-width:1px;transform:rotate(-8deg)}.mini.mochi:before{top:4px;left:7px;width:8px;height:4px}.mini .face{width:15px}.mini .face i{height:3px;width:2px}.mini .face b{width:5px;height:3px;border-width:1px;margin-top:3px}.mini .cheek{height:3px;width:4px}.login-wrap{padding:34px 0 65px;max-width:480px;margin:auto}.back-link{font-size:12px;color:var(--muted)}.login-card{margin-top:26px;padding:32px 42px 34px;border:1px solid var(--border);border-radius:28px;background:#fffdfb;box-shadow:0 14px 50px #af678310;text-align:center}.login-mochi{position:relative;margin:0 auto 22px;width:120px}.login-mochi .mochi{width:105px;height:85px}.floating-flower{position:absolute;top:0;right:-10px;color:#cc8ba1;font-size:30px;transform:rotate(17deg)}.login-card h1{font-size:35px;margin:15px 0 8px;letter-spacing:-1px}.login-card p{font-size:13px;margin-bottom:26px}.login-card form{text-align:left}.login-card label{font-size:12px;font-weight:700;display:block;margin:0 0 9px}.login-card input[type=password]{width:100%;border:1px solid #d7aebc;background:#fffafc;border-radius:12px;padding:13px 15px;margin-bottom:17px}.login-card .button{width:100%}.notice{padding:13px;background:#fceef2;border:1px solid var(--border);border-radius:12px;margin-bottom:20px;font-size:12px;line-height:1.7;text-align:left}.error{color:#8d2b48;border-color:#c57e96}button:disabled,input:disabled{opacity:.55;cursor:not-allowed}.logout button{border:0;background:none;color:var(--pink);font-size:12px;padding:10px}.private-hero{text-align:center;padding:40px 0 25px}.pill{font-size:11px;color:#925669;border:1px solid var(--border);border-radius:25px;padding:9px 16px;display:inline-block}.private-hero h1{font-size:44px;margin:15px 0}.private-note{max-width:700px;border:1px solid var(--border);border-radius:23px;margin:0 auto 65px;padding:26px;text-align:center;background:#fffdfb}.private-note h2{font-size:27px;letter-spacing:-.7px}.private-note p{font-size:13px}.text-link{font-size:13px;color:var(--pink);border-bottom:1px solid #d398ae;padding-bottom:5px}.message{padding:60px 0;min-height:70vh}.message h1{font-size:40px}@media(min-width:1400px){.header{padding-top:40px;padding-bottom:40px}.hero{min-height:580px}}@media(max-width:760px){.header{padding:23px 22px;gap:20px;flex-wrap:wrap}.brand{font-size:22px}.header nav{gap:22px;font-size:12px;width:100%}.logout{margin-left:auto}main{padding:0 23px}.hero{grid-template-columns:1fr;gap:10px;min-height:0;padding-top:42px}.hero-copy{text-align:center}.eyebrow{font-size:9px;letter-spacing:1.5px}h1{font-size:40px;margin:20px 0 18px}p{font-size:14px}.illustration{height:335px;width:100%;max-width:420px;margin:10px auto 20px}.branch{width:245px}.art-circle{inset:20px 20px 25px}.mochi-group{left:18px;right:15px;bottom:78px}.mochi-group .mochi{width:116px;height:96px}.mochi-group .cream{width:100px;height:85px}.mochi-group .green{width:95px;height:79px}.plate{bottom:55px;left:7px;right:7px;height:50px}.art-label{bottom:15px}.spark-one{top:125px;left:8px}.spark-two{right:16px;bottom:145px}.beginning{padding:27px 0 0;gap:15px;margin-bottom:36px;align-items:flex-start}.beginning .section-flower{font-size:27px;margin-top:21px}.beginning h2{font-size:26px}.little-sticker{display:none}.login-wrap{padding-top:25px}.login-card{padding:29px 25px}.login-card h1{font-size:32px}.private-hero h1{font-size:36px}.private-note{padding:24px 18px}.private-note h2{font-size:25px}footer{font-size:10px;padding:22px 15px}.desktop-break{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* One coherent illustration keeps anatomy, perspective and ground shadows aligned. */
.private-companions {
  width: min(480px, 100%);
  margin: 22px auto 4px;
}
.private-companions img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .private-companions { width: min(350px, 100%); margin-top: 24px; }
}
/* Panda paw: native fallback, immediate pointer tracking, toes curl on press. */
/* Sleeping companions: tilted porcelain masks perch on the temple, clear of the face. */
.kitsune-mask, .mochi-snooze { display: none; pointer-events: none; }
.mochi { --snooze-delay: 0s; }
.mochi.cream { --snooze-delay: -1.6s; }
.mochi.green { --snooze-delay: -3.2s; }
[data-theme="dark"] .mochi .face i {
  width: 10px; height: 6px; background: none;
  border-bottom: 2px solid #795467; border-radius: 0 0 50% 50%;
}
[data-theme="dark"] .mochi .face b {
  width: 5px; height: 4px; margin-top: 9px; border: 0;
  border-radius: 50%; background: #866374a6;
}
[data-theme="dark"] .kitsune-mask {
  display: block; position: absolute; z-index: 3;
  width: 47%; top: -19%; right: -9%;
  transform: perspective(220px) rotateY(-24deg) rotateZ(25deg);
  transform-origin: 38% 72%;
  filter: drop-shadow(2px 4px 2px #5e334a38) drop-shadow(0 7px 9px #120c1c33);
}
.kitsune-mask svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-theme="dark"] .cream .kitsune-mask {
  right: auto; left: -10%;
  transform: perspective(220px) rotateY(24deg) rotateZ(-25deg);
  transform-origin: 65% 72%;
}
[data-theme="dark"] .mochi:not(.mini) {
  animation: mochi-breathe 4.8s ease-in-out infinite;
  animation-delay: var(--snooze-delay);
  transform-origin: center bottom;
}
[data-theme="dark"] .mochi-snooze {
  display: block; position: absolute; z-index: 4;
  top: -29%; left: 39%; width: 38px; height: 40px;
  color: #e3c7ed; font: italic 600 19px/1 Georgia, serif;
  text-shadow: 0 0 12px #c79fdd55;
}
.mochi-snooze > span {
  position: absolute; left: 0; bottom: 0; opacity: 0;
  animation: mochi-snooze 4.8s ease-out infinite;
  animation-delay: var(--snooze-delay);
}
.mochi-snooze > span:nth-child(2) { animation-delay: calc(var(--snooze-delay) + 1.6s); }
.mochi-snooze > span:nth-child(3) { animation-delay: calc(var(--snooze-delay) + 3.2s); }
[data-theme="dark"] .mini .face i { width: 3px; height: 2px; border-width: 1px; }
[data-theme="dark"] .mini .face b { width: 2px; height: 2px; margin-top: 3px; }
[data-theme="dark"] .mini .kitsune-mask { width: 43%; top: -17%; right: -5%; }
[data-theme="dark"] .mini .mochi-snooze { display: none; }
@keyframes mochi-breathe {
  0%, 100% { scale: 1 1; translate: 0 0; }
  50% { scale: 1.012 1.028; translate: 0 -2px; }
}
@keyframes mochi-snooze {
  0% { opacity: 0; transform: translate(0, 8px) scale(.65) rotate(-9deg); }
  15%, 35% { opacity: .85; }
  75%, 100% { opacity: 0; transform: translate(24px, -34px) scale(1.18) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .mochi:not(.mini), .mochi-snooze > span { animation: none; }
  [data-theme="dark"] .mochi-snooze > span:first-child { opacity: .7; }
}
.panda-pointer-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  view-transition-name: panda-pointer-layer;
}
.panda-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 32px;
  z-index: 2147483647;
  pointer-events: none;
  visibility: hidden;
  contain: layout style;
  filter: drop-shadow(0 2px 2px #49344366) drop-shadow(0 5px 5px #62475040);
}
.panda-cursor.is-visible { visibility: visible; }
.panda-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 63.63636% 8%; will-change: transform; }
.panda-cursor .paw-toe,
.panda-cursor .paw-palm {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform 140ms cubic-bezier(.2,.7,.3,1);
}
.panda-cursor.is-gripping .paw-toe-one { transform: translate(4px, 4px) rotate(18deg) scaleY(.75); }
.panda-cursor.is-gripping .paw-toe-two { transform: translate(2px, 10px) rotate(9deg) scaleY(.67); }
.panda-cursor.is-gripping .paw-toe-three { transform: translate(-2px, 10px) rotate(-9deg) scaleY(.67); }
.panda-cursor.is-gripping .paw-toe-four { transform: translate(-4px, 4px) rotate(-18deg) scaleY(.75); }
.panda-cursor.is-gripping .paw-palm { transform: scale(.94, .9); }
/* Night mode changes the same moving paw into a spotted leopard with retractable claws. */
.panda-cursor .paw-spots, .panda-cursor .paw-claws { display: none; }
[data-theme="dark"] .panda-cursor .paw-wrist { fill: #efc783; stroke: #93633f; }
[data-theme="dark"] .panda-cursor .paw-wrist-fold { stroke: #bc854c; }
[data-theme="dark"] .panda-cursor .paw-palm > path:first-child { fill: #dfab68; stroke: #93633f; }
[data-theme="dark"] .panda-cursor .paw-toe > ellipse:first-child { fill: #efc783; stroke: #93633f; }
[data-theme="dark"] .panda-cursor .paw-pad,
[data-theme="dark"] .panda-cursor .paw-toe > ellipse:nth-child(2) { fill: #976772; }
[data-theme="dark"] .panda-cursor .paw-spots,
[data-theme="dark"] .panda-cursor .paw-claws { display: block; }
.panda-cursor .paw-claw {
  opacity: 0; transform-box: fill-box; transform-origin: center bottom;
  transform: translateY(3px) scaleY(.12);
  transition: transform 130ms cubic-bezier(.2,.8,.3,1), opacity 80ms ease;
}
[data-theme="dark"] .panda-cursor.is-gripping .paw-toe,
[data-theme="dark"] .panda-cursor.is-gripping .paw-palm { transform: none; }
[data-theme="dark"] .panda-cursor.is-gripping .paw-claw { opacity: 1; transform: translateY(0) scaleY(1); }
@media (any-hover: hover) and (any-pointer: fine) {
  html, html * { cursor: url('/assets/panda-paw.svg') 6 7, auto; }
  html.panda-cursor-active, html.panda-cursor-active * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .panda-cursor .paw-toe, .panda-cursor .paw-palm, .panda-cursor .paw-claw { transition: none; }
}
/* Per-letter greetings travel along a short spline, only after deliberate flicks. */
.panda-trail {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  overflow: hidden;
  --trail-color: #e79cb6;
  --trail-ink: #b2607c;
}
.panda-trail[data-tone="green"] { --trail-color: #b1c892; --trail-ink: #7b9463; }
.panda-trail[data-tone="lilac"] { --trail-color: #b69aca; --trail-ink: #8c6da4; }
.panda-trail-kana, .panda-trail-english, .panda-trail-spark {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--trail-color);
  text-shadow: 0 0 2px #fff, 0 0 7px var(--trail-color), 0 0 16px var(--trail-color), 0 1px 1px var(--trail-ink);
  user-select: none;
  opacity: 0;
  will-change: transform, opacity;
}
.panda-trail-kana { font: 700 20px/1 'Yu Gothic', Meiryo, sans-serif; }
.panda-trail-english { font: 600 17px/1.2 ui-rounded, 'Trebuchet MS', sans-serif; white-space: pre; }
.panda-trail-spark { font-size: 13px; line-height: 1; }
@media(prefers-reduced-motion: reduce) { .panda-trail { display: none; } }
/* A warm plum night palette, shared by public, login, private and message pages. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17151e;
  --ink: #f0e4eb;
  --muted: #bcaaba;
  --pink: #d896b3;
  --border: #3a2d40;
}
.theme-toggle {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  min-height: 40px; padding: 5px 0 5px 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 11px;
}
.theme-toggle:hover { color: var(--pink); }
.theme-toggle-track {
  position: relative; width: 40px; height: 24px; border: 1px solid #d7b7c6;
  border-radius: 20px; background: #f0dce5;
  transition: background 180ms ease, border-color 180ms ease;
}
.theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; color: #9b607b;
  background: #fffaf8; box-shadow: 0 1px 4px #62475030; transition: transform 180ms ease;
}
.theme-toggle svg { width: 12px; height: 12px; }
.theme-moon { display: none; }
[data-theme="dark"] .theme-toggle-track { background: #62435f; border-color: #a17b9c; }
[data-theme="dark"] .theme-toggle-thumb { transform: translateX(16px); color: #68475f; background: #f3dfe9; }
[data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
[data-theme="dark"] body {
  background: radial-gradient(ellipse at 88% 18%, #66375340, transparent 48%),
    radial-gradient(ellipse at 6% 90%, #40385726, transparent 45%), var(--paper);
}
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] input:focus-visible { outline-color: #e6b5d6; }
[data-theme="dark"] nav a[aria-current] { border-bottom-color: #d896b3; }
[data-theme="dark"] h1 em { color: #e5aec7; }
[data-theme="dark"] .eyebrow { color: #c4a3b7; }
[data-theme="dark"] .eyebrow > span,
[data-theme="dark"] .section-flower,
[data-theme="dark"] .flower,
[data-theme="dark"] .floating-flower { color: #d8a1bc; }
[data-theme="dark"] .button { color: #241923; box-shadow: 0 5px 20px #d896b315; }
[data-theme="dark"] .button:hover { background: #ebadc7; }
[data-theme="dark"] .art-circle {
  background: radial-gradient(ellipse at 60% 35%, #51354c, #2b273d 75%);
  box-shadow: inset 0 0 60px #9273b317, 0 0 60px #c58fbd08;
}
[data-theme="dark"] .plate { background: #352b37; border-color: #806377; box-shadow: 0 12px 0 -5px #48344a; }
[data-theme="dark"] .mochi { box-shadow: inset -7px -10px 12px #b8607c15, 0 9px 20px #100b183b; }
[data-theme="dark"] .art-label { color: #c3a6ba; }
[data-theme="dark"] .art-spark { color: #e5c4ad; text-shadow: 0 0 12px #e9b3cb55; }
[data-theme="dark"] .little-sticker { background: #2d2232; border-color: #755f80; color: #d1b5cc; }
[data-theme="dark"] .login-card,
[data-theme="dark"] .private-note { background: #211c2a; box-shadow: 0 14px 50px #09070e26; }
[data-theme="dark"] .login-card input[type="password"] { color: var(--ink); background: #181420; border-color: #796079; }
[data-theme="dark"] .notice { background: #302333; }
[data-theme="dark"] .error { color: #f3b7c3; border-color: #975971; }
[data-theme="dark"] .pill { color: #e1afc6; }
[data-theme="dark"] .text-link { border-bottom-color: #a87995; }
[data-theme="dark"] .private-companions { filter: drop-shadow(0 12px 20px #08060d24); }
[data-theme="dark"] .panda-cursor { filter: drop-shadow(0 1px 1px #f3dfe966) drop-shadow(0 4px 5px #0008); }
@media (max-width: 760px) {
  .header nav { gap: 18px; flex-wrap: wrap; }
  .theme-toggle { margin-left: auto; padding-left: 0; gap: 7px; }
  .logout { margin-left: 0; }
}
@media (max-width: 390px) {
  .theme-toggle-label { display: none; }
}

/* The new page palette spreads from the emblem; a live GLSL layer softens the liquid rim. */
.theme-effects { position: fixed; inset: 0; z-index: 2147483645; pointer-events: none; visibility: hidden; }
.theme-effects[data-active="true"] { visibility: visible; }
.theme-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.theme-emblem {
  position: absolute;
  width: 112px; height: 112px;
  left: calc(50% - 56px);
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
.theme-emblem svg { display: block; width: 100%; height: 100%; }
.theme-emblem .splash-moon { display: none; }
.theme-effects[data-theme="dark"] .splash-sun { display: none; }
.theme-effects[data-theme="dark"] .splash-moon { display: block; }
.splash-sun { filter: drop-shadow(0 0 12px #f5c97599) drop-shadow(0 0 32px #ffc95b55); }
.splash-moon { filter: drop-shadow(0 0 12px #dcb9f599) drop-shadow(0 0 32px #b18ce955); }
.theme-effects[data-active="true"] .theme-wave { view-transition-name: theme-wave; }
.theme-effects[data-active="true"] .theme-emblem { view-transition-name: theme-emblem; }
::view-transition { pointer-events: none; }
/* The new full-viewport pointer image stays live above the splash; discard its old snapshot. */
::view-transition-group(panda-pointer-layer) { z-index: 5; animation: none; }
::view-transition-image-pair(panda-pointer-layer) { isolation: isolate; }
::view-transition-old(panda-pointer-layer) { display: none; }
::view-transition-new(panda-pointer-layer) { animation: none; mix-blend-mode: normal; }
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
::view-transition-group(theme-wave) { z-index: 3; animation: none; }
::view-transition-old(theme-wave) { display: none; }
::view-transition-new(theme-wave) { animation: none; mix-blend-mode: normal; }
::view-transition-group(theme-emblem) { z-index: 4; animation: none; }
::view-transition-old(theme-emblem) { display: none; }
::view-transition-new(theme-emblem) { animation: theme-emblem-pop 1600ms both; transform-origin: center; mix-blend-mode: normal; }
.theme-effects[data-active="true"][data-transition="fallback"] .theme-emblem svg { animation: theme-emblem-pop 1600ms both; }
@keyframes theme-emblem-pop {
  0% { opacity: 0; transform: translateY(32px) scale(.28) rotate(-14deg); }
  14% { opacity: 1; transform: translateY(-8px) scale(1.13) rotate(4deg); }
  25% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  73% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  100% { opacity: 0; transform: translateY(10px) scale(.88) rotate(0); }
}
@media (max-width: 760px) {
  .theme-emblem { width: 96px; height: 96px; left: calc(50% - 48px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .theme-effects { display: none; } }

/* Visitor count stays centered independently of the navigation width. */
.header { position: relative; }
.header nav { gap: 18px; }
.visitor-counter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); background: #fff1f5; font-size: 12px; white-space: nowrap;
}
.visitor-counter-flower { color: #ce8da7; font-size: 15px; }
.visitor-counter strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.visitor-editor {
  max-width: 700px; margin: 0 auto 65px; padding: 30px;
  border: 1px solid var(--border); border-radius: 23px; background: #fffdfb;
}
.private-note { margin-bottom: 24px; }
.visitor-editor h2 { font-size: 29px; line-height: 1.25; letter-spacing: -.7px; margin: 12px 0; }
.visitor-editor p { font-size: 13px; margin-bottom: 23px; }
.visitor-editor label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.visitor-editor-controls { display: flex; gap: 12px; }
.visitor-editor input[type="number"] {
  width: 0; min-width: 0; flex: 1; padding: 13px 15px; border-radius: 12px;
  border: 1px solid #d7aebc; color: var(--ink); background: #fffafc; font-variant-numeric: tabular-nums;
}
.visitor-editor .button { gap: 16px; }
.visitor-success { color: #496840; background: #edf4e6; border-color: #c7d7bc; }
[data-theme="dark"] .visitor-counter { background: #292032; }
[data-theme="dark"] .visitor-editor { background: #211c2a; box-shadow: 0 14px 50px #09070e26; }
[data-theme="dark"] .visitor-editor input[type="number"] { background: #181420; border-color: #796079; }
[data-theme="dark"] .visitor-success { color: #c4dab0; background: #253023; border-color: #4b6144; }
@media (max-width: 1160px) {
  .header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px 12px; }
  .header .brand { grid-column: 1; }
  .visitor-counter { position: static; transform: none; grid-column: 2; }
  .header nav { grid-column: 1 / -1; justify-content: center; width: 100%; }
}
@media (max-width: 760px) {
  .header { grid-template-columns: 1fr; gap: 16px; }
  .header .brand { grid-column: 1; justify-self: center; }
  .visitor-counter { grid-column: 1; justify-self: center; }
  .header nav { gap: 12px 16px; flex-wrap: wrap; }
  .header .theme-toggle, .header .logout { margin-left: 0; }
  .visitor-editor { padding: 24px 18px; }
  .visitor-editor h2 { font-size: 25px; }
  .visitor-editor-controls { flex-direction: column; }
  .visitor-editor input[type="number"] { width: 100%; }
  .visitor-editor .button { justify-content: center; }
}