:root {
  color-scheme: dark;
  --surface-page:#07100f;--surface-panel:#0c1917;--surface-raised:#13241f;
  --text-primary:#f3f7f5;--text-secondary:#b1c2bc;--text-tertiary:#90a69e;
  --border-subtle:#263a33;--border-strong:#577369;--action-primary:#8bdbc4;
  --feedback-warning:#f5c86d;--feedback-danger:#ff9990;
  --font-ui:Inter,Aptos,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"SFMono-Regular",Consolas,monospace;
  --radius-small:3px;--duration-fast:160ms;
  --space-page:32px;--space-panel:28px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-ui)}
button,select,summary,a{-webkit-tap-highlight-color:transparent}
button,select{font:inherit;color:inherit}
button,summary,select{cursor:pointer}
button{border:1px solid var(--border-subtle);background:transparent;border-radius:var(--radius-small);transition:background var(--duration-fast),color var(--duration-fast)}
button:hover,summary:hover{background:var(--surface-raised)}
button:active{background:var(--border-subtle)}
button:disabled,select:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:2px solid var(--action-primary);outline-offset:4px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
p,h1{margin:0}
.skip-link{position:fixed;left:20px;top:-80px;z-index:50;padding:14px;background:var(--text-primary);color:var(--surface-page)}
.skip-link:focus{top:12px}
.app-shell{height:100dvh;min-height:640px;display:grid;grid-template-rows:92px minmax(0,1fr)88px 50px;max-width:2560px;margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--space-page);border-bottom:1px solid var(--border-subtle)}
.brand-lockup{display:flex;align-items:center;gap:18px}
.amsys-logo{width:101px;height:48px;object-fit:contain}
.brand-divider{height:32px;width:1px;background:var(--border-strong)}
.seyond-logo{height:40px;width:43px;object-fit:contain}
.seyond-name{font-size:20px;letter-spacing:.09em;font-weight:600}
.seyond-name span{display:block;font-size:10px;letter-spacing:.01em;font-weight:400;color:var(--text-secondary);margin-top:3px}
.event-mark{text-align:center}
.event-mark>span{font-size:9px;letter-spacing:.15em;color:var(--text-secondary)}
.event-mark>strong{display:block;font-size:19px;letter-spacing:-.02em;margin-top:5px;font-weight:500}
.event-mark strong span{color:var(--action-primary)}
.header-actions{display:flex;gap:10px;align-items:center}
#tour{padding:0 16px;min-height:42px;font-size:12px}
#tour span{margin-left:12px;color:var(--action-primary)}
#tour[aria-pressed=true]{border-color:var(--action-primary);color:var(--action-primary)}
.square-button,summary{display:grid;place-items:center;width:42px;height:42px}
.tools{position:relative}
summary{list-style:none;border:1px solid var(--border-subtle);border-radius:var(--radius-small)}
summary::-webkit-details-marker{display:none}
.tools nav{position:absolute;right:0;top:50px;width:210px;padding:8px;background:var(--surface-panel);border:1px solid var(--border-strong);z-index:30}
.tools a{display:block;padding:12px;color:var(--text-secondary);font-size:13px;text-decoration:none}
.tools a:hover{color:var(--text-primary);background:var(--surface-raised)}
.experience{min-height:0;display:grid;grid-template-columns:minmax(300px,29%) minmax(0,1fr)}
.story-panel{padding:36px var(--space-page) 24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;border-right:1px solid var(--border-subtle);overflow:auto}
.product-label{font-size:11px;letter-spacing:.18em;color:var(--action-primary);font-weight:600}
.product-label span{color:var(--text-secondary);font-size:9px;letter-spacing:.12em;margin-left:12px;font-weight:400}
h1{font-size:clamp(40px,4.1vw,70px);font-weight:500;line-height:1.04;letter-spacing:-.052em;max-width:12ch;margin:23px 0 20px;text-wrap:balance}
#scene-summary{color:var(--text-secondary);font-size:15px;line-height:1.65;max-width:36ch}
.scene-invitation{margin-top:24px;display:flex;align-items:flex-start;gap:10px;color:var(--action-primary);font-size:12px;line-height:1.5}
.invitation-line{flex:0 0 20px;height:1px;background:var(--action-primary);margin-top:9px}
.eyebrow{font-size:9px;letter-spacing:.16em;color:var(--text-tertiary)}
.proof-list{margin:12px 0 0}
.proof-list div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border-subtle);font-size:11px;line-height:1.4}
.proof-list dt{color:var(--text-tertiary)}
.proof-list dd{margin:0;text-align:right}
.application{margin-top:20px;display:grid;gap:6px;font-size:11px;line-height:1.4}
.application span{color:var(--text-tertiary)}
.application strong{font-weight:500}
.visual-shell{position:relative;min-width:0;min-height:0;display:grid;grid-template-rows:62px minmax(0,1fr)62px;background:var(--surface-page)}
.view-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--space-panel);border-bottom:1px solid var(--border-subtle)}
.view-bar>div{display:grid;gap:5px}
.view-label{font-size:12px;font-weight:500}
.view-context{font-size:10px;color:var(--text-tertiary)}
.scene-position{font-size:11px;font-family:var(--font-mono);color:var(--text-tertiary);white-space:nowrap}
#demo-frame{width:100%;height:100%;min-height:0;border:0;display:block;background:var(--surface-page)}
.view-loading{position:absolute;inset:62px 0;display:grid;place-content:center;justify-items:center;gap:16px;background:var(--surface-page);z-index:10;color:var(--text-secondary);font-size:12px}
.view-loading b{font-weight:400}
.view-loading span{width:44px;height:1px;background:var(--action-primary);animation:loading 1s ease-in-out infinite alternate}
.view-loading.is-ready{display:none}
@keyframes loading{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
.data-bar{display:flex;align-items:center;gap:18px;padding:0 var(--space-panel);border-top:1px solid var(--border-subtle);font-size:10px;background:var(--surface-panel)}
.pipeline-state{display:flex;align-items:center;gap:7px;white-space:nowrap;color:var(--text-secondary)}
.state-light{width:6px;height:6px;background:currentColor;border-radius:50%}
.pipeline-state[data-state=live]{color:var(--action-primary)}
.pipeline-state[data-state=replay]{color:var(--feedback-warning)}
.pipeline-state[data-state=stale],.pipeline-state[data-state=offline]{color:var(--feedback-danger)}
.entity-readout{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.entity-readout strong{font-family:var(--font-mono);font-size:21px;font-weight:400;font-variant-numeric:tabular-nums}
.entity-readout span,#filter-note{color:var(--text-secondary)}
#filter-note{font-size:10px;max-width:24ch;line-height:1.4}
.source-control{margin-left:auto;display:flex;align-items:center;gap:8px}
.source-control label{color:var(--text-tertiary)}
select{min-height:36px;max-width:170px;border:1px solid var(--border-strong);border-radius:var(--radius-small);padding:0 8px;background:var(--surface-page);font-size:11px}
.journey{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 72px;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.journey button{border:0;border-radius:0;text-align:left;padding:16px 22px;display:grid;grid-template-columns:24px 1fr;align-content:center;gap:5px 6px;position:relative}
.journey button+button{border-left:1px solid var(--border-subtle)}
.journey button>span{grid-row:span 2;font-family:var(--font-mono);font-size:10px;color:var(--text-tertiary);padding-top:2px}
.journey b{font-size:12px;font-weight:500;line-height:1.35}
.journey small{font-size:10px;color:var(--text-tertiary)}
.journey button[aria-current=step]{background:var(--surface-raised)}
.journey button[aria-current=step]::before{content:"";height:2px;position:absolute;left:22px;right:22px;top:0;background:var(--action-primary)}
.journey button[aria-current=step]>span,.journey button[aria-current=step] b{color:var(--action-primary)}
.journey .next-button{display:grid;place-items:center;padding:0;color:var(--action-primary)}
.partner-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--space-page);font-size:9px;color:var(--text-tertiary)}
.partner-strip p{display:flex;gap:10px;align-items:baseline}
.partner-strip strong{font-size:11px;color:var(--text-primary);font-weight:500}
.partner-strip p:first-child strong{font-size:14px;letter-spacing:-.02em}
.partner-strip i{font-style:normal;margin:0 4px}
@media(min-width:1700px){.app-shell{grid-template-rows:110px minmax(0,1fr)106px 62px}.story-panel{padding-top:60px}#scene-summary{font-size:19px}.scene-invitation{font-size:15px}.proof-list div,.application{font-size:14px}.story-bottom{margin-bottom:20px}.journey b{font-size:16px}.journey small,.partner-strip{font-size:12px}}
@media(max-height:760px) and (min-width:901px){.story-panel{padding-top:24px;gap:14px}h1{font-size:46px;margin:18px 0 14px}#scene-summary{font-size:13px}.scene-invitation{margin-top:16px}.application{margin-top:12px}.proof-list div{padding:7px 0}.app-shell{grid-template-rows:82px minmax(0,1fr)80px 46px}}
@media(max-width:1100px){:root{--space-page:22px;--space-panel:18px}.seyond-name{font-size:16px}.seyond-name span{display:none}.event-mark>span{font-size:8px}.journey button{padding:14px 12px;grid-template-columns:18px 1fr}.journey b{font-size:11px}.journey small{font-size:9px}.data-bar{gap:12px}#filter-note{max-width:17ch}.source-control label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.partner-strip p:nth-child(2) span{display:none}}
@media(max-width:900px){.app-shell{height:auto;min-height:100dvh;grid-template-rows:82px auto auto auto}.event-mark{display:none}.experience{grid-template-columns:1fr}.story-panel{overflow:visible;border-right:0;padding:30px var(--space-page);display:grid;grid-template-columns:1.3fr 1fr;gap:28px}.story-bottom{align-self:center}h1{font-size:48px;max-width:15ch}.visual-shell{height:65vh;min-height:490px;border-top:1px solid var(--border-subtle)}.journey{grid-template-columns:repeat(5,minmax(0,1fr))}.journey button{min-height:82px;display:flex;flex-direction:column;gap:6px}.journey small{display:none}.journey .next-button{display:none}.partner-strip{min-height:58px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.partner-strip p:nth-child(2){display:none}}
/* A FLEX ITEM KEEPS min-width:auto, so a child that will not shrink widens its
   own track and the bar grows past the viewport. Both header groups are allowed
   to shrink; the narrow block below does the rest. */
@media(max-width:540px){:root{--space-page:16px}.topbar{gap:8px}
  .brand-lockup,.header-actions{min-inline-size:0}.seyond-logo{display:none}#tour span{display:none}.brand-lockup{gap:10px}.amsys-logo{width:72px}.seyond-logo{width:31px}.seyond-name{font-size:12px}.header-actions{gap:6px}.square-button{display:none}#tour{padding:0 10px;white-space:nowrap}.tools summary{width:36px}.story-panel{grid-template-columns:1fr}.story-bottom{display:none}.story-copy h1{font-size:46px;max-width:13ch}.story-copy #scene-summary{font-size:14px;max-width:42ch}.scene-invitation{margin-top:16px}.view-context{font-size:9px;max-width:35ch}.data-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}.visual-shell{grid-template-rows:68px minmax(0,1fr)90px}.view-loading{inset:68px 0 90px}.source-control{margin-left:auto}select{max-width:142px}#filter-note{max-width:none;order:4;flex-basis:100%;font-size:10px}.entity-readout{margin-left:auto}.entity-readout strong{font-size:18px}.journey button{padding:14px 8px}.journey b{font-size:10px}.partner-strip{font-size:8px}.partner-strip p{gap:6px}.partner-strip p:first-child strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* THE NARROWEST REAL PHONE, and the widths that do not fit one.
   Measured: the topbar came to 304px inside a 280px viewport -- wordmark 72 +
   partner name + tour button 72 + tools 36 + gaps + 32 of page padding. The
   partner name is the one piece whose absence costs nothing here, because the
   partner signature is repeated in the strip at the foot of the page. Ordered
   after the 540px block on purpose: rules there set an explicit logo width and
   the cascade needs this one to win. */
@media(max-width:340px){
  .seyond-name{display:none}
  .amsys-logo{width:56px;height:auto}
  .topbar{gap:6px}
  .header-actions{gap:4px}
  #tour{padding:0 8px}
}