:root { color-scheme: light; background: rgb(245, 242, 234); --paper: #f5f2ea; --surface: #fffdf8; --ink: #0b1117; --amber: #f2a623; }
*, ::before, ::after { box-sizing: border-box; }
html { min-width: 320px; }
html, body { margin: 0px; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: Inter, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.stage-shell { position: relative; isolation: isolate; display: flex; width: 100%; min-height: 100svh; padding: 94px 24px 58px; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; background: var(--paper); }
.stage-shell::after { position: absolute; inset: 0px; z-index: -1; content: ""; background-image: radial-gradient(rgb(163, 154, 141) 0.45px, transparent 0.45px); background-size: 7px 7px; opacity: 0.09; pointer-events: none; }
.home-stage { justify-content: flex-start; padding-inline: clamp(24px, 4.5vw, 72px); }
.site-header { position: absolute; z-index: 5; top: 33px; left: clamp(24px, 4.5vw, 72px); right: clamp(24px, 4.5vw, 72px); display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 20px; }
.site-brand { --oa-wordmark-width: 262px; display: inline-flex; height: auto; align-items: flex-start; gap: calc(var(--oa-wordmark-width) * .0165379); text-decoration: none; }
.site-brand picture { display: block; flex: 0 0 auto; margin-top: calc(var(--oa-wordmark-width) * .0016089); }
.site-mark { display: block; width: calc(var(--oa-wordmark-width) * .1837541); height: auto; }
.site-wordmark { display: block; width: var(--oa-wordmark-width); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 36px); }
.site-nav a { display: inline-flex; min-height: 44px; padding: 0 12px; border-radius: 10px; align-items: center; color: var(--ink); font-size: 13px; font-weight: 620; text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: rgb(11 17 23 / 7%); }
.site-nav a:focus-visible, .site-brand:focus-visible { outline: 2px solid #bd6109; outline-offset: 4px; }
.experience-stack { position: relative; z-index: 2; display: flex; width: min(860px, 100%); align-items: center; flex-direction: column; }
.home-stage .experience-stack { display: grid; width: 100%; min-height: calc(-152px + 100svh); grid-template-rows: minmax(min-content, 1fr) auto; justify-items: center; align-items: initial; }
.orb-field { position: relative; width: min(31vh, 360px, 64vw); aspect-ratio: 1 / 1; flex: 0 0 auto; }
.home-stage .orb-field { align-self: center; }
.object-shadow { position: absolute; z-index: 1; top: 86%; left: 50%; width: 53%; height: 8%; border-radius: 50%; background: rgba(83, 63, 34, 0.18); filter: blur(25px); transform: translate(-50%, -50%); pointer-events: none; }
#stage { position: absolute; z-index: 2; inset: 0px; display: block; width: 100%; height: 100%; cursor: default; opacity: 0; visibility: hidden; outline: none; touch-action: none; }
#stage.is-interactive { cursor: grab; }
#stage.is-dragging { cursor: grabbing; }
#stage:focus-visible { outline: rgb(169, 78, 8) solid 2px; outline-offset: -4px; }
.poster { position: absolute; z-index: 1; top: 50%; left: 50%; width: 90%; height: auto; filter: drop-shadow(rgba(84, 56, 20, 0.17) 0px 25px 38px); opacity: 0; visibility: hidden; transform: translate(-50%, -50%); }
.model-loading { position: absolute; z-index: 3; inset: 0px; display: grid; place-items: center; color: rgb(11, 17, 23); pointer-events: none; }
.model-loading svg { display: block; width: 28px; height: 28px; animation: 0.9s linear 0s infinite normal none running modelSpin; }
@keyframes modelSpin {
  100% { transform: rotate(360deg); }
}
html[data-model-state="ready"] #stage { opacity: 1; visibility: visible; }
html[data-model-state="fallback"] .poster, html[data-model-state="reduced"] .poster { opacity: 1; visibility: visible; }
html[data-model-state="ready"] .model-loading, html[data-model-state="fallback"] .model-loading, html[data-model-state="reduced"] .model-loading { display: none; }
.composer-section { position: relative; z-index: 5; width: 100%; }
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.composer-beam { position: relative; width: 100%; border-radius: 22px; }
.composer-beam::after { position: absolute; inset: 0px; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--beam-angle), transparent 0deg 190deg, rgb(169 78 8 / 9%) 218deg, #d77b0d 253deg, #f2a623 282deg, #ffc96f 304deg, transparent 338deg); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box exclude, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); content: ""; pointer-events: none; animation: 8s linear 0s infinite normal none running beamTravel; }
@keyframes beamTravel {
  100% { --beam-angle: 360deg; }
}
.composer-card { position: relative; width: 100%; padding: 24px; overflow: visible; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 22px; background: var(--surface); box-shadow: rgba(11, 17, 23, 0.1) 0px 20px 48px; backdrop-filter: blur(22px); }
.composer-card:focus-within { border-color: rgba(161, 110, 57, 0.55); }
.composer-section.is-picker-open { z-index: 12; }
.composer-section.is-picker-open .composer-card { backdrop-filter: none; }
#work-request { display: block; width: 100%; min-height: 100px; max-height: 200px; margin: 0px 0px 13px; padding: 0px; resize: none; border: 0px; outline: 0px; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5; }
#work-request::placeholder { color: rgb(89, 99, 107); opacity: 1; }
.composer-bottom { display: flex; min-height: 48px; align-items: center; gap: 12px; }
.workflow-picker, .utility-picker { position: relative; display: block; }
.workflow-picker { min-width: 0px; flex: 1 1 0%; }
.attach-button { position: relative; display: grid; width: 48px; height: 48px; flex: 0 0 auto; padding: 0px; place-items: center; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 50%; background: var(--surface); color: rgb(11, 17, 23); }
.attach-button svg { width: 22px; height: 22px; }
.attach-button:hover { background: rgb(255, 255, 255); }
.attach-button.has-preview { border-radius: 12px; }
.attach-button.has-preview img { display: block; width: 100%; height: 100%; border-radius: 11px; object-fit: cover; object-position: 20% 50%; }
.attach-more { position: absolute; right: -4px; bottom: -4px; display: grid; width: 19px; height: 19px; place-items: center; border: 2px solid rgb(255, 253, 248); border-radius: 50%; background: rgb(11, 17, 23); color: rgb(255, 253, 248); }
.attach-more svg { width: 11px; height: 11px; }
.workflow-trigger, .utility-trigger { appearance: none; width: 100%; height: 48px; padding: 0px 44px 0px 16px; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 24px; background: var(--surface); color: rgb(11, 17, 23); font-size: 14px; font-weight: 630; cursor: pointer; }
.workflow-trigger { position: relative; display: flex; align-items: center; text-align: left; }
.workflow-trigger > span:first-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-chevron { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; color: rgb(11, 17, 23); pointer-events: none; transform: translateY(-50%); }
.workflow-panel { position: absolute; z-index: 20; bottom: calc(100% + 12px); left: 0px; width: min(520px, -32px + 100vw); max-height: min(360px, 100dvh - 48px); padding: 12px; overflow-y: auto; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 16px; background: rgb(255, 253, 248); box-shadow: rgba(11, 17, 23, 0.16) 0px 28px 80px; }
.workflow-panel-header { position: sticky; z-index: 1; top: -12px; padding: 0px 0px 8px; background: rgb(255, 253, 248); }
.workflow-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workflow-panel-head strong { padding-left: 4px; color: rgb(11, 17, 23); font-size: 14px; font-weight: 650; }
.workflow-panel-close { display: grid; width: 44px; height: 44px; flex: 0 0 auto; padding: 0px; place-items: center; border: 0px; border-radius: 50%; background: transparent; color: rgb(89, 99, 107); font-size: 26px; font-weight: 300; }
.workflow-panel-close:hover { background: rgb(245, 242, 234); }
.workflow-search { display: grid; gap: 8px; padding: 0px 4px; color: rgb(89, 99, 107); font-size: 12px; font-weight: 650; }
.workflow-search input { width: 100%; height: 48px; padding: 0px 16px; border: 1px solid rgba(11, 17, 23, 0.22); border-radius: 12px; outline: 0px; background: rgb(255, 253, 248); color: rgb(11, 17, 23); font-size: 14px; }
.workflow-search input::placeholder { color: rgb(114, 123, 130); }
.workflow-search input:focus-visible { outline: rgb(189, 97, 9) solid 2px; outline-offset: 3px; }
.workflow-panel-groups { display: grid; margin-top: 8px; gap: 4px; }
.workflow-group { min-width: 0px; }
.workflow-group-label { padding: 12px 16px 4px; color: rgb(89, 99, 107); font-size: 12px; font-weight: 700; line-height: 1.3; }
.workflow-option { display: flex; width: 100%; min-height: 44px; padding: 8px 16px; align-items: center; justify-content: space-between; gap: 8px; border: 0px; border-radius: 10px; background: transparent; color: rgb(11, 17, 23); font-size: 14px; line-height: 1.35; text-align: left; }
.workflow-option:hover { background: rgb(245, 242, 234); }
.workflow-option.is-selected { background: rgb(255, 240, 206); }
.workflow-option.is-active:not(.is-selected), .workflow-create.is-active { background: rgb(245, 242, 234); }
.workflow-option-check { color: rgb(169, 78, 8); font-size: 16px; }
.workflow-empty { margin: 0px; color: rgb(89, 99, 107); font-size: 14px; }
.workflow-create { display: flex; width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 16px; align-items: center; justify-content: space-between; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgba(11, 17, 23, 0.1) currentcolor currentcolor; border-image: none; border-radius: 10px; background: transparent; color: rgb(11, 17, 23); font-size: 14px; font-weight: 650; text-align: left; }
.workflow-create:hover { color: rgb(169, 78, 8); }
.utility-trigger { position: relative; display: flex; align-items: center; text-align: left; white-space: nowrap; }
.utility-trigger:hover, .workflow-trigger:hover { background: var(--surface); border-color: rgba(11, 17, 23, 0.22); }
.channel-picker { width: 158px; flex: 0 0 auto; }
.mode-picker { width: 146px; flex: 0 0 auto; }
.utility-panel { position: absolute; z-index: 20; right: 0px; bottom: calc(100% + 12px); padding: 20px; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 16px; background: var(--surface); box-shadow: rgba(11, 17, 23, 0.16) 0px 28px 80px; color: var(--ink); }
.channel-panel { width: 350px; }
.utility-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.utility-panel strong { font-size: 15px; font-weight: 680; }
.utility-description { margin: 10px 0px 18px; color: rgb(79, 89, 96); font-size: 13px; line-height: 1.5; }
.channel-group + .channel-group { margin-top: 16px; }
.channel-group-name { margin: 0px 0px 8px; color: rgb(89, 99, 107); font-size: 11px; font-weight: 680; }
.channel-list { margin: 0px; color: var(--ink); font-size: 13px; line-height: 1.6; }
.channel-access { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(11, 17, 23, 0.1); }
.channel-access strong { color: var(--ink); font-size: 11px; font-weight: 680; }
.channel-access p { margin: 5px 0px 0px; color: rgb(89, 99, 107); font-size: 12px; line-height: 1.45; }
.mode-panel { width: 300px; }
.mode-panel > strong { display: block; margin-bottom: 11px; }
.mode-option { display: flex; width: 100%; min-height: 65px; padding: 11px 12px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; }
.mode-option + .mode-option { margin-top: 5px; }
.mode-option:hover { background: var(--paper); }
.mode-option.is-selected { border-color: rgba(242, 166, 35, 0.6); background: rgb(255, 240, 206); }
.mode-option span:first-child { display: grid; gap: 3px; }
.mode-option b { font-size: 13px; font-weight: 660; }
.mode-option small { color: rgb(89, 99, 107); font-size: 11px; font-weight: 450; line-height: 1.35; }
.mode-option > span:last-child:not(:first-child) { color: rgb(169, 78, 8); }
.custom-workflow { display: grid; gap: 6px; margin: 0px 0px 14px; color: rgb(89, 99, 107); font-size: 11px; font-weight: 620; }
.custom-workflow input { width: 100%; height: 40px; padding: 0px 11px; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 9px; outline: 0px; background: var(--surface); color: var(--ink); font-size: 12px; }
.custom-workflow input::placeholder { color: rgb(133, 139, 132); }
.attachment-list { display: flex; margin: 0px 0px 13px; flex-wrap: wrap; gap: 7px; }
.attachment-chip { display: inline-flex; max-width: 100%; height: 34px; padding: 4px; align-items: center; gap: 7px; border: 1px solid rgba(84, 88, 82, 0.14); border-radius: 9px; background: rgba(255, 255, 255, 0.66); color: rgb(82, 91, 84); font-size: 11px; }
.attachment-chip img { width: 26px; height: 24px; border-radius: 5px; object-fit: cover; }
.attachment-chip span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { width: 23px; height: 23px; padding: 0px; border: 0px; border-radius: 50%; background: transparent; color: rgb(101, 109, 101); font-size: 17px; line-height: 1; }
.attachment-chip button:hover { background: rgba(77, 79, 73, 0.1); }
.attachment-error { margin: 0px 0px 10px; color: rgb(152, 81, 42); font-size: 11px; }
.send-button { display: grid; width: 48px; height: 48px; flex: 0 0 auto; padding: 0px; place-items: center; border: 0px; border-radius: 50%; background: rgb(11, 17, 23); color: rgb(255, 253, 247); box-shadow: rgba(45, 55, 49, 0.14) 0px 4px 12px; }
.send-button svg { width: 20px; height: 20px; }
.send-button:hover:not(:disabled) { background: rgb(27, 37, 46); }
.send-button:disabled { background: rgba(60, 68, 62, 0.18); color: rgb(126, 135, 126); box-shadow: none; cursor: default; }
.destination-actions { display: grid; width: 100%; margin: 0px 0px 16px; grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: stretch; gap: 16px; }
.destination-button { display: flex; width: 100%; min-width: 0px; min-height: 89px; padding: 0px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid transparent; border-radius: 14px; text-decoration: none; transition: background 180ms, transform 180ms, border-color 180ms; }
.destination-button:hover { transform: translateY(-2px); }
.product-lockup { display: inline-flex; width: 100%; height: 100%; padding: 20px; align-items: flex-start; justify-content: center; flex-direction: column; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 16px; background: var(--surface); }
.product-lockup-name { display: block; color: var(--ink); font-family: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.4rem; font-weight: 660; letter-spacing: -0.035em; line-height: 1.1; }
.product-lockup-byline { display: flex; margin-top: 4px; align-items: center; gap: 8px; color: rgb(89, 99, 107); font-size: 0.72rem; font-weight: 450; line-height: 1.2; }
.product-lockup-byline picture, .product-lockup-byline img { display: block; width: 18px; height: 18px; }
.destination-name { font-size: clamp(15px, 1.8vw, 18px); font-weight: 680; letter-spacing: -0.035em; line-height: 1.15; }
.destination-arrow { flex: 0 0 auto; font-size: 21px; font-weight: 450; line-height: 1; }
.destination-button.is-primary { padding: 0px 18px; background: var(--amber); color: var(--ink); }
.destination-button.is-primary:hover { background: rgb(255, 182, 66); }
.destination-button.is-secondary { color: var(--ink); }
.destination-button.is-secondary:hover .product-lockup { border-color: rgba(11, 17, 23, 0.22); }
.send-button:focus-visible, .attach-button:focus-visible, .workflow-trigger:focus-visible, .workflow-panel-close:focus-visible, .workflow-option:focus-visible, .workflow-create:focus-visible, .utility-trigger:focus-visible, .mode-option:focus-visible, .custom-workflow input:focus-visible, .attachment-chip button:focus-visible, .destination-button:focus-visible { outline: rgb(189, 97, 9) solid 2px; outline-offset: 3px; }
.login-home-link { text-decoration: none; }
.login-layout { width: min(460px, 100%); margin: 46px auto 0px; }
.login-card { padding: clamp(26px, 4vw, 40px); border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 24px; background: rgba(255, 253, 248, 0.94); box-shadow: rgba(54, 48, 38, 0.1) 0px 24px 70px; }
.login-card h1 { margin: 32px 0px; color: rgb(11, 17, 23); font-size: clamp(36px, 4vw, 46px); font-weight: 680; letter-spacing: -0.055em; line-height: 1.1; }
.login-form { display: grid; gap: 9px; }
.login-form label { color: var(--ink); font-size: 13px; font-weight: 630; }
.login-form input { width: 100%; height: 48px; margin-bottom: 10px; padding: 0px 16px; border: 1px solid rgba(11, 17, 23, 0.1); border-radius: 12px; background: var(--surface); color: rgb(89, 99, 107); font-size: 14px; opacity: 1; }
.login-form input::placeholder { color: rgb(139, 145, 141); opacity: 1; }
.login-form button { width: 100%; height: 48px; margin-top: 5px; border: 0px; border-radius: 12px; background: var(--amber); color: var(--ink); font-size: 14px; font-weight: 680; cursor: not-allowed; opacity: 0.45; }
.login-home-link:focus-visible { outline: rgb(189, 97, 9) solid 2px; outline-offset: 4px; }
@media (max-height: 760px) and (min-width: 681px) {
  .stage-shell { padding-top: 72px; padding-bottom: 42px; }
  .home-stage .experience-stack { min-height: calc(-114px + 100svh); }
  .orb-field { width: min(27vh, 300px); }
}
@media (max-width: 680px) {
  .stage-shell { min-height: 100svh; padding: 77px 17px 36px; justify-content: flex-start; overflow: visible; }
  .home-stage { padding-inline: 20px; }
  .home-stage .experience-stack { min-height: calc(-113px + 100svh); }
  .site-header { top: 21px; left: 20px; right: 20px; align-items: center; gap: 8px; }
  .site-brand { --oa-wordmark-width: 142px; }
  .site-nav { gap: 13px; }
  .site-nav a { font-size: 11px; }
  .orb-field { width: min(45vw, 195px); }
  .composer-beam, .composer-card { border-radius: 19px; }
  .composer-card { padding: 16px; }
  #work-request { min-height: 91px; margin: 0px 0px 12px; font-size: 15px; }
  .composer-bottom { display: grid; grid-template-columns: 48px minmax(0px, 1fr) minmax(0px, 1fr) 48px; grid-template-areas: "attach workflow workflow send" "connect connect mode mode"; gap: 8px; }
  .composer-bottom:not(.has-connection) { grid-template-areas: "attach workflow workflow send" "mode mode mode mode"; }
  .attach-button { grid-area: attach; }
  .workflow-picker { grid-area: workflow; }
  .workflow-panel { position: fixed; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(74dvh, 600px); padding: 16px; border-radius: 20px; }
  .composer-section.is-picker-open::before { position: fixed; z-index: 9; inset: 0px; background: rgba(11, 17, 23, 0.18); content: ""; }
  .channel-picker { grid-area: connect; width: 100%; }
  .mode-picker { grid-area: mode; width: 100%; }
  .utility-panel { position: fixed; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(74dvh, 600px); overflow-y: auto; padding: 20px; border-radius: 20px; }
  .send-button { grid-area: send; }
  .connection-row span { gap: 6px; }
  .destination-actions { grid-template-columns: 1fr; gap: 10px; }
  .destination-name { font-size: 18px; }
  .login-stage { padding-top: 88px; }
  .login-layout { margin-top: 66px; }
  .login-card { padding: 26px 22px; }
  .login-card h1 { margin-top: 34px; }
}
@media (max-width: 380px) {
  .composer-bottom.has-connection { grid-template-areas: "attach workflow workflow send" "connect connect connect connect" "mode mode mode mode"; }
}
@media (prefers-reduced-motion: reduce) {
  .composer-beam::after { display: none; }
  #stage, .poster, .destination-button { transition: none; }
  #stage { opacity: 0 !important; visibility: hidden !important; }
  .poster { opacity: 1 !important; visibility: visible !important; }
  .model-loading svg { animation: auto ease 0s 1 normal none running none; }
  .orb-field .model-loading { display: none !important; }
}