.studio-shell {
  width: min(100%, 1180px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px max(20px, env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  gap: 14px;
}

.studio-header { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.studio-back { color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.1em; text-decoration: none; }
.studio-title { min-width: 0; text-align: center; }
.studio-title .eyebrow { margin-bottom: 3px; }
.studio-title .editor-pack-context { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.2; }
.studio-title input { width: 100%; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text); font: 480 23px/1 "IBM Plex Sans", sans-serif; text-align: left; text-overflow: ellipsis; }
.studio-more, .icon-button { min-width: 44px; padding: 0; border-color: var(--border); background: transparent; color: var(--text); }
.library-create-button { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 24px; line-height: 1; }
.studio-workspace { display: grid; gap: 14px; }

.board-stage { align-self: start; align-content: start; display: grid; gap: 7px; }
.studio-status { min-height: 1.1em; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.board-footer { min-height: 40px; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.touch-helper { display: inline; }
.touch-helper[hidden], #board-status[hidden], .draw-fit-link[hidden] { display: none; }
.studio-sidebar { display: grid; gap: 14px; }

.authoring-panel { padding: 16px; display: grid; gap: 18px; border: 1px solid var(--border); background: var(--surface); }
.mode-unavailable { margin: 0; padding: 14px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.5; }
.write-form { display: grid; gap: 16px; }
.write-label-row { display: flex; justify-content: space-between; align-items: center; color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; }
.write-label-row button, #clear-words-note button { min-height: 28px; padding: 0 4px; }
.write-history { display: flex; align-items: center; gap: 5px; }
.write-history button:not(#clear-words) { width: 32px; min-height: 32px; display: grid; place-items: center; border-color: transparent; background: transparent; color: var(--cs-text-2); }
.write-history button:not(#clear-words):disabled { opacity: .32; }
.write-history svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.write-form textarea { width: 100%; min-height: 118px; padding: 12px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 2px; background: var(--field); color: var(--text); font: 500 15px/1.4 "IBM Plex Sans", sans-serif; text-transform: uppercase; }
.write-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.write-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.write-group legend, .position-tools span { margin-bottom: 8px; color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; }
.segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.segmented-control button { min-height: 40px; padding: 6px; border-color: var(--border); background: transparent; color: var(--muted-strong); }
.segmented-control svg { width: 22px; height: 22px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.segmented-control button.is-active { border-color: var(--accent-border); background: var(--accent-surface); color: var(--text); }
.layout-details { border: 1px solid var(--border); background: var(--surface-raised); }
.layout-details summary { padding: 12px; color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; cursor: pointer; }
.layout-details[open] summary { border-bottom: 1px solid var(--border); }
.layout-details .range-stack { padding: 13px; }
.range-stack { display: grid; gap: 13px; }
.range-stack label { grid-template-columns: 1fr auto; }
.range-stack label output { grid-column: 2; grid-row: 1; margin: 0; }
.range-stack input { grid-column: 1 / -1; }
.position-tools { display: grid; gap: 10px; }
.position-tools small { display: block; color: var(--muted); font-size: 10px; }
.nudge-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.nudge-pad button { min-height: 42px; padding: 5px; border-color: var(--border); background: transparent; color: var(--muted-strong); font-size: 15px; }
.nudge-pad #reset-position { font-size: 8px; }

.selection-tools { padding-top: 13px; display: grid; gap: 10px; border-top: 1px solid var(--border); }
.selection-tools > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.selection-tools span { color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; }
.selection-tools small { color: var(--muted); font-size: 9px; }
.selection-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.selection-actions button { min-height: 40px; padding: 5px; border-color: var(--border); background: transparent; color: var(--muted-strong); font-size: 10px; }
@media (max-width: 759px) {
  body.is-draw-mode .board-stage { position: sticky; top: 0; z-index: 8; padding: 5px 0; background: var(--background, #0b0e0c); }
  body.is-draw-mode .board-footer { min-height: 27px; order: 2; }
  body.is-draw-mode .selection-tools { padding-top: 4px; gap: 3px; order: 1; }
  body.is-draw-mode .selection-tools > div:first-child { display: none; }
  body.is-draw-mode .selection-actions { display: flex; overflow-x: auto; gap: 4px; }
  body.is-draw-mode .selection-actions button { min-width: 44px; min-height: 36px; flex: 0 0 auto; }
}

.snack-controls { padding: 16px; display: grid; gap: 16px; border: 1px solid var(--border); background: var(--surface); }
.studio-field { gap: 6px; }
.dwell-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.dwell-editor span { color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; }
.dwell-editor small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.dwell-stepper { display: grid; grid-template-columns: 44px minmax(72px, auto) 44px; align-items: center; }
.dwell-stepper button { min-width: 44px; padding: 0; border-color: var(--border); background: var(--surface-raised); color: var(--muted-strong); }
.dwell-stepper button:hover { border-color: var(--border-strong); background: var(--surface-raised); color: var(--text); }
.dwell-stepper output { text-align: center; font: 520 18px/1 "IBM Plex Sans", sans-serif; }
.dwell-quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dwell-quick button { min-height: 38px; padding: 6px; border-color: var(--border); background: transparent; color: var(--muted-strong); }
.dwell-quick button.is-active { border-color: var(--border-strong); background: var(--surface-raised); color: var(--text); }
.snack-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pack-snack-navigation { display: flex; justify-content: center; align-items: center; gap: 18px; color: var(--muted-strong); font-size: 12px; }
.pack-snack-navigation[hidden] { display: none; }
.pack-snack-navigation button { min-width: 44px; min-height: 38px; border-color: var(--border); background: transparent; color: var(--text); }
body.is-published-snack .authoring-panel, body.is-published-snack .snack-controls { pointer-events: none; opacity: 0.7; }
.snack-actions > button { min-height: 44px; }
.danger-button { color: #ef8d8d; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }

.snack-kind-choices { display: grid; gap: 10px; }
.snack-kind-choices button { min-height: 82px; padding: 16px; display: grid; gap: 5px; align-content: center; text-align: left; border-color: var(--border-strong); background: var(--surface-raised); color: var(--text); }
.snack-kind-choices button:focus-visible, .snack-kind-choices button:hover { border-color: var(--accent); }
.snack-kind-choices strong { font-size: 15px; letter-spacing: 0.08em; }
.snack-kind-choices span { color: var(--muted-strong); font-size: 12px; }

.studio-sheet { top: var(--studio-viewport-top, 0px); bottom: auto; width: 100%; max-width: none; height: var(--studio-viewport-height, 100dvh); max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text); }
.studio-sheet:focus { outline: none; }
.studio-sheet::backdrop { background: rgb(0 0 0 / 0.72); }
.sheet-card { position: absolute; right: 0; bottom: 0; left: 0; max-height: var(--studio-sheet-max-height, min(86dvh, 760px)); padding: 22px 16px max(20px, env(safe-area-inset-bottom)); display: grid; gap: 16px; overflow: auto; border: 1px solid var(--border); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--surface); }
.sheet-card > .content-picker-handle { margin: -22px -16px -16px; width: calc(100% + 32px); }
.sheet-card > header { touch-action: pan-x; }
#create-pack-submit { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -10px 18px var(--surface); }
.sheet-card header { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.sheet-card header button { min-width: 44px; padding: 0; border-color: var(--border); background: transparent; color: var(--text); font-size: 24px; }
.sequence-list { display: grid; gap: 7px; }
.sequence-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 9px; border: 1px solid var(--border); background: var(--surface-raised); }
.sequence-item.is-active { border-color: var(--accent-border); box-shadow: inset 3px 0 0 var(--accent); }
.sequence-select { min-width: 0; display: grid; gap: 3px; padding: 4px; border: 0; background: transparent; color: var(--text); text-align: left; }
.sequence-select strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sequence-select span { color: var(--muted); font-size: 9px; }
.sequence-item > button:not(.sequence-select) { min-width: 38px; min-height: 38px; padding: 0; border-color: var(--border); background: transparent; color: var(--muted-strong); }
.json-card > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
#pack-json { width: 100%; min-height: 42dvh; padding: 12px; resize: vertical; border: 1px solid var(--border-strong); background: var(--field); color: var(--text); font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.json-actions { display: grid; gap: 8px; }
.file-button { min-height: 44px; padding: 0.8rem 1.1rem; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 3px; color: var(--muted-strong); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.file-button input { display: none; }
.palette-card > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.palette-scope-note { padding: 12px; display: grid; gap: 5px; border: 1px solid var(--accent-border); background: var(--accent-surface); }
.palette-scope-note strong { color: var(--text); font-size: 9px; letter-spacing: 0.12em; }
.palette-scope-note span { color: var(--muted-strong); font-size: 11px; line-height: 1.45; }

@media (min-width: 760px) {
  .studio-shell { width: min(100%, 1480px); min-height: 100dvh; padding: 18px 26px 22px; gap: 12px; overflow: visible; grid-template-rows: auto auto; }
  .studio-header { min-height: 46px; }
  .studio-workspace { height: max(620px, calc(100dvh - 98px)); min-height: 620px; grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.65fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 22px; }
  .board-stage { min-height: 0; grid-column: 1; grid-row: 1; grid-template-rows: auto minmax(0, 1fr) auto; }
  .studio-sidebar { min-height: 0; grid-column: 2; grid-row: 1; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .authoring-panel { min-height: 0; grid-row: 1; padding: 13px; gap: 13px; overflow: auto; }
  .write-form { gap: 12px; }
  .write-form textarea { min-height: 86px; }
  .snack-controls { grid-row: 2; padding: 12px; gap: 10px; }
  .dwell-editor { gap: 8px; }
  .dwell-editor small { margin-top: 2px; font-size: 9px; }
  .dwell-stepper { grid-template-columns: 38px minmax(62px, auto) 38px; }
  .dwell-stepper button { min-width: 38px; min-height: 38px; }
  .dwell-stepper output { font-size: 16px; }
  .dwell-quick { display: none; }
  .snack-actions button { min-height: 38px; padding: 5px; }
  .sheet-card { top: 0; right: 0; bottom: 0; left: auto; width: min(520px, 100%); max-height: none; border-radius: 0; border-bottom: 1px solid var(--border); }
  .sheet-card > .content-picker-handle { display: none; }
}

@media (max-width: 560px) {
  .board-footer { min-height: 36px; gap: 8px; }
  .board-footer .studio-status { min-width: 0; }
  body.is-keyboard-editing .board-frame { padding: 4px; }
  body.is-keyboard-editing .studio-board { width: 68%; margin: 0 auto; }
}

@media (max-width: 390px) {
  .write-two-up { grid-template-columns: 1fr; }
}

.studio-header-actions { min-width: 88px; display: flex; justify-content: end; gap: 8px; align-items: center; }
.studio-header-actions .button-primary { min-height: var(--cs-header-control-size); padding: 8px 12px; }
.studio-title h1 { margin: 0; overflow: hidden; font: 500 23px/var(--cs-header-title-line-height) "IBM Plex Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.editor-save-status { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.08em; text-align: right; }
.editor-save-status.is-unsaved { color: var(--accent); }
.desktop-library-rail { display: none; }

@media (max-width: 759px) {
  body.is-snack-editor #studio-content { padding-bottom: 124px; }
  .snack-actions {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: var(--studio-keyboard-inset, 0px);
    left: 0;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 -10px 24px rgb(0 0 0 / 0.16);
  }
  .snack-actions { grid-template-columns: 1fr 1fr; }
  .snack-actions > button { min-height: 44px; }
}

.library-screen { width: 100%; display: grid; gap: 22px; }
.library-intro { display: grid; gap: 16px; padding: 22px 18px; border: 1px solid var(--border); background: var(--surface); }
.library-intro h2, .pack-screen-heading h2 { margin: 4px 0 8px; font: 520 clamp(25px, 5vw, 38px)/1.05 "IBM Plex Sans", sans-serif; }
.library-intro p:not(.section-number) { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.library-create-actions { display: flex; justify-content: end; align-items: center; }
.library-search { display: grid; gap: 7px; color: var(--muted-strong); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; }
.library-search input, .pack-name-field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 3px; background: var(--field); color: var(--text); font-size: 14px; letter-spacing: normal; }
.library-groups, .pack-groups { display: grid; gap: 24px; }
#pack-groups:empty { display: none; }
.no-pack-nudge:not([hidden]) { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.no-pack-nudge .section-number { margin: 0; }
.no-pack-nudge p:not(.section-number) { margin: 5px 0 0; color: var(--muted-strong); font-size: 12px; line-height: 1.4; }
.no-pack-nudge button { flex: 0 0 auto; min-height: 44px; }
.library-pack-group, .library-section { min-width: 0; display: grid; gap: 11px; }
.library-pack-group { padding: 14px; border: 1px solid var(--border); background: var(--surface); }
.library-section { padding-top: 17px; border-top: 1px solid var(--border); }
.library-pack-group > header, .library-section > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.library-pack-group header h2, .library-section header h2 { margin: 1px 0 4px; font: 520 23px/1.05 "IBM Plex Sans", sans-serif; overflow-wrap: anywhere; }
.library-pack-group header .section-number, .library-section header .section-number { margin: 0; }
.library-section-description { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.library-count { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.1em; }
.pack-name-unsaved { width: fit-content; padding: 4px 6px; border: 1px solid var(--accent-border); color: var(--accent); font-size: 7px; font-weight: 750; letter-spacing: 0.08em; }
.pack-thumbnail-strip { min-width: 0; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 0 1px 8px; scroll-snap-type: x mandatory; }
.pack-thumbnail-button { position: relative; min-width: 0; flex: 0 0 min(78vw, 330px); padding: 6px; border-color: var(--border); background: var(--surface); color: var(--text); text-align: left; scroll-snap-align: start; }
.pack-thumbnail-button:hover { border-color: var(--accent-border); background: var(--surface-raised); }
.pack-thumbnail-order { position: absolute; top: 12px; left: 12px; min-width: 26px; padding: 4px 5px; background: rgb(8 10 8 / 0.86); color: #f2f0e9; font: 700 9px/1 ui-monospace, monospace; text-align: center; }
.thumbnail-unavailable { min-height: 74px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.loose-snacks, .all-snacks-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); gap: 10px; }
.library-snack-card { min-width: 0; padding: 8px; display: grid; gap: 6px; border-color: var(--border); background: var(--surface); color: var(--text); text-align: left; }
.library-snack-card .cs-board figcaption { font-size: 10px; }
.snack-memberships { display: flex; flex-wrap: wrap; gap: 5px; }
.snack-membership { padding: 4px 6px; border: 1px solid var(--border); color: var(--muted-strong); font-size: 7px; font-weight: 750; letter-spacing: 0.06em; }
.library-empty-note { margin: 0; padding: 15px; border: 1px dashed var(--border-strong); color: var(--muted); font-size: 12px; line-height: 1.45; }
.library-empty-library { padding: 22px; }

.pack-screen { gap: 16px; }
.pack-action-hint { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.pack-screen-heading { display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.pack-screen-heading h2 { margin: 0; font-size: clamp(24px, 5vw, 34px); }
.pack-screen-heading #save-pack { max-width: 180px; }
.pack-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.library-snack-with-send { min-width: 0; display: grid; align-content: start; gap: 6px; }
.library-snack-with-send > .library-snack-card { width: 100%; }
.library-snack-with-send > .button-secondary { min-height: 36px; font-size: 9px; }
.pack-thumbnail-strip > .library-snack-with-send { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; }
.pack-thumbnail-strip .pack-thumbnail-button { flex: none; width: 100%; }
.pack-name-field { max-width: 680px; }
.pack-entries { display: grid; gap: 13px; }
.pack-add-button { width: 44px; min-width: 44px; height: 44px; justify-self: center; padding: 0; border-color: var(--border-strong); border-radius: 50%; background: transparent; color: var(--muted-strong); font-size: 24px; line-height: 1; }
.pack-add-button:hover { border-color: var(--accent-border); background: var(--accent-surface); color: var(--text); }
.pack-entry-row { min-width: 0; display: grid; gap: 2px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.pack-entry-open { width: 100%; min-width: 0; padding: 8px; display: grid; gap: 8px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.pack-entry-open:hover { border-color: transparent; background: var(--surface-raised); }
.pack-entry-open > .cs-board { max-width: 470px; }
.pack-entry-details { min-width: 0; display: grid; gap: 3px; }
.pack-entry-details strong { overflow-wrap: anywhere; font: 520 20px/1.1 "IBM Plex Sans", sans-serif; }
.pack-entry-details > span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.09em; }
.pack-entry-actions { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; align-items: center; padding: 0 8px 8px; }
.pack-entry-actions > button:not(.pack-entry-remove) { min-height: 44px; padding: 5px; }
.pack-entry-actions .pack-entry-send { grid-column: 1 / -1; min-height: 38px; }
.pack-entry-remove { grid-column: 1 / -1; justify-self: start; min-height: 30px; padding: 3px 0; border: 0; background: transparent; color: var(--muted); font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }
.pack-entry-remove:hover { border: 0; background: transparent; color: var(--text); }
.pack-footer-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pack-footer-actions button { flex: 1 1 155px; }
.snack-picker-list { display: grid; gap: 9px; }
.snack-picker-item { display: grid; }
.snack-picker-item .library-snack-card { width: 100%; }
.picker-section-label { margin: 9px 0 0; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: 0.12em; }
.published-picker-item { min-height: 58px; display: grid; gap: 3px; justify-items: start; border-color: var(--border); background: var(--surface-raised); color: var(--text); text-align: left; }
.published-picker-item strong { font-size: 12px; }
.published-picker-item span { color: var(--muted); font-size: 9px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dialog-actions > button { flex: 1 1 130px; }

@media (min-width: 760px) {
  .library-screen { gap: 24px; }
  .library-intro { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 26px; }
  .pack-thumbnail-button { flex-basis: 310px; }
  .pack-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pack-entry-row { min-height: 100%; }
}

@media (min-width: 1060px) {
  .studio-shell { grid-template-columns: 218px minmax(0, 1fr); gap: 14px 22px; }
  .studio-header { grid-column: 1 / -1; }
  .desktop-library-rail:not([hidden]) { position: sticky; top: 18px; align-self: start; display: grid; gap: 12px; padding: 13px; border: 1px solid var(--border); background: var(--surface); }
  .desktop-library-rail > .section-number { margin: 5px 0 0; }
  .desktop-rail-packs { display: grid; gap: 5px; }
  .desktop-rail-pack { min-height: 40px; padding: 7px 8px; overflow: hidden; border-color: transparent; background: transparent; color: var(--muted-strong); font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
  .desktop-rail-pack:hover, .desktop-rail-pack.is-active { border-color: var(--accent-border); background: var(--accent-surface); color: var(--text); }
  .studio-content { min-width: 0; grid-column: 2; }
  .studio-workspace { width: 100%; }
  .library-screen { padding: 0 2px; }
}

@media (max-width: 430px) {
  .studio-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; }
  .studio-back { font-size: 8px; }
  .studio-title h1 { font-size: 18px; }
  .studio-header-actions { min-width: 70px; gap: 5px; }
  .pack-screen-heading { align-items: start; flex-direction: column; }
  .pack-screen-heading #save-pack { max-width: 180px; width: auto; }
}

@media (max-width: 560px) {
  .no-pack-nudge:not([hidden]) { align-items: stretch; flex-direction: column; }
}

.button-primary { border: 1px solid var(--primary); border-radius: 3px; background: var(--primary); color: var(--primary-text); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-decoration: none; }
.button-primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
.pack-preference-toggle { display: flex; align-items: center; gap: 10px; min-height: 42px; color: var(--text); font-size: 13px; }
.pack-preference-toggle input { width: 20px; height: 20px; accent-color: var(--primary); }

#photo-tools button, #photo-tools .clackify-file-button, #photo-tools .clackify-quiet > label { text-transform: none; letter-spacing: 0; }
.clackify-card { position: relative; background: var(--cs-bg); }
.clackify-empty { display: grid; gap: 24px; }
.clackify-empty p { max-width: 34ch; margin: 0 auto; color: var(--cs-text-2); font: 450 17px/1.5 "IBM Plex Sans", sans-serif; text-align: center; }
.clackify-empty .clackify-error { color: var(--cs-danger); font-size: 13px; }
.clackify-photo-choices { display: grid; gap: 12px; }
.clackify-file-button { min-height: 64px; display: grid; place-items: center; border: 1px dashed var(--cs-border-strong); border-radius: 10px; background: var(--cs-surface); color: var(--cs-text); font: 600 15px/1 "IBM Plex Sans", sans-serif; cursor: pointer; }
.clackify-file-button:focus-within { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.clackify-file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.clackify-loaded { display: grid; gap: 24px; }
.clackify-hint.is-original { color: var(--cs-accent); }
.clackify-loaded[hidden], .clackify-empty[hidden], #clackify-tolerance-wrap[hidden], .clackify-toast[hidden] { display: none; }
.clackify-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.clackify-meta p { flex: 1 1 100%; margin: 0; color: var(--cs-text-muted); font: 500 11px/1.3 "IBM Plex Mono", monospace; }
.clackify-meta #clackify-change-photo { min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--cs-accent); font: 600 12px/1 "IBM Plex Sans", sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.clackify-magic-chip { min-height: 36px; margin-left: auto; padding: 0 14px; border: 1px solid var(--cs-border-strong); border-radius: 20px; background: transparent; color: var(--cs-text); font: 600 12px/1 "IBM Plex Sans", sans-serif; }
.clackify-magic-chip.is-on { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); color: var(--cs-on-accent); }
/* Spacing everywhere on this screen: 10 px from a label to its control, 24 px between groups.
   Margins, not gap: Safari ignores gap for a fieldset's legend and inside an open details. */
.clackify-control { min-width: 0; margin: 0; padding: 0; display: grid; gap: 10px; border: 0; }
.clackify-label { padding: 0; color: var(--cs-text-muted); font: 600 11px/1.2 "IBM Plex Mono", monospace; letter-spacing: .08em; }
legend.clackify-label { margin-bottom: 10px; }
.clackify-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface); }
.clackify-stepper button { min-height: 44px; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--cs-text); }
.clackify-stepper svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.clackify-stepper button:disabled { color: var(--cs-text-faint); }
.clackify-stepper output { color: var(--cs-text); font: 500 14px/1 "IBM Plex Mono", monospace; text-align: center; }
.clackify-chips { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; }
.clackify-chips button { min-width: 0; min-height: 44px; padding: 4px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface); color: var(--cs-text-2); font: 550 13px/1 "IBM Plex Sans", sans-serif; text-transform: none; letter-spacing: 0; }
.clackify-chips button.is-active { border-color: var(--cs-accent); background: var(--cs-accent-tint); color: var(--cs-accent); }
.clackify-range { grid-template-columns: 1fr auto; align-items: center; }
.clackify-range output { color: var(--cs-text); font: 500 12px/1 "IBM Plex Mono", monospace; }
.clackify-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--cs-accent); }
.clackify-quiet { padding: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface); }
.clackify-quiet > label { color: var(--cs-text); font-size: 14px; }
.clackify-quiet > input { position: relative; width: 42px; height: 26px; margin: 0; appearance: none; border: 1px solid var(--cs-border-strong); border-radius: 20px; background: var(--cs-border-control); cursor: pointer; }
.clackify-quiet > input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cs-text-2); transition: transform .15s ease; }
.clackify-quiet > input:checked { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); }
.clackify-quiet > input:checked::before { background: var(--cs-on-accent); transform: translateX(16px); }
.clackify-quiet > input:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
.clackify-quiet fieldset { grid-column: 1 / -1; margin-top: 8px; }
.clackify-more { padding-top: 4px; border-top: 1px solid var(--cs-divider); }
.clackify-more summary { min-height: 44px; display: list-item; align-content: center; color: var(--cs-text-2); font: 600 13px/44px "IBM Plex Sans", sans-serif; cursor: pointer; }
/* Inside More options, the same label, gap and spacing as every other control group. */
.clackify-more[open] { padding-bottom: 4px; }
.clackify-more > .clackify-control { margin-top: 24px; }
.clackify-more > summary + .clackify-control { margin-top: 12px; }
.clackify-more select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--cs-border-control); border-radius: 10px; color: var(--cs-text); background: var(--cs-surface); }
.clackify-more .clackify-control p { margin: 0; color: var(--cs-text-muted); font-size: 12px; line-height: 1.4; }
.clackify-toast { margin: 0; padding: 12px; border-radius: 8px; background: var(--cs-toast-bg); color: var(--cs-toast-text); font-size: 12px; }
@media (max-width: 350px) { .clackify-chips { gap: 4px; } .clackify-chips button { font-size: 12px; } }

/* Create library */
#library-screen { gap: 16px; padding-bottom: 90px; }
#library-screen .library-intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; padding: 0; border: 0; background: transparent; }
#library-screen .library-intro h2 { margin: 0; }
.library-title-actions { display: flex; align-items: center; gap: 4px; }
#library-select { min-height: var(--cs-header-control-size); border-color: var(--cs-border-strong); background: transparent; color: var(--cs-text); }
.library-new-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.library-new-card { min-width: 0; min-height: 102px; display: grid; align-content: space-between; gap: 10px; padding: 16px; border-radius: 12px; text-align: left; text-transform: none; letter-spacing: 0; }
.library-new-card strong { font: 600 clamp(17px, 4vw, 22px)/1.2 "IBM Plex Sans", sans-serif; }
.library-new-card span { font-size: 12px; line-height: 1.3; }
.library-new-snack { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); color: var(--cs-on-accent); }
.library-new-pack { border-color: var(--cs-accent-edge-solid); background: transparent; color: var(--cs-text); }
.library-new-pack span { color: var(--cs-text-muted); }
#library-screen .library-search input { min-height: 48px; border-radius: 10px; border-color: var(--cs-border-control); background: var(--cs-surface-raised); }
#library-screen .library-groups { gap: 24px; }
#library-screen .library-section { gap: 12px; padding-top: 0; border: 0; }
#library-screen .library-section h2 { margin: 0; color: var(--cs-text-muted); font: 500 11px/1.3 "IBM Plex Mono", monospace; letter-spacing: .1em; }
#library-screen .pack-groups, #library-screen .loose-snacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.library-pack-card, #library-screen .library-snack-card { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 10px; border: 1px solid var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); color: var(--cs-text); text-align: left; text-transform: none; letter-spacing: 0; }
.library-pack-card:hover, #library-screen .library-snack-card:hover { border-color: var(--cs-accent-edge); }
.library-pack-stack { position: relative; min-width: 0; display: grid; place-items: center; margin: 5px 8px 7px 0; aspect-ratio: 27 / 15; border: 1px solid var(--cs-border-strong); border-radius: 3px; background: var(--cs-board-well); color: var(--cs-text-muted); font-size: 11px; box-shadow: 4px 4px 0 -1px var(--cs-surface-raised), 4px 4px 0 var(--cs-border-strong), 8px 8px 0 -1px var(--cs-surface-raised), 8px 8px 0 var(--cs-border-strong); }
.library-pack-stack .cs-board { width: 100%; }
.library-pack-card .cs-board figcaption, #library-screen .library-snack-card .cs-board figcaption { display: none; }
.library-card-title { min-width: 0; overflow-wrap: anywhere; font: 600 14px/1.25 "IBM Plex Sans", sans-serif; }
.library-card-meta { color: var(--cs-text-muted); font: 500 11px/1.35 "IBM Plex Mono", monospace; }
#library-screen .library-snack-card { position: relative; }
#library-screen .library-snack-card .cs-board { min-width: 0; }
.library-select-check { position: absolute; z-index: 1; top: 15px; right: 15px; width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid var(--cs-accent-fill); border-radius: 50%; background: var(--cs-surface-raised); color: var(--cs-on-accent); font-size: 14px; }
.library-snack-card.is-selected .library-select-check { background: var(--cs-accent-fill); }
.library-select-bar:not([hidden]) { position: fixed; z-index: 30; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); width: min(calc(100% - 24px), 620px); display: flex; align-items: center; gap: 8px; transform: translateX(-50%); padding: 10px; border: 1px solid var(--cs-border-strong); border-radius: 12px; background: var(--cs-surface-raised); box-shadow: 0 10px 35px rgb(0 0 0 / .3); }
.library-select-bar > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.library-select-bar strong { font-size: 12px; line-height: 1.2; }
.library-select-bar span { color: var(--cs-text-muted); font-size: 11px; }
.library-select-bar button { min-height: 42px; padding: 6px 9px; font-size: 11px; white-space: nowrap; }
.studio-more { border: 0; color: var(--cs-text-muted); }
@media (max-width: 360px) {
  .library-new-card { min-height: 94px; padding: 12px; }
  #library-screen .pack-groups, #library-screen .loose-snacks { gap: 8px; }
  .library-pack-card, #library-screen .library-snack-card { padding: 7px; }
  .library-card-meta { font-size: 10px; }
  .library-select-bar { flex-wrap: wrap; }
}

.studio-header .studio-back {
  width: var(--cs-header-control-size);
  min-width: var(--cs-header-control-size);
  height: var(--cs-header-control-size);
  min-height: var(--cs-header-control-size);
  display: grid;
  place-items: center;
}
.studio-header .studio-more {
  width: var(--cs-header-control-size);
  min-width: var(--cs-header-control-size);
  height: var(--cs-header-control-size);
  min-height: var(--cs-header-control-size);
  display: grid;
  place-items: center;
}
.studio-header .studio-back svg, .studio-header .studio-more svg {
  width: var(--cs-header-icon-size);
  height: var(--cs-header-icon-size);
}
.studio-header .studio-title h1, .studio-header #snack-name {
  line-height: var(--cs-header-title-line-height);
}
.studio-header-actions { min-height: var(--cs-header-control-size); align-items: center; }
.library-title-actions > button { min-height: var(--cs-header-control-size); }
/* Run 2 editor frame. The board and hold controls share one stable top area. */
.editor-name-label { display: none; }
.is-snack-editor .studio-title h1 { display: none; }
.is-snack-editor .editor-name-label { display: block; }
.is-snack-editor #snack-name { width: 100%; min-width: 0; min-height: var(--cs-header-control-size); padding: 3px 5px; border: 0; border-bottom: 1px solid var(--cs-border-control); border-radius: 0; background: transparent; color: var(--cs-text); font: 600 clamp(17px, 4.6vw, 25px)/var(--cs-header-title-line-height) "IBM Plex Sans", sans-serif; text-align: left; text-overflow: ellipsis; }
.is-snack-editor .studio-back { min-width: 44px; min-height: 44px; display: grid; align-items: center; font-size: 29px; line-height: 1; }
.studio-back svg, .studio-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-snack-editor .studio-header { height: 58px; }
/* The "Pack · 2 of 6" line hangs below the name so the name stays centered with back, More and Save. */
.is-snack-editor .studio-title { position: relative; }
.is-snack-editor .studio-title .editor-pack-context { position: absolute; top: 100%; left: 0; right: 0; margin: 2px 0 0; text-align: left; }
.is-snack-editor .studio-header-actions { min-width: 0; }
.is-snack-editor .studio-header-actions #save-snack { min-height: var(--cs-header-control-size); padding: 7px 13px; border-radius: 8px; font-size: 12px; }
.is-snack-editor #save-snack:disabled { border-color: var(--cs-border-control); background: var(--cs-surface); color: var(--cs-text-muted); }
.editor-fixed { display: grid; grid-template-rows: 50px auto auto; align-content: start; gap: 10px; }
.editor-mode-switch { height: 50px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--cs-surface); }
.editor-mode-switch button { min-width: 0; min-height: 42px; display: grid; place-content: center; gap: 1px; padding: 4px; border: 0; border-radius: 9px; background: transparent; color: var(--cs-text-muted); font: 600 13px/1.2 "IBM Plex Sans", sans-serif; text-transform: none; letter-spacing: 0; }
/* Matches Curate's segments: the active mode is a raised pill, never a second filled action beside Save. */
.editor-mode-switch button.is-active { background: var(--cs-surface-raised); color: var(--cs-accent); box-shadow: 0 1px 5px rgb(0 0 0 / .12); }
.editor-mode-switch button:disabled:not(.is-active) { opacity: 1; }
.editor-mode-switch small { font: 500 9px/1.2 "IBM Plex Mono", monospace; }
.editor-mode-switch small[hidden] { display: none; }
.is-snack-editor .studio-workspace { display: grid; width: min(100%, 860px); height: auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 14px; margin: 0 auto; }
.is-snack-editor .board-stage, .is-snack-editor .studio-sidebar, .is-snack-editor .authoring-panel, .is-snack-editor .snack-controls { grid-column: auto; grid-row: auto; min-height: 0; overflow: visible; }
.is-snack-editor .board-stage { position: static; padding: 0; background: transparent; }
.is-snack-editor .board-frame { min-height: 0; }
.is-snack-editor.is-keyboard-editing .board-frame { padding: clamp(5px, 1.6vw, 12px); }
.is-snack-editor.is-keyboard-editing .studio-board { width: 100%; margin: 0; }
.is-snack-editor .studio-sidebar { display: grid; grid-template-rows: none; }
.is-snack-editor .authoring-panel { align-content: start; }
.is-snack-editor .snack-controls { padding: 12px; border-color: var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); pointer-events: auto; opacity: 1; }
.is-snack-editor .dwell-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
.is-snack-editor .dwell-editor > span { grid-column: 1 / -1; color: var(--cs-text-muted); font: 500 10px/1.3 "IBM Plex Mono", monospace; }
.is-snack-editor .dwell-quick { grid-column: 1; display: grid; gap: 4px; }
.is-snack-editor .dwell-quick button { min-height: 42px; border-color: var(--cs-border-control); border-radius: 8px; color: var(--cs-text-2); font-size: 12px; }
.is-snack-editor .dwell-quick button small { display: block; font: 500 9px/1.1 "IBM Plex Mono", monospace; }
.is-snack-editor .dwell-quick button small[hidden] { display: none; }
.is-snack-editor .dwell-quick button.is-active { border-color: var(--cs-accent); background: var(--cs-accent-tint); color: var(--cs-text); }
.is-snack-editor #try-on-snack { grid-column: 2; grid-row: 2; min-width: 108px; min-height: 42px; padding: 4px 8px; border-radius: 8px; font-size: 11px; text-transform: none; }
.is-snack-editor .try-on-hint { grid-column: 2; grid-row: 3; max-width: 132px; margin: 0; text-align: center; }
.is-snack-editor .dwell-custom-panel { grid-column: 1 / -1; grid-row: 4; padding: 12px; border: 1px solid var(--cs-border-control); border-radius: 9px; background: var(--cs-surface-raised); }
.is-snack-editor .dwell-custom-panel[hidden] { display: none; }
.dwell-custom-panel p { margin: 0 0 8px; color: var(--cs-text-2); font-size: 12px; }
.is-snack-editor .dwell-stepper { grid-template-columns: 1fr minmax(64px, auto) 1fr; gap: 6px; }
.is-snack-editor .dwell-stepper button { min-height: 42px; border-radius: 8px; font-size: 12px; }
.is-snack-editor .dwell-stepper output { color: var(--cs-accent); font: 600 18px/1 "IBM Plex Mono", monospace; }
.write-fit { min-height: 1.3em; margin: -8px 0 0; color: var(--cs-text-muted); font: 500 11px/1.4 "IBM Plex Mono", monospace; }
.write-fit.is-danger { color: var(--cs-danger); }
.is-snack-editor .write-form textarea { min-height: 90px; }
.is-snack-editor .layout-details { border-radius: 8px; }
.is-snack-editor .layout-details > .write-two-up, .is-snack-editor .layout-details > .position-tools { padding: 12px; }
.is-snack-editor .layout-details .range-stack { padding: 12px; }
.studio-toast { width: min(calc(100% - 32px), 560px); left: 50%; right: auto; transform: translateX(-50%); }

.studio-toast button { color: var(--cs-accent); }

/* Pack builder. The header and preview stay in view while the entries scroll. */
.pack-header-name { display: none; }
.is-pack-editor .studio-shell { gap: 8px; }
.is-pack-editor .studio-header { position: sticky; top: 0; z-index: 18; width: min(100%, 860px); height: 58px; margin: 0 auto; grid-template-columns: var(--cs-header-control-size) minmax(0, 1fr) auto; gap: 5px; background: var(--cs-bg); }
.is-pack-editor .studio-back { width: 44px; height: 44px; display: grid; place-items: center; }
.is-pack-editor .studio-title h1, .is-pack-editor .editor-name-label, .is-pack-editor .editor-pack-context { display: none; }
/* The title area is exactly one control tall, so the name sits on the header's center line. */
.is-pack-editor .studio-title { display: flex; align-items: center; height: var(--cs-header-control-size); }
.is-pack-editor .pack-header-name { flex: 1; }
.is-pack-editor .pack-header-name { position: relative; display: flex; align-items: center; min-width: 0; height: 44px; }
.is-pack-editor .pack-header-name .section-number { position: absolute; top: 0; left: 2px; margin: 0; color: var(--cs-text-muted); font-size: 9px; line-height: 1; }
.is-pack-editor #pack-detail-name { width: 100%; height: 44px; min-width: 0; padding: 13px 2px 0; border: 0; border-bottom: 1px solid var(--cs-border-control); border-radius: 0; background: transparent; color: var(--cs-text); font: 600 clamp(16px, 4.5vw, 23px)/var(--cs-header-title-line-height) "IBM Plex Sans", sans-serif; text-align: left; text-overflow: ellipsis; }
.is-pack-editor #pack-detail-name:focus { border-bottom-color: var(--cs-text-faint); outline: 0; }
.is-pack-editor .studio-header-actions { display: flex; gap: 4px; align-items: center; }
.is-pack-editor #pack-menu-button { width: 44px; height: 44px; }
.is-pack-editor #save-pack { min-width: 58px; height: 44px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.is-pack-editor #save-pack:disabled { border-color: var(--cs-border-control); background: var(--cs-surface); color: var(--cs-text-muted); }
.is-pack-editor .studio-content { min-width: 0; }
.pack-screen { width: min(100%, 860px); margin: 0 auto; gap: 9px; }
.pack-fixed-preview { position: sticky; top: 58px; z-index: 12; display: grid; gap: 7px; padding: 5px 0 10px; background: var(--cs-bg); }
.pack-preview-board { width: 100%; padding: 5px; border: 1px solid var(--cs-border-card); border-radius: 8px; background: var(--cs-board-well); }
.pack-preview-board .cs-board { width: 100%; margin: 0; }
.pack-preview-board figcaption, .pack-entry-row figcaption, .pack-add-grid figcaption { display: none; }
.pack-preview-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.pack-preview-play { width: 48px; height: 48px; min-height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cs-accent-fill); color: var(--cs-on-accent); }
.pack-preview-play:disabled { background: var(--cs-disabled-bg); color: var(--cs-disabled-text); }
.pack-preview-play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pack-preview-copy { min-width: 0; display: grid; gap: 2px; }
.pack-preview-copy strong { overflow: hidden; color: var(--cs-text); font: 600 14px/1.2 "IBM Plex Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.pack-preview-copy span { color: var(--cs-text-muted); font: 500 10px/1.2 "IBM Plex Mono", monospace; }
#try-on-pack { min-height: 44px; padding: 5px 9px; border-radius: 8px; font-size: 11px; text-transform: none; white-space: nowrap; }
/* Try on saves, so it wears Save's amber; greyed only when it can't act (no display on). */
#try-on-pack:disabled, .is-snack-editor #try-on-snack:disabled { border-color: var(--cs-border-control); background: var(--cs-surface); color: var(--cs-text-muted); }
.pack-list-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--cs-text-2); font: 500 11px/1.3 "IBM Plex Mono", monospace; }
.pack-list-heading a { color: var(--cs-accent); text-decoration: none; }
.pack-snacks-heading { display: flex; align-items: center; justify-content: space-between; min-height: 44px; color: var(--cs-text-2); font: 500 11px/1.2 "IBM Plex Mono", monospace; }
.pack-snacks-heading button { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--cs-accent); font: 600 13px/1 "IBM Plex Sans", sans-serif; text-transform: none; }
.pack-list-hint { margin: 0 0 3px; color: var(--cs-text-muted); font-size: 11px; }
.pack-entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pack-entry-card { position: relative; min-width: 0; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface); }
.pack-entry-card.is-linked { border-color: var(--cs-accent-muted); background: var(--cs-accent-tint); }
.pack-entry-card.is-linked::before { position: absolute; top: 1px; bottom: 1px; left: 1px; width: 3px; border-radius: 9px 0 0 9px; background: var(--cs-accent); content: ""; }
.pack-entry-row { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 0; align-items: center; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.pack-entry-row[style*="translateX"] { z-index: 3; background: var(--cs-surface); }
.pack-entry-card.is-linked .pack-entry-row:not(:first-child)::before { position: absolute; top: 0; right: 0; left: 44px; height: 1px; background: var(--cs-divider); content: ""; }
.pack-screen.is-read-only .pack-entry-row, .pack-screen.is-selecting .pack-entry-row { grid-template-columns: minmax(0, 1fr); }
.pack-entry-row.is-previewed { box-shadow: inset 0 0 0 1px var(--cs-accent-edge); }
/* The card can't clip (seam chains sit on its edge), so its end rows round their own corners. */
.pack-entry-card > .pack-entry-row:first-child, .pack-entry-card > .pack-entry-row:first-child .pack-entry-open { border-top-left-radius: 9px; border-top-right-radius: 9px; }
.pack-entry-card > .pack-entry-row:last-of-type, .pack-entry-card > .pack-entry-row:last-of-type .pack-entry-open { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
.pack-entry-card.is-dragging { z-index: 45; border-color: var(--cs-accent); background: var(--cs-surface-raised); box-shadow: 0 10px 28px rgb(0 0 0 / .28); pointer-events: none; }
.pack-drop-placeholder { position: relative; min-height: 2px; border-radius: 10px; background: var(--cs-accent-tint); }
.pack-drop-placeholder::before { position: absolute; top: -2px; right: 0; left: 0; height: 3px; border-radius: 2px; background: var(--cs-accent); content: ""; }
.pack-entry-open { min-width: 0; display: grid; grid-template-columns: 25px 72px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--cs-text); text-align: left; }
.pack-screen.is-selecting .pack-entry-open { grid-template-columns: 20px 25px 72px minmax(0, 1fr); }
.pack-entry-check { width: 18px; height: 18px; border: 1px solid var(--cs-border-strong); border-radius: 4px; }
.pack-entry-check[aria-checked="true"] { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); box-shadow: inset 0 0 0 4px var(--cs-accent-fill); }
.pack-entry-check[aria-checked="true"] { color: var(--cs-on-accent); }
.pack-entry-check svg { width: 14px; height: 14px; }
.pack-entry-open > .cs-board { width: 72px; max-width: 72px; }
.pack-entry-number { color: var(--cs-text-muted); font: 500 11px/1 "IBM Plex Mono", monospace; }
.pack-entry-details { min-width: 0; gap: 3px; }
.pack-entry-details strong { overflow: hidden; font: 600 13px/1.2 "IBM Plex Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.pack-entry-details > span { color: var(--cs-text-muted); font: 500 10px/1.2 "IBM Plex Sans", sans-serif; letter-spacing: 0; text-transform: none; }
.pack-drag-handle { width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--cs-text-muted); cursor: grab; touch-action: none; }
.pack-drag-handle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.pack-drag-handle:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.pack-row-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; border: 1px solid var(--cs-border-card); border-top: 0; border-radius: 0 0 10px 10px; background: var(--cs-surface-raised); }
.pack-row-tray button { min-width: 0; min-height: 44px; padding: 5px; border-color: var(--cs-border-control); border-radius: 8px; font-size: 11px; text-transform: none; }
.pack-row-tray .danger-button { border-color: var(--cs-danger-edge); color: var(--cs-danger); }
.pack-chain { position: absolute; z-index: 2; left: 0; bottom: -27px; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--cs-text-muted); }
.pack-entry-row .pack-chain { top: -22px; bottom: auto; }
.pack-chain span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px dashed var(--cs-border-strong); border-radius: 50%; background: var(--cs-surface); }
.pack-chain.is-linked { color: var(--cs-accent); }
.pack-chain.is-linked span { border: 1px solid var(--cs-accent-muted); background: var(--cs-accent-tint); }
.pack-chain svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pack-select-bar { position: fixed; right: max(10px, calc((100vw - 860px) / 2)); bottom: calc(56px + var(--cs-safe-area-bottom)); left: max(10px, calc((100vw - 860px) / 2)); z-index: 15; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface-raised); color: var(--cs-text); font-size: 12px; }
.pack-select-bar[hidden] { display: none; }
/* In Select mode the bar owns the bottom: rows scroll clear of it and toasts sit above it. */
.pack-screen.is-selecting { padding-bottom: 80px; }
body:has(.pack-screen.is-selecting:not([hidden])) .studio-toast { bottom: calc(126px + var(--cs-safe-area-bottom)); }
.pack-select-bar button { min-height: 44px; padding: 0 12px; }
.pack-add-snacks { width: 100%; min-height: 52px; display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px dashed var(--cs-border-strong); border-radius: 10px; background: transparent; color: var(--cs-text); font: 600 14px/1 "IBM Plex Sans", sans-serif; text-transform: none; }
.pack-add-snacks svg, .pack-new-snack svg { width: 19px; height: 19px; fill: none; stroke: var(--cs-accent); stroke-width: 2; stroke-linecap: round; }
.pack-add-dialog .sheet-card { max-height: 80dvh; }
@media (min-width: 760px) { .pack-add-dialog .sheet-card { max-height: none; } }
.pack-add-dialog .library-search input { min-height: 48px; border-radius: 10px; border-color: var(--cs-border-control); background: var(--cs-surface-raised); }
.pack-add-dialog .library-filter-chips { min-width: 0; min-height: 40px; }
.pack-add-dialog #pack-add-status:empty { display: none; }
.pack-add-dialog .sheet-card header button, #pack-menu-dialog .sheet-card header button { min-width: 60px; min-height: 44px; padding: 0 9px; border-radius: 8px; font: 600 12px/1 "IBM Plex Sans", sans-serif; }
.pack-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.pack-add-tile { min-width: 0; min-height: 112px; display: grid; align-content: start; gap: 5px; padding: 8px; border: 1px solid var(--cs-border-card); border-radius: 10px; background: var(--cs-surface-raised); color: var(--cs-text); text-align: left; text-transform: none; }
.pack-add-tile .cs-board { width: 100%; }
.pack-add-tile strong { overflow: hidden; font: 600 12px/1.2 "IBM Plex Sans", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.pack-add-tile span { color: var(--cs-text-muted); font: 500 10px/1.2 "IBM Plex Mono", monospace; }
.pack-add-tile.is-selected { border-color: var(--cs-accent); background: var(--cs-accent-tint); }
.pack-add-tile.is-in-pack { opacity: .55; }
.pack-new-snack { place-content: center; justify-items: center; border-style: dashed; }
.pack-add-dialog #pack-add-submit { position: sticky; bottom: 0; min-height: 48px; border-radius: 8px; }
.pack-add-dialog #pack-add-submit:disabled { border-color: var(--cs-border-control); background: var(--cs-surface-raised); color: var(--cs-text-muted); }
.pack-menu-list fieldset { min-width: 0; margin: 0; padding: 10px 4px; display: grid; gap: 8px; border: 0; border-bottom: 1px solid var(--cs-divider); }
.pack-menu-list fieldset legend { color: var(--cs-text-muted); font: 500 11px/1.2 "IBM Plex Mono", monospace; }
.pack-menu-list fieldset label { min-height: 36px; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pack-menu-list input { accent-color: var(--cs-accent); }
.pack-menu-list .pack-preference-toggle { min-height: 50px; border-bottom: 1px solid var(--cs-divider); }
.pack-menu-list [disabled] { opacity: .55; }
@media (max-width: 350px) {
  .is-pack-editor .studio-header { gap: 2px; }
  .is-pack-editor .studio-header-actions { gap: 0; }
  .is-pack-editor #save-pack { min-width: 52px; padding-inline: 6px; }
  .pack-preview-controls { gap: 5px; }
  #try-on-pack { max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
  .pack-entry-open { grid-template-columns: 20px 72px minmax(0, 1fr); gap: 5px; padding: 6px; }
  .pack-screen.is-selecting .pack-entry-open { grid-template-columns: 18px 20px 72px minmax(0, 1fr); gap: 5px; }
}
.is-published-snack .editor-fixed .snack-controls { opacity: 1; }
@media (min-height: 780px) {
  body.is-snack-editor:not(.is-keyboard-editing) .editor-fixed { position: sticky; top: 8px; z-index: 8; padding: 4px 0; background: var(--cs-bg); }
}
@media (max-width: 390px) {
  .is-snack-editor .studio-header { gap: 3px; }
  .is-snack-editor .studio-header-actions { gap: 0; }
  .is-snack-editor .studio-more { min-width: 36px; }
  .is-snack-editor .dwell-quick button { padding: 4px 2px; }
  .is-snack-editor #try-on-snack { min-width: 92px; }
}

/* The editor's pinned area contains only the mode switch and board. */
.is-snack-editor .editor-fixed { grid-template-rows: 50px auto; }
.is-snack-editor .studio-sidebar { gap: 0; }
.is-snack-editor .snack-controls { padding: 7px 10px; }
.is-snack-editor .dwell-editor { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
.hold-toggle { min-height: 44px; padding: 4px 8px; display: flex; gap: 9px; align-items: center; justify-content: start; border: 0; background: transparent; color: var(--cs-text); font: 600 13px/1.2 "IBM Plex Sans", sans-serif; text-transform: none; }
.hold-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hold-toggle output { font: inherit; }
/* The hint centers under the button, whose label is centered too. */
.try-on-control { display: grid; justify-items: center; text-align: center; }
/* Margin 0–3 fits on one row; Fine tune's two dropdowns stack at the same full width (owner). */
.segmented-control.margin-control { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layout-details .write-two-up.layout-selects { grid-template-columns: 1fr; }
.layout-details .layout-selects select { width: 100%; }
.is-snack-editor .try-on-control #try-on-snack { min-height: 38px; grid-column: auto; grid-row: auto; }
.is-snack-editor .try-on-control .try-on-hint { grid-column: auto; grid-row: auto; max-width: none; }
.hold-options { grid-column: 1 / -1; display: grid; gap: 8px; padding: 8px 2px 2px; border-top: 1px solid var(--cs-divider); }
.hold-options[hidden] { display: none; }
.is-snack-editor .hold-options .dwell-quick { grid-column: auto; }
.is-snack-editor .hold-options .dwell-custom-panel { grid-column: auto; grid-row: auto; }
.is-snack-editor .authoring-panel { padding: 12px; border-color: var(--cs-border-card); border-radius: 12px; background: var(--cs-surface); }
.is-snack-editor .authoring-panel[hidden] { display: none; }
.is-snack-editor #photo-tools { width: 100%; min-height: 0; max-height: none; margin: 0; padding: 12px; gap: 0; border: 1px solid var(--cs-border-card); border-radius: 12px; }
.is-snack-editor #photo-tools .clackify-empty { padding-top: 12px; gap: 16px; }
.is-snack-editor #photo-tools .clackify-loaded { gap: 24px; }
.is-snack-editor #photo-tools .clackify-history { display: flex; justify-content: flex-end; gap: 8px; }
.is-snack-editor #photo-tools .clackify-history button { min-height: 40px; padding: 4px 12px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface); color: var(--cs-text); font-size: 12px; }
.is-snack-editor #photo-tools .clackify-history button:disabled { color: var(--cs-text-muted); }
.is-snack-editor #photo-tools .clackify-empty p { font-size: 14px; }
.is-snack-editor #photo-tools .clackify-file-button { min-height: 56px; }

/* Photo treatments share the editor's quiet card language. */
#photo-tools button, #photo-tools label { -webkit-tap-highlight-color: transparent; }
#photo-tools .clackify-range input, #photo-tools #clackify-strength { min-height: 44px; }
#photo-tools .clackify-quiet > label { min-height: 44px; display: flex; align-items: center; }
#photo-tools .clackify-quiet > input, #photo-tools .clackify-quiet > input:checked { width: 44px; height: 44px; border: 0; background: transparent; }
#photo-tools .clackify-quiet > input::after { content: ""; position: absolute; top: 9px; left: 1px; width: 42px; height: 26px; border: 1px solid var(--cs-border-strong); border-radius: 20px; background: var(--cs-border-control); }
#photo-tools .clackify-quiet > input:checked::after { border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); }
#photo-tools .clackify-quiet > input::before { z-index: 1; top: 13px; left: 5px; }
#photo-tools .clackify-empty { gap: 14px; }
#photo-tools .clackify-empty h2 { margin: 0; color: var(--cs-text); font: 650 22px/1.18 "IBM Plex Sans", sans-serif; }
#photo-tools .clackify-empty .clackify-intro { max-width: none; margin: 0; font-size: 14px; text-align: left; }
.clackify-examples { min-width: 0; display: grid; gap: 8px; }
.clackify-sample-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.clackify-sample-strip figure { min-width: 0; margin: 0; }
.clackify-sample-strip canvas { display: block; width: 100%; height: auto; border: 1px solid var(--cs-border-control); border-radius: 3px; background: var(--cs-board-well); }
.clackify-sample-strip figcaption { display: grid; gap: 2px; padding-top: 5px; color: var(--cs-text-2); font-size: 10px; line-height: 1.2; }
.clackify-sample-strip figcaption strong { color: var(--cs-text); font-size: 11px; }
.clackify-sample-strip figcaption span { color: var(--cs-text-muted); }
#photo-tools .clackify-empty .clackify-tip { max-width: none; display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 11px; border-radius: 8px; background: var(--cs-surface); font-size: 12px; line-height: 1.4; text-align: left; }
.clackify-tip svg, #clackify-auto svg, .clackify-fine summary svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clackify-tip svg { color: var(--cs-accent); }
#photo-tools .clackify-photo-choices { gap: 9px; }
#photo-tools .clackify-photo-choices label:first-child { border-style: solid; border-color: var(--cs-accent-fill); background: var(--cs-accent-fill); color: var(--cs-on-accent); }
#photo-tools .clackify-photo-choices label:last-child { border-style: solid; }
#photo-tools .clackify-loaded { gap: 17px; }
.clackify-look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.clackify-look-grid button { min-width: 0; min-height: 64px; padding: 8px 5px; display: grid; align-content: center; gap: 5px; border: 1px solid var(--cs-border-control); border-radius: 8px; background: var(--cs-surface); color: var(--cs-text); text-align: left; }
.clackify-look-grid button.is-active { border-color: var(--cs-accent); background: var(--cs-accent-tint); }
.clackify-look-grid strong { font-size: clamp(11px, 3.2vw, 14px); }
.clackify-look-grid button.is-active strong { color: var(--cs-accent); }
.clackify-look-grid span { color: var(--cs-text-muted); font-size: clamp(9px, 2.4vw, 11px); line-height: 1.2; }
.clackify-magic { display: grid; gap: 9px; }
.clackify-magic-heading { display: flex; align-items: center; gap: 9px; }
.clackify-magic-heading label { margin-right: auto; }
.clackify-magic-heading output { color: var(--cs-accent); font: 600 13px/1 "IBM Plex Mono", monospace; }
#clackify-auto { min-height: 44px; display: flex; align-items: center; gap: 5px; padding: 0 11px; border: 1px solid var(--cs-accent-edge-solid); border-radius: 24px; background: var(--cs-accent-tint); color: var(--cs-accent); font-size: 12px; }
#clackify-strength { width: 100%; min-height: 30px; margin: 0; accent-color: var(--cs-accent); }
.clackify-scale { display: flex; justify-content: space-between; color: var(--cs-text-muted); font-size: 11px; }
#photo-tools .clackify-meta { justify-content: space-between; }
#photo-tools .clackify-meta #clackify-change-photo { min-height: 44px; }
#photo-tools .clackify-history button { min-height: 44px; }
.clackify-fine { min-width: 0; border-top: 1px solid var(--cs-divider); border-bottom: 1px solid var(--cs-divider); }
.clackify-fine summary { min-height: 52px; display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; }
.clackify-fine summary::-webkit-details-marker { display: none; }
.clackify-fine summary strong { color: var(--cs-text); font-size: 14px; }
.clackify-fine summary span:nth-child(2) { min-width: 0; margin-left: auto; color: var(--cs-text-muted); font: 500 10px/1.25 "IBM Plex Mono", monospace; text-align: right; }
.clackify-fine[open] summary svg { transform: rotate(180deg); }
.clackify-fine-content { display: grid; gap: 21px; padding: 0 0 18px; }
.clackify-fine-content > p { margin: 0; color: var(--cs-text-muted); font-size: 12px; line-height: 1.4; }
.clackify-fine-content .is-overridden > .clackify-label::after, .clackify-fine-content .is-overridden > label::after { content: " · set by you"; color: var(--cs-accent); font-size: 10px; text-transform: none; letter-spacing: 0; }
.clackify-follow-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clackify-follow-actions button { min-height: 44px; padding: 5px 9px; border: 1px solid var(--cs-accent-edge-solid); border-radius: 8px; background: var(--cs-accent-tint); color: var(--cs-accent); font-size: 11px; }
.clackify-reset { width: fit-content; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--cs-accent); font-size: 13px; text-decoration: underline; }
.clackify-status { margin: 0; color: var(--cs-text-muted); font: 500 11px/1.3 "IBM Plex Mono", monospace; }
@media (max-width: 350px) { .clackify-look-grid { gap: 4px; } .clackify-look-grid button { padding: 7px 3px; } }
.is-snack-editor #board-viewport #clackify-photo { position: absolute; inset: clamp(5px, 1.6vw, 12px); z-index: 2; width: calc(100% - 2 * clamp(5px, 1.6vw, 12px)); height: auto; aspect-ratio: 27 / 15; object-fit: fill; pointer-events: none; }
.is-snack-editor #board-viewport #clackify-photo[hidden] { display: none; }
.is-snack-editor #clackify-original-chip { position: absolute; z-index: 3; top: 12px; left: 12px; padding: 4px 8px; border: 1px solid rgb(255 255 255 / .35); border-radius: 20px; background: rgb(15 18 20 / .84); color: white; font: 600 11px/1.2 "IBM Plex Sans", sans-serif; pointer-events: none; }
.is-snack-editor #clackify-original-chip[hidden] { display: none; }
.is-snack-editor #studio-board.is-photo-original { opacity: 0; }
.is-snack-editor[data-photo-loaded="true"] #studio-board { touch-action: none; cursor: grab; }
.is-snack-editor[data-photo-loaded="true"] #studio-board:active { cursor: grabbing; }
.is-snack-editor #clackify-hint.is-original { color: var(--cs-accent); }
/* Narrow: the divider is an invisible line break, so Undo, Redo and Clear always start their own row.
   Wide enough for one row: it becomes the visible separator between the tools and the history buttons. */
/* A disabled tool fades out; it never shows the default button fill. */
/* The loupe is a setting, not a tool: "on" tints the icon instead of lifting it like the active tool. */
.is-snack-editor .selection-tools { order: 0; border-color: var(--cs-divider); }
.is-snack-editor .selection-tools > div:first-child { display: flex; }
.is-snack-editor .selection-tools span, .is-snack-editor .selection-tools small { color: var(--cs-text-2); }
.is-snack-editor .selection-actions { display: flex; flex-wrap: wrap; overflow: visible; gap: 5px; }
.is-snack-editor .selection-actions button { min-width: 42px; min-height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px; border-color: var(--cs-border-control); border-radius: 7px; color: var(--cs-text-2); }
.is-snack-editor .selection-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sheet-action-list { display: grid; gap: 0; }
.sheet-action-list button { min-height: 50px; padding: 10px 4px; display: grid; gap: 4px; align-content: center; border: 0; border-bottom: 1px solid var(--cs-divider); border-radius: 0; background: transparent; color: var(--cs-text); text-align: left; font: 500 14px/1.3 "IBM Plex Sans", sans-serif; text-transform: none; }
.sheet-action-list button[hidden] { display: none; }
.sheet-action-list button:disabled { color: var(--cs-text-muted); }
.sheet-action-list button:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
.sheet-action-list button small { color: var(--cs-text-muted); font-size: 11px; }
.sheet-action-list .danger-action { color: var(--cs-danger); }
.sheet-action-list .new-pack-row { padding: 12px; border: 1px dashed var(--cs-border-strong); border-radius: 9px; }
.inactive-detail { padding: 12px; display: grid; gap: 7px; border: 1px solid var(--cs-border-card); border-radius: 9px; color: var(--cs-text-muted); }
.inactive-detail span { font: 500 10px/1.2 "IBM Plex Mono", monospace; }
.inactive-detail span small { float: right; text-transform: none; }
.inactive-detail p, .details-footnote { margin: 0; font-size: 12px; }
.inactive-detail > small { font-size: 10px; }
.details-footnote { color: var(--cs-text-muted); }
.hold-toggle:hover, .hold-toggle:active { border: 0; background: transparent; color: var(--cs-text); }
.hold-toggle:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; background: transparent; }
.details-sheet header button { min-width: 58px; padding: 0 9px; border-radius: 8px; font: 600 12px/1 "IBM Plex Sans", sans-serif; }
@media (max-width: 759px) {
  .is-snack-editor .editor-fixed { position: sticky; top: 0; z-index: 8; padding: 4px 0; background: var(--cs-bg); }
  body.is-snack-editor.is-draw-mode .board-stage { position: static; padding: 0; background: transparent; }
}