/* Kartograf interior surfaces. The editorial site uses navy, paper, contour,
   and a single luminous focal plane; workspaces keep the map unobstructed. */

body.docs-page,
body.workspace-page,
body.gallery-page {
  --navy: #14234f;
  --navy-deep: #0e1d42;
  --navy-light: #20335e;
  --cream: #fff8f1;
  --cream-dim: rgba(245, 246, 255, .74);
  --cream-faint: rgba(245, 246, 255, .19);
  --accent: #b8deec;
  font-family: "DM Sans", system-ui, sans-serif;
}
body.docs-page::before,
body.workspace-page::before,
body.gallery-page::before { content: none; }
body.docs-page :focus-visible,
body.workspace-page :focus-visible,
body.gallery-page :focus-visible { outline: 2px solid #f5aa97; outline-offset: 3px; }
.docs-page .display,
.workspace-page .display { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: -.02em; }
.docs-page .label,
.workspace-page .label,
.docs-page .mono,
.workspace-page .mono,
.docs-page .sidebar-label,
.workspace-page .sidebar-label { font-family: "DM Mono", monospace; }

/* Quiet, precise navigation shared by the field manual and tools. */
.docs-page .sidebar,
.workspace-page .sidebar {
  background: #0e1d42;
  border-right: 1px solid rgba(255,255,255,.22);
}
.docs-page .sidebar-logo,
.workspace-page .sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 19px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: #fff8f1;
  font: 700 1.03rem "DM Sans", sans-serif;
  letter-spacing: -.03em;
  text-decoration: none;
}
.docs-page .sidebar-logo::before,
.workspace-page .sidebar-logo::before {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid #e7edf9;
  border-radius: 50%;
  background: linear-gradient(135deg, transparent 47%, #e7edf9 48% 51%, transparent 52%);
}
.docs-page .sidebar-label,
.workspace-page .sidebar-label { color: #9caecb; letter-spacing: .12em; }
.sidebar-tools { display: flex; flex-wrap: wrap; gap: 13px; margin: -4px 0 23px; }
.sidebar-tools a {
  color: #d8e2f0;
  font: 400 .68rem "DM Mono", monospace;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.38);
  padding: 0 0 4px;
}
.sidebar-tools a:hover { color: #fff; border-color: #fff; }

/* Documentation reads like a field manual, not another dashboard. */
.docs-page { background: #f6f0e9; }
.docs-page .main {
  --cream: #17233d;
  --cream-dim: #4d5c72;
  --cream-faint: rgba(23,35,61,.18);
  --accent: #3d628d;
  --navy-deep: #ede9e5;
  min-width: 0;
  max-width: none;
  padding: clamp(36px, 5vw, 84px) clamp(35px, 6vw, 108px) 130px;
  background: #f6f0e9;
  color: #17233d;
}
.docs-page .main > * { max-width: 1010px; }
.docs-page .doc-hero {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  margin-bottom: 73px;
  padding: 18px 0 80px;
  border-bottom: 1px solid #abb9c4;
  background: radial-gradient(ellipse 43% 50% at 90% 105%, rgba(185,206,236,.47), transparent 90%);
}
.docs-page .doc-hero .label { display: block; color: #4b6381; font-size: .7rem; }
.docs-page .doc-hero h1 {
  position: relative;
  z-index: 1;
  max-width: 670px;
  margin-top: 24px;
  font-size: clamp(3.8rem, 6vw, 7.3rem);
  line-height: .91;
}
.docs-page .doc-hero p { position: relative; z-index: 1; color: #4c5b70 !important; font-size: .98rem; line-height: 1.68; }
.doc-hero-lines {
  position: absolute;
  right: -13%;
  bottom: -16px;
  width: 75%;
  height: 220px;
  opacity: .72;
  pointer-events: none;
}
.doc-hero-lines path { fill: none; stroke: #fff; stroke-width: 1.2; }
.docs-page .doc-section { margin-bottom: 55px; padding-bottom: 35px; border-bottom: 1px solid #cbd0d2; }
.docs-page .doc-section-header { gap: 16px; }
.docs-page .doc-section-header .section-number { color: #557293; opacity: 1; font: 400 .72rem "DM Mono", monospace; }
.docs-page .doc-section-header h2 { font-size: clamp(2.4rem, 3.8vw, 4rem); line-height: 1; }
.docs-page .doc-section p,
.docs-page .doc-section li { color: #4b586c; font-size: .93rem; line-height: 1.72; }
.docs-page .doc-section strong { color: #142b49; }
.docs-page .doc-section a { color: #355c8c; }
.docs-page .doc-section :not(pre) > code { color: #25486f; background: rgba(88,139,182,.1); padding: 2px 5px; border-radius: 2px; }
.docs-page .code-window {
  --cream: #fff8f1;
  --cream-dim: #d4e0ee;
  --cream-faint: rgba(255,255,255,.19);
  --accent: #c7dfea;
  background: #15264e;
  border: 1px solid #213762;
  border-radius: 3px;
  box-shadow: none;
}
.docs-page .code-window code { color: #e0eaf5; font-family: "DM Mono", monospace; }
.docs-page .code-window .token-comment { color: #a0b2cd; }
.docs-page .prop-table th { color: #345f8d; }
.docs-page .prop-table td { color: #4b586c; }
.docs-page .prop-table td:first-child { color: #1b416c; font-family: "DM Mono", monospace; }
.docs-page .prop-table tr:hover td { color: #152b48; }
.docs-page .prop-table .default { color: #69798a; }
.docs-page .prop-table .type { color: #39718b; }
.docs-page .note { color: #344e68; background: #e5ebec; }
.docs-page .note strong { color: #172c4a; }
.docs-page .tag-custom { color: #2f6880; }
.docs-page .tag-new { color: #59703e; }
.docs-page .sidebar nav a:hover { color: #fff; }
.docs-page .sidebar nav a.active { color: #d4eafa; border-left-color: #b8deec; }

/* A cartographic workspace: controls frame the map, never compete with it. */
.workspace-page { --sidebar: 258px; background: #14234f; }
.workspace-page .main { background: #14234f; }
.workspace-page .topbar {
  min-height: 79px;
  padding: 12px 25px;
  background: #14234f;
  border-bottom: 1px solid rgba(255,255,255,.23);
}
.workspace-page .tool-heading { display: flex; flex-direction: column; gap: 2px; }
.workspace-page .tool-kicker { color: #9fb5d4; font: 400 .61rem "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.workspace-page .topbar h2 { font-size: 2.05rem; line-height: 1; }
.workspace-page .topbar-right { flex-wrap: wrap; justify-content: flex-end; }
.workspace-page .workspace-link { color: #d2e1f2; font: 400 .67rem "DM Mono", monospace; text-decoration: none; white-space: nowrap; }
.workspace-page .workspace-link:hover { color: #fff; text-decoration: underline; }
.workspace-page .sidebar .drag-item,
.workspace-page .sidebar a.geo-link { min-height: 32px; border-radius: 2px; }
.workspace-page .sidebar .drag-item:hover,
.workspace-page .sidebar a.geo-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.workspace-page .sidebar a.geo-link.active { color: #fff; background: rgba(184,222,236,.12); border-left-color: #b8deec; }
.workspace-page .tag-dot.standard { background: #e0e8f2; }
.workspace-page .tag-dot.custom { background: #a9d8e6; }
.workspace-page .tag-dot.new { background: #e2bad6; }
.workspace-page .btn,
.workspace-page .btn-replay { border-radius: 2px; font-family: "DM Sans", sans-serif; font-weight: 600; }
.workspace-page .btn-primary { color: #17233d; background: #f6f0e9; border-color: #f6f0e9; }
.workspace-page .btn-primary:hover { background: #fff; border-color: #fff; }
.workspace-page .canvas-header { padding: 12px 24px; color: #c4d2e8; font: 400 .65rem "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.workspace-page .canvas-wrapper { background: #152650; }
.workspace-page #drop-canvas { padding: 22px 24px; }
.workspace-page .empty-state { min-height: 130px; border: 1px dashed rgba(255,255,255,.27); color: #c6d3e7; background: rgba(255,255,255,.025); font: 400 .71rem "DM Mono", monospace; letter-spacing: .07em; }
.workspace-page .card { background: #1c315b; border-color: rgba(255,255,255,.23); border-radius: 2px; }
.workspace-page .card-header .card-title { color: #fff8f1; }
.workspace-page .field-row input,
.workspace-page .field-row select,
.workspace-page .field-row textarea { background: #0e1d42; border-color: rgba(255,255,255,.3); color: #fff8f1; }
.workspace-page .map-container { border-color: rgba(255,255,255,.3); }
.workspace-page .loading-overlay { background: #14234f; }
.workspace-page .geo-badge { color: #d8eefa; }
.workspace-page .info-panel,
.workspace-page .code-panel,
.workspace-page .code-toggle { background: #0e1d42; }
.workspace-page .token-comment { color: #9fb1cb; }
.workspace-page .code-toggle:hover { color: #fff; }

@media (min-width: 1100px) {
  .playground-page .main {
    display: grid;
    grid-template-columns: minmax(370px, 41%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
  }
  .playground-page .topbar { grid-column: 1 / -1; }
  .playground-page .canvas-wrapper { grid-column: 1; grid-row: 2; border-right: 1px solid rgba(255,255,255,.23); min-height: 0; }
  .playground-page .map-container { grid-column: 2; grid-row: 2; min-height: 0; height: auto; border-top: 0; }
}

/* Story gallery: one horizon and two luminous film posters. */
.gallery-page { margin: 0; color: #17233d; background: #f6f0e9; font-family: "DM Sans", system-ui, sans-serif; }
.gallery-page * { box-sizing: border-box; }
.gallery-page a { color: inherit; }
.gallery-wrap { width: min(100% - 9vw, 1420px); margin-inline: auto; }
.gallery-eyebrow { font: 400 .67rem/1.5 "DM Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.gallery-sky { position: relative; min-height: 590px; overflow: hidden; color: #fff8f1; background: linear-gradient(#14234f 14%, #20396d 74%, #8296c1); }
.gallery-nav { position: relative; z-index: 4; height: 89px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.24); }
.gallery-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff8f1 !important; font-size: 1.07rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.gallery-brand-mark { display: flex; gap: 2px; }
.gallery-brand-mark i { width: 7px; height: 22px; transform: skewY(-26deg); background: #f1b9ab; }
.gallery-brand-mark i:nth-child(2) { transform: skewY(26deg); background: #f5ded4; }
.gallery-nav nav { display: flex; align-items: center; gap: clamp(17px, 2vw, 34px); }
.gallery-nav nav a { color: #e3e9f4; text-decoration: none; font-size: .77rem; font-weight: 500; }
.gallery-nav nav a:hover { color: #fff; }
.gallery-nav .gallery-nav-action { padding: 10px 13px; border: 1px solid rgba(255,255,255,.5); border-radius: 2px; }
.gallery-nav .gallery-nav-action:hover { color: #14234f; background: #fff8f1; }
.gallery-hero { position: relative; z-index: 2; padding-top: 117px; }
.gallery-hero .gallery-eyebrow { color: #cbdcf2; }
.gallery-hero h1 { max-width: 840px; margin: 24px 0 13px; font: 400 clamp(5.5rem, 9vw, 10rem)/.88 "Instrument Serif", Georgia, serif; letter-spacing: -.035em; }
.gallery-hero h1 em { color: #dce8f3; }
.gallery-hero p { max-width: 460px; color: #d7e1f0; line-height: 1.6; font-size: 1rem; }
.gallery-coordinate { position: absolute; top: 160px; right: 0; padding-left: 17px; border-left: 1px solid #f6f5f2; color: #e7eaf4; font: 400 .66rem/1.6 "DM Mono", monospace; letter-spacing: .09em; }
.gallery-ground { position: relative; isolation: isolate; padding-bottom: 120px; background: linear-gradient(#e8e7ea, #f6f0e9 280px); }
.gallery-ground::before { content: ""; position: absolute; z-index: -1; top: 145px; left: 7%; width: 86%; height: 610px; filter: blur(50px); border-radius: 50%; background: radial-gradient(ellipse 35% 48% at 25% 75%, rgba(168,194,249,.55), transparent 95%), radial-gradient(ellipse 40% 48% at 65% 47%, rgba(241,171,185,.6), transparent 95%), radial-gradient(ellipse 38% 40% at 85% 82%, rgba(152,217,230,.56), transparent 95%); pointer-events: none; }
.gallery-contours { position: absolute; z-index: -1; top: -132px; left: -6%; width: 112%; height: 340px; pointer-events: none; }
.gallery-contours path { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.1; }
.gallery-content { position: relative; padding-top: 80px; }
.gallery-intro { display: flex; align-items: start; justify-content: space-between; gap: 40px; margin-bottom: 30px; }
.gallery-intro .gallery-eyebrow { color: #4e6380; }
.gallery-intro p { max-width: 440px; margin: 0; color: #4e5d73; font-size: .9rem; line-height: 1.6; }
.film-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.film { position: relative; display: flex; flex-direction: column; min-height: 560px; overflow: hidden; border: 1px solid rgba(255,255,255,.82); border-radius: 14px; text-decoration: none; box-shadow: 0 22px 55px rgba(29,47,88,.14); backdrop-filter: blur(25px); transition: transform .25s, box-shadow .25s; }
.film:hover { transform: translateY(-6px); box-shadow: 0 29px 62px rgba(29,47,88,.2); }
.film::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.39); border-radius: 9px; pointer-events: none; }
.film-silk { background: linear-gradient(135deg, rgba(249,211,177,.89), rgba(224,180,197,.84) 55%, rgba(167,194,225,.86)); }
.film-climate { background: linear-gradient(135deg, rgba(185,215,231,.89), rgba(193,196,231,.84) 55%, rgba(223,182,205,.84)); }
.film-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 18px; padding: 27px 28px; color: #2c3b5b; font: 400 .64rem "DM Mono", monospace; letter-spacing: .09em; }
.film-art { position: absolute; top: 11%; left: 0; width: 100%; height: 63%; opacity: .8; }
.film-art path, .film-art circle { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.4; }
.film-bottom { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-top: auto; padding: 0 30px 31px; }
.film-index { color: #3a4a68; font: 400 .66rem "DM Mono", monospace; letter-spacing: .11em; }
.film h2 { margin: 8px 0 7px; color: #17233d; font: 400 clamp(3.7rem, 5.2vw, 6.3rem)/.9 "Instrument Serif", Georgia, serif; }
.film h2 em { color: #364c75; }
.film p { max-width: 390px; margin: 0; color: #304362; font-size: .89rem; line-height: 1.5; }
.film-enter { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid rgba(20,35,79,.7); border-radius: 50%; font-size: 1.2rem; }
.gallery-after { display: flex; justify-content: space-between; gap: 20px; margin-top: 52px; padding-top: 23px; border-top: 1px solid rgba(23,35,61,.25); color: #344c6f; }
.gallery-after a { font-size: .88rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.gallery-footer { padding: 35px 0; color: #dbe4f1; background: #0e1d42; }
.gallery-footer .gallery-wrap { display: flex; justify-content: space-between; gap: 20px; }
.gallery-footer span { font: 400 .67rem "DM Mono", monospace; letter-spacing: .1em; }
.gallery-footer a { font-size: .75rem; text-decoration: none; }
.gallery-footer a:hover { text-decoration: underline; }

@media (max-width: 1050px) {
  .gallery-coordinate { display: none; }
  .film { min-height: 470px; }
}
@media (max-width: 900px) {
  .film-grid { grid-template-columns: 1fr; }
  .film { min-height: 500px; }
}
@media (max-width: 768px) {
  .docs-page .main { padding: 65px 19px 90px !important; }
  .docs-page .doc-hero { min-height: 0; padding: 18px 0 60px; margin-bottom: 54px; }
  .docs-page .doc-hero h1 { font-size: clamp(3.8rem, 12vw, 6rem) !important; }
  .docs-page .doc-section-header h2 { font-size: clamp(2.3rem, 8vw, 3.6rem) !important; }
  .doc-hero-lines { width: 120%; right: -40%; opacity: .5; }
  .workspace-page .sidebar-toggle { color: #fff; background: #0e1d42; border-color: rgba(255,255,255,.45); }
  .workspace-page .topbar { padding-left: 62px !important; min-height: 69px; }
  .workspace-page .topbar h2 { font-size: 1.55rem; }
  .workspace-page .tool-kicker, .workspace-page .workspace-link { display: none; }
  .workspace-page #drop-canvas { padding: 14px 17px; }
  .workspace-page .canvas-header { padding: 9px 17px; }
  .gallery-wrap { width: min(100% - 36px, 1420px); }
  .gallery-sky { min-height: 560px; }
  .gallery-nav { height: auto; min-height: 78px; flex-wrap: wrap; gap: 0 16px; padding-block: 18px; }
  .gallery-nav nav { width: 100%; justify-content: space-between; gap: 6px; padding-top: 16px; }
  .gallery-nav nav a { font-size: .68rem; }
  .gallery-nav .gallery-nav-action { display: none; }
  .gallery-hero { padding-top: 97px; }
  .gallery-hero h1 { font-size: clamp(4.9rem, 14vw, 7rem); }
  .gallery-content { padding-top: 54px; }
  .gallery-intro { display: block; }
  .gallery-intro p { margin-top: 12px; }
  .film { min-height: 420px; }
  .film h2 { font-size: 4rem; }
  .gallery-after, .gallery-footer .gallery-wrap { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-page *, .workspace-page *, .gallery-page *,
  .docs-page *::before, .workspace-page *::before, .gallery-page *::before {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}