:root {
  --paper: #f5efe3;
  --paper-alt: #ede5d4;
  --ink: #1f1a14;
  --ink-soft: #4a4237;
  --line: #d9cdb6;
  --night: #14110d;
  --night-2: #1c1813;
  --night-line: #3a3228;
  --night-text: #efe6d6;
  --night-muted: #b8ab95;
  --gold: #c8923c;
  --gold-soft: #e2b56a;
  --radius: 14px;
  --wrap: 1160px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
code, pre { font-family: var(--mono); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 560; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 520; max-width: 22ch; margin-bottom: 40px; }
h3 { font-size: 1.35rem; font-weight: 600; }
.kicker { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold); margin: 0 0 14px; }

section { padding: 104px 0; }
.paper { background: var(--paper); }
.paper.alt { background: var(--paper-alt); }
.dark { background: var(--night); color: var(--night-text); }
.dark a { color: var(--gold-soft); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 20; color: var(--ink); transition: background 0.25s ease, box-shadow 0.25s ease; }
.site-header.scrolled { background: rgba(245, 239, 227, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.site-header nav { display: flex; gap: 26px; align-items: center; }
.site-header nav a { text-decoration: none; font-size: 0.93rem; opacity: 0.85; }
.site-header nav a:hover { opacity: 1; }
.nav-github { border: 1px solid rgba(31, 26, 20, 0.35); border-radius: 999px; padding: 6px 14px; opacity: 1; }

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 140px 0 96px; color: var(--ink); overflow: hidden; background: var(--paper); }
.hero-art { --hero: url('/media/hero.svg'); position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(245, 239, 227, 0.97) 0%, rgba(245, 239, 227, 0.9) 44%, rgba(245, 239, 227, 0) 68%), var(--hero, none); background-size: cover; background-position: 62% center; transform: scale(1.02); animation: drift 34s ease-in-out infinite alternate; }
.mode-art[data-art="stories"] { --art: url('/media/mode-stories.svg'); }
.mode-art[data-art="worlds"] { --art: url('/media/mode-worlds.svg'); }
.mode-art[data-art="memory"] { --art: url('/media/mode-memory.svg'); }
.mode-art[data-art="systems"] { --art: url('/media/mode-systems.svg'); }
@keyframes drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1%, -0.6%, 0); } }
.hero-content { position: relative; }
.eyebrow { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 22px; }
.lead { font-size: clamp(1.1rem, 1.9vw, 1.32rem); line-height: 1.55; max-width: 48ch; color: var(--ink-soft); margin: 0 0 36px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.button { display: inline-block; padding: 14px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: transform 0.15s ease, background 0.15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: #3a3128; }
.button.ghost { border: 1px solid rgba(31, 26, 20, 0.4); color: var(--ink); }
.button.ghost:hover { background: rgba(31, 26, 20, 0.05); }
.install-line { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 0 22px; padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid rgba(31, 26, 20, 0.3); background: rgba(251, 247, 239, 0.7); backdrop-filter: blur(6px); }
.prompt-mark { color: var(--gold); font: 600 1.1rem var(--mono); }
.install-line code { flex: 1; min-width: 0; font-size: 0.8rem; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; text-wrap: balance; }
.install-line .copy { flex: none; min-width: 5.4em; padding: 9px 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.9rem; text-align: center; } /* the width stays put when the label changes to Copied */
.install-line .copy:hover { opacity: 0.88; }
.hero-more { align-self: center; color: var(--ink-soft); text-underline-offset: 3px; }
.hero-more:hover { color: var(--ink); }
.copy { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(248, 241, 228, 0.3); background: rgba(248, 241, 228, 0.08); color: inherit; font: 500 0.82rem var(--sans); cursor: pointer; }
.copy:hover { border-color: var(--gold-soft); }

/* Modes */
.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.mode { background: #fbf7ef; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 18px 40px -28px rgba(60, 40, 10, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.mode:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -26px rgba(60, 40, 10, 0.45); }
.mode-art { aspect-ratio: 4 / 3; overflow: hidden; background: var(--art, none) 50% 50% / 100% auto no-repeat, linear-gradient(160deg, #cdb98f, #8a6f45);
  transition: -webkit-mask-position 1.6s cubic-bezier(0.3, 0.6, 0.2, 1) var(--reveal-delay, 0s), mask-position 1.6s cubic-bezier(0.3, 0.6, 0.2, 1) var(--reveal-delay, 0s); }
/* Once the picture is part of the page (site.js), it replaces the background. */
.mode-art.inlined { background: none; }
.mode-art svg { display: block; width: 100%; height: 100%; }
/* The first time the cards come into view, each picture is revealed from left to right, the way time runs in the viewer. */
.reveal-modes .mode-art { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.reveal-modes .modes.drawn .mode-art { -webkit-mask-position: 0 0; mask-position: 0 0; }
.modes .mode:nth-child(2) .mode-art { --reveal-delay: 0.15s; }
.modes .mode:nth-child(3) .mode-art { --reveal-delay: 0.3s; }
.modes .mode:nth-child(4) .mode-art { --reveal-delay: 0.45s; }
.mode h3 { margin: 22px 26px 8px; font-size: 1.5rem; }
.mode p { margin: 0 26px 26px; color: var(--ink-soft); }

/* See it */
.play { position: relative; width: 78px; height: 78px; border-radius: 50%; border: 2px solid currentColor; background: rgba(14, 11, 8, 0.45); }
.play::after { content: ""; position: absolute; left: 31px; top: 23px; border-style: solid; border-width: 15px 0 15px 24px; border-color: transparent transparent transparent currentColor; }
.showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.show { display: block; text-decoration: none; padding: 28px; border-radius: var(--radius); border: 1px solid var(--night-line); background: var(--night-2); color: var(--night-text) !important; transition: border-color 0.15s ease, transform 0.15s ease; }
.show:hover { border-color: var(--gold); transform: translateY(-2px); }
.show p { color: var(--night-muted); margin: 0 0 16px; }
.more { color: var(--gold-soft); font-weight: 600; }

/* Get started */
.start { border-top: 1px solid var(--night-line); }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.panel { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius); padding: 28px; min-width: 0; }
.panel p { color: var(--night-muted); }
.code { position: relative; margin: 14px 0; }
.code pre { margin: 0; padding: 46px 18px 18px; background: #0d0b08; border: 1px solid var(--night-line); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85rem; line-height: 1.6; color: #f1e7d6; }
/* The viewer shown in a macOS window: glass title bar, the traffic lights, a hairline edge and a deep shadow. */
.viewer-shot { margin: 0 0 36px; }
.window { position: relative; border-radius: 12px; overflow: hidden; background: #050608; border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 50px 100px -40px rgba(0, 0, 0, 0.85), 0 30px 120px -50px rgba(109, 155, 255, 0.28); }
.window-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  background: linear-gradient(180deg, #23262e, #191b21); border-bottom: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.window-bar i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.35); }
.window-bar i:nth-child(1) { background: #ff5f57; }
.window-bar i:nth-child(2) { background: #febc2e; }
.window-bar i:nth-child(3) { background: #28c840; }
.window-bar span { position: absolute; left: 0; right: 0; text-align: center; font-size: 0.8rem; font-weight: 500; color: #9aa3b4; letter-spacing: 0.01em; pointer-events: none; }
.window video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.viewer-shot figcaption { margin: 18px auto 0; max-width: 64ch; text-align: center; font-size: 0.95rem; line-height: 1.55; color: var(--night-muted); }
@media (max-width: 560px) { .window-bar { height: 30px; gap: 6px; padding: 0 10px; } .window-bar i { width: 9px; height: 9px; } .window-bar span { font-size: 0.7rem; } .window { border-radius: 9px; } }
.code .copy { position: absolute; top: 10px; right: 10px; }
.note { font-size: 0.93rem; }
.panel p code, .first-asks code { font-size: 0.85em; background: #0d0b08; border: 1px solid var(--night-line); border-radius: 6px; padding: 1px 6px; color: #f1e7d6; }
details { border: 1px solid var(--night-line); border-radius: 10px; padding: 0 16px; margin: 10px 0; background: rgba(13, 11, 8, 0.5); }
details[open] { padding-bottom: 6px; }
summary { cursor: pointer; padding: 13px 0; font-weight: 600; color: var(--night-text); }
.first-asks { margin-top: 48px; }
.first-asks ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.first-asks li { font-family: var(--serif); font-size: 1.12rem; font-style: italic; padding: 18px 20px; border-radius: 12px; background: var(--night-2); border: 1px solid var(--night-line); color: #f1e7d6; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; margin-bottom: 48px; }
.faq-grid p { color: var(--ink-soft); margin: 0; }
.faq a { color: var(--ink); }
.faq h2.kicker { font-family: var(--sans); font-weight: 600; line-height: 1.6; letter-spacing: 0.14em; max-width: none; }
.status { font-size: 0.93rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 24px; max-width: 80ch; margin: 0; }

/* Footer */
.site-footer { background: var(--night); color: var(--night-muted); padding: 56px 0 48px; font-size: 0.92rem; border-top: 1px solid var(--night-line); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 40px; align-items: start; }
.footer-brand .brand { color: var(--night-text); margin-bottom: 14px; }
.footer-brand p { margin: 0; max-width: 34ch; line-height: 1.55; }
.footer-head { margin: 0 0 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--night-muted); }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: var(--night-text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-family { gap: 14px; }
.footer-family a { font-weight: 600; }
.footer-family a span { display: block; margin-top: 2px; font-weight: 400; color: var(--night-muted); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } .site-footer { padding: 44px 0 40px; } }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  section { padding: 72px 0; }
  .site-header nav a:not(.nav-github) { display: none; }
  .hero { min-height: auto; padding: 120px 0 72px; }
  h1 { font-size: 2.35rem; }
  .hero { padding-bottom: 320px; }
  .hero-art { background-image: linear-gradient(180deg, rgba(245, 239, 227, 0.97) 0%, rgba(245, 239, 227, 0.92) 50%, rgba(245, 239, 227, 0) 70%), var(--hero, none); background-size: 100% 100%, auto 440px; background-position: 0 0, 100% 100%; background-repeat: no-repeat; animation: none; transform: none; }
  .modes, .showcase, .start-grid, .faq-grid, .first-asks ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
  html { scroll-behavior: auto; }
}

/* The viewer's own style, for comparison: ?style=viewer */
.theme-viewer {
  --paper: #050608;
  --paper-alt: #090a0c;
  --ink: #eceff5;
  --ink-soft: #a2a9b7;
  --line: #1c2029;
  --night: #050608;
  --night-2: #0d0f13;
  --night-line: #1d2129;
  --night-text: #eceff5;
  --night-muted: #a2a9b7;
  --gold: #ffb057;
  --gold-soft: #ffc982;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.theme-viewer h1, .theme-viewer h2, .theme-viewer h3 { font-weight: 700; letter-spacing: -0.025em; }
.theme-viewer .kicker { color: #9fc3ff; }
.theme-viewer .site-header.scrolled { background: rgba(5, 6, 8, 0.86); box-shadow: 0 1px 0 var(--line); }
.theme-viewer .nav-github { border-color: rgba(236, 239, 245, 0.35); }
.theme-viewer .hero-art { --hero: url('/media/hero-viewer.svg'); background-image: linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.9) 44%, rgba(5, 6, 8, 0) 68%), var(--hero); }
.theme-viewer.hero-sweep .hero-art { --hero: url('/media/hero-sweep.svg'); background-image: linear-gradient(90deg, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.8) 38%, rgba(5, 6, 8, 0) 66%), var(--hero); background-position: right center; }
.theme-viewer.hero-photo .hero-art { --hero: url('/media/hero-bands.webp'); background-image: linear-gradient(90deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.86) 40%, rgba(5, 6, 8, 0) 72%), var(--hero); background-position: right center; }
.theme-viewer .button.primary { background: #f2efe6; color: #050608; }
.theme-viewer .button.primary:hover { background: #ffffff; }
.theme-viewer .button.ghost { border-color: rgba(236, 239, 245, 0.35); }
.theme-viewer .button.ghost:hover { background: rgba(255, 255, 255, 0.06); }
.theme-viewer .install-line { border-color: rgba(159, 195, 255, 0.42); background: rgba(13, 15, 19, 0.78); box-shadow: 0 0 0 4px rgba(159, 195, 255, 0.07), 0 0 40px -12px rgba(109, 155, 255, 0.45); }
.theme-viewer .install-line .copy { background: #f2efe6; color: #050608; }
.theme-viewer .mode { background: #0d0f13; border-color: var(--line); box-shadow: none; }
.theme-viewer .mode-art[data-art="stories"] { --art: url('/media/mode-stories-viewer.svg'); }
.theme-viewer .mode-art[data-art="worlds"] { --art: url('/media/mode-worlds-viewer.svg'); }
.theme-viewer .mode-art[data-art="memory"] { --art: url('/media/mode-memory-viewer.svg'); }
.theme-viewer .mode-art[data-art="systems"] { --art: url('/media/mode-systems-viewer.svg'); }
.theme-viewer .faq a { color: #9fc3ff; }
@media (max-width: 760px) {
  .theme-viewer .hero-art { background-image: linear-gradient(180deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.92) 50%, rgba(5, 6, 8, 0) 70%), var(--hero); }
  .theme-viewer.hero-sweep .hero-art { background-image: linear-gradient(180deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.9) 50%, rgba(5, 6, 8, 0) 68%), var(--hero); background-size: 100% 100%, auto 460px; background-position: 0 0, 100% 100%; }
  .theme-viewer.hero-photo .hero { padding-bottom: 72px; }
  .theme-viewer.hero-photo .hero-art { background-image: linear-gradient(0deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.82) 60%, rgba(5, 6, 8, 0.6) 100%), var(--hero); background-size: cover; background-position: right center; }
}

/* Heading fonts, for comparison: ?font=fraunces | instrument | newsreader | intertight | spacegrotesk | geist | system */
.font-fraunces { --serif: "Fraunces", Georgia, serif; }
.font-instrument { --serif: "Instrument Serif", Georgia, serif; }
.font-instrument h1, .font-instrument h2, .font-instrument h3 { font-weight: 400; letter-spacing: -0.005em; }
.font-newsreader { --serif: "Newsreader", Georgia, serif; }
.font-intertight { --serif: "Inter Tight", system-ui, sans-serif; }
.font-spacegrotesk { --serif: "Space Grotesk", system-ui, sans-serif; }
.font-geist { --serif: "Geist", system-ui, sans-serif; }
.font-system { --serif: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Promotional video, right after the opening */
.video-band { background: var(--night); padding: 56px 0 96px; }
.promo { position: relative; aspect-ratio: 16 / 9; min-height: 200px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--night-line); background: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); }
.promo img, .promo iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; background: #000; }
.promo-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.05)); cursor: pointer; color: #fff; }
.promo-play .play { width: 92px; height: 92px; border-color: #fff; background: rgba(5, 6, 8, 0.45); transition: transform 0.15s ease; }
.promo-play .play::after { left: 37px; top: 28px; border-width: 18px 0 18px 28px; }
.promo-play:hover .play { transform: scale(1.06); }
.promo-caption { color: var(--night-muted); text-align: center; margin: 18px 0 0; font-size: 0.95rem; }
.promo-caption a { color: inherit; }
.play-link { display: inline-flex; align-items: center; gap: 10px; }
.play-mini { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.duration { opacity: 0.6; font-weight: 500; }
@media (max-width: 760px) { .video-band { padding: 32px 0 64px; } .promo-play .play { width: 72px; height: 72px; } .promo-play .play::after { left: 28px; top: 21px; border-width: 15px 0 15px 23px; } }

/* Between phone and wide screens the drawing sits under the text instead of behind it. */
@media (min-width: 761px) and (max-width: 1100px) {
  .hero { min-height: auto; padding-bottom: 400px; }
  .hero-art { background-image: linear-gradient(180deg, rgba(245, 239, 227, 0.97) 0%, rgba(245, 239, 227, 0.92) 52%, rgba(245, 239, 227, 0) 68%), var(--hero, none); background-size: 100% 100%, auto 520px; background-position: 0 0, 100% 100%; background-repeat: no-repeat; animation: none; transform: none; }
  .theme-viewer .hero-art { background-image: linear-gradient(180deg, rgba(5, 6, 8, 0.97) 0%, rgba(5, 6, 8, 0.92) 52%, rgba(5, 6, 8, 0) 68%), var(--hero); }
}

/* The default opening: text on the left, a turning world on the right (hero-globe.js). */
.hero-grid { position: relative; width: 100%; }
.hero-visual { display: none; }
.hero-globe .hero-art { display: none; }
.hero-globe .hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.hero-globe .hero h1 { font-size: clamp(2.4rem, 4.7vw, 4.2rem); }
.hero-globe .hero-visual { display: block; position: relative; aspect-ratio: 1 / 1; max-height: 620px; width: 100%; }
.hero-globe .hero-visual::before { content: ""; position: absolute; inset: -10%; background: radial-gradient(closest-side, rgba(70, 100, 190, 0.16), rgba(70, 100, 190, 0)); }
.hero-visual canvas { position: absolute; left: -14%; top: -24%; width: 150%; height: 136%; pointer-events: none; }
@media (max-width: 860px) {
  .hero-globe .hero { padding-bottom: 40px; min-height: auto; }
  .hero-globe .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero-globe .hero-visual { width: min(100%, 520px); margin: 18% auto 0; }
  .hero-visual canvas { left: -6%; top: -20%; width: 112%; height: 128%; }
}
@media (max-width: 400px) { .install-line { gap: 10px; padding-left: 12px; } .install-line code { font-size: 0.74rem; } }