/* The Orb page (v4). Shared pieces are in product.css; these are Orb's own vignettes. */

/* hero: a dark desktop with the live Orb */
.odesk { aspect-ratio: 640 / 470; display: flex; flex-direction: column; }
.odesk__body { position: relative; flex: 1; overflow: hidden; }
.odesk__wall { position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 85% 25%, rgba(48, 98, 220, .5) 0, transparent 60%),
    radial-gradient(60% 70% at 10% 100%, rgba(10, 40, 110, .65) 0, transparent 60%),
    linear-gradient(160deg, #0B1634 0%, #06102A 55%, #040814 100%); }
.odesk__chat { position: absolute; left: 7%; top: 10%; display: grid; gap: 10px; justify-items: start; max-width: 62%; }
.odesk__chat .vbubble--me { justify-self: start; }
.odesk__listen { position: absolute; left: 7%; bottom: 13%; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 12px; border-radius: 12px; background: rgba(10, 13, 18, .9); border: 1px solid rgba(64, 210, 255, .2); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.odesk__listen i, .otalk__pill i { width: 8px; height: 8px; border-radius: 50%; background: #40D2FF; box-shadow: 0 0 10px #40D2FF; }
.odesk__lt { color: #40D2FF; font: 600 12px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.odesk__ai { margin-left: 22px; padding: 4px 9px; border-radius: 7px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #C9CCD1; font-size: 12px; }
.odesk__orb { position: absolute; right: 9%; bottom: 12%; width: 30%; aspect-ratio: 1; }
.odesk__orb > .cssorb { width: 100%; font-size: 18px; }
[data-orb].is-live > .cssorb { display: none; }

/* bento vignettes */
.oart-talk { min-height: 300px; }
.otalk { position: absolute; inset: 0 32px 32px; }
.otalk__pill { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: #0A0D12; border: 1px solid rgba(64, 210, 255, .2); }
.otalk__wave { position: absolute; left: 0; right: 30%; top: 70px; height: 56px; display: flex; align-items: center; gap: 5px; }
.otalk__wave b { flex: 1; max-width: 6px; border-radius: 3px; background: linear-gradient(#40D2FF, #1A7FB0); height: calc(var(--h, 30) * 1%); }
.otalk__wave b:nth-child(4n+1) { --h: 35; } .otalk__wave b:nth-child(4n+2) { --h: 80; } .otalk__wave b:nth-child(4n+3) { --h: 55; } .otalk__wave b:nth-child(4n) { --h: 95; }
.otalk__wave b:nth-child(7n) { --h: 25; } .otalk__wave b:nth-child(5n) { --h: 65; }
.otalk__lines { position: absolute; left: 0; right: 30%; top: 146px; display: grid; gap: 8px; justify-items: start; }
.otalk__lines .vbubble--me { justify-self: start; }
.otalk__orb { position: absolute; right: 4%; top: 30px; width: 22%; max-width: 150px; font-size: 16px; }
@media (max-width: 899px) { .otalk { inset: 0 24px 24px; } .otalk__wave, .otalk__lines { right: 0; } .otalk__orb { display: none; } .oart-talk { min-height: 320px; } }

.oart-cmds { padding: 0 32px 32px; }
.ocmds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ocmds li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--sep); background: var(--layer-1); color: var(--label); font-size: 13px; }
.ocmds .ico { width: 18px; height: 18px; color: var(--acc-ink); }
.ocmds__more { margin-top: 14px; color: var(--body); font-size: 13px; text-align: center; }
@media (max-width: 899px) { .oart-cmds { padding: 0 24px 24px; } }

.oart-files { min-height: 260px; padding: 0 32px 32px; }
.ofiles { position: relative; font-size: 13px; }
.ofiles__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #2A2D34; color: #9AA0A8; }
.ofiles__bar .ico { width: 16px; height: 16px; color: #FBC320; }
.ofiles ul { padding: 8px; display: grid; gap: 4px; }
.ofiles li { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 6px; color: #E0E3E6; }
.ofiles__ic { width: 14px; height: 18px; border-radius: 3px; background: #3B82F6; }
.ofiles__ic--pdf { background: #E5484D; }
.ofiles__orb { position: absolute; right: 22px; bottom: 26px; width: 52px; font-size: 12px; }
@media (max-width: 899px) { .oart-files { padding: 0 24px 24px; } }

.oart-write { padding: 0 32px 32px; display: grid; align-content: center; }
.owrite { display: grid; gap: 16px; }
.owrite__box { padding: 16px 18px; display: grid; gap: 10px; }
.owrite__label { color: #8A8E96; font-size: 12px; }
.owrite__before { color: #8A8E96; font-size: 15px; text-decoration: line-through; text-decoration-color: rgba(248, 111, 110, .7); }
.owrite__after { color: #fff; font-size: 17px; padding: 10px 12px; border-radius: 8px; background: rgba(64, 210, 255, .08); box-shadow: inset 0 0 0 1px rgba(64, 210, 255, .3); }
.owrite__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 899px) { .oart-write { padding: 0 24px 24px; } }

/* feature rows */
.oshow { position: absolute; inset: 0; display: grid; place-items: center; }
.oshow__app { position: relative; width: 74%; overflow: hidden; }
.oshow__bar { padding: 10px 14px; color: #9AA0A8; font-size: 12px; border-bottom: 1px solid #2A2D34; }
.oshow__tools { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #2A2D34; }
.oshow__tools span { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 6px; color: #E0E3E6; font: 600 15px/1 var(--font); }
.oshow__tools span.vring { background: rgba(64, 210, 255, .1); }
.oshow__sep { min-width: 1px !important; width: 1px; height: 20px !important; background: #2A2D34; }
.oshow__page { display: grid; gap: 10px; padding: 18px 16px 26px; }
.oshow__page b { height: 9px; border-radius: 4px; background: #2A2D34; }
.oshow__orb { position: absolute; left: 30%; top: 15%; width: 13%; font-size: 13px; }
.oshow__say { position: absolute; left: 44%; top: 13%; font-size: 13px; }

.oprivate { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px;
  background: radial-gradient(45% 45% at 50% 45%, rgba(168, 142, 255, .18), transparent 70%); }
.oprivate__orb { width: 34%; font-size: 18px; }
.oprivate__pill { padding: 6px 14px; border-radius: 999px; background: rgba(168, 142, 255, .14); border: 1px solid rgba(168, 142, 255, .3); color: #C9B9FF; font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.oprivate__say { position: absolute; right: 9%; top: 12%; }
.cssorb--violet { box-shadow: 0 0 0 1px rgba(168, 142, 255, .3), 0 0 2em rgba(168, 142, 255, .32); }
.cssorb--violet::before { background: conic-gradient(from 315deg, #A88EFF, rgba(168, 142, 255, 0) 100deg, rgba(168, 142, 255, 0) 260deg, #A88EFF 360deg); }

.ofriend { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.ofriend__stage { position: relative; display: grid; place-items: center; }
.ofriend__stage > .cssorb { width: 34%; font-size: 18px; }
.ofriend__stage .orb3d { position: absolute; }
.ofriend__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 20px 24px; }
.ofriend__btns .vchip { min-height: 44px; border: 1px solid var(--sep); cursor: pointer; transition: background-color .2s var(--ease); }
.ofriend__btns .vchip:hover { background: var(--layer-3); }
:root:not([data-theme="light"]) .ofriend__btns .vchip:hover { background: #272A31; }
@media (max-width: 899px) { .frow__art.oart-friend { aspect-ratio: auto; min-height: 420px; } }

/* states (the character sheet) */
.ostates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ostates li { display: grid; justify-items: center; gap: 4px; padding: 8px 8px 20px; border-radius: var(--r); border: 1px solid var(--sep); background: #090C13; text-align: center; }
.ostates img { width: 100%; max-width: 200px; }
.ostates__t { color: #fff; font-size: 15px; font-weight: 500; }
.ostates__d { color: #94979E; font-size: 13px; line-height: 18px; }
@media (max-width: 899px) { .ostates { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ostates li:last-child { grid-column: 1 / -1; } }

.omore__t { margin: 96px 0 8px; }
@media (max-width: 767px) { .omore__t { margin-top: 72px; } }

/* phones: a taller desktop so the chat, the pill and the Orb never overlap */
@media (max-width: 559px) {
  .odesk { aspect-ratio: 4 / 3.7; }
  .odesk__chat { max-width: 78%; top: 8%; }
  .odesk__orb { width: 23%; right: 7%; bottom: 11%; }
  .odesk__listen { bottom: 11%; left: 6%; }
}
:root[data-theme="light"] .oprivate__pill { background: #F3F0FF; border-color: rgba(91, 63, 214, .25); color: #5B3FD6; }
:root[data-theme="light"] .oprivate { background: radial-gradient(45% 45% at 50% 45%, rgba(168, 142, 255, .22), transparent 70%); }