@font-face{font-family:Montserrat;src:url('/fonts/montserrat-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Montserrat;src:url('/fonts/montserrat-semibold.ttf') format('truetype');font-weight:600;font-display:swap}@font-face{font-family:Gotham;src:url('/fonts/gotham-bold.otf') format('opentype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Montserrat,Arial,sans-serif;background:#F6F8FB;color:#062B66}body{height:100dvh;display:grid;grid-template-rows:auto 1fr auto}header{display:flex;align-items:center;gap:28px;padding:15px 26px;background:#ffffff;border-bottom:1px solid #d7e1ec}header a{color:inherit;text-decoration:none;font-size:14px}header div{flex:1}h1{font-size:21px;margin:3px 0 0;font-weight:500}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:700}button,select{font:inherit;border:1px solid #d7e1ec;border-radius:5px;background:#fff;color:#062B66;padding:11px 14px;min-height:44px;cursor:pointer}button:hover{background:#e8f1fa}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #38AEEA;outline-offset:2px}button:disabled,select:disabled{opacity:.45;cursor:default}#stage{position:relative;min-height:200px;overflow:hidden;background:linear-gradient(#d4e3e9,#ede8dc)}#canvas{display:block;width:100%;height:100%;touch-action:none}#welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:linear-gradient(140deg,#e8ede3f5,#f6f0e1ed)}#welcome h2{font-family:Gotham,Montserrat,sans-serif;font-weight:400;font-size:clamp(30px,5vw,58px);max-width:700px;margin:15px 0}#welcome p{max-width:500px;line-height:1.5}#load{background:#062B66;color:white;margin:18px 0;padding:16px 25px}#size{font-size:12px;color:#5F6B7A}#status{font-size:13px;min-height:20px}#badge{position:absolute;top:15px;left:20px;font-size:11px;background:#ffffffdb;padding:7px 11px;border-radius:3px;pointer-events:none}footer{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:14px 24px;background:#ffffff}footer label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:grid;gap:5px}select{max-width:280px;font-size:14px;letter-spacing:normal;text-transform:none}#help{font-size:12px;margin:0 0 13px auto;color:#5F6B7A;max-width:290px}#touch{position:absolute;bottom:20px;right:20px;gap:5px}#touch:not([hidden]){display:flex}#touch button{background:#ffffffd9;width:47px;user-select:none;touch-action:none}.walking #canvas{cursor:grab}body.recording header,body.recording footer,body.recording #badge,body.recording #touch{display:none}body.recording{display:block}body.recording #stage{width:1080px;height:1920px}@media(max-width:650px){header{padding:12px 15px;gap:15px}h1{font-size:18px}.eyebrow{font-size:9px}footer{padding:10px 12px;gap:7px}footer label{flex:1;min-width:44%}select{width:100%;max-width:none;font-size:13px}footer button{font-size:12px;padding:8px 12px}#help{font-size:10px;margin:0;flex:1}#welcome{padding:20px}#welcome p{font-size:14px}#badge{top:10px;left:10px;font-size:10px}}

#timeline{position:absolute;bottom:20px;left:20px;right:20px;background:#ffffffeb;padding:10px 14px;border-radius:5px;align-items:center;gap:15px}#timeline:not([hidden]){display:flex}#seek{flex:1;accent-color:#062B66}#elapsed{font-size:12px;white-space:nowrap}

/* Entry and navigation, shared by all projects. */
#welcome{isolation:isolate;background:#062B66;color:white}#poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55}#welcome:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#062B66ed,#062B6640);z-index:-1}.welcome-content{max-width:720px;display:flex;flex-direction:column;align-items:center}#welcome h2{line-height:1.06}#welcome p{margin:8px 0}#welcome #size{color:#ffffff}#welcome .welcome-hint{font-size:13px}#load{font-weight:700;background:#ffffff;color:#062B66;border:0;box-shadow:0 5px 30px #0003;min-height:56px;font-size:17px}#load:hover{background:#e8f1fa}#welcome #status{min-height:20px}body:not(.ready) #badge{display:none}body:not(.ready) footer>:not(:first-child){display:none}body:not(.ready) footer{justify-content:center}body:not(.ready) footer label{min-width:250px}body.ready header h1{font-size:17px}#touch{left:18px;right:auto;bottom:20px;grid-template-columns:repeat(3,52px);grid-template-rows:auto 52px 52px;gap:5px;user-select:none}#touch:not([hidden]){display:grid}#touch span{grid-column:1/4;font-size:11px;background:#fffE;padding:7px;border-radius:5px;text-align:center}#touch button{width:52px;height:52px;border-radius:12px;font-size:23px;font-weight:bold;box-shadow:0 3px 12px #0002}#touch button:active{background:#062B66;color:white}#touch [data-key="ArrowUp"]{grid-column:2;grid-row:2}#touch [data-key="ArrowLeft"]{grid-column:1;grid-row:3}#touch [data-key="ArrowDown"]{grid-column:2;grid-row:3}#touch [data-key="ArrowRight"]{grid-column:3;grid-row:3}#look-hint{position:absolute;bottom:24px;right:18px;background:#fffE;padding:10px;border-radius:7px;font-size:12px;max-width:150px;pointer-events:none}#guide{background:#062B66;color:white}#timeline{bottom:12px}dialog{max-width:460px;width:calc(100% - 36px);border:0;border-radius:16px;padding:26px;color:#062B66;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#062B66aa}dialog h2{margin-top:0;font-family:Gotham,Montserrat,sans-serif;font-weight:400;font-size:28px}dialog p{line-height:1.6;font-size:14px}dialog .note{font-size:12px;color:#5F6B7A}#close-help{background:#062B66;color:white;width:100%}#instructions{min-width:44px}footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}#canvas:focus-visible{outline:3px solid #38AEEA;outline-offset:-3px}
@media(max-width:650px){header{gap:10px;padding:10px 12px}header .eyebrow{font-size:8px}header h1{font-size:16px}body.ready header h1{font-size:14px}header a{font-size:12px}#welcome h2{font-size:36px}#welcome{padding:22px}#welcome .welcome-hint{display:none}footer{gap:6px}footer label{min-width:0;flex:1}footer button{flex:1;font-size:12px;padding:9px 6px;white-space:nowrap}#instructions{flex:0 0 44px}#instructions span{display:none}#help{flex-basis:100%;font-size:11px;line-height:1.3;margin:3px 0}#touch{left:12px;bottom:14px}#look-hint{right:12px;bottom:25px;max-width:120px}#badge{font-size:9px}body:not(.ready) footer label{flex:initial;width:100%;min-width:0}body:not(.ready) #help{display:none}}
@media(max-height:500px){header{padding:5px 12px}header .eyebrow{display:none}footer{padding:6px 12px}footer label{min-width:100px}#help{display:none}#welcome h2{font-size:30px;margin:6px}#welcome p{font-size:12px;margin:3px}#load{margin:8px;min-height:44px;padding:10px 18px}#stage{min-height:100px}}
@media(max-width:650px){footer label{flex:1 0 calc(50% - 6px);width:calc(50% - 6px)}footer select{min-width:0}footer button{flex:1 0 auto}footer #instructions{flex:0 0 44px}body:not(.ready) footer label{flex:1 0 100%}}