.qira-features { position: relative; width: 100%; overflow: hidden; --feat-copy-max: 620px; } .qira-features__stage-wrap { position: relative; height: 691vh; } .qira-features__stage { position: relative; width: 100%; height: 100vh; overflow: hidden; } .qira-features__s2 { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; background-color: var(--bg-you); background-image: radial-gradient(ellipse 55% 130% at 110% 92%, rgba(194, 95, 198, .70) 0%, transparent 60%), radial-gradient(ellipse 85% 65% at 11% 110%, #356eff 0%, #134bc2 35%, transparent 100%); } .qira-features__s2-content { width: 100%; } .qira-features { --qira-pill-maroon: #8f2c43; --qira-pill-hold: var(--lenovo-red, #e1251b); --qira-pill-salmon: #e8776b; } .qira-features__portal-pill { position: absolute; z-index: 9; opacity: 0; pointer-events: none; background: var(--qira-pill-maroon); } .qira-features__s3 { position: absolute; inset: 0; z-index: 2; background-color: var(--bg-one-prompt-base); background-image: radial-gradient(ellipse 55% 55% at 33% 52%, rgba(255, 255, 255, .40) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 66% -15%, rgba(194, 95, 198, .50) 0%, transparent 80%), radial-gradient(ellipse 90% 80% at 100% 90%, rgba(163, 224, 255, .45) 0%, rgba(42, 92, 199, .2) 50%, transparent 100%), linear-gradient(135deg, #f6f9fc 0%, #f4e0ff 100%); } .qira-features__s4 { position: absolute; inset: 0; z-index: 1; } .qira-features__portal-glow { position: absolute; z-index: 4; opacity: 0; pointer-events: none; background: #fff; box-shadow: 0 0 24px 6px rgba(255, 255, 255, .85), 0 0 90px 30px rgba(214, 199, 255, .55); } .qira-features__pb-glow { position: absolute; z-index: 1; opacity: 0; pointer-events: none; object-fit: cover; border-radius: 50%; filter: blur(72px); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%); will-change: opacity; } html:not(.qira-js) .qira-features__pb-glow { display: none; } html:not(.qira-js) .qira-features__stage-wrap { height: auto; } html:not(.qira-js) .qira-features__stage { height: auto; display: flex; flex-direction: column; } html:not(.qira-js) .qira-features__s2 { position: relative; order: 0; min-height: 100vh; } html:not(.qira-js) .qira-features__s3 { position: relative; order: 1; min-height: 100vh; } html:not(.qira-js) .qira-features__s4 { position: relative; inset: auto; order: 2; min-height: 100vh; } html:not(.qira-js) .qira-features__portal-glow { display: none; } html:not(.qira-js) .qira-features__portal-pill { display: none; } html:not(.qira-js) .qira-features__pb { left: 50%; top: 62%; transform: translate(-50%, -50%); } .qira-features__intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-inline: var(--qira-gutter); opacity: 1; transition: opacity .5s ease; pointer-events: auto; } .qira-features__intro.is-hidden { opacity: 0; pointer-events: none; } .qira-features__headline { font-family: var(--qira-font); font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-tight); letter-spacing: var(--qira-track-tight); color: var(--font-color, #171717); margin: 0 0 18px; } .qira-features__subhead { font-family: var(--qira-font); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: var(--qira-fw-regular); line-height: 1.6; color: #555; max-width: var(--feat-copy-max); margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); } .qira-features__pb-anchor { height: 130px; width: 1px; visibility: hidden; pointer-events: none; } .qira-features__blade-grid { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(var(--qira-gutter), 1fr) repeat(12, minmax(0, calc(var(--qira-max-width) / 12))) minmax(var(--qira-gutter), 1fr); align-items: center; column-gap: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .qira-features__blade-grid.is-visible { opacity: 1; pointer-events: auto; } .qira-features__dots { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-left: calc(var(--qira-gutter) / 2); } .qira-features__dots::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 220px; height: 100vh; z-index: -1; pointer-events: none; background: linear-gradient(to right, rgba(14, 9, 87, .110) 0%, rgba(14, 9, 87, .085) 33%, rgba(14, 9, 87, .073) 40%, rgba(14, 9, 87, .061) 47%, rgba(14, 9, 87, .049) 53%, rgba(14, 9, 87, .036) 60%, rgba(14, 9, 87, .025) 67%, rgba(14, 9, 87, .017) 73%, rgba(14, 9, 87, .009) 80%, rgba(14, 9, 87, .004) 87%, rgba(14, 9, 87, .001) 93%, rgba(14, 9, 87, .000) 100%); } .qira-features__dot { width: 6px; height: 14px; border-radius: 999px; background: #fff; cursor: pointer; transition: height .35s ease, background .35s ease; flex-shrink: 0; box-shadow: 0 2px 8px #00000055; } .qira-features__dot.is-active { height: 76px; background: #fff; box-shadow: 0 2px 6px #00000033; } .qira-features__dot { position: relative; } .qira-features__dot::after { content: attr(aria-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%); font-family: var(--qira-font); font-size: 12px; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-flat); white-space: nowrap; color: var(--font-color, #171717); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .qira-features__dot:hover::after, .qira-features__dot:focus-visible::after { opacity: 1; } @media (max-width: 1200px), (hover: none), (pointer: coarse) { .qira-features__dot::after { content: none; } } .qira-features__text-col { grid-column: 3 / 8; position: relative; display: grid; grid-template-columns: 1fr; padding-right: clamp(1rem, 2.5vw, 2.5rem); } .qira-features__blade { grid-column: 1; grid-row: 1; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; } .qira-features__blade.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; } .qira-features__blade-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .qira-features__blade-icon { width: 32px; height: 32px; flex-shrink: 0; display: block; } .qira-features__blade-eyebrow-text { font-family: var(--qira-font); font-size: 24px; font-weight: var(--qira-fw-medium); letter-spacing: .01em; color: #6c43c6; } .qira-features__blade-heading { font-family: var(--qira-font); font-size: clamp(24px, 3vw, 48px); font-weight: var(--qira-fw-medium); line-height: 1.12; letter-spacing: var(--qira-track-tight); color: var(--font-color, #171717); margin: 0 0 18px; } .qira-features__blade-body { font-family: var(--qira-font); font-size: 1rem; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-body); color: #444; margin: 0; } @media (max-width: 980px) { .qira-features__blade-icon { width: 24px; height: 24px; } .qira-features__blade-eyebrow-text { font-size: 18px; } } .qira-features__visual-col { grid-column: 8 / 14; position: relative; display: grid; grid-template-columns: 1fr; justify-content: center; height: auto; } .qira-features__visual { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .qira-features__visual.is-active { opacity: 1; pointer-events: auto; } .qira-features__visual > img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .qira-cm { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin: 0 auto; container-type: inline-size; } .qira-cm, .qira-lm, .qira-cmu, .qira-pa { pointer-events: none; } .qira-cm__float { position: absolute; display: block; height: auto; border-radius: 12px; box-shadow: 0 20px 52px rgba(20, 10, 50, .18); z-index: 1; pointer-events: none; } .qira-cm__float--tl { width: 32.2%; } .qira-cm__float--t { width: 20.0%; } .qira-cm__float--tr { width: 20.8%; } .qira-cm__float--l { width: 18.2%; } .qira-cm__float--r { width: 20.7%; } .qira-cm__float--bl { width: 26.2%; } .qira-cm__float--b { width: 16.4%; } .qira-cm__float--br { width: 26.5%; } .qira-cm__float--tl { top: 6%; left: -8%; } .qira-cm__float--t { top: 0%; left: 52%; } .qira-cm__float--tr { top: 4%; right: -10%; } .qira-cm__float--l { top: 46%; left: 3%; } .qira-cm__float--r { top: 40%; right: -9%; } .qira-cm__float--bl { bottom: 0%; left: 4%; } .qira-cm__float--b { bottom: -8%; left: 44%; } .qira-cm__float--br { bottom: 0; right: -3%; } .qira-cm__tile { container-type: inline-size; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; background: #faf8f5; font-family: var(--qira-font); line-height: 1.15; } .qira-cm__tile--calendar { aspect-ratio: 250 / 244; align-items: center; justify-content: center; gap: .5cqw; padding: 2cqw; text-align: center; } .qira-cm__tile-cal-month { font-size: 15cqw; font-weight: var(--qira-fw-medium); letter-spacing: .12em; color: #3571ea; } .qira-cm__tile-cal-day { font-size: 50cqw; font-weight: var(--qira-fw-regular); line-height: 1; color: #16233b; } .qira-cm__tile-cal-event { font-size: 12cqw; color: #6b6b76; } .qira-cm__tile--todo { aspect-ratio: 248 / 224; align-items: flex-start; justify-content: center; gap: 1cqw; padding: 2cqw; } .qira-cm__tile-todo-label { font-size: 13cqw; font-weight: var(--qira-fw-bold); letter-spacing: .08em; color: #8a8a93; margin-bottom: 1cqw; } .qira-cm__tile-todo-item { display: flex; align-items: center; gap: 4cqw; font-size: 9cqw; line-height: 1.15; letter-spacing: .0025em; color: #3a3a42; } .qira-cm__tile-check { flex: 0 0 auto; width: 13cqw; height: 13cqw; border: 1.6cqw solid #c2c2c8; border-radius: 3cqw; } .qira-cm__tile--wifi { aspect-ratio: 218 / 150; align-items: center; justify-content: center; gap: 1cqw; padding: 2cqw; text-align: center; } .qira-cm__tile-wifi-icon { width: 28cqw; height: auto; } .qira-cm__tile-wifi-label { font-size: 12cqw; color: #2a2a30; } .qira-cm__tile-wifi-dots { font-size: 12cqw; letter-spacing: .12em; color: #2a2a30; line-height: 1; white-space: nowrap; } .qira-cm__tile--contact { aspect-ratio: 197 / 219; align-items: center; justify-content: center; gap: .5cqw; padding: 2cqw; text-align: center; } .qira-cm__tile-avatar { width: 50cqw; height: 50cqw; border-radius: 50%; object-fit: cover; display: block; } .qira-cm__tile-name { font-size: 15cqw; font-weight: var(--qira-fw-bold); color: #1a1a20; margin-top: .25em; } .qira-cm__tile-email { font-size: 11cqw; color: #8a8a93; line-height: 1.2; } .qira-cm__ui { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; aspect-ratio: 418 / 414; z-index: 2; container-type: inline-size; background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border-radius: 6cqw; box-shadow: 0 24px 60px rgba(30, 12, 70, .22); overflow: hidden; } .qira-cm__scroll { position: absolute; inset: 0; padding: 18px 12px; display: flex; flex-direction: column; gap: 12px; font-family: var(--qira-font); will-change: transform; } .qira-cm__row { display: flex; } .qira-cm__row--user { justify-content: flex-end; } .qira-cm__row--qira { flex-direction: column; align-items: flex-start; } .qira-cm__bubble { max-width: 80%; background: rgba(255, 255, 255, .70); color: #1c1c22; font-size: 3.3cqw; line-height: 1.35; padding: 2.4cqw 3.4cqw; border-radius: 3.8cqw 3.8cqw 0 3.8cqw; box-shadow: 0 2px 8px rgba(20, 10, 50, .06); } .qira-cm__answer, .qira-cm__recipe { width: 100%; background: #fbf9f7; border-radius: 5.7cqw; box-shadow: 0 6px 20px rgba(20, 10, 50, .10); padding: 4cqw 4.5cqw; } .qira-cm__answer { margin-bottom: 10px; } .qira-cm__response { width: 100%; background: #fff; border-radius: 5.7cqw; box-shadow: 0 6px 20px rgba(20, 10, 50, .10); padding: 3.5cqw 4cqw; } .qira-cm__response .qira-cm__recipe { margin: 0; } .qira-cm__response .qira-cm__sources { margin-top: 3.5cqw; } .qira-cm__answer-title { margin: 0 0 3cqw; font-size: 3.4cqw; font-weight: var(--qira-fw-semibold); color: #5b3fd6; } .qira-cm__answer-sub { margin: 0 0 2.4cqw; font-size: 3.2cqw; font-weight: var(--qira-fw-semibold); color: #26262c; } .qira-cm__answer-body { margin: 0 0 2.4cqw; font-size: 3.1cqw; line-height: var(--qira-lh-relaxed); color: #3a3a42; } .qira-cm__status { display: flex; align-items: center; gap: 2cqw; margin: 0 0 3cqw; font-size: 3.3cqw; font-weight: var(--qira-fw-semibold); color: #5b3fd6; } .qira-cm__atom { width: 32px; height: 32px; flex: none; display: block; } .qira-cm__status-thinking { display: none; color: #5b3fd6; } .qira-cm__recipe-title { margin: 0 0 2.4cqw; font-size: 3.1cqw; font-weight: var(--qira-fw-semibold); color: #26262c; } .qira-cm__recipe-list { margin: 0; padding-left: 4cqw; font-size: 3cqw; line-height: var(--qira-lh-body); color: #3a3a42; list-style: none; } .qira-cm__recipe-list li { position: relative; } .qira-cm__recipe-list li::before { content: '\2022'; position: absolute; left: -3.2cqw; color: #8a8a92; } .qira-cm__sources { display: flex; gap: 3cqw; margin-top: 4cqw; } .qira-cm__source { display: flex; align-items: center; gap: 2cqw; padding: 2cqw 3.4cqw 2cqw 2cqw; border-radius: 4cqw; background: #f5f3f1; box-shadow: 0 2px 8px rgba(20, 10, 50, .08); } .qira-cm__source-icon { width: 32px; height: 32px; flex: none; border-radius: 6px; object-fit: cover; } .qira-cm__source-text { display: flex; flex-direction: column; line-height: 1.15; } .qira-cm__source-text b { font-size: 2.9cqw; font-weight: var(--qira-fw-semibold); color: #26262c; } .qira-cm__source-text small { font-size: 2.5cqw; color: #7a7a82; } .qira-cm__recipe-title, .qira-cm__recipe-list { background: linear-gradient(90deg, #4d8cf5 0%, #a179fd 13%, #d26ad1 25%, #e8639e 38%, #fb6f66 51%, #e8639e 63%, #d26ad1 75%, #a179fd 87%, #4d8cf5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: -webkit-text-fill-color .55s ease; } .qira-cm__recipe.is-settled .qira-cm__recipe-title { -webkit-text-fill-color: #1f1f28; } .qira-cm__recipe.is-settled .qira-cm__recipe-list { -webkit-text-fill-color: #34406b; } .qira-pb__ask, .qira-pb__ask-send { display: none; } .qira-pb.is-asking .qira-pb__split, .qira-pb.is-asking .qira-pb__slot--camera, .qira-pb.is-asking .qira-pb__slot--catch-me-up, .qira-pb.is-asking .qira-pb__slot--pay-attn { display: none; } .qira-pb.is-asking .qira-pb__ask { display: flex; } .qira-pb.is-asking .qira-pb__ask-send { display: inline-flex; } .qira-pb__ask { position: relative; flex: 1 1 auto; align-items: center; min-width: 260px; height: var(--pb-slot-size, 48px); margin: 0 6px; padding: 0 20px; border-radius: 999px; background: #fff; overflow: hidden; font-family: var(--qira-font); white-space: nowrap; } .qira-pb__ask-ph { position: absolute; left: 20px; font-size: 16px; color: #9a9aa2; pointer-events: none; } .qira-pb__ask-text { font-size: 16px; color: #1c1c22; } .qira-pb__ask-caret { width: 2px; height: 20px; margin-left: 1px; background: #6c4ce0; animation: qira-pb-caret 1s steps(1) infinite; } @keyframes qira-pb-caret { 50% { opacity: 0; } } .qira-pb__ask-send { align-items: center; justify-content: center; flex: none; width: var(--pb-slot-size, 48px); height: var(--pb-slot-size, 48px); border: none; border-radius: 50%; cursor: default; background: var(--pb-active-grad, linear-gradient(45deg, #5c8dff 0%, #a079ff 50%, #d06ad6 100%)); } .qira-pb__ask-send svg { display: block; } .qira-features__pb { position: absolute; left: 0; top: 0; z-index: 10; display: inline-flex; pointer-events: none; } .qira-features__pb .qira-pb { transform: scale(var(--feat-pb-scale, 1.95)); transform-origin: center center; } .qira-features__pb .qira-pb, .qira-features__pb .qira-pb * { cursor: default; } @media (orientation: portrait) and (max-width: 1024px) { .qira-features__blade-grid { grid-template-columns: minmax(var(--qira-gutter), 1fr) repeat(12, minmax(0, 1fr)) minmax(var(--qira-gutter), 1fr); grid-template-rows: auto auto; row-gap: .5rem; align-content: center; } .qira-features__text-col { grid-column: 2 / 14; grid-row: 1; padding-right: 0; text-align: center; max-width: var(--feat-copy-max); margin-inline: auto; } .qira-features__blade-eyebrow { justify-content: center; } .qira-features__visual-col { grid-column: 2 / 14; grid-row: 2; height: auto; } .qira-features__blade-heading { font-size: clamp(1.5rem, 4vw, 2rem); } } @media (max-width: 640px) { .qira-features__blade-grid { row-gap: .5rem; } } .qira-lm { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin: 0 auto; } .qira-lm__photo { position: absolute; left: 25.22%; top: 8.75%; width: 50%; height: 82.5%; container-type: inline-size; } .qira-lm__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10.67% / 6.89%; } .qira-lm__glow { position: absolute; left: -15%; top: -11%; z-index: 0; width: 130%; height: 122%; object-fit: cover; border-radius: 50%; filter: blur(38px); opacity: 0; pointer-events: none; } .qira-lm__scan { position: absolute; left: 19.66%; top: 14.96%; width: 65.55%; height: 40.85%; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none; -webkit-mask-image: url(#qira-lm-duomo); mask-image: url(#qira-lm-duomo); } .qira-lm__mask-def { position: absolute; width: 0; height: 0; overflow: hidden; } .qira-lm__beam { position: absolute; top: -12%; bottom: -12%; left: 0; width: 62%; transform: translateX(-130%); filter: blur(10px); background: linear-gradient(90deg, rgba(77, 140, 245, 0) 0%, rgba(77, 140, 245, .85) 16%, rgba(161, 121, 253, .95) 34%, rgba(210, 106, 209, 1) 52%, rgba(232, 99, 158, .95) 68%, rgba(251, 111, 102, .8) 84%, rgba(251, 111, 102, 0) 100%); } .qira-lm__ask-text, .qira-lm__reply-p { background: linear-gradient(90deg, #4d8cf5 0%, #a179fd 13%, #d26ad1 25%, #e8639e 38%, #fb6f66 51%, #e8639e 63%, #d26ad1 75%, #a179fd 87%, #4d8cf5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: -webkit-text-fill-color .55s ease; } .qira-lm__ask-text.is-settled, .qira-lm__reply-p.is-settled { -webkit-text-fill-color: #1f1f28; } .qira-lm__ask { position: absolute; z-index: 3; left: 50%; top: 6.5%; transform: translateX(-50%); width: max-content; max-width: 128%; padding: 2.4cqw 4.4cqw; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(30, 12, 70, .14); opacity: 0; pointer-events: none; } .qira-lm__ask-text { display: block; font-family: var(--qira-font); font-size: 4.7cqw; font-weight: var(--qira-fw-medium); line-height: 1.25; text-align: center; } .qira-lm__reply { position: absolute; z-index: 3; left: 13%; right: -15%; bottom: 6.3%; padding: 4.2cqw 4.8cqw; border: 2px solid transparent; border-radius: 5cqw; background: linear-gradient(rgba(255, 255, 255, .82), rgba(255, 255, 255, .82)) padding-box, linear-gradient(120deg, #fb6f66 0%, #e8639e 22%, #d26ad1 45%, #a179fd 72%, #4d8cf5 100%) border-box; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 38px rgba(30, 12, 70, .16); opacity: 0; pointer-events: none; } .qira-lm__reply-p { --lm-reveal: 0%; margin: 0; font-family: var(--qira-font); font-size: 4.4cqw; font-weight: var(--qira-fw-regular); line-height: 1.42; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--lm-reveal) - 16%), transparent var(--lm-reveal)); mask-image: linear-gradient(90deg, #000 calc(var(--lm-reveal) - 16%), transparent var(--lm-reveal)); } .qira-lm__reply-p2 { height: 0; margin-top: 0; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .qira-lm__glow { opacity: .35; } .qira-lm__ask, .qira-lm__reply { opacity: 1; } .qira-lm__ask-text, .qira-lm__reply-p { -webkit-text-fill-color: #1f1f28; } .qira-lm__reply-p { --lm-reveal: 114%; } .qira-lm__reply-p2 { height: auto; margin-top: .9em; } } .qira-cmu { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin: 0 auto; container-type: inline-size; } .qira-cmu__glow { position: absolute; left: 12%; top: 14%; width: 76%; height: 72%; z-index: 0; object-fit: cover; border-radius: 50%; filter: blur(40px); opacity: 0; pointer-events: none; } .qira-cmu__stack { position: absolute; left: 48%; top: 49%; transform: translate(-50%, -50%); z-index: 2; width: 57%; } .qira-cmu__ui { position: relative; z-index: 2; width: 100%; height: 240px; container-type: inline-size; background: rgba(255, 255, 255, .70); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 6cqw; box-shadow: 0 24px 60px rgba(30, 12, 70, .22); overflow: hidden; } .qira-cmu__steps { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 9.36cqw 8.19cqw 9.94cqw 9.94cqw; list-style: none; } .qira-cmu__step { position: relative; display: flex; align-items: center; gap: 3.51cqw; margin-top: 8.77cqw; opacity: 0; } .qira-cmu__step:first-child { margin-top: 0; } .qira-cmu__line { position: absolute; left: 3.22cqw; top: -8.77cqw; width: .44cqw; height: 8.77cqw; background: #6c43c6; opacity: .4; transform: scaleY(0); transform-origin: top center; } .qira-cmu__step:first-child .qira-cmu__line { display: none; } .qira-cmu__check { flex: 0 0 auto; width: 7.02cqw; height: 7.02cqw; display: block; } .qira-cmu__check svg { width: 100%; height: 100%; display: block; } .qira-cmu__step-text { font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-heading); color: #6c43c6; } .qira-cmu__summary { position: absolute; left: 0; right: 0; top: 0; padding: 8.19cqw 0 7.6cqw; opacity: 0; display: flex; flex-direction: column; } .qira-cmu__greet, .qira-cmu__missed { margin: 0; padding: 0 8.77cqw; font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-medium); line-height: 1.35; color: #6c43c6; } .qira-cmu__missed { margin-top: 1.17cqw; } .qira-cmu__track { display: flex; align-items: flex-start; width: 200%; margin-top: 5.26cqw; } .qira-cmu__panel { width: 50%; flex: 0 0 50%; padding: 0 8.77cqw; box-sizing: border-box; } .qira-cmu__row { display: flex; align-items: flex-start; gap: 3.51cqw; padding: 4.09cqw 0; border-top: 1px solid rgba(23, 23, 23, .10); } .qira-cmu__panel > .qira-cmu__row:first-of-type { border-top: 0; } .qira-cmu__row-icon { flex: 0 0 9.94cqw; width: 9.94cqw; height: 9.94cqw; margin-top: .29cqw; display: block; box-sizing: border-box; object-fit: contain; } .qira-cmu__row-icon--phone { padding: 1.17cqw; } .qira-cmu__row-icon--social { padding: 0; } .qira-cmu__row-icon--game { padding: .29cqw; } .qira-cmu__row-icon--gmsg { padding: 1.17cqw; } .qira-cmu__row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .88cqw; font-family: var(--qira-font); } .qira-cmu__row-text b { font-size: 4.1cqw; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-heading); color: #171717; } .qira-cmu__row-text small { font-size: 3.8cqw; font-weight: var(--qira-fw-regular); line-height: 1.4; color: #6b6b76; } .qira-cmu__chev { flex: 0 0 auto; width: 4.68cqw; height: 4.68cqw; margin-top: 1.75cqw; } .qira-cmu__chev-wrap { flex: 0 0 auto; position: relative; width: 4.68cqw; height: 4.68cqw; margin-top: 1.75cqw; } .qira-cmu__chev-wrap .qira-cmu__chev { margin-top: 0; width: 100%; height: 100%; } .qira-cmu__tap { position: absolute; top: 50%; left: 50%; width: 8cqw; height: 8cqw; margin: -4cqw 0 0 -4cqw; border-radius: 50%; border: .6cqw solid #ff3b30; background: rgba(255, 59, 48, .16); opacity: 0; pointer-events: none; z-index: 6; } .qira-cmu__btn { position: relative; } .qira-cmu__back { display: flex; align-items: center; gap: 2.34cqw; margin: 5.26cqw 0 4.09cqw; font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-medium); color: #171717; } .qira-cmu__chev--back, .qira-cmu__chev--up { margin-top: 0; } .qira-cmu__row--detail { border-top: 0; padding-top: 0; } .qira-cmu__slot { position: relative; margin-top: 1.17cqw; padding-bottom: 9.36cqw; border-bottom: 1px solid rgba(23, 23, 23, .10); } .qira-cmu__btns { display: flex; gap: 2.92cqw; padding-left: 11.11cqw; } .qira-cmu__btn { font-family: var(--qira-font); font-size: 3.8cqw; font-weight: var(--qira-fw-regular); color: #171717; padding: 2.63cqw 5.85cqw; border: 1px solid rgba(23, 23, 23, .35); border-radius: 999px; background: transparent; line-height: var(--qira-lh-flat); } .qira-cmu__reply { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 3.51cqw; padding: 4.09cqw 5.26cqw; border-radius: 4.1cqw; background: #fff; box-shadow: 0 4px 16px rgba(30, 12, 70, .10); opacity: 0; } .qira-cmu__reply-text { font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-regular); color: #171717; } .qira-cmu__send { flex: 0 0 auto; width: 6.43cqw; height: auto; display: block; } .qira-cmu__actions { display: flex; justify-content: flex-end; margin-top: 4.68cqw; } .qira-cmu__actions img { width: 28.07cqw; height: auto; display: block; } .qira-cmu__note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1.67cqw; width: max-content; max-width: none; padding: 1.33cqw 3.33cqw 1.33cqw 1.33cqw; border-radius: 999px; background: #fff; box-shadow: 0 14px 34px rgba(30, 12, 70, .16); opacity: 0; pointer-events: none; } .qira-cmu__note-av { flex: 0 0 auto; width: 7.33cqw; height: 7.33cqw; display: block; } .qira-cmu__note-text { display: flex; flex-direction: column; gap: .17cqw; font-family: var(--qira-font); white-space: nowrap; } .qira-cmu__note-text b { font-size: 2.33cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-heading); color: #171717; } .qira-cmu__note-text small { font-size: 2.17cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-heading); color: #8a8a95; } .qira-cmu__note--nina { left: -21.4%; top: calc(101.4% - 2.67cqw); } .qira-cmu__note--ryan { right: -22.3%; top: -28.5%; } .qira-cmu__note--sarah { right: -35.9%; top: -9.9%; } .qira-cmu__note--teams { left: 54.4%; top: 129.3%; } .qira-cmu__note--notes { left: -21.4%; top: -35.6%; } .qira-cmu__note--calendar { right: -43%; top: 77.7%; } @media (prefers-reduced-motion: reduce) { .qira-cmu__glow { opacity: .35; } .qira-cmu__ui { height: auto; } .qira-cmu__steps { position: relative; } .qira-cmu__summary { display: none; } .qira-cmu__step { opacity: 1; } .qira-cmu__line { transform: scaleY(1); } .qira-cmu__note { opacity: 1; } } .qira-pa { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin: 0 auto; container-type: inline-size; } .qira-pa__glow { position: absolute; left: 14%; top: 20%; width: 74%; height: 66%; z-index: 0; object-fit: cover; border-radius: 50%; filter: blur(40px); opacity: 0; pointer-events: none; } .qira-pa__head { position: absolute; z-index: 2; left: 21.4%; top: 15.9%; display: flex; align-items: center; gap: 1.67cqw; opacity: 0; } .qira-pa__head-icon { flex: 0 0 auto; width: 6.67cqw; height: 6.67cqw; display: block; } .qira-pa__head-text { display: flex; flex-direction: column; gap: .17cqw; font-family: var(--qira-font); white-space: nowrap; } .qira-pa__head-text b { font-size: 2.33cqw; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-heading); color: #171717; } .qira-pa__head-text small { font-size: 2.17cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-heading); color: #8a8a95; } .qira-pa__ui { position: absolute; z-index: 2; left: 21.4%; top: 24.8%; width: 57.2%; height: 54.4%; container-type: inline-size; background: rgba(255, 255, 255, .70); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 6cqw; box-shadow: 0 24px 60px rgba(30, 12, 70, .22); overflow: hidden; opacity: 0; } .qira-pa__panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.25cqw 4.66cqw 4.66cqw; box-sizing: border-box; } .qira-pa__status { display: flex; align-items: center; gap: 2.33cqw; margin: 0 0 3.5cqw; padding: 0 1.75cqw; font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-medium); line-height: var(--qira-lh-heading); } .qira-pa__atom { flex: 0 0 auto; width: 5.83cqw; height: 5.83cqw; display: block; } .qira-pa__status--rec { color: #6c43c6; } .qira-pa__status--ai span { color: #6c43c6; } .qira-pa__tabs { display: flex; align-items: center; gap: 1.17cqw; margin-bottom: 3.5cqw; } .qira-pa__tab { flex: 0 0 auto; max-width: 34%; padding: 2.62cqw 4.08cqw; border-radius: 3.5cqw; font-family: var(--qira-font); font-size: 3.8cqw; font-weight: var(--qira-fw-regular); color: #4a4a55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qira-pa__tab.is-on { background: rgba(108, 67, 198, .10); color: #171717; font-weight: var(--qira-fw-medium); } .qira-pa__sheet { position: relative; flex: 1 1 auto; min-height: 0; padding: 4.66cqw 5.25cqw; box-sizing: border-box; border-radius: 7cqw; background: #fff; box-shadow: 0 6px 22px rgba(30, 12, 70, .08); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); } .qira-pa__scroll { will-change: transform; } .qira-pa__scroll p { margin: 0 0 3.5cqw; font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-relaxed); color: #171717; } .qira-pa__scroll p b { font-weight: var(--qira-fw-medium); } .qira-pa__scroll h4 { margin: 5.25cqw 0 2.33cqw; font-family: var(--qira-font); font-size: 3.5cqw; font-weight: var(--qira-fw-medium); letter-spacing: .08em; text-transform: uppercase; color: #8a8a95; } .qira-pa__scroll h4:first-child { margin-top: 0; } .qira-pa__scroll ul { margin: 0 0 3.5cqw; padding-left: 5.25cqw; list-style: disc outside; } .qira-pa__scroll li { display: list-item; list-style: disc outside; margin-bottom: 1.75cqw; padding-left: .58cqw; font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-relaxed); color: #171717; } .qira-pa__sheet--ans { display: flex; flex-direction: column; -webkit-mask-image: none; mask-image: none; } .qira-pa__answer { margin: 0 0 4.08cqw; padding-bottom: 4.08cqw; border-bottom: 1px solid rgba(23, 23, 23, .10); font-family: var(--qira-font); font-size: 4.1cqw; font-weight: var(--qira-fw-regular); line-height: var(--qira-lh-relaxed); color: #171717; } .qira-pa__answer b { font-weight: var(--qira-fw-medium); } .qira-pa__actions { display: flex; justify-content: flex-end; } .qira-pa__actions img { width: 24.49cqw; height: auto; display: block; } .qira-pa__cmd { position: absolute; z-index: 3; left: 34.2%; top: 74.2%; width: max-content; max-width: 46%; padding: 2.33cqw 3.33cqw; border: 1.5px solid transparent; border-radius: 3.33cqw; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #fb6f66 0%, #e8639e 22%, #d26ad1 45%, #a179fd 72%, #4d8cf5 100%) border-box; box-shadow: 0 0 22px 5px rgba(210, 106, 209, .35), 0 0 26px 8px rgba(77, 140, 245, .28), 0 14px 34px rgba(30, 12, 70, .16); opacity: 0; pointer-events: none; } .qira-pa__cmd-text { display: block; font-family: var(--qira-font); font-size: 2.33cqw; font-weight: var(--qira-fw-regular); line-height: 1.4; white-space: normal; background: linear-gradient(90deg, #4d8cf5 0%, #a179fd 13%, #d26ad1 25%, #e8639e 38%, #fb6f66 51%, #e8639e 63%, #d26ad1 75%, #a179fd 87%, #4d8cf5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: -webkit-text-fill-color .55s ease; } .qira-pa__cmd-text.is-settled { -webkit-text-fill-color: #171717; } @media (prefers-reduced-motion: reduce) { .qira-pa__glow { opacity: .35; } .qira-pa__head, .qira-pa__ui { opacity: 1; } .qira-pa__panel--sum, .qira-pa__panel--ans { display: none; } .qira-pa__cmd { display: none; } } @media (orientation: portrait) and (max-width: 1024px) { .qira-cm__ui { width: 75%; } .qira-pa { aspect-ratio: 1 / 1.3; } .qira-pa__head { left: 8.5%; top: 5%; } .qira-pa__ui { left: 8.5%; top: 12%; width: 84%; height: 78%; } .qira-pa__glow { left: 4%; top: 10%; width: 92%; height: 82%; } .qira-pa__cmd { left: 28%; top: 76%; max-width: 62%; } .qira-cmu__stack { width: 72%; top: 49%; transform: translate(-50%, -50%); } .qira-lm__photo { left: 18%; top: 5.5%; width: 64%; height: 89.2%; } } @media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) { .qira-lm__photo { left: 25.04%; top: 5%; width: 49.92%; height: 69.58%; } .qira-pa { aspect-ratio: 1 / 1; } .qira-pa__head { left: 21.4%; top: 15.9%; } .qira-pa__ui { left: 21.4%; top: 24.8%; width: 57.2%; height: 54.4%; } .qira-pa__glow { left: 14%; top: 20%; width: 74%; height: 66%; } .qira-pa__cmd { left: 34.2%; top: 74.2%; max-width: 46%; } .qira-cmu__stack { width: 57%; } .qira-cm__ui { width: 70%; } } @media (orientation: portrait) and (max-width: 600px) { .qira-cm__ui { aspect-ratio: 418 / 500; } .qira-pa__ui { top: 18%; height: 72%; } .qira-pa__glow { top: 16%; height: 76%; } }