.post-title{background-color:initial;text-shadow:2px 2px 3px var(--color-card);padding:0;margin-block-end:0}.page-header{margin-block-end:var(--space-lg)}.header-flex{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-md)}.lastmod{color:var(--color-badge);font-size:.875rem;white-space:nowrap;opacity:.9}.lastmod strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}.single{display:grid;grid-template-columns:1fr;gap:var(--space-lg);max-width:var(--max-width);margin-inline:auto;.post-main { max-width: 65ch; } .explain { border-radius: var(--radius); margin-block-end: var(--space-xl); transition: none; h2, h3, h4 { background-color: transparent; margin-block: var(--space-xl) var(--space-sm); } p, ul, blockquote { max-width: 65ch; } ul { list-style: square; margin-inline-start: var(--space-md); margin-block: var(--space-lg); } } .links { justify-content: start; }}.post-sidebar{--icon-size-ref:18px;max-width:65ch;.toc-wrapper { position: fixed; right: 0; bottom: 0; left: 0; z-index: 996; max-height: 70vh; margin: 0; padding: var(--space-md); border: 1px solid var(--border-color); box-shadow: 0 -4px 20px rgb(0 0 0 / 15%); transform: translateY(100%); overflow-y: auto; background-color: var(--color-card); &.open { transition: transform var(--duration-medium) ease; transform: translateY(0); } } .toc-title { background-color: transparent; color: var(--color-headline); font-size: var(--text-lg); font-weight: var(--font-weight-bold); cursor: pointer; margin-block-end: var(--space-sm); list-style: none; } .toc-content { margin-block-start: var(--space-md); padding-block-start: var(--space-md); border-block-start: 1px solid var(--border-color); } .toc-toggle { position: fixed; right: var(--space-xs); bottom: var(--space-xl); z-index: 997; display: flex; align-items: center; padding: var(--space-xs); border: var(--border-width) var(--border-style) var(--color-paper-border); border-radius: var(--radius); color: var(--bg); font-size: var(--text-base); background-color: var(--color-highlight); font-weight: var(--font-weight-semibold); cursor: pointer; } .toc-toggle:hover { box-shadow: var(--shadow-lg); transition: transform var(--duration-base) ease, box-shadow var(--duration-base) ease; transform: translateY(-2px); } .toc-toggle:active { box-shadow: var(--shadow-paper-active); transform: translateY(0); } .toc-toggle svg { width: 24px; height: 24px; } ul { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; li { list-style: none; padding-inline-start: var(--space-md); position: relative; a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: calc(var(--radius) - 2px); color: var(--color-text); text-decoration: none; font-size: var(--text-base); line-height: 1.5; overflow-wrap: break-word; word-break: normal; margin-inline-start: calc(-1 * var(--space-sm)); } a:hover { background-color: var(--menu-item-hover); color: var(--color-highlight); } a.active { background-color: var(--menu-item-active); color: var(--color-highlight); } } ul { margin-block-start: var(--space-xs); padding-inline-start: var(--space-md); li::before { content: "—"; } } }}.skills h2.section-title{background:0 0}.single .explain .skills-list{display:grid;margin-inline-start:0;margin-block:var(--space-xl);gap:var(--space-lg);overflow:hidden}.skills-item{list-style:none;padding:var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius);transition:transform var(--transition-duration)var(--transition-func);background-color:var(--halo)}.skills-item .wrapper{display:flex;justify-content:space-between;align-items:center;margin-block-end:var(--space-sm)}.single .explain .skills-title{margin-block:0;padding:0;background:0 0;color:var(--color-headline);font-family:var(--font-family);font-size:var(--text-lg);line-height:1.3;font-weight:var(--font-weight-semibold)}.skills-data{color:var(--color-highlight);font-family:monospace;font-size:var(--text-base);font-weight:var(--font-weight-bold)}.skills-progress-box{position:relative;height:12px;border:1px solid var(--border-color);border-radius:var(--radius-large);background-color:var(--bg);overflow:hidden}.skills-progress{height:100%;border-radius:var(--radius-large);background:linear-gradient(90deg,var(--color-highlight) 0%,#00a8cc 100%);box-shadow:0 0 8px var(--color-highlight);transition:width 1s ease-out}@media(width >=768px){.skills-list{grid-template-columns:1fr 1fr;column-gap:var(--space-xl)}}