:root { color-scheme: dark; --bg:#070711; --panel:#111321; --text:#fff8ee; --muted:#a9a8b7; --line:rgba(255,255,255,.11); --gold:#ffd66f; --pink:#ff65a7; --cyan:#65ead7; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at 8% 10%,rgba(255,101,167,.13),transparent 28%),radial-gradient(circle at 92% 20%,rgba(101,234,215,.1),transparent 30%),#070711; font:15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:inherit; }
.tag-directory-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px clamp(18px,5vw,72px); border-bottom:1px solid var(--line); background:rgba(7,7,17,.86); }
.tag-directory-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.tag-directory-brand img { width:64px; height:64px; object-fit:contain; }
.tag-directory-brand strong { font-family:Georgia,serif; font-size:clamp(22px,3vw,34px); font-style:italic; letter-spacing:-.05em; }
.tag-directory-brand strong span { color:var(--pink); }.tag-directory-brand small { color:var(--gold); font-size:.55em; }
.back-link { padding:10px 15px; border:1px solid var(--line); border-radius:999px; color:var(--muted); text-decoration:none; font-weight:750; }
.back-link:hover,.back-link:focus-visible { color:var(--text); border-color:var(--gold); }
main { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:34px 0 70px; }
.directory-languages { display:flex; gap:7px; margin-bottom:20px; overflow-x:auto; padding-bottom:5px; }
.directory-languages a { flex:0 0 auto; padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); text-decoration:none; font-size:12px; }
.directory-languages a[aria-current="page"] { color:#15111a; border-color:transparent; background:linear-gradient(135deg,var(--gold),#ffaf70); font-weight:800; }
.directory-breadcrumbs { display:flex; align-items:center; gap:9px; margin-bottom:24px; color:var(--muted); font-size:12px; }.directory-breadcrumbs a { text-decoration:none; }.directory-breadcrumbs strong { color:var(--text); }
.directory-hero { position:relative; overflow:hidden; padding:clamp(28px,6vw,70px); border:1px solid var(--line); border-radius:30px; background:linear-gradient(135deg,rgba(255,101,167,.13),rgba(101,234,215,.06)),var(--panel); box-shadow:0 35px 90px rgba(0,0,0,.28); }
.directory-hero::after { content:"#"; position:absolute; right:5%; top:-35%; color:rgba(255,214,111,.08); font:900 clamp(180px,30vw,370px)/1 ui-monospace,monospace; }
.directory-hero > * { position:relative; z-index:1; }.directory-hero > span { color:var(--gold); font:800 12px ui-monospace,monospace; letter-spacing:.18em; }.directory-hero h1 { max-width:760px; margin:12px 0 12px; font-size:clamp(38px,7vw,78px); line-height:.98; letter-spacing:-.065em; }.directory-hero p { max-width:720px; margin:0; color:var(--muted); font-size:clamp(15px,2vw,18px); }.directory-hero b { display:inline-block; margin-top:25px; color:var(--cyan); font:800 11px ui-monospace,monospace; letter-spacing:.12em; }
.tag-directory-group { margin-top:38px; }.tag-directory-group h2 { margin:0 0 15px; font-size:clamp(22px,3vw,31px); letter-spacing:-.04em; }
.tag-directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.tag-directory-card { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; padding:17px 16px; border:1px solid var(--line); border-radius:16px; background:rgba(17,19,33,.78); text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.tag-directory-card span { color:var(--pink); }.tag-directory-card strong { overflow:hidden; text-overflow:ellipsis; font-size:15px; }.tag-directory-card i { color:var(--gold); font-style:normal; }.tag-directory-card:hover,.tag-directory-card:focus-visible { transform:translateY(-2px); border-color:rgba(255,214,111,.5); background:rgba(27,28,45,.95); }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(18px,5vw,72px) 42px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }footer a { text-decoration:none; }
@media (max-width:850px) { .tag-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.back-link { max-width:45vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } }
@media (max-width:520px) { .tag-directory-header { min-height:72px; padding:8px 14px; }.tag-directory-brand img { width:52px; height:52px; }.tag-directory-brand strong { font-size:21px; }.back-link { padding:8px 10px; font-size:11px; }main { width:min(100% - 22px,1180px); padding-top:22px; }.directory-hero { padding:27px 20px; border-radius:22px; }.tag-directory-grid { grid-template-columns:1fr; }.tag-directory-card { padding:15px; }footer { flex-direction:column; } }