:root { --paper:#e7e4d8; --ink:#071a26; --sea:#0b3344; --yellow:#f2cc5c; --coral:#ff7049; }
*{box-sizing:border-box} body{margin:0;background:#102d3b;color:var(--paper);font-family:"DM Mono",monospace}.voyage{height:100vh;width:100vw;overflow:hidden}.voyage>#map{position:fixed;inset:0;height:100vh;width:100vw;z-index:0}.splash{position:fixed;z-index:20;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(2rem,9vw,9rem);background:radial-gradient(circle at 78% 36%,rgba(30,104,127,.72),transparent 35%),linear-gradient(115deg,rgba(3,19,29,.99),rgba(5,31,43,.9));transition:opacity .65s ease,visibility .65s ease}.splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}.splash h1{max-width:32rem;font-size:clamp(4rem,10vw,9rem);margin:.8rem 0 1.4rem}.splash p:not(.eyebrow){max-width:35rem;color:#d7e0d8;font-size:clamp(.78rem,1.2vw,1rem);line-height:1.8}.splash button{margin-top:1.75rem;padding:.85rem 1.1rem;border:1px solid var(--yellow);background:transparent;color:var(--paper);font:500 .72rem "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.splash button:hover{background:var(--coral);border-color:var(--coral);color:var(--ink)}.splash button span{margin-left:.7rem;font-size:1.1rem}.shade{position:fixed;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(4,19,28,.84),rgba(4,19,28,.17) 45%,rgba(4,19,28,.05)),linear-gradient(0deg,rgba(4,19,28,.62),transparent 28%)}
.title-card{position:fixed;z-index:3;left:clamp(1.2rem,4vw,3.5rem);top:clamp(1.2rem,4vh,2.3rem);width:min(20rem,65vw);animation:arrive .85s both}.eyebrow{display:flex;align-items:center;gap:.65rem;color:var(--yellow);font-size:.62rem;text-transform:uppercase;letter-spacing:.17em}.eyebrow i{display:block;width:2.2rem;height:1px;background:var(--yellow)}h1{margin:.45rem 0 .5rem;font:600 clamp(2rem,3.8vw,3.25rem)/.92 "Playfair Display",serif;letter-spacing:-.055em;text-shadow:0 8px 25px rgba(0,0,0,.25)}h1 em{color:#f0c986}.instruction{max-width:18rem;color:#dae0d7;font-size:.58rem;line-height:1.65}.archive-link{display:inline-flex;gap:.5rem;margin-top:.45rem;color:var(--paper);font-size:.67rem;text-decoration:none;border-bottom:1px solid var(--yellow);padding-bottom:.35rem}.archive-link:hover{color:var(--yellow)}
.telemetry{position:fixed;z-index:3;left:clamp(1.2rem,4vw,3.5rem);bottom:clamp(1.2rem,3vh,2rem);width:min(28rem,calc(100vw - 3rem));padding:.6rem 0;border-top:1px solid rgba(231,228,216,.52)}.location-notification{position:fixed;z-index:4;right:clamp(1.2rem,4vw,3.5rem);top:clamp(1.2rem,4vh,2.5rem);width:min(23rem,calc(100vw - 3rem));padding:1rem 1.15rem;background:linear-gradient(135deg,rgba(213,239,238,.34),rgba(99,178,188,.12));border:1px solid rgba(240,216,108,.72);border-left:5px solid var(--coral);backdrop-filter:blur(16px) saturate(1.25);box-shadow:0 15px 42px rgba(3,21,29,.17)}.location-notification span{display:block;color:#fff2af;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}.location-notification strong{display:block;margin-top:.38rem;color:#fffdf2;font:600 clamp(.9rem,1.4vw,1.12rem) "DM Mono",monospace;letter-spacing:-.03em}.location-notification em{display:block;margin-top:.48rem;color:#def1eb;font:400 .65rem "DM Mono",monospace;letter-spacing:.08em;font-style:normal}.telemetry-top{display:flex;justify-content:space-between;color:var(--yellow);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}.date-line{margin:.55rem 0;color:#fff;font-size:.72rem}.readings{display:flex;gap:1rem;color:#b7c5c3;font-size:.52rem;text-transform:uppercase;letter-spacing:.09em}.readings b{display:block;margin-top:.2rem;color:var(--paper);font-size:.66rem;font-weight:500;letter-spacing:0}.journey-timeline{position:fixed;z-index:4;left:50%;bottom:1.45rem;transform:translateX(-50%);display:flex;align-items:center;gap:.75rem;width:min(39rem,45vw);padding:.65rem .85rem;background:rgba(8,32,42,.4);border:1px solid rgba(231,228,216,.26);backdrop-filter:blur(8px)}.journey-timeline span{color:#f2cc5c;font-size:.55rem;letter-spacing:.08em}.journey-timeline input{width:100%;accent-color:var(--coral);cursor:ew-resize}@media(max-width:850px){.journey-timeline{width:calc(100vw - 3rem);bottom:6rem}}
.flight-controls{position:fixed;z-index:4;right:clamp(1.5rem,5vw,5rem);bottom:clamp(1.5rem,5vh,3rem);width:13.5rem;padding:.85rem;background:rgba(6,29,40,.76);border:1px solid rgba(242,204,92,.68);backdrop-filter:blur(12px);box-shadow:0 15px 45px rgba(0,0,0,.25)}.control-group{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(231,228,216,.18);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:#c5d0ca}.control-group div{display:flex;gap:.35rem}.control-group button,.next-point{border:1px solid rgba(242,204,92,.65);background:transparent;color:var(--paper);font:500 .8rem "DM Mono",monospace;cursor:pointer;transition:background .16s,color .16s}.control-group button{width:1.7rem;height:1.7rem}.control-group button:hover,.control-group button.active,.next-point:hover{background:var(--coral);color:var(--ink);border-color:var(--coral)}.next-point{width:100%;margin-top:.8rem;padding:.63rem .55rem;font-size:.61rem;letter-spacing:.06em;text-transform:uppercase}.next-point b{float:right;font-size:.9rem}.north-up{display:flex;align-items:center;gap:.45rem;margin-top:.8rem;font-size:.58rem;letter-spacing:.07em;text-transform:uppercase;color:#c5d0ca}.north-up input{accent-color:var(--coral)}.credit{position:fixed;z-index:3;right:1.2rem;top:1.2rem;color:rgba(231,228,216,.5);font-size:.46rem;letter-spacing:.1em;writing-mode:vertical-rl}
.title-card,.telemetry,.flight-controls,.credit{transform:translateZ(0);will-change:transform}.vessel{width:29px;height:44px;position:relative;pointer-events:none;filter:drop-shadow(0 5px 6px rgba(0,0,0,.42))}.hull{position:absolute;left:8px;bottom:2px;width:14px;height:29px;border-radius:70% 70% 45% 45%;background:#ff7049;border:2px solid #89351f}.sail{position:absolute;left:13px;top:1px;border-left:1px solid #f8f0d5;border-bottom:23px solid #f8f0d5;border-right:11px solid transparent;filter:drop-shadow(0 1px 1px #234)}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(max-width:650px){.title-card{top:.85rem;left:.85rem;width:11.5rem}.title-card .eyebrow{font-size:.45rem;gap:.4rem;letter-spacing:.11em}.title-card .eyebrow i{width:1.25rem}.title-card h1{font-size:2.1rem;line-height:.88;margin:.35rem 0}.title-card .instruction{display:none}.title-card .archive-link{margin-top:.25rem;font-size:.54rem}.telemetry{left:.85rem;bottom:5.25rem;width:9.6rem;padding:.35rem 0}.telemetry-top{font-size:.45rem;letter-spacing:.06em}.date-line{margin:.34rem 0;font-size:.57rem;line-height:1.45}.readings{gap:.43rem;font-size:.42rem;letter-spacing:.03em}.readings b{font-size:.55rem}.journey-timeline{left:.75rem;right:.75rem;bottom:.7rem;transform:none;width:auto;padding:.45rem .55rem;gap:.45rem}.journey-timeline span{font-size:.46rem}.flight-controls{right:.75rem;bottom:4.35rem;width:10.3rem;padding:.55rem}.control-group{padding:.28rem 0;font-size:.5rem}.control-group button{width:1.55rem;height:1.55rem}.next-point{margin-top:.5rem;padding:.5rem;font-size:.53rem}.north-up{margin-top:.5rem;font-size:.49rem}.location-notification{right:.75rem;left:.75rem;top:auto;bottom:12rem;width:auto;padding:.75rem .85rem}.location-notification strong{font-size:.78rem}.location-notification em{font-size:.57rem}.credit{display:none}.splash{padding:2.2rem}.splash h1{font-size:4rem}.splash p:not(.eyebrow){font-size:.74rem;line-height:1.7}}
