:root{--recorder-bg: #e8e4dc;--recorder-panel: #d4cfc4;--recorder-button: #c4bfb2;--recorder-button-active: #a8a296;--recorder-accent: #8b7355;--recorder-rec: #c22;--recorder-text: #2a2520;--recorder-text-muted: #5a5550;--recorder-list-bg: #f0ede8}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;background:var(--recorder-bg);color:var(--recorder-text)}#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem}.recorder-panel{width:100%;max-width:20rem;padding:1.5rem;background:var(--recorder-panel);border-radius:1rem;box-shadow:inset 0 1px #fff6,0 4px 12px #00000026;border:2px solid var(--recorder-button-active);margin-bottom:1.5rem}.recorder-title{margin:0 0 1rem;font-size:1.25rem;font-weight:700;color:var(--recorder-text);text-align:center;letter-spacing:.02em}.rec-indicator{height:1.25rem;margin-bottom:.75rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--recorder-text-muted);text-align:center}.rec-indicator.rec-on{color:var(--recorder-rec);animation:rec-blink 1s step-end infinite}@keyframes rec-blink{50%{opacity:.7}}.btn-record{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:1rem 1.5rem;font-size:1rem;font-weight:600;color:var(--recorder-text);background:var(--recorder-button);border:2px solid var(--recorder-button-active);border-radius:.5rem;cursor:pointer;box-shadow:inset 0 1px #ffffff4d,0 2px 4px #0000001a}.btn-record:hover{background:var(--recorder-button-active)}.btn-record.recording{background:var(--recorder-rec);color:#fff;border-color:#a11}.btn-record.recording:hover{background:#a11}.btn-record .btn-icon{font-size:.85em}.btn-record.hidden{display:none}.preview-box{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--recorder-button-active)}.preview-box.hidden{display:none}.audio-preview{width:100%;margin-bottom:.75rem;accent-color:var(--recorder-accent)}.preview-actions{display:flex;gap:.5rem;justify-content:center}.btn-discard,.btn-save{padding:.5rem 1rem;font-size:.9rem;font-weight:600;border:2px solid var(--recorder-button-active);border-radius:.4rem;cursor:pointer;background:var(--recorder-button);color:var(--recorder-text)}.btn-discard:hover,.btn-save:hover{background:var(--recorder-button-active)}.btn-save{background:var(--recorder-accent);color:#fff;border-color:#6b5a45}.btn-save:hover{background:#6b5a45}.error-msg{margin:.75rem 0 0;font-size:.85rem;color:var(--recorder-rec)}.list-section{width:100%;max-width:24rem;margin-top:.5rem}.recordings-list-container .list-title{margin:0 0 .25rem;font-size:1rem;font-weight:600;color:var(--recorder-text)}.link-to-list{display:inline-block;margin-bottom:.5rem;font-size:.85rem;color:var(--recorder-accent)}.link-to-list:hover{text-decoration:underline}.recordings-list{list-style:none;margin:0;padding:0;background:var(--recorder-list-bg);border-radius:.5rem;border:1px solid var(--recorder-button-active);overflow:hidden}.recordings-list-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--recorder-button)}.recordings-list-item:last-child{border-bottom:none}.recording-link{flex:1;font-size:.9rem;color:var(--recorder-text);text-decoration:none}.recording-link:hover{text-decoration:underline;color:var(--recorder-accent)}.list-empty{padding:1rem;font-size:.9rem;color:var(--recorder-text-muted)}.btn-delete{padding:.25rem .5rem;font-size:.75rem;font-weight:600;color:var(--recorder-text-muted);background:transparent;border:1px solid var(--recorder-button-active);border-radius:.25rem;cursor:pointer}.btn-delete:hover{color:var(--recorder-rec);border-color:var(--recorder-rec)}.play-panel{width:100%;max-width:20rem;padding:1.5rem;background:var(--recorder-panel);border-radius:1rem;box-shadow:inset 0 1px #fff6,0 4px 12px #00000026;border:2px solid var(--recorder-button-active)}.back-link{display:inline-block;margin-bottom:1rem;font-size:.9rem;font-weight:600;color:var(--recorder-accent);text-decoration:none}.back-link:hover{text-decoration:underline}.play-content{margin-top:.5rem}.play-title{margin:0 0 .75rem;font-size:1rem;font-weight:600;color:var(--recorder-text);font-variant-numeric:tabular-nums}.play-content audio{width:100%;margin-bottom:1rem;accent-color:var(--recorder-accent)}.play-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.btn-transmission{padding:.5rem 1rem;font-size:.85rem;font-weight:600;border:2px solid var(--recorder-button-active);border-radius:.4rem;cursor:pointer;background:var(--recorder-button);color:var(--recorder-text)}.btn-transmission:hover{background:var(--recorder-button-active)}.play-content .btn-save{margin-top:.5rem}.not-found{margin:0 0 .5rem;color:var(--recorder-text-muted)}#app>.back-link{margin-bottom:1rem}