.tool-intro{background:linear-gradient(135deg,#00e5ff1a,#9200ff1a);border-radius:16px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.tool-intro h2{margin-top:0;color:var(--tech-primary);font-size:2rem;margin-bottom:1rem}.tool-description{font-size:1.1rem;line-height:1.6;color:var(--tech-text);margin-bottom:1.5rem}.feature-highlights{display:flex;gap:1rem;flex-wrap:wrap}.feature-item{display:flex;align-items:center;gap:.5rem;background:#00e5ff1a;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--tech-border)}.feature-icon{font-size:1.2rem}.tool-usage{background:var(--tech-surface);border-radius:12px;padding:2rem;margin:2rem 0;border:1px solid var(--tech-border)}.usage-steps{display:grid;gap:1.5rem;margin-top:1.5rem}.step{display:flex;gap:1rem;align-items:flex-start}.step-number{background:var(--tech-primary);color:#fff;width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0}.step-content h4{margin:0 0 .5rem;color:var(--tech-text)}.step-content p{margin:0;color:var(--tech-text-muted)}.pe-structure-overview{background:var(--tech-surface);border-radius:12px;padding:2rem;margin:2rem 0;border:1px solid var(--tech-border)}.structure-diagram{display:grid;gap:1rem;margin-top:1.5rem}.structure-level{display:grid;grid-template-columns:200px 1fr;gap:1rem;padding:1rem;background:#00e5ff0d;border-radius:8px;border-left:4px solid var(--tech-primary)}.level-header{font-weight:600;color:var(--tech-text)}.level-description{color:var(--tech-text-muted)}.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2rem}.component-card{background:var(--tech-surface);border-radius:12px;padding:1.5rem;border:1px solid var(--tech-border);transition:transform .3s ease,box-shadow .3s ease}.component-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00e5ff26}.component-icon{font-size:2rem;margin-bottom:1rem}.component-card h4{margin:0 0 1rem;color:var(--tech-text)}.component-card ul{margin:0;padding-left:1.2rem}.component-card li{color:var(--tech-text-muted);margin-bottom:.5rem}.features-showcase{margin:2rem 0}.feature-section{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.feature-section h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.feature-list{display:grid;gap:1rem}.feature-point{display:flex;gap:1rem;align-items:flex-start}.feature-bullet{color:var(--tech-primary);font-weight:600;font-size:1.1rem;flex-shrink:0;margin-top:.1rem}.feature-point span:last-child{color:var(--tech-text)}.supported-formats{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.format-tag{background:var(--tech-primary);color:#fff;padding:.3rem .8rem;border-radius:6px;font-family:Courier New,monospace;font-size:.9rem;font-weight:600}.format-note{color:var(--tech-text-muted);font-style:italic}.use-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:2rem 0}.use-case-category{background:var(--tech-surface);border-radius:12px;padding:2rem;border:1px solid var(--tech-border)}.use-case-category h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.case-list{display:grid;gap:1rem}.case-item{padding:1rem;background:#00e5ff0d;border-radius:8px;border-left:3px solid var(--tech-primary)}.case-item strong{color:var(--tech-text);display:block;margin-bottom:.3rem}.security-section{margin:2rem 0}.security-card{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border);text-align:center}.security-card.highlight{background:linear-gradient(135deg,#00e5ff1a,#9200ff1a);border-color:var(--tech-primary)}.security-icon{font-size:3rem;margin-bottom:1rem}.security-card h3{margin:0 0 1rem;color:var(--tech-text)}.security-features{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.security-item{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}.check-mark{color:#4caf50;font-weight:600;font-size:1.1rem;flex-shrink:0}.security-recommendations{background:var(--tech-surface);border-radius:12px;padding:2rem;border:1px solid var(--tech-border)}.security-recommendations h4{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.recommendation-list{display:grid;gap:1rem}.recommendation{padding:1rem;background:#ff98001a;border-radius:8px;border-left:3px solid #ff9800}.recommendation strong{color:var(--tech-text);display:block;margin-bottom:.3rem}.tech-implementation{margin:2rem 0}.tech-stack{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.tech-stack h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.tech-items{display:grid;gap:1.5rem}.tech-item{display:flex;gap:1rem;align-items:flex-start}.tech-icon{font-size:2rem;flex-shrink:0}.tech-content strong{color:var(--tech-text);display:block;margin-bottom:.5rem}.tech-content p{margin:0;color:var(--tech-text-muted)}.performance-metrics{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.performance-metrics h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.metric-card{text-align:center;padding:1.5rem;background:#00e5ff1a;border-radius:8px;border:1px solid var(--tech-border)}.metric-value{font-size:2rem;font-weight:700;color:var(--tech-primary);margin-bottom:.5rem}.metric-label{color:var(--tech-text-muted);font-size:.9rem}.algorithm-details{background:var(--tech-surface);border-radius:12px;padding:2rem;border:1px solid var(--tech-border)}.algorithm-details h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.algorithm-list{display:grid;gap:1rem}.algorithm-item{padding:1rem;background:#9200ff1a;border-radius:8px;border-left:3px solid var(--tech-secondary)}.algorithm-item strong{color:var(--tech-text);display:block;margin-bottom:.3rem}.faq-section{margin:2rem 0}.faq-item{background:var(--tech-surface);border-radius:12px;margin-bottom:1rem;border:1px solid var(--tech-border);overflow:hidden}.faq-question{padding:1.5rem;background:#00e5ff0d;border-bottom:1px solid var(--tech-border);display:flex;align-items:center;gap:1rem}.faq-icon{font-size:1.2rem;flex-shrink:0}.faq-question strong{color:var(--tech-text)}.faq-answer{padding:1.5rem;color:var(--tech-text-muted)}.faq-answer ul{margin:.5rem 0;padding-left:1.5rem}.faq-answer li{margin-bottom:.3rem}.faq-answer code{background:#00e5ff1a;padding:.2rem .4rem;border-radius:4px;font-family:Courier New,monospace}.resources-section{margin:2rem 0}.resource-category{background:var(--tech-surface);border-radius:12px;padding:2rem;margin-bottom:2rem;border:1px solid var(--tech-border)}.resource-category h3{margin-top:0;color:var(--tech-primary);margin-bottom:1.5rem}.resource-links{display:grid;gap:1rem}.resource-link{display:flex;gap:1rem;padding:1.5rem;background:#00e5ff0d;border-radius:8px;border:1px solid var(--tech-border);text-decoration:none;color:inherit;transition:all .3s ease}.resource-link:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00e5ff33;border-color:var(--tech-primary)}.link-icon{font-size:1.5rem;flex-shrink:0}.link-content strong{color:var(--tech-text);display:block;margin-bottom:.5rem}.link-content p{margin:0;color:var(--tech-text-muted);font-size:.9rem}.tool-recommendations{display:grid;gap:1rem}.tool-item{padding:1rem;background:#00e5ff0d;border-radius:8px;border-left:3px solid var(--tech-primary)}.tool-item strong{color:var(--tech-text);margin-right:.5rem}.book-list{display:grid;gap:1rem}.book-item{padding:1rem;background:#9200ff1a;border-radius:8px;border-left:3px solid var(--tech-secondary)}.book-item strong{color:var(--tech-text);margin-right:.5rem}@media (max-width: 768px){.feature-highlights{flex-direction:column}.usage-steps,.structure-level,.component-grid,.use-cases{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(2,1fr)}.tech-item,.resource-link{flex-direction:column;text-align:center}}@media (max-width: 480px){.tool-intro,.tool-usage,.pe-structure-overview,.feature-section,.use-case-category,.security-card,.tech-stack,.resource-category{padding:1.5rem}.metrics-grid{grid-template-columns:1fr}}
