.seam-skip-link{
position:absolute;left:-9999px;top:0;z-index:100000;padding:10px 16px;background:#fff;color:#0a0a0a;font-weight:700;border-radius:0 0 8px 0}
.seam-skip-link:focus{
left:0;outline:2px solid var(--primary);outline-offset:2px}
.site-header{
position:sticky;top:0;z-index:95;display:flex;justify-content:center;padding:12px var(--page-gutter) 0;pointer-events:none;transition:padding .45s var(--ease-out)}
.site-header>*{
pointer-events:auto}
.site-header.is-scrolled{
padding-top:8px;padding-inline:var(--page-gutter)}
:root,html[data-theme=dark]{
--background:#0b0d11;--foreground:#f3f4f7;--card:#14171d;--card-foreground:#f3f4f7;--muted:#1a1e26;--muted-foreground:#7a8290;--border:#2a303a;--secondary:#232833;--secondary-foreground:#f3f4f7;--accent:#232833;--primary:#a3b7ce;--radius:1rem;--nav-link:rgba(243,244,247,0.5);--nav-hover-bg:rgba(243,244,247,0.06);--surface-elevated:#1a1e26;--overlay-scrim:rgba(0,0,0,0.7);--input-bg:#14171d;--shadow-soft:0 14px 32px rgba(0,0,0,0.32);--gradient-x:44.373%;--gradient-y:35.1526%;--hero-gradient:radial-gradient( 80.17% 109.2% at var(--gradient-x) var(--gradient-y),rgb(214,224,236) 0%,rgb(163,183,206) 46%,rgb(122,140,162) 88.38% );--hero-title-gradient:radial-gradient( 80.17% 109.2% at var(--gradient-x) var(--gradient-y),rgb(243,244,247) 0%,rgb(198,208,220) 48%,rgb(163,183,206) 88.38% );--seam-accent:#a3b7ce;--link:#a3b7ce;--link-hover:#d5e0ee;--text-hover:var(--foreground);--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-soft:cubic-bezier(0.4,0,0.2,1);--dur-fast:0.18s;--dur:0.28s;--dur-slow:0.4s;--hover-lift:translateY(-2px);--page-gutter:24px;--page-gutter-sm:16px;--site-nav-h:72px;--nav-pill-bg:color-mix(in srgb,var(--surface-elevated) 92%,transparent);--nav-pill-border:color-mix(in srgb,var(--foreground) 8%,transparent);--nav-pill-shadow:0 10px 36px color-mix(in srgb,#000 28%,transparent);--nav-underline:var(--seam-accent,#a3b7ce);--section-pad-y:56px;--hero-pad-y:48px;--content-max:min(1440px,100%);color-scheme:dark}
html[data-theme=light]{
--background:#f3f4f7;--foreground:#12141a;--card:#ffffff;--card-foreground:#12141a;--muted:#e8eaef;--muted-foreground:#5f6672;--border:#d8dbe3;--secondary:#e6e8ed;--secondary-foreground:#12141a;--accent:#e6e8ed;--primary:#3d5f8a;--nav-link:rgba(18,20,26,0.55);--nav-hover-bg:rgba(18,20,26,0.05);--surface-elevated:#ffffff;--overlay-scrim:rgba(18,20,26,0.42);--input-bg:#ffffff;--shadow-soft:0 12px 28px rgba(18,20,26,0.06);--hero-gradient:radial-gradient( 80.17% 109.2% at var(--gradient-x) var(--gradient-y),rgb(90,98,112) 0%,rgb(196,202,210) 42.83%,rgb(36,40,48) 88.38% );--hero-title-gradient:radial-gradient( 80.17% 109.2% at var(--gradient-x) var(--gradient-y),rgb(36,40,48) 0%,rgb(90,98,112) 46%,rgb(18,20,26) 88.38% );--seam-accent:#3d5f8a;--link:#3d5f8a;--link-hover:#1f3a5c;--text-hover:var(--foreground);--light-soft:#eef0f4;--light-ink:#12141a;--light-ink-soft:rgba(18,20,26,0.68);--light-ink-mute:rgba(18,20,26,0.48);--nav-pill-bg:rgba(255,255,255,0.94);--nav-pill-border:rgba(18,20,26,0.06);--nav-pill-shadow:0 12px 40px rgba(18,20,26,0.08);--nav-underline:#12141a;color-scheme:light}
*,*::before,*::after{
box-sizing:border-box;margin:0;padding:0}
html{
scroll-behavior:smooth;scrollbar-gutter:stable}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--background);color:var(--foreground);min-height:100vh;display:flex;flex-direction:column;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{
color:inherit;text-decoration:none;cursor:pointer}
button{
font:inherit;border:none;background:none;cursor:pointer;color:inherit}
[type=button],[type=submit],[type=reset],summary,[role=button]{
cursor:pointer}
button:disabled,[type=button]:disabled,[type=submit]:disabled,[type=reset]:disabled,[aria-disabled=true]{
cursor:not-allowed}
/* Clickable UI chrome that may be <a>/<button>/<div> — keep hand cursor consistent */
.icon-btn,.menu-btn,.btn-signup,.btn-signin,.btn-unlimited,.btn-hero-secondary,.btn-go-unlimited,.btn-price,.btn-d3,.btn-home-price,.btn-contact-submit,.btn-account,.btn-account-nav,.btn-account-nav-trigger,.btn-account-nav-link,.home-more-btn,.filter-chip,.filter-settings,.like-btn,.footer-cta-btn,.detail-feedback-btn,.detail-tool,.detail-back,.blog-cat-btn,.auth-code-btn,.auth-math-refresh,.auth-social-btn,.mobile-auth-btn,.mobile-menu-cta,.mobile-menu-close,.lang-menu-btn,.lang-switch,.lang-seg,.theme-toggle,.seam-share-btn,.seam-member-cta-btn,.seam-dock-btn,.cat-chip,.cat-clear,.cat-panel,.cover-fav,.prompt-card,.prompt-action,.d3-item,.account-item-open,.pack-qty button,.tone-switch button,.article-back{
cursor:pointer}
img,video{
display:block;max-width:100%}
.no-scrollbar::-webkit-scrollbar{
display:none}
.no-scrollbar{
-ms-overflow-style:none;scrollbar-width:none}
.site-nav{
width:100%;max-width:100%;box-sizing:border-box;padding:10px 18px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;position:relative;z-index:95;background:var(--nav-pill-bg);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--nav-pill-border);border-radius:999px;box-shadow:var(--nav-pill-shadow);transition:background .45s var(--ease-soft),box-shadow .45s var(--ease-soft),border-color .45s var(--ease-soft),padding .45s var(--ease-out),max-width .45s var(--ease-out),column-gap .45s var(--ease-out),transform .45s var(--ease-out)}
.nav-left{
display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:0;justify-self:start}
.nav-logo{
display:inline-flex;align-items:center;max-width:100%}
.seam-logo{
display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--foreground)}
.seam-logo-mark{
width:28px;height:28px;flex-shrink:0;object-fit:contain;transition:width .45s var(--ease-out),height .45s var(--ease-out)}
.seam-logo-word{
font-size:15px;font-weight:750;letter-spacing:.02em;line-height:1;white-space:nowrap}
.seam-logo-ai{
margin-left:3px;font-weight:650;color:var(--seam-accent,#d0b2ff)}
.seam-logo--en .seam-logo-word{
font-size:14px;letter-spacing:-0.01em}
.seam-logo--en .seam-logo-ai{
margin-left:5px}
.nav-logo img:not(.seam-logo-mark){
height:28px;width:auto;max-width:min(160px,42vw);object-fit:contain;transition:height .45s var(--ease-out)}
.nav-links{
display:none;align-items:center;justify-content:center;gap:2px;margin:0;min-width:0;justify-self:center;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.nav-links a{
position:relative;padding:8px 14px;color:var(--nav-link);font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.2;border-radius:0;white-space:nowrap;display:inline-flex;align-items:center;background:rgba(0,0,0,0);transition:color var(--dur-fast) var(--ease-soft),padding .45s var(--ease-out),font-size .45s var(--ease-out)}
.nav-links a:hover,.nav-links a.is-active{
color:var(--foreground);background:rgba(0,0,0,0)}
.nav-badge{
position:relative;display:inline-flex;align-items:center;margin-left:3px;top:-5px}
.nav-badge-border{
position:absolute;inset:0;pointer-events:none;padding:1px;border-radius:9999px;background:var(--hero-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.nav-badge-text{
padding:1px 4px;font-size:7px;font-weight:700;text-transform:uppercase;line-height:1;letter-spacing:.04em;background-image:var(--hero-gradient);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0)}
.nav-right{
display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-shrink:0;margin-left:0;justify-self:end}
.icon-btn{
width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;color:var(--foreground);transition:background .15s}
.icon-btn:hover{
background:var(--nav-hover-bg)}
.icon-btn svg{
width:20px;height:20px}
.btn-signup{
display:none;padding:8px 16px;font-size:14px;font-weight:500;color:var(--background);background:var(--foreground);border-radius:9999px;transition:opacity .15s}
.btn-signup:hover{
opacity:.9}
.btn-signin{
display:none;padding:8px 12px;font-size:14px;font-weight:500;color:var(--nav-link);background:rgba(0,0,0,0);border:none;cursor:pointer}
.menu-btn{
display:inline-flex}
@media(max-width:1023px){
:root{
--site-nav-h:60px}
.site-header{
padding:10px var(--page-gutter-sm) 0}
.site-header.is-scrolled{
padding-top:6px;padding-inline:var(--page-gutter-sm)}
.site-nav .btn-account-nav,.site-nav .btn-signin,.site-nav .btn-signup{
display:none !important}
.site-nav{
padding:8px 10px;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
.nav-left{
min-width:0;gap:8px}
.nav-logo,.nav-logo .seam-logo{
min-width:0;max-width:100%}
.nav-logo .seam-logo-word{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(9.5rem,34vw)}
.nav-right{
gap:6px;min-width:0}
.site-nav .icon-btn{
width:40px;height:40px;flex:none}
.site-nav .icon-btn svg{
width:18px;height:18px}
.nav-logo img:not(.seam-logo-mark){
height:22px}
.seam-logo-mark{
width:22px;height:22px}
.seam-logo-word{
font-size:14px}
}
@media(max-width:380px){
.nav-logo .seam-logo-word{
max-width:min(7.5rem,30vw)}
.site-nav{
padding:8px 8px;column-gap:8px}
.nav-right{
gap:4px}
}
@media(min-width:1024px){
.nav-links{
display:flex}
.btn-signup,.btn-signin{
display:inline-flex;align-items:center}
.menu-btn{
display:none}
}
body.admin-bar .site-header{
top:32px}
@media screen and (max-width:782px){
body.admin-bar .site-header{
top:46px}
}
.mobile-menu{
position:fixed;inset:0;z-index:110;display:flex;justify-content:flex-end;visibility:hidden;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-soft),visibility var(--dur) var(--ease-soft)}
.mobile-menu.open{
visibility:visible;opacity:1;pointer-events:auto}
.mobile-menu-backdrop{
position:absolute;inset:0;border:0;padding:0;margin:0;background:var(--overlay-scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.mobile-menu-panel{
position:relative;z-index:1;width:min(100%,380px);height:100%;display:flex;flex-direction:column;background:var(--surface-elevated);border-left:1px solid var(--border);box-shadow:-24px 0 60px rgba(0,0,0,.35);transform:translateX(18px);opacity:.96;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur) var(--ease-soft);overflow:hidden}
.mobile-menu.open .mobile-menu-panel{
transform:translateX(0);opacity:1}
.mobile-menu-header{
display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.mobile-menu-brand{
display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--foreground);font-weight:700;font-size:15px}
.mobile-menu-brand img:not(.seam-logo-mark){
height:26px;width:auto;object-fit:contain}
.mobile-menu-brand .seam-logo-mark{
width:26px;height:26px}
.mobile-menu-brand .seam-logo-word{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-menu-close{
flex-shrink:0}
.mobile-menu-body{
flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 12px 20px;-webkit-overflow-scrolling:touch}
.mobile-menu-label{
margin:12px 10px 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.mobile-menu-nav{
display:flex;flex-direction:column;gap:2px}
.mobile-menu-nav a,.mobile-menu-link{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:13px 12px;font-size:16px;font-weight:600;color:var(--nav-link);border-radius:12px;background:rgba(0,0,0,0);border:0;transition:color var(--dur-fast) var(--ease-soft),background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out)}
.mobile-menu-nav a:hover,.mobile-menu-nav a:focus-visible,.mobile-menu-link:hover,.mobile-menu-nav a.is-active{
color:var(--foreground);background:var(--nav-hover-bg)}
.mobile-menu-nav a:active,.mobile-menu-link:active{
transform:scale(0.985)}
.mobile-menu-utils{
margin-top:18px;padding-top:8px;border-top:1px solid var(--border)}
.mobile-menu-footer{
flex-shrink:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-elevated) 92%,var(--background));display:flex;flex-direction:column;gap:10px}
.mobile-menu-cta{
display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:999px;font-size:14px;font-weight:700;color:#121214;background-image:linear-gradient(to top,rgb(207,222,246) 20%,rgb(250,250,250) 80%);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-soft),filter var(--dur-fast) var(--ease-soft)}
.mobile-menu-cta:hover{
transform:var(--hover-lift);box-shadow:0 10px 28px rgba(207,222,246,.28);filter:brightness(1.03)}
.mobile-menu-auth{
display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-menu-auth>a,.mobile-auth-btn{
display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 12px;border-radius:12px;font-size:13px;font-weight:650;border:1px solid var(--border);background:rgba(0,0,0,0);color:var(--foreground);transition:background var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-soft)}
.mobile-auth-btn--ghost:hover,.mobile-menu-auth>a:hover{
background:var(--nav-hover-bg)}
.mobile-auth-btn--solid{
background:var(--foreground);color:var(--background);border-color:rgba(0,0,0,0)}
.mobile-auth-btn--solid:hover{
filter:brightness(1.05);transform:var(--hover-lift)}
.mobile-menu-auth:has(>:only-child){
grid-template-columns:1fr}
.page{
flex:1 0 auto;min-width:0;width:100%;max-width:100%;background:var(--background)}
.site-header,.site-footer{
flex-shrink:0}
.container-pad{
width:100%;padding:0 var(--page-gutter)}
@media(max-width:639px){
.container-pad{
padding-left:20px;padding-right:20px}
.hero{
padding:36px 20px 16px}
.contact-hero,.cat-hero,.blog-hero,.account-hero{
padding:40px 20px 24px}
.contact-layout,.article-shell,.blog-layout,.page-shell,.article-more{
padding-left:20px;padding-right:20px}
}
.hero{
--hero-h:520px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;max-width:none;margin:0 auto;min-height:var(--hero-h);height:var(--hero-h);padding:40px var(--page-gutter) 32px;overflow:hidden;isolation:isolate;background-color:var(--background);content-visibility:visible;contain:none}
body[data-page=home] .hero{
margin-top:calc(-1*var(--site-nav-h));min-height:calc(var(--hero-h) + var(--site-nav-h));height:calc(var(--hero-h) + var(--site-nav-h));padding-top:calc(28px + var(--site-nav-h))}
body[data-page=home] .site-header:not(.is-scrolled) .site-nav{
background:color-mix(in srgb,var(--nav-pill-bg) 72%,transparent);border-color:color-mix(in srgb,var(--nav-pill-border) 55%,transparent);box-shadow:0 8px 28px color-mix(in srgb,#000 12%,transparent)}
html[data-theme=light] body[data-page=home] .site-header:not(.is-scrolled) .site-nav{
background:rgba(255,255,255,.72);box-shadow:0 8px 28px rgba(18,18,20,.06)}
.hero-content{
position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:min(52rem,100%);padding:8px 12px 0}
.hero-copy{
display:flex;flex-direction:column;align-items:center;width:100%;gap:0}
.hero h1{
font-size:clamp(1.85rem,3.6vw,2.75rem);font-weight:750;line-height:1.18;letter-spacing:-0.025em;color:rgba(0,0,0,0);margin:0;overflow:visible;white-space:normal}
.hero h1 .line{
display:inline;overflow:visible}
.hero h1 .line+.line::before{
content:" "}
.superpowers{
position:relative;display:inline-block;isolation:isolate;max-width:100%}
.superpowers-fill .line,.superpowers-glow .line{
background-image:var(--hero-title-gradient,var(--hero-gradient));background-size:200% 200%;background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0);-webkit-text-fill-color:rgba(0,0,0,0);animation:hero-grad-shift 7s ease-in-out infinite alternate}
.superpowers-fill{
position:relative;z-index:1}
.superpowers-glow{
position:absolute;inset:-0.06em -0.1em;filter:blur(12px) brightness(1.15);opacity:.55;pointer-events:none;user-select:none;z-index:0}
@keyframes hero-grad-shift{
0%{
background-position:12% 40%}
100%{
background-position:88% 55%}
}
.hero-sub{
max-width:min(40rem,100%);margin:18px 0 0;font-size:.98rem;font-weight:450;line-height:1.7;letter-spacing:.01em;color:color-mix(in srgb,var(--foreground) 64%,transparent);white-space:normal;text-align:center}
.hero-cta-row{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:26px 0 0}
.btn-unlimited{
display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;font-size:1rem;font-weight:650;border-radius:14px;color:#0a0a0c;background:linear-gradient(180deg,#fff 0%,#e8eef8 100%);border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 28px rgba(0,0,0,.22);transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),filter .2s ease}
.btn-unlimited:hover{
transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.btn-unlimited .btn-arrow{
transition:transform .28s var(--ease-out)}
.btn-unlimited:hover .btn-arrow{
transform:translateX(3px)}
.btn-hero-secondary{
display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;font-size:.98rem;font-weight:600;border-radius:14px;color:var(--foreground);background:color-mix(in srgb,var(--foreground) 6%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 16%,transparent);backdrop-filter:blur(8px);transition:background .25s var(--ease-out),border-color .25s ease,transform .25s var(--ease-out)}
.btn-hero-secondary:hover{
background:color-mix(in srgb,var(--foreground) 10%,transparent);border-color:color-mix(in srgb,var(--foreground) 28%,transparent);transform:translateY(-2px);color:var(--text-hover)}
.hero-meta{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin-top:4px;color:color-mix(in srgb,var(--foreground) 55%,transparent);font-size:.8125rem;font-weight:550;letter-spacing:.01em}
.hero-meta-chip{
display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);background:color-mix(in srgb,var(--foreground) 5%,transparent);color:var(--foreground);font-size:.75rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.hero-meta-stat+.hero-meta-stat::before{
content:"·";margin-right:16px;opacity:.45}
@media(min-width:1024px){
.hero h1{
white-space:nowrap}
.hero-sub{
max-width:none;white-space:nowrap}
}
@media(max-width:1023px){
.hero h1 .line{
display:block}
.hero h1 .line+.line::before{
content:none}
.hero h1 .line+.line{
margin-top:.06em}
.hero-cta-row{
width:100%;flex-direction:column;margin-top:20px}
.btn-unlimited,.btn-hero-secondary{
width:100%}
}
@media(max-width:700px){
.hero{
--hero-h:440px;height:auto;min-height:var(--hero-h);padding:32px var(--page-gutter-sm) 24px}
.hero h1{
font-size:clamp(1.7rem,8vw,2.15rem);line-height:1.22}
.hero-sub{
max-width:22rem;margin-top:14px;font-size:.9rem;line-height:1.65}
}
.filters-bar{
display:flex;align-items:center;gap:10px;padding:16px 0 12px;position:relative;z-index:1;background:rgba(0,0,0,0);animation:fade-up .65s cubic-bezier(0.22,1,0.36,1) .45s both}
.filters-scroll{
display:flex;align-items:center;gap:6px;overflow-x:auto;flex:1 1 auto;min-width:0;padding:2px 0;scroll-snap-type:x proximity}
.filter-chip{
flex:0 0 auto;min-height:44px;padding:10px 16px;font-size:14px;font-weight:500;line-height:1.25;border-radius:9999px;color:var(--nav-link);text-decoration:none;white-space:nowrap;scroll-snap-align:start;display:inline-flex;align-items:center;transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-soft)}
.filter-chip:hover{
color:var(--foreground);background:var(--nav-hover-bg)}
.filter-chip.active{
background:var(--secondary);color:var(--foreground)}
.filters-actions{
display:flex;align-items:center;flex:0 0 auto;margin-left:2px}
.filter-settings{
width:44px;height:44px;border-radius:9999px;background:var(--secondary);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--foreground);flex-shrink:0;text-decoration:none}
.filter-settings svg{
width:16px;height:16px}
.home-more{
display:flex;justify-content:center;padding:8px 0 28px}
.home-more-btn{
display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:999px;border:1px solid var(--border);background:var(--secondary);color:var(--foreground);font-size:14px;font-weight:600;transition:background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-soft)}
.home-more-btn:hover{
background:var(--nav-hover-bg);border-color:color-mix(in srgb,var(--foreground) 18%,transparent);transform:translateY(-1px)}
.home-feed{
display:flex;flex-direction:column;align-items:center;gap:10px;min-height:36px;padding:4px 0 8px}
.home-feed[hidden]{
display:none}
.home-feed-status{
margin:0;font-size:13px;color:var(--muted-foreground)}
.home-feed.is-loading .home-more-btn,.home-feed.is-loading .home-feed-pages button{
opacity:.55;pointer-events:none}
.home-feed-sentinel{
width:100%;height:1px}
.home-feed-pages{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.home-feed-pages button{
min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,0);color:var(--foreground);font:inherit;cursor:pointer}
.home-feed-pages button.is-current{
background:#202020;color:#fff;border-color:#202020}
.prompt-grid{
display:flex;align-items:flex-start;gap:14px;padding-bottom:24px}
.prompt-col{
flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
@media(max-width:999px){
.prompt-grid{
flex-wrap:wrap}
.prompt-col{
flex:1 1 calc(50% - 7px)}
}
@media(max-width:639px){
.prompt-col{
flex:1 1 100%}
}
.prompt-card{
border-radius:24px;overflow:visible;display:flex;flex-direction:column;cursor:pointer;isolation:isolate}
@media(hover:hover)and (pointer:fine){
.prompt-card{
contain:layout style}
}
.prompt-media{
position:relative;width:100%;border-radius:20px;overflow:hidden;margin-bottom:12px;background:var(--secondary);aspect-ratio:16/10;box-shadow:0 1px 0 color-mix(in srgb,var(--foreground) 6%,transparent)}
.prompt-media::after{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,#000 28%,transparent) 100%);opacity:0}
.prompt-media::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--foreground) 10%,transparent)}
.prompt-media img,.prompt-media video{
width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.prompt-media img{
transform:none;transform-origin:center 40%}
.prompt-media video{
position:absolute;inset:0;opacity:0;z-index:1}
.prompt-media video.seam-card-preview,
.d3-item-media video.seam-card-preview{
opacity:0;transition:opacity .45s ease-out;pointer-events:none}
.prompt-media video.seam-card-preview.is-playing,
.d3-item-media video.seam-card-preview.is-playing{
opacity:1}
@media(hover:hover)and (pointer:fine){
.prompt-card:hover .prompt-meta h3{
color:var(--text-hover,var(--foreground))}
.prompt-card:hover .prompt-action{
color:var(--foreground);opacity:1}
}
@media(prefers-reduced-motion:reduce){
.prompt-meta h3,.prompt-action{
transition:none !important}
}
.prompt-meta{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 0 12px}
.prompt-meta h3{
font-size:18px;font-weight:700;line-height:1.25;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prompt-meta .cat{
display:block;font-size:12px;color:var(--muted-foreground);margin-top:2px}
.prompt-action{
flex-shrink:0;color:var(--muted-foreground);transition:color .15s;display:inline-flex;align-items:center;justify-content:center;padding:2px}
.prompt-action:hover{
color:var(--foreground)}
.prompt-action svg{
width:20px;height:20px}
.prompt-action[aria-label="Unlock prompt"] svg{
fill:none;stroke:currentColor}
.d3-banner{
margin:12px 0;border-radius:24px;border:1px solid #303030;overflow:hidden;background:#0d0d0f;padding:32px var(--page-gutter) 24px}
.d3-banner-top{
display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.d3-banner-copy{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.collection-badge{
position:relative;display:inline-flex;align-items:center;background:#121212;border-radius:9999px}
.collection-badge-border{
position:absolute;inset:0;pointer-events:none;padding:1px;border-radius:9999px;background:var(--hero-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.collection-badge span:last-child{
padding:4px 10px;font-size:9px;font-weight:700;text-transform:uppercase;line-height:1;background-image:var(--hero-gradient);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0)}
.d3-banner h2{
font-size:40px;line-height:38px;letter-spacing:-0.03em;font-weight:900;text-transform:uppercase;color:#f5f5f5}
.d3-banner p{
max-width:42rem;font-size:15px;font-weight:500;color:rgba(255,255,255,.72)}
.btn-d3{
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;height:44px;padding:0 22px;border-radius:12px;background:#f5f5f5;color:#121212;font-size:15px;font-weight:600;transition:opacity .15s}
.btn-d3:hover{
opacity:.9}
.d3-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.d3-item{
display:block;min-width:0}
.d3-item-media{
overflow:hidden;border-radius:12px;aspect-ratio:16/10;background:var(--secondary)}
.d3-item-media img{
width:100%;height:100%;object-fit:cover}
.d3-item-title{
margin-top:10px;font-size:14px;font-weight:600;color:var(--foreground)}
.d3-item-sub{
font-size:12px;color:var(--muted-foreground)}
@media(max-width:1000px){
.d3-banner-top{
flex-direction:column;align-items:flex-start}
.d3-banner h2{
font-size:32px;line-height:31px}
.d3-grid{
grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
.d3-grid{
grid-template-columns:1fr}
}
.site-footer{
margin-top:48px;border-top:1px solid var(--border);background:radial-gradient(ellipse 80% 60% at 10% 0%,color-mix(in srgb,var(--seam-accent) 12%,transparent),transparent 55%),var(--background);color:var(--muted-foreground)}
.footer-inner{
max-width:var(--content-max);margin:0 auto;padding:48px var(--page-gutter) 40px}
.footer-grid{
display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px 28px;align-items:start}
.footer-brand{
display:flex;flex-direction:column;gap:12px;max-width:320px}
.footer-logo{
display:inline-flex;align-items:center;gap:10px;color:var(--foreground);font-weight:750;font-size:16px;transition:opacity var(--dur-fast) var(--ease-soft)}
.footer-logo:hover{
opacity:.85}
.footer-logo img:not(.seam-logo-mark){
height:28px;width:auto;object-fit:contain}
.footer-logo .seam-logo-mark{
width:28px;height:28px}
.footer-logo .seam-logo-word{
font-size:16px}
.footer-tagline{
font-size:14px;line-height:1.55;color:var(--muted-foreground)}
.footer-email{
font-size:13px;font-weight:600;color:var(--foreground);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-soft)}
.footer-email:hover{
color:var(--link-hover)}
.footer-col h3{
margin:0 0 14px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--foreground)}
.footer-nav{
display:flex;flex-direction:column;gap:8px}
.footer-nav a{
display:inline-flex;align-items:center;width:fit-content;font-size:14px;font-weight:500;color:var(--muted-foreground);transition:color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-out)}
.footer-nav a:hover{
color:var(--text-hover);transform:translateX(2px)}
.footer-cta-text{
font-size:13px;line-height:1.5;margin-bottom:12px}
.footer-cta-btn{
display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:700;color:#121214;background-image:linear-gradient(to top,rgb(207,222,246) 20%,rgb(250,250,250) 80%);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-soft),filter var(--dur-fast) var(--ease-soft)}
.footer-cta-btn:hover{
transform:var(--hover-lift);box-shadow:0 10px 28px rgba(207,222,246,.25);filter:brightness(1.03)}
.footer-social{
display:flex;align-items:center;gap:10px;margin-top:16px}
.footer-social a{
width:38px;height:38px;border-radius:12px;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--muted-foreground);background:color-mix(in srgb,var(--card) 70%,transparent);transition:color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft),background var(--dur-fast) var(--ease-soft),transform var(--dur) var(--ease-out)}
.footer-social a:hover{
color:var(--foreground);border-color:color-mix(in srgb,var(--seam-accent) 45%,var(--border));background:color-mix(in srgb,var(--seam-accent) 12%,var(--card));transform:var(--hover-lift)}
.footer-social svg{
width:18px;height:18px}
.footer-friends{
margin-top:40px;padding-top:28px;border-top:1px solid var(--border)}
.footer-friends-head{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.footer-friends-title{
margin:0;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--foreground)}
.footer-friends-list{
display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.footer-friends-list a{
display:inline-flex;align-items:center;gap:8px;max-width:100%;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 72%,transparent);color:var(--muted-foreground);font-size:13px;font-weight:600;line-height:1;transition:color .25s ease,border-color .25s ease,background .25s ease,transform .35s cubic-bezier(0.22,1,0.36,1),box-shadow .35s ease}
.footer-friends-list a:hover{
color:var(--foreground);border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 45%,var(--border));background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 12%,var(--card));transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.footer-friends-logo{
width:20px;height:20px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--secondary)}
.footer-friends-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.footer-bottom{
margin-top:36px;padding-top:18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px}
.footer-bottom-links{
display:flex;align-items:center;gap:14px}
.footer-bottom-links a{
color:var(--muted-foreground);transition:color var(--dur-fast) var(--ease-soft)}
.footer-bottom-links a:hover{
color:var(--text-hover)}
@media(max-width:960px){
.footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.footer-brand{
grid-column:1/-1;max-width:none}
.footer-col--cta{
grid-column:1/-1}
}
@media(max-width:640px){
.site-footer{
margin-top:28px}
.footer-inner{
padding:24px 20px 28px}
.footer-grid{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:20px;align-items:start}
.footer-brand{
grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:none}
.footer-logo{
font-size:15px}
.footer-logo img:not(.seam-logo-mark),.footer-logo img{
height:22px}
.footer-logo .seam-logo-mark{
width:22px;height:22px}
.footer-tagline{
margin:0;font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.footer-email{
font-size:13px;margin-top:0}
.footer-col{
min-width:0}
.footer-col h3{
margin:0 0 8px;font-size:11px;line-height:1.2}
.footer-nav{
gap:6px}
.footer-nav a{
font-size:13px;line-height:1.35}
.footer-col--cta{
grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:8px;padding-top:12px;margin-top:2px;border-top:1px solid var(--border)}
.footer-col--cta h3{
display:none}
.footer-cta-text{
margin:0;font-size:13px;line-height:1.4}
.footer-cta-btn{
height:36px;padding:0 16px;font-size:13px;white-space:nowrap}
.footer-social{
grid-column:1/-1;margin-top:0;gap:8px}
.footer-social a{
width:34px;height:34px;border-radius:10px}
.footer-social svg{
width:16px;height:16px}
.footer-bottom{
margin-top:20px;padding-top:14px;gap:10px;font-size:12px;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.footer-bottom>span{
display:block;width:100%;line-height:1.5}
.footer-bottom-links{
gap:16px;flex-wrap:wrap;width:100%}
}
.detail-overlay{
display:none;position:fixed;inset:0;z-index:90;background:var(--background);overflow-y:auto;overscroll-behavior:contain;animation:fade-in .2s ease}
.detail-overlay.open{
display:block}
/* Keep the main nav above the resource detail.
   Overlay covers the full viewport (hides home hero); header stays transparent so
   there is no extra gray strip — only the nav pill is opaque. */
body.detail-open .detail-overlay{
inset:0;z-index:90;background:var(--background)}
body.detail-open .site-header{
visibility:visible;pointer-events:none;z-index:96;background:transparent}
body.detail-open .site-header>*{
pointer-events:auto}
body.detail-open .site-nav{
visibility:visible;pointer-events:auto;z-index:96}
body.detail-open::before{
content:none}
body.detail-open .detail-inner{
padding-top:calc(var(--seam-detail-top, calc(12px + var(--site-nav-h))) + 16px)}
html body.detail-open .site-nav,
html body.detail-open .site-nav.is-scrolled,
html[data-theme=light] body.detail-open .site-nav,
html[data-theme=light] body.detail-open .site-nav.is-scrolled,
html[data-theme=light] body.detail-open .site-header.is-scrolled .site-nav{
background:var(--surface-elevated) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-color:var(--nav-pill-border) !important;box-shadow:var(--nav-pill-shadow) !important}
html[data-theme=light] body.detail-open .site-nav,
html[data-theme=light] body.detail-open .site-nav.is-scrolled,
html[data-theme=light] body.detail-open .site-header.is-scrolled .site-nav{
background:#fff !important;border-color:rgba(18,20,26,.08) !important;box-shadow:0 8px 28px rgba(18,20,26,.06) !important}
body.detail-open .site-nav .nav-glass{
opacity:0 !important}
@media(max-width:900px){
body.detail-open .detail-inner{
padding:16px 16px 40px;padding-top:calc(var(--seam-detail-top, 72px) + 16px)}
body.detail-open .detail-panel-wrap{
gap:16px}
body.detail-open .detail-card,
body.detail-open .detail-loading-card{
margin:0}
}
@keyframes fade-in{
from{
opacity:0}
to{
opacity:1}
}
.detail-inner{
width:100%;max-width:1760px;margin:0 auto;padding:24px var(--page-gutter) 72px}
.detail-panel-wrap{
position:relative;display:flex;flex-direction:column;gap:16px}
.detail-top{
display:grid;grid-template-columns:minmax(0,1fr) repeat(2,minmax(200px,250px));gap:16px;align-items:stretch}
.detail-main{
position:relative;min-width:0;max-width:100%;height:100%;min-height:0}
.detail-rail{
display:grid;grid-template-rows:1fr 1fr;gap:16px;min-width:0;height:100%;min-height:0;align-self:stretch}
.detail-rail-slot{
min-height:0;overflow:visible}
.detail-rail .prompt-card,
.detail-below .prompt-card,
.detail-overlay .prompt-card{
content-visibility:visible;contain:none;overflow:visible}
.detail-rail .prompt-card{
width:100%;min-height:0;height:100%;display:flex;flex-direction:column}
.detail-rail .prompt-media{
flex:1 1 auto;min-height:0;aspect-ratio:auto;margin-bottom:6px;border-radius:16px;overflow:hidden}
.detail-rail .prompt-media img,.detail-rail .prompt-media video{
width:100%;height:100%;object-fit:cover;object-position:center top}
.detail-rail .prompt-meta{
padding:2px 0 4px;flex:0 0 auto;align-items:flex-start;overflow:visible;min-height:3.2em}
.detail-rail .prompt-meta .min-w-0{
min-width:0;overflow:visible;padding-bottom:2px}
.detail-rail .prompt-meta h3{
font-size:15px;line-height:1.4;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:1px}
.detail-rail .prompt-meta .cat{
display:block;margin-top:4px;line-height:1.5;padding-bottom:3px;overflow:visible}
.detail-below{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.detail-below .prompt-card{
width:100%;min-width:0}
.detail-below .prompt-meta{
min-width:0}
.detail-below .prompt-meta .min-w-0{
min-width:0;overflow:hidden}
.detail-below .prompt-meta h3{
font-size:15px;line-height:1.35;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.detail-below .prompt-media{
aspect-ratio:16/9;border-radius:16px;overflow:hidden}
.detail-below .prompt-media img,.detail-below .prompt-media video{
width:100%;height:100%;object-fit:cover}
.detail-card{
width:100%;height:100%;background:var(--card);border-radius:24px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:stretch}
.detail-media{
min-width:0;min-height:0;width:100%;aspect-ratio:16/9;max-height:min(720px,78vh);background:#0a0a0a;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.detail-media img{
position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center center}
.detail-media:has(video.is-playing) img{
opacity:0}
.detail-media video{
position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:cover;object-position:center center;z-index:1;pointer-events:none}
.detail-media .detail-back{
pointer-events:auto;z-index:12}
.detail-sidebar{
display:flex;flex-direction:column;gap:14px;padding:22px 20px;width:auto;min-height:0;border-left:1px solid var(--border);background:var(--card);overflow-x:hidden;overflow-y:auto}
.detail-sidebar .sponsored{
margin-top:auto;padding-top:4px}
.detail-sidebar h3{
font-size:20px;font-weight:700;line-height:1.25;padding-right:36px;word-break:break-word}
.detail-sidebar .cat{
font-size:14px;color:var(--muted-foreground)}
.like-btn{
align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted-foreground);transition:color .15s}
.like-btn:hover{
color:var(--foreground)}
.like-btn svg{
width:16px;height:16px}
.btn-go-unlimited{
width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--foreground);color:var(--background);padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;transition:opacity .15s}
.btn-go-unlimited:hover{
opacity:.9}
.btn-go-unlimited svg{
width:16px;height:16px}
.detail-tools{
display:flex;flex-direction:column;gap:6px}
.detail-tool{
display:flex;align-items:center;gap:8px;background:rgba(48,48,48,.6);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:500;color:var(--muted-foreground);transition:background .15s,color .15s}
.detail-tool:hover{
background:var(--secondary);color:var(--foreground)}
.detail-tool svg{
width:16px;height:16px;flex-shrink:0}
.sponsored{
display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sponsored-label{
font-size:10px;line-height:1;color:rgba(171,171,171,.4)}
.sponsored-link{
display:flex;align-items:center;gap:12px;background:rgba(41,41,41,.2);border-radius:16px;padding:12px;transition:background .15s}
.sponsored-link:hover{
background:rgba(41,41,41,.3)}
.sponsored-link .icon{
width:28px;height:28px;border-radius:12px;background:#222;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;overflow:hidden}
.sponsored-link .title{
display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600}
.sponsored-link .sub{
font-size:12px;color:var(--muted-foreground)}
.detail-back{
position:absolute;top:16px;left:16px;z-index:12;width:40px;height:40px;border-radius:9999px;background:rgba(0,0,0,.55);color:#fff;display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.detail-back svg{
width:18px;height:18px}
@media(max-width:1480px){
.detail-inner{
max-width:1360px;padding-left:var(--page-gutter);padding-right:var(--page-gutter)}
.detail-top{
grid-template-columns:minmax(0,1fr) repeat(2,minmax(180px,220px))}
.detail-card{
grid-template-columns:minmax(0,1fr) 250px}
}
@media(max-width:1200px){
.detail-top{
grid-template-columns:minmax(0,1fr) minmax(0,230px)}
.detail-rail:nth-child(3){
display:none}
.detail-below{
grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-card{
grid-template-columns:minmax(0,1fr) 240px}
}
@media(max-width:900px){
.detail-top{
grid-template-columns:1fr}
.detail-rail{
display:none}
.detail-below{
grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.detail-card{
grid-template-columns:1fr;height:auto;border-radius:20px}
.detail-media{
max-height:56vh;border-radius:20px 20px 0 0}
.detail-sidebar{
border-left:none;border-top:1px solid var(--border);overflow:visible;padding:18px 16px 20px;gap:14px}
.detail-sidebar h3{
font-size:18px;padding-right:0}
.detail-back{
top:12px;left:12px;width:40px;height:40px}
.detail-tools{
gap:8px}
.detail-tool{
padding:12px}
}
@media(max-width:560px){
.detail-below{
grid-template-columns:1fr;gap:12px}
.detail-inner{
padding:12px var(--page-gutter-sm) 40px}
.detail-panel-wrap{
gap:14px}
.detail-media{
max-height:42vh}
.detail-sidebar{
padding:16px 14px 18px}
.detail-sidebar h3{
font-size:17px;line-height:1.3}
.btn-go-unlimited{
padding:12px 14px}
}
.search-modal{
display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);align-items:flex-start;justify-content:center;padding:calc(72px + env(safe-area-inset-top,0px)) 16px 24px}
.search-modal.open{
display:flex}
.search-box{
width:100%;max-width:560px;background:var(--card);border-radius:16px;border:1px solid var(--border);overflow:hidden}
.search-box input{
width:100%;padding:16px 20px;background:rgba(0,0,0,0);border:none;outline:none;color:var(--foreground);font-size:16px}
.search-results{
max-height:320px;overflow-y:auto;border-top:1px solid var(--border)}
.search-result{
display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s}
.search-result:hover{
background:rgba(255,255,255,.04)}
.search-result img{
width:48px;height:32px;object-fit:cover;border-radius:6px}
.search-result span{
font-size:14px;font-weight:500}
.pricing-page{
position:relative;padding-bottom:48px}
.pricing-hero{
position:relative;text-align:center;padding:var(--hero-pad-y) var(--page-gutter) 40px;overflow:hidden}
.pricing-hero-glow{
position:absolute;left:50%;top:-80px;width:min(980px,140%);height:420px;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--seam-accent,#d0b2ff) 28%,transparent),transparent 72%),radial-gradient(closest-side,rgba(232,64,13,0.14),transparent 68%);pointer-events:none}
.pricing-hero-inner{
position:relative;max-width:760px;margin:0 auto}
.sale-banner{
display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:100%;margin-bottom:22px;padding:8px 16px;border-radius:9999px;background:color-mix(in srgb,var(--foreground) 4%,transparent);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--foreground);backdrop-filter:blur(8px)}
.sale-banner.is-member{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 40%,transparent)}
.sale-dot{
width:7px;height:7px;border-radius:999px;background:#fb923c;box-shadow:0 0 0 4px rgba(251,146,60,.18);animation:pricing-pulse 1.6s ease infinite}
@keyframes pricing-pulse{
0%,100%{
opacity:1}
50%{
opacity:.45}
}
.sale-banner .timer{
color:#fb923c;font-variant-numeric:tabular-nums;font-weight:700}
.pricing-eyebrow{
margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
.pricing-hero h1{
font-size:clamp(36px,6vw,56px);font-weight:900;line-height:1.05;letter-spacing:-0.04em;margin:0 0 14px}
.pricing-hero h1 .grad{
color:inherit}
.pricing-lead{
margin:0 auto;max-width:540px;font-size:16px;line-height:1.55;color:var(--muted-foreground);font-weight:500}
.pricing-pay-chips{
list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px 0 0;padding:0}
.pricing-pay-chips li{
padding:6px 12px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--muted-foreground);background:color-mix(in srgb,var(--foreground) 3%,transparent)}
.pricing-pay-warn{
margin:18px 0 0;font-size:14px;color:#fbbf24}
.pricing-hero-cta{
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.pricing-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1360px;margin:0 auto;padding:20px var(--page-gutter) 56px;align-items:stretch}
.price-card{
background:linear-gradient(180deg,color-mix(in srgb,var(--foreground) 4%,transparent),transparent 120px),color-mix(in srgb,var(--foreground) 2%,transparent);border:1px solid var(--border);border-radius:28px;padding:28px 24px 26px;display:flex;flex-direction:column;gap:18px;position:relative;transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .25s ease}
.price-card:hover{
transform:translateY(-3px);border-color:color-mix(in srgb,var(--foreground) 22%,transparent)}
.price-card.popular{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--seam-accent,#d0b2ff) 18%,transparent),0 24px 60px rgba(0,0,0,.28);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--seam-accent,#d0b2ff) 18%,transparent),transparent 55%),color-mix(in srgb,var(--foreground) 2.5%,transparent)}
.price-card.is-current{
outline:1px solid color-mix(in srgb,#34d399 45%,transparent)}
.price-card .badge-popular,.price-card .badge-current{
position:absolute;z-index:2;top:0;left:50%;transform:translate(-50%,-50%);padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:9999px;white-space:nowrap;pointer-events:none;line-height:1.2}
.price-card .badge-popular{
background:var(--foreground);color:var(--background)}
.price-card .badge-current{
top:auto;bottom:0;transform:translate(-50%,50%);background:#065f46;color:#ecfdf5}
.price-card-top h3{
margin:0;font-size:22px;font-weight:800;letter-spacing:-0.02em}
.price-card .desc{
margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--muted-foreground)}
.price-card-mid{
padding-top:4px;border-top:1px dashed var(--border);padding-top:16px}
.price-amount{
font-size:clamp(40px,5vw,48px);font-weight:800;letter-spacing:-0.04em;line-height:1}
.price-amount .old{
font-size:20px;font-weight:500;color:var(--muted-foreground);text-decoration:line-through;margin-right:8px}
.price-interval{
font-size:13px;color:var(--muted-foreground);margin-top:6px}
.btn-price{
width:100%;display:flex;align-items:center;justify-content:center;height:48px;border:0;border-radius:9999px;background:var(--foreground);color:var(--background);font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .15s}
.btn-price:hover{
opacity:.92}
.btn-price:active{
transform:scale(0.98)}
.btn-price:disabled{
opacity:.45;cursor:not-allowed}
.price-card.popular .btn-price{
background:linear-gradient(135deg,#fff 0%,#e8ddff 100%);color:#121212}
.price-features{
list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;flex:1}
.price-features li{
display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--foreground) 82%,transparent)}
.price-features li svg{
width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--seam-accent,#d0b2ff)}
.pricing-section-head{
text-align:center;margin-bottom:28px}
.pricing-section-head h2{
margin:0;font-size:clamp(24px,3.5vw,32px);font-weight:800;letter-spacing:-0.03em}
.pricing-included,.pricing-compare,.pricing-faq,.pricing-footer-cta{
padding:8px var(--page-gutter) 64px}
.pricing-included-inner,.pricing-compare-inner{
max-width:1100px;margin:0 auto}
.pricing-included-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pricing-included-card{
padding:22px 18px;border-radius:20px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 2.5%,transparent);transition:transform .25s ease,border-color .25s ease}
.pricing-included-card:hover{
transform:translateY(-3px);border-color:color-mix(in srgb,var(--foreground) 18%,transparent)}
.pricing-included-icon{
display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:14px;border-radius:12px;font-size:13px;font-weight:800;letter-spacing:-0.02em;color:var(--foreground);background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 22%,transparent);border:1px solid color-mix(in srgb,var(--seam-accent,#d0b2ff) 35%,transparent)}
.pricing-included-card h3{
margin:0 0 8px;font-size:15px;font-weight:800;letter-spacing:-0.02em}
.pricing-included-card p{
margin:0;font-size:13px;line-height:1.5;color:var(--muted-foreground)}
.pricing-compare-table{
max-width:720px;margin:0 auto;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--foreground) 2%,transparent)}
.pricing-compare-row{
display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:8px;padding:14px 18px;border-top:1px solid var(--border);font-size:14px;align-items:center}
.pricing-compare-row.is-head{
border-top:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);background:color-mix(in srgb,var(--foreground) 3%,transparent)}
.pricing-compare-row .is-mute{
color:var(--muted-foreground)}
.pricing-compare-row .is-yes{
font-weight:700;color:#34d399}
.pricing-faq.faq{
max-width:none;margin:0;padding:8px var(--page-gutter) 64px}
.pricing-faq .pricing-section-head{
max-width:720px;margin-left:auto;margin-right:auto}
.pricing-faq .faq-list{
max-width:720px;margin:0 auto;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--foreground) 2%,transparent)}
.pricing-faq .faq-item{
border-bottom:1px solid var(--border);background:rgba(0,0,0,0);box-shadow:none}
.pricing-faq .faq-item:last-child{
border-bottom:0}
.pricing-faq .faq-q{
width:100%;box-sizing:border-box;padding:18px 20px;gap:14px;align-items:flex-start}
.pricing-faq .faq-q span{
flex:1 1 auto;min-width:0;text-align:left;line-height:1.45}
.pricing-faq .faq-q svg{
width:18px;height:18px;margin-top:2px;flex-shrink:0;opacity:.55}
.pricing-faq .faq-a{
padding:0 20px 18px;margin:0;line-height:1.65}
.pricing-footer-cta-inner{
max-width:640px;margin:0 auto;text-align:center;padding:40px 28px;border-radius:28px;border:1px solid var(--border);background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--seam-accent,#d0b2ff) 16%,transparent),transparent 60%),color-mix(in srgb,var(--foreground) 2.5%,transparent)}
.pricing-footer-cta h2{
margin:0 0 10px;font-size:clamp(24px,4vw,32px);font-weight:800;letter-spacing:-0.03em}
.pricing-footer-cta p{
margin:0;color:var(--muted-foreground);font-size:15px}
.tag-new{
display:inline-flex;margin-left:6px;padding:1px 6px;font-size:9px;font-weight:700;text-transform:uppercase;border-radius:9999px;border:1px solid color-mix(in srgb,var(--foreground) 25%,transparent);color:var(--muted-foreground);vertical-align:middle}
@media(max-width:1100px){
.pricing-grid{
grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
}
@media(max-width:640px){
.pricing-grid{
grid-template-columns:1fr;max-width:460px}
}
@media(max-width:960px){
.pricing-included-grid{
grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.pricing-included-grid{
grid-template-columns:1fr}
.pricing-compare-row{
grid-template-columns:1fr;gap:4px}
.pricing-compare-row.is-head{
display:none}
}
.faq{
max-width:720px;margin:0 auto 64px;padding:0 var(--page-gutter)}
.faq-item{
border-bottom:1px solid var(--border)}
.faq-q{
width:100%;box-sizing:border-box;text-align:left;padding:18px 0;font-size:15px;font-weight:600;color:var(--foreground);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q svg{
width:18px;height:18px;transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q svg{
transform:rotate(180deg)}
.faq-a{
display:none;padding:0 0 18px;font-size:14px;color:var(--muted-foreground);line-height:1.6}
.faq-item.open .faq-a{
display:block}
.packs{
max-width:1100px;margin:0 auto 64px;padding:0 var(--page-gutter)}
.packs-head{
margin-bottom:24px}
.packs-head h2{
font-size:32px;font-weight:700;line-height:1.2;margin-bottom:8px}
.packs-head p{
color:var(--muted-foreground);font-size:15px}
.pack-card{
background:#1a1a1a;border:1px solid var(--border);border-radius:24px;padding:28px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.pack-card h3{
font-size:22px;font-weight:700;margin-bottom:6px}
.pack-qty{
display:flex;gap:8px;margin:16px 0}
.pack-qty button{
width:40px;height:40px;border-radius:9999px;border:1px solid var(--border);font-weight:600;color:rgba(255,255,255,.7)}
.pack-qty button.active{
background:#fff;color:#121212;border-color:#fff}
.pack-buy{
display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.pack-buy .amount{
font-size:36px;font-weight:800}
@media(max-width:700px){
.pack-card{
grid-template-columns:1fr}
.pack-buy{
align-items:stretch}
}
.inner-hero{
padding:var(--hero-pad-y) var(--page-gutter) 32px;max-width:900px;margin:0 auto;text-align:center}
.inner-hero h1{
font-size:42px;font-weight:900;text-transform:uppercase;letter-spacing:-0.03em;line-height:1.05;margin-bottom:12px}
.inner-hero p{
font-size:16px;color:rgba(255,255,255,.72);font-weight:500}
.simple-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 var(--page-gutter) 48px;max-width:1400px;margin:0 auto}
@media(max-width:1000px){
.simple-grid{
grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
.simple-grid{
grid-template-columns:1fr}
.inner-hero h1{
font-size:32px}
}
.placeholder-page{
max-width:720px;margin:0 auto;padding:clamp(48px,8vw,80px) var(--page-gutter) 96px}
.placeholder-page>.contact-eyebrow{
text-align:left;margin-bottom:10px}
.placeholder-page>h1{
font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-0.03em;margin:0 0 28px;text-align:left}
.placeholder-page .article-body{
text-align:left}
.placeholder-page .article-body h2{
margin:28px 0 12px;font-size:20px;font-weight:800;letter-spacing:-0.02em}
.placeholder-page .article-body p{
color:var(--muted-foreground);margin:0 0 14px;line-height:1.7;font-size:15px}
.placeholder-page .article-body ul{
margin:0 0 16px;padding-left:1.2em;color:var(--muted-foreground);line-height:1.7;font-size:15px}
body.detail-open,body.modal-open,body.menu-open{
overflow:hidden}
body.modal-open .site-nav,body.modal-open .site-header{
pointer-events:none}
@media(max-width:1023px){
body.menu-open .site-header,body.menu-open .site-nav{
visibility:hidden;pointer-events:none}
body.detail-open.menu-open .site-header,body.detail-open.menu-open .site-nav{
visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@keyframes rise-in{
from{
opacity:0;transform:translateY(22px)}
to{
opacity:1;transform:translateY(0)}
}
@keyframes fade-up{
from{
opacity:0;transform:translateY(14px)}
to{
opacity:1;transform:translateY(0)}
}
@keyframes soft-pulse{
0%,100%{
opacity:.55;transform:scale(1)}
50%{
opacity:1;transform:scale(1.03)}
}
@keyframes shimmer-border{
0%{
background-position:0% 50%}
100%{
background-position:100% 50%}
}
@keyframes nav-slide-in{
from{
opacity:0;transform:translateY(-10px)}
to{
opacity:1;transform:translateY(0)}
}
@keyframes menu-fade{
from{
opacity:0}
to{
opacity:1}
}
@keyframes menu-item-in{
from{
opacity:0;transform:translateX(-12px)}
to{
opacity:1;transform:translateX(0)}
}
@keyframes scale-in{
from{
opacity:0;transform:scale(0.96)}
to{
opacity:1;transform:scale(1)}
}
@keyframes arrow-nudge{
0%,100%{
transform:translateX(0)}
50%{
transform:translateX(4px)}
}
.site-nav.is-scrolled{
max-width:var(--content-max);padding:8px 16px;column-gap:12px;background:color-mix(in srgb,var(--nav-pill-bg) 96%,var(--foreground));box-shadow:0 14px 44px color-mix(in srgb,#000 32%,transparent),0 2px 0 color-mix(in srgb,var(--foreground) 4%,transparent)}
.site-nav.is-scrolled .nav-logo img:not(.seam-logo-mark){
height:24px}
.site-nav.is-scrolled .seam-logo-mark{
width:24px;height:24px}
.site-nav.is-scrolled .seam-logo-word{
font-size:14px}
.site-nav.is-scrolled .nav-links a{
padding:7px 12px;font-size:12.5px}
.site-nav.is-scrolled .nav-links a::after{
left:12px;right:12px;bottom:3px}
.nav-logo{
transition:transform var(--dur) var(--ease-out)}
.nav-logo:hover{
transform:scale(1.03)}
.nav-links a::after{
content:"";display:block;position:absolute;left:14px;right:14px;bottom:4px;height:1.5px;border-radius:999px;background:var(--nav-underline);opacity:1;pointer-events:none;transform:scaleX(0);transform-origin:center;transition:transform .32s var(--ease-out,cubic-bezier(.22,1,.36,1))}
.nav-links a.is-active::after,.nav-links a:hover::after,.nav-links a:focus-visible::after{
transform:scaleX(1)}
.nav-badge-border{
background-size:200% 200%;animation:shimmer-border 3s ease-in-out infinite alternate}
.icon-btn{
transition:background .25s ease,transform .25s ease,color .25s ease}
.icon-btn:hover{
background:rgba(255,255,255,.08);transform:scale(1.08)}
.icon-btn:active{
transform:scale(0.94)}
.btn-signup{
transition:opacity .25s ease,transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s ease}
.btn-signup:hover{
opacity:1;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.18)}
.btn-signin{
transition:color .25s ease,opacity .25s ease}
.btn-signin:hover{
color:var(--text-hover)}
.mobile-menu.open .mobile-menu-nav a{
animation:menu-item-in .42s var(--ease-out) both}
.mobile-menu.open .mobile-menu-nav a:nth-child(1){
animation-delay:.03s}
.mobile-menu.open .mobile-menu-nav a:nth-child(2){
animation-delay:.06s}
.mobile-menu.open .mobile-menu-nav a:nth-child(3){
animation-delay:.09s}
.mobile-menu.open .mobile-menu-nav a:nth-child(4){
animation-delay:.12s}
.mobile-menu.open .mobile-menu-nav a:nth-child(5){
animation-delay:.15s}
.mobile-menu.open .mobile-menu-nav a:nth-child(6){
animation-delay:.18s}
.mobile-menu.open .mobile-menu-nav a:nth-child(7){
animation-delay:.21s}
.mobile-menu.open .mobile-menu-nav a:nth-child(8){
animation-delay:.24s}
.hero h1{
animation:rise-in .75s cubic-bezier(0.22,1,0.36,1) .06s both}
.hero-sub{
animation:rise-in .7s cubic-bezier(0.22,1,0.36,1) .16s both}
.hero .hero-cta-row{
animation:rise-in .7s cubic-bezier(0.22,1,0.36,1) .26s both}
.hero-meta{
animation:rise-in .65s cubic-bezier(0.22,1,0.36,1) .36s both}
.hero.is-settled h1,.hero.is-settled .hero-sub,.hero.is-settled .hero-cta-row,.hero.is-settled .hero-meta{
animation:none !important;opacity:1;transform:none;filter:none}
.superpowers-glow{
animation:hero-grad-shift 7s ease-in-out infinite alternate,soft-pulse 3.2s ease-in-out infinite}
@media(hover:none),(pointer:coarse){
.hero h1,.hero-sub,.hero .hero-cta-row,.hero-meta{
animation:none !important;opacity:1;transform:none;filter:none}
.hero-bg{
transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hero-wash{
animation:none;filter:none}
.hero-orb{
will-change:auto;animation:none;filter:blur(56px)}
.hero-icon-bob,.hero-dots span,.hero-scan{
animation:none !important}
.hero-icon{
opacity:.72}
.hero-icon-shell{
transform:rotateX(6deg) rotateY(-8deg)}
.hero-dots span{
opacity:.28}
.superpowers-fill .line,.superpowers-glow .line{
animation:none !important}
.superpowers-glow{
opacity:.4}
}
.btn-unlimited{
position:relative;overflow:hidden;transition:opacity .25s ease,transform .3s cubic-bezier(0.22,1,0.36,1),box-shadow .3s ease}
.btn-unlimited::after{
content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}
.btn-unlimited:hover{
opacity:1;transform:translateY(-3px) scale(1.02);box-shadow:0 12px 36px rgba(207,222,246,.28)}
.btn-unlimited:hover::after{
transform:translateX(120%)}
.btn-unlimited .btn-arrow{
display:inline-block;transition:transform .3s ease}
.btn-unlimited:hover .btn-arrow{
animation:arrow-nudge .7s ease infinite}
.filter-chip:hover{
transform:translateY(-1px)}
.filter-chip.active{
box-shadow:0 0 0 1px color-mix(in srgb,var(--foreground) 10%,transparent)}
.filter-chip.active:hover{
background:color-mix(in srgb,var(--secondary) 80%,var(--foreground))}
.filter-settings{
transition:background .25s ease,transform .35s ease,border-color .25s ease,box-shadow .25s ease}
.filter-settings:hover{
background:var(--nav-hover-bg);border-color:color-mix(in srgb,var(--foreground) 18%,transparent);transform:rotate(90deg) scale(1.06)}
.prompt-card{
transition:opacity .6s cubic-bezier(0.215,0.61,0.355,1),filter .6s cubic-bezier(0.215,0.61,0.355,1),transform .6s cubic-bezier(0.215,0.61,0.355,1)}
.prompt-card.is-entering{
opacity:0;filter:blur(16px);transform:translateY(28px);content-visibility:visible}
.prompt-meta h3{
transition:color .4s ease}
.prompt-action{
opacity:.72;transition:color .35s ease,transform .4s cubic-bezier(0.22,1,0.36,1),opacity .35s ease}
.prompt-action:hover{
transform:scale(1.1);color:var(--text-hover);opacity:1}
.reveal{
opacity:0;filter:blur(16px);transform:translateY(40px);transition:opacity .6s cubic-bezier(0.215,0.61,0.355,1),filter .6s cubic-bezier(0.215,0.61,0.355,1),transform .6s cubic-bezier(0.215,0.61,0.355,1);will-change:opacity,filter,transform}
.reveal.is-visible{
opacity:1;filter:blur(0);transform:translateY(0);will-change:auto}
.d3-banner{
transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.d3-banner.reveal{
transition:border-color .35s ease,box-shadow .35s ease,opacity .6s cubic-bezier(0.215,0.61,0.355,1),filter .6s cubic-bezier(0.215,0.61,0.355,1),transform .6s cubic-bezier(0.215,0.61,0.355,1)}
.d3-banner:hover{
border-color:rgba(255,255,255,.14);box-shadow:0 16px 48px rgba(0,0,0,.35)}
.btn-d3{
transition:opacity .25s ease,transform .3s ease,box-shadow .3s ease}
.btn-d3:hover{
opacity:1;transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,245,245,.18)}
.d3-item-title{
transition:color .25s ease}
.d3-banner .d3-item:hover .d3-item-title{
color:#fff}
.detail-overlay.open{
animation:fade-in .32s ease}
.detail-overlay.is-ready .detail-main{
animation:detail-rise .55s cubic-bezier(0.22,1,0.36,1) both}
.detail-overlay.is-ready .detail-rail .prompt-card,.detail-overlay.is-ready .detail-below .prompt-card{
animation:fade-up .5s cubic-bezier(0.22,1,0.36,1) both}
.detail-overlay.is-ready .detail-rail:nth-child(2) .prompt-card{
animation-delay:.06s}
.detail-overlay.is-ready .detail-rail:nth-child(3) .prompt-card{
animation-delay:.1s}
.detail-overlay.is-ready .detail-below .prompt-card:nth-child(1){
animation-delay:.08s}
.detail-overlay.is-ready .detail-below .prompt-card:nth-child(2){
animation-delay:.12s}
.detail-overlay.is-ready .detail-below .prompt-card:nth-child(3){
animation-delay:.16s}
.detail-overlay.is-ready .detail-below .prompt-card:nth-child(4){
animation-delay:.2s}
@keyframes detail-rise{
from{
opacity:0;transform:translateY(18px) scale(0.985);filter:blur(4px)}
to{
opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.detail-loading{
display:flex;flex-direction:column;align-items:center;gap:36px;padding:48px 12px 64px;min-height:min(70vh,640px);justify-content:center;animation:fade-in .35s ease both}
.detail-loading--error{
min-height:40vh}



.detail-loading-text{
margin:0;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted-foreground);animation:detail-text-breathe 1.8s ease-in-out infinite}

.detail-loading-media{
min-height:280px;border-radius:20px;aspect-ratio:16/10}
.detail-loading-side{
display:flex;flex-direction:column;gap:12px;padding-top:8px}
@keyframes detail-orb-pulse{
0%,100%{
transform:scale(1);opacity:1}
50%{
transform:scale(1.08);opacity:.88}
}
@keyframes detail-ring-spin{
to{
transform:rotate(360deg)}
}
@keyframes detail-text-breathe{
0%,100%{
opacity:.55}
50%{
opacity:1}
}
@media(max-width:720px){

.detail-loading-side{
display:none}
}
.detail-back{
transition:background .25s ease,transform .25s ease}
.detail-back:hover{
background:rgba(0,0,0,.75);transform:scale(1.08)}
.btn-go-unlimited{
transition:opacity .25s ease,transform .3s ease,box-shadow .3s ease}
.btn-go-unlimited:hover{
opacity:1;transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,255,255,.15)}
.sponsored-link{
transition:background .25s ease,transform .25s ease}
.sponsored-link:hover{
background:rgba(41,41,41,.45);transform:translateX(3px)}
.price-card{
transition:transform .4s cubic-bezier(0.22,1,0.36,1),border-color .35s ease,box-shadow .4s ease}
.btn-price{
transition:opacity .25s ease,transform .3s ease,box-shadow .3s ease}
.btn-price:hover{
opacity:1;transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,255,255,.18)}
.search-modal.open{
animation:fade-in .25s ease}
.search-box{
animation:rise-in .35s cubic-bezier(0.22,1,0.36,1) both}
.search-result{
transition:background .2s ease,transform .2s ease}
.search-result:hover{
background:rgba(255,255,255,.06);transform:translateX(4px)}
.hero-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-wash{
position:absolute;inset:-18% -8%;background:radial-gradient(ellipse 55% 50% at 28% 32%,rgba(208,178,255,0.34),transparent 68%),radial-gradient(ellipse 48% 46% at 76% 28%,rgba(232,64,13,0.22),transparent 70%),radial-gradient(ellipse 60% 42% at 52% 78%,rgba(255,220,180,0.14),transparent 72%);filter:blur(2px);animation:hero-wash-drift 18s ease-in-out infinite alternate}
.hero-orb{
position:absolute;border-radius:50%;filter:blur(72px);opacity:.72;will-change:transform}
.hero-orb-a{
width:min(460px,70vw);height:min(460px,70vw);left:-6%;top:-8%;background:radial-gradient(circle,rgba(180,150,255,0.5),transparent 70%);animation:hero-orb-a 14s ease-in-out infinite}
.hero-orb-b{
width:min(380px,60vw);height:min(380px,60vw);right:-4%;bottom:-12%;background:radial-gradient(circle,rgba(232,90,40,0.32),transparent 72%);animation:hero-orb-b 16s ease-in-out infinite}
.hero-orb-c{
width:min(280px,48vw);height:min(280px,48vw);left:48%;top:58%;background:radial-gradient(circle,rgba(255,220,180,0.22),transparent 72%);animation:hero-orb-c 12s ease-in-out infinite;opacity:.55}
.hero-ripples{
--ripple-x:50%;--ripple-y:52%;position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:min(420px,62vw);height:min(420px,62vw);transform:translate(-50%,-50%);pointer-events:none;transition:left .45s cubic-bezier(0.22,1,0.36,1),top .45s cubic-bezier(0.22,1,0.36,1)}
.hero-ripples span{
position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--seam-accent,#d0b2ff) 48%,#9ec4ff);box-shadow:0 0 0 1px color-mix(in srgb,#9ec4ff 16%,transparent),inset 0 0 18px color-mix(in srgb,var(--seam-accent,#d0b2ff) 12%,transparent);opacity:0;animation:hero-ripple 6.8s ease-out infinite}
.hero-ripples span:nth-child(2){
animation-delay:2s}
.hero-ripples span:nth-child(3){
animation-delay:4s}
.hero-icons{
position:absolute;inset:0;pointer-events:none;perspective:900px;perspective-origin:50% 42%}
.hero-icon{
--icon-a:#b48cff;--icon-b:#7c5cff;position:absolute;width:52px;height:52px;transform-style:preserve-3d;will-change:translate}
.hero-icon-bob{
display:block;width:100%;height:100%;animation:hero-icon-float 9s ease-in-out infinite;transform-style:preserve-3d}
.hero-icon-shell{
position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:16px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--icon-a) 88%,#fff) 0%,var(--icon-b) 72%),color-mix(in srgb,var(--icon-b) 40%,transparent);border:1px solid color-mix(in srgb,#fff 28%,transparent);box-shadow:0 1px 0 color-mix(in srgb,#fff 35%,transparent) inset,0 -10px 18px color-mix(in srgb,#000 22%,transparent) inset,0 14px 28px color-mix(in srgb,var(--icon-b) 38%,transparent),0 22px 40px rgba(0,0,0,.28);transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-10deg);transition:box-shadow .35s ease,border-color .35s ease,filter .35s ease;will-change:transform;backface-visibility:hidden}
.hero-icon-shine{
position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(125deg,rgba(255,255,255,0.42) 0%,rgba(255,255,255,0.08) 38%,transparent 52%),radial-gradient(120% 80% at 20% 15%,rgba(255,255,255,0.35),transparent 45%);pointer-events:none;mix-blend-mode:soft-light}
.hero-icon svg{
position:relative;z-index:1;width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.25))}
.hero-icon--1{
left:8%;top:auto;bottom:26%;width:56px;height:56px}
.hero-icon--1 .hero-icon-bob{
animation-delay:0s}
.hero-icon--2{
right:8%;top:auto;bottom:30%;width:50px;height:50px}
.hero-icon--2 .hero-icon-bob{
animation-delay:1.1s;animation-duration:10.4s}
.hero-icon--3{
left:18%;top:auto;bottom:8%;width:46px;height:46px}
.hero-icon--3 .hero-icon-bob{
animation-delay:2s;animation-duration:8.6s}
.hero-icon--4{
right:16%;top:auto;bottom:6%;width:54px;height:54px}
.hero-icon--4 .hero-icon-bob{
animation-delay:.7s;animation-duration:11s}
.hero-icon--5{
left:30%;top:auto;bottom:18%;width:40px;height:40px;opacity:.92}
.hero-icon--5 .hero-icon-bob{
animation-delay:1.5s;animation-duration:9.6s}
.hero-icon--6{
right:28%;top:auto;bottom:16%;width:42px;height:42px;opacity:.9}
.hero-icon--6 .hero-icon-bob{
animation-delay:2.6s;animation-duration:10.2s}
.hero-dots span{
position:absolute;width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 70%,#fff);box-shadow:0 0 12px color-mix(in srgb,var(--seam-accent,#d0b2ff) 55%,transparent);opacity:0;animation:hero-dot-rise 8s linear infinite}
.hero-dots span:nth-child(1){
left:12%;animation-delay:0s}
.hero-dots span:nth-child(2){
left:24%;animation-delay:1.1s;animation-duration:9s}
.hero-dots span:nth-child(3){
left:38%;animation-delay:2.2s;animation-duration:7.5s}
.hero-dots span:nth-child(4){
left:52%;animation-delay:.6s;animation-duration:10s}
.hero-dots span:nth-child(5){
left:64%;animation-delay:3s;animation-duration:8.2s}
.hero-dots span:nth-child(6){
left:74%;animation-delay:1.7s;animation-duration:9.4s}
.hero-dots span:nth-child(7){
left:84%;animation-delay:2.6s;animation-duration:7.8s}
.hero-dots span:nth-child(8){
left:18%;animation-delay:4s;animation-duration:11s}
.hero-spotlight{
position:absolute;inset:0;background:radial-gradient(460px 320px at var(--gradient-x) var(--gradient-y),rgba(255,255,255,0.28),transparent 55%),radial-gradient(300px 240px at calc(var(--gradient-x) + 4%) calc(var(--gradient-y) - 3%),color-mix(in srgb,var(--seam-accent,#d0b2ff) 42%,transparent),transparent 68%),radial-gradient(220px 180px at calc(var(--gradient-x) - 5%) calc(var(--gradient-y) + 4%),rgba(232,64,13,0.22),transparent 70%);mix-blend-mode:soft-light;will-change:background}
.hero-track .hero-copy{
transition:transform .05s linear;will-change:transform}
.hero-track .hero-icon{
transition:translate .05s linear}
.hero-track .hero-icon-shell{
transition:transform .05s linear,box-shadow .35s ease,filter .35s ease}
.hero.is-tracking .hero-icon-shell{
border-color:color-mix(in srgb,#fff 42%,transparent);filter:saturate(1.08) brightness(1.04);box-shadow:0 1px 0 color-mix(in srgb,#fff 42%,transparent) inset,0 -12px 20px color-mix(in srgb,#000 24%,transparent) inset,0 16px 34px color-mix(in srgb,var(--icon-b) 48%,transparent),0 28px 48px rgba(0,0,0,.32)}
.hero-scan{
position:absolute;inset:0;background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,0.05) 48%,transparent 60%);background-size:220% 100%;animation:hero-scan-sweep 11s ease-in-out infinite;mix-blend-mode:screen}
.hero-fade{
position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,var(--background) 100%),radial-gradient(ellipse 90% 70% at 50% 18%,transparent 0%,color-mix(in srgb,var(--background) 55%,transparent) 100%)}
@keyframes hero-wash-drift{
0%{
transform:translate3d(-1.5%,0,0) scale(1)}
100%{
transform:translate3d(2%,3%,0) scale(1.05)}
}
@keyframes hero-orb-a{
0%,100%{
transform:translate(0,0) scale(1)}
50%{
transform:translate(36px,28px) scale(1.08)}
}
@keyframes hero-orb-b{
0%,100%{
transform:translate(0,0) scale(1)}
50%{
transform:translate(-40px,-22px) scale(1.1)}
}
@keyframes hero-orb-c{
0%,100%{
transform:translate(0,0) scale(1)}
50%{
transform:translate(-24px,18px) scale(1.12)}
}
@keyframes hero-ripple{
0%{
transform:scale(0.4);opacity:.62}
60%{
opacity:.22}
100%{
transform:scale(1.05);opacity:0}
}
@keyframes hero-icon-float{
0%,100%{
transform:translate3d(0,0,0) rotate(-1.5deg)}
50%{
transform:translate3d(0,-12px,0) rotate(2.5deg)}
}
@keyframes hero-dot-rise{
0%{
transform:translateY(70%) scale(0.6);opacity:0}
18%{
opacity:.75}
80%{
opacity:.35}
100%{
transform:translateY(-20%) scale(1.15);opacity:0}
}
@keyframes hero-scan-sweep{
0%{
background-position:130% 0}
100%{
background-position:-40% 0}
}
@media(max-width:700px){
.hero-icon--5,.hero-icon--6{
display:none}
.hero-icon,.hero-icon--1,.hero-icon--2,.hero-icon--3,.hero-icon--4{
width:40px;height:40px}
.hero-icon-shell{
border-radius:13px}
.hero-icon svg{
width:17px;height:17px}
.hero-ripples{
width:min(320px,78vw);height:min(320px,78vw)}
.hero-icon--1{
bottom:22%}
.hero-icon--2{
bottom:26%}
}
html[data-theme=light] .hero-icon-shell{
color:#fff;border-color:color-mix(in srgb,#fff 55%,transparent);box-shadow:0 1px 0 color-mix(in srgb,#fff 55%,transparent) inset,0 -8px 16px color-mix(in srgb,#000 12%,transparent) inset,0 12px 26px color-mix(in srgb,var(--icon-b) 32%,transparent),0 18px 36px rgba(18,18,20,.12)}
html[data-theme=light] .hero.is-tracking .hero-icon-shell{
box-shadow:0 1px 0 color-mix(in srgb,#fff 62%,transparent) inset,0 -10px 18px color-mix(in srgb,#000 14%,transparent) inset,0 14px 30px color-mix(in srgb,var(--icon-b) 40%,transparent),0 22px 40px rgba(18,18,20,.14)}
html[data-theme=light] .hero-ripples span{
border-color:color-mix(in srgb,#7c9dff 55%,#b48cff);box-shadow:0 0 0 1px color-mix(in srgb,#9eb6ff 35%,transparent),inset 0 0 32px color-mix(in srgb,#b48cff 22%,transparent)}
html[data-theme=light] .hero-dots span{
background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 80%,#7c5cff)}
.feedback-modal{
display:none;position:fixed;inset:0;z-index:130;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.feedback-modal.open{
display:flex;animation:fade-in .25s ease}
.feedback-dialog{
width:100%;max-width:440px;position:relative;padding:28px 24px 22px;border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#1c1c1c 0%,#151515 100%);box-shadow:0 24px 80px rgba(0,0,0,.55);animation:scale-in .35s cubic-bezier(0.22,1,0.36,1) both;overflow:hidden}
.feedback-dialog::before{
content:"";position:absolute;inset:-40% -20% auto;height:180px;background:radial-gradient(ellipse at 50% 0%,rgba(208,178,255,0.22),transparent 70%);pointer-events:none}
.feedback-close{
position:absolute;top:14px;right:14px;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);color:var(--muted-foreground);cursor:pointer;z-index:2;transition:background .2s,color .2s,transform .2s}
.feedback-close:hover{
background:rgba(255,255,255,.08);color:#fff;transform:scale(1.05)}
.feedback-dialog h2{
position:relative;z-index:1;margin:0 40px 8px 0;font-size:1.35rem;font-weight:750;letter-spacing:-0.02em;color:#fff}
.feedback-lead{
position:relative;z-index:1;margin:0 0 20px;font-size:.9rem;line-height:1.55;color:var(--muted-foreground)}
.feedback-resource{
position:relative;z-index:1;display:inline-flex;align-items:center;max-width:100%;margin:0 0 18px;padding:6px 12px;border-radius:999px;font-size:.75rem;font-weight:650;color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 90%,#fff);background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 14%,transparent);border:1px solid color-mix(in srgb,var(--seam-accent,#d0b2ff) 28%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feedback-form{
position:relative;z-index:1}
.feedback-form .auth-field textarea{
width:100%;min-height:110px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:#fff;font-size:16px;line-height:1.5;outline:none;resize:vertical;transition:border-color .25s,box-shadow .25s,background .25s}
.feedback-form .auth-field textarea:focus{
border-color:rgba(208,178,255,.55);box-shadow:0 0 0 3px rgba(208,178,255,.12);background:rgba(0,0,0,.45)}
.feedback-status{
min-height:20px;margin:4px 0 12px;font-size:.8125rem;line-height:1.4;color:var(--muted-foreground)}
.feedback-status.is-ok{
color:#7ddea2}
.feedback-status.is-err{
color:#ff8f8f}
.feedback-row{
display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){
.feedback-row{
grid-template-columns:1fr}
}
.detail-feedback-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--foreground) 18%,transparent);background:rgba(0,0,0,0);color:var(--muted-foreground);font-size:13px;font-weight:550;transition:background .2s,color .2s,border-color .2s}
.detail-feedback-btn:hover{
color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 32%,transparent);background:color-mix(in srgb,var(--foreground) 5%,transparent)}
.detail-feedback-btn svg{
width:15px;height:15px;flex-shrink:0}
html[data-theme=light] .feedback-modal{
background:rgba(20,20,22,.45)}
html[data-theme=light] .feedback-dialog{
background:linear-gradient(180deg,#fff 0%,#f7f7f8 100%);border-color:rgba(20,20,22,.08);box-shadow:0 24px 64px rgba(20,20,22,.18)}
html[data-theme=light] .feedback-dialog h2{
color:var(--foreground)}
html[data-theme=light] .feedback-close{
color:var(--muted-foreground)}
html[data-theme=light] .feedback-close:hover{
background:rgba(20,20,22,.06);color:var(--foreground)}
html[data-theme=light] .feedback-form .auth-field span{
color:var(--muted-foreground)}
html[data-theme=light] .feedback-form .auth-field input,html[data-theme=light] .feedback-form .auth-field textarea{
background:rgba(255,255,255,.92);color:var(--foreground);border-color:rgba(20,20,22,.12)}
html[data-theme=light] .feedback-form .auth-field input:focus,html[data-theme=light] .feedback-form .auth-field textarea:focus{
background:#fff}
html[data-theme=light] .detail-feedback-btn{
border-color:rgba(20,20,22,.16)}
html[data-theme=light] .detail-feedback-btn:hover{
background:rgba(20,20,22,.04)}
.auth-modal{
display:none;position:fixed;inset:0;z-index:120;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.auth-modal.open{
display:flex;animation:fade-in .25s ease}
.auth-dialog{
width:100%;max-width:420px;background:linear-gradient(180deg,#1c1c1c 0%,#151515 100%);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:52px 24px 24px;position:relative;box-shadow:0 24px 80px rgba(0,0,0,.55);animation:scale-in .35s cubic-bezier(0.22,1,0.36,1) both;overflow:hidden}
.auth-dialog::before{
content:"";position:absolute;inset:-40% -20% auto;height:180px;background:radial-gradient(ellipse at 50% 0%,rgba(208,178,255,0.22),transparent 70%);pointer-events:none}
.auth-close{
position:absolute;top:16px;right:16px;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);color:var(--muted-foreground);cursor:pointer;line-height:0;appearance:none;-webkit-appearance:none;transition:background .2s,color .2s,transform .2s;z-index:5}
.auth-close svg{
display:block;width:18px;height:18px;flex-shrink:0}
.auth-close:hover{
background:rgba(255,255,255,.08);color:#fff;transform:scale(1.05)}
.auth-tabs{
display:flex;gap:6px;padding:4px;background:rgba(0,0,0,.35);border-radius:14px;margin:0 0 22px;position:relative;z-index:1}
.auth-modal[data-auth-mode=lost] .auth-tabs{
display:none}
.auth-hp{
position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;opacity:0 !important;pointer-events:none !important}
.auth-code-row,.auth-math-row{
display:flex;gap:8px;align-items:center}
.auth-code-row input,.auth-math-row input{
flex:1;min-width:0}
.auth-code-btn,.auth-math-refresh{
flex-shrink:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.auth-code-btn:hover:not(:disabled),.auth-math-refresh:hover:not(:disabled){
background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.auth-code-btn:disabled,.auth-math-refresh:disabled{
opacity:.55;cursor:not-allowed}
.auth-math-q{
flex:0 0 auto;min-width:72px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.auth-captcha{
margin:4px 0 12px}
.auth-captcha .cf-turnstile{
margin-top:4px}
.auth-tab{
flex:1;padding:10px 12px;border-radius:11px;font-size:14px;font-weight:600;color:rgba(255,255,255,.55);transition:background .25s,color .25s,transform .25s}
.auth-tab.active{
background:#fff;color:#121212;box-shadow:0 4px 16px rgba(255,255,255,.12)}
.auth-tab:not(.active):hover{
color:#fff}
.auth-panel{
display:none;position:relative;z-index:1}
.auth-panel.active{
display:block;animation:fade-up .35s ease both}
.auth-panel h2{
font-size:22px;font-weight:800;margin-bottom:6px}
.auth-panel>p{
font-size:13px;color:var(--muted-foreground);margin-bottom:20px}
.auth-field{
display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.auth-field span{
font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.auth-field input{
width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:#fff;font-size:16px;outline:none;transition:border-color .25s,box-shadow .25s,background .25s}
.auth-field input:focus{
border-color:rgba(208,178,255,.55);box-shadow:0 0 0 3px rgba(208,178,255,.12);background:rgba(0,0,0,.45)}
.auth-row{
display:flex;align-items:center;justify-content:space-between;margin:4px 0 18px;font-size:12px;color:var(--muted-foreground)}
.auth-row label{
display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.auth-row a{
color:var(--muted-foreground);transition:color .2s}
.auth-row a:hover{
color:var(--text-hover)}
.auth-submit{
width:100%;height:48px;border-radius:999px;background:#fff;color:#121212;font-size:15px;font-weight:700;transition:transform .25s,box-shadow .25s,opacity .2s}
.auth-submit:hover:not(:disabled){
transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,255,255,.18)}
.auth-submit:disabled{
opacity:.55;cursor:wait;transform:none;box-shadow:none}
.auth-row--stack{
flex-direction:column;align-items:flex-start;gap:10px}
.auth-agree{
align-items:flex-start;line-height:1.45;max-width:100%}
.auth-agree a{
color:var(--link,#d0b2ff);text-decoration:underline;text-underline-offset:2px}
.auth-switch{
margin-top:14px;text-align:center;font-size:13px}
.auth-switch a{
color:var(--muted-foreground);transition:color .2s}
.auth-switch a:hover{
color:var(--text-hover)}
.auth-closed{
margin-top:8px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--muted-foreground);font-size:13px;line-height:1.5}
.auth-divider{
display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:rgba(255,255,255,.35);font-size:12px}
.auth-divider::before,.auth-divider::after{
content:"";flex:1;height:1px;background:var(--border)}
.auth-social{
display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-social:has(>:only-child){
grid-template-columns:1fr}
.auth-social button,.auth-social .auth-social-btn{
display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);font-size:13px;font-weight:600;color:rgba(255,255,255,.85);text-decoration:none;transition:background .2s,transform .2s,border-color .2s}
.auth-social button:hover,.auth-social .auth-social-btn:hover{
background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);transform:translateY(-1px);color:#fff}
.auth-toast{
margin-top:14px;padding:10px 12px;border-radius:10px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;font-size:13px;line-height:1.45;display:none}
.auth-toast.show{
display:block;animation:fade-up .3s ease both}
.auth-toast.is-error{
background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.4);color:#fca5a5}
.contact-hero,.cat-hero{
position:relative;text-align:center;padding:var(--section-pad-y) var(--page-gutter) 28px;max-width:760px;margin:0 auto;overflow:hidden}
.contact-hero-glow,.cat-hero-glow{
position:absolute;inset:-20% 10% auto;height:220px;background:radial-gradient(ellipse at center,rgba(208,178,255,0.2),transparent 70%);pointer-events:none}
.contact-eyebrow{
position:relative;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px}
.contact-hero h1,.cat-hero h1{
position:relative;font-size:42px;font-weight:900;letter-spacing:-0.03em;margin-bottom:12px}
.contact-lead{
position:relative;font-size:15px;color:rgba(255,255,255,.68);line-height:1.6;max-width:520px;margin:0 auto}
.contact-layout{
display:grid;grid-template-columns:280px 1fr;gap:20px;max-width:1040px;margin:0 auto 80px;padding:0 var(--page-gutter)}
.contact-aside{
display:flex;flex-direction:column;gap:12px}
.contact-info-card{
background:#1a1a1a;border:1px solid var(--border);border-radius:18px;padding:18px;transition:transform .3s ease,border-color .3s ease}
.contact-info-card:hover{
transform:translateY(-2px);border-color:rgba(255,255,255,.14)}
.contact-info-label{
display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:8px}
.contact-info-card a,.contact-info-card strong{
font-size:15px;font-weight:600;color:#fff}
.contact-info-card a:hover{
color:var(--link-hover)}
.contact-topic-chips{
display:flex;flex-wrap:wrap;gap:8px}
.contact-topic-chips span{
padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.75)}
.contact-aside-note{
font-size:13px;color:var(--muted-foreground);line-height:1.5;padding:4px 2px}
.contact-aside-note a{
color:#fff;text-decoration:underline;text-underline-offset:3px}
.contact-form{
background:#1a1a1a;border:1px solid var(--border);border-radius:24px;padding:28px}
.contact-form-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{
display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field>span{
font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.field input,.field textarea{
width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:16px;outline:none;resize:vertical;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{
border-color:rgba(208,178,255,.55);box-shadow:0 0 0 3px rgba(208,178,255,.12)}
.contact-subject-pills{
display:flex;flex-wrap:wrap;gap:8px}
.subject-pill{
padding:8px 14px;border-radius:999px;border:1px solid var(--border);font-size:13px;font-weight:500;color:rgba(255,255,255,.65);transition:background .25s,color .25s,border-color .25s,transform .25s}
.subject-pill:hover{
color:#fff;transform:translateY(-1px)}
.subject-pill.active{
background:#fff;color:#121212;border-color:#fff}
.contact-form-footer{
display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.contact-form-hint{
font-size:12px;color:rgba(255,255,255,.4)}
.btn-contact-submit{
display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 24px;border-radius:999px;background-image:linear-gradient(to top,rgb(207,222,246) 20%,rgb(250,250,250) 80%);color:#09090b;font-size:15px;font-weight:700;transition:transform .25s,box-shadow .25s;white-space:nowrap}
.btn-contact-submit:hover{
transform:translateY(-2px);box-shadow:0 12px 32px rgba(207,222,246,.25);color:#09090b}
.contact-toast{
margin-top:14px;padding:12px 14px;border-radius:12px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#86efac;font-size:14px;animation:fade-up .35s ease both}
@media(max-width:860px){
.contact-layout{
grid-template-columns:1fr}
.contact-form-grid{
grid-template-columns:1fr}
.contact-form-footer{
flex-direction:column;align-items:stretch}
.contact-hero h1,.cat-hero h1{
font-size:32px}
}
.cat-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.cat-search{
flex:1;max-width:420px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#1a1a1a;border:1px solid var(--border);transition:border-color .25s,box-shadow .25s}
.cat-search:focus-within{
border-color:rgba(208,178,255,.45);box-shadow:0 0 0 3px rgba(208,178,255,.1)}
.cat-search svg{
width:18px;height:18px;color:var(--muted-foreground);flex-shrink:0}
.cat-search input{
flex:1;border:none;outline:none;background:rgba(0,0,0,0);color:#fff;font-size:16px}
.cat-toolbar-meta{
display:flex;align-items:center;gap:14px;flex-shrink:0}
.cat-count{
font-size:13px;color:var(--muted-foreground);white-space:nowrap}
.cat-cloud{
display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-bottom:24px;overflow-x:auto;padding:2px 0 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}
.cat-cloud::-webkit-scrollbar{
display:none}
.cat-chip{
display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:#171717;font-size:14px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap;scroll-snap-align:start;transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
.cat-chip .num{
font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.65)}
.cat-chip:hover{
transform:translateY(-2px);border-color:rgba(255,255,255,.18)}
.cat-chip.active{
background:#fff;color:#121212;border-color:#fff;box-shadow:0 8px 24px rgba(255,255,255,.12)}
.cat-chip.active .num{
background:rgba(0,0,0,.1);color:#121212}
.cat-panels{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:40px}
.cat-panel{
position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border);background:#171717;padding:20px 18px;min-height:132px;cursor:pointer;transition:transform .35s cubic-bezier(0.22,1,0.36,1),border-color .3s,box-shadow .35s}
.cat-panel::before{
content:"";position:absolute;inset:auto -20% -40%;height:90px;border-radius:50%;filter:blur(28px);opacity:.55;pointer-events:none;transition:opacity .3s,transform .4s}
.cat-panel.tone-violet::before{
background:#a78bfa}
.cat-panel.tone-blue::before{
background:#60a5fa}
.cat-panel.tone-pink::before{
background:#f472b6}
.cat-panel.tone-orange::before{
background:#fb923c}
.cat-panel.tone-mint::before{
background:#34d399}
.cat-panel.tone-gold::before{
background:#fbbf24}
.cat-panel.tone-cyan::before{
background:#22d3ee}
.cat-panel.tone-green::before{
background:#4ade80}
.cat-panel.tone-rose::before{
background:#fb7185}
.cat-panel.tone-indigo::before{
background:#818cf8}
.cat-panel:hover{
transform:translateY(-4px);border-color:rgba(255,255,255,.16);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.cat-panel:hover::before{
opacity:.8;transform:scale(1.15)}
.cat-panel h3{
position:relative;font-size:16px;font-weight:750;margin-bottom:6px}
.cat-panel p{
position:relative;font-size:12px;color:var(--muted-foreground);line-height:1.4}
.cat-panel .panel-count{
position:relative;display:inline-block;margin-top:12px;font-size:11px;font-weight:700;color:rgba(255,255,255,.55)}
.cat-results-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cat-results-head h2{
font-size:20px;font-weight:750}
.cat-clear{
font-size:13px;font-weight:600;color:var(--muted-foreground);white-space:nowrap;transition:color .2s}
.cat-clear:hover{
color:var(--text-hover)}
.cat-results{
padding-bottom:64px}
@media(max-width:1100px){
.cat-panels{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.cat-panels{
grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:28px}
.cat-panel{
padding:16px 14px;min-height:112px}
.cat-toolbar{
flex-direction:column;align-items:stretch}
.cat-toolbar-meta{
justify-content:space-between}
.cat-search{
max-width:none}
}
@media(max-width:420px){
.cat-panels{
grid-template-columns:1fr}
}
.seam-no-card-hover .prompt-media video.seam-card-preview,
.seam-no-card-hover .d3-item-media video.seam-card-preview,
.seam-no-card-hover .prompt-media video.seam-card-preview,
.seam-no-card-hover .d3-item-media video.seam-card-preview,
.seam-no-card-hover .prompt-card:hover .prompt-media video,
.seam-no-card-hover .prompt-card:focus-within .prompt-media video{
opacity:0 !important}
.hero.hero-static{
background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(208,178,255,0.12),transparent 60%),var(--background)}
.hero.hero-static .hero-spotlight,.hero.hero-static .hero-scan{
display:none}
.article-related-resources{
margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}
.article-related-resources h2{
font-size:24px;font-weight:800;margin-bottom:8px}
.article-related-resources .prompt-grid{
margin-top:8px}
.article-more{
padding-top:24px;padding-bottom:64px}
.article-more h2{
font-size:22px;font-weight:800;margin-bottom:18px}
.detail-type-badge{
display:inline-flex;align-self:flex-start;padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--link) 40%,transparent);background:color-mix(in srgb,var(--link) 12%,transparent);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--link)}
.blog-hero{
position:relative;text-align:center;padding:var(--section-pad-y) var(--page-gutter) 28px;max-width:min(880px,100%);margin:0 auto;overflow:hidden}
.blog-hero-glow{
position:absolute;inset:-20% 10% auto;height:220px;background:radial-gradient(ellipse at center,rgba(96,165,250,0.18),transparent 70%);pointer-events:none;animation:blog-glow-pulse 8s ease-in-out infinite alternate}
.blog-hero h1{
position:relative;font-size:clamp(32px,4vw,46px);font-weight:900;letter-spacing:-0.03em;margin-bottom:12px}
.blog-layout{
display:grid;grid-template-columns:clamp(220px,18vw,280px) minmax(0,1fr);gap:clamp(20px,3vw,36px);max-width:var(--content-max);width:100%;margin:0 auto 80px;align-items:start}
.blog-layout:not(:has(.blog-aside)),.blog-layout.blog-layout--solo{
grid-template-columns:minmax(0,1fr);max-width:min(1120px,100%)}
.blog-main{
min-width:0}
.blog-aside h2,.seam-widget-title{
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 14px}
.blog-cat-list{
display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.blog-cat-btn{
display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0);color:rgba(255,255,255,.72);font-size:14px;font-weight:600;transition:background .25s,border-color .25s,color .25s,transform .25s}
.blog-cat-btn .num{
font-size:11px;color:rgba(255,255,255,.4)}
.blog-cat-btn:hover{
background:var(--nav-hover-bg);color:var(--text-hover);transform:translateX(2px)}
.blog-cat-btn.active{
background:#1a1a1a;border-color:var(--border);color:#fff}
.blog-cat-btn.active .num{
color:rgba(255,255,255,.7)}
.blog-aside-card{
padding:16px;border-radius:16px;border:1px solid var(--border);background:#171717}
.blog-aside-card strong{
display:block;font-size:14px;margin-bottom:8px}
.blog-aside-card p{
font-size:13px;color:var(--muted-foreground);line-height:1.5;margin-bottom:12px}
.blog-aside-card a{
font-size:13px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
.blog-toolbar{
display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.blog-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.blog-card{
display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:#171717;transition:transform .4s cubic-bezier(0.22,1,0.36,1),border-color .3s,box-shadow .4s,opacity .45s ease;cursor:pointer;text-align:left;color:inherit;width:100%;animation:fade-up .55s cubic-bezier(0.22,1,0.36,1) both}
.blog-card:nth-child(1){
animation-delay:.02s}
.blog-card:nth-child(2){
animation-delay:.07s}
.blog-card:nth-child(3){
animation-delay:.12s}
.blog-card:nth-child(4){
animation-delay:.17s}
.blog-card:nth-child(5){
animation-delay:.22s}
.blog-card:nth-child(6){
animation-delay:.27s}
.blog-card:hover{
transform:translateY(-6px);border-color:rgba(255,255,255,.16);box-shadow:0 22px 48px rgba(0,0,0,.38)}
.blog-card-cover{
aspect-ratio:16/10;overflow:hidden;background:var(--secondary)}
.blog-card-cover img{
width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(0.22,1,0.36,1)}
.blog-card:hover .blog-card-cover img{
transform:scale(1.05)}
.blog-card-body{
padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-meta{
display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted-foreground)}
.blog-card-tag{
padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 6%,transparent);color:var(--foreground);font-weight:600}
.blog-card-body h3{
font-size:18px;font-weight:750;line-height:1.35}
.blog-card-body p{
font-size:13px;color:var(--muted-foreground);line-height:1.55;flex:1}
.blog-card-foot{
display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted-foreground);margin-top:4px}
.blog-card-foot span:last-child{
color:var(--foreground);font-weight:600}
.article-page{
max-width:min(960px,100%);width:100%;min-width:0;margin:0 auto;padding:40px 0 24px;overflow-wrap:anywhere}
.article-shell{
max-width:var(--content-max);width:100%;min-width:0;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start;padding-bottom:24px}
.article-shell:has(.article-aside){
grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px);max-width:min(1440px,100%)}
.article-shell:has(.article-aside) .article-page{
max-width:none}
.article-loading{
color:var(--muted-foreground);text-align:center;padding:80px 0}
.article-back{
display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted-foreground);margin-bottom:20px;transition:color .2s,transform .25s}
.article-back:hover{
color:var(--text-hover);transform:translateX(-2px)}
.article-kicker{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:var(--muted-foreground)}
.article-kicker .blog-card-tag{
color:var(--foreground);transition:transform .25s,background .25s}
.article-kicker .blog-card-tag:hover{
transform:translateY(-1px)}
.article-page h1{
font-size:clamp(30px,4vw,44px);font-weight:900;letter-spacing:-0.03em;line-height:1.15;margin-bottom:14px;animation:fade-up .5s cubic-bezier(0.22,1,0.36,1) both}
.article-excerpt{
font-size:17px;color:var(--muted-foreground);line-height:1.6;margin-bottom:28px;animation:fade-up .55s cubic-bezier(0.22,1,0.36,1) .05s both}
.article-cover{
border-radius:20px;overflow:hidden;margin-bottom:32px;border:1px solid var(--border);animation:scale-in .55s cubic-bezier(0.22,1,0.36,1) both}
.article-cover img{
width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;transition:transform .7s cubic-bezier(0.22,1,0.36,1)}
.article-cover:hover img{
transform:scale(1.02)}
.article-body{
min-width:0;max-width:100%;animation:fade-up .55s cubic-bezier(0.22,1,0.36,1) .08s both}
.article-body>*{
max-width:100%}
.article-related-resources,.article-more{
min-width:0;max-width:100%}
.article-related-resources .prompt-grid{
width:100%;max-width:100%;overflow-x:hidden}
.article-body h2,.article-body h3,.article-body h4{
font-weight:750;line-height:1.3;margin:32px 0 12px;color:var(--foreground)}
.article-body h2{
font-size:24px}
.article-body h3{
font-size:20px}
.article-body h4{
font-size:17px}
.article-body p{
font-size:16px;line-height:1.8;color:rgba(245,245,245,.88);margin-bottom:16px}
.article-body ul,.article-body ol{
margin:0 0 18px;padding-left:1.35em;color:rgba(245,245,245,.88)}
.article-body li{
margin-bottom:8px;line-height:1.7;font-size:16px}
.article-body a{
color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s ease,text-decoration-thickness .2s ease}
.article-body a:hover{
color:var(--link-hover);text-decoration-thickness:2px}
.article-body blockquote{
margin:24px 0;padding:16px 20px;border-left:3px solid var(--seam-accent,#d0b2ff);background:rgba(255,255,255,.03);border-radius:0 14px 14px 0;color:rgba(245,245,245,.82)}
.article-body pre,.article-body code{
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.article-body code{
font-size:.9em;padding:.12em .4em;border-radius:6px;background:rgba(255,255,255,.06)}
.article-body pre{
margin:20px 0;padding:16px 18px;border-radius:14px;overflow-x:auto;background:#171717;border:1px solid var(--border)}
.article-body pre code{
padding:0;background:rgba(0,0,0,0)}
.article-body img,.article-body .wp-block-image img{
max-width:100%;height:auto;border-radius:14px;display:block;margin:8px 0}
.article-body figure{
margin:28px 0}
.article-body figcaption{
margin-top:10px;font-size:13px;color:var(--muted-foreground);text-align:center}
.article-body hr{
border:0;border-top:1px solid var(--border);margin:32px 0}
.article-figure{
margin:28px 0}
.article-figure img{
width:100%;border-radius:16px;border:1px solid var(--border);display:block}
.article-figure figcaption{
margin-top:10px;font-size:13px;color:var(--muted-foreground);text-align:center}
.article-more{
max-width:min(1440px,100%);width:100%;margin:0 auto 80px}
.article-more .blog-grid{
grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.article-related-resources{
animation:fade-up .5s cubic-bezier(0.22,1,0.36,1) both}
@media(max-width:960px){
.blog-layout,.article-shell:has(.article-aside),.resource-layout{
grid-template-columns:1fr}
.blog-aside:not(.article-aside),.resource-aside{
order:-1;position:static}
.article-aside{
order:2;position:static;padding-top:0}
.blog-cat-list{
flex-direction:row;flex-wrap:wrap}
.blog-cat-btn{
width:auto}
.seam-sidebar{
display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.seam-sidebar .seam-widget{
margin-bottom:0}
}
@media(max-width:700px){
.blog-hero h1,.article-page h1{
font-size:30px}
}
.theme-toggle{
--tt-w:52px;--tt-h:30px;position:relative;box-sizing:border-box;width:var(--tt-w);height:var(--tt-h);min-width:var(--tt-w);min-height:var(--tt-h);padding:0;border:0;background:rgba(0,0,0,0);cursor:pointer;flex-shrink:0}
.theme-toggle-track{
position:absolute;inset:0;border-radius:999px;background:var(--secondary);border:1px solid var(--border);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.theme-toggle:hover .theme-toggle-track{
border-color:var(--seam-accent,#d0b2ff);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 3px color-mix(in srgb,var(--seam-accent,#d0b2ff) 22%,transparent)}
.theme-toggle-thumb{
position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff 0%,#f0f0f3 100%);color:#1a1a1a;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .28s cubic-bezier(0.22,1,0.36,1),background .25s ease,color .25s ease}
.theme-toggle[data-mode=dark] .theme-toggle-thumb{
transform:translateX(22px);background:linear-gradient(145deg,#2a2a2e 0%,#121214 100%);color:#f5e6a8}
.theme-toggle[data-mode=light] .theme-toggle-thumb{
transform:translateX(0);background:linear-gradient(145deg,#fff8e8 0%,#ffe08a 100%);color:#c47b00}
.theme-icon{
width:14px;height:14px;position:absolute;transition:opacity .2s ease,transform .28s ease}
.theme-toggle[data-mode=light] .theme-icon-sun{
opacity:1;transform:scale(1) rotate(0deg)}
.theme-toggle[data-mode=light] .theme-icon-moon{
opacity:0;transform:scale(0.6) rotate(-40deg)}
.theme-toggle[data-mode=dark] .theme-icon-sun{
opacity:0;transform:scale(0.6) rotate(40deg)}
.theme-toggle[data-mode=dark] .theme-icon-moon{
opacity:1;transform:scale(1) rotate(0deg)}
.mobile-theme-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 10px;margin:4px 0;border-radius:12px;color:var(--muted-foreground);font-size:13px;font-weight:600;transition:background var(--dur-fast) var(--ease-soft)}
.mobile-theme-row:hover{
background:var(--nav-hover-bg)}
.mobile-theme-row .lang-switch--pill .lang-switch-track{
height:var(--tt-h,30px);min-width:var(--tt-w,52px)}
html[data-theme=light] body{
background:radial-gradient(1200px 480px at 50% -10%,rgba(18,18,20,0.04),transparent 55%),var(--background);color:var(--foreground)}
html[data-theme=light] .site-nav{
background:var(--nav-pill-bg)}
html[data-theme=light] .site-nav.is-scrolled{
background:rgba(255,255,255,.98);box-shadow:0 14px 40px rgba(18,18,20,.12)}
html[data-theme=light] .nav-links a:hover,html[data-theme=light] .nav-links a.is-active{
color:var(--foreground);background:rgba(0,0,0,0)}
html[data-theme=light] .btn-signup{
background:var(--light-ink);color:#fff}
html[data-theme=light] .btn-signin{
color:var(--nav-link)}
html[data-theme=light] .btn-signin:hover{
color:var(--foreground)}
html[data-theme=light] .btn-unlimited,html[data-theme=light] .btn-go-unlimited,html[data-theme=light] .btn-price,html[data-theme=light] .btn-d3,html[data-theme=light] .btn-contact-submit{
box-shadow:0 8px 24px rgba(20,20,22,.1)}
html[data-theme=light] .mobile-menu-panel{
background:var(--card);box-shadow:-18px 0 48px rgba(18,18,20,.12)}
html[data-theme=light] .mobile-menu-footer{
background:color-mix(in srgb,var(--card) 88%,var(--muted))}
html[data-theme=light] .mobile-auth-btn--solid{
background:var(--light-ink);color:#fff}
html[data-theme=light] .site-footer{
background:radial-gradient(ellipse 80% 60% at 10% 0%,rgba(107,77,255,0.08),transparent 55%),var(--background)}
html[data-theme=light] .footer-social a{
background:var(--card)}
html[data-theme=light] .footer-cta-btn,html[data-theme=light] .mobile-menu-cta{
box-shadow:0 8px 22px rgba(20,20,22,.08)}
html[data-theme=light] .hero-wash{
opacity:.55}
html[data-theme=light] .hero-spotlight{
mix-blend-mode:multiply;opacity:.55}
html[data-theme=light] .hero-spotlight{
opacity:.7}
html[data-theme=light] .hero-scan{
mix-blend-mode:multiply;opacity:.4}
html[data-theme=light] .hero-sub,html[data-theme=light] .pricing-lead,html[data-theme=light] .inner-hero p,html[data-theme=light] .contact-lead,html[data-theme=light] .article-excerpt{
color:var(--light-ink-soft)}
html[data-theme=light] .contact-eyebrow{
color:var(--light-ink-mute)}
html[data-theme=light] .superpowers-fill{
filter:none}
html[data-theme=light] .superpowers-glow{
opacity:.22;filter:blur(12px) brightness(1.08)}
html[data-theme=light] .superpowers-fill .line,html[data-theme=light] .superpowers-glow .line{
background-image:var(--hero-title-gradient)}
html[data-theme=light] .superpowers-noise{
opacity:.18;mix-blend-mode:multiply}
html[data-theme=light] .filter-chip{
background:var(--card);border:1px solid var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .filter-chip:hover{
color:var(--foreground);background:var(--muted)}
html[data-theme=light] .filter-chip.active,html[data-theme=light] .filter-chip.active:hover{
background:var(--light-ink);color:#fff;border-color:var(--light-ink);box-shadow:none}
html[data-theme=light] .filter-settings,html[data-theme=light] .filter-settings:hover{
background:var(--card);border:1px solid var(--border);color:var(--foreground);box-shadow:none}
html[data-theme=light] .d3-banner{
background:#121216;color:#f5f5f5}
html[data-theme=light] .d3-banner h2,html[data-theme=light] .d3-banner .d3-item-title{
color:#f5f5f5}
html[data-theme=light] .d3-banner p,html[data-theme=light] .d3-banner .d3-item-sub{
color:rgba(255,255,255,.72)}
html[data-theme=light] .sale-banner{
background:var(--card);border-color:var(--border);color:var(--light-ink-soft);box-shadow:var(--shadow-soft)}
html[data-theme=light] .sale-banner .timer{
color:#c2410c}
html[data-theme=light] .price-card,html[data-theme=light] .pricing-included,html[data-theme=light] .pricing-compare{
background:var(--card);border-color:var(--border);color:var(--foreground);box-shadow:var(--shadow-soft)}
html[data-theme=light] .pricing-faq .faq-list{
background:var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .pricing-faq .faq-item{
background:rgba(0,0,0,0);box-shadow:none}
html[data-theme=light] .price-card.popular{
border-color:rgba(18,18,20,.18);box-shadow:0 0 0 1px rgba(18,18,20,.06),var(--shadow-soft)}
html[data-theme=light] .price-card .badge-popular{
background:var(--light-ink);color:#fff}
html[data-theme=light] .price-card .desc,html[data-theme=light] .price-interval,html[data-theme=light] .price-amount .old,html[data-theme=light] .pricing-included-card p,html[data-theme=light] .pricing-compare-row .is-mute,html[data-theme=light] .pricing-footer-cta p,html[data-theme=light] .faq-a{
color:var(--muted-foreground)}
html[data-theme=light] .pricing-pay-chips li{
background:rgba(255,255,255,.9);border-color:var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .price-card.popular .btn-price{
background:var(--light-ink);color:#fff}
html[data-theme=light] .pricing-footer-cta-inner{
background:radial-gradient(ellipse at 50% 0%,rgba(160,120,220,0.12),transparent 60%),var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .pricing-compare-row .is-yes{
color:#059669}
html[data-theme=light] .pack-qty button{
background:var(--muted);border-color:var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .pack-qty button.active,html[data-theme=light] .pack-qty button:hover{
background:var(--light-ink);color:#fff;border-color:var(--light-ink)}
html[data-theme=light] .faq-q{
color:var(--foreground)}
html[data-theme=light] .search-modal,html[data-theme=light] .auth-modal{
background:var(--overlay-scrim)}
html[data-theme=light] .search-box,html[data-theme=light] .auth-dialog{
background:var(--card);border:1px solid var(--border);color:var(--foreground);box-shadow:0 24px 80px rgba(18,18,20,.18)}
html[data-theme=light] .search-box input,html[data-theme=light] .auth-field input{
color:var(--foreground);background:var(--input-bg)}
html[data-theme=light] .search-box input::placeholder,html[data-theme=light] .auth-field input::placeholder{
color:var(--light-ink-mute)}
html[data-theme=light] .search-results{
border-top-color:var(--border)}
html[data-theme=light] .search-result:hover{
background:rgba(18,18,20,.04)}
html[data-theme=light] .search-result span{
color:var(--foreground)}
html[data-theme=light] .auth-close:hover{
background:rgba(18,18,20,.06);color:var(--foreground)}
html[data-theme=light] .auth-tabs{
background:var(--muted)}
html[data-theme=light] .auth-tab{
color:var(--light-ink-mute)}
html[data-theme=light] .auth-tab.active{
background:#fff;color:var(--light-ink);box-shadow:0 4px 16px rgba(18,18,20,.08)}
html[data-theme=light] .auth-tab:not(.active):hover{
color:var(--foreground)}
html[data-theme=light] .auth-field span,html[data-theme=light] .auth-row,html[data-theme=light] .auth-divider{
color:var(--muted-foreground)}
html[data-theme=light] .auth-row a{
color:var(--light-ink-soft)}
html[data-theme=light] .auth-row a:hover{
color:var(--foreground)}
html[data-theme=light] .auth-field input,html[data-theme=light] .auth-social button{
border-color:var(--border);background:var(--light-soft);color:var(--foreground)}
html[data-theme=light] .auth-field input:focus{
background:#fff;border-color:rgba(107,77,255,.45);box-shadow:0 0 0 3px rgba(107,77,255,.12)}
html[data-theme=light] .auth-social button:hover{
background:var(--muted);color:var(--foreground)}
html[data-theme=light] .auth-submit{
background:var(--light-ink);color:#fff}
html[data-theme=light] .auth-submit:hover:not(:disabled){
box-shadow:0 10px 28px rgba(18,18,20,.16)}
html[data-theme=light] .auth-social button,html[data-theme=light] .auth-social .auth-social-btn{
background:#fff;border-color:var(--border);color:var(--foreground)}
html[data-theme=light] .auth-social button:hover,html[data-theme=light] .auth-social .auth-social-btn:hover{
background:var(--muted);color:var(--foreground)}
html[data-theme=light] .auth-toast{
color:#15803d;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.28)}
html[data-theme=light] .auth-toast.is-error{
color:#b91c1c;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.28)}
html[data-theme=light] .auth-closed{
background:var(--muted);color:var(--muted-foreground)}
html[data-theme=light] .auth-agree a{
color:var(--link,#1a40ff)}
html[data-theme=light] .detail-media{
background:#e8e8ee}
html[data-theme=light] .detail-card,html[data-theme=light] .detail-sidebar{
background:var(--card);color:var(--foreground)}
html[data-theme=light] .detail-sidebar{
border-left-color:var(--border)}
html[data-theme=light] .detail-sidebar .cat,html[data-theme=light] .like-btn{
color:var(--muted-foreground)}
html[data-theme=light] .detail-tool{
background:rgba(18,18,20,.05);color:var(--foreground)}
html[data-theme=light] .detail-tool:hover{
background:rgba(18,18,20,.09)}
html[data-theme=light] .detail-type-badge{
border-color:color-mix(in srgb,var(--link) 40%,transparent);background:color-mix(in srgb,var(--link) 10%,transparent);color:var(--link)}
html[data-theme=light] .sponsored-label{
color:var(--light-ink-mute)}
html[data-theme=light] .sponsored-link{
background:var(--light-soft);border-color:var(--border);color:var(--foreground)}
html[data-theme=light] .contact-info-card,html[data-theme=light] .contact-form,html[data-theme=light] .contact-aside-note{
background:rgba(0,0,0,0);border:none;color:var(--muted-foreground);box-shadow:none}
html[data-theme=light] .contact-aside-note a{
color:var(--foreground)}
html[data-theme=light] .contact-info-card:hover{
border-color:rgba(18,18,20,.16)}
html[data-theme=light] .contact-info-card a:hover{
color:var(--link-hover)}
html[data-theme=light] .contact-info-label{
color:var(--light-ink-mute)}
html[data-theme=light] .contact-info-card a,html[data-theme=light] .contact-info-card strong{
color:var(--foreground)}
html[data-theme=light] .contact-topic-chips span,html[data-theme=light] .subject-pill{
background:var(--muted);border-color:var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .subject-pill.active,html[data-theme=light] .subject-pill:hover{
background:var(--light-ink);color:#fff;border-color:var(--light-ink)}
html[data-theme=light] .field>span{
color:var(--muted-foreground)}
html[data-theme=light] .field input,html[data-theme=light] .field textarea{
background:var(--light-soft);border-color:var(--border);color:var(--foreground)}
html[data-theme=light] .field input::placeholder,html[data-theme=light] .field textarea::placeholder{
color:var(--light-ink-mute)}
html[data-theme=light] .field input:focus,html[data-theme=light] .field textarea:focus{
background:#fff;border-color:rgba(107,77,255,.45);box-shadow:0 0 0 3px rgba(107,77,255,.12)}
html[data-theme=light] .price-features li,html[data-theme=light] .tag-new{
color:var(--light-ink-soft)}
html[data-theme=light] .tag-new{
border-color:rgba(18,18,20,.2)}
html[data-theme=light] .contact-toast{
color:#166534;background:rgba(34,197,94,.12);border-color:rgba(22,101,52,.25)}
html[data-theme=light] .contact-toast.is-error{
color:#b91c1c;background:rgba(239,68,68,.1);border-color:rgba(185,28,28,.28)}
html[data-theme=light] .cat-search{
background:var(--card);border-color:var(--border);box-shadow:none}
html[data-theme=light] .cat-search input{
color:var(--foreground)}
html[data-theme=light] .cat-search input::placeholder{
color:var(--light-ink-mute)}
html[data-theme=light] .cat-count{
color:var(--muted-foreground)}
html[data-theme=light] .cat-chip{
background:var(--card);border-color:var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .cat-chip .num{
background:var(--muted);color:var(--muted-foreground)}
html[data-theme=light] .cat-chip:hover{
border-color:rgba(18,18,20,.18);background:var(--muted);color:var(--foreground)}
html[data-theme=light] .cat-chip.active{
background:var(--light-ink);color:#fff;border-color:var(--light-ink);box-shadow:0 8px 24px rgba(18,18,20,.12)}
html[data-theme=light] .cat-chip.active .num{
background:rgba(255,255,255,.18);color:#fff}
html[data-theme=light] .cat-panel{
background:var(--card);border-color:var(--border);color:var(--foreground);box-shadow:var(--shadow-soft)}
html[data-theme=light] .cat-panel:hover{
border-color:rgba(18,18,20,.16);box-shadow:0 16px 40px rgba(18,18,20,.1)}
html[data-theme=light] .cat-panel .panel-count{
color:var(--light-ink-mute)}
html[data-theme=light] .blog-aside h2,html[data-theme=light] .seam-widget-title{
color:var(--light-ink-mute)}
html[data-theme=light] .blog-cat-btn{
color:var(--light-ink-soft)}
html[data-theme=light] .blog-cat-btn .num{
color:var(--light-ink-mute)}
html[data-theme=light] .blog-cat-btn:hover{
background:rgba(18,18,20,.04);color:var(--foreground)}
html[data-theme=light] .blog-cat-btn.active{
background:var(--card);border-color:var(--border);color:var(--foreground);box-shadow:var(--shadow-soft)}
html[data-theme=light] .blog-cat-btn.active .num{
color:var(--muted-foreground)}
html[data-theme=light] .blog-aside-card{
background:var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .blog-aside-card a{
color:var(--foreground)}
html[data-theme=light] .blog-card{
background:var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .blog-card:hover{
border-color:rgba(18,18,20,.16);box-shadow:0 18px 40px rgba(18,18,20,.1)}
html[data-theme=light] .blog-card-tag,html[data-theme=light] .article-kicker .blog-card-tag{
background:var(--muted);color:var(--light-ink-soft)}
html[data-theme=light] .blog-card-foot{
color:var(--light-ink-mute)}
html[data-theme=light] .blog-card-foot span:last-child{
color:var(--foreground)}
html[data-theme=light] .article-body,html[data-theme=light] .article-body p,html[data-theme=light] .article-body li{
color:var(--light-ink-soft)}
html[data-theme=light] .article-body h2,html[data-theme=light] .article-body h3,html[data-theme=light] .article-more h2,html[data-theme=light] .article-related-resources h2,html[data-theme=light] .cat-results-head h2,html[data-theme=light] .search-group-title{
color:var(--foreground)}
html[data-theme=light] .prompt-card .prompt-media,html[data-theme=light] .blog-card-cover,html[data-theme=light] .detail-card,html[data-theme=light] .contact-form,html[data-theme=light] .contact-info-card{
box-shadow:var(--shadow-soft)}
html[data-theme=light] .footer-nav a:hover,html[data-theme=light] .footer-bottom-links a:hover,html[data-theme=light] .btn-signin:hover,html[data-theme=light] .cat-clear:hover,html[data-theme=light] .article-back:hover,html[data-theme=light] .account-section-head a:hover{
color:var(--text-hover)}
html[data-theme=light] .nav-logo img:not(.seam-logo-mark){
filter:none}
html[data-theme=light] .posts-nav .page-numbers a,html[data-theme=light] .posts-nav .page-numbers span{
background:var(--card);border-color:var(--border);color:var(--light-ink-soft)}
html[data-theme=light] .posts-nav .page-numbers a:hover{
color:var(--foreground);background:var(--muted)}
html[data-theme=light] .posts-nav .page-numbers .current,html[data-theme=light] .home-feed-pages button.is-current{
background:var(--light-ink);color:#fff;border-color:var(--light-ink)}
html[data-theme=light] .home-feed-pages button{
background:var(--card);color:var(--foreground)}
html[data-theme=light] .theme-toggle-track{
background:var(--muted);border-color:var(--border)}
html[data-theme=light] .icon-btn{
color:var(--foreground)}
html[data-theme=light] .icon-btn:hover{
background:var(--nav-hover-bg)}
@media(prefers-reduced-motion:reduce){
.theme-toggle-thumb,.theme-icon{
transition:none}
}
.skip-link{
position:absolute;left:8px;top:8px;z-index:80;padding:8px 12px;background:#fff;color:#111;border-radius:8px;transform:translateY(-150%)}
.skip-link:focus{
transform:none}
.seam-sr{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.cat-panel{
color:inherit;text-decoration:none}
.posts-nav{
display:flex;justify-content:center;padding:8px 0 48px}
.posts-nav .page-numbers{
display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.posts-nav .page-numbers a,.posts-nav .page-numbers span{
display:inline-flex;min-width:36px;height:36px;align-items:center;justify-content:center;padding:0 10px;border-radius:999px;border:1px solid var(--border)}
.posts-nav .page-numbers .current{
background:#202020;color:#fff}
.search-group-title{
font-size:22px;font-weight:800;margin:28px 0 16px}
.contact-toast.is-error{
background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fca5a5}
.lang-switch{
--tt-w:52px;--tt-h:30px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--tt-w);min-width:var(--tt-w);text-decoration:none;color:var(--foreground);flex-shrink:0;height:var(--tt-h);min-height:var(--tt-h);transition:transform .15s ease,opacity .15s ease}
.lang-switch:hover{
opacity:.95}
.lang-switch:active{
transform:scale(0.97)}
.lang-switch--pill .lang-switch-track{
display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;width:var(--tt-w);height:var(--tt-h);min-width:var(--tt-w);padding:2px;border-radius:999px;border:1px solid var(--border);background:var(--secondary);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.lang-switch--pill:hover .lang-switch-track{
border-color:var(--seam-accent,#d0b2ff);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 3px color-mix(in srgb,var(--seam-accent,#d0b2ff) 22%,transparent)}
.lang-switch--pill .lang-seg{
display:inline-flex;align-items:center;justify-content:center;height:100%;min-width:0;padding:0 2px;border-radius:999px;font-size:10px;font-weight:750;letter-spacing:.02em;line-height:1;color:var(--muted-foreground);transition:background .22s ease,color .22s ease,box-shadow .22s ease}
.lang-switch--pill .lang-seg.is-active{
background:linear-gradient(145deg,#fff 0%,#f0f0f3 100%);color:#1a1a1a;box-shadow:0 2px 6px rgba(0,0,0,.22)}
html[data-theme=dark] .lang-switch--pill .lang-seg.is-active{
background:linear-gradient(145deg,#2a2a2e 0%,#121214 100%);color:#f5f5f5}
.lang-switch--text{
width:var(--tt-w);height:var(--tt-h);border-radius:999px;border:1px solid var(--border);background:var(--secondary)}
.lang-switch--text:hover{
border-color:var(--seam-accent,#d0b2ff)}
.lang-switch--text .lang-switch-code{
font-size:11px;font-weight:750;letter-spacing:.02em}
html[data-theme=light] .lang-switch--pill .lang-switch-track{
background:var(--secondary);border-color:var(--border)}
html[data-theme=light] .lang-switch--pill .lang-seg.is-active{
background:linear-gradient(145deg,#fff8e8 0%,#ffe08a 100%);color:#1a1a1a;box-shadow:0 2px 6px rgba(18,18,20,.12)}
.btn-account-nav{
display:none;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid rgba(0,0,0,0);font-size:13px;font-weight:600;color:var(--foreground);transition:background .15s,border-color .15s}
.btn-account-nav:hover{
background:var(--nav-hover-bg);border-color:var(--border)}
.btn-account-avatar{
width:28px;height:28px;border-radius:999px;object-fit:cover}
@media(min-width:1024px){
.btn-account-nav{
display:inline-flex}
}
.like-btn.is-fav{
color:#f43f5e}
.like-btn.is-fav svg{
fill:currentColor}
.auth-social-btn{
display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:11px 18px;border-radius:999px;border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--foreground);text-decoration:none;transition:background .15s,border-color .15s}
.auth-social-btn:hover{
background:var(--nav-hover-bg);border-color:var(--muted-foreground)}
.account-hero{
position:relative;padding:var(--section-pad-y) var(--page-gutter) 28px;overflow:hidden}
.account-hero-glow{
position:absolute;left:50%;top:-40px;width:min(920px,120%);height:320px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(208,178,255,0.22),transparent 70%),radial-gradient(closest-side,rgba(232,64,13,0.1),transparent 65%);pointer-events:none}
.account-hero-inner{
position:relative;max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.account-hero-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.account-badge{
display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--muted-foreground);border:1px solid var(--border)}
.account-badge.is-member{
background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 22%,transparent);color:var(--foreground);border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 40%,transparent)}
.account-hero-status{
font-size:13px;color:var(--muted-foreground)}
.account-hero-actions{
margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}
.account-avatar-wrap{
position:relative;flex-shrink:0}
.account-avatar-wrap::after{
content:"";position:absolute;inset:-3px;border-radius:999px;background:linear-gradient(135deg,rgba(208,178,255,0.7),rgba(232,64,13,0.35));z-index:0;opacity:.85}
.account-avatar{
position:relative;z-index:1;display:block;width:88px;height:88px;border-radius:999px;object-fit:cover;border:3px solid var(--background);background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--seam-accent,#d0b2ff) 25%,transparent),0 10px 28px color-mix(in srgb,var(--seam-accent,#d0b2ff) 18%,transparent)}
.account-hero-copy{
min-width:0}
.account-eyebrow{
margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-foreground)}
.account-hero h1{
margin:0;font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.account-lead{
margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--muted-foreground)}
.account-lead-name{
color:var(--foreground);font-weight:600}
.account-lead-sep{
margin:0 6px;opacity:.45}
.account-shell{
padding-bottom:88px}
.account-layout{
display:grid;grid-template-columns:248px minmax(0,1fr);gap:22px;max-width:1080px;margin:0 auto;padding:0 var(--page-gutter);align-items:start}
.account-nav{
display:flex;flex-direction:column;gap:4px;position:sticky;top:calc(var(--site-nav-h) + 16px);padding:10px;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.02);backdrop-filter:blur(10px)}
body.admin-bar .account-nav{
top:calc(var(--site-nav-h) + 16px + 32px)}
@media screen and (max-width:782px){
body.admin-bar .account-nav{
top:calc(var(--site-nav-h) + 16px + 46px)}
}
.account-nav-link{
display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;font-size:14px;font-weight:600;color:var(--muted-foreground);transition:background .15s,color .15s,transform .15s}
.account-nav-ico{
display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.04);color:inherit}
.account-nav-ico svg{
width:16px;height:16px}
.account-nav-label{
min-width:0}
.account-nav-link:hover{
background:var(--nav-hover-bg);color:var(--foreground)}
.account-nav-link.is-active{
background:var(--foreground);color:var(--background)}
.account-nav-link.is-active .account-nav-ico{
background:rgba(0,0,0,.12)}
.account-nav-count{
min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:rgba(255,255,255,.08)}
.account-nav-link.is-active .account-nav-count{
background:rgba(0,0,0,.14)}
.account-nav-logout{
margin-top:6px;border-top:1px solid var(--border);border-radius:0 0 14px 14px;padding-top:14px}
.account-panel{
min-width:0;padding:28px 28px 32px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent 120px),rgba(255,255,255,.015);box-shadow:var(--shadow-soft)}
.account-panel-head{
margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.account-panel-head h2{
margin:0;font-size:22px;font-weight:800;letter-spacing:-0.02em}
.account-panel-head p{
margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--muted-foreground)}
.account-form{
display:grid;gap:16px;max-width:520px}
.account-form .field{
display:grid;gap:7px}
.account-form .field>span{
font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
.account-form input,.account-form select{
width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--border);background:var(--input-bg);color:var(--foreground);font:inherit;font-size:16px;transition:border-color .15s,box-shadow .15s}
.account-form input:focus,.account-form select:focus{
outline:none;border-color:rgba(208,178,255,.55);box-shadow:0 0 0 3px rgba(208,178,255,.14)}
.account-form input:disabled{
opacity:.55;cursor:not-allowed}
.account-form-actions{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.btn-account{
display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;background:var(--foreground);color:var(--background);font-weight:700;font-size:14px;border:0;cursor:pointer;width:fit-content;transition:opacity .15s,transform .15s}
.btn-account:hover{
opacity:.92}
.btn-account:active{
transform:scale(0.98)}
.btn-account-ghost{
background:rgba(0,0,0,0);color:var(--foreground);border:1px solid var(--border)}
.account-toast{
margin:0;font-size:13px;font-weight:600;color:#34d399}
.account-toast.is-error{
color:#f87171}
.account-empty{
display:grid;justify-items:center;gap:14px;padding:48px 20px;text-align:center;border:1px dashed var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.account-empty-ico{
display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:16px;background:rgba(208,178,255,.1);color:var(--seam-accent)}
.account-empty-ico svg{
width:24px;height:24px}
.account-empty p{
margin:0;max-width:360px;font-size:14px;line-height:1.55;color:var(--muted-foreground)}
.account-list{
display:grid;gap:10px}
.account-item{
display:grid;grid-template-columns:84px minmax(0,1fr) 36px;gap:14px;padding:12px;border:1px solid var(--border);border-radius:18px;align-items:center;background:rgba(255,255,255,.02);transition:border-color .15s,background .15s,transform .15s}
.account-item:hover{
border-color:rgba(208,178,255,.35);background:rgba(255,255,255,.035)}
.account-item-media{
display:block;width:84px;height:60px;border-radius:12px;overflow:hidden;background:var(--nav-hover-bg)}
.account-item-media img,.account-item-placeholder{
width:100%;height:100%;object-fit:cover;display:block}
.account-item-placeholder{
background:linear-gradient(135deg,rgba(208,178,255,0.18),rgba(232,64,13,0.1))}
.account-item-body{
display:grid;gap:5px;min-width:0}
.account-item-title{
color:var(--foreground);font-size:15px;font-weight:700;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-item-meta{
font-size:12px;color:var(--muted-foreground)}
.account-item-remove,.account-item-open{
width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(0,0,0,0);color:var(--muted-foreground);cursor:pointer;transition:background .15s,color .15s}
.account-item-remove svg,.account-item-open svg{
width:16px;height:16px}
.account-item-remove:hover{
background:rgba(248,113,113,.12);color:#f87171}
.account-item-open:hover{
background:var(--nav-hover-bg);color:var(--foreground)}
.account-pass{
position:relative;overflow:hidden;padding:24px;border-radius:22px;border:1px solid var(--border);background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--seam-accent,#d0b2ff) 18%,transparent),transparent 55%),linear-gradient(160deg,color-mix(in srgb,var(--foreground) 4%,transparent),transparent 70%);margin-bottom:22px}
.account-pass.is-active{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 35%,transparent)}
.account-pass-top{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.account-pass-label{
font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-foreground)}
.account-pass-status{
margin:0 0 14px;font-size:18px;font-weight:700;letter-spacing:-0.02em}
.account-pass-perks{
margin:0 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.account-pass-perks li{
position:relative;padding-left:18px;font-size:13px;color:var(--muted-foreground);line-height:1.45}
.account-pass-perks li::before{
content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:999px;background:var(--seam-accent,#d0b2ff)}
.account-stats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}
.account-stat{
padding:18px 16px;border-radius:18px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 2.5%,transparent);text-align:center}
.account-stat-num{
display:block;font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.account-stat-label{
display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.account-section{
margin-top:28px}
.account-section+.account-section{
padding-top:8px;border-top:1px solid var(--border)}
.account-section-head{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.account-section-head h3{
margin:0;font-size:16px;font-weight:800;letter-spacing:-0.02em}
.account-section-head a{
font-size:13px;font-weight:600;color:var(--muted-foreground)}
.account-section-head a:hover{
color:var(--foreground)}
.account-card-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.account-card{
position:relative;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:color-mix(in srgb,var(--foreground) 2%,transparent);transition:border-color .2s,transform .2s}
.account-card:hover{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 40%,transparent);transform:translateY(-2px)}
.account-card-media{
display:block;aspect-ratio:16/10;overflow:hidden;background:var(--nav-hover-bg)}
.account-card-media img{
width:100%;height:100%;object-fit:cover;display:block}
.account-card-body{
display:grid;gap:4px;padding:12px 14px 14px;min-width:0}
.account-card-cat{
font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground)}
.account-card-title{
font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-card-unfav{
position:absolute;top:10px;right:10px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:color-mix(in srgb,#000 45%,transparent);color:#fda4af;cursor:pointer;backdrop-filter:blur(6px)}
.account-card-unfav svg{
width:16px;height:16px}
.account-card-unfav:hover{
color:#fecdd3;background:color-mix(in srgb,#000 60%,transparent)}
.account-empty-compact{
padding:28px 16px}
.account-plan-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.account-plan-chip{
display:grid;gap:4px;padding:14px;border-radius:16px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 2%,transparent)}
.account-plan-chip strong{
font-size:14px}
.account-plan-chip span{
font-size:18px;font-weight:800;letter-spacing:-0.02em}
.account-plan-chip em{
font-style:normal;font-size:11px;font-weight:700;color:var(--seam-accent,#d0b2ff)}
.account-plan-chip.is-current{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 45%,transparent)}
.account-plan-chip.is-popular{
background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--seam-accent,#d0b2ff) 16%,transparent),transparent 60%),color-mix(in srgb,var(--foreground) 2%,transparent)}
.account-orders{
display:grid;gap:8px}
.account-order-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 2%,transparent)}
.account-order-row strong{
display:block;font-size:13px;font-weight:700}
.account-order-row>div>span{
display:block;margin-top:3px;font-size:12px;color:var(--muted-foreground)}
.account-order-meta{
text-align:right;display:grid;gap:4px;font-size:13px;font-weight:700}
.account-order-status{
font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted-foreground)}
.account-order-status.status-paid{
color:#34d399}
.account-order-status.status-pending{
color:#fbbf24}
.account-avatar-edit{
display:flex;align-items:center;gap:16px;margin-bottom:14px}
.account-avatar-edit img{
width:72px;height:72px;border-radius:999px;object-fit:cover;border:2px solid color-mix(in srgb,var(--seam-accent,#d0b2ff) 30%,var(--border));background:var(--card);flex-shrink:0;box-shadow:0 8px 22px color-mix(in srgb,var(--seam-accent,#d0b2ff) 16%,transparent)}
.account-avatar-edit-copy strong{
display:block;margin:0 0 4px;font-size:14px;font-weight:650;color:var(--foreground)}
.account-hint{
margin:0;font-size:13px;line-height:1.45;color:var(--muted-foreground)}
.account-avatar-packs{
display:flex;flex-direction:column;gap:14px;margin:0 0 18px}
.account-avatar-pack-label{
margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted-foreground)}
.account-avatar-packs .account-avatar-grid{
margin:0}
.account-avatar-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.account-avatar-option{
position:relative;display:grid;place-items:center;margin:0;padding:6px;border-radius:16px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 3%,transparent);cursor:pointer;transition:border-color .2s ease,transform .2s ease,background .2s ease,box-shadow .2s ease}
.account-avatar-option img{
display:block;width:100%;max-width:56px;aspect-ratio:1;border-radius:999px;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.account-avatar-option:hover{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 45%,var(--border));transform:translateY(-1px)}
.account-avatar-option.is-active{
border-color:color-mix(in srgb,var(--seam-accent,#d0b2ff) 70%,transparent);background:color-mix(in srgb,var(--seam-accent,#d0b2ff) 12%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--seam-accent,#d0b2ff) 28%,transparent)}
.account-avatar-option.is-active::after{
content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:999px;background:var(--seam-accent,#d0b2ff);box-shadow:0 0 0 2px var(--background)}
@media(max-width:520px){
.account-avatar-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.account-avatar-option{
padding:4px;border-radius:12px}
}
@media(max-width:880px){
.account-layout{
grid-template-columns:1fr;gap:16px;padding:0 var(--page-gutter-sm)}
.account-nav{
position:static;display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;padding:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.account-nav::-webkit-scrollbar{
display:none}
.account-nav-link{
flex:0 0 auto;grid-template-columns:24px auto auto;padding:10px 12px;font-size:12px;white-space:nowrap}
.account-nav-logout{
margin-top:0;border-top:0;border-left:1px solid var(--border);border-radius:14px;padding-top:10px}
.account-panel{
padding:22px 18px 26px;border-radius:20px}
.account-hero-inner{
flex-direction:column;align-items:flex-start;gap:16px}
.account-hero-actions{
margin-left:0;width:100%}
.account-item{
grid-template-columns:72px minmax(0,1fr) 32px}
.account-item-media{
width:72px;height:52px}
.account-stats{
grid-template-columns:1fr}
.account-card-grid,.account-plan-grid{
grid-template-columns:1fr}
.account-order-row{
flex-direction:column;align-items:flex-start}
.account-order-meta{
text-align:left}
}
html[data-theme=light] .account-nav,html[data-theme=light] .account-panel,html[data-theme=light] .account-item{
background:rgba(255,255,255,.82)}
html[data-theme=light] .account-nav-ico{
background:rgba(18,18,20,.05)}
html[data-theme=light] .account-nav-link.is-active{
background:#171717;color:#fff}
html[data-theme=light] .account-nav-link.is-active .account-nav-ico{
background:rgba(255,255,255,.12)}
html[data-theme=light] .account-empty{
background:rgba(255,255,255,.55)}
html[data-theme=light] .btn-account{
background:#171717;color:#fff}
html[data-theme=light] .account-hero-glow{
background:radial-gradient(closest-side,rgba(107,77,255,0.12),transparent 70%),radial-gradient(closest-side,rgba(232,90,40,0.08),transparent 65%)}
@keyframes blog-glow-pulse{
0%{
opacity:.7;transform:scale(1)}
100%{
opacity:1;transform:scale(1.06)}
}
@keyframes skeleton-shimmer{
0%{
background-position:100% 0}
100%{
background-position:-100% 0}
}
.seam-media{
position:relative;overflow:hidden;background:var(--secondary)}
.seam-media.is-skeleton::before,.skeleton-card .seam-media::before,.skeleton-line{
background:linear-gradient(90deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0.12) 45%,rgba(255,255,255,0.04) 100%);background-size:200% 100%;animation:skeleton-shimmer 1.35s ease-in-out infinite}
.seam-media.is-skeleton::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
.seam-media img,.seam-img-lazy,.article-body img.seam-content-img{
transition:opacity .35s ease,filter .35s ease}
.seam-media.is-skeleton img,.seam-img-lazy:not(.is-loaded),.article-body img.seam-content-img:not(.is-loaded).is-pending{
opacity:0;filter:blur(8px)}
@media(hover:none),(pointer:coarse){
.seam-media.is-skeleton img,.seam-img-lazy:not(.is-loaded),.article-body img.seam-content-img:not(.is-loaded).is-pending,.related-res-media.seam-media.is-skeleton img,.detail-media.seam-media.is-skeleton img{
opacity:.45;filter:none}
.reveal{
opacity:1;filter:none;transform:none;transition:none;will-change:auto}
.prompt-card.is-entering{
opacity:1;filter:none;transform:none}
}
.seam-media.is-loaded img,.seam-media img.is-loaded,.seam-img-lazy.is-loaded,.article-body img.seam-content-img.is-loaded{
opacity:1;filter:blur(0)}
.skeleton-card{
pointer-events:none;cursor:default}
.skeleton-card:hover{
transform:none !important;box-shadow:none !important}
.skeleton-line{
display:block;height:12px;border-radius:999px;margin-bottom:10px;width:100%}
.skeleton-line--title{
height:16px;width:72%}
.skeleton-line--meta{
height:10px;width:40%}
.skeleton-line--short{
width:55%}
.prompt-media.seam-media.is-skeleton,.blog-card-cover.seam-media.is-skeleton,.rank-media.seam-media.is-skeleton,.d3-item-media.seam-media.is-skeleton,.account-item-media.seam-media.is-skeleton,.account-card-media.seam-media.is-skeleton,.detail-media.seam-media.is-skeleton{
min-height:160px}
.detail-media.seam-media{
position:relative;overflow:hidden}
.detail-media.seam-media.is-skeleton img{
opacity:0;filter:blur(8px)}
.detail-media.seam-media.is-loaded img,.detail-media.seam-media img.is-loaded{
opacity:1;filter:blur(0)}
.detail-media.seam-media.is-video-loading.is-skeleton img{
opacity:.35;filter:none}
.is-skeleton-grid{
pointer-events:none}
.is-skeleton-grid .skeleton-card .prompt-action,.is-skeleton-grid .skeleton-card .cover-fav{
display:none}
.blog-card-cover--empty{
aspect-ratio:16/10;background:radial-gradient(ellipse at 30% 30%,rgba(208,178,255,0.18),transparent 55%),radial-gradient(ellipse at 70% 70%,rgba(232,64,13,0.12),transparent 50%),var(--secondary)}
.blog-aside{
position:sticky;top:calc(var(--site-nav-h) + 16px)}
.blog-aside:not(.reveal){
animation:none}
body.admin-bar .blog-aside{
top:calc(var(--site-nav-h) + 16px + 32px)}
@media screen and (max-width:782px){
body.admin-bar .blog-aside{
top:calc(var(--site-nav-h) + 16px + 46px)}
}
.resource-opening{
min-height:40vh;padding-top:var(--section-pad-y);padding-bottom:48px}
.blog-toolbar{
animation:fade-up .45s cubic-bezier(0.22,1,0.36,1) .04s both}
html[data-theme=light] .seam-media.is-skeleton::before,html[data-theme=light] .skeleton-line{
background:linear-gradient(90deg,rgba(18,18,20,0.04) 0%,rgba(18,18,20,0.1) 45%,rgba(18,18,20,0.04) 100%);background-size:200% 100%}
html[data-theme=light] .article-body blockquote{
background:rgba(18,18,20,.03);color:var(--light-ink-soft)}
html[data-theme=light] .article-body code{
background:rgba(18,18,20,.06)}
html[data-theme=light] .article-body pre{
background:var(--card)}
html[data-theme=light] .article-body a{
color:var(--link)}
html[data-theme=light] .article-body a:hover{
color:var(--link-hover)}
html[data-theme=light] .prompt-card:hover .prompt-meta h3,html[data-theme=light] .prompt-action:hover,html[data-theme=light] .prompt-card:hover .prompt-action{
color:var(--foreground)}
html[data-theme=light] .footer-email:hover,html[data-theme=light] .contact-info-card a:hover{
color:var(--link-hover)}
html[data-theme=light] .blog-card-cover--empty{
background:radial-gradient(ellipse at 30% 30%,rgba(107,77,255,0.12),transparent 55%),radial-gradient(ellipse at 70% 70%,rgba(232,90,40,0.08),transparent 50%),var(--muted)}
.seam-pay-modal{
position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(6px)}
.seam-pay-modal[hidden]{
display:none !important}
.seam-pay-dialog{
position:relative;width:min(420px,100%);padding:28px 24px 24px;border-radius:20px;background:var(--card,#16161a);color:var(--foreground,#fff);border:1px solid color-mix(in srgb,var(--foreground) 10%,transparent);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.seam-pay-dialog h3{
margin:0 0 16px;font-size:1.15rem}
.seam-pay-close{
position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:999px;background:rgba(0,0,0,0);color:inherit;font-size:22px;cursor:pointer;opacity:.7}
.seam-pay-channels{
display:flex;flex-direction:column;gap:10px}
.seam-pay-channel{
padding:12px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--foreground) 14%,transparent);background:var(--secondary,transparent);color:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.seam-pay-channel:hover{
border-color:color-mix(in srgb,var(--foreground) 28%,transparent)}
.seam-pay-qr{
margin-top:12px;font-size:14px;opacity:.9;word-break:break-all}
.seam-pay-qr canvas{
display:block;width:220px;height:220px;margin:8px auto 0;border-radius:12px;background:#fff}
.seam-pay-error{
margin-top:12px;color:#f87171;font-size:14px}
html[data-theme=light] .account-pass,html[data-theme=light] .account-stat,html[data-theme=light] .account-card,html[data-theme=light] .account-plan-chip,html[data-theme=light] .account-order-row{
background:rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){
.hero-wash,.hero-orb,.hero-scan,.hero-ripples span,.hero-icon-bob,.hero-dots span,.superpowers-fill .line,.superpowers-glow .line,.blog-hero-glow,.seam-media.is-skeleton::before,.skeleton-line,.seam-promo-glow,.seam-member-cta-orb,.nav-links a:hover::after{
animation:none !important}
.nav-links a:hover::after,.nav-links a.is-active::after{
opacity:1;clip-path:none}
.hero-ripples span,.hero-dots span{
opacity:.28}
.hero-track .hero-icon{
display:none}
.hero-spotlight{
transition:none}
.reveal,.prompt-card.is-entering,.seam-media.is-skeleton img,.seam-img-lazy:not(.is-loaded){
opacity:1;filter:none;transform:none;transition:none}
}
.seam-sidebar{
display:flex;flex-direction:column;gap:0}
.seam-widget{
margin:0 0 22px;padding:0}
.seam-widget-title{
display:flex;align-items:center;gap:10px}
.seam-widget-title::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(26,64,255,.22);flex-shrink:0}
.seam-w-list{
display:flex;flex-direction:column;gap:6px}
.seam-w-row{
display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;padding:8px;margin:0 -8px;border-radius:14px;border:1px solid rgba(0,0,0,0);color:inherit;text-decoration:none;transition:background .25s cubic-bezier(0.22,1,0.36,1),border-color .25s,transform .25s cubic-bezier(0.22,1,0.36,1)}
.seam-w-row:hover{
background:var(--nav-hover-bg);border-color:rgba(255,255,255,.06);transform:translateX(3px);color:var(--text-hover)}
.seam-w-row:focus-visible{
outline:2px solid var(--primary);outline-offset:2px}
.seam-w-thumb{
width:52px;height:52px;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(26,64,255,0.28),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(232,64,13,0.16),transparent 50%),#1a1a1a;border:1px solid var(--border);flex-shrink:0}
.seam-w-thumb img{
width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(0.22,1,0.36,1)}
.seam-w-row:hover .seam-w-thumb img{
transform:scale(1.06)}
.seam-w-copy{
display:flex;flex-direction:column;gap:4px;min-width:0}
.seam-w-title{
font-size:13.5px;font-weight:650;line-height:1.35;letter-spacing:-0.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seam-w-meta{
font-size:11.5px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.seam-w-empty{
font-size:13px;color:var(--muted-foreground);margin:0;padding:8px 0}
.seam-promo,.seam-member-cta{
position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:18px;border:1px solid var(--border);isolation:isolate}
.seam-promo{
background:linear-gradient(155deg,rgba(26,64,255,0.12) 0%,transparent 42%),#171717}
.seam-promo-glow{
position:absolute;inset:-40% -20% auto auto;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(26,64,255,0.35),transparent 70%);filter:blur(8px);pointer-events:none;z-index:0;animation:seam-widget-drift 8s ease-in-out infinite alternate}
.seam-promo-title,.seam-member-cta-title{
position:relative;z-index:1;display:block;font-size:15px;font-weight:750;letter-spacing:-0.02em;margin-bottom:8px;line-height:1.3}
.seam-promo-text,.seam-member-cta-text{
position:relative;z-index:1;font-size:13px;color:var(--muted-foreground);line-height:1.55;margin:0 0 14px}
.seam-promo-link{
position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:650;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:color .2s,border-color .2s,transform .25s}
.seam-promo-link:hover{
color:var(--text-hover);border-color:currentColor;transform:translateX(2px)}
.seam-member-cta{
background:linear-gradient(160deg,rgba(26,64,255,0.22) 0%,rgba(232,64,13,0.1) 48%,#141414 100%);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.seam-member-cta-orb{
position:absolute;right:-24px;bottom:-28px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,0.18),transparent 45%),radial-gradient(circle,rgba(26,64,255,0.55),transparent 70%);pointer-events:none;z-index:0;animation:seam-widget-drift 7s ease-in-out infinite alternate-reverse}
.seam-member-cta-btn{
position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:42px;padding:10px 16px;border-radius:12px;border:none;background:#fff;color:#0a0a0a;font-size:13.5px;font-weight:700;letter-spacing:-0.01em;text-decoration:none;transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s,background .2s;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.seam-member-cta-btn:hover{
transform:translateY(-2px);background:#f4f4f5;box-shadow:0 10px 24px rgba(0,0,0,.32);color:#0a0a0a}
.seam-member-cta-btn:focus-visible{
outline:2px solid #fff;outline-offset:3px}
@keyframes seam-widget-drift{
from{
transform:translate(0,0) scale(1)}
to{
transform:translate(-10px,6px) scale(1.08)}
}
.resource-layout{
display:grid;grid-template-columns:clamp(220px,18vw,280px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;margin-bottom:64px}
.resource-layout:not(:has(.blog-aside)){
grid-template-columns:minmax(0,1fr)}
.resource-main{
min-width:0}
.resource-layout .cat-panels{
grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1200px){
.resource-layout .cat-panels{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
.seam-w-cats{
margin-bottom:0}
.seam-w-cats .blog-cat-btn.active{
background:rgba(26,64,255,.14);border-color:rgba(26,64,255,.28)}
html[data-theme=light] .seam-w-cats .blog-cat-btn.active{
background:rgba(26,64,255,.08);border-color:rgba(26,64,255,.2);box-shadow:none}
.article-aside{
padding-top:8px}
html[data-theme=light] .seam-w-row:hover{
background:rgba(18,18,20,.04);border-color:rgba(18,18,20,.08);color:var(--foreground)}
html[data-theme=light] .seam-w-thumb{
background:radial-gradient(ellipse at 30% 20%,rgba(26,64,255,0.14),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(232,64,13,0.08),transparent 50%),var(--secondary);border-color:var(--border)}
html[data-theme=light] .seam-w-meta{
color:var(--light-ink-mute)}
html[data-theme=light] .seam-promo{
background:linear-gradient(155deg,rgba(26,64,255,0.08) 0%,transparent 42%),var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .seam-promo-link{
color:var(--foreground);border-bottom-color:rgba(18,18,20,.28)}
html[data-theme=light] .seam-member-cta{
background:linear-gradient(160deg,rgba(26,64,255,0.14) 0%,rgba(232,64,13,0.06) 45%,var(--card) 100%);border-color:var(--border);box-shadow:0 14px 36px rgba(18,18,20,.1)}
html[data-theme=light] .seam-member-cta-btn{
background:var(--foreground);color:#fff}
html[data-theme=light] .seam-member-cta-btn:hover{
background:#1a1a1e;color:#fff}
html[data-theme=light] .seam-widget-title::before{
box-shadow:0 0 0 3px rgba(26,64,255,.16)}
.home-value{
padding:8px 0 28px}
.home-value-inner{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding-top:18px;padding-bottom:18px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.home-value-list{
display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none}
.home-value-list li{
display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:-0.01em;color:rgba(255,255,255,.82)}
.home-value-mark{
width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px rgba(26,64,255,.22);flex-shrink:0}
.home-value-meta{
display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;font-size:13px;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
.home-value-link{
font-size:13.5px;font-weight:700;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:color .2s,border-color .2s,transform .25s}
.home-value-link:hover{
color:var(--text-hover);border-color:currentColor;transform:translateX(2px)}
.home-catalog{
padding-top:12px}
.home-section-head{
margin:8px 0 18px}
.home-section-head h2{
font-size:clamp(22px,3vw,30px);font-weight:850;letter-spacing:-0.03em;line-height:1.15;margin:0 0 8px}
.home-section-head p{
margin:0;font-size:15px;color:var(--muted-foreground);max-width:42ch;line-height:1.5}
.home-section-head-row{
display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.home-section-more{
flex-shrink:0;font-size:13.5px;font-weight:650;color:var(--foreground);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color .2s,border-color .2s,transform .25s}
.home-section-more:hover{
color:var(--text-hover);border-color:currentColor;transform:translateX(2px)}
.home-articles{
padding-top:48px;padding-bottom:16px}
.home-articles-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:18px}
.home-filter-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;min-height:200px;padding:40px 20px;text-align:center}
.home-filter-empty p{
margin:0;max-width:36ch;font-size:15px;color:var(--muted-foreground);line-height:1.5}
.home-pricing{
padding-top:48px;padding-bottom:24px}
.home-pricing-note{
margin:0 0 16px;font-size:13px;color:var(--muted-foreground)}
.home-pricing-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-price-card{
position:relative;padding:22px 20px 20px;border-radius:18px;border:1px solid var(--border);background:#171717;display:flex;flex-direction:column;gap:8px;transition:transform .35s cubic-bezier(0.22,1,0.36,1),border-color .3s,box-shadow .35s}
.home-price-card:hover{
transform:translateY(-3px);border-color:rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.home-price-card.is-popular{
padding-top:28px;padding-right:22px;background:linear-gradient(165deg,rgba(26,64,255,0.16) 0%,transparent 42%),#171717;border-color:rgba(26,64,255,.35)}
.home-price-card.is-popular h3{
padding-right:5.5em}
.btn-home-price{
font-family:inherit}
.home-price-badge{
position:absolute;top:14px;right:14px;font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:rgba(26,64,255,.2);color:#c8d2ff}
.home-price-card h3{
margin:0;font-size:18px;font-weight:750;letter-spacing:-0.02em}
.home-price-desc{
margin:0;font-size:13px;color:var(--muted-foreground);line-height:1.45;min-height:2.9em}
.home-price-amount{
display:flex;align-items:baseline;gap:8px;margin-top:4px}
.home-price-amount .now{
font-size:28px;font-weight:850;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.home-price-amount .old{
font-size:14px;color:var(--muted-foreground);text-decoration:line-through}
.home-price-interval{
margin:0 0 8px;font-size:12px;color:var(--muted-foreground)}
.btn-home-price{
display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:auto;padding:10px 14px;border:none;border-radius:12px;background:#fff;color:#0a0a0a;font-size:14px;font-weight:700;cursor:pointer;transition:transform .25s cubic-bezier(0.22,1,0.36,1),box-shadow .25s,background .2s,opacity .2s}
.btn-home-price:hover:not(:disabled){
transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
.btn-home-price:disabled{
opacity:.45;cursor:not-allowed}
.btn-home-price:focus-visible{
outline:2px solid #fff;outline-offset:3px}
@media(max-width:1100px){
.home-pricing-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.home-pricing-grid .home-price-card:last-child:nth-child(odd){
grid-column:1/-1;max-width:420px;justify-self:center;width:100%}
}
@media(max-width:960px){
.home-pricing-grid{
grid-template-columns:1fr}
.home-pricing-grid .home-price-card:last-child:nth-child(odd){
grid-column:auto;max-width:none}
.home-section-head-row{
flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
.home-value-inner{
flex-direction:column;align-items:flex-start}
.home-price-desc{
min-height:0}
}
html[data-theme=light] .btn-unlimited{
box-shadow:0 10px 28px rgba(18,18,20,.12)}
html[data-theme=light] .btn-hero-secondary{
border-color:rgba(18,18,20,.14);color:var(--foreground);background:rgba(255,255,255,.55)}
html[data-theme=light] .btn-hero-secondary:hover{
background:rgba(18,18,20,.04);border-color:rgba(18,18,20,.22)}
html[data-theme=light] .hero-sub{
color:var(--light-ink-soft)}
html[data-theme=light] .hero-meta{
color:var(--light-ink-mute)}
html[data-theme=light] .home-value-list li{
color:var(--foreground)}
html[data-theme=light] .home-value-meta,html[data-theme=light] .home-pricing-note{
color:var(--light-ink-mute)}
html[data-theme=light] .home-value-link,html[data-theme=light] .home-section-more{
color:var(--foreground);border-bottom-color:rgba(18,18,20,.28)}
html[data-theme=light] .home-price-card{
background:var(--card);border-color:var(--border);box-shadow:var(--shadow-soft)}
html[data-theme=light] .home-price-card.is-popular{
background:linear-gradient(165deg,rgba(26,64,255,0.1) 0%,transparent 42%),var(--card);border-color:rgba(26,64,255,.28)}
html[data-theme=light] .home-price-badge{
background:rgba(26,64,255,.1);color:#1a40ff}
html[data-theme=light] .btn-home-price{
background:var(--foreground);color:#fff}
html[data-theme=light] .btn-home-price:hover:not(:disabled){
background:#1a1a1e}
.prompt-action.is-lock,.prompt-action:has(>svg>path:only-child){
color:var(--muted-foreground);opacity:1}
.prompt-action.is-lock svg,.prompt-action:has(>svg>path:only-child) svg{
fill:none;stroke:currentColor;stroke-width:1.75}
.prompt-action.is-lock svg circle{
fill:currentColor;stroke:none}
.prompt-card:hover .prompt-action.is-lock,.prompt-action.is-lock:hover,.prompt-action:has(>svg>path:only-child):hover{
color:var(--foreground)}
.prompt-action.is-copy svg{
fill:none}
.prompt-action.is-busy{
opacity:.45;pointer-events:none}
.prompt-action.is-copied{
color:#3dd68c}
.seam-toast{
position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:140;display:flex;align-items:center;gap:12px;max-width:min(92vw,440px);padding:12px 16px;border-radius:12px;background:#1c1c1c;color:#f5f5f5;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(0,0,0,.4);font-size:14px;line-height:1.45;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px);transition:opacity .2s ease,transform .2s ease}
.seam-toast.is-show{
opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.seam-toast a{
color:#fff;font-weight:700;white-space:nowrap;text-decoration:underline}
.seam-toast.is-error{
border-color:rgba(255,140,120,.5)}
html[data-theme=light] .seam-toast{
background:#fff;color:#121214;border-color:rgba(0,0,0,.08);box-shadow:0 12px 40px rgba(0,0,0,.14)}
html[data-theme=light] .seam-toast a{
color:var(--primary,#3d5f8a)}
html[data-theme=dark] .btn-unlimited,html[data-theme=dark] .btn-signup,html[data-theme=dark] .btn-go-unlimited,html[data-theme=dark] .btn-price,html[data-theme=dark] .price-card.popular .btn-price,html[data-theme=dark] .btn-d3,html[data-theme=dark] .btn-home-price,html[data-theme=dark] .btn-account,html[data-theme=dark] .seam-member-cta-btn,html[data-theme=dark] .auth-submit,html[data-theme=dark] .btn-contact-submit,html[data-theme=dark] .footer-cta-btn{
background:#e6e8ed;background-image:none;color:#13151a;border-color:transparent;box-shadow:none;filter:none;}
html[data-theme=dark] .btn-unlimited:hover,html[data-theme=dark] .btn-signup:hover,html[data-theme=dark] .btn-go-unlimited:hover,html[data-theme=dark] .btn-price:hover,html[data-theme=dark] .price-card.popular .btn-price:hover,html[data-theme=dark] .btn-d3:hover,html[data-theme=dark] .btn-home-price:hover,html[data-theme=dark] .btn-account:hover,html[data-theme=dark] .seam-member-cta-btn:hover,html[data-theme=dark] .auth-submit:hover,html[data-theme=dark] .btn-contact-submit:hover,html[data-theme=dark] .footer-cta-btn:hover{
background:#f4f5f8;background-image:none;color:#13151a;box-shadow:none;filter:none;}
html[data-theme=dark] .auth-tab.active,html[data-theme=dark] .subject-pill.active,html[data-theme=dark] .cat-chip.active,html[data-theme=dark] .pack-qty button.active,html[data-theme=dark] .home-feed-pages button.is-current,html[data-theme=dark] .posts-nav .page-numbers.current,html[data-theme=dark] .filter-chip.active{
background:#232833;background-image:none;color:#f3f4f7;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);filter:none;}
html[data-theme=dark] .filter-chip.active:hover,html[data-theme=dark] .subject-pill.active:hover,html[data-theme=dark] .cat-chip.active:hover{
background:#2a3140;color:#f3f4f7;}
html[data-theme=light] .btn-unlimited,html[data-theme=light] .btn-signup,html[data-theme=light] .btn-go-unlimited,html[data-theme=light] .btn-price,html[data-theme=light] .price-card.popular .btn-price,html[data-theme=light] .btn-d3,html[data-theme=light] .btn-home-price,html[data-theme=light] .btn-account,html[data-theme=light] .seam-member-cta-btn,html[data-theme=light] .auth-submit,html[data-theme=light] .btn-contact-submit,html[data-theme=light] .footer-cta-btn{
background:#17191f;background-image:none;color:#f8f9fb;border-color:transparent;box-shadow:none;filter:none;}
html[data-theme=light] .btn-unlimited:hover,html[data-theme=light] .btn-signup:hover,html[data-theme=light] .btn-go-unlimited:hover,html[data-theme=light] .btn-price:hover,html[data-theme=light] .price-card.popular .btn-price:hover,html[data-theme=light] .btn-d3:hover,html[data-theme=light] .btn-home-price:hover,html[data-theme=light] .btn-account:hover,html[data-theme=light] .seam-member-cta-btn:hover,html[data-theme=light] .auth-submit:hover,html[data-theme=light] .btn-contact-submit:hover,html[data-theme=light] .footer-cta-btn:hover{
background:#2a2d36;background-image:none;color:#f8f9fb;box-shadow:none;filter:none;}
html[data-theme=light] .auth-tab.active,html[data-theme=light] .subject-pill.active,html[data-theme=light] .cat-chip.active,html[data-theme=light] .pack-qty button.active,html[data-theme=light] .home-feed-pages button.is-current,html[data-theme=light] .posts-nav .page-numbers.current,html[data-theme=light] .filter-chip.active{
background:#17191f;background-image:none;color:#f8f9fb;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);filter:none;}
html[data-theme=light] .filter-chip.active:hover,html[data-theme=light] .subject-pill.active:hover,html[data-theme=light] .cat-chip.active:hover{
background:#2a2d36;color:#f8f9fb;}
html[data-theme=light] .cat-chip.active .num{
background:rgba(248,249,251,.12);color:#f8f9fb}
html[data-theme=dark] .hero.hero-fintar .btn-unlimited::after{
display:none}
html[data-theme=dark] .cat-chip.active .num{
background:rgba(243,244,247,.08);color:#f3f4f7}
html[data-theme=dark] .prompt-media img,html[data-theme=dark] .prompt-media video,html[data-theme=dark] .d3-item-media img,html[data-theme=dark] .d3-item-media video,html[data-theme=dark] .blog-card-cover img,html[data-theme=dark] .detail-media img,html[data-theme=dark] .detail-media video{
filter:none;will-change:auto;transition:none;}
html[data-theme=dark] .prompt-media::after{
opacity:.4;transition:none;background:rgba(18,18,18,.22);}
html[data-theme=dark] .hero-wash{
opacity:.4;background:radial-gradient(ellipse 55% 50% at 28% 32%,rgba(72,54,110,.28),transparent 68%),radial-gradient(ellipse 48% 46% at 76% 28%,rgba(96,40,22,.2),transparent 70%),radial-gradient(ellipse 60% 42% at 52% 78%,rgba(36,32,30,.18),transparent 72%);}
html[data-theme=dark] .hero-orb{
opacity:.38}
html[data-theme=dark] .hero-orb-a{
background:radial-gradient(circle,rgba(64,48,100,.4),transparent 70%)}
html[data-theme=dark] .hero-orb-b{
background:radial-gradient(circle,rgba(88,36,20,.28),transparent 72%)}
html[data-theme=dark] .hero-spotlight{
background:radial-gradient(460px 320px at var(--gradient-x) var(--gradient-y),rgba(28,28,28,.35),transparent 60%);mix-blend-mode:normal;}
html[data-theme=dark] .hero-scan{
opacity:.08}
html[data-theme=dark] .hero-icon-shine{
opacity:.18}
html[data-theme=dark] .hero-icon-shell{
filter:brightness(.68) saturate(.72)}
html[data-theme=dark] .hero-dots span{
background:#5c5470;box-shadow:none}
html[data-theme=dark] .d3-banner h2{
color:#f3f4f7}
html[data-theme=dark] .d3-banner p,html[data-theme=dark] .inner-hero p{
color:#a9afba}
html[data-theme=dark] .seam-toast{
color:#f3f4f7}
html[data-theme=dark] .seam-toast a{
color:#a3b7ce}
html[data-theme=dark] .lang-switch--pill .lang-seg.is-active{
color:#c8c8c8}
html[data-theme=dark] .detail-back,html[data-theme=dark] .auth-tab:not(.active):hover,html[data-theme=dark] .auth-close:hover,html[data-theme=dark] .feedback-close:hover{
color:#f3f4f7}
.prompt-media video.is-playing,
.prompt-media video.seam-card-preview.is-playing{
opacity:1}
.d3-item-media{
position:relative}
.d3-item-media video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1}
.d3-item-media video.is-playing,
.d3-item-media video.seam-card-preview.is-playing{
opacity:1}
.detail-media video{
opacity:0}
.detail-media video.is-playing{
opacity:1}
html[data-theme=dark] .blog-card-cover,html[data-theme=dark] .d3-item-media{
position:relative}
html[data-theme=dark] .blog-card-cover::after,html[data-theme=dark] .d3-item-media::after{
content:"";position:absolute;inset:0;background:rgba(18,18,18,.22);pointer-events:none;z-index:2;}
html[data-theme=dark] .d3-banner .d3-item:hover .d3-item-title{
color:var(--foreground)}
html[data-theme=dark] .mobile-auth-btn--solid,html[data-theme=dark] .mobile-auth-btn--solid:hover{
background:#e6e8ed;background-image:none;color:#13151a;border-color:transparent;filter:none;box-shadow:none;}
.cover-fav{
position:absolute;top:10px;right:10px;z-index:5;width:36px;height:36px;border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(18,18,18,.55);color:#d2d2d2;opacity:0;pointer-events:none;transition:opacity .2s ease,background .2s ease,color .2s ease}
.cover-fav svg{
width:18px;height:18px}
.prompt-card:hover .cover-fav,.prompt-card:focus-within .cover-fav,.cover-fav.is-fav,.cover-fav:focus-visible{
opacity:1;pointer-events:auto}
.cover-fav.is-fav{
color:#e08b98;background:rgba(18,18,18,.72)}
.cover-fav:hover{
background:rgba(18,18,18,.82)}
/* Video cover loading — three-dot pulse (same motion as detail-loading-mark) */
.cover-loading{
  position:absolute;
  inset:0;
  z-index:4;
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:color-mix(in srgb, var(--background) 22%, transparent);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
}
html[data-theme=light] .cover-loading{background:rgba(255,255,255,.28)}
.prompt-media.is-video-loading .cover-loading,
.d3-item-media.is-video-loading .cover-loading,
.detail-media.is-video-loading .cover-loading{display:flex}
.cover-loading i{
  display:block;
  width:8px;
  height:8px;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb, var(--foreground) 70%, transparent);
  animation:detail-dot 1.05s ease-in-out infinite;
}
.cover-loading i:nth-child(2){animation-delay:.14s}
.cover-loading i:nth-child(3){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){.cover-loading i{animation:none}}




@media (hover:none){
.cover-fav{
opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){
.cover-loading i{
animation:none;border-top-color:#c8c8c8}
}
.contact-hero,.cat-hero,.blog-hero,.inner-hero,.placeholder-page,.account-hero-inner,.contact-layout,.account-layout,.blog-layout,.blog-layout:not(:has(.blog-aside)),.blog-layout.blog-layout--solo,.article-shell,.article-shell:has(.article-aside),.article-more,.simple-grid{
max-width:var(--content-max)}
.article-page,.article-shell:has(.article-aside) .article-page{
max-width:none}
.article-more,.placeholder-page,.inner-hero,.account-hero-inner{
margin-left:auto;margin-right:auto}
.seam-media.is-skeleton::before,.skeleton-card .seam-media::before,.skeleton-line{
background:linear-gradient(100deg,#1a1e26 0%,#2a3140 46%,#1a1e26 100%);background-size:220% 100%}
html[data-theme=light] .seam-media.is-skeleton::before,html[data-theme=light] .skeleton-card .seam-media::before,html[data-theme=light] .skeleton-line{
background:linear-gradient(100deg,#e3e3ea 0%,#f6f6f9 46%,#e3e3ea 100%);background-size:220% 100%}
.seam-media.is-error>img{
opacity:0}
.prompt-media.is-error,.prompt-media:not(:has(img)):not(.is-skeleton),.d3-item-media.is-error,.d3-item-media:not(:has(img)):not(.is-skeleton),.blog-card-cover.is-error,.blog-card-cover--empty,.detail-media.is-error{
background:radial-gradient(120% 90% at 0% 0%,rgba(148,168,198,.22),transparent 56%),radial-gradient(90% 80% at 100% 100%,rgba(176,150,132,.1),transparent 52%),#1a1e26}
html[data-theme=light] .prompt-media.is-error,html[data-theme=light] .prompt-media:not(:has(img)):not(.is-skeleton),html[data-theme=light] .d3-item-media.is-error,html[data-theme=light] .d3-item-media:not(:has(img)):not(.is-skeleton),html[data-theme=light] .blog-card-cover.is-error,html[data-theme=light] .blog-card-cover--empty,html[data-theme=light] .detail-media.is-error{
background:radial-gradient(120% 90% at 0% 0%,rgba(176,160,214,.55),transparent 58%),radial-gradient(90% 80% at 100% 100%,rgba(232,206,184,.7),transparent 54%),#e7e7ee}
.prompt-col:nth-child(even) .prompt-card:nth-child(odd) .prompt-media.is-error,.prompt-col:nth-child(even) .prompt-card:nth-child(odd) .prompt-media:not(:has(img)):not(.is-skeleton){
background:radial-gradient(100% 80% at 100% 0%,rgba(148,168,198,.2),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(176,150,132,.1),transparent 52%),#161a22}
html[data-theme=light] .prompt-col:nth-child(even) .prompt-card:nth-child(odd) .prompt-media.is-error,html[data-theme=light] .prompt-col:nth-child(even) .prompt-card:nth-child(odd) .prompt-media:not(:has(img)):not(.is-skeleton){
background:radial-gradient(100% 80% at 100% 0%,rgba(168,186,214,.7),transparent 56%),radial-gradient(80% 70% at 0% 100%,rgba(214,196,176,.65),transparent 52%),#e8e9f0}
.prompt-col .prompt-card:nth-child(3n) .prompt-media.is-error,.prompt-col .prompt-card:nth-child(3n) .prompt-media:not(:has(img)):not(.is-skeleton){
background:radial-gradient(90% 80% at 50% 100%,rgba(148,168,198,.18),transparent 58%),#1a1e26}
html[data-theme=light] .prompt-col .prompt-card:nth-child(3n) .prompt-media.is-error,html[data-theme=light] .prompt-col .prompt-card:nth-child(3n) .prompt-media:not(:has(img)):not(.is-skeleton){
background:radial-gradient(90% 80% at 50% 100%,rgba(186,170,214,.62),transparent 60%),#ece8f2}
.prompt-media.is-error::before,.prompt-media:not(:has(img)):not(.is-skeleton)::before,.d3-item-media.is-error::before,.d3-item-media:not(:has(img)):not(.is-skeleton)::before,.blog-card-cover.is-error::before,.blog-card-cover--empty::before,.detail-media.is-error::before{
content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);z-index:1;pointer-events:none;background:color-mix(in srgb,var(--foreground) 42%,transparent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8.5' cy='10' r='1.3' fill='%23000'/%3E%3Cpath d='M7 17.5 12.2 12l3.1 3.2L21 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px 28px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Ccircle cx='8.5' cy='10' r='1.3' fill='%23000'/%3E%3Cpath d='M7 17.5 12.2 12l3.1 3.2L21 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/28px 28px no-repeat}
@media(prefers-reduced-motion:reduce){
.seam-media.is-skeleton::before,.skeleton-card .seam-media::before,.skeleton-line{
animation:none}
}
.empty-state{
max-width:var(--content-max);margin:0 auto;padding:clamp(56px,8vw,88px) var(--page-gutter) 96px}
.empty-state--inset{
max-width:none;padding:8px 0 72px}
.empty-state h1,.empty-state p{
margin:0 0 14px}
.empty-state h1{
font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.03em}
.empty-state p{
color:var(--muted-foreground);line-height:1.6;font-size:16px}
.empty-state-links{
display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.empty-state-links a{
display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);color:var(--foreground);background:var(--card)}
.empty-state-links a:first-child{
background:var(--foreground);color:var(--background);border-color:transparent}
html[data-theme=dark] .empty-state-links a:first-child{
background:#e6e8ed;color:#13151a;border-color:transparent}
.nav-links .nav-menu{
display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-links .menu-item{
position:relative;list-style:none}
.nav-links .menu-item-row{
display:flex;align-items:center}
.nav-submenu-toggle{
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:-4px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--nav-link);cursor:pointer}
.nav-submenu-toggle svg{
width:14px;height:14px;transition:transform .2s ease}
.nav-submenu-toggle:hover,.nav-submenu-toggle:focus-visible{
color:var(--foreground);background:var(--nav-hover-bg);outline:none}
@media (hover:hover) and (pointer:fine){
.nav-links>.nav-menu>.menu-item>.menu-item-row>.nav-submenu-toggle{
display:none}
}
.nav-links .sub-menu{
display:none;position:absolute;top:calc(100% - 6px);left:0;z-index:130;min-width:200px;margin:0;padding:18px 8px 8px;list-style:none;background:transparent;border:0;box-shadow:none}
.nav-links .sub-menu::before{
content:"";position:absolute;top:18px;left:0;right:0;bottom:0;border-radius:14px;background:var(--surface-elevated);border:1px solid var(--border);box-shadow:0 16px 40px rgba(0,0,0,.28);pointer-events:none}
.nav-links .sub-menu>.menu-item{
position:relative;z-index:1}
.nav-links .sub-menu .sub-menu{
top:0;left:calc(100% + 6px);padding:0 0 0 6px}
.nav-links .sub-menu .sub-menu::before{
top:0;left:6px}
.nav-links .menu-item:hover>.sub-menu,.nav-links .menu-item:focus-within>.sub-menu,.nav-links .menu-item.is-open>.sub-menu{
display:block}
.nav-links .menu-item:hover>.menu-item-row .nav-submenu-toggle svg,.nav-links .menu-item:focus-within>.menu-item-row .nav-submenu-toggle svg,.nav-links .menu-item.is-open>.menu-item-row .nav-submenu-toggle svg{
transform:rotate(180deg)}
.nav-links .sub-menu .menu-link{
display:flex;width:100%;padding:8px 12px;border-radius:10px;white-space:nowrap}
.nav-links .sub-menu .menu-link:hover,.nav-links .sub-menu .menu-link:focus-visible{
background:var(--nav-hover-bg)}
@media(min-width:1024px){
.site-nav,.site-nav .nav-left,.nav-links,.nav-links .nav-menu,.nav-links .menu-item{
overflow:visible}
.nav-links{
overflow:visible}
}
.mobile-menu-nav .nav-menu{
display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;width:100%}
.mobile-menu-nav .menu-item{
list-style:none;width:100%}
.mobile-menu-nav .menu-item-row{
display:flex;align-items:center;width:100%}
.mobile-menu-nav .menu-link{
flex:1;min-width:0}
.mobile-menu-nav .sub-menu{
display:none;position:static;margin:0;padding:0 0 0 12px;list-style:none;background:transparent;border:0;box-shadow:none;min-width:0}
.mobile-menu-nav .menu-item.is-open>.sub-menu{
display:block}
.menu-item.is-open>.menu-item-row .nav-submenu-toggle svg{
transform:rotate(180deg)}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:2px solid var(--seam-accent,#8a78b8);outline-offset:2px}
.nav-submenu-toggle:focus-visible,.seam-member-cta-btn:focus-visible,.btn-home-price:focus-visible{
outline:2px solid var(--seam-accent,#8a78b8);outline-offset:2px}
.seam-secret{
position:relative;display:block;width:100%}
.auth-field .seam-secret input,.account-form .seam-secret input{
padding-right:46px}
.seam-secret-toggle{
position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);cursor:pointer}
.seam-secret-toggle svg{
width:18px;height:18px}
.seam-secret-toggle .is-hide{
display:none}
.seam-secret-toggle.is-shown .is-show{
display:none}
.seam-secret-toggle.is-shown .is-hide{
display:block}
.seam-secret-toggle:hover{
color:var(--foreground);background:var(--nav-hover-bg)}
.seam-share-btn{
display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--foreground);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.seam-share-btn svg{
width:16px;height:16px;flex:none}
.seam-share-btn--icon{
width:36px;height:36px;padding:0;justify-content:center}
.article-share{
margin:4px 0 18px}
.detail-sidebar .detail-share{
width:100%;justify-content:center;margin:8px 0}
.account-card-body .seam-share-btn{
margin-top:8px}
.account-item .seam-share-btn{
flex:none;align-self:center}
.seam-share{
position:fixed;z-index:200;width:min(280px,calc(100vw - 24px));padding:10px;border:1px solid var(--border);border-radius:16px;background:var(--surface-elevated);color:var(--foreground);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.seam-share-row{
display:flex;flex-direction:column;gap:4px}
.seam-share-extra:not([hidden]){
display:flex;flex-direction:column;gap:4px}
.seam-share-channel{
display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.seam-share-channel:hover{
background:var(--nav-hover-bg)}
.seam-share-more{
color:var(--muted-foreground)}
.seam-share-note{
margin:8px 4px 0;color:var(--muted-foreground);font-size:13px;line-height:1.5}
.seam-share-qr:not([hidden]){
display:flex;justify-content:center;margin-top:10px;padding:10px;border-radius:12px;background:#fff}
.seam-share-qr canvas{
width:180px;height:180px}
.seam-share-link{
width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--input-bg);color:var(--foreground);font:inherit;font-size:13px}
html.is-fast-scroll .site-nav{
-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
html.is-fast-scroll .seam-gate-blur-layer{
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
.site-header{
transition:none;}
.prompt-media video,.d3-item-media video{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.filters-actions{
gap:8px}
.cat-toolbar-meta{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.tone-switch{
display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface-elevated) 92%,transparent);flex:0 0 auto}
.tone-switch-item{
appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);font:inherit;font-size:13px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap}
.tone-switch-item.is-active{
background:var(--foreground);color:var(--background)}
.tone-dot{
width:10px;height:10px;border-radius:50%;box-sizing:border-box;flex:0 0 auto}
.tone-dot--light{
background:transparent;border:1.5px solid currentColor}
.tone-dot--dark{
background:currentColor;border:1.5px solid currentColor}
@media (max-width:760px){
.filters-bar{
flex-wrap:wrap}
.filters-actions{
width:100%;justify-content:flex-end}
}
.tone-switch{
max-width:min(100%,420px);overflow-x:auto}
.tone-switch-item.is-swatch{
width:28px;min-height:28px;padding:0;justify-content:center;background:transparent}
.tone-switch-item.is-swatch.is-active{
background:transparent;color:inherit;box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--foreground)}
.tone-dot{
width:14px;height:14px;background:var(--tone,#ccc);border:1px solid color-mix(in srgb,var(--foreground) 22%,transparent)}
.detail-meta-row{
display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px}
.detail-meta-row--tones{
flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.detail-meta-row--tones::-webkit-scrollbar{
display:none}
.detail-meta-row .cat{
margin:0}
.detail-meta-row .detail-stat{
opacity:.72;font-size:.86em}
.detail-tone{
display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-height:24px;padding:0 8px 0 7px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface-elevated) 88%,transparent);color:var(--foreground);font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
.detail-tone .tone-dot{
width:9px;height:9px;flex:0 0 auto}
.tone-switch{
display:inline-flex;align-items:center;gap:1px;height:40px;max-width:min(100%,460px);padding:4px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 10%,transparent);background:color-mix(in srgb,var(--surface-elevated) 90%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 5%,transparent);overflow-x:auto;scrollbar-width:none}
.tone-switch::-webkit-scrollbar{
display:none}
.tone-switch-item{
height:32px;min-height:32px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:650;letter-spacing:.04em;color:var(--muted-foreground)}
.tone-switch-item:not(.is-swatch).is-active{
background:var(--foreground);color:var(--background)}
.tone-switch-item.is-swatch{
width:30px;padding:0;background:transparent}
.tone-switch-item.is-swatch .tone-dot{
width:16px;height:16px;border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 16%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 26%,transparent)}
.tone-switch-item.is-swatch:hover .tone-dot{
box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 18%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 30%,transparent),0 0 0 3px color-mix(in srgb,var(--tone) 32%,transparent)}
.tone-switch-item.is-swatch.is-active{
background:transparent;box-shadow:none}
.tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 20%,transparent),0 0 0 2px var(--surface-elevated),0 0 0 3.5px color-mix(in srgb,var(--foreground) 78%,transparent)}
.detail-tone{
min-height:28px;padding:0 11px 0 8px;border-color:color-mix(in srgb,var(--foreground) 12%,transparent);letter-spacing:.02em}
.detail-tone .tone-dot{
width:12px;height:12px;border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 16%,transparent)}
.filters-actions{
min-width:0}
.tone-switch{
flex:0 1 auto;min-width:0;max-width:min(100%,480px);-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
html[data-theme=light] .tone-switch{
background:#fff;border-color:rgba(18,18,20,.1);box-shadow:0 1px 2px rgba(18,18,20,.05)}
html[data-theme=dark] .tone-switch,:root:not([data-theme=light]) .tone-switch{
background:#1a1e26;border-color:rgba(243,244,247,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme=light] .tone-switch-item.is-swatch .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.45)}
html[data-theme=dark] .tone-switch-item.is-swatch .tone-dot,:root:not([data-theme=light]) .tone-switch-item.is-swatch .tone-dot{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.08)}
html[data-theme=light] .tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 2px #fff,0 0 0 3.5px #121214}
html[data-theme=dark] .tone-switch-item.is-swatch.is-active .tone-dot,:root:not([data-theme=light]) .tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.34),0 0 0 2px #1a1e26,0 0 0 3.5px #f3f4f7}
@media (hover:hover) and (pointer:fine){
html[data-theme=light] .tone-switch-item.is-swatch:hover .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--tone) 34%,transparent)}
html[data-theme=dark] .tone-switch-item.is-swatch:hover .tone-dot,:root:not([data-theme=light]) .tone-switch-item.is-swatch:hover .tone-dot{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 3px color-mix(in srgb,var(--tone) 40%,transparent)}
}
html[data-theme=light] .detail-tone{
background:#fff;border-color:rgba(18,18,20,.1);color:#121214}
html[data-theme=dark] .detail-tone,:root:not([data-theme=light]) .detail-tone{
background:#1a1e26;border-color:rgba(243,244,247,.12);color:#f3f4f7}
html[data-theme=light] .detail-tone .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
html[data-theme=dark] .detail-tone .tone-dot,:root:not([data-theme=light]) .detail-tone .tone-dot{
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
@media (max-width:760px){
.filters-bar{
flex-wrap:wrap;align-items:center;row-gap:10px}
.filters-scroll{
flex:1 1 100%;width:100%}
.filters-actions{
flex:1 1 100%;width:100%;min-width:0;justify-content:flex-start}
.tone-switch{
flex:1 1 auto;width:auto;max-width:none;height:44px}
.tone-switch-item{
height:36px;min-height:36px}
.tone-switch-item.is-swatch{
width:36px}
.cat-toolbar{
flex-wrap:wrap;align-items:stretch}
.cat-search{
flex:1 1 100%;max-width:none}
.cat-toolbar-meta{
flex:1 1 100%;width:100%;min-width:0;justify-content:flex-start}
.cat-toolbar .tone-switch{
flex:1 1 auto;max-width:none}
}
.detail-overlay.open{
cursor:pointer}
/* Only the card shell uses default cursor; do NOT force auto on * (that stole pointer from inner buttons/icons). */
.detail-overlay .detail-card{
cursor:auto}
.detail-overlay .detail-card :is(a,button,summary,label,[role=button],.prompt-card,.prompt-action,.detail-tool,.detail-back,.like-btn,.cover-fav,.detail-feedback-btn,.btn-go-unlimited,.seam-share-btn,.auth-code-btn){
cursor:pointer}
.detail-overlay .detail-card :is(a,button,[type=button],[type=submit]):disabled{
cursor:not-allowed}
.seam-dock{
position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:96;display:flex;flex-direction:column;align-items:center;gap:12px;user-select:none;overflow:visible}
.seam-dock-btn{
--dock-bg:#1a1e26;position:relative;width:48px;height:48px;padding:0;border:1px solid rgba(243,244,247,.12);border-radius:50%;background:var(--dock-bg);color:#f3f4f7;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.seam-dock-btn:hover{
background:#232833}
.seam-dock-btn:focus-visible{
outline:2px solid #a3b7ce;outline-offset:3px}
.seam-dock-btn.seam-dock-bot,
.seam-dock-eye.seam-dock-bot,
.seam-dock-btn.seam-dock-bot:hover,
.seam-dock-eye.seam-dock-bot:hover,
html[data-theme=light] .seam-dock-btn.seam-dock-bot,
html[data-theme=light] .seam-dock-btn.seam-dock-bot:hover,
html[data-theme=light] .seam-dock-eye.seam-dock-bot,
html[data-theme=light] .seam-dock-eye.seam-dock-bot:hover{
width:60px;height:60px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;color:transparent;outline:none}
.seam-dock-btn.seam-dock-bot:focus-visible,
.seam-dock-eye.seam-dock-bot:focus-visible{
outline:2px solid #a3b7ce;outline-offset:4px;background:transparent}
.seam-bot-cat{
position:relative;display:block;width:52px;height:52px;overflow:visible;pointer-events:none;background:transparent;opacity:0;transition:opacity .18s cubic-bezier(.22,1,.36,1)}
.seam-bot-cat.is-bot-ready{
opacity:1}
.seam-bot-cat-canvas{
position:absolute;left:50%;top:50%;width:78px;height:78px;margin:0;transform:translate(-50%,-50%);pointer-events:none;display:block;background:transparent}
@media (prefers-reduced-motion:reduce){
.seam-bot-cat{transition:none}
}
.seam-dock-top{
border-color:transparent}
.seam-dock-ring{
position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seam-top-track,.seam-top-progress{
fill:none;stroke-width:2}
.seam-top-track{
stroke:rgba(243,244,247,.2)}
.seam-top-progress{
stroke:#a3b7ce;stroke-linecap:round;transform:rotate(-90deg);transform-origin:24px 24px;stroke-dasharray:138.23;stroke-dashoffset:138.23}
.seam-dock-arrow{
position:relative;z-index:1;width:18px;height:18px}
.seam-dock-eye{
--dock-bg:#1a1e26;--seam-face:#f3f4f7;align-items:center;justify-content:center;padding:0;background:#1a1e26;border-color:rgba(243,244,247,.12);color:var(--seam-face);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.seam-dock-eye:hover{
background:#232833}
.seam-dock-eye .seam-eye{
background:var(--seam-face)}
.seam-dock-eye .seam-mouth path{
stroke:var(--seam-face)}
.seam-face{
position:relative;display:flex;align-items:flex-start;justify-content:center;gap:5px;width:20px;height:18px;padding-top:1px;box-sizing:border-box}
.seam-eye{
display:block;width:4.5px;height:7px;border-radius:999px;background:#161616;transform-origin:center;flex:0 0 auto}
.seam-mouth{
position:absolute;left:50%;top:11px;width:11px;height:7px;margin-left:-5.5px;overflow:visible}
.seam-mouth path{
fill:none;stroke:#161616;stroke-width:1.6;stroke-linecap:round;opacity:0;transition:opacity .35s ease}
.seam-mouth .seam-mouth-line{
opacity:1}
.seam-mouth.is-smile .seam-mouth-line,.seam-mouth.is-up .seam-mouth-line{
opacity:0}
.seam-mouth.is-smile .seam-mouth-smile,.seam-mouth.is-up .seam-mouth-up{
opacity:1}
.seam-dock-eye.is-blink .seam-eye{
animation:seam-pill-blink .16s ease-in-out}
.seam-dock-eye.is-blink .seam-eye:nth-child(2){
animation-delay:.05s}
@keyframes seam-pill-blink{
0%{
transform:scaleY(1)}
45%{
transform:scaleY(.12)}
100%{
transform:scaleY(1)}
}
body.menu-open .seam-dock,
body.detail-open .seam-dock{
display:none !important;}
html[data-theme=light] .seam-dock-btn{
--dock-bg:#fff;background:#fff;color:#121214;border-color:rgba(18,18,20,.1);box-shadow:0 10px 28px rgba(18,18,20,.12)}
html[data-theme=light] .seam-dock-btn:hover{
background:#f7f7f8}
html[data-theme=light] .seam-dock-btn:focus-visible{
outline-color:#121214}
html[data-theme=light] .seam-top-track{
stroke:rgba(18,18,20,.16)}
html[data-theme=light] .seam-top-progress{
stroke:#121214}
html[data-theme=light] .seam-dock-eye:not(.seam-dock-bot){
--dock-bg:#fff;--seam-face:#161616;background:#fff;color:#161616;border-color:rgba(18,18,20,.12);box-shadow:0 8px 22px rgba(18,18,20,.12)}
html[data-theme=light] .seam-dock-eye:not(.seam-dock-bot):hover{
background:#f6f6f6}
.feedback-dialog{
max-width:460px;max-height:min(720px,calc(100dvh - 48px));padding:22px 22px 18px;border-radius:28px;overflow:auto;background:#14171d;border:1px solid rgba(243,244,247,.12);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.feedback-dialog::before{
height:110px;background:radial-gradient(ellipse at 24% 0%,rgba(148,168,198,.12),transparent 68%)}
.feedback-head{
position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin:0 36px 18px 0}
.feedback-mark{
--dock-bg:#fff;width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;background:#fff;border:1px solid rgba(18,20,26,.1)}
.feedback-mark.feedback-mark-bot{
width:52px;height:52px;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.feedback-mark.feedback-mark-bot .seam-bot-cat{
width:44px;height:44px}
.feedback-mark.feedback-mark-bot .seam-bot-cat-canvas{
width:66px;height:66px}
.feedback-head-copy{
min-width:0}
.feedback-dialog h2{
margin:0 0 4px;font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:#f3f4f7}
.feedback-lead{
margin:0;font-size:.875rem;line-height:1.5}
.feedback-mark .seam-eye{
animation:seam-pill-idle 5.2s ease-in-out infinite}
.feedback-mark .seam-eye:nth-child(2){
animation-delay:.08s}
@keyframes seam-pill-idle{
0%,42%,48%,100%{
transform:scaleY(1)}
45%{
transform:scaleY(.12)}
}
.feedback-mark .seam-mouth-line{
animation:seam-mouth-line 8.6s ease-in-out infinite}
.feedback-mark .seam-mouth-smile{
animation:seam-mouth-smile 8.6s ease-in-out infinite}
.feedback-mark .seam-mouth-up{
animation:seam-mouth-up 8.6s ease-in-out infinite}
@keyframes seam-mouth-line{
0%,14%{
opacity:1}
22%,74%{
opacity:0}
82%,100%{
opacity:1}
}
@keyframes seam-mouth-smile{
0%,16%{
opacity:0}
24%,42%{
opacity:1}
50%,100%{
opacity:0}
}
@keyframes seam-mouth-up{
0%,52%{
opacity:0}
60%,76%{
opacity:1}
84%,100%{
opacity:0}
}
.feedback-mark .seam-face{
animation:seam-glance 6.4s ease-in-out infinite}
@keyframes seam-glance{
0%,100%{
transform:translate(0,0)}
35%{
transform:translate(2px,1px)}
70%{
transform:translate(-2px,-1px)}
}
.feedback-form .auth-field{
margin-bottom:12px}
.feedback-form .auth-field span{
letter-spacing:.03em;color:#8e8e8e}
.feedback-form .auth-field input,.feedback-form .auth-field textarea{
border-radius:14px;background:#14171d;color:#f3f4f7;border:1px solid rgba(243,244,247,.1)}
.feedback-form .auth-field input:focus,.feedback-form .auth-field textarea:focus{
border-color:rgba(163,183,206,.55);box-shadow:0 0 0 3px rgba(163,183,206,.16);background:#1a1e26}
.feedback-status:not(:empty){
margin:2px 0 12px;padding:8px 12px;border-radius:12px;background:rgba(210,210,210,.06)}
.feedback-form .auth-submit{
margin-top:2px}
html[data-theme=light] .feedback-dialog{
background:#fff;border-color:rgba(18,18,20,.08);box-shadow:0 24px 60px rgba(18,18,20,.14)}
html[data-theme=light] .feedback-dialog::before{
background:radial-gradient(ellipse at 24% 0%,rgba(18,18,20,.05),transparent 68%)}
html[data-theme=light] .feedback-dialog h2{
color:#121214}
html[data-theme=light] .feedback-mark{
--dock-bg:#fff;background:#fff;border-color:rgba(18,18,20,.1)}
html[data-theme=light] .feedback-mark.feedback-mark-bot{
background:transparent;border:0;box-shadow:none}
html[data-theme=light] .feedback-form .auth-field span{
color:#6e6e76}
html[data-theme=light] .feedback-form .auth-field input,html[data-theme=light] .feedback-form .auth-field textarea{
background:#f7f7f8;color:#121214;border-color:rgba(18,18,20,.12)}
html[data-theme=light] .feedback-form .auth-field input:focus,html[data-theme=light] .feedback-form .auth-field textarea:focus{
background:#fff;border-color:rgba(18,18,20,.28);box-shadow:0 0 0 3px rgba(18,18,20,.06)}
html[data-theme=light] .feedback-status:not(:empty){
background:rgba(18,18,20,.04)}
@media (max-width:760px){
.seam-dock{
right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));gap:8px}
.seam-dock-btn,.feedback-mark{
width:44px;height:44px}
.seam-dock-btn.seam-dock-bot,.seam-dock-eye.seam-dock-bot{
width:54px;height:54px}
.feedback-mark.feedback-mark-bot{
width:48px;height:48px}
.seam-bot-cat{
width:48px;height:48px}
.feedback-mark.feedback-mark-bot .seam-bot-cat{
width:40px;height:40px}
.feedback-mark.feedback-mark-bot .seam-bot-cat-canvas{
width:60px;height:60px}
.seam-dock-eye,.feedback-mark{
padding:0}
.seam-face{
width:18px;height:16px;gap:4.5px;padding-top:1px}
.seam-eye{
width:4px;height:6px}
.seam-mouth{
width:10px;height:6px;margin-left:-5px;top:10px}
.feedback-dialog{
padding:18px 16px 16px;border-radius:22px}
.feedback-head{
gap:12px;margin-right:32px}
}
@media (prefers-reduced-motion:reduce){
.seam-dock-eye.is-blink .seam-eye,.feedback-mark .seam-eye,.feedback-mark .seam-face,.feedback-mark .seam-mouth-line,.feedback-mark .seam-mouth-smile,.feedback-mark .seam-mouth-up{
animation:none}
}
@media print{
.seam-dock{
display:none}
}
.feedback-resource[hidden]{
display:none !important}
.pricing-credits{
max-width:1360px;margin:0 auto}
.pricing-credits .pricing-section-head{
padding:8px var(--page-gutter) 0}
.pricing-credits .pricing-lead{
max-width:46rem;margin:8px 0 0}
.pricing-credits .pricing-grid--credits{
gap:12px;padding-top:12px;padding-bottom:48px;}
.pricing-credits .price-card--credit{
border-radius:18px;padding:16px 14px 14px;gap:12px;}
.pricing-credits .price-card--credit .price-card-top{
gap:4px}
.pricing-credits .price-card--credit h3{
margin:0;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;}
.pricing-credits .price-card--credit .desc{
margin:0;font-size:12px;line-height:1.45;color:var(--muted-foreground);}
.pricing-credits .price-card--credit .price-card-mid{
gap:2px}
.pricing-credits .price-card--credit .price-amount{
font-size:1.55rem;line-height:1.1;letter-spacing:-.03em;}
.pricing-credits .price-card--credit .price-amount .old{
font-size:.85rem;margin-right:6px;}
.pricing-credits .price-card--credit .price-interval{
font-size:12px;line-height:1.4;}
.pricing-credits .price-card--credit .btn-price{
height:40px;font-size:13px;border-radius:12px;}
.pricing-credits .price-card--credit .price-features{
gap:6px;margin:0;padding:0;}
.pricing-credits .price-card--credit .price-features li{
gap:8px;font-size:12px;line-height:1.4;}
.pricing-credits .price-card--credit .price-features svg{
width:14px;height:14px;flex:0 0 auto;}
.pricing-credits .price-card--credit .badge-popular{
top:0;left:50%;right:auto;transform:translate(-50%,-50%);font-size:10px;padding:3px 8px;}
.pricing-credits .price-card--credit:hover{
transform:translateY(-2px)}
@media (min-width:901px){
.pricing-credits .pricing-grid--credits{
grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:900px) and (min-width:641px){
.pricing-credits .pricing-grid--credits{
grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
.pricing-credits .pricing-grid--credits{
grid-template-columns:1fr 1fr;gap:10px;}
.pricing-credits .price-card--credit{
padding:14px 12px 12px;}
.pricing-credits .price-card--credit .price-features li:nth-child(n+3){
display:none;}
}
.nav-right,.site-nav,.site-header{
overflow:visible}
.lang-menu{
position:relative;min-width:0}
.lang-menu-btn{
display:inline-flex;align-items:center;gap:6px;max-width:min(9.5rem,42vw);height:36px;padding:0 10px 0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--foreground);font:inherit;font-size:13px;line-height:1;cursor:pointer}
.lang-menu-current{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lang-menu-current--short{
display:none}
.lang-menu-btn svg{
flex:none;opacity:.7}
.lang-menu-panel{
position:absolute;top:calc(100% + 8px);right:0;z-index:120;width:min(340px,calc(100vw - 32px));max-height:min(70vh,440px);overflow:auto;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--surface-elevated);box-shadow:0 16px 40px rgba(0,0,0,.28)}
.lang-menu-grid{
display:grid;grid-template-columns:1fr 1fr;gap:4px}
.lang-menu-item{
display:flex;align-items:center;min-height:36px;padding:6px 10px;border-radius:8px;color:var(--foreground);font-size:13px;line-height:1.3;text-decoration:none}
.lang-menu-item:hover{
background:var(--nav-hover-bg,rgba(210,210,210,.06))}
.lang-menu-item.is-current{
background:var(--foreground);color:var(--background);font-weight:600}
html[data-theme=light] .lang-menu-panel{
box-shadow:0 12px 32px rgba(0,0,0,.12)}
html[dir=rtl] .site-nav,html[dir=rtl] .page,html[dir=rtl] .mobile-menu-panel{
direction:rtl}
html[dir=rtl] .lang-menu-panel{
right:auto;left:0}
html[lang=ar] body,body[data-lang=ar]{
font-family:Tahoma,"Noto Naskh Arabic","Segoe UI",sans-serif}
html[lang=th] body,body[data-lang=th]{
font-family:"Noto Sans Thai","Leelawadee UI","Segoe UI",sans-serif}
html[lang=ja] body,body[data-lang=ja]{
font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",sans-serif}
html[lang=ko] body,body[data-lang=ko]{
font-family:"Malgun Gothic","Noto Sans KR","Segoe UI",sans-serif}
html[lang="zh-Hant"] body,body[data-lang="zh-tw"]{
font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Segoe UI",sans-serif}
@media (max-width:720px){
.lang-menu-grid{
grid-template-columns:1fr 1fr}
}
.nav-links a,.nav-links .sub-menu .menu-link,.btn-signup,.btn-signin,.btn-go-unlimited,.btn-home-price,.footer-cta-btn{
height:auto;min-height:36px;white-space:normal;line-height:1.25;text-align:center;}
.hero-cta-row .btn-unlimited,.hero-cta-row .btn-hero-secondary{
box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-height:52px;height:auto;padding:12px 24px;font-size:1rem;font-weight:600;line-height:1.25;white-space:normal;text-align:center;border-radius:14px;width:auto;min-width:min(168px,100%);max-width:100%;}
@media (max-width:1023px){
.hero-cta-row{
width:100%;max-width:320px;margin-inline:auto;flex-direction:column;align-items:stretch;}
.hero-cta-row .btn-unlimited,.hero-cta-row .btn-hero-secondary{
width:100%;min-width:0;max-width:none;}
}
.footer-cta-btn{
min-height:40px;}
.nav-links .nav-menu{
flex-wrap:wrap;justify-content:center;}
html[dir=rtl] .cover-fav{
right:auto;left:10px;}
html[dir=rtl] .seam-dock{
right:auto;left:max(16px,env(safe-area-inset-left));}
html[dir=rtl] .nav-links .sub-menu{
left:auto;right:0;}
html[dir=rtl] .nav-links .sub-menu .sub-menu{
left:auto;right:calc(100% + 6px);}
html[dir=rtl] .nav-submenu-toggle{
margin-left:0;margin-right:-4px;}
html[dir=rtl] .mobile-menu-nav .sub-menu{
padding:0 12px 0 0;}
html[dir=rtl] .mobile-menu-nav a,html[dir=rtl] .mobile-menu-link{
text-align:right;}
html[dir=rtl] .nav-badge{
margin-left:0;margin-right:4px;}
html[dir=rtl] .auth-field .seam-secret input,html[dir=rtl] .account-form .seam-secret input{
padding-right:12px;padding-left:46px;}
html[dir=rtl] .seam-secret-toggle{
right:auto;left:6px;}
html[dir=rtl] .seam-share-channel{
text-align:right;}
html[dir=rtl] .feedback-close{
right:auto;left:14px;}
html[dir=rtl] .feedback-head{
margin:0 0 18px 36px;}
html[dir=rtl] .feedback-dialog h2{
margin-right:0;margin-left:40px;}
html[dir=rtl] .detail-back{
left:auto;right:16px;}
@media (max-width:760px){
html[dir=rtl] .seam-dock{
right:auto;left:max(12px,env(safe-area-inset-left));}
html[dir=rtl] .feedback-head{
margin-right:0;margin-left:32px;}
}
.lang-menu-btn{
box-sizing:border-box;min-width:0}
.lang-menu-current{
min-width:0;flex:1 1 auto;text-align:start}
.lang-menu-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.lang-menu-item{
min-width:0;overflow-wrap:anywhere}
.site-nav .lang-menu{
flex:none;max-width:100%}
.site-nav .lang-menu-btn{
height:36px}
@media (max-width:1023px){
.site-nav .lang-menu{
position:relative;display:inline-flex !important;flex:none;align-items:center;z-index:120;}
.site-nav .lang-switch,.site-nav .theme-toggle{
display:inline-flex !important;--tt-w:52px;--tt-h:30px;width:var(--tt-w);min-width:var(--tt-w);height:var(--tt-h);min-height:var(--tt-h);flex:none;margin:0}
.site-nav .lang-menu-btn{
box-sizing:border-box;height:30px;min-width:52px;max-width:52px;width:52px;padding:0 8px;gap:0;justify-content:center;align-items:center;border-radius:999px;}
.site-nav .lang-menu-btn svg{
display:none}
.site-nav .lang-menu-current--native{
display:none}
.site-nav .lang-menu-current--short{
display:block;flex:none;font-size:11px;font-weight:750;letter-spacing:.02em;line-height:1;text-align:center;}
.site-nav .lang-menu-panel{
z-index:130;width:min(280px,calc(100vw - 24px));max-width:min(280px,calc(100vw - 24px));min-width:0;}
/* Keep theme as the same L/R pill switch on mobile — do not collapse to an icon button. */
.site-nav .theme-toggle{
border:0;background:transparent;color:inherit;padding:0;border-radius:0;}
.site-nav .theme-toggle-track{
inset:0;border:1px solid var(--border);border-radius:999px;background:var(--secondary);box-shadow:inset 0 1px 2px rgba(0,0,0,.12);}
.site-nav .theme-toggle:hover .theme-toggle-track,.site-nav .theme-toggle:focus-visible .theme-toggle-track{
border-color:var(--seam-accent,#d0b2ff);box-shadow:inset 0 1px 2px rgba(0,0,0,.08),0 0 0 3px color-mix(in srgb,var(--seam-accent,#d0b2ff) 22%,transparent);}
.site-nav .theme-toggle:focus-visible{
outline:none}
.site-nav .theme-toggle-thumb,.site-nav .theme-toggle[data-mode=light] .theme-toggle-thumb{
top:2px;left:2px;width:24px;height:24px;transform:translateX(0);background:linear-gradient(145deg,#fff8e8 0%,#ffe08a 100%);color:#c47b00;box-shadow:0 2px 6px rgba(0,0,0,.22);}
.site-nav .theme-toggle[data-mode=dark] .theme-toggle-thumb{
top:2px;left:2px;width:24px;height:24px;transform:translateX(22px);background:linear-gradient(145deg,#2a2a2e 0%,#121214 100%);color:#f5e6a8;box-shadow:0 2px 6px rgba(0,0,0,.22);}
.site-nav .theme-toggle .theme-icon{
width:14px;height:14px;}
}
@media (max-width:380px){
.site-nav .lang-switch,.site-nav .theme-toggle,.site-nav .lang-menu-btn{
--tt-w:48px;--tt-h:28px;width:var(--tt-w);min-width:var(--tt-w);max-width:var(--tt-w);height:var(--tt-h);min-height:var(--tt-h)}
.site-nav .theme-toggle-thumb,.site-nav .theme-toggle[data-mode=light] .theme-toggle-thumb,.site-nav .theme-toggle[data-mode=dark] .theme-toggle-thumb{
width:22px;height:22px}
.site-nav .theme-toggle[data-mode=dark] .theme-toggle-thumb{
transform:translateX(20px)}
.site-nav .icon-btn{
width:36px;height:36px}
}
.tone-panel{
position:relative;margin:0;border:0;padding:0;min-width:0;flex:1 1 auto}
.tone-panel>summary{
list-style:none;cursor:pointer;display:none;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--border);background:var(--secondary);color:var(--foreground);font:inherit;font-size:13px;font-weight:650}
.tone-panel>summary::-webkit-details-marker{
display:none}
.tone-panel .tone-switch{
width:100%}
.filters-bar{
display:flex;flex-direction:column;gap:10px;padding:14px 0 12px;position:relative;z-index:1;}
.filters-toolbar{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px;align-items:center;gap:8px;}
.filter-panel{
margin:0;border:0;padding:0;min-width:0;}
.filter-panel-summary{
list-style:none;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;width:100%;height:36px;min-height:36px;padding:0 12px 0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 12%,transparent);background:color-mix(in srgb,var(--surface-elevated) 92%,transparent);color:var(--foreground);font:inherit;font-size:13px;font-weight:600;line-height:1;user-select:none;}
.filter-panel-summary::-webkit-details-marker{
display:none}
.filter-panel-kicker{
color:var(--muted-foreground);font-size:12px;font-weight:650;letter-spacing:.04em;flex:0 0 auto;}
.filter-panel-current{
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;}
.filter-panel-current .tone-dot{
width:14px;height:14px;border:0;display:inline-block;vertical-align:middle;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 18%,transparent);}
.filter-panel-chevron{
width:14px;height:14px;flex:0 0 auto;opacity:.55;transition:transform .22s cubic-bezier(0.22,1,0.36,1);}
.filter-panel[open]>.filter-panel-summary{
border-color:color-mix(in srgb,var(--foreground) 22%,transparent);background:var(--secondary);}
.filter-panel[open]>.filter-panel-summary .filter-panel-chevron{
transform:rotate(180deg);}
.filters-drawers{
display:block;min-width:0;}
.filters-drawers .filters-scroll,.filters-drawers .tone-switch{
display:none;max-width:none;}
.filters-drawers .filters-scroll{
width:100%}
.filters-drawers .tone-switch{
width:auto}
.filters-bar:has(.filter-panel--cat[open]) .filters-drawers .filters-scroll{
display:flex;flex-wrap:wrap;gap:8px;overflow:visible;padding:2px 0 0;scroll-snap-type:none;}
.filters-bar:has(.filter-panel--tone[open]) .filters-drawers .tone-switch{
display:flex;flex-wrap:wrap;align-items:center;gap:2px;height:auto;min-height:36px;padding:4px;overflow:visible;}
.filter-chip{
flex:0 0 auto;box-sizing:border-box;height:36px;min-height:36px;padding:0 14px;font-size:13px;font-weight:600;line-height:1;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 10%,transparent);background:transparent;color:var(--muted-foreground);cursor:pointer;}
.filter-chip:hover{
color:var(--foreground);background:var(--nav-hover-bg);}
.filter-chip.active{
background:var(--foreground);color:var(--background);border-color:transparent;}
.filter-settings{
box-sizing:border-box;width:36px;height:36px;min-width:36px;border-radius:999px;background:var(--secondary);border:1px solid color-mix(in srgb,var(--foreground) 12%,transparent);display:inline-flex;align-items:center;justify-content:center;color:var(--foreground);flex:0 0 auto;text-decoration:none;margin-left:0;grid-column:3;}
.filter-settings svg{
width:15px;height:15px}
.filters-bar .tone-switch-item{
height:28px;min-height:28px;padding:0 12px;font-size:12px;font-weight:650;letter-spacing:.02em;}
.filters-bar .tone-switch-item.is-swatch{
width:28px;padding:0;}
.filters-bar .tone-switch-item.is-swatch .tone-dot{
width:14px;height:14px;}
html[data-theme=light] .filter-panel-summary{
background:#fff;border-color:rgba(18,18,20,.1);}
html[data-theme=light] .filter-panel[open]>.filter-panel-summary{
background:#f3f3f4;}
html[data-theme=dark] .filter-panel-summary,:root:not([data-theme=light]) .filter-panel-summary{
background:#1a1e26;border-color:rgba(243,244,247,.1);}
html[data-theme=dark] .filter-panel[open]>.filter-panel-summary,:root:not([data-theme=light]) .filter-panel[open]>.filter-panel-summary{
background:#232833;}
@media (max-width:1023px){
.filters-actions{
display:none}
}
.filters-scroll-wrap{
position:relative;min-width:0;}
.filters-scroll-wrap::before,.filters-scroll-wrap::after{
content:"";position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s ease;}
.filters-scroll-wrap::before{
left:0;background:linear-gradient(to right,var(--background),transparent);}
.filters-scroll-wrap::after{
right:0;background:linear-gradient(to left,var(--background),transparent);}
.filters-scroll-wrap.is-overflow-left::before{
opacity:1}
.filters-scroll-wrap.is-overflow-right::after{
opacity:1}
@media (min-width:1024px){
.filters-bar{
flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px;}
.filters-toolbar{
display:flex;order:3;flex:0 0 auto;grid-template-columns:none;width:auto;gap:0;}
.filter-panel{
display:none;}
.filters-drawers{
display:contents;}
.filters-scroll-wrap{
display:block;order:1;flex:1 1 0;width:auto;min-width:0;max-width:100%;}
.filters-drawers .filters-scroll{
display:flex!important;flex:none;width:100%;min-width:0;flex-wrap:nowrap;align-items:center;gap:8px;height:36px;overflow-x:auto;overflow-y:hidden;padding:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;}
.filters-drawers .filters-scroll::-webkit-scrollbar{
display:none}
.filters-drawers .filter-chip{
height:36px;min-height:36px;scroll-snap-align:start;}
.filters-drawers .tone-switch{
display:inline-flex!important;order:2;flex:0 0 auto;flex-wrap:nowrap;align-items:center;width:auto!important;height:36px;min-height:36px;max-width:none;padding:4px;overflow-x:visible;}
.filters-bar .tone-switch-item,.filters-bar .tone-switch-item.is-swatch{
height:28px;min-height:28px;}
.filters-bar .tone-switch-item.is-swatch{
width:28px}
.filter-settings{
grid-column:auto;}
}
@media (max-width:760px){
.filters-bar{
flex-wrap:unset}
.filters-scroll{
flex:unset;width:auto}
.filters-actions{
flex:unset;width:auto}
.tone-switch{
height:auto!important}
.tone-switch-item{
height:28px;min-height:28px}
.tone-switch-item.is-swatch{
width:28px}
}
.search-box{
position:relative}
.search-box-head{
position:relative}
.search-close{
position:absolute;top:50%;right:12px;transform:translateY(-50%);width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);cursor:pointer}
.search-close:hover{
color:var(--foreground);background:color-mix(in srgb,var(--foreground) 8%,transparent)}
.search-box-head input{
padding-right:48px}
button.search-result{
display:flex;width:100%;align-items:center;gap:12px;padding:12px 16px;border:0;border-bottom:1px solid var(--border);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
button.search-result:hover,button.search-result:focus-visible{
background:color-mix(in srgb,var(--foreground) 6%,transparent);outline:none}
.detail-error-actions{
display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.detail-error-actions .btn-unlimited,.detail-error-actions .btn-hero-secondary{
width:auto;min-width:120px}
.auth-context{
margin:0 0 12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--foreground);font-size:.92rem;line-height:1.5}
.auth-context[hidden]{
display:none!important}
.prompt-card:focus-visible{
outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:1023px){
.tone-panel>summary{
display:inline-flex}
.tone-panel:not([open]) .tone-switch{
display:none}
.tone-panel[open]>summary{
margin-bottom:8px}
}
@media(min-width:1024px){
.tone-panel>summary{
display:none!important}
.tone-panel .tone-switch{
display:inline-flex!important}
}
.screen-reader-text{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mobile-menu{
z-index:120;}
.mobile-menu-panel{
--mm-gutter:20px;--mm-stack:12px;--mm-radius:14px;--mm-ctrl:48px;--mm-ink:color-mix(in srgb,var(--foreground) 8%,transparent);width:min(100%,360px);max-width:100%;background:var(--surface-elevated);overflow:hidden;}
.mobile-menu-header{
display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;min-height:64px;padding:18px 20px 18px;border-bottom:1px solid var(--mm-ink);}
.mobile-menu-brand{
display:inline-flex;align-items:center;gap:12px;min-width:0;max-width:calc(100% - 56px);color:var(--foreground);text-decoration:none;line-height:1;}
.mobile-menu-brand .seam-logo,.mobile-menu-brand .seam-logo--lockup,.mobile-menu-brand .seam-logo--image{
display:inline-flex;align-items:center;gap:10px;min-width:0;}
.mobile-menu-brand .seam-logo-mark-wrap,.mobile-menu-brand .seam-logo--lockup .seam-logo-mark-wrap,.mobile-menu-brand .seam-logo-mark,.mobile-menu-brand .seam-logo--lockup .seam-logo-mark{
width:28px;height:28px;flex:0 0 28px;object-fit:contain;}
.mobile-menu-brand img:not(.seam-logo-mark),.mobile-menu-brand .seam-logo--image .seam-logo-mark{
width:auto;height:28px;max-width:148px;flex:0 0 auto;object-fit:contain;}
.mobile-menu-brand .seam-logo-word,.mobile-menu-brand .seam-logo--lockup .seam-logo-word{
display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;letter-spacing:.01em;line-height:1.15;color:var(--foreground);}
.mobile-menu-brand .seam-logo--en .seam-logo-word{
font-size:15px;letter-spacing:-.01em}
.mobile-menu-brand .seam-logo-ai{
margin-left:3px}
.mobile-menu-close{
box-sizing:border-box;width:40px;height:40px;margin:0;padding:0;border:1px solid transparent;border-radius:12px;flex:none;color:var(--foreground);background:transparent;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{
background:color-mix(in srgb,var(--foreground) 6%,transparent);border-color:var(--mm-ink);outline:none;}
.mobile-menu-close svg{
width:18px;height:18px}
.mobile-menu-body{
flex:1;min-height:0;padding:12px 20px 16px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.mobile-menu-label{
margin:8px 2px 12px;padding:0;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--muted-foreground);}
.mobile-menu-nav{
display:flex;flex-direction:column;gap:6px;}
.mobile-menu-nav .nav-menu,.mobile-menu-nav .sub-menu{
display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;}
.mobile-menu-link,.mobile-menu-nav .menu-link{
box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--mm-ctrl);margin:0;padding:0 16px;border:0;border-radius:var(--mm-radius);background:transparent;color:var(--foreground);font-size:16px;font-weight:600;line-height:1.25;text-align:start;text-decoration:none;transition:background .18s ease,color .18s ease;}
.mobile-menu-nav .menu-link{
color:var(--foreground)}
.mobile-menu-nav .sub-menu{
gap:2px;margin:0 0 4px 8px;padding:0 0 0 12px;border-left:2px solid var(--mm-ink);}
.mobile-menu-nav .sub-menu .menu-link{
min-height:44px;padding:0 14px;font-size:15px;font-weight:550;color:var(--muted-foreground);}
.mobile-menu-nav .sub-menu .sub-menu{
margin-left:6px;padding-left:10px;}
.mobile-menu-nav .sub-menu .sub-menu .menu-link{
min-height:40px;font-size:14px;font-weight:500;}
.mobile-menu-nav .menu-link:hover,.mobile-menu-nav .menu-link:focus-visible,.mobile-menu-link:hover,.mobile-menu-link:focus-visible{
background:color-mix(in srgb,var(--foreground) 5%,transparent);outline:none;}
.mobile-menu-footer{
display:flex;flex-direction:column;gap:16px;flex-shrink:0;margin:0;padding:20px 20px 28px;border-top:1px solid var(--mm-ink);background:color-mix(in srgb,var(--surface-elevated) 96%,var(--background));}
.mobile-menu-cta,.mobile-auth-btn,.mobile-menu-auth>a,.mobile-menu-auth .btn-signin,.mobile-menu-auth .btn-signup,.mobile-menu-auth button{
box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;height:var(--mm-ctrl);min-height:var(--mm-ctrl);margin:0;padding:0 16px;border-radius:var(--mm-radius);border:1px solid transparent;font-size:14px;font-weight:650;letter-spacing:.01em;line-height:1;text-align:center;text-decoration:none;cursor:pointer;appearance:none;-webkit-appearance:none;box-shadow:none;filter:none;background-image:none;transition:background-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1);}
.mobile-menu-cta{
font-size:15px;font-weight:700;color:#f8f9fb;background:#17191f;border-color:#17191f;-webkit-text-fill-color:#f8f9fb;}
.mobile-menu-cta:hover,.mobile-menu-cta:focus-visible{
background:#2a2d36;border-color:#2a2d36;color:#f8f9fb;-webkit-text-fill-color:#f8f9fb;transform:translateY(-1px);outline:none;}
.mobile-menu-cta:active{
transform:scale(.985)}
.mobile-menu-auth{
display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:0;padding-top:0;}
.mobile-menu-auth:has(>:only-child){
grid-template-columns:1fr}
.mobile-auth-btn--ghost,.mobile-menu-auth>a.mobile-auth-btn--ghost,.mobile-menu-auth button.mobile-auth-btn--ghost{
color:var(--foreground);background:transparent;border-color:color-mix(in srgb,var(--foreground) 14%,transparent);-webkit-text-fill-color:var(--foreground);}
.mobile-auth-btn--ghost:hover,.mobile-auth-btn--ghost:focus-visible,.mobile-menu-auth>a.mobile-auth-btn--ghost:hover,.mobile-menu-auth button.mobile-auth-btn--ghost:hover{
background:color-mix(in srgb,var(--foreground) 5%,transparent);border-color:color-mix(in srgb,var(--foreground) 22%,transparent);transform:translateY(-1px);outline:none;}
.mobile-auth-btn--solid,.mobile-menu-auth>a.mobile-auth-btn--solid,.mobile-menu-auth button.mobile-auth-btn--solid{
color:#f8f9fb;background:#17191f;border-color:#17191f;-webkit-text-fill-color:#f8f9fb;}
.mobile-auth-btn--solid:hover,.mobile-auth-btn--solid:focus-visible,.mobile-menu-auth>a.mobile-auth-btn--solid:hover,.mobile-menu-auth button.mobile-auth-btn--solid:hover{
background:#2a2d36;border-color:#2a2d36;color:#f8f9fb;-webkit-text-fill-color:#f8f9fb;transform:translateY(-1px);filter:none;outline:none;}
.mobile-auth-btn--ghost:active,.mobile-auth-btn--solid:active{
transform:scale(.985)}
html[data-theme=dark] .mobile-menu-cta,html[data-theme=dark] .mobile-auth-btn--solid,html[data-theme=dark] .mobile-menu-auth>a.mobile-auth-btn--solid,html[data-theme=dark] .mobile-menu-auth button.mobile-auth-btn--solid{
color:#13151a;background:#e6e8ed;border-color:#e6e8ed;-webkit-text-fill-color:#13151a;}
html[data-theme=dark] .mobile-menu-cta:hover,html[data-theme=dark] .mobile-menu-cta:focus-visible,html[data-theme=dark] .mobile-auth-btn--solid:hover,html[data-theme=dark] .mobile-auth-btn--solid:focus-visible,html[data-theme=dark] .mobile-menu-auth>a.mobile-auth-btn--solid:hover,html[data-theme=dark] .mobile-menu-auth button.mobile-auth-btn--solid:hover{
color:#13151a;background:#f3f4f7;border-color:#f3f4f7;-webkit-text-fill-color:#13151a;filter:none;box-shadow:none;}
html[data-theme=dark] .mobile-auth-btn--ghost,html[data-theme=dark] .mobile-menu-auth>a.mobile-auth-btn--ghost,html[data-theme=dark] .mobile-menu-auth button.mobile-auth-btn--ghost{
border-color:rgba(243,244,247,.16);}
html[data-theme=dark] .mobile-auth-btn--ghost:hover,html[data-theme=dark] .mobile-auth-btn--ghost:focus-visible{
background:rgba(243,244,247,.06);border-color:rgba(243,244,247,.28);}
html[data-theme=light] .mobile-menu-header,html[data-theme=light] .mobile-menu-footer{
border-color:rgba(18,18,20,.08)}
html[data-theme=light] .mobile-menu-cta:hover,html[data-theme=light] .mobile-auth-btn--solid:hover{
box-shadow:0 8px 20px rgba(18,18,20,.12);}
.mobile-menu-nav .seam-account-parent .sub-menu,.mobile-menu-nav .seam-account-parent .nav-submenu-toggle,.mobile-menu-nav .seam-account-child{
display:none !important}
html[dir=rtl] .mobile-menu-nav .sub-menu{
margin:0 8px 4px 0;padding:0 12px 0 0;border-left:0;border-right:2px solid var(--mm-ink);}
@media (max-width:360px){
.mobile-menu-panel{
--mm-gutter:16px;--mm-stack:10px;width:100%;}
.mobile-menu-brand .seam-logo-word,.mobile-menu-brand .seam-logo--lockup .seam-logo-word{
font-size:15px}
.mobile-menu-link,.mobile-menu-nav .menu-link{
font-size:15px;padding:0 14px}
.mobile-menu-cta,.mobile-auth-btn,.mobile-menu-auth>a,.mobile-menu-auth button{
font-size:13px;padding:0 10px}
}
.detail-loading{
display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:18px;padding:8px 0 48px;min-height:0;animation:detail-load-in .42s cubic-bezier(0.22,1,0.36,1) both;}
.detail-loading--error{
min-height:42vh;justify-content:center;align-items:center;text-align:center;gap:16px;}

.detail-loading-card{
width:100%;display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:stretch;border-radius:24px;overflow:hidden;background:var(--card);border:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);box-shadow:0 18px 48px rgba(0,0,0,.18);}
.detail-loading-media{
position:relative;min-width:0;min-height:260px;aspect-ratio:16/9;max-height:min(720px,78vh);background:color-mix(in srgb,var(--foreground) 6%,var(--background));overflow:hidden;}
.detail-loading-shimmer{
position:absolute;inset:0;background:linear-gradient( 110deg,transparent 18%,color-mix(in srgb,var(--foreground) 10%,transparent) 42%,transparent 64% );background-size:220% 100%;animation:detail-shimmer 1.55s ease-in-out infinite;}
.detail-loading-scan{
position:absolute;left:-12%;top:0;width:28%;height:100%;background:linear-gradient( 90deg,transparent,color-mix(in srgb,#fff 18%,transparent),transparent );filter:blur(8px);animation:detail-scan 1.7s cubic-bezier(0.4,0,0.2,1) infinite;pointer-events:none;}
.detail-loading-mark{
position:absolute;left:50%;top:50%;display:flex;gap:7px;transform:translate(-50%,-50%);z-index:1;}
.detail-loading-mark i{
display:block;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--foreground) 55%,transparent);animation:detail-dot 1.05s ease-in-out infinite;}
.detail-loading-mark i:nth-child(2){
animation-delay:.14s}
.detail-loading-mark i:nth-child(3){
animation-delay:.28s}
.detail-loading-side{
display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-left:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);background:var(--card);}
.detail-loading-block{
border-radius:10px;background:color-mix(in srgb,var(--foreground) 8%,transparent);position:relative;overflow:hidden;animation:detail-block-in .5s cubic-bezier(0.22,1,0.36,1) both;}
.detail-loading-block::after{
content:"";position:absolute;inset:0;background:linear-gradient( 100deg,transparent 20%,color-mix(in srgb,var(--foreground) 12%,transparent) 48%,transparent 72% );background-size:220% 100%;animation:detail-shimmer 1.55s ease-in-out infinite;}
.detail-loading-block--title{
height:22px;width:78%;animation-delay:.04s}
.detail-loading-block--meta{
height:14px;width:42%;animation-delay:.08s}
.detail-loading-block--pill{
height:28px;width:52%;border-radius:999px;margin-top:4px;animation-delay:.12s}
.detail-loading-block--cta{
height:44px;width:100%;border-radius:14px;margin-top:8px;animation-delay:.16s}
.detail-loading-block--tool{
height:40px;width:100%;border-radius:12px;animation-delay:.2s}
.detail-loading-block--tool + .detail-loading-block--tool{
animation-delay:.24s}
.detail-loading-block--ghost{
height:36px;width:68%;margin-top:auto;border-radius:12px;opacity:.7;animation-delay:.28s}
.detail-loading-foot{
display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px;}
.detail-loading-bar{
display:block;width:min(180px,42vw);height:2px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 10%,transparent);overflow:hidden;}
.detail-loading-bar i{
display:block;width:42%;height:100%;border-radius:inherit;background:var(--foreground);animation:detail-bar 1.15s cubic-bezier(0.45,0,0.2,1) infinite;}
.detail-loading-text{
margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted-foreground);animation:detail-text-fade 1.6s ease-in-out infinite;}
.detail-overlay.is-ready .detail-panel-wrap{
animation:detail-ready-in .48s cubic-bezier(0.22,1,0.36,1) both;}
@keyframes detail-load-in{
from{
opacity:0;transform:translateY(12px) scale(.985);filter:blur(4px)}
to{
opacity:1;transform:none;filter:none}
}
@keyframes detail-ready-in{
from{
opacity:0;transform:translateY(10px)}
to{
opacity:1;transform:none}
}
@keyframes detail-shimmer{
0%{
background-position:120% 0}
100%{
background-position:-120% 0}
}
@keyframes detail-scan{
0%{
transform:translateX(0);opacity:0}
18%{
opacity:.9}
55%{
opacity:.55}
100%{
transform:translateX(420%);opacity:0}
}
@keyframes detail-dot{
0%,80%,100%{
transform:translateY(0);opacity:.35}
40%{
transform:translateY(-5px);opacity:1}
}
@keyframes detail-block-in{
from{
opacity:0;transform:translateY(8px)}
to{
opacity:1;transform:none}
}
@keyframes detail-bar{
0%{
transform:translateX(-120%)}
100%{
transform:translateX(280%)}
}
@keyframes detail-text-fade{
0%,100%{
opacity:.45}
50%{
opacity:1}
}
html[data-theme=light] .detail-loading-card{
box-shadow:0 16px 40px rgba(18,18,20,.08);}
html[data-theme=light] .detail-loading-media{
background:#ececf1;}
html[data-theme=light] .detail-loading-scan{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);}
html[data-theme=dark] .detail-loading-media,:root:not([data-theme=light]) .detail-loading-media{
background:#1a1e26;}
@media (max-width:900px){
.detail-loading-card{
grid-template-columns:1fr}
.detail-loading-side{
border-left:0;border-top:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);padding:18px 16px 20px;}
.detail-loading-media{
min-height:200px;max-height:none}
.detail-loading-block--ghost{
display:none}
}
@media (prefers-reduced-motion:reduce){
.detail-loading,.detail-loading-shimmer,.detail-loading-scan,.detail-loading-mark i,.detail-loading-block,.detail-loading-block::after,.detail-loading-bar i,.detail-loading-text,.detail-overlay.is-ready .detail-panel-wrap{
animation:none!important;}
.detail-loading{
opacity:1;transform:none;filter:none}
}
:root{
--seam-skel-base:color-mix(in srgb,var(--foreground) 8%,transparent);--seam-skel-shine:color-mix(in srgb,var(--foreground) 14%,transparent);}
html[data-theme=light]{
--seam-skel-base:rgba(18,18,20,.07);--seam-skel-shine:rgba(18,18,20,.14);}
.seam-skel{
display:block;height:12px;width:100%;border-radius:10px;background:var(--seam-skel-base);position:relative;overflow:hidden;}
.seam-skel::after{
content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 18%,var(--seam-skel-shine) 48%,transparent 72%);background-size:220% 100%;animation:detail-shimmer 1.55s ease-in-out infinite;}
.seam-skel--title{
height:16px;width:72%;border-radius:10px}
.seam-skel--meta{
height:10px;width:40%;margin-top:8px}
.seam-skel--short{
width:55%}
.seam-skel-shimmer,.seam-skel-scan{
position:absolute;pointer-events:none;z-index:1;}
.seam-skel-shimmer{
inset:0;background:linear-gradient(110deg,transparent 18%,var(--seam-skel-shine) 42%,transparent 64%);background-size:220% 100%;animation:detail-shimmer 1.55s ease-in-out infinite;}
.seam-skel-scan{
left:-12%;top:0;width:28%;height:100%;background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 16%,transparent),transparent);filter:blur(8px);animation:detail-scan 1.7s cubic-bezier(0.4,0,0.2,1) infinite;}
html[data-theme=light] .seam-skel-scan{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);}
.skeleton-card{
pointer-events:none;animation:detail-block-in .48s cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--skel-i,0) * 45ms);}
.skeleton-card .seam-media.is-skeleton{
position:relative;overflow:hidden;background:color-mix(in srgb,var(--foreground) 6%,var(--background));border-radius:20px;}
.skeleton-card .seam-media.is-skeleton::before{
display:none}
.skeleton-line{
background:var(--seam-skel-base)!important;position:relative;overflow:hidden;animation:none!important;}
.skeleton-line::after{
content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 18%,var(--seam-skel-shine) 48%,transparent 72%);background-size:220% 100%;animation:detail-shimmer 1.55s ease-in-out infinite;}
.seam-media.is-skeleton::before{
background:linear-gradient(100deg,transparent 18%,var(--seam-skel-shine) 48%,transparent 72%)!important;background-size:220% 100%!important;animation:detail-shimmer 1.55s ease-in-out infinite!important;}
.is-skeleton-grid .skeleton-card .prompt-meta,.is-skeleton-grid .skeleton-card .blog-card-body{
padding-top:2px;}
.prompt-grid.is-skeleton-grid{
min-height:280px;}
.search-skel-list{
display:flex;flex-direction:column;padding:4px 0}
.search-skel{
display:flex;align-items:center;gap:12px;padding:12px 16px;animation:detail-block-in .4s cubic-bezier(0.22,1,0.36,1) both;animation-delay:calc(var(--skel-i,0) * 50ms);}
.search-skel-thumb{
width:48px;height:32px;border-radius:8px;flex:0 0 auto;}
.search-skel-copy{
flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;}
.search-skel-copy .seam-skel--title{
margin:0;width:68%;height:12px}
.search-skel-copy .seam-skel--meta{
margin:0;width:38%;height:9px}
.search-result--empty{
opacity:.65;cursor:default;pointer-events:none;}
.seam-loading-foot,.detail-loading-foot{
display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 2px;}
.seam-loading-bar,.detail-loading-bar{
display:block;width:min(180px,42vw);height:2px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 10%,transparent);overflow:hidden;}
.seam-loading-bar i,.detail-loading-bar i{
display:block;width:42%;height:100%;border-radius:inherit;background:var(--foreground);animation:detail-bar 1.15s cubic-bezier(0.45,0,0.2,1) infinite;}
.seam-loading-text,.detail-loading-text{
margin:0;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted-foreground);animation:detail-text-fade 1.6s ease-in-out infinite;}
.home-feed-status.is-busy{
display:flex;justify-content:center;width:100%;color:inherit;}
.home-feed-status.is-busy .seam-loading-foot{
padding-top:8px}


.cover-loading i:nth-child(2){
animation-delay:.14s!important}
.cover-loading i:nth-child(3){
animation-delay:.28s!important}
html[data-theme=light] .skeleton-card .seam-media.is-skeleton{
background:#ececf1;}
html[data-theme=dark] .skeleton-card .seam-media.is-skeleton,:root:not([data-theme=light]) .skeleton-card .seam-media.is-skeleton{
background:#1a1e26;}
@media (prefers-reduced-motion:reduce){
.skeleton-card,.seam-skel::after,.seam-skel-shimmer,.seam-skel-scan,.skeleton-line::after,.seam-media.is-skeleton::before,.search-skel,.cover-loading i,.seam-loading-bar i,.seam-loading-text{
animation:none!important;}
}
.nav-links .nav-badge,.mobile-menu-nav .nav-badge{
top:-5px;margin-left:3px;align-self:flex-start;}
.nav-links .nav-badge-text,.mobile-menu-nav .nav-badge-text{
padding:1px 4px;font-size:7px;letter-spacing:.04em;}
.nav-badge-border{
padding:1px}
.nav-links a.has-badge{
overflow:visible;}
.nav-links a.has-badge::after{
content:none!important;display:none!important;}
.nav-links a.has-badge .nav-label{
position:relative;display:inline-block;}
.nav-links a.has-badge .nav-label::after{
content:"";display:block;position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:999px;background:var(--nav-underline);opacity:1;pointer-events:none;transform:scaleX(0);transform-origin:center;transition:transform .32s var(--ease-out,cubic-bezier(.22,1,.36,1));}
.nav-links a.has-badge.is-active .nav-label::after,.nav-links a.has-badge:hover .nav-label::after,.nav-links a.has-badge:focus-visible .nav-label::after{
transform:scaleX(1);}
.site-nav.is-scrolled .nav-links a.has-badge .nav-label::after{
content:"";display:block;position:absolute;left:0;right:0;bottom:-5px;height:1.5px;border-radius:999px;background:var(--nav-underline);opacity:1;pointer-events:none;transform:scaleX(0);transform-origin:center;transition:transform .32s var(--ease-out,cubic-bezier(.22,1,.36,1));}
.nav-links a.has-badge.is-active .nav-label::after,.nav-links a.has-badge:hover .nav-label::after,.nav-links a.has-badge:focus-visible .nav-label::after{
transform:scaleX(1);}
.nav-links .nav-badge,.mobile-menu-nav .nav-badge{
position:relative;z-index:2;pointer-events:none;}
.pricing-title-line{
display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .15em;white-space:normal;}
@media (min-width:721px){
.pricing-title-line{
flex-wrap:nowrap;white-space:nowrap;}
}
.blog-aside,.blog-aside:not(.reveal){
animation:none !important;transform:none !important;}
.blog-aside{
position:sticky;top:calc(var(--site-nav-h,72px) + 16px);align-self:start;width:100%;min-width:0;z-index:2;}
body.admin-bar .blog-aside{
top:calc(var(--site-nav-h,72px) + 16px + 32px);}
@media screen and (max-width:782px){
body.admin-bar .blog-aside{
top:calc(var(--site-nav-h,72px) + 16px + 46px)}
}
.article-shell{
width:100%;min-width:0;}
@media (min-width:961px){
.article-shell:has(.article-aside){
grid-template-columns:minmax(0,1fr) clamp(260px,24vw,320px);gap:clamp(28px,3.5vw,48px);max-width:min(1440px,100%);align-items:start;}
.article-shell:has(.article-aside) .article-page{
max-width:none;min-width:0;}
}
.article-aside{
order:2;padding-top:40px;}
.blog-layout,.resource-layout{
align-items:start;}
.seam-sidebar{
display:flex;flex-direction:column;gap:14px;width:100%;}
.seam-sidebar>.seam-widget{
margin:0;padding:16px 16px 14px;border-radius:18px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 88%,var(--background));box-shadow:0 1px 0 color-mix(in srgb,var(--foreground) 5%,transparent);}
.seam-sidebar>.seam-widget:has(.seam-promo),.seam-sidebar>.seam-widget:has(.seam-member-cta){
padding:0;border:0;background:transparent;box-shadow:none;}
.seam-sidebar .seam-widget-title,.seam-sidebar .blog-aside h2,.blog-aside .seam-widget-title{
display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground);}
.seam-sidebar .seam-widget-title::before{
content:"";width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent);flex-shrink:0;}
.seam-w-list{
display:flex;flex-direction:column;gap:4px}
.seam-w-row{
display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:8px;margin:0 -4px;border-radius:14px;border:1px solid transparent;color:inherit;text-decoration:none;transition:background .22s ease,border-color .22s ease,transform .22s ease;}
.seam-w-row:hover{
background:var(--nav-hover-bg);border-color:color-mix(in srgb,var(--border) 75%,transparent);transform:translateX(2px);color:var(--foreground);}
.seam-w-thumb{
width:48px;height:48px;border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--muted) 65%,var(--border));border:1px solid var(--border);}
.seam-w-thumb.is-empty{
background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 18%,transparent),transparent 60%),color-mix(in srgb,var(--muted) 70%,var(--border));}
.seam-w-thumb img{
width:100%;height:100%;object-fit:cover;display:block;}
.seam-w-title{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:650;line-height:1.35;color:var(--foreground);}
.seam-w-meta{
display:block;margin-top:3px;font-size:11px;color:var(--muted-foreground);}
.seam-w-empty{
margin:0;font-size:13px;color:var(--muted-foreground);}
.blog-aside .blog-cat-btn,.seam-w-cats .blog-cat-btn{
color:color-mix(in srgb,var(--foreground) 78%,transparent);background:transparent;border:1px solid transparent;}
.blog-aside .blog-cat-btn .num,.seam-w-cats .blog-cat-btn .num{
color:var(--muted-foreground);}
.blog-aside .blog-cat-btn:hover,.seam-w-cats .blog-cat-btn:hover{
color:var(--foreground);background:var(--nav-hover-bg);}
.blog-aside .blog-cat-btn.active,.seam-w-cats .blog-cat-btn.active{
color:var(--foreground);border-color:color-mix(in srgb,var(--primary) 34%,var(--border));background:color-mix(in srgb,var(--primary) 12%,transparent);box-shadow:none;}
.seam-promo,.seam-member-cta{
position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:18px;border:1px solid var(--border);isolation:isolate;}
.seam-promo{
background:linear-gradient(155deg,color-mix(in srgb,var(--primary) 16%,transparent) 0%,transparent 46%),color-mix(in srgb,var(--card) 92%,var(--background));box-shadow:none;}
.seam-member-cta{
background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 18%,transparent) 0%,color-mix(in srgb,#e8400d 8%,transparent) 48%,transparent 72%),color-mix(in srgb,var(--card) 92%,var(--background));box-shadow:none;}
.seam-promo-title,.seam-member-cta-title{
position:relative;z-index:1;color:var(--foreground);}
.seam-promo-text,.seam-member-cta-text{
position:relative;z-index:1;color:var(--muted-foreground);}
.seam-promo-link{
position:relative;z-index:1;color:var(--foreground);border-bottom-color:color-mix(in srgb,var(--foreground) 35%,transparent);}
.seam-promo-link:hover{
color:var(--foreground);border-bottom-color:var(--foreground);}
.seam-member-cta-btn{
position:relative;z-index:1;background:var(--foreground);color:var(--background);box-shadow:none;}
.seam-member-cta-btn:hover{
background:color-mix(in srgb,var(--foreground) 88%,var(--background));color:var(--background);box-shadow:0 8px 20px color-mix(in srgb,var(--foreground) 18%,transparent);transform:translateY(-1px);}
html[data-theme=dark] .seam-member-cta-btn,:root:not([data-theme=light]) .seam-member-cta-btn{
background:#e6e8ed;color:#13151a;}
html[data-theme=dark] .seam-member-cta-btn:hover,:root:not([data-theme=light]) .seam-member-cta-btn:hover{
background:#f4f5f8;color:#13151a;box-shadow:none;filter:none;}
.seam-member-cta-btn:focus-visible{
outline:2px solid var(--primary);outline-offset:2px;}
@media (max-width:960px){
.article-shell:has(.article-aside),.blog-layout,.resource-layout,.page-shell,.page-shell:has(.page-aside){
grid-template-columns:minmax(0,1fr);width:100%;max-width:100%;}
.page-main,.article-page,.blog-main,.resource-main{
width:100%;max-width:100%;min-width:0;}
.blog-layout>.blog-aside,.resource-layout>.resource-aside,.article-shell>.article-aside,.page-shell>.page-aside{
display:flex;flex-direction:column;position:static;max-height:none;overflow:visible;order:2;width:100%;padding-top:8px;}
}
.page-shell{
width:100%;min-width:0;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.5vw,48px);align-items:start;padding-top:clamp(40px,6vw,64px);padding-bottom:96px;max-width:var(--content-max);}
@media (min-width:961px){
.page-shell:has(.page-aside){
grid-template-columns:minmax(0,1fr) clamp(260px,24vw,320px);max-width:min(1440px,100%);}
.page-shell:has(.page-aside) .page-main{
max-width:none;}
}
.page-main{
min-width:0;width:100%;max-width:min(760px,100%);}
@media (max-width:960px){
.page-shell,.page-shell:has(.page-aside),.article-shell:has(.article-aside),.blog-layout,.resource-layout,.rankings-shell.article-shell:has(.article-aside){
grid-template-columns:minmax(0,1fr);}
.page-main,.article-page,.blog-main,.resource-main,.rankings-main{
width:100%;max-width:100%;min-width:0;}
}
.page-main>.contact-eyebrow{
margin:0 0 10px;}
.page-main>h1{
font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-0.03em;margin:0 0 24px;line-height:1.15;}
.page-main .article-body{
text-align:left;}
.page-main .article-body h2{
margin:28px 0 12px;font-size:20px;font-weight:800;letter-spacing:-0.02em;}
.page-main .article-body p,.page-main .article-body li{
color:var(--muted-foreground);line-height:1.7;font-size:15px;}
.page-main .article-body p{
margin:0 0 14px}
.page-main .article-body ul{
margin:0 0 16px;padding-left:1.2em}
.page-aside{
order:2;padding-top:8px;}
.contact-aside .seam-sidebar--nested{
margin-top:4px;gap:12px;}
.contact-aside .seam-sidebar--nested .seam-widget{
margin:0;}
.seam-sidebar>.seam-widget.seam-w-skin-card{
background:color-mix(in srgb,var(--card) 88%,var(--background));border:1px solid var(--border);}
.seam-sidebar>.seam-widget.seam-w-skin-soft{
background:color-mix(in srgb,var(--muted) 55%,var(--background));border:1px solid color-mix(in srgb,var(--border) 70%,transparent);box-shadow:none;}
.seam-sidebar>.seam-widget.seam-w-skin-accent{
background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 14%,transparent),transparent 58%),color-mix(in srgb,var(--card) 90%,var(--background));border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 8%,transparent);}
.seam-sidebar>.seam-widget.seam-w-skin-outline{
background:transparent;border:1px dashed color-mix(in srgb,var(--border) 90%,var(--foreground));box-shadow:none;}
.seam-sidebar>.seam-widget.seam-w-skin-flush{
padding:4px 0 8px;background:transparent;border:0;box-shadow:none;border-radius:0;}
.seam-sidebar>.seam-widget:has(.seam-promo),.seam-sidebar>.seam-widget:has(.seam-member-cta),.seam-sidebar>.seam-widget:has(.seam-tip){
padding:0;border:0;background:transparent;box-shadow:none;}
.seam-w-links{
display:flex;flex-direction:column;gap:6px;}
.seam-w-link{
display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid transparent;color:color-mix(in srgb,var(--foreground) 86%,transparent);text-decoration:none;font-size:13.5px;font-weight:600;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease;}
.seam-w-link:hover{
background:var(--nav-hover-bg);border-color:color-mix(in srgb,var(--border) 80%,transparent);color:var(--foreground);transform:translateX(2px);}
.seam-w-link-arrow{
color:var(--muted-foreground);font-size:14px;line-height:1;}
.seam-w-tags{
display:flex;flex-wrap:wrap;gap:8px;}
.seam-w-tag{
display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--foreground);text-decoration:none;font-size:12px;font-weight:600;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
.seam-w-tag:hover{
border-color:color-mix(in srgb,var(--primary) 35%,var(--border));background:color-mix(in srgb,var(--primary) 10%,transparent);transform:translateY(-1px);}
.seam-w-tag .num{
font-size:10px;color:var(--muted-foreground);font-weight:700;}
.seam-w-search{
position:relative;display:flex;align-items:center;}
.seam-w-search input[type=search]{
width:100%;min-height:42px;padding:10px 42px 10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--input-bg,var(--card));color:var(--foreground);font-size:13.5px;outline:none;}
.seam-w-search input[type=search]:focus{
border-color:color-mix(in srgb,var(--primary) 45%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);}
.seam-w-search button{
position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--muted-foreground);cursor:pointer;}
.seam-w-search button:hover{
color:var(--foreground);background:var(--nav-hover-bg);}
.seam-w-search button svg{
width:16px;height:16px;}
.seam-tip{
position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(155deg,color-mix(in srgb,var(--primary) 12%,transparent),transparent 50%),color-mix(in srgb,var(--card) 92%,var(--background));}
.seam-tip-mark{
position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent);}
.seam-tip-title{
display:block;margin:0 28px 8px 0;font-size:14px;font-weight:750;letter-spacing:-0.02em;color:var(--foreground);}
.seam-tip-text{
margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--muted-foreground);}
.seam-tip-link{
display:inline-flex;align-items:center;font-size:13px;font-weight:650;color:var(--foreground);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--foreground) 32%,transparent);padding-bottom:1px;}
.seam-tip-link:hover{
border-bottom-color:var(--foreground);}
.seam-sr{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.seam-w-skin-accent .seam-tip{
border-color:color-mix(in srgb,var(--primary) 32%,var(--border));background:linear-gradient(155deg,color-mix(in srgb,var(--primary) 18%,transparent),transparent 52%),color-mix(in srgb,var(--card) 92%,var(--background));}
.seam-w-skin-soft .seam-tip{
background:color-mix(in srgb,var(--muted) 60%,var(--background));border-color:color-mix(in srgb,var(--border) 80%,transparent);}
.seam-w-skin-outline .seam-tip{
background:transparent;border-style:dashed;}
.seam-w-skin-flush .seam-tip{
border-radius:14px;}
.seam-poster-slot{
margin:0 0 clamp(18px,2.4vw,28px)}
.seam-poster-slot--pricing{
max-width:var(--content-max,1100px);margin-inline:auto;padding-inline:var(--page-gutter,20px)}
.seam-poster-slot--article{
margin:clamp(28px,4vw,44px) 0 0}
.seam-poster{
--poster-ink:var(--foreground);--poster-muted:var(--muted-foreground);--poster-cta-bg:var(--foreground);--poster-cta-fg:var(--background);--poster-glow:color-mix(in srgb,var(--primary) 28%,transparent);position:relative;overflow:hidden;isolation:isolate;display:block;border-radius:calc(var(--radius,1rem) + 4px);border:1px solid var(--border);min-height:148px;color:var(--poster-ink);text-decoration:none;}
.seam-poster--h{
min-height:clamp(168px,22vw,240px)}
.seam-poster--w{
min-height:clamp(140px,18vw,200px)}
.seam-poster--s{
min-height:0;border-radius:18px}
.seam-poster-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(125deg,var(--poster-glow) 0%,transparent 42%),linear-gradient(200deg,color-mix(in srgb,var(--card) 88%,var(--background)) 0%,var(--background) 100%);}
.seam-poster-wash{
position:absolute;inset:-20%;background:radial-gradient(ellipse at 18% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 55%);opacity:.9;}
.seam-poster-orb{
position:absolute;border-radius:50%;filter:blur(28px);opacity:.55;}
.seam-poster-orb-a{
width:42%;height:70%;left:-8%;top:-20%;background:color-mix(in srgb,var(--primary) 35%,transparent)}
.seam-poster-orb-b{
width:36%;height:60%;right:-6%;bottom:-30%;background:color-mix(in srgb,#e8400d 18%,transparent)}
.seam-poster--unlock .seam-poster-orb-b{
background:color-mix(in srgb,var(--primary) 40%,transparent)}
.seam-poster--craft .seam-poster-orb-a{
background:color-mix(in srgb,#2ecf8a 28%,transparent)}
.seam-poster--d3 .seam-poster-orb-a{
background:color-mix(in srgb,#6ec8ff 32%,transparent)}
.seam-poster-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;}
.seam-poster-scrim{
position:absolute;inset:0;background:linear-gradient(105deg,color-mix(in srgb,var(--background) 88%,transparent) 0%,color-mix(in srgb,var(--background) 55%,transparent) 48%,color-mix(in srgb,var(--background) 18%,transparent) 100%);}
.seam-poster-img.is-shared{
opacity:1}
html[data-theme=light] .seam-poster-img--light,:root:not([data-theme=dark]) .seam-poster-img--light{
opacity:1}
html[data-theme=dark] .seam-poster-img--dark,:root:not([data-theme=light]) .seam-poster-img--dark{
opacity:1}
html[data-theme=light] .seam-poster.has-media:has(.seam-poster-img--light) .seam-poster-img--dark{
opacity:0}
html[data-theme=dark] .seam-poster.has-media:has(.seam-poster-img--dark) .seam-poster-img--light{
opacity:0}
html[data-theme=dark] .seam-poster.has-media:not(:has(.seam-poster-img--dark)) .seam-poster-img--light,:root:not([data-theme=light]) .seam-poster.has-media:not(:has(.seam-poster-img--dark)) .seam-poster-img--light{
opacity:1}
html[data-theme=light] .seam-poster.has-media:not(:has(.seam-poster-img--light)) .seam-poster-img--dark,:root:not([data-theme=dark]) .seam-poster.has-media:not(:has(.seam-poster-img--light)) .seam-poster-img--dark{
opacity:1}
html[data-theme=light] .seam-poster-scrim,:root:not([data-theme=dark]) .seam-poster-scrim{
background:linear-gradient(105deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 46%,rgba(255,255,255,.28) 100%);}
html[data-theme=dark] .seam-poster-scrim,:root:not([data-theme=light]) .seam-poster-scrim{
background:linear-gradient(105deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.7) 48%,rgba(18,18,18,.28) 100%);}
.seam-poster-inner{
position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(18px,2.6vw,28px) clamp(18px,3vw,32px);max-width:min(36rem,92%);}
.seam-poster--s .seam-poster-inner{
padding:16px 16px 14px;max-width:none;gap:6px}
.seam-poster-eyebrow{
margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--poster-muted);font-weight:650;}
.seam-poster-title{
margin:0;font-size:clamp(1.15rem,2.2vw,1.65rem);line-height:1.25;font-weight:750;letter-spacing:-.02em;color:var(--poster-ink);}
.seam-poster--s .seam-poster-title{
font-size:1.05rem}
.seam-poster-lead{
margin:0;font-size:clamp(.9rem,1.35vw,1rem);line-height:1.5;color:var(--poster-muted);max-width:34em;}
.seam-poster--s .seam-poster-lead{
font-size:.86rem}
.seam-poster-cta{
margin-top:6px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--poster-cta-bg);color:var(--poster-cta-fg);font-size:.9rem;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.seam-poster--s .seam-poster-cta{
padding:8px 12px;font-size:.82rem;margin-top:4px}
.seam-poster-cta:hover{
transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--foreground) 16%,transparent);color:var(--poster-cta-fg);}
.seam-poster-cta:focus-visible{
outline:2px solid var(--primary);outline-offset:2px}
.seam-poster-cta-arrow{
transition:transform .2s ease}
.seam-poster-cta:hover .seam-poster-cta-arrow{
transform:translateX(3px)}
.seam-sidebar>.seam-widget:has(.seam-poster){
padding:0;background:transparent;border:0;box-shadow:none;}
@media (max-width:720px){
.seam-poster--h,.seam-poster--w{
min-height:0}
.seam-poster-inner{
max-width:100%}
.seam-poster.has-media .seam-poster-scrim{
background:linear-gradient(180deg,color-mix(in srgb,var(--background) 35%,transparent) 0%,color-mix(in srgb,var(--background) 92%,transparent) 58%,var(--background) 100%) !important;}
}
@media (prefers-reduced-motion:reduce){
.seam-poster-cta,.seam-poster-cta-arrow,.seam-poster-img{
transition:none}
}
.detail-actions{
display:flex;flex-direction:column;gap:8px}
.detail-sidebar .detail-share{
margin:0}
.detail-feedback-btn{
margin-top:0}
.detail-rating{
border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--foreground) 3.5%,transparent);padding:10px 12px 12px;min-width:0;max-width:100%;box-sizing:border-box}
.detail-rating-head{
display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0;padding:0 0 8px;border:0;background:transparent;color:var(--foreground);font:inherit;font-size:13px;font-weight:650;line-height:1.2;cursor:pointer}
.detail-rating-head span{
min-width:0}
.detail-rating-head svg{
width:15px;height:15px;flex:0 0 auto;opacity:.72;transition:transform .2s ease}
.detail-rating.is-collapsed .detail-rating-head svg{
transform:rotate(180deg)}
.detail-rating.is-collapsed .detail-rating-body{
display:none}
.detail-rating.is-collapsed .detail-rating-head{
padding-bottom:0}
.detail-rating-body,
.detail-rating-bars,
.detail-rating-summary,
.detail-rating-meta{
min-width:0;max-width:100%;box-sizing:border-box}
.detail-rating-body{
display:flex;flex-direction:column;gap:12px}
.detail-rating-summary{
display:flex;align-items:center;gap:12px}
.detail-rating-avg{
flex:0 0 auto;min-width:1.55em;margin:0;font-size:30px;font-weight:720;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--foreground)}
.detail-rating-meta{
display:flex;flex-direction:column;justify-content:center;gap:4px;flex:1 1 auto}
.detail-rating-stars{
display:flex;align-items:center;gap:1px}
.detail-rating-star{
display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:4px;background:transparent;color:color-mix(in srgb,var(--foreground) 26%,transparent);cursor:pointer;transition:color .15s ease,transform .15s ease}
.detail-rating-star svg{
width:15px;height:15px;fill:currentColor;display:block}
.detail-rating-star.is-on,.detail-rating-star.is-preview{
color:#e0b15a}
.detail-rating-star:hover{
transform:translateY(-1px)}
.detail-rating-star:focus-visible{
outline:2px solid var(--primary);outline-offset:2px}
.detail-rating-note{
display:block;color:var(--muted-foreground);font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-rating-bars{
display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none;width:100%}
.detail-rating-row{
display:grid;grid-template-columns:1.1em minmax(0,1fr);gap:8px;align-items:center;color:var(--muted-foreground);font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.detail-rating-label{
display:block;text-align:center;font-weight:600}
.detail-rating-track{
display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--foreground) 10%,transparent);overflow:hidden}
.detail-rating-fill{
display:block;height:100%;width:0;border-radius:inherit;background:color-mix(in srgb,var(--foreground) 78%,transparent);transition:width .72s cubic-bezier(.16,.84,.32,1)}
.detail-rating.is-live .detail-rating-fill{
width:var(--w,0%)}
.detail-rating-row:nth-child(2) .detail-rating-fill{transition-delay:.05s}
.detail-rating-row:nth-child(3) .detail-rating-fill{transition-delay:.1s}
.detail-rating-row:nth-child(4) .detail-rating-fill{transition-delay:.15s}
.detail-rating-row:nth-child(5) .detail-rating-fill{transition-delay:.2s}
.resource-rating-fallback{
margin:8px 0 0;color:var(--muted-foreground);font-size:14px}
@media (prefers-reduced-motion:reduce){
.detail-rating-fill,.detail-rating-star{transition:none}
.detail-rating-star:hover{transform:none}
}
.detail-sidebar{
min-width:0}
@media (min-width:901px){
.detail-media{
width:100%;max-width:100%;height:auto;aspect-ratio:16/9;max-height:none}
}
.hero h1.hero-title{
display:flex;flex-direction:column;align-items:center;white-space:normal;overflow:visible}
.hero-title-row{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:100%;column-gap:.28em;row-gap:.06em}
.hero-title-row+.hero-title-row{
margin-top:.06em}
.hero h1.hero-title .superpowers{
display:inline-flex}
.hero h1.hero-title .line{
display:inline}
.hero-pill{
position:relative;display:inline-flex;align-items:center;gap:.2em;margin:0;padding:.08em .42em .1em;border-radius:999px;background:var(--pill-bg,#d0f4d8);color:#161616;-webkit-text-fill-color:#161616;line-height:1.15;white-space:nowrap;vertical-align:middle;transition:background-color .35s ease}
.hero-pill::before{
content:"";width:.42em;height:.42em;border-radius:999px;background:var(--pill-dot,#1f9d55);flex:none;transition:background-color .35s ease}
.hero-pill[data-tone="0"]{
--pill-bg:#d0f4d8;--pill-dot:#1f9d55}
.hero-pill[data-tone="1"]{
--pill-bg:#d7e6ff;--pill-dot:#2f6bff}
.hero-pill[data-tone="2"]{
--pill-bg:#eadcfd;--pill-dot:#9849e8}
.hero-pill[data-tone="3"]{
--pill-bg:#c9f6ee;--pill-dot:#0e9f8a}
.hero-pill-view{
display:inline-block;overflow:hidden;width:var(--pill-w,max-content);line-height:1.15;transition:width .34s cubic-bezier(.86,0,.07,1)}
.hero-pill-word{
display:inline-block;font:inherit;letter-spacing:inherit;color:#161616;-webkit-text-fill-color:#161616}
.hero-pill-word.is-out{
opacity:0;transform:translateY(-.35em);transition:opacity .14s ease,transform .14s ease}
.hero-pill-word.is-in{
animation:hero-pill-in .22s cubic-bezier(.16,1,.3,1)}
@keyframes hero-pill-in{
from{
opacity:0;transform:translateY(.4em)}
to{
opacity:1;transform:none}
}
.hero-pill-measure{
position:absolute;inset-inline-start:0;top:0;visibility:hidden;white-space:nowrap;pointer-events:none}
@media (prefers-reduced-motion:reduce){
.hero-pill,.hero-pill::before,.hero-pill-view,.hero-pill-word{
transition:none}
.hero-pill-word.is-in{
animation:none}
}
.hero h1.hero-title{
flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;width:max-content;max-width:100%;margin-inline:auto;white-space:nowrap;font-size:clamp(1.25rem,3.4vw,2.75rem)}
.hero-title-row{
flex-wrap:nowrap;width:max-content;max-width:100%}
.hero-title-row+.hero-title-row{
margin-top:0}
.hero h1.hero-title{
flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;width:max-content;max-width:100%;margin-inline:auto;white-space:normal;row-gap:.06em;font-size:clamp(1.65rem,4vw,2.85rem)}
.hero-title-row{
flex-wrap:nowrap;justify-content:center;width:max-content;max-width:100%}
.hero-title-row+.hero-title-row{
margin-top:.04em}
.seam-face-q{
position:absolute;top:-7px;left:2px;z-index:2;color:var(--seam-face,#e6e6e6);font-size:15px;font-weight:720;line-height:1;letter-spacing:0;pointer-events:none;opacity:0;transform:translateY(5px) scale(.55);transform-origin:80% 100%}
.seam-dock-eye.is-ask .seam-face-q{
opacity:1;transform:translateY(0) scale(1);transition:opacity .2s ease,transform .32s cubic-bezier(.16,1,.3,1)}
html[data-theme=light] .seam-face-q{
color:var(--seam-face,#161616)}
@media (max-width:760px){
.seam-face-q{
top:-6px;left:1px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
.seam-face-q{
display:none}
}
.seam-face-q{
top:-16px;left:-8px;font-size:18px;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.35)}
html[data-theme=light] .seam-face-q{
text-shadow:none}
@media (max-width:760px){
.seam-face-q{
top:-14px;left:-6px;font-size:16px}
}
.seam-face-q{
transition:opacity .2s ease,transform .32s cubic-bezier(.16,1,.3,1)}
.seam-face-q{
top:-10px;right:-5px;left:auto;transform:translate(-4px,6px) scale(.35) rotate(-14deg);transform-origin:10% 120%;transition:opacity .45s ease,transform .45s ease}
.seam-dock-eye.is-ask .seam-face-q{
opacity:1;animation:seam-face-mark .62s cubic-bezier(.16,1,.3,1) both}
@keyframes seam-face-mark{
0%{
opacity:0;transform:translate(-6px,8px) scale(.3) rotate(-16deg)}
58%{
opacity:1;transform:translate(2px,-3px) scale(1.16) rotate(8deg)}
100%{
opacity:1;transform:translate(0,0) scale(1) rotate(0)}
}
@media (max-width:760px){
.seam-face-q{
top:-8px;right:-3px;left:auto}
}
@media (prefers-reduced-motion:reduce){
.seam-face-q{
animation:none}
}
.resource-layout.container-pad,.resource-layout{
max-width:none;width:100%;margin-left:auto;margin-right:auto;margin-bottom:80px;box-sizing:border-box;}
.cat-toolbar{
margin-bottom:18px;gap:12px}
.cat-search{
flex:1 1 auto;width:100%;max-width:340px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--card) 90%,var(--background));border:1px solid color-mix(in srgb,var(--foreground) 10%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--foreground) 4%,transparent);transform:scale(1);transform-origin:left center;transition:max-width .42s cubic-bezier(.22,1,.36,1),transform .36s cubic-bezier(.22,1,.36,1),padding .36s cubic-bezier(.22,1,.36,1),border-color .25s ease,box-shadow .28s ease,background .25s ease;}
.cat-search svg{
width:17px;height:17px;transition:transform .36s cubic-bezier(.22,1,.36,1),color .25s ease;}
.cat-search:focus-within{
max-width:min(520px,100%);padding:12px 16px;transform:scale(1.02);border-color:color-mix(in srgb,var(--primary) 48%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent),0 10px 28px color-mix(in srgb,var(--primary) 10%,transparent);}
.cat-search:focus-within svg{
transform:scale(1.12);color:var(--primary);}
.cat-search input{
color:var(--foreground);font-size:14.5px;transition:font-size .36s cubic-bezier(.22,1,.36,1);}
.cat-search:focus-within input{
font-size:15.5px}
.cat-search input::placeholder{
color:var(--muted-foreground)}
.cat-count{
font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--muted-foreground);}
.cat-cloud{
gap:7px;margin-bottom:18px;padding-bottom:4px}
.cat-chip{
padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 10%,var(--border));background:color-mix(in srgb,var(--card) 88%,var(--background));color:var(--muted-foreground);font-size:12.5px;font-weight:600;box-shadow:none;transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;}
.cat-chip .num{
font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 8%,transparent);color:var(--muted-foreground);}
.cat-chip:hover{
transform:translateY(-1px);color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 20%,var(--border));background:color-mix(in srgb,var(--card) 70%,var(--muted));}
.cat-chip.active{
background:var(--foreground);color:var(--background);border-color:transparent;box-shadow:0 8px 22px color-mix(in srgb,var(--foreground) 16%,transparent);}
.cat-chip.active .num{
background:color-mix(in srgb,var(--background) 18%,transparent);color:var(--background);}
.cat-panels,.resource-layout .cat-panels,.resource-layout:not(:has(.blog-aside)) .cat-panels,.resource-layout:has(.blog-aside) .cat-panels{
display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:10px;margin-bottom:28px;}
.cat-panels:has(>:nth-child(9)){
grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px;margin-bottom:24px;}
.cat-panels:has(>:nth-child(16)){
grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:7px;}
@media (max-width:700px){
.cat-panels,.resource-layout .cat-panels,.resource-layout:not(:has(.blog-aside)) .cat-panels,.resource-layout:has(.blog-aside) .cat-panels{
grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;}
.cat-search{
max-width:none;transform-origin:center center;}
.cat-search:focus-within{
max-width:none;transform:scale(1.015);}
}
@media (max-width:420px){
.cat-panels,.resource-layout .cat-panels{
grid-template-columns:repeat(2,minmax(0,1fr));}
}
.cat-panel{
--cat-tone:#60a5fa;display:flex;flex-direction:column;min-height:0;padding:12px 12px 11px 14px;border-radius:13px;border:1px solid color-mix(in srgb,var(--foreground) 9%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--cat-tone) 10%,transparent) 0%,transparent 42%),color-mix(in srgb,var(--card) 90%,var(--background));box-shadow:none;color:var(--foreground);transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .28s ease,background .28s ease;}
.cat-panel.tone-violet{
--cat-tone:#8b7cf8}
.cat-panel.tone-blue{
--cat-tone:#5b9dff}
.cat-panel.tone-pink{
--cat-tone:#ef7eb4}
.cat-panel.tone-orange{
--cat-tone:#f59a4a}
.cat-panel.tone-mint{
--cat-tone:#3dcaa0}
.cat-panel.tone-gold{
--cat-tone:#e4b23a}
.cat-panel.tone-cyan{
--cat-tone:#2fc0d6}
.cat-panel.tone-green{
--cat-tone:#4cbe6e}
.cat-panel.tone-rose{
--cat-tone:#e86b86}
.cat-panel.tone-indigo{
--cat-tone:#6f85f0}
.cat-panel::before{
inset:auto -22% -55% auto;width:96px;height:96px;opacity:.18;filter:blur(28px);background:var(--cat-tone);}
.cat-panel::after{
content:"";position:absolute;left:0;top:12px;bottom:12px;width:2.5px;border-radius:0 999px 999px 0;background:var(--cat-tone);opacity:.7;pointer-events:none;transition:opacity .22s ease,transform .28s ease;}
.cat-panel:hover{
transform:translateY(-2px);border-color:color-mix(in srgb,var(--cat-tone) 38%,var(--border));box-shadow:0 10px 24px color-mix(in srgb,#000 16%,transparent);}
.cat-panel:hover::before{
opacity:.32;transform:scale(1.1)}
.cat-panel:hover::after{
opacity:1;transform:scaleY(1.05)}
.cat-panel h3{
margin:0 0 4px;font-size:13.5px;font-weight:700;letter-spacing:.01em;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cat-panel p{
margin:0;font-size:11.5px;line-height:1.4;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.cat-panel .panel-count{
margin-top:auto;padding-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:color-mix(in srgb,var(--cat-tone) 55%,var(--muted-foreground));}
.cat-panels:has(>:nth-child(9)) .cat-panel{
padding:10px 10px 10px 12px;border-radius:12px;}
.cat-panels:has(>:nth-child(9)) .cat-panel p{
display:none}
.cat-panels:has(>:nth-child(9)) .cat-panel h3{
font-size:13px;margin-bottom:0;-webkit-line-clamp:2;}
.cat-panels:has(>:nth-child(9)) .cat-panel .panel-count{
padding-top:8px}
.cat-panels:has(>:nth-child(9)) .cat-panel::before{
width:72px;height:72px;opacity:.14;}
.cat-panels:has(>:nth-child(9)) .cat-panel:hover{
transform:translateY(-1px);box-shadow:0 8px 18px color-mix(in srgb,#000 14%,transparent);}
.cat-panels:has(>:nth-child(16)) .cat-panel{
padding:9px 9px 9px 11px;min-height:64px;}
.cat-panels:has(>:nth-child(16)) .cat-panel h3{
font-size:12.5px;-webkit-line-clamp:2;}
.cat-panels:has(>:nth-child(16)) .cat-panel .panel-count{
padding-top:6px;font-size:10px;}
.cat-panels:has(>:nth-child(16)) .cat-panel::after{
top:10px;bottom:10px;width:2px;}
.cat-results-head{
margin-bottom:12px}
.cat-results-head h2{
font-size:17px;font-weight:720;letter-spacing:.01em;}
.cat-results{
padding-bottom:48px}
html[data-theme=light] .cat-search{
background:#fff;border-color:rgba(18,18,20,.1);box-shadow:0 1px 0 rgba(18,18,20,.03);}
html[data-theme=light] .cat-search:focus-within{
box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent),0 10px 26px rgba(26,64,255,.08);}
html[data-theme=light] .cat-chip{
background:#fff;border-color:rgba(18,18,20,.1);color:rgba(18,18,20,.62);}
html[data-theme=light] .cat-chip:hover{
background:rgba(18,18,20,.04);border-color:rgba(18,18,20,.16);color:#121214;}
html[data-theme=light] .cat-chip.active{
background:#121214;color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(18,18,20,.12);}
html[data-theme=light] .cat-chip.active .num{
background:rgba(255,255,255,.18);color:#fff;}
html[data-theme=light] .cat-panel{
background:linear-gradient(145deg,color-mix(in srgb,var(--cat-tone) 12%,transparent) 0%,transparent 46%),#fff;border-color:rgba(18,18,20,.08);box-shadow:0 1px 0 rgba(18,18,20,.03);}
html[data-theme=light] .cat-panel:hover{
border-color:color-mix(in srgb,var(--cat-tone) 42%,rgba(18,18,20,.12));box-shadow:0 10px 24px rgba(18,18,20,.07);}
html[data-theme=light] .cat-panel::before{
opacity:.14}
@media (prefers-reduced-motion:reduce){
.cat-search,.cat-search svg,.cat-search input,.cat-chip,.cat-panel,.cat-panel::before,.cat-panel::after{
transition:none}
.cat-search,.cat-search:focus-within{
transform:none;max-width:100%}
.cat-chip:hover,.cat-panel:hover{
transform:none}
}
.blog-hero.is-poster,.cat-hero.is-poster,.contact-hero.is-poster,.inner-hero.is-poster,.pricing-hero.is-poster{
--poster-ink:var(--foreground);--poster-muted:var(--muted-foreground);--poster-cta-bg:var(--foreground);--poster-cta-fg:var(--background);--poster-glow:color-mix(in srgb,var(--primary) 22%,transparent);box-sizing:border-box;width:100%;max-width:var(--content-max);margin:0 auto 8px;padding:12px var(--page-gutter) 20px;text-align:center;overflow:visible;isolation:auto;}
.blog-hero.is-poster{
max-width:var(--content-max);}
.cat-hero.is-poster{
max-width:none;}
.blog-hero.is-poster .blog-hero-glow,.cat-hero.is-poster .cat-hero-glow,.contact-hero.is-poster .contact-hero-glow,.inner-hero.is-poster .contact-hero-glow,.pricing-hero.is-poster .pricing-hero-glow{
display:none}
.seam-poster-panel{
position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;padding:clamp(28px,4vw,44px) clamp(20px,3vw,40px);border-radius:calc(var(--radius,1rem) + 2px);border:1px solid color-mix(in srgb,var(--border) 85%,transparent);background:color-mix(in srgb,var(--card) 55%,var(--background));box-sizing:border-box;text-align:center;}
.seam-poster-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(145deg,var(--poster-glow) 0%,transparent 50%),linear-gradient(180deg,color-mix(in srgb,var(--card) 40%,transparent) 0%,transparent 70%);border-radius:inherit;}
.seam-poster-wash{
position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 62%);opacity:.9;}
.seam-poster-orb{
position:absolute;border-radius:50%;filter:blur(40px);opacity:.42}
.seam-poster-orb-a{
width:42%;height:90%;left:-14%;top:-36%;background:color-mix(in srgb,var(--primary) 34%,transparent)}
.seam-poster-orb-b{
width:36%;height:80%;right:-12%;bottom:-48%;background:color-mix(in srgb,#e8400d 12%,transparent)}
.seam-poster--unlock .seam-poster-orb-b{
background:color-mix(in srgb,var(--primary) 36%,transparent)}
.seam-poster--craft .seam-poster-orb-a{
background:color-mix(in srgb,#2ecf8a 26%,transparent)}
.seam-poster--d3 .seam-poster-orb-a{
background:color-mix(in srgb,#6ec8ff 30%,transparent)}
.seam-poster-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;border-radius:inherit;}
.seam-poster-scrim{
position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,color-mix(in srgb,var(--background) 35%,transparent) 0%,color-mix(in srgb,var(--background) 72%,transparent) 100%);}
.seam-poster-img.is-shared{
opacity:1}
html[data-theme=light] .seam-poster-img--light,:root:not([data-theme=dark]) .seam-poster-img--light{
opacity:1}
html[data-theme=dark] .seam-poster-img--dark,:root:not([data-theme=light]) .seam-poster-img--dark{
opacity:1}
html[data-theme=light] .is-poster.has-media:has(.seam-poster-img--light) .seam-poster-img--dark{
opacity:0}
html[data-theme=dark] .is-poster.has-media:has(.seam-poster-img--dark) .seam-poster-img--light{
opacity:0}
html[data-theme=dark] .is-poster.has-media:not(:has(.seam-poster-img--dark)) .seam-poster-img--light,:root:not([data-theme=light]) .is-poster.has-media:not(:has(.seam-poster-img--dark)) .seam-poster-img--light{
opacity:1}
html[data-theme=light] .seam-poster-scrim,:root:not([data-theme=dark]) .seam-poster-scrim{
background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.82) 100%);}
html[data-theme=dark] .seam-poster-scrim,:root:not([data-theme=light]) .seam-poster-scrim{
background:linear-gradient(180deg,rgba(18,18,18,.45) 0%,rgba(18,18,18,.78) 100%);}
.seam-hero-copy,.pricing-hero.is-poster .pricing-hero-inner{
position:relative;z-index:1;width:100%;max-width:36rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;}
.blog-hero.is-poster .contact-eyebrow,.cat-hero.is-poster .contact-eyebrow,.contact-hero.is-poster .contact-eyebrow,.inner-hero.is-poster .contact-eyebrow,.pricing-hero.is-poster .pricing-eyebrow{
margin:0 0 10px;color:var(--poster-muted);letter-spacing:.14em;}
.blog-hero.is-poster h1,.cat-hero.is-poster h1,.contact-hero.is-poster h1,.inner-hero.is-poster h1{
position:relative;margin:0 0 12px;font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:850;letter-spacing:-.03em;line-height:1.15;color:var(--poster-ink);}
.pricing-hero.is-poster .pricing-title-line{
color:var(--poster-ink);}
.blog-hero.is-poster .contact-lead,.cat-hero.is-poster .contact-lead,.contact-hero.is-poster .contact-lead,.inner-hero.is-poster .contact-lead,.inner-hero.is-poster>.seam-poster-panel .contact-lead,.pricing-hero.is-poster .pricing-lead{
margin:0;max-width:32rem;font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.65;color:var(--poster-muted);}
.seam-poster-hero-cta{
margin:18px 0 0}
.seam-poster-cta{
display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--poster-cta-bg);color:var(--poster-cta-fg);font-size:.9rem;font-weight:700;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease;}
.seam-poster-cta:hover{
transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--foreground) 14%,transparent);color:var(--poster-cta-fg);}
.seam-poster-cta:focus-visible{
outline:2px solid var(--primary);outline-offset:2px}
.seam-poster-cta-arrow{
transition:transform .2s ease}
.seam-poster-cta:hover .seam-poster-cta-arrow{
transform:translateX(3px)}
.pricing-hero.is-poster{
padding-top:20px;padding-bottom:12px;}
.pricing-hero.is-poster .seam-poster-panel{
padding-block:clamp(36px,5vw,56px);min-height:clamp(220px,28vw,300px);}
.pricing-hero.is-poster.has-media .seam-poster-panel{
background:color-mix(in srgb,var(--card) 28%,var(--background));}
.pricing-hero.is-poster.has-media .seam-poster-img.is-shared,.pricing-hero.is-poster.has-media .seam-poster-img--light,.pricing-hero.is-poster.has-media .seam-poster-img--dark,html[data-theme=light] .pricing-hero.is-poster.has-media .seam-poster-img.is-shared,html[data-theme=light] .pricing-hero.is-poster.has-media .seam-poster-img--light,html[data-theme=light] .pricing-hero.is-poster.has-media .seam-poster-img--dark,:root:not([data-theme=dark]) .pricing-hero.is-poster.has-media .seam-poster-img.is-shared,:root:not([data-theme=dark]) .pricing-hero.is-poster.has-media .seam-poster-img--light{
filter:none;}
html[data-theme=light] .pricing-hero.is-poster.has-media .seam-poster-scrim,:root:not([data-theme=dark]) .pricing-hero.is-poster.has-media .seam-poster-scrim{
background:radial-gradient(ellipse 88% 72% at 50% 42%,rgba(255,255,255,.18) 0%,transparent 68%),linear-gradient(180deg,rgba(248,249,252,.22) 0%,rgba(248,249,252,.48) 100%);}
html[data-theme=dark] .pricing-hero.is-poster.has-media .seam-poster-scrim,:root:not([data-theme=light]) .pricing-hero.is-poster.has-media .seam-poster-scrim{
background:radial-gradient(ellipse 88% 72% at 50% 42%,rgba(11,13,17,.2) 0%,transparent 68%),linear-gradient(180deg,rgba(11,13,17,.28) 0%,rgba(11,13,17,.55) 100%);}
.pricing-hero.is-poster .pricing-hero-inner{
max-width:36rem}
@media (max-width:960px){
.blog-hero.is-poster,.cat-hero.is-poster,.contact-hero.is-poster,.inner-hero.is-poster,.pricing-hero.is-poster{
padding-top:8px;padding-bottom:12px;}
.seam-poster-panel{
padding:24px 18px;border-radius:calc(var(--radius,1rem));}
.blog-hero.is-poster h1,.cat-hero.is-poster h1,.contact-hero.is-poster h1,.inner-hero.is-poster h1{
font-size:clamp(1.55rem,6.5vw,2rem);}
}
@media (prefers-reduced-motion:reduce){
.seam-poster-cta,.seam-poster-cta-arrow,.seam-poster-img{
transition:none}
}
.article-hero.is-poster{
--poster-ink:var(--foreground);--poster-muted:var(--muted-foreground);--poster-glow:color-mix(in srgb,var(--primary) 18%,transparent);box-sizing:border-box;width:100%;max-width:var(--content-max);margin:0 auto 4px;padding:12px var(--page-gutter) 8px;text-align:center;overflow:visible;}
.article-hero.is-poster .seam-poster-panel{
min-height:clamp(200px,28vw,280px);padding:clamp(28px,4vw,48px) clamp(20px,3.5vw,48px);display:flex;align-items:center;justify-content:center;}
.article-hero.is-poster.has-media .seam-poster-panel{
min-height:clamp(240px,34vw,340px);}
.article-hero.is-poster .seam-poster-scrim{
background:linear-gradient(180deg,color-mix(in srgb,var(--background) 28%,transparent) 0%,color-mix(in srgb,var(--background) 78%,transparent) 100%);}
html[data-theme=light] .article-hero.is-poster .seam-poster-scrim,:root:not([data-theme=dark]) .article-hero.is-poster .seam-poster-scrim{
background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.88) 100%);}
html[data-theme=dark] .article-hero.is-poster .seam-poster-scrim,:root:not([data-theme=light]) .article-hero.is-poster .seam-poster-scrim{
background:linear-gradient(180deg,rgba(18,18,18,.38) 0%,rgba(18,18,18,.82) 100%);}
.article-hero-copy{
max-width:min(42rem,100%);gap:0;}
.article-hero.is-poster .article-back{
margin:0 0 14px;color:var(--poster-muted);}
.article-hero.is-poster .article-back:hover{
color:var(--poster-ink)}
.article-hero.is-poster .article-kicker{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--poster-muted);}
.article-hero.is-poster h1{
margin:0 0 12px;font-size:clamp(1.65rem,3.4vw,2.45rem);font-weight:850;letter-spacing:-.03em;line-height:1.18;color:var(--poster-ink);}
.article-hero.is-poster .article-excerpt{
margin:0 auto 16px;max-width:36rem;font-size:15px;line-height:1.55;color:var(--poster-muted);}
.article-hero.is-poster .article-share{
margin:0;display:flex;justify-content:center;}
.article-shell--has-hero .article-page{
padding-top:12px;}
.article-shell--has-hero .article-cover{
display:none}
@media (max-width:700px){
.article-hero.is-poster{
padding:10px var(--page-gutter-sm,16px) 6px}
.article-hero.is-poster .seam-poster-panel{
min-height:200px;padding:24px 18px;border-radius:calc(var(--radius,1rem));}
.article-hero.is-poster.has-media .seam-poster-panel{
min-height:220px}
.article-hero.is-poster h1{
font-size:clamp(1.45rem,6vw,1.9rem)}
}
.is-poster.has-media{
--poster-ink:var(--foreground);--poster-muted:color-mix(in srgb,var(--foreground) 78%,var(--muted-foreground));}
.is-poster.has-media .seam-poster-img.is-shared,.is-poster.has-media .seam-poster-img--light,.is-poster.has-media .seam-poster-img--dark{
filter:brightness(.7) saturate(.9) contrast(1.02);}
html[data-theme=light] .is-poster.has-media .seam-poster-img.is-shared,html[data-theme=light] .is-poster.has-media .seam-poster-img--light,html[data-theme=light] .is-poster.has-media .seam-poster-img--dark,:root:not([data-theme=dark]) .is-poster.has-media .seam-poster-img.is-shared,:root:not([data-theme=dark]) .is-poster.has-media .seam-poster-img--light{
filter:brightness(.82) saturate(.92) contrast(1.02);}
.is-poster.has-media .seam-poster-scrim{
background:radial-gradient(ellipse 92% 78% at 50% 48%,color-mix(in srgb,var(--background) 78%,transparent) 0%,transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--background) 62%,transparent) 0%,color-mix(in srgb,var(--background) 88%,transparent) 100%);}
html[data-theme=light] .is-poster.has-media .seam-poster-scrim,:root:not([data-theme=dark]) .is-poster.has-media .seam-poster-scrim{
background:radial-gradient(ellipse 92% 78% at 50% 48%,rgba(255,255,255,.86) 0%,transparent 72%),linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.94) 100%);}
html[data-theme=dark] .is-poster.has-media .seam-poster-scrim,:root:not([data-theme=light]) .is-poster.has-media .seam-poster-scrim{
background:radial-gradient(ellipse 92% 78% at 50% 48%,rgba(8,8,8,.82) 0%,transparent 72%),linear-gradient(180deg,rgba(8,8,8,.62) 0%,rgba(8,8,8,.9) 100%);}
.is-poster.has-media .seam-hero-copy,.is-poster.has-media .pricing-hero-inner{
padding:14px 18px 16px;border-radius:16px;background:color-mix(in srgb,var(--background) 55%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05);box-shadow:0 8px 36px color-mix(in srgb,var(--background) 28%,transparent);}
html[data-theme=light] .is-poster.has-media .seam-hero-copy,html[data-theme=light] .is-poster.has-media .pricing-hero-inner,:root:not([data-theme=dark]) .is-poster.has-media .seam-hero-copy{
background:rgba(255,255,255,.72);box-shadow:0 8px 32px rgba(18,18,20,.08);}
html[data-theme=dark] .is-poster.has-media .seam-hero-copy,html[data-theme=dark] .is-poster.has-media .pricing-hero-inner,:root:not([data-theme=light]) .is-poster.has-media .seam-hero-copy{
background:rgba(12,12,12,.62);box-shadow:0 10px 36px rgba(0,0,0,.28);}
.is-poster.has-media h1,.is-poster.has-media .pricing-title-line{
color:var(--poster-ink);text-shadow:0 1px 1px color-mix(in srgb,var(--background) 35%,transparent);}
.is-poster.has-media .contact-eyebrow,.is-poster.has-media .contact-lead,.is-poster.has-media .article-excerpt,.is-poster.has-media .article-kicker,.is-poster.has-media .article-back,.is-poster.has-media .pricing-eyebrow,.is-poster.has-media .pricing-lead{
color:var(--poster-muted);text-shadow:0 1px 1px color-mix(in srgb,var(--background) 30%,transparent);}
@media (max-width:700px){
.is-poster.has-media .seam-hero-copy,.is-poster.has-media .pricing-hero-inner{
padding:12px 14px 14px;border-radius:14px;}
}
@media (prefers-reduced-motion:reduce){
.is-poster.has-media .seam-hero-copy,.is-poster.has-media .pricing-hero-inner{
-webkit-backdrop-filter:none;backdrop-filter:none;}
}
.nav-logo .seam-logo,.footer-logo .seam-logo,.mobile-menu-brand .seam-logo{
display:inline-flex;align-items:center;gap:8px;min-width:0;vertical-align:middle;}
.seam-logo-mark-wrap{
position:relative;display:inline-grid;place-items:center;flex:0 0 auto;line-height:0;}
.seam-logo-mark-wrap .seam-logo-mark{
grid-area:1 / 1;}
.seam-logo-mark--dark{
display:none}
html[data-theme=dark] .seam-logo-mark--light{
display:none}
html[data-theme=dark] .seam-logo-mark--dark{
display:block}
.seam-logo--lockup .seam-logo-mark-wrap,.seam-logo--lockup .seam-logo-mark{
width:32px;height:32px;flex:0 0 32px;object-fit:contain;}
.seam-logo--image .seam-logo-mark-wrap{
height:28px;width:auto;}
.seam-logo--image .seam-logo-mark{
width:auto;height:28px;max-width:min(168px,46vw);flex:0 0 auto;object-fit:contain;}
.seam-logo--lockup .seam-logo-word{
display:inline-flex;align-items:center;font-size:16px;font-weight:750;letter-spacing:.02em;line-height:1;white-space:nowrap;color:var(--foreground);}
.seam-logo--en.seam-logo--lockup .seam-logo-word{
font-size:14px;letter-spacing:-.01em;}
.site-nav.is-scrolled .seam-logo--lockup .seam-logo-mark-wrap,.site-nav.is-scrolled .seam-logo--lockup .seam-logo-mark{
width:28px;height:28px;flex-basis:28px;}
.site-nav.is-scrolled .seam-logo--image .seam-logo-mark{
height:28px}
.site-nav.is-scrolled .seam-logo--lockup .seam-logo-word{
font-size:15px}
@keyframes seam-logo-spin-loop{
from{
transform:rotate(0deg)}
to{
transform:rotate(360deg)}
}
@keyframes seam-logo-spin-back{
from{
transform:rotate(0deg)}
to{
transform:rotate(-360deg)}
}
.site-nav--logo-lockup .nav-logo .seam-logo-mark-wrap,.site-nav--logo-lockup .nav-logo .seam-logo-mark{
transform:none;transition:width .45s var(--ease-out,ease),height .45s var(--ease-out,ease);animation:none;}
.site-nav--logo-lockup:hover .nav-logo .seam-logo-mark-wrap,.site-nav--logo-lockup:hover .nav-logo>.seam-logo>.seam-logo-mark:only-child{
animation:seam-logo-spin-loop 1.1s linear infinite;}
.site-nav--logo-lockup:not(:hover) .nav-logo .seam-logo-mark-wrap.is-spin-back,.site-nav--logo-lockup:not(:hover) .nav-logo>.seam-logo>.seam-logo-mark:only-child.is-spin-back{
animation:seam-logo-spin-back .45s cubic-bezier(.22,1,.36,1) 1;}
@media (prefers-reduced-motion:reduce){
.site-nav--logo-lockup:hover .nav-logo .seam-logo-mark-wrap,.site-nav--logo-lockup:hover .nav-logo>.seam-logo>.seam-logo-mark:only-child,.site-nav--logo-lockup:not(:hover) .nav-logo .seam-logo-mark-wrap.is-spin-back,.site-nav--logo-lockup:not(:hover) .nav-logo>.seam-logo>.seam-logo-mark:only-child.is-spin-back{
animation:none;}
}
.seam-face-q{
position:absolute;left:50%;bottom:calc(100% + 6px);z-index:2;display:none;align-items:center;justify-content:center;width:26px;height:26px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(210,210,210,.16);background:var(--dock-bg,#1c1c1c);box-shadow:0 6px 16px rgba(0,0,0,.28);font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:15px;font-weight:700;line-height:1;letter-spacing:0;color:var(--seam-face,#e6e6e6);pointer-events:none;transform:translateX(-50%) translateY(4px);opacity:0;transition:opacity .22s ease,transform .22s ease;}
.seam-face-q::after{
content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;margin-left:-3.5px;background:var(--dock-bg,#1c1c1c);border-right:1px solid rgba(210,210,210,.16);border-bottom:1px solid rgba(210,210,210,.16);transform:rotate(45deg);}
.seam-dock-eye.is-ask .seam-face-q{
display:inline-flex;opacity:1;transform:translateX(-50%) translateY(0);}
html[data-theme=light] .seam-face-q{
border-color:rgba(18,18,20,.12);background:var(--dock-bg,#fff);color:var(--seam-face,#161616);box-shadow:0 6px 16px rgba(18,18,20,.12);}
html[data-theme=light] .seam-face-q::after{
background:var(--dock-bg,#fff);border-right-color:rgba(18,18,20,.12);border-bottom-color:rgba(18,18,20,.12);}
@media (max-width:760px){
.seam-face-q{
width:24px;height:24px;font-size:14px;bottom:calc(100% + 5px)}
}
@media (prefers-reduced-motion:reduce){
.seam-face-q{
transition:none}
}
@media (prefers-reduced-motion:reduce){
.nav-links a::after,.nav-links a.has-badge .nav-label::after{
transition:none}
}
.detail-media::before{
content:"";position:absolute;top:0;left:0;z-index:11;width:min(46%,240px);height:min(32%,160px);pointer-events:none;border-radius:inherit;background:radial-gradient(120% 110% at 0% 0%,rgba(0,0,0,.58),transparent 72%);}
html[dir=rtl] .detail-media::before{
left:auto;right:0;background:radial-gradient(120% 110% at 100% 0%,rgba(0,0,0,.58),transparent 72%);}
.detail-back{
background:rgba(10,10,12,.82);color:#fff;border:1px solid rgba(255,255,255,.45);box-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;}
.detail-back:hover,.detail-back:focus-visible{
background:rgba(10,10,12,.94);color:#fff;border-color:rgba(255,255,255,.62);box-shadow:0 1px 2px rgba(0,0,0,.45),0 14px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.18);outline:none;}
.detail-back:active{
transform:scale(.96)}
html[data-theme=dark] .detail-back,html[data-theme=light] .detail-back{
color:#fff;}
@media (prefers-reduced-motion:reduce){
.detail-back{
transition:none}
.detail-back:active{
transform:none}
}
.seam-login-gate{
--gate-blur-depth:260px;--gradual-blur-reveal:0;position:relative;isolation:isolate;margin-top:-8px;padding:136px 24px 72px;min-height:352px;overflow:clip;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:24px;color:var(--foreground);text-align:center;background:transparent;}
.seam-login-gate[hidden]{
display:none}
.seam-login-gate::before{
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent calc(var(--gate-blur-depth) - 20px),var(--background) var(--gate-blur-depth));}
.seam-gate-blur{
position:absolute;inset:0;z-index:1;pointer-events:none;}
.seam-gradual-blur{
position:absolute;z-index:1;inset:0 0 auto;height:var(--gate-blur-depth);pointer-events:none;}
.seam-gate-blur-layer,.seam-gate-wash{
position:absolute;inset:0;border-radius:inherit;}
.seam-gate-blur-layer{
backdrop-filter:blur(calc(var(--seam-blur) * var(--gradual-blur-reveal)));-webkit-backdrop-filter:blur(calc(var(--seam-blur) * var(--gradual-blur-reveal)));mask-image:linear-gradient(transparent var(--seam-mask-from),#000 var(--seam-mask-to));-webkit-mask-image:linear-gradient(transparent var(--seam-mask-from),#000 var(--seam-mask-to));transition:backdrop-filter .8s ease-out,-webkit-backdrop-filter .8s ease-out;}
.seam-gate-wash{
background:var(--background);mask-image:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.086) 12.5%,rgba(0,0,0,.384) 25%,rgba(0,0,0,.698) 37.5%,rgba(0,0,0,.894) 50%,rgba(0,0,0,.976) 62.5%,rgba(0,0,0,.996) 75%,#000 87.5%,#000 100%);-webkit-mask-image:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.086) 12.5%,rgba(0,0,0,.384) 25%,rgba(0,0,0,.698) 37.5%,rgba(0,0,0,.894) 50%,rgba(0,0,0,.976) 62.5%,rgba(0,0,0,.996) 75%,#000 87.5%,#000 100%);opacity:var(--gradual-blur-reveal);transition:opacity .8s ease-out;}
.seam-login-gate.is-in{
--gradual-blur-reveal:1}
.seam-gate-peek{
position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-content:start;}
.seam-gate-art{
position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:20px;background:var(--secondary);}
.seam-gate-art img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.seam-gate-caption{
margin-top:12px;font-size:14px;font-weight:650;letter-spacing:-.02em;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seam-gate-copy,.seam-gate-action{
position:relative;z-index:3}
.seam-gate-copy{
min-width:0;max-width:100%}
.seam-gate-copy h2{
margin:0;font-size:clamp(26px,2.5vw,36px);font-weight:650;letter-spacing:-.025em;line-height:1.35;text-wrap:balance;color:var(--foreground);}
.seam-gate-copy h2 span{
display:inline-block;opacity:0;transform:translateY(12px);}
.seam-login-gate.is-in .seam-gate-copy h2 span{
opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1);}
.seam-login-gate.is-in .seam-gate-copy h2 span + span{
transition-delay:.08s}
.seam-gate-action{
display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(10px);}
.seam-login-gate.is-in .seam-gate-action{
opacity:1;transform:none;transition:opacity .5s ease .14s,transform .55s cubic-bezier(.16,1,.3,1) .14s;}
.seam-gate-login{
position:relative;isolation:isolate;overflow:visible;display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:50px;padding:0 28px;border:0;border-radius:999px;background:#fff;color:#26282c;font-size:15px;line-height:1.4;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 3px 8px -3px rgba(37,47,69,.16);transition:box-shadow .22s ease,transform .22s cubic-bezier(.2,.8,.2,1);}
@property --seam-gate-turn{
syntax:"<angle>";inherits:false;initial-value:0deg;}
.seam-gate-login::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:2.25px;pointer-events:none;z-index:2;background:linear-gradient(135deg,#c7d7e7 5%,#f3b8bd 18%,#f5dfb8 24%,#fff 36%,#7d8396 54%,#c1b2e1 68%,#b9e5eb 80%,#d5dbe3 95%);background:conic-gradient(from var(--seam-gate-turn),#c7d7e7 0%,#f3b8bd 14%,#f5dfb8 28%,#fff 40%,#7d8396 54%,#c1b2e1 68%,#b9e5eb 82%,#c7d7e7 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:seam-gate-ring 8s linear infinite;}
@keyframes seam-gate-ring{
to{
--seam-gate-turn:360deg}
}
.seam-gate-label,.seam-gate-arrow{
position:relative;z-index:1}
.seam-gate-arrow{
display:block;flex:0 0 20px;width:20px;height:20px;overflow:hidden;}
.seam-gate-arrow svg{
width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover) and (pointer:fine){
.seam-gate-login:hover{
transform:translateY(-2px);box-shadow:0 6px 16px -7px rgba(73,91,128,.36);}
.seam-gate-login:hover .seam-gate-arrow svg{
transform:translateX(3px)}
}
.seam-gate-login:active{
transform:translateY(0) scale(.97);box-shadow:0 1px 4px rgba(37,47,69,.12);transition-duration:90ms;}
.seam-gate-login:focus-visible{
outline:2px solid var(--foreground);outline-offset:4px}
html[data-theme=dark] .seam-gate-login{
box-shadow:0 8px 22px -8px rgba(0,0,0,.55)}
@media (max-width:999px){
.seam-gate-peek{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
.seam-login-gate{
--gate-blur-depth:240px;min-height:368px;gap:22px;padding:128px 20px 64px;margin-top:0;}
.seam-gate-copy h2{
font-size:27px}
}
@media (max-width:639px){
.seam-gate-peek{
grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.seam-login-gate{
--gradual-blur-reveal:1}
.seam-gate-copy h2 span,.seam-gate-action{
opacity:1;transform:none;transition:none}
.seam-gate-blur-layer,.seam-gate-wash,.seam-gate-login,.seam-gate-arrow svg{
transition:none}
.seam-gate-login:hover,.seam-gate-login:active,.seam-gate-login:hover .seam-gate-arrow svg{
transform:none}
.seam-gate-login::after{
animation:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.seam-login-gate::before{
background:linear-gradient(to bottom,transparent,var(--background) 180px)}
.seam-gate-blur{
display:none}
}
.prompt-media img,.prompt-media video,.d3-item-media img,.d3-item-media video,.seam-w-thumb img{
transform:none;filter:none;will-change:auto;}
html .blog-card-cover{
position:relative;overflow:hidden;}
html .blog-card .blog-card-cover:has(>img + img)>img{
display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .5s,filter .5s;}
html .blog-card .blog-card-cover:has(>img + img)>img:first-of-type{
z-index:1;opacity:0;filter:blur(10px);transform:translateX(50%) scaleX(2);}
html .blog-card .blog-card-cover:has(>img + img)>img:nth-of-type(2){
z-index:2;opacity:1;filter:none;transform:none;}
html .blog-card:hover .blog-card-cover:has(>img + img)>img:first-of-type,html .blog-card:focus-within .blog-card-cover:has(>img + img)>img:first-of-type{
opacity:1;filter:blur(0);transform:translateX(0) scaleX(1);}
html .blog-card:hover .blog-card-cover:has(>img + img)>img:nth-of-type(2),html .blog-card:focus-within .blog-card-cover:has(>img + img)>img:nth-of-type(2){
opacity:0;filter:blur(10px);transform:translateX(-50%) scaleX(2);}
@media (prefers-reduced-motion:reduce){
html .blog-card .blog-card-cover:has(>img + img)>img{
transition:none;filter:none;transform:none;}
html .blog-card .blog-card-cover:has(>img + img)>img:first-of-type{
display:none}
html .blog-card .blog-card-cover:has(>img + img)>img:nth-of-type(2){
position:absolute;inset:0;height:100%;opacity:1;z-index:1;}
}
.article-related-resources{
margin-top:48px;padding-top:36px;border-top:1px solid var(--border)}
.related-res-head{
margin-bottom:20px;max-width:40rem}
.related-res-head h2{
font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.25}
.related-res-lead{
margin:0;font-size:14px;line-height:1.55;color:var(--muted-foreground)}
.related-res-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:999px){
.related-res-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:639px){
.related-res-grid{
grid-template-columns:1fr;gap:14px}
}
.related-res-card{
display:flex;flex-direction:column;min-width:0;border-radius:18px;background:var(--card,var(--surface-elevated,#fff));border:1px solid color-mix(in srgb,var(--border) 88%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--foreground) 4%,transparent);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
@media(hover:hover) and (pointer:fine){
.related-res-card:hover{
border-color:color-mix(in srgb,var(--foreground) 16%,var(--border));box-shadow:0 10px 28px color-mix(in srgb,var(--foreground) 8%,transparent);transform:translateY(-2px)}
}
.related-res-media{
display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--secondary);text-decoration:none}
.related-res-media.seam-media.is-skeleton{
min-height:0}
.related-res-media img{
width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease,opacity .35s ease,filter .35s ease}
.related-res-media.seam-media.is-skeleton img{
opacity:0;filter:blur(8px)}
.related-res-media.seam-media.is-loaded img,.related-res-media.seam-media img.is-loaded{
opacity:1;filter:none}
@media(hover:hover) and (pointer:fine){
.related-res-card:hover .related-res-media img{
transform:scale(1.03)}
}
.related-res-ph{
display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--secondary),var(--muted))}
.related-res-body{
display:flex;align-items:flex-start;gap:10px;padding:12px 12px 14px;min-width:0}
.related-res-text{
flex:1 1 auto;min-width:0}
.related-res-title{
margin:0;font-size:15px;font-weight:700;line-height:1.35}
.related-res-title a{
color:inherit;text-decoration:none}
.related-res-title a:hover{
color:var(--primary)}
.related-res-cat{
display:block;margin-top:4px;font-size:12px;color:var(--muted-foreground);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.related-res-copy{
flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border-radius:10px;border:1px solid var(--border);background:var(--background,#fff);color:var(--muted-foreground);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.related-res-copy svg{
width:16px;height:16px;display:block}
.related-res-copy:hover,.related-res-copy:focus-visible{
color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 22%,var(--border));background:var(--secondary);outline:none}
.related-res-copy.is-lock{
color:var(--muted-foreground)}
@media(prefers-reduced-motion:reduce){
.related-res-card,.related-res-media img{
transition:none!important}
.related-res-card:hover{
transform:none}
.related-res-card:hover .related-res-media img{
transform:none}
}
.rankings-shell{
padding-top:8px;padding-bottom:72px;box-sizing:border-box;}
.rankings-shell.article-shell:has(.article-aside){
max-width:min(1440px,100%);}
.rankings-shell .rankings-aside,.rankings-shell .article-aside{
padding-top:4px;}
.rankings-main{
min-width:0;width:100%}
.rankings-note{
margin:0 0 18px;max-width:42rem;font-size:14px;line-height:1.6;color:var(--muted-foreground);}
.rankings-toolbar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin:0 0 18px;}
.rank-tabs{
display:inline-flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--foreground) 3%,transparent);}
.rank-tab{
display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 16px;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted-foreground);font-size:13px;font-weight:650;text-decoration:none;line-height:1;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.rank-tab:hover{
color:var(--foreground)}
.rank-tab.is-active{
color:var(--background);background:var(--foreground);border-color:var(--foreground);}
.rankings-count{
font-size:13px;font-weight:600;color:var(--muted-foreground);letter-spacing:.01em;}
.rank-list{
display:flex;flex-direction:column;gap:8px}
.rank-row{
display:grid;grid-template-columns:44px minmax(88px,132px) minmax(0,1fr) 40px;align-items:center;gap:14px;padding:10px 12px;border-radius:18px;border:1px solid color-mix(in srgb,var(--border) 88%,transparent);background:color-mix(in srgb,var(--card) 82%,var(--background));cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;}
.rank-row:hover,.rank-row:focus-visible{
border-color:color-mix(in srgb,var(--foreground) 16%,var(--border));box-shadow:0 12px 32px color-mix(in srgb,var(--foreground) 8%,transparent);background:color-mix(in srgb,var(--card) 96%,var(--background));outline:none;}
@media(hover:hover) and (pointer:fine){
.rank-row:hover{
transform:translateY(-1px)}
}
.rank-row.is-top{
padding:12px 14px}
.rank-row.is-top-1{
border-color:color-mix(in srgb,#c9a227 42%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#c9a227 10%,transparent),transparent 48%),color-mix(in srgb,var(--card) 94%,var(--background));}
.rank-row.is-top-2{
border-color:color-mix(in srgb,#9aa4b2 40%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#9aa4b2 9%,transparent),transparent 48%),color-mix(in srgb,var(--card) 94%,var(--background));}
.rank-row.is-top-3{
border-color:color-mix(in srgb,#b87333 40%,var(--border));background:linear-gradient(135deg,color-mix(in srgb,#b87333 10%,transparent),transparent 48%),color-mix(in srgb,var(--card) 94%,var(--background));}
.rank-pos{
display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:0 auto;border-radius:12px;background:color-mix(in srgb,var(--foreground) 6%,transparent);color:var(--foreground);font-size:14px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.rank-row.is-top .rank-pos{
width:40px;height:40px;font-size:15px;color:var(--background);}
.rank-row.is-top-1 .rank-pos{
background:linear-gradient(160deg,#e8c547,#b8860b)}
.rank-row.is-top-2 .rank-pos{
background:linear-gradient(160deg,#c5ced8,#7d8794)}
.rank-row.is-top-3 .rank-pos{
background:linear-gradient(160deg,#d4a06a,#8f5a2a)}
.rank-media{
position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--secondary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--foreground) 6%,transparent);}
.rank-row.is-top .rank-media{
border-radius:14px}
.rank-media img{
width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.22,1,.36,1);}
@media(hover:hover) and (pointer:fine){
.rank-row:hover .rank-media img{
transform:scale(1.04)}
}
.rank-body{
min-width:0}
.rank-title{
margin:0;font-size:15px;font-weight:750;line-height:1.35;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-row.is-top .rank-title{
font-size:16px}
.rank-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:5px;font-size:12px;color:var(--muted-foreground);line-height:1.3;}
.rank-cat{
display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 6%,transparent);color:var(--foreground);font-size:11px;font-weight:650;white-space:nowrap;}
.rank-metric{
white-space:nowrap;font-variant-numeric:tabular-nums}
.rank-action{
flex:0 0 auto;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border-radius:11px;border:1px solid var(--border);background:var(--background);color:var(--muted-foreground);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;}
.rank-action svg{
width:16px;height:16px;display:block}
.rank-action:hover,.rank-action:focus-visible{
color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 22%,var(--border));background:var(--nav-hover-bg);outline:none;}
.rank-empty{
display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:36px 0 16px}
.rank-empty p{
margin:0;color:var(--muted-foreground);font-size:15px}
.rank-footer-cta{
margin:28px 0 0;font-size:14px}
.rank-footer-cta a{
color:var(--foreground);text-decoration:underline;text-underline-offset:3px}
html[data-theme=light] .rank-row{
background:rgba(255,255,255,.88);}
html[data-theme=light] .rank-row:hover,html[data-theme=light] .rank-row:focus-visible{
background:#fff;}
html[data-theme=light] .rank-tabs{
background:rgba(18,18,20,.03);}
@media(max-width:760px){
.rankings-toolbar{
align-items:stretch}
.rank-tabs{
width:100%;justify-content:stretch}
.rank-tab{
flex:1 1 0;padding:0 10px}
.rankings-count{
width:100%}
.rank-row{
grid-template-columns:36px minmax(64px,96px) minmax(0,1fr) 36px;gap:10px;padding:8px;border-radius:16px}
.rank-pos{
width:32px;height:32px;font-size:13px;border-radius:10px}
.rank-row.is-top .rank-pos{
width:34px;height:34px;font-size:14px}
.rank-title{
font-size:14px}
.rank-row.is-top .rank-title{
font-size:15px}
}
@media(prefers-reduced-motion:reduce){
.rank-row,.rank-tab,.rank-media img{
transition:none!important}
.rank-row:hover{
transform:none}
.rank-row:hover .rank-media img{
transform:none}
}
.account-list{
display:flex;flex-direction:column;gap:6px}
.account-item{
display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--foreground) 2%,transparent);transition:border-color .15s ease,background .15s ease;}
.account-item:hover{
border-color:color-mix(in srgb,var(--foreground) 14%,var(--border));background:color-mix(in srgb,var(--foreground) 4%,transparent);transform:none;}
.account-item-media{
flex:0 0 auto;width:72px;height:48px;border-radius:10px;overflow:hidden;background:var(--secondary);}
.account-item-media img,.account-item-placeholder{
width:100%;height:100%;object-fit:cover;display:block}
.account-item-body{
flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.account-item-title{
color:var(--foreground);font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.account-item-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;line-height:1.3;color:var(--muted-foreground);}
.account-item-cat{
display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 6%,transparent);color:var(--foreground);font-size:11px;font-weight:650;}
.account-item-when{
min-width:0}
.account-item-actions{
flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;}
.account-item-actions .seam-share-btn,.account-item-open{
width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;border-radius:999px;background:transparent;color:var(--muted-foreground);cursor:pointer;flex:none;align-self:center;}
.account-item-actions .seam-share-btn svg,.account-item-open svg{
width:15px;height:15px;display:block}
.account-item-actions .seam-share-btn:hover,.account-item-open:hover{
background:var(--nav-hover-bg);color:var(--foreground);}
html[data-theme=light] .account-item{
background:rgba(255,255,255,.82)}
@media(max-width:720px){
.account-item{
gap:10px;padding:8px}
.account-item-media{
width:64px;height:44px;border-radius:9px}
.account-item-title{
font-size:13px}
}
.site-nav{
--nav-glass-tint:rgba(28,28,30,0.58);--nav-glass-border:rgba(255,255,255,0.14);--nav-glass-shadow:0 4px 24px rgba(0,0,0,0.22),0 0 1px rgba(0,0,0,0.25);--nav-glass-shine:inset 0 1px 1px rgba(255,255,255,0.12),inset 0 -1px 1px rgba(0,0,0,0.28);}
html[data-theme=light] .site-nav{
--nav-glass-tint:rgba(255,255,255,0.72);--nav-glass-border:rgba(255,255,255,0.55);--nav-glass-shadow:0 4px 24px rgba(0,0,0,0.08),0 0 1px rgba(0,0,0,0.12);--nav-glass-shine:inset 0 -1px 1px rgba(255,255,255,0.55),inset 0 1px 1px rgba(255,255,255,0.4);}
.site-nav>.nav-left,.site-nav>.nav-links,.site-nav>.nav-right{
position:relative;z-index:2;}
.site-nav .nav-glass{
position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:none;}
.site-nav .nav-glass-blur,.site-nav .nav-glass-tint,.site-nav .nav-glass-shine{
position:absolute;inset:0;display:block;}
.site-nav .nav-glass-blur{
backdrop-filter:none;-webkit-backdrop-filter:none;}
.site-nav .nav-glass-tint{
background:transparent;}
.site-nav .nav-glass-shine{
box-shadow:var(--nav-glass-shine);}
.site-nav.is-scrolled .nav-glass{
opacity:1;}
html body .site-nav.is-scrolled,html[data-theme=light] body .site-nav.is-scrolled,html[data-theme=light] body .site-header.is-scrolled .site-nav{
background:var(--nav-glass-tint) !important;backdrop-filter:blur(24px) saturate(1.2) !important;-webkit-backdrop-filter:blur(24px) saturate(1.2) !important;border-color:var(--nav-glass-border) !important;box-shadow:var(--nav-glass-shadow),var(--nav-glass-shine) !important;transition:background-color 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s,box-shadow .35s var(--ease-soft,ease),border-color .35s var(--ease-soft,ease),padding .45s var(--ease-out,ease),max-width .45s var(--ease-out,ease),column-gap .45s var(--ease-out,ease),transform .45s var(--ease-out,ease) !important;}
html.is-fast-scroll body .site-nav.is-scrolled{
background:var(--nav-glass-tint) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
html body .site-nav.is-scrolled,html[data-theme=light] body .site-nav.is-scrolled{
background:color-mix(in srgb,var(--nav-pill-bg) 94%,transparent) !important;}
html[data-theme=light] body .site-nav.is-scrolled{
background:rgba(255,255,255,0.92) !important;}
}
.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link{
border-radius:999px;font-weight:500;letter-spacing:0.01em;transition:color 0.18s ease-out,background-color 0.18s ease-out;}
.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link::after,.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link.has-badge .nav-label::after,.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link .nav-label-roll::after{
display:none !important;content:none !important;}
.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link:hover,.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link:focus-visible,.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link.is-active,.site-nav .nav-links>.nav-menu>.menu-item-depth-0:focus-within>.menu-item-row>a.menu-link{
color:var(--foreground) !important;background:color-mix(in srgb,var(--foreground) 5%,transparent) !important;}
.site-nav .nav-submenu-toggle:hover,.site-nav .nav-submenu-toggle:focus-visible{
color:var(--foreground);background:color-mix(in srgb,var(--foreground) 5%,transparent);}
.nav-label-roll{
display:inline-flex;flex-wrap:nowrap;align-items:baseline;line-height:inherit;letter-spacing:0;gap:0;}
.nav-char-mask{
display:inline-block;position:relative;overflow:hidden;vertical-align:baseline;line-height:inherit;letter-spacing:0;}
.nav-char-front,.nav-char-back{
display:block;will-change:transform;transform:translate3d(0,0,0);transition:transform 0.45s cubic-bezier(0.55,0.055,0.675,1);transition-delay:calc(var(--i,0) * 18ms);}
.nav-char-back{
position:absolute;top:100%;left:0;}
a.is-roll-in .nav-char-front,a.is-roll-in .nav-char-back,a.menu-link.is-roll-in .nav-char-front,a.menu-link.is-roll-in .nav-char-back{
transform:translate3d(0,-100%,0);transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);transition-delay:calc(var(--i,0) * 25ms);}
a.is-roll-out .nav-char-front,a.is-roll-out .nav-char-back,a.menu-link.is-roll-out .nav-char-front,a.menu-link.is-roll-out .nav-char-back{
transform:translate3d(0,0,0);transition:transform 0.45s cubic-bezier(0.55,0.055,0.675,1);transition-delay:calc(var(--i,0) * 18ms);}
.site-footer .footer-nav a.has-char-roll,.site-footer .footer-bottom-links a.has-char-roll,.site-footer .footer-friends a.has-char-roll{
overflow:hidden;}
.site-footer .footer-nav a.has-char-roll:hover,.site-footer .footer-bottom-links a.has-char-roll:hover,.site-footer .footer-friends a.has-char-roll:hover{
color:var(--foreground);}
@media (prefers-reduced-motion:no-preference){
.site-footer.seam-await:not(.is-text-in) .seam-char,.site-footer.seam-await:not(.is-text-in) .footer-nav .nav-char-front,.site-footer.seam-await:not(.is-text-in) .footer-bottom-links .nav-char-front{
opacity:0;}
.site-footer.is-text-in .seam-word{
display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em;line-height:inherit;}
.site-footer.is-text-in .seam-char{
display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;opacity:1;--rise:110%;--rot:4deg;animation:seam-char-rise 1.05s cubic-bezier(0.16,1,0.3,1) backwards;animation-delay:calc(var(--col,0) * 90ms + var(--ci,0) * 28ms);}
.site-footer.is-text-in .footer-nav .nav-char-front,.site-footer.is-text-in .footer-bottom-links .nav-char-front{
opacity:1;animation:seam-char-slide .9s cubic-bezier(0.16,1,0.3,1) backwards;animation-delay:calc(var(--col,0) * 80ms + var(--i,0) * 18ms);}
}
@media (prefers-reduced-motion:reduce){
.site-nav .nav-glass,.site-nav .nav-glass-tint,.site-nav .nav-links>.nav-menu>.menu-item-depth-0>.menu-item-row>a.menu-link,.nav-char-front,.nav-char-back{
transition:none !important;}
}
body.auth-body{
margin:0;min-height:100vh;background:var(--background);}
body.auth-body .site-header,body.auth-body .site-footer,body.auth-body .seam-dock,body.auth-body #seam-share{
display:none !important;}
.auth-page{
min-height:100vh;min-height:100dvh;display:flex;align-items:stretch;justify-content:center;padding:clamp(16px,3vw,28px);box-sizing:border-box;background:radial-gradient(ellipse 80% 50% at 10% 0%,color-mix(in srgb,var(--seam-accent,#8a78b8) 18%,transparent),transparent 55%),radial-gradient(ellipse 60% 40% at 90% 100%,color-mix(in srgb,#c8ff4a 10%,transparent),transparent 50%),var(--background);}
.auth-split{
width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin:auto;min-height:min(720px,calc(100dvh - 32px));}
.auth-split-form,.auth-split-visual{
border-radius:28px;overflow:hidden;position:relative;}
.auth-split-form{
background:var(--surface-elevated,#fff);border:1px solid color-mix(in srgb,var(--border) 80%,transparent);box-shadow:0 18px 50px color-mix(in srgb,#000 10%,transparent);display:flex;flex-direction:column;padding:clamp(22px,3.5vw,40px);}
html[data-theme=dark] .auth-split-form{
background:#14171d;border-color:rgba(243,244,247,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 80px rgba(0,0,0,.45);}
.auth-split-home{
display:inline-flex;align-items:center;text-decoration:none;color:inherit;margin-bottom:28px;width:fit-content;}
.auth-split-home .seam-logo-mark-wrap,.auth-split-home .seam-logo-mark{
width:28px;height:28px;}
.auth-split-home .seam-logo-word{
font-size:16px;}
.auth-split-form-inner{
width:min(360px,100%);margin:auto 0;flex:1;display:flex;flex-direction:column;justify-content:center;}
.auth-page-tabs{
display:flex;gap:4px;padding:4px;margin:0 0 22px;border-radius:999px;background:color-mix(in srgb,var(--foreground) 6%,transparent);border:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);}
.auth-page-tab{
flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--muted-foreground);transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
.auth-page-tab:hover{
color:var(--foreground);}
.auth-page-tab.is-active{
background:var(--foreground);color:var(--background);box-shadow:0 6px 18px color-mix(in srgb,#000 16%,transparent);}
html[data-theme=dark] .auth-page-tab.is-active{
background:#232833;color:#f3f4f7;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.auth-page-title{
margin:0 0 8px;font-size:clamp(1.65rem,2.4vw,2rem);font-weight:700;letter-spacing:-0.02em;color:var(--foreground);line-height:1.2;}
.auth-page-lead{
margin:0 0 22px;color:var(--muted-foreground);font-size:14px;line-height:1.55;}
.auth-page .auth-form{
display:flex;flex-direction:column;gap:0;}
.auth-page .auth-submit{
display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;}
.auth-submit-arrow{
display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:color-mix(in srgb,#fff 18%,transparent);font-size:13px;line-height:1;}
html[data-theme=light] .auth-page .auth-submit-arrow{
background:rgba(255,255,255,.22);}
.auth-page .auth-switch{
margin-top:18px;font-size:14px;color:var(--muted-foreground);}
.auth-page .auth-switch a{
color:var(--foreground);font-weight:600;text-decoration:none;margin-left:4px;}
.auth-page .auth-switch a:hover{
text-decoration:underline;}
.auth-split-visual{
background:#020814;color:#f2f2f2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3.5vw,36px);min-height:280px;isolation:isolate;cursor:crosshair;}
.auth-particle-canvas{
position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;}
.auth-split-visual-fade{
position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 42%,transparent 40%,rgba(2,8,20,.55) 100%),linear-gradient(180deg,rgba(2,8,20,.35) 0%,transparent 22%,transparent 72%,rgba(2,8,20,.7) 100%);}
.auth-split-visual-content,.auth-split-visual-foot{
position:relative;z-index:1;}
.auth-split-brand{
font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;text-shadow:0 0 32px rgba(100,180,255,.45);animation:auth-brand-in .85s cubic-bezier(.22,1,.36,1) both;}
.auth-split-tagline{
margin:12px 0 0;max-width:16em;font-size:15px;line-height:1.45;color:rgba(210,230,255,.72);animation:auth-brand-in .95s .1s cubic-bezier(.22,1,.36,1) both;}
@keyframes auth-brand-in{
from{
opacity:0;transform:translateY(12px);}
to{
opacity:1;transform:translateY(0);}
}
.auth-split-visual-foot{
display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;font-size:12px;color:rgba(180,210,255,.4);}
.auth-split-legal{
display:inline-flex;gap:12px;}
.auth-split-legal a{
color:rgba(180,210,255,.5);text-decoration:none;}
.auth-split-legal a:hover{
color:#fff;}
@media (prefers-reduced-motion:reduce){
.auth-split-brand,.auth-split-tagline{
animation:none !important;}
}
.auth-fullpage{
margin:14px 0 0;text-align:center;font-size:13px;}
.auth-fullpage a{
color:var(--muted-foreground);text-decoration:underline;text-underline-offset:3px;}
.auth-fullpage a:hover{
color:var(--foreground);}
.auth-modal .auth-submit-arrow{
display:none;}
.auth-modal .auth-dialog{
padding-top:52px}
.auth-modal .auth-close{
top:12px;right:12px;z-index:2;}
.auth-modal .auth-tabs{
margin:0 0 22px;width:100%;box-sizing:border-box;}
.auth-modal[data-auth-mode=lost] .auth-dialog{
padding-top:52px}
html[data-theme=light] .auth-page .auth-field span{
color:color-mix(in srgb,var(--foreground) 62%,transparent);}
html[data-theme=light] .auth-page .auth-field input{
background:#f4f4f5;color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 12%,transparent);}
html[data-theme=light] .auth-page .auth-field input:focus{
background:#fff;border-color:color-mix(in srgb,var(--foreground) 28%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--foreground) 6%,transparent);}
html[data-theme=light] .auth-page .auth-submit{
background:#17191f;color:#f8f9fb;}
html[data-theme=light] .auth-page .auth-math-q{
color:color-mix(in srgb,var(--foreground) 80%,transparent);}
html[data-theme=light] .auth-page .auth-code-btn,html[data-theme=light] .auth-page .auth-math-refresh{
background:#f4f4f5;color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 12%,transparent);}
@media (max-width:860px){
.auth-split{
grid-template-columns:1fr;min-height:0;gap:0;}
.auth-split-visual{
display:none;}
.auth-split-form{
min-height:min(640px,calc(100dvh - 32px));border-radius:24px;}
.auth-page{
padding:12px;}
}
.seam-avatar{
display:inline-grid;place-items:center;width:88px;height:88px;padding:0;border:0;border-radius:999px;overflow:hidden;background:#111;flex:none;position:relative;cursor:pointer;appearance:none;-webkit-appearance:none}
.seam-avatar__face{
display:block;width:100%;height:100%;background-image:var(--seam-avatar);background-repeat:no-repeat;background-size:300% 300%;background-position:50% 50%;transform-origin:center center}
.account-avatar.seam-avatar{
width:88px;height:88px}
.account-avatar-preview.seam-avatar{
width:72px;height:72px;border:2px solid color-mix(in srgb,var(--seam-accent,#d0b2ff) 30%,var(--border));box-shadow:0 8px 22px color-mix(in srgb,var(--seam-accent,#d0b2ff) 16%,transparent)}
.btn-account-avatar.seam-avatar{
width:28px;height:28px;cursor:pointer}
.btn-account-nav{
position:relative;display:inline-flex;align-items:center;z-index:130;}
.btn-account-nav-trigger{
display:inline-flex;align-items:center;gap:8px;max-width:160px;min-height:36px;padding:0 8px 0 4px;border-radius:999px;color:var(--foreground);text-decoration:none;}
.btn-account-nav-name{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;}
.btn-account-nav-caret{
flex:none;opacity:.65;transition:transform .2s ease}
.btn-account-nav:hover .btn-account-nav-caret,.btn-account-nav:focus-within .btn-account-nav-caret{
transform:rotate(180deg)}
.btn-account-nav-panel{
display:none;position:absolute;top:calc(100% - 4px);right:0;z-index:140;min-width:188px;margin:0;padding:14px 8px 8px;list-style:none;background:transparent;border:0;box-shadow:none;}
.btn-account-nav-panel::before{
content:"";position:absolute;top:10px;left:0;right:0;bottom:0;border-radius:14px;background:var(--surface-elevated);border:1px solid var(--border);box-shadow:0 16px 40px rgba(0,0,0,.28);pointer-events:none;}
html[data-theme=light] .btn-account-nav-panel::before{
box-shadow:0 12px 32px rgba(0,0,0,.12)}
.btn-account-nav:hover .btn-account-nav-panel,.btn-account-nav:focus-within .btn-account-nav-panel{
display:block}
.btn-account-nav-link{
position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:9px 12px;border-radius:10px;color:var(--foreground);font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap;}
.btn-account-nav-link:hover,.btn-account-nav-link:focus-visible{
background:var(--nav-hover-bg)}
.btn-account-nav-link--logout{
margin-top:4px;color:var(--muted-foreground);font-weight:550;}
html[dir=rtl] .btn-account-nav-panel{
right:auto;left:0}
.btn-account-nav>a{
color:inherit;text-decoration:none}
.account-avatar-thumb.seam-avatar{
width:100%;max-width:56px;aspect-ratio:1;height:auto;cursor:inherit;pointer-events:none}
.seam-avatar.is-react-pop .seam-avatar__face{
animation:seam-avatar-pop .42s ease}
.seam-avatar.is-react-tilt .seam-avatar__face{
animation:seam-avatar-tilt .48s ease}
.seam-avatar.is-react-jump .seam-avatar__face{
animation:seam-avatar-jump .46s ease}
@keyframes seam-avatar-pop{
0%{
transform:scale(1)}
35%{
transform:scale(.82)}
70%{
transform:scale(1.08)}
100%{
transform:scale(1)}
}
@keyframes seam-avatar-tilt{
0%{
transform:rotate(0) scale(1)}
40%{
transform:rotate(-14deg) scale(1.05)}
100%{
transform:rotate(0) scale(1)}
}
@keyframes seam-avatar-jump{
0%{
transform:translateY(0)}
40%{
transform:translateY(-8px) scale(1.04)}
100%{
transform:translateY(0) scale(1)}
}
.account-avatar-grid{
grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:720px){
.account-avatar-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
.seam-avatar.is-react-pop .seam-avatar__face,.seam-avatar.is-react-tilt .seam-avatar__face,.seam-avatar.is-react-jump .seam-avatar__face{
animation:none}
}
body[data-page=home] .hero.hero-lattice{
--hero-h:600px;height:auto;min-height:calc(var(--hero-h) + var(--site-nav-h));align-items:flex-start;justify-content:center;text-align:left;direction:ltr;padding-bottom:48px;overflow:visible;background:#d6d0f3;}
html[data-theme=dark] body[data-page=home] .hero.hero-lattice{
background:#0b0d11;}
.hero.hero-lattice .hero-visual{
position:absolute;top:0;right:0;bottom:0;left:auto;z-index:0;width:50%;height:100%;}
.hero.hero-lattice .hero-lattice-canvas,.hero.hero-lattice .hero-scene-pane{
position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;visibility:hidden;transform:translate3d(32px,0,0);transition:opacity 460ms cubic-bezier(0.22,1,0.36,1),transform 460ms cubic-bezier(0.22,1,0.36,1),visibility 460ms;pointer-events:none;z-index:0;}
.hero.hero-lattice .hero-scene-pane.is-on{
opacity:1;visibility:visible;transform:none;pointer-events:auto;z-index:1;}
.hero.hero-lattice .hero-lattice-canvas{
z-index:0;pointer-events:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 220px,#000 calc(100% - 72px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 88px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 220px,#000 calc(100% - 72px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 88px),transparent);mask-composite:intersect;}
.hero.hero-lattice .hero-scene-slot{
overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 220px,#000 calc(100% - 72px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 88px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 220px,#000 calc(100% - 72px),transparent),linear-gradient(to bottom,transparent,#000 48px,#000 calc(100% - 88px),transparent);mask-composite:intersect;}
.hero.hero-lattice .hero-scene-slot::before{
content:"";position:absolute;width:72%;height:84%;border-radius:50%;filter:blur(36px);animation:hero-slot-drift 14s ease-in-out infinite alternate;}
.hero.hero-lattice .hero-scene-slot-2{
background:linear-gradient(165deg,#d5e3f4,#edf3ea 58%,#f3e7dc);}
.hero.hero-lattice .hero-scene-slot-2::before{
left:18%;top:16%;background:radial-gradient(circle,rgba(96,168,214,0.55),transparent 68%);}
.hero.hero-lattice .hero-scene-slot-3{
background:linear-gradient(200deg,#f6ece4,#f3d7c8 52%,#e7eef6);}
.hero.hero-lattice .hero-scene-slot-3::before{
right:12%;bottom:10%;background:radial-gradient(circle,rgba(232,112,64,0.42),transparent 70%);animation-duration:16s;}
html[data-theme=dark] .hero.hero-lattice .hero-scene-slot-2{
background:linear-gradient(165deg,#172033,#1a2830 55%,#241c18);}
html[data-theme=dark] .hero.hero-lattice .hero-scene-slot-2::before{
background:radial-gradient(circle,rgba(88,150,210,0.45),transparent 68%);}
html[data-theme=dark] .hero.hero-lattice .hero-scene-slot-3{
background:linear-gradient(200deg,#241910,#2a221c 48%,#161c28);}
html[data-theme=dark] .hero.hero-lattice .hero-scene-slot-3::before{
background:radial-gradient(circle,rgba(232,112,64,0.38),transparent 70%);}
@keyframes hero-slot-drift{
from{
transform:translate3d(0,0,0)}
to{
transform:translate3d(8%,10%,0)}
}
.hero.hero-lattice .hero-content{
position:relative;z-index:1;display:flex;flex-direction:column;flex:1;align-items:flex-start;justify-content:center;width:50%;max-width:none;min-height:0;margin:0;padding:0 28px 0 clamp(108px,16vw,220px);box-sizing:border-box;}
.hero.hero-lattice .hero-copy{
position:relative;align-items:stretch;width:100%;max-width:none;gap:0;padding:0;border:0;border-radius:0;background:none;background-image:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left;overflow:visible;}
.hero.hero-lattice .hero-copy::after{
content:none}
html[data-theme=light] .hero.hero-lattice .hero-copy{
border:0;background:none;background-image:none;box-shadow:none;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.hero.hero-lattice .hero-copy,html[data-theme=light] .hero.hero-lattice .hero-copy{
background:none}
}
.hero.hero-lattice .hero-kicker{
width:100%;margin:0 0 24px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0;text-align:left;color:#f3f3f3;}
html[data-theme=light] .hero.hero-lattice .hero-kicker{
color:#2a2a2e}
.hero.hero-lattice h1.hero-title{
display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0.08em 0;width:auto;max-width:100%;margin:0;font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.25;letter-spacing:0;white-space:normal;text-align:left;text-wrap:balance;word-break:normal;overflow-wrap:anywhere;line-break:auto;color:#ffffff;-webkit-text-fill-color:#ffffff;background-image:none;animation:none;}
html[data-theme=light] .hero.hero-lattice h1.hero-title{
color:#121214;-webkit-text-fill-color:#121214;}
.hero.hero-lattice .hero-title-line{
display:inline;color:inherit;-webkit-text-fill-color:inherit;background-image:none;white-space:normal;overflow-wrap:anywhere;}
body[data-lang=zh] .hero.hero-lattice h1.hero-title,body[data-lang="zh-tw"] .hero.hero-lattice h1.hero-title,body[data-lang=ja] .hero.hero-lattice h1.hero-title,body[data-lang=ko] .hero.hero-lattice h1.hero-title{
word-break:keep-all;line-break:strict;overflow-wrap:normal;}
.hero.hero-lattice .hero-title-line + .hero-title-line::before{
content:none}
.hero.hero-lattice .hero-cycle{
display:inline-grid;align-self:center;margin-inline:8px;overflow:hidden;border-radius:12px;vertical-align:middle;}
.hero.hero-lattice .hero-cycle-word{
position:relative;grid-area:1 / 1;display:flex;align-items:center;justify-content:center;padding:6px 16px;border-radius:14px;font-weight:600;letter-spacing:0.04em;white-space:nowrap;color:#ffffff;-webkit-text-fill-color:#ffffff;background:#ff6314;opacity:0;transform:translateY(110%) scale(0.94);transition:opacity 500ms cubic-bezier(0.22,1,0.36,1),transform 500ms cubic-bezier(0.22,1,0.36,1);}
.hero.hero-lattice .hero-cycle-word[data-tone="1"]{
background:#3557f5}
.hero.hero-lattice .hero-cycle-word[data-tone="2"]{
background:#0f9a62}
html[data-theme=dark] .hero.hero-lattice .hero-cycle-word{
color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;background:#3a4252;}
html[data-theme=dark] .hero.hero-lattice .hero-cycle-word[data-tone="1"]{
background:#4a5874}
html[data-theme=dark] .hero.hero-lattice .hero-cycle-word[data-tone="2"]{
background:#4a4540}
html[data-theme=dark] .hero.hero-lattice .hero-cycle-label{
color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;}
html[data-theme=dark] .hero.hero-lattice .hero-cycle-word::after{
background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,0.22) 50%,transparent 72%);}
.hero.hero-lattice .hero-cycle-word.is-on{
opacity:1;transform:none;z-index:1;}
.hero.hero-lattice .hero-cycle-word.is-leave{
opacity:0;transform:translateY(-110%) scale(0.94);z-index:0;}
.hero.hero-lattice .hero-cycle-word.is-reset{
transition:none}
.hero.hero-lattice .hero-cycle-label{
position:relative;z-index:1;font-size:clamp(22px,2.4vw,34px);line-height:1.2;color:#ffffff;-webkit-text-fill-color:#ffffff;max-width:min(12em,70vw);overflow:hidden;text-overflow:ellipsis;}
.hero.hero-lattice .hero-cycle-word::after{
content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,0.45) 50%,transparent 72%);transform:translateX(-130%);pointer-events:none;}
.hero.hero-lattice .hero-cycle-word.is-on::after{
animation:hero-cycle-sheen 700ms cubic-bezier(0.22,1,0.36,1) 80ms;}
@keyframes hero-cycle-sheen{
to{
transform:translateX(130%)}
}
.hero.hero-lattice .hero-title-rule{
display:block;width:clamp(96px,28%,148px);height:1px;margin:10px 0 0;border:0;border-radius:0;background:linear-gradient(90deg,rgba(255,255,255,0.92),transparent);transform:none;transform-origin:left center;animation:none;}
html[data-theme=light] .hero.hero-lattice .hero-title-rule{
background:linear-gradient(90deg,rgba(18,20,26,0.55),transparent);}
html[data-theme=dark] .hero.hero-lattice .hero-title-rule,html[data-theme=dark] .hero.hero-fintar .hero-title-rule{
background:linear-gradient(90deg,rgba(243,244,247,0.85),transparent);}
html[dir=rtl] .hero.hero-lattice .hero-title-rule{
transform-origin:right center;background:linear-gradient(270deg,rgba(255,255,255,0.92),transparent);}
html[dir=rtl][data-theme=light] .hero.hero-lattice .hero-title-rule{
background:linear-gradient(270deg,rgba(18,20,26,0.55),transparent);}
.hero.hero-lattice .hero-sub{
width:100%;max-width:min(40rem,100%);margin:24px 0 0;word-break:normal;overflow-wrap:anywhere;line-break:auto;font-size:clamp(15px,1.2vw,18px);font-weight:400;line-height:1.55;letter-spacing:0;text-align:left;white-space:normal;text-wrap:pretty;color:#f2f2f2;}
body[data-lang=zh] .hero.hero-lattice .hero-sub,body[data-lang="zh-tw"] .hero.hero-lattice .hero-sub,body[data-lang=ja] .hero.hero-lattice .hero-sub,body[data-lang=ko] .hero.hero-lattice .hero-sub{
word-break:keep-all;line-break:strict;overflow-wrap:normal;}
html[data-theme=light] .hero.hero-lattice .hero-sub{
color:#242428}
html[dir=rtl] .hero.hero-lattice .hero-sub{
text-align:right}
.seam-sr{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:no-preference){
.seam-rise.seam-await:not(.is-text-in) .seam-char{
opacity:0;}
.seam-rise.seam-await:not(.is-text-in) .hero-cycle,.seam-rise.seam-await:not(.is-text-in) .hero-cta-row,.seam-rise.seam-await:not(.is-text-in) .pricing-hero-cta,.seam-rise.seam-await:not(.is-text-in) .seam-poster-hero-cta,.seam-rise.seam-await:not(.is-text-in) .account-hero-actions,.seam-rise.seam-await:not(.is-text-in) .account-hero-meta,.seam-rise.seam-await:not(.is-text-in) .empty-state-links,.seam-rise.seam-await:not(.is-text-in) .article-share,.seam-rise.seam-await:not(.is-text-in) .sale-banner,.seam-rise.seam-await:not(.is-text-in) .pricing-pay-chips,.seam-rise.seam-await:not(.is-text-in) .pricing-pay-warn{
opacity:0;}
.seam-rise.is-text-in .seam-word{
display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em;line-height:inherit;}
.seam-rise.is-text-in .seam-char{
display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;opacity:1;--rise:110%;--rot:4deg;animation:seam-char-rise .85s cubic-bezier(0.16,1,0.3,1) backwards;animation-delay:calc(50ms + var(--ci,0) * 20ms);}
.seam-rise.is-text-in .hero-kicker .seam-char,.seam-rise.is-text-in .contact-eyebrow .seam-char,.seam-rise.is-text-in .pricing-eyebrow .seam-char,.seam-rise.is-text-in .account-eyebrow .seam-char{
--rise:100%;--rot:3deg;animation-duration:.7s;animation-delay:calc(var(--ci,0) * 16ms);}
.seam-rise.is-text-in .hero-sub .seam-char,.seam-rise.is-text-in .contact-lead .seam-char,.seam-rise.is-text-in .pricing-lead .seam-char,.seam-rise.is-text-in .account-lead .seam-char,.seam-rise.is-text-in .auth-page-lead .seam-char,.seam-rise.is-text-in.inner-hero>p:not(.contact-eyebrow) .seam-char,.seam-rise.is-text-in .seam-hero-copy .contact-lead .seam-char{
--rise:100%;--rot:2deg;animation-duration:.7s;animation-delay:calc(.45s + var(--ci,0) * 40ms);}
.seam-rise.is-text-in .hero-cycle,.seam-rise.is-text-in .hero-cta-row,.seam-rise.is-text-in .pricing-hero-cta,.seam-rise.is-text-in .seam-poster-hero-cta,.seam-rise.is-text-in .account-hero-actions,.seam-rise.is-text-in .account-hero-meta,.seam-rise.is-text-in .empty-state-links,.seam-rise.is-text-in .article-share,.seam-rise.is-text-in .sale-banner,.seam-rise.is-text-in .pricing-pay-chips,.seam-rise.is-text-in .pricing-pay-warn{
opacity:1;animation:seam-fade-scale .8s cubic-bezier(0.16,1,0.3,1) backwards;animation-delay:.9s;--from-scale:.94;}
.seam-rise.is-text-in .hero-cycle{
animation-delay:.32s;--from-scale:.92}
.seam-rise.is-text-in .sale-banner{
animation-delay:.12s}
.seam-rise.is-settled .seam-char,.seam-rise.is-settled .hero-cycle,.seam-rise.is-settled .hero-cta-row,.seam-rise.is-settled .pricing-hero-cta,.seam-rise.is-settled .seam-poster-hero-cta,.seam-rise.is-settled .sale-banner,.seam-rise.is-settled .pricing-pay-chips,.seam-rise.is-settled .pricing-pay-warn{
will-change:auto;}
}
@keyframes seam-char-rise{
from{
opacity:0;transform:translateY(var(--rise,110%)) rotate(var(--rot,4deg))}
to{
opacity:1;transform:translateY(0) rotate(0deg)}
}
@keyframes seam-fade-scale{
from{
opacity:0;transform:scale(var(--from-scale,.92))}
to{
opacity:1;transform:none}
}
@keyframes seam-char-slide{
from{
opacity:0;transform:translate3d(var(--slide,-40%),0,0)}
to{
opacity:1;transform:translate3d(0,0,0)}
}
.hero.hero-lattice .hero-cta-row{
justify-content:flex-start;align-items:center;flex-direction:row;width:100%;max-width:none;margin-top:36px;margin-inline:0;gap:12px;}
.hero.hero-lattice .hero-scenes{
display:flex;align-items:center;width:100%;margin-top:40px;}
.hero.hero-lattice .hero-scene{
position:relative;margin:0;padding:8px 4px 16px;border:0;background:none;color:rgba(255,255,255,0.38);font-family:inherit;font-weight:600;font-size:36px;line-height:40px;font-variant-numeric:tabular-nums;letter-spacing:0.04em;cursor:pointer;transition:color 320ms cubic-bezier(0.22,1,0.36,1),transform 320ms cubic-bezier(0.22,1,0.36,1);}
.hero.hero-lattice .hero-scene::after{
content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:currentColor;transform:scaleX(0.2);transform-origin:left center;opacity:0;transition:transform 380ms cubic-bezier(0.22,1,0.36,1),opacity 380ms cubic-bezier(0.22,1,0.36,1);}
.hero.hero-lattice .hero-scene:hover{
color:rgba(255,255,255,0.72)}
.hero.hero-lattice .hero-scene.is-active{
color:#ffffff;transform:translateY(-2px)}
.hero.hero-lattice .hero-scene.is-active::after{
opacity:1;transform:scaleX(1)}
.hero.hero-lattice .hero-scene:active{
transform:scale(0.96)}
.hero.hero-lattice .hero-scene:focus-visible{
outline:2px solid #ffffff;outline-offset:4px;border-radius:6px}
.hero.hero-lattice .hero-scene-sep{
width:1px;height:24px;margin:0 24px;background:rgba(255,255,255,0.28);}
html[data-theme=light] .hero.hero-lattice .hero-scene{
color:rgba(18,18,20,0.34)}
html[data-theme=light] .hero.hero-lattice .hero-scene:hover{
color:rgba(18,18,20,0.62)}
html[data-theme=light] .hero.hero-lattice .hero-scene.is-active{
color:#121214}
html[data-theme=light] .hero.hero-lattice .hero-scene:focus-visible{
outline-color:#121214}
html[data-theme=light] .hero.hero-lattice .hero-scene-sep{
background:rgba(18,18,20,0.22)}
html[dir=rtl] .hero.hero-lattice .hero-scenes{
direction:rtl}
.hero.hero-lattice .hero-cta-row .btn-unlimited,.hero.hero-lattice .hero-cta-row .btn-hero-secondary{
display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:0;max-width:none;height:auto;min-height:48px;padding:12px 24px;font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;border-radius:999px;white-space:nowrap;box-shadow:none;filter:none;text-decoration:none;transition:background-color 300ms cubic-bezier(0.22,1,0.36,1),color 300ms cubic-bezier(0.22,1,0.36,1),border-color 300ms cubic-bezier(0.22,1,0.36,1),transform 300ms cubic-bezier(0.22,1,0.36,1);}
.hero.hero-lattice .btn-unlimited{
color:#121214;background:#ffffff;background-image:none;border:1px solid #ffffff;}
.hero.hero-lattice .btn-unlimited::after{
display:none}
.hero.hero-lattice .btn-unlimited .btn-arrow{
display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;margin:0;border-radius:999px;background:#121214;color:#ffffff;-webkit-text-fill-color:#ffffff;font-size:0;line-height:0;animation:none;transition:transform 300ms cubic-bezier(0.22,1,0.36,1);}
.hero.hero-lattice .btn-unlimited .btn-arrow svg{
display:block}
.hero.hero-lattice .btn-unlimited:hover .btn-arrow{
animation:none;transform:translateX(2px);}
.hero.hero-lattice .btn-unlimited:hover{
color:#121214;background:#f4f4f5;background-image:none;border-color:#f4f4f5;transform:translateY(-2px);filter:none;box-shadow:none;}
.hero.hero-lattice .btn-unlimited:active{
transform:scale(0.98)}
.hero.hero-lattice .btn-unlimited:focus-visible{
outline:2px solid #ffffff;outline-offset:2px}
.hero.hero-lattice .btn-hero-secondary{
color:#ffffff;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.28);-webkit-text-fill-color:#ffffff;}
.hero.hero-lattice .btn-hero-secondary:hover{
color:#ffffff;background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.4);transform:translateY(-2px);}
.hero.hero-lattice .btn-hero-secondary:active{
transform:scale(0.98)}
.hero.hero-lattice .btn-hero-secondary:focus-visible{
outline:2px solid #ffffff;outline-offset:2px}
html[data-theme=light] .hero.hero-lattice .btn-unlimited{
color:#ffffff;background:#121214;background-image:none;border-color:#121214;-webkit-text-fill-color:#ffffff;}
html[data-theme=light] .hero.hero-lattice .btn-unlimited .btn-arrow{
background:#ffffff;color:#121214;-webkit-text-fill-color:#121214;}
html[data-theme=light] .hero.hero-lattice .btn-unlimited:hover{
color:#ffffff;background:#272727;background-image:none;border-color:#272727;}
html[data-theme=light] .hero.hero-lattice .btn-unlimited:focus-visible{
outline-color:#121214}
html[data-theme=light] .hero.hero-lattice .btn-hero-secondary{
color:#121214;background:rgba(255,255,255,0.72);border-color:rgba(18,18,20,0.12);-webkit-text-fill-color:#121214;}
html[data-theme=light] .hero.hero-lattice .btn-hero-secondary:hover{
color:#121214;background:#ffffff;border-color:rgba(18,18,20,0.2);}
html[data-theme=light] .hero.hero-lattice .btn-hero-secondary:focus-visible{
outline-color:#121214}
html[dir=rtl] .hero.hero-lattice .hero-copy{
direction:rtl;text-align:right;align-items:flex-end}
html[dir=rtl] .hero.hero-lattice .hero-kicker,html[dir=rtl] .hero.hero-lattice h1.hero-title,html[dir=rtl] .hero.hero-lattice .hero-sub{
text-align:right}
html[dir=rtl] .hero.hero-lattice .hero-cta-row{
justify-content:flex-end}
@media (prefers-reduced-motion:reduce){
.hero.hero-lattice .hero-copy,.hero.hero-lattice .hero-copy:hover{
transform:none;transition:none}
.hero.hero-lattice .hero-scene-slot::before{
animation:none}
.hero.hero-lattice .hero-scene,.hero.hero-lattice .hero-scene::after,.hero.hero-lattice .hero-scene-pane,.hero.hero-lattice .hero-cycle-word{
transition:none}
.hero.hero-lattice .hero-scene.is-active,.hero.hero-lattice .hero-scene:active,.hero.hero-lattice .hero-cycle-word,.hero.hero-lattice .hero-cycle-word.is-on,.hero.hero-lattice .hero-cycle-word.is-leave{
transform:none}
.hero.hero-lattice .hero-cycle-word.is-on::after,.hero.hero-lattice .hero-title-rule{
animation:none;transform:none}
.hero.hero-lattice .btn-unlimited:hover,.hero.hero-lattice .btn-hero-secondary:hover,.hero.hero-lattice .btn-unlimited:active,.hero.hero-lattice .btn-hero-secondary:active,.hero.hero-lattice .btn-unlimited:hover .btn-arrow{
transform:none;animation:none}
}
@media (max-width:900px){
body[data-page=home] .hero.hero-lattice{
--hero-h:auto;min-height:0;height:auto;padding-bottom:24px;padding-left:0;padding-right:0;overflow:hidden;background:#f3f4f7;}
html[data-theme=dark] body[data-page=home] .hero.hero-lattice{
background:#0b0d11}
body[data-page=home] .hero.hero-lattice::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,0.2);-webkit-backdrop-filter:none;backdrop-filter:none;}
html[data-theme=dark] body[data-page=home] .hero.hero-lattice::after{
background:rgba(16,22,31,0.28);}
.hero.hero-lattice .hero-visual{
position:absolute;inset:-32px;z-index:0;width:auto;height:auto;aspect-ratio:auto;min-height:0;max-height:none;filter:blur(7px);-webkit-filter:blur(7px);}
.hero.hero-lattice .hero-lattice-canvas,.hero.hero-lattice .hero-scene-slot{
-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - 16px),transparent);-webkit-mask-composite:source-over;mask-composite:add;}
.hero.hero-lattice .hero-content{
position:relative;z-index:2;flex:0 0 auto;width:100%;max-width:none;min-height:0;margin-left:0;justify-content:flex-start;padding:8px var(--page-gutter,20px) 8px calc(var(--page-gutter,20px) + 12px);}
.hero.hero-lattice .hero-cta-row{
width:auto;max-width:100%;flex-direction:row;flex-wrap:wrap;align-items:center}
.hero.hero-lattice .hero-cta-row .btn-unlimited,.hero.hero-lattice .hero-cta-row .btn-hero-secondary{
width:auto;max-width:none}
.hero.hero-lattice .btn-hero-secondary{
background:rgba(12,16,24,0.55);border-color:rgba(255,255,255,0.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
html[data-theme=light] .hero.hero-lattice .btn-hero-secondary{
background:rgba(255,255,255,0.82);border-color:rgba(18,18,20,0.16);}
}
@media (max-width:760px){
.hero.hero-lattice .hero-copy{
padding:0;border-radius:0}
.hero.hero-lattice h1.hero-title{
font-size:clamp(20px,6.2vw,28px);line-height:1.25;white-space:normal}
.hero.hero-lattice .hero-cycle-label{
font-size:1.2em;line-height:1.2}
.hero.hero-lattice .hero-cycle-word{
padding:4px 12px}
}
@media (min-width:901px){
body[data-page=home] .hero.hero-lattice::after{
content:none}
.hero.hero-lattice .hero-visual{
filter:none;-webkit-filter:none;transform:none}
}
/* Override base .filters-bar{display:flex} — flex shrink-wrap kept the grid content-width on the left */
.filters-bar.filters-bar--catalog{
display:block;width:100%;max-width:100%;padding:14px 0 12px;position:relative;z-index:4;animation:fade-up .65s cubic-bezier(0.22,1,0.36,1) .45s both}
/* Match allan.xin: equal side rails + wider center (1fr 3fr 1fr) */
.filters-bar--catalog .filters-bar-main{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);align-items:center;gap:24px;width:100%;min-width:0;min-height:36px;box-sizing:border-box}
.filters-bar--catalog .filter-menu--sort{
justify-self:start;width:fit-content;z-index:3}
.filters-bar--catalog .filters-bar-cats{
justify-self:stretch;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;justify-content:safe center;gap:16px;width:100%;max-width:100%;min-width:0;padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters-bar--catalog .filters-bar-cats::-webkit-scrollbar{
display:none}
.filters-bar--catalog .filters-bar-actions{
justify-self:end;display:inline-flex;align-items:center;gap:8px;width:fit-content;z-index:3}
.filters-bar--catalog .filter-menu{
position:relative;margin:0;border:0;padding:0;min-width:0}
.filters-bar--catalog .filter-menu-trigger,.filters-bar--catalog .filter-action-btn{
list-style:none;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-height:36px;padding:0 16px;border-radius:999px;border:1px solid color-mix(in srgb,var(--foreground) 12%,transparent);background:color-mix(in srgb,var(--surface-elevated,#fff) 96%,transparent);color:var(--foreground);font:inherit;font-size:13px;font-weight:500;line-height:1;user-select:none;white-space:nowrap;flex:0 0 auto;box-shadow:0 1px 2px color-mix(in srgb,#000 4%,transparent);transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
/* Center categories: text links; only active gets soft pill (allan.xin) */
.filters-bar--catalog .filter-cat-chip{
list-style:none;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-height:36px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:color-mix(in srgb,var(--foreground) 58%,transparent);font:inherit;font-size:13px;font-weight:500;line-height:1;user-select:none;white-space:nowrap;flex:0 0 auto;box-shadow:none;transition:background .18s ease,color .18s ease}
.filters-bar--catalog .filter-menu-trigger::-webkit-details-marker,.filters-bar--catalog .filter-action-btn--tone::-webkit-details-marker{
display:none}
.filters-bar--catalog .filter-menu-label{
max-width:9.5em;overflow:hidden;text-overflow:ellipsis}
.filters-bar--catalog .filter-menu-chevron{
width:14px;height:14px;flex:0 0 auto;opacity:.5;transition:transform .22s cubic-bezier(0.22,1,0.36,1)}
.filters-bar--catalog .filter-menu[open]>.filter-menu-trigger .filter-menu-chevron{
transform:rotate(180deg)}
.filters-bar--catalog .filter-menu[open]>.filter-menu-trigger,.filters-bar--catalog .filter-menu--tone[open]>.filter-action-btn,.filters-bar--catalog .filter-action-btn:hover,.filters-bar--catalog .filter-menu-trigger:hover{
border-color:color-mix(in srgb,var(--foreground) 22%,transparent);background:var(--secondary);box-shadow:0 2px 8px color-mix(in srgb,#000 6%,transparent)}
.filters-bar--catalog .filter-cat-chip:hover{
color:var(--foreground);background:color-mix(in srgb,var(--foreground) 6%,transparent)}
.filters-bar--catalog .filter-cat-chip.is-on,.filters-bar--catalog .filter-cat-chip.is-on:hover{
background:color-mix(in srgb,var(--foreground) 9%,transparent);color:var(--foreground);font-weight:600;border:0;box-shadow:none}
.filters-bar--catalog .filter-action-btn--tone{
position:relative;gap:7px}
.filters-bar--catalog .filter-action-icon{
width:14px;height:14px;flex:0 0 auto;opacity:.78}
.filters-bar--catalog .filter-tone-badge{
display:inline-flex;align-items:center;margin-left:2px}
.filters-bar--catalog .filter-tone-badge .tone-dot{
width:12px;height:12px;border:0;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 18%,transparent)}
/* Sort dropdown */
.filters-bar--catalog .filter-menu-panel{
position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:max(100%,200px);padding:6px;border-radius:18px;border:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);background:var(--surface-elevated,#fff);box-shadow:0 16px 40px color-mix(in srgb,#000 14%,transparent),0 2px 6px color-mix(in srgb,#000 4%,transparent);display:flex;flex-direction:column;gap:2px}
.filters-bar--catalog .filter-menu-option{
display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin:0;padding:11px 12px;border:0;border-radius:12px;background:transparent;color:var(--foreground);font:inherit;font-size:13px;font-weight:550;line-height:1.2;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease}
.filters-bar--catalog .filter-menu-option:hover{
background:color-mix(in srgb,var(--foreground) 5%,transparent)}
.filters-bar--catalog .filter-menu-option.is-on{
background:color-mix(in srgb,var(--foreground) 7%,transparent);font-weight:650}
.filters-bar--catalog .filter-menu-check{
width:15px;height:15px;flex:0 0 auto;opacity:0;color:var(--foreground)}
.filters-bar--catalog .filter-menu-option.is-on .filter-menu-check{
opacity:1}
/* Tone dropdown under Filter on the right */
.filters-bar--catalog .filters-bar-main,.filters-bar--catalog .filters-bar-actions,.filters-bar--catalog .filter-menu--tone{
overflow:visible}
.filters-bar--catalog .filter-tone-panel{
position:absolute;top:calc(100% + 8px);right:0;left:auto;z-index:40;display:none;visibility:hidden;pointer-events:none;width:max-content;max-width:min(280px,calc(100vw - 24px));padding:10px;border-radius:18px;border:1px solid color-mix(in srgb,var(--foreground) 8%,transparent);background:var(--surface-elevated,#fff);box-shadow:0 16px 40px color-mix(in srgb,#000 14%,transparent),0 2px 6px color-mix(in srgb,#000 4%,transparent);box-sizing:border-box}
.filters-bar--catalog .filter-menu--tone:not([open])>.filter-tone-panel{
display:none!important;visibility:hidden!important;pointer-events:none!important}
.filters-bar--catalog .filter-menu--tone[open]>.filter-tone-panel{
display:block;visibility:visible;pointer-events:auto;animation:fade-up .2s cubic-bezier(0.22,1,0.36,1) both}
.filters-bar--catalog .filter-tone-panel .tone-switch{
display:grid!important;grid-template-columns:repeat(6,28px);align-items:center;justify-content:start;gap:6px;flex:none!important;width:auto!important;max-width:100%!important;height:auto!important;min-height:0!important;margin:0;padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important}
.filters-bar--catalog .filter-tone-panel .tone-switch-item{
box-sizing:border-box;height:28px;min-height:28px;width:28px;padding:0;margin:0;border-radius:999px;border:1px solid transparent;background:transparent;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:650;letter-spacing:0;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.filters-bar--catalog .filter-tone-panel .tone-switch-item:not(.is-swatch){
grid-column:1 / -1;width:auto;height:30px;min-height:30px;padding:0 10px;justify-self:stretch;border-radius:999px;border-color:color-mix(in srgb,var(--foreground) 10%,transparent);background:color-mix(in srgb,var(--foreground) 4%,transparent);color:var(--foreground)}
.filters-bar--catalog .filter-tone-panel .tone-switch-item:not(.is-swatch).is-active{
background:var(--foreground);color:var(--background);border-color:transparent}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch{
width:28px;padding:0}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch .tone-dot{
width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 16%,transparent)}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch:hover{
transform:translateY(-1px)}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch.is-active{
border-color:color-mix(in srgb,var(--foreground) 28%,transparent);background:color-mix(in srgb,var(--foreground) 6%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--foreground) 10%,transparent)}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 20%,transparent),0 0 0 2px #fff}
html[data-theme=light] .filters-bar--catalog .filter-menu-trigger,html[data-theme=light] .filters-bar--catalog .filter-action-btn,html[data-theme=light] .filters-bar--catalog .filter-menu-panel,html[data-theme=light] .filters-bar--catalog .filter-tone-panel{
background:#fff;border-color:rgba(18,18,20,.1);box-shadow:0 1px 2px rgba(18,18,20,.04)}
html[data-theme=light] .filters-bar--catalog .filter-menu-panel,html[data-theme=light] .filters-bar--catalog .filter-tone-panel{
box-shadow:0 18px 40px rgba(18,18,20,.12),0 2px 6px rgba(18,18,20,.04)}
html[data-theme=light] .filters-bar--catalog .filter-menu[open]>.filter-menu-trigger,html[data-theme=light] .filters-bar--catalog .filter-menu--tone[open]>.filter-action-btn,html[data-theme=light] .filters-bar--catalog .filter-menu-option.is-on{
background:#f2f2f3}
html[data-theme=light] .filters-bar--catalog .filter-cat-chip{
background:transparent;border:0;box-shadow:none;color:rgba(18,18,20,.48)}
html[data-theme=light] .filters-bar--catalog .filter-cat-chip:hover{
background:rgba(18,18,20,.05);color:#17191f}
html[data-theme=light] .filters-bar--catalog .filter-cat-chip.is-on,html[data-theme=light] .filters-bar--catalog .filter-cat-chip.is-on:hover{
background:#ececee;color:#17191f;border:0;box-shadow:none}
html[data-theme=light] .filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 2px #fff}
html[data-theme=dark] .filters-bar--catalog .filter-menu-trigger,html[data-theme=dark] .filters-bar--catalog .filter-action-btn,html[data-theme=dark] .filters-bar--catalog .filter-menu-panel,html[data-theme=dark] .filters-bar--catalog .filter-tone-panel,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu-trigger,:root:not([data-theme=light]) .filters-bar--catalog .filter-action-btn,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu-panel,:root:not([data-theme=light]) .filters-bar--catalog .filter-tone-panel{
background:#151515;border-color:rgba(243,244,247,.14)}
html[data-theme=dark] .filters-bar--catalog .filter-menu-panel,html[data-theme=dark] .filters-bar--catalog .filter-tone-panel,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu-panel,:root:not([data-theme=light]) .filters-bar--catalog .filter-tone-panel{
box-shadow:0 18px 40px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.2)}
html[data-theme=dark] .filters-bar--catalog .filter-menu[open]>.filter-menu-trigger,html[data-theme=dark] .filters-bar--catalog .filter-menu--tone[open]>.filter-action-btn,html[data-theme=dark] .filters-bar--catalog .filter-menu-option.is-on,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu[open]>.filter-menu-trigger,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu--tone[open]>.filter-action-btn,:root:not([data-theme=light]) .filters-bar--catalog .filter-menu-option.is-on{
background:#232323}
html[data-theme=dark] .filters-bar--catalog .filter-cat-chip,:root:not([data-theme=light]) .filters-bar--catalog .filter-cat-chip{
background:transparent;border:0;box-shadow:none;color:rgba(242,242,242,.55)}
html[data-theme=dark] .filters-bar--catalog .filter-cat-chip:hover,:root:not([data-theme=light]) .filters-bar--catalog .filter-cat-chip:hover{
background:rgba(242,242,242,.06);color:#f2f2f2}
html[data-theme=dark] .filters-bar--catalog .filter-cat-chip.is-on,html[data-theme=dark] .filters-bar--catalog .filter-cat-chip.is-on:hover,:root:not([data-theme=light]) .filters-bar--catalog .filter-cat-chip.is-on{
background:#232323;color:#f2f2f2;border:0;box-shadow:none}
html[data-theme=dark] .filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch.is-active .tone-dot,:root:not([data-theme=light]) .filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch.is-active .tone-dot{
box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 0 2px #1a1e26}
/* Tablet: keep 3-col, tighten spacing */
@media (max-width:1100px){
.filters-bar--catalog .filters-bar-main{
gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,2.8fr) minmax(0,1fr)}
.filters-bar--catalog .filters-bar-cats{
gap:10px}
.filters-bar--catalog .filter-cat-chip{
padding:0 14px}
.filters-bar--catalog .filter-menu-trigger,.filters-bar--catalog .filter-action-btn{
padding:0 14px}
}
/* Phone / small tablet: sort+actions on top, categories below */
@media (max-width:900px){
.filters-bar.filters-bar--catalog{
display:block;width:100%;max-width:100%;padding:10px 0 8px;overflow:visible}
.filters-bar--catalog .filters-bar-main{
display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"sort actions" "cats cats";align-items:center;justify-content:space-between;gap:10px 8px;width:100%;min-width:0}
.filters-bar--catalog .filter-menu--sort{
grid-area:sort;justify-self:start;max-width:100%;min-width:0;z-index:4}
.filters-bar--catalog .filters-bar-actions{
grid-area:actions;justify-self:end;gap:6px;z-index:5}
.filters-bar--catalog .filters-bar-cats{
grid-area:cats;width:100%;max-width:none;justify-content:flex-start;gap:6px;padding-bottom:2px}
.filters-bar--catalog .filter-menu-label{
max-width:min(8.5em,46vw)}
.filters-bar--catalog .filter-menu-trigger,.filters-bar--catalog .filter-action-btn{
height:34px;min-height:34px;padding:0 12px;font-size:12px}
.filters-bar--catalog .filter-cat-chip{
height:32px;min-height:32px;padding:0 12px;font-size:12px}
.filters-bar--catalog .filter-menu-panel{
left:0;right:auto;min-width:min(100vw - 32px,220px);max-width:calc(100vw - 32px)}
.filters-bar--catalog .filter-tone-panel{
top:calc(100% + 6px);right:0;left:auto;width:max-content;max-width:min(260px,calc(100vw - 24px));padding:8px;z-index:60}
.filters-bar--catalog .filter-menu--tone:not([open])>.filter-tone-panel{
display:none!important;visibility:hidden!important;pointer-events:none!important}
.filters-bar--catalog .filter-tone-panel .tone-switch{
grid-template-columns:repeat(6,26px);gap:5px}
.filters-bar--catalog .filter-tone-panel .tone-switch-item,.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch{
width:26px;height:26px;min-height:26px}
.filters-bar--catalog .filter-tone-panel .tone-switch-item:not(.is-swatch){
width:auto;height:28px;min-height:28px}
.filters-bar--catalog .filter-tone-panel .tone-switch-item.is-swatch .tone-dot{
width:14px;height:14px}
}
/* Narrow phones: compact actions, icon-only filter */
@media (max-width:640px){
.filters-bar--catalog .filters-bar-main{
gap:8px 6px}
.filters-bar--catalog .filter-menu-trigger{
padding:0 10px}
.filters-bar--catalog .filter-menu-label{
max-width:min(7.2em,40vw)}
.filters-bar--catalog .filter-action-btn:not(.filter-action-btn--tone){
padding:0 10px}
.filters-bar--catalog .filter-action-btn--tone{
width:34px;min-width:34px;padding:0;gap:0}
.filters-bar--catalog .filter-action-btn--tone>span:not(.filter-tone-badge){
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.filters-bar--catalog .filter-tone-badge{
position:absolute;top:2px;right:2px;margin:0}
.filters-bar--catalog .filter-tone-badge .tone-dot{
width:8px;height:8px}
.filters-bar--catalog .filter-tone-panel{
right:0;max-width:min(240px,calc(100vw - 20px))}
.filters-bar--catalog .filter-cat-chip{
padding:0 10px}
}
.detail-quota-left{
margin-left:8px;font-style:normal;font-size:12px;font-weight:550;opacity:.72;white-space:nowrap}
.footer-icp{
margin-left:12px;color:inherit;opacity:.72}
.footer-icp:hover{
opacity:1}
.search-empty-cats{
display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.search-empty-cats a,.search-result--empty .search-empty-cats a{
display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:inherit;text-decoration:none;font-size:13px}
.search-empty-kicker{
margin:10px 0 0;font-size:12px;opacity:.7}
html[data-theme=light] body[data-page=home],body[data-page=home]{
background:radial-gradient(760px 280px at 50% -56px,rgba(120,140,170,.1),transparent 72%),#f3f4f7;}
html[data-theme=dark] body[data-page=home]{
background:radial-gradient(760px 280px at 50% -56px,rgba(148,168,198,.16),transparent 72%),#0b0d11;}
body[data-page=home] .site-header:not(.is-scrolled),html[data-theme=dark] body[data-page=home] .site-header:not(.is-scrolled){
background:transparent}
body[data-page=home] .hero.hero-lattice.hero-fintar{
position:relative;display:flex;flex-direction:column;justify-content:center;min-height:var(--home-hero-h,clamp(460px,calc(100svh - 200px),640px));height:auto;margin-top:calc(-1 * var(--site-nav-h) - 16px);padding-bottom:0;overflow:hidden;background:#d6d0f3;color:#010206;}
.hero.hero-fintar .hero-fintar-stage{
position:absolute;inset:0;z-index:0}
.hero.hero-fintar .hero-fintar-stage canvas{
display:block;width:100%;height:100%}
.hero.hero-fintar .wash-top,.hero.hero-fintar .wash-left,.hero.hero-fintar .wash-bottom{
position:absolute;z-index:1;pointer-events:none}
.hero.hero-fintar .wash-top{
left:0;right:0;top:-93px;height:199px;background:linear-gradient(#e6e3f6,rgba(230,227,246,0));filter:blur(24px);}
.hero.hero-fintar .wash-left{
left:0;top:-18px;bottom:-36px;width:50%;background:linear-gradient(to left,rgba(230,227,246,0),#e6e3f6);}
.hero.hero-fintar .wash-bottom{
display:none}
.hero.hero-fintar.ui3d .wash-top,.hero.hero-fintar.ui3d .wash-left,.hero.hero-fintar.ui3d .wash-bottom{
visibility:hidden}
.hero.hero-fintar .hero-content{
position:relative;z-index:2;width:min(max-content,54%);max-width:min(36rem,54%);margin-left:clamp(96px,15vw,210px);padding-left:0;padding-right:clamp(16px,2vw,28px);pointer-events:none;}
.hero.hero-fintar .hero-content a,.hero.hero-fintar .hero-content button{
pointer-events:auto}
.hero.hero-fintar .hero-kicker,.hero.hero-fintar h1.hero-title,.hero.hero-fintar .hero-title-line,.hero.hero-fintar .hero-sub,html[data-theme=dark] .hero.hero-fintar .hero-kicker,html[data-theme=dark] .hero.hero-fintar h1.hero-title,html[data-theme=dark] .hero.hero-fintar .hero-title-line,html[data-theme=dark] .hero.hero-fintar .hero-sub{
color:#010206;-webkit-text-fill-color:#010206;}
.hero.hero-fintar h1.hero-title{
flex-wrap:wrap;white-space:normal;width:auto;max-width:100%;font-size:clamp(26px,2.7vw,44px);line-height:1.2;letter-spacing:-0.03em;}
.hero.hero-fintar .hero-title-line{
white-space:normal;overflow-wrap:anywhere}
.hero.hero-fintar .hero-cycle,.hero.hero-fintar .hero-cycle-word,.hero.hero-fintar .hero-cycle-label{
white-space:nowrap;max-width:100%}
.hero.hero-fintar .hero-sub{
width:auto;max-width:min(40rem,100%);white-space:normal;overflow-wrap:anywhere;font-size:clamp(14px,1.15vw,17px);line-height:1.45;color:rgba(1,2,6,0.78);-webkit-text-fill-color:rgba(1,2,6,0.78);}
html[dir=rtl] .hero.hero-fintar .hero-content,html[dir=rtl] .hero.hero-lattice .hero-copy{
text-align:right;}
html[dir=rtl] .hero.hero-fintar h1.hero-title,html[dir=rtl] .hero.hero-lattice h1.hero-title{
justify-content:flex-end;text-align:right;}
html[data-theme=dark] .hero.hero-fintar .hero-sub{
color:rgba(1,2,6,0.78);-webkit-text-fill-color:rgba(1,2,6,0.78)}
.hero.hero-fintar .hero-title-rule{
margin-top:14px;background:linear-gradient(90deg,rgba(1,2,6,0.7),transparent);}
.hero.hero-fintar .hero-cta-row{
margin-top:clamp(26px,2.6vw,36px)}
html[data-theme=light] .hero.hero-fintar .hero-cta-row .btn-unlimited,html[data-theme=dark] .hero.hero-fintar .hero-cta-row .btn-unlimited,.hero.hero-fintar .hero-cta-row .btn-unlimited{
width:auto;min-width:0;max-width:none;height:clamp(50px,4vw,56px);min-height:0;padding:0 clamp(26px,2.3vw,32px);border:0;border-radius:999px;background:rgba(255,255,255,0.5);background-image:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#010206;-webkit-text-fill-color:#010206;font-weight:500;font-size:clamp(15px,1.2vw,17px);letter-spacing:0.01em;box-shadow:none;filter:none;}
html[data-theme=light] .hero.hero-fintar .btn-unlimited .btn-arrow,html[data-theme=dark] .hero.hero-fintar .btn-unlimited .btn-arrow,.hero.hero-fintar .btn-unlimited .btn-arrow{
flex:0 0 auto;width:1.05em;height:1.05em;margin:0;border-radius:0;background:transparent;color:#010206;-webkit-text-fill-color:#010206;}
html[data-theme=light] .hero.hero-fintar .btn-unlimited:hover,html[data-theme=dark] .hero.hero-fintar .btn-unlimited:hover,.hero.hero-fintar .btn-unlimited:hover{
color:#010206;-webkit-text-fill-color:#010206;background:rgba(255,255,255,0.72);background-image:none;border-color:transparent;transform:translateY(-2px) scale(1.035);filter:none;box-shadow:none;}
html[data-theme=light] .hero.hero-fintar .btn-hero-secondary,html[data-theme=dark] .hero.hero-fintar .btn-hero-secondary,.hero.hero-fintar .btn-hero-secondary{
width:auto;min-width:0;max-width:none;height:clamp(50px,4vw,56px);min-height:0;padding:0 8px 0 18px;border:0;border-radius:999px;background:transparent;background-image:none;color:#010206;-webkit-text-fill-color:#010206;font-weight:500;font-size:clamp(15px,1.2vw,17px);box-shadow:none;}
html[data-theme=light] .hero.hero-fintar .btn-hero-secondary:hover,html[data-theme=dark] .hero.hero-fintar .btn-hero-secondary:hover,.hero.hero-fintar .btn-hero-secondary:hover{
color:#010206;-webkit-text-fill-color:#010206;background:transparent;border-color:transparent;transform:translateY(-2px);}
.hero.hero-fintar.ui3d [data-glass],.hero.hero-fintar.ui3d [data-glass]:hover,html[data-theme=light] .hero.hero-fintar.ui3d .btn-unlimited,html[data-theme=light] .hero.hero-fintar.ui3d .btn-unlimited:hover,html[data-theme=dark] .hero.hero-fintar.ui3d .btn-unlimited,html[data-theme=dark] .hero.hero-fintar.ui3d .btn-unlimited:hover{
color:transparent;-webkit-text-fill-color:transparent;background:transparent;background-image:none;border-color:transparent;box-shadow:none;filter:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;}
.hero.hero-fintar.ui3d [data-glass] .btn-arrow{
visibility:hidden}
.hero.hero-fintar .fallback{
position:absolute;inset:0;display:grid;place-items:center;color:#6b5b95;text-align:center}
html[data-theme=dark] body[data-page=home] .hero.hero-lattice.hero-fintar{
background:#0b0d11;color:#f3f4f7;}
html[data-theme=dark] .hero.hero-fintar .hero-kicker,html[data-theme=dark] .hero.hero-fintar h1.hero-title,html[data-theme=dark] .hero.hero-fintar .hero-title-line{
color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;}
html[data-theme=dark] .hero.hero-fintar .hero-sub{
color:rgba(243,244,247,0.74);-webkit-text-fill-color:rgba(243,244,247,0.74);}
html[data-theme=dark] .hero.hero-fintar .hero-title-rule{
background:linear-gradient(90deg,rgba(243,244,247,0.85),transparent);}
html[data-theme=dark] .hero.hero-fintar .wash-top{
background:linear-gradient(#0b0d11,rgba(11,13,17,0));}
html[data-theme=dark] .hero.hero-fintar .wash-left{
background:linear-gradient(to left,rgba(11,13,17,0),#0b0d11);}
html[data-theme=dark] .hero.hero-fintar .wash-bottom{
background:linear-gradient(rgba(11,13,17,0),rgba(11,13,17,0.82) 30%,#0b0d11);}
html[data-theme=dark] .hero.hero-fintar .btn-hero-secondary,html[data-theme=dark] .hero.hero-fintar .btn-hero-secondary:hover{
color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;}
html[data-theme=dark] .hero.hero-fintar:not(.ui3d) .hero-cta-row .btn-unlimited,html[data-theme=dark] .hero.hero-fintar:not(.ui3d) .hero-cta-row .btn-unlimited:hover{
background:rgba(11,13,17,0.72);color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;border:1px solid rgba(243,244,247,0.28);}
html[data-theme=dark] .hero.hero-fintar.ui3d .hero-cta-row .btn-unlimited,html[data-theme=dark] .hero.hero-fintar.ui3d .hero-cta-row .btn-unlimited:hover{
color:transparent !important;-webkit-text-fill-color:transparent !important;background:transparent !important;border-color:transparent !important;box-shadow:none !important;}
html[data-theme=dark] .hero.hero-fintar .btn-unlimited .btn-arrow,html[data-theme=dark] .hero.hero-fintar .btn-unlimited:hover .btn-arrow{
color:#f3f4f7;-webkit-text-fill-color:#f3f4f7;}
@media (max-aspect-ratio:9/10){
.hero.hero-fintar .wash-left{
display:none}
.hero.hero-fintar .wash-bottom{
display:block;left:0;right:0;bottom:0;height:60%;background:linear-gradient(rgba(230,227,246,0),rgba(230,227,246,0.82) 30%,#e6e3f6);}
.hero.hero-fintar .hero-content{
width:max-content;max-width:calc(100% - 32px);margin-top:auto;margin-left:var(--page-gutter,20px);justify-content:flex-end;padding-bottom:clamp(20px,4vh,40px);}
}
@media (max-width:900px){
body[data-page=home] .hero.hero-lattice.hero-fintar{
min-height:var(--home-hero-h-mobile,var(--home-hero-h,min(480px,calc(100svh - 120px))));height:auto;background:#d6d0f3;overflow:hidden;}
body[data-page=home] .hero.hero-fintar::after{
content:none}
.hero.hero-lattice.hero-fintar .hero-content{
width:100%;max-width:none;margin-top:auto;margin-left:0;justify-content:flex-end;padding:12px var(--page-gutter,20px) 28px;box-sizing:border-box;}
.hero.hero-fintar .hero-fintar-copy{
max-width:100%;overflow:visible}
.hero.hero-fintar .hero-content{
width:100%;max-width:100%;margin-left:0;}
.hero.hero-fintar h1.hero-title{
width:100%;max-width:100%;flex-wrap:wrap;white-space:normal;font-size:clamp(18px,5.2vw,30px);line-height:1.25;}
.hero.hero-fintar .hero-title-line{
white-space:normal;overflow-wrap:anywhere}
.hero.hero-fintar .hero-cycle{
margin-inline:4px}
.hero.hero-fintar .hero-cycle-label{
font-size:clamp(16px,4.6vw,28px);line-height:1.2}
.hero.hero-fintar .hero-sub{
width:100%;max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:clamp(14px,3.7vw,16px);line-height:1.55;}
.hero.hero-fintar .hero-cta-row{
width:100%;max-width:100%;flex-wrap:wrap}
.hero.hero-fintar .hero-cta-row .btn-unlimited,.hero.hero-fintar .hero-cta-row .btn-hero-secondary{
max-width:100%}
}
html[data-theme=light] body[data-page=unlimited]{
background:#f3f4f7}
html[data-theme=dark] body[data-page=unlimited]{
background:#0b0d11}
html[data-theme=light] body[data-page=unlimited] .page{
background:radial-gradient(880px 320px at 50% -40px,rgba(120,140,170,.1),transparent 70%),#f3f4f7;}
html[data-theme=dark] body[data-page=unlimited] .page{
background:radial-gradient(880px 300px at 50% -48px,rgba(148,168,198,.16),transparent 70%),#0b0d11;}
.pricing-page{
padding-bottom:56px;color:inherit;}
.pricing-page::selection{
background:rgba(18,18,20,.12);}
html[data-theme=dark] .pricing-page::selection{
background:#2a3140;color:#f3f4f7;}
.pricing-page .pricing-hero{
padding:40px var(--page-gutter) 32px;}
.pricing-page .pricing-hero-inner{
max-width:820px}
.pricing-page .pricing-hero-glow{
height:280px;top:-40px;background:radial-gradient(closest-side,rgba(18,18,20,.05),transparent 72%),radial-gradient(closest-side,rgba(18,18,20,.03),transparent 68%);}
html[data-theme=dark] .pricing-page .pricing-hero-glow{
background:radial-gradient(closest-side,rgba(148,168,198,.18),transparent 70%),radial-gradient(closest-side,rgba(148,168,198,.06),transparent 68%);}
.pricing-page .pricing-eyebrow{
margin:0 0 8px;font-size:13px;font-weight:650;letter-spacing:.04em;text-transform:none;color:#5f6672;}
html[data-theme=dark] .pricing-page .pricing-eyebrow{
color:#7a8290}
.pricing-page .pricing-hero h1,.pricing-page .pricing-title-line{
font-size:clamp(28px,3.2vw,40px);font-weight:750;line-height:1.2;letter-spacing:-.03em;margin:0 0 12px;}
.pricing-page .pricing-hero h1.pricing-title-line{
display:block;flex-wrap:unset;justify-content:unset;align-items:unset;gap:unset;text-align:center;white-space:normal;}
.pricing-page .pricing-hero h1 .grad{
background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;-webkit-text-fill-color:currentColor;}
@media (min-width:721px){
.pricing-page .pricing-title-line{
display:block;flex-wrap:unset;white-space:normal;}
}
.pricing-page .pricing-lead{
max-width:38rem;font-size:15px;line-height:1.6;font-weight:450;color:#5a606c;}
html[data-theme=dark] .pricing-page .pricing-lead{
color:#a9afba}
.pricing-page .pricing-pay-chips{
margin-top:18px;gap:8px}
.pricing-page .pricing-pay-chips li{
padding:6px 12px;font-size:13px;font-weight:600;letter-spacing:0;}
html[data-theme=light] .pricing-page .pricing-pay-chips li{
background:rgba(255,255,255,.82);color:#5a606c;border-color:rgba(18,20,26,.1);}
html[data-theme=dark] .pricing-page .pricing-pay-chips li{
background:rgba(243,244,247,.05);color:#b7bdc8;border-color:rgba(243,244,247,.08);}
.pricing-page .pricing-section-head{
margin-bottom:20px}
.pricing-page .pricing-section-head h2{
font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.03em;line-height:1.25;}
.pricing-page .pricing-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1360px;padding:24px var(--page-gutter) 56px;overflow:visible;align-items:stretch;}
.pricing-page .price-card{
border-radius:20px;padding:28px 22px 22px;gap:16px;background:#fff;border:1px solid rgba(18,20,26,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 14px 32px rgba(18,20,26,.05);overflow:visible;}
.pricing-page .price-card:hover{
transform:translateY(-2px);border-color:rgba(18,20,26,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 20px 40px rgba(18,20,26,.09);}
.pricing-page .price-card.popular{
border-color:rgba(18,20,26,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 16px 36px rgba(18,20,26,.08);background:#fff;}
.pricing-page .price-card.is-current{
border-color:#3d5f8a;outline:none}
.pricing-page .price-card .badge-popular,.pricing-page .price-card .badge-current{
position:absolute;z-index:2;top:0;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);align-self:auto;padding:5px 12px;font-size:12px;font-weight:650;letter-spacing:.02em;text-transform:none;border-radius:999px;white-space:nowrap;pointer-events:none;line-height:1.2;box-shadow:0 6px 16px rgba(18,20,26,.12);}
.pricing-page .price-card .badge-popular{
background:#17191f;color:#f8f9fb}
.pricing-page .price-card .badge-current{
top:auto;bottom:0;transform:translate(-50%,50%);background:#17191f;color:#f8f9fb}
.pricing-page .price-card-top h3{
font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;}
.pricing-page .price-card .desc{
margin:8px 0 0;font-size:13px;line-height:1.5;color:#5f6672;min-height:2.9em;}
.pricing-page .price-card-mid{
padding-top:14px;border-top:1px solid rgba(18,20,26,.08);}
.pricing-page .price-amount{
font-size:36px;font-weight:750;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums;color:#12141a;}
.pricing-page .price-amount .old{
font-size:15px;font-weight:500;margin-right:6px;color:#5f6672;}
.pricing-page .price-interval{
margin-top:6px;font-size:13px;line-height:1.45;color:#5f6672;}
.pricing-page .btn-price{
position:relative;overflow:hidden;height:48px;border-radius:999px;font-size:15px;font-weight:650;background:#17191f;color:#f8f9fb;}
.pricing-page .price-card.popular .btn-price{
background:#17191f;color:#f8f9fb;}
.pricing-page .btn-price::after{
content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none;}
.pricing-page .btn-price:hover{
opacity:1;background:#2a2d36;color:#f8f9fb}
.pricing-page .btn-price:hover::after{
transform:translateX(130%)}
.pricing-page .btn-price:focus-visible{
outline:2px solid #17191f;outline-offset:3px;}
.pricing-page .btn-price:disabled{
opacity:.45}
.pricing-page .price-features{
gap:8px}
.pricing-page .price-features li{
font-size:13px;line-height:1.45;color:#5a606c;}
.pricing-page .price-features li svg{
color:#17191f}
html[data-theme=dark] .pricing-page{
color:#a9afba}
html[data-theme=dark] .pricing-page .price-card{
background:#14171d;border-color:rgba(243,244,247,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.28);color:#a9afba;}
html[data-theme=dark] .pricing-page .price-card:hover{
border-color:rgba(243,244,247,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px rgba(0,0,0,.4);}
html[data-theme=dark] .pricing-page .price-card.popular{
background:#1c212b;border-color:rgba(163,183,206,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 36px rgba(0,0,0,.32);}
html[data-theme=dark] .pricing-page .price-card .badge-popular{
background:#e6e8ed;color:#13151a;box-shadow:0 8px 20px rgba(0,0,0,.35)}
html[data-theme=dark] .pricing-page .price-card.is-current{
border-color:#a3b7ce}
html[data-theme=dark] .pricing-page .price-card .badge-current{
background:#232833;color:#f3f4f7;box-shadow:0 8px 20px rgba(0,0,0,.35)}
html[data-theme=dark] .pricing-page .price-card .desc,html[data-theme=dark] .pricing-page .price-interval,html[data-theme=dark] .pricing-page .price-amount .old{
color:#7a8290}
html[data-theme=dark] .pricing-page .price-amount{
color:#f8f9fb}
html[data-theme=dark] .pricing-page .price-card-mid{
border-top-color:rgba(243,244,247,.08)}
html[data-theme=dark] .pricing-page .price-features li{
color:#a9afba}
html[data-theme=dark] .pricing-page .price-features li svg{
color:#a3b7ce}
html[data-theme=dark] .pricing-page .btn-price,html[data-theme=dark] .pricing-page .price-card.popular .btn-price{
position:relative;overflow:hidden;background:#e6e8ed;color:#13151a;}
html[data-theme=dark] .pricing-page .btn-price::after{
background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);}
html[data-theme=dark] .pricing-page .btn-price:hover{
opacity:1;background:#f4f5f8;color:#13151a;}
html[data-theme=dark] .pricing-page .btn-price:focus-visible{
outline-color:#a3b7ce}
.pricing-page .pricing-credits{
max-width:1360px}
.pricing-page .pricing-credits .pricing-lead{
max-width:42rem;margin:8px auto 0;text-align:center;}
.pricing-page .price-card--credit{
border-radius:18px;padding:22px 18px 18px;gap:14px;}
.pricing-page .price-card--credit h3{
font-size:16px}
.pricing-page .price-card--credit .price-amount{
font-size:28px}
.pricing-page .price-card--credit .desc{
min-height:0}
.pricing-page .price-card--credit .desc,.pricing-page .price-card--credit .price-interval,.pricing-page .price-card--credit .price-features li{
font-size:13px}
.pricing-page .price-card--credit .btn-price{
height:44px;border-radius:999px;font-size:14px;}
.pricing-page .price-card--credit .price-features li:nth-child(n+3){
display:flex}
.pricing-page .pricing-included,.pricing-page .pricing-compare,.pricing-page .pricing-faq,.pricing-page .pricing-footer-cta{
padding:4px var(--page-gutter) 48px;background:transparent;box-shadow:none;border:0;}
html[data-theme=light] .pricing-page .pricing-included,html[data-theme=light] .pricing-page .pricing-compare{
background:transparent;box-shadow:none;border:0;}
.pricing-page .pricing-included-inner,.pricing-page .pricing-compare-inner{
max-width:1360px}
.pricing-page .pricing-included-grid{
grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid rgba(18,18,20,.08);border-radius:16px;background:#fff;overflow:hidden;}
.pricing-page .pricing-included-card{
padding:20px 18px;border:0;border-radius:0;background:transparent;box-shadow:none;}
.pricing-page .pricing-included-card + .pricing-included-card{
border-left:1px solid rgba(18,18,20,.08)}
.pricing-page .pricing-included-card:hover{
transform:none;border-color:rgba(18,18,20,.08)}
.pricing-page .pricing-included-card h3{
margin:0 0 6px;font-size:15px;font-weight:700;}
.pricing-page .pricing-included-card p{
margin:0;font-size:13px;line-height:1.55;color:#5f6672;}
.pricing-page .pricing-compare-table{
max-width:720px;border-radius:16px;background:#fff;border-color:rgba(18,18,20,.08);}
.pricing-page .pricing-compare-row{
grid-template-columns:1.5fr .7fr .7fr;padding:12px 16px;font-size:14px;}
.pricing-page .pricing-compare-row.is-head{
display:grid;font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:#4a4a55;}
.pricing-page .pricing-compare-row .is-yes{
color:#3d5f8a}
html[data-theme=dark] .pricing-page .pricing-included-grid,html[data-theme=dark] .pricing-page .pricing-compare-table{
background:#14171d;border-color:rgba(243,244,247,.08);}
html[data-theme=dark] .pricing-page .pricing-included-card + .pricing-included-card,html[data-theme=dark] .pricing-page .pricing-compare-row{
border-color:rgba(243,244,247,.08)}
html[data-theme=dark] .pricing-page .pricing-included-card p,html[data-theme=dark] .pricing-page .pricing-compare-row.is-head,html[data-theme=dark] .pricing-page .pricing-compare-row .is-mute{
color:#7a8290}
html[data-theme=dark] .pricing-page .pricing-compare-row .is-yes{
color:#a3b7ce}
.pricing-page .pricing-faq .faq-list,html[data-theme=light] .pricing-page .pricing-faq .faq-list{
max-width:720px;border-radius:16px;background:#fff;border-color:rgba(18,18,20,.08);box-shadow:none;}
.pricing-page .pricing-faq .faq-q{
padding:16px 18px;font-size:15px}
.pricing-page .pricing-faq .faq-q:focus-visible{
outline:2px solid #17191f;outline-offset:-2px}
.pricing-page .pricing-faq .faq-a{
padding:0 18px 16px;font-size:14px;line-height:1.6;color:#5a606c}
html[data-theme=dark] .pricing-page .pricing-faq .faq-list{
background:#14171d;border-color:rgba(243,244,247,.08)}
html[data-theme=dark] .pricing-page .pricing-faq .faq-item{
border-color:rgba(243,244,247,.08)}
html[data-theme=dark] .pricing-page .pricing-faq .faq-a{
color:#a9afba}
html[data-theme=dark] .pricing-page .pricing-faq .faq-q:focus-visible{
outline-color:#a3b7ce}
.pricing-page .pricing-footer-cta-inner{
max-width:36rem;padding:8px 0 0;border:0;border-radius:0;background:none;box-shadow:none;}
html[data-theme=light] .pricing-page .pricing-footer-cta-inner{
background:none;box-shadow:none;border:0}
.pricing-page .pricing-footer-cta h2{
font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.03em;}
.pricing-page .pricing-footer-cta p{
font-size:15px;color:#5f6672}
html[data-theme=dark] .pricing-page .pricing-footer-cta p{
color:#a9afba}
.pricing-page .pricing-hero-cta .btn-account{
min-height:44px}
@media (max-width:1100px){
.pricing-page .pricing-grid{
grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.pricing-page .pricing-credits .pricing-grid--credits{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
.pricing-page .pricing-hero{
padding:28px var(--page-gutter) 20px}
.pricing-page .pricing-grid,.pricing-page .pricing-credits .pricing-grid--credits{
grid-template-columns:1fr;max-width:440px;}
.pricing-page .pricing-included-grid{
grid-template-columns:1fr}
.pricing-page .pricing-included-card + .pricing-included-card{
border-left:0;border-top:1px solid rgba(18,18,20,.08);}
html[data-theme=dark] .pricing-page .pricing-included-card + .pricing-included-card{
border-top-color:rgba(243,244,247,.08);}
}
@media (prefers-reduced-motion:reduce){
.pricing-page .price-card,.pricing-page .price-card:hover,.pricing-page .btn-price:active{
transform:none}
.pricing-page .btn-price:hover::after{
transition:none;transform:none}
}
html[data-theme=light]{
--seam-skel-base:#e8eaef;--seam-skel-shine:rgba(255,255,255,.85);}
html[data-theme=dark]{
--seam-skel-base:#1a1e26;--seam-skel-shine:rgba(255,255,255,.16);}
html[data-theme=light] .seam-media.is-skeleton,html[data-theme=light] .skeleton-card .seam-media.is-skeleton,html[data-theme=light] .detail-loading-media,html[data-theme=light] .detail-loading-block{
background:#e8eaef;}
html[data-theme=dark] .seam-media.is-skeleton,html[data-theme=dark] .skeleton-card .seam-media.is-skeleton,html[data-theme=dark] .detail-loading-media,html[data-theme=dark] .detail-loading-block,:root:not([data-theme=light]) .skeleton-card .seam-media.is-skeleton,:root:not([data-theme=light]) .detail-loading-media{
background:#1a1e26;}
.seam-media.is-skeleton::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 22%,var(--seam-skel-shine) 50%,transparent 78%) !important;background-size:220% 100% !important;animation:detail-shimmer 1.6s ease-in-out infinite !important;}
.skeleton-card .seam-media.is-skeleton::before{
display:none}
html[data-theme=dark] .seam-skel-scan,html[data-theme=dark] .detail-loading-scan{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);}
html[data-theme=light] .seam-loading-bar i,html[data-theme=light] .detail-loading-bar i{
background:#17191f}
html[data-theme=dark] .seam-loading-bar i,html[data-theme=dark] .detail-loading-bar i{
background:#f3f4f7}
.rank-media.seam-media.is-skeleton,.account-item-media.seam-media.is-skeleton,.account-card-media.seam-media.is-skeleton,.d3-item-media.seam-media.is-skeleton{
min-height:0}
@media (prefers-reduced-motion:reduce){
.seam-media.is-skeleton::before,.seam-skel::after,.seam-skel-shimmer,.seam-skel-scan,.skeleton-line::after,.detail-loading-shimmer,.detail-loading-scan,.detail-loading-block::after,.seam-loading-bar i,.detail-loading-bar i,.cover-loading i{
animation:none !important;}
}
.detail-stats{
display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;}
.detail-stats .detail-stat{
display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;margin:0;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--foreground) 4%,transparent);color:var(--muted-foreground);font-size:13px;font-weight:600;line-height:1;letter-spacing:0;opacity:1;font-variant-numeric:tabular-nums;}
.detail-stats .detail-stat svg{
width:15px;height:15px;flex:none;}
.detail-sidebar .like-btn.detail-stat{
align-self:center;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;}
html[data-theme=light] .detail-stats .detail-stat{
color:#12141a}
html[data-theme=light] .detail-stats .detail-stat svg{
color:#5f6672}
html[data-theme=dark] .detail-stats .detail-stat{
color:#f8f9fb}
html[data-theme=dark] .detail-stats .detail-stat svg{
color:#8b929c}
.detail-stats .like-btn:hover{
color:var(--foreground);background:color-mix(in srgb,var(--foreground) 8%,transparent);}
html[data-theme=light] .detail-stats .like-btn.is-fav{
color:#9a5f66;border-color:color-mix(in srgb,#c48990 35%,var(--border));background:color-mix(in srgb,#c48990 10%,transparent);}
html[data-theme=dark] .detail-stats .like-btn.is-fav{
color:#e4c5c8;border-color:color-mix(in srgb,#e4c5c8 35%,var(--border));background:color-mix(in srgb,#e4c5c8 10%,transparent);}
html[data-theme=light] .detail-stats .like-btn.is-fav svg{
color:#c48990}
html[data-theme=dark] .detail-stats .like-btn.is-fav svg{
color:#e4c5c8}
html[data-theme=light] .detail-stats .like-btn.is-fav .tabular-nums{
color:#9a5f66}
html[data-theme=dark] .detail-stats .like-btn.is-fav .tabular-nums{
color:#e4c5c8}
.detail-stats .like-btn:focus-visible{
outline:2px solid #17191f;outline-offset:2px;}
html[data-theme=dark] .detail-stats .like-btn:focus-visible{
outline-color:#a3b7ce}
@media (prefers-reduced-motion:reduce){
.detail-stats .like-btn{
transition:none}
}
body[data-page=home] .page,html[data-theme=light] body[data-page=home] .page,html[data-theme=dark] body[data-page=home] .page,body[data-page=home] .site-footer{
background:transparent;}
html[data-theme=light] body[data-page=home] .site-footer{
border-top-color:rgba(18,20,26,.1)}
html[data-theme=dark] body[data-page=home] .site-footer{
border-top-color:rgba(243,244,247,.1)}
html[data-theme=light]::selection{
background:#d8dbe3;color:#12141a}
html[data-theme=dark]::selection{
background:#2a3140;color:#f3f4f7}
html[data-theme=light] .footer-cta-btn,html[data-theme=light] .btn-d3{
background:#17191f;background-image:none;color:#f8f9fb;}
html[data-theme=light] .seam-promo,html[data-theme=light] .home-price-card.is-popular{
background:linear-gradient(160deg,rgba(120,140,170,.08),transparent 55%),var(--card);border-color:rgba(18,20,26,.1);}
html[data-theme=light] .seam-member-cta{
background:linear-gradient(160deg,rgba(120,140,170,.08),var(--card) 72%);border-color:rgba(18,20,26,.1);}
html[data-theme=light] .d3-banner,html[data-theme=light] .pack-card{
background:#eef0f4;color:#12141a;border-color:#d8dbe3;}
html[data-theme=light] .prompt-media.is-error,html[data-theme=light] .prompt-media:not(:has(img)):not(.is-skeleton),html[data-theme=light] .blog-card-cover--empty,html[data-theme=light] .detail-media.is-error{
background:#e8eaef}
html[data-theme=light] .collection-badge{
background:#17191f;color:#f8f9fb}
html[data-theme=light] body{
color:#5a606c;background:radial-gradient(760px 280px at 50% -56px,rgba(120,140,170,.1),transparent 72%),#f3f4f7;}
html[data-theme=light] h1,html[data-theme=light] h2,html[data-theme=light] h3,html[data-theme=light] h4{
color:#12141a;}
html[data-theme=light] .inner-hero:not(.is-poster)>h1::after,html[data-theme=light] .cat-hero:not(.is-poster)>h1::after,html[data-theme=light] .blog-hero:not(.is-poster)>h1::after,html[data-theme=light] .contact-hero:not(.is-poster)>h1::after,html[data-theme=light] .pricing-page .pricing-hero h1::after,html[data-theme=light] .auth-page-title::after{
content:"";display:block;width:72px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,rgba(40,56,84,.45),transparent);}
html[data-theme=light] .pricing-page .pricing-hero h1.pricing-title-line::after,html[data-theme=light] .pricing-page .pricing-hero.is-poster h1.pricing-title-line::after{
content:"";display:block;flex:none;width:88px;max-width:88px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,rgba(40,56,84,.5),transparent);}
html[data-theme=light] .auth-page-title::after{
margin-left:0;margin-right:auto;}
html[data-theme=light] .article-body,html[data-theme=light] .article-body p,html[data-theme=light] .article-body li,html[data-theme=light] .page-main .article-body p,html[data-theme=light] .page-main .article-body li{
color:#5a606c;}
html[data-theme=light] .article-body a{
color:#3d5f8a;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .28s ease,color .28s ease;}
html[data-theme=light] .article-body a:hover{
color:#1f3a5c;background-size:100% 1px;text-decoration:none;}
html[data-theme=light] .blog-card,html[data-theme=light] .home-price-card,html[data-theme=light] .account-card{
background:#fff;border-color:rgba(18,20,26,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 12px 28px rgba(18,20,26,.06);}
html[data-theme=light] .blog-card:hover,html[data-theme=light] .home-price-card:hover,html[data-theme=light] .account-card:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 18px 36px rgba(18,20,26,.1);}
html[data-theme=light] .lang-switch--pill .lang-seg.is-active{
background:#17191f;color:#f8f9fb;}
html[data-theme=dark] body{
color:#a9afba;background:radial-gradient(760px 280px at 50% -56px,rgba(148,168,198,.16),transparent 72%),#0b0d11;}
html[data-theme=dark] h1,html[data-theme=dark] h2,html[data-theme=dark] h3,html[data-theme=dark] h4{
color:#f3f4f7;}
html[data-theme=dark] .inner-hero:not(.is-poster)>h1::after,html[data-theme=dark] .cat-hero:not(.is-poster)>h1::after,html[data-theme=dark] .blog-hero:not(.is-poster)>h1::after,html[data-theme=dark] .contact-hero:not(.is-poster)>h1::after,html[data-theme=dark] .pricing-page .pricing-hero h1::after,html[data-theme=dark] .auth-page-title::after{
content:"";display:block;width:72px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,rgba(163,183,206,.85),transparent);}
html[data-theme=dark] .pricing-page .pricing-hero h1.pricing-title-line::after,html[data-theme=dark] .pricing-page .pricing-hero.is-poster h1.pricing-title-line::after{
content:"";display:block;flex:none;width:88px;max-width:88px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,rgba(163,183,206,.85),transparent);}
html[data-theme=dark] .article-body,html[data-theme=dark] .article-body p,html[data-theme=dark] .article-body li,html[data-theme=dark] .page-main .article-body p,html[data-theme=dark] .page-main .article-body li{
color:#a9afba;}
html[data-theme=dark] .article-body a{
color:#a3b7ce;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0 1px;background-position:0 100%;transition:background-size .28s ease,color .28s ease;}
html[data-theme=dark] .article-body a:hover{
color:#d5e0ee;background-size:100% 1px;text-decoration:none;}
html[data-theme=dark] .blog-card,html[data-theme=dark] .home-price-card,html[data-theme=dark] .account-card,html[data-theme=dark] .d3-banner,html[data-theme=dark] .pack-card{
background:#14171d;border-color:rgba(243,244,247,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 32px rgba(0,0,0,.22);}
html[data-theme=dark] .blog-card:hover,html[data-theme=dark] .home-price-card:hover,html[data-theme=dark] .account-card:hover{
box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px rgba(0,0,0,.34);}
html[data-theme=dark] .auth-page-title::after{
margin-left:0;margin-right:auto;}
html[data-theme=dark] .lang-switch--pill .lang-seg.is-active{
background:#232833;color:#f3f4f7;}
@media (prefers-reduced-motion:reduce){
html[data-theme=light] .article-body a,html[data-theme=dark] .article-body a,.pricing-page .btn-price::after,html[data-theme=dark] .btn-unlimited::after{
transition:none}
.pricing-page .btn-price:hover::after,html[data-theme=dark] .btn-unlimited:hover::after{
transform:none}
}
/* detail-align-16x9: one grid for the video, sidebar, side modules, and the row below */
.detail-overlay{
--detail-side:280px;--detail-rail:minmax(280px,360px);--detail-gap:16px;--detail-cols:minmax(0,1fr) var(--detail-side) var(--detail-rail)}
.detail-top,
.detail-loading:has(.detail-loading-card){
display:grid;grid-template-columns:var(--detail-cols);gap:var(--detail-gap);align-items:stretch}
/* Below row: equal cards (not --detail-cols). Matching top tracks made col1 huge / col2 tiny. */
.detail-below{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--detail-gap);align-items:start}
.detail-main,
.detail-loading-card{
grid-column:1 / 3;grid-row:1;min-width:0;max-width:none;height:auto;align-self:start}
.detail-top>.detail-rail{
grid-column:3;grid-row:1}
.detail-top>.detail-rail:nth-child(n+3){
display:none}
.detail-card,
.detail-loading-card{
width:100%;height:auto;display:grid;grid-template-columns:minmax(0,1fr) var(--detail-gap) var(--detail-side);align-items:stretch}
.detail-media,
.detail-loading-media{
grid-column:1;grid-row:1;width:100%;max-width:none;height:auto;min-height:0;aspect-ratio:16/9;max-height:none}
.detail-sidebar,
.detail-loading-side{
grid-column:3;grid-row:1;height:0;min-height:100%;align-self:stretch;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--border);scrollbar-gutter:stable;scrollbar-width:thin}
.detail-rail{
display:flex;flex-direction:column;justify-content:flex-start;gap:var(--detail-gap);height:0;min-height:100%;align-self:stretch;min-width:0}
.detail-rail .prompt-card,
.detail-rail .detail-rail-slot{
width:100%;min-height:0;flex:1 1 0;display:flex;flex-direction:column}
.detail-below .prompt-card{
width:100%;height:auto;min-height:0;display:flex;flex-direction:column}
.detail-rail .prompt-media{
flex:1 1 auto;width:100%;height:auto;min-height:0;aspect-ratio:auto;margin:0 0 8px;border-radius:16px;overflow:hidden}
.detail-below .prompt-media{
flex:0 0 auto;width:100%;height:auto;min-height:0;aspect-ratio:16/9;margin:0 0 8px;border-radius:16px;overflow:hidden}
.detail-rail .prompt-media img,
.detail-rail .prompt-media video,
.detail-below .prompt-media img,
.detail-below .prompt-media video{
width:100%;height:100%;object-fit:cover;object-position:center center}
.detail-rail .prompt-meta,
.detail-below .prompt-meta{
min-height:calc(1.3em * 2 + 1.3em + 2px);padding:0;flex:0 0 auto;align-items:flex-start}
.detail-rail .prompt-meta h3,
.detail-below .prompt-meta h3{
min-height:calc(1.3em * 2);margin:0;padding:0;line-height:1.3;font-size:15px;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.detail-rail .prompt-meta .cat,
.detail-below .prompt-meta .cat{
min-height:1.3em;margin-top:2px;padding:0;line-height:1.3}
.detail-below .prompt-card:nth-child(n+7){
display:none}
.detail-loading-foot{
grid-column:1 / -1}
.detail-sidebar{
display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:16px;background:var(--card)}
.detail-sidebar>*,
.detail-sidebar .detail-tools,
.detail-sidebar .detail-actions,
.detail-sidebar .detail-rating,
.detail-sidebar .sponsored{
width:100%;min-width:0;margin:0}
.detail-sidebar h3{
margin:0;padding:0;font-size:18px;line-height:1.35}
.detail-meta-row{
margin-top:8px}
.detail-meta-row--tones{
margin-top:8px;max-width:100%}
.detail-stats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
.detail-stats .detail-stat,
.detail-sidebar .like-btn.detail-stat{
width:100%;height:34px;margin:0;padding:0 6px;justify-content:center}
.detail-sidebar .btn-go-unlimited,
.detail-sidebar .detail-tool,
.detail-sidebar .detail-feedback-btn,
.detail-sidebar .detail-share{
width:100%;min-height:40px;height:40px;margin:0;padding:0 12px;border-radius:12px;box-sizing:border-box}
.detail-sidebar .detail-share,
.detail-sidebar .detail-feedback-btn,
.detail-sidebar .btn-go-unlimited{
justify-content:center}
.detail-tools{
gap:8px}
.detail-actions{
display:grid;grid-template-columns:1fr 1fr;gap:8px}
.detail-sidebar .sponsored{
margin-top:0;padding-top:0}
.detail-sidebar .detail-rating{
padding:10px 11px 11px}
.detail-sidebar .detail-rating-avg{
font-size:28px}
.detail-sidebar .detail-rating-body{
gap:10px}
.detail-sidebar .detail-rating-summary{
gap:10px}
.detail-sidebar .detail-rating-bars{
gap:4px}
.detail-overlay.is-detail-stack{
--detail-cols:minmax(0,1fr) var(--detail-rail)}
.detail-overlay.is-detail-stack .detail-rail{
height:auto;min-height:0;align-self:start;justify-content:flex-start}
.detail-overlay.is-detail-stack .detail-main,
.detail-overlay.is-detail-stack .detail-loading-card{
grid-column:1}
.detail-overlay.is-detail-stack .detail-card,
.detail-overlay.is-detail-stack .detail-loading-card{
grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
.detail-overlay.is-detail-stack .detail-media,
.detail-overlay.is-detail-stack .detail-loading-media{
grid-column:1;grid-row:1;height:auto;min-height:0;aspect-ratio:16/9}
.detail-overlay.is-detail-stack .detail-sidebar,
.detail-overlay.is-detail-stack .detail-loading-side{
grid-column:1;grid-row:2;height:auto;min-height:0;overflow:visible;border-left:0;border-top:1px solid var(--border)}
.detail-overlay.is-detail-stack .detail-top>.detail-rail{
grid-column:2}
@media(max-width:1480px){
.detail-overlay{
--detail-side:250px;--detail-rail:minmax(260px,320px)}
}
@media(max-width:1200px){
.detail-overlay{
--detail-side:240px;--detail-rail:minmax(240px,300px);--detail-cols:minmax(0,1fr) var(--detail-side) var(--detail-rail)}
.detail-overlay.is-detail-stack{
--detail-cols:minmax(0,1fr) var(--detail-rail)}
}
@media(max-width:1399px){
.detail-overlay,
.detail-overlay.is-detail-stack{
--detail-cols:minmax(0,1fr)}
.detail-main,
.detail-loading-card{
grid-column:1}
.detail-top>.detail-rail,
.detail-overlay.is-detail-stack .detail-top>.detail-rail{
display:none}
.detail-below{
grid-template-columns:repeat(3,minmax(0,1fr))}
.detail-below .prompt-card:nth-child(n+7){
display:none}
}
@media(max-width:900px){
.detail-overlay,
.detail-overlay.is-detail-stack{
--detail-cols:minmax(0,1fr)}
.detail-main,
.detail-loading-card{
grid-column:1}
.detail-card,
.detail-loading-card,
.detail-overlay.is-detail-stack .detail-card,
.detail-overlay.is-detail-stack .detail-loading-card{
grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
.detail-media,
.detail-loading-media,
.detail-overlay.is-detail-stack .detail-media,
.detail-overlay.is-detail-stack .detail-loading-media{
grid-column:1;grid-row:1;align-self:start;width:100%;height:auto;min-height:0;aspect-ratio:16/9;max-height:none}
.detail-sidebar,
.detail-loading-side,
.detail-overlay.is-detail-stack .detail-sidebar,
.detail-overlay.is-detail-stack .detail-loading-side{
grid-column:1;grid-row:2;position:relative;z-index:1;height:auto;min-height:0;max-height:none;overflow:visible;border-left:0;border-top:1px solid var(--border)}
.detail-sidebar .detail-tool{
height:auto;min-height:44px;white-space:normal}
.detail-rail,
.detail-top>.detail-rail,
.detail-overlay.is-detail-stack .detail-top>.detail-rail{
display:none}
.detail-below{
grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-below .prompt-card:nth-child(n+5){
display:none}
}
@media(max-width:560px){
.detail-inner,
body.detail-open .detail-inner{
padding:16px 16px calc(40px + env(safe-area-inset-bottom, 0px));padding-top:calc(var(--seam-detail-top, 72px) + 16px)}
.detail-below{
grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0}
.detail-below .prompt-card{
width:100%;min-width:0}
.detail-below .prompt-card:nth-child(n+5){
display:none}
.detail-actions{
grid-template-columns:1fr}
.detail-media,
.detail-loading-media{
max-height:none;aspect-ratio:16/9}
.detail-sidebar,
.detail-loading-side{
padding:16px}
.detail-panel-wrap{
gap:14px}
}
@media(max-width:1860px){
body.detail-open .seam-dock{
display:none}
}
/* /detail-align-16x9 */

/* Component library */
.comp-wrap{
padding-bottom:80px}
.comp-board{
width:min(1280px,100%);margin:8px auto 0;padding:0 var(--page-gutter)}
.comp-toolbar{
display:flex;align-items:center;gap:16px;margin-bottom:14px}
.comp-search{
flex:1;display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--muted-foreground)}
.comp-search svg{
width:16px;height:16px;flex-shrink:0}
.comp-search input{
width:100%;border:0;outline:none;background:transparent;color:var(--foreground);font:inherit;font-size:15px}
.comp-search input::placeholder{
color:var(--muted-foreground);opacity:1}
.comp-search input::-webkit-search-cancel-button{
cursor:pointer}
.comp-count{
margin:0;font-size:13px;color:var(--muted-foreground);font-variant-numeric:tabular-nums;white-space:nowrap}
.comp-cats{
display:flex;gap:8px;margin:0 0 22px;padding:4px 2px 6px;overflow-x:auto;scrollbar-width:none}
.comp-cats::-webkit-scrollbar{
display:none}
.comp-cat{
flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--foreground);font-size:14px;font-weight:650}
.comp-cat:hover{
color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 28%,var(--border))}
.comp-cat.is-on{
background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.comp-cat-n{
font-size:12px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--muted-foreground)}
.comp-cat.is-on .comp-cat-n{
color:inherit}
.comp-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px}
.comp-card{
min-width:0}
.comp-card-stage{
position:relative;aspect-ratio:4/3;border-radius:12px;border:1px solid #d4d4d4;overflow:hidden;background:#e9e9e9;isolation:isolate}
.comp-card-stage[data-stage="dark"]{
background:#141416;border-color:#2a2a2e}
.comp-card-stage[data-stage="checker"]{
background-color:#ececec;background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%),linear-gradient(-45deg,#d9d9d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d9d9 75%),linear-gradient(-45deg,transparent 75%,#d9d9d9 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.comp-card-hit{
position:absolute;inset:0;z-index:0;display:block}
.comp-cover{
width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-out),opacity .2s var(--ease-out)}
.comp-card:hover .comp-cover{
transform:scale(1.03)}
.comp-card.is-live .comp-cover,
.comp-card.is-live .comp-card-fallback,
.comp-card.is-live:hover .comp-cover{
opacity:0;transform:none}
.comp-card-fallback{
position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:#3a3a3a;font-size:18px;font-weight:650;line-height:1.35}
.comp-card-live{
position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;background:transparent}
.comp-card-live[hidden]{
display:none}
.comp-card-detail{
position:absolute;z-index:2;right:10px;bottom:10px;display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:var(--background);color:var(--foreground);font-size:12px;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.16)}
.comp-card-flag{
position:absolute;z-index:2;top:10px;left:10px;padding:4px 8px;border-radius:999px;background:#141416;color:#fff;font-size:11px;font-weight:700}
.comp-card-wait{
display:none;position:absolute;z-index:3;left:10px;bottom:10px;align-items:center;gap:8px;min-height:32px;padding:0 12px 0 8px;border-radius:999px;background:#141416;color:#fff;font-size:12px;font-weight:700}
.comp-card.is-waiting .comp-card-wait{display:inline-flex}
.comp-card-wait i{
width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:comp-wait .7s linear infinite}
@keyframes comp-wait{to{transform:rotate(360deg)}}
.comp-card-info{
padding:12px 2px 0}
.comp-card-title{
margin:0;font-size:15px;font-weight:650;letter-spacing:-0.02em;line-height:1.35}
.comp-card-title a{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.comp-card:hover .comp-card-title a{
color:var(--link-hover)}
.comp-card-meta{
margin:4px 0 0;font-size:13px;color:var(--muted-foreground)}
.comp-card-title a:focus-visible,.comp-cat:focus-visible,.comp-copy:focus-visible,.comp-devices button:focus-visible,.comp-related-nav a:focus-visible,.comp-back a:focus-visible,.comp-search input:focus-visible{
outline:2px solid var(--primary);outline-offset:3px}
.comp-card-stage a:focus-visible{
outline:2px solid var(--primary);outline-offset:-3px}
.comp-empty{
display:grid;justify-items:start;gap:12px;padding:36px 0 8px;color:var(--muted-foreground)}
.comp-empty p{
margin:0;font-size:16px}
.comp-empty-link{
font-weight:700;color:var(--foreground)}
.comp-pager{
margin-top:32px}
.comp-pager .nav-links{
display:flex;flex-wrap:wrap;gap:8px}
.comp-pager .page-numbers{
display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--foreground);font-size:13px;font-weight:650}
.comp-pager .page-numbers.current{
background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.comp-pager .page-numbers.dots{
border-color:transparent;background:transparent}
.comp-detail{
width:min(1180px,100%);margin:0 auto;padding:28px var(--page-gutter) 88px}
.comp-back{
margin:0 0 18px}
.comp-back a{
display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--muted-foreground);font-size:13px;font-weight:650}
.comp-back a:hover{
color:var(--foreground)}
.comp-detail-head{
margin-bottom:22px}
.comp-kicker{
margin:0 0 8px;font-size:14px;font-weight:650}
.comp-kicker a{
color:var(--muted-foreground)}
.comp-kicker a:hover{
color:var(--foreground)}
.comp-detail-head h1{
margin:0;font-size:clamp(32px,4vw,44px);font-weight:750;letter-spacing:-0.03em;line-height:1.12}
.comp-lead{
max-width:68ch;margin:12px 0 0;color:var(--muted-foreground);font-size:16px;line-height:1.6}
.comp-bench-bar{
display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.comp-devices{
display:inline-flex;align-items:center;max-width:100%;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--muted)}
.comp-devices button{
min-height:40px;padding:0 14px;border-radius:999px;color:var(--muted-foreground);font-size:13px;font-weight:650}
.comp-devices button.is-on{
background:var(--card);color:var(--foreground);box-shadow:0 1px 2px rgba(18,20,26,.12)}
html[data-theme=dark] .comp-devices button.is-on,html[data-theme=dark] .comp-cat.is-on{
background:#2c3340;color:#f3f4f7;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
html[data-theme=light] .comp-cat.is-on{
background:#17191f;color:#f8f9fb;border-color:#17191f}
.comp-copy{
display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin-left:auto;padding:0 16px;border-radius:999px;background:var(--foreground);color:var(--background);font-size:13px;font-weight:700}
.comp-copy:hover{
opacity:.9}
.comp-copy:disabled{
opacity:.45;cursor:not-allowed}
.comp-canvas{
display:flex;justify-content:center;min-height:min(72vh,760px);padding:22px;border:1px solid #d4d4d4;border-radius:16px;background:#e9e9e9}
.comp-canvas[data-stage="dark"]{
background:#141416;border-color:#2a2a2e}
.comp-canvas[data-stage="checker"]{
background-color:#ececec;background-image:linear-gradient(45deg,#d9d9d9 25%,transparent 25%),linear-gradient(-45deg,#d9d9d9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9d9d9 75%),linear-gradient(-45deg,transparent 75%,#d9d9d9 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}
.comp-stage{
position:relative;width:100%;height:min(68vh,720px);overflow:hidden;border-radius:12px;background:transparent}
.comp-canvas[data-device="tablet"] .comp-stage{
width:min(768px,100%)}
.comp-canvas[data-device="mobile"] .comp-stage{
width:min(375px,100%);height:min(78vh,720px)}
.comp-stage-frame{
position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;opacity:0;visibility:hidden}
.comp-stage-frame.is-ready{
opacity:1;visibility:visible}
.comp-try{
margin:12px 2px 0;color:var(--muted-foreground);font-size:13px;line-height:1.5}
.comp-toast{
margin:12px 0 0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,#22c55e 12%,transparent);color:var(--foreground);font-size:13px}
.comp-toast.is-bad{
background:color-mix(in srgb,#ef4444 12%,transparent)}
.comp-settings{
margin-top:22px;padding:18px 18px 8px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
.comp-settings-head{
display:flex;align-items:center;justify-content:space-between;gap:12px}
.comp-settings-head h2{
margin:0;font-size:20px;font-weight:700;letter-spacing:-0.02em}
.comp-set-reset{
min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--background);font-size:13px;font-weight:650}
.comp-set-reset:hover{color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 28%,var(--border))}
.comp-set-reset:disabled{opacity:.45;cursor:not-allowed}
.comp-settings-hint,.comp-settings-changes{
margin:8px 0 0;color:var(--muted-foreground);font-size:13px;line-height:1.5}
.comp-settings-controls{display:grid;gap:4px;margin-top:12px}
.comp-set{
display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:8px 16px;align-items:center;min-height:48px;padding:4px 0}
.comp-set[hidden]{display:none}
.comp-set label{font-size:14px;font-weight:650}
.comp-set output{margin-left:8px;color:var(--muted-foreground);font-size:13px;font-variant-numeric:tabular-nums;font-weight:550}
.comp-set input[type="text"],.comp-set input[type="number"],.comp-set select{
width:100%;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--background);color:var(--foreground);font:inherit;font-size:14px}
.comp-set input[type="range"]{width:100%;accent-color:var(--foreground)}
.comp-set input[aria-invalid="true"]{border-color:#ef4444}
.comp-set-color{display:flex;align-items:center;gap:8px}
.comp-set-color input[type="color"]{width:44px;height:40px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--background);cursor:pointer}
.comp-set-color input[type="text"]{max-width:8.5rem;font-variant-numeric:tabular-nums}
.comp-set-switch{justify-self:start;position:relative;display:inline-flex;width:44px;height:26px}
.comp-set-switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.comp-set-switch i{width:44px;height:26px;border:1px solid var(--border);border-radius:999px;background:var(--muted);pointer-events:none}
.comp-set-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--foreground);transition:transform .18s var(--ease-out)}
.comp-set-switch input:checked + i{background:var(--foreground)}
.comp-set-switch input:checked + i::after{transform:translateX(18px);background:var(--background)}
.comp-set-group{border-top:1px solid var(--border)}
.comp-set-group summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;cursor:pointer}
.comp-set-group-body{padding-bottom:6px}
.comp-settings input:focus-visible,.comp-settings select:focus-visible,.comp-settings summary:focus-visible,.comp-set-reset:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.comp-set-switch input:focus-visible{outline:none}
.comp-set-switch input:focus-visible + i{outline:2px solid var(--primary);outline-offset:3px}
.comp-related{
margin-top:48px}
.comp-related-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
.comp-related-bar{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.comp-related-bar h2{
margin:0;font-size:20px;font-weight:700;letter-spacing:-0.02em}
.comp-related-nav{
display:flex;gap:8px}
.comp-related-nav a{
display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:13px;font-weight:650}
.comp-related-nav a:hover{
color:var(--foreground);border-color:color-mix(in srgb,var(--foreground) 28%,var(--border))}
@media(hover:hover) and (pointer:fine){
.comp-card-detail{
opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.comp-card:hover .comp-card-detail,.comp-card:focus-within .comp-card-detail{
opacity:1;transform:none}
}
@media(min-width:1480px){
.comp-board{
width:min(1440px,100%)}
.comp-board .comp-grid{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:1100px){
.comp-grid,.comp-related-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
.comp-grid,.comp-related-grid{
grid-template-columns:1fr}
.comp-toolbar{
flex-direction:column;align-items:stretch}
.comp-bench-bar{
align-items:stretch}
.comp-copy{
margin-left:0}
.comp-canvas{
min-height:0;padding:12px}
.comp-stage,.comp-canvas[data-device="mobile"] .comp-stage{
height:min(70vh,560px)}
.comp-detail{
padding-top:16px}
.comp-related-bar{
align-items:flex-start;flex-direction:column}
.comp-set{
grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.comp-cover,.comp-card-detail{
transition:none}
.comp-card:hover .comp-cover{
transform:none}
.comp-set-switch i::after,.comp-card-wait i{
transition:none;animation:none}
}

/* Sidebar rail: blog, article, resources, pages, rankings, contact, resource detail. */
.blog-layout,
.resource-layout{
grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
@media (min-width:961px){
.article-shell:has(.article-aside),
.page-shell:has(.page-aside),
.rankings-shell.article-shell:has(.article-aside){
grid-template-columns:minmax(0,1fr) minmax(260px,300px);gap:clamp(24px,3vw,40px);align-items:start}
.contact-layout{
grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(24px,3vw,40px);max-width:var(--content-max);align-items:start}
.blog-aside,
.contact-aside{
position:sticky;top:calc(var(--site-nav-h,72px) + 16px);align-self:start;max-height:calc(100dvh - var(--site-nav-h,72px) - 32px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--foreground) 28%,transparent) transparent}
body.admin-bar .blog-aside,
body.admin-bar .contact-aside{
top:calc(var(--site-nav-h,72px) + 48px);max-height:calc(100dvh - var(--site-nav-h,72px) - 64px)}
}
.article-aside,
.page-aside{
padding-top:0}
.contact-aside.reveal,
.contact-aside.reveal.is-visible{
opacity:1;filter:none;transform:none}
.seam-sidebar{
display:flex;flex-direction:column;gap:16px;width:100%}
.seam-sidebar>.seam-widget{
margin:0;padding:16px;border-radius:16px;border:1px solid var(--border);background:var(--card);box-shadow:none}
.seam-sidebar>.seam-widget:has(.seam-promo),
.seam-sidebar>.seam-widget:has(.seam-member-cta),
.seam-sidebar>.seam-widget:has(.seam-tip),
.seam-sidebar>.seam-widget:has(.seam-poster),
.seam-sidebar>.seam-widget.seam-w-skin-flush{
padding:0;border:0;background:transparent;box-shadow:none}
.seam-sidebar .seam-widget-title,
.blog-aside h2,
.blog-aside .seam-widget-title,
html[data-theme=light] .blog-aside h2,
html[data-theme=light] .seam-widget-title{
display:block;margin:0 0 12px;font-size:15px;font-weight:700;letter-spacing:-0.02em;text-transform:none;line-height:1.35;color:var(--foreground)}
.seam-sidebar .seam-widget-title::before{
content:none}
.blog-cat-list,
.seam-w-cats{
display:flex;flex-direction:column;gap:4px;margin:0}
.blog-aside .blog-cat-btn,
.seam-w-cats .blog-cat-btn,
html[data-theme=light] .blog-cat-btn{
min-height:44px;width:100%;padding:8px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--foreground);font-size:14px;font-weight:600;letter-spacing:0;box-shadow:none;transform:none}
.blog-aside .blog-cat-btn .num,
.seam-w-cats .blog-cat-btn .num,
html[data-theme=light] .blog-cat-btn .num{
color:var(--muted-foreground);font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.blog-aside .blog-cat-btn:hover,
.seam-w-cats .blog-cat-btn:hover,
html[data-theme=light] .blog-cat-btn:hover{
background:var(--muted);color:var(--foreground);transform:none}
.blog-aside .blog-cat-btn.active,
.seam-w-cats .blog-cat-btn.active,
html[data-theme=light] .blog-aside .blog-cat-btn.active,
html[data-theme=light] .seam-w-cats .blog-cat-btn.active{
background:#17191f;color:#f8f9fb;border-color:#17191f;box-shadow:none}
.blog-aside .blog-cat-btn.active .num,
.seam-w-cats .blog-cat-btn.active .num,
html[data-theme=light] .blog-aside .blog-cat-btn.active .num,
html[data-theme=light] .seam-w-cats .blog-cat-btn.active .num{
color:rgba(248,249,251,.72)}
html[data-theme=dark] .blog-aside .blog-cat-btn.active,
html[data-theme=dark] .seam-w-cats .blog-cat-btn.active{
background:#2c3340;color:#f3f4f7;border-color:#2c3340}
html[data-theme=dark] .blog-aside .blog-cat-btn.active .num,
html[data-theme=dark] .seam-w-cats .blog-cat-btn.active .num{
color:rgba(243,244,247,.72)}
.blog-cat-btn:focus-visible,
.seam-w-row:focus-visible,
.seam-w-link:focus-visible,
.seam-w-tag:focus-visible,
.seam-w-search button:focus-visible{
outline:2px solid var(--foreground);outline-offset:2px}
.seam-w-list{
gap:2px}
.seam-w-row{
grid-template-columns:44px minmax(0,1fr);gap:10px;min-height:44px;padding:6px;margin:0 -6px;border-radius:12px;border-color:transparent;transform:none}
.seam-w-row:hover{
background:var(--muted);border-color:transparent;transform:none;color:var(--foreground)}
.seam-w-thumb{
width:44px;height:44px;border-radius:10px}
.seam-w-title{
font-size:14px;font-weight:650;letter-spacing:-0.01em;line-height:1.35}
.seam-w-meta,
.seam-w-empty{
font-size:12px;line-height:1.4;color:var(--muted-foreground)}
.seam-w-link{
min-height:44px;padding:10px 12px;border-radius:12px;font-size:14px;transform:none}
.seam-w-link:hover{
transform:none;background:var(--muted)}
.seam-w-tag{
min-height:44px;padding:8px 12px}
.seam-w-tag:hover{
transform:none}
.seam-w-search input[type=search]{
min-height:44px;border-radius:12px;font-size:16px}
.seam-w-search button{
width:36px;height:36px}
.contact-aside{
display:flex;flex-direction:column;gap:12px;min-width:0}
.contact-aside .contact-info-card,
html[data-theme=light] .contact-aside .contact-info-card{
background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:none;color:var(--foreground);transform:none}
.contact-aside .contact-info-card:hover,
html[data-theme=light] .contact-aside .contact-info-card:hover{
transform:none;border-color:var(--border)}
.contact-aside .contact-info-label,
html[data-theme=light] .contact-aside .contact-info-label{
display:block;margin:0 0 6px;font-size:13px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--muted-foreground)}
.contact-aside .contact-info-card a,
.contact-aside .contact-info-card strong,
html[data-theme=light] .contact-aside .contact-info-card a,
html[data-theme=light] .contact-aside .contact-info-card strong{
color:var(--foreground);font-size:15px;font-weight:650;letter-spacing:-0.01em}
.contact-aside .contact-topic-chips span,
html[data-theme=light] .contact-aside .contact-topic-chips span{
display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--muted) 72%,transparent);color:var(--foreground);font-size:12px;font-weight:600}
.contact-aside .contact-aside-note,
html[data-theme=light] .contact-aside .contact-aside-note{
margin:0;padding:4px 2px;background:transparent;border:0;box-shadow:none;color:var(--muted-foreground);font-size:13px;line-height:1.55}
.contact-aside .contact-aside-note a,
html[data-theme=light] .contact-aside .contact-aside-note a{
color:var(--foreground);text-underline-offset:3px}
.detail-sidebar{
gap:14px}
.detail-sidebar h3{
font-size:18px;font-weight:750;letter-spacing:-0.02em;line-height:1.3}
.detail-sidebar .cat{
color:var(--muted-foreground)}
.detail-stats .detail-stat,
.detail-sidebar .like-btn.detail-stat{
min-height:44px;height:auto}
.detail-sidebar .btn-go-unlimited,
.detail-sidebar .detail-tool,
.detail-sidebar .detail-feedback-btn,
.detail-sidebar .detail-share{
min-height:44px;height:auto}
.detail-sidebar .sponsored-label,
html[data-theme=light] .detail-sidebar .sponsored-label{
font-size:12px;font-weight:650;letter-spacing:0;text-transform:none;color:var(--muted-foreground)}
@media (max-width:960px){
.blog-layout,
.resource-layout,
.article-shell:has(.article-aside),
.page-shell,
.page-shell:has(.page-aside),
.rankings-shell.article-shell:has(.article-aside){
grid-template-columns:minmax(0,1fr);gap:28px}
.blog-layout>.blog-aside,
.resource-layout>.resource-aside,
.article-shell>.article-aside,
.page-shell>.page-aside{
display:flex !important;flex-direction:column;position:static;max-height:none;overflow:visible;order:2;width:100%;padding-top:8px}
.seam-sidebar{
display:flex;grid-template-columns:none;gap:12px}
.blog-cat-list,
.seam-w-cats{
flex-direction:row;flex-wrap:wrap;gap:8px}
.blog-aside .blog-cat-btn,
.seam-w-cats .blog-cat-btn{
width:auto}
.contact-aside{
position:static;max-height:none;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
.seam-w-row,
.seam-w-link,
.seam-w-tag,
.blog-cat-btn,
.contact-info-card{
transition:none;transform:none}
}