:root{--bg-dark: #020617;--bg-light: #1e293b;--bg-radial: radial-gradient(circle at 50% 100%, var(--bg-light) 0%, var(--bg-dark) 100%);--text-primary: #f1f5f9;--text-secondary: #94a3b8;--accent: #fbbf24;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-focus: rgba(255, 255, 255, .15);--glass-blur: blur(10px);--glass-blur-heavy: blur(15px);--nebula-1: rgba(96, 165, 250, .08);--nebula-2: rgba(167, 139, 250, .08);--container-max-width: 340px;--modal-max-width: 400px;--nav-height: 80px;--bottom-height: 100px;--border-radius-lg: 24px;--border-radius-md: 16px;--border-radius-sm: 12px;--border-radius-full: 50px;--font-main: "Space Grotesk", sans-serif;--font-mono: "JetBrains Mono", monospace}html,body,#root{height:100%}body{margin:0;background:radial-gradient(circle at 20% 30%,rgba(96,165,250,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(167,139,250,.05) 0%,transparent 50%),radial-gradient(circle at 50% 100%,#1e293b,#020617);color:var(--text-primary);font-family:var(--font-main);min-height:100vh;min-height:100dvh;overflow-x:hidden;overflow-y:auto}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;position:relative;z-index:10;box-sizing:border-box;width:100%;min-height:100vh}h1,h2{font-weight:300;letter-spacing:-1px;margin-bottom:2rem;width:100%}.hero-logo{font-size:5rem;margin-bottom:1rem;letter-spacing:-3px}.tutorial-steps{display:flex;flex-direction:column;gap:20px;margin:1.5rem 0;text-align:left;width:100%;max-width:var(--container-max-width);position:relative}.step{display:flex;align-items:center;gap:15px;font-size:1rem;color:var(--text-secondary);position:relative;z-index:2}.step span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);font-size:.8rem;color:var(--text-primary);flex-shrink:0}.tutorial-steps:before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:1px;background:var(--glass-border);z-index:1}input,textarea,select,button{display:block;width:100%;padding:14px;margin-bottom:15px;border-radius:var(--border-radius-md);border:1px solid var(--glass-border);font-family:inherit;font-size:1rem;box-sizing:border-box;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:all .2s ease;margin-left:auto;margin-right:auto}input,textarea,select{background:var(--glass-bg);color:#fff;max-width:var(--container-max-width)}input:focus,textarea:focus{outline:none;background:var(--glass-focus);border-color:#ffffff4d}button{background:var(--accent);color:var(--bg-dark);font-weight:700;cursor:pointer;max-width:var(--container-max-width);border:none}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #fbbf2466;filter:brightness(1.1)}button:disabled{opacity:.6;cursor:not-allowed}.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-height);padding:0 20px;display:flex;justify-content:space-between;align-items:center;z-index:100;pointer-events:none}.brand{font-weight:300;font-size:1.8rem;color:#fff;pointer-events:auto;text-decoration:none;letter-spacing:-1px;display:flex;align-items:center;height:100%}.sky-title{color:#fff;font-size:1.4rem;font-weight:500;text-align:center;flex-grow:1;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 20px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.sky-container{position:fixed;inset:0;background:transparent;z-index:10;overflow:hidden}.star{position:absolute;border-radius:50%;cursor:pointer;z-index:20;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.star:hover{z-index:30}.style-selector{display:flex;gap:12px;margin-bottom:25px;justify-content:space-between;align-items:center;background:var(--glass-bg);padding:12px 20px;border-radius:var(--border-radius-md);border:1px solid var(--glass-border);width:100%;max-width:var(--container-max-width);margin-left:auto;margin-right:auto;flex-wrap:nowrap;box-sizing:border-box}.style-option,.emoji-option,.shape-option{width:36px;height:36px;flex-shrink:0;border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;border:2px solid transparent;font-size:1.2rem;box-sizing:border-box}.style-option:hover,.emoji-option:hover,.shape-option:hover{transform:scale(1.1)}.style-option.selected,.emoji-option.selected,.shape-option.selected{transform:scale(1.1);filter:brightness(1.3) drop-shadow(0 0 8px rgba(255,255,255,.3))}.opt-classic{background:#fff!important}.opt-gold{background:#fbbf24!important}.opt-blue{background:#60a5fa!important}.opt-fire{background:#f87171!important}.opt-green{background:#4ade80!important}.opt-purple{background:#a78bfa!important}.modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.glass-card{background:#14141ed9;border:6px solid #000;padding:30px;border-radius:0;text-align:center;box-shadow:0 25px 50px -12px #00000080;color:#fff;box-sizing:border-box;-webkit-backdrop-filter:var(--glass-blur-heavy);backdrop-filter:var(--glass-blur-heavy)}.modal{width:100%;max-width:var(--modal-max-width);position:relative}.share-btn{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:#fff;padding:10px 16px;border-radius:var(--border-radius-full);z-index:50;width:auto;margin:0;transition:all .2s ease;font-size:.8rem}button.share-btn:hover{background:var(--glass-focus);transform:translateY(-3px);box-shadow:0 5px 15px #ffffff1a}.pagination-btn{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;margin:0;font-size:.8rem}.pagination-btn:hover:not(:disabled){background:var(--glass-focus);transform:translateY(-2px)}.pagination-btn:disabled{opacity:.3;cursor:not-allowed}.story-btn{background:var(--accent);color:var(--bg-dark);font-weight:700;border:none;padding:12px;border-radius:var(--border-radius-sm);cursor:pointer;transition:all .2s}.bottom-controls{pointer-events:auto;display:flex;gap:10px;align-items:center;justify-content:center}.bottom-controls .share-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;white-space:nowrap}@media(max-width:600px){.brand{font-size:1.4rem}.sky-title{font-size:1.1rem;padding:0 10px}.container{padding:20px 15px}.hero-logo{font-size:3.5rem}input,textarea,select,.glass-card,.share-btn,.pagination-btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#1e293bf2!important}button{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.bottom-controls .share-btn{padding:0 10px;font-size:.7rem;height:36px;flex:0 1 auto;margin:0;min-width:0}.pagination-btn{width:32px;height:32px}}.toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);background:var(--bg-light);color:var(--text-primary);padding:12px 24px;border-radius:var(--border-radius-full);border:1px solid var(--glass-border);box-shadow:0 10px 30px #00000080;z-index:300;font-size:.9rem;white-space:nowrap}.refresh-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#14141ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--accent);padding:30px;border-radius:20px;z-index:200;text-align:center}.star-bg-layer{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;transform:translateZ(0)}.bg-star-decoration{position:absolute;background:#fff;border-radius:50%;animation:star-twinkle var(--speed) ease-in-out infinite alternate;will-change:opacity,transform}.bg-star-container{position:absolute;inset:0;animation:global-drift 120s linear infinite;will-change:transform}@keyframes global-drift{0%{transform:translateY(0)}to{transform:translateY(-100px)}}@keyframes star-twinkle{0%{opacity:.2;transform:scale(.8)}to{opacity:.6;transform:scale(1)}}.shooting-star{position:absolute;width:100px;height:2px;background:linear-gradient(90deg,white,transparent);border-radius:50%;pointer-events:none;z-index:1;will-change:transform,opacity}@keyframes shooting-star{0%{transform:translate(0) translateY(0) rotate(-45deg) scale(0);opacity:1}70%{opacity:1}to{transform:translate(-500px) translateY(500px) rotate(-45deg) scale(1);opacity:0}}.nebula-backplane{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:0;overflow:hidden;transform:translateZ(0)}.nebula-gradient{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center,rgba(49,46,129,.06) 0%,rgba(76,29,149,.05) 30%,rgba(19,78,74,.04) 60%,transparent 80%);opacity:.04;animation:nebula-pulse 60s ease-in-out infinite;will-change:opacity,transform}@keyframes nebula-pulse{0%,to{opacity:.03;transform:scale(1)}50%{opacity:.06;transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.nebula-gradient{animation:none}}@keyframes star-twinkle-inner{0%{opacity:.7;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.star-twinkle-layer{position:absolute;inset:0;border-radius:50%;animation:star-twinkle-inner 4s ease-in-out infinite alternate}.paused,.paused *{animation-play-state:paused!important}