*{box-sizing:border-box}
body{margin:0}button{cursor:pointer}label{display:block}select,input[type=number],input[type=text]{width:100%;color:#e8edf8;outline:none}input[type=range]{width:100%}.range-label{display:flex;justify-content:space-between}.check-label{display:flex;align-items:center;gap:8px;cursor:pointer}.wide{width:100%;margin-top:10px}.button-row{display:flex;gap:6px}.header-actions{margin-left:auto;display:flex}.studio-header{display:flex;align-items:center}.sticker-list{display:grid;gap:6px}.sticker-item{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:6px;font-size:10.5px}.swatch{height:22px;width:22px;border-radius:50%;border:1px solid #8b96aa}.remove{padding:2px 5px;color:#f18787}.inspect-status{margin-top:8px;font-size:10.5px;line-height:1.5;color:#8793a3;word-break:break-all}.inspect-status.ok{color:#9bc7ae}.inspect-status.err{color:#f18787}#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#preview{display:block;width:100%;height:100%;z-index:1}.viewer-wrap{overflow:hidden}.tex-debug{position:absolute;max-width:330px;max-height:32vh;overflow:auto;background:#0b0e16ed;padding:12px;border:1px solid #ffffff20;border-radius:8px;font-size:10px;line-height:1.7;word-break:break-all}.tex-debug b{color:#edb07d}.tex-debug span{color:#8090a4}
/* Skin library: modal drawer over the live viewer. */
[hidden]{display:none!important}
.skin-picker-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:12px;border-radius:7px;background:#1a202bcc}
.skin-picker-trigger>span:first-child{min-width:0}.skin-picker-trigger small{display:block;font-size:9px;color:#929eaf;margin-bottom:7px}.skin-picker-trigger strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.skin-picker-trigger>span:last-child{font-size:24px;color:#a6b2c3}button:disabled{opacity:.5;cursor:wait}
#skinPicker,#weaponPicker{color:#edf1f7;background:#10151ded;border:1px solid #38424d;border-radius:14px;padding:0;width:min(760px,calc(100vw - 40px));max-width:none;height:min(740px,85dvh);max-height:90dvh;box-shadow:0 24px 90px #0009;backdrop-filter:blur(24px)}
#skinPicker[open],#weaponPicker[open]{display:flex;flex-direction:column}#skinPicker::backdrop,#weaponPicker::backdrop{background:#03070b66;backdrop-filter:blur(3px)}
.skin-picker-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px;flex-shrink:0}.skin-picker-heading small{color:#83919f;font-size:9px;letter-spacing:2px}.skin-picker-heading h2{font-size:19px;margin:6px 0 0;font-weight:600}.skin-picker-heading button{font-size:18px;border:0;background:transparent;padding:8px 12px}
.skin-picker-toolbar{display:flex;gap:10px;padding:0 24px 12px}.skin-picker-toolbar input{min-width:0;flex:1;background:#252d36;border:1px solid #424c58;border-radius:6px;color:#edf1f7;padding:11px 13px;font:12px Inter,system-ui}.skin-picker-toolbar select{width:130px;margin:0;border-radius:6px;background:#202832}
.skin-picker-count{padding:0 24px 14px;color:#8996a7;font-size:11px}.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:12px;overflow:auto;overscroll-behavior:contain;padding:2px 24px 24px;flex:1;min-height:0}
.skin-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px;min-height:164px;border:1px solid #ffffff13;border-top:2px solid var(--rarity);border-radius:9px;background:linear-gradient(145deg,#ffffff08,#ffffff02);padding:16px;overflow-wrap:anywhere}.skin-card:hover{background:#ffffff0b;border-color:var(--rarity);color:#fff;transform:translateY(-2px)}.skin-card[aria-pressed=true]{border-color:#7bf4cb;background:#7bf4cb0b}.skin-card-badge{font:500 18px monospace;color:var(--rarity);opacity:.9}.skin-card strong{font:600 12px Inter,system-ui;line-height:1.6}.skin-card small{font-size:10px;color:#97a4b4}.skin-card-status{font-size:10px;color:#8494a6;margin-top:auto}.skin-card[aria-pressed=true] .skin-card-status{color:#7bf4cb}
.skin-picker-empty{grid-column:1/-1;text-align:center;color:#9aa8ba;padding:50px 16px;line-height:1.8;font-size:13px}.skin-picker-footer{display:flex;justify-content:space-between;flex-shrink:0;padding:14px 24px;border-top:1px solid #ffffff12;color:#8d9bab;font-size:10px}
#skinPicker :focus-visible,#weaponPicker :focus-visible,.skin-picker-trigger:focus-visible{outline:2px solid #7bf4cb;outline-offset:3px}
@media(max-width:600px){#skinPicker,#weaponPicker{width:100%;height:85dvh;max-height:92dvh;margin:auto 0 0;border-radius:16px 16px 0 0}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:2px 16px 20px;gap:10px}.skin-picker-toolbar{padding:0 16px 12px}.skin-picker-heading{padding:20px 16px 16px}.skin-picker-count{padding-left:16px}.skin-card{padding:13px;min-height:158px}.skin-picker-toolbar select{width:110px}}
.skin-card-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;background:radial-gradient(ellipse,#ffffff08,transparent 70%);border-radius:5px;overflow:hidden}.skin-card-preview img{position:absolute;width:100%;height:100%;object-fit:contain;padding:4px;filter:drop-shadow(0 8px 8px #0005)}.skin-card-image-placeholder{font-size:10px;color:#8391a4}.skin-card .skin-card-badge{font-size:10px;position:absolute;left:16px;top:12px;z-index:1}.skin-card{gap:9px}.skin-card strong{width:100%}
.skin-grid{grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr))}
.skin-card{display:block;padding:0;min-height:0;aspect-ratio:4/3;overflow:hidden}
.skin-card-preview{height:100%;aspect-ratio:auto;border-radius:inherit}
.skin-card-preview img{padding:12px 8px 30px}
.skin-card-caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:3px;padding:28px 12px 12px;background:linear-gradient(transparent,#090e18ed);pointer-events:none;text-shadow:0 1px 3px #000}
.skin-card-caption strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f0f4fa}
.skin-card-caption small{color:var(--rarity);font-weight:600}
.skin-card .skin-card-badge{top:9px;left:9px;background:#0a101bd9;padding:4px 6px;border-radius:4px;color:#d7e0ed}
.skin-card-status{position:absolute;top:9px;right:9px;margin:0;padding:4px 6px;border-radius:4px;background:#0a101bd9;display:none}
.skin-card[aria-pressed=true] .skin-card-status{display:block}
.skin-picker-footer{padding-bottom:max(14px,env(safe-area-inset-bottom))}
@media(max-width:600px){.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-card-caption{padding:24px 8px 9px}.skin-card-caption strong{font-size:11px}.skin-card-caption small{font-size:9px}}
.skin-card-preview{height:auto;aspect-ratio:4/3}.skin-card{aspect-ratio:auto}.skin-grid{grid-auto-rows:max-content}
/* Immersive inspection workspace. The canvas retains its own rendering pipeline. */
:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#edf0f3;background:#111a25;color-scheme:dark;--accent:#efa76b;--muted:#919ba7;--line:#ffffff12}
body{height:100dvh;min-height:0;overflow:hidden;background:#111a25}button,input,select{font-family:inherit}button{border:1px solid #ffffff13;background:#ffffff06;color:#d6dce3;border-radius:6px;font-size:11px;padding:10px 12px;transition:background .18s,border-color .18s}button:hover,button.active{color:#ffd2a8;border-color:#efa76b80;background:#efa76b14}button:disabled{cursor:not-allowed}button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.accent-button{background:#efa76b;color:#241b15;border-color:#efa76b}button.accent-button:hover{background:#ffc798}
.app-shell{height:100dvh;min-height:0;isolation:isolate}.viewer-wrap{position:fixed;inset:0;z-index:-2;background:#172434}#bgVideo{filter:brightness(.77) saturate(.7)}#preview{position:absolute;inset:0;touch-action:none}.scene-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#070c1266,transparent 48%),linear-gradient(0deg,#090f19c9,transparent 28%,transparent 85%,#0a0e1644)}
.studio-header{position:absolute;inset:0 0 auto;height:88px;padding:0 28px;background:transparent;border:0;display:flex;gap:20px;z-index:5;font-family:inherit;letter-spacing:0}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f0f2f5;font-size:17px;font-weight:800;letter-spacing:1.5px;white-space:nowrap}.brand-mark{font:40px Georgia!important;color:var(--accent)!important}.brand-light{font-weight:400;color:#c9cfd7}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:3.6px;color:#91a0af;margin-top:6px}.header-actions{padding:5px;background:#0b101bd9;border:1px solid #ffffff0b;border-radius:9px;backdrop-filter:blur(20px);gap:4px}.header-actions button{border-color:transparent;background:transparent;padding:10px 12px;white-space:nowrap}.header-actions button.accent-button{background:var(--accent);color:#271c13}.header-actions button:hover{background:#ffffff12}.header-actions kbd{font:9px monospace;color:#7f8995;border:1px solid #ffffff18;padding:2px 4px;border-radius:3px;margin-left:8px}
.inspector{position:absolute;left:28px;top:108px;bottom:76px;width:304px;overflow:auto;scrollbar-width:thin;scrollbar-color:#62697355 transparent;z-index:4;padding-right:3px}.inspector-eyebrow{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#bec7d1;margin:0 2px 15px}.inspector-eyebrow span{color:var(--accent);letter-spacing:1px}.control-section{border:1px solid #ffffff12;border-radius:8px;background:#0d131dea;backdrop-filter:blur(22px);margin-bottom:9px;overflow:hidden}.control-section>summary{display:flex;align-items:center;gap:10px;padding:15px 13px;cursor:pointer;list-style:none;font-size:12px;font-weight:600}.control-section>summary::-webkit-details-marker{display:none}.control-section>summary:after{content:'+';font-size:15px;font-weight:400;color:#7c8695}.control-section[open]>summary:after{content:'−'}.control-section[open]>summary{border-bottom:1px solid var(--line)}.section-number{font:10px monospace;border:1px solid #ffffff15;border-radius:4px;padding:3px;color:#88929f}.control-section[open] .section-number{color:var(--accent);border-color:#efa76b50}.summary-meta{margin-left:auto;color:#65717f;font:8px monospace;letter-spacing:1px}.section-body{padding:2px 13px 15px}.section-body label{font-size:10px;color:#a5afbb;letter-spacing:0;text-transform:none;margin:13px 0 6px}.section-body select,.section-body input[type=number],.section-body input[type=text]{background:#ffffff05;border:1px solid #ffffff15;border-radius:5px;padding:10px;margin-top:0;font-size:12px}.skin-picker-trigger{margin-top:10px;border-color:#ffffff1a;background:#ffffff07;padding:12px 10px}.skin-picker-trigger small{font-size:8px!important;letter-spacing:1px;color:var(--accent)!important}.skin-picker-trigger strong{font-size:12px}.skin-picker-trigger>span:last-child{font-size:19px;color:var(--accent)}.subheading{font-size:9px;letter-spacing:1px;color:#b3bdc8;display:flex;justify-content:space-between;margin:22px 0 10px}.subheading span{font-size:8px;color:#5d6a79}.property-card{padding:1px 11px 8px;background:#ffffff04;border:1px solid #ffffff09;border-radius:6px;margin-bottom:10px}.range-label output{color:#d9e1e9;font:11px monospace}.range-label>span{font:9px monospace;color:#667484}input[type=range]{accent-color:#edb07d;margin:9px 0;width:100%;height:5px}.wear-spectrum{height:3px;margin-top:10px;background:linear-gradient(90deg,#7dbbaa 0 7%,#abc57e 7% 15%,#d6c282 15% 38%,#c49873 38% 45%,#976666 45%);opacity:.65;border-radius:2px}.wear-scale{display:flex;justify-content:space-between;font-size:8px;color:#6d7988;margin:7px 0 10px}.fine-control{border-top:1px solid #ffffff09;padding-top:7px}.fine-control>summary{font-size:9px;color:#768391;cursor:pointer}.fine-control>summary span{float:right;color:#d0ad89}.wear-name{font-size:10px}.seed-row{display:flex;gap:6px}.seed-row input{min-width:0}.seed-row button{font-size:20px;padding:3px 12px}.hint{font-size:10px;color:#778696;line-height:1.8}.button-row{margin-top:10px}.button-row button{flex:1}.check-label{line-height:1.6}.check-label input{accent-color:var(--accent)}.scene-option{display:flex;align-items:center;gap:10px;padding:16px 0;font-size:12px}.scene-option small{display:block;margin-top:5px;color:#7f8b99;font-size:9px}.scene-dot{height:32px;width:44px;border-radius:5px;background:linear-gradient(130deg,#506985,#142130);border:1px solid #7792aa55}.scene-caption{position:absolute;left:375px;bottom:100px;pointer-events:none}.scene-kicker{font:9px monospace;letter-spacing:2.5px;color:#9aaebf}.scene-kicker span{display:inline-block;width:5px;height:5px;border-radius:50%;background:#efa76b;margin-left:7px}.scene-caption h1{font-size:32px;letter-spacing:-1px;font-weight:500;margin:13px 0 6px}.scene-caption p{font-size:13px;color:#b4c0cc;margin:0}.scene-tags{display:flex;gap:7px;margin-top:15px}.scene-tags span{font:9px monospace;border:1px solid #ffffff1c;background:#0c142c33;border-radius:4px;padding:5px 8px;color:#98a8b9}.scene-tags span:first-child{color:#efbe95;border-color:#efa76b44}.viewer-footer{position:absolute;bottom:0;left:28px;right:28px;height:53px;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;align-items:center;color:#aab5c1;font:9px monospace;letter-spacing:1px}.viewer-footer small{font-size:8px;color:#667787}.viewer-footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#92b5a1;margin-right:8px}.reticle{position:static;background:none;border:0;padding:0;color:#8698ab;font:10px inherit}.reticle b{margin:0 12px;color:#4d6073}.tex-debug{right:28px;bottom:80px;z-index:6}.studio-notice{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);padding:12px 20px;max-width:85vw;border:1px solid #efa76b44;border-radius:8px;background:#101822f2;color:#ecd1ba;z-index:20;font-size:12px;box-shadow:0 8px 30px #0004}.sticker-list:empty:after{content:'尚未添加印花，开始你的第一款搭配。';font-size:10px;line-height:1.8;color:#768595;padding:15px 10px;border:1px dashed #ffffff20;border-radius:5px}.sticker-item{background:#ffffff04;border-color:#ffffff10;border-radius:5px;padding:8px}.ui-hidden .inspector,.ui-hidden .scene-caption,.ui-hidden .viewer-footer,.ui-hidden .brand,.ui-hidden #texDebug{display:none}.ui-hidden .header-actions>button:not(#toggleUI){display:none}.ui-hidden .header-actions{opacity:.6}
#skinPicker,#weaponPicker,#stickerPicker{position:fixed;inset:88px 22px 22px auto;width:min(860px,calc(100vw - 380px));height:auto;max-height:none;max-width:none;margin:0;border-radius:12px;background:#101722f5;color:#edf1f7;border:1px solid #ffffff20;box-shadow:0 24px 90px #0008;padding:0;backdrop-filter:blur(25px)}#stickerPicker[open],#weaponPicker[open]{display:flex;flex-direction:column}#skinPicker::backdrop,#weaponPicker::backdrop,#stickerPicker::backdrop{background:#050b1444;backdrop-filter:blur(2px)}.skin-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}.skin-card[aria-pressed=true]{border-color:var(--accent);background:#efa76b0b}.skin-card[aria-pressed=true] .skin-card-status{color:var(--accent)}.skin-picker-toolbar input{font-family:inherit}.skin-card strong{font-family:inherit}#skinPicker :focus-visible,#weaponPicker :focus-visible{outline-color:var(--accent)}.skin-picker-footer{align-items:center}.sticker-card img{padding:15px 20px 35px}.sticker-card .skin-card-caption strong{font-size:11px}
@media(min-width:1600px){.inspector{width:328px}.scene-caption{left:406px}}
@media(max-width:1050px){.studio-header{padding:0 18px}.brand{font-size:14px}.header-actions button{padding:10px 8px;font-size:10px}.header-actions kbd{display:none}.inspector{left:18px;width:280px}.scene-caption{left:330px}.viewer-footer{left:18px;right:18px}.viewer-footer>span:last-child{display:none}#skinPicker,#weaponPicker,#stickerPicker{width:calc(100vw - 330px)}}
@media(max-width:700px){.studio-header{height:72px;padding:0 14px;align-items:flex-start;padding-top:13px}.brand{font-size:11px;gap:6px}.brand-mark{font-size:28px!important}.brand small{font-size:6px;letter-spacing:2px}.header-actions{margin-left:auto;padding:3px;gap:2px}.header-actions button{font-size:10px;padding:9px 7px}#resetView,#autoRotate,#captureShot,#copyInspect{display:none}.inspector{top:48dvh;bottom:45px;left:12px;right:12px;width:auto;z-index:4}.inspector-eyebrow{display:none}.control-section{background:#0d131df2}.scene-caption{left:20px;bottom:auto;top:90px}.scene-caption h1{font-size:22px;margin:8px 0 4px}.scene-caption p{font-size:11px}.scene-tags{margin-top:8px}.scene-kicker{font-size:8px}.viewer-wrap{bottom:38dvh}#bgVideo{object-position:center}.viewer-footer{height:36px;left:14px;right:14px;font-size:8px}.viewer-footer small{display:none}.reticle{font-size:8px}.reticle b{margin:0 4px}#skinPicker,#weaponPicker,#stickerPicker{inset:70px 0 0;width:100%;border-radius:14px 14px 0 0}.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-picker-heading{padding:16px}.skin-picker-toolbar{padding:0 16px 12px}.ui-hidden .viewer-wrap{bottom:0}.tex-debug{left:12px;right:12px;bottom:50px;max-width:none}.scene-tags span{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.control-section[open]>.section-body{max-height:max(225px,calc(100dvh - 460px));overflow:auto;scrollbar-width:thin;scrollbar-color:#606d7944 transparent}.sticker-list .empty{font-size:10px;color:#8793a3;padding:14px 6px;line-height:1.7}.sticker-mid{min-width:0;overflow:hidden}.sticker-mid>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sticker-scratch{display:block;font-size:8px;color:#778696;margin-top:3px}
@media(max-width:700px){.control-section[open]>.section-body{max-height:none}}
/* Weapon and finish sheets fill the space below the header, flush to the viewport bottom. */
#weaponPicker,
#skinPicker {
  --picker-top: 88px;
  inset: var(--picker-top) 0 0;
  width: 100%;
  max-width: 100%;
  height: calc(100dvh - var(--picker-top));
  max-height: calc(100dvh - var(--picker-top));
  margin: 0;
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  overflow: hidden;
}
#weaponPicker .skin-picker-toolbar,
#skinPicker .skin-picker-toolbar,
#weaponPicker .skin-picker-count,
#skinPicker .skin-picker-count {
  flex-shrink: 0;
}
@media (max-width: 700px) {
  #weaponPicker,
  #skinPicker { --picker-top: 70px; }
}
@media (max-height: 450px) {
  #weaponPicker,
  #skinPicker { --picker-top: 0px; }
}