/* slides.bink.party: the pitch, dressed as the lander (bink.party). A 1600x900 stage scaled to fit
   between the menu bar and the dock, on the live dithered sky. Flat: borders only, no drop shadows,
   no animated buttons, no dot separators. */
@font-face{font-family:"Inter Tight";src:url(/fonts/intertight.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"VT323";src:url(/fonts/vt323.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrainsmono.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --ink:#0f1730;--paper:#fff;--wash:#f1f6ff;--mute:#5d6886;
  --t0:#f6faff;--t1:#e3eeff;--t2:#cddfff;--t3:#b8ccf6;--t4:#a1b4ec;--wall:var(--t2);
  --me:#1f6bff;
  --grot:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --pix:"VT323","Courier New",monospace;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --word:800 1em/1 -apple-system,"SF Pro Display","Inter Tight",sans-serif;
  --bar:30px;--dockh:48px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--wall);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--wall);color:var(--ink);font:15px/1.4 var(--grot);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
img{display:block;image-rendering:pixelated;-webkit-user-drag:none}
::selection{background:transparent}
:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges}
#trail{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* ---------- menu bar: the lander's ---------- */
.menubar{position:relative;z-index:30;flex:0 0 var(--bar);display:flex;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--ink)}
.mark{display:flex;align-items:center;gap:6px;padding:0 12px 3px 12px;font:800 21px/1 -apple-system,"SF Pro Display",var(--grot);letter-spacing:-.045em;text-decoration:none}
.mark img{width:20px;height:23px;image-rendering:auto}
.menus{display:flex;align-items:stretch}
.menus .mt{all:unset;display:flex;align-items:center;padding:0 10px;font:500 14.5px/1 var(--grot);letter-spacing:-.01em;cursor:default;white-space:nowrap}
.menus .mt:hover,.menus .mt.on,.menus .mt:focus-visible{background:var(--ink);color:var(--paper)}
.mb-r{margin-left:auto;display:flex;align-items:stretch}
.mclock{display:flex;align-items:center;padding:0 12px;font:12px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.fs{all:unset;display:flex;align-items:center;padding:0 12px;cursor:default}
.fs i{display:block;width:13px;height:11px;border:1px solid var(--ink);box-shadow:inset 0 2px 0 var(--ink)}
.fs:hover,.fs:focus-visible{background:var(--ink)}
.fs:hover i,.fs:focus-visible i{border-color:var(--paper);box-shadow:inset 0 2px 0 var(--paper)}

/* ---------- the dock: back, a pip a slide, next ---------- */
.dock{position:relative;z-index:30;flex:0 0 var(--dockh);display:flex;align-items:center;justify-content:center;gap:14px;padding:0 16px env(safe-area-inset-bottom);border-top:1px solid var(--ink);background:radial-gradient(circle,var(--t4) .8px,transparent 1px) 0 0/4px 4px,var(--paper)}
.nav{all:unset;display:grid;place-items:center;width:30px;height:26px;border:1px solid var(--ink);background:var(--paper);cursor:default}
.nav svg{width:10px;height:10px;fill:var(--ink)}
.nav:hover:not(:disabled),.nav:focus-visible{background:var(--ink)}
.nav:hover:not(:disabled) svg,.nav:focus-visible svg{fill:var(--paper)}
.nav:disabled svg{fill:#9ba4bd}
.nav:disabled{border-color:#9ba4bd}
.pips{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--ink);background:var(--paper)}
.pips button{all:unset;width:10px;height:10px;border:1px solid var(--ink);background:var(--paper);cursor:default}
.pips button.gap{margin-left:8px}
.pips button:hover{background:var(--t3)}
.pips button[aria-selected=true]{background:var(--ink)}
.pips button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.count{min-width:64px;font:20px/1 var(--pix);white-space:nowrap}
.hint{position:absolute;right:16px;font:11px/1 var(--mono);color:var(--mute);white-space:nowrap}
@media (max-width:900px){.hint{display:none}}
@media (max-width:520px){.count{display:none}.pips{gap:4px;padding:5px 6px}.pips button.gap{margin-left:4px}}

/* ---------- the stage: 1600x900, scaled by js/deck.js ---------- */
.view{position:relative;z-index:2;flex:1 1 auto;min-height:0;overflow:hidden}
.stage{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0}
.slide{position:absolute;inset:0;visibility:hidden}
.slide.on,.slide.out{visibility:visible}
.slide.out{z-index:1}
.slide.on{z-index:2}

/* type */
.hl{margin:0;font:500 92px/.92 var(--grot);letter-spacing:-.052em;text-wrap:balance}
.hl .px{font-family:var(--pix);font-weight:400;font-size:1.06em;letter-spacing:-.02em;line-height:.8}
.sub{margin:26px 0 0;font:500 32px/1.15 var(--grot);letter-spacing:-.025em;text-wrap:balance}
.kick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.tag{display:inline-block;margin:0;padding:5px 8px 4px;border:2px solid var(--ink);background:var(--paper);font:17px/1 var(--mono);white-space:nowrap}
.tag.inv{background:var(--ink);color:var(--paper)}
.by{margin:30px 0 0;font:20px/1 var(--mono)}
.word{margin:0;font:var(--word);font-size:210px;letter-spacing:-.06em;line-height:.86}
.word a{text-decoration:none}
.word a:hover,.word a:focus-visible{background:var(--ink);color:var(--paper);outline:none}
.huge{margin:0 0 6px;font:400 210px/.78 var(--pix);letter-spacing:-.03em}

/* the text block on the left, a window on the right */
.txt{position:absolute;left:110px;top:50%;width:640px;transform:translateY(-50%)}
.mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;width:1180px}
.top{position:absolute;left:50%;top:92px;transform:translateX(-50%);text-align:center;width:1100px}

/* ---------- windows: the classic striped title bar on the front one ---------- */
.win{background:var(--paper);border:2px solid var(--ink);font:26px/1 var(--pix);color:var(--ink);text-align:left}
.bar{position:relative;height:32px;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink)}
.bar b{position:relative;z-index:1;max-width:calc(100% - 90px);overflow:hidden;text-overflow:ellipsis;padding:0 10px;background:var(--paper);font-weight:400;font-size:25px;line-height:30px;white-space:nowrap}
.front>.bar::before{content:"";position:absolute;left:5px;right:5px;top:6px;bottom:6px;background:repeating-linear-gradient(var(--ink) 0 2px,var(--paper) 2px 4px)}
.bar .x{position:absolute;z-index:1;left:12px;top:6px;width:18px;height:18px;border:2px solid var(--ink);background:var(--paper);outline:3px solid var(--paper)}
.wb{padding:14px 18px 18px}
.side{position:absolute;right:110px;top:50%;transform:translateY(-50%)}
.win .note{position:absolute;right:-2px;top:calc(100% + 16px)}

/* Messages */
.chat{width:640px}
.thread{display:flex;flex-direction:column;gap:10px;padding:20px 18px 16px;min-height:280px;justify-content:flex-end}
.thread p{margin:0}
.thread .me,.thread .bk{max-width:84%;padding:7px 15px 9px;border-radius:18px;font-size:33px;line-height:.95}
.thread .me{align-self:flex-end;background:var(--me);color:var(--paper);border-bottom-right-radius:3px}
.thread .bk{align-self:flex-start;border:2px solid var(--ink);border-bottom-left-radius:3px}
.thread .said{border:2px dashed var(--me);background:var(--paper);color:var(--me)}
.thread .ts{align-self:center;padding:6px 0 2px;font:17px/1 var(--mono);color:var(--mute)}
.thread .who{margin:4px 0 -4px 6px;font:17px/1 var(--mono);color:var(--mute)}
.thread .who.r{align-self:flex-end;margin:4px 6px -4px 0}
.compose{display:flex;align-items:center;gap:8px;margin:0 14px 14px;padding:4px 5px 4px 14px;border:2px solid var(--ink);border-radius:16px;min-height:36px}
.compose>span{flex:1;font-size:27px;line-height:1}
.compose>span:empty::before{content:"iMessage";color:var(--mute)}
.compose i{flex:0 0 24px;height:24px;border-radius:50%;background:var(--me);position:relative}
.compose i::after{content:"";position:absolute;left:7px;top:5px;border:5px solid transparent;border-bottom:7px solid var(--paper);border-top:0}

/* a cart card and a poll inside Bink's bubble */
.thread .cart,.thread .poll{display:flex;flex-direction:column;gap:8px;width:380px;padding:13px 18px 16px}
.cart b,.poll b{font-weight:400;font-size:35px}
.cart span{font-size:28px}
.cart .rule{height:0;border-top:2px dashed var(--ink);margin:4px 0}
.cart .tag{align-self:flex-start;margin-top:4px;font-size:15px;padding:4px 7px 3px;font-style:normal}
.poll .opt{display:flex;align-items:center;gap:10px;padding:6px 12px 8px;border:2px solid var(--ink);border-radius:9px;font-size:30px}
.poll .opt i{flex:0 0 18px;height:18px;border:2px solid var(--ink);border-radius:50%}

/* FaceTime: the camera's view, dithered */
.call{width:436px}
.cam{position:relative;background:var(--ink)}
.cam img{width:432px;height:576px;image-rendering:pixelated}
.cam .who{position:absolute;left:14px;top:14px;padding:3px 9px 5px;background:var(--paper);border:2px solid var(--ink);font-size:24px;line-height:1}
.cam .end{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:4px 22px 6px;border-radius:20px;background:var(--ink);color:var(--paper);border:2px solid var(--paper);font-size:24px;line-height:1}

/* About This Mac */
.about{width:620px}
.about .wb{padding:22px 24px 26px}
.mac{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:18px;border-bottom:2px solid var(--ink)}
.mac img{width:64px;height:64px}
.mac p{margin:0}
.mac .big{font-size:48px;line-height:.9}
.mac .dim{margin-top:6px;font-size:27px;color:var(--mute)}
.use,.res{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px 20px;font-size:30px}
.res{grid-template-columns:auto 1fr auto}
.res em{font-style:normal;min-width:4.2em;text-align:right}
.meter{display:block;height:22px;border:2px solid var(--ink);background:var(--paper) radial-gradient(circle,var(--t4) 1px,transparent 1.2px) 0 0/4px 4px}
.meter b{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,var(--t3) 2px 4px)}
.m1 b{width:58%}.m2 b{width:41%}.m3 b{width:73%}
.v0 b{width:0}.v4 b{width:100%;background:var(--ink)}

/* the poll's result */
.tally{width:640px}
.tally .wb{padding:20px 24px 26px}
.tally .q{margin:0 0 22px;font-size:34px}

/* a reservation request, like the lander's receipts */
.rcpt{width:580px}
.rcpt .wb{padding:8px 24px 14px;background:var(--paper) linear-gradient(var(--wash),var(--wash)) 0 0/100% 100%}
.rcpt dl{margin:0;display:grid;grid-template-columns:1fr;font-size:36px}
.rcpt dt{padding:16px 0 6px;font:16px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.rcpt dd{margin:0;padding:0 0 14px;border-bottom:2px dashed var(--ink)}
.rcpt dd:last-child{border-bottom:0}

/* the news window, the lander's */
.news{width:420px;margin:0 0 44px}
.news .wb{padding:14px 18px 16px;text-align:center;background:var(--wash);font-size:32px;line-height:1.05}

/* slide 1 */
.intro{margin:0 0 30px;display:flex;align-items:baseline;justify-content:center;gap:.45em;font:500 22px/1 var(--grot);letter-spacing:-.01em}
.intro span{white-space:nowrap}
.intro i{width:150px;height:2px;background:radial-gradient(circle,var(--ink) 1px,transparent 1.2px) 0 0/6px 2px repeat-x;align-self:flex-end;margin-bottom:.25em}
#s1 .word{margin-bottom:22px}
#s1 .hl{font-size:84px}
#s1 .sub{margin-top:18px}

/* slide 2: three windows in a row */
#s2 .row3{position:absolute;left:50%;top:360px;transform:translateX(-50%);display:flex;gap:44px}
#s2 .win{width:380px}
#s2 .pic{display:grid;place-items:center;height:220px;border-bottom:2px solid var(--ink);background:var(--wash) radial-gradient(circle,var(--t3) 1px,transparent 1.2px) 0 0/6px 6px}
#s2 .pic .o3{position:static;width:208px;height:208px}
#s2 h3{margin:0 0 8px;font:500 38px/1 var(--grot);letter-spacing:-.04em}
#s2 .wb p{margin:0;font-size:28px;line-height:1}
#s11 .hl{font-size:120px}
#s11 .mid{width:1240px}
#s12 .word{font-size:190px}

/* ---------- live 3D objects (src/obj3d-core.ts), drawn crisp at 64 texels ---------- */
.o3{position:absolute;width:192px;height:192px;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
.slide.on .o3{animation:pop .46s cubic-bezier(.34,1.56,.64,1) both}
@keyframes pop{from{transform:scale(.5) rotate(-14deg)}}
.o3.a{left:120px;top:110px;transform:rotate(-8deg)}
.o3.b{right:130px;top:120px;transform:rotate(7deg)}
.o3.c{right:190px;bottom:90px;transform:rotate(-5deg)}
.win .o3.d{left:-168px;bottom:-128px;width:216px;height:216px;transform:rotate(-6deg)}
#s12 .o3.a{left:200px;top:auto;bottom:150px}
#s12 .o3.c{right:210px;bottom:auto;top:150px}
#s9 .win .o3.d,#s10 .win .o3.d{left:auto;right:-80px;bottom:auto;top:-130px;transform:rotate(6deg)}
#s3 .o3{display:none}

/* ---------- portrait screens: a 900x1600 stage, text above, window below ---------- */
.stage.tall{width:900px;height:1600px}
.tall .txt{left:90px;right:90px;width:auto;top:190px;transform:none}
.tall .side{right:auto;left:50%;top:1070px;transform:translate(-50%,-50%)}
.tall .mid{width:780px}
.tall .top{top:170px;width:780px}
.tall .hl{font-size:100px}
.tall #s1 .word{font-size:200px}
.tall #s1 .hl{font-size:76px}
.tall .intro i{width:60px}
.tall #s11 .hl{font-size:104px}
.tall #s12 .word{font-size:136px}
.tall .huge{font-size:180px}
.tall #s2 .row3{top:420px;flex-direction:column;gap:36px}
.tall #s2 .win{width:620px}
.tall #s2 .pic{height:170px}
.tall #s2 .pic .o3{width:170px;height:170px}
.tall .o3.a{left:90px;top:auto;bottom:250px}
.tall .o3.b{right:100px;top:auto;bottom:430px}
.tall .o3.c{right:330px;bottom:120px}
.tall #s12 .o3.a{left:120px;bottom:300px}
.tall #s12 .o3.c{right:140px;top:auto;bottom:360px}
.tall .win .o3.d{left:-96px;bottom:auto;top:-150px}
.tall #s9 .win .o3.d,.tall #s10 .win .o3.d{right:-40px;top:-160px}

/* ---------- phones: same stage, just smaller; no hover-only bits ---------- */
@media (max-width:600px){.mark span{display:none}.menus .mt{padding:0 7px;font-size:13px}.mclock{display:none}}

/* ---------- print: one slide a page, flat sky ---------- */
@media print{
  @page{size:1600px 900px;margin:0}
  html,body{height:auto;overflow:visible;background:var(--wall)}
  body{display:block}
  #sky,#trail,.menubar,.dock{display:none!important}
  .view{overflow:visible}
  .stage{position:static;transform:none!important}
  .slide{position:relative;visibility:visible!important;width:1600px;height:900px;break-after:page;background:var(--wall);-webkit-mask-image:none!important;mask-image:none!important}
  .slide .o3{animation:none}
  .halo::before{content:"";position:absolute;inset:-60px -90px;z-index:-1;border-radius:50%;background:var(--t0)}
}