:root {
            color-scheme: light;
            --navy: #0b365d;
            --blue: #176aa5;
            --gold: #d89a24;
            --ink: #18324a;
            --muted: #607283;
            --line: #cfdfec;
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 12px 14px;
            color: var(--ink);
            background:
                radial-gradient(circle at 10% 10%, rgba(54, 149, 210, 0.15), transparent 28rem),
                radial-gradient(circle at 90% 90%, rgba(67, 184, 160, 0.13), transparent 26rem),
                #f4f9fd;
        }

        .access {
            width: min(520px, 100%);
            padding: clamp(16px, 3vw, 24px);
            border: 1px solid var(--line);
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 26px 70px rgba(18, 68, 104, 0.14);
        }

        .brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: var(--navy);
            text-decoration: none;
        }

        .brand img {
            width: min(280px, 75vw);
            height: auto;
            object-fit: contain;
            border-radius: 18px;
            box-shadow: 0 9px 24px rgba(21, 76, 113, 0.12);
        }

        .brand-caption {
            color: var(--muted);
            font-size: 0.86rem;
            font-weight: 700;
            text-align: center;
        }

        .institutions {
            display: grid;
            gap: 7px;
        }

        .institution-search {
            margin: 12px 0 9px;
        }

        .institution-search label {
            display: block;
            margin: 0 0 4px;
            color: var(--navy);
            font-size: 0.72rem;
            font-weight: 800;
        }

        .institution-search input {
            width: 100%;
            min-height: 40px;
            padding: 8px 12px;
            border: 1px solid #a9c9df;
            border-radius: 11px;
            outline: none;
            color: var(--ink);
            background: #fff;
            font: inherit;
            font-size: 0.8rem;
            transition: border-color 150ms ease, box-shadow 150ms ease;
        }

        .institution-search input:focus {
            border-color: var(--blue);
            box-shadow: 0 0 0 4px rgba(23, 106, 165, 0.12);
        }

        .no-results {
            margin: 9px 0 0;
            padding: 15px;
            border: 1px solid #b7dbc9;
            border-radius: 16px;
            color: var(--ink);
            background: linear-gradient(135deg, #f7fcfa, #eaf8f3);
            text-align: center;
        }

        .no-results[hidden] {
            display: none;
        }

        .no-results strong,
        .no-results span {
            display: block;
        }

        .no-results strong {
            color: var(--navy);
            font-size: 0.86rem;
        }

        .no-results span {
            margin-top: 5px;
            color: var(--muted);
            font-size: 0.72rem;
            line-height: 1.4;
        }

        .demo-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            margin-top: 11px;
            padding: 0 15px;
            border-radius: 11px;
            color: #fff;
            background: linear-gradient(135deg, #0d568e, #176fa8 58%, #159c85);
            box-shadow: 0 10px 22px rgba(23, 106, 165, 0.18);
            font-size: 0.74rem;
            font-weight: 800;
            text-decoration: none;
        }

        .demo-link:hover,
        .demo-link:focus-visible {
            transform: translateY(-1px);
            box-shadow: 0 13px 26px rgba(23, 106, 165, 0.24);
        }

        .institution {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 10px;
            min-height: 52px;
            padding: 8px 11px;
            border: 1px solid var(--line);
            border-radius: 12px;
            color: var(--ink);
            background: linear-gradient(135deg, #fff, #f4f9fd);
            text-decoration: none;
            transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
        }

        .institution[hidden] {
            display: none;
        }

        .institution:hover,
        .institution:focus-visible {
            transform: translateY(-2px);
            border-color: #75afd5;
            box-shadow: 0 13px 27px rgba(22, 93, 140, 0.11);
        }

        .institution strong {
            display: block;
            color: var(--navy);
            font-size: 0.79rem;
        }

        .institution span {
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 0.68rem;
        }

        .institution em {
            display: grid;
            place-items: center;
            width: 30px;
            height: 30px;
            border-radius: 9px;
            color: #fff;
            background: linear-gradient(135deg, #0d4e81, #1b7bb8);
            font-size: 0.95rem;
            font-style: normal;
        }

        .back {
            display: inline-block;
            margin-top: 9px;
            color: var(--blue);
            font-size: 0.72rem;
            font-weight: 730;
            text-decoration: none;
        }

        .back:hover,
        .back:focus-visible { text-decoration: underline; }

        @media (max-height: 700px) and (min-width: 521px) {
            body { padding: 6px 14px; }
            .access { padding-top: 16px; padding-bottom: 16px; }
        }

        @media (max-height: 620px) and (min-width: 521px) {
            body { padding: 4px 14px; }
            .access { padding: 10px 18px; }
            .institution-search { margin-bottom: 6px; }
            .institutions { gap: 5px; }
            .institution { min-height: 48px; padding: 6px 10px; }
            .back { margin-top: 6px; }
        }

        @media (max-width: 520px) {
            body { padding: 8px; }
            .access { padding: 14px; border-radius: 20px; }
            .brand img { width: min(240px, 78vw); }
            .institution { min-height: 50px; padding: 7px 9px; }
        }
        body { min-height: 100svh; min-height: 100dvh; }
        .brand img { max-height: clamp(52px, 14dvh, 102px); width: min(280px, 75vw); }
        .back { min-height: 36px; display: inline-flex; align-items: center; }
        @media (max-height: 650px) {
            .access { padding: 12px; }
            .brand-caption { font-size: .75rem; }
            .institution-search { margin-block: 8px; }
            .institution { min-height: 50px; }
        }
        @media (min-width: 600px) and (max-height: 500px) {
            .access { width: min(820px, 100%); display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); align-items: center; gap: 8px 18px; }
            .brand { grid-column: 1; grid-row: 1; }
            .institution-search { grid-column: 1; grid-row: 2; margin: 0; }
            .institutions, .no-results { grid-column: 2; grid-row: 1 / span 3; }
            .back { grid-column: 1; grid-row: 3; margin: 0; }
        }