/* scikit-learn Playground: additions to tfplay/tp.css (shared with the TensorFlow Playground) and db/play.css. */
.sk-runtime{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:3px 11px}
.sk-runtime.ok{color:var(--ok-ink)}
.sk-runtime.ok .sk-spin{display:none}
.sk-runtime.err{color:var(--err-ink);background:var(--err-bg);border-color:transparent}
.sk-runtime.err .sk-spin{display:none}
.sk-spin{display:inline-block;width:11px;height:11px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:sk-spin .8s linear infinite;vertical-align:-1px}
@keyframes sk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sk-spin{animation-duration:2.5s}}
.sk-rtbar{margin:-2px 0 10px}
.sk-board-wrap{overflow:auto;margin-top:12px}
.tp .sk-board{width:100%;border-collapse:collapse;font-size:13.5px}
.tp .sk-board th,.tp .sk-board td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tp .sk-board thead th{font-size:12px;color:var(--muted);font-weight:600}
.tp .sk-board tbody th{font-weight:600;color:var(--ink);min-width:200px}
.sk-board tbody th small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px;max-width:340px}
.sk-board td b{font:600 15px var(--f-mono);color:var(--ink)}
.tp .sk-board tr.sk-best th,.tp .sk-board tr.sk-best td{background:var(--accent-soft)}
.tp .sk-board tr.sk-sel th:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.sk-board tr.sk-baseline th,.sk-board tr.sk-baseline td{color:var(--muted)}
.sk-board tr.sk-baseline td b{color:var(--muted)}
.tp .sk-board td.sk-barcell{position:relative;min-width:120px}
.sk-bar{position:absolute;left:8px;top:50%;height:22px;transform:translateY(-50%);max-width:calc(100% - 16px);background:color-mix(in srgb,var(--accent) 22%,transparent);border-radius:4px;z-index:0}
.sk-barcell b{position:relative;z-index:1;padding-left:6px}
.sk-badge{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 10.5px/1.6 var(--f-body);padding:0 7px;border-radius:99px;vertical-align:1px}
.sk-link{appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.sk-link:hover{color:var(--accent)}
.sk-mtabs{border-bottom:0;margin:0}
.sk-detail-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px}
.sk-h3{font:600 14px/1.3 var(--f-body);color:var(--ink);margin:4px 0 8px}
.sk-detail-grid>div>.sk-h3:not(:first-child){margin-top:18px}
.sk-settings{display:grid;gap:8px;margin-bottom:10px}
.sk-settings .tp-lbl{justify-content:space-between}
.sk-settings select{width:140px}
.sk-rules{border-top:1px solid var(--line);border-radius:8px;max-height:340px;font-size:11.5px}
.tp-results.sk-two{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
#sk-imp .tp-prob{grid-template-columns:minmax(70px,38%) 1fr 48px}
@media (max-width:900px){
  .sk-detail-grid,.tp-results.sk-two{grid-template-columns:1fr}
  .tp-results.sk-two>.tp-card:last-child{grid-column:auto}
}
@media (max-width:720px){
  .tp .sk-board tbody th{min-width:150px}
  .sk-board tbody th small{display:none}
  .about table{display:block;overflow-x:auto}
}
.sk-intro{max-width:900px;margin:0 0 16px;color:var(--ink-2);font-size:15px}
.sk-intro p{margin:0 0 8px}
.sk-intro b{color:var(--ink);font-weight:600}
.sk-examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px!important}
.sk-examples span{font-size:13px;color:var(--muted)}