.title-screen{isolation:isolate;padding:6vh 8vw;align-items:center;background:linear-gradient(90deg,#080c10a6,transparent 70%),url('assets/title-night-v58.png') center/cover;color:#e9e6df}
.title-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,#05090c80,transparent 35%);box-shadow:inset 0 0 140px #0004}
.title-copy{flex:0 0 49%;min-width:0}.title-copy h1{font-size:clamp(64px,8vw,120px);font-weight:800;letter-spacing:.025em;line-height:.88;margin:0 0 30px;display:grid;color:#eeeae3;text-shadow:0 4px 30px #0007}.title-copy h1>span{display:block}.title-copy h1>span+span{margin-top:7px}.title-cursor{color:#a0b3b6;font-weight:400;font-size:.8em;animation:title-breathe 5s ease-in-out infinite}
.title-case{font-size:clamp(15px,1.65vw,24px);font-weight:500;letter-spacing:.11em;margin:0;line-height:1.7}.title-case>span{font-size:.8em;margin-left:.35em}
.title-copy nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:410px;margin:38px 0 17px}
.title-screen .title-copy nav button{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;text-align:left;border:1px solid #737c7b80;border-radius:2px;background:#161e21d9;color:#e7e8e4;font-size:14px;transition:background .18s,border-color .18s,transform .18s;min-height:48px}
.title-screen .title-copy nav button:first-child{background:#e4dfd3;color:#20272a;border-color:#e4dfd3}.title-copy nav button>span:last-child{opacity:.65;font-size:18px}.title-screen .title-copy nav button:hover:not(:disabled){background:#313d40;border-color:#b4bebc;transform:translateY(-2px);filter:none}.title-screen .title-copy nav button:first-child:hover{background:#f7f2e8;color:#151a1b}.title-screen small{font-size:10px;color:#9ca7a8}
.title-screen:has(.title-tree),.title-screen:has(.title-confirm){background:#0c1218f5}.title-screen .title-confirm{background:#151d22;padding:35px;border:1px solid #4d5c63;box-shadow:0 25px 80px #0005}.title-screen .title-tree{background:transparent}
@keyframes title-breathe{0%,100%{opacity:.7}50%{opacity:1}}
@media(max-height:700px){.title-copy h1{font-size:clamp(60px,7.5vw,90px)}.title-copy nav{margin-top:26px}}
@media(max-height:500px) and (min-width:601px){.title-screen{padding:28px 6vw}.title-copy{flex-basis:55%}.title-copy h1{font-size:55px;display:flex;gap:15px;margin-bottom:20px;line-height:1}.title-copy h1>span+span{margin:0}.title-cursor{display:none}.title-case{font-size:16px}.title-copy nav{max-width:370px;margin:24px 0 11px;gap:6px}.title-screen .title-copy nav button{min-height:38px;padding:8px 12px;font-size:12px}.title-screen small{font-size:9px}}
@media(max-width:600px){.title-screen{display:flex;padding:45px 9vw;background-position:60% center}.title-copy{flex-basis:100%}.title-copy h1{font-size:82px}.title-case{font-size:17px}.title-copy nav{max-width:none}}
@media(prefers-reduced-motion:reduce){.title-cursor{animation:none}.title-copy nav button{transition:none}}
.title-copy h1.title-logo{width:min(100%,460px);display:grid;gap:20px;line-height:1;margin-bottom:32px;filter:drop-shadow(0 4px 16px #0008)}
.title-logo .logo-behind{display:block;width:88%;height:auto}.title-logo .logo-the-log-line{position:relative;display:block;width:94%;margin:0}.logo-the-log-line>img{display:block;width:100%;height:auto}
.title-logo .title-cursor{position:absolute;left:104%;bottom:3%;width:9%;height:5px;background:#b9c8ca;color:transparent;font-size:0;animation:login-blink 1.8s steps(1,end) infinite}
.title-copy nav .material-play{width:21px;height:21px;flex:none;opacity:.8}
@keyframes login-blink{0%,59%{opacity:1}60%,100%{opacity:0}}
@media(max-height:700px){.title-copy h1.title-logo{width:min(100%,390px);gap:14px}}
@media(max-height:500px) and (min-width:601px){.title-copy h1.title-logo{display:flex;align-items:center;width:100%;max-width:400px;gap:17px;margin-bottom:24px}.title-logo .logo-behind{width:39%}.title-logo .logo-the-log-line{width:47%;margin:0}.title-logo .title-cursor{display:block;height:3px}.title-copy nav .material-play{width:18px;height:18px}}
@media(prefers-reduced-motion:reduce){.title-logo .title-cursor{animation:none;opacity:1}}

/* BEHIND THE LOG: keep the two lines readable on short landscape displays. */
@media(max-height:500px) and (min-width:601px){.title-copy h1.title-logo{display:grid;gap:10px;width:min(100%,330px);margin-bottom:19px}.title-logo .logo-behind{width:88%}.title-logo .logo-the-log-line{width:94%}.title-copy nav{margin-top:18px}.title-case{font-size:14px}}
@media(max-height:360px) and (min-width:601px){.title-copy h1.title-logo{width:255px;gap:7px;margin-bottom:12px}.title-copy nav{margin-top:12px}}