.character-studio{--bg-panel:#1d1d1c;--line:#30302e;padding-block:32px 64px;max-width:1560px;--cs-radius:12px}
.character-studio [hidden]{display:none!important}
.cs-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0 28px}.cs-intro{max-width:740px}.cs-back{display:inline-flex;align-items:center;gap:8px;color:var(--text-soft);font-size:13px;text-decoration:none;margin-bottom:24px;min-height:32px}.cs-back:hover{color:var(--brand)}.character-studio svg{width:19px;height:19px;flex:none}.cs-eyebrow{color:var(--brand-muted);font:500 11px/1.6 var(--mono);letter-spacing:.12em}.cs-hero h1{font:700 clamp(28px,3vw,42px)/1.2 var(--display);letter-spacing:-.02em;margin:10px 0 12px}.cs-hero p{color:var(--text-muted);font-size:15px;line-height:1.8;max-width:670px;margin:0}.cs-game-mark{width:160px;height:144px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:none;border:1px solid var(--line);border-radius:16px;background:radial-gradient(ellipse at top,var(--brand-tint),transparent 80%)}.cs-game-mark>span{font:700 46px/1 var(--display);color:var(--brand)}.cs-game-mark small{color:var(--text-muted);font:10px var(--mono);letter-spacing:.1em}
.cs-games{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.cs-games a{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-content:center;text-decoration:none;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-panel);transition:background .18s,border-color .18s}.cs-games a>span{grid-row:span 2;background:var(--bg-sunken);border:1px solid var(--line);display:grid;place-items:center;border-radius:8px;font:600 12px var(--mono);color:var(--text-muted)}.cs-games strong{font-size:14px}.cs-games small{font-size:12px;color:var(--text-muted);margin-top:3px}.cs-games a:hover,.cs-games a[aria-current]{border-color:var(--brand-muted);background:var(--brand-tint)}.cs-games a[aria-current]>span{color:var(--brand);border-color:var(--brand-muted)}
.character-studio .cs-card{border:1px solid var(--line);border-radius:var(--cs-radius);background:var(--bg-panel);box-shadow:none}.cs-editor{overflow:hidden}.cs-workbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}.cs-identity{display:flex;align-items:center;gap:12px}.cs-live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px var(--brand-tint)}.cs-identity strong{display:block;font-size:14px}.cs-identity small{display:block;font:10px var(--mono);color:var(--text-muted);margin-top:4px;letter-spacing:.08em}.cs-actions{display:flex;flex-wrap:wrap;gap:8px}.character-studio .cs-btn{font:600 12px/1.2 var(--body);min-height:44px;height:auto;padding:10px 13px;gap:7px;border:1px solid var(--line);border-radius:7px;background:var(--bg-sunken);color:var(--text-soft);box-shadow:none;text-transform:none}.character-studio .cs-btn:hover:not(:disabled){border-color:var(--brand-muted);background:var(--brand-tint);color:var(--text)}.character-studio .cs-btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.character-studio .cs-btn-primary:hover:not(:disabled){background:var(--brand-hi);color:var(--on-brand)}.character-studio .cs-btn:disabled{opacity:.38;cursor:not-allowed}.character-studio .cs-btn-ghost{border-color:transparent;background:transparent}.cs-fullscreen{width:44px;padding:0!important}.character-studio :focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.cs-frame-host{position:relative;height:730px;background:var(--bg-sunken)}.cs-frame-host iframe{width:100%;height:100%;border:0;display:block}.cs-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg-panel);z-index:3;text-align:center;padding:24px;pointer-events:none}.cs-loading[hidden]{display:none}.cs-loading span:last-child{font-size:13px;color:var(--text-muted)}.cs-loader{width:28px;height:28px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:cs-spin 1s linear infinite}@keyframes cs-spin{to{transform:rotate(360deg)}}.cs-statusbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:10px 20px;border-top:1px solid var(--line);font-size:12px;color:var(--text-muted)}.cs-statusbar [role=status]{overflow-wrap:anywhere}.cs-source{font:10px var(--mono);white-space:nowrap;letter-spacing:.06em;color:var(--brand-muted)}.cs-editor:fullscreen{display:flex;flex-direction:column;background:var(--bg);border-radius:0;width:100%}.cs-editor:fullscreen .cs-frame-host{flex:1;min-height:0;height:auto}
.cs-bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;margin-top:20px}.cs-collection,.cs-guide{padding:24px}.cs-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.cs-section-head h2,.cs-guide h2{font:600 20px/1.4 var(--display);margin:6px 0 0}.cs-badge{font:11px var(--mono);color:var(--brand-muted);background:var(--bg-sunken);border:1px solid var(--line);white-space:nowrap}.cs-saves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}.cs-save{min-width:0;padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg-sunken)}.cs-save img{height:130px;width:100%;object-fit:contain;background:radial-gradient(ellipse,var(--brand-tint),transparent);margin-bottom:12px}.cs-save strong{display:block;overflow-wrap:anywhere;font-size:13px}.cs-save small{display:block;color:var(--text-muted);font:10px/1.6 var(--mono);margin:4px 0 10px}.cs-save>div{display:flex;gap:6px}.cs-save .cs-btn{flex:1;padding:8px;font-size:11px}.cs-empty{grid-column:1/-1;display:grid;place-items:center;gap:8px;padding:32px 16px;border:1px dashed var(--line);border-radius:9px;text-align:center}.cs-empty>span{color:var(--brand-muted)}.cs-empty strong{font-size:14px}.cs-empty p{max-width:370px;color:var(--text-muted);font-size:13px;margin:0;line-height:1.7}.cs-footnote{margin:18px 0 0;font-size:12px;line-height:1.7;color:var(--text-muted)}.cs-guide ul{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px;font-size:13px}.cs-guide li{display:flex;gap:9px;align-items:center}.cs-guide li svg{color:var(--brand-muted);width:16px}.cs-guide p{font-size:13px;line-height:1.8;color:var(--text-soft);margin:0 0 16px}.cs-guide small{font-size:12px;line-height:1.7;color:var(--text-muted)}.character-studio .cs-modal{padding:20px;color:var(--text);background:transparent}.cs-modal::backdrop{background:color-mix(in srgb,var(--bg-sunken) 85%,transparent);backdrop-filter:blur(4px)}.character-studio .cs-modal-box{background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:28px;max-width:460px;box-shadow:none}.cs-modal h2{font:600 24px/1.3 var(--display);margin:8px 0 24px}.cs-modal label{display:block;margin-bottom:8px;font-size:13px}.character-studio .cs-input{background:var(--bg-sunken);border-color:var(--line);color:var(--text);width:100%;font:14px var(--body);height:46px}.cs-modal p{color:var(--text-muted);font-size:13px;line-height:1.7}.cs-modal-action{margin-top:24px}.cs-form-error{color:var(--danger);font-size:12px;display:block;margin-top:12px}.cs-statusbar.is-error [role=status]{color:var(--warn)}
@media(max-width:1100px){.cs-frame-host{height:740px}.cs-bottom-grid{grid-template-columns:minmax(0,1fr) 290px}.cs-workbar{align-items:flex-start}.cs-identity{padding-top:8px}.cs-saves{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.character-studio{padding-block:20px 40px}.cs-hero{padding:0 0 24px}.cs-hero p{font-size:14px}.cs-game-mark{display:none}.cs-back{margin-bottom:16px}.cs-games{gap:6px}.cs-games a{padding:12px 8px;grid-template-columns:1fr;gap:6px;justify-items:center;text-align:center}.cs-games a>span{width:36px;height:30px;grid-row:auto;font-size:10px}.cs-games strong{font-size:11px}.cs-games small{display:none}.cs-workbar{display:block;padding:14px}.cs-identity{padding:0 0 14px}.cs-actions{gap:6px}.character-studio .cs-actions .cs-btn{flex:1;padding:10px 8px;font-size:11px}.cs-actions .cs-btn[data-action=save]{flex-basis:100%}.cs-actions svg{width:16px}.cs-frame-host{height:1060px}.cs-statusbar{padding:12px 14px;flex-wrap:wrap;gap:8px}.cs-source{font-size:9px}.cs-bottom-grid{grid-template-columns:1fr}.cs-collection,.cs-guide{padding:20px}.cs-saves{gap:8px}.cs-save{padding:10px}.cs-section-head h2{font-size:18px}.cs-guide{order:2}.cs-editor:fullscreen .cs-workbar{display:none}.cs-editor:fullscreen .cs-frame-host{overflow:auto}.cs-modal-box{padding:22px!important}}
@media(prefers-reduced-motion:reduce){.cs-loader{animation:none}.cs-games a{transition:none}}
@media(max-width:760px){.cs-editor:fullscreen .cs-workbar{display:flex;align-items:center;padding:8px 12px}.cs-editor:fullscreen .cs-identity{padding:0}.cs-editor:fullscreen .cs-actions{padding:0}.cs-editor:fullscreen .cs-actions .cs-btn:not([data-action=fullscreen]){display:none}.cs-editor:fullscreen .cs-actions .cs-fullscreen{flex:none}}