*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#eee;background:#111;font-family:system-ui,sans-serif}.app{flex-direction:column;height:100dvh;display:flex}.header{background:#1a1a2e;border-bottom:1px solid #333;flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex}.header-title{letter-spacing:.05em;color:#8ab4f8;font-size:1rem;font-weight:700}.btn-open{color:#8ab4f8;cursor:pointer;background:0 0;border:1px solid #8ab4f8;border-radius:4px;padding:5px 14px;font-size:.85rem}.btn-open:hover:not(:disabled){background:#8ab4f820}.btn-open:disabled{opacity:.4;cursor:default}.header-credit{color:#666;margin-left:auto;font-size:.8rem;text-decoration:none}.header-credit:hover{color:#8ab4f8}.scene-select{color:#eee;background:#222;border:1px solid #444;border-radius:4px;max-width:260px;padding:4px 8px;font-size:.85rem}.main{background:#000;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.image-viewer{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.main-image{object-fit:contain;max-width:100%;max-height:100%;display:block}.overlay-msg{color:#aaa;pointer-events:none;font-size:.9rem;position:absolute}.overlay-msg.error{color:#f88}.overlay-msg.hint{color:#666}.vp-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border-radius:6px;padding:5px;position:absolute;top:10px;right:10px}.vp-grid{gap:6px;display:grid}.vp-dot{cursor:pointer;background:#ffffff59;border:none;border-radius:50%;width:22px;height:22px;padding:0;transition:background .1s,transform .1s}.vp-dot:hover{background:#ffffffb3;transform:scale(1.4)}.vp-dot.active{background:#8ab4f8;transform:scale(1.3)}.vp-dot.missing{cursor:not-allowed;background:#ffffff14}.vp-dot.missing:hover{background:#ffffff14;transform:none}.tour-controls{background:#161625;border-top:1px solid #2a2a3e;flex-shrink:0;align-items:center;gap:12px;padding:6px 16px;display:flex}.tour-label{color:#8ab4f8;white-space:nowrap;font-size:.8rem;font-weight:600}.tour-pattern-select{max-width:180px}.frame-controls{background:#1a1a2e;border-top:1px solid #333;flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex}.btn-play{color:#eee;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:1.1rem;line-height:1}.btn-play:hover{background:#333}.frame-slider{accent-color:#8ab4f8;cursor:pointer;flex:1}.frame-counter{color:#aaa;text-align:right;min-width:60px;font-size:.8rem}.fps-label{color:#aaa;align-items:center;gap:4px;margin-left:4px;font-size:.8rem;display:flex}.fps-input{color:#eee;text-align:right;background:#222;border:1px solid #444;border-radius:4px;width:46px;padding:2px 4px;font-size:.8rem}