*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:#14171c;color:#e8ecf1;overflow:hidden}.app{display:flex;height:100%}.canvas-wrap{flex:1;position:relative;min-width:0}.canvas-wrap canvas{width:100%;height:100%;display:block}.canvas-hint{position:absolute;left:12px;bottom:10px;font-size:12px;color:#3d5568;background:#ffffffb8;padding:4px 10px;border-radius:20px;pointer-events:none}.panel{width:340px;height:100%;overflow-y:auto;background:#171b21;border-left:1px solid #262c35;padding:16px 16px 40px}.panel-head h1{font-size:17px;font-weight:600}.panel-head .sub{font-size:12px;color:#7d8894;margin:3px 0 6px}section{margin-top:16px;border-top:1px solid #232932;padding-top:10px}section h2{font-size:12px;font-weight:600;color:#8fa2b5;letter-spacing:1px;margin-bottom:8px}.slider-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12.5px}.slider-label{flex:0 0 118px;color:#c7d0da;line-height:1.25}.slider-row input[type=range]{flex:1;accent-color:#e24b4a;min-width:0}.slider-val{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-size:12px}.check-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px;color:#c7d0da}.check-row input{accent-color:#e24b4a;width:15px;height:15px}.reset-btn{margin-top:6px;width:100%;padding:7px 0;font-size:13px;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:8px;cursor:pointer}.reset-btn:hover{background:#2b323d}.swatch-row{display:flex;gap:8px;align-items:center}.swatch{width:26px;height:26px;border-radius:7px;cursor:pointer;border:2px solid transparent;padding:0}.swatch.active{border-color:#fff;box-shadow:0 0 0 2px #e24b4a}.swatch-custom{width:30px;height:30px;padding:0;border:1px solid #313945;border-radius:7px;background:none;cursor:pointer}.chip-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.chip{padding:5px 10px;font-size:12px;cursor:pointer;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:14px}.chip.active{background:#e24b4a;border-color:#e24b4a;color:#fff}.float-fill{background:linear-gradient(90deg,#1d6fa5,#4fa3dd)}.mode-row{display:flex;gap:6px;margin-bottom:8px}.mode-btn{flex:1;padding:6px 0;font-size:12.5px;cursor:pointer;background:#232932;color:#c7d0da;border:1px solid #313945;border-radius:8px}.mode-btn.active{background:#e24b4a;border-color:#e24b4a;color:#fff}.go-btn{width:100%;margin-top:10px;padding:11px 0;font-size:15px;font-weight:600;background:#e24b4a;color:#fff;border:none;border-radius:10px;cursor:pointer}.go-btn:hover{background:#ef5a56}.phase-line{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13px}.phase-tag{padding:3px 10px;border-radius:12px;background:#232932;color:#c7d0da;font-size:12px}.phase-air{background:#1d4f7c;color:#bfe0ff}.phase-crash{background:#6b201d;color:#ffc4c0}.phase-land{background:#1d5c37;color:#b9edcc}.result-card{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid}.result-clean{background:#12291b;border-color:#2a6e44}.result-sketchy{background:#2b2410;border-color:#8a6d1f}.result-crash{background:#2e1514;border-color:#7a2f2c}.result-title{font-size:15px;font-weight:600;margin-bottom:4px}.result-clean .result-title{color:#7fd68a}.result-sketchy .result-title{color:#e8b93b}.result-crash .result-title{color:#f07a6d}.result-reason{font-size:12.5px;color:#b9c2cc;line-height:1.5;margin-bottom:8px}.warn-box{margin-top:14px;padding:10px 12px;font-size:12.5px;line-height:1.55;background:#3a1d1c;border:1px solid #7a2f2c;border-radius:8px;color:#f0b8b4}.sharebar-wrap{margin-bottom:10px}.sharebar-labels{display:flex;justify-content:space-between;font-size:12px;color:#c7d0da;margin-bottom:3px}.sharebar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:#232932}.sharebar-left{background:#185fa5}.sharebar-right{background:#378add}.stat-row{display:flex;justify-content:space-between;font-size:12.5px;color:#c7d0da;margin:4px 0}.stat-row b{color:#fff;font-variant-numeric:tabular-nums}.muscle-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:help}.muscle-name{flex:0 0 128px;font-size:12.5px;color:#c7d0da}.muscle-bar{flex:1;height:9px;background:#232932;border-radius:5px;overflow:hidden}.muscle-fill{height:100%;background:linear-gradient(90deg,#a33,#e24b4a);border-radius:5px}.muscle-val{flex:0 0 36px;text-align:right;font-size:11.5px;color:#9aa7b4;font-variant-numeric:tabular-nums}.hint{font-size:11.5px;color:#66727f;margin-top:8px;line-height:1.5}@media(max-width:760px){.app{flex-direction:column}.canvas-wrap{flex:0 0 48vh}.panel{width:100%;flex:1;border-left:none;border-top:1px solid #262c35}}.play-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.play-hud{position:absolute;top:12px;left:12px;background:#10141cb8;border-radius:12px;padding:10px 14px;color:#eef3f9;min-width:158px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-speed{font-size:34px;font-weight:800;line-height:1}.hud-speed i{font-size:12px;font-style:normal;opacity:.7;margin-left:4px}.hud-sub{margin-top:6px;font-size:12px;opacity:.85}.bal-bar{position:relative;height:6px;margin-top:8px;background:#ffffff2e;border-radius:3px}.bal-bar:after{content:"";position:absolute;left:50%;top:-2px;width:2px;height:10px;background:#fff6}.bal-bar i{position:absolute;top:-3px;width:10px;height:12px;margin-left:-5px;border-radius:3px;background:#e8b93b}.charge-bar{height:5px;margin-top:6px;background:#ffffff26;border-radius:3px;overflow:hidden}.charge-bar i{display:block;height:100%;background:#7fd68a}.play-msg{position:absolute;top:14px;left:50%;transform:translate(-50%);max-width:72%;background:#10141cd1;color:#ffe9a8;padding:8px 16px;border-radius:10px;font-size:14px;text-align:center;animation:msgpop .25s ease}@keyframes msgpop{0%{transform:translate(-50%,-8px);opacity:0}to{transform:translate(-50%);opacity:1}}.pad{position:absolute;bottom:18px;display:flex;gap:12px;pointer-events:none}.pad-l{left:16px}.pad-r{right:16px}.pad-btn{pointer-events:auto;width:78px;height:62px;border-radius:14px;border:1px solid rgba(255,255,255,.35);background:#141a248c;color:#fff;font-size:13px;font-weight:600;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer}.pad-btn:active{background:#2f6fd0c7}.key-grid{display:grid;grid-template-columns:26px 1fr;gap:6px 8px;font-size:12px;color:#a8b4c4;align-items:start;margin-bottom:8px}.key-cap{display:inline-block;text-align:center;background:#2a3242;border:1px solid #45506a;border-radius:5px;font-weight:700;color:#fff;padding:1px 0;font-size:11px}.pad-l2{left:16px;bottom:88px}.pad-l2 .pad-btn{height:46px;opacity:.85}.pad-r2{right:16px;bottom:88px}.pad-r2 .pad-btn{height:46px;opacity:.85}.hp-bar{height:7px;margin-top:8px;background:#ffffff26;border-radius:4px;overflow:hidden}.hp-bar i{display:block;height:100%;border-radius:4px;transition:width .3s ease}.play-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0e121aeb;border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:24px 32px;text-align:center;color:#eef3f9;pointer-events:auto;min-width:260px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:msgpop .3s ease;z-index:10}.dlg-title{font-size:26px;font-weight:800;margin-bottom:6px}.dlg-sub{font-size:13px;color:#a8b4c4;margin-bottom:8px}.dlg-stats{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:13px;color:#cfd8e4;margin:12px 0 16px}.dlg-btn{pointer-events:auto;background:#d8453c;color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:16px;font-weight:700;cursor:pointer}.dlg-btn:hover{background:#e8554c}.editor-canvas{width:100%;height:auto;display:block;background:#10141c;border:1px solid #2a3242;border-radius:8px;touch-action:none;cursor:crosshair;margin:8px 0 6px}.trick-banner{position:absolute;top:15%;left:50%;width:100%;text-align:center;pointer-events:none;transform:translate(-50%);animation:trickpop .45s cubic-bezier(.18,2.2,.4,1),trickvanish .35s 1.85s forwards}@keyframes trickvanish{to{opacity:0;transform:translate(-50%) translateY(-10px) scale(.92)}}.trick-name{display:inline-block;font-weight:900;font-style:italic;letter-spacing:2px;font-family:Arial Black,-apple-system,sans-serif;line-height:1;transform:skew(-6deg)}.trick-combo{margin-top:6px;font-size:17px;font-weight:800;letter-spacing:3px;color:#ffd23e;text-shadow:0 2px 0 #7a4d00,0 0 14px rgba(255,190,40,.9);animation:trickpop .5s .12s cubic-bezier(.18,2.2,.4,1) backwards}.tier1 .trick-name{font-size:34px;color:#eaf2fb;text-shadow:0 3px 0 #2f5fa8,0 0 16px rgba(110,170,255,.8)}.tier2 .trick-name{font-size:44px;color:#ffd23e;text-shadow:0 3px 0 #8a5a00,0 0 22px rgba(255,200,40,.9)}.tier3 .trick-name{font-size:54px;color:#ff8a2a;text-shadow:0 4px 0 #7a3400,0 0 28px rgba(255,140,40,.95);animation:trickshake .4s .1s}.tier4 .trick-name{font-size:64px;color:#f35;text-shadow:0 4px 0 #6a0018,0 0 34px rgba(255,60,90,1);animation:trickshake .55s .1s}.tier5 .trick-name{font-size:76px;background:linear-gradient(180deg,#fff6c8,#ffd23e 35%,#ff8a2a 65%,#f35);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #5a0014) drop-shadow(0 0 26px rgba(255,120,60,.95));animation:trickshake .7s .1s}@keyframes trickpop{0%{transform:translate(-50%) scale(2.4);opacity:0}55%{transform:translate(-50%) scale(.94);opacity:1}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes trickshake{0%,to{transform:skew(-6deg) translate(0)}15%{transform:skew(-6deg) translate(-5px,2px)}30%{transform:skew(-6deg) translate(5px,-3px)}45%{transform:skew(-6deg) translate(-4px,-2px)}60%{transform:skew(-6deg) translate(4px,2px)}75%{transform:skew(-6deg) translate(-2px,1px)}}@media(max-width:760px){.tier1 .trick-name{font-size:28px}.tier2 .trick-name{font-size:34px}.tier3 .trick-name{font-size:40px}.tier4 .trick-name{font-size:46px}.tier5 .trick-name{font-size:54px}}.air-spin{position:absolute;top:7%;left:50%;transform:translate(-50%);font-weight:900;font-style:italic;letter-spacing:2px;line-height:1;font-family:Arial Black,-apple-system,sans-serif;font-size:34px;pointer-events:none;animation:trickpop .28s cubic-bezier(.18,2.2,.4,1),trickvanish .3s 2.5s forwards;color:#eaf2fb;text-shadow:0 2px 0 #2f5fa8,0 0 14px rgba(110,170,255,.7)}.air-spin.tier2{color:#ffd23e;text-shadow:0 2px 0 #8a5a00,0 0 16px rgba(255,200,40,.8)}.air-spin.tier3{color:#ff8a2a;text-shadow:0 2px 0 #7a3400,0 0 18px rgba(255,140,40,.85);font-size:38px}.air-spin.tier4{color:#f35;text-shadow:0 2px 0 #6a0018,0 0 20px rgba(255,60,90,.9);font-size:42px}.air-spin.tier5{color:#ff2a86;text-shadow:0 2px 0 #55003a,0 0 24px rgba(255,70,150,.95);font-size:46px}.trick-banner.trick-landed:before{content:"";position:absolute;left:50%;top:40%;width:30px;height:30px;border-radius:50%;border:4px solid rgba(255,210,62,.9);transform:translate(-50%,-50%);animation:stompring .55s ease-out forwards;pointer-events:none}@keyframes stompring{0%{width:20px;height:20px;opacity:1;border-width:6px}to{width:340px;height:340px;opacity:0;border-width:1px}}.trick-banner.trick-fail{animation:trickvanish .35s 1.85s forwards}.trick-banner.trick-fail .trick-name{font-size:42px;color:#8a94a2;text-shadow:0 3px 0 #2a3038,0 0 10px rgba(0,0,0,.4);animation:trickfall 1.6s cubic-bezier(.4,0,.7,1) forwards}.trick-sub-fail{margin-top:4px;font-size:15px;font-weight:700;letter-spacing:2px;color:#77808c;animation:trickfall 1.6s .08s cubic-bezier(.4,0,.7,1) forwards}@keyframes trickfall{0%{transform:skew(-6deg) translateY(-14px) rotate(0);opacity:0}12%{transform:skew(-6deg) translateY(0) rotate(0);opacity:1}55%{transform:skew(-6deg) translateY(10px) rotate(-3deg);opacity:1}to{transform:skew(-6deg) translateY(46px) rotate(-7deg);opacity:0}}.posture-dial{position:absolute;top:132px;left:12px;text-align:center;pointer-events:none}.posture-dial svg{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}.posture-num{margin-top:2px;font-size:11px;font-weight:600;background:#10141cb8;border-radius:8px;padding:2px 6px;display:inline-block}.outfit-colors{display:flex;gap:14px;margin:4px 0 8px}.outfit-color{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#c7d0da}.outfit-color input[type=color]{width:34px;height:26px;padding:0;border:1px solid #313945;border-radius:7px;background:none;cursor:pointer}.outfit-face{display:flex;align-items:center;gap:8px}.outfit-upload{flex:1;text-align:center;padding:7px 6px;cursor:pointer}.face-preview{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #45506a}