/* Wasla 1.1 — layouts are explicit saved choices. Legacy pages are unaffected. */
.profile-stage[data-layout]:not([data-layout=legacy]){container-type:inline-size;overflow-x:clip}
.profile-stage[data-layout]:not([data-layout=legacy]) .public-profile{min-width:0}
.profile-stage .profile-blocks>[hidden]{display:none!important}
.profile-search{margin-bottom:18px}.profile-search label{display:flex;align-items:center;gap:10px;background:var(--profile-button);color:var(--profile-button-fg);padding:5px 16px;border:1px solid #8884;border-radius:var(--profile-radius)}.profile-search input{flex:1;width:100%;background:transparent;border:0;color:inherit;font-size:13px}.profile-search-empty{text-align:center;font-size:13px;padding:15px;opacity:.7}.gallery-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-size:11px}.gallery-nav button{border:1px solid currentColor;width:32px;height:32px;border-radius:50%;background:transparent;color:inherit;font:22px Arial}.profile-note{border-block-end:1px solid #8885}.profile-note summary{font-weight:bold;cursor:pointer;padding:10px 0}.profile-note p{padding-bottom:15px}
/* 01 Portrait — traditional profile, generous cover and single reading column. */
[data-layout=portrait] .public-profile{max-width:560px}[data-layout=portrait] .profile-cover{height:180px}[data-layout=portrait] .profile-header{padding-bottom:32px}[data-layout=portrait] .profile-link{min-height:68px}
/* 02 Split — vertical identity and content placed side by side. */
[data-layout=split] .public-profile{max-width:860px;display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr);gap:0 35px;align-items:start}[data-layout=split] .profile-cover{grid-area:1/1/3/2;height:100%;min-height:260px;opacity:.25}[data-layout=split] .profile-header{grid-area:1/1/3/2;align-self:center;padding:40px 20px}[data-layout=split] .profile-avatar{margin:0 auto 20px}[data-layout=split] .profile-blocks{grid-area:1/2/4/3}[data-layout=split] .profile-socials{grid-column:1;margin:18px 0}[data-layout=split] .profile-link{background:transparent;color:var(--profile-fg);border:1px solid var(--profile-accent)}
/* 03 Editorial — oversized start-aligned text and narrow magazine rules. */
[data-layout=editorial] .public-profile{max-width:740px;border-top:5px solid var(--profile-accent)}[data-layout=editorial] .profile-cover{height:100px;border-radius:0;margin-block:18px 24px}[data-layout=editorial] .profile-header{text-align:start;padding:0 0 30px;display:grid;grid-template-columns:70px 1fr;gap:4px 20px}[data-layout=editorial] .profile-avatar{width:70px;height:85px;grid-row:span 2;margin:0;border:0;border-radius:50% 50% 0 0}[data-layout=editorial] .profile-header h1{font-size:40px;font-family:Georgia,Wasla,serif}[data-layout=editorial] .profile-header p{margin:0;max-width:none}[data-layout=editorial] .profile-text{text-align:start;border-block:1px solid #8886;padding:25px 0}[data-layout=editorial] .profile-text p{columns:2;column-gap:30px}[data-layout=editorial] .profile-link{border-radius:0;border-width:0 0 1px;background:none;padding-inline:0;color:var(--profile-fg)}
/* 04 Orbit — circular cover, centered profile and paired actions. */
[data-layout=orbit] .public-profile{max-width:660px}[data-layout=orbit] .profile-cover{width:230px;height:230px;border-radius:50%;margin:0 auto -120px;opacity:.4}[data-layout=orbit] .profile-avatar{margin:0 auto 18px;width:115px;height:115px;border-width:7px}[data-layout=orbit] .profile-header{padding:0 35px 35px;position:relative}[data-layout=orbit] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}[data-layout=orbit] .profile-blocks>:not(.profile-link){grid-column:1/-1}[data-layout=orbit] .profile-link{flex-direction:column;text-align:center;gap:12px;padding:24px 15px;border-radius:30px}[data-layout=orbit] .profile-link>.icon:last-child{display:none}
/* 05 Bento — varied card sizes and a featured top-left visual. */
[data-layout=bento] .public-profile{max-width:800px}[data-layout=bento] .profile-cover{height:120px;border-radius:18px}[data-layout=bento] .profile-header{text-align:start;display:grid;grid-template-columns:80px 1fr;gap:0 20px;padding-inline:18px}[data-layout=bento] .profile-avatar{width:80px;height:80px;grid-row:span 2;margin:-25px 0 0}[data-layout=bento] .profile-header h1{margin-top:12px}[data-layout=bento] .profile-header p{margin:5px 0;max-width:none}[data-layout=bento] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}[data-layout=bento] .profile-blocks>:first-child{grid-column:1/-1;min-height:110px}[data-layout=bento] .profile-gallery,[data-layout=bento] .profile-video{grid-column:1/-1}[data-layout=bento] .profile-link{align-items:flex-start;flex-direction:column;min-height:140px}[data-layout=bento] .profile-link>.icon:last-child{align-self:flex-end}[data-layout=bento] .profile-text{background:var(--profile-button);color:var(--profile-button-fg);border-radius:var(--profile-radius);padding:24px}
/* 06 Offset — staggered cards with strong dimensional edges. */
[data-layout=offset] .public-profile{max-width:660px;padding-inline:12px}[data-layout=offset] .profile-cover{height:80px;transform:rotate(-2deg);margin-bottom:20px}[data-layout=offset] .profile-avatar{margin:-45px auto 14px;border-radius:24px;transform:rotate(7deg)}[data-layout=offset] .profile-blocks{gap:24px}[data-layout=offset] .profile-blocks>:nth-child(odd){margin-inline-end:45px}[data-layout=offset] .profile-blocks>:nth-child(even){margin-inline-start:45px}[data-layout=offset] .profile-link{box-shadow:6px 6px var(--profile-accent);border:2px solid var(--profile-accent)}
/* 07 Hero — large cover with overlaid identity and inset content. */
[data-layout=hero] .public-profile{max-width:920px}[data-layout=hero] .profile-cover{height:370px;border-radius:24px}[data-layout=hero] .profile-header{margin:-150px 25px 0;background:var(--profile-bg);border-radius:20px 20px 0 0;padding:0 25px 25px;border:1px solid #8882;border-bottom:0}[data-layout=hero] .profile-avatar{width:110px;height:110px;margin:-55px auto 16px}[data-layout=hero] .profile-header h1{font-size:38px}[data-layout=hero] .profile-blocks{margin-inline:25px;padding:10px 25px 25px;background:var(--profile-bg);border-radius:0 0 20px 20px}[data-layout=hero] .profile-link{padding-block:22px}[data-layout=hero] .profile-socials{margin-top:10px}
/* 08 Business — sticky business card and a dedicated content area. */
[data-layout=business] .public-profile{max-width:900px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}[data-layout=business] .profile-cover{grid-column:1/-1;height:90px;border-radius:0}[data-layout=business] .profile-header{position:sticky;top:24px;text-align:start;padding:28px;background:var(--profile-button);color:var(--profile-button-fg);border:1px solid #8883;border-radius:var(--profile-radius)}[data-layout=business] .profile-avatar{margin:0 0 20px;width:80px;height:80px;border:0}[data-layout=business] .profile-header h1{font-size:26px}[data-layout=business] .profile-header p{margin-inline:0}[data-layout=business] .profile-blocks{grid-column:2;grid-row:2/4}[data-layout=business] .profile-link{border-inline-start:4px solid var(--profile-accent)}[data-layout=business] .profile-socials{grid-column:1;justify-content:start;margin:0}
/* 09 Type — large typography, indexed links, no decorative cover. */
[data-layout=typographic] .public-profile{max-width:700px}[data-layout=typographic] .profile-cover{display:none}[data-layout=typographic] .profile-header{text-align:start;padding:30px 0}[data-layout=typographic] .profile-avatar{width:50px;height:50px;margin:0 0 20px;border:1px solid currentColor;border-radius:0;font-size:25px}[data-layout=typographic] .profile-header h1{font-size:50px;line-height:1.3}[data-layout=typographic] .profile-header p{margin-inline:0;max-width:520px}[data-layout=typographic] .profile-link{background:none;border:0;border-top:1px solid currentColor;border-radius:0;color:var(--profile-fg);padding:24px 0;font-size:18px}[data-layout=typographic] .profile-link:before{content:attr(data-index);font:12px monospace;opacity:.6}[data-layout=typographic] .profile-link>.icon:first-of-type{display:none}[data-layout=typographic] .profile-text{text-align:start;padding-inline:0}
/* 10 Bubbles — a compact floating identity with wraparound action chips. */
[data-layout=bubbles] .public-profile{max-width:700px}[data-layout=bubbles] .profile-cover{width:140px;height:140px;border-radius:50%;margin:10px auto -100px;filter:blur(8px);opacity:.4}[data-layout=bubbles] .profile-avatar{margin:0 auto 16px;box-shadow:0 0 0 12px #ffffff18}[data-layout=bubbles] .profile-blocks{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 12px}[data-layout=bubbles] .profile-link{flex:1 1 40%;max-width:100%;border-radius:60px;text-align:center;min-height:80px;padding-inline:20px;box-shadow:0 8px 0 #00000005}[data-layout=bubbles] .profile-blocks>:not(.profile-link){width:100%}[data-layout=bubbles] .profile-socials a{background:var(--profile-button);color:var(--profile-button-fg);border:0}
/* 11 Portfolio — independent-height masonry columns. */
[data-layout=masonry] .public-profile{max-width:900px}[data-layout=masonry] .profile-cover{height:120px;margin-bottom:25px}[data-layout=masonry] .profile-header{text-align:start;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-inline:0}[data-layout=masonry] .profile-avatar{margin:0;width:70px;height:70px;border:0}[data-layout=masonry] .profile-header p{margin:0;width:100%;max-width:none}[data-layout=masonry] .profile-blocks{display:block;columns:2;column-gap:18px}[data-layout=masonry] .profile-blocks>*{break-inside:avoid;display:block;margin:0 0 18px}[data-layout=masonry] .profile-link{display:flex;flex-direction:column;text-align:center;padding:30px}[data-layout=masonry] .profile-link .icon:first-child{width:38px;height:38px}[data-layout=masonry] .profile-link .icon:last-child{display:none}[data-layout=masonry] .gallery-grid{grid-template-columns:1fr 1fr}[data-layout=masonry] .gallery-grid img{aspect-ratio:4/5}
/* 12 Magazine — masthead and a three-column editorial grid. */
[data-layout=magazine] .public-profile{max-width:1000px}[data-layout=magazine] .profile-cover{height:6px;border-radius:0;margin-bottom:25px}[data-layout=magazine] .profile-header{border-block-end:2px solid currentColor;padding-bottom:25px;display:grid;grid-template-columns:55px 1fr;gap:0 20px;text-align:start}[data-layout=magazine] .profile-avatar{width:55px;height:55px;margin:0;grid-row:span 2;border:0;border-radius:0}[data-layout=magazine] .profile-header h1{font:700 44px/1.4 Georgia,Wasla,serif}[data-layout=magazine] .profile-header p{margin:7px 0;max-width:none}[data-layout=magazine] .profile-blocks{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:25px}[data-layout=magazine] .profile-gallery,[data-layout=magazine] .profile-video{grid-column:span 2}[data-layout=magazine] .profile-link{flex-direction:column;justify-content:space-between;align-items:start;border-radius:0;min-height:180px;padding:22px;border:0;border-block:1px solid #8886}[data-layout=magazine] .profile-text{text-align:start;border-inline-start:1px solid #8885;padding:10px 20px}[data-layout=magazine] .profile-image img{aspect-ratio:4/5;object-fit:cover}
/* 13 Spotlight — oversized avatar and the first item in a spotlight card. */
[data-layout=spotlight] .public-profile{max-width:620px}[data-layout=spotlight] .profile-cover{height:80px;width:80%;margin:auto;border-radius:50% 50% 0 0;opacity:.2}[data-layout=spotlight] .profile-avatar{width:155px;height:155px;margin:-45px auto 20px;font-size:65px}[data-layout=spotlight] .profile-header h1{font-size:32px}[data-layout=spotlight] .profile-blocks>:first-child{min-height:150px;background:var(--profile-accent);color:var(--profile-bg);font-size:20px;padding:26px;box-shadow:0 15px 35px #0001}[data-layout=spotlight] .profile-blocks>:first-child>.icon:first-child{width:40px;height:40px}[data-layout=spotlight] .profile-link:not(:first-child){margin-inline:15px}
/* 14 Contact — horizontal identity card, small paired contact buttons. */
[data-layout=contact] .public-profile{max-width:620px;border:1px solid #8884;border-radius:18px;overflow:hidden;background:var(--profile-button);color:var(--profile-button-fg);box-shadow:0 18px 50px #0001}[data-layout=contact] .profile-cover{height:65px;border-radius:0}[data-layout=contact] .profile-header{display:grid;grid-template-columns:78px 1fr;gap:8px 18px;padding:26px;text-align:start}[data-layout=contact] .profile-avatar{grid-row:span 2;width:78px;height:78px;margin:0;border:0;border-radius:10px}[data-layout=contact] .profile-header h1{font-size:25px}[data-layout=contact] .profile-header p{margin:0;max-width:none;font-size:13px}[data-layout=contact] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 25px 25px;gap:10px}[data-layout=contact] .profile-blocks>:not(.profile-link){grid-column:1/-1}[data-layout=contact] .profile-link{padding:14px;min-height:55px;font-size:12px;background:var(--profile-bg);color:var(--profile-fg)}[data-layout=contact] .profile-link>.icon:last-child{display:none}[data-layout=contact] .profile-socials{border-top:1px solid #8883;margin:0;padding:20px}
/* 15 Menu — compact searchable rows and numbered entries. */
[data-layout=menu] .public-profile{max-width:650px}[data-layout=menu] .profile-cover{height:135px;border-radius:0}[data-layout=menu] .profile-avatar{width:80px;height:80px;border-radius:50%;margin-top:-40px}[data-layout=menu] .profile-blocks{gap:0}[data-layout=menu] .profile-link{background:none;color:var(--profile-fg);border:0;border-bottom:1px dashed #8888;border-radius:0;padding:21px 10px}[data-layout=menu] .profile-link:before{content:attr(data-index);font:11px monospace;opacity:.5}[data-layout=menu] .profile-link>.icon:first-child{display:none}[data-layout=menu] .profile-text{text-align:start;background:var(--profile-accent);color:var(--profile-bg);padding:16px 20px;margin-block:20px 10px}[data-layout=menu] .profile-text h2{font-size:17px;margin:0}[data-layout=menu] .profile-gallery{margin-block:25px}
/* 16 Products — square product tiles with large icon artwork. */
[data-layout=products] .public-profile{max-width:820px}[data-layout=products] .profile-cover{height:160px}[data-layout=products] .profile-header{padding-bottom:35px}[data-layout=products] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}[data-layout=products] .profile-link{flex-direction:column;align-items:center;text-align:center;padding:25px;min-height:220px;font-weight:bold}[data-layout=products] .profile-link>.icon:first-child{width:55px;height:55px;padding:10px;border:1px solid #8884;border-radius:15px;margin:10px}[data-layout=products] .profile-link>.icon:last-child{align-self:flex-end}[data-layout=products] .profile-text,[data-layout=products] .profile-gallery,[data-layout=products] .profile-video{grid-column:1/-1}[data-layout=products] .profile-image img{aspect-ratio:1;object-fit:cover}
/* 17 Event — striking poster composition with oversized display type. */
[data-layout=poster] .public-profile{max-width:760px;padding:30px;border:3px solid var(--profile-fg);position:relative}[data-layout=poster] .profile-cover{height:210px;border-radius:0}[data-layout=poster] .profile-header{padding:25px 0;border-block:2px solid currentColor;margin-block:20px;text-align:start}[data-layout=poster] .profile-avatar{display:none}[data-layout=poster] .profile-header h1{font-size:64px;line-height:1.2;font-weight:900}[data-layout=poster] .profile-header p{max-width:none;margin-inline:0}[data-layout=poster] .profile-link{border:2px solid currentColor;border-radius:0;font-size:17px;box-shadow:5px 5px var(--profile-fg)}[data-layout=poster] .profile-blocks{gap:20px}[data-layout=poster] .profile-text{text-align:start;padding-inline:0}[data-layout=poster] .profile-socials{justify-content:start}
/* 18 Journey — all content placed along a numbered timeline. */
[data-layout=timeline] .public-profile{max-width:660px}[data-layout=timeline] .profile-cover{height:80px;border-radius:0}[data-layout=timeline] .profile-header{text-align:start;padding-inline:0;margin-bottom:20px}[data-layout=timeline] .profile-avatar{margin:-40px 0 15px;width:80px;height:80px}[data-layout=timeline] .profile-header p{margin-inline:0}[data-layout=timeline] .profile-blocks{border-inline-start:2px solid var(--profile-accent);padding-inline-start:36px;gap:25px}[data-layout=timeline] .profile-blocks>*{position:relative;overflow:visible}[data-layout=timeline] .profile-blocks>*:before{content:attr(data-index);position:absolute;inset-inline-start:-54px;top:20px;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--profile-accent);background:var(--profile-bg);color:var(--profile-fg);font:11px monospace;border-radius:50%}[data-layout=timeline] .profile-text{background:var(--profile-button);color:var(--profile-button-fg);border-radius:var(--profile-radius);text-align:start;padding:22px}
/* 19 Cinema — a wide dark stage and theatrical media framing. */
[data-layout=cinema] .public-profile{max-width:960px}[data-layout=cinema] .profile-cover{height:240px;border-radius:0;mask-image:linear-gradient(#000,transparent)}[data-layout=cinema] .profile-header{margin-top:-90px;padding-bottom:35px}[data-layout=cinema] .profile-avatar{border:2px solid var(--profile-accent);margin:0 auto 15px;width:76px;height:76px}[data-layout=cinema] .profile-header h1{font-size:38px;letter-spacing:1px}[data-layout=cinema] .profile-blocks{grid-template-columns:1fr 1fr}[data-layout=cinema] .profile-video,[data-layout=cinema] .profile-gallery,[data-layout=cinema] .profile-image{grid-column:1/-1;border:1px solid #8884;padding:15px;border-radius:var(--profile-radius)}[data-layout=cinema] .profile-video video{max-height:540px}[data-layout=cinema] .video-placeholder{min-height:320px;background:#080b0d;color:var(--profile-accent)}[data-layout=cinema] .profile-link{border-color:#8885;min-height:75px}
/* 20 Record — vinyl portrait, track rows and horizontal gallery. */
[data-layout=record] .public-profile{max-width:640px}[data-layout=record] .profile-cover{display:none}[data-layout=record] .profile-avatar{width:165px;height:165px;margin:28px auto 26px;border:28px solid #252323;outline:1px solid #888;box-shadow:0 0 0 7px #323030,0 0 0 8px #6665}[data-layout=record] .profile-header{padding-bottom:30px}[data-layout=record] .profile-link{border:0;border-bottom:1px solid #8885;border-radius:0;background:none;color:var(--profile-fg);padding:17px 5px}[data-layout=record] .profile-link:before{content:attr(data-index);font:12px monospace;opacity:.5}[data-layout=record] .profile-link>.icon:first-child{display:none}[data-layout=record] .gallery-grid{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding-bottom:10px}[data-layout=record] .gallery-grid .image-open{flex:0 0 75%;scroll-snap-align:center}[data-layout=record] .gallery-grid img{aspect-ratio:4/3}
/* 21 Photography — immersive edge-to-edge image presentation. */
[data-layout=photography] .public-profile{max-width:1100px}[data-layout=photography] .profile-cover{height:350px;border-radius:0}[data-layout=photography] .profile-header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:25px 0;text-align:start}[data-layout=photography] .profile-avatar{width:50px;height:50px;margin:0;border:0;border-radius:0;font-size:25px}[data-layout=photography] .profile-header h1{font-size:24px}[data-layout=photography] .profile-header p{flex:1;max-width:none;margin:0;min-width:200px;font-size:12px}[data-layout=photography] .profile-blocks{gap:24px}[data-layout=photography] .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}[data-layout=photography] .gallery-grid .image-open:first-child{grid-column:1/-1}[data-layout=photography] .gallery-grid img{aspect-ratio:3/2;border-radius:0}[data-layout=photography] .profile-gallery h2{text-align:start;margin-block:5px 15px}[data-layout=photography] .profile-image{border-radius:0}[data-layout=photography] .profile-image img{max-height:none;object-fit:cover}[data-layout=photography] .profile-link{background:transparent;border:1px solid #8885;color:var(--profile-fg);border-radius:0}
/* 22 Boutique — tall editorial cover and fine product cards. */
[data-layout=boutique] .public-profile{max-width:780px}[data-layout=boutique] .profile-cover{height:300px;border-radius:45% 45% 0 0;max-width:400px;margin:auto}[data-layout=boutique] .profile-header{padding:24px 10px 30px}[data-layout=boutique] .profile-avatar{width:60px;height:60px;margin:-54px auto 18px;border-radius:0;border:3px solid var(--profile-bg)}[data-layout=boutique] .profile-header h1{font:700 35px/1.5 Georgia,Wasla,serif}[data-layout=boutique] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}[data-layout=boutique] .profile-link{display:grid;grid-template-columns:1fr auto;min-height:150px;padding:24px;border:1px solid var(--profile-accent);border-radius:0}[data-layout=boutique] .profile-link>.icon:first-child{grid-column:1/-1;width:28px;height:28px;margin-bottom:15px}[data-layout=boutique] .profile-text,[data-layout=boutique] .profile-gallery{grid-column:1/-1}[data-layout=boutique] .gallery-grid img{aspect-ratio:3/4}
/* 23 Table — restaurant paper menu with double borders. */
[data-layout=restaurant] .public-profile{max-width:800px;border:6px double var(--profile-accent);padding:30px}[data-layout=restaurant] .profile-cover{height:100px;border-radius:50% 50% 0 0;max-width:220px;margin:auto}[data-layout=restaurant] .profile-avatar{width:65px;height:65px;margin:-32px auto 12px}[data-layout=restaurant] .profile-header h1{font:700 34px/1.5 Georgia,Wasla,serif}[data-layout=restaurant] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}[data-layout=restaurant] .profile-link{border:0;border-bottom:1px dashed var(--profile-accent);border-radius:0;background:none;color:var(--profile-fg);padding:24px 0;display:block}[data-layout=restaurant] .profile-link>.icon:first-child{width:17px;margin-inline-end:10px}[data-layout=restaurant] .profile-link>.icon:last-child{display:none}[data-layout=restaurant] .profile-gallery,[data-layout=restaurant] .profile-text{grid-column:1/-1}[data-layout=restaurant] .profile-text{border-block:3px double var(--profile-accent);margin-top:25px;padding:20px 0}
/* 24 Studio — horizontal studio header and service columns. */
[data-layout=agency] .public-profile{max-width:1050px;display:flex;flex-direction:column}[data-layout=agency] .profile-header{order:-1;display:grid;grid-template-columns:70px 1fr 1.2fr;gap:24px;align-items:center;text-align:start;padding:30px 0}[data-layout=agency] .profile-avatar{margin:0;width:70px;height:70px;border:0;border-radius:8px}[data-layout=agency] .profile-header h1{font-size:32px}[data-layout=agency] .profile-header p{margin:0;max-width:none;font-size:13px}[data-layout=agency] .profile-cover{height:240px;border-radius:0;margin-bottom:25px}[data-layout=agency] .profile-blocks{grid-template-columns:repeat(3,minmax(0,1fr))}[data-layout=agency] .profile-link{flex-direction:column;align-items:start;padding:24px;min-height:160px;border-radius:0;border-top:3px solid var(--profile-accent)}[data-layout=agency] .profile-gallery,[data-layout=agency] .profile-video{grid-column:1/-1}[data-layout=agency] .profile-text{grid-column:span 2;text-align:start;padding:25px}
/* 25 Step — large welcome card with a highlighted next action. */
[data-layout=coach] .public-profile{max-width:700px;position:relative}[data-layout=coach] .profile-cover{height:160px;border-radius:28px 28px 0 0}[data-layout=coach] .profile-header{padding:0 30px 30px;background:var(--profile-button);color:var(--profile-button-fg);border-radius:0 0 28px 28px;margin-bottom:30px;border:1px solid #8882;border-top:0}[data-layout=coach] .profile-avatar{width:115px;height:115px;border-radius:36px;margin-top:-57px}[data-layout=coach] .profile-header h1{font-size:32px}[data-layout=coach] .profile-blocks>.profile-link:first-child{background:var(--profile-accent);color:var(--profile-bg);border-radius:50px;min-height:75px;font-weight:bold}[data-layout=coach] .profile-text{padding:25px 30px;text-align:start;border-inline-start:4px solid var(--profile-accent);background:#ffffff30;border-radius:0 16px 16px 0}
/* 26 Blueprint — measured grid, numbered cards and square details. */
[data-layout=blueprint]{background-image:linear-gradient(#8098ad12 1px,transparent 1px),linear-gradient(90deg,#8098ad12 1px,transparent 1px);background-size:24px 24px}[data-layout=blueprint] .public-profile{max-width:900px;border:1px solid var(--profile-accent);padding:24px}[data-layout=blueprint] .profile-cover{height:160px;border:1px solid var(--profile-accent);border-radius:0}[data-layout=blueprint] .profile-header{display:grid;grid-template-columns:55px 1fr;text-align:start;gap:12px 20px;padding:25px 0}[data-layout=blueprint] .profile-avatar{margin:0;width:55px;height:55px;border:1px solid var(--profile-accent);border-radius:0;grid-row:span 2;font-size:25px}[data-layout=blueprint] .profile-header p{margin:0;max-width:none}[data-layout=blueprint] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}[data-layout=blueprint] .profile-link{border:1px solid var(--profile-accent);border-radius:0;background:transparent;color:var(--profile-fg);min-height:120px;position:relative;padding-top:35px}[data-layout=blueprint] .profile-link:before{content:attr(data-index);position:absolute;top:6px;inset-inline-start:10px;font:10px monospace}[data-layout=blueprint] .profile-text,[data-layout=blueprint] .profile-gallery{grid-column:1/-1;border:1px solid var(--profile-accent);padding:20px}
/* 27 Neon — computer-terminal header and a matrix of links. */
[data-layout=neon] .public-profile{max-width:780px;border:1px solid var(--profile-accent);padding:20px;border-radius:8px}[data-layout=neon] .profile-cover{height:12px;border-radius:0;border-bottom:1px solid var(--profile-accent);opacity:.7}[data-layout=neon] .profile-header{text-align:start;padding:30px 5px;position:relative}[data-layout=neon] .profile-header:before{content:'● ● ●';position:absolute;top:-22px;left:5px;letter-spacing:6px;font-size:7px;color:var(--profile-accent)}[data-layout=neon] .profile-avatar{float:inline-end;width:66px;height:66px;margin:0 15px;border:1px solid var(--profile-accent);border-radius:4px;font-size:30px}[data-layout=neon] .profile-header p{margin-inline:0}[data-layout=neon] .profile-header h1{font-size:30px}[data-layout=neon] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}[data-layout=neon] .profile-link{border:1px solid var(--profile-accent);border-radius:4px;flex-direction:column;align-items:start;min-height:135px}[data-layout=neon] .profile-gallery,[data-layout=neon] .profile-video,[data-layout=neon] .profile-text{grid-column:1/-1}[data-layout=neon] .profile-link>.icon:first-child{color:var(--profile-accent)}
/* 28 Glass — a floating glass sheet and inset translucent cards. */
[data-layout=glass]{background-image:radial-gradient(ellipse at 20% 5%,#ffffffa0,transparent 40%),radial-gradient(ellipse at 90% 90%,#628d8750,transparent 50%)}[data-layout=glass] .public-profile{max-width:620px;background:#ffffff30;backdrop-filter:blur(12px);border:1px solid #ffffff80;border-radius:35px;padding:24px;box-shadow:0 25px 80px #274c4020}[data-layout=glass] .profile-cover{height:90px;opacity:.25;border-radius:22px}[data-layout=glass] .profile-avatar{margin:-45px auto 18px;border:4px solid #ffffff90;width:95px;height:95px}[data-layout=glass] .profile-link{background:color-mix(in srgb,var(--profile-button) 60%,transparent);border:1px solid #ffffffa0;border-radius:18px;box-shadow:inset 0 1px #ffffff90}[data-layout=glass] .profile-file{background:#ffffff50;border-color:#ffffff90}[data-layout=glass] .profile-text{border-radius:18px;background:#ffffff25}
/* 29 Polaroid — instant photo frames and alternating rotated cards. */
[data-layout=polaroid] .public-profile{max-width:750px;padding:15px}[data-layout=polaroid] .profile-cover{height:200px;border:10px solid var(--profile-button);border-bottom-width:35px;border-radius:0;transform:rotate(-3deg);width:85%;margin:10px auto 25px;box-shadow:0 10px 20px #0002}[data-layout=polaroid] .profile-avatar{margin:-60px auto 15px;width:85px;height:85px;border-radius:0;border:6px solid var(--profile-button);transform:rotate(6deg)}[data-layout=polaroid] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 20px;padding:10px}[data-layout=polaroid] .profile-blocks>:nth-child(odd){transform:rotate(-1.5deg)}[data-layout=polaroid] .profile-blocks>:nth-child(even){transform:rotate(1.5deg)}[data-layout=polaroid] .profile-link{flex-direction:column;text-align:center;padding:25px 15px;min-height:170px;border:0;border-radius:0;box-shadow:0 8px 20px #0001}[data-layout=polaroid] .profile-image{border:10px solid var(--profile-button);border-bottom-width:15px;border-radius:0;box-shadow:0 10px 20px #0002}[data-layout=polaroid] .profile-gallery{grid-column:1/-1}[data-layout=polaroid] .gallery-grid .image-open{padding:7px 7px 23px;background:var(--profile-button);box-shadow:0 6px 14px #0001;transform:rotate(-2deg)}[data-layout=polaroid] .gallery-grid .image-open:nth-child(even){transform:rotate(3deg)}[data-layout=polaroid] .profile-text{grid-column:1/-1;text-align:start}
/* 30 Notebook — ruled paper, margin rail and collapsible notes. */
[data-layout=notebook] .public-profile{max-width:700px;background:repeating-linear-gradient(transparent,transparent 31px,#82947926 31px,#82947926 32px);border-inline-start:3px solid #b2737370;padding:0 28px 20px;position:relative}[data-layout=notebook] .public-profile:before{content:'';position:absolute;inset-inline-start:-16px;top:10px;bottom:0;width:8px;background:radial-gradient(circle,#7b8474 2px,transparent 3px);background-size:8px 32px}[data-layout=notebook] .profile-cover{height:65px;border-radius:0;background:none;border-bottom:3px double var(--profile-accent);margin-bottom:20px}[data-layout=notebook] .profile-cover span{display:none}[data-layout=notebook] .profile-header{text-align:start;padding:0 0 24px;display:grid;grid-template-columns:60px 1fr;gap:10px 20px}[data-layout=notebook] .profile-avatar{width:60px;height:60px;margin:0;border:1px solid currentColor;border-radius:12px;grid-row:span 2;font-size:28px}[data-layout=notebook] .profile-header p{margin:0;max-width:none}[data-layout=notebook] .profile-link{border:0;background:transparent;color:var(--profile-fg);border-bottom:1px solid #8885;border-radius:0;padding:20px 4px}[data-layout=notebook] .profile-text{text-align:start;padding:0 4px}[data-layout=notebook] .profile-note summary{font-size:17px}[data-layout=notebook] .profile-note p{line-height:32px}
/* Explicit opt-in effects. Nothing is hidden while JavaScript loads. */
[data-motion=reveal] .profile-header,[data-motion=reveal] .profile-blocks>*{animation:wasla-enter .6s both}[data-motion=reveal] .profile-blocks>:nth-child(2){animation-delay:.06s}[data-motion=reveal] .profile-blocks>:nth-child(3){animation-delay:.12s}[data-motion=reveal] .profile-blocks>:nth-child(n+4){animation-delay:.18s}[data-motion=lift] .profile-link:hover,[data-motion=lift] .profile-link:focus-visible,[data-motion=lift] .image-open:hover{translate:0 -4px;box-shadow:0 10px 25px #0002;transition:translate .2s,box-shadow .2s}[data-motion=glow] .profile-link:hover,[data-motion=glow] .profile-link:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--profile-accent) 25%,transparent),0 0 22px color-mix(in srgb,var(--profile-accent) 22%,transparent);transition:box-shadow .25s}[data-motion=none] .profile-link{transform:none}[data-motion=none] .profile-link:hover{transform:none}@keyframes wasla-enter{from{opacity:.35;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes wasla-glow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--profile-accent) 25%,transparent),0 0 22px color-mix(in srgb,var(--profile-accent) 22%,transparent)}}
/* Container rules also keep the editor phone preview faithful to mobile. */
@container (max-width:620px){[data-layout=split] .public-profile,[data-layout=business] .public-profile{display:block;max-width:580px}[data-layout=split] .profile-cover{height:140px;min-height:0;margin-bottom:-90px}[data-layout=split] .profile-header{padding:0 18px 25px}[data-layout=split] .profile-avatar{margin:0 auto 15px}[data-layout=business] .profile-cover{height:80px;margin-bottom:16px}[data-layout=business] .profile-header{position:relative;top:auto;margin-bottom:22px;display:grid;grid-template-columns:65px 1fr;gap:8px 16px;padding:20px}[data-layout=business] .profile-avatar{width:65px;height:65px;grid-row:span 2;margin:0}[data-layout=business] .profile-header h1{font-size:23px}[data-layout=business] .profile-header p{margin:0}[data-layout=business] .profile-socials{margin-top:22px}[data-layout=editorial] .profile-header h1{font-size:29px}[data-layout=editorial] .profile-text p{columns:1}[data-layout=orbit] .profile-cover{width:190px;height:190px;margin-bottom:-100px}[data-layout=orbit] .profile-avatar{width:95px;height:95px}[data-layout=orbit] .profile-link{padding:20px 12px;font-size:12px}[data-layout=bento] .profile-header h1{font-size:24px}[data-layout=hero] .profile-cover{height:250px}[data-layout=hero] .profile-header{margin:-80px 12px 0;padding-inline:18px}[data-layout=hero] .profile-header h1{font-size:30px}[data-layout=hero] .profile-blocks{margin-inline:12px;padding-inline:16px}[data-layout=typographic] .profile-header h1{font-size:40px}[data-layout=typographic] .profile-link{font-size:16px}[data-layout=bubbles] .profile-link{gap:8px;font-size:12px;padding-inline:15px}[data-layout=magazine] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}[data-layout=magazine] .profile-header h1{font-size:29px}[data-layout=magazine] .profile-text{grid-column:1/-1}[data-layout=magazine] .profile-link{font-size:12px;padding:16px;min-height:145px}[data-layout=spotlight] .profile-avatar{width:130px;height:130px}[data-layout=contact] .profile-blocks{padding-inline:18px}[data-layout=contact] .profile-header{padding:22px 18px;grid-template-columns:65px 1fr}[data-layout=contact] .profile-avatar{width:65px;height:65px}[data-layout=contact] .profile-link{font-size:11px;gap:8px}[data-layout=products] .profile-link{min-height:180px;padding:18px 12px;font-size:12px}[data-layout=products] .profile-link>.icon:first-child{width:45px;height:45px}[data-layout=poster] .public-profile{padding:20px}[data-layout=poster] .profile-header h1{font-size:44px}[data-layout=poster] .profile-cover{height:160px}[data-layout=cinema] .profile-cover{height:190px}[data-layout=cinema] .profile-header h1{font-size:29px}[data-layout=cinema] .profile-link{font-size:12px;padding:16px}[data-layout=cinema] .video-placeholder{min-height:210px}[data-layout=photography] .profile-cover{height:240px}[data-layout=boutique] .profile-cover{height:230px;max-width:300px}[data-layout=boutique] .profile-link{font-size:12px;padding:18px}[data-layout=restaurant] .public-profile{padding:20px}[data-layout=restaurant] .profile-blocks{gap:0 18px}[data-layout=restaurant] .profile-link{font-size:12px}[data-layout=agency] .profile-header{grid-template-columns:60px 1fr;gap:12px 18px}[data-layout=agency] .profile-header p{grid-column:1/-1}[data-layout=agency] .profile-avatar{width:60px;height:60px}[data-layout=agency] .profile-header h1{font-size:28px}[data-layout=agency] .profile-cover{height:180px}[data-layout=agency] .profile-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}[data-layout=agency] .profile-link{font-size:12px;padding:18px}[data-layout=blueprint] .public-profile,[data-layout=neon] .public-profile{padding:16px}[data-layout=blueprint] .profile-link,[data-layout=neon] .profile-link{font-size:12px;padding:30px 12px 15px}[data-layout=neon] .profile-header h1{font-size:26px}[data-layout=glass] .public-profile{padding:18px;border-radius:25px}[data-layout=polaroid] .public-profile{padding:8px}[data-layout=polaroid] .profile-link{min-height:140px;font-size:12px;padding:20px 12px}[data-layout=notebook] .public-profile{padding-inline:20px}[data-layout=notebook] .profile-header{grid-template-columns:50px 1fr;gap:10px 15px}[data-layout=notebook] .profile-avatar{width:50px;height:50px}[data-layout=notebook] .profile-header h1{font-size:24px}}
@container (max-width:360px){[data-layout=offset] .profile-blocks>:nth-child(odd){margin-inline-end:20px}[data-layout=offset] .profile-blocks>:nth-child(even){margin-inline-start:20px}[data-layout=masonry] .profile-blocks{column-gap:12px}[data-layout=masonry] .profile-link{padding:18px 10px;font-size:12px}[data-layout=masonry] .gallery-grid{grid-template-columns:1fr}[data-layout=hero] .profile-header,[data-layout=hero] .profile-blocks{margin-inline:5px}[data-layout=timeline] .profile-blocks{padding-inline-start:28px}[data-layout=timeline] .profile-blocks>*:before{inset-inline-start:-45px}[data-layout=bubbles] .profile-link{flex-basis:100%}[data-layout=poster] .profile-header h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){[data-motion] *,[data-motion] *:before{animation:none!important;transition:none!important;translate:none!important;scroll-behavior:auto!important}}
/* Catalog thumbnails echo the actual composition, not just the palette. */
.templates-directory{max-width:1240px}.templates-directory h1{font-size:38px;line-height:1.5}.template-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.template-filters button{border:1px solid var(--border);background:var(--surface);border-radius:9px;padding:9px 18px;color:var(--muted);font-size:13px}.template-filters button.active{background:var(--primary);color:var(--bg);border-color:transparent}.templates-directory .templates-grid,.home-templates{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 22px}.template-card[hidden]{display:none}.template-description{font-size:11px;line-height:1.8;color:var(--muted);margin-top:8px;min-height:40px}.template-directory-note{margin-top:40px;padding:20px;border-top:1px solid var(--border);color:var(--muted);font-size:13px;text-align:center}.demo-caption{font-size:10px;margin-inline-start:15px;color:var(--muted)}
.layout-thumb{height:270px;background:var(--thumb-bg);color:var(--thumb-fg);padding:18px;border-radius:15px;overflow:hidden;position:relative;border:1px solid #8882;transition:translate .2s,box-shadow .2s}.template-card:hover .layout-thumb{translate:0 -4px;box-shadow:var(--shadow)}.lt-cover{height:57px;background:var(--thumb-accent);opacity:.5;border-radius:calc(var(--thumb-radius) / 2);position:relative;overflow:hidden}.lt-cover:before{content:'';position:absolute;width:70%;height:60px;bottom:-30px;left:-10%;background:var(--thumb-bg);border-radius:50%;transform:rotate(20deg)}.lt-cover:after{content:'';position:absolute;width:25px;height:25px;top:9px;right:20%;background:var(--thumb-bg);border-radius:50%}.lt-head{position:relative;text-align:center;padding:0 0 13px}.lt-head>b{display:block;width:32px;height:32px;background:var(--thumb-accent);border:3px solid var(--thumb-bg);border-radius:50%;margin:-16px auto 6px}.lt-head>div>i{display:block;width:48%;height:4px;margin:5px auto;background:var(--thumb-fg);opacity:.6;border-radius:2px}.lt-head>div>i:last-child{width:70%;height:2px;opacity:.25}.lt-content{display:grid;gap:7px}.lt-content>span{display:flex;align-items:center;justify-content:center;height:22px;background:var(--thumb-card);border:1px solid #8882;border-radius:calc(var(--thumb-radius) / 2);min-width:0;position:relative}.lt-content>span>i{display:block;width:45%;height:2px;background:var(--thumb-fg);opacity:.35}.lt-content>.lt-picture{height:39px;gap:4px;background:none;border:0}.lt-content>.lt-picture>i{width:31%;height:100%;background:var(--thumb-accent);opacity:.55;border-radius:4px}.lt-content>.lt-picture>i:nth-child(2){opacity:.3}.lt-social{text-align:center;font-size:9px;letter-spacing:5px;margin-top:10px;opacity:.5}
.layout-thumb[data-layout=split]{display:grid;grid-template-columns:35% 1fr;gap:12px;align-content:center}.layout-thumb[data-layout=split] .lt-cover{grid-area:1/1/3/2;height:130px}.layout-thumb[data-layout=split] .lt-head{grid-area:1/1/2/2;align-self:center;padding-top:20px}.layout-thumb[data-layout=split] .lt-head>b{margin:0 auto 10px}.layout-thumb[data-layout=split] .lt-content{grid-area:1/2/3/3}.layout-thumb[data-layout=split] .lt-content>span{border:1px solid var(--thumb-accent);background:none}.layout-thumb[data-layout=split] .lt-social{grid-column:1/-1}
.layout-thumb[data-layout=editorial]{border-top:5px solid var(--thumb-accent);border-radius:0}.layout-thumb[data-layout=editorial] .lt-cover{height:35px;margin-bottom:12px;border-radius:0}.layout-thumb[data-layout=editorial] .lt-head{display:flex;align-items:center;gap:8px}.layout-thumb[data-layout=editorial] .lt-head>b{margin:0;width:25px;height:35px;border-radius:40% 40% 0 0}.layout-thumb[data-layout=editorial] .lt-head>div{flex:1}.layout-thumb[data-layout=editorial] .lt-head>div>i:first-child{height:10px;width:85%}.layout-thumb[data-layout=editorial] .lt-content>span{background:none;border:0;border-bottom:1px solid #8886;border-radius:0}
.layout-thumb[data-layout=orbit] .lt-cover{width:85px;height:85px;border-radius:50%;margin:0 auto -60px}.layout-thumb[data-layout=orbit] .lt-head{padding-top:24px;margin-bottom:12px}.layout-thumb[data-layout=orbit] .lt-head>b{width:43px;height:43px;margin:0 auto 8px}.layout-thumb[data-layout=orbit] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=orbit] .lt-content>span{height:35px;border-radius:20px}.layout-thumb[data-layout=orbit] .lt-picture{grid-column:1/-1}
.layout-thumb[data-layout=bento] .lt-cover{height:40px}.layout-thumb[data-layout=bento] .lt-head{display:flex;gap:7px;align-items:center;padding-top:5px}.layout-thumb[data-layout=bento] .lt-head>b{margin:-15px 0 0;flex-shrink:0}.layout-thumb[data-layout=bento] .lt-head>div{flex:1}.layout-thumb[data-layout=bento] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=bento] .lt-content>span{height:36px}.layout-thumb[data-layout=bento] .lt-content>span:first-child{grid-column:1/-1;height:34px}.layout-thumb[data-layout=bento] .lt-picture{grid-row:span 2;height:auto}
.layout-thumb[data-layout=offset] .lt-cover{height:30px;transform:rotate(-3deg);margin-bottom:15px}.layout-thumb[data-layout=offset] .lt-head>b{border-radius:10px;transform:rotate(7deg)}.layout-thumb[data-layout=offset] .lt-content{gap:9px}.layout-thumb[data-layout=offset] .lt-content>span{box-shadow:3px 3px var(--thumb-accent)}.layout-thumb[data-layout=offset] .lt-content>span:nth-child(odd){margin-inline-end:23px}.layout-thumb[data-layout=offset] .lt-content>span:nth-child(even){margin-inline-start:23px}
.layout-thumb[data-layout=hero]{padding:10px}.layout-thumb[data-layout=hero] .lt-cover{height:125px}.layout-thumb[data-layout=hero] .lt-head{margin:-35px 12px 0;background:var(--thumb-bg);padding:0 10px 10px;border-radius:10px 10px 0 0}.layout-thumb[data-layout=hero] .lt-head>b{width:38px;height:38px;translate:0 -12px;margin-bottom:-6px}.layout-thumb[data-layout=hero] .lt-content{margin-inline:12px;padding:0 10px}.layout-thumb[data-layout=hero] .lt-content>span{height:18px}.layout-thumb[data-layout=hero] .lt-picture{height:27px}
.layout-thumb[data-layout=business]{display:grid;grid-template-columns:38% 1fr;gap:12px}.layout-thumb[data-layout=business] .lt-cover{height:40px;grid-column:1/-1}.layout-thumb[data-layout=business] .lt-head{background:var(--thumb-card);padding:15px 7px;border-radius:8px;height:120px}.layout-thumb[data-layout=business] .lt-head>b{margin:0 auto 12px}.layout-thumb[data-layout=business] .lt-head>div>i{width:80%}.layout-thumb[data-layout=business] .lt-content{grid-column:2;grid-row:2/4}.layout-thumb[data-layout=business] .lt-content>span{border-inline-start:3px solid var(--thumb-accent)}.layout-thumb[data-layout=business] .lt-social{margin-top:-12px}
.layout-thumb[data-layout=typographic] .lt-cover{display:none}.layout-thumb[data-layout=typographic] .lt-head{text-align:start;padding-top:16px;margin-bottom:15px}.layout-thumb[data-layout=typographic] .lt-head>b{margin:0 0 18px;border-radius:0;width:23px;height:23px;border:1px solid currentColor;background:none}.layout-thumb[data-layout=typographic] .lt-head>div>i{height:12px;width:85%;margin-inline:0}.layout-thumb[data-layout=typographic] .lt-head>div>i:last-child{height:3px;width:70%}.layout-thumb[data-layout=typographic] .lt-content>span{height:28px;background:none;border:0;border-top:1px solid currentColor;border-radius:0}.layout-thumb[data-layout=typographic] .lt-content>span:before{content:'01';font:6px monospace;position:absolute;left:2px;top:9px;opacity:.5}
.layout-thumb[data-layout=bubbles] .lt-cover{height:60px;width:70px;margin:10px auto -30px;border-radius:50%;opacity:.2}.layout-thumb[data-layout=bubbles] .lt-head>b{margin:0 auto 10px}.layout-thumb[data-layout=bubbles] .lt-content{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.layout-thumb[data-layout=bubbles] .lt-content>span{width:44%;height:32px;border-radius:40px}.layout-thumb[data-layout=bubbles] .lt-picture{width:100%;height:40px}
.layout-thumb[data-layout=masonry] .lt-cover{height:35px;margin-bottom:12px}.layout-thumb[data-layout=masonry] .lt-head{display:flex;align-items:center;gap:10px}.layout-thumb[data-layout=masonry] .lt-head>b{margin:0;width:25px;height:25px}.layout-thumb[data-layout=masonry] .lt-head>div{flex:1}.layout-thumb[data-layout=masonry] .lt-content{display:block;columns:2;column-gap:8px}.layout-thumb[data-layout=masonry] .lt-content>span{height:45px;margin-bottom:8px;break-inside:avoid}.layout-thumb[data-layout=masonry] .lt-content>span:nth-child(2){height:65px}.layout-thumb[data-layout=masonry] .lt-picture{height:72px;display:block}.layout-thumb[data-layout=masonry] .lt-picture i{width:100%;height:100%;display:none}.layout-thumb[data-layout=masonry] .lt-picture i:first-child{display:block}
.layout-thumb[data-layout=magazine] .lt-cover{height:4px;border-radius:0;margin-bottom:15px}.layout-thumb[data-layout=magazine] .lt-head{display:flex;gap:10px;align-items:center;border-bottom:2px solid currentColor;padding-bottom:15px;margin-bottom:13px}.layout-thumb[data-layout=magazine] .lt-head>b{margin:0;border-radius:0;width:20px;height:20px}.layout-thumb[data-layout=magazine] .lt-head>div{flex:1}.layout-thumb[data-layout=magazine] .lt-head i:first-child{height:12px;width:90%}.layout-thumb[data-layout=magazine] .lt-content{grid-template-columns:repeat(3,1fr)}.layout-thumb[data-layout=magazine] .lt-content>span{height:65px;border-radius:0}.layout-thumb[data-layout=magazine] .lt-picture{grid-column:span 2;height:75px}
.layout-thumb[data-layout=spotlight] .lt-cover{height:30px;width:70%;margin:15px auto -20px;opacity:.2}.layout-thumb[data-layout=spotlight] .lt-head>b{width:65px;height:65px;margin:0 auto 8px}.layout-thumb[data-layout=spotlight] .lt-content>span:first-child{height:45px;background:var(--thumb-accent)}.layout-thumb[data-layout=spotlight] .lt-content>span:first-child>i{background:var(--thumb-bg)}.layout-thumb[data-layout=spotlight] .lt-content>span:not(:first-child){margin-inline:12px;height:17px}
.layout-thumb[data-layout=contact]{padding:25px 12px}.layout-thumb[data-layout=contact] .lt-cover{height:28px}.layout-thumb[data-layout=contact] .lt-head{display:flex;align-items:center;gap:10px;padding:16px 0}.layout-thumb[data-layout=contact] .lt-head>b{margin:0;width:36px;height:36px;border-radius:5px}.layout-thumb[data-layout=contact] .lt-head>div{flex:1}.layout-thumb[data-layout=contact] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=contact] .lt-content>span{height:33px}.layout-thumb[data-layout=contact] .lt-picture{grid-column:1/-1;height:45px}.layout-thumb[data-layout=contact] .lt-social{border-top:1px solid #8884;padding-top:10px}
.layout-thumb[data-layout=menu] .lt-cover{height:45px;border-radius:0}.layout-thumb[data-layout=menu] .lt-content{gap:0}.layout-thumb[data-layout=menu] .lt-content>span{height:28px;background:none;border:0;border-bottom:1px dashed #8888;border-radius:0}.layout-thumb[data-layout=menu] .lt-content>span:before{content:'02';font:6px monospace;position:absolute;right:4px}.layout-thumb[data-layout=menu] .lt-picture{height:40px;padding:7px;background:var(--thumb-accent)}
.layout-thumb[data-layout=products] .lt-cover{height:40px}.layout-thumb[data-layout=products] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=products] .lt-content>span{height:55px;align-items:end;padding-bottom:8px}.layout-thumb[data-layout=products] .lt-content>span:before{content:'';width:18px;height:18px;border:1px solid var(--thumb-accent);border-radius:5px;position:absolute;top:10px;left:calc(50% - 9px)}.layout-thumb[data-layout=products] .lt-picture{grid-column:1/-1;height:40px}.layout-thumb[data-layout=products] .lt-picture:before{display:none}
.layout-thumb[data-layout=poster]{border:3px solid var(--thumb-fg);border-radius:0;padding:13px}.layout-thumb[data-layout=poster] .lt-cover{height:70px;border-radius:0}.layout-thumb[data-layout=poster] .lt-head{border-block:2px solid currentColor;margin:12px 0;padding:13px 0}.layout-thumb[data-layout=poster] .lt-head>b{display:none}.layout-thumb[data-layout=poster] .lt-head i:first-child{height:18px;width:90%}.layout-thumb[data-layout=poster] .lt-content>span{border:1px solid currentColor;border-radius:0;box-shadow:3px 3px var(--thumb-fg)}.layout-thumb[data-layout=poster] .lt-content>span:nth-child(n+4){display:none}
.layout-thumb[data-layout=timeline] .lt-cover{height:30px}.layout-thumb[data-layout=timeline] .lt-head{text-align:start}.layout-thumb[data-layout=timeline] .lt-head>b{margin-inline:0}.layout-thumb[data-layout=timeline] .lt-head i{margin-inline:0}.layout-thumb[data-layout=timeline] .lt-content{border-inline-start:1px solid var(--thumb-accent);padding-inline-start:17px;gap:12px}.layout-thumb[data-layout=timeline] .lt-content>span:before{content:'';position:absolute;inset-inline-start:-22px;width:8px;height:8px;border:1px solid var(--thumb-accent);border-radius:50%;background:var(--thumb-bg)}
.layout-thumb[data-layout=cinema] .lt-cover{height:80px;border-radius:0;mask-image:linear-gradient(#000,transparent)}.layout-thumb[data-layout=cinema] .lt-head{margin-top:-30px}.layout-thumb[data-layout=cinema] .lt-head>b{margin:0 auto 10px;border:1px solid var(--thumb-accent)}.layout-thumb[data-layout=cinema] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=cinema] .lt-content>.lt-picture{grid-column:1/-1;height:65px;background:#050708;border:1px solid #8884}.layout-thumb[data-layout=cinema] .lt-picture>i{display:none}.layout-thumb[data-layout=cinema] .lt-picture:after{content:'▷';font-size:25px;color:var(--thumb-accent)}
.layout-thumb[data-layout=record] .lt-cover{display:none}.layout-thumb[data-layout=record] .lt-head>b{width:72px;height:72px;margin:12px auto 15px;border:15px solid #252323;box-shadow:0 0 0 4px #333}.layout-thumb[data-layout=record] .lt-content>span{background:none;border:0;border-bottom:1px solid #8885;border-radius:0;height:20px}.layout-thumb[data-layout=record] .lt-picture{height:40px;justify-content:start;overflow:hidden;flex-wrap:nowrap}.layout-thumb[data-layout=record] .lt-picture>i{flex:0 0 60%;height:100%}
.layout-thumb[data-layout=photography]{padding:0}.layout-thumb[data-layout=photography] .lt-cover{height:100px;border-radius:0}.layout-thumb[data-layout=photography] .lt-head{display:flex;align-items:center;gap:8px;padding:15px}.layout-thumb[data-layout=photography] .lt-head>b{width:22px;height:22px;margin:0;border:0;border-radius:0}.layout-thumb[data-layout=photography] .lt-head>div{flex:1}.layout-thumb[data-layout=photography] .lt-content{padding-inline:8px}.layout-thumb[data-layout=photography] .lt-content>span{height:16px;background:none;border-radius:0}.layout-thumb[data-layout=photography] .lt-picture{height:70px;gap:3px}.layout-thumb[data-layout=photography] .lt-picture i{border-radius:0}.layout-thumb[data-layout=photography] .lt-content>span:nth-child(n+4){display:none}
.layout-thumb[data-layout=boutique] .lt-cover{height:105px;border-radius:50% 50% 0 0;width:70%;margin:auto}.layout-thumb[data-layout=boutique] .lt-head>b{border-radius:0;width:23px;height:23px;margin:-12px auto 8px}.layout-thumb[data-layout=boutique] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=boutique] .lt-content>span{height:48px;border:1px solid var(--thumb-accent);border-radius:0}.layout-thumb[data-layout=boutique] .lt-picture{grid-column:1/-1;height:35px}.layout-thumb[data-layout=boutique] .lt-content>span:nth-child(n+4){display:none}
.layout-thumb[data-layout=restaurant]{border:5px double var(--thumb-accent);border-radius:0}.layout-thumb[data-layout=restaurant] .lt-cover{height:38px;width:70%;margin:auto;border-radius:50% 50% 0 0}.layout-thumb[data-layout=restaurant] .lt-content{grid-template-columns:1fr 1fr;gap:12px}.layout-thumb[data-layout=restaurant] .lt-content>span{height:35px;border:0;border-bottom:1px dashed var(--thumb-accent);border-radius:0;background:none}.layout-thumb[data-layout=restaurant] .lt-picture{grid-column:1/-1;height:45px;border-block:3px double var(--thumb-accent);padding-block:8px}
.layout-thumb[data-layout=agency]{display:flex;flex-direction:column}.layout-thumb[data-layout=agency] .lt-head{order:-1;display:flex;align-items:center;gap:10px}.layout-thumb[data-layout=agency] .lt-head>b{margin:0;width:25px;height:25px;border:0;border-radius:4px}.layout-thumb[data-layout=agency] .lt-head>div{flex:1}.layout-thumb[data-layout=agency] .lt-cover{height:75px;border-radius:0;margin-bottom:12px;flex-shrink:0}.layout-thumb[data-layout=agency] .lt-content{grid-template-columns:repeat(3,1fr)}.layout-thumb[data-layout=agency] .lt-content>span{height:45px;border-radius:0;border-top:2px solid var(--thumb-accent)}.layout-thumb[data-layout=agency] .lt-picture{grid-column:span 2}
.layout-thumb[data-layout=coach] .lt-cover{height:65px;border-radius:15px 15px 0 0}.layout-thumb[data-layout=coach] .lt-head{background:var(--thumb-card);padding-bottom:15px;margin-bottom:15px;border-radius:0 0 15px 15px}.layout-thumb[data-layout=coach] .lt-head>b{width:42px;height:42px;border-radius:14px;translate:0 -20px;margin:0 auto -13px}.layout-thumb[data-layout=coach] .lt-content>span:first-child{background:var(--thumb-accent);height:32px;border-radius:30px}.layout-thumb[data-layout=coach] .lt-content>span:first-child i{background:var(--thumb-bg)}.layout-thumb[data-layout=coach] .lt-picture{border-inline-start:3px solid var(--thumb-accent);padding:5px}
.layout-thumb[data-layout=blueprint]{border:1px solid var(--thumb-accent);border-radius:0;background-image:linear-gradient(#8098ad20 1px,transparent 1px),linear-gradient(90deg,#8098ad20 1px,transparent 1px);background-size:12px 12px}.layout-thumb[data-layout=blueprint] .lt-cover{height:45px;border:1px solid var(--thumb-accent);border-radius:0}.layout-thumb[data-layout=blueprint] .lt-head{display:flex;gap:8px;align-items:center;padding-top:12px}.layout-thumb[data-layout=blueprint] .lt-head>b{margin:0;width:23px;height:23px;border:1px solid currentColor;border-radius:0}.layout-thumb[data-layout=blueprint] .lt-head>div{flex:1}.layout-thumb[data-layout=blueprint] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=blueprint] .lt-content>span{height:40px;border:1px solid var(--thumb-accent);border-radius:0;background:none}.layout-thumb[data-layout=blueprint] .lt-content>span:after{content:'+';position:absolute;top:-5px;left:-4px;font:9px monospace}.layout-thumb[data-layout=blueprint] .lt-picture{grid-column:1/-1}
.layout-thumb[data-layout=neon]{border:1px solid var(--thumb-accent);border-radius:6px}.layout-thumb[data-layout=neon] .lt-cover{height:4px;border-bottom:1px solid var(--thumb-accent)}.layout-thumb[data-layout=neon] .lt-head{padding-top:20px;display:flex;gap:8px;align-items:center}.layout-thumb[data-layout=neon] .lt-head>b{width:28px;height:28px;margin:0;border:1px solid var(--thumb-accent);border-radius:2px}.layout-thumb[data-layout=neon] .lt-head>div{flex:1}.layout-thumb[data-layout=neon] .lt-content{grid-template-columns:1fr 1fr}.layout-thumb[data-layout=neon] .lt-content>span{height:50px;border:1px solid var(--thumb-accent);border-radius:2px;box-shadow:0 0 8px #68e3bc15}.layout-thumb[data-layout=neon] .lt-picture{grid-column:1/-1;height:45px}
.layout-thumb[data-layout=glass]{padding:25px;background-image:radial-gradient(ellipse at 10% 0,#fff9,transparent 60%);border:5px solid #ffffff60}.layout-thumb[data-layout=glass] .lt-cover{height:45px;opacity:.25;border-radius:12px}.layout-thumb[data-layout=glass] .lt-head>b{border:3px solid #ffffff90}.layout-thumb[data-layout=glass] .lt-content>span{background:#ffffff60;border:1px solid #ffffffaa;border-radius:12px;box-shadow:0 5px 12px #00000005}
.layout-thumb[data-layout=polaroid]{padding:20px}.layout-thumb[data-layout=polaroid] .lt-cover{height:70px;width:85%;margin:auto;border:6px solid var(--thumb-card);border-bottom-width:15px;border-radius:0;transform:rotate(-5deg);opacity:1;box-shadow:0 5px 15px #0002}.layout-thumb[data-layout=polaroid] .lt-head>b{border-radius:0;transform:rotate(8deg);border:4px solid var(--thumb-card);width:28px;height:28px}.layout-thumb[data-layout=polaroid] .lt-content{grid-template-columns:1fr 1fr;gap:12px}.layout-thumb[data-layout=polaroid] .lt-content>span{height:43px;border-radius:0;box-shadow:0 5px 12px #0001;transform:rotate(-3deg)}.layout-thumb[data-layout=polaroid] .lt-content>span:nth-child(even){transform:rotate(3deg)}.layout-thumb[data-layout=polaroid] .lt-picture{grid-column:1/-1;height:38px}
.layout-thumb[data-layout=notebook]{border-inline-start:3px solid #b2737370;border-radius:0;background-image:repeating-linear-gradient(transparent,transparent 15px,#82947933 15px,#82947933 16px)}.layout-thumb[data-layout=notebook] .lt-cover{height:14px;background:none;border-bottom:3px double var(--thumb-accent);border-radius:0;margin-bottom:14px}.layout-thumb[data-layout=notebook] .lt-head{display:flex;gap:8px;align-items:center}.layout-thumb[data-layout=notebook] .lt-head>b{margin:0;border:1px solid currentColor;border-radius:7px;width:26px;height:26px}.layout-thumb[data-layout=notebook] .lt-head>div{flex:1}.layout-thumb[data-layout=notebook] .lt-content{gap:8px}.layout-thumb[data-layout=notebook] .lt-content>span{height:25px;background:none;border:0;border-bottom:1px solid #8883;border-radius:0}.layout-thumb[data-layout=notebook] .lt-content>span:after{content:'⌄';position:absolute;left:2px;top:0;font:10px monospace}
@media(max-width:1000px){.templates-directory .templates-grid,.home-templates{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 18px}}@media(max-width:700px){.templates-directory .templates-grid,.home-templates{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.templates-directory h1{font-size:29px}.layout-thumb{height:240px;padding:14px}.template-description{font-size:10px}.template-filters{gap:7px}.template-filters button{padding:7px 13px;font-size:11px}.demo-caption{display:block;margin-inline:0;font-size:8px}.layout-thumb[data-layout=poster]{padding:10px}.layout-thumb[data-layout=glass]{padding:18px}.layout-thumb[data-layout=business]{gap:8px}.layout-thumb[data-layout=photography]{padding:0}}
@media(prefers-reduced-motion:reduce){.layout-thumb{transition:none;translate:none!important}}