@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    color-scheme: dark;
    --bg: #07090d;
    --ink: #f4f1ea;
    --muted: #a7adb7;
    --line: rgba(244, 241, 234, .14);
    --gold: #d6b36a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    background:
        radial-gradient(circle at 76% 8%, rgba(214, 179, 106, .16), transparent 30rem),
        radial-gradient(circle at 18% 80%, rgba(159, 176, 196, .12), transparent 30rem),
        var(--bg);
}

body::before {
    position: fixed;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 72px 72px;
}

.nav-shell {
    border-bottom: 1px solid var(--line);
    background: rgba(7, 9, 13, .76);
    backdrop-filter: blur(24px);
}

.nav-link {
    color: rgba(244, 241, 234, .72);
    transition: color 180ms ease;
}

.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--ink); }

.viewer-shell {
    aspect-ratio: 7 / 5;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(18, 23, 31, .82), rgba(9, 12, 17, .58));
    box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

.realization-layout {
    display: grid;
    max-width: 980px;
    gap: 1.5rem;
    padding: 2.5rem 0;
}

.realization-media {
    display: grid;
    gap: 1.5rem;
}

.photo-shell {
    position: relative;
    aspect-ratio: 7 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0b0e13;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}

.photo-shell::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.realization-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.harley-photo { transform: scale(.86); }

#realization-canvas,
#compressor-canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
}

#realization-canvas:active,
#compressor-canvas:active { cursor: grabbing; }

.meta-row { border-top: 1px solid var(--line); }