.kc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--kc-2);
min-height: 48px; padding: 0 var(--kc-6);
border: 1px solid var(--kc-accent); border-radius: var(--kc-r-md);
background: var(--kc-accent); color: var(--kc-on-accent);
font-size: 15px; font-weight: 700; line-height: 1.4;
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--kc-fast) var(--kc-ease-out),
border-color var(--kc-fast) var(--kc-ease-out),
transform var(--kc-fast) var(--kc-ease-out);
}
.kc-btn:hover { background: #0FB0CE; border-color: #0FB0CE; color: var(--kc-on-accent);
text-decoration: none; }
.kc-btn--pro {
border-color: var(--kc-gold-edge);
background: linear-gradient(180deg, var(--kc-gold-1), var(--kc-gold-2));
color: var(--kc-gold-ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, var(--kc-shadow-sm);
letter-spacing: .01em;
}
.kc-btn--pro:hover {
background: linear-gradient(180deg, var(--kc-gold-2), var(--kc-gold-1));
border-color: var(--kc-gold-edge); color: var(--kc-gold-ink);
}
.kc-btn--pro svg { flex: none; }
.kc-road { position: relative; display: grid; grid-auto-flow: column;
grid-auto-columns: 1fr; gap: var(--kc-4);
list-style: none; margin: 0; padding: 0; }
.kc-road::before { content: ""; position: absolute; inset-inline: 9px; top: 8px; height: 2px;
background: var(--kc-border); }
.kc-road__stage { position: relative; display: grid; gap: var(--kc-1);
padding-top: var(--kc-6); }
.kc-road__dot { position: absolute; inset-block-start: 0; inset-inline-start: 0;
width: 18px; height: 18px; border-radius: var(--kc-r-pill);
background: var(--kc-bg); border: 2px solid var(--kc-border); }
.kc-road__stage--now>.kc-road__dot { border-color: var(--kc-gold-edge);
background: var(--kc-gold-2); }
.kc-road__stage--now { color: var(--kc-ink); }
@media (max-width: 640px) {
.kc-road { grid-auto-flow: row; gap: var(--kc-5); }
.kc-road::before { inset-inline: auto; inset-block: 9px; left: 8px; width: 2px; height: auto; }
.kc-road__stage { padding: 0 0 0 var(--kc-7); }
.kc-road__dot { inset-block-start: 2px; }
}
.kc-pay { display: grid; justify-items: center; gap: var(--kc-5); text-align: center; }
.kc-pay__code { padding: var(--kc-4); background: #FFFFFF;
border: 1px solid var(--kc-border); border-radius: var(--kc-r-md); }
.kc-pay__code svg { display: block; max-width: 100%; height: auto; }
.kc-pay__side { width: 100%; min-width: 0; }
.kc-pay__side > .kc-clock { justify-content: center; }
.kc-pay__side > p { margin-inline: auto; max-width: 44ch; }
.kc-clock { display: flex; align-items: flex-start; gap: var(--kc-2); }
.kc-clock__unit { display: grid; justify-items: center; gap: 2px; }
.kc-clock__num { display: block; min-width: 56px; padding: var(--kc-2) var(--kc-3);
border: 1px solid var(--kc-gold-edge); border-radius: var(--kc-r-sm);
background: linear-gradient(180deg, var(--kc-gold-1), var(--kc-gold-2));
color: var(--kc-gold-ink); font-size: 24px; font-weight: 700;
font-variant-numeric: tabular-nums; text-align: center; line-height: 1.2; }
.kc-clock__sep { padding-top: var(--kc-2); font-size: 24px; font-weight: 700;
color: var(--kc-ink-3); }
.kc-bank { display: grid; grid-template-columns: auto 1fr auto; gap: var(--kc-2) var(--kc-5);
align-items: center; margin: 0; padding: var(--kc-4) var(--kc-5);
border: 1px solid var(--kc-border); border-radius: var(--kc-r-md);
background: var(--kc-bg-muted); }
.kc-bank dd { margin: 0; }
.kc-bank__value { display: flex; align-items: center; gap: var(--kc-3); flex-wrap: wrap;
justify-content: flex-end; text-align: right; overflow-wrap: anywhere; }
.kc-bank__act { justify-self: end; }
@media (max-width: 560px) {
.kc-bank { grid-template-columns: 1fr auto; gap: 0 var(--kc-3); }
.kc-bank dt { grid-column: 1 / -1; margin-top: var(--kc-3); }
.kc-bank dt:first-child { margin-top: 0; }
.kc-bank__value { justify-content: flex-start; text-align: left; }
}
.kc-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--kc-4); }
.kc-voice { margin: 0; padding: var(--kc-5); border: 1px solid var(--kc-border);
border-radius: var(--kc-r-md); background: var(--kc-bg); }
.kc-voice blockquote { margin: 0; }
.kc-voice figcaption { margin-top: var(--kc-3); }
.kc-voice__who { display: flex; align-items: center; gap: var(--kc-3); }
.kc-receipt { margin: 0; }
.kc-receipt__row { display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: space-between; gap: var(--kc-4);
padding-block: var(--kc-3); }
.kc-receipt__row + .kc-receipt__row { border-top: 1px solid var(--kc-border-soft); }
.kc-receipt dt { flex: none; font-size: 14px; color: var(--kc-ink-2); }
.kc-receipt dd { margin: 0; min-width: 0; font-weight: 600; text-align: right;
overflow-wrap: anywhere; }
.kc-plate__list { text-align: left; justify-items: start; }
.kc-btn:active { transform: scale(.98); }
.kc-btn[disabled], .kc-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.kc-btn--ghost { background: transparent; border-color: var(--kc-border-strong);
color: var(--kc-ink-2); }
.kc-btn--ghost:hover { background: var(--kc-bg-muted); border-color: var(--kc-border-strong);
color: var(--kc-ink); }
.kc-btn--danger { background: transparent; color: var(--kc-danger);
border-color: var(--kc-danger); }
.kc-btn--danger:hover { background: var(--kc-danger-bg); border-color: var(--kc-danger);
color: var(--kc-danger); }
.kc-select--sm { max-width: 190px; font-size: 13px; }
.kc-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--kc-4);
padding: var(--kc-4) var(--kc-5); border: 1px solid var(--kc-border);
border-radius: var(--kc-r-md); background: var(--kc-bg); }
.kc-filters__ask { display: flex; flex-wrap: wrap; align-items: end; gap: var(--kc-3); }
.kc-filters__find { flex: 1 1 220px; min-width: 200px; }
.kc-filters__export { margin-inline-start: auto; }
@media (max-width: 640px) {
.kc-filters, .kc-filters__ask { display: grid; gap: var(--kc-3); }
.kc-filters__export { margin-inline-start: 0; }
.kc-filters select.kc-select { max-width: none; width: 100%; }
}
.kc-switch {
display: inline-flex; align-items: center; gap: var(--kc-2);
min-height: 44px; padding: var(--kc-1) var(--kc-2);
border: 0; background: transparent; cursor: pointer;
font-size: 13px; font-weight: 700; color: var(--kc-ink-2);
border-radius: var(--kc-r-sm);
}
.kc-switch:hover { background: var(--kc-bg-muted); color: var(--kc-ink); }
.kc-switch__track {
display: block; position: relative; flex: none;
width: 34px; height: 20px; border-radius: var(--kc-r-pill);
background: var(--kc-border-mid);
transition: background var(--kc-fast) var(--kc-ease-out);
}
.kc-switch__dot {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: var(--kc-bg);
box-shadow: 0 1px 2px rgba(8, 20, 26, .35);
transition: transform var(--kc-fast) var(--kc-ease-out);
}
.kc-switch--on { color: var(--kc-accent-ink); }
.kc-switch--on:hover { background: var(--kc-bg-muted); color: var(--kc-accent-ink); }
.kc-switch--on > .kc-switch__track { background: var(--kc-accent); }
.kc-switch--on > .kc-switch__track > .kc-switch__dot { transform: translateX(14px); }
.kc-switch__word { white-space: nowrap; }
.kc-btn--quiet { background: transparent; border-color: transparent; color: var(--kc-accent-ink); }
.kc-btn--quiet:hover { background: var(--kc-accent-soft); border-color: transparent;
color: var(--kc-accent-ink-hover); }
.kc-btn--sm { min-height: 44px; padding: 0 var(--kc-4); font-size: 13px; border-radius: var(--kc-r-sm); }
.kc-btn svg.kc-ico { width: 18px; height: 18px; flex: none; }
.kc-btn--sm svg.kc-ico { width: 15px; height: 15px; }
.kc-iconbtn svg.kc-ico { width: 20px; height: 20px; }
.kc-btn--lg { min-height: 56px; padding: 0 var(--kc-9); font-size: 17px; }
.kc-btn--cta { background: var(--kc-cta); border-color: var(--kc-cta); color: var(--kc-on-cta); }
.kc-btn--cta:hover { background: color-mix(in srgb, var(--kc-cta) 88%, black);
border-color: color-mix(in srgb, var(--kc-cta) 88%, black);
color: var(--kc-on-cta); }
.kc-btn--wide { width: 100%; }
@media (min-width: 720px) {
.kc-btn--wide { display: flex; max-width: 440px; margin-inline: auto; }
}
.kc-iconbtn {
display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
border: 0; background: transparent; color: var(--kc-ink-2);
border-radius: var(--kc-r-sm); cursor: pointer;
transition: background var(--kc-fast) var(--kc-ease-out), color var(--kc-fast);
}
.kc-iconbtn:hover { background: var(--kc-bg-muted); color: var(--kc-ink); }
.kc-iconbtn--box {
border: 1px solid var(--kc-border); background: var(--kc-bg);
}
.kc-iconbtn--box:hover { background: var(--kc-bg-muted); color: var(--kc-ink); }
.kc-iconbtn--danger { color: var(--kc-danger); }
.kc-iconbtn--danger:hover { background: var(--kc-danger-bg); color: var(--kc-danger); }
.kc-field { display: grid; gap: var(--kc-2); align-content: start; }
.kc-preview { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
gap: var(--kc-3); padding: var(--kc-2) var(--kc-5);
background: var(--kc-accent-ink); color: var(--kc-bg); }
.kc-preview__what { font-size: 14px; font-weight: 700; }
.kc-preview button.kc-btn { border-color: var(--kc-bg); color: var(--kc-bg); }
.kc-copyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--kc-3);
align-items: center; }
.kc-copyrow__link { min-width: 0; overflow-wrap: anywhere; }
.kc-iconbtn.is-said { border-color: var(--kc-accent); color: var(--kc-accent-ink); }
.kc-namerow { display: grid; gap: var(--kc-4); }
@media (min-width: 560px) { .kc-namerow { grid-template-columns: 1fr 1fr; } }
input.kc-input[aria-invalid="true"], textarea.kc-input[aria-invalid="true"] {
border-color: var(--kc-danger); }
.kc-label { font-size: 13px; font-weight: 700; color: var(--kc-ink-2); }
.kc-input, .kc-select, .kc-textarea {
width: 100%; min-height: 48px; padding: var(--kc-3) var(--kc-4);
border: 1px solid var(--kc-border-strong); border-radius: var(--kc-r-sm);
background: var(--kc-bg); color: var(--kc-ink); line-height: 1.5;
transition: border-color var(--kc-fast), box-shadow var(--kc-fast);
}
.kc-input:not([type="file"]), .kc-select { height: 48px; }
.kc-textarea { min-height: 140px; height: auto; resize: vertical; line-height: 1.7; }
.kc-input::placeholder, .kc-textarea::placeholder { color: var(--kc-ink-3); }
.kc-input[readonly], .kc-textarea[readonly] {
background: var(--kc-bg-muted); color: var(--kc-ink-2);
border-color: var(--kc-border); cursor: not-allowed;
}
.kc-input[readonly]:focus, .kc-textarea[readonly]:focus { border-color: var(--kc-border); }
.kc-input:focus, .kc-select:focus, .kc-textarea:focus { border-color: var(--kc-accent-ink); }
.kc-pw { position: relative; display: block; }
.kc-pw > .kc-input {
padding-right: 76px;
}
.kc-pw > .kc-pw__eye {
position: absolute; top: 0; right: 0; width: 68px; height: 100%;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: none; cursor: pointer;
font-weight: 700; color: var(--kc-accent-ink);
border-radius: var(--kc-r-sm);
}
.kc-pw > .kc-pw__eye:hover { color: var(--kc-accent-ink-hover); }
.kc-pw > .kc-pw__eye:focus-visible {
outline: 2px solid var(--kc-accent-ink); outline-offset: -2px;
}
.kc-pwbar { display: flex; align-items: center; gap: var(--kc-3); }
.kc-pwbar[hidden] { display: none; }
.kc-pwbar__track { display: flex; gap: 4px; flex: 1; max-width: 180px; }
.kc-pwbar__seg { flex: 1; height: 6px; border-radius: var(--kc-r-pill);
background: var(--kc-border-soft); }
.kc-pwbar__word { margin: 0; font-weight: 700; }
.kc-pwbar[data-level="1"] > .kc-pwbar__track > .kc-pwbar__seg[data-on="1"] { background: var(--kc-danger); }
.kc-pwbar[data-level="2"] > .kc-pwbar__track > .kc-pwbar__seg[data-on="1"] { background: var(--kc-warning); }
.kc-pwbar[data-level="3"] > .kc-pwbar__track > .kc-pwbar__seg[data-on="1"] { background: var(--kc-success); }
.kc-pwbar[data-level="1"] > .kc-pwbar__word { color: var(--kc-danger); }
.kc-pwbar[data-level="2"] > .kc-pwbar__word { color: var(--kc-warning); }
.kc-pwbar[data-level="3"] > .kc-pwbar__word { color: var(--kc-success); }
.kc-hint { font-size: 13px; color: var(--kc-ink-3); }
.kc-error { font-size: 13px; color: var(--kc-danger); font-weight: 700; }
.kc-card {
background: var(--kc-bg); border: 1px solid var(--kc-border);
border-radius: var(--kc-r-lg); box-shadow: var(--kc-shadow-sm);
}
div.kc-card--accent { border-bottom: 3px solid var(--kc-accent); }
.kc-card__body { padding: var(--kc-6); }
@media (max-width: 640px) { .kc-card__body { padding: var(--kc-5); } }
.kc-card__art { display: block; width: 100%; height: auto; border-radius: var(--kc-r-md);
margin-bottom: var(--kc-4); }
.kc-card__head { display: flex; align-items: center; justify-content: space-between;
gap: var(--kc-4);
padding: var(--kc-5) var(--kc-6);
border-bottom: 1px solid var(--kc-border); }
@media (max-width: 640px) { .kc-card__head { padding: var(--kc-4) var(--kc-5); } }
.kc-pill {
display: inline-flex; align-items: center; gap: var(--kc-2);
padding: var(--kc-1) var(--kc-3); border-radius: var(--kc-r-pill);
background: var(--kc-bg-muted); color: var(--kc-ink-2);
font-size: 13px; font-weight: 700; white-space: nowrap;
}
.kc-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: none; }
.kc-pill--plain::before { display: none; }
.kc-pill--pro     { background: var(--kc-pro-bg);     color: var(--kc-pro);
box-shadow: inset 0 0 0 1px var(--kc-pro-line); }
.kc-pill--ok      { background: var(--kc-success-bg); color: var(--kc-success); }
.kc-pill--wait    { background: var(--kc-warning-bg); color: var(--kc-warning); }
.kc-pill--danger  { background: var(--kc-danger-bg);  color: var(--kc-danger); }
.kc-pill--accent  { background: var(--kc-accent-soft); color: var(--kc-accent-ink); }
.kc-bar { display: block; height: 6px; border-radius: var(--kc-r-pill);
background: var(--kc-bg-muted); overflow: hidden; }
.kc-bar__fill { display: block; height: 100%; border-radius: var(--kc-r-pill); background: var(--kc-accent);
transition: width 600ms linear; }
.kc-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kc-4); }
.kc-barlist__row { display: grid; align-items: baseline; gap: var(--kc-2);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kc-barlist__name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kc-barlist__num { font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.kc-barlist__track { grid-column: 1 / -1; }
.kc-ring { --kc-ring-pct: 0; width: 20px; height: 20px; border-radius: 50%; flex: none;
background: conic-gradient(var(--kc-accent) calc(var(--kc-ring-pct) * 1%),
var(--kc-bg-muted) 0);
display: grid; place-items: center; }
.kc-ring::after { content: ""; width: 12px; height: 12px; border-radius: 50%;
background: var(--kc-surface); }
.kc-ring--done { background: var(--kc-accent); }
.kc-ring--done::after { display: none; }
.kc-ring--done svg.kc-ico { width: 14px; height: 14px; stroke-width: 3; color: var(--kc-on-accent); }
.kc-watch { max-width: 520px; }
.kc-watch__bar { position: relative; display: block; height: 6px; border-radius: var(--kc-r-pill);
background: var(--kc-bg-muted); }
.kc-watch__fill { display: block; height: 100%; max-width: 100%; border-radius: var(--kc-r-pill);
background: var(--kc-accent); transition: width 600ms linear; }
.kc-watch__mark { position: absolute; top: -3px; left: 50%; width: 2px; height: 12px;
border-radius: 1px; background: var(--kc-ink-3); }
.kc-watch__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--kc-2);
margin-top: var(--kc-2); }
.kc-watch__done { display: none; align-items: center; gap: var(--kc-1); color: var(--kc-accent-ink);
font-weight: 600; }
.kc-watch__done svg.kc-ico { width: 16px; height: 16px; stroke-width: 3; }
.kc-watch--done > .kc-watch__line > .kc-watch__done { display: inline-flex; }
.kc-watch--done > .kc-watch__line > .kc-watch__todo { display: none; }
.kc-momentum { position: relative; height: 4px; background: var(--kc-border-mid); border-radius: 0; }
.kc-momentum__fill { height: 100%; background: var(--kc-accent); transition: width 600ms linear; }
.kc-momentum__tick { position: absolute; top: 0; width: 3px; height: 100%;
background: var(--kc-pro); border-radius: 0; }
.kc-caesura {
display: grid; gap: var(--kc-2); padding: var(--kc-3) var(--kc-4);
min-height: 72px; align-content: center;
scroll-margin-top: 72px;
}
.kc-caesura__line {
display: flex; align-items: center; gap: var(--kc-2); flex-wrap: wrap;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--kc-pro); line-height: 1.35;
}
.kc-caesura__line::before, .kc-caesura__line::after {
content: ""; height: 1px; flex: 1 0 40px;
background: linear-gradient(90deg, transparent, var(--kc-accent), transparent);
}
.kc-caesura__note { display: flex; align-items: center; justify-content: space-between;
gap: var(--kc-3); font-size: 13px; color: var(--kc-ink-3); }
.kc-chapter { border-bottom: 1px solid var(--kc-border); }
.kc-chapter__head {
display: flex; align-items: center; gap: var(--kc-3);
min-height: 56px; padding: var(--kc-2) var(--kc-4);
background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
color: var(--kc-ink); font-weight: 700; font-size: 15px;
}
.kc-chapter__head:hover { background: var(--kc-surface-2); }
.kc-chapter__meta { font-size: 13px; font-weight: 400; color: var(--kc-ink-3); }
.kc-lessons { list-style: none; margin: 0; padding: 0 0 var(--kc-2); }
.kc-lesson {
display: flex; align-items: center; gap: var(--kc-3);
min-height: 52px; padding: var(--kc-2) var(--kc-4);
color: var(--kc-ink-2); text-decoration: none;
border-left: 2px solid transparent;
transition: background var(--kc-fast) var(--kc-ease-out);
}
.kc-lesson:hover { background: var(--kc-surface-2); color: var(--kc-ink); text-decoration: none; }
.kc-lesson[aria-current="true"] {
background: var(--kc-surface-2); color: var(--kc-ink);
border-left-color: var(--kc-accent); font-weight: 700;
}
.kc-lesson__num   { width: 26px; flex: none; font-size: 13px; color: var(--kc-ink-3);
font-variant-numeric: tabular-nums; }
.kc-lesson__title { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; }
.kc-lesson__dur   { flex: none; font-size: 13px; color: var(--kc-ink-3);
font-variant-numeric: tabular-nums; }
.kc-lesson--locked { color: var(--kc-ink-3); }
.kc-lesson--locked span.kc-lesson__title { font-weight: 400; }
.kc-lesson--locked[aria-current="true"] span.kc-lesson__title { font-weight: 700; }
.kc-lesson--locked[aria-current="true"] { color: var(--kc-ink); }
.kc-key { flex: none; width: 16px; height: 16px; color: var(--kc-pro); }
.kc-sidenav__list {
display: flex; flex-wrap: wrap; gap: var(--kc-2);
list-style: none; margin: 0; padding: 0;
}
@media (min-width: 1024px) {
.kc-sidenav--rail > .kc-sidenav__stick > .kc-sidenav__list {
display: grid; gap: var(--kc-1); align-content: start;
}
}