@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {color-scheme:dark}
body {font-family:'DM Sans',sans-serif!important;background:#140e24}
h1,h2,h3 {font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.035em}
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent }
:focus-visible {outline:2px solid #e5a9ff;outline-offset:4px}
#mainBody {isolation:isolate;background:radial-gradient(ellipse at 50% 0%,#38214f 0%,#140e24 65%)}
#mainBody main {padding-top:5rem;max-width:720px;width:100%;margin:auto}
#profileName {font-size:clamp(2.5rem,8vw,4rem);font-weight:700}
#profileBio {font-size:1rem;line-height:1.7;color:#c7b8da}
.universe-tag {font-size:.65rem;letter-spacing:.26em;color:#d3afff;margin:1rem 0}
#linksContainer a {min-height:68px}
.empty-state {border:1px dashed #b68aff55;border-radius:24px;padding:32px 20px;text-align:center;color:#ecdfff;background:#ffffff05;line-height:1.8}
.empty-state span {font-size:.85rem;color:#baaaca}
body:has(#loginForm) {background:radial-gradient(ellipse at top,#42235e,#140e24 70%);color:#f6efff}
body:has(#loginForm)>div {background:#21172e;border-color:#b68aff33;box-shadow:0 24px 100px #0005;border-radius:28px}
body:has(#loginForm) .text-gray-900,body:has(#loginForm) .text-gray-700 {color:#f6efff}
body:has(#loginForm) .text-gray-500 {color:#c7b8da}
body:has(#loginForm) input {background:#140e24;border-color:#59416f;color:#fff;min-height:48px}
body:has(#loginForm) .bg-blue-600 {background:#a472eb}
body:has(#loginForm) .text-blue-600 {color:#d3afff}
body:has(#loginForm) button[type=submit] {background:linear-gradient(100deg,#a472eb,#d75ba5);min-height:48px}
button:disabled {opacity:.6;cursor:wait}
select option {background:#21172e;color:white}
@media(max-width:767px) {body:has(#saveBtn) {overflow:auto} body:has(#saveBtn)>div.relative {height:auto;min-height:100vh} body:has(#saveBtn) header {flex-wrap:wrap;gap:12px}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important}}
/* Public profile and editor share the same renderer and appearance values. */

.egala-page {position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.egala-page main {width:calc(100% - 40px);margin:0 auto;padding-bottom:32px;position:relative;z-index:1}
.egala-page .avatar {object-fit:cover;display:inline-block;margin-bottom:16px}
.egala-page h1 {font-weight:700;line-height:1.15;overflow-wrap:anywhere;margin:8px 0 12px;letter-spacing:-.035em}
.egala-page .tag {font-size:11px;letter-spacing:.16em;margin:8px 0;overflow-wrap:anywhere}
.egala-page .bio {line-height:1.7;margin:0 0 32px;white-space:pre-wrap;overflow-wrap:anywhere}
.public-links {display:flex;flex-direction:column}
.public-link {display:flex;align-items:center;gap:16px;padding:12px 20px;text-decoration:none;transition:transform .2s,filter .2s;overflow-wrap:anywhere}
.public-link i {width:28px;text-align:center;font-size:24px;flex-shrink:0}.public-link span {flex:1;min-width:0;font-weight:600}
.hover-lift:hover {transform:translateY(-4px)}.hover-glow:hover {filter:brightness(1.3)}
.egala-page footer {margin-top:auto;padding:24px 20px;font-size:12px;text-align:center;line-height:1.8;position:relative;z-index:1}
.egala-page footer a {color:inherit;text-decoration:underline;text-underline-offset:3px}.egala-page .admin-link {display:block;margin-top:14px}
.share {position:absolute;right:16px;top:16px;z-index:3;background:#ffffff15;color:var(--accent);border:1px solid currentColor;border-radius:50%;width:40px;height:40px;cursor:pointer}
.pig-decor {position:absolute;inset:30px 10px auto;pointer-events:none;opacity:.15;font-size:46px;letter-spacing:20px;word-spacing:80px;transform:rotate(-12deg)}
.pig-decor.animated {animation:pigfloat 8s ease-in-out infinite}@keyframes pigfloat {50%{transform:translateY(20px) rotate(-8deg)}}
.studio {background:#140e24;color:#f6efff;margin:0;font-family:'DM Sans',sans-serif}
.studio * {box-sizing:border-box}.studio-header {padding:24px 32px;border-bottom:1px solid #ffffff18;display:flex;justify-content:space-between;align-items:center;gap:20px}
.studio-header h1 {font-size:26px;margin:0}.studio p {color:#c7b8da;line-height:1.6}.studio-header p {margin:6px 0 0}.studio nav {display:flex;align-items:center;gap:16px}.studio a {color:#d6b6ff}
.studio-layout {display:grid;grid-template-columns:minmax(340px,1fr) minmax(360px,1fr);gap:32px;padding:32px;max-width:1600px;margin:auto}
.controls section {border:1px solid #ffffff18;background:#ffffff04;border-radius:24px;padding:24px;margin-bottom:24px}.controls h2 {font-size:20px;margin:0 0 16px}.field-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field {display:flex;flex-direction:column;gap:8px;font-size:13px;position:relative}.field>span {color:#ddd0ed}.field input,.field select,.field textarea {font:inherit;background:#21172e;color:#fff;border:1px solid #ffffff25;border-radius:10px;padding:10px;width:100%;min-height:44px}.field textarea {min-height:100px;resize:vertical}.field input[type=color] {padding:4px;cursor:pointer}.field input[type=range] {padding:0;accent-color:#b68aff}.field input[type=checkbox] {width:22px;min-height:22px;accent-color:#b68aff}.field output {position:absolute;right:0;top:23px;font-size:10px;color:#d6b6ff;pointer-events:none}
.studio button {background:#38264e;border:1px solid #b68aff55;border-radius:10px;color:#f6efff;padding:10px 14px;cursor:pointer;font:inherit;font-size:13px}.studio button:hover {background:#51356d}.studio button:disabled {cursor:default;opacity:.4}
.presets,.link-actions {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.link-card {padding:18px;background:#ffffff04;border:1px solid #ffffff18;border-radius:16px;margin-bottom:16px}.link-actions {margin-top:16px;margin-bottom:0}.save-bar {position:sticky;bottom:0;background:#21172ef5;padding:18px;border-radius:16px;z-index:4}.save-bar #save {width:100%;background:linear-gradient(100deg,#a472eb,#d75ba5);font-weight:700;font-size:16px}.save-bar p {margin:8px 0 0;font-size:13px}
.preview-panel {position:sticky;top:20px;align-self:start;overflow:auto;max-height:calc(100vh - 40px);border:1px solid #ffffff18;border-radius:24px;background:#09060f;padding:16px}.preview-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;font-size:13px}.preview-heading select {background:#21172e;color:white;border:1px solid #ffffff22;border-radius:8px;padding:8px}.preview-shell {width:360px;max-width:none;margin:auto;min-height:640px;border-radius:20px}.preview-shell.egala-page {min-height:640px}.preview-shell main {flex:none}
@media(max-width:950px){.studio-layout {grid-template-columns:1fr;padding:16px;gap:20px}.preview-panel {position:static;grid-row:1;max-height:650px}.studio-header {padding:20px;flex-wrap:wrap}}
@media(max-width:480px){.field-grid {grid-template-columns:1fr}.controls section {padding:18px}.preview-shell {width:100%!important}.studio-header h1 {font-size:22px}}

.egala-page h1 {font-family:var(--heading-font),sans-serif!important}
.background-overlay {position:absolute;inset:0;pointer-events:none;z-index:0}
.readability-surfaces .tag,.readability-surfaces h1,.readability-surfaces .bio,.readability-surfaces footer {background:#ffffff;border-radius:16px;padding:12px}
.egala-page h1 {overflow-wrap:anywhere}.egala-page .share {background:var(--accent);color:#fff}

body:has(>#site) {margin:0}