:root{
  --bg:#f5f3ee;
  --fg:#111111;
  --muted:#68645e;
  --line:color-mix(in srgb,var(--fg) 18%,transparent);
  --line-soft:color-mix(in srgb,var(--fg) 10%,transparent);
  --coffee:#5a2f1d;
  --coffee-dark:#3a1e13;
  --coffee-soft:#7a422b;
  --panel:color-mix(in srgb,var(--bg) 92%,var(--fg) 8%);
  --safe-x:clamp(16px,3vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit}
button{font:inherit}
.skip-link{
  position:fixed;left:12px;top:12px;z-index:1000;
  transform:translateY(-160%);
  background:var(--fg);color:var(--bg);
  padding:10px 14px;border-radius:999px;
}
.skip-link:focus{transform:none}
.topbar{
  position:fixed;z-index:50;left:0;right:0;top:0;
  min-height:64px;padding:0 var(--safe-x);
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.brand,.topbar-right,.menu-button{pointer-events:auto}
.brand{
  text-decoration:none;font-weight:800;letter-spacing:.04em;
}
.topbar-right{display:flex;gap:18px;align-items:center}
.place,.menu-button,.section-label,.cup-label,.eyebrow{
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:11px;font-weight:700;letter-spacing:.12em;
}
.place{color:var(--muted)}
.menu-button{
  border:0;background:transparent;color:inherit;padding:12px 0;cursor:pointer;
}
.menu-button:focus-visible,.fallback-nav a:focus-visible,.cup:focus-visible,.back:focus-visible{
  outline:2px solid var(--fg);outline-offset:4px;
}
.fallback-nav{
  position:fixed;right:var(--safe-x);top:58px;z-index:60;
  display:grid;gap:0;
  min-width:160px;
  padding:10px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);
  border-radius:18px;
  box-shadow:0 14px 40px rgb(0 0 0 / .08);
  opacity:0;transform:translateY(-8px) scale(.98);
  pointer-events:none;transition:.18s ease;
}
.fallback-nav.is-open{
  opacity:1;transform:none;pointer-events:auto;
}
.fallback-nav a{
  text-decoration:none;padding:12px 14px;border-radius:12px;
  font:700 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em;
}
.fallback-nav a:hover{background:var(--panel)}
.scene-wrap{
  position:relative;min-height:100svh;height:100svh;
  overflow:hidden;
}
.scene{
  position:absolute;inset:0;
  overflow:hidden;
  user-select:none;
}
.scene-copy{
  position:absolute;z-index:5;left:var(--safe-x);top:88px;
  pointer-events:none;
}
.eyebrow{margin:0 0 14px;color:var(--muted)}
.hint{
  margin:0;font-size:clamp(16px,2vw,22px);font-weight:700;
  transition:opacity .35s ease,transform .35s ease;
}
.hint.is-gone{opacity:0;transform:translateY(-6px)}
.ground{
  position:absolute;left:var(--safe-x);right:var(--safe-x);bottom:22px;
  border-top:1px solid var(--line);
}
.shelves{
  position:absolute;inset:0;z-index:4;pointer-events:none;
}
.shelf{
  position:absolute;height:10px;
  border-top:2px solid color-mix(in srgb,var(--fg) 72%,transparent);
  opacity:0;
  transition:opacity .18s ease;
}
.shelf::before,.shelf::after{
  content:"";position:absolute;top:-3px;width:4px;height:4px;
  border-radius:50%;background:color-mix(in srgb,var(--fg) 58%,transparent);
}
.shelf::before{left:-1px}.shelf::after{right:-1px}
.scene.has-shelves .shelf{opacity:1}
.coffee-stream{
  --stream-top:11vh;
  position:absolute;
  z-index:2;
  left:50%;
  top:var(--stream-top);
  width:22px;
  height:calc(100svh - var(--stream-top) - 22px);
  transform:translateX(-50%);
  pointer-events:none;
  transition:height .06s linear;
  overflow:visible;
}
.drip-sequence{
  --fall-distance: 72svh;
  position:absolute;
  left:50%;
  top:0;
  width:26px;
  height:100%;
  transform:translateX(-50%);
  opacity:1;
  overflow:visible;
}
.drip{
  position:absolute;
  left:50%; top:0;
  width:9px; height:12px;
  margin-left:-4.5px;
  border-radius:50% 50% 58% 58% / 40% 40% 60% 60%;
  background:linear-gradient(180deg,var(--coffee-soft),var(--coffee-dark));
  box-shadow:0 0 0 1px rgb(58 30 19 / .06);
  opacity:0;
  transform:translate3d(0,0,0) scale(.75);
}
.drip.d1{animation:dripFallToBottom .78s cubic-bezier(.26,.08,.28,.99) forwards .05s}
.drip.d2{animation:dripFallToBottom .84s cubic-bezier(.26,.08,.28,.99) forwards .253s}
.drip.d3{animation:dripFallToBottom .88s cubic-bezier(.26,.08,.28,.99) forwards .491s}
.stream-core{
  position:absolute;
  inset:0 4px 0;
  border-radius:48% 52% 40% 44% / 18% 16% 84% 82%;
  background:
    linear-gradient(180deg,
      var(--coffee-dark) 0%,
      var(--coffee) 16%,
      #6b3823 40%,
      var(--coffee-dark) 70%,
      var(--coffee) 100%);
  box-shadow:
    inset 2px 0 0 rgb(255 255 255 / .09),
    inset -1px 0 0 rgb(0 0 0 / .08);
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform-origin:50% 0;
}
.stream-core::before,
.stream-core::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
}
.stream-core::before{
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / .10) 0 10%,
      transparent 14% 100%),
    linear-gradient(180deg,
      transparent 0 32%,
      rgb(255 255 255 / .08) 42%,
      transparent 54% 100%);
  background-size:100% 100%,100% 58px;
  animation:streamShine .68s linear infinite;
  mix-blend-mode:screen;
}
.stream-core::after{
  inset:-2px 1px -1px;
  border-radius:55% 45% 42% 50% / 16% 22% 78% 84%;
  border-left:1px solid rgb(255 255 255 / .12);
  border-right:1px solid rgb(58 30 19 / .18);
  animation:streamBody 1.2s ease-in-out infinite alternate;
}
.coffee-stream.is-live .stream-core{
  opacity:1;
  animation:streamDrop .72s cubic-bezier(.22,.72,.26,1) both, streamSway 1.7s ease-in-out .72s infinite alternate;
}
.coffee-stream.is-live .drip-sequence{
  animation:dripHide .2s ease-out forwards;
  animation-delay:.04s;
}
.splash{
  position:absolute;left:50%;bottom:-5px;
  width:26px;height:8px;
  border:2px solid var(--coffee);
  border-top:0;border-radius:0 0 50% 50%;
  transform:translateX(-50%) scale(.7);
  opacity:0;transition:opacity .12s ease,transform .12s ease;
}
.splash.is-on{opacity:.55;transform:translateX(-50%) scale(1)}
@keyframes dripFallToBottom{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.72)}
  8%{opacity:.98}
  14%{transform:translate3d(0,8px,0) scale(.98,.92)}
  78%{opacity:1;transform:translate3d(0,calc(var(--fall-distance) - 18px),0) scale(.92,1.06)}
  92%{opacity:1;transform:translate3d(0,var(--fall-distance),0) scale(1.08,.78)}
  100%{opacity:0;transform:translate3d(0,var(--fall-distance),0) scale(.62,.36)}
}
@keyframes dripHide{to{opacity:0;visibility:hidden}}
@keyframes streamDrop{
  0%{clip-path:inset(0 0 100% 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes streamShine{from{background-position-y:0,0}to{background-position-y:0,58px}}
@keyframes streamSway{from{transform:translateX(1px) scaleX(.96)}to{transform:translateX(-1px) scaleX(1.04)}}
@keyframes streamBody{
  0%{clip-path:polygon(42% 0,60% 0,62% 14%,58% 28%,64% 44%,56% 58%,60% 74%,54% 100%,30% 100%,35% 76%,29% 58%,37% 42%,33% 26%,40% 12%)}
  100%{clip-path:polygon(38% 0,58% 0,55% 15%,61% 31%,53% 46%,59% 61%,50% 78%,56% 100%,34% 100%,39% 80%,31% 63%,39% 48%,34% 30%,43% 13%)}
}

.cup{
  --fill:0%;
  position:absolute;
  z-index:10;
  width:112px;height:126px;
  cursor:grab;
  touch-action:none;
  will-change:transform,left,top;
}
.cup.is-dragging{cursor:grabbing;z-index:30}
.cup.is-receiving .cup-graphic{transform:translateY(2px) rotate(var(--tilt))}
.cup.is-full .cup-graphic{animation:fullNod .35s ease both}
@keyframes fullNod{0%{transform:translateY(2px)}45%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.cup-graphic{
  --tilt:0deg;
  position:relative;width:76px;height:82px;margin:0 auto;
  transform:rotate(var(--tilt));
  transform-origin:50% 88%;
  transition:transform .06s linear;
}
.cup-body{
  position:absolute;left:5px;top:7px;
  width:66px;height:64px;
  border:3px solid var(--fg);
  border-top-width:4px;
  border-radius:8px 8px 22px 22px;
  overflow:hidden;
  background:color-mix(in srgb,var(--bg) 96%,white 4%);
}
.rim{
  position:absolute;left:-3px;right:-3px;top:-4px;height:8px;
  border-top:4px solid var(--fg);border-radius:50%;
}
.liquid{
  position:absolute;left:0;right:0;bottom:0;height:var(--fill);
  background:linear-gradient(180deg,#6b3823,var(--coffee-dark));
  transition:height .05s linear;
}
.liquid::before{
  content:"";
  position:absolute;left:0;right:0;top:-3px;height:6px;
  border-radius:50%;
  background:#7a422b;
}
.handle{
  position:absolute;right:0;top:24px;width:25px;height:31px;
  border:3px solid var(--fg);border-left:0;
  border-radius:0 16px 16px 0;
}
.cup-label{
  margin-top:5px;text-align:center;white-space:nowrap;
}
.cup.is-full .cup-label{font-weight:900}
.noscript{
  position:absolute;z-index:80;left:var(--safe-x);right:var(--safe-x);bottom:30px;
  background:var(--bg);border:1px solid var(--line);padding:16px;border-radius:18px;
}
.noscript a{margin-left:10px}
.destination{
  min-height:100svh;
  padding:120px var(--safe-x) 96px;
  border-top:1px solid var(--line-soft);
  background:var(--bg);
}
.destination-inner{max-width:760px;margin:0 auto}
.destination h1{
  margin:18px 0 28px;
  font-size:clamp(2.8rem,6vw,6rem);line-height:1;
  letter-spacing:-.045em;
}
.destination p:not(.section-label){
  font-size:clamp(17px,1.6vw,20px);
  line-height:1.9;color:var(--muted);
}
.back{
  display:inline-block;margin-top:42px;
  text-decoration:none;border-bottom:1px solid var(--fg);padding-bottom:4px;
}
@media (max-width:700px){
  .topbar{min-height:60px}
  .scene-copy{top:84px;right:var(--safe-x);max-width:13em}
  .hint{font-size:17px;line-height:1.6}
  .coffee-stream{width:20px}
  .cup{width:104px;height:120px}
  .cup-graphic{width:71px;height:76px}
  .cup-body{width:61px;height:60px}
  .handle{top:22px}
  .destination{padding-top:96px}
}
@media (max-width:500px){
  .cup{height:100px}
}
@media (max-width:360px){
  .cup{width:92px;height:90px}
  .cup-graphic{width:63px;height:68px}
  .cup-body{left:4px;top:6px;width:55px;height:54px;border-width:3px;border-top-width:4px;border-radius:7px 7px 19px 19px}
  .rim{left:-3px;right:-3px;top:-4px;height:8px}
  .handle{right:0;top:20px;width:21px;height:27px}
  .cup-label{margin-top:4px;font-size:10px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}