:root{
  --ink:#333D44; --ink-2:#5B707D; --paper:#FFFFFF; --mist:#F2F5F7; --line:#D3D9E0;
  --leaf:#58BA51; --leaf-ink:#2A7632; --crimson:#A6192E; --accent:#58BA51;
  --display:"Grandstander","Comfortaa",ui-rounded,system-ui,sans-serif;
  --body:"Lato",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body)}
button{font:inherit}

/* ---------- viewer ---------- */
.om{position:relative;width:100%;max-width:100%}
.om-frame{position:relative;width:100%;aspect-ratio:2048/1266;background:#fff;overflow:hidden;border-radius:inherit}
.om-svg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.om .fade{opacity:0;transition:opacity 1s linear}
.om .fade.on{opacity:1}
.om .L-icons{transition:opacity 1s linear}
.om .L-icons.off{opacity:0}
.om .L-data.on{transition:opacity .6s ease-out}
.om .L-playhead{transition:opacity .6s ease-out, transform .08s linear}
.om .title-text{opacity:0;transition:opacity 1s linear}
.om .title-text.on{opacity:1}
.om .orb{fill-opacity:.38;cursor:pointer;outline:none;transition:stroke-width .15s}
.om .orb:hover,.om .orb:focus-visible{stroke:#333D44;stroke-width:4;stroke-opacity:.55}
.om[data-mode="kiosk"] .orb{cursor:default}
.om .icon{transition:opacity .4s ease}
.om .icon.covered{opacity:0}
.om .smoke{animation:puff 5s ease-in-out infinite}
@keyframes puff{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-6px);opacity:.45}}
@media (prefers-reduced-motion:reduce){.om .smoke{animation:none}.om .fade,.om .L-icons,.om .title-text{transition-duration:.2s}}

.om-ui{position:absolute;inset:0;pointer-events:none}
.om-ui>*{pointer-events:auto}
.om[data-mode="kiosk"] .om-ui{display:none}
.om-tabs{position:absolute;left:52.5%;top:9.2%;display:flex;gap:.6%;}
.om-tabs button,.om-scales button{font-family:var(--display);font-weight:700;font-size:clamp(10px,1.05vw,17px);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:8px;padding:.25em .8em;cursor:pointer;transform:rotate(-1deg);box-shadow:3px -3px 0 var(--line)}
.om-tabs button:nth-child(2){transform:rotate(1.2deg)}
.om-tabs button[aria-selected="true"],.om-scales button[aria-pressed="true"]{background:var(--line);box-shadow:4px -4px 0 #fff, 4px -4px 0 2px var(--ink)}
.om-tabs button:focus-visible,.om-scales button:focus-visible,.om-play:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.om-scales{position:absolute;right:1.4%;top:9.6%;display:flex;gap:.4em}
.om-scales button{font-size:clamp(9px,.85vw,14px);padding:.15em .6em;border-width:1.5px;box-shadow:2px -2px 0 var(--line)}
.om-play{position:absolute;left:.6%;bottom:1.1%;width:3.6%;aspect-ratio:1;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:clamp(9px,1vw,16px);cursor:pointer;display:grid;place-items:center;padding:0}
.om-scrub{position:absolute;left:4.8%;width:89.1%;bottom:.6%;height:4.6%;opacity:0;cursor:ew-resize;margin:0}
.om-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ---------- app chrome (pages) ---------- */
.bar{display:flex;align-items:center;gap:16px;padding:12px 22px;border-bottom:1px solid #E6EBEE;background:#fff;position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:"Comfortaa",sans-serif;font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand em{font-style:normal;color:var(--leaf)}
.brand img{width:34px;height:34px}
.bar nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bar nav a{font-family:"Comfortaa",sans-serif;font-weight:700;font-size:14px;color:var(--ink);text-decoration:none;padding:8px 12px;border-radius:8px}
.bar nav a:hover,.bar nav a[aria-current]{background:var(--mist)}
.bar nav a.cta{background:var(--leaf);color:#0D220E}
.wrap{max-width:1320px;margin:0 auto;padding:0 22px}
.viewer-page .om{margin:18px auto 0;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 20px 50px -30px rgba(21,36,42,.45);max-width:1320px}
.meta{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin:18px 0 40px}
.meta h1{font-family:"Comfortaa",sans-serif;font-size:clamp(22px,2.6vw,32px);margin:0 0 6px;letter-spacing:-.02em}
.meta p{margin:0;color:#4A5A62;max-width:60em;line-height:1.55}
.meta .actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:"Comfortaa",sans-serif;font-weight:700;font-size:14px;text-decoration:none;border-radius:9px;padding:10px 14px;border:2px solid var(--ink);color:var(--ink);background:#fff;cursor:pointer}
.btn.primary{background:var(--leaf);border-color:var(--leaf);color:#0D220E}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--mist);color:var(--ink-2)}
body.embed .bar,body.embed .meta,body.kiosk .bar,body.kiosk .meta{display:none}
body.embed .om,body.kiosk .om{margin:0;border-radius:0;box-shadow:none;max-width:none}
body.kiosk{background:#fff;overflow:hidden}
body.kiosk .om{height:100vh;display:grid;place-items:center}
body.kiosk .om-frame{width:min(100vw,calc(100vh*2048/1266))}
@media (max-width:720px){
  .meta{grid-template-columns:1fr}
  .bar{padding:10px 12px;gap:8px}.brand{font-size:15px;gap:7px}.brand img{width:28px;height:28px}.bar nav{gap:2px;flex-wrap:nowrap}.bar nav a{padding:6px 7px;font-size:12.5px;white-space:nowrap}
  .wrap{padding:0 12px}
  /* phones: tabs and time spans move under the map so they never cover the title */
  .om:not([data-mode="kiosk"]) .om-frame{overflow:visible;margin-bottom:44px}
  .om:not([data-mode="kiosk"]) .om-svg{border-radius:inherit}
  .om-tabs{top:calc(100% + 8px);left:0;gap:6px}
  .om-scales{top:calc(100% + 8px);right:0;gap:4px}
  .om-tabs button{font-size:13px;transform:none}.om-scales button{font-size:12px;transform:none}
  .om-play{width:7%}
}
.om .orb.nodata{stroke:#7F9099;stroke-width:3.5;stroke-dasharray:7 6;stroke-opacity:.9;fill-opacity:.22}
/* zoom in on one place (John, GLSC check-in 9 Sep 2026) */
.om .L-world{transition:transform 1.3s cubic-bezier(.45,0,.2,1)}
.om .L-focus{opacity:0;transition:opacity .5s ease;pointer-events:none}
.om .L-focus.on{opacity:1;transition-delay:.7s}
.om .L-data,.om .L-timeline{transition:opacity .4s}
.om[data-focus] .L-data,.om[data-focus] .L-timeline,.om[data-focus] .L-playhead{opacity:0!important}
.om[data-focus] .om-play,.om[data-focus] .om-scrub,.om[data-focus] .om-scales{visibility:hidden}
.om .orb.dim{opacity:.2;transition:opacity .6s}
.om .orb.target{stroke:#333D44;stroke-width:3;stroke-opacity:.8;fill-opacity:.55}
.om .compass{transition:opacity .4s}.om[data-focus] .compass{opacity:0}
.om-focus-x{position:absolute;left:1.4%;top:2%;font-family:var(--display);font-weight:700;font-size:clamp(11px,1vw,16px);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:9px;padding:.35em .8em;cursor:pointer;box-shadow:3px -3px 0 var(--line)}
.om-focus-x:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.om .L-world{transition-duration:.2s}}

/* timeline and clock are opt-in (John: the timestamp is noise) */
.om[data-time="off"] .L-timeline,.om[data-time="off"] .L-playhead,.om[data-time="off"] .t-clockbox,
.om[data-time="off"] .om-play,.om[data-time="off"] .om-scrub,.om[data-time="off"] .om-scales{display:none}