.app{min-height:100vh;background-color:#f5f5f5}:root{--sky-light: #87CEEB;--sky-blue: #5DADE2;--ocean: #48C9B0;--sand: #F5DEB3;--sand-light: #FFF8E7;--coral: #F08080;--coral-soft: #FFB6A3;--sunset-orange: #FFB347;--sun-yellow: #FFD93D;--warm-white: #FFFEF5;--text-warm: #5D4E37;--text-soft: #7A6B5A;--facilitator: #5DADE2;--participant: #48C9B0}.beach-landing{min-height:100vh;background:var(--sand-light);color:var(--text-warm);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.hero-section{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,var(--sky-light) 0%,var(--sky-blue) 40%,var(--ocean) 70%,var(--sand) 85%,var(--sand-light) 100%)}.hero-bg{position:absolute;inset:0;overflow:hidden}.sun{position:absolute;top:8%;left:50%;transform:translate(-50%);width:120px;height:120px;background:var(--sun-yellow);border-radius:50%;box-shadow:0 0 60px var(--sun-yellow),0 0 120px #ffd93d80}.waves{position:absolute;bottom:15%;left:0;right:0;height:100px}.wave{position:absolute;width:200%;height:40px;background:#ffffff4d;border-radius:50%;left:-50%}.wave1{bottom:60px;animation:wave 8s ease-in-out infinite}.wave2{bottom:40px;animation:wave 10s ease-in-out infinite reverse;opacity:.6}.wave3{bottom:20px;animation:wave 12s ease-in-out infinite;opacity:.4}@keyframes wave{0%,to{transform:translate(-5%)}50%{transform:translate(5%)}}.hero-content{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:40px;width:100%;max-width:900px;padding:0 24px}.hero-figure{display:flex;flex-direction:column;align-items:center;transition:transform .1s ease-out}.figure-avatar{width:80px;height:80px;border-radius:50%;box-shadow:0 4px 20px #00000026}.facilitator-avatar{background:linear-gradient(135deg,var(--facilitator),#3498db)}.participant-avatar{background:linear-gradient(135deg,var(--participant),#27ae60)}.figure-name{margin-top:12px;font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}.hero-text{text-align:center;flex:1;max-width:400px}.hero-text h1{font-size:52px;font-weight:300;margin:0 0 16px;color:var(--text-warm);letter-spacing:-1px}.tagline{font-size:20px;color:var(--text-soft);margin:0 0 40px;line-height:1.5}.scroll-hint{font-size:14px;color:var(--text-soft);margin:0;opacity:.7}.scroll-arrow{font-size:24px;color:var(--text-soft);margin-top:12px;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.chapter{padding:100px 24px}.chapter-content{max-width:700px;margin:0 auto}.chapter-content.centered{text-align:center}.chapter h2{font-size:36px;font-weight:300;color:var(--text-warm);margin:0 0 24px;line-height:1.3}.chapter-text{font-size:20px;line-height:1.8;color:var(--text-soft);margin:0 0 20px}.chapter-text.large{font-size:24px}.chapter-text.emphasis{color:var(--text-warm);font-weight:500}.chapter-text em{color:var(--coral);font-style:normal;font-weight:500}.chapter-aside{font-size:18px;color:var(--text-soft);font-style:italic;margin-top:30px;padding-left:20px;border-left:3px solid var(--coral-soft)}.chapter-setup{background:var(--warm-white)}.floating-figures{display:flex;justify-content:center;margin-bottom:40px;transition:gap .1s ease-out}.mini-figure{width:50px;height:50px;border-radius:50%;box-shadow:0 4px 15px #0000001a}.mini-figure.left{background:linear-gradient(135deg,var(--facilitator),#3498db)}.mini-figure.right{background:linear-gradient(135deg,var(--participant),#27ae60)}.chapter-scenario{background:linear-gradient(180deg,var(--warm-white) 0%,var(--sand-light) 100%)}.scenario-demo{margin-bottom:30px}.demo-card{background:#fff;border-radius:16px;box-shadow:0 8px 40px #0000001a;overflow:hidden;max-width:500px;margin:0 auto}.demo-card .card-header{background:var(--coral);padding:16px 24px}.location-tag{font-size:12px;font-weight:700;letter-spacing:2px;color:#fff}.demo-card .card-body{padding:24px}.demo-card .card-body p{font-size:17px;line-height:1.7;color:var(--text-warm);margin:0 0 16px}.demo-card .prompt{font-style:italic;color:var(--text-soft);padding:16px;background:var(--sand-light);border-radius:8px;margin:0}.chapter-choices{background:var(--sand-light)}.choices-demo{display:flex;flex-direction:column;gap:16px;margin:40px 0}.choice-card-demo{display:flex;align-items:center;gap:16px;background:#fff;padding:20px 24px;border-radius:12px;box-shadow:0 4px 20px #0000000f;transition:transform .2s ease,box-shadow .2s ease}.choice-card-demo:hover{transform:translate(8px);box-shadow:0 6px 25px #0000001a}.choice-marker{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff;flex-shrink:0}.choice-marker.safe{background:var(--participant)}.choice-marker.medium{background:var(--sunset-orange)}.choice-marker.risky{background:var(--coral)}.choice-card-demo p{margin:0;font-size:17px;color:var(--text-warm);line-height:1.5}.chapter-conversation{background:var(--warm-white)}.conversation-scene{margin-bottom:50px}.convo-figures{display:flex;align-items:flex-start;justify-content:center;gap:20px}.convo-figure{flex-shrink:0}.convo-avatar{width:60px;height:60px;border-radius:50%;box-shadow:0 4px 15px #0000001a}.convo-bubbles{display:flex;flex-direction:column;gap:12px;max-width:400px}.convo-bubble{padding:16px 20px;border-radius:20px;font-size:16px;line-height:1.5;box-shadow:0 2px 10px #0000000f}.convo-bubble.from-left{background:var(--facilitator);color:#fff;border-bottom-left-radius:6px;align-self:flex-start}.convo-bubble.from-right{background:#fff;color:var(--text-warm);border-bottom-right-radius:6px;align-self:flex-end}.chapter-shift{background:linear-gradient(180deg,var(--warm-white) 0%,var(--sky-light) 100%);padding-bottom:120px}.together-figures{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:50px}.together-avatar{width:70px;height:70px;border-radius:50%;box-shadow:0 4px 20px #00000026}.connection-line{width:60px;height:4px;background:linear-gradient(90deg,var(--facilitator),var(--participant));border-radius:2px}.chapter-essence{background:var(--sky-light)}.essence-points{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}@media(max-width:900px){.essence-points{grid-template-columns:repeat(2,1fr)}}@media(max-width:500px){.essence-points{grid-template-columns:1fr}}.essence-point{background:#ffffffb3;padding:24px;border-radius:16px;text-align:center}.essence-icon{font-size:32px;display:block;margin-bottom:12px;color:var(--text-warm)}.essence-point p{margin:0;font-size:16px;color:var(--text-soft)}.essence-point strong{color:var(--text-warm)}.essence-subtitle{color:var(--text-soft);font-size:16px;margin-top:-10px;margin-bottom:20px}.essence-point.clickable{border:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;position:relative}.essence-point.clickable:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a;background:#fffffff2}.essence-point.clickable:active{transform:translateY(-2px)}.learn-more{display:block;margin-top:12px;font-size:13px;color:var(--sky-blue);font-weight:500;opacity:.8;transition:opacity .2s}.essence-point.clickable:hover .learn-more{opacity:1}.essence-modal-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.essence-modal{background:var(--sand-light);border-radius:20px;max-width:700px;width:100%;max-height:85vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.modal-close{position:absolute;top:16px;right:16px;background:#0000001a;border:none;width:36px;height:36px;border-radius:50%;font-size:24px;cursor:pointer;color:var(--text-warm);display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:10}.modal-close:hover{background:#00000026}.modal-header{display:flex;align-items:center;gap:20px;padding:32px 32px 24px;border-bottom:1px solid rgba(0,0,0,.08);background:linear-gradient(180deg,var(--sky-light) 0%,var(--sand-light) 100%);border-radius:20px 20px 0 0}.modal-icon{font-size:48px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#fffc;border-radius:16px;flex-shrink:0}.modal-header h2{margin:0;font-size:24px;color:var(--text-warm);font-weight:600}.modal-subtitle{margin:6px 0 0;font-size:16px;color:var(--text-soft);font-style:italic}.modal-body{padding:24px 32px}.modal-section{margin-bottom:28px}.modal-section:last-child{margin-bottom:0}.modal-section h3{font-size:18px;color:var(--text-warm);margin:0 0 12px;font-weight:600}.modal-section p{font-size:15px;line-height:1.7;color:var(--text-soft);margin:0}.modal-takeaway{background:linear-gradient(135deg,var(--ocean) 0%,var(--sky-blue) 100%);padding:24px 32px;border-radius:0 0 20px 20px}.takeaway-label{display:inline-block;background:#fff3;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.modal-takeaway p{margin:0;font-size:17px;color:#fff;font-weight:500;line-height:1.6}@media(max-width:600px){.essence-modal{max-height:90vh}.modal-header{flex-direction:column;text-align:center;padding:24px 20px}.modal-header h2{font-size:20px}.modal-body{padding:20px}.modal-section h3{font-size:16px}.modal-section p{font-size:14px}.modal-takeaway{padding:20px}.modal-takeaway p{font-size:15px}}.chapter-start{background:linear-gradient(180deg,var(--sky-light) 0%,var(--sand-light) 100%);padding-bottom:80px}.start-options{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:40px}.start-btn{display:flex;align-items:center;gap:16px;padding:24px 32px;border:none;border-radius:16px;cursor:pointer;transition:all .2s ease;min-width:260px;text-align:left}.facilitator-btn{background:#fff;box-shadow:0 4px 20px #5dade24d}.facilitator-btn:hover{transform:translateY(-4px);box-shadow:0 8px 30px #5dade266}.participant-btn{background:#fff;box-shadow:0 4px 20px #48c9b04d}.participant-btn:hover{transform:translateY(-4px);box-shadow:0 8px 30px #48c9b066}.btn-avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0}.btn-text{display:flex;flex-direction:column;gap:4px}.btn-text strong{font-size:18px;color:var(--text-warm)}.btn-text span{font-size:14px;color:var(--text-soft)}.beach-footer{background:var(--sand-light);padding:50px 24px;text-align:center}.beach-footer p{font-size:15px;color:var(--text-soft);max-width:500px;margin:0 auto;line-height:1.7}@media(max-width:768px){.hero-content{flex-direction:column;gap:30px}.hero-figure.left,.hero-figure.right{transform:none!important}.hero-text h1{font-size:40px}.chapter h2{font-size:28px}.chapter-text{font-size:18px}.convo-figures{flex-direction:column;align-items:center}.convo-bubbles{max-width:100%}.start-btn{width:100%;max-width:300px}}.main-menu{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.menu-card{background:#fff;border-radius:12px;padding:40px;box-shadow:0 4px 20px #0000001a;text-align:center;max-width:500px;width:100%}.menu-title{font-size:28px;color:#2c3e50;margin-bottom:10px}.menu-subtitle{color:#666;margin-bottom:30px}.role-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.role-button{display:flex;flex-direction:column;align-items:center;padding:24px 40px;border:none;border-radius:8px;cursor:pointer;transition:transform .2s,box-shadow .2s;min-width:150px}.role-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.admin-button{background-color:#3498db;color:#fff}.client-button{background-color:#27ae60;color:#fff}.role-icon{font-size:32px;margin-bottom:8px}.role-label{font-size:18px;font-weight:700}.role-description{font-size:14px;opacity:.9}.back-button{background-color:#95a5a6;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:14px;margin-bottom:20px}.back-button:hover{background-color:#7f8c8d}.admin-dashboard{max-width:900px;margin:0 auto;padding:20px}.dashboard-title{font-size:28px;color:#2c3e50;margin-bottom:20px}.dashboard-tabs{display:flex;border-bottom:2px solid #ddd;margin-bottom:20px}.tab-button{padding:12px 24px;background-color:#f0f0f0;border:1px solid #ddd;border-bottom:none;border-radius:8px 8px 0 0;cursor:pointer;font-size:16px;margin-right:4px;transition:background-color .2s}.tab-button.active{background-color:#fff;border-bottom:2px solid white;margin-bottom:-2px;font-weight:600}.tab-button:hover:not(.active){background-color:#e8e8e8}.tab-content{background:#fff;border-radius:0 8px 8px;padding:24px;box-shadow:0 2px 8px #00000014}.scenario-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}.scenario-select-btn{padding:12px 24px;background-color:#3498db;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;transition:all .2s}.scenario-select-btn:hover{background-color:#2980b9}.scenario-select-btn.selected{background-color:#27ae60;box-shadow:0 0 0 3px #27ae604d}.scenario-tree-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px}.scenario-tree-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:16px;cursor:pointer;transition:all .2s}.scenario-tree-card:hover{border-color:#3498db;box-shadow:0 4px 12px #3498db26}.scenario-tree-card.selected{border-color:#27ae60;background-color:#f0fff4;box-shadow:0 0 0 3px #27ae6033}.tree-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}.tree-card-header h3{margin:0;font-size:16px;color:#2c3e50}.tree-theme-badge{background-color:#e8f4fc;color:#3498db;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;white-space:nowrap}.tree-description{color:#666;font-size:14px;margin:0 0 12px;line-height:1.4}.tree-meta{display:flex;gap:16px;font-size:12px;color:#888}.launch-button{padding:14px 32px;background-color:#27ae60;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s}.launch-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.launch-button:not(:disabled):hover{background-color:#219a52}.sessions-list{max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:8px}.no-sessions{color:#999;text-align:center;padding:40px}.session-item{padding:16px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s}.session-item:hover{background-color:#f8f9fa}.session-item:last-child{border-bottom:none}.session-title{font-weight:600;color:#2c3e50;margin-bottom:4px}.session-meta{font-size:12px;color:#888;margin-bottom:4px}.session-detail{font-size:14px;color:#666}.client-connect{max-width:500px;margin:0 auto;padding:20px}.connect-card{background:#fff;border-radius:12px;padding:40px;box-shadow:0 4px 20px #0000001a;text-align:center}.connect-card h1{color:#2c3e50;margin-bottom:10px}.connect-card p{color:#666;margin-bottom:20px}.session-input{width:100%;max-width:200px;padding:14px;font-size:24px;text-align:center;border:2px solid #ddd;border-radius:8px;letter-spacing:4px;margin-bottom:20px}.session-input:focus{outline:none;border-color:#3498db}.connect-button{padding:14px 40px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer}.connect-button:hover{background-color:#2980b9}.error-message{color:#e74c3c;margin-top:16px}.game-layout{display:grid;grid-template-columns:1fr 350px;gap:24px;max-width:1200px;margin:0 auto;padding:24px}@media(max-width:900px){.game-layout{grid-template-columns:1fr}}.game-main,.game-sidebar{min-width:0}.game-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px #0000001a}.session-banner{background-color:#e74c3c;color:#fff;padding:10px 20px;font-size:18px;text-align:center}.card-image{width:100%;height:250px;display:flex;align-items:center;justify-content:center}.card-image-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.location-label{font-size:48px;font-weight:800;color:#ffffffe6;text-shadow:3px 3px 6px rgba(0,0,0,.3);letter-spacing:3px}.card-content{padding:24px}.card-title{font-size:24px;color:#2c3e50;margin-bottom:12px}.card-description{font-size:16px;color:#555;line-height:1.6;margin-bottom:24px}.choices-heading{font-size:18px;color:#2c3e50;margin-bottom:16px}.flip-cards-container{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.flip-card-container{perspective:1000px;height:80px;cursor:pointer}.flip-card{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .5s;border-radius:8px}.flip-card.flipped{transform:rotateX(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.flip-card-front{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;font-weight:700;font-size:18px;border:2px solid #2980b9}.flip-card-back{background-color:#fff;border:2px solid #ddd;transform:rotateX(180deg);text-align:center;color:#333;font-size:15px;line-height:1.4}.flip-card.selected .flip-card-back{background-color:#e8f8f0;border-color:#27ae60;border-width:3px}.continue-button{width:100%;padding:14px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s}.continue-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.continue-button:not(:disabled):hover{background-color:#2980b9}.game-over-section{background-color:#fef2f2;padding:24px;border-radius:8px;text-align:center}.game-over-title{color:#dc2626;font-size:24px;margin-bottom:16px}.discussion-prompt{background:#fff;padding:16px;border-radius:8px;border:1px solid #fecaca;text-align:left}.discussion-prompt h4{color:#991b1b;margin-bottom:8px}.discussion-prompt p{color:#555;line-height:1.6}.discussion-phase{max-width:800px;margin:0 auto;padding:24px}.discussion-phase h1{color:#2c3e50;margin-bottom:8px}.discussion-scenario-title{color:#3498db;margin-bottom:16px}.selected-option{background:#f8f9fa;padding:16px;border-radius:8px;margin-bottom:24px;border-left:4px solid #3498db}.admin-controls,.client-controls{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 20px #0000001a}.discussion-notes{width:100%;min-height:120px;padding:12px;border:1px solid #ddd;border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;margin-bottom:24px}.discussion-notes:focus{outline:none;border-color:#3498db}.metrics-sliders{display:grid;gap:16px;margin-bottom:24px}.metric-slider label{display:block;margin-bottom:6px;color:#555;font-weight:500}.slider-container{display:flex;align-items:center;gap:12px}.slider{flex:1;height:8px;-webkit-appearance:none;background:#ddd;border-radius:4px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#3498db;border-radius:50%;cursor:pointer}.slider-value{min-width:30px;text-align:center;font-weight:700;color:#3498db}.discussion-actions{display:flex;gap:12px}.proceed-button,.ready-button{padding:14px 32px;background-color:#27ae60;color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer}.proceed-button:hover,.ready-button:hover{background-color:#219a52}.results-screen{max-width:800px;margin:0 auto;padding:24px}.results-screen h1{color:#2c3e50;margin-bottom:8px}.results-screen h2{color:#3498db;margin-bottom:16px}.session-id-display{background:#e74c3c;color:#fff;display:inline-block;padding:8px 16px;border-radius:6px;font-weight:600;margin-bottom:20px}.results-content,.admin-results{background:#fff;padding:24px;border-radius:12px;margin-bottom:24px;box-shadow:0 2px 8px #00000014}.admin-results h3{color:#2c3e50;margin-bottom:16px;border-bottom:2px solid #eee;padding-bottom:8px}.metrics-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:24px}.metric-result{display:flex;justify-content:space-between;padding:12px;background:#f8f9fa;border-radius:6px}.metric-label{color:#555}.metric-value{font-weight:700;color:#3498db}.notes-summary{margin-bottom:24px}.level-note{padding:12px;background:#f8f9fa;border-radius:6px;margin-bottom:8px}.level-note strong{color:#2c3e50}.level-note p{margin-top:8px;color:#555}.results-actions{display:flex;gap:12px;margin-bottom:16px}.export-button{padding:12px 24px;background-color:#9b59b6;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer}.export-button:hover{background-color:#8e44ad}.save-return-button{padding:12px 24px;background-color:#27ae60;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer}.save-return-button:hover{background-color:#219a52}.return-menu-button{padding:12px 24px;background-color:#95a5a6;color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer}.return-menu-button:hover{background-color:#7f8c8d}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:#fff;border-radius:12px;padding:32px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 10px 40px #0003}.modal-close{position:absolute;top:16px;right:20px;font-size:28px;background:none;border:none;cursor:pointer;color:#999}.modal-close:hover{color:#333}.modal-content h2{color:#2c3e50;margin-bottom:8px}.modal-session-id,.modal-session-date{color:#666;margin-bottom:4px}.modal-content h3{color:#2c3e50;margin-top:24px;margin-bottom:12px}.metrics-chart-placeholder{background:#f0f0f0;padding:40px;border-radius:8px;text-align:center;color:#888;margin-bottom:20px}.score-container{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.score-box{background:#f8f9fa;padding:16px;border-radius:8px;text-align:center}.score-box h4{font-size:12px;color:#666;margin-bottom:8px;text-transform:uppercase}.score-value{font-size:28px;font-weight:700;color:#3498db}.modal-notes{background:#f8f9fa;padding:16px;border-radius:8px}.level-note-item{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #eee}.level-note-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.modal-actions{margin-top:24px;text-align:center}.modal-actions button{padding:12px 32px;background-color:#3498db;color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer}.modal-actions button:hover{background-color:#2980b9}.conversation-log{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #00000014;height:fit-content;max-height:500px;overflow-y:auto}.conversation-title{font-size:16px;color:#2c3e50;margin-bottom:16px;font-weight:600}.messages-container{display:flex;flex-direction:column;gap:10px}.no-messages{color:#999;text-align:center;padding:20px;font-style:italic}.message{padding:10px 14px;border-radius:8px;font-size:13px}.message-system{background-color:#f0f9ff;border:1px solid #bae6fd}.message-user{background-color:#f0fdf4;border:1px solid #bbf7d0}.message-header{display:flex;justify-content:space-between;margin-bottom:4px}.message-sender{font-size:11px;font-weight:600;color:#666;text-transform:uppercase}.message-time{font-size:11px;color:#999}.message-content{color:#444;line-height:1.4}.scenario-designer-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.scenario-designer{background:#fff;border-radius:12px;width:100%;max-width:900px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.designer-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.designer-header h2{margin:0;color:#2c3e50}.designer-header .close-button{background:none;border:none;font-size:24px;cursor:pointer;color:#666;padding:4px 8px}.designer-steps{display:flex;border-bottom:1px solid #e0e0e0}.step-button{flex:1;padding:12px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:14px;color:#666;transition:all .2s}.step-button:hover:not(:disabled){background:#f5f5f5}.step-button.active{color:#3498db;border-bottom-color:#3498db;font-weight:600}.step-button:disabled{opacity:.5;cursor:not-allowed}.designer-content{flex:1;overflow-y:auto;padding:24px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:14px;font-weight:600;color:#444;margin-bottom:6px}.form-group input[type=text],.form-group input[type=number],.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.field-hint{margin-top:6px;font-size:12px;color:#888;font-style:italic}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.checkbox-group label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-group input[type=checkbox]{width:18px;height:18px}.color-picker{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform .2s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{border-color:#2c3e50;box-shadow:0 0 0 2px #fff,0 0 0 4px #2c3e50}.primary-button{background-color:#3498db;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.primary-button:hover:not(:disabled){background-color:#2980b9}.primary-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.secondary-button{background-color:#95a5a6;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.secondary-button:hover{background-color:#7f8c8d}.add-button{background-color:#27ae60;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer}.add-button:hover{background-color:#219a52}.scenarios-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.scenarios-header h3{margin:0}.empty-message{color:#888;text-align:center;padding:40px;background:#f9f9f9;border-radius:8px}.scenarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:24px}.scenario-card-mini{background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:box-shadow .2s}.scenario-card-mini:hover{box-shadow:0 4px 12px #0000001a}.scenario-card-mini.is-start{border-color:#27ae60;border-width:2px}.scenario-color-bar{height:8px}.scenario-card-content{padding:12px}.scenario-card-header{display:flex;gap:8px;margin-bottom:8px}.scenario-level{background:#e8e8e8;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.game-over-badge{background:#e74c3c;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.start-badge{background:#27ae60;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.scenario-card-content h4{margin:0 0 4px;font-size:14px}.scenario-location{font-size:12px;color:#888;margin:0 0 4px}.scenario-choices-count{font-size:12px;color:#666;margin:0 0 12px}.scenario-card-actions{display:flex;gap:8px}.scenario-card-actions button{padding:6px 12px;border:none;border-radius:4px;font-size:12px;cursor:pointer;background:#e8e8e8}.scenario-card-actions button:hover{background:#ddd}.scenario-card-actions .delete-btn{background:#fee;color:#c00}.scenario-card-actions .delete-btn:hover{background:#fcc}.step-navigation{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid #e0e0e0;margin-top:24px}.scenario-editor{background:#f9f9f9;padding:20px;border-radius:8px}.scenario-editor h3{margin:0 0 20px}.choices-section{margin-top:24px;padding-top:24px;border-top:1px solid #e0e0e0}.choices-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.choices-header h4{margin:0}.choices-list{display:flex;flex-direction:column;gap:12px}.choice-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px}.risk-indicator{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700}.risk-indicator.risk-low{background:#d4edda;color:#155724}.risk-indicator.risk-medium{background:#fff3cd;color:#856404}.risk-indicator.risk-high{background:#f8d7da;color:#721c24}.risk-indicator.risk-critical{background:#721c24;color:#fff}.choice-text{font-size:14px}.choice-target{font-size:12px;color:#666;background:#f0f0f0;padding:4px 8px;border-radius:4px}.choice-actions{display:flex;gap:8px}.choice-actions button{padding:4px 12px;border:none;border-radius:4px;font-size:12px;cursor:pointer;background:#e8e8e8}.choice-actions button:hover{background:#ddd}.choice-actions .delete-btn{background:#fee;color:#c00}.choice-editor-modal{position:fixed;inset:0;background:#0000004d;display:flex;align-items:center;justify-content:center;z-index:1100}.choice-editor{background:#fff;padding:24px;border-radius:12px;width:100%;max-width:500px;box-shadow:0 10px 40px #0003}.choice-editor h4{margin:0 0 20px}.editor-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}.preview-view h3{margin:0 0 8px}.preview-description{color:#666;margin:0 0 16px}.preview-meta{display:flex;gap:16px;flex-wrap:wrap;padding:12px 16px;background:#f5f5f5;border-radius:8px;margin-bottom:24px;font-size:14px;color:#555}.preview-tree h4{margin:0 0 16px}.preview-scenario{margin-bottom:16px;padding:12px;background:#fafafa;border:1px solid #e8e8e8;border-radius:8px}.preview-scenario-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.level-badge{color:#fff;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600}.outcome-badge{background:#e0e0e0;padding:4px 8px;border-radius:4px;font-size:11px;text-transform:uppercase}.preview-choices{margin:8px 0 0 32px;padding:0;list-style:none}.preview-choices li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;border-bottom:1px solid #eee}.preview-choices li:last-child{border-bottom:none}.risk-dot{width:8px;height:8px;border-radius:50%}.risk-dot.risk-low{background:#27ae60}.risk-dot.risk-medium{background:#f39c12}.risk-dot.risk-high{background:#e74c3c}.risk-dot.risk-critical{background:#8e44ad}.choice-arrow{margin-left:auto;color:#888;font-size:12px}.design-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.design-header h2{margin:0}.empty-design{text-align:center;padding:40px;background:#f9f9f9;border-radius:8px;color:#666}.empty-design p{margin:8px 0}.custom-trees-list{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.custom-tree-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#fff;border:1px solid #e0e0e0;border-radius:8px}.custom-tree-info h4{margin:0 0 4px;color:#2c3e50}.custom-tree-info p{margin:0 0 8px;color:#666;font-size:14px}.tree-stats{display:flex;gap:16px;font-size:12px;color:#888}.custom-tree-actions{display:flex;gap:8px}.custom-tree-actions .delete-btn{background:#fee;color:#c00;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}.custom-tree-actions .delete-btn:hover{background:#fcc}.import-section{margin-top:24px;padding-top:24px;border-top:1px solid #e0e0e0}.import-section h3{margin:0 0 12px;font-size:16px}.import-section input[type=file]{padding:8px;border:1px dashed #ccc;border-radius:6px;background:#fafafa;cursor:pointer}.custom-badge{background:#9b59b6;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}.data-description{color:#666;margin-bottom:20px}.import-status{padding:12px 16px;border-radius:8px;margin-bottom:20px;font-weight:500}.import-status.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.import-status.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.data-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;margin-bottom:24px}.stat-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px;text-align:center}.stat-number{font-size:32px;font-weight:700;color:#3498db}.stat-label{font-size:14px;color:#666;margin-top:4px}.data-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}.data-action-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px}.data-action-card h3{margin:0 0 8px;font-size:16px;color:#2c3e50}.data-action-card p{margin:0 0 16px;font-size:14px;color:#666}.data-action-card.danger{border-color:#f5c6cb;background:#fff5f5}.danger-button{background:#e74c3c;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}.danger-button:hover{background:#c0392b}.playback-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.playback-container{background:#fff;border-radius:16px;width:100%;max-width:800px;max-height:90vh;overflow-y:auto;padding:24px}.playback-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.playback-header h2{margin:0;color:#2c3e50}.playback-header .close-button{background:none;border:none;font-size:28px;cursor:pointer;color:#666;padding:0 8px}.playback-stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px;flex-wrap:wrap}.stat-item{text-align:center;padding:12px 20px;background:#f5f5f5;border-radius:8px;min-width:80px}.stat-item.safe{background:#d4edda}.stat-item.risky{background:#fff3cd}.stat-item.dangerous{background:#f8d7da}.stat-item .stat-value{display:block;font-size:28px;font-weight:700}.stat-item .stat-label{font-size:12px;color:#666}.playback-progress{margin-bottom:20px;padding:0 20px}.progress-track{position:relative;height:40px;background:#eee;border-radius:20px;margin:20px 0}.progress-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#27ae60,#f39c12,#e74c3c);border-radius:20px;transition:width .5s ease}.progress-node{position:absolute;width:32px;height:32px;border-radius:50%;top:4px;transform:translate(-50%);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:2;border:3px solid white;box-shadow:0 2px 8px #0003}.progress-node:hover{transform:translate(-50%) scale(1.2)}.progress-node .node-label{color:#fff;font-size:12px;font-weight:700}.playback-controls{display:flex;justify-content:center;gap:12px;margin-bottom:24px}.play-button,.pause-button,.show-all-button{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.play-button{background:#27ae60;color:#fff}.play-button:hover{background:#219a52}.pause-button{background:#f39c12;color:#fff}.show-all-button{background:#3498db;color:#fff}.show-all-button:hover{background:#2980b9}.playback-content{min-height:300px}.playback-intro{text-align:center;padding:60px 20px;color:#666}.intro-icon{font-size:64px;margin-bottom:16px}.current-step-view{animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.step-card-large{background:#fff;border:4px solid;border-radius:16px;overflow:hidden;max-width:500px;margin:0 auto}.step-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa}.step-badge{font-size:14px;color:#666;font-weight:600}.risk-badge-large{padding:6px 12px;border-radius:20px;color:#fff;font-size:12px;font-weight:700}.step-image{height:120px;display:flex;align-items:center;justify-content:center}.step-location{font-size:32px;font-weight:800;color:#ffffffe6;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.step-title{padding:16px 16px 8px;margin:0;font-size:20px;color:#2c3e50}.step-description{padding:0 16px;color:#666;font-size:14px;line-height:1.5}.step-choice-display{padding:16px}.choice-label{font-size:12px;color:#888;margin-bottom:8px;text-transform:uppercase;font-weight:600}.choice-text{padding:12px 16px;background:#f8f9fa;border-left:4px solid;border-radius:0 8px 8px 0;font-size:15px}.step-arrow{text-align:center;font-size:24px;color:#ccc;padding-bottom:16px}.all-steps-view{display:flex;flex-direction:column;gap:12px}.step-card-mini{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 16px;background:#f8f9fa;border-left:4px solid;border-radius:0 8px 8px 0}.step-number{font-size:12px;font-weight:700;color:#888;min-width:50px}.step-scenario{font-weight:600;color:#2c3e50}.step-choice{font-size:13px;color:#666;grid-column:2}.step-risk-badge{padding:4px 10px;border-radius:12px;color:#fff;font-size:11px;font-weight:600;white-space:nowrap}.playback-outcome{margin-top:24px;padding-top:24px;border-top:2px solid #eee}.playback-outcome h3{text-align:center;margin:0 0 16px;color:#2c3e50}.outcome-card{padding:20px;border-radius:12px;text-align:center}.outcome-card.positive{background:linear-gradient(135deg,#d4edda,#c3e6cb);border:2px solid #27ae60}.outcome-card.neutral{background:linear-gradient(135deg,#fff3cd,#ffeeba);border:2px solid #f39c12}.outcome-card.negative{background:linear-gradient(135deg,#f8d7da,#f5c6cb);border:2px solid #e74c3c}.outcome-card.severe{background:linear-gradient(135deg,#e2d5f1,#d4c4e3);border:2px solid #8e44ad}.outcome-title{font-size:20px;font-weight:700;margin-bottom:12px}.outcome-prompt{font-style:italic;color:#555;margin-bottom:16px}.outcome-summary{font-size:16px}.outcome-message.good{color:#155724}.outcome-message.okay{color:#856404}.outcome-message.bad{color:#721c24}.learning-points{margin-top:20px;padding:16px;background:#f8f9fa;border-radius:8px}.learning-points h4{margin:0 0 12px;color:#2c3e50}.learning-points ul{margin:0;padding-left:20px}.learning-points li{margin-bottom:8px;color:#555}.decision-summary{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;text-align:center}.decision-summary h2{margin:0 0 20px;color:#2c3e50}.decision-stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}.decision-stat{padding:16px 24px;border-radius:12px;min-width:100px}.decision-stat.total{background:#e8f4fc;border:2px solid #3498db}.decision-stat.safe{background:#d4edda;border:2px solid #27ae60}.decision-stat.risky{background:#fff3cd;border:2px solid #f39c12}.decision-stat.dangerous{background:#f8d7da;border:2px solid #e74c3c}.decision-stat .stat-number{display:block;font-size:36px;font-weight:700}.decision-stat .stat-text{font-size:12px;color:#666;text-transform:uppercase}.review-journey-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:16px 48px;font-size:18px;font-weight:700;border-radius:30px;cursor:pointer;transition:all .3s;box-shadow:0 4px 15px #667eea66}.review-journey-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.metric-bar-container{flex:1;height:12px;background:#eee;border-radius:6px;margin:0 12px;overflow:hidden}.metric-bar{height:100%;background:linear-gradient(90deg,#27ae60,#2ecc71);border-radius:6px;transition:width .5s ease}.metric-result{display:flex;align-items:center;padding:8px 0}.metric-result .metric-label{min-width:140px;font-size:14px}.metric-result .metric-value{min-width:40px;text-align:right;font-weight:700;color:#2c3e50}.modal-decision-summary{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:16px 0}.mini-stat{padding:8px 16px;background:#f0f0f0;border-radius:20px;font-size:13px;font-weight:600}.mini-stat.safe{background:#d4edda;color:#155724}.mini-stat.risky{background:#fff3cd;color:#856404}.mini-stat.dangerous{background:#f8d7da;color:#721c24}.modal-playback-btn{display:block;margin:20px auto;padding:12px 32px;font-size:16px}.story-demo{min-height:100vh;background:linear-gradient(180deg,#87ceeb,#5dade2 40%,#7ec8e3 70%,wheat 90%,#fff8e7);color:#2c3e50;position:relative;overflow-x:hidden}.story-bg-layer{position:fixed;inset:0;pointer-events:none;z-index:0}.story-bg-1{background:radial-gradient(ellipse 80% 50% at 20% 40%,rgba(255,217,61,.2) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 80% 60%,rgba(255,179,71,.15) 0%,transparent 50%),linear-gradient(180deg,#87ceeb4d,#5dade233,#f5deb34d);animation:bgPulse1 20s ease-in-out infinite}.story-bg-2{background:radial-gradient(ellipse 50% 80% at 70% 20%,rgba(135,206,235,.3) 0%,transparent 50%),radial-gradient(ellipse 40% 60% at 30% 80%,rgba(255,179,71,.2) 0%,transparent 50%);animation:bgPulse2 25s ease-in-out infinite}.story-bg-3{background:radial-gradient(circle at 50% 50%,transparent 0%,rgba(44,62,80,.1) 100%)}@keyframes bgPulse1{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@keyframes bgPulse2{0%,to{opacity:.8;transform:translate(0)}50%{opacity:1;transform:translate(-5%)}}.story-particles{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}.particle{position:absolute;width:4px;height:4px;background:#fff9;border-radius:50%;left:var(--x);bottom:-10px;animation:particleRise var(--duration) linear infinite;animation-delay:var(--delay)}.particle:nth-child(odd){width:2px;height:2px;background:#ffd93d80}.particle:nth-child(3n){width:3px;height:3px;background:#ffb34766}@keyframes particleRise{0%{transform:translateY(0) translate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100vh) translate(50px);opacity:0}}.story-loading{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;font-size:18px;opacity:.8;position:relative;z-index:10}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#48c9b0;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.story-back-btn{position:fixed;top:24px;left:24px;z-index:100;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(44,62,80,.15);color:#2c3e50;padding:10px 20px;border-radius:30px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;box-shadow:0 4px 15px #2c3e501a;gap:8px;transition:all .3s ease}.story-back-btn:hover{background:#fffffff2;transform:translate(-4px)}.story-progress-bar{position:fixed;top:0;left:0;right:0;height:3px;background:#2c3e501a;z-index:100}.progress-fill{height:100%;background:linear-gradient(90deg,#48c9b0,#e74c3c);transition:width .5s ease-out;box-shadow:0 0 20px #48c9b080}.story-hero{min-height:70vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:10;padding:60px 24px}.story-hero-content{text-align:center;max-width:600px}.story-badge{display:inline-block;background:#ffffffb3;border:1px solid rgba(44,62,80,.15);padding:8px 20px;border-radius:30px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;color:#5dade2;box-shadow:0 4px 15px #2c3e501a}.story-title{font-size:clamp(48px,10vw,80px);font-weight:800;margin:0 0 16px;line-height:1;color:#2c3e50;text-shadow:0 2px 20px rgba(255,255,255,.5)}.story-subtitle{font-size:clamp(18px,3vw,24px);font-weight:400;margin:0 0 48px;color:#2c3e50b3;line-height:1.4}.story-preview-cards{display:flex;justify-content:center;align-items:center;height:180px;margin-bottom:60px;perspective:1000px}.preview-card{position:absolute;width:120px;height:160px;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid rgba(255,255,255,.15);border-radius:12px;display:flex;align-items:center;justify-content:center;transform-origin:center bottom;transform:rotate(calc((var(--card-index) - 1) * 15deg)) translateY(calc(var(--card-index) * -5px));transition:transform .5s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.preview-card:nth-child(1){z-index:3}.preview-card:nth-child(2){z-index:2}.preview-card:nth-child(3){z-index:1}.preview-location{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.5}.story-scroll-cta{display:flex;flex-direction:column;align-items:center;gap:16px;animation:floatCta 3s ease-in-out infinite}.story-scroll-cta span{font-size:14px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:#2c3e5080}.scroll-line{width:1px;height:60px;background:linear-gradient(to bottom,rgba(44,62,80,.4),transparent);animation:scrollPulse 2s ease-in-out infinite}@keyframes floatCta{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}@keyframes scrollPulse{0%,to{opacity:.3;height:60px}50%{opacity:.8;height:80px}}.story-beat{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;position:relative;z-index:10}.story-transition{display:flex;flex-direction:column;align-items:center;margin-bottom:40px;opacity:0;transform:translateY(-20px);transition:all .8s ease}.story-transition.visible{opacity:1;transform:translateY(0)}.transition-line{width:2px;height:60px;background:linear-gradient(to bottom,transparent,rgba(44,62,80,.3),transparent);margin-bottom:16px}.transition-text{font-size:14px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:#e67e22}.story-scene{width:100%;max-width:580px;background:linear-gradient(145deg,#fffffff2,#fff8e7fa);border:1px solid rgba(44,62,80,.1);border-radius:24px;padding:40px;opacity:0;transform:translateY(40px);transition:all .8s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 60px #2c3e5026,0 0 0 1px #ffffff80 inset}.story-scene.visible{opacity:1;transform:translateY(0)}.scene-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.scene-number{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#2c3e5080}.scene-location{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;background:#5dade226;border-radius:20px;color:#5dade2}.scene-title{font-size:32px;font-weight:700;margin:0 0 20px;line-height:1.2;color:#2c3e50}.scene-description{font-size:18px;line-height:1.8;color:#2c3e50cc;margin:0}.scene-choices{margin-top:36px;padding-top:32px;border-top:1px solid rgba(44,62,80,.1);opacity:0;transform:translateY(20px);transition:all .6s ease .3s}.scene-choices.visible{opacity:1;transform:translateY(0)}.choices-header{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#2c3e5080;margin-bottom:20px}.choices-grid{display:flex;flex-direction:column;gap:12px}.choice-option{display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:12px;background:#2c3e5008;border:1px solid rgba(44,62,80,.08);transition:all .3s ease}.choice-option.picked{background:#5dade21a;border-color:#5dade24d;transform:scale(1.02)}.choice-option.unpicked{opacity:.5}.choice-indicator{flex-shrink:0;width:32px;height:32px;border-radius:50%;border:2px solid rgba(44,62,80,.2);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#2c3e50;transition:all .3s ease}.choice-option.picked .choice-indicator{border-color:transparent;color:#fff}.choice-body{flex:1;min-width:0}.story-demo .choice-text{display:block;font-size:15px;line-height:1.5;margin-bottom:4px;color:#2c3e50;background:transparent;padding:0;border:none;border-radius:0}.choice-risk-tag{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.choice-result{display:flex;flex-direction:column;align-items:center;margin-top:24px;padding-top:24px;border-top:1px solid rgba(44,62,80,.08)}.result-arrow{font-size:24px;color:#5dade2;opacity:.6;animation:pulseArrow 2s ease-in-out infinite}@keyframes pulseArrow{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(4px)}}.result-text{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#2c3e5080;margin-top:8px}.scene-ending{margin-top:32px;padding-top:32px;border-top:1px solid rgba(44,62,80,.1);opacity:0;transform:translateY(20px);transition:all .6s ease .3s}.scene-ending.visible{opacity:1;transform:translateY(0)}.scene-ending .ending-badge{display:inline-block;padding:10px 24px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:3px;text-transform:uppercase;margin-bottom:24px}.scene-ending .ending-badge.negative,.scene-ending .ending-badge.severe{background:linear-gradient(135deg,#8b0000,#b22222);box-shadow:0 4px 30px #8b000066}.scene-ending .ending-badge.positive{background:linear-gradient(135deg,#27ae60,#2ecc71);box-shadow:0 4px 30px #27ae6066}.ending-question{font-size:20px;font-style:italic;line-height:1.6;margin:0 0 24px;padding:24px;background:#e74c3c14;border-left:3px solid rgba(231,76,60,.5);border-radius:0 12px 12px 0;color:#2c3e50}.ending-lessons{padding:20px;background:#2c3e500d;border-radius:12px;border:1px solid rgba(44,62,80,.1)}.lesson-point{font-size:14px;line-height:1.6;margin:0 0 12px;color:#2c3e50cc}.lesson-point:last-child{margin-bottom:0}.story-beat.final-beat .story-scene{border-color:#e74c3c4d;box-shadow:0 20px 60px #e74c3c26,0 0 60px #e74c3c14}@keyframes cardGather{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}@keyframes cardTumbleFall{0%{transform:translateY(0) translate(0) rotate(0) scale(1);opacity:1}10%{transform:translateY(-40px) translate(0) rotate(var(--tumble-rotation, 5deg)) scale(1.05);opacity:1}to{transform:translateY(120vh) translate(var(--tumble-x-end, 100px)) rotate(var(--tumble-rotation-end, 360deg)) scale(.4);opacity:0}}.tumble-cards-container{position:fixed;inset:0;z-index:350;display:flex;align-items:center;justify-content:center;pointer-events:none;perspective:1000px}.tumble-card{position:absolute;width:280px;max-width:80vw;background:linear-gradient(145deg,#fffffffa,#fff8e7fc);border:1px solid rgba(44,62,80,.15);border-radius:16px;padding:24px;box-shadow:0 20px 60px #2c3e5040,0 0 0 1px #ffffff80 inset;animation:cardGather .4s cubic-bezier(.34,1.56,.64,1) forwards,cardTumbleFall 1.8s cubic-bezier(.55,.055,.675,.19) forwards;animation-delay:var(--gather-delay, 0s),var(--tumble-delay, .6s);opacity:0}.tumble-card:nth-child(1){top:30%;left:15%;--tumble-rotation: -15deg;--tumble-rotation-end: -400deg;--tumble-x-end: -250px;transform-origin:left center}.tumble-card:nth-child(2){top:25%;right:15%;left:auto;--tumble-rotation: 12deg;--tumble-rotation-end: 380deg;--tumble-x-end: 200px;transform-origin:right center}.tumble-card:nth-child(3){top:45%;left:25%;--tumble-rotation: -8deg;--tumble-rotation-end: -320deg;--tumble-x-end: -180px;transform-origin:center top}.tumble-card:nth-child(4){top:40%;right:20%;left:auto;--tumble-rotation: 18deg;--tumble-rotation-end: 450deg;--tumble-x-end: 280px;transform-origin:right bottom}.tumble-card:nth-child(5){top:55%;left:10%;--tumble-rotation: -20deg;--tumble-rotation-end: -500deg;--tumble-x-end: -300px;transform-origin:left top}.tumble-card:nth-child(6){top:50%;right:10%;left:auto;--tumble-rotation: 10deg;--tumble-rotation-end: 300deg;--tumble-x-end: 150px;transform-origin:center bottom}.tumble-card:nth-child(7){top:35%;left:50%;transform:translate(-50%);--tumble-rotation: -5deg;--tumble-rotation-end: -280deg;--tumble-x-end: -100px}.tumble-card .tumble-card-title{font-size:14px;font-weight:700;margin:0 0 8px;color:#2c3e50}.tumble-card .tumble-card-location{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#5dade2;margin-bottom:4px}.story-demo.is-ending .story-beat:not(.final-beat){opacity:0;transition:opacity .3s ease}.story-spacer{height:50vh}.story-ending-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:400;padding:24px;animation:fadeInOverlay 1.5s ease-out forwards}.ending-bg-effect{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(231,76,60,.1) 0%,transparent 50%),linear-gradient(180deg,#fff8e7f7,#f5deb3fa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.story-ending-content{position:relative;z-index:1;text-align:center;max-width:520px;animation:slideUpContent 1s ease-out .3s forwards;opacity:0;transform:translateY(40px)}@keyframes slideUpContent{to{opacity:1;transform:translateY(0)}}.ending-status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:4px;text-transform:uppercase;margin-bottom:20px;padding:10px 24px;border-radius:30px;background:#2c3e500d;border:1px solid rgba(44,62,80,.1)}.ending-status.negative,.ending-status.severe{color:#c0392b;border-color:#c0392b4d;background:#c0392b1a}.ending-status.positive{color:#27ae60;border-color:#27ae604d;background:#27ae601a}.ending-title{font-size:clamp(32px,6vw,48px);font-weight:800;margin:0 0 20px;line-height:1.1;color:#2c3e50}.ending-description{font-size:17px;line-height:1.7;color:#2c3e50b3;margin:0 0 24px}.ending-prompt{font-size:20px;font-style:italic;line-height:1.6;margin:0 0 32px;padding:24px;background:#ffffff08;border-left:3px solid rgba(231,76,60,.5);border-radius:0 12px 12px 0;text-align:left;opacity:.85}.ending-takeaways{background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:24px;margin-bottom:32px;text-align:left}.ending-takeaways h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;opacity:.4;margin:0 0 16px}.ending-takeaways ul{margin:0;padding:0;list-style:none}.ending-takeaways li{font-size:15px;line-height:1.6;padding:8px 0 8px 24px;position:relative;opacity:.8}.ending-takeaways li:before{content:"•";position:absolute;left:0;color:#48c9b0;font-size:20px;line-height:1.3}.ending-stats{display:flex;justify-content:center;gap:48px;margin-bottom:36px}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:36px;font-weight:800;line-height:1;color:#2c3e50}.stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#2c3e5080;margin-top:8px}.stat.safe .stat-value{color:#27ae60}.stat.risky .stat-value{color:#f39c12}.stat.dangerous .stat-value{color:#e74c3c}.playback-section{width:100%;max-width:380px;margin:0 auto 28px;padding:20px 24px;background:#2c3e500d;border-radius:16px;box-sizing:border-box}.playback-header-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#2c3e5080;margin-bottom:16px;text-align:center}.playback-track{position:relative;height:44px;margin:0 0 16px}.track-line{position:absolute;top:50%;left:20px;right:20px;height:4px;background:#2c3e5026;border-radius:2px;transform:translateY(-50%)}.track-fill{height:100%;background:linear-gradient(90deg,#5dade2,#48c9b0);border-radius:2px;transition:width .5s ease-out}.track-node{position:absolute;top:50%;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid rgba(44,62,80,.2);display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:1}.track-node.active{border-color:var(--node-color, #5DADE2);background:var(--node-color, #5DADE2)}.track-node.current{box-shadow:0 4px 15px #5dade266}.node-number{font-size:12px;font-weight:700;color:#2c3e5066;transition:color .3s ease}.track-node.active .node-number{color:#fff}.playback-choice-display{min-height:120px;display:flex;align-items:center;justify-content:center}.choice-card{width:100%;padding:20px;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;opacity:0;transform:translateY(10px);animation:fadeSlideIn .4s ease forwards}.choice-card.visible{opacity:1;transform:translateY(0)}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.choice-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.choice-scene-num{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:#2c3e5080}.choice-risk-badge{padding:4px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#fff}.choice-card-scenario{font-size:16px;font-weight:700;color:#2c3e50;margin-bottom:8px}.choice-card-text{font-size:14px;color:#2c3e50b3;font-style:italic;line-height:1.5}.playback-complete-card{width:100%;padding:24px;background:linear-gradient(135deg,#2c3e500d,#2c3e5005);border-radius:12px;border:2px dashed rgba(44,62,80,.15);text-align:center;opacity:0;animation:fadeSlideIn .4s ease forwards}.playback-complete-card.visible{opacity:1}.complete-icon{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;background:#e74c3c;color:#fff;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center}.playback-complete-card:has(.complete-icon:first-child) .complete-icon{background:#e74c3c}.complete-text{font-size:16px;font-weight:600;color:#2c3e50}.replay-btn{margin-top:16px;padding:10px 24px;border:none;border-radius:25px;background:#2c3e5014;color:#2c3e50b3;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.replay-btn:hover{background:#2c3e501f;color:#2c3e50e6}.ending-cta{font-size:18px;line-height:1.7;color:#2c3e50cc;margin:0 0 32px}.ending-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.ending-btn{padding:16px 36px;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;letter-spacing:.5px}.ending-btn.primary{background:linear-gradient(135deg,#48c9b0,#27ae60);color:#fff;box-shadow:0 8px 30px #48c9b04d}.ending-btn.primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px #48c9b066}.ending-btn.secondary{background:#ffffff0d;color:#fff;border:1px solid rgba(255,255,255,.15)}.ending-btn.secondary:hover{background:#ffffff1a}@media(max-width:768px){.story-back-btn{top:16px;left:16px;padding:8px 16px;font-size:13px}.story-hero{padding:100px 20px 60px}.story-title{font-size:48px}.story-subtitle{font-size:18px;margin-bottom:36px}.story-preview-cards{height:140px;margin-bottom:40px}.preview-card{width:90px;height:120px}.story-section{padding:60px 16px}.story-card{max-width:100%}.story-card-inner{min-height:320px}.story-card-front,.story-card-back{padding:28px}.story-card-title{font-size:26px}.story-card-description{font-size:16px}.story-choice-text{font-size:19px}.ending-title{font-size:32px}.ending-prompt{font-size:17px;padding:20px}.ending-stats{gap:24px;flex-wrap:wrap}.stat-value{font-size:24px}.ending-actions{flex-direction:column}.ending-btn{width:100%}.playback-section{padding:16px}.track-node{width:28px;height:28px}.node-number{font-size:10px}.choice-card{padding:16px}.choice-card-scenario{font-size:14px}.choice-card-text{font-size:13px}}