/* pausecode.com: the desktop of someone stuck in tutorial hell, then the way out. Light only, on purpose. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PC Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url("/fonts/caveat-latin.woff2") format("woff2")}

:root{
  color-scheme:light;
  --desk:#f1f2ee;
  --dot:rgba(11,11,11,.16);
  --ink:#0b0b0b;
  --ink-2:#464a45;
  --ink-3:#868b84;
  --line:rgba(11,11,11,.11);
  --lime:#d9f47d;
  --red:#ff3d2e;
  --stamp:#d8432a;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"PC Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --win-shadow:0 22px 44px -22px rgba(24,28,22,.42),0 4px 12px -4px rgba(24,28,22,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.3,1.5,.5,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;font:400 17px/1.55 var(--sans);color:var(--ink);background-color:var(--desk);background-image:radial-gradient(circle,var(--dot) 1.15px,transparent 1.6px);background-size:32px 32px;background-position:16px 16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
[hidden]{display:none!important}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:12px;top:-60px;z-index:99;padding:10px 14px;border-radius:10px;background:var(--ink);color:#fff;text-decoration:none}
.skip:focus{top:10px}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
mark{color:inherit;background:linear-gradient(transparent 14%,#e6f8a0 14%,#e6f8a0 88%,transparent 88%);padding:0 .14em;border-radius:3px}

/* ---------- windows: the one frame everything on the desk wears ---------- */
.win{background:#fff;border:1px solid rgba(11,11,11,.2);border-radius:11px;box-shadow:var(--win-shadow);overflow:hidden}
.tb{position:relative;height:27px;display:flex;align-items:center;gap:7px;padding:0 10px;background:linear-gradient(#fafaf8,#ebebe7);border-bottom:1px solid rgba(11,11,11,.12)}
.tb i{flex:none;width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.45)}
.tb i:nth-child(2){background:#febc2e}
.tb i:nth-child(3){background:#28c840}
.tb span{position:absolute;left:64px;right:64px;text-align:center;font:500 11.5px/27px var(--sans);color:#73766f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- glossy pills ---------- */
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;border-radius:999px;border:1px solid rgba(11,11,11,.32);font:500 18px/1 var(--sans);letter-spacing:-.012em;color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s}
.pill::before{content:"";position:absolute;z-index:-1;left:12px;right:12px;top:2px;height:48%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.18));pointer-events:none}
.pill svg{width:15px;height:15px;fill:currentColor;flex:none}
.pill:hover{transform:translateY(-1px)}
.pill:active{transform:translateY(1px);filter:brightness(.97)}
.pill-lime{background:linear-gradient(180deg,#efffbb 0%,#d9f47d 46%,#c6e858 54%,#d6f37a 100%);border-color:#86a524;box-shadow:inset 0 -3px 7px rgba(118,158,12,.38),0 12px 24px -12px rgba(98,140,8,.75),0 2px 3px rgba(11,11,11,.12)}
.pill-white{background:linear-gradient(180deg,#ffffff 0%,#f5f5f2 46%,#e7e7e3 54%,#f6f6f3 100%);box-shadow:inset 0 -3px 7px rgba(11,11,11,.07),0 12px 24px -14px rgba(11,11,11,.4),0 2px 3px rgba(11,11,11,.08)}
.pill-sm{height:42px;padding:0 22px;font-size:15.5px}

.capsule{display:inline-block;padding:7px 14px 6px;border-radius:999px;border:1px solid rgba(11,11,11,.26);background:linear-gradient(#fff,#ebebe7);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,11,11,.06);font:500 11.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#4c504a}

/* ---------- the menu bar ---------- */
.bar{position:sticky;top:0;z-index:60;background:var(--desk);border-bottom:1px solid var(--line)}
.bar-in{height:48px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 22px}
.bar-left{display:flex;align-items:center;gap:22px;min-width:0}
.brand{font-size:15px;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.brand b{font-weight:650}
.bar-link{font-size:14.5px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .15s}
.bar-link:hover{color:var(--ink)}
.bar-mark svg{width:26px;height:26px;transition:transform .3s var(--spring)}
.bar-mark:hover svg{transform:rotate(-8deg) scale(1.06)}
.bar-right{justify-self:end;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--ink-3);white-space:nowrap}
.bar-status{display:inline-flex;align-items:center;gap:6px;font:400 12px/1 var(--mono)}
.bar-status svg{width:12px;height:12px;fill:var(--red)}
.bar-clock{font-variant-numeric:tabular-nums}
.bar-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;border:1px solid #86a524;background:linear-gradient(180deg,#efffbb 0%,#d9f47d 46%,#c6e858 54%,#d6f37a 100%);box-shadow:inset 0 -2px 4px rgba(118,158,12,.32),0 4px 10px -6px rgba(98,140,8,.7);font:550 13.5px/1 var(--sans);color:var(--ink);text-decoration:none}
.bar-cta::before{content:"";position:absolute;z-index:-1;left:8px;right:8px;top:1px;height:46%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.15))}

/* ---------- the desk (hero) ---------- */
.desk{position:relative;overflow:hidden;padding:250px 24px 96px}
.desk-items{position:absolute;inset:0;z-index:1;pointer-events:none;--k:1}
.it{position:absolute;left:calc(50% + var(--x) * var(--k));top:var(--y);pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));animation:pop .7s var(--spring) both;animation-delay:calc(var(--i,0) * 70ms + 150ms)}
.it.dragging{cursor:grabbing;z-index:30;animation:none}
.it.dragging .win{box-shadow:0 34px 60px -24px rgba(24,28,22,.55),0 6px 16px -6px rgba(24,28,22,.2)}
.it figcaption{margin-top:9px;text-align:center;font:400 12.5px/1.3 var(--sans);color:var(--ink-3);white-space:nowrap}
.it.bob{animation:pop .7s var(--spring) both,bob 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * 70ms + 150ms),1.4s}
@keyframes pop{from{opacity:0;scale:.86}}
@keyframes bob{50%{translate:0 -7px}}

/* positions: --x is the offset of the item's left edge from the page's centre */
.d1{--x:-694px;--y:112px;--r:-2.5deg;--i:0;width:252px}
.d2{--x:-404px;--y:70px;--r:4deg;--i:3}
.d3{--x:-196px;--y:92px;--r:.8deg;--i:5;width:392px}
.d4{--x:432px;--y:84px;--r:2.4deg;--i:2;width:236px}
.d5{--x:262px;--y:150px;--r:-7deg;--i:6}
.d6{--x:-676px;--y:404px;--r:1.6deg;--i:1;width:236px}
.d7{--x:418px;--y:372px;--r:-1.8deg;--i:4;width:272px}
.d8{--x:-418px;--y:500px;--r:0deg;--i:8}
.d9{--x:332px;--y:470px;--r:0deg;--i:9}
.d10{--x:-690px;--y:332px;--r:-4deg;--i:7}
.d11{--x:556px;--y:318px;--r:5deg;--i:10}
.d12{--x:-560px;--y:690px;--r:-6deg;--i:11}
.d13{--x:468px;--y:668px;--r:8deg;--i:12;width:118px}

/* the paused course video */
.w-video .vid{position:relative;height:150px;background:radial-gradient(120% 90% at 30% 20%,#262a33,#14161b);overflow:hidden}
.w-video pre{margin:0;padding:12px 14px;font:400 9.5px/1.55 var(--mono);color:#c9ccd3;filter:blur(.15px)}
.w-video .k{color:#c792ea}.w-video .f{color:#82aaff}.w-video .t{color:#f07178}
.vid-pause{position:absolute;left:50%;top:44%;translate:-50% -50%;display:flex;gap:7px;padding:13px 15px;border-radius:14px;background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}
.vid-pause i{width:7px;height:24px;border-radius:2px;background:#fff}
.vid-bar{position:absolute;left:10px;right:10px;bottom:24px;height:3px;border-radius:3px;background:rgba(255,255,255,.28)}
.vid-bar b{display:block;width:9%;height:100%;border-radius:3px;background:var(--red);position:relative}
.vid-bar b::after{content:"";position:absolute;right:-5px;top:-3.5px;width:10px;height:10px;border-radius:50%;background:var(--red)}
.vid-time{position:absolute;left:10px;bottom:6px;font:400 9.5px/1 var(--mono);color:rgba(255,255,255,.82)}
.vid-rew{position:absolute;left:14%;top:38%;padding:5px 9px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:400 10px/1 var(--mono);opacity:0;pointer-events:none}
.vid-rew.on{animation:rew 1s ease-out}
@keyframes rew{0%{opacity:0;translate:6px 0}20%{opacity:1;translate:0 0}70%{opacity:1}100%{opacity:0;translate:-8px 0}}

/* the sticky note */
.note{width:172px;padding:20px 16px 18px;background:linear-gradient(#fff6a6,#ffef7a);box-shadow:0 18px 30px -18px rgba(90,80,0,.55),0 2px 4px rgba(90,80,0,.15);font:600 23px/1.05 var(--hand);color:#3a3410;clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}
.note .note-2{margin-top:6px;font-size:20px;color:#7a6c17}

/* the browser with too many tabs */
.w-tabs{background:#e9e9e5}
.tabstrip{display:flex;align-items:flex-end;gap:2px;height:34px;padding:0 8px;background:linear-gradient(#ececea,#e2e2de)}
.tabstrip i{align-self:center;flex:none;width:10px;height:10px;margin-right:4px;border-radius:50%;background:#ff5f57}
.tabstrip i:nth-child(2){background:#febc2e}.tabstrip i:nth-child(3){background:#28c840;margin-right:10px}
.tab{flex:1 1 0;min-width:0;height:26px;padding:0 9px;border-radius:7px 7px 0 0;font:500 10.5px/26px var(--sans);color:#585b55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab.on{background:#fff;color:var(--ink)}
.tab.more{flex:none;color:#8b8e87}
.urlbar{margin:0;padding:7px 10px;background:#fff;font:400 10.5px/1.2 var(--mono);color:#3d403b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid rgba(0,0,0,.04)}
.urlbar span{color:#9a9d96}

/* the name tag sticker */
.nametag{width:176px;border-radius:12px;background:#fff;border:1px solid rgba(11,11,11,.14);box-shadow:0 16px 26px -16px rgba(24,28,22,.55);overflow:hidden;text-align:center}
.nt-top{padding:8px 0 7px;background:#e8352a;color:#fff;font:500 9.5px/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.nt-top b{display:block;font-size:17px;letter-spacing:.12em;font-weight:800}
.nt-name{padding:12px 8px 14px;font:700 26px/1 var(--hand);color:#14140f}

/* the blank editor */
.w-editor{background:#1d1f24}
.w-editor .tb{background:linear-gradient(#34363c,#2a2c31);border-bottom-color:#111}
.w-editor .tb span{color:#a2a5ad}
.ed{display:grid;grid-template-columns:30px 1fr;row-gap:5px;padding:12px 0 18px;font:400 11px/1.45 var(--mono)}
.ed .ln{text-align:right;padding-right:10px;color:#5d616b}
.cur{width:2px;height:15px;background:#d9f47d;animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* the terminal */
.w-term{background:#101112}
.w-term .tb{background:linear-gradient(#2e2f31,#232426);border-bottom-color:#000}
.w-term .tb span{color:#9fa1a5}
.term{margin:0;padding:12px 13px 14px;font:400 10.5px/1.6 var(--mono);color:#d7d9dc;white-space:pre}
.term .p{color:#9ee493}.term .e{color:#ff7b72}
.term .blk{display:inline-block;width:7px;height:12px;vertical-align:-2px;background:#d7d9dc;animation:blink 1.06s steps(1) infinite}

/* desktop icons and kaomoji */
.ico{width:120px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.ico svg{width:58px;height:auto;filter:drop-shadow(0 6px 8px rgba(24,28,22,.18))}
.ico span{font:500 12px/1.3 var(--sans);color:#2b2e2a;text-shadow:0 0 6px var(--desk),0 0 2px var(--desk),0 0 1px var(--desk)}
.d9 svg{width:44px}
.kao{font:500 21px/1 var(--sans);color:#3d413b;white-space:nowrap}
.d12{font-size:26px}

/* the round sticker */
.seal svg{width:100%;height:auto;filter:drop-shadow(0 12px 16px rgba(24,28,22,.25));animation:spin 28s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* the hero's words */
.hero{position:relative;z-index:2;text-align:center}
.wordmark{display:flex;align-items:center;justify-content:center;gap:.15em;font-weight:400;font-size:clamp(64px,10.2vw,152px);line-height:.9;letter-spacing:-.05em;color:#0a0a0a}
.wm-mark{flex:none;width:.78em;height:.78em;transform:translateY(.03em);filter:drop-shadow(0 .04em .08em rgba(11,11,11,.18))}
.wordmark b{font-weight:650}
.tagline{margin-top:20px;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.018em}
.ctas{display:flex;justify-content:center;align-items:flex-start;gap:18px;margin-top:40px}
.cta-col{display:flex;flex-direction:column;align-items:center}
.under{margin-top:12px;font-size:13.5px;color:var(--ink-3)}
.under.ok{color:#3f6a1a}
.under.err{color:#b4402b}

/* the hero's join pill opens into a field */
.pill-join{position:relative;width:290px;height:54px}
.pill-join .pj-open{position:absolute;inset:0;width:100%;transition:opacity .18s,transform .25s var(--ease)}
.pj-field{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 6px 0 22px;border-radius:999px;background:#fff;border:1px solid rgba(11,11,11,.32);box-shadow:inset 0 2px 4px rgba(11,11,11,.06),0 12px 24px -14px rgba(11,11,11,.4)}
.pj-field:focus-within{border-color:#86a524;box-shadow:0 0 0 4px rgba(217,244,125,.7),0 12px 24px -14px rgba(11,11,11,.4)}
.pj-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;font-size:16.5px;outline:none}
.pj-field input::placeholder{color:#a3a79f}
.pj-go{flex:none;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid #86a524;background:linear-gradient(180deg,#efffbb,#cdec62);box-shadow:inset 0 -2px 4px rgba(118,158,12,.35);cursor:pointer;transition:transform .15s}
.pj-go:hover{transform:translateX(2px)}
.pj-go svg,.t-form .pill svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.js .pill-join .pj-field{opacity:0;transform:scale(.94);pointer-events:none;transition:opacity .2s,transform .3s var(--spring)}
.js .pill-join.open .pj-field{opacity:1;transform:none;pointer-events:auto}
.js .pill-join.open .pj-open{opacity:0;transform:scale(1.04);pointer-events:none}
html:not(.js) .pj-open{display:none}

/* the demo window */
.demo{position:relative;z-index:3;max-width:860px;margin:72px auto 0}
.demo figcaption{margin-top:16px;text-align:center;font:400 13px/1.5 var(--sans);color:var(--ink-3)}

/* ---------- the wall ---------- */
/* overflow-x:clip — the marquee below is 100vw wide, and 100vw counts the scrollbar when the browser draws a classic one,
   so without the clip the page gets a 7.5px horizontal scroll; clip keeps the vertical overflow visible */
.wall{position:relative;padding:130px 24px 40px;text-align:center;overflow-x:clip}
.mq-wrap{position:relative;margin:26px calc(50% - 50vw) 0}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14),#000 28%,#000 72%,rgba(0,0,0,.14));mask-image:linear-gradient(90deg,rgba(0,0,0,.14),#000 28%,#000 72%,rgba(0,0,0,.14))}
.mq{display:flex;width:max-content;animation:mq 34s linear infinite}
.mq span{font:600 clamp(46px,7.2vw,106px)/1.12 var(--sans);letter-spacing:-.055em;white-space:nowrap;padding-right:.5em}
.mq span::after{content:"";display:inline-block;width:.15em;height:.56em;margin-left:.5em;vertical-align:.02em;border-radius:.03em;background:var(--ink);box-shadow:.25em 0 0 var(--ink);opacity:.18}
@keyframes mq{to{transform:translateX(-50%)}}
.stamp{position:absolute;z-index:2;left:calc(50% + min(22vw,300px));top:-22px;padding:8px 15px 7px;border:3px solid var(--stamp);border-radius:10px;color:var(--stamp);font:800 clamp(14px,1.4vw,19px)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-11deg);background:#fff;box-shadow:0 10px 20px -10px rgba(24,28,22,.45),0 0 0 4px #fff}
.wall-sub{max-width:34em;margin:22px auto 0;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:30px auto 44px}
.chips button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;border:1px solid rgba(11,11,11,.18);background:linear-gradient(#fff,#efefec);box-shadow:inset 0 1px 0 #fff;font:500 14px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.chips button:hover{color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.chips b{font:400 11.5px/1 var(--mono);opacity:.55}
.wall-grid{max-width:1180px;margin:0 auto;columns:3 300px;column-gap:20px;text-align:left}
.wall-grid>*{break-inside:avoid;margin-bottom:20px}
.wall-grid>.off{display:none}
.wall-more{margin-top:10px}
.wall-foot{margin-top:34px;font:400 12px/1.5 var(--mono);color:var(--ink-3)}

/* a post */
.post{display:block}
.post .tb{background:var(--tint,linear-gradient(#fafaf8,#ebebe7));border-bottom-color:rgba(11,11,11,.1)}
.post .tb span{color:rgba(11,11,11,.5)}
.t-lime{--tint:linear-gradient(#f6fde0,#e2f3a8)}
.t-sky{--tint:linear-gradient(#eef6ff,#d3e6fb)}
.t-lilac{--tint:linear-gradient(#f4f0ff,#ded5fb)}
.t-peach{--tint:linear-gradient(#fff3ea,#fbd9c6)}
.t-mint{--tint:linear-gradient(#ecf9f1,#cdeedb)}
.t-butter{--tint:linear-gradient(#fffbe6,#f5e8ad)}
.post-body{padding:16px 18px 13px}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.av{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:hsl(var(--h,90) 38% 40%);color:#fff;font:600 14px/1 var(--sans);text-transform:uppercase}
.who-t{min-width:0}
.who-t b{display:block;font:600 14.5px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-t span{display:block;font:400 12.5px/1.3 var(--sans);color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plat{flex:none;margin-left:auto;width:22px;height:22px}
.post blockquote{margin-top:12px}
.post blockquote p{font:400 16.5px/1.5 var(--sans);color:#151614;overflow-wrap:break-word}
.post-foot{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:12px;font:400 12.5px/1 var(--sans);color:var(--ink-3)}
.post-foot a{text-decoration:none;color:var(--ink-3);transition:color .15s}
.post-foot a:hover{color:var(--ink)}

/* a GIF between the posts */
.gif{display:block;width:84%;padding:6px 0 4px;margin-left:auto;margin-right:4%}
.gif:nth-of-type(even){margin-left:4%;margin-right:auto}
.gif .win{transform:rotate(var(--r,0deg));transition:transform .3s var(--spring)}
.gif:hover .win{transform:rotate(0) scale(1.015)}
.gif-box{position:relative;background:#e9e9e5}
.gif-box video{width:100%;height:100%;object-fit:cover}
.gif figcaption{display:flex;justify-content:center;gap:10px;margin-top:10px;font:400 12.5px/1.3 var(--sans);color:var(--ink-3)}
.gif figcaption a{text-decoration:none;color:#a2a69e}
.gif figcaption a:hover{color:var(--ink)}
.it .gif-box{height:auto}

/* the wall's sticky note */
.wnote{display:block;width:86%;margin:8px auto 28px;padding:22px 20px 20px;background:linear-gradient(#fff6a6,#ffef7a);box-shadow:0 18px 30px -18px rgba(90,80,0,.55),0 2px 4px rgba(90,80,0,.15);font:600 27px/1.08 var(--hand);color:#3a3410;transform:rotate(var(--r,-2deg));clip-path:polygon(0 0,100% 0,100% 86%,90% 100%,0 100%)}
.wnote small{display:block;margin-top:8px;font-size:21px;color:#7a6c17}

/* the dictionary card */
.defn{display:block;padding:22px 24px 20px;border-radius:11px;background:#fffdf6;border:1px solid rgba(11,11,11,.14);box-shadow:var(--win-shadow);font-family:var(--serif)}
.defn-word{font:700 30px/1.05 var(--serif);letter-spacing:-.01em}
.defn-ipa{margin-top:6px;font:400 13px/1.3 var(--mono);color:var(--ink-3)}
.defn-ipa i{font-family:var(--serif);font-size:15px}
.defn-text{margin-top:12px;font-size:18px;line-height:1.45;color:#22241f}
.defn-see{margin-top:12px;font-size:15px;font-style:italic;color:var(--ink-3)}

/* ---------- the fix ---------- */
.turn{padding:140px 24px 40px;max-width:1200px;margin:0 auto;text-align:center}
.big{margin-top:22px;font:600 clamp(44px,6.4vw,92px)/.98 var(--sans);letter-spacing:-.055em}
.lede{max-width:33em;margin:26px auto 0;font-size:19px;line-height:1.55;color:var(--ink-2)}
.row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:72px;align-items:center;margin-top:120px;text-align:left}
.row.flip .shot-wrap{order:2}
.shot-wrap{position:relative}
.row-gif{position:absolute;z-index:2;width:clamp(170px,19vw,236px);transform:rotate(var(--r,0deg));transition:transform .35s var(--spring)}
.row-gif:hover{transform:rotate(0) scale(1.03)}
.row-gif figcaption{width:max-content;max-width:100%;margin:9px auto 0;padding:3px 9px;border-radius:7px;background:rgba(241,242,238,.94);text-align:center;font:400 12.5px/1.3 var(--sans);color:var(--ink-2)}
.rg-top{left:-54px;top:-66px;--r:-5deg}
.rg-bottom{right:-52px;bottom:-58px;--r:5deg}
.shot{border-radius:14px}
.shot img{width:100%}
.row-copy h3{margin-top:26px;font:600 30px/1.12 var(--sans);letter-spacing:-.035em}
.row-copy p:not(.bubble){margin-top:12px;font-size:18px;color:var(--ink-2);max-width:26em}
.bubble{display:inline-block;max-width:100%;padding:13px 21px 14px;border-radius:26px;font:500 21px/1.3 var(--sans);letter-spacing:-.015em;min-height:1.3em}
.bubble.me{border-bottom-right-radius:8px;background:linear-gradient(180deg,#f3ffd2 0%,#dcf583 52%,#cdee62 100%);border:1px solid #8aa82a;box-shadow:inset 0 2px 0 rgba(255,255,255,.75),0 14px 26px -14px rgba(98,140,8,.7)}
.bubble.tutor{border-bottom-left-radius:8px;background:linear-gradient(180deg,#fff,#ececea);border:1px solid rgba(11,11,11,.2);box-shadow:inset 0 2px 0 #fff,0 14px 26px -16px rgba(11,11,11,.45)}
.bubble.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:3px;vertical-align:-.15em;background:currentColor;animation:blink 1s steps(1) infinite}

/* ---------- the ticket ---------- */
.get{padding:150px 24px 130px;text-align:center;overflow:hidden}
.ticket{display:grid;grid-template-columns:minmax(0,1fr) 210px;max-width:880px;margin:64px auto 0;text-align:left;transform:rotate(-1.4deg);filter:drop-shadow(0 26px 34px rgba(24,28,22,.2)) drop-shadow(0 3px 5px rgba(24,28,22,.1));transition:transform .5s var(--spring)}
.ticket:hover,.ticket:focus-within,.ticket.issued{transform:rotate(0)}
.t-main,.t-stub{position:relative;background:repeating-linear-gradient(-45deg,rgba(11,11,11,.016) 0 2px,transparent 2px 9px),#fffdf2}
.t-main{padding:36px 40px 32px;border-radius:20px 0 0 20px;-webkit-mask:radial-gradient(circle 15px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 15px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 15px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 15px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.t-stub{padding:34px 26px 30px;border-radius:0 20px 20px 0;border-left:2px dashed rgba(11,11,11,.22);-webkit-mask:radial-gradient(circle 15px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 15px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 15px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 15px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.t-admit{font:400 12px/1 var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--stamp)}
.t-title{margin-top:14px;font:400 36px/1 var(--sans);letter-spacing:-.05em}
.t-title b{font-weight:650}
.t-title span{margin-left:12px;font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);vertical-align:.45em}
.t-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:26px}
.t-form input[type=email]{grid-column:1/-1}
.t-form input,.t-form select{height:52px;padding:0 16px;border-radius:13px;border:1px solid rgba(11,11,11,.2);background:#fff;font-size:16px;box-shadow:inset 0 2px 3px rgba(11,11,11,.05);outline:none;transition:border-color .15s,box-shadow .15s}
.t-form input::placeholder{color:#a3a79f}
.t-form select{appearance:none;-webkit-appearance:none;padding-right:40px;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23868b84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center/14px}
.t-form select[data-empty="true"]{color:#868b84}
.t-form input:focus,.t-form select:focus{border-color:#86a524;box-shadow:0 0 0 4px rgba(217,244,125,.65)}
.t-form input[aria-invalid="true"]{border-color:#c2452c;box-shadow:0 0 0 4px rgba(194,69,44,.14)}
.t-form .pill{height:52px;font-size:17px}
.t-form .pill[disabled]{opacity:.7;cursor:progress}
.ticket.issued .t-form .pill[disabled]{opacity:.9;cursor:default}
.pj-go[disabled]{opacity:.6;cursor:default}
.linkish{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.t-fine{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.t-fine.ok{color:#3f6a1a}
.t-fine.err{color:#b4402b}
.t-k{font:400 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}
.t-mark{width:54px;height:54px;margin-bottom:24px;transform:rotate(-6deg);filter:drop-shadow(0 6px 10px rgba(24,28,22,.22))}
.t-stub .t-k~.t-k{margin-top:20px}
.t-v{margin-top:9px;font:500 15px/1.3 var(--sans)}
.t-stamp{position:absolute;right:18px;bottom:24px;padding:7px 12px 6px;border:3px solid var(--stamp);border-radius:9px;color:var(--stamp);font:800 15px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:rotate(-14deg) scale(1.6);transition:transform .4s var(--spring),opacity .2s}
.ticket.issued .t-stamp{opacity:.92;transform:rotate(-14deg) scale(1)}

/* ---------- the footer ---------- */
.foot{padding:30px 24px 28px;overflow:hidden}
.foot-big{text-align:center;font:400 clamp(84px,20vw,300px)/.9 var(--sans);letter-spacing:-.05em;color:rgba(11,11,11,.07);user-select:none;margin-bottom:.2em}
.foot-big b{font-weight:650}
.foot-row{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.foot-row nav{display:flex;gap:22px}
.foot-row a{color:var(--ink-2);text-decoration:none}
.foot-row a:hover{color:var(--ink)}
.kao-s{margin-left:6px;color:var(--ink-2)}
.foot-copy{font:400 12px/1 var(--mono);letter-spacing:.04em}

/* ---------- narrower desks ---------- */
@media (max-width:1360px){.desk-items{--k:.9}}
@media (max-width:1220px){
  .desk-items{--k:.8}
  .d3{--x:-170px;width:340px}
  .d11,.d12{display:none}
  .d8{--x:-480px;--y:566px}
}
@media (max-width:1040px){
  .desk{padding-top:310px}
  .desk-items{--k:1}
  .d1,.d6,.d7,.d8,.d9,.d12,.d13{display:none}
  .d2{--x:-372px;--y:64px;--r:-4deg}
  .d3{--x:-160px;--y:92px;width:300px}
  .d4{--x:186px;--y:58px;width:210px}
  .d5{--x:120px;--y:176px;--r:-7deg}
  .d10{--x:-360px;--y:252px}
  .row{gap:44px}
}
@media (max-width:760px){
  html{scroll-padding-top:56px}
  body{font-size:16px;background-size:26px 26px}
  .bar-in{height:52px;grid-template-columns:auto 1fr auto;padding:0 16px}
  .bar-link,.bar-status,.bar-clock,.brand{display:none}
  .bar-mark{order:-1}
  .bar-left{padding-left:8px}
  .desk{padding:170px 16px 64px}
  .desk-items{--k:1}
  .d3,.d7,.d13{display:none}
  .d2{left:12px;--y:24px;--r:-5deg;width:132px;padding:14px 12px 13px;font-size:18px}
  .d2 .note-2{font-size:16px}
  .d4{left:auto;right:-26px;--y:30px;width:150px;--r:4deg}
  .d4 figcaption{display:none}
  .d5,.d10,.d12{display:none}
  .d11{display:block;left:42%;--y:118px;--r:-6deg;font-size:16px}
  .wordmark{font-size:clamp(44px,14.2vw,80px)}
  .tagline{margin-top:14px;font-size:18px}
  .ctas{flex-direction:column;align-items:center;gap:16px;margin-top:30px}
  .pill-join,.ctas .pill-white{width:min(100%,330px)}
  .ctas .cta-col{width:100%}
  .under{margin-top:9px}
  .demo{margin-top:44px}
      .wall{padding:96px 16px 30px}
  .stamp{left:auto;right:12px;top:-14px}
  .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:26px -16px 32px;padding:0 16px 4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none}
  .wall-grid{columns:1}
  .turn{padding:96px 16px 20px}
  .lede{font-size:17.5px}
  .row,.row.flip{grid-template-columns:1fr;gap:28px;margin-top:80px}
  .row.flip .shot-wrap{order:0}
  .row-gif{width:150px}
  .rg-top{left:-6px;top:-46px}
  .rg-bottom{left:auto;bottom:auto;right:-8px;top:-46px;--r:4deg}
  .row-gif figcaption{display:none}
  .row-copy h3{margin-top:20px;font-size:25px}
  .bubble{font-size:18px}
  .get{padding:100px 16px 90px}
  .ticket{grid-template-columns:1fr;transform:rotate(-1deg)}
  .t-main{padding:28px 22px 24px;border-radius:18px 18px 0 0;-webkit-mask:none;mask:none}
  .t-stub{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 14px;padding:22px 22px 26px;border-left:0;border-top:2px dashed rgba(11,11,11,.22);border-radius:0 0 18px 18px;-webkit-mask:none;mask:none}
  .t-stub .t-mark{grid-row:span 2;width:44px;height:44px;margin:0 6px 0 0}
  .t-stub .t-k~.t-k{margin-top:0}
  .t-stub .t-v{margin:0}
  .t-title{font-size:30px}
  .t-title span{display:block;margin:10px 0 0;vertical-align:0}
  .t-form{grid-template-columns:1fr}
  .foot-row{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .it,.it.bob{animation:none}
  .seal svg,.mq,.cur,.term .blk,.bubble.typing::after{animation:none}
  .mq{justify-content:center;width:auto}
  .mq span:not(:first-child){display:none}
}

/* ---------- the privacy document and the 404 dialog ---------- */
.doc{padding:72px 24px 110px}
.doc-win{max-width:760px;margin:0 auto}
.doc-body{padding:44px 56px 48px}
.doc-body h1{font:600 clamp(36px,5vw,52px)/1.02 var(--sans);letter-spacing:-.045em}
.doc-lede{margin-top:16px;font-size:19px;color:var(--ink-2)}
.doc-body h2{margin-top:34px;font:600 19px/1.3 var(--sans);letter-spacing:-.015em}
.doc-body p:not(.doc-lede){margin-top:8px;color:#2c2f2b}
.doc-fine{margin-top:36px!important;font:400 12.5px/1.4 var(--mono);color:var(--ink-3)!important}
.lost{min-height:100vh;display:grid;place-items:center;align-content:center;gap:28px;padding:24px}
.lost-win{width:min(420px,100%)}
.lost-body{padding:30px 32px 32px;text-align:center}
.lost-mark{width:52px;height:52px;margin:0 auto 18px}
.lost-body h1{font:600 22px/1.25 var(--sans);letter-spacing:-.02em}
.lost-body p{margin:8px 0 22px;font-size:15.5px;color:var(--ink-2)}
.lost-kao{font-size:24px;color:var(--ink-3)}
@media (max-width:760px){.doc{padding:36px 14px 70px}.doc-body{padding:30px 22px 34px}.bar-right .bar-cta{display:inline-flex}}

/* ---------- the drop: the learner's own things get thrown into the window ---------- */
.drop-stage{position:relative}
.dz-veil{position:absolute;inset:0;background:rgba(250,251,247,.74);opacity:0}
.dz{position:absolute;left:16%;right:16%;top:20%;bottom:24%;display:grid;place-items:center;border:2px dashed #8fb12a;border-radius:16px;background:rgba(217,244,125,.18);opacity:0}
.dz span{grid-area:1/1;padding:0 12px;font:500 clamp(11px,1vw,13.5px)/1.3 var(--mono);color:#3f500d;text-align:center}
.dz-b{opacity:0}
.dz-toast{position:absolute;left:50%;bottom:9%;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 12px;border-radius:999px;background:var(--ink);color:#fff;font:500 13.5px/1 var(--sans);white-space:nowrap;opacity:0;translate:-50% 10px;box-shadow:0 14px 26px -12px rgba(0,0,0,.55)}
.dz-toast svg{width:15px;height:15px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fly{position:absolute;z-index:4;left:50%;top:calc(50% + 12px);pointer-events:none;opacity:0;--sx:-430px;--sy:-30px;--arc:-150px}
.fly i{display:block;translate:-50% -50%}
.f2{--sx:-390px;--sy:70px;--arc:-120px}
.f3{--sx:-450px;--sy:-100px;--arc:-170px}
.repo{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 11px;border-radius:13px;background:#fff;border:1px solid rgba(11,11,11,.18);box-shadow:0 18px 30px -14px rgba(24,28,22,.5);white-space:nowrap}
.repo svg{width:24px;height:24px;fill:#0b0b0b;flex:none}
.repo b{display:block;font:600 13.5px/1.2 var(--sans)}
.repo small{display:block;margin-top:2px;font:400 11px/1.2 var(--mono);color:var(--ink-3)}
.pdf,.notes{display:flex;flex-direction:column;align-items:center;gap:7px}
.pdf small,.notes small{padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.9);font:400 11px/1.3 var(--mono);color:#2b2e2a;white-space:nowrap}
.pdf-page{position:relative;width:70px;height:90px;border-radius:5px;background:#fff repeating-linear-gradient(transparent 0 9px,rgba(11,11,11,.09) 9px 11px) 12px 16px/46px 54px no-repeat;border:1px solid rgba(11,11,11,.18);box-shadow:0 18px 30px -14px rgba(24,28,22,.5)}
.pdf-band{position:absolute;left:-8px;bottom:12px;padding:4px 8px;border-radius:4px;background:#e5322d;color:#fff;font:800 11px/1 var(--sans);letter-spacing:.04em}
.notes-page{display:block;width:84px;height:96px;padding:12px 10px;background:#fff7b8 repeating-linear-gradient(transparent 0 17px,rgba(70,110,190,.22) 17px 18px);box-shadow:0 18px 30px -14px rgba(90,80,0,.5);font:700 18px/1.05 var(--hand);color:#3a3410;rotate:3deg}
.rg-throw{left:-58px;bottom:-44px;--r:-6deg}

@keyframes veil{0%{opacity:0}6%{opacity:1}62%{opacity:1}70%,100%{opacity:0}}
@keyframes dz{0%{opacity:0;scale:.96}6%{opacity:1;scale:1}19%{scale:1}21%{scale:1.05}24%{scale:1}34%{scale:1}36%{scale:1.05}39%{scale:1}49%{scale:1}51%{scale:1.05}54%{scale:1}62%{opacity:1}68%,100%{opacity:0;scale:1}}
@keyframes dza{0%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes dzb{0%,53%{opacity:0}56%,64%{opacity:1}67%,100%{opacity:0}}
@keyframes toast{0%,64%{opacity:0;translate:-50% 10px}68%,90%{opacity:1;translate:-50% 0}95%,100%{opacity:0;translate:-50% 0}}
@keyframes fly-x{0%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(-24deg);animation-timing-function:linear}2%{opacity:1}12.5%{opacity:1;transform:translate(0,0) rotate(5deg);animation-timing-function:ease-in}17%{opacity:0;transform:translate(0,0) rotate(5deg) scale(.22)}100%{opacity:0;transform:translate(0,0) scale(.22)}}
@keyframes fly-y{0%{translate:-50% -50%;animation-timing-function:cubic-bezier(.2,.65,.4,1)}6%{translate:-50% calc(-50% + var(--arc));animation-timing-function:cubic-bezier(.6,0,.85,.45)}12.5%,100%{translate:-50% -50%}}
[data-drop] .dz-veil{animation:veil 8s infinite paused}
[data-drop] .dz{animation:dz 8s infinite paused}
[data-drop] .dz-a{animation:dza 8s infinite paused}
[data-drop] .dz-b{animation:dzb 8s infinite paused}
[data-drop] .dz-toast{animation:toast 8s infinite paused}
[data-drop] .fly{animation:fly-x 8s infinite backwards paused}
[data-drop] .fly i{animation:fly-y 8s infinite backwards paused}
[data-drop] .f1,[data-drop] .f1 i{animation-delay:.6s}
[data-drop] .f2,[data-drop] .f2 i{animation-delay:1.8s}
[data-drop] .f3,[data-drop] .f3 i{animation-delay:3s}
[data-drop].playing :is(.dz-veil,.dz,.dz-a,.dz-b,.dz-toast,.fly,.fly i){animation-play-state:running}
@media (max-width:760px){
  .fly{--sx:-30px;--sy:-250px;--arc:-50px}
  .f2{--sx:40px;--sy:-270px;--arc:-40px}
  .f3{--sx:-70px;--sy:-290px;--arc:-60px}
  .repo{padding:8px 11px 8px 9px}.repo b{font-size:12px}
  .pdf-page{width:56px;height:72px}.notes-page{width:70px;height:80px;font-size:15px}
  .rg-throw{left:auto;bottom:auto;right:-8px;top:-46px;--r:4deg}
}
@media (prefers-reduced-motion:reduce){.fly,.dz,.dz-veil,.dz-toast{display:none}}

/* the GIF that asks the first row's question, above the bubble */
.copy-gif{display:block;width:min(236px,62%);margin:0 0 26px 6px;transform:rotate(3deg);transition:transform .35s var(--spring)}
.copy-gif:hover{transform:rotate(0) scale(1.03)}
.copy-gif figcaption{width:max-content;max-width:100%;margin:9px auto 0;font:400 12.5px/1.3 var(--sans);color:var(--ink-3)}
@media (max-width:760px){.copy-gif{width:180px;margin-bottom:20px}}

/* ---------- the video player, heyclicky's: a glass "play video" pill, then a big white pause/play, a thin bar, the sound ---------- */
.vid figcaption{margin-top:14px;text-align:center;font:400 13.5px/1.4 var(--sans);color:var(--ink-3)}
.vid-frame{position:relative;aspect-ratio:1800/1074;border:1px solid #000;border-radius:16px;overflow:hidden;background:#e9e8ea;box-shadow:0 10px 24px rgba(0,0,0,.12);isolation:isolate}
.vid-frame::after{content:"";position:absolute;inset:0;z-index:7;border-radius:inherit;box-shadow:inset 0 1px 1px rgba(255,255,255,.8);pointer-events:none}
.vid-poster,.vid-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#141414}
.vid-poster{z-index:1;transition:opacity .35s}
.vid-frame.played .vid-poster{opacity:0;pointer-events:none}
.play-cta{position:absolute;z-index:6;left:50%;top:50%;display:flex;align-items:center;gap:10px;height:40px;padding:0 20px 1px 16px;border-radius:100px;border:1px solid #626262;
  background:linear-gradient(rgba(255,255,255,.3),rgba(231,231,231,.3) 42%,rgba(251,251,251,.3)),rgba(18,18,18,.3);-webkit-backdrop-filter:blur(6px) saturate(1.5);backdrop-filter:blur(6px) saturate(1.5);
  box-shadow:0 10px 24px rgba(0,0,0,.12);color:#fff;font:500 18px/1 var(--sans);letter-spacing:-.54px;text-shadow:0 1px 2px rgba(0,0,0,.3);white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;
  transform:translate(var(--gx,0px),var(--gy,0px)) translate(-50%,-50%);transition:opacity .2s,transform .18s var(--ease)}
.play-cta .gloss{position:absolute;z-index:2;top:3px;left:12px;right:12px;height:12px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.08));pointer-events:none}
.play-cta .tri{position:relative;z-index:2;width:20px;height:20px;fill:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.play-cta span{position:relative;z-index:2}
.play-cta.follow{transition:opacity .2s}
.vid-frame.cursor-glass{cursor:none}
.vid-frame.played .play-cta{opacity:0;pointer-events:none}
.vid-ctrl{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity .25s}
.vid-frame.played:hover .vid-ctrl,.vid-frame.played.paused .vid-ctrl,.vid-frame.played:focus-within .vid-ctrl{opacity:1;pointer-events:auto}
.vid-frame.ctrl-idle .vid-ctrl{opacity:0!important;pointer-events:none!important}
.vid-frame.ctrl-idle{cursor:none}
.vid-toggle{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.vid-toggle svg{width:44px;height:44px;fill:#fff;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.vid-toggle .i-play{display:none}
.vid-frame.paused .vid-toggle .i-play{display:block}
.vid-frame.paused .vid-toggle .i-pause{display:none}
.vid-bar{position:absolute;left:12px;right:12px;bottom:12px;height:5px;border-radius:3px;background:rgba(255,255,255,.38);cursor:pointer}
.vid-bar::before{content:"";position:absolute;inset:-10px 0}
.vid-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:#fff}
.vid-vol{position:absolute;right:12px;top:12px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.vid-vol svg{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.vid-vol .spk{fill:#fff}
.vid-vol .w1,.vid-vol .w2,.vid-vol .x{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.vid-vol .x{display:none}
.vid-frame.muted .vid-vol .x{display:block}
.vid-frame.muted .vid-vol .w1,.vid-frame.muted .vid-vol .w2{display:none}
.vid-toggle:focus-visible,.vid-vol:focus-visible,.play-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vid-bar:focus-visible{outline:2px solid #fff;outline-offset:4px}
.shot-vid figcaption{margin-top:12px}
@media (max-width:760px){
  .play-cta{height:34px;padding:0 16px 1px 13px;gap:8px;font-size:15.5px}
  .play-cta .tri{width:17px;height:17px}
  .vid-toggle svg{width:36px;height:36px}
  .vid-frame{border-radius:12px}
}


/* the film at the top: it loops without sound until someone asks for it */
.vid-frame.ambient .vid-poster{opacity:0;pointer-events:none}
.vid-frame.ambient .play-cta{left:auto;right:16px;top:auto;bottom:16px;height:36px;padding:0 17px 1px 13px;font-size:15.5px;transform:none}
.vid-frame.ambient .play-cta .tri{width:17px;height:17px}

/* the demos: one player, the question in the window's title bar */
.demos{margin-top:104px}
.demos-h{margin-top:20px;font:600 clamp(32px,4.3vw,56px)/1.02 var(--sans);letter-spacing:-.045em}
.demos-sub{max-width:31em;margin:16px auto 0;font-size:18px;line-height:1.5;color:var(--ink-2)}
.demo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:30px auto 28px}
.demo-chips button{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(11,11,11,.18);background:linear-gradient(#fff,#efefec);box-shadow:inset 0 1px 0 #fff;font:500 14.5px/1 var(--sans);color:var(--ink-2);cursor:pointer}
.demo-chips button:hover{color:var(--ink)}
.demo-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.demo-chips button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.demo-vid{max-width:940px;margin:0 auto;text-align:left}
.demo-win{border-radius:14px}
.demo-win .tb{height:44px}
.demo-win .tb span{left:74px;right:74px;font:500 15px/44px var(--sans);color:#32352f}
.demo-win .vid-frame{border:0;border-radius:0;box-shadow:none}
.demo-win .vid-frame::after{display:none}
.demo-vid figcaption{margin-top:16px;text-align:center;font:400 16px/1.45 var(--sans);color:var(--ink-2)}
@media (max-width:760px){
  .demos{margin-top:72px}
  .demo-chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;margin:24px -16px 22px;padding:0 16px 4px;scrollbar-width:none}
  .demo-chips::-webkit-scrollbar{display:none}
  .demo-chips button{flex:none}
  .demo-win .tb{height:auto;min-height:40px;padding:9px 12px}
  .demo-win .tb i{display:none}
  .demo-win .tb span{position:static;white-space:normal;text-align:left;font-size:14px;line-height:1.3}
  .vid-frame.ambient .play-cta{right:9px;bottom:9px;height:30px;padding:0 12px 1px 9px;font-size:13px;gap:7px}
  .vid-frame.ambient .play-cta .tri{width:14px;height:14px}
}