/* Octal's pages (/octal/*): the app's own look on top of site.css. The dark ground, the bead's lavender and the
   wordmark (the O is the dial with the bead in it) are the Octal repo's mockups/brand. */
:root{--page:#eef0f3;--ink:#16181c;--dim:#3f4250;--mute:#6f7280;--link:#5b4bd6;--line:#d6d6e0;--bead:#8e7dff;--card:#16181c}
@media (prefers-color-scheme:dark){:root{--page:#16181c;--ink:#ffffff;--dim:#c4c2d2;--mute:#8d8b9c;--link:#a593ff;--line:#2c2c38}}
body{background:var(--page)}
@media (prefers-color-scheme:dark){body{background:radial-gradient(ellipse 80% 50% at 50% 0%,#2a2740 0%,#16181c 70%) fixed #16181c}}
.mark{display:flex;width:max-content;align-items:baseline;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--ink);text-decoration:none}
.mark .o{position:relative;top:.012em;width:.74em;height:.74em;margin-right:.035em;border-radius:50%;box-sizing:border-box;border:.105em solid currentColor}
.mark .o::after{content:"";position:absolute;left:50%;top:50%;width:.31em;height:.31em;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse 46% 20% at 50% 17%,rgba(255,255,255,.45),rgba(255,255,255,0) 100%),radial-gradient(circle at 50% 62%,#cfc5ff 0%,#a593ff 58%,#8878d6 100%);
  box-shadow:0 0 .3em rgba(142,125,255,.5)}
h1.mark{font-size:56px;margin:0}
.tag{font-size:22px;font-weight:600;color:var(--dim);margin:10px 0 0;letter-spacing:-.01em}
.hero{display:block;width:100%;border-radius:22px;margin:28px 0 8px;background:var(--card)}
.get{display:inline-block;margin:18px 0 6px;padding:12px 22px;border-radius:999px;background:var(--bead);color:#fff;font-weight:600;text-decoration:none;box-shadow:0 8px 30px rgba(142,125,255,.35)}
.get:hover{filter:brightness(1.08)}
.small{font-size:15px;color:var(--mute)}
video{width:100%;display:block;border-radius:16px;background:#000}