:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #e8e8e8;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--canvas-bg: #e0e0e0;--border-color: #d0d0d0;--film-stock: #1a1a1a;--frame-area: #2a2a3e;--perf-hole: #4a4a5a;--accent: #3b82f6;--accent-hover: #2563eb;--selection: rgba(59, 130, 246, .3);--shadow: rgba(0, 0, 0, .1)}@media(prefers-color-scheme:dark){:root{--bg-primary: #1a1a1a;--bg-secondary: #252525;--bg-tertiary: #2a2a2a;--text-primary: #f0f0f0;--text-secondary: #a0a0a0;--text-muted: #666666;--canvas-bg: #0d0d0d;--border-color: #333333;--film-stock: #0a0a0a;--frame-area: #1a1a2e;--perf-hole: #2a2a3a;--accent: #60a5fa;--accent-hover: #3b82f6;--selection: rgba(96, 165, 250, .3);--shadow: rgba(0, 0, 0, .3)}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;font-size:14px;line-height:1.5;color:var(--text-primary);background:var(--bg-primary)}#app{display:flex;height:100vh;width:100vw}.sidebar{width:280px;min-width:280px;background:var(--bg-secondary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:12px 16px;border-bottom:1px solid var(--border-color);height:49px;display:flex;align-items:center}.sidebar-header h1{font-size:16px;font-weight:600}.format-list{flex:1;overflow-y:auto;padding:8px}.format-category{margin-bottom:8px}.format-category-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);padding:8px;cursor:pointer;border-radius:4px;transition:background .15s;-webkit-user-select:none;user-select:none}.format-category-title:hover{background:var(--bg-tertiary)}.format-category-chevron{width:0;height:0;border-left:4px solid currentColor;border-top:3px solid transparent;border-bottom:3px solid transparent;transition:transform .15s}.format-category:not(.collapsed) .format-category-chevron{transform:rotate(90deg)}.format-category-name{flex:1}.format-category-count{font-size:10px;font-weight:500;color:var(--text-muted);background:var(--bg-tertiary);padding:1px 6px;border-radius:10px}.format-category-content{overflow:hidden;transition:max-height .2s ease-out,opacity .15s;max-height:2000px;opacity:1}.format-category.collapsed .format-category-content{max-height:0;opacity:0}.format-card{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;margin-bottom:6px;cursor:grab;transition:background .15s;-webkit-user-select:none;user-select:none}.format-card:hover{background:var(--selection)}.format-card:active{cursor:grabbing}.format-card.selected{background:var(--selection)}.format-card-preview{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.format-card-preview svg{max-width:100%;max-height:100%}.format-card-info{flex:1;min-width:0}.format-card-name{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.format-card-dims{font-size:11px;color:var(--text-secondary)}.info-panel{border-top:1px solid var(--border-color);padding:16px;background:var(--bg-tertiary);min-height:200px}.info-placeholder{color:var(--text-muted);font-size:13px;text-align:center;padding:40px 20px}.info-content h2{font-size:16px;font-weight:600;margin-bottom:12px}.info-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border-color);font-size:13px}.info-row:last-child{border-bottom:none}.info-label{color:var(--text-secondary)}.info-value{font-weight:500}.info-description{margin-top:12px;font-size:12px;color:var(--text-secondary);line-height:1.6}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);height:49px}.toolbar-group{display:flex;align-items:center;gap:4px}.toolbar-separator{width:1px;height:24px;background:var(--border-color);margin:0 8px}.toolbar-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;color:var(--text-primary);transition:background .15s,border-color .15s}.toolbar-btn:hover{background:var(--bg-tertiary);border-color:var(--accent)}.toolbar-btn svg{width:16px;height:16px}.toolbar-btn-text{width:auto;padding:0 12px;font-size:13px;font-weight:500}.zoom-display{font-size:12px;color:var(--text-secondary);min-width:50px;text-align:center;font-variant-numeric:tabular-nums}.canvas-container{flex:1;overflow:hidden;background:var(--canvas-bg);position:relative}.canvas{width:100%;height:100%;display:block}.canvas.panning{cursor:grab}.canvas.panning:active{cursor:grabbing}.format-element{cursor:move}.format-element:hover .format-outline{stroke:var(--accent);stroke-width:2}.format-element.selected .format-outline{stroke:var(--accent);stroke-width:3}.format-outline{fill:none;stroke:transparent;stroke-width:2;pointer-events:all}.format-label{font-size:3px;fill:var(--text-secondary);text-anchor:middle;pointer-events:none;-webkit-user-select:none;user-select:none}.film-stock{fill:var(--film-stock)}.frame-area{fill:var(--frame-area)}.perf-hole{fill:var(--perf-hole)}.digital-frame{fill:var(--frame-area);stroke:var(--border-color);stroke-width:.5}.canvas-container.drag-over:after{content:"";position:absolute;inset:8px;border:2px dashed var(--accent);border-radius:8px;pointer-events:none}.format-list::-webkit-scrollbar{width:8px}.format-list::-webkit-scrollbar-track{background:transparent}.format-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.format-list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}