@font-face { font-family: "Space Grotesk"; src: url(../../assets/fonts/space-grotesk-v22-latin_latin-ext-regular.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Space Grotesk"; src: url(../../assets/fonts/space-grotesk-v22-latin_latin-ext-500.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: "Space Grotesk"; src: url(../../assets/fonts/space-grotesk-v22-latin_latin-ext-700.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "JetBrains Mono"; src: url(../../assets/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "JetBrains Mono"; src: url(../../assets/fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Caveat"; src: url(../../assets/fonts/caveat-v23-latin_latin-ext-regular.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Caveat"; src: url(../../assets/fonts/caveat-v23-latin_latin-ext-700.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Bebas Neue"; src: url(../../assets/fonts/bebas-neue-v16-latin_latin-ext-regular.woff2) format("woff2"); font-weight: 400; }

:root {
  --amber: #ffb35c; --cyan: #38e1ff; --pink: #ff3d7f; --green: #3ddc84; --red: #ff5a4e; --paper: #f4efe3;
  --ink: #15110e; --panel: rgba(18, 14, 12, 0.82); --panel2: rgba(30, 24, 20, 0.92); --line: rgba(255, 220, 180, 0.14);
  --txt: #f3ead9; --dim: #b9a991; --font: "Space Grotesk", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0807; color: var(--txt); font-family: var(--font); user-select: none; -webkit-user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
#ui > .layer, #ui > .modal-back.passthru { pointer-events: none; }
#ui > .layer > * { pointer-events: auto; }
#ui > .layer > .hud-top { pointer-events: none; }
#ui > .layer > .hud-top > * { pointer-events: auto; }
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }

#boot { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 40%, #2a1c12, #0b0807 70%); transition: opacity .6s; }
#boot.gone { opacity: 0; pointer-events: none; }
.boot-logo { font-family: "Bebas Neue", var(--font); font-size: clamp(64px, 12vw, 150px); letter-spacing: .06em; color: #fff; text-shadow: 0 0 18px var(--pink), 0 0 42px var(--pink); }
.boot-bar { width: min(420px, 70vw); height: 6px; background: rgba(255,255,255,.08); border-radius: 6px; overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--amber), var(--pink)); transition: width .25s; }
.boot-tip { font-family: var(--mono); font-size: 13px; color: var(--dim); }

/* visual técnico (anat.js): painéis de papel com fio fino, no espírito das figuras do anatomy */
body.tecnico { --panel: rgba(250,249,246,.94); --panel2: rgba(250,249,246,.97); --line: rgba(40,44,50,.26); --txt: #24272c; --dim: #6b6f76; background: #f4f3ef; }
body.tecnico .btn, body.tecnico .tip, body.tecnico .toast, body.tecnico .toolbar, body.tecnico .chip, body.tecnico .side, body.tecnico .mcard,
body.tecnico .keyhelp, body.tecnico .test-panel, body.tecnico .modal { background: rgba(250,249,246,.94); color: var(--txt); border: 1px solid rgba(40,44,50,.5); box-shadow: 0 2px 0 rgba(40,44,50,.12); backdrop-filter: none; }
body.tecnico .btn.primary { background: #ffb35c; color: #2a1606; border-color: #2a1606; }
body.tecnico .btn.pink { background: #ff5a92; color: #fff; border-color: #6d1530; }
body.tecnico .btn.cyan { background: #4ce6ff; color: #052630; border-color: #052630; }
body.tecnico .btn.ghost { background: rgba(250,249,246,.8); }
body.tecnico .mcard:hover { background: #fff; border-color: #24272c; }
body.tecnico .mcard.hot { background: linear-gradient(90deg, rgba(255,61,127,.14), rgba(250,249,246,.94)); border-color: rgba(200,30,90,.6); }
body.tecnico .tool { color: var(--txt); background: rgba(0,0,0,.03); }
body.tecnico .tool:hover { background: rgba(0,0,0,.07); }
body.tecnico .tool.on { color: #2a1606; background: rgba(255,179,92,.3); box-shadow: none; }
body.tecnico .tool .lbl { background: #24272c; color: #fff; }
body.tecnico .card, body.tecnico .up, body.tecnico .seg, body.tecnico .scrap-row, body.tecnico .learn { background: rgba(0,0,0,.035); }
body.tecnico .bar { background: rgba(0,0,0,.08); }
body.tecnico .modal-back { background: rgba(244,243,239,.45); }
body.tecnico #boot { background: radial-gradient(circle at 50% 40%, #ffffff, #e9e7e1 70%); }