@charset "UTF-8";.posts{display:flex;flex-direction:column}.post-row{display:grid;grid-template-columns:1fr;gap:8px;padding:24px 0;border-bottom:1px solid var(--border-soft);align-items:baseline;text-decoration:none;color:inherit}.post-row:last-child{border-bottom:none}@media(hover:hover){.post-row:hover .post-title{color:var(--primary)}}.post-row:focus-visible .post-title{color:var(--primary)}.post-row .post-date{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);letter-spacing:.01em;padding-top:4px}.post-row .post-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;letter-spacing:-.02em;color:var(--text);margin:0 0 6px;transition:color .18s}.post-row .post-desc{font-size:var(--text-md);color:var(--muted);margin:0}.post-row .post-tags{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}@media(min-width:640px){.post-row{grid-template-columns:110px 1fr;gap:32px}}.tag{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--primary);letter-spacing:0}.tag:before{content:"#";color:var(--muted)}.post-page{padding-bottom:64px}.post-reading{width:100%}.post-header{text-align:center;margin-bottom:40px;padding-top:8px}.post-header h1{font-size:clamp(2.25rem,5vw,3.5rem);margin:0 auto 22px;letter-spacing:-.035em}.post-header .meta{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px}.post-header .post-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:16px}.post-prose a:not([class]){border-bottom:1px solid var(--border);transition:border-color .18s}@media(hover:hover){.post-prose a:not([class]):hover{border-bottom-color:var(--primary)}}.post-prose a:not([class]):focus-visible{border-bottom-color:var(--primary)}.post-prose ul.contains-task-list{list-style:none;padding-left:0}.post-prose ul.contains-task-list>li.task-list-item{display:flex;align-items:flex-start;gap:12px;list-style:none;margin:0 0 12px;padding-left:0}.post-prose ul.contains-task-list>li.task-list-item::marker{content:none}.post-prose ul.contains-task-list>li.task-list-item input[type=checkbox]{appearance:none;flex-shrink:0;width:1.125rem;height:1.125rem;margin:.35em 0 0;border:1.5px solid var(--primary);border-radius:var(--radius-sm);background:var(--bg);cursor:default}.post-prose ul.contains-task-list>li.task-list-item input[type=checkbox]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 4.8 8.5 9.5 3.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:.7rem}.post-prose ul.contains-task-list>li.task-list-item input[type=checkbox]:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.post-prose iframe{width:100%;aspect-ratio:16/9;height:auto;margin:8px 0 30px;display:block;border:0;border-radius:var(--radius-xl)}.post-prose blockquote{margin:0 auto var(--space-5);padding:16px 0 16px 22px;border-left:4px solid var(--primary);color:var(--muted);font-family:var(--font-display);font-size:var(--text-lg)}.reading-ref .post-prose h2#sass-css{color:var(--primary)}.reading-ref .post-prose h2#sass-css+ul>li{color:var(--primary)}.reading-ref .post-prose h2#sass-css+ul>li::marker{color:var(--primary)}.reading-ref .post-prose h2#js{color:var(--reading-ref-js)}.reading-ref .post-prose h2#js+ul>li{color:var(--reading-ref-js)}.reading-ref .post-prose h2#js+ul>li::marker{color:var(--reading-ref-js)}.reading-ref .post-prose h2#front-end{color:var(--reading-ref-front-end)}.reading-ref .post-prose h2#front-end+ul>li{color:var(--reading-ref-front-end)}.reading-ref .post-prose h2#front-end+ul>li::marker{color:var(--reading-ref-front-end)}.reading-ref .post-prose h2#web-design--ux{color:var(--accent)}.reading-ref .post-prose h2#web-design--ux+ul>li{color:var(--accent)}.reading-ref .post-prose h2#web-design--ux+ul>li::marker{color:var(--accent)}.reading-ref .post-prose h2#toolsmaterials{color:var(--reading-ref-tools)}.reading-ref .post-prose h2#toolsmaterials+ul>li{color:var(--reading-ref-tools)}.reading-ref .post-prose h2#toolsmaterials+ul>li::marker{color:var(--reading-ref-tools)}.reading-ref .post-prose h2#others{color:var(--reading-ref-others)}.reading-ref .post-prose h2#others+ul>li{color:var(--reading-ref-others)}.reading-ref .post-prose h2#others+ul>li::marker{color:var(--reading-ref-others)}.reading-ref .post-prose>ul{list-style:disc;padding:0 0 0 22px;margin:0 0 32px;display:flex;flex-direction:column;gap:10px}.reading-ref .post-prose>ul ul{margin-top:10px;margin-bottom:0}.reading-ref .post-prose>ul li,.reading-ref .post-prose>ul ul li{font-size:var(--text-base);color:var(--text);padding-left:4px;margin:0}.reading-ref .post-prose>ul>li::marker{font-size:var(--text-md)}.reading-ref .post-prose>ul a{color:var(--text);border-bottom:1px solid transparent;transition:color .18s,border-color .18s}@media(hover:hover){.reading-ref .post-prose>ul a:hover{color:var(--cat, var(--primary));border-bottom-color:var(--cat, var(--primary))}}.reading-ref .post-prose>ul a:focus-visible{color:var(--cat, var(--primary));border-bottom-color:var(--cat, var(--primary))}.reading-ref .post-prose>blockquote{margin:var(--space-section-divider) 0}.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;margin:64px auto 0;padding-top:var(--space-section-divider);align-items:start}@media(max-width:639px){.post-nav{grid-template-columns:1fr;gap:32px}}.post-nav-item{display:flex;flex-direction:column;gap:6px;min-width:0}.post-nav-item--newer{grid-column:1;align-items:flex-start;text-align:left}.post-nav-item--older{grid-column:2;align-items:flex-end;text-align:right}@media(max-width:639px){.post-nav-item--older{grid-column:1}}.post-nav-item:is(a){color:var(--text);text-decoration:none;position:relative}.post-nav-item:is(a):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}@media(hover:hover){.post-nav-item:is(a):hover{color:var(--primary)}.post-nav-item:is(a):hover .post-nav-title svg{color:var(--primary)}.post-nav-item:is(a):hover.post-nav-item--newer .post-nav-title svg{transform:translate(-4px)}.post-nav-item:is(a):hover.post-nav-item--older .post-nav-title svg{transform:translate(4px)}}.post-nav-item:is(a):focus-visible{color:var(--primary)}.post-nav-item:is(a):focus-visible .post-nav-title svg{color:var(--primary)}.post-nav-item:is(a):focus-visible.post-nav-item--newer .post-nav-title svg{transform:translate(-4px)}.post-nav-item:is(a):focus-visible.post-nav-item--older .post-nav-title svg{transform:translate(4px)}.post-nav-title{display:inline-flex;align-items:flex-start;gap:10px;font-family:var(--font-display);font-size:var(--text-base);font-weight:500;line-height:1.35}.post-nav-title svg{flex-shrink:0;margin-top:.2em;color:var(--muted);transition:color .18s,transform .2s ease}.post-nav-item--older .post-nav-title{justify-content:flex-end}.post-nav-title-text{min-width:0}.post-nav-label{font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}