/* No Bones Cooks. Pale pass, dark kitchen, one coral, one cyan.
   One system. Anything live plays in a WINDOW: dark, --r corners, a hairline. Anything printed is PAPER: --paper, square, an ink line.
   One button. .cta is the main action: ink on the pale pages, cyan in the kitchen, coral only to send the order.
   A choice is the same button outlined, and it fills once chosen. */
:root{--bg:#efeee8;--ink:#0b0d12;--muted:#4b4e57;--co:#ff4f47;--co-ink:#c2231a;--cy:#35e3ee;--win:#090b0f;--lite:#eafffb;--litem:rgba(234,255,251,.74);--line:rgba(234,255,251,.18);--paper:#fbf9f2;--r:14px;--edge:rgba(234,255,251,.45);
  --disp:"Clash Display","Helvetica Neue",Arial,sans-serif;--text:Switzer,system-ui,-apple-system,"Segoe UI",sans-serif;--type:"Special Elite","Courier New",monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip}
[hidden]{display:none!important}
a{color:inherit}
img,svg{max-width:100%}
:where(button){font:inherit;color:inherit}
ul,ol{list-style:none}
.wrap{padding:0 clamp(16px,4vw,56px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.js-only{display:none}.js .js-only{display:inline}
.skip{position:fixed;left:12px;top:-60px;z-index:9;background:var(--ink);color:var(--bg);padding:12px 16px;font-weight:600;transition:top .15s}.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--co-ink);outline-offset:3px}
.kitchen :focus-visible,.order :focus-visible,.foot :focus-visible,.bar :focus-visible{outline-color:var(--cy)}
.order .ticket :focus-visible,.bar.on-pale :focus-visible{outline-color:var(--co-ink)}

/* ---------- small parts ---------- */
.mark{display:inline-flex;align-items:center;gap:.5em;font:600 clamp(18px,1.5vw,22px)/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
/* the logo: the chef's head in its hat. White everywhere, with an ink outline only where the ground is pale. */
.logo{width:2em;height:2em;flex:none;margin:-.6em 0 -.45em;overflow:visible}
.bar,.foot,.kitchen,.order{--mark-line:transparent}.bar.on-pale{--mark-line:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:15px 18px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;border-radius:3px;cursor:pointer;transition:background .2s,color .2s}
.cta::before{content:"";width:8px;height:8px;background:var(--co);flex:none}
.cta:hover{background:var(--co);color:var(--ink)}.cta:hover::before{background:var(--ink)}
.cta.glow{background:var(--cy);color:#06181a}.cta.glow::before{background:#06181a}.cta.glow:hover{background:#fff}
.short{display:none}
.eyebrow{display:flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--co)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.45;max-width:46ch}
.link{background:none;border:0;border-bottom:1.5px solid currentColor;padding:2px 0;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.link:hover{color:var(--cy)}.pale .link:hover{color:var(--co-ink)}
.tag{color:var(--lite);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:9px;pointer-events:none}
.small{font-size:13px;line-height:1.45}
/* a choice: the design tabs, the chef's orders, the deck's arrows, "Add" on the menu, the answers on the ticket */
:where(.tabs label,.keys button,.deck-nav button,.add,.checks label){display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--edge);border-radius:3px;background:none;font:600 13px/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
@media (hover:hover){
  .tabs label:hover,.keys button:hover,.deck-nav button:hover:not(:disabled){border-color:var(--cy);color:var(--cy)}
  .add:hover,.checks label:hover{background:rgba(11,13,18,.1)}
}
.tabs input:checked+label,.keys button[aria-pressed="true"]{background:var(--cy);border-color:var(--cy);color:#06181a}
.add[aria-pressed="true"],.checks label:has(input:checked){background:var(--ink);color:var(--paper)}
.pale,.ticket{--edge:var(--ink)}

/* ---------- the bar that follows you ---------- */
.bar{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,56px) 34px;color:var(--lite);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s,color .3s;background:linear-gradient(to bottom,var(--win) calc(100% - 22px),rgba(9,11,15,0))}
.bar>*{pointer-events:auto}
.bar.show,.live.open .bar{opacity:1;visibility:visible}
.bar.on-pale{color:var(--ink);background:linear-gradient(to bottom,var(--bg) calc(100% - 22px),rgba(239,238,232,0))}
.bar.on-pale .cta.glow{background:var(--ink);color:var(--bg)}.bar.on-pale .cta.glow::before{background:var(--co)}
.bar.on-pale .cta.glow:hover{background:var(--co);color:var(--ink)}

/* ---------- the pass (first screen) ---------- */
header{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(20px,5vw,90px);padding:26px 0 0}
.tagline{font-size:clamp(17px,1.5vw,22px);line-height:1.25;max-width:27ch}
nav{display:flex;align-items:center;gap:22px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
nav a{text-decoration:none}
.hero{min-height:100svh;display:flex;flex-direction:column;padding-bottom:18px}
h1{font:500 clamp(40px,7.05vw,112px)/.98 var(--disp);letter-spacing:-.025em;margin:clamp(20px,4.4vh,48px) 0 clamp(16px,3vh,30px)}
.slot{position:relative;flex:1;min-height:340px}
.stage{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--win)}
.stage canvas{display:block;width:100%;height:100%}
.stage .still{position:absolute;inset:0;display:none;place-items:center}.stage .still>div{width:min(40%,240px)}
.no-gl .stage canvas{display:none}.no-gl .stage .still{display:grid}
html:not(.js) .stage canvas{display:none}html:not(.js) .stage .still{display:grid}html:not(.js) #hint{display:none}
.slot>.tag{position:absolute;z-index:2}
.tag.tl{left:20px;top:18px}.tag.bl{left:20px;bottom:18px;color:var(--litem)}.tag.br{right:20px;bottom:18px;color:var(--litem)}
.slot>.tag.bl{max-width:calc(100% - 40px);line-height:1.5}
.tag.tl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--co)}
.peek{position:absolute;right:clamp(6px,1.6vw,28px);bottom:calc(100% - 6px);width:clamp(96px,11vw,168px);height:clamp(93px,10.4vw,159px);overflow:hidden;pointer-events:none}
.peek>div{pointer-events:auto}
.marks{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;padding:14px 0 0;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.marks span{font-size:20px;font-weight:400;line-height:1}
.marks span:nth-child(2),.marks span:nth-child(4){text-align:center}.marks b{text-align:center;font-weight:600;white-space:nowrap}.marks span:last-child{text-align:right}

/* ---------- the kitchen: dark by itself when nothing is live; see-through once the stage is behind it ---------- */
.kitchen{position:relative;z-index:2;background:var(--win);color:var(--lite)}
.live .kitchen{background:none}
.live .lead{min-height:40vh}
.row{display:grid;align-content:center;max-width:min(52vw,820px);padding:44px 0;border-top:1px solid var(--line);transition:opacity .45s}
.row .in{display:grid;gap:14px}
.live .row{min-height:66vh;padding:0;opacity:.66}
.live .row.on{opacity:1}
.row .top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.row .n{font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--cy)}
.row h3{font:500 clamp(40px,6.2vw,96px)/.95 var(--disp);letter-spacing:-.025em}
.row .price{font:400 clamp(16px,1.35vw,20px)/1 var(--type);color:var(--co);white-space:nowrap}
.pr{font-family:var(--type);font-style:normal}
.row p{font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--litem);max-width:36ch}
.finale{min-height:70svh;display:flex;flex-direction:column;justify-content:center;gap:28px;max-width:min(52vw,820px)}
.finale h2{font:500 clamp(40px,6.2vw,96px)/.95 var(--disp);letter-spacing:-.025em}
.finale small{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--litem)}
.plate{display:none}
.live .finale{min-height:100svh}
.pre .stage,.live .stage{position:fixed;inset:0;z-index:1;border-radius:0;clip-path:inset(50%)}
.pre .slot{background:var(--win);border-radius:var(--r)}
.live .stage canvas{width:100vw;height:100vh}

/* ---------- a course's live demo: it sits straight on the kitchen, and the sample plays in a window like the first screen's ---------- */
.demo{position:relative;--pad:clamp(16px,4vw,56px);background:var(--win);margin:0 calc(-1*var(--pad)) clamp(40px,8vh,90px);padding:clamp(20px,4vh,44px) var(--pad) clamp(40px,8vh,90px)}
/* the picture made of points melts away behind a demo, rather than being cut by its edge */
.live :is(.demo,.k2)::before,.live .demo::after{content:"";position:absolute;left:0;right:0;height:14vh;pointer-events:none}
.live .demo::before{bottom:100%;background:linear-gradient(to bottom,rgba(9,11,15,0),var(--win))}
.live .demo::after{top:100%;background:linear-gradient(to top,rgba(9,11,15,0),var(--win))}
.live .k2::before{bottom:0;background:linear-gradient(to bottom,rgba(9,11,15,0),var(--win))}
/* on a wide screen the order section is see-through, so the chef can fall back behind the typewriter rather than be covered */
@media (min-width:861px){.live .order.tw-on{background:none}.live .k2:has(+ .order.tw-on)::before{display:none}}
.demo-head{display:grid;gap:14px;margin-bottom:clamp(20px,3vw,36px)}
.demo-head .eyebrow{color:var(--cy)}
.demo-head h4,.masc-side h4{font:500 clamp(28px,3.3vw,52px)/1.02 var(--disp);letter-spacing:-.02em;max-width:18ch}
.demo .lede{color:var(--litem)}
.note{margin-top:18px;color:var(--litem);font-size:15px}

/* 01 websites: one page, three designs */
/* the sample is kept small and the demo is see-through, so the picture made of points keeps playing round it */
.browser{max-width:680px}
@media (min-width:861px){
  .live .demo.web{background:linear-gradient(to bottom,rgba(9,11,15,0),rgba(9,11,15,.42) 14%,rgba(9,11,15,.42) 86%,rgba(9,11,15,0))}
  .live .demo.web::before,.live .demo.web::after{display:none}
}
.looks{display:grid;grid-template-columns:minmax(190px,250px) 1fr;gap:clamp(16px,2.6vw,40px);align-items:start}
.tabs{border:0;display:grid;gap:10px;min-width:0}
.tabs label{display:flex;justify-content:space-between;padding:17px 18px}
.tabs label span{color:var(--litem)}
.tabs label b{font-weight:600}
.tabs input:checked+label span{color:inherit}
.tabs input:focus-visible+label{outline:2px solid var(--cy);outline-offset:3px}
.brief{margin-top:10px;font-size:14px;line-height:1.45;color:var(--litem)}
.brief b{color:var(--lite)}
.browser{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#12161d;container-type:inline-size;min-width:0}
.chrome{display:flex;align-items:center;gap:7px;padding:10px 14px}
.chrome i{width:9px;height:9px;border-radius:50%;background:rgba(234,255,251,.28)}
.chrome span{margin-left:12px;font-size:12px;color:var(--litem);background:rgba(0,0,0,.3);padding:4px 12px;border-radius:99px}
.mock{position:relative;display:grid;aspect-ratio:16/10;overflow:hidden;grid-template-columns:1.15fr .85fr;grid-template-rows:auto 1fr auto;grid-template-areas:"nav nav" "copy art" "feats feats";column-gap:4cqw;padding:3cqw 4.4cqw 2.6cqw;background:#f3ecdf;color:#1f2a22;font-family:Zodiak,Georgia,serif}
.mock p{margin:0}
.m-nav{grid-area:nav;display:flex;gap:3cqw;align-items:baseline;font-size:1.35cqw;letter-spacing:.14em;text-transform:uppercase;padding-bottom:1.5cqw;border-bottom:1px solid currentColor;font-family:var(--text);font-weight:500}
.m-nav b{margin-right:auto;font-family:Zodiak,Georgia,serif;font-size:2.2cqw;letter-spacing:0;text-transform:none;font-weight:700}
.m-copy{grid-area:copy;align-self:center}
.m-kick{font-family:var(--text);font-weight:600;font-size:1.25cqw;letter-spacing:.16em;text-transform:uppercase;color:#99502a}
.m-h{font-size:6.8cqw;line-height:1;letter-spacing:-.02em;margin:1.6cqw 0 2cqw!important;font-weight:400}
.m-p{font-family:var(--text);font-size:1.75cqw;line-height:1.45;max-width:31ch}
.m-btn{display:inline-block;margin-top:2.6cqw;font-family:var(--text);font-weight:600;font-size:1.6cqw;border-bottom:.22cqw solid #99502a;padding-bottom:.4cqw}
.m-art{grid-area:art;position:relative;align-self:end;justify-self:center;width:76%;aspect-ratio:3/4;margin-top:2.4cqw}
.m-art i{position:absolute}
.m-art i:nth-child(1){inset:0;border-radius:999px 999px 0 0;background:#b85f32}
.m-art i:nth-child(2){left:20%;right:20%;top:24%;aspect-ratio:1;border-radius:50%;background:#f3ecdf}
.m-art i:nth-child(3){left:31%;right:31%;top:32.2%;aspect-ratio:1;border-radius:50%;background:#2b1a10}
.m-feats{grid-area:feats;display:flex;gap:4cqw;font-size:1.6cqw;font-style:italic;border-top:1px solid currentColor;padding-top:1.3cqw;margin-top:1.6cqw}
/* design 2: loud */
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .mock{background:#ffc928;color:#0d0d0d;font-family:var(--disp);grid-template-columns:1fr;grid-template-areas:"nav" "copy" "feats";padding:0 0 2.4cqw}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-nav{background:#0d0d0d;color:#ffc928;padding:1.7cqw 4.4cqw;border:0;font-weight:600}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-nav b{font-family:var(--disp);font-weight:600;text-transform:uppercase;font-size:2cqw}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-copy{padding:0 4.4cqw;position:relative;z-index:1}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-kick{color:#0d0d0d}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-h{font-size:9.4cqw;line-height:.86;text-transform:uppercase;font-weight:600;letter-spacing:-.03em;max-width:8.6ch;margin:1.2cqw 0 1.8cqw!important}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-p{font-weight:500;max-width:27ch}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-btn{background:#0d0d0d;color:#ffc928;border:0;padding:1.3cqw 2.2cqw;text-transform:uppercase;letter-spacing:.08em;margin-top:1.8cqw;font-size:1.4cqw}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-art{position:absolute;right:-5cqw;top:10cqw;width:42cqw;aspect-ratio:1;margin:0}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-art i:nth-child(1){border-radius:50%;background:#0d0d0d}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-art i:nth-child(2){left:-10%;right:auto;width:44%;top:60%;border-radius:0;background:#ff4f47;transform:rotate(-12deg)}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-art i:nth-child(3){left:30%;right:30%;top:30%;background:#ffc928}
.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-feats{padding:1.4cqw 4.4cqw 0;border-top:.5cqw solid #0d0d0d;font-style:normal;font-family:var(--text);font-weight:600;font-size:1.35cqw;text-transform:uppercase;letter-spacing:.1em}
/* design 3: night */
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .mock{background:#07090d linear-gradient(rgba(53,227,238,.07) 1px,transparent 1px) 0 0/5cqw 5cqw;color:#d8fff6;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;grid-template-columns:.8fr 1.2fr;grid-template-areas:"nav nav" "art copy" "feats feats"}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .mock::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(53,227,238,.07) 1px,transparent 1px) 0 0/5cqw 5cqw;pointer-events:none}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-nav{border-color:rgba(53,227,238,.4);font-family:inherit}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-nav b{font-family:inherit;font-size:1.8cqw}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-nav b::before{content:"> ";color:#35e3ee}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-kick{color:#35e3ee;font-family:inherit;font-weight:400}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-h{font-size:4.9cqw;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-h::after{content:"";display:inline-block;width:.5em;height:.86em;background:#35e3ee;margin-left:.16em;vertical-align:-.08em;animation:caret 1.1s steps(1) infinite}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-p{font-family:inherit;font-size:1.5cqw;color:#9cc4be}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-btn{font-family:inherit;font-weight:700;border:1px solid #35e3ee;color:#35e3ee;padding:1.2cqw 2cqw;box-shadow:0 0 2.6cqw rgba(53,227,238,.35);font-size:1.4cqw}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-art{width:74%;aspect-ratio:1;align-self:center;margin:0}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-art i{background:none;border:1px solid #35e3ee;border-radius:50%;inset:0;left:0;right:0;top:0}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-art i:nth-child(2){inset:17%;border-color:#ff4f47;border-style:dashed}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-art i:nth-child(3){inset:34%;background:#35e3ee;box-shadow:0 0 6cqw rgba(53,227,238,.5)}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-feats{font-style:normal;border-color:rgba(53,227,238,.4);color:#9cc4be;font-size:1.35cqw}
.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-feats li::before{content:"+ ";color:#ff4f47}
@keyframes caret{50%{opacity:0}}
.browser{position:relative}
.wipe{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--cy) 0 88%,var(--co) 88%);transform:translateX(-101%)}
/* a narrow browser: the sample page stacks like a phone */
@container (max-width:560px){
  .mock,.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .mock{aspect-ratio:4/5;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"nav" "copy" "art";padding:5cqw 6cqw 0}
  .looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .mock{aspect-ratio:4/5;grid-template-rows:auto auto 1fr;grid-template-areas:"nav" "copy" "art";padding:0}
  .m-nav{font-size:2.6cqw;padding-bottom:3cqw}.m-nav span{display:none}.m-nav b,.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-nav b,.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-nav b{font-size:4.4cqw}
  .looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-nav{padding:3.4cqw 6cqw}.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-copy{padding:0 6cqw}
  .m-copy{align-self:start;padding-top:5cqw}
  .m-kick{font-size:2.6cqw}
  .m-h{font-size:12cqw}.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-h{font-size:15cqw}.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-h{font-size:8.6cqw}
  .m-p,.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-p{font-size:3.5cqw}
  .m-btn,.looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-btn,.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-btn{font-size:3.1cqw;margin-top:4.4cqw}
  .looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-btn{padding:2.6cqw 4cqw}.looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-btn{padding:2.4cqw 3.6cqw}
  .m-art{width:46%;justify-self:end;align-self:end;margin:0}
  .looks:is([data-look="2"],:not([data-look]):has(#look2:checked)) .m-art{right:-12cqw;top:auto;bottom:-14cqw;width:62cqw}
  .looks:is([data-look="3"],:not([data-look]):has(#look3:checked)) .m-art{width:44%;justify-self:end;align-self:end;margin:0 0 5cqw}
  .m-feats{display:none}
}

/* 02 mascots: the logo, and what it became */
.masc{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(18px,3vw,48px);align-items:center}
.masc-stage{position:relative;aspect-ratio:16/11;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;background:radial-gradient(52% 46% at 66% 86%,rgba(53,227,238,.2),transparent 72%),radial-gradient(40% 46% at 24% 50%,rgba(255,79,71,.14),transparent 70%),#06080b}
.masc-stage .badge{position:absolute;left:9%;top:50%;width:34%;height:auto;aspect-ratio:1;--mark-line:transparent;transform:translateY(-50%) rotate(-7deg) scale(.9);opacity:.38;transition:transform .7s cubic-bezier(.3,.8,.2,1),opacity .6s}
.masc-stage .ghost{position:absolute;right:13%;bottom:3%;width:33%;transition:transform .75s cubic-bezier(.55,-.2,.3,1),opacity .35s .3s}
.masc-stage.in .badge{transform:translateY(-50%) rotate(0) scale(1.04);opacity:1}
.masc-stage.in .ghost{transform:translate(-128%,-14%) scale(.26) rotate(-20deg);opacity:0;pointer-events:none}
.masc-stage .tag{position:absolute;left:20px;top:18px;bottom:auto;color:var(--litem)}
.masc-side{display:grid;gap:8px}
.keys{display:flex;flex-wrap:wrap;gap:12px}
.keys button{padding:16px 18px}

/* 03 films */
.reels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.screen{position:relative;aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;place-content:center;container-type:inline-size}
.reel figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:12px;font-size:15px;color:var(--litem)}
.reel figcaption b{color:var(--lite);font-weight:600;margin-right:6px}
.wm-stage{background:var(--bg);color:var(--ink)}
.wm{font:600 14cqw/.86 var(--disp);letter-spacing:-.02em;text-transform:uppercase;text-align:center}
.wm .wl{display:block;white-space:nowrap}
.wm .ch{display:inline-block;transform-origin:50% 100%;position:relative}
.wm .ch.eye i{position:absolute;left:50%;top:50%;width:.2em;height:.2em;margin:-.1em 0 0 -.1em;border-radius:50%;background:var(--co);opacity:0}
.wm-sub{font-weight:600;font-size:2.3cqw;letter-spacing:.16em;text-transform:uppercase;margin-top:3.4cqw;text-align:center;padding-top:2.6cqw;position:relative}
.wm-sub::before{content:"";position:absolute;left:50%;top:0;width:12cqw;height:.7cqw;margin-left:-6cqw;background:var(--co)}
.play .wm .ch{animation:drop .78s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*55ms)}
.play .wm .ch.eye{animation:drop .78s cubic-bezier(.2,.9,.25,1) both,blink 3.6s 1.9s both;animation-delay:calc(var(--i)*55ms),1.9s}
.play .wm .ch.eye i{animation:pupil 3.6s 1.25s both}
.play .wm-sub{animation:rise .6s 1.15s both}.play .wm-sub::before{animation:swipe .5s 1.05s both}
@keyframes drop{0%{transform:translateY(-190%) scale(.7,1.5);opacity:0}45%{transform:translateY(0) scale(1.28,.62);opacity:1}68%{transform:scale(.9,1.14)}84%{transform:scale(1.05,.95)}100%{transform:none;opacity:1}}
@keyframes pupil{0%{opacity:0;transform:scale(0)}8%,100%{opacity:1;transform:none}26%,38%{opacity:1;transform:translateX(-.11em)}52%,66%{opacity:1;transform:translateX(.11em)}80%{opacity:1;transform:none}}
@keyframes blink{0%,84%,100%{transform:none}88%{transform:scaleY(.12)}92%{transform:none}95%{transform:scaleY(.12)}}
@keyframes rise{from{opacity:0;transform:translateY(40%)}}
@keyframes swipe{from{transform:scaleX(0)}}
.film-still{background:radial-gradient(60% 80% at 22% 90%,rgba(255,79,71,.5),transparent 70%),radial-gradient(60% 80% at 84% 8%,rgba(53,227,238,.42),transparent 70%),#05070a}
.badge-spin{width:46%;animation:spin 22s linear infinite;grid-area:1/1}
.badge-spin text{font:600 13.4px var(--text);letter-spacing:.2em;text-transform:uppercase;fill:var(--lite)}
.film-still .tri{width:11%;fill:var(--lite);grid-area:1/1;margin-left:1%}
@keyframes spin{to{transform:rotate(360deg)}}

/* 04 decks */
.slides{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--r);overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide:last-child{scroll-snap-align:end}
.slide{position:relative;flex:0 0 min(86%,900px);aspect-ratio:16/9;scroll-snap-align:start;border-radius:var(--r);overflow:hidden;container-type:inline-size;padding:5cqw 6cqw;display:flex;flex-direction:column;justify-content:flex-end;gap:1.6cqw;background:var(--bg);color:var(--ink);transition:opacity .4s}
.js .slide:not(.on){opacity:.42}
.s-k{position:absolute;left:6cqw;top:5cqw;font-weight:600;font-size:1.6cqw;letter-spacing:.14em}
.s-h{font:500 7.4cqw/.98 var(--disp);letter-spacing:-.025em;max-width:12ch}
.s-p{font-size:2.3cqw;line-height:1.35;max-width:30ch}
.s2{background:var(--co)}
.s-big{position:absolute;right:5cqw;bottom:-7cqw;font:600 56cqw/.8 var(--disp);letter-spacing:-.04em}
.s3{background:#06080b;color:var(--lite)}
.s3 .s-h{max-width:10ch}
.bars{position:absolute;right:6cqw;bottom:5cqw;top:14cqw;width:42%;display:flex;align-items:flex-end;gap:2.2cqw;border-bottom:1px solid var(--line)}
.bars i{flex:1;background:var(--cy);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.bars i:nth-child(1){height:28%}.bars i:nth-child(2){height:46%;transition-delay:.08s}.bars i:nth-child(3){height:38%;transition-delay:.16s}.bars i:nth-child(4){height:70%;transition-delay:.24s}.bars i:nth-child(5){height:96%;background:var(--co);transition-delay:.32s}
.js .slide:not(.on) .bars i{transform:scaleY(.04)}
.s4 .s-h{max-width:8ch}
.blob{position:absolute;right:9cqw;top:50%;width:30cqw;aspect-ratio:1;margin-top:-15cqw;background:var(--ink);border-radius:42% 58% 63% 37%/45% 40% 60% 55%;animation:morph 7s ease-in-out infinite;display:flex;justify-content:center;align-items:center;gap:4cqw}
.blob i{width:4.2cqw;height:6cqw;border-radius:50%;background:var(--cy);animation:eyes 4.2s infinite}
@keyframes morph{33%{border-radius:60% 40% 38% 62%/58% 62% 38% 42%;transform:rotate(8deg) scale(1.04)}66%{border-radius:38% 62% 55% 45%/40% 52% 48% 60%;transform:rotate(-6deg) scale(.97)}}
@keyframes eyes{0%,90%,100%{transform:none}94%{transform:scaleY(.1)}}
.s5{background:var(--ink);color:var(--lite)}
.s5 .cta{align-self:flex-start;margin-top:1cqw}
.deck-nav{display:flex;align-items:center;gap:18px;margin-top:16px;font-weight:600;font-size:13px;letter-spacing:.14em}
.deck-nav button{width:46px;height:46px;justify-content:center;font-size:18px;letter-spacing:0}
.deck-nav button:disabled{opacity:.35;cursor:default}
html:not(.js) :is(.deck-nav,.keys,#masc-hint,#wm-replay){display:none}

/* ---------- the pale pages: one sheet laid over the kitchen, with the first screen's marks at each edge ---------- */
.pale{position:relative;z-index:3;background:var(--bg);color:var(--ink);border-radius:28px;margin-top:-28px}
.pale>.wrap>.marks{padding:22px 0}
.k2{margin-top:-28px;padding-top:28px}
.pale h2{font:500 clamp(40px,5.6vw,88px)/.96 var(--disp);letter-spacing:-.025em}
.pale .eyebrow{margin-bottom:18px}
.pale .lede{color:var(--muted)}

.how{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,6vw,110px);padding-top:clamp(50px,10vh,120px);padding-bottom:clamp(40px,8vh,90px)}
.how-side{position:sticky;top:16vh;align-self:start}
.how-ghost{width:clamp(120px,15vw,210px);margin-top:clamp(20px,4vh,44px)}
.steps li{display:grid;grid-template-columns:clamp(84px,13vw,200px) 1fr;gap:clamp(14px,2.4vw,36px);align-items:start;padding:clamp(28px,5vh,52px) 0 clamp(44px,12vh,120px);border-top:1.5px solid var(--ink);transition:opacity .4s}
.steps .num{font:500 clamp(96px,15vw,230px)/.74 var(--disp);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .4s}
.steps h3{font:500 clamp(26px,3vw,46px)/1.02 var(--disp);letter-spacing:-.02em;margin-bottom:14px}
.steps p{font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--muted);max-width:36ch}
@media (prefers-reduced-motion:no-preference){.js .steps h3{color:var(--muted);transition:color .4s}.js .steps li.on h3{color:var(--ink)}}
.steps li.on .num,html:not(.js) .steps .num{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.steps .num{color:var(--ink)}}

.menu{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(24px,5vw,90px);padding-top:clamp(70px,12vh,140px);padding-bottom:clamp(70px,12vh,140px);align-items:start}
.menu-intro{position:sticky;top:16vh}
.menu-intro .lede{margin-top:20px;max-width:30ch}
.card{position:relative;background:var(--paper);border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:clamp(20px,3.2vw,52px)}
.menu-ghost{position:absolute;right:9%;bottom:calc(100% - 2px);width:clamp(88px,9vw,132px);height:clamp(78px,8vw,117px);overflow:hidden}
.card-top{display:flex;justify-content:space-between;align-items:center;font:600 clamp(16px,1.5vw,22px)/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;padding-bottom:clamp(16px,2vw,26px);border-bottom:1.5px solid var(--ink);margin-bottom:clamp(18px,2.4vw,34px)}
.card-top span{font-weight:400;font-size:22px}
.cols{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px)}
.card h3{font:600 13px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--co-ink);margin-bottom:6px}
.dishes li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"d p" "d a";gap:2px 16px;align-items:center;padding:14px 0;border-bottom:1px dashed rgba(11,13,18,.4)}
html:not(.js) .dishes li{grid-template-areas:"d p"}
.dishes .d{grid-area:d;font:500 clamp(19px,1.7vw,25px)/1.12 var(--disp);letter-spacing:-.005em}
.dishes .d small{display:block;font:400 14px/1.3 var(--text);color:var(--muted);letter-spacing:0;margin-top:3px}
.dishes .p{grid-area:p;font-family:var(--type);font-size:clamp(15px,1.2vw,17px);white-space:nowrap;text-align:right}
.add{grid-area:a;display:none;justify-self:end;gap:7px;min-height:30px;padding:4px 10px;font-size:11px;letter-spacing:.12em}
.js .add{display:inline-flex}
.add::before{content:"+";font-size:14px;line-height:1}
.add[aria-pressed="true"]::before{content:"✓"}
.rules-h{margin-top:clamp(26px,3vw,40px)}
.rules li{padding:12px 0;border-bottom:1px dashed rgba(11,13,18,.4);font-size:16px;line-height:1.4}
.stub{position:sticky;bottom:14px;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;margin-top:26px;background:var(--ink);color:var(--paper);padding:15px 18px;text-decoration:none;font-size:15px}
.stub[hidden]{display:none}
.stub b{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.stub b::before{content:"";width:8px;height:8px;background:var(--co);flex:none}
.stub:hover{background:var(--co);color:var(--ink)}.stub:hover b::before{background:var(--ink)}

.who{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,6vw,110px);align-items:center;padding-top:clamp(40px,8vh,90px);padding-bottom:clamp(50px,9vh,110px)}
.portrait{max-width:460px}
/* the portrait is a window, like the first screen's */
.frame{position:relative;aspect-ratio:4/5;border-radius:var(--r);background:radial-gradient(60% 46% at 50% 92%,rgba(53,227,238,.22),transparent 72%),var(--win);overflow:hidden;display:grid;align-items:end;justify-items:center;padding:16% 20% 0}
.frame>div{width:100%;margin-bottom:-9%}
.frame .tag{position:absolute}
.portrait figcaption{margin-top:24px;font-size:14px;color:var(--muted)}
.who-copy{display:grid;gap:22px;max-width:640px}
.who-copy .eyebrow{margin-bottom:0;font-size:12px;color:var(--ink)}
.who-copy p{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--muted);max-width:48ch}
.who-copy .lede{color:var(--ink);font-size:clamp(20px,1.8vw,27px);line-height:1.35}
.sig{display:grid;gap:2px;border-top:1.5px solid var(--ink);padding-top:16px;margin-top:6px;max-width:none!important}
.sig b{font:500 26px/1.1 var(--disp);color:var(--ink)}.sig span{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- order up ---------- */
.order{position:relative;z-index:3;background:var(--win);color:var(--lite);overflow:clip}
.tw{display:none;position:absolute;inset:0 0 0 calc(clamp(16px,4vw,56px) + min(470px,36vw));-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 60%,transparent 100%)}
.tw-on .tw{display:block}
/* wide screens: the machine and the chef stay in view for the whole form, however tall the ticket grows */
@media (min-width:861px){
  .order.tw-on{display:grid}.order.tw-on>*{grid-area:1/1}
  .tw-on .tw{position:sticky;inset:auto;top:0;height:100svh;align-self:start;margin-left:calc(clamp(16px,4vw,56px) + min(470px,36vw))}
}
.tw canvas{touch-action:pan-y}
.order-in{position:relative;z-index:1;display:grid;grid-template-columns:min(470px,36vw) 1fr;gap:24px;min-height:100svh;align-items:center;padding-top:clamp(64px,8vh,88px);padding-bottom:clamp(40px,6vh,72px);pointer-events:none}
.order-col{pointer-events:auto;display:grid;gap:14px}
.order h2{font:500 clamp(34px,3.7vw,58px)/.98 var(--disp);letter-spacing:-.025em}
.order .eyebrow{color:var(--cy)}
.order .lede{color:var(--litem);max-width:32ch;min-height:2.9em}
.no-tw-lede{display:none}.order:not(.tw-on) .tw-lede{display:none}.order:not(.tw-on) .no-tw-lede{display:block}
.order-ghost{justify-self:center;align-self:center;width:min(300px,24vw);pointer-events:auto}.tw-on .order-ghost{display:none}
.tw-ui{grid-column:1;min-height:24px;justify-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;pointer-events:auto}
.tw-ui .tag{color:var(--litem)}
.ticket{position:relative;background:var(--paper);color:var(--ink);padding:18px 22px 32px;margin-top:6px;display:grid;gap:17px;
  --z:14px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--z) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/var(--z) 100%}
.ticket-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--type);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid var(--co)}
.ticket-top b{font-weight:400;font-size:16px}
.q{border:0;min-width:0;display:grid;gap:8px}
.q>legend,.q>label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;padding:0;margin-bottom:8px}
.q>label{margin-bottom:0}
.q>legend span,.q>label span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;flex:none}
.hint{font-size:14px;color:var(--muted);line-height:1.4}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{position:relative;min-height:38px;padding:6px 12px;font-size:12px}
.checks input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.checks label:has(input:checked) span::before{content:"✓ "}
.checks label:has(input:focus-visible){outline:2px solid var(--co-ink);outline-offset:3px}
.picked{font-family:var(--type);font-size:14px;line-height:1.45;color:var(--muted)}
.ticket textarea,.ticket input[type=text],.ticket input[type=email]{display:block;width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;color:var(--ink);font:400 17px/28px var(--type);padding:4px 0;-webkit-appearance:none;appearance:none}
.ticket textarea{resize:vertical;min-height:88px;background:repeating-linear-gradient(transparent 0 27px,rgba(11,13,18,.22) 27px 28px);background-position:0 4px;border-bottom:0}
.ticket :is(textarea,input):focus-visible{outline:2px solid var(--co-ink);outline-offset:1px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pair label{display:grid;gap:2px;font-size:13px;font-weight:600;color:var(--muted)}
.send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.send-btn{background:var(--co);color:var(--ink);padding:17px 20px}.send-btn::before{background:var(--ink)}
.send-btn:hover{background:var(--ink);color:var(--paper)}.send-btn:hover::before{background:var(--co)}
.send-btn[disabled]{opacity:.6;cursor:progress}
.send .small{color:var(--muted);flex:1 1 170px}
.status{font-size:14px;font-weight:600;color:var(--co-ink)}.status:empty{display:none}
.done{display:grid;gap:14px;justify-items:start;margin-top:10px;outline:0}
.done[hidden]{display:none}
.done-ghost{width:120px}
.done h3{font:500 clamp(44px,5vw,76px)/.95 var(--disp);letter-spacing:-.025em}
.done p{font-size:19px;line-height:1.45;color:var(--litem);max-width:30ch}
.done .small{font-size:13px;color:var(--cy)}

/* ---------- foot ---------- */
.foot{position:relative;z-index:3;background:var(--win);color:var(--lite);padding-top:clamp(40px,8vh,80px);overflow:hidden;border-top:1px solid var(--line)}
.foot-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;font-size:15px;line-height:1.6;color:var(--litem)}
.foot-row a{text-underline-offset:3px}
.foot-id{display:flex;align-items:flex-start;gap:14px}.foot-id .logo{width:44px;height:44px;margin:-4px 0 0}
.foot-row p:last-child{text-align:right}
.giant{font:600 10.3vw/.8 var(--disp);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(234,255,251,.4);margin:clamp(40px,8vh,90px) 0 -.07em;user-select:none}

/* ---------- tablet and phone ---------- */
@media (max-width:1080px){
  .looks{grid-template-columns:1fr}.browser{max-width:min(100%,440px)}
  .tabs{grid-template-columns:repeat(3,1fr)}
  .tabs label{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 11px}
  .brief{grid-column:1/-1;margin-top:2px}
  .masc{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
}
@media (max-width:860px){
  .browser{max-width:300px}
  header{grid-template-columns:1fr auto;align-items:center}.tagline{grid-column:1 / -1;grid-row:2}
  nav a:not(.cta){display:none}.cta{padding:12px 14px}.long{display:none}.short{display:inline}
  .send-btn,.finale .cta,.s5 .cta{padding:16px 18px}
  h1{max-width:8.2em}
  .slot{min-height:46svh}
  .slot>.tag.br{display:none}
  .marks{grid-template-columns:auto 1fr auto}.marks span:nth-child(2),.marks span:nth-child(4){display:none}
  .row,.finale{max-width:none}
  .live .finale{justify-content:flex-end;padding-bottom:9vh}
  .live .row{display:block;min-height:115vh;padding-bottom:9vh;border-top:0;opacity:.12}
  .live .row.on{opacity:1}
  .live .row .in{position:sticky;top:58vh;padding-top:18px;border-top:1px solid var(--line)}
  .live .plate{display:block;position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(9,11,15,0) 44%,rgba(9,11,15,.94) 54%,var(--win) 60%)}
  .live .lead{min-height:50vh}
  .demo{margin-bottom:8vh}
  .live :is(.demo,.k2)::before{height:9vh}.live .demo::after{height:7vh}
  .reels{grid-template-columns:1fr}
  .slide{flex-basis:84%}
  .s-k{font-size:2.6cqw}.s-h{font-size:9cqw}.s-p{font-size:3.5cqw}
  .how{grid-template-columns:1fr}
  .how-side{position:static;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}
  .how-side .eyebrow{grid-column:1/-1;margin-bottom:0}
  .how-ghost{width:96px;margin:0 6px -6px 0}
  .steps li{padding-bottom:40px}
  .menu{grid-template-columns:1fr}.menu-intro{position:static}
  .card{box-shadow:6px 6px 0 var(--ink);margin-right:6px}
  .who{grid-template-columns:1fr}.portrait{max-width:300px}
  .order{overflow:visible}
  .tw{position:sticky;inset:auto;top:0;z-index:2;height:40svh;width:100%;background:var(--win);-webkit-mask-image:none;mask-image:none;border-bottom:1px solid var(--line)}
  .order-in{grid-template-columns:1fr;min-height:0;padding-top:36px}
  .tw-on .order-in{padding-top:22px}
  .order-ghost{display:none}
  .foot-row{grid-template-columns:1fr 1fr}.foot-row p:last-child{text-align:left}
  .foot-id{flex-direction:column;gap:10px}
}
@media (max-width:480px){
  h1{max-width:7.2em}
  .tabs label{font-size:12px;padding:11px 10px 10px}.tabs label span{font-size:10px}
  .masc-stage{aspect-ratio:4/3.4}
  .masc-stage .ghost{width:38%;right:8%}
  .keys{gap:10px}.keys button{padding:14px 15px;flex:1 1 auto;justify-content:center}
  .pair{grid-template-columns:1fr}
  .reel figcaption{font-size:14px}
  .ticket{padding:18px 16px 32px}
}

/* ---------- calm mode ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  #wm-replay{display:none}
}