/* Сгенерировано: python3 -m pipeline.notes load. Руками не править — править pipeline/notes/render.py. */
.note-scope{
    --bg: #fafafa;
    --paper: #ffffff;
    --surface-2: #f4f4f6;
    --surface-3: #ececef;
    --border: #ececec;
    --border-strong: #e0e0e2;

    --ink: #0a0a0a;
    --ink-2: #2a2a2a;
    --ink-body: #1f1f23;
    --muted: #737378;
    --muted-2: #a3a3a8;

    --accent: #725DFF;
    --accent-50: #f1eeff;
    --accent-100: #e2dcff;
    --accent-200: #c4b8ff;
    --accent-600: #5a45e8;
    --accent-700: #4632c4;
    --accent-glow: rgba(114, 93, 255, 0.18);

    --green: #1aae5b;
    --green-soft: #e3f7eb;
    --green-tint: #f0faf4;
    --yellow: #f5b800;
    --yellow-soft: #fef4d6;
    --yellow-tint: #fffaeb;
    --orange: #ff7a1a;
    --orange-soft: #fff0e0;
    --orange-tint: #fff8f0;
    --red: #ef3b3b;
    --red-soft: #fde4e4;
    --red-tint: #fef5f5;
    --blue: #2a8eff;
    --blue-soft: #e0efff;
    --blue-tint: #f1f7ff;
    --pink: #ff4d8d;
    --pink-soft: #ffe2ec;
    --teal: #14b8a6;
    --teal-soft: #ccfbf1;
    --brown: #8b5e34;
    --brown-soft: #f0e4d4;

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04);
    --shadow: 0 4px 14px rgba(15, 15, 20, 0.05);
  }
.note-scope *{ box-sizing: border-box; margin: 0; padding: 0; }
.note-scope{ scroll-behavior: smooth; }
.note-scope{
    background: var(--bg);
    color: var(--ink-body);
    font-family: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
.note-scope::before{
    content: "";
    position: fixed;
    top: -300px; right: -200px;
    width: 700px; height: 700px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
.note-scope a{ color: inherit; text-decoration: none; }
.note-scope button{ font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.note-scope .math{ font-family: "STIX Two Math", "Cambria Math", Georgia, serif; font-style: italic; font-size: 1.05em; }
.note-scope .formula-inline{ display: inline-block; padding: 2px 8px; background: var(--surface-2); border-radius: 6px; font-family: "STIX Two Math", Georgia, serif; font-style: italic; }
.note-scope a.ref{
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--accent);
    border-bottom: 1px solid var(--accent-100);
    font-weight: 500;
    transition: all 0.15s;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
.note-scope a.ref:hover{
    background: var(--accent-50);
    border-bottom-color: var(--accent);
  }
.note-scope a.ref::before{
    font-family: "Geist Mono", monospace;
    font-size: 0.78em;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
    flex-shrink: 0;
    transform: translateY(-0.1em);
  }
.note-scope a.ref-term::before{
    content: "¶";
    background: var(--accent-50);
    color: var(--accent-700);
  }
.note-scope a.ref-bio{
    color: var(--pink);
    border-bottom-color: var(--pink-soft);
  }
.note-scope a.ref-bio:hover{
    background: var(--pink-soft);
    border-bottom-color: var(--pink);
  }
.note-scope a.ref-bio::before{
    content: "✦";
    background: var(--pink-soft);
    color: var(--pink);
    font-family: "Geist", sans-serif;
    font-weight: 400;
  }
.note-scope a.ref-task{
    color: var(--orange);
    border-bottom-color: var(--orange-soft);
  }
.note-scope a.ref-task:hover{
    background: var(--orange-soft);
    border-bottom-color: var(--orange);
  }
.note-scope a.ref-task::before{
    content: "№";
    background: var(--orange-soft);
    color: var(--orange);
  }
.note-scope a.ref-note{
    color: var(--green);
    border-bottom-color: var(--green-soft);
  }
.note-scope a.ref-note:hover{
    background: var(--green-soft);
    border-bottom-color: var(--green);
  }
.note-scope a.ref-note::before{
    content: "§";
    background: var(--green-soft);
    color: var(--green);
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 600;
  }
.note-scope a.ref-external{
    color: var(--ink-2);
    border-bottom-color: var(--border-strong);
  }
.note-scope a.ref-external:hover{
    background: var(--surface-2);
    border-bottom-color: var(--ink);
  }
.note-scope a.ref-external::after{
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M700-658 223-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l477-477H394q-13 0-21.5-8.5T364-730q0-13 8.5-21.5T394-760h336q13 0 21.5 8.5T760-730v336q0 13-8.5 21.5T730-364q-13 0-21.5-8.5T700-394v-264Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M700-658 223-181q-9 9-21 9t-21-9q-9-9-9-21t9-21l477-477H394q-13 0-21.5-8.5T364-730q0-13 8.5-21.5T394-760h336q13 0 21.5 8.5T760-730v336q0 13-8.5 21.5T730-364q-13 0-21.5-8.5T700-394v-264Z'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--muted);
    margin-left: 2px;
    transform: translateY(-0.1em);
    display: inline-block;
  }
.note-scope a.ref[data-preview]{
    position: relative;
  }
.note-scope a.ref[data-preview]:hover::after,.note-scope a.ref[data-preview]:focus::after{
    content: attr(data-preview);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--ink);
    color: white;
    font-family: "Geist", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    max-width: 260px;
    min-width: 180px;
    width: max-content;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    pointer-events: none;
    border-bottom: none;
  }
.note-scope a.ref-external[data-preview]:hover::after{
    content: attr(data-preview);
  }
.note-scope .quick-test{
    margin: 18px 0;
    border-radius: var(--radius);
    border: 1.5px solid var(--accent-100);
    background: linear-gradient(135deg, var(--paper) 0%, var(--accent-50) 100%);
    overflow: hidden;
  }
.note-scope .qt-head{
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--accent-100);
    display: flex;
    align-items: center;
    gap: 14px;
  }
.note-scope .qt-icon{
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ink);
    color: white;
    display: grid;
    place-items: center;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 18px;
    flex-shrink: 0;
    position: relative;
  }
.note-scope .qt-icon::after{
    content: "";
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--paper);
  }
.note-scope .qt-info{ flex: 1; min-width: 0; }
.note-scope .qt-info .qt-kicker{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-700);
    margin-bottom: 2px;
    font-weight: 600;
  }
.note-scope .qt-info h4{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
.note-scope .qt-info .qt-meta{
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
  }
.note-scope .qt-info .qt-meta b{ color: var(--ink); font-weight: 600; }
.note-scope .qt-progress{
    padding: 12px 20px;
    background: rgba(255,255,255,0.6);
    border-bottom: 1px solid var(--accent-100);
    display: flex;
    align-items: center;
    gap: 14px;
  }
.note-scope .qt-progress .label{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
.note-scope .qt-progress .label b{ color: var(--ink); }
.note-scope .qt-dots{
    display: flex;
    gap: 6px;
    flex: 1;
  }
.note-scope .qt-dot{
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: var(--surface-2);
    position: relative;
    transition: background 0.2s;
  }
.note-scope .qt-dot.correct{ background: var(--green); }
.note-scope .qt-dot.wrong{ background: var(--red); }
.note-scope .qt-dot.current{
    background: var(--accent);
    animation: pulseQt 1.4s infinite ease-in-out;
  }
@keyframes pulseQt{
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
.note-scope .qt-body{
    padding: 20px 22px 22px;
  }
.note-scope .qt-qnum{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
  }
.note-scope .qt-qnum b{ color: var(--accent); }
.note-scope .qt-question{
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
  }
.note-scope .qt-question em{ font-style: italic; color: var(--accent); }
.note-scope .qt-options{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }
.note-scope .qt-opt{
    padding: 11px 14px;
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14.5px;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.15s;
    font-weight: 500;
  }
.note-scope .qt-opt:hover{
    border-color: var(--accent);
    background: var(--accent-50);
  }
.note-scope .qt-opt .marker{
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
  }
.note-scope .qt-opt.selected{
    border-color: var(--accent);
    background: var(--accent-50);
  }
.note-scope .qt-opt.selected .marker{
    background: var(--accent);
    color: white;
  }
.note-scope .qt-opt.answered.correct{
    border-color: var(--green);
    background: var(--green-tint);
  }
.note-scope .qt-opt.answered.correct .marker{
    background: var(--green);
    color: white;
  }
.note-scope .qt-opt.answered.wrong{
    border-color: var(--red);
    background: var(--red-tint);
  }
.note-scope .qt-opt.answered.wrong .marker{
    background: var(--red);
    color: white;
  }
.note-scope .qt-feedback{
    padding: 10px 14px;
    margin: 12px 0;
    background: var(--green-tint);
    border-left: 3px solid var(--green);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--ink-2);
  }
.note-scope .qt-feedback b{ color: var(--green); font-weight: 600; }
.note-scope .qt-feedback.wrong{
    background: var(--red-tint);
    border-color: var(--red);
  }
.note-scope .qt-feedback.wrong b{ color: var(--red); }
.note-scope .qt-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
  }
.note-scope .qt-foot .skip{
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    font-weight: 500;
  }
.note-scope .qt-foot .skip:hover{ color: var(--ink); }
.note-scope .qt-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    background: var(--accent);
    color: white;
    cursor: pointer;
    transition: all 0.15s;
  }
.note-scope .qt-btn:hover{ background: var(--accent-600); }
.note-scope .qt-btn:disabled{
    background: var(--surface-3);
    color: var(--muted-2);
    cursor: not-allowed;
  }
.note-scope .qt-result{
    padding: 22px 24px 24px;
    text-align: center;
  }
.note-scope .qt-result .big-score{
    font-family: "Instrument Serif", serif;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    color: var(--accent);
  }
.note-scope .qt-result .big-score small{
    font-size: 26px;
    color: var(--muted-2);
  }
.note-scope .qt-result .verdict{
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ink-2);
    margin-bottom: 14px;
  }
.note-scope .qt-result .verdict.good{ color: var(--green); }
.note-scope .qt-result .verdict.mid{ color: var(--orange); }
.note-scope .qt-result .verdict.bad{ color: var(--red); }
.note-scope .qt-result .actions{
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
  }
.note-scope .qt-result .btn-mini{
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
  }
.note-scope .qt-result .btn-mini:hover{ background: var(--surface-3); }
.note-scope .qt-result .btn-mini.primary{
    background: var(--ink);
    color: white;
  }
.note-scope .qt-result .btn-mini.primary:hover{ background: var(--accent); }
.note-scope .topbar{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    background: rgba(250, 250, 250, 0.88);
    border-bottom: 1px solid var(--border);
  }
.note-scope .topbar-inner{
    max-width: 1320px;
    margin: 0 auto;
    padding: 13px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
  }
.note-scope .breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    flex: 1;
    min-width: 0;
  }
.note-scope .breadcrumb .logo-tiny{
    width: 26px; height: 26px;
    border-radius: 7px;
    background: var(--ink);
    color: white;
    display: grid;
    place-items: center;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
.note-scope .breadcrumb .logo-tiny::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent), transparent 60%);
    opacity: 0.7;
  }
.note-scope .breadcrumb .logo-tiny span{ position: relative; z-index: 1; }
.note-scope .breadcrumb .sep{ color: var(--muted-2); }
.note-scope .breadcrumb .current{ color: var(--ink); font-weight: 500; }
.note-scope .top-actions{ display: flex; gap: 8px; align-items: center; }
.note-scope .btn{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
  }
.note-scope .btn-ghost{
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--ink-2);
  }
.note-scope .btn-ghost:hover{ background: var(--surface-2); }
.note-scope .btn-primary{
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 14px rgba(114,93,255,0.3);
  }
.note-scope .btn-primary:hover{ background: var(--accent-600); }
.note-scope .layout{
    max-width: 1320px;
    margin: 0 auto;
    padding: 36px 28px 120px;
    display: grid;
    grid-template-columns: 244px 1fr;
    gap: 48px;
    position: relative;
    z-index: 1;
  }
.note-scope .toc{
    position: sticky;
    top: 76px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 8px;
  }
.note-scope .toc::-webkit-scrollbar{ width: 4px; }
.note-scope .toc::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 99px; }
.note-scope .toc-h{
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 14px;
  }
.note-scope .toc ul{
    list-style: none;
    border-left: 1px solid var(--border);
  }
.note-scope .toc ul li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--muted);
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: all 0.15s;
    line-height: 1.3;
  }
.note-scope .toc ul li a:hover{ color: var(--ink); }
.note-scope .toc ul li a.active{
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 600;
  }
.note-scope .toc ul li a .num{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--muted-2);
    font-weight: 500;
  }
.note-scope article{ max-width: 780px; width: 100%; }
.note-scope .hero{
    margin-bottom: 56px;
    padding-bottom: 36px;
    border-bottom: 1px solid var(--border);
  }
.note-scope .hero .kicker{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
.note-scope .hero h1{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    color: var(--ink);
  }
.note-scope .hero h1 em{
    font-style: italic;
    background: linear-gradient(90deg, var(--accent), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.note-scope .hero .lede{
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink-2);
    margin-bottom: 20px;
  }
.note-scope section.guide{
    margin-bottom: 64px;
    padding-top: 12px;
  }
.note-scope section.guide > .head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--ink);
  }
.note-scope section.guide > .head h2{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
.note-scope section.guide > .head h2 .num{
    font-family: "Geist Mono", monospace;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
    letter-spacing: 0.06em;
  }
.note-scope section.guide > .head .descr{
    font-size: 13px;
    color: var(--muted);
    max-width: 40ch;
    text-align: right;
  }
.note-scope section.guide > .sub-h{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-2);
    margin: 28px 0 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }
.note-scope section.guide > .sub-h:first-of-type{ border-top: none; padding-top: 18px; margin-top: 18px; }
.note-scope .demo{
    margin-bottom: 24px;
  }
.note-scope .demo-label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
  }
.note-scope .demo-label .name{
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
  }
.note-scope .demo-label .name b{ color: var(--ink); font-weight: 600; }
.note-scope .data-tag{
    font-family: "Geist Mono", monospace;
    font-size: 10.5px;
    padding: 3px 9px;
    background: var(--ink);
    color: var(--accent-200);
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
.note-scope .data-tag.alt{ background: var(--surface-2); color: var(--accent-700); }
.note-scope .note-header{
    background: linear-gradient(135deg, #1a1530 0%, #2a1f55 35%, var(--accent) 100%);
    color: white;
    border-radius: 22px;
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
  }
.note-scope .note-header::before{
    content: "";
    position: absolute;
    top: -80px; right: -50px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
  }
.note-scope .note-header::after{
    content: "";
    position: absolute;
    bottom: -100px; left: 100px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,184,0,0.25), transparent 70%);
  }
.note-scope .note-header > *{ position: relative; }
.note-scope .note-header .topic-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px 4px 8px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 14px;
  }
.note-scope .note-header .topic-pill .dot{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
  }
.note-scope .note-header h1{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: white;
  }
.note-scope .note-header h1 em{ font-style: italic; color: #ffd966; }
.note-scope .note-header .sub{
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 17px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 22px;
  }
.note-scope .note-header .meta-row{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.18);
    font-size: 13px;
  }
.note-scope .note-header .meta-row .item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.8);
  }
.note-scope .note-header .meta-row .item b{ color: white; font-weight: 600; }
.note-scope .note-header .meta-row svg{ opacity: 0.6; }
.note-scope .demo.proseDemo h2.example{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 16px 0 12px;
  }
.note-scope .demo.proseDemo h3.example{
    font-family: "Geist", sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 14px 0 8px;
  }
.note-scope .demo.proseDemo h4.example{
    font-family: "Geist", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    margin: 12px 0 6px;
  }
.note-scope .demo.proseDemo p{
    margin-bottom: 12px;
    color: var(--ink-body);
  }
.note-scope .demo.proseDemo .lede-example{
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ink-2);
  }
.note-scope .epigraph{
    margin: 18px 0;
    padding: 16px 20px 16px 24px;
    border-left: 3px solid var(--accent);
    background: var(--accent-50);
    border-radius: 0 var(--radius) var(--radius) 0;
    position: relative;
  }
.note-scope .epigraph::before{
    content: "❝";
    position: absolute;
    top: 4px; left: 10px;
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    color: var(--accent-200);
    line-height: 1;
  }
.note-scope .epigraph p{
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 8px;
    padding-left: 24px;
  }
.note-scope .epigraph .source{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    padding-left: 24px;
  }
.note-scope .epigraph .source b{ color: var(--ink); font-weight: 600; }
.note-scope .epigraph .source::before{ content: "—"; }
.note-scope .demo.proseDemo a.linked{
    color: var(--accent);
    border-bottom: 1px solid var(--accent-100);
    font-weight: 500;
  }
.note-scope .demo.proseDemo a.linked:hover{ background: var(--accent-50); }
.note-scope .callout{
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius);
    border-left: 3px solid;
  }
.note-scope .callout .ic{
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 16px;
    font-weight: 600;
  }
.note-scope .callout .body{ flex: 1; min-width: 0; }
.note-scope .callout .title{
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
.note-scope .callout p{ margin-bottom: 6px; font-size: 14.5px; }
.note-scope .callout p:last-child{ margin-bottom: 0; }
.note-scope .callout.theorem{ background: var(--accent-50); border-color: var(--accent); }
.note-scope .callout.theorem .ic{ background: var(--accent); color: white; }
.note-scope .callout.theorem .title{ color: var(--accent-700); }
.note-scope .callout.definition{ background: var(--blue-tint); border-color: var(--blue); }
.note-scope .callout.definition .ic{ background: var(--blue-soft); color: var(--blue); }
.note-scope .callout.definition .title{ color: var(--blue); }
.note-scope .callout.warn{ background: var(--red-tint); border-color: var(--red); }
.note-scope .callout.warn .ic{ background: var(--red-soft); color: var(--red); }
.note-scope .callout.warn .title{ color: var(--red); }
.note-scope .callout.tip{ background: var(--green-tint); border-color: var(--green); }
.note-scope .callout.tip .ic{ background: var(--green-soft); color: var(--green); }
.note-scope .callout.tip .title{ color: var(--green); }
.note-scope .callout.example{ background: var(--yellow-tint); border-color: var(--yellow); }
.note-scope .callout.example .ic{ background: var(--yellow-soft); color: #946d00; }
.note-scope .callout.example .title{ color: #946d00; }
.note-scope .callout.note{ background: var(--surface-2); border-color: var(--muted-2); }
.note-scope .callout.note .ic{ background: var(--surface-3); color: var(--muted); }
.note-scope .callout.note .title{ color: var(--muted); }
.note-scope .callout.history{ background: var(--brown-soft); border-color: var(--brown); }
.note-scope .callout.history .ic{ background: var(--brown); color: white; }
.note-scope .callout.history .title{ color: var(--brown); }
.note-scope .callout.remember{ background: var(--ink); color: white; border-color: var(--accent); }
.note-scope .callout.remember .ic{ background: var(--accent); color: white; }
.note-scope .callout.remember .title{ color: var(--accent-200); }
.note-scope .formula-block{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 28px;
    margin: 16px 0;
    background: linear-gradient(135deg, #fbfbfd 0%, #f1eeff 100%);
    border: 1px solid var(--accent-100);
    border-radius: var(--radius);
    font-family: "STIX Two Math", "Cambria Math", Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
    position: relative;
  }
.note-scope .formula-block .label{
    position: absolute;
    top: 10px; left: 14px;
    font-family: "Instrument Serif", serif;
    font-size: 12px;
    font-style: italic;
    color: var(--accent);
    opacity: 0.7;
    letter-spacing: 0.02em;
  }
.note-scope .formula-block .number{
    position: absolute;
    bottom: 10px; right: 14px;
    font-family: "Geist Mono", monospace;
    font-style: normal;
    font-size: 11px;
    color: var(--muted);
  }
.note-scope .formula-block .lim{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 17px;
    margin-right: 6px;
  }
.note-scope .formula-block .lim .lim-top{ font-size: 13px; font-style: normal; font-family: "Geist", sans-serif; font-weight: 500; }
.note-scope .formula-block .lim .lim-bot{ font-size: 12px; }
.note-scope .formula-block .frac{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0 4px;
    vertical-align: middle;
  }
.note-scope .formula-block .frac > span:first-child{ border-bottom: 1.5px solid currentColor; padding: 0 8px 2px; }
.note-scope .formula-block .frac > span:last-child{ padding: 2px 8px 0; }
.note-scope .derivation{
    margin: 16px 0;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
.note-scope .derivation .step{
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
  }
.note-scope .derivation .step:last-child{ border-bottom: none; }
.note-scope .derivation .step .n{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    background: var(--surface-2);
    border-radius: 50%;
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
  }
.note-scope .derivation .step .content{
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
.note-scope .derivation .step .why{
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
  }
.note-scope .derivation .step .eq{
    font-family: "STIX Two Math", serif;
    font-style: italic;
    font-size: 16px;
    color: var(--ink);
  }
.note-scope ul.lst,.note-scope ol.lst{
    margin: 12px 0;
    padding-left: 22px;
  }
.note-scope ul.lst li,.note-scope ol.lst li{
    margin-bottom: 6px;
    padding-left: 6px;
  }
.note-scope ul.lst li::marker{
    color: var(--accent);
    font-weight: 700;
  }
.note-scope ol.lst li::marker{
    font-family: "Instrument Serif", serif;
    font-style: italic;
    color: var(--accent);
    font-size: 16px;
  }
.note-scope ol.lst-fancy{
    counter-reset: f;
    list-style: none;
    padding-left: 0;
    margin: 14px 0;
  }
.note-scope ol.lst-fancy > li{
    counter-increment: f;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    margin-bottom: 8px;
    padding-left: 0;
    align-items: baseline;
  }
.note-scope ol.lst-fancy > li::before{
    content: counter(f);
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--accent);
    line-height: 1;
    text-align: center;
  }
.note-scope ul.checklist{
    list-style: none;
    margin: 12px 0;
    padding-left: 0;
  }
.note-scope ul.checklist li{
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
  }
.note-scope ul.checklist li::before{
    content: "";
    display: block;
    flex-shrink: 0;
    width: 18px;
    height: 1.45em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z'/%3E%3C/svg%3E") center / 14px no-repeat;
    color: var(--green);
  }
.note-scope ul.checklist li.no::before{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-438 270-228q-9 9-21 9t-21-9q-9-9-9-21t9-21l210-210-210-210q-9-9-9-21t9-21q9-9 21-9t21 9l210 210 210-210q9-9 21-9t21 9q9 9 9 21t-9 21L522-480l210 210q9 9 9 21t-9 21q-9 9-21 9t-21-9L480-438Z'/%3E%3C/svg%3E") center / 14px no-repeat;
    color: var(--red);
  }
.note-scope .table-wrap{
    margin: 16px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--paper);
    overflow: hidden;
  }
.note-scope table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
  }
.note-scope thead{ background: var(--surface-2); }
.note-scope th{
    text-align: left;
    padding: 11px 16px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
  }
.note-scope td{
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
  }
.note-scope tr:last-child td{ border-bottom: none; }
.note-scope tr:hover td{ background: var(--surface-2); }
.note-scope td.tnum,.note-scope th.tnum{ font-variant-numeric: tabular-nums; font-family: "Geist Mono", monospace; font-size: 13px; }
.note-scope td .m{ color: var(--ink); font-size: 16px; }
.note-scope td .accent{ color: var(--accent); font-weight: 600; }
.note-scope .compare-tbl td.yes{ background: var(--green-tint); color: var(--green); font-weight: 600; text-align: center; }
.note-scope .compare-tbl td.no{ background: var(--red-tint); color: var(--red); font-weight: 600; text-align: center; }
.note-scope .compare-tbl td.maybe{ background: var(--yellow-tint); color: #946d00; font-weight: 600; text-align: center; }
.note-scope .figure{
    margin: 18px 0;
    padding: 22px 18px 14px;
    background: linear-gradient(135deg, #fbfbfd 0%, #f3f1fb 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
  }
.note-scope .figure svg{ max-width: 100%; height: auto; }
.note-scope .figure figcaption{
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    font-family: "Geist Mono", monospace;
    letter-spacing: 0.03em;
  }
.note-scope .figure-multi{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
  }
.note-scope .figure-multi .sub-fig{
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
.note-scope .figure-multi .sub-fig small{
    display: block;
    margin-top: 4px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    color: var(--muted);
  }
.note-scope .photo-card{
    margin: 16px 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--border);
  }
.note-scope .photo-card .img-ph{
    aspect-ratio: 16/9;
    background:
      linear-gradient(135deg, #d4cfff 0%, #f4d4e8 50%, #ffe4cf 100%);
    position: relative;
    display: grid;
    place-items: center;
  }
.note-scope .photo-card .img-ph::after{
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M479.5-267q72.5 0 121.5-49t49-121.5q0-72.5-49-121T479.5-607q-72.5 0-121 48.5t-48.5 121q0 72.5 48.5 121.5t121 49Zm0-60q-47.5 0-78.5-31.5t-31-79q0-47.5 31-78.5t78.5-31q47.5 0 79 31t31.5 78.5q0 47.5-31.5 79t-79 31.5ZM140-120q-24 0-42-18t-18-42v-513q0-23 18-41.5t42-18.5h147l55-66q8-11 20-16t26-5h184q14 0 26 5t20 16l55 66h147q23 0 41.5 18.5T880-693v513q0 24-18.5 42T820-120H140Zm0-60h680v-513H645l-73-87H388l-73 87H140v513Zm340-257Z'/%3E%3C/svg%3E") center / 40px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M479.5-267q72.5 0 121.5-49t49-121.5q0-72.5-49-121T479.5-607q-72.5 0-121 48.5t-48.5 121q0 72.5 48.5 121.5t121 49Zm0-60q-47.5 0-78.5-31.5t-31-79q0-47.5 31-78.5t78.5-31q47.5 0 79 31t31.5 78.5q0 47.5-31.5 79t-79 31.5ZM140-120q-24 0-42-18t-18-42v-513q0-23 18-41.5t42-18.5h147l55-66q8-11 20-16t26-5h184q14 0 26 5t20 16l55 66h147q23 0 41.5 18.5T880-693v513q0 24-18.5 42T820-120H140Zm0-60h680v-513H645l-73-87H388l-73 87H140v513Zm340-257Z'/%3E%3C/svg%3E") center / 40px no-repeat;
    color: var(--muted);
    opacity: 0.4;
  }
.note-scope .photo-card .img-ph .ph-label{
    position: absolute;
    bottom: 12px; left: 12px;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(0,0,0,0.4);
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);
    padding: 3px 8px;
    border-radius: 4px;
  }
.note-scope .photo-card .photo-caption{
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
  }
.note-scope .photo-card .photo-caption b{ color: var(--ink); font-weight: 600; }
.note-scope .spoiler{
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    overflow: hidden;
  }
.note-scope .spoiler summary{
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    transition: background 0.15s;
  }
.note-scope .spoiler summary::-webkit-details-marker{ display: none; }
.note-scope .spoiler summary::before{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-258v-450q0-14 9-22t21-8q4 0 8 1t8 3l354 226q7 5 10.5 11t3.5 14q0 8-3.5 14T720-458L366-232q-4 2-8 3t-8 1q-12 0-21-8t-9-22Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-258v-450q0-14 9-22t21-8q4 0 8 1t8 3l354 226q7 5 10.5 11t3.5 14q0 8-3.5 14T720-458L366-232q-4 2-8 3t-8 1q-12 0-21-8t-9-22Z'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--accent);
    transition: transform 0.2s;
  }
.note-scope .spoiler[open] summary::before{ transform: rotate(90deg); }
.note-scope .spoiler summary:hover{ background: var(--surface-2); }
.note-scope .spoiler summary .badge{
    margin-left: auto;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    color: var(--muted);
    font-weight: 500;
    padding: 2px 8px;
    background: var(--surface-2);
    border-radius: 4px;
  }
.note-scope .spoiler .content{
    padding: 6px 18px 18px;
    font-size: 14.5px;
    line-height: 1.55;
    border-top: 1px solid var(--border);
  }
.note-scope .spoiler .content p{ margin-top: 12px; margin-bottom: 8px; }
.note-scope .quiz{
    margin: 18px 0;
    padding: 22px 26px;
    background: var(--ink);
    color: white;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
  }
.note-scope .quiz::after{
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  }
.note-scope .quiz .q-kicker{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-200);
    margin-bottom: 6px;
    position: relative;
  }
.note-scope .quiz h4{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 14px;
    color: white;
    position: relative;
  }
.note-scope .quiz .options{
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
  }
.note-scope .quiz .opt{
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    font-size: 14px;
    text-align: left;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.15s;
  }
.note-scope .quiz .opt:hover{ background: rgba(255,255,255,0.12); }
.note-scope .quiz .opt .marker{
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.3);
    display: grid;
    place-items: center;
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
  }
.note-scope .quiz .opt.correct{ background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4); }
.note-scope .quiz .opt.correct .marker{ background: var(--green); color: white; border-color: var(--green); }
.note-scope .quiz .opt.wrong{ background: rgba(239,59,59,0.12); border-color: rgba(239,59,59,0.4); }
.note-scope .quiz .opt.wrong .marker{ background: var(--red); color: white; border-color: var(--red); }
.note-scope .fill{
    margin: 14px 0;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.7;
  }
.note-scope .fill .blank{
    display: inline-block;
    min-width: 80px;
    padding: 2px 10px;
    margin: 0 2px;
    border: 1.5px dashed var(--accent);
    border-radius: 6px;
    background: var(--accent-50);
    color: var(--accent-700);
    font-family: "Geist Mono", monospace;
    font-weight: 500;
    text-align: center;
  }
.note-scope .fill .blank.empty{
    background: transparent;
    color: var(--muted-2);
  }
.note-scope .matching{
    margin: 14px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
.note-scope .matching .col h5{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 6px;
  }
.note-scope .matching .item{
    padding: 9px 12px;
    background: var(--paper);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
.note-scope .matching .item.linked-left{ border-color: var(--accent); background: var(--accent-50); }
.note-scope .matching .item.linked-right{ border-color: var(--accent); background: var(--accent-50); }
.note-scope .matching .item .key{
    font-family: "Geist Mono", monospace;
    font-weight: 700;
    color: var(--accent);
  }
.note-scope .flashcard{
    margin: 16px 0;
    perspective: 1000px;
  }
.note-scope .flashcard .fc-inner{
    background: linear-gradient(135deg, #f1eeff 0%, #fce7f3 100%);
    border: 1px solid var(--accent-100);
    border-radius: var(--radius);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
  }
.note-scope .flashcard .fc-inner::before{
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255,255,255,0.5), transparent 70%);
  }
.note-scope .flashcard .fc-kicker{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-700);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }
.note-scope .flashcard .fc-kicker .pip{
    width: 16px; height: 16px;
    border-radius: 4px;
    background: var(--accent);
    color: white;
    display: grid;
    place-items: center;
    font-size: 10px;
  }
.note-scope .flashcard .front{
    font-family: "Instrument Serif", serif;
    font-size: 26px;
    line-height: 1.2;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    position: relative;
  }
.note-scope .flashcard .back{
    font-size: 14.5px;
    color: var(--ink-2);
    padding-top: 12px;
    border-top: 1px dashed var(--accent-200);
    position: relative;
  }
.note-scope .flashcard .back b{ color: var(--accent-700); font-weight: 600; }
.note-scope .flashcard .fc-actions{
    display: flex;
    gap: 8px;
    margin-top: 14px;
    position: relative;
  }
.note-scope .flashcard .fc-btn{
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }
.note-scope .fc-btn.again{ background: var(--red-soft); color: var(--red); }
.note-scope .fc-btn.hard{ background: var(--yellow-soft); color: #946d00; }
.note-scope .fc-btn.good{ background: var(--green-soft); color: var(--green); }
.note-scope .fc-btn.easy{ background: var(--ink); color: white; }
.note-scope .sentence-parse{
    margin: 14px 0;
    padding: 20px 22px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
.note-scope .sentence-parse .label-row{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 10px;
    font-weight: 600;
  }
.note-scope .sentence-parse .sentence{
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 4px;
  }
.note-scope .sentence-parse .marks{
    font-family: "Geist Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    color: var(--accent-700);
  }
.note-scope .word-tag{
    border-bottom: 2px solid;
    padding: 0 1px;
    position: relative;
    cursor: help;
  }
.note-scope .word-tag.subj{ border-color: var(--accent); }
.note-scope .word-tag.pred{ border-color: var(--red); border-bottom-style: double; border-bottom-width: 4px; }
.note-scope .word-tag.obj{ border-color: var(--green); border-bottom-style: dashed; }
.note-scope .word-tag.adv{ border-color: var(--blue); border-bottom-style: dotted; border-bottom-width: 3px; }
.note-scope .word-tag.def{ border-color: var(--orange); border-bottom-style: wavy; }
.note-scope .parse-legend{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--muted);
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
.note-scope .parse-legend .li{
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
.note-scope .parse-legend .li::before{
    content: "";
    display: inline-block;
    width: 14px;
    border-bottom: 2px solid;
  }
.note-scope .parse-legend .li.subj::before{ border-color: var(--accent); }
.note-scope .parse-legend .li.pred::before{ border-color: var(--red); border-bottom-style: double; border-bottom-width: 4px; }
.note-scope .parse-legend .li.obj::before{ border-color: var(--green); border-bottom-style: dashed; }
.note-scope .parse-legend .li.adv::before{ border-color: var(--blue); border-bottom-style: dotted; border-bottom-width: 3px; }
.note-scope .parse-legend .li.def::before{ border-color: var(--orange); border-bottom-style: wavy; }
.note-scope .morph{
    display: inline-flex;
    align-items: baseline;
    font-family: "Instrument Serif", serif;
    font-size: 36px;
    margin: 16px 0;
    padding: 14px 20px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    gap: 2px;
    line-height: 1;
  }
.note-scope .morph .prefix{ color: var(--accent); border-top: 2px solid var(--accent); padding-top: 4px; }
.note-scope .morph .root{
    color: var(--ink);
    position: relative;
    padding: 4px;
  }
.note-scope .morph .root::before,.note-scope .morph .root::after{
    content: "";
    position: absolute;
    border: 2px solid var(--red);
    width: 8px; height: 12px;
    bottom: -4px;
  }
.note-scope .morph .root::before{ left: 0; border-right: none; border-top: none; }
.note-scope .morph .root::after{ right: 0; border-left: none; border-top: none; }
.note-scope .morph .suffix{ color: var(--green); border-top: 2px solid var(--green); padding-top: 4px; border-right: 2px solid var(--green); padding-right: 3px; }
.note-scope .morph .end{ color: var(--orange); border: 2px solid var(--orange); padding: 1px 4px; border-radius: 4px; font-size: 28px; }
.note-scope .bio-card{
    display: flex;
    gap: 18px;
    margin: 18px 0;
    padding: 20px 22px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
.note-scope .bio-card .portrait{
    width: 80px; height: 100px;
    flex-shrink: 0;
    background:
      linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.3)),
      linear-gradient(135deg, #d4cfff, #f4d4e8);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }
.note-scope .bio-card .portrait::after{
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M372-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42ZM160-220v-34q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5T731-360q31 14 50 41t19 65v34q0 25-17.5 42.5T740-160H220q-25 0-42.5-17.5T160-220Z'/%3E%3C/svg%3E") center / 36px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M372-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42ZM160-220v-34q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5T731-360q31 14 50 41t19 65v34q0 25-17.5 42.5T740-160H220q-25 0-42.5-17.5T160-220Z'/%3E%3C/svg%3E") center / 36px no-repeat;

    opacity: 0.4;
  }
.note-scope .bio-card .info{ flex: 1; }
.note-scope .bio-card .name{
    font-family: "Instrument Serif", serif;
    font-size: 24px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
  }
.note-scope .bio-card .years{
    font-family: "Geist Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
  }
.note-scope .bio-card .descr{
    font-size: 13px;
    color: var(--ink-body);
    margin-bottom: 10px;
  }
.note-scope .bio-card .works{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
.note-scope .bio-card .work{
    font-size: 11px;
    padding: 2px 8px;
    background: var(--accent-50);
    color: var(--accent-700);
    border-radius: 5px;
    font-weight: 600;
  }
.note-scope .lit-quote{
    margin: 16px 0;
    padding: 18px 24px;
    background: var(--paper);
    border-left: 3px solid var(--ink);
    border-radius: 0 var(--radius) var(--radius) 0;
  }
.note-scope .lit-quote .text{
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ink);
    margin-bottom: 10px;
    quotes: "«" "»";
  }
.note-scope .lit-quote .text::before{ content: open-quote; }
.note-scope .lit-quote .text::after{ content: close-quote; }
.note-scope .lit-quote .ref{
    font-size: 12px;
    color: var(--muted);
  }
.note-scope .lit-quote .ref b{ color: var(--ink); font-weight: 600; font-style: italic; font-family: "Instrument Serif", serif; font-size: 14px; }
.note-scope .units-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 14px 0;
  }
.note-scope .unit-card{
    padding: 12px 14px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
  }
.note-scope .unit-card .sym{
    font-family: "STIX Two Math", serif;
    font-style: italic;
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 4px;
  }
.note-scope .unit-card .name{
    font-size: 12px;
    color: var(--ink);
    font-weight: 600;
  }
.note-scope .unit-card .un{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }
.note-scope .chem-eq{
    margin: 14px 0;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-family: "STIX Two Math", "Cambria Math", Georgia, serif;
    font-size: 22px;
    overflow-x: auto;
  }
.note-scope .chem-eq sub{ font-size: 0.7em; font-style: normal; }
.note-scope .chem-eq sup{ font-size: 0.7em; font-style: normal; }
.note-scope .chem-eq .arrow{
    display: inline-block;
    margin: 0 12px;
    font-family: "Geist", sans-serif;
    font-style: normal;
    font-size: 18px;
    color: var(--accent);
    vertical-align: middle;
  }
.note-scope .chem-eq .arrow-up{ vertical-align: super; font-size: 0.5em; }
.note-scope .chem-eq small{
    display: block;
    margin-top: 8px;
    font-family: "Geist", sans-serif;
    font-style: normal;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
.note-scope .timeline{
    margin: 18px 0;
    position: relative;
    padding-left: 32px;
  }
.note-scope .timeline::before{
    content: "";
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), var(--accent-100));
  }
.note-scope .tl-event{
    position: relative;
    padding: 8px 0 14px;
  }
.note-scope .tl-event::before{
    content: "";
    position: absolute;
    left: -25px;
    top: 12px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--paper);
    box-shadow: 0 0 0 1px var(--accent);
  }
.note-scope .tl-event .year{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
    letter-spacing: 0.04em;
  }
.note-scope .tl-event .title{
    font-family: "Instrument Serif", serif;
    font-size: 17px;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 4px;
  }
.note-scope .tl-event .descr{
    font-size: 13px;
    color: var(--muted);
  }
.note-scope .code-block{
    margin: 14px 0;
    background: #0a0a0f;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
  }
.note-scope .code-block .code-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
.note-scope .code-block .code-head .lang{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--accent-200);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.note-scope .code-block .code-head .actions{
    display: flex;
    gap: 6px;
  }
.note-scope .code-block .code-head .copy-btn{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    padding: 3px 10px;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 5px;
    cursor: pointer;
  }
.note-scope .code-block pre{
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    font-family: "Geist Mono", "JetBrains Mono", monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #d4d4d4;
  }
.note-scope .code-block .kw{ color: #c084fc; }
.note-scope .code-block .fn{ color: #fbbf24; }
.note-scope .code-block .str{ color: #86efac; }
.note-scope .code-block .num{ color: #f87171; }
.note-scope .code-block .cm{ color: #6b7280; font-style: italic; }
.note-scope .code-block .ln{
    display: inline-block;
    width: 24px;
    color: rgba(255,255,255,0.25);
    user-select: none;
    text-align: right;
    padding-right: 12px;
  }
.note-scope code.inline{
    font-family: "Geist Mono", monospace;
    font-size: 0.92em;
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--accent-700);
  }
.note-scope .bio-cycle{
    margin: 18px 0;
    padding: 24px;
    background: linear-gradient(135deg, #f0faf4 0%, #ccfbf1 100%);
    border-radius: var(--radius);
    border: 1px solid var(--green-soft);
  }
.note-scope .bio-cycle svg{ display: block; margin: 0 auto; max-width: 100%; height: auto; }
.note-scope .bio-cycle .cap{
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    font-family: "Geist Mono", monospace;
    letter-spacing: 0.03em;
  }
.note-scope .file-att{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.15s;
  }
.note-scope .file-att:hover{
    border-color: var(--accent-100);
    box-shadow: var(--shadow-sm);
  }
.note-scope .file-att .ic-file{
    width: 44px; height: 52px;
    flex-shrink: 0;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: white;
    position: relative;
    text-transform: uppercase;
  }
.note-scope .file-att .ic-file::before{
    content: "";
    position: absolute;
    top: 0; right: 0;
    border-style: solid;
    border-width: 0 9px 9px 0;
    border-color: transparent rgba(255,255,255,0.5) transparent transparent;
  }
.note-scope .ic-file.pdf{ background: #e44; }
.note-scope .ic-file.doc{ background: #2a8eff; }
.note-scope .ic-file.xls{ background: #1aae5b; }
.note-scope .ic-file.ppt{ background: #ff7a1a; }
.note-scope .ic-file.zip{ background: #946d00; }
.note-scope .ic-file.data{ background: #6d28d9; }
.note-scope .ic-file.image{ background: #ff4d8d; }
.note-scope .ic-file.txt{ background: #4a4a52; }
.note-scope .file-att .body{
    flex: 1;
    min-width: 0;
  }
.note-scope .file-att .body .name{
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.note-scope .file-att .body .meta{
    font-size: 12px;
    color: var(--muted);
    display: flex;
    gap: 10px;
  }
.note-scope .file-att .body .meta .dot{
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--muted-2);
    align-self: center;
  }
.note-scope .file-att .download-btn{
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
  }
.note-scope .file-att .download-btn:hover{
    background: var(--accent);
    color: white;
  }
.note-scope .audio-player{
    margin: 14px 0;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--paper) 0%, var(--accent-50) 100%);
    border: 1px solid var(--accent-100);
    border-radius: var(--radius);
  }
.note-scope .audio-player .player-row{
    display: flex;
    align-items: center;
    gap: 14px;
  }
.note-scope .audio-player .play-btn{
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
  }
.note-scope .audio-player .play-btn:hover{ background: var(--accent); }
.note-scope .audio-player .play-btn::before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
  }
.note-scope .audio-player .play-btn.playing::before{
    content: "";
    width: 10px;
    height: 12px;
    border: none;
    margin-left: 0;
    background:
      linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px);
  }
.note-scope .audio-player .meta{
    flex: 1;
    min-width: 0;
  }
.note-scope .audio-player .meta .title{
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
  }
.note-scope .audio-player .meta .sub{
    font-size: 12px;
    color: var(--muted);
  }
.note-scope .audio-player .waveform-bars{
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    margin-top: 8px;
  }
.note-scope .audio-player .waveform-bars .b{
    flex: 1;
    background: var(--accent-200);
    border-radius: 99px;
    min-width: 2px;
  }
.note-scope .audio-player .waveform-bars .b.played{ background: var(--accent); }
.note-scope .audio-player .time{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--muted);
    margin-left: 6px;
    flex-shrink: 0;
  }
.note-scope .audio-player .time b{ color: var(--accent); font-weight: 600; }
.note-scope .audio-player .speed-pill{
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--paper);
    border: 1px solid var(--border);
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
  }
.note-scope .att-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 14px 0;
  }
.note-scope .att-grid .file-att{
    margin: 0;
  }
.note-scope .struct-formula{
    margin: 14px 0;
    padding: 22px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
  }
.note-scope .struct-formula svg{
    max-width: 100%;
    height: auto;
  }
.note-scope .struct-formula .cap{
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
    font-family: "Geist Mono", monospace;
    letter-spacing: 0.03em;
  }
.note-scope .struct-formula .cap b{
    color: var(--ink);
    font-weight: 600;
    font-family: "STIX Two Math", serif;
    font-style: italic;
    font-size: 13px;
  }
.note-scope .element-card{
    margin: 14px 0;
    width: 180px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--accent-50) 0%, #e0e7ff 100%);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    color: var(--ink);
  }
.note-scope .element-card .num-top{
    font-family: "Geist Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-700);
  }
.note-scope .element-card .mass{
    margin-left: auto;
    font-family: "STIX Two Math", serif;
    font-style: italic;
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
    text-align: right;
  }
.note-scope .element-card .top-row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
.note-scope .element-card .symbol{
    font-family: "Instrument Serif", serif;
    font-size: 60px;
    line-height: 1;
    margin: 12px 0 6px;
    letter-spacing: -0.02em;
    text-align: center;
    flex: 1;
    display: grid;
    place-items: center;
  }
.note-scope .element-card .name{
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--ink);
  }
.note-scope .element-card .config{
    margin-top: 6px;
    font-family: "Geist Mono", monospace;
    font-size: 9.5px;
    text-align: center;
    color: var(--muted);
  }
.note-scope .e-config{
    margin: 14px 0;
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    overflow-x: auto;
  }
.note-scope .e-config .label{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 10px;
  }
.note-scope .e-config .shells{
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: "STIX Two Math", serif;
    font-size: 22px;
    font-style: italic;
  }
.note-scope .e-config .shell{
    padding: 4px 10px;
    border-radius: 8px;
    color: var(--ink);
    font-weight: 500;
  }
.note-scope .e-config .shell sup{
    font-style: normal;
    font-family: "Geist", sans-serif;
    font-size: 0.62em;
    font-weight: 600;
    color: var(--accent-700);
    margin-left: 1px;
  }
.note-scope .e-config .shell-1{ background: var(--accent-50); }
.note-scope .e-config .shell-2{ background: var(--blue-soft); }
.note-scope .e-config .shell-2 sup{ color: var(--blue); }
.note-scope .e-config .shell-3{ background: var(--green-soft); }
.note-scope .e-config .shell-3 sup{ color: var(--green); }
.note-scope .e-config .shell-4{ background: var(--orange-soft); }
.note-scope .e-config .shell-4 sup{ color: var(--orange); }
.note-scope .e-config .legend{
    margin-top: 12px;
    font-size: 11px;
    color: var(--muted);
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    font-family: "Geist", sans-serif;
    font-style: normal;
  }
.note-scope .reaction-scheme{
    margin: 16px 0;
    padding: 22px 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
  }
.note-scope .reaction-scheme .chain{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100%;
    font-family: "STIX Two Math", "Cambria Math", Georgia, serif;
    font-size: 19px;
    flex-wrap: wrap;
  }
.note-scope .reaction-scheme .substance{
    padding: 6px 12px;
    background: var(--surface-2);
    border-radius: 8px;
    white-space: nowrap;
  }
.note-scope .reaction-scheme .substance.start{ background: var(--accent-50); color: var(--accent-700); font-weight: 500; }
.note-scope .reaction-scheme .substance.target{ background: var(--green-soft); color: var(--green); font-weight: 600; }
.note-scope .reaction-scheme .substance sub{
    font-size: 0.7em;
    font-style: normal;
  }
.note-scope .reaction-scheme .arrow{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: "Geist", sans-serif;
    font-style: normal;
    font-size: 10px;
    color: var(--muted);
    min-width: 70px;
  }
.note-scope .reaction-scheme .arrow .cond-up{
    color: var(--accent);
    font-style: italic;
    font-family: "STIX Two Math", serif;
    font-size: 12px;
    margin-bottom: -2px;
  }
.note-scope .reaction-scheme .arrow .line{
    width: 100%;
    height: 12px;
    border-bottom: 1.5px solid var(--ink);
    position: relative;
  }
.note-scope .reaction-scheme .arrow .line::after{
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 8px solid var(--ink);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
.note-scope .reaction-scheme .arrow .cond-down{
    color: var(--muted);
    font-size: 10px;
    margin-top: -2px;
  }
.note-scope .reaction-scheme .cap{
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    font-family: "Geist Mono", monospace;
  }
.note-scope .punnett{
    margin: 16px 0;
    padding: 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
.note-scope .punnett .pn-header{
    text-align: center;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--muted);
  }
.note-scope .punnett .pn-header b{
    font-family: "Instrument Serif", serif;
    font-size: 17px;
    font-style: italic;
    color: var(--ink);
    margin: 0 6px;
  }
.note-scope .punnett-grid{
    display: grid;
    grid-template-columns: 60px repeat(2, 1fr);
    gap: 0;
    max-width: 360px;
    margin: 0 auto;
    border: 2px solid var(--ink);
    border-radius: 8px;
    overflow: hidden;
  }
.note-scope .punnett-grid .pn-cell{
    aspect-ratio: 1.4;
    display: grid;
    place-items: center;
    font-family: "Geist Mono", monospace;
    font-size: 18px;
    font-weight: 700;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
.note-scope .punnett-grid .pn-cell:nth-child(3n){ border-right: none; }
.note-scope .punnett-grid .pn-cell.bottom{ border-bottom: none; }
.note-scope .punnett-grid .pn-cell.corner{ background: var(--ink); color: white; font-size: 14px; }
.note-scope .punnett-grid .pn-cell.label-x{ background: var(--accent-50); color: var(--accent-700); }
.note-scope .punnett-grid .pn-cell.label-y{ background: var(--pink-soft); color: var(--pink); }
.note-scope .punnett-grid .pn-cell.geno-aa{ background: var(--green-tint); color: var(--green); }
.note-scope .punnett-grid .pn-cell.geno-Aa{ background: var(--accent-50); color: var(--accent-700); }
.note-scope .punnett-grid .pn-cell.geno-AA{ background: var(--accent-50); color: var(--accent-700); font-weight: 700; }
.note-scope .punnett .legend{
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
  }
.note-scope .punnett .legend b{ color: var(--ink); font-weight: 600; }
.note-scope .truth-table{
    margin: 14px 0;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    max-width: 480px;
  }
.note-scope .truth-table table{
    width: 100%;
    border-collapse: collapse;
    font-family: "Geist Mono", monospace;
    font-size: 14px;
    text-align: center;
  }
.note-scope .truth-table th{
    padding: 10px;
    background: var(--ink);
    color: white;
    font-weight: 700;
    border-right: 1px solid rgba(255,255,255,0.15);
    font-size: 13px;
  }
.note-scope .truth-table th:last-child{ border-right: none; }
.note-scope .truth-table th.result{ background: var(--accent); }
.note-scope .truth-table td{
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
.note-scope .truth-table td:last-child{ border-right: none; }
.note-scope .truth-table tr:last-child td{ border-bottom: none; }
.note-scope .truth-table .v0{ color: var(--muted); }
.note-scope .truth-table .v1{ color: var(--ink); }
.note-scope .truth-table .res{
    background: var(--accent-50);
    color: var(--accent-700);
    font-weight: 700;
  }
.note-scope .word-card{
    margin: 14px 0;
    padding: 16px 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 3px solid var(--blue);
  }
.note-scope .word-card .wc-top{
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
.note-scope .word-card .word{
    font-family: "Instrument Serif", serif;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
.note-scope .word-card .ipa{
    font-family: "STIX Two Math", "Charis SIL", serif;
    font-style: normal;
    font-size: 18px;
    color: var(--blue);
    padding: 2px 9px;
    background: var(--blue-soft);
    border-radius: 6px;
  }
.note-scope .word-card .pos{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 4px;
  }
.note-scope .word-card .audio-mini{
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--blue);
    color: white;
    display: grid;
    place-items: center;
    cursor: pointer;
  }
.note-scope .word-card .audio-mini::before{
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 2px;
  }
.note-scope .word-card .translation{
    font-size: 14px;
    color: var(--ink-body);
    margin-bottom: 6px;
  }
.note-scope .word-card .example{
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
  }
.note-scope .irreg-verb{
    margin: 14px 0;
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
.note-scope .irreg-verb .verb-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    text-align: center;
  }
.note-scope .irreg-verb .verb-cell{
    padding: 10px 8px;
    background: var(--surface-2);
    border-radius: 8px;
  }
.note-scope .irreg-verb .verb-cell .form-label{
    font-family: "Geist Mono", monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 600;
  }
.note-scope .irreg-verb .verb-cell .verb-w{
    font-family: "Instrument Serif", serif;
    font-size: 19px;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
  }
.note-scope .irreg-verb .verb-cell .verb-ipa{
    font-family: "STIX Two Math", "Charis SIL", serif;
    font-size: 12px;
    color: var(--blue);
    font-style: normal;
  }
.note-scope .irreg-verb .translation-line{
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
  }
.note-scope .irreg-verb .translation-line b{ color: var(--ink); font-weight: 600; }
.note-scope .term-card{
    margin: 14px 0;
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 3px solid var(--accent);
  }
.note-scope .term-card .term{
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
  }
.note-scope .term-card .term-word{
    font-family: "Instrument Serif", serif;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
.note-scope .term-card .term-mark{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding: 2px 7px;
    background: var(--accent-50);
    border-radius: 4px;
  }
.note-scope .term-card .term-trans{
    font-family: "Geist Mono", monospace;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
  }
.note-scope .term-card .term-def{
    font-size: 14px;
    color: var(--ink-body);
    line-height: 1.55;
  }
.note-scope .summary{
    margin: 18px 0;
    padding: 22px 26px;
    background: linear-gradient(135deg, #f1eeff 0%, #ffe4cf 100%);
    border-radius: var(--radius);
    border: 1px solid var(--accent-100);
  }
.note-scope .summary .label{
    font-family: "Geist Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-700);
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
.note-scope .summary .label::before{ content: "❦"; font-family: "Instrument Serif", serif; font-style: italic; font-size: 16px; }
.note-scope .summary h4{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
.note-scope .summary ul{ padding-left: 18px; }
.note-scope .summary li{ margin-bottom: 4px; font-size: 14.5px; }
.note-scope .summary li::marker{ color: var(--accent); }
.note-scope .nav-next{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0 16px;
  }
.note-scope .nav-next .nav-card{
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s;
  }
.note-scope .nav-next .nav-card:hover{
    border-color: var(--accent-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }
.note-scope .nav-next .nav-card small{
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 600;
  }
.note-scope .nav-next .nav-card .ttl{
    font-family: "Instrument Serif", serif;
    font-size: 18px;
    line-height: 1.2;
    color: var(--ink);
  }
.note-scope .nav-next .nav-card.next{ text-align: right; }
.note-scope .sources{
    margin: 16px 0;
    padding: 14px 18px;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 13px;
  }
.note-scope .sources .label{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 8px;
  }
.note-scope .sources ol{
    padding-left: 18px;
    counter-reset: src;
  }
.note-scope .sources li{
    margin-bottom: 4px;
    color: var(--ink-body);
  }
.note-scope .sources li b{ font-weight: 600; }
.note-scope .sources li small{ color: var(--muted); }
.note-scope .json-final{
    margin: 30px 0;
    border-radius: var(--radius);
    background: #0a0a0f;
    overflow: hidden;
    border: 1px solid var(--ink);
  }
.note-scope .json-final .head{
    padding: 12px 18px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
  }
.note-scope .json-final .head b{
    font-size: 13px;
    font-weight: 600;
  }
.note-scope .json-final .head small{
    font-family: "Geist Mono", monospace;
    font-size: 11px;
    color: var(--accent-200);
  }
.note-scope .json-final pre{
    margin: 0;
    padding: 18px;
    overflow-x: auto;
    font-family: "Geist Mono", monospace;
    font-size: 12.5px;
    line-height: 1.6;
    color: #d4d4d4;
  }
.note-scope .json-final .k{ color: #a5b4fc; }
.note-scope .json-final .s{ color: #86efac; }
.note-scope .json-final .n{ color: #f87171; }
.note-scope .json-final .b{ color: #fbbf24; }
.note-scope .json-final .c{ color: #6b7280; font-style: italic; }
@media (max-width: 1000px){.note-scope .layout{ grid-template-columns: 1fr; padding: 24px 16px 60px; }
.note-scope .toc{ display: none; }
.note-scope .hero h1{ font-size: 38px; }
.note-scope section.guide > .head{ flex-direction: column; align-items: flex-start; }
.note-scope section.guide > .head .descr{ text-align: left; }
.note-scope .note-header{ padding: 22px 20px; }
.note-scope .note-header h1{ font-size: 32px; }
.note-scope .matching{ grid-template-columns: 1fr; }
.note-scope .units-grid{ grid-template-columns: repeat(2, 1fr); }
.note-scope .nav-next{ grid-template-columns: 1fr; }
.note-scope .figure-multi{ grid-template-columns: 1fr; }}
.note-scope .mi{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:currentColor;flex:none}
.note-scope .bio-cycle .cycle-title{ font-family: "Instrument Serif", serif; font-style: italic; font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.note-scope .punnett-grid .pn-cell.label-y,.note-scope .punnett-grid .pn-cell.corner{ aspect-ratio: auto; }
.note-scope .formula-block{ justify-content: flex-start; }
.note-scope .formula-block > span:not(.label):not(.number){ margin: 0 auto; min-width: 0; max-width: 100%; overflow-x: auto; }
.note-scope .drawn{ display: flex; justify-content: center; }
.note-scope .drawn svg{ max-width: 100%; height: auto; max-height: 340px; overflow: visible; }
.note-scope .drawn svg :is(polygon, polyline, path, circle, ellipse, rect):not([fill]){ fill: none; }
.note-scope .drawn svg :is(line, polygon, polyline, path, circle, ellipse, rect):not([stroke]){ stroke: var(--ink); stroke-width: 2; }
.note-scope .drawn svg text:not([fill]){ fill: var(--ink); }
.note-scope .drawn svg text{ font-family: "STIX Two Math", "Instrument Serif", serif; font-style: italic; }
.note-scope .read-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--accent), var(--pink)); box-shadow: 0 0 12px var(--accent-glow); }
.note-scope article > .note-header{ margin-bottom: 36px; }
.note-scope article .lede{ font-family: "Instrument Serif", serif; font-size: 22px; line-height: 1.4; color: var(--ink-2); margin: 0 0 22px; }
.note-scope article h2{ font-family: "Instrument Serif", serif; font-weight: 400; font-size: 36px; line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink); margin: 48px 0 16px; scroll-margin-top: 80px; }
.note-scope article h3{ font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 10px; scroll-margin-top: 80px; }
.note-scope article > h4,.note-scope .spoiler .content > h4{ font-weight: 600; font-size: 16px; color: var(--ink); margin: 24px 0 8px; }
.note-scope article > p{ margin-bottom: 16px; }
.note-scope article p strong{ font-weight: 600; color: var(--ink); }
.note-scope .callout{ margin: 18px 0; }
.note-scope .note-header.flat{ background: var(--paper); color: var(--ink); border: 1px solid var(--border); }
.note-scope .note-header.flat::before,.note-scope .note-header.flat::after{ display: none; }
.note-scope .note-header.flat h1{ color: var(--ink); }
.note-scope .note-header.flat .sub,.note-scope .note-header.flat .meta-row .item{ color: var(--muted); }
.note-scope .note-header.flat .meta-row{ border-top-color: var(--border); }
.note-scope .note-header.flat .meta-row .item b{ color: var(--ink); }
.note-scope .note-header.flat .topic-pill{ background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.note-scope .note-header .cover-emoji{ position: absolute; top: 22px; right: 28px; font-size: 44px; line-height: 1; }
.note-scope .math .katex,.note-scope .formula-inline .katex{ font-size: 1.05em; }
.note-scope .formula-block{ overflow-x: auto; }
.note-scope .formula-block .katex-display{ margin: 0; }
.note-scope .table-wrap{ overflow-x: auto; }
.note-scope .photo-card img{ display: block; width: 100%; height: auto; }
.note-scope .figure .ph{ padding: 28px 0; color: var(--muted); font-size: 13px; }
.note-scope .quiz .q-feedback,.note-scope .quiz .q-hint{ position: relative; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.note-scope .quiz .q-verdict{ display: block; color: #4ade80; }
.note-scope .quiz .q-verdict.wrong{ color: #f87171; }
.note-scope .quiz .q-hint summary{ cursor: pointer; color: var(--accent-200); font-size: 12px; }
.note-scope .quiz.done .opt{ cursor: default; }
.note-scope .qt-img{ display: block; max-width: 100%; border-radius: 10px; margin-bottom: 14px; }
.note-scope .qt-hint{ font-size: 13px; color: var(--muted); margin: -4px 0 12px; }
.note-scope .fill input.blank{ font-size: inherit; outline: none; }
.note-scope .fill input.blank.ok{ border-style: solid; border-color: var(--green); background: var(--green-tint); color: var(--green); }
.note-scope .fill input.blank.bad{ border-style: solid; border-color: var(--red); background: var(--red-tint); color: var(--red); }
.note-scope .matching .item{ cursor: pointer; }
.note-scope .matching .item.ok{ border-color: var(--green); background: var(--green-tint); }
.note-scope .matching .item.bad{ border-color: var(--red); background: var(--red-tint); }
.note-scope .ref-group{ margin: 12px 0; }
.note-scope .ref-list{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0; }
.note-scope .ref-list.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.note-scope .tl-event.hl .title{ color: var(--accent-700); }
.note-scope .code-block .line-hl{ display: inline-block; min-width: calc(100% - 40px); background: rgba(114,93,255,0.18); }
.note-scope .sources .ref-group{ margin: 0; }
.note-scope .note-foot{ margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }