:root{--brand-900: #00275a;--brand-800: #003b82;--brand-700: #004fad;--brand-600: #0064d6;--brand-500: #007aff;--brand-400: #2e8dff;--brand-300: #66abff;--brand-200: #9fcbff;--brand-100: #cfe5ff;--brand-50: #e8f2ff;--background-900: #000000;--background-800: #1c1c1e;--background-700: #3a3a3c;--background-600: #8e8e93;--background-500: #aeaeb2;--background-400: #d1d1d6;--background-300: #e5e5ea;--background-200: #f2f2f7;--background-100: #f7f7fa;--background-50: #ffffff;--text-900: #000000;--text-800: #1d1d1f;--text-700: #3c3c43;--text-600: #48484a;--text-500: #6e6e73;--text-400: #8e8e93;--text-300: #aeaeb2;--text-200: #c7c7cc;--text-100: #e3e3e8;--text-50: #f5f5f7;--state-success: #34c759;--state-error: #ff3b30;--font-sans: "DM Sans", ui-sans-serif, sans-serif, system-ui;--font-mono: "JetBrains Mono", monospace;--font-led: "VT323", monospace;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}:root{--page-bg: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);--machine-bg: linear-gradient(180deg, #e8e8ed 0%, #d4d4d9 15%, #c9c9ce 50%, #bebec3 85%, #b5b5ba 100%);--machine-foot-bg: linear-gradient(180deg, #8e8e93 0%, #636366 100%);--showcase-bg: linear-gradient(180deg, #1a1a1c 0%, #0d0d0e 100%);--showcase-frame: #2a2a2c;--showcase-ring-outer: #555558;--showcase-ring-inner: #3a3a3c;--showcase-edge: #4a4a4d;--shelf-divider-bg: linear-gradient(180deg, #2a2a2c 0%, #1a1a1c 100%);--led-bg: linear-gradient(180deg, #0a1a0a 0%, #0d1f0d 50%, #0a150a 100%);--led-border: #3a3a3c;--led-display-glow: rgba(0, 50, 0, .5);--led-screen-bg: #0a1f0a;--led-time: #39ff14;--led-time-glow: rgba(57, 255, 20, .8);--led-date: #2dcc10;--led-date-glow: rgba(45, 204, 16, .7);--led-greeting: #2ab010;--led-greeting-glow: rgba(42, 176, 16, .6);--pickup-bg: linear-gradient(180deg, #1a1a1c 0%, #0a0a0b 100%);--pickup-border: #3a3a3c;--pickup-front-bg: linear-gradient(180deg, #050505 0%, #151518 50%, #0a0a0c 100%);--pickup-flap-bg: linear-gradient(180deg, #2a2a2c 0%, #1a1a1c 100%);--pickup-flap-border: #4a4a4d;--coin-slot-bg: linear-gradient(180deg, #1a1a1c 0%, #0a0a0b 50%, #1a1a1c 100%);--coin-slot-border: #4a4a4d;--brand-text-color: #8e8e93;--brand-subtext-color: #aeaeb2;--toast-bg: rgba(28, 28, 30, .92)}[data-theme=midnight]{--machine-bg: linear-gradient(180deg, #2c3242 0%, #242a3a 15%, #1f2534 50%, #1a202e 85%, #161b28 100%);--machine-foot-bg: linear-gradient(180deg, #3c4457 0%, #262d3d 100%);--showcase-bg: linear-gradient(180deg, #10131c 0%, #07090f 100%);--showcase-frame: #232938;--showcase-ring-outer: #4a5470;--showcase-ring-inner: #2e3547;--showcase-edge: #3a4258;--shelf-divider-bg: linear-gradient(180deg, #232938 0%, #10131c 100%);--led-bg: linear-gradient(180deg, #06101c 0%, #0a1826 50%, #06101c 100%);--led-border: #2e3547;--led-display-glow: rgba(0, 40, 80, .5);--led-screen-bg: #061420;--led-time: #4dc3ff;--led-time-glow: rgba(77, 195, 255, .8);--led-date: #2f9fe0;--led-date-glow: rgba(47, 159, 224, .7);--led-greeting: #2a86c2;--led-greeting-glow: rgba(42, 134, 194, .6);--pickup-bg: linear-gradient(180deg, #10131c 0%, #06080d 100%);--pickup-border: #2e3547;--pickup-front-bg: linear-gradient(180deg, #04060b 0%, #0e1220 50%, #06080d 100%);--pickup-flap-bg: linear-gradient(180deg, #232938 0%, #10131c 100%);--pickup-flap-border: #3a4258;--coin-slot-bg: linear-gradient(180deg, #10131c 0%, #06080d 50%, #10131c 100%);--coin-slot-border: #3a4258;--brand-text-color: #aab3c5;--brand-subtext-color: #76809a;--toast-bg: rgba(16, 20, 32, .92)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--page-bg);font-family:var(--font-sans);color:var(--text-800);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}button{font-family:inherit}#app{width:100%;max-width:1280px;position:relative;z-index:1}.vending-machine{width:100%;max-width:1280px;aspect-ratio:16 / 9;background:var(--machine-bg);border-radius:24px;position:relative;box-shadow:0 50px 100px -20px #00000040,0 30px 60px -30px #0000004d,inset 0 1px #fffc,inset 0 -1px #0000001a;padding:20px;display:flex;gap:20px;overflow:hidden}.vending-machine:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0px,rgba(255,255,255,.03) 1px,transparent 2px,transparent 4px);pointer-events:none;border-radius:24px}.vending-machine:after{content:"";position:absolute;inset:2px;border-radius:22px;border:1px solid rgba(255,255,255,.3);pointer-events:none;box-shadow:inset 0 0 60px #ffffff1a}.machine-foot{position:absolute;bottom:-8px;width:40px;height:16px;background:var(--machine-foot-bg);border-radius:0 0 8px 8px;box-shadow:0 4px 8px #0003;z-index:0}.machine-foot.left{left:40px}.machine-foot.right{right:40px}.ambient-glow{position:absolute;bottom:0;left:20px;right:20px;height:100px;background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none;z-index:0}.left-section{flex:0 0 70%;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}.glass-showcase{flex:1;background:var(--showcase-bg);border-radius:16px;position:relative;overflow:hidden;border:8px solid var(--showcase-frame);box-shadow:inset 0 0 0 2px var(--showcase-ring-outer),inset 0 0 0 4px var(--showcase-ring-inner),0 8px 32px #0006,inset 0 0 80px #ffffff0d}.glass-showcase:before{content:"";position:absolute;inset:0;border:3px solid var(--showcase-edge);border-radius:8px;pointer-events:none;z-index:10;box-shadow:inset 0 0 20px #00000080}.glass-reflection{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.05) 25%,transparent 50%,rgba(255,255,255,.03) 75%,rgba(255,255,255,.08) 100%);z-index:5;pointer-events:none;border-radius:8px}.light-strip{position:absolute;top:0;left:0;right:0;height:40px;background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(240,248,255,.6) 30%,rgba(220,235,255,.2) 70%,transparent 100%);z-index:2;border-radius:8px 8px 0 0;filter:blur(2px)}.interior-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.15) 0%,rgba(240,248,255,.08) 30%,transparent 60%);pointer-events:none}.showcase-interior{position:absolute;inset:16px;display:flex;flex-direction:column;justify-content:space-between;padding:12px 8px}.shelf-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:0 6px;position:relative}.shelf-row:after{content:"";position:absolute;bottom:-5px;left:0;right:0;height:3px;background:var(--shelf-divider-bg);box-shadow:0 2px 6px #00000080}.shelf-row:last-child:after{display:none}.bottle-slot{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:transform .25s var(--ease-spring);position:relative}.bottle-slot:hover{transform:translateY(-4px)}.bottle-slot:focus-visible{outline:3px solid var(--brand-400);outline-offset:4px;border-radius:8px}.bottle-slot.is-selected{transform:translateY(-6px)}.bottle-slot.is-selected:after{content:"";position:absolute;bottom:-14px;left:50%;transform:translate(-50%);width:30px;height:6px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 12px var(--brand-400),0 0 24px var(--brand-300);animation:selected-pulse 1.6s ease-in-out infinite}@keyframes selected-pulse{0%,to{opacity:.6;transform:translate(-50%) scale(.9)}50%{opacity:1;transform:translate(-50%) scale(1.1)}}.bottle-slot.is-sold-out{opacity:.35;pointer-events:none;filter:grayscale(.6)}.bottle-slot.is-sold-out .bottle-name:after{content:" SOLD OUT";color:var(--state-error);font-weight:700}.bottle{width:44px;height:92px;position:relative;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));transition:filter .25s var(--ease-smooth)}.bottle-slot:hover .bottle{filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(255,255,255,.15))}.bottle-cap{position:absolute;top:0;left:50%;transform:translate(-50%);width:18px;height:13px;border-radius:3px 3px 2px 2px;z-index:3}.bottle-neck{position:absolute;top:12px;left:50%;transform:translate(-50%);width:17px;height:13px;z-index:2}.bottle-body{position:absolute;top:24px;left:50%;transform:translate(-50%);width:40px;height:66px;border-radius:5px 5px 10px 10px;z-index:1;overflow:hidden}.bottle-label{position:absolute;top:40px;left:50%;transform:translate(-50%);width:36px;height:26px;border-radius:2px;display:flex;align-items:center;justify-content:center;z-index:4;font-size:6px;font-weight:700;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);text-transform:uppercase;letter-spacing:.5px}.bottle-highlight{position:absolute;top:28px;left:5px;width:6px;height:50px;background:linear-gradient(180deg,#ffffff80,#ffffff1a);border-radius:4px;z-index:5;filter:blur(1px)}.bottle-name{font-size:10px;color:#cfe5ff;font-weight:600;letter-spacing:.4px;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 1px rgba(0,0,0,.9),0 0 8px rgba(0,122,255,.45);white-space:nowrap;padding:2px 6px;border-radius:4px;background:#001e3c8c;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.bottle-greentea .bottle-cap{background:linear-gradient(180deg,#4a7c59,#2d5a3d)}.bottle-greentea .bottle-neck{background:linear-gradient(180deg,#4a7c59b3,#2d5a3d80)}.bottle-greentea .bottle-body{background:linear-gradient(180deg,#64a078d9,#3c7850e6,#285a3cf2)}.bottle-greentea .bottle-label{background:#fffffff2;color:#2d5a3d}.bottle-cola .bottle-cap{background:linear-gradient(180deg,#c41e3a,#8b0000)}.bottle-cola .bottle-neck{background:linear-gradient(180deg,#8b0000cc,#50000099)}.bottle-cola .bottle-body{background:linear-gradient(180deg,#3c1414f2,#280a0afa,#140505)}.bottle-cola .bottle-label{background:#c41e3a;color:#fff}.bottle-coffee .bottle-cap{background:linear-gradient(180deg,#2a2a2a,#141414)}.bottle-coffee .bottle-neck{background:linear-gradient(180deg,#2a2a2acc,#14141499)}.bottle-coffee .bottle-body{background:linear-gradient(180deg,#323232eb,#1e1e1ef5,#0a0a0afc)}.bottle-coffee .bottle-label{background:#fff;color:#141414}.bottle-water .bottle-cap{background:linear-gradient(180deg,#5bb5e5,#2d8bc2)}.bottle-water .bottle-neck{background:linear-gradient(180deg,#5bb5e566,#2d8bc233)}.bottle-water .bottle-body{background:linear-gradient(180deg,#c8e6f54d,#96c8e666,#64aad280);border:1px solid rgba(255,255,255,.3)}.bottle-water .bottle-label{background:#ffffffe6;color:#2d8bc2}.bottle-ramune .bottle-cap{background:linear-gradient(180deg,#8b5cf6,#7c3aed)}.bottle-ramune .bottle-neck{background:linear-gradient(180deg,#8b5cf6b3,#7c3aed80);width:26px}.bottle-ramune .bottle-body{background:linear-gradient(180deg,#b48cfad9,#8c5ae6e6,#c850b4f2)}.bottle-ramune .bottle-label{background:#fff;color:#7c3aed}.bottle-orange .bottle-cap{background:linear-gradient(180deg,#ff9f43,#ee7b1f)}.bottle-orange .bottle-neck{background:linear-gradient(180deg,#ff9f43b3,#ee7b1f80)}.bottle-orange .bottle-body{background:linear-gradient(180deg,#ffb464e6,#ff8c32f2,#f06e14fa)}.bottle-orange .bottle-label{background:#fff;color:#ee7b1f}.bottle-milktea .bottle-cap{background:linear-gradient(180deg,#c9a87c,#a08060)}.bottle-milktea .bottle-neck{background:linear-gradient(180deg,#c9a87cb3,#a0806080)}.bottle-milktea .bottle-body{background:linear-gradient(180deg,#e6d2b4f2,#d2b48cf7,#b4966efc)}.bottle-milktea .bottle-label{background:#8b6914;color:#fff}.bottle-lemon .bottle-cap{background:linear-gradient(180deg,#fdd835,#f9a825)}.bottle-lemon .bottle-neck{background:linear-gradient(180deg,#fdd83599,#f9a82566)}.bottle-lemon .bottle-body{background:linear-gradient(180deg,#fffac8b3,#fff096cc,#fadc64d9)}.bottle-lemon .bottle-label{background:#f57f17;color:#fff}.bottle-grape .bottle-cap{background:linear-gradient(180deg,#fb7299,#e45a82)}.bottle-grape .bottle-neck{background:linear-gradient(180deg,#fb7299b3,#e45a8280)}.bottle-grape .bottle-body{background:linear-gradient(180deg,#ffb4c8e6,#fa6e9bf2,#dc4678fa)}.bottle-grape .bottle-label{background:#fff;color:#fb7299}.bottle-strawberry .bottle-cap{background:linear-gradient(180deg,#f48fb1,#ec407a)}.bottle-strawberry .bottle-neck{background:linear-gradient(180deg,#f48fb199,#ec407a66)}.bottle-strawberry .bottle-body{background:linear-gradient(180deg,#ffdce6f2,#fabed2f7,#f096b4fc)}.bottle-strawberry .bottle-label{background:#d81b60;color:#fff}.bottle-sports .bottle-cap{background:linear-gradient(180deg,#66bb6a,#43a047)}.bottle-sports .bottle-neck{background:linear-gradient(180deg,#66bb6a99,#43a04766)}.bottle-sports .bottle-body{background:linear-gradient(180deg,#b4f0b4cc,#82d282d9,#50aa50e6)}.bottle-sports .bottle-label{background:#fff;color:#2e7d32}.bottle-oolong .bottle-cap{background:linear-gradient(180deg,#555,#333)}.bottle-oolong .bottle-neck{background:linear-gradient(180deg,#555c,#3339)}.bottle-oolong .bottle-body{background:linear-gradient(180deg,#505050e6,#323232f2,#191919fa)}.bottle-oolong .bottle-label{background:#fff;color:#333}.bottle-mint .bottle-cap{background:linear-gradient(180deg,#8ed100,#76b900)}.bottle-mint .bottle-neck{background:linear-gradient(180deg,#8ed100b3,#76b90080)}.bottle-mint .bottle-body{background:linear-gradient(180deg,#b4f064d9,#82c81ee6,#5aa000f2)}.bottle-mint .bottle-label{background:#fff;color:#76b900}.bottle-violet .bottle-cap{background:linear-gradient(180deg,#9575cd,#5e35b1)}.bottle-violet .bottle-neck{background:linear-gradient(180deg,#9575cdb3,#5e35b180)}.bottle-violet .bottle-body{background:linear-gradient(180deg,#b496e6e6,#8c64c8f2,#5a3296fa)}.bottle-violet .bottle-label{background:#fff;color:#5e35b1}.bottle-rose .bottle-cap{background:linear-gradient(180deg,#ef5350,#c62828)}.bottle-rose .bottle-neck{background:linear-gradient(180deg,#ef5350b3,#c6282880)}.bottle-rose .bottle-body{background:linear-gradient(180deg,#ffb4afe6,#f0827df2,#c84641fa)}.bottle-rose .bottle-label{background:#fff;color:#c62828}.bottle-cyan .bottle-cap{background:linear-gradient(180deg,#26c6da,#00838f)}.bottle-cyan .bottle-neck{background:linear-gradient(180deg,#26c6da99,#00838f66)}.bottle-cyan .bottle-body{background:linear-gradient(180deg,#b4faff99,#64dcebb3,#32b4d2cc)}.bottle-cyan .bottle-label{background:#fff;color:#00838f}.bottle-amber .bottle-cap{background:linear-gradient(180deg,#ffa726,#ef6c00)}.bottle-amber .bottle-neck{background:linear-gradient(180deg,#ffa726b3,#ef6c0080)}.bottle-amber .bottle-body{background:linear-gradient(180deg,#ffdc96d9,#f5aa3ce6,#d2780af2)}.bottle-amber .bottle-label{background:#fff;color:#ef6c00}.bottle-teal .bottle-cap{background:linear-gradient(180deg,#2a475e,#1b2838)}.bottle-teal .bottle-neck{background:linear-gradient(180deg,#2a475ecc,#1b283899)}.bottle-teal .bottle-body{background:linear-gradient(180deg,#32506eeb,#1e3246f5,#0f1928fc)}.bottle-teal .bottle-label{background:#66c0f4;color:#1b2838}.bottle-indigo .bottle-cap{background:linear-gradient(180deg,#5c6bc0,#283593)}.bottle-indigo .bottle-neck{background:linear-gradient(180deg,#5c6bc0b3,#28359380)}.bottle-indigo .bottle-body{background:linear-gradient(180deg,#96aaf0e6,#6478dcf2,#3c46aafa)}.bottle-indigo .bottle-label{background:#fff;color:#283593}.bottle-lime .bottle-cap{background:linear-gradient(180deg,#c0ca33,#827717)}.bottle-lime .bottle-neck{background:linear-gradient(180deg,#c0ca33b3,#82771780)}.bottle-lime .bottle-body{background:linear-gradient(180deg,#dceb82d9,#b4d246e6,#82a01ef2)}.bottle-lime .bottle-label{background:#fff;color:#827717}.bottle-reddit .bottle-cap{background:linear-gradient(180deg,#f63,#ff4500)}.bottle-reddit .bottle-neck{background:linear-gradient(180deg,#ff6633b3,#ff450080)}.bottle-reddit .bottle-body{background:linear-gradient(180deg,#ffa078e6,#ff6432f2,#dc3c00fa)}.bottle-reddit .bottle-label{background:#fff;color:#ff4500}.bottle-youtube .bottle-cap{background:linear-gradient(180deg,#f44,#c00)}.bottle-youtube .bottle-neck{background:linear-gradient(180deg,#ff4444b3,#cc000080)}.bottle-youtube .bottle-body{background:linear-gradient(180deg,#ff7878eb,#f03232f5,#c80000fc)}.bottle-youtube .bottle-label{background:#fff;color:#c00}.snack{width:44px;height:92px;position:relative;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));transition:filter .25s var(--ease-smooth);--snack-main: #d4a76a;--snack-dark: #a07840;--snack-label-bg: #ffffff;--snack-label-color: #6b4c2a}.bottle-slot:hover .snack{filter:drop-shadow(0 10px 16px rgba(0,0,0,.4)) drop-shadow(0 0 6px rgba(255,255,255,.15))}.snack-seal-top{position:absolute;top:0;left:50%;transform:translate(-50%);width:38px;height:12px;background:var(--snack-dark);clip-path:polygon(0 0,100% 0,100% 55%,90% 100%,80% 55%,70% 100%,60% 55%,50% 100%,40% 55%,30% 100%,20% 55%,10% 100%,0 55%);z-index:3}.snack-seal-bottom{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:38px;height:12px;background:var(--snack-dark);clip-path:polygon(0 45%,10% 0,20% 45%,30% 0,40% 45%,50% 0,60% 45%,70% 0,80% 45%,90% 0,100% 45%,100% 100%,0 100%);z-index:3}.snack-body{position:absolute;top:10px;left:50%;transform:translate(-50%);width:44px;height:72px;border-radius:7px 7px 9px 9px;background:linear-gradient(135deg,var(--snack-main) 0%,var(--snack-dark) 100%);z-index:1;overflow:hidden}.snack-label{position:absolute;top:34px;left:50%;transform:translate(-50%);width:36px;height:26px;border-radius:3px;display:flex;align-items:center;justify-content:center;z-index:4;font-size:6px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:var(--snack-label-bg);color:var(--snack-label-color);text-shadow:0 1px 1px rgba(0,0,0,.15)}.snack-shine{position:absolute;top:14px;left:6px;width:8px;height:60px;background:linear-gradient(180deg,#ffffff73,#ffffff14);border-radius:4px;z-index:5;filter:blur(1px)}.snack-matcha{--snack-main: #7ecf9a;--snack-dark: #2e8b57;--snack-label-bg: #ffffff;--snack-label-color: #1d6b3f}.snack-ocean{--snack-main: #7db4f0;--snack-dark: #3567c9;--snack-label-bg: #ffffff;--snack-label-color: #2a56b0}.snack-berry{--snack-main: #c98ef0;--snack-dark: #8a4fd0;--snack-label-bg: #ffffff;--snack-label-color: #7a3ec0}.snack-taro{--snack-main: #a98ee6;--snack-dark: #6a4fc0;--snack-label-bg: #ffffff;--snack-label-color: #5e35b1}.snack-cream{--snack-main: #f0e2c8;--snack-dark: #c9a87c;--snack-label-bg: #8b6914;--snack-label-color: #ffffff}.snack-charcoal{--snack-main: #4a4a4a;--snack-dark: #1e1e1e;--snack-label-bg: #ffffff;--snack-label-color: #1e1e1e}.snack-cheddar{--snack-main: #ffc45e;--snack-dark: #e08a00;--snack-label-bg: #ffffff;--snack-label-color: #c47a00}.snack-lime{--snack-main: #b8e05a;--snack-dark: #76b900;--snack-label-bg: #ffffff;--snack-label-color: #5a8f00}.snack-slate{--snack-main: #6e6e6e;--snack-dark: #3a3a3a;--snack-label-bg: #ffffff;--snack-label-color: #3a3a3a}.snack-nacho{--snack-main: #ffb066;--snack-dark: #e06a10;--snack-label-bg: #ffffff;--snack-label-color: #d05f0a}.snack-sea{--snack-main: #5a7ec0;--snack-dark: #1e3a6e;--snack-label-bg: #ffffff;--snack-label-color: #1e3a6e}.snack-chili{--snack-main: #f08a80;--snack-dark: #c0392b;--snack-label-bg: #ffffff;--snack-label-color: #b03020}.snack-honey{--snack-main: #ffe082;--snack-dark: #f0a800;--snack-label-bg: #ffffff;--snack-label-color: #c08600}.snack-rose{--snack-main: #f09098;--snack-dark: #bd2840;--snack-label-bg: #ffffff;--snack-label-color: #a82038}.snack-mint{--snack-main: #6ee0a0;--snack-dark: #16904a;--snack-label-bg: #ffffff;--snack-label-color: #128040}.snack-sakura{--snack-main: #ffa8c0;--snack-dark: #e05585;--snack-label-bg: #ffffff;--snack-label-color: #d04878}.snack-paprika{--snack-main: #ff9a6a;--snack-dark: #e04a10;--snack-label-bg: #ffffff;--snack-label-color: #d04008}.snack-smoke{--snack-main: #4a6580;--snack-dark: #1b2838;--snack-label-bg: #66c0f4;--snack-label-color: #1b2838}.snack-pepper{--snack-main: #3a3a3a;--snack-dark: #101010;--snack-label-bg: #ffffff;--snack-label-color: #101010}.snack-tomato{--snack-main: #ff7a6a;--snack-dark: #cc1010;--snack-label-bg: #ffffff;--snack-label-color: #b80e0e}.pickup-slot{height:80px;background:var(--pickup-bg);border-radius:10px;position:relative;border:6px solid var(--pickup-border);box-shadow:inset 0 4px 12px #000c,inset 0 -2px 4px #ffffff0d,0 4px 12px #0000004d;overflow:hidden;perspective:1200px}.pickup-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s var(--ease-spring)}.pickup-slot.is-flipped .pickup-card{transform:rotateX(180deg)}.pickup-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden}.pickup-front{pointer-events:auto}.pickup-back,.pickup-slot.is-flipped .pickup-front{pointer-events:none}.pickup-slot.is-flipped .pickup-back{pointer-events:auto}.pickup-front{background:var(--pickup-front-bg);box-shadow:inset 0 0 30px #000000e6}.pickup-flap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:50px;background:var(--pickup-flap-bg);border-radius:4px;border:1px solid var(--pickup-flap-border);z-index:2;transition:transform .4s var(--ease-spring)}.pickup-slot.is-open .pickup-flap{transform:translate(-50%,-50%) rotateX(-60deg);transform-origin:top center}.pickup-bottle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);z-index:1;opacity:0;pointer-events:none;transition:none}.pickup-slot.is-dispensing .pickup-bottle{animation:dispense-drop 1.2s var(--ease-smooth) forwards}@keyframes dispense-drop{0%{transform:translate(-50%,-200%) scale(.5) rotate(-10deg);opacity:0}30%{transform:translate(-50%,-50%) scale(.7) rotate(0);opacity:1}70%{transform:translate(-50%,-40%) scale(.7) rotate(0);opacity:1}to{transform:translate(-50%,-50%) scale(.6) rotate(0);opacity:1}}.pickup-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;font-size:10px;color:#fff6;letter-spacing:2px;text-transform:uppercase;cursor:pointer;pointer-events:auto;transition:color .25s ease,opacity .3s ease;padding:4px 10px;border-radius:4px}.pickup-hint:hover{color:var(--brand-300);text-shadow:0 0 8px rgba(102,171,255,.5)}.pickup-slot.is-dispensing .pickup-hint,.pickup-slot.has-item .pickup-hint{opacity:0;pointer-events:none}.pickup-back{transform:rotateX(180deg);background:linear-gradient(180deg,#14141a,#0a0a0f);display:grid;place-items:center;padding:0;box-sizing:border-box}.search-panel{display:flex;align-items:center;gap:10px;width:100%;height:100%;padding:0 10px 0 14px;box-sizing:border-box}.search-engines{display:flex;gap:8px;flex-shrink:0}.engine-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;border:none;background:transparent;cursor:pointer;transition:all .2s var(--ease-smooth)}.engine-icon img{width:20px;height:20px;object-fit:contain;border-radius:50%;pointer-events:none;transition:filter .2s var(--ease-smooth),opacity .2s var(--ease-smooth)}.engine-icon:not(.is-active) img{filter:grayscale(1);opacity:.4}.engine-icon:hover img{opacity:.8}.engine-icon.is-active img{filter:none;opacity:1}.search-input{flex:1 1 auto;min-width:0;height:36px;font-family:var(--font-sans);font-size:13px;color:#e8f2ff;background:transparent;border:1px solid rgba(207,229,255,.25);border-radius:8px;padding:0 14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input::placeholder{color:#cfe5ff66}.search-input:focus{border-color:var(--brand-400);box-shadow:0 0 0 2px #007aff26}.search-back{position:absolute;top:50%;right:12px;transform:translateY(-50%);font-family:var(--font-sans);font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#cfe5ff66;background:transparent;border:none;cursor:pointer;padding:4px 6px;transition:color .2s ease,text-shadow .2s ease}.search-back:hover{color:var(--brand-300);text-shadow:0 0 8px rgba(102,171,255,.5)}.right-section{flex:1;display:flex;flex-direction:column;gap:24px;padding:10px 0;position:relative;z-index:1}.led-display{background:var(--led-bg);border-radius:10px;padding:20px 24px;border:4px solid var(--led-border);box-shadow:inset 0 0 20px var(--led-display-glow),inset 0 2px 4px #000c,0 4px 12px #0000004d;position:relative}.led-display:before{content:"";position:absolute;inset:2px;border-radius:8px;border:1px solid var(--led-display-glow);pointer-events:none}.led-screen{background:var(--led-screen-bg);border-radius:6px;padding:16px;text-align:center;font-family:var(--font-led);position:relative;box-shadow:inset 0 0 30px var(--led-display-glow);min-height:130px}.led-time{font-size:56px;color:var(--led-time);text-shadow:0 0 8px var(--led-time-glow),0 0 20px var(--led-time-glow),0 0 40px var(--led-time-glow);letter-spacing:4px;line-height:1;font-weight:400}.led-date{font-size:20px;color:var(--led-date);text-shadow:0 0 6px var(--led-date-glow),0 0 15px var(--led-date-glow);margin-top:8px;letter-spacing:2px}.led-greeting{font-size:14px;color:var(--led-greeting);text-shadow:0 0 6px var(--led-greeting-glow);margin-top:8px;letter-spacing:3px;opacity:.8;min-height:18px;transition:opacity .3s ease}.led-screen:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);border-radius:6px;pointer-events:none}.control-panel{flex:1;display:flex;flex-direction:column;align-items:center;gap:28px;padding-top:10px}.coin-slot-wrap{display:flex;flex-direction:column;align-items:center}.coin-slot{width:80px;height:8px;background:var(--coin-slot-bg);border-radius:4px;border:2px solid var(--coin-slot-border);box-shadow:inset 0 2px 4px #000c,0 1px #fff3;position:relative;cursor:pointer}.coin-slot:before{content:"";position:absolute;top:50%;left:8px;right:8px;height:3px;background:#050505;transform:translateY(-50%);border-radius:1px}.coin-slot-label{font-size:10px;color:var(--text-500);letter-spacing:2px;text-transform:uppercase;margin-top:8px;font-weight:500}.coin-insert{position:absolute;top:-20px;left:50%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe9a8,#f5c542 40%,#b8860b);box-shadow:0 2px 4px #0006,inset 0 1px 1px #ffffff80;transform:translate(-50%) rotate(0);opacity:0;pointer-events:none;z-index:3}.coin-slot.is-accepting .coin-insert{animation:coin-drop .8s var(--ease-smooth) forwards}@keyframes coin-drop{0%{transform:translate(-50%) translateY(-10px) rotate(0);opacity:0}30%{transform:translate(-50%) translateY(0) rotate(180deg);opacity:1}to{transform:translate(-50%) translateY(20px) rotate(720deg);opacity:0}}.dispatch-button-container{display:flex;flex-direction:column;align-items:center;gap:12px}.dispatch-button{width:100px;height:100px;border-radius:50%;position:relative;cursor:pointer;border:none;background:radial-gradient(circle at 35% 35%,#ff6b5b,#ff3b30,#dc2626,#b91c1c,#991b1b);box-shadow:0 8px #7f1d1d,0 12px 24px #0006,0 4px 8px #dc26264d,inset 0 -4px 8px #0000004d,inset 0 4px 8px #ffffff4d;transition:all .1s ease}.dispatch-button:before{content:"";position:absolute;top:12%;left:18%;width:35%;height:25%;background:radial-gradient(ellipse,rgba(255,255,255,.6) 0%,rgba(255,255,255,.1) 70%,transparent 100%);border-radius:50%;transform:rotate(-30deg)}.dispatch-button:after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid rgba(255,255,255,.1);box-shadow:inset 0 0 20px #0003}.dispatch-button:hover{transform:translateY(2px);box-shadow:0 6px #7f1d1d,0 10px 20px #0006,0 3px 6px #dc26264d,inset 0 -4px 8px #0000004d,inset 0 4px 8px #ffffff4d}.dispatch-button:active,.dispatch-button.is-pressed{transform:translateY(6px);box-shadow:0 2px #7f1d1d,0 4px 8px #0006,inset 0 -2px 4px #0000004d,inset 0 2px 4px #ffffff4d}.dispatch-button:disabled{cursor:not-allowed;opacity:.6}.dispatch-button.is-spinning{animation:btn-spin-pulse .4s var(--ease-smooth)}@keyframes btn-spin-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.4) saturate(1.3)}}.button-label{font-size:11px;color:var(--text-500);letter-spacing:2px;text-transform:uppercase;font-weight:600}.brand-badge{margin-top:auto;text-align:center;padding:16px}.brand-text{font-size:13px;color:var(--brand-text-color);letter-spacing:3px;font-weight:600;text-transform:uppercase}.brand-subtext{font-size:10px;color:var(--brand-subtext-color);letter-spacing:1px;margin-top:4px}.toast-container{position:fixed;top:24px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:var(--toast-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;padding:12px 20px;border-radius:14px;font-size:13px;letter-spacing:.3px;box-shadow:0 8px 24px #00000040;display:flex;align-items:center;gap:10px;animation:toast-in .35s var(--ease-spring);max-width:90vw}.toast.is-leaving{animation:toast-out .3s var(--ease-smooth) forwards}.toast-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-500);box-shadow:0 0 8px var(--brand-400);flex-shrink:0}.toast-dot.warn{background:#ff9f0a;box-shadow:0 0 8px #ff9f0a}.toast-dot.error{background:var(--state-error);box-shadow:0 0 8px var(--state-error)}.toast-dot.success{background:var(--state-success);box-shadow:0 0 8px var(--state-success)}@keyframes toast-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@media (max-width: 1024px){body{padding:16px}.vending-machine{aspect-ratio:4 / 3;padding:16px;gap:16px}.led-time{font-size:44px}.led-date{font-size:16px}.led-greeting{font-size:12px}.dispatch-button{width:84px;height:84px}.coin-slot{width:64px}.bottle{width:44px;height:92px}.bottle-body{width:40px;height:64px;top:24px}.bottle-cap{width:18px;height:13px}.bottle-neck{width:16px;height:13px;top:12px}.bottle-label{width:36px;height:26px;top:40px;font-size:6px}.bottle-highlight{top:28px;height:50px}}@media (max-width: 640px){body{padding:12px;align-items:flex-start}.vending-machine{aspect-ratio:auto;flex-direction:column;gap:12px;padding:14px;border-radius:20px;min-height:100dvh}.machine-foot{display:none}.left-section{flex:0 0 auto;gap:12px}.glass-showcase{aspect-ratio:16 / 11;flex:none;border-width:6px}.showcase-interior{inset:12px;padding:12px 6px}.shelf-row{gap:6px;padding:0 4px}.bottle{width:32px;height:66px}.bottle-body{width:28px;height:46px;top:18px}.bottle-cap{width:13px;height:10px}.bottle-neck{width:12px;height:10px;top:9px}.bottle-label{width:24px;height:18px;top:28px;font-size:5px}.bottle-highlight{top:22px;left:4px;width:5px;height:34px}.bottle-name{font-size:8px}.pickup-slot{height:56px;border-width:4px}.pickup-flap{height:36px}.search-panel{gap:6px;padding:0 6px 0 8px}.engine-icon{width:22px;height:22px}.engine-icon img{width:15px;height:15px}.search-input{font-size:11px;height:28px;padding:0 10px}.search-back{font-size:8px;right:8px}.right-section{flex:1;gap:16px;padding:4px 0}.led-display{padding:14px 18px}.led-screen{padding:12px;min-height:100px}.led-time{font-size:40px;letter-spacing:2px}.led-date{font-size:14px}.led-greeting{font-size:11px}.control-panel{gap:18px;padding-top:4px}.dispatch-button{width:76px;height:76px}.coin-slot{width:60px}.brand-badge{padding:8px}.brand-text{font-size:11px}.brand-subtext{font-size:9px}}@media (max-width: 380px){.bottle{width:30px;height:64px}.bottle-body{width:26px;height:44px;top:16px}.bottle-cap{width:12px;height:9px}.bottle-neck{width:11px;height:9px;top:8px}.bottle-label{width:24px;height:18px;top:26px;font-size:4px}.bottle-name{font-size:7px}.led-time{font-size:34px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body.is-mobile{padding:0;background:#060809;overflow:hidden}.mobile-home{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 0%,#5a78b459,#0000 55%),linear-gradient(180deg,#1c2430,#0d1117 60%,#060809);color:#fff;font-family:var(--font-sans);overflow:hidden;user-select:none;-webkit-user-select:none}.m-statusbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px 16px;background:linear-gradient(180deg,#000000d9,#0009);font-size:13px;font-weight:600;letter-spacing:.3px;flex:0 0 auto}.m-carrier{opacity:.9;justify-self:start}.m-time{font-variant-numeric:tabular-nums;justify-self:center}.m-battery{justify-self:end}.m-battery{width:24px;height:11px;border:1px solid rgba(255,255,255,.7);border-radius:3px;padding:1px;position:relative}.m-battery:after{content:"";position:absolute;right:-3px;top:3px;width:2px;height:5px;background:#ffffffb3;border-radius:0 1px 1px 0}.m-battery-level{display:block;width:80%;height:100%;background:#4cd964;border-radius:1px;transition:width .5s ease,background .5s ease}.m-battery-level.is-depleted{animation:battery-blink 1s ease-in-out infinite}@keyframes battery-blink{0%,to{opacity:1}50%{opacity:.25}}.m-search{display:flex;align-items:center;gap:8px;margin:12px 16px 4px;padding:0 10px;height:36px;background:#ffffff24;border:1px solid rgba(255,255,255,.18);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex:0 0 auto}.m-search-glass{width:14px;height:14px;border:2px solid rgba(255,255,255,.7);border-radius:50%;position:relative;flex:0 0 auto}.m-search-glass:after{content:"";position:absolute;right:-5px;bottom:-5px;width:6px;height:2px;background:#ffffffb3;transform:rotate(45deg);border-radius:1px}.m-search-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:15px}.m-search-input::placeholder{color:#ffffff80}.m-engine-btn{width:26px;height:26px;border:none;background:#ffffffe6;border-radius:7px;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.m-engine-btn img{width:18px;height:18px;object-fit:contain}.m-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,1fr);align-content:center;gap:14px 8px;padding:16px 14px;overflow:hidden}.m-app{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.m-icon{width:58px;height:58px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 1px 1px #ffffff59,0 3px 8px #00000073;transition:transform .15s var(--ease-smooth)}.m-icon:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#ffffff59,#ffffff0d 45%,#fff0 46%);pointer-events:none}.m-app:active .m-icon{transform:scale(.92)}.m-icon img{width:100%;height:100%;object-fit:cover;display:block}.m-icon-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.m-label{font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.m-home-btn{flex:0 0 auto;width:54px;height:54px;margin:4px auto 14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);position:relative}.m-home-btn:after{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.35);border-radius:6px}@media (max-width: 380px){.m-icon{width:52px;height:52px;border-radius:12px}.m-icon-letter{font-size:24px}.m-grid{gap:12px 6px;padding:12px 10px}}@media (max-height: 640px){.m-icon{width:50px;height:50px}.m-grid{gap:10px 6px}.m-home-btn{width:44px;height:44px;margin-bottom:8px}}