/*!
 * SkillNeer Deep Lake kit for interactive lessons. Include it with
 *
 *   <link rel="stylesheet" href="__sn/deep-lake.css">
 *
 * Also include deep-lake.js: it loads the Inter font. It gives a lesson the same look as the site: lake blue + warm sand with sand-500 as the one accent, Fraunces for
 * headings and Inter for text, hairlines instead of shadows, square panels, 6px buttons, no gradients.
 * Rules from the brand guide: lake-900 OR sand-50 is the dominant background (add class "dl-dark" or "dl-light" on <body>);
 * every heading gets an eyebrow label above it; no emoji; icons are thin outline icons (2px stroke, rounded).
 * All motion respects prefers-reduced-motion.
 */
/* Inter is loaded by deep-lake.js without blocking the page (an @import here would keep the whole lesson blank
   until the font server answered). Until it arrives, and if it never does, the system sans-serif is used. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --lake-50: #eef5fa; --lake-100: #d9e8f3; --lake-200: #b6d2e6; --lake-300: #8bb7d3; --lake-400: #5f8fb0; --lake-500: #3f7a9c;
  --lake-600: #2b6a94; --lake-700: #1b5e8a; --lake-800: #124a6e; --lake-900: #0e3a57; --lake-950: #0a2a40;
  --sand-50: #faf8f4; --sand-100: #f4efe6; --sand-200: #e8dfcd; --sand-300: #dccfb4; --sand-400: #c9b48a; --sand-500: #b39868;
  --sand-600: #9a7f4f; --sand-700: #7a6238; --sand-800: #5f4b28; --sand-900: #3f3219;
  --success: #1e5a45; --success-soft: #e9f2ee; --danger: #8f2a2a; --danger-soft: #f8ecec;
  --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--slate-600); background: var(--sand-50); -webkit-font-smoothing: antialiased; }
body.dl-dark { background: var(--lake-900); color: var(--lake-100); }
body.dl-light { background: var(--sand-50); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; color: var(--lake-900); margin: 0; }
.dl-dark h1, .dl-dark h2, .dl-dark h3, .dl-dark h4 { color: #fff; }
p { margin: 0; }

/* The signature device: a small uppercase, wide-tracked label above every heading */
.dl-eyebrow { font: 500 12px/1.3 var(--font-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--sand-600); }
.dl-dark .dl-eyebrow { color: var(--sand-400); }
.dl-lead { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--slate-600); }
.dl-dark .dl-lead { color: var(--lake-200); }
.dl-num { font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1; color: var(--lake-600); font-variant-numeric: tabular-nums; }
.dl-dark .dl-num { color: #fff; }
.dl-small { font-size: 13px; color: var(--slate-500); }
.dl-dark .dl-small { color: var(--lake-300); }

/* Wordmark: SkillNeer with the gold full stop that never changes colour */
.dl-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--lake-900); }
.dl-dark .dl-wordmark { color: #fff; }
.dl-wordmark::after { content: '.'; color: var(--sand-500); }
/* header, left side: the wordmark with the step counter beside it. The right side belongs to the settings gear. */
.dl-head-left { display: flex; align-items: baseline; gap: 18px; min-width: 0; }

/* Hairlines and square panels, never shadows or rounded cards */
.dl-rule { border: 0; border-top: 1px solid var(--sand-200); margin: 0; }
.dl-dark .dl-rule { border-top-color: rgba(182, 210, 230, .22); }
.dl-panel { background: #fff; border: 1px solid var(--sand-200); }
.dl-dark .dl-panel { background: rgba(10, 42, 64, .55); border-color: rgba(182, 210, 230, .22); }

/* Buttons: rectangular, 6px corners, colour transition only */
.dl-btn { appearance: none; font: 600 14px/1 var(--font-sans); padding: 12px 20px; min-height: 44px; border: 1px solid var(--lake-800); background: var(--lake-800); color: #fff; border-radius: var(--radius); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.dl-btn:hover { background: var(--lake-900); border-color: var(--lake-900); }
.dl-btn:disabled { background: var(--sand-300); border-color: var(--sand-300); color: #94836a; cursor: not-allowed; }
.dl-btn--secondary { background: #fff; color: var(--lake-800); border-color: var(--sand-300); }
.dl-btn--secondary:hover { background: var(--lake-50); border-color: var(--lake-300); }
.dl-btn--ondark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.dl-btn--ondark:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.dl-btn--gold { background: var(--sand-100); border-color: var(--sand-100); color: var(--lake-900); }
.dl-btn--gold:hover { background: #fff; border-color: #fff; }
:focus-visible { outline: 2px solid var(--sand-500); outline-offset: 2px; }

/* Chips are the one fully rounded element */
.dl-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font-sans); padding: 6px 12px; border-radius: 999px; background: var(--sand-100); color: var(--sand-800); border: 1px solid var(--sand-200); }
.dl-dark .dl-chip { background: rgba(244, 239, 230, .08); color: var(--sand-100); border-color: rgba(244, 239, 230, .25); }
.dl-chip--ok { background: var(--success-soft); color: var(--success); border-color: #b9d9c6; }

/* Thin outline icons: 24x24 viewBox, 2px stroke, rounded caps and joins, no fill */
.dl-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.dl-progress { height: 3px; background: var(--sand-200); }
.dl-dark .dl-progress { background: rgba(182, 210, 230, .2); }
.dl-progress > i { display: block; height: 100%; width: 0; background: var(--sand-500); transition: width .5s var(--ease); }

/* Photography and painterly illustration: warm natural light, a touch desaturated toward the lake and sand palette.
   Set text over it as live type, never baked into the picture. <figure class="dl-photo dl-photo--tint"><img ...></figure> */
.dl-photo { position: relative; overflow: hidden; margin: 0; background: var(--lake-900); border: 1px solid var(--sand-200); }
.dl-photo img, .dl-photo video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02); }
.dl-photo--tint::after { content: ''; position: absolute; inset: 0; background: rgba(14, 58, 87, .28); pointer-events: none; }   /* flat lake tint for legible text */
.dl-photo--drift img { animation: dl-drift 28s ease-in-out infinite alternate; }                                          /* slow push-in */
.dl-photo figcaption { position: absolute; left: 14px; bottom: 10px; z-index: 1; font-size: 11px; color: rgba(255, 255, 255, .8); }
@keyframes dl-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* Motion helpers. Add class dl-in (and style="--i:2" to stagger) to anything that should rise into view. */
@keyframes dl-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dl-draw { to { stroke-dashoffset: 0; } }
@keyframes dl-float { 50% { transform: translateY(-6px); } }
@keyframes dl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes dl-pop { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: none; opacity: 1; } }
.dl-in { animation: dl-fade-up .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.dl-fade { animation: dl-fade .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.dl-pop { animation: dl-pop .5s var(--ease) both; }
.dl-shake { animation: dl-shake .45s; }
.dl-float { animation: dl-float 5s ease-in-out infinite; }
.dl-draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); animation: dl-draw 1.4s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 120ms); }

/* "Next" that tells the student when to move on (DL.next). Soft: it never blocks, it only advises.
   While a step plays a thin line grows along the bottom of the lesson window; the Next button waits as a quiet outline.
   When the line reaches the button it becomes ready: it fills, the arrow nudges once, and after a few idle seconds a
   thin ring ripples out now and then. */
.dl-next { position: relative; --wait-bg: transparent; --wait-fg: #fff; --wait-bd: rgba(255, 255, 255, .4); --ready-bg: var(--sand-100); --ready-fg: var(--lake-900); --ready-bd: var(--sand-100); --ring: var(--sand-400); }
.dl-light .dl-next { --wait-bg: #fff; --wait-fg: var(--lake-800); --wait-bd: var(--sand-300); --ready-bg: var(--lake-800); --ready-fg: #fff; --ready-bd: var(--lake-800); --ring: var(--sand-500); }
.dl-next.dl-next--waiting { background: var(--wait-bg); color: var(--wait-fg); border-color: var(--wait-bd); }
.dl-next.dl-next--ready { background: var(--ready-bg); color: var(--ready-fg); border-color: var(--ready-bd); }
.dl-next-line { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 40; pointer-events: none; background: rgba(182, 210, 230, .14); opacity: 0; transition: opacity .6s; }
.dl-light .dl-next-line { background: var(--sand-200); }
.dl-next-line.is-on { opacity: 1; }
.dl-next-line i { display: block; height: 100%; width: 0; background: var(--sand-500); transition: width .45s linear; }
.dl-next-line.is-reset i { transition: none; }
.dl-next-arrow { display: inline-block; margin-left: 8px; vertical-align: -3px; }
.dl-next-arrow .dl-icon { width: 18px; height: 18px; }
.dl-next--ready .dl-next-arrow { animation: dl-next-arrow .9s var(--ease) 1; }
.dl-next::after { content: ''; position: absolute; left: -4px; top: -4px; right: -4px; bottom: -4px; border: 1px solid var(--ring); border-radius: 10px; opacity: 0; pointer-events: none; }
.dl-next--nudge::after { animation: dl-next-ripple 1.7s ease-out 1; }
.dl-next-hint { font: 500 11px/1.3 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sand-600); transition: color .4s; }
.dl-dark .dl-next-hint { color: var(--lake-300); }
.dl-next-hint.is-ready, .dl-dark .dl-next-hint.is-ready { color: var(--sand-500); }
@keyframes dl-next-arrow { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(5px); } }
@keyframes dl-next-ripple { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.16, 1.5); } }
@media (prefers-reduced-motion: reduce) { .dl-next--ready .dl-next-arrow, .dl-next--nudge::after { animation: none; } .dl-next-line i { transition: none; } }

/* hidden discovery note (DL.discover): small, square, sand accent, fades by itself */
.dl-found { position: fixed; z-index: 45; width: 280px; padding: 10px 14px; background: var(--lake-900); color: #fff; font: 500 13px/1.45 var(--font-sans); border-left: 3px solid var(--sand-500); box-shadow: 0 8px 24px rgba(15, 40, 64, .25); opacity: 0; transform: translateY(calc(-100% + 6px)); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.dl-found.is-on { opacity: 1; transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}