*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--font-base:-apple-system, Roboto, "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif, system-ui;--font-color:#464261;--bg-color:#faf4ed;--link:#3273dc;--muted:#9893a5;--surface:#f2e9e1;--done:#95b1ac;--warn:#f6c177;--error:#eb6f92}@media(prefers-color-scheme:dark){:root{--font-color:#ddd;--bg-color:#191724;--link:#6ab0e5;--muted:#6e6a86;--surface:#26233a;--done:#6d8f89;--warn:#ea9d34;--error:#b4637a}}@keyframes blur_fade{from{filter:blur(2px)}to{filter:blur(0)}}@keyframes fade_in{from{opacity:0;top:10px}to{opacity:1;top:0}}@keyframes fade_out{from{opacity:1}to{opacity:0}}.fade_in{position:relative;animation:fade_in .8s forwards alternate}.fade_out{animation:fade_out .8s forwards alternate}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--surface)}::-webkit-scrollbar-thumb{background:var(--bg-color);transition:background .2s ease}html{scroll-behavior:smooth}body{font-family:var(--font-base);background:var(--bg-color);color:var(--font-color);margin:1rem;font-size:16px;line-height:1.8rem}header,footer,main{max-width:700px;margin:0 auto}footer{margin-top:3em}a{color:var(--link);text-decoration:none}a:hover,a:active,a[aria-current*=page]{border-bottom:1px solid}video,img{max-width:100%;border-radius:8px;background-color:var(--surface);animation:blur_fade 1.5s ease-out alternate forwards}blockquote{margin:auto;border-left:1px solid var(--muted);padding-left:20px}h1,h2{font-size:1.2rem;color:var(--head);margin-block:1.5rem 1rem}h3,h4,h5,h6{font-size:1.2rem}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p{margin-block:-.5rem 1.2rem}nav{user-select:none}nav a{margin-right:8px}time{color:var(--muted)}ul,ol{padding:0;margin:1rem 0 1rem 2rem;& ul, & ol { margin: .5em 1em; }}details{background-color:var(--surface);border:1px solid var(--muted);border-radius:.5rem;padding:.5rem 1rem;& summary { list-style: none; outline: none; user-select: none; cursor: pointer; align-items: center; &::before { content: "›"; color: var(--muted); display: inline-block; margin-inline-end: .5rem; transition: transform .5s ease-in-out } } &[open] summary::before { transform: rotate(90deg); } &::details-content { display: block; block-size: 0; overflow: hidden; transition: block-size .5s allow-discrete, content-visibility .5s allow-discrete; } &[open]::details-content { block-size: auto; block-size: calc-size(auto, size); }}ruby rt{font-size:10px}del{padding-inline:3px;color:var(--muted);font-style:italic;text-decoration:line-through 2px var(--muted)}code{color:var(--link)}.title{margin-block:2rem 1rem}.title a{border:none;color:var(--font-color);font-size:1.25em}.title .count{color:var(--muted);font-size:.9rem}.banner img{min-height:200px}ul{&.split, &.posts, &.recent, &.tags { list-style-type: none; margin: 0; } &.recent li { display: flex; gap: 10px; margin: .5rem 0; } &.split li { display: inline-block; &::after { content: "/"; padding-inline: .5rem; } } &.posts { min-height: 10rem; } &.posts li { display: flex; margin: 1em 0; gap: 1rem; & span { flex: 0 0 100px } } &.tags li { display: inline-block; padding-right: 1em; & .anchor, & .number { color: var(--muted); } }}.info{margin-bottom:1rem}.info ul.split li:last-child::after{content:""}#TableOfContents{& a { color: var(--font-color); } & li::marker { color: var(--muted); font-size: .8rem; margin-right: .5rem; }}.content{margin-block:1rem}.tabs-container{width:100%;margin-block:1.25rem;& input[type="radio"] { display: none; } & .tab-label { display: inline-block; padding: .5rem 1rem; user-select: none; } & .tab-pane { display: none; padding: 1rem .5rem; overflow: hidden; } & input[type="radio"]:checked+.tab-label { border-bottom: 2px solid var(--font-color); }}.more{margin-block:3rem;display:flex;gap:10px;justify-content:space-between;& .title { font-size: .8rem; color: var(--muted); } &>div { width: 50%; } & .next { text-align: right; }}.progress{position:fixed;left:0;top:0;width:10%;height:3px;background:var(--muted);transition:all .5s;z-index:10}.hl{background:var(--surface);margin-block:1rem;border-radius:8px;position:relative;overflow:hidden;letter-spacing:1px;& .hl-meta, & .hl-control { color: var(--muted); position: absolute; top: 1rem; right: 1rem; line-height: 1rem; transition: opacity .2s; } & .hl-control { z-index: 5; display: flex; gap: 10px; opacity: 0; & .wrap, & .copy { width: 1.2rem; height: 1.2rem; background-size: 1.2rem; background-repeat: no-repeat; background-position: center; cursor: pointer; } & .copy { background-image: url(/image/material/copy.svg); } & .copied { background-image: url(/image/material/copied.svg); } & .wrap { margin-left: auto; background-image: url(/image/material/text-wrap.svg); } & .nowrap { background-image: url(/image/material/text-line.svg); } } & pre { display: grid; margin: 0; } & code { color: var(--font-color); } & .hl-wrap { position: relative; font-size: .8rem; } & .code { display: block; font-size: .9rem; tab-size: 4; padding: 1.2rem 1rem 1rem; overflow-x: auto; &::before, &::after { content: ''; position: absolute; top: 0; height: 100%; width: 1rem; pointer-events: none; } &::before { left: 0; background: linear-gradient(to right, var(--surface) 0%, #14141400 100%); } &::after { right: 0; background: linear-gradient(to left, var(--surface) 0%, #14141400 100%); } } &:hover { & .hl-meta { opacity: 0; } & .hl-control { opacity: 1; } } & .hl-control:has(.copied), & .hl-control:has(.nowrap) { opacity: 1; } & .hl-control:has(.copied)+.hl-meta, & .hl-control:has(.nowrap)+.hl-meta { opacity: 0; }}#memo{min-height:300px;margin-block:1rem;& .m-item { margin-block: 3em; } & .m-body { margin-top: 1em; } & .view-box { list-style: none; display: grid; margin: 0; border-radius: 10px; gap: 2px; overflow: hidden; } #m-more { text-align: center; padding: 2em; cursor: pointer; color: var(--muted); -webkit-tap-highlight-color: transparent; }}.view-box.grid-1{max-width:300px;grid-template-columns:300px}.view-box.grid-2,.view-box.grid-4{grid-template-columns:1fr 1fr}.view-box.grid-3,.view-box.grid-6{grid-template-columns:1fr 1fr 1fr}#memo .view-box img{height:100%;border-radius:0;object-fit:cover;animation:fade 1.2s forwards alternate}