.search-container{width:100%;max-width:800px;margin:2rem auto;padding:0 1rem}@media (max-width: 768px){.search-container{margin:1rem auto;padding:0 .5rem}}.search-input-wrapper{position:relative;margin-bottom:1.5rem}.search-input{width:100%;padding:.85rem 1.25rem;font-size:1rem;border:2px solid var(--color-border);border-radius:var(--border-radius-lg);background-color:var(--color-bg-secondary);color:var(--color-text-primary);transition:all .3s ease;box-shadow:var(--shadow-sm)}@media (max-width: 768px){.search-input{padding:.75rem 1rem;font-size:.95rem}}@media (max-width: 480px){.search-input{padding:.65rem .85rem;font-size:.9rem}}.search-input:focus{outline:none;border-color:var(--color-accent-primary);box-shadow:var(--shadow-accent)}.search-input:disabled{background-color:var(--color-bg-tertiary);cursor:not-allowed;opacity:.7}.clear-button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.25rem;color:var(--color-text-tertiary);cursor:pointer;padding:.25rem;border-radius:var(--border-radius-full);transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:28px;height:28px}.clear-button:hover{color:var(--color-text-secondary);background-color:var(--color-bg-tertiary);transform:translateY(-50%) scale(1.1)}.search-button{padding:.85rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background-color:var(--color-accent-primary);border:none;border-radius:var(--border-radius-lg);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-md);position:relative;overflow:hidden}@media (max-width: 768px){.search-button{padding:.75rem 1.25rem;font-size:.95rem}}@media (max-width: 480px){.search-button{padding:.65rem 1rem;font-size:.9rem;width:100%;margin-top:.5rem}}.search-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:.5s}.search-button:hover:not(:disabled):before{left:100%}.search-button:hover:not(:disabled){background-color:var(--color-accent-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.search-button:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-sm)}.search-button:disabled{background-color:var(--color-bg-tertiary);color:var(--color-text-tertiary);cursor:not-allowed;box-shadow:none}.error-message{padding:.85rem 1.25rem;background-color:var(--color-error-bg);border:1px solid var(--color-error);border-radius:var(--border-radius-md);color:var(--color-error);margin-bottom:1.25rem;display:flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-sm);font-weight:500}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--color-bg-secondary);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);max-height:300px;overflow-y:auto;z-index:10;border:1px solid var(--color-border)}@media (max-width: 768px){.search-results{max-height:250px}}@media (max-width: 480px){.search-results{max-height:200px}}.search-result{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--color-border)}@media (max-width: 768px){.search-result{padding:.6rem .85rem;gap:.6rem}}@media (max-width: 480px){.search-result{padding:.5rem .75rem;gap:.5rem}}.result-image{width:40px;height:40px;border-radius:var(--border-radius-md);object-fit:cover;box-shadow:var(--shadow-sm)}@media (max-width: 768px){.result-image{width:36px;height:36px}}.result-details h4{margin:0;font-size:.95rem;color:var(--color-text-primary);line-height:1.25;font-weight:500;margin-bottom:.25rem}.result-type{font-size:.8rem;color:var(--color-text-tertiary);text-transform:capitalize;font-weight:500}@media (max-width: 768px){.result-details h4{font-size:.9rem;margin-bottom:.2rem}.result-type{font-size:.75rem}}@media (max-width: 480px){.result-details h4{font-size:.85rem;margin-bottom:.15rem}.result-type{font-size:.7rem}}.search-input.loading{padding-right:3rem}.loading-indicator{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;border:2px solid var(--color-border);border-top-color:var(--color-accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}.pagination-buttons{display:flex;justify-content:space-between;margin-top:10px;gap:10px}.pagination-button{flex:1;padding:8px 12px;background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;justify-content:center;align-items:center}.pagination-button:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-border-hover)}.pagination-button:active{background-color:var(--color-bg-tertiary);transform:translateY(1px)}.pagination-button:disabled{background-color:var(--color-bg-tertiary);color:var(--color-text-tertiary);cursor:not-allowed;border-color:var(--color-border)}.chain-container{display:flex;flex-direction:row;align-items:center;padding:2rem;overflow-x:auto;max-width:100%;background-color:var(--color-bg-primary)}@media (max-width: 768px){.chain-container{padding:1rem .5rem;gap:.5rem}}.chain-container.success{animation:successPulse 2s infinite;display:flex;justify-content:center;align-items:center;background-color:var(--color-bg-primary);width:100%;padding:2rem;position:relative;overflow-x:auto}.chain-container.success:after{content:"";position:fixed;bottom:0;left:0;right:0;height:40px;background:repeating-linear-gradient(90deg,var(--color-success) 0px,var(--color-success) 20px,transparent 20px,transparent 40px);animation:celebrate 1s linear infinite;opacity:.3;z-index:1000}.chain-container.success:before{content:"🎉";position:fixed;bottom:10px;left:0;font-size:24px;animation:bounce .5s ease-in-out infinite alternate;z-index:1000}.chain-container.success .chain-node{border-color:var(--color-success);box-shadow:var(--shadow-success);transform:scale(1.1);animation:nodeSuccess .5s ease-out}.chain-container.success .connection-line{background-color:var(--color-success)}.chain-container.success .connection-line:before,.chain-container.success .connection-line:after{background-color:var(--color-success)}@keyframes successPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 10px #10b98100}to{box-shadow:0 0 #10b98100}}@keyframes celebrate{0%{background-position:0 0}to{background-position:40px 0}}@keyframes bounce{0%{transform:translateY(0) rotate(0)}to{transform:translateY(-10px) rotate(20deg)}}@keyframes nodeSuccess{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.2) rotate(5deg)}to{transform:scale(1.1) rotate(0);opacity:1}}.chain-left,.chain-right{display:flex;flex-direction:row;align-items:center;flex:1;position:relative;height:100%}@media (max-width: 768px){.chain-left,.chain-right{gap:.5rem}}.chain-right{justify-content:flex-end}.chain-item{position:relative;transition:all .3s ease;z-index:1;display:flex;align-items:center}.chain-left .chain-item,.chain-right .chain-item{margin-top:0}.chain-left .chain-item:nth-child(1){z-index:1}.chain-left .chain-item:nth-child(2){z-index:2}.chain-left .chain-item:nth-child(3){z-index:3}.chain-left .chain-item:nth-child(4){z-index:4}.chain-left .chain-item:nth-child(5){z-index:5}.chain-left .chain-item:nth-child(6){z-index:6}.chain-right .chain-item:nth-child(1){z-index:6}.chain-right .chain-item:nth-child(2){z-index:5}.chain-right .chain-item:nth-child(3){z-index:4}.chain-right .chain-item:nth-child(4){z-index:3}.chain-right .chain-item:nth-child(5){z-index:2}.chain-right .chain-item:nth-child(6){z-index:1}.chain-item:last-child{margin-right:0}.chain-item:first-child{margin-left:0}.chain-container.success .chain-item{position:relative;margin-right:20px}.chain-container.success .chain-item:nth-child(1){z-index:1}.chain-container.success .chain-item:nth-child(2){z-index:2}.chain-container.success .chain-item:nth-child(3){z-index:3}.chain-container.success .chain-item:nth-child(4){z-index:4}.chain-container.success .chain-item:nth-child(5){z-index:5}.chain-container.success .chain-item:nth-child(6){z-index:6}.chain-container.success .chain-item:nth-child(7){z-index:7}.chain-container.success .chain-item:nth-child(8){z-index:8}.chain-container.success .chain-item:nth-child(9){z-index:9}.chain-container.success .chain-item:nth-child(10){z-index:10}.chain-container.success .chain-item:last-child{margin-right:0}@media (max-width: 768px){.chain-item{gap:.5rem}}.chain-node{display:flex;flex-direction:column;align-items:center;padding:1.25rem;border-radius:var(--border-radius-lg);background-color:var(--color-bg-secondary);box-shadow:var(--shadow-md);cursor:pointer;transition:all .3s ease;min-width:200px;border:1px solid var(--color-border);position:relative;overflow:hidden}@media (max-width: 768px){.chain-node{padding:.75rem;min-width:120px}}@media (max-width: 480px){.chain-node{padding:.5rem;min-width:100px}}.chain-node:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}@media (max-width: 768px){.chain-node:hover{transform:none}}.chain-node.movie{border-left:4px solid var(--color-accent-primary)}.chain-node.actor{border-left:4px solid var(--color-accent-secondary)}.chain-node:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--color-accent-primary),var(--color-accent-secondary));opacity:0;transition:opacity .3s ease}.chain-node:hover:before{opacity:1}.node-image{width:100px;height:100px;object-fit:cover;border-radius:var(--border-radius-md);margin-bottom:1rem;background-color:var(--color-bg-tertiary);box-shadow:var(--shadow-sm);transition:transform .3s ease}@media (max-width: 768px){.node-image{width:90px;height:90px;margin-bottom:.75rem}.node-image.movie{width:60px;height:90px}}@media (max-width: 480px){.node-image{width:70px;height:70px;margin-bottom:.5rem}.node-image.movie{width:46px;height:70px}}.chain-node:hover .node-image{transform:scale(1.05)}@media (max-width: 768px){.chain-node:hover .node-image{transform:none}}.node-image.movie{width:100px;height:100px;object-fit:cover}.node-image.actor{width:100px;height:100px;border-radius:.5rem}.node-image-placeholder{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-tertiary);border-radius:var(--border-radius-md);margin-bottom:1rem;font-size:2rem;color:var(--color-text-tertiary)}@media (max-width: 768px){.node-image-placeholder{width:90px;height:90px;margin-bottom:.75rem;font-size:1.5rem}.node-image-placeholder.movie{width:60px;height:90px}}@media (max-width: 480px){.node-image-placeholder{width:70px;height:70px;margin-bottom:.5rem;font-size:1.25rem}.node-image-placeholder.movie{width:46px;height:70px}}.node-image-placeholder.movie{width:100px;height:100px}.node-image-placeholder.actor{width:100px;height:100px;border-radius:.5rem}.node-details{text-align:center;width:100%}.node-details h3{margin:0;font-size:1.1rem;color:var(--color-text-primary);font-weight:600;margin-bottom:.25rem;transition:color .3s ease}.node-details .year{font-size:.875rem;color:var(--color-text-tertiary);font-weight:500}@media (max-width: 768px){.node-details h3{font-size:.9rem;margin-bottom:.15rem}.node-details .year{font-size:.75rem}}@media (max-width: 480px){.node-details h3{font-size:.8rem;margin-bottom:.1rem}.node-details .year{font-size:.7rem}}.chain-connection{position:relative;z-index:2;display:flex;align-items:center;margin:0 -20px;padding:0 10px}.connection-line{width:40px;height:3px;background-color:var(--color-accent-tertiary);position:relative;border-radius:var(--border-radius-full)}@media (max-width: 768px){.chain-connection{margin:0 -15px;padding:0 5px}.connection-line{width:30px;height:2px}}@media (max-width: 480px){.chain-connection{margin:0 -10px;padding:0 3px}.connection-line{width:20px}}.chain-container.success .connection-line{background-color:#10b981}.connection-line:before,.connection-line:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background-color:var(--color-accent-tertiary);top:50%;transform:translateY(-50%);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.connection-line:before,.connection-line:after{width:6px;height:6px}}@media (max-width: 480px){.connection-line:before,.connection-line:after{width:4px;height:4px}}.connection-line:before{left:-4px}.connection-line:after{right:-4px}.connection-label{font-size:.75rem;color:var(--color-text-tertiary);white-space:nowrap;font-weight:500}@media (max-width: 768px){.connection-label{font-size:.7rem}}.chain-page{display:flex;flex-direction:column;gap:2rem;padding:2rem;max-width:100%;background-color:var(--color-bg-primary)}@media (max-width: 768px){.chain-page{padding:1rem;gap:1rem}}.search-container{position:relative;width:100%;max-width:600px;margin:0 auto}.search-input{width:100%;padding:1rem 1.25rem;font-size:1.1rem;border:2px solid var(--color-border);border-radius:var(--border-radius-lg);outline:none;transition:all .3s ease;background-color:var(--color-bg-secondary);color:var(--color-text-primary);box-shadow:var(--shadow-sm)}@media (max-width: 768px){.search-input{padding:.75rem 1rem;font-size:1rem}}.search-input:focus{border-color:var(--color-accent-primary);box-shadow:var(--shadow-accent)}.search-results{position:absolute;top:100%;left:0;right:0;background:var(--color-bg-secondary);border-radius:var(--border-radius-md);box-shadow:var(--shadow-lg);margin-top:.5rem;max-height:400px;overflow-y:auto;z-index:10;border:1px solid var(--color-border)}@media (max-width: 768px){.search-results{max-height:300px}}@media (max-width: 480px){.search-results{max-height:250px}}.search-result{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--color-border)}@media (max-width: 768px){.search-result{padding:.5rem .75rem;gap:.75rem}}.search-result:last-child{border-bottom:none}.search-result:hover{background-color:var(--color-bg-tertiary)}.result-image{width:48px;height:48px;border-radius:var(--border-radius-md);object-fit:cover;box-shadow:var(--shadow-sm)}@media (max-width: 768px){.result-image{width:40px;height:40px}}@media (max-width: 480px){.result-image{width:32px;height:32px}}.result-details{flex:1}.result-details h4{margin:0;font-size:1rem;color:var(--color-text-primary);font-weight:500}.result-type{font-size:.875rem;color:var(--color-text-tertiary);text-transform:capitalize;margin-top:.25rem}@media (max-width: 768px){.result-details h4{font-size:.9rem}.result-type{font-size:.8rem;margin-top:.15rem}}.loading{position:absolute;top:100%;left:0;right:0;padding:1rem;text-align:center;color:var(--color-text-tertiary);background-color:var(--color-bg-secondary);border-radius:var(--border-radius-md);margin-top:.5rem;box-shadow:var(--shadow-md)}.error{position:absolute;top:100%;left:0;right:0;padding:1rem;text-align:center;color:var(--color-error);background-color:var(--color-error-bg);border-radius:var(--border-radius-md);margin-top:.5rem;box-shadow:var(--shadow-md)}.chain-node-wrapper{position:relative;z-index:1}.remove-node{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:var(--border-radius-full);background:var(--color-error);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;opacity:0;transition:all .3s ease;box-shadow:var(--shadow-md);z-index:5}@media (max-width: 768px){.remove-node{opacity:.8;width:20px;height:20px;font-size:14px;top:-8px;right:-8px}}.chain-node-wrapper:hover .remove-node{opacity:1;transform:scale(1.1)}.remove-node:hover{background:var(--color-error-hover);transform:scale(1.2)}@media (max-width: 380px){.chain-container{flex-direction:column;align-items:stretch}.chain-left,.chain-right{flex-direction:column;align-items:center}.chain-item{flex-direction:column;width:100%}.chain-connection{transform:rotate(90deg);margin:.5rem 0}.chain-node{min-width:0;width:100%;flex-direction:row;justify-content:flex-start;padding:.5rem;gap:.75rem}.node-image,.node-image.movie,.node-image.actor{width:50px;height:50px;margin-bottom:0}.node-details{text-align:left}}.guess-counter-container{display:flex;flex-direction:column;gap:6px;margin:16px auto;align-items:center}@media (max-width: 768px){.guess-counter-container{margin:12px auto;gap:5px}}.guess-counter{padding:8px 16px;border-radius:var(--border-radius-full);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;min-width:170px;justify-content:space-between;box-shadow:var(--shadow-md);transition:all .3s ease;position:relative;overflow:hidden}@media (max-width: 768px){.guess-counter{padding:6px 12px;font-size:13px;min-width:150px;gap:6px}}@media (max-width: 480px){.guess-counter{padding:5px 10px;font-size:12px;min-width:130px;gap:5px}}.guess-counter:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ffffff1a,#fff0);z-index:1}.guess-counter.total{background:linear-gradient(to right,var(--color-accent-primary),var(--color-accent-tertiary));color:#fff}.guess-counter.invalid{background:linear-gradient(to right,var(--color-error),var(--color-error-hover));color:#fff}.guess-counter:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.guess-count{background:#fff3;padding:2px 10px;border-radius:var(--border-radius-md);font-weight:600;min-width:24px;text-align:center;position:relative;z-index:2;box-shadow:var(--shadow-inner)}@media (max-width: 768px){.guess-count{padding:2px 8px;min-width:20px}}@media (max-width: 480px){.guess-count{padding:1px 6px;min-width:18px}}.guess-counter span:not(.guess-count){opacity:.95;font-weight:500;position:relative;z-index:2}.chain-builder{display:flex;flex-direction:column;height:100vh;background-color:var(--color-bg-primary);transition:background-color .3s ease}.header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--color-border);position:relative;background-color:var(--color-bg-secondary);box-shadow:var(--shadow-sm)}.search-area{flex:1;display:flex;justify-content:center;margin:0 auto;max-width:800px}.guess-counter{margin-left:20px}.solution-button{margin-left:20px;padding:.5rem 1rem;background-color:var(--color-accent-primary);color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;font-weight:500;transition:background-color .2s ease}.solution-button:hover:not(:disabled){background-color:var(--color-accent-hover)}.solution-button:disabled{background-color:var(--color-bg-tertiary);cursor:not-allowed}.solution-display{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-bg-secondary);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);z-index:1000;max-width:90%;width:500px}.solution-display h4{margin:0 0 1rem;color:var(--color-text-primary);font-size:1.25rem}.solution-display p{margin:0 0 1.5rem;color:var(--color-text-primary);font-size:1.1rem;line-height:1.5}.close-solution{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;font-size:1.25rem;padding:.25rem;line-height:1;border-radius:var(--border-radius-sm)}.close-solution:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.error-message{position:fixed;top:1rem;left:50%;transform:translate(-50%);background-color:var(--color-error-bg);color:var(--color-error);padding:.75rem 1rem;border-radius:var(--border-radius-md);text-align:center;max-width:90%;width:500px;z-index:1000}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.chain-builder-connection-failed{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both;position:relative}@keyframes subtle-pulse{0%{box-shadow:0 0 #3b82f600}50%{box-shadow:0 0 10px #3b82f61a}to{box-shadow:0 0 #3b82f600}}.chain-container:not(.success):hover{animation:subtle-pulse 2s infinite}@media (max-width: 768px){.header{padding:15px 10px;flex-wrap:wrap}.search-area{width:100%;margin-bottom:10px}.guess-counter{margin-left:0;margin-right:10px}.solution-button{margin-left:0}.theme-toggle{bottom:1rem;right:1rem;width:2.5rem;height:2.5rem}}@media (max-width: 480px){.theme-toggle{bottom:.75rem;right:.75rem;width:2.25rem;height:2.25rem}}.demo-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.demo-modal{background:var(--color-bg-secondary);border-radius:var(--border-radius-lg);padding:2.5rem;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-xl);border:1px solid var(--color-border);animation:slideUp .3s ease;color:var(--color-text-primary)}@media (max-width: 768px){.demo-modal{padding:2rem 1.5rem;width:95%}}@media (max-width: 480px){.demo-modal{padding:1.5rem 1rem;width:98%}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.demo-modal-close{position:absolute;top:1rem;right:1rem;background:var(--color-bg-tertiary);border:none;font-size:1.25rem;cursor:pointer;color:var(--color-text-tertiary);width:36px;height:36px;border-radius:var(--border-radius-full);display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:var(--shadow-sm)}.demo-modal-close:hover{color:var(--color-text-primary);background-color:var(--color-bg-tertiary);transform:rotate(90deg)}.demo-modal-content{text-align:center}.demo-modal-content h2{margin-bottom:1.5rem;color:var(--color-text-primary);font-size:1.75rem;font-weight:600;position:relative;display:inline-block;padding-bottom:.5rem}@media (max-width: 768px){.demo-modal-content h2{font-size:1.5rem;margin-bottom:1.25rem}}@media (max-width: 480px){.demo-modal-content h2{font-size:1.25rem;margin-bottom:1rem}}.demo-modal-content h2:after{content:"";position:absolute;bottom:0;left:25%;right:25%;height:3px;background:linear-gradient(to right,var(--color-accent-primary),var(--color-accent-secondary));border-radius:var(--border-radius-full)}.demo-modal-image{margin:2rem 0;border-radius:var(--border-radius-md);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border);transition:transform .3s ease}.demo-modal-image:hover{transform:scale(1.02)}.demo-modal-image img{width:100%;height:auto;display:block}.demo-modal-content p{color:var(--color-text-secondary);line-height:1.7;margin-bottom:2rem;font-size:1.05rem}@media (max-width: 768px){.demo-modal-content p{font-size:1rem;line-height:1.6;margin-bottom:1.5rem}}@media (max-width: 480px){.demo-modal-content p{font-size:.95rem;line-height:1.5;margin-bottom:1.25rem}}.demo-modal-navigation{display:flex;justify-content:space-between;align-items:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}@media (max-width: 768px){.demo-modal-navigation{margin-top:2rem;padding-top:1.25rem}}@media (max-width: 480px){.demo-modal-navigation{margin-top:1.5rem;padding-top:1rem;flex-direction:column;gap:1rem}.demo-modal-navigation button{width:100%}.demo-step-indicator{order:-1;margin-bottom:.5rem}}.demo-modal-navigation button{background-color:var(--color-accent-primary);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:var(--border-radius-md);cursor:pointer;font-weight:600;transition:all .3s ease;box-shadow:var(--shadow-md);position:relative;overflow:hidden}.demo-modal-navigation 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:.5s}.demo-modal-navigation button:hover:not(:disabled):before{left:100%}.demo-modal-navigation button:hover:not(:disabled){background-color:var(--color-accent-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.demo-modal-navigation button:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-sm)}.demo-modal-navigation button:disabled{background-color:var(--color-bg-tertiary);color:var(--color-text-tertiary);cursor:not-allowed;box-shadow:none}.demo-step-indicator{color:var(--color-text-tertiary);font-size:.95rem;font-weight:500;background-color:var(--color-bg-tertiary);padding:.5rem 1rem;border-radius:var(--border-radius-full)}:root{margin:0;padding:0;box-sizing:border-box;--color-bg-primary: #ffffff;--color-bg-secondary: #f9fafb;--color-bg-tertiary: #f3f4f6;--color-text-primary: #1f2937;--color-text-secondary: #4b5563;--color-text-tertiary: #6b7280;--color-border: #e5e7eb;--color-accent-primary: #3b82f6;--color-accent-primary-hover: #2563eb;--color-accent-secondary: #f63b64;--color-accent-tertiary: #6366f1;--color-success: #10b981;--color-error: #ef4444;--color-error-hover: #dc2626;--color-error-bg: #fee2e2;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 6px rgba(0, 0, 0, .1);--shadow-xl: 0 10px 15px rgba(0, 0, 0, .1);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .05);--shadow-success: 0 0 10px rgba(16, 185, 129, .3);--shadow-error: 0 0 10px rgba(239, 68, 68, .3);--shadow-accent: 0 0 10px rgba(59, 130, 246, .3);--border-radius-sm: .25rem;--border-radius-md: .5rem;--border-radius-lg: .75rem;--border-radius-xl: 1rem;--border-radius-full: 9999px}[data-theme=dark]{--color-bg-primary: #111827;--color-bg-secondary: #1f2937;--color-bg-tertiary: #374151;--color-text-primary: #f9fafb;--color-text-secondary: #e5e7eb;--color-text-tertiary: #d1d5db;--color-border: #374151;--color-accent-primary: #3b82f6;--color-accent-primary-hover: #60a5fa;--color-accent-secondary: #f63b64;--color-accent-tertiary: #6366f1;--color-success: #10b981;--color-error: #ef4444;--color-error-hover: #f87171;--color-error-bg: #7f1d1d;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 2px 4px rgba(0, 0, 0, .3);--shadow-lg: 0 4px 6px rgba(0, 0, 0, .3);--shadow-xl: 0 10px 15px rgba(0, 0, 0, .3);--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, .2);--shadow-success: 0 0 10px rgba(16, 185, 129, .5);--shadow-error: 0 0 10px rgba(239, 68, 68, .5);--shadow-accent: 0 0 10px rgba(59, 130, 246, .5)}html,body,#root{height:100vh;width:100vw;margin:0;padding:0;overflow:hidden;-webkit-overflow-scrolling:touch}*{-webkit-tap-highlight-color:transparent;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:var(--color-bg-primary);color:var(--color-text-primary);transition:background-color .3s ease,color .3s ease}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}.app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;background-color:var(--bg-primary)}@media (max-width: 768px){.app{padding:1rem}}h1{font-size:3.2em;line-height:1.1;margin-bottom:1rem;color:var(--color-text-primary)}@media (max-width: 768px){h1{font-size:2.5em}}@media (max-width: 480px){h1{font-size:2em}}.theme-toggle{position:fixed;bottom:1.5rem;right:1.5rem;width:3rem;height:3rem;border-radius:var(--border-radius-full);background-color:var(--color-accent-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);z-index:100;transition:all .2s ease;font-size:1.2rem}@media (max-width: 768px){.theme-toggle{bottom:1rem;right:1rem;width:2.5rem;height:2.5rem;font-size:1rem}}@media (max-width: 480px){.theme-toggle{bottom:.75rem;right:.75rem;width:2.25rem;height:2.25rem;font-size:.9rem}}.theme-toggle:hover{background-color:var(--color-accent-primary-hover);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.btn{padding:.5rem 1rem;border-radius:var(--border-radius-md);font-weight:500;cursor:pointer;transition:all .2s ease;border:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}@media (max-width: 768px){.btn{padding:.4rem .8rem;font-size:.9rem}}@media (max-width: 480px){.btn{padding:.35rem .7rem;font-size:.85rem}.app-header{padding:10px!important}.app-header button{font-size:.8rem!important;right:.5rem!important}}.btn-primary{background-color:var(--color-accent-primary);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background-color:var(--color-accent-primary-hover);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-secondary)}.btn-danger{background-color:var(--color-error);color:#fff}.btn-danger:hover{background-color:var(--color-error-hover)}.btn-sm{padding:.25rem .5rem;font-size:.875rem}.btn-lg{padding:.75rem 1.5rem;font-size:1.125rem}.btn-icon{width:2.5rem;height:2.5rem;padding:0;border-radius:var(--border-radius-full)}.btn:disabled{opacity:.7;cursor:not-allowed}