/* Bernard 4.0.2 — refined main-room navigation and footer */
html { scroll-behavior: smooth; }

/* Entrance message: preserve the three requested lines. */
#entrance .entrance-message {
    width: min(650px, calc(100vw - 36px)) !important;
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: clamp(10px, .82vw, 12px) !important;
    line-height: 1.75 !important;
    letter-spacing: .11em !important;
}
#entrance .entrance-message-line {
    display: block !important;
    width: 100% !important;
    min-height: 1.75em !important;
    white-space: nowrap !important;
}
#entrance .entrance-message-letter { transition-duration: 260ms !important; }

body:has(#bernard:not([hidden])) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
}

#bernard {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #fff !important;
}
#bernard[hidden] { display: none !important; }

#bernard > .persistent-bernard-mark {
    position: absolute !important;
    top: 28px !important;
    left: 34px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 80 !important;
}

/* Old circular navigation is entirely disabled. */
#bernard .main-room-circuits,
#bernard .navigation-circle-svg,
#bernard .main-module-line,
#bernard .main-room-navigation-node::before,
#bernard .main-room-navigation-node::after,
#bernard .bernard-navigation::before,
#bernard .bernard-navigation::after {
    display: none !important;
    content: none !important;
}

/* Wide top navigation inspired by the supplied reference. */
#bernard .main-room-navigation-node {
    position: absolute !important;
    z-index: 70 !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: min(860px, calc(100% - 250px)) !important;
    height: 72px !important;
    margin: 0 !important;
    display: block !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#bernard .bernard-navigation {
    position: static !important;
    width: 100% !important;
    height: 72px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,.10) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transform: none !important;
}
#bernard .main-module-button {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    padding: 25px 26px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    display: grid !important;
    place-items: center !important;
    transform: none !important;
    overflow: visible !important;
}
#bernard .main-module-button:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 19px !important;
    width: 1px !important;
    height: 34px !important;
    background: rgba(17,17,17,.09) !important;
    display: block !important;
}
#bernard .main-module-button::before {
    content: "" !important;
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #555 !important;
    transform: translateX(-50%) !important;
    box-shadow: none !important;
    display: block !important;
}
#bernard .main-module-button:first-child::after {
    box-shadow: -116px -18px 0 -0.5px rgba(17,17,17,.10) !important;
}
#bernard .main-module-button:hover { background: rgba(17,17,17,.025) !important; }
#bernard .main-module-text {
    position: static !important;
    display: block !important;
    color: #444 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 4.6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    text-shadow: none !important;
}

#bernard .bernard-presence {
    position: relative !important;
    inset: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 145vh !important;
    min-height: 980px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: hidden !important;
}
#bernard .bernard-head {
    position: relative !important;
    width: min(97vw, 1540px) !important;
    max-width: none !important;
    height: 140vh !important;
    min-height: 950px !important;
    margin-top: 76px !important;
    transform: none !important;
}
#bernard .head-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
}

#bernard .progress-panel {
    position: absolute !important;
    z-index: 55 !important;
    top: 42vh !important;
    left: clamp(30px, 5vw, 90px) !important;
    right: auto !important;
    width: min(330px, 25vw) !important;
    min-height: 360px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

/* Footer controls: broad, balanced row like the supplied reference. */
#bernard .main-room-footer {
    position: relative !important;
    z-index: 70 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
#bernard .main-room-footer-controls {
    width: 100% !important;
    min-height: 156px !important;
    padding: 38px 5vw 26px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(18px, 3vw, 54px) !important;
    border-bottom: 1px solid rgba(17,17,17,.09) !important;
}
#bernard .main-room-footer-controls .system-bottom-controls,
#bernard .main-room-footer-controls .language-control {
    position: static !important;
    inset: auto !important;
    display: contents !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}
#bernard .main-room-footer-controls .sound-toggle,
#bernard .main-room-footer-controls .off-button,
#bernard .main-room-footer-controls .language-button,
#bernard .main-room-footer-controls .cloud-sign-out {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: min(100%, 190px) !important;
    min-width: 150px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 25px !important;
    border: 1px solid rgba(17,17,17,.28) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.74) !important;
    color: #333 !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.03), inset 0 0 10px rgba(255,255,255,.88) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 3.6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    animation: none !important;
}
#bernard .main-room-footer-controls .sound-toggle::after,
#bernard .main-room-footer-controls .cloud-sign-out::after,
#bernard .main-room-footer-controls .off-button::after,
#bernard .main-room-footer-controls .language-button::after {
    position: absolute !important;
    right: 17px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #666 !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
}
#bernard .main-room-footer-controls .sound-toggle::after { content: "⌁" !important; }
#bernard .main-room-footer-controls .cloud-sign-out::after { content: "↗" !important; }
#bernard .main-room-footer-controls .off-button::after { content: "◯" !important; }
#bernard .main-room-footer-controls .language-button::after { content: "⊙" !important; }
#bernard .main-room-footer-controls .language-menu {
    left: 50% !important;
    bottom: 50px !important;
    transform: translate(-50%, 8px) !important;
}
#bernard .main-room-footer-controls .language-menu.is-open { transform: translate(-50%, 0) !important; }

/* Compact About block; this is the exact end of the document. */
#bernard .about-bernard-note {
    width: 100% !important;
    margin: 0 !important;
    padding: 34px 24px 28px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    text-align: center !important;
    color: #343434 !important;
}
#bernard .about-bernard-note h2 {
    position: relative !important;
    margin: 0 0 32px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 5px !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
#bernard .about-bernard-note h2::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -18px !important;
    width: 44px !important;
    height: 1px !important;
    background: rgba(17,17,17,.22) !important;
    transform: translateX(-50%) !important;
}
#bernard .about-bernard-note p {
    margin: 0 auto 8px !important;
    max-width: 760px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: .11em !important;
    color: #666 !important;
    text-shadow: none !important;
}
#bernard .about-bernard-note .about-bernard-final {
    position: relative !important;
    margin-top: 13px !important;
    margin-bottom: 0 !important;
    padding-bottom: 22px !important;
    color: #444 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
}
#bernard .about-bernard-note .about-bernard-final::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 44px !important;
    height: 1px !important;
    background: rgba(17,17,17,.22) !important;
    transform: translateX(-50%) !important;
}

/* Remove all left-to-right shine/glow effects from main-room text and controls. */
#bernard.interface-content-visible .progress-panel::after,
#bernard.interface-content-visible .system-bottom-controls::after,
#bernard.interface-content-visible .language-button::after { display: none !important; animation: none !important; }
#bernard.interface-content-visible .main-module-text,
#bernard.interface-content-visible .level-device-title,
#bernard.interface-content-visible .sequence,
#bernard.interface-content-visible .level-attribute,
#bernard .main-room-footer-controls button,
#bernard .about-bernard-note * {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    animation: none !important;
    text-shadow: none !important;
    filter: none !important;
}

body:has(#bernard:not([hidden])) > .sound-toggle,
body:has(#bernard:not([hidden])) > .language-control,
body:has(#bernard:not([hidden])) > .cloud-sign-out { display: none !important; }

@media (max-width: 900px) {
    #entrance .entrance-message { font-size: 9px !important; letter-spacing: .07em !important; }
    #bernard > .persistent-bernard-mark { top: 18px !important; left: 16px !important; }
    #bernard .main-room-navigation-node { top: 60px !important; width: 100% !important; }
    #bernard .bernard-navigation { height: 66px !important; }
    #bernard .main-module-button { height: 66px !important; padding-inline: 5px !important; }
    #bernard .main-module-text { font-size: 8px !important; letter-spacing: 2px !important; }
    #bernard .bernard-head { margin-top: 118px !important; width: 116vw !important; }
    #bernard .progress-panel { top: 104vh !important; left: 50% !important; width: min(390px, calc(100vw - 34px)) !important; transform: translate(-50%, -50%) !important; }
    #bernard .main-room-footer-controls { grid-template-columns: repeat(2, minmax(135px, 1fr)) !important; padding-inline: 20px !important; }
    #bernard .about-bernard-note { padding-inline: 18px !important; }
    #bernard .about-bernard-note p { font-size: 11px !important; letter-spacing: .07em !important; }
}

/* Bernard 4.0.3 — navigation alignment, lower level card and level messages */
#bernard .main-room-navigation-node {
    width: min(1120px, calc(100% - 220px)) !important;
}
#bernard .main-module-button {
    display: block !important;
}
#bernard .main-module-button::before {
    top: 8px !important;
    left: 50% !important;
}
#bernard .main-module-text {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    width: max-content !important;
    margin: 0 !important;
    text-align: center !important;
    transform: translateX(-50%) !important;
}

/* The level card begins near the bottom of the first viewport and is revealed by scrolling. */
#bernard .progress-panel {
    top: 92vh !important;
    left: clamp(28px, 5vw, 84px) !important;
    width: min(285px, 23vw) !important;
    min-height: 235px !important;
    padding: 28px 24px 24px !important;
    transform: none !important;
    cursor: default !important;
}
#bernard .progress-panel .level-device-title {
    margin-bottom: 20px !important;
}
#bernard .progress-panel .level-bar {
    height: 38px !important;
}
#bernard .progress-panel .sequence {
    margin-top: 20px !important;
}
#bernard .progress-panel .level-attribute,
#bernard .progress-panel #progress-attribute,
#bernard .progress-panel #completed-forms,
#bernard .progress-panel #progress-percentage {
    display: none !important;
}
#bernard .progress-panel .level-segment {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Keep all four footer controls visible and evenly spaced. */
body #bernard #main-room-footer-controls #cloud-sign-out {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.level-message-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background: #fff;
    color: #222;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 360ms ease, visibility 360ms ease;
}
.level-message-screen.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.level-message-screen p {
    margin: 0;
    padding: 40px;
    text-align: center;
    font-size: clamp(13px, 1.2vw, 18px);
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.level-message-close {
    position: absolute;
    top: 28px;
    right: 32px;
    border: 0;
    background: transparent;
    color: #333;
    font: inherit;
    font-size: 10px;
    letter-spacing: .28em;
    cursor: pointer;
}

@media (max-width: 900px) {
    #bernard .main-room-navigation-node { width: 100% !important; }
    #bernard .progress-panel {
        top: 96vh !important;
        left: 50% !important;
        width: min(310px, calc(100vw - 34px)) !important;
        transform: translateX(-50%) !important;
    }
}


/* Bernard 4.0.4 — restored progress details, raised card and rectangular entrance */
#bernard .progress-panel {
    top: 84vh !important;
    cursor: pointer !important;
}

#entrance #remember-button {
    width: auto !important;
    min-width: 150px !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#entrance #remember-button .on-ring {
    display: none !important;
}
#entrance #remember-word {
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 3.6px !important;
    line-height: 1 !important;
    text-transform: none !important;
}

@media (max-width: 900px) {
    #bernard .progress-panel { top: 88vh !important; }
}

/* Bernard 4.0.5 — entrance spacing, uninterrupted head and first-entry brand */
#entrance #remember-button {
    top: calc(50% + 90px) !important;
}

/* The footer begins only after the complete head image has finished. */
#bernard .bernard-presence {
    height: calc(140vh + 76px) !important;
    min-height: 1026px !important;
    overflow: visible !important;
}

/* The main-room mark must be visible from the first entrance, not only after returning from a room. */
#bernard:not([hidden]) > .persistent-bernard-mark,
#bernard.main-room-constructing > .persistent-bernard-mark,
#bernard.main-room-letters-visible > .persistent-bernard-mark {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}
#bernard:not([hidden]) > .persistent-bernard-mark .persistent-brand-line {
    stroke-dashoffset: 0 !important;
}

@media (max-width: 900px) {
    #entrance #remember-button { top: calc(50% + 88px) !important; }
    #bernard .bernard-presence {
        height: calc(140vh + 118px) !important;
        min-height: 1068px !important;
    }
}

/* Bernard 4.0.6 — compact entrance, mobile room navigation and full main-room localization */
#entrance .entrance-brand {
    top: calc(50% - 82px) !important;
}
#entrance #remember-button {
    top: calc(50% + 70px) !important;
}

/* Mobile-only layout. Desktop navigation remains untouched. */
@media (max-width: 700px) {
    #entrance .entrance-brand {
        top: calc(50% - 78px) !important;
    }
    #entrance #remember-button {
        top: calc(50% + 68px) !important;
    }

    #bernard .main-room-navigation-node {
        top: 70px !important;
        left: 50% !important;
        width: min(250px, calc(100vw - 44px)) !important;
        height: auto !important;
        transform: translateX(-50%) !important;
    }
    #bernard .bernard-navigation {
        width: 100% !important;
        height: auto !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(3, 62px) !important;
        border: 1px solid rgba(17,17,17,.10) !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    #bernard .main-module-button {
        width: 100% !important;
        height: 62px !important;
        padding: 0 20px 0 54px !important;
        text-align: left !important;
    }
    #bernard .main-module-button:not(:last-child)::after {
        right: 18px !important;
        left: 18px !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto !important;
        height: 1px !important;
        box-shadow: none !important;
    }
    #bernard .main-module-button::before {
        top: 50% !important;
        left: 27px !important;
        width: 6px !important;
        height: 6px !important;
        transform: translate(-50%, -50%) !important;
    }
    #bernard .main-module-text {
        position: static !important;
        display: block !important;
        width: 100% !important;
        transform: none !important;
        text-align: left !important;
        font-size: 9px !important;
        letter-spacing: 3.2px !important;
    }
    #bernard .bernard-head {
        margin-top: 280px !important;
    }
    #bernard .bernard-presence {
        height: calc(140vh + 280px) !important;
        min-height: 1230px !important;
    }
}


/* Bernard 4.0.7 — mobile-only horizontal room navigation and level-card separation */
@media (max-width: 700px) {
    /* Keep all three room buttons in one horizontal row. */
    #bernard .main-room-navigation-node {
        top: 70px !important;
        left: 50% !important;
        width: calc(100vw - 24px) !important;
        max-width: 560px !important;
        height: 70px !important;
        transform: translateX(-50%) !important;
    }

    #bernard .bernard-navigation {
        width: 100% !important;
        height: 70px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: 70px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(17, 17, 17, .12) !important;
        overflow: visible !important;
    }

    #bernard .main-module-button {
        position: relative !important;
        width: 100% !important;
        height: 70px !important;
        min-width: 0 !important;
        padding: 0 3px !important;
        display: grid !important;
        place-items: end center !important;
        text-align: center !important;
    }

    #bernard .main-module-button:not(:last-child)::after {
        top: 12px !important;
        right: 0 !important;
        bottom: 12px !important;
        left: auto !important;
        width: 1px !important;
        height: auto !important;
        box-shadow: none !important;
    }

    #bernard .main-module-button::before {
        top: 7px !important;
        left: 50% !important;
        width: 6px !important;
        height: 6px !important;
        transform: translateX(-50%) !important;
    }

    #bernard .main-module-text {
        position: absolute !important;
        left: 50% !important;
        bottom: 17px !important;
        width: max-content !important;
        max-width: calc(100% - 4px) !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
        font-size: 8px !important;
        letter-spacing: 2px !important;
        white-space: nowrap !important;
    }

    /* Restore the head spacing used by the horizontal navigation. */
    #bernard .bernard-head {
        margin-top: 126px !important;
    }

    #bernard .bernard-presence {
        height: calc(140vh + 126px) !important;
        min-height: 1076px !important;
    }

    /* The level card starts only after the complete head area. */
    #bernard .progress-panel {
        top: calc(140vh + 150px) !important;
        left: 50% !important;
        width: min(310px, calc(100vw - 34px)) !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }
}