/* =====================================================================
   Tema "Giz": papel preto amassado, traços de giz e tinta branca.
   Só preto, branco e cinzas. Ativado por <html class="chalk"> (theme.js).
   Sem imagens nem fontes de terceiros: o grão do giz é ruído SVG gerado aqui.
   ===================================================================== */
html.chalk {
  --bg: #121212;
  --island: #1A1A1A;
  --ink: #F5F5F2;
  --muted: #A6A6A1;
  --line: rgba(255,255,255,.13);
  --soft: #242424;
  --blue: #FFFFFF;
  --blue-ink: #FFFFFF;
  --blue-soft: rgba(255,255,255,.09);
  --green: #FFFFFF;
  --green-ink: #EDEDEA;
  --stage: #0E0E0E;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 30px -14px rgba(0,0,0,.85);
  /* pó de giz branco por cima das superfícies */
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* grão do giz: buracos no traço (usado como máscara nas letras grandes) */
  --chalk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.5 1.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* rabisco de giz (sublinhado) */
  --chalk-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C60 5 120 4 180 8 S270 12 297 6 M10 16 C90 10 170 9 290 11' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' opacity='.92'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- fundo: papel preto amassado + manchas de giz apagado ---------- */
html.chalk body, html.chalk body.landing {
  background-color: #151515;
  background-image:
    radial-gradient(ellipse 60% 40% at 18% 12%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 70%, rgba(255,255,255,.04), transparent 70%),
    var(--paper-noise),
    url(paper.jpg);
  background-size: auto, auto, auto, cover;
  background-attachment: fixed;
  background-blend-mode: normal, normal, normal, multiply;
}
html.chalk ::selection { background: #fff; color: #111; }
html.chalk a { color: inherit; }

/* ---------- superfícies ---------- */
html.chalk .island,
html.chalk .pillsel, html.chalk .transport, html.chalk .btn:not(.blue):not(.green),
html.chalk .card, html.chalk .fontbtn, html.chalk .gencard, html.chalk .vlink, html.chalk .zoombox,
html.chalk .mycard, html.chalk .bubbles, html.chalk .bubbles::before, html.chalk .bubbles .bubble:not(.hot):not(.danger) {
  background-color: #1C1C1C; background-image: var(--paper-noise); color: var(--ink); border-color: var(--line);
}
html.chalk .island { border: 1px solid rgba(255,255,255,.09); }
html.chalk .btn:not(.blue):not(.green):hover, html.chalk .card:hover, html.chalk .fontbtn:hover { background-color: #262626; border-color: rgba(255,255,255,.3); }
html.chalk .card[aria-pressed="true"], html.chalk .card.on, html.chalk .fontbtn[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
html.chalk input, html.chalk select, html.chalk textarea, html.chalk .sel { background-color: #111; color: var(--ink); border-color: var(--line); }
html.chalk select option { background: #1A1A1A; color: #F5F5F2; }
html.chalk .sel:focus, html.chalk input:focus, html.chalk textarea:focus { background: #0C0C0C !important; border-color: #fff !important; }
html.chalk input[type=color], html.chalk kbd, html.chalk .insp kbd, html.chalk .tut-keys kbd,
html.chalk .bub-icons button, html.chalk .bubble.bub-input input { background: #111; color: var(--ink); border-color: var(--line); }
html.chalk .seg { background: #0F0F0F; }
html.chalk .seg button[aria-pressed="true"], html.chalk .tools button[aria-pressed="true"] { background: #fff; color: #111; box-shadow: none; }
html.chalk .tab { color: var(--muted); }
html.chalk .tab[aria-selected="true"], html.chalk .rail .tab[aria-selected="true"] { background-color: #fff; background-image: none; color: #111; }
html.chalk .tab[aria-selected="true"] .ic { color: #111; }
html.chalk .chip { background: rgba(255,255,255,.08); color: var(--ink); }
html.chalk .ver { background: #fff; color: #111; border-color: #fff; }
html.chalk .hint.warn, html.chalk .warn { background: rgba(255,255,255,.07); border: 1px dashed rgba(255,255,255,.45); color: var(--ink); }
html.chalk .lead, html.chalk .note p, html.chalk #faq p { color: #C9C9C4; }

/* ---------- botões de ação: tinta branca, letra preta ---------- */
html.chalk .btn.blue, html.chalk .btn.green, html.chalk .bubble.hot, html.chalk .gplay, html.chalk .toast button {
  background: #FFFFFF; color: #0D0D0D; border: 0; box-shadow: 3px 3px 0 rgba(255,255,255,.22);
  border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px;   /* borda feita à mão */
  font-weight: 800;
}
html.chalk .btn.blue .ic, html.chalk .btn.green .ic, html.chalk .bubble.hot .ic { color: #0D0D0D; }
html.chalk .btn.blue:hover, html.chalk .btn.green:hover, html.chalk .bubble.hot:hover { background: #ECECE8; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(255,255,255,.3); }
html.chalk .btn.green { border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; }
html.chalk .btn.danger, html.chalk .bubble.danger, html.chalk .bubble.danger .ic, html.chalk .err, html.chalk .acct-menu .err { color: #FF8A8A; }
html.chalk .btn.danger:hover, html.chalk .bubble.danger:hover { background: rgba(255,90,90,.12); }
html.chalk .toast { background: #F5F5F2; color: #111; }
html.chalk .toast button { background: #111; color: #fff; box-shadow: none; }

html.chalk .playbtn { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.6); }
html.chalk .playbtn .tri { border-left-color: #111; }
html.chalk .playbtn.on .tri { border-left-color: #111; border-right-color: #111; }
html.chalk .fullbtn { background: #1C1C1C; color: var(--ink); border-color: rgba(255,255,255,.2); }
html.chalk .fullbtn .ic { color: #fff; }
html.chalk .fullbtn:hover { background: #2A2A2A; }
html.chalk .card-del { background: rgba(0,0,0,.65); color: #fff; }

/* ---------- topo ---------- */
html.chalk .lhead { background: rgba(18,18,18,.82); border-bottom: 1px solid rgba(255,255,255,.1); }
html.chalk.appmode .top { background: #161616; }
html.chalk .logo { background: #fff !important; color: #111; }
html.chalk .logo .ic { stroke: #111; }
html.chalk .brand b { letter-spacing: -.02em; }

/* ---------- palco: lousa quadriculada em giz ---------- */
html.chalk .stage {
  background-color: #101010;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    var(--paper-noise);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 60px rgba(0,0,0,.6);
}
html.chalk #screen { box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 24px 48px -12px rgba(0,0,0,.9); }
html.chalk .drop { background: rgba(255,255,255,.03); border: 2px dashed rgba(255,255,255,.4); color: var(--ink); }
html.chalk .drop-scissors { background: #1A1A1A; color: #fff; }

/* ---------- fitas: fita-crepe branca ---------- */
html.chalk .tape-label, html.chalk .tape, html.chalk .note::before, html.chalk .price-card .t3,
html.chalk .track-name::before, html.chalk .community-note, html.chalk .tut-card::before, html.chalk .tip-tape {
  --stk: #EDEDE8; background: #EDEDE8 !important; color: #111;
}
html.chalk .tape-label { color: #111; }
html.chalk .hero-art .t2, html.chalk .note:nth-child(3n+2)::before { --stk: #BDBDB8; background: #BDBDB8 !important; }
html.chalk .note:nth-child(3n)::before { --stk: #D8D8D3; background: #D8D8D3 !important; }
html.chalk .track .track-name::before, html.chalk .track.t-video .track-name::before, html.chalk .track.t-scene .track-name::before,
html.chalk .track.t-ov .track-name::before, html.chalk .track.t-txt .track-name::before { --stk: #EDEDE8; background: var(--paper-noise), #EDEDE8 !important; }
html.chalk .track.t-scene .track-name::before, html.chalk .track:nth-child(3) .track-name::before { --stk: #CFCFCA; background: #CFCFCA !important; }
html.chalk .track.t-txt .track-name::before { --stk: #B8B8B3; background: #B8B8B3 !important; }
html.chalk .track-name { color: #111; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }

/* ---------- linha do tempo ---------- */
html.chalk .tl-inner, html.chalk .lane { background-color: transparent; }
html.chalk .lane-empty, html.chalk .lane-empty.scene-empty { border-color: rgba(255,255,255,.25); color: var(--muted); background: rgba(255,255,255,.03); }
html.chalk .blk.sel { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
html.chalk .blk.scene { background: #222 !important; color: var(--ink); border-color: rgba(255,255,255,.2); box-shadow: none; }
html.chalk .blk.scene.sel { box-shadow: 0 0 0 2px #111, 0 0 0 4px #fff; }
html.chalk .blk.scene .hdl.grip { background: #fff; box-shadow: 0 0 0 1.5px #111; }
html.chalk .trcard, html.chalk .tut-card { background: #1E1E1E; background-image: var(--paper-noise); color: var(--ink); }
html.chalk .tr-tape, html.chalk .trname { background: #EDEDE8 !important; color: #111; }
html.chalk .scene-head { border-bottom-color: rgba(255,255,255,.18); }
html.chalk .tut-dots i { background: #444; } html.chalk .tut-dots i.on { background: #fff; }
html.chalk .st-stage { background-color: #161616; }
html.chalk img.checker { background: repeating-conic-gradient(#2A2A2A 0 25%, #1C1C1C 0 50%) 0 0 / 14px 14px; }
html.chalk .swatch, html.chalk .bub-icons button.dot { border-color: #1A1A1A; }
html.chalk .bub-x, html.chalk .appmode .sheet-x { background: #fff; color: #111; border-color: #111; }
html.chalk .side::before, html.chalk .insp::before { background: #444 !important; }

/* ---------- página inicial ---------- */
html.chalk .note, html.chalk .tcard, html.chalk .price-card, html.chalk #faq details {
  background-color: #1C1C1C; background-image: var(--paper-noise); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 34px -16px rgba(0,0,0,.9);
}
html.chalk .note .ic, html.chalk .price-card li .ic { color: #fff; }
html.chalk .sticker { background: #fff; color: #111; box-shadow: 4px 4px 0 rgba(255,255,255,.18); }
html.chalk .sticker::before { color: #111; }
html.chalk .phone { background: #000; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 0 8px #000, 0 0 0 9.5px rgba(255,255,255,.25), 0 40px 70px -24px rgba(0,0,0,.95); }
html.chalk .idbig, html.chalk .idsmall { background: #111; border-color: rgba(255,255,255,.4); }
html.chalk .privacy-line, html.chalk .trial { color: #EDEDEA; }

/* títulos em giz: letras grossas, grão do giz e risco por baixo */
html.chalk .hero h1, html.chalk .sec h2 {
  font-family: "Anton", "Figtree", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .005em; color: #FAFAF7;
  -webkit-mask-image: var(--chalk-grain); mask-image: var(--chalk-grain);
}
html.chalk .hero h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: .98; padding-bottom: 18px;
  background: var(--chalk-line) left bottom / min(78%, 520px) 18px no-repeat; }
html.chalk .sec h2 { font-size: clamp(30px, 3.6vw, 46px); }
html.chalk .note h3 { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 20px; }

/* ---------- botão de chamada (todos os temas) ----------
   Mancha de tinta que balança de leve, risco de giz em volta e uma seta desenhada à mão. */
.cta-hot { position: relative; isolation: isolate; animation: cta-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 60%; }
.cta-hot::before { content: ""; position: absolute; inset: -14px -18px; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M30 12 C80 2 160 4 188 22 C204 38 186 66 120 74 C60 80 8 70 6 44 C4 22 40 8 96 6' fill='none' stroke='%23222' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='520' stroke-dashoffset='520'%3E%3Canimate attributeName='stroke-dashoffset' values='520;0;0;520' keyTimes='0;.35;.85;1' dur='3.2s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.cta-hot::after { content: ""; position: absolute; right: -58px; top: -30px; width: 54px; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 44'%3E%3Cpath d='M50 4 C40 6 26 14 14 32 M14 32 L13 20 M14 32 L25 30' fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: cta-point 1.6s ease-in-out infinite; }
html.chalk .cta-hot::before { filter: invert(1); }
html.chalk .cta-hot::after { filter: invert(1); }
html.chalk .btn.cta-hot { font: 400 22px/1 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: 18px 34px;
  box-shadow: 5px 5px 0 rgba(255,255,255,.25), 0 0 40px rgba(255,255,255,.18); }
html.chalk .btn.cta-hot:hover { animation-play-state: paused; transform: rotate(-2deg) scale(1.05); box-shadow: 7px 7px 0 rgba(255,255,255,.35), 0 0 60px rgba(255,255,255,.3); }
@keyframes cta-wiggle {
  0%, 62%, 100% { transform: rotate(-1.5deg) scale(1); }
  68% { transform: rotate(2.5deg) scale(1.06); }
  74% { transform: rotate(-3deg) scale(1.06); }
  80% { transform: rotate(1.5deg) scale(1.03); }
  86% { transform: rotate(-1.5deg) scale(1); }
}
@keyframes cta-point { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-6px, 5px); } }
@media (max-width: 560px) { .cta-hot::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta-hot, .cta-hot::after { animation: none; } }

/* ---------- botão de trocar tema ---------- */
.theme-btn { gap: 7px; white-space: nowrap; cursor: pointer; font: 600 13px var(--ui); color: var(--ink); padding: 7px 12px; }
.theme-btn .th-ico { width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); flex: none; }
.theme-btn { padding: 7px 10px; }
.top .theme-btn span:not(.th-ico) { display: none !important; }
.theme-btn .th-paper { display: none; }
html.chalk .theme-btn .th-paper { display: inline; }
html.chalk .theme-btn .th-chalk { display: none; }
html.appmode .theme-btn span:not(.th-ico) { display: none !important; }

/* =====================================================================
   Giz, mais vivo: contraste maior, rabiscos de giz que se desenham, títulos de lousa,
   cartões com contorno de giz e a faixa de nichos em tinta branca.
   ===================================================================== */
html.chalk { --muted: #B9B9B4; --island: #1C1C1C; --line: rgba(255,255,255,.16); }
html.chalk .island { border: 1.5px solid rgba(255,255,255,.12); box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 20px 40px -18px rgba(0,0,0,.9); }
/* títulos dos painéis como escrita de lousa */
html.chalk .side h3, html.chalk .insp h3, html.chalk h3.sub, html.chalk .tpl-group {
  font: 400 17px/1.1 "Anton", sans-serif; text-transform: uppercase; letter-spacing: .04em; color: #FAFAF7;
  -webkit-mask-image: var(--chalk-grain); mask-image: var(--chalk-grain);
  padding-bottom: 8px; background: var(--chalk-line) left bottom / 120px 9px no-repeat; }
/* aba ativa: mancha de tinta branca um pouco torta */
html.chalk .rail .tab[aria-selected="true"] { transform: rotate(-2deg); border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px; box-shadow: 3px 3px 0 rgba(255,255,255,.25); }
/* cartões de modelo: contorno de giz no hover, contorno grosso quando escolhido */
html.chalk .card.tpl { transition: transform .15s, box-shadow .15s; }
html.chalk .card.tpl:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 14px 26px -12px rgba(0,0,0,.9); }
html.chalk .card.tpl[aria-pressed="true"] { box-shadow: 0 0 0 3px #FFFFFF, 6px 6px 0 rgba(255,255,255,.22); }
html.chalk .card.tpl .tpl-name { font-weight: 800; }
/* página inicial: faixa em tinta branca, notas com contorno de giz, doodles no topo */
html.chalk .marquee { background: #F5F5F2; color: #0D0D0D; box-shadow: 0 0 40px rgba(255,255,255,.12); }
html.chalk .note { border: 1.5px dashed rgba(255,255,255,.3); }
html.chalk .price-card { border: 2px solid rgba(255,255,255,.8); box-shadow: 8px 8px 0 rgba(255,255,255,.14), 0 26px 48px -22px rgba(0,0,0,.9); }
html.chalk .hero-art::before, html.chalk .hero-art::after, html.chalk .hero-copy::after { content: ""; position: absolute; pointer-events: none; z-index: 4; }
/* estrela de giz que se desenha */
html.chalk .hero-art::before { left: -40px; top: 40px; width: 70px; height: 70px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath d='M35 6 L42 28 L65 29 L47 43 L54 65 L35 52 L16 65 L23 43 L5 29 L28 28 Z' fill='none' stroke='white' stroke-width='2.6' stroke-linejoin='round' stroke-dasharray='260' stroke-dashoffset='260'%3E%3Canimate attributeName='stroke-dashoffset' values='260;0;0' keyTimes='0;.4;1' dur='4s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; }
/* espiral de giz perto do celular */
html.chalk .hero-art::after { right: -30px; bottom: 90px; width: 80px; height: 80px; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 40 m0 -4 a4 4 0 1 1 -4 4 a9 9 0 1 1 9 9 a15 15 0 1 1 -15 -15 a22 22 0 1 1 22 22 a30 30 0 1 1 -30 -30' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='520' stroke-dashoffset='520'%3E%3Canimate attributeName='stroke-dashoffset' values='520;0;0' keyTimes='0;.5;1' dur='5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat; }
/* faíscas de giz ao lado do título */
html.chalk .hero-copy { position: relative; }
html.chalk .hero-copy::after { right: 6%; top: 40px; width: 56px; height: 56px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cg stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M28 4v12M28 40v12M4 28h12M40 28h12M11 11l8 8M37 37l8 8M45 11l-8 8M19 37l-8 8'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='1.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: chalk-spin 9s linear infinite; }
@keyframes chalk-spin { to { transform: rotate(360deg); } }
html.chalk .tape-label { animation: chalk-tilt 4s ease-in-out infinite; }
@keyframes chalk-tilt { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(1.5deg); } }
@media (max-width: 900px) { html.chalk .hero-art::before, html.chalk .hero-copy::after { display: none; } }
@media (prefers-reduced-motion: reduce) { html.chalk .hero-copy::after, html.chalk .tape-label { animation: none; } }
html.chalk .tab:hover { background: rgba(255,255,255,.1); color: #FFFFFF; }
html.chalk .tab[aria-selected="true"]:hover { background: #FFFFFF; color: #111; }
html.chalk .track .track-name, html.chalk .track.t-ov .track-name, html.chalk .track.t-txt .track-name { color: #111; }