.intro{
  --ease:cubic-bezier(.22,.61,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --accent:var(--wood);
  --bg:radial-gradient(130% 90% at 12% 0%,#FFFFFF 0%,#F4F1E8 45%,#E7DEC9 100%);
  --ink:#242220;--ink-soft:rgb(36 34 32/.58);--ink-faint:rgb(36 34 32/.2);--glass:rgb(255 255 255/.3);
  --water-1:#a9cbe2;--water-2:#7fa9c8;--tea-1:#e0aa58;--tea-2:#8f4f17;--leaf:#4a5a32;
  --kettle:#2a2622;--kettle-edge:rgb(0 0 0/0);--kettle-shine:rgb(255 255 255/.14);
  position:fixed;inset:0;z-index:200;display:flex;overflow-y:auto;background:var(--bg);color:var(--ink);font-family:var(--ui);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .intro{
    --bg:radial-gradient(130% 90% at 12% 0%,#2a3866 0%,#182038 42%,#0c0f18 100%);
    --ink:#F2EFE6;--ink-soft:rgb(242 239 230/.58);--ink-faint:rgb(242 239 230/.2);--glass:rgb(242 239 230/.07);
    --water-1:#cfe3f2;--water-2:#9fc0da;
    --kettle:#080a10;--kettle-edge:rgb(242 239 230/.24);--kettle-shine:rgb(242 239 230/.14);
  }
}
:root[data-theme="dark"] .intro{
  --bg:radial-gradient(130% 90% at 12% 0%,#2a3866 0%,#182038 42%,#0c0f18 100%);
  --ink:#F2EFE6;--ink-soft:rgb(242 239 230/.58);--ink-faint:rgb(242 239 230/.2);--glass:rgb(242 239 230/.07);
  --water-1:#cfe3f2;--water-2:#9fc0da;
  --kettle:#080a10;--kettle-edge:rgb(242 239 230/.24);--kettle-shine:rgb(242 239 230/.14);
}
body.intro-open{overflow:hidden}
.intro.closing{opacity:0;pointer-events:none;transition:opacity .5s ease}
.intro-inner{margin:auto;display:flex;flex-direction:column;align-items:center;width:100%;padding:calc(34px + env(safe-area-inset-top,0px)) 22px calc(34px + env(safe-area-inset-bottom,0px))}
.intro svg{display:block;overflow:visible}

.intro .i-skip{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:18px;z-index:2;padding:9px 15px;border:1px solid var(--ink-faint);border-radius:999px;color:var(--ink-soft);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;animation:i-skip-out .5s ease 4.3s both}
.intro .i-skip:hover{color:var(--ink)}

.intro .i-mark{display:flex;flex-direction:column;align-items:center;gap:9px;animation:i-rise .8s var(--ease) 3.35s both}
.intro .i-mark-t{font-family:var(--display);font-weight:400;font-size:34px;line-height:1;letter-spacing:.06em;white-space:nowrap}
.intro .i-mark-t em{font-style:normal;font-size:.62em;letter-spacing:.02em;color:var(--accent)}
.intro .i-mark-s{font-size:10px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--ink-soft)}

.intro .ln{fill:none;stroke:var(--ink);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.intro .ln.soft{stroke:var(--ink-soft)}
.intro .ln.faint{stroke:var(--ink-faint)}
.intro .draw{stroke-dasharray:1 2;animation:i-draw 1s var(--ease) var(--d,0s) both}
.intro .glass{fill:var(--glass);animation:i-fade .9s ease var(--d,0s) both}
.intro .wisp{fill:none;stroke:var(--ink-soft);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1 2;opacity:0;animation:i-wisp 1.5s ease-out var(--d)}
.intro .wisp.loop{animation:i-wisp 3.2s ease-out var(--d) infinite}

.intro .i-art{flex:none;width:min(100%,400px);height:auto;aspect-ratio:300/240;margin:12px 0 22px;animation:i-settle .95s var(--ease-io) 3.05s both}
.intro .a-stream{fill:none;stroke:var(--water-1);stroke-width:2.1;stroke-dasharray:1 2;animation:i-a-pour .42s cubic-bezier(.5,0,.9,.6) 1.05s both,i-a-unpour .4s cubic-bezier(.4,0,1,1) 2.6s forwards}
.intro .a-water{animation:i-a-fill 1.55s cubic-bezier(.3,.1,.3,1) 1.3s both}
.intro .a-surface{fill:var(--water-1);fill-opacity:.3;stroke:var(--water-1);stroke-width:.8}
.intro .a-bloom{transform-box:fill-box;transform-origin:center;animation:i-a-bloom 1.7s var(--ease) 1.7s both}
.intro .a-tea{opacity:.8;animation:i-fade 1.5s ease 2.05s both}
.intro .a-tea-top{fill:var(--tea-1)}
.intro .a-ripple{fill:none;stroke:var(--water-1);stroke-width:.9;opacity:0;transform-box:fill-box;transform-origin:center;animation:i-a-ripple .95s ease-out var(--d)}
.intro .a-leaf{fill:var(--leaf);stroke:#2f3b1f;stroke-width:.4;transform-box:fill-box;transform-origin:center;animation:i-fade .5s ease .75s both,i-a-unfurl 1.8s var(--ease) 1.65s both}
.intro .a-shine{fill:none;stroke:var(--ink-faint);stroke-width:1.8;stroke-linecap:round;animation:i-fade .8s ease .9s both}
.intro .a-lid{transform-box:fill-box;transform-origin:center;animation:i-a-lid-in .7s var(--ease) .55s both,i-a-lid-on .75s var(--ease-io) 3s forwards}
.intro .a-lid .glass{animation:none}
.intro .a-kettle{transform-origin:349px 62px;animation:i-a-kettle-in .85s var(--ease) .25s both,i-a-kettle-out .7s var(--ease-io) 2.72s forwards}
.intro .k-body{fill:var(--kettle);stroke:var(--kettle-edge);stroke-width:.9}
.intro .k-handle{fill:none;stroke:var(--kettle);stroke-width:3.6;stroke-linecap:round}
.intro .k-shine{fill:none;stroke:var(--kettle-shine);stroke-width:2.4;stroke-linecap:round}

.intro .i-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:346px}
.intro .i-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:104px;padding:16px 16px 14px;border:1px solid var(--ink-faint);border-radius:18px;background:var(--glass);color:var(--ink);font-size:14.5px;font-weight:500;text-decoration:none;animation:i-rise .7s var(--ease) var(--d) both;transition:border-color .2s}
.intro .i-card:hover{border-color:var(--accent)}
.intro .i-card svg{width:22px;height:22px}
.intro .i-soon{position:absolute;top:15px;right:14px;font-style:normal;font-size:9px;font-weight:500;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:999px;padding:2px 7px;line-height:1.4}
@media (min-width:700px){.intro .i-menu{grid-template-columns:repeat(4,1fr);max-width:860px}}

@keyframes i-fade{from{opacity:0}}
@keyframes i-rise{from{opacity:0;transform:translateY(16px)}}
@keyframes i-draw{from{stroke-dashoffset:1}}
@keyframes i-wisp{0%{opacity:0;stroke-dashoffset:1;transform:translateY(0)}30%{opacity:.7}100%{opacity:0;stroke-dashoffset:0;transform:translateY(-16px)}}
@keyframes i-skip-out{to{opacity:0;visibility:hidden}}
@keyframes i-settle{from{transform:translateY(var(--settle,140px))}}
@keyframes i-a-pour{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes i-a-unpour{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
@keyframes i-a-fill{from{transform:translateY(72px)}}
@keyframes i-a-bloom{from{opacity:0;transform:scale(.12)}}
@keyframes i-a-ripple{from{opacity:.95;transform:scale(.15)}to{opacity:0;transform:scale(1.5)}}
@keyframes i-a-unfurl{from{transform:scale(.5,.3) rotate(-24deg)}to{transform:translateY(-7px) rotate(5deg)}}
@keyframes i-a-lid-in{from{opacity:0;transform:translate(-74px,-78px) rotate(-10deg)}to{opacity:1;transform:translate(-74px,-92px) rotate(-10deg)}}
@keyframes i-a-lid-on{from{transform:translate(-74px,-92px) rotate(-10deg)}to{transform:none}}
@keyframes i-a-kettle-in{from{opacity:0;transform:translate(110px,-120px) rotate(32deg)}}
@keyframes i-a-kettle-out{to{opacity:0;transform:translate(120px,-130px) rotate(30deg)}}

@media (prefers-reduced-motion:reduce){.intro .a-kettle,.intro .a-stream{display:none}}