@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap";:root{--color-bg: #000000;--color-text: #ffffff;--color-accent: #d4d4d8;--color-divider: #3f3f46;--color-muted: #71717a;--color-error-border: #ef4444;--font-family: "JetBrains Mono", "IBM Plex Mono", monospace;--text-hero: clamp(4rem, 12vw, 10rem);--text-tagline: clamp(.75rem, 1.5vw, 1rem);--text-label: .75rem;--text-body: .9rem;--text-input: 1rem;--text-button: .85rem;--text-footer: .7rem;--weight-regular: 400;--weight-bold: 700;--weight-black: 800;--border-width: 3px;--border-thin: 1px;--border-color: #ffffff;--border-divider: #3f3f46;--radius: 0px;--space-xs: 8px;--space-sm: 16px;--space-md: 24px;--space-lg: 48px;--space-xl: 80px;--transition-minimal: 80ms}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);letter-spacing:.05em}button,input,a{font:inherit;letter-spacing:inherit}button,a{border-radius:var(--radius)}button{cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}.app-shell{display:flex;flex-direction:column;width:min(100%,860px);min-height:100vh;margin:0 auto;padding:80px 24px 24px}.hero-section h1{margin:0;font-size:var(--text-hero);font-weight:var(--weight-black);line-height:.9}.hero-section p{margin:16px 0 0;color:var(--color-muted);font-size:var(--text-tagline)}.page-separator{width:100%;height:1px;margin:24px 0;background:var(--color-text)}.section-separator{width:100%;height:1px;margin:var(--space-lg) 0;background:var(--color-text)}.url-input-section{width:100%;margin-bottom:var(--space-md)}.url-input-form{width:100%}.url-input-row{display:flex;width:100%}.url-input-field{flex:1 1 auto;min-width:0;border:var(--border-width) solid var(--border-color);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);padding:var(--space-sm);font-size:var(--text-input);outline:none}.url-input-field::placeholder{color:var(--color-muted)}.url-input-field:focus{border-color:var(--border-color);outline:none}.url-input-field.has-error{border:var(--border-thin) solid var(--color-error-border)}.grab-button{flex:0 0 auto;border:var(--border-width) solid var(--border-color);border-left:0;border-radius:var(--radius);background:var(--color-text);color:var(--color-bg);padding:var(--space-sm) var(--space-md);font-size:var(--text-button);font-weight:var(--weight-bold);transition:background var(--transition-minimal),color var(--transition-minimal)}.grab-button:hover:not(:disabled){background:var(--color-bg);color:var(--color-text)}.grab-button:disabled{background:var(--color-divider);color:var(--color-text)}.url-input-meta{display:flex;justify-content:space-between;gap:var(--space-sm);margin-top:var(--space-xs);color:var(--color-muted);font-size:var(--text-label)}.url-input-error{margin:var(--space-xs) 0 0;color:var(--color-error-border);font-size:var(--text-label)}.loading-text{margin-top:var(--space-md);color:var(--color-text);font-size:var(--text-body);font-weight:var(--weight-bold)}.result-card{display:block;margin-top:var(--space-md);border:var(--border-width) solid var(--border-color);border-radius:var(--radius);background:var(--color-bg);padding:var(--space-md)}.result-header{display:flex;align-items:center;gap:var(--space-sm);min-height:26px}.platform-badge{display:inline-flex;align-items:center;border:var(--border-thin) solid var(--border-color);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);padding:2px var(--space-xs);font-size:.7rem;font-weight:var(--weight-bold)}.result-header-divider{width:1px;height:20px;background:var(--color-divider)}.result-type{color:var(--color-accent);font-size:var(--text-label);font-weight:var(--weight-bold)}.result-separator{width:100%;height:1px;margin:var(--space-sm) 0;background:var(--color-divider)}.media-preview{display:flex;justify-content:center;width:min(100%,560px);margin-bottom:var(--space-sm);margin-left:auto;margin-right:auto;border:var(--border-thin) solid var(--border-divider);border-radius:var(--radius);background:var(--color-bg)}.media-preview-button{position:relative;display:block;width:100%;border:0;border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);padding:0}.media-preview.is-portrait{width:min(100%,360px);aspect-ratio:9 / 16}.media-video,.media-image{display:block;width:100%;max-height:min(70vh,720px);object-fit:contain;border-radius:var(--radius)}.media-preview.is-portrait .media-video,.media-preview.is-portrait .media-image{height:100%}.media-preview-label{position:absolute;right:var(--space-sm);bottom:var(--space-sm);border:var(--border-thin) solid var(--border-color);background:var(--color-bg);color:var(--color-text);padding:6px var(--space-sm);font-size:var(--text-label);font-weight:var(--weight-bold)}.preview-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:var(--color-bg);padding:var(--space-md)}.preview-modal-panel{position:relative;width:min(100%,860px);max-height:calc(100vh - 48px);border:var(--border-width) solid var(--border-color);background:var(--color-bg);padding:var(--space-md)}.preview-close{display:block;margin-left:auto;margin-bottom:var(--space-sm);border:var(--border-thin) solid var(--border-color);background:var(--color-bg);color:var(--color-text);padding:6px var(--space-sm);font-size:var(--text-label);font-weight:var(--weight-bold)}.preview-close:hover{background:var(--color-text);color:var(--color-bg)}.preview-modal-video{display:block;width:100%;max-height:calc(100vh - 128px);background:var(--color-bg);object-fit:contain}.result-title{overflow:hidden;margin:0;color:var(--color-accent);font-size:var(--text-button);text-overflow:ellipsis;white-space:nowrap}.download-list{display:flex;flex-direction:column}.download-item{border-bottom:var(--border-thin) solid var(--border-divider)}.download-item:last-child{border-bottom:0}.download-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:100%;min-height:44px}.download-label{overflow:hidden;color:var(--color-accent);font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.download-action{flex:0 0 auto;border:var(--border-thin) solid var(--border-color);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);padding:6px var(--space-sm);font-size:.8rem;font-weight:var(--weight-bold);transition:background var(--transition-minimal),color var(--transition-minimal)}.download-action:hover{background:var(--color-text);color:var(--color-bg)}.download-action.is-disabled{border-color:var(--color-divider);color:var(--color-muted);pointer-events:none}.slideshow-preview{margin-bottom:var(--space-sm)}.slideshow-frame{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;border:var(--border-thin) solid var(--border-divider);background:var(--color-bg)}.slideshow-image{display:block;width:100%;max-height:280px;object-fit:contain;background:var(--color-bg)}.slideshow-nav{position:absolute;top:50%;left:var(--space-sm);right:var(--space-sm);display:flex;justify-content:space-between;transform:translateY(-50%);pointer-events:none}.slideshow-nav-button{border:var(--border-thin) solid var(--border-color);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);padding:var(--space-xs) 12px;font-size:var(--text-button);font-weight:var(--weight-bold);pointer-events:auto}.slideshow-nav-button:hover{background:var(--color-text);color:var(--color-bg)}.slideshow-counter{position:absolute;right:var(--space-sm);bottom:var(--space-sm);border:var(--border-thin) solid var(--border-color);background:var(--color-bg);color:var(--color-text);padding:6px var(--space-sm);font-size:var(--text-label);font-weight:var(--weight-bold)}.slideshow-active-download{display:block;width:100%;margin-top:var(--space-sm);border:var(--border-width) solid var(--border-color);border-radius:var(--radius);background:var(--color-text);color:var(--color-bg);padding:10px var(--space-sm);font-size:var(--text-button);font-weight:var(--weight-bold);text-align:center}.slideshow-active-download:hover{background:var(--color-bg);color:var(--color-text)}.audio-preview-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:var(--space-sm);align-items:center;border-bottom:var(--border-thin) solid var(--border-divider);padding:var(--space-sm) 0}.audio-preview-label{color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold)}.audio-preview-player{display:block;width:100%;border-radius:var(--radius);filter:grayscale(1)}.how-section{margin-top:var(--space-lg);border-top:var(--border-thin) solid var(--border-divider);padding-top:var(--space-lg)}.how-header{margin-bottom:var(--space-md)}.how-header span,.how-summary-copy span{display:block;color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold)}.how-header h2,.how-summary-copy h2{margin:var(--space-xs) 0;color:var(--color-text);font-size:clamp(1.5rem,4vw,2.4rem);line-height:1.1}.how-header p,.how-summary-copy p{max-width:720px;margin:0;color:var(--color-accent);font-size:var(--text-body);line-height:1.7}.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}.how-step{border:var(--border-width) solid var(--border-color);background:var(--color-bg);padding:var(--space-sm)}.how-step-header{display:flex;justify-content:space-between;color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold)}.how-step-screen{margin:var(--space-sm) 0;border:var(--border-thin) solid var(--border-divider);min-height:128px;padding:var(--space-sm)}.how-step-bar{width:100%;height:12px;border:var(--border-thin) solid var(--border-color);background:var(--color-text);margin-bottom:var(--space-md)}.how-step-command{border:var(--border-thin) solid var(--border-color);color:var(--color-text);font-size:var(--text-label);font-weight:var(--weight-bold);padding:var(--space-sm)}.how-step h3{margin:0;color:var(--color-text);font-size:1rem}.how-step-divider{width:100%;height:1px;margin:var(--space-sm) 0;background:var(--color-divider)}.how-step p{margin:0 0 var(--space-xs);color:var(--color-accent);font-size:var(--text-label);line-height:1.6}.how-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);margin-top:var(--space-lg);border:var(--border-width) solid var(--border-color)}.how-summary-visual{display:flex;align-items:center;justify-content:center;min-height:220px;border-right:var(--border-width) solid var(--border-color);padding:var(--space-md)}.how-summary-window{display:grid;width:100%;border:var(--border-thin) solid var(--border-color)}.how-summary-window span{border-bottom:var(--border-thin) solid var(--border-divider);color:var(--color-text);font-size:var(--text-label);font-weight:var(--weight-bold);padding:var(--space-sm)}.how-summary-window span:last-child{border-bottom:0;background:var(--color-text);color:var(--color-bg)}.how-summary-copy{padding:var(--space-md)}.feature-section{margin-top:var(--space-lg);border-top:var(--border-thin) solid var(--border-divider);padding-top:var(--space-lg)}.feature-header{margin-bottom:var(--space-lg);text-align:center}.feature-header span{display:block;color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold)}.feature-header h2{max-width:760px;margin:var(--space-xs) auto;color:var(--color-text);font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.15}.feature-header p{max-width:820px;margin:0 auto;color:var(--color-accent);font-size:var(--text-body);line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}.feature-item{border:var(--border-width) solid var(--border-color);background:var(--color-bg);padding:var(--space-md);text-align:center}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:var(--border-thin) solid var(--border-color);color:var(--color-text)}.feature-item h3{margin:var(--space-sm) 0 0;color:var(--color-text);font-size:1.1rem}.feature-divider{width:100%;height:1px;margin:var(--space-sm) 0;background:var(--color-divider)}.feature-item p{max-width:360px;margin:0 auto;color:var(--color-accent);font-size:var(--text-body);line-height:1.7}.how-it-section{background:var(--color-bg)}.how-it-header{margin-bottom:var(--space-md)}.how-it-header span,.how-it-notes span{display:block;color:var(--color-muted);font-size:.7rem;font-weight:var(--weight-bold);letter-spacing:.2em}.how-it-header h2{margin:var(--space-xs) 0;color:var(--color-text);font-size:clamp(1.8rem,3vw,2.5rem);font-weight:var(--weight-black);line-height:1.15}.how-it-header p{margin:0;color:var(--color-muted);font-size:.85rem;line-height:1.8}.how-it-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.how-it-step-card{margin-right:calc(var(--border-width) * -1);border:var(--border-width) solid var(--border-color);background:var(--color-bg);padding:var(--space-md)}.how-it-step-card:last-child{margin-right:0}.how-it-step-header{display:flex;justify-content:space-between;color:var(--color-muted);font-size:.7rem;letter-spacing:.15em}.how-it-url-bar{width:100%;height:12px;margin:var(--space-sm) 0;background:var(--color-text)}.how-it-mock-button{display:inline-block;border:2px solid var(--border-color);color:var(--color-text);font-size:.8rem;font-weight:var(--weight-bold);padding:10px var(--space-sm)}.how-it-divider{width:100%;height:1px;margin:20px 0;background:var(--color-divider)}.how-it-step-card h3{margin:0 0 var(--space-xs);color:var(--color-text);font-size:1rem;font-weight:var(--weight-bold)}.how-it-step-card p{margin:0;color:var(--color-accent);font-size:.8rem;line-height:1.8}.how-it-bottom{display:grid;grid-template-columns:30% 70%;border:var(--border-width) solid var(--border-color);border-top:0}.how-it-terminal{border-right:var(--border-width) solid var(--border-color);padding:32px var(--space-md)}.how-it-terminal-item{border-bottom:var(--border-thin) solid var(--border-divider);color:var(--color-text);font-size:.85rem;font-weight:var(--weight-bold);padding:14px 0}.how-it-terminal-item:last-child{border-bottom:0}.how-it-notes{padding:32px var(--space-md)}.how-it-notes h3{margin:var(--space-xs) 0 0;color:var(--color-text);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:var(--weight-black);line-height:1.3}.how-it-notes p{margin:var(--space-sm) 0 0;color:var(--color-muted);font-size:.85rem;line-height:1.8}.app-footer{display:flex;justify-content:space-between;gap:var(--space-sm);margin-top:auto;padding:var(--space-lg) 0 var(--space-sm);border-top:var(--border-thin) solid var(--border-divider);color:var(--color-muted);font-size:var(--text-footer)}@media (max-width: 640px){.app-shell{padding:var(--space-xl) var(--space-md) var(--space-md)}.url-input-row{flex-direction:column}.grab-button{border-top:0;border-left:var(--border-width) solid var(--border-color)}.url-input-meta,.app-footer,.download-row{align-items:flex-start;flex-direction:column}.audio-preview-row{grid-template-columns:1fr}.download-action{width:100%;text-align:center}.how-grid,.how-summary,.feature-grid,.how-it-steps,.how-it-bottom{grid-template-columns:1fr}.how-it-step-card{margin-right:0;margin-bottom:calc(var(--border-width) * -1)}.how-it-step-card:last-child{margin-bottom:0}.how-it-bottom{border-top:var(--border-width) solid var(--border-color)}.how-it-terminal,.how-summary-visual{border-right:0;border-bottom:var(--border-width) solid var(--border-color)}}
