* { box-sizing:border-box; }
.page { --paper:#f7f3e9; --ink:#272722; --pencil:#827e73; --red:#974b3d; position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:20px 0; overflow:hidden;
    background-color:#291013;
    background-image:radial-gradient(ellipse 39% 72% at 50% 43%,rgba(238,219,204,.48) 0%,rgba(227,204,191,.28) 58%,rgba(227,204,191,0) 100%),url('/assets/crimson-clouds.webp');
    background-size:cover; background-position:center; }
  .blood-layer { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:3; }
  @media(prefers-reduced-motion:reduce) { .blood-layer { display:none; } }
  header.banner { width:min(900px,96%); margin:0 auto; padding:0; }
  .metal-banner { display:block; width:100%; height:auto; max-height:345px; overflow:visible; }
  .eyebrow { font:11px/1.5 ui-monospace,monospace; letter-spacing:3px; text-transform:uppercase; color:var(--pencil); }
.kick-divider { --pedal-height:390px; position:relative; width:100%; height:calc(var(--pedal-height) + 88px); margin-top:35px; isolation:isolate; }
  .rules { position:absolute; left:0; top:calc(var(--pedal-height) + 8px); width:100%; height:76px; z-index:-1; overflow:visible; }
  .rules path { fill:none; stroke:var(--ink); stroke-width:3.3; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.9; }
  .pedals { display:block; width:min(800px,100%); height:var(--pedal-height); margin:auto; overflow:visible; mix-blend-mode:multiply; }
  .tagline { position:absolute; top:calc(var(--pedal-height) + 12px); left:0; width:100%; height:68px; margin:0; padding:0 24px; display:flex; align-items:center; justify-content:center; text-align:center; text-wrap:balance; font:italic 400 clamp(16px,1.65vw,21px)/1.45 Georgia,serif; color:#fff0dc; text-shadow:0 1px 2px #160709,0 2px 7px rgba(15,3,6,.8); background:linear-gradient(90deg,transparent 0%,rgba(24,5,10,.7) 24%,rgba(24,5,10,.78) 50%,rgba(24,5,10,.7) 76%,transparent 100%); }
  .pedal-hit { cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
  .hit-area { fill:transparent; stroke:transparent; stroke-width:2; }
  .pedal-hit:focus-visible .hit-area { stroke:var(--red); stroke-dasharray:3 7; }
  .pedal-hit:hover .hover-mark { opacity:1; }
  .hover-mark { opacity:0; transition:opacity .15s; stroke:var(--red); fill:none; }
  .hint { text-align:center; margin:12px 20px 0; font:12px/1.8 ui-monospace,monospace; color:#ecdbcc; text-shadow:0 1px 4px #160709; }
  .page kbd { font:inherit; color:inherit; border-bottom:1px solid #b9a195; padding:1px 3px; }
  .note { text-align:center; font:italic 12px/1.5 Georgia,serif; color:#8b8579; margin:24px 20px 0; }
  .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  @media(max-width:520px) { .page { --paper:#f7f3e9; --ink:#272722; --pencil:#827e73; --red:#974b3d; padding:36px 0; } .kick-divider { --pedal-height:300px; margin-top:28px; } .hint { font-size:11px; } }