.skill-preview {
  --skill-tint: #adccdf;
  position: fixed; z-index: 80; width: min(380px, calc(100vw - 24px));
  max-height: calc(100svh - 24px); overflow: auto;
  padding: 23px; color: #eaf1f7; background: #071421f5;
  border: 1px solid color-mix(in srgb, var(--skill-tint) 40%, transparent);
  border-radius: 14px; box-shadow: 0 18px 70px #0008, inset 0 1px #d8eaff18;
  backdrop-filter: blur(20px); font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
.skill-preview-close { position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; font-size: 24px; background: transparent; color: #b6c7d5; }
.skill-preview-category { font-size: 10px; letter-spacing: .12em; color: var(--skill-tint); padding-right: 22px; }
.skill-preview h2 { font-size: 20px; line-height: 1.5; font-weight: 500; margin: 9px 0 16px; padding-right: 12px; }
.skill-preview-media { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid #a4c9e025; border-radius: 7px; background: radial-gradient(ellipse at 50% 60%, #173048, #060e18); }
.skill-preview-media video { width: 100%; height: 100%; object-fit: contain; }
.skill-demo { width: 100%; height: 100%; display: block; }
.orbit-hit[data-visible="true"][aria-expanded="true"] .orbit-tooltip { opacity: 0; }
.skill-preview-empty { color: #a2b6c9; font-size: 12px; }
.skill-preview-description { font-size: 12px; line-height: 1.9; margin-top: 16px; color: #c2d0dc; }
.skill-preview-outcome { font-size: 11px; line-height: 1.8; color: var(--skill-tint); border-top: 1px solid #bdd4e51c; margin-top: 13px; padding-top: 13px; }

.skill-preview { width:min(420px, calc(100vw - 24px)); }
.skill-studio { position:relative; width:100%; height:100%; overflow:hidden; background:#091521; }
.skill-studio[hidden],.studio-canvas[hidden],.studio-cad[hidden],.skill-demo[hidden] { display:none; }
.studio-canvas,.studio-cad { display:block; width:100%; height:100%; object-fit:contain; }
.studio-heading { position:absolute; left:5%; top:7%; display:grid; gap:5px; pointer-events:none; }
.studio-heading small { font:500 clamp(5px,.65vw,10px)/1.3 'Segoe UI',sans-serif; letter-spacing:.13em; color:#9fbbca; }
.studio-heading strong { font:400 clamp(12px,1.5vw,21px)/1.4 'Microsoft YaHei',sans-serif; letter-spacing:.1em; color:#e4e9e9; }
.studio-disclaimer { position:absolute; right:5%; top:8%; font-size:8px; color:#90a2ae; }
.studio-caption { position:absolute; left:5%; right:5%; bottom:6%; display:flex; justify-content:space-between; align-items:center; color:#d3dce2; font-size:clamp(9px,1vw,14px); text-shadow:0 1px 4px #000; }
.studio-caption small { color:#8eabbc; font:10px monospace; }
.studio-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#7897ad1a; }
.studio-progress i { display:block; height:100%; background:#a7c3d5; }
.skill-expand { display:block; margin:10px 0 0 auto; padding:5px 2px; font-size:11px; color:var(--skill-tint); background:none; border:0; }
.skill-expand:hover { color:#fff; }
.skill-expand:focus-visible { outline:1px solid currentColor; outline-offset:4px; }
.skill-playback { display:flex; align-items:center; gap:8px; margin-top:10px; font:11px 'Segoe UI','Microsoft YaHei',sans-serif; }
.skill-playback[hidden],.skill-static[hidden] { display:none; }
.skill-playback button { min-height:36px; padding:7px 12px; color:#c5d8e4; border:1px solid #9eb7c630; border-radius:6px; background:#122330; font:inherit; }
.skill-playback button:hover { border-color:#a8c8dc; background:#1c3446; }
.skill-playback button:focus-visible { outline:2px solid #b8d9ef; outline-offset:3px; }
.skill-playback button:disabled { opacity:.45; cursor:default; }
.skill-playback span { margin-left:auto; color:#8ea6b8; }
.skill-static { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.skill-static img { display:block; width:100%; height:100%; object-fit:contain; }
.skill-static span { position:absolute; bottom:12%; left:0; right:0; text-align:center; color:#e2edf4; background:#091521dc; padding:8px; font-size:11px; }
.skill-theater { width:min(1120px,94vw); max-width:94vw; max-height:94svh; padding:22px; border:1px solid #acc3d440; border-radius:18px; background:#08131f; color:#e3edf5; }
.skill-theater::backdrop { background:#020810dc; backdrop-filter:blur(15px); }
.skill-theater header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.skill-theater header small { font:10px 'Segoe UI',sans-serif; letter-spacing:.12em; color:#91abba; }
.skill-theater h2 { font-size:20px; margin:6px 0 0; font-weight:500; }
.skill-theater header button { width:44px;height:44px; border:1px solid #8eabba35; border-radius:50%; background:#172634; color:#d7e8f5; font-size:25px; }
.skill-theater .skill-preview-media { width:100%; max-height:70svh; }
.skill-theater>p { margin:13px 0 0; color:#8297a9; font-size:11px; text-align:center; }
.skill-theater .studio-heading small { font-size:clamp(6px,1vw,12px); }
.skill-theater .studio-heading strong { font-size:clamp(14px,2.2vw,28px); }
.skill-theater .studio-caption { font-size:clamp(10px,1.4vw,17px); }
@media(max-width:619px) { .skill-theater { padding:12px; } .skill-theater h2 { font-size:16px; } .skill-theater header small { font-size:8px; } }

.studio-heading { z-index:2; }
.studio-detail { position:absolute; top:25%; right:4%; width:20%; padding:2%; background:#081826ed; border:1px solid #829db53a; border-radius:6px; color:#afc3d5; display:grid; gap:6px; font-size:clamp(6px,.8vw,11px); }
.studio-detail[hidden] { display:none; }
.studio-detail strong { color:#c4c9ff; font-size:clamp(8px,1vw,14px); }
.studio-detail small { font-size:inherit; color:#7691a9; }
.studio-detail svg { width:100%; margin:6px 0; }
.skill-preview .studio-detail { display:none; }
@media(max-width:619px) {
  .skill-theater .studio-detail { display:none; }
  .skill-theater .studio-heading strong { font-size:11px; }
  .skill-theater .studio-heading small { font-size:6px; }
  .skill-theater .studio-caption { font-size:9px; }
}