/* rhyres.pd — a maximalist, monstrous Pure Data, for the NordiCHI talk "Rhythm and Residue" (CRAITR, 3 Oct 2026).
   Pd's own numbers come from pd-reference/gui-commands.txt (Pd 0.54-1 posing-as-GUI capture); they live in engine.js.
   The three parse colours are SAMPLED from the paper's rendered pages (pdftoppm 150 dpi, pp. 2–9, most frequent value):
   ultramarine #1b26a8 (clear / staked) · pink #ff006e (the discipline / lost) · green #00b050 (fuzzy). */

@font-face { font-family: "DejaVu Sans Mono"; src: url("fonts/DejaVuSansMono.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "DejaVu Sans Mono"; src: url("fonts/DejaVuSansMono-Bold.woff2") format("woff2"); font-weight: 700; }

:root {
  --ultra: #1b26a8; --pink: #ff006e; --green: #00b050;
  --yellow: #ffd400; --mint: #5fe0c2; --lilac: #b9a3ff; --orange: #ff7a1a;
  --rot: 0;
  --mono: "DejaVu Sans Mono", Menlo, monospace;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--ui); color: #000; cursor: default; user-select: none; -webkit-user-select: none; }

#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: var(--yellow); }

/* ---------- the desk: Memphis wallpaper that rots ---------- */
#desk { position: absolute; inset: 0; overflow: hidden;
  filter: saturate(calc(1 + var(--rot) * 0.8)) hue-rotate(calc(var(--rot) * -38deg)) contrast(calc(1 + var(--rot) * 0.25)); }
#desk .tile { position: absolute; inset: -40px; background-size: 240px 240px; }
#desk svg.memphis { position: absolute; inset: 0; width: 100%; height: 100%; }
#over { position: absolute; inset: 0; pointer-events: none; z-index: 9000; }
#over svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- the macOS menu bar, Pd's menus (labels drift one key sideways as the talk goes) ---------- */
#menubar { position: absolute; left: 0; top: 0; right: 0; height: 26px; z-index: 9500; display: flex; align-items: center; gap: 22px;
  padding: 0 18px; background: rgba(246,246,246,.92); border-bottom: 1px solid rgba(0,0,0,.18); font: 14px/26px var(--ui); }
#menubar b { font-weight: 700; }
#menubar .sp { flex: 1; }
#menubar .clock { font-variant-numeric: tabular-nums; }

/* ---------- windows ---------- */
.win { position: absolute; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.28), 0 18px 50px rgba(0,0,0,.35);
  transition: left .9s cubic-bezier(.2,.8,.2,1), top .9s cubic-bezier(.2,.8,.2,1), width .9s, height .9s, transform 1.1s cubic-bezier(.2,.8,.2,1), opacity .6s, filter 1s; }
.win.instant { transition: none; }
.win .bar { height: 28px; display: flex; align-items: center; justify-content: center; position: relative;
  background: linear-gradient(#ececec, #dcdcdc); border-bottom: 1px solid #c4c4c4; font: 13px/28px var(--ui); color: #333; white-space: nowrap; }
.win .bar .lights { position: absolute; left: 10px; top: 8px; display: flex; gap: 8px; }
.win .bar .lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.win .bar .lights i:nth-child(1) { background: #ff5f57; } .win .bar .lights i:nth-child(2) { background: #febc2e; } .win .bar .lights i:nth-child(3) { background: #28c840; }
.win .bar .t { overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 90px); }
.win .body { position: absolute; left: 0; right: 0; top: 29px; bottom: 0; overflow: hidden; background: #fff; }
.win svg.canvas { position: absolute; left: 0; top: 0; }
.win.back { filter: saturate(.85) brightness(.97); }

/* Gem windows: black, the image, a credit line (every image carries its author and licence) */
.win.gem .body { background: #000; }
.win.gem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* no CSS filter on the picture: filter + the overlays above it rendered whole pictures black in Chromium (3 Oct, probed) */ }
.win.gem.fit img { object-fit: contain; }
.win.gem .credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px; font: 11px/1.3 var(--mono); color: #fff;
  background: rgba(0,0,0,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win.gem .halftone { position: absolute; inset: 0; opacity: calc(var(--rot) * .42); /* no blend modes: a multiply/screen pair blacked whole pictures in Chromium (3 Oct) */
  background-image: radial-gradient(circle, rgba(0,0,0,.9) 1.1px, transparent 1.6px); background-size: 5px 5px; }
.win.gem .tint { position: absolute; inset: 0; opacity: calc(var(--rot) * .22); }

/* the Pd window (console) */
.win.console .body { font: 12px/16px var(--mono); }
.win.console .head { height: 30px; display: flex; align-items: center; gap: 14px; padding: 0 10px; border-bottom: 1px solid #ddd; font: 13px var(--ui); }
.win.console .head .dsp { display: flex; align-items: center; gap: 5px; }
.win.console .head .dsp i { width: 13px; height: 13px; border: 1px solid #777; border-radius: 3px; display: inline-block; background: #fff; }
.win.console .head .dsp.on i { background: #000; }
.win.console .head .io { margin-left: auto; color: #c00; font-size: 12px; }
.win.console .log { position: absolute; left: 0; right: 0; top: 31px; bottom: 0; padding: 4px 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.win.console .log div { white-space: pre-wrap; word-break: break-word; }
.win.console .log .err { color: #f00; }
.win.console .log .ultra { color: var(--ultra); } .win.console .log .pink { color: var(--pink); } .win.console .log .green { color: var(--green); }

/* Pd's [text] editor window */
.win.textwin .body { padding: 10px 14px; font: 17px/1.32 var(--mono); white-space: pre; color: #000; overflow: hidden; }

/* mould and rot: blobs that grow at the windows' edges */
.mould { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: multiply; z-index: 8000;
  transition: transform 6s ease-out, opacity 2s; transform: scale(0); }

/* the gate (first click: fullscreen + audio unlock) */
#gate { position: absolute; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); cursor: pointer; }
#gate .card { background: #fff; padding: 28px 36px; border-radius: 10px; font: 16px/1.5 var(--mono); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#gate .card b { font-size: 22px; }
#gate .card .k { color: #555; font-size: 13px; }

/* ---------- variants ---------- */
#stage[data-v="office"] { background: #ececec; }
#stage[data-v="office"] #desk .tile { opacity: var(--tile, 0); transition: opacity 2s; }
#stage[data-v="rot"] { background: #17120d; }
#stage[data-v="rot"] #desk .tile { filter: brightness(.38) sepia(.7) hue-rotate(40deg) saturate(1.6); }
#stage[data-v="rot"] .win { box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 18px 60px rgba(40,60,10,.65); }
#stage[data-v="rot"] .mould { mix-blend-mode: normal; opacity: .85; }
#stage[data-v="collage"] #desk .tile { filter: grayscale(.5) contrast(1.2); }
.win.gem .bar { justify-content: flex-start; padding-left: 76px; }
.win.gem .bar .t { max-width: calc(100% - 10px); }
#stage[data-v="rot"] .win .body, #stage[data-v="rot"] .win svg.canvas rect[fill="#fff"] { background: #f1ead2; }
#stage[data-v="rot"] .win .bar { background: linear-gradient(#cdbf9a, #b3a47c); border-bottom-color: #8a7a52; color: #2b2214; }
#stage[data-v="rot"] #menubar { background: rgba(214,200,160,.92); }