.demo-launch{position:absolute;left:20px;right:20px;bottom:20px;display:flex;align-items:center;gap:15px;padding:17px 19px;border:1px solid #ffffff85;border-radius:13px;background:#ffffffed;backdrop-filter:blur(14px);box-shadow:0 10px 35px #131b3020;color:#172237;text-align:left;transition:transform .2s,background .2s}.demo-launch:hover{background:#fff;transform:translateY(-3px)}.demo-launch-icon{display:grid;place-items:center;width:51px;height:51px;border:1px solid #d2dbed;border-radius:50%;font-size:.95rem;flex-shrink:0;color:#265dff}.demo-launch strong{display:block;font-size:1.04rem;font-weight:650;letter-spacing:-.025em}.demo-launch small{display:block;font-size:.8125rem;color:#5b687b;margin-top:6px;line-height:1.45}.demo-launch>span:last-child{margin-left:auto;font-size:1.4rem}
#interactive-demo{width:min(1540px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 36px);border-radius:20px;background:#fbfcfd;border:1px solid #dde3ea;overflow:auto}#interactive-demo::backdrop{background:#101725ba;backdrop-filter:blur(9px)}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 27px;background:#fff;border-bottom:1px solid #e2e7ed;position:sticky;top:0;z-index:5}.demo-kicker{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;color:#697789;line-height:1.5}.demo-header h2{font-size:1.55rem;letter-spacing:-.04em;margin-top:4px;line-height:1.2}.demo-close,.demo-menu-close{display:grid;place-items:center;background:#f4f6f8;border:1px solid #e0e5eb;border-radius:50%;width:44px;height:44px;font-size:1.8rem;line-height:1;color:#314055;flex-shrink:0}.demo-close:hover,.demo-menu-close:hover{background:#e7edf7}.demo-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr);min-height:620px}.demo-stage{position:relative;background:#ddddd8;min-width:0;min-height:620px;display:flex;flex-direction:column;overflow:hidden}.demo-stage-label{position:absolute;left:26px;right:26px;top:24px;display:flex;justify-content:space-between;gap:15px;z-index:1;pointer-events:none;color:#354047;font-size:.75rem;font-weight:650;letter-spacing:.08em}.demo-live{display:flex;align-items:center;gap:7px;font-weight:500;letter-spacing:0}.demo-live i{width:6px;height:6px;border-radius:50%;background:#2c7458}#demo-canvas{width:100%;height:100%;min-height:620px;position:absolute;inset:0;touch-action:none;outline-offset:-4px}#demo-canvas canvas{width:100%;height:100%;display:block;touch-action:none}.demo-view-tools{position:absolute;left:22px;right:22px;bottom:96px;display:flex;justify-content:center;flex-wrap:wrap;gap:7px}.demo-view-tools button{border:1px solid #ffffffc9;background:#ffffffe0;backdrop-filter:blur(10px);color:#394550;font-size:.8125rem;min-height:41px;padding:9px 12px;border-radius:8px;box-shadow:0 3px 15px #10192a09}.demo-view-tools button[aria-pressed=true]{background:#152138;color:#fff;border-color:#152138}.demo-view-tools button:disabled{opacity:.45;cursor:not-allowed}.demo-stage-bottom{position:absolute;bottom:0;left:0;right:0;padding:18px 24px 22px;text-align:center;background:linear-gradient(transparent,#f2f1ebb0)}.demo-stage-bottom>p{font-size:.75rem;color:#445159;margin-bottom:9px}.demo-led-status{display:flex;align-items:center;justify-content:center;gap:9px;font-size:.875rem;color:#27343c;font-weight:550}.demo-led-status i{width:9px;height:9px;border-radius:50%;background:#8a9394;border:1px solid #ffffff70}#demo-content[data-led=order] .demo-led-status i{background:#00b953;box-shadow:0 0 12px #00b95377}#demo-content[data-led=bill] .demo-led-status i{background:#ee2942;box-shadow:0 0 12px #ee294277}.demo-console{padding:25px 25px 21px;background:#fff;min-width:0;border-left:1px solid #e1e5e9}.demo-console-intro h3{font-size:1.58rem;letter-spacing:-.045em;margin:7px 0 5px}.demo-console-intro p{font-size:.875rem;color:#6a7583}.demo-call-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:18px 0 19px}.demo-call-buttons button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;font-size:.875rem;font-weight:600;border:1px solid #dce2e9;border-radius:8px;background:#fff;color:#334258;padding:8px}.demo-call-buttons svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}.demo-call-buttons [data-call=order]:hover,.demo-call-buttons [data-call=order][aria-pressed=true]{color:#08794d;background:#e9f8ee;border-color:#81cba4}.demo-call-buttons [data-call=bill]:hover,.demo-call-buttons [data-call=bill][aria-pressed=true]{color:#b8243e;background:#fff0f2;border-color:#eda2ae}.demo-call-buttons [data-menu-open]:hover{background:#eef3ff;color:#265dff;border-color:#a9bcf9}.demo-screen-tabs{display:flex;gap:4px;padding:4px;background:#edf1f5;border-radius:9px;margin-bottom:14px}.demo-screen-tabs button{flex:1;min-height:39px;border:0;border-radius:6px;background:transparent;color:#697589;font-size:.875rem;font-weight:600}.demo-screen-tabs button[aria-selected=true]{color:#1f334d;background:#fff;box-shadow:0 1px 5px #15223813}.demo-pc-panel{border:1px solid #dce2e6;border-radius:11px;overflow:hidden;background:#f3f6f7}.demo-app-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #e2e7e9}.demo-app-bar strong{font-size:1.55rem;letter-spacing:-.075em;font-weight:700}.demo-app-bar strong>span{color:#265dff}.demo-app-bar>span{font-size:.75rem;color:#71808b}.demo-app-body{padding:17px}.demo-panel-heading{display:flex;align-items:center;justify-content:space-between;color:#54616c;font-size:.8125rem}.demo-panel-heading>span{font-size:.75rem}.demo-tables{display:flex;gap:10px;margin:15px 0 22px}.demo-table{height:48px;min-width:48px;display:grid;place-items:center;border-radius:11px;border:1px solid #e0e5e6;background:#fff;color:#707b82;font-size:.9375rem;font-weight:700;box-shadow:0 3px 5px #13282b05}.demo-table.occupied{background:#f29432;color:#fff;border-color:#f29432}.demo-table[data-state=order]{color:#fff;background:#16bc61;border-color:#16bc61;box-shadow:0 4px 12px #16bc612a}.demo-table[data-state=bill]{color:#fff;background:#f13550;border-color:#f13550;box-shadow:0 4px 12px #f135502a}.demo-call-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.demo-app-body h4{margin:0;font-size:1rem;font-weight:650;color:#2d3c43;letter-spacing:-.02em}.demo-app-body h4>span{font-size:.875rem;font-weight:450;color:#82938e;margin-left:7px}.demo-mini-label{font-size:.75rem;letter-spacing:.05em;color:#778783}.demo-request{border:1px solid #e2e8e5;border-radius:10px;padding:15px;background:#fff;box-shadow:0 4px 10px #172f2405;min-height:160px}.demo-request-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-request-heading strong{font-size:1.15rem;letter-spacing:-.025em}.demo-request-heading>span{font-size:.75rem;background:#f0f3f2;border-radius:4px;padding:5px 7px;color:#6f7c7a}.demo-request-type{display:flex;align-items:center;gap:10px;margin:14px 0}.demo-request-type i{width:10px;height:10px;border-radius:50%;background:#16b977}.demo-request-type>div{display:grid;gap:3px}.demo-request-type b{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#0a9364}.demo-request-type strong{font-size:1.35rem;color:#2a3a3b}.demo-request-type>span{font-size:.75rem;color:#7a8986;margin-left:auto}.demo-request button{width:100%;border:0;border-radius:6px;color:#fff;background:#089d73;font-size:.875rem;font-weight:600;padding:11px 10px;min-height:42px}.demo-request.bill .demo-request-type i,.demo-request.bill button{background:#ef2b54}.demo-request.bill .demo-request-type b{color:#d5284c}.demo-request.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;gap:7px;background:#ffffff8f}.demo-empty-icon{font-size:1.5rem;line-height:1;color:#859790;font-weight:400}.demo-request.empty strong{font-size:.9375rem;color:#4b5f58}.demo-request.empty p{font-size:.8125rem;color:#7a8984;max-width:260px;line-height:1.5}.demo-panel-feedback{font-size:.75rem;color:#667771;min-height:20px;margin-top:10px;line-height:1.45}.demo-app-disclaimer{font-size:.75rem;line-height:1.55;color:#83909b;margin-top:12px}.demo-console-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid #e8ecf0;font-size:.8125rem}.demo-console-footer button{padding:8px 0;min-height:38px;background:none;border:0;color:#697687}.demo-console-footer a{font-weight:600;color:#244fbd;padding:8px 0}.demo-phone-panel{padding:2px 0}.demo-phone{width:254px;max-width:100%;margin:auto;border:5px solid #202938;border-radius:31px;background:#f3f6f7;overflow:hidden;box-shadow:0 10px 30px #16213614}.demo-phone-system{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 0;background:#fff;font-size:.75rem;color:#4c5a68}.demo-phone-system b{width:62px;height:15px;border-radius:20px;background:#18212c}.demo-phone .demo-app-body{padding:16px 12px 9px}.demo-phone .demo-app-bar{padding:10px 14px}.demo-phone h4{margin:7px 0 15px}.demo-phone .demo-request{padding:12px;min-height:171px}.demo-phone .demo-request-type>span{display:none}.demo-phone .demo-panel-feedback{min-height:32px}.demo-phone-nav{display:flex;justify-content:space-between;font-size:.75rem;color:#929e99;padding-top:16px}.demo-phone-nav>span:first-child{color:#087d59}.demo-phone-home{width:72px;height:4px;border-radius:6px;background:#4a555c;margin:10px auto 8px}.demo-footnote{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 26px;border-top:1px solid #e0e5e8;color:#7a858c;font-size:.75rem;line-height:1.5;background:#fbfcfd}.demo-loading{padding:90px 30px;text-align:center;color:#7c8a9a}.demo-retry{display:block;margin:0 auto 40px;border:0;background:#265dff;color:#fff;padding:12px 24px;border-radius:8px}.demo-render-note{position:absolute;top:70px;left:25px;right:25px;font-size:.875rem;z-index:2;background:#fff;padding:15px;border-radius:8px}.demo-fallback{width:100%;height:100%;object-fit:cover}.demo-menu-layer{position:fixed;inset:0;z-index:20;background:#10182788;backdrop-filter:blur(6px);padding:24px;display:grid;place-items:center}.demo-menu-sheet{background:#fff;border:1px solid #dbe3ec;border-radius:17px;width:min(740px,100%);max-height:calc(100dvh - 80px);overflow:auto;box-shadow:0 20px 80px #111b3b44}.demo-menu-sheet>header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid #e2e7ed}.demo-menu-sheet h3{font-size:1.55rem;margin-top:5px}.demo-menu-intro{padding:20px 24px;display:flex;gap:22px;align-items:center}.demo-menu-intro>img{width:155px;height:155px;image-rendering:pixelated;border:1px solid #e2e7ed;border-radius:10px;flex-shrink:0}.demo-menu-intro p{font-size:.95rem;line-height:1.5}.demo-menu-intro a{display:inline-block;font-size:.9375rem;margin:10px 0;color:#265dff;font-weight:600;padding:6px 0}.demo-menu-intro small{display:block;font-size:.75rem;color:#849099;line-height:1.5}.demo-menu-sheet iframe{width:100%;height:430px;display:block;border:0;border-top:1px solid #e2e7ed}.demo-menu-layer[hidden],#interactive-demo [hidden]{display:none!important}
@media(min-width:1500px){.demo-layout{grid-template-columns:minmax(0,1.8fr) minmax(380px,1fr)}.demo-stage,#demo-canvas{min-height:680px}.demo-console{padding:29px 30px}.demo-pc-panel .demo-app-body{padding:20px}}
@media(max-width:1050px){#interactive-demo{width:calc(100vw - 24px)}.demo-layout{grid-template-columns:minmax(0,1fr) 340px}.demo-console{padding:21px 18px}.demo-call-buttons{gap:5px}.demo-call-buttons button{font-size:.8125rem;gap:4px;padding:7px 5px}.demo-view-tools{left:12px;right:12px;bottom:100px}.demo-view-tools button{font-size:.75rem;padding:8px}.demo-stage-label{left:18px;right:18px;font-size:.7rem}.demo-stage-label>span:first-child{max-width:115px}.demo-header h2{font-size:1.35rem}.demo-header{padding:17px 21px}}
@media(max-width:760px){#interactive-demo{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:14px}.demo-header{padding:15px 17px;gap:10px}.demo-header h2{font-size:1.15rem}.demo-kicker{font-size:.7rem}.demo-layout{display:flex;flex-direction:column}.demo-stage{min-height:480px}#demo-canvas{min-height:480px}.demo-console{padding:23px 20px;border-left:0;border-top:1px solid #dce2e7}.demo-stage-label>span:first-child{max-width:none}.demo-stage-label{top:18px}.demo-view-tools{bottom:90px}.demo-stage-bottom{padding:13px 12px 18px}.demo-stage-bottom>p{font-size:.7rem}.demo-console-intro h3{font-size:1.45rem}.demo-call-buttons button{font-size:.9375rem;gap:7px;min-height:48px}.demo-pc-panel .demo-app-body{padding:18px}.demo-footnote{padding:14px 20px;gap:6px}.demo-menu-layer{padding:13px}.demo-menu-sheet{max-height:calc(100dvh - 45px)}.demo-menu-intro{padding:17px;gap:15px}.demo-menu-intro>img{width:125px;height:125px}.demo-menu-sheet>header{padding:17px}.demo-launch{left:13px;right:13px;bottom:13px;padding:13px 15px;gap:11px}.demo-launch strong{font-size:.95rem}.demo-launch small{font-size:.75rem;margin-top:3px}.demo-launch-icon{width:43px;height:43px;font-size:.875rem}}
@media(max-width:370px){.demo-call-buttons button{font-size:.8125rem;gap:4px}.demo-call-buttons svg{width:17px}.demo-stage,#demo-canvas{min-height:420px}.demo-menu-intro{flex-direction:column;text-align:center}.demo-menu-intro>img{width:160px;height:160px}}
@media(prefers-reduced-motion:reduce){.demo-launch{transition:none}}
/* Carry the subtle cool background into the demo without tinting the device. */
#interactive-demo,.demo-footnote{background:#f5f8fd}
.demo-header{background:#f8fbff}
.demo-console{background:linear-gradient(150deg,#f6f9ff,#fff 75%)}
.demo-stage{background:#dfe7ef}
.demo-stage-bottom{background:linear-gradient(transparent,#edf3fab0)}
@media(min-width:761px){.demo-layout{height:min(700px,calc(100dvh - 183px));min-height:490px}.demo-stage,#demo-canvas{min-height:0}.demo-console{overflow-y:auto;overscroll-behavior:contain}.demo-header{position:relative}.demo-stage-label{top:19px}.demo-view-tools{bottom:91px}.demo-stage-bottom{padding-top:14px;padding-bottom:17px}}