*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f0f23;min-height:100vh}#root{width:100%;min-height:100vh;position:relative;display:block}canvas{display:block}.three-heart-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}.three-heart-background canvas{display:block}.petals-rain{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;pointer-events:none;opacity:.6}.petals-rain canvas{display:block;width:100%;height:100%}.timeline{width:100%;min-height:100vh;overflow-y:auto;padding:120px 20px 40px;box-sizing:border-box}.timeline-container{position:relative;width:100%;height:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;max-width:1200px;margin:0 auto}.timeline-line{position:absolute;left:50%;top:87px;bottom:0;width:2px;background:linear-gradient(to top,transparent,#ff6699,#ff99cc);transform:translate(-50%)}.timeline-line:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid #ff99cc}.timeline-heart-arrow{width:14px;height:14px;display:block;position:absolute;left:0;top:0;background:#f9c}.timeline-heart-arrow:before,.timeline-heart-arrow:after{content:"";position:absolute;width:14px;height:14px;background:#f9c;border-radius:50%}.timeline-heart-arrow:before{top:-7px;left:0}.timeline-heart-arrow:after{top:0;left:7px}.timeline-heart-arrow{transform:rotate(135deg) translate(1px) translateY(7px);transform-origin:center}.timeline-stage-marker{position:absolute;left:50%;transform:translate(-50%);width:180px;height:40px;display:flex;justify-content:center;align-items:center;z-index:15;margin-top:-20px}.timeline-stage-label{background:linear-gradient(135deg,#f696,#f9c6);color:#fff;padding:6px 16px;border-radius:15px;font-size:13px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.3);border:1px solid rgba(255,102,153,.5);box-shadow:0 2px 10px #ff66994d;white-space:nowrap}.timeline-items{position:relative;width:100%;z-index:5}.timeline-item{position:relative;margin:40px 0;padding:0 60px;cursor:pointer;transition:all .3s ease}.timeline-item:hover .timeline-content{transform:scale(1.02)}.timeline-item.selected .timeline-content{transform:scale(1.05)}@media (min-width: 769px){.timeline-item.left{text-align:right;margin-right:50%}.timeline-item.right{text-align:left;margin-left:50%}.timeline-item.right .timeline-dot{left:0}.timeline-item.left .timeline-dot{right:-12px}}.timeline-dot{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#f69;border:2px solid #fff;box-shadow:0 0 10px #ff669980;z-index:10}.timeline-item.male .timeline-dot{background:#6cf;box-shadow:0 0 10px #66ccff80}.timeline-item.female .timeline-dot{background:#f69;box-shadow:0 0 10px #ff669980}.timeline-item.selected .timeline-dot{transform:translate(-50%,-50%) scale(1.5)}.timeline-content{display:inline-block;text-align:center;background:linear-gradient(135deg,#f693,#f9c3);padding:20px 30px;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,102,153,.3);box-shadow:0 4px 15px #f693;transition:all .3s ease}.timeline-item.selected .timeline-content{background:linear-gradient(135deg,#f696,#f9c6);border-color:#f699;box-shadow:0 6px 25px #f696}.timeline-item:hover .timeline-content{background:linear-gradient(135deg,#ff66994d,#ff99cc4d);border-color:#ff669980}.timeline-item.male .timeline-content{background:linear-gradient(135deg,#6cf3,#9cf3);border:1px solid rgba(102,204,255,.3);box-shadow:0 4px 15px #6cf3}.timeline-item.male.selected .timeline-content{background:linear-gradient(135deg,#6cf6,#9cf6);border-color:#6cf9;box-shadow:0 6px 25px #6cf6}.timeline-item.male:hover .timeline-content{background:linear-gradient(135deg,#66ccff4d,#99ccff4d);border-color:#66ccff80}.timeline-item.female .timeline-content{background:linear-gradient(135deg,#f693,#f9c3);border:1px solid rgba(255,102,153,.3);box-shadow:0 4px 15px #f693}.timeline-item.female.selected .timeline-content{background:linear-gradient(135deg,#f696,#f9c6);border-color:#f699;box-shadow:0 6px 25px #f696}.timeline-item.female:hover .timeline-content{background:linear-gradient(135deg,#ff66994d,#ff99cc4d);border-color:#ff669980}.timeline-item.left .timeline-content:after{content:"";position:absolute;right:-35px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.timeline-item.right .timeline-content:after{content:"";position:absolute;left:-35px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent}.timeline-item.male.left .timeline-content:after{border-left:20px solid rgba(102,204,255,.3)}.timeline-item.male.right .timeline-content:after{border-right:20px solid rgba(102,204,255,.3)}.timeline-item.female.left .timeline-content:after{border-left:20px solid rgba(255,102,153,.3)}.timeline-item.female.right .timeline-content:after{border-right:20px solid rgba(255,102,153,.3)}.timeline-icon{display:flex;justify-content:center;align-items:center;width:50px;height:50px;margin:0 auto 10px;background:linear-gradient(135deg,#f69,#f9c);border-radius:50%;box-shadow:0 2px 10px #ff66994d}.timeline-item.male .timeline-icon{background:linear-gradient(135deg,#6cf,#9cf);box-shadow:0 2px 10px #66ccff4d}.timeline-item.female .timeline-icon{background:linear-gradient(135deg,#f69,#f9c);box-shadow:0 2px 10px #ff66994d}.timeline-icon svg{width:28px;height:28px;fill:#fff}.timeline-date{font-size:14px;color:#fffc;margin-bottom:8px}.timeline-title{font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}@keyframes pulse{0%,to{box-shadow:0 4px 15px #f693}50%{box-shadow:0 4px 25px #f696}}@media (max-width: 768px){.timeline-line{left:30px}.timeline-item{padding:0 0 0 70px;text-align:left!important}.timeline-dot{left:10px;right:auto;transform:translate(-50%,-50%)}.timeline-stage-marker{left:10px;transform:translate(-50%)}.timeline-item.left .timeline-content:after,.timeline-item.right .timeline-content:after{left:-20px;right:auto;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:none}.timeline-item.male.left .timeline-content:after,.timeline-item.male.right .timeline-content:after{border-right:20px solid rgba(102,204,255,.3);border-left:none}.timeline-item.female.left .timeline-content:after,.timeline-item.female.right .timeline-content:after{border-right:20px solid rgba(255,102,153,.3);border-left:none}.timeline-title{font-size:18px}}.top-control-panel{position:absolute;top:0;left:0;right:0;height:80px;background:#0f0f2399;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,102,153,.2);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:20}.music-control{display:flex;align-items:center;gap:12px}.music-button{width:40px;height:40px;border:1px solid rgba(255,102,153,.3);background:#ff66991a;color:#f69;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.music-button:hover{background:#f693;border-color:#ff669980;transform:scale(1.1)}.music-button.playing{background:#f693;border-color:#ff669980}.music-label{font-size:14px;color:#ffffffb3;font-weight:500}.future-stage-label{display:flex;justify-content:center;align-items:center}.future-stage-marker{position:relative;background:linear-gradient(135deg,#ff66994d,#ff99cc4d);border:1px solid rgba(255,102,153,.5);border-radius:20px;padding:8px 24px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 2px 10px #f693}.future-stage-text{font-size:16px;font-weight:700;color:#f9c;text-shadow:0 1px 3px rgba(0,0,0,.3);letter-spacing:2px;display:flex;align-items:center;gap:8px}.future-stage-text:before,.future-stage-text:after{content:"";display:inline-block;width:8px;height:8px;background:linear-gradient(135deg,#f69,#f9c);border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.add-node-control{display:flex;align-items:center}.add-node-button{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid rgba(255,102,153,.3);background:#ff66991a;color:#f69;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.add-node-button:hover{background:#f693;border-color:#ff669980;transform:translateY(-2px);box-shadow:0 4px 12px #ff66994d}.add-node-button svg{transition:transform .3s ease}.add-node-button:hover svg{transform:rotate(90deg)}@media (max-width: 768px){.top-control-panel{height:70px;padding:0 20px}.music-control{display:none}.music-button{width:36px;height:36px}.music-button svg{width:20px;height:20px}.music-label{font-size:12px}.future-stage-text{font-size:14px;letter-spacing:1px}.future-stage-marker{padding:6px 20px}.add-node-button{padding:8px 16px;font-size:12px}.add-node-button svg{width:20px;height:20px}.add-node-button span{display:none}}.control-panel{width:100%;padding:20px;background:linear-gradient(135deg,#0f0f23f2,#111111f2);border-top:1px solid rgba(255,102,153,.3);box-shadow:0 -4px 20px #0000004d}.control-content{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:20px;justify-content:center}.control-heart{font-size:24px;animation:heartbeat 1s ease-in-out infinite;flex-shrink:0}.control-switch{flex-shrink:0}.switch-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.switch-input{display:none}.switch-slider{position:relative;width:50px;height:26px;background:#ff66994d;border-radius:13px;transition:all .3s ease;border:1px solid rgba(255,102,153,.4)}.switch-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:all .3s ease}.switch-input:checked+.switch-slider{background:linear-gradient(135deg,#f69,#f9c);border-color:#f699}.switch-input:checked+.switch-slider:before{transform:translate(24px)}.switch-text{color:#fff;font-size:14px;font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.3)}.control-slider-container{flex:1;min-width:200px}.control-slider{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,#ff66994d,#ff99cc80);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f69,#f9c);cursor:pointer;box-shadow:0 2px 8px #ff669980;transition:transform .2s ease}.control-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.control-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#f69,#f9c);cursor:pointer;border:none;box-shadow:0 2px 8px #ff669980;transition:transform .2s ease}.control-slider::-moz-range-thumb:hover{transform:scale(1.2)}.control-value{flex-shrink:0;display:flex;align-items:baseline;gap:5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3);min-width:100px;justify-content:flex-end}.value-number{font-size:24px;font-weight:700;color:#f69;min-width:45px;text-align:right}.value-unit{font-size:12px;font-weight:500}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@media (max-width: 768px){.control-content{gap:15px}.control-heart{font-size:20px}.control-value{min-width:80px}.value-number{font-size:20px}.value-unit{font-size:10px}}.detail-panel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.detail-panel{position:relative;width:90%;max-width:800px;max-height:90vh;background:linear-gradient(135deg,#0f0f23f2,#111111f2);border-radius:20px;border:1px solid rgba(255,102,153,.3);box-shadow:0 10px 40px #ff66994d;overflow-y:auto;animation:slideIn .3s ease}.detail-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border:none;background:#f693;color:#fff;font-size:28px;font-weight:700;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1}.detail-close:hover{background:#f696;transform:rotate(90deg)}.detail-header{padding:40px 40px 20px;border-bottom:1px solid rgba(255,102,153,.2);display:flex;align-items:flex-start;gap:20px}.detail-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f693,#f9c3);border-radius:12px;border:1px solid rgba(255,102,153,.3)}.detail-icon svg{width:28px;height:28px;color:#f69}.detail-title-section{flex:1;min-width:0}.detail-date{font-size:14px;color:#ffffffb3;margin-bottom:10px}.detail-title{font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);margin:0;line-height:1.3}.detail-content{padding:30px 40px 40px}.detail-description{font-size:18px;line-height:1.8;color:#ffffffe6;margin-bottom:30px}.detail-time-diff{font-size:16px;line-height:1.6;color:#fffc;margin-bottom:20px;padding:12px 16px;background:#ffffff1a;border-radius:8px;border-left:4px solid #ff6699;font-weight:500}.detail-attachments{margin-top:20px}.detail-attachment *{max-width:100%}.attachments-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:20px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.attachments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.attachment-item{background:#ff66991a;border-radius:10px;overflow:hidden;border:1px solid rgba(255,102,153,.2)}.attachment-image{width:100%;height:auto;display:block;transition:transform .3s ease}.attachment-image:hover{transform:scale(1.05)}.attachment-caption{padding:15px;margin:0;font-size:14px;color:#fffc;text-align:center}@media (max-width: 768px){.detail-panel{width:95%;max-height:95vh}.detail-header{padding:30px 20px 15px;flex-direction:column;gap:15px}.detail-icon{width:40px;height:40px}.detail-icon svg{width:24px;height:24px}.detail-title{font-size:22px}.detail-content{padding:20px}.detail-description{font-size:16px}.attachments-grid{grid-template-columns:1fr}}.add-node-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.add-node-panel{position:relative;width:90%;max-width:600px;max-height:90vh;background:linear-gradient(135deg,#0f0f23fa,#111111fa);border-radius:20px;border:1px solid rgba(255,102,153,.3);box-shadow:0 10px 40px #ff66994d;overflow-y:auto;animation:slideIn .3s ease}.add-node-header{padding:30px 30px 20px;border-bottom:1px solid rgba(255,102,153,.2);display:flex;justify-content:space-between;align-items:center}.add-node-header h3{font-size:24px;font-weight:700;color:#fff;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.3)}.add-node-close{width:36px;height:36px;border:none;background:#f693;color:#fff;font-size:24px;font-weight:700;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1}.add-node-close:hover{background:#f696;transform:rotate(90deg)}.add-node-body{padding:30px}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:500;color:#fffc;margin-bottom:8px}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;background:#ff66991a;border:1px solid rgba(255,102,153,.3);border-radius:8px;color:#fff;font-size:14px;transition:all .3s ease;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#f699;background:#ff669926}.form-group input::placeholder,.form-group textarea::placeholder{color:#fff6}.form-group textarea{resize:vertical;min-height:80px}.form-group select{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ff6699' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}.upload-button{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1px dashed rgba(255,102,153,.5);background:#ff66991a;color:#f69;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.upload-button:hover{background:#f693;border-color:#ff6699b3}.upload-hint{margin-top:8px;font-size:12px;color:#ffffff80}.attachments-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}.attachment-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#ff66991a;border:1px solid rgba(255,102,153,.2);border-radius:8px}.attachment-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.attachment-type{font-size:12px;padding:2px 8px;background:#f693;border-radius:4px;color:#f9c;text-transform:uppercase;font-weight:500}.attachment-caption{font-size:13px;color:#fffc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-remove{width:24px;height:24px;border:none;background:#f693;color:#f69;font-size:18px;font-weight:700;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.attachment-remove:hover{background:#f696;transform:scale(1.1)}.add-node-footer{padding:20px 30px 30px;border-top:1px solid rgba(255,102,153,.2);display:flex;gap:12px;justify-content:flex-end}.add-node-footer button{padding:10px 24px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.btn-cancel{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff}.btn-cancel:hover{background:#fff3;border-color:#ffffff4d}.btn-save{background:linear-gradient(135deg,#f69,#f9c);border:none;color:#fff}.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f696}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@media (max-width: 768px){.add-node-panel{width:95%;max-height:95vh}.add-node-header{padding:20px}.add-node-header h3{font-size:20px}.add-node-body{padding:20px}.add-node-footer{padding:15px 20px 20px}}.app{width:100%;min-height:100vh;position:relative;background-color:#0f0f23;overflow:visible}.app-content{position:relative;width:100%;min-height:100vh;z-index:10;display:flex;flex-direction:column;pointer-events:none}.app-content>*{pointer-events:auto}.loading-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:20px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255,102,153,.2);border-top-color:#f69;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:#fffc;font-weight:500}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;padding:20px 30px;background:#f333;border:1px solid rgba(255,51,51,.5);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.error-message:before{content:"⚠️";font-size:32px}.error-message p{color:#ffffffe6;font-size:14px;margin:0}.error-message button{padding:8px 20px;background:#ff66994d;border:1px solid rgba(255,102,153,.5);border-radius:20px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.error-message button:hover{background:#ff669980;border-color:#ff6699b3}