:root {
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:#203543;
  background:#f5f7f8;
  font-synthesis:none;
  --ink:#006b99;
  --muted:#61717d;
  --border:#e0e6e8;
  --red:#ff1838;
  --accent:#e7f4fa;
  --ksu-blue:#0085be;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
}
button,input {
  font:inherit;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:default;
  opacity:.5;
}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #0085be;
  outline-offset:3px;
}
button {
  min-height:44px;
}
button svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
button[hidden],[hidden] {
  display:none!important;
}
.skip {
  position:fixed;
  top:-80px;
  z-index:20;
  background:white;
  padding:14px;
}
.skip:focus {
  top:4px;
}
.site-header {
  height:90px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:white;
  border-bottom:1px solid var(--border);
}
.brand {
  display:flex;
  gap:13px;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
  font-size:12px;
  font-weight:750;
  letter-spacing:1.2px;
}
.brand-mark {
  width:44px;
  height:46px;
  background:var(--ink);
  border-radius:11px;
  display:grid;
  place-items:center;
}
.brand-mark svg {
  width:31px;
  fill:none;
  stroke:#ffffff;
  stroke-width:1.6;
}
.brand-sub {
  display:block;
  font-size:13px;
  letter-spacing:0;
  font-weight:450;
  color:var(--muted);
  margin-top:5px;
}
.header-label {
  font-size:14px;
  color:var(--muted);
  display:flex;
  gap:9px;
  align-items:center;
}
.tiny-map {
  font-size:25px;
  color:var(--ink);
}
main {
  max-width:1530px;
  margin:auto;
  padding:42px 5% 0;
}
.page-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:29px;
}
.eyebrow {
  font-size:11px!important;
  letter-spacing:2px;
  font-weight:700;
  color:#526f82!important;
  margin:0 0 9px!important;
}
h1 {
  font-size:44px;
  letter-spacing:-1.8px;
  margin:0;
  font-weight:650;
  line-height:1.15;
}
h1>.title-dot {
  color:#0085be;
}
.page-heading p {
  font-size:15px;
  color:var(--muted);
  margin:11px 0 0;
}
.coverage {
  font-size:13px;
  color:var(--muted);
  padding-bottom:3px;
}
.workspace {
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.journey-panel {
  background:#fff;
  border:1px solid var(--border);
  border-radius:17px;
  padding:26px;
  box-shadow:0 6px 20px #16323703;
}
.field-title,legend {
  font-size:16px;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  letter-spacing:-.2px;
}
.step-number {
  font-size:11px;
  letter-spacing:.4px;
  color:#006b99;
  background:#edf6fb;
  border-radius:5px;
  width:26px;
  height:26px;
  display:inline-grid;
  place-items:center;
  flex:none;
}
.search-wrap {
  position:relative;
}
.search-wrap input {
  width:100%;
  height:54px;
  border:1px solid #cdd8d9;
  background:#fff;
  border-radius:9px;
  padding:0 38px 0 42px;
  font-size:16px;
  color:var(--ink);
}
.search-wrap input::placeholder {
  color:#839094;
  font-size:14px;
}
.search-wrap input:focus {
  outline:2px solid var(--ksu-blue);
  outline-offset:0;
}
.search-icon {
  position:absolute;
  left:13px;
  top:17px;
  color:#6b7e81;
}
.search-icon svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
}
.clear-search {
  position:absolute;
  right:2px;
  top:4px;
  width:36px;
  background:none;
  border:0;
  font-size:24px;
  color:var(--muted);
}
.field-hint {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 23px;
  line-height:1.5;
}
.suggestions {
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:6;
  border:1px solid var(--border);
  border-radius:10px;
  background:white;
  box-shadow:0 10px 30px #17303622;
  max-height:310px;
  overflow:auto;
}
.suggestions ul {
  list-style:none;
  padding:5px;
  margin:0;
}
.suggestions li {
  padding:10px 11px;
  border-radius:6px;
  cursor:pointer;
  min-height:56px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.suggestions li:hover,.suggestions li[aria-selected=true] {
  background:#e7f4fa;
}
.suggestions li strong {
  font-size:15px;
}
.suggestions li small {
  font-size:12px;
  color:var(--muted);
}
.suggestions p {
  padding:10px 15px;
  font-size:14px;
  color:var(--muted);
}
.selected-room {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:#edf6fb;
  border-radius:9px;
  margin-bottom:23px;
}
.selected-room strong {
  font-size:16px;
  display:block;
}
.selected-room span#selected-detail {
  display:block;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  margin-top:3px;
}
.room-symbol {
  font-size:28px;
  color:#006b99;
}
.selected-check {
  margin-left:auto;
  color:#006b99;
}
.entrances {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
}
.entrance {
  position:relative;
  border:1px solid var(--border);
  border-radius:9px;
  padding:15px 11px 12px;
  cursor:pointer;
  min-height:96px;
  display:flex;
  justify-content:space-between;
  align-items:start;
}
.entrance input {
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.entrance:has(input:checked) {
  border-color:var(--ink);
  background:#edf6fb;
  box-shadow:inset 0 0 0 .5px var(--ink);
}
.entrance:has(input:focus-visible) {
  outline:3px solid #0085be;
  outline-offset:3px;
}
.entrance strong {
  font-size:13px;
  display:block;
  margin:20px 0 6px;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.5;
}
.entrance > span { min-width:0; }
.entrance small {
  font-size:12px;
  color:var(--muted);
}
.entrance i {
  position:absolute;
  top:12px;
  left:12px;
  width:14px;
  height:14px;
  border:1.5px solid #aab8ba;
  border-radius:50%;
}
.entrance:has(input:checked) i {
  border:4px solid var(--ink);
  background:#fff;
}
fieldset {
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}
legend {
  padding:0;
  width:100%;
}
.primary {
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:#fff;
  border:0;
  border-radius:9px;
  font-size:15px;
  font-weight:600;
  padding:16px;
  margin-top:22px;
  min-height:54px;
  transition:background .15s;
}
.primary:hover:not(:disabled) {
  background:#00577e;
}
.primary svg {
  color:#ffffff;
}
.form-status {
  font-size:13px;
  line-height:1.5;
  color:#ad2837;
  margin:10px 0 0;
}
.form-status:empty {
  display:none;
}
.intro-note {
  border-top:1px solid var(--border);
  margin-top:27px;
  padding-top:24px;
  display:flex;
  gap:12px;
}
.intro-note>span {
  font-size:25px;
  color:#75817f;
}
.intro-note strong {
  font-size:13px;
  font-weight:600;
}
.intro-note p {
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
  margin:6px 0 0;
}
.map-panel {
  border:1px solid var(--border);
  border-radius:17px;
  overflow:hidden;
  background:white;
  box-shadow:0 6px 20px #16323703;
  min-width:0;
}
.map-heading {
  padding:22px 25px 17px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.section-kicker {
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:700;
  color:#778489;
}
.map-heading h2 {
  font-size:20px;
  letter-spacing:-.4px;
  margin:7px 0 0;
  font-weight:600;
}
.floor-badge {
  font-size:12px;
  background:#f0f4f4;
  color:#516568;
  padding:8px 11px;
  border:1px solid #e5ebeb;
  border-radius:6px;
}
.floor-view {
  padding:14px;
  margin:0 20px 16px;
  border:1px solid #bdd9e7;
  border-radius:10px;
  background:#edf6fb;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  min-height:60px;
  font-size:14px;
  color:var(--muted);
}
.floor-view label {
  display:flex;
  flex:1 1 280px;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  color:var(--ink);
  font-weight:650;
}
.floor-view select {
  background:white;
  border:2px solid var(--ink);
  color:var(--ink);
  border-radius:7px;
  padding:10px 12px;
  font:inherit;
  font-weight:600;
  min-height:48px;
  font-size:16px;
  flex:1 1 150px;
  min-width:0;
  max-width:100%;
}
.floor-view select:disabled { opacity:1; color:var(--ink); -webkit-text-fill-color:var(--ink); cursor:default; }
.floor-view.cross-floor { border-inline-start:4px solid var(--ksu-blue); }
.floor-view.guiding select { background:var(--ink); color:white; -webkit-text-fill-color:white; }
.floor-guidance { flex-basis:100%; font-size:12px; line-height:1.5; }
#playback-progress { color:var(--ink); font-size:13px; font-weight:600; }
.floor-view select:focus-visible {
  outline:3px solid #0085be;
  outline-offset:3px;
}
.map-viewport {
  height:480px;
  position:relative;
  overflow:hidden;
  background:#fff;
  border-top:1px solid #eef1f2;
  touch-action:none;
  cursor:grab;
  isolation:isolate;
}
.map-viewport:active {
  cursor:grabbing;
}
#map-content {
  position:absolute;
  inset:0;
}
#map-content>svg {
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
}
.map-loading {
  position:absolute;
  inset:40% 0 auto;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  pointer-events:none;
}
.map-controls {
  position:absolute;
  right:16px;
  top:16px;
  display:flex;
  flex-direction:column;
  padding:4px;
  border:1px solid var(--border);
  background:#ffffffed;
  box-shadow:0 2px 8px #122b3410;
  border-radius:9px;
  cursor:default;
}
.map-controls button {
  display:grid;
  place-items:center;
  width:40px;
  min-height:42px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--ink);
  font-size:24px;
}
.map-controls button:hover {
  background:#e7f4fa;
}
.map-controls span {
  height:1px;
  background:var(--border);
  margin:3px 5px;
}
.map-caption {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  padding:9px 15px;
  border:1px solid var(--border);
  border-radius:30px;
  font-size:12px;
  color:#586c6f;
  background:#ffffffee;
  pointer-events:none;
  box-shadow:0 2px 8px #102a2e06;
}
.map-footer {
  padding:15px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--muted);
}
.legend {
  display:flex;
  gap:17px;
  flex-wrap:wrap;
}
.legend>span {
  display:flex;
  gap:7px;
  align-items:center;
}
.route-key {
  width:22px;
  height:3px;
  background:var(--red);
  border-radius:3px;
}
.door-key {
  width:8px;
  height:8px;
  background:var(--red);
  border:2px solid white;
  box-shadow:0 0 0 1px var(--red);
  border-radius:50%;
}
.gesture-hint {
  font-size:11px;
}
.site-footer {
  padding:25px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:#809093;
}
.footer-divider {
  padding:0 10px;
  color:#bec7c8;
}
.developer-credit {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:6px;
  padding-top:14px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:12px;
  line-height:1.6;
  text-align:center;
}
.developer-credit strong { font-weight:600; white-space:nowrap; }
.developer-linkedin {
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:44px;
  min-height:44px;
  border-radius:6px;
}
.developer-linkedin:hover { background:#e9eff0; }
.developer-linkedin img { display:block; width:26px; height:auto; }
.journey {
  margin-top:25px;
  border-top:1px solid var(--border);
  padding-top:24px;
}
.journey h2 {
  font-size:20px;
  margin:9px 0 19px;
  letter-spacing:-.5px;
}
.journey ol {
  list-style:none;
  padding:0;
  margin:0;
}
.journey li {
  position:relative;
  padding:0 0 21px 25px;
  font-size:13px;
  line-height:1.5;
}
.journey li:before {
  content:'';
  width:7px;
  height:7px;
  position:absolute;
  left:0;
  top:6px;
  border:2px solid #8b9c96;
  background:white;
  border-radius:50%;
  z-index:1;
}
.journey li:not(:last-child):after {
  content:'';
  position:absolute;
  left:5px;
  top:14px;
  bottom:0;
  border-left:1px solid #d9e1df;
}
.journey li:last-child:before {
  border-color:var(--red);
  background:var(--red);
}
.journey li strong {
  display:block;
  font-weight:600;
}
.journey li span {
  color:var(--muted);
  font-size:12px;
  display:block;
  margin-top:3px;
}
.step-banner {
  display:flex;
  align-items:center;
  gap:12px;
  background:#edf6fb;
  padding:13px 22px;
  border-top:1px solid #d5e8f2;
}
.step-banner>span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:13px;
  flex:none;
}
.step-banner strong {
  font-size:13px;
}
.step-banner p {
  font-size:12px;
  color:#526f82;
  margin:4px 0 0;
  line-height:1.4;
}
.route-actions {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 20px;
  border-top:1px solid var(--border);
}
.route-actions button {
  background:none;
  border:1px solid #d4dedd;
  border-radius:7px;
  padding:10px 15px;
  font-size:13px;
  color:var(--ink);
  font-weight:600;
}
.video-empty {
  font-size:12px;
  color:var(--muted);
  margin:3px 0 0;
}
.video-details {
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.video-details summary {
  cursor:pointer;
  padding:16px 18px;
  font-size:16px;
  font-weight:600;
  min-height:56px;
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--ink);
  color:white;
  transition:background .15s;
}
.video-details summary::-webkit-details-marker { display:none; }
.video-details summary svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; flex:none; }
.video-details summary svg path { fill:currentColor; stroke:none; }
.video-details summary:hover { background:#00577e; }
.video-details summary:active { background:#00486a; }
.video-details summary:focus-visible { outline:3px solid var(--ksu-blue); outline-offset:3px; }
.video-details:has(summary:focus-visible) { outline:3px solid var(--ksu-blue); outline-offset:3px; }
.video-details[open] { box-shadow:0 3px 14px #006b9914; border-color:var(--ink); }
.video-details[open] summary { background:#00577e; }
.video-chevron { margin-inline-start:auto; width:9px; height:9px; border-right:2px solid; border-bottom:2px solid; transform:rotate(45deg); }
.video-details[open] .video-chevron { transform:rotate(225deg); }
.video-details video {
  display:block;
  width:100%;
  background:#122528;
}
.video-details p {
  font-size:12px;
  padding:0 12px;
  color:var(--muted);
}
.route-line {
  fill:none;
  stroke:var(--red);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.route-marker {
  pointer-events:none;
}
.destination-highlight {
  fill:#ffdfe5!important;
}
.route-marker text {
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:12px;
  font-weight:600;
}
.route-marker rect {
  fill:white;
  stroke:#d5dedd;
  stroke-width:1;
}
.route-marker .pin-dot {
  stroke:white;
  stroke-width:2;
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
  }
}
@media(min-width:1500px) {
  .map-viewport {
    height:560px;
  }
}
@media(max-width:1100px) {
  .workspace {
    grid-template-columns:305px minmax(0,1fr);
    gap:18px;
  }
  .journey-panel {
    padding:22px;
  }
  .coverage {
    display:none;
  }
  .gesture-hint {
    display:none;
  }
  .map-viewport {
    height:465px;
  }
  .entrance {
    padding-left:9px;
    padding-right:8px;
  }
  .entrance strong {
    font-size:12px;
  }
}
@media(max-width:760px) {
  .site-header {
    height:73px;
    padding:0 20px;
  }
  .brand {
    font-size:10px;
    letter-spacing:.8px;
    gap:10px;
  }
  .brand-mark {
    width:37px;
    height:40px;
  }
  .brand-sub {
    font-size:12px;
  }
  .header-label {
    display:none;
  }
  main {
    padding:25px 18px 0;
  }
  .page-heading {
    margin-bottom:22px;
  }
  h1 {
    font-size:35px;
  }
  .eyebrow {
    font-size:10px!important;
    letter-spacing:1.5px;
  }
  .page-heading p {
    font-size:14px;
    line-height:1.5;
    max-width:290px;
  }
  .workspace {
    display:flex;
    flex-direction:column;
    gap:19px;
  }
  .journey-panel {
    padding:21px;
    width:100%;
    border-radius:13px;
  }
  .field-title,legend {
    font-size:15px;
    margin-bottom:13px;
  }
  .entrance {
    min-height:85px;
    padding:13px;
  }
  .entrance strong {
    font-size:14px;
    margin-top:16px;
  }
  .entrance small {
    font-size:12px;
  }
  .entrance i {
    left:auto;
    right:12px;
    top:12px;
  }
  .field-hint {
    margin-bottom:21px;
  }
  .primary {
    margin-top:19px;
  }
  .intro-note {
    margin-top:20px;
    padding-top:18px;
  }
  .intro-note p {
    font-size:12px;
    line-height:1.6;
  }
  .map-panel {
    width:100%;
    border-radius:13px;
    scroll-margin-top:15px;
  }
  .map-heading {
    padding:19px 19px 14px;
  }
  .floor-view {
    padding:0 19px 15px;
  }
  .map-viewport {
    height:470px;
  }
  .map-footer {
    padding:14px 17px;
  }
  .map-controls {
    right:11px;
    top:12px;
  }
  .map-caption {
    font-size:11px;
    padding:8px 12px;
    max-width:calc(100% - 20px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .site-footer {
    font-size:10px;
    line-height:1.7;
    flex-direction:column;
    gap:4px;
    padding:23px 2px;
  }
  .step-banner {
    padding:13px 17px;
  }
  .journey {
    padding-top:19px;
    margin-top:22px;
  }
  .journey li {
    padding-bottom:17px;
  }
  .route-actions {
    padding:12px;
    gap:7px;
  }
  .route-actions button {
    font-size:12px;
    padding:10px;
  }
  .selected-room {
    margin-bottom:22px;
  }
}
@media(max-width:360px) {
  main {
    padding-left:12px;
    padding-right:12px;
  }
  .journey-panel {
    padding:17px;
  }
  .brand {
    font-size:9px;
  }
  .entrance strong {
    font-size:13px;
  }
  .legend {
    gap:12px;
  }
}
/* Keep the skip link truly clipped while inactive, including in long mobile pages. */
.skip {
  top:8px;
  left:8px;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus {
  top:8px;
  width:auto;
  height:auto;
  padding:14px;
  clip-path:none;
}
.map-controls button {
  width:44px;
  min-height:44px;
}

/* Language direction changes the interface, never the map's coordinate system. */
.header-tools, .language-switch {
  display:flex;
  align-items:center;
  gap:18px;
}
.language-switch {
  gap:3px;
  flex-shrink:0;
  font-size:14px;
}
.language-switch button {
  background:transparent;
  color:var(--muted);
  border:0;
  padding:8px;
  border-radius:6px;
}
.language-switch button[aria-pressed="true"] {
  color:var(--ink);
  background:#e7f4fa;
  font-weight:700;
}
#map-content, #map-content > svg, .map-viewport {
  direction:ltr;
}
#selected-label, #room-options strong {
  unicode-bidi:isolate;
}
#room-search {
  unicode-bidi:plaintext;
}
[dir="rtl"] body {
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  line-height:1.6;
}
[dir="rtl"] .brand, [dir="rtl"] .eyebrow, [dir="rtl"] .section-kicker,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .field-title, [dir="rtl"] legend {
  letter-spacing:normal;
}
[dir="rtl"] .brand { font-size:14px; }
[dir="rtl"] .search-icon { left:auto; right:13px; }
[dir="rtl"] .clear-search { right:auto; left:2px; }
[dir="rtl"] .search-wrap input { padding-left:38px; padding-right:42px; }
[dir="rtl"] .selected-check { margin-left:0; margin-right:auto; }
[dir="rtl"] .entrance i { left:auto; right:12px; }
[dir="rtl"] .journey li { padding-left:0; padding-right:25px; }
[dir="rtl"] .journey li:before { left:auto; right:0; }
[dir="rtl"] .journey li:not(:last-child):after {
  left:auto; right:5px; border-left:0; border-right:1px solid #d9e1df;
}
[dir="rtl"] .map-caption, [dir="rtl"] .map-loading { direction:rtl; }
@media(max-width:760px) {
  .site-header { height:auto; min-height:88px; gap:8px; padding:12px 18px; flex-wrap:wrap; }
  .brand { flex:1; min-width:185px; }
  .header-tools { margin-inline-start:auto; }
  .language-switch { font-size:13px; }
  [dir="rtl"] .entrance i { right:auto; left:12px; }
  [dir="rtl"] h1 { font-size:32px; line-height:1.5; }
}

/* University identity and responsive guidance layout. The architectural SVG
   retains its original colors and coordinate system. */
.site-header { height:auto; min-height:104px; padding-block:16px; gap:20px; }
.brand { letter-spacing:.5px; gap:18px; min-width:0; }
.university-logo { display:block; width:181px; height:auto; flex:none; }
.brand-mark { display:none; }
.workspace { grid-template-rows:auto 1fr; column-gap:24px; row-gap:20px; }
.journey-panel { grid-column:1; grid-row:1; }
.map-panel { grid-column:2; grid-row:1 / span 2; }
.journey { grid-column:1; grid-row:2; margin:0; padding:24px; border:1px solid var(--border); border-radius:17px; background:white; min-width:0; width:100%; }
.journey h2, .selected-room strong { overflow-wrap:anywhere; }
.floor-badge { background:#edf6fb; border-color:#d5e8f2; color:var(--ink); flex:none; }
.map-heading { gap:12px; }
.map-viewport { height:560px; }
.map-controls { top:auto; bottom:16px; flex-direction:row; }
.map-controls span { width:1px; height:auto; margin:5px 3px; }
.map-caption { top:12px; bottom:auto; max-width:calc(100% - 24px); white-space:normal; text-align:center; }
.gesture-hint { max-width:170px; text-align:end; }
.step-banner strong { overflow-wrap:anywhere; }
.route-actions button:hover { background:#edf6fb; border-color:var(--ink); }
.route-actions button:active { background:#d5e8f2; }
.primary:active:not(:disabled) { background:#00486a; }
.clear-search { width:44px; }
.search-wrap input { padding-right:46px; }
[dir="rtl"] .search-wrap input { padding-left:46px; }
@media(max-width:1100px) { .header-label { display:none; } }
@media(max-width:760px) {
  .site-header { padding:14px 16px 8px; gap:4px 12px; }
  .brand { flex:1 1 100%; gap:14px; font-size:11px; letter-spacing:0; }
  .university-logo { width:145px; }
  .brand-sub { font-size:12px; }
  [dir="rtl"] .brand { font-size:13px; }
  .header-tools { margin-inline-start:auto; }
  .language-switch button { min-width:60px; }
  main { padding:20px 12px 0; }
  .page-heading { margin-bottom:18px; }
  .page-heading p { max-width:none; }
  h1 { font-size:32px; }
  .eyebrow { display:none; }
  .workspace { display:flex; gap:16px; }
  .journey-panel { padding:18px; }
  .intro-note { display:none; }
  .field-hint { margin-bottom:16px; }
  .field-title,legend { margin-bottom:10px; }
  .entrance { padding:12px; min-height:100px; }
  .entrance strong { font-size:13px; }
  .selected-room { margin-bottom:16px; }
  .primary { margin-top:16px; }
  .journey { padding:20px; border-radius:13px; }
  .map-panel { width:calc(100% + 12px); margin-inline:-6px; }
  .map-heading { padding:16px 14px 12px; }
  .floor-view { padding:12px; margin:0 12px 12px; min-height:50px; gap:8px; }
  .floor-view label { gap:8px; }
  .map-viewport { height:clamp(460px,65svh,640px); }
  .map-controls { bottom:12px; right:12px; top:auto; }
  .map-caption { font-size:11px; }
  .map-footer { flex-wrap:wrap; padding:12px 14px; gap:9px; }
  .gesture-hint { display:block; max-width:none; text-align:start; }
  .step-banner { padding:12px 14px; }
}
@media(max-width:360px) {
  .site-header { padding-inline:12px; }
  .university-logo { width:126px; }
  .brand { gap:10px; font-size:10px; }
  [dir="rtl"] .brand { font-size:12px; }
  .journey-panel { padding:14px; }
  .entrance { padding:10px; }
}

/* Interface finish: all selectors below target the UI surrounding the map.
   SVG geometry, route drawing and floor-transition effects are unchanged. */
:root {
  --ink:#006b99;
  --heading:#16364d;
  --muted:#596f80;
  --border:#dde7ee;
  --card-radius:24px;
  --card-shadow:0 8px 24px #12456c12,0 24px 60px #12456c1c;
  background:#f8fbfe;
  color:#263d4d;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}
body {
  min-height:100vh;
  /* Two localized glows retain depth as the base fades toward white. */
  background:
    radial-gradient(ellipse 74% 400px at 65% 100px,#a8daf5a8,transparent 80%),
    radial-gradient(ellipse 560px 640px at 12% 530px,#b5def4b3,transparent 82%),
    linear-gradient(180deg,#eaf5fd 0,#f2f8fd 650px,#fbfdff 1200px,#f8fbfe 100%);
}
/* Reserve the top inset in normal flow, without collapsing a margin
   outside the body and hiding the blue background above the card. */
.site-header {
  position:relative;
  top:20px;
  width:90%;
  max-width:1376px;
  height:auto;
  min-height:82px;
  margin:0 auto 20px;
  padding:14px 24px;
  gap:24px;
  background:#fff;
  border:1px solid #dfedf7;
  border-radius:22px;
  box-shadow:0 6px 18px #12456c0c,0 16px 36px #12456c17;
  overflow:visible;
}
.brand { gap:20px; font-size:14px; font-weight:650; letter-spacing:0; color:var(--heading); }
.brand-sub { font-size:13px; font-weight:450; margin-top:6px; }
.university-logo { width:156px; }
.language-switch { padding:3px; gap:2px; background:#f1f6fa; border:1px solid #e2ebf1; border-radius:12px; }
.language-switch>span { display:none; }
.language-switch button { min-height:44px; padding:8px 13px; font-size:13px; border-radius:8px; transition:background .18s,color .18s,box-shadow .18s; }
.language-switch button[aria-pressed="true"] { background:#fff; color:var(--ink); box-shadow:0 2px 6px #16364d10; }
.language-switch button:hover { color:var(--ink); background:#fff; }
main { padding-top:28px; }
.page-heading { margin-bottom:26px; gap:20px; }
.eyebrow { color:var(--ink)!important; letter-spacing:1.5px; font-size:11px!important; margin-bottom:12px!important; }
h1 { color:var(--heading); font-size:clamp(32px,3.3vw,46px); font-weight:700; letter-spacing:-1.5px; line-height:1.18; display:flex; align-items:center; gap:14px; }
.heading-pin { width:30px; height:36px; flex:none; fill:none; stroke:var(--ksu-blue); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 3px 5px #0085be1a); }
.heading-copy { min-width:0; }
h1 .title-dot { color:var(--ksu-blue); }
.page-heading p { font-size:15px; line-height:1.6; margin-top:12px; }
.coverage { padding:9px 13px; background:#ffffffb3; border:1px solid #dbe8f0; border-radius:24px; font-size:12px; white-space:nowrap; }
.workspace { gap:24px 28px; }
.journey-panel,.map-panel,.journey { border:1px solid #e2edf6; border-radius:var(--card-radius); background:#fff; box-shadow:var(--card-shadow); }
.journey-panel { padding:28px 24px; overflow:visible; box-shadow:0 8px 24px #12456c17,0 24px 60px #12456c29,0 1px 2px #12456c08; }
.field-title,legend { color:var(--heading); font-size:15px; font-weight:650; gap:9px; margin-bottom:14px; letter-spacing:0; }
.step-number { width:28px; height:28px; border-radius:9px; font-size:11px; background:#eaf4fa; color:var(--ink); }
.search-wrap input { background:#f8fbfe; border-color:#cadfea; border-radius:16px; height:58px; box-shadow:inset 0 1px 2px #16364d04; transition:border-color .18s,background .18s,box-shadow .18s; }
.search-wrap input::placeholder { color:#62798a; }
.search-wrap input:focus { background:#fff; border-color:var(--ksu-blue); outline:0; box-shadow:0 0 0 4px #0085be1c,0 4px 12px #0085be0a; }
.search-icon { color:var(--ink); }
.search-icon svg { stroke-width:1.9; }
.field-hint { font-size:12px; line-height:1.6; margin-top:9px; margin-bottom:20px; }
.suggestions { border-color:#d3e3ed; border-radius:13px; box-shadow:0 12px 30px #16364d16; }
.suggestions ul { padding:6px; }
.suggestions li { padding:12px; border-radius:9px; gap:5px; transition:background .16s; }
.suggestions li strong { font-weight:650; color:var(--heading); line-height:1.5; }
.suggestions li:hover,.suggestions li[aria-selected="true"] { background:#eaf5fb; }
.selected-room { background:#f0f8fe; border:1px solid #d7eaf6; border-inline-start:3px solid var(--ksu-blue); border-radius:14px; padding:12px; margin-bottom:18px; }
.selected-room strong { color:var(--heading); }
.selected-check { font-size:17px; }
.entrances { gap:12px; }
.entrance { min-height:120px; background:#f8fafc; border:1px solid #d8e3ec; border-radius:16px; padding:14px 12px 12px; transition:background .18s,border-color .18s,box-shadow .18s; }
.entrance:hover { background:#f4f9fc; border-color:#9bc7dd; }
.entrance:has(input:checked) { background:linear-gradient(145deg,#eef8ff,#e2f2fc); border-color:#0085be; box-shadow:0 0 0 1px #0085be18,0 5px 12px #006b9910; }
.entrance strong { color:var(--heading); font-weight:650; font-size:13px; line-height:1.55; margin-top:19px; overflow-wrap:normal; }
.entrance small { font-size:12px; }
.entrance i { width:16px; height:16px; top:12px; inset-inline-start:12px; inset-inline-end:auto; }
.entrance:has(input:checked) i { border-color:var(--ink); }
.primary { min-height:58px; margin-top:22px; border-radius:16px; background:linear-gradient(125deg,#007caf,#006b99); box-shadow:0 8px 18px #006b9933,inset 0 1px 0 #ffffff26; font-size:16px; font-weight:650; transition:background .18s,box-shadow .18s,transform .18s; }
.primary:hover:not(:disabled) { background:#00618c; box-shadow:0 10px 22px #006b9940; }
.primary:active:not(:disabled) { transform:translateY(1px); box-shadow:0 2px 5px #006b991a; }
.primary:disabled { opacity:1; color:#536d80; background:#e2edf5; box-shadow:none; }
.primary:disabled svg { color:inherit; }
.intro-note { margin-top:22px; padding-top:20px; }
.intro-note p { font-size:13px; }
.map-panel { box-shadow:var(--card-shadow); }
.map-heading { padding:22px 24px 18px; }
.section-kicker { color:#536f82; font-size:11px; letter-spacing:1.2px; }
.map-heading h2 { color:var(--heading); font-size:21px; margin-top:5px; }
.floor-badge { border:0; padding:9px 12px; border-radius:9px; font-size:12px; font-weight:600; }
.floor-view { border-color:#d8eaf4; background:#f3f9fd; border-radius:13px; padding:12px 14px; gap:9px 14px; }
.floor-view label { font-size:13px; gap:10px; }
.floor-view select { border:1px solid #8dbdd5; border-radius:9px; background:#fff; min-height:48px; padding:11px 12px; font-size:15px; box-shadow:0 1px 3px #16486907; transition:border-color .18s,box-shadow .18s; }
.floor-view select:enabled:hover { border-color:var(--ink); }
.floor-view.cross-floor { border-inline-start-width:3px; }
.floor-view.guiding select { border-color:var(--ink); }
.floor-guidance { font-size:12px; }
#playback-progress { font-size:12px; }
.step-banner { background:#edf7fc; border-top:1px solid #e0eef6; padding:14px 22px; }
.step-banner>span { width:32px; height:32px; font-weight:600; }
.step-banner strong { font-size:14px; line-height:1.5; color:var(--heading); }
.step-banner p { font-size:12px; color:var(--muted); line-height:1.6; }
.map-controls { border-color:#dce7ee; border-radius:12px; background:#fffffffa; box-shadow:0 4px 14px #16364d10; }
.map-controls button { border-radius:8px; transition:background .16s,color .16s; }
.map-controls button:active { background:#d9edf8; }
.map-caption { border-color:#e0e8ef; box-shadow:0 2px 10px #16364d06; padding:9px 14px; font-size:12px; color:#526c7e; }
.map-footer { padding:14px 20px; font-size:12px; border-color:#e7eef3; }
.gesture-hint { font-size:12px; line-height:1.5; max-width:185px; }
.legend { gap:14px; }
.route-actions { border-color:#e7eef3; padding:12px 20px; }
.route-actions button { border-color:#d8e5ee; background:#f8fbfd; border-radius:10px; padding:11px 16px; font-size:13px; min-height:46px; transition:background .18s,border-color .18s; }
.journey { padding:20px 24px; }
.journey>.section-kicker { font-size:14px; font-weight:650; letter-spacing:0; color:var(--ink); }
.journey h2 { font-size:19px; line-height:1.5; color:var(--heading); margin:7px 0 16px; letter-spacing:-.3px; }
.journey ol { counter-reset:route-step; }
.journey li { counter-increment:route-step; padding:0 0 16px 36px; min-height:42px; font-size:13px; line-height:1.6; }
.journey li:before { content:counter(route-step); display:grid; place-items:center; width:24px; height:24px; top:0; left:0; border:1px solid #c9e2f0; background:#edf7fc; color:var(--ink); font-size:11px; font-weight:650; }
.journey li:not(:last-child):after { left:12px; top:26px; border-color:#dce9f1; }
.journey li:last-child:before { border-color:var(--red); background:#fff4f6; color:var(--heading); }
.journey li span { font-size:12px; line-height:1.6; margin-top:4px; }
.video-details { border-radius:12px; border-color:#d8e7f0; background:#f9fcfe; }
.video-details summary { min-height:56px; padding:15px 16px; font-size:15px; gap:10px; line-height:1.5; background:linear-gradient(135deg,#007aad,#006b99); transition:background .18s,box-shadow .18s; }
.video-details summary svg { width:25px; height:25px; }
.video-details summary>span:not(.video-chevron) { flex:1; }
.video-chevron { flex:none; margin-inline-start:0; transition:transform .18s; }
.video-details[open] { box-shadow:none; border-color:#94bfd6; }
.video-details[open] summary { background:#00618c; }
.video-details p { font-size:12px; line-height:1.65; padding:0 14px; }
.video-empty { font-size:13px; }
.site-footer { color:#61788a; font-size:12px; padding-block:24px; }
.developer-credit { padding-top:16px; border-color:#dce8f0; font-size:12px; }
.developer-linkedin { transition:background .18s; }
.developer-linkedin:hover { background:#e5f1f8; }
.form-status { color:#70434b; }
[dir="rtl"] .brand { font-size:15px; }
[dir="rtl"] h1 { letter-spacing:0; line-height:1.45; }
[dir="rtl"] .journey li { padding:0 36px 16px 0; }
[dir="rtl"] .journey li:before { left:auto; right:0; }
[dir="rtl"] .journey li:not(:last-child):after { left:auto; right:12px; border-color:#dce9f1; }
[dir="rtl"] .entrance i { left:auto; right:12px; }
@media(max-width:1100px) and (min-width:761px) {
  main { padding-inline:3%; }
  .workspace { grid-template-columns:300px minmax(0,1fr); column-gap:18px; }
  .journey-panel,.journey { padding:20px; }
}
@media(max-width:760px) {
  :root { --card-radius:22px; }
  .site-header { top:16px; width:calc(100% - 32px); margin-bottom:16px; min-height:76px; padding:12px; gap:10px; border-radius:19px; flex-wrap:nowrap; align-items:center; }
  .brand { flex:1 1 auto; min-width:0; flex-direction:row; align-items:center; gap:8px; font-size:11px; font-weight:650; line-height:1.45; }
  .brand>span { min-width:0; }
  .brand-sub { font-size:11px; margin-top:2px; }
  .university-logo { width:96px; flex:none; }
  .header-tools { flex:none; margin:0; }
  .language-switch { padding:2px; border-radius:10px; }
  .language-switch button { padding:7px 6px; min-width:46px; font-size:11px; }
  main { padding:24px 16px 0; }
  .page-heading { margin-bottom:22px; }
  h1 { font-size:30px; letter-spacing:-1px; max-width:380px; gap:10px; }
  .heading-pin { width:25px; height:30px; }
  .page-heading p { font-size:14px; line-height:1.7; margin-top:9px; }
  .workspace { gap:24px; }
  .journey-panel { padding:22px 20px; }
  .field-title,legend { font-size:14px; margin-bottom:12px; }
  .field-hint { margin-bottom:16px; }
  .selected-room { margin-bottom:16px; }
  .entrance { min-height:112px; padding:13px 11px 12px; }
  .entrance strong { font-size:13px; }
  .primary { margin-top:20px; }
  .map-heading { padding:18px 16px 14px; }
  .map-heading h2 { font-size:20px; }
  .floor-view { margin:0 12px 14px; padding:12px; }
  .floor-view label { gap:8px; }
  .step-banner { padding:13px 15px; gap:10px; }
  .step-banner strong { font-size:13px; }
  .map-footer { padding:13px 15px; gap:10px; }
  .gesture-hint { max-width:none; }
  .map-caption { font-size:12px; }
  .route-actions { padding:12px 14px; }
  .journey { padding:20px; }
  .journey h2 { font-size:18px; margin-bottom:16px; }
  .site-footer { padding-inline:3px; font-size:11px; line-height:1.8; }
  [dir="rtl"] .brand { font-size:12px; }
  [dir="rtl"] h1 { font-size:29px; }
}
@media(max-width:360px) {
  .site-header { padding-inline:12px; }
  .university-logo { width:88px; }
  .brand { gap:8px; font-size:11px; }
  .language-switch { flex-direction:column; }
  .language-switch button { min-width:50px; width:100%; }
  .brand-sub { font-size:11px; }
  .journey-panel,.journey { padding:20px 16px; }
  .entrance { padding:13px 10px 11px; }
  [dir="rtl"] .brand { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .language-switch button,.search-wrap input,.suggestions li,.entrance,.primary,
  .floor-view select,.map-controls button,.route-actions button,.video-details summary,
  .video-chevron,.developer-linkedin { transition:none; }
}
/* Walking video actions: scoped to the map footer, without covering the map. */
.route-actions { justify-content:flex-start; align-items:stretch; }
.route-actions button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:48px; line-height:1.5; cursor:pointer; }
.route-actions button svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.route-actions .play-symbol { fill:currentColor; stroke:none; }
.route-actions #replay { background:transparent; border-color:#a9c8da; }
.route-actions #watch-video { color:#fff; background:var(--ksu-blue); border-color:var(--ksu-blue); }
.route-actions #watch-video:hover { background:#006b99; }
.route-actions #watch-video[aria-expanded="true"] { background:#005d86; }
.route-actions button:focus-visible { outline:3px solid #0085be; outline-offset:3px; }
.route-actions [hidden], .walking-video-panel[hidden] { display:none!important; }
.walking-video-panel { margin:0 14px 16px; border:1px solid #d8e7f0; border-radius:12px; overflow:hidden; background:#f9fcfe; scroll-margin-block:16px; }
.walking-video-panel video { display:block; width:100%; max-height:70vh; background:#122528; }
.walking-video-panel p { font-size:13px; color:var(--muted); padding:0 14px; line-height:1.65; }
@media (max-width:760px) {
  .route-actions button { flex:1 1 0; padding:10px 8px; font-size:13px; gap:6px; }
}