:root{
  --ink:#073B4C;
  --ink-70:rgba(7,59,76,.74);
  --ink-45:rgba(7,59,76,.50);
  --ink-12:rgba(7,59,76,.15);
  --ice:#E7F2F6;
  --card:#FFFFFF;
  --punch:#EF476F;
  --mint:#06D6A0;
  --blue:#118AB2;
  --mango:#FFD166;
  --foam:#FFF6E2;
  --stroke:rgba(7,59,76,.38);

  --display:"Bricolage Grotesque","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"DM Mono","SF Mono",ui-monospace,"PingFang SC","Microsoft YaHei",monospace;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 42%, rgba(255,255,255,.85) 0 6px, transparent 7px),
    radial-gradient(circle at 32% 76%, rgba(255,255,255,.75) 0 5px, transparent 6px),
    var(--ice);
  background-size:220px 260px,300px 340px,260px 300px,auto;
  -webkit-font-smoothing:antialiased;
  padding-bottom:130px;
}
.wrap{max-width:540px;margin:0 auto;padding:0 18px}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45)}
h1{font-family:var(--display);font-weight:800;line-height:.86;letter-spacing:-.03em;margin:8px 0 0;font-size:clamp(46px,15vw,74px)}
h2{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;margin:0}
.sub-en{font-family:var(--mono);font-size:12px;color:var(--ink-45);margin-top:4px}

/* ---------- hero ---------- */
.hero{padding:44px 0 22px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.hero h1 span{display:block;color:var(--punch)}
.hero-note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink-70);max-width:26em}
.hero-note b{color:var(--ink);font-weight:600}

/* ---------- menu switcher ---------- */
.menu-switch{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.menu-switch::-webkit-scrollbar{display:none}
.menu-tab{
  flex:0 0 auto;font:inherit;color:var(--ink-70);cursor:pointer;
  background:rgba(255,255,255,.7);border:1px solid var(--ink-12);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:600;transition:all .18s;
}
.menu-tab:hover{border-color:var(--ink-45)}
.menu-tab[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.menu-tab small{font-family:var(--mono);font-size:10px;opacity:.6;margin-left:5px;font-weight:400}

/* ---------- cup ---------- */
.cup-stage{position:relative;width:104px;flex:0 0 auto}
.cup-stage.mini{width:44px}
.straw{position:absolute;left:58%;top:-16px;width:7px;height:64px;background:var(--mint);border-radius:4px;transform:rotate(11deg);transform-origin:bottom center;z-index:3}
.cup-stage.mini .straw{width:4px;height:30px;top:-9px}
.rim{position:absolute;left:1px;right:1px;top:-5px;height:11px;border:1.5px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.65);z-index:2}
.cup-stage.mini .rim{height:7px;top:-3px;border-width:1px}
.cup{
  position:relative;height:142px;
  clip-path:polygon(2% 0,98% 0,86% 100%,14% 100%);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 45% 82%, rgba(255,255,255,.9) 0 4px, transparent 5px),
    #EDF5F7;
  filter:
    drop-shadow(1px 0 0 var(--stroke)) drop-shadow(-1px 0 0 var(--stroke))
    drop-shadow(0 1px 0 var(--stroke)) drop-shadow(0 -1px 0 var(--stroke));
  display:flex;flex-direction:column-reverse;overflow:hidden;
}
.cup-stage.mini .cup{height:60px}
.layer{width:100%;transition:height .45s cubic-bezier(.3,.9,.3,1),background-color .3s}
.chunks{position:absolute;inset:0;z-index:1;pointer-events:none}
.chunk{position:absolute;border-radius:50%;opacity:.95}
.cup-cap{font-family:var(--mono);font-size:10px;color:var(--ink-45);text-align:center;margin-top:10px;letter-spacing:.06em}

/* ---------- sections ---------- */
section{margin-top:38px}
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.sec-head .tag{font-family:var(--mono);font-size:11px;color:var(--punch);letter-spacing:.14em}
.sec-lede{font-size:13.5px;color:var(--ink-70);margin:0 0 16px;line-height:1.5}

/* ---------- signature ---------- */
.sig{
  width:100%;text-align:left;background:var(--card);border:1px solid var(--ink-12);border-radius:16px;
  padding:14px;margin-bottom:10px;display:flex;gap:14px;align-items:center;cursor:pointer;
  font:inherit;color:inherit;transition:border-color .2s,transform .12s,box-shadow .2s;
}
.sig:hover{border-color:var(--ink);box-shadow:0 6px 18px rgba(7,59,76,.14)}
.sig:active{transform:scale(.99)}
.sig[data-on="1"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.sig-body{flex:1;min-width:0}
.sig-name{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.sig-en{font-family:var(--mono);font-size:11px;color:var(--ink-45);margin-top:2px}
.sig-ing{font-size:12.5px;color:var(--ink-70);margin-top:7px;line-height:1.5}
.ing-zh{display:block}
.ing-en{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-45);margin-top:3px;line-height:1.45}
.sig-pick{font-family:var(--mono);font-size:11px;color:var(--blue);margin-top:8px;letter-spacing:.08em}
.sig[data-on="1"] .sig-pick{color:var(--ink)}

/* ---------- steps ---------- */
.step{margin-top:26px}
.step-head{display:flex;align-items:center;gap:10px}
.step-no{font-family:var(--mono);font-size:11px;background:var(--punch);color:#fff;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.step-title{font-family:var(--display);font-weight:800;font-size:17px}
.step-meta{font-family:var(--mono);font-size:11px;color:var(--ink-45);margin:6px 0 12px;padding-left:32px}
.step-meta.warn{color:var(--punch)}

.chips{display:grid;gap:8px}
.chip{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;
  background:var(--card);border:1px solid var(--ink-12);border-radius:14px;padding:12px 14px;cursor:pointer;
  transition:border-color .18s,background-color .18s,opacity .18s,transform .12s;
}
.chip:hover{border-color:var(--ink-45)}
.chip:active{transform:scale(.99)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] .chip-note,.chip[aria-pressed="true"] .chip-en{color:rgba(255,255,255,.62)}
.chip[data-mute="1"]{opacity:.38}
.dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;border:1px solid var(--ink-12);background:var(--c,#fff)}
.chip-txt{flex:1;min-width:0}
.chip-zh{font-weight:600;font-size:15px}
.chip-en{font-family:var(--mono);font-size:11px;color:var(--ink-45);margin-left:6px}
.chip-note{font-size:12px;color:var(--ink-70);margin-top:3px;line-height:1.4}
.pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;border:1px solid currentColor;border-radius:999px;padding:1px 6px;margin-left:6px;vertical-align:1px;color:var(--blue)}

/* syrup stepper */
.pumps{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.pump-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-12);background:#fff;color:var(--ink);
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
}
.pump-btn:disabled{opacity:.25;cursor:default}
.pump-n{font-family:var(--mono);font-size:13px;min-width:34px;text-align:center}
.chip[aria-pressed="true"] .pump-btn{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

/* ---------- order bar ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);color:#fff;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
}
.bar-in{max-width:540px;margin:0 auto;display:flex;align-items:center;gap:12px}
.bar-txt{flex:1;min-width:0}
.bar-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mango)}
.bar-sum{font-size:13px;margin-top:3px;line-height:1.35;color:rgba(255,255,255,.9)}
.bar-btn{
  background:var(--mint);color:var(--ink);border:0;border-radius:999px;padding:12px 18px;
  font-family:var(--display);font-weight:800;font-size:14px;cursor:pointer;flex:0 0 auto;
}
.bar-btn:disabled{opacity:.3;cursor:default}

/* ---------- ticket ---------- */
.veil{position:fixed;inset:0;background:rgba(7,59,76,.62);z-index:60;display:none;align-items:flex-end;justify-content:center;padding:16px}
.veil[data-open="1"]{display:flex}
.ticket{
  background:var(--foam);border-radius:20px;padding:22px 20px;width:100%;max-width:420px;
  max-height:86vh;overflow:auto;
}
.ticket h3{font-family:var(--display);font-weight:800;font-size:22px;margin:6px 0 2px}
.ticket ol{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:s}
.ticket li{counter-increment:s;display:flex;gap:12px;padding:9px 0;border-top:1px dashed var(--ink-12);font-size:14.5px;line-height:1.45}
.ticket li::before{content:counter(s);font-family:var(--mono);font-size:11px;color:var(--punch);padding-top:3px}
.ticket-foot{display:flex;gap:8px;margin-top:18px}
.t-btn{flex:1;padding:12px;border-radius:12px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.t-btn.solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.t-btn.share{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.t-btn:disabled{opacity:.45;cursor:default}
.t-btn svg{width:15px;height:15px;flex:0 0 auto}

/* order block inside ticket */
.order-box{margin-top:18px;border-top:1px dashed var(--ink-12);padding-top:16px}
.order-box label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-45);text-transform:uppercase;margin-bottom:6px}
.order-box input,.order-box textarea{
  width:100%;font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--ink-12);border-radius:10px;padding:10px 12px;margin-bottom:9px;resize:none;
}
.order-box input:focus,.order-box textarea:focus{outline:none;border-color:var(--ink)}
.order-state{font-family:var(--mono);font-size:11.5px;color:var(--blue);margin-top:8px;min-height:16px}
.order-state.ok{color:var(--ink)}
.order-state.err{color:var(--punch)}

.toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(12px);bottom:104px;z-index:70;
  background:var(--ink);color:var(--mango);font-family:var(--mono);font-size:12px;padding:9px 16px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:82vw;text-align:center;
}
.toast[data-on="1"]{opacity:1;transform:translateX(-50%) translateY(0)}

.boot-err{max-width:540px;margin:80px auto;padding:24px;font-size:14px;line-height:1.6;color:var(--punch)}

:focus-visible{outline:2.5px solid var(--punch);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}