@font-face{
font-family:Agency;
src:local('Inter'),local('Arial')}
*{
box-sizing:border-box}
html{
color-scheme:dark}
body{
margin:0;
background:#121316;
color:#eeedf3;
font:14px/1.6 Agency,system-ui,sans-serif}
a{
color:inherit;
text-decoration:none}
a:hover{
color:#c7b7ff}
button,input,select,textarea{
font:inherit}
button,.button{
border:1px solid #bca6f6;
background:#bca6f6;
color:#17131f;
border-radius:7px;
font-weight:650;
padding:11px 17px;
display:inline-flex;
gap:8px;
align-items:center;
justify-content:center;
cursor:pointer;
line-height:1.4;
min-height:42px;
text-align:center}
button:hover,.button:hover{
background:#d4c5ff;
color:#17131f}
.secondary{
background:#24252b;
color:#eeedf3;
border-color:#3a3b44}
.secondary:hover{
background:#30313a;
color:#fff}
.small{
padding:8px 12px;
font-size:12px;
min-height:36px}
.sidebar{
width:244px;
position:fixed;
inset:0 auto 0 0;
padding:28px 18px 18px;
background:#191a1f;
border-right:1px solid #2a2b32;
display:flex;
flex-direction:column;
z-index:3;
overflow:auto}
.brand{
display:flex;
align-items:center;
gap:12px;
font-weight:800;
font-size:42px;
line-height:1;
margin:0 10px 33px;
color:#c3adff}
.brand span{
font-size:24px;
color:#f0eef5;
letter-spacing:-.7px}
.brand small{
display:block;
letter-spacing:1.45px;
font-size:8px;
margin-top:8px;
color:#96949f}
.brand i{
font-size:20px;
margin-left:auto;
font-style:normal}
.nav-label{
font-size:10px;
letter-spacing:1.9px;
font-weight:650;
color:#85838f;
margin:16px 14px 9px}
.sidebar nav a{
display:flex;
gap:13px;
padding:10px 14px;
margin:2px 0;
border-radius:7px;
color:#b4b2bd;
font-size:13px;
min-height:42px}
.sidebar nav a span{
font-size:18px;
line-height:1.3;
width:20px;
color:#96929f}
.sidebar nav a:hover,.sidebar nav a[aria-current]{
background:#2c283a;
color:#d4c1ff}
.sidebar-bottom{
margin-top:auto;
padding-top:32px}
.mode{
padding:14px;
background:#202227;
border:1px solid #303239;
border-radius:8px;
font-size:12px}
.dot{
display:inline-block;
width:6px;
height:6px;
background:#badb88;
border-radius:50%;
margin-right:7px}
small{
display:block;
color:#aaa7b5;
font-size:11px}
.mode small{
padding-left:16px;
margin-top:3px}
.user{
display:flex;
align-items:center;
gap:11px;
margin-top:18px;
padding:0 4px}
.user form{
margin-left:auto}
.avatar-small{
width:33px;
height:33px;
border-radius:50%;
background:#3b334b;
color:#cfb9ff;
display:grid;
place-items:center}
.icon-button{
background:none;
border:none;
color:#aaa7b5;
padding:6px}
.shell{
margin-left:244px;
min-width:0}
.topbar{
height:76px;
border-bottom:1px solid #2a2b32;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 38px;
font-size:10px;
letter-spacing:1px;
color:#aaa7b4}
.topbar strong{
font-weight:500;
color:#dfdce7;
letter-spacing:0;
margin-left:9px}
.topbar .muted{
padding-left:10px}
.top-actions{
display:flex;
align-items:center;
gap:26px}
.privacy{
font-size:10px;
letter-spacing:0;
color:#acaab6}
.top-actions .button{
font-size:12px;
letter-spacing:0}
main{
padding:36px 38px 60px;
max-width:1680px;
margin:auto;
min-height:calc(100vh - 130px)}
h1,h2,h3,p{
margin-top:0}
h1{
font-size:34px;
line-height:1.2;
letter-spacing:-1.2px;
font-weight:620;
margin-bottom:13px}
h2{
font-size:18px;
letter-spacing:-.35px;
font-weight:600;
margin-bottom:16px}
h3{
font-size:15px;
font-weight:600}
.eyebrow{
font-size:9px;
font-weight:650;
letter-spacing:2px;
color:#a19ba9;
margin-bottom:14px}
.accent{
color:#bca6f6}
.muted{
color:#a6a3b0}
.page-heading{
display:flex;
justify-content:space-between;
gap:25px;
align-items:center;
margin-bottom:30px}
.page-heading p{
margin-bottom:0}
.actions{
display:flex;
flex-wrap:wrap;
gap:10px}
.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid #303139;
border-radius:9px;
margin-bottom:34px;
background:#191a1f}
.stats>div{
padding:20px 24px;
border-right:1px solid #303139}
.stats>div:last-child{
border:0}
.stats span{
font-size:11px;
color:#a7a4b1}
.stats strong{
display:flex;
align-items:baseline;
gap:12px;
font-size:29px;
line-height:1.4;
font-weight:500;
margin-top:4px}
.stats small{
font-size:10px;
font-weight:400}
.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:18px}
.section-heading h2{
margin:0}
.section-heading>a{
font-size:11px;
color:#bcb5cd}
.profile-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
margin-bottom:30px}
.profile-card{
border:1px solid #303139;
border-radius:10px;
overflow:hidden;
background:#1b1c22}
.profile-art{
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:172px;
overflow:hidden;
background:radial-gradient(ellipse at 75% 20%,#47355c 0,transparent 55%),linear-gradient(135deg,#211b31,#191b24);
color:#c5a6ff}
.profile-art.golf-spok{
background:radial-gradient(ellipse at 80% 0%,#405344,transparent 65%),linear-gradient(130deg,#26352a,#19241f);
color:#c8e095}
.profile-art.emokatt{
background:radial-gradient(ellipse at 80% 10%,#36474e,transparent 70%),linear-gradient(130deg,#202c31,#1b1e24);
color:#a0dce4}
.art-orbit{
position:absolute;
width:185px;
height:185px;
border-radius:50%;
border:1px solid #ffffff18;
transform:rotate(-25deg) scaleY(.6)}
.art-orbit:after{
content:'';
position:absolute;
inset:20px;
border:1px solid #ffffff15;
border-radius:50%}
.profile-art b{
font-family:Georgia,serif;
font-size:82px;
line-height:1;
font-weight:400;
text-shadow:0 0 40px #ffffff18;
transform:rotate(-5deg)}
.art-label{
position:absolute;
bottom:14px;
left:18px;
font-size:8px;
letter-spacing:2px;
color:#e0d5e5b0}
.art-number{
position:absolute;
top:13px;
right:15px;
font-size:9px;
color:#d3ccdb80}
.profile-info{
padding:19px}
.profile-info h2{
font-size:19px}
.profile-info p{
font-size:11px;
color:#aaa6b4;
min-height:52px;
margin-bottom:18px}
.badge{
display:inline-flex;
align-items:center;
padding:3px 8px;
border:1px solid #44404d;
border-radius:5px;
font-size:9px;
color:#c6bece;
white-space:normal;
line-height:1.6;
max-width:160px}
.profile-info .badge{
color:#bbd79d;
border-color:#3f4b38;
background:#252e23;
font-size:8px}
.card-meta{
display:flex;
gap:10px;
justify-content:space-between;
border-top:1px solid #303139;
padding-top:13px;
font-size:9px;
color:#a6a0b2}
.card-meta a{
color:#d0c3eb}
.two-col{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:24px;
align-items:start}
.two-col>section{
min-width:0}
.panel{
background:#1a1b21;
border:1px solid #303139;
border-radius:9px;
padding:23px;
margin-bottom:22px;
min-width:0}
.row{
display:flex;
gap:13px;
align-items:center;
padding:15px 0;
border-bottom:1px solid #303139;
min-width:0}
.row:last-child{
border-bottom:0}
.row>div{
flex:1;
min-width:0}
.row>div strong{
font-size:12px;
font-weight:500;
display:block}
.row p{
margin-bottom:0;
font-size:12px}
.row>span:last-child{
font-size:12px}
.row-symbol{
display:grid;
place-items:center;
flex:none;
width:34px;
height:36px;
border:1px solid #493e60;
border-radius:6px;
background:#30273e;
color:#ccb8f2}
.row-symbol.golf-spok{
border-color:#3e513a;
background:#293328;
color:#c2df9c}
.row-symbol.emokatt{
border-color:#3b4a50;
background:#233036;
color:#a2d8dd}
.next-action{
background:radial-gradient(ellipse at 100% 0%,#393045 0,transparent 65%),#1d1d24}
.next-action h2{
font-size:24px;
line-height:1.35;
letter-spacing:-.7px}
.next-action p{
font-size:12px;
max-width:300px}
.next-action .eyebrow{
color:#c4acd9}
.flow-mini{
margin-top:26px;
padding-top:18px;
border-top:1px solid #ffffff12;
color:#b4a6c6;
font-size:8px;
letter-spacing:1.5px;
display:flex;
justify-content:space-between}
.flow-mini span{
color:#746e7d}
footer{
border-top:1px solid #292a30;
padding:18px 38px;
color:#807d8b;
font-size:10px;
display:flex;
justify-content:space-between}
.empty{
padding:24px 8px;
color:#aaa5b4;
font-size:13px}
.empty h2{
color:#e4dfed}
.notice{
padding:14px 18px;
border:1px solid #514467;
background:#2c243a;
border-radius:7px;
margin-bottom:22px;
color:#e3d4ff;
font-size:13px}
.notice.error,.errorlist{
color:#ffb8b8}
.errorlist{
padding-left:20px;
font-size:13px}
.success{
border-color:#455b40;
background:#253023;
color:#d1e9c6}
.editor{
max-width:1000px}
form p{
margin-bottom:19px}
label{
display:block;
color:#e1dce9;
font-size:12px;
font-weight:550;
margin-bottom:7px}
input,textarea,select{
width:100%;
max-width:100%;
min-width:0;
border:1px solid #45424f;
border-radius:6px;
padding:10px 12px;
background:#14151a;
color:#eee9f4}
textarea{
resize:vertical;
line-height:1.65}
input[type=checkbox]{
width:18px;
height:18px;
vertical-align:middle;
margin-right:8px}
input[type=file]{
font-size:12px}
input[type=checkbox]+label,label:has(input[type=checkbox]){
font-weight:400}
input::placeholder,textarea::placeholder{
color:#898390}
form button{
margin-top:9px}
.help,.helptext{
display:block;
color:#aaa4b5;
font-size:11px;
margin-top:6px}
.helptext ul{
margin-top:5px}
.field{
margin-bottom:20px}
details{
border-top:1px solid #36333e;
padding:16px 0}
summary{
cursor:pointer;
color:#d8cee6;
font-size:13px;
font-weight:550;
min-height:34px;
display:list-item}
details[open]>summary{
margin-bottom:16px}
dl{
margin-bottom:0}
dt{
font-size:11px;
color:#a49aaf;
margin:15px 0 5px}
dd{
margin:0;
font-size:13px;
overflow-wrap:anywhere}
pre{
font:11px/1.7 ui-monospace,monospace;
white-space:pre-wrap;
overflow-wrap:anywhere;
background:#14151a;
padding:14px;
border-radius:5px;
max-width:100%}
.checksum{
font-size:11px}
.form-actions{
display:flex;
align-items:center;
gap:20px;
margin-top:28px}
.form-actions span{
font-size:11px}
.filters{
display:flex;
gap:12px;
margin-bottom:23px}
.filters input{
flex:2}
.filters select{
flex:1}
.filters button{
margin:0}
.board{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:16px}
.board .panel{
padding:16px}
.board-item{
display:block;
border:1px solid #43404b;
border-radius:6px;
padding:13px;
margin:12px 0;
font-size:12px}
.board-item strong{
display:block}
.workflow{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:22px}
.workflow span{
background:#25232d;
border:1px solid #3f374e;
padding:12px;
border-radius:6px;
color:#c7b6dd;
font-size:11px}
.media-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px}
.media-grid img{
width:100%;
height:180px;
object-fit:cover;
border-radius:6px}
.media-card{
padding:13px}
.media-card h3{
font-size:12px;
margin:12px 0 4px;
overflow-wrap:anywhere}
.file-icon{
display:grid;
place-items:center;
height:180px;
background:#292531;
font-size:48px;
color:#bfaaec}
.review-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px}
.preview-image,video{
display:block;
width:100%;
height:auto;
max-height:620px;
object-fit:contain;
border-radius:6px;
margin:14px 0;
background:#101116}
audio{
max-width:100%}
.history-item{
padding:16px 0;
border-bottom:1px solid #36313e;
font-size:12px}
.history-item:last-child{
border:0}
.post-preview h2{
margin-top:20px}
.calendar{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
border-top:1px solid #39343f;
border-left:1px solid #39343f;
margin-bottom:24px}
.calendar-day{
min-height:100px;
padding:10px;
border-right:1px solid #39343f;
border-bottom:1px solid #39343f;
background:#1b1a21;
font-size:12px}
.calendar-day a{
display:block;
margin-top:8px;
font-size:10px;
padding:6px;
background:#33293f;
border-radius:4px;
overflow-wrap:anywhere}
.calendar-day small{
font-size:9px}
.calendar-day.blank{
background:#151519}
.auth-shell{
margin:0}
.login{
max-width:460px;
margin:9vh auto;
padding:34px}
.login h1{
font-size:30px}
.login button{
width:100%}
.auth-shell footer{
max-width:900px;
margin:auto}
.back{
font-size:12px;
color:#c4b8d6}
.skip{
position:fixed;
left:10px;
top:-80px;
z-index:20;
background:#cbb5ff;
color:#17131f;
padding:12px}
.skip:focus{
top:10px}
:focus-visible{
outline:3px solid #8bdbe0;
outline-offset:4px}
code{
font-size:12px;
color:#d0b8f6;
overflow-wrap:anywhere}
h1,h2,h3,strong{
overflow-wrap:anywhere}

@media(min-width:1600px){
main{
padding-top:48px}
.profile-art{
height:210px}
}

@media(max-width:1190px){
.sidebar{
width:204px;
padding:24px 12px}
.shell{
margin-left:204px}
main{
padding:28px 24px}
.topbar{
padding:0 24px}
.stats>div{
padding:16px}
.stats strong{
display:block}
.profile-grid{
gap:13px}
.profile-info{
padding:15px}
.profile-info .section-heading{
align-items:start;
flex-direction:column;
gap:7px}
.profile-info h2{
font-size:18px}
.two-col{
gap:16px;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.panel{
padding:18px}
.profile-art{
height:150px}
.review-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.page-heading h1{
font-size:29px}
.media-grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:800px){
.sidebar{
position:relative;
width:100%;
padding:16px;
border-bottom:1px solid #303139;
border-right:0;
overflow:visible}
.brand{
margin:0 0 14px;
font-size:30px}
.brand span{
font-size:22px}
.brand small{
font-size:7px}
.brand i{
margin-left:auto}
.nav-label,.sidebar-bottom{
display:none}
.sidebar nav{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:3px}
.sidebar nav a{
margin:0;
padding:8px;
font-size:11px;
gap:7px;
align-items:center}
.sidebar nav a span{
font-size:15px;
width:15px}
.shell{
margin:0}
.topbar{
height:58px;
padding:0 18px;
font-size:9px}
.privacy{
display:none}
.top-actions{
gap:8px}
.topbar strong{
margin-left:4px}
.top-actions .button{
min-height:34px}
main{
padding:25px 18px 40px}
.page-heading{
align-items:flex-start;
flex-direction:column;
gap:18px;
margin-bottom:23px}
.page-heading h1{
font-size:29px;
letter-spacing:-.8px}
.page-heading p{
font-size:12px}
.eyebrow{
font-size:8px}
.stats{
grid-template-columns:repeat(2,1fr);
margin-bottom:26px}
.stats>div{
border-bottom:1px solid #303139}
.stats>div:nth-child(2){
border-right:0}
.stats>div:nth-child(3){
border-bottom:0}
.stats strong{
display:flex;
font-size:27px;
gap:8px}
.stats small{
font-size:8px}
.stats span{
font-size:10px}
.profile-grid{
grid-template-columns:1fr;
gap:16px}
.profile-art{
height:156px}
.profile-info .section-heading{
flex-direction:row;
align-items:center}
.profile-info p{
min-height:0;
font-size:12px;
margin-bottom:16px}
.profile-info{
padding:18px}
.profile-info h2{
font-size:21px}
.two-col{
grid-template-columns:1fr;
gap:0}
.row{
gap:10px}
.row .badge{
max-width:94px;
font-size:8px}
.row-symbol{
width:29px;
height:32px}
.row>div strong{
font-size:12px}
.panel{
padding:18px}
.filters{
display:grid;
grid-template-columns:1fr 1fr;
gap:9px}
.filters input{
grid-column:1/-1}
.filters input[type=hidden]{
display:none}
.filters button{
min-width:0}
.board{
grid-template-columns:1fr 1fr}
.workflow{
grid-template-columns:1fr 1fr;
gap:8px}
.workflow span{
font-size:10px}
.review-grid{
grid-template-columns:1fr}
.media-grid{
grid-template-columns:1fr 1fr;
gap:10px}
.media-grid img{
height:130px}
.form-actions{
align-items:flex-start;
flex-direction:column;
gap:10px}
.calendar-day{
padding:5px;
min-height:60px}
.calendar-day a{
font-size:8px;
padding:3px}
.calendar-day small{
display:none}
.calendar{
gap:0}
.login{
margin:30px auto;
padding:24px}
.auth-shell main{
padding:18px}
footer{
padding:18px;
font-size:8px}
.actions{
gap:8px}
.actions .button{
font-size:11px;
padding:10px 12px}
.topbar>span{
max-width:65%;
overflow-wrap:anywhere}
.section-heading a{
font-size:10px}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
scroll-behavior:auto!important;
transition:none!important;
animation:none!important}
}

.mobile-menu{
display:none}
@media(max-width:800px){
.sidebar .brand{
margin-bottom:0;
min-height:42px}
.sidebar .brand i{
display:none}
.mobile-menu{
display:block;
position:absolute;
right:18px;
top:17px;
padding:9px 12px;
font-size:12px}
.sidebar nav{
display:none}
.sidebar.menu-open nav{
display:grid;
margin-top:12px}
.sidebar.menu-open .sidebar-bottom{
display:block;
padding-top:14px}
.sidebar.menu-open .sidebar-bottom .mode{
display:none}
}
.profile-cover{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.profile-art:has(.profile-cover) .art-label,.profile-art:has(.profile-cover) .art-number{background:#121316cc;color:#fff;padding:3px 6px;border-radius:3px}
.card-meta{flex-wrap:wrap}


/* Image studio: contain large thumbnails without collapsing metadata columns. */
.image-studio-layout{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:20px;
align-items:start;
}
.image-studio-layout>section,.image-studio-layout .panel{min-width:0}
.image-studio-layout .panel{overflow:hidden}
.image-studio-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.image-studio-media{min-width:0;display:flex;flex-direction:column;gap:9px}
.image-studio-thumb{display:block;width:100%;min-width:0;border-radius:7px;overflow:hidden;background:#111217}
.image-studio-thumb img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain}
.image-studio-media-info{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere;font-size:12px}
.image-studio-media-info small{font-size:11px;color:#aaa4b5}
.image-studio-layout textarea{width:100%;min-width:0}
.image-studio-layout .panel button{max-width:100%;white-space:normal;text-align:center}
@media(max-width:1250px){
.image-studio-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:650px){
.image-studio-gallery{grid-template-columns:minmax(0,1fr)}
.image-studio-layout{gap:12px}
}