:root{
  --papel:#F6F7F8; --folha:#FFFFFF; --baixo:#ECEFF1;
  --tinta:#141A21; --texto:#333F49; --fraco:#6B7883; --linha:#D8DEE3;
  --acento:#1F4E6B; --acento-fraco:#E3EDF3;
  --falta:#8A5A12; --falta-fraco:#F7EEDD;
  --sombra:0 1px 2px rgba(20,26,33,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --papel:#0E1317; --folha:#151C22; --baixo:#111820;
    --tinta:#E8EDF1; --texto:#C0CBD4; --fraco:#84939E; --linha:#25313A;
    --acento:#6FB4D8; --acento-fraco:#122733;
    --falta:#D8A552; --falta-fraco:#2C2213;
    --sombra:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  padding-left:20px; padding-right:20px;
}
.wrap{max-width:780px; margin:0 auto; padding-block:52px 96px}
h1,h2,h3,.rot,th,.n{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif}
h1{font-size:clamp(2rem,5.6vw,2.8rem); line-height:1.06; font-weight:700; letter-spacing:-.02em; color:var(--tinta); margin:0; text-wrap:balance}
h2{font-size:1.28rem; font-weight:600; letter-spacing:-.006em; color:var(--tinta); margin:0 0 4px; text-wrap:balance}
h3{font-size:.98rem; font-weight:600; color:var(--tinta); margin:0 0 4px}
p{margin:0}
strong{color:var(--tinta); font-weight:600}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.rot{font-size:.68rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--fraco)}
.carregando{color:var(--fraco); padding-block:60px}

/* cabeçalho */
.topo{display:flex; flex-direction:column; gap:16px; padding-bottom:24px; border-bottom:2px solid var(--tinta)}
.selo{display:flex; flex-wrap:wrap; gap:9px; align-items:baseline}
.selo .sep{color:var(--linha)}
.abre{font-size:1.14rem; line-height:1.45; color:var(--tinta); max-width:58ch; border-left:3px solid var(--acento); padding-left:15px}

section{padding-top:42px; display:flex; flex-direction:column; gap:15px}
.cab{display:flex; flex-direction:column; gap:2px}
.lede{max-width:66ch}
.col{display:flex; flex-direction:column; gap:13px; max-width:68ch}

/* escada */
.escada{display:flex; flex-direction:column}
.deg{display:grid; grid-template-columns:auto 1fr; gap:15px; padding:13px 0; border-bottom:1px solid var(--linha)}
.deg:last-child{border-bottom:none}
.deg .n{font-size:.8rem; font-weight:700; color:var(--fraco); font-variant-numeric:tabular-nums; padding-top:4px; min-width:1.5em}
.deg.agora{background:var(--acento-fraco); margin-inline:-14px; padding-inline:14px; border-radius:3px; border-bottom-color:transparent}
.deg.agora .n{color:var(--acento)}
.marca{font-family:"IBM Plex Sans",sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--acento); padding:2px 7px; border-radius:2px; margin-left:9px; vertical-align:2px}
.deg.feito .n::after{content:" ✓"; color:var(--acento)}
.deg p{font-size:.93rem; color:var(--fraco)}
.deg.agora p{color:var(--texto)}

/* setores */
.setores{display:flex; flex-direction:column; gap:11px}
.setor{background:var(--folha); border:1px solid var(--linha); border-radius:3px; box-shadow:var(--sombra); padding:15px 17px; display:flex; flex-direction:column; gap:9px}
.setor .lin1{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; justify-content:space-between}
.setor .nome{font-family:"IBM Plex Sans",sans-serif; font-weight:600; font-size:1.04rem; color:var(--tinta)}
.pastilhas{display:flex; flex-wrap:wrap; gap:6px}
.pas{font-family:"IBM Plex Sans",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:2px; background:var(--baixo); color:var(--fraco); white-space:nowrap}
.pas.forma{background:var(--acento-fraco); color:var(--acento)}
.pas.falta{background:var(--falta-fraco); color:var(--falta)}
.setor .grade{display:flex; flex-wrap:wrap; gap:4px 26px}
.setor .par{display:flex; flex-direction:column; gap:0}
.setor .par .v{font-family:"IBM Plex Sans",sans-serif; font-size:.92rem; font-weight:600; color:var(--tinta)}
.setor .par .v.vazio{color:var(--falta); font-weight:700}
.setor .obs{font-size:.9rem; color:var(--fraco); line-height:1.5}
.setor .liga{font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--acento)}
.fontes{display:flex; flex-wrap:wrap; gap:6px}
.fonte{font-family:"IBM Plex Mono",monospace; font-size:.78rem; padding:2px 8px; border:1px dashed var(--linha); border-radius:2px; color:var(--fraco)}

/* regras */
.regras{display:flex; flex-direction:column}
.regra{padding:15px 0; border-bottom:1px solid var(--linha); display:flex; flex-direction:column; gap:5px}
.regra:last-child{border-bottom:none}
.regra .pq{font-size:.9rem; color:var(--fraco); font-style:italic}
.regra p{font-size:.96rem}

/* portão */
.portao{background:var(--acento-fraco); border:1px solid var(--acento); border-radius:3px; padding:16px 18px; display:flex; flex-direction:column; gap:7px}
.portao .rota{font-family:"IBM Plex Mono",monospace; font-size:.86rem; color:var(--acento); font-weight:600}
.portao .pq{font-size:.9rem; color:var(--texto)}

/* falta */
.faltas{display:flex; flex-direction:column; gap:10px}
.falta-item{background:var(--folha); border:1px solid var(--linha); border-left:3px solid var(--falta); border-radius:0 3px 3px 0; padding:13px 16px; display:flex; flex-direction:column; gap:3px; box-shadow:var(--sombra)}
.falta-item .quem{font-family:"IBM Plex Sans",sans-serif; font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--falta)}
.falta-item .pq{font-size:.9rem; color:var(--fraco)}
.aviso{background:var(--falta-fraco); border-left:3px solid var(--falta); border-radius:0 3px 3px 0; padding:14px 17px; font-size:.95rem; max-width:66ch}

/* papéis */
.papeis{display:flex; flex-direction:column; gap:0}
.papel{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--linha)}
.papel:last-child{border-bottom:none}
.papel .q{display:flex; flex-direction:column; gap:1px}
.papel .q .t{font-family:"IBM Plex Sans",sans-serif; font-weight:600; color:var(--tinta); font-size:.96rem}
.papel .q .quem{font-size:.86rem; color:var(--fraco)}
.papel p{font-size:.93rem}

/* assinatura */
.assina{margin-top:46px; padding-top:22px; border-top:2px solid var(--tinta); display:flex; flex-direction:column; gap:18px}
.linhas{display:flex; flex-wrap:wrap; gap:26px}
.linha-ass{flex:1 1 220px; display:flex; flex-direction:column; gap:5px}
.linha-ass .risco{border-bottom:1px solid var(--tinta); height:34px}
.linha-ass .quem{font-family:"IBM Plex Sans",sans-serif; font-size:.86rem; color:var(--tinta); font-weight:600}
.linha-ass .cargo{font-size:.8rem; color:var(--fraco)}
footer{margin-top:40px; padding-top:16px; border-top:1px solid var(--linha); font-size:.83rem; color:var(--fraco); display:flex; flex-direction:column; gap:5px}

@media (max-width:520px){
  body{font-size:16px}
  .papel{grid-template-columns:1fr; gap:3px}
  .setor .lin1{flex-direction:column; align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}