/* conceit A railway reachability map whose blue network grows with the traveller's time.
   shape demo: the visitor uses the timetable immediately.
   type Arial Rounded style via Trebuchet MS for the railway wordmark, Arial for precise controls.
   colour cool white #f9fbfd, ink #142737, rail blue #224fed.
   grid fluid three-part workspace, 280px control rail, flexible map and 340px station list.
   texture geographic dot field across the water, from the map's coordinate space.
   motion one easing --ease for routes, fields and destination selection.
   move The reachable network draws out from the selected origin when time changes.
   details route drawing; station hover radius; list edge highlight; arrow travel; count change; range fill; dialog arrival; focus ring; selection colour; tabular travel times */
:root{--blue:#224fed;--ink:#142737;--muted:#5d6c7b;--line:#e2e7ed;--ease:cubic-bezier(.22,.7,.25,1);font-family:Arial,sans-serif;color:var(--ink);background:#f9fbfd;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,a,summary{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}header{height:83px;padding:0 4%;display:flex;align-items:center;gap:25px;border-bottom:1px solid var(--line);background:#fff}.logo{font:italic 900 46px/.8 'Trebuchet MS',sans-serif;letter-spacing:-5px;color:var(--blue);transition:transform 180ms var(--ease)}.logo span{font:normal 500 35px Arial;display:inline-block;padding-left:5px;vertical-align:top;transition:transform 180ms var(--ease)}.logo:hover span{transform:translate(3px,-3px)}.brand-caption{font-size:12px;line-height:1.45;color:var(--muted);border-left:1px solid var(--line);padding-left:24px}.header-right{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px}.status-dot{width:6px;height:6px;background:var(--blue);border-radius:50%}.text-button{background:none;border:0;padding:8px;color:var(--muted);font-size:12px;transition:color 180ms var(--ease)}.text-button:hover{color:var(--blue)}.header-right .text-button{margin-left:30px}main{padding:0 4%}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 0 31px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--blue);margin:0 0 10px}h1{font-size:clamp(32px,3vw,48px);font-weight:500;letter-spacing:-2px;margin:0 0 10px;text-wrap:balance}h1 em{color:var(--blue);font-style:normal}.intro p:not(.eyebrow){color:var(--muted);font-size:14px;margin:0;line-height:1.5}.intro-note{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:12px;line-height:1.6;margin-right:20px}.intro-note svg{color:var(--blue)}.workspace{display:grid;grid-template-columns:272px minmax(0,1fr);gap:22px;align-items:start}.filters{padding:24px;background:#fff;border:1px solid var(--line);border-radius:12px}.section-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;letter-spacing:1.5px;margin-bottom:24px}.section-caption span:last-child{font-size:17px;color:var(--blue)}.field-label{display:block;font-size:12px;margin:0 0 10px}.origin-input{position:relative}.origin-input input{width:100%;padding:13px 12px 13px 34px;border:1px solid var(--line);border-radius:6px;font-weight:600;font-size:14px;background:#fafbfd}.origin-dot{position:absolute;left:14px;top:18px;width:8px;height:8px;border:2px solid var(--blue);border-radius:50%}.hint{font-size:10px;line-height:1.55;color:var(--muted);margin:8px 0 20px}.input{width:100%;padding:12px 10px;border:1px solid var(--line);background:#fafbfd;border-radius:6px;font-size:12px;min-width:0;transition:border-color 180ms var(--ease)}#date{margin-bottom:25px;min-height:41px}.duration-label{display:flex;align-items:baseline;justify-content:space-between}.duration-label output{color:var(--blue);font-size:30px;letter-spacing:-1px;font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--blue);margin:15px 0 8px;cursor:pointer}.range-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.presets{display:flex;gap:7px;margin-top:17px}.presets button{border:1px solid var(--line);background:white;border-radius:5px;flex:1;padding:8px 0;font-size:11px;transition:background 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease)}.presets button.active{color:white;background:var(--blue);border-color:var(--blue)}.presets button:hover{border-color:var(--blue)}.separator{height:1px;background:var(--line);margin:23px 0}.access{border-top:1px solid var(--line);padding-top:17px}.access summary{font-size:11px;list-style:none;display:flex;justify-content:space-between}.access summary span{font-size:16px;color:var(--blue);transition:transform 180ms var(--ease)}.access[open] summary span{transform:rotate(45deg)}.access label{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin-top:12px}.access input{width:43px;border:1px solid var(--line);border-radius:4px;padding:5px 3px;text-align:center;font-size:11px;color:var(--ink)}.access .hint{margin-bottom:0}.search-button{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--blue);color:white;border:0;border-radius:6px;padding:15px 12px;font-size:12px;margin-top:22px;transition:background 180ms var(--ease),transform 180ms var(--ease)}.search-button span{font-size:20px;transition:transform 180ms var(--ease)}.search-button:hover{background:#123ccc}.search-button:hover span{transform:translate(2px,-2px)}.search-button:active{transform:scale(.985)}.privacy-note{text-align:center;font-size:9px;color:var(--muted);margin:11px 0 0}.explorer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white;min-width:0}.explorer-top{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);height:73px}.explorer-top>div{display:flex;align-items:center;gap:12px;font-size:12px}.count{font-size:32px;font-weight:500;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-1px}.budget-total{font-size:11px;background:#edf1ff;color:var(--blue);padding:8px 10px;border-radius:4px}.explorer-body{display:grid;grid-template-columns:minmax(0,1fr) 325px;height:615px}.map-wrap{position:relative;overflow:hidden;background:#edf3f7}.map-wrap>svg{width:100%;height:100%;display:block}.country-labels text{font-size:9px;letter-spacing:2px;fill:#9aaab7}.country{fill:#e5ecee;stroke:#cbd6dc;stroke-width:1}.country.france{fill:#fcfdfd;stroke:#bdcbd6}.rail-route{fill:none;stroke:#224fed;stroke-width:1.2;opacity:.16;stroke-dasharray:1000;animation:route-in 800ms var(--ease) both}.map-station circle{fill:var(--blue);stroke:#fff;stroke-width:1.5;transition:r 180ms var(--ease),stroke-width 180ms var(--ease)}.map-station:hover circle,.map-station:focus circle{r:7;stroke-width:2}.map-station text{fill:#193647;font-size:11px;font-weight:500;paint-order:stroke;stroke:#fcfdfd;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.map-station.outside circle{fill:#bcc8d1;opacity:.65}.origin-label{font-size:12px;font-weight:700;fill:var(--blue);paint-order:stroke;stroke:white;stroke-width:4px}.map-caption{position:absolute;bottom:20px;left:19px;display:flex;gap:15px;font-size:9px;color:#506273}.map-caption span{display:flex;align-items:center;gap:6px}.map-caption i{width:6px;height:6px;background:var(--blue);border-radius:50%}.map-caption .unreachable{background:#b4c3ce}.map-note{position:absolute;top:15px;left:18px;color:#718596;font-size:9px;line-height:1.6}.map-loading{position:absolute;inset:0;display:flex;gap:12px;align-items:center;justify-content:center;background:#edf3ff;font-size:12px;color:var(--blue);text-align:center;padding:20px}.map-loading[hidden]{display:none}.loader{width:18px;height:18px;border:2px solid #d0dcff;border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}.results-panel{border-left:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.results-tools{padding:16px 17px 12px;border-bottom:1px solid var(--line)}.results-tools input{width:100%;border:1px solid var(--line);border-radius:5px;font-size:11px;padding:10px;background:#fafbfd}.results-tools select{border:0;background:none;font-size:10px;color:var(--muted);margin-top:12px;padding:0;width:100%}.results{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1}.station-card{padding:17px 18px;border-bottom:1px solid var(--line);border-left:3px solid transparent;transition:background 180ms var(--ease),border-color 180ms var(--ease)}.station-card:hover,.station-card.highlight{background:#f5f7ff;border-left-color:var(--blue)}.station-heading{display:flex;align-items:baseline;gap:8px;justify-content:space-between}.station-name{font-size:15px;letter-spacing:-.3px;line-height:1.3;transition:color 180ms var(--ease)}.station-name:hover{color:var(--blue)}.station-total{white-space:nowrap;font-size:15px;color:var(--blue);font-variant-numeric:tabular-nums}.station-meta{font-size:10px;color:var(--muted);margin:8px 0;line-height:1.6}.station-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}.train-tag{font-size:9px;color:var(--muted)}.detail-button{border:0;background:none;color:var(--blue);font-size:10px;padding:5px 0;transition:transform 180ms var(--ease)}.detail-button:hover{transform:translateX(3px)}.empty{padding:30px 20px;font-size:13px;line-height:1.7;color:var(--muted)}.explorer-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:13px 18px;font-size:11px;border-top:1px solid var(--line);min-height:53px}.explorer-footer>span{line-height:1.6}footer{display:flex;flex-wrap:wrap;gap:15px 25px;justify-content:space-between;font-size:9px;color:var(--muted);padding:25px 0 28px;line-height:1.6}footer a{transition:color 180ms var(--ease)}footer a:hover{color:var(--blue)}dialog{border:1px solid var(--line);border-radius:12px;padding:35px;max-width:560px;width:calc(100% - 32px);color:var(--ink);animation:dialog-in 250ms var(--ease)}dialog::backdrop{background:#14273766}dialog h2{font-size:29px;font-weight:500;letter-spacing:-1px;margin:12px 0 20px}dialog p{font-size:13px;line-height:1.75;color:var(--muted)}.close-dialog{position:absolute;right:13px;top:10px;font-size:25px;border:0;background:none;color:var(--muted);transition:color 180ms var(--ease)}.close-dialog:hover{color:var(--blue)}.primary-link{display:inline-block;background:var(--blue);color:white;padding:13px 16px;border-radius:5px;font-size:12px;margin-top:15px;transition:background 180ms var(--ease)}.primary-link:hover{background:#123ccc}.schedule{max-height:220px;overflow:auto}.schedule-row{display:flex;gap:12px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;font-variant-numeric:tabular-nums}.schedule-row small{font-size:10px;color:var(--muted)}.breakdown{display:flex;flex-wrap:wrap;gap:10px;padding:15px 0;font-size:11px;color:var(--muted)}:focus-visible{outline:3px solid #224fed77;outline-offset:4px}input:focus-visible,select:focus-visible{outline-offset:1px;border-color:var(--blue)}::selection{background:#224fed;color:white}@keyframes route-in{from{stroke-dashoffset:1000;opacity:0}to{stroke-dashoffset:0;opacity:.16}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes dialog-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1900px){.workspace{grid-template-columns:310px minmax(0,1fr);gap:30px}.explorer-body{height:760px;grid-template-columns:minmax(0,1fr) 430px}.filters{padding:30px}.station-card{padding:21px 25px}.station-name,.station-total{font-size:18px}.station-meta{font-size:12px}.train-tag,.detail-button{font-size:11px}.map-wrap>svg{max-width:900px;margin:auto}.intro{padding:45px 0}h1{font-size:58px}}
@media(max-width:1150px){main{padding:0 22px}header{padding:0 22px}.workspace{grid-template-columns:245px minmax(0,1fr);gap:15px}.filters{padding:20px}.explorer-body{grid-template-columns:minmax(0,1fr) 260px}.station-card{padding:14px 12px}.station-name,.station-total{font-size:13px}.intro-note{display:none}.map-wrap>svg{min-width:400px;position:absolute;left:50%;transform:translateX(-50%)}}
@media(max-width:850px){.workspace{grid-template-columns:235px minmax(0,1fr)}.explorer-body{display:flex;flex-direction:column;height:auto}.map-wrap{height:420px}.map-wrap>svg{position:static;transform:none;min-width:0}.results-panel{border-left:0;border-top:1px solid var(--line);height:360px}.explorer-top{padding:15px}.explorer-top>div{font-size:10px;gap:7px}.budget-total{font-size:9px}.count{font-size:27px}.explorer-footer{font-size:10px}}
@media(max-width:600px){header{height:70px;padding:0 20px;gap:18px}.logo{font-size:39px}.brand-caption{font-size:10px;padding-left:17px}.header-right{font-size:0}.status-dot{display:none}.header-right .text-button{font-size:11px;margin:0;padding:4px}.intro{padding:28px 0 24px}.intro p:not(.eyebrow){font-size:12px;max-width:270px}h1{font-size:35px;letter-spacing:-1.5px}.eyebrow{font-size:9px;letter-spacing:1.3px}main{padding:0 16px}.workspace{display:flex;flex-direction:column;gap:18px}.filters{width:100%;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.section-caption,.duration-label,#duration,.range-caption,.presets,.separator,.access,.search-button,.privacy-note{grid-column:1/-1}.section-caption{margin-bottom:17px}.field-label[for=origin]{grid-column:1;grid-row:2}.origin-input{grid-column:1;grid-row:3}.field-label[for=date]{grid-column:2;grid-row:2}#date{grid-column:2;grid-row:3;margin-bottom:0}#origin-help{grid-column:1/-1;margin-bottom:16px}.field-label[for=mode],#mode{grid-column:1/-1}.filters>.hint:last-of-type{grid-column:1/-1}.duration-label{margin-top:3px}.presets{margin-top:12px}.separator{margin:18px 0}.access{padding-top:15px}.access label{font-size:12px}.access input{font-size:12px}.search-button{margin-top:17px}.explorer{width:100%}.explorer-top{height:67px;padding:15px 17px}.explorer-top>div{font-size:11px;gap:10px}.budget-total{font-size:10px}.map-wrap{height:390px}.results-panel{height:420px}.station-card{padding:17px}.station-name,.station-total{font-size:15px}.station-meta{font-size:11px}.train-tag,.detail-button{font-size:10px}.explorer-footer{padding:12px 14px}.explorer-footer .text-button{font-size:10px}.map-caption{bottom:15px;font-size:9px}.map-note{font-size:8px}footer{font-size:9px;gap:8px;padding-top:20px}dialog{padding:30px 24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.arrow-icon{vertical-align:middle;flex-shrink:0}.logo .arrow-icon{width:30px;height:30px}.intro-note>svg{width:46px;height:46px}.text-button .arrow-icon,footer .arrow-icon{width:12px;height:12px}
.explorer-body{min-height:0;grid-template-rows:minmax(0,1fr)}.map-wrap,.results-panel,.results{min-height:0}

.travel-guide{padding:25px 0 40px;max-width:1050px}.travel-guide h2{font-size:25px;letter-spacing:-.6px;font-weight:500}.travel-guide h3{font-size:16px;font-weight:500;margin-top:26px}.travel-guide p{font-size:13px;color:var(--muted);line-height:1.8;max-width:80ch}.travel-guide p a{text-decoration:underline}.city-directory{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 25px}.city-directory a{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px;transition:color 180ms var(--ease)}.city-directory a:hover{color:var(--blue)}.city-directory span{white-space:nowrap;color:var(--blue);font-variant-numeric:tabular-nums}