@charset "UTF-8";
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/instrument-serif-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/instrument-serif-italic.ttf") format("truetype");
}

:root {
  --ink:#142d28;
  --paper:#f5f0e4;
  --paper-soft:#ece7da;
  --muted:#7e887e;
  --gold:#efc879;
  --orange:#d98752;
  --green:#b6ddbd;
  --line:rgba(245,240,228,.18);
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Instrument Serif",Georgia,serif;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--ink);
  font-family:var(--sans);
  color:var(--paper);
  font-size:14px;
  -webkit-font-smoothing:antialiased
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  cursor:pointer
}

button:disabled {
  cursor:wait
}

a {
  color:inherit
}

button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px
}

button {
  color:inherit
}

button,a {
  touch-action:manipulation
}

[hidden] {
  display:none!important
}

::selection {
  background:#d0ac67;
  color:#17392e
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  left:20px;
  top:-70px;
  z-index:100;
  background:var(--paper);
  color:var(--ink);
  padding:14px
}

.skip-link:focus {
  top:14px
}

.app {
  height:100svh;
  min-height:620px;
  display:flex;
  flex-direction:column;
  overflow:hidden
}

.topbar {
  height:80px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
  background:#142a25;
  z-index:10;
  border-bottom:1px solid var(--line)
}

.wordmark {
  display:flex;
  gap:13px;
  align-items:center;
  text-decoration:none;
  font-size:15px;
  letter-spacing:.06em
}

.wordmark small {
  display:block;
  font-size:8px;
  letter-spacing:.19em;
  color:#9aafa2;
  margin-top:4px
}

.brand-mark {
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-size:34px;
  color:var(--gold);
  line-height:1
}

.top-actions {
  display:flex;
  align-items:center;
  gap:26px
}

.icon-button {
  height:34px;
  width:34px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  font-size:21px;
  position:relative
}

.sound-slash {
  position:absolute;
  left:8px;
  top:15px;
  width:17px;
  height:1px;
  background:var(--paper);
  transform:rotate(-45deg)
}

.icon-button[aria-pressed=true] .sound-slash {
  display:none
}

.sound-control {
  position: relative;
}

.music-credit {
  position: absolute;
  top: 100%;
  right: -16px;
  display: grid;
  gap: 5px;
  width: max-content;
  max-width: 240px;
  padding: 16px;
  border: 1px solid #d8caaa;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 24px #0b201c33;
  font-size: 11px;
  line-height: 1.7;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}

.sound-control:hover .music-credit,
.sound-control:focus-within .music-credit {
  opacity: 1;
  visibility: visible;
}

.music-credit a {
  text-underline-offset: 3px;
}

.text-button {
  border:0;
  background:none;
  font-size:13px;
  padding:8px 0
}

.text-button span {
  margin-left:14px;
  color:var(--gold)
}

.game {
  flex:1;
  position:relative;
  min-height:0;
  isolation:isolate;
  overflow:hidden;
  background:#182b25
}

.scene {
  position:absolute;
  inset:0;
  overflow:hidden;
  outline-offset:-4px!important;
  cursor:crosshair
}

.world {
  position:absolute;
  width:1672px;
  height:941px;
  transform-origin:0 0;
  will-change:transform
}

.room {
  width:100%;
  height:100%;
  display:block;
  user-select:none;
  pointer-events:none
}

.scene-vignette {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(14,26,22,.2),transparent 20%,transparent 65%,rgba(13,25,21,.72));
  z-index:2
}

.machine-glow {
  position:absolute;
  left:714px;
  top:258px;
  width:151px;
  height:155px;
  border-radius:50%;
  background:radial-gradient(ellipse,#8bf6bf30,transparent 70%);
  filter:blur(10px);
  animation:breathe 4s ease-in-out infinite;
  pointer-events:none
}

.is-powered .machine-glow {
  box-shadow:0 0 100px 50px #90ffb687;
  background:#a1ffad77
}

.screen-glow {
  position:absolute;
  left:347px;
  top:332px;
  width:77px;
  height:58px;
  background:#a1efbd1a;
  box-shadow:0 0 28px #bfffe91a;
  pointer-events:none
}

.is-playing .screen-glow {
  animation:screenPlay .8s linear infinite
}

.lamplight {
  position:absolute;
  left:1460px;
  top:240px;
  width:55px;
  height:50px;
  background:#ffcf8133;
  filter:blur(15px)
}

.dust {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:100%;
  background:#ffe5af;
  opacity:.2;
  box-shadow:34px 72px #ffe5af,150px 33px #ffe5af,400px 160px #ffe5af,700px 15px #ffe5af,960px 150px #ffe5af,1300px 80px #ffe5af;
  left:100px;
  top:260px;
  animation:dustFloat 12s ease-in-out infinite
}

.dust-two {
  left:160px;
  top:400px;
  animation-delay:-6s;
  opacity:.12
}

.station {
  position:absolute;
  top:var(--station-top,242px);
  padding:12px;
  border:0;
  border-radius:4px;
  background:transparent;
  transform:translateX(-50%);
  white-space:nowrap;
  transition:opacity .2s;
  z-index:4
}

.station-surface {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:62px;
  padding:0 25px;
  color:#384435;
  box-shadow:0 6px 9px #101c2259;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease
}

.station-title {
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:.08em
}

.station-arrow {
  font-size:19px;
  font-weight:400;
  opacity:.6;
  transition:translate .22s ease,opacity .22s ease
}

.station:hover .station-surface,
.station:focus-visible .station-surface {
  transform:translateY(-4px) rotate(0);
  box-shadow:0 11px 16px #101c2266;
  filter:brightness(1.07)
}

.station:hover .station-arrow {
  translate:2px -2px;
  opacity:1
}

.station:active .station-surface {
  transform:translateY(1px) rotate(0);
  box-shadow:0 2px 4px #101c2259
}

.station.active .station-surface {
  filter:brightness(1.13);
  box-shadow:0 0 0 2px #f7d99c,0 8px 18px #101c2266
}

.station.completed .station-arrow {
  color:#36764e;
  opacity:1
}

.station-edit {
  left:380px
}

.station-edit .station-surface {
  min-width:180px;
  border:8px solid #343b31;
  border-right-width:5px;
  border-left-width:5px;
  border-radius:3px;
  background:linear-gradient(100deg,#ddcea7,#f3e5c4 50%,#deceaa);
  transform:rotate(-3deg)
}

.station-edit .station-surface::before,
.station-edit .station-surface::after {
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  height:4px;
  background:repeating-linear-gradient(90deg,#c4b58a 0 6px,transparent 6px 16px)
}

.station-edit .station-surface::before {top:-6px}
.station-edit .station-surface::after {bottom:-6px}

.station-ai {
  left:840px
}

.station-ai .station-surface {
  gap:14px;
  min-height:60px;
  border:3px ridge #c5a469;
  border-radius:7px;
  background:linear-gradient(135deg,#ddc191,#b7965f 55%,#d2b27a);
  color:#263d32;
  text-shadow:0 1px #e8cc9a
}

.station-ai .station-surface::before,
.station-ai .station-surface::after {
  content:"";
  position:absolute;
  top:7px;
  width:5px;
  height:5px;
  border:1px solid #84653c;
  border-radius:50%;
  background:linear-gradient(135deg,#dfc693 40%,#74623e 45% 55%,#c0a170 60%);
  box-shadow:0 1px #e1c497
}

.station-ai .station-surface::before {left:7px}
.station-ai .station-surface::after {right:7px}

.station-light {
  width:8px;
  height:8px;
  border:1px solid #3f5835;
  border-radius:50%;
  background:#9dca79;
  box-shadow:0 0 8px #b2df8d
}

.station-chat {
  left:1320px
}

.station-chat .station-surface {
  min-width:184px;
  padding-top:4px;
  padding-bottom:4px;
  background:linear-gradient(155deg,#f2e2ba,#decba3);
  border-radius:1px 1px 14px 1px;
  transform:rotate(3deg);
  box-shadow:1px 6px 8px #101c224d
}

.station-chat .station-surface::before {
  content:"";
  position:absolute;
  width:65px;
  height:18px;
  top:-9px;
  left:calc(50% - 32px);
  background:#a9ae82c4;
  transform:rotate(-5deg);
  clip-path:polygon(3% 0,97% 0,100% 18%,97% 38%,100% 60%,97% 80%,100% 100%,0 100%,3% 75%,0 55%,3% 30%,0 12%)
}

.is-home .station {
  opacity:0;
  pointer-events:none
}

.character {
  position:absolute;
  top:650px;
  width:155px;
  height:230px;
  transform:translate(-50%,-100%);
  z-index:5;
  pointer-events:none
}

.character img {
  display:block;
  position:absolute;
  bottom:0;
  left:50%;
  height:100%;
  width:auto;
  max-width:190px;
  object-fit:contain;
  transform:translateX(-50%);
  filter:drop-shadow(0 3px 2px #16291b22);
  transform-origin:50% 90%
}

.character-shadow {
  position:absolute;
  left:50%;
  bottom:-5px;
  width:96px;
  height:23px;
  border-radius:50%;
  background:#1420146b;
  filter:blur(5px);
  transform:translateX(-50%)
}

.character-name {
  position:absolute;
  top:-23px;
  left:50%;
  transform:translateX(-50%);
  background:#21372de6;
  border:1px solid #f3e1bb40;
  border-radius:20px;
  padding:4px 11px;
  font-size:12px;
  white-space:nowrap;
  z-index:2
}

.character-name i {
  font-size:10px;
  font-style:normal;
  background:#e7c17d;
  color:#233d2d;
  padding:1px 4px;
  border-radius:3px;
  margin-left:4px
}

.host {
  left:540px;
  height:224px
}

.host:has(.host-bubble:not([hidden])) {
  z-index: 6;
}

.host-hit-area {
  position: absolute;
  inset: -24px 8px 0;
  z-index: 3;
  padding: 0;
  border: 0;
  border-radius: 48% 48% 14px 14px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.host:has(.host-hit-area:hover) .character-name,
.host:has(.host-hit-area:focus-visible) .character-name {
  background: #38513a;
  border-color: var(--gold);
}

.host-bubble {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + 43px);
  width: 260px;
  padding: 14px 17px;
  border: 1px solid #d4c39d;
  border-radius: 13px 13px 13px 4px;
  background: #fbf2df;
  color: #284332;
  box-shadow: 0 6px 24px #17261c38;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
  transform: translate(calc(-50% + var(--bubble-offset-x, 0px)), var(--bubble-offset-y, 0px));
}

.host-bubble::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: calc(50% - var(--bubble-offset-x, 0px));
  width: 12px;
  height: 12px;
  border-right: 1px solid #d4c39d;
  border-bottom: 1px solid #d4c39d;
  background: #fbf2df;
  transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 650px) {
  .host-bubble {
    width: 325px;
    font-size: 21px;
    padding: 17px 21px;
  }
}

.visitor {
  left:160px;
  height:218px
}

.walking img {
  animation:walk .25s linear infinite
}

.walking .character-shadow {
  animation:shadowWalk .25s linear infinite
}

.visitor.facing-left img,.host.facing-right img {
  transform:translateX(-50%) scaleX(-1)
}

.destination {
  position:absolute;
  top:642px;
  left:360px;
  width:66px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  border:2px solid #f1cf8fa8;
  box-shadow:0 0 20px #efc87955;
  opacity:0;
  transition:opacity .2s
}

.destination.visible {
  opacity:1;
  animation:breathe 1.5s infinite
}

.intro {
  position:absolute;
  inset:0;
  z-index:6;
  padding:clamp(30px,7vh,85px) 7vw;
  display:flex;
  align-items:flex-start;
  background:linear-gradient(90deg,rgba(11,30,24,.94),rgba(13,30,24,.87) 32%,rgba(13,30,24,.2) 70%,transparent);
  overflow:hidden
}

.intro-copy {
  position:relative;
  z-index:2
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  letter-spacing:.2em;
  color:#bfd0ba;
  margin:0 0 34px
}

.eyebrow>span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d7bc79;
  box-shadow:0 0 12px #e4c68488
}

.hello {
  font-family:"Instrument Serif",Georgia,serif;
  font-size:clamp(37px,4vw,65px);
  font-style:italic;
  color:var(--gold);
  margin:0 0 12px;
  letter-spacing:-.045em
}

.intro h1 {
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.01em;
  line-height:1.27;
  font-size:clamp(36px,4vw,62px);
  margin:0 0 23px
}

.intro-description {
  color:#c3c8b9;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.04em;
  margin:0 0 30px
}

.intro-actions {
  display:flex;
  align-items:center;
  gap:19px
}

.intro-actions>span {
  font-size:11px;
  color:#9bab9b
}

.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:46px;
  padding:13px 23px;
  background:var(--gold);
  color:#20372a;
  border:1px solid var(--gold);
  border-radius:5px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 4px 0 #a67d42;
  transition:transform .18s,background .18s,box-shadow .18s
}

.primary-button:hover {
  background:#f9d996;
  transform:translateY(-2px);
  box-shadow:0 6px 0 #a67d42
}

.primary-button:active {
  transform:translateY(3px);
  box-shadow:0 1px 0 #a67d42
}

.primary-button span {
  font-size:20px;
  font-weight:400;
  line-height:1
}

.intro-sign {
  position:absolute;
  right:6vw;
  bottom:45px;
  display:flex;
  align-items:center;
  gap:20px;
  font-family:var(--serif);
  letter-spacing:.12em;
  color:#f7e7c4;
  font-size:15px
}

.intro-sign i {
  font-style:normal;
  font-size:40px;
  color:var(--gold);
  animation:slowSpin 60s linear infinite
}

.is-home .character {
  opacity:.8
}

.chapter-label {
  position:absolute;
  left:35px;
  top:23px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:15px;
  padding:11px 15px;
  border:1px solid #d6d9ba30;
  border-radius:5px;
  background:#132a23c9;
  backdrop-filter:blur(12px)
}

.chapter-label>span:first-child {
  font-family:"Instrument Serif",Georgia,serif;
  color:var(--gold);
  letter-spacing:.08em;
  font-size:17px
}

.chapter-label>span:last-child {
  font-size:12px;
  color:#dce1ce
}

.interaction-panel {
  position:absolute;
  z-index:8;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:min(730px,calc(100% - 48px));
  padding:23px 28px 22px;
  background:#f7f1e5f5;
  color:var(--ink);
  border:1px solid #fff5df;
  border-radius:10px;
  box-shadow:0 14px 70px #081e1c66,0 2px 0 #bcae87;
  backdrop-filter:blur(18px);
  animation:panelIn .32s ease-out
}

.dialogue-heading {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:17px
}

.portrait {
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #d6cbb3;
  flex-shrink:0
}

.speaker {
  font-size:10px;
  color:#8e7955;
  letter-spacing:.06em;
  margin:0 0 4px
}

.dialogue-heading h2 {
  font-size:19px;
  font-weight:600;
  margin:0;
  line-height:1.5
}

.dialogue-heading .panel-close {
  margin-left:auto;
  flex-shrink:0
}

.panel-close {
  width:25px;
  height:25px;
  border:0;
  background:transparent;
  color:#7e846e;
  font-size:18px
}

.panel-copy {
  font-size:14px;
  line-height:1.8;
  margin:0 0 17px;
  color:#526052
}

.panel-copy strong {
  font-weight:500;
  color:#19382c
}

.panel-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:17px
}

.panel-footer > :only-child {
  margin-left:auto
}

.welcome-invitation {
  margin-top:10px
}

.panel-note {
  font-size:10px;
  line-height:1.6;
  color:#858571
}

.quiet-button {
  font-size:12px;
  border:0;
  background:none;
  color:#7b806e;
  padding:7px 0;
  text-decoration:underline;
  text-underline-offset:4px
}

.small-primary {
  padding:10px 16px;
  border:0;
  border-radius:5px;
  background:#234d3b;
  color:#f9f1dd;
  font-size:12px;
  display:inline-flex;
  gap:14px;
  align-items:center;
  min-height:39px
}

.small-primary:hover {
  background:#32634c
}

.small-primary:disabled {
  opacity:.6
}

.reel-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.reel-card {
  position:relative;
  border:1px solid #cabfa7;
  background:#eee4cd;
  color:#2c4435;
  border-radius:5px;
  padding:0;
  text-align:left;
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  min-width:0
}

.reel-card:hover,.reel-card[aria-pressed=true] {
  transform:translateY(-4px);
  box-shadow:0 6px 14px #4f533922;
  border-color:#42684e
}

.reel-card .reel-art {
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:#d4ddc7
}

.reel-card:nth-child(2) .reel-art {
  background:#d7d6bf
}

.reel-card:nth-child(3) .reel-art {
  background:#e6c9a6
}

.reel-card>span:last-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 11px;
  font-size:12px
}

.reel-card>span:last-child b {
  font-weight:400;
  color:#777c63;
  font-size:14px
}

.tiny-window {
  width:62px;
  height:39px;
  border:2px solid #44654e;
  border-radius:3px;
  position:relative;
  box-shadow:6px 5px 0 #97aa87;
  background:#e8e9d1
}

.tiny-window:before {
  content:"";
  position:absolute;
  inset:5px 5px auto;
  height:3px;
  background:#a2b196
}

.tiny-window:after {
  content:"▶";
  position:absolute;
  left:25px;
  top:14px;
  font-size:14px
}

.tiny-code {
  font-family:monospace;
  font-weight:600;
  color:#506349;
  font-size:28px;
  letter-spacing:-5px
}

.tiny-question {
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  color:#8a5539;
  font-size:50px;
  line-height:1
}

.edit-result {
  display:grid;
  grid-template-columns:160px 1fr;
  gap:20px;
  align-items:center
}

.demo-screen {
  height:100px;
  border-radius:5px;
  background:#1d392d;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:5px solid #3d5944;
  box-shadow:0 2px 0 #6c7f5c;
  color:#e7ebce
}

.demo-screen:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:var(--gold);
  transform-origin:left;
  animation:playProgress 2s linear
}

.demo-scene {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  line-height:1.5;
  font-size:12px
}

.demo-scene .tiny-window {
  background:#d6dfbe;
  width:50px;
  height:40px
}

.demo-scene .tiny-question {
  color:#ebce8c
}

.demo-time {
  position:absolute;
  right:5px;
  top:4px;
  font-size:8px;
  color:#a9b699
}

.result-kicker {
  font-size:10px;
  color:#88917b;
  margin:0 0 4px
}

.result-title {
  font-size:17px;
  margin:0 0 7px
}

.result-description {
  font-size:13px;
  line-height:1.8;
  margin:0;
  color:#5b6756
}

.cartridges {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}

.cartridge {
  border:1px solid #b6b79e;
  border-bottom:4px solid #9a9f83;
  border-radius:6px 6px 3px 3px;
  background:#dce1c9;
  color:#294834;
  padding:15px 10px 10px;
  font-size:12px;
  position:relative;
  min-height:77px;
  transition:transform .2s,background .2s
}

.cartridge:before {
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:7px;
  height:3px;
  background:repeating-linear-gradient(90deg,#adba9d 0px,#adba9d 3px,transparent 3px,transparent 6px)
}

.cartridge b {
  display:block;
  font-family:"Instrument Serif",Georgia,serif;
  font-size:20px;
  font-weight:400;
  color:#667e58;
  margin-bottom:5px
}

.cartridge:hover {
  transform:translateY(-3px)
}

.cartridge[aria-pressed=true] {
  background:#bed1ab;
  border-color:#54734a;
  transform:translateY(-5px);
  box-shadow:0 5px 10px #415f3022
}

.delivery-flow {
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0
}

.delivery-flow>span {
  flex:1;
  text-align:center;
  background:#dce4cf;
  padding:12px 5px;
  border-radius:4px;
  font-size:11px;
  transition:background .3s
}

.delivery-flow>span.lit {
  background:#446f50;
  color:#fff5df
}

.delivery-flow>b {
  font-size:15px;
  font-weight:400;
  color:#8e9b80
}

.project-result {
  border-left:3px solid #80a575;
  padding-left:13px;
  margin:12px 0 3px;
  font-size:14px;
  line-height:1.8;
  color:#3c5740
}

.question-picks {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.question-pick {
  padding:12px 15px;
  border:1px solid #c3bea8;
  border-radius:4px;
  background:#efe8d8;
  color:#385340;
  font-size:12px;
  transition:background .2s
}

.question-pick:hover,.question-pick.active {
  background:#dce6cf;
  border-color:#93a280
}

.chat-answer {
  font-size:14px;
  white-space:pre-line;
  line-height:1.9;
  max-height:28vh;
  overflow:auto;
  color:#3d5542;
  margin:6px 0 10px
}

.answer-question {
  font-size:11px;
  color:#8f7952;
  margin:0 0 8px
}

.souvenirs {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:13px 0 21px
}

.souvenirs>span {
  border:1px solid #b3bca0;
  padding:8px 12px;
  border-radius:30px;
  font-size:11px;
  color:#486141;
  background:#e6ead8
}

.souvenirs>span:before {
  content:"✓";
  margin-right:6px
}

.resume-panel {
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:7;
  background:var(--paper);
  color:var(--ink);
  border:0;
  padding:13px 21px;
  border-radius:5px;
  box-shadow:0 3px 0 #9e9a7e
}

.resume-panel span {
  margin-left:15px
}

.scene-hint {
  position:absolute;
  right:25px;
  top:32px;
  font-size:10px;
  color:#e3dfc4;
  background:#18352b99;
  padding:6px 10px;
  z-index:6;
  border-radius:20px
}

.journey-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:74px;
  flex-shrink:0;
  padding:0 42px;
  background:#142a25;
  border-top:1px solid var(--line);
  z-index:10;
  gap:20px
}

.journey-intro,.journey-end {
  font-size:11px;
  color:#9dae9e
}

.journey-end span {
  color:var(--gold);
  margin-left:12px
}

.journey-bar nav {
  display:flex;
  align-items:center;
  gap:16px
}

.journey-bar nav button {
  display:flex;
  align-items:center;
  gap:9px;
  color:#b5c1ab;
  border:0;
  background:none;
  padding:9px 0;
  font-size:11px
}

.journey-bar i {
  font-family:"Instrument Serif",Georgia,serif;
  display:grid;
  place-items:center;
  border:1px solid #71846c80;
  width:23px;
  height:23px;
  border-radius:50%;
  font-size:11px;
  font-style:normal;
  color:#94a289
}

.journey-bar button.active {
  color:#f5dfae
}

.journey-bar button.active i {
  border-color:#ebc578;
  background:#ebc578;
  color:#243d2b
}

.journey-bar button.completed i {
  border-color:#98b991;
  color:#b1d1a2;
  background:#294a35
}

.route-line {
  width:32px;
  height:1px;
  background:#53644c80
}

.overview {
  flex:1;
  overflow-y:auto;
  scroll-behavior:smooth;
  background:var(--paper);
  color:var(--ink);
  padding:64px max(6vw,24px) 30px
}

.is-overview {
  height:100svh
}

.is-overview .game,.is-overview .journey-bar {
  display:none
}

.overview-inner {
  max-width:1120px;
  margin:0 auto
}

.overview-nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:45px
}

.back-button {
  border:0;
  background:none;
  color:#77836e;
  padding:0;
  font-size:12px
}

.overview-nav>div {
  display:flex;
  gap:26px;
  font-size:12px
}

.overview-nav a {
  text-decoration:none
}

.profile-hero {
  display:grid;
  grid-template-columns:1fr 180px;
  gap:50px;
  align-items:center;
  padding-bottom:44px
}

.visit-note {
  font-size:11px;
  letter-spacing:.1em;
  color:#8d7954;
  margin:0 0 17px
}

.profile-hero h1 {
  font-family:var(--serif);
  font-size:52px;
  line-height:1.3;
  font-weight:500;
  margin:0 0 12px
}

.profile-hero h1 span {
  font-family:"Instrument Serif",Georgia,serif;
  font-size:36px;
  font-style:italic;
  color:#7e8c69;
  margin-left:15px
}

.profile-meta {
  display:flex;
  gap:20px;
  font-size:12px;
  color:#77836c;
  margin:0 0 20px
}

.profile-description {
  max-width:640px;
  font-size:14px;
  line-height:1.95;
  color:#52634f;
  margin:0
}

.profile-image {
  width:176px;
  height:176px;
  border-radius:50%;
  object-fit:cover;
  border:8px solid #e2dfce;
  box-shadow:0 0 0 1px #c1bda4;
  transform:rotate(4deg)
}

.profile-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:26px 0 0
}

.profile-actions a,.profile-actions button {
  display:inline-flex;
  gap:17px;
  align-items:center;
  font-size:12px;
  text-decoration:none;
  border:1px solid #9eac8a;
  background:transparent;
  padding:11px 15px;
  border-radius:4px;
  color:#395339
}

.profile-actions .filled {
  background:#284c3a;
  color:#f2eedb;
  border-color:#284c3a
}

.profile-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-top:55px
}

.profile-section {
  scroll-margin-top:25px
}

.section-label {
  font-size:10px;
  color:#8e997f;
  letter-spacing:.13em;
  margin:0 0 10px
}

.profile-section h2 {
  font-size:24px;
  font-weight:500;
  font-family:var(--serif);
  margin:0 0 25px
}

.job {
  padding:0 0 24px 18px;
  border-left:1px solid #b7bea6;
  position:relative
}

.job:before {
  content:"";
  position:absolute;
  left:-4px;
  top:5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#819b6f
}

.job-time {
  font-family:"Instrument Serif",Georgia,serif;
  font-size:11px;
  letter-spacing:.06em;
  color:#8d967f;
  margin:0 0 7px
}

.job h3 {
  font-size:14px;
  margin:0 0 5px;
  font-weight:600
}

.job-role {
  font-size:11px;
  color:#7a886f;
  margin:0 0 8px
}

.job-description {
  font-size:12px;
  line-height:1.85;
  color:#66745c;
  margin:0
}

.project-row {
  padding:17px 0;
  border-top:1px solid #c6c8b360
}

.project-row:first-of-type {
  padding-top:0;
  border-top:0
}

.project-row h3 {
  font-size:14px;
  font-weight:500;
  margin:0 0 6px
}

.project-row p {
  font-size:12px;
  line-height:1.8;
  color:#68765e;
  margin:0
}

.project-row small {
  font-size:10px;
  color:#9b987d;
  display:block;
  margin-bottom:6px
}

.archive-link {
  display:inline-flex;
  gap:18px;
  margin-top:17px;
  font-size:11px;
  color:#637556;
  text-underline-offset:5px
}

.life-note {
  padding:23px;
  background:#e9e8d8;
  border-radius:4px;
  margin-top:20px
}

.life-note h3 {
  font-family:var(--serif);
  font-size:19px;
  font-weight:500;
  margin:0 0 10px
}

.life-note p {
  font-size:12px;
  color:#65715a;
  line-height:1.9;
  margin:0
}

.faq-section {
  margin-top:46px;
  padding-top:44px
}

.faq-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px
}

.faq-heading>p {
  font-size:11px;
  color:#92977f;
  margin-bottom:27px
}

.faq-list details {
  border-bottom:1px solid #c4c6ae77
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:21px 0;
  list-style:none;
  cursor:pointer;
  font-size:14px;
  line-height:1.6
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary:after {
  content:"+";
  font-size:22px;
  font-weight:300;
  color:#7d8b6d;
  flex-shrink:0
}

.faq-list details[open] summary:after {
  content:"−"
}

.faq-list details[open] summary {
  color:#2d5a3e
}

.faq-list details>p {
  max-width:820px;
  white-space:pre-line;
  font-size:13px;
  line-height:1.95;
  color:#65735b;
  padding:0 32px 23px 0;
  margin:0
}

.overview-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:55px;
  padding:30px 0 5px;
  border-top:1px solid #c4c6ae77;
  color:#8e9780;
  font-size:10px
}

.overview-footer span:last-child {
  font-family:"Instrument Serif",Georgia,serif;
  font-style:italic;
  font-size:17px;
  color:#7a8b6c
}

.toast {
  position:fixed;
  z-index:100;
  left:50%;
  bottom:95px;
  transform:translate(-50%,15px);
  background:#f1e9d6;
  color:#284b34;
  padding:12px 21px;
  border-radius:6px;
  box-shadow:0 8px 30px #0c281f55;
  font-size:12px;
  pointer-events:none;
  opacity:0;
  transition:.2s;
  white-space:nowrap
}

.toast.show {
  opacity:1;
  transform:translate(-50%,0)
}

.noscript {
  position:fixed;
  z-index:999;
  inset:0;
  background:var(--paper);
  color:var(--ink);
  padding:10vw;
  line-height:2
}

@keyframes breathe {
  50% {
    opacity:.5;
    scale:1.08
  }

}

@keyframes walk {
  0%,100% {
    translate:0 0;
    rotate:-2deg
  }

  50% {
    translate:0 -8px;
    rotate:2deg
  }

}

@keyframes shadowWalk {
  50% {
    scale:.86 1;
    opacity:.6
  }

}

@keyframes dustFloat {
  50% {
    translate:15px -30px;
    opacity:.08
  }

}

@keyframes slowSpin {
  to {
    rotate:360deg
  }

}

@keyframes panelIn {
  from {
    opacity:0;
    translate:0 12px
  }

  to {
    opacity:1;
    translate:0 0
  }

}

@keyframes screenPlay {
  50% {
    background:#c8ffb56b;
    box-shadow:0 0 40px #c8ffb599
  }

}

@keyframes playProgress {
  from {
    scale:0 1
  }

  to {
    scale:1 1
  }

}

@media(min-width:1600px) {
  .intro {
    padding-top:9vh
  }

  .intro h1 {
    font-size:68px
  }

  .intro-description {
    font-size:17px
  }

  .interaction-panel {
    bottom:30px;
    padding:26px 32px;
    width:760px
  }

  .dialogue-heading h2 {
    font-size:21px
  }

  .panel-copy,.chat-answer {
    font-size:15px
  }

  .reel-card .reel-art {
    height:85px
  }

}

@media(max-width:1000px) {
  .topbar {
    padding:0 25px;
    height:68px
  }

  .journey-bar {
    height:66px;
    padding:0 25px
  }

  .journey-intro {
    display:none
  }

  .journey-end {
    font-size:10px
  }

  .intro {
    padding:50px 6vw
  }

  .intro h1 {
    font-size:44px
  }

  .hello {
    font-size:46px
  }

  .intro-description {
    font-size:13px
  }

  .intro-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:17px
  }

  .intro-sign {
    right:4vw;
    font-size:12px
  }

  .scene-hint {
    display:none
  }

  .chapter-label {
    left:24px;
    top:20px
  }

  .profile-grid {
    gap:40px
  }

  .profile-hero h1 {
    font-size:44px
  }

}

@media(max-width:650px) {
  .app {
    min-height:560px
  }

  .topbar {
    height:64px;
    padding:0 20px
  }

  .wordmark {
    font-size:12px;
    gap:10px
  }

  .brand-mark {
    font-size:29px
  }

  .wordmark small {
    font-size:6px
  }

  .top-actions {
    gap:16px
  }

  .text-button {
    font-size:11px
  }

  .text-button span {
    margin-left:7px
  }

  .icon-button {
    width:29px;
    height:29px;
    font-size:18px
  }

  .sound-slash {
    top:13px;
    left:6px
  }

  .intro {
    padding:30px 26px;
    background:linear-gradient(180deg,#102b24e8 0%,#102b24c9 37%,#102b2450 72%,#102b2499);
    align-items:flex-start
  }

  .eyebrow {
    font-size:8px;
    letter-spacing:.13em;
    margin-bottom:22px
  }

  .hello {
    font-size:39px;
    margin-bottom:8px
  }

  .intro h1 {
    font-size:36px;
    margin-bottom:16px;
    line-height:1.3
  }

  .intro-description {
    font-size:12px;
    line-height:1.9;
    margin-bottom:23px
  }

  .intro-actions {
    gap:13px
  }

  .primary-button {
    font-size:12px;
    min-height:43px;
    padding:12px 19px;
    gap:30px
  }

  .intro-actions>span {
    font-size:10px
  }

  .intro-sign {
    bottom:17px;
    right:25px;
    font-size:10px;
    gap:10px
  }

  .intro-sign i {
    font-size:26px
  }

  .chapter-label {
    left:16px;
    top:13px;
    padding:7px 10px;
    gap:10px
  }

  .chapter-label>span:first-child {
    font-size:13px
  }

  .chapter-label>span:last-child {
    font-size:10px
  }

  .journey-bar {
    height:63px;
    justify-content:center;
    padding:0 15px
  }

  .journey-end {
    display:none
  }

  .journey-bar nav {
    gap:13px
  }

  .journey-bar nav button {
    font-size:10px;
    gap:6px
  }

  .route-line {
    width:20px
  }

  .journey-bar i {
    height:20px;
    width:20px;
    font-size:10px
  }

  .interaction-panel {
    width:calc(100% - 24px);
    bottom:14px;
    padding:18px 17px 16px;
    border-radius:8px;
    max-height:56%;
    overflow-y:auto
  }

  .dialogue-heading {
    gap:9px;
    margin-bottom:13px
  }

  .portrait {
    width:31px;
    height:31px
  }

  .speaker {
    font-size:9px
  }

  .dialogue-heading h2 {
    font-size:16px;
    line-height:1.55
  }

  .panel-copy {
    font-size:12px;
    line-height:1.8;
    margin-bottom:13px
  }

  .panel-footer {
    gap:12px;
    margin-top:15px
  }

  .panel-note {
    font-size:9px
  }

  .quiet-button {
    font-size:10px
  }

  .small-primary {
    font-size:11px;
    padding:10px 13px;
    gap:10px;
    min-height:37px
  }

  .reel-options {
    gap:7px
  }

  .reel-card .reel-art {
    height:55px
  }

  .reel-card>span:last-child {
    padding:9px 7px;
    font-size:10px
  }

  .reel-card>span:last-child b {
    font-size:12px
  }

  .tiny-window {
    scale:.85
  }

  .tiny-code {
    font-size:25px
  }

  .tiny-question {
    font-size:40px
  }

  .edit-result {
    grid-template-columns:94px 1fr;
    gap:12px
  }

  .demo-screen {
    height:87px;
    border-width:3px
  }

  .demo-scene {
    font-size:10px;
    gap:3px;
    flex-direction:column
  }

  .demo-scene .tiny-window {
    width:43px;
    height:30px
  }

  .demo-scene .tiny-window:after {
    top:8px;
    left:17px
  }

  .result-kicker {
    font-size:9px
  }

  .result-title {
    font-size:14px
  }

  .result-description {
    font-size:11px;
    line-height:1.85
  }

  .cartridges {
    gap:7px
  }

  .cartridge {
    font-size:10px;
    padding:13px 5px 8px;
    min-height:68px
  }

  .cartridge b {
    font-size:17px
  }

  .project-result {
    font-size:12px;
    padding-left:10px;
    line-height:1.8
  }

  .delivery-flow {
    gap:4px;
    margin:10px 0
  }

  .delivery-flow>span {
    font-size:9px;
    padding:10px 3px
  }

  .delivery-flow>b {
    font-size:12px
  }

  .question-picks {
    gap:7px
  }

  .question-pick {
    padding:11px 12px;
    font-size:11px
  }

  .chat-answer {
    font-size:12px;
    line-height:1.9;
    max-height:28vh
  }

  .answer-question {
    font-size:10px
  }

  .souvenirs {
    gap:5px;
    margin:12px 0
  }

  .souvenirs>span {
    font-size:10px;
    padding:7px 9px
  }

  .overview {
    padding:27px 24px 25px
  }

  .overview-nav {
    margin-bottom:29px
  }

  .overview-nav>div {
    gap:17px;
    font-size:11px
  }

  .back-button {
    font-size:11px
  }

  .profile-hero {
    grid-template-columns:1fr 74px;
    gap:13px;
    padding-bottom:28px
  }

  .profile-image {
    width:74px;
    height:74px;
    border-width:4px;
    align-self:start;
    margin-top:31px
  }

  .profile-hero h1 {
    font-size:34px
  }

  .profile-hero h1 span {
    display:block;
    font-size:23px;
    margin:1px 0 0
  }

  .visit-note {
    font-size:9px;
    line-height:1.7;
    letter-spacing:0;
    margin-bottom:12px
  }

  .profile-meta {
    font-size:10px;
    gap:12px;
    margin:12px 0 16px
  }

  .profile-description {
    font-size:12px;
    line-height:1.9
  }

  .profile-actions {
    gap:8px;
    margin-top:20px
  }

  .profile-actions a,.profile-actions button {
    font-size:10px;
    padding:10px 11px;
    gap:10px
  }

  .profile-grid {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:32px
  }

  .profile-section h2 {
    font-size:23px;
    margin-bottom:20px
  }

  .section-label {
    font-size:9px
  }

  .faq-section {
    margin-top:35px;
    padding-top:30px
  }

  .faq-heading {
    align-items:start
  }

  .faq-heading>p {
    font-size:9px;
    margin:27px 0 0
  }

  .faq-list summary {
    font-size:12px;
    padding:17px 0;
    gap:15px
  }

  .faq-list details>p {
    font-size:12px;
    padding-right:15px
  }

  .overview-footer {
    font-size:9px;
    gap:15px;
    margin-top:33px
  }

  .overview-footer span:last-child {
    font-size:13px
  }

  .toast {
    max-width:calc(100% - 32px);
    white-space:normal;
    line-height:1.6;
    text-align:center;
    font-size:11px
  }

}

@media(max-height:740px) and (min-width:651px) {
  .topbar {
    height:62px
  }

  .journey-bar {
    height:58px
  }

  .intro {
    padding-top:30px
  }

  .eyebrow {
    margin-bottom:17px
  }

  .hello {
    font-size:38px
  }

  .intro h1 {
    font-size:39px;
    margin-bottom:15px
  }

  .intro-description {
    margin-bottom:20px;
    font-size:13px
  }

  .interaction-panel {
    padding:15px 23px;
    bottom:15px
  }

  .dialogue-heading {
    margin-bottom:10px
  }

  .reel-card .reel-art {
    height:46px
  }

  .panel-footer {
    margin-top:12px
  }

  .chapter-label {
    top:15px
  }

  .intro-sign {
    bottom:25px
  }

}

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

  .dust {
    display:none
  }

}

.reel-dropzone {
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px dashed #a3af92;
  border-radius:4px;
  background:#e8ead9;
  color:#647b56;
  min-height:36px
}

.reel-dropzone span {
  font-family:"Instrument Serif",Georgia,serif;
  font-size:10px
}

.reel-dropzone b {
  font-size:11px;
  font-weight:400
}

.exercise-note {
  font-size:9px;
  color:#8d8f7c;
  margin:9px 0 0
}

.overview-inner {
  animation:panelIn .3s ease-out
}

@media(max-width:650px) {
  .reel-dropzone {
    gap:8px;
    padding:8px
  }

  .reel-dropzone span {
    font-size:8px
  }

  .reel-dropzone b {
    font-size:9px
  }

  .exercise-note {
    font-size:8px
  }

}


@media (max-width: 650px) and (max-height: 650px) {
  .app:has(.host-bubble:not([hidden])) .chapter-label {
    visibility: hidden;
  }

  .interaction-panel {
    max-height: 66%;
    padding: 12px 14px;
    bottom: 10px;
  }
  .dialogue-heading {
    gap: 7px;
    margin-bottom: 8px;
  }
  .dialogue-heading h2 {
    font-size: 14px;
    line-height: 1.45;
  }
  .portrait {
    width: 26px;
    height: 26px;
  }
  .speaker {
    font-size: 8px;
    margin-bottom: 2px;
  }
  .panel-copy {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 9px;
  }
  .reel-card .reel-art {
    height: 38px;
  }
  .reel-card > span:last-child {
    padding: 7px 6px;
    font-size: 9px;
  }
  .tiny-window {
    scale: .65;
  }
  .tiny-question {
    font-size: 32px;
  }
  .panel-footer {
    margin-top: 10px;
  }
  .reel-dropzone {
    gap: 5px;
    padding: 7px 5px;
  }
  .reel-dropzone span {
    font-size: 7px;
  }
  .reel-dropzone b {
    font-size: 8px;
  }
  .exercise-note {
    font-size: 7px;
    margin-top: 4px;
  }
  .chat-answer {
    max-height: 25vh;
  }
}

.reel-card {
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.reel-card.dragging {
  z-index: 10;
  transition: none;
  cursor: grabbing;
  opacity: .88;
}
.reel-dropzone.is-target {
  background: #c9d9b5;
  border-color: #537647;
  box-shadow: 0 0 0 3px #a0be7e33;
}

/* The room fills the viewport. Navigation lives in two small scene controls. */
.app {
  min-height: 480px;
}
.sound-control {
  position: fixed;
  z-index: 30;
  top: max(22px, env(safe-area-inset-top));
  right: 26px;
}
.icon-button {
  width: 42px;
  height: 42px;
  background: #152c25cc;
  color: #f4e8ce;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 18px #0c1f2125;
}
.sound-slash {
  left: 12px;
  top: 19px;
}
.music-credit {
  right: 0;
  padding: 13px 16px;
}
.archive-folder {
  position: fixed;
  z-index: 20;
  left: 26px;
  top: 30px;
  width: 119px;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 500px;
}
.folder-paper {
  position: absolute;
  inset: -7px 9px 7px;
  border-radius: 3px;
  background: #f3ead5;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 1px #79694733;
  transition: transform .25s ease;
}
.folder-paper::after {
  content: "";
  position: absolute;
  inset: 12px 12px 8px;
  background: repeating-linear-gradient(transparent 0 5px, #c9c4ab 5px 6px);
}
.folder-front {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  border: 1px solid #eed6a6;
  border-radius: 2px 7px 6px 6px;
  background: linear-gradient(150deg, #dcbf87, #b69760);
  box-shadow: 0 3px 0 #735d3e, 0 8px 18px #12241b55;
  color: #3d412e;
  font-size: 12px;
  transform-origin: bottom;
  transition: transform .25s ease;
}
.folder-front::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -1px;
  width: 45px;
  height: 7px;
  border-radius: 6px 6px 0 0;
  background: #dcbf87;
  border: 1px solid #eed6a6;
  border-bottom: 0;
}
.archive-folder:hover .folder-paper,
.archive-folder:focus-visible .folder-paper {
  transform: translateY(-9px) rotate(-7deg);
}
.archive-folder:hover .folder-front {
  transform: rotateX(-12deg);
}
.is-overview .archive-folder {
  display: none;
}
.chapter-label {
  left: 170px;
  top: 30px;
  padding: 10px 13px;
}
.scene-hint {
  top: auto;
  bottom: 24px;
  right: 24px;
  opacity: .75;
}
.intro {
  align-items: center;
  padding: 70px 8vw 110px;
  background: linear-gradient(90deg, #10271be8, #10271bb8 32%, #10271b18 68%, transparent);
}
.intro h1 {
  margin-bottom: 36px;
  font-size: clamp(40px, 4.3vw, 76px);
}
.hello {
  font-size: clamp(42px, 4vw, 66px);
}
.interaction-panel {
  width: min(780px, calc(100% - 48px));
  padding: 23px 30px;
  bottom: 28px;
  max-height: calc(100% - 110px);
  overflow-y: auto;
  background: #f8f1e3;
  border-radius: 7px 11px 8px 9px;
  box-shadow: 0 17px 65px #10241f66, 2px 3px 0 #d1c4a4, -2px 6px 0 #a8936d;
}
.panel-close {
  min-width: 32px;
  min-height: 32px;
}
.panel-footer {
  flex-wrap: wrap;
}
.panel-footer .small-primary {
  margin-left: auto;
}

/* Video sleeves use real frames, a paper label and a dark case edge. */
.reel-options {
  gap: 22px;
  padding: 10px 7px 15px;
  align-items: start;
  perspective: 1000px;
}
.reel-card {
  border: 1px solid #465044;
  border-radius: 5px 9px 9px 5px;
  background: #28372f;
  padding: 9px 9px 9px 16px;
  overflow: visible;
  box-shadow: 4px 6px 0 #18271f, 7px 11px 14px #3d39222b;
  transform: rotate(-3deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.reel-card:nth-child(2) {
  transform: translateY(6px) rotate(2deg);
}
.reel-card:nth-child(3) {
  transform: rotate(4deg);
}
.reel-card:hover,
.reel-card:focus-visible {
  transform: translateY(-8px) rotate(0deg);
  box-shadow: 5px 8px 0 #18271f, 10px 18px 20px #3d39223b;
}
.tape-spine {
  position: absolute;
  left: 5px;
  top: 11px;
  bottom: 11px;
  width: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(#617165 0 1px, #293b30 1px 4px);
}
.reel-card .reel-art {
  height: 116px;
  border-radius: 3px 3px 0 0;
  background: #1d2823;
}
.reel-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.tape-play {
  position: absolute;
  bottom: 7px;
  right: 7px;
  width: 25px;
  height: 25px;
  border: 1px solid #fff8d66b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #173728b8;
  color: #f6e3bb;
  font-size: 10px;
}
.tape-label {
  display: grid;
  gap: 6px;
  padding: 11px 10px 8px;
  background: #e9debd;
  color: #2e4431;
  border-top: 4px solid #b8c5a0;
}
.tape-label small {
  font-size: 9px;
  letter-spacing: .07em;
  color: #737653;
}
.tape-label strong {
  font-size: 14px;
  font-family: var(--serif);
  font-weight: 600;
}
.tape-label > span {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #a2a17c55;
  padding-top: 7px;
  font-size: 9px;
}
.tape-label b {
  font-weight: 400;
}
.reel-card > .tape-edge:last-child {
  display: block;
  padding: 0;
  height: 5px;
  margin-top: 4px;
  background: repeating-linear-gradient(90deg, #28372f 0 3px, #4d594b 3px 4px);
}
.reel-card.dragging {
  transition: none;
  z-index: 12;
}
.reel-dropzone {
  flex: 1;
  max-width: 390px;
  min-height: 44px;
  background: #e4dfca;
  border: 1px dashed #949b77;
  border-radius: 6px;
  justify-content: center;
}
.reel-dropzone > span {
  font-family: var(--sans);
  font-size: 12px;
}
.reel-dropzone b {
  font-size: 12px;
}
.screening-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(160px, 1fr);
  align-items: center;
  gap: 25px;
}
.screening-monitor {
  border: 8px solid #29382d;
  border-bottom-width: 18px;
  border-radius: 12px;
  background: #131c17;
  box-shadow: 0 3px 0 #12291c, 0 8px 16px #242d2433;
  overflow: hidden;
}
.screening-monitor video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #111914;
}
.screening-note h3 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 500;
  margin: 7px 0 13px;
}
.screening-note > p:not(.result-kicker) {
  font-size: 13px;
  line-height: 1.9;
  color: #738066;
  margin: 0 0 20px;
}

/* Project folders lift their real delivery steps out of the cover. */
.project-folders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 25px;
}
.project-folder {
  border: 0;
  background: none;
  position: relative;
  height: 133px;
  padding: 0;
  text-align: left;
  perspective: 500px;
}
.project-sheet {
  position: absolute;
  inset: -17px 13px 20px;
  display: grid;
  gap: 7px;
  padding: 13px 13px 28px;
  border-radius: 5px;
  background: #fffcf1;
  border: 1px solid #d4d2bd;
  transform: rotate(-5deg);
  box-shadow: 3px 4px 0 #dbd4bc;
  transition: transform .3s ease;
}
.project-sheet i {
  font-size: 10px;
  color: #879174;
  font-style: normal;
  border-bottom: 1px solid #e6e4d5;
  padding-bottom: 4px;
}
.project-cover {
  position: absolute;
  inset: 32px 0 0;
  padding: 16px;
  border: 1px solid #acb68d;
  border-radius: 3px 9px 8px 8px;
  background: linear-gradient(140deg, #d4ddba, #b9c79e);
  color: #3a5234;
  box-shadow: 0 4px 0 #89916c, 0 8px 17px #3c452222;
  display: grid;
  grid-template-columns: 25px 1fr;
  align-content: center;
  align-items: center;
  gap: 7px;
  transform-origin: bottom;
  transition: transform .3s ease;
}
.project-cover::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -1px;
  width: 45%;
  height: 8px;
  border-radius: 7px 7px 0 0;
  background: #d4ddba;
  border: 1px solid #acb68d;
  border-bottom: 0;
}
.project-cover b {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 23px;
}
.project-cover strong {
  font-weight: 500;
  font-size: 13px;
}
.project-cover small {
  grid-column: 2;
  font-size: 9px;
  opacity: .65;
}
.project-folder:hover .project-sheet,
.project-folder:focus-visible .project-sheet {
  transform: translateY(-17px) rotate(-8deg);
}
.project-folder:hover .project-cover {
  transform: rotateX(-15deg);
}

/* Real-life objects and photo albums. */
.scene-pet {
  position: absolute;
  z-index: 3;
  width: 150px;
  height: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 6px 4px #16201555);
}
.pet-sprite {
  display: block;
  width: 100%;
  height: 100%;
  background: url("assets/pets-sprite.webp") no-repeat;
  background-size: 300% 100%;
  transition: transform .25s ease;
}
.pet-jianguo {
  left: 63px;
  top: 274px;
  width: 142px;
  height: 142px;
}
.pet-jianjun {
  left: 1358px;
  top: 347px;
  width: 148px;
  height: 148px;
}
.pet-jianjun .pet-sprite {
  background-position: 50% 0;
}
.pet-huhu {
  left: 1490px;
  top: 530px;
  width: 170px;
  height: 170px;
}
.pet-huhu .pet-sprite {
  background-position: 99% 0;
}
.pet-name {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  padding: 4px 11px;
  border-radius: 20px;
  background: #eee2c5;
  color: #314830;
  font-size: 13px;
  opacity: 0;
  transition: opacity .2s ease;
}
.scene-pet:hover .pet-name,
.scene-pet:focus-visible .pet-name {
  opacity: 1;
}
.scene-pet:hover .pet-sprite {
  transform: translateY(-4px) rotate(-2deg);
}
.scene-memento {
  position: absolute;
  z-index: 3;
  left: 462px;
  top: 282px;
  width: 76px;
  padding: 5px 5px 7px;
  border: 0;
  border-radius: 2px;
  background: #eee0bd;
  color: #4b5039;
  transform: rotate(7deg);
  box-shadow: 3px 4px 7px #10241966;
  transition: transform .25s ease;
}
.scene-memento img {
  width: 100%;
  height: 58px;
  object-fit: cover;
  display: block;
  margin-bottom: 4px;
}
.scene-memento span {
  font-size: 9px;
}
.scene-memento:hover {
  transform: rotate(0deg) translateY(-4px);
}
.scene-books {
  position: absolute;
  z-index: 3;
  left: 1250px;
  top: 450px;
  padding: 0;
  width: 58px;
  height: 52px;
  display: flex;
  align-items: end;
  border: 0;
  background: transparent;
  transform: rotate(-7deg);
  box-shadow: 4px 4px 5px #19211644;
}
.book-spine {
  display: block;
  width: 28px;
  height: 50px;
  padding: 5px 4px;
  border: 1px solid #c4b39a;
  border-radius: 2px 3px 1px 1px;
  background: #c46338;
  color: #fff0cc;
  writing-mode: vertical-rl;
  font-size: 8px;
}
.book-spine + .book-spine {
  height: 47px;
  background: #e5dabc;
  color: #7c4e32;
}
.is-home .scene-pet,
.is-home .scene-memento,
.is-home .scene-books {
  pointer-events: none;
}
.life-peek {
  display: grid;
  grid-template-columns: 78px 78px 78px 1fr;
  align-items: center;
  gap: 15px;
  margin: 7px 0 23px;
}
.pet-photo {
  border: 0;
  border-radius: 2px;
  padding: 5px 5px 7px;
  background: #fffbef;
  box-shadow: 1px 3px 5px #3b3d2128;
  transform: rotate(-5deg);
  color: #354831;
  transition: transform .2s ease;
}
.pet-photo:nth-child(2) {
  transform: rotate(4deg);
}
.pet-photo:nth-child(3) {
  transform: rotate(-2deg);
}
.pet-photo:hover,
.pet-photo:focus-visible {
  transform: translateY(-5px);
}
.pet-photo img {
  display: block;
  width: 100%;
  height: 60px;
  object-fit: cover;
  margin-bottom: 5px;
}
.pet-photo span {
  font-size: 11px;
}
.life-peek-note {
  padding-left: 8px;
}
.life-peek-note p {
  color: #768167;
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 7px;
}

.overview {
  padding-top: 45px;
  padding-bottom: 70px;
}
.overview-nav {
  padding-right: 55px;
}
.works-section,
.everyday-section {
  margin-top: 50px;
  padding-bottom: 44px;
}
.works-section {
  border-bottom: 1px solid #bfbea766;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 28px;
}
.section-heading h2 {
  margin: 0;
}
.section-heading > p {
  color: #838b74;
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
}
.works-grid,
.pet-album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.work-card {
  min-width: 0;
}
.work-cover {
  display: block;
  position: relative;
  border: 0;
  padding: 0;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: #18352a;
}
.work-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .35s ease;
}
.work-cover:hover img {
  transform: scale(1.035);
}
.work-play {
  position: absolute;
  inset: 0;
  margin: auto;
  display: grid;
  place-items: center;
  height: 46px;
  width: 46px;
  border: 1px solid #f5ead799;
  background: #17382dd4;
  border-radius: 50%;
  color: #f4e6c7;
  backdrop-filter: blur(5px);
}
.work-duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 6px;
  background: #17291de0;
  color: #eee5d2;
  font-size: 11px;
  border-radius: 3px;
}
.work-info {
  padding: 16px 2px 0;
}
.work-info small {
  font-size: 10px;
  color: #938464;
}
.work-info h3 {
  margin: 8px 0;
}
.work-info h3 button {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
}
.work-info p {
  color: #7c846c;
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
}
.pet-album-grid {
  padding: 10px 9px 0;
  gap: 35px;
}
.album-card {
  border: 0;
  padding: 0;
  background: none;
  text-align: left;
}
.album-stack {
  display: block;
  position: relative;
  padding: 8px;
  background: #fffbf0;
  box-shadow: 1px 4px 10px #605b3822;
  transform: rotate(-2deg);
  transition: transform .25s ease;
}
.album-card:nth-child(2) .album-stack {
  transform: rotate(2deg);
}
.album-stack img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  position: relative;
  background: #c1b498;
}
.album-stack .album-back {
  position: absolute;
  left: 8px;
  top: 8px;
  width: calc(100% - 16px);
  transform: rotate(6deg) translate(5px, -3px);
  box-shadow: 0 2px 7px #4e4e3022;
  transition: transform .3s ease;
}
.album-card:hover .album-stack {
  transform: translateY(-5px) rotate(0deg);
}
.album-card:hover .album-back {
  transform: rotate(9deg) translate(10px, -13px);
}
.album-caption {
  display: grid;
  gap: 6px;
  padding: 20px 0 5px;
}
.album-caption strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
.album-caption > span {
  font-size: 12px;
  color: #7b846c;
}
.album-caption b {
  float: right;
  font-size: 10px;
  font-weight: 400;
  color: #8b927d;
}
.daily-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 34px;
  margin-top: 35px;
}
.desk-album,
.books-album {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.desk-album > img {
  width: 100%;
  height: 265px;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  object-position: center 55%;
}
.desk-album > span,
.books-album > span:last-of-type {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 19px;
  font-family: var(--serif);
}
.desk-album b,
.books-album b {
  font-weight: 400;
  color: #8b927d;
}
.book-covers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  height: 265px;
  padding: 24px 26px;
  background: #e5e4d2;
  border-radius: 4px;
}
.book-covers img {
  height: 100%;
  max-width: 47%;
  object-fit: contain;
  transform: rotate(-6deg);
  box-shadow: 5px 8px 12px #40472f38;
  transition: transform .3s ease;
}
.book-covers img + img {
  transform: rotate(6deg);
}
.books-album:hover img {
  transform: rotate(0deg) translateY(-5px);
}
.books-album small {
  display: block;
  color: #868c77;
  font-size: 11px;
  margin-top: 8px;
}

.media-dialog {
  width: min(900px, calc(100vw - 48px));
  max-height: calc(100svh - 48px);
  overflow: auto;
  padding: 28px;
  border: 1px solid #f9eed8;
  border-radius: 10px;
  background: #f6efdf;
  color: var(--ink);
  box-shadow: 0 20px 90px #061c1699;
}
.media-dialog::backdrop {
  background: #0c201bba;
  backdrop-filter: blur(8px);
}
.media-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.media-heading h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 6px;
}
.media-heading p {
  font-size: 12px;
  color: #7a8169;
  line-height: 1.8;
  margin: 0;
}
.media-close {
  border: 1px solid #a8ae8e77;
  border-radius: 50%;
  background: transparent;
  color: #526844;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  font-size: 23px;
}
.album-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.album-tabs button {
  border: 1px solid #b5b99c;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 12px;
  background: transparent;
}
.album-tabs button[aria-current=page] {
  background: #344f38;
  border-color: #344f38;
  color: #f6eacf;
}
.album-view {
  margin: 0;
}
.album-view > img {
  display: block;
  width: 100%;
  height: min(55svh, 560px);
  object-fit: contain;
  border-radius: 5px;
  background: #e9e3d2;
}
.album-view figcaption {
  text-align: center;
  color: #7c846a;
  font-size: 12px;
  margin-top: 12px;
  line-height: 1.7;
}
.album-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  color: #768366;
}
.album-controls button {
  min-height: 38px;
  border: 1px solid #afb698;
  border-radius: 4px;
  background: transparent;
  padding: 7px 18px;
}
.media-dialog.is-video {
  width: min(1040px, calc(100vw - 48px));
}
.media-dialog > video {
  display: block;
  width: 100%;
  max-height: calc(100svh - 180px);
  background: #10271f;
  border-radius: 5px;
}

@media (max-width: 1000px) {
  .interaction-panel {
    max-height: calc(100% - 115px);
  }
  .scene-hint {
    display: none;
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .works-grid,
  .pet-album-grid {
    gap: 20px;
  }
  .daily-grid {
    gap: 22px;
  }
}

@media (max-width: 650px) {
  .sound-control {
    top: 17px;
    right: 16px;
  }
  .icon-button {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .sound-slash {
    left: 9px;
    top: 16px;
  }
  .archive-folder {
    left: 17px;
    top: 23px;
    width: 100px;
    height: 37px;
  }
  .folder-front {
    font-size: 10px;
    padding: 0 11px;
  }
  .chapter-label {
    display: none;
  }
  .intro {
    padding: 150px 27px 110px;
    align-items: flex-start;
    background: linear-gradient(180deg, #102b24e5, #102b24a3 44%, #102b2420 75%, #102b2480);
  }
  .intro h1 {
    font-size: 42px;
    margin-bottom: 30px;
  }
  .hello {
    font-size: 45px;
  }
  .interaction-panel {
    width: calc(100% - 24px);
    bottom: 16px;
    padding: 17px 17px 16px;
    max-height: 58%;
  }
  .interaction-panel.is-screening {
    max-height: 65%;
  }
  .reel-options {
    gap: 10px;
    padding: 6px 0 12px;
  }
  .reel-card {
    padding: 5px 4px 5px 7px;
    border-radius: 3px 5px 5px 3px;
    box-shadow: 2px 3px 0 #18271f, 3px 6px 8px #3d39222b;
  }
  .tape-spine {
    left: 2px;
    width: 2px;
    top: 7px;
    bottom: 7px;
  }
  .reel-card .reel-art {
    height: 75px;
  }
  .tape-label {
    padding: 7px 4px 5px;
    gap: 4px;
    border-top-width: 3px;
  }
  .tape-label small {
    font-size: 8px;
    letter-spacing: 0;
  }
  .tape-label strong {
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.5;
    min-height: 30px;
  }
  .tape-label > span {
    font-size: 8px;
    gap: 3px;
    padding-top: 4px;
  }
  .tape-play {
    height: 20px;
    width: 20px;
    right: 4px;
    bottom: 4px;
    font-size: 8px;
  }
  .reel-dropzone {
    min-height: 38px;
    padding: 7px 8px;
    gap: 8px;
  }
  .reel-dropzone b {
    font-size: 10px;
  }
  .screening-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .screening-monitor {
    border-width: 5px;
    border-bottom-width: 10px;
    border-radius: 8px;
  }
  .screening-monitor video {
    aspect-ratio: 16 / 10;
    max-height: 25svh;
  }
  .screening-note {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
  }
  .screening-note .result-kicker {
    font-size: 9px;
    margin: 0 0 4px;
  }
  .screening-note h3 {
    grid-column: 1;
    margin: 0;
    font-size: 19px;
  }
  .screening-note > p:not(.result-kicker) {
    display: none;
  }
  .screening-note > button {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 10px;
  }
  .project-folders {
    gap: 12px;
    padding-top: 20px;
  }
  .project-folder {
    height: 110px;
  }
  .project-sheet {
    inset: -14px 5px 17px;
    padding: 9px 6px 25px;
    gap: 4px;
  }
  .project-sheet i {
    font-size: 8px;
  }
  .project-cover {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    inset: 23px 0 0;
  }
  .project-cover b {
    font-size: 18px;
  }
  .project-cover strong {
    font-size: 10px;
  }
  .project-cover small {
    font-size: 8px;
  }
  .life-peek {
    grid-template-columns: repeat(3, 62px) 1fr;
    gap: 9px;
    margin-bottom: 20px;
  }
  .pet-photo {
    padding: 4px 4px 6px;
  }
  .pet-photo img {
    height: 50px;
  }
  .pet-photo span {
    font-size: 10px;
  }
  .life-peek-note {
    padding: 0;
  }
  .life-peek-note p {
    font-size: 10px;
    margin-bottom: 3px;
  }
  .life-peek-note .quiet-button {
    font-size: 9px;
    text-align: left;
    line-height: 1.7;
  }
  .overview {
    padding: 25px 24px 45px;
  }
  .overview-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    margin-bottom: 26px;
  }
  .overview-nav > div {
    gap: 24px;
  }
  .works-section,
  .everyday-section {
    margin-top: 30px;
    padding-bottom: 28px;
  }
  .section-heading {
    gap: 8px;
    margin-bottom: 20px;
  }
  .section-heading h2 {
    font-size: 24px;
  }
  .section-heading > p {
    font-size: 10px;
  }
  .works-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .work-cover img {
    aspect-ratio: 16 / 9;
  }
  .work-info {
    padding-top: 12px;
  }
  .work-info h3 button {
    font-size: 21px;
  }
  .pet-album-grid {
    gap: 12px;
    padding: 6px 0 0;
  }
  .album-stack {
    padding: 4px;
  }
  .album-stack img {
    aspect-ratio: 4 / 5;
  }
  .album-stack .album-back {
    left: 4px;
    top: 4px;
    width: calc(100% - 8px);
  }
  .album-caption {
    padding-top: 14px;
    gap: 5px;
  }
  .album-caption strong {
    font-size: 19px;
  }
  .album-caption > span {
    font-size: 10px;
    line-height: 1.7;
  }
  .album-caption b {
    display: block;
    float: none;
    margin-top: 3px;
    font-size: 9px;
  }
  .daily-grid {
    grid-template-columns: 1fr;
    margin-top: 23px;
    gap: 27px;
  }
  .desk-album > img {
    height: 220px;
  }
  .book-covers {
    height: 230px;
    padding: 22px;
  }
  .media-dialog,
  .media-dialog.is-video {
    width: calc(100vw - 24px);
    max-height: calc(100svh - 28px);
    padding: 19px 17px;
  }
  .media-heading h2 {
    font-size: 24px;
  }
  .media-heading p {
    font-size: 10px;
  }
  .album-tabs {
    gap: 7px;
    margin-bottom: 16px;
  }
  .album-tabs button {
    padding: 7px 12px;
    font-size: 10px;
  }
  .album-view > img {
    height: 47svh;
  }
  .album-view figcaption {
    font-size: 10px;
  }
  .album-controls {
    font-size: 10px;
  }
  .album-controls button {
    padding: 7px 12px;
  }
}

@media (max-width: 650px) and (max-height: 650px) {
  .character {
    width:120px;
    height:160px;
  }
  .visitor {
    height:156px;
  }
  .station {
    padding:6px;
  }
  .station .station-surface {
    min-height:42px;
    min-width:160px;
    padding:0 14px;
    gap:10px;
  }
  .station-title {
    font-size:18px;
  }
  .station-arrow {
    font-size:16px;
  }
  .intro {
    padding-top: 115px;
  }
  .intro h1 {
    font-size: 36px;
    margin-bottom: 25px;
  }
  .interaction-panel,
  .interaction-panel.is-screening {
    max-height: 66%;
    bottom: 12px;
    padding: 13px 14px;
  }
  .reel-card .reel-art {
    height: 60px;
  }
  .life-peek {
    grid-template-columns: repeat(3, 51px) 1fr;
    gap: 7px;
    margin-bottom: 15px;
  }
  .pet-photo img {
    height: 41px;
  }
  .life-peek-note p {
    font-size: 9px;
  }
}