*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000}:root{font-family:Inter,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}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}}.nav-button-top{position:fixed;top:20px;left:20px;padding:.5rem 1rem;background:#ffffff1a;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000}.nav-button-top:hover{background:#fff3}.landing-page{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff;gap:2rem}.landing-page h1{font-size:2.5rem;margin:0;text-align:center}.view-button{padding:1rem 2rem;font-size:1.2rem;background:#fff;color:#000;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.view-button:hover:not(:disabled){transform:scale(1.05);background:#f0f0f0}.view-button:disabled{background:#666;color:#999;cursor:not-allowed}.top-controls{position:fixed;top:20px;right:20px;z-index:1000}.exit-button{padding:.5rem 1rem;background:#ffffff1a;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.exit-button:hover{background:#fff3}.slideshow-container{position:relative;width:100vw;height:100vh;margin:0;background:#000;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}.slide{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}@media (max-width: 768px){.slide img{object-fit:cover}}.top-controls{position:fixed;top:20px;right:20px;display:flex;align-items:center;gap:1rem;z-index:1000}.bottom-controls{position:fixed;bottom:20px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:1rem;z-index:1000}.controls-container{position:fixed;bottom:60px;left:0;right:0;display:flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1000}.controls-container.visible{opacity:1;pointer-events:auto}.controls{display:flex;gap:1rem;align-items:center;background:#00000080;padding:.5rem;border-radius:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@keyframes progress{0%{width:0%}to{width:100%}}.progress-bar{position:fixed;bottom:20px;left:0;right:0;width:95%;height:4px;display:flex;gap:4px;margin:0 auto;z-index:1000}.progress-segment{flex:1;height:100%;background:#ffffff4d;border-radius:1px;overflow:hidden;position:relative}.progress-segment-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:#fff}.progress-segment.current .progress-segment-fill{animation:progress 5s linear forwards;animation-play-state:running}.progress-segment.current.paused .progress-segment-fill{animation-play-state:paused}.progress-segment.completed .progress-segment-fill{width:100%;animation:none}.nav-button,.play-button,.fullscreen-button{background:transparent;color:#fff;border:none;cursor:pointer;padding:.5rem;font-size:1.2rem;transition:opacity .3s ease}.nav-button:hover,.play-button:hover,.fullscreen-button:hover{opacity:.7}.slide-counter{color:#fff;background:#00000080;padding:.5rem 1rem;border-radius:4px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.exit-button{position:fixed;top:20px;left:20px;padding:.5rem 1rem;background:#00000080;color:#fff;border:none;border-radius:4px;cursor:pointer;z-index:1000;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.exit-button:hover{background:#000000b3}.loading,.error{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;background:#000000b3;padding:20px;border-radius:8px}@supports (-webkit-touch-callout: none){.slideshow-container{height:-webkit-fill-available}body{position:fixed;width:100%;height:100%}.slide{height:-webkit-fill-available}}.welcome-page{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#000,#1a1a1a);color:#fff}.welcome-content{text-align:center;padding:2rem;max-width:90%}.welcome-content h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(to right,#fff,#e0e0e0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.description{font-size:1.2rem;color:#ccc;margin-bottom:2rem}.error-section{margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.error-message{color:#f44;margin-bottom:1rem}.help-text{color:#999;font-size:.9rem}.generate-page{min-height:100vh;width:100%;padding:4rem 0 2rem;background:linear-gradient(to bottom,#000,#1a1a1a);color:#fff;box-sizing:border-box}.generate-content{max-width:1200px;margin:0 auto;padding:0 2rem}.generate-page h1{text-align:center}.templates{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:2rem 0;width:100%;box-sizing:border-box}.template-phone{width:120px;height:240px;border-radius:20px;box-shadow:0 4px 12px #0003;transition:transform .3s ease}.template-phone:hover{transform:translateY(-5px)}.download-button{display:block;margin:2rem auto;padding:1rem 2rem;font-size:1.1rem;background:#fff;color:#000;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease}.download-button:hover{transform:translateY(-2px);background:#f0f0f0}.instructions{max-width:800px;margin:3rem auto;padding:2rem;background:#ffffff1a;border-radius:12px;box-sizing:border-box}.step{margin:2rem 0}.step h3{color:#4ecdc4;margin-bottom:.5rem}.advanced-toggle{display:block;margin:2rem auto;padding:.5rem 1rem;background:transparent;color:#4ecdc4;border:1px solid #4ECDC4;border-radius:4px;cursor:pointer}.advanced-section{margin-top:2rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.advanced-section a{color:#4ecdc4;text-decoration:none}.advanced-section a:hover{text-decoration:underline}@media (max-width: 768px){.generate-page{padding:4rem 0 1rem;position:fixed;top:0;left:0;width:100vw}.generate-content{padding:0 1rem}.template-phone{width:80px;height:160px}.instructions{padding:1rem;margin:2rem auto}h1{font-size:1.5rem;margin-bottom:1rem}.step h3{font-size:1.1rem}.step p{font-size:.9rem}}.back-button{position:fixed;top:20px;left:20px;padding:.5rem 1rem;background:#ffffff1a;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease}.back-button:hover{background:#fff3}.url-example{background:#0003;border-radius:8px;padding:1rem;margin:1rem 0}.url-example h3{margin-bottom:.5rem;color:#4ecdc4}.url-container{display:flex;gap:1rem;align-items:center;background:#0000004d;padding:.75rem;border-radius:4px;overflow-x:auto}.url-text{font-family:monospace;color:#ccc;white-space:nowrap;overflow-x:auto;flex:1}.copy-button{padding:.5rem 1rem;background:#4ecdc4;color:#000;border:none;border-radius:4px;cursor:pointer;white-space:nowrap;transition:all .3s ease}.copy-button:hover{background:#3dbdb5}.App{width:100%;height:100%}