:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #181b1c; background: #ece7dc; }
* { box-sizing: border-box; }
body { margin: 0; background: #ece7dc; min-height: 100vh; }
button, input, select { font: inherit; }
.demo-header { height: 52px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ccc5b8; background: rgba(242,238,229,.95); position: sticky; top: 0; z-index: 5; }
.demo-header > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.demo-mark { width: 25px; height: 25px; display: grid; place-items: center; background: #1b1e1f; color: #d8ff62; border-radius: 7px; font-weight: 800; }
.legacy-badge { border: 1px solid #bcb4a6; border-radius: 999px; padding: 4px 8px; font: 600 10px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; color: #6f6a61; }
.demo-layout { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 18px; padding: 24px 18px 32px; }
.kicker { margin: 0 0 7px; text-transform: uppercase; font: 650 10px/1.3 ui-monospace, monospace; letter-spacing: .1em; color: #676159; }
h1 { margin: 0; max-width: 610px; font-size: clamp(29px, 5vw, 52px); line-height: .98; letter-spacing: -.06em; font-weight: 650; }
.intro { max-width: 600px; margin: 13px 0 19px; color: #646159; font-size: 12px; line-height: 1.5; }
form { padding: 12px; border: 1px solid #cbc4b7; border-radius: 13px; background: #f5f1e8; }
form > label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.search-row { display: grid; grid-template-columns: minmax(130px,1fr) 105px 96px auto; gap: 6px; }
input, select { border: 1px solid #c7c0b4; border-radius: 8px; background: #fffdf8; color: #252728; padding: 8px 9px; font-size: 11px; min-width: 0; }
button { border: 1px solid #1b1e1f; border-radius: 8px; background: #1b1e1f; color: #f7f4ec; padding: 8px 10px; font-size: 11px; font-weight: 700; cursor: pointer; }
button:hover { transform: translateY(-1px); }
.results-bar { margin: 16px 0 8px; display: flex; justify-content: space-between; color: #676159; font: 650 10px/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.session-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.session-grid:empty { min-height: 442px; }
.session-card { background: #f5f1e8; border: 1px solid #cbc4b7; border-radius: 12px; padding: 12px; min-height: 142px; display: flex; flex-direction: column; }
.session-card[hidden] { display: none; }
.session-meta { display: flex; justify-content: space-between; color: #676159; font: 600 9px/1.2 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
.session-card h2 { margin: 10px 0 5px; font-size: 14px; letter-spacing: -.035em; line-height: 1.1; }
.session-card p { margin: 0 0 10px; color: #6b665d; font-size: 10px; line-height: 1.4; }
.session-card button { margin-top: auto; align-self: flex-start; background: transparent; color: #202324; border-color: #aaa294; padding: 6px 8px; }
.session-card button.selected { background: #d8ff62; border-color: #a8c844; color: #151a08; }
.itinerary { align-self: start; position: sticky; top: 70px; border-radius: 13px; background: #1b1e1f; color: #f2efe7; padding: 14px; min-height: 250px; }
.itinerary-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #343839; }
.itinerary h2 { margin: 0; font-size: 17px; letter-spacing: -.04em; }
.itinerary .kicker { color: #9ea3a3; }
.itinerary-heading button { border-color: #4a5051; color: #bac0c1; padding: 5px 7px; }
.itinerary-list { display: grid; gap: 7px; padding: 12px 0; }
.itinerary-item { border: 1px solid #383d3e; border-radius: 9px; padding: 8px; }
.itinerary-item strong { display: block; font-size: 11px; line-height: 1.25; }
.itinerary-item span { color: #9ea3a3; font: 9px/1.3 ui-monospace, monospace; }
.itinerary-item button { float: right; padding: 3px 5px; border-color: #4a5051; color: #aeb4b5; font-size: 10px; }
.empty { color: #8e9495; font-size: 10px; }
#itinerary-status { border-top: 1px solid #343839; padding-top: 10px; color: #d8ff62; font: 650 10px/1.3 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 720px) { .demo-layout { grid-template-columns: 1fr; } .itinerary { position: static; } .search-row { grid-template-columns: 1fr 1fr; } .search-row input { grid-column: 1/-1; } .session-grid { grid-template-columns: 1fr; } .session-grid:empty { min-height: 892px; } }