:root {
  color-scheme: dark;
  --bg:#15110d; --bg-2:#1d1813; --surface:#251f19; --surface-2:#2e2620;
  --line:#3a3027; --line-soft:#2a221b; --text:#f4ecdf; --text-dim:#c4b8a4; --muted:#9a8c78;
  --amber:#e8a547; --amber-soft:#ffd089; --sage:#95c187; --coral:#d97757; --blue:#8fb0c5;
  --shadow:0 24px 60px -22px rgba(0,0,0,.72);
  --display:"Fraunces","Songti SC","Noto Serif SC",Georgia,serif;
  --ui:"Geist",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,Menlo,monospace;
  --topbar:64px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body, #app { min-height:100%; }
body {
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font-family:var(--ui); -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(1000px 520px at 18% -12%,rgba(232,165,71,.12),transparent 62%),
    radial-gradient(900px 520px at 110% 100%,rgba(149,193,135,.08),transparent 58%);
}
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.4; }
a { color:var(--amber); text-decoration:none; }
h1, h2, h3 { margin:0; font-family:var(--display); font-weight:500; letter-spacing:0; }

/* ---- shared controls ---- */
.pill, .ghost, .primary, .danger, .select, .file-btn, .chip {
  min-height:36px; border-radius:8px; padding:8px 12px; font-size:13px;
}
.pill { border:1px solid var(--line); background:var(--surface); color:var(--text-dim); font-family:var(--mono); display:inline-flex; align-items:center; gap:7px; }
.pill.xs { min-height:26px; padding:3px 9px; font-size:11px; }
.ghost { border:1px solid var(--line); background:transparent; color:var(--text-dim); }
.ghost:hover { background:var(--surface); color:var(--text); }
.ghost.xs, .danger.xs, .chip { min-height:30px; padding:5px 10px; font-size:12px; }
.primary { border:1px solid var(--amber); background:var(--amber); color:#15110d; font-weight:700; }
.primary:hover { background:var(--amber-soft); border-color:var(--amber-soft); }
.primary.lg { min-height:42px; padding:10px 18px; font-size:14px; }
.danger { border:1px solid rgba(217,119,87,.4); background:transparent; color:var(--coral); }
.danger:hover { background:rgba(217,119,87,.12); }
.icon {
  width:28px; height:28px; min-height:0; padding:0; border-radius:6px; border:1px solid var(--line);
  background:transparent; color:var(--text-dim); display:grid; place-items:center; font-size:13px;
}
.icon:hover { background:var(--surface); color:var(--text); }
.icon.danger { border-color:rgba(217,119,87,.35); color:var(--coral); }
.select, input, textarea { border:1px solid var(--line); background:var(--bg); color:var(--text); outline:none; border-radius:8px; }
.select:focus, input:focus, textarea:focus { border-color:var(--amber); }
.chip { background:var(--surface); color:var(--text-dim); border:1px solid var(--line); }
.chip:hover { color:var(--text); }
.sub { color:var(--text-dim); line-height:1.7; margin:0; }
.sub.sm { font-size:13px; line-height:1.6; }
.meta { color:var(--muted); font-family:var(--mono); font-size:12px; }
.warn { margin:0; color:var(--coral); font-size:12px; line-height:1.55; border-top:1px solid var(--line); padding-top:10px; }
.kicker { display:inline-flex; gap:9px; align-items:center; margin-bottom:12px; color:var(--amber); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 14px rgba(232,165,71,.55); }

/* ---- topbar ---- */
.app { position:relative; z-index:1; min-height:100vh; }
.topbar { position:sticky; top:0; z-index:20; height:var(--topbar); border-bottom:1px solid var(--line); background:rgba(21,17,13,.88); backdrop-filter:blur(12px); }
.topbar-inner { width:min(1320px,calc(100% - 36px)); margin:0 auto; height:var(--topbar); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--text-dim); font-family:var(--mono); font-size:13px; white-space:nowrap; background:none; border:0; }
.mark { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--amber); color:#15110d; font-family:var(--display); font-size:20px; font-weight:700; }
.top-nav { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; }

/* ---- page shells ---- */
.page { width:min(1320px,calc(100% - 36px)); margin:0 auto; padding:22px 0 64px; position:relative; }
.page-wide, .page-present { width:min(1640px,calc(100% - 28px)); }
.page-tool { width:min(1040px,calc(100% - 36px)); }
.busy-pill {
  position:fixed; top:calc(var(--topbar) + 10px); left:50%; transform:translateX(-50%); z-index:30;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted);
  font-family:var(--mono); font-size:11px; padding:6px 13px; display:none; box-shadow:var(--shadow);
}
.busy-pill.on { display:inline-flex; color:var(--amber-soft); border-color:rgba(232,165,71,.4); }

/* ---- home ---- */
.home-hero { padding:18px 0 26px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.home-hero h1 { font-size:clamp(40px,6vw,64px); line-height:1.02; margin:2px 0 0; }
.home-hero .sub { margin-top:14px; max-width:680px; }
.feature-card {
  width:100%; text-align:left; display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:0; align-items:stretch;
  border:1px solid rgba(232,165,71,.4); border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,rgba(232,165,71,.14),rgba(149,193,135,.06)),var(--surface);
  box-shadow:var(--shadow); transition:transform .14s, border-color .14s;
}
.feature-card:hover { transform:translateY(-2px); border-color:var(--amber); }
.feature-card-main { padding:26px 28px; display:grid; gap:10px; align-content:center; }
.feat-badge { justify-self:start; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#15110d; background:var(--amber); padding:4px 10px; border-radius:999px; }
.feature-card-main h2 { font-size:34px; }
.feature-card-main p { margin:0; color:var(--text-dim); line-height:1.65; max-width:640px; }
.feature-cta { color:var(--amber-soft); font-weight:600; margin-top:4px; }
.feature-card-art { display:grid; place-items:center; background:radial-gradient(circle at 60% 40%,rgba(232,165,71,.3),transparent 70%); border-left:1px solid var(--line); }
.feature-card-art span { font-size:60px; color:var(--amber); opacity:.85; }
.util-section { margin-top:30px; }
.util-title { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.util-title h3 { font-size:22px; }
.util-title p { margin:0; color:var(--muted); font-size:13px; }
.util-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.util-card {
  border:1px solid var(--line); border-radius:12px; padding:16px; text-align:left; display:grid; gap:6px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2)); color:var(--text-dim); transition:transform .12s, border-color .12s;
}
.util-card:hover { transform:translateY(-2px); border-color:rgba(232,165,71,.5); }
.util-card strong { color:var(--text); font-size:16px; font-family:var(--display); font-weight:500; }
.util-card span { color:var(--muted); font-size:12.5px; line-height:1.5; }

/* ---- headers (present + tools) ---- */
.feature-head, .tool-bar {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.back { border:1px solid var(--line); background:transparent; color:var(--text-dim); border-radius:8px; padding:8px 12px; font-size:13px; white-space:nowrap; }
.back:hover { background:var(--surface); color:var(--text); }
.feature-head-title h1, .tool-bar-title h1 { font-size:28px; display:flex; align-items:center; gap:10px; }
.feat-dot { color:var(--amber); font-size:18px; }
.feature-head-title p, .tool-bar-title p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.feature-head-actions { display:flex; align-items:center; gap:10px; }
.deck-name { min-height:42px; width:200px; padding:8px 12px; }

/* ---- present builder ---- */
.present-empty { display:grid; place-items:start stretch; }
.present-builder {
  display:grid; grid-template-columns:220px minmax(0,1fr) 260px; gap:14px;
  height:calc(100vh - var(--topbar) - 150px); min-height:480px;
}
.pb-source, .pb-seq {
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:12px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; min-height:0;
}
.pb-col-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pb-col-head h3 { font-size:16px; }
.source-pages { overflow:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; align-content:start; padding-right:2px; }
.src-tile { position:relative; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:0; overflow:hidden; }
.src-tile img { width:100%; aspect-ratio:4/3; object-fit:contain; background:#0f0c09; display:block; }
.src-tile > span { position:absolute; left:5px; top:5px; font-family:var(--mono); font-size:10px; color:var(--text); background:rgba(0,0,0,.55); border-radius:4px; padding:1px 5px; }
.src-tile em { position:absolute; right:5px; top:5px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--amber); color:#15110d; font-size:11px; font-style:normal; font-weight:700; }
.src-tile.on { border-color:var(--amber); box-shadow:0 0 0 1px rgba(232,165,71,.3) inset; }

.pb-stage { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px; min-height:0; }
.pb-preview { min-height:0; display:grid; place-items:center; background:#070605; border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
.pb-preview img { max-width:100%; max-height:100%; object-fit:contain; }
.pb-notes { display:grid; grid-template-rows:auto 1fr; gap:7px; }
.pb-notes label { color:var(--text-dim); font-size:12.5px; }
.pb-notes textarea { width:100%; height:24vh; min-height:140px; resize:vertical; padding:12px 14px; line-height:1.6; border-radius:10px; }

.seq-list { overflow:auto; display:grid; gap:8px; align-content:start; padding-right:2px; }
.seq-row { display:grid; grid-template-columns:24px 46px minmax(0,1fr); gap:8px; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:7px; position:relative; }
.seq-row.on { border-color:var(--amber); box-shadow:0 0 0 1px rgba(232,165,71,.26) inset; }
.seq-no { font-family:var(--mono); color:var(--amber-soft); font-size:12px; text-align:center; }
.seq-row img { width:46px; aspect-ratio:4/3; object-fit:contain; background:#0f0c09; border-radius:4px; }
.seq-meta { min-width:0; }
.seq-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.seq-meta small { color:var(--muted); font-family:var(--mono); font-size:11px; }
.seq-actions { grid-column:1 / -1; display:flex; gap:6px; justify-content:flex-end; }

/* ---- drop zone ---- */
.drop { border:1px dashed rgba(232,165,71,.45); border-radius:12px; background:rgba(232,165,71,.07); padding:30px; display:grid; gap:8px; justify-items:center; text-align:center; }
.drop.drag { background:rgba(232,165,71,.16); border-color:var(--amber); }
.drop input { display:none; }
.drop-title { font-weight:700; color:var(--text); font-size:15px; }
.file-btn input { display:none; }
.file-btn { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--amber); background:var(--amber); color:#15110d; font-weight:700; }
.file-btn.xs { min-height:30px; padding:5px 11px; font-size:12px; }
.swap { display:inline-flex; align-items:center; cursor:pointer; }
.swap input { display:none; }

/* ---- tool views ---- */
.tool-view { display:grid; gap:16px; }
.file-bar { display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:10px 12px; }
.file-bar img { width:48px; aspect-ratio:3/4; object-fit:contain; background:#0f0c09; border-radius:5px; }
.util-body { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:16px; align-items:start; }
.util-main { display:grid; gap:13px; min-width:0; }
.util-main h3 { font-size:17px; }
.util-side { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:14px; display:grid; gap:11px; align-content:start; }
.util-side h3 { font-size:16px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; align-items:end; }
.form-grid.compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field { display:grid; gap:6px; min-width:0; }
.field label { color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.field input, .field select, .field textarea { width:100%; padding:10px 11px; }
.field textarea { min-height:96px; resize:vertical; line-height:1.55; }
.chips { display:flex; gap:7px; flex-wrap:wrap; align-self:end; }
.metric { border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:12px; display:grid; gap:4px; }
.metric strong { font-family:var(--display); font-size:28px; font-weight:500; }
.metric span { color:var(--muted); font-family:var(--mono); font-size:11px; overflow-wrap:anywhere; }
.empty-state { border:1px dashed var(--line); border-radius:10px; min-height:90px; display:grid; place-items:center; color:var(--muted); font-size:13px; padding:18px; text-align:center; line-height:1.6; }
.empty-state.sm { min-height:60px; font-size:12px; }
.reorder-list { display:grid; gap:8px; }
.reorder-row { display:grid; grid-template-columns:26px 46px minmax(0,1fr) auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:8px; }
.reorder-row img { width:46px; aspect-ratio:3/4; object-fit:contain; background:#0f0c09; border-radius:4px; }
.reorder-row .seq-actions { grid-column:auto; }
.preview-strip { display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; }
.preview-strip div { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); overflow:hidden; }
.preview-strip img { width:100%; aspect-ratio:3/4; object-fit:contain; background:#0f0c09; display:block; }
.preview-strip span { display:block; padding:5px; color:var(--muted); font-family:var(--mono); font-size:11px; text-align:center; }
.preset-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.preset-card { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:13px; display:grid; gap:7px; }
.preset-card.on { border-color:rgba(232,165,71,.55); background:rgba(232,165,71,.08); }
.preset-card.muted { opacity:.55; }
.preset-card strong { color:var(--text); }
.preset-card span { color:var(--muted); line-height:1.45; font-size:13px; }
.image-queue { display:grid; gap:8px; }
.image-queue article { border:1px solid var(--line); border-radius:8px; background:var(--bg-2); padding:10px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; align-items:center; }
.image-queue article > span { font-family:var(--mono); color:var(--amber-soft); }
.image-queue strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-queue small { color:var(--muted); font-family:var(--mono); }

/* ---- editor ---- */
.edit-view .editor-shell { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2); }
.editor-toolbar { min-height:52px; border-bottom:1px solid var(--line); background:rgba(21,17,13,.84); display:flex; align-items:center; gap:12px; padding:8px 10px; flex-wrap:wrap; }
.toolbar-group { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.toolbar-group.zoom { margin-left:auto; gap:8px; }
.toolbar-group.zoom span { font-family:var(--mono); font-size:12px; color:var(--text-dim); min-width:42px; text-align:center; }
.tool-pill { min-height:32px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text-dim); padding:6px 12px; font-size:13px; }
.tool-pill:hover, .tool-pill.on { color:#15110d; background:var(--amber); border-color:var(--amber); font-weight:700; }
.editor-workbench { display:grid; grid-template-columns:128px minmax(0,1fr) 320px; height:calc(100vh - var(--topbar) - 230px); min-height:520px; }
.page-rail { border-right:1px solid var(--line); background:#17120e; padding:10px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.rail-page { display:grid; gap:5px; }
.rail-thumb { border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text-dim); padding:6px; display:grid; gap:5px; width:100%; }
.rail-page.on .rail-thumb { border-color:var(--amber); box-shadow:0 0 0 1px rgba(232,165,71,.24) inset; }
.rail-thumb > span { font-family:var(--mono); font-size:11px; text-align:left; }
.rail-thumb > div { aspect-ratio:3/4; border-radius:5px; background:#0f0c09; display:grid; place-items:center; overflow:hidden; color:var(--muted); font-family:var(--mono); font-size:11px; }
.rail-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.rail-ops { display:flex; gap:5px; justify-content:center; }
.canvas-area { min-width:0; background:#100d0a; padding:14px; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; }
.canvas-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-family:var(--mono); font-size:12px; }
.canvas-scroll { min-height:0; overflow:auto; display:grid; place-items:start center; padding:6px; }
/* No forced aspect-ratio: the canvas wraps the real page image, so landscape pages are NOT squashed. */
.pdf-canvas { position:relative; max-width:100%; border:1px solid var(--line); border-radius:8px; background:#070605; overflow:hidden; box-shadow:0 22px 52px -28px rgba(0,0,0,.9); }
.pdf-canvas.crosshair { cursor:crosshair; }
.canvas-page-img { display:block; width:100%; height:auto; user-select:none; pointer-events:none; }
.blank-page { width:100%; aspect-ratio:8.5/11; display:grid; place-items:center; background:#f4ecdf; color:#15110d; font-family:var(--mono); }
.blank-page.muted-blank { background:#0f0c09; color:var(--muted); }
.canvas-object { position:absolute; border:1px solid rgba(232,165,71,.82); background:rgba(232,165,71,.13); color:var(--amber-soft); border-radius:4px; padding:3px 5px; min-width:22px; min-height:16px; overflow:hidden; cursor:move; display:flex; align-items:flex-start; }
.canvas-object span { font-size:12px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; overflow-wrap:anywhere; }
.canvas-object.selected { outline:2px solid var(--amber); outline-offset:1px; z-index:3; }
.canvas-object.replace { border-color:rgba(149,193,135,.9); background:rgba(255,255,255,.72); color:#15110d; }
.canvas-object.whiteout { border-color:rgba(244,236,223,.9); background:rgba(244,236,223,.72); color:#15110d; }
.canvas-object.highlight { border-color:rgba(217,119,87,.9); background:rgba(232,165,71,.32); color:var(--text); }
.canvas-object i { position:absolute; right:0; bottom:0; width:13px; height:13px; cursor:nwse-resize; background:linear-gradient(135deg,transparent 50%,var(--amber) 50%); border-bottom-right-radius:3px; }
.inspector { border-left:1px solid var(--line); background:#17120e; padding:14px; display:grid; align-content:start; gap:14px; overflow:auto; }
.inspector h3 { font-size:20px; }
.inspector .actions { display:flex; gap:8px; flex-wrap:wrap; }
.inspector-help { border:1px solid var(--line); border-radius:8px; background:var(--bg); padding:12px; display:grid; gap:8px; }
.inspector-help strong { color:var(--text); }
.inspector-help span { color:var(--text-dim); line-height:1.55; font-size:13px; }

/* ---- presenter console ---- */
.present-shell { position:relative; z-index:1; min-height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr); background:#080706; }
.present-top { height:54px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid #2d261f; background:#15110d; }
.present-main { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:12px; padding:12px; min-height:0; }
.stage, .next-box, .notes-box, .control-box { border:1px solid #332a22; border-radius:10px; background:#17120e; overflow:hidden; }
.stage { display:grid; place-items:center; min-height:0; }
.stage img, .audience img { max-width:100%; max-height:100%; object-fit:contain; }
.present-side { display:grid; grid-template-rows:auto 1fr auto; gap:12px; min-height:0; }
.next-box, .notes-box, .control-box { padding:12px; display:grid; gap:10px; align-content:start; }
.next-box img { width:100%; max-height:200px; object-fit:contain; background:#080706; border-radius:6px; }
.notes-box { min-height:0; }
.notes-box div { white-space:pre-wrap; color:var(--text-dim); line-height:1.6; overflow:auto; }
.audience { position:relative; width:100vw; height:100vh; background:#050404; display:grid; place-items:center; overflow:hidden; }
.audience > img { max-width:100%; max-height:100%; object-fit:contain; }
.audience-bar {
  position:fixed; top:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px; background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
  transition:opacity .25s; opacity:1;
}
.audience-bar .meta { color:#d8cdb9; }
.audience-bar-actions { display:flex; gap:8px; }
.audience-bar .ghost { color:#f4ecdf; border-color:rgba(255,255,255,.28); background:rgba(0,0,0,.4); }
.audience-bar .ghost:hover { background:rgba(0,0,0,.7); color:#fff; }
.audience-nav { position:fixed; inset:0; z-index:2; display:flex; }
.aud-edge { border:0; background:transparent; padding:0; }
.aud-edge.prev { width:18%; cursor:w-resize; }
.aud-edge.next { flex:1; cursor:e-resize; }
.audience-counter { position:fixed; right:14px; bottom:14px; z-index:5; color:#f4ecdf; background:rgba(0,0,0,.56); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 11px; font-family:var(--mono); font-size:12px; opacity:.85; transition:opacity .25s; }
.audience.idle .audience-bar, .audience.idle .audience-counter { opacity:0; pointer-events:none; }
.audience.idle .audience-nav { cursor:none; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:40; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--text); padding:11px 16px; box-shadow:var(--shadow); }

/* ---- responsive ---- */
@media (max-width:1040px) {
  .util-body { grid-template-columns:1fr; }
  .feature-card { grid-template-columns:1fr; }
  .feature-card-art { display:none; }
}
@media (max-width:900px) {
  .topbar-inner, .page { width:calc(100% - 22px); }
  .feature-head, .tool-bar { grid-template-columns:auto 1fr; }
  .feature-head-actions { grid-column:1 / -1; justify-content:space-between; }
  .deck-name { flex:1; }
  .present-builder { grid-template-columns:1fr; height:auto; }
  .pb-source, .pb-seq { max-height:280px; }
  .source-pages { grid-template-columns:repeat(4,1fr); }
  .pb-preview { min-height:42vh; }
  .editor-workbench { grid-template-columns:1fr; height:auto; }
  .page-rail { flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); }
  .rail-page { min-width:96px; }
  .canvas-scroll { min-height:50vh; }
  .inspector { border-left:0; border-top:1px solid var(--line); }
  .present-main { grid-template-columns:1fr; }
  .present-side { grid-template-rows:auto; }
}