.assets-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:42px 0 30px; }
.assets-intro h1 { font-size:clamp(36px,4.2vw,54px); line-height:1.04; letter-spacing:-2.2px; margin:10px 0 15px; font-weight:750; }
.assets-intro h1 span { color:var(--accent); }
.assets-intro p:last-child { color:var(--muted); font-size:13px; margin:0; max-width:530px; }
.library-jump { display:flex; align-items:center; gap:30px; white-space:nowrap; text-decoration:none; font-size:12px; font-weight:650; border-bottom:1px solid var(--ink); padding:8px 0; margin-bottom:3px; }
.library-jump span { font-size:26px; font-weight:400; }
.interaction-lab { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:17px; }
.lab-story { padding:26px 30px; display:flex; flex-direction:column; align-items:flex-start; }
.lab-kicker { display:flex; align-items:center; gap:7px; width:100%; font-size:9px; letter-spacing:1px; font-weight:700; color:var(--muted); }
.live-dot { width:6px; height:6px; border-radius:50%; background:#50744b; }
#patternNumber { margin-left:auto; letter-spacing:.4px; font-variant-numeric:tabular-nums; }
.lab-story h2 { margin:25px 0 10px; font-size:29px; line-height:1.16; letter-spacing:-1px; }
.lab-story > p:not(.study-note) { font-size:12px; line-height:1.7; color:var(--muted); margin:0 0 22px; max-width:325px; }
.lab-reference { display:grid; gap:5px; font-size:11px; margin-top:auto; }
.lab-reference > span { font-size:9px; text-transform:uppercase; letter-spacing:1px; font-weight:650; color:var(--muted); }
.lab-reference a { text-decoration:none; font-weight:600; }
.lab-reference .lab-post { font-weight:400; color:var(--muted); font-size:10px; }
.study-note { font-size:10px; color:var(--muted); line-height:1.6; }
.lab-story .study-note { margin:17px 0 0; max-width:340px; }
.lab-play { min-width:0; background:#eeeae0; display:flex; flex-direction:column; border-left:1px solid var(--line); }
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; padding:13px 19px 0; font-size:10px; color:#77786e; }
.demo-toolbar .text-button { min-height:30px; font-size:10px; }
.live-stage { display:flex; flex:1; min-height:280px; align-items:center; justify-content:center; padding:0 12px; }
.lab-play .asset-demo .demo-hint { padding-bottom:12px; }
.pattern-picker { grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-top:1px solid var(--line); background:#f8f6ef; padding:7px; gap:4px; }
.pattern-picker button { display:flex; gap:9px; justify-content:center; align-items:center; border:1px solid transparent; border-radius:8px; background:transparent; font-size:9px; color:#8b8c80; padding:11px 7px; white-space:nowrap; }
.pattern-picker button span { font-size:11px; font-weight:600; color:var(--muted); }
.pattern-picker button[aria-pressed='true'] { background:var(--paper); border-color:var(--line); color:var(--accent); }
.pattern-picker button[aria-pressed='true'] span { color:var(--ink); }
.pattern-picker button:hover { background:var(--paper); }
.asset-library { padding-top:40px; scroll-margin-top:94px; }
.library-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:19px; }
.library-heading h2 { font-size:26px; letter-spacing:-.8px; margin:0; }
#libraryCount { margin-left:5px; display:inline-flex; vertical-align:middle; font-size:11px; letter-spacing:0; font-weight:500; border:1px solid var(--line); padding:3px 7px; border-radius:7px; color:var(--muted); }
.library-heading > p { font-size:11px; margin:0 0 4px; color:var(--muted); }
.asset-filters { display:grid; grid-template-columns:minmax(220px,1fr) 170px 170px 145px; gap:8px; }
.asset-filters input,.asset-filters select { width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink); font:inherit; font-size:11px; }
.asset-filters label { min-width:0; }
.asset-results { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:11px; min-height:43px; }
.asset-results p { margin:0; }
.asset-library #communityNotice { margin-bottom:12px; }
.asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.asset-card { min-width:0; display:flex; flex-direction:column; padding:21px; border:1px solid var(--line); background:var(--paper); border-radius:13px; transition:border-color .15s ease; }
.asset-card:hover { border-color:#bdb7a7; }
.asset-card-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.asset-glyph { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border:1px solid #e5d5c4; border-radius:11px; background:#f5eadd; color:#9e4d2b; }
.asset-glyph svg { width:22px; height:22px; }
.asset-card[data-category='islands'] .asset-glyph { color:#665184; background:#eee8f4; border-color:#ddd1e9; }
.asset-card[data-category='docks'] .asset-glyph { color:#377c86; background:#e4f0ef; border-color:#cfe1df; }
.asset-card[data-category='icons'] .asset-glyph { color:#a54150; background:#f6e7eb; border-color:#ead2d9; }
.asset-card[data-category='nested'] .asset-glyph { color:#657944; background:#edf0e2; border-color:#dce2c9; }
.asset-card[data-category='native'] .asset-glyph { color:#3e6e99; background:#e5eef5; border-color:#cfdfeb; }
.asset-kind { font-size:10px; color:var(--muted); }
.asset-card h3 { font-size:17px; letter-spacing:-.4px; line-height:1.3; margin:0 0 8px; }
.asset-card h3 a { text-decoration:none; }
.asset-card h3 a:hover { color:var(--accent); }
.asset-card-description { font-size:11px; line-height:1.7; color:var(--muted); margin:0 0 14px; }
.asset-stack { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; margin-bottom:13px; }
.asset-stack span { font-size:9px; padding:3px 6px; border:1px solid #e9e5da; border-radius:5px; color:#7a7b70; }
.asset-license { display:flex; gap:6px; align-items:center; font-size:10px; margin-bottom:0; color:var(--muted); }
.license-dot { width:5px; height:5px; border-radius:50%; background:#a6a398; }
.asset-license[data-source='open'] { color:#426540; }
.asset-license[data-source='open'] .license-dot { background:#598052; }
.asset-license[data-source='commercial'] { color:#8a6028; }
.asset-card .software-community { margin:0; padding-top:12px; gap:5px; }
.asset-card .community-button, .asset-card .software-opens { min-height:32px; padding:5px 8px; font-size:10px; }
.community-button[data-asset-action='like'].is-active, .community-button[data-asset-action='like'][aria-pressed='true'] { color:#a54150; border-color:#e8bec7; background:#f9e9ec; }
.asset-card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px 13px; padding-top:10px; font-size:11px; }
.asset-card-actions a { font-weight:600; text-decoration:none; }
.asset-card-actions a:hover { text-decoration:underline; }
.asset-card-actions button { margin-left:auto; font-size:10px; min-height:31px; background:#f5f2e9; padding:6px 8px; border:1px solid var(--line); border-radius:6px; }
.assets-page #assetDialog { width:min(690px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
#assetCommunity .software-community { margin:14px 0 0; padding:0 0 14px; border-top:0; border-bottom:1px solid var(--line); }
#assetDialog h2 { padding-right:25px; }
#assetDialogDescription { color:var(--muted); font-size:12px; }
.dialog-demo { min-width:0; background:#eeebe3; border:1px solid var(--line); border-radius:12px; margin:20px 0 8px; }
.resource-links { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.resource-links a { text-decoration:none; font-size:11px; }
.assets-page .detail-fields { font-size:12px; }
.assets-page .detail-fields dd { overflow-wrap:anywhere; }
.install-box { padding:12px; border:1px solid var(--line); border-radius:9px; margin-top:20px; background:#f8f6ef; }
.install-box label { display:block; font-size:10px; color:var(--muted); margin-bottom:8px; }
.install-box > div { display:flex; gap:8px; }
.install-box input { min-width:0; flex:1; font:11px/1.5 ui-monospace,monospace; background:transparent; color:var(--ink); border:0; padding:0; text-overflow:ellipsis; }
.install-box button { font-size:10px; }
.install-box p { margin:4px 0 0; font-size:10px; color:var(--muted); }
@media(max-width:1000px) { .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .asset-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } .asset-search { grid-column:1/-1; } .pattern-picker button { gap:4px; } .lab-story { padding:24px; } }
@media(max-width:760px) {
  .software-sections { gap:23px; } .software-sections a { font-size:11px; padding:12px 0; }
  .assets-intro { padding:28px 0 22px; } .assets-intro h1 { font-size:38px; letter-spacing:-1.5px; } .assets-intro p:last-child { font-size:12px; } .library-jump,.wide-only { display:none; }
  .interaction-lab { grid-template-columns:1fr; border-radius:13px; } .lab-story { padding:20px; } .lab-story h2 { margin:18px 0 8px; font-size:26px; } .lab-story h2 br { display:none; } .lab-story > p:not(.study-note) { margin-bottom:15px; max-width:none; } .lab-reference { font-size:11px; } .lab-story .study-note { margin-top:12px; }
  .lab-play { grid-row:1; border-left:0; } .live-stage { padding:0 6px; min-height:280px; }
  .lab-story { grid-row:3; border-top:1px solid var(--line); }
  .pattern-picker { grid-row:2; grid-template-columns:repeat(3,minmax(0,1fr)); padding:6px; } .pattern-picker button { white-space:normal; padding:9px 3px; min-height:37px; gap:4px; } .pattern-picker button span { font-size:10px; }
  .asset-library { padding-top:30px; } .library-heading { align-items:flex-start; flex-direction:column; gap:7px; margin-bottom:15px; } .library-heading h2 { font-size:25px; } .library-heading > p { font-size:11px; }
  .asset-filters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .asset-filters label:last-child { grid-column:1/-1; } .asset-filters input,.asset-filters select { min-height:42px; padding:10px; }
  .asset-grid { grid-template-columns:1fr; gap:10px; } .asset-card { padding:19px; } .asset-card-head { margin-bottom:13px; } .asset-card h3 { font-size:18px; } .asset-card-description { font-size:12px; }
  .asset-card-actions button { min-height:36px; } .asset-card-actions a { min-height:36px; display:inline-flex; align-items:center; }
  .asset-card .community-button, .asset-card .software-opens { min-height:36px; }
  .assets-page #assetDialog { padding:22px 16px; } .assets-page .detail-fields { grid-template-columns:64px minmax(0,1fr); gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .asset-card { transition:none; } }

/* Live studies rendered straight in the card */
.asset-card-demo { margin:0 0 14px; }
.asset-card-demo .asset-demo .demo-stage { height:228px; padding:10px; border-radius:11px; }
.asset-card-demo .asset-demo .demo-hint { display:none; }
.asset-card:has(.asset-card-demo) .asset-card-head { margin-bottom:12px; }
@media(max-width:600px) { .asset-card-demo .asset-demo .demo-stage { height:238px; } }
.motion-kit { padding:8px 0 34px; scroll-margin-top:94px; }
.motion-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:14px; }
.motion-head h2 { font-size:26px; letter-spacing:-.8px; margin:0; }
.motion-credit { font-size:11px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.motion-credit:hover { color:var(--ink); text-decoration:underline; }
.motion-feature { display:grid; grid-template-columns:minmax(0,520px) minmax(0,1fr); gap:40px; align-items:center; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--paper); margin-bottom:14px; }
.motion-reel { min-width:0; }
.motion-reel-side h3 { font-size:24px; letter-spacing:-.7px; margin:0 0 10px; }
.motion-reel-side p { font-size:12px; line-height:1.7; color:var(--muted); margin:0 0 14px; max-width:360px; }
.motion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.motion-card { min-width:0; padding:10px 10px 6px; border:1px solid var(--line); border-radius:16px; background:var(--paper); }
.motion-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 6px 4px; }
.motion-card h3 { font-size:14px; letter-spacing:-.2px; margin:0; font-weight:650; }
.motion-tools { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.motion-tools .text-button { min-height:30px; font-size:11px; white-space:nowrap; }
@media (max-width:980px) { .motion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .motion-feature { grid-template-columns:minmax(0,520px); justify-content:center; } }
@media (max-width:640px) { .motion-grid { grid-template-columns:1fr; } .motion-head { flex-direction:column; gap:4px; } .motion-feature { padding:10px; gap:14px; } }
/* Motion kit likes (11 Oct 2026): the library cards' heart button (shell.css colours it), beside Copy HTML. */
.motion-like-slot:empty { display:none; }
.motion-tools .motion-like { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0 9px; font-size:11.5px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease; }
.motion-tools .motion-like:active:not(:disabled) { transform:scale(.94); }
.motion-tools .motion-like.is-active svg path { fill:currentColor; fill-opacity:.85; }
.motion-tools .motion-like:disabled { cursor:default; opacity:.6; }
.motion-tools .motion-like svg { width:15px; height:15px; }