/* ===== acts/act-aquarium.css ===== */
/*
 * The aquarium's stylesheet, scoped to its act.
 *
 * Generated by build/scope_css.py from 01_build/src/styles.css. Do not hand
 * edit: run the script instead, and read the report it prints.
 *
 * The room is unchanged. Every rule below weighs exactly what it weighed
 * before - `:where()` adds no specificity - and every value is the value the
 * first screen shipped with.
 */

:where(.act--act-aquarium) {
  color-scheme: dark;

  --aq-paper: #e6e1cf;
  --aq-paper-dim: #b0b6a3;
  --aq-paper-shadow: #8e9382;
  --aq-ink: #101914;

  --aq-brass: #c6ad75;
  --aq-brass-dim: #8d7b53;
  --aq-brass-deep: #5f5233;

  --aq-copper: #a9713f;
  --aq-copper-lit: #d9a06a;
  --aq-copper-dark: #4a2d18;

  --aq-verdigris: #3f6b55;
  --aq-iron: #101314;
  --aq-iron-lit: #2b3230;

  --aq-glass: #071c28;
  --aq-water-deep: #041827;

  --aq-courier: "Courier Prime", "Courier New", monospace;
  --aq-fell: "IM Fell English", "Iowan Old Style", "Baskerville", Georgia, serif;
}

:where(.act--act-aquarium) button:focus-visible {
  outline: 1px solid rgba(198, 173, 117, .75);
  outline-offset: 3px;
}

:where(.act--act-aquarium) .stillwater {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

:where(.act--act-aquarium) .room-wall {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(38, 52, 48, .3) 0%, rgba(9, 15, 16, 0) 62%),
    radial-gradient(70% 60% at 52% 52%, rgba(20, 34, 32, .55) 0%, rgba(4, 8, 9, 0) 78%),
    linear-gradient(178deg, #0a1113 0%, #060c0e 44%, #04090a 100%);
}

:where(.act--act-aquarium) .room-wall::before {
  /* Damp bloom and old plaster. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 30% at 18% 78%, rgba(43, 58, 46, .16) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(30% 26% at 78% 22%, rgba(48, 56, 40, .12) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(52% 40% at 46% 96%, rgba(28, 38, 32, .3) 0%, rgba(0, 0, 0, 0) 74%);
  mix-blend-mode: screen;
}

:where(.act--act-aquarium) .room-wall::after {
  /* Fine grain so the wall never reads as flat vector. */
  content: "";
  position: absolute;
  inset: -50%;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

:where(.act--act-aquarium) .room-wall__light {
  /* The only lamp in the building, long dead except for the tank. */
  position: absolute;
  top: -12%;
  left: 50%;
  width: 62%;
  height: 58%;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(120, 148, 128, .09) 0%,
    rgba(70, 96, 86, .04) 44%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(6px);
}

:where(.act--act-aquarium) .room-wall__grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

:where(.act--act-aquarium) .room-wall__seam {
  /* A panel joint in the far wall. */
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .34) 49.6%, rgba(120, 140, 130, .05) 50%, rgba(0, 0, 0, .3) 50.4%, rgba(0, 0, 0, 0) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

:where(.act--act-aquarium) .room-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 20px);
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vh, 26px) clamp(16px, 2.6vw, 44px) clamp(12px, 2vh, 22px);
  min-height: 100vh;
  min-height: 100dvh;
}

:where(.act--act-aquarium) .room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: clamp(8px, 1vh, 14px);
  border-bottom: 1px solid rgba(150, 168, 156, .09);
}

:where(.act--act-aquarium) .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(190, 200, 184, .58);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

:where(.act--act-aquarium) .sigil {
  width: 19px;
  height: 19px;
  color: rgba(198, 173, 117, .55);
  flex: none;
}

:where(.act--act-aquarium) .header-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
}

:where(.act--act-aquarium) .exit-lamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px 4px;
  border: 1px solid rgba(150, 168, 156, .16);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(24, 32, 30, .8), rgba(10, 15, 15, .9));
  box-shadow:
    inset 0 1px 0 rgba(180, 200, 186, .08),
    0 1px 3px rgba(0, 0, 0, .6);
}

:where(.act--act-aquarium) .exit-lamp__glass {
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(146, 170, 152, .4);
  text-shadow: 0 0 6px rgba(120, 160, 140, .2);
}

:where(.act--act-aquarium) .header-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(190, 200, 184, .5);
  white-space: nowrap;
}

:where(.act--act-aquarium) .venue {
  color: rgba(160, 172, 158, .3);
}

:where(.act--act-aquarium) .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8fb07a;
  box-shadow: 0 0 7px rgba(143, 176, 122, .7);
  animation: sw-aq-status-pulse 4.6s ease-in-out infinite;
}

:where(.act--act-aquarium) .tank {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

:where(.act--act-aquarium) .tank__bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  border: clamp(10px, 1.05vw, 18px) solid transparent;
  border-image: linear-gradient(148deg, #23282a 0%, #121617 26%, #1a1f20 48%, #0b0e0f 74%, #1d2223 100%) 1;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .9),
    inset 0 0 26px rgba(0, 0, 0, .85),
    0 26px 64px rgba(0, 0, 0, .72),
    0 2px 0 rgba(140, 158, 146, .05);
}

:where(.act--act-aquarium) .tank__bezel::before, :where(.act--act-aquarium) .tank__bezel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

:where(.act--act-aquarium) .tank__bezel::before {
  inset: calc(clamp(10px, 1.05vw, 18px) * -1);
  background:
    linear-gradient(180deg, rgba(150, 170, 156, .1) 0 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 100% 34% no-repeat,
    linear-gradient(180deg, rgba(150, 170, 156, .1) 0 1px, rgba(0, 0, 0, 0) 1px) 0 100% / 100% 34% no-repeat,
    linear-gradient(90deg, rgba(150, 170, 156, .09) 0 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 26% 100% no-repeat,
    linear-gradient(90deg, rgba(150, 170, 156, .09) 0 1px, rgba(0, 0, 0, 0) 1px) 100% 0 / 26% 100% no-repeat;
  opacity: .55;
}

:where(.act--act-aquarium) .tank__bezel::after {
  /* Faint verdigris where the iron has been wet for decades. */
  inset: 0;
  background:
    radial-gradient(26% 18% at 8% 12%, rgba(63, 107, 85, .16) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(22% 16% at 92% 86%, rgba(63, 107, 85, .13) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(14% 10% at 62% 4%, rgba(120, 92, 52, .1) 0%, rgba(0, 0, 0, 0) 74%);
  mix-blend-mode: screen;
}

:where(.act--act-aquarium) .tank__window {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--aq-water-deep);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .9),
    inset 0 0 60px rgba(0, 0, 0, .6);
  /* The thick glass: a green-black edge, the way old float glass looks. */
  border-radius: 2px;
  clip-path: inset(0 round 2px);
}

:where(.act--act-aquarium) .aquarium-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

:where(.act--act-aquarium) .water-glass-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(104deg, rgba(196, 220, 208, 0) 28%, rgba(186, 214, 202, .05) 38%, rgba(0, 0, 0, 0) 47%),
    linear-gradient(96deg, rgba(0, 0, 0, 0) 62%, rgba(170, 200, 190, .035) 71%, rgba(0, 0, 0, 0) 78%);
  mix-blend-mode: screen;
}

:where(.act--act-aquarium) .water-glass-scratches {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .3;
  background-image:
    linear-gradient(72deg, rgba(210, 226, 214, .05) 0 1px, rgba(0, 0, 0, 0) 1px) 12% 18% / 34% 46% no-repeat,
    linear-gradient(64deg, rgba(210, 226, 214, .04) 0 1px, rgba(0, 0, 0, 0) 1px) 62% 30% / 26% 38% no-repeat,
    radial-gradient(18% 12% at 78% 74%, rgba(196, 214, 200, .05) 0%, rgba(0, 0, 0, 0) 70%);
}

:where(.act--act-aquarium) .water-glass-edge {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(120, 168, 148, .09),
    inset 0 0 22px rgba(60, 130, 110, .1),
    inset 0 0 70px rgba(0, 0, 0, .5);
}

:where(.act--act-aquarium) .water-glass-etch {
  position: absolute;
  right: 4.5%;
  bottom: 8%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  opacity: .3;
  transform: rotate(-2deg);
}

:where(.act--act-aquarium) .water-glass-etch span {
  display: block;
  width: 1px;
  height: 11px;
  background: linear-gradient(180deg, rgba(206, 222, 208, 0), rgba(206, 222, 208, .55));
}

:where(.act--act-aquarium) .water-glass-etch span:nth-child(2) {
  height: 15px;
}

:where(.act--act-aquarium) .water-glass-etch span:nth-child(3) {
  height: 8px;
}

:where(.act--act-aquarium) .water-glass-etch i {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(206, 222, 208, .45);
  border-radius: 50%;
}

:where(.act--act-aquarium) .tank__sill {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 16px;
  height: clamp(26px, 3.2vh, 38px);
  margin-top: clamp(6px, 0.9vh, 12px);
  padding: 0 4px;
  border-top: 1px solid rgba(150, 168, 156, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .7);
  background: linear-gradient(180deg, #171b1c 0%, #0c1011 58%, #05090a 100%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .6);
}

:where(.act--act-aquarium) .sill-groove {
  position: absolute;
  inset: 4px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(150, 168, 156, .12) 18%, rgba(150, 168, 156, .12) 82%, rgba(0, 0, 0, 0));
}

:where(.act--act-aquarium) .sill-label {
  font-size: 10px;
  letter-spacing: .26em;
  color: rgba(150, 166, 152, .34);
  white-space: nowrap;
}

:where(.act--act-aquarium) .sill-service {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(126, 140, 128, .22);
  white-space: nowrap;
}

:where(.act--act-aquarium) .sill-switch {
  position: relative;
  width: 22px;
  height: 8px;
  border: 1px solid rgba(140, 158, 146, .18);
  border-radius: 1px;
  background: linear-gradient(180deg, #0b0f10, #131718);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8);
  flex: none;
}

:where(.act--act-aquarium) .sill-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 3px;
  height: 4px;
  border-radius: 50%;
  background: #9fbb84;
  box-shadow: 0 0 6px rgba(159, 187, 132, .8);
  animation: sw-aq-lamp-breathe 6.5s ease-in-out infinite;
}

:where(.act--act-aquarium) .glass-title {
  position: absolute;
  top: clamp(16px, 3.4vh, 40px);
  left: clamp(18px, 3.4vw, 56px);
  z-index: 5;
  max-width: min(38ch, 40%);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

:where(.act--act-aquarium) .eyebrow {
  margin: 0 0 clamp(8px, 1.2vh, 14px);
  font-size: clamp(9px, 0.78vw, 11px);
  letter-spacing: .38em;
  color: rgba(198, 173, 117, .5);
  text-transform: uppercase;
}

:where(.act--act-aquarium) .glass-title h1 {
  margin: 0;
  font-family: var(--aq-fell);
  font-size: clamp(30px, 3.6vw, 62px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: .005em;
  color: transparent;
  /* Gold leaf: uneven, slightly worn, never a flat plate of yellow. */
  background-image:
    radial-gradient(ellipse 16px 9px at 21% 34%, rgba(72, 58, 26, .5) 0%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(ellipse 11px 7px at 63% 68%, rgba(72, 58, 26, .44) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 9px 6px at 86% 26%, rgba(255, 244, 208, .34) 0%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(ellipse 13px 8px at 38% 82%, rgba(255, 240, 200, .26) 0%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(
      104deg,
      #7c6a41 0%,
      #c2a469 11%,
      #e8d49b 22%,
      #b08e4f 32%,
      #dcc489 44%,
      #f0e3b4 52%,
      #a8894c 63%,
      #cbb173 76%,
      #8d7746 89%,
      #b79c60 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0 rgba(24, 18, 6, .65))
    drop-shadow(0 0 14px rgba(198, 173, 117, .13));
}

:where(.act--act-aquarium) .glass-title h1 em {
  font-style: italic;
  letter-spacing: .015em;
  background-image:
    radial-gradient(ellipse 12px 7px at 34% 52%, rgba(255, 246, 214, .3) 0%, rgba(0, 0, 0, 0) 66%),
    linear-gradient(100deg, #8a7542 0%, #e2cd92 20%, #f4e9bd 34%, #b1904f 50%, #e6d194 66%, #9d8148 82%, #c2a76c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(24, 18, 6, .55));
}

:where(.act--act-aquarium) .dedication {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 1.6vh, 18px);
}

:where(.act--act-aquarium) .dedication__rule {
  flex: 1 1 auto;
  max-width: 68px;
  height: 1px;
  background: linear-gradient(90deg, rgba(198, 173, 117, 0), rgba(198, 173, 117, .42), rgba(198, 173, 117, 0));
}

:where(.act--act-aquarium) .dedication p {
  margin: 0;
  font-family: var(--aq-fell);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 17px);
  color: rgba(224, 214, 186, .72);
  letter-spacing: .02em;
}

:where(.act--act-aquarium) .inspection-slip {
  position: absolute;
  top: clamp(14px, 2.6vh, 34px);
  right: clamp(14px, 2.6vw, 40px);
  z-index: 5;
  width: clamp(168px, 15vw, 214px);
  padding: 16px 15px 18px;
  transform: rotate(3.4deg);
  color: rgba(38, 40, 32, .88);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.62;
  /* A card that has been in a drawer since the building closed. */
  background:
    radial-gradient(ellipse 60% 40% at 78% 14%, rgba(150, 132, 92, .16) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(ellipse 44% 30% at 16% 82%, rgba(126, 108, 74, .14) 0%, rgba(0, 0, 0, 0) 66%),
    linear-gradient(168deg, #cdc7ae 0%, #bdb69c 38%, #a9a288 74%, #968f77 100%);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .55),
    0 3px 8px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 252, 238, .16),
    inset 0 -14px 22px rgba(74, 66, 44, .2);
  border-radius: 1px;
}

:where(.act--act-aquarium) .inspection-slip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(
      102deg,
      rgba(0, 0, 0, 0) 47%,
      rgba(58, 50, 32, .3) 49.2%,
      rgba(255, 250, 232, .12) 50.4%,
      rgba(0, 0, 0, 0) 52.6%
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)'/%3E%3C/svg%3E");
  background-blend-mode: multiply, normal;
  mix-blend-mode: multiply;
  opacity: .38;
}

:where(.act--act-aquarium) .inspection-slip::after {
  /* Edge wear: the corners have gone soft. */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 26px 18px at 0% 0%, rgba(24, 20, 12, .3) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 22px 16px at 100% 100%, rgba(24, 20, 12, .26) 0%, rgba(0, 0, 0, 0) 70%);
  mix-blend-mode: multiply;
}

:where(.act--act-aquarium) .slip-tape {
  position: absolute;
  top: -11px;
  width: 54px;
  height: 23px;
  background: linear-gradient(150deg, rgba(206, 198, 168, .5) 0%, rgba(184, 176, 148, .42) 52%, rgba(166, 158, 132, .48) 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  backdrop-filter: blur(1px);
}

:where(.act--act-aquarium) .slip-tape--left {
  left: -13px;
  transform: rotate(-24deg);
}

:where(.act--act-aquarium) .slip-tape--right {
  right: -11px;
  transform: rotate(17deg);
}

:where(.act--act-aquarium) .slip-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 5px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(58, 52, 36, .32);
}

:where(.act--act-aquarium) .slip-index {
  font-family: var(--aq-fell);
  font-size: 15px;
  color: rgba(44, 42, 30, .78);
}

:where(.act--act-aquarium) .slip-confidential {
  font-size: 7.5px;
  letter-spacing: .17em;
  color: rgba(70, 58, 40, .62);
}

:where(.act--act-aquarium) .slip-collection {
  margin: 0 0 7px;
  font-size: 8.5px;
  letter-spacing: .19em;
  color: rgba(52, 48, 32, .7);
}

:where(.act--act-aquarium) .slip-species {
  margin: 0;
  padding-bottom: 15px;
  font-size: 8.5px;
  letter-spacing: .13em;
  color: rgba(46, 44, 30, .62);
  line-height: 1.75;
}

:where(.act--act-aquarium) .slip-stamp {
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 2px 6px 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(158, 38, 30, .78);
  border: 2px solid rgba(158, 38, 30, .62);
  border-radius: 1px;
  transform: rotate(-13deg);
  mix-blend-mode: multiply;
  opacity: .82;
  text-shadow: 0 0 1px rgba(158, 38, 30, .3);
}

:where(.act--act-aquarium) .slip-hole {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 7px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(18, 20, 14, .5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 250, 232, .14);
}

:where(.act--act-aquarium) .quote-slip {
  position: absolute;
  left: clamp(18px, 3.4vw, 56px);
  bottom: clamp(18px, 3.2vh, 40px);
  z-index: 5;
  width: min(38ch, 42%);
  padding: 14px 16px 15px;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(8, 18, 18, .78), rgba(5, 12, 13, .88));
  border: 1px solid rgba(150, 168, 156, .13);
  border-left: 2px solid rgba(198, 173, 117, .34);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

:where(.act--act-aquarium) .quote-slip--visible {
  opacity: 1;
  transform: translateY(0);
}

:where(.act--act-aquarium) .quote-slip__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: .26em;
  color: rgba(198, 173, 117, .5);
}

:where(.act--act-aquarium) .quote-slip__index {
  color: rgba(150, 166, 152, .38);
}

:where(.act--act-aquarium) .quote-slip__text {
  margin: 0;
  font-family: var(--aq-fell);
  font-size: clamp(14px, 1.24vw, 19px);
  line-height: 1.48;
  color: rgba(228, 220, 196, .88);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
  will-change: opacity;
}

:where(.act--act-aquarium) .quote-slip__text--changing {
  opacity: 0;
  transform: translateY(3px);
}

:where(.act--act-aquarium) .is-immersion .quote-slip {
  opacity: 0 !important;
  pointer-events: none;
}

:where(.act--act-aquarium) .is-reduced .quote-slip, :where(.act--act-aquarium) .is-reduced .quote-slip__text {
  transition: none !important;
}

:where(.act--act-aquarium) .resident-plaque {
  position: absolute;
  right: clamp(16px, 2.8vw, 44px);
  bottom: clamp(18px, 3.2vh, 40px);
  z-index: 5;
  width: clamp(232px, 21vw, 296px);
  padding: 3px;
  transform: rotate(-.5deg);
  border-radius: 3px;
  /* Copper plate with black enamel, screwed onto the tank. */
  background: linear-gradient(148deg, #9c7048 0%, #78502c 22%, #53361e 48%, #8a6238 72%, #4a2d19 100%);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, .62),
    0 4px 10px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(226, 186, 142, .2),
    inset 0 -1px 0 rgba(0, 0, 0, .6);
}

:where(.act--act-aquarium) .resident-plaque::before {
  /* Wear along the plate edge. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30px 12px at 4% 96%, rgba(228, 190, 148, .3) 0%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(ellipse 26px 10px at 96% 8%, rgba(40, 24, 12, .42) 0%, rgba(0, 0, 0, 0) 70%);
  mix-blend-mode: overlay;
}

:where(.act--act-aquarium) .resident-plaque::after {
  /* Enamel: not quite black, never clean. */
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 12%, rgba(70, 78, 66, .16) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(ellipse 50% 40% at 78% 88%, rgba(52, 44, 30, .22) 0%, rgba(0, 0, 0, 0) 72%);
  mix-blend-mode: screen;
}

:where(.act--act-aquarium) .plaque-rim {
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  border: 1px solid rgba(255, 214, 170, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
  pointer-events: none;
}

:where(.act--act-aquarium) .plate-screw {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #c39a6e 0%, #8e6038 42%, #513017 78%, #241609 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .6),
    inset 0 -1px 1px rgba(0, 0, 0, .5),
    inset 0 1px 1px rgba(232, 200, 160, .26);
}

:where(.act--act-aquarium) .plate-screw::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 14%;
  width: 72%;
  height: 1px;
  transform: translateY(-50%) rotate(38deg);
  background: rgba(30, 16, 6, .7);
  box-shadow: 0 1px 0 rgba(255, 220, 176, .22);
}

:where(.act--act-aquarium) .plate-screw--tl { top: 8px; left: 8px; }

:where(.act--act-aquarium) .plate-screw--tr { top: 8px; right: 8px; }

:where(.act--act-aquarium) .plate-screw--bl { bottom: 8px; left: 8px; }

:where(.act--act-aquarium) .plate-screw--br { bottom: 8px; right: 8px; }

:where(.act--act-aquarium) .plaque-inner {
  position: relative;
  z-index: 1;
  padding: 15px 17px 16px;
  border-radius: 2px;
  background:
    linear-gradient(172deg, #16191a 0%, #0d1011 46%, #12100e 100%);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .8),
    inset 0 0 22px rgba(0, 0, 0, .7);
}

:where(.act--act-aquarium) .exhibit-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(150, 166, 152, .13);
  font-size: 7.5px;
  letter-spacing: .1em;
  color: rgba(168, 182, 166, .46);
}

:where(.act--act-aquarium) .plaque-number-mark {
  font-family: var(--aq-fell);
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(198, 173, 117, .44);
}

:where(.act--act-aquarium) .resident-plaque h2 {
  margin: 0 0 9px;
  font-family: var(--aq-fell);
  font-weight: 400;
  font-size: clamp(17px, 1.42vw, 23px);
  line-height: 1.16;
  color: rgba(226, 218, 194, .93);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}

:where(.act--act-aquarium) .description {
  margin: 0 0 13px;
  font-family: var(--aq-fell);
  font-size: clamp(12.5px, 1.02vw, 15px);
  line-height: 1.56;
  color: rgba(198, 200, 178, .68);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}

:where(.act--act-aquarium) .observe {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px 9px;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: rgba(214, 196, 148, .82);
  border: 1px solid rgba(198, 173, 117, .28);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(52, 48, 36, .5), rgba(20, 22, 20, .62));
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 176, .1),
    0 2px 8px rgba(0, 0, 0, .45);
  transition: border-color .35s ease, color .35s ease, background .35s ease;
}

:where(.act--act-aquarium) .observe:hover {
  color: rgba(236, 216, 164, .95);
  border-color: rgba(198, 173, 117, .5);
  background: linear-gradient(180deg, rgba(64, 58, 42, .55), rgba(24, 26, 23, .68));
}

:where(.act--act-aquarium) .observe-arrow {
  transition: transform .35s ease;
}

:where(.act--act-aquarium) .observe:hover .observe-arrow {
  transform: translate(2px, -2px);
}

:where(.act--act-aquarium) .plaque-note {
  margin: 11px 0 0;
  font-size: 8px;
  letter-spacing: .2em;
  color: rgba(150, 164, 148, .32);
}

:where(.act--act-aquarium) .fish-target {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* The button is positioned by the engine each frame. */
  transform: translate3d(-9999px, -9999px, 0);
}

:where(.act--act-aquarium) .fish-target:hover {
  cursor: pointer;
}

:where(.act--act-aquarium) .fish-target:focus-visible {
  outline: 1px solid rgba(198, 173, 117, .55);
  outline-offset: 4px;
}

:where(.act--act-aquarium) .room-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: clamp(8px, 1.2vh, 14px);
}

:where(.act--act-aquarium) .footer-mark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

:where(.act--act-aquarium) .footnote {
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(168, 182, 166, .42);
}

:where(.act--act-aquarium) .footer-room {
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(150, 164, 148, .24);
}

:where(.act--act-aquarium) .controls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
}

:where(.act--act-aquarium) .room-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 9px;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: rgba(176, 190, 174, .55);
  border: 1px solid rgba(150, 168, 156, .13);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(20, 26, 25, .6), rgba(8, 13, 13, .7));
  box-shadow: inset 0 1px 0 rgba(160, 180, 166, .05);
  transition: color .3s ease, border-color .3s ease;
}

:where(.act--act-aquarium) .room-control:hover {
  color: rgba(206, 218, 202, .82);
  border-color: rgba(150, 168, 156, .26);
}

:where(.act--act-aquarium) .control-light {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(150, 168, 156, .25);
  box-shadow: 0 0 5px rgba(150, 168, 156, .2);
  transition: background .3s ease, box-shadow .3s ease;
}

:where(.act--act-aquarium) .room-control[aria-pressed="true"] {
  color: rgba(214, 200, 158, .78);
  border-color: rgba(198, 173, 117, .3);
}

:where(.act--act-aquarium) .room-control[aria-pressed="true"] .control-light {
  background: #c6ad75;
  box-shadow: 0 0 8px rgba(198, 173, 117, .6);
}

:where(.act--act-aquarium) .escape-note {
  margin-left: 4px;
  padding: 1px 4px 2px;
  font-size: 8px;
  letter-spacing: .14em;
  color: rgba(198, 173, 117, .6);
  border: 1px solid rgba(198, 173, 117, .26);
  border-radius: 1px;
}

:where(.act--act-aquarium) .is-immersion .room-header, :where(.act--act-aquarium) .is-immersion .room-footer, :where(.act--act-aquarium) .is-immersion .glass-title, :where(.act--act-aquarium) .is-immersion .inspection-slip, :where(.act--act-aquarium) .is-immersion .resident-plaque, :where(.act--act-aquarium) .is-immersion .tank__sill {
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}

:where(.act--act-aquarium) .is-immersion .room-shell {
  padding-left: 0;
  padding-right: 0;
}

:where(.act--act-aquarium) .is-immersion .tank__bezel {
  opacity: .18;
}

:where(.act--act-aquarium) .is-immersion .room-wall__seam {
  opacity: .1;
}

:where(.act--act-aquarium) .is-reduced .status-dot, :where(.act--act-aquarium) .is-reduced .sill-switch::after {
  animation: none;
}

:where(.act--act-aquarium) .is-reduced .quote-slip__text {
  animation: none;
}

@keyframes sw-aq-quote-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sw-aq-lamp-breathe {
  0%, 100% { opacity: .82; }
  50% { opacity: .42; }
}

@keyframes sw-aq-status-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: .38; }
}

@media (max-width: 1120px) {
  :where(.act--act-aquarium) .glass-title {
    max-width: min(40ch, 46%);
  }

  :where(.act--act-aquarium) .inspection-slip {
    width: clamp(150px, 17vw, 186px);
    padding: 13px 13px 15px;
    font-size: 9px;
  }

  :where(.act--act-aquarium) .resident-plaque {
    width: clamp(210px, 26vw, 258px);
  }
}

@media (max-width: 860px) {
  :where(.act--act-aquarium) .sill-service {
    display: none;
  }
}

@media (max-width: 760px) {
  :where(.act--act-aquarium) .room-shell {
    gap: 8px;
    padding: 10px 12px 10px;
  }

  :where(.act--act-aquarium) .brand {
    font-size: 9px;
    letter-spacing: .16em;
  }

  :where(.act--act-aquarium) .room-header {
    flex-wrap: wrap;
    row-gap: 7px;
  }

  :where(.act--act-aquarium) .brand {
    flex: 1 1 100%;
  }

  :where(.act--act-aquarium) .brand span {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  :where(.act--act-aquarium) .header-right {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 10px;
  }

  :where(.act--act-aquarium) .header-status {
    font-size: 9px;
    letter-spacing: .14em;
  }

  :where(.act--act-aquarium) .venue {
    display: inline;
  }

  :where(.act--act-aquarium) .tank {
    min-height: 72vh;
  }

  :where(.act--act-aquarium) .glass-title {
    top: 10px;
    left: 13px;
    max-width: 60%;
  }

  :where(.act--act-aquarium) .glass-title h1 {
    font-size: clamp(20px, 6.8vw, 31px);
    line-height: 1.03;
  }

  :where(.act--act-aquarium) .eyebrow {
    font-size: 7.5px;
    letter-spacing: .24em;
    margin-bottom: 5px;
  }

  :where(.act--act-aquarium) .dedication {
    margin-top: 7px;
    gap: 7px;
  }

  :where(.act--act-aquarium) .dedication p {
    font-size: 11px;
  }

  :where(.act--act-aquarium) .inspection-slip {
    top: 10px;
    bottom: auto;
    right: 8px;
    width: 124px;
    padding: 9px 9px 11px;
    font-size: 7.5px;
    transform: rotate(2.4deg);
  }

  :where(.act--act-aquarium) .slip-index {
    font-size: 11px;
  }

  :where(.act--act-aquarium) .slip-confidential, :where(.act--act-aquarium) .slip-collection, :where(.act--act-aquarium) .slip-species {
    font-size: 6.5px;
    letter-spacing: .08em;
  }

  :where(.act--act-aquarium) .slip-species {
    padding-bottom: 12px;
  }

  :where(.act--act-aquarium) .slip-stamp {
    font-size: 9px;
    padding: 1px 4px 2px;
    border-width: 1px;
    right: 3px;
    bottom: 4px;
  }

  :where(.act--act-aquarium) .slip-tape {
    width: 40px;
    height: 17px;
  }

  :where(.act--act-aquarium) .resident-plaque {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    padding: 2px;
    transform: none;
  }

  :where(.act--act-aquarium) .plaque-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "number number"
      "title   observe"
      "desc    observe"
      "note    observe";
    align-items: start;
    column-gap: 12px;
    row-gap: 1px;
    padding: 9px 11px 10px;
  }

  :where(.act--act-aquarium) .exhibit-number {
    grid-area: number;
    font-size: 6.5px;
    letter-spacing: .1em;
    margin-bottom: 5px;
    padding-bottom: 4px;
  }

  :where(.act--act-aquarium) .resident-plaque h2 {
    grid-area: title;
    font-size: clamp(13px, 3.9vw, 17px);
    margin-bottom: 3px;
  }

  :where(.act--act-aquarium) .description {
    grid-area: desc;
    font-size: clamp(10.5px, 3vw, 12.5px);
    margin-bottom: 0;
    line-height: 1.42;
  }

  :where(.act--act-aquarium) .observe {
    grid-area: observe;
    align-self: center;
    padding: 11px 13px 12px;
    font-size: 8.5px;
    white-space: nowrap;
  }

  :where(.act--act-aquarium) .plaque-note {
    grid-area: note;
    margin-top: 5px;
    font-size: 6.5px;
  }

  :where(.act--act-aquarium) .quote-slip {
    left: 8px;
    right: 8px;
    bottom: calc(var(--plate-h, 172px) + 16px);
    top: auto;
    width: auto;
    padding: 9px 11px 10px;
  }

  :where(.act--act-aquarium) .quote-slip__text {
    font-size: 13px;
  }

  :where(.act--act-aquarium) .water-glass-etch {
    display: none;
  }

  :where(.act--act-aquarium) .sill-label {
    font-size: 8.5px;
    letter-spacing: .18em;
  }

  :where(.act--act-aquarium) .room-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }

  :where(.act--act-aquarium) .footer-mark {
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
  }

  :where(.act--act-aquarium) .footnote {
    font-size: 9px;
    letter-spacing: .16em;
  }

  :where(.act--act-aquarium) .footer-room {
    font-size: 8px;
    letter-spacing: .14em;
  }

  :where(.act--act-aquarium) .controls {
    justify-content: space-between;
  }

  :where(.act--act-aquarium) .room-control {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 8px 12px;
    font-size: 8.5px;
    letter-spacing: .13em;
  }
}

@media (max-width: 760px) and (max-height: 700px) {
  :where(.act--act-aquarium) .tank {
    min-height: 68vh;
  }

  :where(.act--act-aquarium) .glass-title h1 {
    font-size: clamp(21px, 6.4vw, 30px);
  }

  :where(.act--act-aquarium) .quote-slip {
    top: 74px;
  }
}

@media (max-width: 380px) {
  :where(.act--act-aquarium) .inspection-slip {
    width: 132px;
  }

  :where(.act--act-aquarium) .resident-plaque {
    width: min(62%, 210px);
  }

  :where(.act--act-aquarium) .brand span {
    max-width: 34vw;
  }
}

@media (min-width: 1500px) {
  :where(.act--act-aquarium) .room-shell {
    max-width: 1680px;
  }
}

:where(.act--act-aquarium) .fish-target {border-radius:0;outline:none!important;box-shadow:none!important;}

:where(.act--act-aquarium) .fish-target:focus-visible {outline:none!important;}

:where(.act--act-aquarium) .fish-target:focus-visible::after {content:"";position:absolute;bottom:1px;left:calc(50% - 12px);width:24px;height:2px;background:rgba(210,192,139,.8);}

@media (max-width: 760px) and (max-height: 700px) {
  :where(.act--act-aquarium) .quote-slip { top: auto; }
}

@media (max-width: 380px) {
  :where(.act--act-aquarium) .resident-plaque { left: 8px; right: 8px; width: auto; max-width: none; }

  :where(.act--act-aquarium) .plaque-inner { grid-template-columns: minmax(0,1fr) auto; gap: 1px 7px; padding: 9px 9px 10px; }

  :where(.act--act-aquarium) .resident-plaque h2 { font-size: 14px; line-height: 1.19; }

  :where(.act--act-aquarium) .description { font-size: 10.5px; line-height: 1.44; }

  :where(.act--act-aquarium) .observe { max-width: 139px; white-space: normal; text-align: center; justify-content: center;
             line-height: 1.65; letter-spacing: .12em; padding: 10px 7px; }

  :where(.act--act-aquarium) .plaque-note { font-size: 6px; }
}

/*
 * The room's own type and ink.
 *
 * In the first screen these lived on `body`, which was nothing but the
 * aquarium. Here they belong to the act: the rest of the site has its own
 * type, and the room keeps the one it was drawn with.
 */
:where(.act--act-aquarium) {
  color: var(--aq-paper);
  font-family: var(--aq-courier);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: #03080a;
  color-scheme: dark;
}