*{box-sizing:border-box}html,body{margin:0;background:#121820;color:#ede6d8;font:16px/1.45 system-ui,sans-serif;min-height:100%}body{min-height:100svh;display:flex;flex-direction:column}header{padding:8px max(14px,env(safe-area-inset-left));display:flex;gap:15px;justify-content:space-between;align-items:center;border-bottom:1px solid #596363;background:#141f26;z-index:2}header a{color:#dfc287;display:inline-flex;align-items:center;min-height:40px}header span{font-size:14px;color:#c7d0cc}main{width:100%;flex:1;min-height:calc(100svh - 57px);display:grid;grid-template-columns:minmax(0,1fr) minmax(315px,390px);align-items:center;gap:12px;padding:18px clamp(14px,4vw,64px)}#preview{position:relative;align-self:stretch;min-width:0;min-height:390px}#preview canvas{width:100%;height:100%;position:absolute;inset:0;touch-action:none}#preview-caption{position:absolute;bottom:8px;left:12px;z-index:1;pointer-events:none;text-shadow:1px 1px 3px #000}.panel{position:relative;z-index:1;max-height:calc(100dvh - 80px);overflow:auto;background-color:#17222cee;background-image:var(--panel-src);background-position:center;background-size:100% 100%;border:1px solid #76694e;padding:20px;box-shadow:0 4px 20px #0007}.kicker{color:#d5ba7e;letter-spacing:.17em;font-size:11px;margin:0}h1{font:normal 34px Georgia,serif;margin:5px 0 12px}p{margin:9px 0}.looks,.actions{display:flex;gap:8px;flex-wrap:wrap}.looks label{min-width:75px;flex:1}.actions{margin-top:16px}button,select,input{font:inherit;min-height:42px;color:#ede6d8;border:1px solid #76694e;background:#202b34;border-radius:3px}button{cursor:pointer;padding:7px 13px}button:disabled{opacity:.52;cursor:default}#creator>label,.looks label{display:block;margin:8px 0;color:#d7c9ad}select,input{display:block;width:100%;margin-top:3px;padding:5px 8px;color:#eee;background:#15212a}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #e9c884;outline-offset:2px}.hint,#slots,#connection,#class-about{color:#b9c4c5;font-size:14px}#characters{display:grid;gap:6px}#characters button{text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}#characters button[aria-pressed=true]{background-color:#33423d;border-color:#d7b879}#characters small{color:#c4cbc9}#message[data-error=true]{color:#ffd0ac}#enter,#create{background-color:#534937;border-color:#c1a46c}.actions button{flex:1}#creator[hidden],#selection[hidden],[hidden]{display:none!important}@media(max-width:680px){main{grid-template-columns:1fr;grid-template-rows:minmax(200px,32svh) auto;align-items:start;gap:3px;padding:5px 10px 20px}#preview{min-height:200px;align-self:stretch}.panel{max-height:none;padding:15px}h1{font-size:27px}header{padding:4px 12px}header span{font-size:12px}button,select,input{min-height:44px}.looks{gap:6px}}