:root{
      --sf-bg:#f5f9ff;
      --sf-bg-2:#e8f1fb;
      --sf-panel:#ffffff;
      --sf-panel-soft:#f4f8ff;
      --sf-stroke:#d8e3f0;
      --sf-text:#112640;
      --sf-muted:#60758d;
      --sf-accent:#2a7fff;
      --sf-accent-2:#79b2ff;
      --sf-cta:#f28b52;
      --sf-success:#17b26a;
      --sf-warning:#f79009;
      --sf-danger:#f04438;
      --sf-shadow:0 16px 34px rgba(19,52,86,.12);
      --sf-radius:20px;
      --sf-radius-sm:14px;
      --sf-maxw:1200px;
      --sf-ui-font:"Sora", "Nunito Sans", "Segoe UI", Arial, sans-serif;
    }

    *{ box-sizing:border-box; }

    html,body{
      margin:0;
      padding:0;
      width:100%;
      max-width:100%;
      overflow-x:hidden;
      background:
        radial-gradient(circle at 15% 20%, rgba(42,127,255,.14), transparent 28%),
        radial-gradient(circle at 85% 30%, rgba(242,139,82,.14), transparent 26%),
        linear-gradient(180deg, var(--sf-bg) 0%, var(--sf-bg-2) 100%);
      font-family:var(--sf-ui-font);
      color:var(--sf-text);
    }

    body{
      min-height:100vh;
      padding:20px;
    }

    html.embed-mode,
    body.embed-mode{
      background:transparent;
      min-height:1px;
      height:auto;
      overflow:hidden !important;
    }

    body.embed-mode{
      padding:0;
      overflow:hidden;
      min-height:0 !important;
    }

    body.embed-mode .sf-shell{
      width:100%;
      max-width:none;
      margin:0;
      padding:10px;
    }

    body.embed-mode .sf-widget{
      height:auto !important;
      min-height:0 !important;
    }

    body.embed-mode .sf-main{
      align-items:start;
    }

    body.embed-mode .sf-left-stack,
    body.embed-mode .sf-side--top{
      height:auto !important;
      min-height:0 !important;
    }

    body.embed-mode .sf-stage{
      height:auto !important;
      min-height:320px;
    }

    .sf-shell{
      width:min(var(--sf-maxw), 100%);
      margin:0 auto;
    }

    .sf-widget{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(255,255,255,.10);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        linear-gradient(180deg, rgba(7,21,33,.92), rgba(10,37,64,.96));
      box-shadow:0 28px 80px rgba(0,0,0,.32);
    }

    .sf-widget::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(circle at 88% 18%, rgba(30,150,236,.14), transparent 22%),
        radial-gradient(circle at 12% 86%, rgba(255,127,34,.10), transparent 18%);
    }

    .sf-topbar{
      position:relative;
      z-index:2;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding:22px 22px 0;
    }

    .sf-topbar-left{
      min-width:0;
    }

    .sf-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#d9e8f8;
      font-size:12px;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      backdrop-filter:blur(8px);
    }

    .sf-badge-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--sf-accent);
      box-shadow:0 0 0 6px rgba(30,150,236,.14);
      flex:0 0 auto;
    }

    .sf-title{
      margin:14px 0 0;
      font-size:clamp(24px, 4vw, 38px);
      line-height:1.06;
      letter-spacing:-0.03em;
      font-weight:900;
      color:var(--sf-text);
      max-width:760px;
    }

    .sf-sub{
      margin:10px 0 0;
      max-width:780px;
      color:#bfd0e3;
      font-size:14px;
      line-height:1.6;
    }

    .sf-sub b{
      color:var(--sf-text);
    }

    .sf-timebar{
      position:relative;
      z-index:2;
      height:12px;
      margin:14px 22px 0;
      border-radius:999px;
      overflow:hidden;
      background:linear-gradient(90deg, rgba(42,127,255,.08), rgba(242,139,82,.08));
      border:1px solid rgba(124,153,188,.18);
      box-shadow:inset 0 1px 2px rgba(255,255,255,.35);
    }

    .sf-timebar-fill{
      width:0%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--sf-accent) 0%, var(--sf-cta) 100%);
      box-shadow:0 0 16px rgba(42,127,255,.18);
      transition:width .12s linear;
    }

    .sf-actions{
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:flex-end;
    }

    .sf-action-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      align-items:center;
    }

    .sf-speed-row{
      display:flex;
      justify-content:flex-end;
      width:100%;
    }

    .sf-speed-select{
      appearance:none;
      min-width:140px;
      height:42px;
      border-radius:12px;
      border:1px solid var(--sf-stroke);
      background-color:#fff;
      background-image:
        linear-gradient(45deg, transparent 50%, #60758d 50%),
        linear-gradient(135deg, #60758d 50%, transparent 50%);
      background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
      background-size:6px 6px, 6px 6px;
      background-repeat:no-repeat;
      color:var(--sf-text);
      padding:0 34px 0 14px;
      font:inherit;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 8px 16px rgba(19,52,86,.08);
    }

    .sf-speed-select:focus{
      outline:none;
      border-color:rgba(42,127,255,.42);
      box-shadow:0 0 0 3px rgba(42,127,255,.14);
    }

    .sf-btn{
      appearance:none;
      border:0;
      cursor:pointer;
      border-radius:12px;
      padding:11px 14px;
      font:inherit;
      font-size:13px;
      font-weight:800;
      transition:.18s ease;
      white-space:nowrap;
    }

    .sf-btn:active{ transform:translateY(1px); }

    .sf-btn--ghost{
      background:rgba(255,255,255,.08);
      color:var(--sf-text);
      border:1px solid rgba(255,255,255,.12);
    }

    .sf-btn--ghost:hover{
      background:rgba(255,255,255,.12);
    }

    .sf-btn--cta{
      background:var(--sf-cta);
      color:var(--sf-text);
      box-shadow:0 10px 22px rgba(255,127,34,.26);
    }

    .sf-btn--cta:hover{
      filter:brightness(1.03);
    }

    .sf-main{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:minmax(320px, 1.45fr) minmax(280px, .95fr);
      gap:18px;
      align-items:stretch;
      padding:18px 22px 18px;
    }

    .sf-left-stack{
      display:grid;
      grid-template-rows:minmax(0,1fr) auto;
      gap:14px;
      height:100%;
      min-height:100%;
    }

    .sf-stage{
      position:relative;
      display:flex;
      flex-direction:column;
      border-radius:24px;
      overflow:hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.10);
      min-height:320px;
      height:100%;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }

    .sf-stage-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:16px 16px 0;
    }

    .sf-stage-label{
      font-size:12px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      color:#a9bfd6;
    }

    .sf-live{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      font-size:12px;
      color:#d7e7f8;
      font-weight:700;
    }

    .sf-live-dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--sf-success);
      box-shadow:0 0 0 6px rgba(23,178,106,.14);
      animation:sfPulse 1.8s infinite ease;
    }

    @keyframes sfPulse{
      0%,100%{ transform:scale(1); opacity:1; }
      50%{ transform:scale(1.14); opacity:.82; }
    }

    .sf-canvas-wrap{
      position:relative;
      flex:1 1 auto;
      padding:12px 16px 16px;
      min-height:360px;
    }

    canvas{
      display:block;
      width:100%;
      height:100%;
      min-height:0;
      border-radius:18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
        linear-gradient(180deg, #0b1c2b 0%, #10283f 100%);
      border:1px solid rgba(255,255,255,.08);
    }

    .sf-stage-overlay{
      position:absolute;
      left:28px;
      right:28px;
      bottom:28px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      align-items:end;
      pointer-events:none;
    }

    .sf-insight{
      padding:14px 16px;
      border-radius:16px;
      background:rgba(10,22,36,.72);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      box-shadow:0 12px 30px rgba(0,0,0,.20);
    }

    .sf-insight-label{
      margin:0 0 6px;
      font-size:11px;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
      color:#8fb9e1;
    }

    .sf-insight-text{
      margin:0;
      color:#eff6ff;
      font-size:13px;
      line-height:1.5;
      font-weight:600;
    }

    .sf-mini-metrics{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .sf-mini-metric{
      min-width:100px;
      padding:12px 12px;
      border-radius:16px;
      background:rgba(10,22,36,.72);
      border:1px solid rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      text-align:left;
      box-shadow:0 12px 30px rgba(0,0,0,.20);
    }

    .sf-mini-metric .k{
      font-size:11px;
      line-height:1.2;
      color:#9bb8d4;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
    }

    .sf-mini-metric .v{
      margin-top:6px;
      font-size:22px;
      line-height:1;
      color:var(--sf-text);
      font-weight:900;
      letter-spacing:-.03em;
    }

    .sf-side{
      display:flex;
      flex-direction:column;
      gap:14px;
      align-content:stretch;
    }

    .sf-side--top{
      height:100%;
      min-height:100%;
    }

    .sf-panel--outputs{
      display:flex;
      flex-direction:column;
      flex:1 1 auto;
      min-height:0;
    }

    .sf-panel--outputs .sf-panel-body{
      flex:1 1 auto;
    }

    .sf-panel--howto{
      margin-top:0;
    }

    .sf-side--top .sf-footer-actions{
      margin-top:10px;
    }

    .sf-panel{
      background:var(--sf-panel);
      border:1px solid var(--sf-stroke);
      border-radius:20px;
      box-shadow:var(--sf-shadow);
      overflow:hidden;
    }

    .sf-panel-head{
      padding:16px 16px 12px;
      border-bottom:1px solid var(--sf-stroke);
      background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }

    .sf-panel-kicker{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0 0 8px;
      font-size:11px;
      color:#5b7087;
      font-weight:800;
      letter-spacing:.10em;
      text-transform:uppercase;
    }

    .sf-panel-kicker span:first-child{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--sf-accent);
      box-shadow:0 0 0 6px rgba(30,150,236,.10);
      flex:0 0 auto;
    }

    .sf-panel-title{
      margin:0;
      color:var(--sf-text);
      font-size:18px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
    }

    .sf-panel-sub{
      margin:8px 0 0;
      color:var(--sf-muted);
      font-size:13px;
      line-height:1.55;
    }

    .sf-panel-body{
      padding:14px 16px 16px;
    }

    .sf-metrics{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:10px;
    }

    .sf-metric{
      border:1px solid var(--sf-stroke);
      background:var(--sf-panel-soft);
      border-radius:16px;
      padding:14px 12px;
      min-height:84px;
    }

    .sf-metric-k{
      color:var(--sf-muted);
      font-size:11px;
      line-height:1.25;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
    }

    .sf-metric-v{
      margin-top:8px;
      color:var(--sf-text);
      font-size:28px;
      line-height:1;
      font-weight:900;
      letter-spacing:-.04em;
    }

    .sf-metric-note{
      margin-top:7px;
      font-size:12px;
      line-height:1.4;
      color:#6a7f96;
      font-weight:600;
    }

    .sf-controls{
      display:grid;
      gap:12px;
    }

    .sf-control{
      display:grid;
      gap:8px;
    }

    .sf-control-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .sf-control-label{
      color:var(--sf-text);
      font-size:13px;
      font-weight:800;
    }

    .sf-control-value{
      color:var(--sf-accent);
      font-size:13px;
      font-weight:900;
    }

    .sf-range{
      appearance:none;
      width:100%;
      height:8px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(30,150,236,.18), rgba(30,150,236,.40));
      outline:none;
      border:1px solid rgba(30,150,236,.10);
    }

    .sf-range::-webkit-slider-thumb{
      appearance:none;
      width:20px;
      height:20px;
      border-radius:50%;
      background:#fff;
      border:3px solid var(--sf-accent);
      box-shadow:0 4px 12px rgba(30,150,236,.25);
      cursor:pointer;
    }

    .sf-range::-moz-range-thumb{
      width:20px;
      height:20px;
      border-radius:50%;
      background:#fff;
      border:3px solid var(--sf-accent);
      box-shadow:0 4px 12px rgba(30,150,236,.25);
      cursor:pointer;
    }

    .sf-control-help{
      color:#73879d;
      font-size:12px;
      line-height:1.45;
    }

    .sf-label-with-info{
      display:inline-flex;
      align-items:center;
      gap:7px;
    }

    .sf-info-btn{
      appearance:none;
      border:1px solid #c9d7e6;
      background:#ffffff;
      color:#607992;
      width:16px;
      height:16px;
      border-radius:50%;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font:inherit;
      font-size:10px;
      font-weight:900;
      line-height:1;
      cursor:pointer;
      padding:0;
      flex:0 0 auto;
    }

    .sf-info-btn:hover{
      background:#f0f6fc;
      border-color:#9fb9d3;
      color:#335976;
    }

    .sf-info-btn[aria-expanded="true"]{
      background:rgba(30,150,236,.10);
      border-color:rgba(30,150,236,.42);
      color:var(--sf-accent);
    }

    .sf-info-text{
      display:none;
    }

    .sf-info-text.is-open{
      display:block;
    }

    .sf-toggle-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }

    .sf-chip{
      border:1px solid var(--sf-stroke);
      background:#fff;
      color:var(--sf-text);
      padding:10px 12px;
      border-radius:12px;
      font-size:12px;
      font-weight:800;
      cursor:pointer;
      transition:.18s ease;
    }

    .sf-chip.is-active{
      background:rgba(30,150,236,.08);
      border-color:rgba(30,150,236,.25);
      color:var(--sf-accent);
      box-shadow:inset 0 0 0 1px rgba(30,150,236,.08);
    }

    .sf-footer-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:4px;
    }

    .sf-btn-ui{
      appearance:none;
      border:1px solid var(--sf-stroke);
      background:#fff;
      color:var(--sf-text);
      border-radius:12px;
      padding:11px 13px;
      font:inherit;
      font-size:13px;
      font-weight:800;
      cursor:pointer;
      transition:.18s ease;
    }

    .sf-btn-ui:hover{
      background:var(--sf-panel-soft);
    }

    .sf-btn-ui--primary{
      background:var(--sf-accent);
      color:var(--sf-text);
      border-color:transparent;
      box-shadow:0 10px 20px rgba(30,150,236,.20);
    }

    .sf-btn-ui--primary:hover{
      filter:brightness(1.03);
    }

    .sf-story{
      display:grid;
      gap:10px;
    }

    .sf-panel--howto .sf-story{
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      align-items:stretch;
    }

    .sf-panel--howto .sf-story-item{
      height:100%;
    }

    .sf-story-item{
      border:1px solid var(--sf-stroke);
      background:var(--sf-panel-soft);
      border-radius:16px;
      padding:12px 12px;
    }

    .sf-story-item-title{
      margin:0;
      color:var(--sf-text);
      font-size:13px;
      font-weight:900;
    }

    .sf-story-item-desc{
      margin:6px 0 0;
      color:var(--sf-muted);
      font-size:12.5px;
      line-height:1.5;
    }

    .sf-note{
      margin-top:10px;
      font-size:12px;
      line-height:1.55;
      color:#73879d;
    }

    .sf-note b{
      color:var(--sf-text);
    }

    @media (max-width: 980px){
      .sf-main{
        grid-template-columns:1fr;
      }

      .sf-side--top{
        align-self:auto;
        height:auto;
        min-height:0;
      }

      .sf-left-stack{
        height:auto;
        min-height:0;
        grid-template-rows:auto auto;
      }

      .sf-stage{
        min-height:390px;
        height:auto;
      }

      .sf-stage-overlay{
        grid-template-columns:1fr;
      }

      .sf-mini-metrics{
        justify-content:flex-start;
      }

      .sf-topbar{
        flex-direction:column;
        align-items:flex-start;
      }

      .sf-actions{
        align-items:flex-start;
        width:100%;
      }

      .sf-action-row,
      .sf-speed-row{
        justify-content:flex-start;
      }

      .sf-panel--controls{
        margin-top:0;
      }

      .sf-panel--outputs{
        flex:0 0 auto;
      }

      .sf-panel--howto{
        margin-top:0;
      }

      .sf-panel--howto .sf-story{
        grid-template-columns:1fr 1fr;
      }
    }

    @media (max-width: 768px){
      body{
        padding:10px;
      }

      body.embed-mode{
        padding:0;
      }

      body.embed-mode .sf-shell{
        padding:8px;
      }

      .sf-widget{
        border-radius:24px;
      }

      .sf-topbar{
        gap:14px;
        padding:18px 14px 0;
      }

      .sf-title{
        font-size:clamp(26px, 9vw, 34px);
      }

      .sf-sub{
        max-width:none;
        font-size:13px;
        line-height:1.5;
      }

      .sf-actions{
        width:100%;
        align-items:stretch;
      }

      .sf-action-row{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
        width:100%;
      }

      .sf-speed-row{
        width:100%;
      }

      .sf-btn,
      .sf-speed-select,
      .sf-btn-ui{
        min-height:46px;
      }

      .sf-speed-select{
        width:100%;
        min-width:0;
      }

      .sf-timebar{
        height:10px;
        margin:12px 14px 0;
      }

      .sf-main{
        gap:14px;
        padding:14px 14px 16px;
      }

      .sf-left-stack{
        gap:12px;
      }

      .sf-panel{
        border-radius:18px;
      }

      .sf-panel-head{
        padding:14px 14px 10px;
      }

      .sf-panel-body{
        padding:12px 14px 14px;
      }

      .sf-panel-title{
        font-size:17px;
      }

      .sf-panel-sub{
        font-size:12.5px;
        line-height:1.5;
      }

      .sf-stage{
        min-height:0;
      }

      .sf-stage-head{
        align-items:flex-start;
        padding:14px 12px 0;
      }

      .sf-live{
        flex:0 0 auto;
        min-height:36px;
        padding:8px 10px;
        font-size:11px;
      }

      .sf-canvas-wrap{
        display:grid;
        gap:12px;
        padding:10px 12px 12px;
        height:auto;
        min-height:0;
      }

      canvas{
        display:block;
        width:100%;
        height:auto;
        min-height:240px;
        aspect-ratio:1.45 / 1;
        border-radius:16px;
      }

      .sf-stage-overlay{
        position:static;
        left:auto;
        right:auto;
        bottom:auto;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        align-items:stretch;
        pointer-events:auto;
      }

      .sf-insight{
        padding:12px 14px;
        border-radius:14px;
      }

      .sf-insight-text{
        font-size:12.5px;
        line-height:1.45;
      }

      .sf-mini-metrics{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
        justify-content:stretch;
      }

      .sf-mini-metric{
        min-width:0;
        padding:10px;
        border-radius:14px;
      }

      .sf-mini-metric .v{
        font-size:18px;
      }

      .sf-metrics{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
      }

      .sf-metric{
        min-height:0;
        border-radius:14px;
        padding:12px 10px;
      }

      .sf-metric-v{
        font-size:24px;
      }

      .sf-metric-note{
        margin-top:6px;
        font-size:11.5px;
        line-height:1.4;
      }

      .sf-panel--howto .sf-story{
        grid-template-columns:1fr;
        gap:10px;
      }

      .sf-story-item{
        border-radius:14px;
        padding:12px;
      }

      .sf-story-item-title{
        font-size:12.5px;
      }

      .sf-story-item-desc,
      .sf-note{
        font-size:11.5px;
        line-height:1.45;
      }

      .sf-controls{
        gap:10px;
      }

      .sf-control{
        gap:8px;
        padding:12px;
        border-radius:16px;
        border:1px solid var(--sf-stroke);
        background:var(--sf-panel-soft);
      }

      .sf-control-top{
        align-items:flex-start;
      }

      .sf-control-label{
        font-size:12.5px;
        line-height:1.35;
      }

      .sf-control-value{
        display:inline-flex;
        align-items:center;
        min-height:28px;
        padding:0 8px;
        border-radius:999px;
        background:rgba(255,255,255,.82);
        border:1px solid var(--sf-stroke);
      }

      .sf-range{
        height:10px;
      }

      .sf-range::-webkit-slider-thumb{
        width:24px;
        height:24px;
      }

      .sf-range::-moz-range-thumb{
        width:24px;
        height:24px;
      }

      .sf-info-btn{
        width:18px;
        height:18px;
      }

      .sf-toggle-row{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:8px;
      }

      .sf-chip{
        min-height:44px;
        padding:10px 8px;
        font-size:11.5px;
        text-align:center;
      }

      .sf-footer-actions{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:8px;
      }

      .sf-footer-actions > :first-child{
        grid-column:1 / -1;
      }
    }

    @media (max-width: 360px){
      .sf-metrics{
        grid-template-columns:1fr;
      }
    }

    /* Light palette refinements */
    .sf-widget{
      border:1px solid rgba(130,160,195,.34);
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,253,255,.98)),
        linear-gradient(180deg, #eef5ff, #e5effb);
      box-shadow:0 26px 58px rgba(19,52,86,.14);
    }

    .sf-widget::before{
      background:
        radial-gradient(circle at 88% 18%, rgba(42,127,255,.12), transparent 22%),
        radial-gradient(circle at 12% 86%, rgba(242,139,82,.10), transparent 18%);
    }

    .sf-badge{
      border:1px solid #d5e3f2;
      background:rgba(255,255,255,.82);
      color:#33506c;
    }

    .sf-sub{
      color:var(--sf-muted);
    }

    .sf-btn--ghost{
      background:#ffffff;
      color:var(--sf-text);
      border:1px solid var(--sf-stroke);
    }

    .sf-btn--ghost:hover{
      background:var(--sf-panel-soft);
    }

    .sf-btn--cta{
      color:#fff;
      box-shadow:0 10px 22px rgba(242,139,82,.30);
    }

    .sf-stage{
      background:linear-gradient(180deg, #ffffff, #f3f8ff);
      border:1px solid rgba(124,153,188,.28);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
    }

    .sf-stage-label{
      color:#5d7794;
    }

    .sf-live{
      background:rgba(255,255,255,.90);
      border:1px solid #d8e7f5;
      color:#45607b;
    }

    canvas{
      background:
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.82)),
        linear-gradient(180deg, #fdfefe 0%, #e9f1fd 100%);
      border:1px solid rgba(124,153,188,.28);
    }

    .sf-insight{
      background:rgba(255,255,255,.92);
      border:1px solid #d8e7f5;
      box-shadow:0 12px 24px rgba(21,54,88,.14);
    }

    .sf-insight-label{
      color:#4f83b3;
    }

    .sf-insight-text{
      color:var(--sf-text);
    }

    .sf-mini-metric{
      background:rgba(255,255,255,.92);
      border:1px solid #d8e7f5;
      box-shadow:0 10px 22px rgba(21,54,88,.14);
    }

    .sf-mini-metric .k{
      color:#6b84a0;
    }

    .sf-btn-ui--primary{
      color:#fff;
    }