/* Studio section (#studio): the canvas with the editor's panels over it.
   Option 1 of the first sketches, his pick, with its own pictures: a 1240px
   picture with depth (layers far, mid and near, panels in front, each moving
   at its own speed as you scroll), the dot grid fading out on every side, the
   vector panel drawing real shapes, the export dialog running real exports,
   and an icon over each of the four points with one line under it. Runs from
   studio.js. Shape rule: 12px floating panels, 6px fields and buttons,
   pictures square, no pills. Inter only, no caps. */

.s1-sec {
  --bg-1: #0a0a0a; --bg-2: #0f0f0f; --bg-3: #161616; --bg-4: #1d1d1d;
  --l1: rgba(255, 255, 255, 0.05); --l2: rgba(255, 255, 255, 0.08); --l3: rgba(255, 255, 255, 0.14);
  --f0: #f5f5f5; --f1: #d4d4d4; --f2: #8a8a8a; --f3: #595959; --f4: #3a3a3a;
  --cy: #7df9ff; --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- shared editor pieces ---------------------------------------------- */
.so-float {
  border: 1px solid var(--l3); border-radius: 12px; background: rgba(13, 13, 13, 0.88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.45);
}
.so-ico { width: 14px; height: 14px; display: block; flex: none; }
.so-seg { position: relative; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--l2); border-radius: 6px; }
.so-seg b { position: relative; z-index: 1; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; font-weight: 500; font-size: 11.5px; color: var(--f3); border-radius: 4px; transition: background 200ms, color 200ms; }
.so-seg b.on { background: var(--bg-4); color: var(--f0); }
.so-fld { height: 28px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid var(--l2); border-radius: 6px; background: var(--bg-1); color: var(--f1); font-variant-numeric: tabular-nums; }

/* ======================================================================
   the picture: a canvas with depth, the editor's panels in front
   ====================================================================== */
/* the dots reach past the picture, never past the page */
.s1-sec { overflow-x: clip; }
.s1 { position: relative; max-width: 1240px; margin: 0 auto; aspect-ratio: 1240 / 640; }
/* the dot grid, wider than the picture and fading out on every side */
.s1-dots {
  position: absolute; inset: -10% -14%; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.45) 66%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.45) 66%, transparent 100%);
}
.s1-world { position: absolute; inset: 0; }
.s1 .ly { position: absolute; margin: 0; will-change: translate; }
.s1 .ly figcaption { display: flex; align-items: center; gap: 6px; height: 16px; margin-bottom: 7px; font-size: 11.5px; color: var(--f2); white-space: nowrap; overflow: hidden; }
.s1 .ly figcaption i { width: 8px; height: 8px; flex: none; background: var(--c, var(--f3)); }
.s1 .ly .im { position: relative; }
.s1 .ly img, .s1 .ly video { display: block; width: 100%; height: auto; }
.s1 .ly.sel .im::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cy); pointer-events: none; }
.s1 .ly .im > i { position: absolute; z-index: 1; width: 7px; height: 7px; margin: -4px 0 0 -4px; background: #050505; border: 1px solid var(--cy); }
/* depth: far layers sit back in the dark, near ones come forward */
.s1 .ly.d0 .im { filter: brightness(0.5) saturate(0.8); }
.s1 .ly.d0 figcaption { opacity: 0.55; }
.s1 .ly.d1 .im { filter: brightness(0.78) saturate(0.92); }
.s1 .ly.d2 .im { box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.85); }
.s1 .pnl { position: absolute; z-index: 3; will-change: translate; }

/* ---- the timeline (timeline-panel.tsx) ---------------------------------- */
.so-tl { overflow: hidden; font-size: 12px; color: var(--f2); container-type: inline-size; }
.so-tl .top { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--l1); white-space: nowrap; }
.so-tl .top .t { color: var(--f0); font-weight: 600; font-size: 12.5px; }
.so-tl .top .tp { display: flex; gap: 2px; color: var(--f1); }
.so-tl .top .tp span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.so-tl .top .tp span.on { background: var(--bg-4); }
.so-tl .top .tc { color: var(--f0); font-variant-numeric: tabular-nums; }
.so-tl .top .seg { margin-left: auto; }
.so-tl .body { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.so-tl .names > div, .so-tl .lanes > div { height: 30px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
.so-tl .names { border-right: 1px solid var(--l1); }
.so-tl .names > div { gap: 8px; padding: 0 12px; color: var(--f1); white-space: nowrap; overflow: hidden; }
.so-tl .names > div.sub { padding-left: 30px; color: var(--f2); }
.so-tl .names i { width: 8px; height: 8px; flex: none; background: var(--c); }
.so-tl .names .n { margin-left: auto; color: var(--c); font-variant-numeric: tabular-nums; }
.so-tl .ruler { height: 26px; color: var(--f3); }
.so-tl .lanes { position: relative; }
.so-tl .lanes .ruler span { position: absolute; top: 7px; font-size: 11px; font-variant-numeric: tabular-nums; transform: translateX(4px); }
.so-tl .lanes .ruler span::before { content: ""; position: absolute; left: -4px; top: -7px; width: 1px; height: 26px; background: var(--l2); }
.so-tl .lanes > div { position: relative; }
.so-tl .bar { position: absolute; height: 3px; top: 13.5px; background: color-mix(in srgb, var(--c) 55%, transparent); }
.so-tl .line { position: absolute; height: 1px; top: 15px; background: color-mix(in srgb, var(--c) 45%, transparent); }
.so-tl .k { position: absolute; top: 10px; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg); border: 1px solid var(--c); background: #0d0d0d; transition: background-color 700ms ease; }
.so-tl .k.hit { background: var(--c); transition: none; }
.so-tl .ph { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(255, 255, 255, 0.85); pointer-events: none; }
.so-tl .ph::before { content: ""; position: absolute; top: 0; left: -5px; border: 5px solid transparent; border-top: 7px solid #fff; border-bottom: 0; }
@container (max-width: 470px) { .so-tl .top .dur, .so-tl .top .seg { display: none; } .so-tl .body { grid-template-columns: 112px minmax(0, 1fr); } }

/* ---- the vector panel: tools, an artboard, a readout ---------------------- */
.so-vx .tools { display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--l1); }
.so-vx .tools span { width: 30px; height: 30px; display: grid; place-items: center; color: var(--f2); border-radius: 6px; transition: background 160ms, color 160ms; }
.so-vx .tools span.on { background: var(--bg-4); color: var(--f0); }
.so-vx .tools .lbl { width: auto; margin-left: auto; padding: 0 8px; font-size: 12px; color: var(--f1); }
.so-vx .art { display: block; width: 100%; height: auto; padding: 10px 10px 0; box-sizing: border-box; overflow: visible; }
.so-vx .board { fill: rgba(255, 255, 255, 0.015); stroke: var(--l2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.so-vx .selr { fill: none; stroke: var(--cy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.so-vx .hd { fill: #050505; stroke: var(--cy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.so-vx .pen { fill: none; stroke: #f5f5f5; stroke-width: 4; stroke-linecap: square; }
.so-vx .pen-h { stroke: var(--cy); stroke-width: 1; vector-effect: non-scaling-stroke; }
.so-vx .pen-a { fill: #050505; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.so-vx .pts { transition: opacity 200ms ease; }
.so-vx .ft { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; font-size: 12px; color: var(--f2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.so-vx .ft .ok { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--cy); opacity: 0; transform: translateY(4px); transition: opacity 220ms ease, transform 320ms var(--ease); }
.so-vx .ft .ok.on { opacity: 1; transform: none; }

/* ---- the export dialog (export-dialog.tsx): runs real exports ------------- */
.so-ex { position: relative; overflow: hidden; padding: 14px 14px 12px; font-size: 12px; color: var(--f2); }
.so-ex .h { display: flex; align-items: center; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--f0); }
.so-ex .h .x { margin-left: auto; color: var(--f3); }
.so-ex .tabs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; box-sizing: border-box; margin-bottom: 14px; }
.so-ex .tabs b { justify-content: center; }
.so-ex .tabs b.on { background: none; }
.so-ex .tabs .ind { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 8px) / 3); border-radius: 4px; background: var(--bg-4); transition: transform 380ms var(--ease); }
.so-ex .sets { display: grid; }
.so-ex .sets > div { grid-area: 1 / 1; transition: opacity 220ms ease; }
.so-ex .sets > div.off { opacity: 0; }
.so-ex .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; white-space: nowrap; }
.so-ex .ft { display: flex; align-items: center; gap: 8px; margin-top: 16px; white-space: nowrap; }
.so-ex .ft .st { flex: 1; min-width: 0; overflow: hidden; color: var(--f2); font-variant-numeric: tabular-nums; }
.so-ex .ft .st.done { color: var(--cy); }
.so-ex .ft .b { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--f1); border: 1px solid var(--l2); }
.so-ex .ft .b.go { font-weight: 600; color: #050505; background: #f5f5f5; border-color: transparent; transition: transform 120ms ease, opacity 200ms ease; }
.so-ex .ft .b.go.press { transform: scale(0.95); }
.so-ex .ft .b.go.busy { opacity: 0.5; }
.so-ex .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.so-ex .prog i { display: block; height: 100%; width: 0; background: var(--cy); transition: opacity 300ms ease; }
/* the file it wrote, under the dialog */
.ex-file { position: absolute; left: 0; right: 0; top: calc(100% + 10px); display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; font-size: 12px; color: var(--f2); white-space: nowrap;
  opacity: 0; transform: translateY(-8px); transition: opacity 260ms ease, transform 420ms var(--ease); }
.ex-file.on { opacity: 1; transform: none; }
.ex-file b { color: var(--f0); font-weight: 600; }
.ex-file .ic { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border-radius: 6px; background: var(--bg-4); color: var(--cy); }
.ex-file .sz { margin-left: auto; font-variant-numeric: tabular-nums; }


/* ---- where everything sits ----------------------------------------------- */
.s1-vx { left: 0; top: 7%; width: 320px; }
.s1-exw { right: 0; top: 3%; width: 290px; }
.s1-tl { left: 50%; bottom: 0; width: 62%; margin-left: -31%; }

/* ---- the four points under it ----------------------------------------------- */
.s1-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3vw, 48px); margin-top: clamp(56px, 6vw, 88px); }
.so-what .ic { display: block; width: 22px; height: 22px; margin-bottom: 16px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; color: var(--cy); }
.so-what .ic * { vector-effect: non-scaling-stroke; }
.so-what .ic .f, .so-what .ic .f * { fill: currentColor; stroke: none; }
.so-what h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.so-what p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--f2); text-wrap: balance; }

@media (max-width: 1279px) {
  .s1-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tablet: a taller picture so the panels don't meet */
@media (max-width: 1100px) {
  .s1 { aspect-ratio: 1240 / 860; }
  .s1-vx { width: 290px; }
  .s1-exw { width: 280px; }
  .s1-tl { width: 76%; margin-left: -38%; }
}
/* phone: the canvas first, the panels stacked under it, overlapping a little */
@media (max-width: 760px) {
  .s1 { aspect-ratio: auto; display: flex; flex-direction: column; }
  .s1-world { position: relative; inset: auto; aspect-ratio: 4 / 3.6; }
  .s1-dots { inset: -6% -10% 40%; }
  .s1 .pnl { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .s1 .s1-tl { order: 1; margin: -44px 0 0; }
  .s1 .s1-vx { order: 2; margin: 14px 0 0; width: min(88%, 380px); }
  .s1 .s1-exw { order: 3; margin: -28px 0 64px auto; width: min(86%, 330px); }
  /* the four points stay two by two, smaller, so they read as one block
     under the picture instead of a long list */
  .s1-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 40px; }
  .so-what .ic { width: 20px; height: 20px; margin-bottom: 12px; }
  .so-what h3 { margin-bottom: 4px; font-size: 15px; text-wrap: balance; }
  .so-what p { font-size: 13px; }
}