@font-face { font-family: "DM Mono"; src: url(fonts/dm-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(fonts/dm-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --sq: 37.795px; /* a square of the mat: a centimetre at 100% (app.js SQ); sizes on the table are in it */
  --tab-h: calc(var(--sq) * 0.75); /* a page's head: its pin, its title and address printed (app.js NAME) */
  --side: 9px; /* a page's paper at its sides and foot (app.js PRINT) */
  --print: #fffefb; /* the paper a page is printed on */
  /* one light, warm surface: paper, a place to collect things from the web */
  color-scheme: light;
  --bg: #f4f0e8;
  --warm: 90, 78, 65; /* shadows, edges, threads' shade: warm grey-brown, never black */
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; /* what is printed: addresses, sources */
  --thread: #93352b; /* a link followed: a thread pin to pin, in its walk's colour (app.js LINES; this, the first) */
  --cotton: #a39276; /* a piece cut from a page: a linen thread back to it, lighter than the red */
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #8b8a86;
  --line: rgba(0, 0, 0, 0.07);
  --accent: #9a3a2c;
  --ink: rgba(50, 45, 40, 0.72);
  /* window shadows, lit from above: a hairline edge, a tight contact shadow,
     and a wide soft one falling below, like a macOS window over paper */
  --shadow:
    0 0 0 0.5px rgba(var(--warm), 0.1),
    0 1px 1px rgba(var(--warm), 0.04),
    0 2px 4px -1px rgba(var(--warm), 0.05),
    0 10px 22px -6px rgba(var(--warm), 0.1),
    0 30px 60px -18px rgba(var(--warm), 0.2);
  /* carried: held a little above the table, its shadow further below it */
  --carried:
    0 0 0 0.5px rgba(var(--warm), 0.1),
    0 4px 6px rgba(var(--warm), 0.06),
    0 24px 44px -10px rgba(var(--warm), 0.2),
    0 64px 110px -28px rgba(var(--warm), 0.34);
  /* a sheet lying flat on the board, lit from above: its edge, and the
     thinnest shadow where it touches; the one you picked, a firmer edge and
     raised a little off the board, its shadow softer and wider below it */
  --paper:
    0 0 0 0.5px rgba(var(--warm), 0.14),
    0 1px 1px rgba(var(--warm), 0.05),
    0 1px 3px rgba(var(--warm), 0.05);
  --paper-held:
    0 0 0 0.5px rgba(var(--warm), 0.14),
    0 6px 12px rgba(var(--warm), 0.1),
    0 36px 72px -20px rgba(var(--warm), 0.46);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#canvas {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  /* paper (app.js applyCamera): a fine grain that moves with what lies on it */
  --mx: 0px; --my: 0px; /* (till the view is first drawn) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-position: var(--mx) var(--my);
}
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
body.moving #world { will-change: transform; }
body.panning #canvas, body.space #canvas { cursor: grabbing; }
body.space #canvas { cursor: grab; }

/* While the canvas is being dragged, zoomed far out, or something is dropped,
   pages must not swallow the pointer. */
body.busy iframe, body.scrolling iframe, body.space iframe, body.dragging iframe, body.overview iframe { pointer-events: none !important; }
/* the page under the pointer takes it (a scroll over it scrolls it); a piece takes it once picked (app.js, scroll and pinch) */
.node:not(.selected, .page.under) iframe { pointer-events: none; }
body.busy, body.busy * { -webkit-user-select: none; user-select: none; }

/* ------------------------------------------------------------------ lines */

/* A link followed is a thread wound from pin to pin, a cut piece a lighter
   one back to its page (app.js renderEdges): over the board, under what's
   on it; its shade falls on the board below it. */
#edges { position: absolute; left: 0; top: 0; z-index: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#edges path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke 0.2s; }
#edges .line { stroke: var(--thread); stroke-width: 1.6; }
#edges .shade { stroke: rgba(var(--warm), 0.2); stroke-width: 2.4; translate: 2px 3px; }
#edges .clip .line { stroke: var(--cotton); stroke-width: 1.3; }
/* what's under the pointer: its threads drawn firmer, each in its own colour */
#edges .hot .line, #edges g:hover .line { stroke-width: 2.2; }
#edges .clip.hot .line, #edges .clip:hover .line { stroke: #8a7a5f; }
#edges .way { stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; } /* a thread is a way to its other end (app.js): easy to take, 14 px across */

/* ------------------------------------------------------------------ nodes */

/* things on the board are sheets: square-cornered, lying flat; lifted only while carried */
.node.unsure { visibility: hidden; } /* loading unseen until it says where it is (app.js settle) */
.node {
  position: absolute;
  isolation: isolate; /* (its tabs go under it, not under the table) */
  background: var(--card);
  box-shadow: var(--paper);
}
.node, #edges g { transition: box-shadow 0.2s, opacity 0.35s var(--ease); }
/* lifted while carried, settling back with a little give when put down;
   pages and clips only lift their shadow (scaling them would soften text) */
.node.lifted { box-shadow: var(--carried); transition: box-shadow 0.12s; }
.note, .image { transition: box-shadow 0.2s, opacity 0.35s var(--ease), transform 0.32s cubic-bezier(0.3, 1.45, 0.5, 1), rotate 0.32s cubic-bezier(0.3, 1.45, 0.5, 1); } /* (a note settles into its new turn) */
.note.lifted, .image.lifted { transform: scale(1.03) rotate(-0.6deg); transition: box-shadow 0.12s, transform 0.14s var(--ease); }
.node.selected:not(.page) { box-shadow: var(--paper-held); }



/* A page is a printout of a site: a sheet of paper with the site printed on
   it, one line printed at its head as a browser prints one, its title at the
   left and its address at the right; the head is where you hold it. One thing
   holds it to the board: its site's own icon, a pin through its head. What
   you do to it is a key (?), so it has no buttons. The sheet's shadow is drawn
   round head and sheet as one, each half cut at the seam so none falls
   between them. */
.page { box-shadow: none; background: var(--print); }
.page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: var(--paper); clip-path: inset(0 -200px -200px -200px); transition: box-shadow 0.2s; }
.page.lifted::before { box-shadow: var(--carried); transition: box-shadow 0.12s; }
.page .body { position: absolute; inset: 0 var(--side) var(--side); overflow: hidden; background: #fff; box-shadow: 0 0 0 0.5px rgba(var(--warm), 0.12); } /* the site, printed within the paper */
.page .body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; color-scheme: normal; }
.page .body iframe.still { pointer-events: none; } /* a touch wakes the page instead */
.page.loading .body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 28%;
  height: calc(2px / var(--z));
  background: var(--accent);
  animation: loading 1.1s var(--ease) infinite;
}
.page .arriving {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--muted);
  font-size: calc(14px / var(--z));
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.page .arriving span { position: relative; }
.page .arriving img { position: absolute; right: calc(100% + 8px / var(--z)); top: 50%; translate: 0 -50%; width: calc(18px / var(--z)); height: calc(18px / var(--z)); border-radius: 4px; }
.page.arrived .arriving { opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s 0.3s; }
@keyframes loading { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
.bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  min-height: var(--tab-h);
  padding: 4px 9px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  background: var(--print);
  box-shadow: var(--paper);
  clip-path: inset(-200px -200px 0 -200px);
  font: 10.5px/1.3 var(--mono);
  color: rgba(var(--warm), 0.82);
  white-space: nowrap;
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.lifted > .bar { box-shadow: var(--carried); }
/* the pin: the site's icon on a domed head in the page's colour, pushed into the board */
.pin {
  flex: none;
  position: relative;
  width: 17px;
  height: 17px;
  order: 1;
  translate: calc((var(--tab-at, 0.5) - 0.5) * var(--sq)) 0; /* pushed in at the middle of the head, by hand: a little either side (app.js tabAt, pinOf) */
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 46%), var(--tab, #e8e2d6);
  box-shadow: inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.26), 0 0 0 0.5px rgba(0, 0, 0, 0.28), 1.5px 2.5px 2px rgba(var(--warm), 0.4);
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), translate 0.3s var(--ease); /* (set down, pushed in at its new spot) */
}
.pin .fav { width: 11px; height: 11px; border-radius: 2px; }
/* carried: the pin is out, in your fingers, with the page; set down, it's pushed back in */
.lifted > .bar .pin { transform: translate(-3px, -12px); box-shadow: inset 0 -1.5px 2.5px rgba(0, 0, 0, 0.26), 0 0 0 0.5px rgba(0, 0, 0, 0.28), 6px 13px 7px rgba(var(--warm), 0.3); transition: transform 0.12s var(--ease), box-shadow 0.12s; }
/* the address is the page's name */
/* the title in the half left of the pin, the address in the half right of it: each ends in … if it can't fit (the whole address on hover) */
.bar .title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .address { order: 2; flex: 1 1 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(var(--warm), 0.62); }
.bar .address.chosen { color: #2b241c; -webkit-user-select: text; user-select: text; cursor: text; }
.bar .address.chosen::selection { background: rgba(var(--warm), 0.22); }
/* each level above the page being read is a place (the site, a folder): pointing at one lights it, as a path bar does; a click goes up to it */
body:not(.overview) .bar .address .up { cursor: pointer; transition: background-color 0.12s; }
body:not(.overview) .bar .address .up:hover { background: rgba(var(--warm), 0.12); }
/* zoomed out, a name is one line no wider than its page: the page itself, its icon standing for its site
   (a site's front page keeps the site's name; a page with no icon keeps it too, as site/…/page) */
body.overview .bar .address { flex-shrink: 0; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.overview .bar .address > :is(.between, wbr) { display: none; }
body.overview .page.has-icon .bar .address > .site { display: none; }
body.overview .page:not(.has-icon) .bar .address > .after-skip::before { content: '…/'; }
/* picked, it comes up off the board to work on, with a little give */
.node.selected { transition: box-shadow 0.4s cubic-bezier(0.3, 1.45, 0.5, 1), opacity 0.35s var(--ease); }

/* clips (elements lifted out of pages) and embeds are live too; they move by
   the small handle underneath, like the bar under a visionOS window */
.clip, .embed { background: var(--card); }
.clip iframe, .embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.embed iframe { background: #000; }
.grab {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 4;
  width: calc(56px / var(--z));
  height: calc(18px / var(--z));
  margin-left: calc(-28px / var(--z));
  cursor: grab;
}
.grab::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 45%;
  height: calc(5px / var(--z));
  background: var(--muted);
  opacity: 0.3;
  transition: opacity 0.15s, background 0.15s;
}
.node:hover .grab::after { opacity: 0.65; }
.grab:hover::after, body.busy .selected .grab::after { opacity: 1; background: var(--accent); }

/* washi: holds a piece down where you put it, in its page's colour, its source typed on it (app.js sourceChip) */
.chip {
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 5;
  height: 18px;
  max-width: calc(100% - 12px);
  padding: 0 11px;
  display: flex;
  align-items: center;
  border: 0;
  translate: -50% 0;
  rotate: var(--tilt, 0deg);
  background: color-mix(in srgb, var(--washi, #d9b877) 42%, #f7f0e1); /* washi is pale: a light tint of its page's colour, dark or light */
  opacity: 0.92;
  color: #4a4034;
  font: 9.5px/1 var(--mono);
  white-space: nowrap;
  clip-path: polygon(3% 0, 97% 0, 100% 22%, 97.5% 48%, 100% 74%, 97% 100%, 3% 100%, 0 76%, 2.5% 50%, 0 24%); /* torn ends */
  cursor: pointer;
  transition: opacity 0.15s;
}
.chip span { overflow: hidden; text-overflow: ellipsis; }
.chip:hover { opacity: 1; }

.image { background: none; cursor: grab; }
.image.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(127, 127, 127, 0.14) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.image > img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-select: none; user-select: none; }

/* A note is a small sheet of warm paper: thin, lying flat, lit from above.
   Quotes from pages are cards. */
.note { cursor: grab; }
.note { rotate: var(--tilt, 0deg); transform-origin: 50% 0; } /* stuck down by hand, never quite straight; by its top edge */
.note:not(.quote) {
  background: linear-gradient(180deg, #f8edc0 0, #fbf1c7 18%);
  border-radius: 1px 1px 2px 2px;
  box-shadow: 0 0 0 0.5px rgba(120, 95, 20, 0.18), 0 1px 1.5px rgba(80, 60, 10, 0.12);
}
/* on something (a page, a piece), a sticky note's bottom lifts off it: its shadow falls under that edge only */
.note.stuck:not(.quote) { box-shadow: 0 0 0 0.5px rgba(120, 95, 20, 0.18), 0 1px 1px rgba(80, 60, 10, 0.1), 0 11px 8px -8px rgba(80, 60, 10, 0.42); }
.note.selected:not(.quote) { box-shadow: 0 0 0 0.5px rgba(120, 95, 20, 0.25), 0 2px 3px rgba(80, 60, 10, 0.14), 0 12px 24px -8px rgba(80, 60, 10, 0.32); }
.note.quote { background: var(--card); }
.note.lifted:not(.quote) { box-shadow: 0 0 0 0.5px rgba(120, 95, 20, 0.2), 0 4px 6px rgba(80, 60, 10, 0.12), 0 22px 40px -10px rgba(80, 60, 10, 0.34); }
.note .text {
  padding: 12px 14px 14px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: #3a3220;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
  min-height: 1.5em;
}
.note .text:focus { cursor: text; }
/* an address written in a note is a door; solid when the place is already on the canvas */
.note .door { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
.note .door.here { text-decoration-style: solid; }
.note .text:not(:focus) .door { cursor: pointer; }
.note .text:not(:focus) .door:hover { text-decoration-color: currentColor; }
/* a note's first line can say what kind of note it is ("collect") */
.note.kind .text::first-line { font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size: 13px; font-variant-caps: all-small-caps; letter-spacing: 0.06em; color: color-mix(in srgb, currentColor 55%, transparent); }
.note.quote .text { font-size: 16px; border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); margin: 12px 0 12px 12px; padding: 0 16px 0 12px; }

/* resize from any edge or corner */
.rz { position: absolute; z-index: 3; --t: calc(8px / var(--z)); --o: calc(-4px / var(--z)); }
.rz-n, .rz-s { left: var(--t); right: var(--t); height: var(--t); cursor: ns-resize; }
.rz-n { top: var(--o); }
.rz-s { bottom: var(--o); }
.rz-e, .rz-w { top: var(--t); bottom: var(--t); width: var(--t); cursor: ew-resize; }
.rz-e { right: var(--o); }
.rz-w { left: var(--o); }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: calc(var(--t) * 1.75); height: calc(var(--t) * 1.75); }
.rz-nw { left: var(--o); top: var(--o); cursor: nwse-resize; }
.rz-se { right: var(--o); bottom: var(--o); cursor: nwse-resize; }
.rz-ne { right: var(--o); top: var(--o); cursor: nesw-resize; }
.rz-sw { left: var(--o); bottom: var(--o); cursor: nesw-resize; }
.grab { z-index: 4; }

/* -------------------------------------------------------------- chrome */

#bar { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); width: min(580px, calc(100vw - 32px)); z-index: 20; }
#bar.home { top: 40%; transform: translate(-50%, -50%); }
#bar[hidden] { display: none; }
#bar .box { background: var(--card); box-shadow: var(--shadow), 0 24px 60px -20px rgba(0, 0, 0, 0.18); padding: 6px; animation: rise 0.22s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
#bar input { all: unset; box-sizing: border-box; width: 100%; padding: 11px 12px; font-size: 16px; }
#bar input::placeholder { color: var(--muted); }
#bar .finds { display: flex; flex-direction: column; padding: 0 0 2px; }
#bar .finds:empty { display: none; }
#bar .finds.recent::before { content: "Recently here"; color: var(--muted); font-size: 12px; padding: 6px 12px 4px; }
#bar .find { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
#bar .find.chosen { background: rgba(127, 127, 127, 0.11); }
#bar .find .fav, #bar .find .glyph { width: 16px; height: 16px; flex: none; border-radius: 3px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
#bar .find .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bar .find .where { flex: none; color: var(--muted); font-size: 12px; max-width: 55%; overflow-wrap: anywhere; text-align: right; }
/* words found inside a page: a line under its name (past the icon and the gap), the words themselves in the name's colour */
#bar .find:has(.said) { flex-wrap: wrap; row-gap: 0; }
#bar .find .said { flex-basis: 100%; box-sizing: border-box; padding-left: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
#bar .find .said mark { background: none; color: var(--text); }
#bar .heads { display: none; flex-wrap: wrap; gap: 6px; padding: 2px 8px 9px; }
#bar.home .heads { display: flex; }
#bar .heads .lead { width: 100%; color: var(--muted); font-size: 12px; padding: 4px 2px 2px; }
#bar .heads button { border: 0; padding: 6px 11px; font-size: 12.5px; background: rgba(127, 127, 127, 0.11); cursor: pointer; }
#bar .heads button:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* the corner: a few words printed on the table, as the addresses are; no box */
#hud { position: fixed; right: 16px; bottom: 12px; display: flex; gap: 14px; z-index: 10; }
/* in groups, the most used nearest the corner: what you do with pages (cut, note, go), then sound, then the canvas as a whole, starting over furthest of all */
#hud #help { font-weight: 500; }
#hud button {
  padding: 2px 0;
  border: 0;
  background: none;
  color: rgba(var(--warm), 0.62);
  font: 11px var(--mono);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#hud button:hover { color: rgb(var(--warm)); }
#sound.off { text-decoration: line-through; text-decoration-thickness: 1px; } /* sounds off */
/* a tool picked up (the ✂, a note to place): lit until it is put down */
/* placing a note: wherever is pointed at takes it, pages too (the canvas, not the page, gets the click) */
body.placing-note, body.placing-note * { cursor: copy !important; }
body.placing-note .node iframe { pointer-events: none; }


#toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 8px);
  padding: 7px 12px;
  background: var(--card);
  box-shadow: var(--paper-held), 0 4px 14px rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-size: 12.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s var(--ease);
  z-index: 30;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { margin-left: 10px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}




/* Without the add-on: what this is, and how to add it (see needAddon in app.js) */
body.addon #world, body.addon #hud, body.addon #bar { display: none; } /* the mat stays: the sheet lies on it */
#addon { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; overflow: auto; }
#addon[hidden] { display: none; }
#addon .card { width: min(calc(var(--sq) * 11), 100%); box-sizing: border-box; padding: calc(var(--sq) * 0.75); background: var(--card); box-shadow: var(--paper); font-size: 14px; line-height: 1.5; } /* a sheet lying on the mat, as a page does */
#addon h1 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
#addon p { margin: 0 0 10px; }
#addon .need, #addon .then, #addon .source { color: var(--muted); }
#addon .source { margin: 14px 0 0; }
#addon .source a { color: inherit; }
#addon .newer, #addon.older .need { display: none; }
#addon.older .newer { display: block; }
#addon .elsewhere, #addon.other :is(.need, .download, ol, .then) { display: none; } /* not a chromium browser: the add-on can't be added here */
#addon.other .elsewhere { display: block; }
#addon .download { display: inline-block; margin: 6px 0 4px; padding: 8px 16px; background: var(--text); color: var(--card); font-weight: 500; text-decoration: none; } /* in ink, as the rest of the table */
#addon .download:hover { background: #000; }
#addon ol { margin: 14px 0 12px; padding-left: 22px; }
#addon li { margin: 0 0 6px; padding-left: 2px; }
#addon li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
#addon code { font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 6px; background: rgba(127, 127, 127, 0.11); user-select: all; }
#addon .copy { margin-left: 4px; padding: 2px 9px; border: 0; background: rgba(127, 127, 127, 0.11); font-size: 12px; cursor: pointer; }
#addon .copy:hover { background: rgba(127, 127, 127, 0.18); }

/* the keys (?): a sheet laid just above the tools, at their right edge */
#keys { position: fixed; right: 14px; bottom: 52px; z-index: 30; display: grid; grid-template-columns: auto auto; gap: 6px 18px; margin: 0; padding: 18px 22px; background: var(--card); box-shadow: var(--shadow), 0 24px 60px -20px rgba(0, 0, 0, 0.18); font-size: 13px; line-height: 1.4; }
#keys[hidden] { display: none; }
#keys dt { font-weight: 600; white-space: pre; text-align: right; }
#keys dd { margin: 0; color: var(--muted); }


/* a ghost: a page pulled off its pin from the middle of a trail; the pin stays, and a scrap of its margin, its address printed on it (app.js ghosts) */
.node.ghost { background: none; box-shadow: none; cursor: pointer; display: flex; align-items: center; }
.ghost .pin { position: absolute; left: calc(var(--sq) * 0.4 - 8.5px); top: 50%; margin-top: -8.5px; z-index: 1; }
.ghost .scrap {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 12px 0 calc(var(--sq) * 0.4 + 14px);
  background: var(--print);
  color: rgba(var(--warm), 0.8);
  font: 10.5px var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  rotate: var(--tear, 0deg);
  transform-origin: calc(var(--sq) * 0.4) 50%;
  clip-path: polygon(0 10%, 9% 0, 18% 14%, 29% 3%, 41% 12%, 54% 0, 66% 13%, 78% 2%, 90% 11%, 100% 4%, 97% 34%, 100% 62%, 96% 100%, 84% 88%, 71% 100%, 59% 89%, 46% 99%, 33% 88%, 20% 98%, 8% 90%, 0 96%, 3% 52%);
  filter: drop-shadow(0 0.5px 0.5px rgba(var(--warm), 0.3));
}
.ghost:hover .scrap { filter: drop-shadow(0 0.5px 0.5px rgba(var(--warm), 0.3)) brightness(1.03); }