:root { background:#14111c; color:#eeeaf4; --accent:#d5a27e; --line:#393141; --muted:#b5adbf; }
body { padding:0 28px; }
header { align-items:center; padding:16px 0; }
.identity { display:flex; align-items:center; gap:24px; }
.ecosystem-brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:750; font-size:1.1rem; }
.ecosystem-brand img { width:36px; height:36px; }
.identity small { display:block; font-size:.6rem; letter-spacing:.14em; color:var(--muted); font-weight:500; margin-top:3px; }
.site-brand { border-left:1px solid var(--line); padding-left:24px; font-size:1.15rem; font-weight:750; text-decoration:none; letter-spacing:-.025em; }
.site-brand span { color:var(--accent); }
.skip-link { position:absolute; top:-100px; padding:12px; background:#211b2b; z-index:10; }
.skip-link:focus { top:8px; }
main { padding:18px 0; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-bottom:20px; }
.eyebrow { margin:0 0 6px; }
h1 { font-weight:650; font-size:clamp(1.8rem,2.4vw,2.8rem); margin:0; }
.intro { max-width:580px; font-size:.85rem; }
.workspace { grid-template-columns:280px minmax(0,1fr) 290px; gap:24px; margin-top:0; border-top:1px solid var(--line); }
#settings { padding:18px 20px 18px 0; max-height:calc(100vh - 210px); }
.creator-panel { min-width:0; padding:18px 0 18px 20px; border-left:1px solid var(--line); max-height:calc(100vh - 210px); overflow:auto; scrollbar-width:thin; }
.creator-panel>.step { margin-top:0; }
.creator-panel h2 { font-size:1.3rem; }
input[type=number], input[type=text], input[type=url], select { background:#211b2b; color:inherit; border:1px solid #4c4058; border-radius:4px; width:100%; min-width:0; padding:9px 10px; }
input:focus, select:focus { border-color:var(--accent); }
.presets { gap:5px; }
.presets button { padding:6px 8px; }
button { border-radius:4px; }
#viewer { background:#201d29; height:clamp(380px,calc(100vh - 360px),900px); border:1px solid #393141; border-radius:6px; }
.preview-toolbar { min-height:58px; }
.preview-toolbar .small { font-size:.72rem; }
#dimensions { color:var(--accent); font-variant-numeric:tabular-nums; }
.export-panel { border-top:0; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.export-actions { display:grid; gap:8px; }
.export-actions>* { width:100%; }
.credit-preview { margin-top:20px; padding:14px 0; border-top:1px solid var(--line); font-size:.8rem; }
.credit-preview p { margin:6px 0; }
.integration { margin-top:20px; padding:20px 0; gap:48px; }
.integration h2 { font-size:1.25rem; }
.integration p { font-size:.85rem; }
.integration pre { background:#211b2b; }
.description-panel { border-top:1px solid var(--line); }
.video-embed { max-width:800px; aspect-ratio:16/9; }
.video-embed iframe { width:100%; height:100%; border:0; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(min-width:1800px) { .workspace { grid-template-columns:310px minmax(0,1fr) 320px; gap:28px; } }
@media(max-width:1150px) and (min-width:851px) { body { padding:0 20px; } .workspace { grid-template-columns:245px minmax(0,1fr); gap:20px; } .creator-panel { grid-column:1/-1; max-height:none; border-left:0; border-top:1px solid var(--line); padding-left:0; } #creator { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; } .intro { max-width:420px; } }
@media(max-width:850px) { body { padding:0 16px; } header { flex-wrap:wrap; gap:16px; } header nav { gap:16px; } .identity { gap:16px; } .site-brand { padding-left:16px; } .masthead { display:block; } .intro { margin-top:12px; } .workspace { grid-template-columns:1fr; gap:0; } #settings { max-height:none; padding-right:0; border-right:0; } .preview { grid-row:1; } #viewer { height:380px; } .creator-panel { max-height:none; padding-left:0; border-left:0; border-top:1px solid var(--line); } .integration { grid-template-columns:1fr; gap:16px; } }

#face-buttons button[aria-pressed=true] { background:var(--accent); color:#14111c; border-color:var(--accent); }
.face-editor { border-top-color:var(--accent); }