.profilepage{position:relative;isolation:isolate;padding:18px;border-radius:22px}.profilepage>*:not(.profile-wallpaper){position:relative;z-index:1}.profile-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:-1;opacity:.6}[data-wall=woodland]{background:repeating-linear-gradient(125deg,#315f4720 0 30px,transparent 30px 60px),linear-gradient(140deg,#315f4740,#bbcf8b45)}[data-wall=starlight]{background:radial-gradient(circle at 15% 25%,#d5b879 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,#9da6c9 0 2px,transparent 3px),linear-gradient(140deg,#344b6b55,#71648a35);background-size:67px 83px,97px 109px,100% 100%}[data-wall=sunrise]{background:linear-gradient(145deg,#e9ad7145,#d48a7b35 45%,#a39ac040)}[data-font=serif],[data-font=serif] :is(h1,h2,h3,p,b){font-family:Georgia,'Times New Roman',serif}[data-font=mono],[data-font=mono] :is(h1,h2,h3,p,b){font-family:'Courier New',monospace}[data-border=bold] .card{border:2px solid var(--accent);box-shadow:4px 4px 0 var(--accent-soft)}[data-border=square] .card{border-radius:3px}.style-sample{padding:28px;border:1px solid var(--line);border-radius:16px}.style-sample[data-border=bold]{border:2px solid var(--accent)}.style-sample[data-border=square]{border-radius:3px}@media(max-width:600px){.profilepage{padding:10px}}

.code-editor{font:14px/1.6 "Courier New",monospace;tab-size:2;white-space:pre;overflow:auto}.profile-canvas{width:100%;height:650px;border:1px solid var(--line);border-radius:12px;margin-top:16px;background:var(--surface)}.profilepage[data-canvas=true] .profilegrid{display:none}.profile-canvas[hidden]{display:none}.canvas-panel{margin-bottom:22px}#canvas-preview{min-width:0}

/* Let custom artwork show through the panels without fading their text. */
.profilepage[data-wall=custom]{padding:clamp(70px,10vw,130px) clamp(18px,4vw,54px) 36px}
.profilepage[data-wall=custom] .profile-wallpaper{opacity:1}
.profilepage[data-wall=custom] .card{background:rgba(255,255,255,.84);background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.profilepage[data-wall=custom] .profilegrid{gap:28px;margin-top:28px}
.profilepage[data-wall=custom] #profile-gallery{margin-top:32px}
html[data-theme=dark] .profilepage[data-wall=custom] .card{background:rgba(27,44,34,.82);background:color-mix(in srgb,var(--surface) 80%,transparent)}
@media(max-width:600px){.profilepage[data-wall=custom]{padding:70px 12px 20px}.profilepage[data-wall=custom] .profilegrid{gap:18px}}
@media(prefers-reduced-transparency:reduce){.profilepage[data-wall=custom] .card{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}

[data-card-transparency="0"]{--profile-card-opacity:100%}[data-card-transparency="5"]{--profile-card-opacity:95%}[data-card-transparency="10"]{--profile-card-opacity:90%}[data-card-transparency="15"]{--profile-card-opacity:85%}[data-card-transparency="20"]{--profile-card-opacity:80%}[data-card-transparency="25"]{--profile-card-opacity:75%}
.profilepage[data-card-transparency] .card,html[data-theme=dark] .profilepage[data-card-transparency] .card{background:var(--surface);background:color-mix(in srgb,var(--surface) var(--profile-card-opacity,80%),transparent)}
.profilepage[data-card-transparency] .card :is(.muted,small,.eyebrow){color:inherit}
.style-sample{position:relative;isolation:isolate;padding:24px;overflow:hidden}.style-sample-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.style-sample:not([data-wall=custom]) .style-sample-wall{display:none}.style-sample-card{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);background:color-mix(in srgb,var(--surface) var(--profile-card-opacity,80%),transparent);backdrop-filter:blur(4px)}
#styleform input[type=range]{min-height:44px;accent-color:var(--accent);padding:0}
@media(max-width:600px){.profilepage .profilegrid{grid-template-columns:minmax(0,1fr)}.profilepage .profileidentity{padding:0 18px 22px}.profilepage .profileactions{float:none;margin:14px 0;flex-wrap:wrap}.profilepage .profileactions button{min-height:44px}.profilepage .profilecover{height:150px}.profilepage .profileidentity h1{overflow-wrap:anywhere}.profilepage .album-grid{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr))}.profileedit{grid-template-columns:minmax(0,1fr)}.style-sample{padding:14px}.profilepage .row{flex-wrap:wrap}}
@media(prefers-reduced-transparency:reduce){.profilepage[data-card-transparency] .card,html[data-theme=dark] .profilepage[data-card-transparency] .card,.style-sample-card{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}}