:root {
      --bg: #e6e6e6;
      --orange: #f28a37;
      --orange-light: #ffae67;
      --white-line: rgba(255,255,255,.96);
      --text: #3f3025;
      --marker-gray: #8a8a8a;
      --marker-blueviolet: #5868a7;
      --marker-blueviolet-dark: #485894;
      --shadow-soft: 0 8px 18px rgba(0,0,0,.10);
      --font: Arial, Helvetica, sans-serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    .thebody {
    /*  min-height: 100vh;*/
	 width: 100%;
	 height:auto;
      overflow: hidden;
   /*   background: var(--bg);*/
      font-family: var(--font);
      color: var(--text);
    }
    .scene {
    /*  min-height: 100vh;*/
	 width: 100%;
	 heigh:auto;
      display: grid;
      place-items: center;
      padding: 16px;
      perspective: 1550px;
      touch-action: none;
    }
    .frame {
      position: relative;
    /*  width: min(96vw, 1380px);*/
	 width:96%;
      aspect-ratio: 16 / 9;
      transform-style: preserve-3d;
    }
	    .stabile {
      position: relative;
      width: 100%;
	  height:auto;
      aspect-ratio: 16 / 9;
      transform-style: preserve-3d;
    }
	
    .world {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      /* prospettiva iniziale tipo JPG */
      transform: rotateX(13deg) rotateY(-8deg) rotateZ(-1.2deg);
      transition: transform 120ms linear;
    }
    .world svg { width: 100%; height: 100%; display: block; overflow: visible; }

    .shadow-layer,
    .land-layer,
    .marker-layer,
    .gloss-layer {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    /* Ombra chiara, vicina ai continenti, su livello di parallasse separato */
    .shadow-layer {
      transform: translate3d(10px, 8px, -36px);
      opacity: .72;
      filter: blur(1.2px);
    }
    .shadow-layer path {
      fill: rgba(120,120,120,.28);
      stroke: none;
    }

    .land-layer { transform: translateZ(0px); }
    .land-fill path {
      fill: var(--orange);
      stroke: none;
    }
    .land-highlight path {
      fill: none;
      stroke: rgba(255,255,255,.16);
      stroke-width: 1.4;
      filter: blur(.35px);
    }
    .countries path {
      fill: none;
      stroke: var(--white-line);
      stroke-width: 1.15;
      stroke-linejoin: round;
      stroke-linecap: round;
      vector-effect: non-scaling-stroke;
    }

    .gloss-layer {
      inset: 4% 3% 8% 3%;
      pointer-events: none;
      background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.22), transparent 14%),
        radial-gradient(circle at 50% 41%, rgba(255,255,255,.12), transparent 11%),
        radial-gradient(circle at 74% 38%, rgba(255,255,255,.10), transparent 13%);
      mix-blend-mode: screen;
      filter: blur(10px);
      opacity: .92;
      transform: translateZ(45px);
    }

    /* Marker ravvicinati alla superficie */
    .marker-layer {
      transform: translateZ(72px);
      pointer-events: none;
	/*  height:95%;*/
	
    }
    .marker {
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      box-shadow: 1px 3px 8px rgba(0,0,0,.20);
    }
    .marker::before {
      content: "";
      position: absolute;
      inset: 2px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      transform: rotate(45deg);
      clip-path: ellipse(44% 34% at 38% 30%);
      opacity: .55;
    }
    .marker::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      left: 6px;
      top: 6px;
      transform: rotate(45deg);
      background: rgba(255,255,255,.78);
      opacity: .9;
    }
    .marker.gray {
      background: linear-gradient(180deg, #ababab, var(--marker-gray));
    }
    /* uso violet per i marker “neri”/secondo gruppo, come nel mockup */
    .marker.violet {
      background: linear-gradient(180deg, #7b88cb, var(--marker-blueviolet-dark));
    }

    .legend {
      position: absolute;
      top: 22px;
      right: 26px;
      min-width: 188px;
      background: linear-gradient(180deg, var(--orange-light), var(--orange));
      border: 1px solid rgba(160,86,20,.6);
      box-shadow: 3px 4px 0 rgba(0,0,0,.18), var(--shadow-soft);
      padding: 12px 14px;
      transform: translateZ(100px);
    }
    .legend h2 {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .14em;
      margin-bottom: 10px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      line-height: 1.5;
      margin-bottom: 4px;
    }
    .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; }
    .dot.gray { background: var(--marker-gray); }
    .dot.violet { background: var(--marker-blueviolet); }

    .caption {
      position: absolute;
      left: 20px;
      bottom: 16px;
      font-size: 12px;
      color: rgba(40,40,40,.68);
      transform: translateZ(100px);
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    @media (max-width: 900px) {
      .frame { aspect-ratio: auto; min-height: 78vh; }
      .legend { top: 10px; right: 10px; transform: translateZ(80px) scale(.9); transform-origin: top right; }
      .marker { width: 15px; height: 15px; }
      .marker::after { width: 5px; height: 5px; left: 5px; top: 5px; }
	   .stabile {
     top: 10vh;
    }
    }
    @media (prefers-reduced-motion: reduce) {
      .world { transition: none; }
      .scene { touch-action: auto; }
	 
    }
	
	
	    @media (max-width: 800px) {
     .stabile {
     top: 10vh;
    }
    }