/* THE ACCOUNT, AS SHE SAW IT - the dashboard, in her pen (22 Sep 2026, SEP22_SEENDASH)
   source frontend/_seen_sep22/seen.css, served at /_seen.css (the first
   version is kept beside it as seen.css.bak_sep22dash).
   Samuel: "nothing is daliah drawing style and brand style, just change
   everything to daliah drawing style." So: no boxes from a template. Cards,
   tiles, the read of a video and the tooltip are framed by her pen (seen.js
   draws the frame, the same hand as the account page's cards); titles are the
   serif, underlined by her pen; numbers are the serif; her notes and her line
   under each card are her handwriting (--pen); the small words that label an
   axis stay in Inter, where a script would not read.
   Every rule is scoped under #sn, so nothing else on the page reaches in.
   Colour: a five-hue set validated on her paper and her slate, one hue per
   thing in the ring's order; grey for the rest; the palest grey for what she
   has not read yet. Lavender for "at or above your usual", grey for "under
   it" - never a colour of judgement. */
#sn,.sd-tip{--sd-1:#9860d0;--sd-2:#b95c3a;--sd-3:#2d78bd;--sd-4:#b07a00;--sd-5:#bf5884;--sd-rest:#8C887E;--sd-none:rgba(140,136,126,.34)}
:root[data-theme="dark"] #sn,:root[data-theme="dark"] .sd-tip{--sd-1:#a272d4;--sd-2:#c97152;--sd-3:#488acb;--sd-4:#bd871c;--sd-5:#c55e8a;--sd-rest:#8C8983;--sd-none:rgba(140,137,131,.38)}
#sn{--sd-grid:rgba(25,21,15,.12);--sd-axis:rgba(25,21,15,.32);--sd-hover:rgba(175,105,238,.08);
  --sd-tape:rgba(175,105,238,.8);--sd-cut:rgba(20,20,20,.62);--sd-tapebg:rgba(25,21,15,.07);--sd-navbg:var(--paper);
  display:block;padding:4px 0 36px;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
:root[data-theme="dark"] #sn{--sd-grid:rgba(236,232,224,.13);--sd-axis:rgba(236,232,224,.34);--sd-hover:rgba(201,164,240,.10);
  --sd-tape:rgba(201,164,240,.8);--sd-cut:rgba(236,232,224,.66);--sd-tapebg:rgba(236,232,224,.08);--sd-navbg:var(--bg)}
#sn *{box-sizing:border-box}
#sn .k0,.sd-tip .k0{--c:var(--sd-1)}
#sn .k1,.sd-tip .k1{--c:var(--sd-2)}
#sn .k2,.sd-tip .k2{--c:var(--sd-3)}
#sn .k3,.sd-tip .k3{--c:var(--sd-4)}
#sn .k4,.sd-tip .k4{--c:var(--sd-5)}
#sn .kr,.sd-tip .kr{--c:var(--sd-rest)}
#sn .kn,.sd-tip .kn{--c:var(--sd-none)}
#sn .sd-sw{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
#sn .dim{opacity:.25}
#sn .nof>img{display:none}
#sn .sd-dotsep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--mute);opacity:.55;margin:0 9px;vertical-align:middle}
/* her ink on the page: frames, underlines, rings */
#sn .sd-ink{position:relative}
#sn svg.sd-bink{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}
#sn .sd-ink>*:not(.sd-bink){position:relative;z-index:1}
#sn .sd-ul{position:relative}
#sn svg.sd-ulsv{position:absolute;left:0;bottom:-6px;pointer-events:none;overflow:visible}
#sn .sd-halo{position:relative}
#sn svg.sd-rink{position:absolute;pointer-events:none;overflow:visible;z-index:2}

/* ── sections, headings, her words to choose ─────────────────────────────── */
#sn .sd-sec{margin:26px 0 0}
#sn .sd-sech{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin:0 0 14px}
#sn .sd-h2{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--ink);margin:0}
#sn .sd-sub{font-family:var(--pen,'Caveat',cursive);font-size:17px;color:var(--mute)}
#sn .sd-cnt{margin-left:auto;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-tg{display:inline-flex;gap:14px;align-items:baseline}
#sn .sd-tg i{font-style:normal;font-family:var(--pen,'Caveat',cursive);font-size:17.5px;color:var(--mute);cursor:pointer;white-space:nowrap;line-height:1.1;padding-bottom:1px}
#sn .sd-tg i:hover{color:var(--ink)}
#sn .sd-tg i.on{color:var(--ink)}
#sn .sd-more{font-family:var(--pen,'Caveat',cursive);font-size:18px;color:var(--lav);cursor:pointer;border-bottom:1px dashed var(--lav);line-height:1.1}
#sn .sd-more:hover{border-bottom-style:solid}
#sn .sd-mini{display:inline-block;font-size:11.5px;color:var(--mute)}
#sn .sd-note{font-family:var(--pen,'Caveat',cursive);font-size:18px;line-height:1.35;color:var(--mute);margin:14px 2px}

/* ── THE ACCOUNT ──────────────────────────────────────────────────────────── */
#sn .sd-prof{display:flex;gap:22px;align-items:flex-start;padding:10px 4px 4px}
#sn .sd-av{width:92px;height:92px;flex:none;margin:4px}
#sn .sd-av img{width:92px;height:92px;border-radius:50%;object-fit:cover;display:block;background:var(--thumb)}
#sn .sd-avi{display:none;position:absolute;inset:0;border-radius:50%;background:var(--thumb);font-family:var(--serif);font-size:34px;font-weight:600;color:var(--lav);align-items:center;justify-content:center}
#sn .sd-av.noav .sd-avi,#sn .sd-crav.noav .sd-avi{display:flex}
#sn .sd-pt{min-width:0;flex:1}
#sn .sd-pn{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.015em;line-height:1.15;color:var(--ink)}
#sn .sd-pn>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sn .sd-ph{font-size:14px;color:var(--mute);margin-top:3px}
#sn .sd-plm{display:inline-flex;width:19px;height:19px;flex:none}
#sn .sd-plm svg{width:19px;height:19px}
#sn .sd-pstats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:13px}
#sn .sd-ps{display:flex;flex-direction:column;gap:1px;min-width:0}
#sn .sd-ps b{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
#sn .sd-ps em{font-style:normal;font-size:12px;color:var(--mute)}
#sn .sd-pb{font-size:14px;line-height:1.45;color:var(--ink-soft);margin-top:11px;max-width:560px}
#sn .sd-pu{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;font-family:var(--pen,'Caveat',cursive);font-size:18px;color:var(--mute);margin-top:10px}
#sn .sd-pu>span{white-space:nowrap}
#sn .sd-pu b{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:600;margin-left:6px}
#sn .sd-rhead{padding:8px 2px 2px}
#sn .sd-rht{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}

/* ── THE CONTENT: the grid, each video, its tape ─────────────────────────── */
#sn .sd-vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
#sn .sd-vgrid.all{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
#sn .sd-v{min-width:0;cursor:pointer;border-radius:14px;padding:7px 7px 10px;margin:-7px -7px -10px;transition:background .15s}
#sn .sd-v:hover{background:var(--sd-hover)}
#sn .sd-vf{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--thumb)}
#sn .sd-vf img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-vv{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:28px 10px 9px;font-family:var(--serif);font-size:17px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66));letter-spacing:-.01em}
#sn .sd-play{fill:#fff;flex:none}
#sn .sd-vdur{position:absolute;right:7px;top:7px;font-style:normal;font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.46);border-radius:6px;padding:2px 6px}
#sn .sd-va{font-size:12.5px;font-weight:600;color:var(--ink);margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sn .sd-vk{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:var(--ink);min-width:0}
#sn .sd-va+.sd-vk{margin-top:4px}
#sn .sd-vk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sn .sd-vh{font-size:12.5px;line-height:1.35;color:var(--ink-soft);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#sn .sd-vh b{font-weight:600;color:var(--ink)}
#sn .sd-vm,#sn .sd-vd{font-size:11.5px;color:var(--mute);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sn .sd-vd{margin-top:1px}
#sn svg.sd-tp{display:block;overflow:visible}
#sn svg.sd-tp.mini{margin-top:10px}
#sn .sd-vfoot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 18px;margin-top:18px}
#sn .sd-tapekey{display:inline-flex;align-items:center;gap:9px;flex-wrap:nowrap;font-size:11.5px;color:var(--mute);max-width:460px;line-height:1.35}
#sn .sd-tapekey svg{flex:none}
/* her read of one video */
#sn .sd-read{display:grid;grid-template-columns:172px minmax(0,1fr);gap:22px;margin:20px 0 0;padding:20px}
#sn .sd-rf{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--thumb);cursor:pointer;align-self:start}
#sn .sd-rf img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-rf b{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:34px 11px 32px;color:#fff;font-family:var(--serif);font-size:19px;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.72))}
#sn .sd-rf span{position:absolute;left:11px;bottom:11px;font-family:var(--pen,'Caveat',cursive);font-size:16px;color:#fff;opacity:.95}
#sn .sd-rb{min-width:0}
#sn .sd-rt{display:flex;flex-wrap:wrap;align-items:center;gap:3px 0;font-size:12.5px;color:var(--mute)}
#sn .sd-rkind{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
#sn .sd-rn{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:12px}
#sn .sd-rn2{font-size:12px;color:var(--mute);margin-top:7px}
#sn .sd-rn2 b{color:var(--ink);font-weight:600}
#sn .sd-ros{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#sn .sd-ro{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;font-size:13px;line-height:1.42;color:var(--ink-soft)}
#sn .sd-rok{font-family:var(--pen,'Caveat',cursive);font-size:16px;line-height:1.1;color:var(--lav)}
#sn .sd-rok em{font-family:var(--sans);font-style:normal;display:block;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-rov b{color:var(--ink);font-weight:600}
#sn .sd-tape{position:relative;margin-top:16px;--tpl:116px}
#sn .sd-tpr{display:grid;grid-template-columns:var(--tpl) minmax(0,1fr);align-items:center;min-height:14px;margin-bottom:3px}
#sn .sd-tpr>span{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
#sn .sd-tpms{min-height:42px;align-items:start;margin-top:5px}
#sn .sd-tpms>div{position:relative;height:42px}
#sn .sd-tpm{position:absolute;top:0;font-style:normal;white-space:nowrap;padding:0 0 0 6px;border-left:2px solid var(--lav);line-height:1.1}
#sn .sd-tpm.r1{top:21px}
#sn .sd-tpm.r2{top:42px}
#sn .sd-tpm.end{transform:translateX(-100%);padding:0 6px 0 0;border-left:0;border-right:2px solid var(--lav);text-align:right}
#sn .sd-tpm b{font-family:var(--pen,'Caveat',cursive);font-size:16px;font-weight:600;color:var(--ink)}
#sn .sd-tpm em{font-style:normal;font-size:11px;color:var(--mute);margin-left:5px;font-variant-numeric:tabular-nums}
#sn .sd-tph{position:absolute;left:var(--tpl);right:0;top:0;bottom:0}
#sn .sd-tph i{position:absolute;top:0;bottom:0;width:2.5%;cursor:pointer;border-radius:3px}
#sn .sd-tph i:hover{background:var(--sd-hover)}
#sn .sd-keys{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
#sn .sd-key{display:flex;flex-direction:column;gap:1px;width:76px;cursor:pointer}
#sn .sd-keyf{display:block;width:76px;aspect-ratio:9/16;border-radius:9px;overflow:hidden;background:var(--thumb);margin-bottom:5px}
#sn .sd-keyf img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-key:hover .sd-keyf{box-shadow:0 0 0 2px var(--lav)}
#sn .sd-key b{font-family:var(--pen,'Caveat',cursive);font-size:16px;font-weight:600;color:var(--ink);line-height:1.05}
#sn .sd-key em{font-style:normal;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-verd{font-family:var(--pen,'Caveat',cursive);font-size:20px;line-height:1.28;color:var(--ink);margin:16px 0 0;max-width:660px}
/* the creators out there */
#sn .sd-crs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
#sn .sd-cr{display:grid;grid-template-columns:48px minmax(0,1fr) 34px;gap:14px;align-items:center;padding:12px 14px;cursor:pointer}
#sn .sd-cr:hover{background:var(--sd-hover);border-radius:12px}
#sn .sd-crav{width:48px;height:48px}
#sn .sd-crav img{width:48px;height:48px;border-radius:50%;object-fit:cover;display:block;background:var(--thumb)}
#sn .sd-crav .sd-avi{font-size:20px}
#sn .sd-crt{min-width:0;display:flex;flex-direction:column;gap:1px}
#sn .sd-crt>b{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sn .sd-crt>span{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sn .sd-crt>span b{color:var(--ink);font-weight:600}
#sn .sd-selh{display:inline-flex;align-items:center;gap:6px;font-family:var(--pen,'Caveat',cursive);font-size:18px;color:var(--lav)}
#sn .sd-selh i{font-style:normal;cursor:pointer;font-family:var(--sans);font-size:14px}

/* ── THE CHAPTERS: the row that sticks, the grid, the card ───────────────── */
#sn .sd-nav{position:sticky;top:var(--sd-top,0px);z-index:5;display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  margin:32px -2px 0;padding:12px 4px 12px;background:var(--sd-navbg);box-shadow:0 1px 0 var(--lav-16,rgba(175,105,238,.16))}
#sn .sd-nav::-webkit-scrollbar{display:none}
#sn .sd-nav i{flex:none;font-style:normal;font-family:var(--serif);font-size:15.5px;font-weight:500;color:var(--mute);cursor:pointer;white-space:nowrap;line-height:1.2;padding-bottom:2px}
#sn .sd-nav i:hover{color:var(--ink)}
#sn .sd-nav i.on{color:var(--ink)}
#sn .sd-chap{margin-top:30px}
#sn .sd-chap>.sd-h2{margin-bottom:14px}
#sn .sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
#sn .sd-card{min-width:0;padding:19px 20px 17px;display:flex;flex-direction:column}
#sn .sd-card>.sd-line{margin-top:auto;padding-top:16px}
#sn .sd-card[data-span="l"]{grid-column:1/-1}
#sn .sd-chd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 18px}
#sn .sd-chd h3{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink);margin:0}
#sn .sd-unit{font-size:12px;color:var(--mute);line-height:1.3}
#sn .sd-rank{position:relative;align-self:center;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none}
#sn .sd-rank svg.sd-rkink{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
#sn .sd-rank b{position:relative;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--lav)}
#sn .sd-line{font-family:var(--pen,'Caveat',cursive);font-size:20.5px;line-height:1.22;color:var(--ink);margin:16px 0 0;max-width:760px}
#sn .sd-fig{min-width:0;position:relative}
#sn .sd-figbar{display:flex;justify-content:flex-end;margin:-6px 0 10px}
#sn .sd-figfoot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;margin-top:14px}
#sn .sd-foot{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:var(--pen,'Caveat',cursive);font-size:17px;color:var(--mute);margin:30px 2px 0}
#sn .sd-link{color:var(--lav);cursor:pointer;border-bottom:1px dashed var(--lav)}
#sn .sd-wait{display:flex;align-items:center;gap:10px;font-family:var(--pen,'Caveat',cursive);font-size:21px;color:var(--mute);margin:28px 2px}
#sn .sd-pen{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--lav);border-right-color:transparent;animation:sdspin .9s linear infinite;flex:none;margin-right:4px}
@keyframes sdspin{to{transform:rotate(360deg)}}
#sn .sd-thin{display:flex;align-items:center;gap:10px;font-family:var(--pen,'Caveat',cursive);font-size:18px;color:var(--mute);margin:24px 2px}
#sn .sd-thd i{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--lav);margin-right:4px}
#sn .sd-thd i.on{background:var(--lav)}

/* ── the pieces every drawing shares ──────────────────────────────────────── */
#sn .sd-svg{display:block;overflow:visible;max-width:none}
#sn .sd-rel{position:relative}
#sn .sd-tx{font-family:var(--sans);font-size:10.5px;fill:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-pent{font-family:var(--pen,'Caveat',cursive);font-size:16px;font-weight:600;fill:var(--ink-soft);paint-order:stroke;stroke:var(--sd-navbg);stroke-width:4px;stroke-linejoin:round}
#sn .sd-bv{font-family:var(--sans);font-size:12.5px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
#sn .sd-bv.m{font-weight:500;fill:var(--mute)}
#sn .sd-bn{font-family:var(--sans);font-size:11px;font-weight:400;fill:var(--mute)}
#sn .sd-hit{fill:transparent;cursor:pointer}
#sn .sd-hg .sd-guide,#sn .sd-hg .sd-gdot{opacity:0;transition:opacity .08s}
#sn .sd-hg:hover .sd-guide,#sn .sd-hg:hover .sd-gdot{opacity:1}
#sn .sd-guide{stroke:var(--ink);stroke-opacity:.3;stroke-width:1}
#sn .sd-gdot{fill:var(--lav);stroke:var(--sd-navbg);stroke-width:2;pointer-events:none}
#sn .sd-none{fill:var(--sd-none)}
#sn .sd-faint{fill:var(--sd-grid)}
#sn .sd-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12px;color:var(--ink-soft)}
#sn .sd-leg.sm{margin:0 0 12px;font-size:11.5px;color:var(--mute)}
#sn .sd-leg span{display:inline-flex;align-items:center;gap:6px}
#sn .sd-ls{display:inline-block;width:15px;height:2.5px;border-radius:2px;background:var(--c)}
#sn .sd-mkk{display:inline-block;width:2.5px;height:11px;background:var(--ink);opacity:.65;border-radius:1px}
#sn .sd-refk{display:inline-block;width:1.5px;height:12px;background:var(--ink);opacity:.45}
#sn .sd-th{position:relative;display:inline-block;flex:none;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--thumb);cursor:pointer;vertical-align:middle}
#sn .sd-th img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-th.xs{width:22px;border-radius:4px}
#sn .sd-th.sm{width:34px}
#sn .sd-th:hover{box-shadow:0 0 0 2px var(--lav)}
#sn .sd-frs{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
#sn .sd-frs.c{justify-content:center}
/* growth: the frames above their month */
#sn .sd-call{position:absolute;top:0;border-radius:6px;overflow:hidden;background:var(--thumb);cursor:pointer;box-shadow:0 0 0 2px var(--sd-navbg),0 1px 5px rgba(0,0,0,.2)}
#sn .sd-call img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-call b{position:absolute;left:0;right:0;bottom:0;padding:12px 2px 3px;font-size:9.5px;font-weight:700;color:#fff;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.72))}
#sn .sd-call:hover{box-shadow:0 0 0 2px var(--lav)}
/* the rhythm */
#sn .sd-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
#sn .sd-tile{padding:12px 14px 11px}
#sn .sd-tile b{display:block;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
#sn .sd-tile span{display:block;font-size:11.5px;color:var(--mute);margin-top:4px;line-height:1.3}
#sn .sd-spk{margin-top:18px}
#sn .sd-spk .sd-mini{margin-bottom:6px}
/* the rings */
#sn .sd-ring{display:flex;align-items:center;gap:22px}
#sn .sd-ring.nar{flex-direction:column;align-items:stretch;gap:14px}
#sn .sd-donut{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
#sn .sd-ring.nar .sd-donut{align-self:center}
#sn .sd-donut g[data-act]{cursor:pointer;transition:opacity .12s}
#sn .sd-donut g[data-act]:hover{opacity:.75}
#sn .sd-cn{font-family:var(--serif);font-size:26px;font-weight:600;fill:var(--ink);letter-spacing:-.02em}
#sn .sd-cl{font-family:var(--pen,'Caveat',cursive);font-size:15px;fill:var(--mute)}
#sn .sd-dk{font-family:var(--pen,'Caveat',cursive);font-size:15px;color:var(--mute);white-space:nowrap}
#sn .sd-rleg{flex:1;min-width:0;max-width:520px;display:flex;flex-direction:column;gap:1px}
#sn .sd-ring.nt .sd-rlt{display:none}
#sn .sd-ring.nt .sd-rlh,#sn .sd-ring.nt .sd-rl{grid-template-columns:minmax(0,1fr) 58px 40px}
#sn .sd-rlh,#sn .sd-rl{display:grid;grid-template-columns:minmax(0,1fr) 64px 46px 50px;align-items:center;gap:8px}
#sn .sd-rlh{font-size:10.5px;color:var(--mute);padding:0 8px 4px;text-align:right}
#sn .sd-rl{padding:5px 8px;border-radius:10px;cursor:pointer;font-size:12.5px}
#sn .sd-rl:hover,#sn .sd-rl.on{background:var(--sd-hover)}
#sn .sd-rlk{display:flex;align-items:center;gap:8px;min-width:0}
#sn .sd-rll{min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;color:var(--ink)}
#sn .sd-rll.one{display:block;white-space:nowrap;text-overflow:ellipsis}
#sn .sd-rl.none .sd-rll{color:var(--mute)}
#sn .sd-rlv{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#sn .sd-rlv b{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink)}
#sn .sd-rlv em{font-style:normal;color:var(--mute);margin-left:5px;font-size:11px}
#sn .sd-rlt{text-align:right;color:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-rsel{margin-top:14px}
#sn .sd-rsel .sd-mini{display:block;margin-bottom:7px;font-family:var(--pen,'Caveat',cursive);font-size:16px}
/* the bars */
#sn .sd-hbars{position:relative;display:flex;flex-direction:column}
#sn .sd-hbh{position:relative}
#sn .sd-hbh span{position:absolute;bottom:1px;transform:translateX(-50%);font-family:var(--pen,'Caveat',cursive);font-size:16px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
#sn .sd-hbr{display:grid;align-items:center;border-radius:9px}
#sn .sd-hbr:hover{background:var(--sd-hover)}
#sn .sd-hbl{display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--ink);line-height:1.25;padding-left:6px}
#sn .sd-hbl>span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#sn .sd-hbt{display:block;min-width:0}
#sn .sd-hbf{display:flex;gap:4px;padding-right:6px;justify-content:flex-end}
#sn svg.sd-hbref{position:absolute;pointer-events:none;overflow:visible}
#sn .sd-hbars.nar .sd-hbr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l f" "t t";row-gap:2px;padding:6px 0 4px}
#sn .sd-hbars.nar .sd-hbl{grid-area:l}
#sn .sd-hbars.nar .sd-hbt{grid-area:t}
#sn .sd-hbars.nar .sd-hbf{grid-area:f}
/* the columns */
#sn .sd-cols{margin-top:6px}
#sn .sd-coll{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:4px;margin-top:9px}
#sn .sd-colt{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
#sn .sd-colt>span:first-child{font-size:12px;color:var(--ink);line-height:1.25}
#sn .sd-colt em{font-style:normal;font-size:11px;color:var(--mute)}
#sn .sd-cols .sd-leg.sm{margin:12px 0 0}

/* every first second */
#sn .sd-chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 16px}
#sn .sd-chips i{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-family:var(--pen,'Caveat',cursive);font-size:17px;color:var(--mute);cursor:pointer;line-height:1.1;padding-bottom:1px}
#sn .sd-chips i b{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--mute)}
#sn .sd-chips i:hover,#sn .sd-chips i.on{color:var(--ink)}
#sn .sd-wall{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px 10px}
#sn .sd-wt{margin:0;min-width:0;cursor:pointer}
#sn .sd-wf{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--thumb)}
#sn .sd-wf img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-wf b{position:absolute;left:0;right:0;bottom:0;padding:20px 8px 7px;font-family:var(--serif);font-size:14px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66))}
#sn .sd-wf i{position:absolute;right:5px;top:5px;font-style:normal;font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.46);padding:1px 5px;border-radius:5px}
#sn .sd-wt:hover .sd-wf{box-shadow:0 0 0 2px var(--lav)}
#sn .sd-wt figcaption{margin-top:7px}
#sn .sd-ww{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--ink)}
#sn .sd-wl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.3;color:var(--mute);margin-top:2px}
/* what is in the first three seconds */
#sn .sd-mxf{position:absolute;top:0;border-radius:3px;overflow:hidden;background:var(--thumb);cursor:pointer}
#sn .sd-mxf img{width:100%;height:100%;object-fit:cover;display:block}
#sn .sd-mxf:hover{box-shadow:0 0 0 2px var(--lav);z-index:2}
#sn .sd-mxt{font-family:var(--sans);font-size:11.5px;fill:var(--ink)}
#sn .sd-mxv{font-family:var(--serif);font-size:12px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
#sn .sd-mxv.m{font-weight:500;fill:var(--mute)}
#sn .sd-mxh:hover{fill:var(--sd-hover)}
#sn .sd-mxc{display:flex;flex-direction:column;gap:2px}
#sn .sd-mxr{display:grid;gap:10px;align-items:center;padding:4px 6px;border-radius:8px;font-size:12px;color:var(--ink)}
#sn .sd-mxr.on{padding:7px 9px;margin:2px -3px}
#sn .sd-mxl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* where the open held */
#sn .sd-held{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
#sn .sd-hs{min-width:0}
#sn .sd-hsn{display:flex;align-items:baseline;gap:8px}
#sn .sd-hsn .sd-sw{align-self:center}
#sn .sd-hsn b{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
#sn .sd-hsn span{font-family:var(--pen,'Caveat',cursive);font-size:18px;color:var(--ink-soft)}
#sn .sd-hst{font-size:12px;color:var(--mute);margin:5px 0 10px}
#sn .sd-hst b{font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:600}
/* the first lines */
#sn .sd-lines{display:flex;flex-direction:column;gap:18px}
#sn .sd-li q{display:block;font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.42;color:var(--ink);quotes:"\201C" "\201D"}
#sn .sd-lim{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:7px;font-size:12px;color:var(--mute)}
#sn .sd-lim b{color:var(--ink);font-weight:600}
/* the small drawings side by side: the shape of a video, the pace */
#sn .sd-sm{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:22px 18px}
#sn .sd-smp{min-width:0}
#sn .sd-smh{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;font-size:12.5px;color:var(--ink);min-height:18px}
#sn .sd-smh>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#sn .sd-smp:not(.on) .sd-smh>span:first-child{font-weight:500;color:var(--ink-soft)}
#sn .sd-smh>b{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
#sn .sd-smh>em{font-style:normal;color:var(--mute);font-variant-numeric:tabular-nums}
#sn .sd-scs .sd-smh{flex-wrap:wrap;gap:0 8px}
#sn .sd-scs .sd-smh>span:first-child{flex:1 1 100%;white-space:normal}
#sn .sd-tag{font-family:var(--pen,'Caveat',cursive);font-size:16px;color:var(--mute);white-space:nowrap}
#sn .sd-tag.on{color:var(--lav)}
/* where things happen */
#sn .sd-mo{display:flex;flex-direction:column;gap:1px}
#sn .sd-mor{display:grid;grid-template-columns:var(--mcols);align-items:center;column-gap:10px;border-radius:9px}
#sn .sd-mor.on{padding:6px 8px;margin:3px -8px}
#sn .sd-moax{margin-bottom:2px}
#sn .sd-mol{font-size:12.5px;color:var(--ink);line-height:1.25;padding-left:6px}
#sn .sd-mol em{display:block;font-style:normal;font-size:11px;color:var(--mute);margin-top:1px}
#sn .sd-mos{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-variant-numeric:tabular-nums}
#sn .sd-mos b{display:inline-flex;align-items:center;gap:5px;font-family:var(--serif);font-size:13px;font-weight:600;color:var(--ink)}
#sn .sd-mos b.m{font-weight:500;color:var(--mute)}
#sn .sd-mo.nar .sd-mor{grid-template-areas:"l l" "t s"}
#sn .sd-mo.nar .sd-mol{grid-area:l;padding:8px 0 2px 4px}
#sn .sd-mo.nar .sd-mor>svg.sd-svg{grid-area:t}
#sn .sd-mo.nar .sd-mos{grid-area:s}
/* from a view to a share */
#sn .sd-fun{display:flex;align-items:flex-start;justify-content:space-between;gap:4px}
#sn .sd-funs{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;flex:1;border-radius:10px;padding:4px 2px}
#sn .sd-funs:hover{background:var(--sd-hover)}
#sn .sd-funs>b{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--ink);margin-top:9px;line-height:1;letter-spacing:-.02em}
#sn .sd-funs>span{font-family:var(--pen,'Caveat',cursive);font-size:17px;color:var(--ink-soft);margin-top:4px}
#sn .sd-funs>em{font-style:normal;font-size:11px;color:var(--mute);margin-top:2px}
#sn .sd-funa{flex:none;width:14px}
#sn .sd-funb{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;color:var(--mute)}
#sn .sd-funb b{font-family:var(--serif);font-size:14px;color:var(--ink);font-weight:600}
/* what people talk about and pass on */
#sn .sd-tops{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px}
#sn .sd-toph{font-family:var(--pen,'Caveat',cursive);font-size:17px;color:var(--mute);margin-bottom:8px}
#sn .sd-topi{display:grid;grid-template-columns:16px 34px minmax(0,1fr);align-items:center;gap:10px;padding:5px 6px;border-radius:10px;cursor:pointer}
#sn .sd-topi:hover{background:var(--sd-hover)}
#sn .sd-topn{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--lav);text-align:center}
#sn .sd-topv b{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
#sn .sd-topv em{font-style:normal;font-size:11.5px;color:var(--mute)}
/* what parts the videos */
#sn .sd-db{display:flex;flex-direction:column;gap:2px}
#sn .sd-dbr{display:grid;grid-template-columns:var(--dcols);align-items:center;column-gap:9px;padding:6px;border-radius:10px}
#sn .sd-dbr:hover{background:var(--sd-hover)}
#sn .sd-dbt{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
#sn .sd-dbt em{display:block;font-family:var(--sans);font-style:normal;font-weight:400;font-size:11.5px;color:var(--mute);margin-top:2px}
#sn .sd-dbs{display:block;min-width:0}
#sn .sd-dbv{font-family:var(--serif);font-size:13px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--sd-navbg);stroke-width:4px;stroke-linejoin:round}
#sn .sd-dbv.m{font-weight:500;fill:var(--mute)}
#sn .sd-db.nar .sd-frs{display:none}

/* ── the hover card, on her paper, framed by her pen (it lives on <body>) ─── */
.sd-tip{position:fixed;z-index:10000;display:none;align-items:flex-start;gap:11px;max-width:320px;padding:11px 13px;
  background:var(--paper,#F0ECE6);color:var(--ink,#141414);box-shadow:0 10px 28px rgba(20,20,20,.14);border-radius:6px;pointer-events:none;
  font:12.5px/1.4 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
:root[data-theme="dark"] .sd-tip{box-shadow:0 10px 28px rgba(0,0,0,.5)}
.sd-tip svg.sd-tink{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.sd-tip>*:not(.sd-tink){position:relative}
.sd-tip .sd-tf{width:56px;height:100px;object-fit:cover;border-radius:8px;background:var(--thumb,#E9E4DA);flex:none}
.sd-tip .sd-tb{min-width:0}
.sd-tip .sd-tt{font-family:var(--serif,'Fraunces',serif);font-size:14px;font-weight:600;margin-bottom:5px;line-height:1.25}
.sd-tip .sd-tr{margin-top:1px}
.sd-tip .sd-tr b{font-weight:700;font-variant-numeric:tabular-nums}
.sd-tip .sd-tr span{color:var(--mute,#69645A)}
.sd-tip .sd-tv{margin-top:6px;color:var(--mute,#69645A);font-size:11.5px}
.sd-tip .sd-tn{margin-top:6px;font-family:var(--pen,'Caveat',cursive);font-size:16px;line-height:1.25}
.sd-tip .sd-tk{display:inline-block;width:12px;height:2.5px;border-radius:2px;background:var(--c);vertical-align:middle;margin-right:7px}

/* ── the panel at its usual width, or dragged narrow, and the phone ──────── */
@container (min-width:900px){
  #sn .sd-vgrid:not(.all){grid-template-columns:repeat(3,minmax(0,220px))}
}
@container (max-width:560px){
  #sn .sd-prof{gap:16px}
  #sn .sd-av,#sn .sd-av img{width:70px;height:70px}
  #sn .sd-avi{font-size:27px}
  #sn .sd-pn{font-size:22px}
  #sn .sd-pstats{gap:6px 18px}
  #sn .sd-ps b{font-size:18px}
  #sn .sd-ps em{font-size:11.5px}
  #sn .sd-vgrid{gap:14px 8px}
  #sn .sd-vgrid.all{grid-template-columns:repeat(3,minmax(0,1fr))}
  #sn .sd-v{padding:4px 4px 7px;margin:-4px -4px -7px}
  #sn .sd-vv{font-size:14px;padding:20px 7px 6px}
  #sn .sd-vk{font-size:11px}
  #sn .sd-vh{font-size:11.5px}
  #sn .sd-vm,#sn .sd-vd{font-size:10.5px}
  #sn .sd-read{grid-template-columns:1fr;padding:15px;gap:14px}
  #sn .sd-rf{width:128px}
  #sn .sd-tape{--tpl:104px}
  #sn .sd-keys{gap:10px}
  #sn .sd-key,#sn .sd-keyf{width:62px}
  #sn .sd-card{padding:16px 14px 14px}
  #sn .sd-h2{font-size:21px}
  #sn .sd-chd h3{font-size:17px}
  #sn .sd-line{font-size:19px}
  #sn .sd-held{gap:10px}
  #sn .sd-rlh,#sn .sd-rl{grid-template-columns:minmax(0,1fr) 58px 40px}
  #sn .sd-rlt{display:none}
  #sn .sd-funs>b{font-size:19px}
  #sn .sd-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  #sn .sd-nav{gap:16px}
}