/* Reelquill AI — landing page Plain CSS, no build step. Colours: deep ink + aurora (teal → blue → violet → pink). */ @property --a { syntax: ""; inherits: false; initial-value: 0deg; } :root { --ink-0: #04060d; --ink-1: #070a14; --ink-2: #0a0f1e; --card: #0b1122; --line: rgba(160, 175, 220, .12); --line-2: rgba(160, 175, 220, .2); --text: #eef1fb; --text-2: #b8c1da; --text-3: #8f9ab8; --teal: #2ee6c5; --blue: #5b8cff; --violet: #8b5cf6; --pink: #ff5fa2; --green: #33c481; --amber: #f6c453; --grad: linear-gradient(100deg, #2ee6c5 0%, #5b8cff 36%, #8b5cf6 66%, #ff5fa2 100%); --gutter: clamp(16px, 4vw, 40px); --maxw: 1200px; --display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--ink-1); color: var(--text-2); font: 400 1rem/1.65 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* fine film grain over everything (static, cheap) */ body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--display); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } kbd { font-family: var(--body); } :focus-visible { outline: 2px solid #9db8ff; outline-offset: 3px; border-radius: 6px; } ::selection { background: rgba(91, 140, 255, .45); color: #fff; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: #fff; color: #0b1020; font-weight: 600; transition: top .2s; } .skip:focus { top: 12px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .container { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(72px, 10vw, 136px); overflow-x: clip; } .sec-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: #86ecdb; font: 600 .78rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; } .eyebrow .ico { width: 16px; height: 16px; } h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; text-wrap: balance; } h3 { text-wrap: balance; } .lead { margin-top: 18px; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--text-2); } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } @media (forced-colors: active) { .grad-text { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; } } /* ---------- Buttons ---------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap; font: 600 1rem/1 var(--body); color: var(--text); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s, border-color .25s; } .btn .ico { width: 18px; height: 18px; } .btn-lg { height: 56px; padding: 0 28px; font-size: 1.04rem; } .btn-sm { height: 38px; padding: 0 16px; gap: 8px; font-size: .9rem; } .btn-primary { color: #fff; background: linear-gradient(135deg, #4f7dff, #7a5cff 55%, #b15cff); box-shadow: 0 12px 30px -12px rgba(91, 140, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .28); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(124, 92, 255, 1), inset 0 1px 0 rgba(255, 255, 255, .32); } .btn-glow::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; opacity: .6; filter: blur(12px); background: conic-gradient(from var(--a), #2ee6c5, #5b8cff, #8b5cf6, #ff5fa2, #2ee6c5); animation: spin 6s linear infinite; } .btn-ghost { background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); } .btn-ghost:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); } .soon { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font: 700 .64rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; } .btn-lg .soon { position: absolute; top: -11px; right: 18px; height: 22px; background: #0b1122; color: #86ecdb; border: 1px solid rgba(46, 230, 197, .45); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8); } .btn[aria-disabled="true"] { cursor: default; } @keyframes spin { to { --a: 360deg; } } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; } .nav.is-scrolled { background: rgba(7, 10, 20, .74); border-bottom-color: var(--line); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); } .nav-inner { display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 700 1.14rem/1 var(--display); letter-spacing: -.02em; white-space: nowrap; } .brand-mark { width: 34px; height: 34px; } .nav-links { display: flex; gap: 2px; margin-left: auto; } .nav-links a { padding: 8px 14px; border-radius: 999px; color: var(--text-2); font-size: .95rem; font-weight: 500; transition: color .2s, background-color .2s; } .nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .06); } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); } .nav-toggle .ico { width: 22px; height: 22px; } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } .nav-cta { margin-left: auto; } .nav-links { position: absolute; top: 68px; left: var(--gutter); right: var(--gutter); margin: 0; flex-direction: column; padding: 10px; border-radius: 18px; background: #0b1020; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; } .nav-links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; } .nav-links a { padding: 14px 16px; font-size: 1.05rem; } } @media (max-width: 520px) { .nav-cta { display: none; } .nav-toggle { margin-left: auto; } } /* ---------- Hero ---------- */ .hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(112px, 15vh, 150px) 0 clamp(56px, 8vw, 96px); } .hero-bg { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 118vh; height: 118svh; min-height: 760px; pointer-events: none; background: radial-gradient(55% 45% at 18% 22%, rgba(46, 230, 197, .20), transparent 62%), radial-gradient(45% 42% at 84% 16%, rgba(255, 95, 162, .17), transparent 62%), radial-gradient(60% 55% at 50% 38%, rgba(91, 140, 255, .22), transparent 66%), var(--ink-1); } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; } .hero-canvas.is-ready { opacity: 1; } .hero-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(7, 10, 20, 0), var(--ink-1)); } /* soft scrim behind the headline for contrast */ .hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-inner::before { content: ""; position: absolute; inset: -6% -4% -10%; z-index: -1; background: radial-gradient(50% 50% at 50% 48%, rgba(5, 8, 18, .55), rgba(5, 8, 18, 0) 72%); pointer-events: none; } .pill-new { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(10, 14, 30, .55); border: 1px solid var(--line-2); color: var(--text); font-size: .9rem; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s, border-color .2s; animation: fadeUp .9s .05s var(--ease) both; } .pill-new:hover { background: rgba(20, 26, 50, .75); border-color: rgba(143, 176, 255, .45); } .pill-new .ico { width: 16px; height: 16px; transition: transform .2s; } .pill-new:hover .ico { transform: translateX(3px); } .pill-tag, .badge-new { padding: 4px 9px; border-radius: 999px; background: var(--grad); color: #07101f; font: 700 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; } .hero-title { margin-top: 26px; font-size: clamp(2.35rem, 7.4vw, 5.7rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 750; text-wrap: balance; } .hero-title .hl { display: block; } .hero-title .w { display: inline-block; animation: wordIn 1.1s var(--ease) both; animation-delay: calc(var(--l, 0s) + var(--wd, 0s) + .12s); } .hero-title .hl:nth-child(2) { --l: .22s; } .hero-title .hl:nth-child(3) { --l: .44s; } .hero-title .w:nth-of-type(2) { --wd: .07s; } .hero-title .w:nth-of-type(3) { --wd: .14s; } .hl-grad { filter: drop-shadow(0 2px 10px rgba(4, 7, 16, .6)) drop-shadow(0 8px 40px rgba(139, 92, 246, .35)); } .hl-grad .w { padding-bottom: .06em; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; background-size: 200% 100%; } .hl-grad .w:nth-of-type(1) { background-image: linear-gradient(100deg, #2ee6c5, #5b8cff 55%, #7d6bff 100%); } .hl-grad .w:nth-of-type(2) { background-image: linear-gradient(100deg, #8367ff, #b05cf0 45%, #ff5fa2 100%); } @media (forced-colors: active) { .hl-grad .w { -webkit-text-fill-color: currentColor; background: none; } } .hero-sub { max-width: 650px; margin-top: 26px; font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6; color: #c3cbe2; animation: fadeUp 1s .6s var(--ease) both; } .hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 14px; margin-top: 38px; animation: fadeUp 1s .72s var(--ease) both; } .hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 30px; color: var(--text-3); font-size: .92rem; animation: fadeUp 1s .85s var(--ease) both; } .hero-facts li { display: inline-flex; align-items: center; gap: 7px; } .hero-facts .ico { width: 16px; height: 16px; color: var(--green); stroke-width: 2.4; } @keyframes wordIn { from { opacity: 0; transform: translateY(.38em); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @media (max-width: 520px) { .hero-ctas { width: 100%; } .hero-ctas .btn { width: 100%; } .hero-facts { gap: 8px 16px; font-size: .86rem; } } /* ---------- Editor mock ---------- */ .mock-scene { position: relative; max-width: calc(1120px + var(--gutter) * 2); margin: clamp(52px, 7vw, 86px) auto 0; padding-inline: var(--gutter); perspective: 2000px; container: mock / inline-size; animation: mockIn 1.5s .45s var(--ease) both; } .mock-scene::before { content: ""; position: absolute; inset: 4% 2% -6%; z-index: -1; pointer-events: none; background: radial-gradient(48% 50% at 50% 45%, rgba(91, 140, 255, .42), rgba(139, 92, 246, .2) 45%, transparent 72%); } .mock-tilt { position: relative; transform-style: preserve-3d; transform-origin: 50% 0; } @keyframes mockIn { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } } .mock { position: relative; overflow: hidden; text-align: left; user-select: none; -webkit-user-select: none; font-size: 11px; font-size: calc(100cqi / 84); line-height: 1.3; color: #e7e9f0; background: #0f1117; border-radius: 1.2em; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 3em 8em -2em rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); } .mock .ico { stroke-width: 1.7; } .m-top { display: flex; align-items: center; gap: .8em; height: 2.9em; padding: 0 1.2em; background: #0b0c11; border-bottom: 1px solid #1b1e26; } .m-logo { display: flex; align-items: center; gap: .6em; font-weight: 600; font-size: 1.05em; } .m-logo svg { width: 1.6em; height: 1.6em; } .m-grow { flex: 1; } .m-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; height: 2.6em; padding: 0 1.1em; border-radius: .6em; border: 1px solid #2a2e39; background: #161922; color: #e7e9f0; font-size: .95em; font-weight: 500; white-space: nowrap; } .m-btn-sm { height: 2.2em; padding: 0 .9em; font-size: .88em; } .m-btn-primary { position: relative; overflow: hidden; background: #5b8cff; border-color: #5b8cff; color: #fff; font-weight: 600; animation: mCreate 12s var(--ease) infinite; } .m-btn-primary span { position: relative; } .m-create-fill { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-110%); animation: mSweep 12s linear infinite; } .m-btn-green { background: #33c481; border-color: #33c481; color: #05170e; font-weight: 600; } .m-bar { display: flex; align-items: center; gap: 1.1em; height: 4em; padding: 0 1.2em; background: #11131a; border-bottom: 1px solid #1b1e26; } .m-back { color: #9aa0ad; white-space: nowrap; } .m-edit { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; white-space: nowrap; } .m-edit .ico { width: 1.9em; height: 1.9em; padding: .45em; border-radius: 50%; background: rgba(91, 140, 255, .16); color: #8fb0ff; stroke-width: 2; } .m-file { display: flex; flex-direction: column; gap: .15em; min-width: 0; padding-left: 1.1em; border-left: 1px solid #262a34; } .m-file b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .m-file small { color: #8b91a0; font-size: .85em; white-space: nowrap; } .m-body { display: flex; align-items: stretch; } .m-rail { flex: none; width: 10.5em; display: flex; flex-direction: column; gap: .25em; padding: 1em .8em; border-right: 1px solid #1b1e26; } .m-ri { display: flex; align-items: center; gap: .8em; padding: .75em .8em; border-radius: .7em; color: #a7adba; font-size: 1.02em; } .m-ri .ico { width: 1.35em; height: 1.35em; } .m-ri.is-on { background: #1b1f2a; color: #fff; box-shadow: inset 0 0 0 1px #2a2f3c; } .m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .9em; padding: 1.1em; } .m-player { display: grid; place-items: center; padding: 1.1em; border-radius: .9em; background: #07080b; border: 1px solid #1b1e26; } .m-video { position: relative; width: min(100%, 38em); aspect-ratio: 16 / 9; overflow: hidden; border-radius: .3em; background: linear-gradient(125deg, #2ee6c5, #5b8cff 30%, #8b5cf6 58%, #ff5fa2 82%, #5b8cff); background-size: 260% 260%; animation: mBg 16s ease-in-out infinite alternate; } .m-screen { position: absolute; inset: 9% 11% 12%; overflow: hidden; border-radius: .7em; background: #10141f; box-shadow: 0 1.4em 2.6em -.8em rgba(12, 8, 50, .75), 0 0 0 1px rgba(255, 255, 255, .12); } .m-zoom { position: absolute; inset: 0; transform-origin: 82.5% 59%; animation: mZoom 12s var(--ease-io) infinite; } .m-zoom .m-target { animation: mTarget 12s linear infinite; } .m-ripple { position: absolute; left: 82.5%; top: 59%; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%; border: .22em solid #fff; opacity: 0; animation: mRipple 12s linear infinite; } .m-cursor-path { position: absolute; inset: 0; pointer-events: none; transform: translate(82.5%, 59%); animation: mCursor 12s var(--ease-io) infinite; } .m-cursor-path .cursor-svg { position: absolute; left: 0; top: 0; width: 1.6em; height: 1.6em; margin: -.24em 0 0 -.33em; } .m-cam { --ring: .22em; width: 18%; aspect-ratio: 1; right: 3.2%; bottom: 5.5%; } .m-cap { position: absolute; left: 50%; bottom: 3.2%; transform: translateX(-50%); margin: 0; white-space: nowrap; font: 800 1.15em/1 var(--display); color: #fff; filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .85)); } .m-cap span { animation: mWord 3.6s infinite; } .m-cap span:nth-child(2) { animation-delay: .6s; } .m-cap span:nth-child(3) { animation-delay: 1.2s; } .m-cap span:nth-child(4) { animation-delay: 1.8s; } .m-cap span:nth-child(5) { animation-delay: 2.4s; } .m-cap span:nth-child(6) { animation-delay: 3s; } .m-ctrl { display: flex; align-items: center; gap: .8em; padding: 0 .3em; color: #a7adba; font-size: .9em; font-variant-numeric: tabular-nums; } .m-ctrl .ico { width: 1.1em; height: 1.1em; } .m-prog { position: relative; flex: 1; height: .32em; border-radius: 1em; background: #262a33; overflow: hidden; } .m-prog b { position: absolute; top: 0; bottom: 0; right: 100%; width: 100%; background: #e7e9f0; transform: translateX(29%); animation: mHead 12s linear infinite; } .m-tl { padding: .9em 1em 1em; border-radius: .9em; background: #12141a; border: 1px solid #1b1e26; } .m-tl-head { display: flex; align-items: center; gap: .6em; } .m-tl-head .ico { width: 1.25em; height: 1.25em; color: #a7adba; } .m-tl-head b { font-weight: 600; font-size: 1.05em; } .m-tl-head small { color: #8b91a0; font-size: .9em; } .m-tracks { position: relative; display: grid; grid-template-columns: 4em minmax(0, 1fr); column-gap: .8em; row-gap: .45em; align-items: center; margin-top: .7em; } .m-lbl { font-size: .8em; color: #7d8394; text-align: right; } .m-ruler { display: flex; align-items: center; justify-content: space-between; height: 1.6em; font-size: .72em; color: #6c7283; font-variant-numeric: tabular-nums; } .m-strip { position: relative; height: 2.9em; overflow: hidden; border-radius: .45em; background: linear-gradient(90deg, rgba(6, 7, 10, .55) 1px, transparent 1px) 0 0 / 2.2em 100%, linear-gradient(90deg, #2ee6c5, #5b8cff 25%, #8b5cf6 50%, #ff5fa2 72%, #5b8cff 90%, #2ee6c5); box-shadow: inset 0 0 0 .14em #d8dce6; } .m-gap { position: absolute; top: 0; bottom: 0; left: 58%; width: 7%; background: repeating-linear-gradient(135deg, rgba(7, 8, 11, .88) 0 .35em, rgba(7, 8, 11, .55) .35em .7em); } .m-wave { height: 2.2em; min-width: 0; } .m-wave svg { width: 100%; height: 100%; } .m-wave path { fill: none; stroke: #33c481; stroke-width: 1.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; } .m-ccs { display: flex; gap: .4em; height: 1.1em; } .m-ccs i { height: 100%; border-radius: .4em; background: rgba(46, 230, 197, .45); } .m-ccs i:nth-child(1) { flex: 0 0 8%; } .m-ccs i:nth-child(2) { flex: 0 0 13%; } .m-ccs i:nth-child(3) { flex: 0 0 10%; } .m-ccs i:nth-child(4) { flex: 0 0 15%; } .m-ccs i:nth-child(5) { flex: 0 0 9%; margin-left: 7%; } .m-ccs i:nth-child(6) { flex: 0 0 12%; } .m-ccs i:nth-child(7) { flex: 0 0 8%; } .m-ccs i:nth-child(8) { flex: 0 0 7%; } .m-head-lane { position: absolute; left: 4.8em; right: 0; top: 1.6em; bottom: 0; pointer-events: none; } .m-head { position: absolute; top: -.35em; bottom: -.35em; left: 0; width: 100%; transform: translateX(29%); animation: mHead 12s linear infinite; } .m-head::before { content: ""; position: absolute; left: -.08em; top: 0; bottom: 0; width: .16em; border-radius: 1em; background: #ff4d5e; } .m-head::after { content: ""; position: absolute; left: -.4em; top: -.4em; width: .8em; height: .8em; border-radius: 50%; background: #ff4d5e; } .m-panel { flex: none; width: 19em; display: flex; flex-direction: column; gap: .55em; padding: 1.1em 1.2em; border-left: 1px solid #1b1e26; font-size: .96em; } .m-ph { display: flex; align-items: center; gap: .6em; margin-bottom: .3em; padding-bottom: .9em; border-bottom: 1px solid #1f232c; font-weight: 600; } .m-ph .ico { width: 1.3em; height: 1.3em; color: #a7adba; } .m-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .25em; border-radius: .7em; background: #0b0c11; border: 1px solid #232733; } .m-seg span { padding: .55em .3em; border-radius: .5em; text-align: center; color: #8f95a3; font-size: .88em; white-space: nowrap; } .m-seg .is-on { background: #232837; color: #fff; } .m-lab { margin-top: .55em; color: #8b91a0; font-size: .86em; } .m-chips { display: flex; flex-wrap: wrap; gap: .25em; padding: .3em; border-radius: .7em; border: 1px solid #232733; } .m-chips span { padding: .42em .62em; border-radius: .45em; color: #8f95a3; font-size: .84em; } .m-chips .is-on { background: #232837; color: #fff; } .m-checks { display: flex; flex-wrap: wrap; gap: .35em; } .m-checks span { display: inline-flex; align-items: center; gap: .45em; padding: .4em .7em; border-radius: 2em; border: 1px solid #2a2e39; color: #c9cdd6; font-size: .84em; } .m-checks span::before { content: ""; width: .95em; height: .95em; border-radius: .22em; border: .12em solid #5d6372; } .m-checks .is-on::before { border-color: #5b8cff; background: #5b8cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; } .m-sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55em; } .m-sw i { aspect-ratio: 1; border-radius: 50%; } .m-sw i:nth-child(1) { background: linear-gradient(135deg, transparent 44%, #ff5f6d 44% 56%, transparent 56%), #1a1d25; } .m-sw i:nth-child(2) { background: radial-gradient(circle at 35% 35%, #c7d2fe, #6d6f9c 60%, #3b3d5c); } .m-sw i:nth-child(3) { background: #0b0c11; box-shadow: inset 0 0 0 1px #2a2e39; } .m-sw i:nth-child(4) { background: #000; } .m-sw i:nth-child(5) { background: linear-gradient(135deg, #2ee6c5, #5b8cff 40%, #8b5cf6 70%, #ff5fa2); } .m-sw i:nth-child(6) { background: linear-gradient(135deg, #ff7a7a, #ff4fa3); } .m-sw i:nth-child(7) { background: linear-gradient(135deg, #22d3ee, #3b82f6); } .m-sw i:nth-child(8) { background: linear-gradient(135deg, #34d399, #059669); } .m-sw i:nth-child(9) { background: linear-gradient(135deg, #fbc2a4, #f78ca0); } .m-sw i:nth-child(10) { background: linear-gradient(135deg, #d6ccff, #a78bfa); } .m-sw .is-on { box-shadow: 0 0 0 .16em #0f1117, 0 0 0 .32em #5b8cff; } .m-toast { position: absolute; left: 50%; top: 7.9em; z-index: 2; display: flex; align-items: center; gap: 1em; padding: .8em .9em .8em .8em; border-radius: 1em; white-space: nowrap; background: rgba(14, 40, 29, .97); border: 1px solid rgba(51, 196, 129, .55); box-shadow: 0 1.2em 3em rgba(0, 0, 0, .55); transform: translate(-50%, 0); animation: mToast 12s var(--ease) infinite; } .m-ok { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #33c481; color: #06170f; } .m-ok .ico { width: 1.3em; height: 1.3em; stroke-width: 3; } .m-toast-t b { display: block; font-weight: 600; font-size: 1.05em; } .m-toast-t small { display: block; margin-top: .15em; color: #9fd8bd; font-size: .85em; } @keyframes mBg { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } @keyframes mCursor { 0% { transform: translate(30%, 82%); } 12% { transform: translate(52%, 44%); } 23%, 25% { transform: translate(82.5%, 59%); } 46% { transform: translate(80%, 62%); } 62% { transform: translate(58%, 76%); } 80% { transform: translate(40%, 60%); } 100% { transform: translate(30%, 82%); } } @keyframes mRipple { 0%, 24.4% { opacity: 0; transform: scale(.25); } 25% { opacity: 1; transform: scale(.3); } 31% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } } @keyframes mZoom { 0%, 25% { transform: none; } 32%, 50% { transform: scale(1.38); } 60%, 100% { transform: none; } } @keyframes mTarget { 0%, 25% { background: #161c2b; box-shadow: none; } 26%, 55% { background: rgba(91, 140, 255, .38); box-shadow: inset 0 0 0 1px #5b8cff; } 61%, 100% { background: #161c2b; box-shadow: none; } } @keyframes mCreate { 0%, 64% { transform: none; } 65.5% { transform: scale(.93); } 67.5%, 100% { transform: none; } } @keyframes mSweep { 0%, 66% { transform: translateX(-110%); } 78%, 100% { transform: translateX(110%); } } @keyframes mToast { 0%, 77% { opacity: 0; transform: translate(-50%, -1.4em) scale(.96); } 80.5%, 95% { opacity: 1; transform: translate(-50%, 0) scale(1); } 98.5%, 100% { opacity: 0; transform: translate(-50%, -.8em) scale(.98); } } @keyframes mHead { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes mWord { 0%, 16% { color: #2ee6c5; } 17%, 100% { color: #fff; } } /* floating chips (depth) */ .fchip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(13, 18, 36, .86); border: 1px solid rgba(255, 255, 255, .13); color: var(--text); white-space: nowrap; text-align: left; box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .07); animation: chipFloat 7s ease-in-out infinite; } .fchip b { display: block; font-size: .92rem; font-weight: 600; } .fchip small { display: block; font-size: .78rem; color: var(--text-3); } .fc-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; } .fc-ico .ico { width: 20px; height: 20px; } .fc-teal { background: rgba(46, 230, 197, .16); color: #5ff0d6; } .fc-violet { background: rgba(139, 92, 246, .22); color: #b9a2ff; } .fc-pink { background: rgba(255, 95, 162, .18); color: #ff8fc0; } .fc-green { background: rgba(51, 196, 129, .18); color: #5fdca2; } .fc-green .ico { stroke-width: 2.6; } /* placed over empty parts of the mock (below the rail items / under the panel) or outside it */ .fc1 { left: -7%; top: 63%; transform: translateZ(90px); } .fc2 { right: -5%; top: -7%; transform: translateZ(130px); animation-delay: -2s; } .fc3 { left: -5%; bottom: 5%; transform: translateZ(70px); animation-delay: -4.5s; } .fc4 { right: -6%; bottom: 7%; transform: translateZ(110px); animation-delay: -1s; } @keyframes chipFloat { 50% { translate: 0 -10px; } } @media (max-width: 1200px) { .fchip { display: none; } } @container mock (max-width: 720px) { .mock { font-size: calc(100cqi / 50); border-radius: 1em; } .m-panel, .m-hide-sm, .m-file small { display: none; } .m-rail { width: auto; padding: .8em .45em; } .m-ri { padding: .7em; } .m-ri > span { display: none; } .m-main { padding: .8em; } .m-player { padding: .7em; } .m-bar { gap: .8em; } .m-toast { top: 7.2em; } } /* shared: stylised "screen recording" + camera bubble + cursor */ .scr { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: #10141f; } .scr-bar { flex: 0 0 9%; display: flex; align-items: center; padding: 0 3%; background: #171c2b; border-bottom: 1px solid rgba(255, 255, 255, .05); } .scr-bar span { width: 26%; height: 30%; border-radius: 99px; background: #2a3247; } .scr-bar b { width: 10%; height: 34%; margin-left: auto; border-radius: 2px; background: linear-gradient(90deg, #3a4358 0 20%, transparent 20% 40%, #3a4358 40% 60%, transparent 60% 80%, #ff5f6d 80%); } .scr-body { flex: 1; display: flex; min-height: 0; } .scr-side { flex: 0 0 19%; display: flex; flex-direction: column; gap: 7%; padding: 6% 3%; background: #131826; } .scr-side i { flex: 0 0 5%; border-radius: 99px; background: #252d40; } .scr-side i:first-child { background: rgba(91, 140, 255, .85); } .scr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6%; padding: 5%; } .scr-title { flex: 0 0 6%; width: 42%; border-radius: 99px; background: #2c3448; } .scr-grid { flex: 1; display: flex; gap: 5%; min-height: 0; } .scr-chart { flex: 1.7; display: flex; align-items: flex-end; gap: 7%; padding: 5%; border-radius: 6% / 8%; background: #161c2b; } .scr-chart i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6f9bff, #8b5cf6); } .scr-chart i:nth-child(1) { height: 42%; } .scr-chart i:nth-child(2) { height: 66%; } .scr-chart i:nth-child(3) { height: 50%; } .scr-chart i:nth-child(4) { height: 84%; } .scr-chart i:nth-child(5) { height: 60%; } .scr-chart i:nth-child(6) { height: 92%; } .scr-chart i:nth-child(7) { height: 72%; } .scr-list { flex: 1; display: flex; flex-direction: column; gap: 9%; } .scr-list i { flex: 1; border-radius: 8% / 14%; background: #161c2b; } .scr-list i:first-child { background: linear-gradient(90deg, rgba(46, 230, 197, .32), #161c2b); } .cam { position: absolute; display: block; overflow: hidden; border-radius: 50%; background: radial-gradient(90% 90% at 30% 25%, #4a4f9a, #1c2046 55%, #2a1843); box-shadow: 0 0 0 var(--ring, 3px) rgba(255, 255, 255, .92), 0 8px 20px rgba(0, 0, 0, .45); } .cam::before { content: ""; position: absolute; left: 50%; top: 21%; width: 36%; height: 36%; border-radius: 50%; transform: translateX(-50%); background: linear-gradient(160deg, #eef1ff, #b8c3ff); } .cam::after { content: ""; position: absolute; left: 50%; top: 61%; width: 80%; height: 60%; border-radius: 50% 50% 0 0 / 60% 60% 0 0; transform: translateX(-50%); background: linear-gradient(160deg, #6f8dff, #8b5cf6); } .cursor-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); } .cursor-svg path { fill: #fff; stroke: #0b0f1c; stroke-width: 1.4; stroke-linejoin: round; } /* ---------- Marquee ---------- */ .marquee { position: relative; overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; width: max-content; animation: marquee 70s linear infinite; } .marquee ul { display: flex; flex: none; } .marquee li { display: flex; align-items: center; gap: 26px; padding-right: 26px; color: var(--text-3); font: 600 clamp(1rem, 1.6vw, 1.2rem)/1 var(--display); letter-spacing: -.01em; white-space: nowrap; } .marquee li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); } @keyframes marquee { to { transform: translateX(-50%); } } /* ---------- How it works ---------- */ .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .steps::before { content: ""; position: absolute; top: 44px; left: calc(100% / 6); right: calc(100% / 6); height: 2px; background: linear-gradient(90deg, rgba(46, 230, 197, .1), rgba(91, 140, 255, .6), rgba(255, 95, 162, .1)); } .steps::after { content: ""; position: absolute; top: 40px; left: calc(100% / 6); width: calc(100% * 2 / 3); height: 10px; pointer-events: none; background: radial-gradient(circle at 5px 5px, #fff 0 3px, rgba(143, 176, 255, .8) 4px, transparent 6px) no-repeat; filter: drop-shadow(0 0 6px rgba(143, 176, 255, .9)); animation: stepDot 5s var(--ease-io) infinite; } @keyframes stepDot { 0% { transform: translateX(-5px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(calc(100% - 5px)); opacity: 0; } } .step { position: relative; padding: 0 12px; text-align: center; } .step-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 26px; color: #fff; background: linear-gradient(160deg, #151d38, #0b1021); box-shadow: 0 0 0 8px var(--ink-1), 0 24px 40px -18px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08); } .step-ico::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--grad); opacity: .75; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .step-ico .ico { width: 34px; height: 34px; stroke-width: 1.6; } .step-n { display: block; margin-bottom: 10px; color: var(--text-3); font: 600 .74rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; } .step h3 { margin-bottom: 10px; font-size: 1.35rem; } .step p { max-width: 32ch; margin-inline: auto; color: var(--text-2); } @media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 44px; } .steps::before, .steps::after { display: none; } } .how { padding-bottom: clamp(32px, 5vw, 72px); } .demos { padding-top: clamp(48px, 7vw, 96px); } /* ---------- Demos ---------- */ .demos::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 30% at 85% 30%, rgba(139, 92, 246, .1), transparent 70%), radial-gradient(40% 30% at 10% 62%, rgba(46, 230, 197, .08), transparent 70%); } .demos .sec-head { margin-bottom: clamp(20px, 3vw, 36px); } .demo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 6vw, 72px); } .demo-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .demo-flip .demo-copy { order: 2; } .demo-copy h3 { margin-bottom: 16px; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; } .demo-copy > p:not(.eyebrow) { font-size: 1.06rem; } .demo-copy .eyebrow { gap: 10px; } .ticks { display: grid; gap: 10px; margin-top: 22px; } .ticks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); } .ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: rgba(51, 196, 129, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%235fdca2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; } .demo-stage { position: relative; isolation: isolate; min-width: 0; } .demo-stage::before { content: ""; position: absolute; inset: -14% -4%; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(91, 140, 255, .2), transparent 70%); } #rewrite .demo-stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(139, 92, 246, .22), transparent 70%); } #look .demo-stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(255, 95, 162, .16), transparent 70%); } #shorts .demo-stage::before { background: radial-gradient(50% 50% at 50% 50%, rgba(46, 230, 197, .15), transparent 70%); } .demo-card { position: relative; padding: clamp(10px, 1.6vw, 16px); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), var(--card); border: 1px solid var(--line); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .06); } .demo-pill { position: absolute; left: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(6, 9, 20, .76); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; } .demo-pill .ico { width: 14px; height: 14px; } .seg-ctrl { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; padding: 5px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); } .seg-ctrl button { flex: 1 1 auto; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--text-2); font-size: .92rem; font-weight: 500; transition: background-color .2s, color .2s, box-shadow .2s; } .seg-ctrl button:hover { color: var(--text); background: rgba(255, 255, 255, .06); } .seg-ctrl button[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, rgba(91, 140, 255, .38), rgba(139, 92, 246, .38)); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .5); } @media (max-width: 900px) { .demo, .demo-flip { grid-template-columns: minmax(0, 1fr); } .demo-flip .demo-copy { order: 0; } } @media (max-width: 520px) { .seg-ctrl button { padding: 0 8px; font-size: .86rem; } .sh-pill { display: none; } } /* Demo 1 — captions */ .cap-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; container-type: inline-size; background: linear-gradient(135deg, #1e2a55, #33235e 55%, #4a1f4f); } .cap-shot { position: absolute; inset: 7% 9% 25%; overflow: hidden; border-radius: 1.6cqi; box-shadow: 0 2cqi 5cqi rgba(5, 5, 30, .55), 0 0 0 1px rgba(255, 255, 255, .1); } .cap-cam { --ring: .5cqi; width: 15cqi; height: 15cqi; right: 5%; bottom: 29%; } .cap-line { position: absolute; left: 3%; right: 3%; bottom: 7.5%; margin: 0; text-align: center; color: #fff; font: 800 3.5cqi/1.3 var(--display); letter-spacing: -.01em; filter: drop-shadow(0 .06em .1em rgba(0, 0, 0, .85)); } .cap-inner { padding: .08em .3em; border-radius: .3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .3s; } .cap-line .wd { display: inline-block; transition: color .16s, opacity .16s, transform .28s cubic-bezier(.3, 1.6, .5, 1), background-color .16s, box-shadow .16s; } .cap--classic .wd { opacity: 0; } .cap--classic .wd.is-said, .cap--classic .wd.is-now { opacity: 1; } .cap--highlight .wd.is-now { color: #ffe14d; } .cap--pop .wd { opacity: .5; } .cap--pop .wd.is-said { opacity: 1; } .cap--pop .wd.is-now { opacity: 1; color: #ff8cc6; transform: scale(1.24) translateY(-.03em); } .cap--karaoke .wd.is-said { color: #2ee6c5; } .cap--karaoke .wd.is-now { color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(90deg, #2ee6c5 50%, #fff 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: kfill var(--dur, 400ms) linear forwards; } .cap--boxed .cap-inner { background: rgba(8, 10, 22, .84); } .cap--boxed .wd { padding: 0 .08em; border-radius: .16em; } .cap--boxed .wd.is-now { background: #5b8cff; box-shadow: 0 0 0 .07em #5b8cff; } @keyframes kfill { to { background-position: 0 0; } } /* Demo 2 — rewrite with an AI voice */ .rw { padding: 0; overflow: hidden; } .rw-top { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); } .rw-seg { display: inline-flex; padding: 4px; border-radius: 12px; background: #080b16; border: 1px solid var(--line); } .rw-seg span { padding: 8px 14px; border-radius: 9px; color: var(--text-3); font-size: .9rem; font-weight: 500; white-space: nowrap; } .rw-seg .is-on { background: #1e2538; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .rw-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .9rem; } .rw-lbl { color: var(--text-3); } .rw-select { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 12px; border-radius: 9px; border: 1px solid var(--line-2); background: #080b16; color: var(--text); white-space: nowrap; } .rw-select .ico { width: 14px; height: 14px; color: var(--text-3); } .rw-note { margin-left: auto; color: var(--text-3); font-size: .82rem; } .rw-lines { padding: 8px; } .rw-line { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 10px; border-radius: 12px; transition: background-color .3s, box-shadow .3s; } .rw-line.is-active { background: rgba(91, 140, 255, .08); box-shadow: inset 0 0 0 1px rgba(91, 140, 255, .45); } .rw-t { color: var(--text-3); font-size: .82rem; line-height: 1.8; font-variant-numeric: tabular-nums; } .rw-txt { min-height: 1.55em; color: var(--text); font-size: .98rem; line-height: 1.55; } #rwText.is-sel { background: rgba(91, 140, 255, .5); border-radius: 3px; } .rw-caret { display: none; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: #9db8ff; animation: blink 1s steps(1) infinite; } .rw-line.is-typing .rw-caret { display: inline-block; } .rw-said { display: block; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; color: var(--text-3); font-size: .86rem; line-height: 1.45; transition: max-height .45s var(--ease), opacity .45s, margin-top .45s; } .rw-said.is-on { max-height: 4.5em; margin-top: 6px; opacity: 1; } .rw-side { position: relative; align-self: start; display: flex; flex-direction: column; align-items: flex-end; } .rw-st { font-size: .8rem; font-weight: 600; line-height: 1.8; white-space: nowrap; } .rw-st.is-ready { color: var(--green); } .rw-st.is-edit { color: #8fb0ff; } .rw-st.is-busy { color: var(--text-3); } .rw-st.is-busy::after { content: "..."; display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; animation: dots 1.2s steps(4) infinite; } .rw-st.is-wait { padding: 1px 9px; border-radius: 8px; line-height: 1.6; color: var(--amber); background: rgba(246, 196, 83, .12); border: 1px solid rgba(246, 196, 83, .38); animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1); } .rw-orig { position: absolute; top: 100%; right: 0; margin-top: 6px; color: var(--text-3); font-size: .78rem; opacity: 0; transition: opacity .3s; } .rw-orig.is-on { opacity: 1; } .rw-foot { display: grid; gap: 14px; padding: 14px 16px 16px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .18); } .rw-play { display: flex; align-items: center; gap: 14px; } .rw-hear { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: .92rem; font-weight: 600; white-space: nowrap; } .rw-hear .ico { width: 14px; height: 14px; } .rw-wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 32px; } .rw-wave i { flex: 1; height: var(--h, 50%); border-radius: 2px; background: linear-gradient(180deg, #8fb0ff, #8b5cf6); opacity: .28; transform: scaleY(.4); transition: opacity .3s, transform .3s; } .rw-wave.is-playing i { opacity: 1; transform: none; animation: wv .7s ease-in-out infinite alternate; animation-delay: var(--dl, 0s); } .rw-timing { display: grid; gap: 8px; font-size: .84rem; } .rw-trow { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: center; gap: 10px; color: var(--text-3); } .rw-trow em { font-style: normal; text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; } .rw-track { position: relative; height: 10px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .06); } .rw-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: 99px; background: linear-gradient(90deg, #33c481, #2ee6c5); } .rw-fill-ai { border-radius: 99px 0 0 99px; background: linear-gradient(90deg, #5b8cff, #8b5cf6); } .rw-extra { position: absolute; left: 72%; top: 0; bottom: 0; width: 28%; border-radius: 0 99px 99px 0; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); background: repeating-linear-gradient(135deg, rgba(246, 196, 83, .95) 0 5px, rgba(246, 196, 83, .45) 5px 10px); } .rw-timing.is-on .rw-extra { transform: scaleX(1); } .rw-note2 { color: var(--text-3); font-size: .82rem; opacity: 0; transition: opacity .5s .35s; } .rw-timing.is-on .rw-note2 { opacity: 1; } .rw-note2 b { color: var(--amber); } @keyframes blink { 50% { opacity: 0; } } @keyframes dots { to { width: 1.1em; } } @keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes wv { from { transform: scaleY(.3); } to { transform: scaleY(1); } } @media (max-width: 520px) { .rw-hide-sm { display: none; } .rw-note { margin-left: 0; } .rw-line { grid-template-columns: 34px minmax(0, 1fr); } .rw-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; } .rw-orig { position: static; margin-top: 0; } .rw-trow { grid-template-columns: 68px minmax(0, 1fr) 40px; } } /* Demo 3 — auto-zoom */ .az-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; container-type: inline-size; background: #0a0d18; } .az-content { position: absolute; inset: 0; transform-origin: 0 0; background: radial-gradient(80% 90% at 15% 10%, #2a3872, transparent 60%), radial-gradient(70% 80% at 95% 100%, #4b2a6b, transparent 60%), #12172a; } .az-win { position: absolute; inset: 9% 8% 11%; display: flex; flex-direction: column; overflow: hidden; border-radius: 1.4cqi; font-size: 2.2cqi; color: #dfe4f2; background: #131827; box-shadow: 0 3cqi 6cqi rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); } .az-bar { display: flex; align-items: center; justify-content: space-between; height: 2.4em; padding: 0 1em; background: #191f31; font-size: .9em; font-weight: 600; } .az-bar b { width: 4.5em; height: .75em; border-radius: 2px; background: linear-gradient(90deg, #3a4256 0 20%, transparent 20% 40%, #3a4256 40% 60%, transparent 60% 80%, #ff5f6d 80%); } .az-body { flex: 1; display: flex; min-height: 0; } .az-nav { flex: 0 0 28%; display: flex; flex-direction: column; gap: .3em; padding: 1em .7em; background: #161b2b; } .az-nav span { padding: .5em .7em; border-radius: .5em; color: #9aa3bb; font-size: .9em; } .az-nav .is-on { background: #232b42; color: #fff; } .az-main { flex: 1; display: flex; flex-direction: column; gap: .65em; padding: 1.1em 1.4em; } .az-h { margin-bottom: .15em; color: #fff; font-size: 1.2em; font-weight: 700; } .az-row { display: flex; align-items: center; gap: .9em; padding: .6em .9em; border-radius: .6em; background: #1a2032; } .az-lbl { display: flex; flex-direction: column; color: #eef1fb; font-size: .95em; font-weight: 600; line-height: 1.25; } .az-lbl small { margin-top: .12em; color: #8a93ad; font-size: .8em; font-weight: 400; } .az-toggle { position: relative; flex: none; width: 2.6em; height: 1.45em; border-radius: 1em; background: #353d54; transition: background-color .25s; } .az-toggle::after { content: ""; position: absolute; top: .2em; left: .2em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); } .az-toggle.is-on { background: #5b8cff; } .az-toggle.is-on::after { transform: translateX(1.15em); } .az-actions { display: flex; justify-content: flex-end; gap: .6em; margin-top: auto; } .az-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 5.6em; height: 2.2em; padding: 0 1em; border-radius: .55em; background: #5b8cff; color: #fff; font-size: .95em; font-weight: 600; white-space: nowrap; transition: background-color .25s, color .25s; } .az-btn-ghost { background: #232a3d; color: #c9d0e2; } .az-btn.is-done { background: #33c481; color: #06170f; } .az-cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 3.4cqi; height: 3.4cqi; margin: -.5cqi 0 0 -.7cqi; will-change: transform; transition: opacity .25s; } .az-cursor.is-fade { opacity: 0; } .az-ripple { position: absolute; left: 50%; top: 50%; z-index: 1; width: 9cqi; height: 9cqi; margin: -4.5cqi 0 0 -4.5cqi; border-radius: 50%; border: .5cqi solid rgba(255, 255, 255, .95); opacity: 0; pointer-events: none; } .az-ripple.is-on { animation: ripple .7s var(--ease) forwards; } @keyframes ripple { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.45); } } /* Demo 4 — look (before / after) */ .lk-stage { --pos: 50%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; container-type: inline-size; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #10141f; } .lk-before, .lk-after { position: absolute; inset: 0; } .lk-after { clip-path: inset(0 0 0 var(--pos)); } .lk-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #2ee6c5, #5b8cff 38%, #8b5cf6 68%, #ff5fa2); transition: opacity .5s; } .lk-stage[data-bg="sunset"] .lk-bg { background: linear-gradient(135deg, #ffc27a, #ff6b8b 50%, #a855f7); } .lk-stage[data-bg="ocean"] .lk-bg { background: linear-gradient(135deg, #22d3ee, #3b82f6 55%, #1e3a8a); } .lk-stage[data-bg="mint"] .lk-bg { background: linear-gradient(135deg, #b7f5d8, #34d399 45%, #0f766e); } .lk-stage[data-bg="blur"] .lk-bg { opacity: 0; } .lk-blur { position: absolute; inset: -12%; opacity: 0; filter: blur(3.2cqi) saturate(1.4) brightness(.95); transition: opacity .5s; } .lk-stage[data-bg="blur"] .lk-blur { opacity: 1; } .lk-shot { position: absolute; inset: 10% 10.5%; overflow: hidden; border-radius: 2.2cqi; box-shadow: 0 3cqi 6cqi -1cqi rgba(10, 6, 40, .7), 0 0 0 1px rgba(255, 255, 255, .14); } .lk-tag { position: absolute; top: 12px; z-index: 3; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(6, 8, 18, .72); border: 1px solid rgba(255, 255, 255, .15); color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; white-space: nowrap; } .lk-tag-l { left: 12px; } .lk-tag-r { right: 12px; } .lk-range { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; margin: 0; opacity: 0; pointer-events: none; } .lk-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .5); pointer-events: none; } .lk-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } .lk-knob svg { width: 22px; height: 22px; fill: none; stroke: #0b1020; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .lk-range:focus-visible ~ .lk-handle .lk-knob { outline: 3px solid #9db8ff; outline-offset: 3px; } .lk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 14px; padding: 4px 4px 2px; } .lk-label { color: var(--text-3); font-size: .9rem; } .lk-swatches { display: flex; flex-wrap: wrap; gap: 10px; } .sw { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .2s var(--ease), box-shadow .2s; } .sw:hover { transform: scale(1.08); } .sw[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 3px var(--card), 0 0 0 5px #8fb0ff; } .sw-aurora { background: linear-gradient(135deg, #2ee6c5, #5b8cff 38%, #8b5cf6 68%, #ff5fa2); } .sw-sunset { background: linear-gradient(135deg, #ffc27a, #ff6b8b 50%, #a855f7); } .sw-ocean { background: linear-gradient(135deg, #22d3ee, #3b82f6 55%, #1e3a8a); } .sw-mint { background: linear-gradient(135deg, #b7f5d8, #34d399 45%, #0f766e); } .sw-blur { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .6), transparent 45%), radial-gradient(circle at 70% 70%, rgba(139, 92, 246, .8), transparent 55%), linear-gradient(135deg, #5a6386, #2a3150); } /* Demo 5 — shorts */ .sh-stage { position: relative; height: clamp(340px, 40vw, 470px); overflow: hidden; border-radius: 14px; background: radial-gradient(90% 70% at 50% 0%, #1a2346, transparent 70%), radial-gradient(60% 60% at 80% 100%, rgba(139, 92, 246, .25), transparent 70%), #0a0e1b; } .sh-frame { position: absolute; left: 50%; top: 50%; width: 80%; height: 45%; overflow: hidden; border-radius: 12px; transform: translate(-50%, -50%); background: linear-gradient(180deg, #151c38, #0b0f1f); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .14); } .sh-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .sh-content { position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; will-change: transform; background: #0f1424; } .shc-top { position: absolute; left: 0; top: 0; right: 0; height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #171d31; } .shc-top i { width: 16px; height: 16px; border-radius: 5px; background: var(--grad); } .shc-top span { width: 190px; height: 14px; border-radius: 99px; background: #262e47; } .shc-top b { width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: linear-gradient(135deg, #ffb86b, #ff5fa2); } .shc-nav { position: absolute; left: 0; top: 34px; bottom: 0; width: 110px; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px; background: #121829; } .shc-nav i { height: 10px; border-radius: 99px; background: #262e45; } .shc-nav .is-on { background: rgba(91, 140, 255, .9); } .shc-card { position: absolute; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #161d33; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); } .shc-card > span { width: 44%; height: 9px; border-radius: 99px; background: #2c3552; } .shc-a { left: 126px; top: 50px; width: 300px; height: 170px; } .shc-b { left: 438px; top: 50px; width: 190px; height: 170px; } .shc-c { left: 126px; top: 232px; width: 190px; height: 116px; } .shc-d { left: 328px; top: 232px; width: 300px; height: 116px; } .shc-bars { flex: 1; display: flex; align-items: flex-end; gap: 12px; } .shc-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2ee6c5, #5b8cff); } .shc-bars i:nth-child(1) { height: 40%; } .shc-bars i:nth-child(2) { height: 70%; } .shc-bars i:nth-child(3) { height: 55%; } .shc-bars i:nth-child(4) { height: 90%; } .shc-bars i:nth-child(5) { height: 62%; } .shc-bars i:nth-child(6) { height: 78%; } .shc-ring { width: 104px; height: 104px; margin: auto; border-radius: 50%; background: conic-gradient(#ff5fa2 0 38%, #8b5cf6 38% 70%, #2ee6c5 70% 100%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); } .shc-c > i { height: 16px; border-radius: 6px; background: #222a44; } .shc-c > i:nth-of-type(1) { background: linear-gradient(90deg, rgba(46, 230, 197, .45), #222a44); } .shc-line { flex: 1; border-radius: 8px; background: linear-gradient(180deg, rgba(139, 92, 246, .35), transparent), linear-gradient(170deg, transparent 45%, #8b5cf6 46% 49%, transparent 50%); } .sh-ptr { position: absolute; left: 0; top: 0; z-index: 2; width: 24px; height: 24px; margin: -3px 0 0 -4px; will-change: transform; } .sh-crop { position: absolute; top: 0; bottom: 0; left: 0; border: 2px dashed rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: 0 0 0 2000px rgba(3, 5, 12, .5); opacity: 0; pointer-events: none; transition: opacity .4s; } .sh-crop.is-on { opacity: 1; } .sh-cam { --ring: 3px; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; } .sh-pill { top: auto; bottom: 12px; } /* ---------- Formats ---------- */ .formats::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 50% 60%, rgba(91, 140, 255, .1), transparent 70%); } .fmt-arrow { display: inline-block; color: var(--text-3); font-weight: 500; } .fmt-flow { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(64px, 9vw, 112px); } .fmt-beams { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .fmt-beam-base path { fill: none; stroke: rgba(143, 176, 255, .2); stroke-width: 1.5; } .fmt-beam-glow path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 34 620; animation: beam 3.4s linear infinite; } .fmt-beam-glow path:nth-child(1) { stroke: #2ee6c5; } .fmt-beam-glow path:nth-child(2) { stroke: #5b8cff; animation-delay: -.85s; } .fmt-beam-glow path:nth-child(3) { stroke: #8b5cf6; animation-delay: -1.7s; } .fmt-beam-glow path:nth-child(4) { stroke: #ff5fa2; animation-delay: -2.55s; } @keyframes beam { from { stroke-dashoffset: 654; } to { stroke-dashoffset: 0; } } .fmt-src { position: relative; z-index: 1; width: min(360px, 86%); } .fmt-src-box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 70px -25px rgba(91, 140, 255, .6), 0 0 0 1px rgba(255, 255, 255, .16); } .fmt-src-lbl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: var(--text); font-weight: 600; } .fmt-src-lbl .ico { width: 16px; height: 16px; color: #86ecdb; } .fmt-cards { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2.4vw, 28px); width: 100%; } .fmt { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } .fmt-box { position: relative; height: clamp(150px, 19vw, 230px); overflow: hidden; border-radius: 12px; background: #0b1020; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .14); } .fmt-169 .fmt-box { aspect-ratio: 16 / 9; } .fmt-916 .fmt-box { aspect-ratio: 9 / 16; } .fmt-11 .fmt-box { aspect-ratio: 1; } .fmt-45 .fmt-box { aspect-ratio: 4 / 5; } .fmt-lbl { color: var(--text-3); font-size: .9rem; white-space: nowrap; } .fmt-lbl b { color: var(--text); font-family: var(--display); margin-right: 4px; } /* mini scene inside each format */ .fs { position: absolute; inset: 0; overflow: hidden; container-type: size; } .fs-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #2ee6c5, #5b8cff 40%, #8b5cf6 70%, #ff5fa2); } .fs-scr { position: absolute; display: flex; flex-direction: column; gap: 7%; padding: 5% 6%; overflow: hidden; border-radius: 3cqmin; background: #10141f; box-shadow: 0 3cqmin 7cqmin rgba(10, 6, 40, .5); } .fs-scr i { display: block; flex: 0 0 9%; border-radius: 99px; background: #2a3246; } .fs-scr i:nth-child(1) { width: 45%; background: #5b8cff; } .fs-scr i:nth-child(2) { width: 78%; } .fs-scr i:nth-child(3) { flex: 1; border-radius: 2cqmin; background: linear-gradient(180deg, #1c2440, #151a2b); } .fs-cam { --ring: 2px; } .fs-cap { position: absolute; left: 50%; height: 4.5cqmin; min-height: 5px; border-radius: 99px; transform: translateX(-50%); background: linear-gradient(90deg, #fff 0 62%, #2ee6c5 62%); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); } .fs-169 .fs-scr { inset: 10% 12% 17%; } .fs-169 .fs-cam { width: 22cqh; height: 22cqh; right: 5%; bottom: 7%; } .fs-169 .fs-cap { bottom: 6.5%; width: 38%; } .fs-916 .fs-bg { background: linear-gradient(180deg, #151c38, #0b0f1f); } .fs-916 .fs-scr { left: 0; right: 0; top: 0; height: 58%; border-radius: 0; padding: 12% 8%; } .fs-916 .fs-scr i:nth-child(3) { flex: 1; } .fs-916 .fs-cam { width: 58cqw; height: 58cqw; left: 21cqw; top: calc(79% - 29cqw); } .fs-916 .fs-cap { top: 60%; width: 66%; } .fs-11 .fs-scr { inset: 14% 9% 25%; } .fs-11 .fs-cam { width: 24cqh; height: 24cqh; right: 5%; bottom: 5%; } .fs-11 .fs-cap { bottom: 9%; width: 44%; } .fs-45 .fs-scr { inset: 14% 7% 32%; } .fs-45 .fs-cam { width: 22cqh; height: 22cqh; left: 50%; bottom: 5%; margin-left: -11cqh; } .fs-45 .fs-cap { bottom: 29%; width: 52%; transform: translate(-50%, 50%); } @media (max-width: 720px) { .fmt-flow { gap: 48px; } .fmt-beams { display: none; } .fmt-src { width: min(260px, 72%); } .fmt-cards { flex-wrap: wrap; align-items: flex-end; gap: 22px 12px; } .fmt-169 { flex: 1 1 100%; } .fmt-169 .fmt-box { width: 100%; height: auto; } .fmt-916 .fmt-box, .fmt-11 .fmt-box, .fmt-45 .fmt-box { height: min(128px, 33vw); } .fmt-lbl { font-size: .82rem; } } /* ---------- Bento ---------- */ .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--card); border: 1px solid var(--line); transition: border-color .3s; } .tile::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s; pointer-events: none; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(143, 176, 255, .14), transparent 60%); } .tile:hover { border-color: rgba(143, 176, 255, .28); } .tile:hover::before { opacity: 1; } .t-wide { grid-column: span 2; } .tile h3 { margin-bottom: 8px; font-size: 1.12rem; letter-spacing: -.01em; } .tile p { color: var(--text-3); font-size: .95rem; line-height: 1.55; } .tag { align-self: flex-start; margin-bottom: 10px; padding: 5px 9px; border-radius: 999px; font: 600 .68rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; } .tag-rec { color: #ff9fb2; background: rgba(255, 95, 130, .13); } .tag-edit { color: #a9c1ff; background: rgba(91, 140, 255, .14); } .tag-exp { color: #7ff0db; background: rgba(46, 230, 197, .13); } @media (max-width: 1024px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .bento { grid-template-columns: minmax(0, 1fr); } .t-wide { grid-column: auto; } } .viz { position: relative; height: 124px; margin-bottom: 20px; overflow: hidden; border-radius: 14px; container-type: size; background: linear-gradient(180deg, #0e1429, #0a0f1f); border: 1px solid var(--line); } kbd { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; color: #e9edff; font: 600 .8rem/1 var(--body); background: linear-gradient(180deg, #252e4a, #161c31); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .35); } /* record */ .vr-desk { position: absolute; inset: 10px 10px 40px; overflow: hidden; border-radius: 8px; background: radial-gradient(120% 110% at 0 0, #243061, #12182d 60%); } .vr-win { position: absolute; display: flex; flex-direction: column; gap: 5px; padding: 14px 8px 8px; border-radius: 5px; background: #1a2138; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); } .vr-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 5px 5px 0 0; background: #242c48; } .vr-win i { height: 5px; border-radius: 9px; background: #2d3653; } .vr-win i:first-child { width: 60%; background: rgba(91, 140, 255, .75); } .vr-w1 { left: 6%; top: 12%; width: 44%; height: 74%; } .vr-w2 { left: 56%; top: 22%; width: 36%; height: 56%; } .vr-sel { position: absolute; inset: 3px; border: 2px dashed #ff6b8a; border-radius: 6px; box-shadow: 0 0 0 999px rgba(4, 6, 14, .42); animation: vrSel 7.5s var(--ease-io) infinite; } .vr-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 7.5s infinite; } .vr-modes { position: absolute; left: 10px; bottom: 9px; display: flex; gap: 6px; } .vr-modes span { padding: 5px 10px; border-radius: 99px; color: var(--text-3); background: rgba(255, 255, 255, .05); font-size: .72rem; font-weight: 600; animation: vrMode 7.5s infinite; } .vr-modes span:nth-child(2) { animation-delay: 2.5s; } .vr-modes span:nth-child(3) { animation-delay: 5s; } .vr-rec { position: absolute; right: 12px; bottom: 13px; display: inline-flex; align-items: center; gap: 6px; color: #ff9fb2; font: 700 .7rem/1 var(--body); letter-spacing: .08em; } .vr-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; animation: pulse 1.2s ease-in-out infinite; } @keyframes vrSel { 0%, 26% { inset: 3px; } 33%, 59% { inset: 9% 48% 10% 4%; } 66%, 92% { inset: 26% 12% 28% 58%; } 100% { inset: 3px; } } @keyframes vrMode { 0%, 30% { color: #fff; background: rgba(255, 107, 138, .24); } 33.4%, 100% { color: var(--text-3); background: rgba(255, 255, 255, .05); } } @keyframes flash { 0%, 95% { opacity: 0; } 96.5% { opacity: .28; } 100% { opacity: 0; } } @keyframes pulse { 50% { opacity: .35; } } /* webcam bubble */ .viz-cam { background: linear-gradient(135deg, #131a33, #0c1122); } .vc-lines { position: absolute; inset: 16px; display: flex; flex-direction: column; gap: 9px; } .vc-lines i { height: 8px; border-radius: 9px; background: #1f2742; } .vc-lines i:nth-child(1) { width: 50%; background: rgba(91, 140, 255, .55); } .vc-lines i:nth-child(2) { width: 82%; } .vc-lines i:nth-child(3) { width: 66%; } .vc-lines i:nth-child(4) { width: 74%; } .vc-bubble { --ring: 3px; left: 0; top: 0; width: 62px; height: 62px; transform: translate(calc(100cqw - 76px), calc(100cqh - 76px)); animation: vcDrag 9s var(--ease-io) infinite; } .vc-tag { position: absolute; left: 12px; bottom: 11px; padding: 4px 9px; border-radius: 99px; color: #c9d4ff; background: rgba(91, 140, 255, .16); font-size: .7rem; font-weight: 600; } @keyframes vcDrag { 0%, 22% { transform: translate(calc(100cqw - 76px), calc(100cqh - 76px)); } 33%, 55% { transform: translate(14px, 12px); } 66%, 88% { transform: translate(calc(100cqw - 76px), 12px); } 100% { transform: translate(calc(100cqw - 76px), calc(100cqh - 76px)); } } /* sound */ .viz-snd { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 16px; } .vs-row { display: flex; align-items: center; gap: 12px; color: #9fb5ff; } .vs-row .ico { width: 20px; height: 20px; } .vs-row em { width: 28px; text-align: right; color: var(--text-3); font-size: .7rem; font-style: normal; font-weight: 600; } .vs-bars { flex: 1; display: flex; align-items: center; gap: 4px; height: 30px; } .vs-bars i { flex: 1; height: 100%; border-radius: 3px; background: linear-gradient(180deg, #2ee6c5, #5b8cff); transform: scaleY(.45); animation: eq 1s ease-in-out infinite alternate; } .vs-mic { color: #ff9ccb; } .vs-mic .vs-bars i { background: linear-gradient(180deg, #ff8fc0, #8b5cf6); } .vs-bars i:nth-child(2n) { animation-duration: .8s; } .vs-bars i:nth-child(3n) { animation-duration: .65s; animation-delay: -.3s; } .vs-bars i:nth-child(4n) { animation-delay: -.55s; } .vs-bars i:nth-child(5n) { animation-duration: 1.2s; animation-delay: -.2s; } .vs-mic .vs-bars i:nth-child(odd) { animation-delay: -.4s; } @keyframes eq { from { transform: scaleY(.16); } to { transform: scaleY(1); } } /* shortcuts */ .viz-keys { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .vk-caps { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-weight: 600; } .vk-caps kbd { animation: keyPress 4s infinite; } .vk-caps kbd:nth-of-type(2) { animation-delay: .1s; } .vk-caps kbd:nth-of-type(3) { animation-delay: .2s; } .vk-state { position: relative; width: 124px; height: 28px; } .vk-state > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 99px; font-size: .78rem; font-weight: 600; } .vk-rec { color: #ff9fb2; background: rgba(255, 77, 109, .15); animation: stA 8s infinite; } .vk-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; } .vk-pause { color: var(--amber); background: rgba(246, 196, 83, .14); opacity: 0; animation: stB 8s infinite; } .vk-pause i { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } @keyframes keyPress { 0%, 8% { transform: none; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .35); } 12%, 22% { transform: translateY(2px); background: linear-gradient(180deg, #33406d, #212a4d); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .35); } 28%, 100% { transform: none; } } @keyframes stA { 0%, 12% { opacity: 1; } 14%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } } @keyframes stB { 0%, 12% { opacity: 0; } 14%, 62% { opacity: 1; } 64%, 100% { opacity: 0; } } /* speaker notes */ .viz-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px 12px; } .vn-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .vn-lbl { color: var(--text-3); font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .vn-screen { position: relative; flex: 1; overflow: hidden; border-radius: 8px; background: radial-gradient(120% 100% at 0 0, #243061, #12182d 65%); } .vn-note { position: absolute; right: 8%; top: 12%; width: 62%; height: 64%; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 6px; background: #fff3bd; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); animation: noteBob 6s ease-in-out infinite; } .vn-note i { flex: none; height: 4px; border-radius: 9px; background: #8a7a3c; opacity: .6; } .vn-note i:nth-child(odd) { width: 86%; } .vn-note i:nth-child(even) { width: 64%; } .vn-ghost { position: absolute; right: 8%; top: 12%; width: 62%; height: 64%; border-radius: 6px; border: 1.5px dashed rgba(255, 255, 255, .22); } .vn-rec { position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; animation: pulse 1.2s ease-in-out infinite; } @keyframes noteBob { 50% { transform: translateY(-3px); } } /* draw + ripples */ .viz-draw { background: radial-gradient(120% 100% at 0 0, #1f2a55, #0e1328 65%); } .vd-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .vd-btn { fill: #5b8cff; } .vd-ink, .vd-arrow { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .vd-ink { stroke: #ff5fa2; animation: draw1 5s var(--ease-io) infinite; } .vd-arrow { stroke: #2ee6c5; animation: draw2 5s var(--ease-io) infinite; } .vd-rip { fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: rip 5s ease-out infinite; } .vd-rip2 { animation-delay: .18s; } @keyframes draw1 { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 38%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes draw2 { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 60%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes rip { 0%, 63% { opacity: 0; transform: scale(.2); } 65% { opacity: .95; transform: scale(.25); } 80%, 100% { opacity: 0; transform: scale(1.6); } } /* trim + pauses */ .viz-trim { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 16px; } .vt-track { display: flex; height: 34px; overflow: hidden; border-radius: 8px; } .vt-track i { display: block; height: 100%; } .vt-track i + i { box-shadow: inset 2px 0 0 #0a0f1f; } .vt-a { flex: 3; background: linear-gradient(90deg, #2ee6c5, #5b8cff); } .vt-b { flex: 4; background: linear-gradient(90deg, #5b8cff, #8b5cf6); } .vt-c { flex: 2.4; background: linear-gradient(90deg, #8b5cf6, #ff5fa2); } .vt-gap { --g: 16%; flex: 0 0 var(--g); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 5px, rgba(255, 255, 255, .04) 5px 10px); animation: gapCollapse 5s var(--ease-io) infinite; } .vt-gap2 { --g: 10%; animation-delay: .25s; } .vt-lbl { align-self: flex-start; padding: 4px 9px; border-radius: 99px; color: #7ff0db; background: rgba(46, 230, 197, .13); font-size: .72rem; font-weight: 600; opacity: 0; animation: lblFade 5s infinite; } @keyframes gapCollapse { 0%, 30% { flex-basis: var(--g); opacity: 1; } 55%, 85% { flex-basis: 0%; opacity: 0; } 100% { flex-basis: var(--g); opacity: 1; } } @keyframes lblFade { 0%, 42% { opacity: 0; } 55%, 85% { opacity: 1; } 100% { opacity: 0; } } /* filler words */ .viz-filler { display: grid; place-items: center; padding: 0 14px; } .vf-line { color: var(--text); font: 600 1.18rem/1.4 var(--display); text-align: center; } .vf-line span { display: inline-block; } .vf-x { position: relative; max-width: 4em; overflow: hidden; vertical-align: bottom; white-space: nowrap; color: #ff8fa3; animation: filler 5s var(--ease-io) infinite; } .vf-x::after { content: ""; position: absolute; left: 0; right: .3em; top: 55%; height: 2px; background: #ff5f7e; transform: scaleX(0); transform-origin: left; animation: strike 5s var(--ease-io) infinite; } .vf-x2, .vf-x2::after { animation-delay: .2s; } @keyframes filler { 0%, 40% { max-width: 4em; opacity: 1; } 58%, 86% { max-width: 0; opacity: 0; } 100% { max-width: 4em; opacity: 1; } } @keyframes strike { 0%, 14% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } } /* edit by text */ .viz-text { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 16px; } .vx-line { color: var(--text); font-size: 1rem; line-height: 1.5; } .vx-del { display: inline-block; max-width: 5em; overflow: hidden; vertical-align: bottom; white-space: nowrap; border-radius: 4px; animation: vxSel 5s var(--ease-io) infinite; } .vx-strip { display: flex; height: 22px; overflow: hidden; border-radius: 6px; } .vx-strip i { display: block; flex: 1; background: linear-gradient(90deg, #5b8cff, #8b5cf6); } .vx-strip i:first-child { flex: 2.2; background: linear-gradient(90deg, #2ee6c5, #5b8cff); } .vx-strip i:last-child { flex: 2.6; background: linear-gradient(90deg, #8b5cf6, #ff5fa2); } .vx-strip .vx-cut { flex: 0 0 18%; background: #3b4a78; box-shadow: inset 2px 0 0 #0a0f1f, inset -2px 0 0 #0a0f1f; animation: vxCut 5s var(--ease-io) infinite; } @keyframes vxSel { 0%, 14% { max-width: 5em; opacity: 1; background: transparent; } 22%, 40% { max-width: 5em; opacity: 1; background: rgba(91, 140, 255, .55); } 56%, 86% { max-width: 0; opacity: 0; background: rgba(91, 140, 255, .55); } 100% { max-width: 5em; opacity: 1; background: transparent; } } @keyframes vxCut { 0%, 14% { flex-basis: 18%; opacity: 1; background: #3b4a78; } 22%, 40% { flex-basis: 18%; opacity: 1; background: rgba(91, 140, 255, .8); } 56%, 86% { flex-basis: 0%; opacity: 0; } 100% { flex-basis: 18%; opacity: 1; background: #3b4a78; } } /* blur / pixelate */ .viz-blur { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 16px; } .vb-card { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #141b31; border: 1px solid var(--line); } .vb-lbl { width: 38px; color: var(--text-3); font-size: .72rem; } .vb-val { position: relative; flex: 1; min-width: 0; height: 20px; overflow: hidden; border-radius: 4px; color: var(--text); font-size: .88rem; line-height: 20px; } .vb-txt { display: block; white-space: nowrap; animation: vbBlur 6s infinite; } .vb-pix { position: absolute; inset: 0; opacity: 0; animation: vbPix 6s infinite; background: linear-gradient(90deg, rgba(20, 27, 49, .45) 50%, transparent 50%) 0 0 / 12px 100%, linear-gradient(0deg, rgba(255, 255, 255, .12) 50%, transparent 50%) 0 0 / 100% 10px, linear-gradient(90deg, #8e9bc4, #5f6c93 18%, #aab4d6 34%, #6d7aa3 52%, #98a4c9 68%, #56638a 84%, #8390b8); } .vb-card2 .vb-txt, .vb-card2 .vb-pix { animation-delay: .35s; } @keyframes vbBlur { 0%, 18% { filter: none; opacity: 1; } 26%, 48% { filter: blur(5px); opacity: 1; } 52%, 94% { filter: blur(5px); opacity: 0; } 100% { filter: none; opacity: 1; } } @keyframes vbPix { 0%, 50% { opacity: 0; } 54%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } } /* show keys */ .viz-kshow { background: radial-gradient(120% 100% at 50% 0, #1d274f, #0c1122 70%); } .viz-kshow::before { content: ""; position: absolute; left: 16px; right: 16px; top: 18px; height: 8px; border-radius: 9px; background: #1f2742; box-shadow: 0 16px 0 #1a2138, 0 32px 0 #1a2138; } .vks-keys { position: absolute; left: 50%; bottom: 14px; display: flex; gap: 6px; padding: 7px; border-radius: 12px; background: rgba(5, 8, 18, .8); border: 1px solid rgba(255, 255, 255, .12); transform: translateX(-50%); animation: ksA 6s var(--ease) infinite; } .vks-2 { opacity: 0; animation-name: ksB; } @keyframes ksA { 0%, 4% { opacity: 0; transform: translate(-50%, 10px); } 10%, 40% { opacity: 1; transform: translate(-50%, 0); } 46%, 100% { opacity: 0; transform: translate(-50%, 6px); } } @keyframes ksB { 0%, 52% { opacity: 0; transform: translate(-50%, 10px); } 58%, 88% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; transform: translate(-50%, 6px); } } /* volume + music ducking */ .viz-audio { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 14px; } .va-lane { display: flex; align-items: center; gap: 10px; } .va-lane > span { width: 42px; color: var(--text-3); font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .va-w { flex: 1; display: flex; align-items: center; gap: 3px; height: 34px; } .va-w i { flex: 1; height: 100%; border-radius: 2px; } .va-voice i { background: #33c481; transform: scaleY(.08); } .va-voice i:nth-child(n+3):nth-child(-n+8), .va-voice i:nth-child(n+12):nth-child(-n+16) { transform: scaleY(.72); animation: vaVoice .9s ease-in-out infinite alternate; } .va-voice i:nth-child(even) { animation-delay: -.45s; } .va-music i { background: #8b5cf6; transform: scaleY(.62); animation: vaMusic 1.5s ease-in-out infinite alternate; } .va-music i:nth-child(n+3):nth-child(-n+8), .va-music i:nth-child(n+12):nth-child(-n+16) { transform: scaleY(.2); animation-name: vaDuck; background: #6a4bc0; } .va-music i:nth-child(3n) { animation-delay: -.7s; } @keyframes vaVoice { from { transform: scaleY(.6); } to { transform: scaleY(.82); } } @keyframes vaMusic { from { transform: scaleY(.5); } to { transform: scaleY(.72); } } @keyframes vaDuck { from { transform: scaleY(.14); } to { transform: scaleY(.24); } } /* clips, pictures, voiceover */ .viz-insert { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 16px; } .vi-track { display: flex; align-items: center; height: 30px; } .vi-track > i { flex: 1; height: 100%; border-radius: 6px 0 0 6px; background: linear-gradient(90deg, #2ee6c5, #5b8cff); } .vi-track > i:last-child { border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #8b5cf6, #ff5fa2); } .vi-clip { display: grid; place-items: center; flex: 0 0 44px; height: 100%; overflow: hidden; border-radius: 4px; background: var(--amber); color: #3a2a05; animation: viClip 5s var(--ease-io) infinite; } .vi-clip .ico { width: 16px; height: 16px; } .vi-voice { display: flex; align-items: center; gap: 8px; min-width: 0; color: #ff9ccb; font-size: .86rem; } .vi-voice .ico { width: 18px; height: 18px; } .vi-type { max-width: 26ch; overflow: hidden; white-space: nowrap; color: var(--text); border-right: 2px solid #9db8ff; animation: type 5s steps(26) infinite; } @keyframes viClip { 0%, 14% { flex-basis: 0; opacity: 0; transform: translateY(-24px); } 34%, 86% { flex-basis: 44px; opacity: 1; transform: none; } 100% { flex-basis: 0; opacity: 0; } } @keyframes type { 0%, 10% { max-width: 0; } 58%, 90% { max-width: 26ch; } 100% { max-width: 0; } } /* export */ .viz-export { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 18px; } .ve-chips { display: flex; flex-wrap: wrap; gap: 8px; } .ve-chips span { padding: 6px 12px; border-radius: 99px; color: var(--text-2); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; animation: veChip 9s infinite; } .ve-chips span:nth-child(2) { animation-delay: 1.5s; } .ve-chips span:nth-child(3) { animation-delay: 3s; } .ve-chips span:nth-child(4) { animation-delay: 4.5s; } .ve-chips span:nth-child(5) { animation-delay: 6s; } .ve-chips span:nth-child(6) { animation-delay: 7.5s; } .ve-row { display: flex; align-items: center; gap: 14px; } .ve-bar { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .07); } .ve-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--grad); transform-origin: left; animation: veBar 3s var(--ease-io) infinite; } .ve-done { display: inline-flex; align-items: center; gap: 6px; color: #5fdca2; font-size: .8rem; font-weight: 600; white-space: nowrap; animation: veDone 3s infinite; } .ve-done .ico { width: 14px; height: 14px; stroke-width: 2.6; } @keyframes veChip { 0%, 14% { color: #fff; background: rgba(46, 230, 197, .18); border-color: rgba(46, 230, 197, .5); } 17%, 100% { color: var(--text-2); background: rgba(255, 255, 255, .05); border-color: var(--line); } } @keyframes veBar { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } } @keyframes veDone { 0%, 68% { opacity: 0; } 75%, 100% { opacity: 1; } } /* ---------- Private by design ---------- */ .private::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(45% 45% at 78% 50%, rgba(46, 230, 197, .1), transparent 70%); } .private-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 90px); align-items: center; } .pv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; margin-top: 36px; } .pv-list li { display: flex; align-items: flex-start; gap: 14px; } .pv-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #7ff0db; background: linear-gradient(160deg, rgba(46, 230, 197, .18), rgba(91, 140, 255, .14)); border: 1px solid rgba(46, 230, 197, .28); } .pv-ico .ico { width: 21px; height: 21px; } .pv-list h3 { margin-bottom: 4px; font-size: 1.05rem; } .pv-list p { color: var(--text-3); font-size: .94rem; } .orbit { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-inline: auto; } .orbit-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(143, 176, 255, .2); } .or1 { inset: 0; border-style: dashed; } .or2 { inset: 15%; border-color: rgba(143, 176, 255, .26); } .or3 { inset: 29%; border-color: rgba(143, 176, 255, .3); background: radial-gradient(circle, rgba(91, 140, 255, .22), transparent 70%); } .orbit-core { position: absolute; inset: 36%; display: grid; place-items: center; align-content: center; gap: 6px; border-radius: 50%; color: #fff; font-size: .88rem; font-weight: 600; background: radial-gradient(circle at 35% 30%, #1d2852, #0b1024 70%); box-shadow: 0 0 70px rgba(91, 140, 255, .4), inset 0 0 30px rgba(46, 230, 197, .16); } .orbit-core::before { content: ""; position: absolute; inset: -2px; padding: 2px; border-radius: 50%; background: conic-gradient(from var(--a), #2ee6c5, #5b8cff, #8b5cf6, #ff5fa2, #2ee6c5); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 8s linear infinite; } .orbit-core .ico { width: 34px; height: 34px; stroke-width: 1.5; } .orbit-spin { position: absolute; inset: 15%; animation: orbit 28s linear infinite; } .ob { position: absolute; width: 0; height: 0; display: flex; align-items: center; justify-content: center; } .ob1 { left: 67.1%; top: 3%; } .ob2 { left: 97%; top: 67.1%; } .ob3 { left: 32.9%; top: 97%; } .ob4 { left: 3%; top: 32.9%; } .ob > span { flex: none; padding: 7px 12px; border-radius: 999px; color: #dfe6ff; background: rgba(12, 17, 34, .92); border: 1px solid rgba(255, 255, 255, .15); font: 600 .82rem/1 var(--body); white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8); animation: orbit 28s linear infinite reverse; } .orbit-cloud { position: absolute; top: 2%; right: -2%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: #ffc7d6; background: rgba(255, 95, 130, .1); border: 1px solid rgba(255, 95, 130, .32); font-size: .82rem; font-weight: 600; } .orbit-cloud .ico { width: 18px; height: 18px; } @keyframes orbit { to { transform: rotate(360deg); } } @media (max-width: 960px) { .private-grid { grid-template-columns: minmax(0, 1fr); } .orbit { width: min(380px, 100%); } } @media (max-width: 560px) { .pv-list { grid-template-columns: minmax(0, 1fr); } .orbit-cloud { right: 0; } } /* ---------- FAQ ---------- */ .faq-list { display: grid; gap: 12px; max-width: 820px; margin-inline: auto; } .faq-list details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .25s, background-color .25s; } .faq-list details[open] { border-color: rgba(143, 176, 255, .35); background: linear-gradient(180deg, rgba(91, 140, 255, .07), transparent), var(--card); } .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-radius: 18px; cursor: pointer; list-style: none; color: var(--text); font: 600 1.06rem/1.4 var(--display); letter-spacing: -.01em; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; transition: transform .3s var(--ease); background: rgba(255, 255, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23c9d3f5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; } .faq-list details[open] summary::after { transform: rotate(180deg); } .faq-list summary:hover::after { background-color: rgba(255, 255, 255, .1); } .faq-a { padding: 0 22px 22px; color: var(--text-2); } @supports (interpolate-size: allow-keywords) { .faq-list { interpolate-size: allow-keywords; } .faq-list details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; } .faq-list details[open]::details-content { height: auto; } } /* ---------- Final CTA ---------- */ .cta { padding-top: clamp(24px, 4vw, 60px); padding-bottom: clamp(56px, 8vw, 100px); } .cta-card { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 8vw, 110px) clamp(20px, 5vw, 80px); border-radius: 32px; text-align: center; background: radial-gradient(100% 120% at 50% 0%, #141c3c, #0a0e1c 65%); border: 1px solid var(--line-2); } .cta-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cta-glow i { position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; opacity: .6; } .cta-glow i:nth-child(1) { left: -12%; top: -38%; background: radial-gradient(circle, rgba(46, 230, 197, .5), transparent 65%); animation: blob1 16s ease-in-out infinite alternate; } .cta-glow i:nth-child(2) { right: -16%; top: -18%; background: radial-gradient(circle, rgba(255, 95, 162, .42), transparent 65%); animation: blob2 19s ease-in-out infinite alternate; } .cta-glow i:nth-child(3) { left: 22%; bottom: -70%; background: radial-gradient(circle, rgba(91, 140, 255, .55), transparent 65%); animation: blob3 22s ease-in-out infinite alternate; } @keyframes blob1 { to { transform: translate(20%, 25%) scale(1.15); } } @keyframes blob2 { to { transform: translate(-22%, 18%) scale(.9); } } @keyframes blob3 { to { transform: translate(-12%, -20%) scale(1.12); } } .cta-mark { width: 84px; height: 84px; margin: 0 auto 26px; filter: drop-shadow(0 12px 30px rgba(91, 140, 255, .55)); animation: floatY 6s ease-in-out infinite; } @keyframes floatY { 50% { transform: translateY(-8px); } } .cta-card h2 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); } .cta-card .lead { max-width: 600px; margin-inline: auto; } .cta-btns { margin-top: 40px; } .cta-note { margin-top: 18px; color: var(--text-3); font-size: .9rem; } /* ---------- Footer ---------- */ .footer { position: relative; padding: 72px 0 36px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .015), transparent); } .foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 40px; } .foot-brand p { max-width: 34ch; margin-top: 14px; color: var(--text-3); font-size: .95rem; } .foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .foot-h { margin-bottom: 16px; color: var(--text-3); font: 600 .76rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; } .foot-nav ul, .foot-oss ul { display: grid; gap: 10px; } .footer a { color: var(--text-2); transition: color .2s; } .footer a:hover { color: #fff; } .foot-oss li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } .foot-oss li span { padding: 4px 7px; border-radius: 6px; color: #8fe9da; background: rgba(46, 230, 197, .1); font: 600 .72rem/1 var(--mono); } .placeholder { color: var(--text-3); font-style: italic; } .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .88rem; } .foot-bottom a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 560px) { .foot-top { grid-template-columns: minmax(0, 1fr); } } /* ---------- Simple pages (privacy, 404) ---------- */ .page { position: relative; padding: 140px 0 90px; } .page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 20% 0%, rgba(46, 230, 197, .14), transparent 70%), radial-gradient(50% 60% at 85% 0%, rgba(139, 92, 246, .16), transparent 70%); } .nav-simple { background: rgba(7, 10, 20, .74); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .nav-back { margin-left: auto; } .prose { max-width: 740px; margin: 0 auto; } .prose h1 { margin-bottom: 12px; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.035em; } .prose .updated { margin-bottom: 36px; color: var(--text-3); } .prose h2 { margin: 40px 0 12px; font-size: 1.4rem; letter-spacing: -.02em; } .prose p, .prose li { color: var(--text-2); font-size: 1.05rem; } .prose p + p { margin-top: 12px; } .prose ul { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.3em; list-style: disc; } .prose a { color: #a9c1ff; text-decoration: underline; text-underline-offset: 3px; } .prose .summary { display: grid; gap: 10px; padding: 22px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); } .prose .summary p { display: flex; gap: 10px; align-items: flex-start; margin: 0; } .prose .summary .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--green); stroke-width: 2.4; } .notfound { text-align: center; } .notfound .lead { max-width: 480px; margin-inline: auto; } .notfound .btn { margin-top: 32px; } /* decorative loops pause while their section is off-screen (set by main.js) */ .paused, .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; } /* ---------- Scroll reveal ---------- */ @media (prefers-reduced-motion: no-preference) { html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--rd, 0s); } html.js .reveal.in { opacity: 1; transform: none; } } /* ---------- Reduced motion: a calm, static page ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .mock-tilt { transform: none !important; } .m-cap span:nth-child(3) { color: #2ee6c5; } .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-track { width: auto; } .marquee ul { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding-inline: 16px; } .marquee ul + ul { display: none; } .steps::after { display: none; } .vt-gap { flex-basis: 0; } .vf-x::after { transform: scaleX(1); } .vb-txt { filter: blur(5px); } .vks-2 { display: none; } .vk-pause { opacity: 0; } }