/* Techo — generated by src-build/build.py; edit the sources there. */
:root{
  --desk:#e8e6e1; --desk-ink:#6d6a63;
  --paper:#fbf8ee; --paper-edge:#efe9d8; --grid:rgba(128,140,112,.17); --grid-strong:rgba(128,140,112,.3);
  --ink:#2a2724; --ink-soft:#5a544c; --olive:#8a9a2b; --tab:#b3c01c;
  --red:#d9573b; --red-deep:#b8432b; --teal:#6a98a3; --teal-deep:#3f6f7c; --kraft:#e4d2a3; --tape:rgba(236,214,150,.72);
  --hand:"Long Cang","Ma Shan Zheng","Kaiti SC","STKaiti","KaiTi",cursive;
  --title:"Ma Shan Zheng","Long Cang","Kaiti SC","STKaiti","KaiTi",cursive;
  --latin:"Caveat","Segoe Print","Comic Sans MS",cursive;
  --print:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--desk:#1e1f22;--desk-ink:#9c988f;color-scheme:dark}}
:root[data-theme="dark"]{--desk:#1e1f22;--desk-ink:#9c988f;color-scheme:dark}

html,body{height:100%}


.page{width:530px;height:740px;position:relative;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:14px 14px;background-position:-1px 6px;overflow:hidden;box-sizing:border-box}
.page.l{border-radius:6px 2px 2px 6px;box-shadow:inset -22px 0 26px -18px rgba(90,70,30,.22)}
.page.r{border-radius:2px 6px 6px 2px;box-shadow:inset 22px 0 26px -18px rgba(90,70,30,.22)}
.page::before{content:"";position:absolute;inset:0 0 auto 0;height:64px;background:var(--paper)}
.page::after{content:"";position:absolute;inset:auto 0 0 0;height:78px;background:var(--paper);border-top:1px solid var(--grid-strong)}

.head{position:absolute;top:18px;left:28px;right:28px;height:40px;display:flex;align-items:flex-end;gap:10px;z-index:2;border-bottom:1px solid var(--grid-strong);padding-bottom:6px}
.head .m{font:500 11px/1 var(--print);color:var(--olive)}
.head .d{font:400 30px/0.9 var(--print);color:var(--olive);letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.head .wd{display:grid;grid-template-rows:auto auto;border:1px solid var(--olive);border-radius:3px;text-align:center;overflow:hidden;margin-bottom:2px}
.head .wd b{font:500 11px/1 var(--print);color:#fff;background:var(--olive);padding:2px 5px}
.head .wd i{font:normal 500 8px/1 var(--print);color:var(--olive);padding:2px 4px;letter-spacing:.6px}
.head .wd.we b{background:var(--red)} .head .wd.we{border-color:var(--red)} .head .wd.we i{color:var(--red)}
.head .note{margin-left:auto;font:400 9px/1.3 var(--print);color:var(--desk-ink);opacity:.7;text-align:right;color:#a3a08f}

.foot{position:absolute;left:28px;right:28px;bottom:14px;height:50px;z-index:2;font:400 11.5px/1.55 var(--print);color:var(--olive)}
.foot small{display:block;font-size:9.5px;opacity:.85;margin-top:2px}
.tab{position:absolute;right:0;top:330px;width:18px;height:36px;background:var(--tab);border-radius:3px 0 0 3px;z-index:3;color:#fff;font:500 12px/36px var(--print);text-align:center}
.cal{position:absolute;right:28px;bottom:16px;z-index:3;display:grid;grid-template-columns:repeat(7,12px);gap:1px 2px;font:400 7px/10px var(--print);color:#a8a592;text-align:center;font-variant-numeric:tabular-nums}
.cal .t{color:#fff;background:var(--red);border-radius:2px}
.cal .h{color:var(--olive)}

.body{position:absolute;top:70px;left:28px;right:28px;bottom:84px;z-index:1}

/* ---------- handwriting ---------- */
h2{font:400 46px/1.02 var(--title);margin:0;color:var(--ink);letter-spacing:1px;text-wrap:balance;text-shadow:1px 1px 0 rgba(255,255,255,.7)}
.latin{font:600 21px/1.1 var(--latin);color:var(--ink-soft)}
.hand{font:400 19px/1.45 var(--hand);color:var(--ink)}
.hand.s{font-size:16.5px;line-height:1.4}
.stamp{position:absolute;width:38px;height:38px;border:2px solid var(--red);border-radius:50%;color:var(--red);font:400 22px/34px var(--title);text-align:center;transform:rotate(-8deg);opacity:.85;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px rgba(217,87,59,.5)}
.label{display:inline-block;background:var(--paper);border:1.5px solid var(--ink);padding:3px 8px 2px;font:400 16px/1.3 var(--hand);box-shadow:2px 2px 0 rgba(42,39,36,.12)}
.tape{position:absolute;width:62px;height:18px;background:var(--tape);z-index:4;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.photo{position:absolute;background:#fff;padding:7px 7px 24px;box-shadow:0 2px 5px rgba(40,30,10,.22)}
.photo .img{width:100%;height:100%;display:block}
.photo .cap{position:absolute;left:8px;right:8px;bottom:3px;font:400 13px/18px var(--hand);color:var(--ink-soft)}
.check{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.check li{font:400 16.5px/1.45 var(--hand);display:flex;gap:7px;align-items:center}
.check li::before{content:"";width:11px;height:11px;border:1.5px solid var(--red);flex:none;border-radius:1px}
.check li.done::before{background:linear-gradient(45deg,transparent 42%,var(--red) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--red) 42% 58%,transparent 58%)}
.wash{position:absolute;border-radius:50%;filter:blur(14px);opacity:.42;z-index:0}

/* ---------- comic ---------- */
.comic{position:absolute;top:66px;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:122px;gap:7px}
.panel{border:2px solid var(--ink);background:var(--paper);position:relative;overflow:hidden;border-radius:1px}
.panel .time{position:absolute;left:0;top:0;background:#f2e3b0;font:500 10px/1 var(--print);padding:4px 7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);letter-spacing:.4px}
.bub{position:absolute;background:#fff;border:1.5px solid var(--ink);border-radius:14px;padding:3px 9px;font:400 14.5px/1.3 var(--hand);white-space:nowrap}
.panel svg{position:absolute}

/* ---------- controls ---------- */
.nav button{appearance:none;border:1px solid transparent;background:transparent;color:var(--desk-ink);font:500 13px/1 var(--print);padding:8px 12px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums}
.nav button:hover{border-color:var(--desk-ink)}
.nav button[aria-current="true"]{background:var(--tab);color:#2a2a10}
.nav button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.nav .arrow{font-size:16px}
.hint{text-align:center;color:var(--desk-ink);font:400 12px/1.5 var(--print);margin-top:6px;opacity:.8}

.copy{appearance:none;border:1.5px solid var(--ink);background:var(--paper);font:400 15px/1 var(--hand);padding:5px 10px;cursor:pointer;border-radius:12px;color:var(--ink)}
.copy:hover{background:#f2e3b0}
.copy:focus-visible{outline:2px solid var(--red);outline-offset:2px}
a.ln{color:var(--teal-deep);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:4px}

:root{--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}

/* ---------- generic journal page (written from the admin) ---------- */
.jp .body{display:flex;flex-direction:column}
.jp .jt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;min-height:54px;padding-right:48px;margin-top:6px}
.jp .jt h2{flex:0 1 auto;max-width:100%;font-size:clamp(34px,46px,46px)}
.jp .jt .latin{transform:rotate(-2deg);padding-bottom:6px;flex:1 1 140px;min-width:140px}
.jp .jtext{flex:1;min-height:0;overflow:hidden;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.jp .jtext p{margin:0;font:400 var(--jfs,19px)/1.5 var(--hand);white-space:pre-wrap;overflow-wrap:anywhere}
.jp .jnote{align-self:flex-start;transform:rotate(-1.5deg);max-width:78%;white-space:pre-wrap;position:relative;margin:4px 0 0 6px}
.jp .jnote .tape{left:40%;top:-11px;transform:rotate(-4deg);width:50px}
.jp .jmug{position:absolute;right:6px;bottom:0}
.jp .jstk{flex:none;display:flex;align-items:flex-end;gap:14px;height:66px;margin-top:8px;padding-left:4px}
.jp .jstk.by-mug{padding-right:76px}
.jp .jstk .stk{flex:none;overflow:visible;transform:rotate(-6deg)}
.jp .jstk .stk:nth-child(2){transform:rotate(5deg) translateY(-6px)}
.jp.inked .jstk .stk{animation:stkHop .7s cubic-bezier(.3,1.5,.5,1) both}
.jp.inked .jstk .stk:nth-child(2){animation-name:stkHop2;animation-delay:.12s}
@keyframes stkHop{0%{transform:rotate(-6deg)}35%{transform:rotate(-12deg) translateY(-7px) scale(1.06)}100%{transform:rotate(-6deg)}}
@keyframes stkHop2{0%{transform:rotate(5deg) translateY(-6px)}35%{transform:rotate(11deg) translateY(-13px) scale(1.06)}100%{transform:rotate(5deg) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.jp.inked .jstk .stk{animation:none}}
.jp.empty .body{align-items:center;justify-content:center;text-align:center}
.jp.empty .hand{color:var(--ink-soft)}


/* ================= desk & stage ================= */
html,body{margin:0}
body{
  padding-inline:16px;padding-block:20px 28px;box-sizing:border-box;overflow-x:hidden;color:var(--ink);font-family:var(--print);
  background-color:var(--desk);
  background-image:
    repeating-linear-gradient(0deg,rgba(120,110,90,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(120,110,90,.03) 0 1px,transparent 1px 4px);
  min-height:100%;
}
.stage{margin:0 auto;position:relative;width:min(100%,calc((100vh - 150px) * 1060 / 740),1180px)}
#book{margin:0 auto}
/* no filter on the flipping book: filters force a full repaint every frame and make the turn stutter.
   A soft contact shadow sits under whatever is lying on the desk instead. */
.shift{will-change:transform}
.bookwrap{position:relative;perspective:var(--persp,5200px);perspective-origin:50% 45%}
.bookwrap::before{content:"";position:absolute;left:3%;right:3%;bottom:-12px;height:28px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,16,8,.28),rgba(20,16,8,0));pointer-events:none;z-index:-1;
  transition:left .5s ease,right .5s ease}
.bookwrap.closed-front:not(.portrait)::before{left:53%;right:3%}
.bookwrap.closed-back:not(.portrait)::before{left:3%;right:53%}
/* while a cover is closed the half it swung away from is empty desk */
.bookwrap.closed-front:not(.portrait) #book{clip-path:inset(-40px -40px -40px 50%)}
.bookwrap.closed-back:not(.portrait) #book{clip-path:inset(-40px 50% -40px -40px)}
/* a closed book shows only its board: the paper under it would peek out round the board's corners and edge */
.bookwrap.shut #book{visibility:hidden}
/* only an open book's pages take clicks and drags (see pagesLive in book.js) */
.bookwrap:not(.open) #book{pointer-events:none}

/* ---------- hard covers: a 3D board with thickness ---------- */
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;
  z-index:30;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bookwrap.portrait .leaf{left:0;width:100%}
.leaf:active{cursor:grabbing}
/* Like a real hardcover the board overhangs the pages: 4px at the head, tail and fore-edge, 1px over the hinge
   (BOARD_X / BOARD_Y in book.js). Flush with the pages, the paper peeked out round the rounded corners (and as an
   antialiased line at the hinge) whenever the board lay flat or nearly so. The artwork is stretched to the board
   (--kx/--ky), so its own edge, corners and page-edge stripe sit on the board's real edge. */
.leaf .face{position:absolute;inset:-4px -4px -4px -1px;background:#2b454b;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.leaf .face.front{transform:translateZ(3px);border-radius:3px 12px 12px 3px}
.leaf .face.back{transform:rotateY(180deg) translateZ(3px);border-radius:12px 3px 3px 12px}
.leaf .face>.page{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--kx,1),var(--ky,1))}
.leaf .shade{position:absolute;inset:0;background:#0b0f10;opacity:0;pointer-events:none}
/* the board's thickness: fore-edge, head and tail. Each stops where the face's corners start to round
   (radius 12px at the fore-edge, 3px at the hinge), or its square ends poke out past them as dark wedges. */
.leaf .edge{position:absolute;top:8px;height:calc(100% - 16px);width:6px;left:calc(100% + 1px);transform:rotateY(90deg);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(#2a4247,#1d3035);border-radius:2px}
.leaf .edge.top,.leaf .edge.bottom{left:2px;width:calc(100% - 10px);height:6px;transform:rotateX(90deg)}
.leaf .edge.top{top:-7px}.leaf .edge.bottom{top:auto;bottom:-7px}
.undershade{position:absolute;top:0;height:100%;width:50%;pointer-events:none;z-index:25;opacity:0}
/* the page a board lifts from sits in the board's shadow, right out to the fore-edge (a bright hairline showed there) */
.undershade.r{left:50%;background:linear-gradient(90deg,rgba(25,18,6,.6),rgba(25,18,6,.34) 55%,rgba(25,18,6,.26))}
.undershade.l{left:0;background:linear-gradient(270deg,rgba(25,18,6,.6),rgba(25,18,6,.34) 55%,rgba(25,18,6,.26))}
.bookwrap.portrait .undershade{left:0;width:100%}

/* StPageFlip's flip shadows are huge rotated boxes, only clip-path'ed down to the book. Their full boxes still
   count as page overflow, so mid-turn the document grew and the scrollbar came and went: the book shook sideways.
   Nothing is meant to show outside the block anyway (the canvas renderer draws inside the same rect). */
.stf__block{overflow:hidden;overflow:clip}
/* every page the flip library handles */
.pf{overflow:hidden;background:var(--paper)}
.pf>.page{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--k,1));will-change:transform;backface-visibility:hidden}
.pf.hard{background:transparent}

/* ================= cover: slate-teal cloth hardcover, his own stickers ================= */
.page.cover,.page.backcover{
  --cloth:#2f4a50;
  background-color:var(--cloth);
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.08),transparent 60%),
    linear-gradient(160deg,#35535a,#2a434a 60%,#243a40);
  background-size:auto;background-position:0 0;color:#dfe6df;
}
.page.cover::before,.page.cover::after,.page.backcover::before,.page.backcover::after,.page.inside::before,.page.inside::after,.page.flyleaf::before,.page.flyleaf::after{display:none}
.page.cover{border-radius:3px 10px 10px 3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 0 18px rgba(0,0,0,.18)}
.page.backcover{border-radius:10px 3px 3px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),inset 0 0 18px rgba(0,0,0,.18)}
.cover .spine,.backcover .spine{position:absolute;top:0;bottom:0;width:58px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),linear-gradient(90deg,#223a40,#2b464c 70%,#253e44)}
.cover .spine{left:0;box-shadow:1px 0 0 rgba(255,255,255,.08),2px 0 0 rgba(0,0,0,.25)}
.backcover .spine{right:0;box-shadow:-1px 0 0 rgba(255,255,255,.08),-2px 0 0 rgba(0,0,0,.25)}
/* the page block showing at the fore-edge: stacked sheets, rounded towards the reader, in the board's shadow at head and tail */
.cover .pages-edge{position:absolute;right:0;top:6px;bottom:6px;width:10px;border-radius:0 4px 4px 0;
  background:
    linear-gradient(90deg,rgba(60,48,24,.22),rgba(60,48,24,0) 35%,rgba(255,255,255,.28) 65%,rgba(60,48,24,.14)),
    linear-gradient(rgba(40,32,16,.28),rgba(40,32,16,0) 14px,rgba(40,32,16,0) calc(100% - 14px),rgba(40,32,16,.3)),
    repeating-linear-gradient(90deg,#fbf8ee 0 1px,#e4dcc6 1px 1.5px,#f6f1e2 1.5px 2.5px,#d6cdb3 2.5px 3px);
  box-shadow:inset 0 1px 0 rgba(40,32,16,.25),inset 0 -1px 0 rgba(40,32,16,.25),-1px 0 0 rgba(0,0,0,.18)}
/* debossed title */
.cover .deboss{position:absolute;left:104px;top:92px;font:600 58px/1 var(--mono);letter-spacing:-1px;color:#24393f;
  text-shadow:0 1px 0 rgba(255,255,255,.13),0 -1px 0 rgba(0,0,0,.35)}
.cover .deboss span{color:#b3c01c;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.cover .sub{position:absolute;left:108px;top:166px;font:500 13px/1.6 var(--mono);color:#9fb3ae;letter-spacing:.5px}
.cover .sub b{color:#dfe6df;font-weight:500}
.cover .cursor{display:inline-block;width:8px;height:15px;background:#b3c01c;vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* die-cut stickers */
.sticker{position:absolute;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.cover .s-mug{left:92px;bottom:92px;transform:rotate(-8deg)}
.cover .s-nas{left:210px;bottom:250px;transform:rotate(6deg)}
.cover .s-cloud{left:318px;bottom:320px;transform:rotate(-4deg)}
.cover .s-ticket{left:236px;bottom:104px;transform:rotate(-5deg)}
.cover .s-film{left:376px;bottom:196px;transform:rotate(9deg)}
/* the owner's own pictures on the cover (手帐设置), in four fixed spots */
.cover .s-photo img{display:block;max-width:150px;max-height:150px;border-radius:4px}
.cover .s-photo0{left:92px;top:236px;transform:rotate(-6deg)}
.cover .s-photo1{left:300px;top:212px;transform:rotate(5deg)}
.cover .s-photo2{left:120px;top:452px;transform:rotate(4deg)}
.cover .s-photo3{left:306px;top:470px;transform:rotate(-5deg)}
.ticket{width:176px;height:66px;background:#f2e3b0;border-radius:6px;display:flex;color:#2a2724;overflow:hidden}
.ticket .tk{flex:1;padding:7px 10px;font:600 10px/1.3 var(--mono);letter-spacing:.5px}
.ticket .tk b{display:block;white-space:nowrap;font:700 19px/1 var(--mono);letter-spacing:0;margin:2px 0}
.ticket .stub{width:30px;border-left:2px dashed #c9b27a;display:grid;place-items:center;writing-mode:vertical-rl;font:600 9px/1 var(--mono);letter-spacing:1px;color:#8a6d2b}
.film{width:74px;background:#1d1d1f;border-radius:4px;padding:8px 9px;display:grid;gap:5px;position:relative}
.film::before,.film::after{content:"";position:absolute;top:3px;bottom:3px;width:3px;background:repeating-linear-gradient(#1d1d1f 0 3px,#f2e3b0 3px 6px)}
.film::before{left:2px}.film::after{right:2px}
.film i{display:block;height:38px;border-radius:1px}
.film small{font:600 8px/1 var(--mono);color:#f2e3b0;text-align:center;letter-spacing:.5px}
.backcover .eof{position:absolute;left:0;right:58px;top:46%;text-align:center;font:600 30px/1 var(--mono);color:#24393f;text-shadow:0 1px 0 rgba(255,255,255,.13),0 -1px 0 rgba(0,0,0,.35)}
.backcover .imprint{position:absolute;left:0;right:58px;bottom:40px;text-align:center;font:500 10px/1.7 var(--mono);letter-spacing:.5px;color:#8fa39e}
/* endpapers: tiny graph-dot pattern */
.page.inside{background-color:#dfe4dc;background-image:radial-gradient(rgba(47,74,80,.22) 1px,transparent 1.2px);background-size:14px 14px}
.page.inside.l{box-shadow:inset -22px 0 26px -18px rgba(30,50,55,.3)}
.page.inside.r{box-shadow:inset 22px 0 26px -18px rgba(30,50,55,.3)}
/* flyleaf: README in a terminal-ish hand */
.flyleaf .body{display:flex;flex-direction:column;justify-content:center;gap:0;padding-inline:26px}
.flyleaf .readme{font:500 10.5px/1 var(--mono);letter-spacing:2px;color:var(--olive);margin-bottom:18px}
.flyleaf pre{margin:0;font:400 14.5px/1.9 var(--mono);color:var(--ink);white-space:pre-wrap}
.flyleaf pre .p{color:var(--olive)}
.flyleaf pre .c{color:#8b8676}
.flyleaf pre .h{font:400 23px/1.5 var(--hand)}
.flyleaf .sig{margin-top:22px;display:flex;align-items:center;gap:10px;font:400 20px/1 var(--hand);color:var(--ink-soft)}

/* ================= hints around the book ================= */
.dragnote{position:absolute;pointer-events:none;color:var(--desk-ink);font:500 13px/1.4 var(--mono);transition:opacity .4s;white-space:nowrap}
.dragnote svg{display:block}
.dragnote[hidden]{display:none}
.restart{display:block;margin:10px auto 0;appearance:none;border:0;background:transparent;color:var(--desk-ink);font:400 13px/1 var(--print);cursor:pointer;padding:8px 12px}
.restart:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
/* the owner's way into /admin/ — quiet, the admin has its own password */
.adminlink{position:relative;z-index:2;display:table;margin:10px auto 0;padding:6px 12px;border-radius:999px;color:var(--desk-ink);font:400 12px/1 var(--print);text-decoration:none;opacity:.55;transition:opacity .2s}
.adminlink:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.adminlink:focus-visible{opacity:1;outline:2px solid var(--red);outline-offset:2px}

/* ================= nav ================= */
.stage{z-index:1}
.nav,.hint,.restart{position:relative;z-index:2}
.nav{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px auto 0;flex-wrap:nowrap;max-width:100%}
#dots{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;min-width:0}
#dots::-webkit-scrollbar{display:none}
.nav .arrow{flex:none}
.nav button{white-space:nowrap;flex:none}
.nav button{appearance:none;border:1px solid transparent;background:transparent;color:var(--desk-ink);font:500 13px/1 var(--print);padding:8px 12px;border-radius:999px;cursor:pointer;font-variant-numeric:tabular-nums}
.loading{padding-block:30vh;text-align:center;color:var(--desk-ink);font:400 13px/1 var(--print)}

/* entry photos */
.jph{align-self:flex-end;margin:6px 10px 0 0;position:relative;background:#fff;padding:7px 7px 24px;box-shadow:0 2px 5px rgba(40,30,10,.22);transform:rotate(2.5deg);width:200px;flex:none}
.jph img{display:block;width:186px;height:140px;object-fit:cover;background:#e8e3d2}
.jph .cap{position:absolute;left:8px;right:8px;bottom:3px;font:400 13px/18px var(--hand);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jph .tape{left:64px;top:-9px;transform:rotate(-5deg)}



[hidden]{display:none!important}
#static{position:absolute;left:-99999px;top:0;width:530px}