.live-clock {
        position: fixed;
        top: 18px;
        left: 24px;
        z-index: 1000;
        color: #fff;
        font-size: 2.6em;
        font-family: 'Segoe UI Mono', 'Menlo', 'Monaco', monospace;
        font-weight: bold;
        letter-spacing: 0.04em;
        text-shadow: 0 2px 8px #000a;
        user-select: none;
        pointer-events: none;
      }
      :root {
        --bg: #003976;
        --panel: #002855;
        --panel-2: #001f42;
        --text: #ffffff;
        --muted: #c0d4e8;
        --accent: #60a5fa;
        --hover: #004a9e;
        --border: #4a90c2;
        --subject-cs: #fbbf24;
        --subject-cs-strong: #f59e0b;
        --subject-eng: #34d399;
        --subject-eng-strong: #22c55e;
        --subject-games: #fb7185;
        --subject-games-strong: #e11d48;
      }

      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
          Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      }

      .app {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
      }

      .main-area {
        display: grid;
        grid-template-columns: 20% 1fr 22%;
        height: 100%;
        min-height: 0;
      }
      .main-area.hide-side-slideshow {
        grid-template-columns: 20% 1fr;
      }
      .main-area.hide-side-slideshow .slideshow-panel {
        display: none;
      }

      .schedule-panel {
        background: var(--panel-2);
        color: var(--text);
        border-right: 1px solid var(--border);
        overflow: hidden;
        min-width: 180px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        --schedule-accent: #ff6b35;
        --schedule-accent-border: #ff8a5c;
        --schedule-accent-glow: rgba(255, 138, 92, 0.35);
      }
      .schedule-allday {
        flex-shrink: 0;
        padding: 24px 12px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .schedule-events {
        flex: 1;
        overflow-y: auto;
        padding: 12px 12px 24px;
        min-height: 0;
      }
      .schedule-panel[data-category="Computer Science"] {
        --schedule-accent: var(--subject-cs-strong);
        --schedule-accent-border: var(--subject-cs);
        --schedule-accent-glow: rgba(251, 191, 36, 0.35);
      }
      .schedule-panel[data-category="Engineering"] {
        --schedule-accent: var(--subject-eng-strong);
        --schedule-accent-border: var(--subject-eng);
        --schedule-accent-glow: rgba(52, 211, 153, 0.35);
      }
      .schedule-panel[data-category="Games"] {
        --schedule-accent: var(--subject-games-strong);
        --schedule-accent-border: var(--subject-games);
        --schedule-accent-glow: rgba(251, 113, 133, 0.35);
      }
      .schedule-title {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 18px;
        color: var(--schedule-accent);
      }
      .timeline-event {
        margin-bottom: 18px;
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--panel);
        border-left: 4px solid var(--border);
        transition: background 0.2s, border-color 0.2s;
        opacity: 1;
        display: grid;
        gap: 8px;
        --event-accent: var(--schedule-accent-border);
        --event-accent-strong: var(--schedule-accent);
      }
      .timeline-event[data-category="Computer Science"] {
        --event-accent: var(--subject-cs);
        --event-accent-strong: var(--subject-cs-strong);
      }
      .timeline-event[data-category="Engineering"] {
        --event-accent: var(--subject-eng);
        --event-accent-strong: var(--subject-eng-strong);
      }
      .timeline-event[data-category="Games"] {
        --event-accent: var(--subject-games);
        --event-accent-strong: var(--subject-games-strong);
      }
      .timeline-event--all-day {
        border-left-style: dashed;
        opacity: 0.85;
      }
      .timeline-row--allday-header {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .timeline-allday-badge {
        font-size: 0.72em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--event-accent-strong);
        background: rgba(255,255,255,0.08);
        border: 1px solid var(--event-accent);
        border-radius: 999px;
        padding: 2px 10px;
        white-space: nowrap;
      }
      .timeline-event.with-portrait {
        padding-right: 12px;
      }
      .timeline-event.past {
        opacity: 0.5;
        filter: grayscale(0.7);
      }
      .timeline-event.next {
        background: var(--schedule-accent);
        color: #fff;
        border-color: var(--schedule-accent-border);
        font-weight: bold;
        box-shadow: 0 0 0 2px var(--schedule-accent-glow) inset;
        font-size: 1.08em;
      }
      .timeline-event.next[data-category="Computer Science"] {
        --schedule-accent: var(--subject-cs-strong);
        --schedule-accent-border: var(--subject-cs);
        --schedule-accent-glow: rgba(251, 191, 36, 0.35);
      }
      .timeline-event.next[data-category="Engineering"] {
        --schedule-accent: var(--subject-eng-strong);
        --schedule-accent-border: var(--subject-eng);
        --schedule-accent-glow: rgba(52, 211, 153, 0.35);
      }
      .timeline-event.next[data-category="Games"] {
        --schedule-accent: var(--subject-games-strong);
        --schedule-accent-border: var(--subject-games);
        --schedule-accent-glow: rgba(251, 113, 133, 0.35);
      }
      .timeline-event.next .timeline-location,
      .timeline-event.next .timeline-desc {
        color: #ffffff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      }
      .timeline-location {
        font-size: 0.95em;
        color: #ffd6d6;
        margin-bottom: 2px;
      }
      .timeline-time {
        font-size: 1.15em;
        font-weight: bold;
        margin-bottom: 0;
        letter-spacing: 0.02em;
      }
      .timeline-title {
        font-size: 1.05em;
        margin-bottom: 0;
        padding: 0;
        border-radius: 0;
        border-left: 0;
        background: none;
      }
      .timeline-duration {
        font-size: 0.8em;
        font-weight: 600;
        color: #b8cbe0;
        background: rgba(0, 0, 0, 0.15);
        padding: 2px 6px;
        border-radius: 999px;
      }
      .timeline-pill {
        font-size: 0.8em;
        font-weight: 700;
        color: #e6f0ff;
        background: rgba(0, 0, 0, 0.25);
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        text-transform: none;
        letter-spacing: 0.01em;
      }
      .timeline-pill--parents {
        background: rgba(0, 57, 118, 0.55);
        color: #c8deff;
        border-color: rgba(100, 160, 255, 0.4);
      }
      .timeline-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
      }
      .timeline-row--time {
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 4px 8px;
      }
      .timeline-sep {
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.16);
        margin: 2px 0 4px;
      }
      .timeline-row--split {
        display: grid;
        grid-template-columns: 66% 34%;
        gap: 10px;
        align-items: stretch;
        padding-bottom: 6px;
      }
      .timeline-row--split.full {
        grid-template-columns: 1fr;
      }
      .timeline-row--duration {
        justify-content: flex-end;
        gap: 8px;
      }
      .timeline-info {
        display: grid;
        gap: 6px;
        background: rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        padding: 8px 10px;
      }
      .timeline-portrait-col {
        display: grid;
        grid-template-rows: auto auto;
        gap: 4px;
        align-items: start;
        justify-items: center;
        min-height: 0;
        height: auto;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: 10px;
      }
      .timeline-row--split.full .timeline-portrait-col {
        display: none;
      }
      .timeline-portrait-col--empty {
        min-height: 0;
      }
      .timeline-portrait-col--multi {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
      }
      .timeline-presenter-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 100%;
      }
      .timeline-portrait-col--multi .timeline-portrait {
        max-width: 72%;
        aspect-ratio: 1 / 1;
      }
      .timeline-portrait-col--multi .timeline-presenter {
        font-size: 0.68em;
      }
      .timeline-portrait {
        width: 100%;
        max-width: 72%;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 18px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        background: rgba(0, 0, 0, 0.2);
      }
      .timeline-presenter {
        font-size: 0.78em;
        font-weight: 700;
        text-align: center;
        color: #f0f6ff;
        margin-top: 6px;
        margin-bottom: 2px;
        max-width: 100%;
        line-height: 1.15;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.25);
      }
      .timeline-desc {
        font-size: 0.9em;
        color: var(--muted);
        padding-right: 0;
        line-height: 1.25;
      }

      .dropin-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: 8px;
        padding: 6px 0 4px;
      }
      .dropin-grid-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
      }
      .dropin-grid-portrait {
        width: 100%;
        aspect-ratio: 4 / 5;
        border-radius: 10px;
        object-fit: cover;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        background: rgba(0, 0, 0, 0.2);
        touch-action: manipulation;
      }
      .dropin-portrait-preview {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        background: rgba(5, 18, 44, 0.9);
      }
      .dropin-portrait-preview > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .dropin-grid-name {
        font-size: 0.62em;
        text-align: center;
        color: var(--text);
        line-height: 1.2;
        font-weight: 600;
      }
      .dropin-subject-tag {
        font-size: 0.6em;
        color: var(--muted);
        text-align: center;
        font-style: italic;
      }
      .dropin-subject-tag[data-subject="Computer Science"] {
        color: var(--subject-cs);
      }
      .dropin-subject-tag[data-subject*="Engineering"] {
        color: var(--subject-eng);
      }
      .dropin-subject-tag[data-subject="Games"] {
        color: var(--subject-games);
      }

      .header {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 140px 12px 140px;
        border-bottom: 1px solid var(--border);
        background: rgba(0,0,0,0.15);
        min-height: 84px;
      }

      .tabs {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .tabs:not(.tabs-ready) .tab.active {
        border-color: var(--border);
        box-shadow: none;
        background: var(--panel);
        color: var(--text);
        transform: none;
      }

      .tab {
        padding: 14px 24px;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        background: var(--panel);
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        font-size: 16px;
        font-weight: 500;
      }
      .tab.subject {
        --subject-accent: var(--accent);
        --subject-accent-strong: #7bb6ff;
        --subject-accent-glow: rgba(96, 165, 250, 0.9);
        --subject-accent-ring: rgba(96, 165, 250, 0.55);
        border-color: #7bb6ff;
        background: linear-gradient(135deg, #0b2f66 0%, #0a3a6e 55%, #003976 100%);
        position: relative;
        overflow: hidden;
      }
      .tab.subject[data-category="Computer Science"] {
        --subject-accent: var(--subject-cs);
        --subject-accent-strong: var(--subject-cs-strong);
        --subject-accent-glow: rgba(251, 191, 36, 0.9);
        --subject-accent-ring: rgba(251, 191, 36, 0.55);
        border-color: var(--subject-cs-strong);
      }
      .tab.subject[data-category="Engineering"] {
        --subject-accent: var(--subject-eng);
        --subject-accent-strong: var(--subject-eng-strong);
        --subject-accent-glow: rgba(52, 211, 153, 0.9);
        --subject-accent-ring: rgba(52, 211, 153, 0.55);
        border-color: var(--subject-eng-strong);
      }
      .tab.subject[data-category="Games"] {
        --subject-accent: var(--subject-games);
        --subject-accent-strong: var(--subject-games-strong);
        --subject-accent-glow: rgba(251, 113, 133, 0.9);
        --subject-accent-ring: rgba(251, 113, 133, 0.55);
        border-color: var(--subject-games-strong);
      }
      .tab.subject::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 8px;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: radial-gradient(circle, var(--subject-accent) 0%, rgba(0,0,0,0) 70%);
        box-shadow: 0 0 8px var(--subject-accent-glow);
        opacity: 0.85;
      }
      .tab:hover { background: var(--hover); }
      .tab:not(.subject).active {
        border-color: #ff8a5c;
        box-shadow: 0 0 0 3px rgba(255, 138, 92, 0.55) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
        background: #ff6b35;
        color: #ffffff;
        transform: translateY(-1px);
      }
      .tab.subject.active {
        border-color: var(--subject-accent);
        background: var(--subject-accent-strong);
        box-shadow: 0 0 0 3px var(--subject-accent-ring) inset, 0 6px 16px rgba(0, 0, 0, 0.35);
        color: #ffffff;
        transform: translateY(-1px);
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        padding: 12px 16px;
        border-top: 1px solid var(--border);
        background: rgba(0,0,0,0.15);
        font-size: 13px;
        flex-wrap: wrap;
      }
      .print-menu {
        position: relative;
      }
      .print-menu summary {
        list-style: none;
        cursor: pointer;
        width: 26px;
        height: 22px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #a8d4ff;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.06);
        transition: background 0.2s ease, color 0.2s ease;
      }
      .print-menu summary::after {
        content: "\25BE";
        font-size: 0.9em;
        line-height: 1;
      }
      .print-menu summary:focus-visible {
        outline: 2px solid rgba(168, 212, 255, 0.7);
        outline-offset: 2px;
      }
      .print-menu summary::-webkit-details-marker {
        display: none;
      }
      .print-menu[open] summary {
        color: #d8ecff;
        background: rgba(168, 212, 255, 0.2);
      }
      .print-menu[open] summary::after {
        content: "\25B4";
      }
      .print-menu-links {
        position: absolute;
        bottom: 32px;
        left: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
        min-width: 240px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: rgba(7, 16, 24, 0.92);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
      }
      .footer a { color: #a8d4ff; text-decoration: none; }
      .footer a:hover { text-decoration: underline; }
      .footer .copyright { color: var(--muted); }
      .footer-ticker {
        display: none;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        min-width: 0;
      }
      .footer[data-ticker="Computer Science"] .footer-ticker--cs,
      .footer[data-ticker="Engineering"] .footer-ticker--eng,
      .footer[data-ticker="Games"] .footer-ticker--games {
        display: block;
      }
      .footer-ticker-text {
        display: inline-block;
        animation: ticker-scroll 30s linear infinite;
        color: var(--subject-cs);
        font-weight: 600;
      }
      .footer-ticker--eng .footer-ticker-text {
        color: var(--subject-eng);
      }
      .footer-ticker--games .footer-ticker-text {
        color: var(--subject-games);
      }
      @keyframes ticker-scroll {
        from { transform: translateX(100vw); }
        to { transform: translateX(-100%); }
      }

      .content {
        padding: 24px;
        overflow: auto;
        display: grid;
        grid-template-columns: repeat(auto-fill, 400px);
        gap: 16px;
        align-content: start;
        justify-content: center;
        background: #e8f1f8;
        --section-accent: var(--accent);
        --section-accent-soft: rgba(96, 165, 250, 0.18);
      }
      .content[data-category="Computer Science"] {
        --section-accent: var(--subject-cs-strong);
        --section-accent-soft: rgba(251, 191, 36, 0.22);
      }
      .content[data-category="Engineering"] {
        --section-accent: var(--subject-eng-strong);
        --section-accent-soft: rgba(52, 211, 153, 0.22);
      }
      .content[data-category="Games"] {
        --section-accent: var(--subject-games-strong);
        --section-accent-soft: rgba(251, 113, 133, 0.22);
      }
      .subject-group {
        display: contents;
      }
      .subject-group[data-category="Computer Science"] {
        --section-accent: var(--subject-cs-strong);
        --section-accent-soft: rgba(251, 191, 36, 0.22);
      }
      .subject-group[data-category="Engineering"] {
        --section-accent: var(--subject-eng-strong);
        --section-accent-soft: rgba(52, 211, 153, 0.22);
      }
      .subject-group[data-category="Games"] {
        --section-accent: var(--subject-games-strong);
        --section-accent-soft: rgba(251, 113, 133, 0.22);
      }
      .content.slideshow-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
        justify-content: stretch;
        overflow: hidden;
      }
      .content.video-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
        justify-content: stretch;
      }
      .video-jumplist {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-bottom: 8px;
        align-items: center;
      }
      .video-jumplist-label {
        color: var(--section-accent);
        font-weight: 700;
        margin-right: 6px;
      }
      .video-jump {
        border: 1px solid var(--section-accent);
        background: var(--panel);
        color: var(--text);
        border-radius: 8px;
        padding: 6px 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s ease;
      }
      .video-jump:hover {
        background: var(--section-accent);
        border-color: var(--section-accent);
        color: #ffffff;
      }
      .video-jump-top {
        border: 1px solid var(--section-accent);
        background: var(--panel);
        color: var(--text);
        border-radius: 8px;
        padding: 6px 10px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .video-jump-top:hover {
        background: var(--section-accent);
        border-color: var(--section-accent);
        color: #ffffff;
      }
      .video-jump-top .icon {
        display: inline-flex;
        font-size: 14px;
      }
      .video-section-top {
        grid-column: 1 / -1;
        display: flex;
        justify-content: flex-end;
      }
      .content.map-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
        justify-content: stretch;
        overflow: hidden;
      }
      .content.activities-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
        justify-content: stretch;
        overflow: auto;
      }
      .content.news-mode {
        grid-template-columns: 1fr;
        align-content: start;
        overflow: auto;
        padding: 0;
      }
      .content.virtual-tour-mode {
        grid-template-columns: 1fr;
        align-content: stretch;
        justify-content: stretch;
        overflow: hidden;
      }

      .card {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--panel);
        overflow: hidden;
        text-decoration: none;
        color: var(--text);
        width: 400px;
        height: 140px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      .card:hover { border-color: var(--section-accent); }
      .card--noimage {
        background: linear-gradient(135deg, #0a3a6e 0%, #002855 60%, #001f42 100%);
      }
      .card--slideshow {
        background: linear-gradient(135deg, #ff6b35 0%, #b63b18 55%, #7a1f12 100%);
        color: #fff;
        border-color: #ff8a5c;
        cursor: pointer;
      }
      .card--slideshow .title {
        background: rgba(0,0,0,0.25);
      }
      .card-pills {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .card-pill {
        border: 1px solid color-mix(in srgb, var(--section-accent) 55%, #ffffff 45%);
        background: color-mix(in srgb, var(--section-accent) 20%, rgba(0,0,0,0.55) 80%);
        color: #ffffff;
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
      }
      .card--panorama .title {
        display: grid;
        gap: 4px;
      }
      .card--panorama .title .title-sub {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.85;
      }
      .title {
        padding: 10px 16px;
        font-size: 20px;
        color: #ffffff;
        background: linear-gradient(90deg, var(--section-accent) 0%, color-mix(in srgb, var(--section-accent) 40%, #003976 60%) 55%, #003976 100%);
        border-radius: 8px 0 0 0;
      }
      .section-title {
        grid-column: 1 / -1;
        font-size: 20px;
        font-weight: 800;
        color: #0b2340;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        background: linear-gradient(90deg, var(--section-accent-soft), rgba(11,35,64,0));
        padding: 6px 10px;
        border-left: 6px solid var(--section-accent);
        border-radius: 8px;
      }
      .section-subtitle {
        grid-column: 1 / -1;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--section-accent);
        margin: 2px 0 2px;
      }
      .section-note {
        grid-column: 1 / -1;
        font-size: 13px;
        color: var(--muted);
        margin: 6px 0 4px;
        font-style: italic;
      }
      .section-divider {
        grid-column: 1 / -1;
        height: 4px;
        background: linear-gradient(90deg, var(--section-accent), #c7d6e6 60%, rgba(199,214,230,0));
        border-radius: 999px;
        margin: 6px 0 14px;
      }
      .card-reset {
        border: none;
        outline: none;
        padding: 0;
      }

      .slideshow {
        width: min(1200px, 100%);
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid var(--section-accent);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.15);
        height: 100%;
      }
      .slideshow-stage {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        align-items: center;
        height: 100%;
      }
      .slideshow-nav {
        border: 1px solid var(--section-accent);
        background: var(--section-accent);
        color: #fff;
        border-radius: 12px;
        padding: 10px 14px;
        cursor: pointer;
        font-weight: 600;
        min-width: 64px;
        font-size: 22px;
      }
      .slideshow-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .slideshow-title {
        font-size: 22px;
        color: var(--section-accent);
        font-weight: 700;
      }
      .slideshow-close {
        border: 1px solid var(--section-accent);
        background: color-mix(in srgb, var(--section-accent) 12%, #ffffff 88%);
        color: var(--section-accent);
        border-radius: 10px;
        padding: 8px 12px;
        cursor: pointer;
        font-weight: 600;
      }
      .slideshow-frame {
        background: #0b2340;
        border-radius: 12px;
        display: grid;
        place-items: center;
        min-height: 420px;
        overflow: hidden;
        color: #ffffff;
        font-weight: 600;
        height: 100%;
      }
      .slideshow-frame img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
      }
      .slideshow-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }
      .slideshow-nav--bottom {
        display: none;
      }
      .slideshow-controls button,
      .slideshow-nav {
        border: 1px solid var(--section-accent);
        background: var(--section-accent);
        color: #fff;
        border-radius: 10px;
        padding: 10px 16px;
        cursor: pointer;
        font-weight: 600;
      }
      .slideshow-controls button:disabled,
      .slideshow-nav:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .slideshow-counter {
        color: var(--section-accent);
        font-weight: 600;
      }
      .video-player {
        width: min(1200px, 100%);
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid var(--section-accent);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        gap: 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.15);
      }
      .video-frame {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background: #0b2340;
      }
      .video-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }
      .video-frame video {
        width: 100%;
        height: 100%;
        border: 0;
        background: #0b2340;
        object-fit: contain;
      }
      .video-unavailable {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #d7e6f5;
        font-size: 1rem;
      }
      .pano-viewer {
        width: 100%;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.15);
        height: 100%;
        min-height: 0;
      }
      .pano-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .pano-heading {
        display: grid;
        gap: 4px;
      }
      .pano-title {
        font-size: 22px;
        color: var(--section-accent);
        font-weight: 700;
      }
      .pano-meta-line {
        font-size: 13px;
        color: #4b6482;
      }
      .pano-frame {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: #0b2340;
        min-height: 0;
        height: 100%;
        touch-action: none;
      }
      .pano-psv {
        width: 100%;
        height: 100%;
        display: block;
      }
      .map-viewer {
        height: 100%;
        width: 100%;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid var(--section-accent);
        border-radius: 16px;
        padding: 16px;
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 12px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.15);
        min-height: 0;
      }
      .map-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .map-title {
        font-size: 22px;
        color: var(--section-accent);
        font-weight: 700;
      }
      .map-controls {
        display: flex;
        gap: 8px;
      }
      .map-controls button {
        border: 1px solid var(--section-accent);
        background: color-mix(in srgb, var(--section-accent) 12%, #ffffff 88%);
        color: var(--section-accent);
        border-radius: 10px;
        padding: 8px 12px;
        cursor: pointer;
        font-weight: 600;
      }
      .map-controls button:hover {
        background: var(--section-accent);
        color: #ffffff;
      }
      .map-frame {
        position: relative;
        background: #0b2340;
        border-radius: 12px;
        overflow: hidden;
        height: 100%;
        min-height: 0;
        width: 100%;
        touch-action: none;
      }
      .map-canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        transform-origin: center center;
        will-change: transform;
      }
      .map-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        user-select: none;
        max-width: none;
        max-height: none;
      }
      .map-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .map-overlay-polygon {
        fill: var(--overlay-color, #0ea5e9);
        fill-opacity: 0;
        animation: map-overlay-pulse 4s ease-in-out infinite;
      }
      @keyframes map-overlay-pulse {
        0%,
        100% {
          fill-opacity: 0;
        }
        50% {
          fill-opacity: 0.5;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .map-overlay-polygon {
          animation: none;
          fill-opacity: 0.2;
        }
      }
      .activities-view {
        width: min(1300px, 100%);
        margin: 0 auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: 16px;
        box-shadow: none;
        min-height: 100%;
        max-height: 100%;
        overflow: visible;
      }
      .activities-main {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 18px;
        min-height: 0;
        align-items: stretch;
      }
      .activities-list {
        display: grid;
        gap: 16px;
        color: #0b2340;
        overflow: visible;
        padding-right: 0;
      }
      .activities-timeline {
        border: 1px solid #d6e2f0;
        border-radius: 12px;
        padding: 14px 16px;
        background: #ffffff;
        box-shadow: none;
        display: grid;
        gap: 10px;
      }
      .activities-timeline-track {
        position: relative;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        align-items: flex-end;
        gap: 18px 12px;
        padding: 12px 8px 4px;
      }
      .activities-timeline-track::before {
        content: '';
        position: absolute;
        left: 8px;
        right: 8px;
        top: 26px;
        height: 4px;
        background: color-mix(in srgb, var(--section-accent) 45%, #c8d7ea 55%);
        border-radius: 999px;
      }
      .activities-timeline-month {
        display: grid;
        gap: 6px;
        min-width: 70px;
        align-items: end;
        text-align: center;
        position: relative;
        z-index: 1;
      }
      .activities-timeline-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: #0b2340;
      }
      .activities-timeline-count {
        font-size: 11px;
        color: var(--section-accent);
        font-weight: 700;
      }
      .activities-timeline-empty {
        color: #4b6482;
        font-size: 14px;
      }
      .activities-section {
        border: 1px solid #d6e2f0;
        border-radius: 12px;
        padding: 16px 18px 14px;
        background: linear-gradient(135deg, #ffffff 0%, #f1f6ff 60%, #e8f0ff 100%);
        box-shadow: 0 8px 18px rgba(11, 35, 64, 0.08);
        position: relative;
        overflow: hidden;
      }
      .activities-section::before {
        content: '';
        position: absolute;
        inset: 0 auto 0 0;
        width: 6px;
        background: linear-gradient(180deg, var(--section-accent), color-mix(in srgb, var(--section-accent) 35%, #60a5fa 65%));
      }
      .activities-section-title {
        font-size: 19px;
        font-weight: 800;
        margin-bottom: 12px;
        color: var(--section-accent);
        padding-left: 10px;
      }
      .activities-item {
        padding: 8px 0 8px 26px;
        border-bottom: 1px dashed #d1dbe8;
        font-size: 16px;
        position: relative;
      }
      .activities-item::before {
        content: '•';
        position: absolute;
        left: 10px;
        top: 6px;
        color: var(--section-accent);
        font-size: 18px;
      }
      .activities-item:last-child {
        border-bottom: 0;
      }
      .activities-slideshow {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 12px;
        height: 100%;
      }
      .activities-slideshow-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--section-accent);
      }
      .activities-slideshow-frame {
        position: relative;
        border-radius: 12px;
        background: #0b2340;
        overflow: hidden;
        display: grid;
        place-items: center;
        min-height: 320px;
      }
      .activities-slideshow-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 1.4s ease;
      }
      .activities-slideshow-img.is-visible {
        opacity: 1;
      }
      .activities-slideshow-caption {
        font-size: 14px;
        color: #4b6482;
        text-align: center;
      }
      .activities-slideshow-placeholder {
        color: #c0d4e8;
        font-weight: 600;
        text-align: center;
        padding: 12px;
      }

      .logo {
        height: 60px;
        position: absolute;
        top: 12px;
        right: 24px;
      }
      .coming-up {
        font-size: 1.1em;
        font-weight: bold;
        color: #fff;
        margin: 18px 0 6px 0;
        letter-spacing: 0.02em;
      }

      .slideshow-panel {
        background: var(--panel-2);
        border-left: 1px solid var(--border);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 200px;
        width: 100%;
        overflow: hidden;
      }
      .side-slideshow-frame {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 0;
        background: #0b2340;
        border: 3px solid var(--bg);
        display: grid;
        place-items: center;
        overflow: hidden;
        position: relative;
      }
      .side-slideshow-img {
        position: absolute;
        inset: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transition: opacity 2.5s ease;
      }
      .side-slideshow-img.is-visible {
        opacity: 1;
      }
      .side-slideshow-placeholder {
        color: var(--muted);
        font-weight: 600;
        text-align: center;
        padding: 12px;
      }

      @media (max-width: 900px) {
        .main-area {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr auto;
        }
        .schedule-panel {
          grid-row: 2;
          border-right: 0;
          border-bottom: 1px solid var(--border);
          padding: 16px 12px;
          max-width: none;
          min-width: 0;
          flex-direction: row;
          gap: 12px;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
        }
        .schedule-allday,
        .schedule-events {
          display: contents;
        }
        .schedule-title {
          margin: 0 8px 0 0;
          white-space: nowrap;
        }
        .timeline-event {
          margin: 0;
          min-width: 220px;
          display: inline-block;
          white-space: normal;
        }
        .content {
          grid-row: 1;
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
          justify-content: stretch;
        }
        .card {
          width: 100%;
          max-width: 400px;
          justify-self: center;
        }
        .slideshow-panel {
          display: none;
        }
      }

      @media (max-width: 700px) {
        .header {
          padding: 12px 16px;
          min-height: 0;
          flex-direction: column;
          align-items: stretch;
        }
        .logo {
          position: static;
          align-self: flex-end;
        }
        .tabs {
          justify-content: center;
        }
        .live-clock {
          top: 12px;
          left: 16px;
          font-size: 2.1em;
        }
        .content {
          grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }
        .slideshow-nav--side {
          display: none;
        }
        .slideshow-nav--bottom {
          display: inline-flex;
        }
        .slideshow-controls {
          justify-content: space-between;
        }
        .slideshow-frame {
          min-height: 260px;
        }
        .activities-view {
          grid-template-rows: auto auto auto;
        }
        .activities-main {
          grid-template-columns: 1fr;
        }
        .activities-slideshow-frame {
          min-height: 220px;
        }
      }

/* ── Attract screen ─────────────────────────────────────────── */
.attract-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.attract-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  width: 80%;
  pointer-events: none;
}
.attract-screen {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #0b2340;
  border-radius: 8px;
}
.attract-label {
  font-size: clamp(2rem, 8vw, 12rem);
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.02em;
  line-height: 1;
}
.attract-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.attract-img.is-visible {
  opacity: 1;
}

/* Attract trigger button in footer popout — matches footer link style */
.attract-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: #a8d4ff;
  text-align: left;
  cursor: pointer;
}
.attract-trigger:hover {
  text-decoration: underline;
}

/* ── News tab ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px;
  align-content: start;
}
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.news-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.news-card-img--placeholder {
  background: var(--panel-2);
}
.news-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1;
}
.news-card-date {
  font-size: 0.72em;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-card-title {
  font-size: 0.92em;
  font-weight: 700;
  line-height: 1.3;
}
.news-card-desc {
  font-size: 0.8em;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-link {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.78em;
  color: var(--accent);
  font-weight: 600;
}