/* 试写间 · Moments Maker 雾光壳；移动端 390px 为一等规格。 */
:root { --trial-max: 980px; }
body { display: flex; flex-direction: column; background: var(--fog-bg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sitehead {
  position: sticky; top: 0; z-index: 30; background: var(--fog-glass);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar, .brandrow, .chanbar { max-width: var(--trial-max); margin: 0 auto; box-sizing: border-box; }
.topbar { display: flex; align-items: center; justify-content: flex-end; padding: 14px 16px 0; }
.brandrow { padding: 6px 16px 8px; }
.logo { font-family: "ZCOOL XiaoWei", "Songti SC", serif; font-size: 30px; font-weight: 400; letter-spacing: 1.5px; color: var(--ink); }
.logo span { color: var(--ink-dim); }
.top-account { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.guest { font-size: 12px; color: var(--ink-dim); }
.chip, .chan {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; text-decoration: none; color: var(--ink-dim);
  padding: 7px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
}
.chip:hover, .chan:hover { background: var(--fog-ice); color: var(--ink); }
.chip.solid { background: var(--ink); color: #fff; }
.chanbar { display: flex; justify-content: center; gap: 10px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; }
.chanbar::-webkit-scrollbar { display: none; }
.chan { flex: 0 0 auto; padding-inline: 20px; }
.chan.active { background: var(--fog-lilac); color: var(--ink); border-color: transparent; }

.trial-shell { width: 100%; max-width: var(--trial-max); margin: 0 auto; padding: 16px 16px 110px; }
.trial-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 10px; padding: 0 2px; }
.trial-intro h1 { flex: 0 0 auto; font-size: 20px; font-weight: 650; letter-spacing: 1.5px; line-height: 1.3; }
.trial-intro p { max-width: 620px; color: var(--ink-dim); font-size: 12px; line-height: 1.6; text-align: right; }
.trial-section { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 16px; }
.trial-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.trial-heading h2 { font-size: 19px; }
.trial-heading p { color: var(--ink-dim); font-size: 11.5px; }
.trial-input {
  width: 100%; height: 72px; resize: vertical; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; color: var(--ink); padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.7; outline: none;
}
.trial-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; }
.quote-library-button {
  width: 58px; min-height: 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-deep);
  color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 1px;
}
.quote-library-button span { color: var(--ink-dim); font-size: 10px; font-weight: 700; }
.quote-library-button[hidden] { display: none; }
.trial-input:focus, .trial-search:focus { border-color: var(--fog-ice); box-shadow: 0 0 0 3px rgba(200,222,231,.35); }
.input-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--ink-dim); font-size: 11.5px; }
.content-library-links {
  display: flex; gap: 8px; align-items: center; margin: -5px 2px 14px; overflow-x: auto; scrollbar-width: none;
}
.content-library-links::-webkit-scrollbar { display: none; }
.content-library-links a {
  flex: 0 0 auto; min-height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 10px; background: rgba(255,255,255,.7); color: var(--ink-dim); font-size: 11.5px; font-weight: 650; text-decoration: none;
}
.content-library-links a:hover, .content-library-links a:focus-visible { background: var(--fog-ice); color: var(--ink); }
.mode-heading { display: block; }
.output-mode-seg {
  width: 100%; min-height: 40px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card-deep);
}
.output-mode-seg button, .compact-seg button {
  min-height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-dim);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.output-mode-seg button[aria-pressed="true"], .compact-seg button[aria-pressed="true"] {
  background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(41,38,49,.08);
}
.ratio-group { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-deep); }
.ratio-btn {
  min-width: 52px; min-height: 44px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-dim); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ratio-btn[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(41,38,49,.08); }
.preview-tools { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 11.5px; }
.preview-wrap { position: relative; width: min(100%, 720px); margin: 0 auto; }
.preview-stage {
  position: relative; width: 100%; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.preview-stage.is-square { aspect-ratio: 1; }
.preview-stage.is-excerpt { aspect-ratio: 3 / 4; }
.preview-stage.is-sticker { min-height: 190px; aspect-ratio: auto; }
.preview-stage.is-transparent {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e8ebef 25%, transparent 25%), linear-gradient(-45deg, #e8ebef 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8ebef 75%), linear-gradient(-45deg, transparent 75%, #e8ebef 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}
.preview-stage img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.preview-skeleton {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-dim); font-size: 12px;
  background: linear-gradient(100deg, #eef1f7 25%, #f7f8fb 40%, #eef1f7 56%); background-size: 240% 100%;
  animation: trial-shimmer 1.4s ease-in-out infinite;
}
@keyframes trial-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.font-loading {
  position: absolute; top: 10px; right: 10px; z-index: 2; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.9); color: var(--ink-dim); padding: 7px 10px; font-size: 11px;
}
.font-loading[hidden], .preview-skeleton[hidden] { display: none; }
.coverage-warning, .preview-error { min-height: 20px; margin: 9px 2px 0; color: #9a5b24; font-size: 12px; line-height: 1.6; }
.preview-error { color: #9f3f38; }
.preview-note { margin: 7px 2px 0; color: var(--ink-dim); font-size: 11.5px; line-height: 1.6; }
.mode-panel {
  margin-top: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72);
}
.mode-panel[hidden] { display: none; }
.template-selector { margin-bottom: 13px; }
.template-selector-head, .customization-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-selector-head strong, .customization-head strong { color: var(--ink); font-size: 12px; }
.template-selector-head span { color: var(--ink-dim); font-size: 10.5px; }
.template-card-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.template-card {
  min-width: 0; min-height: 92px; display: grid; grid-template-rows: 56px auto; gap: 6px; padding: 6px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.template-card:hover, .template-card:focus-visible { border-color: var(--ink-dim); }
.template-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(41,38,49,.08); }
.template-card-preview {
  position: relative; min-height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 7px;
  background: var(--template-bg); color: var(--template-ink); font-family: var(--template-font); font-size: 12px; line-height: 1.35; text-align: center;
}
.template-card-preview.is-transparent {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e8ebef 25%, transparent 25%), linear-gradient(-45deg, #e8ebef 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8ebef 75%), linear-gradient(-45deg, transparent 75%, #e8ebef 75%);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0; background-size: 12px 12px;
}
.template-card-preview span { position: relative; z-index: 1; max-width: 92%; }
.template-card-preview--night { background: #0e0b10; color: #f49bc7; font-weight: 750; }
.template-card-preview--night::before {
  content: ""; position: absolute; inset: 5% 31%;
  background: linear-gradient(90deg, transparent, rgba(122,55,91,.5), transparent);
}
.template-card-preview--night::after {
  content: ""; position: absolute; left: 42%; right: 42%; bottom: 17%; height: 1px; background: rgba(217,130,174,.65);
}
.template-card-preview--mincho { place-items: start; padding: 15px 8px 8px; background: #fffdf8; color: #1734c6; text-align: left; }
.template-card-preview--mincho::before {
  content: "摘录　　　　　　　摘句"; position: absolute; top: 4px; left: 7px; right: 7px;
  padding-bottom: 2px; border-bottom: 1px solid rgba(111,123,209,.62); color: #2942bb; font-size: 5px; white-space: pre;
}
.template-card-preview--mincho::after {
  content: "01"; position: absolute; left: 7px; right: 7px; bottom: 4px; border-top: 1px solid rgba(111,123,209,.62);
  color: #2942bb; font-size: 5px; text-align: center;
}
.template-card-preview--mincho span { max-width: 78%; font-size: 10px; line-height: 1.25; }
.template-card-preview--handwrite { background: #cf879c; color: #fff9fb; text-align: left; }
.template-card-preview--handwrite::before {
  content: ""; position: absolute; inset: 11% 8% 9%; border: 1px solid rgba(237,179,193,.58); border-radius: 4px;
  background: #dc97aa; box-shadow: 1px 3px 6px rgba(106,52,70,.22); transform: rotate(-1.1deg);
}
.template-card-preview--handwrite::after {
  content: ""; position: absolute; width: 24%; height: 12%; left: 11%; top: 5%; border-radius: 2px;
  background: rgba(243,197,208,.74); transform: rotate(-6deg);
}
.template-card-preview--handwrite span { transform: translate(8%, 4%) rotate(-1.5deg); font-size: 11px; }
.excerpt-ratio-row { margin-bottom: 11px; }
.template-card-name { display: block; overflow: hidden; color: var(--ink-dim); font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.customization-head { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.customization-controls { min-width: 0; margin: 0; padding: 0; border: 0; }
.customization-controls:disabled { opacity: .42; }
.customization-lock {
  min-height: 38px; margin-top: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fog-lilac);
  border-radius: 10px; background: var(--card-deep); color: var(--ink); font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.customization-lock[hidden], .customization-lock-badge[hidden] { display: none; }
.mode-panel-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mode-panel-row + .mode-panel-row { margin-top: 10px; }
.mode-panel-label { flex: 0 0 auto; color: var(--ink-dim); font-size: 11px; font-weight: 700; }
.compact-seg { display: inline-grid; grid-auto-flow: column; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-deep); }
.compact-seg button { min-height: 36px; padding: 0 12px; }
.sticker-palette, .excerpt-palette { display: flex; align-items: center; gap: 7px; }
.sticker-palette button[data-sticker-color], .excerpt-palette button[data-excerpt-color] {
  width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: var(--swatch); cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
}
.sticker-palette button[aria-pressed="true"], .excerpt-palette button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink); }
.sticker-palette[aria-hidden="true"] { display: none; }
.color-input-label {
  min-height: 36px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); font-size: 11px; font-weight: 650;
}
.color-input-label input[type="color"] { width: 38px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.preset-button, .upload-button, .clear-bg-button {
  min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
  padding: 0 13px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.preset-button { margin-top: 11px; }
.preset-button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mode-hint { min-height: 18px; margin-top: 8px; color: var(--ink-dim); font-size: 11px; line-height: 1.55; }
.excerpt-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.excerpt-meta-grid label { color: var(--ink-dim); font-size: 11px; font-weight: 650; }
/* 章节/原文/译者按模版显隐：原文一行占满两栏，另外两个各占一栏 */
.excerpt-meta-grid label[hidden] { display: none; }
.excerpt-meta-grid label.excerpt-meta-wide { grid-column: 1 / -1; }
.excerpt-meta-grid input {
  width: 100%; min-height: 42px; margin-top: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); padding: 0 11px; font: inherit; font-size: 13px; outline: none;
}
.excerpt-meta-grid input:focus { border-color: var(--fog-ice); box-shadow: 0 0 0 3px rgba(200,222,231,.35); }
.excerpt-bg-row { margin-top: 11px; }
.upload-button { display: inline-flex; align-items: center; }
.clear-bg-button[hidden] { display: none; }

.trial-section.font-disclosure { --mm-font-disclosure-body-padding: 16px 18px 18px; }
.font-lock-badge { display: inline-flex; margin-top: 4px; color: #9f3f38; font-size: 10px; font-style: normal; font-weight: 700; }
.font-lock-badge[hidden], .font-lock-callout[hidden] { display: none; }
.font-lock-callout {
  min-height: 38px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--fog-lilac);
  border-radius: 10px; background: var(--card-deep); color: var(--ink); font-size: 11.5px; font-weight: 700; text-decoration: none;
}
.font-disclosure.is-customization-locked #fontArea { opacity: .42; }

.restyle-section { margin: 30px 0 20px; }
.restyle-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 2px 14px; }
.restyle-heading h2, .trial-seo h2 { font-size: 20px; letter-spacing: .5px; }
.restyle-heading p { margin-top: 5px; color: var(--ink-dim); font-size: 12px; line-height: 1.6; }
.restyle-heading a, .trial-seo a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--fog-lilac); text-underline-offset: 3px; }
.dice {
  flex: 0 0 auto; min-height: 44px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--ink); color: #fff; padding: 0 18px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.dice:active { transform: scale(.98); }
.deco-card { padding: 16px; margin: 14px 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.restyle-label { color: var(--ink-dim); font-size: 11.5px; letter-spacing: .3px; }
.styles-label { margin: 18px 3px 10px; }
.slotbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 11px 0 12px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-deep); }
.seg button { min-height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-dim); padding: 0 13px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.seg button.on { background: var(--ink); color: #fff; }
.slotshow { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-dim); font-size: 12px; }
.slotshow b { min-width: 1.3em; color: var(--ink); font-size: 15px; text-align: center; }
.slotshow button { width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-dim); font: inherit; cursor: pointer; }
.symgrid { display: flex; flex-wrap: wrap; gap: 7px; }
.sym { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--card-deep); font-size: 16px; cursor: pointer; }
.sym:hover, .sym:focus-visible { border-color: var(--ink); background: var(--fog-ice); }
.style-row {
  display: flex; align-items: center; gap: 12px; min-height: 84px; padding: 13px 14px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .18s, box-shadow .18s;
}
.style-row.flash { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(201,190,220,.4); }
.style-main { flex: 1; min-width: 0; }
.style-meta { display: flex; align-items: center; gap: 7px; min-height: 19px; margin-bottom: 4px; }
.style-name { color: var(--ink-dim); font-size: 12px; font-weight: 700; }
.language-badge, .member-badge {
  border: 1px solid var(--fog-lilac); border-radius: 999px; color: var(--ink-dim); padding: 1px 7px; font-size: 10px; line-height: 1.5;
}
.member-badge { border-color: var(--fog-ice); color: var(--ink); }
.member-badge.open { color: #40764a; border-color: rgba(64,118,74,.35); }
.style-preview {
  min-height: 29px; color: var(--ink); font-size: 18px; line-height: 1.55; overflow-wrap: anywhere;
  font-family: "Noto Sans Math", "Noto Sans Symbols 2", "Noto Sans Egyptian", "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;
}
.style-preview.dim { color: var(--ink-dim); }
.style-preview.locked { color: var(--ink-dim); letter-spacing: .02em; }
.style-effect-note, .lock-hint { min-height: 17px; margin-top: 3px; color: var(--ink-dim); font-size: 10.5px; line-height: 1.5; }
.style-effect-note[hidden], .lock-hint[hidden] { display: none; }
.lock-hint { color: #9f3f38; }
.lock-hint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.copy-btn { flex: 0 0 auto; min-width: 66px; min-height: 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.copy-btn:hover { background: var(--fog-ice); }
.trial-seo { margin: 28px auto 4px; padding: 20px 2px; border-top: 1px solid var(--line); }
.trial-seo p { max-width: 820px; margin-top: 9px; color: var(--ink-dim); font-size: 13px; line-height: 2; }

.trial-action {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--fog-glass);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.action-inner { max-width: var(--trial-max); min-height: 54px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.clean-toggle { display: flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.clean-toggle[hidden] { display: none; }
.clean-toggle input { width: 18px; height: 18px; accent-color: var(--ink); }
.export-btn {
  flex: 1 1 60%; min-height: 48px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.export-btn:disabled { opacity: .45; cursor: not-allowed; }
.quota-line { min-width: 148px; color: var(--ink-dim); font-size: 11.5px; line-height: 1.45; text-align: right; }
.trial-gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(41,38,49,.35); }
.trial-gate[hidden] { display: none; }
.gate-card { width: min(100%, 420px); border-radius: 16px; background: #fff; border: 1px solid var(--line); padding: 22px; box-shadow: 0 18px 50px rgba(41,38,49,.18); }
.gate-card h2 { font-size: 21px; }
.gate-card p { margin-top: 10px; color: var(--ink-dim); font-size: 13px; line-height: 1.8; }
.gate-actions { display: flex; gap: 9px; margin-top: 17px; }
.gate-actions a, .gate-actions button { flex: 1; min-height: 44px; border-radius: 999px; display: grid; place-items: center; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gate-actions a { background: var(--ink); color: #fff; }
.gate-actions button { border: 1px solid var(--line); background: #fff; color: var(--ink-dim); }
.selftest-report { white-space: pre-wrap; margin-top: 16px; padding: 14px; border-radius: 12px; background: #1f2329; color: #e7ecf2; font: 12px/1.7 ui-monospace, monospace; }
.sfoot { margin: auto 0 0; padding: 28px 20px 96px; text-align: center; color: var(--ink-dim); font-size: 11px; letter-spacing: .5px; }

@media (max-width: 620px) {
  .sitehead { position: relative; }
  .topbar { padding-top: 10px; }
  .brandrow { padding-top: 2px; }
  .chanbar { justify-content: flex-start; }
  .trial-shell { padding-top: 9px; }
  .trial-intro { align-items: center; gap: 12px; margin-bottom: 3px; }
  .trial-intro h1 { font-size: 17px; }
  .trial-intro p { font-size: 10.5px; line-height: 1.45; text-align: right; }
  .trial-section { padding: 12px; margin-bottom: 4px; }
  .trial-heading { margin-bottom: 7px; }
  .trial-heading h2 { font-size: 16px; }
  .trial-input { height: 58px; min-height: 58px; padding-block: 8px; line-height: 1.5; resize: none; }
  .input-meta { margin-top: 4px; }
  .trial-preview-section { padding-inline: 0; border: 0; background: transparent; }
  .mode-heading { margin-bottom: 1px; }
  .trial-preview-section .trial-heading,
  .trial-preview-section .coverage-warning,
  .trial-preview-section .preview-error,
  .trial-preview-section .preview-note { margin-inline: 2px; }
  .trial-heading { align-items: center; }
  .preview-tools { gap: 6px; }
  .preview-tools > span { display: none; }
  .ratio-group { padding: 2px; }
  .ratio-btn { min-width: 46px; min-height: 34px; }
  .preview-wrap { width: 100%; }
  .content-library-links { margin-top: -1px; margin-bottom: 9px; }
  .content-library-links a { min-height: 34px; padding-inline: 10px; font-size: 10.5px; }
  .mode-panel { margin-inline: 2px; padding: 10px; }
  .template-card-strip { gap: 6px; }
  .template-card { min-height: 84px; grid-template-rows: 50px auto; padding: 5px; }
  .template-card-preview { min-height: 50px; font-size: 11px; }
  .excerpt-meta-grid { grid-template-columns: 1fr 1fr; }
  .trial-section.font-disclosure { --mm-font-disclosure-body-padding: 12px; }
  .restyle-section { margin-top: 24px; }
  .restyle-heading { align-items: center; }
  .restyle-heading h2 { font-size: 18px; }
  .restyle-heading p { max-width: 250px; }
  .dice { min-width: 76px; padding-inline: 12px; }
  .deco-card { padding: 13px; }
  .style-row { padding: 12px; }
  .style-preview { font-size: 16px; }
  .copy-btn { min-width: 58px; padding-inline: 8px; }
  .action-inner { gap: 9px; }
  .clean-toggle { flex: 0 0 62px; font-size: 11px; }
  .export-btn { font-size: 13px; }
  .quota-line { min-width: 82px; max-width: 92px; font-size: 10.5px; }
  .sfoot { padding-bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-skeleton { animation: none; }
}