*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background:linear-gradient(135deg,#e8f5e8,#f0f8f0);min-height:100vh}.App{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#2d5a2d,#4a7c4a);color:#fff;text-align:center;padding:2rem 1rem;box-shadow:0 4px 6px #0000001a}.app-header h1{font-size:2.5rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.2rem;opacity:.9}.app-nav{background:#4a7c4a;display:flex;justify-content:center;flex-wrap:wrap;padding:.5rem;box-shadow:0 2px 4px #0000001a;position:sticky;top:0;z-index:100}.app-nav button{background:transparent;border:none;color:#fff;padding:.75rem 1.5rem;margin:.25rem;border-radius:25px;cursor:pointer;font-size:1rem;font-weight:500;transition:all .3s ease;position:relative;overflow:hidden}.app-nav button:hover{background:#ffffff1a;transform:translateY(-2px)}.app-nav button.active{background:#fff;color:#2d5a2d;box-shadow:0 4px 8px #0003}.app-nav button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.app-nav button:hover:before{left:100%}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.content-section{background:#fff;border-radius:15px;padding:2rem;box-shadow:0 8px 25px #0000001a;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.content-section h2{color:#2d5a2d;font-size:2rem;margin-bottom:1.5rem;text-align:center;position:relative}.content-section h2:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,#4a7c4a,#6b9b6b);border-radius:2px}.overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:2rem}.overview-card{background:linear-gradient(135deg,#f8fdf8,#e8f5e8);padding:1.5rem;border-radius:12px;text-align:center;border:2px solid #e0f0e0;transition:all .3s ease;position:relative;overflow:hidden}.overview-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4a7c4a,#6b9b6b)}.overview-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #4a7c4a33}.overview-card h3{color:#2d5a2d;font-size:1.3rem;margin-bottom:.75rem}.project-description{background:#f0f8f0;padding:1.5rem;border-radius:12px;border-left:4px solid #4a7c4a}.project-description h3{color:#2d5a2d;margin-bottom:1rem}.scenes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.scene-card{background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #e0f0e0;transition:all .3s ease;position:relative}.scene-card.main-scene{border-left:4px solid #4a7c4a}.scene-card.optional-scene{border-left:4px solid #ffa500}.scene-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.scene-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.scene-header h4{color:#2d5a2d;font-size:1.2rem;flex:1}.scene-type{padding:.25rem .75rem;border-radius:15px;font-size:.8rem;font-weight:700;text-transform:uppercase}.scene-type.main{background:#4a7c4a;color:#fff}.scene-type.optional{background:orange;color:#fff}.scene-props{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0f0e0}.props-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.prop-tag{background:#e8f5e8;color:#2d5a2d;padding:.25rem .75rem;border-radius:12px;font-size:.85rem;border:1px solid #d0e8d0}.scene-types-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.scene-type-card{padding:1.5rem;border-radius:12px;text-align:center}.scene-type-card.main{background:linear-gradient(135deg,#4a7c4a,#5a8c5a);color:#fff}.scene-type-card.optional{background:linear-gradient(135deg,orange,#ffb733);color:#fff}.scene-type-card h4{margin-bottom:.75rem;font-size:1.3rem}.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem}.role-card{background:#fff;border-radius:15px;padding:2rem;box-shadow:0 6px 20px #0000001a;transition:all .3s ease}.role-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px #00000026}.role-card.main-role{border-top:4px solid #4a7c4a}.role-card.participant-role{border-top:4px solid #ffa500}.role-card h3{color:#2d5a2d;font-size:1.5rem;margin-bottom:1rem}.role-description h4{color:#4a7c4a;margin:1rem 0 .5rem}.role-description ul{list-style:none;padding-left:0}.role-description li{position:relative;padding:.25rem 0 .25rem 1.5rem}.role-description li:before{content:"🌟";position:absolute;left:0}.principles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}.principle-card{background:linear-gradient(135deg,#f8fdf8,#e8f5e8);padding:1.5rem;border-radius:12px;text-align:center;border:2px solid #e0f0e0;transition:all .3s ease}.principle-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #4a7c4a33}.principle-card h4{color:#2d5a2d;margin-bottom:.75rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}.game-card{background:#fff;border-radius:12px;padding:1.5rem;border:2px solid #e0f0e0;transition:all .3s ease;border-left:4px solid #6b9b6b}.game-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.game-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.game-header h3{color:#2d5a2d;font-size:1.2rem;flex:1}.skill-badge{background:#6b9b6b;color:#fff;padding:.25rem .75rem;border-radius:15px;font-size:.8rem;font-weight:700}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.benefit-card{background:linear-gradient(135deg,#f8fdf8,#e8f5e8);padding:1.5rem;border-radius:12px;text-align:center;border:2px solid #e0f0e0;transition:all .3s ease}.benefit-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #4a7c4a33}.benefit-card h4{color:#2d5a2d;margin-bottom:.75rem;font-size:1.2rem}.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin:2rem 0}.item-card{background:#fff;border-radius:12px;padding:1.5rem;text-align:center;border:2px solid #e0f0e0;transition:all .3s ease}.item-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000001a}.item-image{width:80px;height:80px;object-fit:contain;margin-bottom:1rem;border-radius:8px}.item-card h4{color:#2d5a2d;margin-bottom:.5rem;font-size:1.1rem}.item-card p{color:#666;font-size:.9rem}.specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}.spec-card{background:linear-gradient(135deg,#f8fdf8,#e8f5e8);padding:1.5rem;border-radius:12px;border:2px solid #e0f0e0}.spec-card h4{color:#2d5a2d;margin-bottom:1rem;font-size:1.2rem}.spec-card ul{list-style:none;padding-left:0}.spec-card li{position:relative;padding:.25rem 0 .25rem 1.5rem}.spec-card li:before{content:"✓";position:absolute;left:0;color:#4a7c4a;font-weight:700}.media-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin:2rem 0}.media-card{background:#fff;border-radius:15px;padding:2rem;border:2px solid #e0f0e0;transition:all .3s ease}.media-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0000001a}.media-card h3{color:#2d5a2d;margin-bottom:1.5rem;font-size:1.4rem}.media-content h4{color:#4a7c4a;margin:1rem 0 .5rem}.qr-section{background:linear-gradient(135deg,#f0f8f0,#e8f5e8);padding:2rem;border-radius:15px;text-align:center;margin-top:2rem;border:2px solid #d0e8d0}.qr-section h3{color:#2d5a2d;margin-bottom:1rem}.qr-placeholder{margin:2rem 0}.qr-code{width:150px;height:150px;background:#fff;border:2px solid #ccc;border-radius:8px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;position:relative}.qr-pattern{width:120px;height:120px;background:linear-gradient(90deg,#333 50%,transparent 50%),linear-gradient(#333 50%,transparent 50%);background-size:10px 10px;opacity:.3}.download-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}.download-btn,.preview-btn{padding:.75rem 2rem;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.download-btn{background:linear-gradient(135deg,#4a7c4a,#5a8c5a);color:#fff}.download-btn:hover{background:linear-gradient(135deg,#3a6c3a,#4a7c4a);transform:translateY(-2px);box-shadow:0 6px 15px #4a7c4a4d}.preview-btn{background:#fff;color:#4a7c4a;border:2px solid #4a7c4a}.preview-btn:hover{background:#4a7c4a;color:#fff;transform:translateY(-2px)}.app-footer{background:linear-gradient(135deg,#2d5a2d,#4a7c4a);color:#fff;padding:3rem 2rem;text-align:center;margin-top:3rem}.footer-content h3{font-size:2rem;margin-bottom:1rem}.footer-content p{font-size:1.1rem;margin-bottom:2rem;opacity:.9}.cta-button{background:#fff;color:#2d5a2d;padding:1rem 2.5rem;border:none;border-radius:30px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.cta-button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #0000004d;background:#f0f8f0}@media (max-width: 768px){.app-header h1{font-size:2rem}.app-header p{font-size:1rem}.app-nav{flex-direction:column;align-items:center}.app-nav button{margin:.25rem 0;width:200px}.app-main{padding:1rem}.content-section{padding:1.5rem}.content-section h2{font-size:1.5rem}.overview-grid,.scenes-grid,.games-grid,.items-grid,.roles-grid,.media-types{grid-template-columns:1fr}.download-actions{flex-direction:column;align-items:center}.download-btn,.preview-btn{width:200px}}.section-intro{background:#f0f8f0;padding:1rem 1.5rem;border-radius:8px;border-left:4px solid #4a7c4a;margin-bottom:2rem;font-style:italic}.production-intro,.media-overview,.concept-intro{background:#f0f8f0;padding:1rem 1.5rem;border-radius:8px;border-left:4px solid #4a7c4a;margin-bottom:2rem}.interaction-principles{margin-top:3rem;padding-top:2rem;border-top:2px solid #e0f0e0}.interaction-principles h3{color:#2d5a2d;text-align:center;margin-bottom:2rem;font-size:1.5rem}.teambuilding-benefits{margin-top:3rem;padding-top:2rem;border-top:2px solid #e0f0e0}.teambuilding-benefits h3{color:#2d5a2d;text-align:center;margin-bottom:2rem;font-size:1.5rem}.production-specs{margin-top:3rem;padding-top:2rem;border-top:2px solid #e0f0e0}.production-specs h3{color:#2d5a2d;text-align:center;margin-bottom:2rem;font-size:1.5rem}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.cta-button:hover{animation:pulse .6s ease-in-out}html{scroll-behavior:smooth}button:focus,.download-btn:focus,.preview-btn:focus,.cta-button:focus{outline:2px solid #4a7c4a;outline-offset:2px}