:root {
    --bg: #05070a;
    --bg-2: #0a0d12;
    --ink: #d8d2bf;
    --ink-dim: #8a8470;
    --ink-faint: #4a4636;
    --gold: #c9a558;
    --gold-deep: #8a6f30;
    --gold-glow: #e6c373;
    --green: #7fdb87;
    --green-dim: #3a6b3f;
    --green-deep: #1a3a1d;
    --rule: rgba(201, 165, 88, 0.18);
    --rule-strong: rgba(201, 165, 88, 0.45);
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: hidden;
}
body {
    min-height: 100vh;
    position: relative;
}
::selection {
    background: var(--gold);
    color: #000;
}

/* ── EFFECT MODES ───────────────────────────── */
body[data-rain="off"] canvas#rain {
    display: none;
}
body[data-rain="soft"] canvas#rain {
    opacity: 0.42;
}
body[data-frame="off"] .frame,
body[data-frame="off"] .corner,
body[data-frame="off"] .hud {
    display: none;
}
body[data-godpos="left"] .backdrop .god {
    background-position: left center;
}
body[data-godpos="left"] .backdrop .vignette-left {
    background: linear-gradient(
        270deg,
        rgba(5, 7, 10, 0.96) 0%,
        rgba(5, 7, 10, 0.85) 28%,
        rgba(5, 7, 10, 0.45) 52%,
        rgba(5, 7, 10, 0) 78%
    );
}
body[data-godpos="center"] .backdrop .god {
    background-position: center center;
}
body[data-godpos="center"] .backdrop .vignette-left {
    background: radial-gradient(
        ellipse at center,
        rgba(5, 7, 10, 0) 30%,
        rgba(5, 7, 10, 0.85) 100%
    );
}
body[data-godopacity-set="true"] .backdrop .god {
    opacity: var(--god-opacity, 0.92) !important;
}

/* ── BACKDROP LAYERS ────────────────────────────── */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
}
.backdrop .god {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
}
.backdrop .god-layer {
    position: absolute;
    inset: 0;
    background-image: url("assets/background.png");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}
.backdrop .god-base {
    opacity: 0.96;
    z-index: 1;
}
.backdrop .god-r {
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0;
    filter: hue-rotate(-10deg) saturate(1.2) brightness(1.04);
    animation: glitch-r 11s steps(1, end) infinite;
}
.backdrop .god-g {
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0;
    filter: hue-rotate(60deg) saturate(1.1) brightness(1.04);
    animation: glitch-g 11s steps(1, end) infinite;
}
.backdrop .god-b {
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0;
    filter: hue-rotate(180deg) saturate(1.1) brightness(1.04);
    animation: glitch-b 11s steps(1, end) infinite;
}
.backdrop .god-slice {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: url("assets/background.png");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    clip-path: inset(46% 0 46% 0);
    opacity: 0;
    animation: glitch-slice 11s steps(1, end) infinite;
    mix-blend-mode: screen;
}
body[data-rain="off"] .backdrop .god-r,
body[data-rain="off"] .backdrop .god-g,
body[data-rain="off"] .backdrop .god-b,
body[data-rain="off"] .backdrop .god-slice {
    animation-play-state: paused;
    opacity: 0 !important;
    transform: none !important;
}
@keyframes glitch-r {
    0%,
    95.5%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    96% {
        opacity: 0.18;
        transform: translate(-3px, 0);
    }
    96.8% {
        opacity: 0.06;
        transform: translate(2px, 0);
    }
    97.6% {
        opacity: 0;
        transform: translate(0, 0);
    }
    98.6% {
        opacity: 0.14;
        transform: translate(-2px, 1px);
    }
    99.2% {
        opacity: 0;
    }
}
@keyframes glitch-g {
    0%,
    95.5%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    96% {
        opacity: 0.12;
        transform: translate(2px, 0);
    }
    96.8% {
        opacity: 0.05;
        transform: translate(-2px, 0);
    }
    97.6% {
        opacity: 0;
    }
    98.6% {
        opacity: 0.1;
        transform: translate(1px, 0);
    }
    99.2% {
        opacity: 0;
    }
}
@keyframes glitch-b {
    0%,
    95.5%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
    96% {
        opacity: 0.2;
        transform: translate(3px, 0);
    }
    96.8% {
        opacity: 0.08;
        transform: translate(-2px, 0);
    }
    97.6% {
        opacity: 0;
    }
    98.6% {
        opacity: 0.14;
        transform: translate(2px, -1px);
    }
    99.2% {
        opacity: 0;
    }
}
@keyframes glitch-slice {
    0%,
    95.5%,
    100% {
        opacity: 0;
        clip-path: inset(46% 0 46% 0);
        transform: translate(0, 0);
    }
    96% {
        opacity: 0.24;
        clip-path: inset(43% 0 52% 0);
        transform: translate(-4px, 0);
    }
    97.5% {
        opacity: 0;
    }
    98.2% {
        opacity: 0.16;
        clip-path: inset(60% 0 32% 0);
        transform: translate(2px, 0);
    }
    99% {
        opacity: 0;
    }
}

.oracle-line {
    font-family: "Cinzel", serif;
    font-style: italic;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
    color: var(--ink);
    max-width: 580px;
    letter-spacing: 0.015em;
    opacity: 0.92;
    animation: title-glitch 4s steps(1, end) infinite;
}
.oracle-line::first-letter {
    color: var(--gold);
}

.rain-toggle {
    position: fixed;
    right: 20px;
    bottom: 64px;
    z-index: 20;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 14, 0.55);
    border: 1px solid var(--rule);
    color: var(--ink-dim);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    padding: 0;
}
.rain-toggle:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: rgba(8, 10, 14, 0.8);
}
.rain-toggle svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}
.backdrop .vignette-left {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(5, 7, 10, 0.96) 0%,
        rgba(5, 7, 10, 0.85) 28%,
        rgba(5, 7, 10, 0.45) 52%,
        rgba(5, 7, 10, 0) 78%
    );
}
.backdrop .vignette-edges {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            120% 80% at 50% 50%,
            transparent 50%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.45) 0%,
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.7) 100%
        );
    pointer-events: none;
}
canvas#rain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.55;
    mix-blend-mode: screen;
}
.grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.6) 0 1px,
        transparent 1px 3px
    );
    mix-blend-mode: overlay;
}

/* ── FRAME / CHROME ─────────────────────────────── */
.frame {
    position: fixed;
    inset: 18px;
    z-index: 5;
    pointer-events: none;
    border: 1px solid var(--rule);
}
.frame::before,
.frame::after {
    content: "";
    position: absolute;
    background: var(--gold);
    opacity: 0.8;
}
.frame::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--rule-strong),
        transparent
    );
    opacity: 0.4;
}
.frame::after {
    display: none;
}
.corner {
    position: fixed;
    width: 22px;
    height: 22px;
    z-index: 6;
    pointer-events: none;
}
.corner.tl {
    top: 18px;
    left: 18px;
    border-top: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}
.corner.tr {
    top: 18px;
    right: 18px;
    border-top: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}
.corner.bl {
    bottom: 18px;
    left: 18px;
    border-bottom: 1px solid var(--gold);
    border-left: 1px solid var(--gold);
}
.corner.br {
    bottom: 18px;
    right: 18px;
    border-bottom: 1px solid var(--gold);
    border-right: 1px solid var(--gold);
}

/* ── TOP / BOTTOM HUD ───────────────────────────── */
.hud {
    position: fixed;
    left: 36px;
    right: 36px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.hud.top {
    top: 30px;
}
.hud.bot {
    bottom: 30px;
}
.hud .sep {
    flex: 1;
    min-width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--rule-strong), transparent);
}
.hud.bot .sep {
    background: linear-gradient(90deg, transparent, var(--rule-strong));
}
.hud .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hud .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px var(--green);
}
.hud .dot.gold {
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold-glow);
}
.hud .glyph {
    color: var(--gold);
    font-family: "Cinzel", serif;
    font-size: 11px;
    letter-spacing: 0.3em;
}

/* ── LAYOUT ──────────────────────────────────────── */
main {
    position: relative;
    z-index: 4;
    min-height: 100vh;
    width: min(1040px, calc(100vw - 128px));
    margin: 0 auto;
    padding: 90px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
}
@media (min-width: 641px) {
    main {
        padding-bottom: 170px;
    }
}
.stack {
    width: 100%;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ── HERO HEADER ────────────────────────────────── */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
}
.eyebrow .bar {
    width: 36px;
    height: 1px;
    background: var(--gold);
}
.eyebrow .gl {
    font-family: "Cinzel", serif;
    letter-spacing: 0.4em;
}

h1.title {
    font-family: "Cinzel", serif;
    font-weight: 600;
    font-size: clamp(44px, 6.4vw, 96px);
    line-height: 0.95;
    letter-spacing: 0.04em;
    color: var(--ink);
    text-shadow: 0 0 30px rgba(201, 165, 88, 0.15);
    display: flex;
    align-items: baseline;
    gap: 0.22em;
    flex-wrap: wrap;
}
@keyframes title-glitch {
    0%,
    88%,
    100% {
        text-shadow: 0 0 30px rgba(201, 165, 88, 0.15);
        transform: none;
        filter: none;
    }
    89% {
        text-shadow:
            -5px -2px 0 rgba(0, 229, 255, 0.75),
            5px 2px 0 rgba(255, 0, 255, 0.75),
            0 0 30px rgba(201, 165, 88, 0.15);
        transform: skewX(-1.5deg);
        filter: brightness(1.3);
    }
    90% {
        text-shadow:
            5px 1px 0 rgba(0, 229, 255, 0.75),
            -5px -1px 0 rgba(255, 0, 255, 0.75),
            0 0 30px rgba(201, 165, 88, 0.15);
        transform: skewX(1.5deg);
        filter: brightness(0.9);
    }
    91% {
        text-shadow: 0 0 30px rgba(201, 165, 88, 0.15);
        transform: none;
        filter: none;
    }
    95% {
        text-shadow:
            -2px 0 0 rgba(0, 229, 255, 0.5),
            0 0 30px rgba(201, 165, 88, 0.15);
        transform: skewX(-0.5deg);
    }
    96% {
        text-shadow: 0 0 30px rgba(201, 165, 88, 0.15);
        transform: none;
    }
}
h1.title .name-first {
    background: linear-gradient(
        180deg,
        #f3e7c4 0%,
        var(--gold) 55%,
        var(--gold-deep) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
h1.title .name-last {
    color: var(--ink);
    opacity: 0.92;
    font-style: italic;
    font-weight: 400;
}

.byline {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    max-width: 700px;
    color: var(--ink-dim);
}
.byline b {
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.28em;
}
.credential {
    max-width: 620px;
    font-family: "Cinzel", serif;
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
    letter-spacing: 0.05em;
    color: var(--ink);
    opacity: 0.9;
}
.credential b {
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.1em;
}

/* ── TERMINAL (blended, no window) ───────────────── */
.terminal {
    position: relative;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 4px 0 0;
}
.term-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0 10px;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.term-meta .ttl {
    font-family: "Cinzel", serif;
    color: var(--gold);
    letter-spacing: 0.4em;
    font-size: 11px;
}
.term-meta .grow {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--rule-strong), transparent);
}
.term-meta .clk {
    font-variant-numeric: tabular-nums;
    color: var(--gold-deep);
}

.term-body {
    padding: 10px 0 6px;
    min-height: 280px;
    max-height: 360px;
    overflow-y: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    line-height: 1.62;
    color: var(--green);
    text-shadow: 0 0 6px rgba(127, 219, 135, 0.35);
    scrollbar-width: thin;
    scrollbar-color: var(--green-dim) transparent;
}
.term-body::-webkit-scrollbar {
    width: 6px;
}
.term-body::-webkit-scrollbar-thumb {
    background: var(--green-dim);
}

.line {
    white-space: pre-wrap;
    word-break: break-word;
}
.line.user {
    color: var(--ink);
}
.line.user .prompt {
    color: var(--gold);
    margin-right: 8px;
}
.line.sys {
    color: var(--ink-dim);
    text-shadow: none;
}
.line.warn {
    color: var(--gold-glow);
    text-shadow: 0 0 6px rgba(201, 165, 88, 0.35);
}
.line.dim {
    color: var(--ink-faint);
    text-shadow: none;
}
.line a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed var(--gold-deep);
}
.line a:hover {
    color: var(--gold-glow);
    border-bottom-color: var(--gold-glow);
}
.line .k {
    color: var(--gold);
    text-shadow: 0 0 4px rgba(201, 165, 88, 0.25);
}

.term-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 12px;
    border-top: 1px solid var(--rule);
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}
.term-input-row .prompt {
    color: var(--gold);
    user-select: none;
}
.term-input-row input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--green);
    font: inherit;
    text-shadow: 0 0 6px rgba(127, 219, 135, 0.35);
    caret-color: var(--green);
}
.caret {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--green);
    vertical-align: -2px;
    margin-left: 2px;
    animation: blink 1s steps(2) infinite;
    box-shadow: 0 0 6px var(--green);
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

.hint-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.chip {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-dim);
    border: 1px solid var(--rule);
    padding: 6px 10px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}
.chip:hover {
    color: var(--gold);
    border-color: var(--rule-strong);
    background: rgba(201, 165, 88, 0.05);
}
.chip .k {
    color: var(--gold);
}

/* ── RIGHT COLUMN: SIGIL ────────────────────────── */
.sigil-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    height: 100%;
}
.sigil {
    position: relative;
    width: 360px;
    height: 360px;
    display: grid;
    place-items: center;
}
.sigil svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.sigil .ring {
    animation: spin 80s linear infinite;
    transform-origin: center;
}
.sigil .ring.rev {
    animation: spin 120s linear infinite reverse;
}
.sigil .core {
    position: relative;
    z-index: 2;
    font-family: "Cinzel", serif;
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(201, 165, 88, 0.5);
    text-align: center;
    line-height: 1.7;
}
.sigil .core small {
    display: block;
    color: var(--green);
    font-style: normal;
    letter-spacing: 0.5em;
    font-size: 9px;
    margin-top: 4px;
    text-shadow: 0 0 6px rgba(127, 219, 135, 0.5);
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── SOCIAL (icon only) ──────────────────────────── */
.socials {
    display: flex;
    gap: 14px;
    align-items: center;
}
.soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--ink);
    text-decoration: none;
    border: 1px solid var(--rule);
    background: rgba(8, 10, 14, 0.4);
    transition: all 0.25s ease;
}
.soc:hover {
    color: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 22px rgba(201, 165, 88, 0.18);
}
.soc svg {
    width: 18px;
    height: 18px;
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1100px) {
    main {
        width: min(920px, calc(100vw - 72px));
        padding: 80px 0;
        gap: 28px;
    }
    .backdrop .god {
        background-position: 80% center;
        opacity: 0.5;
    }
    .backdrop .vignette-left {
        background: linear-gradient(
            180deg,
            rgba(5, 7, 10, 0.55) 0%,
            rgba(5, 7, 10, 0.88) 100%
        );
    }
}
@media (max-width: 640px) {
    .frame,
    .corner {
        inset: 10px;
    }
    .corner {
        display: none;
    }
    .hud {
        display: none;
    }
    canvas#rain,
    .rain-toggle {
        display: none !important;
    }
    .backdrop .god-r,
    .backdrop .god-g,
    .backdrop .god-b,
    .backdrop .god-slice {
        animation: none !important;
        opacity: 0 !important;
        transform: none !important;
    }
    main {
        width: calc(100vw - 44px);
        padding: 76px 0;
    }
    h1.title {
        font-size: 13vw;
        letter-spacing: 0.03em;
    }
    .stack {
        gap: 24px;
    }
    .byline {
        font-size: 10px;
        letter-spacing: 0.2em;
    }
    .byline b {
        letter-spacing: 0.18em;
    }
    .credential {
        font-size: 14px;
        letter-spacing: 0.03em;
    }
    .term-body {
        min-height: 220px;
        max-height: 300px;
        font-size: 12px;
    }
    .term-input-row {
        font-size: 12px;
    }
    .chip {
        font-size: 9px;
        padding: 5px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
    canvas#rain,
    .rain-toggle {
        display: none !important;
    }
    .backdrop .god-r,
    .backdrop .god-g,
    .backdrop .god-b,
    .backdrop .god-slice {
        opacity: 0 !important;
        transform: none !important;
    }
}