:root{color:#111827;background:#f3f4f6;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:linear-gradient(120deg,#f9fafb,#e5e7eb);min-height:100vh;margin:0}button,select,input{font:inherit}.app-shell{grid-template-columns:minmax(260px,320px) 1fr;min-height:100vh;display:grid}.controls-panel{background:#fffc;border-right:1px solid #11182714;flex-direction:column;gap:1rem;padding:.5rem 1.5rem 2rem;display:flex}.controls-panel h1{margin:0 0 .5rem;font-size:1.3rem}.workspace-title{display:none}.controls-panel label{flex-direction:column;gap:.5rem;font-weight:600;display:flex}.controls-panel label.checkbox{flex-direction:row;align-items:center}.controls-panel label.checkbox input{width:auto}.cube-control-placeholder{visibility:hidden}.card-style-controls{flex-direction:column;gap:1rem;display:flex}.controls-panel label.field-row{white-space:nowrap;flex-direction:row;justify-content:space-between;align-items:center;gap:.75rem}.controls-panel label.field-row select,.controls-panel label.field-row input[type=range]{flex:1;min-width:0}.file-picker-button{color:#fff;cursor:pointer;background:#111827;border-radius:999px;justify-content:center;align-items:center;width:100%;padding:.8rem 1rem;display:inline-flex}.photos-section{flex-direction:column;gap:.5rem;display:flex}.photos-section .file-picker-button{border-radius:.5rem;flex:1;width:auto;padding:.45rem .75rem}.file-picker-input{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.file-count{color:#4b5563;font-size:.875rem;font-weight:500}.file-summary{justify-content:space-between;align-items:center;gap:1rem;display:flex}button.inline-action{color:#b91c1c;background:#fff;border:1px solid #fca5a5;border-radius:.5rem;width:auto;padding:.35rem .65rem;font-weight:600}button.inline-action:hover:not(:disabled){background:#fef2f2;border-color:#dc2626}button.inline-action:disabled{color:#9ca3af;cursor:not-allowed}select,input[type=range],button{width:100%}button{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:999px;padding:.8rem 1rem}button.secondary{color:#111827;background:#e5e7eb}button.secondary.export-ready{color:#fff;background:#15803d}.action-row{gap:.5rem;display:flex}.action-row button{min-width:0}button.shuffle-action{flex:1}button.export-action{flex:1.65}button.more-toggle{color:#4b5563;background:0 0;align-self:flex-start;width:auto;padding:.15rem 0;font-size:.875rem}button.more-toggle:hover{color:#111827;text-decoration:underline}.canvas-panel{justify-content:center;align-items:flex-start;min-width:0;padding:.5rem;display:flex;position:relative;overflow:hidden}.canvas-workspace{width:min(100%,160vh - 4rem);position:static}.filmstrip{z-index:200;background:#ffffffb3;border:2px dashed #9ca3af;border-radius:.75rem;align-items:center;gap:.5rem;min-height:92px;padding:.5rem;display:flex;position:absolute;top:.5rem;left:.35rem;right:.35rem;overflow-x:auto}.filmstrip:before{content:"⠿";color:#6b7280;cursor:grab;font-size:1rem;line-height:1;position:absolute;top:3px;left:5px}.filmstrip.dragging{background:#eff6ff;border-color:#2563eb}.filmstrip-add{text-align:center;color:#4b5563;cursor:pointer;flex:0 0 156px;padding:.5rem}.filmstrip-add:has(input:disabled){color:#92400e;cursor:not-allowed}button.film-frame{background:#111827;border:3px solid #111827;border-radius:4px;flex:0 0 72px;height:72px;padding:4px;position:relative}button.film-frame.selected{border-color:#2563eb;outline:2px solid #93c5fd}.film-frame img{object-fit:cover;width:100%;height:100%;display:block}.hero-badge{color:#fff;background:#2563eb;border-radius:2px;padding:1px 3px;font-size:.6rem;position:absolute;bottom:2px;right:2px}.filmstrip-hint{color:#4b5563;flex:none;font-size:.75rem}.canvas-board{aspect-ratio:8/5;background:#fff;border-radius:24px;width:100%;height:auto;position:relative;overflow:hidden;box-shadow:0 20px 80px #11182726}.canvas-board.transparent-background{background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,#0000 25%),linear-gradient(-45deg,#e5e7eb 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e7eb 75%),linear-gradient(-45deg,#0000 75%,#e5e7eb 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.photo-card{box-shadow:none;transform-origin:50%;background:0 0;border:0;border-radius:16px;padding:0;position:absolute;overflow:hidden}.empty-state{color:#6b7280;margin:0;position:absolute;bottom:1rem;left:1rem}:is(.canvas-board:has(.photo-card) .empty-state,.canvas-board:has(.cube-ring-canvas) .empty-state){display:none}.cube-ring-canvas{width:100%;height:100%;display:block}.photo-card.polaroid-frame{border:10px solid #fff;border-bottom-width:20px}.photo-card.with-shadow{box-shadow:0 16px 30px #0000002e}@media (width<=1023px){.app-shell{padding:2rem;display:block}.app-shell:before{color:#111827;content:"Collage Studio requires a desktop browser at least 1024px wide.";text-align:center;background:#fff;border-radius:.75rem;max-width:32rem;margin:15vh auto 0;padding:1.5rem;font-size:1.125rem;display:block;box-shadow:0 12px 32px #1118271f}.app-shell>*{display:none}}.photo-card img{object-fit:cover;width:100%;height:100%;display:block}.photo-card img.effect-grayscale{filter:grayscale()}.photo-card img.effect-vintage{filter:sepia(.45)saturate(.85)contrast(.9)}.style-palette{z-index:300;background:#fffffff7;border:1px solid #d1d5db;border-radius:.65rem;width:220px;padding:.5rem;position:fixed;box-shadow:0 12px 32px #11182733}.style-palette-header{color:#374151;align-items:center;gap:.35rem;margin:-.1rem -.1rem .5rem;font-size:.8rem;font-weight:700;display:flex}.style-palette-header span{flex:1}button.style-palette-grip,button.style-palette-close{color:#6b7280;background:0 0;border-radius:.35rem;width:1.5rem;height:1.5rem;padding:0}button.style-palette-grip{cursor:grab}button.style-palette-close:hover{color:#111827;background:#f3f4f6}.style-palette-field{color:#374151;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.3rem 0;font-size:.8rem;font-weight:600;display:flex}.style-palette-control{margin-left:.75rem}.color-picker-wrapper{align-items:center;gap:.35rem;display:flex}.color-presets{gap:.2rem;display:flex}button.color-swatch{border:1px solid #9ca3af;border-radius:999px;width:1rem;height:1rem;padding:0}button.color-swatch.selected{outline-offset:1px;outline:2px solid #111827}button.color-swatch.transparent-swatch{background-color:#fff;background-image:linear-gradient(45deg,#94a3b8 25%,#0000 25%),linear-gradient(-45deg,#94a3b8 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#94a3b8 75%),linear-gradient(-45deg,#0000 75%,#94a3b8 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.color-picker-wrapper input[type=color]{background:0 0;border:0;width:2rem;height:1.5rem;padding:0}.style-palette-field select{width:8.5rem}