:root{--ink:#eef4ff;--muted:#aabbd1;--mint:#58e4c1;--blue:#69a9ff;--amber:#ffc978;--red:#ff839c}*{box-sizing:border-box}body{margin:0;background:#0b1c30;color:var(--ink);font:22px/1.35 Arial,sans-serif}#app{padding:18px 23px;min-height:100vh;display:flex;flex-direction:column}.topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.08em}.topline button{font-size:14px;padding:5px 12px}.stage{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:28px;min-height:220px;align-items:center}.scene{min-height:210px;position:relative;display:flex;align-items:center;justify-content:center}.scene svg{width:100%;height:230px;overflow:visible}.controls{display:flex;flex-wrap:wrap;gap:9px;margin:13px 0}.controls button,button,select{font:19px Arial;color:var(--ink);background:#132c43;border:1px solid #42617d;border-radius:7px;padding:10px 15px;cursor:pointer}button:hover,button:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:2px}button.active{background:#17443e;border-color:var(--mint)}button:disabled{opacity:.5;cursor:default}.readout{font-size:24px;margin:10px 0 0;min-height:65px;color:var(--mint)}.hint{font-size:15px;color:var(--muted);margin:5px 0 0}.big{font-size:65px;font-weight:bold;letter-spacing:-.05em;color:var(--mint)}.bubble{background:#153447;border:1px solid #355c73;padding:16px 22px;border-radius:20px;max-width:490px;font-size:25px;position:relative}.bubble:after{content:'';position:absolute;bottom:-15px;left:30px;border:15px solid transparent;border-left-color:#355c73;border-top-width:0}.scene .stack{display:flex;flex-direction:column;gap:12px;width:100%}.post{width:94%;height:220px;position:relative;background:linear-gradient(150deg,#183c53,#152334);border:1px solid #42617d;border-radius:12px;padding:18px;overflow:hidden}.post .photo{height:110px;display:flex;align-items:center;justify-content:center;font-size:44px;border-bottom:1px solid #42617d;color:var(--mint)}.post .clue{position:absolute;font-size:16px;padding:4px 7px;background:#203b4e;border:1px solid var(--amber);color:var(--amber);transition:opacity .5s,transform .5s}.off{opacity:.08;transform:translateY(12px)}.post .c1{top:22px;left:18px}.post .c2{top:93px;right:15px}.post .c3{bottom:22px;left:28px}.pulse{animation:pulse 3s infinite}.trace{stroke-dasharray:7 6;animation:trace 3s linear infinite}.packet{animation:packet 4s ease-in-out infinite}.appear{animation:appear .6s both}.wave{animation:wave 1.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}.url{font:24px/1.7 monospace;overflow-wrap:anywhere;max-width:100%;padding:16px;background:#102a40;border-bottom:2px solid var(--blue)}.url mark{background:#58e4c1;color:#081322;padding:3px}.feed{width:85%;height:235px;overflow:hidden;display:flex;flex-direction:column;gap:9px;mask-image:linear-gradient(black 80%,transparent)}.feed>div{background:#15364c;border-left:4px solid var(--blue);padding:12px 20px;font-size:20px;animation:appear .6s both}.feed>div.same{border-color:var(--mint)}.badge{display:inline-block;color:var(--amber);font-size:16px;margin-bottom:8px}.choices{display:flex;flex-direction:column;gap:8px}.choices button{text-align:left}.meter{height:12px;background:#233c51;margin:15px 0;max-width:450px}.meter>div{height:100%;background:var(--mint);transition:width .6s}.full{grid-template-columns:1fr}.mission-title{font-size:27px;margin:0 0 12px}.numbers{display:flex;gap:30px}.numbers span{font-size:16px;display:block;color:var(--muted)}html.paused *,html.paused *:before,html.paused *:after{animation-play-state:paused!important}html.paused *{transition:none!important}.error{padding:30px;color:var(--amber)}@keyframes pulse{50%{opacity:.4}}@keyframes trace{to{stroke-dashoffset:-65}}@keyframes packet{0%,15%{transform:translateX(0);opacity:0}25%{opacity:1}75%{transform:translateX(230px);opacity:1}90%,100%{transform:translateX(230px);opacity:0}}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes wave{50%{transform:scaleY(.2)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:600px){body{font-size:17px}.stage{gap:15px;grid-template-columns:1fr}.scene{min-height:150px}.scene svg{height:170px}.readout{font-size:20px}#app{padding:12px}.controls button,button,select{font-size:16px}.topline{font-size:11px}.big{font-size:48px}}

.traveler{animation:travel 3.5s linear infinite}@keyframes travel{0%{transform:translate(0,0);opacity:0}12%{opacity:1}90%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
