:root {
  --bg:      #0F0E0C;
  --bg2:     #13110F;
  --surface: #1C1A17;
  --border:  #2C2920;
  --text:    #EDE9E3;
  --muted:   #8A8480;
  --accent:  #6B9FE4;
  --good: #4ADE80; --good-bg: #052E16;
  --warn: #FCD34D; --warn-bg: #451A03;
  --bad:  #FCA5A5; --bad-bg:  #450A0A;
  --cover-glow:   #141D32;
  --divider-glow: #0D1825;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Sans 3', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text); }

/* ══════════════════════════════════════════════
   LANDING MODE — light, commercial look for the
   gallery and "new presentation" editor. Presentation
   decks themselves keep the dark theme above (or
   whatever theme.css assigns them).
══════════════════════════════════════════════ */
:root.landing {
  --bg:      #F6F7FB;
  --bg2:     #FFFFFF;
  --surface: #FFFFFF;
  --border:  #E6E8F0;
  --text:    #151726;
  --muted:   #6B7086;
  --accent:  #5B5FEF;
  --font-body: 'Inter', 'Source Sans 3', system-ui, sans-serif;
}
html.landing, html.landing body { overflow-y: auto; overflow-x: hidden; }
html.landing .top-bar, html.landing .progress-bar, html.landing #stage { display: none; }

/* ── Loading / gallery screen ── */
#loading {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); z-index: 9999;
  font-size: 13px; color: var(--muted); letter-spacing: .06em;
  transition: opacity .3s;
}
#loading.done { opacity: 0; pointer-events: none; }

/* ── Stage ── */
#stage {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  transition: transform .48s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* ── Gallery ── */
#gallery {
  position: relative; min-height: 100vh;
  background: var(--bg); z-index: 9998;
}
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px clamp(20px, 5vw, 64px);
  background: rgba(246,247,251,.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.app-logo {
  font-family: var(--font-body); font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; color: var(--text);
}
.app-logo span { color: var(--accent); }
.app-header-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(20,20,50,.06), 0 8px 20px -8px rgba(91,95,239,.55);
}
.btn-primary:hover { box-shadow: 0 1px 2px rgba(20,20,50,.08), 0 12px 26px -8px rgba(91,95,239,.65); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.hero {
  padding: 56px clamp(20px, 5vw, 64px) 40px;
  max-width: 900px;
}
.hero-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.hero-title {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(28px, 4vw, 44px); line-height: 1.12; color: var(--text);
  margin-bottom: 14px; text-wrap: balance;
}
.hero-sub { font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); max-width: 620px; }

.gallery-section { padding: 8px clamp(20px, 5vw, 64px) 80px; }
.gallery-eye {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px;
}
.gallery-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 60px); font-weight: 300; line-height: 1.1;
  margin-bottom: 52px; text-wrap: balance;
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px; max-width: 1100px;
}
.gallery-card {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px; min-height: 150px;
  box-shadow: 0 1px 2px rgba(20,20,50,.04);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.gallery-card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 14px 28px -14px rgba(20,20,50,.18);
}
.gallery-card-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.gallery-card-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 18px; line-height: 1.3; margin-bottom: 6px;
}
.gallery-card-sub { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.gallery-card-foot {
  margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.gallery-card-arrow { font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 5px; }
.gallery-card-badge {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: rgba(91,95,239,.08); padding: 3px 9px; border-radius: 100px;
}
.gallery-card-del {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 15px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, border-color .15s, color .15s;
}
.gallery-card:hover .gallery-card-del { opacity: 1; }
.gallery-card-del:hover { border-color: var(--bad); color: var(--bad); }

.gallery-empty {
  max-width: 420px; padding: 40px 0; color: var(--muted);
}
.gallery-empty-title { font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 8px; }
.gallery-empty p { font-size: 14px; line-height: 1.6; }

@media (max-width: 680px) {
  .app-header { padding: 16px 20px; }
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   EDITOR — "new presentation" builder
══════════════════════════════════════════════ */
.ed-wrap { max-width: 760px; margin: 0 auto; padding: 48px clamp(20px, 5vw, 0) 100px; }
.ed-back { font-size: 13px; color: var(--muted); text-decoration: none; }
.ed-back:hover { color: var(--accent); }
.ed-title { font-family: var(--font-body); font-weight: 800; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 14px 0 8px; }
.ed-lead { color: var(--muted); font-size: 14px; margin-bottom: 32px; }

.ed-card, .ed-slide {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 24px; margin-bottom: 16px;
}
.ed-slide { background: var(--bg); }
.ed-scaffold { border: 1px dashed var(--accent); background: rgba(91,95,239,.05); }
.ed-scaffold-hint { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.ed-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ed-card-num { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ed-remove { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; }
.ed-remove:hover { color: var(--bad); }

.ed-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.ed-row label, .ed-card > label, .ed-slide > label { flex: 1 1 200px; }
.ed-card label, .ed-slide label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 14px;
}
.ed-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.ed-card input[type="text"], .ed-card input[type="color"], .ed-card select,
.ed-slide input[type="text"], .ed-slide textarea {
  font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px; width: 100%;
}
.ed-card input[type="color"] { padding: 4px; height: 38px; cursor: pointer; }
.ed-card textarea, .ed-slide textarea { font-family: var(--font-body); resize: vertical; }

.ed-actions { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.ed-error { color: var(--bad); font-size: 13px; }

/* ── Each slide ── */
.page {
  position: absolute;
  width: 100vw; height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.page-detail { overflow-y: auto; }

/* ── Top bar ── */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 44px; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(15,14,12,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.top-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.top-section { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; color: var(--text); white-space: nowrap; }
.top-pos { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.top-right { display: flex; align-items: center; gap: 16px; }
.theme-switcher {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; font-size: 11px; padding: 3px 22px 3px 8px; font-family: var(--font-body);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238A8480' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 7px center;
}
.theme-switcher:hover { color: var(--text); border-color: var(--accent); }
.theme-switcher option { background: var(--surface); color: var(--text); }
@media (max-width: 680px) { .theme-switcher { display: none; } }

/* ── Progress bar ── */
.progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 600; background: var(--border); }
.progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width .4s ease; }

/* ── Nav hint ── */
.nav-hint {
  position: absolute; bottom: 24px; right: 36px;
  font-size: 11px; color: var(--border);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none; user-select: none;
}
.nav-hint.visible { color: var(--muted); }
.nav-hint span { display: flex; align-items: center; gap: 5px; }

/* ── Cover ── */
.page-cover {
  background: radial-gradient(ellipse at 25% 55%, var(--cover-glow) 0%, var(--bg) 62%);
  justify-content: center; padding: 80px 10vw 60px;
}
.cover-eye { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 28px; }
.cover-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.5vw, 90px); font-weight: 300; line-height: 1.07;
  letter-spacing: -.02em; margin-bottom: 18px; text-wrap: balance;
}
.cover-title em { font-style: italic; color: var(--muted); }
.cover-sub { font-size: clamp(16px, 1.8vw, 22px); color: var(--muted); font-weight: 300; margin-bottom: 52px; }
.cover-toc { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.cover-toc-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; background: transparent; color: var(--text);
  font-family: inherit; font-size: 14px; text-align: left; text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
}
.cover-toc-item:hover { border-color: var(--accent); background: rgba(107,159,228,.07); color: var(--accent); }
.cover-toc-num { font-size: 11px; color: var(--accent); font-weight: 700; min-width: 26px; }
.cover-arrow {
  position: absolute; bottom: 28px; right: 40px;
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* ── Section divider ── */
.page-divider {
  background: linear-gradient(140deg, var(--divider-glow) 0%, var(--bg) 58%);
  justify-content: center; padding: 80px 10vw;
}
.divider-num { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.divider-rule { width: 44px; height: 2px; background: var(--accent); margin-bottom: 28px; }
.divider-title { font-family: var(--font-display); font-size: clamp(38px, 5.5vw, 76px); font-weight: 300; line-height: 1.1; margin-bottom: 16px; }
.divider-sub { font-size: clamp(15px, 1.7vw, 21px); color: var(--muted); font-weight: 300; max-width: 580px; }

/* ── Content (bullets) slide — two-column ── */
.page-bullets { background: var(--bg); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.slide-left { display: flex; flex-direction: column; justify-content: center; padding: 72px 4vw 52px 10vw; }
.slide-right { display: flex; align-items: center; justify-content: center; padding: 72px 8vw 52px 3vw; }
.img-placeholder {
  width: 100%; aspect-ratio: 4/3; max-height: 68vh;
  background: var(--surface); border: 2px dashed var(--border); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .55;
}
.slide-meta { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.slide-title { font-family: var(--font-display); font-size: clamp(30px, 4.2vw, 58px); font-weight: 300; line-height: 1.12; text-wrap: balance; margin-bottom: 36px; }
.slide-bullets { list-style: none; display: flex; flex-direction: column; gap: 20px; }
.slide-bullets li { display: flex; gap: 14px; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.4; }
.slide-bullets li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: .52em; }
.slide-bullets li strong { font-weight: 600; }
.slide-bullets li em { color: var(--muted); font-style: italic; }
.slide-bullets.big li { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 40px); font-weight: 300; }
.slide-bullets.big li::before { display: none; }
.slide-img { width: 100%; max-height: 68vh; object-fit: cover; border-radius: 16px; }

/* ── Detail slide ── */
.page-detail { background: var(--bg2); padding: 64px 10vw 80px; }
.detail-back { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; opacity: .7; }
.detail-title { font-family: var(--font-display); font-size: clamp(18px, 2.3vw, 30px); font-weight: 300; line-height: 1.3; margin-bottom: 28px; color: var(--muted); max-width: 700px; }

/* ── Prose ── */
.prose { max-width: 680px; font-size: 16px; line-height: 1.8; color: var(--text); }
.prose p { margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; margin: 26px 0 8px; color: var(--text); }
.prose strong { font-weight: 600; }
.prose em { color: var(--muted); font-style: italic; }
.prose ul { padding-left: 18px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.prose ul li { font-size: 15px; line-height: 1.6; }
.prose a { color: var(--accent); text-decoration: none; }
.prose a:hover { text-decoration: underline; }

/* ── Table ── */
.tbl-wrap { overflow-x: auto; margin: 20px 0; max-width: 800px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.bg { background: var(--good-bg); color: var(--good); }
.bw { background: var(--warn-bg); color: var(--warn); }
.bb { background: var(--bad-bg);  color: var(--bad); }

/* ── Tool grid ── */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; max-width: 880px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; text-decoration: none; color: var(--text); transition: border-color .18s, transform .18s; display: flex; flex-direction: column; gap: 9px; }
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.tool-name { font-weight: 600; font-size: 14px; }
.tool-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tool-tag { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; background: rgba(107,159,228,.12); color: var(--accent); margin-top: auto; width: fit-content; }
.tool-caution { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; background: var(--warn-bg); color: var(--warn); margin-top: auto; width: fit-content; }

/* ── Research list ── */
.research-list { display: flex; flex-direction: column; gap: 9px; max-width: 800px; }
.research-item { display: flex; gap: 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .15s; }
.research-item:hover { border-color: var(--accent); }
.research-year { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; padding-top: 2px; min-width: 36px; }
.research-body { flex: 1; }
.research-title { font-weight: 500; font-size: 14px; line-height: 1.4; margin-bottom: 2px; }
.research-icon { font-size: 11px; opacity: .6; margin-left: 4px; }
.research-authors { font-size: 12px; color: var(--muted); }
.research-finding { font-size: 12px; color: var(--muted); margin-top: 4px; font-style: italic; }

/* ── Callout ── */
.callout { padding: 14px 18px; border-radius: 10px; border: 1px solid; margin: 16px 0; font-size: 14px; line-height: 1.6; max-width: 680px; }
.callout-warn { background: rgba(69,26,3,.4); border-color: rgba(252,211,77,.2); color: var(--warn); }
.callout-info { background: rgba(22,32,53,.5); border-color: rgba(107,159,228,.2); color: var(--accent); }

/* ── Mobile ── */
@media (max-width: 680px) {
  .top-bar { padding: 0 18px; }
  .top-section { display: none; }
  .page-cover, .page-divider, .page-detail { padding: 70px 22px 44px; }
  .page-bullets { grid-template-columns: 1fr; }
  .slide-right { display: none; }
  .slide-left { padding: 70px 22px 44px; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
}