:root {
  --ink: #443854;
  --ink-soft: #766c83;
  --lavender: #b9a7df;
  --lavender-deep: #8b75ba;
  --lilac: #e8def7;
  --nova-mint: #d8eadb;
  --nova-mint-deep: #8fb39a;
  --nova-mint-ink: #617d69;
  --nova-mint-glow: rgba(193, 228, 201, 0.3);
  --cream: #fffaf2;
  --paper: rgba(255, 252, 247, 0.76);
  --gold: #cfa95d;
  --gold-light: #f1d99b;
  --water: #b9d9d8;
  --water-light: #dcf0eb;
  --leaf: #879f7b;
  --leaf-dark: #617b5f;
  --rose: #e9b7c5;
  --line: rgba(91, 71, 111, 0.15);
  --shadow: 0 30px 90px rgba(89, 69, 111, 0.16);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Avenir Next, Avenir, Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.96), transparent 27%),
    radial-gradient(ellipse at 76% 36%, rgba(249,229,255,.34), transparent 31%),
    radial-gradient(ellipse at 16% 68%, var(--nova-mint-glow), transparent 32%),
    radial-gradient(ellipse at 78% 88%, rgba(216,234,219,.34), transparent 29%),
    linear-gradient(155deg, #edf5ef 0%, #f0eafa 38%, #f8f4e9 100%);
  font-family: var(--sans);
  line-height: 1.55;
}

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(128, 92, 179, .44); outline-offset: 4px; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; z-index: 100; top: -80px; left: 12px; padding: 10px 14px; border-radius: 999px; background: white; opacity: 0; pointer-events: none; transition: top .18s, opacity .18s; }
.skip-link:focus-visible { top: 12px; opacity: 1; pointer-events: auto; }

.earth-light { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.earth-light::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(91,74,106,.11) 0 .55px, transparent .7px); background-size: 8px 8px; opacity: .12; mix-blend-mode: multiply; }
.sun-wash { position: absolute; top: -13vw; right: -7vw; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,249,214,1) 0 7%, rgba(255,239,180,.48) 25%, rgba(255,226,153,.19) 47%, transparent 71%); filter: blur(4px); box-shadow: 0 0 120px rgba(255,225,153,.12); }
.cloud { position: absolute; width: 26vw; height: 9vw; min-width: 240px; min-height: 80px; border-radius: 50%; background: rgba(255,255,255,.36); filter: blur(24px); animation: cloud-drift 26s ease-in-out infinite alternate; }
.cloud--one { left: -6vw; top: 11vh; }
.cloud--two { right: 18vw; top: 34vh; width: 19vw; opacity: .5; background: rgba(226,242,229,.4); box-shadow: 0 0 80px rgba(197,229,204,.14); animation-duration: 35s; animation-direction: alternate-reverse; }
@keyframes cloud-drift { to { transform: translate3d(8vw, 2vh, 0) scale(1.12); } }
.light-orb { position: absolute; width: 9px; aspect-ratio: 1; border: 1px solid rgba(255,255,231,.8); border-radius: 50%; background: rgba(255,249,204,.92); box-shadow: 0 0 9px 3px rgba(255,248,205,.72), 0 0 25px 11px rgba(255,225,159,.25); animation: light-float 9s ease-in-out infinite; }
.light-orb--one { left: 8%; top: 67%; }
.light-orb--two { right: 9%; top: 23%; animation-delay: -3s; }
.light-orb--three { left: 45%; top: 10%; animation-delay: -6s; }
@keyframes light-float { 50% { transform: translate(18px, -35px) scale(.7); opacity: .45; } }

.site-header { width: min(calc(100% - 64px), 1500px); min-height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(113,145,121,.16); }
.brand { display: flex; align-items: center; gap: 17px; }
.brand__name { position: relative; display: inline-flex; align-items: baseline; letter-spacing: -.055em; font-size: 1.08rem; }
.brand__name strong { font-weight: 800; }
.brand__name em { font-style: normal; font-weight: 400; }
.brand__name i { width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #b7d9bf; box-shadow: 0 0 8px rgba(169,213,179,.95), 0 0 17px rgba(139,117,186,.4); }
.brand__branch { padding-left: 17px; border-left: 1px solid rgba(117,153,126,.22); color: var(--nova-mint-ink); text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; font-weight: 680; }
.header-actions { display: flex; align-items: center; gap: 17px; }
.private-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; }
.private-label span { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--nova-mint-deep); box-shadow: 0 0 0 5px rgba(154,193,164,.13), 0 0 12px rgba(169,215,179,.36); }
.sound-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .11em; font-size: .75rem; }
.sound-toggle__icon { color: var(--lavender-deep); font-family: var(--serif); font-size: .9rem; }
.sound-toggle[aria-pressed="true"] { border-color: rgba(133,106,177,.4); background: rgba(232,222,247,.7); box-shadow: 0 0 22px rgba(139,117,186,.18); }

.miki-intro { width: min(calc(100% - 64px), 1500px); min-height: 650px; margin: clamp(42px, 6vw, 88px) auto 0; display: grid; grid-template-columns: .82fr 1fr .92fr; gap: clamp(25px, 3.4vw, 55px); align-items: center; padding: clamp(24px, 4vw, 56px); overflow: hidden; border: 1px solid rgba(255,255,255,.92); border-radius: 38px; background: radial-gradient(circle at 12% 18%, rgba(228,214,244,.72), transparent 30%), radial-gradient(circle at 78% 78%, rgba(201,231,207,.7), transparent 34%), rgba(255,253,248,.76); box-shadow: 0 34px 110px rgba(75,56,97,.14), inset 0 1px 0 #fff; backdrop-filter: blur(24px) saturate(1.06); }
.miki-intro figure { margin: 0; }
.miki-intro__photo, .miki-intro__art { position: relative; overflow: hidden; border: 8px solid rgba(255,255,255,.78); border-radius: 30px; box-shadow: 0 24px 62px rgba(69,83,72,.16); }
.miki-intro__photo { aspect-ratio: 4 / 5; border-radius: 48% 48% 26px 26px; }
.miki-intro__photo-link { display: block; height: 100%; }
.miki-intro__photo-link:focus-visible { outline: 4px solid var(--lavender-deep); outline-offset: -8px; }
.miki-intro__art { aspect-ratio: 1; }
.miki-intro figure img { width: 100%; height: 100%; object-fit: cover; }
.miki-intro__photo img { object-position: 56% center; }
.miki-intro figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.7); border-radius: 12px; color: #31473b; background: rgba(255,253,248,.88); backdrop-filter: blur(10px); text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; }
.miki-intro__copy { text-align: center; }
.miki-intro__copy h1 { margin: 18px 0 24px; color: #31493d; font-family: var(--serif); font-size: clamp(3.1rem, 5.7vw, 6.6rem); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
.miki-intro__copy h1 em { display: block; color: #75588b; font-weight: 400; }
.miki-intro__copy > p:not(.eyebrow) { max-width: 520px; margin: 0 auto; color: #54685d; font-family: var(--serif); font-size: clamp(1rem, 1.4vw, 1.28rem); line-height: 1.6; }
.miki-intro__links { display: grid; gap: 8px; margin-top: 26px; }
.miki-intro__copy a { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 9px 15px; border: 1px solid rgba(84, 104, 91, .2); border-radius: 999px; color: #385043; background: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .075em; font-size: .67rem; font-weight: 700; }
.miki-intro__copy a:hover, .miki-intro__copy a:focus-visible { border-color: #6d5380; background: #fff; }
.miki-intro__copy .miki-intro__primary { color: #fff; border-color: #4a6857; background: #4a6857; }
.miki-intro__copy .miki-intro__primary:hover, .miki-intro__copy .miki-intro__primary:focus-visible { color: #fff; background: #6d5380; }
.miki-intro__copy .miki-intro__garden { display: inline-flex; width: fit-content; margin: 18px auto 0; color: #6d5380; border: 0; border-radius: 0; background: transparent; }

.garden-shell { width: min(calc(100% - 64px), 1500px); margin: 0 auto; padding: clamp(40px, 5vw, 76px) 0 55px; display: grid; grid-template-columns: minmax(205px, .62fr) minmax(580px, 1.82fr) minmax(285px, .88fr); gap: clamp(25px, 3.3vw, 55px); align-items: center; }
.welcome { min-width: 0; }
.eyebrow { margin: 0; color: var(--lavender-deep); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 700; }
.welcome h1 { margin: 21px 0 28px; font-family: var(--serif); font-size: clamp(3.3rem, 4.25vw, 5.85rem); font-weight: 400; line-height: .8; letter-spacing: -.072em; text-shadow: 0 8px 28px rgba(84,63,106,.08); }
.welcome h1 em { color: var(--lavender-deep); font-weight: 400; text-shadow: 0 10px 35px rgba(139,117,186,.16); }
.welcome__intro { max-width: 330px; color: var(--ink-soft); font-family: var(--serif); font-size: clamp(1.05rem, 1.25vw, 1.28rem); line-height: 1.65; }
.game-label { display: inline-flex; align-items: center; min-height: 34px; margin: 34px 0 0; padding: 0 13px; border: 1px solid rgba(139,179,150,.4); border-radius: 999px; color: var(--nova-mint-ink); background: rgba(222,239,226,.28); box-shadow: 0 0 18px rgba(193,228,201,.16); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; }

.pond-card { min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.9); border-radius: 38px; background: linear-gradient(145deg, rgba(255,255,255,.58), rgba(231,244,234,.29) 58%, rgba(249,244,252,.31)); box-shadow: 0 34px 100px rgba(75,56,97,.17), 0 8px 34px rgba(145,191,156,.1), 0 8px 30px rgba(202,163,92,.06), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(1.08); }
.pond-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 13px 17px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; }
.pond-card__topline > span:first-child { color: var(--nova-mint-ink); font-weight: 700; }
.weather { display: flex; align-items: center; gap: 8px; }
.weather i { width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold-light); }
.pond { position: relative; min-height: min(670px, 66vh); overflow: hidden; isolation: isolate; border-radius: 28px; background:
  radial-gradient(ellipse at 18% 2%, rgba(255,255,242,.94) 0 2%, rgba(235,248,219,.58) 11%, transparent 29%),
  radial-gradient(ellipse at 28% 26%, rgba(255,224,150,.31), transparent 28%),
  radial-gradient(ellipse at 46% 47%, rgba(129,224,201,.29), transparent 38%),
  radial-gradient(ellipse at 86% 76%, rgba(14,64,78,.64), transparent 48%),
  radial-gradient(ellipse at 4% 90%, rgba(24,84,76,.42), transparent 38%),
  linear-gradient(151deg, #bcdccb 0%, #6eb8ad 29%, #3b8e91 56%, #276d7c 78%, #1e586b 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.72),
    inset 45px 4px 105px rgba(243,255,229,.3),
    inset -88px -95px 165px rgba(5,42,62,.43),
    inset 0 0 190px rgba(10,57,67,.22),
    0 1px 0 rgba(255,255,255,.72),
    0 18px 38px rgba(21,70,79,.24);
}
.pond::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 2% 17%, rgba(16,58,43,.56) 0 4%, transparent 22%),
    radial-gradient(ellipse at 11% 35%, rgba(25,74,51,.38) 0 3%, transparent 19%),
    radial-gradient(ellipse at 97% 16%, rgba(12,54,52,.48) 0 5%, transparent 24%),
    radial-gradient(ellipse at 91% 42%, rgba(18,62,53,.35) 0 4%, transparent 22%),
    radial-gradient(ellipse at 27% 4%, rgba(255,252,221,.94) 0 3%, rgba(255,229,151,.28) 20%, transparent 39%),
    linear-gradient(116deg, rgba(255,252,221,.36) 0 7%, transparent 27% 61%, rgba(12,61,70,.16) 83%);
  background-size: 47% 55%, 43% 51%, 48% 54%, 42% 49%, 66% 50%, 100% 100%;
  mix-blend-mode: multiply;
  opacity: .66;
  filter: blur(8px) saturate(1.14);
  animation: reflection-swim 16s ease-in-out infinite alternate;
}
.pond::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse at 18% 21%, transparent 0 20px, rgba(246,255,239,.46) 22px 23px, transparent 27px 49px),
    repeating-radial-gradient(ellipse at 79% 58%, transparent 0 31px, rgba(204,246,235,.32) 33px 35px, transparent 39px 72px),
    repeating-radial-gradient(ellipse at 48% 88%, transparent 0 43px, rgba(245,242,207,.25) 45px 47px, transparent 51px 92px),
    linear-gradient(114deg, transparent 7%, rgba(255,248,210,.45) 18%, transparent 35%, rgba(213,249,238,.22) 53%, transparent 71%);
  background-size: 82% 73%, 105% 89%, 119% 105%, 142% 100%;
  mix-blend-mode: screen;
  opacity: .58;
  filter: blur(1.35px);
  animation: caustic-current 12s ease-in-out infinite alternate;
}
@keyframes reflection-swim {
  to { transform: translate3d(3.4%, -1.2%, 0) skewX(-1.3deg) scale(1.04); background-position: 3% 1%, 7% -2%, -5% 2%, -3% -1%, 5% 0, 0 0; opacity: .53; }
}
@keyframes caustic-current {
  to { transform: translate3d(4.6%, 1.3%, 0) rotate(.55deg) scale(1.04); background-position: 7% -4%, -6% 3%, 8% -2%, 14% 0; opacity: .42; }
}
.water-touch { position: absolute; z-index: 1; inset: 0; width: 100%; overflow: hidden; border: 0; background:
  linear-gradient(90deg, rgba(29,76,57,.12), transparent 17% 77%, rgba(8,42,65,.2)),
  radial-gradient(ellipse at 46% 42%, transparent 25%, rgba(8,58,70,.07) 67%, rgba(3,35,52,.28) 100%),
  linear-gradient(180deg, rgba(255,255,255,.095), transparent 31%, rgba(3,49,65,.15));
  box-shadow: inset 0 22px 42px rgba(239,255,239,.12), inset 0 -42px 78px rgba(2,39,58,.22); }
.water-touch::before { content: ""; position: absolute; inset: -8% -15%; pointer-events: none; background:
  linear-gradient(118deg, transparent 0 9%, rgba(255,252,211,.47) 18%, rgba(255,222,139,.18) 27%, transparent 43%),
  radial-gradient(ellipse at 5% 44%, rgba(31,71,53,.3), transparent 18%),
  radial-gradient(ellipse at 98% 75%, rgba(12,43,58,.32), transparent 23%),
  linear-gradient(90deg, rgba(41,74,54,.16), transparent 15% 84%, rgba(21,49,58,.17));
  filter: blur(9px); mix-blend-mode: soft-light; animation: sunbeam-drift 13s ease-in-out infinite alternate; }
.water-touch::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 19% 29%, rgba(255,246,204,.88) 0 1px, transparent 1.8px),
  radial-gradient(circle at 64% 18%, rgba(255,225,157,.66) 0 .8px, transparent 1.7px),
  radial-gradient(circle at 82% 53%, rgba(241,250,236,.6) 0 .9px, transparent 1.8px),
  radial-gradient(circle at 41% 76%, rgba(255,238,187,.48) 0 .8px, transparent 1.7px);
  background-size: 137px 113px, 179px 149px, 163px 127px, 211px 167px; opacity: .55; animation: water-glints 9s ease-in-out infinite alternate; }
@keyframes sunbeam-drift { to { transform: translate3d(2.5%, -1%, 0) rotate(.35deg); opacity: .72; } }
@keyframes water-glints { 50% { opacity: .26; transform: translateY(-3px); } 100% { background-position: 11px -7px, -9px 5px, 7px -3px, -5px 4px; } }
.living-water { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.living-water::before { content: ""; position: absolute; inset: -10% -20%; background:
  radial-gradient(ellipse 38% 7% at 21% 21%, rgba(255,255,234,.62), transparent 72%),
  radial-gradient(ellipse 30% 5% at 74% 42%, rgba(217,248,236,.29), transparent 75%),
  radial-gradient(ellipse 32% 5% at 47% 70%, rgba(232,217,250,.22), transparent 77%);
  mix-blend-mode: screen; filter: blur(3px); animation: broad-swells 8s ease-in-out infinite alternate; }
.living-water::after { content: ""; position: absolute; left: 50%; top: 48%; width: 74px; height: 31px; border: 1px solid rgba(221,242,220,.25); border-radius: 50%; box-shadow: 0 0 0 18px rgba(216,201,244,.06), 0 0 0 39px rgba(183,232,207,.045), 0 0 42px rgba(236,218,164,.15); opacity: .42; transform: translate(-50%,-50%); animation: nova-breath 5.8s ease-in-out infinite; transition: opacity .7s, filter .7s; }
.water-flow { position: absolute; inset: -4% -7%; width: 114%; height: 108%; overflow: visible; mix-blend-mode: screen; }
.current { vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.current--deep { stroke-width: 4.2; stroke-dasharray: 25 16 82 24; opacity: .28; filter: blur(1.1px); animation: current-travel 15s linear infinite, current-sway 8s ease-in-out infinite alternate; }
.current--energy { stroke-width: 3.4; stroke-dasharray: 12 19 61 25; opacity: .37; animation: energy-travel 12s linear infinite, energy-sway 7s ease-in-out infinite alternate; transition: opacity .8s, filter .8s; }
.current--wavelets { stroke-width: 1.45; stroke-dasharray: 31 19 9 24; opacity: .42; filter: blur(.35px); animation: wavelet-travel 8s linear infinite, current-sway 5.6s ease-in-out infinite alternate-reverse; }
.current-glint { position: absolute; width: 5px; aspect-ratio: 1; border-radius: 50%; background: #fff6ba; box-shadow: 0 0 6px 2px rgba(255,245,177,.86), 0 0 19px 8px rgba(232,216,156,.27); opacity: .7; animation: glint-current 12s ease-in-out infinite; }
.current-glint--one { left: 15%; top: 24%; }
.current-glint--two { left: 48%; top: 59%; animation-delay: -4s; animation-duration: 15s; }
.current-glint--three { left: 76%; top: 39%; animation-delay: -8s; animation-duration: 13s; }
.drift-petal { position: absolute; width: 14px; height: 8px; border-radius: 90% 8% 90% 8%; background: linear-gradient(145deg, rgba(255,255,255,.92), #f1c8dd 55%, #cfa7d9); box-shadow: inset 1px 1px 2px rgba(255,255,255,.8), 0 2px 5px rgba(28,72,77,.22); opacity: .82; transform: rotate(28deg); animation: petal-current 19s ease-in-out infinite; }
.drift-petal--one { left: 8%; top: 17%; }
.drift-petal--two { left: 35%; top: 44%; animation-delay: -6s; animation-duration: 23s; transform: rotate(-18deg) scale(.72); }
.drift-petal--three { left: 61%; top: 67%; animation-delay: -12s; animation-duration: 21s; transform: rotate(48deg) scale(.86); }
.drift-petal--four { left: 75%; top: 28%; animation-delay: -16s; animation-duration: 25s; transform: rotate(8deg) scale(.62); }
.pond.is-core-awake .current--energy { opacity: .92; filter: saturate(1.2) brightness(1.13); }
.pond.is-core-awake .living-water::after { opacity: .9; filter: saturate(1.3) brightness(1.15); }
@keyframes broad-swells { to { transform: translate3d(4%, 2%, 0) skewX(-2deg) scale(1.045); opacity: .68; } }
@keyframes current-travel { to { stroke-dashoffset: -240; } }
@keyframes energy-travel { to { stroke-dashoffset: -185; } }
@keyframes wavelet-travel { to { stroke-dashoffset: -130; } }
@keyframes current-sway { to { transform: translate3d(2.4%, -1.1%, 0) skewX(-1.2deg); } }
@keyframes energy-sway { to { transform: translate3d(3.5%, 1.4%, 0) rotate(.45deg) scaleY(1.025); } }
@keyframes nova-breath { 0%, 100% { transform: translate(-50%,-50%) scale(.84); } 50% { transform: translate(-50%,-50%) scale(1.18); opacity: .7; } }
@keyframes glint-current { 0%, 100% { transform: translate(0,0) scale(.65); opacity: .3; } 38% { transform: translate(64px,31px) scale(1.15); opacity: .95; } 72% { transform: translate(118px,75px) scale(.78); opacity: .42; } }
@keyframes petal-current { 0%, 100% { translate: -38px -26px; rotate: -14deg; } 34% { translate: 48px 34px; rotate: 24deg; } 70% { translate: 116px 86px; rotate: 73deg; } }
.water-touch:focus-visible { outline-offset: -7px; border-radius: 28px; }
.shore { position: absolute; z-index: 3; left: -5%; width: 110%; height: 18%; pointer-events: none; background:
  radial-gradient(ellipse at 18% 22%, rgba(221,231,180,.24), transparent 14%),
  radial-gradient(ellipse at 69% 33%, rgba(205,222,168,.18), transparent 18%),
  linear-gradient(180deg, #9fb18a 0%, #849e79 52%, #6f8c6f 100%);
  box-shadow: inset 0 -9px 16px rgba(64,98,67,.13), inset 0 3px 0 rgba(233,240,204,.18); filter: drop-shadow(0 12px 16px rgba(49,91,72,.2)); }
.shore--top { top: -12%; border-radius: 0 0 48% 52%; box-shadow: inset 0 -9px 16px rgba(64,98,67,.13), 0 9px 18px rgba(40,92,87,.2), 0 2px 0 rgba(224,246,222,.28); transform: rotate(-1.5deg); }
.shore--bottom { bottom: -13%; border-radius: 52% 48% 0 0; box-shadow: inset 0 9px 16px rgba(64,98,67,.13), 0 -7px 16px rgba(34,84,85,.16), 0 -2px 0 rgba(222,245,222,.2); transform: rotate(1deg); }
.shore::before { content: ""; position: absolute; inset: 22% 7% 0; opacity: .5; background:
  radial-gradient(circle at 8% 61%, #ead9f0 0 2px, #d1b7dc 2.3px 3px, transparent 3.4px),
  radial-gradient(circle at 42% 37%, #fff1c7 0 1.8px, #e7ca86 2px 2.7px, transparent 3px),
  radial-gradient(circle at 81% 52%, #e8d7ef 0 2px, #cbb0da 2.2px 3px, transparent 3.3px);
  background-size: 115px 48px, 137px 53px, 151px 61px; }
.shore::after { content: ""; position: absolute; inset: 0; opacity: .25; background-image: radial-gradient(circle, #f7f1c3 0 1.6px, transparent 2px), radial-gradient(circle, rgba(55,91,61,.35) 0 1px, transparent 1.4px); background-position: 0 0, 19px 11px; background-size: 47px 31px, 41px 29px; }
.reed { position: absolute; bottom: -2px; width: 3px; height: 64px; border-radius: 100% 100% 0 0; background: linear-gradient(90deg, #526f57, #89a477 56%, #5d785f); box-shadow: 1px 0 2px rgba(44,73,50,.13); transform-origin: bottom; }
.reed::after { content: ""; position: absolute; top: 7px; left: -3px; width: 9px; height: 22px; border-radius: 80% 10%; background: linear-gradient(145deg, #91a979, #60795f); box-shadow: inset 1px 1px 2px rgba(238,245,207,.18); transform: rotate(-25deg); }
.reed--1, .reed--4 { left: 14%; transform: rotate(-9deg); }
.reed--2, .reed--5 { left: 19%; height: 79px; transform: rotate(5deg); }
.reed--3, .reed--6 { right: 15%; height: 70px; transform: rotate(11deg); }
.stone { position: absolute; bottom: -2px; width: 48px; height: 25px; border-radius: 60% 50% 30% 40%; background: radial-gradient(circle at 31% 22%, rgba(255,255,255,.62), transparent 20%), linear-gradient(155deg, #dad6c9, #aca99e 72%); box-shadow: inset -5px -5px 9px rgba(89,91,87,.13), 0 5px 8px rgba(54,87,71,.15); }
.stone--1, .stone--3 { left: 29%; transform: rotate(-8deg); }
.stone--2, .stone--4 { right: 27%; width: 36px; background: #d7d0c2; }
.lily-pad { position: absolute; z-index: 3; width: 78px; height: 47px; overflow: hidden; border-radius: 50%; background:
  radial-gradient(circle at 29% 22%, rgba(236,246,205,.42), transparent 27%),
  radial-gradient(circle at 68% 28%, rgba(255,255,255,.68) 0 1px, transparent 1.8px),
  radial-gradient(circle at 41% 64%, rgba(235,255,247,.48) 0 1px, transparent 1.7px),
  radial-gradient(ellipse at 66% 73%, rgba(33,79,55,.33), transparent 48%),
  linear-gradient(145deg, #a9bd82, #678e64 55%, #386650);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.42), inset -11px -9px 17px rgba(24,63,43,.31), 0 10px 15px rgba(18,64,66,.28), 0 0 0 1px rgba(233,245,210,.13), 0 0 0 5px rgba(218,250,239,.055), 9px 8px 0 7px rgba(216,245,237,.035); pointer-events: none;
  -webkit-mask: conic-gradient(from -10deg at 50% 50%, transparent 0 22deg, #000 23deg 360deg);
  mask: conic-gradient(from -10deg at 50% 50%, transparent 0 22deg, #000 23deg 360deg);
}
.lily-pad::before { content: ""; position: absolute; inset: 8% 10%; border-radius: 50%; background: repeating-conic-gradient(from 8deg at 50% 50%, transparent 0 22deg, rgba(227,241,200,.18) 23deg 24deg, transparent 25deg 45deg); opacity: .72; }
.lily-pad::after { content: ""; position: absolute; left: 49%; top: 47%; width: 42%; height: 1px; background: linear-gradient(90deg, rgba(57,102,72,.6), transparent); transform: rotate(-68deg); transform-origin: left; }
.lily-pad--1 { left: 12%; top: 29%; transform: rotate(17deg); }
.lily-pad--2 { right: 11%; top: 33%; transform: rotate(-18deg) scale(.75); }
.lily-pad--3 { left: 23%; bottom: 22%; transform: rotate(-8deg) scale(.58); }
.lily-pad--4 { right: 27%; bottom: 14%; transform: rotate(12deg) scale(.68); }

.lotus { --petal: #f8e8ed; --petal-deep: #dba6bd; position: absolute; z-index: 6; width: 86px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); filter: drop-shadow(0 11px 9px rgba(24,72,82,.27)) drop-shadow(0 0 12px rgba(255,245,208,.22)); }
.lotus::before { content: ""; position: absolute; z-index: -1; left: 13%; right: 7%; bottom: 15%; height: 19%; border-radius: 50%; background: rgba(43,100,108,.22); filter: blur(5px); transform: rotate(-7deg); }
.lotus::after { content: ""; position: absolute; z-index: -2; left: -22%; top: 43%; width: 144%; height: 38%; border: 1px solid rgba(236,255,250,.37); border-radius: 50%; box-shadow: 0 0 0 7px rgba(219,248,239,.055), 14px 5px 0 12px rgba(206,244,235,.035); opacity: .64; transform: rotate(-7deg) scale(.82); animation: flower-wake 4.8s ease-in-out infinite; }
.lotus__petals, .lotus__petals i, .lotus__petals b { position: absolute; display: block; }
.lotus__petals { inset: 0; transition: transform .7s cubic-bezier(.2,.85,.25,1.2); animation: lotus-afloat 4.4s ease-in-out infinite; }
.lotus__petals i { z-index: 1; left: 29%; top: 5%; width: 42%; height: 53%; border: 1px solid rgba(255,255,255,.76); border-radius: 72% 22% 68% 24%; background:
  linear-gradient(100deg, rgba(255,255,255,.54), transparent 27%),
  radial-gradient(ellipse at 48% 8%, rgba(255,255,255,.96), transparent 39%),
  linear-gradient(180deg, rgba(255,255,255,.86) 0%, var(--petal) 47%, var(--petal-deep) 100%);
  transform-origin: 50% 88%;
  box-shadow: inset 0 -9px 13px rgba(102,66,118,.11), inset 3px 0 5px rgba(255,255,255,.25), 0 2px 3px rgba(80,77,100,.08);
  transition: transform .72s cubic-bezier(.2,.85,.25,1.2);
}
.lotus__petals i::after { content: ""; position: absolute; left: 50%; bottom: 8%; width: 1px; height: 68%; background: linear-gradient(0deg, rgba(139,84,124,.24), rgba(255,255,255,.5), transparent); transform: rotate(1deg); opacity: .7; }
.lotus__petals i:nth-child(2)::before, .lotus__petals i:nth-child(6)::before { content: ""; position: absolute; left: 28%; top: 23%; width: 4px; height: 5px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(244,255,253,.38); box-shadow: inset 1px 1px 2px rgba(255,255,255,.8), 0 1px 2px rgba(75,100,112,.17); }
.lotus__petals i:nth-child(-n+8) { z-index: 0; top: 8%; width: 45%; height: 51%; opacity: .94; filter: saturate(.92); }
.lotus__petals i:nth-child(n+9) { z-index: 2; left: 33%; top: 13%; width: 34%; height: 43%; border-radius: 76% 25% 70% 27%; opacity: .98; box-shadow: inset 0 -7px 10px rgba(102,66,118,.1), inset 2px 0 4px rgba(255,255,255,.3), 0 2px 3px rgba(80,77,100,.07); }
.lotus__petals i:nth-child(1) { --angle: 0deg; transform: rotate(var(--angle)) scale(.86); }
.lotus__petals i:nth-child(2) { --angle: 45deg; transform: rotate(var(--angle)) scale(.82); }
.lotus__petals i:nth-child(3) { --angle: 90deg; transform: rotate(var(--angle)) scale(.87); }
.lotus__petals i:nth-child(4) { --angle: 135deg; transform: rotate(var(--angle)) scale(.81); }
.lotus__petals i:nth-child(5) { --angle: 180deg; transform: rotate(var(--angle)) scale(.85); }
.lotus__petals i:nth-child(6) { --angle: 225deg; transform: rotate(var(--angle)) scale(.83); }
.lotus__petals i:nth-child(7) { --angle: 270deg; transform: rotate(var(--angle)) scale(.88); }
.lotus__petals i:nth-child(8) { --angle: 315deg; transform: rotate(var(--angle)) scale(.82); }
.lotus__petals i:nth-child(9) { --angle: 22.5deg; transform: rotate(var(--angle)) scale(.7); }
.lotus__petals i:nth-child(10) { --angle: 67.5deg; transform: rotate(var(--angle)) scale(.74); }
.lotus__petals i:nth-child(11) { --angle: 112.5deg; transform: rotate(var(--angle)) scale(.71); }
.lotus__petals i:nth-child(12) { --angle: 157.5deg; transform: rotate(var(--angle)) scale(.75); }
.lotus__petals i:nth-child(13) { --angle: 202.5deg; transform: rotate(var(--angle)) scale(.72); }
.lotus__petals i:nth-child(14) { --angle: 247.5deg; transform: rotate(var(--angle)) scale(.74); }
.lotus__petals i:nth-child(15) { --angle: 292.5deg; transform: rotate(var(--angle)) scale(.71); }
.lotus__petals i:nth-child(16) { --angle: 337.5deg; transform: rotate(var(--angle)) scale(.73); }
.lotus__petals b { z-index: 3; inset: 33%; border-radius: 50%; background:
  repeating-conic-gradient(from 8deg, #f8e8a7 0 7deg, #d7a64d 8deg 13deg, #f8e8a7 14deg 22deg),
  radial-gradient(circle, #fff6c9, #dfae50 61%, transparent 64%);
  box-shadow: 0 0 0 3px rgba(255,235,158,.22), 0 2px 8px rgba(147,99,48,.18);
  transform: scale(.48);
  transition: transform .62s ease;
}
.lotus__petals b::after { content: ""; position: absolute; inset: 28%; border-radius: 50%; background: #fff4b6; box-shadow: 0 0 9px rgba(255,234,151,.9); }
.lotus.is-open .lotus__petals { transform: rotate(8deg) scale(1.13); }
.lotus.is-open .lotus__petals i:nth-child(-n+8) { transform: rotate(var(--angle)) translateY(-8px) scale(.96); }
.lotus.is-open .lotus__petals i:nth-child(n+9) { transform: rotate(var(--angle)) translateY(-4px) scale(.84); }
.lotus.is-open .lotus__petals b { transform: scale(1); }
.lotus:hover .lotus__petals, .lotus:focus-visible .lotus__petals { transform: rotate(8deg) scale(1.12); filter: brightness(1.035) saturate(1.04); }
.lotus__hint { position: absolute; left: 50%; bottom: -16px; padding: 3px 7px; border-radius: 999px; color: #6a5d75; background: rgba(255,255,255,.68); box-shadow: 0 3px 12px rgba(80,65,91,.1); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; transform: translateX(-50%); opacity: .82; }
.lotus.is-open .lotus__hint { opacity: 0; }
.lotus--one { left: 28%; top: 35%; --petal: #f4d3dc; --petal-deep: #dca1b8; }
.lotus--two { left: 67%; top: 24%; --petal: #fffdf2; --petal-deep: #e8d8ba; transform: translate(-50%,-50%) scale(.78); }
.lotus--two .lotus__petals, .lotus--four .lotus__petals { animation-delay: -1.4s; }
.lotus--three { left: 79%; top: 59%; --petal: #e2d4f1; --petal-deep: #bba3da; transform: translate(-50%,-50%) scale(.9); }
.lotus--three .lotus__petals, .lotus--five .lotus__petals { animation-delay: -2.8s; }
.lotus--four { left: 45%; top: 69%; --petal: #f8e6b8; --petal-deep: #ddb660; transform: translate(-50%,-50%) scale(1.05); }
.lotus--five { left: 51%; top: 19%; --petal: #eee2f6; --petal-deep: #c6addd; transform: translate(-50%,-50%) scale(.68); }
@keyframes lotus-afloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; filter: brightness(1.045); } }
@keyframes flower-wake { 0%, 100% { opacity: .33; transform: rotate(-7deg) scale(.72); } 50% { opacity: .72; transform: rotate(-4deg) scale(1.04); } }

.novacore-glow { position: absolute; z-index: 5; left: 50%; top: 48%; width: 58px; aspect-ratio: 1; border: 1px solid rgba(124,91,166,.34); border-radius: 50%; background: radial-gradient(circle, rgba(255,252,231,.68), rgba(226,241,222,.43) 43%, rgba(226,211,247,.38)); transform: translate(-50%,-50%); box-shadow: 0 0 0 9px rgba(241,218,159,.08), 0 0 45px rgba(133,92,182,.25), 0 0 62px rgba(185,231,203,.16); animation: core-breathe 4.8s ease-in-out infinite; }
.novacore-glow span { position: absolute; inset: 8px; border: 1px solid rgba(207,169,93,.48); border-radius: 50%; transition: transform .55s, box-shadow .55s; }
.novacore-glow b { font-family: var(--serif); font-size: .82rem; font-weight: 400; }
.novacore-glow:hover span, .novacore-glow:focus-visible span, .novacore-glow[aria-pressed="true"] span { transform: scale(1.55); box-shadow: 0 0 35px 8px rgba(202,167,237,.4), inset 0 0 20px rgba(255,242,173,.65); }
@keyframes core-breathe { 50% { box-shadow: 0 0 0 12px rgba(211,237,215,.1), 0 0 54px rgba(143,105,188,.31), 0 0 78px rgba(241,216,151,.15); } }

.flower-message { position: absolute; z-index: 15; left: 50%; top: 46%; width: min(76%, 430px); padding: 31px 34px; border: 1px solid rgba(255,255,255,.94); border-radius: 22px; background: rgba(255,253,248,.96); box-shadow: 0 24px 86px rgba(55,70,80,.24), inset 0 1px 0 rgba(255,255,255,.96); backdrop-filter: blur(20px) saturate(1.04); text-align: center; transform: translate(-50%,-50%); animation: message-in .42s cubic-bezier(.2,.8,.2,1); }
@keyframes message-in { from { opacity: 0; transform: translate(-50%,-43%) scale(.96); } }
.flower-message button { position: absolute; top: 4px; right: 5px; width: 44px; aspect-ratio: 1; border: 0; background: none; color: #897d90; font-size: 1.2rem; }
.flower-message p { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 2.15rem); line-height: 1.25; }
.flower-message cite { display: block; margin-top: 13px; color: var(--lavender-deep); text-transform: uppercase; letter-spacing: .17em; font-size: .75rem; font-style: normal; }

.cat-nook { position: absolute; z-index: 7; right: 18px; bottom: 12px; display: flex; align-items: end; gap: 10px; max-width: 235px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.82); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(232,243,238,.62)); box-shadow: 0 12px 32px rgba(24,69,75,.18), inset 0 1px 0 rgba(255,255,255,.82); backdrop-filter: blur(11px) saturate(1.05); }
.cat { position: relative; flex: 0 0 58px; width: 58px; height: 58px; padding: 0; border: 0; background: transparent; }
.cat__body { position: absolute; left: 14px; bottom: 2px; width: 39px; height: 38px; border-radius: 50% 45% 40% 38%; background: linear-gradient(140deg, #c9b7ac, #927d74); box-shadow: inset 5px 4px 10px rgba(255,255,255,.18); }
.cat__head { position: absolute; left: 4px; top: 5px; width: 36px; height: 32px; border-radius: 46% 48% 52% 48%; background: #b49f94; }
.cat__ear { position: absolute; top: -7px; width: 15px; height: 19px; background: #a38c82; clip-path: polygon(50% 0, 100% 100%, 0 85%); }
.cat__ear--left { left: 1px; transform: rotate(-13deg); }
.cat__ear--right { right: 0; transform: rotate(13deg); }
.cat__eye { position: absolute; top: 14px; width: 7px; height: 3px; border-radius: 50%; border-top: 2px solid #453c42; transition: transform .25s; }
.cat__eye--left { left: 7px; }
.cat__eye--right { right: 7px; }
.cat__nose { position: absolute; left: 50%; top: 20px; width: 4px; height: 3px; border-radius: 50%; background: #725761; transform: translateX(-50%); }
.cat__tail { position: absolute; right: -2px; bottom: 7px; width: 28px; height: 37px; border: 7px solid #8e786f; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(17deg); }
.cat.is-blinking .cat__eye { transform: scaleY(.15); }
.cat:hover { transform: translateY(-2px); }
.cat-nook__label strong, .cat-nook__label span { display: block; }
.cat-nook__label strong { font-family: var(--serif); font-size: .84rem; font-weight: 500; }
.cat-nook__label span { margin-top: 2px; color: #655d69; font-size: .75rem; line-height: 1.4; }
.pond-status { min-height: 25px; margin: 12px 10px 0; color: #65796b; font-family: var(--serif); font-size: .82rem; font-style: italic; text-align: center; }

.wish-card { padding: clamp(26px, 2.6vw, 39px); border: 1px solid rgba(255,255,255,.86); border-radius: 29px; background: linear-gradient(145deg, rgba(255,253,248,.86), rgba(235,246,237,.52) 59%, rgba(251,244,248,.7)); box-shadow: 0 27px 82px rgba(88,74,104,.14), 0 10px 34px rgba(143,188,154,.09), 0 8px 28px rgba(205,168,97,.05), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(1.06); }
.wish-card__heading h2 { margin: 12px 0 30px; color: #40533d; font-family: var(--serif); font-size: clamp(1.8rem, 2.2vw, 2.65rem); font-weight: 400; line-height: 1.08; letter-spacing: -.035em; }
.wish-card fieldset { margin: 0 0 26px; padding: 0; border: 0; }
.wish-card legend { width: 100%; margin-bottom: 11px; color: var(--nova-mint-ink); text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; font-weight: 650; }
.phrase-start { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.phrase-start legend { grid-column: 1 / -1; }
.phrase-start button, .word-choices button { border: 1px solid var(--line); background: rgba(255,255,255,.5); transition: .2s; }
.phrase-start button { min-height: 44px; border-radius: 12px; font-family: var(--serif); font-size: .86rem; }
.energy-ombre { color: #557360; background: linear-gradient(90deg, #416a50 0%, #58765c 35%, #75549b 68%, #5d3e82 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: .81rem; font-weight: 700; white-space: nowrap; }
.phrase-start button.selected, .word-choices button.selected { border-color: rgba(137,105,181,.46); background: linear-gradient(135deg, var(--lilac), rgba(218,237,222,.72)); box-shadow: inset 0 0 17px rgba(150,112,191,.06), 0 0 12px rgba(183,220,192,.1); }
.word-choices button.selected { color: var(--nova-mint-ink); font-weight: 650; }
.word-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.word-choices legend { flex-basis: 100%; color: #9b83c7; text-shadow: 0 0 16px rgba(184,161,220,.16); }
.word-choices button { padding: 9px 12px; border-radius: 999px; color: #695e71; font-size: .75rem; }
.wish-card.is-you-mode .word-choices legend { color: #c16f99; text-shadow: 0 0 16px rgba(239,165,201,.24); }
.wish-card.is-you-mode .word-choices button { border-color: rgba(222,147,184,.26); color: #8f6177; background: linear-gradient(145deg, rgba(255,253,254,.9), rgba(251,226,239,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(218,143,181,.07); }
.wish-card.is-you-mode .word-choices button:hover, .wish-card.is-you-mode .word-choices button:focus-visible { border-color: rgba(211,118,165,.48); background: linear-gradient(145deg, #fff8fb, #f8d5e5); box-shadow: 0 0 0 3px rgba(239,169,202,.1), 0 5px 15px rgba(211,126,169,.1); }
.wish-card.is-you-mode .word-choices button.selected { border-color: rgba(202,102,153,.5); color: #76455f; background: linear-gradient(135deg, #f8c9df 0%, #f1b9d5 52%, #f8dce9 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 5px 17px rgba(206,111,158,.17), 0 0 18px rgba(247,190,216,.16); }
.wish-preview { min-height: 112px; padding: 19px; border: 1px solid rgba(207,169,93,.23); border-radius: 17px; background: linear-gradient(135deg, rgba(255,251,232,.75), rgba(230,243,233,.48) 53%, rgba(240,229,249,.52)); }
.wish-preview span { color: var(--nova-mint-ink); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 650; }
.wish-preview p { margin: 10px 0 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.float-wish { width: 100%; min-height: 52px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 14px; color: white; background: linear-gradient(120deg, #a48bcd, #806aab 64%, #7661a2); box-shadow: 0 13px 27px rgba(123,93,160,.24), inset 0 1px 0 rgba(255,255,255,.22); }
.float-wish i { color: #ffe49b; font-style: normal; }
.float-wish:disabled { color: #877d8b; background: #e5dfea; box-shadow: none; opacity: .72; }
.audio-hook { display: flex; gap: 9px; margin: 19px 0 0; color: #887d8c; font-size: .75rem; line-height: 1.5; }
.audio-hook span { color: var(--nova-mint-ink); }
.audio-hook.is-ready { color: #657b61; }

.ripple { position: absolute; z-index: 4; width: 28px; height: 11px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%) rotate(-7deg); }
.ripple::before, .ripple::after { content: ""; position: absolute; inset: 0; border: 1.25px solid rgba(248,255,248,.9); border-radius: 50%; box-shadow: 0 1px 0 rgba(35,102,111,.26), 0 0 7px rgba(216,248,239,.23), inset 0 1px 0 rgba(255,255,255,.4); animation: ripple-out 2.15s cubic-bezier(.16,.58,.25,1) forwards; }
.ripple::after { border-color: rgba(220,242,236,.7); animation-delay: .24s; }
@keyframes ripple-out { 0% { opacity: .92; transform: scale(.28); } 65% { opacity: .46; } 100% { opacity: 0; transform: scale(13, 11); } }
.floating-wish { --petal: #f1e4f7; --petal-deep: #c2a5db; position: absolute; z-index: 6; left: 50%; top: 50%; width: 96px; height: 68px; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); pointer-events: none; filter: drop-shadow(0 8px 8px rgba(47,93,99,.2)); animation: wish-drift 14s ease-in-out forwards; }
.floating-wish::before { content: ""; position: absolute; z-index: -1; left: 2%; right: 2%; top: 24%; bottom: 4%; border-radius: 50%; background:
  radial-gradient(circle at 30% 23%, rgba(230,242,199,.35), transparent 29%),
  linear-gradient(145deg, #9ab184, #668f6f 65%, #557765);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.3), 0 7px 10px rgba(43,91,83,.22);
  transform: rotate(-7deg);
  -webkit-mask: conic-gradient(from -15deg at 50% 50%, transparent 0 23deg, #000 24deg 360deg);
  mask: conic-gradient(from -15deg at 50% 50%, transparent 0 23deg, #000 24deg 360deg);
}
.floating-wish::after { content: ""; position: absolute; z-index: -2; left: -22%; right: -36%; bottom: -8%; height: 35%; border: 1px solid rgba(231,255,247,.55); border-left-color: transparent; border-radius: 50%; background: linear-gradient(90deg, rgba(39,100,107,.23), transparent 62%); box-shadow: 12px 5px 0 5px rgba(226,248,242,.08), 25px 9px 0 10px rgba(220,241,239,.04); filter: blur(.5px); animation: wish-wake 2.6s ease-in-out infinite; }
.floating-wish .lotus__petals { left: 50%; top: 41%; right: auto; bottom: auto; width: 67px; height: 67px; transform: translate(-50%,-50%) rotate(-9deg) scale(.86); filter: drop-shadow(0 4px 4px rgba(77,70,100,.15)); animation: wish-flower-bob 4.8s ease-in-out infinite alternate; }
.floating-wish .lotus__petals b { transform: scale(.88); }
@keyframes wish-flower-bob { to { transform: translate(-50%,-55%) rotate(-3deg) scale(.86); } }
@keyframes wish-wake { 50% { transform: translateX(6px) scaleX(1.08); opacity: .62; } }
@keyframes wish-drift { 0% { left: 52%; top: 76%; opacity: 0; transform: translate(-50%,-50%) scale(.82) rotate(-4deg); } 8% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-1deg); } 31% { left: 41%; top: 61%; transform: translate(-50%,-50%) scale(.98) rotate(-7deg); } 62% { left: 49%; top: 39%; transform: translate(-50%,-50%) scale(.96) rotate(5deg); } 82% { left: 58%; top: 29%; transform: translate(-50%,-50%) scale(.92) rotate(-3deg); } 100% { left: 68%; top: 17%; opacity: .16; transform: translate(-50%,-50%) scale(.88) rotate(9deg); } }
.core-pulse { position: absolute; z-index: 4; left: 50%; top: 48%; width: 58px; height: 25px; border: 2px solid rgba(245,219,148,.75); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px rgba(211,243,219,.32), 0 0 19px rgba(210,188,239,.28); transform: translate(-50%,-50%); animation: core-pulse 2.2s cubic-bezier(.16,.62,.22,1) forwards; }
.core-pulse::before, .core-pulse::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(204,241,218,.68); border-radius: 50%; animation: core-ring 2.2s .22s cubic-bezier(.16,.62,.22,1) forwards; }
.core-pulse::after { border-color: rgba(216,197,242,.64); animation-delay: .43s; }
@keyframes core-pulse { to { width: 470px; height: 195px; opacity: 0; transform: translate(-50%,-50%) rotate(-5deg); } }
@keyframes core-ring { to { transform: scale(1.3); opacity: 0; } }

.miki-art { width: min(calc(100% - 64px), 1500px); margin: 12px auto clamp(42px, 6vw, 82px); }
.miki-art > header { max-width: 740px; margin: 0 auto 38px; text-align: center; }
.miki-art > header h2 { margin: 12px 0 15px; color: #354d40; font-family: var(--serif); font-size: clamp(2.5rem, 4.7vw, 5.2rem); font-weight: 400; line-height: .94; letter-spacing: -.05em; }
.miki-art > header > p:last-child { color: #5f6f66; }
.miki-art__grid { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: 16px; }
.miki-art figure { position: relative; min-height: 520px; margin: 0; overflow: hidden; border: 8px solid rgba(255,255,255,.76); border-radius: 28px; background: #eee7f4; box-shadow: 0 25px 70px rgba(75,56,97,.13); }
.miki-art figure img { width: 100%; height: 100%; object-fit: cover; }
.miki-art__portrait img { object-position: center 35%; }
.miki-art figcaption { position: absolute; left: 13px; right: 13px; bottom: 12px; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255,255,255,.72); border-radius: 13px; color: #30463a; background: rgba(255,253,248,.9); backdrop-filter: blur(10px); }
.miki-art figcaption span { text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; font-weight: 750; }
.miki-art figcaption strong { color: #75588b; font-family: var(--serif); font-size: 1rem; font-weight: 400; text-align: right; }

.music-player { width: min(calc(100% - 64px), 1500px); min-height: 138px; margin: 0 auto 45px; display: grid; grid-template-columns: auto minmax(250px, 1fr) minmax(150px, .7fr) auto; align-items: center; gap: clamp(18px, 2.6vw, 38px); padding: 24px 27px; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background:
  radial-gradient(circle at 12% 20%, rgba(255,248,211,.44), transparent 27%),
  linear-gradient(128deg, rgba(244,238,253,.82), rgba(226,242,229,.76) 52%, rgba(255,250,240,.82));
  box-shadow: 0 24px 70px rgba(76,61,92,.12), 0 8px 24px rgba(107,157,122,.08), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(22px) saturate(1.07); }
.music-player__art { position: relative; width: 78px; aspect-ratio: 1; border-radius: 24px; overflow: hidden; background:
  radial-gradient(circle at 29% 24%, rgba(255,249,202,.95) 0 3%, rgba(255,226,151,.24) 18%, transparent 35%),
  linear-gradient(145deg, #cbdcc6, #83b3a2 55%, #626f8d); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px rgba(75,102,92,.17); }
.music-player__art::before, .music-player__art::after { content: ""; position: absolute; left: -12%; width: 125%; height: 27%; border: 1px solid rgba(238,255,246,.55); border-radius: 50%; transform: rotate(-8deg); }
.music-player__art::before { top: 43%; box-shadow: 0 9px 0 rgba(224,246,239,.17), 0 19px 0 rgba(219,232,245,.12); }
.music-player__art::after { top: 21%; border-color: rgba(231,217,249,.47); box-shadow: 0 12px 0 rgba(255,236,178,.12); }
.music-player__art span { position: absolute; z-index: 2; left: 50%; top: 52%; width: 27px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffeaae 0 17%, #fffaf1 19% 35%, #e7cce9 38% 55%, transparent 58%); transform: translate(-50%,-50%); filter: drop-shadow(0 3px 4px rgba(59,82,78,.19)); }
.music-player__art i, .music-player__art b { position: absolute; z-index: 1; bottom: 13px; width: 27px; height: 17px; border-radius: 50%; background: linear-gradient(145deg, #9ab47e, #507b60); box-shadow: inset 1px 1px 2px rgba(255,255,255,.31); }
.music-player__art i { left: 9px; transform: rotate(12deg); }
.music-player__art b { right: 8px; transform: rotate(-9deg) scale(.8); }
.music-player__copy h2 { margin: 3px 0 2px; color: #40533d; font-family: var(--serif); font-size: clamp(1.55rem, 2.2vw, 2.35rem); font-weight: 400; line-height: 1; }
.music-player__copy > p:not(.eyebrow) { margin: 0; color: #6e6874; font-family: var(--serif); font-size: .91rem; }
.music-player__copy small { display: block; margin-top: 7px; color: #708176; font-size: .75rem; letter-spacing: .025em; }
.music-player__visual { height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: .45; }
.music-player__visual i { width: 3px; height: 18%; border-radius: 999px; background: linear-gradient(180deg, #8b75ba, #86b79a 66%, #d1a851); transform-origin: center; }
.music-player__visual i:nth-child(2), .music-player__visual i:nth-child(6) { height: 42%; }
.music-player__visual i:nth-child(3), .music-player__visual i:nth-child(5) { height: 68%; }
.music-player__visual i:nth-child(4) { height: 92%; }
.music-player.is-playing .music-player__visual { opacity: .85; }
.music-player.is-playing .music-player__visual i { animation: music-breathe 2.4s ease-in-out infinite; }
.music-player.is-playing .music-player__visual i:nth-child(2) { animation-delay: -.8s; }
.music-player.is-playing .music-player__visual i:nth-child(3) { animation-delay: -1.5s; }
.music-player.is-playing .music-player__visual i:nth-child(4) { animation-delay: -.35s; }
.music-player.is-playing .music-player__visual i:nth-child(5) { animation-delay: -1.9s; }
.music-player.is-playing .music-player__visual i:nth-child(6) { animation-delay: -1.1s; }
.music-player.is-playing .music-player__visual i:nth-child(7) { animation-delay: -.55s; }
@keyframes music-breathe { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.08); } }
.music-player__controls { min-width: 205px; display: grid; gap: 10px; }
.music-play { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid rgba(104,126,105,.22); border-radius: 999px; color: #465648; background: rgba(255,255,255,.57); box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px rgba(76,86,77,.08); font-size: .75rem; font-weight: 650; letter-spacing: .045em; transition: .25s ease; }
.music-play:hover, .music-play:focus-visible { border-color: rgba(118,91,161,.35); background: rgba(248,243,255,.76); transform: translateY(-1px); }
.music-play__icon { display: grid; place-items: center; width: 25px; aspect-ratio: 1; border-radius: 50%; color: white; background: linear-gradient(145deg, #8cad95, #8066a6); box-shadow: 0 0 15px rgba(140,175,149,.2); font-size: .75rem; }
.music-player.is-playing .music-play { border-color: rgba(128,102,169,.32); background: linear-gradient(135deg, rgba(232,222,247,.74), rgba(221,240,225,.71)); }
.music-volume { display: flex; align-items: center; gap: 10px; color: #756e79; text-transform: uppercase; letter-spacing: .11em; font-size: .75rem; }
.music-volume input { width: 100%; height: 3px; accent-color: #809f87; cursor: pointer; }
.music-player__source { grid-column: 2 / -1; margin: -13px 0 0; color: #887f8b; font-size: .75rem; letter-spacing: .02em; }

footer { width: min(calc(100% - 64px), 1500px); margin: 0 auto; min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--line); color: #7d7283; text-transform: uppercase; letter-spacing: .11em; font-size: .75rem; }
footer p { margin: 0; }
footer strong { color: var(--ink); }
footer em { font-style: normal; }

@media (max-width: 1220px) {
  .miki-intro { grid-template-columns: .8fr 1.2fr; }
  .miki-intro__art { grid-column: 1 / -1; width: min(100%, 640px); justify-self: center; }
  .garden-shell { grid-template-columns: .63fr 1.64fr; align-items: start; }
  .wish-card { grid-column: 1 / -1; width: min(720px, 100%); justify-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .wish-card__heading, .wish-preview, .float-wish, .audio-hook { grid-column: 1 / -1; }
  .wish-card__heading h2 { margin-bottom: 22px; }
}

@media (max-width: 860px) {
  .site-header { width: min(calc(100% - 30px), 1500px); min-height: 76px; }
  .private-label { display: none; }
  .miki-intro { width: min(calc(100% - 30px), 720px); min-height: 0; grid-template-columns: 1fr; padding: 22px; border-radius: 30px; }
  .miki-intro__copy { grid-row: 1; padding: 24px 5px 8px; }
  .miki-intro__photo { grid-row: 2; width: min(100%, 560px); justify-self: center; }
  .miki-intro__art { grid-row: 3; grid-column: auto; }
  .garden-shell { width: min(calc(100% - 30px), 720px); grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 42px; }
  .welcome { text-align: center; }
  .welcome h1 { font-size: clamp(4.1rem, 15vw, 6.5rem); }
  .welcome__intro { margin-inline: auto; }
  .game-label { margin-top: 27px; }
  .pond-card { grid-row: 2; }
  .pond { min-height: min(690px, 75vh); }
  .wish-card { grid-column: auto; }
  .music-player { width: min(calc(100% - 30px), 720px); grid-template-columns: auto minmax(0, 1fr) auto; }
  .music-player__visual { display: none; }
  .music-player__source { grid-column: 2 / -1; }
  .miki-art { width: min(calc(100% - 30px), 720px); }
  .miki-art__grid { grid-template-columns: 1fr; }
  .miki-art figure { min-height: 0; aspect-ratio: 1; }
  .miki-art__portrait { aspect-ratio: .78 !important; }
}

@media (max-width: 570px) {
  .site-header { align-items: center; }
  .brand { gap: 10px; }
  .brand__branch { max-width: 105px; padding-left: 10px; line-height: 1.35; }
  .sound-toggle { width: 42px; padding: 0; justify-content: center; }
  .sound-toggle [data-sound-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .miki-intro { margin-top: 24px; padding: 14px; }
  .miki-intro__copy h1 { font-size: 3.45rem; }
  .miki-intro__photo, .miki-intro__art { border-width: 5px; border-radius: 22px; }
  .miki-intro__photo { border-radius: 44% 44% 20px 20px; }
  .garden-shell { padding-top: 30px; }
  .welcome h1 { max-width: 100%; margin: 17px 0 25px; font-size: clamp(3rem, 14vw, 3.8rem); }
  .welcome__intro { padding-inline: 8px; }
  .pond-card__topline { padding-inline: 8px; }
  .weather { display: none; }
  .pond { min-height: 620px; border-radius: 23px; }
  .lotus { width: 72px; }
  .lotus--one { left: 24%; top: 31%; }
  .lotus--two { left: 72%; top: 24%; }
  .lotus--three { left: 75%; top: 53%; }
  .lotus--four { left: 37%; top: 64%; }
  .lotus--five { left: 47%; top: 16%; }
  .novacore-glow { top: 45%; }
  .flower-message { top: 43%; width: 86%; padding: 29px 24px; }
  .cat-nook { left: 11px; right: 11px; bottom: 8px; max-width: none; }
  .cat-nook__label span { font-size: .75rem; }
  .wish-card { display: block; padding: 28px 22px; }
  .phrase-start { margin-bottom: 24px !important; }
  .music-player { grid-template-columns: auto minmax(0, 1fr); gap: 17px; padding: 20px; border-radius: 24px; }
  .music-player__art { width: 62px; border-radius: 19px; }
  .music-player__copy > p:not(.eyebrow) { font-size: .84rem; line-height: 1.45; }
  .music-player__controls { grid-column: 1 / -1; min-width: 0; }
  .music-player__source { grid-column: 1 / -1; margin: 0; line-height: 1.4; }
  .miki-art { margin-top: 0; }
  .miki-art > header { margin-bottom: 28px; }
  .miki-art figure { border-width: 5px; border-radius: 20px; }
  .miki-art figcaption { left: 9px; right: 9px; bottom: 8px; }
  footer { width: min(calc(100% - 30px), 1500px); padding: 26px 0; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}