.note-detail{width:calc(100% - var(--gutter)*2);max-width:860px;margin:0 auto;padding:126px 0 90px}
.note-topline{max-width:660px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:58px}
.note-all{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--control-border);border-radius:25px;padding:11px 15px;font-size:11px;line-height:1.3;white-space:nowrap}
.note-all svg{width:18px;height:18px;stroke-width:2}
.note-all:hover{background:var(--white)}
.note-topic-tag{margin-left:auto;display:inline-block;border:1px solid var(--line);border-radius:20px;padding:5px 10px;background:var(--white);color:var(--soft);font:10px/1.4 var(--mono);white-space:nowrap}
.note-heading{max-width:660px;margin-inline:auto}
.note-heading h1,.note-not-found h1{font:700 clamp(42px,5.4vw,66px)/1.08 var(--display);letter-spacing:-.045em;text-wrap:balance;margin:22px 0 24px}
.note-deck{max-width:660px;font:400 19px/1.65 var(--body);color:var(--soft);text-wrap:pretty;margin:0}
.note-byline{display:flex;align-items:center;gap:11px;margin:0;font:600 13px/1.5 var(--body)}
.note-byline img{border-radius:50%;object-fit:cover}
.note-byline>span>span{display:block;font-size:11px;font-weight:400;color:var(--soft);margin-top:2px}
.note-prose{max-width:660px;margin:45px auto 0;font:400 17px/1.85 var(--body);color:var(--ink)}
.note-meta-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 32px;padding:16px 0;border-block:1px solid var(--line)}
.note-prose .note-opening{font-size:21px;line-height:1.7;letter-spacing:-.015em;margin:0 0 44px}
.note-section{margin:0 0 42px}
.note-section h2{font:650 29px/1.2 var(--display);letter-spacing:-.025em;margin:0 0 18px;text-wrap:pretty}
.note-section p{margin:0 0 20px}
.note-section p:last-child{margin-bottom:0}
.note-section ul{margin:24px 0 0;padding-left:22px}
.note-section li{padding-left:5px;margin:12px 0}
.note-section li::marker{color:var(--soft)}
.note-takeaway{margin:48px -26px 0;padding:29px 30px;background:var(--white);clip-path:polygon(10px 0,calc(100% - 10px) 0,calc(100% - 10px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 10px),0 calc(100% - 10px),0 10px,10px 10px)}
.note-takeaway p{font:600 25px/1.35 var(--display);letter-spacing:-.025em;margin:14px 0 0;text-wrap:pretty}
.note-endmark{text-align:center;color:var(--soft);font-size:22px;margin:35px 0 0}
.note-pagination{max-width:660px;margin-inline:auto;border-top:1px solid var(--line);padding-top:32px;margin-top:52px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start}
.note-next{display:grid;gap:13px}
.note-pagination-label{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px}
.note-next-title{font:600 23px/1.25 var(--display);letter-spacing:-.025em;text-wrap:pretty}
.note-next svg{width:20px;height:20px;transition:transform .2s}
.note-next:hover svg{transform:translateX(4px)}
.note-previous .note-pagination-label{justify-content:flex-start}
.note-previous svg{transform:rotate(180deg)}
.note-previous:hover svg{transform:translateX(-4px) rotate(180deg)}
.note-next:hover .note-next-title{text-decoration:underline;text-underline-offset:4px}
.note-not-found{min-height:60vh}
@media(max-width:700px){.note-detail{max-width:620px;padding:102px 0 68px}.note-topline{margin-bottom:40px;gap:12px}.note-all{font-size:.75rem;line-height:1.5}.note-topic-tag{font-size:9px;padding:5px 8px}.note-heading h1{font-size:clamp(36px,8.7vw,51px);margin:18px 0 21px}.note-deck{font-size:16px;line-height:1.65}.note-prose{margin-top:32px;font-size:16px;line-height:1.8}.note-prose .note-opening{font-size:18px;line-height:1.7;margin-bottom:34px}.note-section{margin-bottom:34px}.note-section h2{font-size:25px;line-height:1.25;margin-bottom:16px}.note-section p{margin-bottom:18px}.note-meta-row{margin-bottom:26px;padding:14px 0;gap:12px}.note-takeaway{margin:36px 0 0;padding:24px}.note-takeaway p{font-size:23px}.note-pagination{grid-template-columns:1fr;gap:30px;margin-top:38px;padding-top:26px}.note-next-title{font-size:22px}.note-endmark{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.note-next svg{transition:none}}