@charset "UTF-8";
:root{color-scheme:dark;--bg:#090a0c;--line:#ffffff20;--muted:#a3a7ae;--text:#f3f4f0;--accent:#d4f584;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button,input,select,a{-webkit-tap-highlight-color:transparent;outline-offset:4px}:focus-visible{outline:2px solid var(--accent)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}a{color:inherit}
.viewer{--stage-inline:0px;--stage-top:0px;--stage-bottom:0px;position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#23262c 0,#14161a 45%,var(--bg) 82%);isolation:isolate}
#screen{position:absolute;top:var(--stage-top);left:var(--stage-inline);width:calc(100% - var(--stage-inline)*2);height:calc(100% - var(--stage-top) - var(--stage-bottom));cursor:ew-resize;touch-action:pinch-zoom}
.source-video{position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:.01;pointer-events:none;z-index:-1}
.action-dock,.quick-controls{display:flex;align-items:center;justify-content:center;gap:8px}.quick-controls{gap:6px}.quick-button{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:54px;padding:0 13px;border:1px solid var(--line);border-radius:24px;background:#16191ddb;backdrop-filter:blur(20px);font-size:13px;white-space:nowrap}.quick-button.active{color:var(--accent);border-color:#748443;background:#26301ce8}.choose-video .album-short{display:none}
.topbar{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.wordmark{display:flex;align-items:center;gap:9px;font-size:24px;font-weight:550;letter-spacing:-.8px;text-shadow:0 1px 14px #000}.wordmark svg{color:var(--accent);width:27px;height:27px}.wordmark small{font-size:14px;font-weight:400;letter-spacing:-.3px;color:var(--muted)}
.top-actions{display:flex;gap:8px;pointer-events:auto}.icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:#131519b8;backdrop-filter:blur(18px);font-size:26px;color:#e5e7eb}.icon-button svg{width:20px;height:20px}
.view-label{position:absolute;top:max(68px,calc(env(safe-area-inset-top) + 52px));left:max(23px,env(safe-area-inset-left));font-size:12px;color:#858b95;pointer-events:none}
.stage-bottom{position:absolute;z-index:2;bottom:max(14px,env(safe-area-inset-bottom));left:12px;right:12px;display:flex;align-items:center;flex-direction:column;gap:9px;pointer-events:none}
.gesture-hint{font-size:13px;color:#c0c5cd;margin:0;text-shadow:0 1px 9px #000}.choose-video{pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 19px;border:1px solid #ffffff29;border-radius:30px;background:#16191ddb;backdrop-filter:blur(20px);box-shadow:0 3px 22px #0004;font-size:14px;font-weight:500}.choose-video svg{width:19px;height:19px;color:var(--accent)}
.privacy{font-size:12px;line-height:1.4;color:#999fa9;margin:0;text-shadow:0 1px 9px #000}.rotate-hint{display:none;position:absolute;top:max(82px,calc(env(safe-area-inset-top) + 63px));left:0;right:0;text-align:center;color:#c0c5cf;font-size:13px;pointer-events:none;margin:0}
.status{position:absolute;z-index:6;left:50%;bottom:max(132px,calc(env(safe-area-inset-bottom) + 110px));transform:translateX(-50%);max-width:min(90vw,520px);width:max-content;margin:0;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:#20242cf2;color:var(--accent);font-size:14px;line-height:1.5;text-align:center;pointer-events:none}.status:empty{display:none}.status.error{color:#ffb6a8}
.drop-cover{display:none;position:absolute;inset:12px;z-index:8;border:1px dashed var(--accent);border-radius:18px;align-items:center;justify-content:center;background:#13180cf0;color:var(--accent);font-size:21px;text-align:center;pointer-events:none}.drag-over .drop-cover{display:flex}.canvas-error{position:absolute;inset:0;align-content:center;text-align:center;padding:35px;background:#111215}.canvas-error[hidden]{display:none}
.controls{position:fixed;left:auto;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));bottom:auto;margin:0;width:330px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);padding:22px;border:1px solid var(--line);border-radius:22px;background:#191b1ff5;color:var(--text);box-shadow:0 24px 100px #0009;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;backdrop-filter:blur(28px)}.controls::backdrop{background:#0004;backdrop-filter:blur(3px)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.panel-heading h1{font-size:18px;letter-spacing:.3px;margin:0;font-weight:550}.panel-heading h2{font-size:15px;margin:0;font-weight:500}.panel-heading .icon-button{background:transparent;border:0;width:36px;height:36px}.panel-heading output{font-size:25px;font-weight:350;font-variant-numeric:tabular-nums}.panel-heading output span{font-size:17px;color:var(--muted)}
.media-card{display:flex;align-items:center;gap:11px;min-width:0}.media-thumb{width:37px;height:42px;flex-shrink:0;border-radius:7px;background:linear-gradient(130deg,#77a9d1,#161b41 45%,#ecb984)}.media-info{min-width:0;flex:1;display:flex;gap:6px;flex-direction:column}.media-info strong{font-size:14px;font-weight:450;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-info span{font-size:12px;color:var(--muted)}.media-card .icon-button{border:0;background:none}
.media-controls{display:flex;gap:12px;margin-top:17px}.small-button{flex:1;border:1px solid var(--line);border-radius:8px;background:#ffffff05;font-size:14px;min-height:42px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;margin-top:18px;color:#c7cbd2}select{border:1px solid var(--line);background:#24272e;color:var(--text);border-radius:7px;padding:8px;font-size:14px;min-height:40px}
.divider{height:1px;background:var(--line);margin:22px 0}input[type=range]{--range:100%;display:block;width:100%;height:30px;margin:0;appearance:none;background:transparent;cursor:pointer;touch-action:none}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) var(--range),#35383f var(--range));border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:4px solid #191c16;margin-top:-7.5px;box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-track{height:3px;background:#35383f}input[type=range]::-moz-range-progress{height:3px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid #191c16}
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.presets button{min-height:40px;border:1px solid var(--line);background:transparent;border-radius:8px;color:#bcc2cb;font-size:14px}.presets button.active{color:var(--accent);border-color:#748443;background:#d4f58409}.animate-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:14px;border:1px solid #48523c;border-radius:8px;background:#d4f5840a;font-size:14px}
.switch-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;cursor:pointer;min-height:32px}.switch-row input{position:absolute;right:0;opacity:0;width:42px;height:26px}.switch-track{width:38px;height:22px;border-radius:20px;background:#454954}.switch-track:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;margin:3px;transition:transform .2s}.switch-row input:checked+.switch-track{background:var(--accent)}.switch-row input:checked+.switch-track:after{transform:translateX(16px);background:#253017}.switch-row input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:4px}
.panel-note{font-size:12px;line-height:1.6;color:var(--muted);margin:22px 0 12px}.reference{display:inline-block;font-size:12px;text-decoration:none;color:#949ba6}
.immersive .wordmark,.immersive .view-label,.immersive .gesture-hint,.immersive .rotate-hint,.immersive .privacy{visibility:hidden}.immersive .top-actions{opacity:.65}.immersive .top-actions:hover,.immersive .top-actions:focus-within{opacity:1}
@media(orientation:portrait) and (max-width:1000px){.rotate-hint{display:block}.view-label{display:none}.wordmark small{display:none}.topbar{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}}
@media(max-height:520px) and (orientation:landscape){.topbar{top:max(8px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}.wordmark small,.view-label{display:none}.wordmark{font-size:20px}.wordmark svg{width:23px;height:23px}.stage-bottom{bottom:max(7px,env(safe-area-inset-bottom));gap:3px}.gesture-hint,.privacy{font-size:12px}.choose-video{min-height:40px;padding:0 16px;font-size:13px}.controls{top:max(8px,env(safe-area-inset-top));max-height:calc(100dvh - 16px)}}
@media(max-height:520px) and (orientation:landscape){.stage-bottom{left:max(10px,env(safe-area-inset-left));right:auto;width:84px;gap:12px;bottom:max(15px,env(safe-area-inset-bottom));text-align:center}.gesture-hint,.privacy{line-height:1.65}.choose-video{width:44px;height:44px;padding:0}.choose-video span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.repo-link{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1.5;color:#b9c3a3;text-decoration:none;pointer-events:auto}.repo-link:hover{color:var(--accent)}.repo-link svg{width:14px;height:14px;flex-shrink:0}.repo-compact{display:none}.panel-repo{justify-content:flex-start;margin-top:18px}.immersive .stage-bottom>.repo-link{visibility:hidden}
@media(max-height:520px) and (orientation:landscape){.stage-bottom .repo-message{display:none}.stage-bottom .repo-compact{display:inline}.stage-bottom .repo-link{gap:4px}.stage-bottom .repo-link svg{display:none}}
@media(max-width:380px){.repo-message{max-width:280px;text-align:center}}
@media(max-width:600px){.choose-video{padding:0 13px}.choose-video .album-full{display:none}.choose-video .album-short{display:inline}.quick-button{padding:0 11px;min-width:50px}}
@media(max-height:520px) and (orientation:landscape){.action-dock{flex-direction:column}.quick-controls{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(15px,env(safe-area-inset-bottom));flex-direction:column;gap:8px}.quick-button{width:72px}.choose-video .album-short{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
/* Mouse/trackpad desktops get a framed stage. Touch devices retain the
   edge-to-edge mobile layout, even when a phone is rotated into landscape. */
@media(hover:hover) and (pointer:fine) and (min-width:760px){
  .viewer{--stage-inline:clamp(28px,5vw,100px);--stage-top:max(88px,12vh);--stage-bottom:max(150px,20vh)}
  .topbar{top:26px;left:32px;right:32px}.wordmark small{display:inline}.view-label{display:block;top:78px;left:33px}.rotate-hint{display:none}
  .stage-bottom{bottom:22px;left:12px;right:12px;width:auto;gap:10px}.gesture-hint,.privacy{font-size:13px;line-height:1.5}
  .choose-video{width:auto;height:auto;min-height:44px;padding:0 20px;font-size:14px}.choose-video span{position:static;width:auto;height:auto;clip-path:none;white-space:normal;overflow:visible}
  .stage-bottom .repo-message{display:inline}.stage-bottom .repo-compact{display:none}.stage-bottom .repo-link svg{display:block}
  .action-dock,.quick-controls{flex-direction:row}.quick-controls{position:static}.quick-button{width:auto}
  .immersive .viewer{--stage-inline:0px;--stage-top:0px;--stage-bottom:0px}
}