/* listen/listen.css — LISTEN-2 (28 Oct 2026). The pages /listen/s/ (one story) and
   /listen/make/ (make your own) load styles.css (direction D) and this file.
   The d:listen-lib block is the same text as in /listen/index.html's style
   block (that page loads tokens.css, not styles.css); scripts/test-listen-make.js
   fails when the two differ. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.l-page{max-width:var(--content-w,1120px);margin:0 auto;padding:calc(var(--nav-h, 64px) + 40px) var(--gutter,16px) 56px}
.l-page .d-mark{display:block;width:44px;height:44px;margin:0 0 14px}
.l-page h2{margin:0 0 8px;font:700 clamp(1.25rem,1rem + 1vw,1.625rem)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.hnote{margin:0 0 14px;max-width:64ch;font-size:var(--fs-caption);line-height:1.6;color:var(--text-2)}
.hnote a,.sn-more a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sn-more{display:flex;flex-wrap:wrap;gap:10px 24px;margin:20px 0 0;font-size:var(--fs-caption)}
#sn-one{max-width:720px;margin-top:8px}
/* d:listen-lib:start */
.lib-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 6px}
.lib-langs,.lib-chips{display:flex;flex-wrap:wrap;gap:8px}
.lib-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--btn-r);background:transparent;color:var(--ink);font:500 var(--fs-caption)/1.2 var(--font-sans);cursor:pointer}
.lib-chip small{font:600 11px/1 var(--font-mono);color:var(--text-2)}
.lib-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.lib-chip[aria-pressed="true"] small{color:var(--bg)}
.lib-q input{box-sizing:border-box;width:min(320px,100%);min-height:40px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--btn-r);background:var(--surface);color:var(--ink);font:400 var(--fs-caption)/1.2 var(--font-sans)}
.lib-q{flex:1 1 220px;display:flex;justify-content:flex-end}
.lib-k{margin:14px 0 6px;font:600 var(--fs-overline)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:18px}
.lib-grid .empty{grid-column:1/-1;font-size:var(--fs-caption);color:var(--text-2)}
.lib-grid .empty button,.lib-clear{border:0;background:none;color:var(--ink);font:600 var(--fs-caption)/1.2 var(--font-sans);text-decoration:underline;cursor:pointer;padding:0}
.lib-more{margin-top:16px}
.lib-pick{position:sticky;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--surface);font-size:var(--fs-caption);color:var(--text)}
.lib-pick[hidden]{display:none}
.lib-pick b{font-family:var(--font-mono);color:var(--ink)}
body[data-bar] .lib-pick{bottom:80px}
.sn{display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.sn:hover{border-color:var(--border-strong)}
.sn-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:600 var(--fs-overline)/1.3 var(--font-mono);color:var(--text-2)}
.sn-lang{padding:2px 6px;border:1px solid var(--border-strong);border-radius:3px;color:var(--ink)}
.sn-t{margin-left:auto;font-variant-numeric:tabular-nums}
.sn h3,.sn h1{margin:0;font:600 var(--fs-small)/1.4 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.sn-big h1{font:700 clamp(1.5rem,1.1rem + 1.6vw,2.25rem)/1.15 var(--font-display);letter-spacing:-.02em}
.sn-blurb{margin:0;max-width:62ch;font:400 var(--fs-body)/1.6 var(--font-sans);color:var(--text)}
.sn-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.sn-tag{min-height:28px;padding:0 8px;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text-2);font:500 12px/1 var(--font-sans);cursor:pointer}
.sn-tag:hover{border-color:var(--ink);color:var(--ink)}
.sn-co{color:var(--ink)}
.sn-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto}
.sn-play,.sn-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:var(--btn-r);background:var(--ink);color:var(--bg);font:600 var(--fs-caption)/1 var(--font-sans);cursor:pointer}
.sn-play svg{width:14px;height:14px}
.sn-play[aria-pressed="true"]{background:transparent;color:var(--ink)}
.sn-btn{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.sn-btn:hover{border-color:var(--ink)}
.sn-pick{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-left:auto;font:500 var(--fs-caption)/1 var(--font-sans);color:var(--text-2);cursor:pointer}
.sn-pick input{width:18px;height:18px;accent-color:var(--ink)}
.sn-video video{display:block;width:100%;max-width:360px;max-height:70vh;aspect-ratio:9/16;margin:0 auto;border-radius:var(--r-card);background:#000}
.sn-msg{margin:0;font-size:var(--fs-caption);color:var(--text-2);overflow-wrap:anywhere}
/* d:listen-lib:end */
/* make your own */
.mk{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px}
@media(min-width:1024px){.mk{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px}}
.mk-form{display:flex;flex-direction:column;gap:22px;min-width:0}
.mk-field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.mk-field legend,.mk-field>label,.mk-lab{padding:0;font:600 var(--fs-overline)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.mk-tabs{display:flex;flex-wrap:wrap;gap:8px}
.mk-in,.mk-ta,.mk-sel{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--btn-r);background:var(--surface);color:var(--ink);font:400 var(--fs-body)/1.4 var(--font-sans)}
.mk-ta{min-height:180px;resize:vertical}
.mk-in:focus,.mk-ta:focus,.mk-sel:focus{outline:2px solid var(--ink);outline-offset:1px}
.mk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.mk-row label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-caption);color:var(--text-2)}
.mk-row label[hidden]{display:none}
.mk-row + .mk-row{margin-top:10px}
.mk-small{margin:0;font-size:var(--fs-caption);line-height:1.5;color:var(--text-2)}
.mk-picked{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.mk-picked li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--btn-r);font-size:var(--fs-caption);color:var(--ink)}
.mk-picked li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-picked button{border:0;background:none;color:var(--text-2);font-size:16px;cursor:pointer;min-width:32px;min-height:32px}
.mk-go{align-self:flex-start}
.mk-go[disabled]{opacity:.55;cursor:progress}
.mk-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.mk-box{padding:16px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.mk-box h2{font-size:var(--fs-lead)}
.mk-status{font-size:var(--fs-caption);line-height:1.55;color:var(--text)}
.mk-status[hidden],.mk-out[hidden]{display:none}
.mk-out{display:flex;flex-direction:column;gap:12px;padding:16px;border:1.5px solid var(--ink);border-radius:var(--r-card);background:var(--surface)}
.mk-out audio{width:100%}
.mk-script{max-height:280px;overflow:auto;margin:0;padding:10px 12px;border:1px solid var(--border);border-radius:var(--btn-r);background:var(--sunken);font:400 var(--fs-caption)/1.6 var(--font-mono);white-space:pre-wrap;color:var(--text)}
.mk-feed{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mk-feed code{font:400 12px/1.4 var(--font-mono);overflow-wrap:anywhere;color:var(--text-2)}
@media(max-width:560px){.mk-row{grid-template-columns:minmax(0,1fr)}}
.mk-h1{margin:0;max-width:20ch;font:700 var(--fs-h1-hero)/var(--lh-h1) var(--font-display);letter-spacing:-.02em;color:var(--ink)}