[hidden]{display:none!important}*{box-sizing:border-box}body{margin:0;background:#f6f7f4;color:#243640;font:16px/1.55 system-ui,sans-serif}header{padding:22px 5vw;border-bottom:1px solid #d6dfdd;display:flex;justify-content:space-between;gap:20px}header b{letter-spacing:.22em}header span{font-size:13px;color:#5b707b}main{max-width:1180px;margin:auto;padding:34px 24px}.eyebrow{font-size:11px;letter-spacing:.2em;color:#576b98;font-weight:800}h1{font:500 clamp(34px,4.5vw,54px)/1.08 Georgia,serif;margin:14px 0 20px}.intro p:last-child{max-width:750px}h2{font:500 26px/1.2 Georgia,serif}nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:26px 0}button,select,input{font:inherit;border:1px solid #a5b4be;background:#fff;color:#263d49;border-radius:8px;padding:10px 13px;min-height:44px}button,select{cursor:pointer}button:hover{background:#eaf0f6}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c68c46;outline-offset:2px}.lab{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.field,aside{background:#fff;border:1px solid #d5dfe0;border-radius:16px;padding:22px}.fieldhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.fieldhead h2{margin:0}.fieldhead span{font-size:12px;background:#edf1f8;border-radius:20px;padding:5px 10px}.field>p{font-size:14px}#plot{position:relative;aspect-ratio:600/420;border:1px solid #cbd7dc;background:linear-gradient(90deg,#dee6e944 1px,transparent 1px),linear-gradient(#dee6e944 1px,transparent 1px);background-size:10% 10%;border-radius:12px;overflow:hidden;cursor:crosshair}#drawing{display:block;width:100%;height:100%}.marker{position:absolute;transform:translate(-50%,-50%);width:30px;height:50px;background-image:url('beacons.webp');background-size:300% 100%;border:2px solid #fff;border-radius:12px;pointer-events:none;box-shadow:0 2px 5px #22334433}.marker b{position:absolute;bottom:-16px;left:8px;font-size:12px;background:white;border-radius:10px;padding:0 3px}.plothelp{color:#60717c}#beacons{display:flex;gap:10px}.beacon{flex:1;min-width:0;padding:8px;border:2px solid #d6dfe6;font-size:13px}.beacon[aria-pressed=true]{border-color:#385b9e;background:#edf2fc}.beacon span{display:block;width:50px;height:90px;margin-left:auto;margin-right:auto;background-image:url('beacons.webp');background-size:300% 100%;margin-bottom:5px}.beacon strong,.beacon small{display:block}aside h2{margin:8px 0 18px}dl{margin:0}dt{font-size:13px;color:#5d7180}dd{margin:0 0 14px;font-size:29px;font-weight:750}.explain{font-size:13px;color:#60717c}.coordinates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.coordinates label{font-size:13px}.coordinates input{width:100%;margin-top:4px}.coordinates button{grid-column:1/-1}aside>button{width:100%;margin:5px 0}.primary{background:#315782;color:#fff;font-weight:700}.primary:hover{background:#426b98}#feedback{font-size:14px;font-weight:650}#success{background:#e9f2e7;padding:15px;border-radius:12px;margin-top:16px}#success h2{font-size:23px}.history{margin:28px 0}#history{font-size:14px;line-height:1.8}details{padding:18px;border:1px solid #d3dddd;border-radius:12px}summary{font-weight:700;cursor:pointer}details p{font-size:14px}footer{margin:24px 0;font-size:13px;color:#5b6f7b}a{color:#315782}@media(max-width:750px){header span{display:none}main{padding:24px 14px}.lab{grid-template-columns:1fr;gap:16px}.field,aside{padding:16px}h1{font-size:36px}nav label{width:100%}.fieldhead{align-items:start}.fieldhead h2{font-size:23px}.fieldhead span{max-width:100px}#beacons{gap:6px}.beacon{padding:6px;font-size:12px}.beacon span{height:80px;width:44px}aside{display:block}.marker{width:23px;height:36px}.coordinates{grid-template-columns:1fr 1fr}.history{font-size:14px}}