:root{color-scheme:dark;--accent:#69f4dc;--secondary:#5966ff}*{box-sizing:border-box}body{margin:0;background:#070b17;color:#f1f5ff;font:15px/1.6 system-ui,sans-serif}body:before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 70% 10%,#49317033,transparent 55%),radial-gradient(ellipse at 5% 70%,#1f687322,transparent 50%)}header,main,footer{max-width:1400px;margin:auto;padding:24px}header{display:flex;gap:20px;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff12}a{color:var(--accent);text-decoration:none}.tag,.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800}.tag{color:#a4b4cc}.intro{margin:30px 0 32px;max-width:780px}h1{font-size:clamp(42px,7vw,94px);line-height:.94;letter-spacing:-.065em;margin:20px 0}h1 em{font-style:normal;color:var(--accent)}.intro>p:last-child{max-width:610px;color:#aebcd3}h2{font-size:25px;letter-spacing:-.04em;margin:0 0 12px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.viewport{position:relative;height:600px;border:1px solid #ffffff21;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#121b30,#080b18);box-shadow:0 30px 100px #0006}#canvas{height:100%;width:100%;touch-action:none}canvas{display:block;max-width:100%}.viewport-label{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.14em;pointer-events:none}.hint{position:absolute;bottom:22px;left:24px;color:#aab8cf;font-size:12px;pointer-events:none}aside{border:1px solid #ffffff19;border-radius:24px;background:#10182bbd;padding:24px}.muted,.routes p{color:#a7b6cf;font-size:13px}label{display:block;font-size:12px;font-weight:650;margin-top:15px}select,button,.upload{border:1px solid #ffffff25;border-radius:12px;background:#18233a;color:#f1f5ff;padding:12px;min-height:44px}select{display:block;width:100%;margin-top:6px;font:inherit}button{font:650 12px system-ui;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#243a51;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.row{display:flex;gap:20px}.check{display:flex;gap:8px;align-items:center;min-height:44px}.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.upload{display:block;color:var(--accent)}input[type=file]{width:100%;margin-top:8px;font-size:11px}#status{font-size:12px;color:var(--accent);overflow-wrap:anywhere;min-height:40px}.routes{display:grid;grid-template-columns:1fr 1.4fr;gap:36px;margin:48px 0}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cards a{border:1px solid #ffffff1c;border-radius:18px;padding:20px;background:#11192a}.cards b,.cards span{display:block}.cards span{color:#a7b6cf;font-size:12px;margin-top:6px}footer{font-size:11px;color:#8e9db6;border-top:1px solid #ffffff15} @media(max-width:850px){.workspace,.routes{grid-template-columns:1fr}.viewport{height:440px}aside{padding:20px}.tag{max-width:160px;text-align:right}}@media(max-width:450px){main,header,footer{padding:16px}.viewport{height:360px}.cards{grid-template-columns:1fr}.viewport-label{left:16px;right:16px}.intro{margin-top:24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}