/* Aurora, craft v3. Craft v2 drew the page like the official sticker mark; v3 keeps that frame (snow white, ink rules,
   hat blue for the one thing to press, stars as the citation mark) and adds the cartoon bear ("Snowlight", drawn in
   Fantasy Studio's cartoon look, see /docs/CRAFT-V3.md) wherever an illustration does the job better than a logo.
   The official mark stays where a mark belongs: the kicker, the favicon, the share card.
   Type: Recursive, one variable family used three ways. Casual (CASL 1, 800) is the bear's voice for headings, Sans
   Linear (CASL 0) reads, and Mono (MONO 1) is only for method names, claim ids and commands. A statistics engine that
   computes and then talks, in one family whose Mono axis is the code. SIL OFL 1.1, see /aurora/fonts/. */
@font-face { font-family: "Recursive Casual"; src: url("/aurora/fonts/recursive-casual.woff2") format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Recursive Sans"; src: url("/aurora/fonts/recursive-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Recursive Mono"; src: url("/aurora/fonts/recursive-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* metric-matched fallbacks: the swap to the web font does not move the layout */
@font-face { font-family: "Recursive Casual Fallback"; src: local("Arial"); size-adjust: 114%; ascent-override: 83.4%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Sans Fallback"; src: local("Arial"); size-adjust: 114%; ascent-override: 83.4%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Mono Fallback"; src: local("Consolas"); size-adjust: 109.1%; ascent-override: 87.1%; descent-override: 22.9%; line-gap-override: 0%; }

body.au {
  --snow: #f5f8fc; --ice: #e6eef7; --ice-2: #d6e3f1; --ink: #0f0d0b; --ink-2: #333a46; --ink-3: #5a6372;
  --hat: #0560f5; --hat-ink: #0347b8; --star: #ffffff;
  --night: #0b1026; --night-2: #121a38; --night-line: rgba(200, 214, 255, .14); --frost: #dfe7ff; --frost-dim: #a9b4d6;
  --mint: #7fe3d4; --violet: #b39cff; --warn: #f28a3c; --crit: #e5484d;
  --stroke: 2.5px solid var(--ink); --pop: 5px 5px 0 var(--ink);
  --display: "Recursive Casual", "Recursive Casual Fallback", "Segoe UI", sans-serif;
  --text-face: "Recursive Sans", "Recursive Sans Fallback", "Segoe UI", sans-serif;
  --mono: "Recursive Mono", "Recursive Mono Fallback", ui-monospace, monospace;
  --accent: var(--hat); --accent-2: var(--hat-ink); --lamp: var(--hat);
  background: var(--snow); color: var(--ink); font: 400 17px/1.6 var(--text-face);
}
body.au::after { display: none; }
.au ::selection { background: var(--hat); color: #fff; }
.au :focus-visible { outline: 3px solid var(--hat); outline-offset: 3px; }
.au h1, .au h2, .au h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1; text-wrap: balance; }
.au h1 { font-size: clamp(46px, 6vw, 90px); margin: 0 0 22px; }
.au h2 { font-size: clamp(34px, 4.4vw, 64px); margin: 0 0 18px; }
.au h3 { font-size: clamp(22px, 1.9vw, 27px); line-height: 1.1; margin: 0 0 8px; letter-spacing: -.015em; font-weight: 700; }
.au h1 em, .au h2 em { font-style: normal; color: var(--hat); }
.au p { max-width: 62ch; }
.au .lede { font-size: clamp(18.5px, 1.45vw, 21px); color: var(--ink-2); max-width: 48ch; line-height: 1.5; }
.au a { text-underline-offset: 4px; }
.au a:hover { color: var(--hat-ink); }
.au .skip:hover { color: var(--ink); }
.au code { font-family: var(--mono); font-size: .88em; font-variant-ligatures: none; overflow-wrap: anywhere; }
.au .wrap { max-width: 1240px; }

/* chrome: the shared nav + footer, inked for snow */
.au .wordmark { font: 800 23px/1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.au .nav.scrolled { background: rgba(245, 248, 252, .95); backdrop-filter: none; border-bottom: var(--stroke); }
.au .nav ul a { font: 600 15px/1 var(--text-face); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.au .nav ul a:hover, .au .nav ul a[aria-current="page"] { color: var(--ink); }
.au .nav ul a[aria-current="page"]::after { -webkit-mask: none; mask: none; height: 4px; bottom: 0; background: var(--hat); border-radius: 2px; }
.au .nav .menu-btn { font: 700 14px/1 var(--text-face); letter-spacing: 0; text-transform: none; color: var(--ink); border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
@media (max-width: 900px) {
  .au .nav ul { background: #fff; border-top: var(--stroke); }
  .au .nav ul a { color: var(--ink); font: 800 34px/1.15 var(--display); border-bottom-color: var(--ice-2); }
}
.au .foot { background: var(--ice); color: var(--ink); border-top: var(--stroke); }
.au .foot .wordmark { color: var(--ink) !important; }
.au .foot .products a { font: 800 24px/1.1 var(--display); letter-spacing: -.02em; }
.au .foot .products li { border-top-color: var(--ice-2); }
.au .foot .products span, .au .foot p { color: var(--ink-3) !important; }
.au .foot .small { font: 400 13px/1.6 var(--mono); letter-spacing: 0; color: var(--ink-3); }

/* stickers: thick ink outline + a hard offset shadow. Shape lock: pressable = pill; readable = 14px corner. */
.sticker { background: #fff; border: var(--stroke); border-radius: 14px; box-shadow: var(--pop); }
.au .btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: var(--stroke);
  background: var(--hat); color: #fff; font: 700 17px/1 var(--text-face); letter-spacing: 0; text-transform: none; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s;
}
.au .btn:hover { color: #fff; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.au .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.au .btn.ghost { background: #fff; color: var(--ink); }
.au .btn.ghost:hover { color: var(--ink); }
.au .btn svg { width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.chips li { font: 600 14px/1 var(--text-face); padding: 8px 11px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }
.chips li.star { background: var(--hat); color: #fff; }
.chips li.star a::before { content: "\2605"; margin-right: 6px; }
.chips a { text-decoration: none; color: inherit; }
.cite { color: var(--hat); font-size: .8em; vertical-align: .35em; margin-left: 1px; }

/* hero */
.au-hero { padding: clamp(108px, 11vw, 140px) 0 clamp(64px, 8vw, 104px); position: relative; overflow: clip; }
.au-hero::before { /* a thin aurora along the skyline, the only gradient on the page */
  content: ""; position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, rgba(127, 227, 212, .22), rgba(179, 156, 255, .10) 55%, transparent);
}
.au-hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; position: relative; }
.au-hero .kicker { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--text-face); margin: 0 0 20px; color: var(--ink-2); }
.au-hero .kicker img { width: 38px; height: 38px; }
.au-hero .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 30px; }
.scene { position: relative; display: grid; gap: 0; padding-bottom: 44px; }
.scene .ridge { position: absolute; left: -6%; right: -30%; bottom: -160px; height: 300px; background: #fff; border-top: var(--stroke); border-radius: 60% 40% 0 0 / 70px 50px 0 0; z-index: 0; }
.find { position: relative; justify-self: end; width: min(420px, 92%); padding: 18px 20px 16px; z-index: 1; transform: rotate(1.6deg); }
.find .f-h { display: flex; gap: 10px; align-items: center; font: 600 12.5px/1 var(--mono); color: var(--ink-3); margin-bottom: 10px; }
.sev { font: 700 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; border: 2px solid var(--ink); background: #ffe1c7; color: #7a3500; }
.sev.info { background: #d7f5ef; color: #0b5a4e; }
.sev.crit { background: #ffd9da; color: #8c1d20; }
.find .f-t { font: 700 21px/1.15 var(--display); letter-spacing: -.015em; margin: 0 0 8px; }
.find p { font-size: 15px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.45; }
.find .f-m { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 400 13px/1.35 var(--mono); padding-top: 10px; border-top: 2px dashed var(--ice-2); }
.find .f-m + .f-m { margin-top: 8px; }
.find .f-m b { color: var(--hat-ink); font-weight: 700; }
.scene .below { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -26px; }
.scene .bear { order: -1; width: 46%; max-width: 250px; height: auto; transform-origin: 50% 100%; animation: breathe 5s ease-in-out infinite; margin: 10px 0 6px -8px; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
.tally { padding: 14px 16px; transform: rotate(-2.2deg); display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; margin-bottom: 44px; flex: none; }
.tally b { font: 800 32px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tally span { font: 500 13px/1.25 var(--mono); color: var(--ink-3); }
.tally b.zero { color: var(--hat); }
.scene .cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; font: 400 13px/1.4 var(--mono); color: var(--ink-3); text-align: right; margin: 0; max-width: none; }
@media (max-width: 900px) {
  .au-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .scene { margin-top: 18px; padding-bottom: 64px; }
  .find { width: 96%; justify-self: center; }
  .scene .below { margin-top: -10px; }
  .scene .bear { width: 42%; max-width: 200px; margin-top: 0; }
  .tally b { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .scene .bear { animation: none; } }

/* bands */
.au-band { padding: clamp(72px, 9vw, 136px) 0; position: relative; }
.au-band.ice { background: var(--ice); border-top: var(--stroke); border-bottom: var(--stroke); }
.au-band.night { background: var(--night); color: var(--frost); border-top: var(--stroke); }
.au-band.night .lede { color: var(--frost-dim); }
.au-band.night h2 em { color: var(--mint); }
.au-band.night a:hover { color: var(--mint); }
.au .head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }

/* what it is: three promises, each with its star */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.promises li { padding-top: 16px; border-top: var(--stroke); }
.promises li::before { content: "\2605"; display: block; color: var(--hat); font-size: 22px; line-height: 1; margin-bottom: 12px; }
.promises p { color: var(--ink-2); margin: 0; font-size: 16.5px; }
.said { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 620px; }
.said p { font: 700 clamp(22px, 2.2vw, 30px)/1.25 var(--display); letter-spacing: -.015em; margin: 0 0 8px; }
.said a { font: 400 13.5px/1.4 var(--mono); color: var(--ink-3); }
@media (max-width: 900px) { .promises { grid-template-columns: minmax(0, 1fr); } }

/* the afternoon: five steps, real screens */
.run { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.run > li { counter-increment: s; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding: clamp(28px, 4vw, 52px) 0; border-top: 1px solid var(--night-line); }
.run > li:nth-child(even) .shot { order: -1; }
.run .step { font: 700 14px/1 var(--mono); color: var(--mint); display: block; margin-bottom: 14px; }
.run .step::before { content: "0" counter(s) "  "; color: var(--frost-dim); }
.run h3 { font-size: clamp(28px, 2.8vw, 40px); color: #fff; }
.run p { color: var(--frost-dim); font-size: 17px; }
.run .quote { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--violet); background: var(--night-2); border-radius: 0 10px 10px 0; font: 400 14px/1.5 var(--mono); color: var(--frost); }
.run .quote small { display: block; color: var(--frost-dim); margin-top: 6px; font-size: 12.5px; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border-radius: 12px; border: 2.5px solid #000; box-shadow: 5px 5px 0 #000, 0 0 0 1px rgba(200, 214, 255, .25); background: #0a0f24; }
.shot figcaption { font: 400 13px/1.45 var(--mono); color: var(--frost-dim); margin-top: 12px; }
.shot.narrow img { max-width: 360px; }
@media (max-width: 900px) { .run > li { grid-template-columns: minmax(0, 1fr); } .run > li:nth-child(even) .shot { order: 0; } }

/* measured, not guessed */
.measured { width: 100%; border-collapse: collapse; }
.measured th { font: 700 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 0 20px 12px 0; border-bottom: var(--stroke); color: var(--ink-3); }
.measured td { padding: 16px 20px 16px 0; border-bottom: 2px solid var(--ice-2); vertical-align: top; }
.measured td:first-child { font-weight: 700; }
.measured td:last-child { font: 700 18px/1.3 var(--mono); white-space: nowrap; }
.measured-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .measured-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .measured thead { display: none; }
  .measured tr { display: block; border-bottom: 2px solid var(--ice-2); padding: 12px 0; }
  .measured td { display: block; border: 0; padding: 2px 0; }
}

/* six lenses */
.lenses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.lenses li { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.lenses li:nth-child(3n+2) { transform: translateY(18px); }
.lenses .thumb { aspect-ratio: 16 / 10; background: var(--night); border-bottom: var(--stroke); overflow: hidden; }
.lenses .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lenses .txt { padding: 16px 18px 18px; }
.lenses h3 { margin-bottom: 6px; }
.lenses p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.lenses code { color: var(--hat-ink); font-size: 13.5px; }
@media (max-width: 900px) { .lenses { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lenses li:nth-child(3n+2) { transform: none; } }
@media (max-width: 600px) { .lenses { gap: 14px; } .lenses .txt { padding: 12px 12px 14px; } .lenses h3 { font-size: 19px; } .lenses p { font-size: 14px; } }

/* agents */
.agent { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.peek { display: block; width: 46%; max-width: 230px; height: auto; margin: -12px 0 -16px 28px; position: relative; z-index: 3; pointer-events: none; }
.code { position: relative; background: #070b1c; border: 2px solid #000; border-radius: 12px; box-shadow: 0 0 0 1px var(--night-line); margin: 0 0 14px; }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 14px/1.6 var(--mono); color: var(--frost); }
.code .k { color: var(--mint); } .code .c { color: #7d89b0; }
.code button { position: absolute; top: 8px; right: 8px; min-height: 36px; min-width: 64px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--night-line); background: var(--night-2); color: var(--frost); font: 600 13px/1 var(--text-face); cursor: pointer; }
.code button:hover { border-color: var(--mint); color: var(--mint); }
.sub { font: 700 12.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--frost-dim); margin: 22px 0 10px; }
.tools { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--night-line); }
.tools li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--night-line); font-size: 15.5px; }
.tools code { color: var(--mint); font-size: 14px; }
.tools span { color: var(--frost-dim); }
@media (max-width: 900px) { .agent { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tools li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* local + open, and the honest warning */
.localgrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.facts3 { list-style: none; margin: 0; padding: 0; border-top: var(--stroke); }
.facts3 li { padding: 16px 0; border-bottom: 2px solid var(--ice-2); }
.facts3 b { display: block; font: 700 19px/1.2 var(--display); margin-bottom: 4px; }
.facts3 span { color: var(--ink-2); font-size: 16.5px; }
.warn { padding: 22px 22px 20px; background: #fff7e8; transform: rotate(-1deg); }
.warn h3 { display: flex; align-items: center; gap: 10px; }
.warn h3::before { content: "!"; display: inline-grid; place-items: center; width: 30px; height: 30px; border: var(--stroke); border-radius: 50%; background: #ffd27a; font: 800 18px/1 var(--display); flex: none; }
.warn p { font-size: 16px; color: var(--ink-2); margin: 0 0 10px; }
@media (max-width: 900px) { .localgrid { grid-template-columns: minmax(0, 1fr); } }

/* install */
.install { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.install > li { padding: 24px 24px 22px; }
.install .os { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ice-2); }
.install .os li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 2px solid var(--ice-2); font-size: 15px; }
.install .os li span:last-child { font-family: var(--mono); font-size: 13.5px; color: var(--ink-3); }
.install .k-sub { font: 500 13px/1 var(--mono); color: var(--ink-3); display: block; margin-bottom: 14px; }
.install .code { margin-top: 14px; }
.install .code pre { font-size: 13px; }
@media (max-width: 900px) { .install { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .install .os li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* notes + community */
.notes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.post { display: block; padding: 22px 24px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.post:hover { color: inherit; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.post .when { font: 500 13px/1 var(--mono); color: var(--ink-3); }
.post h3 { margin: 10px 0 8px; }
.post p { margin: 0 0 12px; color: var(--ink-2); font-size: 16px; }
.post .go { font-weight: 700; color: var(--hat-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.feed { list-style: none; margin: 18px 0 0; padding: 0; border-top: var(--stroke); }
.feed li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 2px solid var(--ice-2); align-items: start; }
.feed .sev { justify-self: start; }
.feed li > div { min-width: 0; overflow-wrap: anywhere; }
.feed .t { font-weight: 600; font-size: 16px; }
.feed .m { font: 400 13px/1.4 var(--mono); color: var(--ink-3); margin-top: 2px; }
.feed-note { font: 400 13px/1.5 var(--mono); color: var(--ink-3); margin: 10px 0 0; }

/* last call */
.au-last .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: end; }
.au-last .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 26px; }
.au-last .lantern { width: 100%; max-width: 340px; height: auto; justify-self: end; }
.au-last .links { margin-top: 26px; font-size: 16px; color: var(--ink-3); }
.au-last .links a { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .au-last .wrap { grid-template-columns: minmax(0, 1fr); } .au-last .lantern { max-width: 220px; justify-self: start; } }

/* The glass orbs (restored, /aurora/orb.js). In the hero: a round sticker of night (ink outline, hard offset, like every
   sticker here) stuck behind the finding card, with the 3D orb glowing in it. In "A CSV at four": the same orb acting the
   five steps out as you scroll. Both boxes are a fixed size, so nothing moves when the scenes arrive. */
.orb-disc { position: absolute; right: -12%; top: -100px; width: 300px; height: 300px; border-radius: 50%; z-index: 0; overflow: hidden;
  border: var(--stroke); box-shadow: var(--pop); transform: rotate(-4deg);
  background: radial-gradient(1.5px 1.5px at 22% 30%, #fff 60%, transparent), radial-gradient(1px 1px at 70% 18%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 84% 44%, #dfe7ff 60%, transparent), radial-gradient(1px 1px at 38% 12%, #fff 60%, transparent),
    radial-gradient(70% 60% at 50% 38%, #1d2752 0%, var(--night) 75%); }
.orb-disc canvas, .work-orb canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1); }
.orb-disc.ready canvas, .work-orb.ready canvas { opacity: 1; }
.run-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(20px, 3vw, 40px); }
.run-top .head { margin-bottom: 0; }
.work-orb { position: relative; height: 400px; }
.work-orb canvas { touch-action: pan-y; cursor: grab; }
.work-orb canvas:active { cursor: grabbing; }
.work-orb .fallback { position: absolute; left: 10%; top: 6%; width: 80%; height: 80%; display: none; }
.work-orb.no-webgl .fallback { display: block; }
.work-orb .beat { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font: 700 14px/1 var(--mono); color: var(--mint); min-height: 14px; }
.work-orb .beat span { color: var(--frost-dim); margin-right: .6em; }
.work-orb.no-webgl .beat { display: none; }
@media (max-width: 900px) {
  .scene { margin-top: 96px; }
  .orb-disc { right: -2%; top: -84px; width: 170px; height: 170px; }
  .run-top { grid-template-columns: minmax(0, 1fr); }
  .work-orb { height: 330px; }
}
@media (prefers-reduced-motion: reduce) { .orb-disc canvas, .work-orb canvas { transition: none; } }

/* the v2 page's idle motion for the drawn bears, back on the v3 bears: the peeking bear breathes over the terminal and the
   lantern sways on its bail (the reduced-motion rule in fl.css stops both) */
.peek { animation: peek-breath 4.2s ease-in-out infinite alternate; }
@keyframes peek-breath { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.au-last .lantern { transform-origin: 50% 96%; animation: lantern-sway 6s ease-in-out infinite; }
@keyframes lantern-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }