.demo-section{padding-bottom:75px}.demo-meta{display:flex;align-items:center;gap:20px;margin-bottom:28px}.demo-meta .simulation-tag{color:var(--link);border-color:var(--line);background:var(--fog);white-space:nowrap}.demo-meta p{font-size:.76rem;color:var(--muted);max-width:75ch}.demo-layout{display:grid;grid-template-columns:270px minmax(0,1fr);column-gap:45px;row-gap:18px}.demo-story{padding-top:10px}.demo-steps{list-style:none;display:grid;gap:8px}.demo-steps li{display:flex;align-items:center;gap:13px;font-size:.85rem;color:var(--muted);min-height:42px}.demo-steps li>span{height:30px;width:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.75rem;flex-shrink:0}.demo-steps li[aria-current=step]{font-weight:600;color:var(--ink)}.demo-steps li[aria-current=step]>span{background:var(--ink);color:var(--white);border-color:var(--ink)}.demo-steps li.is-complete>span{background:var(--green-soft);border-color:var(--green-line);color:var(--green)}.demo-story>p{font-size:.87rem;color:var(--muted);margin-top:24px;min-height:85px}.demo-controls{display:flex;gap:8px;margin-top:24px}.demo-controls .button{padding:12px 15px;font-size:.8rem;min-height:44px}.demo-aux{display:flex;gap:15px;margin-top:14px;flex-wrap:wrap}.demo-aux button{min-height:44px;border:0;background:none;padding:5px 0;font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px}.demo-aux button:hover{text-decoration:underline}.demo-aux .icon{width:16px;height:16px}.demo-workspace{min-width:0}.demo-perspectives{display:flex;gap:6px;background:var(--fog);padding:6px;border-radius:11px;margin-bottom:15px}.demo-perspectives button{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:8px;min-height:44px;border:1px solid transparent;background:none;border-radius:7px;font-size:.85rem;padding:8px 10px}.demo-perspectives button[aria-pressed=true]{background:var(--selection);border-color:var(--control-line);box-shadow:0 2px 5px var(--shadow-soft);font-weight:600}.demo-perspectives .icon{width:19px;height:19px}.demo-screen{border:1px solid var(--line);border-radius:15px;background:var(--fog);min-height:510px;overflow:hidden}.demo-screen-head{padding:16px 23px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.72rem}.demo-screen-head strong{font-size:.8rem}.demo-content{padding:24px;display:grid;gap:18px}.demo-content h2{font-size:1.6rem}.demo-content h3{font-size:1.05rem}.demo-content p{font-size:.85rem;color:var(--muted)}.static-dish{padding:24px}.static-dish picture{max-width:330px;margin:auto}.static-dish h2{font-size:1.5rem;margin-top:20px}.static-dish p{font-size:.9rem;margin-top:10px}.demo-dish-photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1.65;background:var(--ink)}.demo-dish-photo picture,.demo-dish-photo img,.demo-dish-photo video{width:100%;height:100%;object-fit:cover}.demo-dish-photo video{position:absolute;inset:0}.demo-dish-photo .image-caption{top:12px;left:12px;font-size:.65rem}.demo-dish-photo .video-trigger{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 12px;color:var(--white);background:var(--ink-translucent);border:1px solid var(--photo-border);border-radius:7px;font-size:.75rem}.video-trigger .icon{width:17px;height:17px}.demo-dish-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.like-button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--like);flex-shrink:0}.like-button .icon{height:25px;width:25px}.like-button[aria-pressed=true] .icon{fill:var(--like)}.demo-ingredients{padding:15px 0;border-top:1px solid var(--line)}.demo-ingredients strong{font-size:.8rem}.demo-ingredients p{margin-top:6px}.demo-content .button{font-size:.86rem;min-height:46px}.demo-content .button.primary{justify-self:stretch}.demo-config{display:grid;gap:19px}.demo-fieldset{padding:0;margin:0;border:0;min-width:0}.demo-fieldset legend{font-size:.86rem;font-weight:600;margin-bottom:9px}.demo-radio-group{display:flex;flex-wrap:wrap;gap:8px}.demo-radio-group label{flex:1;display:flex;align-items:center;gap:8px;min-height:44px;padding:11px 13px;background:var(--white);border:1px solid var(--control-line);border-radius:8px;cursor:pointer;font-size:.8rem;min-width:140px}.demo-radio-group label:has(input:checked){border-color:var(--link);box-shadow:inset 0 0 0 1px var(--link);background:var(--selection)}.demo-radio-group input{accent-color:var(--link);margin:0;width:16px;height:16px}.demo-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:.85rem;cursor:pointer}.demo-check input{width:20px;height:20px;accent-color:var(--link)}.demo-price{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:.85rem;padding-top:17px;border-top:1px solid var(--line)}.demo-price strong{font:700 1.35rem var(--display);font-variant-numeric:tabular-nums}.demo-item{padding:18px;border:1px solid var(--line);background:var(--white);border-radius:10px;display:grid;gap:12px}.demo-item-head{display:flex;gap:15px;align-items:center;justify-content:space-between}.demo-item-head h3{font-size:.95rem}.demo-item-role{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:var(--muted)}.demo-item-role .icon{width:16px;height:16px}.demo-item .status{justify-self:start}.demo-item .button{justify-self:start}.demo-empty{padding:30px 15px;background:var(--white);border:1px dashed var(--control-line);border-radius:9px;text-align:center}.demo-helper{padding:14px;background:var(--fog);border-radius:8px;font-size:.8rem!important}.demo-bill-list{list-style:none;display:grid;gap:16px}.demo-bill-list li{display:grid;grid-template-columns:1fr auto;gap:5px 20px;font-size:.9rem}.demo-bill-list small{grid-column:1/-1;color:var(--muted);font-size:.74rem}.demo-bill-list strong{font-variant-numeric:tabular-nums;font-weight:600}.demo-bill-note{font-size:.75rem!important}.demo-tip{font-size:.74rem;color:var(--muted);margin-top:14px}.demo-announcement{font-size:.87rem;color:var(--link);margin-top:20px;min-height:25px}.demo-video-label{font-size:.66rem!important}.demo-screen .status--claimed{background:var(--submitted-soft);color:var(--submitted)}.demo-screen .status--delivered{background:var(--green-soft);color:var(--green)}.demo-screen .status--accepted,.demo-screen .status--queued{background:var(--fog);color:var(--link)}.demo-screen .status--awaiting_waiter,.demo-screen .status--ready{background:var(--green-soft);color:var(--green)}
@media(max-width:950px){.demo-layout{grid-template-columns:240px minmax(0,1fr);gap:30px}.demo-content{padding:20px}.demo-item-head{flex-wrap:wrap}.demo-perspectives button{font-size:.78rem;padding:8px 6px;gap:5px}.demo-controls{flex-direction:column}.demo-controls .button{width:100%}}
@media(max-width:700px){.demo-meta{align-items:flex-start;flex-direction:column;gap:10px}.demo-layout{display:flex;flex-direction:column;gap:25px}.demo-story{display:block;order:0}.demo-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 7px;order:0}.demo-steps li{font-size:.69rem;gap:6px;align-items:center;min-width:0;line-height:1.4}.demo-steps li>span{width:25px;height:25px;font-size:.65rem}.demo-story>p{min-height:0;margin-top:18px}.demo-workspace{order:1;width:100%}.demo-controls{order:3;flex-direction:row;margin-top:0}.demo-controls .button{flex:1;width:auto}.demo-aux{order:4;margin-top:-15px;justify-content:space-between}.demo-screen{min-height:440px}.demo-screen-head{padding:14px 18px}.demo-content{padding:18px;gap:16px}.demo-content h2{font-size:1.5rem}.demo-dish-photo{aspect-ratio:1.15}.demo-perspectives button{font-size:.8rem;gap:6px;flex-wrap:wrap}.demo-perspectives .icon{width:17px;height:17px}.demo-item .button{justify-self:stretch}.demo-section{padding-bottom:50px}.demo-bill-list li{font-size:.85rem}.demo-content .button{font-size:.85rem}.demo-dish-photo .video-trigger{font-size:.7rem}.demo-radio-group label{min-width:120px;padding:11px 10px}.demo-price strong{font-size:1.3rem}}
@media(max-width:380px){.demo-perspectives button{font-size:.72rem}.demo-perspectives .icon{display:none}.demo-screen-head{font-size:.65rem;padding:13px}.demo-content{padding:15px}.demo-item{padding:14px}.demo-steps{gap:8px 4px}.demo-steps li{font-size:.63rem;gap:4px}.demo-steps li>span{width:21px;height:21px;font-size:.58rem}.demo-controls .button{font-size:.78rem;padding:12px 11px}.demo-radio-group{flex-direction:column}.demo-dish-photo .image-caption{font-size:.6rem}.demo-bill-list li{gap:4px 8px}}

html:not(.js) .demo-controls,html:not(.js) .demo-aux,html:not(.js) .demo-perspectives{display:none}.video-label-overlay{position:absolute;top:12px;left:12px;z-index:2;font-size:.62rem;background:var(--ink-translucent);color:var(--white);padding:6px 9px;border-radius:6px;max-width:calc(100% - 24px)}.demo-dish-photo .video-trigger{z-index:3}.demo-dish-photo video{z-index:1}

.video-trigger[hidden]{display:none}.demo-content h2[tabindex="-1"]:focus-visible{outline-offset:5px}

.demo-playback{grid-column:2}
.demo-playback .demo-controls{margin-top:0;justify-content:space-between}
.demo-playback .demo-aux{justify-content:space-between}
.demo-load-error{padding:18px;color:var(--error);background:var(--error-soft);border:1px solid var(--error-line);border-radius:9px;margin-bottom:20px}
.demo-load-error[hidden]{display:none}
.demo-unavailable .demo-playback,.demo-unavailable .demo-perspectives{display:none}
@media(max-width:700px){.demo-playback{order:2}.demo-playback .demo-aux{margin-top:8px}}

html[data-page=demo] .page-intro{max-width:1200px;padding-top:46px;padding-bottom:32px}
html[data-page=demo] .page-intro h1{font-size:clamp(2.3rem,3.7vw,3.4rem)}
html[data-page=demo] .page-intro .lead{max-width:76ch;font-size:1.05rem;margin-top:18px}
@media(min-width:701px){.demo-dish-photo{aspect-ratio:auto;height:260px}}
@media(max-width:700px){html[data-page=demo] .page-intro{padding-top:32px;padding-bottom:26px}.demo-dish-photo{aspect-ratio:1.4}}

.demo-progress-count{display:none}
.demo-content h2{scroll-margin-top:105px}
@media(max-width:700px){
 .demo-story{display:grid;grid-template-columns:1fr auto;gap:10px 15px;align-items:center}
 .demo-steps{display:block}
 .demo-steps li{font-size:.9rem;gap:9px;min-height:32px}
 .demo-steps li:not([aria-current="step"]){display:none}
 .demo-steps li>span{width:30px;height:30px;font-size:.75rem}
 .demo-story>.demo-progress-count{display:block;font-size:.75rem;margin:0;min-height:0}
 .demo-story>[data-narrative]{grid-column:1/-1;margin:0;font-size:.82rem}
}