/* Mood library, final round. Built only on BSHK tokens (_ds/.../styles.css) and the Undersong
   layer (tokens.css). Classes carry the us- prefix so they never meet the round-one styles
   (mood-library.css) that share the canvas. Phone layout: @media (max-width:640px), see
   --und-bp-mobile. */

html,body{margin:0}
.us-page,.us-app{color:var(--und-ink);font-family:var(--font-system);-webkit-font-smoothing:antialiased}
.us-page{min-height:100vh;background:var(--bg);font-size:var(--text-av-body);line-height:var(--leading-body)}
.us-page *,.us-app *{box-sizing:border-box}
.us-page a,.us-app a{color:var(--accent);text-decoration:none}
.us-page a:hover,.us-app a:hover{color:var(--accent-hover)}
.us-hit{cursor:pointer}
.us-wrap{width:min(var(--measure-shell),100% - var(--gutter-page-sm) * 2);margin:0 auto}
.us-row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.us-col{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.us-grow{flex:1;min-width:0}
.us-clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* type */
.us-over{font-family:var(--font-mono);font-size:var(--text-overline);font-weight:var(--weight-semibold);line-height:1;letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--accent)}
.us-h1{margin:0;font-size:var(--text-av-h1);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-wrap:balance}
.us-h2{margin:0;font-size:var(--text-h2);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
.us-h3{margin:0;font-size:var(--text-av-h3);font-weight:var(--weight-semibold);line-height:var(--leading-heading);letter-spacing:var(--tracking-tight)}
.us-lead{margin:0;font-size:var(--text-lead);line-height:var(--leading-body);color:var(--und-muted);max-width:var(--measure-prose);text-wrap:pretty}
.us-p{margin:0;color:var(--und-muted);max-width:var(--measure-prose);text-wrap:pretty}
.us-ui{font-size:var(--text-av-ui);color:var(--und-muted)}
.us-meta{font-family:var(--font-mono);font-size:var(--text-av-meta);font-weight:var(--weight-medium);color:var(--und-faint)}
.us-hint{font-size:var(--und-text-sm);line-height:var(--leading-body);color:var(--und-faint)}
.us-strong{color:var(--und-ink);font-weight:var(--weight-semibold)}
.us-err{font-size:var(--und-text-sm);color:var(--status-danger)}

/* icons and mood symbols */
.us-ic{width:var(--space-4);height:var(--space-4);flex:none;fill:none;stroke:currentColor;stroke-width:var(--und-icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.us-ic.sm{width:var(--space-3);height:var(--space-3)}
.us-ic.bold{stroke-width:var(--und-icon-stroke-bold)}
.us-fill{width:var(--space-3);height:var(--space-3);flex:none;fill:currentColor}
.us-gl{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:var(--und-glyph-stroke);stroke-linecap:round;stroke-linejoin:round}
.us-orb{width:var(--space-8);height:var(--space-8);flex:none;border-radius:50%;border:var(--border-hairline) solid var(--und-line);display:flex;align-items:center;justify-content:center;color:var(--und-muted)}
.us-orb.on{border-color:var(--accent);background:var(--und-accent-soft);color:var(--accent)}
.us-orb.sm{width:var(--space-7);height:var(--space-7)}
.us-orb.xs{width:var(--space-6);height:var(--space-6)}
.us-orb.lg{width:var(--space-9);height:var(--space-9)}
.us-orb.xl{width:var(--space-11);height:var(--space-11)}
.us-dot{width:var(--space-2);height:var(--space-2);flex:none;border-radius:50%;background:var(--accent)}
.us-dot.dim{opacity:var(--und-disabled)}
.us-dot.ok{background:var(--status-success)}
.us-dot.off{background:var(--status-danger)}
.us-dot.live{animation:us-pulse var(--und-pulse) var(--ease-in-out) infinite}
@keyframes us-pulse{0%,100%{opacity:var(--und-disabled)}50%{opacity:1}}

/* buttons */
.us-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--hit-min);padding:0 var(--space-5);border-radius:var(--radius-lg);border:var(--border-hairline) solid transparent;background:var(--und-fill);color:var(--und-ink);font:inherit;font-size:var(--text-av-body);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;transition:var(--transition-color)}
.us-page a.us-btn,.us-app a.us-btn{color:var(--und-ink)}
.us-btn:hover{background:var(--und-fill-strong)}
.us-btn.primary,.us-page a.us-btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-button)}
.us-btn.primary:hover{background:var(--accent-hover)}
.us-btn.quiet{background:transparent;border-color:var(--und-fill-strong);font-weight:var(--weight-medium)}
.us-btn.quiet:hover{background:var(--und-fill)}
.us-btn.ghost{background:transparent;color:var(--und-muted);font-weight:var(--weight-medium)}
.us-btn.danger{background:var(--status-danger);color:var(--on-accent)}
.us-btn.wait,.us-btn.done{background:var(--und-accent-soft);color:var(--accent);box-shadow:none}
.us-btn.off{opacity:var(--und-disabled);pointer-events:none}
.us-btn.sm{height:var(--space-7);padding:0 var(--space-3);border-radius:var(--radius-md);font-size:var(--text-av-ui);box-shadow:none}
.us-btn.wide{width:100%}
.us-link{color:var(--accent);font-weight:var(--weight-medium)}

/* site chrome */
.us-nav{border-bottom:var(--border-hairline) solid var(--header-border);background:var(--header-bg);backdrop-filter:var(--blur-header)}
.us-navin{display:flex;align-items:center;gap:var(--space-7);min-height:var(--space-9)}
.us-brand{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--und-ink)}
.us-navl{font-size:var(--text-av-ui);color:var(--und-muted)}
.us-navl.on{color:var(--und-ink);font-weight:var(--weight-medium)}
.us-foot{border-top:var(--border-hairline) solid var(--footer-border);padding:var(--space-7) 0 var(--space-8)}
.us-footin{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;font-size:var(--text-av-meta);color:var(--footer-color)}
.us-band{border-top:var(--border-hairline) solid var(--card-border);padding:var(--space-7) 0}
.us-kbd{font-family:var(--font-mono);font-size:var(--text-av-meta);color:var(--und-ink);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--und-fill);white-space:nowrap}

/* fields */
.us-search{display:flex;align-items:center;gap:var(--space-3);height:var(--hit-min);max-width:var(--measure-prose);padding:0 var(--space-4);border-radius:var(--radius-xl);background:var(--und-fill);border:var(--border-hairline) solid var(--und-line);color:var(--und-faint)}
.us-search:focus-within{border-color:var(--accent)}
.us-sinp{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--und-ink);font:inherit}
.us-sinp::placeholder,.us-input::placeholder{color:var(--und-faint)}
.us-field{display:flex;flex-direction:column;gap:var(--space-2)}
.us-label{font-size:var(--text-av-ui);font-weight:var(--weight-medium);color:var(--und-ink)}
.us-input{width:100%;height:var(--hit-min);padding:0 var(--space-3);border-radius:var(--radius-lg);background:var(--und-fill);border:var(--border-hairline) solid var(--und-line);color:var(--und-ink);font:inherit;font-size:var(--text-av-ui);outline:none}
.us-input:focus{border-color:var(--accent)}
.us-input.bad{border-color:var(--status-danger)}
.us-input.area{height:auto;padding:var(--space-3);line-height:var(--leading-body);resize:vertical}
.us-ck{width:var(--space-4);height:var(--space-4);flex:none;border-radius:var(--radius-xs);border:var(--border-hairline) solid var(--und-fill-strong);display:flex;align-items:center;justify-content:center;color:transparent}
.us-ck.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.us-rd{width:var(--space-4);height:var(--space-4);flex:none;border-radius:50%;border:var(--border-hairline) solid var(--und-fill-strong)}
.us-rd.on{border:var(--space-1) solid var(--accent)}
.us-opt{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);border-radius:var(--radius-lg);border:var(--border-hairline) solid var(--und-line)}
.us-opt.on{border-color:var(--und-accent-line);background:var(--und-accent-soft)}
.us-cons{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-av-ui);line-height:var(--leading-body);color:var(--und-muted)}
.us-sw{width:var(--space-8);height:var(--space-6);flex:none;display:flex;align-items:center;padding:var(--border-hairline);border-radius:var(--radius-pill);background:var(--und-fill-strong)}
.us-sw.on{justify-content:flex-end;background:var(--accent)}
.us-knob{width:calc(var(--space-6) - var(--border-hairline) * 2);height:calc(var(--space-6) - var(--border-hairline) * 2);border-radius:50%;background:var(--und-ink);box-shadow:var(--shadow-hud)}
.us-code{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-2)}
.us-codeb{height:var(--space-9);border-radius:var(--radius-lg);background:var(--und-fill);border:var(--border-hairline) solid var(--und-line);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--text-av-h3);color:var(--und-ink)}
.us-codeb.on{border-color:var(--accent)}
.us-code.bad .us-codeb{border-color:var(--status-danger)}

/* pills, segments, tags */
.us-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.us-pill{height:var(--space-7);padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--und-line);display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-av-ui);color:var(--und-muted);white-space:nowrap}
.us-pill.on{border-color:var(--und-accent-line);background:var(--und-accent-soft);color:var(--und-ink)}
.us-seg{display:flex;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-lg);background:var(--und-fill)}
.us-sg{height:var(--space-6);padding:0 var(--space-3);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:var(--text-av-ui);color:var(--und-muted)}
.us-sg.on{background:var(--und-raised);color:var(--und-ink);font-weight:var(--weight-medium);box-shadow:var(--shadow-inset-top)}
.us-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.us-tag{height:var(--space-6);padding:0 var(--space-3);border-radius:var(--radius-pill);border:var(--border-hairline) solid var(--und-line);display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--und-text-md);color:var(--und-muted);white-space:nowrap}
.us-tag.on{border-color:var(--und-accent-line);background:var(--und-accent-soft);color:var(--und-ink)}
.us-tagcat{font-family:var(--font-mono);font-size:var(--und-text-xs);color:var(--und-faint)}

/* library: filters, results, cards */
.us-head{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) 0 var(--space-7)}
.us-cat{display:grid;grid-template-columns:var(--und-rail) minmax(0,1fr);gap:var(--space-8);align-items:start;padding-bottom:var(--space-10)}
.us-facets{display:flex;flex-direction:column;gap:var(--space-6)}
.us-fgrp{display:flex;flex-direction:column;gap:var(--space-1)}
.us-fh{margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:var(--und-text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--und-faint)}
.us-fo{display:flex;align-items:center;gap:var(--space-3);height:var(--space-7);padding:0 var(--space-2);margin:0 calc(var(--space-2) * -1);border-radius:var(--radius-md);font-size:var(--text-av-ui);color:var(--und-muted)}
.us-fo:hover{background:var(--und-hover);color:var(--und-ink)}
.us-fo.on{color:var(--und-ink)}
.us-n{margin-left:auto;font-family:var(--font-mono);font-size:var(--und-text-sm);color:var(--und-faint)}
.us-more{padding-top:var(--space-1);font-size:var(--text-av-ui);color:var(--accent)}
.us-trk{position:relative;height:var(--space-1);margin:var(--space-3) var(--space-2) var(--space-1);border-radius:var(--radius-pill);background:var(--und-fill-strong)}
.us-trkfill{position:absolute;top:0;bottom:0;border-radius:inherit;background:var(--accent)}
.us-thumb{position:absolute;top:50%;width:var(--space-3);height:var(--space-3);border-radius:50%;background:var(--und-ink);transform:translate(-50%,-50%);box-shadow:var(--shadow-hud)}
.us-rbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-height:var(--space-8);margin-bottom:var(--space-3)}
.us-count{font-weight:var(--weight-semibold)}
.us-mfilter{display:none}
.us-notice{display:flex;align-items:center;gap:var(--space-3);min-height:var(--hit-min);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-4);border-radius:var(--radius-lg);background:var(--und-hover);font-size:var(--text-av-ui);color:var(--und-muted);flex-wrap:wrap}
.us-notice.on{background:var(--und-accent-soft);color:var(--und-ink)}
.us-notice .us-mob{flex:1;min-width:0}
.us-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--und-card-min),1fr));gap:var(--space-4)}
.us-card{position:relative;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge);overflow:hidden;transition:var(--transition-color)}
.us-card:hover{border-color:var(--und-fill-strong)}
.us-card.on{border-color:var(--und-accent-line)}
.us-cardh{display:flex;align-items:center;gap:var(--space-3)}
.us-name{font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--und-ink)}
.us-by{font-size:var(--text-av-ui);line-height:var(--leading-heading);color:var(--und-faint)}
.us-cardf{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-1) var(--space-3)}
.us-cardf>.us-hint{grid-column:1 / -1}
.us-play{width:var(--space-8);height:var(--space-8);flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--und-fill);color:var(--und-ink);transition:var(--transition-color)}
.us-play:hover{background:var(--und-fill-strong)}
.us-play.on{background:var(--accent);color:var(--on-accent)}
.us-play.lg{width:var(--space-9);height:var(--space-9)}
.us-prog{position:absolute;left:0;right:0;bottom:0;height:calc(var(--border-hairline) * 2)}
.us-progfill{height:100%;background:var(--accent)}
.us-moreb{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-6)}
.us-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-10) var(--space-6);border-radius:var(--radius-xl);border:var(--border-hairline) dashed var(--und-line)}
.us-empty .us-pills{justify-content:center}
.us-skel{border-radius:var(--radius-md);background:linear-gradient(90deg,var(--und-fill),var(--und-fill-strong),var(--und-fill));background-size:200% 100%;animation:us-shimmer calc(var(--dur-reveal) * 2) var(--ease-in-out) infinite}
.us-skel.t{height:var(--space-3)}
.us-skel.l{height:var(--space-5)}
.us-skel.o{width:var(--space-8);height:var(--space-8);border-radius:50%}
.us-skel.b{height:var(--space-6);border-radius:var(--radius-pill)}
@keyframes us-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* mood page */
.us-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-10) 0 var(--space-8);background:var(--und-glow)}
.us-player{display:flex;align-items:center;gap:var(--space-4);width:100%;max-width:var(--und-player);margin-top:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-3) var(--space-3);border-radius:var(--radius-2xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge);text-align:left}
.us-wave{position:relative;flex:1;min-width:0;height:var(--hit-min);border-radius:var(--radius-sm);overflow:hidden;background:repeating-linear-gradient(90deg,var(--und-fill-strong) 0 calc(var(--border-hairline) * 2),transparent calc(var(--border-hairline) * 2) var(--space-2))}
.us-wavefill{position:absolute;left:0;top:0;bottom:0;background:repeating-linear-gradient(90deg,var(--accent) 0 calc(var(--border-hairline) * 2),transparent calc(var(--border-hairline) * 2) var(--space-2))}
.us-time{font-family:var(--font-mono);font-size:var(--text-av-meta);color:var(--und-muted);white-space:nowrap}
.us-acts{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-2)}
.us-slot{min-height:var(--space-6);display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-av-ui);color:var(--und-muted)}
.us-slot b{color:var(--und-ink);font-weight:var(--weight-semibold)}
.us-sec{padding:var(--space-9) 0;border-top:var(--border-hairline) solid var(--card-border)}
.us-twoend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.us-end{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-2xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge)}
.us-endh{display:flex;align-items:center;gap:var(--space-3)}
.us-quote{margin:0;color:var(--und-ink);text-wrap:pretty}
.us-sech{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap;margin:0 0 var(--space-5)}
.us-gone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-11) 0}

/* dialogs and auth */
.us-scrim{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--und-scrim)}
.us-dialog{width:100%;max-width:var(--und-dialog);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-3xl);background:var(--und-raised);border:var(--border-hairline) solid var(--und-edge);box-shadow:var(--shadow-window)}
.us-dialog.lg{max-width:var(--und-dialog-lg)}
.us-dlgf{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.us-ok{width:var(--space-9);height:var(--space-9);flex:none;border-radius:50%;border:var(--border-hairline) solid var(--accent);background:var(--und-accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center}
.us-ok .us-ic{width:var(--space-6);height:var(--space-6)}
.us-auth{width:100%;max-width:var(--und-dialog);margin:var(--space-10) auto;display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-7);border-radius:var(--radius-3xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge)}

/* my moods */
.us-acct{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-5);border-radius:var(--radius-xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge)}
.us-avatar{width:var(--space-8);height:var(--space-8);flex:none;border-radius:50%;background:var(--und-accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:var(--weight-semibold)}
.us-li{display:grid;grid-template-columns:var(--space-8) minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;border-bottom:var(--border-hairline) solid var(--card-border)}
.us-liacts{display:flex;gap:var(--space-2)}

/* native app frames */
.us-app{font-family:var(--mac-font);font-size:var(--und-text-sm);line-height:var(--leading-heading)}
.us-win{position:relative;width:var(--und-window-w);height:var(--und-window-h);display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl);background:var(--und-panel);border:var(--border-hairline) solid var(--und-edge)}
.us-tbar{flex:none;height:var(--mac-titlebar-height);display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-3) 0 var(--space-4);border-bottom:var(--border-hairline) solid var(--und-line)}
.us-lights{display:flex;gap:var(--space-2)}
.us-light{width:var(--space-3);height:var(--space-3);border-radius:50%;background:var(--und-fill-strong)}
.us-wtitle{font-size:var(--und-text-md);font-weight:var(--weight-semibold)}
.us-wbody{flex:1;min-height:0;display:grid;grid-template-columns:var(--und-window-rail) minmax(0,1fr)}
.us-side{padding:var(--space-1) var(--space-2);border-right:var(--border-hairline) solid var(--und-line);background:var(--und-field)}
.us-shead{padding:var(--space-3) var(--space-2) var(--space-2);font-family:var(--mac-font-mono);font-size:var(--und-text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-overline);text-transform:uppercase;color:var(--und-faint)}
.us-srow{display:flex;align-items:center;gap:var(--space-2);height:var(--und-row);padding:0 var(--space-2);border-radius:var(--radius-md);font-size:var(--und-text-md)}
.us-srow.on{background:var(--und-select);color:var(--und-on-select)}
.us-amain{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}
.us-abox{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-lg);background:var(--und-fill);border:var(--border-hairline) solid var(--und-line)}
.us-wscrim{position:absolute;left:0;right:0;bottom:0;top:var(--mac-titlebar-height);z-index:3;background:var(--und-scrim)}
.us-sheet{position:absolute;top:var(--mac-titlebar-height);left:50%;z-index:4;width:var(--und-sheet-w);transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:0 0 var(--radius-xl) var(--radius-xl);background:var(--und-raised);border:var(--border-hairline) solid var(--und-edge);border-top:0;box-shadow:var(--shadow-window)}
.us-st{font-size:var(--und-text-lg);font-weight:var(--weight-semibold)}
.us-asub{font-size:var(--und-text-xs);line-height:var(--leading-body);color:var(--und-muted)}
.us-atiny{font-size:var(--und-text-xs);line-height:var(--leading-body);color:var(--und-faint)}
.us-afrow{display:grid;grid-template-columns:var(--space-10) minmax(0,1fr);gap:var(--space-3);align-items:start}
.us-alabel{padding-top:var(--space-2);font-family:var(--mac-font-mono);font-size:var(--und-text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--und-faint)}
.us-app .us-btn{height:var(--space-7);padding:0 var(--space-3);border-radius:var(--radius-md);font-size:var(--und-text-md);font-weight:var(--weight-medium);box-shadow:none}
.us-app .us-input{height:var(--space-7);padding:0 var(--space-2);border-radius:var(--radius-md);font-size:var(--und-text-sm)}
.us-app .us-input.area{height:auto;padding:var(--space-2)}
.us-app .us-tag{font-size:var(--und-text-sm)}
.us-app .us-sg{height:var(--space-5);font-size:var(--und-text-sm)}
.us-app .us-sw{width:var(--space-7);height:var(--space-5)}
.us-app .us-knob{width:calc(var(--space-5) - var(--border-hairline) * 2);height:calc(var(--space-5) - var(--border-hairline) * 2)}
.us-app .us-codeb{height:var(--space-8);font-size:var(--und-text-xl)}
.us-app .us-play{width:var(--space-6);height:var(--space-6)}
.us-awave{flex:1;min-width:0;height:var(--space-6);border-radius:var(--radius-sm);background:repeating-linear-gradient(90deg,var(--und-fill-strong) 0 calc(var(--border-hairline) * 2),transparent calc(var(--border-hairline) * 2) var(--space-1))}
.us-warn{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);background:var(--und-warn-soft);border:var(--border-hairline) solid var(--und-warn-line);font-size:var(--und-text-sm);line-height:var(--leading-body)}
.us-warn .us-ic{color:var(--status-warning)}
.us-linkf{flex:1;min-width:0;height:var(--space-7);display:flex;align-items:center;padding:0 var(--space-2);border-radius:var(--radius-md);background:var(--und-field);border:var(--border-hairline) solid var(--und-line);font-family:var(--mac-font-mono);font-size:var(--und-text-sm)}

/* mock chrome around the frames on the canvas */
.us-mock{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-xl);border:var(--border-hairline) solid var(--und-edge);background:var(--bg);box-shadow:var(--shadow-window)}
.us-mock.phone{border-radius:calc(var(--radius-3xl) * 2)}
.us-mockbar{flex:none;height:var(--space-8);display:grid;grid-template-columns:var(--space-11) minmax(0,1fr) var(--space-11);align-items:center;padding:0 var(--space-3);background:var(--und-field);border-bottom:var(--border-hairline) solid var(--card-border)}
.us-mock.phone .us-mockbar{grid-template-columns:minmax(0,1fr);height:var(--space-9);padding-top:var(--space-4)}
.us-mockurl{justify-self:center;width:min(100%,var(--und-dialog));height:var(--space-6);display:flex;align-items:center;justify-content:center;gap:var(--space-2);border-radius:var(--radius-md);background:var(--und-fill);font-size:var(--und-text-sm);color:var(--und-muted)}
.us-mock iframe,.us-bare iframe{display:block;border:0;background:var(--bg)}
.us-bare iframe{background:transparent}
.us-mock.phone .us-lights,.us-mock.phone .us-mockbar>span{display:none}
.us-bare{overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-window)}
.us-cap{max-width:var(--und-player);font-family:var(--font-mono);font-size:var(--und-text-xs);line-height:var(--leading-body);color:var(--und-faint);text-align:center}

/* device-only copy; placed after the components so it wins over their display */
.us-mob{display:none}

@media (prefers-reduced-motion:reduce){.us-skel,.us-dot.live{animation:none}}

/* phone */
@media (max-width:640px){
  .us-wrap{width:calc(100% - var(--space-5) * 2)}
  .us-navin{gap:var(--space-5)}
  .us-navl.opt,.us-desk,.us-add,.us-facets{display:none}
  .us-mob{display:inline-flex}
  .us-cat{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
  .us-mfilter{display:flex;gap:var(--space-2);overflow:hidden}
  .us-head{padding:var(--space-7) 0 var(--space-5)}
  .us-hero{padding:var(--space-8) 0 var(--space-7)}
  .us-acts{flex-direction:column;align-items:stretch;width:100%}
  .us-twoend{grid-template-columns:minmax(0,1fr)}
  .us-sec{padding:var(--space-8) 0}
  .us-li{grid-template-columns:var(--space-8) minmax(0,1fr)}
  .us-liacts{grid-column:2}
  .us-auth{margin:var(--space-7) auto;padding:var(--space-5)}
  .us-rbar .us-seg{display:none}
}