/* =========================================================================
   Whisper Studio — the student asset maker.
   Same voice as the site: warm near-black, white type, TeX Gyre Heros 400,
   pills for actions. The chrome stays dark and quiet so the design is the
   only colour on screen. Phone first: the editor is a bottom sheet over a
   tab bar; from 1000px it becomes a rail + panel beside a large stage.
   ========================================================================= */

@font-face {
  font-family: "TeX Gyre Heros";
  src: url("fonts/texgyreheros-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* The face sits its letters low in the line box (ascent 1.15em, descent
     0.28em, caps 0.73em), so text read below centre in every pill and
     button. Same total height, rebalanced so caps sit in the middle;
     nothing moves in layout, and canvas text (alphabetic baseline) is
     untouched. */
  ascent-override: 108%;
  descent-override: 35%;
}
@font-face {
  font-family: "TeX Gyre Heros";
  src: url("fonts/texgyreheros-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  /* The face sits its letters low in the line box (ascent 1.15em, descent
     0.28em, caps 0.73em), so text read below centre in every pill and
     button. Same total height, rebalanced so caps sit in the middle;
     nothing moves in layout, and canvas text (alphabetic baseline) is
     untouched. */
  ascent-override: 108%;
  descent-override: 35%;
}

:root {
  color-scheme: dark;
  --bg: #000000;   /* the site's own black, as at the top of the homepage */
  --fg: #FFFFFF;
  --panel: #1B1713;
  /* tab bar and sheet: the page colour in dark, as on desktop; white in light */
  --chrome: var(--bg);
  /* frosted surfaces floating over the stage */
  --glass: rgba(27, 23, 19, .78);
  --glass-hi: rgba(27, 23, 19, .95);
  --glass-hover: rgba(48, 42, 36, .9);
  --well: color-mix(in srgb, var(--fg) 7%, var(--panel));
  --line: color-mix(in srgb, var(--fg) 12%, transparent);
  --muted: color-mix(in srgb, var(--fg) 62%, transparent);
  --focus: #00D9FF;
  --font: "TeX Gyre Heros", Helvetica, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --r-card: 20px;
  --tabs-h: 64px;
  /* the floating tab bar's glass: see "Tabs" below */
  --dock-glass: rgba(27, 23, 19, .55);
  --dock-edge: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 36px -10px rgba(0,0,0,.7);
  --dock-lens: rgba(255,255,255,.13);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Light: chosen from the ⋯ menu, remembered on the device. The design
   itself never changes with it — only the editor around it. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2EEE8;
  --fg: #130F0C;
  --panel: #FFFFFF;
  --chrome: #FFFFFF;
  /* warm, from the paper — tinting white read as a cool blue-grey */
  --well: color-mix(in srgb, var(--fg) 7%, var(--bg));
  --glass: rgba(255, 255, 255, .82);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hover: rgba(255, 255, 255, 1);
  --dock-glass: rgba(255, 255, 255, .58);
  --dock-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19,15,12,.06), 0 12px 32px -12px rgba(19,15,12,.3);
  --dock-lens: rgba(19,15,12,.08);
}
:root[data-theme="light"] .stage__art { box-shadow: 0 24px 50px -22px rgba(19,15,12,.45), 0 2px 8px rgba(19,15,12,.12); }
:root[data-theme="light"] .pane { box-shadow: 0 -18px 40px -24px rgba(19,15,12,.25); }
:root[data-theme="light"] .checks,
:root[data-theme="light"] .menu { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(19,15,12,.3); }
:root[data-theme="light"] .xport::backdrop { background: rgba(19,15,12,.35); }

/* System (the default) follows the device until Light or Dark is picked */
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: #F2EEE8;
  --fg: #130F0C;
  --panel: #FFFFFF;
  --chrome: #FFFFFF;
  /* warm, from the paper — tinting white read as a cool blue-grey */
  --well: color-mix(in srgb, var(--fg) 7%, var(--bg));
  --glass: rgba(255, 255, 255, .82);
  --glass-hi: rgba(255, 255, 255, .96);
  --glass-hover: rgba(255, 255, 255, 1);
  --dock-glass: rgba(255, 255, 255, .58);
  --dock-edge: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(19,15,12,.06), 0 12px 32px -12px rgba(19,15,12,.3);
  --dock-lens: rgba(19,15,12,.08);
}
:root:not([data-theme="dark"]) .stage__art { box-shadow: 0 24px 50px -22px rgba(19,15,12,.45), 0 2px 8px rgba(19,15,12,.12); }
:root:not([data-theme="dark"]) .pane { box-shadow: 0 -18px 40px -24px rgba(19,15,12,.25); }
:root:not([data-theme="dark"]) .checks,
:root:not([data-theme="dark"]) .menu { box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(19,15,12,.3); }
:root:not([data-theme="dark"]) .xport::backdrop { background: rgba(19,15,12,.35); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body.studio {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.4 var(--font);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ── Top bar ───────────────────────────────────────────────────────────── */

.sbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(60px + env(safe-area-inset-top, 0px));
}
.sbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  text-decoration: none;
}
.sbar__logo { width: 32px; height: 32px; fill: currentColor; view-transition-name: whisper-brand; }
/* mark + product name, no rule between — the same lockup as the Wiki */
.sbar__name {
  view-transition-name: app-name;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sbar__size {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 520px) {
  .sbar__size { display: none; }
  .sbar { gap: 6px; }
  .sbar .pill { padding: 0 14px; }
  .sbar .ibtn { width: 36px; height: 36px; }
  .sbar__hist { gap: 0; }
}

/* ── Undo / redo ───────────────────────────────────────────────────────── */

.sbar__hist { display: flex; gap: 2px; margin-left: auto; }
.ibtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  transition: background-color .2s var(--ease), opacity .2s;
}
.ibtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ibtn[disabled] { opacity: .3; }
.ibtn--light { background: var(--fg); color: var(--bg); margin-left: 4px; }
.ibtn svg .f { fill: currentColor; stroke: none; }

/* ⋯ menu */
.more { position: relative; }
.menu {
  /* pinned to the screen edge, not the button, so it never runs off a phone */
  position: fixed;
  right: 12px;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 30;
  width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 18px;
  background: var(--glass-hi);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0,0,0,.8);
  animation: pop-in .25s var(--ease);
}
.menu__row { display: grid; gap: 10px; padding: 10px 12px 12px; }
.menu__row .seg { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.menu__row .seg__btn { min-height: 32px; padding: 0 14px; font-size: 13.5px; }
.menu__sep { height: 1px; margin: 4px 8px; background: var(--line); }
.menu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--fg);
  text-align: left;
}
@media (hover: hover) { .menu__item:hover { background: var(--well); } }
.menu__text { display: grid; gap: 3px; flex: 1; }
.menu__label { font-size: 15px; }
.menu__note { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.switch {
  flex: none;
  position: relative;
  width: 40px; height: 24px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color .2s var(--ease);
}
.switch::after {
  content: "";
  position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fg);
  transition: transform .25s var(--ease);
}
[aria-checked="true"] > .switch { background: #00B8D9; }
[aria-checked="true"] > .switch::after { transform: translateX(16px); }
.ibtn--light svg { stroke-width: 1.9; }
@media (hover: hover) { .ibtn--light:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)) !important; } }
@media (hover: hover) { .ibtn:not([disabled]):hover { background: var(--well); } }
.ibtn:active:not([disabled]) { transform: scale(.94); }

/* ── Pills ─────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--well);
  color: var(--fg);
  font-size: 15px;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease), opacity .2s;
}
.pill:active { transform: scale(.97); }
.pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pill--light { background: var(--fg); color: var(--bg); }
.pill--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pill--big { min-height: 52px; padding: 0 28px; font-size: 17px; width: 100%; }
.pill[disabled] { opacity: .45; pointer-events: none; }
.pill--file { position: relative; cursor: pointer; }
.pill--file input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.pill--file:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .pill:hover { background: color-mix(in srgb, var(--fg) 14%, var(--panel)); }
  .pill--light:hover { background: color-mix(in srgb, var(--fg) 86%, var(--bg)); }
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

.studio__main {
  width: 100%;
  overflow: hidden;
  height: calc(100% - 60px - env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage" "pane";
}

/* The stage is a soft-lit table the design sits on; the dot grid reads as a
   cutting mat without competing with whatever colour the design is. */
.stage {
  grid-area: stage;
  position: relative;
  /* slides up over the phone keyboard while text is edited (studio.js) */
  transition: transform .3s var(--ease);
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fg) 5%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px,
    var(--bg);
  touch-action: none;
}
.stage__art {
  display: block;
  transform-origin: 50% 50%;
  will-change: transform;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -18px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  touch-action: none;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.stage__art.is-grab { cursor: grab; }
.stage__art.is-grabbing { cursor: grabbing; }
.stage__art.is-text { cursor: text; }
.stage__art.is-pannable { cursor: grab; }
/* zoom pill: bottom right of the stage, over the tab bar's reach on a phone,
   where it only shows once you've pinched in (as a way back to fit) */
.zoomer {
  position: absolute; right: 12px; bottom: calc(12px + var(--under, 0px)); z-index: 3;
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line);
}
.zoomer__btn, .zoomer__pct { display: grid; place-items: center; height: 30px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; transition: background-color .2s; }
.zoomer__btn { width: 30px; }
.zoomer__pct { min-width: 50px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.zoomer__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
@media (hover: hover) { .zoomer__btn:hover, .zoomer__pct:hover { background: var(--glass-hover); } }
@media (min-width: 1000px) { .zoomer { right: 20px; bottom: 20px; } }
@media (max-width: 999.98px) {
  .zoomer:not(.is-zoomed) { display: none; }
  .zoomer .zoomer__btn { display: none; }
}
.stage.is-cramped .zoomer { opacity: 0; pointer-events: none; }
.stage__hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}
.stage__hint.is-gone { opacity: 0; }

/* ── Stage tools ───────────────────────────────────────────────────────── */

.stage__tools {
  position: absolute;
  top: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.stage__tools--left { left: 12px; flex-direction: column; }
.stage__tools--right { right: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  font-size: 13.5px;
  white-space: nowrap;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.chip:active { transform: scale(.96); }
.chip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chip--icon { width: 36px; padding: 0; justify-content: center; }
.chip--icon[aria-pressed="false"] { color: var(--muted); }
.chip--icon[aria-pressed="true"] { color: #00D9FF; }
@media (hover: hover) { .chip:hover { background: var(--glass-hover); } }
#remixBtn.is-spun svg { animation: spin-once .6s var(--ease); }
.chip svg .dot { fill: currentColor; stroke: none; }
/* ⋯ beside Remix opens a small glass pop-up under it, right-aligned */
.stage__more { position: relative; }
.morepop {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: min(300px, calc(100vw - 24px));
  padding: 6px;
  border-radius: 18px;
  background: var(--glass-hi);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0,0,0,.7);
  transform-origin: top right;
  animation: pop-in .25s var(--ease);
}
@keyframes spin-once { from { transform: rotate(-180deg) scale(.7); } }

.chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFB020;
  box-shadow: 0 0 0 3px rgba(255,176,32,.2);
}
.chip--check.is-ok .chip__dot { background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.2); }
.checks {
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px 6px;
  border-radius: 18px;
  background: var(--glass-hi);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -16px rgba(0,0,0,.7);
  animation: pop-in .3s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.checks__head { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.checks__item { margin: 0 0 10px; padding-left: 16px; position: relative; font-size: 14px; line-height: 1.4; }
.checks__item::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #FFB020; }

/* slide switcher: just "Add slide" until there are two */
.slides {
  position: absolute;
  left: 50%;
  bottom: calc(12px + var(--under, 0px));
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line);
}
.slides__btn, .slides__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
}
.slides__btn svg, .slides__add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slides__btn[disabled] { opacity: .3; }
.slides__add { padding: 0 12px 0 10px; }
.slides__add span:empty { display: none; }
.slides.is-multi .slides__add { padding: 0 8px; }
.slides__label { font-size: 13px; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.slides:not(.is-multi) .slides__btn,
.slides:not(.is-multi) .slides__label { display: none; }
@media (hover: hover) { .slides__btn:not([disabled]):hover, .slides__add:hover { background: var(--well); } }
.stage__hint { bottom: calc(58px + var(--under, 0px)); }
.slides, .stage__hint, .stage__tools { transition: opacity .25s var(--ease); }
.stage.is-cramped .slides,
.stage.is-cramped .stage__hint,
.stage.is-cramped .stage__tools { opacity: 0; pointer-events: none; }

/* the neighbouring slide while swiping */
.ghost {
  position: absolute;
  z-index: 1;
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
}
.ghost canvas { display: block; width: 100%; height: 100%; }
.ghost__new {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--fg) 6%, var(--bg));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: inherit;
}
.ghost__new svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ghost.is-new canvas { display: none; }
.ghost.is-new .ghost__new { display: flex; }

/* slide dots (phones): the current slide is a stretched pill */
.slides__dots { display: none; align-items: center; gap: 6px; padding: 0 8px; }
.dot {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 30%, transparent);
  transition: width .3s var(--ease), background-color .3s var(--ease);
}
.dot.is-on { width: 20px; background: var(--fg); }
@media (pointer: coarse) and (max-width: 999px) {
  .slides { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px; }
  .slides .slides__btn:not(.slides__del), .slides .slides__label, .slides .slides__add { display: none !important; }
  .slides__dots { display: inline-flex; }
  .slides:not(.is-multi) .slides__del { display: none; }
  .slides__del { width: 30px; height: 30px; min-width: 30px; opacity: .7; }
}

/* the hidden input behind on-design editing: it holds the keyboard and the
   caret position; the canvas draws what you see */
.ghost-input {
  position: absolute;
  z-index: 1;
  height: 1.4em;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  opacity: 0;
  resize: none;
  outline: none;
  pointer-events: none;
  overflow: hidden;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
/* On a phone the bar floats, as in iOS: Home and the six editor sections
   in one Liquid Glass pill (scrolling sideways when they don't all fit),
   with a lens that slides to the chosen one. The design and the sheet run
   on beneath it. From 1000px it is a rail (below). */

.tabs {
  grid-area: tabs;
  position: fixed;
  /* over the landing (8), under the top bar and its menu (10) */
  z-index: 9;
  left: 12px;
  right: 12px;
  bottom: max(12px, calc(var(--safe-b) - 8px));
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 8px;
  pointer-events: none;
}
.tabs > * { pointer-events: auto; }
.tabs__pill {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
}
/* Seven don't fit a phone: the strip scrolls, and the tabs fade out at
   whichever edge has more past it (studio.js sets is-more-l / is-more-r).
   Wider screens fit all seven and nothing fades. */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.tabs__track {
  position: relative;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  /* roomy enough on a phone that the last tab sits clearly part-way off
     the edge, so the strip reads as one that scrolls */
  grid-auto-columns: minmax(66px, 1fr);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* snap to the strip's own 4px inset, or it rests 4px scrolled and the
     left fade shows before anything has been scrolled */
  scroll-padding-inline: 4px;
  scrollbar-width: none;
  padding: 4px;
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
  transition: --fade-l .25s var(--ease), --fade-r .25s var(--ease);
}
.tabs__track::-webkit-scrollbar { display: none; }
.tabs__track.is-more-l { --fade-l: 44px; }
.tabs__track.is-more-r { --fade-r: 44px; }
.tabs__pill {
  background: var(--dock-glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: var(--dock-edge);
}
.tabs__lens {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 999px;
  background: var(--dock-lens);
  opacity: 0;
  transition: transform .55s var(--spring), width .55s var(--spring), opacity .25s var(--ease);
}
.tabs__lens.is-on { opacity: 1; }
.tabs.is-settling .tabs__lens { transition: opacity .25s var(--ease); }
.tab {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  scroll-snap-align: start;
  padding: 7px 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .35s var(--spring);
}
.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab:active { transform: scale(.92); }
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.tab svg .soft { opacity: .45; }
.tab svg .fill { fill: currentColor; stroke: none; }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"] svg { stroke-width: 1.5; }
/* Reduce Transparency, Increase Contrast: the glass turns solid */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .tabs__pill { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line), 0 12px 32px -12px rgba(0,0,0,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .tabs__lens { transition: none; }
  .tab:active { transform: none; }
}

/* ── Pane (bottom sheet on phones) ────────────────────────────────────── */

.pane {
  grid-area: pane;
  position: relative;
  z-index: 2;
  background: var(--chrome);
  border-radius: 24px 24px 0 0;
  box-shadow: inset 0 1px 0 var(--line), 0 -18px 40px -24px rgba(0,0,0,.8);
  height: var(--sheet, 46dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height .42s var(--ease);
}
.pane.is-dragging { transition: none; }
.pane.is-closed .pane__body { visibility: hidden; }
.pane.is-closed { box-shadow: none; }
/* the handle is the whole top strip: drag between peek, half and full,
   or tap to toggle */
.pane__grab {
  flex: none;
  display: grid;
  place-items: center;
  height: 30px;
  width: 100%;
  border: 0;
  background: transparent;
  touch-action: none;
  cursor: grab;
}
.pane__grab span { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 26%, transparent); }
.pane__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the floating tab bar covers the bottom of the sheet */
  padding: 0 16px calc(96px + var(--safe-b));
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.pane__h {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}
.pane__body > .pane__h:first-child { margin-top: 4px; }
.pane__note { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Option tiles share one selected treatment: a white ring with a gap, so the
   ring never fights the tile's own colour. */
.opt {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  color: var(--fg);
  font-size: 13px;
}
.opt__face {
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: 14px;
  background: var(--well);
  box-shadow: 0 0 0 0 var(--panel), 0 0 0 0 var(--fg);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
  overflow: hidden;
}
.opt[aria-checked="true"] .opt__face,
.opt[aria-pressed="true"] .opt__face {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--fg);
}
.opt:active .opt__face { transform: scale(.97); }
.opt__name { line-height: 1.2; }
.opt__note { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Size: platform chips over a grid of named formats */
.fchips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* bleed exactly the pane's padding (16 on phone, 22 on desktop) so the row
     runs right up to the pane's edge */
  margin: 0 calc(-1 * var(--pane-pad, 16px));
  padding: 2px var(--pane-pad, 16px) 4px;
  scrollbar-width: none;
}
.fchips::-webkit-scrollbar { display: none; }
.fchip {
  flex: none;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  font-size: 14px;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.fchip { display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 12px; }
.fchip svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fchip svg .f { fill: currentColor; stroke: none; }
/* Heros sits low in its line box; lift the label to the optical centre */
.fchip span { position: relative; top: -1px; }
.fchip--plain { padding: 0 15px; }
#layoutFilters { margin-bottom: 14px; }
.fchip[aria-checked="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
@media (hover: hover) { .fchip:not([aria-checked="true"]):hover { background: var(--well); } }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 12px; }
.presets .opt__face { height: 104px; }
.presets .opt__name { font-size: 12.5px; line-height: 1.25; }
/* two lists under the platform chips; each heading stays with its grid */
.size-group > .pane__h { margin-top: 16px; }
.size-group + .size-group > .pane__h { margin-top: 22px; }
/* the sample sits in a frame that hints where it's going */
.pv { display: block; line-height: 0; box-shadow: 0 8px 18px -8px rgba(0,0,0,.7); }
.pv canvas { display: block; }
.pv--phone { padding: 3px; border-radius: 9px; background: #2B2622; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 18px -8px rgba(0,0,0,.7); }
.pv--phone canvas { border-radius: 6px; }
.pv--card { padding: 7px 4px 4px; border-radius: 7px; background: #F4F1EC; position: relative; }
.pv--card::before { content: ""; position: absolute; left: 6px; top: 3px; width: 22px; height: 2px; border-radius: 1px; background: rgba(19,15,12,.18); }
.pv--card canvas { border-radius: 3px; }
.pv--paper { border-radius: 1px; }

/* Layout */
.layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 12px; }
.layouts .opt__face { padding: 8px; aspect-ratio: 1; }
.layouts canvas { display: block; max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); }

/* Colour */
.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 12px; }
.swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  letter-spacing: -0.04em;
}
.swatch i {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
/* desktop's pane is narrow and the sets are many: smaller tiles, more a row */
@media (min-width: 1000px) {
  .palettes { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px 8px; }
  .swatch { border-radius: 12px; font-size: 19px; }
  .swatch i { right: 7px; bottom: 7px; width: 10px; height: 10px; }
  .palettes .opt__name { font-size: 12px; }
}

/* Photo */
.photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-actions--gap { margin-top: 12px; }

.samples {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: -6px -16px 0;
  /* room for the selected tile's ring, which a scroller would clip */
  padding: 6px 16px 8px;
  scrollbar-width: none;
}
.samples::-webkit-scrollbar { display: none; }
.samples .opt { flex: none; width: 76px; }
.samples .opt__face { height: 76px; }
/* a little roomier than the effect tiles below them, being the photos themselves */
#samples .opt { width: 88px; }
#samples .opt__face { height: 88px; }
.pane__reset { margin-top: 14px; min-height: 36px; padding: 0 16px; font-size: 14px; }
/* upload is the first tile in the strip, not a separate row of buttons */
.opt--upload { cursor: pointer; }
.opt--upload .opt__face {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 28%, transparent);
  font-size: 12.5px;
}
.opt--upload svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.opt--upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.opt--upload:focus-within .opt__face { box-shadow: inset 0 0 0 2px var(--focus); }
.photo-tools { display: flex; gap: 8px; margin-top: 12px; }
.pill--sm { min-height: 34px; padding: 0 14px; font-size: 14px; gap: 6px; }
.pill--sm svg { width: 16px; height: 16px; }
.pill.is-busy, .opt.is-busy { opacity: .7; }
/* a section heading with a quiet action on the right */
.pane__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* a row that opens a pane keeps its heading on the same line as every other pane's */
.pane__body > .pane__row:first-child { align-items: flex-start; }
.pane__body > .pane__row:first-child > .pane__h.pane__h { margin-top: 0; }
.pane__row .pane__h { margin-bottom: 10px; }
.pane__body > .pane__row:first-child .pane__h { margin-top: 4px; }
.textbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  white-space: nowrap;
  opacity: .85;
}
.textbtn svg, .pill--sm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.textbtn[disabled] { opacity: .45; }
@media (hover: hover) { .textbtn:hover { opacity: 1; } }
.samples img { width: 100%; height: 100%; object-fit: cover; display: block; }
.effects { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; }
.effects .opt__face { aspect-ratio: 1; }
.effects canvas { width: 100%; height: 100%; max-width: 100%; display: block; }

/* Stickers */
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.stickers .opt__face { aspect-ratio: 1; padding: 10px; background: color-mix(in srgb, var(--fg) 5%, var(--panel)); }
.stickers img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.sel { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--line); }

/* Fields */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field[hidden] { display: none; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 13px; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--well);
  font-size: 16px;               /* 16px keeps iOS from zooming on focus */
  line-height: 1.35;
  resize: none;
  outline: none;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field input:focus,
.field textarea:focus { border-color: color-mix(in srgb, var(--fg) 55%, transparent); background: color-mix(in srgb, var(--fg) 10%, var(--panel)); }
.field input::placeholder,
.field textarea::placeholder { color: color-mix(in srgb, var(--fg) 30%, transparent); }
.field.is-flash input,
.field.is-flash textarea { border-color: var(--fg); }

/* Segmented control */
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--well);
  gap: 2px;
}
.seg__btn {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.seg__btn[aria-checked="true"] { background: var(--fg); color: var(--bg); }

/* Sliders */
.sliders { display: grid; gap: 14px; margin-top: 18px; }
.slider { display: grid; gap: 8px; }
.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  margin: 0;
}
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--fg) var(--p, 50%), var(--line) var(--p, 50%)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--fg); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; margin-top: -10px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--fg); }

/* ── Export dialog ─────────────────────────────────────────────────────── */

.xport {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto 0 0;
}
.xport::backdrop { background: rgba(8,6,5,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.xport[open] .xport__card { animation: xport-up .5s var(--ease); }
@keyframes xport-up { from { transform: translateY(40px); opacity: 0; } }
.xport__card {
  background: var(--panel);
  border-radius: 28px 28px 0 0;
  padding: 18px 18px calc(18px + var(--safe-b));
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,.8);
}
.xport__head { display: flex; align-items: center; justify-content: space-between; }
.xport__title { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.03em; }
.xport__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--well); display: grid; place-items: center; }
.xport__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.xport__meta { margin: 4px 0 16px; font-size: 13px; color: var(--muted); }
.xport__formats { display: grid; gap: 8px; }
.fmt {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: var(--well);
  text-align: left;
  box-shadow: 0 0 0 0 var(--fg);
  transition: box-shadow .25s var(--ease);
}
.fmt[aria-checked="true"] { box-shadow: 0 0 0 2px var(--fg); }
.fmt__icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 10%, transparent); display: grid; place-items: center; font-size: 12px; letter-spacing: .02em; }
.fmt__name { font-size: 16px; }
.fmt__note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fmt__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.fmt[aria-checked="true"] .fmt__dot { box-shadow: inset 0 0 0 6px var(--fg); }
.xport__motion { margin-top: 6px; }
.xport__progress { margin-top: 18px; }
.xport__bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.xport__bar span { display: block; height: 100%; width: 0; background: var(--fg); border-radius: inherit; transition: width .15s linear; }
.xport__actions { margin-top: 20px; display: grid; gap: 8px; }

/* ── Toast ─────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  top: calc(70px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -12px);
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  max-width: calc(100% - 32px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ── Tablet & desktop: rail + panel + stage ───────────────────────────── */

@media (min-width: 1000px) {
  /* pane rows sit this far in from the rail; the format title uses the same edge */
  body.studio { --pane-pad: 22px; }
  .sbar { height: 68px; padding: 0 24px; }
  /* the wordmark fills the rail, so the format title that follows it starts
     where the pane rows do — expanded or collapsed, "Studio" or "Studio Admin" */
  .sbar__brand {
    flex: none;
    width: calc(var(--rail, 184px) - 24px);
    min-width: 0;
  }
  :root[data-rail="collapsed"] .sbar__brand { overflow: hidden; }
  :root[data-rail="collapsed"] .sbar__name { min-width: 0; max-width: 0; overflow: hidden; }
  .sbar__size {
    /* cancel the bar's 12px gap, then add the pane inset */
    margin-left: calc(var(--pane-pad) - 12px);
    margin-right: auto;
    max-width: calc(100% - var(--rail, 184px) - var(--pane-pad) - 280px);
  }
  .studio__main {
    height: calc(100% - 68px);
    grid-template-columns: var(--rail, 184px) 380px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "tabs pane stage";
  }
  .tabs {
    position: relative;
    /* above the landing (8), so the Settings pop-up at the rail's foot can
       open over it instead of behind it */
    z-index: 9;
    left: auto;
    right: auto;
    bottom: auto;
    max-width: none;
    margin: 0;
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 4px;
    padding: 8px 10px;
    border-right: 1px solid var(--line);
    background: var(--bg);
    pointer-events: auto;
    min-width: 0;
  }
  .tabs__pill,
  .tabs__track { display: contents; }
  .tabs__lens { display: none; }
  .tabs__pill { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .tab:active { transform: none; }
  .tab span { overflow: visible; }
  /* rail: small icon with the label beside it — same as the Wiki's */
  .tab { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; font-size: 15px; }
  .tab svg { width: 20px; height: 20px; }
  .tab[aria-selected="true"] { background: var(--well); }
  @media (hover: hover) { .tab:hover { color: var(--fg); } }
  .pane,
  .pane.is-closed {
    height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid var(--line);
    background: var(--bg);
  }
  .pane__grab { display: none; }
  .pane__body { padding: 20px var(--pane-pad) 32px; }
  .pane__body > .pane__h:first-child { margin-top: 0; }
  .stage { border-radius: 0; }
  .stage__hint { bottom: 74px; }
  .stage { --under: 0px; }
  .stage__tools { top: 20px; }
  .stage__tools--left { left: 20px; }
  .stage__tools--right { right: 20px; }
  .slides { bottom: 20px; }
  .pane.is-closed .pane__body { visibility: visible; }
  .stage__art { border-radius: 8px; }

  .xport { max-width: 460px; margin: auto; }
  .xport__card { border-radius: 28px; padding: 24px; }
  .xport[open] .xport__card { animation-name: xport-in; }
  @keyframes xport-in { from { transform: scale(.96); opacity: 0; } }
}

@media (min-width: 1400px) {
  .studio__main { grid-template-columns: var(--rail, 184px) 420px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Sticker drag from the library ─────────────────────────────────────── */
.stdrag {
  position: fixed;
  left: 0; top: 0;
  z-index: 60;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.45));
  will-change: transform;
}
.opt.is-lifted { opacity: .4; }
.stage.is-droptarget .stage__art { outline: 2px solid #00B8D9; outline-offset: 6px; }

/* ── Landing ───────────────────────────────────────────────────────────── */
/* Covers the editor below the top bar until a format is picked; the bar
   (brand, menu) stays, so the landing already feels like Studio. */
.launch {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: calc(60px + env(safe-area-inset-top, 0px));
  /* above the editor (its layers top out at 3), under the floating tab bar
     (9) and the top bar (10) — the bar's menu pop-up has to open over the
     landing */
  z-index: 8;
  overflow-y: auto;
  background: var(--bg);
  animation: launchIn .45s var(--ease);
}
/* Until a design is open the editor's bar actions have nothing to act on:
   the size label, undo/redo, share and export are hidden on the landing.
   They keep their room in the bar, so the menu disc doesn't move, and fade
   back in as the editor opens. */
body.is-launching .sbar__size { visibility: hidden; }
/* the editor stays hidden under the landing, so no edge can ever show it */
body.is-launching .stage,
body.is-launching .pane { visibility: hidden; }
.sbar__hist { transition: opacity .2s; }
body.is-launching .sbar__hist,
body.is-launching #exportBtn,
body.is-launching #shareBtn { opacity: 0; visibility: hidden; }
.launch.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease); }
@keyframes launchIn { from { opacity: 0; } }
/* beside the rail on desktop; on a phone it runs under the floating tab bar */
@media (min-width: 1000px) { .launch { left: var(--rail, 184px); } }
/* The landing runs up under the top bar, and once the title has scrolled
   away the bar gets the Wiki's progressive blur (wiki.css, .top): the page
   blurs harder and dims a little nearer the top edge. Two blur layers, each
   masked to its own band, stand in for a true gradient blur. */
@media (max-width: 999.98px) {
  /* part of the page, not a fixed panel: the page scrolls (studio.js) */
  .launch { position: absolute; top: 0; bottom: auto; overflow: visible; }
  body.studio.is-launching { overflow: visible; }
  body.is-launching .sbar { position: fixed; top: 0; left: 0; right: 0; }
  .launch .launch__in { padding-top: calc(88px + env(safe-area-inset-top, 0px)); }
}
/* on desktop the landing is still its own scrolling panel beside the rail,
   but it starts at the top of the window so it scrolls under the bar */
@media (min-width: 1000px) {
  .launch { top: 0; }
  .launch .launch__in { padding-top: 112px; }
}
.sbar::before, .sbar::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: calc(100% + 28px);
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.sbar::before {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
  mask-image: linear-gradient(#000 45%, transparent);
  background: linear-gradient(color-mix(in srgb, var(--bg) 72%, transparent), transparent);
}
.sbar::after {
  height: calc(100% - 4px);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
.sbar.is-tucked::before, .sbar.is-tucked::after { opacity: 1; }
/* the title sits exactly where the Wiki's does — same size, same spot —
   so moving between the two apps the heading doesn't jump */
.launch__in { max-width: 1084px; margin: 0; padding: 28px 16px calc(110px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1000px) { .launch__in { padding: 44px 40px 64px; } }
.launch__title { margin: 0; font-weight: 400; font-size: 40px; line-height: 1.02; letter-spacing: -0.04em; }
.launch__sub { margin: 10px 0 0; color: var(--muted); }
.launch__h { margin: 32px 0 12px; font-weight: 400; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.launch__cont { margin-top: 28px; }
.launch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.launch__cont + .launch__h + .launch__grid { margin-top: 0; }
@media (min-width: 700px) { .launch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.launch__card {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 10px 14px;
  border: 0;
  border-radius: var(--r-card);
  background: var(--panel);
  color: var(--fg);
  text-align: left;
  transition: background-color .2s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) { .launch__card:hover { background: var(--well); } .launch__card:hover canvas { transform: translateY(-3px); } }
.launch__card:active { transform: scale(.98); }
.launch__frame { display: grid; place-items: center; height: 168px; margin-bottom: 10px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 4%, var(--bg)); }
@media (min-width: 700px) { .launch__frame { height: 210px; } }
.launch__frame { overflow: hidden; min-width: 0; }
.launch__frame canvas { max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); transition: transform .35s var(--ease); }
.launch__name { padding: 0 4px; font-size: 16px; }
.launch__note { padding: 0 4px; font-size: 13px; color: var(--muted); }
.launch__cont .launch__card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 16px; padding: 10px 18px 10px 10px; }
.launch__cont .launch__frame { grid-row: span 2; width: 130px; height: 130px; margin: 0; }
.launch__cont .launch__name { align-self: end; font-size: 20px; letter-spacing: -0.02em; }
.launch__cont .launch__note { align-self: start; }
/* the profile picture card shows the round avatar, not a page */
.launch__cont--av { margin-top: 0; }
.launch__cont--av .launch__frame img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 12px 26px -12px rgba(0,0,0,.6); transition: transform .35s var(--ease); }
@media (hover: hover) { .launch__cont--av .launch__card:hover img { transform: translateY(-3px); } }
/* back from the profile picture maker to the formats */
.launch__back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 0 0 18px -6px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.launch__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .launch__back:hover { background: var(--well); } }
.launch__more { margin-top: 20px; padding: 0 18px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font-size: 15px; }
@media (hover: hover) { .launch__more:hover { background: var(--well); } }
.launch__save { max-width: 52ch; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Admin on a phone: a switch row in the site menu, under Appearance */
.menu__row--admin { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.menu__row--admin .switch { margin-right: 6px; }
@media (min-width: 1000px) { .menu__row--admin { display: none !important; } }
/* Admin, above Settings at the foot of the desktop sidebar; lit when on */
.aadmin { display: none; }
@media (min-width: 1000px) { .aadmin { display: block; position: absolute; left: 10px; right: 10px; bottom: 60px; } }
.aadmin .asettings__btn[aria-pressed="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
body.is-admin .sbar__name::after { content: " Admin"; color: var(--muted); }
/* a green dot says Admin is on */
.aadmin .asettings__btn::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.2); opacity: 0; transition: opacity .2s; }
.aadmin .asettings__btn[aria-pressed="true"]::after { opacity: 1; }
/* collapsed rail: the dot sits on the icon instead of pushing it aside */
@media (min-width: 1000px) {
  :root[data-rail="collapsed"] .aadmin .asettings__btn { position: relative; }
  :root[data-rail="collapsed"] .aadmin .asettings__btn::after {
    position: absolute; top: 6px; right: 2px; margin-left: 0;
  }
}

/* Admin: a stripped-back staff mode — no sizes, photos, stickers or remix,
   and only the black and white colour sets */
body.is-admin #tab-size, body.is-admin #tab-photo, body.is-admin #tab-stickers,
body.is-admin #remixBtn, body.is-admin #layoutFilters,
body.is-card #tab-photo, body.is-card #tab-stickers, body.is-card #remixBtn, body.is-card #layoutFilters,
body.is-admin [data-pane="layout"] .pane__note, body.is-card [data-pane="layout"] .pane__note { display: none !important; }
/* a business card is black or white, nothing else — and its templates
   never use the accent, so the swatches drop its dot */
body.is-admin #palettes .opt:not([data-palette="praxis"]):not([data-palette="paper"]),
body.is-card #palettes .opt:not([data-palette="praxis"]):not([data-palette="paper"]) { display: none; }
body.is-admin .swatch i, body.is-card .swatch i { display: none; }

/* A business card: both sides on the stage, a label over each. The other
   side is a picture that switches to it; no slides to page through. */
body.is-card #slides, body.is-card #ghost { display: none !important; }
.stage.is-two .stage__art { position: relative; }
.twin {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  transition: outline-color .2s var(--ease);
  outline: 2px solid transparent;
  outline-offset: 4px;
}
:root:not([data-theme="dark"]) .twin { box-shadow: 0 24px 50px -22px rgba(19,15,12,.45), 0 2px 8px rgba(19,15,12,.12); }
.twin:hover { outline-color: color-mix(in srgb, var(--fg) 22%, transparent); }
.twin:focus-visible { outline-color: #00B8D9; }
.twin canvas { display: block; width: 100%; height: 100%; }
.side-cap {
  position: absolute;
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 12.5px;
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-cap[hidden] { display: none; }
.side-cap.is-on { color: var(--fg); }
.stage.is-settling .twin, .stage.is-settling .side-cap,
.stage.is-viewzoom .twin, .stage.is-viewzoom .side-cap { visibility: hidden; }
.layouts__h { grid-column: 1 / -1; margin: 4px 0 -6px; }
/* the password box */
.adlg__in { width: 100%; height: 52px; margin-top: 14px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); font: inherit; font-size: 16px; outline: none; }
.adlg__in:focus { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 45%, transparent); }
.adlg__err { min-height: 1.4em; margin: 8px 2px 0; font-size: 14px; color: #FF8FA3; }
.adlg__go { width: 100%; min-height: 50px; margin-top: 6px; }
/* silver foil on a sticker's tile */
.stickers .opt__face { position: relative; }
.stickers .opt__face .silver { position: absolute; inset: 10px; pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(120deg, #B9BEC7, #F5F6F8 25%, #9EA4AE 45%, #E7E9ED 60%, #C9B8F0 72%, #A8E6F0 82%, #FAFBFC); }