/* LearnIndex Skill Articles — styled after the Learn Index Skill Finder. */

.li-skills {
	--sand: #F1EEE6;
	--gold: #96691F;
	--gold-soft: #F4EAD0;
	--on-accent: #FFFFFF;
	--sf-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--sf-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--lsk-sticky: 72px;
	font-family: var(--sf-font);
	color: var(--ink);
	background: var(--paper);
	padding: 22px 16px 80px;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .li-skills { --sand: #262118; --gold: #D9AC5C; --gold-soft: #2D2514; --on-accent: #14110C; }
}
:root[data-theme="dark"] .li-skills { --sand: #262118; --gold: #D9AC5C; --gold-soft: #2D2514; --on-accent: #14110C; }

.li-skills *, .li-skills *::before, .li-skills *::after { box-sizing: border-box; }
:where(.li-skills) :where(button, input, select) { font: inherit; color: inherit; }
:where(.li-skills) :where(button) { cursor: pointer; }
.li-skills :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.li-skills h1, .li-skills h2, .li-skills h3, .li-skills h4 { margin: 0; letter-spacing: -.015em; text-wrap: balance; font-family: var(--sf-font); color: var(--ink); }
.lsk-wrap { max-width: 1072px; margin: 0 auto; min-width: 0; }

/* subject colour sets */
.s-math    { --tc: var(--blue);  --ts: var(--blue-strong);  --tbg: var(--blue-soft); }
.s-english { --tc: var(--rust);  --ts: var(--rust-strong);  --tbg: var(--rust-soft); }
.s-science { --tc: var(--green); --ts: var(--green-strong); --tbg: var(--green-soft); }
.s-social  { --tc: var(--ink);   --ts: var(--ink);          --tbg: var(--sand); }
.s-more    { --tc: var(--gold);  --ts: var(--gold);         --tbg: var(--gold-soft); }

/* shared pills / chips */
.lsk-pill {
	min-height: 44px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
	border-radius: 999px; padding: 0 16px; font-weight: 800; font-size: .9rem;
	display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
}
.lsk-pill:hover { border-color: var(--blue); color: var(--ink); }
.lsk-pill.is-green { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.lsk-pill.is-green:hover { background: var(--green-strong); }

/* ---------- library: top, tiles ---------- */
.lsk-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.lsk-date { font-family: var(--sf-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; margin: 0; }
.lsk-top h1 { margin: 4px 0 0; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.lsk-top p:not(.lsk-date) { margin: 6px 0 0; color: var(--ink-soft); max-width: 62ch; }

.lsk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.lsk-tile {
	border: 0; text-align: left; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 6px;
	background: var(--tbg); color: var(--ink); min-width: 0; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
.lsk-tile:hover { outline-color: color-mix(in srgb, var(--tc) 35%, transparent); }
.lsk-tile[aria-pressed="true"] { outline-color: var(--tc); }
.lsk-tile .tk { font-family: var(--sf-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--tc); }
.lsk-tile .tn { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ts); }
.lsk-tile .tt { font-size: .85rem; color: var(--ink-soft); }
.lsk-tile .tbar { height: 6px; border-radius: 4px; background: var(--card); overflow: hidden; margin-top: 4px; }
.lsk-tile .tbar i { display: block; height: 100%; background: var(--tc); transition: width .3s; }
.lsk-tile.s-social .tbar i { background: linear-gradient(90deg, var(--rust) 0 33.3%, var(--green) 33.3% 66.6%, var(--blue) 66.6%); }

/* ---------- library: filters ---------- */
.lsk-filters {
	position: static; background: transparent;
	display: block; padding: 0; border: 0; margin: 0 0 14px;
}
.lsk-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.lsk-controls label { display: flex; flex: 0 1 210px; min-width: 0; margin: 0; }
.lsk-controls .lsk-search { flex: 3 1 300px; }
.lsk-controls input[type="search"], .lsk-controls select {
	width: 100%; min-height: 44px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
	border-radius: 14px; padding: 8px 12px; font-size: .92rem; box-shadow: none;
}
.lsk-controls select { padding: 8px 12px; }
.lsk-controls input[type="search"]:focus, .lsk-controls select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }

.lsk-views { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lsk-hero-views { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1.5px solid var(--line); }
.lsk-lab { font-family: var(--sf-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-right: 6px; }
.lsk-chip {
	min-height: 48px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
	border-radius: 14px; padding: 0 16px; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px;
}
.lsk-chip:hover { border-color: var(--ink-soft); }
.lsk-chip small { font-family: var(--sf-mono); font-weight: 600; opacity: .8; font-size: .74rem; }
.lsk-chip.st-open { --lsk-filter: var(--green); background: var(--lsk-filter); border-color: var(--lsk-filter); color: var(--on-accent); }
.lsk-chip.st-work { --lsk-filter: var(--blue); background: var(--lsk-filter); border-color: var(--lsk-filter); color: var(--on-accent); }
.lsk-chip.st-done { --lsk-filter: var(--rust); background: var(--lsk-filter); border-color: var(--lsk-filter); color: var(--on-accent); }
.lsk-chip.st-hide { --lsk-filter: var(--ink); background: var(--lsk-filter); border-color: var(--lsk-filter); color: var(--paper); }
.lsk-chip:hover { border-color: currentColor; filter: brightness(1.08); }
.lsk-chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--lsk-filter); transform: translateY(-1px); }
.lsk-count { font-family: var(--sf-mono); font-size: .78rem; color: var(--ink-soft); }
#lsk-toggle-all { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card); font-size: .86rem; font-weight: 600; white-space: nowrap; }
#lsk-toggle-all:hover { border-color: var(--green); background: var(--paper); }

/* ---------- library: sections ---------- */
/* Match the Experience Collector's area panels so each subject provides a
   clear surface behind its topic headings and skill cards. */
.lsk-subj {
	margin-top: 14px;
	background: var(--card);
	border: 1.5px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.lsk-subj-head { margin: 0; }
.lsk-sechead, .lsk-cathead {
	display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 8px 2px;
	text-align: left; color: var(--ink); font-weight: 800;
}
.lsk-sechead { font-size: 1.35rem; padding: 16px 18px 12px; }
.lsk-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--tbg); color: var(--ts); transition: background .15s, color .15s; }
.lsk-icon svg { width: 22px; height: 22px; }
.lsk-sechead:hover .lsk-icon { background: var(--tc); color: var(--on-accent); }
.lsk-subj.s-social .lsk-sechead:hover .lsk-icon { color: var(--paper); }
.lsk-num { font-family: var(--sf-mono); font-size: .82rem; font-weight: 600; background: var(--sand); color: var(--ink-soft); border-radius: 8px; padding: 3px 8px; }
.lsk-name { min-width: 0; }
.lsk-chev { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .2s; margin-right: 8px; flex: none; }
[aria-expanded="false"] > .lsk-chev { transform: rotate(-45deg); }

.lsk-secbody { padding: 0 18px 18px; }
.lsk-cat { margin-top: 10px; }
.lsk-cat h3 { margin: 0; }
.lsk-cathead { font-size: .98rem; color: var(--ink-soft); gap: 9px; }
.lsk-caticon { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--tbg); color: var(--ts); font-family: var(--sf-mono); font-size: .85rem; flex: none; }
.lsk-cathead small { font-family: var(--sf-mono); font-weight: 600; font-size: .74rem; color: var(--ink-faint); }
.lsk-secbody[hidden], .lsk-grid[hidden] { display: none; }

.lsk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 6px 0 8px; }
.lsk-card {
	position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
	padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; cursor: pointer;
	transition: border-color .15s, background .15s;
}
.lsk-card:hover { border-color: var(--line-strong); }
.lsk-card.is-saved { background: var(--blue-soft); border-color: var(--blue); }
.lsk-card.is-read  { background: var(--green-soft); border-color: var(--green); }
.lsk-card.is-skip  { background: var(--rust-soft); border-color: var(--rust); }
.lsk-card[hidden] { display: none; }
.lsk-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .74rem; padding-right: 70px; min-height: 24px; }
.lsk-gr { font-family: var(--sf-mono); font-weight: 600; font-size: .72rem; background: var(--sand); color: var(--ink-soft); border-radius: 6px; padding: 2px 7px; }
.lsk-gr.is-any { background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-faint); }
.lsk-card h4 { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 800; }
.lsk-card h4 a { color: var(--ink); text-decoration: none; }
.lsk-card h4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lsk-card p { margin: 0; color: var(--ink-soft); font-size: .85rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lsk-stat { position: absolute; top: 8px; right: 10px; z-index: 1; display: flex; }
.lsk-sdot { width: 22px; height: 30px; border: 0; background: none; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.lsk-sdot i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); transition: transform .15s; }
.lsk-sdot:hover i { transform: scale(1.2); }
.lsk-sdot[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c); }
.lsk-sdot[data-st="saved"] { --c: var(--blue); }
.lsk-sdot[data-st="read"]  { --c: var(--green); }
.lsk-sdot[data-st="skip"]  { --c: var(--rust); }
.lsk-add {
	align-self: flex-start; margin-top: auto; border: 1px solid var(--line-strong); background: var(--card); color: var(--blue-strong);
	border-radius: 999px; min-height: 32px; padding: 0 12px; font-size: .78rem; font-weight: 800;
}
.lsk-add:hover { border-color: var(--blue); }
.lsk-add.is-added { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }

.lsk-empty { text-align: center; padding: 48px 16px; color: var(--ink-soft); }
.lsk-empty h2 { font-size: 1.3rem; margin-bottom: 6px; }

/* ---------- single skill ---------- */
.lsk-overlay-open { overflow: hidden !important; }
.li-skill {
	position: fixed; inset: 0; z-index: 1000000; width: 100vw; height: 100dvh;
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	padding: 72px 16px 48px; background: var(--paper);
}
.lsk-overlay-close {
	position: fixed; top: 18px; right: 22px; z-index: 1000001;
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	border: 1.5px solid var(--line-strong); border-radius: 12px;
	background: var(--card); color: var(--ink); font: 500 2rem/1 var(--sf-font);
	text-decoration: none; cursor: pointer; box-shadow: var(--shadow);
}
.lsk-overlay-close:hover { border-color: var(--rust); color: var(--rust); }
.lsk-overlay-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lsk-lesson-wrap { max-width: 1072px; }
.lsk-lbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.lsk-lbar-left, .lsk-lbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lsk-subjchip {
	font-family: var(--sf-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	padding: 6px 11px; border-radius: 999px; background: var(--tbg, var(--sand)); color: var(--ts, var(--ink)); text-decoration: none;
}
.lsk-work[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.lsk-done { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.lsk-done:hover { background: var(--green-strong); color: var(--on-accent); }
.lsk-done[aria-pressed="true"] { background: var(--card); color: var(--green-strong); border-color: var(--green); }
.lsk-assign { color: var(--blue-strong); }
.lsk-assign.is-added { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.lsk-audio[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); }

.lsk-head { margin-bottom: 20px; }
.lsk-eyebrow { font-family: var(--sf-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-strong); font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lsk-eyebrow .lsk-gr { text-transform: none; letter-spacing: 0; background: var(--blue-soft); color: var(--blue-strong); }
.lsk-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; font-weight: 800; margin-top: 8px; }
.lsk-lede { font-size: 1.08rem; color: var(--ink-soft); max-width: 68ch; margin: 10px 0 0; }

.lsk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.lsk-tab {
	min-height: 48px; border: 0; border-radius: 12px; color: var(--on-accent); font-weight: 800; font-size: .98rem;
	outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .15s, opacity .15s;
}
.lsk-tab.t-expl { background: var(--rust); --tc: var(--rust); }
.lsk-tab.t-explore { background: var(--blue); --tc: var(--blue); }
.lsk-tab.t-practice { background: var(--green); --tc: var(--green); }
.lsk-tab:hover:not(:disabled) { outline-color: color-mix(in srgb, var(--tc) 40%, transparent); }
.lsk-tab[aria-selected="true"] { outline-color: var(--tc); box-shadow: inset 0 0 0 2px var(--card); }
.lsk-tab:disabled,.lsk-tab.is-unavailable { opacity: .38; cursor: not-allowed; filter:saturate(.35); }

.lsk-panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.lsk-panel[hidden] { display: none; }
.lsk-panel > h2 { font-size: 1.4rem; margin-top: 4px; }
.lsk-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.lsk-panel-head h2 { font-size: 1.4rem; margin-top: 4px; }
.lsk-step { font-family: var(--sf-mono); font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 4px; }

.lsk-watch { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.lsk-watch.is-text { grid-template-columns: minmax(0, 1fr); }
.lsk-gfx:has(.lsk-map) { place-items: start center; padding-top: 22px; }
.lsk-gfx { position: relative; min-height: 300px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; display: grid; place-items: center; }
.lsk-map { width: 150px; filter: drop-shadow(0 12px 12px rgba(33, 30, 24, .15)); animation: lskFloat 4s ease-in-out infinite; }
.lsk-scene { position: absolute; inset: auto 16px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; opacity: 0; transform: translateY(12px); transition: .4s; }
.lsk-gfx:not(:has(.lsk-map)) .lsk-scene { inset: 50% 24px auto; transform: translateY(-40%); text-align: center; font-size: 1.05rem; }
.lsk-scene.is-active { opacity: 1; transform: none; }
.lsk-gfx:not(:has(.lsk-map)) .lsk-scene.is-active { transform: translateY(-50%); }
.lsk-scene b { display: block; color: var(--rust); font-size: 1.15rem; margin-bottom: 4px; }
.lsk-idea { background: var(--rust-soft); color: var(--ink); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lsk-idea .lsk-eyebrow { color: var(--rust-strong); }
.lsk-idea h3 { font-size: 1.35rem; }
.lsk-idea p:not(.lsk-eyebrow) { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.lsk-player { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.lsk-dots { display: flex; gap: 6px; margin-left: auto; }
.lsk-dots i { width: 10px; height: 10px; border-radius: 6px; background: var(--line-strong); transition: width .2s, background .2s; }
.lsk-dots i.on { width: 28px; background: var(--rust); }

.lsk-art { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.lsk-art.is-first { margin-top: 0; border-top: 0; padding-top: 0; }
/* Article on the left, sidebar on the right (as in the Skill Finder). */
.lsk-art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.lsk-body { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 28px 24px; min-width: 0; }
.lsk-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lsk-speed { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--ink-soft); font-weight: 700; }
.lsk-speed select { min-height: 34px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); padding: 0 10px; }
.lsk-thumb { margin: 16px 0 0; }
.lsk-thumb img { width: 100%; height: auto; border-radius: 14px; display: block; }
.lsk-reading { font-size: 1.05rem; line-height: 1.8; color: var(--ink); max-width: 72ch; }
.lsk-reading > :first-child { margin-top: 14px; }
.lsk-reading h2 { font-size: 1.35rem; margin: 1.6em 0 .4em; }
.lsk-reading h3 { font-size: 1.12rem; margin: 1.4em 0 .3em; }
.lsk-reading img { max-width: 100%; height: auto; border-radius: 12px; }
.lsk-reading a { color: var(--blue-strong); }
.lsk-reading .lsk-speaking { background: var(--gold-soft); box-shadow: 0 0 0 3px var(--gold-soft); border-radius: 5px; }
.lsk-explanation-media{position:relative;width:100%;margin:1.5rem 0 0;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}.lsk-explanation-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lsk-term { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--blue-strong); text-decoration: underline dotted 2px; text-underline-offset: 4px; cursor: help; }

.lsk-side { display: grid; gap: 14px; position: sticky; top: calc(var(--lsk-sticky) + 12px); min-width: 0; }
.lsk-card-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.lsk-card-box h3 { font-size: 1.02rem; margin: 0 0 10px; }
.lsk-card-box dl { margin: 0; }
.lsk-card-box dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.lsk-card-box dt { color: var(--ink-soft); font-weight: 700; }
.lsk-card-box dd { margin: 0; text-align: right; font-weight: 800; }
.lsk-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.lsk-kw { border: 0; background: var(--blue-soft); color: var(--blue-strong); border-radius: 8px; padding: 5px 9px; font-weight: 800; font-size: .88rem; cursor: help; }
.lsk-kw.is-on { background: var(--blue); color: var(--on-accent); }
.lsk-def { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--blue-soft); font-size: .92rem; line-height: 1.5; display: grid; gap: 4px; }
.lsk-tags p { margin: 0; font-size: .9rem; }

.lsk-next { display: flex; justify-content: flex-end; margin-top: 18px; }

.lsk-explore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 16px; }
.lsk-explore-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 18px 16px; text-align: left; font-size: 1rem; }
.lsk-explore-card:hover, .lsk-explore-card.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.lsk-explore-card.is-active { background: var(--blue-soft); }
.lsk-explore-out { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--blue-soft); min-height: 100px; }
.lsk-explore-out h3 { font-size: 1.15rem; }
.lsk-explore-out p { margin: 6px 0 0; line-height: 1.6; }

.lsk-quiz { display: grid; gap: 12px; margin-top: 14px; max-width: 760px; }
.lsk-q { display: grid; gap: 10px; }
.lsk-q h3 { font-size: 1.2rem; }
.lsk-qbar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.lsk-qbar i { display: block; height: 100%; background: var(--green); transition: width .3s; }
.lsk-answer { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); padding: 13px 16px; text-align: left; font-weight: 700; }
.lsk-answer:hover:not(:disabled) { border-color: var(--blue); }
.lsk-answer:disabled { cursor: default; }
.lsk-answer.is-correct { background: var(--green-soft); border-color: var(--green); }
.lsk-answer.is-wrong { background: var(--rust-soft); border-color: var(--rust); }
.lsk-feedback { font-weight: 800; margin: 0; min-height: 1.4em; }
.lsk-qctl { display: flex; gap: 8px; flex-wrap: wrap; }
.lsk-qctl [disabled] { opacity: .45; cursor: not-allowed; }
.lsk-result { text-align: center; padding: 26px; background: var(--green-soft); border-radius: 16px; display: grid; gap: 8px; justify-items: center; }
.lsk-result h3 { font-size: 1.6rem; }

.lsk-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.lsk-pn a { display: grid; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; text-decoration: none; color: var(--ink); }
.lsk-pn a:hover { border-color: var(--line-strong); }
.lsk-pn a.is-next { text-align: right; grid-column: 2; }
.lsk-pn small { font-family: var(--sf-mono); font-size: .72rem; color: var(--ink-faint); }

@keyframes lskFloat { 50% { transform: translateY(-8px) rotate(1deg); } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.lsk-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lsk-art-grid { grid-template-columns: minmax(0, 1fr); }
	.lsk-side { position: static; }
	.lsk-watch { grid-template-columns: minmax(0, 1fr); }
	.lsk-gfx { min-height: 220px; }
}
@media (max-width: 640px) {
	.li-skills:not(.li-skill) { padding-top: 16px; }
	.li-skill { padding: 70px 12px 36px; }
	.lsk-overlay-close { top: 14px; right: 14px; }
	.lsk-filters { position: static; }
	.lsk-controls { flex-wrap: wrap; }
	.lsk-controls label, .lsk-controls .lsk-search { flex: 1 1 100%; }
	.lsk-sechead { padding: 14px 14px 10px; }
	.lsk-secbody { padding: 0 14px 14px; }
	.lsk-tile .tn { font-size: 1.6rem; }
	.lsk-tabs { gap: 6px; }
	.lsk-tab { font-size: .88rem; padding: 0 4px; }
	.lsk-panel { padding: 16px; }
	.lsk-body { padding: 8px 16px 18px; }
	.lsk-pn { grid-template-columns: 1fr; }
	.lsk-pn a.is-next { grid-column: auto; }
	.lsk-lbar-right { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.lsk-map { animation: none; }
	.lsk-scene, .lsk-tile .tbar i { transition: none; }
}

/* ---------- About (as on Experiences / Articles) ---------- */
.lsk-about { background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: .2rem 1.2rem; margin: 0 0 20px; }
.lsk-about summary { cursor: pointer; padding: .8rem 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.lsk-about summary::-webkit-details-marker { display: none; }
.lsk-about summary::before { content: "ⓘ"; color: var(--blue); }
.lsk-about p { margin: .2rem 0 .9rem; max-width: none; line-height: 1.6; }
.lsk-about b { color: var(--ink); }
.lsk-about .lsk-muted { font-size: .85rem; color: var(--ink-soft); }

/* ---------- Intro card (as on Curriculum) ---------- */
.lsk-intro { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 1.4rem; margin: 0 0 20px; }
.lsk-intro-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.li-skills .lsk-intro-title { font-size: 1.3rem; font-weight: 700; margin: 0 auto 0 0; letter-spacing: -.01em; }
.lsk-intro-top .lsk-pill { min-height: 38px; }
.lsk-intro-date { font-family: var(--sf-mono); font-size: .85rem; color: var(--ink-soft); }
.lsk-intro-big { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 .8rem; }
.lsk-intro-big b { font-size: 2rem; font-weight: 800; line-height: 1.2; }
.lsk-intro-big > span { font-size: 1.5rem; font-weight: 700; color: var(--blue-strong); font-family: var(--sf-mono); }
.lsk-intro-bar { display: block; height: 14px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.lsk-intro-bar i { display: block; height: 100%; border-radius: 999px; background: var(--green); transition: width .5s; }
/* The introduction sentence runs the full width of the page. */
.li-skills .lsk-intro-lede { margin: 1rem 0 0; max-width: none; width: 100%; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.lsk-intro-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.lsk-tag { display: inline-flex; align-items: center; border-radius: 999px; padding: .15rem .8rem; font-family: var(--sf-mono); font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
.lsk-tag b { font-weight: 600; }
.lsk-tag.t-blue { background: var(--blue-soft); color: var(--blue-strong); }
.lsk-tag.t-amber { background: var(--gold-soft); color: var(--gold); }
.lsk-tag.t-work { background: var(--blue-soft); color: var(--blue-strong); }
.lsk-tag.t-green { background: var(--green-soft); color: var(--green-strong); }
@media (max-width: 640px) {
	.lsk-intro { padding: 1rem; }
	.lsk-intro-big b { font-size: 1.5rem; }
	.lsk-intro-big > span { font-size: 1.15rem; }
}

/* Subject tiles sit inside the intro card. */
.lsk-intro .lsk-tiles { margin: 1.1rem 0 0; }

/* Key words (like the lesson glossary) */
.lsk-gloss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lsk-gloss .lsk-kw { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink-soft); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .9rem; font-weight: 400; line-height: 1.45; cursor: pointer; }
.lsk-gloss .lsk-kw b { display: block; font-size: .98rem; font-weight: 800; color: var(--blue-strong); }
.lsk-gloss .lsk-kw:hover, .lsk-gloss .lsk-kw:focus-visible, .lsk-gloss .lsk-kw.is-on { background: var(--blue-soft); color: var(--ink); }
.lsk-term.is-on { text-decoration-style: solid; background: var(--blue-soft); border-radius: 4px; }
.lsk-def-inline { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin: -4px 0 16px; padding: 12px 14px; border-radius: 14px; background: var(--blue-soft); border-left: 4px solid var(--blue); font-size: .97rem; line-height: 1.55; color: var(--ink); animation: lskDefIn .18s ease-out; }
.lsk-def-inline b { color: var(--blue-strong); }
.lsk-def-inline button { flex: none; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0 2px; }
@keyframes lskDefIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lsk-def-inline { animation: none; } }
.lsk-tool-frame{width:100%;margin:1.5rem 0;border:0;border-radius:14px;overflow:hidden;background:#fff}.lsk-tool-frame iframe{display:block;width:100%;height:90vh;min-height:70vh;border:0;overflow:hidden}
.lsk-text-answer{width:100%;max-width:620px;min-height:48px;margin:1rem 0;padding:.7rem .85rem}.lsk-structured-answer{display:grid;gap:12px;margin:1rem 0}.lsk-structured-answer label{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1fr);align-items:center;gap:12px}.lsk-structured-answer select{width:100%;min-height:44px}

/* Top image (e.g. country flag) at the head of the Explanation */
.lsk-explanation-image{margin:0 0 18px;text-align:center;width:100%}
.lsk-explanation-image img{display:block;width:100%;max-width:100%;max-height:none;height:auto;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08);background:#fff}
.lsk-explanation-image figcaption{margin-top:8px;font-size:.85rem;opacity:.75}

/* tab icon + title + description */
.lsk-tab { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 8px; min-height:96px; line-height:1.2; }
.lsk-tab-ico svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; display:block; }
.lsk-tab-label { font-weight:800; font-size:1rem; }
.lsk-tab-desc { font-size:.8rem; font-weight:600; opacity:.9; }
@media (max-width: 600px) {
	.lsk-tab { min-height:88px; padding:8px 4px; }
	.lsk-tab-ico svg { width:22px; height:22px; }
	.lsk-tab-label { font-size:.86rem; }
	.lsk-tab-desc { font-size:.68rem; }
}