html.booting .stage, .stage.is-pending { display:none !important; }

    @property --hang {
      syntax: '<angle>';
      inherits: true;
      initial-value: 0deg;
    }
    @property --hang-y {
      syntax: '<length>';
      inherits: true;
      initial-value: 0px;
    }
    html, body { margin:0; height:100%; background:#1a1816; }
    body { display:flex; align-items:center; justify-content:center; }
    .stage {
      position:relative; overflow:hidden;
      width:min(100vw, calc(100vh * 1024 / 576)); aspect-ratio:1024 / 576;
      container-type: inline-size;
    }
    .stage.is-pending { display: none !important; }
    .zoom {
      position:absolute; inset:0;
      transform-origin: 0 0;
      transition: transform .28s ease;
    }
    .room { position:absolute; inset:0; width:100%; height:100%; display:block; }
    .console-fixed {
      position:absolute; inset:0; width:100%; height:100%;
      z-index:3; pointer-events:none;
    }
    .wall {
      position:absolute; inset:0;
      pointer-events: none;
    }
    .wall img {
      position:absolute; display:block; cursor:pointer; pointer-events:auto;
      transform-origin: center top;
      transform: translate(var(--shift-x, 0px), var(--hang-y, 0px)) rotate(var(--hang, 0deg));
      transition: transform .42s cubic-bezier(.22,.61,.36,1);
      filter:
        url(#paper)
        drop-shadow(4px 8px 5px rgba(0,0,0,.65))
        drop-shadow(0 16px 14px rgba(0,0,0,.5));
    }
    .wall.is-swinging img { transition: none; }
    .wall img.is-render {
      filter:
        drop-shadow(4px 8px 5px rgba(0,0,0,.65))
        drop-shadow(0 16px 14px rgba(0,0,0,.5));
    }
    .wall img.is-host { opacity: 0; }
    .pair {
      position:absolute; z-index:6; pointer-events:none; overflow:visible;
    }
    .pair img {
      position:absolute; left:50%; top:50%; width:100%; height:100%;
      object-fit:fill; pointer-events:auto; cursor:pointer;
      transition: transform .42s cubic-bezier(.22,.61,.36,1);
      filter:
        drop-shadow(4px 8px 5px rgba(0,0,0,.65))
        drop-shadow(0 16px 14px rgba(0,0,0,.5));
    }
    .pair img.drawing {
      transform: translate(var(--draw-closed), calc(var(--y) + var(--hang-y, 0px))) rotate(var(--hang, 0deg));
      filter:
        url(#paper)
        drop-shadow(4px 8px 5px rgba(0,0,0,.65))
        drop-shadow(0 16px 14px rgba(0,0,0,.5));
    }
    .pair img.render { transform: translate(var(--render-closed), calc(var(--y) + var(--hang-y, 0px))) rotate(var(--hang, 0deg)); }
    .pair img.front { z-index:2; }
    .pair img.back { z-index:1; }
    .pair.is-open img.drawing { transform: translate(var(--draw-x), calc(var(--y) + var(--hang-y, 0px))) rotate(var(--hang, 0deg)); }
    .pair.is-open img.render { transform: translate(var(--render-x), calc(var(--y) + var(--hang-y, 0px))) rotate(var(--hang, 0deg)); }
    .focus {
      display:none; position:absolute;
      left:16.21%; top:2.43%; width:69.92%; height:68.40%;
      align-items:center; justify-content:center; gap:2.2%;
    }
    .focus.show { display:flex; }
    .focus img {
      max-width:88%; max-height:92%; object-fit:contain; cursor:pointer;
      filter:
        drop-shadow(4px 8px 5px rgba(0,0,0,.65))
        drop-shadow(0 16px 14px rgba(0,0,0,.5));
    }
    .focus.pair img { max-width:46%; }
    #controls { position:absolute; inset:0; z-index:5; pointer-events:none; }
    .focus { z-index:2; }
    .hot {
      position:absolute; padding:0; border:0; background:transparent; cursor:pointer;
      pointer-events:auto;
    }
    .hot:active { background:rgba(255,255,255,.35); }
    .hot.round { border-radius:50%; }
    .hot.square { border-radius:22%; }
    .heart-icon {
      position: absolute;
      z-index: 6;
      pointer-events: none;
      overflow: visible;
    }
    .heart-icon path {
      fill: #f2f2f2;
    }
    .heart-icon.is-lit path {
      fill: #e45a78;
    }
    .fav-mark {
      position: absolute;
      z-index: 7;
      pointer-events: none;
      color: #e01127;
      font: 700 1.7cqi/1 "Georgia", "Times New Roman", serif;
      transform: translate(-50%, -50%);
      text-shadow: 0 1px 2px rgba(0,0,0,.45);
    }
    #screen {
      position:absolute; z-index:4; pointer-events:none;
      left:30.08%; top:88.5417%; width:34.57%; height:7.47%;
      background:#2a3137; color:#c9d3dc; border-radius:8px;
      display:flex; align-items:center; justify-content:center;
      font: 500 1.45cqi/1.25 "Avenir Next", "Segoe UI", sans-serif;
    }
    #screen-text {
      max-height:100%; overflow:auto; text-align:center; padding:0 6%;
      scrollbar-width:none;
    }
    #screen-text::-webkit-scrollbar { display:none; }
    .wall-face {
      position:absolute; left:12.6953125%; top:0;
      width:74.8046875%; height:79.5138889%;
      pointer-events:none;
    }