:root { color-scheme: dark; --ink: #151310; --panel: #201d19; --line: #ffffff1e; --cream: #f7eddc; --soft: #c9b9a4; --orange: #f18b4c; }
body { background: #151310; color: var(--cream); }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 32px; min-height: 76px; padding: 12px max(24px, calc((100vw - 1320px)/2)); border-bottom: 1px solid var(--line); background: #17130fe9; backdrop-filter: blur(14px); }
.wordmark { font: 800 1.55rem/1 'Manrope', sans-serif; letter-spacing: -.08em; text-decoration: none; }.spark { color: var(--orange); margin-left: 3px; }
.topbar nav { display: flex; gap: 5px; margin-left: auto; }.topbar nav a { padding: 9px 13px; border-radius: 7px; color: #d4c5b5; font-size: .78rem; font-weight: 700; text-decoration: none; }.topbar nav a.active, .topbar nav a:hover { background: #f18b4c23; color: #ffb884; }
#pending-pill { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 4px; margin-left: 3px; border-radius: 30px; background: #f18b4c; color: #21170d; font-size: .63rem; }
.codec-return { font-size: .73rem; color: #dfcebb; white-space: nowrap; }.codec-return:hover { color: white; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: center; min-height: 500px; padding: 75px max(24px, calc((100vw - 1320px)/2)); overflow: hidden; background: radial-gradient(circle at 83% 35%, #b45c2f55, transparent 34%), linear-gradient(120deg, #211c18, #151310 62%); }.hero::before { content: ''; position: absolute; right: 10%; bottom: -45%; width: 500px; height: 500px; border: 1px solid #f18b4c30; border-radius: 50%; box-shadow: 0 0 0 70px #f18b4c08, 0 0 0 170px #f18b4c06; pointer-events: none; }
.hero-inner, .hero-display { position: relative; }.overline { color: var(--orange); font-size: .68rem; font-weight: 800; letter-spacing: .17em; }
h1,h2,h3,p { margin-top: 0; }.hero h1 { max-width: 930px; margin: 17px 0 18px; font: 700 clamp(3rem, 6vw, 6.5rem)/.99 Georgia, serif; letter-spacing: -.055em; }.hero h1 em { color: var(--orange); font-style: italic; }.hero p { max-width: 610px; color: #dacbbb; line-height: 1.7; }.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.cta,.ghost { display: inline-flex; justify-content: center; align-items: center; gap: 25px; min-height: 47px; padding: 12px 18px; border: 1px solid var(--orange); border-radius: 5px; background: var(--orange); color: #20140e; font-size: .8rem; font-weight: 800; text-decoration: none; }.cta:hover { background: #ffa36b; }.ghost { background: transparent; color: #ffe3d1; border-color: #f18b4c77; }.ghost:hover { background: #f18b4c22; }.wide { width: 100%; }
.hero-display { display: grid; align-content: center; min-height: 290px; padding: 26px; border: 1px solid #ee9b6870; border-radius: 10px; background: #211912bb; box-shadow: 0 26px 70px #0005; transform: rotate(3deg); }.display-label { display: flex; align-items: center; justify-content: space-between; color: #fac9a5; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }.display-label i { width: 7px; height: 7px; border-radius: 50%; background: #b9e7a1; box-shadow: 0 0 14px #b9e7a1; }.hero-display strong { font: 700 8rem/.95 Georgia, serif; letter-spacing: -.1em; }.hero-display > span { font-size: .75rem; letter-spacing: .22em; }.display-line { height: 1px; margin: 25px 0 18px; background: #f1a06e55; }.hero-display small { color: #cab5a1; }
.demo-strip { display: flex; align-items: center; gap: 16px; padding: 13px max(24px, calc((100vw - 1320px)/2)); border-block: 1px solid #f18b4c2b; background: #33231c; }.demo-strip > span { white-space: nowrap; color: #ffb783; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }.demo-strip p { flex: 1; margin: 0; color: #e3cbb8; font-size: .72rem; }.demo-strip button { border: 0; background: none; color: #ffe0c7; font-size: .72rem; font-weight: 800; }
.feedback { max-width: 1320px; min-height: 0; margin: auto; padding: 0 24px; color: #b7e8a7; font-size: .83rem; }.feedback:not(:empty) { padding-top: 17px; }.feedback.error { color: #ffaaa0; }
.experience { max-width: 1368px; margin: auto; padding: 74px 24px 100px; scroll-margin-top: 82px; }.experience-heading { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 34px; }.experience-heading h2 { margin: 11px 0 9px; font: 700 clamp(2.4rem, 4vw, 4rem)/1.08 Georgia, serif; letter-spacing: -.055em; }.experience-heading p { color: var(--soft); }.step-marker { flex: 0 0 auto; color: var(--orange); font: 700 3rem Georgia, serif; }.step-marker span { color: #806c5c; font-size: 1.2rem; }
.table-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 27px; padding: 14px 18px; border: 1px solid var(--line); background: #211c17; font-size: .82rem; }.table-switch select, .kitchen-toolbar select { padding: 9px 12px; border: 1px solid #f18b4c78; background: #17130f; color: #fff; border-radius: 4px; }.table-switch-note { margin-left: auto; color: #bba996; font-size: .73rem; }
.guest-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 24px; }.menu-head { display: flex; justify-content: space-between; align-items: center; }.menu-head h3 { font: 700 1.8rem Georgia, serif; }.menu-head span { color: #a79281; font-size: .76rem; }.menu-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.menu-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #211d18; }.menu-card img { display: block; width: 100%; height: 195px; object-fit: cover; }.menu-body { padding: 15px; }.menu-body small { color: var(--orange); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.menu-body h4 { margin: 7px 0; font: 700 1.15rem Georgia,serif; }.menu-body p { min-height: 37px; margin-bottom: 14px; color: #bfae9c; font-size: .72rem; }.menu-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.menu-bottom strong { font-size: .82rem; }.menu-bottom button { min-height: 36px; padding: 7px 12px; border: 1px solid #f18b4c88; border-radius: 4px; background: #e88449; color: #21150c; font-size: .7rem; font-weight: 800; }.menu-card.sold-out img { filter: grayscale(1); opacity: .5; }
.order-bag { position: sticky; top: 97px; padding: 23px; border: 1px solid #f18b4c5c; border-radius: 8px; background: #271e18; box-shadow: 0 18px 42px #0005; }.bag-head { border-bottom: 1px solid #ffffff21; padding-bottom: 15px; }.bag-head h3 { margin: 5px 0 0; font: 700 1.7rem Georgia,serif; }.bag-line { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-bottom: 1px solid #ffffff15; font-size: .78rem; }.bag-line button { border: 0; background: none; color: #ffb386; font-size: 1rem; }.bag-empty { padding: 17px 0; color: #b7a797; font-size: .78rem; }.note-label { display: block; margin-top: 17px; font-size: .74rem; font-weight: 800; }.note-label span { color: #ac9a88; font-weight: 400; }.order-bag textarea { width: 100%; min-height: 65px; margin: 8px 0 15px; padding: 10px; resize: vertical; border: 1px solid #ffffff3a; border-radius: 4px; background: #17130f; color: white; }.bag-total { display: flex; justify-content: space-between; gap: 9px; padding: 15px 0; border-top: 1px solid #ffffff2a; }.order-bag > small { display: block; margin-top: 11px; color: #b5a08d; font-size: .67rem; }.guest-success { margin-top: 25px; padding: 23px; border: 1px solid #acd4977d; background: #20301d; }.guest-success > span { display: block; color: #b9ec9e; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }.guest-success > strong { display: block; margin: 8px 0; font: 700 1.8rem Georgia,serif; }.guest-success p { color: #d2e0c9; }.guest-success .cta { width: fit-content; }
.kitchen-toolbar { display: flex; align-items: stretch; gap: 12px; margin-bottom: 20px; }.kitchen-toolbar > div { min-width: 145px; padding: 15px 20px; border: 1px solid var(--line); background: #26221d; }.kitchen-toolbar strong { display: block; font: 700 2rem Georgia,serif; }.kitchen-toolbar span { color: #c4b1a2; font-size: .72rem; }.kitchen-toolbar label { margin-left: auto; color: #cdbeb0; font-size: .7rem; }.kitchen-toolbar select { display: block; min-width: 155px; margin-top: 5px; }.ticket-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }.ticket { display: flex; flex-direction: column; min-height: 260px; padding: 20px; border: 1px solid #f18b4c55; border-top: 3px solid var(--orange); background: #fff9ed; color: #30251e; }.ticket-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; }.ticket-head strong { font: 700 1.5rem Georgia,serif; }.ticket-head span { padding: 5px 8px; border-radius: 30px; background: #efd9bd; font-size: .62rem; font-weight: 800; }.ticket small { display: block; color: #8c7561; }.ticket ul { padding-left: 18px; margin: 16px 0; font-size: .8rem; }.ticket .note { margin: 0 0 12px; padding: 9px; background: #f3e8d6; font-size: .72rem; }.ticket-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: auto; }.ticket-actions button { min-height: 36px; border: 1px solid #482d1f; border-radius: 4px; background: #352820; color: #fff; font-size: .68rem; font-weight: 800; }.ticket-actions button.cancel { background: transparent; color: #613f2e; }.ticket-empty { grid-column: 1/-1; padding: 37px; border: 1px dashed #f18b4c55; color: #ccb9a5; }.ticket-empty strong { display: block; margin-bottom: 7px; color: white; font: 700 1.35rem Georgia,serif; }.ticket-empty a { color: #ffb584; }
.availability { display: grid; grid-template-columns: 1fr 1.4fr; gap: 30px; margin-top: 65px; padding-top: 35px; border-top: 1px solid var(--line); }.availability h3 { margin: 9px 0; font: 700 1.7rem Georgia,serif; }.availability p { color: #bca897; font-size: .8rem; }.availability-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }.availability-row span { font-size: .78rem; }.availability-row button { min-width: 89px; padding: 7px; border: 1px solid #8bbd8070; border-radius: 4px; background: #315235; color: #d9efcf; font-size: .68rem; font-weight: 800; }.availability-row button.off { border-color: #ca766670; background: #50302b; color: #ffcbc0; }
.next-demo { padding: 58px max(24px, calc((100vw - 1320px)/2)); background: #211c18; }.next-demo h2 { max-width: 700px; margin: 11px 0 23px; font: 700 clamp(2rem,4vw,3.7rem) Georgia,serif; letter-spacing: -.05em; }.next-demo > div { display: flex; flex-wrap: wrap; gap: 10px; }.next-demo a { padding: 11px 14px; border: 1px solid #f18b4c77; text-decoration: none; font-size: .78rem; }footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 25px max(24px, calc((100vw - 1320px)/2)); color: #b6a18d; font-size: .72rem; }footer a { color: var(--orange); text-decoration: none; }
@media(max-width:1000px){.hero { grid-template-columns: 1fr 240px; }.guest-layout { grid-template-columns: 1fr; }.order-bag { position: static; }.ticket-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }}
@media(max-width:680px){.topbar { min-height: 66px; padding: 9px 16px; gap: 10px; }.wordmark { font-size: 1.2rem; }.topbar nav { gap: 0; }.topbar nav a { padding: 7px 6px; font-size: .64rem; }.topbar .codec-return { display: none; }.hero { min-height: auto; grid-template-columns: 1fr; padding: 58px 20px; }.hero h1 { font-size: clamp(2.8rem,13vw,4.6rem); }.hero-display { display: none; }.demo-strip { flex-wrap: wrap; gap: 5px 10px; padding: 11px 18px; }.demo-strip p { order: 3; flex-basis: 100%; }.demo-strip button { margin-left: auto; }.experience { padding: 48px 16px 70px; }.experience-heading { margin-bottom: 23px; }.step-marker { display: none; }.table-switch-note { flex-basis: 100%; }.menu-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.menu-card img { height: 116px; }.menu-body { padding: 10px; }.menu-body h4 { font-size: .94rem; }.menu-body p { font-size: .66rem; min-height: 53px; }.menu-bottom { align-items: start; flex-direction: column; }.menu-bottom button { width: 100%; }.ticket-grid { grid-template-columns: 1fr; }.kitchen-toolbar { flex-wrap: wrap; }.kitchen-toolbar > div { flex: 1; min-width: 0; }.kitchen-toolbar label { margin-left: 0; width: 100%; }.availability { grid-template-columns: 1fr; gap: 10px; }.next-demo { padding: 50px 20px; }}