:root{color-scheme:dark;font-family:'Nunito',system-ui,sans-serif;color:#f5ead0;background:#0b1e31}*{box-sizing:border-box}body{margin:0;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}button,select{font:inherit;font-weight:800;color:inherit;background:#1c425e;border:2px solid #52758b;border-radius:12px;padding:9px 12px;min-height:44px;cursor:pointer}button:disabled{opacity:.45;cursor:default}button:hover:enabled{border-color:#f3cc6a}button:active:enabled{transform:scale(.96)}button[aria-pressed=true]{border-color:#ffdb79;background:#655227}button:focus-visible,select:focus-visible{outline:3px solid #ffe5a0;outline-offset:2px}.primary{background:#f3cd70;color:#14293e;border-color:#ffedb4}#app{max-width:1160px;margin:auto}header{display:flex;gap:12px;align-items:center;flex-wrap:wrap}header img{width:76px;height:76px;object-fit:contain}h1{font-size:clamp(20px,4vw,30px);margin:0}small{color:#98d3dc;letter-spacing:1.5px;font-size:11px}#challenge{margin:3px 0;color:#f3cd70}nav{display:flex;gap:7px;margin-left:auto;flex-wrap:wrap}#hud{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0;background:#14354e;border-radius:12px;padding:11px}#materials{display:flex;gap:6px;flex-wrap:wrap}#notice{min-height:25px;font-size:14px;margin:8px 0;color:#b9e3e3}#viewport{overflow:auto;max-width:100%;height:430px;border:2px solid #52758b;border-radius:16px;background:#102b45;overscroll-behavior:contain;scrollbar-width:thin}#stage{position:relative;height:426px}canvas,#points,#edges{position:absolute;inset:0}canvas{pointer-events:none}#points,#edges{pointer-events:none}#points button{position:absolute;padding:0;width:44px;height:44px;min-height:44px;background:transparent;border:0;transform:translate(-50%,-50%);pointer-events:auto;border-radius:50%;font-size:11px;color:#9cc8ce}#points button::before{content:'';display:block;width:10px;height:10px;background:#cce6e6;border:2px solid #0b243a;border-radius:50%;margin:auto}#points button.anchor::before{width:19px;height:19px;border:3px solid #75e0ea;background:#153d55;box-shadow:0 0 0 2px #75e0ea44}#points button.chosen::before{background:#ffd366;width:18px;height:18px}#points button:focus-visible{outline-offset:-3px}#points button:active{transform:translate(-50%,-50%) scale(.92)}#edges button{position:absolute;height:28px;min-height:28px;padding:0;border:1px dashed #e7aaac;background:#d2696944;border-radius:3px;pointer-events:auto}footer{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}#test,#edit{margin-left:auto}#result{background:#204a5d;border:2px solid #f4d47a;border-radius:16px;text-align:center;margin-top:12px;padding:14px}#result h2{margin:0 0 8px}dialog{width:min(520px,calc(100% - 24px));max-height:92dvh;overflow:auto;border:2px solid #91c9d2;border-radius:20px;background:#14354e;color:inherit;padding:18px}dialog::backdrop{background:#07121ed9}dialog button{margin:4px}.cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}dialog h2{font-size:24px;margin:10px 0}.settings{display:flex;flex-wrap:wrap;gap:12px;padding:14px 0}.settings label{display:flex;align-items:center;gap:7px}input{accent-color:#f3cd70;width:20px;height:20px}dialog p{line-height:1.6}dialog label{display:block}select{max-width:100%}#language{width:100%}#help p{overflow-wrap:anywhere}[hidden]{display:none!important}@media(max-width:600px){body{padding-top:8px}header img{width:56px;height:56px}nav{margin:6px 0 0;width:100%}nav button{flex:1;font-size:13px}#hud{font-size:13px;gap:8px}#materials button{flex:1 1 29%;font-size:13px}#viewport{height:380px}#stage{height:376px}footer button{font-size:13px;padding:8px}#notice{line-height:1.4}#test,#edit{flex:1}}@media(max-height:460px) and (min-width:600px){header img{width:44px;height:44px}h1{font-size:20px}#hud{margin:5px 0;padding:6px}#notice{margin:4px 0}#viewport{height:300px}#stage{height:296px}}@media(prefers-reduced-motion:reduce){button:active{transform:none}}