*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#fff;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:#000;width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#app{background:#000;position:fixed;inset:0}.screen{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.screen.hidden{display:none}.start-screen{text-align:center;gap:1.5rem;padding:2rem}.start-screen img{object-fit:contain;width:120px;height:auto}.start-screen img.start-preview--frame{object-fit:contain;width:auto;max-width:min(140px,40vw);height:min(220px,40vh)}.start-screen img.start-preview--frame[data-orientation=landscape]{max-width:min(220px,70vw);height:auto;max-height:min(140px,28vh)}.start-screen h1{font-size:1.5rem;font-weight:700}.start-screen p{color:#ffffffbf;max-width:320px;line-height:1.5}.btn{cursor:pointer;border:none;border-radius:999px;font-size:1rem;font-weight:600;transition:transform .15s,opacity .15s}.btn:active{transform:scale(.96)}.btn-primary{color:#000;background:#fff;min-width:220px;padding:1rem 2rem}.btn-secondary{color:#fff;background:#ffffff26;padding:.85rem 1.5rem}.btn:disabled{opacity:.45;cursor:not-allowed}.camera-screen{background:#000}.camera-viewport{justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}#camera-canvas{object-fit:cover;width:100%;height:100%;display:block}#camera-canvas.camera-canvas--frame{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%}.camera-viewport--frame{inset:env(safe-area-inset-top,0px) 0 calc(env(safe-area-inset-bottom,0px) + 11rem)}.camera-viewport--frame.camera-viewport--portrait #camera-canvas{max-height:calc(100% - .5rem)}#camera-video{display:none}.status-banner{top:calc(env(safe-area-inset-top,0px) + 1rem);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;z-index:2;background:#0000008c;border-radius:999px;padding:.5rem 1rem;font-size:.875rem;position:absolute;left:50%;transform:translate(-50%)}.status-banner.hidden{display:none}.status-banner.recording{background:#dc2626d9}.controls{z-index:3;padding:1.25rem 1.5rem calc(env(safe-area-inset-bottom,0px) + 1.5rem);background:linear-gradient(#0000,#000000bf);justify-content:center;align-items:center;gap:1.5rem;display:flex;position:absolute;bottom:0;left:0;right:0}.controls-spacer{flex-shrink:0;width:52px}.orientation-hint{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 6.5rem);z-index:5;color:#ffffffeb;text-align:left;pointer-events:none;background:#22c55e26;border:1px solid #22c55e73;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;max-width:calc(100% - 2rem);margin:0;padding:.55rem 1rem;font-size:.8rem;line-height:1.35;display:flex;position:fixed;transform:translate(-50%)}.orientation-hint.hidden{display:none}.orientation-hint__icon{flex-shrink:0;animation:2.4s ease-in-out infinite hint-rotate;display:flex}.orientation-hint__icon svg{fill:#22c55e;width:22px;height:22px}.orientation-hint--start{bottom:calc(env(safe-area-inset-bottom,0px) + 5.5rem)}.orientation-hint--camera{bottom:calc(env(safe-area-inset-bottom,0px) + 10.5rem)}@keyframes hint-rotate{0%,to{transform:rotate(0)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}}.control-btn{color:#fff;cursor:pointer;background:#ffffff1f;border:2px solid #ffffffd9;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;display:flex}.control-btn svg{fill:currentColor;width:24px;height:24px}.control-btn.active{color:#000;background:#ffffffe6}.shutter-btn{cursor:pointer;background:0 0;border:4px solid #fff;border-radius:50%;width:76px;height:76px;position:relative}.shutter-btn:after{content:"";background:#fff;border-radius:50%;transition:background .15s,border-radius .15s,inset .15s;position:absolute;inset:6px}.shutter-btn.recording:after{background:#ef4444;border-radius:8px;inset:18px}.mode-switch{top:calc(env(safe-area-inset-top,0px) + 1rem);z-index:3;background:#00000073;border-radius:999px;gap:.25rem;padding:.25rem;display:flex;position:absolute;right:1rem}.mode-switch button{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.45rem .9rem;font-size:.8rem;font-weight:600}.mode-switch button.active{color:#000;background:#fff}.preview-screen{padding:.75rem;padding-bottom:calc(env(safe-area-inset-bottom,0px) + .75rem);background:#000;gap:.75rem;overflow-y:auto}.preview-media{width:100%;min-height:0;max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 11rem);object-fit:contain;background:#111;border-radius:12px;flex:auto}.preview-actions{flex-shrink:0;grid-template-columns:1fr 1fr;gap:.5rem;width:100%;max-width:420px;padding:0 .25rem;display:grid}.preview-actions .btn{min-width:0;padding:.85rem .75rem;font-size:.9rem}.preview-actions #btn-back,.preview-actions #btn-download{grid-column:1/-1}.preview-actions #btn-share:not(.hidden)+#btn-download{grid-column:auto}@media (width>=520px){.preview-actions{flex-direction:row;gap:.75rem;padding:0;display:flex}.preview-actions #btn-back{grid-column:auto}.preview-actions .btn{flex:1}}.error-screen{text-align:center;gap:1rem;padding:2rem}.error-screen p{color:#fffc;max-width:360px;line-height:1.5}.loading-screen{gap:1rem}.spinner{border:3px solid #fff3;border-top-color:#fff;border-radius:50%;width:42px;height:42px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.logo-picker{scrollbar-width:none;gap:.5rem;max-width:min(100vw - 2rem,420px);padding:.25rem .25rem .5rem;display:flex;overflow-x:auto}.logo-picker::-webkit-scrollbar{display:none}.logo-option{cursor:pointer;background:#ffffff14;border:2px solid #ffffff40;border-radius:12px;flex:none;width:52px;height:52px;padding:4px;overflow:hidden}.logo-option img{object-fit:contain;width:100%;height:100%;display:block}.logo-option.active{border-color:#fff;box-shadow:0 0 0 2px #ffffff59}.logo-option--frame{width:72px;height:96px}.logo-option--frame-landscape{width:96px;height:72px}.filter-mode-switch{background:#ffffff1a;border-radius:999px;gap:.25rem;padding:.25rem;display:flex}.filter-mode-switch button{color:#ffffffbf;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:600}.filter-mode-switch button.active{color:#fff;background:#22c55e}.logo-option--gallery{color:#fff;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.logo-option--frame img{object-fit:cover}.logo-option--floating{width:72px;height:52px}.logo-option--floating img{object-fit:contain}.start-screen .logo-picker{justify-content:flex-start}.picker-block{flex-direction:column;gap:.5rem;width:min(100vw - 2rem,420px);display:flex}.picker-block--camera{left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 7rem);z-index:3;width:100%;padding:0 .75rem;position:absolute}.filter-categories{scrollbar-width:none;gap:.35rem;padding:0 .25rem;display:flex;overflow-x:auto}.filter-categories::-webkit-scrollbar{display:none}.filter-category-btn{color:#ffffffd9;cursor:pointer;background:#ffffff14;border:1px solid #ffffff40;border-radius:999px;flex:none;padding:.35rem .75rem;font-size:.72rem;font-weight:600}.filter-category-btn.active{color:#000;background:#fff;border-color:#fff}.logo-picker--camera{padding:0;position:static;bottom:auto;-webkit-mask-image:linear-gradient(90deg,#0000,#000 4% 96%,#0000);mask-image:linear-gradient(90deg,#0000,#000 4% 96%,#0000)}