/* Zhijin directory front end.
   Layer order: sticky controls 2, mobile navigation 4, palette dialog (top layer).
   One accent colour drives every interactive state. Group glyph hues are a wayfinding
   cue derived from the group name, held inside a warm arc around the brand and kept at
   low chroma, so they read as members of the palette rather than a second brand colour. Radius scale is fixed: 12 cards, 9 controls, 6 chips. */

.zd{
  --zd-bg:#fbf8f5;--zd-panel:#fff;--zd-sunk:#f5f0ec;
  --zd-text:#201a16;--zd-muted:#6b6058;--zd-faint:#978b82;
  --zd-border:#ece4dd;--zd-line:#f4eee9;--zd-tint:#fcebdd;
  --zd-accent:var(--zd-brand-accent,#c2410c);--zd-on-accent:#fff;
  --zd-shadow:0 1px 2px #4a2a1208,0 8px 24px #4a2a120a;
  --zd-shadow-lift:0 2px 4px #4a2a1210,0 14px 34px #4a2a1216;
  --zd-glyph-l:.93;--zd-glyph-c:.05;--zd-ink-l:.44;--zd-ink-c:.11;
  --zd-r-card:12px;--zd-r-control:9px;--zd-r-chip:6px;
  --zd-ease:cubic-bezier(.16,1,.3,1);
  color:var(--zd-text);background:var(--zd-bg);
  font:14px/1.8 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  border-radius:var(--zd-r-card);color-scheme:light;max-width:1480px;margin:0 auto;text-align:start;
}
.zd[data-theme=dark]{
  --zd-bg:#16110e;--zd-panel:#201a16;--zd-sunk:#2a221d;
  --zd-text:#f1e9e3;--zd-muted:#b4a79d;--zd-faint:#8c8077;
  --zd-border:#392f28;--zd-line:#2c241f;--zd-tint:#33261d;
  /* Dark mode lightens whatever accent the admin picked instead of ignoring it. */
  --zd-accent:color-mix(in oklab,var(--zd-brand-accent,#c2410c) 52%,#ffd9bd);--zd-on-accent:#241005;
  --zd-shadow:0 1px 2px #0007,0 8px 24px #0006;--zd-shadow-lift:0 2px 4px #0008,0 14px 34px #0007;
  --zd-glyph-l:.32;--zd-glyph-c:.045;--zd-ink-l:.84;--zd-ink-c:.1;
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){.zd[data-theme=auto]{
  --zd-bg:#16110e;--zd-panel:#201a16;--zd-sunk:#2a221d;
  --zd-text:#f1e9e3;--zd-muted:#b4a79d;--zd-faint:#8c8077;
  --zd-border:#392f28;--zd-line:#2c241f;--zd-tint:#33261d;
  /* Dark mode lightens whatever accent the admin picked instead of ignoring it. */
  --zd-accent:color-mix(in oklab,var(--zd-brand-accent,#c2410c) 52%,#ffd9bd);--zd-on-accent:#241005;
  --zd-shadow:0 1px 2px #0007,0 8px 24px #0006;--zd-shadow-lift:0 2px 4px #0008,0 14px 34px #0007;
  --zd-glyph-l:.32;--zd-glyph-c:.045;--zd-ink-l:.84;--zd-ink-c:.1;
  color-scheme:dark;
}}
.zd *{box-sizing:border-box}
.zd [hidden]{display:none!important}
.zd a{color:inherit;text-decoration:none}
.zd button,.zd input,.zd select{font:inherit}
.zd button{cursor:pointer;background:none;border:0;color:inherit;border-radius:var(--zd-r-control);box-shadow:none;padding:8px 10px;white-space:nowrap;line-height:1.5;transition:background-color .16s var(--zd-ease),color .16s var(--zd-ease),transform .12s var(--zd-ease),opacity .16s var(--zd-ease)}
.zd button:disabled{opacity:.4;cursor:wait}
.zd button:not(:disabled):hover{background:var(--zd-tint);color:var(--zd-accent)}
.zd button:not(:disabled):active{transform:scale(.97)}
.zd :focus-visible{outline:2px solid var(--zd-accent);outline-offset:2px;border-radius:var(--zd-r-chip)}
.zd h1,.zd h2,.zd h3,.zd p{color:inherit;font-family:inherit;margin:0}
.zd .zd-icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.zd .zd-sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.zd kbd{font:10px/1 ui-monospace,SFMono-Regular,monospace;color:var(--zd-faint);border:1px solid var(--zd-border);background:var(--zd-panel);padding:4px 5px;border-radius:5px;box-shadow:none;letter-spacing:.4px}

/* Masthead ---------------------------------------------------------------- */
.zd-masthead{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--zd-border)}
.zd-brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.zd-brand strong{font-size:21px;font-weight:700;letter-spacing:2px}
.zd-brand-mark{background:var(--zd-accent);color:var(--zd-on-accent);border-radius:var(--zd-r-control);width:33px;height:33px;display:grid;place-items:center;font-size:19px;font-weight:650;line-height:1}
.zd-brand-domain{font-size:11px;color:var(--zd-faint);letter-spacing:1.2px;padding-inline-start:5px;font-family:ui-monospace,SFMono-Regular,monospace}
.zd-top-actions{display:flex;align-items:center;gap:6px;font-size:13px}
.zd-top-actions button{display:flex;gap:7px;align-items:center;color:var(--zd-muted)}
.zd-top-link{padding:8px 10px;border-radius:var(--zd-r-control);color:var(--zd-muted);transition:color .16s var(--zd-ease),background-color .16s var(--zd-ease)}
.zd-top-link:hover{color:var(--zd-accent);background:var(--zd-tint)}
.zd-palette-open{border:1px solid var(--zd-border)!important;background:var(--zd-panel)!important;padding-inline:11px 8px!important}
.zd-palette-open:hover{border-color:var(--zd-accent)!important}
.zd-palette-open .zd-icon{width:15px;height:15px}
.zd-theme .zd-icon{width:18px;height:18px}

/* Shell and sidebar -------------------------------------------------------- */
.zd-shell{display:grid;grid-template-columns:186px minmax(0,1fr);gap:36px;padding:26px 30px 0}
.zd-sidebar{position:sticky;top:22px;height:calc(100dvh - 56px);display:flex;flex-direction:column;align-self:start;padding-block:6px 18px}
.zd-side-head{display:flex;gap:8px;align-items:baseline;padding:0 10px 12px}
.zd-side-head strong{font-weight:650;font-size:12px;letter-spacing:.5px;color:var(--zd-muted)}
.zd-side-head>span{font:11px ui-monospace,SFMono-Regular,monospace;color:var(--zd-faint)}
.zd-side-head button{display:none;margin-inline-start:auto;align-self:center}
.zd-nav-search{display:block;padding:0 3px 8px}
.zd input[type=search]{border:0;background:transparent;color:var(--zd-text);outline-offset:4px;margin:0;box-shadow:none}
.zd-nav-search input{width:100%;padding:8px 10px;font-size:12px;border-bottom:1px solid var(--zd-border)!important;border-radius:0}
.zd-nav-search input:focus{border-bottom-color:var(--zd-accent)!important}
.zd input::placeholder{color:var(--zd-faint);opacity:1}
.zd-group-nav{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--zd-border) transparent;padding-inline-end:4px;margin-inline-start:-2px}
.zd-group-nav button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:start;margin-bottom:1px;padding:7px 10px 7px 12px;font-size:13px;color:var(--zd-muted);border-radius:var(--zd-r-chip);position:relative}
.zd-group-nav button span:last-child{font:10.5px ui-monospace,SFMono-Regular,monospace;color:var(--zd-faint)}
.zd-group-nav button[aria-pressed=true]{color:var(--zd-accent);background:var(--zd-tint);font-weight:650}
.zd-group-nav button[aria-pressed=true]:before{content:"";position:absolute;inset-inline-start:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--zd-accent)}
.zd-group-nav button[aria-pressed=true] span:last-child{color:var(--zd-accent)}
.zd-admin-link{display:flex;gap:8px;align-items:center;font-size:12px;padding:16px 10px 0;color:var(--zd-faint)!important;border-top:1px solid var(--zd-line);margin-top:12px}
.zd-admin-link:hover{color:var(--zd-accent)!important}
.zd-content{min-width:0}

/* Intro -------------------------------------------------------------------- */
.zd-intro{padding:6px 0 22px}
.zd-intro-label{font-size:12px;color:var(--zd-accent);margin-bottom:10px;font-weight:600}
.zd-intro h1{font-size:clamp(27px,2.6vw,38px);font-weight:700;line-height:1.3;letter-spacing:0}
.zd-intro p{font-size:13px;color:var(--zd-muted);margin-top:10px;line-height:1.8;max-width:34em}

/* Controls ----------------------------------------------------------------- */
.zd-controls{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--zd-bg) 88%,transparent);backdrop-filter:saturate(180%) blur(10px);padding-block:10px 0}
.zd-search{height:50px;border:1px solid var(--zd-border);background:var(--zd-panel);border-radius:var(--zd-r-card);display:flex;align-items:center;gap:12px;padding:0 16px;box-shadow:var(--zd-shadow);transition:border-color .16s var(--zd-ease),box-shadow .16s var(--zd-ease)}
.zd-search:focus-within{border-color:var(--zd-accent);box-shadow:0 0 0 3px var(--zd-tint)}
/* The wrapper already carries the focus treatment; a second ring on the inner input nests two boxes. */
.zd-search input:focus-visible{outline:none}
.zd-search:focus-within>.zd-icon{color:var(--zd-accent)}
.zd-search:focus-within kbd{border-color:var(--zd-accent);color:var(--zd-accent)}
.zd-search>.zd-icon{color:var(--zd-faint);width:18px;height:18px;transition:color .16s var(--zd-ease)}
.zd-search input{min-width:0;width:100%;height:100%;padding:0;font-size:14px}
.zd-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px;border-bottom:1px solid var(--zd-border)}
.zd-views{display:flex;gap:2px;overflow:auto;scrollbar-width:none}
.zd-views button{font-size:13px;padding:6px 13px;color:var(--zd-muted);border-radius:100px}
.zd-views button[aria-pressed=true]{background:var(--zd-accent);color:var(--zd-on-accent);font-weight:600}
.zd-views button[aria-pressed=true]:hover{background:var(--zd-accent);color:var(--zd-on-accent)}
.zd-views button span{font:10.5px ui-monospace,SFMono-Regular,monospace;opacity:.75;margin-inline-start:5px}
.zd-sort select{border:1px solid transparent;background:transparent;color:var(--zd-muted);font-size:12px;padding:6px 24px 6px 9px;max-width:130px;height:auto;box-shadow:none;border-radius:var(--zd-r-chip);cursor:pointer}
.zd-sort select:hover{border-color:var(--zd-border);background:var(--zd-panel)}
.zd-results{display:flex;align-items:baseline;gap:10px;padding:20px 0 14px;scroll-margin-top:140px}
.zd-results h2{font-size:15px;font-weight:650}
.zd-results>[data-status]{color:var(--zd-faint);font:11px ui-monospace,SFMono-Regular,monospace}
.zd-auto{display:flex;align-items:center;gap:6px;margin-inline-start:auto;font-size:11px;color:var(--zd-faint);white-space:nowrap;cursor:pointer}
.zd-auto:hover{color:var(--zd-muted)}
.zd input[type=checkbox]{accent-color:var(--zd-accent);width:14px;height:14px}

/* Masonry and groups ------------------------------------------------------- */
.zd-masonry{columns:var(--zd-columns);column-gap:18px}
.zd.is-ready .zd-masonry{display:grid;grid-template-columns:repeat(var(--zd-columns),minmax(0,1fr));grid-auto-rows:1px;grid-auto-flow:row dense;column-gap:18px;columns:auto;align-items:start}
.zd-group{break-inside:avoid;background:var(--zd-panel);border:1px solid var(--zd-border);border-radius:var(--zd-r-card);margin:0 0 18px;overflow:clip;min-width:0;align-self:start;box-shadow:var(--zd-shadow);transition:box-shadow .2s var(--zd-ease),border-color .2s var(--zd-ease)}
.zd-group:hover{box-shadow:var(--zd-shadow-lift);border-color:color-mix(in srgb,var(--zd-border) 60%,var(--zd-accent))}
.zd-group-title{display:flex;align-items:center;gap:10px;padding:15px 15px 12px;border-bottom:1px solid var(--zd-line)}
.zd-group-glyph{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--zd-r-chip);background:oklch(var(--zd-glyph-l) var(--zd-glyph-c) var(--zd-hue,155));color:oklch(var(--zd-ink-l) var(--zd-ink-c) var(--zd-hue,155));font-size:12px;font-weight:700;line-height:1}
.zd-group-title h3{font-size:14px;font-weight:650;min-width:0;overflow-wrap:anywhere;letter-spacing:.2px}
.zd-group-title>[data-group-count]{margin-inline-start:auto;color:var(--zd-faint);font:10.5px ui-monospace,SFMono-Regular,monospace;background:var(--zd-sunk);padding:3px 7px;border-radius:100px}
.zd-group-description{font-size:12px!important;color:var(--zd-muted)!important;padding:12px 15px 0;line-height:1.8}
.zd-items{padding:6px}
/* Only the handful of groups too long to scan get a filter, and only once they are open. */
.zd-group-filter{display:flex;align-items:center;gap:8px;margin:10px 12px 0;padding:0 10px;height:34px;border:1px solid var(--zd-border);border-radius:var(--zd-r-control);background:var(--zd-bg)}
.zd-group-filter:focus-within{border-color:var(--zd-accent);background:var(--zd-panel)}
.zd-group-filter .zd-icon{width:14px;height:14px;color:var(--zd-faint)}
.zd-group-filter input{flex:1;min-width:0;height:100%;font-size:12px;padding:0}
.zd-group-filter input:focus-visible{outline:none}

/* Link rows ---------------------------------------------------------------- */
.zd-item{position:relative;padding:8px;border-radius:var(--zd-r-control);min-width:0;transition:background-color .14s var(--zd-ease);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px}
.zd-item:hover,.zd-item:focus-within{background:var(--zd-sunk)}
.zd-link{display:flex;align-items:center;gap:10px;min-width:0}
.zd-logo{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:8px;font-size:13px;font-weight:700;color:oklch(var(--zd-ink-l) var(--zd-ink-c) var(--zd-hue,155));background:oklch(var(--zd-glyph-l) var(--zd-glyph-c) var(--zd-hue,155));line-height:1}
.zd-logo img{width:30px;height:30px;object-fit:contain;border-radius:7px;background:#fff}
.zd-link-copy{min-width:0;flex:1}
.zd-link-title{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.6;letter-spacing:.1px}
.zd-item:hover .zd-link-title,.zd-item:focus-within .zd-link-title{color:var(--zd-accent)}
.zd-description{display:block;color:var(--zd-muted);font-size:11.5px;line-height:1.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zd-link>.zd-icon{width:13px;height:13px;color:var(--zd-faint);opacity:0;transition:opacity .15s var(--zd-ease),transform .15s var(--zd-ease);transform:translate(-2px,2px)}
.zd-item:focus-within .zd-link>.zd-icon,.zd-item:hover .zd-link>.zd-icon{opacity:1;transform:none}
.zd-pick{color:var(--zd-accent);font-size:10px;font-weight:600;background:var(--zd-tint);border-radius:4px;margin-inline-start:6px;padding:1px 4px;vertical-align:1px}

/* One slot carries either the click count or the controls. Showing three tiny buttons on
   every one of 540 rows is what made the old grid feel noisy. */
.zd-item-side{display:flex;align-items:center;justify-content:flex-end;min-height:26px;position:relative;justify-self:end}
.zd-clicks{font:10px ui-monospace,SFMono-Regular,monospace;color:var(--zd-faint);padding-inline:6px;transition:opacity .14s var(--zd-ease)}
.zd-clicks:before{content:"↗";padding-inline-end:3px}
.zd-item-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;opacity:0;transition:opacity .14s var(--zd-ease)}
.zd-item:hover .zd-item-actions,.zd-item:focus-within .zd-item-actions{opacity:1}
.zd-item:hover .zd-clicks,.zd-item:focus-within .zd-clicks{opacity:0}
.zd .zd-action{height:26px;min-width:28px;display:flex;align-items:center;justify-content:center;gap:3px;padding:3px 6px;color:var(--zd-faint);font:10px ui-monospace,SFMono-Regular,monospace;border-radius:var(--zd-r-chip)}
.zd-action .zd-icon{width:14px;height:14px}
.zd-action[aria-pressed=true]{color:var(--zd-accent);background:var(--zd-tint);opacity:1}
.zd-action[aria-pressed=true] .zd-icon{fill:currentColor;fill-opacity:.28}
.zd-item:has(.zd-action[aria-pressed=true]) .zd-item-actions{opacity:1}
.zd-item:has(.zd-action[aria-pressed=true]) .zd-clicks{opacity:0}
.zd .zd-more{display:flex;justify-content:center;align-items:center;gap:5px;width:100%;padding:10px;border-radius:0;border-top:1px solid var(--zd-line);color:var(--zd-faint);font-size:11px}
.zd-more .zd-icon{width:14px;height:14px}
.zd-detail{font-size:11px;color:var(--zd-faint)}
.zd-detail summary{cursor:pointer;padding:3px 5px;border-radius:var(--zd-r-chip);list-style:none}
.zd-detail summary::-webkit-details-marker{display:none}
.zd-detail summary:hover{color:var(--zd-accent);background:var(--zd-tint)}
.zd-detail[open]{position:relative}
.zd-detail p{position:absolute;z-index:2;inset-inline-end:0;top:26px;width:250px;padding:15px;border:1px solid var(--zd-border);border-radius:var(--zd-r-card);background:var(--zd-panel);box-shadow:var(--zd-shadow-lift);white-space:pre-wrap;line-height:1.8;color:var(--zd-muted)}
.zd-group:has(.zd-detail[open]){overflow:visible;z-index:1}

/* Personal tools, feedback, empty ------------------------------------------ */
.zd-personal-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;background:var(--zd-tint);border-radius:var(--zd-r-card);margin-bottom:18px;font-size:12px}
.zd-personal-tools p{width:100%;color:var(--zd-muted);line-height:1.8}
.zd-personal-tools button,.zd-file-button{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;border-radius:var(--zd-r-control)}
.zd-personal-tools button:not(:disabled):hover,.zd-file-button:hover{background:var(--zd-panel)}
.zd-file-button{position:relative;padding:8px 10px}
.zd-file-button input{position:absolute;width:1px;height:1px;opacity:0}
.zd-file-button:focus-within{outline:2px solid var(--zd-accent)}
.zd-feedback{padding:12px 15px;background:var(--zd-tint);border:1px solid var(--zd-border);border-radius:var(--zd-r-control);margin-bottom:16px;font-size:12px;overflow-wrap:anywhere;line-height:1.8}
.zd-empty{text-align:center;padding:76px 15px}
.zd-empty>.zd-icon{width:34px;height:34px;color:var(--zd-accent);margin-bottom:14px}
.zd-empty h3{font-size:18px;margin-bottom:8px;font-weight:650}
.zd-empty p{color:var(--zd-muted);font-size:13px;margin-bottom:20px}
.zd-empty button{background:var(--zd-accent);color:var(--zd-on-accent);padding:10px 18px;font-weight:600}
.zd-empty button:not(:disabled):hover{background:var(--zd-accent);color:var(--zd-on-accent);opacity:.9}
.zd-footer{display:flex;gap:16px;justify-content:space-between;align-items:center;padding:22px 0 26px;border-top:1px solid var(--zd-border);color:var(--zd-faint);font-size:11px;margin-top:14px}
.zd-footer .zd-icon{width:13px;height:13px}
.zd-keys{display:flex;align-items:center;gap:5px}
.zd-keys kbd{margin-inline-start:6px}
.zd-keys kbd+kbd{margin-inline-start:2px}
.zd-mobile-nav{display:none!important}

/* Command palette ---------------------------------------------------------- */
.zd-palette{border:1px solid var(--zd-border);border-radius:14px;background:var(--zd-panel);color:var(--zd-text);padding:0;width:min(620px,92vw);max-height:min(560px,80dvh);box-shadow:0 24px 70px #2b140733,0 2px 8px #2b14071a;overflow:hidden;flex-direction:column}
.zd-palette[open]{display:flex}
.zd-palette::backdrop{background:#1a0f0866;backdrop-filter:blur(2px)}
.zd-palette-head{display:flex;align-items:center;gap:12px;padding:0 16px;height:56px;border-bottom:1px solid var(--zd-line);flex-shrink:0}
.zd-palette-head>.zd-icon{color:var(--zd-accent);width:18px;height:18px}
.zd-palette-head input{flex:1;min-width:0;height:100%;font-size:15px;border:0;background:transparent;color:var(--zd-text);outline:none}
.zd-palette-head input:focus-visible{outline:none}
.zd input[type=search]::-webkit-search-cancel-button,.zd input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.zd-palette-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1;scrollbar-width:thin}
.zd-palette-list li{padding:9px 12px;border-radius:var(--zd-r-control);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.zd-palette-list li[aria-selected=true]{background:var(--zd-tint)}
.zd-palette-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zd-palette-list li[aria-selected=true] .zd-palette-name{color:var(--zd-accent)}
.zd-palette-meta{font-size:11px;color:var(--zd-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zd-palette-empty{color:var(--zd-muted);font-size:12.5px;padding:24px 12px!important;text-align:center;cursor:default!important}
.zd-palette-foot{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--zd-line);font-size:11px;color:var(--zd-faint);background:var(--zd-sunk);flex-shrink:0}
.zd-palette-foot kbd{margin-inline-end:4px}

/* Theme host page ---------------------------------------------------------- */
.zd-home .site-header,.zd-home .site-footer,.zd-home .entry-header{display:none}
.zd-home .site-content .ast-container{display:block;max-width:1480px;padding:0}
.zd-home #primary{margin:0;width:100%}
.zd-home article.page,.zd-home .entry-content{padding:0!important;background:transparent!important}
.zd-home .wp-site-blocks{padding:0}
.zd-home .wp-site-blocks>header,.zd-home .wp-site-blocks>footer,.zd-home .wp-block-post-title{display:none}
.zd-home .wp-block-post-content{max-width:1480px!important;width:100%!important}
.zd-home .wp-block-post-content>.zd{max-width:1480px!important;width:100%!important}
.zd-home .wp-site-blocks>main{margin:0!important;padding:0!important}
.zd-home{background:#fbf8f5}
.zd-home:has(.zd[data-theme=dark]){background:#16110e}
@media(prefers-color-scheme:dark){.zd-home:has(.zd[data-theme=auto]){background:#16110e}}

/* Responsive --------------------------------------------------------------- */
@media(max-width:1199px){
  .zd-shell{gap:24px;grid-template-columns:158px minmax(0,1fr);padding-inline:24px}
  .zd .zd-masonry{--zd-columns:2}
  .zd-masthead{padding-inline:24px}
  .zd-palette-open span{display:none}
}
@media(max-width:767px){
  .zd{border-radius:0}
  .zd-masthead{height:60px;padding-inline:16px}
  /* 探索目录 is redundant on a phone, but a configured destination such as 作者 is not. */
  .zd-brand-domain,.zd-top-link:not(.zd-nav-extra){display:none}
  .zd-nav-extra{padding-inline:6px}
  .zd-top-actions .zd-label{display:none}
  .zd-top-actions{gap:2px}
  .zd-top-actions button{font-size:12px;padding:8px}
  .zd-palette-open kbd{display:none}
  .zd-brand strong{font-size:19px}
  .zd-brand-mark{width:30px;height:30px;font-size:17px}
  .zd-shell{display:block;padding:20px 14px 0}
  .zd-sidebar{display:none;position:fixed;inset:0;z-index:4;height:100dvh;width:min(330px,100vw);background:var(--zd-panel);padding:22px 18px;box-shadow:30px 0 0 100vmax #1d120a73}
  .zd.nav-open .zd-sidebar{display:flex}
  .zd-side-head button{display:block}
  .zd-group-nav button{padding-block:11px}
  .zd-nav-search input{padding-block:12px}
  .zd-intro{padding:0 2px 14px}
  .zd-intro h1{font-size:26px;line-height:1.35}
  .zd-intro-label{margin-bottom:6px;font-size:11px}
  .zd-intro p{font-size:12.5px;max-width:20em}
  .zd-toolbar{gap:4px;flex-wrap:wrap;padding-block:10px}
  .zd-mobile-nav{display:flex!important;align-items:center;gap:4px;font-size:12px!important;padding-inline:6px!important}
  .zd-mobile-nav>.zd-icon{width:16px;height:16px}
  .zd-views{flex:1;gap:0}
  .zd-views button{font-size:12px;padding:7px 9px}
  .zd-views [data-view=featured]{display:none}
  .zd-sort{margin-inline-start:auto}
  .zd-sort select{font-size:11px}
  .zd .zd-masonry{--zd-columns:1}
  .zd-results{flex-wrap:wrap;row-gap:8px;padding-block:16px 12px}
  .zd-auto{font-size:10px}
  .zd-group-title{padding:15px 16px 12px}
  .zd-items{padding-inline:8px}
  .zd-item{padding:9px 8px}
  .zd-link-title{font-size:14px}
  .zd-description{font-size:12px}
  .zd-footer{flex-wrap:wrap;font-size:10px;gap:8px}
  .zd-keys{display:none}
  .zd-search{height:48px;padding-inline:14px}
  .zd-search input{font-size:14px}
  .zd-search kbd{display:none}
  .zd-palette{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
}
/* Pointer devices get the hover reveal; touch keeps every control on screen. */
@media(hover:none){
  .zd-item-actions{opacity:1}
  .zd-item .zd-clicks{opacity:1}
  .zd-item-side{gap:2px}
}
@media(prefers-reduced-motion:reduce){
  .zd *{transition:none!important;scroll-behavior:auto!important}
  .zd button:active{transform:none!important}
}

/* Desktop rows are two lines tall so several groups stay comparable in one viewport. */
@media(min-width:768px){
  .zd-item{min-height:58px;padding:9px 8px}
  .zd-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;font-size:11.5px;line-height:1.65}
  .zd-item-side{width:66px;flex-shrink:0}
  .zd-items{padding-block:5px}
}
.zd[data-columns="1"] .zd-masonry{--zd-columns:1}