@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@400;500;600&display=swap";*{box-sizing:border-box}html,body,#root{height:100%}body{color:#e9e6da;background:#0d1226;margin:0;font-family:Inter,sans-serif}h1,h2,h3,h4{color:#f6f2e4;margin:0 0 .4em;font-family:Playfair Display,serif}.app-shell{flex-direction:column;min-height:100%;display:flex}.app-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem}.nav{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0d1226eb;border-bottom:1px solid #f5b94226;justify-content:space-between;align-items:center;padding:1.1rem 2rem;display:flex;position:sticky;top:0}.brand{align-items:center;gap:.5rem;text-decoration:none;display:flex}.brand-mark{font-size:1.4rem}.brand-name{color:#f5b942;letter-spacing:.02em;font-family:Playfair Display,serif;font-size:1.3rem;font-weight:700}.nav-links{gap:1.6rem;display:flex}.nav-link{color:#c9c5b4;border-bottom:2px solid #0000;padding-bottom:4px;font-size:.95rem;font-weight:500;text-decoration:none}.nav-link.active,.nav-link:hover{color:#f5b942;border-bottom-color:#f5b942}.btn{cursor:pointer;border:none;border-radius:999px;padding:.7rem 1.5rem;font-family:Inter,sans-serif;font-size:.95rem;font-weight:600;transition:transform .15s,background .15s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{color:#15192e;background:#f5b942}.btn-primary:hover:not(:disabled){background:#ffc85c;transform:translateY(-1px)}.btn-ghost{color:#f5b942;background:#f5b9421a;border:1px solid #f5b94259}.btn-ghost:hover:not(:disabled){background:#f5b94233}.btn-lg{padding:.9rem 2.1rem;font-size:1.05rem}.page-title{font-size:2rem}.page-sub{color:#a9a593;margin-bottom:1.8rem}.section-title{text-align:center;margin:3rem 0 1.4rem;font-size:1.6rem}.tag{color:#f5b942;background:#f5b94226;border-radius:999px;padding:.2rem .75rem;font-size:.8rem;font-weight:600;display:inline-block}.hero{text-align:center;padding:4rem 1rem 2rem}.hero-title{color:#f5b942;letter-spacing:.01em;font-size:4rem}.hero-tagline{color:#f6f2e4;margin-bottom:1.2rem;font-family:Playfair Display,serif;font-size:1.4rem;font-style:italic}.hero-sub{color:#b8b4a3;max-width:600px;margin:0 auto 2rem;line-height:1.6}.steps-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.step-card{background:#161b36;border:1px solid #f5b9421f;border-radius:16px;padding:1.8rem;position:relative}.step-num{color:#15192e;background:#f5b942;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:.8rem;font-weight:700;display:inline-flex}.step-card p{color:#a9a593;font-size:.95rem;line-height:1.55}.featured-card{background:#161b36;border:1px solid #f5b94226;border-radius:18px;grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.featured-card img{object-fit:cover;width:100%;height:100%}.featured-body{flex-direction:column;align-items:flex-start;gap:.6rem;padding:2rem;display:flex}.featured-body p{color:#a9a593;line-height:1.55}.sample-buttons{flex-wrap:wrap;gap:.8rem;margin-bottom:2rem;display:flex}.field{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.field label{color:#cfc9b3;font-size:.9rem;font-weight:600}.field input,.field textarea,.field select{color:#e9e6da;resize:vertical;background:#161b36;border:1px solid #f5b94233;border-radius:10px;padding:.75rem 1rem;font-family:inherit;font-size:1rem}.field input:focus,.field textarea:focus,.field select:focus{border-color:#f5b942;outline:none}.field-row{flex-wrap:wrap;align-items:flex-end;gap:2rem;margin-bottom:1.8rem;display:flex}.style-grid{grid-template-columns:repeat(4,1fr);gap:.8rem;display:grid}.style-card{color:#cfc9b3;cursor:pointer;text-align:center;background:#161b36;border:1px solid #f5b94226;border-radius:12px;padding:1rem .5rem;font-weight:500;transition:border-color .15s,background .15s}.style-card.selected{color:#f5b942;background:#f5b9421f;border-color:#f5b942}.toggle-field{flex-direction:row;align-items:center;gap:.7rem}.toggle{cursor:pointer;background:#2a2f4d;border:none;border-radius:999px;width:48px;height:26px;padding:2px;position:relative}.toggle.on{background:#f5b942}.toggle-knob{background:#e9e6da;border-radius:50%;width:20px;height:20px;transition:transform .15s;display:block}.toggle.on .toggle-knob{background:#15192e;transform:translate(22px)}.toggle-label{color:#a9a593;font-size:.9rem}.library-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem;display:grid}.library-card{cursor:pointer;background:#161b36;border:1px solid #f5b9421f;border-radius:14px;transition:transform .15s;position:relative;overflow:hidden}.library-card:hover{transform:translateY(-3px)}.library-card img{object-fit:cover;width:100%;height:150px}.library-card-body{padding:1rem}.library-card-body h3{margin-bottom:.5rem;font-size:1.05rem}.library-meta{color:#a9a593;justify-content:space-between;align-items:center;margin-bottom:.4rem;font-size:.85rem;display:flex}.library-date{color:#78745f;font-size:.8rem}.delete-btn{color:#f5b942;cursor:pointer;background:#0d1226bf;border:1px solid #f5b9424d;border-radius:50%;width:28px;height:28px;position:absolute;top:8px;right:8px}.library-empty{text-align:center;padding:4rem 1rem}.player-header{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.player-layout{grid-template-columns:2fr 1fr;align-items:start;gap:2rem;display:grid}.scene-image-wrap{border:1px solid #f5b94233;border-radius:16px;position:relative;overflow:hidden}.scene-image{aspect-ratio:16/9;object-fit:cover;background:#161b36;width:100%;display:block}.scene-counter{color:#f5b942;background:#0d1226bf;border-radius:999px;padding:.25rem .7rem;font-size:.8rem;position:absolute;bottom:10px;right:12px}.scene-text{color:#ece8db;margin-top:1.2rem;font-size:1.1rem;line-height:1.7}.scene-ambience{color:#f5b942;margin-top:.3rem;font-size:.95rem;font-style:italic}.player-controls{flex-wrap:wrap;gap:1rem;margin-top:1.5rem;display:flex}.sheet-panel{background:#161b36;border:1px solid #f5b94226;border-radius:16px;padding:1.4rem;position:sticky;top:90px}.sheet-header{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.sheet-body h4{color:#f5b942;text-transform:uppercase;letter-spacing:.05em;margin-top:1.2rem;margin-bottom:.4rem;font-size:.85rem}.sheet-char{margin-bottom:.9rem}.sheet-char strong{color:#f6f2e4}.sheet-char p,.sheet-body>p{color:#a9a593;font-size:.9rem;line-height:1.5}.player-empty{text-align:center;padding:4rem}@media (width<=860px){.steps-grid,.featured-card,.style-grid,.player-layout{grid-template-columns:1fr}.sheet-panel{position:static}}