/* Otto: the landing page. One screen, drawn in one SVG that is laid out afresh for every window
   shape (see main.js), so the hero is the Figma frames at any size. */
:root { --ink: #131313; --paper: #FAF9F6; --blue: #6B9DCE; --green: #8CA9A0; --stone: #B0AEA6; }
* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: auto; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; height: 200vh; height: 200svh; background: var(--ink); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.stage { position: fixed; inset: 0; }
.stage svg { display: block; width: 100%; height: 100%; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the two things in the bar that can be pressed (and the one that cannot, yet) */
[data-press] { cursor: pointer; outline: none; }
[data-press] .face { transition: fill 180ms ease; }
[data-press]:hover .face, [data-press]:focus-visible .face { fill: #2b2b2b; }
[data-press]:focus-visible .ring { opacity: 1; }
.ring { opacity: 0; transition: opacity 140ms ease; }
#learn, #news { cursor: pointer; outline: none; transition: opacity 160ms ease; }
#learn:hover, #learn:focus-visible, #news:hover, #news:focus-visible { opacity: 0.55; }

/* which download: under the button's arrow */
.menu { position: fixed; z-index: 5; min-width: 232px; padding: 6px; border-radius: 14px; background: var(--ink); color: var(--paper); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity 160ms ease, transform 200ms cubic-bezier(0.2, 0, 0, 1); }
.menu.open { opacity: 1; transform: none; pointer-events: auto; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: 500 14px/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.menu button small { margin-left: auto; font-size: 12px; font-weight: 400; color: rgba(250, 249, 246, 0.5); }
.menu button i { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.menu button[aria-current="true"] i { background: var(--blue); }

/* what just happened, said once at the foot of the window */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 6; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.07) inset; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0, 0, 1); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--blue); text-decoration: none; margin-left: 10px; }
.toast a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .menu, .toast { transition: none; } }