:root{--navy-900: #000a18;--navy-800: #00132b;--navy-700: #031c3a;--navy-600: #06264c;--line: rgba(150, 180, 220, .16);--line-strong: rgba(160, 195, 235, .32);--text: #eaf1fb;--text-dim: #93a8c6;--text-faint: #6b81a3;--accent: #f79646;--accent-soft: rgba(247, 150, 70, .16);--radius: 14px;--radius-sm: 10px;--shadow: 0 24px 60px -22px rgba(0, 0, 0, .85);--chrome: 190px;color-scheme:dark;font-synthesis-weight:none}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background:radial-gradient(120% 90% at 12% -10%,#0a2649 0%,transparent 55%),radial-gradient(90% 70% at 100% 0%,rgba(247,150,70,.09) 0%,transparent 50%),var(--navy-900);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}#root{height:100%}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}kbd{display:inline-block;min-width:1.5em;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:#ffffff0a;font:inherit;font-size:.78rem;line-height:1.5;text-align:center;color:var(--text)}.app{height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column}.app__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,32px);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.app__brand{display:flex;align-items:center;gap:12px;min-width:0}.app__brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(150deg,var(--accent),#d9761f);color:#24160a;font-size:1rem;box-shadow:0 6px 18px -8px #f79646e6}.app__brand-text{display:flex;flex-direction:column;min-width:0}.app__brand-text strong{font-size:.98rem;font-weight:650;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app__brand-text small{color:var(--text-faint);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}.app__header-right{display:flex;align-items:center;gap:14px}.app__hint{margin:0;color:var(--text-dim);font-size:.82rem;white-space:nowrap}.app__download{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:.8rem;font-weight:550;text-decoration:none;white-space:nowrap;transition:background-color .16s ease,border-color .16s ease}.app__download svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.app__download:hover{background:#ffffff12;border-color:var(--line-strong)}.app__main{flex:1 1 auto;min-height:0;min-width:0;display:flex;padding:clamp(12px,2.4vw,28px) clamp(12px,3vw,32px)}.stage{flex:1 1 auto;min-height:0;min-width:0;display:flex}.viewer{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}.viewer__stage{position:relative;flex:1 1 auto;min-height:0;min-width:0;display:flex}.viewer__frame{flex:1 1 auto;min-height:0;min-width:0;display:grid;place-items:center;position:relative;border-radius:var(--radius);background:linear-gradient(180deg,#091e3ab3,#020c1cb3);border:1px solid var(--line);overflow:hidden}.viewer__slide{display:block;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:var(--radius-sm);box-shadow:var(--shadow);background:var(--navy-800)}.viewer__placeholder{position:absolute;inset:0;display:grid;place-items:center;gap:10px;color:var(--text-dim);font-size:.9rem}.viewer__placeholder--error{color:#ffb4a2}.spinner{width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,255,255,.16);border-top-color:var(--accent);animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:64px;padding:0;border:1px solid var(--line);border-radius:12px;background:#020c1c9e;color:var(--text);cursor:pointer;opacity:0;transition:opacity .18s ease,background-color .18s ease,border-color .18s ease;backdrop-filter:blur(6px)}.nav-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav-arrow--prev{left:12px}.nav-arrow--next{right:12px}.viewer__stage:hover .nav-arrow,.nav-arrow:focus-visible{opacity:1}.nav-arrow:hover:not(:disabled){background:#092240e6;border-color:var(--line-strong)}.nav-arrow:disabled{opacity:0;cursor:default}.viewer__bar{flex:0 0 auto;display:flex;flex-direction:column;gap:10px}.viewer__progress{height:3px;border-radius:999px;background:#ffffff14;overflow:hidden}.viewer__progress>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#d9761f,var(--accent));transition:width .28s cubic-bezier(.22,1,.36,1)}.viewer__controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.control{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#ffffff09;color:var(--text);font:inherit;font-size:.88rem;font-weight:550;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .16s ease}.control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.control:hover:not(:disabled){background:#ffffff14;border-color:var(--line-strong)}.control:active:not(:disabled){transform:translateY(1px)}.control:disabled{opacity:.35;cursor:default}.control--icon{width:42px;padding:0;justify-content:center}.control--primary{background:var(--accent-soft);border-color:#f7964680;color:#ffd9b3}.control--primary:hover:not(:disabled){background:#f7964642;border-color:var(--accent)}.viewer__counter{display:inline-flex;align-items:baseline;gap:4px;margin:0;padding:0 6px;font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--text-dim);letter-spacing:.03em}.viewer__counter strong{color:var(--text);font-size:1.05rem;font-weight:650}.viewer__thumbs{flex:0 0 auto;display:flex;gap:10px;padding:10px 2px 2px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}.thumb{position:relative;flex:0 0 auto;width:118px;padding:0;border:1.5px solid var(--line);border-radius:8px;background:var(--navy-700);overflow:hidden;cursor:pointer;scroll-snap-align:center;transition:border-color .16s ease,transform .16s ease}.thumb img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}.thumb__num{position:absolute;left:6px;bottom:6px;min-width:18px;padding:0 5px;border-radius:5px;background:#0000009e;color:var(--text);font-size:.68rem;line-height:1.5}.thumb:hover{border-color:var(--line-strong)}.thumb--active{border-color:var(--accent);transform:translateY(-2px)}.app__footer{flex:0 0 auto;padding:14px clamp(14px,3vw,32px) 18px;border-top:1px solid var(--line);text-align:center;transition:opacity .2s ease}.app__footer p{margin:0;color:var(--text-faint);font-size:.78rem;letter-spacing:.02em}.app__footer[data-hidden=true]{opacity:0;visibility:hidden}.state{flex:1 1 auto;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;color:var(--text-dim)}.state--error h2{margin:0;color:var(--text);font-size:1.15rem}.state--error p{margin:0;max-width:42ch}.state--error button{margin-top:4px;height:40px;padding:0 20px;border:1px solid var(--line-strong);border-radius:999px;background:#ffffff0d;color:var(--text);font:inherit;cursor:pointer}.stage:fullscreen{padding:clamp(10px,2vh,22px);background:radial-gradient(120% 100% at 50% 0%,#06182f 0%,var(--navy-900) 70%)}.stage:fullscreen .viewer__frame{border-color:transparent;background:transparent}.stage:fullscreen .nav-arrow{opacity:.85}@media (hover: none){.nav-arrow{opacity:.8}}@media (max-width: 720px){.app__hint,.app__download span{display:none}.app__download{padding:0 11px}.control--thumbs,.viewer__thumbs{display:none}.app__header{padding-top:10px;padding-bottom:10px}.nav-arrow{width:38px;height:54px}.nav-arrow--prev{left:6px}.nav-arrow--next{right:6px}.control span{display:none}.control{padding:0 14px}.control--icon{width:42px}.thumb{width:96px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}