@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#263349;background:#f6f8fb;font-synthesis:none;--surface:#fff;--line:#e6ebf2;--muted:#7c8799;--blue:#4165e7;--soft:#edf1ff}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:transparent;color:inherit;border-radius:8px;padding:10px 12px;transition:background .15s}button:hover{background:var(--soft)}button:focus-visible,a:focus-visible{outline:3px solid #91a7ff}button:disabled{opacity:.4;cursor:default}.primary{background:var(--blue);color:white;font-weight:600;box-shadow:0 3px 8px #4165e71a}.primary:hover{background:#3153ce}aside{width:248px;position:fixed;inset:0 auto 0 0;background:var(--surface);border-right:1px solid var(--line);padding:32px 20px;display:flex;flex-direction:column;z-index:5;overflow:auto}.brand{display:flex;gap:10px;align-items:center;font-size:25px;color:var(--blue);text-decoration:none;font-weight:700}.brand span{font-size:20px;color:#263349}.brand small{display:block;letter-spacing:2px;font-size:8px;color:var(--muted);margin-top:5px}.new{margin:35px 0 30px;text-align:left;padding:14px 20px}.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--muted);font-weight:700}nav{margin-top:12px}nav button{display:flex;width:100%;gap:13px;align-items:center;text-align:left;margin:4px 0;padding:13px 15px}nav button.active{color:var(--blue);background:var(--soft)}nav b{margin-left:auto;font-size:11px;background:#fff9;padding:2px 6px;border-radius:4px}.folder-heading{display:flex;align-items:center;justify-content:space-between;margin:27px 10px 8px}.folder{display:flex;align-items:center}.folder>button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.folder>button:not(:first-child){font-size:12px;padding:7px}.folder.active{background:var(--soft);border-radius:8px;color:var(--blue)}.subtle{font-size:12px;color:var(--muted);text-align:left;margin-top:8px}.sidebar-bottom{margin-top:auto;padding-top:40px}.sidebar-bottom>button{display:block;width:100%;text-align:left;font-size:13px}.local-note{font-size:10px;color:#637b72;border:1px solid var(--line);border-radius:9px;padding:13px 9px;margin-bottom:15px}.local-note small{display:block;color:var(--muted);font-size:9px;margin:7px 0 0 12px}.workspace{margin-left:248px}.player{height:110px;position:sticky;top:0;z-index:3;background:var(--surface);display:flex;align-items:center;gap:20px;padding:18px 30px;border-bottom:1px solid var(--line)}.now{min-width:130px;flex:1}.now strong{display:block;font-size:13px;margin:7px 0;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now small{color:var(--muted);font-size:10px}.transport{display:flex;align-items:center;gap:5px}.transport button{position:relative;font-size:15px}.transport small{display:block;font-size:8px}.play-main{width:46px;height:46px;background:var(--blue);color:white;border-radius:50%;box-shadow:0 4px 12px #4165e733}.player-selects{display:flex;gap:14px;margin-left:auto}.player-selects label{font-size:8px;letter-spacing:1px;color:var(--muted)}.player-selects select{display:block;margin-top:6px;max-width:175px;font-size:11px;padding:6px;border:none;background:var(--surface);color:inherit}progress{position:absolute;bottom:0;left:0;width:100%;height:3px;border:0;accent-color:var(--blue)}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--blue)}main{max-width:1300px;margin:auto;padding:48px 48px 25px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}h1{font-size:32px;letter-spacing:-1px;margin:10px 0}p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}.filters{display:flex;gap:12px;background:var(--surface);padding:12px;border:1px solid var(--line);border-radius:12px}input,select{border:1px solid var(--line);border-radius:7px;background:var(--surface);color:inherit;padding:11px;font-size:12px}.filters input{flex:1;min-width:100px;border:0;background:#f6f8fb}.list-heading{display:flex;justify-content:space-between;margin:27px 0 16px;font-size:11px;color:var(--muted)}.list-heading span+span{font-size:9px;letter-spacing:1.4px}#cards{display:grid;gap:13px}.card{display:flex;gap:20px;padding:23px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 3px 7px #25324b03}.card.selected{border-color:#8097ee;background:var(--soft)}.card-play{background:var(--soft);color:var(--blue);width:44px;height:44px;border-radius:12px;flex-shrink:0;align-self:center}.card-body{min-width:0;flex:1}.card-title{font-size:15px;font-weight:600;text-align:left;padding:0}.preview{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:9px 0 14px;font-size:12px;color:var(--muted)}.card-meta{font-size:10px;color:var(--muted);display:flex;gap:17px;align-items:center}.tag{padding:4px 7px;background:#f1f4f9;border-radius:4px;color:#66748b}.card-tools{display:flex;align-items:center;gap:4px}.star{font-size:20px;color:#bd9045}.card-tools select{width:76px;font-size:11px}.empty{text-align:center;padding:70px 25px;background:var(--surface);border:1px dashed #ccd5e5;border-radius:12px}.empty-icon{color:var(--blue);font-size:44px}.empty h2{font-size:22px}.empty .primary{margin-top:25px}.footnote{text-align:center;margin-top:42px;font-size:11px;color:#94a0b1}#back{color:var(--muted);padding-left:0;margin-bottom:25px}.editor-heading{display:flex;gap:20px;align-items:center}#title{font-size:29px;font-weight:600;border:0;background:transparent;flex:1;min-width:0;padding-left:0}.metadata{display:flex;align-items:center;flex-wrap:wrap;gap:20px;color:var(--muted);font-size:11px;margin:15px 0 24px}.metadata select{margin-left:6px}textarea{width:100%;min-height:52vh;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;line-height:1.9;padding:30px;font-size:16px;outline-color:var(--blue)}textarea::placeholder{color:#9ca6b5}.editor-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px;font-size:12px}.danger{color:#bd4553}dialog{border:1px solid var(--line);border-radius:18px;background:var(--surface);color:inherit;padding:30px;width:min(460px,92vw);box-shadow:0 20px 100px #15274c30}dialog::backdrop{background:#172b4b55;backdrop-filter:blur(3px)}dialog h2{font-size:20px}.dialog-heading{display:flex;justify-content:space-between;align-items:center}dialog label{display:block;margin:18px 0;font-size:12px}dialog label>select,dialog label>input:not([type=checkbox]){display:block;width:100%;margin-top:8px}dialog .check{display:flex;gap:10px;align-items:center}.hint{font-size:11px;margin:20px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}#action-input,#action-select{width:100%;margin-top:20px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#263349;color:white;border-radius:9px;padding:12px 20px;box-shadow:0 5px 20px #0002;z-index:20;font-size:13px;display:none}body.collapsed aside{display:none}body.collapsed .workspace{margin-left:0}body.dark{--surface:#202a3b;--line:#354156;--muted:#a2aec2;--soft:#2b395b;background:#151d2c;color:#e1e7f0}.dark .brand span{color:#e1e7f0}.dark .filters input,.dark .tag{background:#283449;color:#b9c6da}[hidden]{display:none!important}@media(min-width:1450px){main{padding-top:60px}.player{gap:35px}}@media(max-width:1100px){aside{width:210px;padding:25px 15px}.workspace{margin-left:210px}main{padding:30px 25px}.player{gap:10px;padding:16px}.now{min-width:90px}.player-selects select{max-width:120px}.transport{gap:0}.transport button{padding:8px}}@media(max-width:800px){aside{display:none;width:245px;box-shadow:10px 0 30px #0002;top:125px}body.drawer aside{display:flex}.workspace{margin-left:0}.player{height:125px;flex-wrap:wrap;gap:8px;padding:10px 15px}.now{flex:1}.transport{margin-left:auto}.player-selects{width:100%;justify-content:flex-end}.player-selects label{display:flex;align-items:center;gap:7px}.player-selects select{margin:0;max-width:210px}main{padding:30px 18px}.page-heading{gap:12px}h1{font-size:27px}.page-heading .eyebrow{font-size:8px}.filters{flex-wrap:wrap}.filters input{flex-basis:100%}.filters select{flex:1}.card{padding:16px;gap:12px}.card-tools{flex-direction:column}.card-meta{gap:7px;flex-wrap:wrap}.list-heading span+span{display:none}.editor-heading{gap:7px}#title{font-size:23px}.metadata{gap:10px}textarea{padding:20px}.footnote{font-size:10px}}
@media(max-width:800px){.page-heading>div{min-width:0}.page-heading>.primary{flex-shrink:0;font-size:11px;padding:10px}.page-heading .eyebrow{letter-spacing:1px}.now{min-width:0}.now strong{max-width:105px}.transport button{padding:6px;font-size:12px}.transport .play-main{width:38px;height:38px}.player-selects{min-width:0}.player-selects select{max-width:190px}.card-title{max-width:100%;overflow-wrap:anywhere}.card-meta{min-width:0}.tag{max-width:100%;overflow-wrap:anywhere}}
#cards{grid-template-columns:minmax(0,1fr)}.card{min-width:0}
/* Reading overlay follows native textarea wrapping and scrolling. */
.reading-editor{position:relative;background:var(--surface);border-radius:12px}
.reading-editor textarea{position:relative;z-index:1;display:block}
.reading-editor.is-reading textarea{background:transparent}
.reading-highlight{position:absolute;inset:0;pointer-events:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;color:transparent;border-style:solid;border-color:transparent;border-radius:12px;z-index:0}
.reading-highlight mark{background:rgba(139,119,245,.25);color:transparent;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

.card{cursor:pointer}

/* Real audio timeline beneath the existing controls. */
.player{height:140px;padding-bottom:45px}.audio-timeline{position:absolute;bottom:9px;left:30px;right:30px;display:flex;align-items:center;gap:10px;font-size:11px;font-variant-numeric:tabular-nums}.audio-timeline input{flex:1;min-width:0;padding:0;accent-color:var(--blue);cursor:pointer}.audio-timeline input:disabled{cursor:wait;opacity:.45}@media(max-width:800px){.player{height:155px;padding-bottom:40px}.audio-timeline{left:15px;right:15px}aside{top:155px}}