/* Kind Words. Green field, pixel type, one deck of cards.

   The idea the whole look comes from. A recommendation leaves LinkedIn as pixels
   and is rebuilt on your side, so the display face is a pixel face and the photo
   on every card is made of the pixels that fly over. Nothing sits there first.

   Type. Geist Pixel for everything that is display, Geist for everything you read.
   Geist is already the face on his shipped card, so the two halves are one family.
   Both from Google Fonts.
   Color. One clear green field, ink type, white for LinkedIn and for the words.
   Cosplay is near black with orange and Word of Mouth is near black with a pale
   blue dot field, so Kind Words is the light one of the three. Pink, yellow,
   orange and bone are all ruled out for this tool.
   The finish is a deck, the package every recommendation came over into, and each
   card flips over in place to show what the person wrote. Four card styles for fun,
   8-bit first, then Photo, Postcard and Poster. Kalam from Google Fonts on the postcard.
   References, all on Mobbin. Base, a clean field with pixel type at scale
   (sites/sections/21207a98-ae6d-4a94-ab15-c5456b4dc02c). FREITAG, pixel display
   type with one green (sites/sections/cac5c6fe-01b5-4769-8972-a2d70c190673).
   Maze, a page changing state in blocks (sites/sections/d99d72ef-114d-4712-b883-f4506d57fe05).
   incident.io, a card opening in place to show more, no modal
   (sites/sections/431e7ab9-5f19-40bb-b552-504c79ea0e16).
   Motion. Layout never animates grid columns. Things move by transform, rows
   collapse by grid rows, and every pixel is drawn on one canvas from live
   positions, so nothing jumps. */

@property --p { syntax: '<percentage>'; inherits: true; initial-value: -12%; }

:root{
  --field:#3FD67F;
  --ink:#0B0D0C;
  --ink-2:rgba(11,13,12,.74);
  --paper:#FFFFFF;
  --li:#0A66C2;
  --li-ink:rgba(0,0,0,.9);
  --li-mut:rgba(0,0,0,.6);
  --li-line:#E8E8E8;
  --li-font:-apple-system,system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --px:'Geist Pixel',ui-monospace,monospace;
  --text:'Geist',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,4.4vw,64px);
  --cw:276px; --ch:414px; --ww:440px; --liw:clamp(360px,34vw,440px);
  --out:cubic-bezier(.22,1,.36,1);
  --inout:cubic-bezier(.65,0,.35,1);
  --rise:cubic-bezier(.28,1.28,.42,1);
  --notch:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}
*{box-sizing:border-box;margin:0}
html{background:var(--field)}
body{min-height:100vh;min-height:100dvh;background:var(--field);color:var(--ink);font-family:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block}

/* ---------- top ---------- */
.top{height:72px;display:flex;align-items:center;gap:22px;padding:0 var(--gut);position:relative;z-index:2}
.wm{font:400 22px/1 var(--px);letter-spacing:.01em;white-space:nowrap}
.status{font:500 15px/1.3 var(--text);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.status.say{animation:say .5s var(--out) both}
@keyframes say{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.count{margin-left:auto;display:flex;align-items:baseline;gap:10px;opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--out),transform .6s var(--out)}
body:not([data-at="rest"]) .count{opacity:1;transform:none}
.count b{display:inline-block;min-width:1.2ch;text-align:right;font:400 34px/1 var(--px);font-variant-numeric:tabular-nums}
.count b.tick{animation:tick .42s var(--out)}
@keyframes tick{from{transform:translateY(38%);opacity:0}to{transform:none;opacity:1}}
.count span{font:500 15px var(--text);color:var(--ink-2);white-space:nowrap}

/* ---------- stage. one screen on desktop, every layer placed, only transforms move ---------- */
.stage{position:relative;height:calc(max(680px,100vh) - 72px);height:calc(max(680px,100dvh) - 72px);overflow:clip}
.pin{min-height:0}

.pitch{position:absolute;left:var(--gut);top:50%;width:min(640px,calc(100% - var(--liw) - 3 * var(--gut) - 24px));
  transform:translateY(-52%);z-index:1}
.pitch h1{font:400 clamp(40px,4.9vw,78px)/1.02 var(--px);letter-spacing:.012em;margin-bottom:26px;text-wrap:balance;
  /* Geist Pixel ships one light weight. Each pixel is doubled sideways, the way 8-bit games set bold */
  text-shadow:.045em 0 0 currentColor}
.pitch h1 .w{display:inline-block;white-space:nowrap}
.pitch h1 .c{opacity:0;animation:on .01s steps(1) forwards;animation-delay:calc(160ms + var(--d) * 19ms)}
@keyframes on{to{opacity:1}}
.lede{font:400 19px/1.5 var(--text);color:var(--ink-2);max-width:31em;margin-bottom:36px;text-wrap:pretty}
.demo{margin-top:18px;font:400 14px/1.45 var(--text);color:var(--ink-2)}
.pitch .pin>*{transition:opacity .5s var(--out),transform .7s var(--out)}
.pitch .pin>:nth-child(2){transition-delay:.05s}
.pitch .pin>:nth-child(3){transition-delay:.1s}
.pitch .pin>:nth-child(4){transition-delay:.14s}
body[data-at="run"] .pitch,body[data-at="done"] .pitch{pointer-events:none}
body[data-at="run"] .pitch .pin>*,body[data-at="done"] .pitch .pin>*{opacity:0;transform:translateY(-18px)}

/* the one action. an ink block with stepped pixel corners */
.go{height:62px;display:inline-flex;align-items:center;gap:14px;padding:0 28px 0 17px;border:0;background:var(--ink);color:#fff;
  font:500 18px/1 var(--text);letter-spacing:-.005em;clip-path:var(--notch);
  transition:transform .45s var(--out),background-color .25s,opacity .3s}
.go .bug{width:28px;height:28px;flex:none;border-radius:5px;background:url('assets/li-bug.png') center/cover no-repeat}
.go:hover{background:#1D221F;transform:translateY(-2px)}
.go:active{transform:translateY(1px) scale(.985);transition-duration:.12s}
.go[aria-busy="true"]{opacity:.55;pointer-events:none}
.go:focus-visible,.btn:focus-visible,.copy1:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--field)}
.btn.alt:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}

/* ---------- LinkedIn, drawn as it looks, on the right ---------- */
.li{position:absolute;right:var(--gut);top:50%;width:var(--liw);height:min(600px,calc(100% - 56px));transform:translateY(-50%);z-index:1;
  transition:transform .9s var(--out),opacity .6s var(--out)}
.li>.pin{height:100%}
body[data-at="done"] .li{opacity:0;transform:translate(90px,-50%);pointer-events:none}
.li-card{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;
  font-family:var(--li-font);color:var(--li-ink);
  box-shadow:0 1px 2px rgba(0,40,20,.12),0 40px 80px -36px rgba(0,50,25,.55)}
.li-head{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.li-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;background:#eee}
.li-head b{display:block;font-size:16px;font-weight:600}
.li-head span span{display:block;font-size:13px;color:var(--li-mut)}
.li-head svg{margin-left:auto;width:22px;height:22px;fill:var(--li);flex:none}
.li-title{padding:16px 20px 0;font-size:20px;font-weight:600}
.li-tabs{display:flex;gap:22px;padding:8px 20px 0;border-bottom:1px solid var(--li-line);font-size:14px;font-weight:600;color:var(--li-mut)}
.li-tabs span{padding:10px 0}
.li-tabs .on{color:#01754F;box-shadow:inset 0 -2px 0 #01754F}
.li-rows{flex:1;min-height:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}

/* a row. it collapses by grid rows, and the scan erases it left to right as its pixels leave */
.row{display:grid;grid-template-rows:1fr;position:relative;transition:grid-template-rows .5s var(--inout)}
.row>.in{min-height:0;overflow:hidden}
.row .body{display:flex;gap:12px;padding:16px 20px;border-bottom:1px solid var(--li-line);
  -webkit-mask-image:linear-gradient(90deg,transparent var(--p),#000 calc(var(--p) + 7%));
  mask-image:linear-gradient(90deg,transparent var(--p),#000 calc(var(--p) + 7%))}
.row .f{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;background:#eee}
.row .rt{min-width:0}
.row b{display:block;font-size:14px;font-weight:600}
.row .t,.row .d{display:block;font-size:12px;color:var(--li-mut);margin-top:1px}
.row p{margin-top:8px;font-size:14px;line-height:1.43;color:var(--li-ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.row::after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:10px;margin-left:-5px;background:var(--field);
  box-shadow:0 0 22px 6px rgba(63,214,127,.55);opacity:0;pointer-events:none}
.row.scan{animation:scan var(--scan,520ms) linear forwards}
.row.scan::after{opacity:1;transition:opacity .12s}
.row.scanned::after{opacity:0;transition:opacity .2s}
@keyframes scan{from{--p:-12%}to{--p:112%}}
.row.gone{grid-template-rows:0fr}
.row.rise{animation:rise .6s var(--out) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* the plate that rises out of the page to sign in. part of the page, never a window */
.plate{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:14px;padding:16px 18px 20px;
  border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.07),0 26px 50px -18px rgba(0,50,25,.55);
  transform:translateY(calc(100% + 24px));transition:transform .7s var(--rise)}
.plate.up{transform:none}
.plate.down{transform:translateY(calc(100% + 24px));transition:transform .55s var(--inout)}
.plate img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;background:#eee}
.plate b{display:block;font-size:15px;font-weight:600}
.plate span span{display:block;font-size:13px;color:var(--li-mut);margin-top:1px}
.plate .bug{margin-left:auto;width:26px;height:26px;border-radius:5px;background:url('assets/li-bug.png') center/cover no-repeat;flex:none}
.plate .bar{position:absolute;left:0;bottom:0;height:6px;width:100%;background:var(--li);transform-origin:0 50%;transform:scaleX(0)}
.plate.up .bar{animation:fill 1s steps(12) forwards .15s}
.plate.ok .bar{background:var(--field)}
@keyframes fill{to{transform:scaleX(1)}}

/* ---------- the table. the press where each card is built, and the deck they are dealt into ---------- */
.table{position:absolute;inset:0;pointer-events:none;z-index:1}
.deck,.press{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  transition:transform 1s var(--inout)}
.press{z-index:2}
.deck{z-index:1;outline:none}
body[data-at="run"] .deck{z-index:3}
body[data-at="done"] .deck{pointer-events:auto}
.pager{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:14px;transform:translate(-50%,0);
  opacity:0;visibility:hidden;transition:opacity .5s var(--out),visibility 0s .5s}
body[data-at="done"] .pager{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s var(--out) .9s,visibility 0s}
.pager #pos{min-width:6.2em;text-align:center;font:400 20px/1 var(--px);white-space:nowrap}
.pg{width:48px;height:48px;border:0;background:var(--ink);color:#fff;clip-path:var(--notch);display:grid;place-items:center;
  transition:background-color .2s,transform .3s var(--out)}
.pg svg{width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}
.pg:hover{background:#1D221F;transform:translateY(-2px)}
.pg:active{transform:translateY(1px)}
.pg:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--field)}

/* ---------- a card. built at 276 by 414, the size of his shipped card, and scaled by its container ---------- */
.card{position:absolute;left:-138px;top:-207px;width:276px;height:414px;perspective:1600px;
  transition:transform .75s var(--out)}
/* the card leaves the press at once and passes over the next person as they draw in underneath */
.card.dealing{transition:transform .7s var(--out)}
.card .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.25,.45,1)}
.card.flipped .flip{transform:rotateY(180deg)}
.card.still .flip{transition:none}
.card.spin .flip{animation:spin .7s cubic-bezier(.45,0,.3,1)}
@keyframes spin{from{transform:rotateY(var(--from,0deg))}to{transform:rotateY(calc(var(--from,0deg) + 360deg))}}
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px}
.back{transform:rotateY(180deg)}
body[data-at="done"] .card.lead{cursor:pointer}
body[data-at="done"] .card.lead:focus-visible{outline:none}
body[data-at="done"] .card.lead:focus-visible .face{box-shadow:0 0 0 4px var(--ink)}
.card .px{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:5;transition:opacity .45s linear}
.card.clear .px{opacity:0}
.card .front>*:not(.px){opacity:0;transition:opacity .4s}
.card.clear .front>*:not(.px){opacity:1}
.card .front .cap,.card .front .no{transform:translateY(8px);transition:opacity .45s var(--out),transform .6s var(--out)}
.card.named .front .cap,.card.named .front .no{transform:none}
.card:not(.named) .front .cap,.card:not(.named) .front .no{opacity:0!important}
.card .shot,.card .blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.card .lk{position:absolute;width:19px;height:19px;fill:rgba(255,255,255,.9)}
.card .q{min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.card .q::-webkit-scrollbar{display:none}
/* the fade at the bottom only shows when there is more to scroll, so a last line that fits is never dimmed */
.card .q:not(.over){-webkit-mask-image:none!important;mask-image:none!important}
/* only the top card's words scroll. a scroller on a card underneath gets its own layer on phones and paints through the top card */
.card:not(.lead) .q{overflow:hidden}
.card .q p+p{margin-top:.7em}
.copy1{border:0;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:background-color .2s,transform .3s var(--out)}
.copy1:hover{transform:translateY(-1px)}
.card .pm,.card .no,.card .more,.card .stamp{display:none}
/* once the deck is squared, only the top card shows a face. the ones under it are plain edges, so no one shows through */
.card .back>*{transition:opacity .35s}
body[data-at="done"] .card:not(.lead):not(.mover) .face>*{opacity:0!important;transition:opacity .12s!important}
/* only the photo style shows the softened photo and the round face on the back */
.card .blur,.card .bhead .av{display:none}

/* ===== 8-bit. the photo as the same chunky pixels that came across, a name plate, a dialog box for the words ===== */
body[data-style="bit"] .face{border-radius:0;clip-path:var(--notch)}
body[data-style="bit"] .front{background:var(--ink)}
body[data-style="bit"] .front .shot{top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);clip-path:var(--notch)}
body[data-style="bit"] .card .px{inset:0}
body[data-style="bit"] .front .no{display:block;position:absolute;top:20px;left:20px;padding:5px 8px 4px;background:var(--field);color:var(--ink);font:400 13px/1 var(--px);clip-path:var(--notch)}
body[data-style="bit"] .front .lk{top:22px;right:22px;filter:drop-shadow(0 1px 5px rgba(0,0,0,.45))}
body[data-style="bit"] .front .cap{position:absolute;left:18px;right:18px;bottom:18px;padding:12px 14px 11px;background:var(--ink);color:#fff;clip-path:var(--notch)}
body[data-style="bit"] .front .cap b{display:block;font:400 17px/1.15 var(--px)}
body[data-style="bit"] .front .cap span{display:block;margin-top:5px;font:400 11.5px/1.2 var(--px);color:var(--field);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-style="bit"] .back{background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:18px 16px 16px;gap:14px}
body[data-style="bit"] .bhead{display:flex;gap:12px;align-items:center}
body[data-style="bit"] .bhead .av{display:block;width:48px;height:48px;flex:none;object-fit:cover;object-position:50% 22%;clip-path:var(--notch)}
body[data-style="bit"] .bwho b{display:block;font:400 16px/1.15 var(--px)}
body[data-style="bit"] .bwho span{display:block;margin-top:5px;font:400 11px/1.3 var(--px);color:var(--field)}
body[data-style="bit"] .box{flex:1;min-height:0;position:relative;display:flex;padding:3px;background:#fff;clip-path:var(--notch)}
body[data-style="bit"] .box>.in{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ink);clip-path:var(--notch);padding:12px 12px 10px}
body[data-style="bit"] .q{flex:1;font:400 13px/1.55 var(--px);letter-spacing:.01em;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 18px),transparent);mask-image:linear-gradient(#000 calc(100% - 18px),transparent)}
body[data-style="bit"] .more{display:block;position:absolute;right:12px;bottom:10px;width:10px;height:6px;background:var(--field);
  clip-path:polygon(0 0,100% 0,100% 34%,80% 34%,80% 67%,60% 67%,60% 100%,40% 100%,40% 67%,20% 67%,20% 34%,0 34%);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
body[data-style="bit"] .bfoot{display:flex;align-items:center;gap:12px}
body[data-style="bit"] .copy1{height:38px;padding:0 16px;background:#fff;color:var(--ink);font:400 14px/1 var(--px);clip-path:var(--notch)}
body[data-style="bit"] .back .lk{position:static;margin-left:auto;width:17px;height:17px;fill:rgba(255,255,255,.7)}

/* ===== Photo. his shipped card on the front, the photo softened behind the words on the back ===== */
body[data-style="photo"] .front{background:rgb(31,32,39)}
body[data-style="photo"] .front .lk{top:14px;right:14px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}
body[data-style="photo"] .front .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;background:linear-gradient(transparent,rgba(10,11,14,.82) 58%)}
body[data-style="photo"] .front .cap b{display:block;font:600 18.048px/1.25 var(--text);letter-spacing:-.324864px}
body[data-style="photo"] .front .cap span{display:block;margin-top:2px;font:400 13px/1.35 var(--text);color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-style="photo"] .back{background:rgb(31,32,39);color:#fff;display:flex;flex-direction:column;padding:22px 20px 18px;gap:16px}
body[data-style="photo"] .back .blur{display:block;filter:blur(22px) saturate(1.25) brightness(.62);transform:scale(1.3)}
body[data-style="photo"] .back::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(12,13,16,.5),rgba(12,13,16,.72))}
body[data-style="photo"] .back>*{position:relative}
body[data-style="photo"] .back .blur{position:absolute}
body[data-style="photo"] .box{flex:1;min-height:0;display:flex;order:1}
body[data-style="photo"] .box>.in{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-style="photo"] .q{flex:1;font:400 15px/1.55 var(--text);letter-spacing:-.005em;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
body[data-style="photo"] .bhead{order:2;display:flex;gap:10px;align-items:center}
body[data-style="photo"] .bhead .av{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
body[data-style="photo"] .bwho b{display:block;font:600 14.5px/1.25 var(--text)}
body[data-style="photo"] .bwho span{display:block;font:400 12px/1.35 var(--text);color:rgba(255,255,255,.72)}
body[data-style="photo"] .bfoot{order:3;display:flex;align-items:center;gap:12px}
body[data-style="photo"] .copy1{height:38px;padding:0 18px;border-radius:19px;background:#fff;color:#111;font:500 14px/1 var(--text)}
body[data-style="photo"] .back .lk{position:static;margin-left:auto}

/* ===== Postcard. an instant photo on the front, the words in handwriting on the back, their pixel face as the stamp ===== */
body[data-style="post"] .face{border-radius:6px}
body[data-style="post"] .front{background:#fff}
body[data-style="post"] .front .shot{top:14px;left:14px;width:calc(100% - 28px);height:calc(100% - 98px);border-radius:2px}
body[data-style="post"] .front .lk{display:none}
body[data-style="post"] .front .cap{position:absolute;left:18px;right:84px;bottom:16px;color:var(--ink)}
body[data-style="post"] .front .cap b{display:block;font:700 23px/1.1 'Kalam',cursive;transform:rotate(-1.5deg);transform-origin:0 50%}
body[data-style="post"] .front .cap span{display:block;margin-top:5px;font:400 12px/1.3 var(--text);color:rgba(0,0,0,.58);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-style="post"] .front .pm{display:grid;place-items:center;position:absolute;right:14px;bottom:10px;width:66px;height:66px;border-radius:50%;
  border:2px solid rgba(20,40,90,.55);color:rgba(20,40,90,.72);font:700 9.5px/1.15 var(--text);text-align:center;padding:9px;transform:rotate(-12deg);
  box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5.5px rgba(20,40,90,.3)}
body[data-style="post"] .back{background:#fff;color:#1B1D22;display:flex;flex-direction:column;padding:18px 18px 16px;gap:12px}
body[data-style="post"] .bhead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}
body[data-style="post"] .bwho{order:1}
body[data-style="post"] .bwho b{display:block;font:700 20px/1.1 'Kalam',cursive}
body[data-style="post"] .bwho span{display:block;margin-top:4px;font:400 11.5px/1.35 var(--text);color:rgba(0,0,0,.58)}
body[data-style="post"] .bhead .av{display:block;order:2;width:46px;height:58px;flex:none;object-fit:cover;object-position:50% 22%;border:5px solid #fff;box-sizing:content-box;
  outline:1.5px dashed rgba(0,0,0,.28);outline-offset:-2px;box-shadow:0 1px 4px rgba(0,0,0,.28);transform:rotate(3deg);margin:2px 2px 0 0}
body[data-style="post"] .box{flex:1;min-height:0;display:flex}
body[data-style="post"] .box>.in{flex:1;min-height:0;display:flex;flex-direction:column}
/* the ruled lines belong to the words, so every line of writing sits on one */
body[data-style="post"] .q{flex:1;font:400 15.5px/var(--lh,26px) 'Kalam',cursive;color:#1B1D22;
  background:repeating-linear-gradient(transparent 0 calc(var(--lh,26px) - 1px),rgba(10,102,194,.14) calc(var(--lh,26px) - 1px) var(--lh,26px));
  background-attachment:local;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
body[data-style="post"] .bfoot{display:flex;align-items:center;gap:12px}
body[data-style="post"] .copy1{height:36px;padding:0 16px;border-radius:4px;background:var(--ink);color:#fff;font:500 13.5px/1 var(--text)}
body[data-style="post"] .back .lk{display:none}

/* ===== Poster. the photo in two inks, the name set huge, the words set big and bold on the back ===== */
body[data-style="poster"] .face{border-radius:4px}
body[data-style="poster"] .front{background:var(--field)}
body[data-style="poster"] .front .shot{filter:grayscale(1) contrast(1.35) brightness(1.08);mix-blend-mode:multiply}
body[data-style="poster"] .front .lk{top:16px;right:16px;fill:var(--ink)}
body[data-style="poster"] .front .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 16px 16px;color:#fff;background:linear-gradient(transparent,rgba(11,13,12,.86) 62%)}
body[data-style="poster"] .front .cap b{display:block;font:800 var(--fit,52px)/.88 var(--text);letter-spacing:-.045em;text-transform:uppercase;
  color:var(--field)}
body[data-style="poster"] .front .cap span{display:inline-block;margin-top:10px;padding:5px 8px;background:var(--ink);color:#fff;font:600 11.5px/1.2 var(--text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-style="poster"] .back{background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:20px 18px 16px;gap:12px}
body[data-style="poster"] .back::before{content:"\201C";position:absolute;top:-6px;left:14px;font:400 120px/1 var(--px);color:var(--field)}
body[data-style="poster"] .bhead{order:2;display:block}
body[data-style="poster"] .bhead .av{display:none}
body[data-style="poster"] .bwho b{display:block;font:800 22px/1 var(--text);letter-spacing:-.03em;text-transform:uppercase;color:var(--field)}
body[data-style="poster"] .bwho span{display:block;margin-top:4px;font:500 11.5px/1.3 var(--text);color:rgba(255,255,255,.7)}
body[data-style="poster"] .box{order:1;flex:1;min-height:0;display:flex;margin-top:54px}
body[data-style="poster"] .box>.in{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-style="poster"] .q{flex:1;font:700 16px/1.28 var(--text);letter-spacing:-.018em;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 20px),transparent);mask-image:linear-gradient(#000 calc(100% - 20px),transparent)}
body[data-style="poster"] .bfoot{order:3;display:flex;align-items:center;gap:12px}
body[data-style="poster"] .copy1{height:38px;padding:0 16px;background:var(--field);color:var(--ink);font:700 13.5px/1 var(--text);clip-path:var(--notch)}
body[data-style="poster"] .back .lk{position:static;margin-left:auto;fill:var(--field)}

/* nothing of the card shows until its pixels are in. no frame, no shadow, no placeholder */
.card:not(.clear) .face{background:transparent!important;box-shadow:none!important}
.card:not(.clear){filter:none!important}
.card:not(.clear) .back{visibility:hidden}
/* the card's shadow sits on the face so it follows every style's shape */
.face{box-shadow:0 1px 2px rgba(0,0,0,.12),0 22px 40px -22px rgba(0,45,22,.55)}
body[data-at="done"] .card:not(.lead) .face{box-shadow:none}
/* copy success has life: a spring pop, and on the per person button a check that draws in */
.copy1 .tick{width:0;height:14px;opacity:0;transform:scale(.4);overflow:visible;flex:none}
.copy1 .tick path{stroke-dasharray:22;stroke-dashoffset:22}
.copy1.win{animation:pop .52s cubic-bezier(.34,1.56,.5,1)}
.copy1.win .tick{width:14px;margin-right:6px;opacity:1;transform:scale(1);transition:width .26s var(--out),opacity .26s,transform .5s cubic-bezier(.34,1.7,.5,1)}
.copy1.win .tick path{stroke-dashoffset:0;transition:stroke-dashoffset .42s var(--out) .08s}
.acts .btn.win{animation:pop .52s cubic-bezier(.34,1.56,.5,1)}
@keyframes pop{0%{transform:scale(1)}34%{transform:scale(1.1)}68%{transform:scale(.97)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.copy1.win,.acts .btn.win{animation:none}.copy1.win .tick{transition:none}}
body[data-style="bit"] .face{box-shadow:none}
body[data-style="bit"] .deck,body[data-style="bit"] .press .card.clear{filter:drop-shadow(0 18px 22px rgba(0,45,22,.26))}

/* ---------- what you walk away with ---------- */
.take{position:absolute;right:calc(var(--gut) + max(0px,(100% - 1440px) / 2));top:50%;width:min(480px,36vw);z-index:3;
  opacity:0;transform:translateY(calc(-50% - 14px));pointer-events:none;visibility:hidden;
  transition:opacity .5s var(--out),transform .8s var(--out),visibility 0s .8s}
body[data-at="done"] .take{opacity:1;transform:translateY(-50%);pointer-events:auto;visibility:visible;
  transition:opacity .6s var(--out) .55s,transform .9s var(--out) .55s,visibility 0s}
.take-in{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.take h2{font:400 clamp(34px,3.4vw,52px)/1.05 var(--px);letter-spacing:-.01em;text-wrap:balance}
.styles{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:40px;padding:0 15px;border:0;background:rgba(255,255,255,.55);color:var(--ink);font:500 14.5px/1 var(--text);clip-path:var(--notch);
  transition:background-color .2s,color .2s}
.chip:hover{background:#fff}
.chip[aria-checked="true"]{background:var(--ink);color:#fff}
.chip.bit{font:400 14.5px/1 var(--px)}
.chip.post{font:700 16px/1 'Kalam',cursive}
.chip.poster{font:800 14px/1 var(--text);text-transform:uppercase;letter-spacing:-.02em}
.chip:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ink)}
.chip[aria-checked="true"]:focus-visible{box-shadow:inset 0 0 0 3px var(--field)}
.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{height:54px;padding:0 24px;border:0;background:var(--ink);color:#fff;font:500 16px/1 var(--text);clip-path:var(--notch);
  transition:background-color .2s,transform .4s var(--out)}
.btn:hover{background:#1D221F;transform:translateY(-2px)}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn.alt:hover{background:#F1F4F2}
.btn.plain{background:transparent;color:var(--ink);clip-path:none;padding:0 10px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.btn.plain:hover{background:transparent}
.btn.plain:focus-visible{box-shadow:none;outline:3px solid var(--ink);outline-offset:2px}
.note{min-height:1.45em;font:400 15px/1.45 var(--text);color:var(--ink-2);max-width:30em}

/* ---------- the pixels in flight ---------- */
.fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:5}

/* ---------- start over, a short fade so nothing snaps ---------- */
.stage,.top .status,.top .count{transition:opacity .28s linear}
body.reset .stage{opacity:0}

/* ---------- phone and narrow. one column, the page scrolls, collapses by grid rows ---------- */
@media (max-width:900px){
  body{overflow-x:hidden}
  .top{height:60px;gap:14px}
  .wm{font-size:19px}
  .status{display:none}
  .count b{font-size:28px}
  .count span{font-size:13px}
  .stage{height:auto;display:flex;flex-direction:column;padding-bottom:40px;overflow:visible;overflow-x:clip}
  .pitch,.li,.take{position:static;width:auto;height:auto;transform:none;display:grid;grid-template-rows:1fr;
    transition:grid-template-rows .7s var(--inout),opacity .5s var(--out),margin .7s var(--inout)}
  .pin{overflow:hidden}
  .pitch{order:1;padding:10px var(--gut) 0;max-width:680px}
  .pitch h1{font-size:clamp(38px,10.4vw,48px);margin-bottom:20px}
  .lede{font-size:17px;margin-bottom:28px}
  .go{height:58px;font-size:17px}
  body[data-at="run"] .pitch,body[data-at="done"] .pitch{grid-template-rows:0fr;opacity:0}
  .li{order:2;margin:40px var(--gut) 0;max-width:560px}
  .li-card{height:560px;transition:height .7s var(--inout)}
  body[data-at="connect"] .li-card{height:520px}
  body[data-at="run"] .li{margin-top:12px}
  body[data-at="run"] .li-card{height:250px}
  body[data-at="done"] .li{grid-template-rows:0fr;opacity:0;margin-top:0;transform:none}
  /* on a phone the deck sits right under the headline, and the styles and actions follow it */
  .take,.take .pin,.take-in{display:contents}
  .take h2,.styles,.acts,.note{display:none;margin:0 var(--gut)}
  body[data-at="done"] .take h2,body[data-at="done"] .styles,body[data-at="done"] .acts,body[data-at="done"] .note{display:flex;animation:rise .7s var(--out) both .35s}
  body[data-at="done"] .take h2,body[data-at="done"] .note{display:block}
  .take h2{order:3;margin-top:14px;font-size:32px}
  .styles{order:5;margin-top:4px}
  .acts{order:6;margin-top:18px}
  .note{order:7;margin-top:14px}
  .acts{gap:10px}
  .btn{height:50px;padding:0 18px;font-size:15px}
  .table{order:4;position:relative;inset:auto;height:0;transition:height .8s var(--inout)}
  .table .pager{order:0}
}
@media (max-width:560px){
  .go{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important;transition-delay:0s!important}
  .pitch h1 .c{opacity:1}
}