@font-face{font-family:Manrope;src:url('/fonts/manrope-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{color-scheme:light;--bg:#e9e9e6;--surface:#fff;--muted-bg:#f0f0ed;--ink:#171716;--muted:#62625e;--line:#d6d6d0;--accent:#171716;--accent-ink:#fff;--accent-hover:#373733;--accent-dim:#e5e5e1;--focus:#666662;--danger:#a63738;--radius:20px}
[data-theme=dark]{color-scheme:dark;--bg:#151513;--surface:#20201e;--muted-bg:#2a2a27;--ink:#f4f4ef;--muted:#aaa9a2;--line:#3a3a36;--accent:#f4f4ef;--accent-ink:#171715;--accent-hover:#deded8;--accent-dim:#363632;--focus:#bfbfb6;--danger:#ff9191}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed}
a{color:inherit;text-decoration:none}
svg{display:block;width:21px;height:21px;flex:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.06;letter-spacing:-.053em}
[hidden]{display:none!important}
.container,.top-inner{width:min(1240px,calc(100% - 88px));margin-inline:auto}
.top{border-bottom:1px solid var(--line);background:var(--bg)}
.top-inner{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand,.top-actions,.icon-row,.metadata,.foot,.toolbar,.pager{display:flex;align-items:center;gap:10px}
.brand{gap:12px;font-size:22px;letter-spacing:-.065em}
.brand-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:11px;color:var(--accent-ink);background:var(--accent)}
.brand-icon svg{width:23px;height:23px}
.brand strong span{font-weight:650}
.beta{font-family:ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;color:var(--muted);border:1px solid var(--line);background:var(--muted-bg)}
.top-actions{gap:8px}
.icon{display:inline-grid;place-items:center;position:relative;width:43px;height:43px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none;transition:background .15s,transform .15s,border-color .15s}
.icon:hover:not(:disabled){background:var(--muted-bg);transform:translateY(-1px)}
.icon.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.icon.accent:hover:not(:disabled){background:var(--accent-hover)}
.icon.clean{background:transparent;border-color:transparent}
.icon.warn{color:var(--danger)}
.icon[data-tip]:is(:hover,:focus-visible)::after{content:attr(data-tip);position:absolute;right:0;top:calc(100% + 8px);z-index:20;border-radius:6px;background:#262624;color:#fff;padding:5px 9px;white-space:nowrap;font-size:12px;font-weight:550;pointer-events:none}
main{flex:1;outline:none}
.catalog{padding:49px 0 76px;scroll-margin-top:15px}
.section-head,.title-row{display:flex;justify-content:space-between;align-items:center;gap:18px}
.catalog h1{font-size:clamp(34px,5vw,56px);font-weight:700}
.section-head h2{font-size:clamp(34px,4vw,51px);font-weight:770}
.catalog-toolbar{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;margin-top:23px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filter{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;padding:8px 14px;background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap}
.filter:hover{border-color:var(--muted)}
.filter[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.filter svg{width:15px;height:15px}
.search{display:flex;align-items:center;gap:10px;min-width:240px;background:var(--surface);border:1px solid var(--line);padding:8px 13px;border-radius:11px;color:var(--muted)}
.search:focus-within{border-color:var(--focus)}
.search svg{width:17px;height:17px}
.search input{border:0;outline:0!important;background:transparent;width:100%;min-width:0;font-size:14px}
.results{margin-top:23px}
.empty{border:1px dashed var(--line);border-radius:17px;padding:34px 20px;text-align:center;color:var(--muted);background:var(--surface)}
.empty svg{display:inline-block;width:24px;height:24px;vertical-align:middle;margin-right:8px;color:var(--ink)}
.empty strong{color:var(--ink);font-size:16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:17px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--focus)}
.card-main{display:block}
.card-main:focus-visible{outline-offset:-3px}
.card-media{display:block;width:100%;height:auto;aspect-ratio:1.63;object-fit:cover;background:var(--muted-bg)}
.card-body{padding:16px 17px 20px;padding-right:62px}
.card h3{font-size:24px;overflow-wrap:anywhere}
.card .metadata{margin-top:10px}
.metadata{flex-wrap:wrap;gap:6px 10px;color:var(--muted);font-size:13px}
.tag,.format{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:680;letter-spacing:0;padding:3px 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--bg)}
.card>.icon{position:absolute;bottom:16px;right:15px;width:36px;height:36px;border-radius:9px}
.pager{justify-content:center;margin-top:23px}
.foot{min-height:70px;justify-content:space-between;gap:16px}
.footer{border-top:1px solid var(--line);color:var(--muted)}
.footer a{font-weight:750;color:var(--ink)}
.detail,.studio{padding:29px 0 70px}
.crumb{display:flex;align-items:center;gap:11px;margin-bottom:21px;color:var(--muted);font-size:13px}
.crumb .icon{width:34px;height:34px;border-radius:9px}
.title-row{margin-bottom:16px}
.title-row h1{font-size:clamp(34px,5vw,63px);overflow-wrap:anywhere}
.title-row .icon.accent{width:50px;height:50px}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:22px;align-items:start;margin-top:23px}
.gallery,.panel,.editor-form{border:1px solid var(--line);background:var(--surface);border-radius:18px;overflow:hidden}
.gallery-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:9px}
.view-tabs{display:flex;align-items:center;gap:5px}
.view-tabs .icon[aria-pressed=true]{background:var(--accent-dim);border-color:transparent}
.gallery-stage,.model{position:relative;aspect-ratio:1.55;background:var(--muted-bg);display:grid;place-items:center;overflow:hidden}
.gallery-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gallery-stage{max-height:min(65vh,650px)}
.gallery-stage .prev,.gallery-stage .next{position:absolute;top:50%;translate:0 -50%;background:var(--surface);z-index:1}
.gallery-stage .prev{left:11px}.gallery-stage .next{right:11px}
.thumb-strip{display:flex;gap:8px;padding:12px;overflow:auto}
.thumb-strip button{padding:0;line-height:0;border:2px solid transparent;border-radius:9px;cursor:pointer;background:var(--muted-bg);flex:none;overflow:hidden}
.thumb-strip button[aria-current=true]{border-color:var(--focus)}
.thumb-strip img{width:75px;height:49px;object-fit:cover}
.panel{padding:19px}
.panel h2{font-size:24px;margin-bottom:13px}
.account-panel,.account-identity{display:flex;align-items:center;gap:14px}
.account-panel{max-width:720px;justify-content:space-between;flex-wrap:wrap}
.account-mark{display:grid;place-items:center;width:45px;height:45px;background:var(--muted-bg);border:1px solid var(--line);border-radius:12px;flex:none}
.account-identity h2{font-size:21px;margin-bottom:4px;overflow-wrap:anywhere}
.panel dl{margin:0;display:grid;gap:9px}
.panel dl div{display:flex;justify-content:space-between;gap:9px}
.panel dt{color:var(--muted)}
.panel dd{margin:0;text-align:right;overflow-wrap:anywhere}
.description{margin-top:24px;font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere}
.model{min-height:260px;background:var(--model-gradient)}
.model,[data-background=neutral]{--model-gradient:radial-gradient(ellipse at center,#f0f0ed,#dededa)}
[data-theme=dark] :is(.model,[data-background=neutral]){--model-gradient:radial-gradient(ellipse at center,#42423e,#252523)}
:is(.model,.background-option)[data-background=blue]{--model-gradient:radial-gradient(ellipse at center,#96c9ff,#284a8b)}
:is(.model,.background-option)[data-background=violet]{--model-gradient:radial-gradient(ellipse at center,#c9a9f7,#533881)}
:is(.model,.background-option)[data-background=rose]{--model-gradient:radial-gradient(ellipse at center,#ffc3cf,#8c3f62)}
:is(.model,.background-option)[data-background=amber]{--model-gradient:radial-gradient(ellipse at center,#ffd88f,#975027)}
:is(.model,.background-option)[data-background=teal]{--model-gradient:radial-gradient(ellipse at center,#9ce8e0,#296969)}
.model:fullscreen{width:100%;height:100%;aspect-ratio:auto}
.model-viewport{position:absolute;inset:0;display:grid;place-items:center}
.model canvas{display:block;width:100%;height:100%;touch-action:none}
.model .view-message{padding:12px 18px;text-align:center;color:var(--ink);background:var(--surface);border-radius:12px;max-width:calc(100% - 32px)}
.model-customize{position:absolute;top:12px;right:12px;z-index:2}
.model-customize>#model-customize{display:grid;margin-left:auto}
.model-customize>#model-customize[aria-expanded=true]::after{display:none}
.model-backgrounds{position:absolute;top:calc(100% + 7px);right:0;width:170px;padding:10px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:13px;box-shadow:0 8px 30px #17171526}
.model-backgrounds strong{display:block;margin:0 0 8px 2px;font-size:13px}
.background-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.background-option.icon,.background-option.icon:hover:not(:disabled){width:100%;height:35px;background:var(--model-gradient);border-radius:8px}
.background-option.icon[data-tip]::after{top:auto;bottom:calc(100% + 5px)}
.background-option svg{visibility:hidden;width:18px;height:18px;padding:2px;color:var(--ink);background:var(--surface);border-radius:50%}
.background-option[aria-pressed=true] svg{visibility:visible}
.studio .empty{margin-top:18px}
.studio .toolbar{flex-wrap:wrap;margin-bottom:16px}
.editor-form{padding:23px;display:grid;gap:17px}
.editor-form label,.dialog-form label{display:grid;gap:6px;font-weight:650}
.editor-form input:not([type=file]),.editor-form textarea,.editor-form select,.dialog-form input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg);font-weight:400}
.editor-form textarea{resize:vertical;min-height:125px}
.form-columns{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.editor-media{display:grid;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.editor-media h2{font-size:24px}
.editor-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.editor-thumb{display:grid;gap:5px;justify-items:start}
.editor-thumb img{width:100%;aspect-ratio:1.55;object-fit:cover;border-radius:9px}
.editor-thumb .icon{width:29px;height:29px;border-radius:7px}
.editor-thumb svg{width:16px;height:16px}
.status{color:var(--muted)}
#toast{position:fixed;z-index:30;right:20px;bottom:20px;max-width:min(420px,calc(100vw - 40px));padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 35px #17171527}
#toast.error{color:var(--danger)}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:22px;width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
dialog::backdrop{background:#15151399}
dialog h2{font-size:26px;margin-bottom:12px}
dialog .icon-row{justify-content:flex-end;margin-top:14px}
dialog .dialog-form{display:grid;gap:10px}
@media(max-width:900px){
 .container,.top-inner{width:min(100% - 48px,1240px)}
 .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .detail-layout{grid-template-columns:minmax(0,1fr) 222px}
}
@media(max-width:620px){
 .container,.top-inner{width:calc(100% - 28px)}
 .top-inner{height:63px}
 .brand{font-size:20px;gap:7px}
 .brand-icon{width:33px;height:33px}
 .brand-icon svg{width:20px;height:20px}
 .icon{width:40px;height:40px}
 .catalog{padding-top:33px;padding-bottom:48px}
 .catalog-toolbar{flex-direction:column-reverse;gap:11px;margin-top:16px;padding-bottom:15px}
 .search{width:100%}
 .cards{grid-template-columns:minmax(0,1fr);gap:12px}
 .detail,.studio{padding-top:17px}
 .detail-layout,.form-columns{grid-template-columns:minmax(0,1fr)}
 .gallery-stage,.model{aspect-ratio:1.35}
 .foot{padding-block:12px;align-items:flex-start;flex-direction:column;gap:3px}
 .editor-form{padding:15px}
}
@media(max-width:360px){.top-actions,#account-actions{gap:5px}.top-actions .icon{width:36px;height:36px}.brand{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
