@font-face{font-family:Barlow;src:url(assets/font-0.ttf);font-weight:700}
@font-face{font-family:Barlow;src:url(assets/font-2.ttf);font-weight:900}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#171914;color:#fff9ee;font-family:monospace}
main{isolation:isolate;position:relative;overflow:hidden;display:flex;flex-direction:column;margin:auto;width:min(100%,460px);height:100vh;height:100dvh;padding:max(17px,env(safe-area-inset-top)) clamp(16px,5vw,23px) max(14px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#0008,transparent 36%),url(assets/cabin.jpg) center 28%/cover}
.doors,.doors i{position:absolute;inset:0;pointer-events:none}
.doors{z-index:-1;overflow:hidden}
.doors i{background:linear-gradient(0deg,#0008,transparent 44%,#0002),url(assets/doors.jpg) center/cover;transition:transform 1.15s cubic-bezier(.55,.02,.28,1)}
.doors i:first-child{clip-path:inset(0 50% 0 0)}.doors i:last-child{clip-path:inset(0 0 0 50%)}
.opened .doors i:first-child{transform:translateX(-51%)}.opened .doors i:last-child{transform:translateX(51%)}
header,footer,.chathead{display:flex;align-items:center;justify-content:space-between;gap:8px}
header{align-items:flex-start}header img{width:clamp(113px,32vw,140px)}small{font:bold 9px/1.5 monospace}header small{text-align:right;margin-top:4px;text-shadow:1px 1px #171914}
#home{display:flex;flex:1;flex-direction:column;justify-content:space-between}
h1{font:900 clamp(55px,min(18vw,10dvh),86px)/.88 Barlow,sans-serif;letter-spacing:-2px;transform:rotate(-3deg);width:max-content;margin:clamp(25px,9dvh,86px) 0;text-shadow:3px 3px #171914}h1 span{color:transparent;-webkit-text-stroke:2px #faf5e9;text-shadow:none}
button{font:700 17px Barlow;color:#faf8ee;background:#171914;border:0;border-radius:0;min-height:46px;cursor:pointer;letter-spacing:.6px}button:focus-visible,input:focus-visible{outline:2px solid #766941;outline-offset:-3px}button:disabled{cursor:default}
#open{width:100%;margin-bottom:20px;min-height:53px;padding:12px 15px}#open b{float:right;font:22px/1 sans-serif}
#chat{margin-top:auto;margin-bottom:17px;color:#171914;background:#f9f8ed;border:2px solid #171914;box-shadow:4px 4px #171914;animation:show .3s ease-out}
@keyframes show{from{opacity:0;transform:translateY(5px)}}
.chathead{padding:10px 12px 3px}.chathead h2{margin:0;font:700 22px/1 Barlow}.chathead small{font-size:8px;letter-spacing:.6px}
#messages{overflow:auto;max-height:min(25dvh,205px);overscroll-behavior:contain;padding:0 12px}
#messages p{font:700 14px/1.45 monospace;overflow-wrap:anywhere;margin:8px 0 12px}#messages p+p{padding-top:9px;border-top:1px solid #17191444}#messages strong{display:block;font-size:9px;letter-spacing:1px;margin-bottom:3px}
#status{margin:0;padding:7px 12px;font:12px/1.4 monospace}#status:empty{display:none}
#retry{margin:0 12px 8px;font-size:14px}form{display:flex;border-top:2px solid #171914}input{border:0;min-width:0;flex:1;background:#f7f5ed;color:#171914;font:16px monospace;border-radius:0;padding:10px}form button{padding:0 12px}input::placeholder{color:#514f48}
footer{border-top:1px solid;padding-top:10px;text-shadow:1px 1px #171914}footer small{font-size:8px}
@media(prefers-reduced-motion:reduce){.doors i{transition:none}#chat{animation:none}}
/* All pieces share the original photograph's coordinate system. */
.figure{position:absolute;z-index:-3;left:50%;top:28%;width:max(100%,56.22vh);width:max(100%,56.22dvh);height:auto;transform:translate(-50%,-28%);pointer-events:none}
main::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#0008,transparent 36%);pointer-events:none}
.head,.right-arm{transform-box:view-box}
.head{transform-origin:313px 283px}
.right-arm{transform-origin:224px 317px}
@media(prefers-reduced-motion:no-preference){
  .opened .head{animation:head-wobble 7.8s linear 2.1s infinite}
  .opened .right-arm{animation:welcome-arm 17s ease-in-out 1.2s infinite}
}
@keyframes head-wobble{
  0%,9%,100%{transform:rotate(0)}
  2%{transform:rotate(-3.4deg)}
  5%{transform:rotate(2.1deg)}
  7%{transform:rotate(-.8deg)}
}
@keyframes welcome-arm{
  0%,100%{transform:rotate(0)}
  4.3%,7.7%{transform:rotate(9deg)}
  12.4%{transform:rotate(0)}
}

/* Both photographic eyelids snap shut together, like paper collage pieces. */
.blink{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .opened .blink{animation:blink-eyes 7s steps(1,end) 2.8s infinite}
}
@keyframes blink-eyes{
  0%,5.9%,12.6%,100%{opacity:0}
  1.7%,9.3%{opacity:1}
}

footer #imprint{background:transparent;color:inherit;font:bold 8px/1.4 monospace;letter-spacing:0;text-align:right;padding:0 0 0 8px;min-height:44px}
footer{padding-top:0}
#legal{width:344px;max-width:90vw;max-height:85dvh;overflow:auto;background:#faf8ed;border:3px solid #171914;color:#171914;padding:25px}
#legal::backdrop{background:#111b}
#legal h2{font:800 30px/1.05 Barlow,sans-serif;margin:34px 0 22px}
#legal p{font:14px/1.5 monospace;margin:14px 0}
#legal a{color:inherit}
#close{position:absolute;right:10px;top:5px;background:none;border:0;color:#171914;font:30px Arial;min-width:44px;min-height:44px}