/* stylelint-disable */

/* MakerSpace: the launch layer and the reading panel (announcement, FAQ and the 15 launch ideas).
   Same palette, type and glass as the Data Abyss page; everything new lives here so core.css and ui.css stay untouched. */

/* ---------- the launch layer ---------- */
#launch .stick { gap: 3vh; }
#launch .lv-head { max-width: 720px; }
#launch .lv-head h2 { font-size: clamp(34px, 4.4vw, 70px); }
#launch .lv-head p { font-size: 17px; max-width: 54ch; }
.lx-go { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.lx-btn { align-items: center; background: rgba(123,59,255,.32);
  border: 1px solid rgba(190,150,255,.6); border-radius: 999px; color: #fff; display: inline-flex;
  font: 500 12px/1 var(--mono); gap: 10px; letter-spacing: .14em; min-height: 44px; padding: 0 18px; text-decoration: none; text-transform: uppercase; transition: background-color .2s, border-color .2s; }
.lx-btn:hover { background: rgba(123,59,255,.55); border-color: rgba(220,200,255,.9); }
.lx-btn.ghost { background: rgba(4,4,12,.7); border-color: rgba(255,255,255,.22); }
.lx-btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.lx-btn svg { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 15px; }

.lx-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); max-width: 1180px; width: 100%; will-change: transform; }
.lx-card { align-content: start; -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(14,12,40,.92), rgba(6,8,22,.88));
  border: 1px solid rgba(180,136,255,.22); border-radius: 14px; color: #fff; display: grid; gap: 7px; min-width: 0; padding: 13px 14px 14px; position: relative; text-decoration: none; transition: border-color .25s, box-shadow .25s; }
.lx-card::before { background: linear-gradient(90deg, transparent, rgba(200,170,255,.45), transparent); border-radius: 14px 14px 0 0; content: ""; height: 1px; inset: 0 0 auto; position: absolute; }
.lx-card:hover, .lx-card:focus-visible { border-color: rgba(205,175,255,.85); box-shadow: 0 0 44px -12px rgba(140,80,255,.85); }
.lx-card-top { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.lx-n { color: var(--ember); font: 400 11px/1 var(--mono); letter-spacing: .1em; }
.lx-type { color: var(--cyan); font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lx-card b { color: #fff; font: 600 15px/1.25 var(--body); text-wrap: balance; }
.lx-line { color: var(--dim); font-size: 13.5px; line-height: 1.4; }
.lx-card .chip { font-size: 10.5px; gap: 6px; justify-self: start; margin-top: 2px; padding: 4px 9px; }
.lx-card .chip::before { height: 6px; width: 6px; }
.chip.plain::before { display: none; }

@media (max-height: 860px) and (min-width: 721px) and (min-height: 600px) {
  #launch .lv-head h2 { font-size: clamp(30px, 3.6vw, 54px); }
  #launch .lv-head p { font-size: 16px; }
  .lx-line { display: none; }
  .lx-card { gap: 6px; padding: 11px 12px 12px; }
}
@media (max-height: 720px) and (min-width: 721px) and (min-height: 600px) { #launch .lv-head p { display: none; } }
@media (max-width: 720px), (max-height: 599px) {
  .lx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-go .lx-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- the reading panel ---------- */
.lx-panel { color: #fff; display: none; inset: 0; position: fixed; z-index: 70; }
.lx-panel.is-open { display: block; }
.lx-shade { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); background: rgba(4,4,12,.82); inset: 0; position: absolute; }
.lx-panel.is-open .lx-shade { animation: lx-fade .4s ease-out both; }
.lx-scroll { inset: 0; outline: none; overflow-y: auto; overscroll-behavior: contain; position: absolute; }
.lx-bar { align-items: center; -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); background: rgba(4,4,12,.9); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; position: sticky; top: 0; z-index: 2; }
.lx-crumb { color: var(--dim); font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.lx-crumb i { font-style: normal; margin: 0 8px; opacity: .6; }
.lx-crumb b { color: #fff; font-weight: 400; }
.lx-bar-r { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.lx-tabs { background: rgba(9,7,24,.9); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; display: flex; gap: 2px; padding: 4px; }
.lx-tabs a { align-items: center; border-radius: 10px; color: var(--dim); display: inline-flex;
  font: 400 12px/1 var(--mono); letter-spacing: .08em; min-height: 34px; padding: 0 12px; text-decoration: none; text-transform: uppercase; transition: background-color .2s, color .2s; }
.lx-tabs a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lx-tabs a[aria-current="page"] { background: rgba(123,59,255,.32); color: #fff; }
.lx-close { align-items: center; appearance: none; background: rgba(123,59,255,.3);
  border: 1px solid rgba(190,150,255,.6); border-radius: 999px; color: #fff; cursor: pointer; display: inline-flex; font: 600 14px/1 var(--body); gap: 10px; min-height: 42px; padding: 0 16px; transition: background-color .2s, border-color .2s; }
.lx-close:hover { background: rgba(123,59,255,.55); border-color: rgba(220,200,255,.9); }
.lx-close kbd { border: 1px solid rgba(255,255,255,.3); border-radius: 5px; color: var(--dim); font: 400 11px/1 var(--mono); padding: 3px 6px; }

.lx-doc { margin: 0 auto; max-width: 800px; padding: clamp(32px, 6vh, 64px) 20px 90px; }
.lx-panel.is-open .lx-doc { animation: lx-rise .55s cubic-bezier(.16,1,.3,1) both; }
.lx-kicker { color: var(--cyan); font: 400 12px/1.4 var(--mono); letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.lx-doc h1 { font: 500 clamp(30px, 4.2vw, 54px)/1.06 var(--display); letter-spacing: -.015em; margin: 12px 0 0; outline: none; text-wrap: balance; }
.lx-doc h1 em { color: var(--ember); font-style: normal; }
.lx-hook { color: #fff; font: 300 clamp(21px, 2.3vw, 30px)/1.3 var(--display); margin: 18px 0 0; text-wrap: balance; }
.lx-angle { color: var(--ember); font: 600 18px/1.45 var(--body); margin: 14px 0 0; max-width: 60ch; }
.lx-sub { color: var(--dim); font-size: 19px; font-style: italic; line-height: 1.5; margin: 16px 0 0; max-width: 60ch; }
.lx-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.lx-meta .chip { font-size: 11px; }
.lx-doc p { color: var(--dim); font-size: 17px; line-height: 1.65; margin: 16px 0 0; max-width: 66ch; }
.lx-doc b { color: #fff; font-weight: 600; }
.lx-dateline { color: var(--cyan); font: 500 12px/1 var(--mono); letter-spacing: .14em; margin-right: 6px; text-transform: uppercase; }
.lx-doc h3, .lx-doc .lx-h3 { color: var(--cyan); font: 400 12px/1.3 var(--mono); letter-spacing: .14em; margin: 38px 0 12px; text-transform: uppercase; }
.lx-points { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lx-points li { background: rgba(9,7,26,.72); border: 1px solid rgba(180,136,255,.18); border-radius: 12px; color: var(--dim); font-size: 16px; line-height: 1.5; padding: 13px 16px; }
.lx-note { background: rgba(91,231,255,.06); border: 1px solid rgba(91,231,255,.32); border-radius: 12px; margin: 24px 0 0; padding: 14px 16px; }
.lx-doc .lx-note p, .lx-note { color: #fff; font-size: 15.5px; }
.lx-note p { margin: 0; }
.lx-ctas { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.lx-cta-text { background: rgba(123,59,255,.08); border: 1px dashed rgba(190,150,255,.5); border-radius: 12px; color: #fff !important; font: 600 16px/1.4 var(--body) !important; margin: 0 !important; padding: 12px 16px; }

.lx-live { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lx-tile { background: rgba(9,7,26,.72); border: 1px solid rgba(180,136,255,.18); border-radius: 14px; padding: 16px 18px; }
.lx-tile span { color: var(--cyan); font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.lx-tile p { font-size: 15.5px !important; margin: 8px 0 0 !important; }
.lx-quote { background: rgba(123,59,255,.07); border: 1px solid rgba(180,136,255,.24); border-radius: 16px; margin: 26px 0 0; padding: 22px 24px; }
.lx-quote blockquote { color: #fff; font: 300 20px/1.45 var(--display); margin: 0; }
.lx-quote figcaption { align-items: center; color: var(--dim); display: flex; flex-wrap: wrap; font: 400 12px/1.3 var(--mono); gap: 8px 12px; letter-spacing: .1em; margin-top: 14px; text-transform: uppercase; }
.lx-quote .chip { font-size: 10.5px; }

.lx-faq { border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; }
.lx-q { border-bottom: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
.lx-q h2 { color: #fff; font: 600 18px/1.35 var(--body); margin: 0; }
.lx-q p:first-of-type { margin-top: 8px; }
.lx-table { border-collapse: collapse; font-size: 15px; margin-top: 12px; width: 100%; }
.lx-table th { border-bottom: 1px solid rgba(180,136,255,.25); color: var(--dim); font: 400 11px/1.3 var(--mono); letter-spacing: .12em; padding: 10px 12px; text-align: left; text-transform: uppercase; }
.lx-table td { border-bottom: 1px solid rgba(255,255,255,.07); color: var(--dim); padding: 10px 12px; }
.lx-table td:first-child { color: #fff; }

.lx-index { display: grid; gap: 22px; margin-top: 26px; }
.lx-index h2 { color: var(--cyan); font: 400 12px/1.3 var(--mono); letter-spacing: .14em; margin: 0 0 10px; text-transform: uppercase; }
.lx-index ul { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.lx-index a { background: rgba(9,7,26,.72); border: 1px solid rgba(180,136,255,.2); border-radius: 12px; color: #fff; display: grid; gap: 4px; height: 100%; padding: 13px 15px; text-decoration: none; transition: border-color .2s; }
.lx-index a:hover { border-color: rgba(205,175,255,.8); }
.lx-index a b { font: 600 15.5px/1.3 var(--body); }
.lx-index a span { color: var(--dim); font-size: 14px; line-height: 1.4; }

.lx-pager { border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 52px; padding-top: 24px; }
.lx-pager a { background: rgba(9,7,26,.66); border: 1px solid rgba(180,136,255,.22); border-radius: 12px; color: #fff; display: grid; gap: 5px; padding: 14px 16px; text-decoration: none; transition: border-color .2s; }
.lx-pager a:hover { border-color: rgba(205,175,255,.8); }
.lx-pager a.next { grid-column: 2; text-align: right; }
.lx-pager small { color: var(--dim); font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lx-pager b { font: 500 15px/1.3 var(--display); }

@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px), (max-height: 599px) {
  .lx-bar { padding-left: 16px; padding-right: 16px; }
  .lx-crumb { display: none; }
  .lx-bar-r { justify-content: space-between; width: 100%; }
  .lx-close kbd, .lx-hide-s { display: none; }
  .lx-bar-r { flex-wrap: nowrap; }
  .lx-tabs a { padding: 0 10px; }
  .lx-live, .lx-index ul { grid-template-columns: minmax(0, 1fr); }
  .lx-doc { padding: 28px 16px 70px; }
  .lx-pager { grid-template-columns: minmax(0, 1fr); }
  .lx-pager a.next { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .lx-panel.is-open .lx-shade, .lx-panel.is-open .lx-doc { animation: none; } }

/* ---------- launches on the pillar layers ---------- */
.sh-more { align-items: center; color: var(--ember); display: inline-flex; font: 500 12px/1 var(--mono); gap: 8px; justify-self: start; letter-spacing: .12em; margin-top: 2px; text-decoration: none; text-transform: uppercase; transition: color .2s; }
.sh-more svg { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform .2s; width: 14px; }
.sh-more::after { border-radius: 16px; content: ""; inset: 0; position: absolute; z-index: 2; }
.shard:hover .sh-more { color: #fff; } .shard:hover .sh-more svg { transform: translateX(3px); }
.sh-more:focus-visible { outline: none; } .sh-more:focus-visible::after { outline: 2px solid var(--cyan); outline-offset: -2px; }
.shards.five { gap: 14px clamp(14px, 1.8vw, 26px); grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.shards.five .shard:nth-child(n) { margin-top: 0; }
.shards.five .sh-in { gap: 9px; padding: 18px 18px 20px; }
.shards.five .shard h3 { font-size: clamp(17px, 1.4vw, 20px); }
.shards.five .shard p { font-size: 15px; }
.ws.launch li { align-items: center; gap: 2px 10px; grid-template-columns: 30px minmax(0, 1fr) auto; }
.ws.launch .ws-n { align-self: start; grid-row: span 2; }
.ws.launch b, .ws.launch .ws-d { grid-column: 2; }
.ws.launch .chip { align-self: center; font-size: 10.5px; gap: 6px; grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin-top: 0; padding: 5px 9px; }
.ws.launch .chip::before { height: 6px; width: 6px; }
.ws-a { color: inherit; text-decoration: none; }
.ws-a::after { border-radius: 14px; content: ""; inset: 0; position: absolute; }
.ws-a:focus-visible { outline: none; } .ws-a:focus-visible::after { outline: 2px solid var(--cyan); outline-offset: 1px; }
.core-more { color: #fff; text-decoration: underline; text-decoration-color: rgba(180,136,255,.7); text-underline-offset: 3px; }
.core-more:hover { text-decoration-color: #fff; }
@media (max-height: 820px) and (min-width: 721px) and (min-height: 600px) { .shards.five .shard p { display: none; } }
@media (max-width: 720px), (max-height: 599px) { .shards.five { grid-template-columns: minmax(0, 1fr); } .ws.launch .chip { display: none; } }

/* ---------- screens for the launches at the core (design size 960x600, all numbers illustrative) ---------- */
.scr-flag, .scr-score, .scr-pyd, .scr-sim { display: grid; grid-template-rows: 56px 1fr; }
.fl-top, .sc-top, .pd-top, .sm-top { align-items: center; background: rgba(255,255,255,.02); border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 16px; padding: 0 24px; }
.fl-tag, .sc-tag, .pd-tag, .sm-tag { border: 1px solid #2A3247; border-radius: 5px; color: #7A8299; font: 500 9px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; margin-left: auto; padding: 5px 8px; }
.scr-flag h6, .scr-score h6, .scr-pyd h6, .scr-sim h6 { color: #6B7690; font: 600 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; margin: 0 0 14px; text-transform: uppercase; }
.sc-brand, .pd-brand, .sm-brand { color: #fff; font: 300 18px/1 "Unbounded", "Arial Black", sans-serif; }

/* Recover the Flag */
.scr-flag { background: #07090F; color: #D5DCE8; font-family: "JetBrains Mono", ui-monospace, monospace; }
.fl-brand { color: #fff; display: grid; font: 700 15px/1 "Unbounded", "Arial Black", sans-serif; gap: 5px; letter-spacing: .04em; }
.fl-brand small { color: #7CE38B; font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .2em; }
.fl-tag { margin-left: auto; }
.fl-clock { align-items: baseline; color: #8E9BB5; display: inline-flex; font: 500 11px/1 "JetBrains Mono", monospace; gap: 8px; letter-spacing: .12em; }
.fl-clock b { color: #FFD27A; font: 600 22px/1 "JetBrains Mono", monospace; letter-spacing: .02em; }
.scr-flag.won .fl-clock b { color: #7CE38B; }
.fl-body { display: grid; grid-template-columns: 540px 1fr; min-height: 0; }
.fl-pts { border-right: 1px solid #1C2233; padding: 20px 22px; position: relative; }
.fl-pt { align-items: center; background: #0C111C; border: 1px solid #1E2537; border-radius: 10px; display: grid; font-size: 13px; gap: 10px; grid-template-columns: 14px 1fr 70px 130px; height: 50px; margin-bottom: 8px; padding: 0 14px; position: relative; transition: border-color .4s, background-color .4s, box-shadow .4s; z-index: 1; }
.fl-dot { background: #3A435A; border-radius: 50%; height: 9px; transition: background-color .4s, box-shadow .4s; width: 9px; }
.fl-when { color: #E6EBF5; } .fl-size { color: #8E98B1; }
.fl-st { border: 1px solid #2A3247; border-radius: 6px; color: #6B7690; font-size: 10px; justify-self: end; letter-spacing: .14em; opacity: .3; padding: 5px 8px; transition: opacity .4s, color .4s, border-color .4s; }
.fl-pt.seen .fl-st { opacity: 1; }
.fl-pt.seen[data-k="bad"] { background: #1A0B10; border-color: #5A1F2B; } .fl-pt.seen[data-k="bad"] .fl-st { border-color: #7A2635; color: #FF6B7C; } .fl-pt.seen[data-k="bad"] .fl-dot { background: #FF3B55; box-shadow: 0 0 10px #FF3B55; }
.fl-pt.seen[data-k="warn"] { background: #18120A; border-color: #5A4520; } .fl-pt.seen[data-k="warn"] .fl-st { border-color: #6B5226; color: #F5C26B; } .fl-pt.seen[data-k="warn"] .fl-dot { background: #F5C26B; }
.fl-pt.seen[data-k="ok"] { background: #0B1A10; border-color: #2E6B3A; } .fl-pt.seen[data-k="ok"] .fl-st { border-color: #2E6B3A; color: #7CE38B; } .fl-pt.seen[data-k="ok"] .fl-dot { background: #7CE38B; box-shadow: 0 0 10px #7CE38B; }
.scr-flag.won .fl-pt[data-k="ok"] { box-shadow: 0 0 0 1px #7CE38B, 0 0 34px -6px #7CE38B; }
.fl-scan { background: linear-gradient(90deg, rgba(91,231,255,0), rgba(91,231,255,.18), rgba(91,231,255,0));
  border: 1px solid rgba(91,231,255,.55); border-radius: 10px; height: 50px; left: 22px; opacity: 0; pointer-events: none; position: absolute; right: 22px; top: 44px; transition: transform .5s ease, opacity .3s; z-index: 2; }
.fl-scan.on { opacity: 1; }
.fl-feed { align-content: start; display: grid; gap: 11px; padding: 20px 22px; }
.fl-ln { display: grid; font-size: 12.5px; gap: 10px; grid-template-columns: 62px 1fr; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.fl-ln.on { opacity: 1; transform: none; }
.fl-ln b { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; padding-top: 2px; text-transform: uppercase; }
.fl-ln span { color: #C3CBDA; }
.fl-ln.agent b { color: #FF6B7C; } .fl-ln.admin b { color: #5BE7FF; } .fl-ln.flag b { color: #7CE38B; font-size: 15px; padding-top: 0; } .fl-ln.flag span { color: #7CE38B; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Recoverability Score */
.scr-score { background: #0B0A1C; color: #E6E2F5; }
.sc-brand b { color: #B488FF; font-weight: 700; }
.sc-body { display: grid; grid-template-columns: 1fr 360px; min-height: 0; }
.sc-q { display: flex; flex-direction: column; gap: 20px; padding: 30px 34px; }
.sc-prog { color: #8D86B0; display: grid; font: 500 11px/1 "JetBrains Mono", monospace; gap: 10px; letter-spacing: .12em; text-transform: uppercase; }
.sc-prog b { color: #fff; }
.sc-prog i { background: #221E3D; border-radius: 6px; display: block; height: 6px; overflow: hidden; }
.sc-prog em { background: linear-gradient(90deg, #7B3BFF, #B488FF); display: block; height: 100%; transition: width .6s; width: 40%; }
.sc-text { color: #fff; font: 600 25px/1.3 "Hanken Grotesk", sans-serif; margin: 0; min-height: 66px; }
.sc-opts { display: grid; gap: 10px; }
.sc-opt { background: #110F26; border: 1px solid #2A2550; border-radius: 12px; color: #C9C3E6; display: block; font-size: 15px; padding: 14px 18px; transition: border-color .3s, background-color .3s, color .3s, box-shadow .3s; }
.sc-opt.on { background: rgba(123,59,255,.22); border-color: #B488FF; box-shadow: 0 0 24px -8px #7B3BFF; color: #fff; }
.sc-note { color: #7D77A0; font-size: 12px; margin-top: auto !important; }
.sc-res { background: #0E0C22; border-left: 1px solid #221E3D; display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.sc-ring { align-items: center; display: flex; gap: 18px; }
.sc-ring svg { flex: none; height: 110px; transform: rotate(-90deg); width: 110px; }
.sc-ring circle { fill: none; stroke-width: 10; }
.sc-ring .bg { stroke: #221E3D; }
.sc-ring .fg { stroke: #B488FF; stroke-dasharray: 314; stroke-dashoffset: 314; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.sc-ring > div { display: grid; gap: 8px; }
.sc-grade { color: #fff; font: 700 54px/1 "Unbounded", "Arial Black", sans-serif; }
.sc-ring span { color: #8D86B0; font: 500 12px/1 "JetBrains Mono", monospace; }
.sc-pts { color: #fff; font-weight: 600; }
.sc-areas { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sc-areas li { color: #C9C3E6; display: grid; font-size: 12.5px; gap: 6px; }
.sc-areas i { background: #221E3D; border-radius: 5px; display: block; height: 5px; overflow: hidden; }
.sc-areas em { background: #5BE7FF; display: block; height: 100%; transition: width 1s ease; width: 0; }
.sc-res h6 { color: #8D86B0; margin: 2px 0 0; }
.sc-fix { color: #E6E2F5; display: grid; font-size: 12.5px; gap: 6px; margin: 0; padding-left: 18px; }
.sc-res h6, .sc-fix { transition: opacity .5s; }
.sc-res:not(.on) h6, .sc-res:not(.on) .sc-fix, .sc-res:not(.on) .sc-ring > div { opacity: .25; }
.sc-ring > div { transition: opacity .5s; }

/* Price Your Downtime */
.scr-pyd { background: #070B14; color: #DCE6F3; }
.pd-brand b { color: #5BE7FF; font-weight: 700; }
.pd-body { display: grid; grid-template-columns: 380px 1fr; min-height: 0; }
.pd-in { border-right: 1px solid #18233A; display: flex; flex-direction: column; gap: 14px; padding: 28px 30px; }
.pd-in label { color: #7E8BA6; display: grid; font: 500 10.5px/1 "JetBrains Mono", monospace; gap: 8px; letter-spacing: .12em; text-transform: uppercase; }
.pd-field { background: #0B1220; border: 1px solid #1E2A44; border-radius: 10px; color: #3E4A62; display: block; font: 500 15px/1.25 "Hanken Grotesk", sans-serif; letter-spacing: 0; padding: 13px 15px; text-transform: none; transition: color .4s, border-color .4s; }
.pd-field.on { border-color: #2F4C7A; color: #fff; }
.pd-src { color: #7E8BA6; font-size: 12px; margin-top: auto !important; }
.pd-out { display: flex; flex-direction: column; gap: 16px; min-height: 0; padding: 28px 30px; }
.pd-big { align-items: baseline; display: flex; gap: 14px; }
.pd-big b { color: #fff; font: 600 52px/1 "Unbounded", "Arial Black", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pd-big span { color: #7E8BA6; font-size: 16px; }
.pd-bars { display: grid; flex: 1; gap: 12px; grid-template-columns: repeat(7, 1fr); min-height: 0; }
.pd-bar { position: relative; }
.pd-bar i { background: linear-gradient(180deg, #5BE7FF, #7B3BFF); border-radius: 6px 6px 2px 2px; bottom: 22px; height: 0; left: 0; position: absolute; right: 0; transition: height .9s cubic-bezier(.2,.8,.2,1); }
.pd-bar span { bottom: 0; color: #7E8BA6; font: 500 10px/1 "JetBrains Mono", monospace; left: 0; letter-spacing: .08em; position: absolute; right: 0; text-align: center; text-transform: uppercase; }
.scr-pyd.grown .pd-bar i { height: calc((100% - 22px) * var(--h)); }
.pd-bar:nth-child(2) i { transition-delay: .08s; } .pd-bar:nth-child(3) i { transition-delay: .16s; } .pd-bar:nth-child(4) i { transition-delay: .24s; }
.pd-bar:nth-child(5) i { transition-delay: .32s; } .pd-bar:nth-child(6) i { transition-delay: .4s; } .pd-bar:nth-child(7) i { transition-delay: .48s; }
.pd-cta { align-items: center; border: 1px dashed #2F4C7A; border-radius: 12px; color: #9AA8C4; display: flex; font-size: 13px; gap: 12px; justify-content: space-between; padding: 12px 14px; }
.pd-cta b { background: rgba(123,59,255,.45); border-radius: 999px; color: #fff; font: 600 13px/1 "Hanken Grotesk", sans-serif; padding: 9px 13px; white-space: nowrap; }

/* Negotiation Simulator */
.scr-sim { background: #0A0710; color: #E8E2F0; }
.sm-brand b { color: #FF9F7A; font-weight: 700; }
.sm-body { display: grid; grid-template-columns: 1fr 330px; min-height: 0; }
.sm-chat { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px; }
.sm-msg { border-radius: 14px; font-size: 14.5px; line-height: 1.45; max-width: 80%; opacity: 0; padding: 12px 15px; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.sm-msg.on { opacity: 1; transform: none; }
.sm-msg small { display: block; font: 500 9.5px/1 "JetBrains Mono", monospace; letter-spacing: .14em; margin-bottom: 6px; opacity: .75; text-transform: uppercase; }
.sm-msg.them { align-self: flex-start; background: #1E0D14; border: 1px solid #5A1F2B; color: #FFD9DE; }
.sm-msg.you { align-self: flex-end; background: #1A1530; border: 1px solid #3A2F6B; color: #EDE8FF; }
.sm-coach { background: #0E0A16; border-left: 1px solid #241C33; display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.sm-c { border-radius: 11px; display: grid; font-size: 12.5px; gap: 4px; line-height: 1.4; opacity: 0; padding: 11px 13px; transform: translateX(8px); transition: opacity .4s, transform .4s; }
.sm-c.on { opacity: 1; transform: none; }
.sm-c b { font: 600 10px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.sm-c span { color: #CFC7DE; }
.sm-c.flag { background: rgba(255,159,122,.08); border: 1px solid rgba(255,159,122,.4); } .sm-c.flag b { color: #FF9F7A; }
.sm-c.tip { background: rgba(124,227,139,.07); border: 1px solid rgba(124,227,139,.35); } .sm-c.tip b { color: #7CE38B; }
.sm-rec { align-items: center; color: #8F86A6; display: grid; font: 500 10.5px/1 "JetBrains Mono", monospace; gap: 8px 10px; grid-template-columns: 1fr auto; letter-spacing: .12em; margin-top: auto; text-transform: uppercase; }
.sm-rec i { background: #241C33; border-radius: 8px; display: block; grid-column: 1 / -1; grid-row: 2; height: 8px; overflow: hidden; }
.sm-rec em { background: linear-gradient(90deg, #7CE38B, #5BE7FF); display: block; height: 100%; transition: width .8s ease; width: 12%; }
.sm-rec b { color: #7CE38B; font-size: 14px; grid-column: 2; grid-row: 1; }
@media (max-height: 860px) and (min-width: 721px) and (min-height: 600px) { .ws.launch .chip, .ws.launch .ws-n { grid-row: 1; } .ws.launch .ws-n { align-self: center; } }