:root {
    color-scheme: dark;
    --bg-dark: #1e1e1e;
    --bg-panel: #252526;
    --text-main: #cccccc;
    --text-title: #ffffff;
    --accent: #007acc;
    --lesson-code-bg: #101418;
    --lesson-border: #3b4148;
    --reading-width: 78ch;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { min-width: 280px; margin: 0; background: var(--bg-dark); color: var(--text-main); font: 1rem/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; -webkit-text-size-adjust: 100%; }
a { color: #72b8e8; }
a:hover { color: #a9d8f7; }
:focus-visible { outline: 3px solid #71c4ff; outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: #fff; color: #111; font-weight: 700; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
#main-header { position: sticky; top: 0; z-index: 20; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px max(14px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid #333; background: rgba(37, 37, 38, .97); backdrop-filter: blur(10px); }
.header-file-info { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--text-main); font-size: .9rem; font-weight: 600; }
.icon-python { flex: 0 0 auto; color: #3776ab; }
.header-back { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 12px; border: 1px solid #59636d; border-radius: 7px; background: #30343a; color: #eef2f5; font-weight: 650; line-height: 1.2; text-decoration: none; }
.header-back:hover { border-color: #72b8e8; background: #3a4149; color: #fff; }
main, footer { width: min(100% - 32px, 920px); margin-inline: auto; }
main { padding: 52px 0 72px; }
.hero { max-width: var(--reading-width); margin: 0 auto 32px; }
.eyebrow { margin: 0 0 5px; color: #8fc8ec; font-size: .78rem; font-weight: 750; letter-spacing: .09em; line-height: 1.35; text-transform: uppercase; }
h1, h2, h3 { color: var(--text-title); }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.035em; }
.hero-copy { max-width: 66ch; margin: 14px 0 0; color: #bbc3ca; font-size: 1.08rem; }
.language-scope { max-width: 66ch; margin: 10px 0 0; color: #aeb8c2; font-size: .92rem; }
.reading-guide { margin-top: 22px; padding: 16px 18px; border: 1px solid #405364; border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; background: #242a2f; }
.reading-guide h2 { margin: 0 0 8px; font-size: 1rem; }
.reading-guide ol { margin: 0; padding-left: 1.35rem; }
.reading-guide li + li { margin-top: 4px; }
.reading-guide code { padding: 1px 5px; border-radius: 4px; background: #111820; color: #a5d6ff; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.finder { max-width: var(--reading-width); margin: 0 auto 46px; padding: 18px; border: 1px solid #46505a; border-radius: 10px; background: #292c2f; }
.finder-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.finder h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.status { margin: 0; color: #aeb8c2; font-size: .9rem; text-align: right; }
.controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, .65fr); gap: 12px; }
.control label { display: block; margin-bottom: 5px; color: #f0f3f6; font-size: .9rem; font-weight: 700; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 12px; top: 50%; color: #89939d; pointer-events: none; transform: translateY(-50%); }
input, select { width: 100%; min-height: 46px; padding: .6rem .75rem; border: 1px solid #78828c; border-radius: 7px; background: #17191c; color: var(--text-title); font: inherit; }
input { padding-left: 40px; }
input::placeholder { color: #8f979f; }
.alphabet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.alphabet-button { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; padding: 5px 9px; border: 1px solid #59636d; border-radius: 6px; background: #202327; color: #dce2e7; font: 750 .85rem/1 system-ui, sans-serif; cursor: pointer; }
.alphabet-button:hover, .alphabet-button[aria-pressed="true"] { border-color: #72b8e8; background: #283b49; color: #fff; }
.category { max-width: var(--reading-width); margin: 0 auto 48px; scroll-margin-top: 76px; }
.category[hidden], .term-card[hidden] { display: none; }
.category-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #3b4148; }
.category h2 { margin: 0; font-size: 1.4rem; line-height: 1.3; }
.category-count { color: #9ba5ae; font-size: .85rem; white-space: nowrap; }
.term-list { display: grid; gap: 16px; }
.letter-anchor { display: block; height: 0; scroll-margin-top: 76px; }
.term-card { min-width: 0; padding: 18px 18px 20px; border: 1px solid #383d43; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: #292c2f; scroll-margin-top: 76px; }
.term-card:target { border-color: #5eb6ef; border-left-color: #5eb6ef; box-shadow: 0 0 0 2px rgba(0, 122, 204, .2); }
.term-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.35; }
.term-card h3 { color: #f4f7fa; }
.term-card p { margin: 9px 0 0; }
.definition strong { color: #eef2f5; }
.why { padding-left: 11px; border-left: 2px solid #59636d; color: #b9c0c7; }
.why strong { color: #eef2f5; }
.related { color: #aeb8c2; font-size: .92rem; }
.related strong { color: #eef2f5; }
.lesson-code-block { min-width: 0; margin: 16px 0 0; overflow: hidden; border: 1px solid #46505a; border-radius: 9px; background: var(--lesson-code-bg); }
.lesson-code-toolbar { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 8px 5px 13px; border-bottom: 1px solid #343b42; background: #1b2025; }
.lesson-code-language { color: #aeb8c2; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lesson-code-language[data-evidence="platform"],
.lesson-code-language[data-evidence="external"] { color: #f3c969; }
.lesson-copy-button { min-height: 34px; padding: 5px 9px; border: 1px solid #59636d; border-radius: 6px; background: #292f35; color: #e8edf2; font: 650 .82rem/1 system-ui, sans-serif; cursor: pointer; }
.lesson-copy-button:hover { background: #37414a; }
.lesson-pre { width: 100%; max-width: 100%; margin: 0; padding: 16px; overflow-x: auto; background: var(--lesson-code-bg); color: #e6edf3; font: .94rem/1.62 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; overflow-wrap: normal; overscroll-behavior-inline: contain; tab-size: 4; white-space: pre-wrap; word-break: normal; }
.lesson-pre[data-horizontal-scroll="true"] { box-shadow: inset -12px 0 12px -15px #71c4ff; }
.syntax-comment { color: #8b949e; font-style: italic; }
.syntax-string { color: #a5d6ff; }
.syntax-number { color: #79c0ff; }
.syntax-keyword { color: #ff7b72; font-weight: 600; }
.syntax-builtin { color: #d2a8ff; }
.syntax-operator { color: #ffa657; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 36px; border-top: 1px solid #333; color: #9ba5ae; font-size: .9rem; }
footer p { margin: 0; }
.noscript { padding: 16px; text-align: center; }
.visually-hidden { position: fixed; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
    main, footer { width: min(100% - 24px, 920px); }
    main { padding: 30px 0 52px; }
    .controls { grid-template-columns: 1fr; }
    .finder-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
    .status { text-align: left; }
    .term-card { padding: 16px 14px 18px; }
    footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 430px) {
    #main-header { padding-inline: 10px; }
    .header-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .header-back { width: 42px; padding-inline: 0; }
    .finder { padding: 14px; }
    .lesson-code-block { margin-inline: -6px; }
    .lesson-pre { padding: 14px 12px; font-size: .9rem; tab-size: 2; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}