/* Exact families and neutral surface tokens used in the Mapshroom workspace. */
@font-face {font-family:'IBM Plex Sans';src:url('/assets/ibm-plex-sans-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face {font-family:'IBM Plex Sans';src:url('/assets/ibm-plex-sans-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face {font-family:'IBM Plex Mono';src:url('/assets/ibm-plex-mono-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
/* The app's wordmark-only subset is only used for Mapshroom. */
@font-face {font-family:'Mapshroom Grotesk';src:url('/assets/space-grotesk-brand.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
:root {
  color-scheme:dark;
  --bg:#000000;--bg-panel:#141414;--bg-panel-soft:#1b1b1b;--bg-panel-raised:#272727;
  --line:#333333;--line-strong:#484848;
  --text:#d4d4d4;--text-bright:#eeeeee;--text-muted:#aaaaaa;--text-dim:#888888;
  --radius-sm:4px;
  font-family:'IBM Plex Sans',sans-serif;font-synthesis:none;background:var(--bg);color:var(--text);
}
* {box-sizing:border-box}
body {margin:0;min-width:280px;background:var(--bg);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,a {-webkit-tap-highlight-color:transparent}
button {font:inherit;cursor:pointer}
a {color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible {outline:2px solid var(--text-bright);outline-offset:4px}
::selection {background:#dedede;color:#171717}
[hidden] {display:none!important}
.shell {width:min(1100px,calc(100% - 64px));margin-inline:auto}
.skip {position:absolute;top:-100px;left:16px;z-index:10;padding:12px;background:var(--text-bright);color:var(--bg)}
.skip:focus {top:8px}
.workspace-toolbar {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:51px;padding:8px 18px;border-bottom:1px solid var(--line);background:var(--bg-panel)}
.toolbar-brand {color:var(--text-bright);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.workspace-toolbar nav {display:flex;align-items:center;gap:7px}
.primary-button,.secondary-button,.looks button {
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:32px;padding:6px 11px;border-radius:var(--radius-sm);border:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:var(--bg-panel-soft);
  transition:border-color 140ms ease,background 140ms ease,color 140ms ease;
}
.primary-button {min-height:44px;padding:12px 22px;color:var(--text-bright);background:var(--bg-panel-raised);border-color:var(--line-strong)}
.primary-button svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}
.primary-button:hover,.secondary-button:hover,.looks button:hover {border-color:#777777;background:#222222;color:var(--text-bright)}
.hero {text-align:center;padding:78px 0 52px}
.brand-lockup {display:flex;justify-content:center;align-items:center;gap:0;margin:0 auto 28px}
.brand-logo {display:block;width:clamp(72px,11vw,138px);aspect-ratio:1;flex:none;margin-left:-14px;margin-right:-9px;animation-duration:1100ms}
.brand-logo .loading-brand-logo-pixels {animation-delay:740ms}
.brand-title-copy {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.loading-brand-lockup .loading-brand-name {color:var(--text-bright)}
.loading-brand-letter:nth-child(1) {--glyph-delay:260ms}
.loading-brand-letter:nth-child(2) {--glyph-delay:325ms}
.loading-brand-letter:nth-child(3) {--glyph-delay:390ms}
.loading-brand-letter:nth-child(4) {--glyph-delay:455ms}
.loading-brand-letter:nth-child(5) {--glyph-delay:520ms}
.loading-brand-letter:nth-child(6) {--glyph-delay:585ms}
.loading-brand-letter:nth-child(7) {--glyph-delay:650ms}
.loading-brand-letter:nth-child(8) {--glyph-delay:715ms}
.loading-brand-letter:nth-child(9) {--glyph-delay:780ms}
.loading-brand-glyph {--glyph-cycle:4200ms}
h1 {margin:0;font-family:'Mapshroom Grotesk','IBM Plex Sans',sans-serif;font-size:clamp(54px,9.2vw,116px);font-weight:500;letter-spacing:-.045em;line-height:1.1;color:var(--text-bright)}
.hero-description {max-width:640px;margin:0 auto;font-size:21px;line-height:1.6;font-weight:400;color:var(--text);text-wrap:pretty}
.hero-detail {max-width:565px;margin:15px auto 27px;font-size:15px;line-height:1.75;color:var(--text-muted);text-wrap:pretty}
.preview-window {overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--bg-panel)}
.preview-window + .preview-window {margin-top:28px}
.preview-toolbar {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;padding:0 17px;border-bottom:1px solid var(--line)}
.preview-toolbar h2 {margin:0;font-size:13px;font-weight:500;color:var(--text-bright)}
.preview-label {color:var(--text-dim);font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.08em}
.artwork {position:relative;height:clamp(280px,48vw,580px);margin:10px;overflow:hidden;background:#000000;border:1px solid #222222}
.artwork-fallback,.artwork canvas {position:absolute;width:100%;height:100%;object-fit:contain;inset:0}
.artwork canvas {opacity:0;transition:opacity .3s}
.artwork.ready canvas {opacity:1}
.artwork.ready .artwork-fallback {visibility:hidden}
.preview-controls {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px 10px}
.looks {display:flex;gap:6px}
.looks button[aria-pressed='true'] {color:var(--text-bright);background:var(--bg-panel-raised);border-color:#777777}
.looks button:disabled,.motion:disabled {opacity:.5;cursor:default}
.motion {width:34px;padding:6px;font-size:13px}
.preview-caption {border-top:1px solid var(--line);margin:0;padding:11px 16px;font-size:11px;color:var(--text-dim)}
#demo-video {display:block;width:100%;max-height:540px;aspect-ratio:1.6;object-fit:contain;background:#000000}
.footer {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-block:26px 34px;color:var(--text-dim);font-size:11px}
.footer>span {font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.footer nav {display:flex;gap:24px}
.footer a:hover {color:var(--text-bright)}
.not-found {padding-block:90px;text-align:center}
.not-found h1 {font-family:'IBM Plex Sans',sans-serif;font-size:40px}
.not-found p {color:var(--text-muted);margin-bottom:26px}
@media(max-width:760px) {
  .shell {width:calc(100% - 32px)}
  .hero {padding-top:55px;padding-bottom:36px}
  .brand-logo {width:12vw;min-width:44px;margin-left:-5px;margin-right:-3px}
  h1 {font-size:clamp(39px,10.5vw,78px)}
  .hero-description {max-width:535px;font-size:18px;padding-inline:10px}
  .hero-detail {font-size:14px;max-width:470px;padding-inline:13px}
  .artwork {height:auto;aspect-ratio:1594/987}
  .preview-window + .preview-window {margin-top:20px}
  .footer nav {gap:15px}
}
@media(max-width:440px) {
  .workspace-toolbar {padding-inline:12px}
  .tutorial-link {display:none}
  .secondary-button {font-size:9px}
  .brand-lockup {margin-bottom:24px}
  .hero-description {font-size:17px;line-height:1.65}
  .hero-detail {font-size:13px}
  .preview-toolbar {padding-inline:12px;gap:8px}
  .preview-label {display:none}
  .looks button {padding-inline:9px;font-size:9px;min-height:36px}
  .motion {min-height:36px}
  .preview-controls {gap:8px}
  .footer {align-items:flex-start;gap:18px;font-size:10px}
  .footer>span {display:none}
  .footer nav {justify-content:space-between;width:100%}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important}}