.dt-engine{
  --dt-bg:#050609;
  --dt-surface:#0b0d13;
  --dt-gold:#e6bc68;
  --dt-text:#f7f4ec;
  --dt-muted:rgba(247,244,236,.58);

  position:relative;
  width:100vw;
  min-height:100vh;
  min-height:100svh;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  color:var(--dt-text);
  background:
    radial-gradient(circle at 50% 20%,rgba(143,107,255,.10),transparent 30%),
    radial-gradient(circle at 50% 58%,rgba(230,188,104,.06),transparent 34%),
    linear-gradient(180deg,#040507 0%,#080a0f 55%,#040507 100%);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.dt-engine *,
.dt-engine *::before,
.dt-engine *::after{
  box-sizing:border-box;
}

.dt-ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 30%,rgba(255,255,255,.08) 0 1px,transparent 1.5px),
    radial-gradient(circle at 78% 68%,rgba(230,188,104,.08) 0 1px,transparent 1.4px);
  background-size:56px 56px,74px 74px;
  opacity:.12;
}

.dt-header{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:42px 0 24px;
  text-align:center;
}

.dt-eyebrow{
  margin:0 0 12px;
  color:var(--dt-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.dt-header h1{
  margin:0;
  color:#fff!important;
  font-family:Georgia,serif;
  font-size:clamp(34px,5vw,62px);
  font-weight:400;
  letter-spacing:.01em;
}

.dt-subtitle{
  max-width:650px;
  margin:16px auto 0;
  color:var(--dt-muted);
  font-size:14px;
  line-height:1.65;
}

.dt-stage{
  position:relative;
  z-index:2;
  width:min(960px,calc(100% - 28px));
  margin:0 auto;
  padding:18px 0 28px;
}

.dt-card-wrap{
  position:relative;
  width:min(585px,84vw);
  aspect-ratio:585 / 790;
  margin:0 auto;
  border-radius:24px;
  overflow:hidden;
  background:#06070a;
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    0 0 55px rgba(230,188,104,.08);
  touch-action:none;
  user-select:none;
}

.dt-canvas{
  display:block;
  width:100%;
  height:100%;
  background:#06070a;
}

.dt-light{
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:15px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  background:#fff7d8;
  box-shadow:
    0 0 8px rgba(255,255,255,.92),
    0 0 22px rgba(230,188,104,.78),
    0 0 55px rgba(230,188,104,.42);
  transition:opacity .25s ease;
}

.dt-card-wrap.is-interacting .dt-light{
  opacity:1;
}

.dt-loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:rgba(255,255,255,.72);
  background:rgba(5,6,9,.90);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:opacity .35s ease;
}

.dt-loading.is-hidden{
  opacity:0;
  pointer-events:none;
}

.dt-spinner{
  width:32px;
  height:32px;
  border:2px solid rgba(255,255,255,.10);
  border-top-color:var(--dt-gold);
  border-radius:50%;
  animation:dtSpin .9s linear infinite;
}

@keyframes dtSpin{
  to{transform:rotate(360deg)}
}

.dt-controls{
  display:grid;
  grid-template-columns:auto minmax(180px,560px) auto;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:24px;
}

.dt-direction-label{
  color:rgba(255,255,255,.42);
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
}

.dt-track{
  position:relative;
  height:16px;
}

.dt-track-line,
.dt-track-progress{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:2px;
  transform:translateY(-50%);
  border-radius:999px;
}

.dt-track-line{
  background:rgba(255,255,255,.11);
}

.dt-track-progress{
  transform-origin:center;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(230,188,104,.9),
    transparent
  );
  opacity:.28;
}

.dt-track-center{
  position:absolute;
  left:50%;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--dt-gold);
  box-shadow:0 0 12px rgba(230,188,104,.62);
}

.dt-status{
  margin:12px 0 0;
  color:rgba(255,255,255,.55);
  font-size:11px;
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.dt-footer{
  position:relative;
  z-index:2;
  width:min(960px,calc(100% - 28px));
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  margin:0 auto;
  padding:10px 0 30px;
  color:rgba(255,255,255,.35);
  font-size:10px;
  letter-spacing:.06em;
}

.dt-reset{
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

@media(max-width:700px){
  .dt-header{
    padding-top:28px;
  }

  .dt-header h1{
    font-size:36px;
  }

  .dt-subtitle{
    font-size:13px;
  }

  .dt-card-wrap{
    width:min(585px,92vw);
    border-radius:18px;
  }

  .dt-controls{
    grid-template-columns:auto minmax(120px,1fr) auto;
    gap:9px;
  }

  .dt-footer{
    align-items:flex-start;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .dt-engine *,
  .dt-engine *::before,
  .dt-engine *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   DIGITAL TWIN ENGINE v0.2 — 2D VECTOR RESOLVER
   ========================================================= */

.dt-vector-monitor{
  position:relative;
  width:112px;
  height:112px;
  margin:24px auto 0;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(230,188,104,.08),transparent 62%),
    rgba(255,255,255,.018);
  box-shadow:inset 0 0 24px rgba(0,0,0,.32);
}

.dt-vector-axis{
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,255,255,.10);
  transform:translate(-50%,-50%);
}

.dt-vector-axis-x{
  width:82%;
  height:1px;
}

.dt-vector-axis-y{
  width:1px;
  height:82%;
}

.dt-vector-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--dt-gold);
  box-shadow:
    0 0 7px rgba(255,255,255,.55),
    0 0 16px rgba(230,188,104,.60);
  transition:opacity .18s ease;
}

@media(max-width:700px){
  .dt-vector-monitor{
    width:88px;
    height:88px;
    margin-top:18px;
  }
}


/* =========================================================
   DIGITAL TWIN ENGINE v0.3 — FOUR-AXIS RESOLVER
   ========================================================= */

.dt-vector-monitor::before,
.dt-vector-monitor::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:82%;
  height:1px;
  background:rgba(255,255,255,.065);
  transform-origin:center;
}

.dt-vector-monitor::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.dt-vector-monitor::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}


/* =========================================================
   DIGITAL TWIN ENGINE v0.4 — STABLE H/V + DIAGNOSTIC MODE
   ========================================================= */

.dt-diagnostic{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:18px auto 0;
  width:min(760px,100%);
}

.dt-axis-button{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:rgba(255,255,255,.52);
  background:rgba(255,255,255,.025);
  font-size:8px;
  font-weight:900;
  letter-spacing:.10em;
  cursor:pointer;
}

.dt-axis-button:hover,
.dt-axis-button:focus-visible{
  color:#fff;
  border-color:rgba(230,188,104,.36);
  outline:none;
}

.dt-axis-button.is-active{
  color:#fff;
  border-color:rgba(230,188,104,.55);
  background:rgba(230,188,104,.10);
  box-shadow:0 0 14px rgba(230,188,104,.10);
}

@media(max-width:700px){
  .dt-diagnostic{
    gap:6px;
    margin-top:14px;
  }

  .dt-axis-button{
    min-height:31px;
    padding:0 9px;
    font-size:7px;
  }
}


/* =========================================================
   DIGITAL TWIN ENGINE v0.5 — CENTER FADE + AXIS CROSSFADE
   ========================================================= */

.dt-canvas{
  position:absolute;
  inset:0;
}

.dt-canvas-base{
  z-index:1;
}

.dt-canvas-sprite{
  z-index:2;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}

.dt-canvas-sprite.is-visible{
  opacity:1;
}

.dt-light,
.dt-loading{
  z-index:5;
}


/* =========================================================
   DIGITAL TWIN ENGINE v0.6 — SURGE SURFACE PROFILE
   ========================================================= */

.dt-canvas-sprite{
  opacity:0;
  transition:none;
}

/* Hide legacy diagnostic styling from older builds */
.dt-diagnostic{
  display:none!important;
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.7
   Continuous playhead + adjacent-frame blending
   ========================================================= */

.dt-canvas-sprite{
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  transition:none!important;
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.8 — OPTICAL VARIANTS
   ========================================================= */

.dt-variant-indicator{
  width:max-content;
  max-width:calc(100% - 24px);
  margin:12px auto 0;
  padding:7px 11px;
  border:1px solid rgba(230,188,104,.18);
  border-radius:999px;
  color:rgba(255,255,255,.48);
  background:rgba(230,188,104,.045);
  font-size:8px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.dt-variant-indicator.is-armed{
  color:rgba(255,255,255,.78);
  border-color:rgba(230,188,104,.34);
  box-shadow:0 0 14px rgba(230,188,104,.08);
}

@media(max-width:700px){
  .dt-variant-indicator{
    margin-top:10px;
    font-size:7px;
  }
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.9 — LIGHT / TILT
   ========================================================= */

.dt-card-surface{
  position:relative;
  width:min(585px,84vw);
  aspect-ratio:585 / 790;
  margin:0 auto;
  perspective:1400px;
  touch-action:none;
  user-select:none;
}

.dt-card-surface .dt-card-wrap{
  width:100%;
  height:100%;
  margin:0;
  transform:perspective(1400px) rotateX(0deg) rotateY(0deg) scale(1);
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform;
}

.dt-card-surface.is-tilt-mode .dt-card-wrap{
  box-shadow:
    0 38px 100px rgba(0,0,0,.58),
    0 0 64px rgba(230,188,104,.10);
}

.dt-card-surface.is-tilt-mode .dt-light{
  width:10px;
  height:10px;
  opacity:.28!important;
  filter:blur(1px);
  box-shadow:
    0 0 12px rgba(255,255,255,.28),
    0 0 34px rgba(230,188,104,.20);
}

.dt-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:190px;
  margin:22px auto 0;
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 0 16px rgba(0,0,0,.22);
}

.dt-mode-button{
  min-height:34px;
  padding:0 15px;
  border:0;
  border-radius:999px;
  color:rgba(255,255,255,.40);
  background:transparent;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  cursor:pointer;
  transition:color .22s ease, background .22s ease, box-shadow .22s ease;
}

.dt-mode-button:hover,
.dt-mode-button:focus-visible{
  color:#fff;
  outline:none;
}

.dt-mode-button.is-active{
  color:#fff;
  background:rgba(230,188,104,.11);
  box-shadow:
    0 0 0 1px rgba(230,188,104,.22),
    0 0 18px rgba(230,188,104,.08);
}

@media(max-width:700px){
  .dt-card-surface{
    width:min(585px,92vw);
  }

  .dt-mode-switch{
    width:170px;
    margin-top:18px;
  }

  .dt-mode-button{
    min-height:32px;
    font-size:7px;
  }
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.10 — AUTO MODE
   ========================================================= */

.dt-mode-switch{
  grid-template-columns:repeat(3,1fr);
  width:272px;
}

.dt-card-surface.is-auto-mode .dt-light{
  opacity:.72!important;
  width:12px;
  height:12px;
  box-shadow:
    0 0 9px rgba(255,255,255,.72),
    0 0 25px rgba(230,188,104,.52),
    0 0 58px rgba(230,188,104,.24);
}

.dt-card-surface.is-auto-mode .dt-card-wrap{
  box-shadow:
    0 36px 96px rgba(0,0,0,.56),
    0 0 58px rgba(230,188,104,.09);
}

@media(max-width:700px){
  .dt-mode-switch{
    width:242px;
  }
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.11 — GENERATIVE AUTO MOTION
   ========================================================= */

.dt-card-surface.is-auto-mode .dt-card-wrap{
  transition:box-shadow .45s ease;
}

.dt-card-surface.is-auto-mode[data-auto-energy="calm"] .dt-card-wrap{
  box-shadow:
    0 34px 88px rgba(0,0,0,.52),
    0 0 46px rgba(230,188,104,.06);
}

.dt-card-surface.is-auto-mode[data-auto-energy="explore"] .dt-card-wrap{
  box-shadow:
    0 38px 98px rgba(0,0,0,.56),
    0 0 62px rgba(230,188,104,.10);
}

.dt-card-surface.is-auto-mode[data-auto-energy="reveal"] .dt-card-wrap{
  box-shadow:
    0 42px 108px rgba(0,0,0,.60),
    0 0 82px rgba(230,188,104,.15);
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.12 — FULL VIEWPORT PORTRAIT
   ========================================================= */

html.dt-viewport-locked,
body.dt-viewport-locked{
  width:100%;
  height:100%;
  overflow:hidden!important;
  overscroll-behavior:none;
}

.dt-engine{
  height:100vh;
  height:100svh;
  height:100dvh;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  isolation:isolate;
}

.dt-header{
  width:min(820px,calc(100% - 24px));
  padding:
    clamp(12px,2.1vh,28px)
    0
    clamp(7px,1.2vh,16px);
}

.dt-eyebrow{
  margin-bottom:clamp(4px,.8vh,10px);
  font-size:clamp(7px,.95vh,10px);
}

.dt-header h1{
  font-size:clamp(24px,4.1vh,48px);
  line-height:1;
}

.dt-subtitle{
  max-width:620px;
  margin-top:clamp(7px,1.1vh,13px);
  font-size:clamp(10px,1.45vh,13px);
  line-height:1.42;
}

.dt-stage{
  width:min(920px,calc(100% - 20px));
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  padding:0;
}

.dt-card-surface{
  /*
    Il vincolo verticale sottrae lo spazio necessario
    a intestazione, controlli e footer.
  */
  width:min(
    76vw,
    calc((100dvh - 270px) * 585 / 790)
  );
  max-width:585px;
  min-width:180px;
  flex:0 1 auto;
}

.dt-mode-switch{
  flex:0 0 auto;
  margin-top:clamp(8px,1.4vh,17px);
}

.dt-vector-monitor{
  width:clamp(54px,7.5vh,82px);
  height:clamp(54px,7.5vh,82px);
  margin-top:clamp(7px,1.2vh,14px);
}

.dt-variant-indicator{
  margin-top:clamp(5px,.9vh,10px);
  padding:5px 9px;
  font-size:7px;
}

.dt-status{
  margin-top:clamp(4px,.7vh,9px);
  font-size:clamp(7px,1vh,10px);
}

.dt-footer{
  width:min(920px,calc(100% - 22px));
  min-height:44px;
  padding:
    clamp(5px,.8vh,9px)
    0
    clamp(7px,1.1vh,13px);
  font-size:8px;
}

.dt-reset{
  min-height:30px;
  padding:0 12px;
  font-size:9px;
}

/* Landscape gate: visible only on compact touch-style viewports */
.dt-orientation-gate{
  position:fixed;
  z-index:9999;
  inset:0;
  display:none;
  place-items:center;
  align-content:center;
  gap:13px;
  padding:28px;
  color:#f7f4ec;
  text-align:center;
  background:
    radial-gradient(circle at 50% 44%,rgba(230,188,104,.10),transparent 30%),
    linear-gradient(180deg,#040507,#080a0f 58%,#040507);
}

.dt-orientation-icon{
  position:relative;
  width:82px;
  height:82px;
}

.dt-phone-shape{
  position:absolute;
  left:25px;
  top:10px;
  width:33px;
  height:59px;
  border:2px solid rgba(247,244,236,.75);
  border-radius:8px;
  box-shadow:0 0 24px rgba(230,188,104,.10);
}

.dt-phone-shape::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#e6bc68;
}

.dt-rotate-arc{
  position:absolute;
  right:0;
  bottom:0;
  color:#e6bc68;
  font-size:30px;
  line-height:1;
  text-shadow:0 0 18px rgba(230,188,104,.35);
}

.dt-orientation-title{
  margin:0;
  font-family:Georgia,serif;
  font-size:28px;
}

.dt-orientation-copy{
  max-width:330px;
  margin:0;
  color:rgba(247,244,236,.55);
  font-size:12px;
  line-height:1.55;
}

.dt-engine.is-orientation-blocked > :not(.dt-orientation-gate){
  visibility:hidden;
}

.dt-engine.is-orientation-blocked .dt-orientation-gate{
  visibility:visible;
}

@media(max-width:700px){
  .dt-engine{
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .dt-header{
    width:calc(100% - 20px);
    padding:10px 0 6px;
  }

  .dt-eyebrow{
    font-size:6px;
    letter-spacing:.15em;
  }

  .dt-header h1{
    font-size:clamp(21px,6.6vw,30px);
  }

  .dt-subtitle{
    max-width:92%;
    margin-top:5px;
    font-size:9px;
    line-height:1.3;
  }

  .dt-stage{
    width:calc(100% - 14px);
  }

  .dt-card-surface{
    width:min(
      91vw,
      calc((100dvh - 226px) * 585 / 790)
    );
    min-width:150px;
  }

  .dt-mode-switch{
    width:232px;
    margin-top:7px;
    padding:3px;
  }

  .dt-mode-button{
    min-height:29px;
    padding:0 8px;
    font-size:6px;
  }

  .dt-vector-monitor{
    width:46px;
    height:46px;
    margin-top:6px;
  }

  .dt-vector-dot{
    width:7px;
    height:7px;
  }

  .dt-variant-indicator{
    margin-top:4px;
    padding:4px 7px;
    font-size:6px;
  }

  .dt-status{
    margin-top:3px;
    font-size:6px;
  }

  .dt-footer{
    min-height:37px;
    padding:4px 0 6px;
    font-size:6px;
  }

  .dt-reset{
    min-height:27px;
    padding:0 10px;
    font-size:7px;
  }
}

@media(max-height:720px) and (min-width:701px){
  .dt-card-surface{
    width:min(
      68vw,
      calc((100dvh - 224px) * 585 / 790)
    );
  }

  .dt-header{
    padding-top:10px;
  }

  .dt-subtitle{
    margin-top:6px;
  }

  .dt-vector-monitor{
    width:50px;
    height:50px;
    margin-top:6px;
  }

  .dt-variant-indicator,
  .dt-status{
    margin-top:4px;
  }
}

@media(orientation:landscape) and (max-width:900px) and (max-height:600px){
  .dt-orientation-gate{
    display:grid;
  }
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.13 — DEVICE TILT
   ========================================================= */

.dt-motion-controls{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:30px;
  margin-top:6px;
}

.dt-motion-controls.is-visible{
  display:flex;
}

.dt-motion-button{
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(230,188,104,.22);
  border-radius:999px;
  color:rgba(255,255,255,.68);
  background:rgba(230,188,104,.055);
  font-size:7px;
  font-weight:900;
  letter-spacing:.11em;
  cursor:pointer;
}

.dt-motion-button:hover,
.dt-motion-button:focus-visible{
  color:#fff;
  border-color:rgba(230,188,104,.48);
  outline:none;
}

.dt-motion-button.is-active{
  color:#fff;
  border-color:rgba(230,188,104,.58);
  box-shadow:0 0 17px rgba(230,188,104,.10);
}

.dt-motion-state{
  color:rgba(255,255,255,.36);
  font-size:7px;
  letter-spacing:.08em;
}

@media(max-width:700px){
  .dt-motion-controls{
    min-height:27px;
    margin-top:4px;
  }

  .dt-motion-button{
    min-height:25px;
    padding:0 8px;
    font-size:6px;
  }

  .dt-motion-state{
    display:none;
  }
}


/* =========================================================
   OPTICAL TIMELINE ENGINE v0.16 — CORE STABLE
   Atmosphere experiments disabled
   ========================================================= */

.dt-card-glow,
.dt-card-aura,
.dt-ambient-field,
.dt-ambient-particle{
  display:none!important;
}

.dt-engine{
  animation:none!important;
  background-image:
    radial-gradient(circle at 50% 43%,rgba(230,188,104,.025),transparent 42%),
    linear-gradient(180deg,#040507,#080a0f 58%,#040507)!important;
  background-position:center!important;
}

.dt-ambient,
.dt-ambient::before,
.dt-ambient::after{
  animation:none!important;
}

.dt-card-wrap{
  animation:none!important;
}

/*
  Restore the stable shadow behavior used before the
  atmosphere experiments.
*/
.dt-card-wrap{
  box-shadow:
    0 30px 86px rgba(0,0,0,.58),
    0 0 44px rgba(230,188,104,.055)!important;
}

.dt-card-surface.is-tilt-mode .dt-card-wrap{
  box-shadow:
    0 38px 100px rgba(0,0,0,.58),
    0 0 64px rgba(230,188,104,.10)!important;
}

.dt-card-surface.is-auto-mode .dt-card-wrap{
  box-shadow:
    0 36px 96px rgba(0,0,0,.56),
    0 0 58px rgba(230,188,104,.09)!important;
}


/* =========================================================
   v0.16.1 — CANVAS PRIME
   ========================================================= */

.dt-engine.is-canvas-priming .dt-canvas-sprite{
  opacity:0!important;
}


/* =========================================================
   DIGITAL TWIN VIEWER v0.17 — UNIVERSAL PROFILE
   ========================================================= */

.dt-object-stage{
  --object-ratio: 585 / 790;
  --card-left: 0%;
  --card-top: 0%;
  --card-width: 100%;
  --card-height: 100%;

  position:relative;
  width:min(
    76vw,
    calc((100dvh - 300px) * 585 / 790)
  );
  max-width:585px;
  aspect-ratio:var(--object-ratio);
  flex:0 1 auto;
  transform-origin:center;
  transition:width .45s ease, aspect-ratio .45s ease;
}

.dt-object-stage .dt-card-surface{
  position:absolute;
  left:var(--card-left);
  top:var(--card-top);
  width:var(--card-width);
  height:var(--card-height);
  margin:0;
  aspect-ratio:auto;
  max-width:none;
  min-width:0;
  transition:
    left .45s ease,
    top .45s ease,
    width .45s ease,
    height .45s ease;
}

.dt-slab-overlay{
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}

.dt-object-stage.is-slab-mode .dt-slab-overlay{
  opacity:1;
  visibility:visible;
}

.dt-object-stage.is-slab-mode{
  width:min(
    68vw,
    calc((100dvh - 300px) * 733 / 1187)
  );
  max-width:733px;
}

.dt-object-stage.is-slab-mode .dt-card-wrap{
  border-radius:10px;
}

.dt-object-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:160px;
  margin:8px auto 0;
  padding:3px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
}

.dt-object-mode-switch[hidden]{
  display:none!important;
}

.dt-object-mode-button{
  min-height:28px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.38);
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  cursor:pointer;
}

.dt-object-mode-button.is-active{
  color:#fff;
  background:rgba(230,188,104,.11);
  box-shadow:0 0 0 1px rgba(230,188,104,.22);
}

.dt-certificate-meta{
  display:flex;
  align-items:center;
  gap:10px;
}

.dt-load-twin{
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(230,188,104,.20);
  border-radius:999px;
  color:rgba(255,255,255,.62);
  background:rgba(230,188,104,.04);
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
  cursor:pointer;
}


@media(max-width:700px){
  .dt-object-stage{
    width:min(
      91vw,
      calc((100dvh - 255px) * 585 / 790)
    );
  }

  .dt-object-stage.is-slab-mode{
    width:min(
      82vw,
      calc((100dvh - 255px) * 733 / 1187)
    );
  }

  .dt-object-mode-switch{
    width:146px;
    margin-top:5px;
  }

  .dt-object-mode-button{
    min-height:25px;
    font-size:6px;
  }

  .dt-certificate-meta{
    gap:6px;
  }

  .dt-load-twin{
    min-height:25px;
    padding:0 8px;
    font-size:6px;
  }

}


/* =========================================================
   DIGITAL TWIN VIEWER v0.18.2 — CLEAN OBJECT TILT
   ========================================================= */

.dt-object-stage{
  perspective:1400px;
  transform-style:preserve-3d;
}

.dt-object-transform{
  position:absolute;
  inset:0;
  transform:
    perspective(1400px)
    rotateX(0deg)
    rotateY(0deg)
    scale(1);
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}

.dt-object-transform .dt-card-surface{
  transform-style:preserve-3d;
}

/* Raw card: tilt remains on the card wrapper. */
.dt-object-stage:not(.is-slab-mode) .dt-object-transform{
  transform:
    perspective(1400px)
    rotateX(0deg)
    rotateY(0deg)
    scale(1)!important;
}

/* Slab: the complete object tilts; card stays neutral inside. */
.dt-object-stage.is-slab-mode .dt-card-wrap{
  transform:
    perspective(1400px)
    rotateX(0deg)
    rotateY(0deg)
    scale(1)!important;
}

.dt-slab-overlay{
  backface-visibility:hidden;
  transform:translateZ(1px);
}


/* =========================================================
   DIGITAL TWIN VIEWER v0.18.3 — FULL OBJECT INPUT
   ========================================================= */

.dt-object-stage{
  touch-action:none;
  user-select:none;
  cursor:crosshair;
}

.dt-object-stage.is-slab-mode{
  cursor:grab;
}

.dt-object-stage.is-slab-mode:active{
  cursor:grabbing;
}


/* =========================================================
   DIGITAL TWIN EXPERIENCE v0.19.0 — EXPERIENCE ENTRY
   ========================================================= */

.dt-entry-gate{
  position:absolute;
  z-index:9000;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:
    max(28px,env(safe-area-inset-top))
    20px
    max(28px,env(safe-area-inset-bottom));
  color:#f7f4ec;
  background:
    radial-gradient(circle at 50% 38%,rgba(230,188,104,.095),transparent 23%),
    radial-gradient(circle at 50% 50%,rgba(109,84,194,.08),transparent 43%),
    linear-gradient(180deg,#030406 0%,#080a0f 52%,#030406 100%);
  opacity:0;
  visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease;
}

.dt-entry-gate.is-visible{
  opacity:1;
  visibility:visible;
}

.dt-entry-gate.is-leaving{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}

.dt-entry-content{
  position:relative;
  z-index:2;
  width:min(620px,100%);
  text-align:center;
  transform:translateY(0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .55s ease;
}

.dt-entry-gate.is-leaving .dt-entry-content{
  opacity:0;
  transform:translateY(-18px);
}

.dt-entry-kicker{
  margin:0 0 10px;
  color:rgba(230,188,104,.92);
  font-size:9px;
  font-weight:900;
  letter-spacing:.34em;
}

.dt-entry-content h2{
  margin:0;
  color:#fff!important;
  font-family:Georgia,serif;
  font-size:clamp(38px,6.6vw,70px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.dt-entry-powered{
  margin:14px 0 0;
  color:rgba(247,244,236,.46);
  font-size:9px;
  font-weight:750;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.dt-entry-divider{
  display:block;
  width:86px;
  height:1px;
  margin:26px auto 23px;
  background:linear-gradient(90deg,transparent,rgba(230,188,104,.72),transparent);
  box-shadow:0 0 18px rgba(230,188,104,.18);
}

.dt-entry-intro{
  width:min(470px,100%);
  margin:0 auto;
  color:rgba(247,244,236,.66);
  font-size:clamp(13px,1.7vw,16px);
  line-height:1.65;
  text-wrap:balance;
}

.dt-entry-form{
  width:min(510px,100%);
  margin:31px auto 0;
}

.dt-entry-form label{
  display:block;
  margin:0 0 10px;
  color:rgba(247,244,236,.52);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.dt-entry-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:5px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:rgba(255,255,255,.028);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.22),
    0 18px 60px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}

.dt-entry-field:focus-within{
  border-color:rgba(230,188,104,.42);
  box-shadow:
    0 0 0 1px rgba(230,188,104,.08),
    0 0 34px rgba(230,188,104,.08);
}

.dt-entry-field input{
  min-width:0;
  height:48px;
  padding:0 15px;
  border:0;
  color:#fff;
  background:transparent;
  font-size:16px;
  font-weight:750;
  letter-spacing:.105em;
  text-transform:uppercase;
  outline:none;
}

.dt-entry-field input::placeholder{
  color:rgba(247,244,236,.25);
}

.dt-entry-field button{
  min-width:158px;
  min-height:48px;
  padding:0 19px;
  border:1px solid rgba(230,188,104,.36);
  border-radius:11px;
  color:#fff;
  background:
    linear-gradient(180deg,rgba(230,188,104,.18),rgba(230,188,104,.08));
  box-shadow:0 0 24px rgba(230,188,104,.07);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}

.dt-entry-field button:hover,
.dt-entry-field button:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(230,188,104,.72);
  background:
    linear-gradient(180deg,rgba(230,188,104,.26),rgba(230,188,104,.11));
  outline:none;
}

.dt-entry-field button:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

.dt-entry-hint{
  margin:10px 0 0;
  color:rgba(247,244,236,.36);
  font-size:9px;
  line-height:1.5;
}

.dt-entry-message{
  min-height:18px;
  margin:8px 0 0;
  color:#e6bc68;
  font-size:9px;
  font-weight:750;
  letter-spacing:.04em;
}

.dt-entry-footnote{
  margin:22px auto 0;
  color:rgba(247,244,236,.28);
  font-size:8px;
  letter-spacing:.055em;
}

.dt-entry-orbit{
  position:absolute;
  left:50%;
  top:44%;
  width:min(72vw,630px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.36;
  pointer-events:none;
}

.dt-entry-orbit-ring,
.dt-entry-orbit-core{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.dt-entry-orbit-ring{
  border:1px solid rgba(230,188,104,.12);
}

.dt-entry-orbit-ring-a{
  width:100%;
  height:100%;
  animation:dtEntryOrbit 55s linear infinite;
}

.dt-entry-orbit-ring-b{
  width:72%;
  height:72%;
  border-color:rgba(151,120,235,.1);
  animation:dtEntryOrbitReverse 72s linear infinite;
}

.dt-entry-orbit-ring::before{
  content:none;
}

/* =========================================================
   DIGITAL TWIN GATEWAY v1.1 — DYNAMIC DT CONSTELLATION
   One star is generated for each registered Digital Twin.
   ========================================================= */

.dt-entry-twin-star{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#e6bc68;
  box-shadow:
    0 0 7px rgba(255,255,255,.72),
    0 0 18px rgba(230,188,104,.68);
  transform:translate(-50%,-50%);
  opacity:.92;
  pointer-events:none;
  will-change:transform,opacity;
  animation:dtEntryTwinStarPulse 4.8s ease-in-out infinite;
}

.dt-entry-twin-star:nth-of-type(2n){
  width:5px;
  height:5px;
  animation-duration:5.7s;
}

.dt-entry-twin-star:nth-of-type(3n){
  width:7px;
  height:7px;
  animation-duration:6.4s;
}

@keyframes dtEntryTwinStarPulse{
  0%,100%{
    opacity:.58;
    filter:brightness(.92);
  }
  50%{
    opacity:1;
    filter:brightness(1.22);
  }
}

.dt-entry-orbit-core{
  width:12%;
  height:12%;
  background:radial-gradient(circle,rgba(230,188,104,.18),transparent 68%);
  filter:blur(2px);
}

@keyframes dtEntryOrbit{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes dtEntryOrbitReverse{
  to{transform:translate(-50%,-50%) rotate(-360deg)}
}

@media(max-width:700px){
  .dt-entry-gate{
    padding-left:17px;
    padding-right:17px;
  }

  .dt-entry-content h2{
    font-size:clamp(37px,12vw,53px);
  }

  .dt-entry-divider{
    margin-top:22px;
    margin-bottom:20px;
  }

  .dt-entry-intro{
    max-width:330px;
    font-size:13px;
  }

  .dt-entry-form{
    margin-top:25px;
  }

  .dt-entry-field{
    grid-template-columns:1fr;
  }

  .dt-entry-field input{
    width:100%;
    text-align:center;
  }

  .dt-entry-field button{
    width:100%;
  }

  .dt-entry-orbit{
    top:40%;
    width:115vw;
  }
}

@media(prefers-reduced-motion:reduce){
  .dt-entry-orbit-ring-a,
  .dt-entry-orbit-ring-b,
  .dt-entry-twin-star{
    animation:none!important;
  }
}
.dt-entry-brand{

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:22px;

}

.dt-entry-logo{

    width:135px;          /* <-- prova questa */

    max-width:30vw;
    height:auto;

    display:block;

    user-select:none;
    pointer-events:none;

    animation:dtLogoFade 1.2s ease;

}
.dt-entry-logo,
.dt-entry-kicker,
.dt-entry-title,
.dt-entry-powered,
.dt-entry-divider,
.dt-entry-intro,
.dt-entry-form,
.dt-entry-footnote{

    opacity:0;
    transform:translateY(12px);

    animation:dtGatewayFade .8s ease forwards;

}

.dt-entry-logo{

    animation-delay:.10s;

}

.dt-entry-kicker{

    animation-delay:.25s;

}

#dt-entry-title{

    animation-delay:.40s;

}

.dt-entry-powered{

    animation-delay:.55s;

}

.dt-entry-divider{

    animation-delay:.70s;

}

.dt-entry-intro{

    animation-delay:.85s;

}

.dt-entry-form{

    animation-delay:1.0s;

}

.dt-entry-footnote{

    animation-delay:1.15s;

}

@keyframes dtGatewayFade{

    from{

        opacity:0;
        transform:translateY(12px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
.dt-entry-logo{

    transition:
        transform .6s ease,
        opacity .6s ease;

}

@media (hover:hover){

    .dt-entry-logo:hover{

        transform:scale(1.03);

    }

}

#dt-open-loader,
.dt-load-twin {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  flex-shrink: 0;
}

/* =====================================================
   DT FOOTER — BUTTON LABEL FIX
   ===================================================== */

.dt-footer {
  min-width: 0;
}

.dt-certificate-meta {
  min-width: 0;
}

.dt-load-twin,
.dt-reset {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  flex-shrink: 0;
}

@media (max-width: 700px) {

  .dt-footer {
    gap: 8px;
  }

  .dt-load-twin,
  .dt-reset {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}



/* =========================================================
   DIGITAL TWIN VIEWER v0.23.0 — PSA GEOMETRY v1
   ========================================================= */

.dt-slab-label{
  position:absolute;
  z-index:4;
  left:var(--label-left, 0%);
  top:var(--label-top, 0%);
  width:var(--label-width, 0%);
  height:var(--label-height, 0%);
  object-fit:contain;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  backface-visibility:hidden;
  transform:translateZ(.5px);
  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.dt-object-stage.is-slab-mode .dt-slab-label{
  opacity:1;
  visibility:visible;
}

.dt-object-stage.is-slab-mode .dt-slab-overlay{
  z-index:5;
}



/* =========================================================
   DIGITAL TWIN VIEWER v0.23.6 — PSA EDGE ALPHA-BOUNDS FIX
   ========================================================= */

/*
  Perspective belongs to the parent scene, not to the rotating object.
  This prevents the apparent "size pop" near the end of the flip.
*/
.dt-card-wrap{
  perspective:1650px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
}

.dt-object-stage{
  transform-style:preserve-3d;
}

.dt-object-stage.is-slab-mode{
  --slab-depth:14px;
}

/*
  The visible slab face sits half the physical depth in front of the
  object's center plane. Card + label + shell move as one front face.
*/
.dt-object-stage.is-slab-mode .dt-card-surface,
.dt-object-stage.is-slab-mode .dt-slab-label,
.dt-object-stage.is-slab-mode .dt-slab-overlay{
  transform:translateZ(calc(var(--slab-depth) / 2));
  backface-visibility:hidden;
}

/*
  Side planes are CENTERED exactly on the slab's left/right outline.
  No translateZ is used here: rotation around the edge itself naturally
  extends the plane half-depth forward and half-depth backward.
*/
.dt-slab-edge{
  position:absolute;
  z-index:2;
  top:var(--slab-edge-top, 0%);
  width:var(--slab-depth,14px);
  height:var(--slab-edge-height, 100%);
  display:none;
  pointer-events:none;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-sizing:border-box;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.42) 24%,
      rgba(190,205,220,.16) 55%,
      rgba(255,255,255,.30) 78%,
      rgba(145,160,175,.12) 100%
    );

  border-top:1px solid rgba(255,255,255,.20);
  border-bottom:1px solid rgba(255,255,255,.16);

  box-shadow:
    inset 0 0 4px rgba(255,255,255,.18);
}

.dt-object-stage.is-slab-mode .dt-slab-edge{
  display:none;
}

.dt-object-stage.is-slab-mode.is-object-flipping .dt-slab-edge{
  display:block;
}

.dt-slab-edge-right{
  left:var(--slab-edge-right, 100%);
  transform-origin:center center;
  transform:
    translateX(-50%)
    rotateY(90deg);
}

.dt-slab-edge-left{
  left:var(--slab-edge-left, 0%);
  transform-origin:center center;
  transform:
    translateX(-50%)
    rotateY(90deg);
}

/*
  No extra scale/offset is applied to the side planes.
  At rest they are edge-on; around 90° they become the visible slab edge.
*/



/* =========================================================
   DIGITAL TWIN VIEWER v0.25.0 — MULTI-PROTOCOL RUNTIME
   ========================================================= */

.dt-protocol-switch{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  margin:8px auto 2px;
  padding:3px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
}

.dt-protocol-switch[hidden]{
  display:none!important;
}

.dt-protocol-button{
  min-width:66px;
  min-height:28px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.40);
  font-size:7px;
  font-weight:900;
  letter-spacing:.13em;
  cursor:pointer;
  transition:
    color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}

.dt-protocol-button:hover,
.dt-protocol-button:focus-visible{
  color:rgba(255,255,255,.78);
}

.dt-protocol-button.is-active{
  color:#fff;
  background:rgba(230,188,104,.11);
  box-shadow:0 0 0 1px rgba(230,188,104,.22);
}

.dt-protocol-button:disabled{
  opacity:.35;
  cursor:default;
}

@media (max-width:700px){
  .dt-protocol-switch{
    margin-top:6px;
  }

  .dt-protocol-button{
    min-width:58px;
    min-height:27px;
    padding:0 10px;
    font-size:6.5px;
  }
}



/* =========================================================
   DIGITAL TWIN VIEWER v0.26.10 — CHROME iOS KEYBOARD RECOVERY
   Safari / Firefox iOS remain completely untouched.
   Chrome iOS is corrected only after keyboard dismissal.
   ========================================================= */

@media(max-width:700px) and (pointer:coarse){
  .dt-engine.has-chrome-ios-pan-correction{
    transform:translate3d(
      0,
      var(--dt-chrome-ios-pan,0px),
      0
    );
    will-change:transform;
  }
}


/* =========================================================
   DIGITAL TWIN VIEWER v0.27.13 — CHROME iOS FIXED CERTIFICATE INPUT

   Chrome iOS only: the real Gateway input never takes focus.
   A fixed proxy input is shown high in the visual viewport so
   the keyboard can open without panning the Digital Twin page.
   ========================================================= */

.dt-chrome-certificate-overlay{
  position:fixed;
  z-index:2147483600;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:
    max(64px,env(safe-area-inset-top))
    18px
    18px;
  background:rgba(3,4,6,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.dt-chrome-certificate-overlay.is-visible{
  display:flex;
}

.dt-chrome-certificate-panel{
  width:min(520px,100%);
  padding:18px;
  border:1px solid rgba(230,188,104,.24);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(17,18,24,.98),rgba(8,9,13,.98));
  box-shadow:
    0 22px 70px rgba(0,0,0,.48),
    0 0 0 1px rgba(255,255,255,.025);
}

.dt-chrome-certificate-kicker{
  margin:0 0 11px;
  color:rgba(230,188,104,.92);
  font-size:8px;
  font-weight:900;
  letter-spacing:.22em;
  text-align:center;
}

.dt-chrome-certificate-input{
  display:block;
  width:100%;
  min-height:48px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;
  color:#fff;
  background:rgba(255,255,255,.035);
  font-size:16px;
  font-weight:750;
  letter-spacing:.095em;
  text-align:center;
  text-transform:uppercase;
  outline:none;
  box-sizing:border-box;
}

.dt-chrome-certificate-input:focus{
  border-color:rgba(230,188,104,.5);
  box-shadow:0 0 0 1px rgba(230,188,104,.08);
}

.dt-chrome-certificate-actions{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  margin-top:10px;
}

.dt-chrome-certificate-actions button{
  min-height:42px;
  padding:0 12px;
  border-radius:10px;
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
  cursor:pointer;
}

.dt-chrome-certificate-cancel{
  border:1px solid rgba(255,255,255,.11);
  color:rgba(255,255,255,.58);
  background:rgba(255,255,255,.035);
}

.dt-chrome-certificate-submit{
  border:1px solid rgba(230,188,104,.34);
  color:#fff;
  background:
    linear-gradient(180deg,rgba(230,188,104,.17),rgba(230,188,104,.07));
}

/* =========================================================
   DIGITAL TWIN VIEWER — DYNAMIC OBJECT CORNER GEOMETRY
   ========================================================= */

.dt-card-wrap{
  border-radius:var(--dt-object-radius, 24px);
}

@media(max-width:700px){
  .dt-card-wrap{
    border-radius:var(--dt-object-radius-mobile, 18px);
  }
}

.dt-object-stage.is-slab-mode .dt-card-wrap{
  border-radius:var(--dt-object-radius-slab, 10px);
}