.reference-demo .chat-shell{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#070c17; }
.reference-demo .chat-top{ display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid var(--line-soft); background:var(--panel); }
.reference-demo .chat-top .d{ width:9px; height:9px; border-radius:50%; }
.reference-demo .chat-top span{ font-size:12px; color:var(--muted); margin-left:6px; }
.reference-demo .chat-body{ padding:20px; display:flex; flex-direction:column; gap:16px; min-height:120px; }
.reference-demo .bubble{ max-width:88%; padding:12px 14px; border-radius:12px; font-size:13.8px; line-height:1.55; animation: rise .35s ease; }
.reference-demo .bubble.user{ align-self:flex-end; background:var(--glow); border:1px solid var(--edge); color:var(--text); border-bottom-right-radius:3px; }
.reference-demo .bubble.ai{ align-self:flex-start; background:var(--panel-hi); border:1px solid var(--line); border-bottom-left-radius:3px; width:100%; max-width:100%; }
.reference-demo .bubble.ai .hd{ display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--edge); font-weight:700; font-size:12px; letter-spacing:.04em; }
.reference-demo .prompts{ display:flex; flex-wrap:wrap; gap:10px; padding:14px 20px 20px; border-top:1px solid var(--line-soft); }
.reference-demo .prompt-chip{
    font-size:13px; padding:9px 14px; border-radius:9px; border:1px solid var(--line); background:var(--panel);
    color:var(--muted); transition:.2s; text-align:left;
  }
.reference-demo .prompt-chip:hover:not(:disabled){ border-color:var(--edge); color:var(--text); }
.reference-demo .prompt-chip:disabled{ opacity:.32; text-decoration:line-through; }
.reference-demo table.mini{ width:100%; border-collapse:collapse; margin-top:6px; font-size:12.8px; }
.reference-demo table.mini th{ text-align:left; color:var(--muted-2); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:6px 8px; border-bottom:1px solid var(--line); }
.reference-demo table.mini td{ padding:8px 8px; border-bottom:1px solid var(--line-soft); color:var(--text); vertical-align:top; }
.reference-demo table.mini tr:last-child td{ border-bottom:none; }
.reference-demo .badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700; }
.reference-demo .badge.high{ background:rgba(255,84,112,.16); color:var(--red); }
.reference-demo .badge.med{ background:rgba(255,181,69,.16); color:var(--amber); }
.reference-demo .badge.low{ background:rgba(53,226,160,.16); color:var(--green); }
.reference-demo .badge.ok{ background:rgba(53,226,160,.16); color:var(--green); }
.reference-demo .kpi-row{ display:flex; gap:16px; flex-wrap:wrap; margin:4px 0 16px; }
.reference-demo .kpi{ flex:1; min-width:130px; padding:16px; border-radius:12px; background:var(--panel); border:1px solid var(--line); }
.reference-demo .kpi .v{ font-size:24px; font-weight:700; }
.reference-demo .kpi .l{ font-size:11.5px; color:var(--muted-2); margin-top:4px; }
.reference-demo .timeline{ display:flex; flex-direction:column; gap:0; margin-top:6px; }
.reference-demo .drawer{ margin-top:14px; padding:14px 16px; border-radius:10px; background:var(--panel); border:1px solid var(--line); font-size:13px; }
.reference-demo .drawer .reasons{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.reference-demo .oac-frame{ border-radius:14px; overflow:hidden; margin-bottom:16px; background:#EEF1F5; box-shadow:0 30px 54px -22px rgba(0,0,0,0.55); }
.reference-demo .oac-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 18px; background:#161B22; }
.reference-demo .oac-header-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.reference-demo .oac-logo{ color:#fff; font-weight:800; font-size:12.5px; letter-spacing:.05em; white-space:nowrap; }
.reference-demo .oac-logo .oac-logo-sub{ font-weight:400; color:#9AA4B2; margin-left:7px; font-size:11.5px; letter-spacing:.02em; }
.reference-demo .oac-crumb{ color:#8A93A3; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reference-demo .oac-header-right{ display:flex; align-items:center; gap:13px; flex:none; }
.reference-demo .oac-header-right svg{ width:15px; height:15px; color:#8A93A3; }
.reference-demo .oac-avatar{
    width:23px; height:23px; border-radius:50%; background:var(--edge); color:#0b0f14; font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
.reference-demo .oac-body{ display:flex; }
.reference-demo .oac-rail{ width:44px; flex:none; background:#1D2229; display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px 0; }
.reference-demo .oac-rail-ic{ color:#6C7684; width:18px; height:18px; }
.reference-demo .oac-rail-ic.active{ color:#fff; }
.reference-demo .oac-canvas{ flex:1; min-width:0; background:#EEF1F5; padding:16px clamp(14px,3vw,24px) 20px; color:#1B1E24; }
.reference-demo .oac-canvas-tabs{ display:flex; gap:2px; margin:-2px 0 16px; border-bottom:1px solid #D7DCE3; }
.reference-demo .oac-tab{ padding:8px 14px; font-size:12px; color:#6B7280; border-bottom:2px solid transparent; }
.reference-demo .oac-tab.active{ color:var(--edge); border-bottom-color:var(--edge); font-weight:700; }
.reference-demo .oac-canvas-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.reference-demo .oac-canvas-title h4{ margin:0; font-size:14px; color:#1B1E24; font-weight:700; }
.reference-demo .oac-live{ font-size:10.5px; color:#1D7A3C; font-weight:600; display:flex; align-items:center; gap:6px; letter-spacing:.02em; }
.reference-demo .oac-live::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2FAE55; box-shadow:0 0 6px #2FAE55; animation:pulsedot 1.6s infinite; }
.reference-demo .oac-tile{ background:#fff; border-radius:8px; border:1px solid #E1E5EA; box-shadow:0 1px 2px rgba(20,20,30,.05); }
.reference-demo .oac-kpi-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.reference-demo .oac-kpi{ flex:1; min-width:130px; padding:13px 15px; }
.reference-demo .oac-kpi .v{ font-size:21px; font-weight:800; color:#1B1E24; }
.reference-demo .oac-kpi .l{ font-size:10px; color:#78808C; text-transform:uppercase; letter-spacing:.03em; margin-top:5px; line-height:1.4; }
.reference-demo .oac-section-label{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#8A93A3; font-weight:700; margin:18px 0 9px; }
.reference-demo .oac-section-label:first-child{ margin-top:0; }
.reference-demo .oac-conc-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.reference-demo .oac-conc-row .lab{ width:190px; font-size:12px; color:#4A5261; flex:none; }
.reference-demo .oac-conc-track{ flex:1; height:9px; border-radius:5px; background:#E1E5EA; overflow:hidden; }
.reference-demo .oac-conc-fill{ height:100%; border-radius:5px; transition:width .6s ease; }
.reference-demo .oac-conc-val{ width:44px; text-align:right; font-size:12.5px; font-weight:800; color:#1B1E24; flex:none; }
.reference-demo .oac-donut-wrap{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; background:#fff; border:1px solid #E1E5EA; border-radius:8px; padding:16px; box-shadow:0 1px 2px rgba(20,20,30,.05); }
.reference-demo .oac-donut{ width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.reference-demo .oac-donut .hole{ width:70px; height:70px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.reference-demo .oac-donut .hole b{ font-size:16px; color:#1B1E24; }
.reference-demo .oac-donut .hole small{ font-size:8.5px; color:#78808C; text-align:center; line-height:1.25; max-width:58px; }
.reference-demo .oac-legend{ display:flex; flex-direction:column; gap:9px; }
.reference-demo .oac-legend-item{ display:flex; align-items:center; gap:7px; font-size:12px; color:#4A5261; }
.reference-demo .oac-legend-item .sw{ width:9px; height:9px; border-radius:2px; flex:none; }
.reference-demo .oac-table-wrap{ background:#fff; border:1px solid #E1E5EA; border-radius:8px; overflow:hidden; box-shadow:0 1px 2px rgba(20,20,30,.05); }
.reference-demo table.oac-table{ width:100%; border-collapse:collapse; font-size:12px; }
.reference-demo table.oac-table th{ text-align:left; color:#78808C; font-weight:700; font-size:10px; letter-spacing:.03em; text-transform:uppercase; padding:9px 12px; border-bottom:1px solid #E1E5EA; background:#FAFBFC; }
.reference-demo table.oac-table td{ padding:9px 12px; border-bottom:1px solid #EEF1F5; color:#1B1E24; }
.reference-demo table.oac-table tr:last-child td{ border-bottom:none; }
.reference-demo table.oac-table tr.clickable:hover{ background:#F7F9FB; cursor:pointer; }
.reference-demo .oac-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:700; }
.reference-demo .oac-badge.high{ background:#FDEAEA; color:#C0392B; }
.reference-demo .oac-badge.med{ background:#FFF3DC; color:#A9720C; }
.reference-demo .oac-badge.low,.reference-demo .oac-badge.ok{ background:#E7F7EA; color:#1E7B34; }
.reference-demo .oac-hint{ font-size:11px; color:#8A93A3; margin-top:8px; }
.reference-demo .oac-drawer{ margin-top:12px; padding:12px 14px; border-radius:8px; background:#FFF9EC; border:1px solid #F0E0BC; font-size:12.5px; color:#3F3620; }
.reference-demo .oac-drawer b{ color:#1B1E24; }
.reference-demo .oac-reasons{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.reference-demo .oac-reason-chip{ font-size:11px; padding:4px 9px; border-radius:6px; background:#FDEAEA; color:#C0392B; border:1px solid #F6D2D2; }
.reference-demo .oac-bars{ display:flex; align-items:flex-end; gap:10px; height:120px; margin:6px 0 4px; background:#fff; border:1px solid #E1E5EA; border-radius:8px; padding:16px 16px 10px; box-shadow:0 1px 2px rgba(20,20,30,.05); }
.reference-demo .oac-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.reference-demo .oac-bar{ width:100%; border-radius:4px 4px 2px 2px; transition:height .6s ease; }
.reference-demo .oac-bar-col .lab{ font-size:10px; color:#6B7280; text-align:center; line-height:1.35; }
.reference-demo .oac-bar-col .lab b{ display:block; color:#1B1E24; font-size:12px; }
.reference-demo .msg-block{ display:flex; gap:10px; align-items:flex-start; width:100%; }
.reference-demo .chat-avatar{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; }
.reference-demo .msg-meta{ font-size:10.5px; color:var(--muted-2); margin-top:6px; }
.reference-demo .typing-dots{ display:flex; gap:4px; padding:5px 3px; }
.reference-demo .typing-dots span{ width:6px; height:6px; border-radius:50%; background:var(--muted-2); animation: bouncedot 1.2s infinite; display:inline-block; }
.reference-demo .typing-dots span:nth-child(2){ animation-delay:.2s; }
.reference-demo .typing-dots span:nth-child(3){ animation-delay:.4s; }
.reference-demo .chat-input-bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line-soft); background:var(--panel); }
.reference-demo .chat-input-fake{ flex:1; padding:9px 14px; border-radius:9px; background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--muted-2); font-size:12.6px; }
.reference-demo .chat-send{ width:32px; height:32px; border-radius:8px; background:var(--glow); border:1px solid var(--edge); color:var(--edge); display:flex; align-items:center; justify-content:center; flex:none; }
.reference-demo .oac-rail{ display:none; }
.reference-demo .oac-conc-row .lab{ width:120px; font-size:11.5px; }
.reference-demo .oac-logo .oac-logo-sub{ display:none; }
.reference-tagline{font-size:12px;line-height:1.5;color:var(--muted);margin:8px 0 12px}.reference-links{display:flex;justify-content:space-between;gap:14px}.reference-cta{margin-top:18px}.reference-cta>p{font-size:12px;color:var(--muted);margin:6px 0}.reference-cta .closing-actions{margin-top:10px}.reference-demo{--text:var(--ink);--cyan:var(--accent);--teal:var(--accent);--edge:var(--accent);--panel:var(--surface);--panel-hi:var(--surface);--muted-2:var(--muted);--glow:transparent;font-size:13px}.reference-demo .icon{width:20px;height:20px;flex-shrink:0}.reference-demo .icon.sm{width:16px;height:16px}.reference-demo button{cursor:pointer;color:var(--ink);font:inherit}.reference-demo .oac-frame,.reference-demo .chat-shell{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:none}.reference-demo .oac-header,.reference-demo .chat-top{background:var(--surface);color:var(--ink);padding:10px 14px}.reference-demo .oac-rail{display:none}.reference-demo .oac-canvas{padding:12px 16px;background:transparent;color:var(--ink);width:100%;min-width:0}.reference-demo .oac-canvas-tabs{display:none}.reference-demo .oac-canvas-title{margin-bottom:12px}.reference-demo .oac-canvas-title h4,.reference-demo .oac-section-label,.reference-demo .oac-hint{color:var(--muted)}.reference-demo .oac-tile,.reference-demo .oac-donut-wrap,.reference-demo .oac-table-wrap,.reference-demo .oac-drawer{background:var(--surface);border-color:var(--line);color:var(--ink)}.reference-demo .oac-kpi .v,.reference-demo .oac-kpi .l,.reference-demo .oac-donut .mid,.reference-demo .oac-legend,.reference-demo .oac-bar-col .lab{color:var(--ink)}.reference-demo .oac-table{width:100%}.reference-demo .oac-table th,.reference-demo .oac-table td{background:transparent;color:var(--ink);border-color:var(--line);padding:8px 10px;font-size:12px}.reference-demo .oac-table tr:hover td{background:var(--line)}.reference-demo .oac-bars{height:130px}.reference-demo .oac-kpi-row{margin-bottom:12px}.reference-demo .oac-kpi{padding:12px}.reference-demo .oac-kpi .v{font-size:25px}.reference-demo .oac-donut-wrap{padding:12px;margin-bottom:12px!important}.reference-demo .oac-donut-wrap>div[style]{color:var(--muted)!important}.reference-demo .oac-donut{width:110px;height:110px}.reference-demo .oac-donut .mid{background:var(--bg)}.reference-demo .oac-donut .mid b{font-size:23px}.reference-demo .oac-donut .mid span{color:var(--muted)}.reference-demo .bubble,.reference-demo .drawer{background:var(--surface);color:var(--ink);border-color:var(--line);font-size:13px}.reference-demo .chat-body{padding:12px;gap:10px;min-height:0}.reference-demo .prompts{padding:10px;gap:7px}.reference-demo .prompt-chip{padding:9px 12px;background:var(--surface);border-color:var(--line);font-size:12px}.reference-demo .chat-input-bar{padding:10px 12px}.reference-demo .mini{width:100%;border-collapse:collapse}.reference-demo .mini th,.reference-demo .mini td{padding:8px;border-bottom:1px solid var(--line);text-align:left;font-size:12px}.reference-demo .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.reference-demo .timeline-item{background:var(--surface);padding:14px;border:1px solid var(--line);border-radius:12px}.reference-demo .btn{padding:10px 14px;border:1px solid var(--line);background:var(--surface);border-radius:8px}.reference-demo .lead{font-size:13px;color:var(--muted)}
@media(max-width:760px){.reference-tagline{font-size:10px;margin:5px 0 8px}.reference-links{display:block}.reference-links button{margin-top:6px}.reference-demo .oac-kpi .v{font-size:18px}.reference-demo .oac-kpi{padding:8px}.reference-demo .oac-canvas{padding:9px}.reference-demo .oac-table td,.reference-demo .oac-table th{font-size:10px;padding:6px}.reference-demo .timeline{grid-template-columns:1fr}.reference-demo .bubble,.reference-demo .mini td,.reference-demo .mini th,.reference-demo .prompt-chip{font-size:10px}.reference-demo .oac-logo-sub,.reference-demo .oac-crumb{display:none}.reference-demo .oac-donut-wrap{gap:8px;flex-wrap:wrap}.reference-cta .closing-actions{flex-wrap:wrap}.reference-cta>p{font-size:10px}.ai-intro{font-size:10px}}
.reference-demo .oac-canvas-tabs{display:flex;color:var(--muted);margin-bottom:10px}.reference-demo .oac-tab{color:var(--muted)}.reference-demo .oac-tab.active{color:var(--ink);border-color:var(--accent)}

.overview-three{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-three .solution-choice{display:flex;flex-direction:column;gap:14px}.overview-three .solution-choice>div{display:flex;flex-direction:column;flex:1}.overview-three .solution-choice b{margin-top:auto;padding-top:18px}.overview-three .solution-choice h3{font-size:23px}.overview-three .solution-choice p{margin-bottom:12px}
@media(max-width:760px){.overview-three{grid-template-columns:1fr}.overview-three .solution-choice{flex-direction:row;padding:13px;gap:12px}.overview-three .solution-choice h3{font-size:17px}.overview-three .solution-choice b{padding-top:7px}.overview-three .solution-choice p{margin-bottom:0}}
@media(max-height:480px) and (min-width:500px){.overview-three{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-three .solution-choice{flex-direction:column}.overview-three .solution-choice h3{font-size:15px}}

/* Preserve complete reference labels at every responsive breakpoint. */
.step-nav button span{display:inline!important}.step-nav{flex-wrap:wrap}.demo-tabs{flex-wrap:wrap}.demo-tabs button{white-space:normal;text-align:left}.footer-note{max-width:38%;text-align:center;font-size:9px}
@media(max-width:760px){.step-nav button{font-size:9px!important;padding:5px 7px!important}.navigation .primary{font-size:9px;max-width:148px}.demo-tabs button{font-size:9px}.footer-note{display:none}}
@media(max-height:480px) and (min-width:500px){.step-nav{position:static;margin-top:8px}.step-nav button span{display:inline!important}}

/* Balance slide margins while preserving the existing content alignment. */
.stage { justify-content: center; }