/* Web-coding lessons: the workshop (text beside editor and preview), lesson cards, goals, and the printable certificate. */
.wc-lesson{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:start}
.wc-text h2{margin:0 0 6px;font-size:20px}.wc-text p{margin:0 0 14px}.wc-task{padding:12px 14px;border:2px solid var(--comic-ink,#24203a);border-radius:14px;background:#FFF4DC;font-weight:700}
.wc-goal{margin:0 0 6px;padding:8px 12px;border-radius:10px;font-size:14px}.wc-goal.ok{background:#e6f5ea;color:#0e5a2a}.wc-goal.no{background:#fdeceb;color:#8f1d17}
.wc-msg{margin:10px 0;font-weight:700;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.wc-nav{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.wc-work{border:2px solid var(--comic-ink,#24203a);border-radius:18px;overflow:hidden;background:#fff;box-shadow:4px 4px 0 var(--comic-ink,#24203a)}
.wc-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--c-soft,#ECE7FA);border-bottom:2px solid var(--comic-ink,#24203a)}.wc-bar span{display:flex;flex-wrap:wrap;gap:6px}
.wc-code{display:block;width:100%;min-height:220px;padding:12px 14px;border:0;border-bottom:2px solid var(--comic-ink,#24203a);background:#1d2142;color:#edebff;font:500 15px/1.55 ui-monospace,Consolas,monospace;resize:vertical;tab-size:2}
.wc-code:focus-visible{outline:3px solid var(--c,#6446C4);outline-offset:-3px}
.wc-preview{display:block;width:100%;height:260px;border:0;background:#fff}
.wc-out{margin:0;min-height:120px;padding:12px 14px;background:#fff;color:#1a1612;font:500 14px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap}.wc-out.err{color:#8f1d17}
.wc-card{position:relative}.wc-num{position:absolute;top:12px;right:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c-soft,#ECE7FA);font-weight:800;font-size:13px}.wc-card.done{background:#f3fbf5}
.wc-cert-ctl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px}
.wc-cert{max-width:720px;margin:0 auto;padding:40px 30px;text-align:center;border:6px double var(--comic-ink,#24203a);border-radius:12px;background:#fffdf8}.wc-cert-top{font:800 13px var(--sans,system-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--c-ink,#43308E)}
.wc-cert-name{margin:6px 0;font-size:clamp(28px,5vw,44px)}.wc-cert-title{margin:6px 0 14px;font-size:26px}.wc-cert-fine{color:var(--mute,#6B6153);font-size:13px;margin:4px 0}
@media(max-width:900px){.wc-lesson{grid-template-columns:minmax(0,1fr)}.wc-text,.wc-work{min-width:0}}
@media print{body *{visibility:hidden}.wc-cert,.wc-cert *{visibility:visible}.wc-cert{position:absolute;left:0;top:0;width:100%;border-width:6px}.pb,.w-top,.ftr,.wa-fab{display:none}}

.wc-module{margin:26px 0 12px;font:700 22px var(--serif,Georgia,serif);color:var(--ink,#1b1340)}.wc-module:first-of-type{margin-top:6px}
.wc-practice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}.wc-practice h2{margin:4px 0}.wc-practice p{margin:0}

.wc-canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;margin-top:10px;border:3px solid var(--ink,#1b1340);border-radius:14px;background:#fff}
.wc-stretch{margin:14px 0;padding:10px 14px;border:2px dashed var(--line-2,#c9c2d8);border-radius:12px}.wc-stretch summary{cursor:pointer;font-weight:800}.wc-stretch p{margin:8px 0 0}
.wc-prem{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:99px;background:#ffd23f;color:#1b1340;font:800 12px var(--sans,system-ui);letter-spacing:.04em;text-transform:uppercase}

/* the output comes alive: a "Running…" beat, text typed out with a caret, and goals that slide in one by one */
.wc-out.running{color:var(--mute,#6B6153);animation:wc-pulse .7s ease-in-out infinite alternate}
.wc-caret{display:inline-block;margin-left:1px;animation:wc-blink .8s steps(2,start) infinite}
.wc-goal{animation:wc-goal-in .4s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i, 0) * 110ms)}
@keyframes wc-pulse{from{opacity:.45}to{opacity:1}}@keyframes wc-blink{to{visibility:hidden}}
@keyframes wc-goal-in{from{opacity:0;transform:translateX(-14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wc-out.running,.wc-caret,.wc-goal{animation:none}}

/* ---------- colourful code: the editor, the examples and the colours of each kind of word ---------- */
:root{--cd-bg:#1b1633;--cd-bg2:#241d44;--cd-line:#3a2f66;--cd-text:#f3f0ff;--cd-dim:#8a82b8}
.wc-editor,.wc-block{--fs:14px;--lh:22px;--gut:48px;font:500 var(--fs)/var(--lh) ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-variant-ligatures:none;letter-spacing:0;tab-size:2}
.wc-editor{position:relative;height:clamp(240px,34vw,340px);border-radius:16px;background:linear-gradient(160deg,var(--cd-bg),var(--cd-bg2));border:2px solid var(--cd-line);box-shadow:0 14px 34px -22px #000;overflow:hidden}
.wc-hl{position:absolute;inset:0;margin:0;padding:12px 12px 12px 0;overflow:hidden;pointer-events:none;color:var(--cd-text);white-space:pre}.wc-hl code{display:block;font:inherit;will-change:transform}
.wc-editor .wc-code{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:12px 12px 12px var(--gut);border:0;border-radius:0;resize:none;outline:none;background:transparent;color:transparent;caret-color:#ffd23f;font:inherit;white-space:pre;overflow:auto;-webkit-text-fill-color:transparent}
.wc-editor .wc-code::selection{background:rgba(255,210,63,.35);-webkit-text-fill-color:transparent}.wc-editor .wc-code:focus{box-shadow:inset 0 0 0 2px #ffd23f66}
.wc-hl .ln,.wc-block .ln{counter-increment:ln}.wc-hl code,.wc-block code{counter-reset:ln}
.wc-hl .ln::before,.wc-block .ln::before{content:counter(ln);display:inline-block;width:calc(var(--gut) - 14px);margin-right:14px;text-align:right;color:var(--cd-dim);opacity:.75;user-select:none}
.wc-bar{background:linear-gradient(90deg,#6c4de6,#ff5d8f);color:#fff;border-radius:14px 14px 0 0}
.wc-block{margin:0;padding:14px 16px 14px 0;overflow:auto;border-radius:14px;background:linear-gradient(160deg,var(--cd-bg),var(--cd-bg2));border:2px solid var(--cd-line);color:var(--cd-text);white-space:pre;box-shadow:0 14px 34px -24px #000}.wc-block code{display:block;font:inherit;min-width:max-content}
.wc-example{margin:14px 0 20px;padding:0}.wc-example figcaption{margin:0 0 8px;font:800 12px var(--sans,system-ui);letter-spacing:.1em;text-transform:uppercase;color:#6c4de6}.wc-example .btn{margin-top:10px}.wc-example-note{margin:10px 0 0;color:var(--ink-2,#4a4560)}
.wc-points{margin:0 0 14px;padding-left:20px}.wc-points li{margin:4px 0}.wc-note{margin:0 0 14px;padding:10px 14px;border-left:4px solid #ffd23f;background:#fff8dc;border-radius:0 10px 10px 0;font-size:15px}
.wc-text code,.wc-example-note code,.wc-task code,.wc-stretch code{padding:1px 6px;border-radius:6px;background:#efeaff;color:#4b2fb8;font:600 .92em ui-monospace,SFMono-Regular,Consolas,monospace}
.wc-out{background:linear-gradient(160deg,var(--cd-bg),var(--cd-bg2));color:#8affc1;border:2px solid var(--cd-line);border-radius:0 0 14px 14px}
/* token colours: pink words, green text, orange numbers, cyan names, yellow attributes */
.tk-kw{color:#ff79c6;font-weight:700}.tk-str{color:#7dffb3}.tk-num{color:#ffb86c}.tk-com{color:#8a82b8;font-style:italic}.tk-fn{color:#8be9fd}.tk-def{color:#50fa7b;font-weight:700}.tk-bi{color:#ffd166}
.tk-op{color:#ff9d5c}.tk-pn{color:#b9b3e6}.tk-meta{color:#c4a8ff}.tk-prop{color:#8be9fd}.tk-val{color:#f1fa8c}.tk-tag{color:#ff6b9d;font-weight:700}.tk-attr{color:#ffd166}
.tk-cls{color:#50fa7b}.tk-id{color:#ffb86c}.tk-pseudo{color:#c4a8ff}
@media(min-width:901px){.wc-work{position:sticky;top:84px;align-self:start}}
@media(max-width:560px){.wc-editor,.wc-block{--fs:13px;--lh:20px}}