:root{--bg:#111;--fg:#fff;--accent:#ff4fa3;--chip:#00000073;--chip-on:#000000b3;--shutter:#fff;--radius:50%;--font:system-ui, sans-serif;--tap:clamp(52px, 14vw, 64px);--bar:calc(16px + env(safe-area-inset-bottom));--fly-x:calc(50vw - var(--tap) - 24px);--fly-y:calc(50vh - var(--bar) - var(--tap) / 2);--tabs-h:44px}:root[data-theme=girl]{--bg:#2a1630;--accent:#ff6ec7;--chip:#5a1e5a99;--chip-on:#ff6ec759;--shutter:#ffd0ec}:root[data-theme=boy]{--bg:#0f1c2e;--accent:#3bd1ff;--chip:#143c6e99;--chip-on:#3bd1ff59;--shutter:#d2f2ff}:root[data-theme=cyber]{--bg:#000;--fg:#c8fff8;--accent:#00ffe1;--chip:#002828b3;--chip-on:#00ffe14d;--shutter:#00ffe1;--radius:14px;--font:ui-monospace, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font);overflow:hidden}.app{width:100%;height:100%;position:relative}.hidden-video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.stage{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.strip{left:0;right:0;bottom:calc(var(--bar) + 84px + var(--tabs-h) + 20px);scrollbar-width:none;gap:12px;padding:8px 16px;display:flex;position:absolute;overflow-x:auto}.strip::-webkit-scrollbar{display:none}.chip{width:var(--tap);height:var(--tap);border-radius:var(--radius);background:var(--chip);border:3px solid #0000;flex:none;place-items:center;font-size:32px;line-height:1;display:grid}.chip img{pointer-events:none;width:68%;height:68%}.chip.active{border-color:var(--accent);background:var(--chip-on)}.bar{left:0;right:0;bottom:var(--bar);justify-content:space-around;align-items:center;padding:0 24px;display:flex;position:absolute}.round{width:var(--tap);height:var(--tap);border-radius:var(--radius);background:var(--chip);border:none;place-items:center;font-size:28px;display:grid}.shutter{background:var(--shutter);width:84px;height:84px;box-shadow:0 0 0 4px var(--shutter);border:6px solid #00000059;border-radius:50%}.shutter:active{transform:scale(.92)}.spacer{visibility:hidden}.flash{opacity:.8;pointer-events:none;background:#fff;position:absolute;inset:0}.blocker{background:var(--bg);border:none;flex-direction:column;justify-content:center;align-items:center;gap:32px;display:flex;position:absolute;inset:0}.big{font-size:72px}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;color:inherit}.top{top:calc(12px + env(safe-area-inset-top));flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;right:12px}.themes{background:var(--chip);border-radius:20px;gap:8px;padding:8px;display:flex}.tab{border-radius:var(--radius);background:var(--chip);opacity:.75;border:2px solid #0000;place-items:center;width:44px;height:44px;font-size:20px;display:grid}.tab.active{border-color:var(--accent);opacity:1}.texted{left:16px;right:16px;bottom:calc(var(--bar) + 84px + var(--tabs-h) + 20px);flex-direction:column;gap:8px;display:flex;position:absolute}.textin{border:3px solid var(--accent);height:56px;color:var(--fg);font:bold 24px var(--font);background:#0009;border-radius:16px;padding:0 16px}.colors{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.swatch{border:3px solid #0000;border-radius:50%;width:48px;height:48px}.swatch.active{border-color:var(--accent)}.chip.small{width:56px;height:56px;font-size:20px;font-weight:700}.stage{touch-action:none}.sheet{z-index:3;background:color-mix(in srgb, var(--bg) 88%, transparent);text-align:center;flex-direction:column;justify-content:safe center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.sheet h2{font-size:28px}.sheet h3{opacity:.8;margin-top:8px;font-size:18px}.close{z-index:1;top:calc(12px + env(safe-area-inset-top));width:var(--tap);height:var(--tap);border-radius:var(--radius);background:var(--chip);border:none;font-size:24px;position:absolute;right:12px}.huge{font-size:120px;line-height:1}.line{max-width:26ch;font-size:26px}.dots{gap:8px;display:flex}.dot{background:var(--chip-on);border-radius:50%;width:10px;height:10px}.dot.on{background:var(--accent)}.cta{height:var(--tap);background:var(--accent);color:#fff;font:bold 22px var(--font);border:none;border-radius:32px;padding:0 32px}.row{gap:12px;display:flex}.rowbtn{width:min(100%,360px);height:var(--tap);background:var(--chip);color:var(--fg);font:20px var(--font);text-align:left;border:none;border-radius:16px;padding:0 16px}.about{padding-top:calc(80px + env(safe-area-inset-top));justify-content:flex-start}.flow{align-items:center;gap:8px;display:flex}.box{background:var(--chip);border-radius:16px;flex-direction:column;align-items:center;padding:8px 12px;font-size:44px;display:flex}.box small{opacity:.85;font-size:13px}.arrow{opacity:.7;font-size:28px}.credits{text-align:left;max-width:360px;font-size:15px;line-height:1.6;list-style:none}.credits a{color:var(--accent)}.gallery{padding-top:calc(80px + env(safe-area-inset-top));justify-content:flex-start}.grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;width:100%;display:grid}.thumb{aspect-ratio:1;background:var(--chip);border:none;border-radius:12px;padding:0;position:relative;overflow:hidden}.thumb img{object-fit:cover;width:100%;height:100%}.badge{font-size:18px;position:absolute;bottom:6px;right:6px}.viewer{background:#000;padding:0}.full{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.viewbar{position:absolute}.round.danger{background:#c62828}.hint{bottom:calc(var(--tap) + 32px + env(safe-area-inset-bottom));background:var(--chip);border-radius:12px;padding:6px 12px;font-size:18px;position:absolute}.line.small{font-size:18px}.rowbtn.danger{color:#fff;background:#c62828}.editor{justify-content:flex-start;padding:0}.edit-canvas{object-fit:contain;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.shutter.save{font-size:34px}.lab-row{grid-template-columns:48px 1fr;align-items:center;gap:6px 10px;width:min(100%,420px);display:grid}.lab-icon{font-size:28px}.lab-row input[type=range]{width:100%;accent-color:var(--accent);grid-column:2;height:32px}.gallery-btn{border:3px solid var(--fg);padding:0;overflow:hidden}.gallery-btn img{object-fit:cover;width:100%;height:100%}.gallery-btn.has-thumb{animation:.5s ease-out pop}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.fly{aspect-ratio:4/3;object-fit:cover;border:3px solid var(--fg);pointer-events:none;border-radius:16px;width:60%;max-width:360px;animation:.7s cubic-bezier(.4,0,.2,1) forwards fly;position:absolute;top:50%;left:50%}@keyframes fly{0%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{transform:translate(calc(var(--fly-x) - 50%), calc(var(--fly-y) - 50%)) scale(.12);opacity:.6}}.dock{top:calc(12px + env(safe-area-inset-top));bottom:calc(var(--bar) + 84px + 12px);background:color-mix(in srgb, var(--bg) 82%, transparent);z-index:2;border-radius:0 20px 20px 0;grid-template-columns:52px 1fr;width:min(60vw,300px);transition:transform .25s;display:grid;position:absolute;left:0;transform:translate(-100%)}.dock.open{transform:translate(0)}.pull{background:var(--chip);touch-action:none;border:none;border-radius:0 16px 16px 0;width:44px;height:88px;font-size:22px;position:absolute;top:50%;right:-44px;transform:translateY(-50%)}.rail{scrollbar-width:none;border-right:1px solid #ffffff1f;flex-direction:column;align-items:center;gap:10px;padding:12px 6px;display:flex;overflow-y:auto}.dock-body{scrollbar-width:none;padding:20px 12px;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000,#000 22px calc(100% - 22px),#0000);mask-image:linear-gradient(#0000,#000 22px calc(100% - 22px),#0000)}.dock-body::-webkit-scrollbar{display:none}.dock .strip{grid-template-columns:repeat(auto-fill, minmax(var(--tap), 1fr));gap:10px;padding:0;display:grid;position:static;overflow:visible}.dock .texted{position:static}.lab{flex-direction:column;gap:10px;display:flex}.dock .lab-row{grid-template-columns:30px 1fr;gap:4px 6px;width:100%}.dock .lab-icon{font-size:22px}.dock .chip.small{width:38px;height:38px;font-size:16px}.dock .row{flex-wrap:wrap;gap:6px}.dock .rail .tab{flex:none;width:40px;height:40px;font-size:18px}.dock .rowbtn{width:100%}.dock.single{grid-template-columns:1fr}.dock .palette .chip{background:#ffffff2e}.dock .palette img{width:62%;height:62%}.fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1;flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute}.fab .shutter{width:72px;height:72px}.editor .dock{bottom:calc(12px + env(safe-area-inset-bottom))}video.full{height:calc(100% - (var(--tap) + 32px + env(safe-area-inset-bottom)));background:#000}.shutter{touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.shutter.rec{background:#e53935;transform:scale(1.12)}.shutter .ring{pointer-events:none;width:calc(100% + 20px);height:calc(100% + 20px);position:absolute;inset:-10px;transform:rotate(-90deg)}.shutter .ring circle{fill:none;stroke:#fff;stroke-width:6px;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289px;animation:60s linear forwards rec-ring}@keyframes rec-ring{to{stroke-dashoffset:0}}.round:disabled{opacity:.4}.voice{flex-direction:column;align-items:stretch;gap:14px;display:flex}.mirror{width:calc(var(--tap) + 14px);height:calc(var(--tap) + 14px);border:3px solid var(--accent);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;align-self:center;margin-top:6px;font-size:30px}.mirror.rec{background:#e53935;transform:scale(1.1)}.mirror.play{background:var(--accent)}.more{fill:#0000009e;pointer-events:none;width:44px;height:44px}.trash{background:#c62828;font-size:34px;transition:transform .12s;box-shadow:0 0 0 4px #c62828}.trash.hot{background:#ff5252;transform:scale(1.35);box-shadow:0 0 0 6px #ff5252}.ask{z-index:4;background:#000000b8;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:absolute;inset:0}.round.wide{width:calc(var(--tap) + 20px);height:calc(var(--tap) + 20px);font-size:34px}@media (orientation:landscape) and (pointer:coarse),(orientation:landscape) and (max-height:500px){:root{--fly-x:calc(50vw - 58px - env(safe-area-inset-right));--fly-y:calc(62px + var(--tap) / 2)}.bar:not(.viewbar){left:auto;right:calc(16px + env(safe-area-inset-right));pointer-events:none;flex-direction:column;justify-content:center;gap:20px;width:84px;padding:0;top:0;bottom:0}.bar:not(.viewbar)>*{pointer-events:auto}.dock{bottom:calc(12px + env(safe-area-inset-bottom))}}@media (orientation:landscape) and (max-height:500px){.top{right:calc(16px + 84px + 12px + env(safe-area-inset-right))}}.version{opacity:.85;font-variant-numeric:tabular-nums;align-items:center;gap:8px;margin-top:-10px;font-size:12px;display:flex}.version .chip.small{width:44px;height:44px;font-size:18px}.report{text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text;opacity:.85;border:1px solid;border-radius:10px;width:min(100%,420px);margin:8px 0 24px;padding:10px;font-size:12px;line-height:1.5}
