/* ───────────── Olly (/platform/olly/) ─────────────
   The hero is the real Olly screen (a baked still) with scenarios played inside it by page.js, under scenario tabs.
   Below it each section has its own visual:
   the attack timeline, the case flow, the agent network, the watched dashboard, the scheduled-task film and memory. */

/* ───── plugin marks: small brand-coloured tiles, drawn in CSS so the page ships no logo files ───── */
/* plugin badges: each brand's own logo, bare (assets/pages/olly/logos/; the black marks use their light copies on this dark page) */
.pl { display: inline-block; flex: none; width: 22px; height: 22px; background: center / contain no-repeat; vertical-align: middle; }
.pl-slack { background-image: url(/assets/pages/olly/logos/slack.svg); }
.pl-gmail { background-image: url(/assets/pages/olly/logos/gmail.svg); }
.pl-crowdstrike { background-image: url(/assets/pages/olly/logos/crowdstrike.svg); }
.pl-pagerduty { background-image: url(/assets/pages/olly/logos/pagerduty.svg); }
.pl-okta { background-image: url(/assets/pages/olly/logos/okta-dark.svg); }
.pl-github { background-image: url(/assets/pages/olly/logos/github-dark.svg); }
.pl-jira { background-image: url(/assets/pages/olly/logos/jira.svg); }
.pl-aws { background-image: url(/assets/pages/olly/logos/aws-dark.svg); }
.pl-teams { background-image: url(/assets/pages/olly/logos/teams.svg); }
.pl-servicenow { background-image: url(/assets/pages/olly/logos/servicenow.svg); }
.pl-wiz { background-image: url(/assets/pages/olly/logos/wiz.svg); }
.pl-mcp { background-image: url(/assets/pages/olly/logos/mcp-dark.svg); }
.pl-notion { background-image: url(/assets/pages/olly/logos/notion.svg); }
.ol-logo { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c8ffe6, #13E989 55%, #0B9E5E); box-shadow: 0 0 10px rgba(19,233,137,.55); }

/* ───── hero ───── */
.ol-hero { position: relative; overflow: hidden; padding: clamp(48px, 7svh, 80px) 0 96px; }
.ol-aurora { position: absolute; inset: 0; pointer-events: none; }
.ol-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); }
.ol-aurora i:nth-child(1) { width: 900px; height: 600px; left: 50%; top: 260px; translate: -50% 0; background: radial-gradient(circle, rgba(19,233,137,.22), transparent 65%); }
.ol-aurora i:nth-child(2) { width: 520px; height: 520px; left: -6%; top: 40%; background: radial-gradient(circle, rgba(99,102,241,.18), transparent 65%); animation: ol-drift 22s ease-in-out infinite alternate; }
.ol-aurora i:nth-child(3) { width: 520px; height: 520px; right: -6%; top: 30%; background: radial-gradient(circle, rgba(34,211,238,.14), transparent 65%); animation: ol-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes ol-drift { to { transform: translate(40px, -30px) scale(1.08); } }
.ol-hero-in { position: relative; text-align: center; }
.ol-hero .crumbs { margin-bottom: 22px; }
.ol-title { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ol-name { font-size: clamp(60px, 7.5vw, 108px); line-height: .9; font-weight: 500; letter-spacing: -.06em; background: linear-gradient(180deg, #fff 30%, #86FFC9); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.ol-sub { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.1; font-weight: 400; letter-spacing: -.035em; color: var(--fg); }
.ol-lead { max-width: 640px; margin: 22px auto 0; text-wrap: balance; }
.ol-hero .hero-actions { justify-content: center; margin-top: 28px; }
.ol-stage { position: relative; max-width: 1180px; margin: 48px auto 0; padding: 0 24px; }

.ol-note { margin-top: 16px; text-align: center; font-size: 13px; color: var(--fg-3); }
.ol-held { display: none; color: var(--mint); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; }
.ol-held { display: none !important; } /* the pause now shows inside the window (.ol-pause) */
.ol-stage.is-held .ol-scn [aria-selected="true"] b i { opacity: .4; }

/* ───── the real Olly window and the scenario tabs above it ───── */
.ol-win { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; text-align: left; box-shadow: 0 0 0 1px rgba(19,233,137,.1), 0 60px 140px -50px rgba(19,233,137,.5), 0 40px 90px -30px rgb(0 0 0 / var(--sh)); }
.ol-win .cxw-zoom { display: none; } /* the zoomed copy isn't scripted */
/* phones: a taller window with the camera on the chat column, and the app's sidebar hidden by page.js */
@media (max-width: 560px) { .ol-win .cxr { --ar: 4 / 5; } }
.ol-scn { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 18px; }
.ol-scn button { position: relative; flex: none; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(0 0 0 / .4); color: var(--fg-2); font: inherit; font-size: 14px; cursor: pointer; overflow: hidden; transition: color .2s, border-color .2s, background .2s; }
.ol-scn button:hover { color: var(--fg); }
.ol-scn button[aria-selected="true"] { color: var(--fg); border-color: rgba(19,233,137,.55); background: rgba(19,233,137,.1); }
.ol-scn b { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; } .ol-scn b i { display: block; height: 100%; width: 0; background: var(--accent); }

/* ───── shared section layout ───── */
.ol-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.ol-split-rev > .ol-copy { order: 2; }
.ol-copy h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; margin-top: 16px; }
.ol-copy > p { margin-top: 20px; font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.ol-ticks { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.ol-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.ol-ticks li b { color: var(--fg); font-weight: 600; }
.ol-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ol-panel-h { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
.ol-panel-h em { margin-left: auto; font-style: normal; padding: 3px 9px; border-radius: 999px; background: rgba(248,113,113,.12); color: #fca5a5; font-size: 10.5px; }
.ol-attack, .ol-dash, .ol-net, .ol-memory, .ol-film { border-radius: 18px; border: 1px solid var(--line-2); background: linear-gradient(180deg, #101214, #0b0c0d); box-shadow: 0 40px 100px -40px rgba(19,233,137,.25), 0 30px 60px -30px rgb(0 0 0 / var(--sh)); overflow: hidden; }

/* security timeline */
.ol-attack ol { list-style: none; padding: 10px 16px 16px; }
.ol-attack li { display: grid; grid-template-columns: 46px 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--fg-2); opacity: .25; transition: opacity .5s, background .5s; }
.ol-attack li.is-on { opacity: 1; }
.ol-attack li b { color: var(--fg); }
.ol-attack time { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.ol-attack li > em { font-style: normal; font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 6px; background: rgba(248,113,113,.1); color: #fca5a5; white-space: nowrap; }
.ol-attack li.ol-act { border-bottom: 0; margin-top: 6px; border-radius: 10px; background: rgba(19,233,137,.06); }
.ol-attack li.ol-act > em { background: rgba(19,233,137,.15); color: var(--mint); }
.ol-attack li.ol-act .ol-logo { width: 20px; height: 20px; justify-self: center; }

/* case flow */
.ol-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.ol-flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 37px; height: 2px; background: linear-gradient(90deg, rgba(19,233,137,.1), rgba(19,233,137,.5), rgba(19,233,137,.1)); }
.ol-flow article { position: relative; padding: 22px 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-a); transition: border-color .5s, background .5s, transform .5s; }
.ol-flow article.is-on { border-color: rgba(19,233,137,.55); background: rgba(19,233,137,.05); transform: translateY(-6px); }
.ol-flow .ol-step { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-1); border: 1px solid rgba(19,233,137,.5); font-family: var(--mono); font-size: 12px; color: var(--mint); transition: background .5s, color .5s; }
.ol-flow article.is-on .ol-step { background: var(--accent); color: #00140a; box-shadow: 0 0 16px rgba(19,233,137,.6); }
.ol-flow h3 { margin-top: 16px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ol-flow p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.ol-flow p b { color: var(--fg); font-weight: 600; }

/* agent network */
.ol-net { position: relative; aspect-ratio: 7 / 5; }
.ol-net-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ol-net-lines line { stroke: rgba(19,233,137,.18); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.ol-net-lines line.is-hot { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; animation: ol-dash .6s linear infinite; }
@keyframes ol-dash { to { stroke-dashoffset: -12; } }
.ol-node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #121416; font-family: var(--mono); font-size: 12px; color: var(--fg); white-space: nowrap; transition: border-color .3s, box-shadow .3s; }
.ol-node i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.ol-node.is-alert i { background: #f87171; box-shadow: 0 0 10px #f87171; }
.ol-node.is-hot { border-color: rgba(19,233,137,.6); box-shadow: 0 0 24px -4px rgba(19,233,137,.5); }
.ol-hub { padding: 14px 20px; font-size: 14px; font-weight: 600; border-color: rgba(19,233,137,.5); box-shadow: 0 0 40px -6px rgba(19,233,137,.45); }
.ol-hub .ol-logo { width: 18px; height: 18px; }
.ol-msg { position: absolute; left: 50%; bottom: 5%; translate: -50% 0; width: min(88%, 460px); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgb(14 16 17 / .94); font-size: 13.5px; line-height: 1.5; color: var(--fg-2); opacity: 0; transition: opacity .35s; }
.ol-msg.is-on { opacity: 1; }
.ol-msg b { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--mint); display: block; margin-bottom: 3px; }

/* watched dashboard */
.ol-widgets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
.ol-w { position: relative; padding: 12px 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: #121416; }
.ol-w span { font-size: 12px; color: var(--fg-2); }
.ol-w > b { display: block; margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.ol-w > b.bad { color: #fca5a5; }
.ol-w svg { display: block; width: 100%; height: 40px; margin-top: 6px; }
.ol-w .ln { fill: none; stroke: #f87171; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ol-w:nth-child(3) .ln { stroke: #fbbf24; }
.ol-pin { position: absolute; left: var(--l); top: var(--t); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #00140a; font: 700 11px/1 var(--mono); font-style: normal; box-shadow: 0 0 0 4px rgba(19,233,137,.2), 0 0 16px rgba(19,233,137,.6); animation: ol-pulse 2s infinite; }
.ol-note-card { display: flex; gap: 12px; align-items: flex-start; margin: 0 16px 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(19,233,137,.35); background: rgba(19,233,137,.05); font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.ol-note-card .ol-logo { margin-top: 3px; }
.ol-note-card b { color: var(--mint); font-family: var(--mono); margin-right: 4px; }
.ol-note-card em { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--fg-3); }

/* scheduled-task film */
.ol-film { max-width: 900px; margin: 0 auto; }
.ol-film-screen { position: relative; aspect-ratio: 16 / 8; background: radial-gradient(80% 70% at 50% 30%, rgba(19,233,137,.08), transparent 70%), #0b0c0d; }
.ol-film .sc { position: absolute; inset: 0; display: grid; place-items: center; padding: 32px; opacity: 0; transition: opacity .5s; }
.ol-film .sc.is-on { opacity: 1; }
.ol-type { display: flex; gap: 14px; align-items: flex-start; max-width: 640px; padding: 18px 20px; border-radius: 14px; border: 1px solid rgba(19,233,137,.4); background: #141618; }
.ol-type .ol-logo { margin-top: 3px; }
.ol-type code { font-family: var(--mono); font-size: 15px; line-height: 1.6; color: var(--fg); white-space: pre-wrap; }
.ol-task { width: min(100%, 460px); padding: 20px 22px; border-radius: 14px; border: 1px solid rgba(19,233,137,.45); background: #121416; box-shadow: 0 0 60px -20px rgba(19,233,137,.5); }
.ol-task > b { display: block; font-size: 16px; color: var(--mint); margin-bottom: 12px; }
.ol-task dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; font-size: 14px; }
.ol-task dt { color: var(--fg-3); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.ol-task dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--fg); }
.ol-task dd .pl { width: 18px; height: 18px; font-size: 8px; border-radius: 5px; }
.ol-clock { text-align: center; }
.ol-clock span { display: block; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.ol-clock b { font-size: clamp(64px, 10vw, 120px); font-weight: 500; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ol-film .sc4 { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; }
.ol-slack, .ol-mail { display: flex; gap: 12px; align-items: flex-start; width: min(100%, 600px); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #17191c; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.ol-slack .pl, .ol-mail .pl { width: 28px; height: 28px; border-radius: 8px; font-size: 12px; }
.ol-slack b, .ol-mail b { color: var(--fg); }
.ol-slack em { font-style: normal; margin-left: 6px; font-size: 11.5px; color: var(--fg-3); }
.ol-slack p { margin-top: 3px; } .ol-mail p { font-size: 12.5px; color: var(--fg-3); }
.ol-film .sc4 > * { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.ol-film .sc4.is-on > * { opacity: 1; transform: none; } .ol-film .sc4.is-on > :nth-child(2) { transition-delay: .9s; }
.ol-film-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ol-film-pp { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: none; display: grid; place-items: center; cursor: pointer; }
.ol-film-pp svg { width: 13px; height: 13px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linejoin: round; } .ol-film-pp .i-play { fill: var(--fg); display: none; }
.ol-film.is-paused .ol-film-pp .i-play { display: block; } .ol-film.is-paused .ol-film-pp .i-pause { display: none; }
.ol-film-track { flex: 1; height: 3px; border-radius: 3px; background: var(--line-2); overflow: hidden; } .ol-film-track i { display: block; height: 100%; width: 0; background: var(--accent); }
.ol-film-label { min-width: 90px; text-align: right; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

/* memory */
.ol-memory { padding: 18px; display: grid; gap: 14px; }
.ol-mem-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.ol-mem-cards div { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(168,85,247,.28); background: rgba(168,85,247,.06); font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.ol-mem-cards em { display: block; margin-bottom: 4px; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #d8b4fe; }
.ol-mem-use { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: #141618; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.ol-mem-use .ol-logo { margin-top: 4px; }
.ol-mem-use b { color: var(--fg); }
.ol-mem-use .ol-chip { margin-right: 8px; background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.35); color: #d8b4fe; }

/* plugins wall */
.ol-wall { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ol-wall li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--card-a); font-size: 14px; color: var(--fg); text-align: center; transition: border-color .25s, transform .25s; }
.ol-wall li:hover { border-color: rgba(19,233,137,.45); }
.ol-wall .pl { width: 40px; height: 40px; }


/* certs, quotes */
.ol-certs { margin-top: 36px; text-align: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--fg-3); }
.ol-quotes figure { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.ol-quotes blockquote { margin: 0; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg); }
.ol-quotes figcaption { font-size: 14px; color: var(--fg-2); }
.ol-more { margin-top: 32px; text-align: center; }

/* ───── responsive ───── */
@media (max-width: 1120px) {
  .ol-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ol-split-rev > .ol-copy { order: 0; }
  .ol-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ol-flow::before { display: none; }
  .ol-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ol-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ol-hero { padding: 56px 0 64px; }
  .ol-stage { margin-top: 40px; padding: 0 12px; }
  .ol-flow { grid-template-columns: minmax(0, 1fr); }
  .ol-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ol-widgets { grid-template-columns: minmax(0, 1fr); }
  .ol-mem-cards { grid-template-columns: minmax(0, 1fr); }
  .ol-attack li { grid-template-columns: 40px 22px minmax(0, 1fr); font-size: 13px; } .ol-attack li > em { grid-column: 3; justify-self: start; }
  .ol-net { aspect-ratio: 4 / 5; }
  .ol-node { font-size: 10.5px; padding: 7px 10px; }
  .ol-film-screen { aspect-ratio: 4 / 5; }
  .ol-type code { font-size: 13px; }
  .ol-quotes blockquote { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .ol-aurora i { animation: none; } }

/* ───── the player view: the hero window enlarged in place, with a control bar (page.js) ───── */
.ol-expand { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border: 0; border-radius: 7px; background: none; color: var(--fg-3); cursor: pointer; transition: color .2s, background .2s; }
.ol-expand:hover { color: var(--fg); background: rgb(var(--ink) / .08); }
.ol-expand svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ol-backdrop, .ol-ctl { display: none; }
html.ol-locked { overflow: hidden; }
.ol-expanded .ol-backdrop { display: block; position: fixed; inset: 0; z-index: 990; background: rgb(0 0 0 / .86); backdrop-filter: blur(6px); }
.ol-expanded .ol-win { position: fixed; z-index: 1000; left: 50%; top: 24px; translate: -50% 0; margin: 0; max-width: none;
  width: min(calc(100vw - 48px), calc((100vh - 156px) * 16 / 9)); }
.ol-expanded .ol-expand svg path { d: path("M2.5 6.5h4v-4M2.5 2.5 7 7M13.5 9.5h-4v4M13.5 13.5 9 9"); }
.ol-expanded .ol-ctl { position: fixed; z-index: 1000; left: 50%; bottom: 20px; translate: -50% 0; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px);
  padding: 6px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(14 15 16 / .95); box-shadow: 0 20px 50px -20px rgb(0 0 0 / var(--sh)); }
.ol-ctl > button { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: none; color: var(--fg); display: grid; place-items: center; cursor: pointer; }
.ol-ctl > button:hover { background: rgb(var(--ink) / .08); }
.ol-ctl > button[data-ol-play] { background: var(--accent); color: #00140a; }
.ol-ctl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ol-ctl [data-ol-play] .i-play { fill: currentColor; display: none; }
.ol-stage.is-user-paused [data-ol-play] .i-play { display: block; } .ol-stage.is-user-paused [data-ol-play] .i-pause { display: none; }
.ol-ctl-tabs { flex: none; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ol-ctl-tabs .ol-scn { flex-wrap: nowrap; justify-content: flex-start; margin: 0; }
.ol-ctl-tabs .ol-scn button { height: 34px; font-size: 13px; }
.ol-expanded .ol-note { display: none; }
@media (max-width: 560px) {
  .ol-expanded .ol-win { top: 12px; width: calc(100vw - 16px); }
  .ol-expanded .ol-ctl { bottom: 12px; }
  .ol-ctl-tabs { flex: 1 1 auto; max-width: 46vw; }
}

/* the pause, inside the window: a chip over the chat with a Resume button, and a pause sign flashing as it stops */
.ol-pause { position: absolute; left: 50%; top: 14px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 12px; border-radius: 999px;
  background: rgb(14 15 16 / .9); border: 1px solid rgba(134,255,201,.28); box-shadow: 0 12px 30px rgb(0 0 0 / calc(.45 * var(--sh))); color: var(--mint); white-space: nowrap;
  font: 500 12px/1 var(--mono); letter-spacing: .02em; opacity: 0; translate: -50% -6px; pointer-events: none; transition: opacity .2s, translate .2s; }
.ol-pause.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.ol-pause svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ol-pause button { font: inherit; height: 26px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--accent); color: #04130b; font-weight: 600; cursor: pointer; }
.ol-pause button:hover { background: var(--mint); }
.ol-sign { position: absolute; left: 50%; top: 50%; z-index: 5; display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: rgb(0 0 0 / .62); color: #fff; pointer-events: none; opacity: 0; }
.ol-sign svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ol-sign.is-on { animation: olSign .9s ease-out both; }
@keyframes olSign { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.12); } }
@media (max-width: 560px) { .ol-pause span { display: none; } .ol-pause { padding-left: 10px; } }
@media (prefers-reduced-motion: reduce) { .ol-sign.is-on { animation: none; } }
/* light skin: the hero wordmark, the scenario pills, and the light-ground logos outside the dark mock-ups */
:root[data-theme="light"] .ol-name { background-image: linear-gradient(180deg, var(--fg) 30%, var(--mint-hi-3)); }
:root[data-theme="light"] .ol-scn button { background: rgb(var(--ink) / .03); }
:root[data-theme="light"] .ol-scn button[aria-selected="true"] { background: rgba(19,233,137,.1); }
:root[data-theme="light"] .pl-okta:not(.skin-dark .pl) { background-image: url(/assets/pages/olly/logos/okta.svg); }
:root[data-theme="light"] .pl-github:not(.skin-dark .pl) { background-image: url(/assets/pages/olly/logos/github.svg); }
:root[data-theme="light"] .pl-aws:not(.skin-dark .pl) { background-image: url(/assets/pages/olly/logos/aws.svg); }
:root[data-theme="light"] .pl-mcp:not(.skin-dark .pl) { background-image: url(/assets/pages/olly/logos/mcp.svg); }