:root { --tinta:#18202e; --papel:#f3f4f2; --acento:#ad430a; }
  html, body { margin:0; height:100%; background:#0b0f16; color:#e7ebf0; font: 15px/1.4 system-ui, "Segoe UI", sans-serif; overflow:hidden; }
  canvas { display:block; }
  #inicio { position:fixed; inset:0; display:grid; place-items:center; background:rgba(11,15,22,.86); z-index:5; text-align:center; padding:24px; }
  #inicio .caja { max-width:460px; background:#141b26; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:28px 26px; }
  #inicio h1 { margin:0 0 8px; font-size:1.5rem; }
  #inicio p { margin:0 0 14px; color:#b7c0cc; }
  #inicio kbd { background:#1f2937; border-radius:4px; padding:2px 6px; font-family:inherit; }
  button { cursor:pointer; border:0; border-radius:999px; padding:12px 22px; font:600 1rem system-ui, sans-serif; background:var(--acento); color:#fff; }
  button:active { transform:scale(.97); }
  #hud { position:fixed; left:14px; bottom:14px; z-index:3; display:flex; flex-wrap:wrap; gap:8px; max-width:calc(100vw - 28px); }
  #hud button { padding:9px 14px; font-size:.9rem; background:rgba(20,27,38,.85); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px); }
  #hud button[aria-pressed="true"] { background:var(--acento); border-color:var(--acento); }
  #marca { position:fixed; top:12px; left:14px; z-index:3; font-weight:700; letter-spacing:.01em; text-shadow:0 1px 2px rgba(0,0,0,.6); }
  #marca small { font-weight:500; opacity:.8; margin-left:8px; }
  #mira { position:fixed; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:#fff; opacity:.7; z-index:2; pointer-events:none; }
  #cargando { position:fixed; right:14px; top:12px; z-index:3; font-size:.85rem; opacity:.8; }
  #joy { position:fixed; left:24px; bottom:84px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); z-index:3; display:none; touch-action:none; }
  #joy i { position:absolute; left:40px; top:40px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.55); }
  @media (pointer:coarse) { #joy { display:block; } #mira { display:none; } }