:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;width:100%;height:100%;background:#111;color:#eee;overflow:hidden}body{padding:0}[hidden]{display:none!important}button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.screen{position:fixed;inset:0;background:#111}.brand{display:flex;flex-direction:column;line-height:1}.brand span{font-size:18px;font-weight:600;letter-spacing:.08em}.brand small{margin-top:4px;font-size:9px;font-weight:400;letter-spacing:.16em;color:#888}.brandLarge{align-items:center}.brandLarge span{font-size:30px}.brandLarge small{margin-top:8px;font-size:11px}.splashScreen{z-index:10;display:grid;place-items:center;opacity:1;transition:opacity 1s ease}.splashLogo{display:block;width:min(52vw,220px);height:auto}.splashScreen.fadeOut{opacity:0;pointer-events:none}.libraryScreen{display:block}.libraryHeader{position:absolute;z-index:5;left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);height:44px;display:grid;place-items:start center}.libraryBrand{align-items:center}.libraryGrid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 24px),78vh);aspect-ratio:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px;padding:1px;background:#303030;overflow:hidden}.libraryGrid video{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;background:#181818}.cameraLaunch{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);transform:translateX(-50%);width:58px;height:58px;padding:15px;border:1px solid #666;border-radius:50%;background:#e7e7e7;color:#111;transition:background .18s,border-color .18s,color .18s}.cameraLaunch.permissionUnknown{background:#3a2525;border-color:#7b4545;color:#d79a9a}.cameraLaunch.permissionDenied{background:#2a2020;border-color:#6b3434;color:#9d6262}.cameraLaunch.permissionGranted{background:#e7e7e7;border-color:#666;color:#111}.cameraLaunch svg{display:block;width:100%;height:100%;fill:currentColor}.cameraScreen{display:block}.cameraScreen header{position:absolute;z-index:5;left:env(safe-area-inset-left);right:env(safe-area-inset-right);top:env(safe-area-inset-top);height:44px;display:grid;place-items:start center}.cameraHeaderBrand{align-items:center}.cameraBack{position:absolute;z-index:1;left:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:42px;height:42px;padding:10px;border:0;border-radius:50%;background:transparent;color:#eee}.cameraBack svg{width:100%;height:100%;fill:currentColor}.cameraBack:active{background:#222}.cameraScreen main{position:static}.stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 24px),78vh);aspect-ratio:1;overflow:hidden;background:#1b1b1b;border:1px solid #2c2c2c}.recordProgress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.28);opacity:0;overflow:hidden;pointer-events:none}.recordProgress span{display:block;width:100%;height:100%;background:#eee;transform:scaleX(0);transform-origin:left}.recordProgress.active{opacity:1}.recordProgress.active span{animation:recordProgress 2s linear forwards}@keyframes recordProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}.stage,canvas{touch-action:manipulation}canvas{width:100%;height:100%;display:block}canvas.mirrored{transform:scaleX(-1)}#video{display:none}.cameraTransition{position:absolute;inset:0;z-index:3;pointer-events:none;background:#111;opacity:0;transition:opacity .18s ease}.cameraTransition.visible{opacity:1;transition-duration:.1s}.cameraBrand{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px}.cameraTransition img{width:74px;height:74px}.cameraTransition strong{display:flex;flex-direction:column;align-items:center;line-height:1}.cameraTransition strong span{font-size:16px;font-weight:600;letter-spacing:.08em}.cameraTransition strong small{margin-top:5px;font-size:9px;font-weight:400;letter-spacing:.16em;color:#888}.cameraScreen footer{position:absolute;z-index:5;left:calc(env(safe-area-inset-left) + 12px);right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 20px)}.controls{display:grid;gap:9px;width:100%;min-width:0}.zoomControl{min-height:42px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:0 12px;border:1px solid #3f3f3f;border-radius:8px}.zoomLabel{font-size:10px;letter-spacing:.08em;color:#888}.zoomControl input{width:100%;margin:0;accent-color:#e7e7e7}.captureRow{position:relative;display:grid;place-items:center;min-height:76px}.icon{min-height:42px;border:0;background:#191919;color:#eee;font:inherit}.flipButton{position:absolute;right:0;width:56px;height:56px;border:1px solid #4a4a4a;border-radius:50%;font-size:18px}.shutterButton{width:70px;height:70px;padding:5px;border:2px solid #eee;border-radius:50%;background:transparent}.shutterButton span{display:block;width:100%;height:100%;border-radius:50%;background:#e7e7e7}.shutterButton:active span{transform:scale(.92)}.shutterButton:disabled,.previewActions button:disabled{opacity:.28}.previewScreen{display:block}.previewTop,.previewBottom{position:absolute;z-index:5;left:calc(env(safe-area-inset-left) + 20px);right:calc(env(safe-area-inset-right) + 20px);display:flex;justify-content:space-between;align-items:center}.previewTop{top:env(safe-area-inset-top);height:44px}.previewBottom{bottom:calc(env(safe-area-inset-bottom) + 28px);height:52px}.previewBrand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center}.previewVideo{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 24px),78vh);aspect-ratio:1;object-fit:contain;background:#080808}.previewIconButton{display:grid;place-items:center;width:52px;height:52px;padding:13px;border:1px solid #4a4a4a;border-radius:50%;background:#191919;color:#eee}.previewIconButton svg{width:100%;height:100%;fill:currentColor}.previewIconButton:active{background:#292929}.previewIconButton:disabled{opacity:.28}@media(min-width:800px){.cameraScreen footer{left:50%;right:auto;width:min(calc(100% - 24px),78vh);transform:translateX(-50%)}}

.libraryGrid video{cursor:pointer}
.viewerScreen,.playScreen{display:block}
.viewerTop{position:absolute;z-index:5;left:calc(env(safe-area-inset-left) + 20px);right:calc(env(safe-area-inset-right) + 20px);top:env(safe-area-inset-top);height:44px;display:flex;justify-content:space-between;align-items:center}
.viewerVideo,.puzzleBoard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 24px),78vh);aspect-ratio:1;background:#080808}
.viewerVideo{display:block;object-fit:contain}
.viewerBottom{position:absolute;z-index:5;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 28px);height:52px;display:grid;place-items:center}
.playButton{min-height:48px;padding:0 28px;border:1px solid #666;border-radius:999px;background:#e7e7e7;color:#111;font:600 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.04em}
.playButton:active{background:#ccc}

.puzzleBoard{overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1px;padding:1px;background:#303030}
.puzzleTile{position:relative;overflow:hidden;border:0;padding:0;background:#111;touch-action:manipulation}
.puzzleTile video{position:absolute;width:400%;height:400%;max-width:none;object-fit:fill;pointer-events:none}
.puzzleTile.blank{visibility:hidden}
.puzzleStatus{position:absolute;z-index:6;left:50%;bottom:calc(env(safe-area-inset-bottom) + 34px);transform:translateX(-50%);min-height:24px;font-size:12px;letter-spacing:.08em;color:#aaa;white-space:nowrap}

.headerLogo{display:block;width:40px;height:40px;object-fit:contain}
.previewTop .headerLogo{position:absolute;left:50%;top:0;transform:translateX(-50%)}
.cameraBrand img{width:96px;height:96px;object-fit:contain}