.character-studio{--cs-ink:#e5e8e4;--cs-muted:#98a9af;--cs-line:#33434c;color:var(--cs-ink);box-sizing:border-box;background:#121c24;width:100%;font:13px/1.5 system-ui,sans-serif}.character-studio *{box-sizing:border-box}.character-studio header{border-bottom:1px solid var(--cs-line);justify-content:space-between;align-items:center;padding:22px 26px;display:flex}.character-studio small{letter-spacing:3px;color:#b6a474;font-size:10px}.character-studio h1{letter-spacing:-1px;margin:3px 0 0;font-size:27px;font-weight:500}.character-studio h1 span{color:var(--cs-muted);letter-spacing:0;margin-left:12px;font-size:14px}.cs-badge{letter-spacing:1.4px;color:#a0c9b7;border:1px solid #57736b;border-radius:20px;padding:6px 10px;font-size:10px}.cs-layout{grid-template-columns:255px minmax(0,1fr);min-height:610px;display:grid}.character-studio aside{border-right:1px solid var(--cs-line);max-height:70vh;padding:18px;overflow:auto}.character-studio h2{color:#b6a474;letter-spacing:1.5px;text-transform:uppercase;margin:22px 0 10px;font:600 10px system-ui}.character-studio label{color:var(--cs-muted);margin:0 0 9px;font-size:11px;display:block}.character-studio select,.character-studio input[type=number]{width:100%;min-width:0;color:var(--cs-ink);background:#1d2b35;border:1px solid #384b57;border-radius:4px;margin-top:4px;padding:7px;font:12px system-ui;display:block}.character-studio button{color:#dce5e5;cursor:pointer;background:#283c46;border:1px solid #405962;border-radius:4px;padding:8px 10px;font:11px system-ui}.character-studio button:hover{background:#344d57;border-color:#b9a476}.cs-actions{grid-template-columns:1fr 1fr;gap:6px;margin:12px 0;display:grid}.cs-vector{gap:4px;display:flex}.cs-vector input{width:30%}.character-studio .cs-primary{color:#10171c;background:#a38d58;width:100%;margin-top:6px}.cs-note{color:#91a1a7;font-size:10px}.cs-preview{background:radial-gradient(at 50% 30%,#34434c,#1b252e);flex-direction:column;min-width:0;min-height:570px;display:flex}.cs-toolbar{border-bottom:1px solid var(--cs-line);flex-wrap:wrap;align-items:center;gap:14px;padding:12px;display:flex}.cs-toolbar label{align-items:center;gap:6px;margin:0;display:flex}.cs-toolbar select{width:145px;margin:0}.cs-preview [data-viewport]{flex:1;min-height:420px;position:relative}.cs-preview canvas{width:100%;height:100%;display:block;position:absolute}.cs-diagnostics{color:#9dafb5;max-height:200px;padding:14px 18px;font:11px/1.6 system-ui,sans-serif;overflow-y:auto}.cs-diag-grid{flex-direction:column;gap:10px;display:flex}.cs-diag-metrics{flex-wrap:wrap;gap:12px;display:flex}.cs-diag-m{text-align:center;background:#1a2830;border:1px solid #2d4050;border-radius:6px;min-width:60px;padding:6px 12px}.cs-diag-m b{color:#e5e8e4;font-size:16px;display:block}.cs-diag-m span{letter-spacing:.5px;color:#7a9aa8;text-transform:uppercase;font-size:9px}.cs-diag-sec h3{letter-spacing:1px;text-transform:uppercase;margin:0 0 4px;font-size:10px}.cs-diag-sec.err h3{color:#ff9c90}.cs-diag-sec.warn h3{color:#f0c674}.cs-diag-sec.info h3{color:#8ab4d0}.cs-diag-sec.ok h3{color:#7ec8a0}.cs-diag-sec ul{margin:0;padding-left:16px}.cs-diag-sec li{margin:2px 0;font-size:11px}.cs-diag-active{color:#6a8a94;border-top:1px solid #2d4050;margin-top:4px;padding-top:8px;font:10px/1.5 ui-monospace,monospace}.character-studio footer{border-top:1px solid var(--cs-line);color:#a7cbb6;padding:10px 18px;font-size:11px}.character-studio footer.error{color:#ff9c90}#gm.character-wide{width:min(1100px,100vw - 28px)}#gm.character-wide>.gm-body{max-height:84vh}#gm .character-studio input,#gm .character-studio select{flex:initial}#gm .character-studio label{min-width:0}.cs-compare{flex-wrap:wrap;gap:8px;margin:8px 0;display:flex}.cs-compare-card{text-align:center;cursor:pointer;background:#1a2830;border:1px solid #2d4050;border-radius:6px;width:72px;padding:4px;transition:border-color .2s}.cs-compare-card:hover{border-color:#b9a476}.cs-compare-card img{object-fit:cover;background:#111;border-radius:4px;width:64px;height:64px}.cs-compare-card b{color:#dce5e5;margin-top:3px;font-size:10px;display:block}.cs-compare-card small{color:#7a9aa8;font-size:9px}@media (width<=700px){.cs-layout{grid-template-columns:190px minmax(0,1fr)}.character-studio aside{padding:10px}.cs-badge{display:none}.cs-toolbar{gap:6px}.character-studio header{padding:16px}}