.skill-world-shell{--skill-aqua: #48d7b8;--skill-blue: #5b8cff;--skill-violet: #a583ff;--skill-gold: #ffc857;--skill-coral: #ff7f96;background:radial-gradient(circle at 52% -12%,rgb(105 56 239 / 30%),transparent 35rem),radial-gradient(circle at 5% 25%,rgb(72 215 184 / 13%),transparent 27rem),linear-gradient(180deg,#10142a,#090e1d 68%,#080c18)}.skill-world-3d{position:relative;width:100%;height:clamp(480px,61vw,680px);margin-inline:auto;overflow:hidden;border-radius:0 0 1.5rem 1.5rem;background:radial-gradient(circle at 50% 47%,rgb(47 91 190 / 18%),transparent 36%),radial-gradient(circle at 50% 80%,rgb(28 219 181 / 8%),transparent 28%),linear-gradient(180deg,#060b1e7a,#030713d1);isolation:isolate;touch-action:none}.skill-world-canvas{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;cursor:grab}.skill-world-canvas:active{cursor:grabbing}.skill-world-3d-vignette{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgb(4 8 22 / 55%),transparent 16% 84%,rgb(4 8 22 / 55%)),linear-gradient(180deg,transparent 58%,rgb(3 7 18 / 64%));pointer-events:none}.skill-world-3d-hud{position:absolute;top:1rem;right:1rem;z-index:4;display:flex;gap:.5rem;pointer-events:none}.skill-world-3d-hud span{border:1px solid rgb(158 180 255 / 16%);border-radius:999px;background:#070c1ea3;padding:.35rem .6rem;color:#d2dbf89e;font-family:var(--font-mono);font-size:.55rem;font-weight:700;letter-spacing:.09em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.skill-world-3d-label{position:absolute;z-index:3;display:grid;min-width:84px;grid-template-columns:auto auto;align-items:center;border:1px solid color-mix(in srgb,var(--node-color),white 24%);border-radius:.65rem;background:color-mix(in srgb,var(--node-color),#071027 77%);box-shadow:inset 0 1px #ffffff29,0 10px 22px #0000006b,0 0 20px color-mix(in srgb,var(--node-color),transparent 52%);padding:.32rem .45rem;color:#fff;text-align:left;opacity:0;transform:translate(-50%,calc(-100% - 22px));transition:opacity .16s ease,box-shadow .16s ease,transform .16s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.skill-world-3d-label:hover,.skill-world-3d-label[data-active=true]{box-shadow:inset 0 1px #ffffff47,0 12px 28px #0000008a,0 0 28px color-mix(in srgb,var(--node-color),transparent 24%);transform:translate(-50%,calc(-100% - 25px)) scale(1.08)}.skill-world-3d-level{grid-column:1 / -1;color:color-mix(in srgb,var(--node-color),white 35%);font-family:var(--font-mono);font-size:.48rem;font-weight:800;letter-spacing:.08em}.skill-world-3d-name{font-size:.66rem;font-weight:900;letter-spacing:.025em}.skill-world-3d-progress{justify-self:end;margin-left:.5rem;font-size:.66rem;font-weight:800}.skill-world-3d-compass{position:absolute;bottom:1rem;left:1rem;z-index:4;display:grid;width:2.3rem;height:2.3rem;place-items:center;border:1px solid rgb(144 170 255 / 24%);border-radius:50%;background:#050b1da3;color:#91a7ff;font-family:var(--font-mono);font-size:.55rem;font-weight:900;box-shadow:inset 0 0 0 4px #6889ff0d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.skill-world-3d-compass:before{position:absolute;top:.22rem;width:0;height:0;border-right:.18rem solid transparent;border-bottom:.38rem solid #91a7ff;border-left:.18rem solid transparent;content:""}.skill-world-exemplar img{transition:transform .22s ease,filter .22s ease}.skill-world-exemplar:hover img{filter:saturate(1.08);transform:scale(1.06)}@media(max-width:640px){.skill-world-3d{height:480px}.skill-world-3d-hud span:last-child{display:none}.skill-world-3d-label{min-width:72px}}