:root {
      color-scheme: dark;
      --background: transparent;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100svh;
      display: grid;
      place-items: center;
      background: transparent;
    }

    .tree-scene {
      position: relative;
      width: min(100%, 76svh, 860px);
      aspect-ratio: 800 / 1024;
      overflow: hidden;

      background: transparent;
    }

    svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .structure {
      animation: reveal 1.8s ease-out both;
    }

    .trace {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .trace-shadow {
      stroke: #172d1c;
      stroke-width: 9;
    }

    .trace-body {
      stroke: url(#branch-gradient);
      stroke-width: 5.1;
    }

    .trace-highlight {
      stroke: #c1d8a0;
      stroke-width: 1.35;
      stroke-opacity: .35;
    }

    .node-body {
      fill: #0b170f;
      stroke: #a0bf7a;
      stroke-width: 3;
    }

    .node-light {
      fill: none;
      stroke: #e4ffcb;
      stroke-width: 2.4;
      opacity: 0;
    }

    /* Keskijuuren pää on täytetty piste, ei rengas. */
    .root-dot {
      fill: #8daa65;
    }

    .root-dot-light {
      fill: #e4ffc8;
      opacity: 0;
    }

    .signal-glow,
    .signal-core {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 4 196;
      stroke-dashoffset: 4;
      opacity: 0;
    }

    .signal-glow {
      stroke: #a5ed77;
      stroke-width: 10.5;
    }

    .signal-core {
      stroke: #e7ffd1;
      stroke-width: 3.9;
    }

    .signal-head {
      fill: #f1ffe3;
      opacity: 0;
    }

    .ground-base {
      fill: none;
      stroke: #67844e;
      stroke-width: 1.35;
      opacity: .48;
    }

    .ground-response {
      fill: none;
      stroke: #c8f5a5;
      stroke-width: 1.8;
      opacity: 0;
    }

    .impact-wave {
      fill: none;
      stroke: #bce996;
      stroke-width: 1.1;
      opacity: 0;
    }

    @keyframes reveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }

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