@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --ink: #141110;
  --paper: #F2ECE1;
  --amber: #D98A3D;
  --amber-deep: #8A4A1E;
  --line: rgba(242,236,225,.18);
  --mono: 'JetBrains Mono', monospace;
  --serif: 'Newsreader', serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:1440px;height:900px;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--serif);}
.stage{position:relative;width:1440px;height:900px;background:var(--ink);overflow:hidden;}

/* textura de grão sutil, só CSS, sem asset externo */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--amber);}
.doc{background:var(--ink);border:1px solid var(--line);}
.doc-cap{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:rgba(242,236,225,.6);padding:6px 10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,17,16,.55);border:1px solid rgba(242,236,225,.5);display:grid;place-items:center;}
.play svg{width:16px;height:16px;fill:var(--paper);margin-left:2px;}