@charset "utf-8"; @layer base, font, low, main, high; @layer main { @media (min-width: 800px) { .qrill-feb7f04d { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; } } } @layer main { @media (min-width: 800px) { .search-panel-state-c4f3ae8:checked ~ .qrill-feb7f04d { opacity: 1; pointer-events: unset; } } } @layer main { @media (min-width: 800px) { .qrill-4bb22d0e { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; } } } @layer main { @media (min-width: 800px) { .search-panel-state-c4f3ae8:checked ~ .qrill-4bb22d0e { opacity: 1; pointer-events: unset; } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d { background: rgb(253 254 254); margin-block: 3rem; max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d { transition: all 0.25s ease-in-out; } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d:hover { transform: translateY(-2px); } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (min-width: 800px) { .qrill-feb7f04d:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { @media (max-width: 799px) { .qrill-feb7f04d { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 8; transform: translateY(-120%); } } } @layer main { @media (max-width: 799px) { .search-panel-state-c4f3ae8:checked ~ .qrill-feb7f04d { transform: translateY(0); } } } @layer main { @media (max-width: 799px) { .qrill-feb7f04d { background: rgb(253 254 254); padding: 1rem; } } } @layer main { .qrill-feb7f04d { display: flex; flex-direction: column; gap: 1rem; } } @layer main { .search-result-aba3fbd6 { flex-grow: 1; overflow-y: scroll; } } @layer main { .qrill-39ba6179 { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } } @layer main { .qrill-86b49e3a { font-size: 2rem; } } @layer main { .qrill-9fc5e7f7 { font-size: 2rem; } } @layer main { .qrill-d3aedafb { border-radius: 12px; background: rgb(253 254 254); border: 2px solid rgba(71 85 105 / 0.4); padding: 1rem 1rem; display: flex; flex-direction: row; align-items: center; gap: 1rem; } } @layer main { .search-input-ffa2e3a6 { width: 100%; } } @layer main { .qrill-d3aedafb:has(.search-input-ffa2e3a6:focus) { border: 3px solid rgb(59 130 246); } } @layer main { @media (min-width: 800px) { .qrill-ea47cd2a { display: flex; justify-content: space-between; align-items: center; gap: 2rem; } } } @layer main { @media (min-width: 800px) { .qrill-374209eb { display: flex; justify-content: center; align-items: center; gap: 1rem; } } } @layer main { @media (min-width: 800px) { .qrill-80af8798 { display: flex; justify-content: center; align-items: center; gap: 1rem; } } } @layer main { @media (min-width: 800px) { .qrill-1aa4011a { display: none; } } } @layer main { @media (max-width: 799px) { .qrill-374209eb { flex-direction: column; width: 100%; } } } @layer main { @media (max-width: 799px) { .qrill-80af8798 { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 3rem; justify-content: space-between; border-block-start: 1px solid rgba(71 85 105 / 0.4); } } } @layer main { @media (max-width: 799px) { .qrill-843c46ac { width: 100%; border-radius: 12px; } } } @layer main { @media (max-width: 799px) { .qrill-843c46ac:hover { background: rgba(59 130 246 / 0.1); } } } @layer main { @media (max-width: 799px) { .qrill-d136836d { display: block; padding: 1rem 2rem; } } } @layer main { @media (max-width: 799px) { .qrill-1aa4011a { display: inline; margin-inline: 1rem; } } } @layer main { @media (max-width: 799px) { .qrill-cda9c459 { font-size: 2rem; } } } @layer main { @media (min-width: 800px) { .qrill-624b1f3d { display: none; } } } @layer main { @media (min-width: 800px) { .qrill-9d4d9069 { display: none; } } } @layer main { @media (min-width: 800px) { .qrill-c856a5bb { display: flex; flex-direction: row; align-items: center; gap: 1rem; } } } @layer main { @media (min-width: 800px) { .search-open-47ff3f60 { width: 100%; border-radius: 12px; background: rgb(241 245 249); border: 2px solid rgba(71 85 105 / 0.4); padding: 0.25rem 1rem; } } } @layer main { @media (min-width: 800px) { .svg-icon-font-solid-magnifying-glass-59f61cd6 { margin-inline-end: 1rem; } } } @layer main { @media (max-width: 799px) { .qrill-c856a5bb { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 6; transform: translateX(140%); } } } @layer main { @media (max-width: 799px) { .nav-panel-state-a0545885:checked ~ .qrill-c856a5bb { transform: translateX(0); } } } @layer main { @media (max-width: 799px) { .qrill-1550e27c { display: block; position: fixed; inset: 0; transition: all 0.3s ease allow-discrete; z-index: 6; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; } } } @layer main { @media (max-width: 799px) { .nav-panel-state-a0545885:checked ~ .qrill-1550e27c { opacity: 1; pointer-events: unset; } } } @layer main { @media (max-width: 799px) { .qrill-624b1f3d { display: block; } } } @layer main { @media (max-width: 799px) { .qrill-fc3f98bf { display: block; } } } @layer main { @media (max-width: 799px) { .qrill-c856a5bb { position: fixed; top: 0; right: 0; left: unset; width: 75%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; background: rgb(241 245 249); padding: 1.5rem; font-size: 1.5rem; gap: 1rem; } } } @layer main { @media (max-width: 799px) { .qrill-9d4d9069 { display: flex; align-items: center; justify-content: space-between; } } } @layer main { @media (max-width: 799px) { .search-open-47ff3f60 { width: 100%; border-radius: 12px; background: rgb(241 245 249); border: 2px solid rgba(71 85 105 / 0.4); padding: 1rem 3rem; } } } @layer main { @media (max-width: 799px) { .svg-icon-font-solid-magnifying-glass-59f61cd6 { margin-inline-end: 1rem; } } } @layer main { .qrill-30da83c7 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: flex; justify-content: space-between; align-items: start; padding: 1rem; } } @layer main { .qrill-cacefd49 { font-size: 1.25rem; font-weight: bold; font-style: normal; line-height: 1.0; } } @layer main { .qrill-17c93a0a { font-size: 0.875rem; color: rgb(100 116 139); } } @layer main { .page-footer-fcd47a42 { background: rgb(241 245 249); margin-block-start: 1.5rem; } } @layer main { .qrill-bd78584e { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; padding-block: 3rem; color: rgb(100 116 139); display: flex; flex-direction: row; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 3rem; } } @layer main { .qrill-6e5d5fb { display: flex; flex-direction: row; align-items: center; } } @layer main { .qrill-6e5d5fb > .qrill-53e012bc:nth-child(n+2) { padding-inline-start: 0.5rem; border-inline-start: 1px solid rgba(100 116 139 / 0.4); } } @layer main { .qrill-6e5d5fb > .qrill-53e012bc:nth-last-child(n+2) { padding-inline-end: 0.5rem; } } @layer base { *, *:before, *:after { margin: 0; padding: 0; border: 0; box-sizing: border-box; font: inherit; color: inherit; } } @layer base { a { text-decoration: inherit; } } @layer base { button { cursor: pointer; } } @layer base { input { width: 100%; border: 0 none; outline: none; } } @layer base { img, video, canvas, svg { display: block; max-width: 100%; height: auto; } } @layer base { :root { font-size: 16px; line-height: 1.6; font-family: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Noto Sans JP, Meiryo, sans-serif; } } @layer base { body { background-color: rgb(253 254 254); color: rgb(15 23 42); } } @layer base { ul, ol, menu { list-style-type: none; } } @layer main { .qrill-e3e04706 { position: fixed; top: 0; right: 0; left: 0; z-index: 4; background-color: rgb(253 254 254); } } @layer main { .contents-cc7f3c96 { padding-block: 74px; } } @layer main { .qrill-5cbff06e { display: flex; gap: 0.25rem; align-items: center; } } @layer main { .svg-icon-font-solid-user-73098149 { font-size: 2rem; } } @layer main { .qrill-5933315a { display: inline; width: 2rem; } } @layer main { .qrill-d4c34281 { display: flex; flex-direction: column; gap: 0.5rem; } } @layer main { .qrill-21bd7f42 { font-size: 2rem; font-weight: bold; line-height: 1.3; } } @layer main { .date-time-2d14a3a0 { color: rgb(100 116 139); font-weight: bold; } } @layer main { .tag-area-af1b9549 { display: inline-flex; gap: 0.25rem; } } @layer main { .tag-85f03e24 { font-size: 0.875rem; color: rgb(253 254 254); border-radius: 8px; border: 0 none; background-color: rgb(59 130 246); padding: 2px 0.5rem; } } @layer main { .tag-area-af1b9549 { display: flex; } } @layer main { .qrill-5cbff06e { font-weight: bold; } } @layer main { @media (min-width: 800px) { .qrill-5cbff06e { display: none; } } } @layer main { .qrill-af0d4bcd { display: flex; justify-content: space-between; cursor: pointer; } } @layer main { .qrill-740adaa1 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; color: rgb(15 23 42); } } @layer main { .qrill-27109de0 { display: flex; flex-direction: column; justify-content: center; } } @layer main { @media (min-width: 800px) { .qrill-c1051762::before { content: 'クリック'; } } } @layer main { @media (max-width: 799px) { .qrill-c1051762::before { content: 'タップ'; } } } @layer main { .qrill-c1051762::after { content: '展開'; } } @layer main { .toc-state-f71c5b7b:checked ~ .qrill-af0d4bcd .qrill-c1051762::after { content: '折りたたみ'; } } @layer main { .qrill-fc07888e::before { content: '◀'; font-size: 1.5rem; } } @layer main { .toc-state-f71c5b7b:checked ~ .qrill-af0d4bcd .qrill-fc07888e::before { content: '▼'; } } @layer main { .qrill-4901c54f { margin-inline: 1.25rem; padding-inline: 2rem; overflow: hidden; counter-reset: h3 0; list-style-position: outside; } } @layer main { .toc-state-f71c5b7b ~ .qrill-4901c54f { height: 0; transition: all 0.2s ease; } } @layer main { .toc-state-f71c5b7b:checked ~ .qrill-4901c54f { height: calc-size(fit-content, size); } } @layer main { .toc-item-main-fb0d452b::before { content: counter(h3); margin-inline-end: 1rem; background: rgb(22 32 51); color: rgb(203 213 225); border-radius: 50%; padding-inline: 8px; position: absolute; left: -2rem; } } @layer main { .toc-item-main-fb0d452b { position: relative; color: rgb(15 23 42); font-weight: bold; margin-block: 1rem; counter-increment: h3; } } @layer main { .qrill-95fc0210 { color: rgb(15 23 42); font-weight: bold; margin-block: 1rem; } } @layer main { .toc-item-sub-792976d1::before { position: absolute; content: '■'; left: -1.5rem; } } @layer main { .toc-item-sub-792976d1 { position: relative; font-weight: bold; margin-block: 0.5rem; } } @layer main { .qrill-c6583600 { margin-block: 1.25rem; } } @layer main { .svg-icon-font-brands-x-twitter-26d24714 { font-size: 1.5rem; color: rgb(253 254 254); background: rgb(15 23 42); padding: 0.6rem; border-radius: 50%; } } @layer main { .markdown-html-8f91be64 { display: flex; flex-direction: column; gap: 2rem; overflow-wrap: anywhere; text-align: justify; counter-reset: h3 0; } } @layer main { .markdown-html-8f91be64 h3::before { content: counter(h3); border-radius: 50%; padding-inline: 6px; color: rgb(203 213 225); background: rgb(22 32 51); margin-inline-end: 0.5rem; } } @layer main { .markdown-html-8f91be64 h3 { counter-increment: h3; font-size: 1.25rem; margin-block: 3rem 0; border-bottom: 2px solid rgba(22 32 51 / 0.3); } } @layer main { .markdown-html-8f91be64 h4::before { content: '▶'; margin-inline-end: 8px; } } @layer main { .markdown-html-8f91be64 h4 { font-size: 1.125rem; color: rgba(71 85 105 / 0.8); } } @layer main { .markdown-html-8f91be64 h5::before { content: '■'; } } @layer main { .markdown-html-8f91be64 h5 { color: rgba(71 85 105 / 0.7); } } @layer main { .markdown-html-8f91be64 a { text-decoration: underline 2px; text-underline-offset: 5px; } } @layer main { .markdown-html-8f91be64 ul { list-style-type: disc; } } @layer main { .markdown-html-8f91be64 ol { list-style-type: number; } } @layer main { .markdown-html-8f91be64 li { margin-inline-start: 2rem; } } @layer main { .markdown-html-8f91be64 p { text-indent: 1rem; } } @layer main { .markdown-html-8f91be64 input[type='checkbox'] { display: inline; width: revert; } } @layer main { .markdown-html-8f91be64 strong { font-weight: bold; } } @layer main { .markdown-html-8f91be64 li.task-list-item { list-style-type: none; list-style-position: outside; margin-inline-start: 0px; } } @layer main { @media (max-width: 799px) { .markdown-html-8f91be64 h3 { scroll-margin-block-start: 180px; } } } @layer main { @media (max-width: 799px) { .markdown-html-8f91be64 h4 { scroll-margin-block-start: 180px; } } } @layer main { @media (min-width: 800px) { .markdown-html-8f91be64 h3 { scroll-margin-block-start: 100px; } } } @layer main { @media (min-width: 800px) { .markdown-html-8f91be64 h4 { scroll-margin-block-start: 100px; } } } @layer main { .qrill-87c905c0 { display: flex; flex-direction: column; gap: 1rem; scroll-margin-block-start: 100px; } } @layer main { @media (min-width: 800px) { .base-card-26a97239 { display: none; } } } @layer main { @media (min-width: 800px) { .base-card-62563a1c { display: none; } } } @layer main { @media (max-width: 799px) { .base-card-26a97239 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (max-width: 799px) { .base-card-26a97239 { transition: all 0.25s ease-in-out; } } } @layer main { @media (max-width: 799px) { .base-card-26a97239:hover { transform: translateY(-2px); } } } @layer main { @media (max-width: 799px) { .base-card-26a97239 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (max-width: 799px) { .base-card-26a97239:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { @media (max-width: 799px) { .base-card-26a97239 { position: sticky; top: 80px; } } } @layer main { @media (max-width: 799px) { .base-card-62563a1c { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (max-width: 799px) { .base-card-62563a1c { transition: all 0.25s ease-in-out; } } } @layer main { @media (max-width: 799px) { .base-card-62563a1c:hover { transform: translateY(-2px); } } } @layer main { @media (max-width: 799px) { .base-card-62563a1c { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (max-width: 799px) { .base-card-62563a1c:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { .qrill-795df93f { font-size: 1.25rem; color: rgb(15 23 42); } } @layer main { .qrill-659fce20 { display: flex; justify-content: space-between; cursor: pointer; } } @layer main { .qrill-823dd6f1 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; color: rgb(15 23 42); } } @layer main { .qrill-35439a30 { display: flex; flex-direction: column; justify-content: center; } } @layer main { @media (min-width: 800px) { .qrill-31b6db1c::before { content: 'クリック'; } } } @layer main { @media (max-width: 799px) { .qrill-31b6db1c::before { content: 'タップ'; } } } @layer main { .qrill-31b6db1c::after { content: '展開'; } } @layer main { .toc-state-dcfdcf4e:checked ~ .qrill-659fce20 .qrill-31b6db1c::after { content: '折りたたみ'; } } @layer main { .qrill-b29a0ae1::before { content: '◀'; font-size: 1.5rem; } } @layer main { .toc-state-dcfdcf4e:checked ~ .qrill-659fce20 .qrill-b29a0ae1::before { content: '▼'; } } @layer main { .qrill-ff9447a2 { margin-inline: 1.25rem; padding-inline: 2rem; overflow: hidden; counter-reset: h3 0; list-style-position: outside; } } @layer main { .toc-state-dcfdcf4e ~ .qrill-ff9447a2 { height: 0; transition: all 0.2s ease; } } @layer main { .toc-state-dcfdcf4e:checked ~ .qrill-ff9447a2 { height: calc-size(fit-content, size); } } @layer main { .toc-item-main-217dd914::before { content: counter(h3); margin-inline-end: 1rem; background: rgb(22 32 51); color: rgb(203 213 225); border-radius: 50%; padding-inline: 8px; position: absolute; left: -2rem; } } @layer main { .toc-item-main-217dd914 { position: relative; color: rgb(15 23 42); font-weight: bold; margin-block: 1rem; counter-increment: h3; } } @layer main { .qrill-4c8e8463 { color: rgb(15 23 42); font-weight: bold; margin-block: 1rem; } } @layer main { .toc-item-sub-f672b19a::before { position: absolute; content: '■'; left: -1.5rem; } } @layer main { .toc-item-sub-f672b19a { position: relative; font-weight: bold; margin-block: 0.5rem; } } @layer main { .qrill-d48b3250 { margin-block: 1.25rem; } } @layer main { .svg-icon-font-brands-x-twitter-d470bd64 { font-size: 1.5rem; color: rgb(253 254 254); background: rgb(15 23 42); padding: 0.6rem; border-radius: 50%; } } @layer main { .author-card-d5b4f273 { display: flex; flex-direction: column; gap: 1.125rem; margin-block: 1.25rem; } } @layer main { .qrill-b7ed297f { font-size: 1.25rem; color: rgb(15 23 42); } } @layer main { @media (max-width: 799px) { .qrill-6af2ecbe { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (max-width: 799px) { .qrill-6af2ecbe { transition: all 0.25s ease-in-out; } } } @layer main { @media (max-width: 799px) { .qrill-6af2ecbe:hover { transform: translateY(-2px); } } } @layer main { @media (max-width: 799px) { .qrill-6af2ecbe { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (max-width: 799px) { .qrill-6af2ecbe:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { .qrill-6af2ecbe { display: flex; flex-direction: column; gap: 2rem; } } @layer main { .qrill-4e76640 { display: flex; align-items: center; } } @layer main { .svg-icon-font-solid-user-8c26e1db { font-size: 96px; } } @layer main { .qrill-9edbdfc2 { display: inline; width: 96px; } } @layer main { .qrill-38d05944 { font-size: 1.125rem; font-weight: bold; color: rgb(15 23 42); } } @layer main { .qrill-85ca9605 { font-size: 1.125rem; font-weight: bold; color: rgb(100 116 139); } } @layer main { .qrill-d2c4d2c6 { color: rgb(71 85 105); } } @layer main { .qrill-d9de50ee { display: flex; flex-direction: column; color: rgb(15 23 42); gap: 0.5rem; } } @layer main { .qrill-73d2ca70 { font-size: 1.25rem; } } @layer main { .qrill-c0cd0731 { color: rgb(100 116 139); } } @layer main { .qrill-f1293b21 { color: rgb(100 116 139); } } @layer main { .qrill-3e2377e2 { font-weight: bold; color: rgb(15 23 42); } } @layer main { .date-5985217d { color: rgb(100 116 139); } } @layer main { .contents-cc7f3c96 { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: flex; gap: 1rem; } } @layer main { .qrill-edd48c3e { max-width: 30%; flex-shrink: 1; } } @layer main { .qrill-a0da4f7d { max-width: 70%; flex-shrink: 3; } } @layer main { @media (max-width: 799px) { .contents-cc7f3c96 { flex-direction: column; } } } @layer main { @media (max-width: 799px) { .qrill-edd48c3e { max-width: 100%; } } } @layer main { @media (max-width: 799px) { .qrill-a0da4f7d { max-width: 100%; } } } @layer main { @media (max-width: 799px) { .qrill-a0da4f7d { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; margin-block: 1.5rem; position: relative; } } } @layer main { @media (max-width: 799px) { .qrill-edd48c3e { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; } } } @layer main { @media (max-width: 799px) { .base-card-828279a2 { display: none; } } } @layer main { @media (max-width: 799px) { .qrill-d9de50ee { margin-block: 1.5rem; } } } @layer main { @media (max-width: 799px) { .qrill-dc743f2 { display: flex; flex-direction: column; gap: 0.5rem; } } } @layer main { @media (max-width: 799px) { .base-card-f4ede6c { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (max-width: 799px) { .base-card-f4ede6c { transition: all 0.25s ease-in-out; } } } @layer main { @media (max-width: 799px) { .base-card-f4ede6c:hover { transform: translateY(-2px); } } } @layer main { @media (max-width: 799px) { .base-card-f4ede6c { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (max-width: 799px) { .base-card-f4ede6c:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { .qrill-8790f58f { font-size: 1.25rem; color: rgb(15 23 42); } } @layer main { @media (max-width: 799px) { .base-card-55b510d1 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (max-width: 799px) { .base-card-55b510d1 { transition: all 0.25s ease-in-out; } } } @layer main { @media (max-width: 799px) { .base-card-55b510d1:hover { transform: translateY(-2px); } } } @layer main { @media (max-width: 799px) { .base-card-55b510d1 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (max-width: 799px) { .base-card-55b510d1:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff { transition: all 0.25s ease-in-out; } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff:hover { transform: translateY(-2px); } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } } @layer main { @media (min-width: 800px) { .qrill-edd48c3e { position: relative; } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff { display: flex; flex-direction: column; position: sticky; top: 74px; } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff > *:nth-child(n+2) { padding-block-start: 0.5rem; border-block-start: 1px solid rgba(100 116 139 / 0.8); } } } @layer main { @media (min-width: 800px) { .qrill-3acec8ff > *:nth-last-child(n+2) { padding-block-end: 0.5rem; } } } @layer main { @media (min-width: 800px) { .qrill-dc743f2 > .base-card-55b510d1:nth-child(n+2) { padding-block-start: 0.5rem; border-block-start: 1px solid rgba(100 116 139 / 0.8); } } } @layer main { @media (min-width: 800px) { .qrill-dc743f2 > .base-card-55b510d1:nth-last-child(n+2) { padding-block-end: 0.5rem; } } } @layer main { .result-card-7fa45f47 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } } @layer main { .result-card-7fa45f47 { transition: all 0.25s ease-in-out; } } @layer main { .result-card-7fa45f47:hover { transform: translateY(-2px); } } @layer main { .result-card-7fa45f47 { background: linear-gradient(180deg, rgb(248 250 252) 0%, rgb(253 254 254) 100%);; border-radius: 16px; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05); } } @layer main { .result-card-7fa45f47:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } } @layer main { .tag-area-45e08e6d { display: inline-flex; gap: 0.25rem; } } @layer main { .tag-9187f0c8 { font-size: 0.875rem; color: rgb(253 254 254); border-radius: 8px; border: 0 none; background-color: rgb(59 130 246); padding: 2px 0.5rem; } } @layer main { .qrill-720c6ae6 { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } } @layer main { .qrill-60149f51 strong { font-weight: bold; color: rgb(59 130 246); } } @layer main { .result-card-list-3b2b370f { display: flex; flex-direction: column; gap: 1rem; } } @font-face { font-family: 'fontawesome free generated'; font-style: normal; font-weight: 400; font-display: block; src: url("/blog/posts/%5Bslug%5D.woff2") format("woff2"); } @layer font { .hf { font-family: 'fontawesome free generated'; font-style: normal; font-weight: normal; vertical-align: -0.125em; } } @layer font { .hf::before { content: var(--hf); } } @layer font { .hf-solid-xmark { --hf: "\e000"; } } @layer font { .hf-solid-magnifying-glass { --hf: "\e001"; } } @layer font { .hf-solid-bars { --hf: "\e002"; } } @layer font { .hf-solid-xmark { --hf: "\e003"; } } @layer font { .hf-brands-github { --hf: "\e004"; } } @layer font { .hf-brands-x-twitter { --hf: "\e005"; } } @layer font { .hf-brands-youtube { --hf: "\e006"; } } @layer font { .hf-solid-house { --hf: "\e007"; } } @layer font { .hf-solid-user { --hf: "\e008"; } } @layer font { .hf-solid-box { --hf: "\e009"; } } @layer font { .hf-solid-pen-to-square { --hf: "\e00a"; } } @layer font { .hf-solid-envelope { --hf: "\e00b"; } } @layer font { .hf-solid-magnifying-glass { --hf: "\e00c"; } } @layer font { .hf-solid-user { --hf: "\e00d"; } } @layer font { .hf-solid-book-open { --hf: "\e00e"; } } @layer font { .hf-brands-x-twitter { --hf: "\e00f"; } } @layer font { .hf-solid-book-open { --hf: "\e010"; } } @layer font { .hf-brands-x-twitter { --hf: "\e011"; } } @layer font { .hf-solid-user { --hf: "\e012"; } }