:root{--color-brand: #ed1a2f;--color-brand-dark: #c41224;--color-brand-contrast: #ffffff;--color-bg: #fbf9fb;--color-blob: #f7ecf2;--color-surface: #ffffff;--color-text: #202939;--color-text-muted: #697586;--color-accent: var(--color-brand);--color-danger: #b3261e;--radius: 16px;--radius-sm: 10px;--radius-pill: 999px;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 40px;--font-latin: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-bangla: "Noto Sans Bengali", var(--font-latin);--font-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Bengali", sans-serif;--frame-card: 256px;--shadow: 0 6px 24px rgba(32, 41, 57, .08)}@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/manrope.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+2026}@font-face{font-family:Noto Sans Bengali;font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/noto-sans-bengali.woff2) format("woff2");unicode-range:U+0964-0965,U+0980-09FF,U+1CD0-1CD9,U+1CDA-1CF9,U+200C-200D,U+20B9,U+25CC}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:var(--font-base);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}button{font:inherit}button,a,[role=button]{-webkit-tap-highlight-color:transparent}.page{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}@media(min-width:901px){.page:after{content:"";position:fixed;right:-124px;bottom:-63px;width:297px;height:297px;background:url(/design/bg-graphic.svg) no-repeat center / contain;pointer-events:none;z-index:-1}}.app-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1296px;margin:0 auto;padding:27px 51px}.logo{height:54px;display:block}.layout{flex:1;width:100%;max-width:1336px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,596px);align-items:center;gap:clamp(var(--space-5),10vw,145px);padding:0 60px var(--space-5) 20px}.hero-img{width:100%;max-width:514px;display:block}.content{display:flex;flex-direction:column;gap:var(--space-2);max-width:596px;min-width:0;overflow-wrap:break-word}.content-title{font-size:36px;font-weight:700;line-height:1.4;margin:0;text-wrap:balance}.content-subtitle{color:var(--color-text-muted);font-size:18px;font-weight:500;line-height:1.5;margin:0 0 28px}@media(max-width:900px){.app-header{justify-content:center;position:relative;padding:36px var(--space-3) 20px}.app-header .lang-toggle{position:absolute;right:var(--space-3)}.logo{height:37px}.layout{grid-template-columns:1fr;gap:38px;padding:0 var(--space-3) var(--space-4);align-items:start}.hero-img{max-width:310px;margin:0 auto}.content{max-width:none}.content-title{font-size:24px}.content-subtitle{font-size:12px;margin-bottom:var(--space-3)}}.btn{appearance:none;border:0;border-radius:var(--radius-pill);padding:12px var(--space-4);min-height:44px;font-size:1rem;font-weight:600;line-height:1.25;display:inline-flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:opacity .15s ease}.btn:active{opacity:.85}.btn:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.btn-primary{background:var(--color-brand);color:var(--color-brand-contrast)}.btn-secondary{background:var(--color-surface);color:var(--color-brand);box-shadow:inset 0 0 0 1.5px var(--color-brand)}.btn-ghost{background:transparent;color:var(--color-text-muted)}.lang-toggle{border:1px solid var(--color-text-muted);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text);padding:6px 14px;min-height:36px;cursor:pointer}.lang-toggle:active,.frame-card:active,.camera-shutter:active,.camera-retake:active{opacity:.85}.action-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.action-card{background:var(--color-surface);border-radius:24px;box-shadow:var(--shadow);padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}.action-card img{height:100px;width:auto}.action-card h3{margin:0;font-size:16px;font-weight:700}.action-card .btn{width:100%;min-width:0;padding-inline:var(--space-3);margin-top:auto}.frame-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}.frame-card{appearance:none;border:0;padding:var(--space-2);background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);font-weight:600;color:var(--color-text)}.frame-card img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--radius-sm);background:var(--color-bg)}.frame-card:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}.camera-card{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 18px;width:100%;max-width:var(--frame-card)}.camera-view{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:#111;aspect-ratio:4 / 5}.camera-view video,.camera-view img{width:100%;height:100%;object-fit:cover;display:block}.camera-view video{transform:scaleX(-1)}.camera-shutter{position:absolute;left:50%;bottom:14px;transform:translate(-50%);width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:var(--color-brand);cursor:pointer}.camera-retake{position:absolute;left:0;right:0;bottom:0;padding:10px;border:0;background:#0000008c;color:#fff;font-weight:600;cursor:pointer}.editor-card{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 18px;width:100%;max-width:var(--frame-card)}.editor-stage{width:100%;touch-action:none;overflow:hidden}.editor-stage canvas{width:100%;height:100%;display:block}.editor-hint{margin:0;color:var(--color-text-muted);font-size:.85rem}.editor-controls{display:flex;gap:var(--space-2)}.editor-controls .ctrl{min-width:46px;padding:10px 0;font-size:1.2rem;line-height:1}.result-preview{background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:16px 18px;width:100%;max-width:var(--frame-card)}.result-preview img{width:100%;display:block}.result-preparing{color:var(--color-text-muted)}.action-row{display:flex;width:100%;max-width:374px;gap:13px}.action-row .btn{flex:1;max-width:180.5px;text-align:center}.btn-download{text-decoration:none}.btn-startover{width:100%;max-width:374px}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#20293980;color:#fff;font-weight:600;z-index:20}.toast{position:fixed;left:50%;bottom:calc(var(--space-4) + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--color-danger);color:#fff;padding:12px 20px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:30;max-width:90vw}.banner,.snackbar{position:fixed;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-3);background:var(--color-surface);color:var(--color-text);padding:10px var(--space-3);border-radius:var(--radius);box-shadow:var(--shadow);z-index:25;width:max-content;max-width:92vw}.banner{bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}.snackbar{top:var(--space-3)}.banner-actions{display:flex;gap:var(--space-1)}.banner-btn{min-height:36px;padding:6px 14px;font-size:.9rem}.stub-note{color:var(--color-text-muted);font-size:.9rem}@media(max-width:900px){.camera-card,.editor-card,.result-preview{margin-inline:auto}.action-row,.btn-startover{justify-content:center;margin-inline:auto}.action-cards{gap:var(--space-3)}.action-card{border-radius:var(--radius);padding:13px 11px;gap:var(--space-3)}.action-card img{height:67px}.action-card h3{font-size:12px}.action-card .btn{font-size:14px}}
