:root{
  --bg:#0b0d14; --panel:#10131b; --ink:#e9e7e1; --body:#c9c7c1; --dim:#9a9892; --faint:#5d5c58; --hair:rgba(255,255,255,.10);
  --mono:ui-monospace,'SF Mono',Menlo,monospace; --gut:max(16px,2.5vw);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:13px/1.5 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:0}
.bul{margin:0;padding:0;list-style:none}
.bul li{position:relative;padding-left:16px;color:var(--body);line-height:1.5;margin:5px 0}
.bul li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:1px;background:var(--dim)}

/* artifacts: one frame for every kind. mark, kind, one fact; the title; the work itself */
.mk{flex:none;overflow:visible;display:block}
.media{display:grid;gap:22px 14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.media.m1{grid-template-columns:minmax(0,1fr)}
.media.lead > :first-child{grid-column:1/-1}
.card{margin:0;min-width:0;display:flex;flex-direction:column}
.card .hd{display:flex;align-items:center;gap:8px;height:16px}
.card .hd .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.card .hd .f{margin-left:auto;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-variant-numeric:tabular-nums}
.card .t{margin:6px 0 9px;color:var(--ink);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .t .num{color:var(--dim)}
.card .frame{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--hair);background:#000;aspect-ratio:16/10}
.card .frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.card.fig .frame{background:#05060a}
.card.fig .frame img{object-fit:contain;object-position:center}
.card .dur{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.65);color:var(--ink);font-size:11px;padding:2px 7px;border-radius:2px;letter-spacing:.04em}
/* code: the diff */
.prs{display:grid;gap:22px 14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:22px}
.media + .prs{margin-top:22px}
.prs:first-child{margin-top:0}
.card .frame.diff{aspect-ratio:auto;background:rgba(255,255,255,.02);padding:12px 12px 10px;display:flex;flex-direction:column;gap:9px}
.diff .track{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.diff .track b{display:block;height:100%;background:var(--ink)}
.diff .meta{display:flex;gap:10px;white-space:nowrap;color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.diff .meta .repo{margin-left:auto;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* experiment: the result */
.card .frame.plot{aspect-ratio:auto;background:#05060a;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.plot .lbl{font-size:10px;color:var(--faint)}
.plot .arms{display:flex;flex-direction:column;gap:9px;margin-top:auto;margin-bottom:auto}
.plot .arm{display:grid;grid-template-columns:minmax(64px,auto) 1fr 44px;align-items:center;gap:10px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.plot .tr{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.plot .tr b{display:block;height:100%;background:var(--faint)}
.plot .av{text-align:right}
.plot .arm.top{color:var(--ink)}
.plot .arm.top .tr b{background:var(--ink)}
.card .res{margin:8px 0 0;font-size:11px;line-height:1.45;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* pushes: one quiet line */
.pushes{margin-top:14px}
.push{display:flex;gap:9px;align-items:center;color:var(--dim);font-size:12px;padding:3px 0;white-space:nowrap}
.push .mk{opacity:.7}
.push .t{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* the panel strip: tiles, diff rows, one quiet line */
.tiles{display:grid;gap:12px 10px}
.tiles.c1{grid-template-columns:minmax(0,1fr)}
.tiles.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{margin:0;min-width:0}
.tile .tf{position:relative;aspect-ratio:16/10;background:#000;border:1px solid rgba(206,222,240,.12);overflow:hidden}
.tiles.c1 .tf{aspect-ratio:16/8}
.tile .tf img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.tile .tf{max-height:var(--th,230px);width:100%}
.tile:not(.fig) .tf img{object-position:50% 12%}
.tile.fig .tf{background:#05060a}
.tile.fig .tf img{object-fit:contain;object-position:center}
.tile .fact{position:absolute;right:0;bottom:0;padding:2px 6px;background:rgba(2,3,8,.82);color:var(--dim);font-size:10px;letter-spacing:.06em;max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .dur{position:absolute;left:6px;bottom:5px;color:var(--ink);font-size:10px;letter-spacing:.04em;text-shadow:0 0 6px #000}
.tile .tc{display:flex;align-items:center;gap:7px;margin-top:7px;min-width:0}
.tile .tt{font-size:11.5px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tile.exp .tf{background:#05060a;padding:9px 10px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.tile.exp .tm{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tile.exp .ta{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tile.exp .ta i{display:block;height:3px;background:rgba(255,255,255,.07)}
.tile.exp .ta b{display:block;height:100%;background:var(--faint)}
.tile.exp .ta.top{color:var(--ink)}
.tile.exp .ta.top b{background:var(--ink)}
.prrs{display:flex;flex-direction:column;margin-top:2px}
.tiles + .prrs{margin-top:14px}
.prr{display:grid;grid-template-columns:12px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:5px 9px;align-items:center;padding:9px 0;border-top:1px solid rgba(206,222,240,.08)}
.prr:first-child{border-top:0;padding-top:2px}
.prr .pt{font-size:12px;color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prr .num{color:var(--dim)}
.prr .ps{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.prr .pd{grid-column:2;display:block}
.prr .pd i{display:block;height:3px;background:rgba(255,255,255,.12)}
.prr .pd b{display:block;height:100%;background:var(--ink)}
.prr .pm{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.sline{display:flex;align-items:center;gap:9px;margin-top:12px;color:var(--faint);font-size:11px;white-space:nowrap;overflow:hidden}
.sline .mk{opacity:.7}
.sline .mo{margin-left:auto;color:var(--faint)}