/* Static title artwork; all typography and controls remain accessible HTML. */
#boot{position:fixed;inset:0;z-index:50;overflow:hidden;background:#050b13;color:#e4dfd1;opacity:1;visibility:visible;transition:opacity .45s,visibility .45s}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.title-vista{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;user-select:none;pointer-events:none}
#boot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,6,11,.14),transparent 45%)}
.title-content{position:absolute;z-index:1;left:9.8%;top:25.5%;width:32%;max-width:510px}
.title-logo{font-family:Didot,'Bodoni 72','Times New Roman',serif;font-size:clamp(90px,9.7vw,188px);font-weight:400;line-height:.97;letter-spacing:.065em;margin:0 0 15px -.055em;text-shadow:0 3px 20px #02050c50}
.title-subtitle{font-size:clamp(9px,.84vw,15px);font-weight:300;letter-spacing:.52em;padding-left:.5em;color:#bfb9aa}
.title-menu{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:clamp(48px,8vh,100px)}
#boot button{position:relative;appearance:none;border:0;background:none;color:#b7b5ae;text-align:left;font:300 clamp(12px,.94vw,17px)/1.5 var(--mono);letter-spacing:.04em;cursor:pointer;padding:8px 14px 8px 0;transition:color .18s}
#boot button::before{content:'';position:absolute;width:25px;height:1px;left:-42px;top:50%;background:#d9bd83;opacity:0;transition:opacity .18s}
#boot button:hover,#boot button:focus-visible{color:#fff5dc;outline:none}
#boot button:focus-visible::before,#boot button:hover::before{opacity:1}
#boot button:disabled{opacity:.32;cursor:default}#boot button:disabled::before{display:none}
.title-notice,.title-credit{position:absolute;z-index:1;bottom:4.1%;font-size:clamp(8px,.63vw,11px);letter-spacing:.07em;color:#a5a49e;font-weight:300}
.title-notice{left:4.8%}.title-credit{right:4.8%;text-align:right}
#title-preferences{margin-top:4vh;max-width:350px;padding:20px 25px 18px 0;background:linear-gradient(90deg,#050b13de,#050b1370 85%,transparent)}
#title-preferences h2{font:300 14px var(--mono);letter-spacing:.18em;color:#ddd4c0;margin-bottom:22px}
#title-preferences label{font:300 11px/1.6 var(--mono);display:block;margin:16px 0;color:#c7c4bb}
#title-preferences input{accent-color:#cbb988}#title-preferences input[type=checkbox]{vertical-align:middle;margin-right:10px;width:14px;height:14px}
#title-preferences input:focus-visible{outline:1px solid #f4e4bc;outline-offset:5px}
#title-preferences input[type=range]{display:block;width:100%;margin:12px 0 24px}
#title-volume-value{float:right;font-variant-numeric:tabular-nums;color:#a49f94}
#boot [hidden]{display:none!important}
body:not(.prologue-active) #debug-hotkey{display:none}
@media(max-height:600px){.title-content{top:18%}.title-logo{font-size:clamp(72px,15vh,110px)}.title-menu{margin-top:7vh;gap:2px}#title-preferences{margin-top:16px;padding-top:0}#title-preferences h2{display:none}#title-preferences label{margin:10px 0}.title-notice,.title-credit{bottom:3%}}
@media(prefers-reduced-motion:reduce){#boot,#boot button,#boot button::before{transition:none}}

#boot[data-loading=true] .title-menu{opacity:.5;pointer-events:none}#boot[data-loading=true] .title-menu::after{content:'Preparing the archive…';font:300 10px var(--mono);color:#ddc697;margin-top:20px}#boot[data-error] .title-menu::after{content:attr(data-error)}
