@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 { .home-hero-5e75e15d { position: relative; overflow: hidden; } }
@layer main { .home-hero-5e75e15d::before { content: ''; position: absolute; inset: 0; background-image: url('/assets/img/trevor-vannoy-UNzohJgG8W0-unsplash_1920.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } }
@layer main { .home-hero-5e75e15d::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 0%, rgb(15 23 42) 70%); z-index: 2; } }
@layer main { .qrill-edd48c3e { position: relative; z-index: 3; } }
@layer main { .qrill-edd48c3e { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; color: rgb(203 213 225); padding: 3rem 1rem; } }
@layer main { .qrill-3acec8ff { font-size: 2.7rem; line-height: 1.1; font-weight: bold; font-style: normal; max-width: 540px; color: rgb(253 254 254); } }
@layer main { .qrill-87c905c0 { font-size: 1.125rem; margin-block: 0.25rem; } }
@layer main { .qrill-d4c34281 { font-size: 0.875rem; margin-block-end: 3rem; } }
@layer main { .qrill-21bd7f42 { display: flex; flex-direction: row; align-items: center; gap: 1rem; } }
@layer main { .qrill-28d6fd6a { display: inline-flex; box-sizing: content-box; padding: 1rem; border-radius: 8px; overflow: hidden; cursor: pointer; line-height: 1; font-weight: bold; font-style: normal; } }
@layer main { .qrill-28d6fd6a { background: linear-gradient(135deg, rgb(6 182 212) 0%, rgb(59 130 246) 100%); border: none; box-shadow: none; } }
@layer main { .qrill-28d6fd6a { transition: all 0.25s ease-in-out; } }
@layer main { .qrill-28d6fd6a:hover { box-shadow: 0 0 4px rgba(203 213 225 / 0.7); } }
@layer main { .qrill-28d6fd6a:active { box-shadow: 0 0 8px rgba(203 213 225 / 0.9); } }
@layer main { .qrill-28d6fd6a:hover { transform: translateY(-2px); } }
@layer main { .qrill-75d13a2b { display: inline-flex; box-sizing: content-box; padding: 1rem; border-radius: 8px; overflow: hidden; cursor: pointer; line-height: 1; font-weight: bold; font-style: normal; } }
@layer main { .qrill-75d13a2b { color: rgba(253 254 254 / 0.5); background-color: transparent; box-shadow: 0 0 0 1px inset rgba(253 254 254 / 0.5); } }
@layer main { .qrill-75d13a2b { transition: all 0.25s ease-in-out; } }
@layer main { .qrill-75d13a2b:hover { color: rgba(253 254 254 / 0.8); box-shadow: 0 0 0 1px inset rgba(253 254 254 / 0.8); } }
@layer main { .qrill-75d13a2b:active { color: rgba(253 254 254 / 1.0); box-shadow: 0 0 0 1px inset rgba(253 254 254 / 1.0); } }
@layer main { .qrill-75d13a2b:hover { transform: translateY(-2px); } }
@layer main { .styled-card-398317c5 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-398317c5 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-398317c5:hover { transform: translateY(-2px); } }
@layer main { .styled-card-398317c5 { 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 { .styled-card-398317c5:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-5cbff06e { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-a9ba2d2f { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-5933315a { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .qrill-f327aadc { color: rgb(253 254 254); letter-spacing: 3px; border-radius: 4px; padding-block: 2px; padding-inline: 0.5rem 0.25rem; background-color: rgb(15 23 42); } }
@layer main { .qrill-a62d6e1b { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-4021e79d { color: rgb(100 116 139); } }
@layer main { .qrill-8d1c245e { font-size: 0.875rem; } }
@layer main { .qrill-da16611f { display: inline-flex; gap: 0.25rem; } }
@layer main { .qrill-27109de0 { 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 { .styled-card-810ea5b9 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-810ea5b9 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-810ea5b9:hover { transform: translateY(-2px); } }
@layer main { .styled-card-810ea5b9 { 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 { .styled-card-810ea5b9:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-c1051762 { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-dff5423 { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-1518d24b { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .title-fc39116c { font-size: 1rem; font-weight: bold; color: rgb(15 23 42); padding-block-end: 0.5rem; } }
@layer main { .qrill-4901c54f { font-size: 0.875rem; color: rgb(100 116 139); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; } }
@layer main { .tag-area-efc4a759 > .tag-8711c634:nth-child(n+2)::before { content: ', '; } }
@layer main { .small-posts-list-769a8230 > .post-header-5ec8fa65:nth-child(n+2) { padding-block-start: 0.5rem; border-block-start: 1px solid rgba(100 116 139 / 0.5); } }
@layer main { .small-posts-list-769a8230 > .post-header-5ec8fa65:nth-last-child(n+2) { padding-block-end: 0.5rem; } }
@layer main { .styled-card-2f73afd5 { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .styled-card-2f73afd5 { transition: all 0.25s ease-in-out; } }
@layer main { .styled-card-2f73afd5:hover { transform: translateY(-2px); } }
@layer main { .styled-card-2f73afd5 { 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 { .styled-card-2f73afd5:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .qrill-2c63bc7e { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-795df93f { display: flex; flex-direction: column; gap: 2rem; } }
@layer main { .qrill-c6583600 { margin-top: auto; font-weight: bold; color: rgb(59 130 246); } }
@layer main { .qrill-135272c1 { color: rgb(15 23 42); font-weight: bold; } }
@layer main { .qrill-ad46ec43 { list-style-type: disc; margin-inline: 1.5rem; } }
@layer main { .qrill-fa412904 { margin-block: 0.25rem; } }
@layer main { .qrill-c2cb76ec { max-width: 1200px; width: 100%; padding-inline: 1rem; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; padding-block: 2rem; } }
@layer main { .result-card-22da4b0f { display: flex; flex-direction: column; padding: 1rem; color: rgb(100 116 139); } }
@layer main { .result-card-22da4b0f { transition: all 0.25s ease-in-out; } }
@layer main { .result-card-22da4b0f:hover { transform: translateY(-2px); } }
@layer main { .result-card-22da4b0f { 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-22da4b0f:hover { box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.15); } }
@layer main { .tag-area-c5f4b32e { display: inline-flex; gap: 0.25rem; } }
@layer main { .tag-8ad0d8e9 { 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-9b4f20ae { font-size: 1.25rem; font-weight: bold; color: rgb(15 23 42); } }
@layer main { .qrill-31b6db1c strong { font-weight: bold; color: rgb(59 130 246); } }
@layer main { .result-card-list-2653bfd7 { 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("/index.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"; } }