.tpl-index img{display:block;max-width:100%;height:auto}.w{width:var(--container);margin-inline:auto}.eb{font-size:var(--step-meta);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}.page{padding-block:clamp(28px,5vw,60px) clamp(18px,3vw,28px)}.page h1{font-size:var(--step-h1);margin-block-start:10px}.page p{margin-block-start:12px;max-width:38em;color:var(--muted-fg)}.page .disc{margin-block-start:8px}.page .pick{color:var(--text);font-weight:700}.filt{position:sticky;inset-block-start:0;z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--border);padding-block:10px;margin-block-end:clamp(20px,3vw,32px)}.filt .w{display:flex;flex-wrap:wrap;gap:8px}.filt input{position:absolute;inline-size:1px;block-size:1px;opacity:0}.filt label{display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;padding:8px 15px;border:1px solid var(--border);border-radius:999px;font-size:var(--step-caption);transition:background-color .16s var(--ease),border-color .16s var(--ease)}.filt label b{font-size:.85em;color:var(--muted-fg)}.filt label:hover{border-color:var(--accent)}.filt input:checked+label{background:var(--text);color:var(--bg);border-color:var(--text)}.filt input:checked+label b{color:var(--bg);opacity:.7}.filt input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}.works{padding-block-end:clamp(40px,6vw,80px)}.grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.ghead{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin-block-start:clamp(14px,2vw,26px);padding-block-end:8px;border-block-end:1px solid var(--border)}.ghead h2{font-size:var(--step-h3)}.ghead b{color:var(--muted-fg);font-size:var(--step-caption)}.ghead:first-child{margin-block-start:0}.card a{display:block;text-decoration:none;color:inherit}.card figure{position:relative;margin:0;border:1px solid var(--border);border-radius:var(--r-s);overflow:hidden;background:var(--muted-bg)}.card img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .32s var(--ease)}.card a:hover img{transform:scale(1.03)}.card .badge{position:absolute;inset-block-start:8px;inset-inline-start:8px;background:#14161ae6;color:#fff;border-radius:999px;padding:4px 10px;font-size:11px;letter-spacing:.04em}.card .ttl{margin-block-start:9px;font-size:var(--step-body);font-weight:700}.card a:hover .ttl{text-decoration:underline;text-underline-offset:3px}.card .tax{margin-block-start:3px;font-size:var(--step-caption);color:var(--muted-fg)}.card .tax i{font-style:normal;opacity:.5;margin-inline:2px}.card .dsc{margin-block-start:2px;font-size:var(--step-caption);color:var(--muted-fg)}.card .device{padding-block-start:22px;background:var(--muted-bg);border-color:var(--line)}.card .device .bar{position:absolute;inset-block-start:0;inset-inline:0;height:22px;background:var(--muted-bg);border-block-end:1px solid var(--border);display:flex;align-items:center;padding-inline:8px}.card .device .bar:after{content:"";flex:1;height:9px;border-radius:999px;background:var(--paper);border:1px solid var(--border);margin-inline-start:6px;max-width:62%}.card .device .badge{inset-block-start:30px}.card .device img{display:block;border-block-start:0}.card .prb{margin-block-start:7px;font-size:var(--step-caption);line-height:1.62;color:var(--muted-fg);padding-block-start:7px;border-block-start:1px solid var(--border)}:root:has(#ft-brochure:checked) .card:not([data-type=brochure]),:root:has(#ft-book:checked) .card:not([data-type=book]),:root:has(#ft-cata:checked) .card:not([data-type=cata]),:root:has(#ft-shop:checked) .card:not([data-type=shop]){display:none}:root:has(#ft-brochure:checked) .ghead:not(:has(~.card[data-type=brochure])),:root:has(#ft-book:checked) .ghead:not(:has(~.card[data-type=book])),:root:has(#ft-cata:checked) .ghead:not(:has(~.card[data-type=cata])),:root:has(#ft-shop:checked) .ghead:not(:has(~.card[data-type=shop])){display:none}.note{margin-block-start:clamp(22px,3vw,34px);max-width:40em;font-size:var(--step-caption);color:var(--muted-fg)}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}