.article-reading{max-width:var(--article-page-width);padding-top:calc(var(--header-height) + clamp(40px,6vw,80px));font-family:var(--playful);padding-bottom:80px}.article-reading__back{margin-bottom:38px}.article-reading__heading .article-tags{margin-top:20px}.article-reading h1,.article-reading__title{font:700 clamp(2rem,5vw,4rem)/1.35 var(--playful);letter-spacing:-.03em;overflow-wrap:anywhere;margin:20px 0}.article-reading__dates{color:var(--muted);font-size:var(--font-size-small);flex-wrap:wrap;gap:8px 28px;line-height:1.8;display:flex}.article-reading__cover{width:100%;height:auto;aspect-ratio:var(--article-cover-ratio);object-fit:cover;background:var(--surface);border-radius:28px 20px 30px 22px;max-height:580px;margin:36px 0 0;display:block}.article-prose blockquote.article-quote{padding-top:52px;position:relative}.article-quote-export{min-height:44px;color:var(--muted);font:400 var(--font-size-small)/1.4 var(--playful);cursor:pointer;transition:color var(--motion-feedback-duration) var(--ease-out),text-shadow var(--motion-feedback-duration) var(--ease-out);background:0 0;border:0;padding:4px 0;position:absolute;top:4px;right:18px}.article-quote-export:is(:hover,:focus-visible){color:var(--summer-blue);text-shadow:0 0 16px var(--jump-backlight)}.article-quote-export+*{margin-top:0!important}.article-reading__footer{border-top:1px dashed var(--line-strong);grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding-top:28px;display:grid}.article-reading__footer a{color:var(--text);overflow-wrap:anywhere;gap:8px;text-decoration:none;display:grid}.article-reading__footer a[rel=next]{text-align:right}.article-reading__footer a>span{color:var(--muted);font-size:var(--font-size-small)}.article-reading__footer a>strong{font-size:var(--font-size-body);font-weight:400;line-height:1.8}.article-reading__footer a:is(:hover,:focus-visible)>strong{color:var(--summer-blue)}.article-reading__source{color:var(--text-soft);font-size:var(--font-size-small);flex-wrap:wrap;gap:8px 24px;display:flex}.article-reading__source a{color:var(--summer-blue)}.article-reading__tools{flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:28px;display:flex}.article-reading__tools[hidden],.article-reading__tools [hidden]{display:none}.article-reading__tools button,.article-code-tools button,.article-image-dialog button{min-height:44px;color:var(--summer-blue);font:inherit;cursor:pointer;background:0 0;border:0;padding:6px 0}.article-reading__tools button[aria-pressed=true],.article-code-tools button[aria-pressed=true]{color:var(--summer-pink)}.article-reading__tools button{transition:color var(--motion-feedback-duration) var(--ease-out),text-shadow var(--motion-feedback-duration) var(--ease-out)}.article-reading__tools button:focus-visible{color:var(--summer-pink);text-shadow:0 0 12px color-mix(in srgb,var(--glow-pink) 25%,transparent)}@media (hover:hover) and (pointer:fine){.article-reading__tools button:hover{color:var(--summer-pink);text-shadow:0 0 12px color-mix(in srgb,var(--glow-pink) 25%,transparent)}}.article-reading__status{color:var(--muted);font-size:var(--font-size-small)}.article-reading__tools button:disabled{color:var(--muted);cursor:default;opacity:.7}.article-typography{font-size:var(--font-size-small);flex-wrap:wrap;align-items:center;gap:6px;display:flex}.article-typography>button{min-width:44px}.article-typography output{text-align:center;font-variant-numeric:tabular-nums;min-width:3.5em;color:var(--text-soft)}.article-typography__spacing{gap:12px;margin-left:10px;display:flex}@media (width>=1440px){.article-page .article-reading:has(.article-aside){max-width:var(--article-annotated-width)}.article-page .article-prose>.article-aside{float:right;clear:right;width:var(--annotation-width);margin:0 calc(-1 * var(--annotation-width) - 36px) 24px 24px}}.quote-dialog{width:min(var(--quote-dialog-width),calc(100vw - 28px));background:var(--surface);max-height:calc(100dvh - 32px);color:var(--text);font-family:var(--playful);scrollbar-width:none;box-shadow:var(--shadow);border:0;border-radius:22px 16px 24px 18px;margin:auto;padding:20px;overflow:auto}.quote-dialog::backdrop{background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(8px)}.quote-dialog[open]{animation:quote-arrive var(--motion-reorder-duration) var(--ease-out) both}.quote-dialog header,.quote-dialog footer{justify-content:space-between;align-items:center;gap:16px;display:flex}.quote-dialog h2{font:400 1.3rem/1.4 var(--playful);margin:0}.quote-dialog button{min-height:44px;color:var(--summer-blue);font:inherit;cursor:pointer;background:0 0;border:0}.quote-dialog canvas{object-fit:contain;border-radius:12px;width:100%;height:auto;max-height:65dvh;margin:16px 0;display:block}.quote-dialog canvas[hidden]{display:none}.quote-dialog footer>span{color:var(--muted);font-size:var(--font-size-small)}.quote-dialog a:not([href]){pointer-events:none;opacity:.5}@keyframes quote-arrive{0%{opacity:0;translate:0 12px;scale:.98}to{opacity:1;translate:0;scale:1}}@media (prefers-reduced-motion:reduce){.quote-dialog[open]{animation:none}}.article-toc{min-width:0;max-width:100%;font-size:var(--article-control-font-size);margin:24px 0 0}.article-toc summary{cursor:pointer;min-height:44px;color:var(--text);align-items:center;gap:12px;font-weight:700;list-style:none;display:flex}.article-toc summary::-webkit-details-marker{display:none}.article-toc summary:after{content:"＋";color:var(--summer-blue);margin-left:auto;font-weight:400}.article-toc[open] summary:after{content:"−"}.article-toc summary span{color:var(--muted);font-size:var(--font-size-small);font-weight:400}.article-toc nav{isolation:isolate;scrollbar-width:none;overscroll-behavior:contain;max-height:min(62svh,560px);margin-top:10px;position:relative;overflow:auto}.article-toc nav::-webkit-scrollbar{display:none}.article-toc nav:before{content:"";z-index:-1;inset:var(--toc-active-top,0px) 0 auto;height:var(--toc-active-height,0px);background:color-mix(in srgb,var(--summer-blue) 9%,transparent);box-shadow:0 5px 18px -12px color-mix(in srgb,var(--glow-blue) 30%,transparent);pointer-events:none;transition:top var(--motion-disclosure-duration) var(--ease-out),height var(--motion-disclosure-duration) var(--ease-out);border-radius:12px;position:absolute}.article-toc ol{counter-reset:toc-section;margin:0;padding:0;list-style:none}.article-toc li{margin:3px 0;padding:0}.article-toc li[data-depth="0"]{counter-increment:toc-section}.article-toc a{min-height:44px;color:var(--text-soft);overflow-wrap:anywhere;transition:color var(--motion-feedback-duration) var(--ease-out),background var(--motion-feedback-duration) var(--ease-out);border-radius:12px;align-items:center;padding:8px 10px 8px 38px;line-height:1.6;text-decoration:none;display:flex;position:relative}.article-toc a:before{content:"";background:color-mix(in srgb,var(--summer-blue) 45%,var(--line));border-radius:50%;width:4px;height:4px;position:absolute;left:17px}.article-toc li[data-depth="0"] a:before{content:counter(toc-section,decimal-leading-zero);background:color-mix(in srgb,var(--summer-blue) 7%,transparent);width:23px;height:23px;color:var(--summer-blue);font-variant-numeric:tabular-nums;border-radius:7px;place-items:center;font-size:.78em;display:grid;left:7px}.article-toc li[data-depth="1"] a{padding-left:48px}.article-toc li[data-depth="1"] a:before{left:28px}.article-toc li[data-depth="2"] a{padding-left:60px}.article-toc li[data-depth="2"] a:before{left:40px}.article-toc a[aria-current=location]{color:var(--summer-blue)}.article-toc a:after{content:"";background:linear-gradient(to right,var(--summer-blue) var(--chapter-progress,0%),color-mix(in srgb,var(--summer-blue) 15%,transparent) var(--chapter-progress,0%));height:2px;transform:scaleX(var(--chapter-length,0));transform-origin:0;pointer-events:none;transition:transform var(--motion-disclosure-duration) var(--ease-out);border-radius:2px;position:absolute;bottom:3px;left:38px;right:10px}.article-toc li[data-depth="1"] a:after{left:48px}.article-toc li[data-depth="2"] a:after{left:60px}.article-toc a[aria-current=location]:before{color:var(--summer-blue);background:color-mix(in srgb,var(--summer-blue) 17%,transparent)}.article-toc a:focus-visible,.article-toc summary:focus-visible{outline:2px solid var(--summer-pink);outline-offset:-2px;color:var(--summer-pink)}@media (hover:hover) and (pointer:fine){.article-toc a:hover{color:var(--summer-pink);background:color-mix(in srgb,var(--summer-pink) 6%,transparent)}}.article-reading__lead,.article-reading__content{min-width:0}@media (width>=1400px){.article-page .article-reading:has(>.article-toc){grid-template-columns:var(--article-toc-width) minmax(0,1fr) var(--article-toc-width);column-gap:var(--article-toc-gap);max-width:calc(var(--article-page-width) + 2*(var(--article-toc-width) + var(--article-toc-gap)));width:min(calc(var(--article-page-width) + 2*(var(--article-toc-width) + var(--article-toc-gap))),calc(100% - 40px));display:grid}.article-reading__lead{grid-area:1/2}.article-reading__content{grid-area:2/2}.article-page .article-reading>.article-toc{top:calc(var(--header-height) + 32px);grid-area:1/3/span 2;align-self:start;margin:58px 0 0;padding:4px 0;position:sticky}.article-page .article-reading>.article-toc summary{cursor:default;padding:0 10px}.article-page .article-reading>.article-toc summary:after{display:none}.article-page.article-reading-mode .article-reading:has(>.article-toc){max-width:calc(var(--article-reading-width) + 2*(var(--article-toc-width) + var(--article-toc-gap)))}.article-page .article-reading:has(>.article-toc) .article-prose>.article-aside{float:none;width:auto;margin:24px 0}}.article-code{background:var(--surface);border-radius:18px;min-width:0;margin:1.4em 0;position:relative}.article-code-tools{top:calc(var(--header-height) + 8px);z-index:2;background:var(--surface);font:400 var(--font-size-small)/1.5 var(--playful);box-shadow:0 7px 16px color-mix(in srgb,var(--bg) 38%,transparent);border-radius:18px 18px 8px 8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 22px;padding:4px 20px;display:flex;position:sticky}.article-code-filename{overflow-wrap:anywhere;min-width:0;color:var(--muted);font-size:var(--font-size-label);flex:1}.article-code-tools button[hidden]{display:none}.article-prose .article-code pre{overscroll-behavior-x:contain;border-radius:0 0 18px 18px;margin:0}@media (width<=480px){.article-code-tools{gap:2px 16px;padding-inline:14px}.article-code-filename{flex-basis:100%;padding-top:6px}.article-code-filename:empty{display:none}.article-code-tools button{font-size:.9rem}}.article-prose pre.article-code-wrap{white-space:pre-wrap;overflow-wrap:anywhere}.article-page .ambient-scene{opacity:.3}.article-page.article-reading-mode{background:var(--bg)}.article-page.article-reading-mode .article-reading{max-width:var(--article-reading-width)}body.article-page.article-reading-mode .ambient-scene{opacity:var(--article-reading-ambient-opacity)}.article-page.article-reading-mode:before{opacity:var(--article-reading-background-opacity)}#article-start{scroll-margin-top:calc(var(--header-height) + 24px)}.article-page [data-article-prose]{font-size:var(--reader-font-size,var(--article-body-font-size));line-height:var(--article-line-height-standard)}:root[data-reading-spacing=relaxed] .article-page [data-article-prose]{line-height:var(--article-line-height-relaxed)}.article-page :is(.article-reading__tools,.article-reading__dates,.article-reading__status,.article-code-tools,.article-image-dialog__toolbar,.site-tooltip){font-size:var(--article-control-font-size)}.article-page .article-code-tools button{font-size:inherit}.article-image-trigger{cursor:zoom-in;background:0 0;border:0;border-radius:18px;max-width:100%;margin:24px auto;padding:0;display:block}.article-image-trigger img{margin:0}.article-image-trigger:focus-visible{outline:2px solid var(--summer-blue);outline-offset:6px}.article-image-dialog{background:color-mix(in srgb,var(--bg) 96%,transparent);width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;color:var(--text);font-family:var(--playful);border:0;margin:0;padding:clamp(12px,3vw,32px);position:fixed;inset:0;overflow:hidden}.article-image-dialog[open]{flex-direction:column;gap:12px;display:flex}.article-image-dialog::backdrop{background:var(--bg)}.article-image-dialog__toolbar{padding-top:env(safe-area-inset-top);flex-shrink:0;justify-content:flex-end;align-items:center;gap:28px;display:flex}.article-image-dialog__viewport{touch-action:auto;overscroll-behavior:contain;scrollbar-width:none;flex:1;min-height:0;overflow:auto}.article-image-dialog__viewport::-webkit-scrollbar{display:none}.article-image-dialog__viewport img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;margin:auto;display:block}.article-image-dialog [hidden]{display:none}.article-image-dialog__state{color:var(--text-soft);font-size:var(--font-size-small);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;display:flex}.article-image-dialog__state:not(:has([data-image-status]:not(:empty))){display:none}.article-image-dialog button:disabled{color:var(--muted);cursor:default}.article-image-dialog.is-zoomed .article-image-dialog__viewport img{max-width:none;max-height:none}.article-image-dialog>p{color:var(--text-soft);text-align:center;font-size:var(--font-size-small);padding-bottom:env(safe-area-inset-bottom);flex-shrink:0;margin:0}.article-image-dialog button:focus-visible,.article-reading__tools button:focus-visible,.article-code-tools button:focus-visible{outline:2px solid var(--summer-blue);outline-offset:4px}@media (width<=720px){.article-reading__dates{flex-direction:column;gap:6px}.article-reading__cover{border-radius:20px;margin-top:26px}}