/* rendering of user sites. Owned by the renderers, not by the app shell.
   .user-site: flow sites that reflow with the screen.
   .reference-site: fixed canvases that only scale (no breakpoint may move their pieces).
   Editor affordances (outlines, labels, handles) live in editor-canvas.css. */

/* shared base the renderers rely on */
.user-site,.user-site *,.reference-site,.reference-site *{box-sizing:border-box}
.user-site svg,.reference-site svg{width:19px;height:19px;flex-shrink:0;vertical-align:middle}
.user-site :is(h1,h2,h3,p),.reference-site :is(h1,h2,h3,p){margin:0}
.user-site :is(button,input,textarea,select),.reference-site :is(button,input,textarea,select){font:inherit;color:inherit}
.user-site button,.reference-site button{border:0;background:none;cursor:pointer}
.user-site a,.reference-site a{color:inherit}
.user-site h1{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:500}
.user-site h2{font-size:16px;font-weight:600}
.user-site h3{font-size:15px}
.user-site small{font-size:12px}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes slide-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes scale-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
@keyframes blur-in{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@keyframes quiet-in{from{opacity:0}to{opacity:1}}
.user-site{color-scheme:light;background:var(--s-bg);color:var(--s-ink);font-family:var(--s-body);font-size:var(--s-size);line-height:1.6;min-height:560px;position:relative;container-type:inline-size}
.site-inner{max-width:960px;margin:auto;padding:26px 20px}
.site-window{background:var(--s-surface);border:1px solid var(--s-line);border-radius:var(--s-radius);overflow:visible}
.site-windowbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--s-line);background:color-mix(in srgb,var(--s-bg) 60%,var(--s-surface));font:10px var(--s-body);gap:8px}
.site-windowbar>span:first-child{white-space:nowrap;letter-spacing:2px;color:var(--s-muted)}
.site-windowbar>svg{width:12px;height:12px}
.site-windowbar>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-navigation{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--s-line);font-size:11px}
.site-navigation button{font-size:inherit;color:var(--s-muted);padding:3px 0;border-bottom:1px solid transparent}
.site-navigation button.current{color:var(--s-ink);border-bottom-color:var(--s-ink)}
.nav-topNav{background:var(--s-accent)}
.nav-bottom{position:sticky;bottom:0;background:var(--s-surface);border-top:1px solid var(--s-line);border-bottom:0;justify-content:space-around;z-index:1}
.nav-menu details{width:100%}
.nav-menu summary{cursor:pointer}
.nav-menu details[open]{display:flex}
.nav-menu button{margin-right:15px}
.site-content{display:flex;flex-direction:column;gap:var(--s-gap);padding:var(--s-padding)}
.site-block{position:relative;border:var(--s-borderWidth) var(--s-border) var(--s-line);border-radius:var(--s-radius);background:var(--s-surface);padding:var(--s-padding);min-width:0;overflow-wrap:anywhere;flex-shrink:0}
.site-block p{font-size:1em;line-height:inherit;white-space:pre-wrap}
.site-block h1{font-family:var(--s-heading);font-size:2em;line-height:1.1;letter-spacing:-.8px;margin-bottom:10px;font-weight:500}
.site-block h3{font-family:var(--s-heading);font-size:1.1em;margin-bottom:6px;font-weight:600}
.site-block small{color:var(--s-muted);font-size:.75em}
.site-block a{color:var(--s-link)}
.site-block .site-photo{border-radius:var(--s-radius)}
.site-label{font-size:.68em;letter-spacing:.12em;display:block;margin-bottom:7px;color:var(--s-muted)}
.profile-layout{display:grid;grid-template-columns:86px minmax(0,1fr);gap:15px;align-items:center}
.profile-layout p{font-size:.82em}
.site-photo{display:block;width:100%;min-width:0;object-fit:cover;background-color:var(--s-bg)}
.photo-layout{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:8px}
.photo-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.two-columns>div+div{border-left:1px var(--s-border) var(--s-line);padding-left:14px}
.two-columns p{font-size:.85em}
.block-gallery,.block-strip,.block-image{padding:7px}
.block-image>small{display:block;padding:6px 3px}
.block-divider,.block-space{border:0;background:transparent;padding:0}
.site-block hr{border:0;border-top:1px var(--s-border) var(--s-line);margin:0}
.block-footer{border:0;background:transparent;padding:4px;text-align:center}
.site-link-list{display:grid;gap:7px}
.site-link-list a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;border:1px var(--s-border) var(--s-line);padding:8px 10px;font-size:.85em;border-radius:var(--s-radius)}
.site-link-list a:hover{background:var(--s-bg)}
.music-head{display:flex;align-items:center;gap:12px}
.music-head>svg{color:var(--s-muted);width:25px;height:25px}
.music-head h3{font-family:var(--s-body);font-size:.8em}
.music-head p{font-size:.75em}
.music-demo{display:flex;align-items:center;gap:8px;font:10px var(--s-body);color:var(--s-muted);margin-top:14px}
.music-demo hr{flex:1;border-top:2px solid var(--s-line)}
.block-music>small{display:block;margin-top:8px;font-size:9px}
.block-music audio{width:100%;height:32px;margin-top:12px}
.telegram-content{display:flex;gap:12px;align-items:center}
.telegram-content p{font-size:.8em}
.telegram-content h3{font:600 .9em var(--s-body)}
.telegram-content>a{margin-left:auto;text-decoration:none;padding:8px}
.telegram-mark{display:grid;place-items:center;background:var(--s-accent);width:36px;height:36px;border-radius:var(--s-radius);flex-shrink:0}
.block-quote blockquote{margin:0;font-family:var(--s-heading);font-size:1.15em;text-align:center}
.site-tags{display:flex;flex-wrap:wrap;gap:6px}
.site-tags span{font-size:.8em;border:1px solid var(--s-line);padding:2px 7px;background:var(--s-bg)}
.site-table>div{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;border-bottom:1px solid var(--s-line);padding:8px 0;font-size:.8em}
.site-table>div:last-child{border:0}
.site-table b{font-weight:500}
.mini-browser-bar{background:var(--s-bg);border-bottom:1px solid var(--s-line);margin:calc(-1 * var(--s-padding)) calc(-1 * var(--s-padding)) 12px;padding:5px 9px;display:flex;justify-content:space-between;font-size:.8em}
.site-branding{padding:6px 12px 12px;text-align:center;font:9px Arial;color:var(--s-muted)}
.pattern-dots{background-image:radial-gradient(var(--s-line) .7px,transparent .7px);background-size:10px 10px}
.pattern-stripes{background-image:repeating-linear-gradient(135deg,transparent,transparent 9px,color-mix(in srgb,var(--s-line) 25%,transparent) 9px,color-mix(in srgb,var(--s-line) 25%,transparent) 18px)}
.pattern-grid{background-image:linear-gradient(var(--s-line) .5px,transparent .5px),linear-gradient(90deg,var(--s-line) .5px,transparent .5px);background-size:18px 18px}
.pattern-paper{background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,#00000003 3px,#00000003 4px)}
.layout-modern .site-windowbar,.layout-personal .site-windowbar,.layout-links .site-windowbar,.layout-channel .site-windowbar{display:none}
.layout-modern .site-window,.layout-personal .site-window,.layout-links .site-window{border:0;background:transparent}
.layout-modern .site-inner{max-width:1100px;padding:35px 24px}
.layout-modern .site-content{padding:0}
.layout-modern .block-title h1{font-size:3em}
.layout-modern .site-block{background:transparent}
.layout-browser .site-window{box-shadow:3px 3px 0 var(--s-line)}
.layout-browser .site-windowbar{background:var(--s-accent)}
.layout-links .profile-layout{display:flex;flex-direction:column;text-align:center}
.layout-links .profile-layout>.site-photo{width:90px;border-radius:50%}
.layout-links .site-inner{max-width:480px}
.layout-personal .site-inner{max-width:600px}
.layout-personal .block-quote{font-family:Georgia;font-size:1.5em}
.layout-kpop .site-windowbar{background:var(--s-accent)}
.layout-kpop .block-profile{border:0}
.layout-archive .site-content{gap:8px}
.layout-archive .block-title{border:0}
.standalone .user-site{min-height:100dvh}
.standalone .site-inner{padding-top:45px}
.standalone .layout-carrd .site-inner,.standalone .layout-browser .site-inner,.standalone .layout-kpop .site-inner{max-width:620px}
.motion-fade{animation:fade-in .45s both}
.motion-slide{animation:slide-in .35s both}
.motion-scale{animation:scale-in .35s both}
.motion-blur{animation:blur-in .45s both}
@container (min-width:650px){.layout-kpop .site-content{display:grid;grid-template-columns:1fr 1fr}.layout-kpop .block-profile,.layout-kpop .block-telegram,.layout-kpop .block-footer{grid-column:1/-1}.profile-layout{grid-template-columns:140px 1fr}.site-block h1{font-size:2.8em}.photo-layout{gap:12px}.layout-modern .photo-layout{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.standalone .site-inner{padding:20px 14px}.standalone .user-site{font-size:var(--s-size)}}
@media(max-width:360px){.site-inner{padding:18px 12px}.profile-layout{grid-template-columns:65px 1fr;gap:10px}}
.site-navigation button{min-height:32px}
.site-link-list a{min-height:36px;align-items:center}
.photo-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#edf0f0;border:1px dashed #c9d0d0;color:#879194;overflow:hidden}
.photo-placeholder svg{width:25px;height:25px;stroke-width:1}
.photo-placeholder span{font:10px/1.4 Arial,sans-serif;text-align:center;padding:0 8px;max-width:150px}
.profile-layout>.photo-placeholder span{display:none}
.layout-blank .site-windowbar{display:none}
.layout-blank .site-window{border:none;background:transparent}
.layout-blank .site-inner{max-width:740px}
.layout-blank .site-content{padding:0}
.layout-blank .block-profile{border:none}
.layout-blank .site-block{border-radius:var(--s-radius)}
.layout-blank .site-branding{padding-top:20px}
.site-content p,.site-content h1,.site-content h3{overflow-wrap:break-word;word-break:normal}
.standalone{height:auto;min-height:100dvh;overflow:auto;overscroll-behavior-y:auto}
.standalone #app{display:block;height:auto;min-height:100dvh;overflow:visible}
.standalone .user-site{letter-spacing:normal}
.composition-layout{display:grid;gap:var(--s-gap);min-width:0}
.composition-layout>.site-block{margin:0;min-width:0;max-width:100%;overflow-wrap:anywhere}
.composition-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.composition-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.composition-split{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.composition-split>.site-block:first-child{grid-row:span 2}
.composition-layout .block-image{padding:0}
.composition-layout .site-photo{width:100%;max-width:100%}
.composition-layout .block-text:empty{min-height:40px}
.composition-windowbar{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--s-line);font-size:11px;padding:8px;margin-bottom:12px}
.composition-windowbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block-section{container-type:inline-size}
.site-button{display:block;padding:12px;background:var(--s-ink);color:var(--s-surface)!important;text-align:center;text-decoration:none;border-radius:var(--s-radius)}
.site-faq summary{cursor:pointer;min-height:32px}
.site-faq p{white-space:pre-wrap}
.block-video video{width:100%;max-height:420px}
.block-list ul{padding-left:20px}
.block-list li+li{margin-top:8px}
@container(max-width:300px){.composition-two,.composition-split{grid-template-columns:1fr}.composition-split>.site-block:first-child{grid-row:auto}}
.site-content{animation:quiet-in .23s ease}
@font-face{font-family:'Overseas Pixel';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/pixelify-sans.ttf') format('truetype')}
.user-site.reference-site{padding:0;min-height:0!important;color:#161616;line-height:normal;border:0;border-radius:0;overflow:visible;font-family:Arial,sans-serif}
.reference-sheet{width:100%;max-width:var(--reference-max);margin-inline:auto;container-type:inline-size}
.reference-stage{position:relative;width:100%;isolation:isolate}
.reference-node{position:absolute;box-sizing:border-box;margin:0;padding:0;min-width:0;min-height:0;overflow:visible;overflow-wrap:normal;white-space:normal;outline-offset:2px}
.reference-node .reference-text{margin:0;padding:0;font:inherit;color:inherit;white-space:pre-wrap;overflow-wrap:break-word;line-height:inherit}
.reference-node>a{display:block;width:100%;height:100%;font:inherit;color:inherit;line-height:inherit;overflow-wrap:anywhere}
.reference-node>img{display:block;width:100%;height:100%;border-radius:inherit;margin:0}
.reference-node>audio{width:100%;height:100%;max-height:100%}
.reference-photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5cqw;border-radius:inherit;background:linear-gradient(135deg,#f0f0ee,#e4e6e6);color:inherit;text-align:center;overflow:hidden}
.reference-photo-placeholder svg{width:24%;max-width:5cqw;min-width:0;height:auto;flex-shrink:0;opacity:.65}
.reference-photo-placeholder span{font-family:Arial,sans-serif;font-size:1.8cqw;font-weight:400;line-height:1.1;white-space:nowrap}
.reference-play{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:4cqw}
.reference-credit{text-align:center;padding:12px;font:10px Arial,sans-serif;color:#a0a0a0;background:transparent}
.standalone .reference-site{width:min(100%,var(--reference-max));margin:auto}
.standalone:has(.reference-site){background:#fff;padding:0}
.reference-decoration{width:100%;height:100%;display:block;border-radius:inherit;pointer-events:none;overflow:hidden}
.reference-lattice{background-image:repeating-linear-gradient(45deg,transparent 0 1.2cqw,currentColor 1.2cqw 1.45cqw,transparent 1.45cqw 2.4cqw),repeating-linear-gradient(-45deg,transparent 0 1.2cqw,currentColor 1.2cqw 1.45cqw,transparent 1.45cqw 2.4cqw)}
.reference-play svg{width:65%;height:65%}
@font-face{font-family:'Overseas Rounded';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/poppins-regular.ttf') format('truetype')}
.reference-text strong{font-weight:700}