@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap";:root{--bg-color: #f4f4f4;--text-color: #000;--accent-color: #0000ff;--border-color: #000;font-family:Bebas Neue,system-ui,-apple-system,sans-serif;line-height:1;font-weight:400;color-scheme:light;background-color:var(--bg-color);color:var(--text-color)}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh;overflow:hidden}#app{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.design-wrapper{position:relative;width:90vw;height:80vh;max-width:1200px;max-height:800px;background-color:#e0e0e0;background-image:linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%,#cfcfcf),linear-gradient(45deg,#cfcfcf 25%,transparent 25%,transparent 75%,#cfcfcf 75%,#cfcfcf);background-size:20px 20px;background-position:0 0,10px 10px;border:1px solid var(--border-color)}.camera-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}canvas{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.corner{position:absolute;width:16px;height:16px;background-color:#000;z-index:100}.corner.tl{top:-8px;left:-8px}.corner.tr{top:-8px;right:-8px}.corner.bl{bottom:-8px;left:-8px}.corner.br{bottom:-8px;right:-8px}.menu-panel{position:absolute;top:24px;left:24px;width:220px;background-color:#ffffff80;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #000;padding:16px;z-index:10;box-sizing:border-box}.menu-panel.collapsed{width:52px;height:52px;padding:0;overflow:hidden}.menu-panel.collapsed #menu-content{display:none}.menu-toggle{position:absolute;top:14px;right:14px;background:transparent;color:#000;border:none;font-size:24px;font-family:inherit;line-height:.8;cursor:pointer;z-index:20;padding:4px;transition:transform .2s}.menu-panel.collapsed .menu-toggle{top:12px;right:12px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.menu-title{font-weight:800;font-size:24px;margin-bottom:24px}.palette-options,.effect-options{display:flex;flex-wrap:wrap;width:100%;border:1px solid #000;border-bottom:none;box-sizing:border-box}.palette-btn,.effect-btn{flex:0 0 33.33%;background:transparent;color:#000;border:none;border-bottom:1px solid #000;border-right:1px solid #000;padding:8px 0;font-size:16px;font-weight:400;cursor:pointer;font-family:inherit;transition:all .2s;box-sizing:border-box}.effect-btn{flex:0 0 50%}.palette-btn:nth-child(3n),.effect-btn:nth-child(2n){border-right:none}.palette-btn.active,.effect-btn.active{background:var(--accent-color);color:#fff}.control-group{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.control-group:last-child{margin-bottom:0}.control-group label{font-size:18px;font-weight:400;text-transform:uppercase;color:#000}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:#000;outline:none;border:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent-color);cursor:pointer;border:none;border-radius:0}input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--accent-color);cursor:pointer;border:none;border-radius:0}.capture-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);width:64px;height:64px;background-color:var(--accent-color);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .2s}.capture-btn:hover{background-color:#e3530f}.capture-btn:active{transform:translateY(-50%) scale(.95)}@media(max-width:768px){.capture-btn{top:auto;bottom:32px;right:50%;transform:translate(50%)}.capture-btn:active{transform:translate(50%) scale(.95)}}