/* Blog and help center (generated by tools/blog/build.py). Reading pages: light paper, the landing's navy and orange as accents */
@font-face { font-family: Lilita; src: url(/site/LilitaOne-Regular.ttf) format("truetype"); font-display: swap; }
:root { --navy: #081430; --navy2: #0e1f48; --orange: #ff7a1a; --gold: #ffc23d; --bg: #f4f6fb; --card: #fff; --ink: #161c2e;
  --mute: #5b647a; --line: #e1e5ef; --link: #1a4fb8; --soft: #eaf0fd; }
@media (prefers-color-scheme: dark) { :root { --bg: #0a1022; --card: #111a33; --ink: #e7ecf7; --mute: #a2acc3; --line: #243150;
  --link: #8fb2ff; --soft: #16234a; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); }
.in { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
h1, h2, .wm, .play, .card b, .chips a { font-family: Lilita, Inter, sans-serif; font-weight: 400; letter-spacing: .01em; }

.top { background: var(--navy); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px #0004; }
.top .in { display: flex; align-items: center; gap: 14px; height: 58px; }
.top nav { display: flex; gap: 14px; margin-right: auto; }
.top nav a { color: #dbe4f8; text-decoration: none; font-weight: 600; font-size: 15px; }
.top nav a:hover { color: #fff; }
.wm { color: #fff; text-decoration: none; font-size: 26px; line-height: 1; display: inline-block; transform: skewX(-10deg); paint-order: stroke fill;
  -webkit-text-stroke: 4px #1b2a5c; filter: drop-shadow(1.5px 0 0 #ff7a1a) drop-shadow(-1.5px 0 0 #ff7a1a) drop-shadow(0 1.5px 0 #ff7a1a) drop-shadow(0 -1.5px 0 #ff7a1a); }
.wm b { font-weight: 400; color: var(--gold); }
.wm.sm { font-size: 22px; }
.play { background: var(--orange); color: #241000; text-decoration: none; padding: 7px 14px; border-radius: 10px; font-size: 16px; box-shadow: 0 3px 0 #b4500a; white-space: nowrap; }

.crumbs { font-size: 14px; color: var(--mute); margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs a { color: var(--mute); }
.crumbs a::after { content: "›"; margin-left: 6px; text-decoration: none; display: inline-block; }
.crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.post, .hub { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
.hub { max-width: 1080px; }
article { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 18px 28px; }
h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.08; margin: 6px 0 10px; color: var(--ink); }
.meta { color: var(--mute); font-size: 14px; margin: 0 0 14px; }
.sum { font-size: 18px; background: var(--soft); border-left: 4px solid var(--orange); border-radius: 0 10px 10px 0; padding: 12px 14px; margin: 0 0 16px; }
.lead { color: var(--mute); font-size: 18px; max-width: 46em; margin: 0 0 18px; }
.toc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 8px; font-size: 15px; }
.toc summary { font-weight: 800; cursor: pointer; }
.toc ol { margin: 8px 0 2px; padding-left: 20px; }
.toc li { margin: 3px 0; }

.prose h2 { font-size: 28px; line-height: 1.15; margin: 34px 0 8px; scroll-margin-top: 70px; }
.prose h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 6px; scroll-margin-top: 70px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 14px; }
.prose li { margin: 5px 0; }
.prose code { background: var(--soft); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.tbl { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--soft); font-weight: 800; }
tr:last-child td { border-bottom: 0; }
.note { background: var(--soft); border-radius: 12px; padding: 12px 14px 2px; margin: 0 0 16px; }
.note-t { font-weight: 800; margin: 0 0 4px !important; }
.steps { counter-reset: s; list-style: none; padding: 0 !important; }
.steps li { counter-increment: s; position: relative; padding: 2px 0 10px 44px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy);
  color: #fff; font: 400 17px/30px Lilita, sans-serif; text-align: center; }
.game { background: linear-gradient(135deg, #0e1f48, #1a4fb8); color: #fff; border-radius: 14px; padding: 16px 16px 18px; margin: 22px 0; }
.game p { margin: 0 0 12px; } .game a:not(.btn) { color: #ffd98a; }
.btn { display: inline-block; background: var(--orange); color: #241000; text-decoration: none; padding: 9px 16px; border-radius: 10px;
  font: 400 17px Lilita, sans-serif; box-shadow: 0 3px 0 #b4500a; }
.faqs { display: grid; gap: 8px; margin: 0 0 16px; }
.faq { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq[open] summary { margin-bottom: 6px; }
.faq p:last-child { margin-bottom: 4px; }

.rel h2, .grp h2 { font-size: 26px; margin: 30px 0 12px; }
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--orange); transform: translateY(-2px); }
.card b { font-size: 20px; line-height: 1.15; }
.card span:last-child { color: var(--mute); font-size: 15px; line-height: 1.45; }
.tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.chips a { background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-size: 16px; }
.chips a:hover { border-color: var(--orange); }

.foot { background: var(--navy); color: #b9c6e6; padding: 26px 0 30px; font-size: 14px; }
.foot-wm { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a { color: #dbe4f8; }

@media (min-width: 720px) {
  article { padding: 34px 40px 40px; }
  .top .in { gap: 24px; }
  .top nav { gap: 22px; }
}
@media (max-width: 380px) { .top nav { gap: 10px; } .wm { font-size: 22px; } .play { padding: 6px 10px; font-size: 15px; } }
figure { margin: 6px 0 20px; }
figure img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid var(--line); background: #f4f6fb; }
figure img[src$=".webp"] { max-width: 360px; margin: 0 auto; border: 6px solid #02060f; border-radius: 26px; }
figcaption { color: var(--mute); font-size: 14px; text-align: center; margin-top: 6px; }
figure img[src$=".svg"] { max-width: 520px; margin: 0 auto; }
figure img[src$=".webp"] { max-width: 300px; }
th, td { min-width: 96px; }

/* ---- tools ---- */
/* Interactive tools (category ferramentas / tools): markup in :::html blocks, scripts in content/tools/*.js. All classes start with .tool */
.tool { border: 1px solid var(--line); border-radius: 16px; background: var(--bg); padding: 14px; margin: 6px 0 26px; font-size: 16px; line-height: 1.45; }
.tool[hidden], .tool [hidden] { display: none !important; }
.tool-h { font: 400 22px/1.15 Lilita, Inter, sans-serif; margin: 0 0 10px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.tool-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--mute); }
.tool input[type=text], .tool input[type=number], .tool select, .tool textarea { width: 100%; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink); font: 400 17px/1.4 Inter, system-ui, sans-serif; }
.tool textarea { min-height: 150px; resize: vertical; }
.tool-btn { min-height: 48px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink);
  font: 700 16px/1.2 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.tool-btn:hover { border-color: var(--orange); }
.tool-btn:disabled { opacity: .45; cursor: default; border-color: var(--line); }
.tool-btn.tool-go { background: var(--orange); color: #241000; border-color: transparent; box-shadow: 0 3px 0 #b4500a; }
.tool button:focus-visible, .tool input:focus-visible, .tool select:focus-visible, .tool textarea:focus-visible, .tool-seg input:focus-visible + .tool-seg-l {
  outline: 3px solid var(--orange); outline-offset: 2px; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-bar .tool-btn { flex: 1 1 auto; }
.tool-msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.tool-note { color: var(--mute); font-size: 14px; margin: 8px 0 0; }
.tool-out { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 12px 0 0; }
/* segmented choice: <label class="tool-seg"><input type=radio><span class="tool-seg-l">..</span></label> */
.tool-segs { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-seg { position: relative; flex: 1 1 auto; }
.tool-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tool-seg-l { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; text-align: center; }
.tool-seg-l small { font-weight: 400; color: var(--mute); font-size: 13px; }
.tool-seg input:checked + .tool-seg-l { border-color: var(--orange); box-shadow: inset 0 0 0 2px var(--orange); }

/* scoreboard */
.tool-score { background: var(--bg); }
.tool-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 230px; padding: 12px 8px;
  border: 1px solid #ffffff26; border-radius: 16px; background: var(--navy); color: #fff; cursor: pointer; font-family: Inter, system-ui, sans-serif; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; }
.tool-side.tool-p1 { background: #1a4fb8; }
.tool-side:disabled { cursor: default; }
.tool-side:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }
.tool-side.tool-srv { box-shadow: inset 0 0 0 4px var(--gold); }
.tool-nm { font-weight: 800; font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-pts { font: 400 clamp(72px, 24vw, 150px)/1 Lilita, Inter, sans-serif; font-variant-numeric: tabular-nums; }
.tool-gw { font-size: 15px; color: #c9d6f5; }
.tool-sv { min-height: 26px; font-size: 14px; font-weight: 800; color: var(--gold); display: flex; align-items: center; gap: 6px; }
.tool-sv::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--gold); }
.tool-sv:empty::before { display: none; }
.tool-sets { margin: 10px 0 0; color: var(--mute); font-size: 15px; text-align: center; min-height: 1.4em; }
.tool-score .tool-msg { text-align: center; }
.tool-score .tool-bar { margin-top: 12px; }
.tool-score:fullscreen { display: flex; flex-direction: column; justify-content: center; padding: 3vh 3vw; border: 0; border-radius: 0; background: #081430; }
.tool-score:fullscreen .tool-setup, .tool-score:fullscreen .tool-note { display: none; }
.tool-score:fullscreen .tool-board { flex: 1; }
.tool-score:fullscreen .tool-pts { font-size: min(42vh, 30vw); }
.tool-score:fullscreen .tool-nm { font-size: 4vh; }
.tool-score:fullscreen .tool-gw, .tool-score:fullscreen .tool-sv { font-size: 3vh; }
.tool-score:fullscreen .tool-sets, .tool-score:fullscreen .tool-msg { color: #dbe4f8; }

/* bracket */
.tool-bracket { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin-top: 12px; }
.tool-round { flex: 0 0 176px; display: flex; flex-direction: column; }
.tool-round-h { font-weight: 800; font-size: 14px; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px; }
.tool-round-b { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.tool-match { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.tool-slot { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 10px; border: 0; background: none; color: var(--ink);
  font: 600 15px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.tool-slot + .tool-slot { border-top: 1px solid var(--line); }
.tool-slot:disabled { cursor: default; }
.tool-slot b { flex: 0 0 auto; min-width: 22px; color: var(--mute); font-size: 13px; }
.tool-slot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-slot.tool-win { background: var(--soft); box-shadow: inset 4px 0 0 var(--orange); font-weight: 800; }
.tool-slot.tool-lose span { color: var(--mute); text-decoration: line-through; }
.tool-slot.tool-bye, .tool-slot.tool-tbd { color: var(--mute); font-style: italic; font-weight: 400; }
.tool-champ { margin: 10px 0 0; font-weight: 800; font-size: 18px; }

/* round robin */
.tool-rr-rounds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 12px; }
.tool-rr-round { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; }
.tool-rr-round h4 { margin: 0 0 6px; font-size: 15px; }
.tool-rr-game { display: grid; grid-template-columns: 1fr 52px 10px 52px 1fr; align-items: center; gap: 4px; padding: 4px 0; font-size: 15px; }
.tool-rr-game + .tool-rr-game { border-top: 1px solid var(--line); }
.tool-rr-game span:first-child { text-align: right; }
.tool-rr-game span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-rr-game i { text-align: center; color: var(--mute); font-style: normal; }
.tool .tool-rr-game input { min-height: 48px; padding: 6px 4px; text-align: center; -moz-appearance: textfield; }
.tool-rr-game input::-webkit-inner-spin-button, .tool-rr-game input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tool-rr-bye { color: var(--mute); font-size: 14px; padding: 4px 0 0; }
.tool-stand { margin-top: 14px; }
.tool-stand td, .tool-stand th { min-width: 0; text-align: center; padding: 8px 6px; }
.tool-stand td:nth-child(2), .tool-stand th:nth-child(2) { text-align: left; }

/* calories */
.tool-kcal { font: 400 clamp(44px, 14vw, 64px)/1 Lilita, Inter, sans-serif; color: var(--orange); }
.tool-kcal small { font: 700 18px Inter, system-ui, sans-serif; color: var(--ink); margin-left: 6px; }

/* quiz */
.tool-q-top { display: flex; justify-content: space-between; gap: 8px; color: var(--mute); font-size: 14px; font-weight: 700; }
.tool-prog { height: 6px; border-radius: 3px; background: var(--line); margin: 6px 0 12px; overflow: hidden; }
.tool-prog i { display: block; height: 100%; background: var(--orange); transition: width .3s; }
.tool-q { font-size: 19px; font-weight: 800; margin: 0 0 12px; }
.tool-opts { display: grid; gap: 8px; }
.tool-opt { text-align: left; font-weight: 600; }
.tool-opt.tool-ok { border-color: #1e9e57; background: #33d17a26; box-shadow: inset 4px 0 0 #1e9e57; }
.tool-opt.tool-bad { border-color: #e2342b; background: #e2342b1f; box-shadow: inset 4px 0 0 #e2342b; }
.tool-expl { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); }
.tool-expl p { margin: 0 0 6px; }
.tool-big { font: 400 54px/1 Lilita, Inter, sans-serif; color: var(--orange); margin: 6px 0; }

/* coin toss / hidden ball */
.tool-stage { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 170px; perspective: 600px; margin: 14px 0; }
.tool-coin { position: relative; width: 140px; height: 140px; transform-style: preserve-3d; }
.tool-coin.tool-flip { animation: tool-flip 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
.tool-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 14px; border-radius: 50%; backface-visibility: hidden;
  -webkit-backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #ffe08a, #ffc23d 55%, #d99a14); color: #3a2600; border: 5px solid #c88a0c;
  font-weight: 800; font-size: 16px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }
.tool-face + .tool-face { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #fff, #dfe5f2 55%, #aab4ca); color: #161c2e; border-color: #8f9ab3; }
@keyframes tool-flip { from { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(calc(var(--turns) * .5)) translateY(-36px); } to { transform: rotateY(var(--turns)) translateY(0); } }
.tool-hand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 128px; min-height: 128px; border-radius: 22px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 700 15px Inter, system-ui, sans-serif; cursor: pointer; }
.tool-hand svg { width: 64px; height: 64px; }
.tool-hand.tool-shake { animation: tool-shake .5s ease-in-out 2; }
@keyframes tool-shake { 25% { transform: translateY(-8px) rotate(-6deg); } 75% { transform: translateY(4px) rotate(4deg); } }
.tool-win-box { text-align: center; }
.tool-win-box .tool-big { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .tool-coin.tool-flip, .tool-hand.tool-shake { animation-duration: .01s; } .tool-prog i { transition: none; } }

/* printable rules sheet */
.tool-sheet { background: #fff; color: #161c2e; border-color: #d5dbe8; padding: 18px 16px; }
.tool-sheet h3 { font: 400 26px/1.1 Lilita, Inter, sans-serif; margin: 0 0 4px; color: #081430; }
.tool-sheet h4 { margin: 12px 0 4px; font-size: 16px; color: #1a4fb8; }
.tool-sheet p, .tool-sheet ul { margin: 0 0 6px; font-size: 15px; }
.tool-sheet ul { padding-left: 18px; }
.tool-sheet li { margin: 2px 0; }
.tool-sheet .tool-sub { color: #5b647a; font-size: 14px; }
.tool-sheet .tool-cols { columns: 1; column-gap: 26px; }
.tool-sheet .tool-cols > div { break-inside: avoid; }
.tool-sheet a { color: #1a4fb8; }
@media (min-width: 720px) { .tool-sheet .tool-cols { columns: 2; } }

/* print: body.tool-print shows only the tool marked .tool-printing (set by the tool scripts) */
@media print {
  body.tool-print { background: #fff; color: #000; }
  body.tool-print > header, body.tool-print > footer, body.tool-print .crumbs, body.tool-print .rel, body.tool-print article > :not(.prose),
  body.tool-print .prose > :not(.tool-printing), body.tool-print .tool-noprint { display: none !important; }
  body.tool-print .post { max-width: none; padding: 0; }
  body.tool-print article { border: 0; padding: 0; background: #fff; }
  body.tool-print .tool { border: 0; padding: 0; margin: 0; background: #fff; color: #000; }
  body.tool-print .tool-match, body.tool-print .tool-rr-round, body.tool-print .tool-slot { background: #fff; color: #000; }
  body.tool-print .tool-slot.tool-win { background: #eee; }
  body.tool-print .tool-bracket { overflow: visible; flex-wrap: nowrap; }
  body.tool-print .tool-rr-round, body.tool-print .tool-stand, body.tool-print .tool-match { break-inside: avoid; }
  body.tool-print .tool-rr-game input { border: 1px solid #999; background: #fff; color: #000; }
  body.tool-print .tool-sheet .tool-cols { columns: 2; column-gap: 8mm; }
  body.tool-print .tool-sheet p, body.tool-print .tool-sheet ul { font-size: 11pt; line-height: 1.4; }
  body.tool-print .tool-sheet h4 { font-size: 13pt; margin: 4mm 0 1mm; }
  body.tool-print .tool-sheet h3 { font-size: 22pt; }
  @page { margin: 12mm; }
}
/* embeddable tools: the box with the iframe code on the tool page, and the page served inside the iframe */
.embed-box { margin: 28px 0 0; padding: 16px; border: 1px dashed var(--line); border-radius: 14px; background: var(--soft); }
.embed-box h2 { font-size: 22px; margin: 0 0 6px; }
.embed-box p { margin: 0 0 10px; font-size: 15px; }
.embed-box textarea { width: 100%; box-sizing: border-box; font: 13px/1.4 ui-monospace, Menlo, monospace; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--card); color: var(--ink); }
body.embed { background: transparent; padding: 8px; }
body.embed .tool { margin: 0; }
.embed-by { text-align: center; font-size: 13px; margin: 8px 0 0; }
.embed-by a { color: var(--mute); }