.pfp-page{background:radial-gradient(circle at 50% -10%,rgba(255,26,111,.10),transparent 28%),var(--ink)}
.pfp-hero{padding:92px 0 42px}.pfp-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:54px;align-items:center}.pfp-hero h1{font-family:var(--font-display);font-size:clamp(3.5rem,8vw,7rem);line-height:.88;text-transform:uppercase;letter-spacing:-.03em;margin:16px 0 22px}.pfp-trust-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.pfp-trust-row span{font-family:var(--font-mono);font-size:.72rem;border:1px solid rgba(255,255,255,.13);padding:8px 10px;border-radius:999px;color:#d9d9d9;background:rgba(255,255,255,.025)}
.mini-hat-card{aspect-ratio:1;border-radius:32px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle,#1b1b1b,#080808 70%);display:grid;place-items:center;overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.45)}.mini-hat-card img{width:100%;height:100%;object-fit:contain}
.pfp-workspace-section{padding:36px 0 100px}.pfp-workspace{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:22px;align-items:start}.editor-card,.control-card{border:1px solid rgba(255,255,255,.09);background:rgba(17,17,17,.88);box-shadow:0 24px 70px rgba(0,0,0,.28)}.editor-card{border-radius:28px;overflow:hidden;position:sticky;top:92px}.editor-topbar{height:70px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}.editor-topbar>div{display:flex;flex-direction:column;gap:3px}.editor-topbar b{font-size:.95rem}.editor-topbar span{font-size:.72rem;color:var(--muted);font-family:var(--font-mono)}.tiny-btn{background:#222;color:#ddd;border:1px solid #333;border-radius:9px;padding:8px 11px;font-weight:700}.tiny-btn:disabled{opacity:.35}.canvas-shell{position:relative;aspect-ratio:1;background:#0a0a0a;overflow:hidden}.canvas-shell canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.canvas-shell canvas:active{cursor:grabbing}.pfp-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at 50% 45%,#171717,#0b0b0b 62%);text-align:center}.pfp-empty.hidden{display:none}.pfp-empty b{font-size:1.15rem}.pfp-empty span{color:#777;font-size:.8rem}.pfp-drop-icon{font-size:2rem;width:64px;height:64px;border-radius:20px;background:var(--rose);display:grid;place-items:center;margin-bottom:8px}.file-label{margin-top:8px}.file-label input{display:none}.circle-guide{position:absolute;inset:4%;border:2px dashed rgba(255,255,255,.55);border-radius:50%;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.48)}.mobile-quick{display:none}
.editor-controls{display:flex;flex-direction:column;gap:14px}.control-card{border-radius:22px;padding:18px}.control-title{display:flex;gap:12px;align-items:center;margin-bottom:15px}.control-title>span{width:29px;height:29px;border-radius:9px;background:var(--rose);display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.8rem}.control-title>div{display:flex;flex-direction:column}.control-title b{font-size:.9rem}.control-title small{color:#777;font-size:.72rem;margin-top:2px}.horn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-height:250px;overflow:auto;padding-right:3px}.horn-chip{position:relative;min-height:62px;border:1px solid #2a2a2a;background:#111;border-radius:12px;color:#ddd;padding:7px 5px;font-size:.64rem;font-weight:700;line-height:1.1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center}.horn-chip::before{content:'◠';font-size:1.15rem;color:#777;margin-bottom:5px}.horn-chip.active{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose) inset;background:rgba(255,26,111,.08)}.horn-chip.available::after{content:'LIVE';position:absolute;top:5px;right:5px;font-family:var(--font-mono);font-size:.46rem;color:#40e87c}.horn-chip:not(.available){opacity:.55}.asset-note{font-size:.68rem;line-height:1.45;color:#777;margin:10px 0 0}.seg-control{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#090909;border:1px solid #252525;border-radius:12px}.seg-control button{border:0;background:transparent;color:#777;padding:9px;border-radius:8px;font-weight:700}.seg-control button.active{background:#262626;color:#fff}.range-row{display:block;margin-top:15px}.range-row>span{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700}.range-row output{color:#777;font-family:var(--font-mono)}.range-row input{width:100%;accent-color:var(--rose);margin-top:8px}.nudge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:13px}.nudge-grid button,.inline-actions button{background:#1b1b1b;color:#ccc;border:1px solid #292929;border-radius:9px;padding:8px;font-weight:700}.inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.toggle-row{display:flex;align-items:center;gap:9px;font-size:.78rem;margin:10px 0}.toggle-row input{accent-color:var(--rose)}.export-btn,.share-btn{width:100%;margin-top:10px}.privacy-line{text-align:center;color:#666;font-size:.66rem;margin-top:12px;font-family:var(--font-mono)}
.utility-strip{padding:95px 0;background:#0d0d0d;border-top:1px solid rgba(255,255,255,.06)}.utility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.utility-grid article{min-height:210px;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:20px;background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(255,255,255,.01));position:relative}.utility-grid article>span{font-family:var(--font-mono);font-size:.7rem;color:var(--rose)}.utility-grid h3{font-family:var(--font-display);font-size:1.7rem;text-transform:uppercase;margin:28px 0 8px}.utility-grid p{color:var(--muted);font-size:.84rem;line-height:1.55}.utility-grid b{position:absolute;bottom:17px;left:20px;font-family:var(--font-mono);font-size:.62rem;color:#63e989}
@media(max-width:900px){.pfp-hero-grid{grid-template-columns:1fr}.mini-hat-card{display:none}.pfp-workspace{grid-template-columns:1fr}.editor-card{position:static}.utility-grid{grid-template-columns:1fr 1fr}.pfp-hero{padding-top:62px}.horn-grid{max-height:none}.mobile-quick{display:grid;grid-template-columns:1fr 1fr;padding:10px;background:#0b0b0b;gap:7px}.layer-pill{background:#1a1a1a;color:#777;border:1px solid #292929;padding:10px;border-radius:10px;font-weight:700}.layer-pill.active{color:#fff;border-color:var(--rose)}}
@media(max-width:560px){.utility-grid{grid-template-columns:1fr}.pfp-workspace-section{padding-top:20px}.pfp-hero h1{font-size:3.7rem}.horn-grid{grid-template-columns:repeat(3,1fr)}}

.horn-grid{grid-template-columns:repeat(2,1fr);max-height:none}
.horn-chip{min-height:118px;justify-content:flex-start;padding:8px 8px 10px;gap:8px}
.horn-chip::before,.horn-chip.available::after{content:none}
.horn-chip img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:radial-gradient(circle,#161616,#090909 70%)}
.horn-chip span{display:block;font-size:.7rem;line-height:1.15}
@media(max-width:560px){.horn-grid{grid-template-columns:repeat(2,1fr)}}

.editor-top-actions{display:flex;align-items:center;gap:8px}
.change-image-btn{display:none;cursor:pointer}
.change-image-btn input{display:none}
.pfp-loaded .change-image-btn{display:inline-flex}
@media(max-width:560px){
  .editor-topbar{height:auto;min-height:70px;gap:10px;padding:12px 14px}
  .editor-top-actions{gap:6px}
  .tiny-btn{padding:8px 9px;font-size:.72rem}
  .pfp-loaded .change-image-btn{display:inline-flex}
  .canvas-shell canvas{touch-action:none}
}

.working-badge{position:absolute;top:12px;right:12px;z-index:5;padding:8px 12px;border-radius:999px;background:rgba(255,26,111,.92);color:#fff;font-family:var(--font-mono);font-size:.68rem;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.extend-copy{font-size:.75rem;line-height:1.5;color:#9a9a9a;margin:-2px 0 12px}
.extend-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.small-btn{padding:11px 12px;font-size:.8rem}
.undo-extend{margin-top:9px;width:100%}
.extend-status{font-size:.68rem;line-height:1.45;color:#777;margin:10px 0 0;font-family:var(--font-mono)}
@media(max-width:560px){.extend-actions{grid-template-columns:1fr}.working-badge{top:10px;right:10px;font-size:.62rem}}
