/* Wrkr — every shared piece, drawn once in Clear, from tokens.css alone. A page's own style only places these; if a
page needs something this kit lacks, the kit gains it here, once.
The pieces: the glyphs, Alex, a button, a field, a row, a card, a picture (a face, a person, a project, a file's
tile), a sign (dot, spinner, badge), the frame (sidebar, chat, head, panel, page), the message box, a chat's words,
a file, a menu, a dialog, a chooser, a segment, a switch, a notice, a page alone, and the box a worker comes in. */
/* ── the page ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-width: thin; scrollbar-color: var(--fill-strong) transparent }
body { margin: 0; min-height: 100dvh; background: var(--ground); color: var(--ink); font: var(--w-text) var(--size-read)/var(--line-read) var(--font);
letter-spacing: var(--track-read); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0 }
p { text-wrap: pretty }
ul, ol { list-style: none }
/* A page's title is the large one on a phone and the title size on a computer; a heading inside a page is a name. */
h1 { font-size: var(--size-display); line-height: var(--line-display); letter-spacing: var(--track-display); font-weight: var(--w-display); text-wrap: balance }
@media (min-width: 901px) { h1 { font-size: var(--size-title); line-height: var(--line-title); letter-spacing: var(--track-title) } }
h2, h3 { font-size: var(--size-read); line-height: var(--line-read); font-weight: var(--w-strong) }
/* A first question, and a dialog's title. */
.title { font-size: var(--size-title); line-height: var(--line-title); letter-spacing: var(--track-title); font-weight: var(--w-display) }
.title-2 { font-size: var(--size-title-2); line-height: var(--line-title-2); letter-spacing: var(--track-title-2); font-weight: var(--w-display) }
strong, b { font-weight: var(--w-strong) }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
button, input, textarea, select { margin: 0; font: inherit; letter-spacing: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }
/* What a page moves the reader to, rather than a control they chose, shows no ring. */
[tabindex="-1"]:focus { outline: none }
::selection { background: var(--accent-soft) }
[hidden] { display: none !important }
/* What explains is callout; when, where and how much is meta. */
.callout { font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout) }
.meta { font-size: var(--size-meta); line-height: var(--line-meta); letter-spacing: var(--track-meta); color: var(--ink-2) }
.ink { color: var(--ink) }
.ink-2 { color: var(--ink-2) }
.ink-3 { color: var(--ink-3) }
.accent { color: var(--accent) }
/* What the person searched for, marked in the one colour wherever it is found. */
mark { padding: 0 .12em; border-radius: .25em; background: var(--accent-soft); color: inherit }
/* Words read at length: an answer, a page of explanation. */
.prose { max-width: var(--measure); line-height: var(--line-prose); text-wrap: pretty; overflow-wrap: break-word }
.prose > * + * { margin-top: var(--s3) }
.link { color: var(--accent); text-decoration: none }
.link:hover { text-decoration: underline; text-underline-offset: 3px }
.hidden-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
/* Two placements every page needs: things stacked, and things side by side that wrap. */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s3)); min-width: 0 }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s2)); min-width: 0 }
.spacer { flex: 1 }
/* What only the narrow window shows, and what only the wide one does. */
@media (min-width: 901px) { .narrow-only { display: none !important } }
@media (max-width: 900px) { .wide-only { display: none !important } }
@keyframes breathe { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes rise { from { opacity: 0; transform: translateY(8px) scale(.985) } }
@keyframes fade { from { opacity: 0 } }
@keyframes spin { to { transform: rotate(1turn) } }
/* ── glass: what floats over the chat ──────────────────────────────────────────
The head's buttons, the message box, chips and menus: the chat moves under them, blurred. */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.8); backdrop-filter: blur(var(--blur)) saturate(1.8);
box-shadow: 0 8px 24px var(--shade-2), 0 1px 3px var(--shade-1), inset 0 0 0 .5px var(--glass-edge), inset 0 1px 0 var(--glass-light) }
/* ── the glyphs ─────────────────────────────────────────────────────────────────
One set, on one 24-unit grid, one stroke, round ends; each takes the colour of the words beside it.
. The p- glyphs are the project icons a person picks. */
.i { width: var(--icon); height: var(--icon); flex: none; display: inline-block; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat }
.i.small { width: var(--icon-small); height: var(--icon-small) }
.i-home { --g: url("data:image/svg+xml;utf8,") }
.i-compose { --g: url("data:image/svg+xml;utf8,") }
.i-search { --g: url("data:image/svg+xml;utf8,") }
.i-down { --g: url("data:image/svg+xml;utf8,") }
.i-right { --g: url("data:image/svg+xml;utf8,") }
.i-left { --g: url("data:image/svg+xml;utf8,") }
.i-arrow { --g: url("data:image/svg+xml;utf8,") }
.i-plus { --g: url("data:image/svg+xml;utf8,") }
.i-more { --g: url("data:image/svg+xml;utf8,") }
.i-close, .search > .input::-webkit-search-cancel-button { --g: url("data:image/svg+xml;utf8,") }
.i-file { --g: url("data:image/svg+xml;utf8,") }
.i-sheet { --g: url("data:image/svg+xml;utf8,") }
.i-image { --g: url("data:image/svg+xml;utf8,") }
.i-clock { --g: url("data:image/svg+xml;utf8,") }
.i-share { --g: url("data:image/svg+xml;utf8,") }
.i-link { --g: url("data:image/svg+xml;utf8,") }
.i-screen { --g: url("data:image/svg+xml;utf8,") }
.i-phone { --g: url("data:image/svg+xml;utf8,") }
.i-terminal { --g: url("data:image/svg+xml;utf8,") }
.i-sparkle { --g: url("data:image/svg+xml;utf8,") }
.i-gear { --g: url("data:image/svg+xml;utf8,") }
.i-sliders { --g: url("data:image/svg+xml;utf8,") }
.i-person { --g: url("data:image/svg+xml;utf8,") }
.i-lock { --g: url("data:image/svg+xml;utf8,") }
.i-card { --g: url("data:image/svg+xml;utf8,") }
.i-mail { --g: url("data:image/svg+xml;utf8,") }
.i-download { --g: url("data:image/svg+xml;utf8,") }
.i-upload { --g: url("data:image/svg+xml;utf8,") }
.i-open { --g: url("data:image/svg+xml;utf8,") }
.i-copy { --g: url("data:image/svg+xml;utf8,") }
.i-send { --g: url("data:image/svg+xml;utf8,") }
.i-stop { --g: url("data:image/svg+xml;utf8,") }
.i-play { --g: url("data:image/svg+xml;utf8,") }
.i-pause { --g: url("data:image/svg+xml;utf8,") }
.i-shield { --g: url("data:image/svg+xml;utf8,") }
.i-gauge { --g: url("data:image/svg+xml;utf8,") }
.i-check { --g: url("data:image/svg+xml;utf8,") }
.i-sidebar { --g: url("data:image/svg+xml;utf8,") }
.i-menu { --g: url("data:image/svg+xml;utf8,") }
.i-mic { --g: url("data:image/svg+xml;utf8,") }
.i-trash { --g: url("data:image/svg+xml;utf8,") }
.i-globe { --g: url("data:image/svg+xml;utf8,") }
.i-power { --g: url("data:image/svg+xml;utf8,") }
.i-pencil { --g: url("data:image/svg+xml;utf8,") }
.i-sun { --g: url("data:image/svg+xml;utf8,") }
.i-moon { --g: url("data:image/svg+xml;utf8,") }
.i-expand { --g: url("data:image/svg+xml;utf8,") }
.i-camera { --g: url("data:image/svg+xml;utf8,") }
.i-key { --g: url("data:image/svg+xml;utf8,") }
.i-signout { --g: url("data:image/svg+xml;utf8,") }
.i-chat { --g: url("data:image/svg+xml;utf8,") }
.i-window { --g: url("data:image/svg+xml;utf8,") }
.i-storage { --g: url("data:image/svg+xml;utf8,") }
.i-restore { --g: url("data:image/svg+xml;utf8,") }
.i-sort { --g: url("data:image/svg+xml;utf8,") }
.i-calendar { --g: url("data:image/svg+xml;utf8,") }
.i-bag { --g: url("data:image/svg+xml;utf8,") }
.i-p-folder { --g: url("data:image/svg+xml;utf8,") }
.i-p-chart { --g: url("data:image/svg+xml;utf8,") }
.i-p-page { --g: url("data:image/svg+xml;utf8,") }
.i-p-book { --g: url("data:image/svg+xml;utf8,") }
.i-p-bulb { --g: url("data:image/svg+xml;utf8,") }
.i-p-globe { --g: url("data:image/svg+xml;utf8,") }
.i-p-camera { --g: url("data:image/svg+xml;utf8,") }
.i-p-leaf { --g: url("data:image/svg+xml;utf8,") }
.i-p-heart { --g: url("data:image/svg+xml;utf8,") }
.i-p-house { --g: url("data:image/svg+xml;utf8,") }
.i-p-briefcase { --g: url("data:image/svg+xml;utf8,") }
.i-p-star { --g: url("data:image/svg+xml;utf8,") }
.i-wave { --g: url("data:image/svg+xml;utf8,") }
.i-keyboard { --g: url("data:image/svg+xml;utf8,") }
.i-clipboard { --g: url("data:image/svg+xml;utf8,") }
.i-thought { --g: url("data:image/svg+xml;utf8,") }
.i-ibeam { --g: url("data:image/svg+xml;utf8,") }
.i-passkey { --g: url("data:image/svg+xml;utf8,") }
/* ── Alex ─────────────────────────────────────────────────────────────────────────
As wrkr.dev draws it: its 3D body in the colour its face was given, and eyes that say what it is doing - ready,
reading along a line while it works, looking up while it is your turn, pleased when a turn is done, shut while it
sleeps. A living one (ui/kit.js) only blinks, reads and hops, each one short transition. */
.pic { --size: var(--pic-m); position: relative; width: var(--size); height: var(--size); flex: none; display: inline-grid; place-items: center }
.pic.xs { --size: var(--pic-xs) }
.pic.s { --size: var(--pic-s) }
.pic.m { --size: var(--pic-m) }
.pic.l { --size: var(--pic-l) }
.pic.xl { --size: var(--pic-xl) }
.pic.xxl { --size: var(--pic-xxl) }
.pic > img { width: 100%; height: 100%; object-fit: cover }
.pic.person { border-radius: 50%; box-shadow: 0 0 0 .5px var(--edge) }
.pic.person > img { border-radius: 50% }
.pic > .dot { position: absolute; right: 0; bottom: 4%; box-shadow: 0 0 0 2px var(--ground) }
.pic.face.body { transform-origin: 50% 100% }
/* The shadow is in ems of the face's own size, so a face sized by its cell (a chooser's 100%) keeps a valid filter. */
.pic.face.body > img { position: absolute; inset: 0; object-fit: contain; font-size: var(--size); filter: var(--hue, saturate(1)) drop-shadow(0 .04em .05em rgb(0 0 0 / .2)) }
.pic.face.body > i { position: absolute; top: 41.95%; left: 31.25%; width: 11.61%; height: 17.86%; border-radius: 99px; background: #fff; transition: translate 260ms var(--ease), scale 80ms linear }
.pic.face.body > i + i { left: 57.15% }
.pic.face.body[data-mood="working"] > i { translate: -38% 4% }
.pic.face.body[data-mood="working"].read > i { translate: 34% 4%; transition-duration: 900ms, 80ms }
.pic.face.body[data-mood="waiting"] > i { translate: 6% -26% }
.pic.face.body[data-mood="done"] > i { top: 47%; height: 9%; border-radius: 99px 99px 40% 40% }
.pic.face.body[data-mood="asleep"] > i { top: 52%; height: 5% }
.pic.face.body.blink > i { scale: 1 .12 }
.pic.face.body.hop { animation: face-hop 560ms var(--spring) }
@keyframes face-hop { 18% { transform: scale(1.08, .9) } 45% { transform: translateY(-16%) scale(.95, 1.06) } 75% { transform: scale(1.04, .96) } }
.pic.face.body.sky { --hue: hue-rotate(49deg) }
.pic.face.body.iris { --hue: hue-rotate(92deg) }
.pic.face.body.rose { --hue: hue-rotate(170deg) saturate(1.2) }
.pic.face.body.honey { --hue: hue-rotate(-128deg) saturate(1.4) brightness(1.08) }
.pic.face.body.moss { --hue: hue-rotate(-62deg) }
.pic.face.body.sand { --hue: hue-rotate(-130deg) saturate(.45) brightness(1.2) }
.pic.face.body.graphite { --hue: saturate(0) brightness(.62) }
/* THE LOGO: Alex between the brackets of [wrkr], as the website draws it. It goes round Alex alone - the menu's head, a
new chat, signing in - and while Alex works its brackets breathe. */
.lockup { --size: var(--pic-s); position: relative; flex: none; width: calc(var(--size) * 1.58); height: calc(var(--size) * 1.14); display: grid; place-items: center }
.lockup > .br { position: absolute; top: 0; height: 100%; width: auto; pointer-events: none }
.lockup > .br.l { left: 0 }
.lockup > .br.r { right: 0 }
.lockup > .pic { --size: inherit }
.lockup.hero { --size: var(--pic-xl) }
.lockup.working > .br { animation: breathe var(--breath) var(--ease-both) infinite }
/* ── a button ───────────────────────────────────────────────────────────────────
One family, pills. The plain <.btn> is tinted, the one colour lightly; .primary is filled, one to a screen;
.plain is the one colour's words alone; .danger is Delete forever and nothing else, in red words, never a red slab.
.small sits in a row and still takes 44 to hit. .icon is a glyph alone, round, in ink. */
.btn { position: relative; min-height: var(--control); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0 22px; border: 0;
border-radius: var(--round); background: var(--accent-soft); color: var(--accent); font-size: var(--size-read); font-weight: var(--w-strong); line-height: 1;
letter-spacing: var(--track-read); white-space: nowrap; text-decoration: none; -webkit-user-select: none; user-select: none;
transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), transform var(--quick) var(--ease), opacity var(--quick) var(--ease) }
.btn:hover { background: color-mix(in srgb, var(--accent-soft), var(--accent) 8%) }
.btn:active { transform: scale(.97) }
.btn.primary { background: var(--strong); color: var(--on-strong) }
.btn.primary:hover { background: color-mix(in srgb, var(--strong) 88%, black) }
.btn.plain { background: transparent; color: var(--accent) }
.btn.plain:hover { background: var(--fill) }
.btn.danger, .btn.primary.danger { background: var(--danger-soft); color: var(--danger) }
.btn.plain.danger { background: transparent }
.btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent) }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none }
.btn.small { min-height: var(--control-small); gap: var(--s1); padding: 0 14px; font-size: var(--size-callout); letter-spacing: var(--track-callout) }
.btn.small .i { width: var(--icon-small); height: var(--icon-small) }
.btn.small::after { content: ""; position: absolute; inset: calc((var(--control-small) - var(--hit)) / 2) 0 }
.btn.wide { width: 100% }
.btn.icon { width: var(--hit); min-height: var(--hit); padding: 0; background: var(--fill); color: var(--ink) }
.btn.icon:hover { background: var(--fill-strong) }
.btn.icon.plain { background: transparent }
.btn.icon.plain:hover { background: var(--fill) }
.btn.icon.small { width: var(--control-small); min-height: var(--control-small) }
.btn.icon.small .i { width: var(--icon); height: var(--icon) }
.btn.icon.small::after { inset: calc((var(--control-small) - var(--hit)) / 2) }
.btn.icon.primary { background: var(--strong); color: var(--on-strong) }
.btn.icon.glass { background: var(--glass) }
.btn.icon[aria-pressed="true"] { color: var(--accent) }
/* Glyphs side by side on glass, one pill: the head's Files, Screen and more. */
.buttons { display: inline-flex; flex: none; border-radius: var(--round) }
.buttons > .btn.icon { width: 40px; background: transparent }
.buttons > .btn.icon:hover { background: var(--fill) }
/* ── a field ────────────────────────────────────────────────────────────────────
A box to type in is a well of fill; with the caret in it, the keyboard's ring. */
.input { width: 100%; min-height: var(--hit); padding: 0 14px; border: 0; border-radius: var(--r2); background: var(--fill); color: var(--ink); font-size: var(--size-read);
transition: background-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease) }
.input::placeholder { color: var(--ink-3) }
.input:focus { outline: none; box-shadow: 0 0 0 3px var(--focus) }
textarea.input { padding-block: 11px; line-height: var(--line-prose) }
select.input { appearance: none; padding-right: 36px; background: var(--fill) url("data:image/svg+xml;utf8,") right 10px center / 18px no-repeat }
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.field > .field-name { padding-inline: var(--s1); font-size: var(--size-callout); line-height: var(--line-callout); font-weight: var(--w-strong); color: var(--ink-2) }
.field-row { display: flex; align-items: center; gap: var(--s2) }
.field-row > .input { flex: 1 }
/* Fields on a card, a row each, their name small above what is typed: signing in. */
.fields { display: flex; flex-direction: column; border-radius: var(--r3); background: var(--raised) }
.fields > .field { position: relative; gap: 0; min-height: 56px; justify-content: center; padding: var(--s2) var(--s4) }
.fields > .field + .field::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: .5px; background: var(--edge) }
.fields > .field > .field-name { padding: 0; font-size: var(--size-meta); line-height: var(--line-meta); font-weight: var(--w-text) }
.fields > .field > .input, .fields > .field > .affix { min-height: 26px; padding: 0; border-radius: 0; background: transparent; box-shadow: none }
/* The one way to find something in a list: its well with the search glyph before what is typed. */
.search { display: flex; align-items: center; min-height: 40px; border-radius: var(--r2); background: var(--fill); color: var(--ink-3); transition: box-shadow var(--quick) var(--ease) }
.search:focus-within { box-shadow: 0 0 0 3px var(--focus) }
.search > .i { width: 18px; height: 18px; margin-left: var(--s3) }
.search > .input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: var(--icon-small); height: var(--icon-small); background: var(--ink-3); cursor: pointer; mask: var(--g) center / contain no-repeat }
.search > .input, .search > .input:focus { flex: 1; min-width: 0; min-height: 40px; padding-left: var(--s2); background: transparent; box-shadow: none }
/* A field with its fixed ending beside it, the way an address ends in .bots.wrkr.dev. */
.affix { display: flex; align-items: center; min-height: var(--hit); border-radius: var(--r2); background: var(--fill) }
.affix:focus-within { box-shadow: 0 0 0 3px var(--focus) }
.affix > .input, .affix > .input:focus { flex: 1; min-width: 0; padding-right: 0; background: transparent; box-shadow: none }
.affix > span { flex: none; padding-right: 14px; color: var(--ink-2) }
/* A box to tick, with what ticking it means beside it. */
.tick { display: flex; align-items: flex-start; gap: var(--s3); min-height: var(--hit); padding-block: var(--s2); cursor: pointer; text-align: left }
.tick > input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; accent-color: var(--accent) }
/* ── a row ──────────────────────────────────────────────────────────────────────
The one row, wherever a list is: the sidebar, a card of rows, Files, a menu. A picture or glyph in front, the name
with one line under it, and what can be done at the end. On a card, rows are parted by a hairline. A name is read
as plain words; it is a name, in 600, only over a second line. */
.row { position: relative; width: 100%; min-width: 0; min-height: var(--hit); display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border: 0;
border-radius: var(--r2); background: transparent; color: var(--ink); font-size: var(--size-read); line-height: var(--line-read); text-align: left }
a.row, button.row, label.row { cursor: pointer; transition: background-color var(--quick) var(--ease) }
a.row:hover:where(:not([aria-current])), button.row:hover, label.row:hover:where(:not([aria-selected="true"])) { background: var(--fill) }
.row[aria-current], .row[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--w-strong) }
.row > .i { color: var(--ink-2) }
.row-text { min-width: 0; flex: 1; display: flex; flex-direction: column }
.row-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.row-text > strong:only-child, .row-text > strong:has(+ :empty) { font-weight: var(--w-text) }
/* A row's second line explains, a line or two before it gives way. */
.row-text > .meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal }
.row-text > .state { display: flex }
.row-end { flex: none; margin-left: auto; display: flex; align-items: center; gap: var(--s2); color: var(--ink-2) }
.row-end > .i-right { color: var(--ink-3) }
.row.tall { min-height: 60px }
/* A row whose words are a sentence lets them run on to the next line. */
.row.wrap .row-text > * { white-space: normal }
/* A row that is one thing to do, said in the one colour. */
.row.link { color: var(--accent) }
/* A row that belongs to the one above it, like a chat in its project. */
.row.inset { padding-left: calc(var(--s4) + var(--pic-s) + var(--s3)) }
.list { display: flex; flex-direction: column }
/* ── a card ─────────────────────────────────────────────────────────────────────
A quiet fill on the ground, never a shadow. On a grouped page (a phone's page of rows) the ground is grey and the
card is white. A card of rows holds its rows edge to edge, a hairline between them, inset past what leads them. */
.card { position: relative; display: block; min-width: 0; padding: var(--s4); border: 0; border-radius: var(--r3); background: var(--raised); color: var(--ink); text-align: left }
.card.flush, .card.rows { padding: 0; overflow: hidden }
.card.rows > .row, .card.rows > .list > .row { border-radius: 0; padding-block: 11px }
.card.rows .row + .row::before, .card.rows > * + .row::before { content: ""; position: absolute; top: 0; left: var(--inset, var(--s4)); right: 0; height: .5px; background: var(--edge) }
.card.rows .row:has(> :is(.thing, .tile, .pic, .logo-tile)) + .row::before, .card.rows .row + .row:has(> :is(.thing, .tile, .pic, .logo-tile))::before { left: 60px }
.card.rows .row-text > .meta { font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout) }
.card.rows a.row:hover, .card.rows button.row:hover { background: var(--fill) }
a.card, button.card { width: 100%; font: inherit; cursor: pointer; transition: background-color var(--quick) var(--ease), transform var(--quick) var(--ease) }
a.card:hover, button.card:hover { background: color-mix(in srgb, var(--raised), var(--ink) 4%) }
a.card:active, button.card:active { transform: scale(.99) }
.card[aria-checked="true"] { box-shadow: 0 0 0 2px var(--accent) }
/* ── a group on a page: its heading, its card, and the note under it ── */
.section { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.section-head { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-inline: var(--s4) }
.section-head > h2, .label { font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout); font-weight: var(--w-strong); color: var(--ink-2) }
.section > p.meta, .section > .note { padding-inline: var(--s4) }
/* ── a picture ───────────────────────────────────────────────────────────────────
A project is a rounded square of its colour with its glyph in white. A file is a tile of its kind's colour and glyph,
as the kit says each kind (ui/kit.json, kinds), or its own picture; a folder is the one colour's glyph alone. A thing
the page speaks of wears the same tile in grey. */
.tile { --c: var(--id-iris); --size: var(--pic-m); width: var(--size); height: var(--size); flex: none; display: inline-grid; place-items: center; border-radius: 26%; background: var(--c); color: var(--on-colour);
font-size: var(--size-callout); font-weight: var(--w-display) }
.tile > .i { width: 58%; height: 58% }
.tile.xs { --size: var(--pic-xs) }
.tile.xs > .i { width: 72%; height: 72% }
.tile.s { --size: var(--pic-s) }
.tile.l { --size: var(--pic-l) }
.tile.xl { --size: var(--pic-xl) }
.tile.jade { --c: var(--id-jade) }
.tile.sky { --c: var(--id-sky) }
.tile.iris { --c: var(--id-iris) }
.tile.rose { --c: var(--id-rose) }
.tile.honey { --c: var(--id-honey) }
.tile.moss { --c: var(--id-moss) }
.tile.sand { --c: var(--id-sand) }
.tile.graphite { --c: var(--id-graphite) }
.thing { --size: var(--pic-m); width: var(--size); height: var(--size); flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 25%; background: var(--c, var(--kind-other)); color: #fff }
.thing > .i { width: 55%; height: 55% }
.thing > img { width: 100%; height: 100%; object-fit: cover; background: var(--sunk) }
.thing.s { --size: var(--pic-s) }
.thing.xs { --size: var(--pic-xs); border-radius: 27% }
.thing.xs > .i { width: 68%; height: 68% }
.thing.l { --size: var(--pic-l) }
/* A kind with no colour of its own, a folder, is its glyph alone in the one colour. */
.thing.accent { --c: var(--strong); color: var(--on-strong) }
.thing.bare { background: none; color: var(--accent) }
.thing.bare > .i { width: 75%; height: 75% }
/* An AI's own mark, in its vendor's colours, on a small white tile where it leads a row. */
.logo { width: var(--icon-small); height: var(--icon-small); flex: none; display: inline-grid }
.logo > svg, .logo > img { width: 100%; height: 100% }
.logo-tile { width: var(--pic-s); height: var(--pic-s); flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--grouped-card); box-shadow: inset 0 0 0 .5px var(--edge) }
.logo-tile > .logo { width: var(--icon-small); height: var(--icon-small) }
/* ── small signs ────────────────────────────────────────────────────────────────
A dot is only ever "needs you" or "on", in the one colour, and orange for a warning. Something at work spins, as the
platform's own spinner does, never a dot. A badge counts. */
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ink-3) }
.dot.live, .dot.you { background: var(--accent) }
.dot.warn { background: var(--warn) }
.dot.working, .spin { --g: url("data:image/svg+xml;utf8,"); width: 15px; height: 15px; border-radius: 0; background: var(--ink-2); -webkit-mask: var(--g) center / contain no-repeat;
mask: var(--g) center / contain no-repeat; animation: spin 1s steps(8) infinite }
/* A glyph-only control's name, beside it while the pointer is there. */
.tip { position: fixed; z-index: 50; max-width: 280px; padding: var(--s1) var(--s2); border-radius: var(--r1); background: var(--ink); color: var(--ground);
font-size: var(--size-meta); line-height: var(--line-meta); letter-spacing: var(--track-meta); pointer-events: none }
.badge { min-width: 20px; height: 20px; flex: none; padding: 0 6px; border-radius: var(--round); background: var(--strong); color: var(--on-strong); font-size: var(--size-meta); line-height: 20px; font-weight: var(--w-strong); letter-spacing: 0; text-align: center }
/* A state said in words beside its sign. */
.state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2) }
.state.warn { color: var(--warn) }
.state.warn > .i { color: var(--warn) }
/* ── the frame ──────────────────────────────────────────────────────────────────
Inside a worker: on a computer the sidebar is a panel floating at the left, the chat or a page is read on the ground
beside it, and Files or the screen floats at the right when it is open. On a phone the sidebar is a drawer over the
page from its left edge, and the chat or a page takes the whole window, its head and its message box floating over
it as glass. */
.app { height: 100dvh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); gap: 10px; padding: 10px; background: var(--ground) }
/* Narrower, the chat keeps its least and the panel beside it gives way first, down to its own. */
.app.with-panel { grid-template-columns: var(--sidebar) minmax(var(--sheet-least), 1fr) minmax(var(--panel-least), var(--panel)) }
/* A list beside what is chosen in it, the account's letters, is a panel too. */
.app.with-list { grid-template-columns: var(--sidebar) var(--list) minmax(var(--sheet-least), 1fr) }
.sidebar { --sidebar-row: 40px; min-height: 0; display: flex; flex-direction: column; gap: var(--s1); padding: 14px 10px 0; overflow: auto; scrollbar-width: none;
border-radius: var(--r4); background: var(--raised); box-shadow: var(--lift-1) }
.sidebar .row { min-height: var(--sidebar-row); padding: 0 var(--s3); gap: 14px }
.sidebar .row > .i { color: var(--accent) }
.sidebar .row[aria-current] > .i { color: var(--accent) }
.sidebar-group { display: flex; flex-direction: column; gap: 0 }
.sidebar-group.grow { flex: 1 }
.sidebar-label { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: var(--s3) 2px var(--s1) var(--s3) }
.sidebar-label > .label { padding: 0 }
.sidebar-label > .btn.icon { color: var(--ink-2) }
/* New chat: the one button of the side, filled. */
.sidebar .row.new { min-height: 44px; justify-content: center; gap: 10px; margin: 0 2px var(--s2); border-radius: var(--round); background: var(--strong); color: var(--on-strong); font-weight: var(--w-strong) }
.sidebar .row.new > .i { color: var(--on-strong) }
.sidebar .row.new > .row-text { flex: none }
.sidebar a.row.new:hover { background: color-mix(in srgb, var(--strong) 88%, black) }
.sidebar .row.new[aria-current] { background: var(--strong); color: var(--on-strong) }
/* The person at the foot, under a hairline, with the places and the projects scrolling above them. */
.sidebar-foot { position: sticky; bottom: 0; margin: auto -10px 0; padding: var(--s2) 10px 10px; background: var(--raised); box-shadow: 0 -.5px 0 var(--edge) }
.sidebar-foot > .row { padding-left: var(--s2); font-weight: var(--w-strong) }
/* The sidebar as a drawer, over the page from its left edge, the page dimmed behind it: a phone's always, and a
window's that has no room beside a panel. Choosing a place, the dimmed page or Escape puts it away. A finger's rows. */
.app.drawer > .sidebar { --sidebar-row: var(--hit); position: fixed; z-index: 20; inset: 0 auto 0 0; width: min(330px, 86vw); display: flex; gap: var(--s1);
padding: calc(var(--s3) + env(safe-area-inset-top, 0px)) var(--s3) 0; border-radius: 0; box-shadow: var(--lift-3); animation: drawer var(--slow) var(--ease) }
.app.drawer > .sidebar .sidebar-foot { margin-inline: calc(-1 * var(--s3)); padding: var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) }
.app.drawer::after { content: ""; position: fixed; z-index: 19; inset: 0; background: var(--backdrop); animation: fade var(--slow) var(--ease) }
@keyframes drawer { from { transform: translateX(-100%) } }
/* The chat or a page: read on the ground. */
.sheet { --on: var(--ground); --head: 68px; --head-gap: var(--s4); position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ground) }
.sheet-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: none }
/* Files or the screen: a panel floating at the right. */
.sheet.panel { border-radius: var(--r4); background: var(--raised); box-shadow: var(--lift-1) }
/* A sheet's head: its title in the middle and its buttons at the ends, floating over what scrolls under it. */
.sheet-head { flex: none; position: relative; z-index: 3; min-height: var(--head); display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4) }
.head-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 2 * 140px); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none }
.head-title > * { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.head-title > strong { font-size: var(--size-read); line-height: var(--line-read) }
.head-title > span { font-size: var(--size-meta); line-height: 16px; letter-spacing: var(--track-meta); color: var(--ink-2) }
.crumbs { min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout); color: var(--ink-2) }
.crumbs > * { overflow: hidden; text-overflow: ellipsis }
.crumbs > a { min-height: var(--hit); display: inline-flex; align-items: center }
.crumbs > a:hover { color: var(--ink) }
.crumbs > .i { width: 13px; height: 13px; color: var(--ink-3) }
.crumbs > [aria-current] { color: var(--ink); font-weight: var(--w-strong) }
/* A page of the person's own outside a worker: a top bar, then one column on the ground. */
.topbar { max-width: calc(var(--page) + 2 * var(--s7)); display: flex; align-items: center; gap: var(--s3); margin: 0 auto; padding: var(--s3) var(--s7) }
.page { max-width: calc(var(--page) + 2 * var(--s7)); margin: 0 auto; padding: var(--s6) var(--s7) var(--s10) }
/* A page's head: its large title and one line under it, what can be done there at the end of the title's line. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); padding-inline: var(--s1) }
.page-head > h1 { flex: 1 1 auto }
.page-head > p { flex-basis: 100%; color: var(--ink-2) }
@media (max-width: 900px) { .page-head > p { font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout) } }
.person-button { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--hit); padding: 0 var(--s3) 0 var(--s1); border: 0; border-radius: var(--round); background: transparent; font-weight: var(--w-strong) }
.person-button:hover { background: var(--fill) }
@media (max-width: 900px) {
.app, .app.with-panel, .app.with-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 }
.app > .sidebar { display: none }
/* Narrow, what is chosen covers its list, and its head leads back to it; the panel covers the chat. */
.app.with-list > .list-sheet { display: none }
.app.with-panel > .sheet:not(.panel) { display: none }
.sheet.panel { border-radius: 0; box-shadow: none; background: var(--grouped) }
/* The head floats over what scrolls under it, which is gone under the whole head and fades in between it and where
the reading begins. */
.sheet { --head: calc(60px + env(safe-area-inset-top, 0px)); --head-gap: var(--s1) }
.sheet-head { position: absolute; top: 0; left: 0; right: 0; padding: env(safe-area-inset-top, 0px) var(--s4) 0 }
.sheet:has(> .sheet-head)::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: calc(var(--head) + var(--head-gap)); pointer-events: none;
background: linear-gradient(var(--on) var(--head), transparent) }
.head-title { top: calc(50% + env(safe-area-inset-top, 0px) / 2); max-width: calc(100% - 2 * 112px) }
.topbar { padding: var(--s2) var(--s4) }
.page { padding: var(--s4) var(--s4) var(--s9) }
}
/* ── a page in a worker: grouped, under a large title ──────────────────────────────
A phone's page lies on the grey and holds its rows on white cards; a computer's lies on the ground and holds them on
quiet fills. */
.place-page { width: 100%; max-width: calc(var(--measure) + 2 * var(--s7)); margin: 0 auto; padding: 56px var(--s7) var(--s9); display: flex; flex-direction: column; gap: 26px }
@media (max-width: 900px) {
.sheet.grouped { --on: var(--grouped); background: var(--grouped) }
.grouped .card, .grouped .fields { background: var(--grouped-card) }
.place-page { padding: calc(var(--head) + var(--head-gap)) var(--s4) var(--s9); gap: 22px }
}
/* ── the message box: where the person asks ──────────────────────────────────────
It floats at the chat's foot: + holds adding a file, pictures and keeping a secret; then the box itself, glass, with
Talk in it, or Send once there are words, or Stop while Alex works. A new chat names its AI and project in chips. */
.composer { position: relative; width: 100%; max-width: var(--measure); display: flex; flex-direction: column; gap: 10px; margin: 0 auto }
.composer-row { display: flex; align-items: flex-end; gap: var(--s2) }
.composer-row > .btn.icon { flex: none }
.composer-field { flex: 1; min-width: 0; min-height: var(--hit); display: flex; flex-direction: column; gap: var(--s2); padding: 4px 4px 4px 16px; border-radius: 22px }
.composer-line { display: flex; align-items: flex-end; gap: var(--s2) }
.composer textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 240px; padding: 6px 0; border: 0; outline: 0; resize: none; background: transparent; font-size: var(--size-read);
line-height: var(--line-read); letter-spacing: var(--track-read) }
.composer textarea::placeholder { color: var(--ink-3) }
/* Typed in, the box lifts a little; its caret is where the words go, so it draws no ring. */
.composer-field:focus-within { box-shadow: 0 8px 24px var(--shade-2), 0 1px 3px var(--shade-1) }
.go { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--strong); color: var(--on-strong);
transition: transform var(--quick) var(--ease), background-color var(--quick) var(--ease) }
.go:active { transform: scale(.92) }
.go > .i { width: 18px; height: 18px }
.go.stop { background: var(--ink); color: var(--ground) }
.go:disabled { opacity: .4 }
.composer-choices { display: flex; flex-wrap: wrap; gap: var(--s2); padding-left: calc(var(--hit) + var(--s2)) }
.chip { max-width: 100%; min-height: var(--control-small); display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 18px; background: var(--fill);
font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout); font-weight: 500 }
button.chip, a.chip { cursor: pointer }
.chip.glass { background: var(--glass) }
.chip > .logo { width: 16px; height: 16px }
.chip > .i { width: 16px; height: 16px }
.chip > .i-down { width: 13px; height: 13px; color: var(--ink-2) }
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chip > .thing { margin-left: -6px }
.chip:has(> .btn) { padding-right: 2px }
/* What is being sent sits in the box above the words, each a chip with a way to take it back. */
.composer-field > .cluster:not([hidden]) { padding-top: var(--s2) }
/* The lock, above the words: each secret's name and the secret itself, kept on the worker and never in the chat. */
.lock { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) var(--s2) 0 0 }
.lock-row { display: flex; align-items: flex-start; gap: var(--s3) }
.lock-row > .i { margin-top: 11px; color: var(--ink-2) }
.lock-fields { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s2) }
.lock-fields > .input, .lock-fields > .row-text { flex: 1 1 12em; min-height: 40px }
.lock-fields > .row-text { justify-content: center }
.lock > .meta { padding-left: calc(var(--icon) + var(--s3)) }
/* ── a chat's words ─────────────────────────────────────────────────────────────
The person's words on the right, in the one green, what they sent above them. The answer as the AI gave it, with
nothing of ours around it: the work behind it folded to one line above it, and under it only the files its words
name. When it was said is at the top of each day, and holding a message says it. */
.messages { max-width: calc(var(--measure) + 2 * var(--s7)); display: flex; flex-direction: column; gap: 20px; margin: 0 auto; padding: var(--s5) var(--s7) var(--s6) }
.daystamp { align-self: center; font-size: var(--size-meta); line-height: var(--line-meta); letter-spacing: var(--track-meta); color: var(--ink-3) }
.daystamp > b { font-weight: var(--w-strong) }
.said { max-width: min(84%, 560px); align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.sent { max-width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px }
.sent > .chip { min-height: 44px; padding: 6px 14px 6px 6px; border-radius: var(--r3); background: var(--raised); font-weight: var(--w-strong) }
.sent > .chip > .thing { margin: 0 }
.bubble { padding: 10px 14px; border-radius: 20px; background: var(--strong); color: var(--on-strong); line-height: var(--line-read); overflow-wrap: anywhere }
.bubble > * + * { margin-top: var(--s2) }
.bubble a { color: inherit; text-decoration: underline }
/* A message sent while Alex works waits its turn at the end of the chat, outlined, with the two hands on it. */
.said.waiting > .bubble { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--fill-strong) }
.waits { display: flex; align-items: center; gap: var(--s4); font-size: var(--size-meta); line-height: var(--line-meta); color: var(--ink-2) }
.waits > button { min-height: 32px; padding: 0; border: 0; background: none; font-weight: var(--w-strong); color: var(--accent) }
/* A schedule's run, a call and another chat's message are never the person's: each sits on the worker's side, quiet,
under who asked. */
.said.from { max-width: min(100%, var(--measure)); align-self: flex-start; align-items: flex-start }
.said.from > .who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-meta); line-height: var(--line-meta); color: var(--ink-2) }
.said.from > .who > .i { width: 15px; height: 15px }
.said.from > .who > strong { font-weight: var(--w-strong) }
.said.from > .prose { padding: 10px 14px; border-radius: 20px; background: var(--raised) }
.reply { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0 }
.reply > * { max-width: 100% }
/* What the AI did, folded to one line: "Worked for 2 minutes". Opened, its steps, the thinking first. */
.fold { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ink-2);
font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout) }
.fold::after { content: ""; position: absolute; inset: -6px -8px }
.fold { position: relative }
.fold > .i { width: 13px; height: 13px; transition: transform var(--calm) var(--ease) }
.fold[aria-expanded="true"] > .i { transform: rotate(90deg) }
.fold:hover { color: var(--ink) }
.steps { margin-top: -4px; border-radius: var(--r3); background: var(--raised); overflow: hidden; animation: rise var(--calm) var(--ease) }
.steps > .row { min-height: 52px; padding: 8px 14px 8px 12px; border-radius: 0 }
.steps > .row > .i { width: 22px; color: var(--ink-2) }
.steps > .row + .row::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: .5px; background: var(--edge) }
.steps .row-text > .meta { -webkit-line-clamp: 1; display: block; white-space: nowrap }
.steps > .prose { padding: var(--s3) var(--s4) var(--s4) 48px; color: var(--ink-2); font-size: var(--size-callout); line-height: var(--line-callout) }
/* The answer, read looser. */
.reply > .prose { line-height: var(--line-prose) }
.prose ul { list-style: disc; padding-left: 22px }
.prose ol { list-style: decimal; padding-left: 22px }
.prose li + li { margin-top: 6px }
.prose li::marker { color: var(--ink-2) }
.prose code { font-family: var(--mono); font-size: .88em; padding: .1em .3em; border-radius: 6px; background: var(--fill) }
.prose pre code { padding: 0; background: none }
.prose h1, .prose h2, .prose h3 { font-size: var(--size-read); line-height: var(--line-read); font-weight: var(--w-display) }
.prose h1 { font-size: var(--size-title-2); line-height: var(--line-title-2) }
.prose blockquote { margin: 0; padding-left: var(--s3); box-shadow: inset 3px 0 0 var(--fill-strong); color: var(--ink-2) }
.prose hr { border: 0; height: .5px; background: var(--edge) }
.table-scroll { max-width: 100%; overflow-x: auto }
.prose table { border-collapse: collapse; font-size: var(--size-callout); line-height: var(--line-callout) }
.prose th, .prose td { padding: 6px var(--s3); text-align: left; vertical-align: top; box-shadow: inset 0 -.5px 0 var(--edge) }
.prose th { font-weight: var(--w-strong) }
.code-block { border-radius: var(--r3); background: var(--raised); overflow: hidden }
.code-block > .row { min-height: 40px; padding: 2px var(--s2) 2px var(--s4) }
.code-block > pre { margin: 0; padding: 0 var(--s4) var(--s4); overflow: auto; font: var(--size-meta)/var(--line-meta) var(--mono) }
/* What it thought, quieter than what it answered. */
.reply.thinking > .prose { color: var(--ink-2) }
/* Alex at work: between its brackets, which breathe, the step it is on shimmering beside it, and the helpers it handed
part of the work to under it. */
.live { display: flex; align-items: center; gap: var(--s3); padding: 0; border: 0; background: none; text-align: left }
.live > .lockup { --size: var(--pic-s) }
.live-words { display: flex; flex-direction: column; min-width: 0 }
.live-words > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.live-words > .meta { font-size: var(--size-meta) }
.shimmer { background: linear-gradient(100deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 35%, transparent) 50%, var(--ink) 70%) 0 0 / 300% 100%;
-webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer var(--breath) linear infinite }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
.helper { display: flex; align-items: center; gap: var(--s3); margin-left: 56px; padding: 10px 14px 10px 10px; border-radius: var(--r3); background: var(--raised) }
.helper > .row-text > * { white-space: normal }
/* A notice in the chat, said once where it happened: orange for a limit, never red. */
.band { display: flex; align-items: flex-start; gap: var(--s3); padding: 14px var(--s4); border-radius: var(--r3); background: var(--fill);
font-size: var(--size-callout); line-height: var(--line-callout); letter-spacing: var(--track-callout) }
.band > .i { margin-top: -1px; color: var(--ink-2) }
.band.warn { background: var(--warn-soft) }
.band.warn > .i { color: var(--warn) }
.band > .stack { --gap: 2px }
.band .meta { font-size: var(--size-callout); line-height: var(--line-callout) }
/* A question the AI asked: its own words, and its options as one group of rows in the one colour, the first its
leaning. A pick is ticked and waits for Send answer, so a slip of the thumb is never sent. */
.question { display: flex; flex-direction: column; gap: 12px; max-width: var(--measure) }
.options { display: flex; flex-direction: column; border-radius: var(--r3); background: var(--raised); overflow: hidden }
.option { position: relative; min-height: 50px; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); color: var(--accent); cursor: pointer;
transition: background-color var(--quick) var(--ease) }
.option:hover { background: var(--fill) }
.option + .option::before { content: ""; position: absolute; top: 0; left: var(--s4); right: 0; height: .5px; background: var(--edge) }
.option > input { position: absolute; opacity: 0; pointer-events: none }
.option:has(> input:focus-visible) { box-shadow: inset 0 0 0 3px var(--focus) }
.option-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.option-words > .meta { color: var(--ink-2) }
.options > .option:first-child .option-words > strong { font-weight: var(--w-strong) }
.option-words > strong { font-weight: var(--w-text) }
.option > .option-check { opacity: 0; color: var(--accent); transition: opacity var(--quick) var(--ease) }
.option:has(> input:checked) { background: var(--accent-soft) }
.option:has(> input:checked) > .option-check { opacity: 1 }
/* Holding a message: it lifts, the page dims, and its menu says when it was said and what can be done with it. */
.held { position: fixed; z-index: 46; margin: 0; padding: 14px var(--s4); border-radius: var(--r3); background: var(--float); box-shadow: var(--lift-3); overflow: hidden; pointer-events: none }
.held.bubble { padding: 10px 14px; border-radius: 20px; background: var(--strong) }
.held-scrim { position: fixed; z-index: 45; inset: 0; background: var(--backdrop); animation: fade var(--calm) var(--ease) }
/* ── a file ─────────────────────────────────────────────────────────────────────
Wherever a file is shown - in a chat, in Files, on a page - it is the same: its kind's tile, its name, what it is,
and the way in. A picture, a page or a film rests in its tray above its row. */
.file { max-width: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r3); background: var(--raised); color: inherit }
.file > .row { min-height: 64px; padding: 12px 14px 12px 12px; border-radius: 0 }
.file > .row > .row-text > .meta { font-size: var(--size-meta); line-height: var(--line-meta) }
a.file, .file > a.row { cursor: pointer }
a.file:hover, .file > a.row:hover { background: color-mix(in srgb, var(--raised), var(--ink) 4%) }
.file-view { height: 196px; display: flex; justify-content: center; overflow: hidden; margin: 6px 6px 0; border-radius: 12px; background: var(--ground) }
.file-view > img { width: 100%; height: 100%; object-fit: cover }
.file-view > iframe, .file-view > video { width: 100%; height: 100%; border: 0 }
.file-view:has(> audio) { height: auto; padding: var(--s3); background: none }
.file-view > audio { width: 100% }
/* A payment, a file's kin: its QR code whole in the tray, then how much and to whom, and its apps. */
.file.payment > .file-view { height: 232px; padding: var(--s4); align-items: center; background: #fff }
.file.payment > .file-view > img { width: auto; height: 100%; object-fit: contain }
.file.payment > p, .file.payment > .cluster { padding: 0 var(--s4) var(--s4) }
/* The picture of a page, whole, where there is room to read it. */
.page-view { display: grid; place-items: start center; padding: var(--s6); background: var(--sunk); overflow: auto }
.page-view > img { width: min(100%, 420px); border-radius: 3px; box-shadow: 0 0 0 .5px var(--edge), 0 12px 32px -8px var(--shade-2) }
/* ── a menu: the one floating list ──────────────────────────────────────────────
Glass, its rows parted by hairlines, each its words and then its glyph. */
.menu { min-width: 250px; max-height: min(80dvh, 620px); display: flex; flex-direction: column; padding: 0; border-radius: var(--r3); overflow: auto; background: var(--glass);
-webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: var(--lift-3); animation: rise var(--calm) var(--ease) }
.menu > .row { min-height: 48px; border-radius: 0; gap: var(--s3) }
.menu > .row + .row::before, .menu > * + .row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--edge) }
.menu > .row > .i { order: 2; margin-left: auto; width: 20px; height: 20px; color: var(--ink) }
.menu > .row > .i.check { color: var(--accent) }
.menu > .row.danger, .menu > .row.danger > .i { color: var(--danger) }
.menu > .row[aria-disabled="true"], .menu > .row[aria-disabled="true"] > .i { color: var(--ink-3); cursor: default }
.menu > .row.tall:first-child { min-height: 36px; padding-block: var(--s2); color: var(--ink-2); font-size: var(--size-meta); cursor: default }
.menu > .row.tall:first-child strong { font-weight: var(--w-text) }
.menu-gap { height: 8px; flex: none; background: var(--fill) }
.menu > .sidebar-label { min-height: 32px; padding: var(--s2) var(--s4) var(--s1) }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .menu, .glass { background: var(--float) } }
/* ── a dialog: the one question over the page ─────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: var(--s4); background: var(--backdrop); animation: fade var(--calm) var(--ease) }
.dialog { width: min(480px, 100%); max-height: calc(100dvh - 2 * var(--s4)); display: flex; flex-direction: column; gap: var(--s5); overflow: auto; padding: var(--s6);
border-radius: var(--r5); background: var(--float); box-shadow: var(--lift-3); animation: rise var(--calm) var(--ease) }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) }
.dialog-head h2 { font-size: var(--size-title-2); line-height: var(--line-title-2); letter-spacing: var(--track-title-2); font-weight: var(--w-display) }
.dialog-head > .btn { margin: calc(-1 * var(--s2)) calc(-1 * var(--s2)) 0 0 }
.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2) }
.dialog .list > .row { border-radius: var(--r2) }
/* On a phone every question rises from the bottom, the width of the screen, where the thumb is. */
@media (max-width: 900px) {
.scrim { place-items: end stretch; padding: 0 }
.dialog { width: 100%; max-height: 92dvh; border-radius: var(--r4) var(--r4) 0 0; padding: var(--s5) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom, 0px)); animation: sheet-up var(--slow) var(--ease) }
.dialog-foot { flex-direction: column-reverse; align-items: stretch }
.dialog-foot > .btn { width: 100% }
}
@keyframes sheet-up { from { transform: translateY(100%) } }
/* What will be chosen, large, at the top of a chooser. */
.preview { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s2) 0 }
/* ── a chooser: faces, pictures, icons and colours; what is chosen wears the one colour's ring ── */
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s2) }
.choice { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: var(--s2); border: 0; border-radius: var(--r3); background: transparent;
transition: background-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease) }
.choice:hover { background: var(--fill) }
.choice[aria-checked="true"] { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent) }
.choice > .pic, .choice > .tile { --size: 100% }
.choice > .i { width: 26px; height: 26px; color: var(--ink-2) }
.choice[aria-checked="true"] > .i { color: var(--accent) }
.choices.round .choice { border-radius: 50% }
.swatches { display: flex; flex-wrap: wrap; gap: var(--s1) }
.swatch { --c: var(--id-iris); position: relative; width: var(--hit); height: var(--hit); display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent }
.swatch::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--c) }
.swatch[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--c) }
.swatch.jade { --c: var(--id-jade) }
.swatch.sky { --c: var(--id-sky) }
.swatch.iris { --c: var(--id-iris) }
.swatch.rose { --c: var(--id-rose) }
.swatch.honey { --c: var(--id-honey) }
.swatch.moss { --c: var(--id-moss) }
.swatch.sand { --c: var(--id-sand) }
.swatch.graphite { --c: var(--id-graphite) }
/* A few words to pick one of, in a row that wraps. */
.picks { display: flex; flex-wrap: wrap; gap: var(--s2) }
.picks > .btn { background: var(--fill); color: var(--ink) }
.picks > .btn[aria-checked="true"] { background: var(--strong); color: var(--on-strong) }
/* ── a segment: a few choices side by side; the chosen one sits lifted ─────────── */
.segment { display: flex; gap: 0; padding: 2px; border-radius: 10px; background: var(--fill) }
.segment > .btn { flex: 1; min-height: 32px; padding: 0 var(--s3); border-radius: 8px; background: transparent; color: var(--ink); font-size: var(--size-callout); font-weight: 500 }
.segment > .btn:hover { background: transparent }
.segment > .btn[aria-pressed="true"], .segment > .btn[aria-checked="true"] { background: var(--chosen); box-shadow: 0 1px 4px var(--shade-2), 0 0 0 .5px var(--glass-edge); font-weight: var(--w-strong) }
.segment > .btn::after { inset: -6px 0 }
/* ── a switch: on is the one colour ──────────────────────────────────────────── */
.switch { position: relative; width: 51px; height: 31px; flex: none; margin: 0; appearance: none; border-radius: 16px; background: var(--fill-strong); cursor: pointer;
transition: background-color var(--calm) var(--ease) }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 1px 1px rgb(0 0 0 / .16);
transition: transform var(--calm) var(--ease) }
.switch:checked { background: var(--accent) }
.switch:checked::after { transform: translateX(20px) }
/* ── a page alone ───────────────────────────────────────────────────────────────
Signing in, a link that cannot be used, a worker opening: one column in the middle of the grey, on a white card where
the window has room, its title, a line or a form, and the one thing to do. */
.alone { min-height: 100dvh; display: grid; place-items: center; padding: var(--s7) var(--s4); background: var(--grouped) }
.alone-inner { width: min(var(--alone), 100%); display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center }
.alone-inner > h1 { font-size: var(--size-title); line-height: var(--line-title); letter-spacing: var(--track-title) }
.alone-inner > p { color: var(--ink-2); text-wrap: balance }
.alone-inner > .lockup { --size: var(--pic-l); margin-bottom: var(--s2) }
.alone-inner > .thing { margin-bottom: var(--s2) }
.alone-inner > form { width: 100%; display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s2); text-align: left }
.alone-inner > form > .btn:first-of-type { margin-top: var(--s3) }
.alone-inner .fields { background: var(--grouped-card) }
.alone-inner.card { padding: 0; background: none }
@media (min-width: 601px) {
.alone-inner.card { width: min(calc(var(--alone) + 2 * var(--s7)), 100%); gap: var(--s5); padding: 36px var(--s7) 28px; border-radius: var(--r5); background: var(--grouped-card); box-shadow: var(--lift-2) }
.alone-inner.card .fields { background: var(--raised) }
}
/* [wrkr], as the website's own bar has it, over the shop: the word in its mono, the brackets in green around it. */
.brand { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); font: var(--w-strong) var(--size-title)/1 var(--mono); letter-spacing: -.067em }
.brand::before, .brand::after { font-weight: var(--w-text); color: var(--jade) }
.brand::before { content: "["; content: "[" / "" }
.brand::after { content: "]"; content: "]" / "" }
/* ── the way in: a worker comes in a box ────────────────────────────────────────
The shop and the welcome keep the brand as it is: the box in the brand's own colours, what is printed on it, its
butter button and its label. Nowhere else in the product wears them.
The kind of box people film themselves opening: shut in the shop with the worker in its window, open on
the welcome, where the worker has jumped out. Drawn in 3D by the page alone. As its page opens it comes down
onto its shadow, and then it floats a little and shakes when tapped; the welcome's knocks until it is opened.
Still where motion is not wanted. The page lays the box out; the box sizes itself. */
.box { --w: 340px; --h: 470px; --d: 150px; position: relative; isolation: isolate; display: grid; place-items: center; min-height: calc(var(--h) + 140px); perspective: 1700px }
.box::after { content: ""; position: absolute; z-index: -2; left: 50%; bottom: calc(50% - var(--h) / 2 - 36px); width: calc(var(--w) * 1.3); height: 64px; translate: -58% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--shade-3), transparent); filter: blur(6px) }
.box-3d { --turn: rotateX(-4deg) rotateY(-28deg); position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: var(--turn); animation: box-float 6s var(--ease-both) infinite }
.box-3d > * { position: absolute; border-radius: 10px; overflow: hidden }
.box-front { inset: 0; transform: translateZ(calc(var(--d) / 2)); display: flex; flex-direction: column; align-items: center; padding: calc(var(--w) * .076) calc(var(--w) * .076) calc(var(--w) * .07); color: var(--butter);
background: linear-gradient(160deg, color-mix(in srgb, var(--jade) 86%, white), var(--jade) 45%, color-mix(in srgb, var(--jade) 74%, black)) }
.box-side { top: 0; left: calc((var(--w) - var(--d)) / 2); width: var(--d); height: var(--h); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); padding: calc(var(--w) * .076) calc(var(--d) * .12); color: var(--butter);
background: linear-gradient(180deg, color-mix(in srgb, var(--jade) 80%, black), color-mix(in srgb, var(--jade) 64%, black)) }
.box-top { left: 0; top: calc((var(--h) - var(--d)) / 2); width: var(--w); height: var(--d); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: linear-gradient(90deg, color-mix(in srgb, var(--jade) 78%, white), var(--jade)) }
.box-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: color-mix(in srgb, var(--jade) 62%, black) }
/* What is printed on it: [wrkr], the worker's window and name, and on its side what is inside. */
.box-mark { font: var(--w-strong) calc(var(--w) * .076)/1 var(--mono); letter-spacing: -.07em }
.box-mark::before { content: "["; content: "[" / ""; color: var(--mint); font-weight: var(--w-text) }
.box-mark::after { content: "]"; content: "]" / ""; color: var(--mint); font-weight: var(--w-text) }
.box-window { position: relative; margin-top: 6%; width: 100%; aspect-ratio: 1 / .92; border-radius: calc(var(--w) * .076); overflow: hidden;
background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--mint) 8%, white), color-mix(in srgb, var(--mint) 38%, white) 70%, color-mix(in srgb, var(--mint) 58%, white));
box-shadow: inset 0 0 0 3px rgb(255 255 255 / .55), inset 0 10px 30px color-mix(in srgb, var(--jade) 40%, transparent) }
.box-window > .alive { position: absolute; left: 50%; top: 50%; width: 82%; translate: -50% -48% }
.box-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 38%, transparent 46%, transparent 62%, rgb(255 255 255 / .28) 68%, transparent 74%) }
.box-name { margin-top: auto; font: 700 calc(var(--w) * .19)/.9 var(--font); letter-spacing: -.05em }
.box-kind { margin-top: calc(var(--w) * .024); font: var(--w-strong) calc(var(--w) * .035)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--butter) 45%, white) }
.box-side > b { font: 700 calc(var(--w) * .038)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase }
.box-side > span { display: block; margin-top: calc(var(--w) * .035); font: var(--w-strong) calc(var(--w) * .041)/1.3 var(--font) }
.box-side > span::before { content: "["; content: "[" / ""; margin-right: 4px; color: var(--mint) }
.box-side > span::after { content: "]"; content: "]" / ""; margin-left: 4px; color: var(--mint) }
/* The worker between the brackets of [wrkr], as wrkr.dev draws it: in its 3D model the mark is 2.82 by 2.30, each
bracket 0.78 by 2.36 and the worker 2.24 square between them. Its eyes are drawn here, so ui/kit.js can keep it
alive: it breathes, blinks and looks about. */
.alive { position: relative; display: block; aspect-ratio: 2.82 / 2.3; pointer-events: none; user-select: none; -webkit-user-select: none }
.alive-br { position: absolute; top: -1.3%; width: 27.66%; height: 102.6% }
.alive-br.l { left: -1.06% } .alive-br.r { right: -1.06% }
.alive-wk { position: absolute; left: 10.28%; top: 1.3%; width: 79.43%; aspect-ratio: 1 }
.alive-in { position: absolute; inset: 0; transform-origin: 50% 90% }
.alive-in > img { display: block; width: 100%; height: 100% }
.alive-in > i { position: absolute; top: 41.95%; left: 31.25%; width: 11.61%; height: 17.86%; border-radius: 99px; background: #fff }
.alive-in > i + i { left: 57.15% }
/* The price, as the sticker on the box. */
.sticker { position: absolute; z-index: 2; left: calc(50% - var(--w) * .76); top: calc(50% - var(--h) * .6); width: calc(var(--w) * .37); aspect-ratio: 1; border-radius: 50%; rotate: -14deg;
display: grid; place-content: center; text-align: center; color: var(--on-butter); box-shadow: 0 10px 24px -8px var(--shade-3);
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--butter) 40%, white), var(--butter) 60%, color-mix(in srgb, var(--butter) 86%, black)) }
.sticker > b { font: 700 calc(var(--w) * .11)/1 var(--font); letter-spacing: -.04em }
.sticker > small { font: var(--w-strong) calc(var(--w) * .036)/1.25 var(--font) }
/* Opened: seen from above, standing on the floor, the worker out and the lid leaning on it. On the welcome it
stays shut until the person opens it with the page's one button, a details element, so it opens with no
script as well. */
.box.open { --h: calc(var(--w) * .68); --d: calc(var(--w) * .5); place-items: end center; padding-bottom: 76px; min-height: calc(var(--h) + var(--w) * 1.05 + 110px) }
.box.open::after { bottom: 44px }
.box.open .box-3d { --turn: rotateX(-16deg) rotateY(-26deg); animation: none }
.box.open .box-top { background: radial-gradient(70% 80% at 50% 50%, color-mix(in srgb, var(--mint) 60%, white), color-mix(in srgb, var(--jade) 80%, white)); box-shadow: inset 0 0 0 calc(var(--w) * .03) color-mix(in srgb, var(--jade) 88%, white) }
.box-alex { position: absolute; z-index: 2; left: 50%; bottom: calc(76px + var(--h) * .72); width: calc(var(--w) * .97); translate: -50% 0; rotate: -7deg; filter: drop-shadow(0 24px 26px var(--shade-3));
transition: opacity var(--slow) var(--ease), translate 700ms var(--spring), scale 700ms var(--spring) }
.box-light { position: absolute; z-index: 1; left: 50%; bottom: calc(76px + var(--h) + var(--d) * .12); width: calc(var(--w) * 1.5); aspect-ratio: 1; translate: -50% 50%; border-radius: 50%; opacity: 0; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--mint) 45%, white), color-mix(in srgb, var(--mint) 30%, transparent) 45%, transparent) }
.box-lid { position: absolute; z-index: -1; left: calc(50% + var(--w) * .18); bottom: 36px; width: calc(var(--w) * .8); height: calc(var(--w) * .38); border-radius: 10px; rotate: 16deg; display: grid; place-items: center;
background: linear-gradient(160deg, color-mix(in srgb, var(--jade) 80%, white), var(--jade)); box-shadow: 0 14px 30px -12px var(--shade-3); transition: opacity var(--slow) var(--ease), translate 600ms var(--ease) }
.box-lid > span { font: var(--w-strong) calc(var(--w) * .09)/1 var(--mono); letter-spacing: -.07em; color: var(--butter) }
.box-lid > span::before { content: "["; content: "[" / ""; color: var(--mint); font-weight: var(--w-text) }
.box-lid > span::after { content: "]"; content: "]" / ""; color: var(--mint); font-weight: var(--w-text) }
.box-pops { position: absolute; z-index: 1; left: 50%; bottom: calc(76px + var(--h) * .55); width: calc(var(--w) * 1.55); height: calc(var(--w) * 1.25); translate: -50% 0; pointer-events: none; transition: opacity var(--calm) var(--ease) 350ms, scale 500ms var(--spring) 350ms }
.box-pops > i { position: absolute; width: calc(var(--w) * .11); height: calc(var(--w) * .02); border-radius: 9px; background: var(--butter) }
.box-pops > i:nth-child(1) { left: 6%; top: 34%; rotate: -24deg } .box-pops > i:nth-child(2) { left: 2%; top: 50%; rotate: 4deg } .box-pops > i:nth-child(3) { left: 8%; top: 66%; rotate: 28deg }
.box-pops > i:nth-child(4) { right: 6%; top: 30%; rotate: 24deg } .box-pops > i:nth-child(5) { right: 2%; top: 46%; rotate: -4deg } .box-pops > i:nth-child(6) { right: 9%; top: 62%; rotate: -30deg }
.box-says { position: absolute; z-index: 3; left: calc(50% + var(--w) * .3); bottom: calc(76px + var(--h) * .72 + var(--w) * .86); padding: var(--s3) var(--s4); border-radius: var(--r3) var(--r3) var(--r3) 6px; transform-origin: 0 100%;
background: var(--raised); color: var(--ink); font: var(--w-strong) 20px/1.2 var(--font); letter-spacing: -.02em; white-space: nowrap; box-shadow: var(--lift-2);
transition: opacity var(--calm) var(--ease) 550ms, translate 500ms var(--spring) 550ms }
:root:has(details.unbox:not([open])) .box.open { cursor: pointer }
:root:has(details.unbox:not([open])) .box.open .box-top { background: linear-gradient(90deg, color-mix(in srgb, var(--jade) 78%, white), var(--jade)); box-shadow: none }
:root:has(details.unbox:not([open])) .box-alex { opacity: 0; translate: -50% 40%; scale: .6 }
:root:has(details.unbox:not([open])) .box-lid { opacity: 0; translate: 0 -120px }
:root:has(details.unbox:not([open])) .box-pops { opacity: 0; scale: .4; transition-delay: 0s }
:root:has(details.unbox:not([open])) .box-says { opacity: 0; translate: 0 12px; transition-delay: 0s }
details.unbox > summary { list-style: none }
details.unbox > summary::-webkit-details-marker { display: none }
details.unbox[open] > summary { display: none }
/* Small, beside what a page says while the worker is on its way. */
.box.small { --w: 150px; --h: 208px; --d: 66px; min-height: calc(var(--h) + 48px) }
.box.small::after { bottom: calc(50% - var(--h) / 2 - 22px); height: 30px }
.box.shake .box-3d { animation: box-shake 520ms var(--ease-both) }
/* Arriving, as a page of the way in first opens: the box comes down onto its shadow, the worker in its window
gives with the landing and the price is stuck on. A page answering what it was asked, or open already, is
simply there. */
:root:not(:has(.shipping [autofocus], details.unbox[open])) .box:not(.small) { animation: fade 450ms var(--ease) backwards }
:root:not(:has(.shipping [autofocus], details.unbox[open])) .box:not(.small)::after { animation: box-floor 700ms var(--ease) backwards }
:root:not(:has(.shipping [autofocus], details.unbox[open])) .box:not(.small, .open) > .box-3d { animation: box-down 700ms var(--ease) backwards, box-float 6s var(--ease-both) 700ms infinite }
:root:not(:has(.shipping [autofocus], details.unbox[open])) .box.open > .box-3d { animation: box-down 700ms var(--ease) backwards, box-knock 5s var(--ease-both) 1.6s infinite }
:root:not(:has(.shipping [autofocus], details.unbox[open])) .box:not(.small) .box-window .alive-in { animation: worker-land 640ms var(--ease-both) 520ms }
:root:not(:has(.shipping [autofocus], details.unbox[open])) .sticker { animation: sticker-on 380ms cubic-bezier(.3, .9, .3, 1) 640ms backwards }
/* Opened with a tap (ui/kit.js), the box plays its own short film: it gives a little, the lid pops off and
lands leaning on it, light comes out, and the worker jumps out with its eyes shut; as it lands its brackets
open out from behind it to hold it, and it says hello; then what the page asks rises into place. kit.js
measures where the lid and the box's edge are drawn: --lid-x, --lid-y, --lid-sx, --lid-sy and --rim. */
.box.opening :is(.box-alex, .box-lid, .box-pops, .box-says) { transition: none }
.box.opening .box-3d { animation: box-give 520ms var(--ease-both) }
.box.opening .box-lid { animation: lid-off 820ms linear 80ms backwards }
.box.opening .box-light { animation: box-light 1400ms var(--ease) 100ms backwards }
.box.opening .box-alex .alive-wk { animation: jump-out 860ms linear 150ms backwards }
.box.opening .box-alex .alive-in { animation: jump-shape 860ms linear 150ms backwards }
.box.opening .box-alex .alive-br.l { animation: hug-l 600ms var(--spring) 790ms backwards }
.box.opening .box-alex .alive-br.r { animation: hug-r 600ms var(--spring) 790ms backwards }
.box.opening .box-pops { animation: pops 560ms var(--spring) 820ms backwards }
.box.opening .box-says { animation: says 480ms var(--spring) 1100ms backwards }
:root:has(.box.opening) details.unbox > .stack { animation: rise 460ms var(--ease) 720ms backwards }
/* Tapped once it is out, it says hello again. */
.box.greet .box-says { animation: says 420ms var(--spring) }
@keyframes box-float { 50% { translate: 0 -8px; rotate: y 5deg } }
@keyframes box-shake { 20% { rotate: z -5deg } 40% { rotate: z 4deg } 60% { rotate: z -3deg } 80% { rotate: z 2deg } }
@keyframes box-down { from { translate: 0 -56px } }
@keyframes box-floor { from { opacity: 0; scale: .55 } }
@keyframes box-knock { 0% { translate: 0 0 } 3% { translate: 0 -12px; rotate: z -2deg } 6% { translate: 0 0; rotate: z 0deg } 9% { translate: 0 -6px; rotate: z 1.5deg } 12%, 100% { translate: 0 0; rotate: z 0deg } }
@keyframes worker-land { 28% { scale: 1.09 .9 } 60% { scale: .97 1.03 } }
@keyframes sticker-on { from { opacity: 0; scale: 2.4; rotate: -48deg } }
@keyframes box-give { 22% { scale: 1.035 .94; translate: 0 calc(var(--h) * .03) } 55% { scale: .99 1.015; translate: 0 calc(var(--h) * -.008) } }
@keyframes lid-off {
0% { z-index: 3; translate: var(--lid-x) var(--lid-y); scale: var(--lid-sx) var(--lid-sy); rotate: -3deg; animation-timing-function: cubic-bezier(.25, .7, .45, 1) }
36% { z-index: 3; translate: calc(var(--lid-x) * .55) calc(var(--lid-y) - var(--w) * .38); scale: .95; rotate: 34deg; animation-timing-function: cubic-bezier(.55, 0, .85, .45) }
37% { z-index: -1 }
82% { translate: 0 0; scale: 1; rotate: 19deg; animation-timing-function: var(--ease) }
100% { translate: 0 0; scale: 1; rotate: 16deg }
}
@keyframes box-light { 0% { opacity: 0; scale: .4 } 18% { opacity: 1 } 100% { opacity: 0; scale: 1.25 } }
@keyframes jump-out {
0% { translate: 0 calc(var(--rim) * 100%); clip-path: inset(-50% -50% 100% -50%); animation-timing-function: cubic-bezier(.15, .6, .35, 1) }
46% { translate: 0 -30%; clip-path: inset(-50% -50% calc(70% - var(--rim) * 100%) -50%); animation-timing-function: cubic-bezier(.5, 0, .9, .5) }
47% { clip-path: inset(-50%) }
78%, 100% { translate: 0 0; clip-path: inset(-50%) }
}
@keyframes jump-shape { 0% { scale: .82 1.16 } 36% { scale: .94 1.06 } 46% { scale: 1 } 72% { scale: .94 1.07 } 78% { scale: 1.18 .82; animation-timing-function: var(--ease) } 88% { scale: .96 1.05 } 100% { scale: 1 } }
@keyframes hug-l { from { opacity: 0; translate: 115% 0; scale: .3; rotate: 30deg } 25% { opacity: 1 } }
@keyframes hug-r { from { opacity: 0; translate: -115% 0; scale: .3; rotate: -30deg } 25% { opacity: 1 } }
@keyframes pops { from { opacity: 0; scale: .3 } }
@keyframes says { from { opacity: 0; scale: .6; translate: 0 14px } }
@media (max-width: 600px) {
.box { --w: 216px; --h: 298px; --d: 95px; min-height: calc(var(--h) + 96px) }
.box-says { left: auto; right: var(--s3); font-size: 16px }
.box.open { --w: 210px }
.box-lid { left: calc(50% + var(--w) * .06) }
.box.small { --w: 132px; --h: 183px; --d: 58px }
}
/* The way in's first title, at wrkr.dev's size; with what follows it, it rises in turn as the page first opens. */
h1.big { font-size: clamp(38px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.04em }
:root:not(:has(.shipping [autofocus], details.unbox[open])) :is(h1.big, h1.big ~ *) { animation: words-up 720ms var(--ease) 160ms backwards }
:root:not(:has(.shipping [autofocus], details.unbox[open])) h1.big + * { animation-delay: 250ms }
:root:not(:has(.shipping [autofocus], details.unbox[open])) h1.big + * + * { animation-delay: 340ms }
:root:not(:has(.shipping [autofocus], details.unbox[open])) h1.big + * + * ~ * { animation-delay: 430ms }
@keyframes words-up { from { opacity: 0; translate: 0 .6em } }
/* What a person fills in on the way in, as the delivery label on the box: paper, a dashed edge just inside,
and the line across its top that says what it is for. */
.shipping { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5) var(--s6) var(--s6); border-radius: var(--r3); background: var(--raised); box-shadow: var(--lift-2);
outline: 1.5px dashed color-mix(in srgb, var(--ink-3) 40%, transparent); outline-offset: -9px; text-align: left }
.shipping-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1.5px dashed color-mix(in srgb, var(--ink-3) 40%, transparent);
font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase }
.shipping-head::after { content: ""; flex: none; width: 110px; height: 24px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 12px) }
.alone-inner.shipping { width: min(calc(var(--alone) + 2 * var(--s7)), 100%); padding: var(--s7) var(--s7) var(--s7); align-items: center; text-align: center }
.alone-inner.shipping > form { text-align: left }
/* The way in's one button, in wrkr.dev's butter. */
.btn.butter { min-height: calc(var(--control) + 8px); background: linear-gradient(180deg, color-mix(in srgb, var(--butter) 55%, white), var(--butter)); color: var(--on-butter);
font-family: var(--font); font-weight: var(--w-strong); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 1px 2px var(--shade-1), 0 10px 24px -10px color-mix(in srgb, var(--butter) 70%, black) }
.btn.butter:hover { background: var(--butter) }
/* What is in the box, as its packing list. */
.packing { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--s2) var(--s6) }
.packing > li { display: flex; align-items: center; gap: var(--s2); font-weight: var(--w-strong) }
.packing > li > .i { flex: none; color: var(--accent) }
@media (max-width: 600px) { .packing { grid-template-columns: minmax(0, 1fr) } }
/* ── the screen: a worker's own desktop, as it is right now, in its frame ────────── */
.screen-view { flex: 1; min-height: 0; display: grid; place-items: center; padding: var(--s3); background: var(--sunk) }
.screen-view > img { max-width: 100%; max-height: 100%; border-radius: var(--r1); box-shadow: 0 0 0 .5px var(--edge), 0 8px 24px -6px var(--shade-2) }
/* ── a talk: it heads the message box while it lasts, what it is doing, each side's last words, mute and end ── */
.voice-live { display: flex; align-items: center; gap: var(--s3); min-height: var(--hit); padding: 0 0 0 var(--s1) }
.voice-live-words { flex: 1; min-width: 0; gap: 2px }
.voice-live-words > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.voice-live-words > .meta:empty { display: none }
.voice-live [aria-pressed="true"] { color: var(--warn); background: var(--warn-soft) }
.voice-live-time { font-variant-numeric: tabular-nums }