:root { color-scheme:dark }
body {padding:0; margin:0;}
.hero-preview{max-width:540px;margin:auto;padding:clamp(12px,3vw,22px) 16px 36px;}
.heading{padding:8px 4px 15px;}
.heading small{color:#dec78f;letter-spacing:.13em;font-weight:700;}
.heading h1{margin-top:5px;font-size:26px;}
.heading p{margin-top:8px;color:#b7c9bd;line-height:1.5;}
.controls{background:#1a2c23;border:1px solid #758560;border-radius:14px;padding:14px;display:grid;gap:14px;}
.field-label{display:block;font-weight:600;color:#f0dfb8;margin-bottom:8px;}
.gender-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.gender-choices button{color:#f2e8cf;border:1px solid #677e65;background:#27382b;padding:12px 8px;border-radius:12px;min-height:48px;font-weight:600;}
.gender-choices button[aria-pressed="true"]{background:#496949;border-color:#e4c179;box-shadow:inset 0 0 0 1px #e4c179;}
.controls select{width:100%;min-height:48px;padding:10px;background:#293a2d;color:#f8eed8;border:1px solid #71856a;border-radius:10px;}
.switches{display:flex;gap:8px;flex-wrap:wrap;}
.switches label{display:flex;gap:8px;align-items:center;min-height:44px;padding:7px 10px;border:1px solid #62725c;background:#26362a;border-radius:10px;flex:1;white-space:nowrap;justify-content:center;}
.switches input{width:18px;height:18px;accent-color:#ccab67;}
.hero-area{margin-top:16px;background:linear-gradient(130deg,#10271e,#183021);border:1px solid #a08a57;border-radius:16px;padding:10px 12px 16px;}
.hero-area h2{text-align:center;font:600 18px Georgia,serif;color:#e7d2a0;margin-bottom:8px;}
.hero-stage{height:clamp(420px,110vw,560px);margin:0;}
.hero-stage .portrait{inset:0 auto 0 50%;width:min(100%,385px);transform:translateX(-50%);}
.hero-stage .equipment{display:none;}
#backing-avatar{display:none;}
#appearance{display:none;}
.notice-help{color:#b9c8b8;font-size:13px;line-height:1.5;margin:13px 4px 0;}
#error-message{padding:12px;border:1px solid #c67867;background:#492822;border-radius:8px;color:#fff;}
@media(max-width:375px){.hero-preview{padding:10px 10px 26px}.controls{padding:12px}.hero-stage{height:420px}.heading h1{font-size:23px}.switches label{padding:7px 5px;font-size:13px}}