:root{--paper:#f5ead2;--ink:#111;--cream:#fff8ec;--glass:#fff8ecb8;--accent:#ff5d4d;--teal:#18b7a8;--yellow:#ffd84d;--muted:#11111194;color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;background:#111;font-family:ui-rounded,Avenir Next,SF Pro Rounded,Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input,select,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.native-shell{width:100vw;height:var(--app-height,100dvh);touch-action:none;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 20% 0,#ffd84d3d,#0000 34%),radial-gradient(circle at 80% 18%,#18b7a838,#0000 32%),#15120e;position:fixed;inset:0;overflow:hidden}.start-screen{z-index:200;color:#fff8ec;background:radial-gradient(circle at 22% 12%,#ffd84d47,#0000 32%),radial-gradient(circle at 80% 72%,#18b7a840,#0000 34%),#15120e;align-content:center;place-items:center;gap:20px;padding:28px;display:grid;position:fixed;inset:0}.start-mark{text-align:center;font-size:clamp(34px,10vw,58px);font-weight:1000;line-height:.9}.start-screen .start-button{color:#111;background:var(--yellow);border:3px solid #111;border-radius:999px;min-width:168px;min-height:62px;font-size:20px;font-weight:1000;box-shadow:5px 6px #111}.format-picker{text-align:center;gap:10px;width:min(100%,360px);display:grid}.format-picker>span{color:#fff8ecb8;text-transform:uppercase;font-size:13px;font-weight:1000}.format-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.format-option{color:#fff8ec;background:#11111147;border:2px solid #fff8ec52;border-radius:14px;place-items:center;gap:2px;min-height:62px;padding:7px 3px;display:grid;box-shadow:0 10px 24px #0003}.format-option.active{color:#111;background:var(--yellow);border-color:#111;box-shadow:3px 4px #111}.format-option strong{font-size:17px;line-height:1}.format-option em{font-size:10px;font-style:normal;font-weight:1000;line-height:1}.install-card{color:#111;background:var(--cream);border:4px solid #111;border-radius:14px;width:min(100%,340px);padding:22px;box-shadow:7px 8px #111}.install-share-button{color:#111;background:var(--yellow);border:3px solid #111;border-radius:999px;width:100%;min-height:46px;margin:0 0 14px;font-size:15px;font-weight:1000;box-shadow:3px 4px #111}.install-kicker{color:var(--accent);text-transform:uppercase;margin-bottom:8px;font-size:13px;font-weight:1000}.install-card h1{margin:0;font-size:28px;line-height:1}.install-card p{color:#111111b8;margin:12px 0 14px;font-size:15px;font-weight:800;line-height:1.3}.install-card ol{gap:7px;margin:0;padding-left:22px;font-size:16px;font-weight:950;line-height:1.2;display:grid}.live-camera,.photo-upload{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.sr-status{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:fixed;overflow:hidden}.comic-stage{inset:max(10px, env(safe-area-inset-top)) 10px 116px;grid-template-rows:minmax(0,1fr);display:grid;position:absolute}.live-strip{--gutter:10px;--radius:7px;--border:4px;width:min(100%, calc((var(--app-height,100dvh) - 136px) * var(--page-width) / var(--page-height)));max-width:580px;height:min(100%, calc((100vw - 20px) * var(--page-height) / var(--page-width)));max-height:100%;padding:var(--gutter);border:var(--border) solid var(--ink);background:var(--paper);aspect-ratio:var(--page-width) / var(--page-height);border-radius:10px;place-self:center;position:relative;overflow:visible;box-shadow:0 24px 70px #0006,inset 0 0 0 1px #fff3}.live-strip.is-custom:after{content:"";z-index:7;pointer-events:none;border:2px solid #111111d1;border-radius:10px;position:absolute;inset:0}.live-panel{border:var(--border) solid var(--ink);border-radius:var(--radius);cursor:pointer;pointer-events:none;background:linear-gradient(135deg,#11111114 25%,#0000 25%) 0 0/22px 22px,#fffaf0;padding:0;transition:transform .14s,box-shadow .14s,filter .14s;position:absolute;overflow:hidden;transform:scale(.985)}.live-panel.is-live{z-index:2;transform:scale(1);box-shadow:0 0 0 2px #18b7a8e6,0 0 0 999px #00000014}.live-panel img{object-fit:fill;will-change:left, top, width, height;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.live-divider-gap{z-index:3;transform-origin:0;pointer-events:none;position:absolute}.live-divider-gap:before{content:"";width:100%;height:var(--gutter);background:var(--paper);border-radius:999px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.live-frame{z-index:2;object-fit:cover;width:100%;height:100%;animation:1.4s ease-in-out infinite livePulse;position:absolute;top:0;left:0}.panel-chip{z-index:4;top:var(--chip-y,8px);left:var(--chip-x,8px);border:2px solid var(--ink);min-width:32px;color:var(--ink);background:var(--yellow);box-shadow:2px 2px 0 var(--ink);border-radius:999px;padding:5px 8px;font-size:12px;font-weight:1000;line-height:1;position:absolute;transform:translate(-50%,-50%)}.live-panel:not(.is-live):not(.is-shot):before{content:"tap";color:#1111116b;text-transform:uppercase;place-items:center;font-size:17px;font-weight:1000;display:grid;position:absolute;inset:0}.strip-caption{right:var(--gutter);bottom:var(--gutter);left:var(--gutter);z-index:10;border:var(--border) solid var(--ink);border-radius:var(--radius);overflow-wrap:anywhere;background:#ffffffeb;place-items:center;min-height:44px;padding:8px 12px;font-size:22px;font-weight:1000;line-height:1;display:grid;position:absolute}.capture-bar{right:0;bottom:max(16px, env(safe-area-inset-bottom));z-index:60;pointer-events:none;justify-content:center;align-items:center;gap:clamp(10px,3.6vw,18px);display:flex;position:absolute;left:0}.capture-bar button{pointer-events:auto}.shutter{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#11111147;border:5px solid #fff8eceb;border-radius:999px;place-items:center;width:82px;height:82px;display:grid;box-shadow:0 16px 38px #00000057,0 0 0 2px #1111113d}.shutter span{border-radius:inherit;width:58px;height:58px;box-shadow:inset 0 0 0 5px var(--accent);background:#fff8ec}.round-action{color:#fff8ec;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#11111157;border:2px solid #fff8ec80;border-radius:999px;width:54px;height:54px;font-size:23px;font-weight:900;box-shadow:0 12px 32px #00000047}.round-action:disabled{opacity:.62}.video-action{color:#111;background:var(--teal);border-color:#18b7a8b8;box-shadow:0 12px 32px #00000047,3px 4px #111}.video-action.is-rendering{animation:1s ease-in-out infinite videoPulse}.share-action{color:#111;background:var(--yellow);border-color:#111111ad;box-shadow:0 12px 32px #00000047,3px 4px #111}@keyframes videoPulse{50%{transform:scale(1.06)}}.capture-bar button:active,.drawer-tabs button:active,.layout-card:active,.primary:active{transform:scale(.96)}.progress-pills{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 92px);z-index:55;gap:7px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.progress-pills span{background:#fff8ec61;border-radius:999px;width:9px;height:9px}.progress-pills span.done{background:var(--yellow)}.progress-pills span.live{background:var(--teal);width:22px}.video-render-progress{right:max(18px, env(safe-area-inset-right));bottom:calc(max(16px, env(safe-area-inset-bottom)) + 92px);left:max(18px, env(safe-area-inset-left));z-index:82;color:#111;pointer-events:none;background:#fff8ecf0;border:2px solid #111111b8;border-radius:999px;height:42px;position:absolute;overflow:hidden;box-shadow:0 16px 38px #00000052}.video-render-progress span{border-radius:inherit;background:linear-gradient(90deg, var(--teal), var(--yellow));transition:width .12s linear;position:absolute;inset:0 auto 0 0}.video-render-progress em{z-index:1;text-transform:uppercase;place-items:center;height:100%;font-size:13px;font-style:normal;font-weight:1000;display:grid;position:relative}.video-ready-card{right:max(14px, env(safe-area-inset-right));bottom:calc(max(16px, env(safe-area-inset-bottom)) + 90px);left:max(14px, env(safe-area-inset-left));z-index:83;color:#111;background:#fff8ecf5;border:2px solid #111111b8;border-radius:18px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;display:grid;position:absolute;box-shadow:0 16px 38px #00000052,3px 4px #111}.video-ready-card>div:first-child{gap:2px;min-width:0;display:grid}.video-ready-card strong,.video-ready-card em{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.video-ready-card strong{font-size:14px;font-weight:1000}.video-ready-card em{color:var(--muted);text-transform:uppercase;font-size:11px;font-style:normal;font-weight:900}.video-ready-actions{align-items:center;gap:7px;display:flex}.video-ready-actions button{color:#111;background:var(--yellow);white-space:nowrap;border:0;border-radius:999px;min-height:38px;padding:0 12px;font-size:12px;font-weight:1000}.video-ready-actions button:nth-child(2){background:var(--teal)}.video-ready-actions button:last-child{color:#fff8ec;background:#111;width:38px;padding:0}.motion-drawer{z-index:50;height:min(74dvh,610px);padding:9px 12px max(16px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(28px)saturate(1.15);backdrop-filter:blur(28px)saturate(1.15);pointer-events:none;background:#fff8ece6;border-radius:28px 28px 0 0;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -18px 60px #00000057}.motion-drawer-style{height:min(52dvh,430px)}.motion-drawer.is-open{z-index:80;pointer-events:auto}.drawer-grabber{background:0 0;border:0;justify-items:center;gap:5px;width:100%;min-height:42px;display:grid}.drawer-grabber span{background:#1111113d;border-radius:999px;width:44px;height:5px}.drawer-grabber strong{color:var(--muted);font-size:12px;line-height:1}.drawer-tabs{background:#ffffff9e;border:1px solid #1111111f;border-radius:999px;grid-template-columns:repeat(3,1fr);gap:8px;height:46px;padding:4px;display:grid}.drawer-tabs button{background:0 0;border:0;border-radius:999px;font-size:14px;font-weight:900}.drawer-tabs button.active{color:#fff8ec;background:#111}.drawer-content{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:calc(100% - 92px);padding:14px 2px 4px;overflow-y:auto}.drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.video-settings{background:#18b7a81f;border:2px solid #11111124;border-radius:16px;gap:10px;padding:12px;display:grid}.video-settings>div{gap:3px;display:grid}.video-settings strong{font-size:15px}.video-settings em{color:var(--muted);font-size:11px;font-style:normal;font-weight:800;line-height:1.25}.layout-card-shell{min-width:0;display:grid;position:relative}.layout-card-shell .layout-card{width:100%;height:100%}.layout-card{text-align:left;background:#ffffffb3;border:2px solid #11111126;border-radius:18px;grid-template-columns:54px 1fr;align-items:center;gap:10px;min-height:112px;padding:10px;display:grid}.layout-card.has-delete{padding-right:42px}.layout-card.active{border-color:var(--teal);background:#18b7a826}.layout-card strong{font-size:16px}.layout-card em{color:var(--muted);font-size:11px;font-style:normal;font-weight:900}.layout-delete{z-index:2;color:#fff8ec;background:#b3261e;border:2px solid #fff8ec;border-radius:999px;place-items:center;width:32px;height:32px;font-size:15px;font-weight:1000;line-height:1;display:grid;position:absolute;top:8px;right:8px;box-shadow:0 8px 18px #00000038}.layout-mini{border:2px solid var(--ink);background:var(--paper);width:46px;height:66px;position:relative}.layout-mini i{border:1.5px solid var(--ink);background:#fff;position:absolute}.creator-mini i:first-child{clip-path:polygon(0 0,100% 0,62% 100%,0 48%);width:100%;height:46%;top:0;left:0}.creator-mini i:nth-child(2){clip-path:polygon(0 18%,60% 0,100% 100%,0 100%);width:100%;height:72%;top:28%;left:0}.creator-mini i:nth-child(3){clip-path:polygon(40% 0,100% 16%,100% 100%,0 100%);width:52%;height:58%;bottom:0;right:0}.drawer-stack{gap:12px;display:grid}.creator-stack{--creator-divider-thickness:9px;--creator-handle-size:44px;--creator-page-width:4;--creator-page-height:5;gap:14px;width:100%;min-height:0;display:grid}.creator-fullscreen{z-index:95;padding:max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));color:#111;touch-action:pan-y;background:linear-gradient(#ffffff8c 1px,#0000 1px) 0 0/100% 72px,linear-gradient(90deg,#ffffff6b 1px,#0000 1px) 0 0/72px 100%,#f4ead3;position:absolute;inset:0;overflow-y:auto}.creator-fullscreen .creator-stack{max-width:980px;min-height:calc(var(--app-height,100dvh) - max(16px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)) - 32px);grid-template-rows:auto minmax(0,1fr);margin:0 auto}.creator-topbar{grid-template-columns:minmax(74px,auto) 1fr minmax(74px,auto);align-items:center;gap:10px;display:grid}.creator-topbar strong{text-align:center;min-width:0;font-size:20px;font-weight:1000}.creator-topbar button,.creator-actions button{min-height:48px;color:var(--ink);background:#11111114;border:0;border-radius:16px;font-size:13px;font-weight:1000}.creator-topbar .primary,.creator-actions .primary{background:var(--accent);color:#fff}.creator-workbench{grid-template-columns:minmax(0,1fr) minmax(230px,300px);align-items:stretch;gap:16px;min-height:0;display:grid}.creator-side{align-self:center;gap:13px;display:grid}.creator-canvas{width:min(100%, 480px, calc((var(--app-height,100dvh) - 172px) * var(--creator-page-width) / var(--creator-page-height)));aspect-ratio:var(--creator-page-width) / var(--creator-page-height);touch-action:none;background:linear-gradient(#ffffff0f 1px,#0000 1px) 0 0/100% 25%,linear-gradient(90deg,#ffffff0f 1px,#0000 1px) 0 0/25% 100%,#111;border:3px solid #111;border-radius:12px;place-self:center;position:relative;overflow:hidden;box-shadow:0 14px 36px #0000002e}.creator-canvas p{color:#ffffffb8;text-align:center;place-items:center;margin:0;padding:20px;font-size:13px;font-weight:900;display:grid;position:absolute;inset:0}.creator-panel{z-index:1;clip-path:inherit;background:linear-gradient(135deg,#18b7a81f,#0000 45%),#fffaf0;border:2px solid #111;place-items:center;display:grid;position:absolute;box-shadow:inset 0 0 0 1px #11111114}.creator-free-line{z-index:4;transform-origin:0;pointer-events:none;background:0 0;border:0;height:44px;position:absolute}.creator-free-line.is-active{z-index:7}.creator-free-line:before{content:"";height:var(--creator-divider-thickness);background:linear-gradient(90deg, var(--yellow), var(--accent));border-radius:999px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 0 0 2px #111,0 8px 20px #00000047}.creator-handle{width:var(--creator-handle-size);height:var(--creator-handle-size);z-index:5;touch-action:none;cursor:grab;background:#fff8ec;border:3px solid #111;border-radius:999px;padding:0;position:absolute;transform:translate(-50%,-50%);box-shadow:2px 2px #111}.creator-handle-start{background:var(--teal)}.creator-handle-end{background:var(--accent)}.creator-handle.is-active{z-index:8;cursor:grabbing;box-shadow:0 0 0 4px #ffed5ad9,2px 2px #111}.creator-actions{z-index:12;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.creator-thickness{grid-template-columns:1fr auto;align-items:center}.creator-thickness span,.creator-thickness input{grid-column:1/-1}.creator-thickness output{color:var(--accent);justify-self:end;font-size:13px;font-weight:1000}.field{gap:6px;display:grid}.field span{color:var(--muted);font-size:12px;font-weight:900}.field input,.field select{width:100%;min-height:48px;color:var(--ink);background:#ffffffd1;border:2px solid #11111129;border-radius:16px;padding:0 12px;font-weight:850}.field input[type=color]{padding:4px}.field input[type=range]{accent-color:var(--accent);padding:0}.triple-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;display:grid}.primary,.subtle-danger{background:var(--accent);color:#fff;border:0;border-radius:17px;justify-content:center;align-items:center;min-height:52px;font-size:14px;font-weight:1000;text-decoration:none;display:inline-flex}.primary.secondary{background:#111}.primary.disabled,button:disabled,input:disabled{opacity:.45}.subtle-danger{color:#b3261e;background:#ff5d4d24}@keyframes livePulse{0%,to{filter:saturate()}50%{filter:saturate(1.08)}}@media (width>=760px){.comic-stage{inset:max(16px, env(safe-area-inset-top)) 24px 120px}.motion-drawer{border-radius:28px;bottom:12px;left:max(20px,50vw - 260px);right:max(20px,50vw - 260px)}}@media (width<=759px){.capture-bar{gap:8px}.round-action{width:46px;height:46px;font-size:20px}.shutter{width:74px;height:74px}.shutter span{width:52px;height:52px}.creator-workbench{grid-template-columns:1fr;align-items:start}.creator-side{align-self:stretch}.creator-fullscreen .creator-canvas{width:min(100%, 420px, calc((var(--app-height,100dvh) - 220px) * var(--creator-page-width) / var(--creator-page-height)))}}@media (height<=720px){.comic-stage{bottom:104px}.shutter{width:72px;height:72px}.shutter span{width:50px;height:50px}.progress-pills{bottom:calc(max(16px, env(safe-area-inset-bottom)) + 82px)}}@media (orientation:landscape) and (pointer:coarse) and (height<=640px){.native-shell{top:var(--app-height,100dvh);width:var(--app-height,100dvh);transform-origin:0 0;height:100dvw;left:0;transform:rotate(-90deg)}}.start-actions{flex-direction:column;align-items:center;gap:12px;width:min(100%,360px);margin-top:8px;display:flex}.start-screen .start-button{cursor:pointer;-webkit-user-select:none;user-select:none;color:#111;background:var(--yellow);border:3px solid #111;border-radius:999px;justify-content:center;align-items:center;width:100%;min-height:56px;font-size:19px;font-weight:1000;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:4px 5px #111}.start-screen .start-button:active{transform:translate(2px,2px);box-shadow:2px 3px #111}.native-shell.is-installer{touch-action:pan-y;overflow-y:auto}.installer-screen{min-height:var(--app-height,100dvh);padding:max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));color:#fff8ec;place-items:center;display:grid}.installer-panel{color:#111;background:var(--cream);border:4px solid #111;border-radius:18px;gap:18px;width:min(100%,430px);padding:28px;display:grid;box-shadow:8px 9px #111}.installer-kicker{color:var(--teal);text-transform:uppercase;font-size:13px;font-weight:1000}.installer-panel h1{margin:0;font-size:36px;font-weight:1000;line-height:1}.installer-copy,.installer-note{color:#111111bd;margin:0;font-size:16px;font-weight:800;line-height:1.35}.installer-note{background:#18b7a81a;border:2px solid #11111124;border-radius:10px;padding:13px 14px}.installer-primary{text-align:center;cursor:pointer;color:#111;background:var(--yellow);border:3px solid #111;border-radius:999px;justify-content:center;align-items:center;width:100%;min-height:52px;font-size:17px;font-weight:1000;text-decoration:none;transition:transform .1s,box-shadow .1s;display:flex;box-shadow:4px 5px #111}.installer-primary:active{transform:translate(2px,2px);box-shadow:1px 2px #111}.installer-steps{gap:10px;padding-top:4px;display:grid}.installer-steps h2{color:var(--accent);text-transform:uppercase;margin:0;font-size:15px;font-weight:1000}.installer-steps ol{gap:9px;margin:0;padding-left:22px;font-size:15px;font-weight:850;line-height:1.34;display:grid}
