:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.checkpoint-controls{position:absolute;bottom:0;left:0;right:0;background:#141414f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -8px 32px #0006;padding:1.25rem 1.5rem;z-index:20}.checkpoint-controls:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:60px;height:1px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);opacity:.6}.navigation-buttons{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;max-width:400px;margin-left:auto;margin-right:auto}.nav-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.3);border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0003;text-transform:uppercase;letter-spacing:.025em;min-height:44px;min-width:44px}.nav-button:hover{background:#3b82f633;border-color:#3b82f680;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.nav-button:active{transform:translateY(0);box-shadow:0 2px 6px #0003}.nav-button svg{width:18px;height:18px;fill:currentColor}.checkpoint-info{display:flex;flex-direction:column;align-items:center;gap:.25rem}.checkpoint-counter{font-size:.75rem;color:#94a3b8;font-weight:500;margin-bottom:.25rem;letter-spacing:.025em}.checkpoint-name{font-size:1rem;font-weight:600;color:#fff;text-align:center;letter-spacing:-.025em}.checkpoint-list{border-top:1px solid rgba(255,255,255,.08);padding-top:1.25rem;max-width:600px;margin:0 auto}.checkpoint-list h3{margin:0 0 1rem;font-size:.875rem;font-weight:600;color:#94a3b8;text-align:center;letter-spacing:.025em}.checkpoint-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem}.checkpoint-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);color:#94a3b8;min-height:56px}.checkpoint-item:hover{border-color:#3b82f64d;color:#e2e8f0;background:#3b82f60d;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.checkpoint-item.active{background:#3b82f61a;border-color:#3b82f680;color:#fff;box-shadow:0 4px 16px #3b82f633}.checkpoint-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:50%;font-weight:600;font-size:.875rem;color:#94a3b8;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.checkpoint-item.active .checkpoint-number{background:#3b82f633;border-color:#3b82f680;color:#fff;box-shadow:0 2px 8px #3b82f64d}.checkpoint-label{font-weight:500;font-size:.875rem;letter-spacing:.025em;flex:1}.active-indicator{font-size:.75rem;color:#3b82f6;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:.7}50%{opacity:1}}@media (max-width: 1200px){.checkpoint-controls{padding:1rem 1.25rem}.checkpoint-items{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.625rem}}@media (max-width: 768px){.checkpoint-controls{padding:1rem}.navigation-buttons{margin-bottom:1rem;max-width:350px}.nav-button{padding:.625rem 1.25rem;font-size:.8rem;min-height:42px}.nav-button svg{width:16px;height:16px}.checkpoint-name{font-size:.95rem}.checkpoint-items{grid-template-columns:repeat(2,1fr);gap:.625rem}.checkpoint-item{padding:.625rem .875rem;min-height:52px}.checkpoint-number{width:28px;height:28px;font-size:.8rem}.checkpoint-label{font-size:.8rem}}@media (max-width: 640px){.checkpoint-controls{padding:.875rem}.navigation-buttons{max-width:320px;margin-bottom:.875rem}.checkpoint-list{padding-top:1rem}.checkpoint-items{gap:.5rem}.checkpoint-item{padding:.5rem .75rem;min-height:48px}}@media (max-width: 480px){.checkpoint-controls{padding:.75rem}.navigation-buttons{flex-direction:column;gap:.75rem;margin-bottom:1rem;max-width:280px}.nav-button{width:100%;padding:.75rem 1rem;font-size:.875rem;min-height:48px}.checkpoint-info{order:-1;margin-bottom:.5rem}.checkpoint-counter{font-size:.7rem}.checkpoint-name{font-size:.9rem}.checkpoint-list h3{font-size:.8rem;margin-bottom:.875rem}.checkpoint-items{grid-template-columns:1fr;gap:.5rem}.checkpoint-item{justify-content:flex-start;padding:.75rem;min-height:56px}.checkpoint-number{width:36px;height:36px;font-size:.875rem}.checkpoint-label{font-size:.875rem;font-weight:500}}@media (max-width: 360px){.checkpoint-controls{padding:.625rem}.navigation-buttons{gap:.625rem;max-width:260px}.nav-button{padding:.625rem .875rem;font-size:.8rem;min-height:44px}.checkpoint-name{font-size:.85rem}.checkpoint-item{padding:.625rem;min-height:52px}.checkpoint-number{width:32px;height:32px;font-size:.8rem}.checkpoint-label{font-size:.8rem}}@media screen and (orientation: landscape) and (max-height: 480px){.checkpoint-controls{padding:.5rem}.navigation-buttons{flex-direction:row;gap:1rem;margin-bottom:.5rem}.nav-button{padding:.5rem 1rem;font-size:.75rem;min-height:40px}.checkpoint-info{order:0;margin-bottom:0}.checkpoint-name{font-size:.8rem}.checkpoint-list{display:none}}@media (hover: none) and (pointer: coarse){.nav-button{min-height:48px;min-width:48px}.checkpoint-item{min-height:56px}.nav-button:hover{transform:none;box-shadow:0 2px 8px #0003}.checkpoint-item:hover{transform:none;box-shadow:none}}.format-toggle{display:flex;align-items:center;gap:1rem}.toggle-label{font-size:.875rem;font-weight:500;color:#94a3b8;white-space:nowrap;letter-spacing:.025em}.toggle-buttons{display:flex;background:#0006;border-radius:12px;padding:.25rem;border:1px solid rgba(59,130,246,.2);box-shadow:inset 0 1px 3px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toggle-button{padding:.75rem 1.5rem;background:transparent;color:#94a3b8;border:none;border-radius:8px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;min-width:80px;letter-spacing:.025em;min-height:44px}.toggle-button:hover{color:#e2e8f0;background:#3b82f61a;transform:translateY(-1px)}.toggle-button.active{background:#3b82f633;color:#fff;box-shadow:0 2px 8px #0003;transform:translateY(-1px)}.toggle-button.active:hover{background:#3b82f640;box-shadow:0 4px 12px #0000004d}@media (max-width: 1200px){.toggle-button{padding:.625rem 1.25rem;min-width:75px}}@media (max-width: 768px){.format-toggle{gap:.875rem}.toggle-label{font-size:.8rem}.toggle-buttons{border-radius:10px}.toggle-button{padding:.625rem 1.125rem;font-size:.8rem;min-width:70px;min-height:42px}}@media (max-width: 640px){.format-toggle{gap:.75rem}.toggle-button{padding:.5rem 1rem;font-size:.8rem;min-width:65px;min-height:40px}}@media (max-width: 480px){.format-toggle{gap:.5rem;flex-direction:column;align-items:center}.toggle-label{font-size:.75rem;text-align:center}.toggle-buttons{width:100%;max-width:200px}.toggle-button{flex:1;padding:.75rem .5rem;font-size:.8rem;min-width:0;min-height:48px}}@media (max-width: 360px){.toggle-label{font-size:.7rem}.toggle-buttons{max-width:180px}.toggle-button{padding:.625rem .5rem;font-size:.75rem;min-height:44px}}@media screen and (orientation: landscape) and (max-height: 480px){.format-toggle{flex-direction:row;gap:.5rem}.toggle-label{font-size:.7rem}.toggle-buttons{max-width:140px}.toggle-button{padding:.5rem .75rem;font-size:.7rem;min-height:36px}}@media (hover: none) and (pointer: coarse){.toggle-button{min-height:48px}.toggle-button:hover{transform:none;background:transparent;color:#94a3b8}.toggle-button.active:hover{background:#3b82f633;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #0003}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{width:100vw;height:100vh;display:flex;flex-direction:column;background:#0f0f0f;color:#fff;overflow:hidden;position:relative}.app:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 20%,rgba(59,130,246,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(79,172,254,.03) 0%,transparent 50%);pointer-events:none;z-index:0}.app-header{position:relative;background:#141414f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 20px #0003;z-index:10}.header-content{display:flex;justify-content:space-between;align-items:center;padding:2rem 3rem;max-width:1400px;margin:0 auto;position:relative}.header-content:after{content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%);width:60px;height:1px;background:linear-gradient(90deg,transparent,#3b82f6,transparent);opacity:.6}.title-section{display:flex;flex-direction:column;gap:.5rem}.title-section h1{font-size:2.25rem;font-weight:600;color:#fff;letter-spacing:-.025em;line-height:1.1;position:relative}.title-section h1:after{content:"";position:absolute;bottom:-8px;left:0;width:40px;height:2px;background:linear-gradient(90deg,#3b82f6,#06b6d4);border-radius:1px}.subtitle{margin:0;font-size:.875rem;color:#94a3b8;font-weight:500;letter-spacing:.025em;opacity:.8}.viewer-container{flex:1;position:relative;background:#0a0a0a;overflow:hidden;touch-action:manipulation}.viewer-container:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.8) 0%,transparent 20%),linear-gradient(0deg,rgba(15,15,15,.8) 0%,transparent 20%);pointer-events:none;z-index:1}.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#000000e6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;color:#e2e8f0}.loading-spinner{width:40px;height:40px;border:2px solid rgba(59,130,246,.1);border-top:2px solid #3b82f6;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:1.5rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-overlay p{margin:0;font-size:.95rem;font-weight:500;color:#a1a1aa;text-align:center;letter-spacing:.025em}@media (max-width: 1400px){.header-content{padding:1.75rem 2.5rem}}@media (max-width: 1200px){.header-content{padding:1.5rem 2rem}.title-section h1{font-size:2rem}}@media (max-width: 768px){.header-content{padding:1.25rem 1.5rem;flex-direction:column;gap:1.25rem;align-items:flex-start}.title-section{width:100%;align-items:center;text-align:center}.title-section h1{font-size:1.875rem}.subtitle{font-size:.8rem}.format-toggle{align-self:center}}@media (max-width: 640px){.header-content{padding:1rem 1.25rem;gap:1rem}.title-section h1{font-size:1.75rem}.loading-spinner{width:36px;height:36px}.loading-overlay p{font-size:.9rem}}@media (max-width: 480px){.header-content{padding:1rem;gap:.875rem}.title-section h1{font-size:1.5rem}.title-section h1:after{width:30px;height:1.5px;bottom:-6px}.subtitle{font-size:.75rem}.loading-spinner{width:32px;height:32px}.loading-overlay p{font-size:.85rem}}@media (max-width: 360px){.header-content{padding:.875rem}.title-section h1{font-size:1.375rem}.subtitle{font-size:.7rem}.loading-spinner{width:28px;height:28px;margin-bottom:1rem}}@media (hover: none) and (pointer: coarse){.app{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.viewer-container{-webkit-overflow-scrolling:touch}}*:focus{outline:2px solid #3b82f6;outline-offset:2px}button:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}*{transition:all .2s cubic-bezier(.4,0,.2,1)}::selection{background:#3b82f64d;color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#3b82f680;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3b82f6b3}@media screen and (orientation: landscape) and (max-height: 480px){.header-content{padding:.75rem 1rem}.title-section h1{font-size:1.25rem}.subtitle{display:none}}