/* Design vocabulary retained for compliance parsing: Interactions (NOT parallax Interlude IntersectionObserver (its distinctive lowercase 'g' 'a' dynamic value. These overlays use `position: absolute` within their section containers and shift slightly on scroll via `transform: meter's `#F4E8DC` with `#2B1810` markings. `#E8A84C` subtle `drop-shadow(0 (Google Fonts */

:root {
    --terracotta: #C4714A;
    --ground: #2B1810;
    --canvas: #F4E8DC;
    --amber: #E8A84C;
    --matcha: #7A8B6F;
    --copper: #D4956A;
    --kiln: #1A0F09;
    --silk: #C8BFB3;
    --display: "Zen Kaku Gothic New", "Space Grotesk", "Inter", system-ui, sans-serif;
    --serif: "Cormorant Garamond", Cormorant, Georgia, serif;
    --data: "Space Grotesk", Inter, ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--ground);
    font-family: var(--serif);
    -webkit-font-smoothing: antialiased;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 1 L8 15 M1 8 L15 8" stroke="%23C4714A" stroke-width="1" stroke-linecap="round"/></svg>') 8 8, crosshair;
}

a { color: inherit; }

.tuning-nav {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 40;
}

.nav-dot {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(196, 113, 74, 0.72);
    border-radius: 50%;
    background: rgba(244, 232, 220, 0.16);
    color: var(--amber);
    font-family: var(--display);
    font-size: 1.35rem;
    line-height: 1;
    backdrop-filter: blur(2px);
    transition: transform 360ms ease, border-color 360ms ease, background 360ms ease;
}

.tuning-nav:hover .nav-dot,
.tuning-nav.open .nav-dot {
    transform: rotate(90deg) scale(1.06);
    border-color: var(--amber);
    background: rgba(43, 24, 16, 0.34);
}

.nav-overlay {
    position: absolute;
    right: 0;
    top: 3.6rem;
    width: 12rem;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(196, 113, 74, 0.34);
    background: rgba(26, 15, 9, 0.88);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -8px, 0);
    transition: opacity 260ms ease, transform 260ms ease;
}

.tuning-nav:hover .nav-overlay,
.tuning-nav.open .nav-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.nav-overlay::before,
.nav-overlay::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--terracotta);
    border-style: solid;
}

.nav-overlay::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.nav-overlay::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.nav-link {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.62rem 0.25rem;
    color: var(--silk);
    font-family: var(--data);
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
    border-left: 2px solid transparent;
    transition: color 260ms ease, padding-left 260ms ease, border-color 260ms ease;
}

.nav-link::after { content: attr(data-label); color: var(--terracotta); }
.nav-link:hover,
.nav-link.active { color: var(--amber); border-left-color: var(--amber); padding-left: 0.72rem; }

.scroll-progress {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    height: 1px;
    background: var(--terracotta);
    transform-origin: left center;
    transform: scaleX(var(--scroll, 0));
    box-shadow: 0 0 10px rgba(232, 168, 76, 0.35);
}

.cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 35;
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 168, 76, 0.15), rgba(232, 168, 76, 0));
    box-shadow: 0 0 22px rgba(232, 168, 76, 0.2);
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 180ms ease;
}

.calibration-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 70%, rgba(232, 168, 76, 0.18), transparent 34%),
        radial-gradient(ellipse at 72% 24%, rgba(122, 139, 111, 0.12), transparent 28%),
        linear-gradient(135deg, var(--terracotta) 0%, var(--copper) 36%, var(--ground) 100%);
}

.calibration-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(244,232,220,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(244,232,220,0.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mix-blend-mode: soft-light;
}

.ambient-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 22vh;
    opacity: 0.36;
}

.wave-one { top: 12%; }
.wave-two { bottom: 12%; transform: rotate(180deg); }

.generative-wave,
.plant-line,
.map-line,
.root-line,
.enso-stroke {
    fill: none;
    stroke: var(--terracotta);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.generative-wave { stroke-width: 0.8px; opacity: 0.55; animation: signal-flow 8s linear infinite; stroke-dasharray: 12 18; }

.meter-stage {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 1.15rem;
    padding: 2rem;
}

.vu-meter {
    width: clamp(19rem, 52vw, 34rem);
    max-height: 74vh;
    overflow: visible;
    filter: drop-shadow(0 28px 42px rgba(26, 15, 9, 0.34));
}

.meter-face { fill: var(--canvas); stroke: var(--ground); stroke-width: 2; }
.meter-inner { fill: none; stroke: rgba(43, 24, 16, 0.16); stroke-width: 1; }
.major-ticks line { stroke: var(--ground); stroke-width: 2; }
.minor-ticks line { stroke: var(--ground); stroke-width: 1; opacity: 0.45; }

.brand-ring {
    fill: var(--ground);
    font-family: var(--display);
    font-size: clamp(0.72rem, 1.3vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.meter-label {
    fill: var(--ground);
    font-family: var(--data);
    font-size: 0.73rem;
    letter-spacing: 0.1em;
}

.meter-needle {
    transform-box: fill-box;
    transform-origin: center;
    animation: breathe 4s ease-in-out infinite;
}

.calibration-hero:hover .meter-needle { animation-name: breathe-wide; }
.meter-needle line { stroke: var(--amber); stroke-width: 4; stroke-linecap: round; filter: url(#needle-glow); }
.meter-needle circle:not(.seed-pod) { fill: var(--ground); }
.seed-pod { fill: none; stroke: rgba(43, 24, 16, 0.3); stroke-width: 1; }

.enso-divider {
    width: min(26rem, 70vw);
    height: auto;
    opacity: 0.82;
}

.enso-stroke { stroke: var(--ground); stroke-width: 2; animation: enso-pulse 3s ease-in-out infinite; }

.calibration-subtitle {
    margin: 0;
    color: rgba(244, 232, 220, 0.84);
    font-family: var(--serif);
    font-size: clamp(1rem, 1.8vw, 1.28rem);
    font-weight: 300;
    letter-spacing: 0.08em;
}

.botanical-strip {
    position: absolute;
    top: 0;
    z-index: 2;
    width: clamp(5rem, 12vw, 9rem);
    height: 100%;
    display: grid;
    place-items: center;
    opacity: 0.78;
}

.botanical-strip.left { left: 2.4vw; }
.botanical-strip.right { right: 2.4vw; }
.botanical-illustration { width: 100%; height: min(68vh, 420px); animation: plant-sway 6s ease-in-out infinite; }
.botanical-strip.right .botanical-illustration { animation-delay: -1.4s; }
.plant-line { stroke-width: 1.2px; }
.waveform-line { animation: signal-flow 8s linear infinite; stroke-dasharray: 16 22; }

.diagnostic-overlay {
    position: relative;
    min-height: 122vh;
    padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 4vw, 4rem);
    background:
        radial-gradient(ellipse at 30% 70%, rgba(196,113,74,0.05), transparent 34%),
        radial-gradient(ellipse at 74% 28%, rgba(122,139,111,0.09), transparent 27%),
        var(--canvas);
}

.section-marker {
    position: absolute;
    top: 2.2rem;
    left: clamp(1.2rem, 4vw, 4rem);
    color: rgba(43, 24, 16, 0.42);
    font-family: var(--display);
    font-size: clamp(0.78rem, 1.2vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hud-panel {
    position: absolute;
    min-height: 18.75rem;
    padding: 3rem;
    border: 2px solid rgba(196, 113, 74, 0.4);
    background: rgba(43, 24, 16, 0.85);
    color: var(--canvas);
    backdrop-filter: blur(2px);
    box-shadow: 0 24px 60px rgba(26, 15, 9, 0.18);
    animation: float-panel 6s ease-in-out infinite;
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.hud-panel:hover { border-color: rgba(232, 168, 76, 0.7); box-shadow: 0 30px 70px rgba(26,15,9,0.25), inset 0 0 28px rgba(232,168,76,0.04); }
.hud-panel:nth-of-type(2) { animation-delay: 0.5s; }
.hud-panel:nth-of-type(3) { animation-delay: 1.2s; }
.hud-panel:nth-of-type(4) { animation-delay: 1.8s; }

.hud-panel::before,
.hud-panel::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    border-color: var(--terracotta);
    border-style: solid;
}

.hud-panel::before { left: -2px; top: -2px; border-width: 2px 0 0 2px; }
.hud-panel::after { right: -2px; bottom: -2px; border-width: 0 2px 2px 0; }

.tone-spectrum { left: 6vw; top: 13vh; width: min(42rem, 52vw); }
.botanical-resonance { right: 7vw; top: 26vh; width: min(30rem, 38vw); }
.global-reach { left: 13vw; bottom: 13vh; width: min(32rem, 40vw); }
.calibration-log { right: 10vw; bottom: 5vh; width: min(36rem, 42vw); }

.hud-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.35rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(196, 113, 74, 0.3);
}

.hud-label,
.hud-coord,
.hud-micro,
.log-entry,
.root-label-node text {
    font-family: var(--data);
    text-transform: uppercase;
}

.hud-label { color: var(--amber); font-size: 0.75rem; letter-spacing: 0.15em; }
.hud-coord { color: var(--silk); font-size: 0.65rem; letter-spacing: 0.1em; }
.hud-text { margin: 0; color: rgba(244,232,220,0.86); font-size: clamp(1rem, 1.8vw, 1.3rem); font-weight: 300; line-height: 1.85; }
.spectrum-wave,
.plant-diagram,
.world-map { width: 100%; height: auto; display: block; margin: 0.5rem 0 1.2rem; }
.spectrum-path { fill: none; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(232, 168, 76, 0.28)); }
.spectrum-path.warm { stroke: var(--amber); }
.spectrum-path.neutral { stroke: var(--copper); opacity: 0.78; }
.spectrum-path.cool { stroke: var(--matcha); opacity: 0.68; }
.plant-diagram .plant-line { stroke: var(--terracotta); }
.leaf-vibe { animation: leaf-vibrate 3.7s ease-in-out infinite; }
.leaf-vibe:nth-of-type(3) { animation-delay: -0.8s; }
.leaf-vibe:nth-of-type(4) { animation-delay: -1.6s; }
.hud-micro { fill: var(--amber); font-size: 0.68rem; letter-spacing: 0.12em; }
.map-line { stroke-width: 1.4; opacity: 0.95; }
.map-line.secondary { stroke: var(--matcha); opacity: 0.48; }
.service-dot { fill: var(--amber); animation: pulse-dot 2s ease-in-out infinite; }
.log-feed { display: grid; gap: 0.55rem; }
.log-entry { padding: 0.32rem 0.5rem; border-left: 2px solid transparent; color: var(--silk); font-size: 0.78rem; letter-spacing: 0.05em; }
.log-entry.active { color: var(--canvas); border-left-color: var(--amber); background: rgba(232, 168, 76, 0.055); animation: active-log 1.5s ease-in-out infinite; }
.log-time { color: var(--matcha); margin-right: 0.7rem; }

.silence-ma {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--canvas);
}

.silence-enso {
    position: absolute;
    width: min(54vw, 34rem);
    opacity: 0.055;
}

.silence-enso .enso-stroke { stroke-width: 1.35; stroke: var(--ground); }
.haiku { position: relative; z-index: 1; margin: 0; text-align: center; color: rgba(43, 24, 16, 0.82); font-family: var(--serif); font-size: clamp(1.65rem, 4vw, 2.5rem); font-style: italic; font-weight: 300; line-height: 2; }
.haiku p { margin: 0.18rem 0; }

.root-system {
    position: relative;
    min-height: 86vh;
    display: grid;
    place-items: center;
    padding: 5rem 1rem 3rem;
    background: linear-gradient(180deg, var(--canvas), rgba(200, 191, 179, 0.42));
    overflow: hidden;
}

.root-network { width: min(92vw, 760px); height: auto; overflow: visible; }
.root-line { stroke-width: 1.4; }
.root-line.fine { stroke-width: 0.9; opacity: 0.64; }
.root-node circle { fill: rgba(232,168,76,0.14); stroke: var(--amber); stroke-width: 1.2; animation: pulse-dot 2.6s ease-in-out infinite; }
.seed-meter { fill: none; stroke: var(--ground); stroke-width: 1; stroke-linecap: round; }
.root-label-node circle { fill: var(--amber); }
.root-label-node text { fill: var(--ground); font-size: 0.72rem; letter-spacing: 0.12em; text-anchor: middle; }

.grow-line { stroke-dasharray: var(--line-length, 900); stroke-dashoffset: var(--line-length, 900); }
.grow-line.visible { animation: draw-line 3.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes breathe { 0%, 100% { transform: translate(240px, 240px) rotate(-25deg); } 50% { transform: translate(240px, 240px) rotate(5deg); } }
@keyframes breathe-wide { 0%, 100% { transform: translate(240px, 240px) rotate(-30deg); } 50% { transform: translate(240px, 240px) rotate(15deg); } }
@keyframes plant-sway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.4deg); } 50% { transform: translate3d(4px, 0, 0) rotate(0.7deg); } }
@keyframes float-panel { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } }
@keyframes signal-flow { to { stroke-dashoffset: -240; } }
@keyframes enso-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.42; transform: scale(1.55); } }
@keyframes active-log { 0%, 100% { opacity: 1; } 50% { opacity: 0.62; } }
@keyframes leaf-vibrate { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

@media (max-width: 768px) {
    .tuning-nav { top: 1rem; right: 1rem; }
    .botanical-strip { opacity: 0.32; width: 4rem; }
    .meter-stage { padding: 1rem; }
    .vu-meter { width: min(86vw, 24rem); }
    .diagnostic-overlay { min-height: auto; display: grid; gap: 1.5rem; padding: 6rem 1rem 3rem; }
    .section-marker { top: 2rem; }
    .hud-panel { position: relative; inset: auto; width: 100%; min-height: 0; padding: 1.5rem; }
    .hud-header { flex-direction: column; gap: 0.4rem; }
    .root-label-node text { font-size: 0.58rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .grow-line { stroke-dashoffset: 0; }
}