*{box-sizing:border-box}body{margin:0;background:#10151d;color:#edf2f6;font:14px system-ui,sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header{position:fixed;top:26px;left:28px;pointer-events:none}small{font-size:10px;letter-spacing:1.7px;color:#96b2bf}h1{font-size:28px;margin:8px 0}header p,.note{color:#a3b6c6;font-size:12px}nav{position:fixed;right:22px;top:24px;display:flex;gap:8px}button,select,input,textarea,a{font:inherit}button,select,a{background:#243446;border:1px solid #486074;color:#edf2f6;border-radius:7px;padding:10px 12px;min-height:42px;cursor:pointer}a{text-decoration:none}button:hover,a:hover{background:#355068}button:disabled{opacity:.45;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #7ce7c6}aside{position:fixed;right:22px;top:95px;width:320px;padding:22px;background:#17232ff2;border:1px solid #3d5263;border-radius:12px;max-height:calc(100dvh - 270px);overflow:auto}#annotation p{white-space:pre-wrap;line-height:1.6}#close{float:right;font-size:20px}#explore,#save{background:#246550;width:100%}footer{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#17232ff0;border:1px solid #3d5263;border-radius:12px;padding:12px 16px;max-width:calc(100% - 24px);width:640px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#transport{margin-top:10px}#frame{flex:1;min-width:80px;accent-color:#7ce7c6}#status,#error{font-size:12px;margin:8px 0}#error{color:#ffb4ae}#labels{position:fixed;inset:0;pointer-events:none}.pin{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#102333dd;border-color:#81c8b3;padding:6px 10px;font-size:12px;min-height:34px}.pin:before{content:'●';color:#81e4c2;margin-right:7px}.pin.selected{background:#286954}#editor{width:365px;top:85px;max-height:calc(100dvh - 110px)}#editor label{display:block;margin:9px 0;font-size:12px;color:#a3b6c6}#editor input,#editor textarea,#editor select{display:block;width:100%;background:#0e1923;border:1px solid #486074;border-radius:5px;color:white;padding:7px}#editor .row label{flex:1;min-width:0}#editor .row input{width:100%}#editor .row button{font-size:12px;padding:8px}#resumeEdit{position:fixed;right:22px;top:76px}[hidden]{display:none!important}body.editing footer{left:20px;transform:none;width:calc(100% - 425px);max-width:600px}@media(max-width:720px){header{top:16px;left:14px}h1{font-size:22px}nav{top:16px;right:12px}footer{bottom:0;width:100%;max-width:100%;border-radius:12px 12px 0 0;padding-bottom:max(12px,env(safe-area-inset-bottom))}footer small{display:none}aside{right:12px;top:110px;width:280px;max-height:calc(100dvh - 310px)}button,select{font-size:12px;padding:9px}#editor{width:calc(100% - 24px);max-height:55dvh}body.editing footer{left:0;width:100%}}
/* Dots stay fixed on their model position; captions expand beside, not over, them. */
.pin{width:36px;height:36px;min-height:36px;max-width:none;padding:0;border:0;border-radius:50%;background:transparent;overflow:visible;z-index:1}
.pin:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11px;height:11px;margin:0;border:2px solid #e2fff5;border-radius:50%;background:#65d8b3;box-shadow:0 0 0 4px #102333a6,0 2px 7px #0009}
.pin:hover,.pin.selected{background:transparent}.pin:hover,.pin:focus-visible{z-index:3}.pin.selected:before{background:#fff;box-shadow:0 0 0 5px #65d8b380,0 2px 7px #0009}
.pin-caption{position:absolute;left:calc(50% + 15px);top:50%;transform:translateY(-50%);padding:7px 11px;border:1px solid #81c8b3;border-radius:6px;background:#102333f2;color:#edf2f6;font-size:12px;line-height:1.4;width:max-content;max-width:none;white-space:nowrap;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease}
.pin.caption-left .pin-caption{left:auto;right:calc(50% + 15px)}
.pin:hover .pin-caption,.pin:focus-visible .pin-caption{opacity:1;visibility:visible}
@media(pointer:coarse){.pin{width:44px;height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.pin-caption{transition:none}}
/* Exact logo and palette from pivotal-animations-local-proof-dark. */
body{background:#07090c;color:#f7f7f8;font-family:"Galaxie Polaris","Helvetica Neue",Arial,sans-serif}
.brand-logo{display:block;width:180px;height:auto;margin-bottom:12px}
header p,.note,small,#editor label{color:#a8b0b7}
footer,aside{background:#111820f2;border-color:#ffffff21}
button,select,a{background:#171f28;border-color:#ffffff35;color:#f7f7f8}button:hover,a:hover{background:#272f38}
#explore,#save{background:#8f1842;color:#f7f7f8}#explore:hover,#save:hover{background:#c60651}#frame{accent-color:#ef4050}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-color:#f3716d}
.pin:before{background:#ef4050;border-color:#f7f7f8}.pin.selected:before{box-shadow:0 0 0 5px #c6065166,0 2px 7px #0009}
.pin-caption{background:#111820f5;border-color:#d9466a;color:#f7f7f8}
@media(max-width:720px){.brand-logo{width:140px;margin-bottom:8px}header h1{margin:4px 0}}