@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

  :root{
    --black: #23211b;
    --paper: #e9e4d8;
    --dim: #6b665c;
    --stamp: #e9e4d8;
    --hair: rgba(233,228,216,0.14);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%; background:var(--black); overflow:hidden;}
  body{font-family: "Quicksand", sans-serif;color:var(--paper);}

  #gate{
    position:fixed; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:var(--black); z-index:10; text-align:center; padding:2rem;
  }
  #gate .mark{ font-size:11px; letter-spacing:.25em; color:var(--dim); margin-bottom:3rem; text-transform:uppercase; }
  #gate h1{
    font-weight:300;
    font-size:clamp(22px, 3vw, 36px); line-height:1.3; max-width:14ch; color:var(--paper);
  }
  #gate .spec{ margin-top:3rem; font-size:12px; letter-spacing:.15em; color:var(--stamp); text-transform:uppercase; }
  #gate .spec span{ color:var(--dim); margin:0 .6em; }
  #gate .current{ margin-top:1.2rem; font-size:11px; color:var(--dim); letter-spacing:.1em; }

  #room{ position:fixed; inset:0; display:none; background:var(--black); }
  #room.active{display:block;}

  #stage{ position:absolute; inset:0; }
  #stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  #fallbackImg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:none;
  }

  #room .label{ position:absolute; left:64px; bottom:64px; max-width:44ch; pointer-events:none; }
  #room .label .index{
    font-size:11px; color:var(--dim); letter-spacing:.2em; margin-bottom:.8rem;
    opacity:0; transform:translateY(10px); transition:opacity 1.3s ease, transform 1.3s ease;
  }
  #room .label h2{
    font-weight:400; font-size:clamp(30px, 3vw, 46px);
    letter-spacing:.01em; text-transform:uppercase; color:var(--paper);
    opacity:0; transform:translateY(10px); transition:opacity 1.3s ease .1s, transform 1.3s ease .1s;
  }
  #room .label .meta{
    margin-top:.7rem; font-size:12px; letter-spacing:.06em; color:var(--stamp);
    opacity:0; transform:translateY(10px); transition:opacity 1.3s ease .22s, transform 1.3s ease .22s;
  }
  #room.settled .label .index,
  #room.settled .label h2,
  #room.settled .label .meta{ opacity:1; transform:translateY(0); }

  #room .mark{ position:absolute; top:48px; left:64px; font-size:13px; letter-spacing:.25em; color:var(--stamp); text-transform:uppercase; pointer-events:none; }

  #room .nav{
    position:absolute; top:0; bottom:0; width:20%; cursor:pointer; z-index:5;
    display:flex; align-items:center;
  }
  #room .nav.prev{ left:0; justify-content:flex-start; }
  #room .nav.next{ right:0; justify-content:flex-end; }
  #room .nav .chevron{
    font-family:'Fraunces', serif; font-size:28px; color:var(--paper);
    opacity:0; transform:translateX(0); transition:opacity .3s ease, transform .3s ease;
    padding:0 28px;
  }
  #room .nav.prev .chevron{transform:translateX(-8px);}
  #room .nav.next .chevron{transform:translateX(8px);}
  #room .nav:hover .chevron{ opacity:.65; transform:translateX(0); }

  #room .hint{
    position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
    font-size:10px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase;
    opacity:1; transition:opacity 1.2s ease; pointer-events:none;
  }
  #room .hint.hidden{opacity:0;}

  #room .progress{ position:absolute; top:48px; right:64px; font-size:11px; color:var(--dim); letter-spacing:.15em; pointer-events:none; }

  #debug{
    position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
    font-size:10px; color:var(--dim); opacity:.5; display:none;
  }

  ::selection{ background:var(--stamp); color:var(--black); }