.oc-onboarding-overlay {
  --oc-blue: #2563eb;
  --oc-ink: #13203a;
  --oc-muted: #647189;
  --oc-line: #d7dfeb;
  --oc-paper: #f8fafc;
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--oc-ink);
  background: rgba(14, 24, 43, .64);
  backdrop-filter: blur(12px);
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

.oc-onboarding-overlay[hidden] { display: none; }

.oc-onboarding-dialog {
  position: relative;
  width: min(1240px, 100%);
  height: min(820px, calc(100dvh - 44px));
  min-height: 620px;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 48px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 34px 110px rgba(7, 18, 39, .34);
  animation: oc-onboarding-enter .28s cubic-bezier(.2, .75, .25, 1) both;
}

.oc-onboarding-dialog button { font: inherit; }
.oc-onboarding-brand { display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: 1px solid var(--oc-line); }
.oc-onboarding-brand strong { font-size: 18px; font-weight: 900; letter-spacing: -.045em; }
.oc-onboarding-brand span { padding-left: 12px; border-left: 1px solid var(--oc-line); color: var(--oc-muted); font-size: 11px; font-weight: 750; }
.oc-onboarding-close { position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #5e6a7e; background: transparent; font-size: 24px; cursor: pointer; }
.oc-onboarding-close:hover, .oc-onboarding-close:focus-visible { color: var(--oc-ink); background: #edf2f8; }
.oc-onboarding-dialog > main { min-height: 0; overflow: auto; }

.oc-onboarding-footer { min-width: 0; display: flex; align-items: center; gap: 16px; padding: 0 24px; border-top: 1px solid var(--oc-line); color: var(--oc-muted); background: #fbfcfe; font-size: 11px; }
.oc-onboarding-footer span { margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-onboarding-footer button { padding: 7px 0; border: 0; color: #56647a; background: transparent; font-size: 11px; font-weight: 760; cursor: pointer; }
.oc-onboarding-footer button:hover, .oc-onboarding-footer button:focus-visible { color: var(--oc-blue); }

.oc-onboarding-kicker { display: inline-flex; margin-bottom: 18px; color: var(--oc-blue); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.oc-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 850; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.oc-button:hover { transform: translateY(-1px); }
.oc-button:disabled { opacity: .64; cursor: wait; transform: none; }
.oc-button-primary { color: #fff; background: var(--oc-blue); box-shadow: 0 12px 28px rgba(37, 99, 235, .22); }
.oc-button-primary:hover { background: #1d55ca; }
.oc-button-secondary { border-color: #cbd6e5; color: #2c3a52; background: #fff; }
.oc-button-secondary:hover { border-color: #aebdd2; background: #f8fafc; }

.oc-onboarding-intro { min-height: 100%; display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); align-items: center; gap: 60px; padding: 64px 72px; background: #fff; }
.oc-onboarding-intro-copy h1 { max-width: 620px; margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -.06em; }
.oc-onboarding-intro-copy p { max-width: 540px; margin: 24px 0 0; color: var(--oc-muted); font-size: 16px; line-height: 1.72; }
.oc-onboarding-intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }

.oc-workflow-ribbon { min-height: 500px; display: grid; grid-template-columns: 1fr auto 1fr; align-content: center; gap: 16px; padding: 42px; border-left: 1px solid var(--oc-line); background: #f5f8fc; }
.oc-workflow-ribbon div { min-height: 126px; display: grid; align-content: center; padding: 22px; border: 1px solid #ced9e8; border-radius: 14px; background: #fff; box-shadow: 0 15px 35px rgba(36, 55, 86, .07); animation: oc-workflow-rise .45s ease both; }
.oc-workflow-ribbon div:nth-of-type(2) { animation-delay: .08s; }
.oc-workflow-ribbon div:nth-of-type(3) { animation-delay: .16s; }
.oc-workflow-ribbon div:nth-of-type(4) { animation-delay: .24s; }
.oc-workflow-ribbon div span { color: var(--oc-blue); font-size: 10px; font-weight: 900; }
.oc-workflow-ribbon div strong { margin-top: 8px; font-size: 24px; letter-spacing: -.04em; }
.oc-workflow-ribbon div small { margin-top: 5px; color: var(--oc-muted); font-size: 11px; }
.oc-workflow-ribbon i { align-self: center; color: #8da1bf; font-style: normal; font-size: 20px; }

.oc-onboarding-purpose { min-height: 100%; padding: 48px 76px 40px; }
.oc-onboarding-section-head { max-width: 780px; }
.oc-onboarding-section-head h1 { margin: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.04; letter-spacing: -.055em; }
.oc-onboarding-section-head p { margin: 16px 0 0; color: var(--oc-muted); font-size: 14px; line-height: 1.65; }
.oc-purpose-list { margin-top: 34px; border-block: 1px solid var(--oc-line); }
.oc-purpose-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 32px; align-items: center; gap: 16px; padding: 10px 6px; border: 0; border-bottom: 1px solid #e3e8f0; text-align: left; color: var(--oc-ink); background: transparent; cursor: pointer; transition: padding .18s ease, color .18s ease, background .18s ease; }
.oc-purpose-row:last-child { border-bottom: 0; }
.oc-purpose-row:hover, .oc-purpose-row:focus-visible { padding-inline: 16px; color: var(--oc-blue); background: #f3f7fd; outline: none; }
.oc-purpose-index { color: #96a4ba; font-size: 11px; font-weight: 850; }
.oc-purpose-copy { display: grid; gap: 4px; }
.oc-purpose-copy strong { font-size: 17px; letter-spacing: -.025em; }
.oc-purpose-copy small { color: var(--oc-muted); font-size: 12px; }
.oc-purpose-arrow { color: #9aa9bf; font-size: 18px; }
.oc-back, .oc-change-purpose { border: 0; color: #5a6980; background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.oc-back { margin-top: 22px; padding: 8px 0; }
.oc-back:hover, .oc-change-purpose:hover { color: var(--oc-blue); }

.oc-onboarding-preview { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 30px 34px 26px; }
.oc-onboarding-preview-head { display: flex; align-items: flex-start; gap: 24px; padding: 0 4px 22px; }
.oc-onboarding-preview-head > div { min-width: 0; }
.oc-onboarding-preview-head .oc-onboarding-kicker { margin-bottom: 7px; }
.oc-onboarding-preview-head h1 { margin: 0; font-size: 32px; letter-spacing: -.045em; }
.oc-onboarding-preview-head p { max-width: 760px; margin: 7px 0 0; color: var(--oc-muted); font-size: 12px; line-height: 1.6; }
.oc-change-purpose { margin-left: auto; padding: 8px 0; flex: none; }
.oc-preview-layout { min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr) 250px; border: 1px solid var(--oc-line); border-radius: 16px; overflow: hidden; background: var(--oc-paper); }
.oc-scene-rail { min-height: 0; overflow: auto; padding: 16px 12px; border-right: 1px solid var(--oc-line); background: #fff; }
.oc-scene-rail ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.oc-scene-rail button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 7px; padding: 10px 8px; border: 0; border-radius: 8px; color: #526078; text-align: left; background: transparent; font-size: 10px; font-weight: 760; cursor: pointer; }
.oc-scene-rail button span { color: #9aa8bc; font-size: 9px; }
.oc-scene-rail button:hover, .oc-scene-rail button:focus-visible { color: var(--oc-ink); background: #eef3f9; outline: none; }
.oc-scene-rail button.active { color: #164dac; background: #e9f1ff; }
.oc-scene-rail button.active span { color: var(--oc-blue); }

.oc-preview-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 40px minmax(0, 1fr) 48px; padding: 14px 16px 12px; background: #eef3f8; }
.oc-preview-topline { display: flex; align-items: center; gap: 10px; padding: 0 4px; color: #64738a; font-size: 10px; }
.oc-preview-topline span { padding: 4px 7px; border: 1px solid #b9c9df; border-radius: 999px; color: #31588e; background: #f7faff; font-weight: 850; }
.oc-preview-topline strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-preview-canvas { position: relative; min-height: 360px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; overflow: hidden; padding: 28px; border: 1px solid #b9c6d8; border-radius: 13px; background-color: #f9fbfd; background-image: radial-gradient(#cbd6e4 1px, transparent 1px); background-size: 18px 18px; }
.oc-preview-zone { min-width: 0; display: grid; align-content: start; gap: 7px; padding: 16px; border: 1px solid #d4ddea; border-radius: 10px; color: #54637a; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(39, 57, 85, .05); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease; }
.oc-preview-zone span { color: #9aa9bd; font-size: 9px; font-weight: 900; }
.oc-preview-zone strong { overflow-wrap: anywhere; font-size: 12px; }
.oc-preview-zone.active { z-index: 2; border-color: var(--oc-blue); color: #153f83; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(37, 99, 235, .16); }
.oc-preview-zone.active span { color: var(--oc-blue); }
.oc-example-cursor { position: absolute; z-index: 4; left: calc(12% + (var(--scene-index) % 3) * 28%); top: calc(18% + (var(--scene-index) % 2) * 38%); display: flex; align-items: center; gap: 5px; transition: left .5s cubic-bezier(.2,.75,.25,1), top .5s cubic-bezier(.2,.75,.25,1); }
.oc-example-cursor i { width: 0; height: 0; border-top: 12px solid var(--oc-blue); border-right: 8px solid transparent; transform: rotate(-18deg); }
.oc-example-cursor span { padding: 5px 7px; border-radius: 6px; color: #fff; background: var(--oc-blue); font-size: 9px; font-weight: 800; box-shadow: 0 6px 16px rgba(37, 99, 235, .25); white-space: nowrap; }
.oc-scene-action { position: absolute; z-index: 3; left: 42px; right: 42px; bottom: 24px; display: grid; gap: 4px; padding: 11px 14px; border: 1px solid #c8d5e7; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 10px 28px rgba(35, 52, 80, .12); animation: oc-scene-reveal .25s ease both; }
.oc-scene-action small { color: var(--oc-blue); font-size: 9px; font-weight: 900; }
.oc-scene-action strong { font-size: 11px; line-height: 1.45; }
.oc-preview-controls { display: flex; align-items: center; gap: 8px; padding: 10px 4px 0; }
.oc-preview-controls button { min-width: 32px; height: 30px; padding: 0 9px; border: 1px solid #c5d0df; border-radius: 7px; color: #394963; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.oc-preview-controls button:hover { border-color: #9db2cf; }
.oc-preview-progress { min-width: 80px; height: 3px; margin-left: auto; overflow: hidden; border-radius: 99px; background: #cbd6e4; }
.oc-preview-progress i { display: block; height: 100%; border-radius: inherit; background: var(--oc-blue); transition: width .25s ease; }
.oc-preview-controls > span { color: #64738a; font-size: 9px; font-weight: 800; }

.oc-preview-summary { min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 22px 18px; border-left: 1px solid var(--oc-line); background: #fff; }
.oc-preview-summary > span { color: var(--oc-blue); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.oc-preview-summary > p { margin: 10px 0 0; color: #526078; font-size: 11px; line-height: 1.65; }
.oc-preview-summary ol { display: grid; gap: 9px; margin: 18px 0 24px; padding: 0; list-style: none; counter-reset: oc-action; }
.oc-preview-summary li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 8px; color: #3f4e65; font-size: 10px; line-height: 1.45; }
.oc-preview-summary li::before { counter-increment: oc-action; content: counter(oc-action); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: #eaf1ff; font-size: 9px; font-weight: 900; }
.oc-preview-summary .oc-button { width: 100%; min-height: 44px; margin-top: auto; padding-inline: 12px; font-size: 11px; }
.oc-preview-summary .oc-button + .oc-button { margin-top: 8px; }
.oc-preview-summary .oc-preview-blank-copy { margin-bottom: 24px; }
.oc-workspace-scope { display: grid; gap: 4px; margin: auto 0 12px; padding: 10px; border: 1px solid #d8e1ed; border-radius: 9px; background: #f7f9fc; }
.oc-workspace-scope strong { color: #31588e; font-size: 9px; }
.oc-workspace-scope span { color: #66758b; font-size: 9px; line-height: 1.45; }
.oc-onboarding-error { color: #b42318 !important; font-weight: 700; }

.oc-start-guide, .oc-first-actions { position: fixed; z-index: 9500; right: 22px; bottom: 22px; width: min(380px, calc(100vw - 28px)); padding: 18px; border: 1px solid #cbd7e6; border-radius: 15px; color: #172033; background: rgba(255,255,255,.98); box-shadow: 0 22px 62px rgba(15, 29, 53, .2); font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; animation: oc-guide-enter .25s ease both; }
.oc-start-guide[hidden], .oc-first-actions[hidden] { display: none; }
@media (min-width: 760px) {
  body[data-entry-mode="onboarding"] .oc-start-guide,
  body[data-entry-mode="onboarding"] .oc-first-actions { right: 166px; }
}
@media (max-width: 759px) {
  body[data-entry-mode="onboarding"] #playgroundFollowupLauncher { bottom: 300px; }
}
.oc-guide-head { display: flex; align-items: flex-start; gap: 14px; }
.oc-guide-head > div { min-width: 0; display: grid; gap: 4px; }
.oc-guide-head span { color: #2563eb; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.oc-guide-head strong { font-size: 16px; letter-spacing: -.025em; }
.oc-guide-head > button { width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 7px; color: #657288; background: #f0f4f9; font-size: 18px; cursor: pointer; }
.oc-starter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.oc-starter-actions button { min-height: 72px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid #d7dfeb; border-radius: 10px; text-align: left; color: #263650; background: #fff; cursor: pointer; }
.oc-starter-actions button:hover, .oc-starter-actions button:focus-visible { border-color: #8daee5; background: #f3f7fd; outline: none; }
.oc-starter-actions strong { font-size: 12px; }
.oc-starter-actions small { color: #728097; font-size: 9px; }
.oc-guide-empty { margin-top: 12px; padding: 7px 0; border: 0; color: #657288; background: transparent; font-size: 10px; font-weight: 750; cursor: pointer; }
.oc-first-actions ol { display: grid; gap: 6px; margin: 16px 0 10px; padding: 0; list-style: none; }
.oc-first-actions li button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; color: #34445e; text-align: left; background: #f6f8fb; font-size: 10px; font-weight: 760; cursor: pointer; }
.oc-first-actions li button:hover { color: #164dac; background: #eaf1ff; }
.oc-first-actions li span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #2563eb; background: #fff; font-size: 9px; }
.oc-first-actions > small { color: #748197; font-size: 9px; }
.oc-guide-explore { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 0 11px; border: 1px solid #a9c3ee; border-radius: 10px; color: #174ea6; background: #edf4ff; font-size: 10px; font-weight: 850; cursor: pointer; }
.oc-guide-explore:hover, .oc-guide-explore:focus-visible { border-color: #5f91e3; outline: 0; background: #e2edff; }
.oc-guide-explore span { color: #2563eb; font-size: 9px; letter-spacing: .08em; }

.oc-example-explorer { position: fixed; z-index: 9650; right: 18px; bottom: 148px; color: #172033; font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif; }
.oc-example-explorer-launcher { width: 238px; min-height: 54px; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border: 1px solid #7ca5ef; border-radius: 15px; color: #173665; text-align: left; background: rgba(255,255,255,.97); box-shadow: 0 16px 38px rgba(22,54,101,.18); cursor: pointer; }
.oc-example-explorer-launcher:hover, .oc-example-explorer-launcher:focus-visible, .oc-example-explorer.is-open .oc-example-explorer-launcher { border-color: #2563eb; outline: 0; background: #f8fbff; box-shadow: 0 18px 44px rgba(37,99,235,.23); }
.oc-example-explorer-signal { width: 9px; height: 9px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 5px rgba(37,99,235,.12); }
.oc-example-explorer-launcher-copy { min-width: 0; display: grid; gap: 2px; }
.oc-example-explorer-launcher-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.oc-example-explorer-launcher-copy small { color: #6b7c95; font-size: 9px; }
.oc-example-explorer-range { color: #2563eb; font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.oc-example-explorer-panel { position: absolute; right: 0; bottom: 66px; width: min(440px, calc(100vw - 28px)); max-height: min(690px, calc(100dvh - 190px)); padding: 20px; overflow: auto; border: 1px solid #abc5ef; border-radius: 18px; background: rgba(255,255,255,.985); box-shadow: 0 28px 78px rgba(15,35,70,.28); animation: oc-explorer-enter .24s cubic-bezier(.16,1,.3,1) both; }
.oc-example-explorer-panel[hidden] { display: none; }
.oc-example-explorer-head { display: flex; align-items: flex-start; gap: 12px; }
.oc-example-explorer-head > div { min-width: 0; display: grid; gap: 5px; }
.oc-example-explorer-head span { color: #2563eb; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.oc-example-explorer-head h2 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.035em; }
.oc-example-explorer-head > button { width: 30px; height: 30px; margin-left: auto; border: 0; border-radius: 8px; color: #607087; background: #eef3f9; font-size: 19px; cursor: pointer; }
.oc-example-explorer-panel > p { margin: 9px 0 15px; color: #66758b; font-size: 10px; line-height: 1.6; }
.oc-example-explorer-list { display: grid; gap: 7px; }
.oc-example-explorer-list > button { width: 100%; min-height: 65px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #dae3ef; border-radius: 11px; color: #23324a; text-align: left; background: #f8fafd; cursor: pointer; }
.oc-example-explorer-list > button:hover, .oc-example-explorer-list > button:focus-visible { border-color: #7ca5ef; outline: 0; background: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.11); }
.oc-example-explorer-list > button.is-current { border-color: #74a0ec; background: #eaf2ff; cursor: default; }
.oc-example-explorer-list > button.is-visited:not(.is-current) { border-color: #c8d8ee; background: #fbfdff; }
.oc-example-explorer-number { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #2563eb; background: #fff; font-size: 9px; font-weight: 900; }
.oc-example-explorer-copy { min-width: 0; display: grid; gap: 3px; }
.oc-example-explorer-copy strong { font-size: 11px; }
.oc-example-explorer-copy small { overflow: hidden; color: #6a7890; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.oc-example-explorer-status { color: #58708f; font-size: 8px; font-weight: 850; white-space: nowrap; }
.oc-example-explorer-list > button.is-current .oc-example-explorer-status { color: #2563eb; }
.oc-example-explorer-panel > small { display: block; margin-top: 12px; color: #7a879a; font-size: 8px; }
.oc-example-explorer.is-inviting .oc-example-explorer-launcher { animation: oc-explorer-invite 1.15s ease-out 3; }

.oc-help-entry { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line, #d7dfeb); }
.oc-help-entry h3 { margin: 0 0 7px; }
.oc-help-entry p { margin: 0 0 12px; color: var(--text-2, #657288); font-size: 11px; line-height: 1.6; }
.oc-help-entry .btn-primary, .oc-help-entry .btn-secondary { width: 100%; min-height: 38px; padding-inline: 14px; }
.oc-help-entry .btn-secondary { margin-top: 8px; }

@keyframes oc-onboarding-enter { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes oc-workflow-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes oc-scene-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes oc-guide-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes oc-explorer-enter { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes oc-explorer-invite { 0%, 100% { transform: none; } 45% { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(37,99,235,.3); } }

@media (max-width: 980px) {
  .oc-onboarding-dialog { height: min(900px, calc(100dvh - 28px)); }
  .oc-onboarding-intro { grid-template-columns: 1fr; align-content: start; gap: 34px; padding: 46px; }
  .oc-onboarding-intro-copy h1 { font-size: 46px; }
  .oc-workflow-ribbon { min-height: 260px; grid-template-columns: repeat(4, 1fr); padding: 24px; border: 1px solid var(--oc-line); }
  .oc-workflow-ribbon i { display: none; }
  .oc-workflow-ribbon div { min-height: 112px; padding: 15px; }
  .oc-preview-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .oc-preview-summary { grid-column: 1 / -1; display: flex; border-top: 1px solid var(--oc-line); border-left: 0; }
  .oc-preview-summary .oc-workspace-scope { margin-top: 8px; }
  .oc-preview-summary .oc-button { margin-top: 8px; }
}

@media (max-width: 700px) {
  .oc-onboarding-overlay { padding: 0; }
  .oc-onboarding-dialog { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .oc-onboarding-brand { padding-inline: 16px; }
  .oc-onboarding-footer { padding-inline: 14px; gap: 10px; }
  .oc-onboarding-footer span { display: none; }
  .oc-onboarding-footer button:first-of-type { margin-left: auto; }
  .oc-onboarding-intro, .oc-onboarding-purpose { padding: 32px 22px; }
  .oc-onboarding-intro-copy h1 { font-size: 38px; }
  .oc-onboarding-intro-actions { display: grid; }
  .oc-workflow-ribbon { grid-template-columns: 1fr 1fr; min-height: 0; }
  .oc-onboarding-section-head h1 { font-size: 36px; }
  .oc-purpose-row { grid-template-columns: 34px minmax(0, 1fr) 18px; }
  .oc-onboarding-preview { padding: 22px 14px; }
  .oc-onboarding-preview-head { padding-bottom: 14px; }
  .oc-onboarding-preview-head h1 { font-size: 26px; }
  .oc-preview-layout { display: block; overflow: visible; border: 0; background: transparent; }
  .oc-scene-rail { display: none; }
  .oc-preview-stage { min-height: 460px; border: 1px solid var(--oc-line); border-radius: 12px; }
  .oc-preview-canvas { min-height: 330px; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); padding: 18px; }
  .oc-preview-zone { padding: 11px; }
  .oc-preview-summary { display: flex; margin-top: 10px; border: 1px solid var(--oc-line); border-radius: 12px; }
  .oc-preview-summary ol { margin-bottom: 18px; }
  .oc-preview-summary .oc-button { margin-top: 0; }
  .oc-preview-summary .oc-button-primary { order: -2; margin-bottom: 8px; }
  .oc-preview-summary .oc-button-secondary { order: -1; margin-bottom: 16px; }
  .oc-example-explorer { right: 10px; bottom: 136px; }
  .oc-example-explorer-launcher { width: 222px; }
  .oc-example-explorer-panel { max-height: calc(100dvh - 190px); padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-onboarding-dialog, .oc-workflow-ribbon div, .oc-scene-action, .oc-start-guide, .oc-first-actions, .oc-example-explorer-launcher, .oc-example-explorer-panel { animation: none !important; }
  .oc-example-cursor, .oc-preview-zone, .oc-preview-progress i, .oc-button { transition: none !important; }
}

/* 시각 스토리텔링 레이어: 상태·복제 로직과 분리된 온보딩 전용 표현 */
.oc-onboarding-overlay {
  --oc-blue: #5578ef;
  --oc-ink: #111827;
  --oc-canvas-dark: #0c1017;
  --oc-canvas-panel: #121824;
  background: rgba(6, 10, 17, .74);
  backdrop-filter: blur(18px) saturate(.82);
}

.oc-onboarding-dialog {
  width: min(1390px, 100%);
  height: min(900px, calc(100dvh - 36px));
  border-color: rgba(255, 255, 255, .22);
  border-radius: 18px;
  background: #f5f3ed;
  box-shadow: 0 40px 140px rgba(0, 0, 0, .52), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-dialog {
  color: #f7f4ed;
  background: var(--oc-canvas-dark);
}

.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-brand,
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-footer {
  border-color: rgba(255, 255, 255, .1);
  color: #8f99aa;
  background: #0c1017;
}

.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-brand span { border-color: rgba(255,255,255,.13); color: #8f99aa; }
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-close { color: #98a2b3; }
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-close:hover,
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-close:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-footer button { color: #a3adbd; }
.oc-onboarding-overlay[data-step="intro"] .oc-onboarding-footer button:hover { color: #fff; }

.oc-onboarding-intro {
  grid-template-columns: minmax(360px, .7fr) minmax(640px, 1.3fr);
  gap: clamp(30px, 4vw, 64px);
  padding: 50px 52px 54px 62px;
  background: radial-gradient(circle at 8% 0, rgba(85, 120, 239, .12), transparent 36%), var(--oc-canvas-dark);
}

.oc-onboarding-intro-copy { position: relative; z-index: 2; }
.oc-onboarding-intro-copy h1 { max-width: 580px; font-size: clamp(43px, 4.6vw, 66px); line-height: .98; letter-spacing: -.065em; text-wrap: balance; }
.oc-onboarding-intro-copy p { max-width: 500px; color: #a7b0bf; font-size: 14px; line-height: 1.72; }
.oc-onboarding-kicker { color: #7898ff; }
.oc-intro-proof { display: grid; gap: 7px; margin-top: 24px; color: #c6cdd8; font-size: 10px; }
.oc-intro-proof span { display: flex; align-items: center; gap: 9px; }
.oc-intro-proof b { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(120,152,255,.42); border-radius: 50%; color: #8da8ff; font: 800 8px ui-monospace, monospace; }
.oc-onboarding-intro-actions { margin-top: 28px; }
.oc-onboarding-overlay[data-step="intro"] .oc-button-secondary { border-color: rgba(255,255,255,.17); color: #e6e9ee; background: rgba(255,255,255,.045); }
.oc-onboarding-overlay[data-step="intro"] .oc-button-secondary:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }

.oc-intro-product { position: relative; min-width: 0; min-height: 570px; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: radial-gradient(circle at 90% 0, rgba(78,109,217,.2), transparent 42%), #101620; box-shadow: 0 34px 90px rgba(0,0,0,.34); }
.oc-intro-product::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.oc-intro-product-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.oc-intro-product-head > div { display: grid; gap: 3px; }
.oc-intro-product-head span { color: #707c90; font: 800 8px ui-monospace, monospace; letter-spacing: .1em; }
.oc-intro-product-head strong { font-size: 11px; letter-spacing: .04em; }
.oc-intro-product-head .oc-live-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #9ca8ba; letter-spacing: 0; }
.oc-live-status i { width: 6px; height: 6px; border-radius: 50%; background: #75daa0; box-shadow: 0 0 12px rgba(117,218,160,.75); }
.oc-intro-product-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.56fr) minmax(170px,.44fr); gap: 10px; }
.oc-intro-hero { position: relative; height: 290px; overflow: hidden; margin: 0; border-radius: 11px; background: #080b10; }
.oc-intro-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,9,14,.72), transparent 48%); pointer-events: none; }
.oc-intro-hero > img { width: 100%; height: 100%; object-fit: cover; }
.oc-intro-hero figcaption { position: absolute; z-index: 2; left: 15px; right: 15px; bottom: 13px; display: grid; gap: 3px; }
.oc-intro-hero figcaption span { color: #a7b1c0; font: 700 8px ui-monospace, monospace; }
.oc-intro-hero figcaption strong { max-width: 360px; font-size: 13px; }
.oc-review-note { position: absolute; z-index: 3; right: 12px; top: 13px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 7px; width: min(230px, 52%); padding: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(8,12,18,.76); backdrop-filter: blur(12px); }
.oc-review-note > b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #5578ef; font-size: 8px; }
.oc-review-note > span { display: grid; gap: 2px; color: #c5ccd7; font-size: 8px; }
.oc-review-note strong { color: #fff; font-size: 8px; }
.oc-intro-pulse { display: flex; flex-direction: column; padding: 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: #151c28; }
.oc-pulse-heading { display: flex; align-items: flex-end; gap: 8px; }
.oc-pulse-heading span { max-width: 76px; color: #7e899b; font: 800 8px ui-monospace, monospace; line-height: 1.4; }
.oc-pulse-heading b { margin-left: auto; font: 800 25px ui-monospace, monospace; letter-spacing: -.05em; }
.oc-pulse-chart { height: 92px; display: flex; align-items: end; gap: 5px; padding: 14px 2px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.oc-pulse-chart i { flex: 1; height: var(--h); min-height: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,#7898ff,#354e9f); transform-origin: bottom; animation: oc-chart-rise .7s cubic-bezier(.2,.75,.25,1) both; }
.oc-intro-pulse dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 12px 0; }
.oc-intro-pulse dl div { display: grid; gap: 4px; }
.oc-intro-pulse dt { color: #737f92; font-size: 7px; }
.oc-intro-pulse dd { margin: 0; font: 800 12px ui-monospace, monospace; }
.oc-intro-people { display: flex; margin-top: auto; }
.oc-intro-people span, .oc-intro-people b { width: 27px; height: 27px; display: grid; place-items: center; margin-left: -5px; border: 2px solid #151c28; border-radius: 9px; color: #dce2eb; background: #29344a; font-size: 7px; }
.oc-intro-people span:first-child { margin-left: 0; background: #3d589e; }
.oc-intro-people span:nth-child(2) { background: #635245; }
.oc-intro-people span:nth-child(3) { background: #385c51; }
.oc-intro-timeline { position: relative; z-index: 1; margin-top: 10px; padding: 11px 12px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: #151c28; }
.oc-intro-track { position: relative; height: 3px; margin-bottom: 9px; border-radius: 99px; background: #303a4d; }
.oc-intro-track i { display: block; height: 100%; border-radius: inherit; background: #7898ff; }
.oc-intro-track b { position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #7898ff; transform: translate(-50%,-50%); }
.oc-intro-timeline ol { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.oc-intro-timeline li { min-width: 0; display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center; color: #a3adbd; font-size: 7px; }
.oc-intro-timeline li > span { grid-row: 1/3; width: 50px; height: 35px; border-radius: 5px; }
.oc-intro-timeline li b, .oc-intro-timeline li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-intro-timeline li b { color: #dfe4ec; font-size: 7px; }
.oc-intro-timeline li.active b { color: #8eabff; }
.oc-intro-timeline li small { color: #6e7a8e; font-size: 6px; }
.oc-intro-flow { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #6f7a8c; font-size: 7px; font-weight: 800; }
.oc-intro-flow i { flex: 1; height: 1px; background: #344054; }
.oc-intro-flow strong { color: #8eabff; }
.oc-contact-shot, .oc-shot-image { background-image: url("/onboarding/assets/brand-film-storyboard.png"); background-repeat: no-repeat; background-size: 200% 200%; }
.oc-contact-shot-1, .oc-shot-image-1 { background-position: 0 0; }
.oc-contact-shot-2, .oc-shot-image-2 { background-position: 100% 0; }
.oc-contact-shot-3, .oc-shot-image-3 { background-position: 0 100%; }
.oc-contact-shot-4, .oc-shot-image-4 { background-position: 100% 100%; }

.oc-onboarding-purpose { padding: 34px 54px 30px; background: #f5f3ed; }
.oc-onboarding-section-head { max-width: 920px; }
.oc-onboarding-section-head h1 { font-size: clamp(34px, 3.5vw, 49px); }
.oc-onboarding-section-head p { margin-top: 10px; }
.oc-purpose-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 22px; border: 0; }
.oc-purpose-row { position: relative; min-height: 108px; grid-template-columns: 28px 112px minmax(0,1fr) 24px; gap: 12px; padding: 11px; overflow: hidden; border: 1px solid #d7d7d2; border-radius: 12px; background: rgba(255,255,255,.72); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.oc-purpose-row:last-child { border-bottom: 1px solid #d7d7d2; }
.oc-purpose-row:hover, .oc-purpose-row:focus-visible { padding-inline: 11px; border-color: #849def; color: #173c9d; background: #fff; box-shadow: 0 14px 34px rgba(38,46,67,.09); transform: translateY(-2px); }
.oc-purpose-video { grid-column: 1 / -1; min-height: 138px; grid-template-columns: 28px minmax(220px,.62fr) minmax(0,1fr) 24px; }
.oc-purpose-blank { grid-column: 1 / -1; min-height: 82px; grid-template-columns: 28px 112px minmax(0,1fr) 24px; }
.oc-purpose-visual { position: relative; width: 100%; height: 84px; overflow: hidden; border-radius: 9px; background: #111722; }
.oc-purpose-video .oc-purpose-visual { height: 112px; }
.oc-purpose-blank .oc-purpose-visual { height: 58px; }
.oc-purpose-visual-video img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.82); }
.oc-purpose-visual-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(8,11,17,.05),rgba(8,11,17,.72)); }
.oc-purpose-visual-video i, .oc-purpose-visual-video b { position: absolute; z-index: 1; right: 8px; color: #fff; font-size: 7px; font-style: normal; }
.oc-purpose-visual-video i { top: 8px; }
.oc-purpose-visual-video b { bottom: 8px; padding: 4px 6px; border-radius: 5px; background: rgba(8,11,17,.68); }
.oc-purpose-visual-meeting { position:relative;display: grid; place-items: center; align-content: center; gap: 5px; overflow:hidden;color: #fff; background: #141d2a; }
.oc-purpose-visual-meeting::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,19,.24),rgba(8,12,19,.9))}.oc-purpose-visual-meeting img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}.oc-purpose-visual-meeting b,.oc-purpose-visual-meeting i,.oc-purpose-visual-meeting small{position:relative;z-index:1}
.oc-purpose-visual-meeting b { font: 800 27px ui-monospace, monospace; }
.oc-purpose-visual-meeting i { width: 62%; height: 3px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg,#7898ff 58%,#333e51 58%); }
.oc-purpose-visual-meeting small { color: #aeb9cb; font-size: 7px; }
.oc-purpose-visual-improvement { display: flex; align-items: end; gap: 5px; padding: 15px 12px; background: #16212b; }
.oc-purpose-visual-improvement i { flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: linear-gradient(#7698ff,#3751a1); }
.oc-purpose-visual-improvement b { position: absolute; top: 8px; right: 8px; color: #a5f0bf; font: 800 8px ui-monospace, monospace; }
.oc-purpose-visual-idea { background-color: #141d28; background-image: radial-gradient(#334157 1px,transparent 1px); background-size: 12px 12px; }
.oc-purpose-visual-idea i { position: absolute; width: 28px; height: 18px; border: 1px solid #506993; border-radius: 6px; background: #243249; }
.oc-purpose-visual-idea i:nth-child(1) { left: 8px; top: 12px; }.oc-purpose-visual-idea i:nth-child(2) { right: 8px; top: 10px; }.oc-purpose-visual-idea i:nth-child(3) { left: 12px; bottom: 10px; }.oc-purpose-visual-idea i:nth-child(4) { right: 10px; bottom: 11px; }
.oc-purpose-visual-idea::before, .oc-purpose-visual-idea::after { content: ""; position: absolute; left: 25%; right: 25%; top: 50%; height: 1px; background: #51688d; transform: rotate(18deg); }
.oc-purpose-visual-idea::after { transform: rotate(-18deg); }
.oc-purpose-visual-idea b { position: absolute; z-index: 1; left: 50%; top: 50%; padding: 5px 7px; border-radius: 7px; color: #fff; background: #5578ef; font-size: 7px; transform: translate(-50%,-50%); }
.oc-purpose-visual-blank { display: grid; grid-template-columns: 35px 1fr; align-items: center; padding: 8px 12px; color: #263248; background: #ecece7; }
.oc-purpose-visual-blank b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #c7c8c4; border-radius: 8px; background: #fff; }
.oc-purpose-visual-blank small { color: #6d7480; font-size: 8px; }

.oc-onboarding-preview { padding: 24px 26px 22px; background: #f5f3ed; }
.oc-onboarding-preview-head { padding-bottom: 15px; }
.oc-onboarding-preview-head h1 { font-size: 30px; }
.oc-preview-layout { grid-template-columns: 168px minmax(0,1fr) 256px; border-color: #cfd2d8; border-radius: 13px; background: #e6e7e8; }
.oc-preview-stage { grid-template-rows: 35px minmax(0,1fr) 44px; padding: 10px; background: #1a202b; }
.oc-preview-topline { color: #919bad; }
.oc-preview-topline span { border-color: #405275; color: #a8baff; background: #172038; }
.oc-preview-canvas { display: block; min-height: 420px; padding: 0; border-color: #343e4d; border-radius: 10px; background: var(--oc-canvas-dark); background-image: none; }
.oc-demo-screen { position: absolute; inset: 0; overflow: hidden; color: #f5f2ea; background: radial-gradient(circle at 84% 0,rgba(76,103,197,.16),transparent 40%),#0c1017; }
.oc-demo-screen-bar { height: 35px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.1); color: #8390a3; font: 800 8px ui-monospace, monospace; letter-spacing: .06em; }
.oc-demo-screen-bar span { color: #dfe4ec; }
.oc-demo-screen-bar small { margin-left: auto; font-size: 7px; }
.oc-example-cursor { left: calc(13% + (var(--scene-index) % 3) * 23%); top: calc(17% + (var(--scene-index) % 2) * 42%); }
.oc-example-cursor span { border: 1px solid rgba(255,255,255,.28); background: #5578ef; }
.oc-scene-action { left: 15px; right: 15px; bottom: 13px; padding: 9px 11px; border-color: rgba(255,255,255,.14); color: #f3f4f7; background: rgba(8,12,18,.82); backdrop-filter: blur(14px); box-shadow: 0 12px 35px rgba(0,0,0,.28); }
.oc-scene-action strong { padding-right: 145px; font-size: 10px; }
.oc-preview-controls { color: #a2adbd; }
.oc-preview-controls button { border-color: #384458; color: #d6dce6; background: #202938; }
.oc-preview-progress { background: #3b4658; }
.oc-preview-summary { background: #fff; }

.oc-demo-overview { display: grid; grid-template-columns: 1.42fr .88fr; grid-template-rows: 35px minmax(0,1fr) 90px; gap: 9px; padding: 0 10px 10px; }
.oc-demo-overview .oc-demo-screen-bar { grid-column: 1/-1; margin-inline: -10px; }
.oc-overview-hero { position: relative; min-width: 0; overflow: hidden; margin: 0; border-radius: 8px; }
.oc-overview-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,10,16,.72),transparent 52%); }
.oc-overview-hero img { width: 100%; height: 100%; object-fit: cover; }
.oc-overview-hero figcaption { position: absolute; z-index: 1; left: 12px; bottom: 10px; display: grid; gap: 2px; }
.oc-overview-hero figcaption b { font-size: 10px; letter-spacing: .08em; }.oc-overview-hero figcaption span { color: #abb4c2; font-size: 7px; }
.oc-overview-board { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.oc-overview-board article { display: grid; align-content: center; gap: 5px; padding: 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #151c28; }
.oc-overview-board span { color: #71809a; font: 800 7px ui-monospace, monospace; }.oc-overview-board b { font-size: 10px; line-height: 1.3; }.oc-overview-board small { color: #8f9aae; font-size: 7px; }
.oc-overview-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.oc-overview-rail span { min-width: 0; border-radius: 6px; }
.oc-overview-route { position: relative; align-self: center; display: flex; gap: 12px; padding-inline: 14px; }
.oc-overview-route::before { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; height: 2px; background: #344157; }
.oc-overview-route i, .oc-overview-route b { position: relative; z-index: 1; width: 12px; height: 12px; border: 3px solid #151c28; border-radius: 50%; background: #5578ef; }
.oc-overview-route i:nth-child(2) { margin-left: auto; }.oc-overview-route b { background: #78d9a0; }

.oc-demo-moodboard { padding-top: 35px; }
.oc-demo-moodboard .oc-demo-screen-bar { position: absolute; inset: 0 0 auto; }
.oc-image-viewer { height: calc(100% - 89px); display: grid; grid-template-columns: minmax(0,1fr) 116px; gap: 8px; padding: 10px; }
.oc-image-viewer figure { position: relative; min-width: 0; overflow: hidden; margin: 0; border-radius: 8px; background: #080b10; }
.oc-image-viewer figure img { width: 100%; height: 100%; object-fit: cover; }
.oc-image-viewer figcaption { position: absolute; left: 10px; right: 10px; bottom: 8px; display: grid; gap: 2px; padding: 8px; border-radius: 6px; background: rgba(7,10,16,.74); backdrop-filter: blur(10px); }
.oc-image-viewer figcaption b { font-size: 10px; }.oc-image-viewer figcaption span { color: #929daf; font-size: 7px; }
.oc-shot-thumbs { display: grid; gap: 6px; }
.oc-shot-thumb { min-height: 0; display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 5px; padding: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #adb5c3; text-align: left; background: #151c28; cursor: pointer; }
.oc-shot-thumb.active { border-color: #7898ff; color: #fff; }
.oc-shot-image { width: 44px; height: 100%; min-height: 44px; border-radius: 4px; background-position: center; background-size: cover; }
.oc-shot-thumb small { font-size: 7px; }
.oc-palette-row { height: 54px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 0 10px 10px; }
.oc-palette-row span { display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; color: #9ca7b7; font-size: 7px; background: #151c28; }
.oc-palette-row span::before { content: ""; width: 17px; height: 17px; border-radius: 50%; background: var(--swatch); }

.oc-demo-storyboard { padding-top: 35px; }
.oc-demo-storyboard .oc-demo-screen-bar { position: absolute; inset: 0 0 auto; }
.oc-storyboard-sheet { height: calc(100% - 74px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; padding: 9px; }
.oc-storyboard-sheet > div { position: relative; min-width: 0; overflow: hidden; padding: 8px; border: 1px solid transparent; background-size: 200% 200%; }
.oc-storyboard-sheet > div.active { border-color: #7898ff; box-shadow: inset 0 0 0 2px #7898ff; }
.oc-storyboard-sheet b { position: absolute; left: 7px; top: 7px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(7,10,16,.76); font: 800 8px ui-monospace, monospace; }
.oc-storyboard-sheet span { position: absolute; left: 7px; bottom: 6px; padding: 4px 6px; border-radius: 4px; background: rgba(7,10,16,.72); font-size: 7px; }
.oc-timeline-editor { position: relative; height: 39px; display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; padding: 0 9px 9px; }
.oc-timeline-editor i { background: #2b3548; }.oc-timeline-editor i.active { background: #4d68c2; }.oc-timeline-editor b { position: absolute; top: -4px; bottom: 5px; width: 2px; background: #f1b96b; box-shadow: 0 0 10px rgba(241,185,107,.8); }
.oc-floating-comment { position: absolute; z-index: 4; right: 13px; top: 72px; width: min(250px,45%); display: grid; gap: 5px; padding: 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: rgba(10,14,21,.88); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(0,0,0,.32); }
.oc-floating-comment span { color: #8eaaff; font-size: 7px; font-weight: 800; }.oc-floating-comment strong { font-size: 9px; line-height: 1.4; }.oc-floating-comment small { color: #7c899c; font-size: 7px; }

.oc-demo-schedule { padding-top: 35px; }
.oc-demo-schedule .oc-demo-screen-bar { position: absolute; inset: 0 0 auto; }
.oc-schedule-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 10px; }
.oc-schedule-kpis div { display: grid; gap: 4px; padding: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: #151c28; }
.oc-schedule-kpis small { color: #7e8a9e; font-size: 7px; }.oc-schedule-kpis b { font: 800 15px ui-monospace, monospace; }
.oc-gantt { display: grid; gap: 7px; padding: 5px 10px 4px; }
.oc-gantt > div { display: grid; grid-template-columns: 112px repeat(12,1fr) 34px; align-items: center; min-height: 31px; background-image: linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.06) 0); background-size: calc((100% - 146px)/12) 100%; background-position: 112px 0; }
.oc-gantt span { color: #b2bac7; font-size: 7px; }.oc-gantt i { grid-column: calc(var(--start) + 1) / span var(--length); height: 16px; border-radius: 4px; background: linear-gradient(90deg,#405db6,#7898ff); }.oc-gantt i.amber { background: linear-gradient(90deg,#8b5a31,#d39457); }.oc-gantt i.mint { background: linear-gradient(90deg,#317058,#71d49b); }.oc-gantt b { grid-column: 14; justify-self:end; color:#8b97aa;font-size:7px; }
.oc-gantt-axis { display: grid; grid-template-columns: repeat(12,1fr); margin: 0 45px 0 122px; color: #5f6a7d; font-size: 6px; text-align: center; }

.oc-demo-approval { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(150px,.6fr); grid-template-rows: 35px minmax(0,1fr) 48px; gap: 8px; padding: 0 9px 9px; }
.oc-demo-approval .oc-demo-screen-bar { grid-column:1/-1;margin-inline:-9px; }
.oc-approval-media { position: relative; min-width: 0; overflow: hidden; border-radius: 8px; }
.oc-approval-media img { width: 100%; height: 100%; object-fit: cover; }
.oc-pin { position: absolute; width: 22px; height: 22px; display: grid; place-items:center; border: 2px solid #fff; border-radius:50%; background:#5578ef; font-size:7px;font-weight:900; }.pin-one{left:45%;top:52%}.pin-two{left:65%;top:38%}
.oc-approval-feed { display:grid;align-content:start;gap:7px; }.oc-approval-feed article{display:grid;gap:4px;padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#151c28}.oc-approval-feed b{font-size:7px}.oc-approval-feed span{color:#b3bdca;font-size:7px;line-height:1.4}.oc-approval-feed small{color:#667286;font-size:6px}
.oc-approval-state { grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#151c28;color:#788599;font-size:7px}.oc-approval-state i{flex:1;height:1px;background:#374256}.oc-approval-state strong{padding:5px 7px;border-radius:5px;color:#c9f2d9;background:#173b2a;font-size:7px}

.oc-demo-report { padding-top:35px; }.oc-demo-report .oc-demo-screen-bar{position:absolute;inset:0 0 auto}.oc-report-chart{position:relative;height:53%;padding:18px 15px 4px}.oc-report-chart svg{width:100%;height:100%;overflow:visible}.oc-report-chart path{fill:none}.oc-report-chart .grid{stroke:#283143;stroke-width:1}.oc-report-chart .area{fill:url(#none);fill:#3455b2;opacity:.18}.oc-report-chart .line{stroke:#7898ff;stroke-width:4}.oc-report-chart b{position:absolute;right:22px;top:18px;font:800 10px ui-monospace,monospace}.oc-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 10px 10px}.oc-report-grid article{display:grid;gap:5px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#151c28}.oc-report-grid span{color:#748197;font-size:7px}.oc-report-grid b{font:800 15px ui-monospace,monospace}.oc-report-grid small{color:#939dae;font-size:6px}

.oc-demo-final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.oc-final-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,13,.88),rgba(5,8,13,.28) 65%,rgba(5,8,13,.58)),linear-gradient(0deg,rgba(5,8,13,.6),transparent 50%)}.oc-final-copy{position:absolute;left:26px;top:52%;display:grid;gap:10px;transform:translateY(-50%)}.oc-final-copy>span{color:#89a4ff;font:800 7px ui-monospace,monospace;letter-spacing:.12em}.oc-final-copy>strong{font-size:clamp(22px,3vw,38px);line-height:1.02;letter-spacing:-.05em}.oc-final-copy>div{display:flex;gap:5px}.oc-final-copy b{padding:5px 6px;border:1px solid rgba(255,255,255,.18);border-radius:4px;font-size:6px}.oc-delivery-card{position:absolute;right:15px;bottom:14px;width:190px;display:grid;gap:5px;padding:11px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(8,12,18,.82);backdrop-filter:blur(13px)}.oc-delivery-card span{color:#79dba0;font-size:7px;font-weight:900}.oc-delivery-card strong{font-size:9px}.oc-delivery-card small{color:#8f9bad;font-size:6px}.oc-delivery-card i{height:3px;overflow:hidden;border-radius:99px;background:#334052}.oc-delivery-card i b{display:block;width:100%;height:100%;background:#74d99d}

.oc-demo-meeting { padding-top:35px; }.oc-meeting-backdrop{position:absolute;inset:35px 0 0;width:100%;height:calc(100% - 35px);object-fit:cover;opacity:.34;filter:saturate(.8) contrast(1.08)}.oc-meeting-backdrop.result{opacity:.16}.oc-demo-meeting .oc-demo-screen-bar,.oc-demo-meeting-result .oc-demo-screen-bar,.oc-demo-priority .oc-demo-screen-bar,.oc-demo-compare .oc-demo-screen-bar,.oc-demo-evidence .oc-demo-screen-bar,.oc-demo-idea .oc-demo-screen-bar,.oc-demo-blank .oc-demo-screen-bar{position:absolute;inset:0 0 auto}.oc-meeting-clock{position:absolute;left:14px;top:49px;width:39%;bottom:14px;display:grid;align-content:center;justify-items:center;gap:7px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(15,22,34,.88);box-shadow:inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(12px)}.oc-meeting-clock small{color:#8290a5;font-size:7px}.oc-meeting-clock strong{font:800 clamp(34px,5vw,64px) ui-monospace,monospace;letter-spacing:-.06em}.oc-meeting-clock span{font-size:9px;font-weight:800}.oc-meeting-clock>i{width:70%;height:4px;overflow:hidden;border-radius:99px;background:#303a4c}.oc-meeting-clock>i b{display:block;height:100%;background:#7898ff}.oc-agenda-list{position:absolute;left:43%;right:14px;top:49px;display:grid;gap:6px;margin:0;padding:0;list-style:none}.oc-agenda-list li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:#9aa5b7;background:rgba(15,22,34,.87);backdrop-filter:blur(10px)}.oc-agenda-list li.active{border-color:#728ce2;color:#fff;background:rgba(27,41,69,.94)}.oc-agenda-list li.done{opacity:.78}.oc-agenda-list b{font:800 7px ui-monospace,monospace}.oc-agenda-list span{font-size:8px;font-weight:800}.oc-agenda-list small{font-size:7px}.oc-meeting-focus{position:absolute;left:43%;right:14px;bottom:48px;display:grid;gap:4px;padding:10px;border-left:3px solid #7898ff;background:rgba(14,22,35,.9);backdrop-filter:blur(10px)}.oc-meeting-focus span{color:#8ea9ff;font-size:7px;font-weight:900}.oc-meeting-focus strong{font-size:9px}.oc-meeting-focus small{color:#8b96a8;font-size:6px}.oc-meeting-people{position:absolute;right:14px;bottom:14px;display:flex}.oc-meeting-people b{width:27px;height:27px;display:grid;place-items:center;margin-left:-4px;border:2px solid #0c1017;border-radius:8px;background:#33425d;font-size:6px}.oc-meeting-people b:nth-child(2){background:#5b443b}.oc-meeting-people b:nth-child(3){background:#34584d}

.oc-demo-meeting-result{padding-top:35px}.oc-meeting-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px}.oc-meeting-summary article{display:grid;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151c28}.oc-meeting-summary article span{font-size:7px;font-weight:900}.oc-meeting-summary .decision span{color:#79dca1}.oc-meeting-summary .hold span{color:#efba71}.oc-meeting-summary strong{font-size:10px}.oc-meeting-summary small{color:#818da0;font-size:7px}.oc-action-convert{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:9px;margin:0 12px;padding:11px;border:1px solid #51679f;border-radius:8px;background:#1b2740;font-size:8px}.oc-action-convert>span{color:#8ea9ff}.oc-action-convert>i{font-style:normal}.oc-action-convert>b{color:#aeb8c7}.oc-meeting-calendar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:10px 12px}.oc-meeting-calendar>span{min-height:76px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:7px;color:#778397;background:#141b26;font-size:7px}.oc-meeting-calendar .marked{border-color:#5676cf;color:#fff;background:#1b2743}.oc-meeting-calendar .amber{border-color:#9c7145;background:#342719}.oc-meeting-calendar small{display:block;margin-top:22px;font-size:7px}

.oc-demo-evidence,.oc-demo-priority,.oc-demo-compare,.oc-demo-idea,.oc-demo-blank{padding-top:35px}.oc-evidence-quotes{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px}.oc-evidence-quotes article{display:grid;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151c28}.oc-evidence-quotes b{font-size:11px;line-height:1.35}.oc-evidence-quotes small{color:#7b8799;font-size:7px}.oc-evidence-bars{display:grid;gap:8px;padding:0 12px}.oc-evidence-bars span{display:grid;grid-template-columns:140px 1fr 18px;align-items:center;gap:8px;color:#9da7b7;font-size:7px}.oc-evidence-bars i{height:5px;border-radius:99px;background:linear-gradient(90deg,#5578ef var(--w,0),#2c3546 var(--w,0))}.oc-evidence-bars span:nth-child(1) i{--w:86%}.oc-evidence-bars span:nth-child(2) i{--w:72%}.oc-evidence-bars span:nth-child(3) i{--w:58%}.oc-evidence-bars b{color:#fff}.oc-cause-map{display:flex;align-items:center;gap:8px;margin:13px 12px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#141b26;font-size:7px}.oc-cause-map span,.oc-cause-map strong,.oc-cause-map b{padding:7px;border-radius:5px;background:#202b3d}.oc-cause-map strong{background:#283a61}.oc-cause-map b{background:#193a2b}.oc-cause-map i{flex:1;height:1px;background:#46536a}
.oc-priority-axis{position:absolute;left:26px;right:26px;top:62px;bottom:66px;border-left:1px solid #526078;border-bottom:1px solid #526078;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:25% 25%}.oc-priority-axis>span{position:absolute;color:#667388;font-size:7px}.oc-priority-axis>span:first-child{left:-9px;top:-14px}.oc-priority-axis>span:nth-child(2){right:0;bottom:-15px}.oc-priority-axis i{position:absolute;display:grid;gap:3px;padding:8px 10px;border:1px solid #4d608a;border-radius:8px;background:#1c2943;font-style:normal}.oc-priority-axis i b{font-size:8px}.oc-priority-axis i small{color:#90a0b7;font-size:6px}.oc-priority-axis .p1{left:62%;top:16%;border-color:#7898ff;background:#293c70}.oc-priority-axis .p2{left:45%;top:38%}.oc-priority-axis .p3{left:23%;top:56%;border-color:#816446;background:#30251a}.oc-priority-axis .p4{left:7%;top:22%;opacity:.65}.oc-priority-note{position:absolute;left:26px;right:26px;bottom:14px;display:flex;gap:12px;padding:10px;border-left:3px solid #7898ff;background:#151d2a}.oc-priority-note span{color:#8da8ff;font-size:7px;font-weight:900}.oc-priority-note strong{font-size:8px}
.oc-compare-panels{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:11px}.oc-compare-panels article{position:relative;min-height:210px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151c28}.oc-compare-panels span{color:#79869a;font:800 7px ui-monospace,monospace}.oc-compare-panels b{font-size:9px}.oc-empty-wire,.oc-filled-wire{display:grid;gap:6px;align-content:center;padding:14px;border-radius:6px;background:#0e131c}.oc-empty-wire i{height:8px;border-radius:3px;background:#283142}.oc-filled-wire{grid-template-columns:1fr 1fr}.oc-filled-wire i{min-height:47px;border-radius:5px;background:linear-gradient(145deg,#263652,#192333)}.oc-filled-wire i:first-child{grid-column:1/-1;min-height:65px;background:linear-gradient(145deg,#385a9d,#1d2c4a)}.oc-compare-metric{display:grid;grid-template-columns:auto 1fr 180px;align-items:center;gap:8px;margin:0 11px;padding:9px 11px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151c28}.oc-compare-metric strong{color:#7bdba0;font:800 19px ui-monospace,monospace}.oc-compare-metric span{color:#a1acba;font-size:8px}.oc-compare-metric svg{width:100%;height:38px}.oc-compare-metric path{fill:none;stroke:#7898ff;stroke-width:3}

.oc-demo-idea svg{position:absolute;left:8px;right:8px;top:42px;width:calc(100% - 16px);height:calc(100% - 86px)}.oc-demo-idea svg>path{fill:none;stroke:#445471;stroke-width:2}.oc-demo-idea .node rect{fill:#172131;stroke:#405170;stroke-width:2}.oc-demo-idea .node.core rect{fill:#293c71;stroke:#7898ff}.oc-demo-idea .node text{fill:#c9d1dc;text-anchor:middle;font:700 11px Arial}.oc-demo-idea .node text+text{fill:#7f8da3;font-size:8px}.oc-idea-action{position:absolute;left:14px;right:14px;bottom:11px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border-left:3px solid #7898ff;background:rgba(20,28,40,.92)}.oc-idea-action span{color:#8ea9ff;font-size:7px;font-weight:900}.oc-idea-action strong{font-size:8px}.oc-idea-action b{color:#8491a4;font-size:7px}
.oc-blank-question{display:grid;justify-items:center;gap:6px;padding:28px 12px 15px}.oc-blank-question small{color:#8591a4;font-size:8px}.oc-blank-question strong{font-size:18px;letter-spacing:-.035em}.oc-blank-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}.oc-blank-actions article{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#151c28}.oc-blank-actions b{grid-row:1/3;width:31px;height:31px;display:grid;place-items:center;border-radius:8px;color:#8fa9ff;background:#21325a}.oc-blank-actions span{font-size:9px;font-weight:800}.oc-blank-actions small{color:#7c889b;font-size:7px}

/* Premium purpose visuals use original OneCanvas assets and keep controls above the demo narration. */
.oc-purpose-visual-improvement,.oc-purpose-visual-idea{display:block;padding:0;background:#101722}.oc-purpose-visual-improvement img,.oc-purpose-visual-idea img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.68)}.oc-purpose-visual-improvement::after,.oc-purpose-visual-idea::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,18,.05),rgba(8,12,18,.82))}.oc-purpose-visual-improvement i{position:absolute;z-index:1;left:8px;bottom:8px;height:auto;color:#fff;font:800 7px ui-monospace,monospace;background:none}.oc-purpose-visual-improvement b{z-index:1}.oc-purpose-visual-idea>i{display:none}.oc-purpose-visual-idea b{left:auto;right:8px;top:auto;bottom:8px;transform:none;background:#5578ef}.oc-purpose-visual-idea::before{z-index:1;left:10px;right:auto;top:10px;width:6px;height:6px;border-radius:50%;background:#b6ef76;box-shadow:0 0 0 4px rgba(182,239,118,.18);transform:none}
.oc-premium-backdrop{position:absolute;inset:35px 0 0;width:100%;height:calc(100% - 35px);object-fit:cover;filter:saturate(.64) brightness(.48) contrast(1.08)}.oc-demo-screen-bar{position:relative;z-index:8;background:rgba(10,14,21,.9);backdrop-filter:blur(12px)}
.oc-demo-research-premium::after,.oc-demo-priority-premium::after,.oc-demo-compare-premium::after,.oc-demo-idea-premium::after{content:"";position:absolute;z-index:1;inset:35px 0 0;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,18,.84),rgba(8,12,18,.14) 52%,rgba(8,12,18,.74)),linear-gradient(0deg,rgba(8,12,18,.7),transparent 58%)}
.oc-research-title{position:absolute;z-index:2;left:18px;top:58px;display:grid;gap:5px}.oc-research-title span,.oc-idea-heading span{color:#ff9382;font:800 6px ui-monospace,monospace;letter-spacing:.14em}.oc-research-title strong{font-size:clamp(18px,2.4vw,31px);line-height:1.02;letter-spacing:-.05em}.oc-evidence-switch{position:absolute;z-index:3;right:14px;top:52px;width:38%;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.oc-evidence-switch button{display:grid;gap:3px;padding:7px;border:1px solid rgba(255,255,255,.13);border-radius:6px;color:#8f9aab;background:rgba(16,23,34,.86);font-size:6px;font-weight:800;cursor:pointer}.oc-evidence-switch button[aria-pressed="true"]{border-color:#ff7d6b;color:#fff;background:rgba(65,34,31,.94)}.oc-evidence-switch b{color:#ff9b8d;font:900 11px ui-monospace,monospace}.oc-research-quote{position:absolute;z-index:3;left:18px;right:40%;bottom:92px;display:grid;gap:5px;padding:11px;border-left:3px solid #ff7d6b;background:rgba(12,18,27,.9);backdrop-filter:blur(12px)}.oc-research-quote span{color:#ff9b8d;font:800 6px ui-monospace,monospace}.oc-research-quote strong{font-size:11px;line-height:1.38}.oc-research-quote small{color:#9ba5b4;font-size:6px}.oc-research-route{position:absolute;z-index:3;left:18px;right:18px;bottom:58px;display:flex;align-items:center;gap:6px;color:#a9b2c0;font-size:6px}.oc-research-route span,.oc-research-route strong,.oc-research-route b{padding:6px 7px;border:1px solid rgba(255,255,255,.09);border-radius:5px;background:rgba(18,26,38,.94)}.oc-research-route strong{color:#fff;border-color:#a65349}.oc-research-route b{color:#baf184;border-color:#55743b}.oc-research-route i{flex:1;height:1px;background:#536079}
.oc-demo-priority-premium .oc-premium-backdrop{opacity:.38}.oc-demo-priority-premium .oc-priority-axis{z-index:2;border-radius:8px;background-color:rgba(13,19,29,.88);backdrop-filter:blur(10px)}.oc-demo-priority-premium .oc-priority-note{z-index:3;right:16px;left:16px;bottom:58px;align-items:center;background:rgba(14,21,31,.94)}.oc-demo-priority-premium .oc-priority-note b{margin-left:auto;color:#b6ef76;font-size:7px}.oc-demo-priority-premium .oc-priority-axis{bottom:103px}
.oc-demo-compare-premium .oc-premium-backdrop{opacity:.43}.oc-compare-switch{position:absolute;z-index:3;right:14px;top:49px;display:flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(12,18,27,.9)}.oc-compare-switch button{padding:6px 10px;border:0;border-radius:5px;color:#8793a5;background:transparent;font-size:7px;font-weight:900;cursor:pointer}.oc-compare-switch button[aria-pressed="true"]{color:#16200f;background:#b6ef76}.oc-compare-focus{position:absolute;z-index:2;left:16px;top:54px;bottom:112px;width:47%;display:grid;align-content:center;gap:7px;padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(12,18,27,.9);backdrop-filter:blur(12px)}.oc-compare-focus>span{color:#b6ef76;font:800 6px ui-monospace,monospace}.oc-compare-focus>strong{white-space:pre-line;font-size:clamp(16px,2.2vw,28px);line-height:1.02;letter-spacing:-.05em}.oc-compare-focus>.oc-empty-wire,.oc-compare-focus>.oc-filled-wire{min-height:74px;padding:8px}.oc-demo-compare-premium .oc-compare-metric{position:absolute;z-index:3;left:16px;right:16px;bottom:59px;grid-template-columns:auto 1fr auto 170px;margin:0;background:rgba(16,23,34,.94)}.oc-demo-compare-premium .oc-compare-metric>b{padding:5px 7px;border-radius:5px;color:#b6ef76;background:#223019;font-size:7px}
.oc-demo-idea-premium .oc-premium-backdrop{opacity:.58;filter:saturate(.45) brightness(.48)}.oc-demo-idea-premium::after{background:linear-gradient(90deg,rgba(7,10,15,.86),rgba(7,10,15,.08) 54%,rgba(7,10,15,.82)),linear-gradient(0deg,rgba(7,10,15,.7),transparent 68%)}.oc-idea-heading{position:absolute;z-index:3;left:17px;top:54px;display:grid;gap:4px}.oc-idea-heading span{color:#91aaff}.oc-idea-heading strong{font-size:clamp(18px,2.4vw,30px);line-height:1;letter-spacing:-.05em}.oc-demo-idea-premium svg{z-index:2;left:20%;top:48px;width:58%;height:calc(100% - 112px);opacity:.83}.oc-demo-idea-premium .node rect{fill:rgba(16,24,36,.86)}.oc-demo-idea-premium .node.core rect{fill:#2a3d72}.oc-idea-candidates{position:absolute;z-index:4;right:13px;top:52px;width:26%;display:grid;gap:5px}.oc-idea-candidates button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;padding:7px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#8f99aa;text-align:left;background:rgba(14,21,31,.88);cursor:pointer}.oc-idea-candidates button[aria-pressed="true"]{border-color:#8aa7ff;color:#fff;background:rgba(31,46,79,.95)}.oc-idea-candidates span{font:800 5px ui-monospace,monospace}.oc-idea-candidates b{font-size:6px}.oc-idea-candidates small{color:#b6ef76;font:900 7px ui-monospace,monospace}.oc-demo-idea-premium .oc-idea-action{z-index:4;bottom:58px;grid-template-columns:auto auto 1fr auto;background:rgba(12,18,27,.94);backdrop-filter:blur(10px)}.oc-demo-idea-premium .oc-idea-action small{color:#a7b1bf;font-size:6px}.oc-demo-idea-premium .oc-idea-action b{color:#b6ef76}

@keyframes oc-chart-rise { from { transform: scaleY(.08); opacity: .25; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 1120px) {
  .oc-onboarding-dialog { width: calc(100% - 14px); }
  .oc-onboarding-intro { grid-template-columns: minmax(330px,.8fr) minmax(520px,1.2fr); padding: 38px; }
  .oc-intro-product { min-height: 530px; }
  .oc-preview-layout { grid-template-columns: 145px minmax(0,1fr) 226px; }
  .oc-scene-rail button { padding-inline: 6px; }
}

@media (max-width: 900px) {
  .oc-onboarding-intro { grid-template-columns: 1fr; }
  .oc-intro-product { min-height: 520px; }
  .oc-preview-layout { grid-template-columns: 134px minmax(0,1fr); }
  .oc-preview-summary { grid-column:1/-1; }
}

@media (max-width: 700px) {
  .oc-onboarding-dialog { width:100%;height:100dvh;border-radius:0; }
  .oc-onboarding-intro { display:block;padding:28px 20px 36px; }
  .oc-onboarding-intro-copy h1 { font-size:36px; }
  .oc-intro-proof { display:none; }
  .oc-intro-product { min-height:420px;margin-top:28px;padding:11px; }
  .oc-intro-product-grid { grid-template-columns:1fr; }
  .oc-intro-hero { height:220px; }
  .oc-intro-pulse { display:none; }
  .oc-intro-timeline li { grid-template-columns:1fr; }.oc-intro-timeline li>span{grid-row:auto;width:100%;height:38px}.oc-intro-timeline li b,.oc-intro-timeline li small{display:none}
  .oc-onboarding-purpose { padding:26px 16px 32px; }
  .oc-purpose-list { grid-template-columns:1fr; }
  .oc-purpose-video,.oc-purpose-blank { grid-column:auto; }
  .oc-purpose-row,.oc-purpose-video,.oc-purpose-blank { min-height:84px;grid-template-columns:24px 84px minmax(0,1fr) 18px;padding:8px; }
  .oc-purpose-row:hover,.oc-purpose-row:focus-visible{padding-inline:8px}.oc-purpose-visual,.oc-purpose-video .oc-purpose-visual,.oc-purpose-blank .oc-purpose-visual{height:66px}.oc-purpose-copy strong{font-size:13px}.oc-purpose-copy small{font-size:9px}
  .oc-onboarding-preview { padding:17px 10px 20px; }
  .oc-onboarding-preview-head h1 { font-size:24px; }
  .oc-preview-stage { min-height:390px; }
  .oc-preview-canvas { min-height:300px; }
  .oc-scene-action { left:8px;right:8px;bottom:8px; }.oc-scene-action strong{padding-right:0;font-size:8px}.oc-example-cursor{display:none}
  .oc-overview-board { grid-template-columns:1fr; }.oc-overview-board article:nth-child(n+3){display:none}.oc-demo-overview{grid-template-columns:1.3fr .7fr}
  .oc-image-viewer { grid-template-columns:1fr 82px; }.oc-shot-thumb{grid-template-columns:1fr}.oc-shot-image{width:100%}.oc-shot-thumb small{display:none}
  .oc-gantt>div{grid-template-columns:82px repeat(12,1fr) 27px}.oc-gantt-axis{margin-left:92px}.oc-gantt b{font-size:6px}
  .oc-demo-approval { grid-template-columns:1fr; }.oc-approval-feed{display:none}.oc-approval-state{grid-column:1}
  .oc-report-grid article:nth-child(3){display:none}.oc-report-grid{grid-template-columns:repeat(3,1fr)}
  .oc-meeting-clock{width:43%}.oc-agenda-list,.oc-meeting-focus{left:46%}.oc-meeting-summary{grid-template-columns:1fr}.oc-meeting-summary article+article{display:none}.oc-meeting-calendar{grid-template-columns:repeat(5,1fr)}
  .oc-evidence-quotes article+article{display:none}.oc-evidence-quotes{grid-template-columns:1fr}.oc-cause-map{display:none}.oc-compare-metric{grid-template-columns:auto 1fr}.oc-compare-metric svg{display:none}
  .oc-preview-summary { margin-top:8px;padding:12px; }
  .oc-preview-summary>span,.oc-preview-summary>p,.oc-preview-summary ol,.oc-workspace-scope{display:none}.oc-preview-summary .oc-button{min-height:42px}
}

@media (prefers-reduced-motion: reduce) {
  .oc-pulse-chart i { animation:none; }
  .oc-intro-product::before { display:none; }
}