.kc{color-scheme:dark; --kc-ground:#171717;--kc-card:#1a1a1a;--kc-raised:#1f1f1f;--kc-border:#2a2a2a;--kc-deep:#101010; --kc-hairline:rgba(255,255,255,0.14);--kc-line-ui:rgba(255,255,255,0.16);--kc-line-row:rgba(255,255,255,0.12);--kc-line-inner:rgba(255,255,255,0.10); --kc-text:#f9f9f9;--kc-heading:#f0f0f0;--kc-prose:#dcdcdc;--kc-muted:#a8a8a8;--kc-bone:#ede9e3; --kc-red:#e83433;--kc-red-button:#e02f2e;--kc-red-hover:#c92b2a;--kc-red-tint:rgba(232,52,51,0.10);--kc-red-edge:rgba(232,52,51,0.34); --kc-red-text:#eb5050; --kc-ok:#7cb87c;--kc-focus:#69b3ff; --kc-display:Oswald,Impact,"Arial Narrow",sans-serif; --kc-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --kc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --kc-hover:0.12s ease}
.kc *,.kc *::before,.kc *::after{box-sizing:border-box}
.kc [hidden]{display:none !important}
.kc{background:var(--kc-ground);-webkit-text-size-adjust:100%}
.kc{margin:0;background:var(--kc-ground);color:var(--kc-text);font:400 16px/1.6 var(--kc-body);-webkit-font-smoothing:antialiased}
:where(.kc) button,:where(.kc) input,:where(.kc) select,:where(.kc) textarea{font:inherit;color:inherit}
:where(.kc) a{color:inherit}
:where(.kc) p{margin:0}
:where(.kc) h1,:where(.kc) h2,:where(.kc) h3{margin:0;font-family:var(--kc-display);font-weight:600;letter-spacing:-0.03em;text-transform:uppercase;text-wrap:balance}
.kc :focus-visible{outline:2px solid var(--kc-focus);outline-offset:2px}
.kc .sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:where(.kc) svg{display:block;flex:none}
:where(.kc) vector-mark{display:inline-block;flex-shrink:0}
.kc .eyebrow{margin:0;font:700 11px/1 var(--kc-body);letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-muted)}
.kc .vp{padding:24px 48px 64px}
.kc .vp-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 15px/1 var(--kc-body);color:var(--kc-text);text-decoration:underline;text-underline-offset:3px}
.kc .vp-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start;margin-top:16px}
.kc .vp-main{min-width:0}
.kc .vp-rail{min-width:0;display:flex;flex-direction:column;gap:40px}
.kc .kp{position:relative;background:var(--kc-deep);border:1px solid var(--kc-hairline);border-radius:12px;overflow:hidden}
.kc .kp-stage{position:relative;width:100%;aspect-ratio:1720/1392;max-height:640px;background:var(--kc-deep) center/contain no-repeat}
.kc .kp-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
.kc .kp-face[hidden]{display:none}
.kc .kp-face.is-dim{background:rgba(23,23,23,0.82)}
.kc .kp-big{width:72px;height:72px;border-radius:999px;border:0;background:var(--kc-red-button);color:#ffffff;display:grid;place-items:center;cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,0.5);transition:background var(--kc-hover)}
.kc .kp-big:hover{background:var(--kc-red-hover)}
.kc .kp-big svg{width:32px;height:32px;margin-left:4px}
.kc .kp-face h2{margin:0;font:600 20px/1.1 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .kp-face p{margin:0;max-width:40ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .kp-cc{display:flex;align-items:center;justify-content:center;min-height:80px;padding:12px 24px;background:var(--kc-deep);border-top:1px solid var(--kc-line-inner); font:500 17px/1.5 var(--kc-body);color:var(--kc-text);text-align:center;text-wrap:balance}
.kc .kp-cc[hidden]{display:none}
.kc .kp-bar{background:var(--kc-card);border-top:1px solid var(--kc-hairline);padding:0 8px 8px}
.kc .kp-scrub{position:relative;height:44px;margin:0 8px;cursor:pointer;touch-action:none;border-radius:4px}
.kc .kp-segs{position:absolute;left:0;right:0;top:20px;height:4px;display:flex;gap:4px;transition:top var(--kc-hover),height var(--kc-hover)}
.kc .kp-scrub:hover .kp-segs,.kc .kp-scrub:focus-visible .kp-segs,.kc .kp-scrub.is-drag .kp-segs{top:19px;height:6px}
.kc .kp-seg{position:relative;height:100%;background:var(--kc-line-ui);border-radius:999px;overflow:hidden}
.kc .kp-seg.is-hov{background:rgba(255,255,255,0.34)}
.kc .kp-seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--kc-red)}
.kc .kp-knob{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:999px;background:var(--kc-red);box-shadow:0 0 0 2px var(--kc-card); transform:translate(-50%,-50%);transition:width var(--kc-hover),height var(--kc-hover);pointer-events:none}
.kc .kp-scrub:hover .kp-knob,.kc .kp-scrub:focus-visible .kp-knob,.kc .kp-scrub.is-drag .kp-knob{width:16px;height:16px}
.kc .kp-row{display:flex;align-items:center;gap:4px;min-height:44px}
.kc .kp-btn{width:44px;height:44px;padding:0;display:inline-grid;place-items:center;flex:none;border:0;border-radius:6px;background:none;color:var(--kc-text);cursor:pointer; position:relative;transition:background var(--kc-hover)}
.kc .kp-btn:hover{background:rgba(255,255,255,0.08)}
.kc .kp-btn svg{width:24px;height:24px}
.kc .kp-btn[aria-pressed="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:999px;background:var(--kc-red)}
.kc .kp-btn[hidden]{display:none}
.kc .kp-rate{width:auto;min-width:44px;padding:0 8px;font:600 14px/1 var(--kc-body);font-variant-numeric:tabular-nums}
.kc .kp-vol{width:72px;height:44px;margin:0 8px 0 0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.kc .kp-vol::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--kc-text) var(--v,80%),var(--kc-line-ui) var(--v,80%))}
.kc .kp-vol::-moz-range-track{height:4px;border-radius:999px;background:linear-gradient(90deg,var(--kc-text) var(--v,80%),var(--kc-line-ui) var(--v,80%))}
.kc .kp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:999px;background:var(--kc-text);border:0}
.kc .kp-vol::-moz-range-thumb{width:12px;height:12px;border-radius:999px;background:var(--kc-text);border:0}
.kc .kp-time{padding:0 8px;white-space:nowrap;font:500 14px/1 var(--kc-body);font-variant-numeric:tabular-nums;color:var(--kc-text)}
.kc .kp-time span{color:var(--kc-muted)}
.kc .kp-chap{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:360px;min-height:44px;padding:0 8px;border:0;border-radius:6px;background:none; color:var(--kc-prose);font:500 14px/1.2 var(--kc-body);cursor:pointer;transition:background var(--kc-hover)}
.kc .kp-chap:hover{background:rgba(255,255,255,0.08)}
.kc .kp-chap b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc .kp-chap .pv{flex:none;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .kp-chap svg{width:16px;height:16px;color:var(--kc-muted)}
.kc .kp-status{padding:0 8px;font-size:13px;line-height:1.4;color:var(--kc-muted);white-space:nowrap}
.kc .kp-status:empty{display:none}
.kc .kp-sp{flex:1;min-width:0}
.kc .kp-rates{display:flex;flex-wrap:wrap;gap:8px;padding:8px 8px 4px;border-top:1px solid var(--kc-line-inner);margin:4px 0 0}
.kc .kp-rates[hidden]{display:none}
.kc .kp-rates legend{float:left;width:100%;margin:0 0 8px;font-size:13px;color:var(--kc-muted)}
.kc .kp-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:0 12px;cursor:pointer; border:1px solid var(--kc-hairline);border-radius:999px;background:var(--kc-raised);color:var(--kc-text);font:500 14px/1 var(--kc-body); font-variant-numeric:tabular-nums;transition:border-color var(--kc-hover),background-color var(--kc-hover)}
.kc .kp-chip:hover{border-color:rgba(255,255,255,0.34)}
.kc .kp-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kc .kp-chip:has(input:checked){background:rgba(255,255,255,0.10);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .kp-chip:has(input:focus-visible){outline:2px solid var(--kc-focus);outline-offset:2px}
.kc .kp:fullscreen{display:flex;flex-direction:column;border:0;border-radius:0;background:var(--kc-deep)}
.kc .kp:fullscreen .kp-stage{flex:1;aspect-ratio:auto;max-height:none}
.kc .vp-head{margin-top:24px}
.kc .vp-title{margin:0;font:600 clamp(24px,2.4cqw,32px)/1.1 var(--kc-display);letter-spacing:-0.03em;text-transform:uppercase;color:var(--kc-text);text-wrap:balance}
.kc .vp-acts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:16px}
.kc .vp-chan{display:flex;align-items:center;gap:12px;min-width:0}
.kc .vp-badge{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:999px;background:var(--kc-card);border:1px solid var(--kc-border)}
.kc .vp-badge img{width:28px;height:auto;display:block}
.kc .vp-chan b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--kc-text)}
.kc .vp-chan span{display:block;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vp-right{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.kc .btn-2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border:1px solid var(--kc-line-ui);border-radius:6px; background:var(--kc-card);color:var(--kc-text);font:500 15px/1 var(--kc-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--kc-hover)}
.kc .btn-2:hover{background:var(--kc-raised)}
.kc .btn-2 svg{width:16px;height:16px}
.kc .btn-2[disabled]{opacity:0.6;cursor:not-allowed}
.kc .btn-link{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border:0;background:none;color:var(--kc-text);font:500 15px/1 var(--kc-body); text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc .vt{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.kc .vt-q{font-size:15px;font-weight:500;color:var(--kc-text);margin-right:4px}
.kc .vt-b{padding:0 16px}
.kc .vt-b svg{width:18px;height:18px}
.kc .vt-b[aria-pressed="true"]{background:var(--kc-raised);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .vt-state{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vt-state:empty{display:none}
.kc .vt-state svg{width:16px;height:16px;color:var(--kc-ok)}
.kc .msg{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:4px;margin-top:16px;padding:12px;border-radius:8px;font-size:14px;line-height:1.45; background:var(--kc-red-tint);border:1px solid var(--kc-red-edge)}
.kc .msg[hidden]{display:none}
.kc .msg svg{grid-row:span 2;width:20px;height:20px;color:var(--kc-red)}
.kc .msg b{font-weight:600;color:var(--kc-text)}
.kc .msg span{color:var(--kc-muted)}
.kc .why{margin-top:16px;padding:24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .why[hidden]{display:none}
.kc .why-head{display:flex;align-items:center;gap:16px}
.kc .why h2{margin:0;font:600 20px/1.1 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .why-head p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .why fieldset{margin:24px 0 0;padding:0;border:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.kc .why legend{float:left;width:100%;margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.4;color:var(--kc-text)}
.kc .why .kp-chip{flex:0 1 auto;min-width:0;white-space:normal;text-align:left;line-height:1.3;padding:8px 16px}
.kc .why-f{display:grid;gap:8px;margin-top:24px}
.kc .why-f label{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;line-height:1.4;color:var(--kc-text)}
.kc .why-f label small{font-size:13px;font-weight:400;color:var(--kc-muted)}
.kc .why textarea{display:block;width:100%;min-height:96px;padding:12px;margin:0;font:400 16px/1.5 var(--kc-body);color:var(--kc-text);background:var(--kc-raised); border:1px solid var(--kc-hairline);border-radius:6px;resize:vertical;transition:border-color var(--kc-hover)}
.kc .why textarea::placeholder{color:var(--kc-muted);opacity:1}
.kc .why textarea:hover{border-color:rgba(255,255,255,0.34)}
.kc .why-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px}
.kc .vp-desc{margin-top:24px;padding:24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px;display:flex;flex-direction:column;gap:12px}
.kc .vp-sum{margin:0;max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .vp-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:13px;line-height:1.4;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vp-meta > * + *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:999px;background:var(--kc-muted);vertical-align:middle}
.kc .vp-help{margin-top:40px;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:24px; background:var(--kc-red-tint);border:1px solid var(--kc-red-edge);border-radius:16px}
.kc .vp-help h2{margin:0;font:600 16px/1.2 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .vp-help p{margin:8px 0 0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .vp-tabs{display:flex;flex-direction:column;gap:12px;max-height:720px;padding:16px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .vp-tl{display:flex;gap:8px}
.kc .vp-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--kc-border);border-radius:999px; background:var(--kc-card);color:var(--kc-muted);font:500 14px/1.35 var(--kc-body);cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .vp-tab:hover{background:var(--kc-raised);color:var(--kc-text)}
.kc .vp-tab .n{font-size:12px;font-weight:500;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vp-tab[aria-selected="true"]{background:var(--kc-red-button);border-color:var(--kc-red-button);color:#ffffff;font-weight:600}
.kc .vp-tab[aria-selected="true"]:hover{background:var(--kc-red-hover);border-color:var(--kc-red-hover)}
.kc .vp-tab[aria-selected="true"] .n{color:#ffffff}
.kc .vp-pan{min-height:0;display:flex;flex-direction:column;gap:8px}
.kc .vp-pan[hidden]{display:none}
.kc .vp-pan > p{margin:0;padding:0 8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vp-list{list-style:none;margin:0;padding:0 4px 0 0;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:4px; --ft:0px;--fb:0px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%)}
.kc .vp-list::-webkit-scrollbar{width:4px}
.kc .vp-list::-webkit-scrollbar-track{background:transparent}
.kc .vp-list::-webkit-scrollbar-thumb{background:rgba(232,52,51,0.45);border-radius:999px}
.kc .vp-list::-webkit-scrollbar-thumb:hover{background:var(--kc-red)}
@supports not selector(::-webkit-scrollbar){
  .kc .vp-list{scrollbar-width:thin;scrollbar-color:rgba(232,52,51,0.45) transparent}
}
.kc .vp-row,.kc .vp-srow{width:100%;padding:8px;border:1px solid transparent;border-radius:8px;background:none;text-align:left;cursor:pointer;transition:background var(--kc-hover),border-color var(--kc-hover)}
.kc .vp-row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}
.kc .vp-srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px}
.kc .vp-row:hover,.kc .vp-srow:hover{background:var(--kc-raised)}
.kc .vp-row[aria-current="true"],.kc .vp-srow[aria-current="true"]{background:var(--kc-raised);border-color:var(--kc-red-edge)}
.kc .vp-row .th{aspect-ratio:16/9;border-radius:4px;background:var(--kc-deep) center/cover no-repeat;border:1px solid var(--kc-line-inner)}
.kc .vp-row .tt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:15px;font-weight:500;line-height:1.4;color:var(--kc-text)}
.kc .tm{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;line-height:1.4;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vp-row .tm .t{font-size:14px;font-weight:600;color:var(--kc-red-text)}
.kc .tm .now{display:none;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .tm .now::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--kc-red)}
.kc [aria-current="true"] .tm .now{display:inline-flex}
.kc .vp-srow .k{font-size:13px;font-weight:600;line-height:1.4;color:var(--kc-red-text)}
.kc .vp-srow .v{font-size:15px;line-height:1.45;color:var(--kc-text)}
.kc .vp-srow .tm{grid-row:1 / 3;grid-column:2;align-self:center}
.kc .vp-srow .tm svg{width:12px;height:12px}
.kc .vp-h2{margin:0 0 16px;font:600 20px/1.1 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .vp-more ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kc .vp-more a{display:grid;grid-template-columns:160px minmax(0,1fr);gap:12px;align-items:start;padding:8px;border-radius:8px;text-decoration:none;color:inherit;transition:background var(--kc-hover)}
.kc .vp-more a:hover{background:var(--kc-raised)}
.kc .vp-more .th{position:relative;aspect-ratio:16/9;border-radius:4px;background:var(--kc-deep) center/cover no-repeat;border:1px solid var(--kc-line-inner)}
.kc .vp-more .dur{position:absolute;right:4px;bottom:4px;padding:0 4px;border-radius:4px;background:rgba(23,23,23,0.9);font-size:12px;font-weight:600;line-height:1.5;color:var(--kc-text);font-variant-numeric:tabular-nums}
.kc .vp-more .nt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;font-weight:500;line-height:1.4;color:var(--kc-text)}
.kc .vp-more .nm{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vp-legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--kc-hairline);font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .vq{margin-top:24px;padding:24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px;display:flex;flex-direction:column;gap:16px}
.kc .vq-h{margin:0;font:600 20px/1.1 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc .chip{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px;border:1px solid #3a3a3a;border-radius:999px;font:600 12px/1.2 var(--kc-body);color:#d6d6d6;white-space:nowrap}
.kc .chip svg{width:14px;height:14px;color:var(--kc-red)}
.kc .vq-t{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--kc-heading)}
.kc .vq-body{margin:0;max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .vq-by{display:flex;align-items:center;gap:12px}
.kc .who{margin:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;font-size:13px;line-height:1.4;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .who > * + *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:999px;background:var(--kc-muted);vertical-align:middle}
.kc .who b{font-weight:600;color:var(--kc-text)}
.kc .av{width:32px;height:32px;flex:none;display:inline-grid;place-items:center;border-radius:999px;background:var(--kc-raised);border:1px solid var(--kc-border);font:700 11px/1 var(--kc-body);color:var(--kc-text)}
.kc .av img{width:20px;height:auto;display:block}
.kc .vq-path{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--kc-line-inner);display:flex;flex-wrap:wrap;gap:12px 24px}
.kc .vq-path li{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.4;color:var(--kc-prose)}
.kc .vq-path li svg{width:16px;height:16px;color:var(--kc-red)}
.kc .vq-path li.gap svg{color:var(--kc-muted)}
.kc .vq-path li b{display:block;font-weight:600;color:var(--kc-text)}
.kc .vq-path li span{display:block;color:var(--kc-muted)}
.kc .vq-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc .tg{padding:0 16px}
.kc .tg svg{width:18px;height:18px}
.kc .tg[aria-pressed="true"]{background:var(--kc-raised);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .tg[aria-busy="true"]{opacity:0.6;cursor:progress}
.kc .cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--kc-raised);font:600 12px/1 var(--kc-body);color:var(--kc-text);font-variant-numeric:tabular-nums}
.kc .tg[aria-pressed="true"] .cnt{background:var(--kc-card)}
.kc .line{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .line:empty{display:none}
.kc .line svg{width:16px;height:16px;flex:none;color:var(--kc-ok)}
.kc .vq-mine{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:8px;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .vq-mine b{font-weight:600;color:var(--kc-text)}
.kc .vq .msg,.kc .vr .msg{margin-top:0}
.kc .vr{margin-top:40px}
.kc .vr-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;margin-bottom:16px}
.kc .vr-head .vp-h2{margin:0;display:flex;align-items:baseline;gap:8px}
.kc .vr-head .vp-h2 span{font:500 13px/1 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vr-sort{display:flex;gap:8px;margin:0;padding:0;border:0;min-width:0}
.kc .vr-form{display:grid;gap:8px;padding:20px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .vr-form label{font-size:14px;font-weight:600;line-height:1.4;color:var(--kc-text)}
.kc .ta{display:block;width:100%;min-height:96px;padding:12px;margin:0;font:400 16px/1.5 var(--kc-body);color:var(--kc-text);background:var(--kc-raised); border:1px solid var(--kc-hairline);border-radius:6px;resize:vertical;transition:border-color var(--kc-hover)}
.kc .ta::placeholder{color:var(--kc-muted);opacity:1}
.kc .ta:hover{border-color:rgba(255,255,255,0.34)}
.kc .vr-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.kc .vr-hint{font-size:13px;line-height:1.4;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vr-status{margin:16px 0 0}
.kc .vr-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:24px}
.kc .vr-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px}
.kc .vr-item:focus{outline:none}
.kc .vr-item:focus-visible{outline:2px solid var(--kc-focus);outline-offset:4px;border-radius:8px}
.kc .vr-item .av{width:40px;height:40px}
.kc .vr-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vr-top b{font-size:15px;font-weight:600;color:var(--kc-text)}
.kc .vr-body{margin:4px 0 0;max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose);white-space:pre-wrap;overflow-wrap:anywhere}
.kc .ts{display:inline;padding:0;border:0;background:none;color:var(--kc-text);font:inherit;font-variant-numeric:tabular-nums;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc .vr-acts{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;margin:4px 0 0 -8px}
.kc .act{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--kc-muted); font:500 13px/1 var(--kc-body);cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .act:hover{background:rgba(255,255,255,0.08);color:var(--kc-text)}
.kc .act svg{width:16px;height:16px}
.kc .act[aria-pressed="true"]{color:var(--kc-text)}
.kc .act[aria-pressed="true"] svg{color:var(--kc-red)}
.kc .act[aria-busy="true"]{opacity:0.6;cursor:progress}
.kc .vr-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px;padding:12px 16px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:8px; font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .vr-box .ta{min-height:88px;background:var(--kc-card)}
.kc .vr-edit{display:grid;gap:8px;margin-top:8px}
.kc .vr-note{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .sk-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px}
.kc .sk{display:block;height:12px;border-radius:4px;background:var(--kc-raised)}
.kc .sk.c{width:40px;height:40px;border-radius:999px}
.kc .sk-lines{display:grid;gap:8px;align-content:start;padding-top:4px}
.kc .vr-new{width:100%;margin-top:16px}
.kc .vr-more{margin-top:24px}
.kc .join{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:24px; background:var(--kc-red-tint);border:1px solid var(--kc-red-edge);border-radius:16px}
.kc .join h3{margin:0;font:600 16px/1.2 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-text)}
.kc .join p{margin:8px 0 0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .join-acts{display:flex;flex-wrap:wrap;gap:8px}
.kc .btn-red{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:6px;background:var(--kc-red-button); color:#ffffff;font:600 15px/1 var(--kc-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--kc-hover)}
.kc .btn-red:hover{background:var(--kc-red-hover)}
.kc .btn-red svg{width:14px;height:14px}
.kc .vw > p{margin:-8px 0 12px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .vw ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kc .vw a{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;color:inherit;text-decoration:none;transition:background var(--kc-hover)}
.kc .vw a:hover{background:var(--kc-raised)}
.kc .vw .nt{font-size:15px;font-weight:500;line-height:1.4;color:var(--kc-text)}
@media (max-width:1279px){
  .kc .vp{padding:24px 32px 64px}
  .kc .vp-grid{grid-template-columns:minmax(0,1fr)}
  .kc .vp-tabs{max-height:none}
}
@media (max-width:767px){
  .kc .vp{padding:16px 16px 48px}
  .kc .vp-grid{gap:40px}
  .kc .kp{margin:0 -16px;border-radius:0;border-width:1px 0}
  .kc .kp-stage{max-height:none}
  .kc .kp-face{padding:16px}
  .kc .kp-cc{min-height:72px;padding:12px 16px;font-size:16px}
  .kc .kp-bar{padding:0 4px 8px}
  .kc .kp-row{gap:0}
  .kc .kp-time{padding:0 4px;font-size:13px}
  .kc .kp-vol,.kc [data-k="mute"],.kc .kp-chap{display:none}
  .kc .vp-acts{align-items:flex-start;flex-direction:column}
  .kc .vp-desc{padding:20px}
  .kc .vp-help{grid-template-columns:56px minmax(0,1fr);padding:20px}
  .kc .vp-help .btn-2{grid-column:1 / -1;width:100%}
  .kc .why{padding:20px}
  .kc .vp-more a{grid-template-columns:128px minmax(0,1fr)}
  .kc .vq{padding:20px}
  .kc .vr-form{padding:16px}
  .kc .join{grid-template-columns:minmax(0,1fr);padding:20px}
  .kc .join-acts > *{flex:1}
  .kc .vr-head{align-items:flex-start;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .kc *,.kc *::before,.kc *::after{transition-duration:0s !important}
}
.kc .btn-2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border:1px solid var(--kc-line-ui);border-radius:6px;background:var(--kc-card); color:var(--kc-text);font:500 15px/1 var(--kc-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--kc-hover),border-color var(--kc-hover)}
.kc .btn-2:hover{background:var(--kc-raised)}
.kc .btn-2 svg{width:16px;height:16px}
.kc .btn-2[disabled],.kc .btn-red[disabled]{opacity:0.6;cursor:not-allowed}
.kc .btn-red{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:6px;background:var(--kc-red-button);color:#ffffff; font:600 15px/1 var(--kc-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--kc-hover)}
.kc .btn-red:hover{background:var(--kc-red-hover)}
.kc .btn-red svg{width:14px;height:14px}
.kc .btn-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--kc-text);font:500 15px/1.3 var(--kc-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc .btn-link svg{width:14px;height:14px}
.kc .btn-x{width:44px;height:44px;padding:0;display:inline-grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--kc-muted);cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .btn-x:hover{color:var(--kc-text);background:rgba(255,255,255,0.08)}
.kc .btn-x svg{width:20px;height:20px}
.kc .tg{padding:0 16px}
.kc .tg svg{width:18px;height:18px}
.kc .tg[aria-pressed="true"]{background:var(--kc-raised);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .tg[aria-busy="true"],.kc .act[aria-busy="true"]{opacity:0.6;cursor:progress}
.kc .tg.hand svg{color:var(--kc-red)}
.kc .cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--kc-raised);font:600 12px/1 var(--kc-body);color:var(--kc-text);font-variant-numeric:tabular-nums}
.kc .tg[aria-pressed="true"] .cnt{background:var(--kc-card)}
.kc .chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc .chip{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:4px 12px;border:1px solid #3a3a3a;border-radius:999px;font:600 12px/1.2 var(--kc-body);color:#d6d6d6;white-space:nowrap}
.kc .chip svg{width:14px;height:14px;color:var(--kc-red)}
.kc .chip.soft{border-color:var(--kc-border);color:var(--kc-muted)}
.kc .cchip{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--kc-hairline);border-radius:999px;background:var(--kc-raised); color:var(--kc-text);font:500 14px/1.2 var(--kc-body);cursor:pointer;transition:border-color var(--kc-hover),background-color var(--kc-hover)}
.kc .cchip:hover{border-color:rgba(255,255,255,0.34)}
.kc .cchip[aria-pressed="true"],.kc .cchip:has(input:checked){background:rgba(255,255,255,0.10);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text);font-weight:600}
.kc .cchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.kc .cchip:has(input:focus-visible){outline:2px solid var(--kc-focus);outline-offset:2px}
.kc .lbl{font:700 11px/1 var(--kc-body);letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-muted)}
.kc .field{display:grid;gap:8px;min-width:0}
.kc .field > label,.kc .field > .flab{font:600 14px/1.4 var(--kc-body);color:var(--kc-text)}
.kc .opt{font-size:13px;font-weight:400;color:var(--kc-muted)}
.kc .input,.kc .select,.kc .ta{display:block;width:100%;min-height:44px;margin:0;padding:8px 12px;font:400 16px/1.5 var(--kc-body);color:var(--kc-text);background:var(--kc-raised); border:1px solid var(--kc-hairline);border-radius:6px;transition:border-color var(--kc-hover)}
.kc .input:hover,.kc .select:hover,.kc .ta:hover{border-color:rgba(255,255,255,0.34)}
.kc .input::placeholder,.kc .ta::placeholder{color:var(--kc-muted);opacity:1}
.kc .ta{min-height:96px;padding:12px;resize:vertical}
.kc .select{-webkit-appearance:none;appearance:none;padding-right:36px;cursor:pointer; background:var(--kc-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center}
.kc .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kc .check{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;line-height:1.4;color:var(--kc-text);cursor:pointer}
.kc .check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--kc-red-button)}
.kc .search{position:relative;display:flex;align-items:center;flex:1 1 280px;min-width:0}
.kc .search input{width:100%;height:52px;margin:0;padding:0 52px 0 48px;background:var(--kc-card);border:1px solid var(--kc-line-ui);border-radius:6px;color:var(--kc-text); font:400 16px/1 var(--kc-body);-webkit-appearance:none;appearance:none;transition:border-color var(--kc-hover)}
.kc .search input:hover,.kc .search input:focus{border-color:rgba(255,255,255,0.34)}
.kc .search input:focus-visible{outline:2px solid var(--kc-focus);outline-offset:4px}
.kc .search input::placeholder{color:var(--kc-muted);opacity:1}
.kc .search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.kc .search > svg{position:absolute;left:16px;width:20px;height:20px;color:var(--kc-muted);pointer-events:none}
.kc .search .btn-x{position:absolute;right:4px}
.kc .drop{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;border:1px dashed var(--kc-hairline);border-radius:6px;font-size:14px;line-height:1.4;cursor:pointer; transition:border-color var(--kc-hover),background-color var(--kc-hover);background:none;color:var(--kc-text);width:100%;text-align:left}
.kc .drop:hover{border-color:rgba(255,255,255,0.34);background:rgba(255,255,255,0.03)}
.kc .drop svg{width:20px;height:20px;color:var(--kc-muted)}
.kc .drop b{font-weight:600}
.kc .drop small{display:block;font-size:13px;color:var(--kc-muted)}
.kc .drop.has-file{border-style:solid;border-color:rgba(255,255,255,0.34)}
.kc .msg{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:12px;border-radius:8px;font-size:14px;line-height:1.45;background:var(--kc-red-tint);border:1px solid var(--kc-red-edge)}
.kc .msg svg{grid-row:span 2;width:20px;height:20px;color:var(--kc-red)}
.kc .msg b{font-weight:600;color:var(--kc-text)}
.kc .msg span{color:var(--kc-muted)}
.kc .line{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .line:empty{display:none}
.kc .line svg{width:16px;height:16px;flex:none;color:var(--kc-ok)}
.kc .panel{padding:16px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:8px;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .panel b{font-weight:600;color:var(--kc-text)}
.kc .note{font-size:14px;line-height:1.55;color:var(--kc-prose);font-style:italic;max-width:68ch}
.kc .card{background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px;padding:24px}
.kc .av{width:32px;height:32px;flex:none;display:inline-grid;place-items:center;border-radius:999px;background:var(--kc-raised);border:1px solid var(--kc-border);font:700 11px/1 var(--kc-body);color:var(--kc-text);overflow:hidden}
.kc .av img{width:64%;height:auto;display:block}
.kc .av.lg{width:56px;height:56px;font-size:16px}
.kc .person{position:relative;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.34);text-underline-offset:3px}
.kc .person::before{content:"";position:absolute;inset:-12px -4px}
.kc .person:hover{text-decoration-color:var(--kc-text)}
.kc .who{margin:0;display:flex;align-items:center;flex-wrap:wrap;row-gap:4px;font-size:13px;line-height:1.4;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .who > * + *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:999px;background:var(--kc-muted);vertical-align:middle}
.kc .who b{font-weight:600;color:var(--kc-text)}
.kc .join{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:24px;background:var(--kc-card);border:1.5px solid rgba(232,52,51,0.45); box-shadow:0 0 32px rgba(232,52,51,0.08);border-radius:16px}
.kc .join h3{font:600 20px/1.1 var(--kc-display);letter-spacing:-0.02em;color:var(--kc-text)}
.kc .join p{margin-top:8px;max-width:60ch;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .join-acts{display:flex;flex-wrap:wrap;gap:8px}
.kc .lockstrip{display:flex;align-items:center;gap:8px;margin-top:16px;padding:12px 16px;border:1px solid var(--kc-hairline);border-radius:8px;background:var(--kc-raised);font:500 14px/1.3 var(--kc-body);color:var(--kc-prose)}
.kc .lockstrip svg{width:16px;height:16px;color:var(--kc-red)}
.kc .teaser{-webkit-mask-image:linear-gradient(#000 40%,rgba(0,0,0,0.12));mask-image:linear-gradient(#000 40%,rgba(0,0,0,0.12))}
.kc .legal{margin-top:16px;font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc{--kt-gutter:16px;--kt-side-w:264px;--kt-rail-w:72px;--kt-float-shadow:0 24px 64px rgba(0,0,0,0.6)}
@media (min-width:768px){
  .kc{--kt-gutter:32px}
}
@media (min-width:1024px){
  .kc{--kt-gutter:48px}
}
.kc .kt-shell{display:grid;grid-template-columns:minmax(0,1fr)}
.kc .kt-side{position:relative;z-index:20;min-width:0;background:var(--kc-ground);border-bottom:1px solid var(--kc-hairline)}
.kc .kt-side__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back top acct" "list list list";align-items:center;gap:8px;padding:8px var(--kt-gutter) 12px}
.kc .kt-side__back{grid-area:back;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:44px;min-height:44px;border-radius:6px;color:var(--kc-muted); font:500 14px/1.35 var(--kc-body);text-decoration:none;white-space:nowrap;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .kt-side__back:hover{background:rgba(255,255,255,0.08);color:var(--kc-text)}
.kc .kt-side__back svg{width:20px;height:20px;flex:none}
.kc .kt-side__top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.kc .kt-side__brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--kc-text);font:600 20px/1 var(--kc-display);letter-spacing:-0.03em;text-transform:uppercase; text-decoration:none;white-space:nowrap;border-radius:6px}
.kc .kt-side__brand b{color:var(--kc-red);font-weight:600}
.kc a.kt-side__brand:hover{color:var(--kc-heading)}
.kc .kt-side__toggle{display:none}
.kc .kt-side__list{grid-area:list;min-width:0;list-style:none;margin:0 calc(-1 * var(--kt-gutter));padding:0 var(--kt-gutter);display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.kc .kt-side__list::-webkit-scrollbar{display:none}
.kc .kt-side__grp{display:none}
.kc .kt-main{min-width:0;padding:24px var(--kt-gutter) 64px}
/* One content width for every page in the shell: 1080px, the main column's
   natural width beside the open sidebar at 1440. Pages never set their own
   outer width; running text keeps its own 72ch measure inside it. */
.kc{--kc-content:1080px}
.kc .kt-col{width:100%;max-width:var(--kc-content);margin-inline:auto}
.kc .kt-main .vp{padding:0}
.kc .kt-main > .vp{padding:0}
.kc .kt-nav{position:relative;width:100%;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px 0 8px;border:1px solid var(--kc-border);border-radius:999px;background:var(--kc-card); color:var(--kc-muted);font:500 14px/1.35 var(--kc-body);white-space:nowrap;text-align:left;text-decoration:none;cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .kt-nav:hover{background:var(--kc-raised);color:var(--kc-text)}
.kc .kt-nav[aria-current="page"]{background:var(--kc-raised);color:var(--kc-text);border-color:var(--kc-red-edge)}
.kc .kt-nav:focus-visible{outline-offset:-4px}
.kc .kt-tile{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--kc-raised);border:1px solid var(--kc-border);color:var(--kc-muted)}
.kc .kt-tile svg{width:16px;height:16px}
.kc .kt-nav__label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kc .kt-nav__end{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .kt-side__acct{grid-area:acct;flex:none}
.kc .kt-acct{display:flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 4px;border:1px solid var(--kc-border);border-radius:999px;background:var(--kc-card);color:var(--kc-text); font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.kc .kt-acct:hover{background:var(--kc-raised)}
.kc .kt-acct__av{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:var(--kc-raised);border:1px solid var(--kc-line-ui);color:var(--kc-text);font:600 15px/1 var(--kc-body);overflow:hidden}
.kc .kt-acct__av svg{width:20px;height:20px;color:var(--kc-muted)}
.kc .kt-acct__av img{width:64%;height:auto;display:block}
.kc .kt-acct__text{display:grid;min-width:0;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .kt-acct__text > b{font-weight:600;font-size:14px;color:var(--kc-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc .kt-acct__text > span{white-space:nowrap}
@media (max-width:1023px){
  .kc .kt-side__back span,.kc .kt-acct__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kc .kt-acct{padding:4px}
  .kc .kt-acct--signin{padding:4px 12px 4px 4px}
  .kc .kt-acct--signin .kt-acct__text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .kc .kt-acct--signin .kt-acct__text > span{display:none}
  .kc .kt-nav.is-turn{display:none}
}
@media (min-width:1024px){
  .kc .kt-shell{grid-template-columns:var(--kt-side-w) minmax(0,1fr);transition:grid-template-columns 0.2s ease}
  .kc .kt-shell.is-collapsed{grid-template-columns:var(--kt-rail-w) minmax(0,1fr)}
  .kc .kt-side{position:sticky;top:0;height:calc(100vh - var(--kt-top,0px));height:calc(100dvh - var(--kt-top,0px));border-bottom:0;background:none;overflow:visible}
  .kc .kt-side__in{position:absolute;inset:0 auto 0 0;width:100%;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 12px;background:var(--kc-ground); border-right:1px solid var(--kc-hairline);overflow:hidden;transition:width 0.2s ease,box-shadow 0.2s ease}
  .kc .kt-side__back{justify-content:flex-start;padding:0 12px;margin-bottom:4px}
  .kc .kt-side__top{margin-bottom:8px;padding-left:8px}
  .kc .kt-side__toggle{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:none;color:var(--kc-muted);cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
  .kc .kt-side__toggle:hover{background:rgba(255,255,255,0.08);color:var(--kc-text)}
  .kc .kt-side__toggle svg{width:20px;height:20px}
  .kc .kt-side__list{flex:1 1 auto;flex-direction:column;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;gap:4px;margin:0;padding:0}
  .kc .kt-side__grp{display:block;height:1px;margin:12px 12px 8px;background:var(--kc-hairline)}
  .kc .kt-side__grp span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* The open sidebar names each group in red, so Recent, Community and Topics
     read as separate divisions. #eb5050 is the red Community Q&A uses for
     small text on dark (design system, Known differences 21). The rail keeps
     the hairline alone: it has no room for words. */
  .kc .kt-shell:not(.is-collapsed) .kt-side__grp,.kc .kt-shell.is-peek .kt-side__grp{height:auto;margin:20px 12px 6px;background:none}
  .kc .kt-shell:not(.is-collapsed) .kt-side__grp span,.kc .kt-shell.is-peek .kt-side__grp span,.kc .kt-side__glabel{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:block;font:700 11px/1 var(--kc-body);letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-red-text)}
  .kc .kt-side__glabel{margin:12px 12px 6px}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__glabel{display:none}
  .kc .kt-nav{border:1px solid transparent;border-radius:6px;background:none;padding:8px 12px 8px 8px}
  .kc .kt-nav[aria-current="page"]{font-weight:600;background:var(--kc-raised);border-color:var(--kc-red-edge)}
  .kc .kt-side__acct{padding:12px 0 0;margin-top:12px;border-top:1px solid var(--kc-hairline)}
  .kc .kt-acct{width:100%;border:0;border-radius:8px;background:none;padding:4px;gap:12px}
  .kc .kt-main{padding:48px var(--kt-gutter) 96px}
  .kc .kt-shell.is-collapsed .kt-side__in{width:var(--kt-rail-w)}
  .kc .kt-shell.is-collapsed .kt-side__top{justify-content:center;padding-left:0}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__brand{display:none}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__back span,.kc .kt-shell.is-collapsed:not(.is-peek) .kt-nav__label,.kc .kt-shell.is-collapsed:not(.is-peek) .kt-nav__end,.kc .kt-shell.is-collapsed:not(.is-peek) .kt-acct__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-nav{justify-content:center;padding:8px}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-acct{justify-content:center}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__back{justify-content:center;padding:0}
  .kc .kt-shell.is-peek .kt-side__in{width:var(--kt-side-w);z-index:30;box-shadow:var(--kt-float-shadow)}
  .kc .kt-shell.is-peek .kt-side__top{justify-content:space-between;padding-left:8px}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){
  .kc .kt-shell,.kc .kt-side__in{transition:none}
}
.kc .hero{container:hero / inline-size}
.kc .hero-in{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.kc .hask{min-width:0}
.kc .hask h1{margin-top:12px;font-size:clamp(34px,4.6vw,56px);line-height:1.02;color:var(--kc-text)}
.kc .hask .lede{margin-top:16px;max-width:60ch;font-size:17px;line-height:1.55;color:var(--kc-prose);text-wrap:pretty}
.kc .hask .ask{max-width:none;margin:32px 0 0}
.kc .hask .sugs{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:16px}
.kc .hask .chips{justify-content:flex-start}
.kc .hpath{min-width:0}
.kc .hpath ol{list-style:none;margin:12px 0 0;padding:24px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .hpath li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;min-width:0}
.kc .hpath .mk{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--kc-raised);border:1px solid var(--kc-hairline);color:var(--kc-prose)}
.kc .hpath .mk svg{width:20px;height:20px}
.kc .hpath b{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--kc-text);text-wrap:pretty}
.kc .hpath p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--kc-muted);text-wrap:pretty}
@container hero (min-width:560px){
  .kc .hpath ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@container hero (min-width:960px){
  .kc .hero-in{grid-template-columns:minmax(0,1fr) 352px;column-gap:48px}
  .kc .hpath ol{grid-template-columns:minmax(0,1fr);gap:16px}
}
.kc .ask{width:100%;max-width:760px;margin:0 auto;text-align:left}
.kc .askbar{--ring:1px;display:flex;align-items:center;gap:12px;height:64px;background:var(--kc-card);border:1px solid var(--kc-line-ui);border-radius:14px;padding:0 8px 0 16px;position:relative;isolation:isolate}
.kc .askbar:focus-within{border-color:rgba(255,255,255,0.35);box-shadow:0 0 0 3px rgba(232,52,51,0.18)}
.kc .askbar input{flex:1;min-width:0;align-self:stretch;margin:0;padding:0;background:transparent;border:0;color:var(--kc-text);font:400 16px/1 var(--kc-body)}
.kc .askbar input:focus,.kc .askbar input:focus-visible{outline:none}
@property --kc-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes kcSheen{to{--kc-a:360deg}}
.kc .askbar::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:var(--ring); background:conic-gradient(from var(--kc-a),transparent 0 62%,rgba(232,52,51,0.55) 78%,rgba(232,52,51,0.95) 84%,rgba(232,52,51,0.55) 90%,transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:kcSheen 7s linear infinite;opacity:0.75;pointer-events:none}
.kc .askbar:focus-within::before{opacity:1;animation-duration:3.5s}
.kc .askbar .go{width:48px;height:48px;flex:none;border-radius:999px;background:var(--kc-red-button);border:0;color:#ffffff;cursor:pointer;display:grid;place-items:center;transition:background var(--kc-hover)}
.kc .askbar .go:hover{background:var(--kc-red-hover)}
.kc .askbar .go svg{width:20px;height:20px}
.kc .askerr{margin-top:8px;font-size:14px;color:var(--kc-text)}
.kc .hsec{margin-top:64px}
.kc .hsec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.kc .hsec-head h2{margin-top:12px;font-size:clamp(28px,3vw,40px);line-height:1}
.kc .hsec-head .sub{margin-top:12px;max-width:60ch;font-size:16px;line-height:1.6;color:var(--kc-muted)}
.kc .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.kc .vcardlink{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.kc .poster{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--kc-hairline);background:var(--kc-deep) center/cover no-repeat;transition:border-color var(--kc-hover)}
.kc .vcardlink:hover .poster{border-color:rgba(255,255,255,0.34)}
.kc .poster .dur{position:absolute;right:8px;bottom:8px;padding:0 4px;border-radius:4px;background:rgba(23,23,23,0.9);font:600 12px/1.5 var(--kc-body);color:var(--kc-text);font-variant-numeric:tabular-nums}
.kc .vcardlink .t{font-size:15px;font-weight:500;line-height:1.4;color:var(--kc-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc .vcardlink .m{font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .thread{display:flex;flex-direction:column;gap:24px;padding:24px 0 16px}
.kc .me{align-self:flex-end;max-width:85%;padding:12px 16px;border-radius:16px;background:var(--kc-raised);border:1px solid var(--kc-hairline);font-size:15px;line-height:1.5}
.kc .vturn{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .vturn .vname{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--kc-muted)}
.kc .vturn .vname b{font-size:15px;font-weight:600;color:var(--kc-text)}
.kc .vstate{margin-top:8px;font-size:15px;font-weight:600;line-height:1.5;color:var(--kc-text)}
.kc .ventry{margin-top:4px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .ventry b{font-weight:600;color:var(--kc-text)}
.kc .atext{margin-top:12px;max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .srcs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.kc .src{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--kc-border);border-radius:999px;background:var(--kc-raised);color:var(--kc-text);font:500 14px/1.2 var(--kc-body); text-decoration:none;cursor:pointer;transition:border-color var(--kc-hover)}
.kc .src:hover{border-color:rgba(255,255,255,0.34)}
.kc .vidmatch{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;align-items:center;margin-top:16px;padding:12px;border:1px solid var(--kc-border);border-radius:12px;background:var(--kc-raised); color:inherit;text-decoration:none;transition:border-color var(--kc-hover)}
.kc .vidmatch:hover{border-color:rgba(255,255,255,0.34)}
.kc .vidmatch .k{display:block;font-size:13px;color:var(--kc-muted)}
.kc .vidmatch .t{display:block;margin-top:4px;font-size:15px;font-weight:600;line-height:1.4;color:var(--kc-text)}
.kc .vidmatch .j{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:600;color:var(--kc-red-text)}
.kc .vidmatch .j svg{width:12px;height:12px}
.kc .block{margin-top:24px;padding-top:24px;border-top:1px solid var(--kc-line-inner)}
.kc .block h3{margin-bottom:12px;font:600 16px/1.2 var(--kc-display);letter-spacing:-0.02em;color:var(--kc-text)}
.kc .block .help{font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kc .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.kc .optcard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:12px}
.kc .optcard b{font-size:16px;font-weight:600;line-height:1.35}
.kc .optcard p{font-size:14px;line-height:1.5;color:var(--kc-muted)}
.kc .optcard .btn-2,.kc .optcard .btn-red{margin-top:8px}
.kc .sim{display:flex;flex-direction:column;gap:8px}
.kc .simrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--kc-border);border-radius:12px;background:var(--kc-raised)}
.kc .simrow a{flex:1 1 260px;min-width:0;color:inherit;text-decoration:none}
.kc .simrow a b{display:block;margin-top:8px;font-size:15px;font-weight:600;line-height:1.4;color:var(--kc-heading)}
.kc .simrow a:hover b{text-decoration:underline;text-underline-offset:3px}
.kc .dform{display:grid;gap:16px}
.kc .composer{position:sticky;bottom:0;z-index:5;padding:16px 0 24px;background:linear-gradient(rgba(23,23,23,0),var(--kc-ground) 24px)}
.kc .phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.kc .phead h1{margin-top:12px;font-size:clamp(34px,4vw,52px);line-height:1.02}
.kc .phead .sub{margin-top:12px;max-width:64ch;font-size:17px;line-height:1.55;color:var(--kc-prose)}
.kc .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.kc .sortsel{display:inline-flex;align-items:center;gap:8px}
.kc .sortsel .select{width:auto;min-width:200px}
.kc .filters{margin-top:16px;padding:12px 0;border-top:1px solid var(--kc-line-row);border-bottom:1px solid var(--kc-line-row)}
.kc .fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc .fbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--kc-line-ui);border-radius:999px;background:var(--kc-raised);color:var(--kc-text);font:600 14px/1.2 var(--kc-body);cursor:pointer;transition:border-color var(--kc-hover),background-color var(--kc-hover)}
.kc .fbtn:hover{border-color:rgba(255,255,255,0.34)}
.kc .fbtn[aria-expanded="true"]{border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .fbtn svg{width:16px;height:16px}
.kc .fbtn .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--kc-red-button);color:#fff;font:700 11px/1 var(--kc-body);font-variant-numeric:tabular-nums}
.kc .fpills{display:contents}
.kc a.fpill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 8px 0 12px;border:1px solid var(--kc-text);border-radius:999px;background:rgba(255,255,255,0.10);color:var(--kc-text);font:600 13px/1.2 var(--kc-body);text-decoration:none;white-space:nowrap}
.kc a.fpill svg{width:14px;height:14px;color:var(--kc-muted)}
.kc a.fpill:hover svg{color:var(--kc-text)}
.kc .fpanel{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:14px 16px;border:1px solid var(--kc-hairline);border-radius:12px;background:var(--kc-raised)}
.kc .fpanel .cchip{min-height:36px;padding:6px 12px;font-size:13px;background:var(--kc-card)}
.kc .fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kc .fgroup .lbl{min-width:64px}
@media (pointer:coarse){.kc .fpanel .cchip,.kc a.fpill{min-height:44px}}
.kc .count{margin-top:16px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
/* THE LIST CARD, brought back from the search results card of 0.x (Reg,
   2026-10-02): two a row, a red edge down the left, the topic's glyph ghosted
   in the corner on a guide, the title and two lines of the answer, and the
   counts as a footer line with an arrow. One shape for every list: topics,
   search, the Community lists, an article's related guides. */
.kc .qlist{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.kc .qlist > li{display:flex;min-width:0}
.kc .qc{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;padding:20px 20px 20px 24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:12px;overflow:hidden;color:inherit;text-decoration:none; transition:background var(--kc-hover),border-color var(--kc-hover)}
.kc .qc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc-red);opacity:0.85}
.kc .qc > div{flex:1;min-width:0;position:relative;z-index:1}
.kc .qc .wm{position:absolute;right:-14px;top:-14px;color:#fff;opacity:0.05;pointer-events:none}
.kc .qc .wm svg{width:104px;height:104px;display:block}
/* The footer: the counts on the left and the arrow on the right, under a line. */
.kc .qc::after{content:"";position:absolute;right:20px;bottom:22px;width:16px;height:16px;background:var(--kc-muted);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat}
.kc .qc:hover::after{background:var(--kc-text)}
.kc .qc:hover{background:var(--kc-raised);border-color:var(--kc-line-ui)}
.kc .qc h3{margin:12px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 16px/1.35 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-heading);text-wrap:pretty}
.kc .qc .ex{font-size:14px;line-height:1.5;color:var(--kc-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc .qc .by{display:flex;align-items:center;gap:8px;margin-top:12px}
.kc .qc .by .av{width:24px;height:24px;font-size:10px}
.kc .qstats{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:36px;padding:12px 28px 0 0;border-top:1px solid var(--kc-line-inner)}
.kc .qstats .stat{font-size:13px}
/* #eb5050, the red Community Q&A uses for small text on dark (design system, Known differences 21). */
.kc .qstats .stat.watch{color:var(--kc-red-text);font-weight:600}
.kc .qstats .stat svg{width:14px;height:14px}
/* A card with nothing to count still gets its footer line, so the arrow sits on it. */
.kc .qc > div:last-child{padding-bottom:48px}
.kc .qc > div:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;border-top:1px solid var(--kc-line-inner)}
.kc .stat{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.4 var(--kc-body);color:var(--kc-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.kc .stat svg{width:16px;height:16px}
.kc .stat.hot{color:var(--kc-text);font-weight:600}
.kc .stat.hot svg{color:var(--kc-red)}
.kc .empty{padding:32px 24px;background:var(--kc-card);border:1px solid var(--kc-hairline);border-radius:16px;text-align:center;font-size:15px;color:var(--kc-prose)}
.kc .empty .row{justify-content:center;margin-top:16px}
.kc .qp-head{padding:24px 28px}
.kc .qp-title{margin-top:16px;font:600 clamp(24px,2.6vw,32px)/1.1 var(--kc-display);letter-spacing:-0.03em;text-transform:uppercase;color:var(--kc-text)}
.kc .qp-by{display:flex;align-items:center;gap:12px;margin-top:16px}
.kc .qp-body{margin-top:16px;max-width:72ch;font-size:16px;line-height:1.6;color:var(--kc-prose)}
.kc .qp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--kc-line-inner)}
.kc .qp-acts .sp{flex:1}
.kc .gate{display:grid;gap:12px;flex-basis:100%;padding:16px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:8px}
.kc .allow{font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .allow.block{color:var(--kc-text);font-weight:600}
.kc .secthead{display:flex;align-items:baseline;gap:12px;margin:40px 0 16px}
.kc .secthead h2{font-size:24px;line-height:1.1;letter-spacing:-0.02em}
.kc .secthead span{font-size:13px;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .acard{margin-bottom:16px}
.kc .acard.accepted{border-color:var(--kc-border)}
.kc .ahead{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kc .ahead .ago{margin-left:auto;font-size:13px;color:var(--kc-muted)}
.kc .ahead .nm b{font-size:15px;font-weight:600}
.kc .ahead .nm span{display:block;font-size:13px;color:var(--kc-muted)}
.kc .vfeed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--kc-line-inner);font-size:14px;color:var(--kc-prose)}
.kc .answervid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px 24px;align-items:center;margin-top:16px;color:inherit;text-decoration:none}
.kc .answervid .poster{width:100%}
.kc .answervid .k{font-size:13px;color:var(--kc-muted)}
.kc .answervid .t{display:block;margin-top:4px;font-size:17px;font-weight:600;line-height:1.35;color:var(--kc-text)}
.kc .answervid .m{display:block;margin-top:4px;font-size:13px;color:var(--kc-muted)}
.kc .answervid .btn-2{margin-top:12px}
.kc .answervid:hover .t{text-decoration:underline;text-underline-offset:3px}
.kc .pending-vid{margin-top:16px}
.kc .adm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:center;padding:20px 24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .adm-row b{display:block;margin-top:8px;font-size:16px;font-weight:600;line-height:1.4;color:var(--kc-heading)}
.kc .adm-row .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.kc .adm-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.kc .kbg{margin-top:40px}
.kc .kbg h2{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:20px;line-height:1.1;letter-spacing:-0.02em}
.kc .kbg h2 .chip{text-transform:none;letter-spacing:0}
.kc .kbg .kbwhy{margin-top:8px;max-width:64ch;font-size:14px;line-height:1.5;color:var(--kc-muted)}
.kc .kbrows{list-style:none;margin:16px 0 0;padding:0}
.kc .kbrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--kc-line-row)}
.kc .kbrow:last-child{border-bottom:1px solid var(--kc-line-row)}
.kc .kbrow b{display:block;font-size:15px;font-weight:600;line-height:1.4}
.kc .kbrow span{display:block;margin-top:4px;font-size:13px;color:var(--kc-muted)}
.kc .kbrow .k{flex:1 1 280px;min-width:0}
.kc .tabs{display:flex;flex-wrap:wrap;gap:8px}
.kc .tabpill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--kc-border);border-radius:999px;background:var(--kc-card);color:var(--kc-muted); font:500 14px/1 var(--kc-body);cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover)}
.kc .tabpill:hover{background:var(--kc-raised);color:var(--kc-text)}
.kc .tabpill[aria-selected="true"]{background:var(--kc-red-button);border-color:var(--kc-red-button);color:#ffffff;font-weight:600}
.kc .aform{display:grid;gap:24px;max-width:760px;margin-top:32px}
.kc .prow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--kc-line-row)}
.kc .card > .prow:first-child{padding-top:0;border-top:0}
.kc .prow .nm{flex:1 1 200px;min-width:0}
.kc .prow .nm b{display:block;font-size:15px;font-weight:600}
.kc .prow .nm span{display:block;font-size:13px;color:var(--kc-muted)}
.kc .perm{display:inline-flex;align-items:center;gap:8px}
.kc .toggle{position:relative;width:48px;height:28px;flex:none;padding:0;border:1px solid rgba(255,255,255,0.34);border-radius:999px;background:var(--kc-raised);cursor:pointer;transition:background var(--kc-hover),border-color var(--kc-hover)}
.kc .toggle::before{content:"";position:absolute;inset:-8px -2px}
.kc .toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:var(--kc-muted);transition:left var(--kc-hover),background var(--kc-hover)}
.kc .toggle[aria-checked="true"]{background:var(--kc-red-button);border-color:var(--kc-red-button)}
.kc .toggle[aria-checked="true"]::after{left:23px;background:#ffffff}
.kc .toggle:disabled{opacity:0.6;cursor:not-allowed}
.kc .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:rgb(0 0 0 / 0.72)}
.kc .dialog{width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:24px 16px calc(20px + env(safe-area-inset-bottom,0px));background:var(--kc-card);border:1px solid var(--kc-hairline); border-radius:12px 12px 0 0;box-shadow:0 24px 64px rgba(0,0,0,0.6)}
.kc .dialog h2{font-size:24px;line-height:1.1}
.kc .dhead{display:flex;align-items:center;gap:16px}
.kc .dhead .btn-x{margin-left:auto}
.kc .pstats{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:14px;color:var(--kc-prose)}
.kc .pstats b{font-weight:600;color:var(--kc-text)}
.kc .toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:200;max-width:calc(100vw - 32px);padding:12px 16px;border-radius:6px; background:var(--kc-text);color:var(--kc-ground);font:600 14px/1.4 var(--kc-body);text-align:center;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.kc .toast:empty{display:none}
@media (min-width:640px){
  .kc .modal{align-items:center;padding:24px}
  .kc .dialog{border-radius:12px;padding:32px}
}
@media (max-width:767px){
  .kc .hask .lede{font-size:16px}
  .kc .hask .ask{margin-top:24px}
  .kc .hpath ol{padding:16px}
  .kc .askbar{height:56px;border-radius:12px}
  .kc .askbar .go{width:44px;height:44px}
  .kc .hsec{margin-top:48px}
  .kc .vturn{grid-template-columns:minmax(0,1fr);padding:20px}
  .kc .me{max-width:100%}
  .kc .vidmatch,.kc .answervid{grid-template-columns:minmax(0,1fr)}
  .kc .qlist{grid-template-columns:minmax(0,1fr)}
  .kc .qp-head{padding:20px}
  .kc .card{padding:20px}
  .kc .join{grid-template-columns:minmax(0,1fr);padding:20px}
  .kc .join-acts > *{flex:1}
  .kc .adm-row{grid-template-columns:minmax(0,1fr);padding:20px}
  .kc .adm-row .acts{justify-content:flex-start}
  .kc .two{grid-template-columns:minmax(0,1fr)}
  .kc .sortsel .select{min-width:0}
  .kc .fgroup .lbl{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .kc *,.kc *::before,.kc *::after{transition-duration:0s !important;animation:none !important}
}
.kc .help{font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .ferr{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.4;color:var(--kc-text)}
.kc .ferr svg{width:16px;height:16px;color:var(--kc-red)}
.kc .drop:has(input:focus-visible){outline:2px solid var(--kc-focus);outline-offset:2px}
.kc .adm-h{display:flex;align-items:baseline;gap:12px;margin-top:40px;font-size:20px;line-height:1.1;letter-spacing:-0.02em}
.kc .adm-h span{font:500 13px/1 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .vec-bone{--vector-ink:var(--kc-bone)}
:where(.kc) mark{background:var(--kc-red-tint);color:var(--kc-text);border-radius:4px;box-shadow:0 0 0 1px var(--kc-red-edge)}
.kc .vp-row.nothumb{grid-template-columns:minmax(0,1fr)}
.kc .vp-from{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--kc-line-inner)}
.kc .vp-from-h{display:flex;align-items:center;gap:12px}
.kc .vp-from-h .lbl{display:block}
.kc .vp-from-h b{display:block;margin-top:4px;font-size:15px;font-weight:600}
.kc .vp-from p{max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .kp-lock{display:flex;align-items:center;gap:12px;max-width:44ch;padding:12px 16px;border:1px solid var(--kc-hairline);border-radius:8px;background:var(--kc-card);font-size:15px;line-height:1.45;color:var(--kc-text);text-align:left}
.kc .kp-lock > svg{width:20px;height:20px;color:var(--kc-red)}
.kc .kp-lock .btn-link{display:inline;min-height:0;font-size:15px}
.kc .tx-search{flex:none}
.kc .tx-search input{height:44px;padding:0 48px 0 44px;font-size:15px}
.kc .tx-search > svg{left:14px;width:18px;height:18px}
.kc .tx-search .btn-x{right:0}
.kc .tx-count{margin:0;padding:0 8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .tx-count:empty{display:none}
.kc .tx-row{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;padding:8px;border:1px solid transparent;border-radius:8px;background:none;text-align:left;cursor:pointer; transition:background var(--kc-hover),border-color var(--kc-hover)}
.kc .tx-row:hover{background:var(--kc-raised)}
.kc .tx-row[aria-current="true"]{background:var(--kc-raised);border-color:var(--kc-red-edge)}
.kc .tx-row .tm{flex-direction:column;align-items:flex-start;gap:4px}
.kc .tx-row .tm .t{font-size:14px;font-weight:600;color:var(--kc-red-text)}
.kc .tx-row .tx{font-size:15px;line-height:1.5;color:var(--kc-prose)}
@media (max-width:767px){
  .kc .vp-tl.three .vp-tab{padding:0 8px}
  .kc .vp-tl.three .vp-tab .n{display:none}
  .kc .adm-h{margin-top:32px}
}

/* ================================================================ the frame */
/* The only rules outside .kc: the document itself. Without them the browser's
   8px body margin puts a strip of white space round every page and lets the
   sticky sidebar slide by the same amount at the foot of a long page. */
html,body{margin:0;padding:0;background:#171717}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent}
/* The page's own root only (kc-shell.js and gate.js give it id="kc"). The
   admin wraps single panels in .kc too: the sidebar, a Community view, a
   video's page, and none of those should be forced a whole window tall. */
.kc#kc{min-height:100vh}
/* Skip past twenty sidebar links straight to the page. Out of sight until focused. */
.kc .kc-skip{position:absolute;left:16px;top:-64px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:6px;
  background:var(--kc-text);color:var(--kc-ground);font:600 15px/1 var(--kc-body);text-decoration:none}
.kc .kc-skip:focus{top:16px}
.kc .kt-main:focus{outline:none}
/* The legal line and the build, at the foot of every page (the prototype's .vp-legal). */
.kc .kc-legal{margin-top:64px;padding-top:24px;border-top:1px solid var(--kc-hairline);font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .kc-legal .kc-build{margin-top:8px;font:500 12px/1.4 var(--kc-mono);color:var(--kc-muted);font-variant-numeric:tabular-nums}
.kc .sr{margin:-1px}

/* ------------------------------------------------------------ moving between pages */
/* Every page here is a whole new page. Where the browser can (cross-document
   view transitions, in the Chrome and Safari that have them; anywhere else
   nothing changes), it keeps the old page on screen until the new one is
   ready and then swaps only the page area. The sidebar is a layer of its own
   that holds perfectly still: the new page's sidebar is drawn at once, with no
   animation, and lib/side-state.js has already made it the same as the one it
   replaces (open or rail, its scroll, the account, the recent questions). On a
   phone the top bar and the chip row are that same layer. Everything else
   cross-fades in 0.18s. With reduced motion asked for there is no transition
   at all: the page is simply swapped. These are the document's own rules, so
   they sit outside .kc like html and body above. */
@view-transition{navigation:auto}
.kc .kt-side{view-transition-name:kc-side}
::view-transition-group(kc-side){animation:none}
::view-transition-old(kc-side){display:none}
::view-transition-new(kc-side){animation:none}
::view-transition-group(root){animation-duration:0.18s}
::view-transition-old(root),::view-transition-new(root){animation-duration:0.18s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ------------------------------------------------------------ sidebar additions */
/* The recent questions to Vector, filled by help.js. Hidden on phones. */
.kc .kt-convs{display:none}
.kc .kt-convlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.kc .kt-nav{text-decoration:none}
/* Every row keeps its own height. The list is a flex column that is nearly
   always taller than the window (nine topics and four guides), and flex items
   shrink by default: the 1px group hairlines were squeezed to 0px and vanished,
   on the open sidebar and on the rail alike. The list scrolls instead. */
.kc .kt-side__list > li{flex:none}
.kc .kt-nav vector-mark{display:block}
/* The account while /api/me answers: the shape of the block, nothing that reads as content. */
.kc .kt-acct--wait{cursor:default}
.kc .kt-acct--wait:hover{background:var(--kc-card)}
.kc .kc-sk{display:block;width:96px;height:12px;border-radius:4px;background:var(--kc-raised)}
.kc .kc-sk--s{width:56px;margin-top:8px}
.kc .kt-acct{position:relative;text-decoration:none}
/* Unread notifications: a count on the corner of the avatar, so it reads the same open, as a rail and on a phone. */
.kc .kt-acct__n{position:absolute;left:28px;top:0;min-width:20px;height:20px;padding:0 4px;border-radius:999px;background:var(--kc-red-button);
  border:2px solid var(--kc-ground);color:#ffffff;font:700 11px/16px var(--kc-body);text-align:center;font-variant-numeric:tabular-nums}
.kc .kt-acct__av{font:600 13px/1 var(--kc-body);letter-spacing:0.02em}
/* A guide's title is a whole question; on the phone chip row it is cut short rather than running a chip off the screen. */
@media (max-width:1023px){.kc .kt-nav.is-guide{max-width:240px}}
@media (min-width:1024px){
  .kc .kt-convs{display:block}
  .kc .kt-acct__n{left:32px}
  .kc .kt-acct:hover{background:var(--kc-raised)}
  .kc .kt-acct--wait:hover{background:none}
}

/* ------------------------------------------------------------ home: rest and chat */
.kc .kt-shell[data-mode="chat"] .kc-rest{display:none}
.kc .kt-shell:not([data-mode="chat"]) .kc-chat{display:none}
.kc .askbar input::placeholder{color:var(--kc-muted);opacity:1}
.kc .askbar .go{padding:0}
/* The rule under the head sits on the page ground: the system's standard line (0.14). */
.kc .kc-chathead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--kc-hairline)}
.kc .kc-chat-t{min-width:0;font-size:24px;line-height:1.1;letter-spacing:-0.02em;overflow-wrap:anywhere}
.kc .kc-chat-t:focus{outline:none}
.kc .kc-chathead .btn-2{flex:none;padding:0 16px}
.kc .kc-chathead .btn-2 svg{width:16px;height:16px}
/* The docked bar covers the bottom of the window, so a turn scrolled into view stops above it. */
.kc .thread > *{scroll-margin-top:24px;scroll-margin-bottom:160px}
.kc .composer .ask{max-width:none}
.kc .ssync{margin-top:8px;font-size:13px;line-height:1.4;color:var(--kc-muted)}
.kc .ssync:empty{display:none}
.kc .poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
/* One of Vector's turns, as the prototype's .vturn: his face, his name, then what help.js writes. */
.kc .vturn .c-body{min-width:0}
.kc .vturn > vector-mark{display:block}
.kc .c-said{margin-top:12px}

/* ------------------------------------------------------------ an answer (help.js) */
.kc .ans-body{max-width:72ch;font-size:15px;line-height:1.6;color:var(--kc-prose)}
.kc .ans-body p{margin:0 0 12px}
.kc .ans-body p:last-child{margin-bottom:0}
/* A list in an answer is a procedure: each step gets its own line of air. */
.kc .ans-body ul,.kc .ans-body ol{margin:16px 0;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.kc .ans-body ul:last-child,.kc .ans-body ol:last-child{margin-bottom:0}
.kc .ans-body p + ul,.kc .ans-body p + ol{margin-top:12px}
.kc .ans-body li{line-height:1.6;padding-left:4px}
.kc .ans-body li::marker{color:var(--kc-muted)}
.kc .ans-body ol li::marker{font-weight:700;color:var(--kc-text)}
.kc .ans-body strong,.kc .ans-body b{font-weight:700;color:#ffffff}
.kc .ans-body em{font-style:italic;color:var(--kc-prose)}
/* The thing you click or type: a red chip, legible because of the tint under it. */
.kc .ans-body code{font:500 0.92em/1.4 var(--kc-mono);padding:2px 4px;border-radius:4px;background:var(--kc-red-tint);border:1px solid var(--kc-red-edge);color:#ffb3b3;white-space:nowrap}
@media (max-width:599px){.kc .ans-body code{white-space:normal}}
.kc .ans-cites{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.kc .ans-cites .h,.kc .ans-next .h{margin-bottom:4px;font:700 11px/1 var(--kc-body);letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-muted)}
.kc .ans-cites a,.kc .kc-sources a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 16px;background:var(--kc-raised);border:1px solid var(--kc-border);border-radius:8px;
  color:var(--kc-text);text-decoration:none;transition:border-color var(--kc-hover)}
.kc .ans-cites a:hover,.kc .kc-sources a:hover{border-color:rgba(255,255,255,0.34)}
.kc .ans-cites a svg,.kc .kc-sources a svg{width:16px;height:16px;color:var(--kc-muted)}
.kc .ans-cites .ct,.kc .kc-sources .s-t{flex:1;min-width:0;font-size:14px;font-weight:500;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.kc .ans-cites .cc,.kc .kc-sources .s-d{flex:none;max-width:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--kc-muted)}
.kc .ans-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--kc-muted)}
.kc .ans-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
/* Vector asks one question back: the options are choice chips, and the bar below stays open. */
.kc .ans-ask{margin-top:16px}
.kc .ans-ask .opts{display:flex;flex-wrap:wrap;gap:8px}
.kc .ans-ask button{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:8px 16px;border:1px solid var(--kc-hairline);border-radius:999px;background:var(--kc-raised);
  color:var(--kc-text);font:500 14px/1.35 var(--kc-body);text-align:left;cursor:pointer;transition:border-color var(--kc-hover)}
.kc .ans-ask button:hover{border-color:rgba(255,255,255,0.34)}
.kc .ans-ask .or{margin-top:12px;font-size:13px;line-height:1.5;color:var(--kc-muted)}
/* What to ask next: the quietest block on the card, but still something you
   press, so its edge is the system's pressable line (0.16), not the inner
   line (0.10) a divider uses. */
.kc .ans-next{margin-top:16px}
.kc .ans-next button{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:8px 16px;border:1px solid var(--kc-line-ui);border-radius:999px;background:none;
  color:var(--kc-muted);font:500 13px/1.35 var(--kc-body);text-align:left;cursor:pointer;transition:background var(--kc-hover),color var(--kc-hover),border-color var(--kc-hover)}
.kc .ans-next button:hover{background:var(--kc-raised);color:var(--kc-text);border-color:rgba(255,255,255,0.34)}
.kc .btn-neutral{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border:1px solid var(--kc-line-ui);border-radius:6px;background:var(--kc-card);
  color:var(--kc-text);font:500 15px/1 var(--kc-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--kc-hover)}
.kc .btn-neutral:hover{background:var(--kc-raised)}
/* The working line while Vector reads: one line that changes, and a dot that does not. */
.kc .think{display:flex;align-items:center;min-height:24px}
.kc .think .tline{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--kc-muted)}
.kc .think .tw{transition:opacity 0.18s ease,transform 0.18s ease}
.kc .think .tw.out{opacity:0;transform:translateY(-4px)}
.kc .think .now{width:16px;height:16px;flex:none;display:grid;place-items:center}
.kc .think .now i{display:block;width:8px;height:8px;border-radius:999px;background:var(--kc-red);animation:kcBeat 1.1s ease-in-out infinite}
@keyframes kcBeat{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ------------------------------------------------------------ "Did this help?" (answers and articles) */
.kc .helpful{margin-top:16px;padding-top:16px;border-top:1px solid var(--kc-line-row)}
.kc .hv{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kc .hv .lbl{margin-right:4px;font:400 14px/1.4 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-prose)}
.kc .thumb{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--kc-line-ui);border-radius:6px;background:var(--kc-card);
  color:var(--kc-text);font:500 14px/1 var(--kc-body);cursor:pointer;transition:background var(--kc-hover)}
.kc .thumb svg{width:16px;height:16px}
.kc .thumb:hover{background:var(--kc-raised)}
.kc .thumb[aria-pressed="true"]{background:var(--kc-raised);border-color:var(--kc-text);box-shadow:inset 0 0 0 1px var(--kc-text)}
.kc .thumb[disabled]{opacity:0.6;cursor:not-allowed}
.kc .hv-state{font-size:14px;line-height:1.4;color:var(--kc-muted)}
.kc .hv-state.bad,.kc .teach-state.bad{color:var(--kc-red-text)}
.kc .hv-why{max-width:560px;margin-top:16px;padding:20px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:12px}
.kc .hv-lead,.kc .teach-lead{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--kc-prose)}
.kc .hv-reasons{display:flex;flex-direction:column;gap:4px}
.kc .hv-r{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px;line-height:1.4;color:var(--kc-text);cursor:pointer}
.kc .hv-r input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--kc-red-button)}
.kc .hv-more,.kc .teach-lbl{display:block;margin:16px 0 8px;font:600 14px/1.4 var(--kc-body);color:var(--kc-text)}
.kc .hv-why textarea,.kc .teach-form textarea{display:block;width:100%;min-height:96px;margin:0;padding:12px;background:var(--kc-card);border:1px solid var(--kc-hairline);border-radius:6px;
  color:var(--kc-text);font:400 16px/1.5 var(--kc-body);resize:vertical}
.kc .hv-why textarea::placeholder,.kc .teach-form textarea::placeholder{color:var(--kc-muted);opacity:1}
.kc .hv-foot,.kc .teach-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}

/* ------------------------------------------------------------ teaching an answer (admins) */
.kc .teach{margin-top:16px}
.kc .teach-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.kc .teach-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--kc-muted);font:500 13px/1.4 var(--kc-body);cursor:pointer;text-align:left}
.kc .teach-open:hover{color:var(--kc-text)}
.kc .teach-open svg{width:16px;height:16px}
.kc .teach-form{max-width:560px;margin-top:8px;padding:20px;background:var(--kc-raised);border:1px solid var(--kc-hairline);border-radius:12px}
.kc .teach-form .teach-lbl{margin-top:0}
.kc .teach-state{font-size:14px;line-height:1.4;color:var(--kc-muted)}

/* ------------------------------------------------------------ corrections to the prototype's rules */
/* Generated rules above that are wrong on the real pages, or that the design
   system (prototypes/kc-design-system.html) says otherwise about. Corrected
   here rather than in the generated block, so regenerating it cannot quietly
   put them back. */
/* The shop's own name draws the logo instead of initials (avatar() in the render files, acctHtml in side-state.js). */
.kc .kt-acct__av.is-logo{background:#171717}
.kc .kt-acct__av.is-logo img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.kc .av.av-logo{background:#171717}
.kc .av.av-logo img{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
/* auto-fill, not the prototype's auto-fit: with one or two videos published a
   card keeps its size instead of stretching across the whole row (the home
   page's videos, /videos). */
.kc .vgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
/* A name that opens a profile is usually 13px text, a 15.5px line box; 15px
   above and below takes its hit area to 45.5px, over the 44px floor. The
   prototype's 12px left it at 39.5px. */
.kc .person::before{inset:-15px -4px}
/* The channel line's words are blocks (the prototype's .vp-chan span), but
   the badge beside them is a span too and must stay the centred circle
   .vp-badge draws: none of that rule reaches it. The three inherited values
   are what it would have with the rule not there at all. */
.kc .vp-chan .vp-badge{display:grid;font-size:inherit;line-height:inherit;color:inherit}
/* The name's last word. Accent red #e83433 is for graphics and type 24px and
   up (4.24:1 on the ground); the name is 20px, so it takes the red approved
   for small red text on dark (D38, #eb5050), 4.95:1 on the ground. */
.kc .kt-side__brand b{color:var(--kc-red-text)}
/* Keyboard focus on the ask bar is the system's search-field ring (Known
   differences 16): 2px #69b3ff drawn 4px out, in place of the prototype's red
   glow. The 0.35 border and the red sheen stay; the send button keeps its own. */
.kc .askbar:focus-within{box-shadow:none}
.kc .askbar:has(input:focus-visible){outline:2px solid var(--kc-focus);outline-offset:4px}
/* A divider inside a card is the row line (0.12): the inner line (0.10) all
   but disappears on #1a1a1a. */
.kc .block,.kc .vq-path,.kc .vp-from,.kc .kp-cc,.kc .qp-acts,.kc .vfeed{border-top-color:var(--kc-line-row)}
/* The prototype marks a refused allowance "allow block". Only the colour and
   weight are meant; the answer section's margin, padding and rule are not. */
.kc .allow.block{margin-top:0;padding-top:0;border-top:0}
/* Page titles are the design system's FAQ header title, clamp(34px, 5.2vw,
   52px): the prototype's own ends on the system's slope. A title a member
   wrote can be one long word, so it breaks rather than push the page sideways. */
.kc .phead h1{font-size:clamp(34px,5.2vw,52px);overflow-wrap:anywhere}
.kc .adm-row b,.kc .kbrow b,.kc .qc h3{overflow-wrap:anywhere}
/* The home page's title is the system's .h1: 36px, 48px from 768 and 56px
   from 1024, line height 1.1 and then 1 from 768. */
.kc .hask h1{font-size:36px;line-height:1.1}
@media (min-width:768px){.kc .hask h1{font-size:48px;line-height:1}}
@media (min-width:1024px){.kc .hask h1{font-size:56px}}
/* A video card's title and its facts are one group under the poster: 12px
   from the poster, 4px between the two. */
.kc .vcardlink{gap:12px}
.kc .vcardlink .t + .m{margin-top:-8px}
/* The rail lists hang their hover padding outside the column, so an item's
   words and thumbnail line up with the heading above them. */
.kc .vw ol{margin:0 -12px}
.kc .vp-more ol{margin:0 -8px}
/* A link inside an error panel is part of the sentence: inline, at the
   sentence's own size and line, so that line keeps its height. Its hit area
   is drawn round it, 14px past each edge of its own box (17px tall at 14px
   type), 45px in all. */
.kc .msg .btn-link{position:relative;display:inline;min-height:0;font-size:inherit;line-height:inherit;white-space:nowrap}
.kc .msg .btn-link::before{content:"";position:absolute;inset:-14px -4px}
/* A source under Vector's answer is a chip on one line, but an entry's title
   wraps on a phone (three lines at 375). Half the 44px height as the radius
   keeps the one line chip a pill and gives the wrapped one even corners, and
   the wrapped lines get the system's 1.4 instead of a cramped 1.2. */
.kc .src{padding:8px 16px;border-radius:22px;line-height:1.4}
/* The same for a question Vector offers to ask next, three lines at 375. */
.kc .ans-next button{border-radius:22px}
/* A video with no poster yet (lib/media-render.js NO_POSTER): a quiet play
   mark in the middle of the dark frame, so it reads as a video and not as a
   picture that failed. Here in the shared sheet so every page that shows a
   video card draws it the same way: the home page's video answers and a
   question's answer tile as well as /videos and the video page. The same
   values as lib/css-media.js, which the media pages also load: a 20px icon in
   a 44px circle, on the 4px grid. */
.kc .md-noposter{position:absolute;inset:0;display:grid;place-items:center;color:var(--kc-muted)}
.kc .md-noposter svg{box-sizing:content-box;width:20px;height:20px;padding:12px;border-radius:999px;background:rgba(255,255,255,0.08)}
/* A card in a list that is all one topic carries no topic chip (lib/kc-shell.js
   articleItem), so its title is the first thing in it and opens flush with
   the card's padding instead of 12px below it. */
.kc .kc-art h3:first-child{margin-top:0}
@keyframes kcPeekIn{from{opacity:0}to{opacity:1}}
@media (min-width:1024px){
  /* The rail keeps every icon where the open sidebar has it: left aligned,
     8px into its row (12px for the way back to the store), not centred. In a
     72px rail that lands each one within 1.5px of the middle. Centred, they
     re-centred the moment a hovered rail began to close, while the panel was
     still 264px wide, so each jumped about 100px right and slid back. The
     toggle keeps to the right edge for the same reason, and moves with it. */
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-nav{justify-content:flex-start;padding:8px 12px 8px 8px}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__back{justify-content:flex-start;padding:0 12px}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-acct{justify-content:flex-start}
  .kc .kt-shell.is-collapsed:not(.is-peek) .kt-side__top{justify-content:flex-end}
  /* The list scrolls with its scrollbar hidden, so its foot fades to say there
     is more below. 40px is deep enough to reach the words of whichever row the
     edge cuts (rows are 46px), and the same 40px of room under the last row
     lets the list end clear of the fade; a row reached by keyboard stops short
     of it too. */
  .kc .kt-side__list{padding-bottom:40px;scroll-padding-bottom:40px;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
  /* Peeking the rail open: the words wait until the panel is nearly full width
     and then fade in, instead of showing cut short while it slides. The toggle
     keeps its 44px square and the name gives way to it. With no gap between
     the two (space-between already parts them when open), the toggle starts
     the slide 6px from where the rail drew it, not 14px. */
  .kc .kt-side__top{gap:0}
  .kc .kt-side__toggle{flex:none}
  .kc .kt-side__brand{min-width:0;overflow:hidden}
  .kc .kt-shell.is-peek .kt-side__brand,.kc .kt-shell.is-peek .kt-side__back span,.kc .kt-shell.is-peek .kt-nav__label,.kc .kt-shell.is-peek .kt-nav__end,.kc .kt-shell.is-peek .kt-acct__text{
    animation:kcPeekIn 0.12s ease 0.15s both}
}
/* ------------------------------------------------------------ button rows
   David's rule: never one button alone on a row in a button group, and a
   full-width button alone on its row counts too; only the one button of a
   group may stand alone. The buttons under a question sit in a row of their
   own (lib/community-render.js actionsHtml), never more than two, and never
   wrap: on a phone a long label wraps inside its button instead (below). */
.kc .qp-btns{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;flex-basis:100%;min-width:0}
/* The four suggestions on the Ask home page stay pills only where the first
   two share a line and the third cannot join them (659px to 952px of
   suggestions), or all four fit one line (1204px up); anywhere else they go
   two by two, each a tile its sentence wraps in. Narrower is a phone, or the
   hero's column beside the path (1180, 1320: the first two each alone on a
   row); 954px to 959px is the one-column hero at 1018-1023, 1122-1127 and
   1314-1319, where the fourth sat alone. Four, so no row is ever one
   (test/kc-shell.test.mjs). */
.kc .hask .sugs{container-type:inline-size}
@container (max-width:679px) or ((min-width:940px) and (max-width:1219px)){
  .kc .hask .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;align-self:stretch;gap:8px}
  .kc .hask .chips .cchip{justify-content:flex-start;padding:10px 12px;border-radius:12px;text-align:left;text-wrap:balance}
}
@media (max-width:767px){
  /* The balanced pair. Two buttons share one row at every phone width: auto
     columns give each button its one-line width first and the longer label
     what is left, so a short label never wraps and a long one wraps inside its
     own button, two lines in 44px. One button alone keeps the full width it
     had, except in the tools under a question, where it keeps its own width.
     Under the question (I have this too and Follow, Follow and Answer this
     question), the tools under it (Answer this question and Delete, Edit and
     Delete), the question a video answers, the join panel, and Did that
     solve it? under Vector's answer. The empty state's pair is the same rule
     under 600 (below). */
  .kc .qp-btns,.kc .qp-head > .qp-own > .row,.kc .vq-acts,.kc .join-acts,.kc .af .block > .row[role="group"]{
    display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:stretch;align-items:stretch;gap:8px}
  .kc .qp-btns > *,.kc .qp-head > .qp-own > .row > *,.kc .vq-acts > *,.kc .join-acts > *,.kc .af .block > .row[role="group"] > *{
    width:auto;padding-top:4px;padding-bottom:4px;white-space:normal;text-wrap:balance;line-height:1.2;text-align:center}
  .kc .qp-head > .qp-own > .row > :only-child{justify-self:start}
  /* I have this too keeps its count in the line under the question ("1 has
     this too", which the page updates on every press); in the button too it
     left the pair no room at 320. */
  .kc .qp-btns .tg .cnt,.kc .vq-acts .tg .cnt{display:none}
  /* Choice chips (the Community filters, the Videos Topics): two across, and
     three across for the last three when the count is odd, so no chip is
     alone on a row. A label that does not fit wraps inside its chip, which is
     a 12px-radius tile rather than a pill around two lines. Every group has
     at least two chips. */
  .kc .fgroup{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:8px}
  .kc .fgroup > .lbl{grid-column:1 / -1}
  .kc .fgroup > .cchip{grid-column:span 3;min-height:44px;padding:8px 12px;border-radius:12px;white-space:normal;text-wrap:balance;text-align:center}
  .kc .fgroup:has(> .cchip:last-child:nth-of-type(odd)) > .cchip:nth-last-of-type(-n+3){grid-column:span 2}
  /* A conversation's title takes the whole line, New question under it: beside
     the button it had 116px at 320 and its two lines cut "WHY ARE MY WIDE
     LETTERS CARVING TOO DEEP?" short. */
  .kc .kc-chathead{flex-wrap:wrap;row-gap:12px}
  .kc .kc-chathead .kc-chat-t{flex-basis:100%}
  /* "Still stuck?" (the help card under an article and under a video) stacks
     on a phone, which puts Vector right above the red button: he is drawn in
     bone there, and the button takes the full width. */
  .kc .vp-help vector-mark{--vector-ink:var(--kc-bone)}
  .kc .vp-help .btn-red{grid-column:1 / -1;width:100%}
  /* The lede is 16px on phones (the system's Lede; .hask .lede already is). */
  .kc .phead .sub{font-size:16px}
  /* Vector's face sits beside his name line rather than on a row of its own,
     and what he says below keeps the card's full width. */
  .kc .vturn{grid-template-columns:40px minmax(0,1fr)}
  .kc .vturn > vector-mark{grid-area:1 / 1;position:relative;z-index:1}
  .kc .vturn > .c-body{grid-area:1 / 1 / 2 / 3}
  .kc .vturn .vname{min-height:40px;padding-left:52px}
  /* Where a question went reads down the card, one step to a line, instead of
     wrapping into a ragged two and two. */
  .kc .vq-path{flex-direction:column;gap:12px}
}
@media (max-width:599px){
  /* A source's domain goes under its name, so neither is cut short. Vector's
     own sources (an entry's title and its topic) are the same row: at 375 the
     topic left the title about 110px, "What should I ...". */
  .kc .kc-sources a,.kc .ans-cites a{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;gap:0 12px}
  .kc .kc-sources .s-ic,.kc .kc-sources .s-ar,.kc .ans-cites .ci,.kc .ans-cites .ca{grid-row:1 / span 2}
  .kc .kc-sources .s-ic,.kc .ans-cites .ci{grid-column:1}
  .kc .kc-sources .s-ar,.kc .ans-cites .ca{grid-column:3}
  .kc .kc-sources .s-t,.kc .ans-cites .ct{grid-column:2;grid-row:1}
  .kc .kc-sources .s-d,.kc .ans-cites .cc{grid-column:2;grid-row:2;max-width:none}
  /* "Did this answer it?" on its own line and its two answers side by side
     under it, at every phone width: at 375 and 390 "Not quite" wrapped alone
     under the question and Yes. */
  .kc div.vfeed > span:first-child{flex-basis:100%}
  /* The admin's empty boxes stack their actions full width. */
  .kc .empty:not(.kc-empty) .row{flex-direction:column;align-items:stretch;align-self:stretch}
  /* An empty state's two ways on share one row (the balanced pair above),
     rather than stacking one to a row; one alone keeps the full width. */
  .kc .kc-empty .row{display:grid;grid-auto-flow:column;grid-auto-columns:auto;justify-content:stretch;align-items:stretch;align-self:stretch;gap:8px}
  .kc .kc-empty .row > *{width:auto;padding-top:4px;padding-bottom:4px;white-space:normal;text-wrap:balance;line-height:1.2;text-align:center}
  /* Under 600 a pair's buttons keep 12px at each side, not 20 or 24, so two
     share a 320px row with no label running to three lines ("Clear the search
     and filters" beside Ask Vector). */
  .kc .qp-btns > *,.kc .qp-head > .qp-own > .row > *,.kc .vq-acts > *,.kc .join-acts > *,.kc .af .block > .row[role="group"] > *,.kc .kc-empty .row > *{padding-left:12px;padding-right:12px}
}
@media (max-width:359px){
  /* An empty state's box keeps 12px at each side, not 24, so its pair has
     262px at 320 and "Clear the search and filters" wraps to two lines beside
     Ask Vector, not three. */
  .kc .kc-empty{padding-left:12px;padding-right:12px}
}

/* ------------------------------------------------------------ list pages */
.kc .toolbar .btn-2{min-height:52px}
.kc .count{margin-top:24px}
.kc .kc-gap{margin-top:16px}
/* A search that found nothing has no count line over its empty state, so the
   empty state keeps the count's 24px from the search field: a new group. */
.kc .toolbar + .kc-gap{margin-top:24px}
.kc .kc-art h3{overflow-wrap:anywhere}
.kc .kc-empty{display:flex;flex-direction:column;align-items:center;max-width:640px;margin:48px auto 0}
.kc .kc-gap .kc-empty{max-width:none;margin:0}
.kc .kc-empty-t{margin-top:16px;font-size:24px;line-height:1.1;color:var(--kc-text)}
.kc .kc-empty-t:focus{outline:none}
.kc .kc-empty-p{margin-top:8px;max-width:52ch;line-height:1.55}
.kc #page-h:focus{outline:none}

/* ------------------------------------------------------------ an article */
.kc .kc-article{max-width:none}
.kc .vp-back svg{width:16px;height:16px}
.kc .kc-agrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"head rail" "body rail";column-gap:48px;row-gap:32px;align-items:start;margin-top:16px}
.kc .kc-agrid.no-toc{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body"}
.kc .kc-ahead{grid-area:head;min-width:0}
.kc .kc-arail{grid-area:rail;align-self:stretch;min-width:0}
.kc .kc-abody{grid-area:body;min-width:0}
.kc .kc-ahead .qp-title{overflow-wrap:anywhere}
.kc .kc-chiplink{position:relative;text-decoration:none;transition:border-color var(--kc-hover),color var(--kc-hover)}
/* The chip is drawn 28px tall like every chip, but it is a link, so its hit area is 44px. */
.kc .kc-chiplink::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;margin-top:-22px}
/* The quick facts wrap on a phone. The dot belongs to the fact after it, so
   each one carries its own and the row is pulled left by one dot's width
   inside a clipping box: a dot that starts a line is cut off, and no line
   ever opens on a stray dot. */
.kc .kc-factswrap{margin-top:16px;overflow:hidden}
.kc .who.kc-facts{margin:0 0 0 -20px}
.kc .who.kc-facts > *::before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px;border-radius:999px;background:var(--kc-muted);vertical-align:middle}
.kc .kc-chiplink:hover{border-color:rgba(255,255,255,0.34);color:var(--kc-text)}
/* On this page: the order the article runs in, drawn as an order. The line
   runs between the markers inside the card and stops at the last one. */
.kc .kc-toc{position:sticky;top:24px;padding:24px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .kc-toc ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.kc .kc-toc li{position:relative}
.kc .kc-toc li::after{content:"";position:absolute;left:9px;top:0;bottom:0;width:2px;background:var(--kc-red-edge)}
.kc .kc-toc li:first-child::after{top:50%}
.kc .kc-toc li:last-child::after{bottom:50%}
.kc .kc-toc li:only-child::after{display:none}
.kc .kc-toc li::before{content:"";position:absolute;left:4px;top:50%;z-index:1;width:12px;height:12px;margin-top:-6px;border-radius:999px;background:var(--kc-red);box-shadow:0 0 0 4px var(--kc-card)}
.kc .kc-toc a{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 32px;font-size:14px;line-height:1.4;color:var(--kc-prose);text-decoration:none}
.kc .kc-toc a:hover{color:var(--kc-text);text-decoration:underline;text-underline-offset:3px}
/* The article body. Section heads are display type; everything inside is Inter
   at the system's body measure, 16px/1.6 (1.65 is for legal prose only). */
.kc .prose{max-width:72ch;font-size:16px;line-height:1.6;color:var(--kc-prose)}
.kc .prose > :first-child{margin-top:0}
.kc .prose h2{margin:40px 0 16px;font:600 24px/1.15 var(--kc-display);letter-spacing:-0.02em;text-transform:uppercase;color:var(--kc-heading);scroll-margin-top:24px}
.kc .prose h3:not(.a-tl-h){margin:24px 0 8px;font:600 17px/1.4 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-heading);scroll-margin-top:24px}
.kc .prose p{margin:12px 0 0}
.kc .prose ul,.kc .prose ol{margin:12px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:8px;line-height:1.55}
.kc .prose li::marker{color:var(--kc-muted)}
.kc .prose strong{font-weight:600;color:var(--kc-text)}
.kc .prose a{color:var(--kc-text);text-decoration:underline;text-underline-offset:3px}
.kc .prose code{padding:0 4px;border:1px solid var(--kc-hairline);border-radius:4px;background:var(--kc-raised);font:500 14px/1.5 var(--kc-mono);color:var(--kc-text)}
.kc .prose hr{height:1px;margin:32px 0;border:0;background:var(--kc-hairline)}
.kc .prose blockquote{margin:16px 0 0;padding:16px;border:1px solid var(--kc-red-edge);border-radius:8px;background:var(--kc-red-tint);color:var(--kc-text);font-size:15px;line-height:1.55}
.kc .prose blockquote p:first-child{margin-top:0}
.kc .prose blockquote strong{color:#ffb3b3}
.kc .a-tablewrap{margin:24px 0 0;overflow-x:auto;border:1px solid var(--kc-hairline);border-radius:12px;background:var(--kc-card)}
.kc .a-codewrap{margin:16px 0 0;overflow-x:auto;border:1px solid var(--kc-hairline);border-radius:12px;background:var(--kc-card)}
.kc .a-pre{margin:0;padding:14px 16px;font:500 13.5px/1.55 var(--kc-mono);color:var(--kc-text);white-space:pre;tab-size:4}
.kc .prose .a-pre code,.kc .ans-body .a-pre code{padding:0;border:0;border-radius:0;background:none;font:inherit;color:inherit;white-space:inherit}
.kc .a-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.kc .a-table th{padding:12px 16px;border-bottom:1px solid var(--kc-hairline);text-align:left;white-space:nowrap;font:700 11px/1.4 var(--kc-body);letter-spacing:0.02em;text-transform:uppercase;color:var(--kc-muted)}
.kc .a-table td{padding:12px 16px;border-bottom:1px solid var(--kc-line-inner);color:var(--kc-text);line-height:1.5;font-variant-numeric:tabular-nums}
.kc .a-table tr:last-child td{border-bottom:0}
.kc .a-table .a-c{text-align:center}
.kc .a-table .a-r{text-align:right}
/* Steps: a numbered timeline, the number in a red disc and a line down to the
   next. Oswald 600, the only display weight the design system uses. */
.kc .a-tl{display:flex;flex-direction:column;margin-top:16px}
.kc .a-tl-item{position:relative;padding:0 0 32px 48px}
.kc .a-tl-item:last-child{padding-bottom:0}
.kc .a-tl-item::before{content:"";position:absolute;left:15px;top:40px;bottom:4px;width:2px;background:var(--kc-hairline)}
.kc .a-tl-item:last-child::before{display:none}
.kc .a-tl-num{position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;background:var(--kc-red-button);color:#ffffff;font:600 16px/1 var(--kc-display)}
.kc .prose .a-tl-h{margin:4px 0 8px;font:600 18px/1.35 var(--kc-body);letter-spacing:0;text-transform:none;color:var(--kc-heading);scroll-margin-top:24px}
.kc .a-tl-c{display:flex;flex-direction:column;gap:12px}
.kc .prose .a-tl-c > p,.kc .prose .a-tl-c > ul,.kc .prose .a-tl-c > ol{margin:0}
.kc .kc-sources{display:flex;flex-direction:column;gap:8px;margin-top:40px}
.kc .kc-sources .vp-h2{margin-bottom:8px}
.kc .kc-abody > .helpful{margin-top:40px;padding-top:24px;border-top-color:var(--kc-hairline)}
.kc .kc-related{margin-top:64px}
/* Members asked about this: member questions under the article, between
   "Did this help?" and "Still stuck?" (api/article-page.js). */
.kc .kc-asked{margin-top:40px}
.kc .kc-asked .qlist{margin-top:0}
/* The answer form under the shop's answers on a question page, for a seat that
   may answer: the owner, support, or a partner's seat (lib/community-render.js
   answerFormHtml). A card like the reply form's. The fields, the tabs, the
   check and the field errors are the system's own (.field, .tabpill, .check,
   .ferr); only the card and the spacing between them are new here. */
.kc .cq-aform{display:grid;gap:16px;margin-top:24px;padding:20px;background:var(--kc-card);border:1px solid var(--kc-border);border-radius:16px}
.kc .cq-aform .vp-h2{margin:0}
.kc .cq-afields{display:grid;gap:16px;min-width:0}
.kc .cq-aform .tabpill svg{width:16px;height:16px}
.kc .cq-aform .msg{margin-top:0}
.kc .cq-aform #qa-err:empty{display:none}
/* The line beside Post answer wraps in its own space, so the button stays on
   its row until a phone has no room for both. */
.kc .cq-aform .vr-foot .vr-hint{flex:1 1 240px;min-width:0}

@media (max-width:1099px){
  .kc .kc-agrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rail" "body";row-gap:24px}
  .kc .kc-toc{position:static}
}
@media (max-width:767px){
  .kc .kc-chat-t{font-size:20px}
  .kc .thread{padding-top:16px}
  .kc .kc-toc{padding:20px}
  .kc .prose h2{font-size:22px}
  .kc .hv-why,.kc .teach-form{padding:16px}
  .kc .cq-aform{padding:16px}
  .kc .toolbar .btn-2{flex:1 1 auto}
  .kc .kc-legal{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.kc .think .now i{animation:none}}