Something went wrong. Try again.
vibescrobble! every agent, live on stage. vibescrobble.com
atproto agent llm did
Something went wrong. Try again.
26 kB · 635 lines
CSS
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636/* The graph: the swarm laid out on the zine's page. The plate itself — its palette, chrome and readings — is plate.css, which /lanes shares. */
html, body { height: 100%; overflow: hidden;}
/* The ground is CSS so the canvas can clear to transparent and the compositor lays the vignette for free. */#stage { position: fixed; inset: 0; display: block; cursor: grab; background: url(grain.png), var(--ground); background-blend-mode: multiply;}#stage.dragging { cursor: grabbing; }#stage:focus-visible { outline: none; }
/* ---- top bar ---- */
/* One row at every width: the wordmark, the lanes, find and the lamp. Nothing in it wraps; everything else hangs under it on a tab. */.bar { flex-wrap: wrap; }.bar > :not(.demo-note) { flex: none; white-space: nowrap; }
/* The tabs: binder dividers hanging from the bar's checker strip at its right end, each in its own riso tint, each opening a card. Open, a tab drops a little longer; kept to something, it is pink Ben-Day, and what it is kept to is ringed in pen. */.tabs { position: absolute; top: calc(100% + 14px); right: 18px; z-index: 4; display: flex; align-items: flex-start; gap: 6px;}[data-tab="models"] { --tint: var(--sun); }[data-tab="work"] { --tint: #a8f0d0; }[data-tab="controls"] { --tint: #c4dcff; }.tab-pair { display: inline-flex; align-items: flex-start; gap: 3px; }.tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 6px; font: 400 13px/1.1 var(--mod); letter-spacing: 0.05em; color: var(--ink); background: url(grain.png), var(--tint); border: 2.5px solid var(--comic); border-top: 0; border-radius: 0 0 9px 9px; box-shadow: 3px 3px 0 var(--comic); transition: padding-bottom 0.15s ease-out;}.tab:hover, .tab[aria-expanded="true"] { color: var(--ink); border-color: var(--comic); }.tab:hover { padding-bottom: 9px; }.tab[aria-expanded="true"] { padding-bottom: 12px; }.tab:focus-visible, .tab-clear:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }.tab-value { display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }.tab-value:empty { display: none; }.tab-value .logo { font-size: 12px; color: var(--ink); }.tab-value b { padding: 0 5px; font: 700 12px/1.3 var(--text); background: var(--bubble); border: 1.5px solid var(--comic); border-radius: 999px; }.tab-pair.kept .tab { background: var(--benday-pink), var(--pink); }/* Ringed in pen: a loop a little out of round, the way a hand draws one. */.tab-pair.kept .tab-value { padding: 0 7px; font: 700 12px/1.4 var(--text); background: var(--bubble); border: 2px solid var(--z-pen); border-radius: 52% 46% 55% 42% / 60% 50% 56% 48%;}.tab-kept { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }/* Letting go: a round paper button beside the kept tab. */.tab-clear { margin-top: 4px; width: 22px; height: 22px; padding: 0; font: 700 14px/1 var(--text); color: var(--ink); background: var(--bubble); border: 2px solid var(--comic); border-radius: 50%; box-shadow: 2px 2px 0 var(--comic);}.tab-clear:hover { color: var(--ink); background: var(--sun); border-color: var(--comic); }.tab-clear[hidden] { display: none; }
/* A tab's card: a comic card (cards.css) hung under the tabs at the bar's right end, a strip of its tab's tint along its top. It follows its tab in the page, so the keyboard reaches it next. */.tab-card { position: absolute; top: calc(100% + 12px); right: -4px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: max-content; max-width: calc(100vw - 28px); white-space: normal; transform: rotate(0.6deg);}.tab-card.comic-card::before { background: url(grain.png), var(--tint); }#models-card, #work-card { width: min(360px, calc(100vw - 28px)); align-items: stretch; gap: 8px; }.tab-card-title { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 400 15px/1.1 var(--mod); letter-spacing: 0.05em; text-transform: uppercase; }.tab-card-title .muted { margin-left: auto; font: 12px var(--text); text-transform: none; color: var(--ink-dim); }.tab-empty { display: none; margin: 0; color: var(--ink-dim); }.model-counts[hidden] + .tab-empty, .clusters:empty + .tab-empty { display: block; }.controls-row { display: flex; flex-wrap: wrap; gap: 8px; }/* The drawer's buttons are paper tabs; a switch that is on is a strip of washi tape stuck down over its word, each in its own tint and lean. */.controls button { padding: 3px 10px; font: 600 12px/1.3 var(--text); color: var(--ink); background: var(--bubble); border: 2px dashed var(--rule); border-radius: 6px 6px 2px 2px;}.controls button:hover { color: var(--ink); border-color: var(--comic); }.controls button.on { color: var(--ink); background: url(grain.png), var(--tape, rgba(255, 72, 176, 0.55)); border: 2px solid transparent; border-radius: 1px; rotate: var(--lean, -1.5deg); box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.25); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='22'%3E%3Cpath d='M5 0H2l1 3-2 3 2 4-3 3 2 4-1 2 2 3h4z'/%3E%3C/svg%3E") left / 5px 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='22'%3E%3Cpath d='M0 0h3l2 4-2 3 3 3-2 4 1 3-2 5H0z'/%3E%3C/svg%3E") right / 5px 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 10px) 100% no-repeat;}.controls button.on:hover { background: url(grain.png), var(--tape, rgba(255, 72, 176, 0.55)); }.controls-row button:nth-child(3n + 2) { --tape: rgba(168, 240, 208, 0.8); --lean: 1.2deg; }.controls-row button:nth-child(3n) { --tape: rgba(255, 225, 77, 0.75); --lean: -0.6deg; }/* A mask clips an outline, so a focused strip is whole. */.controls button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; mask: none; }.controls input[type="range"] { accent-color: var(--z-pen, var(--ink)); }
.field { display: flex; align-items: center; gap: 7px; color: var(--ink-dim); }.field > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;}
input[type="search"] { width: 140px; padding: 3px 7px; color: var(--ink); background: var(--well); border: 1px solid var(--line); border-radius: 0; font: inherit;}input[type="search"]::placeholder { color: var(--ink-faint); }input[type="range"] { width: 84px; accent-color: var(--ink); }output { min-width: 40px; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ---- side panel ---- */
/* The panel is a block of solid riso blue with paper stuck on it: the readings a yellow sticky note taped down crooked, the strip and the work on cards, and the stream talking in bubbles straight off the blue. What sits on the blue itself is set in paper, at 6.5:1. */.panel.plate { background: var(--block); }.panel .panel-title, .panel .panel-title .muted { color: var(--bubble); }/* A heading is display type, the one place a pass of pink is allowed to land off-register. */.panel .panel-title { text-shadow: 1.5px 1px 0 rgba(255, 72, 176, 0.7); }.panel .panel-title .muted { text-shadow: none; }.panel .panel-title::after { background-image: var(--squiggle-paper); }.panel .stats { position: relative; padding: 14px 12px 10px; background: url(grain.png), var(--sticky); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg);}/* A strip of pink tape across its top. */.panel .stats::after { content: ""; position: absolute; left: 42%; top: -11px; width: 70px; height: 20px; background: rgba(255, 72, 176, 0.6); transform: rotate(3deg);}.panel .activity, .panel .focus { background: var(--bubble); border: 2px solid var(--ink); border-radius: 12px;}.panel .activity { height: 44px; }/* Live agents by model, each count a way to keep the board to it: tabs of their own, the one kept pink. */.model-counts { display: flex; flex-wrap: wrap; gap: 6px; }.model-counts .model-count { padding: 3px 10px; font: 600 13px var(--text); background: var(--bubble); border: 2px solid var(--comic); border-top-width: 0; border-radius: 0 0 8px 8px; box-shadow: 2px 2px 0 var(--comic); }.model-counts .model-count-family { border-style: dashed; }.model-counts .model-count[aria-pressed="true"] { background: var(--benday-pink), var(--pink); border-color: var(--comic); }.model-counts[hidden] { display: none; }.model-counts .logo { font-size: 13px; color: var(--ink); }
.panel { position: fixed; top: calc(var(--bar-h, 46px) + 14px); right: 14px; bottom: 18px; /* Wide enough that a scrobble reads as a sentence, not three clipped lines: the words are the product. */ width: clamp(324px, 32vw, 520px); display: flex; flex-direction: column; gap: 12px; padding: 14px;}
/* Scrobbles a bar, ten seconds a bar, the last ten minutes; the newest bar at the right edge. */.activity { display: block; width: 100%; height: 34px; }
.focus { padding: 8px 10px; border-left: 2px solid var(--ink); background: rgba(var(--ink-rgb), 0.05);}.focus-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }.focus-detail { margin: 6px 0 0; color: var(--ink-dim); overflow-wrap: anywhere; }.focus-model { margin: 6px 0 0; color: var(--ink); overflow-wrap: anywhere; }.focus-model .logo { font-size: 14px; }/* Whether a work group is a crowd or a chain of command. Set apart from the detail above it, because it answers a different question about the same group: not who is on it, but whether any of them spawned each other. */.focus-lineage { margin: 8px 0 0; padding-left: 9px; border-left: 1px solid var(--rule); color: var(--ink-dim);}
.clusters { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; max-height: min(60vh, 420px); overflow-y: auto;}.clusters li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 4px; white-space: nowrap; cursor: pointer;}.clusters li:hover { background: rgba(var(--ink-rgb), 0.05); }/* A halftone square, the same fill shared work gets on the canvas. */.cluster-swatch { width: 9px; height: 9px; flex: none; border: 1px solid var(--rule); background: radial-gradient(circle, var(--ink-dim) 0.8px, transparent 1.1px) 0 0 / 3px 3px;}/* Each group's name is a die-cut vinyl sticker, as on the canvas: a white cut edge, a pastel face with a gloss across it, a soft shadow, and each one stuck down at its own slight angle. */.cluster-label { overflow: hidden; text-overflow: ellipsis; padding: 1px 9px; color: var(--ink); font-weight: 700; background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 18%, rgba(255, 255, 255, 0) 34%), var(--face, #fff36b); border: 2.5px solid #fff; border-radius: 9px; box-shadow: 1px 3px 4px rgba(var(--ink-rgb), 0.3); transform: rotate(var(--tilt, -1deg)); transition: transform 0.2s cubic-bezier(0.3, 1.6, 0.6, 1);}.clusters li:nth-child(6n + 2) .cluster-label { --face: #ffb3df; --tilt: 1.2deg; }.clusters li:nth-child(6n + 3) .cluster-label { --face: #a8f0d0; --tilt: -0.6deg; }.clusters li:nth-child(6n + 4) .cluster-label { --face: #c4dcff; --tilt: 1.6deg; }.clusters li:nth-child(6n + 5) .cluster-label { --face: #ffd3a8; --tilt: -1.4deg; }.clusters li:nth-child(6n + 6) .cluster-label { --face: #e3d0ff; --tilt: 0.8deg; }.clusters li:hover .cluster-label { transform: rotate(0deg) scale(1.04); }.cluster-size { margin-left: auto; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }.clusters li.on { background: var(--ink); }.clusters li.on .cluster-label,.clusters li.on .cluster-size { color: var(--paper); }
/* ---- the stream ---- */
.log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0; padding: 2px 6px 14px 0; list-style: none; display: flex; flex-direction: column; gap: 14px;}/* One row: the emoji in a column of its own, the name and what was said run together beside it, and how long ago in the margin. The operator's hue is the rule down the left, the same colour the agent is on the canvas. *//* One speech bubble per line: paper, an ink edge, a shadow printed a few pixels off, and a tail toward the emoji that said it. The operator's ink is the bubble's left edge, the same colour the agent is on the canvas. */.log li { flex: none; position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 0 8px; margin-left: 6px; padding: 7px 10px 7px 8px; /* No grain under what is read line by line. */ background: var(--bubble); border: 2px solid var(--ink); border-left-width: 6px; border-radius: 16px; box-shadow: 3px 3px 0 var(--cast); cursor: pointer; animation: pop 0.35s cubic-bezier(0.3, 1.6, 0.6, 1); transition: transform 0.15s ease-out;}.log li:hover { transform: rotate(-0.6deg) translateY(-1px); }/* The tail, under the emoji: an ink triangle with a paper one inside it. */.log li::before, .log li::after { content: ""; position: absolute; width: 0; height: 0; border-right-color: transparent; border-right-style: solid; }.log li::before { left: 10px; bottom: -12px; border-top: 12px solid var(--ink); border-right-width: 12px; }.log li::after { left: 12px; bottom: -7px; border-top: 7px solid var(--bubble); border-right-width: 7px; }.log li:focus-visible { outline-offset: 0; }.log .emo { font-size: 15px; align-self: start; }.log .said { /* Every word of it, wrapped: the stream scrolls instead. */ min-width: 0; overflow-wrap: anywhere;}/* The handle's line, its own and never wrapped; what was said under it. */.log .said > .who { display: flex; align-items: center; min-width: 0; white-space: nowrap; color: var(--ink); font-weight: 600; }/* An account's picture beside its name, in the stream, the cards and the focus card: round, and sat on the line like a letter. */.face { display: inline-block; border-radius: 50%; object-fit: cover; vertical-align: -3px; margin-right: 5px; background: var(--line); }.log .face { width: 14px; height: 14px; }#focus-name .face { width: 18px; height: 18px; vertical-align: -4px; }#focus-name .face.bot { width: 22px; height: 22px; vertical-align: -6px; margin: 0 10px 0 3px; }.log .what { display: block; color: var(--ink-dim); }.log time { color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 12px; }
/* With web/zine/: the stream as one sheet of notebook paper torn off the pad, blue rules a line apart and a red margin, every line of it written on a rule and a blank rule between two entries. The rules scroll with the words. The operator's ink stays a mark down the entry's left. */.log.notebook { --line: 22px; gap: 0; padding: 14px 10px 20px 0; line-height: var(--line); background: linear-gradient(90deg, transparent 38px, var(--z-margin, #e46b74) 38px 39.5px, transparent 39.5px), repeating-linear-gradient(transparent 0 calc(var(--line) - 1px), var(--z-ruled, #a9c8e8) calc(var(--line) - 1px) var(--line)) 0 14px / 100% calc(100% - 14px) no-repeat, var(--z-notebook, #fdfcf6); background-attachment: local; border: 2px solid var(--comic, var(--ink)); border-radius: 3px 3px 6px 6px; box-shadow: 4px 4px 0 var(--comic, var(--ink));}.log.notebook li { margin: 0 0 var(--line); padding: 0 4px 0 6px; background: none; border: 0; border-radius: 0; box-shadow: none; animation: ink-in 0.4s ease-out;}/* The collage (feed.js `decorate`). The sheet is a stacking context, so a piece under the words is above the paper and below every word; a piece over the paper sits only where nothing is written. Each settles in once. */.log.notebook { isolation: isolate; }.paper-wash, .paper-scrawl, .paper-dots, .paper-tape, .paper-sticker { position: absolute; pointer-events: none; animation: paper-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;}@keyframes paper-in { from { opacity: 0; scale: 1.06; }}/* Under the words: printed in multiply, and faint enough that what is said keeps 5.4:1 over three pieces at once. The handle, the links and the time, haloed in paper, keep theirs. */.log.notebook .who, .log.notebook a.ref, .log.notebook time { text-shadow: 0 0 2px var(--z-notebook, #fdfcf6), 0 0 2px var(--z-notebook, #fdfcf6), 0 0 3px var(--z-notebook, #fdfcf6); }/* How long ago, pencilled in the margin by the same hand that dated the page, a little askew (feed.js sets the tilt from the line). On the first line only: nothing behind it, so the rules run on under it. */.log.notebook time { align-self: start; padding: 0 2px; font: 21px/var(--line) var(--z-hand-marker, cursive); color: var(--z-pencil, #4a4660); rotate: var(--z-tilt, 0deg);}.paper-wash, .paper-scrawl, .paper-dots { z-index: -1; mix-blend-mode: multiply; }.paper-dots { left: var(--x); top: var(--y); width: var(--w); height: var(--h); rotate: var(--tilt); border-radius: var(--round) calc(100% - var(--round)) var(--round) calc(100% - var(--round)); background: radial-gradient(circle, currentColor 2.6px, transparent 3.1px) 0 0 / 9px 9px; opacity: 0.2;}.paper-dots.ink-pink { color: #ff48b0; }.paper-dots.ink-blue { color: #0078bf; opacity: 0.17; }.paper-dots.ink-sun { color: #ffb800; opacity: 0.32; }.paper-wash { left: var(--x); top: var(--y); width: var(--long); height: var(--wide); translate: 0 -50%; rotate: var(--tilt); opacity: 0.22;}.paper-wash.washi-3, .paper-wash.washi-4 { opacity: 0.38; }.paper-scrawl { left: var(--x); top: var(--y); rotate: var(--tilt); opacity: 0.2; color: var(--z-pen, #1d2b9c);}.paper-scrawl path { stroke-width: var(--pen); vector-effect: non-scaling-stroke; }.paper-scrawl.ink-pink { color: #ff48b0; opacity: 0.3; }.paper-scrawl.ink-blue { color: #0078bf; opacity: 0.22; }/* Over the paper: a strip down the margin from the entry's second line across the gap to the next, and a doodle cut out like a sticker in the gap. Bold, and on nothing written. */.paper-tape { top: calc(var(--line) + 4px); left: calc(4px + var(--nudge, 0px)); width: 22px; height: calc(100% - 8px); rotate: var(--tilt); opacity: 0.85;}.paper-sticker { top: calc(100% + var(--line) / 2); left: var(--x); height: calc(var(--line) - 6px); width: auto; translate: 0 -50%; rotate: var(--tilt); color: var(--z-pen, #1d2b9c); filter: drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(1.5px 2px 0 rgba(31, 29, 58, 0.35));}.paper-sticker path { stroke-width: 2.2; }/* Or stuck down the margin, under the emoji, two rules tall. */.paper-sticker.in-margin { top: calc(var(--line) + 3px); left: 5px; translate: none; height: calc(var(--line) * 2 - 8px); max-width: 30px; }/* Washi tape: printed, its ends torn. Four prints, for under and over. */.log.notebook .washi-1 { background: var(--z-washi-1); }.log.notebook .washi-2 { background: var(--z-washi-2); }.log.notebook .washi-3 { background: var(--z-washi-3); }.log.notebook .washi-4 { background: var(--z-washi-4); }.paper-tape, .paper-wash { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='11'%3E%3Cpath d='M4 0H1l1 2-2 2 2 3-2 2 1 2h3z'/%3E%3C/svg%3E") left / 4px 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='11'%3E%3Cpath d='M0 0h2l2 3-2 2 2 3-1 1 1 2H0z'/%3E%3C/svg%3E") right / 4px 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 8px) 100% no-repeat;}.paper-tape { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='4'%3E%3Cpath d='M0 4V1l3 2 3-2 4 2 3-2 4 2 3-2 2 1v2z'/%3E%3C/svg%3E") top / 100% 4px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='4'%3E%3Cpath d='M0 0v3l3-2 3 2 4-2 3 2 4-2 3 2 2-1V0z'/%3E%3C/svg%3E") bottom / 100% 4px no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 8px) no-repeat;}@media (prefers-reduced-motion: reduce) { .paper-wash, .paper-scrawl, .paper-dots, .paper-tape, .paper-sticker { animation: none; }}.log.notebook li:hover { transform: none; background: rgba(255, 225, 77, 0.25); }.log.notebook li::before, .log.notebook li::after { display: none; }.log.notebook .emo, .log.notebook .said { line-height: var(--line); }.log.notebook .emo { height: var(--line); }.log.notebook .said > .who { height: var(--line); }.log.notebook .what { color: var(--ink); }
/* The day and time of the newest entry, in pen, in the stream's heading. */.stream-date { order: 1; margin-left: auto; font: 24px/1 var(--z-hand-pen, cursive); letter-spacing: 0; text-transform: none; color: #fffaf0; text-shadow: none; white-space: nowrap; }.stream-date[hidden] { display: none; }
/* An entry written in: it inks in, once. */@keyframes ink-in { from { opacity: 0; }}
/* A bubble arrives with a little bounce, once, and then sits still. */@keyframes pop { 0% { opacity: 0; transform: scale(0.86) rotate(-2deg); } 70% { opacity: 1; transform: scale(1.03) rotate(0.6deg); } 100% { transform: none; }}
/* The board has nothing along its foot that a card or the panel must clear. */:root { --legend-h: 0px; }
/* ---- the stream's filter, and keys ---- */
/* The stream kept to one emoji: a sticker in its heading that lets go. */.stream-filter { padding: 1px 8px; font: 600 12px/1.4 var(--text); color: var(--ink); background: var(--sun); border: 2px solid var(--comic, var(--ink)); border-radius: 999px; box-shadow: 2px 2px 0 var(--comic, var(--ink)); text-shadow: none; cursor: pointer;}.stream-filter[hidden] { display: none; }.log li[hidden] { display: none; }
/* The emoji tally, along the foot of the page. Placed across by the graph. */.emoji-tally { position: fixed; bottom: 16px; left: 14px; display: block;}.emoji-tally[hidden] { display: none; }
kbd { font: inherit; padding: 0 4px; border: 1px solid var(--rule); border-bottom-width: 2px; }
.sheet-toggle { display: none; }
/* Narrower than the panel and the plate side by side: the panel becomes a sheet along the bottom — the readings on one row and the stream under them, which can be folded away — and the tally gives way to it. */@media (max-width: 1100px) { .emoji-tally { display: none; } .stream-date { font-size: 19px; } .panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 40vh; gap: 8px; padding: 10px 12px; } .panel .activity { display: none; } .stats { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 8px; } .stats div, .stats div.minor, .stats #stat-burn-row, .stats #stat-hottest-row { grid-column: span 1; } /* With the two burn readings, nine in the row. */ .stats:has(> #stat-burn-row:not([hidden])) { grid-template-columns: repeat(9, minmax(0, 1fr)); } .stats dd, .stats .minor dd, .stats dd#stat-hottest { font-size: 15px; color: var(--ink); } .stats dt, .stats .minor dt { font-size: 10px; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sheet-toggle { display: inline-block; order: 3; padding: 0 6px; font-size: 12px; text-transform: none; letter-spacing: 0.02em; } .panel.folded .log { display: none; }}
/* A phone has no room for seven readings in a row: the three that answer "how much is happening" on one, the four beneath them on another, and every one of them whole. */@media (max-width: 720px) { .stats, .stats:has(> #stat-burn-row:not([hidden])) { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 8px; } .stats div { grid-column: span 4; } .stats div.minor { grid-column: span 3; } .stats #stat-burn-row, .stats #stat-hottest-row { grid-column: span 6; } .stats dd, .stats dd#stat-hottest { font-size: 18px; } .stats .minor dd { font-size: 14px; } .stats dt, .stats .minor dt { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }}
@media (prefers-reduced-motion: reduce) { .log li, .log.notebook li { animation: none; transition: none; } .log li:hover, .clusters li:hover .cluster-label { transform: none; } .cluster-label { transition: none; } .tab { transition: none; }}
/* Between a phone and a wide screen, room for the bar's call to post: find is named by its placeholder, as on a phone, and a little narrower. */@media (max-width: 960px) { .bar > .find > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .bar > .find input[type="search"] { width: 120px; }}
/* A phone's bar (plate.css sets its rows, the wordmark and the lamp): find on the second row beside the post button, named by its placeholder, and as wide as the row allows. */@media (max-width: 720px) { .bar > .find { order: 3; flex: 1 1 120px; min-width: 0; margin-left: 0; } .bar > .find > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .bar > .find input[type="search"] { width: 100%; } /* The tabs hang from the strip as they do on a wide screen, closer, and similar work says "work". Its whole name is still its label. */ .tabs { right: 8px; gap: 3px; } .tab { gap: 4px; padding: 3px 7px 5px; font-size: 12px; } [data-tab="work"] .tab-name { font-size: 0; } [data-tab="work"] .tab-name::after { content: "work"; font-size: 12px; } /* Kept, a vendor is its mark alone, and a group's name is cut short: its whole name is still the tab's label. */ .tab-kept { max-width: 52px; } .tab-value:has(.logo) .tab-kept { display: none; } .tab-card { right: 0; max-width: calc(100vw - 16px); }}@media (max-width: 380px) { .tab-kept { max-width: 30px; }}