/* UAsset clean hierarchy layer (2026-10-24): one width, one type scale, quiet tiles. Remove the <link> to undo. */
:root{--ua-ink:#0f0f10;--ua-mute:#6b6b70;--ua-soft:#8e8e93;--ua-line:#ececee;--ua-bg2:#f6f6f7;--ua-w:1088px}
body{background:#fff;color:var(--ua-ink);-webkit-font-smoothing:antialiased}

/* one container width everywhere */
body .hero,body .section,body .footer{max-width:var(--ua-w);margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;box-sizing:border-box}
body .header{border-bottom:1px solid var(--ua-line);background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(14px)}

/* HERO: eyebrow > h1 > sub > search > popular */
body .hero{padding-top:96px;padding-bottom:72px;text-align:center}
body .hero .hero-mark{display:block;width:280px;height:280px;margin:0 auto 40px;color:var(--ua-ink)}
@media (max-width:640px){body .hero .hero-mark{width:190px;height:190px;margin-bottom:30px}}
.ua-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 28px;padding:7px 14px;border:1px solid var(--ua-line);border-radius:999px;font-size:13px;font-weight:500;color:var(--ua-mute);letter-spacing:0}
.ua-dot{width:6px;height:6px;border-radius:50%;background:var(--ua-ink)}
body .hero h1{font-size:clamp(40px,6.2vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:800;margin:0 auto;max-width:900px;color:var(--ua-ink)}
body .hero h1 span{color:var(--ua-soft)}
body .hero .hero-text{font-size:19px;line-height:1.55;color:var(--ua-mute);max-width:560px;margin:24px auto 36px;font-weight:400}
body .hero .hero-search{max-width:600px;margin:0 auto;height:58px;border-radius:999px;background:#fff;border:1px solid #e3e3e6;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06)}
body .hero .hero-search input{font-size:16px}
.ua-popular{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--ua-soft)}
.ua-popular button{border:0;background:var(--ua-bg2);color:var(--ua-ink);font:inherit;font-weight:500;padding:6px 12px;border-radius:999px;cursor:pointer}
.ua-popular button:hover{background:#ececee}

/* LIBRARY header: eyebrow + h2 left, count right */
body #library{padding-top:24px;padding-bottom:96px;border-top:1px solid var(--ua-line)}
body #library .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:48px 0 20px;padding:0;max-width:none}
body #library .section-head .eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ua-soft);font-weight:600;margin:0 0 8px}
body #library .section-head h2{font-size:36px;letter-spacing:-.035em;font-weight:800;line-height:1.1;margin:0}
.ua-count{font-size:14px;color:var(--ua-soft);font-weight:500;padding-bottom:6px}

/* toolbar: set/style left, category right; chip cloud hidden */
.ua-toolbar{position:sticky;top:64px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;margin-bottom:16px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--ua-line)}
.ua-toolbar #uaStyleBar{margin:0!important}
body #library #filters{display:none!important}
.ua-cat{appearance:none;-webkit-appearance:none;height:36px;padding:0 36px 0 14px;border-radius:999px;border:1px solid #e3e3e6;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0f10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;font:inherit;font-size:14px;font-weight:500;color:var(--ua-ink);cursor:pointer}

/* GRID: quiet tiles, name only */
body .icon-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important;gap:10px!important}
body .icon-grid .icon-card{background:#fff;border:1px solid var(--ua-line);border-radius:16px;box-shadow:none;min-height:116px;padding:22px 10px 14px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s}
body .icon-grid .icon-card:hover{border-color:#d6d6da;box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-1px)}
body .icon-grid .icon-card .icon-draw svg{width:26px;height:26px}
body .icon-grid .icon-title{font-size:12.5px;font-weight:500;color:#3a3a3f;line-height:1.25;letter-spacing:0}
body .icon-grid .icon-category{display:none}
body .icon-grid .icon-card.ua-off{display:none!important}
.ua-more{display:block;margin:28px auto 0;height:44px;padding:0 24px;border-radius:999px;border:1px solid #e3e3e6;background:#fff;color:var(--ua-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ua-more:hover{background:var(--ua-bg2)}
.ua-more[hidden]{display:none}

/* FOOTER */
body .footer{border-top:1px solid var(--ua-line);padding-top:28px;padding-bottom:40px;font-size:13px;color:var(--ua-soft)}

@media (max-width:640px){
 body .hero,body .section,body .footer{padding-left:18px;padding-right:18px}
 body .hero{padding-top:56px;padding-bottom:48px}
 body .hero .hero-text{font-size:16px}
 body #library .section-head h2{font-size:28px}
 .ua-toolbar{top:56px}
 body .icon-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}
 body .icon-grid .icon-card{min-height:96px;padding:16px 6px 10px}
}

/* win over older !important layers */
body .hero{padding-top:96px!important;padding-bottom:72px!important}
body .hero h1{font-size:clamp(40px,6.2vw,72px)!important;line-height:1.02!important;margin:0 auto 0!important}
body .hero h1 span{color:var(--ua-soft)!important}
body .hero .hero-text{font-size:19px!important;color:var(--ua-mute)!important;margin:24px auto 36px!important}
@media (max-width:640px){
 body .hero{padding-top:48px!important;padding-bottom:40px!important}
 body .hero h1{font-size:38px!important}
 body .hero h1 br{display:none}
 body .hero .hero-text{font-size:16px!important;margin:18px auto 26px!important}
 body #library .section-head{flex-direction:column;align-items:flex-start;gap:6px;margin-top:32px}
 body #library .section-head>div{text-align:left}
 .ua-count{padding-bottom:0}
 .ua-toolbar{flex-direction:column;align-items:stretch}
 .ua-toolbar>div{overflow-x:auto;scrollbar-width:none}
 .ua-toolbar #uaStyleBar{width:max-content}
 .ua-cat{width:100%}
}
body .seo-links{max-width:var(--ua-w)!important;margin:0 auto!important;padding:48px 32px 8px!important;box-sizing:border-box;font-size:12.5px!important;line-height:1.9!important;color:var(--ua-soft)!important;border-top:1px solid var(--ua-line)}
body .seo-links strong{color:var(--ua-ink)}
body .seo-links a{color:var(--ua-mute)!important;text-decoration:none}
body .seo-links a:hover{color:var(--ua-ink)!important}
body .footer{border-top:0!important}
@media (max-width:640px){body .seo-links{padding:36px 18px 8px!important}}

/* search clear (x): monochrome instead of the browser's blue */
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-left:8px;border-radius:50%;cursor:pointer;background:#f0f0f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f0f10' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") no-repeat center/12px;opacity:.85}
input[type="search"]::-webkit-search-cancel-button:hover{background-color:#e4e4e7;opacity:1}
.hero-search:has(input:not(:placeholder-shown)) kbd{display:none}
/* Hero: first screen shows only the big logo (2026-10-28) */
body .hero .hero-mark{width:100%;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:420px;margin:-96px auto 0;display:flex;align-items:center;justify-content:center}
body .hero .hero-mark>svg{width:min(62vh,560px);height:min(62vh,560px)}
@media (max-width:640px){body .hero .hero-mark{height:calc(100svh - 60px);min-height:360px;margin:-48px auto 0}body .hero .hero-mark>svg{width:min(72vw,340px);height:min(72vw,340px)}}
/* Hero icon field */
body .hero .hero-mark{position:relative;overflow:hidden}
body .hero .hero-mark>svg{position:relative;z-index:2}
.ua-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.ua-fi{position:absolute;left:0;top:0;color:var(--ua-ink,#111);will-change:transform,opacity;transition:filter .38s ease}
body .hero .hero-mark .ua-fi svg{width:100%!important;height:100%!important;display:block;transition:opacity .38s ease,transform .38s ease}
.ua-fi.is-swap svg{opacity:0;transform:scale(.4) rotate(-30deg)}
/* Icon field full width (edge to edge) */
body .hero .hero-mark{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
html,body{overflow-x:clip}

/* ===== 10/10 pass (2026-10-28) ===== */
/* scroll cue at the bottom of the logo screen */
body .hero .ua-hero-cue{position:relative;z-index:3;display:flex;width:max-content;align-items:center;gap:10px;top:-100px;margin:0 auto -44px;height:44px;padding:0 18px 0 20px;border-radius:999px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--ua-line,#ececf1);color:var(--ua-ink,#0b0b0f);font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:0 6px 24px rgba(10,10,20,.06)}
body .hero .ua-hero-cue svg{width:16px;height:16px;animation:uaCue 1.8s ease-in-out infinite}
body .hero .ua-hero-cue:hover{background:#fff}
@keyframes uaCue{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){body .hero .ua-hero-cue svg{animation:none}}
@media (max-width:640px){body .hero .ua-hero-cue{top:-92px;margin:0 auto -40px;height:40px;font-size:13px}}
/* free mode: no pricing in the nav */
html.ua-free-mode .nav a[href="#pricing"]{display:none!important}
/* sign in is secondary on a free site */
header .bean-button#openBean{background:#fff!important;color:var(--ua-ink,#0b0b0f)!important;border:1px solid var(--ua-line,#e4e4ea)!important;box-shadow:none!important}
header .bean-button#openBean:hover{background:#f6f6f9!important;filter:none!important}
/* mobile: set/style bar fits the screen, nothing cut off */
@media (max-width:640px){
 .ua-toolbar #uaStyleBar,.ua-style-bar{width:100%!important;max-width:100%}
 .ua-style-bar .ua-style-label{display:none}
 .ua-style-bar .ua-style-btn{flex:1 1 0;padding:8px 4px;text-align:center}
 .ua-style-bar .ua-style-sep{margin:0 3px}
}

/* Download all: header pill + hero actions */
.account .ua-dl-all{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;margin-right:8px;border-radius:999px;border:1px solid var(--ua-line,#ececf1);background:#fff;color:var(--ua-ink,#0b0b0f);font:600 13.5px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.account .ua-dl-all:hover{background:#f5f5f7}
.account .ua-dl-all svg{width:16px;height:16px}
.account{display:flex;align-items:center}
.hero .ua-hero-actions{display:flex;justify-content:center;gap:10px;margin:18px auto 0;flex-wrap:wrap}
.hero .ua-ha{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--ua-line,#ececf1);background:#fff;color:var(--ua-ink,#0b0b0f);font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none}
.hero .ua-ha svg{width:17px;height:17px}
.hero .ua-ha:hover{background:#f5f5f7}
.hero .ua-ha-main{background:#0b0b0f;color:#fff;border-color:#0b0b0f}
.hero .ua-ha-main:hover{background:#26262c}
@media (max-width:640px){.account .ua-dl-all{padding:0;width:36px;justify-content:center;margin-right:6px}.account .ua-dl-all span{display:none}.hero .ua-ha{height:42px;font-size:13.5px;padding:0 15px}}
/* Premium category dropdown */
.ua-dd{position:relative}
.ua-dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:220px;height:38px;padding:0 14px 0 16px;border-radius:999px;border:1px solid #e3e3e6;background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--ua-ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ua-dd-btn:hover{border-color:#cfcfd4}
.ua-dd.open .ua-dd-btn,.ua-dd-btn:focus-visible{outline:none;border-color:#0f0f10;box-shadow:0 0 0 4px rgba(15,15,16,.06)}
.ua-dd-btn svg{transition:transform .2s ease;opacity:.7}
.ua-dd.open .ua-dd-btn svg{transform:rotate(180deg)}
.ua-dd-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:280px;padding:6px;border-radius:18px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(0,0,0,.07);box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 48px -12px rgba(0,0,0,.18);transform-origin:top right;animation:uaDdIn .16s cubic-bezier(.2,.8,.2,1)}
.ua-dd-menu[hidden]{display:none}
@keyframes uaDdIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.ua-dd-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;margin-bottom:4px;border-radius:12px;background:#f4f4f6;color:#8a8a90}
.ua-dd-search input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--ua-ink)}
.ua-dd-list{max-height:320px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.ua-dd-item{display:flex;align-items:center;justify-content:space-between;width:100%;height:38px;padding:0 12px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;color:var(--ua-ink);text-align:left;cursor:pointer}
.ua-dd-item[hidden]{display:none}
.ua-dd-item svg{opacity:0}
.ua-dd-item:hover,.ua-dd-item.hi{background:#f4f4f6}
.ua-dd-item.on{font-weight:600}
.ua-dd-item.on svg{opacity:1}
@media (max-width:640px){.ua-dd,.ua-dd-btn{width:100%}.ua-dd-menu{left:0;right:0;width:auto}}
@media (prefers-reduced-motion:reduce){.ua-dd-menu{animation:none}}