/*
 * QuQi website: the v2 brand tokens (Ink, Paper, Carrot, Graphite; Geist and
 * JetBrains Mono) and every component class the design canvas uses. Ported
 * 1:1 from the canvas, so a server-rendered page looks exactly like its
 * artboard. Dark is the default; [data-theme="light"] redefines the tokens.
 */
body{margin:0;background:#0B0B0D}
.qq-root{--background:#0B0B0D;--foreground:#F4F4F1;--card:#26262B;--popover:#2C2C32;--primary:#F4F4F1;--primary-foreground:#0B0B0D;--secondary:#2C2C32;--muted:#1A1A1E;--muted-foreground:#8D8D94;--accent:#34343A;--brand:#FF6A3D;--brand-foreground:#0B0B0D;--brand-muted:rgba(255,106,61,.16);--success:#2ED3A0;--warning:#FFA41B;--info:#4FC3F7;--border:rgba(244,244,241,.09);--input:rgba(244,244,241,.14);--ring:rgba(255,106,61,.6);--sidebar:#0B0B0D;--sidebar-accent:#1C1C20;--bubble:#34343A;--composer:#26262B;--body:#C9C9CC;--nav-bg:rgba(11,11,13,.78);--terminal:#26262B;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;background:var(--background);color:var(--foreground);font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;color-scheme:dark}
.qq-root[data-theme="light"]{--background:#F4F4F1;--foreground:#0B0B0D;--card:#FFFFFF;--popover:#FFFFFF;--primary:#0B0B0D;--primary-foreground:#F4F4F1;--secondary:#EAEAE6;--muted:#EDEDE9;--muted-foreground:#5A5A62;--accent:#EAEAE6;--brand-muted:rgba(255,106,61,.12);--success:#12805F;--warning:#A45F00;--info:#2F63D9;--border:rgba(11,11,13,.09);--input:rgba(11,11,13,.16);--sidebar:#F4F4F1;--sidebar-accent:#EAEAE6;--bubble:#EAEAE6;--composer:#FFFFFF;--body:#26262B;--nav-bg:rgba(244,244,241,.82);color-scheme:light}
.qq-root *{box-sizing:border-box}
.qq-root a{color:inherit}
.qq-root :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.qq-wrap{width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px}
.qq-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.qq-navlink{color:var(--muted-foreground);text-decoration:none;transition:color .15s}
.qq-navlink:hover{color:var(--foreground)}
.qq-link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--input)}
.qq-link:hover{text-decoration-color:currentColor}
.qq-press{cursor:pointer;transition:opacity .15s,transform .15s}
.qq-press:hover{opacity:.86}
.qq-press:active{transform:translateY(1px)}
.qq-row{cursor:pointer;transition:background-color .15s}
.qq-row:hover{background-color:var(--sidebar-accent) !important}
.qq-field:focus-within{box-shadow:0 0 0 3px var(--ring)}
.qq-field input:focus{outline:none}
.qq-field input::placeholder{color:var(--muted-foreground)}
.qq-show-sm{display:none !important}
@media (max-width:860px){.qq-hide-sm{display:none !important}
.qq-show-sm{display:inline-flex !important}
.qq-sidebar{flex-basis:100% !important;max-width:none !important;border-right:0 !important;border-bottom:1px solid var(--border)}
.qq-sidebar-list{flex-direction:row !important;overflow-x:auto}
.qq-sidebar-list .qq-row{flex:0 0 auto;width:auto !important}
.qq-preview{display:none !important}
}
@media (max-width:640px){.qq-wrap{padding-left:16px;padding-right:16px}
}
.qq-prose{font-size:18px;line-height:1.75;color:var(--body)}
.qq-prose h2{font-size:30px;line-height:1.2;letter-spacing:-0.035em;color:var(--foreground);margin:56px 0 16px;font-weight:600}
.qq-prose h3{font-size:21px;line-height:1.3;letter-spacing:-0.02em;color:var(--foreground);margin:36px 0 12px;font-weight:600}
.qq-prose p{margin:0 0 22px}
.qq-prose ul,.qq-prose ol{margin:0 0 22px;padding-left:22px}
.qq-prose li{margin:8px 0}
.qq-prose strong{color:var(--foreground);font-weight:600}
.qq-prose code{font-family:var(--mono);font-size:.86em;background:var(--muted);border:1px solid var(--border);padding:1px 6px;border-radius:6px}
.qq-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--input)}
.qq-card{transition:border-color .15s,background-color .15s;text-decoration:none;color:inherit}
.qq-card:hover{border-color:var(--input) !important}
.qq-table{width:100%;border-collapse:collapse;font-size:14px}
.qq-table th,.qq-table td{padding:14px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.qq-table th{font-weight:500;color:var(--muted-foreground);font-size:13px}
.qq-table td:first-child{color:var(--body)}
.qq-scroll-x{overflow-x:auto}
@media (max-width:860px){.qq-sticky-off{position:static !important}
}
.qq-root nav[aria-label="Main"] > a{display:inline-flex;align-items:center}
.qq-drop{display:flex;align-items:stretch}
.qq-drop-btn{display:inline-flex;align-items:center;gap:4px}
.qq-chev{transition:transform .15s}
.qq-drop-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:6px;z-index:50}
.qq-drop:hover .qq-drop-panel,.qq-drop:focus-within .qq-drop-panel{display:block;animation:qq-menu .16s ease both}
.qq-drop:hover .qq-drop-btn,.qq-drop:focus-within .qq-drop-btn{color:var(--foreground)}
.qq-drop:hover .qq-chev,.qq-drop:focus-within .qq-chev{transform:rotate(180deg)}
.qq-menu-row{transition:background-color .12s,border-color .12s}
.qq-menu-row:hover,.qq-menu-row:focus-visible{background-color:var(--secondary) !important}
@keyframes qq-menu{from{opacity:0;margin-top:6px}
to{opacity:1;margin-top:0}
}
@keyframes qq-shimmer{from{background-position:100% 0}
to{background-position:-100% 0}
}
.qq-shimmer{background-image:linear-gradient(90deg,var(--muted-foreground) 0%,var(--muted-foreground) 40%,var(--foreground) 50%,var(--muted-foreground) 60%,var(--muted-foreground) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:qq-shimmer 1.8s linear infinite}
.qq-acc-dots,.qq-acc-tick,.qq-acc-ping{display:none}
.qq-face .qq-eye{transform-box:fill-box;transform-origin:50% 50%;animation:qq-blink 4.6s ease-in-out infinite}
.qq-d2 .qq-eye{animation-delay:-1.4s}
.qq-d3 .qq-eye{animation-delay:-2.7s}
.qq-d4 .qq-eye{animation-delay:-3.6s}
.qq-ear-l,.qq-ear-r{transform-box:fill-box;transform-origin:50% 86%}
.qq-s-work .qq-body{animation:qq-bob 1.6s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-work .qq-ear-l{animation:qq-ear-l 1.6s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-work .qq-ear-r{animation:qq-ear-r 1.6s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-search .qq-eyes{animation:qq-look 2.4s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-search .qq-ear-l{animation:qq-ear-l 2.4s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-think .qq-acc-dots,.qq-s-type .qq-acc-dots{display:inline}
.qq-s-think .qq-eyes{transform:translate(-4px,-5px)}
.qq-s-type .qq-body{animation:qq-bob .8s cubic-bezier(.4,0,.2,1) infinite}
.qq-acc-dots circle{animation:qq-dot 1.2s ease-in-out infinite}
.qq-acc-dots circle:nth-child(2){animation-delay:.2s}
.qq-acc-dots circle:nth-child(3){animation-delay:.4s}
.qq-s-done .qq-acc-tick{display:inline}
.qq-s-wait .qq-acc-ping{display:inline;transform-box:fill-box;transform-origin:50% 50%;animation:qq-ping 1.6s ease-in-out infinite}
.qq-s-hello .qq-ear-r{animation:qq-wave 1.6s cubic-bezier(.4,0,.2,1) infinite}
.qq-s-hello .qq-body{animation:qq-bob 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes qq-blink{0%,90%,100%{transform:scaleY(1)}
94%{transform:scaleY(.1)}
}
@keyframes qq-bob{0%,100%{transform:translateY(0)}
50%{transform:translateY(-2px)}
}
@keyframes qq-ear-l{0%,100%{transform:rotate(0)}
50%{transform:rotate(-8deg)}
}
@keyframes qq-ear-r{0%,100%{transform:rotate(0)}
50%{transform:rotate(8deg)}
}
@keyframes qq-wave{0%,100%{transform:rotate(0)}
25%{transform:rotate(14deg)}
50%{transform:rotate(-2deg)}
75%{transform:rotate(12deg)}
}
@keyframes qq-look{0%,100%{transform:translateX(-4px)}
50%{transform:translateX(4px)}
}
@keyframes qq-dot{0%,100%{opacity:.2}
30%{opacity:1}
}
@keyframes qq-ping{0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(.7)}
}
@keyframes qq-cursor{0%,49%{opacity:1}
50%,100%{opacity:0}
}
.qq-cursor{animation:qq-cursor 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.qq-root *{animation:none !important;transition:none !important}
}

/* Widget states. site.js only flips these attributes; every state is in the HTML. */
[data-on="false"] .qq-if-on,[data-on="true"] .qq-if-off{display:none !important}
[data-cycle="monthly"] .qq-if-yearly,[data-cycle="yearly"] .qq-if-monthly{display:none !important}
[data-approved="false"] .qq-if-approved,[data-approved="true"] .qq-if-pending{display:none !important}
[role="switch"][aria-checked="true"]{background:var(--primary) !important;justify-content:flex-end !important}
[role="switch"][aria-checked="true"]>span{background:var(--primary-foreground) !important}
.qq-row[aria-pressed="true"]{background-color:var(--sidebar-accent) !important}
.qq-chip[aria-selected="true"]{background:var(--secondary) !important;border-color:var(--input) !important}
.qq-seg[aria-pressed="true"],.qq-ind[aria-pressed="true"]{background:var(--secondary) !important;color:var(--foreground) !important}
#qq-mobile-menu:not([hidden]){display:flex}
details.qq-faq>summary{list-style:none;cursor:pointer}
details.qq-faq>summary::-webkit-details-marker{display:none}
details.qq-faq[open] .qq-plus{transform:rotate(45deg)}
.qq-skip:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;clip:auto;margin:0;padding:10px 16px;background:var(--primary);color:var(--primary-foreground);border-radius:999px;z-index:100;text-decoration:none}
[role="radio"][aria-checked="true"]{border-color:var(--foreground) !important}
[data-qq-calc] [role="radio"][aria-checked="true"]{background:var(--secondary) !important;border-color:var(--input) !important}
[hidden]{display:none !important}
:root{color-scheme:dark}
/* Arabic (lang/ar.STYLE.md): Arabic letters in Cairo, Latin words and digits stay in Geist. No tracking
   (letter-spacing breaks joined letters), and taller lines: Arabic has deeper ascenders, descenders and dots. */
html[lang="ar"] .qq-root{font-family:"Geist","Cairo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono","Cairo",ui-monospace,monospace}
html[lang="ar"] .qq-root *{letter-spacing:0 !important}
html[lang="ar"] .qq-root :is(h1,h2,h3){line-height:1.3 !important;font-weight:700 !important}
html[lang="ar"] .qq-root main :is(p,li,dd){line-height:1.8 !important}
html[lang="ar"] .qq-root [style*="text-transform: uppercase"]{text-transform:none !important}
html[dir="rtl"] .qq-root [style*="text-align: left"]{text-align:right !important}
html[dir="rtl"] .qq-root [style*="margin-left: 40px"]{margin-left:0 !important;margin-right:40px}
html[dir="rtl"] .qq-root [style*="padding-left: 40px"]{padding-left:0 !important;padding-right:40px}
html[dir="rtl"] .qq-root [style*="margin-left: -12px"],html[dir="rtl"] .qq-root [style*="margin-left: -14px"]{margin-left:0 !important}
html[dir="rtl"] .qq-root .qq-sidebar{border-right:0 !important;border-left:1px solid var(--border)}
html[dir="rtl"] .qq-root svg:has(path[d="M5 12h14"]),html[dir="rtl"] .qq-root svg:has(path[d="m9 6 6 6-6 6"]),html[dir="rtl"] .qq-root svg:has(path[d="m15 10 5 5-5 5"]){transform:scaleX(-1)}
/* Docs: its own search bar sits under the site nav instead of replacing it. */
.qq-docs-bar>div{position:static !important}
/* Longer labels in other languages: nav items never wrap, and the bar collapses to the menu button sooner. */
.qq-root header .qq-navlink,.qq-root header .qq-press{white-space:nowrap}
/* Plain nav links stretch to the bar height like the dropdown buttons; centre their text the same way. */
.qq-root header nav>.qq-navlink{display:flex;align-items:center}
.qq-root nav[aria-label="Main"]{gap:clamp(12px,1.6vw,24px) !important}
@media (max-width:1180px){html:not([lang="en"]) .qq-root header .qq-hide-sm{display:none !important}html:not([lang="en"]) .qq-root header .qq-show-sm{display:inline-flex !important}html:not([lang="en"]) #qq-mobile-menu:not([hidden]){display:flex}}
/* ============ Home hero ============
   Plain ink, no backdrop effects. The colour comes from the crew introducing itself, one teammate
   at a time, and the demo window's top edge catches a little light. */
/* Home hero background: the capsule board (below). The rules it follows:
   1. Built from the brand kit: flat Ink, Graphite and crew colours, the bunny's own capsule shape.
   2. Content owns the contrast: the board clears the centre, so headline, CTA and speaker sit on plain ink.
   3. Colour only when it means something: crew colours as agents at work, the speaker's stay lit.
   4. No hard edges: it fades out at the borders. CSS and SVG only; still for reduced motion. */
.qq-hero{position:relative;isolation:isolate;overflow-x:clip}

/* The introductions: one teammate on stage. The bunny pops up, a typing bubble grows out of it,
   then the message replaces the dots. Bunny and bubble are centred together as one group, and the
   bubble's tail points at the bunny's head (mirrored in Arabic). */
.qq-intro{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.qq-intro-stage{list-style:none;margin:0;padding:0;position:relative;width:100%;height:172px}
.qq-intro-slide{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:4px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.qq-intro-slide[data-on]{opacity:1;visibility:visible;transition:opacity .3s}
.qq-intro-slide>svg{flex:none}
.qq-intro-slide[data-on]>svg{animation:qq-pop .45s cubic-bezier(.2,.9,.3,1.3) both}
.qq-say-wrap{position:relative;align-self:flex-end;margin-bottom:78px;text-align:start}
/* Wide screens: the bunny stays on the page's centre line and the bubble grows out to its side,
   so nothing jumps when a longer message comes next. */
@media (min-width:641px){.qq-say-wrap{position:absolute;left:calc(50% + 42px);bottom:78px;margin:0;width:max-content;max-width:420px}
[dir="rtl"] .qq-say-wrap{left:auto;right:calc(50% + 42px)}}
.qq-say,.qq-typing{position:relative;background:var(--card);border-radius:20px 20px 20px 6px}
[dir="rtl"] .qq-say,[dir="rtl"] .qq-typing{border-radius:20px 20px 6px 20px}
.qq-say::after,.qq-typing::after{content:"";position:absolute;left:-7px;bottom:0;width:14px;height:14px;background:inherit;clip-path:polygon(100% 0,100% 100%,0 100%)}
[dir="rtl"] .qq-say::after,[dir="rtl"] .qq-typing::after{left:auto;right:-7px;clip-path:polygon(0 0,100% 100%,0 100%)}
.qq-say{margin:0;max-width:420px;padding:13px 20px 14px;display:flex;flex-direction:column;gap:3px;transform-origin:0 100%}
[dir="rtl"] .qq-say{transform-origin:100% 100%}
.qq-say strong{font-size:17px;font-weight:600;color:var(--foreground);letter-spacing:-.01em}
.qq-say>span{font-size:15px;line-height:1.45;color:var(--muted-foreground)}
.qq-typing{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:5px;padding:14px 16px;opacity:0;transform-origin:0 100%}
[dir="rtl"] .qq-typing{left:auto;right:0;transform-origin:100% 100%}
.qq-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-foreground);animation:qq-dot 1s infinite}
.qq-typing i:nth-child(2){animation-delay:.15s}.qq-typing i:nth-child(3){animation-delay:.3s}
.qq-intro-slide[data-on] .qq-typing{animation:qq-typing-life 1.25s .3s both}
.qq-intro-slide[data-on] .qq-say{animation:qq-say-pop .35s 1.5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes qq-pop{from{opacity:0;transform:translateY(10px) scale(.85)}to{opacity:1;transform:none}}
@keyframes qq-typing-life{0%{opacity:0;transform:scale(.5)}18%{opacity:1;transform:scale(1)}86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes qq-say-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.qq-intro-dots{display:flex;gap:4px}
.qq-intro-dots button{display:inline-flex;padding:5px;border:0;border-radius:999px;background:transparent;cursor:pointer;opacity:.3;transition:opacity .2s,transform .2s}
.qq-intro-dots button:hover{opacity:.7}
.qq-intro-dots button[aria-current="true"]{opacity:1;transform:scale(1.15)}
.qq-intro-dots button:focus-visible{outline:2px solid var(--ring);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.qq-typing{display:none}.qq-say{opacity:1 !important}}
/* Phones: the hero is one centred column, so the speaker is too: the bubble centred on top, its
   tail pointing down at the bunny centred under it. Side by side, the pair sat low-left and
   high-right of everything else, the tail pointing into the gap. */
@media (max-width:640px){.qq-intro-stage{height:188px}
.qq-intro-slide{flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:12px}
.qq-intro-slide>svg{width:64px;height:64px}
.qq-say-wrap{align-self:center;margin:0;text-align:center}
.qq-say{max-width:min(300px,calc(100vw - 48px));padding:11px 16px 12px;border-radius:18px;align-items:center;transform-origin:50% 100%}
[dir="rtl"] .qq-say{border-radius:18px;transform-origin:50% 100%}
.qq-say::after,.qq-typing::after,[dir="rtl"] .qq-say::after,[dir="rtl"] .qq-typing::after{left:calc(50% - 7px);right:auto;bottom:-7px;clip-path:polygon(0 0,100% 0,50% 100%)}
.qq-typing,[dir="rtl"] .qq-typing{left:0;right:0;margin:0 auto;width:max-content;border-radius:18px;transform-origin:50% 100%}
.qq-say strong{font-size:15px}.qq-say>span{font-size:13.5px;text-wrap:balance}}

/* Where the work goes: the integrations' glyphs in one quiet colour. */
.qq-hero-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 20px;margin-top:4px;font-size:13px;color:var(--muted-foreground)}
.qq-hero-logos a{display:inline-flex;color:var(--muted-foreground);opacity:.7;text-decoration:none;transition:opacity .15s,color .15s}
.qq-hero-logos a:hover,.qq-hero-logos a:focus-visible{opacity:1;color:var(--foreground)}
.qq-hero-more{font-size:13px}

/* "Talk to them like teammates": all eight on one line, or two even lines of four. Never seven and one. */
.qq-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (min-width:1080px){.qq-lineup{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:640px){.qq-lineup{gap:8px}.qq-lineup>a{padding:16px 6px 12px !important;gap:10px !important;border-radius:16px !important}.qq-lineup svg{width:44px;height:44px}.qq-lineup>a span:first-child{font-size:12px !important}.qq-lineup>a span:last-child{font-size:10px !important}}

/* The capsule board (home hero only). Flat like the brand kit: graphite capsules on ink, crew
   colours as solid fills, nothing glows. The board fades out at its edges and clears the centre,
   so the headline and the speaker sit on plain ink. */
.qq-board{position:absolute;z-index:-1;left:50%;top:0;width:1664px;height:748px;translate:-50% 0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='44'><rect x='11' y='13' width='10' height='18' rx='5' fill='%23151518'/></svg>");background-size:32px 44px;
  -webkit-mask-image:radial-gradient(ellipse 50% 62% at 50% 36%,#000 50%,transparent 100%),radial-gradient(ellipse 35% 52% at 50% 40%,transparent 62%,#000 100%);-webkit-mask-composite:source-in;
  mask-image:radial-gradient(ellipse 50% 62% at 50% 36%,#000 50%,transparent 100%),radial-gradient(ellipse 35% 52% at 50% 40%,transparent 62%,#000 100%);mask-composite:intersect}
.qq-board svg{display:block}
.qq-cap{opacity:0;transform-box:fill-box;transform-origin:center;animation:qq-cap 9s var(--d) infinite;transition:opacity .4s}
@keyframes qq-cap{0%{opacity:0;transform:scaleY(.15)}5%{opacity:1;transform:none}28%{opacity:1;transform:none}33%{opacity:0;transform:scaleY(.15)}100%{opacity:0;transform:scaleY(.15)}}
.qq-hero[data-speaker="seo-auditor"] .qq-cap[data-c="seo-auditor"],.qq-hero[data-speaker="copywriter"] .qq-cap[data-c="copywriter"],
.qq-hero[data-speaker="social-copywriter"] .qq-cap[data-c="social-copywriter"],.qq-hero[data-speaker="ai-visibility"] .qq-cap[data-c="ai-visibility"],
.qq-hero[data-speaker="page-optimizer"] .qq-cap[data-c="page-optimizer"],.qq-hero[data-speaker="link-exchange"] .qq-cap[data-c="link-exchange"],
.qq-hero[data-speaker="video-producer"] .qq-cap[data-c="video-producer"],.qq-hero[data-speaker="image-designer"] .qq-cap[data-c="image-designer"]{animation:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.qq-cap{animation:none;opacity:.0}}
@media (max-width:640px){.qq-board{scale:.7;transform-origin:50% 0}}

/* The product film: poster, play button, then the YouTube player in the same 16:9 frame. */
.qq-film{position:relative;aspect-ratio:16/9;border-radius:28px;background:var(--terminal);border:1px solid var(--border);overflow:hidden}
.qq-film-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:inherit;text-decoration:none}
.qq-film-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.qq-film-poster:hover img{transform:scale(1.015)}
.qq-film-play{position:relative;width:84px;height:84px;border-radius:999px;background:#F4F4F1;color:#0B0B0D;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(11,11,13,.35);transition:transform .2s}
.qq-film-poster:hover .qq-film-play{transform:scale(1.06)}
.qq-film-poster:focus-visible{outline:2px solid var(--ring);outline-offset:-4px;border-radius:28px}
.qq-film-meta{position:absolute;left:20px;bottom:18px;padding:5px 10px;border-radius:999px;background:rgba(11,11,13,.72);font-family:var(--mono);font-size:12px;color:#F4F4F1}
[dir="rtl"] .qq-film-meta{left:auto;right:20px}
.qq-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){.qq-film{border-radius:18px}.qq-film-play{width:64px;height:64px}}

/* Older pages (tools, skills, prompts, docs index, legal) on the nav's container: 1200px with 32px
   sides (16px on phones), so their content lines up with the logo and the buttons above it. */
.qq-root .q-pad-section{max-width:1200px!important}
@media (max-width:640px){.qq-root .q-pad-section{padding-inline-start:16px!important;padding-inline-end:16px!important}}


/* The docs header: one bar, like the site nav (64px, Ink glass, hairline), on the docs grid width. */
.qd-head{position:sticky;top:0;z-index:90;background:rgba(11,11,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(244,244,241,.09);font-family:"Geist",ui-sans-serif,system-ui,sans-serif}
.qd-bar{max-width:1440px;margin:0 auto;height:64px;padding:0 32px;display:flex;align-items:center;gap:14px}
.qd-home{display:flex;align-items:center;flex:none}
.qd-label{flex:none;margin-inline-end:10px;font-size:15px;font-weight:600;color:#F4F4F1;text-decoration:none;padding-inline-start:12px;border-inline-start:1px solid rgba(244,244,241,.14);line-height:22px}
.qd-search{flex:1;max-width:360px;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid rgba(244,244,241,.12);border-radius:10px;background:#141417;color:#8D8D94;cursor:pointer;font:inherit}
.qd-search:hover{border-color:rgba(244,244,241,.22)}
.qd-search-label{flex:1;text-align:start;font-size:14px}
.qd-search-key{font-family:"JetBrains Mono",monospace;font-size:11px;border:1px solid rgba(244,244,241,.14);border-radius:5px;padding:1px 6px}
.qd-tabs{display:flex;align-items:center;gap:2px;margin-inline-start:8px}
.qd-tabs a{padding:8px 12px;border-radius:8px;font-size:14px;color:#8D8D94;text-decoration:none;transition:color .15s,background .15s}
.qd-tabs a:hover{color:#F4F4F1}
.qd-tabs a[aria-current="page"]{color:#F4F4F1;background:#1C1C20}
.qd-end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.qd-signin{padding:0 12px;font-size:14px;color:#8D8D94;text-decoration:none}
.qd-signin:hover{color:#F4F4F1}
.qd-start{height:40px;padding:0 18px;border-radius:999px;background:#F4F4F1;color:#0B0B0D;font-size:14px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none}
.qd-menu{display:none;width:40px;height:40px;border-radius:999px;border:1px solid rgba(244,244,241,.12);background:transparent;color:#F4F4F1;align-items:center;justify-content:center;cursor:pointer}
@media (max-width:1023px){.qd-tabs,.qd-signin{display:none}.qd-menu{display:inline-flex}}
@media (max-width:640px){.qd-bar{padding:0 16px;gap:10px}.qd-label{display:none}.qd-search{flex:none;width:40px;max-width:40px;justify-content:center;padding:0;border-radius:999px}.qd-search-label,.qd-search-key{display:none}}
.qd-drawer{top:64px!important}
.qd-start,.qd-signin,.qd-label{white-space:nowrap;flex:none}