/* ==========================================================================
   ORBIT — product UI (built from real markup, not screenshots)
   hero workspace · feature demos · how-it-works window
   ========================================================================== */

/* ---------- Shared bits ---------- */
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #2b303d; }
.caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: currentColor; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 550; white-space: nowrap; }
.chip u { width: 6px; height: 6px; border-radius: 50%; background: currentColor; text-decoration: none; }
.chip--ok { background: rgba(47, 211, 154, 0.14); color: #21b985; }
.chip--warn { background: rgba(255, 176, 58, 0.16); color: #d98a0b; }
.chip--bad { background: rgba(255, 92, 114, 0.14); color: #f2455f; }
.dark .chip--ok, .app .chip--ok { color: #4ee2b0; }
.dark .chip--warn, .app .chip--warn { color: #ffc25a; }
.abtn { display: inline-flex; align-items: center; min-height: 28px; padding: 0 0.75rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; font-size: 0.75rem; font-weight: 550; color: #c9cedc; background: rgba(255,255,255,0.03); transition: transform 0.25s var(--ease), background-color 0.25s; user-select: none; }
.abtn--go { background: var(--blue); border-color: transparent; color: #fff; }
.abtn.is-press { transform: scale(0.94); background: #7e8dff; }
.bar { position: relative; height: 6px; border-radius: 6px; background: rgba(11,12,16,0.07); overflow: hidden; }
.dark .bar, .app .bar { background: rgba(255,255,255,0.08); }
.bar u { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--grad); transform-origin: left; text-decoration: none; }
.js .in-view .bar u, .js .bar u.run { animation: grow 1.4s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.seg button { min-height: 28px; padding: 0 0.7rem; border-radius: 7px; font-family: var(--mono); font-size: 0.72rem; color: var(--mut); transition: color 0.2s, background-color 0.25s, box-shadow 0.25s; }
.seg button.is-on { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(11,12,16,0.12), 0 0 0 1px var(--line); }

/* ==========================================================================
   Hero workspace (.app)
   ========================================================================== */
.app { --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.14); position: relative; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: linear-gradient(180deg, #0f121a, #0a0c11); box-shadow: 0 60px 120px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 0 rgba(255,255,255,0.12) inset; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: #dfe3ee; text-align: left; }
.app svg { width: 14px; height: 14px; flex: none; }
.app__chrome { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.015); }
.app__url { display: inline-flex; align-items: center; gap: 7px; margin: 0 auto; padding: 4px 12px; border-radius: 8px; background: rgba(255,255,255,0.04); color: #7d8397; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.app__url svg { width: 12px; height: 12px; color: #4ee2b0; }
.app__avatars { display: inline-flex; align-items: center; }
.app__avatars b, .app__avatars em, .card b, .feed b.av { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border: 2px solid #0d1017; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h) 75% 62%), hsl(calc(var(--h) + 40) 75% 45%)); font-size: 8.5px; font-weight: 650; font-style: normal; color: #fff; }
.app__avatars em { background: #232836; color: #9aa1b6; }

.app__body { display: grid; grid-template-columns: 208px minmax(0, 1fr) 250px; height: 560px; }

.side { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-right: 1px solid var(--line); background: rgba(255,255,255,0.012); }
.side__ws { display: flex; align-items: center; gap: 9px; padding: 6px 8px; margin-bottom: 8px; border-radius: 9px; font-weight: 600; }
.side__ws svg:last-child { margin-left: auto; color: #6b7185; }
.side__logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #7d8cff, #4a5bff); color: #fff; font-size: 11px; font-weight: 700; }
.side__h { margin: 12px 8px 4px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #5d6376; }
.side__nav { display: grid; gap: 1px; }
.side__nav a { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; color: #98a0b4; }
.side__nav a.is-on { background: rgba(91,108,255,0.14); color: #fff; }
.side__nav a em { margin-left: auto; padding: 0 6px; border-radius: 9px; background: var(--ember); color: #1a0d05; font-size: 10px; font-weight: 700; font-style: normal; }
.side__nav .is-proj i { width: 8px; height: 8px; margin: 0 3px; border-radius: 3px; background: var(--c); }
.side__credits { margin-top: auto; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.02); font-size: 11px; }
.side__credits div { display: flex; justify-content: space-between; margin-bottom: 8px; color: #8d93a6; }
.side__credits b { color: #dfe3ee; font-weight: 500; }
.side__credits i { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.side__credits u { display: block; width: 62%; height: 100%; background: var(--grad); }

.main { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.main__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 0; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 8px; }
.crumbs span:first-child { color: #6b7185; }
.crumbs i { font-style: normal; color: #454b5d; }
.crumbs b { font-size: 14px; font-weight: 600; color: #fff; }
.crumbs .chip { margin-left: 4px; }
.app .chip--warn { background: rgba(255,176,58,0.16); }
.tabs { display: flex; gap: 2px; }
.tabs a { padding: 5px 10px; border-radius: 7px; color: #8d93a6; }
.tabs a.is-on { background: rgba(255,255,255,0.07); color: #fff; }

.ai { position: relative; display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 0 12px; height: 40px; border: 1px solid rgba(143,162,255,0.35); border-radius: 11px; background: linear-gradient(180deg, rgba(91,108,255,0.12), rgba(91,108,255,0.04)); box-shadow: 0 0 0 3px rgba(91,108,255,0.08), 0 8px 30px -12px rgba(91,108,255,0.5); }
.ai__ic { color: #a9b6ff; }
.ai__text { flex: 1; min-width: 0; font-size: 13px; color: #eef0f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai kbd { font-size: 10px; height: 20px; color: #8d93a6; border-color: rgba(255,255,255,0.14); }

.airesp { margin: 8px 16px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,0.03); max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height 0.6s var(--ease), opacity 0.4s, transform 0.5s var(--ease), padding 0.5s var(--ease), margin 0.5s; }
.airesp.is-on { max-height: 130px; opacity: 1; transform: none; padding: 10px 12px; }
.airesp__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: #a9b6ff; }
.airesp__head b { color: #fff; font-weight: 600; }
.airesp__head span { margin-left: auto; font-size: 10.5px; color: #6b7185; }
.airesp p { color: #c3c8d8; font-size: 12.5px; min-height: 2.6em; }
.airesp__act { display: flex; gap: 6px; margin-top: 8px; }
.airesp .is-hidden { display: none; }

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; padding: 14px 16px 16px; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.col h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 2px; font-size: 11.5px; font-weight: 550; color: #8d93a6; }
.col h4 em { padding: 0 6px; border-radius: 9px; background: rgba(255,255,255,0.06); font-style: normal; font-size: 10.5px; color: #98a0b4; transition: transform 0.3s var(--ease); }
.col h4 em.bump { transform: scale(1.35); background: rgba(91,108,255,0.3); color: #fff; }
.card { display: grid; gap: 9px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #151a25, #111520); box-shadow: 0 6px 16px -10px rgba(0,0,0,0.7); transition: border-color 0.3s, background-color 0.3s; }
.card p { font-size: 12.5px; font-weight: 500; color: #e6e9f2; }
.card__m { display: flex; align-items: center; gap: 7px; }
.card__m b { margin-left: auto; width: 20px; height: 20px; border-width: 2px; }
.card__m small { margin-left: auto; font-size: 10.5px; color: #7d8397; }
.card__m small + b { margin-left: 0; }
.card__m .due { margin-left: auto; font-size: 10px; color: var(--ember); }
.card__bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.card__bar u { display: block; width: var(--w); height: 100%; background: var(--grad); transition: width 0.9s var(--ease); }
.card .tick { width: 14px; height: 14px; margin-left: auto; color: #4ee2b0; }
.card--done { opacity: 0.6; }
.card.is-hot { border-color: rgba(143,162,255,0.6); box-shadow: 0 0 0 3px rgba(91,108,255,0.16), 0 10px 26px -10px rgba(91,108,255,0.6); }
.card.is-blocked { border-color: rgba(255,138,76,0.5); }
.tag { padding: 1px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.tag--a { background: rgba(143,110,255,0.16); color: #b9a4ff; }
.tag--b { background: rgba(255,138,76,0.15); color: #ffab7d; }
.tag--c { background: rgba(47,211,154,0.14); color: #57e0b1; }
.tag--d { background: rgba(63,208,255,0.14); color: #6fdcff; }
.tag--e { background: rgba(255,92,150,0.14); color: #ff8db8; }

.cursor { position: absolute; z-index: 4; display: inline-flex; align-items: flex-start; gap: 0; pointer-events: none; color: var(--c, #ff8a4c); filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.cursor svg { width: 13px; height: 16px; }
.cursor b { margin: 10px 0 0 -2px; padding: 1px 7px; border-radius: 6px; background: var(--c); color: #10121a; font-size: 10px; font-weight: 650; }
.cursor--1 { --c: #ff8a4c; left: 0; top: 0; animation: cur1 14s var(--ease-io) infinite; }
.cursor--2 { --c: #3fd0ff; left: 0; top: 0; animation: cur2 17s var(--ease-io) infinite; }
@keyframes cur1 { 0% { transform: translate(70%, 280px); } 25% { transform: translate(38%, 340px); } 50% { transform: translate(58%, 230px); } 75% { transform: translate(24%, 300px); } 100% { transform: translate(70%, 280px); } }
@keyframes cur2 { 0% { transform: translate(25%, 380px); } 30% { transform: translate(82%, 420px); } 60% { transform: translate(48%, 310px); } 100% { transform: translate(25%, 380px); } }

.rail { display: flex; flex-direction: column; gap: 14px; padding: 14px; border-left: 1px solid var(--line); background: rgba(255,255,255,0.012); min-height: 0; overflow: hidden; }
.rail__h { margin-bottom: 10px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #5d6376; }
.health { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); }
.ringchart { position: relative; width: 108px; height: 108px; margin: 2px auto 12px; }
.ringchart svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rc__bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 7; }
.rc__fg { fill: none; stroke: url(#none); stroke: #7b8bff; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 1.2s var(--ease); filter: drop-shadow(0 0 6px rgba(91,108,255,0.7)); }
.ringchart b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.health__l { display: grid; gap: 6px; }
.health__l li { display: flex; justify-content: space-between; color: #8d93a6; }
.health__l b { font-weight: 550; color: #e6e9f2; }
.health__l .up { color: #4ee2b0; } .health__l .dn { color: #ffab7d; }
.feed { flex: 1; min-height: 0; overflow: hidden; }
.feed ul { display: grid; gap: 10px; }
.feed li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; color: #9aa1b6; font-size: 11.5px; animation: feedin 0.7s var(--ease) both; }
.feed li strong { color: #e6e9f2; font-weight: 550; }
.feed li small { display: block; color: #5d6376; font-size: 10px; }
.feed li .fi { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(91,108,255,0.16); color: #a9b6ff; }
.feed li .fi svg { width: 12px; height: 12px; }
.feed b.av { margin: 0; border: 0; }
@keyframes feedin { from { opacity: 0; transform: translateY(-10px); } }

.toast { position: absolute; right: 264px; bottom: 16px; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 1px solid rgba(143,162,255,0.3); border-radius: 12px; background: rgba(20,24,36,0.92); backdrop-filter: blur(10px); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.7); opacity: 0; transform: translateY(14px) scale(0.97); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.toast.is-on { opacity: 1; transform: none; }
.toast i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(91,108,255,0.2); color: #a9b6ff; }
.toast b { display: block; font-size: 12px; color: #fff; font-weight: 600; }
.toast span { font-size: 11px; color: #8d93a6; }

@media (max-width: 1140px) {
  .app__body { grid-template-columns: 196px minmax(0, 1fr); }
  .rail { display: none; }
  .toast { right: 16px; }
}
@media (max-width: 820px) {
  .app__body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .side { display: none; }
  .app__url { display: none; }
  .app__avatars { margin-left: auto; }
  .board { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 176px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 60px; min-height: 330px; scrollbar-width: none; }
  .board::-webkit-scrollbar { display: none; }
  .col { scroll-snap-align: start; }
  .tabs { display: none; }
  .cursor { display: none; }
  .toast { left: 12px; right: 12px; bottom: 12px; }
}

/* ==========================================================================
   Feature demos (light surfaces)
   ========================================================================== */
.wf { border: 1px solid var(--line); border-radius: 16px; background: #f6f7fb; overflow: hidden; }
.wf svg { width: 16px; height: 16px; flex: none; }
.wf__prompt { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); background: #fff; font-size: 0.88rem; color: #2c303c; min-height: 48px; }
.wf__prompt svg { color: var(--blue); }
.wf__prompt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf__canvas { position: relative; height: 410px; background-image: radial-gradient(#d3d8e6 1px, transparent 1px); background-size: 18px 18px; }
.wf .wf__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wf__lines path { fill: none; stroke: #b9c0d6; stroke-width: 1.6; opacity: 0; transition: opacity 0.6s; }
.wf__canvas.has-nodes .wf__lines path:not(.flow) { opacity: 1; }
.wf__lines .flow { stroke: var(--blue); stroke-dasharray: 5 7; animation: dash 1.2s linear infinite; }
.wf__lines .flow.is-on { opacity: 1; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.node { position: absolute; display: flex; align-items: center; gap: 0.7rem; width: 68%; padding: 0.65rem 0.8rem; border: 1px solid var(--line-2); border-radius: 13px; background: #fff; box-shadow: 0 8px 24px -14px rgba(11,12,16,0.35); opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.node.is-in { opacity: 1; transform: none; }
.node i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); color: #4a5165; }
.node i.aii { background: linear-gradient(135deg, #7d8cff, #4a5bff); color: #fff; }
.node small { display: block; font-size: 0.66rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dim); }
.node b { display: block; font-size: 0.86rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.node > div { min-width: 0; }
.node__out { display: block; max-height: 0; overflow: hidden; margin-top: 0; font-size: 0.72rem; color: var(--mut); transition: max-height 0.5s var(--ease), margin 0.5s; }
.node__out.is-on { max-height: 3.4em; margin-top: 3px; }
.node u { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #d3d8e6; text-decoration: none; transition: background-color 0.3s; }
.node.is-run { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(91,108,255,0.14), 0 12px 28px -14px rgba(91,108,255,0.6); }
.node.is-run u { background: var(--blue); animation: pulse 1s ease-in-out infinite; }
.node.is-done u { background: var(--green); animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(91,108,255,0.22); } }
.node--a { left: 4%; top: 3%; } .node--b { left: 28%; top: 27%; } .node--c { left: 4%; top: 57%; } .node--d { left: 28%; top: 81%; }
.fc__ui { container-type: inline-size; }
@container (min-width: 540px) {
  .wf__canvas { height: 320px; }
  .node { width: 27.5%; padding: 0.6rem 0.65rem; gap: 0.55rem; }
  .node--a { left: 2%; top: 38%; } .node--b { left: 36%; top: 38%; } .node--c { left: 70.5%; top: 8%; } .node--d { left: 70.5%; top: 68%; }
}

.pi { display: grid; gap: 0.8rem; }
.pi__list { display: grid; gap: 0.5rem; }
.pi__row { position: relative; display: grid; gap: 0.55rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.3s; cursor: default; }
.pi__row:hover { border-color: rgba(91,108,255,0.4); transform: translateX(3px); box-shadow: 0 10px 24px -16px rgba(91,108,255,0.5); }
.pi__row::after { content: attr(data-forecast); position: absolute; right: 0.9rem; bottom: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 6px; background: #0b0c10; color: #fff; font-family: var(--mono); font-size: 0.66rem; opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.3s var(--ease); pointer-events: none; }
.pi__row:hover::after { opacity: 1; transform: none; }
.pi__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pi__top b { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.02em; }
.pi__meta { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--dim); }
.bar--warn u { background: linear-gradient(90deg, #ffc25a, #ff8a4c); }
.bar--warn i { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: #f2455f; }
.pi__insight { display: flex; gap: 0.75rem; padding: 0.85rem 0.95rem; border: 1px solid rgba(255,176,58,0.4); border-radius: 13px; background: linear-gradient(180deg, #fff9ec, #fff5e0); opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease) 0.5s, transform 0.8s var(--ease) 0.5s; }
.in-view .pi__insight { opacity: 1; transform: none; }
.pi__insight i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,176,58,0.25); color: #b86b00; }
.pi__insight svg { width: 16px; height: 16px; }
.pi__insight b { display: block; font-size: 0.88rem; font-weight: 600; color: #4a2f00; }
.pi__insight p { margin-top: 0.15rem; font-size: 0.8rem; color: #7a5a1f; }
.pi__insight u { text-decoration-color: rgba(122,90,31,0.5); text-underline-offset: 2px; }

.kn { display: grid; gap: 0.7rem; }
.kn svg { width: 15px; height: 15px; flex: none; }
.kn__q { display: flex; align-items: center; gap: 0.6rem; min-height: 46px; padding: 0 0.9rem; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; font-size: 0.9rem; box-shadow: 0 0 0 4px rgba(91,108,255,0.06); }
.kn__q svg { color: var(--dim); }
.kn__q span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn__a { position: relative; padding: 0.95rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-height: 196px; }
.kn__c { opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.kn__a.is-on .kn__c { opacity: 1; transform: none; }
.kn__sk { position: absolute; inset: 0.95rem; display: grid; gap: 0.6rem; align-content: start; opacity: 1; transition: opacity 0.3s; pointer-events: none; }
.kn__sk i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #eceef4 30%, #f7f8fb 50%, #eceef4 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.kn__sk i:nth-child(1) { width: 34%; height: 12px; } .kn__sk i:nth-child(3) { width: 92%; } .kn__sk i:nth-child(4) { width: 60%; }
.kn__a.is-on .kn__sk { opacity: 0; }
@keyframes shimmer { to { background-position: -200% 0; } }
.kn__h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; color: var(--blue); font-size: 0.82rem; }
.kn__h b { color: var(--fg); font-weight: 600; }
.kn__h span { margin-left: auto; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(47,211,154,0.14); color: #0c8f63; font-size: 0.66rem; }
.kn__a p { font-size: 0.9rem; line-height: 1.55; color: #2c303c; min-height: 6.2em; max-width: none; }
.kn__src { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.kn__src a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 0.74rem; color: var(--mut); opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.5s var(--ease), border-color 0.25s, color 0.25s; }
.kn__src a svg { width: 13px; height: 13px; }
.kn__src.is-on a { opacity: 1; transform: none; }
.kn__src.is-on a:nth-child(2) { transition-delay: 0.1s; } .kn__src.is-on a:nth-child(3) { transition-delay: 0.2s; }
.kn__src a:hover { border-color: var(--blue); color: var(--blue); }

.au__grid { display: grid; gap: 0.9rem; }
.au__rules { display: grid; gap: 0.5rem; align-content: start; }
.rule { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; transition: opacity 0.35s, border-color 0.3s, background-color 0.3s; }
.rule:not(.is-on) { opacity: 0.55; background: var(--surface-2); }
.rule__t { flex: 1; min-width: 0; font-size: 0.88rem; line-height: 1.6; color: #2c303c; }
.rule__t small { display: inline-block; margin: 0 0.4rem 0 0.35rem; padding: 0 0.4rem; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); font-size: 0.66rem; text-transform: uppercase; color: var(--dim); }
.rule__t small:first-child { margin-left: 0; }
.rule__t b { font-weight: 600; }
.sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #cfd4e2; transition: background-color 0.3s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11,12,16,0.3); transition: transform 0.4s var(--ease); }
.sw.is-on { background: var(--blue); }
.sw.is-on i { transform: translateX(16px); }
.au__side { display: grid; gap: 0.6rem; grid-template-rows: auto 1fr; }
.au__saved { padding: 0.95rem; border-radius: 14px; background: linear-gradient(160deg, #0d1018, #151a2e); color: #eef0f6; }
.au__saved small { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: #8d93a6; }
.au__saved div { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.2rem 0; }
.au__saved b { font-size: 3rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.au__saved span { color: #98a0b6; }
.au__saved em { font-style: normal; font-size: 0.74rem; color: #4ee2b0; }
.au__log { display: grid; gap: 0.35rem; align-content: start; height: 128px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.au__log li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-size: 0.74rem; color: #3b4050; animation: feedin 0.6s var(--ease) both; }
.au__log li svg { width: 13px; height: 13px; color: var(--green); flex: none; }
.au__log li span { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; color: var(--dim); }
@media (min-width: 720px) { .au__grid { grid-template-columns: 1.35fr 1fr; } }
@media (min-width: 900px) and (max-width: 1100px) { .au__grid { grid-template-columns: 1fr; } }

.an { display: grid; gap: 0.9rem; }
.an__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.kpi { position: relative; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.kpi small { font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--dim); }
.kpi b { display: block; margin-top: 0.15rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi em { display: inline-block; margin-top: 0.2rem; font-style: normal; font-family: var(--mono); font-size: 0.7rem; }
.kpi em.up { color: #0c8f63; } .kpi em.dn { color: #d6404f; }
.kpi svg { position: absolute; right: 0.7rem; bottom: 0.7rem; width: 74px; height: 30px; opacity: 0.9; }
.kpi svg path { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.in-view .kpi svg path { animation: draw 1.8s var(--ease) 0.3s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.an__grid { display: grid; gap: 0.9rem; }
.an__panel { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; min-width: 0; }
.an__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.an__head b { display: block; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em; }
.an__head small { font-size: 0.7rem; color: var(--dim); }
.chart { position: relative; height: 220px; }
.chart svg { width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.chart .grid line { stroke: rgba(11,12,16,0.07); stroke-dasharray: 3 4; }
.chart .grid text, .chart .xl text { font-family: var(--mono); font-size: 10px; fill: #8b91a1; }
.chart .area { fill: url(#areaGrad); }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .cross { stroke: rgba(91,108,255,0.5); stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.2s; }
.chart .dot { fill: #fff; stroke: var(--blue); stroke-width: 2.4; opacity: 0; transition: opacity 0.2s; }
.chart.is-hover .cross, .chart.is-hover .dot { opacity: 1; }
.tip { position: absolute; top: 0; left: 0; padding: 0.35rem 0.6rem; border-radius: 9px; background: #0b0c10; color: #fff; font-size: 0.74rem; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -110%); transition: opacity 0.2s; }
.tip b { font-weight: 600; margin-right: 0.35rem; }
.tip small { color: #98a0b6; font-family: var(--mono); font-size: 0.66rem; }
.chart.is-hover .tip { opacity: 1; }
.hbars { display: grid; gap: 0.8rem; margin-bottom: 1rem; }
.hbars li { display: grid; grid-template-columns: 5.2rem 1fr 2.4rem; align-items: center; gap: 0.6rem; font-size: 0.82rem; }
.hbars span { color: var(--mut); }
.hbars em { font-style: normal; text-align: right; font-family: var(--mono); font-size: 0.74rem; }
.hbars .bar { height: 8px; }
.hbars .bar u { background: var(--c, var(--blue)); }
.an__explain { display: flex; gap: 0.6rem; padding: 0.75rem 0.85rem; border-radius: 12px; background: rgba(91,108,255,0.07); border: 1px solid rgba(91,108,255,0.18); font-size: 0.82rem; }
.an__explain svg { width: 15px; height: 15px; margin-top: 0.15rem; flex: none; color: var(--blue); }
.an__explain p { font-size: 0.82rem; color: #2c303c; max-width: none; }
@media (min-width: 720px) { .an__kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .an__grid { grid-template-columns: 1.7fr 1fr; } }

/* ==========================================================================
   How it works window (dark)
   ========================================================================== */
.win { --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.14); position: relative; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(180deg, #10131b, #0a0c11); box-shadow: 0 50px 100px -40px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.1) inset; overflow: hidden; }
.win svg { width: 16px; height: 16px; flex: none; }
.win__bar { display: flex; align-items: center; gap: 1rem; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.win__t { margin: 0 auto; padding-right: 40px; font-size: 0.72rem; color: #7d8397; transition: opacity 0.3s; }
.win__body { position: relative; min-height: 400px; }
.panel { position: absolute; inset: 0; padding: clamp(1rem, 2.4vw, 1.6rem); opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0s linear 0.5s; }
.panel.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s var(--ease), transform 0.7s var(--ease), visibility 0s; }

.int__t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; color: #eef0f6; }
.int__t b { font-weight: 600; letter-spacing: -0.02em; }
.int__t span { font-size: 0.72rem; color: #7d8397; }
.int__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.int__grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); transition: border-color 0.4s, background-color 0.4s; }
.int__grid li i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,0.06); color: #b5bbcc; transition: background-color 0.4s, color 0.4s; }
.int__grid li b { font-size: 0.9rem; font-weight: 550; color: #e6e9f2; }
.int__grid li span { font-size: 0.72rem; color: #7d8397; transition: color 0.3s; }
.int__grid li.is-ok { border-color: rgba(47,211,154,0.35); background: rgba(47,211,154,0.05); }
.int__grid li.is-ok i { background: rgba(47,211,154,0.18); color: #4ee2b0; }
.int__grid li.is-ok span { color: #4ee2b0; }
.int__grid li.is-busy span { color: var(--blue-2); }
.int__p { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.int__p span { font-size: 0.74rem; color: #7d8397; }
.int__p .bar u { transition: width 0.8s var(--ease); width: var(--w); animation: none !important; }
@media (min-width: 640px) { .int__grid { grid-template-columns: repeat(3, 1fr); } }

.pl { display: grid; gap: 0.9rem; }
.pl__in { display: flex; align-items: center; gap: 0.7rem; min-height: 48px; padding: 0 1rem; border: 1px solid rgba(143,162,255,0.35); border-radius: 12px; background: rgba(91,108,255,0.08); color: #eef0f6; font-size: 0.92rem; box-shadow: 0 0 0 4px rgba(91,108,255,0.07); }
.pl__in svg { color: #a9b6ff; }
.pl__in span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl__steps { display: grid; gap: 0.5rem; position: relative; }
.pl__steps li { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03); opacity: 0; transform: translateX(-12px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.pl__steps li.is-in { opacity: 1; transform: none; }
.pl__steps li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.06); color: #b5bbcc; }
.pl__steps li i.aii { background: linear-gradient(135deg, #7d8cff, #4a5bff); color: #fff; }
.pl__steps small { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: #7d8397; }
.pl__steps b { font-size: 0.9rem; font-weight: 550; color: #eef0f6; }
.pl__foot { display: flex; justify-content: flex-end; gap: 0.5rem; opacity: 0; transition: opacity 0.5s 0.2s; }
.pl__foot.is-in { opacity: 1; }

.run { display: grid; gap: 0.9rem; }
.run__doc { padding: 1rem; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255,255,255,0.035); }
.run__h { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.run__h i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(91,108,255,0.18); color: #a9b6ff; }
.run__h b { display: block; font-weight: 600; color: #fff; }
.run__h small { font-size: 0.68rem; color: #7d8397; }
.run__h .chip { margin-left: auto; background: rgba(47,211,154,0.14); color: #4ee2b0; }
.run__b { display: grid; gap: 0.6rem; font-size: 0.9rem; color: #b8bdcd; }
.run__b li { position: relative; padding-left: 1.2rem; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.panel.is-on .run__b li { opacity: 1; transform: none; }
.panel.is-on .run__b li:nth-child(1) { transition-delay: 0.3s; } .panel.is-on .run__b li:nth-child(2) { transition-delay: 0.5s; } .panel.is-on .run__b li:nth-child(3) { transition-delay: 0.7s; } .panel.is-on .run__b li:nth-child(4) { transition-delay: 0.9s; }
.run__b li i { position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-2); }
.run__b b { color: #fff; font-weight: 600; }
.run__f { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.7rem; color: #7d8397; }
.run__log { display: grid; gap: 0.4rem; }
.run__log li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; font-size: 0.78rem; color: #98a0b6; animation: feedin 0.6s var(--ease) both; }
.run__log li svg { width: 14px; height: 14px; color: #4ee2b0; }
.run__log li span { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: #5d6376; }