@font-face {
font-family: "Roboto Mono";
font-style: normal;
font-weight: 100 700;
font-display: swap;
src: url("/files/b81cd55177300649be8f95b3b747d721/roboto-mono-normal.woff2")
format("woff2-variations");
}
@font-face {
font-family: "Roboto Mono";
font-style: italic;
font-weight: 100 700;
font-display: swap;
src: url("/files/ae82dafb6340b538592b30dc18a367f5/roboto-mono-italic.woff2")
format("woff2-variations");
}
:root {
color-scheme: dark;
--cl-black: #000000;
--cl-carbon: #050805;
--cl-ink: #080d0a;
--cl-surface: #0d1511;
--cl-surface-2: #111c16;
--cl-green: #35ff95;
--cl-magenta: #ff3595;
--cl-orange: #ff9535;
--cl-white: #ffffff;
--cl-text: #ffffff;
--cl-muted: #c2ccc6;
--cl-rule: rgb(255 255 255 / 0.17);
--cl-danger: var(--cl-magenta);
--cl-warning: var(--cl-orange);
--cl-radius: 8px;
--cl-radius-sm: 4px;
--cl-shadow: 0 18px 44px rgb(0 0 0 / 0.68),
0 0 0 1px rgb(255 255 255 / 0.04),
0 0 20px rgb(255 255 255 / 0.04);
--cl-font-sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
--cl-font-mono: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
}
html {
background: var(--cl-black) !important;
scroll-behavior: smooth;
}
body {
background-color: var(--cl-black) !important;
background-image: radial-gradient(
circle at 8% 0%,
rgb(53 255 149 / 0.085),
transparent 30rem
),
radial-gradient(
circle at 100% 22%,
rgb(255 53 149 / 0.045),
transparent 28rem
),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cpath d='M36 0H72L90 31L72 62H36L18 31ZM0 0L18 31L0 62M108 0L90 31L108 62' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E") !important;
background-attachment: scroll !important;
background-size:
auto,
auto,
108px 62px !important;
color: var(--cl-text) !important;
font-family: var(--cl-font-sans) !important;
min-height: 100vh;
}
body::before {
background: repeating-linear-gradient(
to bottom,
rgb(53 255 149 / 0.035) 0,
rgb(53 255 149 / 0.035) 1px,
transparent 1px,
transparent 4px
);
content: "";
inset: 0;
pointer-events: none;
position: fixed;
z-index: 2147483646;
}
main,
.container,
.container-fluid {
position: relative;
}
main {
min-height: 62vh;
}
body.cl-utilities-ready {
padding-bottom: 4.75rem;
}
::selection {
background: var(--cl-green);
color: var(--cl-black);
}
input,
textarea {
caret-color: var(--cl-green);
}
.navbar-brand,
.jumbotron h1,
.cl-home__title,
.cl-resources-header h1 {
text-shadow: 0 0 18px rgb(53 255 149 / 0.16);
}
:focus-visible {
outline: 3px solid var(--cl-green) !important;
outline-offset: 3px;
}
a,
.btn-link {
color: var(--cl-magenta);
text-decoration-color: rgb(255 53 149 / 0.5);
text-underline-offset: 0.18em;
}
a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
color: var(--cl-green);
text-decoration-color: var(--cl-green);
}
h1,
h2,
h3,
h4,
h5,
h6,
label,
legend {
color: var(--cl-white);
}
h1,
h2,
h3 {
font-weight: 700;
letter-spacing: -0.025em;
}
hr {
border-color: rgb(83 96 105 / 0.72);
}
.text-muted,
small,
.small {
color: var(--cl-muted) !important;
}
code,
kbd,
samp,
pre,
.badge,
.challenge-value,
.challenge-category {
font-family: var(--cl-font-mono) !important;
}
code {
background: rgb(53 255 149 / 0.08);
border-radius: 3px;
color: var(--cl-green);
padding: 0.12em 0.3em;
}
pre {
background: var(--cl-carbon);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-green);
border-radius: var(--cl-radius-sm);
color: var(--cl-text);
padding: 1rem;
}
pre code {
background: transparent;
padding: 0;
}
blockquote {
background: rgb(255 53 149 / 0.06);
border-left: 3px solid var(--cl-magenta);
color: var(--cl-text);
margin: 1.5rem 0;
padding: 1rem 1.15rem;
}
.jumbotron {
background: radial-gradient(
circle at 10% 16%,
rgb(255 53 149 / 0.08),
transparent 26rem
),
linear-gradient(108deg, rgb(0 0 0 / 0.995), rgb(8 13 10 / 0.97)) !important;
border-bottom: 1px solid rgb(53 255 149 / 0.26);
color: var(--cl-white);
overflow: hidden;
position: relative;
}
.jumbotron::before {
color: rgb(53 255 149 / 0.095);
content: "CORELIGHT // EDUCATION";
font: 700 clamp(1.4rem, 4.5vw, 4.6rem) / 1 var(--cl-font-mono);
letter-spacing: 0.08em;
pointer-events: none;
position: absolute;
right: 3vw;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
}
.jumbotron::after {
background: linear-gradient(
90deg,
var(--cl-green),
var(--cl-magenta),
var(--cl-white),
transparent 78%
);
bottom: 0;
content: "";
height: 3px;
left: 0;
position: absolute;
width: min(74%, 960px);
}
.jumbotron h1 {
font-size: clamp(2rem, 5vw, 4.25rem);
line-height: 1.02;
position: relative;
z-index: 1;
}
body.cl-route-challenges .jumbotron,
body.cl-route-scoreboard .jumbotron {
background: transparent !important;
border-bottom: 1px solid rgb(83 96 105 / 0.55);
margin-bottom: 1.5rem;
padding: 1.25rem 1rem;
}
body.cl-route-challenges .jumbotron::before,
body.cl-route-scoreboard .jumbotron::before {
display: none;
}
body.cl-route-challenges .jumbotron::after,
body.cl-route-scoreboard .jumbotron::after {
height: 1px;
width: min(24%, 240px);
}
body.cl-route-challenges .jumbotron h1,
body.cl-route-scoreboard .jumbotron h1 {
font: 700 clamp(1.15rem, 3vw, 1.65rem) / 1.2 var(--cl-font-mono);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.card,
.list-group-item,
.well,
.panel,
.popover {
background: linear-gradient(
145deg,
rgb(13 21 17 / 0.96),
rgb(5 8 5 / 0.985)
) !important;
border: 1px solid var(--cl-rule) !important;
border-radius: var(--cl-radius) !important;
box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
color: var(--cl-text) !important;
}
.card-header,
.card-footer,
.list-group-item + .list-group-item {
border-color: rgb(83 96 105 / 0.72) !important;
}
.cl-resources-header__eyebrow {
font-family: var(--cl-font-mono);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cl-resources-header {
border-bottom: 1px solid var(--cl-rule);
margin: 2rem 0 2.5rem;
padding: 0 0 1rem;
position: relative;
}
.cl-resources-header::after {
background: var(--cl-magenta);
bottom: -1px;
box-shadow: 0 0 14px rgb(255 53 149 / 0.32);
content: "";
height: 3px;
left: 0;
position: absolute;
width: 96px;
}
.cl-resources-header__eyebrow {
color: var(--cl-magenta);
display: block;
font-size: 0.63rem;
margin-bottom: 0.45rem;
}
.cl-resources-header h1 {
font: 700 clamp(2rem, 5vw, 3.6rem) / 1.05 var(--cl-font-mono);
letter-spacing: -0.03em;
margin: 0;
}
.cl-module-token {
font: inherit;
}
.cl-module-token--day {
color: var(--cl-green);
}
.cl-module-token--separator {
color: var(--cl-white);
font-weight: 400;
}
.cl-module-token--arrow {
font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2",
sans-serif;
}
.cl-module-token--module {
color: var(--cl-green);
}
.cl-module-token--title {
color: var(--cl-green);
}
body.cl-route-challenges .challenge-button .cl-module-token--separator {
color: var(--cl-white) !important;
}
body.cl-route-challenges .challenge-button .cl-module-token--day,
body.cl-route-challenges .challenge-button .cl-module-token--module,
body.cl-route-challenges .challenge-button .cl-module-token--title {
color: var(--cl-green) !important;
}
body.cl-route-challenges .challenge-button,
body.cl-route-challenges button.challenge-button,
body.cl-route-challenges a.challenge-button {
background-color: var(--cl-ink) !important;
border-color: var(--cl-rule) !important;
color: var(--cl-white) !important;
transition:
background-color 150ms ease,
border-color 150ms ease,
box-shadow 150ms ease;
}
body.cl-route-challenges .challenge-button:hover,
body.cl-route-challenges .challenge-button:focus {
background-color: rgb(255 53 149 / 0.08) !important;
border-color: var(--cl-magenta) !important;
box-shadow: 0 0 0 1px rgb(255 53 149 / 0.22);
color: var(--cl-white) !important;
}
body.cl-route-challenges .challenge-button.solved-challenge,
body.cl-route-challenges .solved-challenge,
body.cl-route-challenges .challenge-button[data-solved="true"] {
background-color: rgb(53 255 149 / 0.08) !important;
border-color: var(--cl-green) !important;
}
body.cl-route-challenges .challenge-button .badge,
body.cl-route-challenges .badge-primary,
body.cl-route-challenges .badge-info {
border-color: var(--cl-magenta) !important;
color: var(--cl-magenta) !important;
}
.modal-content {
background: var(--cl-ink) !important;
border: 1px solid var(--cl-rule) !important;
border-radius: var(--cl-radius) !important;
box-shadow: 0 28px 90px rgb(0 0 0 / 0.78);
color: var(--cl-text);
}
.modal-header,
.modal-footer {
border-color: #3c454d !important;
}
.modal-title,
.challenge-name {
color: var(--cl-white) !important;
}
.close {
color: var(--cl-white) !important;
opacity: 0.86;
text-shadow: none;
}
.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"] {
background: var(--cl-carbon) !important;
border: 1px solid var(--cl-rule) !important;
border-radius: var(--cl-radius-sm) !important;
color: var(--cl-white) !important;
min-height: 42px;
}
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus {
border-color: var(--cl-green) !important;
box-shadow: 0 0 0 0.2rem rgb(53 255 149 / 0.17) !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
color: #929c97 !important;
}
.btn {
border-radius: var(--cl-radius-sm);
font-weight: 700;
min-height: 42px;
}
.btn-primary,
.btn-success {
background: var(--cl-green) !important;
border-color: var(--cl-green) !important;
color: var(--cl-black) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
background: var(--cl-green) !important;
border-color: var(--cl-green) !important;
box-shadow: 0 0 22px rgb(53 255 149 / 0.32);
color: var(--cl-black) !important;
filter: brightness(1.08);
}
.btn-info,
.btn-secondary,
.btn-outline-secondary {
background: transparent !important;
border-color: var(--cl-magenta) !important;
color: var(--cl-magenta) !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
background: rgb(255 53 149 / 0.14) !important;
color: var(--cl-green) !important;
}
.btn-danger {
background: var(--cl-danger) !important;
border-color: var(--cl-danger) !important;
color: var(--cl-black) !important;
}
.table {
color: var(--cl-text) !important;
}
.table th,
.table td,
.table thead th {
border-color: #3c454d !important;
}
.table thead th {
color: var(--cl-green);
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.table-striped tbody tr:nth-of-type(odd),
.table-hover tbody tr:hover {
background: rgb(39 48 56 / 0.7) !important;
color: var(--cl-white) !important;
}
.cl-scoreboard-perspectives {
margin-bottom: 1.5rem;
}
.cl-scoreboard-perspectives__header {
align-items: flex-end;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
justify-content: space-between;
margin-bottom: 1rem;
}
.cl-scoreboard-perspectives__eyebrow {
color: var(--cl-magenta);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.cl-scoreboard-perspectives__title {
color: var(--cl-white);
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
margin: 0.25rem 0 0;
}
.cl-scoreboard-perspectives__copy {
color: var(--cl-muted);
font-size: 0.78rem;
margin: 0;
max-width: 58ch;
}
.cl-scoreboard-tabs {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius);
display: flex;
gap: 0.45rem;
overflow-x: auto;
padding: 0.45rem;
scrollbar-color: var(--cl-green) var(--cl-carbon);
scrollbar-width: thin;
}
.cl-scoreboard-tab {
background: transparent;
border: 1px solid transparent;
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
flex: 0 0 auto;
font: 700 0.72rem/1.2 var(--cl-font-mono);
letter-spacing: 0.045em;
padding: 0.7rem 0.85rem;
text-transform: uppercase;
}
.cl-scoreboard-tab:hover,
.cl-scoreboard-tab:focus-visible {
background: rgb(53 255 149 / 0.08);
border-color: var(--cl-green);
color: var(--cl-white);
}
.cl-scoreboard-tab[aria-selected="true"] {
background: var(--cl-magenta);
border-color: var(--cl-magenta);
color: var(--cl-black);
}
.cl-scoreboard-panel {
padding-top: 1.25rem;
}
.cl-scoreboard-panel[hidden] {
display: none !important;
}
.cl-scoreboard-panel__intro {
color: var(--cl-muted);
font-size: 0.76rem;
margin: 0 0 1rem;
}
.cl-scoreboard-bars {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius);
display: grid;
gap: 0;
overflow: hidden;
}
.cl-scoreboard-bar {
align-items: center;
border-bottom: 1px solid rgb(49 86 63 / 0.7);
display: grid;
gap: 0.75rem 1rem;
grid-template-columns: minmax(11rem, 0.8fr) minmax(12rem, 1.4fr);
padding: 0.8rem 0.95rem;
}
.cl-scoreboard-bar:last-child {
border-bottom: 0;
}
.cl-scoreboard-bar__meta {
min-width: 0;
}
.cl-scoreboard-bar__rank,
.cl-scoreboard-bar__status {
color: var(--cl-magenta);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.07em;
margin-right: 0.55rem;
text-transform: uppercase;
}
.cl-scoreboard-bar__status {
color: var(--cl-green);
display: block;
margin: 0.3rem 0 0;
}
.cl-scoreboard-bar__name {
color: var(--cl-white) !important;
font-size: 0.78rem;
font-weight: 700;
overflow-wrap: anywhere;
text-decoration: none;
}
.cl-scoreboard-bar__metric {
align-items: center;
display: grid;
gap: 0.65rem;
grid-template-columns: minmax(0, 1fr) 4.2rem;
}
.cl-scoreboard-bar__track {
background: var(--cl-surface-2);
border: 1px solid rgb(49 86 63 / 0.8);
border-radius: 999px;
height: 0.72rem;
overflow: hidden;
}
.cl-scoreboard-bar__fill {
background: linear-gradient(90deg, var(--cl-green), var(--cl-magenta));
border-radius: inherit;
height: 100%;
min-width: 0;
}
.cl-scoreboard-bar__value {
color: var(--cl-white);
font-size: 0.72rem;
font-weight: 700;
text-align: right;
}
.cl-scoreboard-view-empty {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-magenta);
border-radius: var(--cl-radius);
color: var(--cl-muted);
margin: 0;
padding: 1.1rem;
}
body.cl-route-scoreboard #score-graph {
background: linear-gradient(
145deg,
rgb(13 21 17 / 0.96),
rgb(5 8 5 / 0.985)
);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius);
box-shadow: var(--cl-shadow);
margin-bottom: 2rem;
min-height: 420px;
overflow: hidden;
padding: 0.75rem;
}
body.cl-route-scoreboard #scoreboard {
margin-bottom: 3rem;
}
body.cl-route-scoreboard #scoreboard .table,
body.cl-route-scoreboard #cl-scoreboard-fallback .table {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-collapse: separate;
border-radius: var(--cl-radius);
border-spacing: 0;
box-shadow: 0 14px 34px rgb(0 0 0 / 0.28);
overflow: hidden;
}
body.cl-route-scoreboard #scoreboard .table tbody tr,
body.cl-route-scoreboard #cl-scoreboard-fallback .table tbody tr {
background: transparent !important;
}
body.cl-route-scoreboard #scoreboard .table tbody tr:nth-child(odd),
body.cl-route-scoreboard
#cl-scoreboard-fallback
.table
tbody
tr:nth-child(odd) {
background: rgb(53 255 149 / 0.035) !important;
}
body.cl-route-scoreboard #scoreboard .table tbody tr:hover,
body.cl-route-scoreboard #cl-scoreboard-fallback .table tbody tr:hover {
background: rgb(255 53 149 / 0.085) !important;
}
body.cl-route-scoreboard #scoreboard .table a,
body.cl-route-scoreboard #cl-scoreboard-fallback .table a {
color: var(--cl-white);
font-weight: 700;
}
.cl-scoreboard-empty,
.cl-scoreboard-error {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-green);
border-radius: var(--cl-radius);
color: var(--cl-white) !important;
margin: 1.5rem 0 3rem;
padding: 1.25rem;
text-align: left !important;
}
.cl-scoreboard-error {
border-left-color: var(--cl-magenta);
}
.cl-scoreboard-empty__title {
color: var(--cl-white);
display: block;
font-size: 1rem;
font-weight: 700;
}
.cl-scoreboard-empty__copy {
color: var(--cl-muted);
display: block;
font-size: 0.83rem;
margin-top: 0.45rem;
}
#cl-scoreboard-fallback {
margin-top: 1.25rem;
width: 100%;
}
#cl-scoreboard-fallback .cl-scoreboard-fallback__label {
color: var(--cl-green);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
text-transform: uppercase;
}
.cl-home {
margin: clamp(2.5rem, 8vw, 6rem) auto 5rem;
max-width: 72rem;
}
.cl-home__hero {
border-bottom: 1px solid var(--cl-rule);
padding-bottom: clamp(2rem, 5vw, 3.75rem);
position: relative;
}
.cl-home__hero::after {
background: linear-gradient(90deg, var(--cl-green), var(--cl-magenta));
bottom: -2px;
content: "";
height: 3px;
left: 0;
position: absolute;
width: min(12rem, 38vw);
}
.cl-home__eyebrow {
color: var(--cl-magenta);
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
margin-bottom: 0.8rem;
text-transform: uppercase;
}
.cl-home__eyebrow::before {
color: var(--cl-green);
content: "[ SYS/EDU ] ";
}
.cl-home__title {
color: var(--cl-white);
font: 700 clamp(2.2rem, 6vw, 5rem) / 1.02 var(--cl-font-mono);
letter-spacing: -0.045em;
margin: 0;
max-width: 15ch;
text-transform: none;
}
.cl-home__intro {
color: var(--cl-muted);
font-size: clamp(0.9rem, 1.8vw, 1.05rem);
line-height: 1.75;
margin: 1.35rem 0 0;
max-width: 66ch;
}
.cl-home__steps {
display: grid;
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none;
margin: 2rem 0 0;
padding: 0;
}
.cl-home__step {
background: linear-gradient(145deg, rgb(13 21 17 / 0.96), rgb(5 8 5 / 0.985));
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius);
min-height: 11rem;
padding: 1.1rem;
position: relative;
transition: border-color 150ms ease, background-color 150ms ease;
}
.cl-home__step[aria-current="step"] {
border-color: var(--cl-green);
box-shadow: inset 3px 0 var(--cl-green);
}
.cl-home__step[aria-current="step"]::after {
color: var(--cl-green);
content: "NEXT";
font: 700 0.56rem/1 var(--cl-font-mono);
letter-spacing: 0.1em;
position: absolute;
right: 1rem;
top: 1.1rem;
}
.cl-home__step[data-cl-state="complete"] .cl-home__step-number::after {
color: var(--cl-white);
content: "  /  COMPLETE";
}
.cl-home__step-number {
color: var(--cl-green);
display: block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
margin-bottom: 1.15rem;
text-transform: uppercase;
}
.cl-home__step-title {
color: var(--cl-white);
font-size: 1rem;
margin: 0;
}
.cl-home__step-copy {
color: var(--cl-muted);
font-size: 0.78rem;
line-height: 1.65;
margin: 0.55rem 0 1rem;
}
.cl-home__step-link {
color: var(--cl-magenta);
font-size: 0.76rem;
font-weight: 700;
}
.cl-resources-intro {
color: var(--cl-muted);
margin-bottom: 1.75rem;
max-width: 76ch;
}
.cl-resource-gallery {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 2.75rem;
}
.cl-resource-feature {
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius);
color: var(--cl-white);
display: block;
overflow: hidden;
text-decoration: none;
}
.cl-resource-feature:hover,
.cl-resource-feature:focus-visible {
border-color: var(--cl-magenta);
color: var(--cl-white);
}
.cl-resource-feature img {
aspect-ratio: 16 / 9;
display: block;
object-fit: cover;
width: 100%;
}
.cl-resource-feature__body {
display: block;
padding: 1rem;
}
.cl-resource-feature__title,
.cl-resource-link__title {
color: var(--cl-white);
display: block;
font-weight: 700;
}
.cl-resource-feature__copy,
.cl-resource-link__copy {
color: var(--cl-muted);
display: block;
font-size: 0.82rem;
margin-top: 0.35rem;
}
.cl-resource-links {
display: grid;
gap: 0.85rem;
list-style: none;
margin: 1rem 0 3rem;
padding: 0;
}
.cl-resource-link {
align-items: center;
background: rgb(5 8 5 / 0.94);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-magenta);
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
display: flex;
justify-content: space-between;
padding: 0.95rem 1rem;
text-decoration: none;
}
.cl-resource-link:hover,
.cl-resource-link:focus-visible {
background: rgb(255 53 149 / 0.075);
border-color: var(--cl-magenta);
color: var(--cl-white);
}
.cl-resource-link__type {
color: var(--cl-green);
flex: 0 0 auto;
font-size: 0.69rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-left: 1rem;
text-transform: uppercase;
}
.cl-utility-launchers {
align-items: center;
bottom: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
max-width: calc(100vw - 2rem);
position: fixed;
right: 1rem;
z-index: 2147483644;
}
.cl-tools-launcher,
.cl-notepad-launcher {
align-items: center;
background: rgb(20 29 25 / 0.98);
border: 1px solid #4b5751;
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
display: inline-flex;
font: 700 0.78rem/1 var(--cl-font-mono);
gap: 0.45rem;
padding: 0.65rem 0.75rem;
white-space: nowrap;
box-shadow:
inset 1px 1px rgb(255 255 255 / 0.14),
inset -1px -1px rgb(0 0 0 / 0.92),
0 0 12px rgb(53 255 149 / 0.04);
}
.cl-utility-launchers .cl-tools-launcher,
.cl-utility-launchers .cl-notepad-launcher {
bottom: auto !important;
left: auto !important;
margin: 0 !important;
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
}
.cl-tools-launcher:hover,
.cl-tools-launcher:focus-visible,
.cl-notepad-launcher:hover,
.cl-notepad-launcher:focus-visible,
[data-cl-tools-enhanced="true"][aria-expanded="true"],
[data-cl-notepad-launcher="true"][aria-expanded="true"] {
background: rgb(53 255 149 / 0.1) !important;
border-color: var(--cl-green) !important;
color: var(--cl-white) !important;
}
.cl-notepad-panel {
background: rgb(5 8 5 / 0.99);
border: 1px solid var(--cl-rule);
border-top: 3px solid var(--cl-magenta);
border-radius: var(--cl-radius);
bottom: 4.25rem;
box-shadow: var(--cl-shadow);
color: var(--cl-white);
display: flex;
flex-direction: column;
height: min(42rem, calc(100vh - 6.25rem));
max-width: calc(100vw - 2rem);
position: fixed;
right: 1rem;
width: 48rem;
z-index: 2147483645;
}
.cl-notepad-panel[hidden] {
display: none !important;
}
.cl-notepad-panel__header {
align-items: center;
border-bottom: 1px solid var(--cl-rule);
display: flex;
gap: 0.65rem;
min-height: 3rem;
padding: 0.65rem 0.75rem 0.65rem 0.9rem;
}
.cl-notepad-panel__icon {
color: var(--cl-green);
}
.cl-notepad-panel__title {
color: var(--cl-white);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.06em;
margin: 0;
text-transform: uppercase;
}
.cl-notepad-panel__status {
color: var(--cl-muted);
font-size: 0.65rem;
margin-left: auto;
}
.cl-notepad-panel__close,
.cl-notepad-panel__export,
.cl-notepad-panel__clear,
.cl-notepad-panel__format,
.cl-notepad-panel__mode,
.cl-notepad-panel__tab,
.cl-notepad-case__defaults,
.cl-notepad-timeline__action,
.cl-notepad-timeline__cancel,
.cl-notepad-timeline__filter-clear,
.cl-notepad-timeline__now,
.cl-notepad-timeline__submit {
align-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--cl-radius-sm);
color: var(--cl-muted);
display: inline-flex;
font: 700 0.68rem/1 var(--cl-font-mono);
justify-content: center;
}
.cl-notepad-panel__close {
height: 2rem;
width: 2rem;
}
.cl-notepad-panel__export {
border-color: var(--cl-rule);
color: var(--cl-white);
gap: 0.38rem;
min-height: 2rem;
padding: 0.42rem 0.58rem;
}
.cl-notepad-panel__close:hover,
.cl-notepad-panel__close:focus-visible,
.cl-notepad-panel__export:hover,
.cl-notepad-panel__export:focus-visible,
.cl-notepad-panel__clear:hover,
.cl-notepad-panel__clear:focus-visible,
.cl-notepad-panel__format:hover,
.cl-notepad-panel__format:focus-visible,
.cl-notepad-case__defaults:hover,
.cl-notepad-case__defaults:focus-visible,
.cl-notepad-timeline__action:hover,
.cl-notepad-timeline__action:focus-visible,
.cl-notepad-timeline__cancel:hover,
.cl-notepad-timeline__cancel:focus-visible,
.cl-notepad-timeline__filter-clear:hover,
.cl-notepad-timeline__filter-clear:focus-visible,
.cl-notepad-timeline__now:hover,
.cl-notepad-timeline__now:focus-visible {
background: rgb(255 53 149 / 0.09);
border-color: var(--cl-magenta);
color: var(--cl-white);
}
.cl-notepad-panel__tabs {
align-items: stretch;
border-bottom: 1px solid var(--cl-rule);
display: flex;
min-height: 2.6rem;
padding: 0 0.75rem;
}
.cl-notepad-panel__tab {
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
color: var(--cl-muted);
gap: 0.42rem;
padding: 0.7rem 0.8rem 0.58rem;
}
.cl-notepad-panel__tab:hover,
.cl-notepad-panel__tab:focus-visible {
color: var(--cl-white);
}
.cl-notepad-panel__tab[aria-selected="true"] {
border-bottom-color: var(--cl-green);
color: var(--cl-green);
}
.cl-notepad-panel__body {
display: flex;
flex: 1 1 auto;
min-height: 0;
padding: 0.8rem;
}
.cl-notepad-panel__pane {
display: flex;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.cl-notepad-panel__pane[hidden] {
display: none !important;
}
.cl-notepad-panel__notes {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.cl-notepad-panel__notes-toolbar {
align-items: center;
display: flex;
justify-content: space-between;
min-height: 2.35rem;
padding-bottom: 0.55rem;
}
.cl-notepad-panel__notes-label {
color: var(--cl-muted);
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cl-notepad-panel__formatting {
align-items: center;
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
display: flex;
flex-wrap: wrap;
gap: 0.18rem;
margin-bottom: 0.48rem;
padding: 0.25rem;
}
.cl-notepad-panel__formatting[hidden] {
display: none !important;
}
.cl-notepad-panel__format {
border-color: transparent;
color: var(--cl-muted);
height: 1.8rem;
width: 1.8rem;
}
.cl-notepad-panel__modes {
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
display: inline-flex;
overflow: hidden;
}
.cl-notepad-panel__mode {
border: 0;
border-radius: 0;
color: var(--cl-muted);
padding: 0.45rem 0.6rem;
}
.cl-notepad-panel__mode + .cl-notepad-panel__mode {
border-left: 1px solid var(--cl-rule);
}
.cl-notepad-panel__mode[aria-pressed="true"] {
background: rgb(53 255 149 / 0.1);
color: var(--cl-green);
}
.cl-notepad-panel__editor,
.cl-notepad-panel__preview {
display: flex;
flex: 1 1 auto;
min-height: 0;
}
.cl-notepad-panel__editor[hidden],
.cl-notepad-panel__preview[hidden] {
display: none !important;
}
.cl-notepad-panel__textarea {
background: rgb(8 14 11 / 0.98);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
flex: 1 1 auto;
font: 400 0.78rem/1.67rem var(--cl-font-mono);
min-height: 0;
padding: 0.65rem 0.75rem;
resize: none;
width: 100%;
}
.cl-notepad-panel__preview {
background: rgb(8 14 11 / 0.98);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
color: var(--cl-text);
display: block;
font: 400 0.78rem/1.55rem var(--cl-font-mono);
overflow: auto;
padding: 0.7rem 0.8rem;
scrollbar-color: var(--cl-green) var(--cl-carbon);
}
.cl-notepad-markdown > :first-child {
margin-top: 0;
}
.cl-notepad-markdown > :last-child {
margin-bottom: 0;
}
.cl-notepad-markdown h1,
.cl-notepad-markdown h2,
.cl-notepad-markdown h3,
.cl-notepad-markdown h4,
.cl-notepad-markdown h5,
.cl-notepad-markdown h6 {
color: var(--cl-white);
font-family: var(--cl-font-mono);
font-weight: 700;
line-height: 1.3;
margin: 1rem 0 0.45rem;
}
.cl-notepad-markdown h1 { font-size: 1.15rem; }
.cl-notepad-markdown h2 { font-size: 1rem; }
.cl-notepad-markdown h3 { font-size: 0.88rem; }
.cl-notepad-markdown p,
.cl-notepad-markdown ul,
.cl-notepad-markdown ol,
.cl-notepad-markdown blockquote,
.cl-notepad-markdown pre,
.cl-notepad-markdown table {
margin: 0 0 0.8rem;
}
.cl-notepad-markdown ul,
.cl-notepad-markdown ol {
padding-left: 1.5rem;
}
.cl-notepad-markdown blockquote {
border-left: 3px solid var(--cl-magenta);
color: var(--cl-muted);
padding-left: 0.8rem;
}
.cl-notepad-markdown code {
background: rgb(53 255 149 / 0.08);
border: 1px solid rgb(53 255 149 / 0.18);
border-radius: 0.2rem;
color: var(--cl-green);
padding: 0.08rem 0.25rem;
}
.cl-notepad-markdown pre {
background: var(--cl-black);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
overflow: auto;
padding: 0.65rem;
}
.cl-notepad-markdown pre code {
background: transparent;
border: 0;
color: var(--cl-text);
padding: 0;
}
.cl-notepad-markdown a {
color: var(--cl-green);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.cl-notepad-markdown table {
border-collapse: collapse;
width: 100%;
}
.cl-notepad-markdown th,
.cl-notepad-markdown td {
border: 1px solid var(--cl-rule);
padding: 0.4rem 0.5rem;
text-align: left;
}
.cl-notepad-markdown th {
color: var(--cl-green);
}
.cl-notepad-markdown__empty,
.cl-notepad-timeline__empty {
color: var(--cl-muted);
margin: auto;
text-align: center;
}
.cl-notepad-case {
display: grid;
flex: 1 1 auto;
gap: 0.8rem;
grid-template-columns: minmax(14rem, 0.78fr) minmax(0, 1.22fr);
min-height: 0;
width: 100%;
}
.cl-notepad-case__lens,
.cl-notepad-case__frame {
background: rgb(8 14 11 / 0.98);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
min-height: 0;
overflow-y: auto;
padding: 0.8rem;
scrollbar-color: var(--cl-green) var(--cl-carbon);
}
.cl-notepad-case__lens {
align-content: start;
display: grid;
gap: 0.65rem;
}
.cl-notepad-case__eyebrow {
color: var(--cl-magenta);
font-size: 0.58rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0;
text-transform: uppercase;
}
.cl-notepad-case__title {
color: var(--cl-white);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
}
.cl-notepad-case__question {
border-left: 2px solid var(--cl-green);
color: var(--cl-text);
font-size: 0.72rem;
line-height: 1.5;
margin: 0;
padding: 0.55rem 0.65rem;
}
.cl-notepad-case__meta {
color: var(--cl-muted);
font-size: 0.58rem;
line-height: 1.45;
margin: 0;
}
.cl-notepad-case__defaults {
border-color: var(--cl-rule);
color: var(--cl-white);
justify-self: start;
min-height: 1.95rem;
padding: 0.42rem 0.55rem;
}
.cl-notepad-case__defaults:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.cl-notepad-case__frame {
align-content: start;
display: grid;
gap: 0.65rem;
}
.cl-notepad-case__section-title {
color: var(--cl-white);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
margin: 0;
text-transform: uppercase;
}
.cl-notepad-case__grid {
display: grid;
gap: 0.55rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cl-notepad-case__field {
display: grid;
gap: 0.28rem;
margin: 0;
min-width: 0;
}
.cl-notepad-case__field--wide {
grid-column: 1 / -1;
}
.cl-notepad-case__label {
color: var(--cl-muted);
font-size: 0.61rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cl-notepad-case__input,
.cl-notepad-case__select,
.cl-notepad-case__textarea {
background: var(--cl-black);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
font: 400 0.7rem/1.35rem var(--cl-font-mono);
min-width: 0;
padding: 0.45rem 0.5rem;
width: 100%;
}
.cl-notepad-case__textarea {
min-height: 4.5rem;
resize: vertical;
}
.cl-notepad-case__input:focus,
.cl-notepad-case__select:focus,
.cl-notepad-case__textarea:focus {
border-color: var(--cl-green);
box-shadow: 0 0 0 0.12rem rgb(53 255 149 / 0.12);
outline: 0;
}
.cl-notepad-case__custom[hidden] {
display: none !important;
}
.cl-notepad-timeline {
display: grid;
flex: 1 1 auto;
gap: 0.8rem;
grid-template-columns: minmax(14rem, 0.78fr) minmax(0, 1.22fr);
min-height: 0;
width: 100%;
}
.cl-notepad-timeline__form,
.cl-notepad-timeline__stream {
background: rgb(8 14 11 / 0.98);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
min-height: 0;
}
.cl-notepad-timeline__form {
align-content: start;
display: grid;
gap: 0.42rem;
overflow-y: auto;
padding: 0.7rem;
}
.cl-notepad-timeline__time-row {
display: grid;
gap: 0.45rem;
grid-template-columns: 1fr;
}
.cl-notepad-timeline__input-row {
align-items: stretch;
display: flex;
gap: 0.35rem;
min-width: 0;
}
.cl-notepad-timeline__input-row .cl-notepad-timeline__input {
flex: 1 1 auto;
}
.cl-notepad-timeline__now {
border-color: var(--cl-rule);
color: var(--cl-white);
flex: 0 0 auto;
gap: 0.32rem;
padding: 0.38rem 0.48rem;
}
.cl-notepad-timeline__form-title,
.cl-notepad-timeline__stream-title {
color: var(--cl-white);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
margin: 0;
text-transform: uppercase;
}
.cl-notepad-timeline__field {
display: grid;
gap: 0.28rem;
margin: 0;
min-width: 0;
}
.cl-notepad-timeline__field-label {
color: var(--cl-muted);
font-size: 0.61rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cl-notepad-timeline__input,
.cl-notepad-timeline__context {
background: var(--cl-black);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
font: 400 0.7rem/1.35rem var(--cl-font-mono);
min-width: 0;
padding: 0.38rem 0.48rem;
width: 100%;
}
.cl-notepad-timeline__context {
min-height: 3.8rem;
resize: vertical;
}
.cl-notepad-timeline__input:focus,
.cl-notepad-timeline__context:focus {
border-color: var(--cl-green);
box-shadow: 0 0 0 0.12rem rgb(53 255 149 / 0.12);
outline: 0;
}
.cl-notepad-timeline__hint {
color: var(--cl-muted);
font-size: 0.57rem;
line-height: 1.35;
}
.cl-notepad-timeline__error {
color: var(--cl-magenta);
font-size: 0.62rem;
line-height: 1.35;
margin: 0;
}
.cl-notepad-timeline__form-actions {
display: flex;
gap: 0.45rem;
}
.cl-notepad-timeline__submit {
background: var(--cl-green);
border-color: var(--cl-green);
color: var(--cl-black);
flex: 1 1 auto;
padding: 0.58rem 0.65rem;
}
.cl-notepad-timeline__submit:hover,
.cl-notepad-timeline__submit:focus-visible {
background: var(--cl-white);
border-color: var(--cl-white);
color: var(--cl-black);
}
.cl-notepad-timeline__cancel {
border-color: var(--cl-rule);
padding: 0.58rem 0.65rem;
}
.cl-notepad-timeline__stream {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cl-notepad-timeline__stream-header {
align-items: center;
border-bottom: 1px solid var(--cl-rule);
display: grid;
gap: 0.5rem;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 2.7rem;
padding: 0.55rem 0.7rem;
}
.cl-notepad-timeline__timezone {
color: var(--cl-muted);
font-size: 0.57rem;
}
.cl-notepad-timeline__filter {
align-items: center;
display: flex;
grid-column: 1 / -1;
min-width: 0;
position: relative;
}
.cl-notepad-timeline__filter-icon {
color: var(--cl-muted);
font-size: 0.62rem;
left: 0.52rem;
pointer-events: none;
position: absolute;
}
.cl-notepad-timeline__filter-input {
background: var(--cl-black);
border: 1px solid var(--cl-rule);
border-radius: var(--cl-radius-sm);
color: var(--cl-white);
font: 400 0.66rem/1.25rem var(--cl-font-mono);
min-width: 0;
padding: 0.38rem 2rem 0.38rem 1.55rem;
width: 100%;
}
.cl-notepad-timeline__filter-input:focus {
border-color: var(--cl-green);
box-shadow: 0 0 0 0.12rem rgb(53 255 149 / 0.12);
outline: 0;
}
.cl-notepad-timeline__filter-clear {
color: var(--cl-muted);
height: 1.55rem;
position: absolute;
right: 0.18rem;
width: 1.55rem;
}
.cl-notepad-timeline__filter-clear[hidden] {
display: none !important;
}
.cl-notepad-timeline__list {
display: grid;
gap: 0.6rem;
list-style: none;
margin: 0;
overflow-y: auto;
padding: 0.7rem;
scrollbar-color: var(--cl-green) var(--cl-carbon);
}
.cl-notepad-timeline__item {
background: var(--cl-black);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-green);
border-radius: var(--cl-radius-sm);
padding: 0.65rem 0.7rem;
}
.cl-notepad-timeline__item-header {
align-items: flex-start;
display: flex;
gap: 0.55rem;
}
.cl-notepad-timeline__clock {
color: var(--cl-green);
margin-top: 0.15rem;
}
.cl-notepad-timeline__item-copy {
min-width: 0;
}
.cl-notepad-timeline__item-time {
color: var(--cl-magenta);
display: block;
font-size: 0.59rem;
font-weight: 700;
letter-spacing: 0.03em;
margin-bottom: 0.18rem;
}
.cl-notepad-timeline__item-title {
color: var(--cl-white);
font-size: 0.76rem;
font-weight: 700;
line-height: 1.35;
margin: 0;
}
.cl-notepad-timeline__item-actions {
display: flex;
gap: 0.25rem;
margin-left: auto;
}
.cl-notepad-timeline__action {
height: 1.8rem;
width: 1.8rem;
}
.cl-notepad-timeline__entities {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin: 0.55rem 0 0;
}
.cl-notepad-timeline__entity {
background: rgb(53 255 149 / 0.08);
border: 1px solid rgb(53 255 149 / 0.28);
border-radius: 999px;
color: var(--cl-green);
font-size: 0.57rem;
font-weight: 700;
font-family: var(--cl-font-mono);
padding: 0.18rem 0.42rem;
}
button.cl-notepad-timeline__entity {
cursor: pointer;
}
button.cl-notepad-timeline__entity:hover,
button.cl-notepad-timeline__entity:focus-visible {
background: var(--cl-green);
color: var(--cl-black);
outline: 0;
}
.cl-notepad-timeline__content {
border-top: 1px solid var(--cl-rule);
font-size: 0.67rem;
line-height: 1.35rem;
margin-top: 0.58rem;
padding-top: 0.55rem;
}
.cl-notepad-panel__textarea::placeholder {
color: #829087;
opacity: 1;
}
.cl-notepad-panel__textarea:focus {
border-color: var(--cl-green);
box-shadow: 0 0 0 0.14rem rgb(53 255 149 / 0.14);
outline: 0;
}
.cl-notepad-panel__footer {
align-items: center;
border-top: 1px solid var(--cl-rule);
display: flex;
justify-content: space-between;
min-height: 2.75rem;
padding: 0.55rem 0.8rem;
}
.cl-notepad-panel__count {
color: var(--cl-muted);
font-size: 0.65rem;
}
.cl-notepad-panel__clear {
padding: 0.5rem 0.65rem;
}
.cl-notepad-panel__clear:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.cl-notepad-panel__export:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.cl-tools-menu {
background: rgb(5 8 5 / 0.99);
border: 1px solid var(--cl-rule);
border-top: 3px solid var(--cl-green);
border-radius: var(--cl-radius);
box-shadow: var(--cl-shadow);
min-width: min(19rem, calc(100vw - 2rem));
max-height: min(80vh, 46rem);
overscroll-behavior: contain;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
z-index: 2147483645;
}
.cl-tools-menu {
scrollbar-color: var(--cl-green) var(--cl-carbon);
scrollbar-width: thin;
}
.cl-tools-menu::-webkit-scrollbar {
width: 0.5rem;
}
.cl-tools-menu::-webkit-scrollbar-track {
background: var(--cl-carbon);
}
.cl-tools-menu::-webkit-scrollbar-thumb {
background: var(--cl-green);
border: 2px solid var(--cl-carbon);
border-radius: 999px;
}
.cl-tools-menu[hidden] {
display: none !important;
}
.cl-tools-menu__heading {
border-bottom: 1px solid var(--cl-rule);
color: var(--cl-muted);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.11em;
margin: 0;
padding: 0.75rem 0.9rem;
text-transform: uppercase;
}
.cl-tools-menu__heading::before,
.cl-notepad-panel__title::before {
background: var(--cl-green);
box-shadow: 0 0 8px rgb(53 255 149 / 0.6);
content: "";
display: inline-block;
height: 0.42em;
margin-right: 0.5em;
width: 0.42em;
}
.cl-tools-menu__note {
border-bottom: 1px solid var(--cl-rule);
color: var(--cl-muted);
font-size: 0.68rem;
line-height: 1.5;
margin: 0;
padding: 0.7rem 0.9rem;
}
.cl-tools-menu__group + .cl-tools-menu__group {
border-top: 1px solid var(--cl-rule);
}
.cl-tools-menu__group-label {
color: var(--cl-magenta);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0;
padding: 0.65rem 0.9rem 0.35rem;
text-transform: uppercase;
}
.cl-tools-menu__group-label::before { content: "[ "; }
.cl-tools-menu__group-label::after { content: " ]"; }
.cl-tools-menu__item {
align-items: center;
background: transparent;
border: 0;
border-bottom: 1px solid rgb(49 86 63 / 0.7);
color: var(--cl-white) !important;
display: grid;
font: inherit;
gap: 0 0.7rem;
grid-template-columns: 1.2rem minmax(0, 1fr);
padding: 0.8rem 0.9rem;
text-align: left;
text-decoration: none;
width: 100%;
}
.cl-tools-menu__item:last-child {
border-bottom: 0;
}
.cl-tools-menu__item:hover,
.cl-tools-menu__item:focus-visible {
background: rgb(255 53 149 / 0.09);
color: var(--cl-white) !important;
}
.cl-tools-menu__icon {
color: var(--cl-green);
grid-row: 1 / span 2;
}
.cl-tools-menu__label {
color: var(--cl-white);
font-size: 0.82rem;
font-weight: 700;
}
.cl-tools-menu__copy {
color: var(--cl-muted);
font-size: 0.72rem;
grid-column: 2;
margin-top: 0.18rem;
}
.nav-tabs {
border-bottom-color: var(--cl-rule);
}
.nav-tabs .nav-link {
color: var(--cl-muted);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
background: var(--cl-ink);
border-color: var(--cl-rule) var(--cl-rule) var(--cl-ink);
color: var(--cl-green);
}
.pagination .page-link {
background: var(--cl-ink);
border-color: var(--cl-rule);
color: var(--cl-magenta);
}
.pagination .page-item.active .page-link {
background: var(--cl-green);
border-color: var(--cl-green);
color: var(--cl-black);
}
.alert {
background: var(--cl-ink);
border: 1px solid var(--cl-rule);
color: var(--cl-text);
}
.alert-success {
border-left: 4px solid var(--cl-green);
}
.alert-danger {
border-left: 4px solid var(--cl-danger);
}
.alert-warning {
border-left: 4px solid var(--cl-warning);
}
.progress {
background: var(--cl-surface);
}
.progress-bar {
background: linear-gradient(
90deg,
var(--cl-green),
var(--cl-magenta)
);
color: var(--cl-black);
}
.cl-module-flow {
align-items: center;
background: rgb(4 9 6 / 0.97);
border: 1px solid var(--cl-rule);
border-left: 3px solid var(--cl-green);
display: flex;
gap: 1rem;
justify-content: space-between;
margin: 1rem 0;
padding: 0.7rem 0.85rem;
}
.cl-module-flow[hidden] {
display: none !important;
}
.cl-module-flow__identity {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 0.7rem;
}
.cl-module-flow__number {
color: var(--cl-magenta);
font: 700 0.58rem/1.35 var(--cl-font-mono);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.cl-module-flow__title {
color: var(--cl-white);
font-size: 0.78rem;
}
.cl-module-flow__actions {
display: flex;
flex: 0 0 auto;
gap: 0.45rem;
}
.cl-module-flow__link {
background: transparent;
border: 1px solid var(--cl-rule);
color: var(--cl-white) !important;
font: 700 0.6rem/1 var(--cl-font-mono);
min-height: 2rem;
padding: 0.55rem 0.65rem;
text-decoration: none !important;
text-transform: uppercase;
}
.cl-module-flow__link:hover,
.cl-module-flow__link:focus-visible {
border-color: var(--cl-green);
color: var(--cl-green) !important;
}
.cl-module-flow__link--primary {
border-color: var(--cl-green);
color: var(--cl-green) !important;
}
body.cl-route-workbench::before,
body[class*="cl-route-module-"]::before {
opacity: 0.28;
}
footer,
.footer {
background: var(--cl-black) !important;
border-top: 1px solid rgb(53 255 149 / 0.22);
color: var(--cl-muted) !important;
}
.cl-footer-signature {
align-items: center;
display: flex;
flex-wrap: wrap;
font: 700 0.61rem/1.5 var(--cl-font-mono);
gap: 0.5rem 0.8rem;
justify-content: center;
letter-spacing: 0.1em;
margin: 0 auto 0.8rem;
text-transform: uppercase;
}
.cl-footer-signature__brand {
color: var(--cl-green);
}
.cl-footer-signature__dot {
background: var(--cl-magenta);
box-shadow: 0 0 8px rgb(255 53 149 / 0.45);
border-radius: 50%;
height: 4px;
width: 4px;
}
@media (max-width: 767.98px) {
.navbar-collapse {
background: var(--cl-black);
padding: 0.75rem;
}
.cl-resource-gallery {
grid-template-columns: 1fr;
}
.cl-module-flow {
align-items: stretch;
flex-direction: column;
}
.cl-module-flow__actions,
.cl-module-flow__link {
justify-content: center;
width: 100%;
}
.cl-home {
margin-top: 2rem;
}
.cl-home__steps {
grid-template-columns: 1fr;
}
.cl-home__step {
min-height: 0;
}
.cl-utility-launchers {
bottom: 0.75rem;
left: 0.75rem;
max-width: none;
right: 0.75rem;
}
.cl-resource-link {
align-items: flex-start;
flex-direction: column;
}
.cl-resource-link__type {
margin: 0.75rem 0 0;
}
.cl-scoreboard-perspectives__header {
align-items: flex-start;
flex-direction: column;
}
.cl-scoreboard-bar {
grid-template-columns: 1fr;
}
.cl-notepad-panel {
bottom: 4.25rem;
height: min(42rem, calc(100vh - 5.75rem));
left: 1rem;
right: 1rem;
width: auto;
}
.cl-notepad-panel__status {
display: none;
}
.cl-notepad-timeline {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.cl-notepad-case {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.cl-notepad-case__lens,
.cl-notepad-case__frame {
flex: 0 0 auto;
overflow: visible;
}
.cl-notepad-case__grid {
grid-template-columns: 1fr;
}
.cl-notepad-case__field--wide {
grid-column: auto;
}
.cl-notepad-timeline__form {
flex: 0 0 auto;
overflow: visible;
}
.cl-notepad-timeline__time-row {
grid-template-columns: 1fr;
}
.cl-notepad-timeline__stream {
flex: 0 0 20rem;
}
.jumbotron::before {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
}
}
@media (prefers-contrast: more) {
:root {
--cl-muted: #e4ebe7;
--cl-rule: #6b8978;
}
body::before {
display: none;
}
}
@media print {
html,
body {
background: #ffffff !important;
color: #111111 !important;
}
body::before {
display: none;
}
.cl-utility-launchers,
.cl-tools-menu,
.cl-notepad-panel {
display: none !important;
}
}
:root {
--cl-edge-soft: rgb(255 255 255 / 0.17);
--cl-edge-bright: rgb(255 255 255 / 0.34);
--cl-edge-glow: 0 0 0 1px rgb(255 255 255 / 0.025),
0 0 18px rgb(255 255 255 / 0.055);
}
.navbar,
.navbar.bg-dark,
.navbar-dark,
footer,
.footer {
border-color: var(--cl-edge-soft) !important;
}
.card,
.list-group-item,
.well,
.panel,
.popover,
.cl-home__step,
.cl-scoreboard-stat,
.cl-scoreboard-tabs,
.cl-scoreboard-view-empty,
body.cl-route-scoreboard #score-graph,
body.cl-route-scoreboard #scoreboard .table,
body.cl-route-scoreboard #cl-scoreboard-fallback .table,
.cl-scoreboard-empty,
.cl-scoreboard-error,
.cl-resource-feature,
.cl-resource-link,
.cl-notepad-panel,
.cl-tools-menu,
.cl-notepad-timeline__item,
.cl-module-flow,
.cl-book__cover,
.cl-chapter__masthead,
.cl-book__method li,
.cl-book__card,
.cl-chapter__rail,
.cl-chapter__question,
.cl-chapter__steps li,
.cl-chapter__notice,
.cl-day-template__notice,
.cl-day-template__cover,
.cl-day-template__programs li,
.cl-day-template__module,
.cl-day-template__question,
.cl-day-template__flow li,
.cl-day-template__guardrail,
.cl-reference__head,
.cl-reference__note {
border-color: var(--cl-edge-soft) !important;
box-shadow: var(--cl-edge-glow) !important;
}
.cl-book__cover,
.cl-chapter__masthead,
.cl-chapter__question,
.cl-scoreboard-empty,
.cl-scoreboard-error,
.cl-resource-link,
.cl-notepad-timeline__item,
.cl-module-flow,
.cl-reference__head,
.cl-workbench__policy,
.cl-day-template__notice,
.cl-day-template__cover,
.cl-day-template__question,
.cl-day-template__guardrail {
border-left-color: var(--cl-edge-bright) !important;
border-left-width: 1px !important;
}
.cl-book__card,
.cl-scoreboard-stat,
.cl-notepad-panel,
.cl-tools-menu,
.cl-day-template__module {
border-top-color: var(--cl-edge-bright) !important;
border-top-width: 1px !important;
}
.cl-book__button,
.cl-chapter__button,
.cl-reference__button,
.btn-info,
.btn-secondary,
.btn-outline-secondary,
.cl-module-flow__link,
body.cl-route-challenges .challenge-button,
body.cl-route-challenges button.challenge-button,
body.cl-route-challenges a.challenge-button {
border-color: var(--cl-edge-soft) !important;
}
.cl-resource-feature:hover,
.cl-resource-feature:focus-visible,
.cl-resource-link:hover,
.cl-resource-link:focus-visible,
.cl-book__button:hover,
.cl-book__button:focus-visible,
.cl-chapter__button:hover,
.cl-chapter__button:focus-visible,
.cl-reference__button:hover,
.cl-reference__button:focus-visible,
.cl-tools-launcher:hover,
.cl-tools-launcher:focus-visible,
.cl-notepad-launcher:hover,
.cl-notepad-launcher:focus-visible,
.cl-module-flow__link:hover,
.cl-module-flow__link:focus-visible,
body.cl-route-challenges .challenge-button:hover,
body.cl-route-challenges .challenge-button:focus,
body.cl-route-challenges .challenge-button.solved-challenge,
body.cl-route-challenges .solved-challenge,
body.cl-route-challenges .challenge-button[data-solved="true"] {
border-color: var(--cl-edge-bright) !important;
box-shadow: 0 0 16px rgb(255 255 255 / 0.09) !important;
}
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus,
input:focus,
.cl-notepad-case__input:focus,
.cl-notepad-case__select:focus,
.cl-notepad-case__textarea:focus,
.cl-notepad-timeline__input:focus,
.cl-notepad-timeline__context:focus {
border-color: var(--cl-edge-bright) !important;
box-shadow: 0 0 0 0.12rem rgb(255 255 255 / 0.08) !important;
}
.cl-resources-header::after,
.cl-workbench__hero::after,
.cl-book__cover::after,
.cl-chapter__masthead::after,
.cl-day-template__cover::after {
background: linear-gradient(
90deg,
rgb(255 255 255 / 0.58),
rgb(255 255 255 / 0.16),
transparent
) !important;
box-shadow: 0 0 14px rgb(255 255 255 / 0.1) !important;
height: 1px !important;
}
.cl-cp{align-items:center;background:linear-gradient(90deg,rgb(53 255 149/.055),rgb(0 0 0/.92));border:1px solid var(--cl-edge-soft);border-radius:var(--cl-radius);box-shadow:var(--cl-edge-glow);display:grid;gap:.75rem 1.25rem;grid-template-columns:auto minmax(10rem,1fr) auto;margin:0 0 1.2rem;padding:.85rem 1rem}.cl-cp__eyebrow{color:var(--cl-magenta);display:block;font:700 .59rem/1.2 var(--cl-font-mono);letter-spacing:.08em;text-transform:uppercase}.cl-cp__value{color:var(--cl-white);display:block;font:700 .82rem/1.3 var(--cl-font-mono);margin-top:.22rem}.cl-cp__track,.cl-cm__track{background:rgb(255 255 255/.045);border:1px solid var(--cl-edge-soft);border-radius:999px;height:.42rem;overflow:hidden;width:100%}.cl-cp__fill,.cl-cm__fill{background:var(--cl-green);border-radius:inherit;box-shadow:0 0 10px rgb(53 255 149/.24);height:100%;width:0}.cl-cp__remaining{color:var(--cl-muted);font:700 .62rem/1.2 var(--cl-font-mono);white-space:nowrap}.cl-cm{position:relative}.cl-cm__meta{align-items:center;display:flex!important;gap:.55rem;margin-top:.42rem;pointer-events:none;width:100%}.cl-cm__state{color:var(--cl-muted)!important;font:700 .55rem/1.2 var(--cl-font-mono)!important;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}.cl-cm[data-cl-state="complete"] .cl-cm__state{color:var(--cl-green)!important}.cl-cm__count{color:var(--cl-white)!important;font:700 .57rem/1.2 var(--cl-font-mono)!important;white-space:nowrap}.cl-cm__track{flex:1;height:.34rem;max-width:14rem}.cl-ccm{align-items:center;border-top:1px solid rgb(255 255 255/.08);display:flex!important;gap:.65rem;justify-content:flex-end;margin-top:.55rem;padding-top:.5rem;pointer-events:none;width:100%}.cl-ccm__state,.cl-ccm__solves{color:var(--cl-muted)!important;font:700 .55rem/1.2 var(--cl-font-mono)!important;letter-spacing:.05em;text-transform:uppercase}.cl-ccm__marker{border:1px solid rgb(255 255 255/.5);border-radius:50%;height:.42rem;width:.42rem}.cl-ccm[data-cl-solved="true"] .cl-ccm__marker{background:var(--cl-green);border-color:var(--cl-green);box-shadow:0 0 8px rgb(53 255 149/.35)}.cl-ccm[data-cl-solved="true"] .cl-ccm__state{color:var(--cl-green)!important}@media(max-width:42rem){.cl-cp{grid-template-columns:1fr}.cl-cp__remaining{white-space:normal}.cl-cm__meta{align-items:flex-start;flex-wrap:wrap}.cl-cm__track{flex-basis:100%;max-width:none}}
.cl-skip-link{background:var(--cl-green,#35ff95);color:#000!important;font:700 .72rem/1 var(--cl-font-mono,monospace);left:1rem;padding:.75rem 1rem;position:fixed;top:-5rem;z-index:1100}.cl-skip-link:focus{top:1rem}
.navbar.cl-site-nav{background:rgb(0 0 0/.94)!important;border-bottom:1px solid var(--cl-edge-soft,rgb(255 255 255/.17))!important;box-shadow:0 10px 30px rgb(0 0 0/.34);isolation:isolate;min-height:4.25rem;padding-block:.45rem;z-index:1030}
.cl-site-nav>.container,.cl-site-nav>.container-fluid{align-items:center;gap:1rem;max-width:96rem}
.cl-site-nav__brand{align-items:center;display:flex!important;flex:0 0 auto;gap:.8rem;margin-right:.35rem!important;min-height:2.75rem;padding:.25rem 0!important}
.cl-site-nav__brand img{height:2rem!important;max-width:9rem!important;width:auto!important}
.cl-site-nav__brand-context{border-left:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));color:var(--cl-muted,#aeb9b2);font:700 .6rem/1.25 var(--cl-font-mono,monospace);letter-spacing:.08em;max-width:7rem;padding-left:.8rem;text-transform:uppercase}
.cl-site-nav__collapse{align-items:center;min-width:0}
.cl-site-nav__primary{align-items:center;gap:.1rem;margin:auto!important}
.cl-site-nav__group{position:relative}
.cl-site-nav .cl-site-nav__toggle{align-items:center;appearance:none;background:transparent;border:1px solid transparent;border-radius:.2rem;color:var(--cl-white,#fff)!important;cursor:pointer;display:flex;font:700 .65rem/1.2 var(--cl-font-mono,monospace);gap:.38rem;justify-content:center;letter-spacing:.05em;min-height:2.75rem;padding:.7rem .62rem!important;position:relative;text-transform:uppercase;white-space:nowrap}
.cl-site-nav .cl-site-nav__toggle:hover,.cl-site-nav .cl-site-nav__toggle:focus-visible{background:rgb(255 255 255/.065);border-color:var(--cl-edge-soft,rgb(255 255 255/.22));outline:2px solid var(--cl-green,#35ff95);outline-offset:1px}
.cl-site-nav__group.active>.cl-site-nav__toggle{background:rgb(53 255 149/.075)}
.cl-site-nav__group.active>.cl-site-nav__toggle::after{background:var(--cl-green,#35ff95);bottom:.25rem;box-shadow:0 0 8px rgb(53 255 149/.32);content:"";height:2px;left:.62rem;position:absolute;right:.62rem}
.cl-site-nav__prefix{color:var(--cl-green,#35ff95);font-size:.82rem;line-height:1}
.cl-site-nav__chevron{color:var(--cl-green,#35ff95);font-size:.82rem;line-height:1;transform:translateY(-.08rem);transform-origin:center}
.cl-site-nav__toggle[aria-expanded=true] .cl-site-nav__chevron{transform:rotate(180deg) translateY(.08rem)}
.cl-site-nav__menu{background:rgb(5 8 5/.99);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;box-shadow:0 18px 45px rgb(0 0 0/.62),0 0 18px rgb(255 255 255/.05);left:0;list-style:none;margin:.5rem 0 0;min-width:17rem;padding:.4rem;position:absolute;top:100%;z-index:1050}
.cl-site-nav__group:nth-last-child(-n+2)>.cl-site-nav__menu{left:auto;right:0}
.cl-site-nav__menu[hidden]{display:none!important}
.cl-site-nav__menu-link{border:1px solid transparent;border-radius:.15rem;color:var(--cl-white,#fff)!important;display:grid;gap:.18rem;min-height:2.75rem;padding:.7rem .78rem;text-decoration:none!important}
.cl-site-nav__menu-link:hover,.cl-site-nav__menu-link:focus-visible{background:rgb(255 255 255/.065);border-color:var(--cl-edge-soft,rgb(255 255 255/.22));outline:2px solid var(--cl-green,#35ff95);outline-offset:-2px}
.cl-site-nav__menu-link[aria-current]{border-left:3px solid var(--cl-green,#35ff95);padding-left:.66rem}
.cl-site-nav__menu-link strong{font:700 .68rem/1.25 var(--cl-font-mono,monospace);letter-spacing:.05em;text-transform:uppercase}.cl-site-nav__menu-link span{color:var(--cl-muted,#aeb9b2);font-size:.65rem;line-height:1.4}
.cl-site-nav__utility{align-items:center;border-left:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));gap:.05rem;margin-left:auto!important;padding-left:.65rem}.cl-site-nav__utility .nav-link{border:1px solid transparent;border-radius:.2rem;color:var(--cl-white,#fff)!important;font:700 .6rem/1.2 var(--cl-font-mono,monospace)!important;letter-spacing:.035em!important;min-height:2.75rem;padding:.62rem .4rem!important;text-transform:uppercase}.cl-site-nav__utility .nav-link:hover,.cl-site-nav__utility .nav-link:focus-visible{background:rgb(255 255 255/.065);border-color:var(--cl-edge-soft,rgb(255 255 255/.22));outline:2px solid var(--cl-green,#35ff95);outline-offset:1px}.cl-site-nav .dropdown-menu{background:rgb(5 8 5/.99);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;box-shadow:0 18px 45px rgb(0 0 0/.62);margin-top:.55rem}.cl-site-nav .dropdown-item{color:var(--cl-white,#fff)}.cl-site-nav .dropdown-item:hover,.cl-site-nav .dropdown-item:focus{background:rgb(255 255 255/.065);color:var(--cl-green,#35ff95)}
.cl-site-nav__toggler{align-items:center;border:1px solid var(--cl-edge-soft,rgb(255 255 255/.22))!important;color:var(--cl-white,#fff)!important;display:flex;gap:.55rem;min-height:2.75rem;padding:.55rem .65rem!important}.cl-site-nav__toggle-label{font:700 .62rem/1 var(--cl-font-mono,monospace);letter-spacing:.07em;text-transform:uppercase}
#learning-process,#registration{scroll-margin-top:6rem}
body.cl-challenge-split main>.container{max-width:96rem}body.cl-challenge-split .cl-challenge-board--split{align-items:start;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}body.cl-challenge-split .cl-challenge-board__list-pane{grid-column:1;grid-row:1;min-width:0}body.cl-challenge-split .cl-challenge-board__list-pane[inert]{opacity:.68;pointer-events:none}body.cl-challenge-split .cl-challenge-board--split>.cl-challenge-split__placeholder,body.cl-challenge-split .cl-challenge-board--split>#challenge-window{grid-column:1;grid-row:2;min-width:0}body.cl-challenge-split .cl-challenge-split__placeholder{background:rgb(5 8 5/.72);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.25rem;min-height:12rem;padding:2rem;position:relative}body.cl-challenge-split .cl-challenge-split__placeholder h2{font-family:var(--cl-font-mono,monospace);font-size:1rem;text-transform:uppercase}body.cl-challenge-split #challenge-window.modal{background:transparent;height:auto;inset:auto!important;overflow:visible;padding:0!important;position:relative!important;width:100%;z-index:1}body.cl-challenge-split #challenge-window.modal.fade{transition:none}body.cl-challenge-split #challenge-window .modal-dialog{margin:0;max-width:none;transform:none;width:100%}body.cl-challenge-split #challenge-window .modal-content{border-color:var(--cl-edge-soft,rgb(255 255 255/.17));box-shadow:0 18px 45px rgb(0 0 0/.34)}
@media(min-width:75rem){body.cl-challenge-split .cl-challenge-board--split{grid-template-columns:minmax(0,.9fr) minmax(30rem,1.1fr)}body.cl-challenge-split .cl-challenge-board--split>.cl-challenge-split__placeholder,body.cl-challenge-split .cl-challenge-board--split>#challenge-window{grid-column:2;grid-row:1}body.cl-challenge-split .cl-challenge-split__placeholder{min-height:18rem;position:sticky;top:5.5rem}body.cl-challenge-split #challenge-window.modal{height:calc(100vh - 6.5rem);overflow-y:auto;position:sticky!important;top:5.5rem}body.cl-challenge-split .cl-challenge-board--split .challenges-row>.col-lg-3{flex:0 0 50%;max-width:50%}}
@media(max-width:84.99rem){.cl-site-nav__brand-context{display:none}.cl-site-nav .cl-site-nav__toggle{font-size:.61rem;padding-inline:.48rem!important}.cl-site-nav__utility .nav-link{font-size:.56rem!important;padding-inline:.3rem!important}}
@media(max-width:61.99rem){.navbar.cl-site-nav{padding-block:.55rem}.cl-site-nav>.container,.cl-site-nav>.container-fluid{align-items:center}.cl-site-nav__collapse{align-items:stretch;background:rgb(0 0 0/.985);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;box-shadow:0 22px 55px rgb(0 0 0/.72);margin-top:.65rem;max-height:calc(100vh - 6rem);overflow:auto;padding:.65rem;width:100%}.cl-site-nav__primary{align-items:stretch;margin:0!important;width:100%}.cl-site-nav .cl-site-nav__toggle{font-size:.75rem;justify-content:space-between;padding:.8rem!important;text-align:left;width:100%}.cl-site-nav__group.active>.cl-site-nav__toggle::after{bottom:.35rem;left:.8rem;right:auto;width:2.2rem}.cl-site-nav__menu{box-shadow:none;margin:.2rem 0 .55rem;min-width:0;position:static}.cl-site-nav__group:nth-last-child(-n+2)>.cl-site-nav__menu{left:auto;right:auto}.cl-site-nav__menu-link{padding:.72rem .8rem}.cl-site-nav__utility{align-items:stretch;border-left:0;border-top:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));margin:.5rem 0 0!important;padding:.5rem 0 0!important;width:100%}.cl-site-nav__utility .nav-link{font-size:.68rem!important;padding:.72rem .8rem!important}.cl-site-nav__utility .nav-link i,.cl-site-nav__utility .nav-link svg{font-size:inherit!important}.cl-site-nav__utility .dropdown-menu{position:static!important}}
@media(max-width:30rem){.cl-site-nav__brand img{max-width:8.4rem!important}.cl-site-nav__toggle-label{display:none}}
@media(prefers-reduced-motion:no-preference){.cl-site-nav__toggle,.cl-site-nav__menu-link,.cl-site-nav__chevron{transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}}
@media print{.cl-site-nav,.cl-skip-link{display:none!important}}
@media (min-width: 62rem) and (max-width: 84.99rem) {
.cl-site-nav__brand img { display: none !important; }
.cl-site-nav__brand-context {
border-left: 0;
color: var(--cl-white, #fff);
display: inline-block;
font-size: .72rem;
max-width: none;
padding-left: 0;
white-space: nowrap;
}
}
.cl-site-nav__brand{gap:.55rem!important}
.cl-site-nav__brand-wordmark,.cl-site-nav__brand-service,.cl-site-nav__edition{font-family:var(--cl-font-mono,"Roboto Mono",monospace)}
.cl-site-nav__brand-wordmark{color:#35ff95;font-size:.82rem;font-weight:700;letter-spacing:.015em;line-height:1.2;white-space:nowrap}
.cl-site-nav__brand-service{color:var(--cl-white,#fff);font-size:.6rem;font-weight:700;letter-spacing:.035em;line-height:1.2;white-space:nowrap}
.cl-site-nav__edition{color:var(--cl-white,#fff);flex:0 0 auto;font-size:.62rem;font-weight:700;letter-spacing:.04em;line-height:1.2;margin-left:.4rem;white-space:nowrap}
.cl-site-nav__edition+.cl-site-nav__utility{margin-left:.45rem!important}
@media(max-width:84.99rem){.cl-site-nav__brand-service,.cl-site-nav__edition{display:none}}
@media(max-width:61.99rem){.cl-site-nav__edition{display:none}.cl-site-nav__edition+.cl-site-nav__utility{margin:.5rem 0 0!important}}
.cl-learning-split{align-items:start;display:grid;gap:1rem;grid-template-areas:"toolbar toolbar" "guide challenges";grid-template-columns:minmax(20rem,.92fr) minmax(24rem,1.08fr);margin-bottom:1.5rem;min-width:0}
.cl-learning-split[data-guide-side="right"]{grid-template-areas:"toolbar toolbar" "challenges guide";grid-template-columns:minmax(24rem,1.08fr) minmax(20rem,.92fr)}
.cl-learning-split__toolbar{align-items:center;background:linear-gradient(90deg,rgb(53 255 149/.075),rgb(0 0 0/.94));border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.25rem;display:flex;gap:1rem;grid-area:toolbar;justify-content:space-between;padding:.8rem 1rem}
.cl-learning-split__eyebrow,.cl-learning-split__guide-label{color:var(--cl-green,#35ff95);display:block;font:700 .58rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);letter-spacing:.08em;text-transform:uppercase}
.cl-learning-split__title{color:var(--cl-white,#fff);font:700 .88rem/1.3 var(--cl-font-mono,"Roboto Mono",monospace);margin:.18rem 0 0;text-transform:uppercase}
.cl-learning-split__swap,.cl-learning-split__retry{appearance:none;background:rgb(53 255 149/.08);border:1px solid var(--cl-green,#35ff95);border-radius:.2rem;color:var(--cl-white,#fff);cursor:pointer;flex:0 0 auto;font:700 .62rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);letter-spacing:.04em;min-height:2.5rem;padding:.65rem .8rem;text-transform:uppercase}
.cl-learning-split__swap:hover,.cl-learning-split__retry:hover{background:rgb(53 255 149/.16)}
.cl-learning-split__swap:focus-visible,.cl-learning-split__retry:focus-visible,.cl-learning-split__full-guide:focus-visible{outline:2px solid var(--cl-green,#35ff95);outline-offset:2px}
.cl-learning-split__guide{background:rgb(4 8 5/.92);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.25rem;display:flex;flex-direction:column;grid-area:guide;min-height:24rem;min-width:0;overflow:hidden}
.cl-learning-split__guide-header{align-items:center;background:rgb(255 255 255/.025);border-bottom:1px solid var(--cl-edge-soft,rgb(255 255 255/.14));display:flex;gap:1rem;justify-content:space-between;padding:.8rem 1rem}
.cl-learning-split__guide-header h3{color:var(--cl-white,#fff);font:700 .74rem/1.35 var(--cl-font-mono,"Roboto Mono",monospace);margin:.16rem 0 0}
.cl-learning-split__full-guide{color:var(--cl-green,#35ff95)!important;flex:0 0 auto;font:700 .58rem/1.25 var(--cl-font-mono,"Roboto Mono",monospace);text-decoration:none!important;text-transform:uppercase}
.cl-learning-split__guide-content{min-height:0;overflow:auto;padding:1rem;scrollbar-gutter:stable}
.cl-learning-split__guide-content[aria-busy="true"]{align-items:center;display:flex;justify-content:center}
.cl-learning-split__loading,.cl-learning-split__error{color:var(--cl-muted,#aeb9b2);font:600 .68rem/1.55 var(--cl-font-mono,"Roboto Mono",monospace);margin:0}
.cl-learning-split__error{color:var(--cl-white,#fff);margin-bottom:.8rem}
.cl-learning-split__retry{margin-right:.75rem}
.cl-learning-split__guide-document.cl-chapter{display:block;max-width:none;min-height:0;padding:0}
.cl-learning-split__guide-document .cl-chapter__article{min-width:0}
.cl-learning-split__guide-document .cl-chapter__masthead{margin-top:0}
.cl-learning-split__guide-document .cl-chapter__title{font-size:clamp(1.35rem,2.2vw,2rem)}
.cl-learning-split__guide-document .cl-chapter__section{scroll-margin-top:1rem}
.cl-learning-split>.cl-challenge-board--split{background:rgb(4 8 5/.72);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.25rem;grid-area:challenges;min-width:0;padding:.85rem}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);overflow:auto}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>.cl-challenge-board__list-pane{grid-column:1;grid-row:1}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>.cl-challenge-split__placeholder,
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>#challenge-window{grid-column:1;grid-row:2}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>.cl-challenge-split__placeholder{min-height:12rem;position:relative;top:auto}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>#challenge-window.modal{height:auto;overflow:visible;position:relative!important;top:auto}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split .challenges-row>.col-lg-3{flex:0 0 50%;max-width:50%}
.clq-question-ui{background:rgb(53 255 149/.035);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-left:3px solid var(--cl-green,#35ff95);border-radius:.2rem;margin:1rem 0;padding:.85rem}
.clq-question-ui__header{display:grid;gap:.3rem;margin-bottom:.7rem}
.clq-question-ui__badge{color:var(--cl-green,#35ff95);font:700 .58rem/1.3 var(--cl-font-mono,"Roboto Mono",monospace);letter-spacing:.055em;text-transform:uppercase}
.clq-question-ui__instruction{color:var(--cl-muted,#aeb9b2);font-size:.72rem;line-height:1.5;margin:0}
.clq-options{border:0;display:grid;gap:.5rem;margin:0;padding:0}
.clq-option{align-items:flex-start;background:rgb(255 255 255/.025);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.2rem;color:var(--cl-white,#fff);cursor:pointer;display:flex;font-size:.72rem;gap:.65rem;line-height:1.45;margin:0;padding:.7rem .75rem}
.clq-option:hover,.clq-option:focus-within{background:rgb(53 255 149/.08);border-color:var(--cl-green,#35ff95)}
.clq-option input{accent-color:var(--cl-green,#35ff95);flex:0 0 auto;margin-top:.18rem}
.clq-order{display:grid;gap:.45rem;list-style-position:inside;margin:0;padding:0}
.clq-order li{align-items:center;background:rgb(255 255 255/.025);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.2rem;color:var(--cl-white,#fff);display:flex;font-size:.72rem;gap:.75rem;justify-content:space-between;padding:.58rem .7rem}
.clq-order__actions{display:flex;flex:0 0 auto;gap:.3rem}
.clq-order__actions button{background:rgb(53 255 149/.08);border:1px solid var(--cl-green,#35ff95);border-radius:.18rem;color:var(--cl-white,#fff);cursor:pointer;height:2rem;width:2rem}
.clq-order__actions button:disabled{cursor:not-allowed;opacity:.32}
.clq-order__actions button:focus-visible,.clq-option input:focus-visible{outline:2px solid var(--cl-green,#35ff95);outline-offset:2px}
.clq-native-input--proxy{clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;width:1px!important}
.clq-native-input--proxy+.input-group-append,.clq-native-input--proxy+button{margin-left:0}
.clq-native-answer input[aria-label="Answer"]{font-family:var(--cl-font-mono,"Roboto Mono",monospace)}
@media(min-width:48rem){
.cl-learning-split__guide{max-height:calc(100vh - 7.5rem);position:sticky;top:5.5rem}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split{max-height:calc(100vh - 7.5rem)}
}
@media(min-width:62rem){
.cl-learning-split{grid-template-columns:minmax(24rem,.92fr) minmax(30rem,1.08fr)}
.cl-learning-split[data-guide-side="right"]{grid-template-columns:minmax(30rem,1.08fr) minmax(24rem,.92fr)}
}
@media(max-width:47.99rem){.cl-learning-split{grid-template-areas:"toolbar" "guide" "challenges";grid-template-columns:minmax(0,1fr)}.cl-learning-split[data-guide-side="right"]{grid-template-areas:"toolbar" "challenges" "guide";grid-template-columns:minmax(0,1fr)}.cl-learning-split__toolbar,.cl-learning-split__guide-header{align-items:flex-start;flex-direction:column}.cl-learning-split__swap{width:100%}.cl-learning-split__guide{min-height:20rem;max-height:70vh}}
@media print{.cl-learning-split__toolbar,.cl-learning-split>.cl-challenge-board--split{display:none!important}.cl-learning-split__guide{border:0;max-height:none;overflow:visible}.cl-learning-split__guide-content{overflow:visible;padding:0}}
.cl-site-nav__direct{text-decoration:none!important}
.cl-challenge-view-controls{align-items:center;background:linear-gradient(90deg,rgb(53 255 149/.075),rgb(0 0 0/.94));border:1px solid var(--cl-edge-soft,rgb(255 255 255/.17));border-radius:.25rem;display:flex;gap:1rem;justify-content:space-between;margin:0 0 1rem;padding:.8rem 1rem}
.cl-challenge-view-controls__heading{display:grid;gap:.12rem;min-width:0}
.cl-challenge-view-controls__eyebrow{color:var(--cl-green,#35ff95);font:700 .58rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);letter-spacing:.08em;text-transform:uppercase}
.cl-challenge-view-controls__title{color:var(--cl-white,#fff);font:700 .88rem/1.3 var(--cl-font-mono,"Roboto Mono",monospace);margin:.08rem 0;text-transform:uppercase}
.cl-challenge-view-controls__actions{align-items:center;display:flex;flex:0 0 auto;gap:.7rem}
.cl-challenge-view-switch{align-items:center;color:var(--cl-white,#fff);cursor:pointer;display:inline-flex;font:700 .62rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);gap:.55rem;letter-spacing:.04em;margin:0;min-height:2.5rem;position:relative;text-transform:uppercase}
.cl-challenge-view-switch input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%;z-index:1}
.cl-challenge-view-switch__track{background:rgb(255 255 255/.12);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.28));border-radius:999px;display:inline-block;height:1.45rem;position:relative;transition:background-color .16s ease,border-color .16s ease;width:2.7rem}
.cl-challenge-view-switch__track::after{background:var(--cl-white,#fff);border-radius:50%;content:"";height:1rem;left:.17rem;position:absolute;top:.17rem;transition:transform .16s ease;width:1rem}
.cl-challenge-view-switch input:checked+.cl-challenge-view-switch__track{background:rgb(53 255 149/.28);border-color:var(--cl-green,#35ff95)}
.cl-challenge-view-switch input:checked+.cl-challenge-view-switch__track::after{background:var(--cl-green,#35ff95);transform:translateX(1.22rem)}
.cl-challenge-view-switch input:focus-visible+.cl-challenge-view-switch__track{outline:2px solid var(--cl-green,#35ff95);outline-offset:3px}
.cl-challenge-view-switch input:disabled{cursor:wait}
.cl-challenge-view-switch input:disabled~*{cursor:wait;opacity:.58}
.cl-learning-split__swap:disabled{cursor:not-allowed;opacity:.42}
.cl-learning-split{grid-template-areas:"guide challenges"}
.cl-learning-split[data-guide-side="right"]{grid-template-areas:"challenges guide"}
@media(max-width:47.99rem){.cl-challenge-view-controls{align-items:stretch;flex-direction:column}.cl-challenge-view-controls__actions{align-items:stretch;flex-direction:column}.cl-challenge-view-switch{justify-content:space-between}.cl-learning-split__swap{width:100%}.cl-learning-split{grid-template-areas:"guide" "challenges"}.cl-learning-split[data-guide-side="right"]{grid-template-areas:"challenges" "guide"}}
@media(prefers-reduced-motion:reduce){.cl-challenge-view-switch__track,.cl-challenge-view-switch__track::after{transition:none}}
@media print{.cl-challenge-view-controls{display:none!important}}
:root{--cl-content-measure:72ch;--cl-page-gap:clamp(1rem,2vw,1.5rem);--cl-section-gap:clamp(1.5rem,3vw,2.25rem);--cl-edge-quiet:rgb(255 255 255/.12)}
body{background-image:radial-gradient(circle at 8% 0%,rgb(53 255 149/.055),transparent 28rem),radial-gradient(circle at 100% 22%,rgb(255 53 149/.03),transparent 26rem),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='62' viewBox='0 0 108 62'%3E%3Cpath d='M36 0H72L90 31L72 62H36L18 31ZM0 0L18 31L0 62M108 0L90 31L108 62' fill='none' stroke='%23ffffff' stroke-opacity='.022' stroke-width='1'/%3E%3C/svg%3E")!important}
body::before{opacity:.28}
.navbar-brand,.jumbotron h1,.cl-home__title,.cl-resources-header h1{text-shadow:none}
.navbar.cl-site-nav{box-shadow:none;min-height:3.55rem;padding-block:.2rem}
.cl-site-nav__brand{gap:.48rem!important;min-height:2.3rem}
.cl-site-nav__brand-wordmark{font-size:.78rem}
.cl-site-nav__brand-service{font-size:.56rem}
.cl-site-nav__edition{font-size:.58rem}
.cl-site-nav .cl-site-nav__toggle,.cl-site-nav__utility .nav-link,.cl-site-nav__toggler{min-height:2.35rem}
.cl-site-nav .cl-site-nav__toggle{padding:.52rem .58rem!important}
.cl-site-nav__group.active>.cl-site-nav__toggle::after{bottom:.12rem;box-shadow:none}
.cl-site-nav__menu,.cl-site-nav .dropdown-menu{box-shadow:0 12px 28px rgb(0 0 0/.5)}
@media(min-width:75rem){.cl-site-nav__brand-service{display:inline-block!important}}
.jumbotron{background:rgb(4 8 5/.82)!important;border-bottom-color:var(--cl-edge-quiet);margin-bottom:1rem;padding:1rem!important}
.jumbotron::before{display:none}
.jumbotron::after{height:1px;width:min(10rem,32vw)}
.jumbotron h1{font-size:clamp(1.45rem,3vw,2.15rem);line-height:1.12;margin:0}
body.cl-route-challenges .jumbotron,body.cl-route-scoreboard .jumbotron{margin-bottom:.8rem;padding:.8rem 1rem!important}
body.cl-route-challenges .jumbotron h1,body.cl-route-scoreboard .jumbotron h1{font-size:clamp(1.05rem,2vw,1.35rem)}
.card,.list-group-item,.well,.panel,.popover{box-shadow:none}
.cl-home{margin:clamp(1.5rem,4vw,2.75rem) auto 4rem;max-width:78rem}
.cl-home__hero{padding-bottom:1.35rem}
.cl-home__hero::after{box-shadow:none;height:2px;width:min(9rem,28vw)}
.cl-home__eyebrow{font-size:.65rem;margin-bottom:.55rem}
.cl-home__eyebrow::before{content:none}
.cl-home__title{font-size:clamp(2.15rem,4.25vw,3.65rem);line-height:1.06;max-width:22ch}
.cl-home__intro{font-size:clamp(.88rem,1.4vw,.98rem);line-height:1.6;margin-top:.85rem;max-width:var(--cl-content-measure)}
.cl-home__steps{gap:.75rem;margin-top:1.25rem}
.cl-home__step{background:rgb(5 8 5/.7);border:0!important;border-radius:0;box-shadow:none;min-height:0;padding:.9rem .95rem}
.cl-home__step::before{background:var(--cl-edge-quiet);content:"";height:1px;inset:0 0 auto;position:absolute}
.cl-home__step[aria-current="step"]{background:rgb(53 255 149/.045);box-shadow:inset 2px 0 var(--cl-green)}
.cl-home__step-number{font-size:.62rem;margin-bottom:.65rem}
.cl-home__step-title{font-size:.92rem}
.cl-home__step-copy{font-size:.75rem;line-height:1.55;margin:.4rem 0 .65rem}
.cl-home__step-link{font-size:.7rem}
.cl-resources-header{margin:1.25rem 0 1.35rem;padding-bottom:.7rem}
.cl-resources-header::after{box-shadow:none;height:2px;width:4.5rem}
.cl-resources-header h1{font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.08}
.cl-resources-header__eyebrow{font-size:.58rem;margin-bottom:.3rem}
.cl-resources-header p,.cl-resources-intro{font-size:.82rem;line-height:1.55;max-width:var(--cl-content-measure)}
.cl-resources-intro{margin-bottom:1.15rem}
.cl-resource-gallery{gap:.9rem;margin-bottom:1.75rem}
.cl-resource-feature{border-color:var(--cl-edge-quiet);border-radius:.2rem}
.cl-resource-feature img{aspect-ratio:2.25/1;max-height:13rem}
.cl-resource-feature__body{padding:.8rem .9rem}
.cl-resource-feature__copy,.cl-resource-link__copy{font-size:.76rem;line-height:1.45}
.cl-resource-links{gap:0;margin:.65rem 0 2rem}
.cl-resource-links li+li{border-top:1px solid var(--cl-edge-quiet)}
.cl-resource-link{background:transparent;border:0!important;border-radius:0;padding:.8rem 0}
.cl-resource-link:hover,.cl-resource-link:focus-visible{background:rgb(255 255 255/.025);box-shadow:inset 2px 0 var(--cl-magenta);padding-inline:.75rem}
.cl-resource-link__type{font-size:.62rem}
.cl-challenge-view-controls{background:transparent;border-color:var(--cl-edge-quiet);padding:.65rem .8rem}
.cl-learning-split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);max-width:100%;width:100%}
.cl-learning-split[data-guide-side="right"]{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.cl-learning-split__guide,.cl-learning-split>.cl-challenge-board--split{box-shadow:none;max-width:100%;min-width:0}
.cl-learning-split__guide-content{overflow-x:auto}
body.cl-challenge-split main>.container{max-width:96rem;width:100%}
@media(min-width:64rem){.cl-home__steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:48rem) and (max-width:64rem){body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split .challenges-row>.col-lg-3{flex:0 0 100%;max-width:100%}}
@media(max-width:61.99rem){.navbar.cl-site-nav{padding-block:.3rem}.cl-site-nav__collapse{box-shadow:0 18px 36px rgb(0 0 0/.6);margin-top:.4rem}.cl-site-nav .cl-site-nav__toggle{min-height:2.55rem}}
@media(max-width:47.99rem){.cl-home{margin-top:1.25rem}.cl-home__steps,.cl-resource-gallery{grid-template-columns:1fr}.cl-resource-link{align-items:flex-start;gap:.45rem}.cl-resource-link__type{white-space:normal}.cl-learning-split,.cl-learning-split[data-guide-side="right"]{grid-template-columns:minmax(0,1fr)}}
@media print{body{background:#fff!important}.jumbotron,.cl-home__step,.cl-resource-feature{background:#fff!important}.cl-home__title,.cl-resources-header h1{color:#111!important}}
.cl-challenge-catalog-tools{align-items:end;border-bottom:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12));display:grid;gap:.7rem 1rem;grid-template-columns:minmax(12rem,.8fr) minmax(16rem,1.2fr);margin:.25rem 0 .9rem;padding:.55rem 0 .8rem}
.cl-challenge-catalog-tools__copy{display:grid;gap:.12rem;min-width:0}
.cl-challenge-catalog-tools__eyebrow,.cl-catalog-day__eyebrow{color:var(--cl-magenta,#ff3595);font:700 .56rem/1.25 var(--cl-font-mono,"Roboto Mono",monospace);letter-spacing:.08em;text-transform:uppercase}
.cl-challenge-catalog-tools h2{color:var(--cl-white,#fff);font:700 clamp(.82rem,1.3vw,.95rem)/1.35 var(--cl-font-mono,"Roboto Mono",monospace);margin:0;text-transform:uppercase}
.cl-challenge-catalog-search{display:grid;gap:.3rem;grid-template-columns:minmax(0,1fr) auto;position:relative}
.cl-challenge-catalog-search__label{color:var(--cl-muted,#aeb9b2);font:700 .56rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);grid-column:1/-1;letter-spacing:.04em;margin:0;text-transform:uppercase}
.cl-challenge-catalog-search__input{background:rgb(0 0 0/.7);border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;color:var(--cl-white,#fff);font:600 .72rem/1.3 var(--cl-font-mono,"Roboto Mono",monospace);height:2.45rem;min-width:0;padding:.5rem .65rem;width:100%}
.cl-challenge-catalog-search__input::placeholder{color:rgb(220 230 224/.48)}
.cl-challenge-catalog-search__input:focus-visible,.cl-challenge-catalog-search__clear:focus-visible,.cl-catalog-toggle:focus-visible{border-color:var(--cl-green,#35ff95);outline:2px solid var(--cl-green,#35ff95);outline-offset:2px}
.cl-challenge-catalog-search__clear{background:transparent;border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;color:var(--cl-white,#fff);font:700 .62rem/1 var(--cl-font-mono,"Roboto Mono",monospace);min-height:2.45rem;padding:.5rem .7rem;text-transform:uppercase}
.cl-challenge-catalog{display:grid;gap:.8rem}
.cl-catalog-day{background:rgb(3 7 4/.56);border:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12));border-radius:.25rem;min-width:0}
.cl-catalog-day__header{align-items:center;background:linear-gradient(90deg,rgb(53 255 149/.075),transparent);display:grid;gap:.75rem;grid-template-columns:minmax(0,1fr) auto;padding:.72rem .8rem}
.cl-catalog-day__identity{align-items:baseline;display:flex;flex-wrap:wrap;gap:.28rem .7rem;min-width:0}
.cl-catalog-day__eyebrow{color:var(--cl-green,#35ff95)}
.cl-catalog-day__title{color:var(--cl-white,#fff);font:700 clamp(1rem,1.8vw,1.25rem)/1.25 var(--cl-font-mono,"Roboto Mono",monospace);margin:0}
.cl-catalog-day__summary{color:var(--cl-muted,#aeb9b2);font:600 .59rem/1.35 var(--cl-font-mono,"Roboto Mono",monospace)}
.cl-catalog-day__panel{border-top:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12));display:grid;gap:.55rem;padding:.65rem}
.cl-catalog-module{background:rgb(5 10 7/.68);border:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12));border-radius:.2rem;margin:0!important;padding:0!important}
.cl-catalog-module__header{align-items:center;display:grid;gap:.55rem .75rem;grid-template-columns:minmax(0,1fr) minmax(8rem,auto) auto;margin:0!important;padding:.62rem .7rem}
.cl-challenge-catalog .cl-catalog-module__title{color:var(--cl-muted,#aeb9b2)!important;font-size:clamp(.82rem,1.4vw,1rem)!important;line-height:1.35!important;margin:0!important;min-width:0}
.cl-challenge-catalog .cl-catalog-module__title .cl-module-token{color:var(--cl-muted,#aeb9b2)!important}
.cl-catalog-module__header>.cl-cm__meta{margin:0!important;min-width:8rem}
.cl-catalog-module__panel{border-top:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12));padding:.2rem .45rem .5rem}
.cl-catalog-toggle{align-items:center;background:transparent;border:1px solid var(--cl-edge-soft,rgb(255 255 255/.2));border-radius:.2rem;color:var(--cl-white,#fff);display:inline-flex;font:700 .58rem/1 var(--cl-font-mono,"Roboto Mono",monospace);gap:.42rem;justify-content:center;min-height:2rem;padding:.42rem .55rem;text-transform:uppercase}
.cl-catalog-toggle:hover{background:rgb(53 255 149/.07);border-color:var(--cl-green,#35ff95);color:var(--cl-green,#35ff95)}
.cl-catalog-toggle__icon{border-bottom:1px solid currentColor;border-right:1px solid currentColor;height:.42rem;transform:rotate(45deg) translateY(-.12rem);transition:transform .14s ease;width:.42rem}
.cl-catalog-toggle[aria-expanded="false"] .cl-catalog-toggle__icon{transform:rotate(-45deg)}
.cl-catalog-challenge--filtered[hidden],.cl-catalog-day[hidden],.cl-catalog-module[hidden],.cl-catalog-day__panel[hidden],.cl-catalog-module__panel[hidden],.cl-challenge-catalog-search__clear[hidden],.cl-challenge-catalog__empty[hidden]{display:none!important}
.cl-challenge-catalog__empty{border-left:2px solid var(--cl-magenta,#ff3595);color:var(--cl-muted,#aeb9b2);font:600 .72rem/1.5 var(--cl-font-mono,"Roboto Mono",monospace);margin:.75rem 0;padding:.6rem .75rem}
body.cl-challenge-split .cl-challenge-catalog-tools{grid-template-columns:1fr}
body.cl-challenge-split .cl-catalog-module__header{grid-template-columns:minmax(0,1fr) auto}
body.cl-challenge-split .cl-catalog-module__header>.cl-cm__meta{grid-column:1/-1;grid-row:2}
@media(max-width:47.99rem){.cl-challenge-catalog-tools{align-items:stretch;grid-template-columns:1fr}.cl-catalog-day__header{align-items:start}.cl-catalog-module__header{grid-template-columns:minmax(0,1fr) auto}.cl-catalog-module__header>.cl-cm__meta{grid-column:1/-1;grid-row:2}.cl-catalog-toggle__word{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;white-space:nowrap!important}}
@media(prefers-reduced-motion:reduce){.cl-catalog-toggle__icon{transition:none}}
@media print{.cl-challenge-catalog-tools,.cl-catalog-toggle{display:none!important}.cl-catalog-day,.cl-catalog-module{break-inside:avoid}.cl-catalog-day[hidden],.cl-catalog-module[hidden],.cl-catalog-day__panel[hidden],.cl-catalog-module__panel[hidden],.cl-catalog-challenge--filtered[hidden]{display:block!important}}
.cl-catalog-module__panel{container-type:inline-size}
.cl-catalog-module__panel .challenges-row{display:grid!important;gap:0;grid-template-columns:minmax(0,1fr);margin:0!important;width:100%}
.cl-catalog-module__panel .challenges-row>div[class*="col-"]{flex:0 0 100%!important;margin:0!important;max-width:100%!important;padding:0!important;width:100%!important}
.cl-catalog-module__panel .challenge-button,.cl-catalog-module__panel button.challenge-button,.cl-catalog-module__panel a.challenge-button{align-items:center;background:transparent!important;border:0!important;border-bottom:1px solid var(--cl-edge-quiet,rgb(255 255 255/.12))!important;border-radius:0!important;box-shadow:none!important;display:grid!important;gap:.6rem;grid-template-columns:minmax(0,1fr) auto auto;min-height:3.15rem;padding:.56rem .68rem!important;text-align:left;width:100%}
.cl-catalog-module__panel .challenges-row>div:last-of-type .challenge-button{border-bottom-color:transparent!important}
.cl-catalog-module__panel .challenge-button:hover,.cl-catalog-module__panel .challenge-button:focus,.cl-catalog-module__panel .challenge-button:focus-visible{background:rgb(255 255 255/.028)!important;border-bottom-color:var(--cl-magenta,#ff3595)!important;box-shadow:inset 2px 0 var(--cl-magenta,#ff3595)!important;outline:0}
.cl-catalog-module__panel .challenge-button:focus-visible{outline:2px solid var(--cl-green,#35ff95)!important;outline-offset:2px}
.cl-catalog-module__panel .challenge-button.challenge-solved,.cl-catalog-module__panel .challenge-button.solved-challenge,.cl-catalog-module__panel .challenge-button[data-solved="true"]{background:rgb(53 255 149/.035)!important;box-shadow:inset 2px 0 var(--cl-green,#35ff95)!important}
.cl-catalog-module__panel .challenge-inner{display:contents!important;margin:0!important}
.cl-catalog-module__panel .challenge-inner>p{color:var(--cl-white,#fff);font-size:.78rem;font-weight:650;grid-column:1;line-height:1.35;margin:0!important;min-width:0;text-align:left}
.cl-catalog-module__panel .challenge-inner>span{align-self:center;color:var(--cl-white,#fff)!important;font:700 .65rem/1 var(--cl-font-mono,"Roboto Mono",monospace)!important;grid-column:2;justify-self:end;min-width:2rem;text-align:right}
.cl-catalog-module__panel .cl-ccm{align-items:center;border:0;display:flex!important;gap:.48rem;grid-column:3;justify-content:flex-end;justify-self:end;margin:0;min-width:max-content;padding:0;width:auto}
.cl-catalog-module__panel .cl-ccm__state,.cl-catalog-module__panel .cl-ccm__solves{font-size:.53rem!important;white-space:nowrap}
@container(max-width:30rem){.cl-catalog-module__panel .challenge-button{gap:.4rem;grid-template-columns:minmax(0,1fr) auto}.cl-catalog-module__panel .challenge-inner>span{grid-column:2;grid-row:1}.cl-catalog-module__panel .cl-ccm{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:.08rem}}
@media print{.cl-catalog-module__panel .challenge-button,.cl-catalog-module__panel button.challenge-button,.cl-catalog-module__panel a.challenge-button{background:#fff!important;border-bottom:1px solid #ccc!important;box-shadow:none!important;color:#111!important;min-height:0}.cl-catalog-module__panel .challenge-inner>p,.cl-catalog-module__panel .challenge-inner>span,.cl-catalog-module__panel .cl-ccm__state,.cl-catalog-module__panel .cl-ccm__solves{color:#111!important}}
body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls){align-items:stretch;display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>.row:has(+ .cl-challenge-view-controls){display:none}
body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>#cl-challenge-progress{grid-column:1;height:100%;margin:0;min-width:0}
body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>.cl-challenge-view-controls{grid-column:2;height:100%;margin:0;min-width:0}
body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>:not(#cl-challenge-progress):not(.cl-challenge-view-controls){grid-column:1/-1;min-width:0}
@media(max-width:74.99rem){body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls){gap:.75rem;grid-template-columns:minmax(0,1fr)}body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>#cl-challenge-progress,body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls)>.cl-challenge-view-controls{grid-column:1}}
@media print{body.cl-route-challenges main :where(.container):has(> #cl-challenge-progress):has(> .cl-challenge-view-controls){display:block}body.cl-route-challenges #cl-challenge-progress{margin-bottom:1rem}}
@font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url("/files/0a44e0bb6ba5c8537e8814c148ef7755/roboto-latin-normal.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:italic;font-weight:100 900;font-stretch:100%;font-display:swap;src:url("/files/9f06741ff731c4555398df16ce523ee8/roboto-latin-italic.woff2") format("woff2")}
:root{--cl-font-sans:"Roboto","Helvetica Neue",Arial,sans-serif;--cl-font-mono:"Roboto Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace}
body,input,select,textarea{font-family:var(--cl-font-sans)!important}
.navbar,.btn,button,label,legend,.badge,.alert-heading,.table thead th,code,kbd,pre,samp,.challenge-value,.challenge-solve-count,.cl-technical-meta{font-family:var(--cl-font-mono)!important}
:root {
--cl-reading-measure: 70ch;
--cl-meta-size: 0.625rem;
}
html {
scroll-padding-block: 5rem 5.25rem;
}
body {
font-kerning: normal;
text-rendering: optimizeLegibility;
}
.jumbotron h1,
.cl-home__title,
.cl-resources-header h1,
.cl-book__title,
.cl-chapter__title,
.cl-day-template__title,
.cl-reference__title,
.challenge-name,
.challenge-desc > h2 {
font-family: var(--cl-font-sans) !important;
}
h1,
h2,
h3,
.cl-home__step-title,
.cl-catalog-module__title {
text-wrap: balance;
}
.cl-home__intro,
.cl-home__step-copy,
.cl-resource-feature__copy,
.cl-resource-link__copy,
.cl-chapter__article p,
.cl-chapter__article li,
.challenge-desc p,
.challenge-desc li {
text-wrap: pretty;
}
.cl-chapter__article p,
.cl-chapter__article li,
.challenge-desc p,
.challenge-desc li {
line-height: 1.58;
}
.cl-chapter__article :is(a, code, dd, td),
.cl-book :is(a, code, dd, td),
.cl-day-template :is(a, code, dd, td),
.challenge-desc :is(a, code, dd, td),
.alert :is(a, code) {
overflow-wrap: anywhere;
}
code:not(pre code) {
word-break: break-word;
}
pre {
max-width: 100%;
overflow: auto;
white-space: pre;
}
code,
kbd,
pre,
samp,
.cl-technical-meta {
font-variant-ligatures: none;
}
.challenge-value,
.cl-cp__value,
.cl-cp__remaining,
.cl-cm__count,
.cl-ccm__solves,
.cl-scoreboard-stat__value,
.scoreboard-table,
time {
font-variant-numeric: tabular-nums;
}
.cl-cp__eyebrow,
.cl-cp__remaining,
.cl-cm__state,
.cl-cm__count,
.cl-ccm__state,
.cl-ccm__solves,
.cl-challenge-catalog-tools__eyebrow,
.cl-challenge-catalog-search__label,
.cl-catalog-day__eyebrow,
.cl-catalog-day__summary,
.cl-learning-split__eyebrow,
.cl-learning-split__guide-label {
font-size: var(--cl-meta-size) !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder,
.cl-challenge-catalog-search__input::placeholder {
color: #aeb9b2 !important;
opacity: 1;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--cl-white) !important;
caret-color: var(--cl-green);
box-shadow: 0 0 0 1000px var(--cl-carbon) inset !important;
}
:disabled,
[aria-disabled="true"] {
cursor: not-allowed !important;
}
button:disabled,
.btn.disabled,
.btn:disabled,
[aria-disabled="true"] {
filter: saturate(0.55);
opacity: 0.58;
}
#challenge-window .btn-close {
background-size: 0.72rem;
border: 1px solid var(--cl-edge-soft);
border-radius: var(--cl-radius-sm);
filter: invert(1) grayscale(1) brightness(1.8);
height: 2rem;
opacity: 0.78;
width: 2rem;
}
#challenge-window .btn-close:hover,
#challenge-window .btn-close:focus-visible {
border-color: var(--cl-edge-bright);
opacity: 1;
}
#challenge-window .nav-tabs {
flex-wrap: nowrap;
overflow-x: auto;
padding-right: 2.75rem;
scrollbar-color: var(--cl-green) transparent;
scrollbar-width: thin;
}
#challenge-window .nav-tabs .nav-item,
#challenge-window .nav-tabs .nav-link {
flex: 0 0 auto;
white-space: nowrap;
}
.cl-resource-link:hover,
.cl-resource-link:focus-visible {
padding-inline: 0;
}
@media (min-width: 62rem) and (max-width: 74.99rem) {
.cl-site-nav__utility .nav-link > [data-bs-toggle="tooltip"] {
display: inline-block !important;
}
.cl-site-nav__utility [data-bs-toggle="tooltip"] > .d-lg-none {
display: inline-block !important;
}
.cl-site-nav__utility .nav-link > .d-lg-inline {
display: none !important;
}
.cl-site-nav__utility .nav-link,
.cl-site-nav__utility button.nav-link {
justify-content: center;
min-width: 2.35rem;
}
}
@media (pointer: coarse) {
.cl-catalog-toggle,
.clq-order__actions button,
#challenge-window .btn-close,
#challenge-window .nav-tabs .nav-link {
min-height: 2.75rem;
}
.cl-catalog-toggle,
.clq-order__actions button,
#challenge-window .btn-close {
min-width: 2.75rem;
}
.cl-utility-launchers {
bottom: max(0.75rem, env(safe-area-inset-bottom));
}
body.cl-utilities-ready {
padding-bottom: max(4.75rem, calc(4rem + env(safe-area-inset-bottom)));
}
}
@supports (height: 100dvh) {
@media (min-width: 48rem) {
.cl-learning-split__guide,
body.cl-challenge-split .cl-learning-split > .cl-challenge-board--split {
max-height: calc(100dvh - 7.5rem);
}
}
@media (max-width: 47.99rem) {
.cl-notepad-panel {
height: min(42rem, calc(100dvh - 5.75rem));
}
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
@media (forced-colors: active) {
body::before {
display: none !important;
}
*,
*::before,
*::after {
box-shadow: none !important;
text-shadow: none !important;
}
:focus-visible {
outline-color: Highlight !important;
}
.cl-cp__fill,
.cl-cm__fill,
.cl-challenge-view-switch input:checked + .cl-challenge-view-switch__track {
background: Highlight !important;
}
.cl-catalog-day,
.cl-catalog-module,
.cl-learning-split__guide,
.cl-learning-split > .cl-challenge-board--split,
#challenge-window .modal-content {
border: 1px solid CanvasText !important;
}
}
@media print {
a {
text-decoration: underline !important;
}
pre,
blockquote,
table,
.cl-chapter__section,
.cl-day-template__module {
break-inside: avoid;
}
}
.cl-workbench--focused {
max-width: 80rem;
}
.cl-workbench--focused .cl-workbench__hero {
column-gap: clamp(1.5rem, 4vw, 4rem);
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
padding-bottom: 1.15rem;
}
.cl-workbench--focused .cl-workbench__eyebrow,
.cl-workbench--focused .cl-workbench__title,
.cl-workbench--focused .cl-workbench__intro,
.cl-workbench--focused .cl-workbench__path,
.cl-workbench--focused .cl-workbench__session-note {
grid-column: 1;
}
.cl-workbench--focused .cl-workbench__intro {
max-width: 68ch;
}
.cl-workbench__actions {
align-self: center;
display: flex;
gap: 0.55rem;
grid-column: 2;
grid-row: 2 / span 3;
}
.cl-workbench__action {
align-items: center;
background: transparent;
border: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
border-radius: var(--cl-radius-sm, 0.24rem);
color: var(--cl-white, #fff);
display: inline-flex;
font: 700 0.7rem/1.2 var(--cl-font-mono, "Roboto Mono", monospace);
justify-content: center;
min-height: 2.45rem;
padding: 0.65rem 0.8rem;
text-decoration: none !important;
text-transform: uppercase;
}
.cl-workbench__action--primary {
border-color: var(--cl-green, #35ff95);
color: var(--cl-green, #35ff95);
}
.cl-workbench__action:hover,
.cl-workbench__action:focus-visible {
background: rgb(53 255 149 / 0.09);
border-color: var(--cl-green, #35ff95);
color: var(--cl-white, #fff);
}
.cl-workbench__session-note {
color: var(--cl-muted, #aeb9b2);
font-size: 0.72rem;
line-height: 1.5;
margin: 0.75rem 0 0;
max-width: 72ch;
}
.cl-workbench__session-note strong {
color: var(--cl-white, #fff);
}
.cl-workbench--focused .cl-workbench__section {
margin-top: 1.35rem;
}
.cl-workbench__section-head {
align-items: end;
display: grid;
gap: 1rem 2rem;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem);
}
.cl-workbench--focused .cl-workbench__section h2 {
margin-bottom: 0.25rem;
}
.cl-workbench__section-copy {
color: var(--cl-muted, #aeb9b2);
font-size: 0.74rem;
line-height: 1.5;
margin: 0;
max-width: 62ch;
}
.cl-workbench__search-block,
.cl-workbench__search-label {
display: grid;
}
.cl-workbench__search-block {
gap: 0.3rem;
}
.cl-workbench__search-label {
align-items: center;
color: var(--cl-muted, #aeb9b2);
font: 700 0.65rem/1.25 var(--cl-font-mono, "Roboto Mono", monospace);
grid-template-columns: minmax(0, 1fr) auto;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.cl-workbench__search-help {
color: color-mix(in srgb, var(--cl-muted, #aeb9b2) 82%, transparent);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.cl-workbench__search-help kbd {
background: rgb(255 255 255 / 0.05);
border: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
border-radius: 0.18rem;
color: var(--cl-white, #fff);
font: inherit;
padding: 0.02rem 0.25rem;
}
.cl-workbench__search {
appearance: none;
background: rgb(5 10 7 / 0.86);
border: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
border-radius: var(--cl-radius-sm, 0.24rem);
color: var(--cl-white, #fff);
font: 400 0.76rem/1.35 var(--cl-font-sans, "Roboto", sans-serif);
min-height: 2.55rem;
padding: 0.58rem 0.72rem;
width: 100%;
}
.cl-workbench__search:focus {
border-color: var(--cl-green, #35ff95);
box-shadow: 0 0 0 0.16rem rgb(53 255 149 / 0.14);
outline: 0;
}
.cl-workbench__search::placeholder {
color: color-mix(in srgb, var(--cl-muted, #aeb9b2) 78%, transparent);
opacity: 1;
}
.cl-workbench__results {
color: var(--cl-muted, #aeb9b2);
font: 600 0.67rem/1.35 var(--cl-font-mono, "Roboto Mono", monospace);
margin: 0;
min-height: 0.85rem;
}
.cl-workbench--focused .cl-workbench__policy {
background: rgb(36 8 22 / 0.34);
margin: 0.9rem 0 0;
padding: 0.65rem 0.8rem;
}
.cl-workbench--focused .cl-workbench__policy summary {
text-transform: none;
}
.cl-workbench--focused .cl-workbench__catalog {
border-top: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
display: grid;
gap: 0;
grid-template-columns: 1fr;
margin-top: 0.9rem;
}
.cl-workbench--focused .cl-workbench__group {
background: transparent;
border: 0;
border-bottom: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
display: grid;
grid-template-columns: minmax(11rem, 0.28fr) minmax(0, 1fr);
padding: 0;
}
.cl-workbench--focused .cl-workbench__group[hidden],
.cl-workbench--focused .cl-workbench__tool[hidden],
.cl-workbench__empty[hidden] {
display: none !important;
}
.cl-workbench--focused .cl-workbench__group h3 {
align-self: start;
border: 0;
grid-column: 1;
grid-row: 1;
margin: 0;
padding: 0.85rem 1rem 0.85rem 0;
}
.cl-workbench--focused .cl-workbench__tool {
align-items: center;
border-bottom: 1px solid rgb(255 255 255 / 0.07);
column-gap: 1rem;
display: grid;
grid-column: 2;
grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr) auto;
min-height: 3.15rem;
padding: 0.65rem 0;
}
.cl-workbench--focused .cl-workbench__tool:last-child {
border-bottom: 0;
padding-bottom: 0.65rem;
}
.cl-workbench--focused .cl-workbench__tool-name,
.cl-workbench--focused .cl-workbench__tool-copy,
.cl-workbench--focused .cl-workbench__tool-arrow {
grid-column: auto;
grid-row: auto;
}
.cl-workbench--focused .cl-workbench__tool-name {
font-size: 0.8rem;
}
.cl-workbench--focused .cl-workbench__tool-copy {
font-size: 0.73rem;
}
.cl-workbench--focused .cl-workbench__tool-arrow {
color: var(--cl-green, #35ff95);
font: 700 0.66rem/1.2 var(--cl-font-mono, "Roboto Mono", monospace);
white-space: nowrap;
}
.cl-workbench--focused .cl-workbench__tool:focus-visible {
background: rgb(53 255 149 / 0.07);
outline: 2px solid var(--cl-green, #35ff95);
outline-offset: -2px;
}
.cl-workbench__empty {
align-items: center;
border-bottom: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
color: var(--cl-muted, #aeb9b2);
display: flex;
font-size: 0.76rem;
gap: 1rem;
justify-content: space-between;
line-height: 1.55;
padding: 1rem 0;
}
.cl-workbench__empty p {
margin: 0;
}
.cl-workbench__clear-search {
background: transparent;
border: 1px solid var(--cl-rule, rgb(255 255 255 / 0.18));
border-radius: var(--cl-radius-sm, 0.24rem);
color: var(--cl-green, #35ff95);
flex: 0 0 auto;
font: 700 0.66rem/1.2 var(--cl-font-mono, "Roboto Mono", monospace);
min-height: 2.25rem;
padding: 0.55rem 0.72rem;
text-transform: uppercase;
}
.cl-workbench__clear-search:hover,
.cl-workbench__clear-search:focus-visible {
background: rgb(53 255 149 / 0.09);
border-color: var(--cl-green, #35ff95);
color: var(--cl-white, #fff);
}
body.cl-route-workbench .cl-tools-launcher,
body.cl-route-workbench .cl-notepad-launcher {
display: none !important;
}
@media (max-width: 61.99rem) {
.cl-workbench--focused .cl-workbench__hero,
.cl-workbench__section-head {
grid-template-columns: 1fr;
}
.cl-workbench__actions {
grid-column: 1;
grid-row: auto;
margin-top: 0.9rem;
}
.cl-workbench--focused .cl-workbench__group {
grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr);
}
.cl-workbench--focused .cl-workbench__tool {
grid-template-columns: minmax(9rem, 0.38fr) minmax(0, 1fr) auto;
}
}
@media (max-width: 35rem) {
.cl-workbench__search-help {
display: none;
}
.cl-workbench__actions {
align-items: stretch;
flex-direction: column;
}
.cl-workbench__action {
width: 100%;
}
.cl-workbench--focused .cl-workbench__group {
grid-template-columns: 1fr;
}
.cl-workbench--focused .cl-workbench__group h3,
.cl-workbench--focused .cl-workbench__tool {
grid-column: 1;
}
.cl-workbench--focused .cl-workbench__group h3 {
padding: 0.8rem 0 0.45rem;
}
.cl-workbench--focused .cl-workbench__tool {
gap: 0.18rem 0.6rem;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 3.45rem;
padding: 0.62rem 0;
}
.cl-workbench--focused .cl-workbench__tool-copy {
grid-column: 1;
}
.cl-workbench--focused .cl-workbench__tool-arrow {
grid-column: 2;
grid-row: 1 / span 2;
}
.cl-workbench__empty {
align-items: stretch;
flex-direction: column;
}
.cl-workbench__clear-search {
width: 100%;
}
}
@media (hover: none) and (pointer: coarse) {
.cl-workbench__search-help {
display: none;
}
}
@media (forced-colors: active) {
.cl-workbench__action,
.cl-workbench__search,
.cl-workbench--focused .cl-workbench__policy {
border: 1px solid ButtonText;
}
.cl-workbench--focused .cl-workbench__tool:focus-visible {
outline: 2px solid Highlight;
outline-offset: -2px;
}
}
@media print {
html,
body.cl-route-workbench,
body.cl-route-workbench main {
height: auto !important;
min-height: 0 !important;
}
body.cl-route-workbench {
display: block !important;
padding-bottom: 0 !important;
}
body.cl-route-workbench main {
margin-bottom: 0 !important;
}
body.cl-route-workbench footer,
body.cl-route-workbench > div[x-data],
.cl-workbench__actions,
.cl-workbench__search-block,
body.cl-route-workbench .cl-notepad-launcher {
display: none !important;
}
.cl-workbench--focused,
.cl-workbench--focused .cl-workbench__hero,
.cl-workbench--focused .cl-workbench__section,
.cl-workbench--focused .cl-workbench__policy,
.cl-workbench--focused .cl-workbench__catalog,
.cl-workbench--focused .cl-workbench__group,
.cl-workbench--focused .cl-workbench__tool {
background: #fff !important;
color: #000 !important;
}
.cl-workbench--focused :where(h1, h2, h3, p, span, strong, a, summary) {
color: #111 !important;
text-shadow: none !important;
}
.cl-workbench--focused .cl-workbench__policy > p {
display: block !important;
}
.cl-workbench--focused .cl-workbench__group,
.cl-workbench--focused .cl-workbench__tool,
.cl-workbench--focused .cl-workbench__policy {
border-color: #777 !important;
break-inside: avoid;
}
.cl-workbench--focused .cl-workbench__tool-arrow {
display: none;
}
.cl-workbench--focused .cl-workbench__tool::after {
color: #333;
content: attr(href);
font: 400 0.62rem/1.35 var(--cl-font-mono, "Roboto Mono", monospace);
grid-column: 2 / -1;
overflow-wrap: anywhere;
}
.cl-workbench--focused .cl-workbench__hero {
padding-bottom: 0.5rem;
}
.cl-workbench--focused .cl-workbench__section {
margin-top: 0.65rem;
}
.cl-workbench--focused .cl-workbench__policy,
.cl-workbench--focused .cl-workbench__catalog {
margin-top: 0.5rem;
}
.cl-workbench--focused .cl-workbench__policy {
padding: 0.4rem 0.6rem;
}
.cl-workbench--focused .cl-workbench__group h3 {
padding: 0.5rem 0.75rem 0.5rem 0;
}
.cl-workbench--focused .cl-workbench__tool,
.cl-workbench--focused .cl-workbench__tool:last-child {
min-height: 0;
padding: 0.35rem 0;
}
.cl-workbench--focused .cl-workbench__closing {
break-inside: avoid;
margin-top: 0.5rem;
}
}
.cl-learning-split__size-controls{align-items:center;display:inline-flex;gap:.2rem}
.cl-learning-split__size-button{align-items:center;appearance:none;background:transparent;border:1px solid var(--cl-edge-soft,rgb(255 255 255/.22));border-radius:.15rem;color:var(--cl-muted,#aeb9b2);cursor:pointer;display:inline-flex;font:700 .9rem/1 var(--cl-font-mono,"Roboto Mono",monospace);height:2rem;justify-content:center;padding:0;width:2rem}
.cl-learning-split__size-button:hover{border-color:var(--cl-green,#35ff95);color:var(--cl-white,#fff)}
.cl-learning-split__size-button:focus-visible{outline:2px solid var(--cl-green,#35ff95);outline-offset:2px}
.cl-learning-split__width{color:var(--cl-muted,#aeb9b2);font:700 .58rem/1.2 var(--cl-font-mono,"Roboto Mono",monospace);min-width:4.8rem;text-align:center;text-transform:uppercase}
.cl-learning-split__divider{display:none}
body.cl-split-resizing{cursor:col-resize;user-select:none}
@media(min-width:64rem){
.cl-learning-split[data-cl-resizable="true"]{--cl-guide-track:42fr;--cl-challenges-track:58fr;column-gap:0;grid-template-areas:"guide divider challenges";grid-template-columns:minmax(0,var(--cl-guide-track)) 1.5rem minmax(0,var(--cl-challenges-track));row-gap:1rem}
.cl-learning-split[data-cl-resizable="true"][data-guide-side="right"]{grid-template-areas:"challenges divider guide";grid-template-columns:minmax(0,var(--cl-challenges-track)) 1.5rem minmax(0,var(--cl-guide-track))}
.cl-learning-split__divider{align-items:center;align-self:stretch;cursor:col-resize;display:flex;grid-area:divider;justify-content:center;min-height:20rem;outline:0;position:relative;touch-action:none}
.cl-learning-split__divider::before{background:var(--cl-edge-soft,rgb(255 255 255/.22));border-radius:999px;content:"";height:4.5rem;width:2px}
.cl-learning-split__divider::after{background:var(--cl-surface,rgb(5 8 5/.96));border:1px solid var(--cl-edge-soft,rgb(255 255 255/.25));border-radius:999px;color:var(--cl-muted,#aeb9b2);content:"⋮";font:700 .7rem/1 var(--cl-font-mono,"Roboto Mono",monospace);left:50%;padding:.35rem .18rem;position:absolute;top:50%;transform:translate(-50%,-50%)}
.cl-learning-split__divider:hover::before,.cl-learning-split__divider:focus-visible::before,.cl-learning-split__divider[data-dragging="true"]::before{background:var(--cl-green,#35ff95);box-shadow:0 0 0 2px rgb(53 255 149/.12)}
.cl-learning-split__divider:focus-visible{outline:2px solid var(--cl-green,#35ff95);outline-offset:2px}
}
@media(max-width:63.99rem){.cl-learning-split__divider,.cl-learning-split__size-controls{display:none!important}}
@media print{.cl-learning-split__divider,.cl-learning-split__size-controls{display:none!important}}


/* Structured Student Guides 2.26.0.
   HOW TO CHANGE: Keep dense tables inside their existing scroll wrappers;
   neither the rail nor article may expand the single-column mobile grid. */
.cl-chapter>.cl-chapter__rail,
.cl-chapter>.cl-chapter__article{min-width:0}
@media(max-width:50rem){.cl-chapter{grid-template-columns:minmax(0,1fr)}}

/* Split Challenge Overlay 2.28.0.
   HOW TO CHANGE: The challenge dialog overlays only the challenge catalog so
   learners can keep using the adjacent Student Guide. Keep the catalog inert
   while open and preserve native CTFd form submission and close behavior. */
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split{
  isolation:isolate;
  position:relative;
}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
  #challenge-window.modal[data-cl-split-challenge-overlay="true"]{
  background:rgb(0 0 0/.76);
  box-sizing:border-box;
  grid-column:1;
  grid-row:1;
  height:100%;
  inset:0!important;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
  padding:clamp(.65rem,1.8vw,1.25rem)!important;
  position:absolute!important;
  scrollbar-gutter:stable;
  width:100%;
  z-index:30;
}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
  #challenge-window.modal[data-cl-split-challenge-overlay="true"].show{
  display:block!important;
}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
  #challenge-window[data-cl-split-challenge-overlay="true"] .modal-dialog{
  margin:0 auto;
  max-width:52rem;
  width:100%;
}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
  #challenge-window[data-cl-split-challenge-overlay="true"] .modal-content{
  box-shadow:0 1.5rem 4rem rgb(0 0 0/.62);
}
body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
  .cl-challenge-split__placeholder{
  display:none!important;
}
@media(max-width:47.99rem){
  body.cl-challenge-split .cl-learning-split>.cl-challenge-board--split>
    #challenge-window.modal[data-cl-split-challenge-overlay="true"]{
    padding:.5rem!important;
  }
}

/* Student Guide publication 2.32.0: fail visually closed before capability resolution. */
html:not([data-corelight-student-guide="enabled"]) .cl-challenge-view-controls,
html:not([data-corelight-student-guide="enabled"]) .cl-learning-split,
html:not([data-corelight-student-guide="enabled"]) #cl-module-flow a[href^="/guide"],
html:not([data-corelight-student-guide="enabled"]) #cl-module-flow a[href*="/guide/"],
html:not([data-corelight-student-guide="enabled"]) [data-cl-student-guide-only] {
  display: none !important;
}

html[data-corelight-student-guide="enabled"] [data-cl-student-guide-disabled-only] {
  display: none !important;
}