@font-face{font-family:Shift;src:url(./assets/studio-pixel.ttf) format("truetype");font-display:swap}
:root{color-scheme:light;--paper:#f9ecd2;--cream:#fff5db;--card:#f7dfbe;--ink:#234341;--dark:#173637;--teal:#2f6a63;--blue:#d9ead6;--red:#a53c42;--coral:#ef947e;--rust:#7e343b;--gold:#e6a749;--line:#a87e62;--muted:#665148;--pixel:Shift,monospace;--body:system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:#244d4d}body{margin:0;min-height:100svh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);font:15px/1.4 var(--body);color:var(--ink);background:radial-gradient(ellipse at 58% 8%,#527772,#244d4d 75%)}
h1,h2,h3,p{margin:0}button,input{font:inherit}
button{min-width:44px;min-height:44px;border:1px solid #95715c;border-radius:0;background:#fff3d5;color:var(--dark);padding:5px 6px;font:10px/1.2 var(--pixel);text-transform:uppercase;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:#d66e5755}
button.primary{background:var(--red);color:#fff7dd;border-color:#7f343a;box-shadow:inset 0 -3px #732e36}
button.secondary{background:#31675e;color:#fff7dd;border-color:#204842;box-shadow:inset 0 -3px #264e49}
button:disabled{opacity:.52;cursor:default;box-shadow:none}
button:active:not(:disabled){filter:brightness(.88)}
button:focus-visible,input:focus-visible{outline:2px solid #4c4cc3;outline-offset:-3px}
button[aria-pressed=true]:not(.secondary){background:#cae2cb;border-color:#47766d}
.mast{max-width:1120px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 13px;color:#f6e9cb;font:9px/1.25 var(--pixel);letter-spacing:.055em;text-transform:uppercase}
.wordmark{display:flex;align-items:center;gap:7px}.wordmark:before{content:"";width:11px;height:11px;background:#edb66c;border:3px solid #ba7450;box-shadow:2px 1px #153b3c;box-sizing:border-box;clip-path:polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%)}
.mast-tag{text-align:right}main{width:min(100%,1120px);margin:auto;padding:0 9px}
.cabinet{position:relative;isolation:isolate;background:var(--paper);border:2px solid #e7bd87;box-shadow:0 4px #183e3f,0 15px 44px #112f31a6}
.menu{display:grid;gap:0;padding:6px}.title-art,.machine-frame{position:relative;overflow:hidden;background:#2c6b68;border:1px solid #6d594c}
canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.title-art canvas{aspect-ratio:3/2;object-fit:cover}
.intro{padding:10px 4px 3px}.intro h1{font:clamp(24px,9.3vw,52px)/1.03 var(--pixel);letter-spacing:.025em;text-shadow:2px 2px #dcb394;color:#173939}.intro h1 em{color:#993c41;font-style:normal}
.tagline{margin:5px 0 9px;font-size:clamp(15px,4.5vw,24px);font-weight:600}.blurb{display:none}
.menu-actions,.tools,.flavors,.primary-tools{display:grid;gap:4px}
.menu-actions,.flavors,.primary-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.tools{grid-template-columns:repeat(4,minmax(44px,1fr))}.menu-tools{margin-top:4px}
.menu-actions .wide{grid-column:1/-1}.save-note{font:9px/1.27 var(--pixel);color:var(--teal);padding:5px 2px 0;text-transform:uppercase}
.footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;border-top:1px solid #adbf9b;padding:9px 1px 18px;color:#fff3d8;font-size:12px}.footer span:last-child{font:9px/1.3 var(--pixel);text-align:right}
.field{display:grid;gap:6px;padding:5px}.machine-side,.action-side{min-width:0}
.head{display:flex;justify-content:space-between;align-items:center;gap:5px;min-height:37px;padding:4px 6px;background:#26534f;color:#fff1d0;border:1px solid #193d3b}
.head h2{font:13px/1.12 var(--pixel);text-transform:uppercase}.head p{font:8px/1.3 var(--pixel);margin-top:3px;color:#d4e4c7;text-transform:uppercase}
.head-meter{display:grid;grid-auto-flow:column;align-items:center;gap:5px;white-space:nowrap;color:#ffe8b0}.head-meter span{font:8px/1.25 var(--pixel);text-transform:uppercase}.head-meter strong{font:15px/1 var(--pixel);color:#fff0cc}
.machine-frame{border-top:0}.machine-frame canvas{aspect-ratio:2/1}.belt-label{position:absolute;left:4px;bottom:4px;padding:3px 5px;background:#173f3ddb;color:#f5e6c1;font:8px/1.08 var(--pixel);text-transform:uppercase;pointer-events:none}
.temperature{display:grid;grid-template-columns:minmax(77px,auto) 1fr;gap:6px;align-items:center;min-height:21px;padding:2px 4px;background:#e8cb9b;color:#373f35;font:9px/1.1 var(--pixel);text-transform:uppercase;border:1px solid #b38c65;border-top:0}
.heat-track{height:9px;border:1px solid #8a604a;background:linear-gradient(90deg,#c68369 0 43%,#91b39a 43%);position:relative}
.heat-track::after{position:absolute;left:43%;width:1px;height:100%;top:0;content:"";background:#633c37}
.heat-track i{height:100%;display:block;width:0;background:#86463c}.heat-track.good i{background:#3d7661}
.ticket{border:1px solid #a37c60;background:#fff6d9;margin-bottom:4px;padding:4px 6px;box-shadow:inset 0 -2px #eddbaf}
.ticket-title{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:3px;border-bottom:1px dashed #bb997a;padding-bottom:3px}
.ticket-title h3{font:11px/1.15 var(--pixel);text-transform:uppercase}.ticket-title>span{color:#7f393a;font:9px/1.15 var(--pixel);white-space:nowrap}
.stock{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.stock>div{display:flex;align-items:center;justify-content:space-between;gap:3px;color:#62483f;font-size:12px;min-width:0}
.stock>div:last-child{border-left:1px solid #d8b28b;padding-left:5px}.stock strong{font:11px/1.1 var(--pixel);color:#304943;white-space:nowrap}.stock strong.enough{color:#1e6a55}
.flavors,.primary-tools{margin-bottom:4px}.flavors button[aria-pressed=true]{box-shadow:inset 0 -3px #7fa694}.primary-tools button{font-size:11px}
.field-tools{grid-template-columns:repeat(5,minmax(44px,1fr));gap:3px}.field-tools button{padding-inline:2px;font-size:9px}
.feedback{padding:4px 2px 0;font-size:12px;line-height:1.24;color:#62493d;min-height:17px}
#storage-warning{padding:5px 8px;color:#812e3a;font-size:13px}
.shade{position:fixed;inset:0;z-index:6;display:grid;place-items:center;background:#173031bd;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.dialog{width:min(100%,550px);max-height:min(100%,calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))));overflow:auto;overscroll-behavior:contain;background:var(--paper);border:2px solid #bd8861;box-shadow:4px 4px 0 #183a3a,0 16px 50px #152b2c;scrollbar-color:#96765f #f0dfbf}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;min-height:51px;gap:7px;padding:3px 6px 3px 11px;background:#2a5f56;color:#fff0cf;border-bottom:1px solid #a7815f}
.dialog-head h2{font:14px/1.18 var(--pixel);text-transform:uppercase}
.dialog-body{padding:10px;display:grid;gap:8px}.dialog-body p{line-height:1.32}.dialog-body .fine{font-size:13px;color:var(--muted)}
.dialog-actions{display:flex;gap:4px;flex-wrap:wrap}.dialog-actions button{flex:1 1 91px}
.note,.upgrade{border:1px solid #a9876c;background:#fff4d6;padding:6px 8px;line-height:1.32}
.note>b,.upgrade h3,.caption{display:block;font:10px/1.25 var(--pixel);text-transform:uppercase;color:#813942;margin-bottom:3px}
.upgrade p{font-size:13px;margin-bottom:5px;color:#634d43}.upgrade button{width:100%}.cost-label{font:11px/1.15 var(--pixel);color:var(--teal)}
.score-title{font:22px/1.1 var(--pixel);text-transform:uppercase;color:#913e44}
.volume{display:grid;grid-template-columns:1fr auto;font:11px/1.4 var(--pixel);text-transform:uppercase;gap:3px}.volume input{grid-column:1/-1;width:100%;min-height:44px;margin:0;accent-color:var(--teal);touch-action:pan-y}
.expanded-body{overflow:hidden}.cabinet.expanded,.cabinet:fullscreen{position:fixed;inset:0;width:100%;height:100dvh;z-index:10;border:0;box-shadow:none;background:var(--paper);overflow:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.cabinet.expanded #content,.cabinet:fullscreen #content{width:min(100%,1080px);margin-inline:auto}
.cabinet:fullscreen::backdrop{background:var(--paper)}
@media (orientation:portrait) and (max-height:590px){.title-art canvas{height:min(36dvh,213px)}.mast{padding:5px 8px}.intro{padding-top:7px}.tagline{margin:4px 0 6px}}
@media (orientation:landscape),(min-width:690px){.menu{grid-template-columns:minmax(0,1.26fr) minmax(0,1fr);align-items:center}.intro{padding:12px}.intro h1{font-size:clamp(23px,4.8vw,51px)}.tagline{font-size:clamp(15px,2.35vw,25px)}
.field{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:7px}.action-side{align-self:center}.head h2{font-size:clamp(13px,2.35vw,22px)}}
@media (orientation:landscape) and (max-height:410px){main{padding-inline:5px}.mast{padding:5px 7px}.intro{padding:3px 7px}.tagline{margin:4px 0 6px;line-height:1.19}.title-art canvas{height:clamp(124px,calc(100dvh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),320px)}.footer{display:none}.field .machine-frame canvas{max-height:calc(100dvh - 98px - env(safe-area-inset-top) - env(safe-area-inset-bottom));object-fit:contain}.dialog-body{gap:6px;padding:8px}}
@media (min-width:860px) and (min-height:500px){.mast{padding-block:18px 11px}.menu,.field{padding:9px}.intro{padding:18px}.blurb{display:block;color:#5d5146;margin-bottom:14px;max-width:35ch}.action-side{padding:10px}.head{padding:7px 10px}.ticket{padding:8px 10px}.stock>div{font-size:15px}.ticket-title h3{font-size:15px}.primary-tools button,.field-tools button,.flavors button,.menu-tools button,.menu-actions button{min-height:48px;font-size:11px}.tools,.flavors,.primary-tools{gap:6px}.feedback{font-size:14px}}
@media (max-width:355px){main{padding-inline:6px}.mast-tag{font-size:8px}.flavors button,.field-tools button,.menu-tools button{font-size:8px}.stock>div{font-size:11px}.footer{font-size:11px}}
@media (orientation:landscape) and (max-width:640px){.field-tools button,.flavors button,.menu-tools button{font-size:8px}.intro h1{font-size:clamp(22px,4.6vw,30px)}}

.tray-count{display:flex;align-items:center;gap:3px;flex:none}.pending{color:#775040;background:#f1dbb5;border:1px solid #caa783;font:8px/1.13 var(--pixel);padding:2px 2px;white-space:nowrap}
@media (orientation:landscape) and (max-width:590px){.field{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}}