.fw {
  --fw-line:#60496e;
  --fw-dim:#c8b5d8;
  color:#f4eeff;
  font:14px/1.55 system-ui,sans-serif;
  max-width:1680px;
  margin:auto
}

.fw * {
  box-sizing:border-box
}

.fw-hero {
  padding:27px 30px;
  border:1px solid var(--fw-line);
  border-radius:22px;
  background:radial-gradient(ellipse at right,#554025,transparent 70%),#24192f;
  margin-bottom:22px
}

.fw-brand {
  display:flex;
  gap:18px;
  align-items:center
}

.fw h1 {
  font-size:clamp(24px,2.4vw,36px);
  margin:4px 0!important;
  line-height:1.2
}

.fw h1 img[data-tool-icon] {
  display:none!important
}

.fw-eyebrow {
  font-size:10px;
  letter-spacing:.16em;
  color:#efc78b;
  font-weight:750
}

.fw-hero p {
  color:var(--fw-dim);
  max-width:850px;
  margin:16px 0 0
}

.fw-desk {
  border:1px solid var(--fw-line);
  border-radius:18px;
  background:#17101f;
  overflow:hidden
}

.fw-toolbar,.fw-footer {
  padding:16px 18px;
  background:#2a1e35;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.fw-actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}

.fw button,.fw-button {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  padding:10px 13px;
  border:1px solid #856195;
  background:#392647;
  color:#f7efff;
  border-radius:8px;
  font:600 12px/1.4 system-ui;
  min-height:39px;
  cursor:pointer
}

.fw button:hover,.fw-button:hover {
  background:#513462;
  border-color:#cf9fe9
}

.fw .fw-primary {
  background:#8650b8;
  border-color:#bf92df
}

.fw button:disabled {
  opacity:.45;
  cursor:default
}

.fw input,.fw select,.fw textarea {
  width:100%;
  min-width:0;
  padding:10px;
  border:1px solid #79578d;
  background:#180f22;
  color:#f4eeff;
  border-radius:8px;
  font:inherit
}

.fw label {
  display:grid;
  gap:7px;
  font-size:12px;
  color:var(--fw-dim)
}

.fw textarea {
  resize:vertical
}

.fw button:focus-visible,.fw input:focus-visible,.fw select:focus-visible,.fw textarea:focus-visible,.fw-button:focus-within {
  outline:3px solid #e5c5ff;
  outline-offset:2px
}

.fw h2 {
  font-size:16px;
  margin:0!important
}

.fw h3 {
  font-size:14px;
  margin:12px 0 8px;
  overflow-wrap:anywhere
}

.fw-runbar {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
  padding:18px 20px;
  background:#23192d
}

.fw-runbar label {
  flex:1;
  min-width:180px;
  max-width:300px
}

.fw-origin {
  font-size:11px;
  color:#d4b6e2;
  margin:0;
  padding:0 20px 16px;
  background:#23192d
}

.fw-metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--fw-line);
  border-bottom:1px solid var(--fw-line)
}

.fw-metrics>div {
  padding:16px 22px;
  border-right:1px solid #4c355a
}

.fw-metrics strong {
  display:block;
  color:#eac890;
  font-size:24px
}

.fw-metrics span {
  font-size:11px;
  color:var(--fw-dim)
}

.fw-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  align-items:stretch
}

.fw-waterfall,.fw-inspector {
  align-self:stretch;
  min-height:0;
  padding:20px;
  min-width:0
}

.fw-waterfall {
  background:radial-gradient(ellipse at top,#302039,transparent 65%)
}

.fw-inspector {
  border-left:1px solid var(--fw-line);
  background:#281b32
}

.fw-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:16px
}

.fw-heading select {
  width:auto;
  max-width:210px;
  font-size:12px
}

.fw-heading>span {
  font-size:11px
}

.fw-legend {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:10px;
  color:var(--fw-dim);
  margin-bottom:14px
}

.fw-ready {
  color:#74dac4
}

.fw-late {
  color:#c99aff
}

.fw-failed {
  color:#f49ab0
}

.fw-scroll {
  overflow:auto;
  max-height:520px;
  border:1px solid #584166;
  border-radius:12px;
  background:#15101e
}

.fw-track {
  min-width:780px
}

.fw-track>svg {
  width:100%;
  display:block;
  background:#24192e
}

.fw .fw-request {
  display:block!important;
  width:100%;
  padding:0;
  border:0;
  border-top:1px solid #3e2c4b;
  border-radius:0;
  background:transparent;
  min-height:0;
  text-align:left
}

.fw-request svg {
  width:100%;
  display:block
}

.fw .fw-request[aria-current=true] {
  background:#41294f;
  box-shadow:inset 3px 0 #d7adf0
}

.fw-help {
  font-size:11px;
  line-height:1.65;
  color:var(--fw-dim);
  margin:12px 0 0
}

.fw-url {
  font-size:11px;
  color:#d0b0e5;
  overflow-wrap:anywhere
}

.fw-inspector dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:18px 0
}

.fw-inspector dl>div {
  background:#1d1328;
  border:1px solid #4f355f;
  padding:10px;
  border-radius:8px
}

.fw dt {
  font-size:10px;
  color:var(--fw-dim)
}

.fw dd {
  margin:4px 0 0;
  font-size:13px
}

.fw-guidance {
  font-size:12px;
  color:#edcf9f;
  background:#392a30;
  border-left:3px solid #d7ac69;
  padding:12px
}

.fw form {
  display:grid;
  gap:13px;
  margin-top:16px
}

.fw .fw-check {
  display:flex;
  gap:9px;
  align-items:center
}

.fw-check input {
  width:auto
}

.fw-comparison {
  grid-column:1/-1;
  border-top:1px solid var(--fw-line);
  padding:20px;
  background:#22172b;
  min-width:0
}

.fw-comparison h2 {
  margin-bottom:15px!important
}

.fw-table-scroll {
  overflow:auto
}

.fw table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  min-width:650px
}

.fw th,.fw td {
  text-align:left;
  padding:12px;
  border-bottom:1px solid #51365f
}

.fw th {
  color:#dfb5ff;
  background:#302039
}

.fw td:first-child {
  max-width:400px;
  overflow-wrap:anywhere
}

.fw-footer {
  border-top:1px solid var(--fw-line)
}

.fw-footer p {
  margin:0;
  font-size:12px;
  flex:1;
  min-width:200px
}

.fw [data-error=true] {
  color:#ffb6c7
}

.fw-guide {
  margin-top:24px;
  padding:24px;
  border:1px solid #543a61;
  border-radius:16px;
  background:#21172b
}

.fw-guide ol {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding-left:20px
}

.fw-guide p {
  font-size:12px;
  color:var(--fw-dim)
}

.fw-guide a {
  color:#d5b0ee
}

.fw-guide summary {
  cursor:pointer;
  color:#ddbcf5;
  font-size:12px
}

.fw-empty {
  padding:20px;
  color:var(--fw-dim)
}

.fw-focus {
  position:fixed!important;
  inset:0;
  z-index:9999;
  overflow:auto!important;
  border-radius:0!important
}

.fw [hidden] {
  display:none!important
}

@media(max-width:1000px) {
  .fw-layout {
    grid-template-columns:minmax(0,1fr) 270px
  }

  .fw-waterfall,.fw-inspector {
    padding:16px
  }

}

@media(max-width:700px) {
  .fw-layout {
    display:flex;
    flex-direction:column
  }

  .fw-waterfall,.fw-inspector,.fw-comparison {
    width:100%
  }

  .fw-inspector {
    border-left:0;
    border-top:1px solid var(--fw-line)
  }

  .fw-metrics {
    grid-template-columns:repeat(2,1fr)
  }

  .fw-brand {
    gap:12px
  }

  .fw-brand img {
    width:48px;
    height:48px
  }

  .fw-hero {
    padding:20px
  }

  .fw-runbar {
    padding:16px
  }

  .fw-runbar label {
    max-width:none
  }

  .fw-guide ol {
    grid-template-columns:1fr;
    gap:14px
  }

  .fw-heading {
    flex-wrap:wrap
  }

  .fw-heading select {
    max-width:100%
  }

  .fw-comparison {
    padding:16px
  }

  .fw-scroll {
    max-height:330px
  }

}

.fw-waterfall > .fw-comparison  {
  margin-top: 22px;
  padding: 16px 0 0;
  background: transparent;
}