<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Statics on Luca Lanziani</title>
    <link>https://lanziani.com/static/</link>
    <description>Recent content in Statics on Luca Lanziani</description>
    <generator>Hugo</generator>
    <language>en-us</language>
    <atom:link href="https://lanziani.com/static/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Podcast Recorder</title>
      <link>https://lanziani.com/static/local-podcast-recorder/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://lanziani.com/static/local-podcast-recorder/</guid>
      <description>&lt;!DOCTYPE html&gt;&#xA;&lt;html lang=&#34;en&#34;&gt;&#xA;&lt;head&gt;&#xA;    &lt;meta charset=&#34;UTF-8&#34;&gt;&#xA;    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt;&#xA;    &lt;title&gt;Podcast Recorder&lt;/title&gt;&#xA;    &lt;style&gt;&#xA;/* Reset and Base Styles */&#xA;* {&#xA;    margin: 0;&#xA;    padding: 0;&#xA;    box-sizing: border-box;&#xA;}&#xA;&#xA;body {&#xA;    font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;&#xA;    line-height: 1.6;&#xA;    color: #333;&#xA;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);&#xA;    min-height: 100vh;&#xA;}&#xA;&#xA;.container {&#xA;    max-width: 1200px;&#xA;    margin: 0 auto;&#xA;    padding: 20px;&#xA;}&#xA;&#xA;/* Header */&#xA;header {&#xA;    text-align: center;&#xA;    color: white;&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;header h2 {&#xA;    font-size: 2.5rem;&#xA;    margin-bottom: 10px;&#xA;    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);&#xA;}&#xA;&#xA;header p {&#xA;    font-size: 1.1rem;&#xA;    opacity: 0.9;&#xA;}&#xA;&#xA;/* Utility Classes */&#xA;.hidden {&#xA;    display: none !important;&#xA;}&#xA;&#xA;/* Buttons */&#xA;.btn {&#xA;    display: inline-flex;&#xA;    align-items: center;&#xA;    gap: 8px;&#xA;    padding: 12px 20px;&#xA;    border: none;&#xA;    border-radius: 8px;&#xA;    font-size: 1rem;&#xA;    font-weight: 600;&#xA;    cursor: pointer;&#xA;    transition: all 0.3s ease;&#xA;    text-decoration: none;&#xA;    background: #f8f9fa;&#xA;    color: #333;&#xA;}&#xA;&#xA;.btn:hover {&#xA;    transform: translateY(-2px);&#xA;    box-shadow: 0 4px 12px rgba(0,0,0,0.15);&#xA;}&#xA;&#xA;.btn:active {&#xA;    transform: translateY(0);&#xA;}&#xA;&#xA;.btn:disabled {&#xA;    opacity: 0.5;&#xA;    cursor: not-allowed;&#xA;    transform: none;&#xA;}&#xA;&#xA;.btn-primary {&#xA;    background: #007bff;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-primary:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.btn-secondary {&#xA;    background: #6c757d;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-secondary:hover {&#xA;    background: #545b62;&#xA;}&#xA;&#xA;.btn-record {&#xA;    background: #dc3545;&#xA;    color: white;&#xA;    font-size: 1.1rem;&#xA;    padding: 15px 25px;&#xA;}&#xA;&#xA;.btn-record:hover {&#xA;    background: #c82333;&#xA;}&#xA;&#xA;.btn-pause {&#xA;    background: #ffc107;&#xA;    color: #333;&#xA;}&#xA;&#xA;.btn-pause:hover {&#xA;    background: #e0a800;&#xA;}&#xA;&#xA;.btn-resume {&#xA;    background: #28a745;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-resume:hover {&#xA;    background: #1e7e34;&#xA;}&#xA;&#xA;.btn-stop {&#xA;    background: #6c757d;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-stop:hover {&#xA;    background: #545b62;&#xA;}&#xA;&#xA;.btn-timestamp {&#xA;    background: #17a2b8;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-timestamp:hover {&#xA;    background: #138496;&#xA;}&#xA;&#xA;.btn-success {&#xA;    background: #28a745;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-success:hover {&#xA;    background: #1e7e34;&#xA;}&#xA;&#xA;/* Sections */&#xA;.episode-section,&#xA;.recording-section {&#xA;    background: white;&#xA;    border-radius: 12px;&#xA;    padding: 30px;&#xA;    margin-bottom: 20px;&#xA;    box-shadow: 0 8px 25px rgba(0,0,0,0.1);&#xA;}&#xA;&#xA;/* Episode Controls */&#xA;.episode-controls {&#xA;    display: flex;&#xA;    gap: 15px;&#xA;    margin-bottom: 20px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;.episode-name,&#xA;#episodeName {&#xA;    flex: 1;&#xA;    min-width: 250px;&#xA;    padding: 12px 16px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 8px;&#xA;    font-size: 1rem;&#xA;    transition: border-color 0.3s ease;&#xA;}&#xA;&#xA;.episode-name:focus,&#xA;#episodeName:focus {&#xA;    outline: none;&#xA;    border-color: #007bff;&#xA;}&#xA;&#xA;/* Episodes List */&#xA;.episodes-list {&#xA;    display: grid;&#xA;    gap: 15px;&#xA;}&#xA;&#xA;.episode-item {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    padding: 15px 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;    border-left: 4px solid #007bff;&#xA;    transition: all 0.3s ease;&#xA;}&#xA;&#xA;.episode-item:hover {&#xA;    background: #e9ecef;&#xA;    transform: translateX(5px);&#xA;}&#xA;&#xA;.episode-info h3 {&#xA;    margin: 0 0 5px 0;&#xA;    color: #333;&#xA;}&#xA;&#xA;.episode-info p {&#xA;    margin: 0;&#xA;    color: #666;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.episode-actions {&#xA;    display: flex;&#xA;    gap: 10px;&#xA;}&#xA;&#xA;/* Current Episode */&#xA;.current-episode {&#xA;    text-align: center;&#xA;    margin-bottom: 30px;&#xA;    padding-bottom: 20px;&#xA;    border-bottom: 2px solid #e9ecef;&#xA;}&#xA;&#xA;.current-episode h2 {&#xA;    color: #333;&#xA;    margin-bottom: 5px;&#xA;}&#xA;&#xA;.episode-date {&#xA;    color: #666;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;/* Recording Controls */&#xA;.recording-controls {&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    gap: 15px;&#xA;    margin-bottom: 30px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;/* Recording Status */&#xA;.recording-status {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    margin-bottom: 30px;&#xA;    padding: 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;}&#xA;&#xA;.recording-indicator {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 10px;&#xA;    font-weight: 600;&#xA;}&#xA;&#xA;.status-dot {&#xA;    width: 12px;&#xA;    height: 12px;&#xA;    border-radius: 50%;&#xA;    background: #6c757d;&#xA;    transition: all 0.3s ease;&#xA;}&#xA;&#xA;.status-dot.recording {&#xA;    background: #dc3545;&#xA;    animation: pulse 1.5s infinite;&#xA;}&#xA;&#xA;.status-dot.paused {&#xA;    background: #ffc107;&#xA;}&#xA;&#xA;@keyframes pulse {&#xA;    0% { opacity: 1; transform: scale(1); }&#xA;    50% { opacity: 0.5; transform: scale(1.1); }&#xA;    100% { opacity: 1; transform: scale(1); }&#xA;}&#xA;&#xA;.recording-timer {&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    font-size: 1.5rem;&#xA;    font-weight: bold;&#xA;    color: #333;&#xA;}&#xA;&#xA;/* Audio Meter */&#xA;.audio-meter {&#xA;    margin-bottom: 20px;&#xA;}&#xA;&#xA;.audio-meter label {&#xA;    display: block;&#xA;    margin-bottom: 10px;&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;}&#xA;&#xA;.meter-container {&#xA;    height: 20px;&#xA;    background: #e9ecef;&#xA;    border-radius: 10px;&#xA;    overflow: hidden;&#xA;    position: relative;&#xA;}&#xA;&#xA;.meter-bar {&#xA;    height: 100%;&#xA;    background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 100%);&#xA;    width: 0%;&#xA;    transition: width 0.1s ease;&#xA;    border-radius: 10px;&#xA;}&#xA;&#xA;/* Audio Controls */&#xA;.audio-controls {&#xA;    margin-bottom: 30px;&#xA;    padding: 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;    border: 1px solid #e9ecef;&#xA;}&#xA;&#xA;.audio-input-section,&#xA;.audio-volume-section {&#xA;    margin-bottom: 15px;&#xA;}&#xA;&#xA;.audio-input-section label,&#xA;.audio-volume-section label {&#xA;    display: block;&#xA;    margin-bottom: 8px;&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.audio-input-select {&#xA;    flex: 1;&#xA;    padding: 8px 12px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 6px;&#xA;    font-size: 0.9rem;&#xA;    background: white;&#xA;    margin-right: 10px;&#xA;    min-width: 200px;&#xA;}&#xA;&#xA;.audio-input-select:focus {&#xA;    outline: none;&#xA;    border-color: #007bff;&#xA;}&#xA;&#xA;.audio-input-section {&#xA;    display: flex;&#xA;    flex-wrap: wrap;&#xA;    align-items: end;&#xA;    gap: 10px;&#xA;}&#xA;&#xA;.audio-input-section label {&#xA;    width: 100%;&#xA;    margin-bottom: 5px;&#xA;}&#xA;&#xA;.volume-control {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 15px;&#xA;}&#xA;&#xA;.volume-slider {&#xA;    flex: 1;&#xA;    height: 6px;&#xA;    background: #e9ecef;&#xA;    border-radius: 3px;&#xA;    outline: none;&#xA;    -webkit-appearance: none;&#xA;    appearance: none;&#xA;}&#xA;&#xA;.volume-slider::-webkit-slider-thumb {&#xA;    appearance: none;&#xA;    width: 18px;&#xA;    height: 18px;&#xA;    background: #007bff;&#xA;    border-radius: 50%;&#xA;    cursor: pointer;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.volume-slider::-webkit-slider-thumb:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.volume-slider::-moz-range-thumb {&#xA;    width: 18px;&#xA;    height: 18px;&#xA;    background: #007bff;&#xA;    border-radius: 50%;&#xA;    cursor: pointer;&#xA;    border: none;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.volume-slider::-moz-range-thumb:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.volume-value {&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    min-width: 45px;&#xA;    text-align: right;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.audio-info {&#xA;    padding: 10px;&#xA;    background: white;&#xA;    border-radius: 6px;&#xA;    border: 1px solid #e9ecef;&#xA;}&#xA;&#xA;.audio-source-info {&#xA;    font-size: 0.85rem;&#xA;    color: #666;&#xA;    font-style: italic;&#xA;}&#xA;&#xA;/* Timestamps Section */&#xA;.timestamps-section {&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;.timestamps-section h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.timestamp-controls {&#xA;    display: flex;&#xA;    gap: 15px;&#xA;    margin-bottom: 20px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;#timestampNote {&#xA;    flex: 1;&#xA;    min-width: 250px;&#xA;    padding: 10px 14px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 6px;&#xA;    font-size: 0.95rem;&#xA;}&#xA;&#xA;#timestampNote:focus {&#xA;    outline: none;&#xA;    border-color: #17a2b8;&#xA;}&#xA;&#xA;.timestamps-list {&#xA;    max-height: 200px;&#xA;    overflow-y: auto;&#xA;    border: 1px solid #e9ecef;&#xA;    border-radius: 8px;&#xA;    background: #f8f9fa;&#xA;}&#xA;&#xA;.timestamp-item {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    padding: 12px 16px;&#xA;    border-bottom: 1px solid #e9ecef;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.timestamp-item:last-child {&#xA;    border-bottom: none;&#xA;}&#xA;&#xA;.timestamp-item:hover {&#xA;    background: #e9ecef;&#xA;}&#xA;&#xA;.timestamp-time {&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    font-weight: bold;&#xA;    color: #17a2b8;&#xA;    min-width: 80px;&#xA;}&#xA;&#xA;.timestamp-note {&#xA;    flex: 1;&#xA;    margin-left: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.timestamp-actions {&#xA;    display: flex;&#xA;    gap: 8px;&#xA;}&#xA;&#xA;.btn-small {&#xA;    padding: 6px 12px;&#xA;    font-size: 0.85rem;&#xA;}&#xA;&#xA;/* Recording Preview */&#xA;.recording-preview {&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;.recording-preview h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.recording-info {&#xA;    margin-top: 10px;&#xA;    padding: 10px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 6px;&#xA;    font-size: 0.9rem;&#xA;    color: #666;&#xA;}&#xA;&#xA;/* Episode Actions */&#xA;.episode-actions {&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    gap: 15px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;/* Modal */&#xA;.modal {&#xA;    position: fixed;&#xA;    top: 0;&#xA;    left: 0;&#xA;    width: 100%;&#xA;    height: 100%;&#xA;    background: rgba(0,0,0,0.5);&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    align-items: center;&#xA;    z-index: 1000;&#xA;}&#xA;&#xA;.modal-content {&#xA;    background: white;&#xA;    padding: 30px;&#xA;    border-radius: 12px;&#xA;    max-width: 400px;&#xA;    text-align: center;&#xA;    box-shadow: 0 10px 30px rgba(0,0,0,0.3);&#xA;}&#xA;&#xA;.modal-content h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.modal-content p {&#xA;    margin-bottom: 20px;&#xA;    color: #666;&#xA;    line-height: 1.5;&#xA;}&#xA;&#xA;/* Responsive Design */&#xA;@media (max-width: 768px) {&#xA;    .container {&#xA;        padding: 15px;&#xA;    }&#xA;    &#xA;    header h2 {&#xA;        font-size: 2rem;&#xA;    }&#xA;    &#xA;    .recording-controls {&#xA;        flex-direction: column;&#xA;        align-items: center;&#xA;    }&#xA;    &#xA;    .recording-status {&#xA;        flex-direction: column;&#xA;        gap: 15px;&#xA;        text-align: center;&#xA;    }&#xA;    &#xA;    .episode-controls,&#xA;    .timestamp-controls {&#xA;        flex-direction: column;&#xA;    }&#xA;    &#xA;    #episodeName,&#xA;    #timestampNote {&#xA;        min-width: 100%;&#xA;    }&#xA;    &#xA;    .episode-item {&#xA;        flex-direction: column;&#xA;        align-items: flex-start;&#xA;        gap: 15px;&#xA;    }&#xA;    &#xA;    .episode-actions {&#xA;        justify-content: flex-start;&#xA;    }&#xA;    &#xA;    .audio-input-section {&#xA;        flex-direction: column;&#xA;        align-items: stretch;&#xA;    }&#xA;    &#xA;    .audio-input-select {&#xA;        margin-right: 0;&#xA;        margin-bottom: 10px;&#xA;        min-width: 100%;&#xA;    }&#xA;}&#xA;&#xA;@media (max-width: 480px) {&#xA;    .episode-section,&#xA;    .recording-section {&#xA;        padding: 20px;&#xA;    }&#xA;    &#xA;    .btn {&#xA;        padding: 10px 16px;&#xA;        font-size: 0.9rem;&#xA;    }&#xA;    &#xA;    .btn-record {&#xA;        padding: 12px 20px;&#xA;        font-size: 1rem;&#xA;    }&#xA;}&#xA;&#xA;/* Animation for smooth transitions */&#xA;.recording-section,&#xA;.episode-section {&#xA;    animation: fadeIn 0.5s ease-in;&#xA;}&#xA;&#xA;@keyframes fadeIn {&#xA;    from {&#xA;        opacity: 0;&#xA;        transform: translateY(20px);&#xA;    }&#xA;    to {&#xA;        opacity: 1;&#xA;        transform: translateY(0);&#xA;    }&#xA;}&#xA;&#xA;/* Recording Segments Visualization */&#xA;.segments-container {&#xA;    margin: 20px 0;&#xA;    padding: 20px;&#xA;    background: rgba(255, 255, 255, 0.95);&#xA;    border-radius: 12px;&#xA;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);&#xA;}&#xA;&#xA;.segments-container h4 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;    font-size: 1.1rem;&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 8px;&#xA;}&#xA;&#xA;.segments-container h4::before {&#xA;    content: &#34;🎵&#34;;&#xA;    font-size: 1.2rem;&#xA;}&#xA;&#xA;.segments-timeline {&#xA;    display: flex;&#xA;    flex-direction: column;&#xA;    gap: 12px;&#xA;    margin-bottom: 15px;&#xA;}&#xA;&#xA;.segment-track {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    padding: 12px 16px;&#xA;    border-radius: 8px;&#xA;    border: 2px solid rgba(255, 255, 255, 0.8);&#xA;    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);&#xA;    transition: transform 0.2s ease, box-shadow 0.2s ease;&#xA;    min-height: 60px;&#xA;}&#xA;&#xA;.segment-track:hover {&#xA;    transform: translateY(-2px);&#xA;    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);&#xA;}&#xA;&#xA;.segment-info {&#xA;    display: flex;&#xA;    flex-direction: column;&#xA;    gap: 2px;&#xA;    min-width: 120px;&#xA;    margin-right: 15px;&#xA;}&#xA;&#xA;.segment-number {&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.segment-duration {&#xA;    font-size: 0.8rem;&#xA;    color: #666;&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;}&#xA;&#xA;.segment-size {&#xA;    font-size: 0.75rem;&#xA;    color: #888;&#xA;    font-style: italic;&#xA;}&#xA;&#xA;.segment-waveform {&#xA;    flex: 1;&#xA;    height: 40px;&#xA;    margin: 0 15px;&#xA;    display: flex;&#xA;    align-items: center;&#xA;    justify-content: center;&#xA;}&#xA;&#xA;.waveform-bars {&#xA;    display: flex;&#xA;    align-items: end;&#xA;    gap: 2px;&#xA;    height: 100%;&#xA;    width: 100%;&#xA;    max-width: 300px;&#xA;}&#xA;&#xA;.wave-bar {&#xA;    flex: 1;&#xA;    background: linear-gradient(to top, &#xA;        rgba(255, 255, 255, 0.8) 0%, &#xA;        rgba(255, 255, 255, 0.6) 50%, &#xA;        rgba(255, 255, 255, 0.4) 100%);&#xA;    border-radius: 1px;&#xA;    min-height: 4px;&#xA;    animation: wave-pulse 2s ease-in-out infinite;&#xA;}&#xA;&#xA;@keyframes wave-pulse {&#xA;    0%, 100% { opacity: 0.6; }&#xA;    50% { opacity: 1; }&#xA;}&#xA;&#xA;.segment-controls {&#xA;    display: flex;&#xA;    gap: 6px;&#xA;    align-items: center;&#xA;}&#xA;&#xA;.btn-tiny {&#xA;    padding: 6px 8px;&#xA;    font-size: 0.8rem;&#xA;    min-width: 32px;&#xA;    height: 32px;&#xA;    border-radius: 6px;&#xA;    background: rgba(255, 255, 255, 0.9);&#xA;    border: 1px solid rgba(0, 0, 0, 0.1);&#xA;    color: #333;&#xA;    transition: all 0.2s ease;&#xA;}&#xA;&#xA;.btn-tiny:hover {&#xA;    background: white;&#xA;    transform: scale(1.05);&#xA;    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);&#xA;}&#xA;&#xA;.timeline-ruler {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    padding: 8px 16px;&#xA;    border-top: 1px solid rgba(0, 0, 0, 0.1);&#xA;    margin-top: 15px;&#xA;    background: rgba(255, 255, 255, 0.5);&#xA;    border-radius: 6px;&#xA;}&#xA;&#xA;.time-mark {&#xA;    font-size: 0.75rem;&#xA;    color: #666;&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    padding: 2px 6px;&#xA;    background: rgba(255, 255, 255, 0.8);&#xA;    border-radius: 4px;&#xA;}&#xA;&#xA;.audio-preview-section {&#xA;    margin-top: 15px;&#xA;    padding-top: 15px;&#xA;    border-top: 1px solid rgba(0, 0, 0, 0.1);&#xA;}&#xA;&#xA;/* Responsive design for segments */&#xA;@media (max-width: 768px) {&#xA;    .segment-track {&#xA;        flex-direction: column;&#xA;        align-items: stretch;&#xA;        padding: 12px;&#xA;        gap: 8px;&#xA;    }&#xA;    &#xA;    .segment-info {&#xA;        margin-right: 0;&#xA;        min-width: auto;&#xA;    }&#xA;    &#xA;    .segment-waveform {&#xA;        margin: 8px 0;&#xA;        height: 30px;&#xA;    }&#xA;    &#xA;    .waveform-bars {&#xA;        max-width: none;&#xA;    }&#xA;    &#xA;    .segment-controls {&#xA;        justify-content: center;&#xA;    }&#xA;    &#xA;    .timeline-ruler {&#xA;        flex-wrap: wrap;&#xA;        gap: 8px;&#xA;    }&#xA;}&#xA;    &lt;/style&gt;&#xA;    &lt;!-- Alpine.js for reactive data binding --&gt;&#xA;    &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js&#34;&gt;&lt;/script&gt;&#xA;&lt;/head&gt;&#xA;&lt;body x-data=&#34;$store.podcastRecorder&#34; x-init=&#34;init()&#34;&gt;&#xA;    &lt;div class=&#34;container&#34;&gt;&#xA;        &lt;header&gt;&#xA;            &lt;h2&gt;🎙️ Podcast Recorder&lt;/h2&gt;&#xA;            &lt;p&gt;Record your podcast episodes with timestamp markers&lt;/p&gt;</description>
    </item>
    <item>
      <title>Podcast Recorder</title>
      <link>https://lanziani.com/static/podcast-alpine/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      <guid>https://lanziani.com/static/podcast-alpine/</guid>
      <description>&lt;!DOCTYPE html&gt;&#xA;&lt;html lang=&#34;en&#34;&gt;&#xA;&lt;head&gt;&#xA;    &lt;meta charset=&#34;UTF-8&#34;&gt;&#xA;    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34;&gt;&#xA;    &lt;title&gt;Podcast Recorder&lt;/title&gt;&#xA;    &lt;style&gt;&#xA;/* Reset and Base Styles */&#xA;* {&#xA;    margin: 0;&#xA;    padding: 0;&#xA;    box-sizing: border-box;&#xA;}&#xA;&#xA;body {&#xA;    font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;&#xA;    line-height: 1.6;&#xA;    color: #333;&#xA;    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);&#xA;    min-height: 100vh;&#xA;}&#xA;&#xA;.container {&#xA;    max-width: 1200px;&#xA;    margin: 0 auto;&#xA;    padding: 20px;&#xA;}&#xA;&#xA;/* Header */&#xA;header {&#xA;    text-align: center;&#xA;    color: white;&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;header h2 {&#xA;    font-size: 2.5rem;&#xA;    margin-bottom: 10px;&#xA;    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);&#xA;}&#xA;&#xA;header p {&#xA;    font-size: 1.1rem;&#xA;    opacity: 0.9;&#xA;}&#xA;&#xA;/* Utility Classes */&#xA;.hidden {&#xA;    display: none !important;&#xA;}&#xA;&#xA;/* Buttons */&#xA;.btn {&#xA;    display: inline-flex;&#xA;    align-items: center;&#xA;    gap: 8px;&#xA;    padding: 12px 20px;&#xA;    border: none;&#xA;    border-radius: 8px;&#xA;    font-size: 1rem;&#xA;    font-weight: 600;&#xA;    cursor: pointer;&#xA;    transition: all 0.3s ease;&#xA;    text-decoration: none;&#xA;    background: #f8f9fa;&#xA;    color: #333;&#xA;}&#xA;&#xA;.btn:hover {&#xA;    transform: translateY(-2px);&#xA;    box-shadow: 0 4px 12px rgba(0,0,0,0.15);&#xA;}&#xA;&#xA;.btn:active {&#xA;    transform: translateY(0);&#xA;}&#xA;&#xA;.btn:disabled {&#xA;    opacity: 0.5;&#xA;    cursor: not-allowed;&#xA;    transform: none;&#xA;}&#xA;&#xA;.btn-primary {&#xA;    background: #007bff;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-primary:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.btn-secondary {&#xA;    background: #6c757d;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-secondary:hover {&#xA;    background: #545b62;&#xA;}&#xA;&#xA;.btn-record {&#xA;    background: #dc3545;&#xA;    color: white;&#xA;    font-size: 1.1rem;&#xA;    padding: 15px 25px;&#xA;}&#xA;&#xA;.btn-record:hover {&#xA;    background: #c82333;&#xA;}&#xA;&#xA;.btn-pause {&#xA;    background: #ffc107;&#xA;    color: #333;&#xA;}&#xA;&#xA;.btn-pause:hover {&#xA;    background: #e0a800;&#xA;}&#xA;&#xA;.btn-resume {&#xA;    background: #28a745;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-resume:hover {&#xA;    background: #1e7e34;&#xA;}&#xA;&#xA;.btn-stop {&#xA;    background: #6c757d;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-stop:hover {&#xA;    background: #545b62;&#xA;}&#xA;&#xA;.btn-timestamp {&#xA;    background: #17a2b8;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-timestamp:hover {&#xA;    background: #138496;&#xA;}&#xA;&#xA;.btn-success {&#xA;    background: #28a745;&#xA;    color: white;&#xA;}&#xA;&#xA;.btn-success:hover {&#xA;    background: #1e7e34;&#xA;}&#xA;&#xA;/* Sections */&#xA;.episode-section,&#xA;.recording-section {&#xA;    background: white;&#xA;    border-radius: 12px;&#xA;    padding: 30px;&#xA;    margin-bottom: 20px;&#xA;    box-shadow: 0 8px 25px rgba(0,0,0,0.1);&#xA;}&#xA;&#xA;/* Episode Controls */&#xA;.episode-controls {&#xA;    display: flex;&#xA;    gap: 15px;&#xA;    margin-bottom: 20px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;.episode-name,&#xA;#episodeName {&#xA;    flex: 1;&#xA;    min-width: 250px;&#xA;    padding: 12px 16px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 8px;&#xA;    font-size: 1rem;&#xA;    transition: border-color 0.3s ease;&#xA;}&#xA;&#xA;.episode-name:focus,&#xA;#episodeName:focus {&#xA;    outline: none;&#xA;    border-color: #007bff;&#xA;}&#xA;&#xA;/* Episodes List */&#xA;.episodes-list {&#xA;    display: grid;&#xA;    gap: 15px;&#xA;}&#xA;&#xA;.episode-item {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    padding: 15px 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;    border-left: 4px solid #007bff;&#xA;    transition: all 0.3s ease;&#xA;}&#xA;&#xA;.episode-item:hover {&#xA;    background: #e9ecef;&#xA;    transform: translateX(5px);&#xA;}&#xA;&#xA;.episode-info h3 {&#xA;    margin: 0 0 5px 0;&#xA;    color: #333;&#xA;}&#xA;&#xA;.episode-info p {&#xA;    margin: 0;&#xA;    color: #666;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.episode-actions {&#xA;    display: flex;&#xA;    gap: 10px;&#xA;}&#xA;&#xA;/* Current Episode */&#xA;.current-episode {&#xA;    text-align: center;&#xA;    margin-bottom: 30px;&#xA;    padding-bottom: 20px;&#xA;    border-bottom: 2px solid #e9ecef;&#xA;}&#xA;&#xA;.current-episode h2 {&#xA;    color: #333;&#xA;    margin-bottom: 5px;&#xA;}&#xA;&#xA;.episode-date {&#xA;    color: #666;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;/* Recording Controls */&#xA;.recording-controls {&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    gap: 15px;&#xA;    margin-bottom: 30px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;/* Recording Status */&#xA;.recording-status {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    margin-bottom: 30px;&#xA;    padding: 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;}&#xA;&#xA;.recording-indicator {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 10px;&#xA;    font-weight: 600;&#xA;}&#xA;&#xA;.status-dot {&#xA;    width: 12px;&#xA;    height: 12px;&#xA;    border-radius: 50%;&#xA;    background: #6c757d;&#xA;    transition: all 0.3s ease;&#xA;}&#xA;&#xA;.status-dot.recording {&#xA;    background: #dc3545;&#xA;    animation: pulse 1.5s infinite;&#xA;}&#xA;&#xA;.status-dot.paused {&#xA;    background: #ffc107;&#xA;}&#xA;&#xA;@keyframes pulse {&#xA;    0% { opacity: 1; transform: scale(1); }&#xA;    50% { opacity: 0.5; transform: scale(1.1); }&#xA;    100% { opacity: 1; transform: scale(1); }&#xA;}&#xA;&#xA;.recording-timer {&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    font-size: 1.5rem;&#xA;    font-weight: bold;&#xA;    color: #333;&#xA;}&#xA;&#xA;/* Audio Meter */&#xA;.audio-meter {&#xA;    margin-bottom: 20px;&#xA;}&#xA;&#xA;.audio-meter label {&#xA;    display: block;&#xA;    margin-bottom: 10px;&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;}&#xA;&#xA;.meter-container {&#xA;    height: 20px;&#xA;    background: #e9ecef;&#xA;    border-radius: 10px;&#xA;    overflow: hidden;&#xA;    position: relative;&#xA;}&#xA;&#xA;.meter-bar {&#xA;    height: 100%;&#xA;    background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 100%);&#xA;    width: 0%;&#xA;    transition: width 0.1s ease;&#xA;    border-radius: 10px;&#xA;}&#xA;&#xA;/* Audio Controls */&#xA;.audio-controls {&#xA;    margin-bottom: 30px;&#xA;    padding: 20px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 8px;&#xA;    border: 1px solid #e9ecef;&#xA;}&#xA;&#xA;.audio-input-section,&#xA;.audio-volume-section {&#xA;    margin-bottom: 15px;&#xA;}&#xA;&#xA;.audio-input-section label,&#xA;.audio-volume-section label {&#xA;    display: block;&#xA;    margin-bottom: 8px;&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.audio-input-select {&#xA;    flex: 1;&#xA;    padding: 8px 12px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 6px;&#xA;    font-size: 0.9rem;&#xA;    background: white;&#xA;    margin-right: 10px;&#xA;    min-width: 200px;&#xA;}&#xA;&#xA;.audio-input-select:focus {&#xA;    outline: none;&#xA;    border-color: #007bff;&#xA;}&#xA;&#xA;.audio-input-section {&#xA;    display: flex;&#xA;    flex-wrap: wrap;&#xA;    align-items: end;&#xA;    gap: 10px;&#xA;}&#xA;&#xA;.audio-input-section label {&#xA;    width: 100%;&#xA;    margin-bottom: 5px;&#xA;}&#xA;&#xA;.volume-control {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 15px;&#xA;}&#xA;&#xA;.volume-slider {&#xA;    flex: 1;&#xA;    height: 6px;&#xA;    background: #e9ecef;&#xA;    border-radius: 3px;&#xA;    outline: none;&#xA;    -webkit-appearance: none;&#xA;    appearance: none;&#xA;}&#xA;&#xA;.volume-slider::-webkit-slider-thumb {&#xA;    appearance: none;&#xA;    width: 18px;&#xA;    height: 18px;&#xA;    background: #007bff;&#xA;    border-radius: 50%;&#xA;    cursor: pointer;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.volume-slider::-webkit-slider-thumb:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.volume-slider::-moz-range-thumb {&#xA;    width: 18px;&#xA;    height: 18px;&#xA;    background: #007bff;&#xA;    border-radius: 50%;&#xA;    cursor: pointer;&#xA;    border: none;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.volume-slider::-moz-range-thumb:hover {&#xA;    background: #0056b3;&#xA;}&#xA;&#xA;.volume-value {&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    min-width: 45px;&#xA;    text-align: right;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.audio-info {&#xA;    padding: 10px;&#xA;    background: white;&#xA;    border-radius: 6px;&#xA;    border: 1px solid #e9ecef;&#xA;}&#xA;&#xA;.audio-source-info {&#xA;    font-size: 0.85rem;&#xA;    color: #666;&#xA;    font-style: italic;&#xA;}&#xA;&#xA;/* Timestamps Section */&#xA;.timestamps-section {&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;.timestamps-section h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.timestamp-controls {&#xA;    display: flex;&#xA;    gap: 15px;&#xA;    margin-bottom: 20px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;#timestampNote {&#xA;    flex: 1;&#xA;    min-width: 250px;&#xA;    padding: 10px 14px;&#xA;    border: 2px solid #e9ecef;&#xA;    border-radius: 6px;&#xA;    font-size: 0.95rem;&#xA;}&#xA;&#xA;#timestampNote:focus {&#xA;    outline: none;&#xA;    border-color: #17a2b8;&#xA;}&#xA;&#xA;.timestamps-list {&#xA;    max-height: 200px;&#xA;    overflow-y: auto;&#xA;    border: 1px solid #e9ecef;&#xA;    border-radius: 8px;&#xA;    background: #f8f9fa;&#xA;}&#xA;&#xA;.timestamp-item {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    align-items: center;&#xA;    padding: 12px 16px;&#xA;    border-bottom: 1px solid #e9ecef;&#xA;    transition: background 0.3s ease;&#xA;}&#xA;&#xA;.timestamp-item:last-child {&#xA;    border-bottom: none;&#xA;}&#xA;&#xA;.timestamp-item:hover {&#xA;    background: #e9ecef;&#xA;}&#xA;&#xA;.timestamp-time {&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    font-weight: bold;&#xA;    color: #17a2b8;&#xA;    min-width: 80px;&#xA;}&#xA;&#xA;.timestamp-note {&#xA;    flex: 1;&#xA;    margin-left: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.timestamp-actions {&#xA;    display: flex;&#xA;    gap: 8px;&#xA;}&#xA;&#xA;.btn-small {&#xA;    padding: 6px 12px;&#xA;    font-size: 0.85rem;&#xA;}&#xA;&#xA;/* Recording Preview */&#xA;.recording-preview {&#xA;    margin-bottom: 30px;&#xA;}&#xA;&#xA;.recording-preview h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.recording-info {&#xA;    margin-top: 10px;&#xA;    padding: 10px;&#xA;    background: #f8f9fa;&#xA;    border-radius: 6px;&#xA;    font-size: 0.9rem;&#xA;    color: #666;&#xA;}&#xA;&#xA;/* Episode Actions */&#xA;.episode-actions {&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    gap: 15px;&#xA;    flex-wrap: wrap;&#xA;}&#xA;&#xA;/* Modal */&#xA;.modal {&#xA;    position: fixed;&#xA;    top: 0;&#xA;    left: 0;&#xA;    width: 100%;&#xA;    height: 100%;&#xA;    background: rgba(0,0,0,0.5);&#xA;    display: flex;&#xA;    justify-content: center;&#xA;    align-items: center;&#xA;    z-index: 1000;&#xA;}&#xA;&#xA;.modal-content {&#xA;    background: white;&#xA;    padding: 30px;&#xA;    border-radius: 12px;&#xA;    max-width: 400px;&#xA;    text-align: center;&#xA;    box-shadow: 0 10px 30px rgba(0,0,0,0.3);&#xA;}&#xA;&#xA;.modal-content h3 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;}&#xA;&#xA;.modal-content p {&#xA;    margin-bottom: 20px;&#xA;    color: #666;&#xA;    line-height: 1.5;&#xA;}&#xA;&#xA;/* Responsive Design */&#xA;@media (max-width: 768px) {&#xA;    .container {&#xA;        padding: 15px;&#xA;    }&#xA;    &#xA;    header h2 {&#xA;        font-size: 2rem;&#xA;    }&#xA;    &#xA;    .recording-controls {&#xA;        flex-direction: column;&#xA;        align-items: center;&#xA;    }&#xA;    &#xA;    .recording-status {&#xA;        flex-direction: column;&#xA;        gap: 15px;&#xA;        text-align: center;&#xA;    }&#xA;    &#xA;    .episode-controls,&#xA;    .timestamp-controls {&#xA;        flex-direction: column;&#xA;    }&#xA;    &#xA;    #episodeName,&#xA;    #timestampNote {&#xA;        min-width: 100%;&#xA;    }&#xA;    &#xA;    .episode-item {&#xA;        flex-direction: column;&#xA;        align-items: flex-start;&#xA;        gap: 15px;&#xA;    }&#xA;    &#xA;    .episode-actions {&#xA;        justify-content: flex-start;&#xA;    }&#xA;    &#xA;    .audio-input-section {&#xA;        flex-direction: column;&#xA;        align-items: stretch;&#xA;    }&#xA;    &#xA;    .audio-input-select {&#xA;        margin-right: 0;&#xA;        margin-bottom: 10px;&#xA;        min-width: 100%;&#xA;    }&#xA;}&#xA;&#xA;@media (max-width: 480px) {&#xA;    .episode-section,&#xA;    .recording-section {&#xA;        padding: 20px;&#xA;    }&#xA;    &#xA;    .btn {&#xA;        padding: 10px 16px;&#xA;        font-size: 0.9rem;&#xA;    }&#xA;    &#xA;    .btn-record {&#xA;        padding: 12px 20px;&#xA;        font-size: 1rem;&#xA;    }&#xA;}&#xA;&#xA;/* Animation for smooth transitions */&#xA;.recording-section,&#xA;.episode-section {&#xA;    animation: fadeIn 0.5s ease-in;&#xA;}&#xA;&#xA;@keyframes fadeIn {&#xA;    from {&#xA;        opacity: 0;&#xA;        transform: translateY(20px);&#xA;    }&#xA;    to {&#xA;        opacity: 1;&#xA;        transform: translateY(0);&#xA;    }&#xA;}&#xA;&#xA;/* Recording Segments Visualization */&#xA;.segments-container {&#xA;    margin: 20px 0;&#xA;    padding: 20px;&#xA;    background: rgba(255, 255, 255, 0.95);&#xA;    border-radius: 12px;&#xA;    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);&#xA;}&#xA;&#xA;.segments-container h4 {&#xA;    margin-bottom: 15px;&#xA;    color: #333;&#xA;    font-size: 1.1rem;&#xA;    display: flex;&#xA;    align-items: center;&#xA;    gap: 8px;&#xA;}&#xA;&#xA;.segments-container h4::before {&#xA;    content: &#34;🎵&#34;;&#xA;    font-size: 1.2rem;&#xA;}&#xA;&#xA;.segments-timeline {&#xA;    display: flex;&#xA;    flex-direction: column;&#xA;    gap: 12px;&#xA;    margin-bottom: 15px;&#xA;}&#xA;&#xA;.segment-track {&#xA;    display: flex;&#xA;    align-items: center;&#xA;    padding: 12px 16px;&#xA;    border-radius: 8px;&#xA;    border: 2px solid rgba(255, 255, 255, 0.8);&#xA;    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);&#xA;    transition: transform 0.2s ease, box-shadow 0.2s ease;&#xA;    min-height: 60px;&#xA;}&#xA;&#xA;.segment-track:hover {&#xA;    transform: translateY(-2px);&#xA;    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);&#xA;}&#xA;&#xA;.segment-info {&#xA;    display: flex;&#xA;    flex-direction: column;&#xA;    gap: 2px;&#xA;    min-width: 120px;&#xA;    margin-right: 15px;&#xA;}&#xA;&#xA;.segment-number {&#xA;    font-weight: 600;&#xA;    color: #333;&#xA;    font-size: 0.9rem;&#xA;}&#xA;&#xA;.segment-duration {&#xA;    font-size: 0.8rem;&#xA;    color: #666;&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;}&#xA;&#xA;.segment-size {&#xA;    font-size: 0.75rem;&#xA;    color: #888;&#xA;    font-style: italic;&#xA;}&#xA;&#xA;.segment-waveform {&#xA;    flex: 1;&#xA;    height: 40px;&#xA;    margin: 0 15px;&#xA;    display: flex;&#xA;    align-items: center;&#xA;    justify-content: center;&#xA;}&#xA;&#xA;.waveform-bars {&#xA;    display: flex;&#xA;    align-items: end;&#xA;    gap: 2px;&#xA;    height: 100%;&#xA;    width: 100%;&#xA;    max-width: 300px;&#xA;}&#xA;&#xA;.wave-bar {&#xA;    flex: 1;&#xA;    background: linear-gradient(to top, &#xA;        rgba(255, 255, 255, 0.8) 0%, &#xA;        rgba(255, 255, 255, 0.6) 50%, &#xA;        rgba(255, 255, 255, 0.4) 100%);&#xA;    border-radius: 1px;&#xA;    min-height: 4px;&#xA;    animation: wave-pulse 2s ease-in-out infinite;&#xA;}&#xA;&#xA;@keyframes wave-pulse {&#xA;    0%, 100% { opacity: 0.6; }&#xA;    50% { opacity: 1; }&#xA;}&#xA;&#xA;.segment-controls {&#xA;    display: flex;&#xA;    gap: 6px;&#xA;    align-items: center;&#xA;}&#xA;&#xA;.btn-tiny {&#xA;    padding: 6px 8px;&#xA;    font-size: 0.8rem;&#xA;    min-width: 32px;&#xA;    height: 32px;&#xA;    border-radius: 6px;&#xA;    background: rgba(255, 255, 255, 0.9);&#xA;    border: 1px solid rgba(0, 0, 0, 0.1);&#xA;    color: #333;&#xA;    transition: all 0.2s ease;&#xA;}&#xA;&#xA;.btn-tiny:hover {&#xA;    background: white;&#xA;    transform: scale(1.05);&#xA;    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);&#xA;}&#xA;&#xA;.timeline-ruler {&#xA;    display: flex;&#xA;    justify-content: space-between;&#xA;    padding: 8px 16px;&#xA;    border-top: 1px solid rgba(0, 0, 0, 0.1);&#xA;    margin-top: 15px;&#xA;    background: rgba(255, 255, 255, 0.5);&#xA;    border-radius: 6px;&#xA;}&#xA;&#xA;.time-mark {&#xA;    font-size: 0.75rem;&#xA;    color: #666;&#xA;    font-family: &#39;Courier New&#39;, monospace;&#xA;    padding: 2px 6px;&#xA;    background: rgba(255, 255, 255, 0.8);&#xA;    border-radius: 4px;&#xA;}&#xA;&#xA;.audio-preview-section {&#xA;    margin-top: 15px;&#xA;    padding-top: 15px;&#xA;    border-top: 1px solid rgba(0, 0, 0, 0.1);&#xA;}&#xA;&#xA;/* Responsive design for segments */&#xA;@media (max-width: 768px) {&#xA;    .segment-track {&#xA;        flex-direction: column;&#xA;        align-items: stretch;&#xA;        padding: 12px;&#xA;        gap: 8px;&#xA;    }&#xA;    &#xA;    .segment-info {&#xA;        margin-right: 0;&#xA;        min-width: auto;&#xA;    }&#xA;    &#xA;    .segment-waveform {&#xA;        margin: 8px 0;&#xA;        height: 30px;&#xA;    }&#xA;    &#xA;    .waveform-bars {&#xA;        max-width: none;&#xA;    }&#xA;    &#xA;    .segment-controls {&#xA;        justify-content: center;&#xA;    }&#xA;    &#xA;    .timeline-ruler {&#xA;        flex-wrap: wrap;&#xA;        gap: 8px;&#xA;    }&#xA;}&#xA;    &lt;/style&gt;&#xA;    &lt;!-- Alpine.js for reactive data binding --&gt;&#xA;    &lt;script defer src=&#34;https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js&#34;&gt;&lt;/script&gt;&#xA;&lt;/head&gt;&#xA;&lt;body x-data=&#34;$store.podcastRecorder&#34; x-init=&#34;init()&#34;&gt;&#xA;    &lt;div class=&#34;container&#34;&gt;&#xA;        &lt;header&gt;&#xA;            &lt;h2&gt;🎙️ Podcast Recorder&lt;/h2&gt;&#xA;            &lt;p&gt;Record your podcast episodes with timestamp markers&lt;/p&gt;</description>
    </item>
  </channel>
</rss>
