/* jacy's little corner — the palette and starting positions live here. */
:root {
  --paper:#fff8fa;
  --pink:#f5dce5;
  --rose:#b66f88;
  --ink:#704355;
  --muted:#8d6073;
  --line:#d7adbe;
  --deep:#84425b;
  --shadow:#a86d8526;
  --mono:"Lucida Console",Consolas,"Courier New",monospace;
  --serif:Georgia,"Times New Roman",serif;
}

* {
  box-sizing:border-box;
}

html {
  min-width:280px;
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--ink);
  background-color:#f7e8ee;
  background-image:radial-gradient(#c88ca635 .75px,transparent .9px),repeating-linear-gradient(0deg,transparent 0 49px,#fff4 49px 50px),repeating-linear-gradient(90deg,transparent 0 49px,#fff4 49px 50px);
  background-size:8px 8px,50px 50px,50px 50px;
  font-family:var(--serif);
  font-size:16px;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at 48% 45%,#fff8fb 0,transparent 64%);
  pointer-events:none;
}

button,input {
  font:inherit;
}

button {
  color:inherit;
  cursor:pointer;
}

button:disabled,input:disabled {
  cursor:default;
}

button {
  touch-action:manipulation;
}

a {
  color:inherit;
}

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

button:focus:not(:focus-visible) {
  outline:none;
}

[hidden] {
  display:none!important;
}

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

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:2000;
  padding:10px;
  background:white;
  transform:translateY(-180%);
}

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

.text-button {
  padding:4px 0;
  border:0;
  border-bottom:1px dotted currentColor;
  background:none;
  font:11px/1.4 var(--mono);
}

body.at-entrance {
  overflow:hidden;
}

/* The entrance waits for a real click before starting the audio. */
.entrance {
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:25px;
  background:radial-gradient(ellipse at center,#fffafd 5%,#f7e8eef2 65%,#f1d4e0f5);
  z-index:1000;
  overflow:auto;
  transition:opacity 1.1s ease,visibility 1.1s;
}

.entrance.leaving {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.entrance-frame {
  position:relative;
  width:min(560px,100%);
  text-align:center;
  padding:36px 25px 25px;
  border:1px solid #d4afbf;
  outline:1px dashed #d4afbf;
  outline-offset:9px;
  background:radial-gradient(ellipse at 50% 40%,#fff7 0,transparent 65%);
}

.entrance-corner {
  position:absolute;
  background:#f8eaf0;
  padding:0 8px;
  font-size:26px;
  color:#b27c94;
}

.top-left {
  left:-19px;
  top:-22px;
}

.bottom-right {
  right:-19px;
  bottom:-22px;
}

.eyebrow {
  font:10px/1.8 var(--mono);
  letter-spacing:2px;
  margin:0;
}

.entrance-wings {
  width:100%;
  height:auto;
  margin:10px 0 -29px;
}

.entrance h1 {
  font-size:clamp(30px,5vw,44px);
  font-weight:normal;
  font-style:italic;
  letter-spacing:-1.6px;
  margin:0 0 12px;
}

.entrance h1 span {
  font-style:normal;
  font-size:.8em;
}

.entrance-name {
  font:12px var(--mono);
  letter-spacing:4px;
  margin:0 0 30px;
}

.enter-button,.retro-button {
  border:1px solid #b78097;
  box-shadow:inset 1px 1px #fff,inset -2px -2px #d4a4b8,2px 2px 0 #d2a2b54d;
  background:#f0ccdafa;
  padding:11px 30px;
  font:13px var(--mono);
}

.enter-button {
  min-width:165px;
}

.enter-button span {
  margin-left:32px;
}

.enter-button:hover,.retro-button:hover {
  background:#f8deea;
}

.enter-button:active,.retro-button:active {
  box-shadow:inset 1px 1px #d4a4b8;
  transform:translate(1px,1px);
}

.entrance-sound {
  font:10px/1.7 var(--mono);
  margin:18px 0 5px;
  color:var(--muted);
}

.entrance-calm {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  font:10px var(--mono);
  margin-top:22px;
}

.entrance-calm input {
  accent-color:var(--deep);
}

.world {
  opacity:0;
  visibility:hidden;
  transition:opacity 1.5s ease;
}

.world.entered {
  opacity:1;
  visibility:visible;
}

.site-header {
  max-width:1240px;
  margin:0 auto;
  min-height:88px;
  padding:18px 38px;
  display:flex;
  align-items:center;
  gap:24px;
}

.wordmark {
  font-size:32px;
  font-style:italic;
  letter-spacing:-2px;
  text-decoration:none;
}

.wordmark span {
  font-size:22px;
  margin-left:5px;
}

.header-note {
  font:10px/1.6 var(--mono);
  margin:0;
  color:var(--muted);
}

.header-note i {
  font-family:var(--serif);
  font-size:13px;
}

.global-controls {
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
  font-size:12px;
}

.room {
  position:relative;
  max-width:1240px;
  height:795px;
  margin:0 auto;
}

.room-border {
  position:absolute;
  inset:0 24px 25px;
  border:1px solid #cfa6b850;
  outline:1px dashed #cfa6b850;
  outline-offset:6px;
  pointer-events:none;
}

.room-border::before,.room-border::after {
  content:"♡";
  position:absolute;
  top:-11px;
  background:#f7e8ee;
  padding:0 9px;
  font-size:17px;
  color:#bb869c;
}

.room-border::before {
  left:22px;
}

.room-border::after {
  right:22px;
}

.ghost-type {
  position:absolute;
  left:12%;
  top:30px;
  font-size:112px;
  line-height:.9;
  font-style:italic;
  letter-spacing:-8px;
  color:#ae6d8610;
  transform:rotate(-8deg);
  pointer-events:none;
}

.margin-note {
  position:absolute;
  right:30px;
  top:254px;
  writing-mode:vertical-rl;
  font:10px var(--mono);
  letter-spacing:1px;
  color:#a4778a;
}

.hanging-star {
  position:absolute;
  top:0;
  color:#c194a8;
  font-size:55px;
  text-shadow:2px 2px #fff;
}

.hanging-star::before {
  content:"";
  display:block;
  position:absolute;
  bottom:82%;
  left:50%;
  width:1px;
  background:#cfacbd;
  height:38px;
}

.star-one {
  left:73%;
  top:37px;
}

.star-two {
  left:80%;
  top:76px;
  font-size:28px;
}

.star-two::before {
  height:81px;
}

.letter-paper {
  position:absolute;
  left:35%;
  top:80px;
  width:440px;
  height:405px;
  transform:rotate(6deg);
  border:1px solid #d5b2c0;
  background:repeating-linear-gradient(transparent 0 24px,#d8b7c32b 24px 25px),#fff6f9;
  box-shadow:5px 6px 0 #b9829920;
}

.letter-paper::before {
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed #dcb8c7;
}

.letter-paper span {
  position:absolute;
  right:30px;
  bottom:18px;
  font-size:45px;
  color:#c992a8;
}

.pinned-bow {
  position:absolute;
  left:58%;
  top:38px;
  width:128px;
  height:128px;
  transform:rotate(12deg);
  z-index:12;
  pointer-events:none;
  filter:drop-shadow(2px 4px 1px #be8b9c22);
}

/* Old desktop windows: small bevels, hard corners, mismatched proportions. */
.window {
  position:absolute;
  background:var(--paper);
  border:1px solid #ad7b90;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #ddbecb,4px 5px 0 #b7809629;
  padding:3px;
  max-width:calc(100% - 24px);
}

.window:focus {
  outline:none;
}

.window:focus-visible {
  outline:2px solid var(--deep);
  outline-offset:4px;
}

.titlebar {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:29px;
  padding:3px 4px 3px 7px;
  border-bottom:1px solid #d6aabc;
  background:repeating-linear-gradient(0deg,#f3d6e1 0 2px,#efd0dc 2px 3px);
  user-select:none;
  touch-action:none;
  cursor:grab;
}

.titlebar h2 {
  flex:1;
  font:10px/1.5 var(--mono);
  font-weight:normal;
  letter-spacing:.15px;
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.titlebar-icon {
  font-size:14px;
  line-height:1;
}

.window-close,.move-handle {
  display:grid;
  place-items:center;
  flex:none;
  width:23px;
  height:21px;
  padding:0;
  border:1px solid #bb8aa0;
  background:#fff4f8;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #e1bacb;
  font:18px/1 var(--mono);
}

.move-handle {
  border-color:transparent;
  background:transparent;
  box-shadow:none;
  cursor:grab;
  color:#956479;
  font-size:20px;
}

.move-handle:hover {
  background:#fff8;
}

.window-close:hover {
  background:#f0bfd3;
}

.window.dragging,.window.dragging .titlebar,.window.dragging .move-handle {
  cursor:grabbing;
}

.window.dragging {
  box-shadow:8px 10px 0 #b7809633;
  user-select:none;
}

.intro-window {
  width:444px;
  left:33%;
  top:126px;
  z-index:3;
}

.intro-body {
  text-align:center;
  padding:30px 24px 17px;
  background:radial-gradient(ellipse at 50% 45%,#fff 0,#fff6f9 70%);
}

.little-stamp {
  font-size:13px;
  font-style:italic;
  display:block;
  transform:rotate(-6deg);
  margin-left:-165px;
}

.name-art {
  position:relative;
  height:166px;
  display:grid;
  place-items:center;
  margin-top:-5px;
}

.name-art img {
  position:absolute;
  width:110%;
  height:auto;
  max-width:none;
  left:-5%;
  top:0;
  opacity:.85;
}

.big-name {
  position:relative;
  font:bold italic 108px/.9 var(--serif);
  letter-spacing:-9px;
  color:#b77690;
  text-shadow:2px 2px #fff,3px 3px #d8a8bd;
  margin:20px 15px 0 0;
  transform:rotate(-6deg);
}

.introduction {
  font-size:18px;
  line-height:1.6;
  margin:8px 0 19px;
}

.introduction span {
  color:#ae6a85;
}

.intro-rule {
  position:relative;
  margin:0 22px 12px;
  border-top:1px solid #e1c4d0;
  height:1px;
}

.intro-rule span {
  position:relative;
  top:-12px;
  background:#fff7fa;
  padding:0 12px;
  color:#bd8ba1;
}

.intro-footer {
  font:9px/1.7 var(--mono);
  color:var(--muted);
  margin:0;
}

.music-window {
  width:265px;
  left:9%;
  top:290px;
  z-index:6;
  transform:rotate(-2deg);
}

.music-body {
  padding:15px 16px 9px;
  background:repeating-linear-gradient(90deg,#fff8fb 0 6px,#fcf1f6 6px 7px);
}

.cover-frame {
  position:relative;
  padding:5px;
  background:#fff;
  border:1px solid #d4b0c0;
  box-shadow:2px 2px #e5ccd6;
  margin:0 18px 15px;
  transform:rotate(2deg);
}

.cover-frame img {
  display:block;
  width:100%;
  height:auto;
}

.cover-heart {
  position:absolute;
  right:-13px;
  bottom:-13px;
  font-size:40px;
  color:#b76b8b;
  transform:rotate(12deg);
  text-shadow:1px 1px #fff,-1px -1px #fff;
}

.track-title {
  font:12px/1.5 var(--mono);
  text-align:center;
  font-weight:bold;
}

.track-subtitle {
  font:9px/1.5 var(--mono);
  text-align:center;
  margin:3px 0 14px;
  color:var(--muted);
}

input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  height:5px;
  background:#ead2dd;
  border:1px solid #c49aae;
  border-radius:0;
  accent-color:var(--deep);
  cursor:pointer;
  display:block;
}

input[type=range]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:9px;
  height:13px;
  background:#c3859e;
  border:1px solid #9b637b;
  border-radius:0;
  box-shadow:inset 1px 1px #f3dce6;
}

input[type=range]::-moz-range-thumb {
  width:8px;
  height:12px;
  background:#c3859e;
  border:1px solid #9b637b;
  border-radius:0;
}

#seek {
  width:100%;
  margin:0;
  padding:0;
}

.track-times {
  display:flex;
  justify-content:space-between;
  font:9px var(--mono);
  margin-top:9px;
}

.player-controls {
  display:flex;
  align-items:center;
  gap:8px;
  margin:9px 0;
}

.player-button {
  display:grid;
  place-items:center;
  min-width:28px;
  height:29px;
  font-size:15px;
  background:#f6e2eb;
  border:1px solid #c395ab;
  box-shadow:inset 1px 1px #fff,inset -1px -1px #d7afc0;
  padding:0;
}

.play-button {
  min-width:36px;
  font-size:13px;
  background:#efd0df;
}

.player-button:hover {
  background:#fff3f8;
}

#volume {
  flex:1;
  width:55px;
  min-width:25px;
  margin-left:3px;
}

.player-status {
  font:9px/1.6 var(--mono);
  color:var(--muted);
  min-height:28px;
  text-align:center;
  margin:9px 0 0;
}

.boundaries-window {
  width:252px;
  left:71%;
  top:239px;
  z-index:5;
  transform:rotate(2deg);
}

.boundaries-body {
  padding:28px 10px 14px;
  text-align:center;
  background:radial-gradient(#d8b0c23d .6px,transparent .8px),#fff9fb;
  background-size:5px 5px;
  position:relative;
}

.tiny-halo {
  display:block;
  margin:0 auto 3px;
  width:43px;
  height:10px;
  border:1px solid #b8879c;
  border-radius:50%;
  transform:rotate(-13deg);
  transition:transform 1.8s ease,border-color 1.8s ease;
}

.dni-button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  padding:0 6px 10px;
  width:100%;
}

.dni-label {
  font:italic 56px/.95 var(--serif);
  letter-spacing:-3px;
}

.dni-caption {
  font:9px/1.6 var(--mono);
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:4px;
}

.boundary-whisper {
  position:relative;
  font:italic 12px var(--serif);
  height:16px;
  margin:8px 0 0;
}

.whisper-normal,.whisper-secret {
  position:absolute;
  inset:0;
  transition:opacity .8s;
}

.whisper-secret {
  opacity:0;
  color:#8b3c59;
}

.boundaries-body:hover .whisper-secret,.boundaries-body:focus-within .whisper-secret {
  opacity:1;
}

.boundaries-body:hover .whisper-normal,.boundaries-body:focus-within .whisper-normal {
  opacity:0;
}

.boundaries-body:hover .tiny-halo,.boundaries-body:focus-within .tiny-halo {
  transform:rotate(4deg);
  border-color:#9a3c59;
}

.rest-card {
  position:absolute;
  left:57%;
  top:563px;
  width:273px;
  min-height:142px;
  transform:rotate(-5deg);
  padding:25px 20px 15px;
  background:#fff5f8;
  border:1px solid #dec1cd;
  box-shadow:2px 4px 0 #c795aa1a;
  text-align:center;
  z-index:2;
}

.rest-card::before {
  content:"";
  position:absolute;
  inset:7px;
  border:1px dashed #d5afbf;
  pointer-events:none;
}

.paper-tape {
  position:absolute;
  top:-13px;
  left:36%;
  width:80px;
  height:25px;
  background:repeating-linear-gradient(45deg,#d99ab055 0 4px,#e9bfce55 4px 8px);
  transform:rotate(5deg);
  clip-path:polygon(0 0,100% 2%,96% 20%,100% 40%,95% 60%,100% 80%,97% 100%,1% 100%,4% 75%,0 50%,4% 25%);
}

.note-heading {
  font:8px var(--mono);
  letter-spacing:.5px;
  color:var(--muted);
}

.rest-button {
  display:block;
  margin:13px auto 7px;
  border:0;
  background:none;
  font:italic 25px/1.3 var(--serif);
  padding:4px 0;
  min-height:40px;
}

.rest-button[aria-pressed=true] {
  color:#8e3d5a;
  font-size:21px;
}

.note-signature {
  display:block;
  text-align:right;
  font-size:12px;
  font-style:italic;
  margin-right:10px;
}

.secret-seal {
  position:absolute;
  left:46%;
  top:613px;
  z-index:4;
  width:52px;
  height:52px;
  border:1px dotted #ac6984;
  border-radius:50%;
  background:#ecc5d6;
  box-shadow:inset 0 0 0 4px #e5b6c9,inset 0 0 0 5px #cb91a9,2px 3px 0 #b5768e24;
  transform:rotate(-15deg);
  font-size:31px;
  padding:0;
}

.secret-seal:hover {
  background:#f4d6e3;
}

.secret-seal[aria-pressed=true] {
  transform:rotate(10deg);
}

.secret-message {
  position:absolute;
  left:33%;
  top:679px;
  z-index:9;
  font:italic 14px var(--serif);
  background:#fff4f9;
  border:1px dotted #c297aa;
  padding:9px 13px;
  transform:rotate(-3deg);
  margin:0;
  max-width:230px;
}

.loose-star {
  position:absolute;
  left:84%;
  top:549px;
  font-size:48px;
  color:#c695ac;
  transform:rotate(17deg);
  text-shadow:2px 2px #fff;
}

.room-caption {
  position:absolute;
  bottom:39px;
  left:8%;
  font:italic 12px var(--serif);
  color:#946b7c;
}

.desktop-footer {
  max-width:1192px;
  margin:-3px auto 0;
  padding:0 14px 24px;
  display:flex;
  align-items:center;
  gap:20px;
}

.window-launcher {
  display:flex;
  align-items:center;
  gap:6px;
}

.launcher-label {
  font:10px var(--mono);
  margin-right:4px;
}

.window-launcher button {
  padding:7px 12px;
  background:#f9edf3;
  border:1px solid #cea5b7;
  box-shadow:inset 1px 1px #fff;
  font:11px var(--mono);
}

.window-launcher button:hover {
  background:#efd0df;
}

.room-status {
  font:italic 12px var(--serif);
  margin:auto;
  text-align:center;
}

.persistent-pause {
  white-space:nowrap;
}

.mobile-hint {
  display:none;
}

.dni-dialog {
  position:fixed;
  inset:0;
  margin:auto;
  width:370px;
  max-width:calc(100% - 32px);
  padding:3px;
  z-index:1500;
  color:var(--ink);
  box-shadow:7px 9px 0 #94577230;
}

.dni-dialog::backdrop {
  background:#8f516d38;
  backdrop-filter:blur(3px);
}

.dni-dialog .titlebar {
  cursor:default;
}

.dni-content {
  text-align:center;
  padding:20px 17px 25px;
}

.document-heart {
  display:block;
  font-size:40px;
  color:#bd7b97;
  margin:0 0 16px;
}

.dni-content p {
  font:13px/1.9 var(--mono);
  margin:0 0 25px;
}

.dni-content .retro-button {
  font-size:11px;
  padding:8px 22px;
}

.noscript-note {
  position:fixed;
  inset:20px;
  z-index:2000;
  padding:35px;
  background:#fff5fa;
  border:1px solid #c395ab;
}

/* On smaller screens the room becomes a loose, touch-friendly collage. */
@media(max-width:1000px) and (min-width:761px) {
  .room {
    height:815px;
  }
  .intro-window {
    left:27%;
    width:420px;
    top:105px;
  }
  .music-window {
    left:5%;
    top:345px;
    width:250px;
  }
  .boundaries-window {
    left:auto;
    right:4%;
    top:440px;
    width:235px;
  }
  .letter-paper {
    left:29%;
    width:420px;
    top:66px;
  }
  .pinned-bow {
    left:63%;
    top:25px;
  }
  .rest-card {
    left:37%;
    top:629px;
    width:240px;
  }
  .secret-seal {
    left:38%;
    top:543px;
  }
  .secret-message {
    left:33%;
    top:589px;
  }
  .loose-star {
    left:81%;
    top:700px;
  }
  .margin-note {
    display:none;
  }
  .room-caption {
    left:6%;
    bottom:30px;
  }
  .ghost-type {
    font-size:95px;
  }
}

@media(max-width:760px) {
  .site-header {
    padding:20px 23px;
    gap:14px;
    flex-wrap:wrap;
    min-height:100px;
  }
  .wordmark {
    font-size:31px;
  }
  .header-note {
    font-size:9px;
  }
  .global-controls {
    gap:8px;
    margin-left:auto;
  }
  .global-controls .text-button {
    font-size:9px;
  }
  .global-controls>span {
    display:none;
  }
  .global-controls {
    flex-direction:column;
    align-items:flex-end;
  }
  .room {
    height:auto;
    min-height:1110px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:62px 20px 55px;
    gap:0;
    overflow:clip;
  }
  .room-border {
    inset:6px 14px 12px;
  }
  .window {
    position:relative;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    max-width:100%;
    transform:none!important;
    flex:none;
  }
  .intro-window {
    width:400px;
    align-self:center;
    margin-left:10px;
    z-index:3;
  }
  .intro-body {
    padding:25px 16px 17px;
  }
  .name-art {
    height:156px;
  }
  .name-art img {
    width:100%;
    left:0;
    top:5px;
  }
  .big-name {
    font-size:102px;
  }
  .introduction {
    font-size:17px;
  }
  .intro-footer {
    font-size:8px;
  }
  .titlebar {
    min-height:35px;
    cursor:default;
    touch-action:auto;
  }
  .titlebar h2 {
    font-size:10px;
  }
  .move-handle {
    display:none;
  }
  .window-close {
    width:28px;
    height:27px;
  }
  .music-window {
    margin-top:30px;
    margin-left:-30px;
    width:265px;
    z-index:6;
    transform:rotate(-2deg)!important;
  }
  .music-body {
    padding:14px 18px 9px;
  }
  .cover-frame {
    margin:0 21px 14px;
  }
  .boundaries-window {
    width:232px;
    align-self:flex-end;
    margin:22px 0 0;
    z-index:7;
    transform:rotate(2deg)!important;
  }
  .boundaries-body {
    padding-top:23px;
  }
  .dni-label {
    font-size:49px;
  }
  .rest-card {
    position:relative;
    left:auto;
    top:auto;
    align-self:flex-start;
    margin-top:30px;
    margin-left:9px;
    width:250px;
    flex:none;
  }
  .secret-seal {
    left:auto;
    right:27px;
    top:780px;
    width:46px;
    height:46px;
  }
  .secret-message {
    left:auto;
    right:30px;
    top:832px;
    font-size:12px;
    max-width:160px;
  }
  .pinned-bow {
    left:auto;
    right:32px;
    top:4px;
    width:100px;
    height:100px;
    z-index:8;
  }
  .letter-paper {
    left:9%;
    top:60px;
    width:80%;
    height:355px;
    transform:rotate(5deg);
  }
  .ghost-type {
    font-size:80px;
    left:2%;
    top:8px;
    letter-spacing:-6px;
  }
  .margin-note {
    display:none;
  }
  .star-one {
    left:12%;
    top:35px;
    font-size:35px;
  }
  .star-two {
    left:auto;
    right:30px;
    top:470px;
    font-size:35px;
  }
  .star-two::before {
    height:44px;
  }
  .loose-star {
    left:auto;
    right:40px;
    top:650px;
    font-size:28px;
  }
  .room-caption {
    position:relative;
    left:auto;
    bottom:auto;
    align-self:center;
    font-size:11px;
    margin-top:38px;
    text-align:center;
    max-width:90%;
  }
  .desktop-footer {
    padding:10px 20px 15px;
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
  }
  .window-launcher {
    gap:5px;
  }
  .window-launcher button {
    padding:9px 11px;
    min-height:36px;
  }
  .room-status {
    order:3;
    flex-basis:100%;
    font-size:12px;
  }
  .mobile-hint {
    display:block;
    text-align:center;
    font:9px/1.8 var(--mono);
    padding:0 25px 16px;
    color:var(--muted);
  }
  .player-button {
    height:34px;
    min-width:32px;
  }
  .play-button {
    min-width:39px;
  }
  input[type=range] {
    height:7px;
  }
  input[type=range]::-webkit-slider-thumb {
    width:12px;
    height:20px;
  }
  input[type=range]::-moz-range-thumb {
    width:11px;
    height:19px;
  }
  .entrance-frame {
    padding:28px 16px 23px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
  }
  .entrance-wings {
    margin-top:23px;
    margin-bottom:-8px;
  }
  .entrance h1 {
    letter-spacing:-1px;
  }
  .entrance-sound {
    font-size:9px;
  }
  .entrance-calm {
    font-size:11px;
  }
  .text-button {
    min-height:28px;
  }
  .enter-button {
    min-height:44px;
  }
  .rest-button {
    min-height:44px;
  }
}

@media(max-width:350px) {
  .site-header {
    padding-left:18px;
    padding-right:18px;
  }
  .header-note {
    display:none;
  }
  .room {
    padding-left:17px;
    padding-right:17px;
  }
  .intro-window {
    margin-left:0;
  }
  .intro-body {
    padding-left:10px;
    padding-right:10px;
  }
  .name-art {
    height:132px;
  }
  .big-name {
    font-size:90px;
  }
  .introduction {
    font-size:15px;
  }
  .music-window {
    margin-left:0;
    width:250px;
  }
  .boundaries-window {
    margin-right:0;
  }
  .rest-card {
    width:230px;
    margin-left:0;
  }
  .global-controls .text-button {
    font-size:8px;
  }
}

.room-border {
  background:url('assets/lace.svg') left top / 18px 36px repeat-y,url('assets/lace.svg') right top / 18px 36px repeat-y;
}

@media(min-width:1001px) {
  .music-window {
    left:15%;
  }
}

@media(max-width:760px) {
  .window {
    translate:none!important;
  }
}

body.calm *,body.calm *::before,body.calm *::after {
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important;
}

body.calm .whisper-normal {
  opacity:1!important;
}

body.calm .whisper-secret {
  opacity:0!important;
}

body.calm .tiny-halo {
  transform:rotate(-13deg)!important;
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .entrance,.world,.tiny-halo,.whisper-normal,.whisper-secret {
    transition:none;
  }
}