/* Whale Index - a work session on a 1-bit desktop. Art grid --u = 2 css px; every art asset is drawn 1:1 from its @2x file. */
@font-face { font-family: "Widx Sys"; src: url(/fonts/WidxSys.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Widx Sys Text"; src: url(/fonts/WidxSysText.woff2) format("woff2"); font-display: block; }
:root {
  --u: 2px; --desk: #A9CFCB; --desk-d: #98C1BD;
  --p0: #FFFFFF; --p1: #EEEEEE; --p2: #DDDDDD; --p3: #BBBBBB; --p4: #888888; --p5: #555555; --ink: #000000;
  --fold: #CCCCFF; --fold-d: #9999FF; --fold-dd: #6666CC;
  --orange: #FF6403; --magenta: #F20884; --purple: #4700A5; --blue: #0000D4; --cyan: #02ABEA; --green: #1FB714; --brown: #562C05;
  --yellow: #FCF305; --up: #006411; --down: #DD0806;
  --mb: 40px; --tape: 36px; --title: 38px;
  --f: 32px; --f2: 64px; --f3: 96px; --f4: 128px;
  --sys: "Widx Sys", "Red Hat Mono", ui-monospace, monospace; --txt: "Widx Sys Text", "Red Hat Mono", ui-monospace, monospace;
  --c-arrow: url(/px/cur/arrow@2x.png) 2 2, default; --c-hand: url(/px/cur/hand@2x.png) 16 4, pointer; --c-grab: url(/px/cur/grab@2x.png) 16 16, grabbing;
  --c-cross: url(/px/cur/cross@2x.png) 14 14, crosshair; --c-ibeam: url(/px/cur/ibeam@2x.png) 8 16, text; --c-copy: url(/px/cur/copy@2x.png) 2 2, copy;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--desk) url(/px/ui/desk-waves@2x.png) repeat; background-attachment: fixed; -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: var(--f)/var(--f) var(--txt); -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never; text-rendering: optimizeSpeed; cursor: var(--c-arrow); overflow-x: hidden; }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
canvas { image-rendering: pixelated; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--fold-d); color: var(--ink); }
a, button, [role=button], [onclick], summary, label, .ca, .ic[data-open], select { cursor: var(--c-hand); }
input[type=text], input:not([type]) { cursor: var(--c-ibeam); }
.sys { font-family: var(--sys); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-family: var(--sys); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .dn { color: var(--down); }
:focus-visible { outline: 4px solid var(--fold-dd); outline-offset: 2px; }

/* ---------- menu bar ---------- */
.mb { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--mb); background: var(--p0); border-bottom: 2px solid var(--ink); display: flex; align-items: stretch; font-family: var(--sys); white-space: nowrap; }
.mb-m { display: flex; align-items: stretch; min-width: 0; }
.mb-t { border: 0; background: none; padding: 0 20px; height: 38px; display: flex; align-items: center; gap: 12px; font-family: var(--sys); }
.mb-t[aria-expanded=true], .mb-t:active { background: var(--ink); color: var(--p0); }
.mb-t[aria-expanded=true] img { filter: invert(1); }
.mb-logo { padding: 0 16px 0 24px; }
.mb-logo img { width: 32px; height: 32px; }
.mb-scene { align-self: center; margin-left: 12px; padding: 0 12px; color: var(--p4); font-family: var(--txt); overflow: hidden; text-overflow: clip; }
.mb-r { margin-left: auto; display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.mb .btn { height: 32px; padding: 0 12px; }
.mb-wal { display: none; color: var(--p5); font-family: var(--txt); padding: 0 8px; }
.mb-wal.on { display: block; }
.mb-name { display: none; }
.menu { position: fixed; z-index: 60; top: 38px; min-width: 320px; background: var(--p0); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 2px 0; font-family: var(--sys); display: none; }
.menu.open { display: block; }
.menu [role=menuitem] { display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none; text-align: left; padding: 2px 32px 2px 24px; height: 36px; text-decoration: none; white-space: nowrap; }
.menu [role=menuitem]:hover, .menu [role=menuitem]:focus-visible, .menu [role=menuitem].blink { background: var(--ink); color: var(--p0); outline: 0; }
.menu [role=menuitem][aria-disabled=true] { color: var(--p4); background: none; cursor: var(--c-arrow); }
.menu hr { border: 0; height: 2px; margin: 4px 0; background: url(/px/ui/dither-50@2x.png); }
.menu .lab { width: 16px; height: 16px; border: 2px solid var(--ink); flex: none; }
.menu .k { margin-left: auto; color: var(--p4); padding-left: 24px; }

/* ---------- buttons, fields, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border-style: solid; border-width: 12px; border-image: url(/px/ui/button@2x.png) 12 fill / 12px stretch; border-color: transparent; background: none; font-family: var(--sys); line-height: 32px; text-decoration: none; white-space: nowrap; color: var(--ink); }
.btn > * { margin: -12px 0; }
.btn:hover { border-image-source: url(/px/ui/button-hover@2x.png); }
.btn:active, .btn.pressed { border-image-source: url(/px/ui/button-pressed@2x.png); color: var(--p0); }
.btn[disabled], .btn[aria-disabled=true] { border-image-source: url(/px/ui/button-disabled@2x.png); color: var(--p4); cursor: var(--c-arrow); }
.btn.def { border-width: 18px; border-image: url(/px/ui/button-default@2x.png) 18 fill / 18px stretch; padding: 0 14px; min-height: 52px; }
.btn.def:active { border-image-source: url(/px/ui/button-default@2x.png); background: none; color: var(--ink); filter: invert(1); }
.btn.b-s { border-width: 10px; border-image-width: 12px; padding: 0 12px; }
.btn.b-x .bl { font-size: var(--f); }
.ca { display: inline-flex; align-items: center; gap: 12px; min-height: 32px; max-width: 100%; padding: 0 10px; background: var(--fold); border: 2px solid var(--ink); font-family: var(--txt); text-align: left; }
.ca-k { font-family: var(--sys); }
.ca-v { font: inherit; overflow-wrap: anywhere; word-break: break-all; }
.ca-c { color: var(--fold-dd); }
.ca.copied { background: var(--ink); color: var(--p0); }
.ca.copied .ca-c { color: var(--yellow); }
.ca-pend, .win-t[role=button], .lists, [data-go], .ca { cursor: var(--c-hand); }
.fld { display: block; width: 100%; min-height: 40px; padding: 0 12px; border-style: solid; border-width: 8px; border-image: url(/px/ui/field@2x.png) 8 fill / 8px stretch; background: none; font-family: var(--txt); line-height: 24px; }
.fld:focus { outline: 0; border-image-source: url(/px/ui/field-focus@2x.png); border-image-slice: 10 fill; border-image-width: 10px; }
input[type=checkbox].chk, input[type=radio].rad { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; background: url(/px/ui/check-off@2x.png); flex: none; vertical-align: -2px; }
input[type=checkbox].chk:checked { background-image: url(/px/ui/check-on@2x.png); }
input[type=checkbox].chk:indeterminate { background-image: url(/px/ui/check-mixed@2x.png); }
input[type=radio].rad { background-image: url(/px/ui/radio-off@2x.png); }
input[type=radio].rad:checked { background-image: url(/px/ui/radio-on@2x.png); }
input.chk:disabled, input.rad:disabled { opacity: .45; cursor: var(--c-arrow); }
.opt { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.opt.off { color: var(--p4); }
select.pop { appearance: none; -webkit-appearance: none; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); background: var(--p0) url(/px/ui/scroll-down@2x.png) right 4px center no-repeat; padding: 2px 44px 2px 12px; min-height: 40px; font-family: var(--sys); border-radius: 0; }

/* ---------- windows ---------- */
.win { position: relative; background: var(--p0); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: flex; flex-direction: column; min-width: 0; }
.win-t { position: relative; flex: none; height: var(--title); background: url(/px/ui/titlebar-active@2x.png) repeat-x; display: flex; align-items: center; justify-content: center; padding: 0 48px; touch-action: none; }
.win.inactive .win-t { background-image: url(/px/ui/titlebar-inactive@2x.png); }
.win-n { margin: 0; padding: 0 12px; height: 32px; margin-top: -2px; background: var(--p0); font: var(--f)/32px var(--sys); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.win.inactive .win-n { color: var(--p4); background: none; }
.box { position: absolute; top: 6px; width: 22px; height: 22px; border: 0; padding: 0; background: url(/px/ui/box-close@2x.png); }
.box-c { left: 16px; } .box-c:active { background-image: url(/px/ui/box-close-pressed@2x.png); }
.box-z { right: 16px; background-image: url(/px/ui/box-zoom@2x.png); } .box-z:active { background-image: url(/px/ui/box-zoom-pressed@2x.png); }
.box-s { right: 44px; background-image: url(/px/ui/box-shade@2x.png); }
.win.inactive .box { visibility: hidden; }
.win-h { flex: none; display: flex; align-items: center; gap: 24px; padding: 2px 16px; border-bottom: 2px solid var(--ink); font-family: var(--txt); white-space: nowrap; overflow: hidden; min-height: 36px; }
.win-h.dbl { border-bottom: 6px double var(--ink); }
.win-b { position: relative; flex: 1; min-height: 0; padding: 16px; overflow: hidden; }
.win-f > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.win-f { flex: none; display: flex; align-items: center; gap: 16px; padding: 2px 16px; border-top: 2px solid var(--ink); color: var(--p5); white-space: nowrap; overflow: hidden; min-height: 32px; }
.win-f .grow { margin-left: auto; width: 30px; height: 30px; background: url(/px/ui/grow@2x.png); flex: none; margin-right: -16px; }
.scr { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--fold-d) var(--p2); }
.scr::-webkit-scrollbar { width: 32px; height: 32px; }
.scr::-webkit-scrollbar-track { background: url(/px/ui/scroll-track@2x.png); border-left: 2px solid var(--ink); }
.scr::-webkit-scrollbar-thumb { background: url(/px/ui/scroll-thumb@2x.png) center / 32px 32px; border: 2px solid var(--ink); }
.scr::-webkit-scrollbar-button:single-button:vertical:decrement { height: 32px; background: url(/px/ui/scroll-up@2x.png) center / 32px 32px; }
.scr::-webkit-scrollbar-button:single-button:vertical:increment { height: 32px; background: url(/px/ui/scroll-down@2x.png) center / 32px 32px; }
.scr::-webkit-scrollbar-button:single-button:horizontal:decrement { width: 32px; background: url(/px/ui/scroll-left@2x.png) center / 32px 32px; }
.scr::-webkit-scrollbar-button:single-button:horizontal:increment { width: 32px; background: url(/px/ui/scroll-right@2x.png) center / 32px 32px; }
.dlg-f { border-style: solid; border-width: 12px; border-image: url(/px/ui/dialog@2x.png) 12 fill / 12px stretch; background: none; }

/* ---------- desktop icons ---------- */
.ic { display: flex; flex-direction: column; align-items: center; width: 128px; gap: 4px; border: 0; background: none; padding: 0; font-family: var(--txt); touch-action: none; user-select: none; -webkit-user-select: none; text-decoration: none; }
.ic img { width: 64px; height: 64px; -webkit-user-drag: none; }
.ic span { padding: 0 6px; background: var(--p0); line-height: 30px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.ic.sel span, .ic:focus-visible span { background: var(--ink); color: var(--p0); }
.ic:focus-visible { outline: 0; }
.ic[data-drag] { cursor: var(--c-hand); }
.ic.wig img { animation: wig .48s steps(1) 1; }
@keyframes wig { 0%{transform:translateX(0)} 17%{transform:translateX(-4px)} 33%{transform:translateX(4px)} 50%{transform:translateX(-2px)} 67%{transform:translateX(2px)} 83%{transform:translateX(0)} }
.ghost { position: fixed; z-index: 80; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E"); outline: 2px dotted var(--ink); }
body.dragging, body.dragging * { cursor: var(--c-grab) !important; }
body.dragging.over, body.dragging.over * { cursor: var(--c-copy) !important; }

/* ---------- overlays ---------- */
.zl { position: fixed; inset: 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; width: 100vw; height: 100vh; }
.bal { position: fixed; z-index: 95; left: 0; top: 0; max-width: 460px; pointer-events: none; border-style: solid; border-width: 12px 12px 28px 32px; border-image: url(/px/ui/balloon@2x.png) 12 12 28 32 fill / 12px 12px 28px 32px stretch; padding: 0 4px 0 0; margin-left: -18px; font-family: var(--txt); display: none; }
.bal.on { display: block; }
.bal b { font-family: var(--sys); font-weight: normal; }
.tip-hint { position: absolute; z-index: 8; pointer-events: none; }

/* ---------- Whale Tape (control strip) ---------- */
.tape { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: var(--tape); display: flex; align-items: stretch; background: var(--p2); border-top: 2px solid var(--ink); font-family: var(--txt); white-space: nowrap; }
.tape-tab { flex: none; border: 0; border-right: 2px solid var(--ink); background: var(--p1); padding: 0 16px; font-family: var(--sys); display: flex; align-items: center; gap: 10px; }
.tape-tab img { width: 32px; height: 32px; }
.tape-w { position: relative; flex: 1; overflow: hidden; }
.tape-r { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 40px; will-change: transform; padding-left: 24px; }
.tape-r .mv { display: inline-flex; align-items: center; gap: 10px; }
.tape-r .sq { width: 16px; height: 16px; border: 2px solid var(--ink); flex: none; }
.tape-r .mv b { font-family: var(--sys); font-weight: normal; }
.tape-d { flex: none; width: 260px; justify-content: center; padding: 0 16px; border-left: 2px solid var(--ink); display: flex; align-items: center; color: var(--p5); background: var(--p1); }
.tape.min .tape-w, .tape.min .tape-d { display: none; }
.tape.min { right: auto; border-right: 2px solid var(--ink); }

/* ---------- session ---------- */
main { position: relative; }
.sc { position: relative; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage { position: absolute; left: 0; right: 0; top: calc(var(--mb) + 16px); bottom: calc(var(--tape) + 16px); max-width: 1920px; margin: 0 auto; }
.sc-desk { height: 160vh; }
.sc-idx { height: 560vh; }
.sc-finder { height: 340vh; }
.sc-cp { min-height: 100vh; padding: calc(var(--mb) + 48px) 0 calc(var(--tape) + 48px); }
.sc-about { min-height: 100vh; padding: 48px 0 calc(var(--tape) + 48px); }
.sc-off { height: 220vh; }

/* hero */
.icons-r .ic { width: 168px; }
.icons-r { position: absolute; right: 16px; top: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 3; }
.icons-r .trash { margin-top: auto; }
.desk-l { position: absolute; left: 32px; top: 0; bottom: 0; width: min(900px, calc(100% - 440px)); display: flex; flex-direction: column; gap: 16px; z-index: 4; }
.w-idx { position: relative; flex: 1 1 0; min-height: 0; z-index: 4; }
.w-idx .win-b { padding: 8px 24px 8px; display: flex; flex-direction: column; }
.lvl-row { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.lvl { font: var(--f3)/96px var(--sys); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lvl-s { padding-bottom: 12px; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bk-ch { display: flex; gap: 0 24px; flex-wrap: nowrap; }
.bk-ch > span { white-space: nowrap; display: flex; flex-direction: column; }
.bk-l .lvl-row { flex-wrap: nowrap; }
.bk-l .lvl-s { flex: 1 1 auto; }
.bk-ch i { font-style: normal; color: var(--p5); margin-right: 8px; }
.rng { margin-left: auto; display: flex; gap: 0; align-self: flex-start; margin-top: 12px; }
.rng button { border: 2px solid var(--ink); margin-left: -2px; background: var(--p0); padding: 0 12px; height: 36px; font-family: var(--sys); }
.rng button[aria-pressed=true] { background: var(--ink); color: var(--p0); }
.chart { position: relative; flex: 1; min-height: 120px; margin-top: 8px; cursor: var(--c-cross); overflow: hidden; }
.chart canvas { position: absolute; left: 0; top: 0; }
.chart .ax { position: absolute; right: 0; color: var(--p4); font-family: var(--txt); line-height: 30px; background: var(--p0); padding-left: 6px; pointer-events: none; }
.chart .ax-d { position: absolute; bottom: 0; color: var(--p4); line-height: 30px; pointer-events: none; }
.legend { display: flex; gap: 24px; color: var(--p5); flex-wrap: wrap; }
.legend i { display: inline-block; width: 32px; height: 4px; vertical-align: 8px; margin-right: 8px; }
.legend .l-bt { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='4'%3E%3Crect width='8' height='4'/%3E%3C/svg%3E") 0 0 / 14px 4px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='4'%3E%3Crect width='8' height='4'/%3E%3C/svg%3E") 0 0 / 14px 4px repeat-x; width: 36px; }
.legend .rng { margin: 0 0 0 auto; }
.w-name { position: relative; flex: none; margin-left: 32px; width: min(780px, calc(100% - 32px)); z-index: 5; }
.w-name .acts .ca { margin-top: 0; }
.w-name .win-b { padding: 16px 24px 20px; }
.w-name h1 { margin: 0; font: var(--f2)/64px var(--sys); display: flex; align-items: center; gap: 20px; }
.w-name h1 img { width: 64px; height: 64px; }
.w-name p { margin: 8px 0 16px; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.loose { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 24px; right: 240px; top: 8px; }
.loose .ic { width: 140px; }
.w-idx.mine .win-n::after { content: " (your mix)"; }
.tag-demo { color: var(--p5); }
.phone-shelf { display: none; }
.w-ixl { position: absolute; left: calc(32px + 32px + 780px + 24px); bottom: 0; width: 540px; z-index: 6; }
.w-ixl .wn img { display: none; }
.w-ixl .fl td { padding: 0 8px; }
.w-ixl canvas { width: 96px; height: 32px; }
.w-ixl td { height: 44px; }
@media (max-width: 1659px) { .w-ixl { display: none; } }

/* indexes */
.ix-ov { position: absolute; inset: 0; }
.w-map { position: absolute; left: 32px; top: 0; width: calc(58% - 48px); bottom: 0; }
.w-map .win-b { padding: 0; }
.w-map canvas { position: absolute; left: 0; top: 0; }
.tm-l { position: absolute; pointer-events: none; font-family: var(--txt); line-height: 28px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-l b { font-family: var(--sys); font-weight: normal; }
.tm-l.inv { color: var(--p0); }
.tm-l span { background: var(--p0); color: var(--ink); padding: 0 4px; }
.tm-l.inv span { background: var(--ink); color: var(--p0); }
.lists { position: absolute; right: 32px; top: 0; bottom: 0; width: calc(42% - 32px); }
.w-list { position: absolute; left: 0; right: 0; height: calc((100% - 32px) / 3); }
.w-list:nth-child(2) { top: calc((100% - 32px) / 3 + 16px); }
.w-list:nth-child(3) { top: calc((100% - 32px) * 2 / 3 + 32px); }
.fl { width: 100%; border-collapse: collapse; font-family: var(--txt); }
.fl th { text-align: left; font-weight: normal; padding: 0 12px; height: 34px; border-bottom: 2px solid var(--ink); white-space: nowrap; position: sticky; top: 0; background: var(--p0); z-index: 1; }
.fl th button { border: 0; background: none; padding: 0; font-family: var(--txt); }
.fl th[aria-sort] button { font-family: var(--sys); }
.fl th[aria-sort=descending] button::after { content: " v"; } .fl th[aria-sort=ascending] button::after { content: " ^"; }
.fl td { padding: 0 12px; height: 36px; white-space: nowrap; }
.fl td.r, .fl th.r { text-align: right; }
.fl tr.row { cursor: var(--c-hand); }
.fl tr.row:hover td { background: var(--p1); }
.fl tr.row.sel td { background: var(--ink); color: var(--p0); }
.fl .wn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fl td.w { width: 100%; max-width: 0; }
.fl .wn .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fl .wn img { width: 32px; height: 32px; flex: none; }
.fl .num { font-family: var(--sys); }
.w-list .win-b, .w-bk .lst { padding: 0; }
.ix-bk { position: absolute; inset: 0; }
.shelf { position: absolute; left: 32px; right: 32px; top: 0; z-index: 5; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.shelf .win { pointer-events: auto; box-shadow: 2px 2px 0 var(--ink); }
.shelf .win-t { cursor: var(--c-hand); }
.w-bk { position: absolute; left: 32px; right: 32px; bottom: 0; display: none; }
.w-bk.show { display: flex; }
.w-bk .win-b { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; padding: 0; }
.bk-l { overflow: hidden; display: flex; flex-direction: column; padding: 8px 24px 12px; border-right: 2px solid var(--ink); min-height: 0; }
.bk-r { display: flex; flex-direction: column; min-height: 0; }
.bk-r .lst { flex: 1.4; min-height: 0; }
.bk-r .mvs { flex: 1; min-height: 0; border-top: 6px double var(--ink); }
.mvs ul { list-style: none; margin: 0; padding: 4px 12px; }
.mvs li { display: flex; gap: 10px; align-items: center; min-height: 34px; white-space: nowrap; }
.mvs li img { flex: none; }
.mvs li b { flex: none; }
.mvs li .mt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mvs li .t { flex: none; min-width: 48px; text-align: right; color: var(--p4); font-family: var(--sys); }
.empty { color: var(--p5); padding: 12px 16px; }
.about-r { color: var(--p5); }

/* finder */
.w-fd { position: absolute; left: 32px; right: 32px; top: 0; height: calc(52% - 8px); }
.w-fd .win-b { padding: 0; }
.fd-track { position: absolute; left: 0; top: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr); gap: 0 8px; padding: 16px 24px; will-change: transform; }
.fd-track .ic { width: 196px; }
.fd-track .ic span { max-width: 188px; }
.fd-track .ic small { font-size: var(--f); color: var(--p5); line-height: 26px; }
.fd-track .ic.out { opacity: 1; }
.fd-track .ic.out img { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E"); }
.fd-track .ic.out span, .fd-track .ic.out small { color: var(--p4); }
.fd-track .ic.in-b span { background: var(--fold); }
.fd-h label { display: inline-flex; gap: 10px; align-items: center; }
.fd-folder { position: absolute; right: 48px; top: calc(52% + 24px); z-index: 4; }
.w-mb { position: absolute; left: 32px; width: calc(58% - 48px); top: calc(52% + 16px); bottom: 0; }
.w-pv { position: absolute; right: 32px; width: calc(42% - 32px); top: calc(52% + 136px); bottom: 0; }
.w-pv .win-b { display: flex; flex-direction: column; padding: 8px 16px; }
.mb-rows { list-style: none; margin: 0; padding: 4px 0; }
.mb-rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(120px, 1.3fr) 80px 32px; gap: 12px; align-items: center; padding: 0 16px; min-height: 44px; }
.mb-rows img { width: 32px; height: 32px; }
.mb-rows .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-rows .pc { text-align: right; font-family: var(--sys); }
.mb-rows .rm { width: 32px; height: 32px; border: 0; background: url(/px/ic16/doc@2x.png) center no-repeat; padding: 0; }
.mb-rows .rm { background: none; border: 2px solid var(--ink); font-family: var(--sys); line-height: 26px; }
.sl { position: relative; height: 32px; touch-action: none; cursor: var(--c-hand); }
.sl::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: url(/px/ui/dither-50@2x.png); border: 0; }
.sl i { position: absolute; top: 4px; width: 16px; height: 24px; margin-left: -8px; background: var(--fold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.sl:focus-visible i { background: var(--fold-dd); }
.mb-foot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-top: 2px solid var(--ink); }
.mb-foot .fld { width: 280px; flex: 1 1 200px; }
.share { display: none; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-top: 2px solid var(--ink); background: var(--p1); }
.share.on { display: flex; }
.share code { font-family: var(--txt); overflow-wrap: anywhere; }
.msg { color: var(--p5); min-height: 32px; }
.msg.err { color: var(--down); }

/* control panels */
.cp-row { position: relative; max-width: 1520px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.cp-row .win-b { padding: 16px 24px 20px; }
.cp-head { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 12px; }
.cp-head img { width: 64px; height: 64px; flex: none; }
.cp-head p { margin: 0; }
.grp { border: 2px solid var(--ink); padding: 16px 16px 12px; margin: 20px 0 12px; position: relative; }
.grp > b { position: absolute; top: -18px; left: 12px; background: var(--p0); padding: 0 8px; font-family: var(--sys); font-weight: normal; }
.cands { height: 420px; }
#al-out { min-height: 120px; }
.cands .opt { padding: 0 8px; gap: 12px; }
.cands .opt .why { color: var(--p4); margin-left: auto; white-space: nowrap; }
.cands .opt img { flex: none; }
.cands .opt .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cands .opt .why { flex: none; padding-left: 8px; }
.bk-ch b { font-weight: normal; }
.seed { color: var(--p5); overflow-wrap: anywhere; }
.code { font-family: var(--sys); font-size: var(--f2); line-height: 64px; letter-spacing: 4px; }
.cp-row .acts { margin-top: 12px; }

/* about */
.w-about { max-width: 1280px; margin: 0 auto; }
.w-about .win-b { padding: 24px 32px 28px; }
.ab-top { display: flex; gap: 24px; align-items: center; }
.ab-top img { width: 96px; height: 96px; }
.ab-top h2 { margin: 0; font: var(--f2)/64px var(--sys); }
.ab-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; margin-top: 20px; }
.ab-sec h3 { margin: 16px 0 8px; font: var(--f)/32px var(--sys); padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 40px; }
.bars li img { width: 32px; height: 32px; }
.bars .bar { grid-column: 2 / 4; height: 24px; border: 2px solid var(--ink); background: var(--p0); position: relative; margin: 0 0 8px; }
.bars .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fold-dd); border-right: 2px solid var(--ink); }
.rules { list-style: none; padding: 0; margin: 0; }
.rules li { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; position: relative; }
.rules li img { width: 24px; height: 24px; flex: none; margin-top: 4px; }
.fx { font-family: var(--txt); background: var(--p1); border: 2px solid var(--ink); padding: 8px 12px; margin: 6px 0; overflow-wrap: anywhere; }
.does { list-style: none; padding: 0; margin: 0; }
.does li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; margin: 8px 0; }
.does img { width: 64px; height: 64px; }
.does b { font-family: var(--sys); font-weight: normal; display: block; }
.nadv { color: var(--p5); margin-top: 16px; }
.ab-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.ants { position: absolute; pointer-events: none; z-index: 2; }

/* shut down */
.off-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.off-dlg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100% - 32px)); padding: 28px 32px; display: none; z-index: 3; text-align: left; }
.off-dlg.on { display: block; }
.off-dlg h2 { margin: 0 0 20px; font: var(--f)/40px var(--sys); display: flex; gap: 20px; align-items: center; }
.off-dlg h2 img { width: 64px; height: 64px; }

/* get info + floating windows */
.layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.layer .win { position: absolute; pointer-events: auto; }
.w-gi { width: 640px; max-width: calc(100vw - 16px); max-height: calc(100vh - var(--mb) - var(--tape) - 24px); }
.w-gi .win-b { overflow: auto; }
.gi-top { display: flex; gap: 16px; align-items: center; }
.gi-top img { width: 64px; height: 64px; }
.gi-top code { font-family: var(--txt); overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 20px; margin: 12px 0; }
.kv dt { color: var(--p5); } .kv dd { margin: 0; font-family: var(--sys); }
.gi-cv { border: 2px solid var(--ink); margin: 8px 0; }
.wal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

/* boot */
.boot { position: fixed; inset: 0; z-index: 100; background: var(--desk) url(/px/ui/desk-waves@2x.png); display: flex; align-items: center; justify-content: center; }
.boot .win { width: min(640px, calc(100% - 32px)); align-items: center; padding: 32px 32px 24px; }
.boot img.mk { width: 96px; height: 96px; }
.boot h2 { font: var(--f)/40px var(--sys); margin: 20px 0 16px; text-align: center; }
.boot .bar { width: 100%; height: 24px; border: 2px solid var(--ink); background: url(/px/ui/barber@2x.png); animation: barber .64s steps(8) infinite; }
@keyframes barber { to { background-position: 32px 0; } }
.boot .parade { display: flex; gap: 32px; margin-top: 24px; min-height: 64px; }
.boot .parade img { width: 64px; height: 64px; }
.boot-skip { position: absolute; bottom: 24px; color: var(--p5); font-family: var(--txt); }

/* reveal helpers */
.rv-c { display: inline; }
.rv-i { background: var(--ink); color: var(--p0); }
.rv-o { outline: 2px solid var(--ink); outline-offset: -2px; }
.rv-cur { display: inline-block; width: 0; position: relative; }
.rv-cur::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 26px; background: var(--ink); }
.caret::after { content: ""; display: inline-block; width: 16px; height: 28px; background: var(--ink); vertical-align: -4px; margin-left: 2px; }

/* ---------- responsive: small screen = the same session on a small Mac ---------- */
@media (max-width: 1100px) { .mb-scene { display: none; } }
@media (max-width: 1200px) {
  .mb .ca[data-ca] .ca-v { display: none; }
}
@media (max-width: 900px), (max-height: 520px) {
  :root { --tape: 36px; --f3: 64px; }
  html { background-attachment: scroll; }
  .mb-logo { padding: 0 8px 0 8px; }
  .mb-m .mb-t:not(.mb-logo):not(.mb-ix) { display: none; }
  .mb-ix { padding: 0 10px; }
  .menu { min-width: 0; width: max-content; max-width: calc(100vw - 4px); }
  .menu [role=menuitem] { padding: 2px 20px 2px 16px; }
  .mb-scene, .mb .b-pump, .mb-help { display: none; }
  .mb-r { gap: 6px; padding-right: 6px; }
  .mb .btn.b-x { padding: 0 6px; }
  .tape { top: var(--mb); bottom: auto; border-top: 0; border-bottom: 2px solid var(--ink); }
  .tape-d { display: none; }
  .tape-tab span { display: none; }
  .sc-desk { height: auto; }
  .sc-desk .pin { position: relative; height: auto; overflow: visible; padding: calc(var(--mb) + var(--tape) + 12px) 8px 24px; }
  .sc-desk .stage { position: static; display: flex; flex-direction: column; gap: 12px; }
  .icons-r, .loose, .w-ixl { display: none; }
  .desk-l { display: contents; }
  .w-idx, .w-name { position: relative; left: auto; top: auto; bottom: auto; width: auto; flex: none; margin-left: 0; min-width: 0; }
  .w-name { order: -1; }
  .w-name .win-b { padding: 12px 14px 16px; }
  .w-name h1 { font-size: 48px; line-height: 48px; gap: 12px; }
  .w-name h1 img { width: 48px; height: 48px; }
  .w-name .ca { width: 100%; }
  .w-idx { height: 520px; }
  .w-idx .win-b { padding: 4px 12px 8px; }
  .lvl { font-size: 64px; line-height: 64px; }
  .rng { margin-left: 0; }
  .lvl-s { min-height: 64px; }
  #hw-sub { min-height: 64px; }
  .phone-shelf { display: flex; flex-direction: column; gap: 6px; }
  .phone-shelf .win-t { cursor: var(--c-hand); }
  .phone-shelf .icrow { display: flex; justify-content: space-between; padding: 8px 4px; }
  .phone-shelf .ic { width: 84px; }
  .phone-shelf .ic span { max-width: 84px; }
  .stage { top: calc(var(--mb) + var(--tape) + 8px); bottom: 8px; }
  .sc-idx { height: 520vh; }
  .w-map { left: 8px; right: 8px; width: auto; bottom: 44%; }
  .lists { left: 8px; right: 8px; width: auto; top: calc(56% + 12px); }
  .w-list { height: 100%; top: 0 !important; display: none; }
  .w-list.mob { display: flex; }
  .w-list .win-n { cursor: var(--c-hand); }
  .shelf { left: 8px; right: 8px; }
  .w-bk { left: 8px; right: 8px; }
  .w-bk .win-b { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-l .legend > span { display: none; }
  .bk-l .rng { margin-top: 0; }
  .bk-l { overflow: hidden; border-right: 0; border-bottom: 2px solid var(--ink); padding: 4px 12px 8px; }
  .bk-r .mvs { display: none; }
  .w-bk .win-b { grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr); }
  .w-bk .win-h { white-space: normal; flex-wrap: nowrap; align-items: flex-start; padding: 4px 12px; gap: 12px; }
  .bk-about { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .bk-ch { gap: 0 16px; }
  .rng button { padding: 0 8px; }
  .shelf .win-t, .phone-shelf .win-t { padding: 0 12px; }
  .cands .opt { gap: 8px; padding: 0 4px; }
  .cands .opt .why { padding-left: 4px; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .w-bk .win-h .sq { flex: none; margin-top: 6px; }
  .bk-l .lvl-row { flex-wrap: wrap; gap: 0 16px; align-items: center; }
  .bk-l .lvl-s { flex: 1 1 100%; padding-bottom: 0; }
  .bk-sub { display: none; }
  .fl td, .fl th { padding: 0 8px; }
  .fl .xc { display: none; }
  .win-h { flex-wrap: wrap; white-space: normal; gap: 0 16px; }
  .w-mb .win-h .btn { margin-left: auto; }
  /* scenes meet like tiled windows on the phone too */
  .sc-idx { margin-top: calc(16px - 24px - var(--mb) - var(--tape) - 8px); }
  .sc-finder { margin-top: -16px; }
  .sc-cp { margin-top: -56px; }
  .sc-about { margin-top: calc(16px - var(--tape) - 96px); }
  .sc-finder { height: auto; }
  .sc-finder .pin { position: relative; height: auto; overflow: visible; padding: 24px 8px; }
  .sc-finder .stage { position: static; display: flex; flex-direction: column; gap: 16px; }
  .w-fd, .w-mb, .w-pv { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; height: auto; }
  .w-fd .win-b { height: 420px; overflow-x: auto; overflow-y: hidden; }
  .fd-h { flex-wrap: wrap; white-space: normal; }
  .fd-track { position: relative; height: 100%; }
  .fd-track .ic { width: 148px; }
  .fd-folder { display: none; }
  .w-pv { height: 440px; }
  .mb-rows li { grid-template-columns: 32px minmax(0, 1fr) 72px 32px; padding: 0 8px; }
  .mb-rows li .sl { grid-column: 1 / -1; grid-row: 2; margin: 0 8px 8px; }
  .cp-row { grid-template-columns: 1fr; padding: 0 8px; gap: 24px; }
  .cp-row .win-b, .w-about .win-b { padding: 12px 14px 16px; }
  .sc-about { padding-left: 8px; padding-right: 8px; }
  .ab-cols { grid-template-columns: 1fr; gap: 0; }
  .ab-top img { width: 64px; height: 64px; }
  .ab-top h2 { font-size: var(--f2); }
  .code { font-size: var(--f); line-height: 40px; }
  .w-gi { left: 8px !important; right: 8px; width: auto; top: calc(var(--mb) + var(--tape) + 8px) !important; }
  .sc-cp { padding-top: 48px; }
}
@media (max-width: 900px), (max-height: 520px) {
  .btn { padding: 0 8px; }
  .acts { gap: 8px; }
  .w-name .acts .btn.def { flex: 1 1 100%; }
  .ph-hide { display: none; }
}
@media (max-width: 360px) {
  .mb .b-x { display: none; }
  .w-name h1 img { display: none; }
  .mb-name .sys { font-size: var(--f); }
  .ca-v { font-size: var(--f); }
}
@media (min-width: 2400px) { .stage { max-width: 2200px; } }
/* no layout shift while live text fills in */
.w-idx .lvl-row { height: 104px; overflow: hidden; flex-wrap: nowrap; }
.w-idx .lvl-s span { white-space: nowrap; }
.phone-shelf .icrow { min-height: 112px; }
#al-bk { min-height: 120px; }
@media (max-width: 900px), (max-height: 520px) { .w-idx .lvl-row { height: auto; flex-wrap: wrap; overflow: visible; } .w-idx .lvl-s span { white-space: normal; } }
#bl-n { flex: 1 1 100%; min-height: 32px; } #bl-seed { min-height: 96px; } #bl-pick { min-width: 200px; }
/* big and zoomed-out screens: the desktop scene keeps a bounded frame */
@media (min-width: 901px) and (min-height: 521px) {
  .stage { max-height: 1100px; margin: auto; }
  .w-idx { max-height: 760px; }
  /* scenes meet like tiled windows: the next scene's first window arrives 16 px under the last one (no empty desktop band) */
  .sc-idx, .sc-finder { margin-top: calc(16px - var(--mb) - var(--tape) - 32px); }
  .sc-cp { margin-top: calc(16px - var(--mb) - var(--tape) - 64px); }
  .sc-about { margin-top: calc(16px - var(--tape) - 96px); }
}
@media (min-width: 1700px) and (min-height: 521px) {
  .desk-l { width: min(1100px, calc(100% - 440px)); }
}

/* pinned stages never catch the pointer themselves: where two scenes meet, the windows under the seam stay clickable / droppable */
.pin, .stage, .ix-ov, .ix-bk, .icons-r, .loose, .desk-l, .lists { pointer-events: none; }
.pin .win, .pin .ic, .phone-shelf { pointer-events: auto; }

/* ---------- how-it-works film (stage 7): a QuickTime-like movie window, own controller, no autoplay ---------- */
.w-film { max-width: 1120px; margin: 0 auto 32px; }
.w-film .win-b { padding: 0; }
.film { margin: 0; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; cursor: var(--c-hand); }
.film-stage video, .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: var(--ink); }
.film-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.film.is-play .film-big { display: none; }
.film.is-play .film-poster { visibility: hidden; }
.film-stage:focus-visible { outline: 4px solid var(--blue); outline-offset: -4px; }
/* the controller: a grey strip under the picture, like QuickTime 1.0 */
.film-bar { display: flex; align-items: center; gap: 12px; padding: 6px 12px; background: var(--p2); border-top: 2px solid var(--ink); flex-wrap: nowrap; }
.film-t { position: relative; flex: 1 1 auto; height: 24px; background: var(--p0); border: 2px solid var(--ink); box-shadow: inset 2px 2px 0 var(--p3); touch-action: none; cursor: var(--c-grab); min-width: 80px; }
.film-t > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: url(/px/ui/dither-50@2x.png); border-right: 4px solid var(--ink); }
.film-time { font-family: var(--txt); white-space: nowrap; }
.film:fullscreen { background: var(--ink); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px), (max-height: 520px) { .w-film { margin-bottom: 24px; } .film-bar { gap: 4px; padding: 4px; } .film-bar { flex-wrap: wrap; } .film-bar .btn { flex: 1 1 0; padding: 0 4px; } .film-t { order: -1; flex: 1 1 100%; } .film-time { display: none; } }