.dvTitle{position:fixed;inset:0;overflow:hidden;background:#06090b;z-index:0}


.dvTitle .dvtArt{position:absolute;left:50%;top:60%;width:max(100vw, calc(100vh * 2400 / 1080));aspect-ratio:2400/1080;
  transform:translate(-50%,-60%);background:url("/v6/art/title/wd_gate_chair.webp") center/100% 100% no-repeat}
.dvTitle .dvtScrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#06090be6 0,#06090b99 calc(70 * var(--u)),#06090b00 calc(130 * var(--u))),
             linear-gradient(0deg,#06090b80 0,#06090b00 22%)}
.dvTitle .dvtHead{position:absolute;left:16px;right:16px;top:calc(12 * var(--u));text-align:center;pointer-events:none;z-index:2}
.dvTitle .dvtHead h1{margin:0;font:700 max(30px, calc(44 * var(--u)))/1 var(--title);letter-spacing:.14em;color:#e6d5a8;
  text-transform:uppercase;text-shadow:0 2px 0 #000,0 0 14px #000}
.dvTitle .dvtHead p{margin:calc(8 * var(--u)) auto 0;max-width:46em;min-height:1.35em;font:600 max(13px, calc(15 * var(--u)))/1.35 var(--title);
  letter-spacing:.02em;color:#ece4d2;text-shadow:0 1px 0 #000,0 0 10px #000;text-wrap:balance}






.dvTitle .dvtSeat{position:absolute;left:50.2%;top:min(95%, calc(60% + 40vh - max(24px, calc(27 * var(--u))) - 10px));
  top:min(95%, calc(60% + 40dvh - max(24px, calc(27 * var(--u))) - 10px));transform:translate(-50%,-50%);z-index:1}
@keyframes dvtIn{from{opacity:0}to{opacity:1}}
.dvTitle .dvtArt,.dvTitle .dvtHead{animation:dvtIn .9s ease-out both}
.dvTitle .dvtHead p.dvtLate{animation:dvtIn .5s ease-out both}



.dvPlate{--c:9px;position:relative;display:inline-grid;place-items:center;height:max(48px, calc(54 * var(--u)));
  min-width:max(200px, calc(230 * var(--u)));padding:0 calc(46 * var(--u));margin:0;border:0;border-radius:0;box-shadow:none;cursor:pointer;
  font:700 max(16px, calc(19 * var(--u)))/1 var(--title);letter-spacing:.22em;color:#f1d79c;text-shadow:0 1px 0 #000;
  background:linear-gradient(180deg,#f1d79c,#dcb46e 40%,#8a6a2e);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  filter:drop-shadow(0 2px 0 #000);-webkit-tap-highlight-color:transparent}
.dvPlate::before{content:"";position:absolute;inset:2px;z-index:0;--c2:8px;pointer-events:none;
  clip-path:polygon(var(--c2) 0,calc(100% - var(--c2)) 0,100% var(--c2),100% calc(100% - var(--c2)),calc(100% - var(--c2)) 100%,var(--c2) 100%,0 calc(100% - var(--c2)),0 var(--c2));
  background:repeating-linear-gradient(97deg,#ffffff06 0 2px,#0000 2px 5px),
             linear-gradient(180deg,#3a4448 0%,#222a2e 30%,#161c1f 62%,#0d1214 100%)}
.dvPlate::after{content:"";position:absolute;inset:2px;z-index:0;pointer-events:none;border:0;border-image:none;
  background:
    radial-gradient(circle at 15px 30%,#f6e3b0 0 1.2px,#a07c3c 1.6px 2.6px,#2a1e0c 3px,#0000 3.6px),
    radial-gradient(circle at 15px 70%,#f6e3b0 0 1.2px,#a07c3c 1.6px 2.6px,#2a1e0c 3px,#0000 3.6px),
    radial-gradient(circle at calc(100% - 15px) 30%,#f6e3b0 0 1.2px,#a07c3c 1.6px 2.6px,#2a1e0c 3px,#0000 3.6px),
    radial-gradient(circle at calc(100% - 15px) 70%,#f6e3b0 0 1.2px,#a07c3c 1.6px 2.6px,#2a1e0c 3px,#0000 3.6px),
    linear-gradient(180deg,#0000 0 calc(100% - 3px),#0006 calc(100% - 3px));
  box-shadow:inset 0 1px 0 #ffffff1a}
.dvPlate span{position:relative;z-index:1;pointer-events:none}
.dvPlate:focus-visible{outline:2px solid #f1d79c;outline-offset:3px}
.dvPlate:active{transform:translateY(1px)}
 
.dvPlate[aria-busy="true"]{cursor:progress}
.dvPlate[aria-busy="true"] span{opacity:.55}

 
#ptBegin.ptTitle{padding:0;background:#06090b;overflow:hidden}
@media (orientation:portrait){ #ptBegin.ptTitle{z-index:95} }
 
#ptBegin.ptTitle .dvtHead .ptFrame{margin:calc(8 * var(--u)) auto 0;font:600 max(13px, calc(15 * var(--u)))/1.35 var(--title);letter-spacing:.02em}
 
#ptBegin .ptBeginIn .dvPlate{min-width:max(200px, calc(230 * var(--u)))}
@media (prefers-reduced-motion:reduce){ .dvTitle .dvtArt,.dvTitle .dvtHead,.dvTitle .dvtHead p.dvtLate{animation:none} }


.dvPlate[hidden]{display:none}









.dvTitle.dvtLq .dvtArt{background:url("/v6/art/title/wd_gate_chair.webp") center/100% 100% no-repeat,
  url("data:image/webp;base64,UklGRvQAAABXRUJQVlA4IOgAAAAwBwCdASpAAB0APu1Yp02ppKOiMBv8ATAdiUAXHILeYiP33hr96W/ITbeIBLcIrLmf3XX9u+eFhdwP37FqgxLyc4AA/un2aWrRRpP8FPv/Gsh2seEaCJKHsuhbLrfuu1eYt3o6H5NM8OV9yO/3XnyHD/+GWv/0a9W7OnBkMHbc8zv47aDVKSMlnSqw5mGgBrPNp9ApyuIMCHyKNAaq2aWS+rTeryJlokmurtLCQ0wg+QtW2ioZU8MN7VyzuaSFH66L/5YAat+2skmsNN6y4Qsmw7ydEq5Xjf/vo+BelVnOa1buyypRAAAA") center/100% 100% no-repeat}
.dvTitle.dvtNoIn .dvtArt,.dvTitle.dvtNoIn .dvtHead{animation:none}
#introB{z-index:90}
.dvTitle .dvHand{--hs:clamp(48px, 13.6vh, 76px);position:absolute;z-index:3;width:var(--hs);height:var(--hs);pointer-events:none;
  left:calc(88% - var(--hs) * 22.5 / 48);top:calc(22% - var(--hs) * 44.5 / 48);transform-origin:calc(var(--hs) * 22.5 / 48) calc(var(--hs) * 44.5 / 48);
  filter:drop-shadow(0 3px 5px #000d) drop-shadow(0 0 1.5px #000);animation:dvHandTap 1.1s ease-in-out infinite}
.dvTitle .dvHand svg{display:block;width:100%;height:100%;transform:rotate(180deg) scaleX(-1)}
@keyframes dvHandTap{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-9px) scale(1.06)}62%{transform:translateY(2px) scale(.94)}}
.dvTitle .dvPlate[aria-busy="true"] ~ .dvHand{display:none}
@media (prefers-reduced-motion:reduce){ .dvTitle .dvHand{animation:none} }