/* The studio bench: deck, easel and the card framed by what it is. The room is room.css;
   gilt belongs to the works on the easel, nothing else. */
#rail { display: grid; gap: 8px; }
.thumb { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 6px; border: 0; color: var(--tx); cursor: pointer; text-align: left; font: inherit; transition: box-shadow 0.25s, background 0.25s; min-width: 0; }
.thumb canvas { width: 40px; height: auto; display: block; border-radius: 4px; image-rendering: pixelated; background: var(--black); }
.thumb > span { min-width: 0; }
.thumb b { display: block; margin-bottom: 4px; }
.thumb span span { display: block; font: 500 11px/1.25 var(--display); letter-spacing: 0.04em; }

.easel { display: grid; gap: clamp(12px, 1.8vw, 22px); min-width: 0; }
.easel > *, .sect { min-width: 0; }
.stage, .console, .files { padding: 16px 18px 18px; }
.console { padding-bottom: 10px; }
.stage { display: flex; flex-direction: column; align-items: stretch; }
#meta { font-variant-numeric: tabular-nums; }

/* ── The card on the easel, framed by what it is ─────────────────────────────────── */
.card { position: relative; align-self: center; width: min(100%, 540px, calc((100vh - 330px) * 7 / 12)); aspect-ratio: 7 / 12; background: var(--night); border-radius: 2.6%; overflow: hidden; container-type: inline-size; }
.card .gilt { position: absolute; inset: 4.86%; box-shadow: 0 0 0 0.4cqw var(--g4), 0 0 0 1cqw var(--g3), 0 0 0 1.6cqw var(--g2), 0 0 0 2cqw var(--g1), 0 0 0 2.4cqw var(--g0); }
.card .num { position: absolute; left: 0; right: 0; top: 4.6%; height: 8%; display: flex; align-items: center; justify-content: center; font: 900 9.4cqw/1 var(--display); letter-spacing: 0.06em; background: linear-gradient(180deg, var(--g-hi), var(--g-mid) 44%, var(--g-low) 54%, var(--g-glint) 78%, var(--g-base)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card .win { position: absolute; left: 10%; top: 13.33%; width: 80%; height: 71.67%; background: var(--black); box-shadow: 0 0 0 0.3cqw var(--g-ink), 0 0 0 0.7cqw var(--g3), 0 0 0 1cqw var(--g1), 0 0 0 1.3cqw var(--black); }
.card .win canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.card .plate { position: absolute; left: 10%; right: 10%; top: 86.7%; height: 9.2%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw; border-top: 0.3cqw solid var(--rule-gold); border-bottom: 0.3cqw solid var(--rule-gold); }
.card .plate b { font: 700 5.2cqw/1 var(--display); letter-spacing: 0.14em; white-space: nowrap; background: linear-gradient(180deg, var(--g-hi), var(--g-mid) 46%, var(--g-low) 56%, var(--g-glint) 82%, var(--g-base)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card .plate small { font: 500 1.9cqw/1 var(--mono); letter-spacing: 0.32em; color: var(--lilac); }
/* A back: the design to the mouldings, no words. 112:200 inside 7:12. */
.card[data-frame="back"] .num, .card[data-frame="back"] .plate { display: none; }
.card[data-frame="back"] .win { left: 7%; width: 86%; top: 5.21%; height: 89.58%; }
/* A print: numeral, square plate, title. 3:4. */
.card[data-frame="print"] { aspect-ratio: 3 / 4; width: min(100%, 600px, calc((100vh - 330px) * 3 / 4)); }
.card[data-frame="print"] .num { top: 3.6%; height: 9%; font-size: 8cqw; }
.card[data-frame="print"] .win { left: 9.5%; width: 81%; top: 15.6%; height: 60.75%; }
.card[data-frame="print"] .plate { left: 9.5%; right: 9.5%; top: 81%; height: 11%; }
/* Cloth: the length itself, a label beneath. */
.card[data-frame="cloth"] { aspect-ratio: 5 / 6; width: min(100%, 600px, calc((100vh - 330px) * 5 / 6)); background: transparent; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.7)); }
.card[data-frame="cloth"] .gilt, .card[data-frame="cloth"] .num { display: none; }
.card[data-frame="cloth"] .win { left: 0; top: 0; width: 100%; height: 83.33%; border-radius: 1.4cqw; overflow: hidden; box-shadow: none; }
.card[data-frame="cloth"] .plate { left: 6%; right: 6%; top: 87%; height: 11%; }

/* ── Direct: ask and surprise ────────────────────────────────────────────────────── */
.ask { display: grid; gap: 10px; }
.askrow { display: flex; gap: 8px; flex-wrap: wrap; }
.askrow input { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.32); border: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--tx); padding: 12px 14px; }
.askrow input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--n2), 0 0 0 3px rgba(184, 153, 90, 0.18); }
.ask .note { margin: 0; min-height: 1.4em; padding: 0 4px; color: var(--tx2); font: 400 14px/1.45 var(--serif); }
.files .actions, .exports { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Motion: play on the easel, GIFs in the files ──────────────────────────────── */
.stagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 14px; min-width: 0; }
.stagebar #motionLine { font: 400 13px/1.3 var(--serif); color: var(--mute); min-width: 0; }
#play[aria-pressed="true"] { background: var(--neon); color: #fff; box-shadow: var(--glow); }
.gifrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.gifrow .glab { font: 500 10px/1 var(--mono); letter-spacing: 0.2em; color: var(--mute); }
.gifrow #saveGif { margin-left: auto; }

/* ── Smaller rooms ───────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  #rail { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .thumb { flex: 0 0 auto; min-width: 156px; }
}
/* The zoomer shrinks to its content, so a card sized in % had nothing to fill: give it the row. */
@media (max-width: 1180px), (max-height: 639px) { .zoomer { width: 100%; } }
@media (max-width: 760px) {
  .card, .card[data-frame] { width: 100%; }
  .askrow input { flex-basis: 100%; }
  .askrow button { flex: 1; }
}

/* ── The locked bench: one screen, no page scroll. Deck left, controls right, each scrolling
   inside its own glass; the card takes the centre column with Direct as one line beneath it.
   Narrower and very short windows keep the scrolling page. ───────────────────────────── */
.well { display: flex; justify-content: center; min-width: 0; }
.gtabs { display: none; }
@media (min-width: 1181px) and (min-height: 640px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
  .bar { flex: none; flex-wrap: nowrap; padding-block: 10px; }
  .bar > * { flex: none; }
  .bar .instruments { flex: 0 1 auto; min-width: 0; scrollbar-width: none; }
  .bar .status { flex: 0 1000 auto; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Rows: the card's height | Files' top half | the Direct line. Files spans the last two, so
     Direct costs the card only its own height. */
  .bench { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; align-items: stretch; padding-bottom: clamp(12px, 1.8vw, 22px); }
  .easel { display: contents; }
  .rail { grid-area: 1 / 1 / -1 / 2; }
  .stage { grid-area: 1 / 2 / 3 / 3; }
  .console { grid-area: 3 / 2 / 4 / 3; }
  .panel { grid-area: 1 / 3 / 2 / 4; }
  .files { grid-area: 2 / 3 / 4 / 4; }

  /* Deck: scrolls, its head pinned. */
  .rail { position: static; height: auto; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .rail > .sect { position: sticky; top: -16px; z-index: 2; margin: -16px -16px 12px; padding: 16px 16px 12px; border-radius: var(--r) var(--r) 0 0; background: rgba(18, 12, 26, 0.97); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 14px -10px rgba(0, 0, 0, 0.7); }
  /* The deck laid out as a spread: two cards abreast, the art first, numeral and name beneath. */
  #rail { grid-template-columns: 1fr 1fr; gap: 8px; }
  .thumb { grid-template-columns: 1fr; gap: 7px; padding: 6px 6px 9px; border-radius: 11px; text-align: center; align-content: start; }
  .thumb canvas { width: 100%; border-radius: 5px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .thumb:hover canvas { transform: translateY(-2px); }
  .thumb b { margin-bottom: 3px; font-size: 11px; }
  .thumb span span { font-size: 9.5px; letter-spacing: 0.06em; line-height: 1.3; }
  .rail::-webkit-scrollbar, #panel::-webkit-scrollbar { width: 6px; }
  .rail::-webkit-scrollbar-thumb, #panel::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(184, 153, 90, 0.35); }

  /* Controls: one group at a time behind tabs; only the group scrolls, and only if it must. */
  .panel { position: static; max-height: none; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .panel > .sect { flex: none; margin-bottom: 12px; }
  .gtabs { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 2px; padding: 3px; margin-bottom: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px var(--glass-edge); }
  .gtab { display: flex; justify-content: center; min-width: 0; padding: 9px 6px; border-radius: 9px; box-shadow: none; background: transparent; color: var(--mute); text-transform: none; letter-spacing: 0; }
  .gtab .gn { display: none; }
  .gtab .gt { font: 500 11px/1 var(--display); letter-spacing: 0.05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gtab:hover { color: var(--tx); background: rgba(255, 255, 255, 0.05); }
  .gtab[aria-selected="true"] { color: var(--tx); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 -2px 0 var(--n2); }
  #panel { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(184, 153, 90, 0.4) transparent; margin-inline: -4px; padding-inline: 4px; }
  #panel .group { display: none; margin: 0; background: transparent; box-shadow: none; }
  #panel .group[data-front] { display: block; }
  #panel .group summary { display: none; }
  #panel .gbody { padding: 0 2px; }
  .panel .seed { flex: none; margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .panel .hint { flex: none; margin-top: auto; padding-top: 14px; font-size: 13px; line-height: 1.45; }
  .panel .keys { display: none; }
  @media (max-height: 819px) { .panel .hint { display: none; } }

  /* Easel. */
  .stage { min-height: 0; padding-bottom: 12px; }
  .stage .sect { margin-bottom: 10px; }
  .well { flex: 1; min-height: 0; align-items: center; container-type: size; background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(156, 127, 69, 0.10), transparent 70%); border-radius: 12px; }
  .card { width: min(100cqw, 540px, 100cqh * 7 / 12); }
  .card[data-frame="print"] { width: min(100cqw, 600px, 100cqh * 3 / 4); }
  .card[data-frame="cloth"] { width: min(100cqw, 600px, 100cqh * 5 / 6); }
  .stagebar { flex: none; margin-top: 10px; }

  /* Direct: one line under the card. */
  .console { padding: 10px 12px; }
  .console .sect { display: none; }
  .ask { gap: 0; }
  .askrow { flex-wrap: nowrap; gap: 6px; }
  .askrow input { padding: 10px 13px; font-size: 15px; }
  .askrow button { padding: 10px 12px; font-size: 10px; }
  .ask .note { min-height: 0; font-size: 13px; }
  .ask .note:not(:empty) { padding-top: 8px; }

  /* Files: a compact desk under the controls. Five actions two-up, the GIF on one line. */
  .files { padding: 14px 16px 16px; }
  .files .sect { margin-bottom: 12px; }
  .files .actions { display: grid; gap: 6px; }
  .files .exports { display: contents; }
  .files button { padding: 9px 10px; font-size: 10px; letter-spacing: 0.1em; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .files #toApex { letter-spacing: 0.12em; color: var(--tx2); }
  .files .gifrow { flex-wrap: nowrap; gap: 8px; margin-top: 10px; padding-top: 10px; }
  .files .gifrow .glab { display: none; }
  .files .gifrow .chips { flex-wrap: nowrap; gap: 0; padding: 2px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px var(--glass-edge); }
  .files .gifrow .chip { padding: 7px; border-radius: 7px; box-shadow: none; background: transparent; font-size: 10px; }
  .files .gifrow .chip:hover { color: var(--tx); }
  .files .gifrow .chip[aria-checked="true"] { background: var(--neon); color: #fff; }
  .files .gifrow #saveGif { flex: 1 0 auto; margin-left: 0; padding-inline: 8px; letter-spacing: 0.08em; }

  /* Focus: the card alone, as large as the screen allows. */
  .focus .bench { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: clamp(16px, 3vh, 36px); }
  .focus .stage { grid-area: 1 / 1 / -1 / -1; }
  .focus .card, .focus .card[data-frame] { width: min(100cqw, 100cqh * 7 / 12); }
  .focus .card[data-frame="print"] { width: min(100cqw, 100cqh * 3 / 4); }
  .focus .card[data-frame="cloth"] { width: min(100cqw, 100cqh * 5 / 6); }
}
@media (min-width: 1181px) and (max-width: 1599px) and (min-height: 640px) {
  .inst { padding: 9px 13px; }
  .inst small { display: none; }
}

/* ── Original: held, the easel shows the card as the deck has it ──────────────────────── */
.card[data-original]::after { content: "Original"; position: absolute; left: 50%; top: 1.6%; transform: translateX(-50%); padding: 0.9cqw 2.4cqw; border-radius: 99px; font: 500 max(9px, 2.1cqw)/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: #12091a; background: rgba(255, 255, 255, 0.92); z-index: 3; }

/* ── Focus, in every room: the bar, deck, controls and files step away ─────────────────── */
.focus .bar, .focus .rail, .focus .panel, .focus .files, .focus .console, .focus .stage > .sect { display: none; }
.focus .bench { grid-template-columns: minmax(0, 1fr); }
.focus .stage { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.focus .stage::before { display: none; }
.focus .well { background: radial-gradient(ellipse 50% 55% at 50% 50%, rgba(156, 127, 69, 0.14), transparent 72%); }
.focus .card { animation: arrive 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.focus .aura i { opacity: 0.4; }
.focus .stagebar { transition: opacity 0.5s; }
.focus.idle { cursor: none; }
.focus.idle .stagebar { opacity: 0; }
#focus[aria-pressed="true"] { background: var(--neon); color: #fff; box-shadow: var(--glow); }
@keyframes arrive { from { opacity: 0.35; transform: scale(0.965); } }
/* A new card settles onto the easel rather than cutting in. */
.card.arrive { animation: settle 0.42s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes settle { from { opacity: 0.25; transform: translateY(6px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) { .focus .card, .card.arrive { animation: none; } }

/* ── The card in the hand: a lean toward the pointer, a light that travels the gilt ────── */
.card { transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card.lit { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.15s ease-out; }
.card .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 244, 196, 0.34), rgba(255, 244, 196, 0.06) 34%, transparent 58%); }
.card.lit .sheen { opacity: 1; }
.card[data-frame="cloth"] .sheen { inset: 0 0 16.67% 0; border-radius: 1.4cqw; }
.idle .card.lit { transform: none; }
.idle .card .sheen { opacity: 0; }
@media (min-width: 1181px) and (min-height: 640px) {
  .stagebar { flex-wrap: nowrap; }
  .stagebar #motionLine { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Short laptop screens: Files folds to two rows so the controls keep room to work. */
@media (min-width: 1181px) and (min-height: 640px) and (max-height: 799px) {
  .files { padding-block: 12px; }
  .files .sect { display: none; }
  .files .actions { grid-template-columns: repeat(3, 1fr); }
  .files .actions button, .files #toApex { grid-column: auto; padding-inline: 4px; font-size: 9.5px; letter-spacing: 0.02em; }
  .files .gifrow { margin-top: 8px; padding-top: 8px; }
}

/* ── Universal: formats, the palette, the link ─────────────────────────────────────────── */
.fmtrow { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; margin-top: 10px; }
.fmtrow select { min-width: 0; appearance: none; -webkit-appearance: none; padding: 9px 24px 9px 10px; border: 0; color: var(--tx); font: 500 10px/1.2 var(--mono); letter-spacing: 0.04em; cursor: pointer; text-overflow: ellipsis; }
.fmtrow select:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.fmtrow select:disabled { opacity: 0.4; cursor: default; }
.fmtrow select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fmtrow option, .fmtrow optgroup { color: var(--tx); }
.swatches { display: flex; gap: 4px; flex: none; }
.swatch { width: 18px; height: 18px; padding: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.8); transition: transform 0.15s; }
.swatch:hover { transform: translateY(-2px) scale(1.12); background-blend-mode: normal; }
.focus .swatches { display: none; }
@media (min-width: 1181px) and (min-height: 640px) and (max-height: 799px) {
  .fmtrow { margin-top: 8px; }
}

/* ── The maker: Keep, collections ─────────────────────────────────────────────── */
#keep.kept { animation: kept 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes kept { 30% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), var(--glow); } }
.kbtn .count:not(:empty) { margin-left: 2px; padding: 2px 6px; font: 500 9.5px/1 var(--mono); }

.sheet { position: fixed; inset: 0; margin: auto; padding: 26px 28px 24px; border: 0; color: var(--tx); background: #14130f; box-shadow: inset 0 0 0 1px var(--glass-edge); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sheet::backdrop { background: rgba(6, 6, 5, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet[open] { animation: sheetIn 0.38s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.sheet .shead { margin-bottom: 14px; }
.sheet .shead.row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sheet .shead .k { margin: 0 0 8px; }
.sheet h2 { margin: 0; font: 300 clamp(26px, 3vw, 34px)/1.1 var(--serif); }
.sheet h3 { margin: 0 0 4px; font: 400 22px/1.2 var(--serif); cursor: text; }
.sheet .lede, .sheet .mute { color: var(--tx2); font: 400 15px/1.5 var(--serif); margin: 0 0 18px; }
.sheet .mute { color: var(--mute); }
.sheet .sacts { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet .armed { background: rgba(184, 153, 90, 0.22); box-shadow: inset 0 0 0 1px var(--n2); color: #fff; }


.library { width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); display: none; flex-direction: column; overflow: hidden; }
.library[open] { display: flex; }
.library .empty { margin: auto; text-align: center; max-width: 420px; }
.library .empty p:first-child { margin: 0 0 8px; }
.lbody { flex: 1; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.lnav { display: grid; align-content: start; gap: 6px; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.lcol { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-align: left; text-transform: none; letter-spacing: 0; }
.lcol i { width: 44px; height: 56px; border-radius: 6px; background: rgba(0, 0, 0, 0.4) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--glass-edge); }
.lcol b { display: block; font: 400 15px/1.25 var(--serif); color: var(--tx); margin-bottom: 4px; overflow-wrap: anywhere; }
.lcol small { font: 400 10.5px/1.3 var(--mono); color: var(--mute); }
.lcol[aria-current="true"] { background: var(--neon-soft); box-shadow: inset 0 0 0 1px rgba(184, 153, 90, 0.75); }
.lmain { min-height: 0; display: flex; flex-direction: column; border-radius: 14px; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px var(--glass-edge); padding: 18px; }
.ltop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.lrename { background: rgba(0, 0, 0, 0.32); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--n2); color: var(--tx); padding: 6px 10px; font: 400 22px/1.2 var(--serif); }
.lworks { list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; overflow-y: auto; scrollbar-width: thin; align-content: start; flex: 1; min-height: 0; }
.lworks li { position: relative; }
.lwork { display: grid; gap: 8px; width: 100%; padding: 8px 8px 10px; border-radius: 12px; text-align: left; text-transform: none; letter-spacing: 0; }
.lwork img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.9); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lwork:hover img { transform: translateY(-3px); }
.lwork b { display: block; }
.lwork small { font: 400 10px/1.3 var(--mono); color: var(--mute); }
.lx { position: absolute; top: 12px; right: 12px; padding: 6px 9px; font-size: 12px; opacity: 0; }
.lworks li:hover .lx, .lx:focus-visible, .lx.armed { opacity: 1; }
.empty-in { margin: 6px 0 0; }
@media (max-width: 760px) {
  .lbody { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lnav { grid-auto-flow: column; grid-auto-columns: 220px; overflow-x: auto; }
  .lworks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx { opacity: 1; }
}
@media (min-width: 1181px) and (max-width: 1399px) and (min-height: 640px) {
  .bar { column-gap: 14px; }
  .stagebar #motionLine { display: none; }
}

/* ── Standards: touch has no hover; phones read at 12 px or more ───────────────────────── */
@media (hover: none) { .lx { opacity: 1; } .thumb:hover canvas, .lwork:hover img { transform: none; } }
@media (max-width: 760px) {
  button, .keys, .keys kbd, .inst small, .inst b, .sect, .sect span, .status, .k, .val, .valbox, .chip, .rooms a,
  .gifrow .glab, .thumb span span, .lcol small, .lwork small, .fmtrow select { font-size: 12px; }
  .thumb b { font-size: 13px; }
}

/* ── Zoom: the easel as a canvas you can move through ──────────────────────────────────── */
.well { position: relative; touch-action: pan-x pan-y; }
.well[data-zoomed] { overflow: hidden; touch-action: none; }
.zoomer { transform-origin: 0 0; display: flex; justify-content: center; }
.well[data-zoomed] { cursor: grab; }
.well.panning { cursor: grabbing; }
.well[data-zoomed] .card { filter: none; }
#zoomFit { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 62px; }

/* ── Files: the design-file menu, the print PDF ───────────────────────────────────────── */
.menu { position: relative; }
.menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; height: 100%; font: 500 11px/1 var(--mono); text-transform: uppercase; color: var(--tx); padding: 12px 15px; cursor: pointer; white-space: nowrap; user-select: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 5px; height: 5px; margin-left: 8px; border-right: 1.5px solid var(--mute); border-bottom: 1.5px solid var(--mute); transform: rotate(-135deg) translate(-1px, -1px); }
.menu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.menu-pop { position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 0; min-width: 100%; display: grid; gap: 4px; padding: 6px; }
.menu-pop { width: max-content; }
.files .menu-pop button, .menu-pop button { white-space: nowrap; text-align: left; overflow: visible; text-overflow: clip; }
@media (min-width: 1181px) and (min-height: 640px) {
  .files .menu > summary { padding: 9px 10px; font-size: 10px; letter-spacing: 0.1em; border-radius: 9px; }
  .files #savePdf { grid-column: 1 / -1; }
}
@media (min-width: 1181px) and (min-height: 640px) and (max-height: 799px) {
  .files .menu > summary { padding-inline: 4px; font-size: 9.5px; letter-spacing: 0.02em; }
}

/* ── History: every version of the card in hand ────────────────────────────────────────── */
.headbtn { margin-left: 10px; padding: 6px 9px; font-size: 9.5px; letter-spacing: 0.12em; border-radius: 8px; }
.history { width: min(720px, calc(100vw - 32px)); max-height: min(820px, calc(100dvh - 32px)); }
.hlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hrow { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.hrow canvas { width: 64px; height: auto; max-height: 96px; object-fit: contain; border-radius: 5px; image-rendering: pixelated; background: var(--black); }
.hrow b { display: block; font: 400 16px/1.2 var(--serif); color: var(--tx); margin-bottom: 3px; }
.hrow small { font: 400 10.5px/1.3 var(--mono); color: var(--mute); }
.hrow .mute { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 760px) { .headbtn { margin-left: 0; font-size: 12px; } .hrow { grid-template-columns: 52px 1fr; } .hrow button { grid-column: 1 / -1; } .files .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .files .exports { display: contents; } }