/* ── HER DESK IS THE PAGE (22 Sep 2026, SEP22_DESK) ─────────────────────────
   A new chat opens on her desk: her guess of what he is here for, then a
   column of containers - her hand on each, a go that starts the job, a small
   box for how he wants it. Her paper (never a white box), her pen round
   every container, a colour on each kind, a ring on what he has not seen.
   With the desk up (html.np-col) the composer sits at the floor like a
   conversation's and the page scrolls. Her fact cards keep their pop.
   Source: frontend/_home_sep18/, served at /_home.css, spliced between
   HOME_START / HOME_END. */

/* the page: the greeting at the top, the desk under it, the bar at the floor */
html[data-ia="threads"].ia-new.np-col{--np-bar-b:22px}
html[data-ia="threads"].ia-new.np-col #day{
  padding:44px 24px 180px!important}
html.np-col .np-gap{display:none!important}
html.np-col .np-recent{margin-top:22px}
html.np-col .np-hand{margin-top:14px}
/* her first-day line stays; the three question chips give way to the desk */
html.np-col .np-fddone .np-chip:not(.np-chipgo){display:none}
html.np-col .np-fd{margin-bottom:2px}

.hd-desk{width:100%;max-width:640px;margin:14px auto 0;position:relative}

/* A BIT MORE COLOUR (18 Sep 2026): each kind wears one of the app's own
   colours - what is due amber, what slipped coral, what grew green, what she
   found blue, ideas and things to make gold, the rest her lavender. */
.hd-desk,.hd-pop{--hd-amber:var(--yellow,#D98E29);--hd-coral:var(--red,#D8453F);
  --hd-green:var(--green,#1B9E72);--hd-blue:var(--solid,#3B82F6);--hd-gold:var(--star,#C29B1F)}
[data-theme="dark"] .hd-desk,[data-theme="dark"] .hd-pop{--hd-amber:#E8A955;--hd-coral:#EE8078;
  --hd-green:#4CC79A;--hd-blue:#86B2F8;--hd-gold:#DDBE55}
.hd-it,.hd-pop-card{--hue:var(--lav);--tint:var(--lav-08);
  --tint:color-mix(in srgb,var(--hue) 12%,transparent)}
[data-theme="dark"] .hd-it,[data-theme="dark"] .hd-pop-card{
  --tint:color-mix(in srgb,var(--hue) 16%,transparent)}
.k-today,.k-next,.k-empty{--hue:var(--hd-amber)}
.k-late,.k-quiet{--hue:var(--hd-coral)}
.k-post,.k-filmed,.k-kind{--hue:var(--hd-green)}
.k-research,.k-doc{--hue:var(--hd-blue)}
.k-idea,.k-news{--hue:var(--hd-gold)}
.k-j-audit,.k-j-rooms{--hue:var(--lav)}
.k-j-next3,.k-j-first,.k-j-restart,.k-j-caption,.k-j-music,.k-j-sell{--hue:var(--hd-gold)}
.k-j-hook{--hue:var(--hd-coral)}
.k-j-lane,.k-j-competitor{--hue:var(--hd-blue)}
.k-j-week{--hue:var(--hd-amber)}

/* the room it belongs to - its picture in her ring - and how fresh it is */
.hd-head{display:flex;align-items:center;gap:8px;min-height:30px;margin:0 2px 10px;
  font-family:var(--sans);font-size:12.5px;line-height:1.2;color:var(--mute)}
.hd-where{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding:4px 0 4px 4px}
.hd-where b{font-weight:600;color:var(--ink);margin-left:3px}
.hd-av{position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--lav-08);color:var(--lav);
  font:600 11px/1 var(--sans)}
.hd-av img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;display:block}
.hd-avring{position:absolute;left:-4px;top:-4px;width:32px;height:32px;overflow:visible;
  color:var(--lav);pointer-events:none}
.hd-av .hd-avplat{position:absolute;right:-6px;bottom:-5px;width:14px;height:14px;
  padding:2px;box-sizing:border-box;border-radius:50%;overflow:visible;
  background:var(--ground-chat,var(--paper));color:var(--lav)}
.hd-fresh{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;
  font-family:var(--pen);font-size:15.5px;color:var(--mute)}
.hd-fresh i{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lav);opacity:.5}
.hd-desk.loading .hd-fresh i,.hd-fresh.writing i{animation:hdpulse 1.1s ease-in-out infinite}
.hd-fresh.writing{color:var(--lav)}
@keyframes hdpulse{0%,100%{opacity:.2}50%{opacity:.95}}

/* ── HER GUESS (SEP22_DESK) - one line he can confirm or correct ────────── */
.hd-guess{display:flex;gap:11px;align-items:flex-start;margin:0 0 12px;
  padding:11px 13px 11px 12px;border-radius:12px;background:var(--lav-08)}
.hd-gmark{flex:0 0 auto;width:24px;height:24px;margin-top:2px;color:var(--lav);overflow:visible}
.hd-gbody{flex:1 1 auto;min-width:0}
.hd-gline{font-family:var(--serif);font-size:16px;line-height:1.38;color:var(--ink)}
.hd-gopts{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hd-guess.known .hd-gopts{display:none}
.hd-guess.known.open .hd-gopts{display:flex}
.hd-gopt{padding:6px 12px;border:1px solid var(--line,rgba(25,21,15,.16));border-radius:15px;
  background:var(--ground-chat,var(--paper));color:var(--ink);font:13px/1.25 var(--sans);
  cursor:pointer;transition:border-color .13s ease,color .13s ease,background .13s ease}
.hd-gopt:hover,.hd-gopt:focus-visible{border-color:var(--lav);color:var(--lav);outline:none}
.hd-gopt.yes{background:var(--lav);border-color:var(--lav);color:#fff;font-weight:600}
.hd-gopt.yes:hover{color:#fff;filter:brightness(1.06)}
.hd-gopt.cur{border-color:var(--lav);color:var(--lav)}
.hd-gchange{display:inline-block;margin:5px 0 0;padding:0;border:0;background:none;
  font:15px/1 var(--pen);color:var(--mute);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--lav)}
.hd-gchange:hover{color:var(--lav)}
.hd-guess.busy{opacity:.55;pointer-events:none}
.hd-note{margin:-4px 2px 10px;font:15.5px/1.2 var(--pen);color:var(--mute)}

/* ── THE COLUMN ─────────────────────────────────────────────────────────── */
.hd-col{display:flex;flex-direction:column;gap:10px;padding:2px 0 0}
.hd-it{position:relative;border-radius:12px;padding:12px 13px 12px 12px;
  background:var(--ground-chat,var(--paper));outline:none;
  -webkit-tap-highlight-color:transparent;transition:transform .16s ease}
.hd-it > .hd-ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;color:var(--ink);opacity:.3;
  transition:opacity .16s ease,color .16s ease}
.hd-it.new > .hd-ink{color:var(--hue);opacity:.95}
.hd-it.fact{cursor:pointer}
.hd-it.fact:focus-visible > .hd-ink{color:var(--hue);opacity:1}
@media (hover:hover){
  .hd-it:hover > .hd-ink{color:var(--hue);opacity:1}
}
.hd-row{position:relative;display:flex;gap:12px;align-items:flex-start}

/* what it shows: a real still, or her hand on its colour */
.hd-vis{position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:9px;
  overflow:hidden;background:var(--thumb)}
.hd-vis.g{background:var(--tint)}
.hd-vis img{position:relative;z-index:1;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 32%}
.hd-glyph{position:absolute;left:50%;top:50%;width:36px;height:36px;
  transform:translate(-50%,-50%);overflow:visible;color:var(--hue)}
.hd-vis .hd-bigplat{position:absolute;left:50%;top:50%;width:30px;height:30px;
  transform:translate(-50%,-50%);color:var(--hue);overflow:visible}
.hd-vis .hd-pm{position:absolute;z-index:2;right:4px;top:4px;width:14px;height:14px;
  color:var(--lav);overflow:visible}
.hd-vis img ~ .hd-pm{padding:2px;width:18px;height:18px;border-radius:5px;
  background:var(--ground-chat,var(--paper))}
.hd-fmt{position:absolute;right:5px;bottom:4px;font-family:var(--sans);
  font-size:9px;font-weight:600;letter-spacing:.08em;color:var(--mute)}

/* a day, written by her: the weekday in her pen, the number in her serif */
.hd-date{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:0 4px}
.hd-dow{font-family:var(--pen);font-size:14px;line-height:.9;color:var(--hue)}
.hd-day{position:relative;font-family:var(--serif);font-weight:600;font-size:24px;
  line-height:1;letter-spacing:-.5px;color:var(--ink)}
.hd-mon{font-family:var(--sans);font-size:9.5px;line-height:1.2;color:var(--mute);margin-top:1px;
  white-space:nowrap}
.k-late .hd-day{color:var(--mute)}
.hd-strike{position:absolute;left:-5px;right:-6px;top:1px;height:22px;
  width:calc(100% + 11px);overflow:visible;color:var(--hue);pointer-events:none}

/* what it says */
.hd-txt{flex:1 1 auto;min-width:0;padding-top:1px}
.hd-k{font-family:var(--pen);font-size:16.5px;line-height:1.05;color:var(--hue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.hd-it.new .hd-k{opacity:1}
.hd-it.new .hd-k:before{content:'';display:inline-block;width:5px;height:5px;
  margin:0 5px 0 1px;border-radius:50%;background:var(--hue);vertical-align:3px}
.hd-fig{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.08;
  letter-spacing:-.2px;color:var(--hue);margin-top:3px}
.hd-fig span{font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:0;color:var(--mute);margin-left:4px}
.hd-t{font-family:var(--serif);font-size:16px;line-height:1.3;color:var(--ink);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hd-s{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--mute);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hd-it.done .hd-s{color:var(--hue)}

/* the go and the small box */
.hd-act{position:relative;display:flex;align-items:center;gap:8px;margin:10px 0 0 76px}
.hd-sp{flex:1 1 auto}
.hd-box{flex:1 1 auto;min-width:0;height:34px;padding:0 11px;box-sizing:border-box;
  border:1px dashed var(--line,rgba(25,21,15,.2));border-radius:9px;background:transparent;
  color:var(--ink);font:13px/1 var(--sans);outline:none;
  transition:border-color .13s ease,background .13s ease}
.hd-box::placeholder{color:var(--mute);font-family:var(--pen);font-size:14.5px;opacity:.9}
.hd-box:focus{border-style:solid;border-color:var(--lav);background:var(--ground-chat,var(--paper))}
.hd-go{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;
  padding:0 11px 0 14px;border:0;border-radius:17px;background:var(--lav-08);color:var(--lav);
  font:600 13px/1 var(--sans);cursor:pointer;white-space:nowrap;
  transition:background .13s ease,transform .13s ease}
.hd-go svg{width:16px;height:16px;overflow:visible;display:block}
.hd-go:hover,.hd-go:focus-visible{background:color-mix(in srgb,var(--lav) 20%,transparent);outline:none}
.hd-go:active{transform:scale(.97)}
.hd-it.done .hd-go{background:transparent;box-shadow:inset 0 0 0 1px var(--line,rgba(25,21,15,.16))}
.hd-it.done .hd-go:hover{background:var(--lav-08)}
.hd-it.job .hd-go{background:var(--lav);color:#fff}
.hd-it.job .hd-go:hover,.hd-it.job .hd-go:focus-visible{background:var(--lav);filter:brightness(1.06)}
.hd-it.job.done .hd-go{background:transparent;color:var(--lav);filter:none}

/* while she watches, the jobs wait */
.hd-it.soon{opacity:.6}
.hd-it.soon .hd-s{font-family:var(--pen);font-size:15px;color:var(--hue)}
.hd-it.soon .hd-vis.g{background:transparent;box-shadow:inset 0 0 0 1px var(--tint)}

/* while she works, her eye goes down the picture */
.k-working .hd-vis:after{content:'';position:absolute;z-index:3;left:5px;right:5px;
  height:2px;border-radius:2px;background:var(--lav);opacity:.6;
  animation:hdscan 1.9s ease-in-out infinite}
@keyframes hdscan{0%{top:14%}50%{top:80%}100%{top:14%}}

/* the composer nods when a card hands it a question */
#wk-inner.hd-took{animation:hdtook .9s ease-out}
@keyframes hdtook{0%{filter:drop-shadow(0 0 0 rgba(175,105,238,.55))}
  35%{filter:drop-shadow(0 0 7px rgba(175,105,238,.45))}
  100%{filter:drop-shadow(0 0 0 rgba(175,105,238,0))}}

/* the phone: the column runs the width of the screen, a thumb's reach */
@media (max-width:880px){
  html[data-ia="threads"].ia-new.np-col{--np-bar-b:calc(var(--mb-h,56px) + 10px)}
  html.mb-kb[data-ia="threads"].ia-new.np-col{--np-bar-b:calc(env(safe-area-inset-bottom,0px) + 10px)}
  html[data-ia="threads"].ia-new.np-col #day{
    padding:calc(var(--mb-top,56px) + 12px) var(--mb-gut,14px) calc(var(--mb-h,56px) + 150px)!important}
  .hd-desk{margin-top:12px}
  .hd-head{margin-bottom:8px}
  .hd-guess{padding:10px 12px 11px 11px}
  .hd-gline{font-size:15.5px}
  .hd-it{padding:11px 11px 11px 11px}
  .hd-vis{width:58px;height:58px}
  .hd-glyph{width:32px;height:32px}
  .hd-t{font-size:15.5px}
  .hd-act{margin-left:0}
  .hd-box,.hd-go{height:38px}
  .hd-gopt{padding:8px 12px}
}

/* ── THE BLOCKS (22 Sep 2026, evening) ────────────────────────────────────
   The account alive above the jobs: the pulse (the last twelve as bars in
   her pen, typical / best / last / this week), the next video with its
   frame, the lane's frames, what works (two sides), what she has done. */
.k-b-pulse{--hue:var(--hd-green)}
.k-b-next{--hue:var(--hd-gold)}
.k-b-lane{--hue:var(--hd-blue)}
.k-b-works{--hue:var(--hd-amber)}
.k-b-proof{--hue:var(--lav)}
.hd-it.blk{padding:12px 14px 13px}
.hd-it.blk .hd-act{margin-left:0}
.hd-it.blk .hd-go{background:var(--lav);color:#fff}
.hd-it.blk .hd-go:hover,.hd-it.blk .hd-go:focus-visible{background:var(--lav);filter:brightness(1.06)}
.hd-bk{display:flex;align-items:center;gap:7px;margin:0 0 6px}
.hd-bglyph{flex:0 0 auto;width:18px;height:18px;overflow:visible;color:var(--hue)}
.hd-bk .hd-k{flex:1 1 auto;min-width:0;opacity:1}
.hd-bline{font-family:var(--serif);font-size:16.5px;line-height:1.36;color:var(--ink)}
.hd-bline i{font-style:normal;font-family:var(--pen);font-size:15px;color:var(--hue);margin-left:6px;white-space:nowrap}
.hd-it.blk .hd-s.wl{margin-top:9px;-webkit-line-clamp:3}

/* a 9:16 frame - a real still, or her tint with a glyph */
.hd-fr{position:relative;display:block;flex:0 0 auto;width:56px;aspect-ratio:9/14;
  border-radius:7px;overflow:hidden;background:var(--thumb)}
.hd-fr.g{background:var(--tint)}
.hd-fr img{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover}
.hd-fr .hd-glyph{width:26px;height:26px}
.hd-fr.s{width:40px;border-radius:6px}
.hd-fr.s .hd-glyph{width:20px;height:20px}
.hd-fr.xs{width:24px;border-radius:4px}
.hd-fr.xs .hd-glyph{width:14px;height:14px}
.hd-fr.big{width:96px;border-radius:9px}
.hd-fr.big .hd-glyph{width:36px;height:36px}

/* the pulse: the bars, the axis, the stats, what moved */
.hd-chart{position:relative;margin:10px 0 0}
.hd-bars{display:block;width:100%;height:96px;overflow:visible;color:var(--hue)}
.hd-bar.last{color:var(--ink)}
.hd-bar.on{opacity:.55}
.hd-hit{fill:transparent;cursor:pointer}
.hd-tlab{font:13px var(--pen);fill:var(--mute)}
.hd-tlab.top{fill:var(--ink)}
.hd-axis{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:3px;
  font:11px/1.3 var(--sans);color:var(--mute)}
.hd-axis > span{white-space:nowrap}
.hd-stand{flex:1 1 auto;min-width:0;text-align:center;font-family:var(--pen);font-size:14px;
  overflow:hidden;text-overflow:ellipsis}
.hd-barsay{display:flex;align-items:center;gap:8px;margin-top:7px;font:12.5px/1.35 var(--sans);color:var(--ink)}
.hd-barsay:empty{display:none}
.hd-barsay b{font:600 15px/1 var(--serif)}
.hd-barsay i{color:var(--mute)}
.hd-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.hd-stat{flex:1 1 118px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:8px 10px;border-radius:9px;background:var(--tint)}
.hd-stat.pic{flex-direction:row;align-items:center;gap:9px}
.hd-stat.pic > div{min-width:0;display:flex;flex-direction:column;gap:1px}
.hd-stat b{font:600 20px/1.05 var(--serif);letter-spacing:-.3px;color:var(--ink)}
.hd-stat span{max-width:100%;font:11px/1.3 var(--sans);color:var(--mute);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hd-stat.week{gap:5px}
.hd-boxes{display:flex;flex-wrap:wrap;gap:3px}
.hd-boxes svg{width:16px;height:16px;overflow:visible;color:var(--hue)}
.hd-moved{margin-top:9px;font:12.5px/1.4 var(--sans);color:var(--mute)}
.hd-moved b{font:600 14px/1 var(--serif);color:var(--hd-green)}
.hd-moved i{color:var(--ink)}

/* the next video */
.hd-nx{display:flex;gap:13px;align-items:flex-start;margin-top:2px}
.hd-nxt{flex:1 1 auto;min-width:0}
.hd-t.big{font-size:18px;margin-top:0;-webkit-line-clamp:3}
.hd-q{margin-top:6px;padding-left:10px;border-left:2px solid var(--hue);font:italic 14.5px/1.45 var(--serif);
  color:var(--ink-soft,var(--ink));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hd-nxn{margin-top:6px;font:14px/1 var(--pen);color:var(--mute)}
.hd-more{flex:0 0 auto;padding:0 4px;border:0;background:none;font:15px/1 var(--pen);color:var(--mute);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hue)}
.hd-more:hover,.hd-more:focus-visible{color:var(--hue);outline:none}

/* the lane: a row of frames, the creator and the views under each */
.hd-frames{display:flex;gap:8px;margin:10px 0 0;padding-bottom:2px;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hd-frames::-webkit-scrollbar{display:none}
.hd-lv{flex:0 0 auto;width:86px;display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;
  border-radius:8px;outline:none}
.hd-lv .hd-fr{width:86px}
.hd-lv b{font:600 13.5px/1.1 var(--serif);color:var(--ink)}
.hd-lv span{font:11px/1.2 var(--sans);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.hd-lv:hover b,a.hd-lv:focus-visible b{color:var(--hue)}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hd-chips span{padding:3px 10px;border-radius:12px;background:var(--tint);color:var(--ink-soft,var(--ink));
  font:12px/1.35 var(--sans)}

/* what works: two sides, the lead in colour, the lag in grey */
.hd-sides{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.hd-side{flex:1 1 0;min-width:0;padding:9px 10px 10px;border-radius:9px;background:var(--tint)}
.hd-side.lag{background:color-mix(in srgb,var(--mute) 10%,transparent)}
.hd-sfr{display:flex;gap:5px;min-height:4px}
.hd-sn{margin-top:7px;font:15px/1.2 var(--pen);color:var(--hue)}
.hd-side.lag .hd-sn{color:var(--mute)}
.hd-sm{display:flex;align-items:baseline;gap:6px;margin-top:2px;min-width:0}
.hd-sm b{font:600 19px/1.1 var(--serif);letter-spacing:-.3px;color:var(--ink)}
.hd-sm span{min-width:0;font:11px/1.2 var(--sans);color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-sbar{display:block;width:100%;height:12px;margin-top:6px;overflow:visible;color:var(--hue)}
.hd-side.lag .hd-sbar{color:var(--mute)}
.hd-vs{align-self:center;flex:0 0 auto;font:15px/1 var(--pen);color:var(--mute)}

/* what she has done: the numbers in her serif, the words under */
.hd-proof{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:2px}
.hd-pf{display:flex;flex-direction:column;min-width:0}
.hd-pf b{font:600 24px/1.05 var(--serif);letter-spacing:-.4px;color:var(--hue)}
.hd-pf span{font:11.5px/1.25 var(--sans);color:var(--mute)}
.hd-pf.days b{color:var(--ink)}

@media (max-width:880px){
  .hd-it.blk{padding:11px 12px 12px}
  .hd-bline{font-size:16px}
  .hd-fr.big{width:84px}
  .hd-t.big{font-size:17px}
  .hd-stat{flex-basis:calc(50% - 4px)}
  .hd-lv,.hd-lv .hd-fr{width:78px}
  .hd-sides{gap:8px}
  .hd-pf b{font-size:22px}
}

/* ── A CARD, OPENED (18 Sep 2026, afternoon) ─────────────────────────────
   "i can click and see more, it opens like a pop up". Her paper, her pen
   round it, the room's picture in her ring at the top; her fuller words,
   then what she is looking at - the real rows, the list, the quote, the
   stills - and what he can do with it. Centred on a desk, a sheet from the
   bottom on a phone. */
.hd-pop{display:none;position:fixed;inset:0;z-index:10060}
html.hd-pop-open .hd-pop,.hd-pop.out{display:flex;align-items:center;
  justify-content:center;padding:24px 16px}
html.hd-pop-open body{overflow:hidden}
.hd-pop-back{position:absolute;inset:0;background:rgba(25,21,15,.32);
  animation:hdfade .16s ease-out}
[data-theme="dark"] .hd-pop-back{background:rgba(0,0,0,.58)}
.hd-pop.out .hd-pop-back{animation:hdfadeout .17s ease-in forwards}
.hd-pop-card{position:relative;display:flex;flex-direction:column;
  width:min(480px,100%);max-height:min(720px,calc(100vh - 48px));
  background:var(--paper);color:var(--ink);border-radius:8px;outline:none;
  box-shadow:0 26px 60px -18px rgba(25,21,15,.42),0 4px 14px -6px rgba(25,21,15,.14);
  animation:hdpopin .2s cubic-bezier(.2,.8,.2,1);transition:transform .2s ease}
[data-theme="dark"] .hd-pop-card{
  box-shadow:0 28px 64px -14px rgba(0,0,0,.75),0 4px 14px -6px rgba(0,0,0,.45)}
.hd-pop.out .hd-pop-card{animation:hdpopout .17s ease-in forwards}
.hd-pop-card.swap{animation:none}
.hd-pop-card.swap .hd-pop-body{animation:hdfade .2s ease-out}
@keyframes hdfade{from{opacity:0}to{opacity:1}}
@keyframes hdfadeout{from{opacity:1}to{opacity:0}}
@keyframes hdpopin{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes hdpopout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(6px) scale(.99)}}
.hd-pop-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;color:var(--ink);opacity:.5;z-index:3}
.hd-pop-grab{display:none}

.hd-pop-head{position:relative;display:flex;align-items:center;gap:11px;
  padding:15px 12px 11px 18px;flex:0 0 auto}
.hd-pop-head .hd-av{width:34px;height:34px;font-size:14px}
.hd-pop-head .hd-avring{left:-5px;top:-5px;width:44px;height:44px}
.hd-pop-head .hd-av .hd-avplat{width:16px;height:16px;right:-6px;bottom:-5px}
.hd-pop-who{display:flex;flex-direction:column;min-width:0;gap:1px}
.hd-pop-who b{font:600 13.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hd-pop-k{font:18px/1.05 var(--pen);color:var(--hue);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.hd-pop-when{margin-left:auto;font:12px/1 var(--sans);color:var(--mute);white-space:nowrap}
.hd-pop-x{flex:0 0 auto;width:34px;height:34px;margin-left:2px;padding:7px;border:0;
  border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.hd-pop-x svg{width:20px;height:20px;display:block;overflow:visible}
.hd-pop-x:hover,.hd-pop-x:focus-visible{background:var(--lav-08);color:var(--lav);outline:none}

.hd-pop-body{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;padding:2px 20px 16px;-webkit-overflow-scrolling:touch;
  touch-action:pan-y}
.hd-pop-vis{position:relative;height:210px;margin:0 0 15px;border-radius:9px;
  overflow:hidden;background:var(--thumb)}
.hd-pop-vis img{position:relative;z-index:1;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center 32%}
.hd-pop-vis.g{background:var(--tint);height:118px}
.hd-pop-vis.s{height:74px}
.hd-pop-vis .hd-glyph{width:48px;height:48px}
.hd-pop-vis.s .hd-glyph{width:40px;height:40px}
.hd-pop-vis .hd-bigplat{width:40px;height:40px}
.hd-pop-vis .hd-pm{position:absolute;z-index:2;right:9px;top:9px;width:18px;height:18px;
  color:var(--lav);overflow:visible}
.hd-pop-vis img ~ .hd-pm{width:25px;height:25px;padding:3px;border-radius:7px;
  background:var(--paper)}
.hd-pop-vis.d{height:104px}
.hd-pop-vis .hd-date{padding:0 20px;align-items:flex-start}
.hd-pop-vis .hd-dow{font-size:22px}
.hd-pop-vis .hd-day{font-size:40px}
.hd-pop-vis .hd-mon{font-size:12.5px;margin-top:3px}
.hd-pop-vis .hd-strike{height:34px;top:3px}

.hd-pop-t{margin:0;font:600 21px/1.24 var(--serif);letter-spacing:-.2px;color:var(--ink)}
.hd-pop-sub{margin:5px 0 0;font:13px/1.4 var(--sans);color:var(--mute)}
.hd-pop-fig{margin-top:8px;font:600 27px/1.05 var(--serif);letter-spacing:-.3px;color:var(--hue)}
.hd-pop-fig span{margin-left:6px;font:400 13px/1 var(--sans);letter-spacing:0;color:var(--mute)}
.hd-pop-more{margin:12px 0 0;font:15.5px/1.56 var(--serif);color:var(--ink-soft,var(--ink))}

.hd-pop-rec{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line,rgba(25,21,15,.1))}
.hd-pop-seen{display:block;margin:0 0 8px;font:16.5px/1 var(--pen);color:var(--mute)}
.hd-pop-rows{display:grid;grid-template-columns:max-content 1fr;column-gap:16px;row-gap:6px;
  margin:0 0 6px;font:13px/1.38 var(--sans)}
.hd-pop-rows div{display:contents}
.hd-pop-rows dt{color:var(--mute)}
.hd-pop-rows dd{margin:0;color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.hd-pop-h{display:block;margin:12px 0 3px;font:16px/1.1 var(--pen);color:var(--hue)}
.hd-pop-part p,.hd-pop-also p{margin:0;font:14px/1.52 var(--serif);color:var(--ink-soft,var(--ink))}
.hd-pop-part:first-child .hd-pop-h,.hd-pop-rows + .hd-pop-part .hd-pop-h{margin-top:10px}
.hd-pop-list{list-style:none;margin:2px 0 4px;padding:0}
.hd-pop-list li{display:flex;flex-direction:column;gap:2px;padding:7px 0;
  border-bottom:1px dashed var(--line,rgba(25,21,15,.1))}
.hd-pop-list li:last-child{border-bottom:0}
.hd-pop-list li b{font:500 14px/1.32 var(--serif);color:var(--ink)}
.hd-pop-list li span{font:12px/1.3 var(--sans);color:var(--mute)}
.hd-pop-check{list-style:none;margin:2px 0 4px;padding:0}
.hd-pop-check li{display:flex;align-items:center;gap:8px;padding:3px 0;
  font:13.5px/1.35 var(--sans);color:var(--ink)}
.hd-pop-check svg{flex:0 0 auto;width:17px;height:17px;overflow:visible;color:var(--hue)}
.hd-pop-check li.done span{color:var(--mute);text-decoration:line-through}
.hd-pop-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.hd-pop-chips span{padding:3px 10px;border-radius:12px;background:var(--tint);
  color:var(--ink-soft,var(--ink));font:12px/1.35 var(--sans)}
.hd-pop-q{margin:10px 0 4px;padding:2px 0 2px 14px;border-left:2px solid var(--hue);
  font:italic 14px/1.52 var(--serif);color:var(--ink-soft,var(--ink))}
.hd-pop-q cite{display:block;margin-top:7px;font:normal 12px/1.2 var(--sans);color:var(--mute)}
.hd-pop-q cite a{color:var(--lav);text-decoration:underline;text-underline-offset:2px}
.hd-pop-stills{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0 2px}
.hd-pop-stills span{aspect-ratio:9/14;border-radius:7px;overflow:hidden;background:var(--thumb)}
.hd-pop-stills img{width:100%;height:100%;display:block;object-fit:cover}
.hd-pop-also{margin-top:4px}
.hd-pop-by{margin:14px 0 0;font:15px/1 var(--pen);color:var(--mute)}

.hd-pop-foot{position:relative;flex:0 0 auto;padding:12px 16px 14px;
  border-top:1px dashed var(--line,rgba(25,21,15,.1))}
.hd-pop-ask{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 22px;
  align-items:center;column-gap:10px;width:100%;margin:0 0 8px;padding:10px 12px 11px 15px;
  border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;
  cursor:pointer;font:inherit;transition:background .14s ease}
.hd-pop-askink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;color:var(--lav)}
.hd-pop-askl{grid-column:1 / -1;margin-bottom:3px;font:15.5px/1 var(--pen);color:var(--lav)}
.hd-pop-askt{font:14.5px/1.42 var(--serif);color:var(--ink)}
.hd-pop-arrow{width:20px;height:20px;overflow:visible;color:var(--lav)}
.hd-pop-ask:hover,.hd-pop-ask:focus-visible{background:var(--lav-08);outline:none}
.hd-pop-ask:active{transform:scale(.99)}
.hd-pop-row2{display:flex;align-items:center;gap:16px;min-height:32px}
.hd-pop-link{padding:5px 0;border:0;background:none;cursor:pointer;
  font:500 13px/1.2 var(--sans);color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--lav);text-underline-offset:3px}
.hd-pop-link:hover,.hd-pop-link:focus-visible{color:var(--lav);outline:none}
.hd-pop-link.solo{padding:8px 14px;border-radius:17px;background:var(--lav-08);
  text-decoration:none;color:var(--ink)}
.hd-pop-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.hd-pop-nav button{width:32px;height:32px;padding:6px;border:0;border-radius:50%;
  background:transparent;color:var(--lav);cursor:pointer}
.hd-pop-nav button svg{width:20px;height:20px;display:block;overflow:visible}
.hd-pop-nav button:hover:not([disabled]),.hd-pop-nav button:focus-visible{background:var(--lav-08);outline:none}
.hd-pop-nav button[disabled]{opacity:.25;cursor:default}
.hd-pop-n{min-width:46px;text-align:center;font:15.5px/1 var(--pen);color:var(--mute)}

/* the phone: a sheet from the bottom, a thumb's reach */
@media (max-width:760px){
  html.hd-pop-open .hd-pop,.hd-pop.out{align-items:flex-end;padding:0}
  .hd-pop-card{width:100%;max-height:88vh;max-height:88dvh;border-radius:16px 16px 0 0;
    animation:hdsheetin .26s cubic-bezier(.2,.8,.2,1)}
  .hd-pop.out .hd-pop-card{animation:hdsheetout .19s ease-in forwards}
  .hd-pop-card.swap{animation:none}
  .hd-pop-ink{opacity:.45}
  .hd-pop-grab{display:block;width:40px;height:4px;margin:8px auto 0;border-radius:2px;
    background:var(--soft,#B9B4A9);opacity:.85;touch-action:none}
  .hd-pop-head{padding:8px 10px 9px 16px;touch-action:none}
  .hd-pop-body{padding:2px 16px 14px}
  .hd-pop-vis{height:188px}
  .hd-pop-t{font-size:20px}
  .hd-pop-more{font-size:15.5px}
  .hd-pop-foot{padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .hd-pop-ask{padding:12px 12px 13px 15px}
  .hd-pop-row2{min-height:40px}
  .hd-pop-nav button{width:40px;height:40px;padding:10px}
}
@keyframes hdsheetin{from{transform:translateY(100%)}to{transform:none}}
@keyframes hdsheetout{from{transform:none}to{transform:translateY(100%)}}

@media (prefers-reduced-motion:reduce){
  .hd-it,.hd-it > .hd-ink,.hd-go{transition:none}
  .k-working .hd-vis:after,.hd-desk.loading .hd-fresh i,.hd-fresh.writing i,#wk-inner.hd-took{animation:none}
  .hd-pop-back,.hd-pop-card,.hd-pop-card.swap .hd-pop-body{animation:none!important}
}