Link to article: fragment: Site-69 CSS.
:root {
/* BHL tweaks */
--zero: 0;
/* Base colours for map */
--h: 72;
--l: 60%;
/* https://icon-sets.iconify.design/bx/cctv/ CC BY 4.0 */
--icon-cctv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.916 9.564a.998.998 0 0 0-.513-1.316L7.328 2.492c-.995-.438-2.22.051-2.645 1.042l-2.21 5.154a2.001 2.001 0 0 0 1.052 2.624L9.563 13.9L8.323 17H4v-3H2v8h2v-3h4.323c.823 0 1.552-.494 1.856-1.258l1.222-3.054l5.205 2.23a1 1 0 0 0 1.31-.517l.312-.71l1.701.68l2-5l-1.536-.613zm-4.434 5.126L4.313 9.475l2.208-5.152l12.162 5.354z'/%3E%3C/svg%3E");
/* https://icon-sets.iconify.design/bx/microphone/ CC BY 4.0 */
--icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16 12V6c0-2.217-1.785-4.021-3.979-4.021a.933.933 0 0 0-.209.025A4.006 4.006 0 0 0 8 6v6c0 2.206 1.794 4 4 4s4-1.794 4-4m-6 0V6c0-1.103.897-2 2-2a.89.89 0 0 0 .163-.015C13.188 4.06 14 4.935 14 6v6c0 1.103-.897 2-2 2s-2-.897-2-2'/%3E%3Cpath fill='%23000' d='M6 12H4c0 4.072 3.061 7.436 7 7.931V22h2v-2.069c3.939-.495 7-3.858 7-7.931h-2c0 3.309-2.691 6-6 6s-6-2.691-6-6'/%3E%3C/svg%3E");
/* https://icon-sets.iconify.design/mdi/warning-circle-outline/ Apache 2.0 */
--icon-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='2 2 20 20'%3E%3Cpath fill='%23000' d='M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: smooth;
}
}
:root, .map__room, .footage__selector, .footage__display, .footage__display a[href^='#u-'] {
--swatch-gba-dark: hsl(var(--h), 60%, 15%);
--swatch-gba-medium: hsl(var(--h), 30%, 30%);
--swatch-gba-light: hsl(var(--h), 55%, calc(var(--l) + 10%));
--swatch-gba-pale: hsl(var(--h), 80%, var(--l));
--swatch-gba-hpale: hsl(var(--h), 70%, calc(var(--l) + 20%));
}
/* Each footage__display is a room's worth of content */
.footage__display {
display: none;
position: relative;
margin: 1.5rem 0;
--document-padding-inline: 1.5rem;
padding: 1rem var(--document-padding-inline);
border: 0.2rem solid var(--swatch-gba-medium);
border-radius: 0.4rem;
background-image: linear-gradient(var(--swatch-gba-hpale), transparent 99rem);
animation: footage-display-fade 0.2s linear both;
}
@keyframes footage-display-fade {
0% { opacity: 0.5 }
100% { opacity: 1 }
}
@media (max-width: 700px) {
.footage__display { --document-padding-inline: 0.75rem }
}
.footage__display h2 {
font-family: inherit;
letter-spacing: inherit;
font-weight: 650;
margin-top: 1rem;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.footage__display p {
margin-right: -0.5ch;
}
.footage__display p:first-of-type:last-of-type {
font-style: italic;
opacity: 0.7;
}
.footage__display a[href^='#u-'] {
display: inline-block;
vertical-align: 0;
background-color: var(--swatch-gba-hpale);
color: black;
text-decoration: underline 3px var(--swatch-gba-pale);
filter: brightness(1.05);
}
.footage__display a[href^='#u-']:hover {
background-color: white;
color: var(--swatch-gba-dark);
}
.footage__display-start, .footage__display-end {
display: block;
text-align: center;
}
:is(.footage__display-start, .footage__display-end)::before {
font-weight: bold;
opacity: 0.5;
}
.footage__display:not(:has(p:nth-of-type(2))) :is(.footage__display-start, .footage__display-end) {
display: none;
}
/* Footage tags denoting audio / video */
.footage__feed {
text-transform: uppercase;
font-weight: 600;
color: #000c;
font-size: 0.85rem;
letter-spacing: 0.02rem;
background: #0001;
border: thin solid var(--swatch-gba-light);
border-radius: 0.3rem;
padding: 0.3rem 0.7rem 0.3rem 0.3rem;
display: inline-block;
margin-block: -0.5rem 1rem;
}
.footage__feed .room-icon {
margin-right: 0.3rem;
}
/* Room colours */
.map__room--pantry, .footage__selector--pantry, .footage__display--pantry, .footage__display a[href='#u-pantry'],
.map__room--cafe, .footage__selector--cafe, .footage__display--cafe, .footage__display a[href='#u-cafe'],
.map__room--toilet, .footage__selector--toilet, .footage__display--toilet, .footage__display a[href='#u-toilet'],
.map__room--foyer, .footage__selector--foyer, .footage__display--foyer, .footage__display a[href='#u-foyer'] {
--h: 172;
}
.map__room--hangar, .footage__selector--hangar, .footage__display--hangar, .footage__display a[href='#u-hangar'],
.map__room--bay, .footage__selector--bay, .footage__display--bay, .footage__display a[href='#u-bay'] {
--h: 32;
}
.map__room--a1, .footage__selector--a1, .footage__display--a1, .footage__display a[href='#u-a1'],
.map__room--a2, .footage__selector--a2, .footage__display--a2, .footage__display a[href='#u-a2'],
.map__room--a3, .footage__selector--a3, .footage__display--a3, .footage__display a[href='#u-a3'],
.map__room--a4, .footage__selector--a4, .footage__display--a4, .footage__display a[href='#u-a4'] {
--h: 12;
}
.map__room--d1, .footage__selector--d1, .footage__display--d1, .footage__display a[href='#u-d1'],
.map__room--d2, .footage__selector--d2, .footage__display--d2, .footage__display a[href='#u-d2'],
.map__room--d3, .footage__selector--d3, .footage__display--d3, .footage__display a[href='#u-d3'],
.map__room--d4, .footage__selector--d4, .footage__display--d4, .footage__display a[href='#u-d4'],
.map__room--d5, .footage__selector--d5, .footage__display--d5, .footage__display a[href='#u-d5'],
.map__room--d6, .footage__selector--d6, .footage__display--d6, .footage__display a[href='#u-d6'] {
--h: 122;
}
.map__room--containment, .footage__selector--containment, .footage__display--containment, .footage__display a[href='#u-containment'],
.map__room--airlock, .footage__selector--airlock, .footage__display--airlock, .footage__display a[href='#u-airlock'] {
--h: 252;
--l: 65%;
}
.map__room--server, .footage__selector--server, .footage__display--server, .footage__display a[href='#u-server'],
.map__room--armoury, .footage__selector--armoury, .footage__display--armoury, .footage__display a[href='#u-armoury'],
.map__room--storage, .footage__selector--storage, .footage__display--storage, .footage__display a[href='#u-storage'] {
--h: 52;
--l: 65%;
}
.footage__selector--outside, .footage__display--outside, .footage__display a[href='#u-outside'] {
--h: 190;
background: radial-gradient(ellipse at bottom, white, white, rgb(225, 240, 255));
}
.footage__display--outside, .footage__display a[href='#u-outside'] {
box-shadow:
inset 0px 0px 8rem 0rem #00000001,
inset 0px 0px 5rem 0rem #00000002,
inset 0px 0px 2rem 0rem #00000003;
}
.footage__selector--all {
filter: grayscale(1);
}
.footage__display :is([href='#u-server-corridor'], [href='#u-office-corridor'], [href='#u-d-corridor'], [href='#u-armoury-corridor'], [href='#u-ring-north'], [href='#u-ring-east'], [href='#u-ring-south'], [href='#u-ring-west']) {
/* Reset corridor links to default colour */
--h: 72;
}
/* Map/footage hover links */
:root:has([href='#u-pantry']:hover) .map__room--pantry,
:root:has([href='#u-storage']:hover) .map__room--storage,
:root:has([href='#u-foyer']:hover) .map__room--foyer,
:root:has([href='#u-hangar']:hover) .map__room--hangar,
:root:has([href='#u-server']:hover) .map__room--server,
:root:has([href='#u-cafe']:hover) .map__room--cafe,
:root:has([href='#u-d1']:hover) .map__room--d1,
:root:has([href='#u-d2']:hover) .map__room--d2,
:root:has([href='#u-d3']:hover) .map__room--d3,
:root:has([href='#u-d4']:hover) .map__room--d4,
:root:has([href='#u-d5']:hover) .map__room--d5,
:root:has([href='#u-d6']:hover) .map__room--d6,
:root:has([href='#u-armoury']:hover) .map__room--armoury,
:root:has([href='#u-toilet']:hover) .map__room--toilet,
:root:has([href='#u-bay']:hover) .map__room--bay,
:root:has([href='#u-containment']:hover) .map__room--containment,
:root:has([href='#u-airlock']:hover) .map__room--airlock,
:root:has([href='#u-a4']:hover) .map__room--a4,
:root:has([href='#u-a2']:hover) .map__room--a2,
:root:has([href='#u-a3']:hover) .map__room--a3,
:root:has([href='#u-a1']:hover) .map__room--a1,
:root:has([href='#u-office-corridor']:hover) .map__room--office-corridor,
:root:has([href='#u-server-corridor']:hover) .map__room--server-corridor,
:root:has([href='#u-d-corridor']:hover) .map__room--d-corridor,
:root:has([href='#u-ring-north']:hover) .map__room--ring-north,
:root:has([href='#u-ring-east']:hover) .map__room--ring-east,
:root:has([href='#u-ring-south']:hover) .map__room--ring-south,
:root:has([href='#u-ring-west']:hover) .map__room--ring-west,
:root:has([href='#u-armoury-corridor']:hover) .map__room--armoury-corridor,
.map__room:hover {
background: repeating-conic-gradient(white 0% 25%, var(--swatch-gba-hpale) 0% 50%) 50% / 6px 6px;
}
:root:has([href='#u-pantry']:hover) .footage__selector--pantry,
:root:has([href='#u-storage']:hover) .footage__selector--storage,
:root:has([href='#u-foyer']:hover) .footage__selector--foyer,
:root:has([href='#u-hangar']:hover) .footage__selector--hangar,
:root:has([href='#u-server']:hover) .footage__selector--server,
:root:has([href='#u-cafe']:hover) .footage__selector--cafe,
:root:has([href='#u-d1']:hover) .footage__selector--d1,
:root:has([href='#u-d2']:hover) .footage__selector--d2,
:root:has([href='#u-d3']:hover) .footage__selector--d3,
:root:has([href='#u-d4']:hover) .footage__selector--d4,
:root:has([href='#u-d5']:hover) .footage__selector--d5,
:root:has([href='#u-d6']:hover) .footage__selector--d6,
:root:has([href='#u-armoury']:hover) .footage__selector--armoury,
:root:has([href='#u-toilet']:hover) .footage__selector--toilet,
:root:has([href='#u-bay']:hover) .footage__selector--bay,
:root:has([href='#u-containment']:hover) .footage__selector--containment,
:root:has([href='#u-airlock']:hover) .footage__selector--airlock,
:root:has([href='#u-a4']:hover) .footage__selector--a4,
:root:has([href='#u-a2']:hover) .footage__selector--a2,
:root:has([href='#u-a3']:hover) .footage__selector--a3,
:root:has([href='#u-a1']:hover) .footage__selector--a1,
:root:has([href='#u-office-corridor']:hover) .footage__selector--office-corridor,
:root:has([href='#u-server-corridor']:hover) .footage__selector--server-corridor,
:root:has([href='#u-d-corridor']:hover) .footage__selector--d-corridor,
:root:has([href='#u-ring-north']:hover) .footage__selector--ring-north,
:root:has([href='#u-ring-east']:hover) .footage__selector--ring-east,
:root:has([href='#u-ring-south']:hover) .footage__selector--ring-south,
:root:has([href='#u-ring-west']:hover) .footage__selector--ring-west,
:root:has([href='#u-armoury-corridor']:hover) .footage__selector--armoury-corridor,
:root:has([href='#u-outside']:hover) .footage__selector--outside {
--_shadow-3d-height: 0.2rem;
background-color: white;
}
/* Selected room */
:root:has(.targets [id=u-pantry]:target) .map__room--pantry,
:root:has(.targets [id=u-storage]:target) .map__room--storage,
:root:has(.targets [id=u-foyer]:target) .map__room--foyer,
:root:has(.targets [id=u-hangar]:target) .map__room--hangar,
:root:has(.targets [id=u-server]:target) .map__room--server,
:root:has(.targets [id=u-cafe]:target) .map__room--cafe,
:root:has(.targets [id=u-d1]:target) .map__room--d1,
:root:has(.targets [id=u-d2]:target) .map__room--d2,
:root:has(.targets [id=u-d3]:target) .map__room--d3,
:root:has(.targets [id=u-d4]:target) .map__room--d4,
:root:has(.targets [id=u-d5]:target) .map__room--d5,
:root:has(.targets [id=u-d6]:target) .map__room--d6,
:root:has(.targets [id=u-armoury]:target) .map__room--armoury,
:root:has(.targets [id=u-toilet]:target) .map__room--toilet,
:root:has(.targets [id=u-bay]:target) .map__room--bay,
:root:has(.targets [id=u-containment]:target) .map__room--containment,
:root:has(.targets [id=u-airlock]:target) .map__room--airlock,
:root:has(.targets [id=u-a4]:target) .map__room--a4,
:root:has(.targets [id=u-a2]:target) .map__room--a2,
:root:has(.targets [id=u-a3]:target) .map__room--a3,
:root:has(.targets [id=u-a1]:target) .map__room--a1,
:root:has(.targets [id=u-office-corridor]:target) .map__room--office-corridor,
:root:has(.targets [id=u-server-corridor]:target) .map__room--server-corridor,
:root:has(.targets [id=u-d-corridor]:target) .map__room--d-corridor,
:root:has(.targets [id=u-ring-north]:target) .map__room--ring-north,
:root:has(.targets [id=u-ring-east]:target) .map__room--ring-east,
:root:has(.targets [id=u-ring-south]:target) .map__room--ring-south,
:root:has(.targets [id=u-ring-west]:target) .map__room--ring-west,
:root:has(.targets [id=u-armoury-corridor]:target) .map__room--armoury-corridor {
font-weight: bold;
background: var(--swatch-gba-light);
text-decoration: none;
cursor: default;
border: 0.4rem dashed white;
box-sizing: border-box;
}
:root:has(.targets [id=u-pantry]:target) .footage__selector--pantry,
:root:has(.targets [id=u-storage]:target) .footage__selector--storage,
:root:has(.targets [id=u-foyer]:target) .footage__selector--foyer,
:root:has(.targets [id=u-hangar]:target) .footage__selector--hangar,
:root:has(.targets [id=u-server]:target) .footage__selector--server,
:root:has(.targets [id=u-cafe]:target) .footage__selector--cafe,
:root:has(.targets [id=u-d1]:target) .footage__selector--d1,
:root:has(.targets [id=u-d2]:target) .footage__selector--d2,
:root:has(.targets [id=u-d3]:target) .footage__selector--d3,
:root:has(.targets [id=u-d4]:target) .footage__selector--d4,
:root:has(.targets [id=u-d5]:target) .footage__selector--d5,
:root:has(.targets [id=u-d6]:target) .footage__selector--d6,
:root:has(.targets [id=u-armoury]:target) .footage__selector--armoury,
:root:has(.targets [id=u-toilet]:target) .footage__selector--toilet,
:root:has(.targets [id=u-bay]:target) .footage__selector--bay,
:root:has(.targets [id=u-containment]:target) .footage__selector--containment,
:root:has(.targets [id=u-airlock]:target) .footage__selector--airlock,
:root:has(.targets [id=u-a4]:target) .footage__selector--a4,
:root:has(.targets [id=u-a2]:target) .footage__selector--a2,
:root:has(.targets [id=u-a3]:target) .footage__selector--a3,
:root:has(.targets [id=u-a1]:target) .footage__selector--a1,
:root:has(.targets [id=u-office-corridor]:target) .footage__selector--office-corridor,
:root:has(.targets [id=u-server-corridor]:target) .footage__selector--server-corridor,
:root:has(.targets [id=u-d-corridor]:target) .footage__selector--d-corridor,
:root:has(.targets [id=u-ring-north]:target) .footage__selector--ring-north,
:root:has(.targets [id=u-ring-east]:target) .footage__selector--ring-east,
:root:has(.targets [id=u-ring-south]:target) .footage__selector--ring-south,
:root:has(.targets [id=u-ring-west]:target) .footage__selector--ring-west,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__selector--armoury-corridor,
:root:has(.targets [id=u-outside]:target) .footage__selector--outside,
:root:has(.targets [id=u-all]:target) .footage__selector--all,
.footage__selector:active {
transform: none;
background-color: var(--swatch-gba-hpale);
color: var(--swatch-gba-dark);
cursor: default;
box-shadow:
0px 0px 0px transparent,
inset 0px 0.2rem 0px 0px var(--swatch-gba-medium);
padding-bottom: 0;
}
:root:has(.targets [id=u-pantry]:target) .footage__display--pantry,
:root:has(.targets [id=u-storage]:target) .footage__display--storage,
:root:has(.targets [id=u-foyer]:target) .footage__display--foyer,
:root:has(.targets [id=u-hangar]:target) .footage__display--hangar,
:root:has(.targets [id=u-server]:target) .footage__display--server,
:root:has(.targets [id=u-cafe]:target) .footage__display--cafe,
:root:has(.targets [id=u-d1]:target) .footage__display--d1,
:root:has(.targets [id=u-d2]:target) .footage__display--d2,
:root:has(.targets [id=u-d3]:target) .footage__display--d3,
:root:has(.targets [id=u-d4]:target) .footage__display--d4,
:root:has(.targets [id=u-d5]:target) .footage__display--d5,
:root:has(.targets [id=u-d6]:target) .footage__display--d6,
:root:has(.targets [id=u-armoury]:target) .footage__display--armoury,
:root:has(.targets [id=u-toilet]:target) .footage__display--toilet,
:root:has(.targets [id=u-bay]:target) .footage__display--bay,
:root:has(.targets [id=u-containment]:target) .footage__display--containment,
:root:has(.targets [id=u-airlock]:target) .footage__display--airlock,
:root:has(.targets [id=u-a4]:target) .footage__display--a4,
:root:has(.targets [id=u-a2]:target) .footage__display--a2,
:root:has(.targets [id=u-a3]:target) .footage__display--a3,
:root:has(.targets [id=u-a1]:target) .footage__display--a1,
:root:has(.targets [id=u-office-corridor]:target) .footage__display--office-corridor,
:root:has(.targets [id=u-server-corridor]:target) .footage__display--server-corridor,
:root:has(.targets [id=u-d-corridor]:target) .footage__display--d-corridor,
:root:has(.targets [id=u-ring-north]:target) .footage__display--ring-north,
:root:has(.targets [id=u-ring-east]:target) .footage__display--ring-east,
:root:has(.targets [id=u-ring-south]:target) .footage__display--ring-south,
:root:has(.targets [id=u-ring-west]:target) .footage__display--ring-west,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__display--armoury-corridor,
:root:has(.targets [id=u-outside]:target) .footage__display--outside,
:root:has(.targets [id=u-all]:target) .footage__display,
:root:has(#footer):has(.archive li:nth-child(n+13):nth-child(-n+15).selected) .footage__display {
display: block;
opacity: 1;
}
/* Show the new event alert in red, but make it black after being clicked */
.footage__selector .room-icon--new {
background-color: transparent;
animation: new-events-notification 2s ease forwards;
animation-play-state: paused;
display: none;
}
@keyframes new-events-notification {
0%, 70% { background-color: #f21a; }
100% { background-color: transparent; }
}
:root:has(.targets [id=u-pantry]:target) .footage__selector--pantry .room-icon--new,
:root:has(.targets [id=u-storage]:target) .footage__selector--storage .room-icon--new,
:root:has(.targets [id=u-foyer]:target) .footage__selector--foyer .room-icon--new,
:root:has(.targets [id=u-hangar]:target) .footage__selector--hangar .room-icon--new,
:root:has(.targets [id=u-server]:target) .footage__selector--server .room-icon--new,
:root:has(.targets [id=u-cafe]:target) .footage__selector--cafe .room-icon--new,
:root:has(.targets [id=u-d1]:target) .footage__selector--d1 .room-icon--new,
:root:has(.targets [id=u-d2]:target) .footage__selector--d2 .room-icon--new,
:root:has(.targets [id=u-d3]:target) .footage__selector--d3 .room-icon--new,
:root:has(.targets [id=u-d4]:target) .footage__selector--d4 .room-icon--new,
:root:has(.targets [id=u-d5]:target) .footage__selector--d5 .room-icon--new,
:root:has(.targets [id=u-d6]:target) .footage__selector--d6 .room-icon--new,
:root:has(.targets [id=u-armoury]:target) .footage__selector--armoury .room-icon--new,
:root:has(.targets [id=u-toilet]:target) .footage__selector--toilet .room-icon--new,
:root:has(.targets [id=u-bay]:target) .footage__selector--bay .room-icon--new,
:root:has(.targets [id=u-containment]:target) .footage__selector--containment .room-icon--new,
:root:has(.targets [id=u-airlock]:target) .footage__selector--airlock .room-icon--new,
:root:has(.targets [id=u-a4]:target) .footage__selector--a4 .room-icon--new,
:root:has(.targets [id=u-a2]:target) .footage__selector--a2 .room-icon--new,
:root:has(.targets [id=u-a3]:target) .footage__selector--a3 .room-icon--new,
:root:has(.targets [id=u-a1]:target) .footage__selector--a1 .room-icon--new,
:root:has(.targets [id=u-office-corridor]:target) .footage__selector--office-corridor .room-icon--new,
:root:has(.targets [id=u-server-corridor]:target) .footage__selector--server-corridor .room-icon--new,
:root:has(.targets [id=u-d-corridor]:target) .footage__selector--d-corridor .room-icon--new,
:root:has(.targets [id=u-ring-north]:target) .footage__selector--ring-north .room-icon--new,
:root:has(.targets [id=u-ring-east]:target) .footage__selector--ring-east .room-icon--new,
:root:has(.targets [id=u-ring-south]:target) .footage__selector--ring-south .room-icon--new,
:root:has(.targets [id=u-ring-west]:target) .footage__selector--ring-west .room-icon--new,
:root:has(.targets [id=u-armoury-corridor]:target) .footage__selector--armoury-corridor .room-icon--new,
:root:has(.targets [id=u-outside]:target) .footage__selector--outside .room-icon--new,
:root:has(.targets [id=u-all]:target) .footage__selector .room-icon--new {
animation-play-state: running;
}
/* Show the new event alert only for rooms with more than one event */
:root:has(.footage__display--hangar p:nth-of-type(2)) :is(.map__room--hangar, .footage__selector--hangar .room-icon--new),
:root:has(.footage__display--server p:nth-of-type(2)) :is(.map__room--server, .footage__selector--server .room-icon--new),
:root:has(.footage__display--pantry p:nth-of-type(2)) :is(.map__room--pantry, .footage__selector--pantry .room-icon--new),
:root:has(.footage__display--cafe p:nth-of-type(2)) :is(.map__room--cafe, .footage__selector--cafe .room-icon--new),
:root:has(.footage__display--a1 p:nth-of-type(2)) :is(.map__room--a1, .footage__selector--a1 .room-icon--new),
:root:has(.footage__display--a2 p:nth-of-type(2)) :is(.map__room--a2, .footage__selector--a2 .room-icon--new),
:root:has(.footage__display--a3 p:nth-of-type(2)) :is(.map__room--a3, .footage__selector--a3 .room-icon--new),
:root:has(.footage__display--a4 p:nth-of-type(2)) :is(.map__room--a4, .footage__selector--a4 .room-icon--new),
:root:has(.footage__display--d1 p:nth-of-type(2)) :is(.map__room--d1, .footage__selector--d1 .room-icon--new),
:root:has(.footage__display--d2 p:nth-of-type(2)) :is(.map__room--d2, .footage__selector--d2 .room-icon--new),
:root:has(.footage__display--d3 p:nth-of-type(2)) :is(.map__room--d3, .footage__selector--d3 .room-icon--new),
:root:has(.footage__display--d4 p:nth-of-type(2)) :is(.map__room--d4, .footage__selector--d4 .room-icon--new),
:root:has(.footage__display--d5 p:nth-of-type(2)) :is(.map__room--d5, .footage__selector--d5 .room-icon--new),
:root:has(.footage__display--d6 p:nth-of-type(2)) :is(.map__room--d6, .footage__selector--d6 .room-icon--new),
:root:has(.footage__display--containment p:nth-of-type(2)) :is(.map__room--containment, .footage__selector--containment .room-icon--new),
:root:has(.footage__display--airlock p:nth-of-type(2)) :is(.map__room--airlock, .footage__selector--airlock .room-icon--new),
:root:has(.footage__display--foyer p:nth-of-type(2)) :is(.map__room--foyer, .footage__selector--foyer .room-icon--new),
:root:has(.footage__display--armoury p:nth-of-type(2)) :is(.map__room--armoury, .footage__selector--armoury .room-icon--new),
:root:has(.footage__display--toilet p:nth-of-type(2)) :is(.map__room--toilet, .footage__selector--toilet .room-icon--new),
:root:has(.footage__display--storage p:nth-of-type(2)) :is(.map__room--storage, .footage__selector--storage .room-icon--new),
:root:has(.footage__display--bay p:nth-of-type(2)) :is(.map__room--bay, .footage__selector--bay .room-icon--new),
:root:has(.footage__display--server-corridor p:nth-of-type(2)) :is(.map__room--server-corridor, .footage__selector--server-corridor .room-icon--new),
:root:has(.footage__display--office-corridor p:nth-of-type(2)) :is(.map__room--office-corridor, .footage__selector--office-corridor .room-icon--new),
:root:has(.footage__display--d-corridor p:nth-of-type(2)) :is(.map__room--d-corridor, .footage__selector--d-corridor .room-icon--new),
:root:has(.footage__display--ring-north p:nth-of-type(2)) :is(.map__room--ring-north, .footage__selector--ring-north .room-icon--new),
:root:has(.footage__display--ring-east p:nth-of-type(2)) :is(.map__room--ring-east, .footage__selector--ring-east .room-icon--new),
:root:has(.footage__display--ring-south p:nth-of-type(2)) :is(.map__room--ring-south, .footage__selector--ring-south .room-icon--new),
:root:has(.footage__display--ring-west p:nth-of-type(2)) :is(.map__room--ring-west, .footage__selector--ring-west .room-icon--new),
:root:has(.footage__display--armoury-corridor p:nth-of-type(2)) :is(.map__room--armoury-corridor, .footage__selector--armoury-corridor .room-icon--new),
:root:has(.footage__display--outside p:nth-of-type(2)) :is(.map__room--outside, .footage__selector--outside .room-icon--new) {
content: "";
display: inline-flex;
}