:root{--mag:#ff2bd6;--lime:#c6ff3d;--cyan:#2bf7ff;--org:#ff8a2b;--glass:rgba(10,6,20,.45)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:'Martian Mono',monospace}
#scene-container{position:fixed;inset:0}
#scene-container canvas{display:block;width:100%!important;height:100%!important}
button{font-family:inherit;cursor:pointer}

#journey{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(640px,90vw);display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:40px;font-size:10px;z-index:5}
#journey .flag{font-weight:800;color:var(--lime)}
#journey .track{flex:1;height:2px;background:rgba(255,255,255,.2);position:relative}
#journey .fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--mag),var(--org))}
#journey .moto{position:absolute;top:-11px;left:0;transform:translateX(-50%) scaleX(-1);font-size:16px}
#km{min-width:70px;text-align:right;color:var(--cyan)}

#caption{position:fixed;left:24px;bottom:110px;z-index:5;text-shadow:0 0 20px rgba(0,0,0,.8);transition:opacity .8s,transform .8s}
#caption.hide{opacity:0;transform:translateY(10px)}
#caption .ch{font-size:11px;color:var(--lime);letter-spacing:.3em}
#caption .nm{font-family:'Unbounded';font-weight:900;font-size:clamp(22px,4vw,46px);line-height:1;margin:6px 0;background:linear-gradient(90deg,#fff,var(--cyan),var(--mag));-webkit-background-clip:text;color:transparent}
#caption .co{font-size:11px;opacity:.7}

#ticker{position:fixed;right:24px;top:70px;max-width:300px;z-index:5;font-size:11px;padding:10px 14px;background:var(--glass);backdrop-filter:blur(10px);border-left:3px solid var(--mag);opacity:0;transform:translateX(20px);transition:all .6s}
#ticker.show{opacity:1;transform:none}

#hello{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Unbounded';font-weight:900;font-size:clamp(60px,14vw,220px);pointer-events:none;opacity:0;z-index:6;background:linear-gradient(90deg,var(--org),var(--mag),var(--cyan),var(--lime));-webkit-background-clip:text;color:transparent;transition:opacity 1s;filter:drop-shadow(0 0 30px rgba(255,43,214,.6))}
#hello.show{opacity:1;animation:wob 1s ease-in-out infinite alternate}
@keyframes wob{to{transform:scale(1.08) rotate(-2deg)}}

#title{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,rgba(0,0,0,.2),rgba(0,0,0,.85));transition:opacity 1.2s}
#title.gone{opacity:0;pointer-events:none}
.tinner{text-align:center;padding:20px}
.kicker{font-size:11px;letter-spacing:.4em;color:var(--lime);text-transform:uppercase}
#title h1{font-family:'Unbounded';font-weight:900;font-size:clamp(40px,10vw,130px);line-height:.95;margin:18px 0;background:linear-gradient(180deg,#fff 0%,#c8d0ff 40%,#5a3a8a 52%,#ffd6f5 60%,#fff 100%);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 25px rgba(43,247,255,.4))}
#title h1 span{display:inline-block;margin:0 .15em;font-weight:200;-webkit-text-fill-color:var(--mag);animation:zoom 1.2s ease-in-out infinite alternate}
@keyframes zoom{to{transform:translateX(12px)}}
.sub{font-size:12px;opacity:.8}
.sub a{color:var(--cyan)}
#startBtn{margin-top:34px;font-family:'Unbounded';font-weight:900;font-size:18px;padding:18px 38px;border:none;border-radius:60px;color:#000;background:linear-gradient(90deg,var(--lime),var(--cyan),var(--mag),var(--org));background-size:300%;animation:sh 4s linear infinite;box-shadow:0 0 40px rgba(255,43,214,.5)}
#startBtn:hover{transform:scale(1.05)}
@keyframes sh{to{background-position:300% 0}}
.hint{margin-top:18px;font-size:10px;opacity:.5}

#dock{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:7;padding:10px 14px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:18px;opacity:0;transition:all .4s;width:max-content;max-width:94vw}
#dock.show,#dock:hover{opacity:1;transform:translate(-50%,0)}
#dock .row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center}
#dock button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:11px;padding:7px 10px;border-radius:9px;min-width:36px}
#dock button:hover{border-color:var(--lime);color:var(--lime)}
#dock button.on{background:var(--mag);border-color:var(--mag);color:#000}
.slider{margin-top:8px;font-size:9px;opacity:.85}
.slider input{width:200px;accent-color:var(--mag)}
footer{position:fixed;right:12px;bottom:8px;font-size:10px;z-index:8;opacity:.6}
footer a{color:#fff}
@media(max-width:600px){#caption{bottom:150px;left:14px}.slider input{width:120px}#ticker{right:10px;left:10px;max-width:none;top:60px}}