:root{color:#eefbff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#031a21;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.app-shell{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(circle at 35% 20%,rgba(72,196,204,.24),transparent 28rem),linear-gradient(155deg,#05313b,#07252c 42%,#111c21)}.camera-video,.filter-layer,.school-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.camera-video{object-fit:cover;background:#021216}.filter-layer{z-index:2;overflow:hidden;pointer-events:none}.school-layer{z-index:3;overflow:hidden;pointer-events:none}.school-fish{position:absolute;display:block;width:var(--school-size);height:auto;opacity:0;transform:translate(-50%,-50%) translate3d(var(--school-start-x),var(--school-start-y),0) rotate(var(--school-rotation)) scale(var(--school-scale));transform-origin:center;filter:drop-shadow(0 8px 14px rgba(0,18,28,.22));will-change:transform,opacity}.school-layer.is-active .school-fish{animation:school-surge 5s cubic-bezier(.18,.78,.22,1) forwards;animation-delay:var(--school-delay)}.easter-toast{position:fixed;top:46%;left:50%;z-index:17;display:none;padding:12px 18px;border:1px solid rgba(130,242,255,.44);border-radius:999px;color:#03242b;background:#82f2fff0;box-shadow:0 14px 36px #00121c47,0 0 28px #82f2ff61;font-weight:950;transform:translate(-50%,-50%);pointer-events:none}.easter-toast.is-visible{display:block;animation:easter-toast 1.2s ease-out both}.filter-item{position:absolute;display:block;height:auto;max-width:none;pointer-events:auto;transform-origin:center;-webkit-user-select:none;user-select:none;will-change:transform;-webkit-user-drag:none;filter:drop-shadow(0 8px 18px rgba(0,18,28,.24))}.start-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:grid;place-items:end center;padding:0 max(22px,env(safe-area-inset-right)) calc(max(34px,env(safe-area-inset-bottom)) + 8vh) max(22px,env(safe-area-inset-left));background:#031a21;transition:opacity .18s ease,visibility .18s ease}.start-panel.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.home-art{position:absolute;top:50%;left:50%;width:max(100vw,calc(100vh * 1441 / 2561));height:max(100vh,calc(100vw * 2561 / 1441));overflow:hidden;background:linear-gradient(180deg,#000f1705,#00121b0a 48%,#000c122e),url(https://yuquedoc.oss-cn-shanghai.aliyuncs.com/INDIGO-Fish/bg2.png) center / 100% 100% no-repeat;pointer-events:none;transform:translate(-50%,-50%)}.home-logo{position:absolute;display:block;object-fit:contain}.home-logo-1{top:3.475%;left:4.441%;width:13.255%;height:2.733%}.home-logo-2{top:3.787%;left:70.437%;width:12.283%;height:2.148%}.home-logo-3{top:3.748%;left:87.023%;width:6.94%;height:2.187%}.home-logo-4{top:96.564%;left:4.511%;width:8.883%;height:.742%}.home-logo-5{top:94.846%;left:79.597%;width:14.781%;height:2.577%}@media(max-aspect-ratio:1441 / 2561){.home-logo-1,.home-logo-4{left:12.1%}.home-logo-2{left:64.38%}.home-logo-3{left:80.96%}.home-logo-5{left:73.12%}}.load-message{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.start-panel.is-error .load-message{position:static;width:auto;height:auto;max-width:min(78vw,320px);padding:12px 14px;clip:auto;border:1px solid rgba(255,210,210,.32);border-radius:8px;color:#fff2f2;background:#360c12b8;text-align:center;white-space:normal}.button-row{position:relative;z-index:1;display:grid;min-height:52px;place-items:center}.load-progress{overflow:hidden;width:min(78vw,320px);height:52px;border:1px solid rgba(216,252,255,.34);border-radius:999px;background:#031b2475;box-shadow:0 16px 44px #00000047;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.load-progress-bar{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#82f2ffb8,#e1fffff0);transition:width .16s ease}.primary-button{display:none;min-width:min(78vw,320px);min-height:52px;padding:0 34px;border:0;border-radius:999px;color:#03242b;background:#86f4fff5;box-shadow:0 14px 38px #051d2357,0 0 26px #82f2ff57;font-weight:800;cursor:pointer;animation:start-button-breath 1.75s ease-in-out infinite}.primary-button:disabled{cursor:progress;opacity:.72}.start-panel.is-ready .primary-button{display:inline-grid;place-items:center}.start-panel.is-ready .load-progress{display:none}.bubble-transition{position:fixed;top:0;right:0;bottom:0;left:0;z-index:12;overflow:hidden;background:radial-gradient(circle at 50% 74%,rgba(198,255,255,.22),transparent 24rem),linear-gradient(180deg,#053f4e00,#022634d6);opacity:0;pointer-events:none;transition:opacity .18s ease}.bubble-transition.is-active{opacity:1}.bubble-transition:before{position:absolute;inset:auto 0 0;height:42%;background:radial-gradient(ellipse at center bottom,rgba(224,255,255,.38),transparent 60%),linear-gradient(180deg,#6ae5ff00,#5de2ff33);content:"";transform:translateY(24%);animation:transition-water-swell 1.18s ease-out forwards}.transition-bubble{position:absolute;left:var(--bubble-x);bottom:-80px;width:var(--bubble-size);height:var(--bubble-size);border:1px solid rgba(235,255,255,.72);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.86) 0 12%,transparent 13%),radial-gradient(circle at 62% 70%,#7ae6ff2e,#ffffff14);box-shadow:inset -5px -7px 14px #1992b238,0 0 16px #93f4ff33;opacity:0;transform:translate3d(-50%,0,0) scale(.42);animation:transition-bubble-rise var(--bubble-duration) cubic-bezier(.16,.72,.28,1) var(--bubble-delay) forwards}.tap-bubble-layer,.photo-flash,.countdown-overlay,.recording-intro{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}.tap-bubble-layer{z-index:6;overflow:hidden}.tap-bubble{position:absolute;width:var(--tap-bubble-size);height:var(--tap-bubble-size);border:1px solid rgba(232,255,255,.74);border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.86) 0 14%,transparent 15%),#7eecff1f;box-shadow:inset -3px -5px 10px #1c93b133,0 0 12px #95f4ff38;opacity:0;transform:translate3d(-50%,-50%,0) scale(.28);animation:tap-bubble-pop .78s cubic-bezier(.18,.82,.24,1) forwards}.photo-flash{z-index:18;background:#fff;opacity:0}.photo-flash.is-active{animation:photo-flash .36s ease-out forwards}.countdown-overlay{z-index:17;display:grid;place-items:center;color:#effeff;font-size:clamp(4.2rem,22vw,7rem);font-weight:950;opacity:0;text-shadow:0 8px 30px rgba(0,18,28,.5),0 0 28px rgba(130,242,255,.42)}.countdown-overlay.is-visible{animation:countdown-pop .72s cubic-bezier(.18,.86,.26,1) both}.recording-intro{z-index:17;display:grid;place-items:center;color:#effeff;font-size:1.25rem;font-weight:900;letter-spacing:0;opacity:0;text-shadow:0 8px 26px rgba(0,18,28,.55)}.recording-intro.is-visible{animation:recording-intro 1s ease-out both}.hud{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:4;display:flex;gap:10px}.app-shell:not(.is-started) .hud,.app-shell:not(.is-started) .control-panel,.app-shell:not(.is-started) .capture-bar{display:none}.icon-button,.filter-step-button{display:grid;place-items:center;border:1px solid rgba(210,251,255,.25);border-radius:50%;color:#effeff;background:#041a21b3;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.icon-button{width:44px;height:44px;font-size:1.12rem}.icon-button:disabled,.filter-step-button:disabled,.filter-name-button:disabled,.panel-button:disabled{cursor:progress;opacity:.55}.icon-button.is-active{border-color:#82f2ffc2;color:#03242b;background:#82f2ffeb}.control-panel{position:absolute;right:max(18px,env(safe-area-inset-right));top:calc(max(14px,env(safe-area-inset-top)) + 56px);z-index:4;width:min(292px,calc(100vw - 36px));padding:10px;border:1px solid rgba(210,251,255,.24);border-radius:8px;background:#041a21b8;box-shadow:0 12px 34px #0000003d;pointer-events:auto;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.control-panel[hidden]{display:none}.filter-panel{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:center;gap:10px}.filter-step-button,.filter-name-button{pointer-events:auto}.filter-step-button{width:42px;height:42px;font-size:1.7rem}.filter-name-button{display:grid;min-height:46px;padding:6px 16px;border:1px solid rgba(210,251,255,.26);border-radius:999px;color:#effeff;background:#041a21b8;font-weight:850;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.filter-name-button small{color:#e8fbffb8;font-size:.72rem;font-weight:800}.camera-panel{display:grid;gap:10px}.panel-button,.lens-button{min-height:38px;border:1px solid rgba(210,251,255,.24);border-radius:999px;color:#effeff;background:#041a21bd;font-size:.86rem;font-weight:850;cursor:pointer}.lens-selector{display:flex;min-height:34px;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.lens-selector:empty{display:none}.lens-button{min-width:44px;padding:0 10px}.lens-button.is-active{border-color:#82f2ffc2;color:#03242b;background:#82f2ffeb}.capture-bar{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));z-index:4;display:grid;grid-template-columns:minmax(74px,1fr) 88px minmax(74px,1fr);align-items:center;justify-items:center;pointer-events:none}.mode-button,.fps-button,.shutter-button{pointer-events:auto}.mode-button,.fps-button{min-width:64px;min-height:36px;padding:0 12px;border:1px solid rgba(210,251,255,.24);border-radius:999px;color:#effeff;background:#041a21b3;font-size:.86rem;font-weight:800;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.mode-button{justify-self:end}.fps-button{justify-self:start}.fps-button[hidden]{display:none}.shutter-button{display:grid;width:74px;height:74px;place-items:center;border:4px solid rgba(255,255,255,.9);border-radius:50%;background:#ffffff1a;box-shadow:0 8px 28px #00000047;cursor:pointer}.shutter-core{display:block;width:54px;height:54px;border-radius:50%;background:#fffffff2;transition:width .16s ease,height .16s ease,border-radius .16s ease,background .16s ease}.shutter-button.is-video-mode .shutter-core{background:#eb3434}.shutter-button.is-recording .shutter-core{width:30px;height:30px;border-radius:8px;background:#eb3434}.status-message{position:absolute;left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:6;max-width:620px;padding:12px 14px;border:1px solid rgba(255,240,166,.32);border-radius:8px;color:#fff5c2;background:#18180fc7;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .16s ease,transform .16s ease;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.status-message.is-visible{opacity:1;transform:translateY(0)}.media-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:18px;background:#000b0f6b;opacity:0;pointer-events:none}.media-preview.is-visible{opacity:1;pointer-events:auto}.media-preview-panel{position:relative;display:grid;width:min(84vw,360px);max-height:86vh;gap:8px;padding:12px;border:1px solid rgba(210,251,255,.2);border-radius:8px;background:#041a21eb;animation:photo-preview-float .52s cubic-bezier(.18,.86,.26,1) both}.preview-close-button{position:absolute;top:8px;right:8px;display:grid;width:36px;height:36px;place-items:center;border:1px solid rgba(210,251,255,.22);border-radius:50%;color:#effeff;background:#0000006b;font-size:1.4rem;line-height:1;cursor:pointer}.media-preview-content{display:grid;overflow:hidden;min-height:120px;place-items:center;border-radius:8px;background:#061419}.media-preview-content img,.media-preview-content video{display:block;max-width:100%;max-height:min(46vh,420px);object-fit:contain}.media-preview-hint{margin:0;color:#e8fbffc7;font-size:.82rem;line-height:1.32;text-align:center}.media-caption{margin:0;color:#effeff;font-size:.9rem;font-weight:850;line-height:1.32;text-align:center}.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-open-button,.preview-download-button,.preview-secondary-button{min-height:44px;border-radius:8px;font-weight:800;cursor:pointer}.preview-open-button{border:1px solid rgba(130,242,255,.34);color:#eaffff;background:#82f2ff29}.preview-download-button{border:0;color:#03242b;background:#82f2ff}.preview-secondary-button{border:1px solid rgba(130,242,255,.26);color:#effeff;background:#82f2ff1f}.preview-open-button[hidden],.preview-secondary-button[hidden]{display:none}.guide-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:19;display:none;background:#000b0f94;pointer-events:auto}.guide-overlay.is-visible{display:block}.guide-spotlight{position:absolute;left:var(--guide-x);top:var(--guide-y);width:var(--guide-w);height:var(--guide-h);border:2px solid rgba(130,242,255,.92);border-radius:var(--guide-radius);box-shadow:0 0 0 999px #000b0f6b,0 0 28px #82f2ff75;pointer-events:none}.guide-card{position:absolute;left:var(--guide-card-x);top:var(--guide-card-y);display:grid;width:min(300px,calc(100vw - 32px));gap:12px;padding:46px 14px 14px;border:1px solid rgba(210,251,255,.24);border-radius:8px;color:#effeff;background:#041a21e6;box-shadow:0 16px 40px #00000047;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.guide-avatar{position:absolute;top:-22px;left:18px;display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,18,28,.34));pointer-events:none}.guide-card.is-centered{padding-top:56px}.guide-card.is-centered .guide-avatar{left:50%;transform:translate(-50%)}.guide-card.is-centered .guide-text{text-align:center;font-weight:900}.guide-text{margin:0;font-size:.94rem;line-height:1.45;white-space:pre-line}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.guide-primary-button,.guide-secondary-button{min-height:40px;border-radius:8px;font-weight:850;cursor:pointer}.guide-primary-button{border:0;color:#03242b;background:#82f2ff}.guide-secondary-button{border:1px solid rgba(130,242,255,.34);color:#eaffff;background:#82f2ff24}@keyframes start-button-breath{0%,to{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes transition-bubble-rise{0%{opacity:0;transform:translate3d(-50%,0,0) scale(.38)}14%{opacity:.94}72%{opacity:.9}to{opacity:0;transform:translate3d(calc(-50% + var(--bubble-drift)),-112vh,0) scale(1.42)}}@keyframes transition-water-swell{0%{opacity:0;transform:translateY(24%) scaleY(.82)}44%{opacity:1}to{opacity:0;transform:translateY(-18%) scaleY(1.08)}}@keyframes school-surge{0%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--school-start-x),var(--school-start-y),0) rotate(var(--school-rotation)) scale(calc(var(--school-scale) * .72))}18%{opacity:1}46%{opacity:1;transform:translate(-50%,-50%) translate3d(var(--school-mid-x),var(--school-mid-y),0) rotate(var(--school-rotation)) scale(var(--school-scale))}72%{opacity:1;transform:translate(-50%,-50%) translate3d(var(--school-mid-x),var(--school-mid-y),0) rotate(var(--school-rotation)) scale(var(--school-scale))}to{opacity:0;transform:translate(-50%,-50%) translate3d(var(--school-end-x),var(--school-end-y),0) rotate(var(--school-end-rotation)) scale(calc(var(--school-scale) * .86))}}@keyframes easter-toast{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}82%{opacity:1}to{opacity:0;transform:translate(-50%,-72%) scale(1)}}@keyframes tap-bubble-pop{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.28)}18%{opacity:.96}to{opacity:0;transform:translate3d(calc(-50% + var(--tap-bubble-x)),calc(-50% + var(--tap-bubble-y)),0) scale(1.16)}}@keyframes photo-flash{0%{opacity:0}18%{opacity:.94}to{opacity:0}}@keyframes countdown-pop{0%{opacity:0;transform:scale(.52)}22%{opacity:1;transform:scale(1.05)}to{opacity:0;transform:scale(1.28)}}@keyframes recording-intro{0%{opacity:0;transform:translateY(18px) scale(.92)}22%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-24px) scale(1.06)}}@keyframes photo-preview-float{0%{opacity:0;transform:translate3d(-28vw,22vh,0) scale(.26)}68%{opacity:1;transform:translateZ(0) scale(1.04)}to{opacity:1;transform:translateZ(0) scale(1)}}@media(prefers-reduced-motion:reduce){.start-panel,.status-message,.bubble-transition{transition:none}.primary-button,.transition-bubble,.bubble-transition:before,.tap-bubble,.photo-flash.is-active,.countdown-overlay.is-visible,.recording-intro.is-visible,.media-preview-panel{animation:none}}