/* Newsreader and Figtree, SIL Open Font License 1.1, served by this server. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-latin.01817351.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: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-latin-ext.cbca0011.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-Italic-latin.a99fb127.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: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/Newsreader-Italic-latin-ext.750e9629.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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree-latin.8330490a.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: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree-latin-ext.f153aa07.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: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree-Italic-latin.ba0e9e20.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: 'Figtree';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/Figtree-Italic-latin-ext.12fc79a7.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;
}

/* Caititu. Made from the prototype (commit a05acfb) by a one-off conversion: one class per inline style
   string, in order of first use, named by role when shared and by page otherwise (home-01...). The page
   rules are wrapped in :where() so that the classes win wherever the inline styles won. */
:where(body){margin:0;background:#2A2521}
:where(a){color:#2A2521;text-decoration:none;background:url(/assets/underline.8d1c9004.svg) no-repeat left bottom/100% 7px;padding-bottom:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors: active), print{:where(a){background:none;text-decoration:underline}}
:where(a:hover){color:#5F574F}
:where(summary)::-webkit-details-marker{display:none}
.page{container-type: inline-size; background: #FAF8F2; color: #2A2521; font-family: Newsreader, Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.55}
.site-header{background: #EDE5D0; padding: 16px clamp(20px, 3.2cqw, 40px)}
.site-header-inner{max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px}
.brand{display: flex; align-items: center; gap: 0.3em; min-height: 44px; font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.01em; text-decoration: none; background: none; padding-bottom: 0}
.brand-symbol{display: block; width: 1.335em; height: 0.89em; flex: none}
.beta-badge{margin-left: 0.15em; padding: 4px 6px; border: 1.5px solid #3F8A5F; border-radius: 4px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0.08em}
.header-menus{display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px}
.nav-main{display: flex; flex-wrap: wrap; gap: 0 4px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; font-weight: 500}
.nav-link{display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; background: none}
.nav-lang{display: flex; align-items: center; gap: 0 2px; padding-left: 12px; border-left: 1px solid #C9BFA6; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.06em}
.lang-link-current{display: flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; background: url(/assets/underline-bold.e1aa3b6e.svg) no-repeat left 6px bottom 7px/calc(100% - 12px) 8px}
.lang-link{display: flex; align-items: center; min-height: 44px; padding: 0 8px; text-decoration: none; background: none}
/* narrow screens: the menu of the languages goes on in the line of the main menu (after "Contato"), not on a line
   of its own: the two menus flow as words do, each link keeping its 44px of height */
@container (max-width: 759.98px){
.header-menus{display: block; line-height: 0}
.nav-main,.nav-lang{display: inline}
.nav-main a,.nav-lang a{display: inline-flex; vertical-align: middle}
.nav-lang{margin-left: 4px; padding-left: 0; border-left: 0}
.nav-lang a:first-child{border-left: 1px solid #C9BFA6; margin-left: 8px; padding-left: 12px}
}
.home-01{background: #EDE5D0; padding: clamp(48px, 6.5cqw, 88px) clamp(20px, 3.2cqw, 40px) clamp(64px, 8cqw, 112px)}
.home-02{max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 32px 48px}
.home-03{flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 28px}
.home-04{margin: 0; font-weight: 500; font-size: clamp(40px, 5.6cqw, 72px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance}
.home-05{color: #3F8A5F}
.home-06{margin: 0; max-width: 660px; font-size: clamp(18px, 1.7cqw, 21px); line-height: 1.5; text-wrap: pretty}
.home-07{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; line-height: 22px; font-weight: 500}
.button-dark{display: flex; align-items: center; min-height: 52px; padding: 0 24px; background: #2A2521; color: #EDE5D0; border-radius: 8px; text-decoration: none}
.button-link{display: flex; align-items: center; min-height: 44px; background-position: left bottom 10px}
.home-08{background: #FAF8F2; padding: clamp(48px, 5.5cqw, 64px) clamp(20px, 3.2cqw, 40px) 0}
.home-09{max-width: 1120px; margin: 0 auto; padding-bottom: clamp(48px, 5.5cqw, 64px); border-bottom: 1px solid #C9BFA6; display: flex; flex-direction: column; gap: 32px}
.home-10{display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px}
.home-11{margin: 0; font-weight: 500; font-size: clamp(28px, 2.8cqw, 36px); line-height: 1.2; letter-spacing: -0.01em}
.home-12{display: flex; align-items: center; min-height: 44px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; font-weight: 500; background-position: left bottom 10px}
.home-date{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #5F574F}
.home-13{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 32px 24px}
.home-14{display: flex; flex-direction: column; gap: 6px}
.big-number{font-size: 44px; line-height: 1; font-weight: 500; color: #3F8A5F}
.home-15{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #5F574F}
.home-16{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; color: #5F574F; font-style: italic}
.eyebrow{display: flex; align-items: center; gap: 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5F574F}
.eyebrow-mark{flex: none; width: 10px; height: 10px; border-radius: 2px; background: #3F8A5F}
.strong{font-weight: 500}
.band-dark{background: #2A2521; color: #EDE5D0; padding: clamp(56px, 7cqw, 88px) clamp(20px, 3.2cqw, 40px)}
.container-gap-40{max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px}
.stack-16{display: flex; flex-direction: column; gap: 16px}
.eyebrow-on-dark{display: flex; align-items: center; gap: 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #B0A898}
.band-title-wide{margin: 0; max-width: 820px; font-weight: 500; font-size: clamp(30px, 3.2cqw, 40px); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance}
.band-lead{margin: 0; max-width: 760px; font-size: clamp(18px, 1.6cqw, 20px); line-height: 1.5; text-wrap: pretty}
.title-small{margin: 0; font-weight: 500; font-size: 22px; line-height: 1.3}
.band-colar{background: #EDE5D0; padding: clamp(56px, 7cqw, 88px) clamp(20px, 3.2cqw, 40px)}
.home-92{flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px}
.title-section{margin: 0; font-weight: 500; font-size: clamp(30px, 3.2cqw, 40px); line-height: 1.15; letter-spacing: -0.01em}
.text-640{margin: 0; max-width: 640px; text-wrap: pretty}
.site-footer{background: #2A2521; color: #EDE5D0; padding: 56px clamp(20px, 3.2cqw, 40px) 48px}
.site-footer-inner{max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px 64px}
.footer-about{flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px}
.footer-brand{display: flex; align-items: center; gap: 0.3em; font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -0.01em}
.footer-note{margin: 0; max-width: 520px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 21px; color: #B0A898}
.footer-credit{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #B0A898}
.footer-nav{display: flex; flex-wrap: wrap; gap: 0 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; font-weight: 500}
.footer-link{display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: #EDE5D0; background-position: left 10px bottom 10px; background-size: calc(100% - 20px) 7px}
.nav-link-current{display: flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; background: url(/assets/underline-bold.e1aa3b6e.svg) no-repeat left 10px bottom 7px/calc(100% - 20px) 8px}
.hero-colar{background: #EDE5D0; padding: clamp(40px, 5.5cqw, 72px) clamp(20px, 3.2cqw, 40px) clamp(48px, 6.5cqw, 88px)}
.container-start-20{max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px}
.about-01{margin: 0; max-width: 940px; font-weight: 500; font-size: clamp(36px, 4.4cqw, 56px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance}
.lead{margin: 0; max-width: 760px; font-size: clamp(19px, 1.75cqw, 22px); line-height: 1.5; text-wrap: pretty}
.band{padding: clamp(56px, 7cqw, 88px) clamp(20px, 3.2cqw, 40px)}
.container-gap-32{max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px}
.stack-12{display: flex; flex-direction: column; gap: 12px}
.about-band{padding: 0 clamp(20px, 3.2cqw, 40px) clamp(56px, 7cqw, 88px)}
.about-ruled{padding-top: clamp(56px, 7cqw, 88px); border-top: 1px solid #C9BFA6}
.about-02{max-width: 760px; display: flex; flex-direction: column}
.about-03{display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid #C9BFA6}
.about-04{flex: none; width: 44px; font-size: 32px; line-height: 1; font-weight: 500; color: #3F8A5F}
.about-05{min-width: 0; display: flex; flex-direction: column; gap: 8px}
.text{margin: 0; text-wrap: pretty}
.card-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px 48px}
.stack-10{display: flex; flex-direction: column; gap: 10px}
.link-row{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; line-height: 22px; font-weight: 500}
.page-title{margin: 0; max-width: 900px; font-weight: 500; font-size: clamp(36px, 4.4cqw, 56px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance}
.howto-02{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 36px 40px}
.howto-10{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 32px 64px}
.howto-11{display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid #3F8A5F}
.howto-12{margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; color: #5F574F; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 23px}
.site-footer-ruled{background: #2A2521; color: #EDE5D0; padding: 56px clamp(20px, 3.2cqw, 40px) 48px; border-top: 1px solid #4A433C}
.hero-colar-short{background: #EDE5D0; padding: clamp(40px, 5.5cqw, 72px) clamp(20px, 3.2cqw, 40px) clamp(48px, 6cqw, 80px)}
.band-tight{padding: clamp(40px, 5cqw, 64px) clamp(20px, 3.2cqw, 40px) clamp(56px, 7cqw, 88px)}
.contact-01{max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px 72px}
.contact-02{flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px}
.contact-03{display: flex; flex-direction: column; gap: 8px}
.contact-04{box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #2A2521; border-radius: 8px; background: #FAF8F2; color: #2A2521; font-family: inherit; font-size: 16px}
.contact-05{box-sizing: border-box; width: 100%; min-height: 160px; padding: 12px 14px; border: 1px solid #2A2521; border-radius: 8px; background: #FAF8F2; color: #2A2521; font-family: inherit; font-size: 16px; line-height: 24px; resize: vertical}
.contact-06{display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px}
.contact-07{min-height: 52px; padding: 0 24px; border: 0; border-radius: 8px; background: #2A2521; color: #EDE5D0; font-family: inherit; font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer}
.contact-08{margin: 0; flex: 1 1 240px; min-width: 0; font-size: 14px; line-height: 21px}
.contact-09{flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 32px}
.contact-10{margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px}
.contact-11{display: flex; flex-direction: column; gap: 10px; padding-top: 28px; border-top: 1px solid #C9BFA6}
/* Added with the texts of stage 2 */
.band-ruled{padding: clamp(56px, 7cqw, 88px) clamp(20px, 3.2cqw, 40px); border-top: 1px solid #C9BFA6}
.footer-credit a{color: inherit}
.footer-side{align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; text-align: right}
.footer-side .footer-credit{padding-right: 10px}
@container (max-width: 700px){.footer-side{align-items: flex-start; text-align: left}.footer-side .footer-credit{padding-right: 0}}
.honeypot{position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden}

/* Overview diagram (home page, section after "O que há na base"): how Caititu works, drawn in pencil. Five scenes:
   the question, the request, the search (Caititu at a shelf of decisions: it searches and hands over what it found),
   the summary, the reading. Each scene is a numbered paragraph (the number in a pencil ring, the words beside it),
   then its drawing. One column with arrows down on phones; words beside the drawing from a container of 600px; from
   960px a ring of three columns, 1 2 3 along the top and 5 . 4 along the bottom (4 under 3, 5 under 1), with short
   arrows between neighbours: across the top, down the right column, back along the bottom through the free middle,
   up the left column. Prefix ov-. The pencil draws each scene once, in
   the order of the story (ov-ink, ov-fade: delay and length from ov-tN / ov-dN, tenths of a second), from the page load
   or, where the browser has scroll-driven animations, as each scene comes into view (the block at the end); the green
   path loops every 18 s, every element on the same clock (delay 0, its own keyframes ov-kN) and all fading out together
   at 16.8-17.4 s. Animated: stroke-dashoffset, opacity, transform. Every stroke that draws itself has pathLength=1.
   The real text is never hidden. */
.ov-figure{margin: 0; display: flex; flex-direction: column; gap: clamp(28px, 3.4cqw, 40px); color: #2A2521}
.ov-steps{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 420px; font-family: Newsreader, Georgia, 'Times New Roman', serif}
.ov-step{position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0}
/* a numbered paragraph: the number in its ring, the words beside it from the same line (the first line centred on
   the ring: (34 - 24.65) / 2 = 4.7px), the line on privacy of scene 3 under them */
.ov-head{display: flex; align-items: flex-start; gap: 12px; min-width: 0}
.ov-words{flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 4.7px}
.ov-num{position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 17px; line-height: 1; font-style: normal; font-weight: 500; font-variant-numeric: lining-nums}
.ov-num-ring{position: absolute; left: -2px; top: -2px; width: 38px; height: 38px; display: block; overflow: visible}
.ov-art{position: relative; min-width: 0}
.ov-text{margin: 0; font-size: 17px; line-height: 1.45; text-wrap: pretty}
/* the arrow down points at the number of the next scene (its tip, x = 21 of its drawing, over the middle of the ring) */
.ov-arrow{position: relative; display: block; flex: none; width: 44px; height: 60px; margin: 0 0 4px -4px}
.ov-arrow svg{position: absolute; display: block; overflow: visible}
.ov-av{left: 0; top: 0; width: 44px; height: 60px}
.ov-ah{left: 0; top: 0; width: 72px; height: 40px; visibility: hidden}
/* wide screens: the arrows from 3 to 4 (down the right column) and from 4 to 5 (left along the bottom row) are drawn in
   three pieces, a tail and a head of a fixed size and between them a rail stretched along its length only; the dot of
   the rail is on a box as long as the rail, moved by its own length. 3 to 4: tail 72 x 44, head 34 x 22, the line at
   x 17 (the middle of the ring of 4) */
.ov-d3-tail{width: 72px; height: 44px}
.ov-d3-rail{left: 9px; top: 44px; width: 16px; height: calc(100% - 66px)}
.ov-d3-run{position: absolute; display: block; left: 17px; top: 44px; width: 0; height: calc(100% - 66px); opacity: 0}
.ov-d3-run svg{left: -4px; top: -4px; width: 8px; height: 8px}
.ov-d3-head{top: auto; bottom: 0; width: 34px; height: 22px}
/* 4 to 5: tail (on the right) and head (on the left) 56 x 40, the line at y 19 where they meet the rail; the rail 40px
   high, as its drawing, so that it keeps the width of its line and the height of its bow */
.ov-a4-tail{left: auto; right: 0; width: 56px; height: 40px}
.ov-a4-rail{left: 56px; width: calc(100% - 112px); height: 40px}
.ov-a4-run{position: absolute; display: block; left: 56px; top: 19px; width: calc(100% - 112px); height: 0; opacity: 0}
.ov-a4-run svg{left: auto; right: -4px; top: -4px; width: 8px; height: 8px}
.ov-a4-head{width: 56px; height: 40px}
/* the way back from scene 5 to scene 1, on wide screens only: a line straight up the left column, the last thing of the
   drawing of scene 1 (the layout block); elsewhere it is there, hidden, out of the flow: tail 34 x 30 (leaning from x 17
   to x 24.6), head 34 x 26, the rail between them stretched at x 24.6 */
.ov-up{position: absolute; display: block; left: 0; top: 0; width: 34px; height: 100px; visibility: hidden; pointer-events: none}
.ov-up svg{position: absolute; display: block; overflow: visible}
.ov-up-head{left: 0; top: 0; width: 34px; height: 26px}
.ov-up-rail{left: 16.6px; top: 26px; width: 16px; height: calc(100% - 56px)}
.ov-up-run{position: absolute; display: block; left: 24.6px; top: 26px; width: 0; height: calc(100% - 56px); opacity: 0}
.ov-up-run svg{left: -4px; top: auto; bottom: -4px; width: 8px; height: 8px}
.ov-up-tail{left: 0; top: auto; bottom: 0; width: 34px; height: 30px}
.ov-win{display: block; width: 100%; max-width: 300px; height: auto; overflow: visible}
.ov-page{display: block; width: 100%; max-width: 280px; height: auto; overflow: visible}
.ov-shelf{display: block; width: 100%; max-width: 340px; height: auto; overflow: visible}
.ov-art3{max-width: 340px}
/* the question: an HTML box drawn around by four strokes that stretch with it along their length only */
.ov-bubble{position: relative; margin: 10px 26px 0 7px; padding: 13px 17px 15px}
.ov-frame{position: absolute; inset: 0; pointer-events: none}
.ov-e{position: absolute; display: block; overflow: visible}
.ov-et{left: -7px; top: -5px; width: calc(100% + 14px); height: 10px}
.ov-eb{left: 46px; bottom: -5px; width: calc(100% - 39px); height: 10px}
.ov-ebl{left: -7px; bottom: -5px; width: 31px; height: 10px}
.ov-er{right: -5px; top: -7px; width: 10px; height: calc(100% + 14px)}
.ov-el{left: -5px; top: -7px; width: 10px; height: calc(100% + 14px)}
.ov-tail{position: absolute; left: 14px; top: calc(100% - 5px); width: 40px; height: 30px; display: block; overflow: visible}
.ov-marks{position: absolute; right: -32px; top: -32px; width: 40px; height: 40px; display: block; overflow: visible}
.ov-q{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21px; text-wrap: pretty}
.ov-person{display: block; width: 56px; height: 86px; margin: 24px 0 0 -6px; overflow: visible}
/* hand-written labels: Newsreader italic; green only in strokes, never in the text */
/* the owner's message, always on two lines, at the size of the scene labels; the green underline under the second */
.ov-note{margin: 0 0 4px 4px; font-size: 20px; line-height: 1.3; font-style: italic; font-weight: 500}
.ov-l1{display: block; white-space: nowrap}
/* the shelf's label stands on the shelf (in the room the drawing leaves above its top board, x 50% to 97%), styled
   as the site's small labels: a label, not a second hand-written phrase */
.ov-shelfbox{position: relative}
.ov-tag{position: absolute; left: 50%; top: 0; width: 47%; margin: 9.7% 0 0; transform: translateY(-100%); display: flex; justify-content: center; white-space: nowrap; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5F574F}
.ov-mark{position: relative; display: inline-block}
.ov-nw{white-space: nowrap}
.ov-uline{position: absolute; left: -2px; bottom: -5px; width: calc(100% + 4px); height: 6px; display: block; overflow: visible}
.ov-cite{margin: 8px 0 0; font-size: 18px; line-height: 1.35; text-wrap: pretty}
.ov-privacy{display: flex; align-items: flex-start; gap: 9px; margin: 0; max-width: 340px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #5F574F}
.ov-lock{display: block; flex: none; width: 18px; height: 21px; margin-top: -1px; color: #2A2521; overflow: visible}
/* the dot that runs along an arrow: a dash of no length with a round cap */
.ov-dot{stroke: #3F8A5F; stroke-width: 7; stroke-dasharray: 0.001 2; opacity: 0}
/* the clock */
.ov-ink,.ov-fade{animation-duration: var(--ov-d, .4s); animation-delay: var(--ov-t, 0s); animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both}
.ov-ink{stroke-dasharray: 1 2; animation-name: ov-draw}
.ov-fade{animation-name: ov-fade}
.ov-lp{animation-duration: 18s; animation-delay: 0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both}
.ov-ld{stroke-dasharray: 1 2}
@keyframes ov-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes ov-fade{from{opacity: 0}to{opacity: 1}}
.ov-t0{--ov-t:0s;--ov-tn:0}.ov-t2{--ov-t:0.2s;--ov-tn:2}.ov-t5{--ov-t:0.5s;--ov-tn:5}.ov-t6{--ov-t:0.6s;--ov-tn:6}.ov-t9{--ov-t:0.9s;--ov-tn:9}.ov-t10{--ov-t:1s;--ov-tn:10}.ov-t11{--ov-t:1.1s;--ov-tn:11}.ov-t12{--ov-t:1.2s;--ov-tn:12}.ov-t14{--ov-t:1.4s;--ov-tn:14}.ov-t15{--ov-t:1.5s;--ov-tn:15}.ov-t16{--ov-t:1.6s;--ov-tn:16}.ov-t25{--ov-t:2.5s;--ov-tn:25}.ov-t26{--ov-t:2.6s;--ov-tn:26}.ov-t28{--ov-t:2.8s;--ov-tn:28}.ov-t30{--ov-t:3s;--ov-tn:30}.ov-t32{--ov-t:3.2s;--ov-tn:32}.ov-t33{--ov-t:3.3s;--ov-tn:33}.ov-t34{--ov-t:3.4s;--ov-tn:34}.ov-t35{--ov-t:3.5s;--ov-tn:35}.ov-t36{--ov-t:3.6s;--ov-tn:36}.ov-t38{--ov-t:3.8s;--ov-tn:38}.ov-t39{--ov-t:3.9s;--ov-tn:39}.ov-t40{--ov-t:4s;--ov-tn:40}.ov-t41{--ov-t:4.1s;--ov-tn:41}.ov-t42{--ov-t:4.2s;--ov-tn:42}.ov-t43{--ov-t:4.3s;--ov-tn:43}.ov-t50{--ov-t:5s;--ov-tn:50}.ov-t51{--ov-t:5.1s;--ov-tn:51}.ov-t52{--ov-t:5.2s;--ov-tn:52}.ov-t53{--ov-t:5.3s;--ov-tn:53}.ov-t54{--ov-t:5.4s;--ov-tn:54}.ov-t55{--ov-t:5.5s;--ov-tn:55}.ov-t56{--ov-t:5.6s;--ov-tn:56}.ov-t57{--ov-t:5.7s;--ov-tn:57}.ov-t58{--ov-t:5.8s;--ov-tn:58}.ov-t59{--ov-t:5.9s;--ov-tn:59}.ov-t60{--ov-t:6s;--ov-tn:60}.ov-t61{--ov-t:6.1s;--ov-tn:61}.ov-t62{--ov-t:6.2s;--ov-tn:62}.ov-t63{--ov-t:6.3s;--ov-tn:63}.ov-t66{--ov-t:6.6s;--ov-tn:66}.ov-t70{--ov-t:7s;--ov-tn:70}.ov-t73{--ov-t:7.3s;--ov-tn:73}.ov-t74{--ov-t:7.4s;--ov-tn:74}.ov-t75{--ov-t:7.5s;--ov-tn:75}.ov-t76{--ov-t:7.6s;--ov-tn:76}.ov-t85{--ov-t:8.5s;--ov-tn:85}.ov-t86{--ov-t:8.6s;--ov-tn:86}.ov-t88{--ov-t:8.8s;--ov-tn:88}.ov-t90{--ov-t:9s;--ov-tn:90}.ov-t92{--ov-t:9.2s;--ov-tn:92}.ov-t93{--ov-t:9.3s;--ov-tn:93}.ov-t94{--ov-t:9.4s;--ov-tn:94}.ov-t95{--ov-t:9.5s;--ov-tn:95}.ov-t96{--ov-t:9.6s;--ov-tn:96}.ov-t97{--ov-t:9.7s;--ov-tn:97}.ov-t98{--ov-t:9.8s;--ov-tn:98}.ov-t100{--ov-t:10s;--ov-tn:100}.ov-t101{--ov-t:10.1s;--ov-tn:101}.ov-t123{--ov-t:12.3s;--ov-tn:123}.ov-t124{--ov-t:12.4s;--ov-tn:124}.ov-t128{--ov-t:12.8s;--ov-tn:128}.ov-t129{--ov-t:12.9s;--ov-tn:129}.ov-t130{--ov-t:13s;--ov-tn:130}.ov-t131{--ov-t:13.1s;--ov-tn:131}.ov-t132{--ov-t:13.2s;--ov-tn:132}.ov-t133{--ov-t:13.3s;--ov-tn:133}.ov-t134{--ov-t:13.4s;--ov-tn:134}.ov-t135{--ov-t:13.5s;--ov-tn:135}.ov-t136{--ov-t:13.6s;--ov-tn:136}.ov-t138{--ov-t:13.8s;--ov-tn:138}.ov-t139{--ov-t:13.9s;--ov-tn:139}.ov-t140{--ov-t:14s;--ov-tn:140}
.ov-d1{--ov-d:0.1s;--ov-dn:1}.ov-d2{--ov-d:0.2s;--ov-dn:2}.ov-d3{--ov-d:0.3s;--ov-dn:3}.ov-d4{--ov-d:0.4s;--ov-dn:4}.ov-d5{--ov-d:0.5s;--ov-dn:5}.ov-d6{--ov-d:0.6s;--ov-dn:6}.ov-d7{--ov-d:0.7s;--ov-dn:7}
@keyframes ov-k1{0%,8.9%{stroke-dashoffset:1.01;opacity:1}9.9%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k1{animation-name:ov-k1}
@keyframes ov-k2{0%,9.6%{stroke-dashoffset:1.01;opacity:1}10.6%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k2{animation-name:ov-k2}
@keyframes ov-k3{0%,10.2%{stroke-dashoffset:1.01;opacity:1}11.2%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k3{animation-name:ov-k3}
@keyframes ov-k4{0%,10.6%{stroke-dashoffset:1.01;opacity:1}14.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k4{animation-name:ov-k4}
@keyframes ov-k5{0%,14.2%{stroke-dashoffset:1.01;opacity:1}15.1%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k5{animation-name:ov-k5}
@keyframes ov-k6{0%,14.7%{stroke-dashoffset:1.01;opacity:1}15.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k6{animation-name:ov-k6}
@keyframes ov-k7{0%,10.6%{stroke-dashoffset:0;opacity:0}11.1%,13.9%{opacity:1}14.4%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k7{animation-name:ov-k7}
@keyframes ov-k8{0%,22.5%{opacity:0}23.1%,93.3%{opacity:1}96.7%,100%{opacity:0}}
.ov-k8{animation-name:ov-k8}
@keyframes ov-k9{0%,23.2%{opacity:0}23.8%,93.3%{opacity:1}96.7%,100%{opacity:0}}
.ov-k9{animation-name:ov-k9}
@keyframes ov-k10{0%,23.9%{opacity:0}24.5%,93.3%{opacity:1}96.7%,100%{opacity:0}}
.ov-k10{animation-name:ov-k10}
@keyframes ov-k11{0%,24.4%{stroke-dashoffset:1.01;opacity:1}28.3%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k11{animation-name:ov-k11}
@keyframes ov-k12{0%,28.1%{stroke-dashoffset:1.01;opacity:1}29%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k12{animation-name:ov-k12}
@keyframes ov-k13{0%,28.6%{stroke-dashoffset:1.01;opacity:1}29.6%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k13{animation-name:ov-k13}
@keyframes ov-k14{0%,24.4%{stroke-dashoffset:0;opacity:0}25%,27.8%{opacity:1}28.3%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k14{animation-name:ov-k14}
@keyframes ov-k15{0%,41.7%{stroke-dashoffset:1.01;opacity:1}43.6%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k15{animation-name:ov-k15}
@keyframes ov-k16{0%,38.1%{transform:translateX(0)}39%{transform:translateX(3px)}40%{transform:translateX(0)}41%{transform:translateX(3px)}41.9%,100%{transform:translateX(0)}}
.ov-k16{animation-name:ov-k16}
@keyframes ov-k17{0%,38.1%{stroke-dashoffset:1.01;opacity:1}39.2%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k17{animation-name:ov-k17}
@keyframes ov-k18{0%,39.2%{stroke-dashoffset:1.01;opacity:1}40.3%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k18{animation-name:ov-k18}
@keyframes ov-k19{0%,38.9%{opacity:0;transform:translate(26px,-30px)}41.9%,93.3%{opacity:1;transform:translate(0,0)}96.7%,100%{opacity:0;transform:translate(0,0)}}
.ov-k19{animation-name:ov-k19}
@keyframes ov-k20{0%,40%{opacity:0;transform:translate(26px,-30px)}43.1%,93.3%{opacity:1;transform:translate(0,0)}96.7%,100%{opacity:0;transform:translate(0,0)}}
.ov-k20{animation-name:ov-k20}
@keyframes ov-k21{0%,41.1%{opacity:0;transform:translate(26px,-30px)}44.2%,93.3%{opacity:1;transform:translate(0,0)}96.7%,100%{opacity:0;transform:translate(0,0)}}
.ov-k21{animation-name:ov-k21}
@keyframes ov-k22{0%,43.9%{stroke-dashoffset:1.01;opacity:1}47.8%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k22{animation-name:ov-k22}
@keyframes ov-k23{0%,47.5%{stroke-dashoffset:1.01;opacity:1}48.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k23{animation-name:ov-k23}
@keyframes ov-k24{0%,48%{stroke-dashoffset:1.01;opacity:1}49%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k24{animation-name:ov-k24}
@keyframes ov-k25{0%,43.9%{stroke-dashoffset:0;opacity:0}44.4%,47.2%{opacity:1}47.8%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k25{animation-name:ov-k25}
@keyframes ov-k26{0%,43.9%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.4,0,.75,.6)}46.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k26{animation-name:ov-k26}
@keyframes ov-k27{0%,43.9%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.4,0,.75,.6)}44.4%{opacity:1}46.7%{stroke-dashoffset:-1;opacity:1}46.8%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k27{animation-name:ov-k27}
@keyframes ov-k28{0%,46.7%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:linear}46.9%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k28{animation-name:ov-k28}
@keyframes ov-k29{0%,46.6%{transform:translateY(0);opacity:0}46.7%{transform:translateY(0);opacity:1;animation-timing-function:linear}46.9%{transform:translateY(100%);opacity:1}47%,100%{transform:translateY(100%);opacity:0}}
.ov-k29{animation-name:ov-k29}
@keyframes ov-k30{0%,46.9%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}47.8%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k30{animation-name:ov-k30}
@keyframes ov-k31{0%,46.8%{stroke-dashoffset:0;opacity:0}46.9%{stroke-dashoffset:0;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}47.2%{opacity:1}47.8%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k31{animation-name:ov-k31}
@keyframes ov-k32{0%,55.6%{stroke-dashoffset:1.01;opacity:1}56.9%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k32{animation-name:ov-k32}
@keyframes ov-k33{0%,56.7%{stroke-dashoffset:1.01;opacity:1}58.1%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k33{animation-name:ov-k33}
@keyframes ov-k34{0%,65%{stroke-dashoffset:1.01;opacity:1}69.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k34{animation-name:ov-k34}
@keyframes ov-k35{0%,69.2%{stroke-dashoffset:1.01;opacity:1}70.1%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k35{animation-name:ov-k35}
@keyframes ov-k36{0%,69.7%{stroke-dashoffset:1.01;opacity:1}70.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k36{animation-name:ov-k36}
@keyframes ov-k37{0%,65%{stroke-dashoffset:0;opacity:0}65.6%,68.9%{opacity:1}69.4%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k37{animation-name:ov-k37}
@keyframes ov-k38{0%,58.3%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.4,0,.75,.6)}60.1%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k38{animation-name:ov-k38}
@keyframes ov-k39{0%,58.3%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.4,0,.75,.6)}58.9%{opacity:1}60.1%{stroke-dashoffset:-1;opacity:1}60.2%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k39{animation-name:ov-k39}
@keyframes ov-k40{0%,60.1%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:linear}67.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k40{animation-name:ov-k40}
@keyframes ov-k41{0%,60%{transform:translate(0%,0px);opacity:0}60.1%{transform:translate(0%,0px);opacity:1;animation-timing-function:linear}61.05%{transform:translate(-12.5%,-1.7px);animation-timing-function:linear}62%{transform:translate(-25%,-3.2px);animation-timing-function:linear}62.95%{transform:translate(-37.5%,-4.2px);animation-timing-function:linear}63.9%{transform:translate(-50%,-4.5px);animation-timing-function:linear}64.85%{transform:translate(-62.5%,-4.2px);animation-timing-function:linear}65.8%{transform:translate(-75%,-3.2px);animation-timing-function:linear}66.75%{transform:translate(-87.5%,-1.7px);animation-timing-function:linear}67.7%{transform:translate(-100%,0px);opacity:1}67.8%,100%{transform:translate(-100%,0px);opacity:0}}
.ov-k41{animation-name:ov-k41}
@keyframes ov-k42{0%,67.7%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}69.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k42{animation-name:ov-k42}
@keyframes ov-k43{0%,67.6%{stroke-dashoffset:0;opacity:0}67.7%{stroke-dashoffset:0;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}68.9%{opacity:1}69.4%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k43{animation-name:ov-k43}
@keyframes ov-k44{0%,80%{stroke-dashoffset:1.01;opacity:1}81.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k44{animation-name:ov-k44}
@keyframes ov-k45{0%,77.8%{stroke-dashoffset:1.01;opacity:1}79.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k45{animation-name:ov-k45}
@keyframes ov-k46{0%,78.9%{stroke-dashoffset:1.01;opacity:1}80.6%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k46{animation-name:ov-k46}
@keyframes ov-k47{0%,82.8%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.4,0,.75,.6)}84.8%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k47{animation-name:ov-k47}
@keyframes ov-k48{0%,82.8%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.4,0,.75,.6)}83.3%{opacity:1}84.8%{stroke-dashoffset:-1;opacity:1}84.9%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k48{animation-name:ov-k48}
@keyframes ov-k49{0%,84.8%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:linear}85.7%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k49{animation-name:ov-k49}
@keyframes ov-k50{0%,84.7%{transform:translateY(0);opacity:0}84.8%{transform:translateY(0);opacity:1;animation-timing-function:linear}85.7%{transform:translateY(-100%);opacity:1}85.8%,100%{transform:translateY(-100%);opacity:0}}
.ov-k50{animation-name:ov-k50}
@keyframes ov-k51{0%,85.7%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}87.2%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k51{animation-name:ov-k51}
@keyframes ov-k52{0%,86.9%{stroke-dashoffset:1.01;opacity:1}87.9%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k52{animation-name:ov-k52}
@keyframes ov-k53{0%,87.4%{stroke-dashoffset:1.01;opacity:1}88.4%,93.3%{stroke-dashoffset:0;opacity:1}96.7%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.ov-k53{animation-name:ov-k53}
@keyframes ov-k54{0%,85.6%{stroke-dashoffset:0;opacity:0}85.7%{stroke-dashoffset:0;opacity:1;animation-timing-function:cubic-bezier(.25,.4,.6,1)}86.7%{opacity:1}87.2%,100%{stroke-dashoffset:-1;opacity:0}}
.ov-k54{animation-name:ov-k54}
/* middle widths: the numbered words on the left, the drawing beside them, arrows down between the drawings; no way
   back after scene 5, as on phones */
@container (min-width: 600px) and (max-width: 959.98px){
.ov-steps{max-width: 760px}
.ov-step{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head art" ". out"; column-gap: 40px; row-gap: 0; align-items: start}
.ov-s5{grid-template-areas: "head art"}
.ov-head{grid-area: head}
.ov-art{grid-area: art; justify-self: center; width: 100%; max-width: 320px}
.ov-art3{max-width: 340px}
.ov-arrow{grid-area: out; justify-self: center; margin: 14px 0}
}
/* wide: a ring of three columns, 1 2 3 along the top and 5 . 4 along the bottom, in widths of 0.9 : 1 : 1.5: the
   third column the widest, for the longest words, those of scene 3 and its line on privacy (four lines and two from
   1280px); the words of scene 1, the shortest, at most 10.6em wide (four lines in the three languages), so that the row
   of the numbers leaves little room over the question. Five rows shared by the scenes (subgrid, with the list's gaps:
   gap normal): the words of 1, 2, 3; their drawings; a band for the short arrows from 3 down to 4 and from 5 up to 1;
   the words of 5 and 4; their drawings. So the numbers of a row stand on one line at the top of the row and the
   drawings of a row on one line below them, whatever the length of the words. The drawings of the top row are about as
   tall as one another (the shelf at most 280px wide; the person who asks up to a fifth larger than elsewhere, as
   large as the chats are drawn here, where the first column is wide enough for the question to take three or four
   lines), so that the two arrows of the band are short and of about one length. The words of scene 5, the longest, run
   on over the free middle column (their measure kept under 34em), so that they take about as many lines as those of
   scene 4. The arrows across the top row are placed by the drawing (74px under its top). */
@container (min-width: 960px){
.ov-steps{display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto auto 68px auto auto; column-gap: 72px; row-gap: 0; max-width: none; align-items: start}
.ov-step{display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: normal; align-items: start}
.ov-s1{grid-area: 1 / 1 / 4 / 2}
.ov-s2{grid-area: 1 / 2 / 4 / 3}
.ov-s3{grid-area: 1 / 3 / 4 / 4}
.ov-s4{grid-area: 4 / 3 / 6 / 4}
.ov-s5{grid-area: 4 / 1 / 6 / 3; grid-template-columns: subgrid}
.ov-head{grid-row: 1; margin-bottom: 22px}
.ov-s1 .ov-text{max-width: 10.6em}
.ov-s5 .ov-head{grid-column: 1 / 3}
.ov-s5 .ov-text{max-width: 34em}
.ov-art{grid-row: 2}
.ov-art3{max-width: 280px}
.ov-s5 .ov-art{grid-column: 1}
/* the drawing of scene 1 runs on through the band, the way back filling what its row leaves under the person who asks:
   from 6px under the person to 4px above the ring of scene 5 */
.ov-art1{grid-row: 2 / 4; align-self: stretch; display: flex; flex-direction: column}
.ov-art1 .ov-person{width: clamp(56px, 28%, 67.2px); height: auto; aspect-ratio: 56 / 86}
.ov-up{position: relative; flex: 1 1 auto; min-height: 56px; height: auto; margin: 6px 0 4px; visibility: visible}
/* the drawing of scene 2 runs on through the band, as that of scene 1 does (it holds nothing there) */
.ov-art2{grid-row: 2 / 4; align-self: stretch; display: flex; flex-direction: column}
.ov-art1 .ov-bubble,.ov-art1 .ov-person,.ov-art2 .ov-win{flex: none}
/* an absolutely placed child of a scene takes the scene's grid area of its grid-row as its box */
.ov-arrow{position: absolute; grid-row: 2; top: 74px; width: 72px; height: 40px; margin: 0}
.ov-s1 .ov-arrow,.ov-s2 .ov-arrow{left: 100%}
/* 3 to 4: from 4px under the last paragraph slipping out of the shelf (the note above the drawing is 56px high; the
   paragraph's foot is at 218/320 of the drawing's width, at most 280px: 68.125% of the column's width, a margin
   in % being a share of the width) down the band to 3px above the ring of 4 */
.ov-s3 .ov-arrow{grid-row: 2 / 4; left: 0; width: 72px; height: auto; top: 60px; margin-top: min(68.125%, 190.75px); bottom: 3px}
/* 4 to 5: from 2px into the third column (the chat's frame is about 12px in) to 4px right of the magnifying glass of
   scene 5 (78.25% of the width of its drawing, which is the width of the first column, at most 280px), at a third of
   that drawing's width under its top (the middle of the lens; the line is at y 19 of the arrow). In shares of the width
   of the third column (the box): the first two columns are 60% and 66.667% of it, so the width is 60% + 66.667% + 2 x 72px
   + 2px - 4px - min(0.7825 x 60%, 0.7825 x 280px); the tip is 6px into the arrow's head, 10px clear of the glass */
.ov-s4 .ov-arrow{grid-row: 2; left: auto; right: calc(100% - 2px); width: calc(126.667% + 142px - min(46.95%, 219.1px)); height: 40px; top: 0; margin-top: calc(min(20%, 93.333px) - 19px)}
.ov-av{visibility: hidden}
.ov-ah{visibility: visible}
}
/* where the browser has scroll-driven animations (named view timelines), the pencil draws each scene as it comes into
   view, instead of on the clock of the page load, which has finished before anyone scrolls down to the figure. The
   time of each stroke (--ov-tn, --ov-dn, tenths) becomes a stretch of the entry of a drawing into the window (its
   timeline, --ov-tl), between --ov-r0 and --ov-r0 + --ov-rw of that entry. The subject of the timeline is the drawing
   itself, not the scene, whose words come first: on phones and middle widths each scene's drawing (--ov-s0, --ov-len:
   the first and last moment of the scene, whose number, in the words above the drawing, is drawn on the same
   timeline: timeline-scope); on wide screens the scenes of a row keep the order of the
   story on the timeline of the tallest drawing of the row (the drawings of a row stand on one line): 1, 2, 3 on that
   of scene 3, 4 and 5 on that of scene 5; scene 5 is drawn there as if it came 1.2 s
   earlier than it does on the clock, the time the long arrow from 4 to 5 takes there and the pencil does not draw. So a scene
   starts to be drawn as its drawing comes into the window, and is drawn when most of it is in. Scrolling back up
   undraws what leaves the window at the bottom, and it draws again.
   Elsewhere (and if a timeline cannot be found, which leaves the drawing complete) the clock of the page load stays.
   The green path keeps its own 18 s clock. */
@supports (animation-timeline: --ov-v) and (view-timeline-name: --ov-v) and (timeline-scope: --ov-v) and (animation-range-start: entry 10%){
.ov-step{timeline-scope: --ov-v; --ov-tl: --ov-v; --ov-r0: 12%; --ov-rw: 76%}
.ov-art{view-timeline: --ov-v block}
.ov-s1{--ov-s0: 0; --ov-len: 19}.ov-s2{--ov-s0: 25; --ov-len: 22}.ov-s3{--ov-s0: 50; --ov-len: 27}.ov-s4{--ov-s0: 85; --ov-len: 19}.ov-s5{--ov-s0: 123; --ov-len: 20}
.ov-figure .ov-ink,.ov-figure .ov-fade{animation-timeline: var(--ov-tl); animation-delay: 0s; animation-duration: auto; animation-range-start: entry calc(var(--ov-r0) + (var(--ov-tn) - var(--ov-s0)) / var(--ov-len) * var(--ov-rw)); animation-range-end: entry calc(var(--ov-r0) + (var(--ov-tn) + var(--ov-dn) - var(--ov-s0)) / var(--ov-len) * var(--ov-rw))}
@container (min-width: 960px){
.ov-steps{timeline-scope: --ov-v1, --ov-v2}
.ov-step{timeline-scope: none; --ov-r0: 5%; --ov-rw: 125%}
.ov-art{view-timeline-name: none}
.ov-s3 .ov-art{view-timeline: --ov-v1 block}
.ov-s5 .ov-art{view-timeline: --ov-v2 block}
.ov-s1,.ov-s2,.ov-s3{--ov-tl: --ov-v1; --ov-s0: 0; --ov-len: 77}
.ov-s4,.ov-s5{--ov-tl: --ov-v2; --ov-s0: 85; --ov-len: 46}
.ov-s5{--ov-s0: 97}
}
}
/* reduced motion: no animation at all (neither clock nor scrolling), the complete drawing; the dot stays hidden */
@media (prefers-reduced-motion: reduce){
.ov-figure *,.ov-figure *::before,.ov-figure *::after{animation: none !important}
.ov-figure .ov-ink,.ov-figure .ov-ld{stroke-dasharray: none}
}

/* Step sketches of the about page (section "Como funciona", its four steps): beside each big number a pencil line
   and a small drawing done by hand (connect, ask, ask for the paragraphs, read and write). Ink strokes, green accents,
   pencil hatching. The strokes draw themselves in the order of the story, then stay: on load, or, where the browser
   ties animations to the scroll, as each sketch comes into view. Under reduced motion and in print they are there,
   complete, from the start. Every stroke that draws itself has pathLength="1". Timing: --ss-b is the start of a step
   (its head) on load, --ss-s its start on the scroll; --ss-t the start of a stroke after it and --ss-d its length,
   both in tenths of a second (only the values the drawings use are defined). Animated: stroke-dashoffset, opacity,
   transform. The page-coloured fills (.ss-paper: the plug of step 1, the pencil of step 4) become Canvas in forced
   colours. */
.ss-head{display: flex; align-items: center; gap: 14px}
.ss-rule{display: block; flex: 1 1 0; min-width: 16px; height: 10px; color: #C9BFA6; overflow: visible}
.ss-icon{display: block; flex: none; color: #2A2521; overflow: visible}
.ss-h1{--ss-b: .2s; --ss-s: 8}
.ss-h2{--ss-b: .8s; --ss-s: 9.5}
.ss-h3{--ss-b: 1.4s; --ss-s: 11}
.ss-h4{--ss-b: 2s; --ss-s: 12.5}
.ss-draw,.ss-fade,.ss-drop,.ss-plug,.ss-pen{animation-duration: calc(var(--ss-d, 4) * .1s); animation-delay: calc(var(--ss-b, 0s) + var(--ss-t, 0) * .1s); animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both}
.ss-draw{stroke-dasharray: 1 2; animation-name: ss-draw}
.ss-fade{animation-name: ss-fade}
.ss-drop{animation-name: ss-drop; animation-timing-function: cubic-bezier(.3, 0, .4, 1.4)}
.ss-plug{animation-name: ss-plug}
.ss-pen{animation-name: ss-pen}
.ss-lin{animation-timing-function: linear}
.ss-t0{--ss-t: 0}.ss-t3{--ss-t: 3}.ss-t5{--ss-t: 5}.ss-t6{--ss-t: 6}.ss-t7{--ss-t: 7}.ss-t8{--ss-t: 8}.ss-t9{--ss-t: 9}
.ss-t10{--ss-t: 10}.ss-t11{--ss-t: 11}.ss-t12{--ss-t: 12}.ss-t13{--ss-t: 13}.ss-t14{--ss-t: 14}.ss-t15{--ss-t: 15}
.ss-t16{--ss-t: 16}.ss-t17{--ss-t: 17}.ss-t18{--ss-t: 18}.ss-t19{--ss-t: 19}.ss-t20{--ss-t: 20}.ss-t21{--ss-t: 21}
.ss-t24{--ss-t: 24}.ss-t25{--ss-t: 25}.ss-t27{--ss-t: 27}.ss-t28{--ss-t: 28}.ss-t29{--ss-t: 29}
.ss-t30{--ss-t: 30}
.ss-d1{--ss-d: 1}.ss-d2{--ss-d: 2}.ss-d3{--ss-d: 3}.ss-d4{--ss-d: 4}.ss-d5{--ss-d: 5}.ss-d6{--ss-d: 6}.ss-d7{--ss-d: 7}
.ss-d8{--ss-d: 8}.ss-d12{--ss-d: 12}
@keyframes ss-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes ss-fade{from{opacity: 0}to{opacity: 1}}
@keyframes ss-drop{from{opacity: 0; transform: translateY(-4px)}to{opacity: 1; transform: translateY(0)}}
@keyframes ss-plug{from{transform: translateX(-9px)}to{transform: translateX(0)}}
@keyframes ss-pen{from{transform: translateX(-13px)}to{transform: translateX(0)}}
/* On the scroll: each head on its own view timeline. A tenth of a second of the load timing becomes .45% of the
   timeline; each head starts 1.5% after the one before (on a phone they stand far apart anyway); every sketch is
   complete by 27% (the head about two thirds of the way down the screen). */
@supports (animation-timeline: view()){
.ss-head{view-timeline: --ss-head block}
.ss-draw,.ss-fade,.ss-drop,.ss-plug,.ss-pen{animation-timeline: --ss-head; animation-delay: 0s; animation-duration: auto; animation-range: cover calc((var(--ss-s, 8) + var(--ss-t, 0) * .45) * 1%) cover calc((var(--ss-s, 8) + (var(--ss-t, 0) + var(--ss-d, 4)) * .45) * 1%)}
.ss-draw,.ss-fade{animation-timing-function: linear}
}
@media (prefers-reduced-motion: reduce), print{.ss-head *{animation: none !important}.ss-head .ss-draw{stroke-dasharray: none}}
@media (forced-colors: active){.ss-paper{fill: Canvas}}

/* With and without Caititu (about page, its last section). Hand-drawn: every stroke of the
   drawing is a path that draws itself, in order, then stays. Narrow first; two columns from a container of 760px
   (the answer cards from 880px). Prefix ww-. The SVG filter and the two clip paths of the Caititu are named in
   attributes of the SVG, never in this file. */
@keyframes ww-draw{from{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes ww-fade{from{opacity:0}to{opacity:1}}
.ww-figure{margin:0;display:flex;flex-direction:column;gap:18px}
.ww-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.ww-panel{display:flex;flex-direction:column;gap:6px;min-width:0}
.ww-panel-label{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.ww-panel-tag{font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;line-height:18px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#5F574F}
.ww-panel-sub{font-size:18px;line-height:1.35;font-style:italic}
.ww-art{display:block;width:100%;max-width:560px;height:auto;overflow:visible}
.ww-ink,.ww-soft,.ww-hatch,.ww-green{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ww-ink{stroke:#2A2521;stroke-width:2.3}
.ww-soft{stroke:#5F574F;stroke-width:2}
.ww-mid{stroke-width:1.9}
.ww-thin{stroke-width:1.5}
.ww-hatch{stroke:#5F574F;stroke-width:1.1;stroke-opacity:0.7}
.ww-green{stroke:#3F8A5F;stroke-width:3}
.ww-cai-hatch{fill:none;stroke:#2A2521;stroke-width:1;stroke-opacity:0.6;stroke-linecap:round}
.ww-cai-eye{fill:#2A2521;stroke:none}
.ww-t-hand{font-family:Newsreader,Georgia,'Times New Roman',serif;font-style:italic;fill:#5F574F}
.ww-t-big{font-size:32px}
.ww-t-cite{font-family:Newsreader,Georgia,'Times New Roman',serif;font-size:22px;fill:#2A2521}
.ww-t-small{font-size:21px}
.ww-t-faint{fill:#5F574F}
.ww-draw{stroke-dasharray:1 1;stroke-dashoffset:0;animation:ww-draw 1s ease-in-out both}
.ww-fade{animation:ww-fade 0.8s ease-out both}
.ww-compare{display:grid;grid-template-columns:minmax(0,1fr);gap:36px 56px}
.ww-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.ww-col-head{display:flex;flex-direction:column;gap:4px}
.ww-col-title{margin:0;display:flex;align-items:center;gap:10px;font-weight:500;font-size:22px;line-height:1.3}
.ww-ico{display:block;flex:none;width:40px;height:28px;overflow:visible}
.ww-i-ink,.ww-i-soft,.ww-i-green{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ww-i-ink{stroke:#2A2521}
.ww-i-soft{stroke:#5F574F}
.ww-i-green{stroke:#3F8A5F;stroke-width:1.9}
.ww-rule{display:block;width:100%;max-width:420px;height:10px;overflow:visible}
.ww-rule path{fill:none;stroke:#2A2521;stroke-width:1.6;stroke-linecap:round}
.ww-rule-soft path{stroke:#5F574F;stroke-width:1.4}
.ww-rule-green path{stroke:#3F8A5F;stroke-width:2.4}
.ww-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ww-points li{position:relative;padding-left:28px;text-wrap:pretty}
.ww-points li::before{content:"";position:absolute;left:3px;top:0.8em;width:14px;height:2px;border-radius:2px;background:#5F574F;transform:rotate(-6deg)}
.ww-points li:nth-child(2n)::before{width:12px;transform:rotate(5deg)}
.ww-points li:nth-child(3n)::before{width:15px;transform:rotate(-2deg)}
.ww-col-with .ww-points li::before{height:2.5px;background:#3F8A5F}
.ww-col-same .ww-points li::before{background:#2A2521}
.ww-tests{display:flex;flex-direction:column;gap:48px}
.ww-tests-title{margin:0;font-weight:500;font-size:clamp(24px, 2.4cqw, 30px);line-height:1.2}
.ww-example{display:flex;flex-direction:column;gap:20px}
.ww-ask{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ww-ask-label{margin:0 7px 0 0;font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;line-height:18px;color:#5F574F;text-align:right}
.ww-bubble-tail{position:absolute;right:-7px;bottom:0;width:12px;height:14px;display:block}
.ww-bubble{position:relative;box-sizing:border-box;max-width:min(680px, calc(100% - 7px));margin:0 7px 0 0;padding:12px 16px;background:#2A2521;color:#EDE5D0;border-radius:18px 18px 4px 18px;font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:16px;line-height:23px;text-wrap:pretty}
.ww-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.ww-card{position:relative;min-width:0;box-sizing:border-box;padding:20px 18px 22px;display:flex;flex-direction:column;gap:16px;background:#FAF8F2}
.ww-card>:not(.ww-frame){position:relative}
.ww-frame{position:absolute;inset:0;pointer-events:none}
.ww-edge{position:absolute;display:block;overflow:visible}
.ww-edge-t,.ww-edge-b{left:-6px;width:calc(100% + 12px);height:10px}
.ww-edge-t{top:-5px}
.ww-edge-b{bottom:-5px}
.ww-edge-l,.ww-edge-r{top:-6px;width:10px;height:calc(100% + 12px)}
.ww-edge-l{left:-5px}
.ww-edge-r{right:-5px}
.ww-frame-line,.ww-frame-line2{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ww-frame-line{stroke:#5F574F;stroke-width:1.5}
.ww-frame-line2{stroke:#5F574F;stroke-width:1;stroke-opacity:0.45}
.ww-card-with .ww-frame-line{stroke:#2A2521;stroke-width:1.8}
.ww-card-with .ww-frame-line2{stroke:#3F8A5F;stroke-width:1.4;stroke-opacity:0.75}
.ww-card-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px}
.ww-card-head .ww-ico{grid-row:1 / span 2}
.ww-card-title{margin:0;font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.ww-card-sub{margin:0;font-size:16px;line-height:1.3;font-style:italic;color:#5F574F}
/* The two answers, word for word (source/answer_*.pt.txt). Each starts visible and opens to its full length with
   the <details> under it, no script: where the browser has :has(), a closed answer is cut at 31em with a fade; where it
   has not, the answer is whole and the button is not shown. Printing shows the whole answer. */
.ww-ans-note{margin:0;max-width:760px;font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:14px;line-height:21px;color:#5F574F;text-wrap:pretty}
.ww-ans-body{display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.ww-ans-body p{margin:0;text-wrap:pretty}
.ww-ans-body .ww-ans-h{margin-top:4px;font-weight:600}
.ww-ans-ul,.ww-ans-ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ww-ans-ul li{position:relative;padding-left:22px;text-wrap:pretty}
.ww-ans-ul li::before{content:"";position:absolute;left:2px;top:0.78em;width:11px;height:2px;border-radius:2px;background:#5F574F;transform:rotate(-6deg)}
.ww-ans-ul li:nth-child(2n)::before{width:9px;transform:rotate(5deg)}
.ww-ans-ol li{text-wrap:pretty}
.ww-ans-q{margin:0;padding:2px 0 2px 14px;border-left:3px solid #C9BFA6}
.ww-card-with .ww-ans-q{border-left-color:#3F8A5F}
.ww-ans-body .ww-ans-ref{font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:14px;line-height:20px;color:#5F574F}
.ww-ans-body code{font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:0.9em;padding:0 4px;border-radius:3px;background:#EDE5D0}
.ww-more{display:none}
.ww-more-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-family:Figtree,'Helvetica Neue',Helvetica,sans-serif;font-size:15px;line-height:22px;font-weight:500;color:#2A2521}
.ww-more-btn:hover{color:#5F574F}
.ww-more-btn:focus-visible{outline:2px solid #2A2521;outline-offset:3px;border-radius:4px}
.ww-more-txt{position:relative;display:inline-block}
.ww-more-line{position:absolute;left:-1px;bottom:-5px;width:calc(100% + 2px);max-width:none;height:8px}
.ww-card-with .ww-more-line path{stroke:#3F8A5F;stroke-width:2}
.ww-more-chev{display:block;flex:none;width:16px;height:16px;overflow:visible}
.ww-more-chev path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ww-more[open] .ww-more-chev{transform:rotate(180deg)}
.ww-more[open] .ww-more-open,.ww-more:not([open]) .ww-more-close{display:none}
@supports selector(:has(*)){
.ww-more{display:block}
.ww-ans:has(.ww-more:not([open])) .ww-ans-body{max-height:31em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 6em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 6em),transparent)}
}
@container (min-width: 760px){
.ww-panels{grid-template-columns:repeat(2, minmax(0, 1fr));gap:40px}
.ww-compare{grid-template-columns:repeat(2, minmax(0, 1fr))}
.ww-col-same{grid-column:1 / -1;justify-self:center;width:100%;max-width:calc((100% - 56px) / 2)}
}
@container (min-width: 880px){
.ww-cards{grid-template-columns:repeat(2, minmax(0, 1fr));gap:32px}
.ww-card{padding:24px 24px 26px}
}
@media (forced-colors: active){
.ww-points li::before{forced-color-adjust:none;background:CanvasText}
}
/* The order of the strokes: delays when the drawing plays on its own (below), parts of the scroll when the
   browser can tie it to the scroll (in @supports). Panel b starts while panel a is still drawing. */
.ww-a1{animation-delay:0s;animation-duration:1.6s}
.ww-a2{animation-delay:1.3s;animation-duration:1s}
.ww-a3{animation-delay:1.7s;animation-duration:0.6s}
.ww-a4{animation-delay:2.1s;animation-duration:0.6s}
.ww-a5{animation-delay:2.5s;animation-duration:0.6s}
.ww-a6{animation-delay:3.3s;animation-duration:0.6s}
.ww-a7{animation-delay:3.8s;animation-duration:0.8s}
.ww-a8{animation-delay:4.4s;animation-duration:1.3s}
.ww-a9{animation-delay:5.5s;animation-duration:0.6s}
.ww-a10{animation-delay:5.9s;animation-duration:0.6s}
.ww-a11{animation-delay:6.3s;animation-duration:0.5s}
.ww-a12{animation-delay:6.7s;animation-duration:0.4s}
.ww-a13{animation-delay:1.2s;animation-duration:0.9s}
.ww-a14{animation-delay:2.8s;animation-duration:0.6s}
.ww-b1{animation-delay:3.6s;animation-duration:0.8s}
.ww-b2{animation-delay:4s;animation-duration:1.1s}
.ww-b3{animation-delay:4.9s;animation-duration:0.5s}
.ww-b4{animation-delay:5.1s;animation-duration:0.7s}
.ww-b5{animation-delay:4.9s;animation-duration:0.8s}
.ww-b6{animation-delay:5.4s;animation-duration:0.7s}
.ww-b7{animation-delay:5.9s;animation-duration:0.4s}
.ww-b8{animation-delay:6.5s;animation-duration:0.5s}
.ww-b9{animation-delay:6.2s;animation-duration:0.6s}
.ww-b10{animation-delay:6.9s;animation-duration:0.5s}
.ww-b11{animation-delay:6.6s;animation-duration:0.6s}
.ww-b12{animation-delay:6s;animation-duration:0.8s}
.ww-b13{animation-delay:8.8s;animation-duration:0.4s}
.ww-b14{animation-delay:7s;animation-duration:0.5s}
.ww-b15{animation-delay:7.2s;animation-duration:0.4s}
.ww-b16{animation-delay:7.2s;animation-duration:1.3s}
.ww-b17{animation-delay:7.9s;animation-duration:0.9s}
.ww-b18{animation-delay:8.5s;animation-duration:0.9s}
.ww-b19{animation-delay:9.1s;animation-duration:0.4s}
.ww-b20{animation-delay:8.9s;animation-duration:0.5s}
.ww-b21{animation-delay:9.7s;animation-duration:0.5s}
.ww-b22{animation-delay:9.4s;animation-duration:0.6s}
.ww-b23{animation-delay:10.2s;animation-duration:0.6s}
.ww-b24{animation-delay:10.8s;animation-duration:0.3s}
.ww-b25{animation-delay:10.9s;animation-duration:1.2s}
.ww-b26{animation-delay:11.9s;animation-duration:0.6s}
.ww-b27{animation-delay:12.3s;animation-duration:0.4s}
.ww-b28{animation-delay:12.6s;animation-duration:0.5s}
.ww-b29{animation-delay:13s;animation-duration:0.4s}
.ww-b30{animation-delay:12.2s;animation-duration:0.5s}
@media screen and (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
.ww-panel{view-timeline:--ww-panel block}
.ww-draw,.ww-fade{animation-timeline:--ww-panel;animation-delay:0s;animation-duration:auto;animation-timing-function:linear}
.ww-a1{animation-range:entry 10% entry 28.03%}
.ww-a2{animation-range:entry 24.65% entry 35.92%}
.ww-a3{animation-range:entry 29.15% entry 35.92%}
.ww-a4{animation-range:entry 33.66% entry 40.42%}
.ww-a5{animation-range:entry 38.17% entry 44.93%}
.ww-a6{animation-range:entry 47.18% entry 53.94%}
.ww-a7{animation-range:entry 52.82% entry 61.83%}
.ww-a8{animation-range:entry 59.58% entry 74.23%}
.ww-a9{animation-range:entry 71.97% entry 78.73%}
.ww-a10{animation-range:entry 76.48% entry 83.24%}
.ww-a11{animation-range:entry 80.99% entry 86.62%}
.ww-a12{animation-range:entry 85.49% entry 90%}
.ww-a13{animation-range:entry 23.52% entry 33.66%}
.ww-a14{animation-range:entry 41.55% entry 48.31%}
.ww-b1{animation-range:entry 20% entry 26.53%}
.ww-b2{animation-range:entry 23.27% entry 32.24%}
.ww-b3{animation-range:entry 30.61% entry 34.69%}
.ww-b4{animation-range:entry 32.24% entry 37.96%}
.ww-b5{animation-range:entry 30.61% entry 37.14%}
.ww-b6{animation-range:entry 34.69% entry 40.41%}
.ww-b7{animation-range:entry 38.78% entry 42.04%}
.ww-b8{animation-range:entry 43.67% entry 47.76%}
.ww-b9{animation-range:entry 41.22% entry 46.12%}
.ww-b10{animation-range:entry 46.94% entry 51.02%}
.ww-b11{animation-range:entry 44.49% entry 49.39%}
.ww-b12{animation-range:entry 39.59% entry 46.12%}
.ww-b13{animation-range:entry 62.45% entry 65.71%}
.ww-b14{animation-range:entry 47.76% entry 51.84%}
.ww-b15{animation-range:entry 49.39% entry 52.65%}
.ww-b16{animation-range:entry 49.39% entry 60%}
.ww-b17{animation-range:entry 55.1% entry 62.45%}
.ww-b18{animation-range:entry 60% entry 67.35%}
.ww-b19{animation-range:entry 64.9% entry 68.16%}
.ww-b20{animation-range:entry 63.27% entry 67.35%}
.ww-b21{animation-range:entry 69.8% entry 73.88%}
.ww-b22{animation-range:entry 67.35% entry 72.24%}
.ww-b23{animation-range:entry 73.88% entry 78.78%}
.ww-b24{animation-range:entry 78.78% entry 81.22%}
.ww-b25{animation-range:entry 79.59% entry 89.39%}
.ww-b26{animation-range:entry 87.76% entry 92.65%}
.ww-b27{animation-range:entry 91.02% entry 94.29%}
.ww-b28{animation-range:entry 93.47% entry 97.55%}
.ww-b29{animation-range:entry 96.73% entry 100%}
.ww-b30{animation-range:entry 90.2% entry 94.29%}
}
}
@media (prefers-reduced-motion: reduce), print{
.ww-draw{animation:none !important;stroke-dasharray:none;stroke-dashoffset:0;opacity:1}
.ww-fade{animation:none !important;opacity:1}
}
@media print{
.ww-more{display:none !important}
.ww-ans-body{max-height:none !important;overflow:visible !important;-webkit-mask-image:none !important;mask-image:none !important}
}

/* the consent banner of the access statistics (site/src/js/consent.js shows it; hidden without the script) */
.consent{position: sticky; bottom: 0; z-index: 50; padding: 0 16px 16px; pointer-events: none}
html:has(.consent:not([hidden])){scroll-padding-bottom: 160px}
@media (max-width: 719px){html:has(.consent:not([hidden])){scroll-padding-bottom: 300px}}
@media (max-width: 400px){.consent-inner{padding: 12px 14px; font-size: 14px; line-height: 20px}}
.consent[hidden]{display: none}
.consent-inner{pointer-events: auto; max-width: 760px; margin: 0 auto; box-sizing: border-box; background: #FAF8F2; color: #2A2521; border: 1.5px solid #2A2521; border-radius: 12px; box-shadow: 0 6px 24px rgba(42, 37, 33, 0.18); padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px}
.consent-text{margin: 0; flex: 1 1 320px; min-width: 0; text-wrap: pretty}
.consent-buttons{display: flex; gap: 10px; flex: none}
.consent-button{min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1.5px solid #2A2521; background: #2A2521; color: #EDE5D0; font: inherit; font-weight: 500; cursor: pointer}
.consent-button:hover{background: #3D3631}
.consent-button:focus-visible, .footer-button:focus-visible{outline: 3px solid #3F8A5F; outline-offset: 2px}
.footer-button{border: 0; font: inherit; color: inherit; cursor: pointer; background: url(/assets/underline.8d1c9004.svg) no-repeat left 10px bottom 10px/calc(100% - 20px) 7px}
.footer-button[hidden]{display: none}
@media print{.consent{display: none}}

/* privacy notice */
.priv-body{display: flex; flex-direction: column; gap: 36px; max-width: 720px}
.priv-section{display: flex; flex-direction: column; gap: 12px}
.priv-title{margin: 0; font-weight: 500; font-size: clamp(22px, 2.2cqw, 26px); line-height: 1.25}
.priv-list{margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px}
.priv-list li{text-wrap: pretty}
.priv-list li::marker{color: #3F8A5F}
/* The Caititu of the beta band of the home page ("O Caititu esta em fase de testes"): an ink drawing still being
   made, an inline <svg class="bc-art"> in the place of the old pencil drawing, with the same size and place in the
   band. The head, the neck with its collar, the shoulder and the front legs are finished; the middle is half inked;
   the back is only construction lines; a fine brush rests where the ink stops, beside a blot. Where the browser ties
   animations to the scroll (and motion is not reduced), the ink is laid down as the drawing comes into view: each
   group of strands is uncovered by a mask whose wide stroke draws itself across it (.bc-sweep), the outlines draw
   themselves (.bc-draw), the solid details appear (.bc-fade), then the brush is inked in from its handle to its
   point (#bc-m-tool) and the blot spreads (.bc-splat); the construction lines are there from the start, and nothing
   moves once the drawing is complete. Everywhere else, and under reduced motion, the drawing is complete and still.
   Timing: --bc-t is the start of a stroke and --bc-d its length, in ticks; a tick is .97% of the drawing's entry
   into view (the range "entry" of the view timeline), from 8% (the top of the drawing just in) to about 99% (the
   whole drawing on the screen). The drawing stands right above the footer: a share of the whole crossing ("cover")
   could not be reached at the bottom of the page in a tall window, and the ink stopped half way; the entry always
   ends before the page does. Animated: stroke-dashoffset, opacity, transform (the blot). */
.bc-art{display: block; flex: 0 1 480px; width: min(480px, 100%); height: auto}
.bc-t0{--bc-t: 0}.bc-t1{--bc-t: 1}.bc-t3{--bc-t: 3}.bc-t4{--bc-t: 4}.bc-t5{--bc-t: 5}.bc-t6{--bc-t: 6}
.bc-t8{--bc-t: 8}.bc-t9{--bc-t: 9}.bc-t10{--bc-t: 10}.bc-t12{--bc-t: 12}.bc-t13{--bc-t: 13}.bc-t15{--bc-t: 15}
.bc-t16{--bc-t: 16}.bc-t17{--bc-t: 17}.bc-t20{--bc-t: 20}.bc-t36{--bc-t: 36}.bc-t50{--bc-t: 50}.bc-t52{--bc-t: 52}
.bc-t56{--bc-t: 56}.bc-t57{--bc-t: 57}.bc-t58{--bc-t: 58}.bc-t61{--bc-t: 61}.bc-t62{--bc-t: 62}.bc-t66{--bc-t: 66}
.bc-t68{--bc-t: 68}.bc-t70{--bc-t: 70}.bc-t75{--bc-t: 75}.bc-t76{--bc-t: 76}.bc-t78{--bc-t: 78}.bc-t79{--bc-t: 79}
.bc-t89{--bc-t: 89}
.bc-d2{--bc-d: 2}.bc-d3{--bc-d: 3}.bc-d4{--bc-d: 4}.bc-d5{--bc-d: 5}.bc-d6{--bc-d: 6}.bc-d8{--bc-d: 8}
.bc-d10{--bc-d: 10}.bc-d16{--bc-d: 16}.bc-d20{--bc-d: 20}.bc-d22{--bc-d: 22}.bc-d24{--bc-d: 24}
@keyframes bc-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes bc-fade{from{opacity: 0}to{opacity: 1}}
@keyframes bc-splat{from{opacity: 0; transform: scale(.25)}to{opacity: 1; transform: scale(1)}}
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
.bc-art{view-timeline: --bc-v block}
.bc-draw,.bc-sweep,.bc-fade,.bc-splat{animation-timeline: --bc-v; animation-duration: auto; animation-delay: 0s; animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: linear; animation-range: entry calc(8% + var(--bc-t, 0) * .97%) entry calc(8% + (var(--bc-t, 0) + var(--bc-d, 4)) * .97%)}
.bc-draw,.bc-sweep{stroke-dasharray: 1 2; animation-name: bc-draw}
.bc-fade{animation-name: bc-fade}
.bc-splat{animation-name: bc-splat; transform-box: fill-box; transform-origin: 55% 40%}
}
}
@media (prefers-reduced-motion: reduce){.bc-art,.bc-art *{animation: none !important}.bc-art .bc-draw,.bc-art .bc-sweep{stroke-dasharray: none !important}}

/* Statistics (prefix st-): the further examples of the tool "statistics", in its entry ("Estatísticas") of the section
   "Ferramentas" of "Como usar", each laid out as the examples of every tool (tl-ex-st: the request, what Caititu does,
   what comes back); what comes back is a box drawn with a hairline (st-out) that holds the chart's title, the chart
   (drawn by site/charts.py at every build), its panel (opened by site/src/js/stats.js right below the chart: the
   decisions a count counts) and, folded, how it was counted. Compact (the owner's request of 2026-10-15): tight rows,
   one line per judge, court or author where the page is wide. Data marks in green, cream and hairlines around them;
   Figtree for labels and numbers, Newsreader for sentences. Sizes come from classes (st-yb*, st-r*) or SVG attributes,
   never from a style attribute. Animated: transform and opacity, once (as each piece comes into view where the browser
   can); nothing moves with reduced motion or in print. */
.st-vh{position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0}
.st-out{box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(14px, 1.8cqw, 20px); border: 1px solid #C9BFA6; border-radius: 12px; background: #FAF8F2}
.st-h4{margin: 0; font-weight: 500; font-size: 19px; line-height: 1.3; text-wrap: balance}
.st-h5{margin: 6px 0 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F574F}
.st-chart{display: flex; flex-direction: column; gap: 10px; min-width: 0}
.st-def{margin: 0; max-width: 780px; font-size: 16px; line-height: 1.5; text-wrap: pretty}
.st-note, .st-hint{margin: 0; max-width: 780px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 19px; color: #5F574F; text-wrap: pretty}
.st-hint{display: flex; align-items: baseline; gap: 8px; color: #2A2521}
.st-hint::before{content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3F8A5F; transform: translateY(-1px)}
.st-hint[hidden]{display: none}
.st-missing{margin: 0; padding: 14px 18px; border: 1px dashed #C9BFA6; border-radius: 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; color: #5F574F}
.st-mark{margin-left: 1px; color: #5F574F}

/* folded: how a chart was counted ("Como contamos", after the chart), the ad hoc judges, and the rows of a long list
   after its first ones ("Ver os outros N ...", st-more); a small summary with a chevron opens them, without script */
.st-fold, .st-more{min-width: 0}
.st-fold-s, .st-more-s{display: inline-flex; align-items: center; gap: 9px; min-height: 32px; cursor: pointer; list-style: none; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; color: #2A2521}
.st-fold-s{font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5F574F}
.st-fold-s::-webkit-details-marker, .st-more-s::-webkit-details-marker{display: none}
.st-fold-s::before, .st-more-s::before{content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid #5F574F; border-bottom: 1.5px solid #5F574F; transform: rotate(-45deg)}
.st-fold[open] > .st-fold-s::before, .st-more[open] > .st-more-s::before{transform: translateY(-2px) rotate(45deg)}
.st-fold-s:hover, .st-more-s:hover{color: #2A2521; text-decoration: underline; text-decoration-color: #C9BFA6; text-underline-offset: 4px}
.st-fold-s:focus-visible, .st-more-s:focus-visible{outline: 2px solid #2A2521; outline-offset: 2px; border-radius: 4px}
.st-more > .st-note{margin-top: 8px}
/* the folds of the long lists: a discreet "Ver mais", and "Ver menos" once open (the owner, 2026-10-15) */
.st-more-s{font-size: 13px; font-weight: 400; color: #5F574F}
.st-more-c{display: none}
.st-more[open] > .st-more-s .st-more-o{display: none}
.st-more[open] > .st-more-s .st-more-c{display: inline}

/* legends */
.st-legend{display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px}
.st-legend-t{color: #5F574F}
.st-lg{display: inline-flex; align-items: center; gap: 6px}
.st-sq{display: inline-block; width: 14px; height: 14px; border-radius: 2px}

/* a count that opens a panel (a button made by stats.js around what the element held) */
.st-q{appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer}
.st-q:focus-visible{outline: 2px solid #2A2521; outline-offset: 2px}

/* the scale of the heatmap: tints of the green, the top a shade of it (white figures stay readable on it); every
   level but the top has a ring of the green, so that a cell with decisions stands out from an empty one (cream) */
.st-l1, .st-heat td.st-l1{background: #C2D7C6; box-shadow: inset 0 0 0 1px #3F8A5F}
.st-l2, .st-heat td.st-l2{background: #9DC1A9; box-shadow: inset 0 0 0 1px #3F8A5F}
.st-l3, .st-heat td.st-l3{background: #6EA684; box-shadow: inset 0 0 0 1px #3F8A5F}
.st-l4, .st-heat td.st-l4{background: #2F6E4A}

/* 1. heatmap: a real table, one row per State, one column per year; the first row is the total of each year, written
   above its bar. From 1000 px: the whole table at once, the count written in each cell; narrower: a box that scrolls
   sideways on its own (the page does not), cells of 16 px at least, the States' names kept at the left */
.st-heat-swipe{display: none; margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #5F574F}
.st-skip{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
.st-skip:focus{position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; align-self: flex-start; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; font-weight: 500; outline: 2px solid #2A2521; outline-offset: 2px}
.st-heat-wrap{position: relative; width: 100%; min-width: 0}
.st-heat{width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 16px; color: #2A2521}
.st-heat th, .st-heat td{padding: 0; font-weight: 400}
.st-heat-corner{width: 150px}
.st-heat .st-heat-tot{width: 40px; padding-left: 6px; text-align: right; font-variant-numeric: tabular-nums; background: none; box-shadow: none}
.st-hy{position: relative; height: 16px; vertical-align: bottom; text-align: left}
.st-hy span{position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font-size: 12px; line-height: 13px; color: #5F574F; white-space: nowrap}
.st-hy:not(.st-hy5):not(.st-hy10) span{width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%)}
.st-heat td{position: relative; height: 15px; background: #EDE5D0; border-radius: 2px}
.st-heat th[scope=row]{padding-right: 10px; text-align: left; font-weight: 500; line-height: 15px; overflow-wrap: anywhere}
.st-heat th[scope=row] .st-q, .st-heat td.st-heat-tot .st-q{text-decoration: underline; text-decoration-color: #C9BFA6; text-decoration-thickness: 1px; text-underline-offset: 3px}
.st-heat th[scope=row] .st-q:hover, .st-heat td.st-heat-tot .st-q:hover, .st-heat .st-q.st-on{text-decoration-color: #2A2521}
.st-heat td.st-hc .st-q{display: block; width: 100%; height: 100%; min-height: 15px; border-radius: 2px; color: #2A2521}
.st-heat td.st-l4 .st-q{color: #FFFFFF}
.st-heat td.st-hc .st-q:hover{box-shadow: inset 0 0 0 2px #2A2521}
.st-heat td.st-hc .st-q.st-on{box-shadow: inset 0 0 0 2px #2A2521, 0 0 0 2px #FAF8F2, 0 0 0 3.5px #2A2521}
.st-heat .st-q:focus-visible{outline: 2px solid #2A2521; outline-offset: 1px}
.st-cn{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
.st-heat-years td{--st-yh: 44px; height: var(--st-yh); vertical-align: bottom; background: none; border-radius: 0}
.st-yc .st-q{display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: var(--st-yh); padding: 0; border-radius: 2px 2px 0 0}
.st-yn{display: block; margin-bottom: 2px; font-size: 10px; line-height: 12px; letter-spacing: -0.02em; text-align: center; white-space: nowrap; color: #5F574F; font-variant-numeric: tabular-nums}
.st-yc .st-q:hover .st-yb, .st-yc .st-q.st-on .st-yb{background: #2A2521}
.st-yc .st-q:hover .st-yn, .st-yc .st-q.st-on .st-yn{color: #2A2521; font-weight: 600}
.st-heat-all{font-size: 12px; line-height: 14px; text-align: left; color: #5F574F; vertical-align: bottom; padding-right: 10px}
.st-heat th.st-heat-all{font-weight: 400}
.st-heat-years .st-heat-tot{vertical-align: bottom; color: #5F574F}
.st-yb{display: block; width: 66%; margin: 0 auto; height: calc(var(--st-h) * 2.9px); background: #5F574F; border-radius: 1px 1px 0 0}
.st-yb1{--st-h: 1}
.st-yb2{--st-h: 2}
.st-yb3{--st-h: 3}
.st-yb4{--st-h: 4}
.st-yb5{--st-h: 5}
.st-yb6{--st-h: 6}
.st-yb7{--st-h: 7}
.st-yb8{--st-h: 8}
.st-yb9{--st-h: 9}
.st-yb10{--st-h: 10}
@container (min-width: 1000px){
.st-heat td.st-hc .st-q, .st-heat td.st-hc{text-align: center}
.st-heat td.st-hc .st-q{display: flex; align-items: center; justify-content: center}
.st-cn{position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; font-size: 11px; line-height: 15px; font-weight: 500; font-variant-numeric: tabular-nums}
.st-heat td.st-l4{color: #FFFFFF}
}
@container (max-width: 999.98px){
.st-heat-swipe{display: block}
.st-heat-wrap{overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; scroll-padding-left: 126px}
.st-heat{width: auto; min-width: 100%; table-layout: auto}
.st-heat-corner, .st-heat th[scope=row]{position: sticky; left: 0; z-index: 1; width: 118px; min-width: 118px; max-width: 118px; box-sizing: border-box; padding-right: 8px; background: #FAF8F2; box-shadow: -2px 0 0 #FAF8F2, 2px 0 0 #FAF8F2}
.st-heat th[scope=row]{font-size: 13px; line-height: 15px}
.st-heat th[scope=row] .st-q{display: inline-flex; align-items: center; min-height: 24px}
.st-hy, .st-heat td{width: 16px; min-width: 16px}
.st-heat td, .st-heat td.st-hc .st-q{height: 24px; min-height: 24px}
.st-heat .st-heat-tot{width: 34px; min-width: 34px; padding-left: 4px}
.st-heat-years td{--st-yh: 44px; height: var(--st-yh)}
.st-yb{height: calc(var(--st-h) * 2.6px)}
}

/* 2. advisory opinions: a strip of dots by year (a dot, an opinion) on an axis of years; below 1000 px, as the heatmap,
   it scrolls sideways, each year 24 px wide */
.st-oc-strip{position: relative; max-width: 100%}
.st-oc-in{display: flex; flex-direction: column}
.st-oc-swipe{display: none; margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 20px; color: #5F574F}
.st-strip{--st-pitch: 9px; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--st-rows) * var(--st-pitch) + 6px); border-bottom: 1.5px solid #2A2521}
.st-strip li{display: flex; min-width: 0}
.st-strip .st-y10{background: linear-gradient(#E6DFCC, #E6DFCC) no-repeat 50% 0 / 1px 100%}
.st-oc-col, .st-strip li .st-q{flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; padding: 0 0 3px; border-radius: 3px 3px 0 0}
.st-strip li .st-q .st-oc-col{padding: 0}
.st-strip li .st-q:hover, .st-strip li .st-q.st-on{background: #EDE5D0}
.st-ocdot{display: block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3F8A5F}
.st-strip li .st-q.st-on .st-ocdot{background: #2A2521}
.st-r1{--st-rows: 1}
.st-r2{--st-rows: 2}
.st-r3{--st-rows: 3}
.st-r4{--st-rows: 4}
.st-r5{--st-rows: 5}
.st-r6{--st-rows: 6}
.st-r7{--st-rows: 7}
.st-r8{--st-rows: 8}
.st-axis{list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 19px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 13px; color: #5F574F}
.st-ax{position: relative; min-width: 0}
.st-ax5::before, .st-ax10::before{content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: #2A2521}
.st-ax5, .st-ax10{display: flex; justify-content: center; padding-top: 5px; white-space: nowrap; overflow: visible}
@container (min-width: 760px){
.st-strip{--st-pitch: 11px}
.st-ocdot{width: 8px; height: 8px}
}
@container (max-width: 999.98px){
.st-oc-swipe{display: block}
.st-oc-strip{overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px}
.st-oc-in{width: max-content; min-width: 100%}
.st-strip, .st-axis{grid-auto-columns: 24px}
}

/* 3. votos by judge: one bar per judge, in votos; dissent first (green), then the votos that are not disagreement
   (hairline and cream, edged in soft ink); hatched = "partially" and "razonado"; dotted = another type */
.st-sw{display: inline-block; flex: none; width: 13px; height: 11px; border-radius: 2px}
.st-sw-c{background: #3F8A5F}
.st-sw-r{background: repeating-linear-gradient(-45deg, #3F8A5F 0 1.6px, #CFE2D5 1.6px 3.2px)}
.st-sw-d{background: #C9BFA6; box-shadow: inset 0 0 0 1px #5F574F}
.st-sw-p{background: repeating-linear-gradient(-45deg, #5F574F 0 1.2px, #EDE5D0 1.2px 3.2px); box-shadow: inset 0 0 0 1px #5F574F}
.st-sw-o{background: #FAF8F2; box-shadow: inset 0 0 0 1px #5F574F}
.st-b-c{fill: #3F8A5F}
.st-b-d{fill: #C9BFA6; stroke: #5F574F; stroke-width: 1px}
.st-b-r{stroke: #5F574F; stroke-width: 1px}
.st-b-o{fill: #FAF8F2; stroke: #5F574F; stroke-width: 1px}
.st-defs{position: absolute; width: 0; height: 0; overflow: hidden}
/* narrow: the name across the row but for the total, the bar, then the years and the counts; the counts take the
   width the years leave (in a column of their own they would squeeze the name into three lines) */
.st-jhead, .st-j{display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name tot" "bar bar bar" "years detail detail"; gap: 3px 12px}
.st-jhead{grid-template-areas: "name name tot" "bar bar bar"; margin-top: 4px; padding-bottom: 4px; border-bottom: 1.5px solid #2A2521; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #5F574F; letter-spacing: 0.04em; text-transform: uppercase}
.st-jhead-name{grid-area: name; align-self: end}
.st-jhead-tot{grid-area: tot; text-align: right; align-self: end}
.st-jhead-years{grid-area: years; align-self: end; display: none}
.st-jhead-scale{grid-area: bar; display: flex; flex-direction: column; min-width: 0}
.st-jscale{display: block; width: 100%; height: 16px; overflow: visible; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; fill: #5F574F}
.st-jlist{list-style: none; margin: 0; padding: 0}
.st-j{padding: 4px 0; border-bottom: 1px solid #E6DFCC; align-items: center}
.st-jname{grid-area: name; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 500}
.st-jname .st-q{text-decoration: underline; text-decoration-color: #C9BFA6; text-decoration-thickness: 1px; text-underline-offset: 4px}
.st-jname .st-q:hover, .st-jname .st-q.st-on{text-decoration-color: #2A2521}
.st-jyears{grid-area: years; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #5F574F; font-variant-numeric: tabular-nums}
.st-jbar{grid-area: bar; display: block; width: 100%; height: 12px; overflow: visible; border-left: 1.5px solid #2A2521; box-sizing: border-box; background: linear-gradient(to right, #E6DFCC 1px, transparent 1px) repeat-x 0 0}
.st-g1{background-size: 100% 100%}
.st-g2{background-size: 50% 100%}
.st-g3{background-size: 33.333% 100%}
.st-g4{background-size: 25% 100%}
.st-g5{background-size: 20% 100%}
.st-jtot{grid-area: tot; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums}
.st-jdetail{grid-area: detail; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 12px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 18px}
.st-jt{display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums}
.st-jt .st-q{display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-decoration-color: #C9BFA6; text-underline-offset: 3px}
.st-jt .st-q:hover, .st-jt .st-q.st-on{text-decoration-color: #2A2521}
@container (min-width: 760px){
.st-jhead, .st-j{grid-template-columns: 200px 84px minmax(0, 1fr) 44px; grid-template-areas: "name years bar tot" ". . detail detail"; gap: 2px 14px}
.st-jhead{grid-template-areas: "name years bar tot"}
.st-jhead-years{display: block}
.st-jname, .st-jyears{align-self: center}
.st-jdetail{justify-content: flex-start}
}
@container (min-width: 1040px){
.st-jhead, .st-j{grid-template-columns: 240px 76px minmax(0, 1fr) 48px 204px; grid-template-areas: "name years bar tot detail"; gap: 0 14px}
.st-jhead-tot{justify-self: end; white-space: nowrap}
.st-jhead{grid-template-areas: "name years bar tot ."}
.st-jdetail{flex-wrap: nowrap; align-self: center}
}

/* the ad hoc judges: few votos each, so no bars: name, years, total and the counts by type; two columns from 760px,
   three from 1040px */
.st-jlist-adhoc{margin-top: 4px; border-top: 1.5px solid #2A2521}
.st-jlist-adhoc .st-j{grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name tot" "years detail detail"; gap: 0 12px; padding: 6px 0; break-inside: avoid}
.st-jlist-adhoc .st-jname{font-size: 14px; line-height: 18px}
.st-jlist-adhoc .st-jyears{font-size: 12px; line-height: 18px}
.st-jlist-adhoc .st-jtot{font-size: 14px; line-height: 18px}
.st-jlist-adhoc .st-jdetail{justify-content: flex-end; font-size: 11px; line-height: 18px}
@container (min-width: 760px){
.st-jlist-adhoc{columns: 2; column-gap: 40px}
.st-jlist-adhoc .st-j{grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "name name tot" "years detail detail"; gap: 0 12px}
}
@container (min-width: 1040px){
.st-jlist-adhoc{columns: 3; column-gap: 36px}
}

/* 4. and 5. the courts and bodies, the authors: one bar per name, in decisions; the name opens its panel */
.st-hbars{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column}
.st-hb{display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name name" "bar n c"; gap: 2px 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid #E6DFCC}
.st-hb-name{grid-area: name; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 500}
.st-hb-name .st-q{text-decoration: underline; text-decoration-color: #C9BFA6; text-decoration-thickness: 1px; text-underline-offset: 4px}
.st-hb-name .st-q:hover, .st-hb-name .st-q.st-on{text-decoration-color: #2A2521}
.st-hb-bar{grid-area: bar; display: block; width: 100%; height: 10px; overflow: visible; border-left: 1.5px solid #2A2521; box-sizing: border-box}
.st-hb-fill{fill: #3F8A5F}
.st-hb-n{grid-area: n; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 20px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums}
.st-hb-c{grid-area: c; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 17px; color: #5F574F; font-variant-numeric: tabular-nums}
@container (min-width: 760px){
.st-hb{grid-template-columns: minmax(0, 360px) minmax(0, 1fr) 108px 112px; grid-template-areas: "name bar n c"; gap: 0 16px}
.st-hb-n, .st-hb-c{text-align: left}
}

/* the panel: right below its chart, the decisions a count counts (stats.js fills it; hidden without the script) */
.st-panel{display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; padding: 16px clamp(16px, 2cqw, 22px) 18px; background: #EDE5D0; border-radius: 12px; scroll-margin-top: 16px}
.st-panel[hidden]{display: none}
.st-pli{padding: 6px 0 12px; border-bottom: 1px solid #E6DFCC}
.st-panel-head{display: flex; align-items: flex-start; justify-content: space-between; gap: 12px}
.st-panel-t{margin: 0; min-width: 0; font-size: 19px; line-height: 1.3; font-weight: 500; text-wrap: balance}
.st-panel-t:focus{outline: none}
.st-panel-t:focus-visible{outline: 2px solid #2A2521; outline-offset: 3px}
.st-panel-x{flex: none; appearance: none; -webkit-appearance: none; min-height: 36px; margin: -4px 0 0; padding: 4px 14px; border: 1px solid #5F574F; border-radius: 999px; background: #FAF8F2; color: #2A2521; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer}
.st-panel-x:hover{border-color: #2A2521; background: #FFFFFF}
.st-panel-x:focus-visible{outline: 2px solid #2A2521; outline-offset: 2px}
.st-plist{list-style: none; margin: 0; padding: 0 4px 0 0; max-height: min(28rem, 65vh); overflow-y: auto; overscroll-behavior: contain}
.st-plist li{display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid #C9BFA6}
.st-plist em{overflow-wrap: anywhere}
.st-plist a{align-self: flex-start; background: none; padding: 0; text-decoration: underline; text-decoration-color: #5F574F; text-decoration-thickness: 1px; text-underline-offset: 4px}
.st-plist a:hover{text-decoration-color: #2A2521}
.st-meta{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 19px; color: #5F574F}
.st-pdf{display: inline-block; margin-left: 7px; padding: 0 4px; border: 1px solid #5F574F; border-radius: 3px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-style: normal; font-size: 12px; line-height: 15px; font-weight: 500; letter-spacing: 0.04em; color: #2A2521; vertical-align: 2px}

/* motion, on screens only: once, as each piece comes into view where the browser has view timelines, else after the
   page loads (the bars grow, the dots rise). In print and with reduced motion nothing moves and every picture is
   complete. */
@keyframes st-grow-x{from{transform: scaleX(0)}to{transform: scaleX(1)}}
@keyframes st-grow-y{from{transform: scaleY(0)}to{transform: scaleY(1)}}
@keyframes st-rise{from{opacity: 0; transform: translateY(5px)}to{opacity: 1; transform: translateY(0)}}
@media screen and (prefers-reduced-motion: no-preference){
.st-jgrow, .st-hb-fill{transform-box: view-box; transform-origin: 0 0; animation: st-grow-x 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both}
.st-yb{transform-origin: 50% 100%; animation: st-grow-y 0.8s ease-out 0.1s both}
.st-ocdot{animation: st-rise 0.6s ease-out 0.15s both}
@supports (animation-timeline: view()) and (animation-range: entry 10% cover 30%){
.st-jgrow, .st-hb-fill, .st-yb, .st-ocdot{animation-delay: 0s; animation-timeline: view(); animation-range: entry 0% entry 100%}
}
}
@media (prefers-reduced-motion: reduce), print{
.tl-more, .tl-more *{animation: none !important; transition: none !important}
}
@media print{
.st-panel, .st-hint{display: none !important}
}
@media (forced-colors: active){
.st-sq, .st-sw, .st-heat td.st-hc, .st-yb, .st-ocdot, .st-jbar, .st-hb-bar{forced-color-adjust: none}
}

/* Connecting Caititu (prefix cn-): the section "Como conectar, chat por chat" of the install page (tabs Claude,
   ChatGPT, "Para quem programa", each with an animated pencil sketch and three to five short steps that light up with
   it) and one page per chat (install_claude, install_chatgpt, install_dev). The address and the other texts to copy
   have a copy button (js/copy.js shows it; without the script the text is still selectable in one click). Unusual
   words are explained in a balloon on hover and on keyboard focus. Tabs, balloons and the pause switch are CSS only.
   Sketches: drawn once when shown (cn-ink, cn-fade; --cn-t and --cn-d from the classes cn-tN / cn-dN), then a loop
   (cn-lp; duration and delay per sketch: cn-L<key>; keyframes cn-kN, generated). Animated: opacity, transform,
   stroke-dashoffset. The base style of every element is the last scene, complete: that is what reduced motion and
   print show, and what a browser without :has() shows (there the three panels stand one after another, with no tab
   bar, no pause switch and no animation: every animation is named inside @supports selector(:has(*))).
   Generated by .local/graphics/connect/generator/gen.py; edit the generator, not this file. */
.cn-root{color: #2A2521}
.cn-vh{position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap}

/* the address, the test question and the code: a text to copy, a button "Copiar" and a live "Copiado" */
.cn-addr{display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 640px; box-sizing: border-box; padding: 14px 16px 12px; background: #EDE5D0; border-radius: 10px}
.hero-colar-short .cn-addr,.band-colar .cn-addr{background: #FAF8F2}
.cn-addr-label{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5F574F}
.cn-copyrow{display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px}
.cn-addr-code{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: clamp(17px, 1.7cqw, 20px); line-height: 1.35; font-weight: 600; color: #2A2521; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all}
.cn-copy{display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px 0 13px; border: 1.5px solid #2A2521; border-radius: 8px; background: transparent; color: #2A2521; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 1; font-weight: 500; cursor: pointer}
.cn-copy[hidden]{display: none}
.cn-copy:hover{background: #2A2521; color: #FAF8F2}
.cn-copy:focus-visible{outline: 3px solid #2A2521; outline-offset: 2px}
.cn-copy-icon{display: block; flex: none; width: 18px; height: 18px; overflow: visible}
.cn-status{display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; line-height: 1.2; font-weight: 500; color: #2A2521}
.cn-status-text:empty{display: none}
.cn-copyable{min-width: 0}
.cn-status-check{display: none; width: 18px; height: 14px; overflow: visible}
.cn-done .cn-status-check{display: block}
.cn-test{display: flex; flex-direction: column; gap: 10px; margin: 10px 0 2px; padding: 12px 16px; border-left: 3px solid #3F8A5F; border-radius: 0 8px 8px 0; background: #EDE5D0}
.cn-test-q{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; line-height: 1.45; -webkit-user-select: all; user-select: all}
.cn-codebox{display: flex; flex-direction: column; gap: 8px; min-width: 0}
.cn-code{margin: 0; padding: 12px 14px; background: #EDE5D0; border-radius: 8px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 20px; white-space: pre; overflow-x: auto}
.cn-code-wrap{white-space: pre-wrap; overflow-wrap: anywhere}
.cn-code:focus-visible{outline: 2px solid #2A2521; outline-offset: 2px}
.cn-code-inline{font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85em; overflow-wrap: anywhere}
.cn-nowrap{white-space: nowrap}

/* screen labels, typed words, addresses to type */
.cn-ui{padding: 1px 6px; border: 1px solid #C9BFA6; border-radius: 5px; background: #FAF8F2; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.84em; line-height: 1.3; font-weight: 600; -webkit-box-decoration-break: clone; box-decoration-break: clone}
.cn-en{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.84em; font-weight: 500; color: #5F574F}
.cn-type,.cn-path{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.9em; font-weight: 600; overflow-wrap: anywhere}

/* a word explained in a balloon: under the line of the word (its top is the static position of an inline box, so
   .cn-tip must keep display inline; it comes just before the word in the HTML, so that this position is on the
   word's own line even when the word ends a line; margin-top moves it one line down), from the left edge of its
   paragraph and never wider than it, so never past the screen's edge */
.cn-host{position: relative}
.cn-term{cursor: help; white-space: nowrap; border-radius: 3px; text-decoration: underline dotted #5F574F; text-decoration-thickness: 1.5px; text-underline-offset: 4px}
.cn-term:hover,.cn-term:focus{background: #EDE5D0; text-decoration-color: #2A2521}
.hero-colar .cn-term:hover,.hero-colar .cn-term:focus,.hero-colar-short .cn-term:hover,.hero-colar-short .cn-term:focus{background: #FAF8F2}
.cn-term:focus{outline: none}
.cn-term:focus-visible{outline: 2px solid #2A2521; outline-offset: 2px}
.cn-tip{position: absolute; left: 0; z-index: 20; width: max-content; max-width: min(24rem, 100%); box-sizing: border-box; margin-top: 1.7em; margin-top: calc(1lh + 3px); padding: 9px 13px 10px; border-radius: 8px; background: #2A2521; color: #FAF8F2; text-align: left; text-transform: none; letter-spacing: 0; visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility 0s linear .15s}
.cn-tip-in{display: block; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 1.4; font-style: normal; font-weight: 400}
.cn-gl:hover .cn-tip,.cn-gl:focus-within .cn-tip{visibility: visible; opacity: 1; transition: opacity .15s ease}
.cn-gl.cn-gl-off .cn-tip{visibility: hidden; opacity: 0}
.cn-short li:hover,.cn-short li:focus-within{z-index: 1}

/* tabs: one radio per chat inside its label; the panel of the checked one is shown */
.cn-tabs{display: flex; flex-direction: column; gap: 28px}
.cn-tabbar{display: none; flex-wrap: wrap; gap: 0 4px; border-bottom: 1px solid #C9BFA6}
.cn-tab{position: relative; display: flex; align-items: center; min-height: 46px; padding: 0 12px 4px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; line-height: 20px; font-weight: 500; color: #5F574F; cursor: pointer}
.cn-radio{position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer}
.cn-tab:hover,.cn-tab:has(.cn-radio:checked){color: #2A2521}
.cn-tab:has(.cn-radio:focus-visible){outline: 3px solid #2A2521; outline-offset: -3px; border-radius: 6px}
.cn-tab-line{position: absolute; left: 8px; bottom: -3px; display: block; width: calc(100% - 16px); height: 8px; overflow: visible; color: #3F8A5F; opacity: 0; pointer-events: none}
.cn-tab-line path{stroke-dasharray: 1 2}
.cn-tab:has(.cn-radio:checked) .cn-tab-line{opacity: 1}
.cn-panel{display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start}
.cn-panel + .cn-panel{padding-top: 40px; border-top: 1px solid #C9BFA6}
.cn-body{display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0}
.cn-plan{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 1.45; color: #5F574F}
.cn-short{display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0 0 8px; padding: 0; list-style: none}
.cn-short li{position: relative; z-index: 0; display: flex; align-items: baseline; gap: 12px; padding: 6px 10px; font-size: 17px; line-height: 1.45}
.cn-sn{flex: none; width: 14px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 14px; font-weight: 600; text-align: right; color: #5F574F}
.cn-hl::before{content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: #EDE5D0; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both}

/* the sketches */
.cn-art{display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; width: 100%; max-width: 500px}
.cn-sk{display: block; width: 100%; height: auto; color: #2A2521; overflow: visible}
.cn-sk text{fill: #2A2521; stroke: none; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif}
.cn-sk .cn-x{font-size: 11px; font-weight: 500}
.cn-sk .cn-xb{font-size: 11px; font-weight: 650}
.cn-sk .cn-xh{font-size: 12.5px; font-weight: 650}
.cn-sk .cn-xs,.cn-sk .cn-xw{font-size: 9.5px; font-weight: 500; fill: #5F574F}
.cn-sk .cn-xm{font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 9.4px; font-weight: 500}
.cn-ink{stroke-dasharray: 1 2}
.cn-ink,.cn-fade{animation-duration: var(--cn-d, .4s); animation-timing-function: ease-in-out; animation-delay: var(--cn-t, 0s); animation-iteration-count: 1; animation-fill-mode: both}
.cn-lp{animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both}
.cn-dr{stroke-dasharray: 1 2}
.cn-o0{opacity: 0}
.cn-kx{transform: translateX(11px)}
.cn-cv{transform: scaleX(0); transform-box: fill-box; transform-origin: right center}
.cn-rp{opacity: 0; transform-box: fill-box; transform-origin: center}
@keyframes cn-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes cn-fade{from{opacity: 0}to{opacity: 1}}
/* the pause switch (a checkbox inside its label): under the sketch of a chat's page; on the install page one for
   the three tabs, under the tab bar, so that a pause holds when the tab changes. Checked: a play triangle, on ink */
.cn-pause{position: relative; display: none; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border-radius: 6px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 1; font-weight: 500; color: #5F574F; cursor: pointer}
.cn-pause-box{position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer}
.cn-pause:hover{color: #2A2521}
.cn-pause:has(.cn-pause-box:focus-visible){outline: 2px solid #2A2521; outline-offset: 1px}
.cn-pause:has(.cn-pause-box:checked){background: #2A2521; color: #FAF8F2}
.cn-pause-icon,.cn-play-icon{display: block; width: 11px; height: 12px}
.cn-play-icon{display: none}
.cn-pause:has(.cn-pause-box:checked) .cn-pause-icon{display: none}
.cn-pause:has(.cn-pause-box:checked) .cn-play-icon{display: block}
.cn-tabs > .cn-pause{align-self: flex-end; margin: -22px 0 -14px}
.cn-art:has(.cn-pause-box:checked) .cn-sk *,.cn-tabs:has(.cn-pause-box:checked) .cn-sk *,.cn-tabs:has(.cn-pause-box:checked) .cn-hl::before{animation-play-state: paused}

/* where :has() works: the tab bar, one panel at a time, the pause switch, and every animation */
@supports selector(:has(*)){
.cn-tabbar{display: flex}
.cn-panel{display: none}
.cn-panel + .cn-panel{padding-top: 0; border-top: 0}
.cn-tabs:has(.cn-r-claude:checked) .cn-p-claude,.cn-tabs:has(.cn-r-chatgpt:checked) .cn-p-chatgpt,.cn-tabs:has(.cn-r-dev:checked) .cn-p-dev{display: grid}
.cn-tab:has(.cn-radio:checked) .cn-tab-line path{animation: cn-draw .45s ease-in-out both}
.cn-ink{animation-name: cn-draw}
.cn-fade{animation-name: cn-fade}
.cn-pause{display: inline-flex}
}

/* the install page's panels: from a page of 760px, the sketch on the left, the steps on the right */
@container (max-width: 419.98px){
.cn-tab{padding: 0 8px 4px; font-size: 15px}
}
@container (max-width: 359.98px){
.cn-tab{padding: 0 5px 4px; font-size: 14px}
}
@container (min-width: 760px){
.cn-panel{grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 48px}
.cn-panel .cn-art{max-width: none}
}

/* the page of each chat */
.cn-hero{max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center}
.cn-hero-text{display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0}
.cn-hero .cn-art{justify-self: center}
@container (min-width: 900px){
.cn-hero{grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px}
.cn-hero .cn-art{justify-self: end}
}
.cn-crumbs{display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 24px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5F574F}
.cn-crumbs a{color: #2A2521}
.cn-flow{max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px}
.cn-phase{display: flex; flex-direction: column; gap: 18px; max-width: 760px}
.cn-phase-title{display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-weight: 500; font-size: clamp(26px, 2.6cqw, 32px); line-height: 1.2; letter-spacing: -0.01em}
.cn-once{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #5F574F}
.cn-steps{display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none}
.cn-step{display: flex; align-items: flex-start; gap: 14px}
.cn-num{position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 1; font-weight: 600}
.cn-num-ring{position: absolute; left: -2px; top: -2px; display: block; width: 36px; height: 36px; overflow: visible; color: #3F8A5F}
.cn-step-text{flex: 1 1 auto; min-width: 0; padding-top: 3px; font-size: 18px; line-height: 1.5}
.cn-see{margin: 0; padding-left: 14px; border-left: 2px solid #C9BFA6; font-size: 17px; line-height: 1.5}
.cn-fix{display: flex; flex-direction: column; gap: 18px; margin: 0}
.cn-fix-item{display: flex; flex-direction: column; gap: 4px}
.cn-fix dt{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600}
.cn-fix dd{margin: 0; font-size: 17px; line-height: 1.5}
.cn-phone{margin: 0; max-width: 640px; font-size: 17px; line-height: 1.5}
.cn-files{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 40px 56px}
.cn-file{display: flex; flex-direction: column; gap: 10px; min-width: 0}
.cn-file-title{margin: 0; font-weight: 500; font-size: 22px; line-height: 1.3}
.cn-file-where{margin: 0; font-size: 17px; line-height: 1.5}

@media (forced-colors: active){
.cn-sk{forced-color-adjust: none; background: #FAF8F2; border-radius: 6px}
.cn-tab:has(.cn-radio:checked){outline: 2px solid Highlight; outline-offset: -2px}
.cn-hl::before{display: none}
.cn-tip{border: 1px solid CanvasText}
}
/* reduced motion and print: no animation at all, every drawing complete; print shows every panel, no buttons */
@media (prefers-reduced-motion: reduce){
.cn-root *,.cn-root *::before,.cn-root *::after{animation: none !important; transition: none !important}
.cn-root .cn-ink,.cn-root .cn-dr,.cn-root .cn-tab-line path{stroke-dasharray: none}
.cn-pause{display: none}
}
@media print{
.cn-root *,.cn-root *::before,.cn-root *::after{animation: none !important; transition: none !important}
.cn-root .cn-ink,.cn-root .cn-dr,.cn-root .cn-tab-line path{stroke-dasharray: none}
.cn-tabbar,.cn-pause,.cn-copy,.cn-status,.cn-tip{display: none !important}
.cn-panel{display: grid !important; break-inside: avoid}
.cn-panel + .cn-panel{margin-top: 32px}
}
/* generated: the clocks of the sketches, their keyframes, the highlights */
.cn-Lchatgpt{animation-duration:15.4s;animation-delay:1.3s}
.cn-hl-chatgpt::before{animation-duration:15.4s;animation-delay:1.3s}
.cn-Lclaude{animation-duration:16s;animation-delay:1.3s}
.cn-hl-claude::before{animation-duration:16s;animation-delay:1.3s}
.cn-Ldev{animation-duration:12s;animation-delay:1s}
.cn-hl-dev::before{animation-duration:12s;animation-delay:1s}
.cn-t0{--cn-t:0s}.cn-t2{--cn-t:0.2s}.cn-t4{--cn-t:0.4s}.cn-t5{--cn-t:0.5s}.cn-t6{--cn-t:0.6s}.cn-t8{--cn-t:0.8s}.cn-t9{--cn-t:0.9s}.cn-t10{--cn-t:1s}
.cn-d1{--cn-d:0.1s}.cn-d2{--cn-d:0.2s}.cn-d3{--cn-d:0.3s}.cn-d4{--cn-d:0.4s}.cn-d5{--cn-d:0.5s}
@keyframes cn-k1{0%,8.44%,63.75%,100%{opacity:1}10.31%,61.88%{opacity:0}}
@keyframes cn-k2{0%,8.12%,20.62%,100%{opacity:0}10%,18.75%{opacity:1}}
@keyframes cn-k3{0%,18.12%,63.75%,100%{opacity:0}20%,61.88%{opacity:1}}
@keyframes cn-k4{0%,100%{opacity:0;transform:translateY(5px)}24.06%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}25.62%,33.12%{opacity:1;transform:translateY(0)}35%{opacity:0;transform:translateY(0)}}
@keyframes cn-k5{0%,62.31%,100%{transform:scaleX(1)}38.12%{transform:scaleX(1);animation-timing-function:steps(7,end)}41.88%,62.19%{transform:scaleX(0)}}
@keyframes cn-k6{0%,62.31%,100%{transform:scaleX(1)}45%{transform:scaleX(1);animation-timing-function:steps(27,end)}52.5%,62.19%{transform:scaleX(0)}}
@keyframes cn-k7{0%{stroke-dashoffset:1.01;opacity:1}55.62%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}57.19%,62.19%{stroke-dashoffset:0;opacity:1}64.06%{stroke-dashoffset:0;opacity:0}64.19%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k8{0%{stroke-dashoffset:1.01;opacity:1}59.06%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}61.25%,62.19%{stroke-dashoffset:0;opacity:1}64.06%{stroke-dashoffset:0;opacity:0}64.19%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k9{0%,33.12%,64.06%,100%{opacity:0}35%,62.19%{opacity:1}}
@keyframes cn-k10{0%,100%{opacity:0;transform:translateY(5px)}67.81%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}69.38%,95%{opacity:1;transform:translateY(0)}96.88%{opacity:0;transform:translateY(0)}}
@keyframes cn-k11{0%,78.44%,99.38%,100%{opacity:0}80.31%,97.5%{opacity:1}}
@keyframes cn-k12{0%,97.62%,100%{transform:translateX(0)}77.5%{transform:translateX(0);animation-timing-function:ease-in-out}79.38%,97.5%{transform:translateX(11px)}}
@keyframes cn-k13{0%,100%{opacity:0;transform:translateY(5px)}72.5%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}74.06%,95%{opacity:1;transform:translateY(0)}96.88%{opacity:0;transform:translateY(0)}}
@keyframes cn-k14{0%{stroke-dashoffset:1.01;opacity:1}6.56%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}8.75%,18.75%{stroke-dashoffset:0;opacity:1}20.62%{stroke-dashoffset:0;opacity:0}20.75%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k15{0%{stroke-dashoffset:1.01;opacity:1}12.81%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}15%,18.75%{stroke-dashoffset:0;opacity:1}20.62%{stroke-dashoffset:0;opacity:0}20.75%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k16{0%{stroke-dashoffset:1.01;opacity:1}22.81%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}25%,33.12%{stroke-dashoffset:0;opacity:1}35%{stroke-dashoffset:0;opacity:0}35.12%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k17{0%{stroke-dashoffset:1.01;opacity:1}28.44%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}30.62%,33.12%{stroke-dashoffset:0;opacity:1}35%{stroke-dashoffset:0;opacity:0}35.12%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k18{0%{stroke-dashoffset:1.01;opacity:1}66.56%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}68.75%,95%{stroke-dashoffset:0;opacity:1}96.88%{stroke-dashoffset:0;opacity:0}97%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k19{0%{stroke-dashoffset:1.01;opacity:1}70.94%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}73.12%,95%{stroke-dashoffset:0;opacity:1}96.88%{stroke-dashoffset:0;opacity:0}97%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k20{0%{stroke-dashoffset:1.01;opacity:1}77.5%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}79.69%,95%{stroke-dashoffset:0;opacity:1}96.88%{stroke-dashoffset:0;opacity:0}97%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k21{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.25%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.25%,10%{opacity:1;transform:translate(46.8px,72px);animation-timing-function:ease-in-out}12.5%,18.75%{opacity:1;transform:translate(139.9px,85px);animation-timing-function:ease-in-out}22.5%,25.62%{opacity:1;transform:translate(150.9px,66px);animation-timing-function:ease-in-out}28.12%,33.75%{opacity:1;transform:translate(156px,95px);animation-timing-function:ease-in-out}36.88%,42.5%{opacity:1;transform:translate(150px,81px);animation-timing-function:ease-in-out}43.75%,52.5%{opacity:1;transform:translate(170px,117px);animation-timing-function:ease-in-out}55.31%,56.25%{opacity:1;transform:translate(78.5px,154px);animation-timing-function:ease-in-out}58.75%,61.88%{opacity:1;transform:translate(258.3px,184px);animation-timing-function:ease-in-out}66.25%,68.75%{opacity:1;transform:translate(117px,187px);animation-timing-function:ease-in-out}70.94%,74.38%{opacity:1;transform:translate(148.8px,130px);animation-timing-function:ease-in-out}77.19%,79.69%{opacity:1;transform:translate(281px,124px);animation-timing-function:ease-in-out}82.5%,95%{opacity:1;transform:translate(287px,168px);animation-timing-function:ease-in-out}96.88%,100%{opacity:0;transform:translate(287px,168px)}}
@keyframes cn-k22{0%,6.25%,9.5%,12.5%,15.75%,22.5%,25.75%,28.12%,31.37%,36.88%,40.12%,43.75%,47%,55.31%,58.56%,58.75%,62%,66.25%,69.5%,77.19%,80.44%,100%{opacity:0;transform:scale(.4)}6.44%,12.69%,22.69%,28.31%,37.06%,43.94%,55.5%,58.94%,66.44%,77.38%{opacity:.9;transform:scale(.4)}9.38%,15.62%,25.62%,31.25%,40%,46.88%,58.44%,61.88%,69.38%,80.31%{opacity:0;transform:scale(1.9)}}
@keyframes cn-k53{0%,90.83%,100%{opacity:1}92.92%,97.92%{opacity:0}}
@keyframes cn-k54{0%,96%,100%{transform:scaleX(1)}3.33%{transform:scaleX(1);animation-timing-function:steps(31,end)}16.67%,95.83%{transform:scaleX(0)}}
@keyframes cn-k55{0%,96%,100%{transform:scaleX(1)}17.5%{transform:scaleX(1);animation-timing-function:steps(20,end)}24.17%,95.83%{transform:scaleX(0)}}
@keyframes cn-k56{0%,96%,100%{transform:scaleX(1)}25%{transform:scaleX(1);animation-timing-function:steps(27,end)}36.67%,95.83%{transform:scaleX(0)}}
@keyframes cn-k57{0%{stroke-dashoffset:1.01;opacity:1}39.17%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}42.08%,90.83%{stroke-dashoffset:0;opacity:1}93.33%{stroke-dashoffset:0;opacity:0}93.5%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k58{0%,42.5%,92.5%,100%{opacity:0}44.17%,90.83%{opacity:1}}
@keyframes cn-k59{0%,100%{opacity:0;transform:translateY(5px)}47.5%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}49.58%,90.83%{opacity:1;transform:translateY(0)}93.33%{opacity:0;transform:translateY(0)}}
@keyframes cn-k60{0%{stroke-dashoffset:1.01;opacity:1}58.33%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}63.33%,90.83%{stroke-dashoffset:0;opacity:1}93.33%{stroke-dashoffset:0;opacity:0}93.5%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k61{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.25%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.25%,10%{opacity:1;transform:translate(46.8px,72px);animation-timing-function:ease-in-out}12.5%,18.75%{opacity:1;transform:translate(139.9px,85px);animation-timing-function:ease-in-out}22.5%,25.62%{opacity:1;transform:translate(142px,66px);animation-timing-function:ease-in-out}28.12%,33.75%{opacity:1;transform:translate(156px,95px);animation-timing-function:ease-in-out}36.88%,42.5%{opacity:1;transform:translate(150px,81px);animation-timing-function:ease-in-out}43.75%,52.5%{opacity:1;transform:translate(170px,117px);animation-timing-function:ease-in-out}55.31%,56.25%{opacity:1;transform:translate(78.5px,154px);animation-timing-function:ease-in-out}58.75%,61.88%{opacity:1;transform:translate(265.1px,184px);animation-timing-function:ease-in-out}66.25%,68.75%{opacity:1;transform:translate(117px,187px);animation-timing-function:ease-in-out}70.94%,74.38%{opacity:1;transform:translate(148.8px,130px);animation-timing-function:ease-in-out}77.19%,79.69%{opacity:1;transform:translate(281px,124px);animation-timing-function:ease-in-out}82.5%,95%{opacity:1;transform:translate(287px,168px);animation-timing-function:ease-in-out}96.88%,100%{opacity:0;transform:translate(287px,168px)}}
@keyframes cn-k63{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.25%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.25%,10%{opacity:1;transform:translate(43.3px,72px);animation-timing-function:ease-in-out}12.5%,18.75%{opacity:1;transform:translate(140px,85px);animation-timing-function:ease-in-out}22.5%,25.62%{opacity:1;transform:translate(134.8px,66px);animation-timing-function:ease-in-out}28.12%,33.75%{opacity:1;transform:translate(156px,95px);animation-timing-function:ease-in-out}36.88%,42.5%{opacity:1;transform:translate(150px,81px);animation-timing-function:ease-in-out}43.75%,52.5%{opacity:1;transform:translate(170px,117px);animation-timing-function:ease-in-out}55.31%,56.25%{opacity:1;transform:translate(78.5px,154px);animation-timing-function:ease-in-out}58.75%,61.88%{opacity:1;transform:translate(270.8px,184px);animation-timing-function:ease-in-out}66.25%,68.75%{opacity:1;transform:translate(117px,187px);animation-timing-function:ease-in-out}70.94%,74.38%{opacity:1;transform:translate(148.9px,130px);animation-timing-function:ease-in-out}77.19%,79.69%{opacity:1;transform:translate(281px,124px);animation-timing-function:ease-in-out}82.5%,95%{opacity:1;transform:translate(287px,168px);animation-timing-function:ease-in-out}96.88%,100%{opacity:0;transform:translate(287px,168px)}}
@keyframes cn-k65{0%,1.25%,20%,100%{opacity:0}2.81%,18.44%{opacity:1}}
@keyframes cn-k66{0%,18.44%,34.69%,100%{opacity:0}20%,33.12%{opacity:1}}
@keyframes cn-k67{0%,33.12%,59.69%,100%{opacity:0}34.69%,58.13%{opacity:1}}
@keyframes cn-k68{0%,58.13%,63.75%,100%{opacity:0}59.69%,62.19%{opacity:1}}
@keyframes cn-k69{0%,64.38%,97.19%,100%{opacity:0}65.94%,95.62%{opacity:1}}
@keyframes cn-k75{0%,1.67%,47.92%,100%{opacity:0}3.75%,45.83%{opacity:1}}
@keyframes cn-k76{0%,46.67%,92.92%,100%{opacity:0}48.75%,90.83%{opacity:1}}
@keyframes cn-k77{0%,8.77%,68.83%,100%{opacity:1}10.71%,66.88%{opacity:0}}
@keyframes cn-k78{0%,8.77%,68.83%,71.1%,98.7%,100%{opacity:1}10.71%,66.88%,73.05%,96.75%{opacity:0}}
@keyframes cn-k79{0%,8.44%,68.83%,100%{opacity:0}10.39%,66.88%{opacity:1}}
@keyframes cn-k80{0%,100%{opacity:0;transform:translateY(5px)}13.96%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}15.58%,25.32%{opacity:1;transform:translateY(0)}27.27%{opacity:0;transform:translateY(0)}}
@keyframes cn-k81{0%,69.29%,100%{transform:scaleX(1)}30.52%{transform:scaleX(1);animation-timing-function:steps(7,end)}33.77%,69.16%{transform:scaleX(0)}}
@keyframes cn-k82{0%,69.29%,100%{transform:scaleX(1)}37.66%{transform:scaleX(1);animation-timing-function:steps(27,end)}45.45%,69.16%{transform:scaleX(0)}}
@keyframes cn-k83{0%,53.57%{opacity:1}54.55%,100%{opacity:0}}
@keyframes cn-k84{0%,53.57%{opacity:0}54.55%,100%{opacity:1}}
@keyframes cn-k85{0%{stroke-dashoffset:1.01;opacity:1}57.79%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}59.09%,66.88%{stroke-dashoffset:0;opacity:1}68.83%{stroke-dashoffset:0;opacity:0}68.96%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k86{0%{stroke-dashoffset:1.01;opacity:1}54.87%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}57.14%,66.88%{stroke-dashoffset:0;opacity:1}68.83%{stroke-dashoffset:0;opacity:0}68.96%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k87{0%{stroke-dashoffset:1.01;opacity:1}57.47%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}59.74%,66.88%{stroke-dashoffset:0;opacity:1}68.83%{stroke-dashoffset:0;opacity:0}68.96%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k88{0%{stroke-dashoffset:1.01;opacity:1}62.01%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}64.29%,66.88%{stroke-dashoffset:0;opacity:1}68.83%{stroke-dashoffset:0;opacity:0}68.96%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k89{0%,100%{opacity:0;transform:translateY(3px)}48.38%{opacity:0;transform:translateY(3px);animation-timing-function:ease-out}50%,53.57%{opacity:1;transform:translateY(0)}55.52%{opacity:0;transform:translateY(0)}}
@keyframes cn-k90{0%,25.32%,68.83%,100%{opacity:0}27.27%,66.88%{opacity:1}}
@keyframes cn-k91{0%,72.4%,81.49%,100%{opacity:0}73.05%,80.84%{opacity:1}}
@keyframes cn-k92{0%,81.3%,100%{transform:scaleX(1)}72.4%{transform:scaleX(1);animation-timing-function:steps(1,end)}72.73%,81.17%{transform:scaleX(0)}}
@keyframes cn-k93{0%,100%{opacity:0;transform:translateY(5px)}73.7%{opacity:0;transform:translateY(5px);animation-timing-function:ease-out}75.32%,80.19%{opacity:1;transform:translateY(0)}82.14%{opacity:0;transform:translateY(0)}}
@keyframes cn-k94{0%,80.84%,97.73%,100%{opacity:0}81.82%,96.75%{opacity:1}}
@keyframes cn-k95{0%{stroke-dashoffset:1.01;opacity:1}81.49%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}83.77%,96.75%{stroke-dashoffset:0;opacity:1}98.7%{stroke-dashoffset:0;opacity:0}98.83%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k96{0%{stroke-dashoffset:1.01;opacity:1}82.47%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}87.66%,96.75%{stroke-dashoffset:0;opacity:1}98.7%{stroke-dashoffset:0;opacity:0}98.83%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k97{0%{stroke-dashoffset:1.01;opacity:1}6.82%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}9.09%,25.32%{stroke-dashoffset:0;opacity:1}27.27%{stroke-dashoffset:0;opacity:0}27.4%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k98{0%{stroke-dashoffset:1.01;opacity:1}12.66%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}14.94%,25.32%{stroke-dashoffset:0;opacity:1}27.27%{stroke-dashoffset:0;opacity:0}27.4%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k99{0%{stroke-dashoffset:1.01;opacity:1}19.16%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}21.43%,25.32%{stroke-dashoffset:0;opacity:1}27.27%{stroke-dashoffset:0;opacity:0}27.4%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k100{0%{stroke-dashoffset:1.01;opacity:1}77.27%{stroke-dashoffset:1.01;opacity:1;animation-timing-function:ease-in-out}79.55%,80.19%{stroke-dashoffset:0;opacity:1}82.14%{stroke-dashoffset:0;opacity:0}82.27%,100%{stroke-dashoffset:1.01;opacity:0}}
@keyframes cn-k101{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.3%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.49%,9.09%{opacity:1;transform:translate(35.3px,72px);animation-timing-function:ease-in-out}12.34%,15.58%{opacity:1;transform:translate(253.4px,44px);animation-timing-function:ease-in-out}18.83%,22.73%{opacity:1;transform:translate(200px,102.5px);animation-timing-function:ease-in-out}28.9%,35.06%{opacity:1;transform:translate(150px,77px);animation-timing-function:ease-in-out}37.34%,45.45%{opacity:1;transform:translate(176px,111px);animation-timing-function:ease-in-out}47.73%,49.35%{opacity:1;transform:translate(200px,146px);animation-timing-function:ease-in-out}51.62%,54.55%{opacity:1;transform:translate(135.3px,162px);animation-timing-function:ease-in-out}57.14%,59.09%{opacity:1;transform:translate(78px,166px);animation-timing-function:ease-in-out}61.69%,66.23%{opacity:1;transform:translate(269px,188px);animation-timing-function:ease-in-out}70.78%,73.7%{opacity:1;transform:translate(150px,170px);animation-timing-function:ease-in-out}76.95%,79.87%{opacity:1;transform:translate(140px,117px);animation-timing-function:ease-in-out}84.42%,94.81%{opacity:1;transform:translate(236px,186px);animation-timing-function:ease-in-out}96.75%,100%{opacity:0;transform:translate(236px,186px)}}
@keyframes cn-k102{0%,6.49%,9.87%,12.34%,15.71%,18.83%,22.21%,28.9%,32.27%,37.34%,40.71%,47.73%,51.1%,51.62%,55%,57.14%,60.52%,61.69%,65.06%,70.78%,74.16%,76.95%,80.32%,100%{opacity:0;transform:scale(.4)}6.69%,12.53%,19.03%,29.09%,37.53%,47.92%,51.82%,57.34%,61.88%,70.97%,77.14%{opacity:.9;transform:scale(.4)}9.74%,15.58%,22.08%,32.14%,40.58%,50.97%,54.87%,60.39%,64.94%,74.03%,80.19%{opacity:0;transform:scale(1.9)}}
@keyframes cn-k103{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.3%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.49%,9.09%{opacity:1;transform:translate(59.7px,72px);animation-timing-function:ease-in-out}12.34%,15.58%{opacity:1;transform:translate(257.1px,44px);animation-timing-function:ease-in-out}18.83%,22.73%{opacity:1;transform:translate(203.7px,102.5px);animation-timing-function:ease-in-out}28.9%,35.06%{opacity:1;transform:translate(150px,77px);animation-timing-function:ease-in-out}37.34%,45.45%{opacity:1;transform:translate(176px,111px);animation-timing-function:ease-in-out}47.73%,49.35%{opacity:1;transform:translate(200px,146px);animation-timing-function:ease-in-out}51.62%,54.55%{opacity:1;transform:translate(133.4px,162px);animation-timing-function:ease-in-out}57.14%,59.09%{opacity:1;transform:translate(78px,166px);animation-timing-function:ease-in-out}61.69%,66.23%{opacity:1;transform:translate(221px,188px);animation-timing-function:ease-in-out}70.78%,73.7%{opacity:1;transform:translate(150px,170px);animation-timing-function:ease-in-out}76.95%,79.87%{opacity:1;transform:translate(140px,117px);animation-timing-function:ease-in-out}84.42%,94.81%{opacity:1;transform:translate(236px,186px);animation-timing-function:ease-in-out}96.75%,100%{opacity:0;transform:translate(236px,186px)}}
@keyframes cn-k104{0%{opacity:0;transform:translate(262px,200px);animation-timing-function:ease-in-out}1.3%{opacity:1;transform:translate(262px,200px);animation-timing-function:ease-in-out}6.49%,9.09%{opacity:1;transform:translate(35.3px,72px);animation-timing-function:ease-in-out}12.34%,15.58%{opacity:1;transform:translate(266.8px,44px);animation-timing-function:ease-in-out}18.83%,22.73%{opacity:1;transform:translate(234px,102.5px);animation-timing-function:ease-in-out}28.9%,35.06%{opacity:1;transform:translate(150px,77px);animation-timing-function:ease-in-out}37.34%,45.45%{opacity:1;transform:translate(176px,111px);animation-timing-function:ease-in-out}47.73%,49.35%{opacity:1;transform:translate(200px,146px);animation-timing-function:ease-in-out}51.62%,54.55%{opacity:1;transform:translate(135.5px,162px);animation-timing-function:ease-in-out}57.14%,59.09%{opacity:1;transform:translate(78px,166px);animation-timing-function:ease-in-out}61.69%,66.23%{opacity:1;transform:translate(239.6px,188px);animation-timing-function:ease-in-out}70.78%,73.7%{opacity:1;transform:translate(150px,170px);animation-timing-function:ease-in-out}76.95%,79.87%{opacity:1;transform:translate(140px,117px);animation-timing-function:ease-in-out}84.42%,94.81%{opacity:1;transform:translate(236px,186px);animation-timing-function:ease-in-out}96.75%,100%{opacity:0;transform:translate(236px,186px)}}
@keyframes cn-k105{0%,1.3%,18.51%,100%{opacity:0}2.92%,16.88%{opacity:1}}
@keyframes cn-k106{0%,16.88%,26.95%,100%{opacity:0}18.51%,25.32%{opacity:1}}
@keyframes cn-k107{0%,25.32%,57.47%,100%{opacity:0}26.95%,55.84%{opacity:1}}
@keyframes cn-k108{0%,55.84%,68.51%,100%{opacity:0}57.47%,66.88%{opacity:1}}
@keyframes cn-k109{0%,68.83%,97.73%,100%{opacity:0}70.45%,96.1%{opacity:1}}
@supports selector(:has(*)){
.cn-k1{animation-name:cn-k1}.cn-k2{animation-name:cn-k2}.cn-k3{animation-name:cn-k3}.cn-k4{animation-name:cn-k4}.cn-k5{animation-name:cn-k5}.cn-k6{animation-name:cn-k6}.cn-k7{animation-name:cn-k7}.cn-k8{animation-name:cn-k8}.cn-k9{animation-name:cn-k9}.cn-k10{animation-name:cn-k10}.cn-k11{animation-name:cn-k11}.cn-k12{animation-name:cn-k12}.cn-k13{animation-name:cn-k13}.cn-k14{animation-name:cn-k14}.cn-k15{animation-name:cn-k15}.cn-k16{animation-name:cn-k16}.cn-k17{animation-name:cn-k17}.cn-k18{animation-name:cn-k18}.cn-k19{animation-name:cn-k19}.cn-k20{animation-name:cn-k20}.cn-k21{animation-name:cn-k21}.cn-k22{animation-name:cn-k22}.cn-k53{animation-name:cn-k53}.cn-k54{animation-name:cn-k54}.cn-k55{animation-name:cn-k55}.cn-k56{animation-name:cn-k56}.cn-k57{animation-name:cn-k57}.cn-k58{animation-name:cn-k58}.cn-k59{animation-name:cn-k59}.cn-k60{animation-name:cn-k60}.cn-k61{animation-name:cn-k61}.cn-k63{animation-name:cn-k63}.cn-k77{animation-name:cn-k77}.cn-k78{animation-name:cn-k78}.cn-k79{animation-name:cn-k79}.cn-k80{animation-name:cn-k80}.cn-k81{animation-name:cn-k81}.cn-k82{animation-name:cn-k82}.cn-k83{animation-name:cn-k83}.cn-k84{animation-name:cn-k84}.cn-k85{animation-name:cn-k85}.cn-k86{animation-name:cn-k86}.cn-k87{animation-name:cn-k87}.cn-k88{animation-name:cn-k88}.cn-k89{animation-name:cn-k89}.cn-k90{animation-name:cn-k90}.cn-k91{animation-name:cn-k91}.cn-k92{animation-name:cn-k92}.cn-k93{animation-name:cn-k93}.cn-k94{animation-name:cn-k94}.cn-k95{animation-name:cn-k95}.cn-k96{animation-name:cn-k96}.cn-k97{animation-name:cn-k97}.cn-k98{animation-name:cn-k98}.cn-k99{animation-name:cn-k99}.cn-k100{animation-name:cn-k100}.cn-k101{animation-name:cn-k101}.cn-k102{animation-name:cn-k102}.cn-k103{animation-name:cn-k103}.cn-k104{animation-name:cn-k104}.cn-h1::before{animation-name:cn-k65}.cn-h10::before{animation-name:cn-k109}.cn-h11::before{animation-name:cn-k75}.cn-h12::before{animation-name:cn-k76}.cn-h2::before{animation-name:cn-k66}.cn-h3::before{animation-name:cn-k67}.cn-h4::before{animation-name:cn-k68}.cn-h5::before{animation-name:cn-k69}.cn-h6::before{animation-name:cn-k105}.cn-h7::before{animation-name:cn-k106}.cn-h8::before{animation-name:cn-k107}.cn-h9::before{animation-name:cn-k108}
}

/* "Que diferença o Caititu faz?" (home page, after "O que há na base"): three blocks, each a small drawing, a title
   and a few lines. One column on phones, three from a container of 760px. The drawings draw themselves once, stroke
   after stroke (--df-t: start, --df-d: length, tenths of a second), as their block comes into view; on the clock of
   the page load where the browser has no scroll-driven animations; complete and still under reduced motion and in
   print. Prefix df-. The SVG filter is named in an attribute of the SVG, never in this file. */
.df-head{display: flex; flex-direction: column; gap: 6px}
.df-list{margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px}
.df-item{display: flex; flex-direction: column; gap: 10px; min-width: 0}
.df-icon{display: block; width: 96px; height: 72px; color: #2A2521; overflow: visible}
.df-title{margin: 6px 0 0; font-weight: 500; font-size: 22px; line-height: 1.3; text-wrap: balance}
.df-text{margin: 0; max-width: 520px; text-wrap: pretty}
.df-paper{fill: #FAF8F2}
@container (min-width: 760px){
.df-list{grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4cqw, 56px)}
}
@keyframes df-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes df-fade{from{opacity: 0}to{opacity: 1}}
.df-ink{stroke-dasharray: 1 1; animation: df-draw .4s ease-out both; animation-delay: calc(.3s + var(--df-t, 0) * .1s)}
.df-fade{animation: df-fade .3s linear both; animation-delay: calc(.3s + var(--df-t, 0) * .1s)}
.df-t0{--df-t: 0}.df-t1{--df-t: 1}.df-t2{--df-t: 2}.df-t3{--df-t: 3}.df-t4{--df-t: 4}.df-t5{--df-t: 5}.df-t6{--df-t: 6}.df-t7{--df-t: 7}.df-t8{--df-t: 8}.df-t9{--df-t: 9}.df-t10{--df-t: 10}.df-t11{--df-t: 11}.df-t12{--df-t: 12}.df-t13{--df-t: 13}.df-t14{--df-t: 14}.df-t15{--df-t: 15}.df-t16{--df-t: 16}.df-t17{--df-t: 17}.df-t18{--df-t: 18}.df-t19{--df-t: 19}.df-t20{--df-t: 20}.df-t21{--df-t: 21}.df-t22{--df-t: 22}.df-t23{--df-t: 23}.df-t24{--df-t: 24}.df-t25{--df-t: 25}.df-t27{--df-t: 27}.df-t28{--df-t: 28}.df-t29{--df-t: 29}.df-t30{--df-t: 30}
.df-d1{--df-d: 1}.df-d2{--df-d: 2}.df-d3{--df-d: 3}.df-d5{--df-d: 5}.df-d6{--df-d: 6}
@supports (animation-timeline: view()){
.df-item{view-timeline: --df-v block}
.df-ink,.df-fade{animation-timeline: --df-v; animation-delay: 0s; animation-duration: auto; animation-timing-function: linear; animation-range: cover calc((8 + var(--df-t, 0) * .55) * 1%) cover calc((8 + (var(--df-t, 0) + var(--df-d, 2)) * .55) * 1%)}
}
@media (prefers-reduced-motion: reduce), print{.df-list *{animation: none !important}.df-list .df-ink{stroke-dasharray: none}}
@media (forced-colors: active){.df-paper{fill: Canvas}}

/* How the base was made (about page, the section after "Como funciona"): six scenes drawn in pencil, in the
   hand of the overview diagram of the home page (ov-): the download (twice a month, only what is new), the text, the
   paragraphs (numbered as the Corte IDH numbers them, footnotes, votos, headings), the links (citations, other
   courts, the Cuadernillos), the meaning (the vectors) and the base (one database, the connector, the chat). One
   column with arrows down on phones; the art beside the words from a container of 600px; from 960px three columns,
   read like text (the owner's request of 2026-10-15): 1, 2, 3 along the top, a long arrow from under 3 back to 4 on
   the left, then 4, 5, 6 along the bottom. Prefix bd-.
   The pencil draws each scene once, in the order of the story, and then stays (bd-ink, bd-fade, bd-dot: delay and
   length from bd-tN / bd-dN, tenths of a second): on the clock of the page load, or, where the browser has
   scroll-driven animations, as each scene comes into view (the @supports block). Nothing loops. Animated:
   stroke-dashoffset and opacity. Every stroke that draws itself has pathLength=1. The real text is never hidden;
   under reduced motion the drawing is complete from the start. The filters and clip paths are named only
   in attributes of the SVG. */
.bd-band{padding: 0 clamp(20px, 3.2cqw, 40px) clamp(56px, 7cqw, 88px)}
.bd-wrap{max-width: 1120px; margin: 0 auto; padding-top: clamp(56px, 7cqw, 88px); border-top: 1px solid #C9BFA6; display: flex; flex-direction: column; gap: 40px}
.bd-steps{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 420px; color: #2A2521; font-family: Newsreader, Georgia, 'Times New Roman', serif}
.bd-step{position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0}
.bd-label{display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; line-height: 1.25; font-style: italic; font-weight: 500; letter-spacing: 0}
.bd-num{position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 17px; line-height: 1; font-style: normal; font-weight: 500; font-variant-numeric: lining-nums}
.bd-num-ring{position: absolute; left: -2px; top: -2px; width: 38px; height: 38px; display: block; overflow: visible}
.bd-art{position: relative; min-width: 0}
.bd-svg{display: block; width: 100%; max-width: 340px; height: auto; overflow: visible}
.bd-text{margin: 0; font-size: 17px; line-height: 1.45; text-wrap: pretty}
.bd-nw{white-space: nowrap}
.bd-down{position: relative; display: block; flex: none; width: 44px; height: 60px; margin: 12px 0 8px 44px}
.bd-side{display: none}
.bd-turn{display: none}
.bd-down svg,.bd-side svg{position: absolute; left: 0; top: 0; display: block; overflow: visible}
.bd-av{width: 44px; height: 60px}
.bd-ah{width: 72px; height: 40px}
/* the dot that runs once along an arrow: a dash of no length with a round cap */
.bd-dot{stroke: #3F8A5F; stroke-width: 7; stroke-dasharray: 0.001 2; opacity: 0}
/* the clock */
.bd-ink,.bd-fade,.bd-dot{animation-duration: var(--bd-d, .4s); animation-delay: var(--bd-t, 0s); animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both}
.bd-ink{stroke-dasharray: 1 2; animation-name: bd-draw}
.bd-fade{animation-name: bd-fade}
.bd-dot{animation-name: bd-ride; animation-timing-function: linear}
@keyframes bd-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes bd-fade{from{opacity: 0}to{opacity: 1}}
@keyframes bd-ride{0%{stroke-dashoffset: 0; opacity: 0}10%,90%{opacity: 1}100%{stroke-dashoffset: -1; opacity: 0}}
.bd-t0{--bd-t:0s;--bd-tn:0}.bd-t1{--bd-t:0.1s;--bd-tn:1}.bd-t3{--bd-t:0.3s;--bd-tn:3}.bd-t4{--bd-t:0.4s;--bd-tn:4}.bd-t5{--bd-t:0.5s;--bd-tn:5}.bd-t6{--bd-t:0.6s;--bd-tn:6}.bd-t7{--bd-t:0.7s;--bd-tn:7}.bd-t8{--bd-t:0.8s;--bd-tn:8}.bd-t9{--bd-t:0.9s;--bd-tn:9}.bd-t10{--bd-t:1s;--bd-tn:10}.bd-t11{--bd-t:1.1s;--bd-tn:11}.bd-t12{--bd-t:1.2s;--bd-tn:12}.bd-t13{--bd-t:1.3s;--bd-tn:13}.bd-t14{--bd-t:1.4s;--bd-tn:14}.bd-t15{--bd-t:1.5s;--bd-tn:15}.bd-t16{--bd-t:1.6s;--bd-tn:16}.bd-t17{--bd-t:1.7s;--bd-tn:17}.bd-t18{--bd-t:1.8s;--bd-tn:18}.bd-t20{--bd-t:2s;--bd-tn:20}.bd-t21{--bd-t:2.1s;--bd-tn:21}.bd-t22{--bd-t:2.2s;--bd-tn:22}.bd-t27{--bd-t:2.7s;--bd-tn:27}.bd-t28{--bd-t:2.8s;--bd-tn:28}.bd-t29{--bd-t:2.9s;--bd-tn:29}.bd-t32{--bd-t:3.2s;--bd-tn:32}.bd-t33{--bd-t:3.3s;--bd-tn:33}.bd-t34{--bd-t:3.4s;--bd-tn:34}.bd-t35{--bd-t:3.5s;--bd-tn:35}.bd-t36{--bd-t:3.6s;--bd-tn:36}.bd-t37{--bd-t:3.7s;--bd-tn:37}.bd-t38{--bd-t:3.8s;--bd-tn:38}.bd-t39{--bd-t:3.9s;--bd-tn:39}.bd-t40{--bd-t:4s;--bd-tn:40}.bd-t41{--bd-t:4.1s;--bd-tn:41}.bd-t42{--bd-t:4.2s;--bd-tn:42}.bd-t43{--bd-t:4.3s;--bd-tn:43}.bd-t44{--bd-t:4.4s;--bd-tn:44}.bd-t45{--bd-t:4.5s;--bd-tn:45}.bd-t46{--bd-t:4.6s;--bd-tn:46}.bd-t47{--bd-t:4.7s;--bd-tn:47}.bd-t48{--bd-t:4.8s;--bd-tn:48}.bd-t51{--bd-t:5.1s;--bd-tn:51}.bd-t56{--bd-t:5.6s;--bd-tn:56}.bd-t57{--bd-t:5.7s;--bd-tn:57}.bd-t58{--bd-t:5.8s;--bd-tn:58}.bd-t60{--bd-t:6s;--bd-tn:60}.bd-t61{--bd-t:6.1s;--bd-tn:61}.bd-t62{--bd-t:6.2s;--bd-tn:62}.bd-t63{--bd-t:6.3s;--bd-tn:63}.bd-t64{--bd-t:6.4s;--bd-tn:64}.bd-t65{--bd-t:6.5s;--bd-tn:65}.bd-t66{--bd-t:6.6s;--bd-tn:66}.bd-t67{--bd-t:6.7s;--bd-tn:67}.bd-t68{--bd-t:6.8s;--bd-tn:68}.bd-t69{--bd-t:6.9s;--bd-tn:69}.bd-t70{--bd-t:7s;--bd-tn:70}.bd-t71{--bd-t:7.1s;--bd-tn:71}.bd-t72{--bd-t:7.2s;--bd-tn:72}.bd-t73{--bd-t:7.3s;--bd-tn:73}.bd-t74{--bd-t:7.4s;--bd-tn:74}.bd-t75{--bd-t:7.5s;--bd-tn:75}.bd-t76{--bd-t:7.6s;--bd-tn:76}.bd-t79{--bd-t:7.9s;--bd-tn:79}.bd-t80{--bd-t:8s;--bd-tn:80}.bd-t84{--bd-t:8.4s;--bd-tn:84}.bd-t86{--bd-t:8.6s;--bd-tn:86}.bd-t87{--bd-t:8.7s;--bd-tn:87}.bd-t89{--bd-t:8.9s;--bd-tn:89}.bd-t90{--bd-t:9s;--bd-tn:90}.bd-t91{--bd-t:9.1s;--bd-tn:91}.bd-t92{--bd-t:9.2s;--bd-tn:92}.bd-t93{--bd-t:9.3s;--bd-tn:93}.bd-t94{--bd-t:9.4s;--bd-tn:94}.bd-t95{--bd-t:9.5s;--bd-tn:95}.bd-t96{--bd-t:9.6s;--bd-tn:96}.bd-t97{--bd-t:9.7s;--bd-tn:97}.bd-t98{--bd-t:9.8s;--bd-tn:98}.bd-t99{--bd-t:9.9s;--bd-tn:99}.bd-t100{--bd-t:10s;--bd-tn:100}.bd-t101{--bd-t:10.1s;--bd-tn:101}.bd-t102{--bd-t:10.2s;--bd-tn:102}.bd-t104{--bd-t:10.4s;--bd-tn:104}.bd-t105{--bd-t:10.5s;--bd-tn:105}.bd-t106{--bd-t:10.6s;--bd-tn:106}.bd-t107{--bd-t:10.7s;--bd-tn:107}.bd-t108{--bd-t:10.8s;--bd-tn:108}.bd-t109{--bd-t:10.9s;--bd-tn:109}.bd-t113{--bd-t:11.3s;--bd-tn:113}.bd-t114{--bd-t:11.4s;--bd-tn:114}.bd-t115{--bd-t:11.5s;--bd-tn:115}.bd-t116{--bd-t:11.6s;--bd-tn:116}.bd-t117{--bd-t:11.7s;--bd-tn:117}.bd-t118{--bd-t:11.8s;--bd-tn:118}.bd-t119{--bd-t:11.9s;--bd-tn:119}.bd-t120{--bd-t:12s;--bd-tn:120}.bd-t121{--bd-t:12.1s;--bd-tn:121}.bd-t122{--bd-t:12.2s;--bd-tn:122}.bd-t123{--bd-t:12.3s;--bd-tn:123}.bd-t124{--bd-t:12.4s;--bd-tn:124}.bd-t125{--bd-t:12.5s;--bd-tn:125}.bd-t126{--bd-t:12.6s;--bd-tn:126}.bd-t127{--bd-t:12.7s;--bd-tn:127}.bd-t128{--bd-t:12.8s;--bd-tn:128}.bd-t129{--bd-t:12.9s;--bd-tn:129}.bd-t130{--bd-t:13s;--bd-tn:130}.bd-t132{--bd-t:13.2s;--bd-tn:132}.bd-t133{--bd-t:13.3s;--bd-tn:133}.bd-t135{--bd-t:13.5s;--bd-tn:135}.bd-t136{--bd-t:13.6s;--bd-tn:136}.bd-t137{--bd-t:13.7s;--bd-tn:137}.bd-t138{--bd-t:13.8s;--bd-tn:138}.bd-t139{--bd-t:13.9s;--bd-tn:139}.bd-t142{--bd-t:14.2s;--bd-tn:142}.bd-t144{--bd-t:14.4s;--bd-tn:144}.bd-t145{--bd-t:14.5s;--bd-tn:145}.bd-t148{--bd-t:14.8s;--bd-tn:148}.bd-t150{--bd-t:15s;--bd-tn:150}.bd-t151{--bd-t:15.1s;--bd-tn:151}.bd-t152{--bd-t:15.2s;--bd-tn:152}.bd-t154{--bd-t:15.4s;--bd-tn:154}.bd-t155{--bd-t:15.5s;--bd-tn:155}.bd-t157{--bd-t:15.7s;--bd-tn:157}.bd-t158{--bd-t:15.8s;--bd-tn:158}.bd-t159{--bd-t:15.9s;--bd-tn:159}.bd-t160{--bd-t:16s;--bd-tn:160}.bd-t161{--bd-t:16.1s;--bd-tn:161}.bd-t162{--bd-t:16.2s;--bd-tn:162}.bd-t163{--bd-t:16.3s;--bd-tn:163}.bd-t164{--bd-t:16.4s;--bd-tn:164}
.bd-d1{--bd-d:0.1s;--bd-dn:1}.bd-d2{--bd-d:0.2s;--bd-dn:2}.bd-d3{--bd-d:0.3s;--bd-dn:3}.bd-d4{--bd-d:0.4s;--bd-dn:4}.bd-d5{--bd-d:0.5s;--bd-dn:5}
/* middle widths: the art on the left, the words beside it, arrows down under the art */
@container (min-width: 600px) and (max-width: 959.98px){
.bd-steps{max-width: 760px}
.bd-step{display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "art label" "art text" "out ."; grid-template-rows: auto 1fr auto; column-gap: 36px; row-gap: 10px; align-items: start}
.bd-label{grid-area: label}
.bd-art{grid-area: art}
.bd-text{grid-area: text}
.bd-down{grid-area: out; justify-self: center; margin: 14px 0}
}
/* wide: three columns, read like text: 1 to 3 along the top, 4 to 6 along the bottom, both left to right. The rows
   stretch, so the scenes of a row share one height; the arrows across sit at the middle of the art, which fills its
   column (those of 4 and 5 are the leftward drawings turned round); the arrow from 3 to 4 (bd-turn) runs in the gap
   between the rows, from under the middle of scene 3 to the number of scene 4 (its box runs from the middle of the
   third column to 12px inside the first), and its drawing is stretched to fit, its strokes and the dot with it (at
   most about 1.2 times across, on the widest screens): vector-effect="non-scaling-stroke" would keep their width, but
   the dash of pathLength 1 that draws the line would then cover only part of it. */
@container (min-width: 960px){
.bd-steps{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 72px; row-gap: 76px; max-width: none; align-items: stretch}
.bd-s1{grid-area: 1 / 1}
.bd-s2{grid-area: 1 / 2}
.bd-s3{grid-area: 1 / 3}
.bd-s4{grid-area: 2 / 1}
.bd-s5{grid-area: 2 / 2}
.bd-s6{grid-area: 2 / 3}
.bd-svg{max-width: none}
.bd-down{display: none}
.bd-turn{display: block; position: absolute; top: 100%; right: 50%; width: calc(250% + 132px); height: 76px}
.bd-turn svg{position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; overflow: visible}
.bd-side{display: block; position: absolute; top: 50%; width: 72px; height: 40px; margin-top: -20px}
.bd-s1 .bd-side,.bd-s2 .bd-side{left: 100%}
.bd-s4 .bd-side,.bd-s5 .bd-side{left: 100%}
.bd-s4 .bd-side svg,.bd-s5 .bd-side svg{transform: scaleX(-1)}
}
/* where the browser has scroll-driven animations (named view timelines), the pencil draws each scene as it comes into
   view, instead of on the clock of the page load, which has finished long before anyone scrolls down to this
   section. The time of each stroke (--bd-tn, --bd-dn, tenths) becomes a stretch of the timeline of its scene, the
   <li> (--bd-s0, --bd-len: the scene's first and last moment, its arrows included): from --bd-r0 to --bd-r0 +
   --bd-rw of its cover range. On phones and middle widths each scene draws from 10% to 30% (its drawing comes fully
   into view meanwhile); the arrows down, which sit at the foot of a scene, have their own timeline and draw from 14% to 40% of
   theirs. On wide screens the three scenes of a row share one height, so one timeline: they draw one after the
   other, in the order of the story (16-27%, 27-38%, 38-49%: the row is drawn by the time its
   top is about a quarter of the way down the window). Scrolling back up undraws what goes back below the
   window, and it draws again. Elsewhere (and if a timeline cannot be found, which leaves the drawing complete) the
   clock of the page load stays. */
@supports (animation-timeline: --bd-v) and (view-timeline-name: --bd-v) and (animation-range-start: cover 10%){
.bd-step{view-timeline: --bd-v block; --bd-r0: 10%; --bd-rw: 20%}
.bd-s1{--bd-s0: 0; --bd-len: 30}.bd-s2{--bd-s0: 28; --bd-len: 30}.bd-s3{--bd-s0: 57; --bd-len: 31}.bd-s4{--bd-s0: 86; --bd-len: 30}.bd-s5{--bd-s0: 115; --bd-len: 31}.bd-s6{--bd-s0: 144; --bd-len: 22}
.bd-steps .bd-ink,.bd-steps .bd-fade,.bd-steps .bd-dot{animation-timeline: --bd-v; animation-delay: 0s; animation-duration: auto; animation-range-start: cover calc(var(--bd-r0) + (var(--bd-tn) - var(--bd-s0)) / var(--bd-len) * var(--bd-rw)); animation-range-end: cover calc(var(--bd-r0) + (var(--bd-tn) + var(--bd-dn) - var(--bd-s0)) / var(--bd-len) * var(--bd-rw))}
.bd-down{view-timeline: --bd-a block; --bd-r0: 14%; --bd-rw: 26%}
.bd-a1{--bd-s0: 22; --bd-len: 7}.bd-a2{--bd-s0: 51; --bd-len: 7}.bd-a3{--bd-s0: 80; --bd-len: 7}.bd-a4{--bd-s0: 109; --bd-len: 7}.bd-a5{--bd-s0: 138; --bd-len: 7}
.bd-steps .bd-down .bd-ink,.bd-steps .bd-down .bd-dot{animation-timeline: --bd-a}
@container (min-width: 960px){
.bd-step{--bd-rw: 11%}
.bd-s1,.bd-s4{--bd-r0: 16%}
.bd-s2,.bd-s5{--bd-r0: 27%}
.bd-s3,.bd-s6{--bd-r0: 38%}
}
}
/* reduced motion (and print): no animation at all, neither clock nor scrolling; the complete drawing, the dot hidden */
@media (prefers-reduced-motion: reduce), print{
.bd-steps *,.bd-steps *::before,.bd-steps *::after{animation: none !important}
.bd-steps .bd-ink{stroke-dasharray: none}
}
@media (forced-colors: active){.bd-paper{fill: Canvas}}
/* Tools: the section "Ferramentas" / "Herramientas" / "Tools" of the page "Como usar" (one entry per group of the
   connector's 17 tools: name, the tools' own names, what it does, one real example (what you write, what Caititu
   does, what comes back) and a hand-drawn drawing of that flow beside it; under the first example of the statistics,
   its further examples, the charts (tl-more, across both columns; the charts are st-)), and the overview of the home page (each group's name, one line and a small drawing, then the button to
   the section). Prefix tl-. The drawings are those of "Como o Caititu funciona" (ov-): strokes with small
   irregularities, pencil hatching, a light roughness filter (named in the SVG's attributes, never here); green only
   in strokes. The pencil draws each drawing once (tl-ink, tl-fade; times in tenths of a second, classes tl-tN and
   tl-dN), from the page load or, where the browser ties animations to the scroll, as the drawing comes into view;
   the green path loops every 9 s (tl-lp, tl-kN: delay 0, keyframes of its own, all fading out together), paused while
   its drawing is out of view (tl-still, set by js/drawings.js). Animated:
   stroke-dashoffset, opacity, transform. Reduced motion and print: no animation, the drawings complete. */
.tl-wrap{max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 4cqw, 48px)}
.tl-intro{display: flex; flex-direction: column; gap: 12px}
.tl-list{list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column}
.tl-item{display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "ex"; gap: 24px; padding: clamp(36px, 4.5cqw, 56px) 0; border-top: 1px solid #C9BFA6; scroll-margin-top: 12px}
.tl-head{grid-area: head; min-width: 0; max-width: 720px; display: flex; flex-direction: column; gap: 10px}
.tl-name{margin: 0; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: clamp(25px, 2.5cqw, 30px); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance}
.tl-num{position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 17px; line-height: 1; font-weight: 500; font-variant-numeric: lining-nums}
.tl-num-2{font-size: 14.5px; letter-spacing: -0.02em}
.tl-num-ring{position: absolute; left: -2px; top: -2px; width: 38px; height: 38px; display: block; overflow: visible; color: #2A2521}
.tl-codes{margin: 0; display: flex; flex-wrap: wrap; gap: 6px 8px}
.tl-code{min-width: 0; padding: 1px 8px; border: 1px solid #C9BFA6; border-radius: 6px; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; line-height: 20px; color: #5F574F; overflow-wrap: anywhere}
.tl-desc{margin: 0; text-wrap: pretty}
.tl-ex{grid-area: ex; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 18px}
.tl-row{display: flex; flex-direction: column; gap: 8px; min-width: 0}
.tl-dt{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #5F574F}
.tl-dd{margin: 0; min-width: 0}
.tl-bubble{position: relative; box-sizing: border-box; width: fit-content; max-width: min(100% - 6px, 600px); margin: 0 6px 0 auto; padding: 12px 16px; background: #2A2521; color: #EDE5D0; border-radius: 18px 18px 4px 18px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px; text-wrap: pretty}
.tl-tail{position: absolute; right: -6px; bottom: 0; width: 12px; height: 14px; display: block; transform: scaleX(-1)}
/* what you write sits on the right, as in a chat: its label too */
.tl-row:has(> .tl-dd > .tl-bubble) > .tl-dt{text-align: right}
.tl-does{font-size: 18px; line-height: 1.45; text-wrap: pretty}
.tl-out{box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 2cqw, 22px); background: #EDE5D0; border-radius: 12px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 22px}
.tl-p{margin: 0; text-wrap: pretty}
.tl-rows{list-style: none; margin: 0; padding: 4px 14px; display: flex; flex-direction: column; background: #FAF8F2; border-radius: 8px}
.tl-r{display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid #E6DFCC}
.tl-r:first-child{border-top: 0}
.tl-year{flex: none; width: 38px; font-size: 13px; color: #5F574F; font-variant-numeric: tabular-nums}
.tl-what{flex: 1 1 0; min-width: 0}
.tl-note{display: block; font-size: 13px; line-height: 18px; color: #5F574F}
.tl-tag{flex: none; font-size: 13px; color: #5F574F; white-space: nowrap}
.tl-start .tl-note{display: flex; align-items: center; gap: 6px; font-weight: 500; color: #2A2521}
.tl-start .tl-note::before{content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: #3F8A5F}
.tl-count{display: flex; align-items: center; gap: 14px}
.tl-big{flex: none; font-family: Newsreader, Georgia, 'Times New Roman', serif; font-size: 44px; line-height: 1; font-weight: 500; font-variant-numeric: lining-nums; color: #3F8A5F}
.tl-quote{margin: 0; font-family: Newsreader, Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.5; text-wrap: pretty}
.tl-src{display: block; margin-top: 4px; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #5F574F}
.tl-small{margin: 0; padding-top: 10px; border-top: 1px solid #C9BFA6; font-size: 13px; line-height: 18px; color: #5F574F}
.tl-bars{display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 18px}
.tl-bar-row{display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px}
.tl-bar-label{flex: 1 1 190px; min-width: 0}
.tl-bar-value{flex: 3 1 160px; min-width: 0; display: flex; align-items: center; gap: 10px}
.tl-bar{display: block; flex: 1 1 0; min-width: 0; height: 14px}
.tl-bar-fill{fill: #3F8A5F; transform-box: fill-box; transform-origin: left center; animation: tl-grow .9s ease-out both}
.tl-bar-count{flex: none; width: 20px; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums}
.tl-art{grid-area: art; min-width: 0; width: 100%; max-width: 420px; justify-self: center; color: #2A2521}
.tl-svg{display: block; width: 100%; height: auto; overflow: visible}
/* the statistics: the further examples of the tool (charts) under its first one; on a wide page, across both columns,
   the request and what Caititu does side by side above what comes back. The name, the first example and the drawing
   are in a grid of their own (tl-st-main), laid out as every other entry: the drawing stays in view while that example
   is read, and stops with it (a sticky element goes as far as its containing block: were it the whole entry, the
   drawing would cover the charts below) */
.tl-item-st{grid-template-areas: "main" "more"}
.tl-st-main{grid-area: main; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art" "ex"; gap: 24px}
.tl-more{grid-area: more; min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 2.6cqw, 30px); padding-top: clamp(22px, 2.6cqw, 30px); border-top: 1px solid #E6DFCC}
.tl-ex-st{padding-top: clamp(22px, 2.6cqw, 30px); border-top: 1px solid #E6DFCC; scroll-margin-top: 12px}
/* wide: the drawing in a column of its own on the right, beside the name and the example; it stays in view while the
   example is read */
@container (min-width: 860px){
.tl-item{grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "head art" "ex art"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 5cqw, 72px); row-gap: 24px; align-items: start}
.tl-art{position: sticky; top: 24px; align-self: start}
.tl-item-st{grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "more"; grid-template-rows: auto auto}
.tl-st-main{grid-template-columns: minmax(0, 1fr) minmax(0, 400px); grid-template-areas: "head art" "ex art"; grid-template-rows: auto 1fr; column-gap: clamp(40px, 5cqw, 72px); row-gap: 24px; align-items: start}
.tl-ex-st{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 40px; align-items: start}
.tl-row-out{grid-column: 1 / -1}
}
/* the text inside the drawings (numbers, years, names as the base writes them): never green */
.tl-tx{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 11px; fill: #5F574F; stroke: none}
.tl-txb{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 11.5px; font-weight: 500; fill: #2A2521; stroke: none}
.tl-txi{font-family: Newsreader, Georgia, 'Times New Roman', serif; font-size: 12.5px; font-style: italic; fill: #2A2521; stroke: none}
.tl-txn{font-family: Newsreader, Georgia, 'Times New Roman', serif; font-size: 26px; font-weight: 500; font-variant-numeric: lining-nums; fill: #2A2521; stroke: none}
.tl-txn-s{font-size: 19px}
.tl-txi-s{font-size: 10.5px}
.tl-sup{font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 7.5px; fill: #5F574F; stroke: none}
.tl-big-st{font-size: 14px}
.tl-paper{fill: #FAF8F2}
/* the home page: one card per group, a small drawing beside its name */
.tl-grid{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 28px 36px}
.tl-card{display: flex; align-items: flex-start; gap: 14px; min-width: 0}
.tl-icon-box{flex: none; display: block; width: 52px; height: 52px; padding-top: 2px}
.tl-icon{display: block; width: 52px; height: 52px; overflow: visible; color: #2A2521}
.tl-card-text{min-width: 0; display: flex; flex-direction: column; gap: 4px}
.tl-card-link{color: inherit}
.tl-card-name{margin: 0; font-weight: 500; font-size: 20px; line-height: 1.3}
.tl-card-line{margin: 0; font-family: Figtree, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 21px; color: #5F574F; text-wrap: pretty}
/* the clock */
.tl-ink,.tl-fade{animation-duration: var(--tl-d, .4s); animation-delay: var(--tl-t, 0s); animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: both}
.tl-ink{stroke-dasharray: 1 2; animation-name: tl-draw}
.tl-fade{animation-name: tl-fade}
.tl-lp{animation-duration: 9s; animation-delay: 0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both}
.tl-still .tl-lp{animation-play-state: paused}
.tl-ld{stroke-dasharray: 1 2}
.tl-dot{stroke: #3F8A5F; stroke-width: 7; stroke-dasharray: 0.001 2; opacity: 0}
@keyframes tl-draw{from{stroke-dashoffset: 1.01}to{stroke-dashoffset: 0}}
@keyframes tl-fade{from{opacity: 0}to{opacity: 1}}
@keyframes tl-grow{from{transform: scaleX(0)}to{transform: scaleX(1)}}
.tl-t0{--tl-t:0s;--tl-tn:0}.tl-t1{--tl-t:0.1s;--tl-tn:1}.tl-t2{--tl-t:0.2s;--tl-tn:2}.tl-t3{--tl-t:0.3s;--tl-tn:3}.tl-t4{--tl-t:0.4s;--tl-tn:4}.tl-t5{--tl-t:0.5s;--tl-tn:5}.tl-t6{--tl-t:0.6s;--tl-tn:6}.tl-t7{--tl-t:0.7s;--tl-tn:7}.tl-t8{--tl-t:0.8s;--tl-tn:8}.tl-t9{--tl-t:0.9s;--tl-tn:9}.tl-t12{--tl-t:1.2s;--tl-tn:12}.tl-t13{--tl-t:1.3s;--tl-tn:13}.tl-t14{--tl-t:1.4s;--tl-tn:14}.tl-t15{--tl-t:1.5s;--tl-tn:15}.tl-t16{--tl-t:1.6s;--tl-tn:16}.tl-t17{--tl-t:1.7s;--tl-tn:17}.tl-t18{--tl-t:1.8s;--tl-tn:18}.tl-t19{--tl-t:1.9s;--tl-tn:19}.tl-t20{--tl-t:2s;--tl-tn:20}.tl-t21{--tl-t:2.1s;--tl-tn:21}.tl-t22{--tl-t:2.2s;--tl-tn:22}.tl-t23{--tl-t:2.3s;--tl-tn:23}.tl-t24{--tl-t:2.4s;--tl-tn:24}.tl-t25{--tl-t:2.5s;--tl-tn:25}.tl-t26{--tl-t:2.6s;--tl-tn:26}.tl-t27{--tl-t:2.7s;--tl-tn:27}.tl-t28{--tl-t:2.8s;--tl-tn:28}.tl-t29{--tl-t:2.9s;--tl-tn:29}.tl-t30{--tl-t:3s;--tl-tn:30}.tl-t31{--tl-t:3.1s;--tl-tn:31}.tl-t32{--tl-t:3.2s;--tl-tn:32}
.tl-d1{--tl-d:0.1s;--tl-dn:1}.tl-d2{--tl-d:0.2s;--tl-dn:2}.tl-d3{--tl-d:0.3s;--tl-dn:3}.tl-d4{--tl-d:0.4s;--tl-dn:4}.tl-d5{--tl-d:0.5s;--tl-dn:5}
@keyframes tl-k1{0%,27.8%{stroke-dashoffset:1.01;opacity:1}31.7%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k1{animation-name:tl-k1}
@keyframes tl-k2{0%,30.6%{stroke-dashoffset:1.01;opacity:1}34.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k2{animation-name:tl-k2}
@keyframes tl-k3{0%,33.3%{stroke-dashoffset:1.01;opacity:1}37.2%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k3{animation-name:tl-k3}
@keyframes tl-k4{0%,11.1%{transform:translateX(0)}13.1%{transform:translateX(3px)}15%{transform:translateX(0)}16.9%{transform:translateX(3px)}18.9%,100%{transform:translateX(0)}}
.tl-k4{animation-name:tl-k4}
@keyframes tl-k5{0%,11.7%{opacity:0}14.4%,90%{opacity:1}95.6%,100%{opacity:0}}
.tl-k5{animation-name:tl-k5}
@keyframes tl-k6{0%,3.3%{stroke-dashoffset:1.01;opacity:1}11.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k6{animation-name:tl-k6}
@keyframes tl-k7{0%,3.3%{stroke-dashoffset:0;opacity:0}4.2%,10.2%{opacity:1}11.1%,100%{stroke-dashoffset:-1;opacity:0}}
.tl-k7{animation-name:tl-k7}
@keyframes tl-k8{0%,10.6%{stroke-dashoffset:1.01;opacity:1}12.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k8{animation-name:tl-k8}
@keyframes tl-k9{0%,11%{stroke-dashoffset:1.01;opacity:1}12.9%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k9{animation-name:tl-k9}
@keyframes tl-k10{0%,18.9%{stroke-dashoffset:1.01;opacity:1}27.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k10{animation-name:tl-k10}
@keyframes tl-k11{0%,18.9%{stroke-dashoffset:0;opacity:0}19.8%,26.9%{opacity:1}27.8%,100%{stroke-dashoffset:-1;opacity:0}}
.tl-k11{animation-name:tl-k11}
@keyframes tl-k12{0%,27.2%{stroke-dashoffset:1.01;opacity:1}29.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k12{animation-name:tl-k12}
@keyframes tl-k13{0%,27.7%{stroke-dashoffset:1.01;opacity:1}29.6%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k13{animation-name:tl-k13}
@keyframes tl-k14{0%,27.8%{stroke-dashoffset:1.01;opacity:1}35.6%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k14{animation-name:tl-k14}
@keyframes tl-k15{0%,27.8%{opacity:0}28.9%,90%{opacity:1}95.6%,100%{opacity:0}}
.tl-k15{animation-name:tl-k15}
@keyframes tl-k16{0%,30%{opacity:0}31.1%,90%{opacity:1}95.6%,100%{opacity:0}}
.tl-k16{animation-name:tl-k16}
@keyframes tl-k17{0%,32.2%{opacity:0}33.3%,90%{opacity:1}95.6%,100%{opacity:0}}
.tl-k17{animation-name:tl-k17}
@keyframes tl-k18{0%,27.8%{stroke-dashoffset:1.01;opacity:1}32.2%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k18{animation-name:tl-k18}
@keyframes tl-k19{0%,32.2%{stroke-dashoffset:1.01;opacity:1}35.6%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k19{animation-name:tl-k19}
@keyframes tl-k20{0%,27.8%{stroke-dashoffset:1.01;opacity:1}30%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k20{animation-name:tl-k20}
@keyframes tl-k21{0%,30.2%{stroke-dashoffset:1.01;opacity:1}32.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k21{animation-name:tl-k21}
@keyframes tl-k22{0%,32.7%{stroke-dashoffset:1.01;opacity:1}34.9%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k22{animation-name:tl-k22}
@keyframes tl-k23{0%,35.1%{stroke-dashoffset:1.01;opacity:1}37.3%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k23{animation-name:tl-k23}
@keyframes tl-k24{0%,27.8%{stroke-dashoffset:1.01;opacity:1}32.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k24{animation-name:tl-k24}
@keyframes tl-k25{0%,32.8%{stroke-dashoffset:1.01;opacity:1}36.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k25{animation-name:tl-k25}
@keyframes tl-k26{0%,35.6%{stroke-dashoffset:1.01;opacity:1}37.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k26{animation-name:tl-k26}
@keyframes tl-k27{0%,26.7%{stroke-dashoffset:1.01;opacity:1}29.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k27{animation-name:tl-k27}
@keyframes tl-k28{0%,27.8%{stroke-dashoffset:1.01;opacity:1}29.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k28{animation-name:tl-k28}
@keyframes tl-k29{0%,28.7%{stroke-dashoffset:1.01;opacity:1}30.3%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k29{animation-name:tl-k29}
@keyframes tl-k30{0%,29.6%{stroke-dashoffset:1.01;opacity:1}31.2%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k30{animation-name:tl-k30}
@keyframes tl-k31{0%,30.4%{stroke-dashoffset:1.01;opacity:1}32.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k31{animation-name:tl-k31}
@keyframes tl-k32{0%,31.3%{stroke-dashoffset:1.01;opacity:1}33%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k32{animation-name:tl-k32}
@keyframes tl-k33{0%,32.2%{stroke-dashoffset:1.01;opacity:1}33.9%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k33{animation-name:tl-k33}
@keyframes tl-k34{0%,33.1%{stroke-dashoffset:1.01;opacity:1}34.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k34{animation-name:tl-k34}
@keyframes tl-k35{0%,32.2%{stroke-dashoffset:1.01;opacity:1}37.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k35{animation-name:tl-k35}
@keyframes tl-k36{0%,27.8%{stroke-dashoffset:1.01;opacity:1}30.6%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k36{animation-name:tl-k36}
@keyframes tl-k37{0%,30.6%{stroke-dashoffset:1.01;opacity:1}33.3%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k37{animation-name:tl-k37}
@keyframes tl-k38{0%,33.3%{stroke-dashoffset:1.01;opacity:1}36.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k38{animation-name:tl-k38}
@keyframes tl-k39{0%,17.8%{opacity:0}21.1%,90%{opacity:1}95.6%,100%{opacity:0}}
.tl-k39{animation-name:tl-k39}
@keyframes tl-k40{0%,32.2%{stroke-dashoffset:1.01;opacity:1}36.1%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k40{animation-name:tl-k40}
@keyframes tl-k41{0%,31.1%{stroke-dashoffset:1.01;opacity:1}34.4%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k41{animation-name:tl-k41}
@keyframes tl-k42{0%,34.4%{stroke-dashoffset:1.01;opacity:1}35.8%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k42{animation-name:tl-k42}
@keyframes tl-k43{0%,35.3%{stroke-dashoffset:1.01;opacity:1}36.7%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k43{animation-name:tl-k43}
@keyframes tl-k44{0%,36.2%{stroke-dashoffset:1.01;opacity:1}37.6%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k44{animation-name:tl-k44}
@keyframes tl-k45{0%,29.1%{stroke-dashoffset:1.01;opacity:1}33%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k45{animation-name:tl-k45}
@keyframes tl-k46{0%,30.4%{stroke-dashoffset:1.01;opacity:1}34.3%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k46{animation-name:tl-k46}
@keyframes tl-k47{0%,31.8%{stroke-dashoffset:1.01;opacity:1}35.7%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k47{animation-name:tl-k47}
@keyframes tl-k48{0%,33.1%{stroke-dashoffset:1.01;opacity:1}37%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k48{animation-name:tl-k48}
@keyframes tl-k49{0%,34.4%{stroke-dashoffset:1.01;opacity:1}38.3%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k49{animation-name:tl-k49}
@keyframes tl-k50{0%,35.8%{stroke-dashoffset:1.01;opacity:1}39.7%,90%{stroke-dashoffset:0;opacity:1}95.6%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1.01;opacity:0}}
.tl-k50{animation-name:tl-k50}
/* Where the browser ties animations to the scroll, the pencil draws each drawing as it comes into view instead of on
   the clock of the page load (over before anyone scrolls down to it): a tenth of a second becomes .85% of the
   drawing's way across the window, from 4% on (all of a drawing is done by about 35%, when it is a little above the
   middle of the window). The home page's small drawings do the same, each card on its own timeline. Scrolling back up
   undraws what goes back below the window. The bars of the statistics example grow as they come into view (elsewhere
   once, at the page load). The green path keeps its own clock. */
@supports (animation-timeline: view()) and (animation-range-start: cover 10%){
.tl-art,.tl-card{view-timeline: --tl-v block}
.tl-art .tl-ink,.tl-art .tl-fade,.tl-card .tl-ink,.tl-card .tl-fade{animation-timeline: --tl-v; animation-delay: 0s; animation-duration: auto; animation-timing-function: linear; animation-range-start: cover calc(4% + var(--tl-tn, 0) * .85%); animation-range-end: cover calc(4% + (var(--tl-tn, 0) + var(--tl-dn, 4)) * .85%)}
.tl-bars{view-timeline: --tl-b block}
.tl-bars .tl-bar-fill{animation-timeline: --tl-b; animation-delay: 0s; animation-duration: auto; animation-range: cover 8% cover 40%}
}
/* reduced motion and print: no animation at all, the complete drawings, the green marks shown, the dots hidden */
@media (prefers-reduced-motion: reduce), print{
.tl-root *,.tl-home *{animation: none !important}
.tl-root .tl-ink,.tl-root .tl-ld,.tl-home .tl-ink{stroke-dasharray: none}
}
@media (forced-colors: active){.tl-paper{fill: Canvas}}

/* "Como usar": the recommendations; the first one (do not ask the chat to write for you) takes the whole row, with its
   two lists, in the same weight as the others (the owner found the dark box too loud, 2026-10-15) */
.reco-main{display: flex; flex-direction: column; gap: 14px}
.reco-main .eyebrow{margin: 0}
.reco-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 32px 64px}

/* About page, the owner's review of 2026-10-15 (section "Com e sem o Caititu", prefix ww-).
   The bold the two answers had in the chat (the lead words of their items and paragraphs, and in each quotation of
   the Court the words that answer the question, as the connector asks), at the weight of the answers' headings. */
.ww-ans-body strong{font-weight:600}
/* The "processing" mark after the two lines the chat wrote while a tool of the connector ran (owner's comments 865
   and 866): three green dots that light up in turn, three times (under 4 s), then stay. Where the browser ties
   animations to the scroll, they light up while the answer comes into view. With reduced motion, in print and in
   forced colours the three dots are there from the start. Only opacity moves. */
.ww-wait{display:inline-flex;align-items:center;gap:4px;margin-left:8px;vertical-align:middle}
.ww-wait-dot{display:block;flex:none;width:6px;height:6px;border-radius:50%;background:#3F8A5F}
@keyframes ww-wait{0%{opacity:0.15}40%,100%{opacity:1}}
@media screen and (prefers-reduced-motion: no-preference){
.ww-wait-dot{animation:ww-wait 1.2s ease-in-out 3 both}
.ww-wait-dot:nth-child(2){animation-delay:0.2s}
.ww-wait-dot:nth-child(3){animation-delay:0.4s}
@supports (animation-timeline: view()){
.ww-card-with{view-timeline:--ww-wait block}
.ww-wait-dot{animation-timeline:--ww-wait;animation-duration:auto;animation-delay:0s;animation-timing-function:linear;animation-range:entry 10% entry 70%}
.ww-wait-dot:nth-child(2){animation-range:entry 20% entry 80%}
.ww-wait-dot:nth-child(3){animation-range:entry 30% entry 90%}
}
}
@media (forced-colors: active){.ww-wait-dot{forced-color-adjust:none;background:CanvasText}}