.strudel-code-block{border-radius:var(--radius-lg);background:#0d0d0d;border:1px solid #2a2a2a;overflow:hidden}.code-header{padding:var(--space-3)var(--space-4);background:#1a1a1a;border-bottom:1px solid #2a2a2a;justify-content:space-between;align-items:center;display:flex}.code-label{font-size:var(--text-xs);font-weight:var(--font-bold);color:#666;text-transform:uppercase;letter-spacing:.1em}.copy-code-button{align-items:center;gap:var(--space-2);padding:var(--space-1)var(--space-3);color:#888;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-xs);font-weight:var(--font-medium);font-family:var(--font-display);transition:all var(--transition-fast);background:0 0;border:1px solid #333;display:flex}.copy-code-button:hover{color:#fff;background:#222;border-color:#555}.copy-code-button.copied{color:#4ade80;border-color:#4ade80}.copy-icon{width:14px;height:14px}.code-content{padding:var(--space-4);overflow-x:auto}.code-table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}.code-line:hover{background:rgba(255,255,255,.02)}.line-number{width:1%;min-width:3em;padding-right:var(--space-4);text-align:right;color:#444;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top;border-right:1px solid #2a2a2a}.line-content{padding-left:var(--space-4);white-space:pre;color:#e0e0e0}.line-content code{font-family:inherit}.code-pre{font-family:var(--font-mono);font-size:var(--text-sm);color:#e0e0e0;white-space:pre;margin:0;line-height:1.6}.token-comment{color:#5c6370;font-style:italic}.token-string{color:#98c379}.token-mini-notation{color:#56b6c2}.token-number{color:#d19a66}.token-function{color:#c678dd}.token-method{color:#61afef}.token-keyword{color:#e06c75}.token-operator{color:#abb2bf}.token-bracket{color:#e5c07b}.token-plain{color:#e0e0e0}@media (max-width:768px){.code-header{padding:var(--space-2)var(--space-3)}.code-content{padding:var(--space-3)}.line-number{padding-right:var(--space-2);min-width:2.5em;font-size:var(--text-xs)}.line-content{padding-left:var(--space-2);font-size:var(--text-xs)}.code-pre{font-size:var(--text-xs)}}@media (prefers-reduced-motion:reduce){.copy-code-button{transition:none}}
.output-container{max-width:var(--max-width-narrow);padding:var(--space-8);margin:0 auto;animation:.3s ease-out fadeIn}.output-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-gray-200);display:flex}.header-content h1{margin:0 0 var(--space-2)0;font-size:var(--text-3xl);font-weight:var(--font-black);color:var(--color-black);letter-spacing:-.02em}.header-meta{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}.model-badge{background:var(--color-black);color:var(--color-white);padding:var(--space-1)var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:.05em}.date{color:var(--color-gray-500);font-size:var(--text-sm)}.header-actions{gap:var(--space-2);display:flex}.copy-button{padding:var(--space-2)var(--space-4);background:var(--color-black);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast);white-space:nowrap;border:none}.copy-button:hover{background:var(--color-gray-800);transform:translateY(-1px)}.copy-button.copied{background:var(--color-success)}section{margin-bottom:var(--space-8);animation:.4s ease-out backwards fadeIn}section:first-child{animation-delay:50ms}section:nth-child(2){animation-delay:.1s}section:nth-child(3){animation-delay:.15s}section h2{margin:0 0 var(--space-4)0;font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.1em;padding-left:var(--space-4);border-left:4px solid var(--color-black)}.prompt-section{background:var(--color-gray-50);padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--color-gray-200)}.prompt-text{font-size:var(--text-lg);color:var(--color-black);margin:0;line-height:1.7}.player-section{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-lg);border:2px solid var(--color-gray-200)}.player-wrapper{justify-content:center;display:flex}.output-footer{gap:var(--space-4);padding-top:var(--space-8);border-top:1px solid var(--color-gray-200);margin-top:var(--space-8);justify-content:center;display:flex}.button{padding:var(--space-3)var(--space-6);background:var(--color-black);color:var(--color-white);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast);text-decoration:none;display:inline-block}.button:hover{background:var(--color-gray-800);transform:translateY(-1px)}.error-state{text-align:center;padding:var(--space-16)var(--space-8);animation:.3s ease-out fadeIn}.error-state h1{font-size:var(--text-4xl);margin-bottom:var(--space-4);color:var(--color-error)}.error-state p{font-size:var(--text-lg);color:var(--color-gray-600);margin-bottom:var(--space-8)}.error-actions{gap:var(--space-4);flex-wrap:wrap;justify-content:center;display:flex}.output-skeleton{animation:.3s ease-out fadeIn}.skeleton-header,.skeleton-meta,.skeleton-player,.skeleton-code{background:linear-gradient(90deg,var(--color-gray-100)25%,var(--color-gray-200)50%,var(--color-gray-100)75%);border-radius:var(--radius-md);margin-bottom:var(--space-4);background-size:200% 100%;animation:1.5s infinite shimmer}.skeleton-header{height:48px;margin-bottom:var(--space-8)}.skeleton-meta{width:60%;height:24px;margin-bottom:var(--space-8)}.skeleton-player{height:200px;margin-bottom:var(--space-8)}.skeleton-code{height:280px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.video-export-section{background:var(--color-white);padding:var(--space-6);border-radius:var(--radius-lg);border:2px solid var(--color-gray-200)}.video-export-content{gap:var(--space-4);flex-direction:column;display:flex}.video-export-description{color:var(--color-gray-600);font-size:var(--text-sm);margin:0}.duration-selector{align-items:center;gap:var(--space-4);display:flex}.duration-selector label{font-weight:var(--font-bold);font-size:var(--text-sm);color:var(--color-gray-700)}.duration-options{gap:var(--space-2);display:flex}.duration-option{padding:var(--space-2)var(--space-4);background:var(--color-gray-100);border:2px solid var(--color-gray-200);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);transition:all var(--transition-fast)}.duration-option:hover{background:var(--color-gray-200)}.duration-option.selected{background:var(--color-black);color:var(--color-white);border-color:var(--color-black)}.record-button{padding:var(--space-3)var(--space-6);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast);background:#dc2626;border:none;align-self:flex-start}.record-button:hover{background:#b91c1c;transform:translateY(-1px)}.recording-status{gap:var(--space-4);flex-direction:column;display:flex}.recording-indicator{align-items:center;gap:var(--space-2);font-weight:var(--font-bold);color:#dc2626;display:flex}.recording-dot{background:#dc2626;border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite pulse-recording}@keyframes pulse-recording{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.recording-progress{align-items:center;gap:var(--space-4);display:flex}.progress-bar{background:var(--color-gray-200);border-radius:var(--radius-full);flex:1;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#dc2626,#f87171);height:100%;transition:width .1s linear}.progress-text{font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-mono);color:var(--color-gray-600);text-align:right;min-width:80px}.recording-actions{gap:var(--space-3);display:flex}.stop-button{padding:var(--space-2)var(--space-4);background:var(--color-gray-800);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);transition:all var(--transition-fast);border:none}.stop-button:hover{background:var(--color-black)}.cancel-button{padding:var(--space-2)var(--space-4);color:var(--color-gray-600);border:2px solid var(--color-gray-300);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);transition:all var(--transition-fast);background:0 0}.cancel-button:hover{border-color:var(--color-gray-400);color:var(--color-gray-700)}.processing-status{align-items:center;gap:var(--space-3);padding:var(--space-4);background:var(--color-gray-50);border-radius:var(--radius-md);display:flex}.processing-status .loading-spinner{border:3px solid var(--color-gray-200);border-top-color:var(--color-black);border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.complete-status{text-align:center;padding:var(--space-4);background:var(--color-success-light,#dcfce7);border-radius:var(--radius-md)}.complete-status p{margin:0 0 var(--space-4)0;font-weight:var(--font-bold);color:var(--color-success,#16a34a)}.complete-actions{gap:var(--space-3);justify-content:center;display:flex}.download-button{padding:var(--space-3)var(--space-6);background:var(--color-success,#16a34a);color:var(--color-white);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.05em;transition:all var(--transition-fast);border:none}.download-button:hover{background:#15803d;transform:translateY(-1px)}.reset-button{padding:var(--space-2)var(--space-4);color:var(--color-gray-600);border:2px solid var(--color-gray-300);border-radius:var(--radius-full);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-bold);font-family:var(--font-display);transition:all var(--transition-fast);background:0 0}.reset-button:hover{border-color:var(--color-gray-400);color:var(--color-gray-700)}.error-status{text-align:center;padding:var(--space-4);background:var(--color-error-light,#fee2e2);border-radius:var(--radius-md)}.error-status p{margin:0 0 var(--space-4)0;color:var(--color-error,#dc2626)}@media (max-width:768px){.output-container{padding:var(--space-4)}.output-header{flex-direction:column}.header-content h1{font-size:var(--text-2xl)}.header-actions{width:100%}.copy-button{text-align:center;width:100%}section h2{font-size:var(--text-xs)}.output-footer{flex-direction:column}.button{text-align:center;width:100%}.duration-selector{flex-direction:column;align-items:flex-start}.duration-options{width:100%}.duration-option{text-align:center;flex:1}.record-button{text-align:center;width:100%}.recording-actions{flex-direction:column}.stop-button,.cancel-button{text-align:center;width:100%}.complete-actions{flex-direction:column}.download-button,.reset-button{width:100%}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}