:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#d0a7b1;background:#050204}
*{box-sizing:border-box}
body{margin:0;min-width:280px}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.6}
[hidden]{display:none!important}
button:focus-visible,input:focus-visible{outline:2px solid #c9788b;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gate-shell{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#240913 0,transparent 64%)}
.masthead{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:27px 36px}
.brand{display:grid;gap:7px}
.umbrella{font-size:9px;letter-spacing:2.3px;text-transform:uppercase;color:#ac687b}
.wordmark{display:flex;align-items:center;font:24px Georgia,serif;color:#bc6c7d;white-space:nowrap}
.wordmark img{margin:0 3px}
.gate-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:22px;padding-top:12px}
.private-label{font-size:10px;letter-spacing:1.3px;color:#ad7483}
.quiet-button{padding:7px 0;background:none;border:0;border-bottom:1px solid #713045;color:#d0a2af;font-size:11px;letter-spacing:.5px}
.quiet-button:hover{color:#f0c6d1;border-color:#c16b84}
.portrait-stage{position:absolute;z-index:-1;top:50svh;left:50%;width:min(100vw,80.02853svh);aspect-ratio:1122/1402;transform:translate(-50%,-50%)}
.entrance-art{display:block;width:100%;height:100%;object-fit:contain}
.wine-glass{position:absolute;left:23.8%;top:21.5%;width:8.3%;height:12.8%;padding:0;border:0;border-radius:40%;background:none;cursor:pointer}
.wine-glass:hover,.wine-glass:active{background:none}
.wine-glass:disabled{opacity:1}
.keyboard-entry{position:absolute;left:-10000px;top:110px;z-index:4}
.keyboard-entry:focus{left:30px;padding:12px;background:#260c16;border:1px solid #945068;color:#e4bdc9}
.gate-panel{position:relative;z-index:3;width:320px;margin:clamp(70px,20svh,210px) 36px 95px auto;padding:26px;background:#130810ed;border:1px solid #512030;border-radius:7px;box-shadow:0 10px 50px #0006}
.close-panel{position:absolute;right:10px;top:7px;width:30px;height:30px;background:none;border:0;color:#bf8999;font-size:23px}
.eyebrow{margin:2px 0 12px;font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:#b8758b}
h2{margin:0 0 25px;font:italic 27px Georgia,serif;color:#d899aa}
form{display:grid;gap:11px}
label{font-size:12px;color:#c795a6}
input{min-width:0;width:100%;padding:12px;border:1px solid #653044;border-radius:3px;background:#0b060a;color:#ead0d9;font-size:16px}
.submit-button{margin-top:5px;padding:12px 9px;background:#511426;border:1px solid #8b354e;border-radius:3px;color:#e2b9c7;font-size:12px}
.submit-button:hover{background:#651b31}
.gate-status{position:absolute;z-index:3;right:36px;bottom:54px;width:min(320px,calc(100% - 32px));margin:0;font-size:12px;line-height:1.7;color:#e3b6c7;text-shadow:0 1px 4px #000}
.gate-status:not(:empty){padding:12px 16px;border-radius:4px;background:#150812eb}
.gate-footer{position:absolute;bottom:20px;left:36px;right:36px;color:#a16a7a;font-size:9px;letter-spacing:1px}
.gate-footer span{padding:0 7px}
.no-script{position:relative;max-width:300px;margin:35px;padding:20px;background:#170914;line-height:1.6;font-size:13px}
@media(max-width:700px){
  .masthead{padding:20px;gap:17px;flex-wrap:wrap}
  .wordmark{font-size:22px}.wordmark img{width:28px;height:28px}
  .gate-actions{width:100%;padding:0;gap:20px;justify-content:flex-start}
  .private-label{width:100%;font-size:9px}.quiet-button{font-size:11px}
  .portrait-stage{top:max(360px,50svh)}
  .gate-panel{width:calc(100% - 40px);max-width:370px;margin:clamp(370px,47svh,550px) 20px 145px auto;padding:25px}
  .gate-status{right:20px;bottom:55px;width:calc(100% - 40px)}
  .gate-footer{left:20px;right:20px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.owner-entry{position:absolute;left:59%;top:37%;min-width:60px;min-height:44px;padding:8px 13px;border:1px solid #bd5269;border-radius:24px;background:#16070cda;color:#f5bac7;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;box-shadow:0 0 22px #d5163433}
.owner-entry,.owner-entry:hover{background:transparent;color:transparent;border-color:transparent;box-shadow:none}
.owner-entry:focus-visible{outline:2px solid #c9788b;outline-offset:4px}
/* Crimson Matrix rain occupies the black side gutters, never the portrait. */
.story-rail{position:absolute;top:18svh;bottom:9svh;width:max(0px,calc((100vw - 80.02853svh)/2 - 28px));overflow:hidden;pointer-events:none}
.rail-left{left:14px}.rail-right{right:14px}
.matrix-rain{position:relative;width:100%;height:100%;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 83%,transparent)}
.matrix-stream{position:absolute;top:0;width:12.5%;height:100%;overflow:visible;color:#b91031;text-shadow:0 0 7px #d10d3b80;font:14px/1.45 Consolas,monospace;letter-spacing:4px}
.matrix-stream span{display:block;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;animation:matrix-fall 26s linear infinite;will-change:transform}
.matrix-stream:nth-child(1){left:0;opacity:.65}.matrix-stream:nth-child(2){left:12.5%;color:#ff4c70}.matrix-stream:nth-child(3){left:25%;opacity:.5}.matrix-stream:nth-child(4){left:37.5%;color:#e22c50}.matrix-stream:nth-child(5){left:50%;opacity:.7}.matrix-stream:nth-child(6){left:62.5%;color:#ff6a85}.matrix-stream:nth-child(7){left:75%;opacity:.45}.matrix-stream:nth-child(8){left:87.5%;color:#ed365b}
.matrix-stream:nth-child(2n) span{animation-duration:31s;animation-delay:-16s}.matrix-stream:nth-child(3n) span{animation-duration:23s;animation-delay:-8s}.matrix-stream:nth-child(4n) span{animation-duration:37s;animation-delay:-28s}.rail-right .matrix-stream span{animation-direction:normal;animation-delay:-19s}.rail-right .matrix-stream:nth-child(2n) span{animation-delay:-6s}
@keyframes matrix-fall{from{transform:translateY(-85%)}to{transform:translateY(70svh)}}
.story-paused .matrix-stream span{animation-play-state:paused}
.story-pause{position:absolute;bottom:15px;right:30px;z-index:2;border:1px solid #5c1d2e;border-radius:4px;background:#11040a;color:#c85c75;font-size:10px;padding:8px}
@media(max-width:900px){
  main{display:grid;grid-template-columns:1fr 1fr;position:relative;padding-bottom:70px}
  .portrait-stage{position:relative;grid-column:1/-1;grid-row:1;top:auto;left:auto;transform:none;width:min(100%,80.02853svh);margin:0 auto;z-index:0}
  .story-rail{position:relative;inset:auto;grid-row:2;width:auto;height:250px;margin:0 10px;pointer-events:none}
  .rail-left{grid-column:1}.rail-right{grid-column:2}
  .matrix-stream{font-size:12px;letter-spacing:3px}.matrix-stream span{animation-duration:22s}
  .story-pause{position:relative;grid-column:1/-1;grid-row:3;inset:auto;justify-self:center;margin-top:12px}
  .gate-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;width:min(370px,calc(100vw - 40px));max-height:80svh;overflow:auto}
  .gate-status{position:fixed;bottom:25px;right:20px}.gate-shell{overflow:clip}
}
@media(prefers-reduced-motion:reduce){.matrix-stream span{animation:none;transform:translateY(-15%)}.story-pause{display:none}}