*{margin:0;padding:0;box-sizing:border-box}:root{--mint-50: #ecfbf5;--mint-100: #d1f5e6;--mint-200: #a6ecd0;--mint-400: #3dd9b0;--mint-500: #1fc298;--mint-600: #14a07c;--mint-700: #117e64;--sky-50: #eef9ff;--sky-400: #4dbcff;--sky-500: #2aa3f5;--ink-900: #0e1f1a;--ink-700: #334842;--ink-500: #6f8983;--ink-400: #9aafa9;--ink-300: #c5d3cf;--ink-200: #e2eae7;--ink-100: #eef3f1;--ink-50: #f6f9f8;--white: #ffffff;--fg-1: var(--ink-900);--fg-2: var(--ink-700);--fg-3: var(--ink-500);--bg-1: var(--white);--border-1: var(--ink-200);--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;--font-display: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;--font-latin: "Inter", "Helvetica Neue", Arial, sans-serif;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--shadow-sm: 0 2px 6px rgba(15, 96, 78, .07), 0 1px 2px rgba(15, 96, 78, .04);--shadow-md: 0 8px 24px rgba(15, 96, 78, .08), 0 2px 6px rgba(15, 96, 78, .05);--shadow-lg: 0 16px 48px rgba(15, 96, 78, .1), 0 4px 12px rgba(15, 96, 78, .06);--shadow-mint: 0 12px 32px rgba(31, 194, 152, .28);--ease-out: cubic-bezier(.22, 1, .36, 1);--dur-fast: .12s;--dur-base: .2s;--tracking-jp-body: .04em}body{font-family:var(--font-jp);letter-spacing:var(--tracking-jp-body);line-height:1.6;color:var(--fg-1);background:linear-gradient(180deg,var(--sky-50) 0%,var(--mint-50) 38%,var(--white) 78%);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;justify-content:center;align-items:center;min-height:100vh}#app{width:100%;max-width:480px;background-color:var(--bg-1);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:28px;margin:16px}.header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:24px}.brand-mark{display:inline-flex;width:36px;height:36px;border-radius:var(--radius-md);box-shadow:var(--shadow-mint)}.brand-mark svg{width:100%;height:100%;border-radius:inherit}.header h1{font-family:var(--font-display);font-size:1.35rem;font-weight:900;letter-spacing:.02em;color:var(--fg-1)}#drop-zone{border:2px dashed var(--ink-300);border-radius:var(--radius-lg);padding:44px 20px;text-align:center;cursor:pointer;background-color:var(--white);transition:border-color var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}#drop-zone:hover,#drop-zone.dragover{border-color:var(--mint-400);background-color:var(--mint-50)}#drop-zone.hidden{display:none}.drop-zone-icon{display:inline-flex;margin-bottom:12px;color:var(--mint-500)}.drop-zone-icon svg{width:40px;height:40px}#drop-zone p{color:var(--fg-2);font-size:.95rem}.drop-zone-sub{color:var(--fg-3)!important;font-size:.85rem!important;margin-top:4px}.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 20px}.loading.hidden{display:none}.loading p{color:var(--fg-3);font-size:.9rem}.loading-spinner{width:36px;height:36px;border:3px solid var(--mint-100);border-top-color:var(--mint-400);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player{display:flex;flex-direction:column;align-items:center;gap:18px}.player.hidden{display:none}.file-name{font-size:.9rem;font-weight:500;color:var(--fg-2);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.waveform-container{width:100%;height:120px;background-color:var(--ink-50);border:1px solid var(--border-1);border-radius:var(--radius-md);overflow:hidden}.waveform-container canvas{width:100%;height:100%;display:block;cursor:pointer}.time-display{font-family:var(--font-latin);font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--fg-3)}.time-separator{margin:0 6px;color:var(--ink-300)}.playback-controls{display:flex;align-items:center;gap:20px}.control-btn{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}.control-btn svg{display:block}.play-btn{width:60px;height:60px;border-radius:50%;background-color:var(--mint-400);color:var(--white);box-shadow:var(--shadow-mint)}.play-btn svg{width:26px;height:26px}.play-btn:hover{background-color:var(--mint-500)}.play-btn:active{background-color:var(--mint-600);box-shadow:none}.skip-btn{width:44px;height:44px;border-radius:50%;background-color:transparent;color:var(--fg-2)}.skip-btn svg{width:20px;height:20px}.skip-btn:hover{background-color:var(--mint-50);color:var(--mint-600)}.skip-btn:active{background-color:var(--mint-100)}.speed-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.speed-btn{padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-1);background-color:var(--white);color:var(--fg-2);font-family:var(--font-latin);font-size:.8rem;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.speed-btn:hover{border-color:var(--mint-400);color:var(--mint-600)}.speed-btn.active{background-color:var(--mint-400);border-color:var(--mint-400);color:var(--white)}.chapters{width:100%;margin-top:4px}.chapters.hidden{display:none}.chapters-title{font-size:.78rem;font-weight:700;color:var(--fg-3);margin-bottom:8px;letter-spacing:.06em}.chapter-list{list-style:none;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.chapter-item{display:flex;align-items:baseline;gap:12px;padding:9px 12px;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out)}.chapter-item:hover{background-color:var(--ink-50)}.chapter-item.active{background-color:var(--mint-50)}.chapter-time{font-family:var(--font-latin);font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--fg-3);flex-shrink:0;min-width:3.2em}.chapter-item.active .chapter-time{color:var(--mint-600)}.chapter-title{font-size:.88rem;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chapter-item.active .chapter-title{color:var(--mint-700);font-weight:700}:focus-visible{outline:2px solid var(--mint-400);outline-offset:2px}