:root {
  --paper: #F1EEE7;
  --ink: #171716;
  --burgundy: #8C3834;
  --muted: #77736C;
  --border: #CEC7BA;
  --panel: #E7E1D6;
  --accent-soft: rgba(140, 56, 52, 0.14);
  --accent-faint: rgba(140, 56, 52, 0.08);
  --font-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --font-naskh: "Noto Naskh Arabic", "Amiri", Georgia, serif;
  --font-handwritten: "Aref Ruqaa Ink", "Noto Naskh Arabic", Georgia, serif;
  --font-charcoal: "Reem Kufi Ink", "IBM Plex Sans Arabic", Tahoma, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

button, .file-button {
  min-height: 38px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  text-align: center;
}

button:hover, .file-button:hover, .slide-tab.active {
  background: var(--ink);
  color: var(--paper);
}

.primary-button {
  background: var(--ink);
  color: var(--paper);
}

.mobile-view-switcher {
  display: none;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 430px) 1fr;
  border-top: 1px solid var(--border);
}

.editor-panel {
  height: 100vh;
  overflow: auto;
  border-left: 1px solid var(--border);
  background: var(--panel);
  padding: 22px;
}

.app-header, .section-title, .preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-header h1, .preview-toolbar h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.icon-button {
  width: 42px;
  min-height: 42px;
  padding: 0;
  font-size: 20px;
}

.panel-section {
  padding: 20px 0;
  border-top: 1px solid var(--border);
}

.panel-section:first-of-type {
  margin-top: 22px;
}

.section-title h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}

label {
  display: grid;
  gap: 7px;
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 13px;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--paper);
  padding: 10px 12px;
  color: var(--ink);
  outline: none;
}

textarea {
  resize: vertical;
  line-height: 1.8;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--ink);
}

.button-row, .button-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.button-row.compact {
  grid-template-columns: repeat(3, auto);
}

.button-row.compact button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.button-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wide-button {
  width: 100%;
  margin-top: 8px;
}

.texture-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: -3px 0 14px;
}

.color-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.color-control-grid label {
  margin: 0;
}

.color-control-grid input[type="color"] {
  min-height: 38px;
  padding: 3px;
  cursor: pointer;
}

input[type="range"] {
  padding: 0;
  accent-color: var(--burgundy);
}

output {
  color: var(--ink);
  direction: ltr;
  font-size: 12px;
}

.texture-swatch {
  position: relative;
  min-height: 36px;
  padding: 0;
  border-color: var(--border);
  overflow: hidden;
}

.texture-swatch:hover,
.texture-swatch.active {
  background: transparent;
  border-color: var(--ink);
}

.texture-swatch.active::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--ink);
}

.file-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.slide-list {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.slide-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-color: var(--border);
  text-align: right;
}

.slide-tab span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.slide-template-chip {
  color: var(--muted);
  font-size: 11px;
}

.toggles {
  display: grid;
  gap: 8px;
}

.check-row {
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 0;
}

.check-row input {
  width: auto;
}

.hidden-field {
  display: none;
}

.font-live-preview {
  min-height: 46px;
  display: grid;
  place-items: center;
  margin: -2px 0 13px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  direction: ltr;
}

.role-style-editor {
  display: grid;
  gap: 10px;
  margin: 4px 0 16px;
}

.role-style-card {
  border: 1px solid var(--border);
  background: rgba(241, 238, 231, 0.45);
  padding: 12px;
}

.role-style-heading {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

.role-style-heading strong {
  color: var(--ink);
  font-size: 12px;
  direction: ltr;
}

.role-style-preview {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.role-control-grid label {
  margin: 0;
}

.role-control-grid input,
.role-control-grid select {
  min-width: 0;
  padding: 8px;
}

.role-style-preview.role-effect-circle {
  width: fit-content;
  max-width: 100%;
  padding-inline: 8px;
}

.role-style-preview.role-effect-margin {
  padding-right: 8px;
}

.slide-override-controls {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 10px;
}

.status {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.preview-panel {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(520px, 1fr) auto;
  padding: 28px;
}

.preview-stage {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 20px 0;
}

.preview-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: -4px 0 20px;
}

.preview-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.preview-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.preview-dot {
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: var(--border);
  font-size: 12px;
}

.preview-dot.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.preview-toolbar.small {
  margin-bottom: 12px;
}

.preview-toolbar.small h2 {
  font-size: 17px;
}

.template-preview-section {
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.template-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px;
}

.template-preview-card {
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 0;
  border-color: var(--border);
  padding: 9px;
  text-align: right;
}

.template-preview-card:hover,
.template-preview-card.active {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.template-mini-title {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-preview-card.active .template-mini-title {
  color: var(--burgundy);
  font-weight: 700;
}

.template-preview-card .carousel-slide {
  width: 100%;
  min-width: 0;
  border-color: var(--border);
  pointer-events: none;
}

.template-preview-card .slide-top {
  top: 10%;
  right: 11%;
  left: 11%;
  font-size: clamp(5px, 1.4vw, 9px);
}

.template-preview-card .slide-content {
  inset: 27% 13% 24%;
}

.template-preview-card .slide-content p {
  font-size: calc(var(--hero-size, 60px) * 0.15);
}

.template-preview-card .role-hook {
  font-size: calc(var(--hero-size, 60px) * var(--hook-scale, 1.15) * 0.15);
}

.template-preview-card .role-hint {
  font-size: calc(var(--hero-size, 60px) * var(--hint-scale, 0.85) * 0.15);
}

.template-preview-card .role-body {
  font-size: calc(var(--hero-size, 60px) * var(--body-scale, 1) * 0.15);
}

.template-preview-card .template-reading .slide-content {
  inset: 22% 14% 24%;
}

.template-preview-card .template-statement .slide-content {
  inset: 22% 11% 23%;
}

.template-preview-card .template-photo::before {
  inset: 18% 11% auto;
  height: 23%;
}

.template-preview-card .template-photo .slide-content {
  inset: 49% 13% 24%;
}

.template-preview-card .slide-footer {
  right: 11%;
  left: 11%;
  bottom: 9%;
  gap: 6px;
  font-size: clamp(5px, 1.2vw, 8px);
}

.template-preview-card .identity {
  gap: 4px;
}

.template-preview-card .identity img {
  width: 14px;
  height: 14px;
}

.template-preview-card .slide-code {
  font-size: clamp(5px, 1vw, 7px);
}

.carousel-slide {
  position: relative;
  width: min(72vh, 540px);
  aspect-ratio: 4 / 5;
  background-color: var(--paper);
  border: 1px solid var(--border);
  overflow: hidden;
  direction: rtl;
  color: var(--ink);
  --footer-font: var(--font-sans);
  --footer-size: 17px;
  --avatar-size: 38px;
  --accent-soft: rgba(140, 56, 52, 0.14);
  --accent-faint: rgba(140, 56, 52, 0.08);
}

.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--paper);
  pointer-events: none;
}

.slide-bg-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.slide-top,
.slide-content,
.slide-footer {
  z-index: 1;
}

.texture-paper .slide-bg,
.texture-swatch.texture-paper {
  background-image: none;
}

.texture-warm .slide-bg,
.texture-swatch.texture-warm {
  background-color: #EFE8DC;
  background-image:
    linear-gradient(90deg, rgba(140, 56, 52, 0.025), transparent 38%, rgba(23, 23, 22, 0.018));
}

.texture-grain .slide-bg,
.texture-swatch.texture-grain {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(23, 23, 22, 0.06) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 76% 44%, rgba(140, 56, 52, 0.045) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 38% 78%, rgba(23, 23, 22, 0.045) 0 0.5px, transparent 0.8px);
  background-size: 18px 18px, 23px 23px, 29px 29px;
}

.texture-fiber .slide-bg,
.texture-swatch.texture-fiber {
  background-image:
    linear-gradient(102deg, transparent 0 42%, rgba(23, 23, 22, 0.045) 42.4%, transparent 43% 100%),
    linear-gradient(78deg, transparent 0 58%, rgba(140, 56, 52, 0.035) 58.3%, transparent 59% 100%);
  background-size: 52px 52px, 68px 68px;
}

.texture-linen .slide-bg,
.texture-swatch.texture-linen {
  background-image:
    repeating-linear-gradient(0deg, rgba(23, 23, 22, 0.025) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, rgba(23, 23, 22, 0.018) 0 1px, transparent 1px 7px);
}

.texture-grid .slide-bg,
.texture-swatch.texture-grid {
  background-image:
    linear-gradient(rgba(206, 199, 186, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206, 199, 186, 0.4) 1px, transparent 1px);
  background-size: 54px 54px;
}

.texture-margin .slide-bg,
.texture-swatch.texture-margin {
  background-image:
    linear-gradient(90deg, transparent 0 calc(100% - 92px), rgba(140, 56, 52, 0.22) calc(100% - 91px), transparent calc(100% - 90px)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(206, 199, 186, 0.42) 47px, transparent 48px);
}

.texture-newsprint .slide-bg,
.texture-swatch.texture-newsprint {
  background-color: #EEEAE0;
  background-image:
    repeating-linear-gradient(0deg, rgba(23, 23, 22, 0.03) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 50%, rgba(23, 23, 22, 0.04) 0 0.7px, transparent 0.9px);
  background-size: auto, 9px 9px;
}

.texture-cream .slide-bg,
.texture-swatch.texture-cream {
  background-color: #F4EDDD;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.55), transparent 26%),
    radial-gradient(circle at 80% 70%, rgba(140, 56, 52, 0.035), transparent 28%);
}

.texture-aged .slide-bg,
.texture-swatch.texture-aged {
  background-color: #ECE3D1;
  background-image:
    linear-gradient(90deg, rgba(140, 56, 52, 0.055), transparent 18%, transparent 82%, rgba(23, 23, 22, 0.045)),
    radial-gradient(circle at 18% 12%, rgba(140, 56, 52, 0.06), transparent 22%),
    radial-gradient(circle at 76% 88%, rgba(23, 23, 22, 0.045), transparent 24%);
}

.texture-custom .slide-bg,
.texture-swatch.texture-custom {
  background-image: var(--custom-texture);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.texture-dark .slide-bg,
.texture-swatch.texture-dark {
  background-color: #171716;
  background-image: none;
}

.texture-darkGrid .slide-bg,
.texture-swatch.texture-darkGrid {
  background-color: #171716;
  background-image:
    linear-gradient(rgba(241, 238, 231, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 238, 231, 0.08) 1px, transparent 1px);
  background-size: 54px 54px;
}

.texture-darkGrain .slide-bg,
.texture-swatch.texture-darkGrain {
  background-color: #1D1C1A;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(241, 238, 231, 0.12) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 76% 44%, rgba(206, 199, 186, 0.08) 0 0.6px, transparent 0.8px),
    radial-gradient(circle at 38% 78%, rgba(241, 238, 231, 0.08) 0 0.5px, transparent 0.8px);
  background-size: 18px 18px, 23px 23px, 29px 29px;
}

.texture-burgundyDark .slide-bg,
.texture-swatch.texture-burgundyDark {
  background-color: #2B1716;
  background-image: linear-gradient(90deg, rgba(241, 238, 231, 0.04), transparent 45%, rgba(140, 56, 52, 0.18));
}

.slide-bg {
  filter: none;
  backdrop-filter: none;
  background-blend-mode: normal;
}

.theme-dark {
  color: var(--ink);
  border-color: var(--border);
}

.theme-dark .slide-content p,
.theme-dark .slide-content strong {
  color: var(--ink);
}

.theme-dark .slide-top,
.theme-dark .slide-number,
.theme-dark .slide-footer,
.theme-dark .slide-code {
  color: var(--muted);
}

.theme-dark .identity img {
  border-color: var(--border);
}

.theme-dark .role-effect-mark {
  background: var(--accent-soft);
}

.theme-dark .role-effect-circle {
  border-color: var(--burgundy);
}

.slide-top {
  position: absolute;
  top: 54px;
  right: 62px;
  left: 62px;
  display: flex;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.slide-number {
  position: absolute;
  top: 54px;
  left: 62px;
  z-index: 1;
  color: var(--muted);
  direction: ltr;
  unicode-bidi: plaintext;
  font-family: var(--footer-font);
  font-weight: var(--footer-weight, 400);
  font-size: calc(var(--footer-size) * 0.92);
  line-height: 1;
}

.slide-content {
  position: absolute;
  inset: 148px 78px 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-content p {
  width: 100%;
  margin: 0;
  font-family: var(--slide-font, var(--font-sans));
  font-size: var(--hero-size, 66px);
  font-weight: var(--slide-weight, 600);
  line-height: var(--slide-line-height, 1.18);
  letter-spacing: 0;
  text-wrap: balance;
  white-space: pre-wrap;
}

.slide-content strong {
  font-weight: 800;
}

.slide-content br + br {
  display: block;
  content: "";
  margin-top: var(--paragraph-gap, 0.78em);
}

.emphasis-mark {
  display: inline;
  position: relative;
  font-weight: 800;
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.content-role {
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--body-font, var(--slide-font, var(--font-sans)));
  font-size: calc(var(--hero-size, 66px) * var(--body-scale, 1));
  font-weight: var(--body-weight, var(--slide-weight, 600));
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.content-role + .content-role {
  margin-top: max(var(--paragraph-gap, 0.78em), 0.34em);
}

.content-spacer {
  display: block;
  width: 100%;
  height: max(var(--paragraph-gap, 0.78em), 0.34em);
  flex: 0 0 auto;
}

.role-hook + .content-role {
  margin-top: max(var(--paragraph-gap, 0.78em), 0.48em);
}

.role-hook + .content-spacer {
  height: max(var(--paragraph-gap, 0.78em), 0.48em);
}

.role-hint + .content-role {
  margin-top: max(var(--paragraph-gap, 0.78em), 0.4em);
}

.role-hint + .content-spacer {
  height: max(var(--paragraph-gap, 0.78em), 0.4em);
}

.role-hook {
  font-family: var(--hook-font, var(--slide-font, var(--font-sans)));
  font-size: calc(var(--hero-size, 66px) * var(--hook-scale, 1.15));
  font-weight: var(--hook-weight, 800);
}

.role-hint {
  font-family: var(--hint-font, var(--slide-font, var(--font-naskh)));
  font-size: calc(var(--hero-size, 66px) * var(--hint-scale, 0.85));
  font-weight: var(--hint-weight, 600);
}

.role-effect-underline {
  text-decoration-line: underline;
  text-decoration-color: var(--burgundy);
  text-decoration-thickness: 0.065em;
  text-underline-offset: 0.18em;
}

.role-effect-circle {
  width: fit-content;
  border: 0.055em solid var(--burgundy);
  border-radius: 999px;
  padding: 0.05em 0.22em 0.12em;
}

.role-effect-mark {
  width: fit-content;
  padding: 0.02em 0.12em 0.08em;
  background: var(--accent-soft);
}

.role-effect-margin {
  border-right: 0.08em solid var(--burgundy);
  padding-right: 0.32em;
}

.role-effect-doubleUnderline {
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: var(--burgundy);
  text-decoration-thickness: 0.055em;
  text-underline-offset: 0.2em;
}

.role-effect-bracket {
  width: fit-content;
  border-inline: 0.06em solid var(--burgundy);
  padding: 0.01em 0.28em 0.08em;
}

.role-effect-handwritten {
  font-family: var(--font-handwritten) !important;
  font-weight: 700;
  line-height: 1.35;
  transform: rotate(-0.25deg);
  transform-origin: center;
}

.role-effect-charcoal {
  font-family: var(--font-charcoal) !important;
  font-weight: 700;
  opacity: 0.94;
  text-decoration: underline dotted var(--accent-faint) 0.045em;
  text-underline-offset: 0.22em;
}

.role-effect-manuscript {
  width: fit-content;
  font-family: var(--font-naskh) !important;
  font-weight: 600;
  color: var(--burgundy);
  border-bottom: 0.035em solid var(--accent-soft);
  padding-bottom: 0.08em;
}

.emphasis-underline .emphasis-mark {
  text-decoration: underline var(--burgundy) 0.07em;
  text-underline-offset: 0.18em;
}

.emphasis-circle .emphasis-mark {
  border: 0.055em solid var(--burgundy);
  border-radius: 999px;
  padding: 0.02em 0.18em 0.08em;
}

.emphasis-mark .emphasis-mark,
.emphasis-none .emphasis-mark {
  font: inherit;
}

.emphasis-mark .emphasis-mark {
  padding: 0.01em 0.12em 0.06em;
  background: var(--accent-soft);
}

.emphasis-margin .emphasis-mark {
  border-inline-start: 0.075em solid var(--burgundy);
  padding-inline-start: 0.22em;
}

.emphasis-doubleUnderline .emphasis-mark {
  text-decoration: underline double var(--burgundy) 0.055em;
  text-underline-offset: 0.2em;
}

.emphasis-bracket .emphasis-mark {
  border-inline: 0.055em solid var(--burgundy);
  padding: 0.01em 0.2em 0.06em;
}

.emphasis-handwritten .emphasis-mark {
  font-family: var(--font-handwritten);
  font-weight: 700;
}

.emphasis-charcoal .emphasis-mark {
  font-family: var(--font-charcoal);
  font-weight: 700;
  opacity: 0.94;
}

.emphasis-manuscript .emphasis-mark {
  font-family: var(--font-naskh);
  color: var(--burgundy);
  border-bottom: 0.04em solid var(--accent-soft);
}

.slide-content u {
  text-decoration-color: var(--burgundy);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.slide-footer {
  position: absolute;
  right: 62px;
  left: 62px;
  bottom: 54px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: var(--muted);
  direction: ltr;
  font-family: var(--footer-font);
  font-weight: var(--footer-weight, 400);
  font-size: var(--footer-size);
  line-height: 1;
}

.slide-footer .identity {
  order: 2;
}

.slide-footer .slide-code {
  order: 1;
}

.identity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: plaintext;
}

.identity img {
  flex: 0 0 auto;
  width: var(--avatar-size);
  height: var(--avatar-size);
  min-width: var(--avatar-size);
  min-height: var(--avatar-size);
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--panel);
}

.identity span {
  direction: ltr;
  unicode-bidi: plaintext;
}

.slide-code {
  direction: ltr;
  unicode-bidi: plaintext;
  white-space: nowrap;
  font-size: calc(var(--footer-size) * 0.88);
  letter-spacing: 0;
}

.export-mount {
  position: fixed;
  left: -99999px;
  top: 0;
  width: 540px;
  height: 675px;
  overflow: hidden;
  pointer-events: none;
}

.export-mount .carousel-slide {
  width: 540px;
  height: 675px;
}

.highlight .slide-content p {
  color: var(--burgundy);
}

.underline .slide-content p {
  text-decoration-line: underline;
  text-decoration-color: var(--burgundy);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

.template-reading .slide-content {
  inset: 138px 94px 128px;
  align-items: center;
}

.template-reading .slide-content p {
  font-family: var(--slide-font, var(--font-naskh));
  font-weight: 500;
  line-height: var(--slide-line-height, 1.58);
}

.template-statement .slide-content {
  inset: 128px 64px 158px;
}

.template-statement .slide-content p {
  font-size: var(--hero-size, 84px);
  line-height: 1.18;
  font-weight: 700;
}

.template-contrast .slide-content p {
  border-right: 4px solid var(--burgundy);
  padding-right: 28px;
}

.template-list .slide-content {
  inset: 138px 78px 128px;
  align-items: center;
}

.template-list .slide-content p {
  line-height: var(--slide-line-height, 1.5);
}

.template-question .slide-content p {
  font-family: var(--slide-font, var(--font-naskh));
  font-size: var(--hero-size, 76px);
  line-height: var(--slide-line-height, 1.24);
}

.template-photo::before {
  content: "";
  position: absolute;
  inset: 108px 62px auto;
  height: 310px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, transparent 49.8%, var(--border) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, var(--border) 50%, transparent 50.2%),
    var(--panel);
}

.template-photo .slide-content {
  inset: 454px 78px 128px;
  align-items: center;
}

.template-photo .slide-content p {
  font-family: var(--slide-font, var(--font-naskh));
  line-height: var(--slide-line-height, 1.48);
}

.template-ending .slide-content {
  inset: 148px 78px 132px;
}

.template-ending .slide-content p {
  font-family: var(--slide-font, var(--font-naskh));
  color: var(--burgundy);
  text-align: center;
}

@media (max-width: 980px) {
  body {
    min-width: 0;
  }

  .mobile-view-switcher {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
  }

  .mobile-view-switcher button {
    min-height: 44px;
    border-color: var(--border);
  }

  .mobile-view-switcher button.active {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  .mobile-view-switcher span {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    margin-inline-start: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .editor-panel {
    height: auto;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding: 16px;
  }

  .preview-panel {
    min-height: auto;
    grid-template-rows: auto auto auto;
    padding: 16px;
  }

  body:not(.mobile-preview) .preview-panel {
    display: none;
  }

  body.mobile-preview .editor-panel {
    display: none;
  }

  input,
  textarea,
  select {
    min-height: 44px;
    font-size: 16px;
  }

  button,
  .file-button {
    min-height: 44px;
  }

  .full-article-import {
    margin-top: 16px;
    padding: 18px 14px;
    border: 1px solid var(--border);
    background: var(--paper);
  }

  .full-article-import textarea {
    min-height: 230px;
  }

  .mobile-primary-actions {
    grid-template-columns: minmax(0, 1.65fr) minmax(84px, 0.35fr);
  }

  .preview-stage {
    overflow: hidden;
    padding: 10px 0 14px;
  }

  .preview-stage > .carousel-slide {
    width: 540px;
    min-width: 540px;
    zoom: var(--mobile-preview-scale, 0.65);
  }

  .texture-swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-preview-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

@media (max-width: 520px) {
  .app-header h1,
  .preview-toolbar h2 {
    font-size: 18px;
  }

  .role-style-heading {
    grid-template-columns: 1fr;
  }

  .role-control-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-nav {
    gap: 8px;
  }

  .preview-dot {
    width: 30px;
    min-height: 30px;
  }
}

@media print {
  body * { visibility: hidden; }
  #slideCanvas, #slideCanvas * { visibility: visible; }
  #slideCanvas {
    position: fixed;
    inset: 0;
    width: 1080px;
    height: 1350px;
    border: 0;
  }
}