*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{height:100vh;height:100dvh;background:#f3f5f8;color:#202c3e;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #488fe0;outline-offset:2px}header{height:70px;flex-shrink:0;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #e5eaf0}.brand{display:flex;align-items:center;gap:10px}.brand-mark{color:#337acf;font-size:30px}.brand strong{display:block;font-size:18px}.brand small{display:block;color:#8290a1;font-size:11px;margin-top:2px;letter-spacing:2px}button{border:1px solid #dfe5ed;border-radius:10px;background:white;color:#41536a;padding:9px 13px;min-height:40px}main{display:flex;flex:1;min-height:0;gap:12px;padding:12px}.viewport{order:2;position:relative;flex:1;min-width:0;min-height:0;background:white;border-radius:16px;overflow:hidden;border:1px solid #e5eaf0}canvas{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}.gesture{position:absolute;bottom:14px;left:0;right:0;text-align:center;pointer-events:none;color:#66758a;font-size:12px}.gesture span{background:#ffffffdd;padding:7px 12px;border-radius:20px}.mobile-hint{display:none}aside{order:1;width:290px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;background:#fff;border:1px solid #e5eaf0;border-radius:16px;padding:14px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.panel-heading button{border:0;background:#f3f6fa;font-size:12px;min-height:34px;padding:6px 10px}.space-label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#7a8799;margin-bottom:12px}select{width:100%;min-width:0;color:#273a51;border:1px solid #e3e9f1;background:#f8fafc;border-radius:9px;padding:10px}#models{overflow:auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px}.background-button{width:100%;text-align:left;margin-bottom:12px;border:1px solid #c9d1dc}.background-button span{float:right;font-size:12px;opacity:.7}.model{margin-bottom:12px}.model-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #00000015;text-align:left;font-weight:600;min-height:44px;transition:opacity .15s}.model-button .name{overflow-wrap:anywhere}.model-button .state{font-size:11px;white-space:nowrap;background:#ffffff35;padding:3px 6px;border-radius:5px}.model-button[aria-pressed=false]{opacity:.5;border-style:dashed}.opacity-row{display:flex;align-items:center;gap:8px;padding:7px 3px 0;color:#7b8797;font-size:11px}.opacity-row input{min-width:0;flex:1;accent-color:#527dad;height:20px;margin:0}.opacity-row output{width:34px;text-align:right}footer{font-size:12px;color:#7a8799;padding:0 22px 9px;flex-shrink:0}
@media(max-width:720px){header{height:54px;padding:7px 14px}.brand strong{font-size:16px}.brand small{display:none}.brand-mark{font-size:24px}header button{font-size:12px;min-height:34px;padding:6px 12px}main{flex-direction:column;gap:8px;padding:8px}.viewport{order:1;min-height:120px;border-radius:12px}aside{order:2;width:100%;height:34%;max-height:300px;min-height:150px;padding:10px 12px;border-radius:12px}.panel-heading{margin:0 0 6px}.space-label{flex-direction:row;align-items:center;margin-bottom:6px;flex-shrink:0}.space-label select{flex:1;padding:5px 9px;min-height:32px}.panel-heading button{min-height:28px}#model-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.model{margin:0}.background-button{margin-bottom:8px;min-height:36px;padding:6px 10px}.model-button{min-height:40px;padding:8px;font-size:12px}.opacity-row{gap:4px}.gesture .desktop-hint{display:none}.gesture .mobile-hint{display:inline}.gesture{bottom:12px;font-size:11px}footer{padding:0 14px 6px;font-size:11px}}

.opacity-popup{position:fixed;z-index:20;width:200px;padding:12px 10px;background:#ffffffed;border:1px solid #dfe5ed;border-radius:14px;box-shadow:0 6px 26px #16233326;display:flex;align-items:center;flex-direction:column;gap:10px;pointer-events:none;font-size:12px;color:#34465c}.opacity-track{height:5px;width:160px;background:#d7e2ef;border-radius:4px;position:relative;margin:5px}.opacity-track i{position:absolute;top:-6px;width:17px;height:17px;border-radius:50%;background:#4988ca;transform:translateX(-50%)}
@media(max-width:720px){
 header,.panel-heading,.gesture{display:none}main{gap:0;padding:0}.viewport{border:0;border-radius:0;min-height:0}aside{height:94px;min-height:94px;max-height:94px;border-radius:0;border:0;border-top:1px solid #e5eaf0;padding:8px 0;background:#fff}.space-label{display:none}.multiple-spaces .space-label{display:block;position:fixed;top:calc(env(safe-area-inset-top) + 8px);right:8px;max-width:48%;z-index:5;font-size:0}.space-label select{font-size:12px;width:100%;background:#ffffffdf}
 #models{display:flex;flex-direction:row;align-items:stretch;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 10px;scrollbar-width:none;flex:1;touch-action:pan-x}#models::-webkit-scrollbar{display:none}#model-list{display:contents}.model{flex:0 0 76px;width:76px;min-width:76px;height:76px;margin:0}.model-button,.background-button{height:76px;min-height:76px;width:76px;min-width:76px;flex:0 0 76px;margin:0;padding:7px 6px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:15px;text-align:center;line-height:1.45;touch-action:pan-x;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.model-button .name{width:4em;max-height:2.9em;overflow:hidden;word-break:break-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-weight:500}.model-button .state,.opacity-row,.background-button span{display:none}.background-button{font-size:14px;white-space:normal}.ready footer{display:none}footer{position:fixed;bottom:104px;left:8px;right:8px;text-align:center;background:#ffffffdc;border-radius:8px;padding:8px}.model-button[aria-pressed=false]{opacity:.35}
}

#interaction-hint{display:none}.background-label{margin-right:6px}.background-button .background-switch{float:right}.background-button #background-color,.background-button .background-label{float:none;opacity:1;font-size:inherit}
@media(max-width:720px){aside{height:76px;min-height:76px;max-height:76px}.model,.model-button,.background-button{height:58px;min-height:58px}.background-button{flex-direction:column;gap:0;line-height:1.4}.background-button .background-label,.background-button #background-color{display:block;margin:0}.background-button .background-switch{display:none}#interaction-hint{display:block;position:absolute;bottom:5px;left:3px;right:3px;pointer-events:none;text-align:center;color:#506077;background:#ffffffdc;border-radius:6px;padding:5px 2px;font-size:clamp(8px,2.5vw,11px);white-space:nowrap}footer{bottom:86px}}

@media(max-width:720px){.model-button{touch-action:pan-x}}

.model-button.model-selected{outline:3px solid #e9b53c;outline-offset:2px;box-shadow:none;font-weight:700}

#models{padding:6px;scroll-padding:6px}.model-button{scroll-margin:6px}
@media(max-width:720px){aside{height:86px;min-height:86px;max-height:86px}#models{padding:5px 10px;scroll-padding:6px}footer{bottom:96px}}

.viewport-reset{position:absolute;right:12px;top:12px;z-index:3;background:#fffffff0;box-shadow:0 2px 8px #00000012}.orientation-avatar{position:absolute;right:8px;bottom:8px;width:118px;height:118px;pointer-events:none;z-index:2}.orientation-avatar span{position:absolute;transform:translate(-50%,-50%);font-size:11px;color:#66758a;text-shadow:0 0 3px white,0 0 3px white}.orientation-avatar[hidden]{display:none}@media(max-width:720px){.orientation-avatar{width:96px;height:96px;bottom:36px}.viewport-reset{right:8px;top:8px;padding:7px 10px;min-height:34px}}