@font-face { font-family: Bricolage; src: url('/assets/BricolageGrotesque-Latin.woff2') format('woff2'); font-display: swap; font-weight: 200 800; }
@font-face { font-family: Inter; src: url('/assets/Inter-Latin.woff2') format('woff2'); font-display: swap; font-weight: 100 900; }
:root {
  color-scheme: dark;
  --page: #0B0A09; --on-page: #F6F1E9; --surface: #15130F; --on-surface: #F6F1E9;
  --raised: #1E1B17; --on-raised: #F6F1E9; --primary: #FFD23F; --on-primary: #1A1408;
  --muted: #B9B0A3; --mo: #39C892; --on-mo: #0B0A09; --mo-light: #A6F4CE; --mo-shade: #18775B;
  --radius-small: 8px; --radius-medium: 12px; --radius-button: 16px; --radius-large: 20px; --radius-card: 28px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-section: 96px;
  --type-hero: clamp(3rem, 6vw, 5.25rem); --type-display: clamp(2.5rem, 4.5vw, 4rem);
  --type-section: 1.25rem; --type-body: 1rem; --type-small: .875rem; --type-label: .75rem;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-6); }
body { margin: 0; overflow-wrap: anywhere; background: var(--page); color: var(--on-page); font: var(--type-body)/1.65 Inter, sans-serif; -webkit-font-smoothing: antialiased; }
main { overflow: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 5px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
button, a, summary { touch-action: manipulation; }
button { font: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .brand { font-family: Bricolage, sans-serif; }
h1, h2 { font-weight: 800; letter-spacing: -.055em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--type-hero); }
h2 { font-size: var(--type-display); }
h3 { font-size: var(--type-section); letter-spacing: -.02em; line-height: 1.25; }
p { text-wrap: pretty; }
.wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.section { padding-block: var(--space-section); }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-label); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: var(--space-6); }
.muted, .release-note, .footer-credit { color: var(--muted); }
.small { font-size: var(--type-small); }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: var(--space-3) var(--space-5); background: var(--primary); color: var(--on-primary); border-radius: var(--radius-small); }
.skip-link:focus { top: 16px; }
.header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-block: var(--space-6); gap: var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-dot { color: var(--primary); margin-left: -8px; }
.header nav { display: flex; gap: var(--space-8); align-items: center; font-size: var(--type-small); }
.header nav a { display: inline-flex; min-height: 48px; align-items: center; text-decoration: none; }
.header nav a:hover, .footer a:hover { color: var(--primary); }
.nav-cta { gap: var(--space-3); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; min-height: 680px; padding-block: var(--space-12) 80px; }
.hero-copy { position: relative; z-index: 1; }
.signal { width: 8px; height: 8px; background: var(--mo); border-radius: 50%; }
.highlight { color: var(--primary); }
.hero-description { max-width: 470px; margin-top: var(--space-6); color: var(--muted); font-size: 1.0625rem; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: 56px; padding: var(--space-4) var(--space-6); background: var(--primary); color: var(--on-primary); border-radius: var(--radius-button); text-decoration: none; font-size: var(--type-small); font-weight: 700; transition: transform .2s; }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 1.5rem; line-height: 1; }
.hero .button { margin-top: var(--space-8); }
.release-note { font-size: var(--type-label); margin-top: var(--space-4); }
.hero-art { position: relative; height: 540px; isolation: isolate; }
.orbit { position: absolute; border: 1px solid var(--raised); border-radius: 50%; z-index: -1; }
.orbit-one { width: 94%; height: 88%; top: 6%; left: 3%; transform: rotate(-25deg); }
.orbit-two { width: 75%; height: 110%; top: -6%; left: 14%; transform: rotate(35deg); }
.art-tile { position: absolute; width: 44%; height: 59%; border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 24px 60px #0005; }
.tile-space { top: 6%; left: 3%; transform: rotate(-12deg); background: #282340; }
.tile-sun { right: 3%; top: 20%; transform: rotate(13deg); background: #d99f57; }
.tile-noir { width: 43%; height: 46%; bottom: 0; left: 23%; transform: rotate(-4deg); background: #272e2b; }
.planet { position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #d4c6ed, #6b578a 55%, #282340 73%); top: 10%; left: 35%; box-shadow: -15px 15px 40px #aa94d033; }
.tile-space::after { content: '✦'; position: absolute; top: 16%; left: 18%; font-size: 2rem; color: #e2d3f5; }
.sun { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: #f3cc79; top: 13%; left: 10%; }
.sun::after { content: ''; position: absolute; background: #ba7545; width: 200%; height: 100%; top: 70%; left: -50%; transform: rotate(-30deg); }
.stairs { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #34483e 0 12%, #25342c 12% 15%); clip-path: polygon(70% 0, 100% 0, 100% 100%, 0 100%, 0 80%, 16% 80%, 16% 64%, 34% 64%, 34% 45%, 52% 45%, 52% 23%, 70% 23%); }
.art-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: var(--space-4); background: var(--surface); color: var(--on-surface); font-family: Bricolage, sans-serif; font-weight: 600; font-size: var(--type-small); }
.mo { position: absolute; width: 134px; height: 128px; top: 36%; left: 37%; background: radial-gradient(circle at 30% 25%, var(--mo-light), var(--mo) 60%, var(--mo-shade)); border-radius: 46% 54% 43% 57% / 58% 48% 52% 42%; transform: rotate(-8deg); box-shadow: 0 12px 60px #39c89225; animation: arrive .8s ease-out both; }
.mo-eyes { position: absolute; top: 40%; left: 32%; display: flex; gap: 16px; }
.mo-eyes i { width: 9px; height: 15px; background: var(--on-mo); border-radius: 50%; }
.mo-smile { position: absolute; top: 57%; left: 45%; width: 20px; height: 10px; border-bottom: 3px solid var(--on-mo); border-radius: 50%; }
.mo-note { position: absolute; top: 27%; left: 23%; background: var(--on-page); color: var(--page); padding: var(--space-3) var(--space-4); font-size: var(--type-label); font-weight: 600; border-radius: var(--radius-medium); transform: rotate(-6deg); }
.little-star { font-size: 1.25rem; margin-right: var(--space-1); }
.art-index { position: absolute; right: 2%; bottom: -4%; color: var(--muted); font-size: .625rem; letter-spacing: .14em; writing-mode: vertical-rl; }
.ticker { background: var(--primary); color: var(--on-primary); overflow: hidden; padding-block: var(--space-4); transform: rotate(-2deg); margin-block: var(--space-6); }
.ticker div { display: flex; gap: var(--space-12); align-items: center; width: max-content; font-family: Bricolage, sans-serif; font-weight: 700; font-size: var(--type-section); }
.ticker span { font-size: 1.75rem; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.steps { display: grid; gap: var(--space-8); }
.steps article { display: flex; gap: var(--space-6); }
.steps article > div { min-width: 0; }
.step-number { font-family: Bricolage, sans-serif; color: var(--primary); font-size: var(--type-small); padding-top: var(--space-1); }
.steps p { margin-top: var(--space-2); color: var(--muted); }
.preview-section { background: var(--surface); color: var(--on-surface); }
.preview-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 96px; }
.preview-copy > p:not(.eyebrow) { margin-top: var(--space-6); max-width: 420px; }
.moods { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.moods button { border: 0; border-radius: var(--radius-button); background: var(--raised); color: var(--on-raised); padding: var(--space-3) var(--space-4); min-height: 48px; cursor: pointer; font-size: var(--type-small); }
.moods button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.moods button:hover { text-decoration: underline; text-underline-offset: 4px; }
.film-example { background: var(--raised); color: var(--on-raised); border-radius: var(--radius-card); overflow: hidden; transform: rotate(2deg); }
.example-art { height: 280px; position: relative; overflow: hidden; background: #2a2542; transition: background .4s; }
.world-orb { position: absolute; width: 170px; aspect-ratio: 1; top: 36px; left: calc(50% - 85px); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e3d0eb, #826b9a 60%, #423154 85%); transition: transform .5s, border-radius .5s, background .5s; }
.world-horizon { position: absolute; inset: 55% -10% -40%; background: #534263; border-radius: 50% 50% 0 0; transform: rotate(-16deg); }
.world-horizon::after { content: ''; position: absolute; inset: 32% -10% -10%; background: #362c46; border-radius: 50% 50% 0 0; transform: rotate(28deg); }
.world-star { position: absolute; color: #e3d0eb; }
.star-one { top: 48px; left: 48px; font-size: 1.5rem; }
.star-two { top: 96px; right: 48px; }
[data-world="tension"] .example-art { background: #192f2c; }
[data-world="tension"] .world-orb { background: #b9d7b4; border-radius: 4%; transform: rotate(45deg) scale(.8); }
[data-world="tension"] .world-horizon { background: #36554b; }
[data-world="tension"] .world-horizon::after { background: #1d382e; }
[data-world="warmth"] .example-art { background: #b36f49; }
[data-world="warmth"] .world-orb { background: #f3d38c; transform: translateY(28px); }
[data-world="warmth"] .world-horizon { background: #d79d63; }
[data-world="warmth"] .world-horizon::after { background: #a35c3d; }
.example-content { padding: var(--space-6); }
.example-content .eyebrow { margin-bottom: var(--space-3); color: var(--muted); }
.example-content h3 { font-size: 1.75rem; }
.example-content > p:not(.eyebrow) { margin-top: var(--space-3); color: var(--muted); font-size: var(--type-small); }
.reason { display: flex; gap: var(--space-3); margin-top: var(--space-6); align-items: flex-start; }
.reason img { flex: 0 0 28px; }
.reason p { font-size: var(--type-small); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); margin-top: 64px; }
.feature-symbol { display: block; color: var(--mo); font-size: 2.25rem; margin-bottom: var(--space-6); line-height: 1; }
.principle-grid p { color: var(--muted); margin-top: var(--space-4); }
.text-link { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 48px; margin-top: var(--space-4); font-size: var(--type-small); }
.start-section { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-card); text-align: center; position: relative; overflow: hidden; }
.start-section .eyebrow { justify-content: center; }
.start-section p:not(.eyebrow) { margin-top: var(--space-6); }
.start-mark { position: absolute; left: -32px; top: -64px; font-size: 18rem; opacity: .1; line-height: 1; transform: rotate(15deg); pointer-events: none; }
.button-dark { background: var(--page); color: var(--on-page); margin-top: var(--space-8); }
.start-section a:focus-visible { outline-color: var(--page); }
.faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; }
.faq-items { display: grid; align-content: start; gap: var(--space-3); }
.faq details { background: var(--surface); border-radius: var(--radius-medium); padding: var(--space-4) var(--space-5); }
.faq summary { min-height: 48px; cursor: pointer; font-weight: 600; padding-block: var(--space-3); line-height: 1.5; }
.faq details p { padding-block: var(--space-4); color: var(--muted); }
.footer { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6) var(--space-12); padding-block: var(--space-8) var(--space-12); align-items: center; }
.footer > p { font-size: var(--type-small); color: var(--muted); }
.footer nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.footer nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--type-small); }
.footer .footer-credit { grid-column: 1 / -1; font-size: var(--type-label); }
.legal { max-width: 800px; padding-block: var(--space-12) var(--space-section); overflow-wrap: anywhere; }
.legal h1 { font-size: var(--type-display); margin-block: var(--space-8) var(--space-4); }
.legal h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; margin-block: var(--space-12) var(--space-4); }
.legal h3 { margin-block: var(--space-8) var(--space-4); }
.legal p, .legal ul { margin-bottom: var(--space-4); }
.legal li { margin-bottom: var(--space-2); }
.legal a { color: var(--primary); }
.legal .updated { color: var(--muted); font-size: var(--type-small); }
.legal .back { display: inline-flex; align-items: center; min-height: 48px; margin-block: var(--space-6); }
.legal code { font-size: .85em; }
@keyframes arrive { from { opacity: 0; transform: translateY(20px) rotate(-8deg); } to { opacity: 1; transform: translateY(0) rotate(-8deg); } }
@media (max-width: 900px) {
  :root { --space-section: 64px; }
  .hero { min-height: 0; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .hero-art { height: 420px; }
  .mo { width: 108px; height: 104px; left: 30%; }
  .mo-note { left: 6%; }
  .art-caption { font-size: var(--type-label); padding: var(--space-3); }
  .intro, .preview-layout, .faq { gap: var(--space-12); }
  .principle-grid { gap: var(--space-6); }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .header { padding-block: var(--space-4); }
  .brand { font-size: 1.5rem; }
  .brand img { width: 32px; height: 32px; }
  .header nav { gap: var(--space-4); font-size: var(--type-label); }
  .header nav > a:first-child { display: none; }
  .hero { grid-template-columns: 1fr; padding-block: var(--space-8) var(--space-12); gap: var(--space-8); }
  .hero-copy { max-width: 500px; }
  .hero .eyebrow { margin-bottom: var(--space-5); }
  .hero-description { font-size: var(--type-body); max-width: 360px; }
  .hero-art { width: min(100%, 400px); height: 380px; margin-inline: auto; }
  .mo { left: 35%; }
  .mo-note { left: 19%; }
  .art-index { right: 0; }
  .ticker { margin-block: var(--space-3); padding-block: var(--space-3); }
  .ticker div { font-size: var(--type-body); gap: var(--space-6); }
  .intro, .preview-layout, .faq { grid-template-columns: 1fr; }
  .steps { gap: var(--space-8); }
  .film-example { transform: none; }
  .example-art { height: 240px; }
  .principle-grid { grid-template-columns: 1fr; gap: var(--space-12); margin-top: var(--space-12); }
  .feature-symbol { margin-bottom: var(--space-4); }
  .principle-grid p { margin-top: var(--space-3); }
  .start-section { padding-inline: var(--space-5); }
  .start-mark { font-size: 12rem; top: -32px; left: -48px; }
  .start-section h2 { font-size: 2.25rem; }
  .footer { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer nav { gap: var(--space-1) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}