/* ============================================================
   Template Master — Redes Sociais
   Sistema visual: Swiss minimal, neutro, grid visível
   ============================================================ */

:root{
  --bg:        #fafaf9;
  --paper:     #ffffff;
  --ink:       #111111;
  --ink-2:     #2a2a2a;
  --ink-3:     #555555;
  --ink-4:     #8a8a8a;
  --ink-5:     #b8b8b8;
  --rule:      #e7e7e5;
  --rule-2:    #d4d4d2;
  --grid:      rgba(17,17,17,.045);
  --placeholder: #ececea;
  --placeholder-stripe: #dedeb9;

  /* status */
  --st-pauta:        #9e9e9e;
  --st-aprovacao:    #e9c20b;
  --st-aprovado:     #8fc34a;
  --st-design:       #6b57b8;
  --st-final:        #e8842b;
  --st-agendado:     #2e9d47;
  --st-postado:      #1f6a30;

  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

body{
  font-family: var(--sans);
  background: #1a1a1a;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

deck-stage{ background:#1a1a1a; }

/* ------------------------------------------------------------
   Slide base — 1920×1080
   ------------------------------------------------------------ */
section.slide{
  width: 1920px;
  height: 1080px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  font-feature-settings: "ss01","cv11";
  color: var(--ink);
}

.slide.has-grid::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events:none;
  z-index: 0;
}

.frame{
  position:absolute;
  top: 56px; right: 56px; bottom: 56px; left: 56px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ------------------------------------------------------------
   HEADER (3 colunas: N | meta | status)
   ------------------------------------------------------------ */
.header{
  display: grid;
  grid-template-columns: 380px 1fr auto;
  gap: 48px;
  align-items: stretch;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink);
}
.header-num{
  position: relative;
  display: flex;
  align-items: flex-end;
}
.header-num .num{
  font-weight: 200;
  font-size: 180px;
  line-height: .82;
  letter-spacing: -.06em;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.header-meta{
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 12px;
  column-gap: 24px;
  align-content: end;
  padding-bottom: 12px;
}
.header-meta .label{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-4);
  align-self: center;
}
.header-meta .value{
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
  align-self: center;
}
.header-meta .type-tag{
  align-self: center;
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  width: max-content;
  white-space: nowrap;
}
.header-meta .type-tag .dot{
  width: 8px; height: 8px;
  background: var(--ink);
  display: inline-block;
}

.header-status{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
}
.header-status .badge-meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ------------------------------------------------------------
   ART PLACEHOLDER
   ------------------------------------------------------------ */
.art{
  background: var(--placeholder);
  position: relative;
  display:flex; align-items:center; justify-content:center;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.art::before{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 18px,
    var(--placeholder-stripe) 18px 19px
  );
  opacity: .55;
}
.art .art-label{
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  background: rgba(255,255,255,.92);
  padding: 8px 12px;
  border: 1px solid var(--rule-2);
  letter-spacing: .04em;
  white-space: nowrap;
}
.art .art-dim{
  position: relative;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   CAPTION block
   ------------------------------------------------------------ */
.caption{
  display:flex; flex-direction: column;
  gap: 16px;
  padding-top: 4px;
  position: relative;
}
.caption .caption-label{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-4);
}
.caption .caption-text{
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.caption .caption-text p{ margin-bottom: 12px; }
.caption .hashtags{
  font-size: 15px;
  color: var(--ink-3);
  font-weight: 500;
}

/* ------------------------------------------------------------
   STATUS BADGE
   ------------------------------------------------------------ */
.status{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--st-pauta);
  border: 0;
  border-radius: 0;
  white-space: nowrap;
}
.status[data-state="pauta"]      { background: var(--st-pauta); }
.status[data-state="aprovacao"]  { background: var(--st-aprovacao); color:#1a1a1a; }
.status[data-state="aprovado"]   { background: var(--st-aprovado); color:#1a1a1a; }
.status[data-state="design"]     { background: var(--st-design); }
.status[data-state="final"]      { background: var(--st-final); }
.status[data-state="agendado"]   { background: var(--st-agendado); }
.status[data-state="postado"]    { background: var(--st-postado); }

/* States docking strip — barra linha-do-tempo dos 7 estados */
.states-strip{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 14px;
  width: 280px;
}
.states-strip .pip{
  height: 6px;
  background: var(--rule);
}
.states-strip .pip[data-on="1"]{ background: var(--ink); }
.states-strip .pip[data-on="2"]{ background: var(--ink-3); }

/* ------------------------------------------------------------
   ObjectId labels
   ------------------------------------------------------------ */
.oid{
  position: absolute;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: .04em;
  background: rgba(255,255,250,.96);
  padding: 2px 5px;
  border: 1px dashed var(--ink-5);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
  text-transform: lowercase;
}
body.hide-oids .oid{ display:none; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer{
  position:absolute;
  left: 56px; right: 56px; bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  z-index: 2;
}
.footer .crumbs{ display:flex; gap: 28px; }
.footer .crumbs span{ position:relative; }
.footer .crumbs span + span::before{
  content:""; position:absolute; left:-16px; top:50%;
  width:6px; height:1px; background: var(--ink-5);
}

/* ------------------------------------------------------------
   COVER
   ------------------------------------------------------------ */
.cover .frame{ justify-content: space-between; padding: 8px 0; }
.cover .top{ display:flex; justify-content: space-between; align-items: flex-start; position: relative; }
.cover .agency-mark{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.7;
}
.cover .agency-mark .sub, .thanks .agency-mark .sub{ display:block; color: var(--ink-4); margin-top: 6px; font-size: 11px; }
.cover .doc-id{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: right;
  line-height: 1.7;
}
.cover h1{
  font-size: 192px;
  font-weight: 200;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
.cover h1 em{
  font-style: normal;
  font-weight: 600;
}
.cover .client-block{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  position: relative;
}
.cover .field{ position: relative; }
.cover .field .label{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.cover .field .value{
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.cover .field .value.mono{ font-family: var(--mono); font-size: 22px; }

.cover.cover-split .frame h1{ font-size: 132px; }
.cover.cover-split .frame .client-block{ grid-template-columns: 1fr 1fr; gap: 32px; }
/* COVER · hero treatments ----------------------------------- */
.cover.cover-split .frame{
  right: 800px; /* leave room for hero */
}
.cover-hero-split{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 760px;
  z-index: 1;
  overflow: hidden;
  background: #f3f3f1;
}
.cover-hero-split img{
  width: 100%; height: 100%;
  object-fit: cover;
  display:block;
}
.cover-hero-split .hero-caption{
  position:absolute; left:16px; bottom: 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color:#fff;
  background: rgba(0,0,0,.55);
  padding: 6px 12px;
  z-index: 2;
}

.cover.cover-fullbleed .cover-hero-fullbleed{
  position: absolute; inset: 0;
  z-index: 0;
}
.cover.cover-fullbleed .cover-hero-fullbleed img{
  width:100%; height:100%; object-fit: cover; display:block;
}
.cover.cover-fullbleed .cover-hero-fullbleed::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.84) 50%, rgba(255,255,255,.62) 100%);
}
.cover.cover-fullbleed .frame{ position:absolute; z-index: 1; }
.cover.cover-fullbleed .footer{ z-index: 1; }
/* fullbleed: hide grid behind image */
.cover.cover-fullbleed.has-grid::before{ opacity: .15; }

/* COVER · DESCANSO · imagem inteira (lock screen Solo Propaganda) com
   chrome editorial discreto sobre faixas escuras nos cantos.
   ATENÇÃO: como a imagem JÁ contém o lockup "SOLO PROPAGANDA", o titular
   editorial é menor e a marca da agência só aparece como microcopy. */
.cover.cover-descanso .cover-hero-descanso{
  position: absolute; inset: 0; z-index: 0;
}
.cover.cover-descanso .cover-hero-descanso img{
  width:100%; height:100%; object-fit: cover; display:block;
}
.cover.cover-descanso .frame{
  position: absolute; z-index: 2;
  inset: 0;
  padding: 56px 64px;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.cover.cover-descanso .top{
  color: rgba(255,255,255,.92);
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  padding: 24px 32px;
  margin: -56px -64px 0;
}
.cover.cover-descanso .agency-mark{ color: rgba(255,255,255,.95); white-space: nowrap; }
.cover.cover-descanso .agency-mark .sub{ color: rgba(255,255,255,.7); white-space: nowrap; }
.cover.cover-descanso .doc-id{ color: rgba(255,255,255,.85); text-align:right; white-space: nowrap; }
/* Esconde o titular grande (a imagem já tem o lockup) */
.cover.cover-descanso h1{ display: none; }
.cover.cover-descanso .client-block{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 28px 32px;
  border-radius: 2px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.cover.cover-descanso .field .label{ color: rgba(255,255,255,.55); }
.cover.cover-descanso .field .value{ color: #fff; }
.cover.cover-descanso .footer{ z-index: 2; color: rgba(255,255,255,.7); }
.cover.cover-descanso .footer .crumbs span{ color: rgba(255,255,255,.7); }
.cover.cover-descanso.has-grid::before{ opacity: 0; }

/* COVER · PORTRAIT · retrato em cortina vertical à direita
   (variante "humana" do split). */
.cover.cover-portrait .frame{ right: 760px; }
.cover.cover-portrait .frame h1{ font-size: 124px; }
.cover.cover-portrait .frame .client-block{ grid-template-columns: 1fr 1fr; gap: 32px; }
.cover-hero-portrait{
  position: absolute; top:0; right:0; bottom:0;
  width: 720px; z-index: 0;
  background: #1a1a1a;
}
.cover-hero-portrait img{ width:100%; height:100%; object-fit: cover; display:block; }

/* ------------------------------------------------------------
   ESTATICO body
   ------------------------------------------------------------ */
.body-grid{
  flex: 1;
  display: grid;
  margin-top: 32px;
  min-height: 0;
  align-items: stretch;
}
.layout-estatico .body-grid{
  grid-template-columns: 720px 1fr;
  gap: 64px;
}
.layout-estatico .art-frame{
  width: 720px;
  height: 720px;
  position: relative;
}

/* REELS */
.layout-reels .body-grid{
  grid-template-columns: 410px 1fr;
  gap: 72px;
}
.layout-reels .art-frame{
  width: 410px;
  height: 728px;
  position: relative;
}
.layout-reels .art{
  justify-content: flex-start;
  padding-top: 24px;
}
.layout-reels .play-icon{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.92);
  z-index: 3;
  display:flex; align-items:center; justify-content:center;
}
.layout-reels .play-icon svg{ display:block; }

/* STORY — 3 frames lado a lado */
.layout-story .body-grid{
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 28px;
  min-height: 0;
}
.story-frames{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
  height: 100%;
}
.story-frame{
  position: relative;
  display: flex;
  flex-direction: column;
}
.story-frame .frame-meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.story-frame .art-frame{
  flex: 1;
  position: relative;
  width: 100%;
  min-height: 0;
}
.story-frame .progress-bars{
  position:absolute; top:14px; left:14px; right:14px;
  display: flex; gap: 4px; z-index: 4;
}
.story-frame .progress-bars span{
  flex: 1; height: 3px; background: rgba(255,255,255,.4);
}
.story-frame .progress-bars span.active{ background: #fff; }
.story-caption{ display: grid; grid-template-columns: 2fr 1fr; gap: 64px; }

/* CARROSSEL — grid 2x3 */
.layout-carrossel .body-grid{
  grid-template-columns: 1fr 540px;
  gap: 56px;
}
.carrossel-frames{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
}
.carrossel-frame{
  position: relative;
}
.carrossel-frame .frame-num{
  position:absolute; top: 10px; left: 10px;
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255,255,255,.92);
  padding: 4px 8px;
  letter-spacing: .08em;
  z-index: 4;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
  white-space: nowrap;
}
.carrossel-frame .art-frame{ width:100%; aspect-ratio: 1; }

.thanks .agency-mark{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.7;
}
.thanks .doc-id{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .14em;
}
/* ------------------------------------------------------------
   THANKS
   ------------------------------------------------------------ */
.thanks .frame{ justify-content: space-between; }
.thanks h2{
  font-size: 280px;
  font-weight: 200;
  letter-spacing: -.05em;
  line-height: .85;
  color: var(--ink);
  position: relative;
}
.thanks .signoff{
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.thanks .signoff .label{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-4);
  margin-bottom: 8px;
}
.thanks .signoff .value{ font-size: 22px; color: var(--ink); }
.thanks .signoff .value.mono{ font-family: var(--mono); font-size: 18px; }

/* THANKS · hero strip --------------------------------------- */
/* THANKS · full-bleed hero (retrato em cortina vertical) ---- */
.thanks-fullbleed .thanks-hero-bleed{
  position: absolute; inset: 0; z-index: 0;
}
.thanks-fullbleed .thanks-hero-bleed img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.thanks-fullbleed .frame{
  position: absolute; z-index: 2;
  inset: 0;
  padding: 56px 64px;
  justify-content: space-between;
}
/* Topo / canto: fundo escuro suave para microcopy editorial */
.thanks-fullbleed .frame > div:first-child{
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
  margin: -56px -64px 0;
  padding: 24px 32px;
}
.thanks-fullbleed .agency-mark,
.thanks-fullbleed .agency-mark .sub,
.thanks-fullbleed .doc-id{ color: rgba(255,255,255,.95); }
.thanks-fullbleed .agency-mark .sub{ color: rgba(255,255,255,.7); }
/* "obrigado" em branco, peso normal — silhueta do retrato cuida do impacto */
.thanks-fullbleed h2{
  color: #fff;
  font-size: 320px;
  font-weight: 300;
  letter-spacing: -.04em;
  margin: 0;
  align-self: flex-start;
}
/* Signoff em barra escura translúcida */
.thanks-fullbleed .signoff{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 28px 32px;
  border-top: none;
  margin: 0 -64px -56px;
}
.thanks-fullbleed .signoff .label{ color: rgba(255,255,255,.6); }
.thanks-fullbleed .signoff .value,
.thanks-fullbleed .signoff .value.mono{ color: #fff; }
.thanks-fullbleed .footer{
  z-index: 2;
  color: rgba(255,255,255,.85);
  /* No full-bleed o signoff já carrega contato/aprovação/versão.
     Footer fica abaixo do signoff com padding extra pra não colidir. */
  position: absolute;
  bottom: 4px; left: 64px; right: 64px;
  display: none; /* signoff substitui o footer aqui */
}
.thanks-fullbleed.has-grid::before{ opacity: 0; }

/* Legacy strip mode (keeps "Sem hero" fallback clean) ------- */
.thanks:not(.thanks-fullbleed) h2{ font-size: 280px; }

/* ============================================================
   TUTORIAL · slide 02 · player + capítulos
   ============================================================ */
.tutorial .frame{
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 32px;
  padding: 24px 0;
}
.tutorial-top{
  display: flex; justify-content: space-between; align-items: flex-start;
}
.tutorial .agency-mark{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.7;
}
.tutorial .agency-mark .sub{
  display:block; color: var(--ink-4);
  margin-top: 6px; font-size: 11px;
}
.tutorial .doc-id{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: right;
  line-height: 1.7;
}
.tutorial-headline .eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-4);
  margin-bottom: 16px;
}
.tutorial-headline h2{
  font-size: 96px;
  font-weight: 300;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 0 0 16px;
  position: relative;
  max-width: 14ch;
}
.tutorial-sub{
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.tutorial-body{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  align-items: stretch;
  min-height: 0;
}

/* PLAYER ---------------------------------------------------- */
.tutorial-player{
  position: relative;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  overflow: hidden;
  border: 1px solid var(--ink);
  align-self: start;
}
.tutorial-player video{
  width:100%; height:100%; display:block;
  object-fit: cover;
}
.tutorial-player .play-btn{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0; cursor: pointer; padding: 0;
  transition: transform .15s ease;
}
.tutorial-player .play-btn:hover{ transform: scale(1.05); }
.tutorial-player .play-btn svg{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.tutorial-player .player-meta{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}

/* CHAPTERS -------------------------------------------------- */
.tutorial-chapters{
  position: relative;
  border-left: 1px solid var(--ink);
  padding: 4px 0 0 32px;
  display: flex; flex-direction: column;
}
.chapters-title{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-4);
  margin-bottom: 24px;
}
.tutorial-chapters ol{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.tutorial-chapters li{
  display: grid;
  grid-template-columns: 32px 56px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--ink-7, rgba(0,0,0,.08));
  cursor: pointer;
  transition: background .15s ease, padding .15s ease;
}
.tutorial-chapters li:hover{
  background: var(--accent-tint, #f5f3f0);
  padding-left: 8px;
}
.tutorial-chapters li:last-child{ border-bottom: 0; }
.tutorial-chapters .ch-num{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .14em;
}
.tutorial-chapters .ch-time{
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: .08em;
}
.tutorial-chapters .ch-label{
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.3;
}
.chapters-hint{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--ink-7, rgba(0,0,0,.12));
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: .08em;
}

/* STEPS — passo a passo em texto (backup do vídeo) -------- */
.tutorial-steps{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ink);
}
.steps-title{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-4);
  margin-bottom: 18px;
}
.steps-list{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 36px;
}
.steps-list > li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
}
.step-num{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-4);
  letter-spacing: .14em;
  padding-top: 2px;
}
.step-title{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 4px;
}
.step-text{
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================
   VARIATION 2 — Technical Spec
   ============================================================ */
.var-2 .header{
  grid-template-columns: 1fr auto;
  border-bottom: none;
  padding-bottom: 0;
  align-items: start;
  gap: 32px;
}
.var-2 .header-num{ display: none; }
.var-2 .header-meta{
  grid-template-columns: auto auto auto auto auto;
  align-items: center;
  align-content: start;
  row-gap: 0; column-gap: 28px;
  border: 1px solid var(--ink);
  padding: 14px 20px;
  background: var(--paper);
}
.var-2 .header-meta .group{
  display: flex; flex-direction: column; gap: 4px;
}
.var-2 .header-meta .group .label{ width: auto; }
.var-2 .header-meta .group .value{ font-size: 16px; }
.var-2 .body-grid{ position: relative; }
.var-2 .art{
  outline: 1px solid var(--ink-3);
  outline-offset: 0;
}
.var-2 .art::after{
  content:"";
  position:absolute; inset: 14px;
  border: 1px dashed var(--ink-5);
  pointer-events: none;
}
/* corner ticks como spec */
.var-2 .corner-ticks{ position: absolute; inset: 24px; pointer-events: none; z-index: 0; }
.var-2 .corner-ticks i{
  position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--ink); border-radius: 0;
}
.var-2 .corner-ticks i:nth-child(1){ top: 0; left: 0;       border-right: 0; border-bottom: 0; }
.var-2 .corner-ticks i:nth-child(2){ top: 0; right: 0;      border-left: 0;  border-bottom: 0; }
.var-2 .corner-ticks i:nth-child(3){ bottom: 0; left: 0;    border-right: 0; border-top: 0; }
.var-2 .corner-ticks i:nth-child(4){ bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

/* dimension lines */
.var-2 .dim-line{
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.var-2 .dim-line.bottom{
  bottom: -28px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
}
.var-2 .dim-line.bottom::before, .var-2 .dim-line.bottom::after{
  content:""; height: 1px; background: var(--ink-5); flex: 1;
}
.var-2 .dim-line.bottom span{ padding: 0 12px; }

/* ============================================================
   VARIATION 3 — Compact (header em barra superior fina)
   ============================================================ */
.var-3 .frame{ padding: 0; }
.var-3 .header{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.var-3 .header-num{ display: flex; align-items: center; }
.var-3 .header-num .num{
  font-size: 44px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: -.02em;
  border-right: 1px solid var(--rule);
  padding-right: 24px;
}
.var-3 .header-meta{
  display: flex; gap: 28px;
  grid-template-columns: none;
  flex: 1;
  align-content: center;
  padding: 0;
}
.var-3 .header-meta > *{ display: flex; flex-direction: column; gap: 2px; }
.var-3 .header-meta .label{ font-size: 9.5px; }
.var-3 .header-meta .value{ font-size: 15px; }
.var-3 .header-meta .type-tag{ padding: 6px 12px; font-size: 11px; }
.var-3 .body-grid{ margin-top: 32px; }

/* hide states-strip in var-2/3 to keep it clean */
.var-2 .states-strip, .var-3 .states-strip{ display: none; }

/* ============================================================
   Tweaks panel UI overrides
   ============================================================ */
#tweaks-host{ position: relative; z-index: 9999; }

/* dark-mode-friendly bottom hint */
.deck-foot-hint{
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  font-family: var(--mono);
  color: rgba(255,255,255,.5);
  font-size: 11px;
  z-index: 1;
}