:root{color-scheme:dark;--bg:#171a18;--surface:#202420;--raised:#292e29;--line:#3a403a;--text:#f2f0e9;--muted:#a0a79f;--accent:#d5a84a;--accent-text:#241c0d;--danger:#df786f;font-family:Inter,"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif}
*{box-sizing:border-box}html,body,#previewApp{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text)}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#previewViewport{position:absolute;inset:0}#previewViewport canvas{display:block;width:100%;height:100%;touch-action:none}
.preview-header{position:absolute;top:0;left:0;right:0;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:linear-gradient(to bottom,rgba(17,20,18,.94),rgba(17,20,18,.18));pointer-events:none}
.preview-brand,.preview-actions{display:flex;align-items:center;pointer-events:auto}.preview-brand{gap:9px;min-width:0}.preview-brand>span{width:34px;height:34px;display:grid;place-items:center;border-radius:5px;background:var(--accent);color:var(--accent-text)}.preview-brand svg{width:18px}.preview-brand strong,.preview-brand small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-brand strong{font-size:14px}.preview-brand small{max-width:270px;margin-top:2px;color:var(--muted);font-size:10px}
.preview-actions{gap:6px}.icon-btn,.selection-btn{height:36px;border:1px solid var(--line);border-radius:5px;background:rgba(28,32,29,.9)}.icon-btn{width:36px;display:grid;place-items:center;padding:0}.icon-btn svg{width:16px}.icon-btn.walk-btn{width:auto;display:flex;gap:6px;padding:0 10px;border-color:rgba(213,168,74,.62);color:#f0ca72}.walk-btn span{font-size:10px}.selection-btn{display:flex;align-items:center;gap:6px;padding:0 9px}.selection-btn svg{width:15px;color:var(--accent)}.selection-btn span{font-size:11px}.selection-btn strong{min-width:18px;height:18px;display:grid;place-items:center;border-radius:9px;background:var(--accent);color:var(--accent-text);font-size:9px}
.store-customize{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));height:42px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:var(--accent-text);font-weight:700;font-size:12px}.store-customize svg{width:17px}
.preview-joystick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:112px;display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:none;user-select:none}.preview-joystick>span{position:relative;width:92px;height:92px;border:1px solid rgba(213,168,74,.58);border-radius:50%;background:rgba(20,23,21,.56);box-shadow:inset 0 0 20px rgba(0,0,0,.3);backdrop-filter:blur(5px)}.preview-joystick>span::before,.preview-joystick>span::after{content:"";position:absolute;background:rgba(213,168,74,.2)}.preview-joystick>span::before{left:45px;top:8px;width:1px;height:76px}.preview-joystick>span::after{left:8px;top:45px;width:76px;height:1px}.preview-joystick i{position:absolute;left:28px;top:28px;width:36px;height:36px;border:1px solid var(--accent);border-radius:50%;background:rgba(213,168,74,.9);box-shadow:0 5px 14px rgba(0,0,0,.3)}.preview-joystick small{color:var(--muted);font-size:9px}.is-hidden{display:none!important}.movement-guide{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:5px;background:rgba(20,23,21,.88);box-shadow:0 8px 24px rgba(0,0,0,.22);pointer-events:none}.movement-guide>span:last-child{min-width:145px}.movement-guide strong,.movement-guide small{display:block}.movement-guide strong{font-size:10px}.movement-guide small{margin-top:3px;color:var(--muted);font-size:8px}.key-grid{width:56px;display:grid;grid-template-columns:repeat(3,17px);grid-template-rows:repeat(2,17px);gap:2px}.key-grid kbd{display:grid;place-items:center;border:1px solid #646b64;border-bottom-width:2px;border-radius:3px;background:#2c312d;color:#fff;font:700 9px Inter,sans-serif}.key-grid kbd:first-child{grid-column:2}.key-grid kbd:nth-child(2){grid-column:1}.key-grid kbd:nth-child(3){grid-column:2}.key-grid kbd:nth-child(4){grid-column:3}.movement-guide.is-active{border-color:rgba(213,168,74,.65)}.movement-guide.is-active .key-grid kbd{border-color:#a98745;color:#f0ca72}
.mobile-forward{display:none;position:absolute;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:18;width:78px;height:58px;border:1px solid rgba(240,202,114,.78);border-radius:6px;background:rgba(169,135,69,.92);color:#171a18;touch-action:none;user-select:none;align-items:center;justify-content:center;flex-direction:column;gap:2px;font:700 10px "Microsoft YaHei",sans-serif;box-shadow:0 8px 22px rgba(0,0,0,.3)}.mobile-forward svg{width:21px;height:21px}.mobile-forward.is-pressed{transform:translateY(1px);background:#f0ca72}
.detail-sheet{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:min(330px,calc(100vw - 32px));padding:18px;border:1px solid var(--line);border-radius:6px;background:rgba(27,31,28,.96);box-shadow:0 18px 55px rgba(0,0,0,.35);backdrop-filter:blur(12px);transition:transform .2s ease,opacity .2s ease}.detail-sheet.is-hidden{opacity:0;transform:translateY(18px);pointer-events:none}.sheet-close{position:absolute;right:9px;top:9px;width:30px;height:30px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted)}.sheet-close svg{width:15px}.detail-kind{color:var(--accent);font-size:9px;letter-spacing:.12em}.detail-sheet h1{max-width:260px;margin:7px 0 5px;font-size:19px;letter-spacing:0}.detail-sheet p{margin:0;color:#f0ca72;font-size:15px}.detail-meta{margin:9px 0 14px;color:var(--muted);font-size:10px;line-height:1.5}
.primary-btn,.secondary-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:5px;padding:0 13px}.primary-btn{border:1px solid var(--accent);background:var(--accent);color:var(--accent-text);font-weight:700}.secondary-btn{border:1px solid var(--line);background:var(--raised)}.primary-btn svg,.secondary-btn svg{width:15px}.detail-sheet .primary-btn{width:100%}
dialog{width:min(520px,calc(100vw - 24px));padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.55)}dialog::backdrop{background:rgba(8,10,9,.72);backdrop-filter:blur(4px)}.selection-dialog{padding:18px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between}.dialog-head span{color:var(--accent);font-size:9px;letter-spacing:.14em}.dialog-head h2{margin:4px 0 0;font-size:19px}.selection-list{display:grid;gap:5px;margin-top:16px;max-height:38vh;overflow-y:auto}.selection-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.selection-row strong,.selection-row small{display:block}.selection-row strong{font-size:11px}.selection-row small{margin-top:3px;color:var(--muted);font-size:9px}.selection-row button{border:0;background:transparent;color:var(--danger);font-size:10px}.empty-selection{min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:11px}.empty-selection svg{width:24px}.contact-field{display:block;margin-top:14px;color:var(--muted);font-size:10px}.contact-field input{width:100%;height:38px;margin-top:6px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:#151815;color:var(--text)}.dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.preview-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);z-index:10;transition:opacity .35s ease}.preview-loading.done{opacity:0;pointer-events:none}.preview-loading span{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.preview-loading p{color:var(--muted);font-size:11px}@keyframes spin{to{transform:rotate(360deg)}}.preview-toast{position:absolute;left:50%;bottom:76px;transform:translate(-50%,12px);padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:var(--raised);font-size:11px;opacity:0;pointer-events:none;transition:.2s ease}.preview-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:600px){.preview-header{min-height:58px;padding-top:max(8px,env(safe-area-inset-top))}.preview-brand>span{width:30px;height:30px}.preview-brand strong{font-size:12px}.preview-brand small{max-width:86px;font-size:8px}.preview-actions{gap:3px}.icon-btn{width:32px;height:32px}.icon-btn.walk-btn{width:32px;padding:0;justify-content:center}.walk-btn span{display:none}.selection-btn{height:32px;padding:0 6px}.selection-btn span{display:none}.store-customize{left:12px;right:auto;bottom:max(12px,env(safe-area-inset-bottom));height:38px}.detail-sheet{left:10px;right:10px;bottom:76px;width:auto;padding:15px}.detail-sheet h1{font-size:16px}.detail-sheet p{font-size:13px}.selection-list{max-height:44vh}.preview-toast{bottom:126px;max-width:calc(100vw - 28px);text-align:center}.preview-joystick{left:8px;bottom:10px}.mobile-forward{display:flex}.movement-guide{right:8px;left:auto;bottom:76px;transform:none;padding:7px}.movement-guide>span:last-child{display:none}}