/* A buildless, portrait-first kiosk. All photographs are local assets. */
:root{color-scheme:light;--paper:#f7f7f4;--ink:#171717;--muted:#66665f;--line:#deded7}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible{outline:3px solid #777;outline-offset:5px}h1:focus{outline:none}button{transition:transform .2s,background .2s,color .2s}button:active:not(:disabled){transform:scale(.97)}[hidden]{display:none!important}.kiosk{max-width:1600px;min-height:100svh;margin:auto;display:flex;flex-direction:column;padding:0 clamp(20px,5vw,88px)}.header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px;flex-shrink:0}.logo{width:168px;height:76px;object-fit:contain}.header-note{display:flex;align-items:center;gap:10px;font-size:13px}.status-dot{width:7px;height:7px;background:var(--ink);border-radius:50%}main{flex:1}.screen{animation:screen-in .55s both}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2.4px;margin:0 0 22px}h1{font-size:clamp(42px,6vw,88px);line-height:1.01;letter-spacing:-.065em;margin:0;font-weight:800}.welcome{position:relative;min-height:calc(100svh - 179px);display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:1fr auto;align-items:center;padding:50px 0 35px;gap:30px}.welcome-copy{z-index:2;animation:copy-reveal .8s both}.welcome h1{font-size:clamp(64px,7vw,100px);position:relative}.outline{-webkit-text-stroke:1.5px var(--ink);color:transparent}.asterisk{position:absolute;font-size:.48em;margin:16px 0 0 14px}.tagline{font-size:clamp(17px,1.7vw,24px);letter-spacing:-.5px;margin:28px 0 0}.coffee-stage{position:relative;height:clamp(350px,37vw,590px);isolation:isolate}.stage-ring{position:absolute;inset:10% 0 0;border:1px solid #d7d7cc;border-radius:50%;background:#efefe9;transform:rotate(-16deg)}.stage-ring:after{content:"";position:absolute;inset:8%;border:1px solid #deded5;border-radius:50%}.cup{position:absolute;filter:drop-shadow(6px 24px 12px #00000016);animation:cup-arrive 1s cubic-bezier(.2,.8,.2,1) both}.cup img{width:100%;height:100%;object-fit:contain;animation:float 6s ease-in-out infinite}.cup-left{width:40%;height:72%;left:0;top:12%;--turn:-16deg;--entry:-110px;transform:rotate(var(--turn));z-index:1}.cup-right{width:40%;height:73%;right:0;top:0;--turn:16deg;--entry:110px;transform:rotate(var(--turn));animation-delay:.15s}.cup-center{width:47%;height:86%;left:27%;top:15%;--turn:3deg;--entry:70px;transform:rotate(var(--turn));z-index:2;animation-delay:.25s}.cup-left img{animation-delay:-2s}.cup-right img{animation-delay:-4s}.stage-note{position:absolute;left:3%;top:1%;font-size:10px;line-height:1.5;letter-spacing:1.8px;transform:rotate(-9deg)}.stage-caption{position:absolute;bottom:-3%;right:2%;font-size:10px;letter-spacing:1.5px}.stage-spark{position:absolute;bottom:4%;left:1%;font-size:52px}.welcome-action{grid-column:1/-1;justify-self:center;text-align:center;width:min(100%,430px);z-index:3}.button{min-height:68px;padding:20px 28px;border:1px solid var(--ink);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:32px;font-weight:700;font-size:17px}.primary{background:var(--ink);color:white;width:100%}.primary:hover:not(:disabled){background:#333}.primary span{font-size:26px;transition:transform .25s}.primary:hover span{transform:translate(3px,-2px)}.welcome-action p{font-size:12px;color:var(--muted);margin:16px 0 0}.footer{min-height:67px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;letter-spacing:1.1px;color:var(--muted)}.footer span:first-child{font-weight:800;color:var(--ink)}.screen-topline{display:flex;justify-content:space-between;align-items:center;margin:28px 0 50px;gap:18px}.back{background:transparent;border:0;min-height:48px;padding:0 12px 0 0;display:flex;align-items:center;gap:12px;font-size:14px}.back span{font-size:24px}.step{font-size:10px;letter-spacing:1.6px;text-align:right}.selection{max-width:1000px;margin:auto;padding-bottom:50px}.selection-copy{text-align:center}.selection h1{font-size:clamp(36px,4.6vw,66px)}.selection-copy>p:last-child{color:var(--muted);margin-top:22px;font-size:16px}.order-options{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:44px 0 32px}.order-option{position:relative;border:1px solid var(--line);border-radius:18px;background:#fff;padding:28px 28px 0;display:flex;flex-direction:column;align-items:center;min-height:315px;animation:option-in .65s both}.order-option:nth-child(2){animation-delay:.1s}.order-option:hover{border-color:#777}.order-option[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.order-option svg{width:140px;height:140px;margin-bottom:10px}.order-option strong{font-size:28px;letter-spacing:-1px}.order-option>span:not(.option-check):not(.option-bottom){font-size:14px;margin:10px 0 28px;opacity:.65}.option-bottom{width:100%;border-top:1px solid #8885;padding:18px 0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.7px}.option-check{position:absolute;right:18px;top:18px;display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;color:transparent}.order-option[aria-pressed=true] .option-check{background:white;color:var(--ink)}.selection-action{max-width:430px;margin:auto;text-align:center}.selection-action p{font-size:12px;color:var(--muted);min-height:16px;margin:0 0 18px}.button:disabled{background:#e4e4de;border-color:#e4e4de;color:#8a8a83}.menu{padding-bottom:35px}.menu .screen-topline{margin-bottom:26px}.menu-heading{display:flex;justify-content:space-between;align-items:center}.menu h1{font-size:clamp(38px,5vw,72px)}.menu-flower{font-size:75px;line-height:1}.menu-intro{color:var(--muted);font-size:15px;margin:18px 0 35px}.categories{display:flex;position:relative;gap:6px;border-bottom:1px solid var(--line);padding-bottom:12px;isolation:isolate}.category{border:0;border-radius:9px;background:transparent;padding:16px 24px;min-height:52px;white-space:nowrap;font-size:14px;z-index:1}.category.active{color:white}.category-indicator{position:absolute;left:0;top:0;height:52px;background:var(--ink);border-radius:9px;transition:width .3s,transform .3s;pointer-events:none}.menu-meta{display:flex;align-items:center;justify-content:space-between;margin:28px 0 22px;gap:16px}.menu-meta h2{font-size:20px;letter-spacing:-.6px;margin:0}.menu-meta h2 span{font-size:12px;color:var(--muted);font-weight:400;margin-left:8px}.menu-meta p{font-size:11px;color:var(--muted);text-align:right}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.product{min-width:0;animation:product-in .45s both;animation-delay:calc(var(--i)*35ms)}.product-photo{height:230px;background:#edede7;border-radius:14px;display:grid;place-items:center;overflow:hidden;position:relative}.product-photo:before{content:"";width:150px;height:150px;position:absolute;border:1px solid #ddddd4;border-radius:50%}.product-photo img{position:relative;width:80%;height:85%;object-fit:contain;filter:drop-shadow(3px 8px 6px #00000015);transition:transform .35s}.product:hover img{transform:translateY(-5px) rotate(-3deg)}.product h3{font-size:16px;letter-spacing:-.4px;margin:18px 0 8px;line-height:1.3}.product-details{color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:6px}.product-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}.price{font-weight:700;font-size:15px}.price small{font-weight:400;color:var(--muted);font-size:12px}.add-preview{border:1px solid #dadad3;background:transparent;width:46px;height:46px;border-radius:50%;font-size:24px}.add-preview:hover{background:var(--ink);color:white}.preview-note{text-align:center;color:var(--muted);font-size:12px;margin:45px 0 10px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,15px);padding:18px 24px;border-radius:12px;background:var(--ink);color:white;box-shadow:0 5px 30px #0002;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;font-size:14px;width:max-content;max-width:calc(100% - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
/* Cups part to either side before the next screen enters. */
.welcome.departing .cup-left{animation:part-left .42s both}.welcome.departing .cup-right{animation:part-right .42s both}.welcome.departing .cup-center{animation:part-center .42s both}.welcome.departing .welcome-copy,.welcome.departing .welcome-action{transition:opacity .3s;opacity:0}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-15px) rotate(2deg)}}@keyframes cup-arrive{from{opacity:0;transform:translate(var(--entry),60px) rotate(0)}to{opacity:1;transform:rotate(var(--turn))}}@keyframes screen-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes copy-reveal{from{opacity:0;transform:translateY(25px);clip-path:inset(0 0 100%)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 -20%)}}@keyframes option-in{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes product-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes part-left{to{transform:translate(-100px,15px) rotate(-30deg);opacity:0}}@keyframes part-right{to{transform:translate(100px,15px) rotate(30deg);opacity:0}}@keyframes part-center{to{transform:translateY(60px) scale(.85);opacity:0}}
/* The outer browser is a backdrop; only the portrait kiosk contains the app.
   Keep a readable minimum width on short landscape displays rather than scaling
   every control down to fit an exact ratio. Content then scrolls inside main. */
body {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: #e7e7e2;
}
.kiosk {
  position: relative;
  container-type: inline-size;
  width: clamp(360px, calc((100dvh - 48px) * 9 / 16), 67.5rem);
  max-width: 100%;
  height: calc(100dvh - 48px);
  min-height: 0;
  aspect-ratio: 9 / 16;
  margin: 0;
  padding: 0 clamp(16px, 2.5vmin, 40px);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 8px 40px #0000000d;
  overflow: hidden;
}
.header {
  height: clamp(72px, 16cqw, 146px);
  gap: 16px;
}
.logo { width: clamp(120px, 30cqw, 250px); height: 78%; }
.header-note { font-size: clamp(10px, 1.6cqw, 16px); max-width: 42%; line-height: 1.5; }
.status-dot { flex-shrink: 0; }
main {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: #bcbcb3 transparent;
  scroll-padding: 18px;
}
.screen { min-height: 100%; }
.eyebrow { font-size: clamp(9px, 1.4cqw, 15px); letter-spacing: 1.8px; margin-bottom: 18px; }
.welcome {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(210px, 1fr) auto;
  text-align: center;
  padding: clamp(24px, 6cqw, 70px) 0 24px;
  gap: clamp(24px, 5cqw, 56px);
}
.welcome-copy { max-width: 100%; margin: 0 auto; animation: none; }
.welcome h1 { font-size: clamp(40px, 12cqw, 116px); }
.welcome h1 br { display: block; }
.asterisk { position: static; display: inline-block; vertical-align: top; margin: 8px 0 0 8px; }
.tagline { font-size: clamp(17px, 2.8cqw, 28px); margin-top: 18px; }
.coffee-stage {
  width: 100%;
  height: clamp(210px, 62cqw, 650px);
  justify-self: center;
  align-self: center;
}
.stage-ring { inset: 8% 10%; }
.stage-note {
  text-align: left;
  left: 6%;
  font-size: clamp(8px, 1.4cqw, 14px);
  animation: caption-float 8s ease-in-out infinite;
}
@keyframes caption-float {
  0%, 100% { transform: translate(0, 0) rotate(-9deg); }
  25% { transform: translate(8px, -8px) rotate(-6deg); }
  50% { transform: translate(14px, -3px) rotate(-8deg); }
  75% { transform: translate(4px, 5px) rotate(-11deg); }
}
.stage-caption { bottom: 0; right: 5%; font-size: clamp(8px, 1.3cqw, 13px); }
.cup-left { left: 7%; width: 35%; }
.cup-right { right: 8%; width: 33%; }
.cup-center { left: 30%; width: 40%; }
.stage-spark { left: 7%; font-size: clamp(30px, 6cqw, 60px); }
.welcome-action, .selection-action { width: 100%; max-width: 650px; }
.button { min-height: 60px; padding: 18px 24px; font-size: clamp(16px, 2.6cqw, 26px); justify-content: center; }
.welcome-action p { font-size: clamp(11px, 1.7cqw, 17px); line-height: 1.5; }
.footer {
  flex-shrink: 0;
  min-height: clamp(48px, 8cqw, 85px);
  font-size: clamp(9px, 1.3cqw, 14px);
  letter-spacing: .5px;
}
.footer span:last-child { display: none; }
.footer span:only-child { display: block; font-weight: 400; color: var(--muted); }
.screen-topline { margin: 12px 0 28px; gap: 12px; }
.back { min-height: 48px; font-size: clamp(14px, 2cqw, 22px); }
.step { font-size: clamp(9px, 1.4cqw, 14px); letter-spacing: .8px; }
.selection { max-width: none; padding: 0 0 28px; display: flex; flex-direction: column; }
.selection-copy { margin-top: clamp(12px, 3cqw, 40px); }
.selection h1 { font-size: clamp(30px, 7.5cqw, 78px); line-height: 1.08; }
.selection-copy > p:last-child { font-size: clamp(14px, 2.2cqw, 24px); line-height: 1.5; }
.order-options { gap: clamp(12px, 3cqw, 32px); margin: clamp(28px, 6cqw, 70px) 0; }
.order-option { padding: 24px 16px 0; min-height: clamp(250px, 60cqw, 600px); justify-content: center; }
.order-option svg { width: clamp(95px, 25cqw, 250px); height: clamp(110px, 28cqw, 280px); }
.order-option strong { font-size: clamp(24px, 4.4cqw, 46px); }
.order-option { border-radius: 12px; }
.order-option > span:not(.option-check):not(.option-bottom) { font-size: clamp(12px, 1.9cqw, 20px); }
.option-bottom { font-size: clamp(9px, 1.3cqw, 14px); letter-spacing: .6px; }
.option-check { right: 12px; top: 12px; }
.selection-action { margin: auto auto 0; padding-top: 10px; }
.selection-action p { font-size: clamp(12px, 1.9cqw, 20px); line-height: 1.5; }
.menu { padding-bottom: 24px; }
.menu .screen-topline { margin-bottom: 24px; }
.menu h1 { font-size: clamp(34px, 8cqw, 82px); }
.menu-heading { margin-bottom: 28px; }
.menu-heading > div { flex: 1; min-width: 0; }
.menu-flower { flex-shrink: 0; margin-left: 12px; font-size: clamp(40px, 10cqw, 100px); }
.menu-intro { font-size: clamp(14px, 2.2cqw, 24px); line-height: 1.5; margin: 18px 0 24px; }
.categories { gap: 2px; position: sticky; top: 0; z-index: 4; background: var(--paper); }
.category { flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 8px; font-size: clamp(12px, 1.9cqw, 20px); }
.menu-meta { margin: 22px 0; }
.menu-meta h2 { font-size: clamp(18px, 3cqw, 30px); }
.menu-meta p { font-size: clamp(10px, 1.5cqw, 16px); max-width: 45%; line-height: 1.5; }
.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 12px; }
.product-photo { height: clamp(130px, 30cqw, 300px); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.product-photo:before { content: none; }
.product h3 { font-size: clamp(14px, 2.4cqw, 24px); margin-top: 14px; min-height: 2.6em; }
.product-details { font-size: clamp(11px, 1.6cqw, 17px); flex-wrap: wrap; }
.price { font-size: clamp(15px, 2.6cqw, 26px); }
.price small { font-size: clamp(12px, 1.9cqw, 20px); }
.price small { display: block; margin-top: 4px; }
.add-preview { min-width: 46px; flex-shrink: 0; }
.preview-note { font-size: clamp(12px, 1.8cqw, 18px); line-height: 1.5; }
.toast { position: absolute; bottom: 64px; max-width: calc(100% - 32px); }
/* Phones and portrait touchscreens use the available display directly. */
@media (max-width: 600px), (max-aspect-ratio: 3/4) {
  body { padding: 0; }
  .kiosk { width: 100%; height: 100dvh; max-width: 67.5rem; border-radius: 0; box-shadow: none; }
}
/* Size by the kiosk's own width, not by the desktop browser around it. */
@container (max-width: 340px) {
  .welcome h1 { font-size: 40px; }
  .category { font-size: 11px; padding-inline: 4px; }
  .product-details { display: block; line-height: 1.6; }
  .product-details span { display: block; }
  .price small { display: block; margin-top: 4px; }
  .selection h1 { font-size: 29px; }
  .order-option { padding-inline: 12px; }
}
@container (max-width: 349px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* PNG layers create a light 3D illusion without models or a rendering library.
   A separate inner layer leaves the existing entrance/exit animation intact. */
.coffee-stage { perspective: 900px; }
.cup { filter: none; }
.cup-depth {
  width: 100%;
  height: 100%;
  perspective: 700px;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s ease-out;
}
.cup-depth img {
  animation: cup-sway 7s ease-in-out infinite;
  filter: drop-shadow(8px 18px 10px #00000024);
}
.cup-left { --cup-depth: 5px; --sway: -7deg; }
.cup-right { --cup-depth: 12px; --sway: 7deg; }
.cup-center { --cup-depth: 28px; --sway: -4deg; }
.cup::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 15%;
  bottom: -3%;
  width: 70%;
  height: 7%;
  background: #00000018;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
@keyframes cup-sway {
  0%, 100% { transform: translate3d(0, 0, var(--cup-depth)) rotateX(2deg) rotateY(var(--sway)) rotateZ(-1deg); }
  50% { transform: translate3d(0, -12px, calc(var(--cup-depth) + 12px)) rotateX(-3deg) rotateY(calc(var(--sway) * -1)) rotateZ(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cup-depth { transform: none; }
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}