/* Dyno Demo */
.dyno-page{
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.95), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
}
.dyno-spacer{
  min-height:120vh;
  display:grid;
  place-items:center;
  padding:2rem;
  color:#475569;
  text-align:center;
}
.dyno-spacer__copy{
  max-width:34rem;
  line-height:1.7;
  font-size:clamp(1rem, 1.1vw + 0.9rem, 1.2rem);
}
.dyno{
  padding:clamp(1.25rem, 3vw, 2.5rem) 1rem 5rem;
}
.dyno__shell{
  width:min(100%, 980px);
  margin:0 auto;
  padding:clamp(1rem, 2.5vw, 1.5rem);
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(148,163,184,0.32);
  border-radius:28px;
  backdrop-filter:blur(16px);
  box-shadow:0 18px 45px rgba(15,23,42,0.12);
}
.dyno__chart{
  position:relative;
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(148,163,184,0.22);
  border-radius:20px;
  padding:clamp(0.75rem, 2vw, 1.1rem);
  overflow:hidden;
}
.dyno__svg{
  display:block;
  width:100%;
  height:clamp(260px, 45vw, 470px);
}
.dyno__gauge{
  position:absolute;
  top:1rem;
  right:1rem;
  width:220px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#0f172a;
  box-shadow:none;
  pointer-events:none;
}
.dyno__gauge-dial{
  width:100%;
}
.dyno__gauge-svg{
  display:block;
  width:100%;
  height:auto;
  pointer-events:auto;
}
.dyno__gauge-readout{
  margin-top:-1.9rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  pointer-events:none;
}
.dyno__gauge-label{
  margin:0;
  color:rgba(15,23,42,0.82);
  font-size:1 rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  display:inline-block;
  transform:skewX(-12deg);
}
.dyno__gauge-value{
  margin:0.0rem 0 0;
  font-size:clamp(1.25rem, 1vw, 1.25rem);
  line-height:1;
  font-weight:800;
  display:inline-block;
  transform:skewX(-12deg);
}
.dyno__reset{
  display:none;
  margin:1rem auto 0;
  min-height:44px;
  padding:0.7rem 1rem;
  border:0;
  border-radius:999px;
  background:#e11d48;
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(225,29,72,0.24);
}
.dyno__reset.is-visible{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dyno__reset:focus-visible,
.dyno__gauge-control:focus-visible{
  outline:3px solid rgba(37,99,235,0.45);
  outline-offset:3px;
}
.dyno__grid-line{
  stroke:#dbe2ea;
  stroke-width:1;
}
.dyno__axis-line{
  stroke:#64748b;
  stroke-width:2;
}
.dyno__axis-label,
.dyno__tick-label{
  fill:#475569;
}
.dyno__axis-label{
  font-size:16px;
  font-weight:700;
}
.dyno__tick-label{
  font-size:13px;
}
.dyno__series{
  fill:none;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dyno__series--stock{
  stroke:#64748b;
}
.dyno__series--tuned{
  stroke:#e11d48;
}
.dyno__marker--stock{
  fill:#64748b;
  stroke:#fff;
  stroke-width:2;
}
.dyno__marker--tuned{
  fill:#e11d48;
  stroke:#fff;
  stroke-width:2;
}
.dyno__delta{
  fill:#16a34a;
  font-size:30px;
  font-weight:800;
}
.dyno__callout-line{
  fill:none;
  stroke:#cbd5e1;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dyno__callout-arrowhead{
  fill:none;
  stroke:#e11d48;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dyno__callout-box{
  fill:rgba(255,255,255,0.94);
  stroke:rgba(148,163,184,0.36);
  stroke-width:1.5;
}
.dyno__callout-title{
  fill:#e11d48;
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:1px;
}
.dyno__callout-title--mobile{
 padding: 0.6rem;
    font-size: 1.5rem;
    line-height: 1;
    max-width: min(220px, 78%);
    width: auto;
}
.dyno__callout-body{
  fill:#0f172a;
  font-size:15px;
  font-weight:500;
}
.dyno__callout-body--mobile{
  font-size:15px;
}
.dyno__gauge-arc-base{
  fill:none;
  stroke:rgba(148,163,184,0.3);
  stroke-width:14;
  stroke-linecap:round;
}
.dyno__gauge-arc-active{
  fill:none;
  stroke-width:14;
  stroke-linecap:round;
}
.dyno__gauge-arc-active--warmup{
  stroke:#f6d365;
}
.dyno__gauge-arc-active--mid{
  stroke:#22c55e;
}
.dyno__gauge-arc-active--redline{
  stroke:#ef4444;
}
.dyno__gauge-tick{
  stroke-width:1.25;
  stroke-linecap:round;
}
.dyno__gauge-tick--major{
  stroke:rgba(71,85,105,0.8);
  stroke-width:2;
}
.dyno__gauge-tick--minor{
  stroke:rgba(148,163,184,0.55);
}
.dyno__gauge-tick--redline{
  stroke:rgba(239,68,68,0.88);
}
.dyno__gauge-number{
  text-anchor:middle;
  font-size:1.9em;
  font-weight:900;
  font-style:italic;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  fill:rgba(71,85,105,0.88);
}
.dyno__gauge-number--redline{
  fill:rgba(239,68,68,0.9);
}
.dyno__gauge-meta{
  font-size:19px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  fill:rgba(51,65,85,0.92);
}
.dyno__gauge-meta--left{
  text-anchor:start;
}
.dyno__gauge-meta--right{
  text-anchor:end;
}
.dyno__gauge-needle-shadow{
  stroke:rgba(15,23,42,0.12);
  stroke-width:4;
  stroke-linecap:round;
}
.dyno__gauge-needle{
  stroke:#0f172a;
  stroke-width:3;
  stroke-linecap:round;
}
.dyno__gauge-center-outer{
  fill:rgba(255,255,255,0.92);
  stroke:rgba(148,163,184,0.5);
  stroke-width:1.5;
}
.dyno__gauge-center-inner{
  fill:#e11d48;
}
.dyno__gauge-control{
  cursor:pointer;
}
.dyno__gauge-icon{
  fill:#fff;
  stroke:none;
  pointer-events:none;
}

@media (max-width:900px){
  .dyno__svg{
    height:clamp(300px, 58vw, 440px);
  }
  .dyno__gauge{
    width:186px;
    top:0.7rem;
    right:0.7rem;
  }
}

@media (max-width:640px){
  .dyno-spacer{
    min-height:100vh;
  }
  .dyno__shell{
    padding:0.875rem;
  }
  .dyno__svg{
    height:300px;
  }
  .dyno__gauge{
    width:148px;
    top:0.55rem;
    right:0.45rem;
  }
  .dyno__gauge-readout{
    margin-top:-1.2rem;
  }
  .dyno__gauge-label{
    font-size:0.72rem;
  }
  .dyno__gauge-value{
    font-size:1.08rem;
  }
  .dyno__gauge-number{
    font-size:1.5rem;
  }
  .dyno__gauge-meta{
    font-size:9px;
  }
  .dyno__delta{
    font-size:28px;
  }
}

@media (max-width:480px){
  .dyno__shell{
    padding:0.7rem;
  }
  .dyno__chart{
    padding:0.55rem;
  }
  .dyno__svg{
    height:320px;
  }
  .dyno__gauge{
    width:132px;
    top:0.4rem;
    right:0.35rem;
  }
}

@media (max-width:375px){
  .dyno{
    padding-inline:0;
  }
  .dyno__shell{
    padding:0.55rem;
    border-radius:20px;
  }
  .dyno__chart{
    padding:0.4rem;
    border-radius:16px;
  }
  .dyno__svg{
    height:286px;
  }
  .dyno__gauge{
    width:112px;
    top:0.3rem;
    right:0.2rem;
  }
  .dyno__gauge-readout{
    margin-top:-1.3rem;
  }
  .dyno__gauge-label{
    font-size:0.66rem;
  }
  .dyno__gauge-value{
    font-size:0.96rem;
  }
  .dyno__gauge-number{
    font-size:1.05rem;
  }
  .dyno__gauge-meta{
    font-size:15px;
    letter-spacing:0.04em;
  }
  .dyno__delta{
    font-size:17px;
  }
  .dyno__callout-title--mobile{
    font-size:14px;
  }
  .dyno__callout-body--mobile{
    font-size:13px;
  }
}

  @media (max-width:300px){
  .dyno{
    padding-inline:0;
  }
  .dyno__shell{
    padding:0.55rem;
    border-radius:20px;
  }
  .dyno__chart{
    padding:0.4rem;
    border-radius:16px;
  }
  .dyno__svg{
    height:286px;
  }
  .dyno__gauge{
    width:112px;
    top:0.3rem;
    right:0.2rem;
  }
  .dyno__gauge-readout{
    margin-top:-1.3rem;
  }
  .dyno__gauge-label{
    font-size:0.66rem;
  }
  .dyno__gauge-value{
    font-size:0.96rem;
  }
  .dyno__gauge-number{
    font-size:1.05rem;
  }
  .dyno__gauge-meta{
    font-size:15px;
    letter-spacing:0.04em;
  }
  .dyno__delta{
    font-size:17px;
  }
  .dyno__callout-title--mobile{
    font-size:14px;
  }
  .dyno__callout-body--mobile{
    font-size:13px;
  }
}

[data-theme="dark"] .dyno__shell{
  background:rgba(27,33,40,0.8);
  border-color:rgba(70,81,94,0.5);
}
[data-theme="dark"] .dyno__chart{
  background:rgba(20,24,29,0.84);
  border-color:rgba(70,81,94,0.38);
}
[data-theme="dark"] .dyno__grid-line{
  stroke:#33404c;
}
[data-theme="dark"] .dyno__axis-line{
  stroke:#7d8b9b;
}
[data-theme="dark"] .dyno__axis-label,
[data-theme="dark"] .dyno__tick-label{
  fill:#d7dde5;
}
[data-theme="dark"] .dyno__callout-box{
  fill:rgba(27,33,40,0.96);
  stroke:rgba(96,110,126,0.6);
}
[data-theme="dark"] .dyno__callout-body{
  fill:#f5f7fa;
}
[data-theme="dark"] .dyno__gauge-label{
  color:#c5cad3;
}
[data-theme="dark"] .dyno__gauge-number{
  fill:#d7dde5;
}
[data-theme="dark"] .dyno__gauge-meta{
  fill:#aeb7c3;
}
[data-theme="dark"] .dyno__gauge-center-outer{
  fill:#1b2128;
  stroke:rgba(96,110,126,0.58);
}