/* ===========================================================
   Sketchbook, the hand-drawn system for fajar's little world.
   Cream notebook paper, warm ink, crayon orange, marker yellow.
   Ported from sketch.css in the Claude Design project.
   =========================================================== */

/* ---- Self-hosted faces ----
   Caveat, Shantell Sans and Patrick Hand, all SIL Open Font License 1.1.
   Licence text sits beside the files in /static/fonts.

   They are served from this origin on purpose: the policy sets
   font-src 'self', and a third party host would also learn the IP address
   of every sender who opens the page. Only latin and latin-ext ship.
   ---- */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/patrick-hand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Patrick Hand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/patrick-hand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/shantell-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/fonts/shantell-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #FAF4E6;
  --paper-2: #F1E9D4;
  --card: #FFFDF6;
  --ink: #2B2620;
  --ink-soft: #5A5344;
  --muted: #948A74;
  --accent: #D9481F;
  --accent-soft: rgba(217, 72, 31, .14);
  --hi: #FFE066;
  --hair: #E2D8BF;
  --danger: #B3261E;
  --ok: #4C6B3C;
  --serif: 'Shantell Sans', 'Comic Sans MS', cursive;
  --mono: 'Patrick Hand', 'Comic Sans MS', cursive;
  --display: 'Caveat', 'Brush Script MT', cursive;
  --wob1: 255px 15px 225px 15px/15px 225px 15px 255px;
  --wob2: 15px 225px 15px 255px/255px 15px 225px 15px;
  --wob3: 12px 20px 14px 18px/18px 14px 20px 12px;
  --wob-pill: 30px 22px 28px 24px/24px 28px 22px 30px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute only sets display:none in the user agent stylesheet,
   so any author display rule beats it. This keeps hidden meaning hidden. */
[hidden] { display: none !important; }

body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(43, 38, 32, .08) 1.2px, transparent 1.3px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Keyboard focus must stay obvious on a busy paper background. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
a:hover { color: var(--accent); }

.wrap, .shell { max-width: 660px; margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  padding: 10px 16px;
  z-index: 40;
}
.skip-link:focus { left: 0; color: var(--paper); }

/* The Indonesian line sits under the English one, quieter, so the page reads
   in either language without doubling its weight. */
.lang-switch {
  position: fixed;
  top: 74px;
  right: 24px;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 4px 14px;
  box-shadow: 3px 4px 0 rgba(43, 38, 32, .09);
  z-index: 10;
  transition: all .12s;
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent); }

.eyebrow {
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Masthead: a drawn-on header, not a band ---- */
.masthead {
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 2.5px solid var(--ink);
}
.mast-inner {
  max-width: 660px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--ink); }
.brand .dot { color: var(--accent); }
.brand .kicker {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--mono); font-size: .95rem; }
.nav a { padding: 5px 11px; color: var(--ink-soft); border-radius: var(--wob-pill); }
.nav a:hover {
  color: var(--ink);
  text-decoration: underline wavy var(--accent) 1.5px;
  text-underline-offset: 5px;
}

/* ---- Page header ---- */
.page-head { padding: 48px 4px 8px; }
.page-head .eyebrow { display: block; margin-bottom: 10px; transform: rotate(-.8deg); }
.page-head h1 {
  font-family: var(--display);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.04;
  text-wrap: balance;
}
.page-head h1 em {
  font-style: normal;
  color: var(--accent);
  text-decoration: underline wavy var(--accent) 2px;
  text-underline-offset: 7px;
}
.page-head .sub {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* ---- Card ---- */
.sec, .rc-card, .gate-card, .public-feed, .convo {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob1);
  padding: 28px 32px;
  margin-top: 16px;
  box-shadow: 5px 6px 0 rgba(43, 38, 32, .10);
}
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sec-head h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 700; }
.sec-head .count { font-family: var(--mono); font-size: .85rem; color: var(--muted); }

/* ---- Buttons ---- */
.cbtn, .send, .gate-primary,
.admin-action-form button, .login-form button, .passkey-form button {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 11px 26px;
  cursor: pointer;
  transition: all .15s;
  transform: rotate(-1.2deg);
  box-shadow: 3px 4px 0 rgba(43, 38, 32, .22);
}
.cbtn:hover, .send:hover, .gate-primary:hover,
.admin-action-form button:hover, .login-form button:hover, .passkey-form button:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(1deg) translateY(-1px);
}
.cbtn[disabled] { opacity: .45; cursor: not-allowed; }
.cbtn.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 2px dashed var(--hair);
  box-shadow: none;
  transform: none;
}
.cbtn.ghost:hover { border-color: var(--accent); color: var(--accent); background: transparent; transform: none; }

/* ---- Banners ---- */
.status, .error {
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1.55;
  border: 2px solid var(--ink);
  border-radius: var(--wob3);
  padding: 11px 15px;
  margin-top: 14px;
  background: var(--card);
}
.status { border-color: var(--ok); color: var(--ok); }
.error { border-color: var(--danger); color: var(--danger); }
.status:empty, .error:empty { display: none; }
.empty { font-family: var(--mono); font-size: .95rem; color: var(--muted); }

/* ---- Forms ---- */
.cform { display: flex; flex-direction: column; gap: 16px; }
.cform .field { display: flex; flex-direction: column; gap: 6px; }
.cform label, .cform legend, .boxes > summary {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cform label .opt { text-transform: none; letter-spacing: 0; color: var(--muted); }
.cform input[type="text"], .cform textarea, .rc-compose textarea, .login-form input,
.admin-action-form input[type="text"], .admin-action-form textarea, .admin-action-form select {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob3);
  padding: 11px 14px;
  width: 100%;
}
.cform textarea, .rc-compose textarea { min-height: 108px; line-height: 1.6; resize: vertical; }
.cform input::placeholder, .cform textarea::placeholder,
.rc-compose textarea::placeholder, .login-form input::placeholder { color: var(--muted); }
.cform input:focus, .cform textarea:focus, .rc-compose textarea:focus, .login-form input:focus,
.admin-action-form input:focus, .admin-action-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cform .hint, .hint { font-family: var(--mono); font-size: .85rem; color: var(--muted); line-height: 1.5; }
.cform .actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

/* Consent stays a real checkbox: it is a promise, not a toggle. */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: var(--wob3);
  padding: 14px 16px;
}
.consent input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex: 0 0 19px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent .copy { display: flex; flex-direction: column; gap: 4px; }
.consent .copy .lede { font-family: var(--serif); font-size: 1rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.consent .copy .hint { font-family: var(--mono); font-size: .85rem; }

/* ---- Custom boxes ---- */
.boxes { border: none; }
.boxes > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.boxes > summary::-webkit-details-marker { display: none; }
.boxes > summary::before { content: "+"; color: var(--accent); font-size: 1.1rem; line-height: 1; }
.boxes[open] > summary::before { content: "‘2"; }
.boxes > summary:hover { color: var(--accent); }
.box-row { display: flex; gap: 10px; margin-top: 10px; align-items: flex-start; }
.box-row .box-label { flex: 0 0 34%; }
.box-row .box-value { flex: 1; }
.box-row textarea { min-height: 60px; }
.box-add { margin-top: 14px; align-self: flex-start; }

/* ---- Attachments and the honeypot ---- */
.attachment-picker { display: flex; flex-direction: column; gap: 8px; }
.attachment-picker input[type="file"] {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: var(--wob3);
  padding: 14px;
  width: 100%;
  cursor: pointer;
}
.attachment-picker input[type="file"]:hover { border-color: var(--accent); }
.attachment-help { font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.attachment-status, .attachment-error { margin-top: 0; }
.cf-turnstile { margin: 2px 0; min-height: 65px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Footer: a drawn line, not a band ---- */
.footer { background: transparent; margin-top: 40px; border-top: 2.5px solid var(--ink); }
.foot-inner { max-width: 660px; margin: 0 auto; padding: 22px 24px 34px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.socials { display: flex; gap: 18px; font-family: var(--mono); font-size: .92rem; }
.socials a { color: var(--ink-soft); }
.socials a:hover { color: var(--accent); text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; }
.copy-note { font-family: var(--mono); font-size: .85rem; color: var(--muted); }

/* ---- The artboard page ---- */
.stage { position: fixed; inset: 0; background: var(--paper); z-index: 0; pointer-events: none; }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; }
.scene.is-live { opacity: 1; pointer-events: auto; }

/* Orientation decides which scene may show, in the stylesheet as well as in
   the script. Without this the two can disagree for a frame, or permanently if
   the script never runs, and a landscape scene gets panned into a narrow strip
   with its animated parts cropped off screen. */
@media (orientation: portrait) {
  .scene:not([data-scene="mobile"]) { opacity: 0; pointer-events: none; }
  .scene[data-scene="mobile"].is-live { opacity: 1; pointer-events: auto; }
}
@media (orientation: landscape) {
  .scene[data-scene="mobile"] { opacity: 0; pointer-events: none; }
}
.scene.is-live svg { pointer-events: auto; }
[data-say], [data-act] { cursor: pointer; }
[data-if] { display: none; }
[data-if].is-on { display: inline; }

.chrome-brand { position: fixed; top: 22px; left: 26px; line-height: 1.25; z-index: 10; }
.chrome-brand .name { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--ink); }
.chrome-brand .name .dot { color: var(--accent); }
.chrome-brand .kicker {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.chrome-status {
  position: fixed;
  top: 22px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ink-soft);
  box-shadow: 3px 4px 0 rgba(43, 38, 32, .09);
  z-index: 10;
}
.chrome-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulseDot 2.6s ease-in-out infinite; }
.chrome-status .what { white-space: nowrap; }

/* The greeting: a note pinned above the button, with an arrow pointing at it. */
.welcome {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: min(218px, 58vw);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  z-index: 11;
}
.welcome .note {
  pointer-events: auto;
  cursor: pointer;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob2);
  box-shadow: 4px 5px 0 rgba(43, 38, 32, .12);
  padding: 14px 16px;
  transform: rotate(-2deg);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}
.welcome .arrow { width: 40px; margin-right: 14px; transform: rotate(8deg); }
.welcome .dismiss {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
  margin-right: 6px;
}

.feed-link {
  position: fixed;
  bottom: 20px;
  right: 190px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 13px 22px;
  box-shadow: 4px 5px 0 rgba(43, 38, 32, .18);
  transform: rotate(1deg);
  transition: all .15s;
  z-index: 12;
}
.feed-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: rotate(-1deg) translateY(-1px);
}

.panel-toggle {
  position: fixed;
  bottom: 20px;
  right: 24px;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: 4px 5px 0 rgba(43, 38, 32, .25);
  transition: background .15s;
  z-index: 12;
}
.panel-toggle:hover { background: var(--accent); border-color: var(--accent); }

.panel {
  position: fixed;
  bottom: 78px;
  right: 20px;
  width: min(390px, calc(100vw - 40px));
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--wob1);
  padding: 24px;
  box-shadow: 5px 6px 0 rgba(43, 38, 32, .18);
  animation: popIn .18s ease;
  transform-origin: bottom right;
  z-index: 13;
}
.panel h2 { font-family: var(--display); font-size: 1.75rem; font-weight: 700; }
.panel .lede { font-family: var(--mono); font-size: .9rem; color: var(--muted); margin-top: 4px; }

.overlay { position: relative; z-index: 5; padding-top: 100vh; pointer-events: none; }
.overlay-sheet {
  pointer-events: auto;
  background: var(--paper);
  border-top: 2.5px solid var(--ink);
  padding: 8px 24px 72px;
}
.overlay-sheet > * { max-width: 660px; margin-left: auto; margin-right: auto; }
.scroll-cue {
  position: fixed;
  bottom: 26px;
  left: 26px;
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 6;
  pointer-events: none;
}

/* ---- Public feed ---- */
.public-feed-header { margin-bottom: 16px; }
.public-feed-header h2 { font-family: var(--display); font-size: 1.9rem; font-weight: 700; }
.public-thread-list, .public-message-list, .admin-message-list, .admin-inbox-list,
.threads, .messages, .public-custom-boxes, .admin-custom-boxes, .chips, .shots, .stream { list-style: none; }
.public-thread { padding: 20px 0; }
.public-thread + .public-thread { border-top: 2px dashed var(--hair); }
.public-thread h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.public-message { padding: 10px 0; }
.message-body { font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.public-custom-boxes, .admin-custom-boxes, .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.public-custom-boxes li, .admin-custom-boxes li, .chip {
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 3px 11px;
  border-radius: var(--wob-pill);
  overflow-wrap: anywhere;
}
.chip b { font-weight: 400; color: var(--accent); margin-right: 5px; }
.public-feed img, .thread img, .admin-message img {
  max-width: 190px;
  border: 2px solid var(--ink);
  border-radius: var(--wob3);
  display: block;
  margin-top: 10px;
}
.feed-pagination { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-family: var(--mono); font-size: .92rem; }
.feed-pagination a { color: var(--accent); }
.edited-mark {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink);
  background: linear-gradient(104deg, transparent 4%, var(--hi) 7%, var(--hi) 93%, transparent 96%);
  padding: 0 4px;
}

/* ---- Receipt ---- */
.rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 34px 0 4px; }
.rc-brand .name { font-family: var(--display); font-size: 1.7rem; font-weight: 700; }
.rc-brand .name .dot { color: var(--accent); }
.rc-brand .kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rc-nav { display: flex; gap: 14px; }
.rc-nav a { font-family: var(--mono); font-size: .92rem; color: var(--ink-soft); }
.rc-nav a:hover { text-decoration: underline wavy var(--accent) 1.5px; text-underline-offset: 4px; }
.threads { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 2px dashed var(--hair); padding-bottom: 14px; }
.rc-label { font-family: var(--mono); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.rc-code {
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .08em;
  background: var(--hi);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 3px 14px;
  transform: rotate(-1.5deg);
}
.rc-msg { font-size: 1.15rem; line-height: 1.7; margin-top: 18px; text-wrap: pretty; }
.rc-author { font-family: var(--mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.rc-meta { font-family: var(--mono); font-size: .9rem; color: var(--muted); margin-top: 10px; }
.steps { display: flex; gap: 18px; flex-wrap: wrap; border-top: 2px dashed var(--hair); padding-top: 16px; margin-top: 18px; }
.step { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.step i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--hair); flex: 0 0 11px; }
.step.on { color: var(--ink-soft); }
.step.on i { background: var(--ink); border-color: var(--ink); }
.messages { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.turn { display: flex; gap: 11px; }
.av {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .8rem;
  background: var(--paper); border: 2px solid var(--ink); color: var(--ink-soft);
}
.av.av-owner { background: var(--ink); color: var(--paper); }
.turn-body { min-width: 0; }
.turn-who { font-family: var(--mono); font-size: .85rem; color: var(--muted); }
.shots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.shot {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .85rem;
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: var(--wob-pill); padding: 2px 11px;
}
.shot .state { color: var(--ink); }
.shot .dims { color: var(--muted); }
.rc-compose { margin-top: 16px; }
.rc-compose-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.clip {
  font-family: var(--mono); font-size: .9rem; color: var(--ink-soft);
  border: 2px dashed var(--ink); background: transparent;
  border-radius: var(--wob-pill); padding: 5px 13px; cursor: pointer;
}
.clip:hover { border-color: var(--accent); color: var(--accent); }
.clip input[type="file"] { display: none; }
.send { margin-left: auto; }
.thread-closed, .convo-ref { font-family: var(--mono); font-size: .9rem; color: var(--muted); margin-top: 14px; }

/* ---- Owner gate ---- */
.gate { min-height: 76vh; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.gate-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 15px; margin-top: 0; padding: 30px; }
.gate-face { width: 62px; height: 52px; }
.gate-title { font-family: var(--display); font-size: 2.1rem; font-weight: 700; }
.gate-title .dot { color: var(--accent); }
.gate-kicker { font-family: var(--mono); font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.gate-card .status, .gate-card .error { margin-top: 0; }
.gate-primary { width: 100%; }
.login-passkey { display: block; }
.gate-or { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 2px; background: var(--hair); }
.gate-back { font-family: var(--mono); font-size: .9rem; }
.gate-back a { color: var(--ink-soft); }
.login-form, .passkey-form { display: flex; flex-direction: column; gap: 9px; }

/* ---- Owner inbox ---- */
.ai-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 0 10px; border-bottom: 2.5px solid var(--ink); }
.ai-brand .name { font-family: var(--display); font-size: 1.7rem; font-weight: 700; }
.ai-brand .name .dot { color: var(--accent); }
.ai-brand .kicker { font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ai-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-tools a, .logout-form button, .admin-filters a {
  font-family: var(--mono); font-size: .9rem;
  border: 2px solid var(--ink); border-radius: var(--wob-pill);
  padding: 4px 13px; color: var(--ink-soft); background: transparent;
  cursor: pointer; transition: all .12s;
}
.ai-tools a:hover, .logout-form button:hover, .admin-filters a:hover { border-color: var(--accent); color: var(--accent); }
.admin-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 4px; }
.admin-filters a.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ai-empty { padding: 40px 0; text-align: center; }
.admin-inbox-list { margin-top: 8px; }
.admin-inbox-item + .admin-inbox-item { border-top: 2px dashed var(--hair); }
.ai-row { display: block; padding: 14px 12px; border-radius: var(--wob3); transition: background .12s; }
.ai-row:hover { background: var(--card); color: inherit; }
.ai-line { display: flex; align-items: center; gap: 8px; }
.ai-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; border: 2px solid var(--hair); }
.ai-dot.t-new { background: var(--accent); border-color: var(--accent); }
.ai-dot.t-read { background: var(--ink); border-color: var(--ink); }
.ai-from { font-family: var(--mono); font-size: .9rem; color: var(--ink-soft); }
.ai-time { font-family: var(--mono); font-size: .85rem; color: var(--muted); margin-left: auto; }
.ai-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; }
.ai-tags { display: block; font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.owner-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.admin-summary {
  font-family: var(--mono); font-size: .9rem; color: var(--ink-soft);
  background: var(--paper); border: 2px dashed var(--ink);
  border-radius: var(--wob3); padding: 14px 16px; margin-top: 12px;
  overflow-x: auto; overflow-wrap: anywhere;
}
.admin-message { padding: 14px 0; }
.admin-message + .admin-message { border-top: 2px dashed var(--hair); }
.admin-message-original { color: var(--ink); }
.admin-attachments, .public-attachments { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.admin-attachments li, .public-attachments li {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--wob-pill);
  padding: 2px 11px;
  overflow-wrap: anywhere;
}
.publication-blocked {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--danger);
  border: 2px dashed var(--danger);
  border-radius: var(--wob3);
  padding: 10px 14px;
  margin-top: 10px;
}
.admin-message-redacted { color: var(--ink-soft); border-left: 3px solid var(--accent); padding-left: 14px; }
.admin-actions { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.admin-action-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-action-form label { font-family: var(--mono); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.admin-action-form textarea { min-height: 90px; }
.publication-action-form { border-top: 2px dashed var(--hair); padding-top: 14px; }
.logout-form { display: inline-flex; }

@media (max-width: 560px) {
  .page-head h1 { font-size: 2.5rem; }
  .sec, .rc-card, .public-feed, .gate-card { padding: 22px 18px; }
  .box-row { flex-direction: column; gap: 7px; }
  .box-row .box-label { flex: 1; }
  .wrap, .shell { padding: 0 18px; }
  .mast-inner, .foot-inner { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 480px) {
  .chrome-brand { top: 14px; left: 16px; }
  .chrome-brand .name { font-size: 1.35rem; }
  .chrome-status { top: 14px; right: 14px; font-size: .8rem; padding: 6px 12px; }
  .lang-switch { top: 58px; right: 14px; font-size: .82rem; padding: 3px 12px; }
  .welcome { right: 14px; left: 14px; width: auto; align-items: flex-end; }
  .welcome .note { font-size: .95rem; padding: 10px 12px; line-height: 1.25; max-width: 15rem; }
  .welcome .arrow { width: 30px; }
  .panel-toggle { bottom: 14px; right: 14px; left: 14px; padding: 13px 20px; }
  .feed-link { bottom: 66px; right: 14px; left: 14px; text-align: center; padding: 10px 18px; }
  .welcome { bottom: 126px; }
  .panel { left: 8px; right: 8px; bottom: 74px; width: auto; max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); padding: 18px 15px; }
  .cf-turnstile { overflow-x: auto; }
  .scroll-cue { display: none; }
  .overlay-sheet { padding: 8px 18px 60px; }
}

@media (max-height: 520px) {
  .panel { bottom: 62px; max-height: calc(100vh - 78px); }
  .panel-toggle { bottom: 12px; padding: 9px 20px; }
  .welcome { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .scene { transition: none; }
}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.04)}}
@keyframes blink{0%,93%,100%{opacity:0}94%,97%{opacity:1}}
@keyframes floatZ{0%{transform:translate(0,0);opacity:0}20%{opacity:.85}100%{transform:translate(16px,-52px);opacity:0}}
@keyframes steam{0%{transform:translateY(0);opacity:0}30%{opacity:.65}100%{transform:translateY(-30px);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(2.2deg)}}
@keyframes swing{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes typeTap{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes footTap{0%,100%{transform:rotate(0deg)}50%{transform:rotate(9deg)}}
@keyframes tailFlick{0%,78%,100%{transform:rotate(0deg)}86%{transform:rotate(16deg)}}
@keyframes glowPulse{0%,100%{opacity:.3}50%{opacity:.55}}
@keyframes swatA{0%{transform:rotate(0deg)}35%{transform:rotate(-75deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0deg)}}
@keyframes popIn{from{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dropIn{0%{transform:translateY(-70px);opacity:0}65%{transform:translateY(5px);opacity:1}100%{transform:translateY(0)}}
@keyframes twitchy{0%,100%{transform:translateX(0)}30%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes dropFall{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(80px);opacity:0}}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes dashMove{to{stroke-dashoffset:-140}}
@keyframes dashBack{to{stroke-dashoffset:168}}
@keyframes exhaust{0%{transform:translate(0,0);opacity:0}20%{opacity:.7}100%{transform:translate(-44px,-14px);opacity:0}}
@keyframes carBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-46px)}}
@keyframes ballB{0%,100%{transform:translateY(0)}45%{transform:translateY(-56px)}70%{transform:translateY(0)}}
@keyframes kickA{0%,100%{transform:rotate(0deg)}45%{transform:rotate(24deg)}}
@keyframes punchJab{0%,62%,100%{transform:scale(1)}46%{transform:scale(1.12)}}
@keyframes bagSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes drumHit{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(11deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mHero{0%{transform:translateX(-140px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}22%{transform:translateX(250px);animation-timing-function:cubic-bezier(.3,0,.4,1)}28%{transform:translateX(330px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translateX(480px);animation-timing-function:cubic-bezier(.25,.1,.25,1)}56%,100%{transform:translateX(560px)}}
@keyframes mCam{0%{transform:translateX(590px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}22%{transform:translateX(200px);animation-timing-function:cubic-bezier(.3,0,.4,1)}28%{transform:translateX(120px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translateX(-30px);animation-timing-function:cubic-bezier(.25,.1,.25,1)}56%,62%{transform:translateX(-110px);animation-timing-function:cubic-bezier(.4,0,.2,1)}70%,90%{transform:translateX(-240px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}100%{transform:translateX(590px)}}
@keyframes mShowRun{0%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes mShowCeleb{0%,58%{opacity:0}60%,93%{opacity:1}97%,100%{opacity:0}}
@keyframes mRunA{0%,100%{transform:rotate(30deg)}50%{transform:rotate(-32deg)}}
@keyframes mRunB{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(30deg)}}
@keyframes mBall{0%{transform:translate(-90px,1132px);opacity:1;animation-timing-function:cubic-bezier(.45,.05,.55,.95)}20%{transform:translate(300px,1132px);animation-timing-function:cubic-bezier(.2,0,.6,1)}24%{transform:translate(392px,1132px);animation-timing-function:cubic-bezier(0,0,.4,1)}28%{transform:translate(400px,1132px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}46%{transform:translate(540px,1132px);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}56%,60%{transform:translate(596px,1132px);opacity:1;animation-timing-function:cubic-bezier(.2,0,.8,1)}64%{transform:translate(700px,1020px);animation-timing-function:cubic-bezier(.4,0,1,1)}68%{transform:translate(806px,1052px);animation-timing-function:cubic-bezier(0,0,.4,1)}72%,94%{transform:translate(800px,1104px);opacity:1}96%{transform:translate(800px,1104px);opacity:0}97%{transform:translate(-90px,1132px);opacity:0}100%{transform:translate(-90px,1132px);opacity:1}}
@keyframes mSpin{0%,22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0,0,.4,1)}26%{transform:rotate(-16deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}30%{transform:rotate(12deg);animation-timing-function:cubic-bezier(.25,.1,.25,1)}34%,100%{transform:rotate(0deg)}}
@keyframes mFall{0%,45%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.5,0,.9,.6)}51%,86%{transform:rotate(80deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}92%,100%{transform:rotate(0deg)}}
@keyframes mDive{0%,61%{transform:translate(0px,0px) rotate(0deg);animation-timing-function:cubic-bezier(.4,0,1,1)}66%,88%{transform:translate(-90px,52px) rotate(-78deg);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}94%,100%{transform:translate(0px,0px) rotate(0deg)}}
@keyframes mReady{0%,100%{transform:translateX(0)}25%{transform:translateX(-14px)}75%{transform:translateX(14px)}}
@keyframes mNet{0%,67%{transform:scale(1,1);animation-timing-function:cubic-bezier(0,0,.4,1)}71%{transform:scale(1.07,1.05);animation-timing-function:cubic-bezier(.25,.1,.25,1)}75%,100%{transform:scale(1,1)}}
@keyframes mGol{0%,66%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}71%{opacity:1;transform:scale(1.08)}76%{transform:scale(1)}90%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(1)}}
@keyframes mMeg{0%,22%{opacity:0}26%,36%{opacity:1}42%,100%{opacity:0}}
/* Generated from the artboard's inline styles */
.sv1{position:absolute;inset:0;width:100%;height:100%}
.sv2{cursor:pointer}
.sv3{fill:var(--accent-soft)}
.sv4{transform-box:fill-box;transform-origin:top center;animation:sway 6s ease-in-out infinite}
.sv5{transform-box:fill-box;transform-origin:top center;animation:sway 6s ease-in-out infinite reverse}
.sv6{transform-box:fill-box;transform-origin:bottom center}
.sv7{font-family:var(--mono);font-size:14px}
.sv8{transform-box:fill-box;transform-origin:bottom center;animation:breathe 3.4s ease-in-out infinite}
.sv9{animation:twitchy .55s ease}
.sv10{font-family:var(--mono)}
.sv11{font-size:20px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite}
.sv12{font-size:26px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite 1.2s}
.sv13{font-size:32px;transform-box:fill-box;transform-origin:center;animation:floatZ 3.6s linear infinite 2.4s}
.sv14{transform-box:fill-box;transform-origin:bottom left;animation:popIn .22s ease}
.sv15{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:19px;color:#2B2620;white-space:nowrap}
.sv16{font-family:var(--serif);font-size:26px}
.sv17{transform:rotate({{ clockMinDeg }}deg);transform-origin:1290px 165px;transition:transform 1.4s cubic-bezier(.34,1.4,.4,1)}
.sv18{transform:rotate({{ clockHourDeg }}deg);transform-origin:1290px 165px;transition:transform 1.4s cubic-bezier(.34,1.4,.4,1)}
.sv19{animation:glowPulse 5s ease-in-out infinite}
.sv20{stroke:var(--accent)}
.sv21{animation:blink 5.2s linear infinite}
.sv22{transform-box:fill-box;transform-origin:top center;animation:typeTap .52s ease-in-out infinite}
.sv23{transform-box:fill-box;transform-origin:top center;animation:typeTap .52s ease-in-out infinite .26s}
.sv24{transform-box:fill-box;transform-origin:812px 465px;animation:swatA .65s ease}
.sv25{transform-box:fill-box;transform-origin:bottom;animation:steam 2.6s linear infinite}
.sv26{transform-box:fill-box;transform-origin:bottom;animation:steam 2.6s linear infinite 1.1s}
.sv27{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.sv28{animation:dropIn .7s ease}
.sv29{fill:var(--accent);animation:pulseDot 2.4s ease-in-out infinite}
.sv30{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:swing 4.5s ease-in-out infinite}
.sv31{font-family:var(--mono);font-size:22px;letter-spacing:.14em}
.sv32{font-family:var(--mono);font-size:18px;letter-spacing:.3em;fill:var(--accent)}
.sv33{animation:pulseDot 3.2s ease-in-out infinite}
.sv34{animation:pulseDot 4.1s ease-in-out infinite 1s}
.sv35{transform-box:fill-box;transform-origin:bottom;animation:steam 2.8s linear infinite}
.sv36{transform-box:fill-box;transform-origin:bottom;animation:steam 2.8s linear infinite 1.3s}
.sv37{animation:blink 6.1s linear infinite .8s}
.sv38{transform-box:fill-box;transform-origin:top center;animation:footTap 1.1s ease-in-out infinite}
.sv39{transform-box:fill-box;transform-origin:bottom left;animation:tailFlick 5s ease-in-out infinite}
.sv40{animation:popIn .2s ease}
.sv41{font-family:var(--mono);font-size:17px}
.sv42{animation:dashMove 1.2s linear infinite}
.sv43{transform-box:fill-box;transform-origin:bottom right;animation:sway 1.4s ease-in-out infinite}
.sv44{animation:dropFall 1.8s linear infinite}
.sv45{animation:dropFall 2.2s linear infinite .7s}
.sv46{transform-box:fill-box;transform-origin:bottom;animation:steam 3s linear infinite}
.sv47{transform-box:fill-box;transform-origin:bottom;animation:steam 3s linear infinite 1.4s}
.sv48{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:sway 7s ease-in-out infinite}
.sv49{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:16px;color:#2B2620}
.sv50{animation:dashBack .8s linear infinite}
.sv51{cursor:pointer;animation:drift 9s ease-in-out infinite}
.sv52{cursor:pointer;animation:drift 12s ease-in-out infinite 2s}
.sv53{animation:exhaust 2s linear infinite}
.sv54{animation:exhaust 2s linear infinite 1s}
.sv55{animation:carBounce .55s ease-in-out infinite}
.sv56{animation:blink 5.7s linear infinite 1.4s}
.sv57{transform-box:fill-box;transform-origin:center;animation:wheelSpin 1.1s linear infinite}
.sv58{cursor:pointer;animation:drift 11s ease-in-out infinite}
.sv59{animation:blink 5.5s linear infinite .4s}
.sv60{transform-box:fill-box;transform-origin:top center;animation:kickA .9s ease-in-out infinite}
.sv61{cursor:pointer;animation:ballB .9s ease-in-out infinite}
.sv62{font-family:var(--mono);font-size:14px;letter-spacing:.1em}
.sv63{cursor:pointer;transform-box:fill-box;transform-origin:top center;animation:bagSway 2.4s ease-in-out infinite}
.sv64{animation:blink 4.9s linear infinite 1.1s}
.sv65{transform-origin:966px 432px;animation:punchJab 1.3s ease-in-out infinite}
.sv66{animation:glowPulse 3.4s ease-in-out infinite}
.sv67{fill:var(--accent)}
.sv68{fill:var(--accent);animation:pulseDot 2.2s ease-in-out infinite}
.sv69{cursor:pointer;animation:glowPulse 3.4s ease-in-out infinite}
.sv70{animation:bob 3.2s ease-in-out infinite}
.sv71{animation:blink 4.6s linear infinite .6s}
.sv72{transform-box:fill-box;transform-origin:top right;animation:typeTap .5s ease-in-out infinite}
.sv73{cursor:pointer;font-family:var(--serif)}
.sv74{font-size:34px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite}
.sv75{font-size:28px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite 1s}
.sv76{font-size:30px;transform-box:fill-box;transform-origin:center;animation:floatZ 3s linear infinite 2s}
.sv77{animation:blink 5.8s linear infinite 2s}
.sv78{transform-origin:858px 400px;animation:drumHit .42s ease-in-out infinite}
.sv79{transform-origin:862px 400px;animation:drumHit .42s ease-in-out infinite .21s}
.sv80{animation:mCam 12s linear infinite}
.sv81{cursor:pointer;animation:drift 13s ease-in-out infinite 3s}
.sv82{transform-origin:794px 1055px;animation:mNet 12s linear infinite}
.sv83{animation:mShowRun 12s linear infinite}
.sv84{animation:mReady 2.6s ease-in-out infinite}
.sv85{transform-origin:790px 1150px;animation:mDive 12s linear infinite}
.sv86{animation:mShowCeleb 12s linear infinite}
.sv87{cursor:pointer;transform-origin:360px 1150px;animation:mSpin 12s linear infinite}
.sv88{font-family:var(--mono);font-size:26px;letter-spacing:.12em;animation:mMeg 12s linear infinite}
.sv89{cursor:pointer;transform-origin:505px 1150px;animation:mFall 12s linear infinite}
.sv90{cursor:pointer;animation:mBall 12s linear infinite}
.sv91{animation:mHero 12s linear infinite}
.sv92{transform-origin:0px 1030px;animation:mRunA .5s ease-in-out infinite}
.sv93{transform-origin:0px 1030px;animation:mRunB .5s ease-in-out infinite}
.sv94{transform-origin:0px 1096px;animation:mRunB .5s ease-in-out infinite}
.sv95{transform-origin:0px 1096px;animation:mRunA .5s ease-in-out infinite}
.sv96{transform:translateX(560px);animation:mShowCeleb 12s linear infinite}
.sv97{animation:bob .9s ease-in-out infinite}
.sv98{font-family:var(--serif);font-size:96px;font-weight:600;transform-origin:450px 560px;animation:mGol 12s linear infinite}
.sv99{animation:popIn .22s ease}