#viewer-app{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;background:var(--g-bg)}#viewer-canvas{width:100%;height:100%;display:block;outline:none}#viewer-ui{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:10}#viewer-ui>*{pointer-events:auto}.viewer-toolbar{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;gap:12px;z-index:20}.viewer-toolbar-left{display:flex;align-items:center;gap:12px}.viewer-toolbar-center{flex:1;display:flex;align-items:center;justify-content:center;gap:8px}.viewer-toolbar-right{display:flex;align-items:center;gap:8px}.viewer-btn{padding:8px 14px;border-radius:var(--g-radius);background:#1c1c20d9;color:var(--g-text);font-size:13px;border:1px solid var(--g-border);cursor:pointer;transition:background var(--g-transition),border-color var(--g-transition);white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.viewer-btn:hover{background:#242428f2;border-color:var(--g-accent)}.viewer-btn-icon{padding:8px 10px;font-size:16px;line-height:1}.viewer-btn-active{background:#d43a1533;border-color:var(--g-accent);color:var(--g-accent)}.viewer-logo{display:flex;align-items:center;text-decoration:none;opacity:.9;transition:opacity var(--g-transition)}.viewer-logo:hover{opacity:1}.viewer-logo-icon{display:flex;align-items:center}.viewer-logo-icon svg{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}.viewer-preset-btn{padding:6px 12px;border-radius:var(--g-radius-sm);background:#1c1c20d9;color:var(--g-text-dim);font-size:12px;border:1px solid var(--g-border);cursor:pointer;transition:all var(--g-transition);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.viewer-preset-btn:hover{color:var(--g-text);border-color:var(--g-accent)}.viewer-preset-btn-active{color:var(--g-accent);border-color:var(--g-accent);background:#d43a1526}.viewer-info-panel{position:absolute;top:0;right:0;width:360px;max-width:90vw;height:100%;background:#1c1c20f2;border-left:1px solid var(--g-border);overflow-y:auto;transform:translate(100%);transition:transform .3s ease;z-index:30;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.viewer-info-panel.open{transform:translate(0)}.viewer-info-panel-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--g-border)}.viewer-info-panel-title{font-size:18px;font-weight:700}.viewer-info-close{font-size:24px;color:var(--g-text-dim);cursor:pointer;padding:4px 8px;border-radius:var(--g-radius-sm);transition:color var(--g-transition)}.viewer-info-close:hover{color:var(--g-text)}.viewer-info-section{padding:16px 24px;border-bottom:1px solid var(--g-border)}.viewer-info-section:last-child{border-bottom:none}.viewer-info-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--g-text-muted);margin-bottom:6px}.viewer-info-value{font-size:14px;color:var(--g-text);line-height:1.5}.viewer-info-description{font-size:14px;color:var(--g-text-dim);line-height:1.6}.viewer-info-tags{display:flex;flex-wrap:wrap;gap:6px}.viewer-info-tag{font-size:12px;padding:3px 10px;border-radius:12px;background:var(--g-surface);color:var(--g-text-dim);border:1px solid var(--g-border)}.viewer-info-link{color:var(--g-accent);text-decoration:none;transition:color var(--g-transition)}.viewer-info-link:hover{color:var(--g-accent-hover);text-decoration:underline}.viewer-info-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.viewer-info-row-label{font-size:13px;color:var(--g-text-dim)}.viewer-info-row-value{font-size:13px;color:var(--g-text);font-weight:500}.viewer-layer-toggle{cursor:pointer;margin-left:6px;vertical-align:middle;user-select:none;-webkit-user-select:none;display:inline-flex;align-items:center}.viewer-eye-icon{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--g-transition),opacity var(--g-transition)}.viewer-eye-icon .viewer-eye-open{stroke:var(--g-accent)}.viewer-eye-icon .viewer-eye-slash{stroke:transparent}.viewer-layer-hidden .viewer-eye-icon .viewer-eye-open,.viewer-layer-hidden .viewer-eye-icon .viewer-eye-slash{stroke:var(--g-text);opacity:.5}.viewer-layer-toggle:hover .viewer-eye-icon .viewer-eye-open,.viewer-layer-hidden:hover .viewer-eye-icon .viewer-eye-slash{opacity:1}.viewer-info-panel-locked .viewer-layer-toggle{display:none}.viewer-loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--g-bg);z-index:50;transition:opacity .5s ease}.viewer-loading.fade-out{opacity:0;pointer-events:none}.viewer-loading-spinner{width:48px;height:48px;border:3px solid var(--g-border);border-top-color:var(--g-accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.viewer-loading-text{font-size:14px;color:var(--g-text-dim);margin-bottom:12px}.viewer-loading-progress{width:200px;height:4px;background:var(--g-border);border-radius:2px;overflow:hidden}.viewer-loading-bar{height:100%;background:var(--g-accent);border-radius:2px;width:0%;transition:width .3s ease}.viewer-error{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--g-bg);z-index:50;padding:24px;text-align:center}.viewer-error-icon{font-size:48px;margin-bottom:16px}.viewer-error-msg{font-size:16px;color:var(--g-text-dim);margin-bottom:24px;max-width:400px}.viewer-error-back{padding:10px 24px;background:var(--g-accent);color:#fff;border-radius:var(--g-radius);font-size:14px;cursor:pointer;transition:background var(--g-transition);text-decoration:none}.viewer-error-back:hover{background:var(--g-accent-hover)}.viewer-share-modal{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#000000b3;z-index:100}.viewer-share-box{background:var(--g-card);border:1px solid var(--g-border);border-radius:var(--g-radius);padding:24px;width:500px;max-width:90vw}.viewer-share-title{font-size:16px;font-weight:600;margin-bottom:16px}.viewer-share-code{width:100%;padding:10px 14px;background:var(--g-bg);border:1px solid var(--g-border);border-radius:var(--g-radius-sm);color:var(--g-text);font-family:monospace;font-size:12px;margin-bottom:12px;resize:vertical;min-height:60px}.viewer-share-actions{display:flex;gap:8px;justify-content:flex-end}.viewer-share-copy{padding:8px 20px;background:var(--g-accent);color:#fff;border-radius:var(--g-radius-sm);font-size:13px;cursor:pointer;transition:background var(--g-transition)}.viewer-share-copy:hover{background:var(--g-accent-hover)}.viewer-share-close{padding:8px 20px;background:var(--g-surface);color:var(--g-text-dim);border:1px solid var(--g-border);border-radius:var(--g-radius-sm);font-size:13px;cursor:pointer}@media(max-width:600px){.viewer-toolbar{top:8px;left:8px;right:8px;gap:6px}.viewer-toolbar-center{display:none}.viewer-btn{padding:6px 10px;font-size:12px}.viewer-info-panel{width:100%;max-width:100%}}@keyframes spin{to{transform:rotate(360deg)}}