@font-face{font-family:Roboto;src:url('assets/roboto-400.ttf')}@font-face{font-family:Roboto;src:url('assets/roboto-500.ttf');font-weight:500}@font-face{font-family:Roboto;src:url('assets/roboto-700.ttf');font-weight:700}
:root{--green:#1A433C;--cream:#FCF5CF;--yellow:#F8D849;--blue:#57BEDB;--line:rgba(26,67,60,.18)}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--green);font-family:Roboto,Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}header{height:100px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}header img{width:112px;height:auto}.project-label,.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:500}.status{display:flex;align-items:center;gap:9px;font-size:12px}.status i{width:6px;height:6px;border-radius:50%;background:var(--green)}main{max-width:1500px;margin:auto}.intro{text-align:center;padding:40px 20px 0}.eyebrow{margin:0 0 13px;opacity:.75}h1{font-size:clamp(25px,3vw,38px);font-weight:500;letter-spacing:-.045em;line-height:1.16;margin:0 0 10px}.intro>p:last-child{font-size:15px;margin:0;opacity:.76}.stage{height:clamp(430px,51vh,710px);min-height:430px;position:relative;margin:0 3%;isolation:isolate}.orbit-decoration{position:absolute;width:440px;height:440px;border:1px solid var(--line);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.28;z-index:-1}.orbit-decoration:after{content:"";position:absolute;inset:30px;border:1px solid var(--line);border-radius:50%}#viewer{position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-7px;border-radius:24px}#viewer:active{cursor:grabbing}#viewer canvas{display:block;width:100%;height:100%}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--cream);font-size:18px;gap:10px;pointer-events:none}#loading span{font-size:13px;opacity:.7}#loading[hidden]{display:none}.side-note{position:absolute;top:46%;left:6%;font-size:11px;letter-spacing:.13em;line-height:1.7;opacity:.56;pointer-events:none}.screen-callout{position:absolute;top:40%;right:8%;border:0;background:transparent!important;display:flex;align-items:center;gap:10px;padding:15px 8px;font-size:13px!important;box-shadow:none!important}.callout-dot{height:7px;width:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 6px rgba(26,67,60,.08)}button{font:500 13px Roboto,Arial,sans-serif;min-height:44px;color:var(--green);border:1px solid var(--line);border-radius:50px;background:transparent;padding:11px 19px;cursor:pointer;transition:background .2s,transform .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover{background:rgba(26,67,60,.07)}button:active{transform:scale(.97)}button:focus-visible,#viewer:focus-visible{outline:3px solid var(--green);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}.controls{text-align:center;padding:0 20px 26px}#instructions{display:flex;justify-content:center;align-items:center;gap:11px;font-size:12px;margin:0 0 22px;opacity:.75}svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.button-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.view-buttons{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:28px}.view-buttons button{border:0;min-height:44px;padding:9px 18px}button[aria-pressed=true]{background:var(--green);color:var(--cream)}button.primary{background:var(--yellow);border-color:var(--yellow);padding:12px 23px}.primary:hover{background:#f4d141}.demo-caption{font-size:12px;opacity:.65;margin:18px 0 0}footer{display:flex;justify-content:space-between;margin:0 5%;padding:22px 0;border-top:1px solid var(--line);font-size:11px;gap:20px;opacity:.7}footer span span{padding:0 7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.fallback{text-align:center}.stage.failed #viewer{display:none}
@media(min-height:1050px){.intro{padding-top:65px}.stage{height:58vh}}
@media(max-width:700px){header{height:78px;margin:0 6%}header img{width:97px}.project-label{display:none}.status{font-size:11px}.intro{padding:32px 20px 0}.eyebrow{font-size:10px}.intro>p:last-child{font-size:14px}h1{font-size:28px;max-width:300px;margin:0 auto 10px}.stage{height:420px;min-height:0;margin:0}.side-note{display:none}.screen-callout{top:auto;bottom:5px;right:50%;transform:translateX(50%);font-size:12px!important}.screen-callout:active{transform:translateX(50%) scale(.97)}.orbit-decoration{width:300px;height:300px;top:44%}.controls{padding:14px 16px 26px}.button-row{gap:9px}#instructions{font-size:11px;gap:7px;margin:0 auto 19px;max-width:340px;flex-wrap:wrap}#instructions>span:last-child{display:none}.view-buttons{width:100%;max-width:320px;justify-content:space-evenly;margin:0 auto 1px}.view-buttons button{flex:1}.button-row>button{min-width:146px}.demo-caption{margin-top:16px}footer{padding:20px 0;flex-direction:column;text-align:center;gap:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.mobile-zoom{display:none}@media(max-width:700px){.keyboard-hint,.desktop-zoom{display:none}.mobile-zoom{display:inline}#instructions{line-height:1.5}}
