body.app-page{height:100vh;overflow:hidden auto;display:flex;flex-direction:column}body.app-page main{flex:1;display:flex;flex-direction:column;margin-top:60px !important;padding-top:0 !important;overflow-x:hidden}.hero-section{text-align:center;padding:var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius-lg);margin-bottom:var(--spacing-md);width:100%}@media (width>= 1201px){.hero-section{padding:var(--spacing-md) var(--spacing-lg);margin-bottom:var(--spacing-md)}}.hero-content{max-width:600px;margin:0 auto}.hero-header{display:inline-flex;align-items:center;gap:var(--spacing-sm);position:relative}.hero-icon{font-size:1.75rem;margin-bottom:var(--spacing-xs);animation:snip 2s ease-in-out infinite;display:inline-block;transform:rotate(-90deg)}@media (width>= 1201px){.hero-icon{font-size:2rem;margin-bottom:var(--spacing-sm)}}@keyframes snip{0%,100%{transform:rotate(-90deg) scale(1)}50%{transform:rotate(-80deg) scale(1.05)}}.hero-title{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);color:var(--text-primary);display:inline-block;margin-left:var(--spacing-sm)}@media (width>= 1201px){.hero-title{font-size:var(--font-size-xxl)}}.hero-description{font-size:var(--font-size-md);color:var(--text-secondary);margin-top:var(--spacing-xs)}@media (width>= 1201px){.hero-description{font-size:var(--font-size-lg);margin-top:var(--spacing-sm)}}.app-section{flex:1;display:flex;flex-direction:column;overflow:hidden;width:100%}.app-container{max-width:1200px;width:100%;margin:0 auto;padding:var(--spacing-md);flex:1;display:flex;flex-direction:column}@media (width>= 1201px){.app-container{padding:var(--spacing-md) var(--spacing-lg)}}.clipper-tool{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);flex:1;min-height:0}@media (width <= 1200px){.clipper-tool{grid-template-columns:1fr;gap:var(--spacing-md)}}.input-section,.output-section{display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius-md);overflow:hidden;min-height:300px}.section-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-tertiary);border-bottom:1px solid var(--card-border)}.section-header h3{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);color:var(--text-primary)}.text-textarea{width:100%;min-height:200px;padding:var(--spacing-md);border:none;background:transparent;color:var(--text-primary);font-family:"SF Mono",Monaco,Inconsolata,"Fira Code",monospace;font-size:var(--font-size-sm);line-height:1.6;resize:vertical;outline:none;flex:1}@media (width>= 1201px){.text-textarea{font-size:0.875rem;min-height:300px}}.text-textarea::placeholder{color:var(--text-tertiary)}.output-wrapper{position:relative;flex:1;display:flex;flex-direction:column}.processing-overlay{position:absolute;inset:0;background:rgb(0 0 0 / 60%);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;z-index:10}.processing-overlay.active{opacity:1;visibility:visible}.processing-content{text-align:center;color:white}.processing-spinner{width:40px;height:40px;margin:0 auto var(--spacing-sm);border:3px solid rgb(255 255 255 / 30%);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.input-stats,.output-stats{padding:var(--spacing-xs) var(--spacing-md);background:var(--bg-tertiary);border-top:1px solid var(--card-border);font-size:var(--font-size-xs);color:var(--text-secondary);display:flex;align-items:center;gap:var(--spacing-xs)}@media (width>= 1201px){.input-stats,.output-stats{font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md)}}.separator{color:var(--text-tertiary)}.reduction-stat{color:var(--success);font-weight:var(--font-weight-medium)}.btn.copied{background-color:var(--success);border-color:var(--success)}.copy-icon{width:16px;height:16px;margin-right:var(--spacing-xs)}.features-wrapper{margin-top:var(--spacing-lg)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}@media (width>= 1201px){.features-grid{grid-template-columns:repeat(4,1fr)}}.feature-card{background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius-md);padding:var(--spacing-md);display:flex;gap:var(--spacing-md)}.feature-icon{font-size:1.5rem;flex-shrink:0}.feature-content h3{font-size:var(--font-size-md);margin:0 0 var(--spacing-xs) 0;color:var(--text-primary)}.feature-content p{font-size:var(--font-size-sm);color:var(--text-secondary);margin:0;line-height:1.5}.technical-details{margin-top:var(--spacing-lg);background:var(--bg-secondary);border:1px solid var(--card-border);border-radius:var(--border-radius-md);padding:var(--spacing-lg)}.technical-details h2{font-size:var(--font-size-lg);margin:0 0 var(--spacing-md) 0;color:var(--text-primary)}.details-content h3{font-size:var(--font-size-md);margin:var(--spacing-md) 0 var(--spacing-sm) 0;color:var(--text-primary)}.details-content ul{margin:0;padding-left:var(--spacing-lg);color:var(--text-secondary)}.details-content li{margin-bottom:var(--spacing-xs);line-height:1.6}.details-content code{background:var(--bg-tertiary);padding:2px 6px;border-radius:var(--border-radius-sm);font-family:"SF Mono",Monaco,Inconsolata,"Fira Code",monospace;font-size:0.875em;color:var(--primary)}.details-content p{margin:var(--spacing-sm) 0 0 0;line-height:1.6;color:var(--text-secondary)}.back-button-container{padding:var(--spacing-lg);text-align:center}.back-icon{width:16px;height:16px;margin-right:var(--spacing-xs)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}@media (width <= 768px){.clipper-tool{gap:var(--spacing-sm)}.features-grid{grid-template-columns:1fr}.text-textarea{min-height:150px}}