/* tracklog.studio — the matrix scene (matrix-scene.js): its stage, what it says,
   and the app's catalogue window drawn in markup. Sizes and colours of the
   window are the app's own (app stylesheet, 2026-10-01). The window is laid
   out once at 1320×760 and only ever transformed. The spreadsheet used by the
   lab's other scenes is styled in design/home-lab/lab.css. */

/* ---------- a scene: a tall section with a stage that stays on screen ---------- */
.scene{position:relative; margin-top:clamp(20px,4vh,44px)}
.scene-stage{display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,18px);
  padding:clamp(14px,2.6vh,28px) clamp(16px,4vw,40px) clamp(16px,3vh,32px)}
.scene-zone{position:relative; display:block; width:100%; max-width:1180px; color:inherit; text-decoration:none; border-radius:16px}
.scene-zone:hover{text-decoration:none}
/* the camera's box. Its top and bottom edges fade, so a window on its way in never lands on the words above it.
   The fade is a box three times wider than the camera (MatrixScene.mount wraps the camera in it), so a window
   bigger than the box is not cut at the sides. It used to be a mask on the camera itself with mask-clip: no-clip,
   which Safari ignores: there the sides were cut (2026-10-14). */
.scene-fade{position:absolute; top:0; bottom:0; left:-100%; right:-100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
.scene-cam{position:absolute; inset:0; display:block; pointer-events:auto}
.scene-fade > .scene-cam{left:33.3333%; right:auto; width:33.3334%}

/* moving: the stage pins under the header and the scroll drives the scene */
.scene.is-live{height:var(--scene-len,340vh)}
.scene.is-live .scene-stage{position:sticky; top:64px; height:calc(100vh - 64px); height:calc(100svh - 64px); overflow:clip}
.scene.is-live .scene-zone{flex:1; min-height:0}
/* reduced motion: no pin, the finished picture */
.scene.is-still .scene-zone{aspect-ratio:1320/760}

/* ---------- what the scene says ---------- */
.scene-says{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px clamp(18px,2.6vw,36px);
  font-weight:800; font-size:clamp(1.25rem,2.15vw,1.75rem); line-height:1.15; letter-spacing:-.025em; text-align:center}
.scene-says li{color:#fff; white-space:nowrap; transition:color .5s var(--e-out), opacity .5s var(--e-out)}
.scene-says b{color:#fff; font-weight:800}
.scene.is-live .scene-says li{opacity:.26}
.scene.is-live .scene-says li b{color:inherit; transition:color .5s var(--e-out)}
.scene.is-live .scene-says li.was{opacity:.58}
.scene.is-live .scene-says li.on{opacity:1}
.scene.is-live .scene-says li.on b{color:#fff}
@media (max-width:760px){ .scene-says{flex-direction:column; align-items:center; gap:2px} }

/* the five statuses, drawn as the app draws them */
.scene-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px;
  font-size:.875rem; font-weight:600; color:var(--muted); --ink:255,255,255; transition:opacity .5s var(--e-out)}
.scene-legend li{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.scene.is-live .scene-legend{opacity:0}
.scene.is-live .scene-legend.on{opacity:1}

/* the window becomes the way into the demo once it is whole */
.scene-zone .scene-dim{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s var(--e-out);
  background:radial-gradient(32% 38% at 50% 50%, rgba(1,1,1,.62), rgba(1,1,1,0))}
/* no button on a phone or a tablet (the site hides it there), so nothing dims the window either */
@media (max-width:900px){ .scene-zone .scene-dim{display:none} }
.scene-zone .try-cta{opacity:0; transition:opacity .5s var(--e-out)}
.scene.is-live .scene-zone{pointer-events:none}
/* as specific as the rule above it, or the finished window stays unclickable (it did, until 2026-10-02) */
.scene.is-live .scene-zone.is-done, .scene.is-still .scene-zone{pointer-events:auto}
.scene-zone.is-done .scene-dim, .scene.is-still .scene-dim{opacity:1}
.scene-zone.is-done .try-cta, .scene.is-still .try-cta{opacity:1}
.scene-zone.is-done:hover .scene-dim{opacity:.6}
.scene-after{text-align:center}

/* ---------- the app window, in markup ---------- */
.lw{--ink:255,255,255; --tw:280px; position:absolute; left:0; top:0; width:1320px; height:760px; transform-origin:0 0;
  font-size:14px; line-height:1.5; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.92); text-align:left;
  -webkit-user-select:none; user-select:none}
.lw-frame{position:absolute; inset:0; border-radius:14px; background:#010101;
  box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 120px -50px rgba(0,0,0,.95)}
.lw svg{display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.lw-side{position:absolute; left:0; top:0; bottom:0; width:232px; padding:50px 12px 14px; display:flex; flex-direction:column;
  background:#0a0a09; border-right:1px solid rgba(255,255,255,.06); border-radius:14px 0 0 14px}
.lw-wm{padding:0 10px 16px; font-weight:800; font-size:22px; line-height:1; letter-spacing:-.03em; color:#fff}
.lw-wm span{color:#f2b700}
.lw-sbi{display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:1px; border-radius:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.72)}
.lw-sbi svg{opacity:.85}
.lw-sbi .n{margin-left:auto; font-size:12px; font-weight:400; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums}
.lw-sbi.add{color:#f2b700}
.lw-sbi.quiet{color:rgba(255,255,255,.55)}
.lw-sbi.solo{margin-top:16px}
.lw-sbi.foot{margin-top:auto}
.lw-sbh{display:flex; align-items:center; margin-top:14px; padding:7px 10px; border-radius:8px; background:rgba(255,255,255,.06);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.95)}
.lw-sbh .n{margin-left:auto; font-size:12px; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums}
.lw-main{position:absolute; left:232px; right:0; top:0; bottom:0; padding:38px 30px 0}
.lw-title{display:flex; align-items:baseline; gap:12px; height:44px}
.lw-title b{font-size:20px; font-weight:800; line-height:44px; letter-spacing:-.01em; color:#fff}
.lw-title span{font-size:13px; color:rgba(255,255,255,.55)}
.lw-search{display:flex; align-items:center; gap:10px; height:42px; margin-top:6px; padding:0 14px; border-radius:8px; background:#121211; font-size:14px; color:rgba(255,255,255,.55)}
.lw-facets{display:flex; align-items:center; gap:8px; height:36px; margin:12px 0 14px}
.lw-chip{box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.1);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.72)}
.lw-chip svg{width:12px; height:12px}
.lw-colsbtn{margin-left:auto; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:rgba(255,255,255,.72)}
.lw-colsbtn b{color:#f2b700; font-weight:700}
.lw-head, .lr{display:flex; align-items:center; gap:16px}
.lw-head{height:33px; padding:0 16px 9px; font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.55); white-space:nowrap}
.lw-rows{display:flex; flex-direction:column; gap:4px}
.lr{position:relative; height:62.75px; padding:0 16px; border-radius:8px}
.lr-bg{position:absolute; inset:0; border-radius:8px; background:#0a0a09}
.lr > :not(.lr-bg), .lw-head > *{position:relative}
.c-check{flex:0 0 16px; display:flex; justify-content:center}
/* borders, not inset shadows: Safari draws a thin inset shadow crooked once the camera scales the window */
.c-check i{box-sizing:border-box; width:14px; height:14px; border-radius:4px; border:1.5px solid rgba(255,255,255,.22)}
.c-title{flex:0 0 var(--tw); min-width:0}
.lr-t{display:block; width:max-content; max-width:100%; font-size:15px; font-weight:700; line-height:1.25; white-space:nowrap; transform-origin:0 50%}
.lr-m{display:flex; align-items:center; margin-top:2px; font-size:12px; line-height:1.5; color:rgba(255,255,255,.72); white-space:nowrap}
.lr-m .sw{display:block; width:8px; height:8px; margin-right:6px; border-radius:2.5px}
.lr-m .ls{color:rgba(255,255,255,.92)}
.lr-m .sep{margin:0 4px; color:rgba(255,255,255,.55)}
.lr-m .no{font-variant-numeric:tabular-nums}
.lr-y{display:inline-block; transform-origin:0 50%; font-variant-numeric:tabular-nums}
.c-plats{flex:0 0 auto; display:flex; align-items:center; margin-right:8px}
.pd, .pc{position:relative; flex:0 0 26px; width:26px; min-width:26px}
.pd{height:24px; display:grid; place-items:center}
.pd > *{grid-area:1/1}
/* the gap between platform groups: 16px of air and a short quiet hairline, as in the app */
/* width as well as flex-basis: Safari sizes the row of marks by its content, and an empty gap is 1px of content */
.pg{flex:0 0 16px; width:16px; min-width:16px; align-self:stretch; display:grid; place-items:center}
.lr .pg::before{content:""; width:1px; height:12px; border-radius:1px; background:rgba(255,255,255,.07); opacity:var(--sep,1)}
.pc{text-align:center}
.pc .code{display:block; font-size:9px; letter-spacing:0}
/* a platform's full name, set at a slant over its column until the window is whole */
.pc .name{position:absolute; left:50%; bottom:6px; transform-origin:0 100%; transform:rotate(-42deg); white-space:nowrap; opacity:0;
  font-size:11px; font-weight:600; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.86)}
/* the five marks: the app's 13px marks drawn at its .69 scale — live, review, rejected, to upload, not marked */
.pd-dash{width:8px; height:2px; border-radius:1px; background:rgba(var(--ink),.24)}
.pd-s{display:block; width:9px; height:9px; border-radius:50%; flex:none}
.pd-s[data-s="L"]{background:#3ecf8e}
.pd-s[data-s="R"]{background:#f2b700}
/* a border, as the app draws it: Safari draws an inset shadow on a growing mark as a smudged ring */
.pd-s[data-s="T"]{box-sizing:border-box; border:1.5px solid rgba(var(--ink),.55)}
.pd-s[data-s="X"]{border-radius:0; background:#ff6b6b;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20d='M1.1%201.1%208.9%208.9M8.9%201.1%201.1%208.9'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20d='M1.1%201.1%208.9%208.9M8.9%201.1%201.1%208.9'%20stroke='%23000'%20stroke-width='1.5'%20stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.pd-s[data-s="-"]{width:8px; height:2px; border-radius:1px; background:rgba(var(--ink),.3)}
.c-genre{flex:0 0 160px} .c-mood{flex:0 0 100px} .c-bpm{flex:0 0 56px} .c-len{flex:0 0 64px}
.lr .c-bpm, .lr .c-len{font-variant-numeric:tabular-nums}
.lr .c-genre, .lr .c-mood, .lr .c-bpm, .lr .c-len{font-size:13px; color:rgba(255,255,255,.82); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* a phone (the videos' vertical frame): no sidebar, no tick boxes, a shorter title cell */
.lw.lw-narrow{--tw:190px}
.lw-narrow .c-check, .lw-narrow .lw-side{display:none}