/* One clock connects the live code and the assembling mark. */
.hero-wrap{max-width:1440px;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:36px}
.hero .ah-visual{height:auto;min-width:0;direction:ltr}
.ah-scene{height:480px}
.ah-dual{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;height:100%}
.ah-window{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line-2);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 35px 65px -38px #0009}
.ah-bar{height:36px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px}
.ah-title{font:10px var(--fm);color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ah-code-body{flex:1;min-height:0;overflow:hidden}
.ah-controls{height:44px;display:flex;justify-content:flex-end;align-items:center;gap:4px}
.ah-controls button{width:40px;height:40px;padding:11px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.ah-controls button:hover{color:var(--ink);background:var(--surface)}
.ah-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ah-controls button:disabled{cursor:default;opacity:.55}
.ah-controls svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ah-pause .ah-icon-play{display:none}.ah-pause.is-paused .ah-icon-pause{display:none}.ah-pause.is-paused .ah-icon-play{display:block}
.ah-bubbles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--ah-bubbles,0);transition:opacity 1.5s}
.ah-bubble{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);opacity:.24}
.ah-bubble::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ffd9a8,#ff8c22 34%,#ff6a00 62%,#e8500000 74%);filter:blur(26px);animation:ah-float var(--t,14s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes ah-float{from{transform:translate(calc(var(--fx,5%) * -1),var(--fy,6%)) scale(1)}to{transform:translate(var(--fx,5%),calc(var(--fy,6%) * -1)) scale(1.12)}}
html[data-theme="stripe"] .ah-bubble{opacity:.18}
.hero[data-ah-paused="true"] .ah-bubble::before{animation-play-state:paused}
.hero[data-ah-pulse="true"] .ah-bubbles{transition:none}
@media(max-width:1180px){
  .hero-wrap{grid-template-columns:minmax(0,1fr);gap:36px}
  .ah-scene{height:460px}
}
@media(max-width:700px){
  .ah-scene{height:auto}
  .ah-dual{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(280px,82vw,360px) 150px}
  .ah-canvas-window{grid-row:1}.ah-code-window{grid-row:2}
}
@media(prefers-reduced-motion:reduce){
  #atarup-hero-animation *,#atarup-hero-animation *::before,#atarup-hero-animation *::after,.ah-bubbles,.ah-bubble::before{animation:none!important;transition:none!important}
  .ah-controls{display:none}
}