/* Hallmark · built: 2026-10-30 · genre: modern-minimal · shape: app screen · theme: the project's own (tv.css tokens)
 * redesign: full · scope: app · screen: course library — one resume row, one toolbar, a table of courses with the next action on every row
 * critique: a dashboard that opens with a 500px banner is a billboard, not a tool; the author's own course list is the signature, so it sits first and reads as a table
 * waive 48 (editor, material, workflow, auth): untouched stylesheets keep their literals; every colour here is a token
 * waive 34: overflow-x: clip on html and body is set in tv.css, loaded with this file; the controls' :active and :disabled states come from tv.css too
 * v2.0.0 */

/* ---------- Heading: the title and the workspace note on one line ---------- */
.lib-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px}
.lib-heading h1{margin:0;font-size:32px}
.ab-lib .l-main{padding-top:28px}

/* ---------- Resume: the course you touched last, as one wide row ---------- */
.lib-resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 24px;align-items:center;padding:18px 22px;margin:0 0 28px;border-radius:20px;background:var(--e-panel);border:1px solid var(--e-line);box-shadow:var(--e-shadow-sm)}
.lib-resume-cover,.lib-thumb{position:relative;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--tv-on-media);flex:none}
.lib-resume-cover{width:112px;height:84px;border-radius:14px}
.lib-resume-cover img,.lib-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-resume-cover b{font:800 36px/1 var(--wf-display);opacity:.55}
.lib-resume-b{min-width:0;display:flex;flex-direction:column;gap:6px}
.lib-resume-k{margin:0;font-size:13px;font-weight:600;color:var(--e-ink)}
.lib-resume-k span{font-weight:400;color:var(--e-muted)}
.lib-resume-k span{margin-left:10px}
.lib-resume h2{margin:0;font:700 clamp(20px,2.2vw,26px)/1.2 var(--wf-display);letter-spacing:-.015em;color:var(--e-ink);overflow-wrap:break-word;min-width:0;text-wrap:balance}
.lib-resume-d{margin:0;font-size:14px;color:var(--e-muted);line-height:1.5}
.lib-resume .lib-pipe{max-width:360px;margin-top:4px}
.lib-resume-a{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Stage word: one colour per tone, no pill ---------- */
.lib-stage{font-size:13px;font-weight:700;color:var(--e-ink);white-space:nowrap}
.lib-stage.ok{color:var(--wf-k)}
.lib-stage.warn{color:var(--wf-w)}
.lib-stage.bad{color:var(--wf-x)}
.wf-pipe.lib-pipe{margin-top:6px;gap:3px}

/* ---------- Toolbar: Show, search, sort, select, view ---------- */
.lib-wrap{display:block}
.lib-head{position:sticky;top:var(--e-top,76px);z-index:4;padding:8px 0 12px;background:var(--e-bg)}
.lib-bulk{color:var(--e-ink)}
.lib-bulk .lib-bulk-n{color:var(--e-ink)}
.lib-tools{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.lib-show{display:flex;align-items:center;gap:4px;flex:none}
.lib-show .e-sel{min-width:200px;max-width:280px;height:44px;border-radius:999px;padding-inline:14px 36px;font-weight:600}
.lib-tools .studio-search{flex:1 1 240px;min-width:160px}
.lib-sort .e-sel{height:44px;border-radius:999px;padding-inline:14px 36px}
.lib-tools .e-icbtn,.lib-tools .e-btn.sm{height:44px;min-height:44px}
.lib-tools .e-icbtn{width:44px;flex:none}
.lib-crumbs h2{margin:14px 0 2px;font:700 20px/1.25 var(--wf-display);letter-spacing:-.01em}
.lib-ctx{margin:0 0 12px;font-size:13px;color:var(--e-muted)}
.wf-filters{margin:0 0 6px}
.lib-tags{margin:0 0 10px}

/* ---------- The table ---------- */
.lib-tablewrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain;margin-top:6px}
.lib-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--e-ink)}
.lib-table th{text-align:left;font-size:13px;font-weight:600;color:var(--e-muted);padding:8px 12px;border-bottom:1px solid var(--e-line);white-space:nowrap}
.lib-table th:first-child,.lib-table td:first-child{padding-left:4px}
.lib-table td{padding:14px 12px;border-bottom:1px solid var(--e-line);vertical-align:middle}
.lib-table small{display:block;font-size:12px;color:var(--e-muted);margin-top:2px}
.lib-tr{transition:background-color .15s ease}
.lib-tr:hover,.lib-tr:focus-within{background:var(--e-sunk)}
.lib-tr.lib-picked{background:var(--e-accent-soft)}
.lib-tr.lib-dragging{opacity:.45}
.lib-c-course{width:38%;min-width:260px}
.lib-c-stage{width:150px}
.lib-c-next{min-width:200px}
.lib-c-size,.lib-c-edited{white-space:nowrap;color:var(--e-ink)}
.lib-c-act{width:1%;white-space:nowrap;text-align:right}
.lib-c-sel{width:36px}
.lib-course{display:flex;align-items:center;gap:12px;min-width:0}
.lib-thumb{width:56px;height:42px}
.lib-thumb b{font:800 18px/1 var(--wf-display);opacity:.6}
.lib-course-t{min-width:0;display:flex;flex-direction:column;gap:3px}
.lib-title{display:block;max-width:100%;padding:0;border:0;background:none;font:600 15px/1.3 var(--e-font);color:var(--e-ink);text-align:left;cursor:pointer;overflow-wrap:break-word}
.lib-title:hover{color:var(--e-accent-text);text-decoration:underline;text-underline-offset:3px}
.lib-title:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px;border-radius:4px}
.lib-sub{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:12.5px;color:var(--e-muted)}
.lib-aud{color:var(--e-muted)}
.lib-sub .lib-where{display:inline-flex;align-items:center;gap:4px}
.lib-sub .lib-where .e-ico{width:12px;height:12px}
.lib-rowtags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.lib-rowtags span{font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--e-fill);color:var(--e-muted)}
.lib-star-row{position:static;width:32px;height:32px;margin-left:auto;background:transparent;color:var(--e-line2);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;transition:opacity .15s ease,color .15s ease}
.lib-star-row[aria-pressed="true"]{opacity:1;color:var(--tv-star)}
.lib-tr:hover .lib-star-row,.lib-tr:focus-within .lib-star-row,.lib-star-row:focus-visible{opacity:1}
.lib-star-row:hover{color:var(--e-ink)}
.lib-c-next .wf-detail{font-weight:500;line-height:1.4;white-space:normal}
.lib-c-act .e-btn.sm{min-width:96px;justify-content:center}
.lib-more{position:relative;display:inline-block;margin-left:6px;vertical-align:middle}
.lib-more>summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;min-height:36px;border-radius:999px;cursor:pointer}
.lib-more>summary::-webkit-details-marker{display:none}
.lib-more[open]>summary{background:var(--e-fill2)}
.lib-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;padding:6px;border-radius:14px;background:var(--e-panel);border:1px solid var(--e-line);box-shadow:var(--e-shadow-lg);display:flex;flex-direction:column;text-align:left}
.lib-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--e-ink);font:500 14px var(--e-font);text-align:left;cursor:pointer;white-space:nowrap}
.lib-menu button .e-ico{width:16px;height:16px;flex:none;color:var(--e-muted)}
.lib-menu button:hover{background:var(--e-fill)}
.lib-menu button:focus-visible{outline:2px solid var(--e-accent);outline-offset:-2px}
.lib-menu button.danger{color:var(--wf-x)}
.lib-menu button.danger .e-ico{color:inherit}
@media (hover:none){.lib-star-row{opacity:1}}

/* ---------- Below the table ---------- */
.lib-backup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--e-muted)}
.lib-backup span{margin-right:auto}

/* ---------- Loading: rows in the shape of what is coming ---------- */
.lib-skel{display:flex;flex-direction:column;gap:14px;padding:12px 0}
.lib-skel-row{height:64px;border-radius:14px;background:linear-gradient(90deg,var(--e-fill) 25%,var(--e-fill2) 50%,var(--e-fill) 75%);background-size:200% 100%;animation:lib-shimmer 1.4s linear infinite}
@keyframes lib-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Phones and narrow tablets: the table restacks, each row a block ---------- */
@media (max-width:860px){
 .lib-resume{grid-template-columns:auto minmax(0,1fr);padding:16px}
 .lib-resume-cover{width:72px;height:56px}
 .lib-resume-a{grid-column:1/-1;justify-content:stretch}
 .lib-resume-a .e-btn{flex:1 1 0;justify-content:center}
 .lib-tools{flex-wrap:wrap}
 .lib-tools .studio-search{flex-basis:100%;order:-1}
 .lib-show .e-sel{min-width:0;max-width:none;flex:1}
 .lib-show{flex:1 1 60%}
 .lib-tablewrap{overflow:visible}
 .lib-table,.lib-table tbody{display:block}
 .lib-table thead{display:none}
 .lib-table tr.lib-tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 0 12px;border-bottom:1px solid var(--e-line)}
 .lib-table td{display:block;padding:0;border:0}
 .lib-table td.lib-c-sel{grid-column:1/-1;width:auto}
 .lib-table td.lib-c-course{grid-column:1/-1;width:auto;min-width:0}
 .lib-table td.lib-c-stage{grid-column:1;width:auto}
 .lib-table td.lib-c-size,.lib-table td.lib-c-edited{grid-column:2;justify-self:end;text-align:right;font-size:12.5px;color:var(--e-muted);white-space:nowrap}
 .lib-table td.lib-c-size small,.lib-table td.lib-c-edited small{display:inline;margin:0 0 0 4px}
 .lib-table td.lib-c-next{grid-column:1/-1;min-width:0}
 .lib-table td.lib-c-act{grid-column:1/-1;width:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;margin-top:4px}
 .lib-table td.lib-c-act .e-btn.sm{flex:1 1 auto;max-width:220px}
 .lib-more{margin:0;opacity:1}
 .lib-star-row{opacity:1}
 .lib-head{position:static}
}
@media (max-width:420px){
 .lib-c-act .e-btn.sm{min-width:0}
 .lib-more .e-icbtn{width:32px;height:32px;min-height:32px}
}
@media (prefers-reduced-motion:reduce){
 .lib-skel-row{animation:none}
 .lib-tr,.lib-more,.lib-star-row{transition:none}
}
/* Bulk bar on the glass panel: buttons in the ink colour, so they read in both themes. */
.lib-bulk .e-btn:not(.primary){color:var(--e-ink);border-color:var(--e-line2)}
/* Stage filter: one row that scrolls sideways on phones instead of wrapping into three. */
@media (max-width:700px){
 .wf-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
 .wf-filters .wf-fbtn{flex:none}
}
/* Remaining states on the controls this file adds */
.lib-title:active{opacity:.7}
.lib-star-row:disabled{opacity:.55;cursor:not-allowed}
/* Folders as a compact row of tiles under the toolbar */
.lib-tiles{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;overflow:visible;grid-auto-flow:row}
.lib-tile{min-height:0;width:auto;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--e-line2);background:var(--e-panel);box-shadow:none;gap:8px}
.lib-tile:hover,.lib-tile:focus-visible{transform:none;box-shadow:none;background:var(--e-fill)}
.lib-tile span{display:flex;gap:6px;align-items:baseline}
.lib-tile b{font-size:14px;font-weight:600}
.lib-tile small{font-size:12px;color:var(--e-muted)}
.lib-newf{height:44px;min-height:44px;flex:none}
/* Tags on the same row as the stage chips */
.lib-tagsep{width:1px;height:24px;background:var(--e-line);margin:0 4px}
.lib-tagl{font-size:13px;color:var(--e-muted);align-self:center}
.lib-tagbtn[aria-pressed="true"]{background:var(--e-accent-soft);color:var(--e-accent-text)}
/* The folder page: the three folder actions in one quiet row */
.lib-fbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.lib-fbar .danger{margin-left:auto}
/* Headings used as focus targets after a view change: no ring */
.lib-crumbs h2:focus{outline:none}
/* Toasts: bottom right on wide screens, clear of the phone rail */
@media (min-width:701px){.ab-lib .e-toast{left:auto;right:24px;transform:none}}
@media (max-width:700px){.ab-lib .e-toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 .lib-table td.lib-c-size small::before{content:", "}.lib-table td.lib-c-size small{margin:0}
 .lib-aud{display:none}}
/* The toolbar stays compact when the heading is screen-reader only (All courses) */
.lib-head{gap:0;margin-bottom:12px}
.lib-crumbs{min-height:0;display:block}
.lib-crumbs:empty{display:none}
.lib-crumbs h2.e-sr+*{margin-top:0}
.lib-crumbs h2:focus,.lib-crumbs h2:focus-visible{outline:none;box-shadow:none}
body>.lib-menu{z-index:120}

/* ---------- Create with AI (blueprint.js): two steps, one question each ---------- */
.bp-brief{min-height:8rem;resize:vertical;line-height:1.5}
.bp-opt{font-weight:400;color:var(--e-muted);font-size:12.5px;margin-left:6px}
.bp-attach{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bp-file{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 6px 6px 14px;border-radius:999px;background:var(--e-fill);font-size:14px}
.bp-file-n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.bp-file-m{color:var(--e-muted);font-size:12.5px;white-space:nowrap}
.bp-file .e-icbtn{width:32px;height:32px;min-height:32px}
.bp-cards{margin:0 0 14px}
.bp-design{margin:4px 0 12px;border:1px solid var(--e-line);border-radius:14px;padding:0 14px}
.bp-design summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none;display:flex;align-items:center;gap:8px}
.bp-design summary::-webkit-details-marker{display:none}
.bp-design summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin:0 6px 0 2px;transition:transform .15s ease}
.bp-design[open] summary::before{transform:rotate(45deg)}
.bp-design[open] summary{border-bottom:1px solid var(--e-line);margin-bottom:12px}
.bp-design .nw-themes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bp-note{margin:4px 0 0}
.bp-setup{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;border-radius:14px;background:var(--e-accent-soft);color:var(--e-ink)}
.bp-setup span{flex:1 1 240px;color:var(--e-muted);font-size:13.5px}
.bp-prog{margin:18px 0 8px}
@media (prefers-reduced-motion:reduce){.bp-design summary::before{transition:none}}

/* ---------- Help (help.js): contents on the left, one guide on the right ---------- */
.hp{display:flex;flex-direction:column;gap:14px;min-height:min(70vh,640px)}
.hp-q{height:44px;border-radius:999px;padding-inline:16px}
.hp-cols{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start;min-height:0}
.hp-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;position:sticky;top:0}
.hp-nav button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 12px;border-radius:10px;font:500 14px var(--e-font);color:var(--e-ink);cursor:pointer}
.hp-nav button:hover{background:var(--e-fill)}
.hp-nav button[aria-current="page"]{background:var(--e-accent-soft);color:var(--e-accent-text);font-weight:600}
.hp-nav button:focus-visible{outline:2px solid var(--e-accent);outline-offset:-2px}
.hp-body{min-width:0;max-height:min(70vh,640px);overflow:auto;padding-right:6px;outline:none}
.hp-guide+.hp-guide{margin-top:22px;padding-top:22px;border-top:1px solid var(--e-line)}
.hp-guide h3{margin:0 0 6px;font:700 20px/1.25 var(--wf-display);letter-spacing:-.01em}
.hp-intro{margin:0 0 14px;color:var(--e-muted);line-height:1.55}
.hp-dl{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:10px 18px;margin:0;font-size:14px;line-height:1.5}
.hp-dl dt{font-weight:600;color:var(--e-ink)}
.hp-dl dd{margin:0;color:var(--e-ink)}
.hp-dl dt,.hp-dl dd{padding-bottom:10px;border-bottom:1px solid var(--e-line)}
.hp-foot{display:flex;justify-content:space-between;gap:8px;margin-top:22px}
.hp-none{color:var(--e-muted)}
.ab-acct-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ab-helplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.ab-helpbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:0;padding:10px 12px;border:1px solid var(--e-line);border-radius:12px;text-align:left;white-space:normal}
.ab-helpbtn b{font-weight:600}
.ab-helpbtn .ab-muted{font-size:12.5px;font-weight:400;line-height:1.4}
@media (max-width:700px){
 .hp-cols{grid-template-columns:1fr}
 .hp-nav ol{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:4px;padding-bottom:4px;scrollbar-width:none}
 .hp-nav button{white-space:nowrap;width:auto}
 .hp-dl{grid-template-columns:1fr;gap:2px 0}
 .hp-dl dt{padding-bottom:0;border:0;margin-top:8px}
 .hp-body{max-height:none}
}
.lib-hello{margin:4px 0 0;font-size:15px;color:var(--e-muted)}
.lib-heading{align-items:flex-start}
.studio-footer-from{margin-left:14px;color:var(--e-muted)}
.studio-footer-link{margin-left:14px;border:0;background:none;padding:0;font:inherit;color:var(--e-accent-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.studio-footer-link::before{content:"";display:inline-block;width:1px;height:12px;background:var(--e-line);margin-right:14px;vertical-align:-1px}.studio-footer-link:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px;border-radius:4px}
.studio-footer-from::before{content:"";display:inline-block;width:1px;height:12px;background:var(--e-line);margin-right:14px;vertical-align:-1px}
/* AuthorBean logo (img/logo.svg) inline in the rail, the top bar and the sign-in screen */
.studio-logo svg{width:36px;height:36px;display:block;border-radius:9px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.e-mark{background:none!important;box-shadow:none!important;width:36px;height:36px;border-radius:0}.e-mark svg{width:36px;height:36px;display:block;border-radius:10px}.e-mark i{display:none}
/* Credits (builder/credits.js): names roll up over a photograph of Mount Kilimanjaro at night. The photo is dark in both appearances, so the ink is always light. */
.cr{position:relative;overflow:hidden;border-radius:18px;background:#0e1626;color:#f3f6fb;min-height:520px;display:flex;flex-direction:column;isolation:isolate;--cr-ink:#f3f6fb;--cr-muted:#b9c6d8;--cr-role:#8fd3ff}
.cr-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.78;z-index:0;pointer-events:none}
.cr:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,16,30,.72) 0,rgba(10,16,30,.15) 26%,rgba(10,16,30,.15) 62%,rgba(10,16,30,.8) 100%)}
.cr-head{position:relative;z-index:2;padding:22px 26px 0;text-align:center}
.cr-kicker{display:block;font:600 12px/1 var(--wf-display,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--cr-muted);margin-bottom:8px}
.cr-title{margin:0;font:700 22px/1.2 var(--wf-display,inherit);letter-spacing:-.01em}
.cr-roll{position:relative;z-index:2;flex:1;min-height:300px;overflow:hidden;outline:none;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
.cr-roll:focus-visible{box-shadow:inset 0 0 0 2px var(--e-accent)}
.cr-list{list-style:none;margin:0;padding:0 24px;text-align:center;transform:translateY(100%)}
.cr-go .cr-roll:not(.cr-still) .cr-list{animation:cr-roll var(--cr-dur,30s) linear infinite}
.cr-go .cr-roll:hover .cr-list,.cr-go .cr-roll:focus-within .cr-list,.cr-go .cr-roll.cr-paused .cr-list{animation-play-state:paused}
.cr-still{overflow:auto;-webkit-mask-image:none;mask-image:none}.cr-still .cr-list{transform:none;padding-block:24px}
@keyframes cr-roll{from{transform:translateY(100%)}to{transform:translateY(-100%)}}
.cr-sec{margin:0 0 34px}.cr-sec ul{list-style:none;margin:0;padding:0}
.cr-role{display:block;font:600 12px/1 var(--wf-display,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--cr-role);margin-bottom:12px}
.cr-name{font:600 26px/1.3 var(--wf-display,inherit);letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.cr-name a{color:inherit;text-decoration:none;border-bottom:2px solid var(--cr-role)}.cr-name a:hover{color:var(--cr-role)}
.cr-name.cr-small{font-size:16px;font-weight:500;color:var(--cr-muted)}
.cr-foot{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:0 20px 16px;font-size:12px;color:var(--cr-muted)}
.cr .e-btn{background:rgba(255,255,255,.14);color:#f3f6fb;border-color:transparent}.cr .e-btn:hover{background:rgba(255,255,255,.24)}.cr .e-btn:focus-visible{outline:2px solid #fff}.cr-roll:focus-visible{box-shadow:inset 0 0 0 2px #fff}.cr-vol input{accent-color:#8fd3ff}
.cr-dialog .ab-dialog-body,.cr-dialog .cr-host{padding:0}
@media(prefers-reduced-motion:reduce){.cr-list{animation:none!important;transform:none}}
@media(max-width:700px){.cr{min-height:360px;border-radius:14px}.cr-name{font-size:22px}.cr-title{font-size:19px}}
.hp-action{margin:14px 0 0}
.cr-music{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cr-music .e-btn{display:inline-flex;align-items:center;gap:6px}.cr-music .e-ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-mute{width:32px;padding:0;justify-content:center}
.cr-vol input{width:96px;accent-color:var(--e-accent);vertical-align:middle;cursor:pointer}.cr-vol input:focus-visible{outline:2px solid var(--e-accent);outline-offset:3px;border-radius:4px}
.cr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cr-music-note:empty{display:none}
@media(max-width:700px){.cr-foot{flex-wrap:wrap;gap:8px 12px}.cr-music{margin-left:0;width:100%}.cr-hint{display:none}}