@charset "UTF-8";
:root {
  --night:#161e22;
  --night2:#1e292d;
  --ivory:#f0e7d5;
  --orange:#ed7959;
  --acid:#d3d899;
  --muted:#aab7b4;
  --ink:#27343a;
  --paper:#dfd8c4;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Arial,sans-serif;
  --mono:'SFMono-Regular',Consolas,monospace;
  --poster:Impact,'Arial Narrow',sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
}

body {
  margin:0;
  background:var(--night);
  color:var(--ivory);
  font:16px/1.7 var(--sans);
  overflow-x:clip;
}

button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--acid);
  outline-offset:6px;
}

::selection {
  color:var(--night);
  background:var(--orange);
}

button:disabled {
  cursor:default;
}

.skip {
  position:fixed;
  top:10px;
  left:10px;
  z-index:100;
  padding:10px 20px;
  background:var(--paper);
  color:var(--night);
  transform:translateY(-150%);
}

.skip:focus {
  transform:translateY(0);
}

.eyebrow {
  font:12px/1.6 var(--mono);
  letter-spacing:.12em;
}

.orange {
  color:var(--orange);
}

p,h1,h2,h3 {
  margin-top:0;
}

.masthead {
  height:105px;
  padding:0 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:absolute;
  z-index:5;
  width:100%;
  gap:25px;
  border-bottom:1px solid #e5eadb24;
}

.brand {
  display:flex;
  gap:17px;
  align-items:center;
  font:12px/1.7 var(--mono);
  letter-spacing:.1em;
}

.brand b {
  font:600 15px/1.5 var(--sans);
  letter-spacing:.14em;
}

.brand-mark {
  position:relative;
  font:48px/1 var(--poster);
  color:var(--orange);
}

.brand-mark>span {
  position:absolute;
  bottom:-8px;
  right:-9px;
  color:var(--acid);
  font:21px var(--serif);
}

.header-actions {
  display:flex;
  align-items:center;
  gap:25px;
}

.serious-link {
  font-size:13px;
  border-bottom:1px solid #b6c3ba70;
  padding:8px 0;
}

.serious-link:hover {
  color:var(--orange);
}

.scene {
  position:relative;
  min-height:850px;
  height:min(1100px,100svh);
  overflow:hidden;
  isolation:isolate;
  background:var(--night2);
}

.scene-art {
  position:absolute;
  inset:0;
  z-index:-3;
}

.scene-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:75% 60%;
  opacity:.85;
}

.scene-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#111b20 0%,#111b20eb 23%,#111b2070 57%,#111b2020 100%),linear-gradient(0deg,#101b20e0,transparent 22%);
}

.scene-copy {
  position:relative;
  padding:175px 0 140px 7%;
  max-width:700px;
}

.scene-copy>.eyebrow {
  margin-bottom:28px;
}

h1 {
  font:clamp(80px,9.4vw,145px)/.88 var(--poster);
  letter-spacing:-.045em;
  margin:0 0 36px;
}

h1 em {
  display:block;
  font:italic 1.11em/.9 var(--serif);
  font-weight:400;
  color:var(--orange);
  margin-left:100px;
  letter-spacing:-.075em;
  margin-top:4px;
}

.scene-intro {
  font:30px/1.25 var(--serif);
  letter-spacing:-.02em;
  margin-bottom:22px;
}

.scene-description {
  font-size:14px;
  color:#d0d5c7;
  line-height:1.8;
}

.enter-link {
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin-top:15px;
  font-size:14px;
}

.circle-arrow {
  border:1px solid #e5eadb66;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--orange);
  transition:transform .2s;
}

.enter-link:hover .circle-arrow {
  transform:translateY(5px);
}

.scene-note {
  position:absolute;
  right:6%;
  top:57%;
  padding:18px 24px;
  transform:rotate(3deg);
  background:#dfd8c4;
  color:var(--ink);
  box-shadow:8px 12px 0 #101b2070;
  max-width:280px;
  border-left:4px solid var(--orange);
}

.scene-note .eyebrow {
  color:#9e3e2c;
  font-size:12px;
}

.scene-note p {
  font:italic 26px/1.25 var(--serif);
  margin:10px 0 0;
}

.scene-bottom {
  position:absolute;
  bottom:0;
  left:5%;
  right:5%;
  border-top:1px solid #e5eadb40;
  padding:25px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:#c2cec8;
}

.scene-bottom a {
  font-size:13px;
}

.section-pad {
  padding:85px 7%;
}

.section-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #e5eadb38;
  padding-top:24px;
}

.section-top>.eyebrow {
  color:var(--orange);
}

.visited-count {
  font:12px/1.6 var(--mono);
  color:var(--muted);
}

.section-title {
  display:flex;
  justify-content:space-between;
  gap:35px;
  align-items:end;
  margin:35px 0 50px;
}

h2 {
  font:normal clamp(42px,4.7vw,70px)/1.04 var(--serif);
  letter-spacing:-.045em;
  margin-bottom:0;
}

h2 em {
  font-weight:400;
  color:var(--orange);
}

.section-title>p {
  font-size:16px;
  color:var(--muted);
  margin:0 0 4px;
}

.note-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}

.note-card {
  position:relative;
  text-align:left;
  display:flex;
  flex-direction:column;
  border:1px solid #a6b5a943;
  background:#202a2e;
  padding:24px 24px 20px;
  min-height:355px;
  transform:rotate(var(--rotate,0deg));
  transition:transform .35s,background .25s,border-color .25s;
}

.note-card:nth-child(1) {
  --rotate:-2deg;
}

.note-card:nth-child(2) {
  --rotate:1.5deg;
}

.note-card:nth-child(3) {
  --rotate:-1deg;
}

.note-card:nth-child(4) {
  --rotate:2deg;
}

.note-card:hover {
  transform:translateY(-12px) rotate(0);
  background:#2b383c;
  border-color:var(--orange);
}

.note-number {
  font:italic 32px/1.1 var(--serif);
  color:var(--orange);
  margin-bottom:25px;
}

.note-label {
  font:12px/1.6 var(--mono);
  letter-spacing:.08em;
  color:var(--acid);
  margin-bottom:15px;
}

.note-title {
  font:25px/1.2 var(--serif);
  letter-spacing:-.03em;
  margin-bottom:23px;
}

.note-teaser {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:30px;
}

.note-open {
  font:12px/1.6 var(--mono);
  margin-top:auto;
  border-top:1px solid #a6b5a943;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
}

.note-card.is-visited:after {
  content:'READ';
  position:absolute;
  right:18px;
  top:20px;
  color:var(--acid);
  font:12px var(--mono);
  border:1px solid currentColor;
  padding:3px 8px;
  transform:rotate(9deg);
}

.footer {
  padding-block:35px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:25px;
  border-top:1px solid #e5eadb38;
  font-size:14px;
}

.footer>span {
  font:12px/1.6 var(--mono);
  letter-spacing:.07em;
  margin-right:auto;
  color:var(--muted);
}

.footer a:hover {
  color:var(--orange);
}

dialog {
  width:min(800px,calc(100% - 32px));
  max-height:90svh;
  border:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:16px 16px 0 #0c151dcc;
  transform:rotate(-.35deg);
}

dialog::backdrop {
  background:#07131cde;
  backdrop-filter:blur(8px);
}

.dossier-top {
  position:sticky;
  top:0;
  background:var(--paper);
  border-bottom:1px solid #27343a40;
  padding:19px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  z-index:1;
}

.close-dialog {
  background:none;
  border:1px solid #27343a80;
  padding:7px 12px;
  min-height:40px;
  font-size:13px;
}

.close-dialog span {
  font-size:21px;
  margin-left:12px;
}

.dossier-body {
  padding:45px 50px 55px;
}

.dossier-body .eyebrow {
  color:#9e3e2c;
}

.dossier-body h2 {
  font-size:47px;
  line-height:1.07;
  margin-bottom:30px;
}

.dossier-body p {
  font-size:17px;
  line-height:1.8;
}

.dossier-body a {
  border-bottom:1px solid #9e3e2c;
  color:#9e3e2c;
}

.dossier-body blockquote {
  border-left:2px solid #9e3e2c;
  padding-left:20px;
  margin:30px 0 0;
  font:italic 25px/1.4 var(--serif);
}

body.dialog-open {
  overflow:hidden;
}

.noscript-note {
  padding:30px;
  background:var(--paper);
  color:var(--ink);
}

.noscript-note a {
  text-decoration:underline;
}

.ambient-button {
  padding:7px 10px;
  min-height:40px;
  border:1px solid #e5eadb45;
  background:#0d1a20aa;
  font:12px/1.6 var(--mono);
  white-space:nowrap;
}

.ambient-button span {
  color:var(--acid);
  margin-left:5px;
}

.ambient-button:hover {
  border-color:var(--orange);
}

.scene-art {
  inset:-20px;
  will-change:transform;
  transform:translate3d(var(--pan-x,0px),var(--pan-y,0px),0) scale(1.025);
}

.scene-art img {
  object-position:50% 50%;
  opacity:1;
}

.scene-shade {
  background:linear-gradient(90deg,#111b20d9 0%,#111b20a0 27%,#111b2015 65%,#111b2000),linear-gradient(0deg,#101b20e8,transparent 25%);
}

#weather {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none;
}

.hotspots {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hotspot {
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  padding:5px;
  background:none;
  border:0;
  pointer-events:auto;
  text-align:left;
  transition:transform .25s;
  max-width:245px;
  min-height:48px;
}

.hotspot-mark {
  display:grid;
  place-items:center;
  position:relative;
  flex:none;
  width:36px;
  height:36px;
  border:1px solid var(--acid);
  border-radius:50%;
  background:#101a20dc;
  color:var(--acid);
  font:24px/1 var(--serif);
  box-shadow:0 0 0 5px #d3d89916;
}

.hotspot-mark:before {
  content:'';
  position:absolute;
  inset:-8px;
  border:1px solid #d3d89980;
  border-radius:50%;
  animation:echo 3.6s ease-out infinite;
}

.hotspot:nth-of-type(2) .hotspot-mark:before {
  animation-delay:.9s;
}

.hotspot:nth-of-type(3) .hotspot-mark:before {
  animation-delay:1.8s;
}

.hotspot:nth-of-type(4) .hotspot-mark:before {
  animation-delay:2.7s;
}

.hotspot-label {
  padding:10px 14px;
  background:#111d23eb;
  border-left:2px solid var(--acid);
  color:var(--ivory);
  font:italic 21px/1.2 var(--serif);
  box-shadow:3px 4px 0 #060e1150;
}

.hotspot-label small {
  display:block;
  font:12px/1.7 var(--mono);
  letter-spacing:.08em;
  color:var(--acid);
  margin-bottom:4px;
}

.hotspot:hover,.hotspot:focus-visible {
  transform:translateY(-5px);
}

.hotspot:hover .hotspot-label {
  border-color:var(--orange);
}

.hotspot.is-visited .hotspot-mark {
  background:var(--acid);
  color:var(--night);
}

.hotspot.is-visited .hotspot-mark:before {
  animation:none;
  opacity:0;
}

.hotspot-systems {
  left:57%;
  top:61%;
}

.hotspot-code {
  left:77%;
  top:55%;
}

.hotspot-people {
  left:72%;
  top:25%;
}

.hotspot-person {
  left:68%;
  top:79%;
}

.scene-instruction {
  position:absolute;
  right:6%;
  top:135px;
  font-size:12px;
  color:#eadfcb;
  letter-spacing:.13em;
  padding-bottom:10px;
  border-bottom:1px solid #eadfcb50;
}

.scene-observation {
  display:flex;
  gap:22px;
  align-items:center;
  font-size:13px;
}

.scene-observation b {
  font:12px/1.6 var(--mono);
  letter-spacing:.15em;
  color:var(--orange);
}

.scene-bottom {
  align-items:center;
}

.note-card {
  transform-style:preserve-3d;
}

.note-card:hover {
  transform:perspective(700px) translateY(-12px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
}

.note-card:nth-child(1) {
  background:#d9d5bc;
  color:var(--ink);
  border-color:#d9d5bc;
}

.note-card:nth-child(1) .note-number {
  color:#923c2d;
}

.note-card:nth-child(1) .note-label {
  color:#52624e;
}

.note-card:nth-child(1) .note-teaser {
  color:#4b5b59;
}

.note-card:nth-child(1) .note-open {
  border-color:#59675555;
}

.note-card:nth-child(1).is-visited:after {
  color:#6a462d;
}

.note-card:nth-child(3) {
  background:#283e43;
}

.note-card:nth-child(4) {
  background:#412f2b;
}

.completion-note {
  margin-top:38px;
  color:var(--acid);
  font:italic 22px/1.5 var(--serif);
  text-align:center;
}

.inner-world {
  background:var(--paper);
  color:var(--ink);
  position:relative;
  padding-bottom:75px;
  border-top:8px solid var(--orange);
}

.inner-heading {
  padding-top:65px;
  padding-bottom:45px;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:20px;
}

.inner-heading>.eyebrow {
  grid-column:1/-1;
  color:#933f2b;
  margin-bottom:10px;
}

.inner-heading h2 {
  font-size:65px;
}

.inner-heading h2 em {
  color:#973d2c;
}

.inner-heading>p:last-child {
  align-self:center;
  justify-self:center;
  text-align:center;
  margin:0;
  font-size:16px;
  color:#4b5b59;
}

.inner-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:0 5%;
  align-items:stretch;
  background:var(--night);
  box-shadow:13px 16px 0 #27343a20;
}

.inner-illustration {
  position:relative;
  margin:0;
  overflow:hidden;
  min-height:590px;
}

.inner-illustration img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:42% 50%;
  transition:transform 1.5s cubic-bezier(.2,.7,.3,1);
}

.inner-illustration:hover img {
  transform:scale(1.04);
}

.inner-illustration:after {
  content:'';
  position:absolute;
  inset:70% 0 0;
  background:linear-gradient(transparent,#081a20cc);
}

.inner-illustration figcaption {
  position:absolute;
  bottom:22px;
  left:26px;
  right:20px;
  font:12px/1.7 var(--mono);
  letter-spacing:.1em;
  color:var(--ivory);
  z-index:1;
}

.dialogue {
  padding:34px 38px 24px;
  color:var(--ivory);
  background:#172329;
  position:relative;
  min-width:0;
}

.voice-tabs {
  display:flex;
  gap:0;
  border-bottom:1px solid #b0bbab45;
  position:relative;
  margin-bottom:32px;
}

.voice-tabs button {
  flex:1;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font:12px/1.5 var(--mono);
  padding:13px 6px;
  min-height:48px;
  transition:color .2s,border-color .2s;
  min-width:0;
}

.voice-tabs button[aria-selected=true] {
  color:var(--orange);
  border-bottom-color:var(--orange);
}

.voice-tabs button:hover {
  color:var(--ivory);
}

.voice-line {
  font:italic 30px/1.25 var(--serif);
  letter-spacing:-.02em;
  min-height:114px;
  margin-bottom:18px;
}

.thought-choices {
  display:grid;
  gap:8px;
  margin-bottom:30px;
}

.thought-choices button {
  text-align:left;
  background:#26353b;
  border:1px solid #b0bbab38;
  padding:11px 13px;
  font-size:14px;
  line-height:1.5;
  display:flex;
  gap:13px;
  align-items:baseline;
}

.thought-choices button span:first-child {
  color:var(--orange);
  font:12px var(--mono);
  flex:none;
}

.thought-choices button:hover {
  border-color:var(--orange);
}

.thought-choices button[aria-pressed=true] {
  background:#36473e;
  border-color:#bdc591;
  color:var(--acid);
}

.thought-response {
  border-left:2px solid var(--orange);
  padding-left:20px;
  min-height:214px;
}

.thought-response .eyebrow {
  font-size:12px;
  color:var(--orange);
  margin-bottom:12px;
}

.thought-response p:not(.eyebrow) {
  font-size:16px;
  line-height:1.75;
  margin-bottom:12px;
  color:#d1d8ce;
}

.thought-open {
  background:transparent;
  border:0;
  border-bottom:1px solid #d3d89960;
  padding:9px 0;
  font-size:13px;
  color:var(--acid);
}

.thought-open span {
  margin-left:10px;
}

.authored-note {
  font:12px/1.7 var(--mono);
  color:var(--muted);
  margin:22px 0 0;
}

.answer-arrives {
  animation:answer-in .38s ease both;
}

.closing {
  position:relative;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:45px;
  padding-top:95px;
  padding-bottom:110px;
  overflow:hidden;
}

.closing-index {
  color:var(--orange);
  max-width:210px;
  padding-top:9px;
}

.closing h2 {
  font-size:78px;
  margin-bottom:30px;
}

.closing h2 em {
  margin-left:80px;
}

.closing>div:nth-child(2) {
  position:relative;
  z-index:1;
}

.closing p {
  font-size:17px;
  color:#bdcbc4;
}

.closing-email {
  font:30px/1.5 var(--serif);
  border-bottom:1px solid var(--orange);
  padding-bottom:8px;
  overflow-wrap:anywhere;
}

.closing-email span {
  color:var(--orange);
  margin-left:18px;
}

.closing-links {
  display:flex;
  flex-wrap:wrap;
  gap:25px;
  margin-top:35px;
  font-size:14px;
  color:var(--muted);
}

.closing-links a:hover {
  color:var(--orange);
}

.end-mark {
  position:absolute;
  right:5%;
  bottom:-60px;
  z-index:0;
  font:italic 500px/1 var(--serif);
  color:#d4ded208;
  transform:rotate(12deg);
  pointer-events:none;
}

.dossier-body {
  position:relative;
}

.dossier-body:before {
  content:'';
  position:absolute;
  top:20px;
  right:20px;
  width:70px;
  height:2px;
  background:#9e3e2c;
  transform:rotate(-9deg);
}

dialog[open] {
  animation:dossier-in .3s ease both;
}

.dossier-navigation {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  padding:0 50px 35px;
}

.dossier-navigation button {
  background:transparent;
  border:1px solid #27343a60;
  color:var(--ink);
  font-size:13px;
  padding:10px 15px;
}

.dossier-navigation button:hover {
  background:#27343a10;
}

.dossier-body h3 {
  font:27px/1.3 var(--serif);
  margin-top:30px;
  margin-bottom:10px;
}

.dossier-body .note-date {
  font:12px/1.7 var(--mono);
  color:#52624e;
  margin-bottom:10px;
}

.motion-paused *,.motion-paused *:before,.motion-paused *:after {
  animation:none!important;
  transition:none!important;
}

.motion-paused {
  scroll-behavior:auto;
}

.motion-paused .scene-art {
  transform:none;
}

.motion-paused .note-card:hover {
  transform:none;
}

.motion-paused .inner-illustration:hover img {
  transform:none;
}

.reveal-ready {
  transition:opacity .75s ease,translate .75s ease;
  opacity:0;
  translate:0 22px;
}

.reveal-ready.in-view {
  opacity:1;
  translate:0 0;
}

.motion-paused .reveal-ready {
  opacity:1;
  translate:none;
}

@keyframes echo {
  0% {
    transform:scale(.9);
    opacity:.65;
  }
  80%,100% {
    transform:scale(1.6);
    opacity:0;
  }
}

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

@keyframes dossier-in {
  from {
    opacity:0;
    translate:0 18px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}

@media(max-width:1100px) {
  .note-grid {
    grid-template-columns:repeat(2,1fr);
    gap:22px;
  }
  .note-card {
    min-height:300px;
  }
  .scene-copy {
    padding-left:6%;
    max-width:520px;
  }
  .hotspot {
    max-width:190px;
  }
  .hotspot-label {
    font-size:18px;
    padding:9px 10px;
  }
  .hotspot-label small {
    font-size:12px;
  }
  .hotspot-code {
    left:75%;
    top:51%;
  }
  .hotspot-systems {
    left:57%;
    top:61%;
  }
  .hotspot-people {
    left:71%;
    top:27%;
  }
  .dialogue {
    padding:28px 26px;
  }
  .voice-line {
    font-size:27px;
  }
  .header-actions {
    gap:12px;
  }
}

@media(max-width:700px) {
  .masthead {
    height:90px;
    padding-inline:6%;
    gap:14px;
  }
  .brand {
    font-size:12px;
    gap:12px;
  }
  .brand b {
    font-size:13px;
  }
  .brand-mark {
    font-size:39px;
  }
  .serious-link {
    font-size:12px;
  }
  .scene {
    min-height:850px;
    height:100svh;
    max-height:980px;
  }
  .scene-art img {
    object-position:65% 50%;
    opacity:.6;
  }
  .scene-shade {
    background:linear-gradient(90deg,#111b20eb,#111b2070),linear-gradient(0deg,#111b20,transparent 80%);
  }
  .scene-copy {
    padding:145px 6% 170px;
    max-width:100%;
  }
  .scene-copy>.eyebrow {
    font-size:12px;
  }
  h1 {
    font-size:95px;
    line-height:.9;
    margin-bottom:29px;
  }
  h1 em {
    margin-left:72px;
  }
  .scene-intro {
    font-size:28px;
  }
  .scene-description {
    font-size:14px;
  }
  .scene-note {
    display:none;
  }
  .scene-bottom {
    left:6%;
    right:6%;
    padding-block:25px;
    align-items:start;
    flex-direction:column;
    gap:8px;
  }
  .scene-bottom .eyebrow {
    font-size:12px;
  }
  .section-pad {
    padding:60px 6%;
  }
  .section-top {
    gap:15px;
  }
  .section-top>.eyebrow {
    max-width:200px;
  }
  .visited-count {
    white-space:nowrap;
    font-size:12px;
  }
  .section-title {
    display:block;
    margin:26px 0 35px;
  }
  .section-title>p {
    margin-top:25px;
  }
  .note-grid {
    gap:18px;
  }
  .note-card {
    padding:20px 17px;
    min-height:345px;
    transform:none!important;
  }
  .note-number {
    margin-bottom:20px;
  }
  .note-title {
    font-size:23px;
  }
  .note-teaser {
    font-size:14px;
  }
  .note-teaser br {
    display:none;
  }
  .note-label {
    font-size:12px;
  }
  .note-open {
    font-size:12px;
  }
  .note-card.is-visited:after {
    right:10px;
    top:20px;
    font-size:12px;
  }
  .footer {
    padding-block:30px;
    gap:15px 25px;
  }
  .footer>span {
    width:100%;
    margin-right:0;
  }
  .dossier-body {
    padding:30px 25px 40px;
  }
  .dossier-body h2 {
    font-size:36px;
  }
  .dossier-top {
    padding:15px 20px;
  }
  dialog {
    transform:none;
  }
  .dossier-body p {
    font-size:16px;
  }
}

@media(max-width:390px) {
  .brand>span:last-child {
    max-width:140px;
  }
  .serious-link {
    max-width:90px;
  }
  .note-grid {
    grid-template-columns:1fr;
  }
  .note-card {
    min-height:270px;
  }
  .note-title {
    font-size:29px;
  }
  .note-number {
    margin-bottom:12px;
  }
  .note-label {
    margin-bottom:13px;
  }
}

.dossier-top .close-dialog:focus-visible,.dossier-body a:focus-visible,.dossier-navigation button:focus-visible {
  outline-color:#9e3e2c;
}

.note-card:first-child:focus-visible {
  outline-color:var(--orange);
}

@media(max-width:900px) {
  .hotspots {
    display:none;
  }
  .scene-copy {
    max-width:640px;
  }
  .scene-art img {
    object-position:70% 50%;
  }
  .scene-shade {
    background:linear-gradient(90deg,#111b20df 0%,#111b20aa 40%,#111b2040),linear-gradient(0deg,#101b20e8,transparent 50%);
  }
  .scene {
    min-height:850px;
  }
  .inner-heading {
    grid-template-columns:1fr 1fr;
  }
  .inner-heading h2 {
    font-size:54px;
  }
  .inner-layout {
    grid-template-columns:1fr;
  }
  .inner-illustration {
    min-height:0;
    aspect-ratio:1.7;
  }
  .dialogue {
    padding:35px 40px;
  }
  .voice-line {
    min-height:0;
    margin-bottom:27px;
    max-width:470px;
  }
  .thought-choices {
    grid-template-columns:1fr 1fr;
  }
  .thought-response {
    min-height:185px;
  }
  .inner-heading>p:last-child br {
    display:initial;
  }
  .closing {
    grid-template-columns:1fr;
    gap:25px;
  }
  .closing-index {
    max-width:none;
  }
  .closing h2 {
    font-size:70px;
  }
  .scene-observation {
    align-items:start;
    flex-direction:column;
    gap:6px;
  }
  .scene-bottom>a {
    white-space:nowrap;
  }
  .header-actions {
    gap:10px;
  }
  .ambient-button {
    padding-inline:8px;
  }
}

@media(max-width:700px) {
  .masthead {
    height:122px;
    align-items:flex-start;
    padding-top:20px;
    flex-wrap:wrap;
  }
  .brand {
    font-size:12px;
  }
  .header-actions {
    display:contents;
  }
  .serious-link {
    position:absolute;
    right:6%;
    top:24px;
    max-width:none!important;
  }
  .ambient-button {
    position:absolute;
    top:76px;
    min-height:30px;
    padding:3px 8px;
    font-size:12px;
  }
  .ambient-button#weather-toggle {
    left:6%;
  }
  .ambient-button#motion-toggle {
    left:calc(6% + 99px);
  }
  .scene-copy {
    padding-top:162px;
    padding-bottom:165px;
  }
  .scene {
    min-height:860px;
    height:auto;
  }
  .scene-description br {
    display:none;
  }
  .scene-description {
    max-width:360px;
  }
  .scene-art img {
    object-position:69% 50%;
    opacity:.78;
  }
  .scene-shade {
    background:linear-gradient(90deg,#101a20e8,#101a2070),linear-gradient(0deg,#101b20,transparent 75%);
  }
  .scene-bottom {
    gap:18px;
    align-items:start;
  }
  .scene-observation {
    font-size:13px;
  }
  .scene-observation b {
    font-size:12px;
  }
  .inner-heading {
    grid-template-columns:1fr;
    padding-bottom:35px;
    padding-top:50px;
    gap:20px;
  }
  .inner-heading>.eyebrow {
    margin-bottom:0;
  }
  .inner-heading h2 {
    font-size:50px;
  }
  .inner-heading>p:last-child {
    max-width:340px;
  }
  .inner-layout {
    margin-inline:5%;
    box-shadow:7px 9px 0 #27343a20;
  }
  .inner-illustration {
    aspect-ratio:1.2;
  }
  .inner-illustration figcaption {
    font-size:12px;
    left:20px;
  }
  .dialogue {
    padding:20px 20px 24px;
  }
  .voice-tabs {
    margin-bottom:28px;
  }
  .voice-tabs button {
    font-size:12px;
    padding-inline:3px;
  }
  .voice-line {
    font-size:28px;
  }
  .thought-choices {
    grid-template-columns:1fr;
  }
  .thought-response {
    padding-left:15px;
    min-height:0;
  }
  .thought-response p:not(.eyebrow) {
    font-size:16px;
  }
  .inner-world {
    padding-bottom:50px;
  }
  .closing {
    padding-top:55px;
    padding-bottom:60px;
  }
  .closing h2 {
    font-size:64px;
  }
  .closing h2 em {
    margin-left:70px;
  }
  .closing p {
    font-size:16px;
  }
  .closing p br {
    display:none;
  }
  .closing-email {
    font-size:25px;
  }
  .closing-email span {
    margin-left:10px;
  }
  .closing-links {
    gap:16px;
    flex-direction:column;
    margin-top:26px;
  }
  .end-mark {
    font-size:340px;
  }
  .dossier-navigation {
    padding:0 25px 30px;
  }
  .dossier-top>.eyebrow {
    font-size:12px;
  }
  .dossier-body:before {
    display:none;
  }
}

@media(max-width:390px) {
  h1 {
    font-size:86px;
  }
  .scene {
    min-height:840px;
  }
  .scene-copy {
    padding-bottom:170px;
  }
  .voice-tabs button {
    font-size:12px;
  }
  .closing-email {
    font-size:23px;
  }
  .scene-bottom .scene-observation {
    max-width:260px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

.voice-tabs button {
  font-family:var(--sans);
}

@media (max-width:700px) {
  .brand > span:last-child {
    font-size:0;
    line-height:1;
  }
  .brand > span:last-child > br {
    display:none;
  }
  .brand b {
    display:block;
    font-size:14px;
  }
}


/* Case-file edition: saturated blue cover, dark dialogue, warm paper inside. */
:root{--case-blue:#226bb6;--case-deep:#0b3774}
#dossier{border:12px solid var(--case-blue);border-left-width:30px;background:#e7e4d8;box-shadow:inset 4px 0 0 #06376a,18px 20px 0 #030d19aa}
.dossier-top{background:var(--case-deep);color:#fff0d4;border-bottom:4px solid #162f56}
.dossier-top .close-dialog{color:#fff0d4;border-color:#d3e5f080}
.inner-world{background:#102029;color:#eee5d2;border-top-color:#276ba5}
.inner-heading>p:last-child{color:#b6c8cd}.inner-heading h2 em,.inner-heading>.eyebrow{color:#ec9779}
/* A blue inventory ledger, dialogue choices, and small interruptions. */
[hidden]{display:none!important}.scene{min-height:940px;height:100svh;perspective:1800px}.scene-art img{object-position:50% 55%}.scene-shade{background:linear-gradient(90deg,#101b2050,#101b2025 42%,#07111bbf 60%,#07111bed),linear-gradient(0deg,#101b20f5,transparent 35%)}.scene-copy{position:absolute;top:173px;left:57%;right:5%;max-width:550px;padding:0;z-index:2}.scene-copy>.eyebrow{font-size:12px;letter-spacing:.07em;margin-bottom:25px}.scene-copy h1{font-size:78px;margin:0 0 32px;line-height:.85;letter-spacing:-.02em}.scene-copy h1 em{display:inline;margin-left:13px;font-size:78px;letter-spacing:-.04em}.arrival-dialogue{border-left:3px solid #8ec9d280;padding:6px 0 6px 25px;background:linear-gradient(90deg,#08121a80,transparent)}.arrival-dialogue>p:first-child{font:19px/1.6 var(--serif);color:#e3dccb;margin-bottom:20px}.arrival-dialogue b{font:700 14px/1.8 var(--sans);letter-spacing:.025em;color:#72bfcf}.arrival-dialogue b span{font-weight:400;color:#a9c5c9}.arrival-dialogue .scene-description{font-size:16px;line-height:1.8;color:#a8b9bc;margin-bottom:23px}.arrival-choices{display:grid;gap:5px}.arrival-choices button,.arrival-choices a{display:flex;gap:15px;background:none;border:0;padding:9px 0;text-align:left;font:17px/1.45 var(--serif);color:#c8c4b5;transition:color .2s,translate .3s}.arrival-choices button>span,.arrival-choices a>span{font:15px var(--mono);color:#e7a078}.arrival-choices button:hover,.arrival-choices a:hover{color:#ffbe82;translate:6px 0}.scene-bottom{font-size:14px;left:6%;right:6%;background:#0b172091;padding:22px;bottom:20px;border-left:3px solid var(--orange);border-top:0}.scene-observation{max-width:75%;font:17px/1.5 var(--serif)}.scene-observation b{font-size:12px}.scene-bottom>a{font-size:14px;white-space:nowrap}.ledger-object{position:absolute;left:9%;top:155px;width:min(430px,38vw);aspect-ratio:3/4;transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--ledger-y,4deg)) rotateY(var(--ledger-x,-7deg)) rotateZ(-7deg);transition:transform .7s cubic-bezier(.16,.8,.22,1.25);z-index:2}.ledger-object:hover{transition:transform .13s ease-out}.ledger-cover{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;transform:translateZ(28px);transform-style:preserve-3d;text-align:left}.ledger-cover img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(10px 12px 5px #07101b99)}.ledger-cover:hover img{filter:drop-shadow(8px 10px 10px #2379d540)}.cover-name{position:absolute;top:20.4%;left:31%;right:21%;color:#133a60;font:clamp(20px,2vw,29px)/1 var(--poster);letter-spacing:.04em;transform:rotate(-.8deg);text-align:center}.cover-stamp{position:absolute;top:53%;left:27%;font:14px/1.8 var(--mono);border:2px solid #93b6daa8;color:#b6d0e8;padding:11px 15px;transform:rotate(8deg);opacity:.84;letter-spacing:.06em}.cover-prompt{position:absolute;left:26%;bottom:15%;font:12px/1.6 var(--mono);letter-spacing:.08em;color:#bcd3ef;border-bottom:1px solid #bcd3ef80;padding-bottom:5px}.ledger-pages{position:absolute;inset:10% 8% 5% 10%;background:#cbd1c6;transform:translateZ(11px);box-shadow:2px 2px 0 #53627b,4px 4px 0 #ced8d7,6px 6px 0 #3b5176}.ledger-shadow{position:absolute;inset:10% 2% 0 10%;background:#030c1ae0;filter:blur(19px);transform:translateZ(-15px) translateY(25px);pointer-events:none}
.hotspots{z-index:1}.hotspot{opacity:0;transition:opacity .25s;max-width:200px}.reveal-objects .hotspot,.hotspot:focus-within{opacity:1}.hotspot-label{font-size:17px;padding:9px 12px}.hotspot-mark,.hotspot-label{transform:translate(var(--magnet-x,0px),var(--magnet-y,0px));transition:transform .4s cubic-bezier(.2,.8,.25,1.4)}.hotspot-person{left:42%;top:73%}.hotspot-systems{left:38%;top:57%}.hotspot-code{left:41%;top:40%}.hotspot-people{left:32%;top:20%}.scene-instruction{top:118px;right:6%;font-size:12px;border:0;color:#b4cad0}.field-notes{background:#0d1c29;padding-top:65px;padding-bottom:70px;border-top:1px solid #34658f}.section-top{border-color:#3d6f9666}.section-title{margin-bottom:40px}.section-title h2{font-size:60px}.note-grid{perspective:1600px;gap:20px}.note-card,.note-card:nth-child(1),.note-card:nth-child(3),.note-card:nth-child(4){background:#154778;color:#e5e8dc;border:1px solid #548bb0;box-shadow:5px 7px 0 #08223c,7px 10px 0 #51758b66;transform:rotate(var(--rotate,0deg)) rotateY(-4deg)}.note-card:nth-child(2){background:#1c508d}.note-card:nth-child(3){background:#244763}.note-card:nth-child(4){background:#163762}.note-card .note-label,.note-card:nth-child(1) .note-label{color:#b8d5dd}.note-card .note-number,.note-card:nth-child(1) .note-number{color:#ebad7d}.note-card .note-teaser,.note-card:nth-child(1) .note-teaser{color:#c2d0d0;font-size:16px}.note-card .note-open,.note-card:nth-child(1) .note-open{border-color:#a2c5d34a;font-size:12px}.note-card:hover{background:#286699;box-shadow:10px 18px 20px #010b1455;border-color:#a6d2e8}.note-grid:has(.note-card:hover) .note-card:not(:hover){opacity:.65;filter:saturate(.6)}.note-card{transition:transform .5s cubic-bezier(.2,.8,.25,1.2),background .3s,opacity .3s,filter .3s}.note-card.is-visited:after,.note-card:nth-child(1).is-visited:after{color:#d4dcaa}
.inner-world{padding-top:0}.inner-heading{padding-top:55px}.inner-layout{box-shadow:12px 16px 0 #050d16;border:1px solid #5c8c9d66}.inner-heading h2{font-size:62px}.inner-illustration{min-height:770px}.dialogue{background:#0d171c;padding:34px;color:#e8e3d3;border-left:5px solid #456c83}.voice-tabs{isolation:isolate;border:1px solid #5a787a7a;background:#182a30;padding:4px;margin-bottom:27px;overflow:visible}.voice-tabs button{position:relative;z-index:1;border:0!important;padding:11px 8px;color:#a6bec5;font:14px var(--sans);background:none!important}.voice-tabs button[aria-selected=true]{color:#f1e9d7}.voice-fluid{position:absolute;z-index:0;inset:4px auto 4px 4px;width:calc((100% - 8px)/3);background:#386682;border:1px solid #75a6b4;border-radius:40% 20% 25% 15%/15% 20% 20% 15%;transform:translateX(calc(var(--voice-index,0)*100%));transition:transform .6s cubic-bezier(.2,.85,.25,1.18),background .4s}.dialogue[data-skill=perspective] .voice-fluid{background:#614b75;border-color:#a183b5}.voice-line{font:italic 29px/1.35 var(--serif);color:#d6e0d7;margin-bottom:22px;min-height:80px}.thought-choices{gap:5px}.thought-choices button{background:transparent;border:0;border-left:2px solid transparent;border-radius:0;padding:9px 8px;min-height:42px;text-align:left;font:17px/1.4 var(--serif);color:#c3c6bb}.thought-choices button:hover,.thought-choices button[aria-pressed=true]{background:#a7825612;color:#ffbf86;border-left-color:#dc9c68}.thought-response{padding-left:18px;border-left:2px solid #638e9b;margin-top:24px;min-height:0}.thought-response .eyebrow{font-size:12px;color:#82b7c5}.thought-response p:not(.eyebrow){font-size:17px;line-height:1.8}.authored-note{font-size:12px;color:#91a5ac;margin:20px 0 0}.skill-check{margin-top:28px;padding-top:22px;border-top:1px solid #46657366}.skill-check>.eyebrow{font-size:12px;color:#cda783;margin-bottom:22px}.check-controls{display:flex;gap:20px;align-items:center}.dice-tray{display:flex;gap:22px;padding:6px 10px;perspective:500px}.die{position:relative;width:38px;height:38px;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.6,.25,1.15);flex:none}.die-face{position:absolute;inset:0;width:38px;height:38px;display:grid;place-items:center;backface-visibility:hidden;background:#ece0c7;border:1px solid #a99576;color:#393b39;font:42px/1 Georgia,serif;box-shadow:inset 0 0 5px #7f694c55}.face-1{transform:translateZ(19px)}.face-2{transform:rotateY(90deg) translateZ(19px)}.face-3{transform:rotateY(180deg) translateZ(19px)}.face-4{transform:rotateY(-90deg) translateZ(19px)}.face-5{transform:rotateX(90deg) translateZ(19px)}.face-6{transform:rotateX(-90deg) translateZ(19px)}#roll-check{border:1px solid #c8c9b0;border-radius:0;background:#d6d6c5;color:#193440;padding:10px 15px;font-size:14px;text-align:left;min-height:48px}#roll-check span{display:block;font:12px/1.6 var(--mono);color:#5c6761;margin-top:3px}#roll-check:disabled{opacity:.6}#check-result{font:16px/1.6 var(--serif);color:#c6c9bb;margin:23px 0 0;min-height:75px}.skill-check[data-result=success] #check-result{color:#a8d4b8}.skill-check[data-result=failure] #check-result{color:#e5a28c}
#dossier{width:min(1000px,calc(100% - 36px));border:13px solid #276ba9;border-left-width:24px;transform:none;background:#e7e4d8;perspective:1600px;overflow-x:hidden}.dossier-top{padding:17px 24px;background:#123e73}.dossier-top>.eyebrow{color:#dce5de}.dossier-layout{display:grid;grid-template-columns:155px minmax(0,1fr);min-height:470px}.case-index{display:flex;flex-direction:column;gap:5px;background:#184b82;padding:25px 14px}.case-index>.eyebrow{color:#b8d2df;margin-bottom:10px;font-size:12px}.case-index button{background:transparent;border:0;border-left:2px solid transparent;color:#b8d3dd;padding:10px;text-align:left;font:14px/1.5 var(--sans)}.case-index button[aria-current=page]{color:#fff1d2;background:#0b2a51;border-left-color:#e6ac76}.case-index button:hover{background:#265d96;color:#fff0d0}#secret-toggle{margin-top:auto;color:#deb994;border:1px dashed #92b2c15e;font-size:13px;padding:12px 9px}.dossier-body{padding:35px 40px 30px;transform-origin:left center;touch-action:pan-y;background:#e7e4d8}.dossier-body:before{display:none}.dossier-body h2{font-size:39px;line-height:1.12}.dossier-body h3{font:25px/1.25 var(--serif);margin:28px 0 20px}.dossier-body p{font-size:17px}.dossier-body blockquote{font-size:24px}.dossier-navigation{background:#e7e4d8;padding:18px 34px 24px 190px;margin:0;border-top:1px solid #707d7940}.dossier-navigation button{font-size:14px}.page-turn{animation:turn-sheet .45s cubic-bezier(.2,.7,.2,1)}.page-gesture{font:12px/1.6 var(--mono)!important;color:#748077;margin:28px 0 0}.ledger-flap{display:none;position:absolute;inset:55px 0 0 0;width:100%;height:100%;background:#1b5eaa url('assets/blue-ledger.webp') center/cover;z-index:5;transform-origin:left center;pointer-events:none;backface-visibility:hidden}.ledger-opening .ledger-flap{display:block;animation:open-ledger .7s cubic-bezier(.2,.6,.25,1) both}#secret-note{position:relative;padding:24px;background:#d8ca98;border:1px dashed #8e825d;box-shadow:4px 6px 0 #65604722;transform:rotate(-1deg);margin-top:35px;animation:slip-found .5s cubic-bezier(.2,.8,.25,1.2)}#secret-note .eyebrow{font-size:12px}#secret-note h3{font-size:27px;margin-top:12px}#secret-note p{font-size:16px}#secret-note p:last-child{margin-bottom:0}.closing{padding-top:60px;padding-bottom:65px}.closing h2{font-size:60px}
@keyframes turn-sheet{0%{transform:rotateY(-14deg) translateX(15px);opacity:.45}100%{transform:rotateY(0) translateX(0);opacity:1}}@keyframes open-ledger{0%{transform:rotateY(0);opacity:1}70%{opacity:1}100%{transform:rotateY(-140deg);opacity:0;visibility:hidden}}@keyframes slip-found{from{opacity:0;transform:translateY(25px) rotate(5deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@media(max-width:1100px){.ledger-object{left:6%;width:38%;top:210px}.scene-copy{left:51%;right:5%;top:190px}.scene-copy h1,.scene-copy h1 em{font-size:65px}.scene-copy h1 em{margin-left:8px}.arrival-dialogue{padding-left:20px}.arrival-dialogue>p:first-child{font-size:18px}.hotspots{display:none}.cover-stamp{font-size:12px;padding:8px 11px}.cover-name{font-size:24px}.inner-layout{grid-template-columns:1fr 1.15fr}.dialogue{padding:27px}.inner-illustration{min-height:810px}.voice-tabs button{font-size:13px;padding-inline:5px}.check-controls{gap:15px}.dice-tray{gap:15px;padding-inline:5px}#roll-check{padding:10px;font-size:13px}.dossier-layout{grid-template-columns:140px minmax(0,1fr)}.dossier-body{padding:30px}.dossier-navigation{padding-left:170px}}
@media(max-width:800px){.scene{height:auto;min-height:1380px}.ledger-object{left:50%;top:150px;width:310px;margin-left:-155px}.scene-copy{left:7%;right:7%;top:630px;max-width:none}.scene-copy h1,.scene-copy h1 em{font-size:61px}.scene-copy>.eyebrow{margin-bottom:20px}.arrival-dialogue>p:first-child{font-size:19px}.arrival-dialogue .scene-description{font-size:16px}.scene-bottom{left:5%;right:5%;bottom:20px;padding:18px;flex-direction:column;gap:15px}.scene-observation{max-width:100%;font-size:16px}.scene-instruction{display:none}.cover-name{font-size:22px}.cover-stamp{font-size:12px}.cover-prompt{font-size:12px;left:25%;bottom:15%}.ledger-shadow{filter:blur(15px)}.inner-layout{grid-template-columns:1fr}.inner-illustration{min-height:0;aspect-ratio:1.8}.dialogue{padding:28px}.inner-heading{grid-template-columns:1fr}.inner-heading h2{font-size:49px}.section-title h2{font-size:50px}.scene-copy h1{margin-bottom:24px}.voice-tabs button{font-size:14px;padding:12px 7px}.check-controls{gap:23px}.dice-tray{gap:22px}#roll-check{font-size:14px;padding:12px}.dossier-layout{grid-template-columns:1fr}.case-index{flex-direction:row;flex-wrap:wrap;gap:4px;padding:12px}.case-index>.eyebrow{display:none}.case-index button{flex:1;padding:8px 6px;font-size:12px;min-width:70px}.case-index button br{display:none}#secret-toggle{margin:0;min-width:100%;font-size:13px;text-align:center;padding:8px}.dossier-body{padding:28px 23px}.dossier-body h2{font-size:34px}.dossier-body p{font-size:16px}.dossier-top{padding:13px 16px}.dossier-navigation{padding:15px 22px 23px}#dossier{border-width:9px}.page-gesture{display:block!important}.ledger-flap{inset:54px 0 0}.note-grid{gap:24px}.note-title{font-size:28px}.note-card{min-height:315px}}
@media(max-width:390px){.scene{min-height:1460px}.scene-copy{top:610px}.ledger-object{width:290px;margin-left:-145px}.scene-copy h1,.scene-copy h1 em{font-size:56px}.arrival-dialogue{padding-left:17px}.arrival-choices button,.arrival-choices a{font-size:16px}.dialogue{padding:22px 18px}.voice-tabs button{font-size:12px;padding-inline:3px}.check-controls{gap:16px}.dice-tray{gap:16px}#roll-check{font-size:13px;padding:9px}.section-title h2{font-size:46px}.close-dialog{font-size:12px;padding:5px 9px}.close-dialog span{margin-left:7px}}
.motion-paused .ledger-object{transform:rotateZ(-5deg)}.motion-paused .ledger-flap{display:none!important}.motion-paused .hotspot-mark,.motion-paused .hotspot-label{transform:none}.motion-paused .note-card:hover{transform:translateY(-5px)}
@media(prefers-reduced-motion:reduce){.ledger-flap{display:none!important}.ledger-object{transform:rotateZ(-5deg)}}

.dossier-body{touch-action:pan-y pinch-zoom}#dossier-title:focus{outline:none}
@media(max-width:800px){.case-index button{font-size:14px}.case-index button br{display:block}}

/* Harbor street: the environment is the navigation surface. */
.street-scene{min-height:1120px;height:100svh;background:linear-gradient(160deg,#57406e,#ed8861 54%,#473350);isolation:isolate}.street-scene .scene-art img{object-position:center;opacity:1}.street-scene .scene-shade{background:linear-gradient(90deg,#30253877,transparent 45%),linear-gradient(0deg,#241c35cc,transparent 35%)}.street-scene .scene-copy{top:145px;left:43%;right:7%;max-width:690px;text-shadow:0 2px 15px #2b19395e}.street-scene h1{font:clamp(60px,6.5vw,99px)/1 var(--poster);letter-spacing:-.025em;color:#fff0cf;margin-bottom:12px}.street-intro{font:italic 31px/1.3 var(--serif);color:#ffdec1;margin-bottom:19px}.street-description{font-size:17px;line-height:1.8;color:#f2dccd}.street-scene .scene-copy>.eyebrow{color:#ffe4c5;letter-spacing:.15em;margin-bottom:20px}.address-panel{position:absolute;left:5.5%;top:163px;width:365px;padding:19px 15px 13px;background:linear-gradient(110deg,#6a635b,#373d44 55%,#4d4d4a);border:5px solid #777064;box-shadow:inset 0 0 0 1px #182b3680,8px 12px 0 #3129389c,18px 20px 45px #1c1b2655;transform:perspective(1600px) rotateY(5deg);z-index:3}.address-heading{display:flex;gap:13px;align-items:center;padding:3px 7px 19px;border-bottom:1px solid #171e265e;color:#eee1bb}.address-heading .eyebrow{font-size:12px;margin:0 0 3px;letter-spacing:.12em}.address-heading h2{font:21px/1.2 var(--serif);letter-spacing:0;margin:0}.building-no{font:30px/1 var(--poster);color:#c1b082}.speaker-grille{width:34px;height:39px;margin-left:auto;background:repeating-linear-gradient(0deg,transparent 0 3px,#18232acc 3px 5px);border-radius:4px;border:1px solid #8b8b7655}.door-list{display:grid;gap:8px;padding:14px 0}.doorplate{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:61px;padding:8px 9px 8px 11px;background:linear-gradient(105deg,#c7b68a,#d6c79c 50%,#af9b70);border:1px solid #e5d5ad;border-bottom-color:#796846;box-shadow:0 3px 1px #1523329c,inset 0 0 0 1px #a4967861;color:#27343b;transition:translate .2s,filter .2s}.doorplate:hover{filter:brightness(1.09);translate:2px 0}.doorplate:active{translate:2px 2px;box-shadow:0 1px 0 #172330}.room-number{font:15px var(--mono);color:#6a5d40;border-right:1px solid #756b4c50;padding-right:9px}.plate-name{flex:1;min-width:0}.plate-name strong{display:block;font:600 15px/1.3 var(--sans);letter-spacing:.015em}.plate-name small{display:block;font:12px/1.4 var(--mono);color:#665d46;margin-top:4px}.doorbell{width:30px;height:31px;display:grid;place-items:center;background:#4b5556;border:2px solid #b4bbb0;border-radius:3px;box-shadow:0 2px 2px #3f403780;flex:none}.doorbell>span{width:12px;height:12px;background:#ded6ac;border:2px solid #7f867a;border-radius:50%;box-shadow:0 1px 2px #17203088}.intercom-caption{display:flex;gap:11px;padding:10px 7px 3px;align-items:start}.intercom-light{width:7px;height:7px;margin-top:7px;background:#ca8861;border-radius:50%;flex:none}.intercom-caption p{font:13px/1.6 var(--mono);color:#d4ccb6;margin:0;min-height:43px}.street-scene .ledger-pocket{left:32%;top:auto;bottom:153px;width:155px;margin:0;z-index:4}.ledger-pocket .cover-name{font-size:12px}.ledger-pocket .ledger-shadow{filter:blur(8px)}.ledger-pocket-label{display:block;position:absolute;left:15%;bottom:-35px;width:200px;font:12px/1.7 var(--mono);color:#fff0d4;transform:translateZ(30px);text-shadow:0 2px 7px #262031}.ledger-pocket-label .visited-count{display:block;color:#e7d5c5;font-size:12px}.phone-station{position:absolute;right:7%;bottom:157px;width:190px;z-index:5;perspective:1000px}.telephone{display:block;border:0;background:transparent;width:100%;padding:0;transform:rotate(3deg);transition:transform .55s cubic-bezier(.2,.8,.2,1.2);text-align:left}.telephone:hover{transform:rotate(-1deg) translateY(-4px)}.phone-art{display:block;aspect-ratio:4/5;background:#d3ac38;border-radius:10px;box-shadow:8px 10px 0 #4a34415a}.phone-tag{display:block;margin:12px 0 0;padding:11px 12px;background:#c7ae71;color:#3c3025;border:1px solid #ead6a255;box-shadow:3px 5px 0 #46364466}.phone-tag b{font:18px/1.25 var(--serif);font-weight:400;display:block}.phone-tag small{display:block;font:12px/1.6 var(--mono);margin-top:7px}.phone-connection{background:#e6d4a2;color:#33424a;padding:20px;border:3px solid #b68a36;box-shadow:6px 8px 0 #382c4299;margin-top:15px}.phone-connection .eyebrow{font-size:12px;margin:0 0 12px}.phone-connection>p:not(.eyebrow){font:23px/1.3 var(--serif);margin-bottom:20px}.phone-connection a{display:block;padding:10px;background:#294d5c;color:#f2e7cd;text-align:center;font-size:16px}.phone-connection button{border:0;background:none;padding:9px 0 0;font-size:14px;color:#735739}.street-scene .hotspots{display:block;z-index:2}.ambient-marker{position:absolute;background:#33263f99;border:1px solid #e8c6b066;color:#ffe3c3;pointer-events:auto;padding:8px 12px;font:14px var(--serif);display:flex;align-items:center;gap:10px;transition:background .3s,transform .4s}.ambient-marker:hover{background:#50354ebf;transform:translateY(-4px)}.gull-marker{top:37%;right:10%}.street-scene .scene-bottom{left:5.5%;right:5.5%;bottom:23px;background:#2b233ee6;box-shadow:0 6px 25px #1d1a2440}.street-scene .scene-observation{max-width:75%;font-size:17px;color:#f1d5c2}.street-scene .scene-observation b{color:#f0ba89}.scene-bottom>button{background:none;border:1px solid #dec3b06b;padding:10px 14px;font-size:14px;color:#f4dac2;white-space:nowrap}.street-afterword{padding:20px 6%;background:#292539;display:flex;align-items:center;justify-content:center;gap:25px;border-bottom:1px solid #dfb3a238}.street-afterword>a{font:18px var(--serif);color:#ecc1a2}.street-afterword .completion-note{font-size:17px;margin:0}.street-scene .scene-art{inset:-20px}.street-scene .street-interface{transition:opacity .65s,filter .65s;position:absolute;inset:0}.street-scene.taking-in-view .street-interface{opacity:0;filter:blur(4px);pointer-events:none}.taking-in-view .scene-shade{opacity:.2;transition:opacity 1s}.street-scene #weather{opacity:.6}.street-scene .scene-art img{transition:filter 1.2s}
@media(max-width:1100px){.street-scene{min-height:1130px}.address-panel{left:4%;width:340px;top:170px}.street-scene .scene-copy{left:44%;right:4%;top:160px}.street-scene h1{font-size:69px}.street-intro{font-size:28px}.street-description{font-size:16px}.street-scene .ledger-pocket{left:43%;width:130px;bottom:200px}.phone-station{right:6%;width:170px;bottom:165px}.gull-marker{right:8%;top:37%}}
@media(max-width:760px){.street-scene{height:auto;min-height:1790px}.street-scene .scene-art img{object-position:58% center}.street-scene .scene-copy{top:151px;left:7%;right:7%;text-align:left}.street-scene h1{font-size:65px}.street-scene .scene-copy>.eyebrow{font-size:12px;margin-bottom:17px}.street-intro{font-size:29px}.street-description{font-size:16px}.address-panel{top:450px;left:6%;width:88%;max-width:410px;padding:17px 13px;transform:perspective(1600px) rotateY(3deg)}.plate-name strong{font-size:15px}.plate-name small{font-size:12px}.doorplate{min-height:62px}.street-scene .ledger-pocket{width:128px;left:6%;top:1260px;bottom:auto}.phone-station{width:138px;right:6%;bottom:auto;top:1240px}.phone-tag{padding:12px}.phone-tag b{font-size:17px}.phone-tag small{font-size:12px}.ledger-pocket-label{width:165px;left:10%;font-size:12px}.phone-connection{position:absolute;right:0;bottom:0;width:245px;margin:0;z-index:2;padding:18px}.gull-marker{display:none}.street-scene .scene-bottom{left:5%;right:5%;bottom:25px;flex-direction:column;align-items:start;padding:18px}.street-scene .scene-observation{font-size:16px;max-width:100%;gap:8px}.scene-bottom>button{font-size:14px}.street-afterword{padding:22px;display:block;text-align:center}.street-afterword .completion-note{margin-bottom:15px}.street-scene .scene-shade{background:linear-gradient(0deg,#31223d7a,transparent 75%),linear-gradient(90deg,#32243c75,transparent)}#sound-toggle{left:calc(6% + 202px)}}
@media(max-width:390px){.street-scene h1{font-size:58px}.street-scene .scene-copy{top:150px}.street-description br{display:none}.street-scene{min-height:1820px}.address-panel{top:455px}.plate-name strong{font-size:14px}.doorplate{gap:8px;padding-left:9px}.room-number{font-size:14px;padding-right:8px}.phone-station{width:130px;right:5%}.street-scene .ledger-pocket{left:4%;width:117px}}
/* Generated scenery and sprite windows; all controls remain native HTML. */
.phone-art{position:relative;isolation:isolate;width:90%;margin:0 auto;aspect-ratio:2/3;background:transparent;border-radius:0;box-shadow:none;overflow:hidden;filter:saturate(.9) brightness(1.03);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 85%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}.phone-art svg{display:block;width:100%;height:100%;overflow:hidden}.phone-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,#d7986220,transparent 38%,#49344f66);mix-blend-mode:color}.phone-station.is-connected .telephone{transform:rotate(-7deg) translateY(-8px)}.phone-station.is-connected .phone-art{animation:telephone-ring .55s ease-out}.phone-station.is-connected .phone-tag{background:#f5d785}.phone-connection{animation:connection-arrives .4s cubic-bezier(.2,.8,.3,1.15)}.doorplate.is-ringing .doorbell>span{background:#fff4ba;box-shadow:0 0 15px 6px #ffd77399;border-color:#c7a150}.doorplate.is-ringing{animation:intercom-buzz .12s 3}.doorplate.has-rung .doorbell>span{background:#deb16a;box-shadow:0 0 6px #ffd88966}.doorplate.has-rung .room-number{color:#343d41}.address-panel:has(.is-ringing) .intercom-light{background:#fff1bd;box-shadow:0 0 12px #ffe994}.door-narration{font:italic 19px/1.6 var(--serif)!important;color:#73543b;background:#d6c79b55;border-left:3px solid #a38049;padding:13px 17px;margin:0 0 25px}.door-narration:before{content:'THE INTERCOM / ';font:12px var(--mono);color:#765433;display:block;margin-bottom:7px}.gull-flock{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.gull{position:absolute;width:93.6px;aspect-ratio:800/360;left:0;top:24%;animation:gull-crossing 26s linear infinite;transform-origin:center;will-change:transform}.gull-1{width:67.6px;top:19%;animation-duration:34s;animation-delay:-17s;opacity:.9}.gull-2{width:48.1px;top:37%;animation-duration:31s;animation-delay:-8s;opacity:.8}.gull-0{animation-delay:-12s}.gull-wings{display:block;position:relative;width:100%;height:100%;transform-origin:50% 74%;animation:gull-bank 7s ease-in-out infinite}.gull-mark{display:block;position:relative;width:100%;height:100%}.gull-frame{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;opacity:0;animation:gull-upstroke 1.2s steps(1,end) infinite}.gull-downstroke{opacity:1;animation-name:gull-downstroke}.gull-1 .gull-frame{animation-delay:-.4s}.gull-2 .gull-frame{animation-delay:-.8s}.is-startled .gull-frame{animation-duration:.5s}.is-startled .gull-wings{animation:gull-startle .7s ease-in-out 3}.inner-illustration img{object-position:43% 49%}.inner-world{border-top-color:#b68491;background:#292539}.dialogue{border-left-color:#725777;background:#211e2c}.voice-tabs{background:#332a41;border-color:#846780}.voice-fluid{background:#655474;border-color:#ba9bba}.dialogue[data-skill=perspective] .voice-fluid{background:#784e73}.inner-heading>.eyebrow{color:#edb18a}.inner-layout{border-color:#946d8966;box-shadow:12px 16px 0 #1d1829}.thought-response{border-left-color:#af7a93}.thought-response .eyebrow{color:#d9a8b2}.footer,.closing{background:#231e30}.street-scene .scene-copy{padding:13px 0 18px 23px;border-left:2px solid #ffe3c871;background:linear-gradient(90deg,#34233d77,transparent)}.street-scene .scene-copy h1{color:#fff0d2}
@keyframes gull-crossing{0%{transform:translate3d(-18vw,3vh,0) scale(.62) rotate(-5deg)}30%{transform:translate3d(23vw,-6vh,0) scale(.8) rotate(3deg)}60%{transform:translate3d(60vw,2vh,0) scale(1) rotate(7deg)}85%{transform:translate3d(87vw,-5vh,0) scale(.72) rotate(-8deg)}100%{transform:translate3d(110vw,-1vh,0) scale(.55) rotate(-2deg)}}
@keyframes gull-upstroke{0%{opacity:1}50%,100%{opacity:0}}
@keyframes gull-downstroke{0%{opacity:0}50%,100%{opacity:1}}
@keyframes gull-bank{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(9deg)}}
@keyframes gull-startle{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-40px) rotate(-20deg)}}
@keyframes telephone-ring{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(3deg)}40%,80%{transform:rotate(-3deg)}}
@keyframes connection-arrives{from{opacity:0;transform:translateY(10px) rotateX(-8deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes intercom-buzz{0%,100%{transform:translateX(0)}50%{transform:translateX(1px)}}
@media(max-width:1100px){.street-scene .scene-copy{padding-left:17px}}
@media(max-width:760px){.street-scene .scene-art{inset:0;height:920px}.street-scene .scene-art img{object-position:63% center}.street-scene .scene-art:after{content:'';position:absolute;inset:650px 0 0;background:linear-gradient(transparent,#463347)}.street-scene .scene-shade{background:linear-gradient(0deg,#31233c,transparent 72%)}.street-scene{background:#463347}.street-scene .scene-copy{padding:10px 0 15px 16px;right:5%;left:5%;background:linear-gradient(90deg,#34233d88,transparent)}.gull{width:75.4px;top:22%;animation-duration:18s}.gull-1{width:57.2px;top:17%;animation-duration:23s}.gull-2{width:41.6px;top:9%;animation-duration:27s}.gull-marker{display:flex;right:auto;left:7%;top:389px}.phone-station.is-connected .phone-tag{opacity:0}.door-narration{font-size:17px!important}.inner-world{padding-top:0}}
.motion-paused .gull{animation:none;transform:translate(50vw,-3vh) scale(.75)}.motion-paused .gull-1{transform:translate(72vw,2vh) scale(.8)}.motion-paused .gull-2{transform:translate(86vw,-1vh)}.motion-paused .gull-wings{transform:none}
@media(prefers-reduced-motion:reduce){.gull{transform:translate(50vw,-3vh) scale(.75)}.gull-1{transform:translate(72vw,2vh) scale(.8)}.gull-2{transform:translate(86vw,-1vh)}}

/* Keep opened objects stable and make the scenic view fit the screen. */
.phone-connection{position:absolute;right:calc(100% - 7px);top:30px;width:255px;margin:0;z-index:2}.street-scene.taking-in-view{height:100svh;min-height:600px}.taking-in-view .scene-art{inset:-20px;height:auto}.taking-in-view .scene-art img{object-position:58% center}.taking-in-view .scene-art:after{display:none}.street-scene.taking-in-view .gull{top:24%}.street-scene.taking-in-view .gull-1{top:19%}.street-scene.taking-in-view .gull-2{top:37%}
@media(min-width:761px) and (max-width:980px){.address-panel{width:300px;left:3%;padding-inline:12px}.plate-name strong{font-size:14px}.doorplate{gap:8px;padding-inline:8px}.room-number{padding-right:7px}.doorbell{width:28px}.street-scene .scene-copy{left:45%}.street-scene .scene-copy h1{font-size:63px}.street-intro{font-size:26px}}
@media(max-width:1100px){.phone-connection{right:0;top:auto;bottom:0;width:245px}.phone-station.is-connected .phone-tag{opacity:0}}

/* A deterministic check connects each bell to its record. */
.future-door{margin:0 0 8px;border-style:dashed;background:linear-gradient(105deg,#9d9b93,#b1afa1);box-shadow:0 3px 1px #1523329c;transform:rotate(-1deg)}
.future-door .plate-name small{color:#52504d}.future-door .doorbell>span{background:#a29286}.street-scene{min-height:1220px}.street-scene.taking-in-view{min-height:600px}
#dossier[data-room] .door-narration{border-left-color:#3d8255;background:#5789601a;color:#345443}
#dossier[data-room] .door-narration:before{display:none}.door-check-result{font:14px/1.5 var(--mono)!important;color:#28633e;margin:0 0 10px}
#check-transition{--check-color:#b0ef93;--check-rgb:126,228,146;position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:30px;border:0;border-radius:0;overflow-x:hidden;overflow-y:auto;background:rgba(6,25,19,.62);color:var(--check-color);box-shadow:inset 0 0 150px rgba(var(--check-rgb),.18);transform:none;animation:none}
#check-transition[open]{display:flex;flex-direction:column}#check-transition::backdrop{background:#07130d80;backdrop-filter:blur(3px)}
#check-transition[data-outcome=failure]{--check-color:#ff9f85;--check-rgb:242,106,82;background:rgba(39,12,22,.7)}
.check-sweep{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--check-rgb),.12) 12%,rgba(var(--check-rgb),.46) 65%,rgba(var(--check-rgb),.7) 91%,transparent);box-shadow:inset -8px 0 0 rgba(var(--check-rgb),.45);animation:check-crossing 1.04s cubic-bezier(.17,.72,.28,1) both}
.check-announcement{position:relative;max-width:100%;width:900px;flex:none;margin:auto;text-align:center;animation:check-arrival .48s cubic-bezier(.18,.7,.2,1) both;text-shadow:0 3px 24px #03130ecc}
.check-announcement>.eyebrow{font-size:14px;letter-spacing:.18em;margin-bottom:22px}.check-announcement h2{font:clamp(64px,12vw,176px)/1 var(--poster);letter-spacing:.06em;margin:0 0 22px}.check-announcement>#transition-detail{font:17px/1.6 var(--mono);letter-spacing:.04em;margin-bottom:30px}.check-announcement>button{border:1px solid currentColor;background:#09171080;padding:12px 23px;font:16px var(--serif);color:var(--check-color)}.check-timing{font:12px/1.6 var(--mono);margin:16px 0 0;opacity:.8}
#future-file{width:min(660px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#252033;color:#ede0cd;border:2px solid #aa6558;border-left:9px solid #c07764;padding:34px 39px 30px;box-shadow:14px 17px 0 #17121cbb;transform:none}
#future-file::backdrop{background:#140e22cf;backdrop-filter:blur(6px)}.close-future{display:block;margin:0 0 38px auto;background:none;border:0;border-bottom:1px solid #bca29c6b;padding:8px 0;color:#d5b8ad;font-size:14px}.close-future span{margin-left:18px}#future-file>.eyebrow{color:#c79f9b;font-size:12px}.future-failure{font:53px/1 var(--poster);letter-spacing:.05em;color:#ff9f85;border-block:1px solid #b2716470;padding:18px 0;margin:20px 0 27px}.future-failure>span{display:block;font:12px/1.5 var(--mono);letter-spacing:.16em;margin-top:10px}#future-title{font:36px/1.15 var(--serif);font-weight:400;color:#f3ddc4;margin-bottom:22px}#future-title:focus{outline:none}#future-description{font:18px/1.75 var(--serif);color:#d6c2bc}.future-stamp{border:1px dashed #d28d7280;padding:16px 18px;color:#eac18e;font:12px/1.6 var(--mono);margin:30px 0 18px;transform:rotate(-1deg)}.future-stamp span{display:block;font:24px/1.4 var(--poster);letter-spacing:.07em;margin-top:3px}.future-retry{font:italic 15px/1.7 var(--serif);color:#bca6a7;margin-bottom:0}
@keyframes check-crossing{0%{transform:translateX(-115%);opacity:0}15%{opacity:1}100%{transform:translateX(115%);opacity:0}}
@keyframes check-arrival{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:760px){.street-scene{min-height:1900px}.street-scene .ledger-pocket{top:1370px}.phone-station{top:1350px}.check-announcement>.eyebrow{font-size:12px;letter-spacing:.08em}.check-announcement>#transition-detail{font-size:14px}#check-transition{padding:22px}.check-announcement h2{font-size:clamp(48px,13vw,92px)}#future-file{padding:22px 24px}.close-future{margin-bottom:25px}#future-title{font-size:30px}.future-failure{font-size:45px}}
@media(max-width:390px){.street-scene{min-height:1930px}}
.motion-paused .check-sweep{display:none}
@media(prefers-reduced-motion:reduce){.check-sweep{display:none}}

@media(max-height:500px){#check-transition{padding:20px}.check-announcement h2{font-size:clamp(48px,10vw,82px);margin-bottom:12px}.check-announcement>.eyebrow{margin-bottom:12px}.check-announcement>#transition-detail{margin-bottom:16px}.check-timing{margin-top:10px}}

/* A small dedication beneath the work. */
.art-dedication{flex:0 0 100%;padding:3px 0 3px 18px;border-left:2px solid #a87482;margin:0 0 14px;max-width:100%}.art-dedication .dedication-label{font:12px/1.7 var(--mono);letter-spacing:.1em;color:#a87482;margin:0 0 9px}.art-dedication .dedication-copy{max-width:65ch;font:italic 17px/1.75 var(--serif);color:#d9baab;margin:0}.art-dedication .dedication-copy span{font:inherit;letter-spacing:inherit;color:inherit}.art-dedication cite{font-style:normal}

/* Check light moves through the harbor; the scene stays visible underneath. */
#check-transition{--skill-color:#9ecce4;--check-color:#edfef2;--check-rgb:31,221,133;--ribbon:#12ad70;padding:24px;background:linear-gradient(0deg,#0617138c,transparent 62%);box-shadow:none}
#check-transition::backdrop{background:#08161314;backdrop-filter:none}
#check-transition[data-family=psyche]{--skill-color:#d6b7ef}
#check-transition[data-family=physique]{--skill-color:#ffb7b8}
#check-transition[data-family=motorics]{--skill-color:#ffe19e}
#check-transition[data-outcome=failure]{--check-rgb:241,97,63;--ribbon:#b94632;background:linear-gradient(0deg,#2510138c,transparent 62%)}
#check-transition[data-stage=rolling]{background:linear-gradient(0deg,#0817168c,transparent 62%);box-shadow:none}
#check-transition .check-announcement{width:520px;margin:auto auto 2vh;animation:none;text-shadow:0 2px 4px #07120f,0 0 20px #07120fcc;z-index:1}
.check-overline{display:flex;justify-content:center;gap:16px;margin:0 0 10px;font:10px/1.5 var(--mono);letter-spacing:.12em;color:#d4e4d9}
.check-overline>span:first-child{color:var(--skill-color)}
.check-skill-name{font:24px/1.2 var(--poster);letter-spacing:.07em;color:var(--skill-color);margin:0 0 6px}
.check-action{font:italic 18px/1.5 var(--serif);color:#f3f0e1;margin:0 0 12px}
.check-roll-scene{--die-size:84px;display:flex;justify-content:center;align-items:center;gap:24px;min-height:111px;margin:0 0 12px}
.check-die,.die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);position:relative;border:3px solid #f4fff9;border-radius:15px;padding:13px;gap:7px;background:transparent;box-shadow:0 0 2px #fff,0 0 9px #b7ffdb55;transform-style:flat;transform:none}
.check-die{flex:0 0 var(--die-size);width:var(--die-size);height:var(--die-size)}
.check-pip{display:block;align-self:center;aspect-ratio:1;border-radius:50%;background:#f5fffa;box-shadow:0 0 3px #cbffe8aa}
.check-pip.blank{visibility:hidden}
.die{width:38px;height:38px;padding:5px;gap:3px;border-width:2px;border-radius:7px;transition:transform .7s cubic-bezier(.16,.72,.25,1)}
.die .check-pip{min-width:0;min-height:0}
#check-transition[data-stage=rolling] .check-die{animation:white-dice-settle .68s cubic-bezier(.15,.7,.22,1) both}
#check-transition[data-stage=rolling] .check-die:nth-child(2){animation-name:white-dice-settle-second;animation-duration:.72s}
.check-verdict{display:flex;flex-direction:column;align-items:center}
#check-transition .check-verdict h2{order:0;width:min(390px,100%);font:clamp(31px,4vw,44px)/1.1 var(--poster);font-weight:400;letter-spacing:.025em;color:#f3fff7;background:var(--ribbon);padding:5px 12px 3px;margin:0 0 12px;clip-path:polygon(1% 2%,99% 0,100% 94%,0 100%);text-shadow:none}
#check-transition[data-stage=rolling] .check-verdict h2{background:transparent;opacity:.8;font-size:25px;letter-spacing:.13em;clip-path:none}
#check-transition[data-stage=result] .check-verdict h2{animation:check-ribbon-arrives .22s ease-out both}
.check-roll-line{order:1;font:12px/1.6 var(--mono);color:#ecf9eb;min-height:20px;margin:0 0 11px}
.check-math{display:flex;align-items:center;justify-content:center;gap:4px 15px;flex-wrap:wrap;margin:0 0 11px;color:#d5e6d7;font:10px/1.6 var(--mono)}
.check-math p{margin:0}.check-math b{font-weight:400}.check-math #transition-modifier{color:#e0f3de}
#check-transition .check-announcement>#transition-detail{font:11px/1.6 var(--mono);letter-spacing:.025em;color:#d5e4d3;margin:0 0 4px}
.check-story{font:italic 14px/1.6 var(--serif);color:#e0e9d9;margin:0 0 13px}
#check-transition .check-announcement>button{border:1px solid #d9f5e388;background:#07171344;padding:9px 19px;color:#f4fff8;font:15px/1.4 var(--serif)}
#check-transition .check-timing{font:10px/1.6 var(--mono);color:#d0ded2;margin:9px 0 0}
.door-check-result{max-width:65ch;line-height:1.8!important;overflow-wrap:anywhere}
.future-roll{font:12px/1.8 var(--mono);color:#d4b6b0;margin:-10px 0 24px}
.future-failure{font-size:clamp(32px,5vw,49px)}

/* One wash of luminous color, with soft lens circles and scattered glints. */
.check-sweep{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:none;box-shadow:none;animation:none;mix-blend-mode:screen;z-index:0}
#check-transition[data-stage=rolling] .check-sweep{display:none}
.check-sweep:before{content:'';position:absolute;inset:-22%;background:radial-gradient(ellipse at 91% 76%,rgba(var(--check-rgb),.62),transparent 46%),radial-gradient(ellipse at 58% 110%,rgba(var(--check-rgb),.72),transparent 58%),linear-gradient(151deg,transparent 38%,rgba(var(--check-rgb),.035) 52%,rgba(var(--check-rgb),.33) 64%,transparent 79%);filter:blur(9px);animation:check-light-spill 1.55s cubic-bezier(.17,.62,.32,1) both;transform-origin:85% 90%}
.check-sweep:after{content:'';position:absolute;inset:0;background:linear-gradient(173deg,transparent 54%,rgba(var(--check-rgb),.13) 54.2%,transparent 54.7%),linear-gradient(166deg,transparent 73%,rgba(var(--check-rgb),.25) 73.2%,transparent 73.6%),linear-gradient(174deg,transparent 89%,rgba(var(--check-rgb),.22) 89.2%,transparent 89.7%);animation:check-light-lines 1.5s ease-out both}
.check-lens{position:absolute;display:block;aspect-ratio:1;border-radius:50%;border:2px solid rgba(var(--check-rgb),.2);background:radial-gradient(circle,rgba(var(--check-rgb),.12) 43%,rgba(var(--check-rgb),.36) 66%,transparent 72%);filter:blur(2px);animation:check-lens-glimmer 1.5s ease-out both}
.lens-one{width:150px;right:8%;top:17%}.lens-two{width:80px;right:24%;top:63%;animation-delay:.07s;filter:blur(3px)}.lens-three{width:215px;left:59%;bottom:-60px;animation-delay:.04s;filter:blur(5px)}
.check-glints{position:absolute;inset:0}
.check-glint{position:absolute;left:var(--spark-x);top:var(--spark-y);width:var(--spark-size);height:calc(var(--spark-size)*.63);border-radius:45% 55%;background:rgba(var(--check-rgb),.8);box-shadow:0 0 7px rgba(var(--check-rgb),.65);animation:check-glint-drift 1.35s ease-out var(--spark-delay) both}
@keyframes check-light-spill{0%{opacity:0;transform:translate(24%,22%) rotate(-9deg) scale(.87)}17%{opacity:.72}43%{opacity:.95;transform:translate(0,0) rotate(0deg) scale(1)}76%{opacity:.65}100%{opacity:0;transform:translate(-28%,-8%) rotate(7deg) scale(1.13)}}
@keyframes check-lens-glimmer{0%{opacity:0;transform:translate(40px,30px) scale(.5)}30%{opacity:.9}65%{opacity:.48}100%{opacity:0;transform:translate(-75px,-38px) scale(1.3)}}
@keyframes check-glint-drift{0%{opacity:0;transform:translate(65px,55px) scale(.3) rotate(-18deg)}24%{opacity:.75}58%{opacity:.38}100%{opacity:0;transform:translate(var(--spark-drift),-48px) scale(.8) rotate(22deg)}}
@keyframes check-light-lines{0%{opacity:0;transform:translate(22%,8%)}27%{opacity:.75}100%{opacity:0;transform:translate(-30%,-11%)}}
@keyframes white-dice-settle{0%{opacity:.2;transform:translate(-12px,-16px) rotate(-24deg) scale(.9)}65%{opacity:1;transform:translate(2px,2px) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes white-dice-settle-second{0%{opacity:.2;transform:translate(13px,-9px) rotate(28deg) scale(.92)}72%{opacity:1;transform:translate(-1px,2px) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes check-ribbon-arrives{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@media(max-width:600px){#check-transition{padding:22px 18px}.check-roll-scene{--die-size:72px;gap:20px;min-height:99px}.check-die{padding:11px;gap:6px;border-radius:13px}.check-skill-name{font-size:22px}.check-action{font-size:17px}.check-math{column-gap:14px;row-gap:3px}.check-math #transition-modifier{order:3;flex:0 0 100%}.check-roll-line{font-size:11px}.lens-one{width:100px;right:-12%;top:25%}.lens-two{right:10%}.lens-three{left:29%;width:150px}}
@media(max-height:650px){#check-transition{padding-block:16px}#check-transition .check-announcement{margin:auto}.check-overline{margin-bottom:5px}.check-skill-name{font-size:21px}.check-action{font-size:16px;margin-bottom:6px}.check-roll-scene{--die-size:59px;min-height:75px;margin-bottom:6px}.check-die{padding:8px;gap:5px;border-radius:11px}#check-transition .check-verdict h2{font-size:32px;max-width:320px;margin-bottom:7px}.check-story{margin-bottom:9px}.check-roll-line,.check-math{margin-bottom:7px}}
.motion-paused .check-sweep{display:none}
@media(prefers-reduced-motion:reduce){.check-sweep{display:none}.check-die,.die{animation:none;transition:none}}

/* Framing for the supplied harbor artwork; its original colors are retained. */
.street-scene{background:#080b13}
.street-scene .scene-art img{object-position:78% 40%;opacity:1}
.street-scene .scene-shade{background:linear-gradient(90deg,#0a0e1829,transparent 39%),linear-gradient(0deg,#080b1340,transparent 22%)}
.street-scene .scene-copy{background:linear-gradient(90deg,#111723b8,#11172345);border-left-color:#e7d6b66b;text-shadow:0 2px 9px #070b16aa}
.inner-illustration img{object-position:86% 40%}
.inner-illustration:after{background:linear-gradient(transparent,#080b13b3)}
.street-scene.taking-in-view{background:#050609}
.street-scene.taking-in-view .scene-art{inset:0;height:100%;transform:none}
.street-scene.taking-in-view .scene-art img{object-fit:contain;object-position:center;filter:none}
.street-scene.taking-in-view .scene-shade{opacity:0}
@media(max-width:760px){
 .street-scene{background:#080b13}
 .street-scene .scene-art img{object-position:85% 40%}
 .street-scene .scene-art:after{inset:700px 0 0;background:linear-gradient(transparent,#080b13)}
 .street-scene .scene-shade{background:linear-gradient(0deg,#080b13,transparent 68%)}
 .street-scene .scene-copy{background:linear-gradient(90deg,#101621bc,#10162159)}
 .inner-illustration img{object-position:78% 40%}
 .street-scene.taking-in-view .scene-art{height:100%;inset:0}
 .street-scene.taking-in-view .scene-art img{object-fit:contain;object-position:center}
 .street-scene.taking-in-view .scene-art:after{display:none}
}

/* Three visual voices share one frame, with each composition framed separately. */
.voice-art{position:absolute;inset:0;overflow:hidden;background:#080b13}
.voice-art:not([hidden]){animation:voice-picture-arrives .38s ease-out both}
.voice-art img{width:100%;height:100%;object-fit:cover}
.voice-art[data-voice-art=curiosity] img{object-position:43% 40%}
.voice-art[data-voice-art=perspective] img{object-fit:contain;object-position:center;background:#ebeee8}
/* Match the painting's near-black perimeter and fade only its outer edges. */
.voice-art[data-voice-art=logic]{background:#040404}
.voice-art[data-voice-art=logic]:not([hidden]){display:flex;align-items:center;justify-content:center}
.voice-art[data-voice-art=logic] img{
 position:relative;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;min-height:0;
 object-fit:contain;object-position:center;background:transparent;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
 mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
 -webkit-mask-composite:source-in;mask-composite:intersect;
}
.inner-illustration:after{pointer-events:none;z-index:1}
#voice-art-caption{z-index:2;color:#f6e9cb;text-shadow:0 1px 4px #020811,0 0 12px #020811;font-size:11px;letter-spacing:.09em}
@keyframes voice-picture-arrives{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Quiet, worn timber: real image grain beneath readable nameplates. */
.doorplate{--grain-y:50%;background-image:linear-gradient(90deg,#21150b73,#2c1b0e48 60%,#1c130b78),url('assets/weathered-wood.png');background-size:100% 100%,100% auto;background-position:center,center var(--grain-y);border-color:#aa865d #523820 #372717 #8d6947;box-shadow:0 3px 1px #121b22bd,inset 0 1px 0 #d8b38647,inset 0 -2px 1px #27180c77;color:#f0e0bd}
.doorplate:nth-child(2){--grain-y:12%}.doorplate:nth-child(3){--grain-y:74%}.doorplate:nth-child(4){--grain-y:31%}.doorplate:nth-child(5){--grain-y:93%}.doorplate:nth-child(6){--grain-y:42%}.doorplate:nth-child(7){--grain-y:66%}.doorplate:nth-child(8){--grain-y:4%}
.plate-name strong{color:#f4e6c7;text-shadow:0 -1px 0 #1d130e,0 1px 1px #1c110f9c}
.plate-name small,.future-door .plate-name small{color:#d4c2a0;text-shadow:0 1px 1px #1a140f}
.room-number,.doorplate.has-rung .room-number{color:#c4aa7d;border-right-color:#c5a47059;text-shadow:0 1px 1px #1b120f}
.doorbell{border-color:#b2a58a #675c49 #534834 #a79a7d;background:#384445;box-shadow:inset 0 1px 3px #101a23,0 1px 0 #d2b98a45}
.future-door{--grain-y:84%;border-style:dashed;filter:saturate(.65)}

/* The harbor recording is optional and has a control beside the scenic view. */
.harbor-controls{display:flex;justify-content:flex-end;align-items:center;gap:9px;flex-wrap:wrap;flex:none}
.harbor-controls button{background:#12172273;border:1px solid #d9c1a26b;padding:10px 13px;font:13px/1.4 var(--sans);color:#f0dfbd;white-space:nowrap;min-height:40px}
.harbor-controls button:hover{border-color:#e4c394;background:#2025359c}
.harbor-controls #ambience-toggle[aria-pressed=true]{border-color:#a4d8c5;color:#d1f2df}
.harbor-controls #ambience-toggle>span{font:11px var(--mono);color:#b9d8c0;margin-left:6px}
.harbor-controls button:disabled{opacity:.6;cursor:default}
.street-scene .scene-bottom{gap:16px;flex-wrap:wrap}
.street-scene .scene-observation{flex:1 1 300px;max-width:65%}
.footer .sound-credit{flex-basis:100%;font-size:11px;color:#9facad;margin-top:7px}
.footer .art-credit{flex-basis:100%;font-size:13px;color:#b6c9ca;margin-top:7px}
@media(max-width:950px){.street-scene .scene-observation{max-width:100%}.harbor-controls{justify-content:flex-start}}
@media(max-width:760px){.street-scene .scene-observation{flex:auto}.harbor-controls{gap:8px}.harbor-controls button{font-size:12px;padding:9px 11px}.voice-art[data-voice-art=curiosity] img{object-position:78% 40%}#voice-art-caption{font-size:10px;left:17px;bottom:17px}}
.motion-paused .voice-art{animation:none}
@media(prefers-reduced-motion:reduce){.voice-art{animation:none}}

/* A cool rain shade falls over the painting, leaving the controls legible. */
.street-scene.is-raining .scene-art img{filter:brightness(.78) saturate(.84)}
.street-scene.is-raining #weather{opacity:.92}
#watch-gulls small{display:block;font:12px/1.5 var(--sans);color:#d9c7ad;margin-top:3px}
.street-scene.is-raining #watch-gulls{border-color:#9dbfcb}
@media(max-width:760px){.voice-art[data-voice-art=curiosity] img{object-position:43% 40%}}
@media(prefers-reduced-motion:reduce){.street-scene .scene-art img{transition:none}}

/* Individual chapters in the case ledger: short pages and an index at the cover. */
#dossier { width:min(1100px,calc(100% - 36px)); }
.dossier-layout { grid-template-columns:175px minmax(0,1fr); }
.case-index { gap:8px; padding:25px 12px; }
.notebook-sections { display:flex; flex-direction:column; gap:6px; }
.case-index .notebook-sections button { padding:12px 10px; font-weight:600; }
.notebook-page-section { margin:12px 0 20px; padding-top:16px; border-top:1px solid #b8d3dd40; }
.notebook-page-section[hidden] { display:none!important; }
#notebook-entry-label { display:block; padding:0 10px 12px; color:#dbe4df; font:12px/1.5 var(--mono); text-transform:uppercase; letter-spacing:.05em; }
#notebook-pages { display:flex; flex-direction:column; gap:5px; }
#notebook-pages button { display:flex; gap:8px; width:100%; padding:10px; font-size:14px; }
.page-tab-number { color:#edbd87; }
.case-index #secret-toggle { margin-top:auto; padding-top:24px; font-size:13px; color:#bfd2df; }
.dossier-body { padding:34px 36px 24px; }
.dossier-body h2 { margin:0 0 14px; font-size:clamp(30px,3vw,42px); }
#notebook-entry-meta { margin:0 0 26px; padding-bottom:18px; border-bottom:1px solid #414d5236; color:#58615e; font:14px/1.65 var(--mono); }
#dossier-copy p { margin:0 0 20px; line-height:1.85; }
#dossier-copy p:last-child { margin-bottom:0; }
#dossier-copy h3 { margin:24px 0 12px; }
.notebook-sheet { min-height:260px; }
.notebook-sheet.has-illustration { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:25px; align-items:center; }
#notebook-illustration { margin:0; transform:rotate(-2deg); }
#notebook-illustration img { width:100%; height:auto; display:block; mix-blend-mode:multiply; }
#notebook-illustration figcaption { padding:8px 7px 0; color:#626254; font:italic 14px/1.55 var(--serif); text-align:center; }
.notebook-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
.notebook-index button { display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:10px; align-items:baseline; width:100%; text-align:left; padding:19px 0 17px; border:0; border-top:1px solid #4b56574a; border-radius:0; color:var(--ink); background:none; }
.notebook-index .index-collection { grid-column:1 / -1; grid-template-columns:52px minmax(0,1fr); }
.notebook-index button:hover { color:#92412c; background:#d8cfa854; }
.notebook-index button:focus-visible { outline:2px solid #9e3e2c; outline-offset:4px; }
.toc-number { font:13px var(--mono); color:#986348; }
.toc-title-block { display:flex; flex-direction:column; gap:5px; }
.toc-title-block strong { font:22px/1.15 var(--serif); font-weight:700; }
.toc-subtitle { font:14px/1.4 var(--sans); color:#55605b; }
.toc-meta { grid-column:2; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; margin-top:9px; font:12px/1.4 var(--mono); color:#626960; }
.toc-status { font-style:italic; color:#45634e; }
.dossier-navigation { padding:18px 30px 24px 211px; flex-wrap:nowrap; align-items:center; gap:14px; }
.dossier-navigation button { min-height:44px; font-size:14px; }
.dossier-navigation button:disabled { opacity:.38; cursor:default; background:none; }
#notebook-page-count { font:13px/1.5 var(--mono); text-align:center; color:#56625a; }
.notebook-index[hidden],#notebook-illustration[hidden],.dossier-navigation[hidden],.page-gesture[hidden] { display:none!important; }
.showing-contents .notebook-sheet { display:none; }
.showing-contents .dossier-body { padding-bottom:32px; }
.showing-contents #notebook-entry-meta { border-bottom:0; margin-bottom:8px; padding-bottom:0; }
#dossier .page-gesture { color:#616b62; margin:26px 0 0; }
@media(max-width:800px) {
  .dossier-layout { grid-template-columns:1fr; }
  .case-index { flex-direction:row; flex-wrap:wrap; gap:6px; padding:12px 16px; }
  .notebook-sections { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
  .case-index .notebook-sections button { min-width:0; padding:10px 8px; }
  .notebook-page-section { width:100%; margin:6px 0; padding-top:12px; }
  #notebook-entry-label { font-size:11px; padding:0 8px 8px; }
  .case-index #secret-toggle { margin:0 0 0 auto; flex:0 0 auto; padding:9px; }
  #notebook-pages { width:100%; flex-direction:row; gap:4px; }
  #notebook-pages:empty { display:none; }
  #notebook-pages button { flex:1; min-width:0; font-size:14px; padding:8px; }
  .dossier-body { padding:28px 23px 24px; }
  .dossier-navigation { padding:18px 23px 24px; gap:10px; }
  .notebook-sheet.has-illustration { grid-template-columns:minmax(0,1fr) 170px; gap:18px; }
}
@media(max-width:560px) {
  #dossier { width:calc(100% - 16px); border-width:7px; }
  .notebook-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .notebook-sections button:first-child { grid-column:1 / -1; }
  .notebook-index { grid-template-columns:1fr; }
  .notebook-index button { padding:17px 0; }
  .toc-title-block strong { font-size:21px; }
  .notebook-sheet.has-illustration { display:block; }
  #notebook-illustration { max-width:240px; margin:22px auto 0; }
  .dossier-navigation { display:grid; grid-template-columns:1fr 1fr; }
  #notebook-page-count { grid-column:1 / -1; grid-row:1; }
  .dossier-navigation button { padding:10px; }
  .case-index #secret-toggle { font-size:12px; }
}

#dossier-copy code { font-size:.88em; overflow-wrap:anywhere; }
.dossier-body { container-type:inline-size; }
@container (max-width:520px) {
  .notebook-sheet.has-illustration { display:block; }
  #notebook-illustration { max-width:250px; margin:22px auto 0; }
}

/* Show the supplied extended reconstruction in full. */
@media(max-width:760px){#voice-art-panel[data-skill=logic]{aspect-ratio:1429 / 1056;min-height:0}}


/* One level for the existing effects mix and the harbor recording. */
.master-volume { display:flex; align-items:center; gap:9px; padding:0 11px; min-height:40px; border:1px solid #e5eadb45; background:#0d1a20aa; color:#f3e6cb; }
.master-volume label { font:14px/1.4 var(--mono); }
.master-volume input { width:95px; height:38px; min-width:65px; margin:0; padding:0; accent-color:#e6a978; cursor:pointer; }
.master-volume output { min-width:4ch; text-align:right; font:13px/1.4 var(--mono); color:#ddd9a5; font-variant-numeric:tabular-nums; }
.master-volume input:focus-visible { outline:2px solid #e6a978; outline-offset:3px; }
.master-volume.is-muted output { color:#b4bdc0; }
@media(min-width:701px) and (max-width:1200px) {
 .header-actions { gap:10px 14px; flex-wrap:wrap; justify-content:flex-end; }
 .master-volume { gap:7px; padding-inline:8px; }
 .master-volume input { width:80px; }
}
@media(max-width:700px) {
 .masthead { height:149px; }
 .master-volume { position:absolute; top:108px; left:6%; right:6%; min-height:32px; padding-inline:10px; }
 .master-volume input { flex:1; width:auto; height:30px; }
}

/* A filed academic record: two credentials and their status, inside the ledger. */
.qualification-page { display:grid; gap:22px; }
.qualification-card { padding:24px; border:1px solid #8b8570; background:#f0edde; box-shadow:3px 4px 0 #50625512; }
.qualification-card header { display:flex; align-items:center; gap:17px; margin-bottom:20px; }
.credential-mark { display:grid; place-items:center; flex:none; width:62px; height:62px; border:2px solid currentColor; color:#70423b; font:700 26px/1 var(--serif); letter-spacing:-.03em; }
.qualification-card .credential-status { margin:0 0 7px!important; color:#765047; font:12px/1.5 var(--mono)!important; letter-spacing:.05em; text-transform:uppercase; }
.qualification-card h3 { margin:0!important; font:25px/1.2 var(--serif)!important; }
.qualification-card .qualification-detail { margin:0 0 18px!important; color:#535d56; font-size:15px!important; line-height:1.65!important; }
.qualification-subjects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }
.qualification-subjects>div { border-top:2px solid #827352; padding-top:10px; }
.qualification-subjects dt { font:12px/1.6 var(--mono); text-transform:uppercase; color:#786246; }
.qualification-subjects dd { margin:5px 0 0; font:600 16px/1.4 var(--sans); }
.qualification-card .qualification-honor { border-top:1px dashed #8b8570; padding-top:14px; margin:18px 0 0!important; color:#466044; font:14px/1.65 var(--mono)!important; }
.qualification-card .qualification-award { font:21px/1.5 var(--serif)!important; margin:0!important; }
.qualification-card.is-complete .credential-mark { color:#4f625d; }
.qualification-card.is-complete .credential-status { color:#4f625d; }
@container(max-width:440px) {
 .qualification-card { padding:18px; }
 .qualification-card header { gap:13px; align-items:start; }
 .credential-mark { width:48px; height:48px; font-size:22px; }
 .qualification-card h3 { font-size:23px!important; }
 .qualification-subjects { grid-template-columns:1fr; gap:15px; }
}

/* Skills are grouped as readable inventory labels, without proficiency scores. */
.skills-page { display:grid; gap:25px; }
.skill-group { border-top:1px solid #8c8774; padding-top:16px; }
.skill-group h3 { margin:0 0 15px!important; font:25px/1.2 var(--serif)!important; }
.skill-tags { display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0; }
.skill-tags li { padding:8px 12px; border:1px solid #8e8469; background:#efe9d6; color:#3e4c4d; font:15px/1.45 var(--mono); }
.skill-list { display:grid; gap:10px; padding-left:20px; margin:0; font:16px/1.6 var(--sans); }
.skill-list li::marker { color:#967456; }
.skill-list strong { font-weight:600; }
.skills-page .skill-note { padding:13px 17px; border-left:2px solid #9a775a; background:#d7cba433; color:#5a6258; font:italic 16px/1.65 var(--serif)!important; margin:0!important; }

/* Short reasoning sequences within the existing conversation panel. */
.reasoning-chain { list-style:none; counter-reset:reasoning; padding:0; margin:22px 0 25px; }
.reasoning-chain[hidden] { display:none; }
.reasoning-chain li { position:relative; counter-increment:reasoning; padding:0 0 20px 35px; border-left:1px solid #b596744d; margin-left:10px; }
.reasoning-chain li:last-child { border-left-color:transparent; padding-bottom:0; }
.reasoning-chain li::before { content:counter(reasoning); position:absolute; top:0; left:-11px; width:21px; height:24px; background:#211e2c; color:#e5b187; text-align:center; font:14px/24px var(--mono); }
.reasoning-chain strong { display:block; margin-bottom:4px; font:600 15px/1.5 var(--sans); color:#efceb0; }
.reasoning-chain span { display:block; font:16px/1.7 var(--sans); color:#d1d8ce; }


/* An intact payphone stands on the earth beside the church. */
.street-scene .phone-station{
  left:var(--phone-ground-x,87%);top:var(--phone-ground-y,83%);
  right:auto;bottom:auto;width:82px;
  transform:translate(calc(-81.8% + var(--pan-x,0px)),calc(-90.9% + var(--pan-y,0px)));
}
.street-scene .telephone,
.street-scene .telephone:hover,
.street-scene .phone-station.is-connected .telephone{transform:none}
.street-scene .phone-art{
  width:100%;margin:0;transform-origin:81.8% 90.9%;
  opacity:.9;filter:saturate(.7) brightness(.82) contrast(.91);
  -webkit-mask-image:linear-gradient(90deg,transparent,#0004 12%,#000d 22%,#000 33%,#000 77%,#0007 89%,transparent),linear-gradient(180deg,transparent,#0005 5%,#000 12%,#000 70%,#0009 83%,transparent);
  mask-image:linear-gradient(90deg,transparent,#0004 12%,#000d 22%,#000 33%,#000 77%,#0007 89%,transparent),linear-gradient(180deg,transparent,#0005 5%,#000 12%,#000 70%,#0009 83%,transparent);
  transition:filter .3s,opacity .3s;
}
.street-scene .phone-art::after{
  background:linear-gradient(155deg,#79695355,#55506c55 54%,#343449aa);
}
.street-scene .telephone:hover .phone-art,
.street-scene .telephone:focus-visible .phone-art{opacity:1;filter:saturate(.78) brightness(.94) contrast(.94)}
.street-scene.is-raining .phone-art{filter:saturate(.6) brightness(.67) contrast(.9)}
.street-scene .phone-tag{
  position:absolute;right:calc(100% + 4px);bottom:14px;width:158px;
  padding:8px 10px;margin:0;background:#171c2bd9;border:1px solid #b49b7450;
  color:#dfd3b9;box-shadow:none;opacity:0;pointer-events:none;
  transform:translateX(4px);transition:opacity .2s,transform .2s;
}
.street-scene .phone-tag b{font-size:16px}
.street-scene .phone-tag small{font-size:12px;margin-top:4px;color:#bcbaa9}
.street-scene .telephone:hover .phone-tag,
.street-scene .telephone:focus-visible .phone-tag{opacity:1;transform:translateX(0)}
.street-scene .phone-station.is-connected .phone-tag{opacity:0}
.street-scene .phone-connection{right:calc(100% + 12px);top:auto;bottom:0;width:245px}
@media(max-width:760px){
  .street-scene .phone-station{left:auto;right:9%;top:1410px;bottom:auto;width:88px;transform:none}
  .street-scene .phone-connection{right:0;bottom:0;width:min(245px,78vw)}
}


/* Rain sends the flying flock under the painted porch eaves. */
.gull-shelter{position:absolute;inset:0;pointer-events:none}
.perched-gull{position:absolute;left:var(--perch-x);top:var(--perch-y);width:var(--perch-width);aspect-ratio:520/400;transform:translate(-64%,-93%);opacity:.86;filter:brightness(.9) sepia(.12)}
.perched-gull svg{display:block;width:100%;height:100%;overflow:hidden}
.perched-gull:nth-child(even){transform:translate(-36%,-93%)}
.perched-gull:nth-child(even) svg{transform:scaleX(-1)}
.street-scene.is-raining .gull-flock,.street-scene.is-raining .gull-flock *{animation-play-state:paused!important}

/* Keep original phone pixels; mask the canopy, mechanism, cord, and post only. */
.street-scene .phone-art{-webkit-mask-image:none;mask-image:none;opacity:.94;filter:saturate(.76) brightness(.88) contrast(.93)}
.street-scene .phone-art::after{display:none}

/* One environmental interaction orb over the telephone, without a thought orbit. */
.street-scene .telephone{position:relative;overflow:visible}
.phone-thought{
  position:absolute;left:92%;top:-4.4px;width:40.8px;height:40.8px;
  transform:translateX(-50%);z-index:1;
  filter:drop-shadow(0 1px 2px #111522);
  transition:opacity .2s,visibility .2s,filter .2s;
}
.phone-thought svg{display:block;width:100%;height:100%;overflow:visible}
.phone-thought-disc{
  transform-origin:24px 24px;
  animation:phone-thought-pulse 3.8s ease-in-out infinite;
}
.telephone:hover .phone-thought,
.telephone:focus-visible .phone-thought{filter:drop-shadow(0 0 5px #74b37e99)}
.telephone:hover .phone-thought-disc,
.telephone:focus-visible .phone-thought-disc{animation-play-state:paused}
.phone-station.has-been-used .phone-thought{opacity:0;visibility:hidden;pointer-events:none}
@keyframes phone-thought-pulse{
  0%,100%{opacity:.83;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.phone-thought-disc{animation:none}}

/* A single speaker identifies each observation; its family supplies the accent. */
.street-scene .scene-observation b[data-family="intellect"]{color:#91d2d4}
.street-scene .scene-observation b[data-family="psyche"]{color:#c4a9df}
.street-scene .scene-observation b[data-family="physique"]{color:#dda0af}
.street-scene .scene-observation b[data-family="motorics"]{color:#e9bb83}
.street-scene .scene-observation b{flex-shrink:0}
@media(max-width:760px){
  .street-scene .scene-observation{flex-direction:column;align-items:flex-start;gap:6px}
}

/* The approved ink insignia belongs only to the qualifications title. */
.notebook-title-row{display:flex;align-items:center;gap:20px;margin-bottom:14px}
.notebook-title-row #dossier-title{min-width:0;flex:1;margin:0}
#qualification-badge{display:block;flex:0 0 auto;width:110px;max-width:20%;height:auto;opacity:.87;pointer-events:none}
@media(max-width:560px){.notebook-title-row{gap:12px}#qualification-badge{width:78px}}

/* The two-line introduction is centered on the full page. */
.inner-heading{grid-template-columns:repeat(3,minmax(0,1fr))}
.inner-heading h2{grid-column:1;grid-row:2}
.inner-heading>p:last-child{grid-column:2;grid-row:2;justify-self:center;max-width:100%;text-align:center}
.inner-heading>p:last-child br{display:initial}
@media(max-width:1100px){
  .inner-heading{grid-template-columns:minmax(0,1fr)}
  .inner-heading>p:last-child{grid-column:1;grid-row:3}
}

/* One stationary swipe surface includes paper, sidebar, header, and page controls. */
#dossier{touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain}

/* Laptop composition: retain readable lettering and fit the actual available height. */
.harbor-fitted .masthead{height:76px;padding-inline:4%;gap:18px}
.harbor-fitted .brand-mark{font-size:38px}
.harbor-fitted .header-actions{gap:16px;flex-wrap:nowrap}
.harbor-fitted .street-scene{height:var(--harbor-height,100svh);min-height:0}
.harbor-fitted .street-scene .address-panel{
  left:4%;top:var(--harbor-content-top,94px);width:350px;
  padding:12px;border-width:4px;transform:none;
}
.harbor-fitted .address-heading{padding:0 5px 9px;gap:12px}
.harbor-fitted .address-heading h2{font-size:20px}
.harbor-fitted .speaker-grille{height:34px}
.harbor-fitted .door-list{gap:5px;padding:8px 0}
.harbor-fitted .doorplate{min-height:50px;padding:5px 8px;gap:8px}
.harbor-fitted .plate-name strong{font-size:15px;line-height:1.3;letter-spacing:0}
.harbor-fitted .plate-name small{font-size:12px;line-height:1.4;margin-top:2px}
.harbor-fitted .room-number{font-size:13px;padding-right:6px}
.harbor-fitted .doorbell{width:28px;height:30px}
.harbor-fitted .future-door{margin-bottom:4px}
.harbor-fitted .intercom-caption{padding:4px 5px 0;gap:9px}
.harbor-fitted .intercom-caption p{font-size:12px;line-height:1.5;min-height:36px}
.harbor-fitted .street-scene .scene-copy{
  top:var(--harbor-content-top,94px);left:43%;right:5%;
  padding:12px 18px;max-width:690px;
}
.harbor-fitted .street-scene .scene-copy>.eyebrow{font-size:12px;margin-bottom:12px}
.harbor-fitted .street-scene .scene-copy h1{font-size:clamp(58px,5.2vw,82px);line-height:1;margin-bottom:12px}
.harbor-fitted .street-intro{font-size:26px;margin-bottom:14px}
.harbor-fitted .street-description{font-size:16px;line-height:1.65;margin-bottom:0}
.harbor-fitted .street-scene .ledger-pocket{
  left:max(32%,420px);width:130px;top:auto;
  bottom:calc(var(--harbor-bottom-reserve,100px) + 44px);
}
.harbor-fitted .ledger-pocket-label{bottom:-40px;left:0;width:180px}
.harbor-fitted .street-scene .gull-marker{top:var(--harbor-marker-top,365px);right:5%}
.harbor-fitted .street-scene .scene-bottom{
  left:4%;right:4%;bottom:12px;padding:12px 16px;
  flex-direction:row;flex-wrap:nowrap;gap:16px;
}
.harbor-fitted .street-scene .scene-observation{min-width:0;max-width:none;gap:14px;font-size:15px;line-height:1.5}
.harbor-fitted .street-scene .scene-observation b{font-size:11px}
.harbor-fitted .harbor-controls{flex-wrap:nowrap;gap:8px}
.harbor-fitted .harbor-controls button{font-size:13px;padding:9px 11px}

/* When nine rows cannot fit, use two readable columns instead of scaling the scene. */
.harbor-fitted .street-scene[data-harbor-layout=spread]{--directory-width:clamp(520px,46vw,620px);--copy-left:calc(4% + var(--directory-width) + 24px)}
.harbor-fitted .street-scene[data-harbor-layout=spread] .address-panel{width:var(--directory-width)}
.harbor-fitted [data-harbor-layout=spread] .door-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.harbor-fitted [data-harbor-layout=spread] .doorplate{min-height:62px}
.harbor-fitted [data-harbor-layout=spread] .future-door{min-height:50px}
.harbor-fitted .street-scene[data-harbor-layout=spread] .scene-copy{left:var(--copy-left);right:4%;padding:10px 14px}
.harbor-fitted .street-scene[data-harbor-layout=spread] .scene-copy h1{font-size:clamp(50px,5vw,68px)}
.harbor-fitted [data-harbor-layout=spread] .street-intro{font-size:24px}
.harbor-fitted [data-harbor-layout=spread] .street-description br{display:none}
.harbor-fitted .street-scene[data-harbor-layout=spread] .ledger-pocket{left:var(--copy-left);width:110px}
.harbor-fitted .street-scene.taking-in-view{height:100svh;min-height:0}

/* One painted object: muted pigment, worn edges, and the harbor's shared light. */
.street-scene .address-panel{background:transparent;border-color:transparent;box-shadow:none;isolation:isolate}
.address-panel::before{
  content:'';position:absolute;inset:-3.2% -5%;z-index:-1;pointer-events:none;
  background:url('assets/intercom-backing-painted.png') center / 100% 100% no-repeat;
  filter:drop-shadow(4px 6px 3px #25253866);
}
.address-heading{border-bottom-color:#c1b79c35;color:#eee1bf}
.building-no{color:#d0b986}
.speaker-grille{border-color:#98a29940;background:repeating-linear-gradient(0deg,transparent 0 3px,#233a3de0 3px 5px);opacity:.8}
.street-scene .doorplate{
  background:linear-gradient(112deg,#d2a16b12,transparent 45%,#29264030),url('assets/intercom-wood-painted.png') center var(--grain-y,55%) / cover;
  border:1px solid #c6976440;border-right-color:#2e30374a;border-bottom-color:#2e30374a;
  box-shadow:0 2px 2px #22253630;
}
.street-scene .doorplate:hover{filter:brightness(1.12);box-shadow:0 2px 3px #23253544}
.street-scene .doorplate:active{box-shadow:0 1px 1px #22253640}
.plate-name strong{color:#f4e7ca;text-shadow:0 1px 2px #1a202a90}
.plate-name small,.future-door .plate-name small{color:#dfcead;text-shadow:0 1px 2px #20212b80}
.room-number,.doorplate.has-rung .room-number{color:#d0b98f;border-right-color:#d4b88940;text-shadow:none}
.street-scene .doorbell{background:#344c4e;border:1px solid #98a2939c;box-shadow:inset 0 1px 3px #1b2b3c70;border-radius:3px}
.street-scene .doorbell>span{border-color:#97a08b;background:#e1d7ae;box-shadow:0 0 6px #efcc8555}
.street-scene .doorplate.has-rung .doorbell>span{background:#efbd73;box-shadow:0 0 8px #efc17b88}
.street-scene .doorplate.is-ringing .doorbell>span{background:#fff4cf;box-shadow:0 0 15px 5px #ffd77399}
.street-scene .future-door{border-style:dashed;filter:saturate(.7)}
.street-scene .future-door .doorbell>span{background:#9d9d90;box-shadow:none}

/* The notebook is a window-sized frame; its paper and index scroll independently. */
:root{--viewport-height:100dvh;--thought-panel-height:640px}
#dossier{
  width:min(1200px,calc(100% - 32px));max-width:calc(100% - 16px);
  height:calc(var(--viewport-height) - 32px);max-height:calc(var(--viewport-height) - 32px);
  border-width:9px;border-left-width:17px;overflow:hidden;
}
#dossier[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#dossier .dossier-top{position:relative;padding:12px 22px;z-index:2}
#dossier .dossier-top>.eyebrow{margin:0;min-width:0;overflow-wrap:anywhere}
#dossier .close-dialog{flex:none;min-height:44px}
#dossier .dossier-layout{min-height:0;overflow:hidden;grid-template-columns:185px minmax(0,1fr)}
#dossier .case-index{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:20px 12px}
#dossier .dossier-body{
  min-width:0;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;
  padding:clamp(20px,3vh,34px) clamp(22px,3vw,38px) 24px;
}
#dossier .dossier-body:focus-visible{outline:2px solid #9e3e2c;outline-offset:-5px}
#dossier .dossier-navigation{padding:10px 24px 12px 211px;background:#e7e4d8;z-index:2}
#dossier .notebook-sheet{min-height:0}
#dossier .notebook-sheet.has-illustration{grid-template-columns:minmax(0,1fr) clamp(150px,16vw,210px)}
#dossier-copy{overflow-wrap:break-word}
#dossier .case-index,#dossier .dossier-body{scrollbar-width:thin;scrollbar-color:#8c9e99 transparent}
#notebook-pages button>span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-height:820px){
  #dossier .dossier-body{padding-block:20px}
  #dossier .dossier-body h2{font-size:clamp(28px,3vw,36px)}
  #dossier-kicker{margin-bottom:12px}
  #notebook-entry-meta{margin-bottom:20px;padding-bottom:12px}
  #dossier .notebook-index button{padding-block:14px}
  #dossier-copy p{font-size:16px;line-height:1.75;margin-bottom:16px}
  #dossier .case-index{padding-block:14px}
  #dossier .notebook-page-section{margin-block:8px;padding-top:10px}
}
@container(min-width:830px){
  .qualification-page{grid-template-columns:1.3fr 1fr;align-items:start}
}
@container(max-width:520px){
  #dossier .notebook-sheet.has-illustration{display:block}
}
@media(max-width:800px){
  #dossier{width:calc(100% - 16px);height:calc(var(--viewport-height) - 16px);max-height:calc(var(--viewport-height) - 16px);border-width:6px}
  #dossier .dossier-top{padding:8px 12px;gap:10px}
  #dossier .dossier-top>.eyebrow{font-size:11px}
  #dossier .dossier-layout{display:flex;flex-direction:column}
  #dossier .case-index{display:flex;flex:none;max-height:28vh;max-height:calc(var(--viewport-height)*.28);padding:8px 10px;gap:4px}
  #dossier .notebook-sections{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  #dossier .notebook-sections button{grid-column:auto;min-height:44px;padding:8px 6px;font-size:13px;line-height:1.3}
  #dossier .notebook-page-section{margin:4px 0;padding-top:6px}
  #dossier #notebook-entry-label{display:none}
  #dossier #notebook-pages button{font-size:12px;line-height:1.35;padding:6px;min-height:38px}
  #dossier .case-index #secret-toggle{min-width:0;width:auto;padding:6px 10px;font-size:12px}
  #dossier .case-index #secret-toggle br{display:none}
  #dossier .dossier-body{flex:1;padding:20px 18px}
  #dossier .dossier-navigation{padding:8px 12px;gap:6px 10px}
  #dossier .dossier-navigation button{padding:8px;font-size:13px;min-height:44px}
  #dossier #notebook-page-count{font-size:12px}
  #dossier .toc-title-block strong{font-size:21px}
}

/* Each thought is a viewport-sized conversation, with its controls always in reach. */
.inner-world{padding-bottom:28px;scroll-margin-top:0}
.inner-heading{padding-top:26px;padding-bottom:24px;gap:12px}
.inner-heading>.eyebrow{margin:0}
.inner-heading h2{font-size:clamp(42px,4vw,58px);line-height:1.05;margin:0}
.inner-layout{min-width:0}
.dialogue,.inner-illustration{min-width:0}
@media(min-width:1000px){
  .inner-heading{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inner-heading>p:last-child{grid-column:2;grid-row:2}
  .inner-layout{height:var(--thought-panel-height);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .inner-illustration{min-height:0;aspect-ratio:auto}
  .dialogue{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0;overflow:hidden;padding:20px 24px 16px}
  .voice-tabs{margin-bottom:16px}
  #voice-panel{min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding-right:12px;scrollbar-width:thin;scrollbar-color:#806b82 transparent}
  #voice-panel:focus-visible{outline:1px solid #c4b1ba;outline-offset:-2px}
  .voice-line{font-size:clamp(22px,2vw,27px);min-height:0;margin-bottom:14px}
  .thought-choices{gap:4px;margin-bottom:18px}
  .thought-choices button{font-size:16px;min-height:40px;padding:7px 8px}
  .thought-response{margin-top:18px;padding-bottom:10px}
  .thought-response p:not(.eyebrow){font-size:16px;line-height:1.7}
  .reasoning-chain span{font-size:16px;line-height:1.65}
  .skill-check{margin-top:14px;padding-top:12px}
  .skill-check>.eyebrow{margin-bottom:10px;font-size:11px}
  #check-result{min-height:0;margin-top:10px;font-size:15px;line-height:1.5}
  .authored-note{margin-top:10px;font-size:11px;line-height:1.5}
}
@media(max-width:999px){
  .inner-heading{grid-template-columns:1fr}
  .inner-heading>p:last-child{grid-column:1;grid-row:3}
  .inner-layout{grid-template-columns:1fr;height:auto}
  .inner-illustration{min-height:0;aspect-ratio:1.6;max-height:calc(var(--viewport-height)*.48)}
  .dialogue{padding:24px;border-left:0;border-top:4px solid #725777}
  .voice-line{min-height:0;font-size:25px}
  #voice-panel{overflow:visible}
  #check-result{min-height:0}
}
@media(max-width:560px){
  .inner-heading{padding-block:24px;gap:14px}
  .inner-heading h2{font-size:44px}
  .inner-layout{margin-inline:4%}
  .dialogue{padding:20px 16px}
  .voice-tabs{margin-bottom:20px}
  .voice-tabs button{font-size:13px;padding:10px 4px;line-height:1.25}
  .thought-response p:not(.eyebrow){font-size:16px}
  .check-controls{flex-wrap:wrap;gap:14px}
  .inner-illustration figcaption{font-size:10px;left:14px;right:14px;bottom:14px}
}

/* Smaller viewports also govern verdicts, the future file, and closing material. */
#check-transition{height:var(--viewport-height);max-height:var(--viewport-height);padding:clamp(12px,2.5vh,24px)}
#check-transition .check-announcement{max-width:100%;margin:auto auto 0;padding-top:10px}
#future-file{max-height:calc(var(--viewport-height) - 24px);padding:clamp(20px,3vh,34px) clamp(22px,3vw,39px)}
#close-future{position:sticky;top:0;background:#252033;z-index:1;min-height:44px;margin-bottom:20px}
@media(max-height:760px){
  #future-file .future-failure{font-size:38px;padding-block:12px;margin-block:14px}
  #future-title{font-size:30px;margin-bottom:16px}
  #future-description{font-size:17px;line-height:1.6}
  .future-stamp{margin-block:20px 14px;padding:12px}
  #check-transition .check-roll-scene{--die-size:68px;margin-block:12px}
  #check-transition .check-action{margin-bottom:8px}
}
.closing{padding-block:clamp(36px,6vh,72px);gap:clamp(24px,4vw,45px)}
.closing h2{font-size:clamp(42px,4.5vw,64px);margin-bottom:22px}
.closing-email{font-size:clamp(22px,2.5vw,30px);overflow-wrap:anywhere}
.closing p{font-size:16px}
.footer{padding-block:clamp(24px,4vh,40px);gap:18px 25px}
@media(max-width:800px){
  .closing{grid-template-columns:1fr;gap:20px}
  .closing h2 em{margin-left:30px}
  .closing p br{display:none}
.art-dedication .dedication-copy{font-size:16px;line-height:1.65}
}

/* Replaceable paper names sit under glass; buzzers belong to the blue housing. */
.street-scene .doorplate{
  padding:0;gap:12px;border:0;background:none;box-shadow:none;filter:none;
  align-items:stretch;transition:translate .2s;
}
.street-scene .doorplate:hover,.street-scene .doorplate:active{background:none;box-shadow:none;filter:none;translate:none}
.street-scene .doorplate:active .doorbell{transform:translateY(1px)}
.name-insert{
  --insert-paper:url('assets/intercom-paper.png');
  position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;
  flex:1;min-width:0;padding:7px 10px;
  background:#354c4d;border:1px solid #a1afa15e;border-radius:1px;
  box-shadow:0 1px 2px #182e3866,inset 0 0 2px #152d36;
}
.name-insert::before{
  content:'';position:absolute;inset:2px;z-index:-1;pointer-events:none;
  background-color:#d8d0b4;background-image:var(--insert-paper,none);
  background-size:cover;background-position:center var(--grain-y,55%);
  clip-path:polygon(.2% .8%,35% .2%,72% 1%,99.8% .3%,99.5% 99%,66% 99.7%,30% 98.8%,.3% 99.5%);
}
.name-insert::after{
  content:'';position:absolute;inset:1px;pointer-events:none;
  background:linear-gradient(113deg,transparent 36%,#fffbe018 37%,#fffbe009 43%,transparent 44%),linear-gradient(#e3f0e111,transparent 45%);
  box-shadow:inset 0 1px 0 #edf3df24;opacity:.6;transition:opacity .2s;
}
.doorplate:hover .name-insert::after,.doorplate:focus-visible .name-insert::after{opacity:1}
.street-scene .name-insert .plate-name strong{color:#2a393b;text-shadow:none;font-weight:600}
.street-scene .name-insert .plate-name small{color:#4a5550;text-shadow:none}
.street-scene .name-insert .room-number{color:#71664f;border-right-color:#8e85654a;text-shadow:none}
.street-scene .doorplate .doorbell{align-self:center;flex:none;margin:0 4px 0 0}
.street-scene .future-door{transform:none;filter:none;margin-top:2px}
.future-door .name-insert::before{filter:saturate(.65) brightness(.92)}
.future-door .name-insert{border-style:dashed}
.harbor-fitted .street-scene .name-insert{padding:5px 9px}
@media(max-width:390px){.street-scene .doorplate{gap:9px}.name-insert{padding:7px 8px;gap:7px}}
@media(prefers-reduced-motion:reduce){.name-insert::after{transition:none}}