.search-section{padding-block:2rem}h1{margin-bottom:1.5rem}.search-bar{margin-bottom:1rem}#search-input{border:2px solid var(--color-main);background:var(--lightningcss-light,var(--color-light))var(--lightningcss-dark,var(--color-dark));width:100%;max-width:600px;color:var(--lightningcss-light,var(--color-dark))var(--lightningcss-dark,var(--color-light));outline-color:var(--color-main);border-radius:.5rem;padding:.65rem 1rem;font-size:1rem}#search-input::placeholder{color:var(--lightningcss-light,#475569)var(--lightningcss-dark,#94a3b8)}.chip-bar{flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;display:flex}.chip{border:2px solid var(--color-main);color:var(--lightningcss-light,#1e293b)var(--lightningcss-dark,#e2e8f0);cursor:pointer;background:0 0;border-radius:9999px;padding:.35rem .85rem;font-family:inherit;font-size:.9rem;transition:background .15s,color .15s}.chip.active,.chip:hover{background:var(--lightningcss-light,#456)var(--lightningcss-dark,var(--color-main));color:#fff}.chip:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-items:start;gap:1.25rem;margin:0 0 1.5rem;padding:0;list-style:none;display:grid}.no-results,.loading,.error{text-align:center;opacity:.7;grid-column:1/-1;padding:2rem}.note-card-item{--note-hue:210}[data-collection=ai]{--note-hue:174}[data-collection=architecture]{--note-hue:220}[data-collection=astro]{--note-hue:24}[data-collection=common-issues]{--note-hue:0}[data-collection=frontend]{--note-hue:142}[data-collection=industrial-engineering]{--note-hue:270}[data-collection=integration]{--note-hue:190}[data-collection=migration]{--note-hue:40}[data-collection=patterns]{--note-hue:320}[data-collection=security]{--note-hue:0}[data-collection=strategy]{--note-hue:250}[data-collection=geopolitica]{--note-hue:160}.note-card-item{--_tilt:0deg;container:note/inline-size}.note-card-item:nth-child(3n+1){--_tilt:-1.1deg}.note-card-item:nth-child(3n+2){--_tilt:.7deg}.note-card-item:nth-child(3n){--_tilt:-.4deg}.note-card-item article{--_fold:28px;transform:rotate(var(--_tilt));transform-origin:bottom;clip-path:polygon(0 0, calc(100% - var(--_fold)) 0, 100% var(--_fold), 100% 100%, 0 100%);box-shadow:3px 3px 0 1px var(--lightningcss-light,hsl(var(--note-hue) 60% 80%))var(--lightningcss-dark,hsl(var(--note-hue) 20% 25%)), 6px 6px 0 2px var(--lightningcss-light,hsl(var(--note-hue) 55% 75%))var(--lightningcss-dark,hsl(var(--note-hue) 20% 20%)), 0 6px 18px #00000021;transition:transform .25s cubic-bezier(.4,1.6,.5,1),box-shadow .25s;position:relative}.note-card-item article:hover{box-shadow:3px 3px 0 1px var(--lightningcss-light,hsl(var(--note-hue) 60% 80%))var(--lightningcss-dark,hsl(var(--note-hue) 20% 25%)), 6px 6px 0 2px var(--lightningcss-light,hsl(var(--note-hue) 55% 75%))var(--lightningcss-dark,hsl(var(--note-hue) 20% 20%)), 0 12px 24px #00000038;z-index:5;transform:rotate(0)translateY(-6px)}.note-card-item article:after{content:"";background:radial-gradient(circle at 35% 35%, hsl(var(--note-hue) 60% 80%), hsl(var(--note-hue) 50% 45%));z-index:4;border-radius:50%;width:13px;height:13px;position:absolute;top:-7px;left:50%;translate:-50%;box-shadow:0 2px 5px #00000059,inset 0 -1px 2px #0003}.note-card-item article:before{content:"";z-index:3;width:var(--_fold);height:var(--_fold);background:linear-gradient(225deg, hsl(var(--note-hue) 40% 68%) 50%, transparent 50%);filter:drop-shadow(-1px 1px 2px #0000002e);pointer-events:none;position:absolute;top:0;right:0}.note-card-item .wrapper{background:repeating-linear-gradient(transparent, transparent calc(1.6rem - 1px), var(--lightningcss-light,hsl(var(--note-hue) 50% 84%))var(--lightningcss-dark,hsl(var(--note-hue) 30% 28%)) calc(1.6rem - 1px), var(--lightningcss-light,hsl(var(--note-hue) 50% 84%))var(--lightningcss-dark,hsl(var(--note-hue) 30% 28%)) 1.6rem), var(--lightningcss-light,hsl(var(--note-hue) 70% 93%))var(--lightningcss-dark,hsl(var(--note-hue) 25% 18%));color:var(--lightningcss-light,hsl(var(--note-hue) 40% 18%))var(--lightningcss-dark,hsl(var(--note-hue) 15% 88%));background-position:0 3.2rem;border-radius:2px;flex-direction:column;gap:.55rem;height:100%;padding:1.1rem 1.1rem 1.25rem;display:flex;position:relative}.note-card-item .card-thumb{border-radius:.4rem;margin-bottom:.2rem;overflow:hidden}.note-card-item .card-thumb img{object-fit:cover;width:100%;height:72px;display:block}.note-card-item .title h2{-webkit-line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:clamp(.95rem,4cqw,1.25rem);font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.note-card-item .description p{opacity:.78;-webkit-line-clamp:4;-webkit-box-orient:vertical;flex:1;margin:0;font-size:clamp(.78rem,3cqw,.88rem);line-height:1.6rem;display:-webkit-box;overflow:hidden}.note-card-item .card-meta{flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:auto;padding-top:.4rem;display:flex}.note-card-item .card-collection{text-transform:capitalize;background:var(--lightningcss-light,hsl(var(--note-hue) 60% 75%))var(--lightningcss-dark,hsl(var(--note-hue) 30% 35%));color:var(--lightningcss-light,hsl(var(--note-hue) 40% 12%))var(--lightningcss-dark,hsl(var(--note-hue) 10% 95%));border-radius:9999px;padding:.15rem .5rem;font-size:.68rem;font-weight:600}.note-card-item .card-date{opacity:.65;margin-left:auto;font-size:.68rem}.note-card-item .card-link{text-indent:-9999px;z-index:10;display:block;position:absolute;inset:0}.pagination{justify-content:center;align-items:center;gap:1rem;padding-block:1rem;display:flex}.pagination-btn{border:2px solid var(--color-main);color:var(--lightningcss-light,#1e293b)var(--lightningcss-dark,#e2e8f0);cursor:pointer;background:0 0;border-radius:.5rem;padding:.5rem 1.25rem;font-family:inherit;font-size:.95rem;transition:background .15s,color .15s}.pagination-btn:hover{background:var(--color-main);color:#fff}.pagination-btn:focus-visible{outline:2px solid var(--color-main);outline-offset:2px}.pagination-info{opacity:.7;font-size:.9rem}
