/* NGN Studio: editor chrome shared by the quote card and social post tools.
   World: a design-tool workspace. Neutral chrome that recedes, the artboard is the only loud thing,
   Northeastern red as the one accent for selection, focus and primary actions. */
:root {
  --chrome: #ffffff;        /* top bar + panels */
  --canvas: #f0f0f0;        /* workspace behind the artboard */
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dot: rgb(0 0 0 / .07);
  --line: #e6e6e6;
  --field: #f5f5f5;         /* inputs, segmented tracks */
  --field-hover: #ececec;
  --raised: #ffffff;        /* selected segment */
  --text: #1e1e1e;
  --text-2: #6b6b6b;
  --text-3: #737373;
  --sel: #c8102e;           /* Northeastern red: selection, focus, primary */
  --sel-soft: rgb(200 16 46 / .09);
  --sel-text: #b00e28;
  --on-sel: #ffffff;
  --btn: #c8102e;           /* primary button: Northeastern red, 5.9:1 under white text */
  --btn-hover: #a50d26;
  --ok: #14ae5c;
  --warn: #d97706;           /* amber, so warnings don't read as the red accent */
  --toast: #1e1e1e;
  --toast-text: #ffffff;
  --shadow-art: 0 1px 2px rgb(0 0 0 / .08), 0 8px 32px rgb(0 0 0 / .12);
  --shadow-pop: 0 1px 3px rgb(0 0 0 / .12), 0 6px 20px rgb(0 0 0 / .16);
  --ui: "Inter", system-ui, -apple-system, sans-serif;
  --r: 6px;
  --bar: 48px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --chrome: #2c2c2c; --canvas: #1e1e1e; --dot: rgb(255 255 255 / .06); --line: #3a3a3a;
  --field: #383838; --field-hover: #424242; --raised: #4a4a4a;
  --text: #f5f5f5; --text-2: #b3b3b3; --text-3: #a3a3a3;
  --sel: #e8475f; --sel-soft: rgb(232 71 95 / .18); --sel-text: #ff8a99; --on-sel: #ffffff;
  --toast: #f5f5f5; --toast-text: #1e1e1e;
  --shadow-art: 0 1px 2px rgb(0 0 0 / .4), 0 12px 40px rgb(0 0 0 / .5);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --chrome: #2c2c2c; --canvas: #1e1e1e; --dot: rgb(255 255 255 / .06); --line: #3a3a3a;
  --field: #383838; --field-hover: #424242; --raised: #4a4a4a;
  --text: #f5f5f5; --text-2: #b3b3b3; --text-3: #a3a3a3;
  --sel: #e8475f; --sel-soft: rgb(232 71 95 / .18); --sel-text: #ff8a99; --on-sel: #ffffff;
  --toast: #f5f5f5; --toast-text: #1e1e1e;
  --shadow-art: 0 1px 2px rgb(0 0 0 / .4), 0 12px 40px rgb(0 0 0 / .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font: 400 12px/16px var(--ui); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: var(--bar) minmax(0, 1fr);
}
::selection { background: var(--sel-soft); }
svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* top bar */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 12px 0 14px; background: var(--chrome); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; letter-spacing: -0.01em; min-width: 0; }
.brand canvas, .brand svg { width: 24px; height: 24px; flex: none; }
.brand small { font-weight: 400; color: var(--text-3); font-size: 12px; }
.tabs { display: flex; gap: 2px; background: var(--field); border-radius: var(--r); padding: 2px; }
.tabs a {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 4px;
  color: var(--text-2); text-decoration: none; font-weight: 500;
}
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 10px;
  font: 500 12px var(--ui); color: var(--text); background: transparent; border: 1px solid transparent;
  border-radius: var(--r); cursor: pointer; white-space: nowrap; transition: background .12s;
}
.btn:hover { background: var(--field); }
.btn.outline { border-color: var(--line); }
.btn.primary { background: var(--btn); color: var(--on-sel); padding: 0 12px; }
.btn.primary:hover { background: var(--btn-hover); }
.btn:active:not(:disabled), .seg button:active, .presets button:active, .add-board:active, .tile:active .tile-art { transform: translateY(.5px) scale(.985); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.icon { width: 28px; padding: 0; color: var(--text-2); }
.btn.icon:hover { color: var(--text); }
.btn[aria-pressed="true"] { background: var(--sel-soft); color: var(--sel-text); }

/* workspace */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; min-height: 0; }
.workspace.with-left { grid-template-columns: 232px minmax(0, 1fr) 280px; }
.stage {
  position: relative; min-width: 0; min-height: 0; overflow: auto;
  display: grid; place-items: center; padding: 48px 40px 80px; /* room below for the size pill */
  background-color: var(--canvas);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 16px 16px;
}
.artboard { display: grid; gap: 8px; max-width: 100%; }
.frame-label { display: flex; justify-content: space-between; gap: 16px; color: var(--text-2); font-size: 11px; }
/* The label never sets the artboard's width (zero intrinsic width, then stretched to the canvas), so zooming out
   shrinks slides, gaps and labels together; the name truncates and the size hides when there's no room. */
.artboard .frame-label { width: 0; min-width: 100%; overflow: hidden; }
.stage.zoom-small .frame-label > span:last-child { display: none; }
.frame-label span:last-child { color: var(--text-3); font-variant-numeric: tabular-nums; }
.artboard canvas {
  display: block; width: auto; height: var(--art-h, auto); max-width: none;
  box-shadow: var(--shadow-art); background: #000; touch-action: none;
  transition: outline-color .12s;
}
.stage.drag::after {
  content: "Drop to use as the photo"; position: absolute; inset: 12px; z-index: 5; display: grid; place-items: center;
  border: 2px dashed var(--sel); border-radius: 12px; background: var(--sel-soft); color: var(--sel-text); font-weight: 600; font-size: 13px; pointer-events: none;
}
.stage.panning, .stage.panning canvas { cursor: grab !important; }
.stage.grabbing, .stage.grabbing canvas { cursor: grabbing !important; }
@media (hover: hover) { .artboard:not(.selected) canvas:hover { outline: 1.5px solid var(--sel); } }

/* toasts float at the bottom of the canvas, like Figma's notifications */
.toasts { z-index: 7; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px;
  background: var(--toast); color: var(--toast-text); border-radius: 8px; box-shadow: var(--shadow-pop); font-weight: 500;
  animation: pop-in .32s var(--spring);
}
.toast:empty { display: none; }
.toast.plain { padding-right: 14px; }
.toast .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.toast button { font: 600 12px var(--ui); color: var(--sel-text); background: none; border: 0; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.toast button:hover { background: rgb(128 128 128 / .18); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }

/* panels */
.panel { background: var(--chrome); min-height: 0; overflow-y: auto; }
.panel.right { border-left: 1px solid var(--line); }
.panel.left { border-right: 1px solid var(--line); }
.sec { padding: 12px 16px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.sec:last-child { border-bottom: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; }
.sec h2, .panel h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.sub { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.note { margin: 0; color: var(--text-3); font-size: 12px; line-height: 16px; }

/* property rows: label, control, value */
.prop { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; align-items: center; gap: 8px; min-height: 28px; }
.prop > label, .prop > span:first-child { color: var(--text-2); }
.prop.wide { grid-template-columns: 72px minmax(0, 1fr); }
.val {
  height: 24px; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; border-radius: 4px;
  background: var(--field); font-variant-numeric: tabular-nums; color: var(--text);
}

/* slider */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(var(--sel), var(--sel)) 0 / var(--p, 50%) 100% no-repeat, var(--line); }
input[type=range]::-moz-range-track { height: 2px; border-radius: 1px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 2px; background: var(--sel); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .3); transition: transform .12s; }
input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .3); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--sel), 0 1px 3px rgb(0 0 0 / .3); }

/* segmented control */
.seg { display: flex; gap: 2px; padding: 2px; background: var(--field); border-radius: var(--r); }
.seg button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 24px; padding: 0 8px;
  font: 500 12px var(--ui); color: var(--text-2); background: transparent; border: 0; border-radius: 4px; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / .14); }

/* select */
select {
  width: 100%; height: 28px; padding: 0 28px 0 8px; font: 12px var(--ui); color: var(--text);
  background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238f8f8f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7 3 3 3-3'/%3E%3C/svg%3E") right 6px center no-repeat;
  border: 1px solid transparent; border-radius: var(--r); appearance: none; cursor: pointer;
}
select:hover { border-color: var(--line); }

/* text fields */
.field, .editor {
  width: 100%; font: 400 12px/18px var(--ui); color: var(--text); background: var(--field);
  border: 1px solid transparent; border-radius: var(--r); padding: 6px 8px; outline: none; transition: border-color .12s, background .12s;
}
.field:hover, .editor:hover { border-color: var(--line); }
.field:focus, .editor:focus { border-color: var(--sel); background: var(--chrome); }
.field::placeholder { color: var(--text-3); }
.editor { min-height: 88px; overflow-wrap: anywhere; font-size: 13px; line-height: 19px; }
.editor b, .editor strong { font-weight: 650; }
.input-icon { position: relative; flex: 1; min-width: 0; }
.input-icon svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.input-icon .field { padding-left: 30px; height: 28px; }

.toolbar { display: flex; align-items: center; gap: 4px; }
.toolbar .spacer { flex: 1; }
.label-row { display: flex; align-items: center; justify-content: space-between; color: var(--text-2); min-height: 24px; }

/* drop zone for the photo */
.drop {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r);
  color: var(--text-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.drop:hover, .drop:focus-within { border-color: var(--sel); background: var(--sel-soft); color: var(--text); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .thumb { width: 32px; height: 32px; border-radius: 4px; background: var(--field) center / cover; display: grid; place-items: center; color: var(--text-3); flex: none; }
.drop strong { display: block; color: var(--text); font-weight: 500; }

/* swatches */
.swatches { display: flex; gap: 6px; }
.swatches button { width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(128 128 128 / .45); }
.swatches button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgb(128 128 128 / .45), 0 0 0 2px var(--chrome), 0 0 0 4px var(--sel); }

/* On-canvas text editing: Figma's hover outline and text-edit box */
.artboard { position: relative; }
.canvas-hover { position: absolute; pointer-events: none; outline: 1.5px solid var(--sel); border-radius: 2px; }
.canvas-editor {
  position: absolute; z-index: 1; outline: 1.5px solid var(--sel); outline-offset: 6px; border-radius: 1px;
  white-space: normal; overflow-wrap: normal; word-break: normal; font-kerning: normal; caret-color: var(--sel); cursor: text;
}
.canvas-editor b, .canvas-editor strong { font-weight: 700; }
.canvas-editor::selection, .canvas-editor *::selection { background: rgb(200 16 46 / .35); }

/* Wrap-width frame while editing: the dashed box is the headline's wrap width; square handles resize it */
.wrap-frame { position: absolute; pointer-events: none; outline: 1px dashed var(--sel); outline-offset: 6px; }
.wrap-handle {
  position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; pointer-events: all; cursor: ew-resize;
  background: #fff; border: 1.5px solid var(--sel); border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .3);
}
.wrap-handle.left { left: -11px; }
.wrap-handle.right { right: -11px; }

/* Several artboards side by side; the selected one carries Figma's selection outline */
.boards { display: flex; gap: clamp(16px, calc(var(--art-h, 900px) * .06), 56px); align-items: flex-start; margin: auto; }
.boards .artboard { flex: none; }
.artboard.selected canvas { outline: 1.5px solid var(--sel); outline-offset: 0; }
.sel { position: absolute; inset: 0; pointer-events: none; display: none; }
.artboard.selected .sel { display: block; }
.sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1.5px solid var(--sel); border-radius: 1.5px; }
.sel i:nth-child(1) { left: -4px; top: -4px; } .sel i:nth-child(2) { right: -4px; top: -4px; }
.sel i:nth-child(3) { left: -4px; bottom: -4px; } .sel i:nth-child(4) { right: -4px; bottom: -4px; }
.sel b {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); padding: 1px 5px; border-radius: 3px;
  background: var(--sel); color: #fff; font: 500 11px/16px var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.art-wrap { position: relative; }
.artboard.selected .frame-label span:first-child { color: var(--sel-text); }
.frame-label .x { visibility: hidden; border: 0; background: none; color: var(--text-3); padding: 0; cursor: pointer; display: flex; }
.artboard:hover .frame-label .x { visibility: visible; }
.frame-label .x:hover { color: var(--text); }
.frame-label > span:first-child { display: flex; gap: 6px; align-items: center; min-width: 0; cursor: default; }
.frame-label > span:last-child { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.frame-label .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.frame-label > span:first-child { flex: 1 1 auto; overflow: hidden; }
.add-board {
  flex: none; align-self: stretch; margin-top: 24px; width: clamp(56px, calc(var(--art-h, 900px) * .17), 120px); display: grid; place-items: center; align-content: center; gap: 6px;
  border: 1.5px dashed var(--line); border-radius: 4px; background: none; color: var(--text-2); font: 500 12px var(--ui); cursor: pointer;
}
.add-board:hover { border-color: var(--sel); color: var(--sel-text); background: var(--sel-soft); }

/* Zoom control, bottom right of the canvas */
.zoom-bar {
  position: fixed; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px;
  background: var(--chrome); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line);
}
.zoom-pct { min-width: 48px; height: 26px; border: 0; border-radius: 4px; background: none; color: var(--text); font: 500 12px var(--ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom-pct:hover { background: var(--field); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }

/* Tooltips with shortcut keys */
.tip {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; pointer-events: none;
  background: #1e1e1e; color: #fff; font: 500 11px/14px var(--ui); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / .25);
  animation: tip-in .12s ease-out;
}
.tip kbd, .sheet kbd { font: 500 11px var(--ui); padding: 1px 5px; border-radius: 3px; background: rgb(255 255 255 / .14); color: inherit; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-2px); } }

/* Keyboard shortcut sheet */
.sheet { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgb(0 0 0 / .32); animation: fade-in .15s ease-out; }
.sheet-card { width: min(440px, calc(100vw - 32px)); max-height: 80vh; overflow: auto; padding: 8px 20px 16px; border-radius: 12px; background: var(--chrome); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); animation: toast-in .2s cubic-bezier(.16, 1, .3, 1); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.sheet-head h2 { margin: 0; font-size: 13px; font-weight: 600; }
.sheet dl { margin: 0; display: grid; }
.sheet dl div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line); }
.sheet dt { color: var(--text-2); }
.sheet dd { margin: 0; display: flex; gap: 4px; align-items: center; color: var(--text-3); }
.sheet kbd { background: var(--field); color: var(--text); }
@keyframes fade-in { from { opacity: 0; } }

/* Number fields: type a value, or drag on the label */
.prop output.val { cursor: text; }
.prop output.val:hover { box-shadow: inset 0 0 0 1px var(--line); }
.val-edit { width: 100%; border: 0; outline: 1.5px solid var(--sel); font: inherit; text-align: right; }
.prop > label.scrub { cursor: ew-resize; user-select: none; }
body.scrubbing, body.scrubbing * { cursor: ew-resize !important; user-select: none; }

/* Panels ease in when the selected slide type changes their contents */
.panel .sec, .panel .quote-note { animation: sec-in .18s ease-out; }
@keyframes sec-in { from { opacity: 0; transform: translateY(2px); } }

/* Where you are: tool, then the story that's open */
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-3); font-weight: 500; }
.crumbs button { border: 0; background: none; padding: 4px 6px; margin: 0 -6px; border-radius: 4px; color: var(--text-2); font: inherit; cursor: pointer; white-space: nowrap; }
.crumbs button:hover { background: var(--field); color: var(--text); }
.crumbs .here { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }

/* Onboarding tour */
.tour-ring {
  position: fixed; z-index: 50; pointer-events: none; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--sel), 0 0 0 9999px rgb(0 0 0 / .45);
  transition: left .28s cubic-bezier(.16, 1, .3, 1), top .28s cubic-bezier(.16, 1, .3, 1), width .28s cubic-bezier(.16, 1, .3, 1), height .28s cubic-bezier(.16, 1, .3, 1);
}
.tour-tip {
  position: fixed; z-index: 51; width: 288px; padding: 14px 16px 12px; border-radius: 10px;
  background: var(--chrome); color: var(--text); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line);
  transition: left .28s cubic-bezier(.16, 1, .3, 1), top .28s cubic-bezier(.16, 1, .3, 1);
  animation: pop-in .32s var(--spring);
}
.tour-tip::before { content: ""; position: absolute; width: 10px; height: 10px; background: var(--chrome); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--line); }
.tour-tip[data-side="bottom"]::before { top: -5px; left: calc(var(--ax) - 5px); }
.tour-tip[data-side="top"]::before { bottom: -5px; left: calc(var(--ax) - 5px); transform: rotate(225deg); }
.tour-tip[data-side="right"]::before { left: -5px; top: calc(var(--ay) - 5px); transform: rotate(-45deg); }
.tour-tip[data-side="left"]::before { right: -5px; top: calc(var(--ay) - 5px); transform: rotate(135deg); }
.tour-head { display: flex; justify-content: space-between; align-items: center; color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.tour-x { border: 0; background: none; color: var(--text-3); padding: 2px; margin-right: -6px; border-radius: 4px; cursor: pointer; display: flex; }
.tour-x:hover { color: var(--text); background: var(--field); }
.tour-tip h3 { margin: 4px 0 4px; font-size: 13px; font-weight: 600; line-height: 18px; text-wrap: balance; }
.tour-tip p { margin: 0 0 12px; color: var(--text-2); font-size: 12px; line-height: 17px; }
.tour-actions { display: flex; align-items: center; gap: 6px; }
.tour-actions span { flex: 1; }
.tour-skip { border: 0; background: none; color: var(--text-3); font: 500 12px var(--ui); padding: 4px 0; cursor: pointer; }
.tour-skip:hover { color: var(--text); }
.help-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 40; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line); background: var(--chrome); color: var(--text-2);
  box-shadow: 0 1px 3px rgb(0 0 0 / .12); cursor: pointer; transition: color .12s, transform .12s;
}
.help-btn:hover { color: var(--text); transform: translateY(-1px); }
.help-btn svg.i { width: 18px; height: 18px; }

/* Phones and small tablets: an app, not a long page. The top bar, then the canvas in a fixed band, then the
   properties as a sheet that scrolls on its own, so dragging on the canvas never fights scrolling the page. */
@media (max-width: 960px) {
  html, body { height: 100%; }
  body { height: 100dvh; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto; gap: 8px; height: auto;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  }
  body[data-view="editor"] .brand > span:not(.crumbs) { display: none; }
  .topbar .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .topbar .tabs a { flex: 1; justify-content: center; }
  .top-actions { gap: 6px; }
  .top-actions .btn.outline { width: 36px; padding: 0; font-size: 0; gap: 0; }
  .top-actions .btn { height: 36px; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--m-stage-h, 52dvh) minmax(0, 1fr); }
  .stage { padding: 12px 12px 16px; overflow: hidden; }
  .panel.right {
    border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgb(0 0 0 / .06);
    overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); position: relative; z-index: 2;
  }
  .panel.right::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line); }
  .sec { padding: 12px 16px 16px; }
  .zoom-bar, .help-btn, .sel b { display: none !important; }
  .toasts { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 24px); }
  .toast { font-size: 13px; }
  .artboard.selected canvas { outline-width: 2px; }
  /* iOS zooms into any field under 16px; keep typing in place */
  .field, .editor, select, .val-edit { font-size: 16px !important; }
  .tour-tip { width: min(300px, calc(100vw - 24px)); }
}
/* Fingers need bigger targets than a cursor */
@media (pointer: coarse) {
  .btn { min-height: 36px; }
  .btn.icon { width: 36px; }
  .seg button { height: 32px; }
  .prop { min-height: 36px; }
  .swatches button { width: 30px; height: 30px; }
  .wrap-handle { width: 18px; height: 18px; margin-top: -9px; }
  .wrap-handle.left { left: -15px; } .wrap-handle.right { right: -15px; }
  input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9px; }
  .frame-label .x { visibility: visible; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }