/* lib/writing/writing.css — the Writing page: the intro
   statement, the language sign hung over the head of the bookcase, the bookcase (paper boxes under one camera, planks
   with lips, contact stipple, the held book's cover, obi and title page), and the index beside it (readout,
   fore-edge tabs, year ledger).
   Flat tones and ink edges, no light source; the pen (pen.css) is the only highlighter, and nothing chosen is
   coral at rest. Ink hairlines are color-mix of --ink, so the only literals are the spine tones below. */

@font-face{font-family:"Noto Serif SC";src:url("../../fonts/derived/NotoSerifSC-ui.woff2") format("woff2");font-weight:200 900;font-display:swap}
/* The spine tones are this file's one colour exception: the four tans and the series' dark cloth the shelf
   has always used, kept exact so the books keep their colours. */
.wr{--tone-0:#C9BDA3;--tone-1:#D8CBB0;--tone-2:#B7AB8F;--tone-3:#E4DAC7;--tone-s:#3D362A;--tone-s-ink:#EFE5D3}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Noto Serif SC","Fraunces",Georgia,serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.display{font-family:"DingTalk JinBuTi","Fraunces",serif;font-weight:400}
.hand{font-family:"MuyaoPleased","Caveat",cursive}
.util{font-family:"IBM Plex Mono",monospace;letter-spacing:.04em}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.writing-statement{font-size:clamp(19px,2.2vw,24px);line-height:1.35;color:var(--soft);padding-bottom:8px}
.writing-statement-line{display:block}
.writing-statement-line + .writing-statement-line{margin-top:2px}
.writing-statement-line[lang="zh"]{font-family:"MuyaoPleased",cursive;letter-spacing:.025em}
.writing-statement-line[lang="en"]{font-family:"Caveat",cursive;letter-spacing:.01em}
.statement-beat{display:inline-block;color:var(--mark);font-size:1.06em;font-weight:600;transform:rotate(-1deg) translateY(-.02em)}

/* ---- the page body: the bookcase takes the width, the index stands beside it and stays in view ---- */
.wr{container:wr/inline-size;position:relative;--stick:16px;margin-top:clamp(28px,3.4vw,40px)}
/* app.js mounts the shelf well after the template paints; until then the empty host holds the height the shelf will
   take, so fig.01 under it never moves. On a phone that is the index strip, the sign's row and the 346 px swipe shelf,
   the same at every width; on the desk it is the sign's row, then the index column, which the case beside it only
   outgrows below the fold (more planks, at narrower widths). The layout rule is app.js's: phone below 760 px.
   writing-criteria.mjs checks both. The held space is hidden: it draws nothing, and when a face landing in the intro
   moves it, the browser would otherwise score the whole space as a layout shift. */
.wr:empty{visibility:hidden}
.wr:empty::before{content:"";display:block;height:881.5px}
@container wr (width < 760px){.wr:empty::before{height:661.72px}}
/* the language sign hangs in a row of its own over the case's left column, so the case and the sticky index still
   start level and the whole ledger fits beside the case */
.wr-body{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:14px 30px;align-items:stretch}
.wr-case{position:relative;min-width:0;grid-area:2/1}
.wr-index{position:relative;display:flex;flex-direction:column;min-width:0;grid-area:2/2}
.wr:not(.is-phone) .wr-index{position:sticky;top:var(--stick);align-self:start}
.wr.is-phone .wr-body{display:flex;flex-direction:column;gap:0}
.wr.is-phone .wr-case{margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the language sign (sign.js): a two-sided card on a nail over the head of the case ---- */
/* Its row is as tall as the sign and takes the row gap back, so its foot is the case's top edge: nothing in the case
   (the books, the bird, the book in your hand, all clipped to it) ever passes behind it. Pen spacing on the card: the
   band's edge under the big word and the hint's hover line each keep ≥ 10 px (and ≥ 2× their drop) of paper above
   what follows them; the rows are set, not centred, so the clearances hold (writing-lang.mjs measures them). */
.wr-sign{--cw:142px;--ch:102px;--drop:19px;--nail:6px;position:relative;grid-area:1/1;justify-self:start;width:var(--cw);height:calc(var(--nail) + var(--drop) + var(--ch));margin:0 0 -14px 4px;pointer-events:none}
.sign-hang,.sign-flip{position:absolute;left:0;top:0;width:var(--cw);height:calc(var(--drop) + var(--ch));transform-origin:50% 0}
.sign-hang{top:var(--nail)}
.sign-flip{transform-style:preserve-3d}
.sign-string{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sign-string path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.sign-nail{position:absolute;left:calc(var(--cw) / 2 - 3px);top:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.sign-card{position:absolute;left:0;top:var(--drop);width:var(--cw);height:var(--ch);transform-style:preserve-3d;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* sign.js shows the face toward you by the card's angle; the English face is printed on the back */
.sign-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:9px;background:var(--page);border:1.5px solid var(--ink);border-radius:3px}
.sign-en{transform:rotateY(180deg)}
/* the two punched holes the string goes through */
.sign-face::before,.sign-face::after{content:"";position:absolute;top:7px;width:5px;height:5px;border-radius:50%;border:1px solid var(--ink);background:var(--paper2)}
.sign-face::before{left:13.5px}
.sign-face::after{right:13.5px}
.sign-face i{font-style:normal}
.sign-k{height:11px;font:9.5px/11px var(--util);letter-spacing:.12em;color:var(--pencil);white-space:nowrap}
.sign-k [lang=zh]{font:500 10.5px/11px "Noto Sans SC",sans-serif;letter-spacing:.08em;color:var(--soft)}
.sign-big{position:relative;height:34px;margin-top:3px;color:var(--ink)}
.sign-big[lang=zh]{font:400 30px/34px "DingTalk JinBuTi",serif;letter-spacing:.08em}
.sign-big[lang=en]{font:500 26px/34px "Fraunces",serif}
.sign-hint{height:13px;margin-top:15px;font:10.5px/13px var(--util);letter-spacing:.03em;color:var(--soft);white-space:nowrap}
.sign-hint [lang=zh]{font:500 11px/13px "Noto Sans SC",sans-serif}
.sign-to{position:relative;color:var(--ink)}
.sign-to[lang=en]{font:500 12px/13px "Fraunces",serif;letter-spacing:0}
/* phone: a wide, short card, the hint beside the big word (the 书架 · shelf line stays on the desk), in a row of its
   own between the index strip and the swipe shelf */
.wr.is-phone .wr-sign{--cw:178px;--ch:56px;--drop:12px;margin:2px 0 0 2px}
.wr.is-phone .sign-face{flex-direction:row;align-items:baseline;justify-content:center;gap:11px;padding-top:12px}
.wr.is-phone .sign-face::before,.wr.is-phone .sign-face::after{top:6px}
.wr.is-phone .sign-k{display:none}
.wr.is-phone .sign-big{height:30px;margin:0}
.wr.is-phone .sign-big[lang=zh]{font-size:24px;line-height:30px}
.wr.is-phone .sign-big[lang=en]{font-size:20px;line-height:30px}
.wr.is-phone .sign-hint{margin:0;font-size:9.5px}

/* ---- the camera and its world ---- */
.sh-view{position:absolute;inset:0;overflow:clip}
.sh-view.strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.sh-view.strip::-webkit-scrollbar{display:none}
.sh-world{position:absolute;left:0;top:0;height:100%;transform-style:preserve-3d;pointer-events:none}
.b3{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.f{position:absolute;left:0;top:0;transform-origin:0 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* a leaving book fades face by face: opacity on the box itself would flatten its 3D */
.b3.book .f{opacity:var(--o,1)}
.b3.book.is-out,.stip.is-out{display:none}

/* ---- a book: five paper faces (--sk, the spine type scale, is set on .sh-view by case.js) ---- */
.book{--bw:1.5px}
.f-spine > .bk-spine{position:absolute;inset:0;transform-origin:0 0;background:var(--tone);border:var(--bw) solid var(--ink);overflow:hidden}
/* the title in the shelf's language: Chinese upright in a column, Latin turned to read top to bottom, as a spine
   is set; case.js fits each one to its spine (size, and one line or two), and the clip cuts one it couldn't fit */
.bk-title{position:absolute;top:7%;left:50%;transform:translateX(-50%);max-height:85%;white-space:nowrap;text-wrap:balance;writing-mode:vertical-rl;text-orientation:mixed;font-family:"DingTalk JinBuTi",serif;font-size:calc(11px * var(--sk));line-height:1.25;letter-spacing:.03em;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.bk-title[lang=en]{text-orientation:sideways;font-family:"Fraunces",serif;font-weight:500;line-height:1.15;letter-spacing:.01em}
.series .bk-title{color:var(--tone-s-ink);max-height:70%}
/* the series number is a paper library label; coral stays on 写 */
.bk-badge{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);background:var(--paper);color:var(--ink);font:500 calc(9px * var(--sk))/1 "IBM Plex Mono",monospace;padding:3px 3px 2px;border-radius:1px;letter-spacing:.02em}
.bk-band{position:absolute;left:3px;right:3px;height:0;border-top:1px solid color-mix(in srgb,var(--ink) 26%,transparent)}
.bk-band.bb1{top:calc(5px * var(--sk))}.bk-band.bb2{top:calc(8.5px * var(--sk))}.bk-band.bb3{bottom:calc(6px * var(--sk))}
.series .bk-band{border-color:color-mix(in srgb,var(--tone-s-ink) 26%,transparent)}
.f-top,.f-fore{background:var(--page) repeating-linear-gradient(90deg,transparent 0 3.2px,color-mix(in srgb,var(--ink) 20%,transparent) 3.2px 4px);border:var(--bw) solid var(--ink)}
.f-top{border-bottom:0}
.f-back{background:var(--tone);border:var(--bw) solid var(--ink);border-right-width:0}
.f-cov{transform-style:preserve-3d;backface-visibility:visible;-webkit-backface-visibility:visible}

/* ---- the ghost of the next essay, planks, contact, the empty note ---- */
.g-front{border:1.5px dashed var(--pencil);border-bottom:0;display:grid;place-items:center}
.g-front span{font:calc(15px * var(--sk))/1 "MuyaoPleased",cursive;color:var(--pencil);writing-mode:vertical-rl}
.g-top{border:1.5px dashed var(--pencil);border-bottom:0}
.pl-top{background:var(--plank);border:1.5px solid var(--ink);border-bottom:0}
.pl-lip{background:var(--lip);border:1.5px solid var(--ink)}
.pl-top,.pl-lip{transition:opacity .22s linear}
.pl-top.is-off,.pl-lip.is-off{opacity:0}
/* the shelf label: a printed slip on the lip naming the years standing on it now */
.pl-lab{position:absolute;left:18px;top:50%;transform:translateY(-50%);padding:1.5px 6px 1px;background:var(--page);border:1px solid color-mix(in srgb,var(--ink) 42%,transparent);
  font:500 10.5px/1.05 "IBM Plex Mono",monospace;letter-spacing:.08em;color:var(--pencil);white-space:nowrap}
.pl-lab[hidden]{display:none}
.stip{background-repeat:repeat-x;background-position:0 0;transition:opacity .12s linear}
.case-empty{position:absolute;left:0;top:0;font:21px/1.25 "Caveat",cursive;color:var(--pencil);white-space:nowrap;transform-origin:0 100%;opacity:0;transition:opacity .2s linear}
.case-empty span{display:block;font:17px/1.3 "MuyaoPleased",cursive}
.case-empty.on{opacity:1}

/* ---- hit targets: flat links over the spines (z = +1px); a held book takes the pointer on every face ---- */
.hits{position:absolute;left:0;top:0;transform-style:preserve-3d}
.bk-hit{position:absolute;display:block;transform:translateZ(1px);pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bk-hit.is-out{display:none}
/* a spine's name wraps inside its own spine (clipped to nothing), so it never lays out across the index */
.bk-hit .sr-only{inset:0;width:auto;height:auto;margin:0;white-space:normal;clip:auto;clip-path:inset(50%)}
.bk-hit:focus,.bk-hit:focus-visible{outline:none}
.book.held .f,.book.held .leaf-front,.book.held .leaf-back,.book.held .p1{pointer-events:auto;cursor:pointer}

/* ---- the bird (hand's clock: stepped frames; its sprite's ground line is clipped so the book is the ground) ---- */
.bird{position:absolute;left:0;top:0;pointer-events:none}
.bird-f{position:absolute;inset:0;background:url("../../assets/bird-strip6-light.png") 0 0/600% 100% no-repeat;clip-path:inset(0 0 18% 0)}
.case-cue{position:absolute;left:0;right:0;top:4px;text-align:center;font:19px/1.2 "Caveat",cursive;color:var(--pencil);transform:rotate(-2deg);pointer-events:none;transition:opacity .2s;z-index:2}
.case-cue span{margin-left:8px;font:15px/1.2 "MuyaoPleased",cursive}
.case-cue.off{opacity:0}

/* ---- the book in your hand: front board (cover under the obi), its reverse, the title page. In the hand the cover
   face is laid out --z times the board (case.js sh.hand), so its own lengths go --z times; the .cv inside it, typeset
   at the hand's size, is scaled onto the board by --cvk (D / CW on the shelf, 1 in the hand) ---- */
.leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d}
.leaf-front,.leaf-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.leaf-front{background:var(--tone);border:calc(var(--bw) * var(--z, 1)) solid var(--ink);border-left-width:0}
.leaf-back{transform:rotateY(180deg);background:var(--plank) repeating-linear-gradient(135deg,transparent 0 calc(9px * var(--z, 1)),color-mix(in srgb,var(--ink) 5%,transparent) calc(9px * var(--z, 1)) calc(10px * var(--z, 1)));border:calc(var(--bw) * var(--z, 1)) solid var(--ink)}
.cv{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--cvk))}
.cv-img{position:absolute;inset:0;overflow:hidden;background:var(--paper2)}
.cv-img img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(.58) contrast(.88) sepia(.18) brightness(1.06)}
.obi{position:absolute;left:0;right:0;bottom:0;min-height:47%;display:flex;flex-direction:column;align-items:flex-start;background:var(--slip);border-top:1.4px solid var(--ink);padding:14px 13px 11px 14px;text-align:left}
.obi::after{content:"";position:absolute;right:5px;top:0;bottom:0;border-right:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
/* both titles: the shelf's language first (-t), the other under it (-s, two lines at most: it is whole on the title
   page); Chinese titles only ever in DingTalk, whose subset carries every post title (scripts/generate-fonts.py) */
.obi-t{position:relative;display:inline-block;max-width:100%;font:400 17px/1.28 "DingTalk JinBuTi",serif;letter-spacing:.02em;color:var(--ink)}
.obi-t[lang=en]{font-family:"Fraunces",serif;font-weight:500;line-height:1.2;letter-spacing:0}
.obi-s{margin-top:3px;font:12px/1.25 var(--text);color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.obi-s[lang=zh]{font:12.5px/1.35 "DingTalk JinBuTi",serif;letter-spacing:.02em}
.obi-s[hidden],.p1-s[hidden]{display:none}
.obi-meta{margin-top:9px;font:9.5px/1.6 var(--util);letter-spacing:.03em;color:var(--pencil)}
.obi-meta .ml{display:block}
.obi-meta b{white-space:nowrap;font-weight:400}
.obi-note{margin-top:auto;padding-top:10px;font:16px/1 "Caveat",cursive;color:var(--soft);transform:rotate(-2.5deg);transform-origin:0 50%;white-space:nowrap}
.obi-note span{font:15px/1 "MuyaoPleased",cursive;margin-left:7px;color:var(--ink)}
.exlib{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-2deg);padding:12px 16px 10px;border:1.5px solid color-mix(in srgb,var(--ink) 70%,transparent);font:10px/1.7 var(--util);letter-spacing:.14em;color:var(--soft);text-align:center;background:var(--page);white-space:nowrap}
.exlib b{display:block;font:500 17px/1.3 "Caveat",cursive;letter-spacing:0;color:var(--ink)}
.exlib span{display:block}
.p1{position:absolute;inset:0;transform:translateZ(calc(-1.5px * var(--z, 1)));background:var(--page);border:calc(1px * var(--z, 1)) solid color-mix(in srgb,var(--ink) 55%,transparent);border-left-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.p1 .cv{display:flex;flex-direction:column;align-items:flex-start;padding:calc(17% / var(--z, 1)) calc(11% / var(--z, 1)) calc(11% / var(--z, 1))}
.p1-head{font:8.5px/1 var(--util);letter-spacing:.14em;color:var(--pencil)}
.p1-t{position:relative;margin-top:40px;max-width:76%;font:400 22px/1.28 "DingTalk JinBuTi",serif;letter-spacing:.02em;color:var(--ink)}
.p1-t[lang=en]{font-family:"Fraunces",serif;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.p1-s{margin-top:7px;font:13px/1.3 var(--text);color:var(--soft)}
.p1-s[lang=zh]{font:13.5px/1.4 "DingTalk JinBuTi",serif;letter-spacing:.02em}
.p1-rule{display:block;width:34px;margin-top:16px;border-top:1.5px solid var(--ink)}
.p1-foot{margin-top:auto;font:8.5px/1.4 var(--util);letter-spacing:.08em;color:var(--pencil)}

/* ---- the index: readout ---- */
.ctl-label{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.ctl-label [lang=zh]{font:500 12.5px/1 "Noto Sans SC",sans-serif;color:var(--soft);letter-spacing:.06em}
.ctl-label span:not([lang]){font:10.5px/1 var(--util);color:var(--pencil);letter-spacing:.08em}
.ix-head{padding:0 0 12px}
.ro-foot{display:flex;align-items:baseline;gap:12px;min-height:22px}
.ro-n{font:12px/1 var(--util);letter-spacing:.04em;color:var(--pencil);white-space:nowrap}
.ro-clear{position:relative;margin-left:auto;padding:5px 2px;font:11.5px/1 var(--util);letter-spacing:.04em;color:var(--soft);visibility:hidden;white-space:nowrap}
.ro-clear > span{position:relative;display:inline-block}
.ro-clear[data-pen-tier="1"],.ro-clear[data-pen-tier="2"]{color:var(--ink)}
.ro.narrowed .ro-clear{visibility:visible}
/* the sentence sits well clear of clear's underline (≥ 10 px, scripts/verify/pen-spacing.mjs) */
.ro-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:9px;min-height:50px;align-content:flex-start;margin-top:12px;font:400 17.5px/1.42 var(--text);color:var(--ink)}
.ro .zh{font:500 16px/1.42 "Noto Serif SC",serif}
.ro-v{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.ro-t,.ro-was-t{white-space:nowrap}
.ro-v.is-all{color:var(--soft)}
.ro-v.is-all .zh{font-weight:400}
.ro-sep{color:var(--pencil);font-weight:300}
.ro-was{position:relative;color:var(--pencil)}
.ro-was[hidden]{display:none}
.ro-was .zh{font-weight:400}
.ro-strike{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}

/* ---- the index: a closed book whose tabs come out of its fore-edge ---- */
.tb-label{margin-bottom:9px}
.tb-block,.tb-inner{position:relative}
.tb{position:relative;display:flex;align-items:center;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tb-paper{position:absolute;left:0;top:0;z-index:-2;overflow:visible;pointer-events:none}
.tb-out{fill:var(--paper);stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.tb[aria-checked="true"] .tb-out{fill:var(--page)}
.tb-lip{fill:var(--paper2)}
.tb-crease{fill:none;stroke:var(--pencil);stroke-width:1;opacity:.55}
.tb-contact{fill:none;stroke:var(--pencil);stroke-width:1.1;stroke-linecap:round;opacity:.6}
.tb-lab{position:relative;display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.tb-en{font:500 11px/1.2 var(--util);letter-spacing:0;color:var(--ink)}
.tb-zh{font:12.5px/1.2 "Noto Sans SC",sans-serif;color:var(--soft)}
.tb-n{margin-left:auto;padding-left:7px;font:11px/1 var(--util);color:var(--pencil)}
.tb.is-off .tb-out{fill:var(--paper2)}
.tb.is-off .tb-en,.tb.is-off .tb-zh,.tb.is-off .tb-n{color:var(--pencil)}
.tb-edge{position:absolute;z-index:2;pointer-events:none;background:var(--page);border:1.5px solid var(--ink);border-radius:2px}
.tb-side{--cov:72px;--pg:7px}
.tb-side .tb-inner{padding:11px 0}
.tb-book{position:absolute;left:0;top:0;bottom:0;width:var(--cov);z-index:3;background:var(--tone-1);border:1.5px solid var(--ink);border-radius:2px 3px 3px 2px}
.tb-book::before{content:"";position:absolute;left:9px;top:3px;bottom:3px;border-left:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.tb-slip{position:absolute;left:19px;top:14px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;background:var(--page);border:1px solid color-mix(in srgb,var(--ink) 60%,transparent)}
.tb-slip b{font:400 17px/1.1 "DingTalk JinBuTi",serif;color:var(--ink);writing-mode:vertical-rl;letter-spacing:.14em}
.tb-slip i{font:normal 10px/1 var(--util);letter-spacing:.06em;color:var(--soft)}
.tb-side .tb-edge{left:calc(var(--cov) - 1.5px);top:3px;bottom:3px;width:var(--pg);border-radius:0 1px 1px 0;border-left:0;background-image:repeating-linear-gradient(0deg,transparent 0 2.4px,color-mix(in srgb,var(--ink) 22%,transparent) 2.4px 3.1px)}
.tb-side .tb-group{display:flex;flex-direction:column;gap:5px;padding-left:calc(var(--cov) - 6px)}
.tb-side .tb{width:calc(100% - 12px);height:35px;padding:0 8px 0 15px;z-index:1}
.tb-strip .tb-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;padding-top:13px;margin:0 -2px}
.tb-strip .tb-scroll::-webkit-scrollbar{display:none}
.tb-strip .tb-inner{width:max-content;min-width:100%;padding:0 10px 0 4px}
.tb-strip .tb-group{display:flex;gap:4px;align-items:flex-end}
.tb-strip .tb{height:42px;align-items:flex-start;padding:10px 12px 0}
.tb-strip .tb-edge{left:0;right:0;bottom:-2px;height:12px;background-image:repeating-linear-gradient(90deg,transparent 0 2.4px,color-mix(in srgb,var(--ink) 22%,transparent) 2.4px 3.1px)}

/* ---- the index: the year ledger (rows at --rh, 30 px, so an underline never hangs into the next year) ---- */
.ix-years{margin-top:auto;padding-top:14px}
.lg-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.lg-all{position:relative;padding:5px 2px;font:11.5px/1 var(--util);letter-spacing:.03em;color:var(--soft);white-space:nowrap}
.lg-all span{position:relative}
.lg-all[aria-pressed=true]{color:var(--ink);cursor:default}
.lg-track{position:relative;user-select:none;-webkit-user-select:none;cursor:pointer}
.lg-ink{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.lg-rule{stroke:var(--line);stroke-width:1}
.lg-margin{stroke:var(--pencil);stroke-width:1;opacity:.55}
.lg-tick{stroke:var(--pencil);stroke-width:1.2;stroke-linecap:round}
.tl path{fill:none;stroke:var(--ink);stroke-width:1.45;stroke-linecap:round}
.lg.narrowed .tl:not(.in) path{stroke:var(--pencil);opacity:.42}
.lg-row{position:relative;display:flex;min-width:0}
.lg-row:focus-visible,.wr button:focus-visible{outline:none}
.lg-y{position:relative;font:12.5px/1 var(--util);letter-spacing:.04em;color:var(--soft);white-space:nowrap}
/* a year with nothing for the chosen tag: pencil (still ≥ 4.5:1, still pressable), and its line has no tally */
.lg-row.is-dim .lg-y{color:var(--pencil)}
.lg.narrowed .lg-row:not(.is-in) .lg-y{color:var(--pencil)}
.lg-row.is-sel .lg-y{color:var(--ink);font-weight:500;opacity:1}
.lg-rows .lg-track{display:flex;flex-direction:column;height:calc(var(--ny,12) * var(--rh,30px));touch-action:none}
.lg-rows .lg-row{flex:1 1 0;align-items:center;padding-left:9px}
.lg.is-drag .lg-track{cursor:ns-resize}
.lg-cols .lg-track{display:flex;height:66px;touch-action:pan-y}
.lg-cols.is-drag .lg-track{cursor:ew-resize}
.lg-cols .lg-row{flex:1 1 0;align-items:flex-end;justify-content:center;padding-bottom:3px}
.lg-cols .lg-y{font-size:11px}
.lg-flag{position:absolute;left:0;top:0;z-index:6;padding:5px 9px 6px;background:var(--paper);border:1.5px solid var(--ink);border-radius:3px;
  font:500 11.5px/1 var(--util);letter-spacing:.03em;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s linear}
.lg-flag::after{content:"";position:absolute;background:var(--ink)}
.lg-rows .lg-flag::after{left:100%;top:50%;width:11px;height:1.5px;margin-top:-.75px}
.lg-cols .lg-flag::after{left:50%;top:100%;width:1.5px;height:9px;margin-left:-.75px}
.lg.flag-on .lg-flag{opacity:1}

/* ---- phone: the index as one strip above the shelf ---- */
.wr.is-phone .ix-head{padding-bottom:6px}
.wr.is-phone .ro-line{min-height:0;font-size:16px;column-gap:7px}
.wr.is-phone .ro .zh{font-size:14.5px}
.wr.is-phone .ro-v.is-all .zh,.wr.is-phone .ro-was .zh{display:none}
.wr.is-phone .tb-label{margin-bottom:0}
.wr.is-phone .ix-years{margin-top:10px;padding-top:0}
.wr.is-phone .lg-head{margin-bottom:2px}
.wr.is-phone .lg-all{padding:8px 4px}

/* ---- reduced motion: nothing fades or slides; states land at once (the springs and the pen snap in JS) ---- */
@media (prefers-reduced-motion:reduce){ .wr *,.wr *::before,.wr *::after{transition:none!important} }