.site-header{padding-block:1.5rem;border-bottom:1px solid var(--border-color);background:var(--surface-color)}.site-brand{display:flex;gap:.75rem;align-items:center;justify-content:space-between}.site-title{display:inline-block;width:fit-content;color:var(--text-color);font-size:1.2rem;font-weight:800;line-height:1.2;text-decoration:none;&:hover{color:var(--link-hover);text-decoration:none}}.site-tools{display:flex;flex-shrink:0;gap:.5rem;align-items:center}.icon-link{display:inline-flex;align-items:center;color:var(--text-muted);text-decoration:none}.site-toolbar{display:flex;gap:1rem;align-items:center;justify-content:space-between;margin-top:.8rem;nav{ul{display:flex;flex-wrap:wrap;gap:.4rem 1rem;padding:0;list-style:none}a{color:var(--text-muted);text-decoration:none;&:hover,&.active,&.ancestor{color:var(--text-color);text-decoration:underline}}}select{min-width:8rem;padding:.35rem 1.8rem .35rem .55rem;border:1px solid var(--border-color);border-radius:.35rem;appearance:none;color:var(--text-color);background-color:var(--surface-color);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23626975' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:.9rem;cursor:pointer}@media(max-width:36rem){align-items:flex-start;flex-direction:column}}footer{padding-block:1.5rem;border-top:1px solid var(--border-color);color:var(--text-muted);background:var(--surface-color);font-size:.92rem}:root{--font-sans: "Adwaita Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bg-color: #fbfaf8;--surface-color: #ffffff;--text-color: #202124;--text-muted: #626975;--border-color: #d7dbe0;--link-color: #1665c1;--link-hover: #0a4b97;--code-bg: #111827;--code-text: #f8fafc;--accent-bg: #eef6f2;--focus-ring: rgba(22, 101, 193, .28);@media(prefers-color-scheme:dark){--bg-color: #141516;--surface-color: #1d2024;--text-color: #eceff3;--text-muted: #aab2bd;--border-color: #343a43;--link-color: #8fc5ff;--link-hover: #b7dcff;--code-bg: #080b10;--code-text: #f8fafc;--accent-bg: #18251f;--focus-ring: rgba(143, 197, 255, .3)}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-color);text-autospace:normal}body{display:grid;grid-template-columns:minmax(1rem,1fr) minmax(0,46rem) minmax(1rem,1fr);grid-template-rows:auto 1fr auto;min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;>*{grid-column:2}@media(min-width:72rem){grid-template-columns:minmax(2rem,1fr) minmax(0,52rem) minmax(2rem,1fr)}}.site-header,footer{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;>*{grid-column:2}}main{padding-block:3rem 4rem}img,picture,video,canvas,svg,iframe{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6,td,th{overflow-wrap:break-word}a{color:var(--link-color);text-decoration-thickness:.08em;text-underline-offset:.18em;&:hover{color:var(--link-hover)}&:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}}select,input,summary{&:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}}.page{.page-header{margin-bottom:1.25rem}.page-title{font-size:2.25rem;line-height:1.12;text-wrap:balance}}.content{>*+*{margin-top:1rem}p{text-wrap:pretty}h2{margin-top:2rem;font-size:1.45rem;line-height:1.25;text-wrap:balance}h3{margin-top:1.5rem;font-size:1.18rem;text-wrap:balance}ul,ol{padding-inline-start:1.4rem;li+li{margin-top:.25rem}}blockquote{padding:.75rem 1rem;border-inline-start:4px solid var(--link-color);background:var(--accent-bg);color:var(--text-color)}table{width:100%;border-collapse:collapse;margin-top:1.25rem;font-size:.95rem}th,td{padding:.65rem .75rem;border:1px solid var(--border-color);text-align:start;vertical-align:top}th{background:var(--accent-bg)}code{font-family:var(--font-mono);font-size:.92em}p>code,li>code,td>code,th>code{padding:.1rem .3rem;border-radius:.3rem;background:var(--accent-bg)}pre{overflow-x:auto;border-radius:.45rem;background:var(--code-bg);padding:1rem;code{color:var(--code-text)}}img{height:auto;border-radius:.35rem}figure{margin-top:1.5rem}figcaption{margin-top:.5rem;color:var(--text-muted);font-size:.92rem}details{padding:.9rem 1rem;border:1px solid var(--border-color);border-radius:.45rem;background:var(--surface-color)}summary{cursor:pointer;font-weight:700}iframe{width:100%;aspect-ratio:16 / 9;height:auto;border:0;border-radius:.35rem}}.highlight{overflow-x:auto;border-radius:.45rem;background:var(--code-bg);pre{padding:1rem}}.section-title{font-size:1.45rem;line-height:1.25;text-wrap:balance}.post-list{margin-top:2.5rem;>*+*{margin-top:1.5rem}}.post-card{padding-block:1.5rem;border-top:1px solid var(--border-color);.post-title{font-size:1.25rem;line-height:1.25;text-wrap:balance}.post-link{text-decoration:none;&:hover{text-decoration:underline}}.summary{margin-top:.65rem;color:var(--text-muted)}}.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:1rem;color:var(--text-muted);font-size:.92rem}.tag-list{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;.tag-label{color:var(--text-muted)}.tags{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;list-style:none}.tag-link{text-decoration:none}}.term-list{display:flex;flex-wrap:wrap;gap:.65rem;padding:0;margin-top:1.5rem;list-style:none;.term{padding:.3rem .55rem;border:1px solid var(--border-color);border-radius:.35rem}.term-link{text-decoration:none}}.demo-toggle{display:inline-flex;gap:.55rem;align-items:center;padding:.65rem .8rem;border:1px solid var(--border-color);border-radius:.4rem;background:var(--surface-color)}