.export-button{padding:8px 16px!important;font-size:16px}.play-button{padding:8px!important;width:40px;height:40px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}:root{--bg-color: #ffffff;--text-color: #0f172a;--panel-bg: #f7f7f7;--border-color: #e0e0e0;--accent-color: #4caf50;--highlight-color: #ff9800;--muted-text: #4b5563;--status-info-bg: #e3f2fd;--status-info-text: #1976d2;--status-error-bg: #ffebee;--status-error-text: #c62828;--status-success-bg: #e8f5e9;--status-success-text: #2e7d32;--canvas-grid: rgba(0, 0, 0, .06);--spectrogram-low: #0f172a;--spectrogram-high: #7ee0a3}@media(prefers-color-scheme:dark){:root{--bg-color: #0b1221;--text-color: #e5e7eb;--panel-bg: #0f172a;--border-color: #1f2937;--accent-color: #7df2b8;--highlight-color: #fbbf24;--muted-text: #9ca3af;--status-info-bg: #102035;--status-info-text: #9bdcff;--status-error-bg: #2b1111;--status-error-text: #fca5a5;--status-success-bg: #0f2018;--status-success-text: #a7f3d0;--canvas-grid: rgba(255, 255, 255, .06);--spectrogram-low: #0b1221;--spectrogram-high: #a7f3d0}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-color);color:var(--text-color);max-width:800px;margin:0 auto;padding:16px;line-height:1.6}h1{color:var(--text-color);border-bottom:2px solid var(--accent-color);padding-bottom:10px}.container{background:var(--panel-bg);padding:10px;border-radius:8px;margin:12px 0;border:1px solid var(--border-color)}label{display:block;margin-bottom:5px;font-weight:700;color:var(--muted-text)}textarea{width:100%;min-height:100px;border:2px solid var(--border-color);border-radius:4px;font-size:16px;font-family:inherit;box-sizing:border-box;resize:vertical}textarea:focus{outline:none;border-color:var(--accent-color)}select{width:100%;border:2px solid var(--border-color);border-radius:4px;font-size:16px;font-family:inherit;box-sizing:border-box;background:var(--panel-bg);color:var(--text-color)}select:focus{outline:none;border-color:var(--accent-color)}input[type=text]{width:100%;border:2px solid var(--border-color);border-radius:4px;font-size:16px;font-family:inherit;box-sizing:border-box;background:var(--panel-bg);color:var(--text-color)}input[type=text]::placeholder{color:var(--muted-text)}input[type=text]:focus{outline:none;border-color:var(--accent-color)}.text-input{min-height:144px;height:100%}button{background-color:var(--accent-color);color:#0b1a10;border:none;padding:12px 24px;font-size:16px;border-radius:4px;cursor:pointer;margin-top:10px;transition:background-color .3s}button:hover{filter:brightness(.95)}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon{width:40px;height:40px;fill:currentColor;display:block}.secondary-button{background:transparent;color:var(--text-color);border:1px solid var(--border-color);margin-right:8px}.controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}.style-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}.style-row select,.style-row input[type=text]{flex:1;min-width:0}.style-row__random-toggle{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--text-color);font-size:14px}.style-row__random-toggle input{margin:0}.input-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}.input-column{display:flex;flex-direction:column;gap:10px}.input-visualizer{height:100%}@media(max-width:720px){.input-row{grid-template-columns:1fr}}.status{margin-top:15px;padding-left:10px;border-radius:4px;min-height:24px;visibility:hidden}.status.info{background-color:var(--status-info-bg);color:var(--status-info-text);border:1px solid var(--border-color)}.status.error{background-color:var(--status-error-bg);color:var(--status-error-text);border:1px solid var(--border-color)}.status.success{background-color:var(--status-success-bg);color:var(--status-success-text);border:1px solid var(--border-color)}.helper-text{margin:0 0 6px;color:var(--muted-text);font-size:13px}.code-block{background:var(--bg-color);border:1px solid var(--border-color);padding:12px;border-radius:6px;font-family:ui-monospace,SFMono-Regular,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;overflow-x:auto}.info{margin-top:10px}.visualizer-grid{display:grid;grid-template-columns:1fr;gap:8px;background-image:linear-gradient(to right,transparent 0,transparent 9px,var(--canvas-grid) 9px,var(--canvas-grid) 10px),linear-gradient(to bottom,transparent 0,transparent 9px,var(--canvas-grid) 9px,var(--canvas-grid) 10px);background-size:10px 10px}.visualizer__title{font-weight:700;margin-bottom:6px;color:var(--muted-text)}.visualizer__frame{position:relative}.visualizer__action{position:absolute;top:8px;right:8px;padding:6px 10px;margin:0;font-size:13px;border:1px solid var(--border-color);background:var(--panel-bg);color:var(--text-color);border-radius:6px}.playback-progress{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-color);pointer-events:none;opacity:0;transform:translate(-50%);transition:opacity .15s ease;border-radius:999px;z-index:2}.playback-progress.is-active{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}canvas{width:100%;height:144px;background:var(--bg-color);border:1px solid var(--border-color);border-radius:6px}#spectrogram{background:linear-gradient(to top,var(--spectrogram-low),var(--spectrogram-high))}.loop-control{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--muted-text);padding-left:4px}.favorites-panel{margin-top:8px;display:flex;flex-direction:column;gap:12px}#favoritesPanel[hidden]{display:none}.favorites-section__header{display:flex;align-items:center;gap:4px;margin-bottom:6px}.favorites-section__header .favorites-section__title{margin-bottom:0;flex:1}.favorites-section__title{font-weight:600;color:var(--muted-text);margin-bottom:6px}.icon-button{background:none;border:1px solid var(--border-color);border-radius:4px;color:var(--muted-text);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px}.icon-button:hover{background:var(--border-color)}.text-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.text-list__item{display:flex;gap:8px;align-items:stretch}.text-list__text{flex:1;text-align:left;background:var(--bg-color);border:1px solid var(--border-color);border-radius:6px;padding:10px;color:var(--text-color);cursor:pointer;font-size:14px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.text-list__text:hover{border-color:var(--accent-color)}.text-list__action{min-width:40px;padding:0 10px;font-weight:700}.text-list__action--add{background:#e8f5e9;color:#16a34a;border:1px solid #16a34a}.text-list__action--remove{background:#ffebee;color:#dc2626;border:1px solid #dc2626}#usagePanel[hidden]{display:none}.repo-link{position:fixed;left:12px;bottom:12px;color:var(--muted-text);text-decoration:none;opacity:1;font-size:13px;transition:opacity .2s ease}.repo-link:hover,.repo-link:focus-visible{opacity:1;text-decoration:underline}.settings-container{position:fixed;top:12px;right:12px;z-index:100;display:flex;flex-direction:column;align-items:flex-end}.settings-toggle-button{margin:0}.settings-panel{margin-top:4px;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:220px;box-shadow:0 4px 12px #00000026}#settingsPanel[hidden]{display:none}.settings-field{display:flex;flex-direction:column;gap:4px}.settings-field label{font-size:13px;margin-bottom:0}.settings-number-input{width:100%;border:2px solid var(--border-color);border-radius:4px;font-size:14px;font-family:inherit;box-sizing:border-box;background:var(--bg-color);color:var(--text-color);padding:4px 6px}.settings-number-input:focus{outline:none;border-color:var(--accent-color)}.intonation-area{display:flex;flex-direction:column;gap:12px}.intonation-canvas-wrapper{display:grid;grid-template-columns:88px 1fr;column-gap:12px;align-items:stretch;touch-action:none;overscroll-behavior:contain}.intonation-side{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;align-content:stretch}.intonation-canvas-area{display:flex;justify-content:flex-end;align-items:center}.intonation-range-value{position:relative;padding:4px 6px;font-size:13px;color:var(--muted-text);background:var(--panel-bg);border-radius:4px;pointer-events:none;z-index:1}.intonation-range-value--max{align-self:flex-start}.intonation-range-value--min{align-self:flex-end}.intonation-controls{position:relative;left:auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}.intonation-controls__button{padding:4px 6px;font-size:13px;margin-top:0;width:100%}.intonation-labels{position:relative;min-height:36px;font-weight:600;color:var(--muted-text)}.intonation-label{position:absolute;top:0;transform:translate(-50%);white-space:nowrap;font-size:14px;display:flex;flex-direction:column;align-items:center}.intonation-label__key{color:var(--muted-text);opacity:.6;font-weight:700;font-size:11px}.intonation-label--hover{color:var(--text-color);opacity:1}.intonation-label--hover .intonation-label__key{opacity:1}#intonationCanvas{width:100%;height:200px;touch-action:none}.text-list__pill{display:inline-block;padding:2px 6px;margin-right:6px;border-radius:999px;background:var(--border-color);color:var(--muted-text);font-size:12px;vertical-align:middle}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#00000059;z-index:50}.modal[hidden]{display:none}.modal__content{background:var(--panel-bg);color:var(--text-color);padding:16px;border-radius:10px;border:1px solid var(--border-color);min-width:280px;max-width:420px;box-shadow:0 10px 40px #0003}.modal__title{font-weight:700;margin-bottom:8px}.modal__body{margin:0 0 12px;color:var(--muted-text)}.modal__actions{display:flex;justify-content:flex-end;gap:8px}