@layer sl-base, tokens, theme, imported, class, element;
@layer sl-base{:where(img[data-sl-dim]){width:auto;height:auto}}
@layer imported{.cc{--bg:var(--paper);--panel:var(--paper-2);--surface:var(--card);--line:var(--rule);--fg:var(--ink);--muted:var(--ink-2);--r-sm:var(--r);--r-md:var(--r-board);--r-lg:var(--r-card);--ctl-h:var(--ctl,44px);--f-mono:var(--font-mono);--f-body:var(--font-body);
  box-sizing:border-box;width:100%;max-width:calc(var(--page) + 2*max(16px,var(--wp--style--root--padding-left,16px)));margin-inline:auto;
  padding:var(--s-6) max(16px,var(--wp--style--root--padding-right,16px)) var(--s-8) max(16px,var(--wp--style--root--padding-left,16px));
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);color:var(--fg);font-family:var(--f-body)}
.cc *,.cc *::before,.cc *::after{box-sizing:border-box}
.cc h1,.cc h2,.cc h3{margin:0;text-wrap:balance;line-height:1.15}
.cc p{margin:0}
.cc svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.cc-sprite{position:absolute;width:0;height:0;overflow:hidden}
.t-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.t-crumb svg.i{width:14px;height:14px}
.t-crumb a{color:inherit;text-decoration:none}
.t-crumb a:hover{color:var(--fg)}
.cc .lead{font-size:17px;color:var(--muted);max-width:62ch}
.a-hero{display:grid;gap:12px;max-width:760px}
.a-hero h1,.t-head h1{font-size:clamp(26px,3.4vw,38px);font-weight:600}
.a-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.a-side{position:sticky;top:calc(var(--admin-h,0px) + 84px);display:grid;gap:2px;padding:8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.a-side>span{display:contents}
.a-side button{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--muted);font:14px var(--f-body);cursor:pointer;text-align:left;white-space:nowrap}
.a-side button span{margin-left:auto;padding-left:8px;font:500 12px var(--f-mono)}
.a-side button:hover{color:var(--fg)}
.a-side button[aria-pressed="true"]{color:var(--fg);background:var(--accent-tint);border-color:var(--accent-soft)}
.a-side button[aria-pressed="true"] svg{color:var(--accent)}
.a-main{display:grid;gap:16px;min-width:0}
.kc-search{position:relative;display:flex;align-items:center}
.kc-search svg.i{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.kc-search input{width:100%;height:var(--ctl-h);padding:0 52px 0 42px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--fg);font:15px var(--f-body);outline:none;-webkit-appearance:none;appearance:none}
.kc-search input:focus{border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-tint)}
.kc-search kbd{position:absolute;right:10px;font:500 11px var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px;pointer-events:none}
.a-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line)}
.a-head .ic{grid-row:span 2;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.a-head h2{font-size:20px;font-weight:600}
.a-head p{font-size:14px;color:var(--muted)}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px}
.kc-grid>span{display:contents}
.kc-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:inherit;text-decoration:none;isolation:isolate}
.kc-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;opacity:0;transition:opacity .25s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kc-card:hover::before,.kc-card:focus-visible::before{opacity:1}
.kc-card .ic{grid-row:span 2;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.kc-card h3{font-size:15px;font-weight:600;align-self:center}
.kc-card p{font-size:13.5px;color:var(--muted);line-height:1.45}
.kc-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-md)}
@media (max-width:860px){.a-layout{grid-template-columns:minmax(0,1fr)}
  .a-side{position:static;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
  .a-side::-webkit-scrollbar{display:none}
  .a-side button{flex:none}}
@media (prefers-reduced-motion:reduce){.kc-card::before{transition:none}}

}