:root{
  --bg:#050505; --line:#1E1E1E; --bar:#0B0B0B;
  --text:#F2ECE4; --muted:#A39A90; --soft:#CFC6BB;
  --pgm:#FF3B30; --pvw:#30D158;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace}
a{color:var(--text);text-decoration:none}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-.01em}
.dot{width:10px;height:10px;border-radius:50%;background:var(--pgm);box-shadow:0 0 12px var(--pgm)}
.tc{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.tc small{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.tc span{font-size:18px;font-weight:500;letter-spacing:.04em;background:var(--bar);border:1px solid var(--line);padding:6px 12px;border-radius:4px}

/* Seletor HUMANO | MÁQUINA no header (alterna entre o multiview e o índice em texto) */
/* A seleção é um bloco claro que desliza: para o lado no desktop, para baixo no celular */
.mode{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-left:auto;padding:2px;border:1px solid var(--line);border-radius:4px;background:var(--bar)}
.mode::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);background:var(--text);border-radius:3px;transition:transform .18s ease}
.mode:has(a:last-child[aria-current="page"])::before{transform:translateX(100%)}
.mode a{position:relative;display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border-radius:3px;font-size:11px;letter-spacing:.14em;color:var(--muted);transition:color .18s ease}
.mode a:hover{color:var(--text)}
.mode a[aria-current="page"]{color:#000}
.mode a:focus-visible{outline:2px solid var(--text);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mode::before,.mode a{transition:none}}

/* ---- Multiview ---- */
/* Header + monitores presos no topo; a grade de SRCs rola por baixo */
.deck{position:sticky;top:var(--crt-gap,0px);z-index:10;background:var(--bg);box-shadow:0 10px 18px -10px #000}
.top{display:flex}
/* Telas muito baixas (celular deitado): monitores voltam a rolar para sobrar espaço para as SRCs */
@media (max-height:560px){.deck{position:static}}
.mon{flex:1 1 0;min-width:0;display:flex;flex-direction:column;background:#000;border:3px solid}
.mon.pvw{border-color:var(--pvw)}
.mon.pgm{border-color:var(--pgm);box-shadow:0 0 60px -10px rgba(255,59,48,.4)}
.screen{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.screen img,.screen iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.screen .ph{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(22px,2.6vw,40px);letter-spacing:-.02em}
.screen .ph-src{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.screen .sound{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:rgba(11,11,11,.85);color:var(--text);border:1px solid #3A3A3A;border-radius:4px;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.14em;cursor:pointer}
.screen .sound[hidden]{display:none}
.screen .sound:hover{border-color:var(--text)}
.screen .sound:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.screen .sound svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.umd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;background:var(--bar);font-size:13px;letter-spacing:.12em}
.umd .tag{color:#000;font-weight:500;padding:3px 10px;border-radius:3px}
.pvw .tag{background:var(--pvw)} .pgm .tag{background:var(--pgm)}
.umd .name{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:76px} /* respiro para o botão TV não cobrir a última linha */
.src{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;width:100%;background:#000;border:1px solid var(--line);min-width:0}
.src:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.src .thumb{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(10px,1.3vw,18px);color:var(--soft);overflow:hidden}
.src .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.src .bar{display:flex;justify-content:space-between;align-items:center;gap:8px;height:26px;padding:0 10px;background:var(--bar);font-size:clamp(8px,.8vw,11px);letter-spacing:.12em;color:var(--muted)}
.src .tally{color:#000;padding:2px 6px;border-radius:3px;line-height:1}
.src .label{display:flex;align-items:baseline;gap:10px;min-width:0}
.src .label .id{flex:none}
.src .label .title{color:var(--soft);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src .tally{flex:none}
.src .tally:empty{display:none}
.src .frame{position:absolute;inset:0;pointer-events:none;border:3px solid transparent}
.src.is-pvw .frame{border-color:var(--pvw)} .src.is-pvw .tally{background:var(--pvw)}
.src.is-pgm .frame{border-color:var(--pgm)} .src.is-pgm .tally{background:var(--pgm)}

/* Celular: PGM em cima ocupando a largura, PVW escondido (não há hover), SRCs em 2 colunas */
@media (max-width:720px){
  header{padding:14px 16px}
  .tc span{font-size:14px;padding:4px 8px}
  .top{flex-direction:column}
  .mon.pvw{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .src .thumb{font-size:14px}
  .src .bar{font-size:10px;height:30px}
}

/* ---- Página simples (404 e futuras) ---- */
.page{max-width:720px;margin:0 auto;padding:96px 24px;display:flex;flex-direction:column;gap:20px}
.page h1{margin:0;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(32px,6vw,56px);letter-spacing:-.02em}
.page p{margin:0;color:var(--soft);line-height:1.6}
.page a.btn{align-self:flex-start;border:1px solid var(--line);background:var(--bar);padding:10px 16px;border-radius:4px;letter-spacing:.12em;font-size:13px}
.page a.btn:hover{border-color:var(--text)}

/* ---- Índice de máquina (maquina.html): tudo em texto mono, caixa alta ---- */
.mx{max-width:900px;margin:0 auto;padding:48px 24px 96px;text-transform:uppercase;font-size:14px;line-height:1.75;letter-spacing:.04em}
.mx a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mx a:hover{color:var(--pgm)}
.mx-logo{
  margin:0 0 32px;font-family:'Silkscreen',monospace;font-weight:700;font-size:clamp(34px,8.4vw,84px);line-height:1;letter-spacing:.02em;color:var(--pgm);
  text-shadow:3px 3px 0 var(--bg),4px 4px 0 var(--pgm),7px 7px 0 var(--bg),8px 8px 0 rgba(255,59,48,.55);
}
.mx-nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:32px}
.mx-nav a{padding:2px 4px;margin:0 -4px}
.mx-head{margin:0 0 20px;color:var(--text)}
.mx-note{margin:0 0 40px;color:var(--muted)}
.mx section{margin-bottom:40px}
.mx-rule{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:inherit;color:var(--muted)}
.mx-rule::before{content:"";width:24px;border-top:1px solid var(--pgm)}
.mx-rule::after{content:"";flex:1;border-top:1px solid var(--pgm)}
.mx p{margin:0 0 20px}
/* Pares chave ..... valor */
.mx-kv{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:6px 14px;margin:0 0 24px}
.mx-kv dt{display:flex;gap:8px;align-self:start;color:var(--muted)} /* fica na altura da 1ª linha, mesmo com valor longo */
.mx-kv dt::after{content:"";flex:1;border-bottom:2px dotted #4A4A4A;margin-bottom:.55em}
.mx-kv dd{margin:0;color:var(--text)}
/* Lista de projetos: SRC ..... nome + link */
.mx-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mx-list li{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:14px}
.mx-list .k{display:flex;gap:8px;align-self:start;color:var(--muted)}
.mx-list .k::after{content:"";flex:1;border-bottom:2px dotted #4A4A4A;margin-bottom:.55em}
.mx-list .v{display:flex;flex-direction:column;min-width:0;color:var(--text)}
.mx-list .v a{color:var(--muted);text-transform:none;overflow-wrap:anywhere}
@media (max-width:720px){
  .mx{padding:32px 16px 96px;font-size:13px}
  .mx-kv,.mx-list li{grid-template-columns:1fr;gap:0 14px}
  .mx-kv dd{margin-bottom:10px}
  .mx-kv dt::after,.mx-list .k::after{display:none}
  .mode a{padding:0 8px;font-size:10px}
  .tc small{display:none}
}
/* Celular estreito: o timecode sai para o nome e o seletor caberem numa linha */
/* Celular: HUMANO em cima de MÁQUINA (a seleção desce e sobe) e header mais justo para o timecode caber */
@media (max-width:480px){
  header{gap:10px;padding:12px}
  .brand{font-size:16px;gap:8px}
  .tc span{font-size:13px;padding:4px 6px}
  .mode{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .mode::before{right:2px;bottom:auto;width:auto;height:calc(50% - 2px)}
  .mode:has(a:last-child[aria-current="page"])::before{transform:translateY(100%)}
  .mode a{min-height:18px;padding:0 8px;font-size:10px;letter-spacing:.12em}
}