.xp{position:relative;width:min(1120px,calc(100vw - 32px));margin-left:50%;transform:translateX(-50%);height:clamp(420px,76vh,780px);background:#02030a;border-radius:10px;overflow:hidden;color:#e9eefc;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;user-select:none;-webkit-user-select:none;touch-action:auto;margin-bottom:1.2rem}
.xp.xp-full{height:100vh;border-radius:0;width:100vw;margin-left:0;transform:none}
.xp canvas{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:pan-y}
@media (pointer:fine){.xp canvas{touch-action:none}}
.xp.xp-locked canvas,.xp.xp-full canvas{touch-action:none}
.xp-lockbtn{display:none}
@media (pointer:coarse){.xp-lockbtn{display:inline-block}}
.xp-lockhint{display:none}
.xp canvas:active{cursor:grabbing}
.xp button{font:inherit;color:#e9eefc;background:rgba(18,26,52,.78);border:1px solid rgba(160,190,255,.28);border-radius:7px;padding:6px 11px;cursor:pointer;backdrop-filter:blur(4px)}
.xp button:hover{background:rgba(40,60,112,.85)}
.xp button:focus-visible,.xp canvas:focus-visible{outline:2px solid #8fb4ff;outline-offset:2px}
.xp button[aria-pressed="true"]{background:rgba(70,110,210,.55);border-color:rgba(160,190,255,.7)}
.xp-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#02030a;color:#c9d6ff;text-align:center;padding:20px;z-index:5}
.xp-hud{position:absolute;left:12px;top:12px;background:rgba(10,16,36,.62);padding:7px 11px;border-radius:8px;pointer-events:none;font-size:13px}
.xp-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.xp-label{position:absolute;left:0;top:0;font-size:12px;color:#dbe6ff;text-shadow:0 0 4px #000,0 0 8px #000;white-space:nowrap;display:none;will-change:transform}
.xp-tools{position:absolute;right:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.xp-warp{position:absolute;left:12px;bottom:46px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 24px);align-items:center}
.xp-warp span{font-size:12px;color:#aab8e6;margin-right:2px}
.xp-warp button{padding:4px 9px;font-size:13px}
.xp-info{position:absolute;right:12px;top:56px;width:min(310px,calc(100% - 24px));max-height:calc(100% - 150px);overflow:auto;background:rgba(10,16,36,.86);border:1px solid rgba(160,190,255,.25);border-radius:10px;padding:12px 14px;user-select:text;-webkit-user-select:text}
.xp-info h3{margin:0;font-size:18px;color:#fff;font-family:inherit}
.xp-info p{margin:.4em 0}.xp-info ul{margin:.3em 0 .5em;padding-left:1.1em}.xp-info li{margin:.15em 0}
.xp-type{font-size:12px;color:#9fb2ea;text-transform:uppercase;letter-spacing:.06em}
.xp-note{font-size:12px;color:#9fb2ea}
.xp-x{position:absolute;right:8px;top:6px;padding:0 8px!important;font-size:18px}
.xp-help{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-size:12px;color:#aab8e6;pointer-events:none;padding:0 10px;transition:opacity .6s}
.xp-help.xp-dim{opacity:.45}
.xp-touch{position:absolute;left:12px;bottom:84px;display:none;gap:8px}

.xp-sr{position:absolute;left:-9999px}
.xp-text{margin:1.2rem 0}.xp-text h2{margin-top:1.4rem}
.xp-sources{font-size:.92em;opacity:.85}
.xp-layers{position:absolute;left:12px;top:12px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 330px)}
.xp-layers button{padding:5px 10px;font-size:13px}
.xp-organs{position:absolute;left:12px;bottom:34px;display:flex;gap:5px;flex-wrap:wrap;max-width:calc(100% - 24px);align-items:center}
.xp-organs span{font-size:12px;color:#aab8e6;margin-right:2px}
.xp-organs button{padding:3px 9px;font-size:12.5px}
.xp-info a{color:#9ec3ff}



.xp-touch{display:none}
@media (pointer:coarse){.xp-help{display:none}}
@media (max-width:760px){
.xp{height:auto;display:flex;flex-direction:column;width:calc(100vw - 24px);padding-bottom:6px}
.xp canvas{height:min(58vh,480px);flex:none}
.xp.xp-full{height:100vh}.xp.xp-full canvas{height:auto;flex:1;min-height:0}
.xp-layers,.xp-tools,.xp-organs,.xp-warp,.xp-info,.xp-touch,.xp-help{position:static!important;max-width:none!important;width:auto!important;margin:6px 8px 0!important;max-height:none!important}
.xp-tools{justify-content:flex-start}
.xp-touch{display:flex;gap:8px}
.xp-help{display:block;order:9;font-size:11.5px}
.xp-hud{top:8px;left:8px}
.xp-info{order:5;max-height:44vh!important;overflow:auto}
.xp-layers{order:1}.xp-tools{order:2}.xp-warp{order:3}.xp-organs{order:3}.xp-touch{order:4}
.xp-x{position:absolute!important}
.xp-info{position:relative!important}
}
@media (max-width:760px) and (pointer:fine){.xp-touch{display:none}}

.xp-side{position:absolute;left:12px;top:12px;width:218px;max-height:calc(100% - 52px);overflow:auto;background:rgba(10,16,36,.74);border:1px solid rgba(160,190,255,.22);border-radius:10px;padding:8px;backdrop-filter:blur(4px)}
.xp-sidehead{display:flex;align-items:center;gap:5px;font-size:12px;color:#c9d6ff;margin-bottom:6px;flex-wrap:wrap}.xp-sidehead span{flex:1 1 100%;font-size:11px;color:#8fa0d4}
.xp-sidehead button{padding:2px 8px;font-size:12px}
.xp-sys{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.xp-sysbtn{flex:1;text-align:left;display:flex;align-items:center;gap:7px;padding:5px 8px!important;font-size:13px}
.xp-sysbtn i{width:10px;height:10px;border-radius:50%;flex:none;opacity:.35}.xp-sysbtn[aria-pressed="true"] i{opacity:1}
.xp-sysbtn[aria-pressed="false"]{opacity:.65}
.xp-exp{padding:5px 8px!important;font-size:13px;min-width:30px}.xp-exp:disabled{opacity:.3;cursor:default}
.xp-parts{flex:1 1 100%;display:flex;flex-direction:column;gap:2px;padding:2px 0 4px 10px}.xp-parts[hidden]{display:none}
.xp-part{text-align:left;padding:3px 8px!important;font-size:12.5px;background:rgba(255,255,255,.04)!important;border-color:transparent!important}
.xp-part:hover{background:rgba(70,110,210,.4)!important}.xp-part[aria-pressed="true"]{background:rgba(70,110,210,.6)!important;border-color:rgba(160,190,255,.7)!important}
@media (max-width:760px){.xp-side{position:static!important;width:auto!important;margin:6px 8px 0!important;max-height:38vh!important;order:2}.xp-tools{order:1}}

.xp-sep{flex:1 1 100%;font-size:12px;color:#8fa0d4;margin-top:4px}
.xp-earth{margin:.5em 0;padding:6px 9px;border-left:3px solid #6ea0ff;background:rgba(110,160,255,.12);border-radius:4px}
.xp-loading.xp-loadbadge{inset:auto;left:50%;top:12px;transform:translateX(-50%);padding:5px 12px;border-radius:14px;background:rgba(10,16,36,.85);font-size:13px;z-index:6;pointer-events:none;border:1px solid rgba(160,190,255,.3)}
