/* article surface · reading first */
.note-body{padding-top:0;background:var(--bg)}
.note-top{position:sticky;top:0;z-index:10;background:rgba(10,14,20,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:space-between;gap:16px;max-width:760px;margin-inline:auto;
  padding:20px clamp(20px,5vw,32px) 12px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.note-top a{color:var(--muted);text-decoration:none}
.note-top a:hover{color:var(--violet)}
.note-meta{text-align:right}
.note-main{max-width:760px;margin-inline:auto;padding:3.5rem clamp(20px,5vw,32px) 2rem}
.note-main h1{font-size:clamp(1.9rem,4.5vw,3rem);line-height:1.12;letter-spacing:-.018em;
  margin-bottom:1.2rem;text-wrap:balance}
.note-main .standfirst{color:var(--muted);font-size:1.12rem;margin-bottom:2.6rem;max-width:58ch}
.note-main h2{font-size:1.55rem;margin:2.6rem 0 .9rem;letter-spacing:-.01em}
.note-main p{margin-bottom:1.1rem;max-width:68ch}
.note-main p,.note-main li{color:var(--text);font-size:1.02rem;line-height:1.72}
.note-main ul{margin:0 0 1.1rem 1.2rem}
.note-main li{margin-bottom:.5rem}
.note-main blockquote{border-left:2px solid var(--amber);padding-left:1.1rem;margin:1.6rem 0;
  color:var(--text);font-size:1.12rem;font-style:italic;max-width:60ch}
.note-main code{font-family:var(--mono);font-size:.9em;background:var(--surface);
  padding:.1em .35em;border-radius:5px}
.note-byline{color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  margin-bottom:2.2rem}
.note-foot{max-width:760px;margin-inline:auto;padding:1.6rem clamp(20px,5vw,32px) 3rem;
  border-top:1px solid var(--border);color:var(--muted);font-size:12px}
.note-foot a{color:var(--muted)}
.note-foot a:hover{color:var(--violet)}
@media print{.note-body{background:#fff}.note-top,.note-foot{color:#666}}

.note-fig{margin:2rem 0}
.note-fig .diagram-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.note-fig .diagram{min-width:560px;width:100%;height:auto;display:block;padding:8px}
.note-fig .dnode{cursor:default}
.note-fig figcaption{margin-top:.7rem;font-size:12px;color:var(--muted)}
.note-code{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:1.1rem 1.3rem;overflow-x:auto;font-size:.86rem;line-height:1.7;margin:1.4rem 0;
  color:var(--text)}

.hanchor{font-family:var(--mono);font-size:.8em;color:var(--muted);opacity:0;
  text-decoration:none;transition:opacity .2s}
h2:hover .hanchor,.hanchor:focus-visible{opacity:1}
.hanchor:hover{color:var(--violet)}
@media (hover:none){.hanchor{opacity:.5}}
.note-fig{position:relative}
@media (max-width:900px){
  .note-fig::after{content:"";position:absolute;top:0;bottom:2.2rem;right:0;width:44px;
    pointer-events:none;background:linear-gradient(90deg,transparent,rgba(18,24,38,.9));
    border-radius:0 12px 12px 0}
  .note-fig figcaption::after{content:" · drag →"}
}
@media print{
  .note-main p,.note-main li{color:#222}
  .note-main h1,.note-main h2{color:#000}
  .note-code{background:#f6f6f6;border-color:#ccc;color:#111}
  .hanchor{display:none}
}

.note-close{max-width:760px;margin:0 auto;padding:1rem clamp(20px,5vw,32px) 0}
.note-close .ledger-row{color:var(--text)}
.note-close .lr-label{font-size:1.15rem}