:root {
    --bg: #1c1916;
    --bg-2: #2a241f;
    --a1: #fb923c;
    --a3: #fbbf24;
    --text: #f5ede4;
    --mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
    /* griglia tecnica appena accennata sopra il gradiente */
    background:
        linear-gradient(rgba(251, 146, 60, .035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(251, 146, 60, .035) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(ellipse at 50% 40%, var(--bg-2) 0%, var(--bg) 70%);
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* bordi scuri: il centro respira, gli angoli spariscono */
.vignette {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 8, 6, .65) 100%);
}

.mark {
    position: fixed; inset: 0; display: grid; place-items: center;
    pointer-events: none; user-select: none;
}

.mark h1 {
    font-weight: 600;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    letter-spacing: .04em;
    padding: .5em 1em;
    border-radius: 12px;
    background: rgba(28, 25, 22, .55);
    border: 1px solid rgba(251, 146, 60, .18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 60px rgba(251, 146, 60, .08);
}

.prompt { color: var(--a1); margin-right: .35em; }

.caret {
    display: inline-block; width: .55em; height: 1.05em; margin-left: .12em;
    vertical-align: -.15em; background: var(--a3);
    animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .caret { animation: none; }
}