:root{--primary: var(--comp-primary);--primary-dark: var(--comp-primary-dark);--border: var(--comp-border);--surface: var(--comp-surface);--shadow-soft: var(--comp-shadow);--surface-muted: #f8fafc;--text-main: var(--comp-muted-strong);--text-muted: var(--comp-muted);--comp-surface: #ffffff;--comp-border: #e2e8f0;--comp-muted: #5f6c7b;--comp-muted-strong: #1f2937;--comp-primary: #2563eb;--comp-primary-dark: #1e40af;--comp-accent: #16a34a;--comp-danger: #dc2626;--comp-info: #0ea5e9;--comp-radius: 24px;--comp-gradient: radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.18), transparent 60%), radial-gradient(circle at 80% 0, rgba(14, 165, 233, 0.18), transparent 45%);--comp-shadow: 0 20px 80px rgba(15, 23, 42, 0.12);--faq-bg: var(--surface);--faq-border: var(--border);--faq-question-text: var(--text-main);--faq-answer-text: var(--text-muted);--faq-hover-bg: var(--surface-muted);--faq-open-accent: var(--primary);--faq-card-shadow: var(--shadow-soft);--faq-section-margin-top: 0;--related-tools-bg: var(--surface);--related-tools-border: var(--border);--related-tools-text: var(--text-main);--related-tools-muted: var(--text-muted);--related-tools-link: var(--primary);--related-tools-link-hover: var(--primary-dark);--related-tools-shadow: var(--shadow-soft);--related-tools-margin-top: 2rem;--related-tools-margin-bottom: 2rem;}
.compression-page{padding: 2rem 0 4rem;}
.tool-hero{display: flex;flex-wrap: wrap;gap: 32px;align-items: flex-start;margin-bottom: 1rem;}
.hero-text{flex: 1;min-width: 260px;}
.hero-text h1{font-size: 40px;font-weight: 700;line-height: 1.2;margin-bottom: 0;color: var(--text-main);}
.hero-subtitle{font-size: 18px;color: var(--text-muted);max-width: 760px;margin-bottom: 1rem;margin-top: 0;}
.compression-shell{padding: 0;}
.btn-modern, .btn-ghost{border-radius: 999px;padding: 0.75rem 1.5rem;font-weight: 600;border: 1px solid transparent;transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;text-decoration: none;display: inline-flex;align-items: center;justify-content: center;font-size: 0.95rem;cursor: pointer;}
.btn-modern{background: var(--comp-primary);color: #fff;border-color: var(--comp-primary);}
.btn-modern:hover, .btn-modern:focus{background: var(--comp-primary-dark);border-color: var(--comp-primary-dark);transform: translateY(-1px);}
.btn-ghost{background: transparent;color: var(--comp-primary-dark);border-color: rgba(37, 99, 235, 0.4);}
.btn-ghost:hover, .btn-ghost:focus{background: rgba(37, 99, 235, 0.08);}
.stats-deck{display: grid;grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));gap: 1rem;margin-top: 1.5rem;margin-bottom: 1.5rem;}
.stat-card{background: #f8fafc;border-radius: 12px;padding: 1rem 1.25rem;border: 1px solid var(--comp-border);box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);transition: transform 0.2s ease, box-shadow 0.2s ease;}
.stat-card:hover{transform: translateY(-2px);box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);}
.stat-label{font-size: 0.8rem;letter-spacing: 0.05em;text-transform: uppercase;color: var(--comp-muted);margin-bottom: 0.5rem;font-weight: 600;}
.stat-value{font-size: 1.5rem;font-weight: 700;color: var(--comp-muted-strong);margin-bottom: 0;}
.workspace-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 1.5rem;padding: 0;}
.panel{background: var(--comp-surface);border-radius: var(--comp-radius);padding: clamp(1.5rem, 3vw, 2.5rem);border: 1px solid var(--comp-border);box-shadow: var(--comp-shadow);position: relative;}
.panel-header{display: flex;justify-content: space-between;gap: 1rem;flex-wrap: wrap;align-items: flex-start;}
.panel-title{font-size: 1.35rem;font-weight: 700;color: var(--comp-muted-strong);margin: 0.25rem 0 0.5rem;}
.panel-subtitle{text-transform: uppercase;letter-spacing: 0.2em;font-size: 0.75rem;color: var(--comp-muted);margin: 0;}
.panel-lead{color: var(--comp-muted);margin-bottom: 0rem;font-size: 0.95rem;}
.panel-actions .btn-modern, .panel-actions .btn-ghost{padding: 0.6rem 1.2rem;font-size: 0.85rem;}
.input-type-list{display: grid;grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));gap: 0.75rem;margin-bottom: 1rem;margin-top: 1rem;}
.input-type{border: 1px solid var(--comp-border);border-radius: 16px;padding: 0.9rem;cursor: pointer;display: flex;align-items: flex-start;gap: 0.75rem;transition: border-color 0.2s ease, box-shadow 0.2s ease;background: #f8fafc;}
.input-type input{margin-top: 0.35rem;}
.input-type strong{display: block;font-size: 0.95rem;color: var(--comp-muted-strong);}
.input-type small{display: block;color: var(--comp-muted);font-size: 0.82rem;}
.input-type input:checked + span strong{color: var(--comp-primary);}
.input-type input:checked + span small{color: var(--comp-muted-strong);}
.input-type input:focus + span, .input-type:hover{border-color: var(--comp-primary);box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);}
.helper-row{display: flex;justify-content: space-between;gap: 1rem;align-items: center;margin-bottom: 0.5rem;flex-wrap: wrap;}
.helper-label{font-size: 0.9rem;color: var(--comp-muted);display: flex;align-items: center;gap: 0.35rem;}
.tooltip-wrapper{position: relative;display: inline-flex;align-items: center;}
.tooltip-trigger{width: 28px;height: 28px;border-radius: 50%;border: 1px solid var(--comp-border);background: #fff;color: var(--comp-primary);font-weight: 700;display: inline-flex;align-items: center;justify-content: center;cursor: pointer;transition: background-color 0.2s ease, color 0.2s ease;}
.tooltip-trigger:focus, .tooltip-trigger:hover{background: var(--comp-primary);color: #fff;}
.tooltip-bubble{position: absolute;left: 50%;bottom: calc(100% + 0.75rem);transform: translateX(-50%);background: #0f172a;color: #f8fafc;padding: 0.75rem 1rem;border-radius: 12px;width: min(260px, 80vw);font-size: 0.85rem;line-height: 1.4;opacity: 0;pointer-events: none;transition: opacity 0.2s ease;box-shadow: 0 12px 30px rgba(15, 23, 42, 0.3);z-index: 5;}
.tooltip-wrapper:focus-within .tooltip-bubble, .tooltip-wrapper:hover .tooltip-bubble{opacity: 1;}
.editor-surface{border: 1px solid var(--comp-border);border-radius: 20px;overflow: hidden;min-height: 280px;background: #0f172a;}
.editor{width: 100%;height: clamp(280px, 45vh, 420px);}
.editor-hint, .file-feedback{font-size: 0.85rem;color: var(--comp-muted);margin-top: 0.65rem;}
.file-feedback{font-weight: 600;}
.feedback .error-message{border-radius: 12px;}
.output-actions{display: flex;gap: 0.5rem;flex-wrap: wrap;align-items: center;}
.icon-btn{display: inline-flex;align-items: center;gap: 0.4rem;}
.icon-btn svg{width: 16px;height: 16px;}
.share-container{background: #f8fafc;border-radius: 16px;padding: 1rem 1.25rem;border: 1px solid var(--comp-border);margin-top: 1.5rem;}
.share-title{font-size: 0.95rem;font-weight: 600;margin-bottom: 0.75rem;color: var(--comp-muted-strong);}
.share-buttons{display: grid;grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));gap: 0.5rem;}
.share-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.4rem;padding: 0.65rem 0.75rem;border-radius: 0.75rem;font-size: 0.85rem;font-weight: 600;text-decoration: none;color: #ffffff;transition: transform 0.2s ease, box-shadow 0.2s ease;border: none;cursor: pointer;}
.share-btn:hover{transform: translateY(-2px);box-shadow: 0 12px 20px rgba(15, 23, 42, 0.2);}
.share-x{background: #111827;}
.share-facebook{background: #1877f2;}
.share-linkedin{background: #0a66c2;}
.share-reddit{background: #ff4500;}
.share-telegram{background: #229ed9;}
.share-whatsapp{background: #25d366;color: #0f172a;}
.copy-btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.85rem 1.25rem;border-radius: 16px;border: 1px solid var(--comp-border);background: #f8fafc;color: var(--comp-muted-strong);font-weight: 600;transition: background 0.2s ease, transform 0.2s ease;cursor: pointer;font-size: 0.95rem;}
.copy-btn:hover{background: rgba(37, 99, 235, 0.08);transform: translateY(-1px);}
.copy-btn[data-state="copied"]{background: rgba(34, 197, 94, 0.18);border-color: rgba(34, 197, 94, 0.6);color: var(--comp-accent);}
.copy-buttons-row{display: flex;gap: 0.75rem;flex-wrap: wrap;margin-top: 1.5rem;}
.copy-buttons-row .copy-btn{flex: 1 1 auto;min-width: 140px;}
.file-feedback{display: none;}
.file-feedback.show{display: block;}
.share-note{font-size: 0.82rem;color: var(--comp-muted);margin-top: 0.75rem;}
.education-block{padding: 0;margin-top: clamp(2.5rem, 4vw, 3.5rem);}
.education-card{background: var(--comp-surface);border-radius: var(--comp-radius);padding: clamp(2rem, 4vw, 2.75rem);border: 1px solid rgba(148, 163, 184, 0.25);box-shadow: var(--comp-shadow);}
.education-card h2{font-size: clamp(1.8rem, 3vw, 2.4rem);font-weight: 700;color: var(--comp-muted-strong);margin-bottom: 1rem;}
.education-card h3{font-size: 1.3rem;font-weight: 700;color: var(--comp-muted-strong);margin-top: 2rem;margin-bottom: 1rem;}
.education-card .h4{font-size: 1.15rem;font-weight: 600;color: var(--comp-muted-strong);margin-top: 1.5rem;margin-bottom: 0.75rem;}
.education-card p{color: var(--comp-muted);margin-bottom: 1.2rem;line-height: 1.8;font-size: 1rem;}
.education-list{list-style: none;padding: 0;margin: 1.5rem 0;}
.education-list li{border-left: 3px solid var(--comp-primary);padding-left: 1rem;margin-bottom: 1rem;}
.education-list strong{display: block;font-size: 0.95rem;color: var(--comp-muted-strong);}
.education-list p{font-size: 0.9rem;color: var(--comp-muted);margin: 0.4rem 0 0;}
.infographic-card{background: #0f172a;border-radius: var(--comp-radius);padding: 2rem;color: #e2e8f0;box-shadow: var(--comp-shadow);position: relative;}
.infographic-card::after{content: "";position: absolute;inset: 0;border-radius: var(--comp-radius);border: 1px solid rgba(248, 250, 252, 0.2);pointer-events: none;}
.infographic-step{display: flex;gap: 1rem;align-items: flex-start;margin-bottom: 1.5rem;}
.step-number{width: 36px;height: 36px;border-radius: 12px;background: rgba(37, 99, 235, 0.25);display: inline-flex;align-items: center;justify-content: center;font-weight: 700;color: #bfdbfe;}
.infographic-title{font-weight: 600;margin-bottom: 0.25rem;color: #f8fafc;}
.infographic-note{font-size: 0.85rem;color: #cbd5f5;margin-top: 0.5rem;}
.infographic-compression-flow{margin: 2rem 0;padding: 1.5rem;background: #f8fafc;border-radius: 16px;border: 1px solid rgba(148, 163, 184, 0.25);}
.infographic-compression-title{font-size: 1rem;font-weight: 700;color: var(--comp-muted-strong);margin-bottom: 1.5rem;text-align: center;}
.compression-flow-diagram{display: flex;align-items: center;justify-content: center;flex-wrap: nowrap;gap: 0.5rem;overflow-x: auto;padding: 0.5rem 0;scroll-behavior: smooth;-webkit-overflow-scrolling: touch;}
.compression-flow-diagram::-webkit-scrollbar{height: 6px;}
.compression-flow-diagram::-webkit-scrollbar-track{background: #f1f5f9;border-radius: 3px;}
.compression-flow-diagram::-webkit-scrollbar-thumb{background: var(--comp-primary);border-radius: 3px;}
.compression-flow-diagram::-webkit-scrollbar-thumb:hover{background: var(--comp-primary-dark);}
.flow-step{display: flex;flex-direction: column;align-items: center;gap: 0.75rem;flex: 0 0 auto;min-width: 160px;}
.flow-box{width: 100%;max-width: 180px;min-width: 160px;padding: 1rem;background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(14, 165, 233, 0.08) 100%);border-radius: 12px;border: 2px solid rgba(37, 99, 235, 0.2);text-align: center;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.flow-box:hover{transform: translateY(-2px);box-shadow: 0 8px 16px rgba(37, 99, 235, 0.15);}
.flow-box-label{font-size: 0.85rem;font-weight: 600;color: var(--comp-primary);margin-bottom: 0.5rem;text-transform: uppercase;letter-spacing: 0.5px;}
.flow-box-content{font-size: 0.9rem;color: var(--comp-muted-strong);font-weight: 600;}
.flow-arrow{font-size: 1.75rem;color: var(--comp-primary);font-weight: 700;flex: 0 0 auto;padding: 0 0.25rem;display: flex;align-items: center;justify-content: center;min-width: 24px;opacity: 0.7;transition: opacity 0.2s ease, transform 0.2s ease;}
.flow-arrow:hover{opacity: 1;transform: scale(1.1);}
.infographic-zlib-structure{margin: 2rem 0;padding: 1.5rem;background: #f8fafc;border-radius: 16px;border: 1px solid rgba(148, 163, 184, 0.25);}
.zlib-structure-title{font-size: 1rem;font-weight: 700;color: var(--comp-muted-strong);margin-bottom: 1.5rem;text-align: center;}
.structure-diagram{display: flex;flex-direction: column;gap: 0.75rem;}
.structure-segment{display: flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1rem;background: #ffffff;border-radius: 8px;border: 1px solid var(--comp-border);}
.segment-label{font-size: 0.85rem;font-weight: 600;color: var(--comp-primary);min-width: 120px;}
.segment-size{font-size: 0.8rem;color: var(--comp-muted);font-family: monospace;}
.segment-description{font-size: 0.85rem;color: var(--comp-muted);flex: 1;}
.infographic-compression-benefits{margin: 2rem 0;padding: 1.5rem;background: #f8fafc;border-radius: 16px;border: 1px solid rgba(148, 163, 184, 0.25);}
.benefits-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 1rem;}
.benefit-item{background: #ffffff;border-radius: 12px;padding: 1rem;border: 1px solid var(--comp-border);text-align: center;}
.benefit-icon{font-size: 2rem;margin-bottom: 0.5rem;}
.benefit-label{font-size: 0.9rem;font-weight: 600;color: var(--comp-muted-strong);margin-bottom: 0.25rem;}
.benefit-value{font-size: 0.85rem;color: var(--comp-muted);}
.seo-section{padding: 1rem 0 2rem;}
.faq-related-row .faq-section{margin-top: 0;}
.faq-related-row .related-tools-section{margin-top: 0;}
.bmc-compression .faq-section{margin-top: var(--faq-section-margin-top);}
.bmc-compression .faq-card{background: var(--faq-bg);border: 1px solid var(--faq-border);box-shadow: var(--faq-card-shadow);border-radius: var(--comp-radius);}
.bmc-compression .faq-header .h4{color: var(--faq-question-text);}
.bmc-compression .faq-header .text-muted{color: var(--faq-answer-text);}
.bmc-compression .faq-grid details{border: 1px solid var(--faq-border);background: var(--faq-hover-bg);border-radius: 14px;}
.bmc-compression .faq-grid summary{color: var(--faq-question-text);}
.bmc-compression .faq-grid details[open] summary{color: var(--faq-open-accent);}
.bmc-compression .faq-grid p{color: var(--faq-answer-text);}
.bmc-compression .faq-related-row .related-tools-section{margin-bottom: var(--related-tools-margin-bottom);}
.bmc-compression .related-tools-section{margin-top: var(--related-tools-margin-top);margin-bottom: var(--related-tools-margin-bottom);}
.bmc-compression .related-links{background: var(--related-tools-bg);border: 1px solid var(--related-tools-border);box-shadow: var(--related-tools-shadow);border-radius: var(--comp-radius);}
.bmc-compression .related-links .h4{color: var(--related-tools-text);}
.bmc-compression .related-links a{color: var(--related-tools-link);}
.bmc-compression .related-links a:hover{color: var(--related-tools-link-hover);}
.bmc-compression .related-links span{color: var(--related-tools-muted);}
.error-message{margin-top: 1rem;background: #fee2e2;border: 1px solid #fecaca;color: var(--comp-danger);padding: 0.9rem 1rem;}
.sr-only{position: absolute;clip: rect(0 0 0 0);clip-path: inset(50%);width: 1px;height: 1px;overflow: hidden;white-space: nowrap;}
@media (max-width: 991px){.panel{padding: 1.5rem;}.education-card{padding: 1.75rem;}}
@media (max-width: 767px){.hero-text h1{font-size: clamp(1.75rem, 5vw, 2.5rem);}.hero-subtitle{font-size: clamp(1rem, 3vw, 1.125rem);}.panel-actions{width: 100%;}.panel-actions .btn-modern, .panel-actions .btn-ghost{flex: 1;text-align: center;}.share-buttons{flex-direction: column;}.compression-flow-diagram{gap: 0.25rem;padding: 0.5rem;}.flow-step{min-width: 140px;}.flow-box{min-width: 140px;padding: 0.85rem;}.flow-box-label{font-size: 0.75rem;}.flow-box-content{font-size: 0.85rem;}.flow-arrow{font-size: 1.5rem;padding: 0 0.15rem;min-width: 20px;}.benefits-grid{grid-template-columns: repeat(2, 1fr);}.structure-diagram{font-size: 0.85rem;}.segment-label{min-width: 100px;}}
@media (max-width: 576px){.benefits-grid{grid-template-columns: 1fr;}.education-card{padding: 1.5rem;}}
@media (prefers-reduced-motion: reduce){*{transition-duration: 0ms !important;}}