.ono-scene{width:100%;margin:0 auto}
.ono-scene .ss-stage{background:#FFFFFF;color:#111111;font-family:Inter,sans-serif;font-feature-settings:"cv03","cv04","cv09","cv11";overflow:hidden}
.ono-scene .g-surface{background:#FFFFFF;border:1px solid #E5E5E8;border-radius:12px;box-shadow:0 1px 4px rgba(17,17,17,.04)}
.ono-scene button{font-family:Inter,sans-serif;line-height:1.4;background:#FFFFFF;color:#111111;border:0}
.ono-scene button:focus-visible{outline:2px solid #2563EB;outline-offset:3px}
.ono-scene p{margin:0;font-size:12px;line-height:1.65;color:#38383D}
.ono-scene .g-panel-title{font:600 20px/1.2 Switzer,sans-serif;letter-spacing:-.01em;color:inherit}
.ono-scene .g-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid #E5E5E8}
.ono-scene .g-small{font-size:9px;line-height:1.4;letter-spacing:.03em;color:#38383D}
.ono-scene .g-eyebrow{display:flex;gap:8px;align-items:center;font-size:11px;line-height:1.4;font-weight:500}
.ono-scene .g-icon-box{width:40px;height:40px;border:1px solid #E5E5E8;border-radius:10px;display:grid;place-items:center;flex-shrink:0;color:#111111}
.ono-scene .g-detail{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;font-size:11px;border-top:1px solid #E5E5E8}
.ono-scene .g-detail>span{color:#38383D}
.ono-scene .g-detail>b{font-weight:500;text-align:right}
.ono-scene .g-user-tag{display:inline-flex;align-items:center;gap:8px;color:inherit;font-size:10px;line-height:1.4;font-weight:500;white-space:nowrap}
.ono-scene .g-person-name{font-size:13px;font-weight:500;line-height:1.4}
.ono-scene .g-person-sub{font-size:10px;line-height:1.4}
.ono-scene .ss-badge{border:1px solid #E5E5E8;min-height:24px;font-size:9px;background:#FFFFFF;white-space:nowrap}
.ono-scene .ss-badge__label{line-height:1.4}
.ono-scene .g-small-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:8px 12px;border:1px solid #E5E5E8;border-radius:48px;font-size:10px;font-weight:500;min-height:32px}
.ono-scene .g-small-button:hover{border-color:#111111}
.ono-scene .g-small-button.dark{background:#111111;color:#FFFFFF;border-color:#111111}
.ono-scene .g-note{display:flex;align-items:flex-start;gap:8px;font-size:9px;line-height:1.5;color:#38383D}
.ono-scene .g-note svg{margin-top:1px}
.g-demo{position:relative}
.g-replay{position:absolute;right:16px;top:8px;z-index:5;display:inline-flex;align-items:center;gap:8px;font:400 10px/1.4 Inter,sans-serif;padding:8px 12px;min-height:32px;background:#FFFFFF;color:#38383D;border:1px solid #E5E5E8;border-radius:48px}
.g-replay:hover{color:#111111;border-color:#111111}
.ono-scene .g-status-dot{display:inline-block;width:5px;height:5px;flex-shrink:0;border-radius:50%;background:#2563EB}
.ono-scene .ss-connector{stroke-width:1}
.ono-scene .g-hairline{width:32px;height:1px;background:#E5E5E8;display:inline-block}
.ono-scene .ss-row{--ss-row-title:12px;--ss-row-subtitle:10px}
.connected .co-caption{position:absolute;top:28px;left:40px;font-size:9px;letter-spacing:.05em;color:#38383D}
.connected .co-sources{position:absolute;left:40px;top:80px;display:flex;flex-direction:column;gap:16px;width:192px}
.connected .co-source{height:56px;display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #E5E5E8;border-radius:10px;background:#FFFFFF;position:relative;z-index:1;font-size:12px}
.connected .co-source>.ss-check{margin-left:auto;opacity:0;transition:opacity .6s}
.connected .co-source[data-ready]>.ss-check{opacity:1}
.connected .co-source[data-ready]>.lucide{color:#2563EB;transition:color .6s}
.connected .co-record{position:absolute;left:408px;top:48px;width:580px;padding:24px;z-index:2}
.connected .g-product-label{display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid #E5E5E8;font-size:11px;color:#38383D}
.connected .g-product-label img{width:80px;height:24px;object-fit:contain}
.connected .g-product-label .ss-badge{margin-left:auto}
.connected .co-person{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.connected .g-id{font-size:9px;color:#38383D}
.connected .co-context{padding:16px 0;border-top:1px solid #E5E5E8;opacity:.4;transition:opacity .8s}
.connected .co-context[data-ready]{opacity:1}
.connected .co-context>div{display:flex;align-items:center;gap:8px;font-size:11px}
.connected .co-context b{font-weight:500}
.connected .co-context>span{display:block;margin-top:8px;font-size:10px;color:#38383D}
.connected .co-result{display:flex;align-items:center;gap:8px;border-top:1px solid #E5E5E8;padding-top:16px;font-size:11px;opacity:.4;transition:opacity .8s}
.connected .co-result[data-ready]{opacity:1}
.connected .co-annotation{position:absolute;bottom:24px;left:40px;display:flex;align-items:center;gap:12px;font-size:10px;color:#38383D}
.connected .co-connector{z-index:0}
.connected .ss-connector path{stroke:#2563EB}
.connected .ss-stage[data-layout=compact] .co-caption{top:24px;left:20px;font-size:9px}
.connected .ss-stage[data-layout=compact] .co-sources{top:56px;left:20px;width:318px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.connected .ss-stage[data-layout=compact] .co-source{height:80px;padding:12px 4px;flex-direction:column;gap:8px;font-size:10px;text-align:center}
.connected .ss-stage[data-layout=compact] .co-source>.ss-check{display:none}
.connected .ss-stage[data-layout=compact] .co-record{top:208px;left:20px;width:318px;padding:20px}
.connected .ss-stage[data-layout=compact] .g-product-label{gap:12px;padding-bottom:16px}
.connected .ss-stage[data-layout=compact] .g-product-label>span:not(.ss-badge){display:none}
.connected .ss-stage[data-layout=compact] .co-person{padding:16px 0}
.connected .ss-stage[data-layout=compact] .g-id{display:none}
.connected .ss-stage[data-layout=compact] .g-detail{padding:12px 0;font-size:10px}
.connected .ss-stage[data-layout=compact] .co-context{padding:12px 0}
.connected .ss-stage[data-layout=compact] .co-context>span{font-size:9px}
.connected .ss-stage[data-layout=compact] .co-result{font-size:10px;padding-top:12px}
.connected .ss-stage[data-layout=compact] .co-annotation{display:none}
@media (max-width:800px){.g-replay{right:12px}}
@media (max-width:600px){.g-replay{font-size:10px;top:8px;right:12px}}
.ono-scene .g-copy-swap{display:block;width:100%;max-width:100%}
.ono-scene .g-copy-swap>.ss-swap__in{width:100%;max-width:100%}
.ono-scene .journey-body>div,.ono-scene .timing-detail>div{min-width:0;flex:1}
.connected .ss-stage{background:radial-gradient(ellipse at 76% 64%,rgba(163,207,255,.24),transparent 64%)}
.connected .co-record{background:linear-gradient(145deg,#FFFFFF 52%,rgba(163,207,255,.14) 100%)}
.g-replay{font-family:Switzer,sans-serif;font-weight:500}
.ono-scene .g-panel-title,.connected .customer-name{font-family:Switzer,sans-serif;font-weight:600}
.ono-scene button,.ono-scene .implementation-title>b,.ono-scene .pillar-selectors>button>b,.ono-scene .journey-step>b{font-family:Switzer,sans-serif;font-weight:500}
.ono-scene .g-eyebrow,.ono-scene .g-person-name,.ono-scene .g-user-tag,.ono-scene .g-detail>b,.ono-scene .ss-badge,.ono-scene .capture-row .ss-row__title,.ono-scene .ws-lead>b,.ono-scene .ws-inbox-list b,.ono-scene .human-handoff-head b,.ono-scene .pillar-example>b{font-weight:400}
.ono-scene .time-stamp{font-family:Inter,sans-serif;font-weight:500;letter-spacing:-.04em}
.connected .co-record{min-height:496px}
.connected .co-context{border-top:0}
.connected .co-data{border-bottom:1px solid #E5E5E8}
.connected .ss-stage[data-layout=compact] .co-record{min-height:0}
.connected .ss-stage[data-layout=compact] .co-source{justify-content:center}
.connected .ss-stage[data-layout=compact] .co-caption{font-size:10px}
.ono-scene{--ono-shadow:0 2px 4px rgba(17,17,17,.025),0 12px 28px -16px rgba(37,65,112,.20);--ono-ease:cubic-bezier(.22,1,.36,1)}
.ono-scene .ss-stage{background:radial-gradient(ellipse at 12% 100%,rgba(163,207,255,.20),transparent 58%),radial-gradient(ellipse at 100% 8%,rgba(196,181,253,.13),transparent 56%),#fff;border-radius:16px}
.ono-scene .g-surface{background:linear-gradient(145deg,rgba(255,255,255,.98) 32%,rgba(242,248,255,.95));border-color:rgba(187,201,221,.52);box-shadow:var(--ono-shadow),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ono-scene .g-panel-top{border-bottom-color:rgba(187,201,221,.38)}
.ono-scene .g-detail{border-top-color:rgba(187,201,221,.32)}
.ono-scene .g-icon-box{color:#2563eb;border-color:rgba(159,186,225,.38);background:linear-gradient(145deg,#fff,rgba(163,207,255,.24));box-shadow:inset 0 1px 0 #fff,0 4px 8px -6px rgba(37,99,235,.25)}
.ono-scene .g-panel-title{color:#111;letter-spacing:-.025em}
.ono-scene .g-person-name{color:#111;font-weight:500}
.ono-scene .ss-badge{background:rgba(255,255,255,.86);border-color:rgba(163,184,216,.45);box-shadow:0 2px 4px rgba(17,17,17,.025)}
.ono-scene .g-small-button,.g-replay{background:linear-gradient(180deg,#fff,#f8fbff);border-color:rgba(163,184,216,.5);box-shadow:0 2px 3px rgba(17,17,17,.025);transition:box-shadow .3s,background .3s,transform .45s cubic-bezier(.22,1.15,.36,1)}
.ono-scene .g-small-button:hover,.g-replay:hover{box-shadow:0 4px 12px -6px rgba(37,65,112,.35);transform:translateY(-1px)}
.ono-scene .g-small-button:active,.g-replay:active{transform:translateY(0);box-shadow:0 1px 2px rgba(17,17,17,.05)}
.ono-scene .g-small-button.dark{background:linear-gradient(140deg,#2563eb,#2456c6);border-color:rgba(37,99,235,.3);box-shadow:0 5px 12px -5px rgba(37,99,235,.38);color:#fff}
.ono-scene .g-status-dot{box-shadow:0 0 0 3px rgba(37,99,235,.07)}
.ono-scene .g-note{color:#4b5567}
.ono-scene .ss-connector{filter:drop-shadow(0 1px 2px rgba(37,99,235,.12))}
.connected .co-source{background:linear-gradient(145deg,#fff,rgba(242,248,255,.98));border-color:rgba(187,201,221,.58);box-shadow:0 4px 12px -9px rgba(37,65,112,.25);transition:border-color .5s,box-shadow .5s}
.connected .co-source[data-ready]{border-color:rgba(37,99,235,.28);box-shadow:0 4px 14px -9px rgba(37,99,235,.28)}
.connected .co-record{box-shadow:0 4px 8px -6px rgba(17,17,17,.06),0 20px 40px -24px rgba(37,65,112,.30),inset 0 1px 0 #fff}
.connected .co-context,.connected .co-result{transition:opacity .8s var(--ono-ease)}
@media (prefers-reduced-motion:reduce){.ono-scene *,.g-replay{transition:none!important;animation:none!important}}
@media (prefers-reduced-motion:reduce){.ono-scene .g-small-button:hover,.g-replay:hover{transform:none}}