@property --duration {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --default--bg {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --default--text {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --default--padding {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --default--title-text {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@property --background-offset--number--elleven--forty {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

  :host, :root {
  --default--bg: #ffffff;
  --default--text: #262626;
  --default--padding: 0.5rem;
  --default--title-text: #de8787;
}
  @media (prefers-color-scheme: dark) {
      :host, :root {
  --default--bg: #ad0000;
  --default--text: #d6b300;
  --default--title-text: #ffffff;
}
    }
  
  [data-nc-theme~="Dark"] {
  --default--bg: #ad0000;
  --default--text: #d6b300;
  --default--title-text: #ffffff;
}
[data-nc-theme~="hotdog"] {
  --default--bg: #000000;
  --default--text: #ffffff;
}
[data-nc-theme~="Default"] {
  --default--bg: #ffffff;
  --default--text: #262626;
  --default--padding: 0.5rem;
  --default--title-text: #de8787;
}
    


@layer base {
  
  body, :host {
    /* Color */
    
    /* Fonts */
    --font-sans: 'Inter',sans-serif;
--font-beaurivage: 'Beau Rivage',handwriting;
--font-Adamina: 'Adamina',serif;
--font-Aladin: 'Aladin',display;
--font-Inter: 'Inter',sans-serif;
--font-Alfa Slab One: 'Alfa Slab One',display;

    /* Font size */
    
    /* Font weight */
    
    /* Shadows */
    
    /* Border radius */
    
    /* Spacing */
    
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}


    .dzSsTq {
      gap:24px;
      color:#18181b;
      width:100%;
      display:flex;
      padding:24px;
      background:#fcfcfc;
      min-height:100vh;
      font-family:sans-serif;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .dzSsTq {
      gap:16px;
      padding:12px;
    }
    }

    .PSMer {
      display:flex;
      padding:16px 24px;
      background:#ffffff;
      align-items:center;
      border-radius:0px;
      flex-direction:row;
      justify-content:space-between;
      anchor-name:--step-0;
      border-bottom:1px solid #e5e7eb;
    }

    @media (max-width: 768px) {

    .PSMer {
      gap:12px;
      padding:12px 16px;
      flex-wrap:wrap;
      flex-direction:row;
    }
    }

    .foWERq {
      width:40px;
      height:40px;
      display:flex;
      font-size:18px;
      background:#18181b;
      align-items:center;
      font-weight:700;
      border-radius:10px;
      justify-content:center;
    }

    @media (max-width: 640px) {

    .foWERq {
      width:36px;
      height:36px;
      font-size:16px;
      border-radius:8px;
    }
    }

    .dUxkNs {
      color:#18181b;
      font-size:20px;
      font-weight:700;
    }

    @media (max-width: 640px) {

    .dUxkNs {
      font-size:16px;
    }
    }

    .VfySl {
      gap:2px;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .VfySl {
      display:none;
    }
    }

    .fFDxdG {
      color:#18181b;
      font-size:14px;
      font-weight:600;
    }

    .cpMa-dZ {
      color:#71717a;
      font-size:12px;
    }

    .cNpBIy {
      gap:24px;
      display:flex;
      flex-direction:row;
    }

    @media (max-width: 1024px) {

    .cNpBIy {
      gap:16px;
      flex-direction:column;
    }
    }

    .NMEiZ {
      display:flex;
      flex-direction:row;
      position:relative;
    }

    @media (max-width: 768px) {

    .NMEiZ {
      display:none;
    }
    }

    .fcUCDw {
      color:#18181b;
      cursor:pointer;
      font-size:14px;
      font-weight:600;
      position:relative;
      z-index:1;
      padding:8px 12px;
      border-radius:8px;
      anchor-name:--nav-1;
      display:flex;
    }

    .fcVgYq {
      color:#71717a;
      cursor:pointer;
      font-size:14px;
      font-weight:500;
      position:relative;
      z-index:1;
      padding:8px 12px;
      border-radius:8px;
      anchor-name:--nav-2;
    }

    .vKFnf {
      color:#71717a;
      cursor:pointer;
      font-size:14px;
      font-weight:500;
      position:relative;
      z-index:1;
      padding:8px 12px;
      border-radius:8px;
      anchor-name:--nav-3;
    }

    .ZqeAA {
      color:#71717a;
      cursor:pointer;
      font-size:14px;
      font-weight:500;
      position:relative;
      z-index:1;
      padding:8px 12px;
      border-radius:8px;
      anchor-name:--nav-4;
    }

    .dGtjiv {
      gap:12px;
      display:flex;
      align-items:center;
      flex-direction:row;
    }

    @media (max-width: 640px) {

    .dGtjiv {
      gap:8px;
    }
    }

    .bKwYNE {
      gap:24px;
      display:flex;
      flex-direction:row;
      anchor-name:--step-1;
    }

    @media (max-width: 640px) {

    .bKwYNE {
      gap:12px;
      flex-direction:column;
    }
    }

    .dTRqKm {
      gap:12px;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .dTRqKm {
      gap:8px;
    }
    }

    .bwfRIE {
      width:36px;
      height:36px;
      display:flex;
      font-size:14px;
      background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      align-items:center;
      font-weight:600;
      border-radius:10px;
      justify-content:center;
    }

    @media (max-width: 640px) {

    .bwfRIE {
      width:32px;
      height:32px;
      font-size:12px;
      border-radius:8px;
    }
    }

    .dgTfMc {
      gap:24px;
      flex:1;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .dgTfMc {
      gap:16px;
    }
    }

    .eDCsvD {
      gap:16px;
      display:flex;
      align-items:center;
      flex-direction:row;
    }

    @media (max-width: 640px) {

    .eDCsvD {
      gap:8px;
    }
    }

    .xOWlG {
      gap:24px;
      flex:1;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 1024px) {

    .xOWlG {
      gap:16px;
      flex-direction:column;
    }
    }

    .cpgodh {
      gap:16px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--step-2;
    }

    @media (max-width: 640px) {

    .cpgodh {
      gap:12px;
      padding:16px;
      border-radius:12px;
    }
    }

    .bIUiLe {
      color:#18181b;
      font-size:18px;
      font-weight:600;
    }

    @media (max-width: 640px) {

    .bIUiLe {
      font-size:16px;
    }
    }

    .cbECml {
      gap:16px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--step-4;
    }

    @media (max-width: 640px) {

    .cbECml {
      gap:12px;
      padding:16px;
      border-radius:12px;
    }
    }

    .kQedW {
      color:#94a3b8;
      font-size:12px;
    }

    @media (max-width: 640px) {

    .kQedW {
      font-size:10px;
    }
    }

    .etFMwh {
      gap:12px;
      cursor:pointer;
      display:flex;
      padding:8px 16px;
      background:#f4f4f5;
      align-items:center;
      border-radius:12px;
      flex-direction:row;
    }

    @media (max-width: 640px) {

    .etFMwh {
      gap:8px;
      padding:8px;
    }
    }

    .fjQzOG {
      color:#18181b;
      cursor:pointer;
      padding:8px 16px;
      font-size:12px;
      background:#f4f4f5;
      font-weight:500;
      border-radius:8px;
    }

    @media (max-width: 640px) {

    .fjQzOG {
      padding:8px 12px;
      font-size:11px;
      min-height:40px;
    }
    }

    .GnNiu {
      gap:16px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--step-3;
    }

    @media (max-width: 640px) {

    .GnNiu {
      gap:12px;
      padding:16px;
      border-radius:12px;
    }
    }

    .ckvrGZ {
      gap:16px;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .ckvrGZ {
      gap:12px;
    }
    }

    .fdELON {
      gap:12px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--metric-1;
    }

    @media (max-width: 640px) {

    .fdELON {
      gap:8px;
      padding:16px;
      border-radius:12px;
    }
    }

    .ebszPq {
      gap:12px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--metric-2;
    }

    @media (max-width: 640px) {

    .ebszPq {
      gap:8px;
      padding:16px;
      border-radius:12px;
    }
    }

    .caYhqL {
      gap:12px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--metric-3;
    }

    @media (max-width: 640px) {

    .caYhqL {
      gap:8px;
      padding:16px;
      border-radius:12px;
    }
    }

    .cOOQwA {
      gap:12px;
      flex:1;
      border:1px solid #e5e7eb;
      display:flex;
      padding:24px;
      background:#ffffff;
      border-radius:16px;
      flex-direction:column;
      anchor-name:--metric-4;
    }

    @media (max-width: 640px) {

    .cOOQwA {
      gap:8px;
      padding:16px;
      border-radius:12px;
    }
    }

    .bgcmaj {
      width:40px;
      height:40px;
      display:flex;
      font-size:18px;
      background:#f4f4f5;
      align-items:center;
      border-radius:10px;
      justify-content:center;
    }

    @media (max-width: 640px) {

    .bgcmaj {
      width:32px;
      height:32px;
      font-size:14px;
      border-radius:8px;
    }
    }

    .bFzJYZ {
      display:flex;
      align-items:center;
      flex-direction:row;
      justify-content:space-between;
    }

    .smJjV {
      color:#10b981;
      padding:4px 8px;
      font-size:12px;
      background:rgba(16, 185, 129, 0.2);
      font-weight:600;
      border-radius:6px;
    }

    @media (max-width: 640px) {

    .smJjV {
      padding:2px 6px;
      font-size:10px;
    }
    }

    .edyXFE {
      color:#ef4444;
      padding:4px 8px;
      font-size:12px;
      background:rgba(239, 68, 68, 0.2);
      font-weight:600;
      border-radius:6px;
    }

    @media (max-width: 640px) {

    .edyXFE {
      padding:2px 6px;
      font-size:10px;
    }
    }

    .bslsav {
      color:#94a3b8;
      font-size:14px;
      font-weight:500;
    }

    @media (max-width: 640px) {

    .bslsav {
      font-size:12px;
    }
    }

    .fGToJe {
      gap:8px;
      display:flex;
      align-items:center;
      flex-direction:row;
    }

    @media (max-width: 640px) {

    .fGToJe {
      gap:4px;
      flex-wrap:wrap;
    }
    }

    .ekUsHS {
      color:#18181b;
      font-size:32px;
      font-weight:700;
    }

    @media (max-width: 640px) {

    .ekUsHS {
      font-size:24px;
    }
    }

    .dOwode {
      color:#18181b;
      font-size:14px;
      font-weight:600;
    }

    @media (max-width: 640px) {

    .dOwode {
      font-size:12px;
    }
    }

    .filoRx {
      width:40px;
      cursor:pointer;
      height:40px;
      display:flex;
      font-size:18px;
      background:#f4f4f5;
      align-items:center;
      border-radius:10px;
      justify-content:center;
      color:#18181b;
    }

    @media (max-width: 640px) {

    .filoRx {
      width:40px;
      height:40px;
      min-width:40px;
      min-height:40px;
    }
    }

    .FsiSi {
      display:flex;
      padding:12px;
      align-items:center;
      border-radius:10px;
      flex-direction:row;
      justify-content:space-between;
      border-bottom:1px solid #f4f4f5;
    }

    @media (max-width: 640px) {

    .FsiSi {
      padding:10px;
      border-radius:8px;
    }
    }

    .dcAnHD {
      gap:4px;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .dcAnHD {
      gap:2px;
    }
    }

    .cgasuV {
      color:#71717a;
      padding:6px 12px;
      font-size:12px;
      background:#f4f4f5;
      font-weight:600;
      border-radius:20px;
    }

    .cgasuV.status-active {
      color:#10b981;
      background:rgba(16, 185, 129, 0.2);
    }

    .cgasuV.status-training {
      color:#667eea;
      background:rgba(102, 126, 234, 0.2);
    }

    .cgasuV.status-streaming {
      color:#f59e0b;
      background:rgba(245, 158, 11, 0.2);
    }

    .cgasuV.status-locked {
      color:#ef4444;
      background:rgba(239, 68, 68, 0.2);
    }

    .cgasuV.status-stable {
      color:#10b981;
      background:rgba(16, 185, 129, 0.2);
    }

    .MPrYX {
      gap:8px;
      display:flex;
      flex-direction:column;
    }

    @media (max-width: 640px) {

    .MPrYX {
      gap:6px;
    }
    }

    .cZeNIL {
      color:#18181b;
      font-size:14px;
      font-weight:500;
    }

    @media (max-width: 640px) {

    .cZeNIL {
      font-size:12px;
    }
    }

    .bkrKvG {
      width:String(value=ListItem.Item.score) ++ "%";
      height:100%;
      background:#18181b;
      transition:all 0.3s ease;
      border-radius:6px;
    }

    .ckJNiY {
      width:36px;
      height:36px;
      display:flex;
      font-size:16px;
      background:#f4f4f5;
      align-items:center;
      flex-shrink:0;
      border-radius:10px;
      justify-content:center;
    }

    @media (max-width: 640px) {

    .ckJNiY {
      width:32px;
      height:32px;
      font-size:14px;
      border-radius:8px;
    }
    }

    .daOiMv {
      gap:12px;
      display:flex;
      align-items:flex-start;
      flex-direction:row;
    }

    @media (max-width: 640px) {

    .daOiMv {
      gap:10px;
    }
    }

    .ebxFMg {
      color:#18181b;
      font-size:14px;
    }

    .eedjnh {
      color:#667eea;
      font-size:14px;
      font-weight:600;
    }

    @media (max-width: 640px) {

    .eedjnh {
      font-size:12px;
    }
    }

    .elySfd {
      width:100%;
      height:12px;
      overflow:hidden;
      background:#f4f4f5;
      transition:all 0.3s ease;
      border-radius:6px;
    }

    @media (max-width: 640px) {

    .elySfd {
      height:10px;
    }
    }

    .elySfd:hover {
      box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 8px rgba(102, 126, 234, 0.3);
    }

    .dRJjyK {
      position:fixed;
      bottom:24px;
      right:24px;
      width:320px;
      background:#ffffff;
      border:1px solid #e5e7eb;
      border-radius:20px;
      padding:24px;
      display:flex;
      flex-direction:column;
      gap:16px;
      box-shadow:0 10px 25px rgba(0, 0, 0, 0.05);
      z-index:1000;
    }

    @media (max-width: 640px) {

    .dRJjyK {
      bottom:0px;
      right:0px;
      width:100%;
      border-radius:20px 20px 0 0;
    }
    }

    .ftXzFp {
      display:flex;
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
    }

    .zipFl {
      font-size:18px;
      font-weight:700;
      margin:0px;
      color:#18181b;
    }

    .eCDUpP {
      background:none;
      border:none;
      color:#94a3b8;
      cursor:pointer;
      font-size:20px;
      padding:4px;
    }

    .eCDUpP:hover {
      color:#18181b;
    }

    .bvMGEI {
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .bcsfVv {
      padding:12px;
      border-radius:12px;
      transition:all 0.3s ease;
      background:#fafafa;
      border:1px solid transparent;
    }

    .bcsfVv.active {
      background:#f4f4f5;
      border-color:#e5e7eb;
      transform:translateX(4px);
    }

    .bcsfVv.completed {
      opacity:0.5;
    }

    .dBXRCm {
      font-size:14px;
      font-weight:600;
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:8px;
    }

    .dBXRCm.completed {
      text-decoration:line-through;
      color:#94a3b8;
    }

    .dBXRCm.active {
      color:#667eea;
    }

    .bcFXwM {
      color:#10b981;
    }

    .dFFZiG {
      font-size:12px;
      color:#94a3b8;
      margin-top:4px;
      line-height:1.5;
    }

    .bpSnoZ {
      margin-top:8px;
      display:flex;
      justify-content:flex-end;
    }

    .awpjN {
      background:#18181b;
      color:white;
      border:none;
      padding:10px 20px;
      border-radius:10px;
      font-weight:600;
      cursor:pointer;
      transition:transform 0.2s ease;
    }

    .awpjN:hover {
      transform:translateY(-2px);
    }

    .awpjN:active {
      transform:translateY(0);
    }

    .dSZfZk {
      position:absolute;
      pointer-events:none;
      border:3px solid #667eea;
      border-radius:16px;
      transition:all 0.8s ease;
      box-shadow:0 0 25px 9999999px #00000082, 0 0 10px  rgba(102, 126, 234, 0.3) inset;
      z-index:999;
      top:anchor(top, 0px);;
      left:anchor(left, 0px);;
      bottom:anchor(bottom, 0px);;
      right:anchor(right, 0px);;
      animation:2s ease 0ms 1 normal none running animation-diMMIZ;
    }

    .dSZfZk.step-0 {
      position-anchor:--step-0;
    }

    .dSZfZk.step-1 {
      position-anchor:--step-1;
    }

    .dSZfZk.step-2 {
      position-anchor:--step-2;
    }

    .dSZfZk.step-3 {
      position-anchor:--step-3;
    }

    .dSZfZk.step-4 {
      position-anchor:--step-4;
    }

    @keyframes animation-diMMIZ {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
    }

    .bBlXIm {
      display:flex;
      flex-direction:column;
      gap:12px;
      padding:12px;
      background:rgba(255, 255, 255, 0.05);
      border-radius:12px;
    }

    .dqXHKt {
      font-size:16px;
      font-weight:600;
      color:#667eea;
      margin:0px;
    }

    .dnwSSm {
      font-size:14px;
      color:#94a3b8;
      line-height:1.5;
      margin:0px;
    }

    .ehztxu {
      position-anchor:--metric-1;
      background:#18181b;
      color:white;
      padding:8px 12px;
      border-radius:8px;
      font-size:12px;
      white-space:nowrap;
      pointer-events:none;
      z-index:1001;
      box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
      position:fixed;
      animation:0.2s ease-out forwards animation-bxMnXj;
      position-area:center top;
      position-try-fallbacks:flip-block;
    }

    @keyframes animation-bxMnXj {
        0% {
          opacity: 0;
        }

        0% {
          transform: translateY(0) scale(0.95);
        }

        100% {
          opacity: 1;
        }

        100% {
          transform: translateY(-10px) scale(1);
        }
    }

    .fmgdXG {
      position:fixed;
      position-anchor:--metric-2;
      background:#18181b;
      color:white;
      padding:8px 12px;
      border-radius:8px;
      font-size:12px;
      white-space:nowrap;
      pointer-events:none;
      z-index:1001;
      box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
      animation:0.2s ease-out forwards animation-DsAPz;
      position-area:center top;
      position-try-fallbacks:flip-block;
    }

    @keyframes animation-DsAPz {
        0% {
          opacity: 0;
        }

        0% {
          transform: translateY(0) scale(0.95);
        }

        100% {
          opacity: 1;
        }

        100% {
          transform:  translateY(-10px) scale(1);
        }
    }

    .bJxZPU {
      position:fixed;
      position-anchor:--metric-3;
      background:#18181b;
      color:white;
      padding:8px 12px;
      border-radius:8px;
      font-size:12px;
      white-space:nowrap;
      pointer-events:none;
      z-index:1001;
      box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
      animation:0.2s ease-out forwards animation-bxMnXj;
      position-area:center top;
      position-try-fallbacks:flip-block;
    }

    .fzvOwZ {
      position:fixed;
      position-anchor:--metric-4;
      background:#18181b;
      color:white;
      padding:8px 12px;
      border-radius:8px;
      font-size:12px;
      white-space:nowrap;
      pointer-events:none;
      z-index:1001;
      box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
      animation:0.2s ease-out forwards animation-bxMnXj;
      position-area:center top;
      position-try-fallbacks:flip-block;
    }

    .cExDtz {
      position:absolute;
      background:#f4f4f5;
      border-radius:8px;
      z-index:0;
      pointer-events:none;
      transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity:0;
      top:anchor(top);
      left:anchor(left);
      right:anchor(right);
      bottom:anchor(bottom);
    }

    .cExDtz.visible {
      opacity:1;
    }

    .cExDtz.nav-1 {
      position-anchor:--nav-1;
    }

    .cExDtz.nav-2 {
      position-anchor:--nav-2;
    }

    .cExDtz.nav-3 {
      position-anchor:--nav-3;
    }

    .cExDtz.nav-4 {
      position-anchor:--nav-4;
    }