html{scroll-behavior:smooth;scroll-padding-top:96px}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#050505;color:#FFFFFF;font-family:Sora,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#FFFFFF;text-decoration:none}a:hover{color:#FFE100}
button{font-family:inherit}
input[type=range]{width:100%;accent-color:#FFCC00}
@keyframes cmdIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cmdBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes cmdTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* Abas do simulador — vinham como objeto de estilo no componente React. */
.sim-tab{flex:1;border:none;background:transparent;color:rgba(255,255,255,0.65);
  font-family:Archivo,sans-serif;font-weight:800;font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;padding:12px 10px;cursor:pointer;transition:all 200ms}
.sim-tab:focus-visible{outline:2px solid #FFE100;outline-offset:-2px}

/* Hover: vinha nos atributos style-hover do Claude Design. */
.h1:hover{color:#FFE100;border-bottom-color:#FFE100}
.h2:hover{background:#FFE100;color:#171717}
.h3:hover{border-color:#FFE100}
.h4:hover{filter:brightness(1.1);color:#171717}
.h5:hover{border-color:#F0457B;color:#fff}
.h6:hover{filter:brightness(1.1)}
.h7:hover{color:#FF8095}
.h8:hover{color:#5DE3A5}
.h9:hover{filter:brightness(1.1);color:#fff}
.h10:hover{border-color:#7B3FF2;color:#fff}
.h11:hover{color:#B99BFF}
.h12:hover{filter:brightness(1.1);color:#141414}
.h13:hover{filter:brightness(1.12)}
.h14:hover{color:#FFE100}