:root { --paper: #f7f5ee; --paper-deep: #ebe6d9; --ink: #111; --muted: #68675f; --line: rgba(17,17,17,.14); --pink: #ff70e8; --orange: #ff8a3d; --yellow: #ffd84d; --green: #78f58a; --cyan: #62e8e8; --blue: #4d83ff; --mono: 'DM Mono', 'SFMono-Regular', Consolas, monospace; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, Helvetica, Arial, sans-serif; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
.journey-noise { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .025; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.journey-nav { position: fixed; top: 16px; left: 50%; z-index: 100; display: flex; align-items: center; justify-content: space-between; width: min(640px, calc(100vw - 64px)); height: 56px; padding: 0 24px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.48); border-radius: 999px; background: rgba(255,255,255,.64); box-shadow: 0 8px 28px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); font-size: 12px; transition: width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), background .5s ease, box-shadow .5s ease; }
.journey-nav.scrolled { width: min(560px, calc(100vw - 64px)); height: 48px; background: rgba(255,255,255,.76); box-shadow: 0 10px 32px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.76); }
.journey-logo { font-size: 16px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }.journey-nav.scrolled .journey-logo { font-size: 14px; }.journey-logo span { color: var(--orange); }.journey-nav-right { display: flex; align-items: center; gap: 26px; }.journey-back, .journey-github { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; transition: color .2s ease, transform .2s ease; }.journey-back span { color: var(--orange); font-size: 18px; line-height: 0; }.journey-github { color: var(--ink); font-family: var(--mono); font-size: 11px; }.journey-github svg { width: 16px; height: 16px; }.journey-back:hover, .journey-github:hover { color: var(--ink); transform: translateY(-2px); }
.section-shell { width: min(1100px, calc(100vw - 64px)); margin-inline: auto; }.journey-hero { min-height: 720px; padding-top: 195px; position: relative; }.hero-grid-mark { position: absolute; top: 130px; right: -8vw; width: 480px; height: 480px; border: 1px solid rgba(17,17,17,.13); border-radius: 50%; background: repeating-conic-gradient(from 12deg, transparent 0 14deg, rgba(17,17,17,.07) 14deg 14.3deg); mask-image: radial-gradient(circle, transparent 0 35%, #000 35.5% 36%, transparent 36.5% 52%, #000 52.5% 53%, transparent 53.5% 69%, #000 69.5% 70%, transparent 70.5%); transform: rotate(-18deg); }.journey-kicker, .eyebrow, .card-label, .menu-index, .menu-hint { color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.journey-kicker { margin-bottom: 34px; }.journey-hero h1 { position: relative; z-index: 1; max-width: 800px; margin: 0; font-size: clamp(68px, 10vw, 142px); line-height: .86; letter-spacing: -.065em; font-weight: 800; }.journey-hero h1 em { color: var(--orange); font-style: normal; }.journey-lead { position: relative; z-index: 1; margin: 60px 0 0; font-size: 20px; font-weight: 600; }.journey-intro { position: relative; z-index: 1; max-width: 500px; margin: 28px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }.scroll-cue { position: absolute; bottom: 60px; left: 0; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }.scroll-cue span { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); font-size: 16px; }
.overview { padding: 120px 0 150px; border-top: 1px solid var(--line); }.section-heading h2, .future-copy h2 { margin: 18px 0 0; font-size: clamp(42px, 6vw, 76px); line-height: .93; letter-spacing: -.055em; font-weight: 800; }.overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 70px; }.overview-card { min-height: 245px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.28); }.overview-card--wide { grid-column: span 2; background: var(--ink); color: #fff; }.overview-card--accent { background: var(--yellow); }.overview-card--goal { background: var(--cyan); }.overview-card strong { font-size: 22px; line-height: 1.08; letter-spacing: -.045em; }.overview-card--wide strong { font-size: 34px; }.card-label { color: currentColor; opacity: .55; }.card-note { color: currentColor; opacity: .58; font: 10px var(--mono); }
.menu-section { padding: 110px 0 150px; }.section-heading--row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }.section-heading--row > p { max-width: 250px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: right; }.infinite-menu { position: relative; height: min(620px, 64vw); min-height: 480px; margin-top: 70px; overflow: hidden; border-radius: 18px; background: #141515; box-shadow: 0 28px 70px rgba(17,17,17,.13); isolation: isolate; }.infinite-menu::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background: radial-gradient(circle at 50% 48%, rgba(255,216,77,.18), transparent 24%), linear-gradient(90deg, rgba(255,112,232,.07), transparent 40%, rgba(98,232,232,.08)); }.menu-loading { display: grid; height: 100%; margin: 0; place-items: center; color: rgba(255,255,255,.58); font: 10px var(--mono); letter-spacing: .1em; }
.timeline-section { padding: 90px 0 150px; }.timeline { position: relative; margin-top: 80px; }.timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 32px; width: 1px; background: var(--line); }.timeline-item { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) 230px; gap: 45px; min-height: 300px; padding: 0 0 92px; }.timeline-marker { position: relative; z-index: 1; display: grid; width: 66px; height: 66px; place-items: center; border-radius: 50%; background: var(--paper); }.timeline-marker::before { content: ''; position: absolute; inset: 8px; z-index: -1; border-radius: inherit; background: var(--item-color); }.timeline-marker span { color: var(--ink); font: 10px var(--mono); }.timeline-copy { padding-top: 8px; }.timeline-copy h3 { margin: 18px 0 22px; font-size: clamp(32px, 4vw, 54px); line-height: 1.12; letter-spacing: -.055em; }.timeline-copy p { max-width: 440px; margin: 0; color: var(--muted); font-size: 14px; line-height: 2; }.timeline-aside, .site-map, .design-swatch, .flow-stack, .optimization-list, .deployment-flow { align-self: center; }.timeline-aside span { display: block; margin-bottom: 14px; color: var(--muted); font: 10px var(--mono); }.timeline-aside strong { font-size: 25px; line-height: 1.12; letter-spacing: -.05em; }.timeline-item--pink { --item-color: var(--pink); }.timeline-item--orange { --item-color: var(--orange); }.timeline-item--yellow { --item-color: var(--yellow); }.timeline-item--green { --item-color: var(--green); }.timeline-item--cyan { --item-color: var(--cyan); }.timeline-item--blue { --item-color: var(--blue); }.site-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.site-map span, .optimization-list span { padding: 12px 10px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.25); color: var(--muted); font: 10px var(--mono); text-align: center; }.site-map span:first-child { grid-column: span 2; background: var(--orange); border-color: var(--orange); color: var(--ink); }.design-swatch { display: flex; gap: 7px; align-items: end; justify-content: center; height: 100px; }.design-swatch i { display: block; width: 28px; height: 48px; border-radius: 50% 50% 5px 5px; background: var(--pink); transform: rotate(-12deg); }.design-swatch i:nth-child(2) { height: 75px; background: var(--orange); transform: rotate(6deg); }.design-swatch i:nth-child(3) { height: 94px; background: var(--yellow); transform: rotate(-4deg); }.design-swatch i:nth-child(4) { height: 70px; background: var(--cyan); transform: rotate(9deg); }.design-swatch i:nth-child(5) { height: 52px; background: var(--blue); transform: rotate(-8deg); }.flow-stack { display: grid; gap: 7px; }.flow-stack span { padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; font: 10px var(--mono); text-align: center; }.flow-stack b { color: var(--muted); font: 12px var(--mono); text-align: center; }.optimization-list { display: grid; gap: 8px; }.optimization-list span { text-align: left; }.optimization-list span::before { content: '— '; color: var(--cyan); }.deployment-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font: 10px var(--mono); }.deployment-flow b { color: var(--blue); }.deployment-flow strong { flex-basis: 100%; color: var(--ink); text-align: center; }.deployment-flow i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(120,245,138,.2); }
.future-section { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 130px 0 180px; border-top: 1px solid var(--line); }.future-copy p { max-width: 350px; margin: 32px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }.future-list { align-self: end; display: grid; gap: 18px; }.future-list span { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); font-size: 17px; letter-spacing: -.02em; }.future-list b { color: var(--orange); font-size: 25px; font-weight: 400; }.journey-footer { display: flex; align-items: center; justify-content: space-between; padding: 30px max(32px, calc((100vw - 1100px) / 2)) 42px; border-top: 1px solid rgba(255,255,255,.15); background: var(--ink); color: rgba(255,255,255,.44); font: 10px var(--mono); }.journey-footer .journey-logo { color: #fff; }.journey-footer a:last-child { color: var(--yellow); text-decoration: none; }
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }.is-visible { opacity: 1; transform: none; }
@media (max-width: 760px) { .journey-nav, .section-shell { width: calc(100vw - 40px); }.journey-nav { top: 12px; height: 52px; padding: 0 17px; }.journey-nav.scrolled { width: calc(100vw - 40px); height: 48px; }.journey-back { font-size: 0; }.journey-back span { font-size: 20px; }.journey-github { font-size: 0; }.journey-github svg { width: 19px; height: 19px; }.journey-hero { min-height: 650px; padding-top: 160px; }.hero-grid-mark { top: 180px; right: -210px; width: 390px; height: 390px; opacity: .7; }.journey-hero h1 { font-size: clamp(58px, 16vw, 92px); }.journey-lead { margin-top: 42px; font-size: 17px; }.journey-intro { margin-top: 22px; font-size: 13px; line-height: 1.9; }.scroll-cue { bottom: 48px; }.overview, .menu-section, .timeline-section { padding: 86px 0 105px; }.overview-grid { grid-template-columns: repeat(2, 1fr); margin-top: 50px; }.overview-card, .overview-card--wide { grid-column: span 1; min-height: 190px; padding: 18px; }.overview-card--wide { grid-column: span 2; }.overview-card--wide strong { font-size: 28px; }.overview-card strong { font-size: 18px; }.section-heading--row { display: block; }.section-heading--row > p { margin-top: 24px; text-align: left; }.infinite-menu { height: 650px; min-height: 0; margin-top: 48px; }.menu-side--left { top: 30px; left: 24px; transform: none; }.menu-side--right { top: auto; right: 24px; bottom: 32px; width: 135px; transform: none; }.menu-side h3 { font-size: 50px; }.menu-action { bottom: 28px; left: calc(50% - 28px); }.menu-hint { left: 24px; right: auto; bottom: 18px; font-size: 8px; }.timeline { margin-top: 58px; }.timeline::before { left: 22px; }.timeline-item { grid-template-columns: 46px minmax(0, 1fr); gap: 20px; min-height: 0; padding-bottom: 75px; }.timeline-marker { width: 46px; height: 46px; }.timeline-marker::before { inset: 5px; }.timeline-copy { padding-top: 4px; }.timeline-copy h3 { margin: 14px 0 18px; font-size: 35px; }.timeline-copy p { font-size: 13px; line-height: 1.8; }.timeline-aside, .site-map, .design-swatch, .flow-stack, .optimization-list, .deployment-flow { grid-column: 2; align-self: start; margin-top: 28px; }.timeline-aside { padding-top: 0; }.future-section { display: block; padding: 95px 0 120px; }.future-list { margin-top: 54px; }.future-list span { font-size: 15px; }.journey-footer { display: grid; gap: 15px; padding: 28px 20px 34px; font-size: 9px; }.journey-footer a:last-child { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .journey-nav,
  .journey-nav.scrolled {
    right: 20px;
    left: 20px;
    width: auto;
    transform: none;
  }
  .journey-nav-right { gap: 2px; }
  .journey-back,
  .journey-github {
    width: 44px;
    height: 44px;
    justify-content: center;
  }
}