/* docs.hystore.com.br: the Hystore wiki. Brand colours of hystore.com.br (navy, sky blue, gold),
   Outfit for titles and Inter for text, served from this domain. Dark by default, light when the
   system or the theme switch asks for it. Header and footer follow hystore.com.br. */

@font-face { font-family: "Inter"; src: url(/static/fonts/inter.3100e775e8.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url(/static/fonts/outfit.6c18d579fd.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/static/fonts/jetbrains-mono.83c005d49d.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --bg: hsl(222 47% 4%);
  --bg-2: hsl(222 47% 6%);
  --surface: hsl(222 47% 8%);
  --surface-2: hsl(221 42% 11%);
  --line: hsl(217 33% 17%);
  --line-2: hsl(217 33% 24%);
  --ink: hsl(210 40% 96%);
  --ink-2: hsl(214 32% 82%);
  --muted: hsl(215 20% 65%);
  --brand: hsl(199 89% 48%);
  --brand-2: hsl(199 95% 64%);
  --brand-deep: hsl(217 91% 35%);
  --brand-soft: hsl(199 89% 48% / 0.12);
  --gold: #f5b544;
  --gold-soft: hsl(38 89% 61% / 0.14);
  --green: hsl(152 60% 50%);
  --red: hsl(0 80% 66%);
  --code-bg: hsl(222 50% 6%);
  --code-head: hsl(222 40% 10%);
  --code-inline: hsl(199 95% 64%);
  --pill-bg: hsl(222 45% 9% / 0.92);
  --pill-ring: hsl(217 33% 20%);
  --pill-shadow: 0 14px 36px -16px hsl(222 80% 2% / 0.9);
  --radius: 16px;
  --shadow: 0 20px 50px -24px hsl(222 80% 2% / 0.9);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --bg-2: #f6f9fd; --surface: #ffffff; --surface-2: #f2f6fc; --line: #e3eaf3; --line-2: #cfd9e8;
    --ink: #0b1526; --ink-2: #26364f; --muted: #5d6b82; --brand: hsl(199 89% 40%); --brand-2: hsl(206 90% 40%);
    --brand-soft: hsl(199 89% 48% / 0.1); --gold: #b7791f; --gold-soft: hsl(38 89% 55% / 0.14); --green: hsl(152 60% 32%); --red: hsl(0 70% 48%);
    --code-bg: hsl(222 47% 7%); --code-head: hsl(222 40% 11%); --code-inline: hsl(217 91% 35%);
    --pill-bg: #ffffff; --pill-ring: #e3eaf3; --pill-shadow: 0 14px 36px -16px rgb(3 20 60 / 0.4);
    --shadow: 0 18px 40px -26px hsl(222 50% 20% / 0.35); color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-2: #f6f9fd; --surface: #ffffff; --surface-2: #f2f6fc; --line: #e3eaf3; --line-2: #cfd9e8;
  --ink: #0b1526; --ink-2: #26364f; --muted: #5d6b82; --brand: hsl(199 89% 40%); --brand-2: hsl(206 90% 40%);
  --brand-soft: hsl(199 89% 48% / 0.1); --gold: #b7791f; --gold-soft: hsl(38 89% 55% / 0.14); --green: hsl(152 60% 32%); --red: hsl(0 70% 48%);
  --code-bg: hsl(222 47% 7%); --code-head: hsl(222 40% 11%); --code-inline: hsl(217 91% 35%);
  --pill-bg: #ffffff; --pill-ring: #e3eaf3; --pill-shadow: 0 14px 36px -16px rgb(3 20 60 / 0.4);
  --shadow: 0 18px 40px -26px hsl(222 50% 20% / 0.35); color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 16px/1.7 var(--font-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.doc { padding-top: 84px; }
a { color: var(--brand-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand); }
img { max-width: 100%; height: auto; }
::selection { background: hsl(199 89% 48% / 0.3); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; padding: 8px 14px; background: var(--brand); color: #fff; border-radius: 10px; }
.skip:focus { left: 12px; }
.muted { color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font: 600 15px/1 var(--font-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease; }
.btn-sm { padding: 9px 14px; font-size: 14px; border-radius: 10px; }
.btn-primary { background: #1586ec; color: #fff; box-shadow: 0 10px 30px -10px rgb(21 134 236 / 0.7); }
.btn-primary:hover { color: #fff; background: #2b95f0; transform: translateY(-1px); }
.btn-ghost { background: hsl(0 0% 100% / 0.03); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { color: var(--ink); border-color: var(--brand); background: var(--brand-soft); }
.btn-white { background: #fff; color: #0a58ab; }
.btn-white:hover { color: #0a58ab; transform: translateY(-1px); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.45); }
.btn-glass { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.35); }
.btn-glass:hover { color: #fff; background: rgb(255 255 255 / 0.2); }

/* Header: a floating pill, like hystore.com.br */
.top { position: fixed; inset: 0 0 auto; z-index: 50; padding: 12px 16px 0; pointer-events: none; }
.pill { pointer-events: auto; max-width: 1180px; height: 60px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--pill-ring), var(--pill-shadow); backdrop-filter: saturate(160%) blur(14px); transition: background .25s ease, box-shadow .25s ease; }
.top-glass:not([data-scrolled]) .pill { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }
.top-glass:not([data-scrolled]) .top-link, .top-glass:not([data-scrolled]) .icon-btn { color: rgb(255 255 255 / 0.88); }
.top-glass:not([data-scrolled]) .top-link:hover, .top-glass:not([data-scrolled]) .icon-btn:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.top-glass:not([data-scrolled]) .btn-pill { background: #fff; color: #0a58ab; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brand img { height: 24px; width: auto; }
.brand-pill { font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: var(--gold-soft); border: 1px solid hsl(38 89% 61% / 0.35); padding: 5px 8px; border-radius: 999px; }
.top-glass:not([data-scrolled]) .brand-pill { color: #ffd27a; background: rgb(0 0 0 / 0.18); border-color: rgb(255 210 122 / 0.45); }
.top-nav { display: flex; align-items: center; gap: 2px; }
.top-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 8px 13px; border-radius: 999px; border: 0; background: none; color: var(--ink-2); font: 500 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: color .15s ease, background .15s ease; }
.top-link:hover { color: var(--ink); background: var(--surface-2); }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn { white-space: nowrap; display: inline-grid; place-items: center; grid-auto-flow: column; gap: 6px; height: 40px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px/1 var(--font-sans); text-transform: uppercase; cursor: pointer; list-style: none; }
.icon-btn:hover { color: var(--ink); background: var(--surface-2); }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn[hidden] { display: none; }
[data-theme-toggle] .sun { display: none; }
:root[data-theme="dark"] [data-theme-toggle] .sun { display: block; }
:root[data-theme="dark"] [data-theme-toggle] .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-theme-toggle] .sun { display: block; } :root:not([data-theme="light"]) [data-theme-toggle] .moon { display: none; } }
.btn-pill { white-space: nowrap; padding: 11px 18px; border-radius: 999px; background: #1586ec; color: #fff; font-size: 15px; }
.btn-pill:hover { color: #fff; background: #2b95f0; }
.top-login { margin-right: 2px; }

/* Header menus: open on hover and on focus (no script needed) */
.menu { position: relative; }
.menu .chev { transition: transform .2s ease; }
.mega { position: absolute; left: 0; top: 100%; padding-top: 12px; display: none; z-index: 5; }
.mega-right { left: auto; right: 0; }
.menu:hover .mega, .menu:focus-within .mega { display: block; }
.menu:hover .chev, .menu:focus-within .chev { transform: rotate(180deg); }
.pop-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 60px -20px rgb(3 20 60 / 0.55); }
.mega-card { display: grid; grid-template-columns: repeat(4, 210px); gap: 6px; padding: 14px; }
.mega-title { margin: 4px 10px 8px; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col a { display: block; padding: 9px 10px; border-radius: 14px; text-decoration: none; }
.mega-col a:hover { background: var(--brand-soft); }
.mega-col b { display: block; font: 600 14.5px/1.3 var(--font-sans); color: var(--ink); }
.mega-col span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.lang-card { list-style: none; margin: 0; padding: 6px; width: 180px; }
.lang-card a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 12px; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.lang-card a span { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.lang-card a:hover { background: var(--surface-2); }
.lang-card a[aria-current] { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.drawer { display: none; }
.drawer > summary { list-style: none; }
.drawer-card { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 18px 20px 22px; }
.drawer-links { display: grid; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer-links a { padding: 9px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.drawer-links a:hover { background: var(--surface-2); }
.drawer-langs { display: flex; gap: 8px; margin-top: 14px; }
.drawer-langs a { flex: 1; text-align: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); font-weight: 600; text-transform: uppercase; font-size: 13px; text-decoration: none; }
.drawer-langs a[aria-current] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.drawer-cta { width: 100%; margin-top: 16px; }
@media (max-width: 1180px) { .mega-card { grid-template-columns: repeat(2, 230px); } }
@media (max-width: 1080px) { .top-nav .top-link:last-child { display: none; } }
@media (max-width: 960px) {
  .top-nav, .top-login, .btn-pill, .lang-menu { display: none; }
  .drawer { display: block; }
  .pill { position: relative; height: 56px; padding-left: 18px; }
}

/* Shell */
.shell { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 270px minmax(0, 1fr) 220px; gap: 48px; }
@media (max-width: 1180px) { .shell { grid-template-columns: 250px minmax(0, 1fr); } .aside-right { display: none; } }
@media (max-width: 960px) { .shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; } .side { display: none; } }

/* Sidebar */
.side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 84px); overflow-y: auto; padding: 24px 0 40px; scrollbar-width: thin; }
.side-section + .side-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.side-title { display: flex; align-items: center; gap: 10px; font: 700 16px/1.2 var(--font-display); color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.side-title .icon { color: var(--brand); background: var(--brand-soft); padding: 6px; width: 32px; height: 32px; border-radius: 10px; }
.side-group { margin: 18px 0 6px; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.side ul, .drawer-card ul { list-style: none; margin: 0; padding: 0; }
.side li a, .drawer-card li a { display: block; padding: 7px 12px; margin: 1px 0; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 15px; border-left: 2px solid transparent; }
.side li a:hover, .drawer-card li a:hover { background: var(--surface-2); color: var(--ink); }
.side li a[aria-current], .drawer-card li a[aria-current] { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; border-left-color: var(--brand); border-radius: 4px 10px 10px 4px; }
.side-soon li span { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--muted); font-size: 14px; opacity: .75; }
.side-soon .icon { width: 16px; height: 16px; }

/* Content */
.content { min-width: 0; padding: 24px 0 64px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-2); }
.crumbs span[aria-current] { color: var(--ink-2); }
.meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.meta span, .meta a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.meta a:hover { color: var(--brand-2); }

/* Right column: on this page */
.aside-right { padding-top: 24px; }
.toc { position: sticky; top: 100px; font-size: 14px; border-left: 1px solid var(--line); padding-left: 16px; }
.toc p { margin: 0 0 10px; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 8px; }
.toc a { color: var(--muted); text-decoration: none; line-height: 1.4; display: block; }
.toc a:hover { color: var(--brand-2); }

/* Prose */
.prose { color: var(--ink-2); max-width: 780px; }
.prose h1 { font: 800 clamp(32px, 4.2vw, 46px)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); margin: 14px 0 18px; }
.prose h1 + p { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.prose h2 { font: 700 28px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.prose h3 { font: 700 21px/1.3 var(--font-display); color: var(--ink); margin: 34px 0 10px; }
.prose h4 { font: 700 17px/1.3 var(--font-sans); color: var(--ink); margin: 26px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--brand); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose :not(pre) > code { font: 500 0.88em/1.4 var(--font-mono); background: var(--surface-2); color: var(--code-inline); border: 1px solid var(--line); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }

/* Steps: ordered lists read as a path */
.prose ol { list-style: none; counter-reset: step; padding-left: 0; }
.prose ol > li { counter-increment: step; position: relative; padding: 2px 0 10px 50px; margin: 0; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-soft); border: 1px solid hsl(199 89% 48% / 0.35); color: var(--brand-2); font: 700 15px/1 var(--font-display); }
.prose ol > li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 2px; width: 1px; background: var(--line); }

/* Tables */
.table { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th { background: var(--surface-2); color: var(--ink); font-weight: 650; font-size: 14px; white-space: nowrap; }
.table td code { white-space: nowrap; }

/* Code */
.code { position: relative; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--code-bg); box-shadow: var(--shadow); }
.code figcaption { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 8px 6px 14px; background: var(--code-head); border-bottom: 1px solid hsl(217 33% 17%); color: hsl(214 32% 82%); font: 600 13px/1 var(--font-mono); }
.code figcaption em { margin-left: auto; font: 600 11px/1 var(--font-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: hsl(215 20% 60%); }
.code-term figcaption::before { content: ""; width: 44px; height: 10px; flex: none; background: radial-gradient(circle at 5px 5px, #ff5f57 4px, transparent 4.5px), radial-gradient(circle at 22px 5px, #febc2e 4px, transparent 4.5px), radial-gradient(circle at 39px 5px, #28c840 4px, transparent 4.5px); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 14px/1.65 var(--font-mono); color: hsl(214 32% 88%); tab-size: 2; }
.code code { font: inherit; }
.code pre, .prose code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.copy { margin-left: 10px; padding: 6px 10px; border: 1px solid hsl(217 33% 26%); border-radius: 8px; background: hsl(222 40% 14%); color: hsl(214 32% 85%); font: 600 12px/1 var(--font-sans); cursor: pointer; }
.code figcaption em + .copy { margin-left: 10px; }
.code figcaption > span + .copy { margin-left: auto; }
.copy:hover { border-color: #1586ec; color: #fff; }
.copy[data-done] { border-color: hsl(152 60% 45%); color: hsl(152 60% 70%); }
.code-loose > .copy { position: absolute; top: 8px; right: 8px; margin: 0; opacity: .85; }
.hljs-comment, .hljs-quote { color: hsl(215 16% 52%); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-template-tag, .hljs-meta .hljs-keyword { color: hsl(199 95% 66%); }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string { color: hsl(152 55% 66%); }
.hljs-number, .hljs-literal, .hljs-symbol { color: #f5b544; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr { color: hsl(262 80% 78%); }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: hsl(36 95% 70%); }
.hljs-tag { color: hsl(214 25% 70%); }
.hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: hsl(178 70% 62%); }
.hljs-variable, .hljs-template-variable, .hljs-params { color: hsl(340 85% 76%); }
.hljs-meta, .hljs-bullet, .hljs-link { color: hsl(199 89% 60%); }
.hljs-deletion { color: hsl(0 80% 70%); }
.hljs-addition { color: hsl(152 55% 66%); }

/* Hyler: a box with the still image, or the live robot once the script mounts it */
.hyler { position: relative; display: inline-block; flex: none; vertical-align: middle; }
.hyler[data-interactive] { cursor: pointer; }
.hyler-still { display: block; width: 100%; height: 100%; object-fit: contain; }
.hyler-live .hyler-still { display: none; }
.corner-hyler { position: fixed; right: 22px; bottom: 18px; z-index: 40; }
.corner-hyler .hyler:not(.hyler-live) { display: none; }
@media (max-width: 640px) { .corner-hyler { right: 10px; bottom: 8px; transform: scale(.8); transform-origin: bottom right; } }
@media print { .corner-hyler { display: none; } }

/* Callouts */
.callout { display: flex; gap: 14px; margin: 0 0 22px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.callout-badge { flex: none; }
.callout-icon { width: 24px; height: 24px; margin-top: 2px; }
.callout-body { min-width: 0; }
.callout-body > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 4px !important; font: 700 14px/1.4 var(--font-sans); letter-spacing: .02em; color: var(--ink); }
.callout-tip { align-items: center; gap: 24px; padding: 22px 26px 22px 18px; border-color: hsl(199 89% 48% / 0.35); background: radial-gradient(120% 160% at 0% 50%, hsl(199 89% 48% / 0.16), transparent 60%), var(--surface); }
.callout-tip .callout-badge { display: grid; place-items: center; width: 132px; min-height: 120px; }
.callout-tip .callout-title { color: var(--brand-2); font: 700 16px/1.3 var(--font-display); letter-spacing: 0; }
.callout-tip .callout-body { font-size: 16.5px; }
@media (max-width: 560px) { .callout-tip { flex-direction: column; text-align: center; padding: 18px; gap: 8px; } }
.callout-note { border-color: hsl(217 60% 50% / 0.35); }
.callout-note .callout-icon { color: hsl(217 91% 70%); }
.callout-warning { border-color: hsl(38 89% 61% / 0.4); background: linear-gradient(135deg, var(--gold-soft), transparent); }
.callout-warning .callout-icon, .callout-warning .callout-title { color: var(--gold); }
.prose blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--line-2); color: var(--muted); }

/* Previous / next */
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 56px 0 0; max-width: 780px; }
.pn { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.pn:hover { border-color: var(--brand); transform: translateY(-1px); }
.pn-next { text-align: right; align-items: flex-end; }
.pn-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pn-title { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
@media (max-width: 560px) { .prev-next { grid-template-columns: 1fr; } }

/* Did this page help? */
.feedback { margin: 28px 0 0; max-width: 780px; }
.feedback-form { display: flex; gap: 20px; align-items: center; padding: 22px 24px 22px 18px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(120% 140% at 0% 0%, hsl(199 89% 48% / 0.12), transparent 55%), var(--surface); }
.feedback-hyler { display: grid; place-items: center; width: 100px; min-height: 96px; flex: none; }
.feedback-main { flex: 1; min-width: 0; }
.feedback-q { margin: 4px 0 10px; font: 700 20px/1.3 var(--font-display); color: var(--ink); }
.feedback-more summary { cursor: pointer; color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.feedback-more textarea { width: 100%; resize: vertical; min-height: 84px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 15px/1.5 var(--font-sans); }
.feedback-more textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.feedback-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.feedback-buttons .btn { padding: 10px 18px; }
.feedback-buttons button[value="up"]:hover { border-color: var(--green); background: hsl(152 60% 50% / 0.1); color: var(--ink); }
.feedback-buttons button[value="down"]:hover { border-color: var(--red); background: hsl(0 80% 66% / 0.1); color: var(--ink); }
.feedback-privacy { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.feedback-thanks { display: none; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px; border: 1px solid hsl(152 60% 50% / 0.4); background: hsl(152 60% 50% / 0.08); color: var(--ink); }
.feedback-thanks p { margin: 0; font-weight: 600; }
.feedback-thanks:target { display: flex; }
.feedback:has(.feedback-thanks:target) .feedback-form { display: none; }
@media (max-width: 560px) { .feedback-form { flex-direction: column; text-align: center; } .feedback-buttons { justify-content: center; } }

/* Footer: like hystore.com.br (navy, never black; the same in light and dark) */
.site-foot { position: relative; overflow: hidden; margin-top: 40px; background: #071733; color: rgb(224 242 254 / 0.8); }
.foot-glow { position: absolute; top: -160px; right: -10%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgb(21 134 236 / 0.28), transparent); pointer-events: none; }
.foot-grid { position: relative; max-width: 1200px; margin: 0 auto; padding: 64px 24px 48px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot-logo { display: inline-flex; align-items: center; gap: 10px; }
.foot-logo img:first-child { width: 40px; height: 40px; }
.foot-logo img:last-child { height: 28px; width: auto; }
.foot-brand p { margin: 20px 0 24px; max-width: 320px; font-size: 15px; line-height: 1.6; color: rgb(224 242 254 / 0.7); }
.foot-title { margin: 0; font: 600 14px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.site-foot nav ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.site-foot a { color: rgb(224 242 254 / 0.8); text-decoration: none; }
.site-foot a:hover { color: #fff; }
.foot-langs { margin-top: 24px; }
.foot-langs p { margin: 0 0 8px; font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: rgb(224 242 254 / 0.5); }
.foot-langs div { display: flex; gap: 6px; }
.foot-langs a { padding: 5px 10px; border-radius: 8px; font: 600 12px/1 var(--font-sans); text-transform: uppercase; color: rgb(224 242 254 / 0.7); }
.foot-langs a:hover { background: rgb(255 255 255 / 0.1); }
.foot-langs a[aria-current] { background: rgb(255 255 255 / 0.15); color: #fff; }
.foot-bottom { position: relative; border-top: 1px solid rgb(255 255 255 / 0.1); }
.foot-bottom-in { max-width: 1200px; margin: 0 auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; font-size: 13px; color: rgb(224 242 254 / 0.6); }
.foot-legal-block p { margin: 0 0 4px; }
.foot-legal-block b { color: rgb(224 242 254 / 0.8); font-weight: 600; }
.foot-legal-block .dot { margin: 0 8px; color: rgb(224 242 254 / 0.3); }
.site-foot .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0 !important; font-size: 13px !important; }
.foot-legal a { text-underline-offset: 4px; }
.foot-legal a:hover { text-decoration: underline; }
.made-by { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 11px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase; color: rgb(224 242 254 / 0.7); }
.made-by .hy { display: grid; place-items: center; height: 28px; min-width: 28px; padding: 0 6px; border-radius: 8px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2); color: #fff; font: 700 11px/1 var(--font-display); letter-spacing: 0; }
.made-by b { color: #fff; font-weight: 600; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; padding-top: 48px; } }

/* Home: the hero is the blue sky of hystore.com.br */
.hero { position: relative; overflow: hidden; color: #fff; background:
  radial-gradient(60% 70% at 78% 30%, rgb(56 189 248 / 0.35), transparent 60%),
  linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(165deg, #1f6fe5 0%, #1257d6 38%, #0b3c9f 72%, #0a2c74 100%); }
.hero-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 150px 24px 110px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.1); color: #fff; font: 700 12px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 0 0 18px; font: 800 clamp(40px, 5.6vw, 66px)/1.03 var(--font-display); letter-spacing: -0.025em; color: #fff; }
.hero h1::after { content: ""; display: block; width: 84px; height: 5px; margin-top: 22px; border-radius: 99px; background: linear-gradient(90deg, #ffd27a, #f5b544); }
.hero .lead { color: rgb(255 255 255 / 0.86); }
.lead { font-size: 19px; line-height: 1.65; color: var(--muted); max-width: 560px; margin: 0 0 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 340px; }
.hero-ring { position: absolute; width: 360px; height: 360px; border-radius: 50%; border: 1px dashed rgb(255 255 255 / 0.3); background: radial-gradient(circle, rgb(255 255 255 / 0.12), transparent 65%); }
.hero-hyler { position: relative; }
.hero-hyler:not(.hyler-live) { animation: float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .hero-hyler { animation: none; } }
.hero-curve { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 120px; border-radius: 50% 50% 0 0; background: var(--bg); }
@media (max-width: 860px) { .hero-in { grid-template-columns: 1fr; padding: 110px 16px 90px; } .hero-art { min-height: 240px; order: -1; } .hero-ring { width: 240px; height: 240px; } }
.home-block { padding: 40px 0 8px; }
.home-block:last-of-type { padding-bottom: 40px; }
.home-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.home-in > h2 { margin: 0 0 6px; font: 800 30px/1.2 var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.home-in > .muted { margin: 0 0 24px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cat { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); text-decoration: none; min-height: 190px; }
.cat h3 { margin: 6px 0 0; font: 700 19px/1.25 var(--font-display); color: var(--ink); }
.cat p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.cat-icon { width: 42px; height: 42px; padding: 9px; border-radius: 12px; color: var(--brand-2); background: var(--brand-soft); border: 1px solid hsl(199 89% 48% / 0.25); }
.cat .badge { margin-top: auto; align-self: flex-start; font: 700 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; color: var(--muted); border: 1px solid var(--line-2); }
.cat-live { border-color: hsl(199 89% 48% / 0.4); background: radial-gradient(120% 120% at 100% 0%, hsl(199 89% 48% / 0.16), transparent 60%), var(--surface); box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }
.cat-live:hover { transform: translateY(-3px); border-color: var(--brand); }
.cat-live .badge-live { color: var(--gold); border-color: hsl(38 89% 61% / 0.4); background: var(--gold-soft); }
.cat-soon { opacity: .72; }
.cat-soon .cat-icon { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.pops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 18px 0 30px; }
.pop { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 42px 18px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .15s ease; }
.pop:hover { border-color: var(--brand); }
.pop-title { font: 700 17px/1.3 var(--font-display); color: var(--ink); }
.pop-text { color: var(--muted); font-size: 14px; line-height: 1.5; }
.pop-arrow { position: absolute; right: 16px; top: 20px; color: var(--brand-2); }
.home-prose { max-width: 820px; }
.for-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 15px; }
.for-ai .icon { color: var(--gold); }
.for-ai b { color: var(--ink); }

/* 404 */
.lost { max-width: 640px; margin: 0 auto; padding: 48px 24px 80px; text-align: center; }
.lost .hyler { margin: 0 auto 8px; }
.lost h1 { font: 800 40px/1.1 var(--font-display); color: var(--ink); margin: 12px 0; }
.lost .lead { margin: 0 auto 24px; }
.lost .hero-actions { justify-content: center; margin-bottom: 18px; }

@media print { .top, .side, .aside-right, .feedback, .prev-next, .site-foot, .corner-hyler { display: none; } body.doc { padding-top: 0; } .shell { display: block; } body { background: #fff; color: #000; } }

/* Categories in the header menu: a grid of every category. */
.mega-cats { display: block; width: min(720px, calc(100vw - 48px)); padding: 12px; }
.mega-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega-cats a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; text-decoration: none; }
.mega-cats a:hover { background: var(--brand-soft); }
.mega-cats .mega-icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.mega-cats b { display: block; font: 600 14.5px/1.3 var(--font-sans); color: var(--ink); }
.mega-cats a > span > span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 1180px) { .mega-cats { width: min(560px, calc(100vw - 48px)); } .mega-cats ul { grid-template-columns: 1fr; } }

/* Side menu: the other categories show only their name, close together. */
.side-section.side-closed + .side-section.side-closed { margin-top: 4px; padding-top: 0; border-top: 0; }
.side-section:not(.side-closed) + .side-closed, .side-closed + .side-section:not(.side-closed) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.side-closed .side-title { margin: 0; padding: 6px 8px; border-radius: 12px; font: 600 14.5px/1.2 var(--font-sans); color: var(--ink-2); }
.side-closed .side-title:hover { background: var(--surface-2); color: var(--ink); }
.side-closed .side-title .icon { width: 28px; height: 28px; padding: 5px; }

/* Screenshots of the dashboard. */
.prose figure.shot { margin: 26px 0 30px; }
.prose figure.shot a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #0b1220; box-shadow: 0 18px 44px -24px rgb(3 20 60 / 0.6); }
.prose figure.shot img { display: block; width: 100%; height: auto; }
.prose figure.shot a:hover { border-color: var(--brand); }
.prose figure.shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Footer: the categories in two columns. */
.foot-cats { columns: 2; column-gap: 24px; }
.foot-cats li { break-inside: avoid; }

/* The notice about usage measurement (hyler/consent.ts). */
.consent[hidden] { display: none; }
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 352px; padding: 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px -18px rgb(0 0 0 / 0.55); }
.consent-text { margin: 0; font-size: 12.5px; line-height: 1.5; }
.consent-actions { display: flex; gap: 8px; margin-top: 12px; }
.consent-actions .btn { flex: 1; }
.consent-actions .btn-primary, .consent-actions .btn-primary:hover { background: #0a68bd; }
.consent-text a { color: inherit; text-decoration: underline; }
.consent-link { display: none; }
html[data-analytics='on'] .consent-link { display: list-item; }
.consent-link button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }