@import"https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Open+Sans:wght@400;500;600&display=swap";:root{font-family:Open Sans,sans-serif;color:#14181b;background:#f1f4f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{opacity:.6;cursor:wait}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #c36b00;outline-offset:4px}h1,h2,p{margin:0}.order-page{width:100%;max-width:600px;min-height:100dvh;margin:0 auto;padding-top:24px;padding-bottom:32px}.brand{display:flex;justify-content:center;height:90px;margin-bottom:24px}.brand img{width:150px;height:90px;object-fit:cover}.status-view{animation:card-enter .45s ease both}.status-card{margin:0 16px 24px;background:#fff;border-radius:16px;padding:24px 16px 16px;text-align:center;box-shadow:0 2px 10px #0003}.status-card h2{font-family:Open Sans,sans-serif;font-size:24px;font-weight:600;line-height:1.35;text-wrap:balance}.status-card p{font-size:14px;font-weight:400;line-height:1.6;color:#57636c;margin-top:16px}.compact-card{padding:24px 16px 16px}.compact-card p{margin-top:16px}.number-card{margin:0 24px 48px;padding:40px 24px 32px;border-radius:16px;background:linear-gradient(45deg,#ff7522,#f2c23c);color:#fff;min-height:202px;display:flex;flex-direction:column;justify-content:center;gap:24px}.number-card h1{font-family:Open Sans,sans-serif;font-size:24px;font-weight:600;text-align:left}.number-card strong{font-family:Open Sans,sans-serif;font-size:54px;line-height:1.15;font-weight:700;text-align:center}.status-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#ffb813;color:#fff;margin:0 auto 18px}.status-icon.preparing svg,.status-icon.received svg{animation:utensils 2.5s ease-in-out infinite}.status-icon.delivered svg{animation:check-in .6s ease both}.status-icon.cancelled{background:#d58157}.ready-card{margin:0 24px 24px;padding:16px 16px 30px;box-shadow:0 2px 4px #0003}.ready-animation{width:150px;height:140px;margin:0 auto;position:relative}.ready-tick{position:absolute;top:0;right:0;bottom:0;left:0;height:120px;z-index:1}.ready-confetti{position:absolute;top:36px;width:150px;height:120px;z-index:2}.ready-fallback{position:absolute;left:55px;top:40px;width:40px;height:40px;background:#74ac8b;border-radius:50%;color:#fff;display:grid;place-items:center}.ready-number{display:block;font-family:Open Sans,sans-serif;font-size:54px;font-weight:700;color:#545454;line-height:1.2;margin:8px 0 24px}.ready-card p{font-size:14px;margin-top:16px}.notification-permission{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin:0 24px 24px}.notification-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:9px 17px;border:0;border-radius:7px;background:#ffb813;color:#342400;font-size:14px;font-weight:600;transition:background .2s}.notification-button:hover{background:#f1aa00}.notification-button.enabled{background:#deede2;color:#356547}.notification-options{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.notification-options a{font-size:11px;color:#57636c;text-underline-offset:3px}.sound-button{border:0;display:flex;align-items:center;gap:5px;background:transparent;font-size:11px;color:#57636c;padding:5px}.notification-message{font-size:12px;color:#57636c;line-height:1.6;text-align:center;max-width:330px}.connection-message{margin:0 24px;text-align:center;font-size:12px;color:#57636c;line-height:1.6}.connection-message button{display:inline-flex;gap:6px;align-items:center;border:0;background:none;color:#704d16;margin-top:12px;padding:8px}.demo-controls{margin:36px 24px 0;padding:12px;border:1px dashed #cbd1d7;border-radius:8px;font-size:11px;color:#57636c}.demo-controls summary{cursor:pointer}.demo-controls>div{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}.demo-controls button{padding:7px 10px;border:1px solid #cbd1d7;border-radius:6px;background:#fff;font-size:11px;color:#57636c}.demo-controls button[aria-pressed=true]{background:#ffb813;border-color:#ffb813;color:#342400}.spinning{animation:spin 1s linear infinite}@keyframes card-enter{0%{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes utensils{0%,to{transform:rotate(0)}35%{transform:rotate(-9deg)}65%{transform:rotate(9deg)}}@keyframes check-in{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:650px){.order-page{padding-top:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}.status-icon{position:relative;overflow:hidden}.preparing-animation{position:absolute;top:0;right:0;bottom:0;left:0}.preparing-animation svg{animation:none!important}.utensils-fallback{opacity:0}.brand{isolation:isolate;transform:translateZ(0)}:root{color:#252822;background:#fcfbf8;--muted: #73766f}body{min-height:100dvh;background:radial-gradient(ellipse at 50% 10%,#fff4d940,transparent 65%)}.order-page{max-width:472px;padding:28px 16px 24px}.brand{height:76px;margin-bottom:22px}.brand img{width:126px;height:76px;object-fit:contain}.status-view{animation:card-enter .4s ease both}.status-card{position:relative;overflow:hidden;margin:0;padding:28px 26px;border:1px solid #ede9df;border-radius:24px;box-shadow:0 12px 36px #40300a08,0 2px 6px #40300a03}.status-card:before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;background:linear-gradient(90deg,#e6a21c,#f6c559);border-radius:0 0 4px 4px}.order-identity{display:flex;align-items:center;flex-direction:column;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid #f0eee8}.order-label{font-size:13px;font-weight:600;color:var(--muted)}.order-number{display:block;font-family:Inter Tight,sans-serif;font-size:76px;font-weight:700;line-height:1.12;letter-spacing:-3px;margin:5px 0 12px;overflow-wrap:anywhere;max-width:100%}.status-label{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:600;color:#92600b;background:#fff6df}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.status-label.preparing .status-dot,.status-label.received .status-dot{animation:pulse 2.4s ease-in-out infinite}.status-label.ready{color:#347253;background:#edf7ef}.status-label.delivered{color:#66716a;background:#f0f4f1}.status-label.cancelled{color:#a2513e;background:#fff1ec}.status-card h2{font-family:Inter Tight,sans-serif;font-size:24px;font-weight:600;line-height:1.25;letter-spacing:-.35px;text-wrap:balance}.status-card p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:12px;text-wrap:pretty}.status-icon,.waiting-icon{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:#fff5dc;color:#dca018;margin:0 auto 16px}.status-icon.delivered{color:#6b9179;background:#f0f6f1}.status-icon.preparing,.status-icon.received{background:#e9ad2f;color:#fff}.status-icon.cancelled{color:#b67553;background:#fff3eb}.waiting-icon.waiting svg,.waiting-icon.notfound svg,.waiting-icon.unknown svg{animation:spin 4s linear infinite}.state-empty .status-card,.state-waiting .status-card,.state-notfound .status-card,.state-invalid .status-card,.state-expired .status-card,.state-configuration .status-card{padding-top:38px;padding-bottom:38px}.state-ready .status-card:before{background:linear-gradient(90deg,#71a687,#b9d7be)}.state-ready .status-card h2{color:#347253}.state-delivered .status-card:before{background:#b1c3b5}.ready-animation{width:140px;height:92px;margin:-16px auto 6px}.ready-tick{top:-15px;right:0;bottom:0;left:0;height:120px}.ready-confetti{top:12px;width:140px;height:110px}.ready-fallback{left:50px;top:25px}.notification-permission{min-height:0;gap:9px;margin:22px 8px 0}.notification-button{width:100%;min-height:48px;padding:12px 16px;border:1px solid #edb63a;border-radius:14px;background:linear-gradient(110deg,#e9a313,#f7bd43);color:#392b0a;font-size:13px;font-weight:600;box-shadow:0 5px 15px #e9a31318;transition:filter .2s,transform .2s}.notification-button:hover{background:linear-gradient(110deg,#e9a313,#f7bd43);filter:brightness(1.03);transform:translateY(-1px)}.notification-button.enabled{background:#edf6ef;border-color:#d9e8dc;box-shadow:none;color:#3c7151}.notification-button.enabled:disabled{opacity:1;cursor:default}.notification-hint,.notification-message{font-size:11px;color:var(--muted);line-height:1.65;text-align:center}.notification-message{max-width:340px}.ios-install{width:100%;border:1px solid #eee2c5;border-radius:16px;padding:18px;background:#fffaf0;color:#62583f;text-align:left;font-size:12px;line-height:1.7}.ios-install-title{display:flex;align-items:center;gap:9px;color:#7b591c;font-size:13px;line-height:1.5;margin-bottom:9px}.ios-install-title svg{flex-shrink:0}.ios-install details{margin-top:12px}.ios-install summary{cursor:pointer;color:#8c641b;font-weight:600;padding:4px 0}.ios-install ol{margin:10px 0;padding-left:19px}.ios-install li{margin-bottom:10px;padding-left:3px}.ios-install li svg{vertical-align:-3px;color:#9b731f}.ios-install-tip{font-size:11px;color:#7c725c}.ios-install .ios-install-footnote{margin-top:13px;font-size:11px;color:#8c8470}.order-page{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}.sound-button{gap:6px;color:#7d8179;padding:7px 10px}.connection-message{margin:18px 8px 0;padding:14px;border:1px solid #ede8dc;border-radius:14px;background:#fffaf0;color:#7b6b47}.connection-message button{color:#946a19;margin-top:8px;padding:6px}.page-footer{text-align:center;color:#9a9b92;font-size:10px;margin-top:30px}.page-footer span{font-weight:600;color:#787c72}.demo-controls{margin:24px 8px 0;border-color:#dfd9c9;border-radius:12px;color:var(--muted)}.demo-controls button[aria-pressed=true]{background:#fff3d4;border-color:#e9b84e;color:#84601d}@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}@media(min-width:650px){.order-page{padding-top:calc(48px + env(safe-area-inset-top))}.brand{margin-bottom:28px}}@media(max-width:360px){.status-card{padding-left:20px;padding-right:20px}.order-number{font-size:64px}.status-card h2{font-size:22px}}