/* ------------------------------------------------------------------
   The four uploaded faces.

   Every one of them is Latin-only — I checked the character maps: 371,
   585, 202 and 187 glyphs, none with a usable CJK range. So they cannot
   set Chinese, and the unicode-range below says so explicitly rather
   than leaving the browser to discover it: Latin and punctuation come
   from the chosen face, everything else falls straight through to the
   pixel monospace stack without the font even being consulted.

   Licences as shipped: Bitrimus is CC0 / public domain; PIXY is CC BY 3.0
   (2DFUNS Studio — attribution required if you publish). Orange Kid and
   SaH1Outline arrived with no licence file; worth confirming their terms
   before the site goes public.
------------------------------------------------------------------- */
@font-face{
  font-family:'Bitrimus'; src:url('../fonts/Bitrimus.ttf') format('truetype');
  font-display:swap;
  unicode-range:U+0000-024F, U+2000-206F, U+2190-21FF, U+2600-26FF;
}
@font-face{
  font-family:'Orange Kid'; src:url('../fonts/OrangeKid.otf') format('opentype');
  font-display:swap;
  unicode-range:U+0000-024F, U+2000-206F, U+2190-21FF, U+2600-26FF;
}
@font-face{
  font-family:'PIXY'; src:url('../fonts/PIXY.otf') format('opentype');
  font-display:swap;
  unicode-range:U+0000-024F, U+2000-206F, U+2190-21FF, U+2600-26FF;
}
@font-face{
  font-family:'SaH1Outline'; src:url('../fonts/SaH1Outline.ttf') format('truetype');
  font-display:swap;
  unicode-range:U+0000-024F, U+2000-206F, U+2190-21FF, U+2600-26FF;
}
@font-face{
  font-family:'Pixeloid Sans'; src:url('../fonts/PixeloidSans.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* ------------------------------------------------------------------
   mobile.css — the phone build's own shell.

   Separate from the desktop build on purpose: the constraint here is a
   fixed viewport with no scrolling on the home page, and a layout that
   assumes one thumb. Anything shared with the artwork itself lives in
   piece.css and is untouched by this.
------------------------------------------------------------------- */
:root{
  --accent:#f0a933;
  /* Where the visible viewport starts, relative to the layout viewport.
     Non-zero when the page is pinch-zoomed or a keyboard has pushed
     things around; kept up to date from visualViewport in prefs.js.
     env(safe-area-inset-top) covers notches; this covers the rest.

     --ui-top is the part nothing on the web can measure: an app that
     draws its own toolbar over a full-screen WebView is invisible to
     the page inside it. There is no API for it, so it is a setting. */
  --vv-top: 0px;
  --ui-top: 0px;
  --bg:#0f2830;
  --ink:#dfe9ea;
  --size:16px;
  --rain:#ffffff;
  --scatter:#ffffff;
  --rain-size:13px;
  --dim:color-mix(in srgb, var(--ink) 55%, transparent);
  --rule:color-mix(in srgb, var(--ink) 22%, transparent);
  --font-head:var(--pixel);
  --font-info:var(--pixel);
  --pixel: ui-monospace, "SFMono-Regular", Menlo, Consolas,
           "Noto Sans Mono CJK TC", "Sarasa Mono TC", monospace;
}
*{ margin:0; padding:0; box-sizing:border-box }
html,body{ height:100%; }
body{
  background:var(--page, var(--bg)); color:var(--ink);
  font-family:var(--pixel);
  -webkit-font-smoothing:none; font-smooth:never;   /* keep type crisp beside pixel art */
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
/* the home page does not scroll; the reading pages do, and say so */
body.fixed{ overflow:hidden; position:fixed; inset:0; width:100%; }
body.scrolls{ overflow-y:auto; -webkit-overflow-scrolling:touch }

a{ color:inherit; text-decoration:none }

/* ---------- home ---------- */
#stage{ position:fixed; inset:0; z-index:0 }


/* scattered, still, horizontal — the other home variant */
.scatter-layer{
  position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.scatter-item{
  position:absolute; top:0; left:0;
  transform-origin:left top;
  white-space:nowrap;
  pointer-events:auto;
  color:var(--scatter);
  letter-spacing:.04em;
  opacity:0;
  transition:opacity 1.1s ease;   /* duration replaced inline from settings */
  will-change:opacity;
}
.scatter-item:active{ color:var(--accent) }

/* the strips of free space either side, where titles fall */
.rain-layer{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  overflow:hidden;
}
/* one column of characters reading downward. upright keeps CJK glyphs
   the right way up instead of rotating them onto their side, and keeps
   any latin in a title upright with them. */
.rain-item{
  position:absolute; top:0; left:0;
  writing-mode:vertical-rl;
  text-orientation:upright;
  letter-spacing:.10em;
  transform-origin:50% 0;
  white-space:nowrap;
  pointer-events:auto;                 /* clickable for its whole fall */
  color:var(--rain);
  padding:4px 3px; margin:-4px -3px;   /* a bigger touch target than it looks */
  will-change:transform,opacity;
}
.rain-item:active{ color:var(--accent) }

.hint{ font-family:var(--font-info);
  position:fixed; z-index:3; left:0; right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px);
  text-align:center; font-size:10.5px; letter-spacing:.14em;
  color:var(--dim); pointer-events:none;
}

/* ---------- the mouse's door, bottom corner of every page ---------- */
/* in the navigation bar, top right: the one place on a scrolling page
   that is always on screen, and far enough from the back link on the
   left that neither is a mis-tap for the other */
/* the canvas is the whole viewport so the pellet can fly and the door
   can be dragged; it sits above the words so the door is always visible,
   and lets their taps through because it never receives any itself */
.burrow-host{ position:fixed; inset:0; z-index:7; pointer-events:none }
.burrow-canvas{
  display:block; width:100%; height:100%;
  image-rendering:pixelated; image-rendering:crisp-edges;
  pointer-events:none;
}
/* a divider between the two links, once they sit side by side */
.backbar .sep{
  width:1px; align-self:stretch; margin:2px 4px;
  background:var(--rule);
}

/* ---------- the options the mouse hands over ---------- */
/* the little square the mouse throws out. Everything else hangs off it:
   it is what you drag, what you tap to open the panel, and what the
   panel collapses back to — so closing the panel is never a dead end. */
.dock{
  position:fixed; z-index:6; left:auto; top:auto;
  right:calc(env(safe-area-inset-right,0px) + 10px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  width:38px; height:38px; padding:0;
  font:inherit; font-size:16px; line-height:1; cursor:grab;
  color:var(--ink); background:var(--uibg, color-mix(in srgb, var(--bg) 88%, #000));
  border:1px solid var(--rule); touch-action:none;
}
.dock.gone{ display:none }
.dock.arrive{ animation:dockIn .28s ease-out }
@keyframes dockIn{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

.prefs{
  position:fixed; z-index:5; left:0; top:0;
  width:min(268px, calc(100vw - 24px));
  /* it is placed above the dock by JS and told how tall it may get —
     without a ceiling a long list ran off the top of the screen and
     everything above the last section became unreachable */
  max-height:min(62vh, 460px);
  display:none; flex-direction:column;
  background:var(--uibg, color-mix(in srgb, var(--bg) 92%, #000));
  border:1px solid var(--rule);
}
.prefs.open{ display:flex; animation:prefsIn .16s ease-out }
@keyframes prefsIn{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } }
.prefs-hd{
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
  padding:8px 10px; border-bottom:1px solid var(--rule);
}
.prefs-hd .pf-title{ flex:1; text-align:center; font-size:11px; letter-spacing:.22em }
.prefs-hd button{
  font:inherit; font-size:15px; line-height:1; color:inherit;
  background:none; border:0; padding:2px 6px; cursor:pointer; opacity:.7;
}
.prefs-hd .pf-back{ visibility:hidden }
.prefs-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 12px 12px }
.prefs-lv{ display:none }
.prefs-lv.on{ display:block }
.prefs-nav{ display:flex; flex-direction:column }
.prefs-nav .lv-go{
  font:inherit; font-size:13px; text-align:left; color:inherit;
  background:none; border:0; border-bottom:1px dotted var(--rule);
  padding:12px 2px; cursor:pointer; display:block; width:100%;
}
.prefs-nav .lv-go:last-child{ border-bottom:0 }
.prefs-nav .lv-go[aria-current="page"]{ color:var(--accent) }
.prefs-nav .lv-go[aria-current="page"]::after{ content:' ·'; opacity:.7 }
.prefs-note{ font-size:10.5px; color:var(--dim); padding-top:10px; line-height:1.6 }
.prefs .seg.wrap{ flex-wrap:wrap }
.prefs .seg.wrap button{ flex:1 1 30%; min-width:0 }
.prefs .seg{ display:flex; flex:1; gap:4px }
.prefs .seg button{
  flex:1; font:inherit; font-size:11px; color:inherit; cursor:pointer;
  background:none; border:1px solid var(--rule); padding:5px 0;
}
.prefs .seg button[aria-pressed="true"]{ background:var(--rule) }
.admin-password{
  display:flex; align-items:center; gap:10px; padding:8px 0;
  color:var(--dim); font-size:11px; letter-spacing:.12em;
}
.admin-password span{ flex:0 0 3em }
.admin-password input{
  min-width:0; flex:1; height:34px; padding:5px 8px;
  color:var(--ink); background:color-mix(in srgb, var(--ink) 7%, transparent);
  border:1px solid var(--rule); border-radius:0; font:inherit;
}
.bar{
  position:relative; flex:1; height:26px; touch-action:none;
  border:1px solid var(--rule);
}
.bar .fill{ position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--ink) 22%, transparent) }
.bar .h{
  position:absolute; top:-3px; width:12px; height:30px; margin-left:-6px;
  background:var(--bg); border:1px solid var(--ink); cursor:ew-resize;
}
.bar .h::after{ content:""; position:absolute; inset:10px 4px; background:var(--ink) }
.prefs-sec2{
  font-size:10px; letter-spacing:.18em; color:var(--dim);
  padding:10px 0 2px;
}
.dual{
  position:relative; flex:1; height:26px; touch-action:none;
}
.dual-track{
  position:absolute; left:0; right:0; top:11px; height:3px;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
}
.dual-span{
  position:absolute; top:11px; height:3px;
  background:var(--ink); opacity:.8;
}
.dual-h{
  position:absolute; top:5px; width:15px; height:15px; margin-left:-7px;
  padding:0; cursor:grab; touch-action:none;
  background:var(--bg); border:2px solid var(--ink);
}
.dual-h:active{ cursor:grabbing }
.dual-lab{
  position:absolute; right:0; top:-2px;
  font-size:9.5px; color:var(--dim);
}
/* A colour row. The markup came across from the studio but its styling
   did not — the studio keeps these rules in its own stylesheet, which
   the phone never loads. Unstyled, the button had no size and no swatch:
   there was literally nothing on screen to press. */
.cbtn{
  flex:1; display:flex; align-items:center; gap:10px;
  min-height:34px; padding:6px 8px;
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  border:1px solid var(--rule); cursor:pointer;
}
.cbtn .sw{
  width:22px; height:22px; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.4);
}
.cbtn .hex{
  font-style:normal; font-size:10.5px; letter-spacing:.08em; color:var(--dim);
}
.cbtn::after{ content:'›'; margin-left:auto; opacity:.5 }

/* the 256 picker: two strips of sixteen */
.pickwrap{ padding:6px 0 2px }
.pickwrap .lbl{ font-size:10px; letter-spacing:.2em; color:var(--dim); padding:6px 0 4px }
.pickwrap .strip{ display:grid; grid-template-columns:repeat(16,1fr); gap:2px }
.pickwrap .chip{
  aspect-ratio:1; width:100%; border:0; padding:0; cursor:pointer;
  outline:1px solid rgba(0,0,0,.25); outline-offset:-1px;
}
.pickwrap .chip[aria-pressed="true"]{ outline:2px solid var(--ink); outline-offset:0 }
.prefs .wide{
  flex:1; text-align:center; font-size:12px; padding:10px 8px;
  border:1px solid var(--rule);
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
.prefs .wide:disabled{ opacity:.4 }
.prefs-sec{
  font-size:10.5px; letter-spacing:.24em; color:var(--dim);
  border-top:1px solid var(--rule); margin-top:9px; padding-top:9px;
}
.prefs-row{ display:flex; align-items:center; gap:10px; padding:5px 0 }
.prefs-row > span{ font-size:11px; letter-spacing:.14em; width:3em; color:var(--dim) }
.prefs-row > i{ font-style:normal; font-size:10px; color:var(--dim);
                min-width:4.2em; text-align:right }
.prefs-nav .lv-go{
  font:inherit; font-size:13px; text-align:left; color:inherit;
  background:none; border:0; border-bottom:1px dotted var(--rule);
  padding:12px 2px; cursor:pointer; display:block; width:100%;
}
.prefs-nav .lv-go:last-child{ border-bottom:0 }
.prefs-nav .lv-go[aria-current="page"]{ color:var(--accent) }
.prefs-nav .lv-go[aria-current="page"]::after{ content:' ·'; opacity:.7 }
.prefs-note{ font-size:10.5px; color:var(--dim); padding-top:10px; line-height:1.6 }
.prefs .seg.wrap{ flex-wrap:wrap }
.prefs .seg.wrap button{ flex:1 1 30%; min-width:0 }
.prefs .seg{ display:flex; flex:1; gap:4px }
.prefs .seg button{
  flex:1; font:inherit; font-size:11px; color:inherit; cursor:pointer;
  background:none; border:1px solid var(--rule); padding:5px 0;
}
.prefs .seg button[aria-pressed="true"]{ background:var(--rule) }
.bar{
  position:relative; flex:1; height:26px; touch-action:none;
  border:1px solid var(--rule);
}
.bar .fill{ position:absolute; top:0; bottom:0; background:color-mix(in srgb, var(--ink) 22%, transparent) }
.bar .h{
  position:absolute; top:-3px; width:12px; height:30px; margin-left:-6px;
  background:var(--bg); border:1px solid var(--ink); cursor:ew-resize;
}
.bar .h::after{ content:""; position:absolute; inset:10px 4px; background:var(--ink) }
.prefs-sec2{
  font-size:10px; letter-spacing:.18em; color:var(--dim);
  padding:10px 0 2px;
}
.dual{
  position:relative; flex:1; height:26px; touch-action:none;
}
.dual-track{
  position:absolute; left:0; right:0; top:11px; height:3px;
  background:color-mix(in srgb, var(--ink) 18%, transparent);
}
.dual-span{
  position:absolute; top:11px; height:3px;
  background:var(--ink); opacity:.8;
}
.dual-h{
  position:absolute; top:5px; width:15px; height:15px; margin-left:-7px;
  padding:0; cursor:grab; touch-action:none;
  background:var(--bg); border:2px solid var(--ink);
}
.dual-h:active{ cursor:grabbing }
.dual-lab{
  position:absolute; right:0; top:-2px;
  font-size:9.5px; color:var(--dim);
}

.cbtn .sw{
  width:22px; height:22px; flex:0 0 auto;
  border:1px solid rgba(0,0,0,.4);
}
.cbtn .hex{
  font-style:normal; font-size:10.5px; letter-spacing:.08em; color:var(--dim);
}
.cbtn::after{ content:'›'; margin-left:auto; opacity:.5 }





.pickwrap .chip[aria-pressed="true"]{ outline:2px solid var(--ink); outline-offset:0 }

.prefs .sw{ display:flex; gap:5px; flex:1 }
.prefs .sw button{
  width:22px; height:22px; border:1px solid var(--rule); cursor:pointer;
}
.prefs .sw button[aria-pressed="true"]{ outline:2px solid var(--ink); outline-offset:1px }
.prefs input[type=range]{ flex:1; accent-color:var(--ink) }
.prefs .seg.wrap{ flex-wrap:wrap }
.prefs .seg.wrap button{ flex:1 1 30%; min-width:0 }
.prefs .seg{ display:flex; gap:6px; flex:1 }
.prefs .seg button{
  flex:1; font:inherit; font-size:11px; padding:4px 0; cursor:pointer;
  color:var(--ink); background:transparent; border:1px solid var(--rule);
}
.prefs .seg button[aria-pressed="true"]{ background:var(--rule) }

/* ---------- contents ---------- */
.sheet{
  position:relative; z-index:1;
  min-height:100%;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 20px
          calc(env(safe-area-inset-bottom,0px) + 110px);
  max-width:34rem; margin:0 auto;
}
.sheet h2{ font-family:var(--font-head);
  font-size:12px; letter-spacing:.28em; font-weight:400;
  color:var(--dim); padding-bottom:4px;
}
.sheet .rule{ height:1px; background:var(--rule); margin:10px 0 18px }

.toc{ list-style:none }
.toc li{ padding:0 }
.toc li.row{ display:block }
.catalog-row{
  position:relative; display:flex; align-items:center; min-width:0;
  border-bottom:1px dotted var(--rule);
}
.toc li.row .leaf{ flex:1; min-width:0 }
.pin-btn{
  font:inherit; font-size:15px; line-height:1; color:var(--dim);
  background:none; border:0; padding:8px 4px; cursor:pointer;
}
.toc li.pinned .pin-btn{ color:var(--accent) }
.toc li.pinned .leaf .t{ color:var(--accent) }
/* the pinned section at the top of the contents reads the same way */
#pinnedList .leaf .t, #pinnedList .pin-btn{ color:var(--accent) }
.toc .leaf{
  display:block; min-width:0; padding:11px 0; border-bottom:0;
  font-size:var(--size); white-space:nowrap; overflow:hidden;
}
.toc .leaf .t{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.toc .leaf:active{ color:var(--accent) }

.toc details{ border-bottom:1px dotted var(--rule) }
.toc details > summary{
  list-style:none; cursor:pointer; padding:0;
  font-size:var(--size); display:flex; align-items:center; gap:8px;
}
.toc details > summary::-webkit-details-marker{ display:none }
.toc details > summary .arm{ font-size:11px; color:var(--dim); width:1em }
.toc details > summary .folder-title{
  min-width:0; flex:1; padding:11px 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toc details[open] > summary .arm{ transform:rotate(90deg) }
.toc details > summary .arm{ display:inline-block; transition:transform .15s }
.toc details .toc{ padding-left:16px; border-left:1px solid var(--rule); margin-left:4px }
.toc details .leaf:last-child{ border-bottom:none }

.item-actions{
  flex:0 0 auto; display:flex; align-items:center; gap:3px;
  padding-left:5px; background:var(--page, var(--bg));
}
.item-actions button{
  width:30px; min-height:38px; padding:0; border:0;
  color:var(--dim); background:none; font:inherit; cursor:pointer;
}
.item-actions .delete-btn{ font-size:18px }
.item-actions .drag-handle{
  font-size:14px; touch-action:none; cursor:grab;
}
.item-actions .drag-handle:active{ cursor:grabbing; color:var(--accent) }
.catalog-row.drop-before::before,
.catalog-row.drop-after::after{
  content:''; position:absolute; z-index:2; left:0; right:0; height:2px;
  background:var(--accent);
}
.catalog-row.drop-before::before{ top:-1px }
.catalog-row.drop-after::after{ bottom:-1px }
.catalog-row.drop-inside{ outline:1px solid var(--accent); outline-offset:-2px }
.root-drop{
  position:fixed; z-index:40; left:20px; right:20px;
  bottom:calc(env(safe-area-inset-bottom,0px) + 76px);
  max-width:32rem; margin:0 auto; padding:12px; text-align:center;
  color:var(--dim); background:var(--uibg, var(--bg));
  border:1px dashed var(--rule); font-size:11px;
}
.root-drop[hidden]{ display:none }
.root-drop.over{ color:var(--accent); border-color:var(--accent) }
.drag-ghost{
  position:fixed; z-index:50; max-width:70vw; padding:7px 10px;
  color:var(--ink); background:var(--uibg, var(--bg)); border:1px solid var(--accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; font-size:12px;
}
body.catalog-dragging{ user-select:none }

.note{ font-family:var(--font-info); font-size:11px; color:var(--dim); padding-top:16px; line-height:1.6 }
.note.error{ color:var(--accent) }

.admin-nav{ margin-left:auto; display:flex; align-items:center; gap:7px }
.admin-nav[hidden]{ display:none }
.admin-nav button{
  color:var(--ink); background:transparent; border:1px solid var(--rule);
  padding:6px 7px; font:inherit; font-size:10px; letter-spacing:.06em;
}
.admin-nav button:disabled{ opacity:.45 }

.admin-dialog{
  width:min(310px, calc(100vw - 32px)); margin:auto; padding:16px;
  color:var(--ink); background:var(--bg); border:1px solid var(--rule);
  font:inherit;
}
.admin-dialog::backdrop{ background:rgba(0,0,0,.55) }
.admin-dialog h3{ font-size:15px; padding-bottom:10px }
.admin-dialog p{ color:var(--dim); font-size:12px; line-height:1.6; padding-bottom:14px }
.dialog-actions{ display:flex; flex-direction:column; gap:7px }
.dialog-actions button{
  padding:9px; color:var(--ink); background:transparent;
  border:1px solid var(--rule); font:inherit;
}
.dialog-actions button.danger{ color:var(--accent) }

/* ---------- the reader ---------- */
.page{
  position:relative; z-index:1;
  max-width:34rem; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 22px
          calc(env(safe-area-inset-bottom,0px) + 120px);
}
.page h1{
  font-size:calc(var(--size) * 1.35); font-weight:700;
  line-height:1.35; padding-bottom:6px;
}
.page .meta{ font-size:11px; color:var(--dim); letter-spacing:.12em; padding-bottom:16px }
.page .body{
  font-size:var(--size); line-height:1.95;
  white-space:pre-wrap; word-break:break-word;
}
.page .body p{ padding-bottom:1.1em }

.article-editor{ display:flex; flex-direction:column; gap:8px }
.article-editor[hidden]{ display:none }
.article-editor label{
  color:var(--dim); font-family:var(--font-info); font-size:11px;
  letter-spacing:.14em; padding-top:4px;
}
.article-editor input,
.article-editor textarea{
  width:100%; color:var(--ink); background:color-mix(in srgb, var(--ink) 5%, transparent);
  border:1px solid var(--rule); border-radius:0; font:inherit;
}
.article-editor input{ padding:10px; font-size:calc(var(--size) * 1.15) }
.article-editor textarea{
  min-height:56vh; resize:vertical; padding:12px;
  font-size:var(--size); line-height:1.8; white-space:pre-wrap;
}
.editor-actions{ display:flex; gap:8px; padding-top:4px }
.editor-actions button{
  flex:1; padding:10px; color:var(--ink); background:transparent;
  border:1px solid var(--rule); font:inherit;
}
.editor-actions button:disabled{ opacity:.45 }

.backbar{
  position:fixed; z-index:6; top:0; left:0; right:0;
  min-height:68px;
  /* --vv-top is deliberately NOT in here. visualViewport.offsetTop moves
     during iOS elastic overscroll, so feeding it into the bar's padding
     made the bar visibly grow and shrink as the page bounced. It is for
     repositioning fixed chrome under pinch-zoom, not for reserving
     space. */
  padding:calc(env(safe-area-inset-top,0px) + var(--ui-top) + 14px) 0 14px;
  /* the bar spans the screen; its contents sit on the same column as the
     page body, so the links line up with the text they belong to instead
     of floating at the screen edge */
  display:grid;
  grid-template-columns:1fr;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(3px);
  border-bottom:1px solid var(--rule);
  font-size:11px; letter-spacing:.16em;
}
.backbar > *{ grid-row:1 }
.backbar .row{
  display:flex; align-items:center; gap:14px;
  width:100%; max-width:34rem; margin:0 auto;
  padding-inline:20px 64px;   /* room at the end for the door */
}
.backbar a{ font-family:var(--font-head); color:var(--dim); padding:6px 2px }
.backbar a:active{ color:var(--ink) }
.backbar a:active{ color:var(--ink) }
/* The bar's height is not knowable in CSS: it is min-height, plus the
   safe-area inset, plus whatever the text wraps to. Every time it was
   written out as a number here it eventually disagreed with the bar —
   and when the bar wins, the first line of the page sits underneath it,
   which is why it took an overscroll to see and sprang back. --bar-h is
   measured from the bar itself; the number is only the value used until
   the measurement lands. */
body.scrolls .sheet, body.scrolls .page{
  padding-top:calc(var(--bar-h, 108px) + 26px);
}
/* anchors and focus land below the bar too */
html{ scroll-padding-top:calc(var(--bar-h, 108px) + 12px) }


/* ------------------------------------------------------------------
   Wide windows.

   The piece is a tall composition. In a landscape window, fitting its
   height is what decides the scale, so it ends up occupying about six
   percent of the width and looks stranded. Letterboxing it into a
   centred column keeps the proportions it was drawn at and hands the
   rest of the room to the falling titles, which is what that space is
   for. The effects size themselves from the viewport, not from this
   column, so they use the whole width — see roomFactor in rain.js.

   The reading pages get a slightly wider measure and larger type. Not
   much wider: a line of Chinese text past about forty characters is
   harder to come back from at the line break, so the extra room goes
   into margin rather than into line length.
------------------------------------------------------------------- */
@media (min-width: 720px){
  .pm-stage, #stage{
    inset-inline: 50% auto;
    transform: translateX(-50%);
    width: min(560px, 46vw);
  }
  .rain-layer, .scatter-layer, .titles{ inset: 0 }

  body.scrolls .sheet, body.scrolls .page{
    max-width: 40rem;
    font-size: 1.02em;
  }
  .backbar .row{ max-width: 40rem; padding-inline: 24px 72px }
  .backbar{ min-height: 74px }

  .prefs{ width: 320px; max-height: min(70vh, 560px) }
  .dock{ width: 42px; height: 42px }
}

@media (min-width: 1200px){
  .pm-stage, #stage{ width: min(620px, 38vw) }
  body.scrolls .sheet, body.scrolls .page{ max-width: 42rem; font-size: 1.06em }
  .backbar .row{ max-width: 42rem }
}