:root{
  --green:#0b3d2e;
  --green-2:#123f31;
  --cream:#efe5d2;
  --paper:#d8b47c;
  --paper-2:#c69a60;
  --ink:#1c211e;
  --soft:#f7f1e7;
  --line:rgba(11,61,46,.22);
  --shadow:0 22px 55px rgba(26,24,18,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 18% 8%, rgba(214,180,124,.35), transparent 28%),
    linear-gradient(180deg,#f6efe3 0%,#e9ddc8 100%);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(11,61,46,.05) 1px, transparent 1px),linear-gradient(90deg,rgba(11,61,46,.05) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 70%);
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.11;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,4vw,58px);background:rgba(247,241,231,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:var(--cream);font:900 18px/1 Georgia,serif;box-shadow:inset 0 0 0 2px rgba(239,229,210,.18)}
.brand-copy{display:grid}.brand-copy strong{font-size:13px;letter-spacing:.08em;text-transform:uppercase}.brand-copy small{font:700 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:#486154}
.status{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#4c6256}.status span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1a7f5a;margin-right:8px;box-shadow:0 0 0 5px rgba(26,127,90,.11)}
.shell{width:min(1180px,calc(100% - 28px));margin:34px auto 50px}
.card{border:1px solid var(--line);box-shadow:var(--shadow)}
.counter-grid{display:grid;grid-template-columns:1.1fr .95fr .65fr;gap:18px;align-items:stretch}
.mascot-card{position:relative;min-height:610px;overflow:hidden;background:#b99466;border-radius:28px 8px 28px 8px;transform:rotate(-.45deg)}
.mascot-card img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9) contrast(1.02)}
.mascot-card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.tape{position:absolute;z-index:3;width:112px;height:31px;background:rgba(238,224,190,.78);box-shadow:0 2px 5px rgba(0,0,0,.08)}.tape-a{left:22px;top:18px;transform:rotate(-5deg)}.tape-b{right:18px;bottom:72px;transform:rotate(7deg)}
.photo-note{position:absolute;left:20px;bottom:20px;z-index:4;background:var(--soft);border:1px solid var(--green);padding:10px 13px;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;transform:rotate(-1.5deg)}
.menu-board{border-radius:8px 28px 8px 28px;background:var(--green);color:var(--cream);padding:34px;display:flex;flex-direction:column;min-height:610px}
.menu-kicker{font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:#b9ccb9;margin-bottom:auto}
.menu-board h1{margin:36px 0 10px;font:800 clamp(48px,6vw,82px)/.83 Georgia,"Times New Roman",serif;letter-spacing:-.055em}.menu-board h1 em{font-weight:400;color:var(--paper)}
.ticker{margin:2px 0 22px;font:800 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#fff}
.rule{height:1px;background:rgba(239,229,210,.25);margin-bottom:18px}
.menu-lines{display:grid;grid-template-columns:1fr auto;gap:11px 18px;font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}.menu-lines span{color:#c8d7cf}.menu-lines b{color:var(--paper);text-align:right}
.microcopy{margin:28px 0 0;max-width:34ch;font-size:12px;line-height:1.5;color:#b9cbbf}
.action-stack{display:grid;background:var(--paper);border-radius:24px 24px 7px 24px;overflow:hidden;min-height:610px}
.action{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:22px;color:var(--green);text-decoration:none;border-bottom:1px dashed rgba(11,61,46,.35);transition:.18s ease}.action:last-child{border-bottom:0}.action span{font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.55}.action strong{font:900 18px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.04em}.action i{font-style:normal;font-size:24px}.action:hover{background:var(--cream);padding-left:27px}
.chart-card{margin-top:18px;border-radius:7px 30px 30px 7px;background:var(--soft);padding:28px 30px;overflow:hidden}
.chart-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.chart-head small{font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#557062}.chart-head h2{margin:4px 0 0;font:800 clamp(28px,4vw,48px)/1 Georgia,serif;color:var(--green)}.beans{color:var(--paper-2);letter-spacing:8px}
.chart-wrap{height:310px;margin-top:22px;border:1px solid rgba(11,61,46,.18);background:linear-gradient(180deg,rgba(214,180,124,.12),rgba(11,61,46,.03));border-radius:20px 5px 20px 5px;padding:16px;overflow:hidden}.chart-wrap svg{width:100%;height:100%}.gridlines path{stroke:rgba(11,61,46,.09);stroke-width:1}.area{fill:url(#fill)}.line{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.dot{fill:var(--paper);stroke:var(--green);stroke-width:4}
.chart-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#5d7067}.chart-foot button{border:0;background:var(--green);color:var(--cream);padding:12px 16px;border-radius:999px;font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
.receipt{width:min(420px,100%);margin:18px 0 0 auto;background:#fffaf1;border-radius:4px;padding:28px 30px;transform:rotate(.6deg);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.receipt-title{text-align:center;font-weight:900;letter-spacing:.08em}.receipt p{font-size:12px;line-height:1.7}.dash{border-top:1px dashed #6c746f;margin:18px 0}.receipt-small{color:#69766f}.receipt-total{display:flex;justify-content:space-between;font-size:14px;margin:22px 0}.barcode{height:44px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 12px,transparent 12px 15px)}
footer{width:min(1180px,calc(100% - 28px));margin:0 auto 30px;display:flex;justify-content:space-between;gap:20px;color:#53665d;font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase}
.toast{position:fixed;right:20px;bottom:20px;background:var(--green);color:var(--cream);padding:12px 15px;border-radius:999px;font:800 11px ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:900px){.counter-grid{grid-template-columns:1fr 1fr}.mascot-card{grid-row:span 2}.action-stack{min-height:auto;grid-column:2}.menu-board{min-height:450px}.mascot-card{min-height:720px}}
@media(max-width:680px){.status{display:none}.shell{margin-top:18px}.counter-grid{grid-template-columns:1fr}.mascot-card,.menu-board,.action-stack{grid-column:auto;grid-row:auto;min-height:auto}.mascot-card{height:72vh;max-height:660px}.menu-board{padding:28px;min-height:520px}.action-stack{display:block}.action{min-height:86px}.chart-card{padding:22px 16px}.chart-wrap{height:240px}.chart-foot{align-items:flex-start;flex-direction:column}footer{flex-direction:column}.brand-copy strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}