/* The build animation's interface. Nothing here affects the page once the build ends. */
:root { --ag-blue: #3d50ff; --ag-red: #ff4f8b; --ag-ink: #0b0b10; }

html.ag-pre body > :not(.ag-ui) { visibility: hidden; }
html.ag-on .ag-l { visibility: hidden; }
html.ag-on .ag-l.ag-v { visibility: visible; }
.ag-c { visibility: hidden; }
.ag-c.on { visibility: visible; }

.ag-stage { position: absolute; left: 0; top: 0; width: 100%; z-index: 9000; overflow: hidden; pointer-events: none; }

/* Cursors. The tip of each sits on its x/y position. */
.ag-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; will-change: transform; color: var(--c); transition: opacity .5s; }
.ag-cur svg { position: absolute; left: 0; top: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
.ag-cur svg:not(.m-arrow) { left: -9px; top: -9px; }
.ag-cur svg { display: none; }
.ag-cur[data-m="arrow"] .m-arrow, .ag-cur[data-m="text"] .m-text, .ag-cur[data-m="cross"] .m-cross { display: block; }

/* Selection box with handles and a size badge */
.ag-box { position: absolute; border: 1.5px solid var(--ag-blue); }
.ag-box.red { border-color: var(--ag-red); }
.ag-box i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--ag-ink); }
.ag-box i:nth-child(1) { left: -4px; top: -4px; }
.ag-box i:nth-child(2) { right: -4px; top: -4px; }
.ag-box i:nth-child(3) { left: -4px; bottom: -4px; }
.ag-box i:nth-child(4) { right: -4px; bottom: -4px; }
.ag-box b { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 1px 6px; background: var(--ag-blue); color: #fff; font: 500 10px/1.5 "Geist Mono", Consolas, monospace; white-space: nowrap; border-radius: 2px; }
.ag-box.red b { background: var(--ag-red); }

.ag-block { position: absolute; background: #47505f; }
.ag-wipe-line { position: absolute; width: 2px; background: var(--ag-blue); box-shadow: 0 0 10px var(--ag-blue); }
.ag-caret { position: absolute; width: 2px; background: var(--ag-blue); }
.ag-guide { position: absolute; background: var(--ag-blue); opacity: .55; transition: opacity .5s; }
.ag-guide.h { left: 0; right: 0; height: 1px; }
.ag-guide.v { top: 0; bottom: 0; width: 1px; }
.ag-guide.red { background: var(--ag-red); opacity: .9; }

/* Rulers */
.ag-ruler { position: fixed; z-index: 9001; pointer-events: none; opacity: 0; transition: opacity .35s; background: #14141b; }
.ag-ruler.on { opacity: 1; }
.ag-ruler.top { left: 0; right: 0; top: 0; height: 18px; width: 100%; }
.ag-ruler.left { left: 0; top: 0; bottom: 0; width: 18px; height: 100%; }

/* Control bar */
.ag-bar { position: fixed; z-index: 9002; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 8px 10px 8px 14px; background: rgba(24, 24, 34, .94); border: 1px solid #33333f; border-radius: 12px; color: #f4f2f1; font: 500 12px/1.2 "Geist", system-ui, sans-serif; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ag-bar button { padding: 6px 9px; border-radius: 7px; background: #2a2a36; color: #f4f2f1; font: inherit; border: 0; cursor: pointer; }
.ag-bar button:hover { background: #3a3a49; }
.ag-bar button.primary { background: #1d7fe0; }
.ag-bar button.primary:hover { background: var(--ag-blue); }
.ag-bar button[aria-pressed="true"] { background: #3a3a49; color: #7fc2ff; }
.ag-dots { display: flex; }
.ag-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #181822; margin-left: -5px; }
.ag-dots i:first-child { margin-left: 0; }
.ag-track { width: 74px; height: 3px; border-radius: 2px; background: #3a3a49; overflow: hidden; }
.ag-track i { display: block; height: 100%; width: 0; background: var(--ag-blue); }
.ag-state { padding: 5px 8px; border-radius: 7px; background: #123a60; color: #8fcbff; }
.ag-num { color: #fff; font-weight: 800; }

/* Shown after the build, so the animation can be replayed */
.ag-chip { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; background: rgba(24, 24, 34, .94); border: 1px solid #33333f; border-radius: 10px; color: #f4f2f1; font: 500 12px/1 "Geist", system-ui, sans-serif; cursor: pointer; }
.ag-chip:hover { border-color: var(--ag-blue); }

@media (max-width: 720px) {
  .ag-ruler { display: none; }
  .ag-dots, .ag-track, .ag-state { display: none; }
  .ag-bar { gap: 8px; font-size: 11px; }
}