:root {
  --paper: #fafafa;
  --white: #ffffff;
  --ink: #050505;
  --steel: #6c6c6c;
  --ash: #b3b3b3;
  --orange: #ff5b29;
  --lime: #f5ff80;
  --blue: #315fca;
  --violet: #8068c8;
  --mint-pale: #e9fbfa;
  --mint: #217c84;
  --coral: #ff5b29;
  --coral-dark: #c83c12;
  --coral-pale: #fff0e8;
  --line: #050505;
  --body: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: "Alimama ShuHeiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Geist Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 24px 24px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.is-hidden { display: none !important; }
.ambient, .grain { display: none; }

/* Shared language */
.brand { display: flex; align-items: center; gap: 11px; }
.brand img {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  object-fit: contain;
  box-shadow: 2px 2px 0 var(--ink);
}
.brand div { display: grid; line-height: 1.15; }
.brand strong { font-family: var(--brand); font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.brand span { margin-top: 4px; color: var(--steel); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow > span { width: 30px; height: 2px; background: currentColor; }
.button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 850;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.button:hover { transform: translate(-2px, -2px); }
.button:active { transform: translate(2px, 2px); box-shadow: none; }
.button-primary { color: #fff; background: var(--ink); box-shadow: 4px 4px 0 var(--orange); }
.button-primary:hover { box-shadow: 6px 6px 0 var(--orange); }
.button-secondary { background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.button-full { display: flex; width: 100%; align-items: center; justify-content: space-between; }

/* Login */
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr);
  max-width: 1384px;
  margin: 0 auto;
  padding: 32px;
  gap: 24px;
}
.login-illustration {
  position: relative;
  min-height: 680px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--ink);
  background-color: var(--ink);
  background-image:
    radial-gradient(circle, rgba(245,255,128,.22) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 12px 12px, 48px 48px, 48px 48px;
  box-shadow: 9px 9px 0 var(--blue);
}
.login-illustration::before {
  content: "EARLIEST MEET / 19:20";
  position: absolute;
  top: 24px;
  left: 24px;
  padding: 6px 11px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: var(--lime);
  font: 800 12px/1.2 var(--mono);
  letter-spacing: .08em;
}
.login-illustration::after {
  content: "A ─────────── ● ─────────── B";
  position: absolute;
  right: 24px;
  top: 26px;
  color: #fff;
  font: 700 12px/1 var(--mono);
}
.login-illustration > p {
  position: absolute;
  left: 36px;
  bottom: 28px;
  margin: 0;
  max-width: 560px;
  color: #fff;
  font-family: var(--brand);
  font-size: clamp(44px, 5vw, 78px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.07em;
}
.sunset-orbit {
  position: relative;
  width: min(60%, 390px);
  aspect-ratio: 1;
  border: 1px solid #fff;
  transform: rotate(-4deg);
}
.sunset-orbit::before, .sunset-orbit::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed var(--ash);
}
.sunset-orbit::after { inset: 34%; border-style: solid; background: rgba(245,255,128,.08); }
.orbit-person, .orbit-cinema {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: #fff;
  font: 900 18px/1 var(--mono);
  box-shadow: 4px 4px 0 var(--orange);
  transform: rotate(4deg);
}
.orbit-person-a { left: -28px; top: 18%; }
.orbit-person-b { right: -28px; bottom: 18%; background: var(--violet); color: #fff; }
.orbit-cinema { inset: 50% auto auto 50%; width: 86px; height: 86px; font-size: 34px; transform: translate(-50%, -50%) rotate(4deg); box-shadow: 6px 6px 0 var(--lime); }
.login-card {
  align-self: center;
  width: min(100%, 530px);
  margin: 0 auto;
  padding: 38px;
  border: 1px solid var(--ink);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--orange);
}
.brand-login { margin-bottom: 48px; }
.login-card h1 {
  margin: 14px 0 14px;
  font-family: var(--brand);
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.07em;
}
.login-copy { margin: 0 0 28px; color: var(--steel); font-size: 16px; }
.field-label { display: block; margin: 17px 0 7px; font-weight: 800; }
.input-shell {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.input-shell:focus-within { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--lime); }
.input-shell > span { color: var(--orange); font-family: var(--mono); font-weight: 900; }
.input-shell input { min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.text-button { border: 0; background: transparent; cursor: pointer; color: var(--steel); font-weight: 800; }
.form-error { min-height: 24px; margin: 7px 0; color: #b42318; font-size: 14px; }
.demo-credentials { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; color: var(--steel); font-family: var(--mono); font-size: 12px; }
.demo-credentials button { padding: 0; border: 0; background: transparent; color: var(--orange); cursor: pointer; font-weight: 800; }
.shake { animation: shake 240ms linear; }

/* Navigation */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1384px;
  margin: 0 auto;
  padding: 10px 32px;
  border: 1px solid var(--ink);
  border-top: 0;
  background: rgba(250,250,250,.94);
  backdrop-filter: blur(8px);
}
.site-header nav { display: flex; align-items: center; gap: 5px; }
.site-header nav a { padding: 8px 13px; border: 1px solid transparent; border-radius: 7px; font-weight: 800; }
.site-header nav a:hover { border-color: var(--ink); }
.site-header nav a.active { border-color: var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.simulation-badge { display: flex; align-items: center; gap: 8px; font: 800 12px/1 var(--mono); }
.simulation-badge i { width: 9px; height: 9px; border: 1px solid var(--ink); border-radius: 50%; background: var(--orange); }
.avatar-button { width: 42px; height: 42px; border: 1px solid var(--ink); border-radius: 999px; color: #fff; background: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--orange); font-weight: 900; }

/* Hero */
main { max-width: 1320px; margin: 0 auto; }
.hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: clamp(44px, 7vw, 100px);
  padding: 80px 32px 90px;
  border-bottom: 1px solid var(--ink);
}
.hero-copy h1 {
  margin: 22px 0 28px;
  font-family: var(--brand);
  font-size: clamp(64px, 7.2vw, 104px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.078em;
}
.hero-copy h1 em { color: var(--orange); font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0; color: #333; font-size: 18px; line-height: 1.75; }
.hero-proof { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 40px; border: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.hero-proof > div { min-height: 104px; display: grid; align-content: center; padding: 14px; background: #fff; }
.hero-proof b { font: 900 28px/1 var(--mono); }
.hero-proof span { margin-top: 8px; color: var(--steel); font-size: 12px; line-height: 1.35; }
.hero-map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: #eef4ff;
  box-shadow: 9px 9px 0 var(--blue);
}
.map-grid, .street-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(5,5,5,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,5,5,.07) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero-map::before { content: "COMMUTE BLUEPRINT / GUANGZHOU"; position: absolute; z-index: 3; top: 17px; left: 17px; padding: 5px 8px; border: 1px solid var(--ink); background: var(--lime); font: 800 11px/1 var(--mono); }
.route-art { position: absolute; inset: 6%; width: 88%; height: 88%; }
.city-river { fill: none; stroke: rgba(49,95,202,.18); stroke-width: 42; }
.route { fill: none; stroke-width: 5; stroke-dasharray: 10 7; animation: routeFlow 7s linear infinite; }
.route-a { stroke: var(--mint); }
.route-b { stroke: var(--orange); }
.route-dot { stroke: var(--ink); stroke-width: 3; }
.dot-a { fill: var(--mint); }.dot-b { fill: var(--orange); }.dot-center { fill: var(--lime); }
.map-label, .cinema-pin, .fair-chip { position: absolute; z-index: 4; border: 1px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.map-label { display: grid; grid-template-columns: 30px auto; align-items: center; gap: 8px; padding: 9px 11px; font-weight: 850; line-height: 1.2; }
.map-label span { grid-row: 1/3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 5px; color: #fff; background: var(--ink); font-family: var(--mono); }
.map-label small { color: var(--steel); font: 11px/1.2 var(--mono); }
.map-label-a { top: 20%; left: 4%; }.map-label-b { right: 3%; bottom: 14%; }
.cinema-pin { left: 50%; top: 50%; display: grid; min-width: 142px; place-items: center; padding: 14px; transform: translate(-50%,-50%); box-shadow: 6px 6px 0 var(--orange); }
.cinema-pin div { font-size: 30px; }.cinema-pin strong { font-size: 17px; }.cinema-pin span { color: var(--steel); font: 10px/1.5 var(--mono); }
.fair-chip { right: 4%; top: 19%; padding: 8px 11px; border-radius: 999px; background: var(--lime); font: 12px/1.2 var(--mono); }

/* Planner */
.planner-section, .results-section { padding: 86px 32px 100px; border-bottom: 1px solid var(--ink); scroll-margin-top: 74px; }
.section-heading { display: grid; grid-template-columns: 160px 1fr minmax(260px, .55fr); align-items: end; gap: 28px; margin-bottom: 34px; }
.section-heading > div { display: flex; align-items: center; gap: 12px; }
.section-index { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ink); background: var(--orange); color: #fff; box-shadow: 3px 3px 0 var(--ink); font: 900 15px/1 var(--mono); }
.section-heading p { margin: 0; color: var(--steel); font-size: 16px; }
.section-heading > div p { color: var(--orange); font: 800 12px/1.2 var(--mono); letter-spacing: .06em; }
.section-heading h2 { margin: 0; font-family: var(--brand); font-size: clamp(42px, 5vw, 68px); font-weight: 900; line-height: .96; letter-spacing: -.064em; }
.planner-card { border: 1px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--orange); }
.people-grid { display: grid; grid-template-columns: 1fr 58px 1fr; align-items: center; padding: 28px; border-bottom: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.person-panel { min-width: 0; margin: 0; padding: 24px; border: 0; background: #fff; }
.person-panel legend { float: left; width: 100%; margin: 0 0 24px; font-size: 24px; font-weight: 900; }
.person-panel legend span { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 8px; border: 1px solid var(--ink); border-radius: 7px; color: #fff; background: var(--mint); box-shadow: 2px 2px 0 var(--ink); font-family: var(--mono); }
.person-b legend span { background: var(--violet); }
.person-panel > label, .field-row label { display: block; margin: 0 0 7px; font-weight: 800; }
.select-shell { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border: 1px solid var(--ink); background: var(--paper); }
.pin-icon { margin-right: 9px; color: var(--orange); font-size: 10px; }
.select-shell select { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 700; }
.field-row { display: grid; grid-template-columns: .72fr 1.28fr; gap: 14px; margin-top: 18px; }
.field-row input { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--ink); background: var(--paper); }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; min-height: 48px; border: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.mode-switch button { border: 0; background: #fff; cursor: pointer; font-weight: 800; }
.mode-switch button.selected { background: var(--lime); }
.swap-button { z-index: 2; width: 46px; height: 46px; justify-self: center; border: 1px solid var(--ink); border-radius: 999px; background: var(--lime); cursor: pointer; box-shadow: 3px 3px 0 var(--orange); font: 900 22px/1 var(--mono); }
.movie-picker { padding: 30px; border-bottom: 1px solid var(--ink); }
.picker-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.picker-header span { color: var(--orange); font: 800 12px/1.2 var(--mono); letter-spacing: .06em; }
.picker-header h3 { margin: 5px 0 0; font-size: 30px; line-height: 1.1; }
.date-picker { display: flex; border: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.date-picker button { min-width: 92px; padding: 9px 12px; border: 0; background: #fff; cursor: pointer; }
.date-picker button.selected { background: var(--lime); }
.date-picker b, .date-picker small { display: block; }.date-picker small { color: var(--steel); font: 11px/1.4 var(--mono); }
.movie-list { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--ink); background: var(--ink); gap: 1px; }
.movie-option { position: relative; display: grid; grid-template-columns: 58px 1fr 24px; align-items: center; gap: 13px; min-height: 104px; padding: 15px; border: 0; text-align: left; background: #fff; cursor: pointer; }
.movie-option.selected { background: var(--coral-pale); box-shadow: inset 0 -5px 0 var(--orange); }
.poster { display: grid; place-items: center; width: 58px; height: 72px; border: 1px solid var(--ink); color: #fff; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); font-size: 25px; font-weight: 900; }
.poster-two { background: var(--orange); }.poster-three { background: #277146; }
.movie-option b, .movie-option small { display: block; }.movie-option small { margin-top: 5px; color: var(--steel); font: 11px/1.4 var(--mono); }
.movie-option i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; color: transparent; font-style: normal; }
.movie-option.selected i { color: var(--ink); background: var(--lime); }
.planner-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 25px 30px 28px; }
.buffer-control { min-width: 280px; }
.buffer-control label { display: block; margin-bottom: 8px; font-family: var(--mono); }
.buffer-control input { width: 100%; accent-color: var(--orange); }
.find-button { min-width: 240px; display: flex; align-items: center; justify-content: space-between; }

/* Results */
.results-section { background: #fff7cf; }
.result-layout { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr); gap: 22px; }
.result-map-card { border: 1px solid var(--ink); background: #fff; box-shadow: 7px 7px 0 var(--blue); }
.result-map-toolbar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--ink); font: 800 12px/1.2 var(--mono); }
.result-map-toolbar div { display: flex; align-items: center; gap: 8px; }.result-map-toolbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); border: 1px solid var(--ink); }
.result-map-toolbar > span { color: var(--steel); }
.result-map { position: relative; min-height: 590px; overflow: hidden; background: #eef4ff; }
.result-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.street { fill: none; stroke: rgba(5,5,5,.14); stroke-width: 3; }.street.thick { stroke-width: 8; }.river { fill: none; stroke: rgba(49,95,202,.19); stroke-width: 36; }
.map-route { fill: none; stroke-width: 5; stroke-dasharray: 9 6; animation: routeFlow 7s linear infinite; }.map-route-a { stroke: var(--mint); }.map-route-b { stroke: var(--orange); }
.origin-marker { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid var(--ink); background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 12px; font-weight: 800; }
.origin-marker b { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--mint); font-family: var(--mono); }.origin-b b { background: var(--orange); }
.origin-a { left: 6%; top: 25%; }.origin-b { right: 4%; bottom: 13%; }
.map-cinema { position: absolute; z-index: 4; display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); background: #fff; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); text-align: left; }
.map-cinema > b { display: grid; place-items: center; width: 36px; height: 36px; background: var(--lime); font: 900 14px/1 var(--mono); }
.map-cinema span { display: grid; padding-right: 9px; font-size: 12px; font-weight: 850; }.map-cinema small { color: var(--steel); font: 9px/1.4 var(--mono); }
.map-cinema.selected { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--orange); }
.marker-one { left: 44%; top: 47%; }.marker-two { top: 28%; right: 19%; }.marker-three { left: 25%; bottom: 18%; }
.map-legend { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--ink); background: #fff; font: 10px/1.2 var(--mono); }
.map-legend span { width: 18px; height: 4px; }.legend-a { background: var(--mint); }.legend-b { margin-left: 8px; background: var(--orange); }
.recommendations { display: grid; align-content: start; gap: 12px; }
.recommendation-card { position: relative; padding: 20px; border: 1px solid var(--ink); background: #fff; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }
.recommendation-card:hover, .recommendation-card.selected { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--orange); }
.rank-line, .cinema-title, .commute-row, .showtime-row, .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rank-line { margin-bottom: 10px; }.rank-line > span:first-child { color: var(--orange); font: 900 11px/1.2 var(--mono); letter-spacing: .06em; }
.reason-chip { padding: 5px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--lime); font: 800 11px/1 var(--mono); }
.cinema-title { align-items: start; }.cinema-title h3 { margin: 0; font-size: 23px; line-height: 1.15; }.cinema-title p { margin: 5px 0 0; color: var(--steel); font-size: 13px; }.cinema-title > span { color: var(--orange); font: 900 24px/1 var(--mono); }
.commute-row { margin: 16px 0 12px; padding: 11px; border: 1px solid var(--ink); background: #fafafa; }
.commute-person { display: grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; align-items: center; gap: 0 7px; }.commute-person > span { grid-row: 1/3; display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: var(--mint); font: 900 11px/1 var(--mono); }.commute-person.b > span { background: var(--orange); }.commute-person b { font-size: 14px; }.commute-person small, .commute-diff { color: var(--steel); font: 10px/1.3 var(--mono); }
.showtime-row { justify-content: flex-start; }.showtime-pill { min-width: 76px; display: grid; padding: 7px 10px; border: 1px solid var(--ink); background: #fff; cursor: pointer; }.showtime-pill.selected { background: var(--lime); box-shadow: 2px 2px 0 var(--orange); }.showtime-pill b { font: 900 13px/1.2 var(--mono); }.showtime-pill small { color: var(--steel); font-size: 10px; }
.card-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink); color: var(--steel); font-size: 12px; }.detail-link { border: 0; background: transparent; color: var(--orange); cursor: pointer; font-weight: 850; }

/* Method + privacy */
.how-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px,8vw,110px); padding: 96px 32px; border-bottom: 1px solid var(--ink); }
.how-copy h2 { margin: 20px 0 24px; font-family: var(--brand); font-size: clamp(44px,5vw,72px); font-weight: 900; line-height: .96; letter-spacing: -.064em; }.how-copy > p { margin: 0; color: #333; font-size: 16px; line-height: 1.8; }
.steps-list { margin: 0; padding: 0; border: 1px solid var(--ink); background: var(--ink); list-style: none; }.steps-list li { display: grid; grid-template-columns: 86px 1fr; min-height: 126px; background: #fff; border-bottom: 1px solid var(--ink); }.steps-list li:last-child { border-bottom: 0; }.steps-list li > span { display: grid; place-items: center; border-right: 1px solid var(--ink); color: var(--orange); background: var(--lime); font: 900 20px/1 var(--mono); }.steps-list li > div { align-self: center; padding: 20px; }.steps-list b { font-size: 20px; }.steps-list p { margin: 5px 0 0; color: var(--steel); font-size: 14px; }
.privacy-section { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 30px; margin: 76px 32px 92px; padding: 30px; border: 1px solid var(--ink); color: #fff; background: var(--ink); box-shadow: 8px 8px 0 var(--blue); }.privacy-mark { display: grid; place-items: center; width: 70px; height: 70px; border: 1px solid #fff; color: var(--ink); background: var(--lime); font-size: 34px; }.privacy-section span { color: var(--lime); font: 800 12px/1.2 var(--mono); letter-spacing: .06em; }.privacy-section h2 { margin: 5px 0 6px; font-size: 30px; }.privacy-section p { margin: 0; color: #c7c7c7; }.privacy-section > a { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border: 1px solid #fff; border-radius: 999px; color: var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--orange); font-weight: 850; }.privacy-section > a span { color: var(--ink); }
footer { display: grid; grid-template-columns: 1fr 1.7fr auto; align-items: center; gap: 28px; max-width: 1320px; margin: 0 auto; padding: 26px 32px 38px; border-top: 1px solid var(--ink); }.footer-brand img { width: 32px; height: 32px; }.footer-brand span { display: none; } footer p { margin: 0; color: var(--steel); font-size: 13px; } footer > span { font: 11px/1.3 var(--mono); }

/* Loading */
.loading-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5,5,5,.82); }
.loading-card { width: min(92vw,490px); padding: 30px; border: 1px solid var(--ink); background: #fff; box-shadow: 9px 9px 0 var(--orange); text-align: center; }
.loading-map { position: relative; height: 126px; margin-bottom: 20px; border: 1px solid var(--ink); background-color: #eef4ff; background-image: radial-gradient(var(--ash) 1px,transparent 1px); background-size: 12px 12px; }
.loading-person, .loading-cat { position: absolute; z-index: 2; top: 42px; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink); font: 900 13px/1 var(--mono); }.loading-a { left: 18px; }.loading-b { right: 18px; background: var(--orange); color: #fff; }.loading-cat { left: 50%; width: 50px; height: 50px; transform: translateX(-50%); background: #fff; font-size: 22px; }.loading-line { position: absolute; top: 63px; width: 38%; border-top: 3px dashed var(--ink); }.line-a { left: 55px; }.line-b { right: 55px; }
.loading-card h2 { margin: 0; font-size: 30px; }.loading-card p { color: var(--steel); }.loading-progress { height: 12px; border: 1px solid var(--ink); background: #fff; }.loading-progress i { display: block; width: 0; height: 100%; background: var(--lime); border-right: 1px solid var(--ink); transition: width 500ms ease; }

/* Dialog + toast */
.detail-dialog { width: min(92vw,650px); padding: 0; border: 1px solid var(--ink); border-radius: 0; color: var(--ink); background: #fff; box-shadow: 10px 10px 0 var(--orange); }.detail-dialog::backdrop { background: rgba(5,5,5,.72); }.dialog-close { position: absolute; z-index: 2; right: 13px; top: 13px; width: 38px; height: 38px; border: 1px solid var(--ink); border-radius: 999px; background: var(--lime); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); font-size: 22px; }.dialog-content { padding: 36px; }.dialog-kicker { color: var(--orange); font: 900 12px/1.2 var(--mono); letter-spacing: .08em; }.dialog-content h2 { margin: 10px 0 4px; font-family: var(--brand); font-size: 38px; line-height: 1.08; }.dialog-content > p { margin: 0; color: var(--steel); }.route-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0; border: 1px solid var(--ink); background: var(--ink); }.route-detail { padding: 17px; background: #fafafa; }.route-detail span { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 9px; color: #fff; background: var(--mint); font: 900 11px/1 var(--mono); }.route-detail.b span { background: var(--orange); }.route-detail b, .route-detail small { display: block; }.route-detail small { margin-top: 4px; color: var(--steel); font-size: 12px; }.dialog-reason { padding: 16px; border: 1px solid var(--ink); background: var(--lime); }.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.toast { position: fixed; z-index: 110; right: 24px; bottom: 24px; padding: 12px 17px; border: 1px solid var(--ink); color: #fff; background: var(--ink); box-shadow: 4px 4px 0 var(--orange); opacity: 0; pointer-events: none; transform: translateY(15px); transition: 160ms ease; font: 800 13px/1.3 var(--mono); }.toast.show { opacity: 1; transform: translateY(0); }

/* Motion */
.reveal { animation: reveal 420ms ease-out both; }.reveal-delay { animation-delay: 100ms; }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes routeFlow { to { stroke-dashoffset: -68; } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

@media (max-width: 1100px) {
  .site-header { margin: 0 16px; padding-inline: 18px; }
  .hero, .planner-section, .results-section, .how-section { padding-inline: 24px; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-map { min-height: 520px; }
  .section-heading { grid-template-columns: 140px 1fr; }.section-heading > p { grid-column: 2; }
  .result-layout { grid-template-columns: 1fr; }.recommendations { grid-template-columns: repeat(3,1fr); }.recommendation-card { min-width: 0; }
  .cinema-title { display: block; }.cinema-title > span { display: block; margin-top: 8px; }.commute-row { align-items: stretch; flex-direction: column; }.commute-diff { align-self: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .login-screen { display: block; padding: 16px; }.login-illustration { min-height: 330px; margin-bottom: 18px; box-shadow: 5px 5px 0 var(--blue); }.login-illustration > p { left: 20px; bottom: 18px; font-size: 44px; }.login-illustration::after { display: none; }.sunset-orbit { width: 190px; }.orbit-person { width: 44px; height: 44px; }.orbit-cinema { width: 66px; height: 66px; font-size: 25px; }.login-card { padding: 24px 20px; box-shadow: 5px 5px 0 var(--orange); }.brand-login { margin-bottom: 34px; }.login-card h1 { font-size: 50px; }.demo-credentials { align-items: flex-start; flex-direction: column; }
  .site-header { position: relative; grid-template-columns: 1fr auto; min-height: 64px; margin: 0; padding: 10px 16px; border-inline: 0; }.site-header nav, .simulation-badge { display: none; }.brand span { display: none; }.header-actions { grid-column: 2; grid-row: 1; }
  main { width: 100%; }.hero { min-height: auto; display: block; padding: 62px 16px 70px; }.hero-copy h1 { font-size: clamp(51px,15vw,70px); }.hero-copy > p { font-size: 16px; }.hero-proof { grid-template-columns: 1fr; }.hero-proof > div { min-height: 80px; }.hero-map { min-height: 410px; margin-top: 48px; box-shadow: 5px 5px 0 var(--blue); }.hero-map::before { max-width: 220px; }.map-label { padding: 6px; font-size: 10px; }.map-label span { width: 25px; height: 25px; }.map-label small { display: none; }.cinema-pin { min-width: 118px; padding: 10px; }.fair-chip { top: auto; right: 8px; bottom: 8px; }
  .planner-section, .results-section, .how-section { padding: 66px 16px 76px; }.section-heading { display: block; }.section-heading > div { margin-bottom: 20px; }.section-heading h2 { font-size: 46px; }.section-heading > p { margin-top: 16px; }.planner-card { box-shadow: 5px 5px 0 var(--orange); }.people-grid { grid-template-columns: 1fr; padding: 14px; }.swap-button { margin: -5px 0; }.person-panel { padding: 18px 14px; }.person-panel legend { font-size: 21px; }.field-row { grid-template-columns: 1fr; }.movie-picker { padding: 22px 14px; }.picker-header { display: block; }.date-picker { margin-top: 18px; }.date-picker button { flex: 1; min-width: 0; }.movie-list { grid-template-columns: 1fr; }.movie-option { min-height: 96px; }.planner-footer { align-items: stretch; flex-direction: column; padding: 22px 14px; }.buffer-control, .find-button { min-width: 0; width: 100%; }
  .result-map-card { box-shadow: 5px 5px 0 var(--blue); }.result-map-toolbar { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 10px; }.result-map { min-height: 420px; }.origin-marker span, .map-cinema span { display: none; }.origin-marker { padding: 5px; }.map-cinema { padding: 0; }.marker-one { left: 43%; }.recommendations { grid-template-columns: 1fr; }.recommendation-card:hover { transform: none; box-shadow: none; }.recommendation-card.selected { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--orange); }.commute-row { flex-direction: row; align-items: center; }.cinema-title { display: flex; }.cinema-title > span { margin: 0; }.showtime-row { flex-wrap: wrap; }.card-footer { align-items: flex-start; flex-direction: column; }
  .how-section { display: block; }.how-copy h2 { font-size: 44px; }.steps-list { margin-top: 42px; }.steps-list li { grid-template-columns: 64px 1fr; }.privacy-section { grid-template-columns: 1fr; margin: 58px 16px 70px; padding: 22px; box-shadow: 5px 5px 0 var(--blue); }.privacy-section > a { justify-content: center; width: 100%; }.privacy-mark { width: 54px; height: 54px; }.privacy-section h2 { font-size: 26px; }
  footer { grid-template-columns: 1fr; padding: 24px 16px 34px; }.route-detail-grid { grid-template-columns: 1fr; }.dialog-content { padding: 30px 20px 22px; }.dialog-content h2 { padding-right: 32px; font-size: 30px; }.dialog-actions { align-items: stretch; flex-direction: column; }.dialog-actions .button { width: 100%; }.toast { right: 16px; bottom: 16px; left: 16px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}