/* VanillaMine Plugins. Colours from the logo: gold on graphite, dark first ("a mine at night"); light theme optional. */
:root{
	--bg:#0F0E0C; --bg-2:#141210; --surface:#1A1815; --surface-2:#231F1B; --surface-3:#2C2722; --border:#332D26; --border-2:#433B31;
	--text:#F3EDE2; --muted:#A99F8F; --faint:#7D7466;
	--gold:#E8AE3C; --gold-hi:#F6CD6B; --gold-lo:#9A6A12; --gold-ink:#1B1610; --link:#F2C25A;
	--ok:#7FD27A; --ok-bg:rgba(127,210,122,.12); --warn:#FFB74D; --warn-bg:rgba(255,183,77,.12); --err:#FF8A80; --err-bg:rgba(255,138,128,.12);
	--radius:14px; --radius-sm:10px; --shadow:0 10px 30px rgba(0,0,0,.35);
	--display:"Bricolage Grotesque",system-ui,sans-serif; --pixel:"Pixelify Sans","Bricolage Grotesque",system-ui,sans-serif;
	--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
	color-scheme:dark;
}
:root[data-theme="light"]{
	--bg:#FAF7F0; --bg-2:#F3EEE4; --surface:#FFFFFF; --surface-2:#F1ECE2; --surface-3:#E8E1D2; --border:#E3DBCB; --border-2:#D4C9B4;
	--text:#1B1916; --muted:#5F584D; --faint:#857C6E;
	--gold:#E3A93A; --gold-hi:#F4CB6B; --gold-lo:#A87418; --gold-ink:#1B1610; --link:#8C5E0F;
	--ok:#2F6B33; --ok-bg:#E4F1E2; --warn:#8A5300; --warn-bg:#FFF1D6; --err:#B3261E; --err-bg:#FDECEA;
	--shadow:0 8px 24px rgba(27,25,22,.08);
	color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--link);text-underline-offset:3px}
img{max-width:100%}
code,pre{font-family:var(--mono);font-size:.88em}
code{background:var(--surface-2);padding:.12em .4em;border-radius:6px}
pre{background:var(--surface-2);padding:14px 16px;border-radius:var(--radius-sm);overflow:auto;border:1px solid var(--border)}
pre code{background:none;padding:0}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.01em}
h1{font-size:2.1rem;font-weight:800;margin:.4em 0 .3em}
h2{font-size:1.45rem;font-weight:800;margin:0}
h3{font-size:1.05rem;font-weight:700;margin:0 0 .5em}
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .small{font-size:.86rem} .ok{color:var(--ok)} .warn{color:var(--warn)}
.lead{color:var(--muted);font-size:1.1rem;max-width:720px}
.narrow{max-width:520px;margin:40px auto}
.narrow-wide{max-width:920px}
.center{text-align:center}
.empty{color:var(--muted);padding:28px;border:1px dashed var(--border-2);border-radius:var(--radius);text-align:center}
.pixel{font-family:var(--pixel);letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Buttons: blocks with a lit top edge and a darker base ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:var(--gold-ink)!important;border:0;border-radius:var(--radius-sm);
	padding:11px 20px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
	box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 var(--gold-lo);transform:translateY(0);transition:transform .08s,box-shadow .08s,filter .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 var(--gold-lo)}
.btn.small{padding:7px 13px;font-size:.88rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 0 var(--gold-lo)}
.btn.ghost{background:var(--surface-2);color:var(--text)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 0 var(--border-2)}
.btn.danger{background:#C9473D;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 3px 0 #7A2721}
.btn.big{padding:15px 26px;font-size:1.08rem}
.link{background:none;border:0;color:var(--link);cursor:pointer;font:inherit;padding:0}
.link.danger{color:var(--err)}
.inline{display:inline}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(15,14,12,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
:root[data-theme="light"] .top{background:rgba(250,247,240,.9)}
.top-inner{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--text);text-decoration:none;white-space:nowrap}
.brand img{display:block;filter:drop-shadow(0 2px 8px rgba(232,174,60,.35))}
.search{position:relative;flex:1;min-width:200px;max-width:520px}
.search input{width:100%;padding:10px 70px 10px 40px;background:var(--surface);border:1px solid var(--border-2);border-radius:999px;color:var(--text);font:inherit}
.search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,174,60,.18)}
.search > .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
kbd{font-family:var(--mono);font-size:.72rem;padding:2px 6px;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:6px;color:var(--muted);background:var(--surface-2)}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.nav > a:not(.btn){color:var(--text);text-decoration:none;font-weight:500;padding:8px 10px;border-radius:8px}
.nav > a:not(.btn):hover{background:var(--surface-2)}
.me{display:flex;align-items:center;gap:6px}
.me img{border-radius:50%}
.badge{display:inline-block;min-width:20px;text-align:center;background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:0 6px;font-size:.75rem;font-weight:700}
.theme{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:10px;width:38px;height:38px;cursor:pointer}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:7px 10px;font-size:.85rem;font-weight:700}
.lang summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);min-width:150px;z-index:40}
.lang li a{display:block;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none}
.lang li a:hover,.lang li a[aria-current]{background:var(--surface-2)}

/* Live search suggestions */
.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:50;display:none}
.suggest.open{display:block}
.suggest a{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.suggest a[aria-selected="true"],.suggest a:hover{background:var(--surface-2)}
.suggest .s-name{font-weight:700}
.suggest .s-tag{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest .s-all{justify-content:center;color:var(--link);font-weight:600;border-top:1px solid var(--border);border-radius:0 0 10px 10px;margin-top:4px}
.suggest .s-empty{padding:10px;color:var(--muted)}

/* ---------- Flash ---------- */
.flash{padding:12px 16px;border-radius:12px;margin:18px 0;background:var(--surface-2);border:1px solid var(--border)}
.flash.ok{background:var(--ok-bg);border-color:transparent;color:var(--text)}
.flash.err{background:var(--err-bg);border-color:transparent}

/* ---------- Hero ---------- */
/* Night sky with a warm glow on the horizon; the pixel world (canvas.hero-world, assets/app.js) is drawn over it. */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);color:#F5F0E6;
	background:
		radial-gradient(1100px 360px at 50% 112%,rgba(232,174,60,.16),transparent 70%),
		linear-gradient(180deg,#0B0B12 0%,#100F13 45%,#16130F 100%)}
.hero-world,.hero-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.hero-world.ready,.hero-sky.ready{opacity:1}
.hero-sky{image-rendering:pixelated} /* the static sky of the scene, under the animated canvas (assets/world.js) */
.hero > .wrap{position:relative;z-index:1}
.hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center;padding-top:64px;padding-bottom:56px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--pixel);font-size:.95rem;color:var(--gold-hi);margin:0 0 14px;padding:4px 12px;border:1px solid rgba(232,174,60,.35);border-radius:999px;background:rgba(232,174,60,.08)}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin:0 0 16px;color:#F5F0E6;max-width:760px}
.hero h1 em{font-style:normal;color:var(--gold-hi)}
.hero .lead{color:#C9BFAE}
.hero-search{position:relative;display:flex;gap:10px;max-width:640px;margin:26px 0 14px}
.hero-search .field{position:relative;flex:1}
.hero-search .field > .ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#A99F8F;width:22px;height:22px}
.hero-search input{width:100%;font:inherit;font-size:1.1rem;padding:16px 18px 16px 52px;border-radius:14px;border:1px solid #433B31;background:rgba(26,24,21,.9);color:#F5F0E6}
.hero-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(232,174,60,.2)}
.quick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#A99F8F;font-size:.9rem}
.quick a{color:#E8DFCF;text-decoration:none;border:1px solid #3A342D;background:rgba(255,255,255,.03);padding:4px 11px;border-radius:999px}
.quick a:hover{border-color:var(--gold);color:var(--gold-hi)}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.hero-stats div{display:flex;flex-direction:column}
.hero-stats b{font-family:var(--pixel);font-size:1.7rem;color:#F5F0E6;line-height:1}
.hero-stats span{color:#A99F8F;font-size:.85rem}
@keyframes float{50%{transform:translateY(-10px)}}
.hero-inner{grid-template-columns:minmax(0,1fr) 380px;padding-bottom:40px}
.hero-search .field kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.04);border-color:#433B31;color:#A99F8F}
.hero-search input{padding-right:46px;transition:border-color .2s,box-shadow .2s,background .2s}
.hero-search input:focus{background:rgba(30,27,23,.95);box-shadow:0 0 0 4px rgba(232,174,60,.18),0 18px 50px rgba(232,174,60,.18)}
.quick a{display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s,transform .15s,background .15s}
.quick a .ico{width:15px;height:15px;color:var(--gold)}
.quick a:hover{transform:translateY(-1px);background:rgba(232,174,60,.08)}
.hero-stats div{padding-left:14px;border-left:2px solid rgba(232,174,60,.4)}

.hero-inner.solo{grid-template-columns:minmax(0,1fr)}
.hero-inner.solo .hero-copy{max-width:820px}

/* Right side of the hero: the three most downloaded plugins */
.showcase{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;background:rgba(26,24,21,.7);border:1px solid rgba(255,255,255,.08)}
.showcase-title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#A99F8F}
.top-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:#F5F0E6;text-decoration:none;transition:background .15s}
.top-row:hover{background:rgba(255,255,255,.05)}
.top-n{width:18px;text-align:center;font-family:var(--pixel);color:var(--gold)}
.fc-icon{width:42px;height:42px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--pixel);color:#fff;font-size:1.2rem}
.fc-icon img,.fc-icon .fc-img{width:42px;height:42px}
.fc-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.fc-text b{font-family:var(--display);font-size:.98rem}
.fc-text span{color:#A99F8F;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-dl{margin-left:auto;font-size:.85rem;color:#A99F8F;font-weight:600}
/* Perks strip under the hero */
.perks{position:relative;list-style:none;margin:0 0 -1px;padding:0 0 34px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.perks li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:#F5F0E6}
.perks b{display:block;font-size:.95rem;line-height:1.3}
.perks li > span:last-child > span{color:#A99F8F;font-size:.84rem;line-height:1.4;display:block}
.perk-ico{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(232,174,60,.14);color:var(--gold-hi)}
.perk-ico .ico{width:19px;height:19px}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important}
	html{scroll-behavior:auto}
}

/* ---------- Sections ---------- */
main.wrap{padding-bottom:20px}
.section{margin:48px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.section-head p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.section-head .more{display:inline-flex;align-items:center;gap:6px;font-weight:600;text-decoration:none}
.row-arrows{display:flex;gap:8px}
.row-arrows button{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.row-arrows button:hover{border-color:var(--gold)}

/* Categories */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.cat{--c:232,174,60;position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:16px 14px;border-radius:var(--radius);
	background:linear-gradient(135deg,rgba(var(--c),.13),rgba(var(--c),.02) 60%),var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none;
	transition:border-color .2s,transform .2s,box-shadow .2s}
.cat:hover{border-color:rgba(var(--c),.7);transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(var(--c),.55)}
.cat-text{position:relative;min-width:0}
.cat .cat-ico{position:relative;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 6px 14px -4px rgba(var(--c),.7);transition:transform .2s}
.cat:hover .cat-ico{transform:scale(1.08) rotate(-4deg)}
.tint-0{--c:232,174,60}.tint-1{--c:79,163,109}.tint-2{--c:76,137,197}.tint-3{--c:154,98,201}.tint-4{--c:208,87,76}.tint-5{--c:69,163,160}
.tint-6{--c:201,167,63}.tint-7{--c:110,131,184}.tint-8{--c:194,99,143}.tint-9{--c:139,170,69}.tint-10{--c:192,122,69}.tint-11{--c:150,145,135}
.cat .cat-ico .ico{width:22px;height:22px}
.cat b{display:block;font-weight:700;line-height:1.2}
.cat span{color:var(--muted);font-size:.82rem}

/* Plugin cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,280px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.scroller > *{scroll-snap-align:start}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
.cover{position:relative;height:118px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;opacity:.55}
.cover .icon{position:relative;z-index:1;width:68px;height:68px;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.cover .icon.placeholder{display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:2rem;color:#fff;background:rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.25)}
.flags{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.flag{font-family:var(--pixel);font-size:.78rem;padding:2px 8px;border-radius:6px;background:rgba(15,14,12,.78);color:#F5F0E6;border:1px solid rgba(255,255,255,.12)}
.flag.gold{background:var(--gold);color:var(--gold-ink);border-color:transparent}
.flag.green{background:#2F6B33;color:#E8F7E5;border-color:transparent}
.card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.card-title{font-family:var(--display);font-weight:800;font-size:1.08rem;display:flex;align-items:baseline;gap:8px;min-width:0}
.card-title .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ver{color:var(--muted);font-weight:500;font-size:.8rem;font-family:var(--mono)}
.tagline{margin:0;color:var(--muted);font-size:.92rem;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.chip-stat{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:3px 8px}
.chip-stat.cat-chip{color:var(--text)}
.chip-stat.ok{color:var(--ok);background:var(--ok-bg)}
.chip-stat.warn{color:var(--warn);background:var(--warn-bg)}
.chip-stat .ico{width:14px;height:14px}

/* Colour themes for covers and category icons (12 hues, picked from the name) */
.hue-0{background:linear-gradient(135deg,#7A4A12,#E8AE3C)} .hue-1{background:linear-gradient(135deg,#1F4E3A,#4FA36D)}
.hue-2{background:linear-gradient(135deg,#1E3D5C,#4C89C5)} .hue-3{background:linear-gradient(135deg,#4B2A63,#9A62C9)}
.hue-4{background:linear-gradient(135deg,#6A2626,#D0574C)} .hue-5{background:linear-gradient(135deg,#225252,#45A3A0)}
.hue-6{background:linear-gradient(135deg,#5B4A1C,#C9A73F)} .hue-7{background:linear-gradient(135deg,#2E3A56,#6E83B8)}
.hue-8{background:linear-gradient(135deg,#5A2E45,#C2638F)} .hue-9{background:linear-gradient(135deg,#3C4A22,#8BAA45)}
.hue-10{background:linear-gradient(135deg,#5B3920,#C07A45)} .hue-11{background:linear-gradient(135deg,#2B2B2B,#6E6A63)}
.cat-ico.hue-0,.cat-ico.hue-1,.cat-ico.hue-2,.cat-ico.hue-3,.cat-ico.hue-4,.cat-ico.hue-5,.cat-ico.hue-6,.cat-ico.hue-7,.cat-ico.hue-8,.cat-ico.hue-9,.cat-ico.hue-10,.cat-ico.hue-11{color:#fff}

/* Top downloads ranking */
.ranking{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;counter-reset:rank}
.ranking li{counter-increment:rank}
.ranking a{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--text);text-decoration:none}
.ranking a:hover{border-color:var(--gold)}
.ranking a::before{content:counter(rank);font-family:var(--pixel);font-size:1.3rem;color:var(--gold);width:28px;text-align:center}
.ranking .mini{width:40px;height:40px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);color:#fff;overflow:hidden}
.ranking .mini img{width:40px;height:40px}
.ranking b{display:block;line-height:1.2}
.ranking span{color:var(--muted);font-size:.82rem}
.ranking .dl{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--muted);font-size:.85rem;white-space:nowrap}

/* Author call to action */
.cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;padding:32px;border-radius:20px;border:1px solid var(--border-2);
	background:radial-gradient(600px 300px at 100% 0%,rgba(232,174,60,.18),transparent 60%),var(--surface)}
.cta h2{font-size:1.7rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:var(--surface-2)}
.steps .n{font-family:var(--pixel);font-size:1.1rem;color:var(--gold-ink);background:var(--gold);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.steps b{display:block}
.steps span{color:var(--muted);font-size:.9rem}

/* ---------- Browse page ---------- */
.browse{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;margin-top:20px}
.filters-panel{position:sticky;top:86px;align-self:start;display:flex;flex-direction:column;gap:18px}
.filters-panel h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.filter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.filter-list a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;color:var(--text);text-decoration:none;font-size:.93rem}
.filter-list a:hover{background:var(--surface-2)}
.filter-list a[aria-current="true"]{background:rgba(232,174,60,.14);color:var(--gold-hi)}
:root[data-theme="light"] .filter-list a[aria-current="true"]{color:var(--gold-lo)}
.filter-list .count{margin-left:auto;color:var(--faint);font-size:.8rem}
.filter-list .ico{width:18px;height:18px;color:var(--muted)}
.results-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.results-bar form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.results-search{position:relative;flex:1;min-width:220px}
.results-search input{width:100%;padding-left:38px}
.results-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.active-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.active-filters a{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);text-decoration:none;border:1px solid var(--border)}
.active-filters a::after{content:"×";color:var(--muted)}
.filters-toggle{display:none}
.pager{display:flex;gap:10px;justify-content:center;margin:28px 0}

/* ---------- Plugin page ---------- */
.project-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.project-hero .cover-bg{position:absolute;inset:0;opacity:.55}
.project-hero .cover-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,14,12,.2),var(--bg) 95%)}
.project-head{position:relative;display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;padding-top:46px;padding-bottom:26px}
.project-head .icon.big{width:104px;height:104px;border-radius:24px;box-shadow:0 14px 34px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.12)}
.project-head .icon.placeholder{display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:3rem;color:#fff}
.project-title{flex:1;min-width:240px}
.project-title h1{margin:0 0 6px;font-size:clamp(1.9rem,4vw,2.7rem)}
.project-title .lead{margin:0 0 12px}
.project-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.project-actions .meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);text-decoration:none;white-space:nowrap;border:1px solid var(--border)}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.tag.warn,.tag.state-2{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.tag.state-1{background:var(--err-bg);color:var(--err);border-color:transparent}
.project-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:30px;margin-top:22px}
.tabs{position:sticky;top:66px;z-index:5;display:flex;gap:4px;background:var(--bg);border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tabs a{padding:12px 14px;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;font-weight:500}
.tabs a:hover{color:var(--text);border-bottom-color:var(--gold)}
.box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.box h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.install pre{margin:8px 0;white-space:pre-wrap;word-break:break-all;font-size:.8rem}
.copy-btn{display:inline-flex;align-items:center;gap:6px;font-size:.82rem}
.details{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:.92rem}
.details dt{color:var(--muted)} .details dd{margin:0;overflow-wrap:anywhere}
.hash{font-size:.74rem;overflow-wrap:anywhere}
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:4px 0}
.big-list li{padding:10px 0;border-bottom:1px solid var(--border)}
.checks{margin:.5em 0;padding-left:1.2em}
.checks li{margin:2px 0;overflow-wrap:anywhere} /* long file:line paths break inside the box */
.checks li.error{color:var(--err)} .checks li.warning{color:var(--warn)} .checks li.info{color:var(--muted)}
.rule-ref{font-family:var(--mono);font-size:.78rem;margin-left:4px}
.review{padding:14px 0;border-bottom:1px solid var(--border)}
.stars{color:var(--gold)}
.markdown{overflow-wrap:break-word}
.markdown img{max-width:100%;border-radius:10px}
.markdown h1,.markdown h2{margin:1.2em 0 .5em}
.markdown table{border-collapse:collapse;display:block;max-width:100%;overflow-x:auto}
.markdown td,.markdown th{border:1px solid var(--border);padding:6px 10px}
.markdown td code,.markdown th code{overflow-wrap:anywhere;word-break:break-word} /* permission names must not force a README table wider than a phone */
.markdown blockquote{margin:0;padding:6px 16px;border-left:3px solid var(--gold);color:var(--muted);background:var(--surface)}

/* ---------- Tables, forms ---------- */
.table{width:100%;border-collapse:collapse;font-size:.93rem}
.table th,.table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{color:var(--muted);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.table tr.current td{background:var(--surface-2)}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:10px 12px;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,174,60,.16)}
textarea{width:100%;resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--gold);width:auto}
.form{display:flex;flex-direction:column;gap:14px;max-width:860px}
.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;flex:1}
.form label.check,label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.form.compact{gap:9px}
.form fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}
.form legend{font-family:var(--display);font-weight:800;padding:0 6px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.row label.check{flex:0 0 auto;white-space:nowrap}
.inline-form{flex-direction:row;flex-wrap:wrap}
.checkgrid,.rule-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px;margin-top:8px}
.segmented{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:12px;width:max-content;max-width:100%}
.segmented label{flex-direction:row!important;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;cursor:pointer;font-weight:600}
.segmented label:has(input:checked){background:var(--surface);box-shadow:0 1px 0 var(--border-2)}
body[data-src="upload"] .src-git,body[data-src="git"] .src-upload{display:none}
.src-git,.src-upload{display:flex;flex-direction:column;gap:12px}
.providers{display:flex;flex-direction:column;gap:12px;margin:22px 0}
.provider.gitlab{background:#FC6D26;color:#fff!important;box-shadow:0 3px 0 #A8441A}
.provider.github{background:#2D333B;color:#fff!important;box-shadow:0 3px 0 #111}
.provider.discord{background:#5865F2;color:#fff!important;box-shadow:0 3px 0 #3640A8}
.log{max-height:240px;font-size:.8rem}
.queue-item h3{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--border);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--text);background:var(--surface)}
.chip:hover{border-color:var(--gold)}

/* Rules page */
.rules .rule{padding:14px 0;border-bottom:1px solid var(--border)}
.rules .rule h3{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 4px;font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--text)}
.rules .rule p{margin:0;color:var(--muted)}
.rules .rule-id{font-family:var(--pixel);text-decoration:none;background:var(--gold);color:var(--gold-ink);border-radius:6px;padding:0 7px}
.rules .rule:target{background:var(--surface);border-radius:12px;padding-left:12px}
.rules-toc{margin:18px 0}
.rules h2{margin-top:1.6em}

/* ---------- Small screens ---------- */
@media (max-width:980px){
	.browse{grid-template-columns:1fr}
	.filters-panel{position:static;display:none}
	.filters-panel.open{display:flex}
	.filters-toggle{display:inline-flex}
	.project-body{grid-template-columns:minmax(0,1fr)}
	.cta{grid-template-columns:1fr}
}
@media (max-width:860px){
	.hero-inner{grid-template-columns:1fr;padding-top:40px}
	.hero-art{display:none}
	.top-inner{gap:10px}
	.search{order:3;flex-basis:100%;max-width:none}
	.nav{gap:2px}
	.nav > a:not(.btn){padding:6px 8px}
	.project-actions{align-items:flex-start}
	.project-actions .meta{justify-content:flex-start}
	.table{display:block;overflow-x:auto}
	.search kbd{display:none}
	/* the header wraps to three rows here: let it scroll away instead of covering a quarter of the screen */
	.top{position:static}
	.tabs{top:0}
}
@media (max-width:520px){
	.wrap{padding:0 16px}
	.top-inner{padding-top:8px;padding-bottom:8px} /* .wrap above would zero them: the header would touch the /demo banner */
	.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
	.cat{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
	.cat .cat-ico{width:36px;height:36px;border-radius:10px}
	.cat b{font-size:.9rem}
	.hero-search{flex-direction:column}
	.hero-stats{gap:20px}
	.cta{padding:22px}
}
.suggest .s-icon{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);color:#fff}
.suggest .s-text{min-width:0;display:flex;flex-direction:column}
/* cover: icon sits low so the flags at the top never cover it */
.cover{height:136px;align-items:flex-end;padding-bottom:16px}
.chip-stat.cat-chip{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex}
.chip-stat.cat-chip .ico{flex:none}
@media (max-width:1100px){.search kbd{display:none}.search input{padding-right:14px}}

/* ---------- Livelier details (2026-10 redesign) ---------- */
body{background:
	radial-gradient(1200px 600px at 100% 0%,rgba(232,174,60,.05),transparent 60%),
	radial-gradient(900px 600px at 0% 60%,rgba(76,137,197,.04),transparent 60%),var(--bg);background-attachment:fixed}
:root[data-theme="light"] body{background:var(--bg)}

/* Section titles with a small icon block */
.title-ico{display:flex;align-items:center;gap:14px}
.sec-ico{width:44px;height:44px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--gold-ink);
	background:linear-gradient(135deg,var(--gold-hi),var(--gold));box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 4px 0 var(--gold-lo)}
.sec-ico .ico{width:22px;height:22px}

/* Cards: light sweep and a lifted icon on hover */
.card::before{content:"";position:absolute;z-index:3;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);transition:left .6s}
.card:hover::before{left:130%}
.card:hover{box-shadow:0 18px 40px -14px rgba(232,174,60,.35),var(--shadow)}
.cover .icon{transition:transform .25s}
.card:hover .cover .icon{transform:translateY(-4px) scale(1.06) rotate(-3deg)}
.cover::before{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.28))}

/* Featured: one big spotlight banner plus the other picks */
.featured-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.featured-layout.single{grid-template-columns:1fr}
.featured-side{display:grid;gap:16px}
.featured-side .card{flex-direction:row}
.featured-side .cover{height:auto;width:120px;flex:none;align-items:center;padding:0}
.featured-side .flags{display:none}
.spotlight{position:relative;overflow:hidden;display:flex;align-items:center;gap:28px;padding:36px;min-height:300px;border-radius:20px;color:#fff;text-decoration:none;
	box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.spotlight:hover{transform:translateY(-3px);box-shadow:0 26px 60px -20px rgba(0,0,0,.7)}
.spot-pattern{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
	background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 70%)}
.spotlight::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.72),rgba(10,9,8,.25) 70%,transparent)}
.spot-icon{position:relative;z-index:1;flex:none}
.spot-img{width:132px;height:132px;border-radius:30px;box-shadow:0 20px 44px rgba(0,0,0,.5);border:3px solid rgba(255,255,255,.2);transition:transform .3s}
.spot-img.placeholder{display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-size:3.6rem;background:rgba(0,0,0,.25)}
.spotlight:hover .spot-img{transform:rotate(-5deg) scale(1.05)}
.spot-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.spot-name{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.05;font-weight:800}
.spot-name .ver{color:rgba(255,255,255,.65);font-size:.9rem}
.spot-tagline{color:rgba(255,255,255,.85);font-size:1.05rem;max-width:520px}
.spot-meta{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}
.pill .ico{width:15px;height:15px}
.spot-btn{margin-top:6px}

/* Most downloaded: podium for the top three */
.podium{list-style:none;margin:0 0 12px;padding:14px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end}
.podium a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px 20px;border-radius:18px;
	background:linear-gradient(180deg,rgba(var(--m),.16),var(--surface) 70%);border:1px solid rgba(var(--m),.35);color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
.podium a:hover{transform:translateY(-4px);box-shadow:0 18px 40px -16px rgba(var(--m),.6)}
.podium .place-1{--m:232,174,60;order:2}
.podium .place-1 a{padding-top:38px;padding-bottom:30px}
.podium .place-2{--m:190,196,206;order:1}
.podium .place-3{--m:205,127,50;order:3}
.medal{position:absolute;top:-14px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--pixel);font-weight:700;color:#1B1610;
	background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 50%),rgb(var(--m));box-shadow:0 4px 12px rgba(var(--m),.6)}
.pod-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--pixel);font-size:1.7rem;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.place-1 .pod-icon{width:80px;height:80px;border-radius:20px}
.pod-img{width:100%;height:100%}
.fc-img.placeholder,.pod-img.placeholder{display:flex;align-items:center;justify-content:center}
.pod-text{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
.pod-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium b{font-family:var(--display);font-size:1.1rem;margin-top:6px;overflow:hidden;text-overflow:ellipsis}
.pod-dl{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-weight:700;color:rgb(var(--m))}
.pod-dl .ico{width:16px;height:16px}
.ranking{counter-reset:rank 3}

/* Empty catalog: three mystery blocks and a call to be the first */
.first-slot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center;padding:30px;border-radius:20px;border:1px dashed var(--border-2);
	background:radial-gradient(500px 220px at 0% 50%,rgba(232,174,60,.1),transparent 70%),var(--surface)}
.first-slot h3{font-family:var(--display);font-size:1.4rem;margin:0 0 6px}
.first-slot p{margin:0 0 16px;max-width:560px}
.ghosts{display:flex}
.mystery{width:86px;height:86px;border-radius:20px;display:flex;align-items:center;justify-content:center;border:3px solid rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.4);animation:float 5s ease-in-out infinite}
.mystery + .mystery{margin-left:-18px}
.mystery:nth-child(2){animation-delay:-1.6s}
.mystery:nth-child(3){animation-delay:-3.2s}
.mystery i{font-style:normal;font-family:var(--pixel);font-size:2.4rem;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.3)}

/* Author call to action: a few blocks in the corner */
.cta{position:relative;overflow:hidden}
.cta > *{position:relative}
.cta-blocks{position:absolute!important;right:24px;bottom:-10px;display:grid;grid-template-columns:repeat(2,34px);gap:4px;opacity:.15;transform:rotate(-8deg)}
.cta-blocks i{width:34px;height:34px;border-radius:6px;background:var(--gold);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.25)}
.cta-blocks i:first-child{grid-column:2}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Sections slide in as they scroll into view (only with JavaScript, so nothing stays hidden without it) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:1100px){
	.hero-inner{grid-template-columns:minmax(0,1fr) 340px}
	.perks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
	.hero-inner{grid-template-columns:minmax(0,1fr)}
	.showcase{display:none}
	.featured-layout{grid-template-columns:minmax(0,1fr)}
	.spotlight{flex-direction:column;align-items:flex-start;padding:26px;min-height:0}
	.spot-img{width:96px;height:96px;border-radius:22px}
	.first-slot{grid-template-columns:1fr}
}
@media (max-width:620px){
	.perks{grid-template-columns:1fr;gap:8px}
	.podium{grid-template-columns:minmax(0,1fr);gap:12px}
	.podium li{order:0!important}
	.podium a{flex-direction:row;text-align:left;padding:16px!important;gap:12px}
	.podium .medal{position:static;flex:none}
	.pod-icon,.place-1 .pod-icon{width:48px;height:48px;font-size:1.3rem}
	.podium b{margin:0}
	.pod-text{align-items:flex-start}
	.pod-dl{margin:0 0 0 auto}
	.title-ico{gap:10px}
	.sec-ico{width:36px;height:36px}
}

/* ---------- Motion (2026-10): entrances, XP bar, staggered sections, tilting cards ---------- */
/* Every animation here only plays when it adds something; prefers-reduced-motion switches them all off (see above). */

/* The hero leaves room at the bottom for the ground of the pixel world; panels are frosted glass over it. */
.perks{padding-bottom:118px}
.perks li,.showcase{background:rgba(14,13,12,.72)}
.kicker{background:rgba(20,17,12,.6)}

/* Entrance: the title falls in word by word (assets/app.js wraps the words), the rest rises after it. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes drop{from{opacity:0;transform:translateY(-75%) rotate(-7deg) scale(.92)}}
@keyframes slide-in{from{opacity:0;transform:translateX(36px)}}
.hero h1 .w{display:inline-block;animation:drop .75s cubic-bezier(.2,1.45,.35,1) backwards;animation-delay:calc(var(--i) * 65ms + .15s)}
.hero-copy > .kicker{animation:rise .7s ease backwards .05s}
.hero-copy > .lead{animation:rise .7s ease backwards .6s}
.hero-copy > .hero-search{animation:rise .7s ease backwards .75s}
.hero-copy > .quick{animation:rise .7s ease backwards .9s}
.hero-copy > .hero-stats{animation:rise .7s ease backwards 1s}
.perks li{animation:rise .7s ease backwards}
.perks li:nth-child(1){animation-delay:1.05s}
.perks li:nth-child(2){animation-delay:1.15s}
.perks li:nth-child(3){animation-delay:1.25s}
.perks li:nth-child(4){animation-delay:1.35s}
.showcase{animation:slide-in .9s cubic-bezier(.2,1,.3,1) backwards .55s}
.top-row{animation:rise .6s ease backwards}
.top-row:nth-of-type(1){animation-delay:.8s}
.top-row:nth-of-type(2){animation-delay:.9s}
.top-row:nth-of-type(3){animation-delay:1s}
/* once the page has settled, the search box glows once to say "start here" */
@keyframes call{0%,100%{box-shadow:0 0 0 0 rgba(232,174,60,0)}40%{box-shadow:0 0 0 6px rgba(232,174,60,.22),0 18px 50px rgba(232,174,60,.2)}}
.hero-search .field{border-radius:14px;animation:call 1.8s ease 1.6s 1}
.perk-ico{transition:transform .25s}
.perks li:hover .perk-ico{transform:rotate(-8deg) scale(1.1)}

/* XP bar: fixed at the very top, fills up as you scroll down */
.xpbar{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;pointer-events:none;
	-webkit-mask:repeating-linear-gradient(90deg,#000 0 46px,transparent 46px 48px);mask:repeating-linear-gradient(90deg,#000 0 46px,transparent 46px 48px)}
.xpbar i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
	background:linear-gradient(90deg,#5DBB3F,#A6E83C 60%,#F6CD6B);box-shadow:0 0 10px rgba(166,232,60,.7)}
.scrolled .top{box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* Sections: the title icon spins in and the items pop in one after another */
@keyframes icon-in{from{opacity:0;transform:rotate(-140deg) scale(.3)}}
@keyframes pop{from{opacity:0;transform:translateY(-22px) scale(.9)}}
.js .reveal.in .sec-ico{animation:icon-in .7s cubic-bezier(.2,1.5,.4,1) backwards .1s}
.js .reveal:not(.in) .stagger > *{opacity:0}
.js .reveal.in .stagger > *,.stagger-load > *{animation:pop .6s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--d,0) * 55ms + .12s)}
.scroller{padding-top:8px;margin-top:-8px}

/* Cards lean towards the mouse (assets/app.js sets --rx/--ry) with a soft light under the pointer */
.card.tilt:hover,.cat.tilt:hover,.podium a.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px)}
.spotlight.tilt:hover{transform:perspective(1600px) rotateX(calc(var(--rx,0deg) * .5)) rotateY(calc(var(--ry,0deg) * .5)) translateY(-3px)}
.card::after,.cat::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
	background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 60%)}
.card:hover::after,.cat:hover::after{opacity:1}
.cat::after{z-index:0}
.cat .cat-text,.cat .cat-ico{z-index:1}
@media (hover:none){
	.card:active,.cat:active,.podium a:active,.spotlight:active{transform:scale(.97);transition-duration:.08s}
}

/* Featured banner: the grid slowly pans */
@keyframes pan{to{background-position:280px 280px}}
.spot-pattern{animation:pan 30s linear infinite}

/* Podium medals catch the light now and then */
@keyframes glint{0%,72%{transform:translateX(-130%) skewX(-20deg)}100%{transform:translateX(130%) skewX(-20deg)}}
.medal{overflow:hidden}
.medal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.8) 50%,transparent 70%);animation:glint 4.5s ease-in-out infinite}
.podium .place-2 .medal::after{animation-delay:1.5s}
.podium .place-3 .medal::after{animation-delay:3s}

/* Empty catalog: the mystery blocks wobble on hover and break when clicked */
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.05)}75%{transform:rotate(6deg) scale(1.05)}}
.mystery{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mystery:hover i{display:inline-block;animation:wobble .5s ease}
.shard{position:fixed;z-index:70;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:2px;pointer-events:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.3)}

/* Author call to action: its blocks bob gently */
@keyframes bob{50%{transform:translateY(-6px)}}
.cta-blocks i{animation:bob 4s ease-in-out infinite}
.cta-blocks i:nth-child(2){animation-delay:-1s}
.cta-blocks i:nth-child(3){animation-delay:-2s}
.cta-blocks i:nth-child(4){animation-delay:-3s}

@media (max-width:860px){
	.perks{padding-bottom:104px}
}
@media (max-width:620px){
	.perks{grid-template-columns:repeat(2,minmax(0,1fr))}
	.perks li{flex-direction:column;gap:8px;padding:12px}
	.perks b{font-size:.9rem}
	.podium .medal{position:relative;top:auto}
}

/* Phones: a three-row header (brand + Publish, links + language + theme, search) instead of four.
   The nav becomes display:contents so its items can be ordered next to the brand. */
@media (max-width:620px){
	.top-inner{column-gap:2px;row-gap:8px}
	.nav{display:contents}
	.brand{margin-right:auto}
	.nav > .btn{order:1}
	.top-inner::after{content:"";order:2;flex-basis:100%;height:0;margin-top:-8px}
	.nav > a:not(.btn),.nav > form{order:3}
	.nav > a:not(.btn){padding:6px 7px;font-size:.95rem}
	.lang{order:4;margin-left:auto}
	.lang summary .ico{display:none}
	.theme{order:5;margin-left:4px}
	.search{order:6}
}
@media (max-width:400px){
	.nav > a:not(.btn){padding:6px 5px;font-size:.9rem}
	.lang summary{padding:7px 8px}
	.theme{width:34px;height:34px}
	.brand{font-size:1rem;gap:8px}
}
.card-body{min-width:0}

/* ---------- Footer: a strip of grass and dirt, then the stone with links ---------- */
/* ---------- Footer (2026-10 redesign) ----------
   The page ends on a strip of grass, like the ground of the hero world, and the footer is the stone under it: brand and pitch,
   three link columns with the language picker, and a darker bedrock bar with the small print. Everything is drawn with
   gradients (no images, no inline styles). These rules replace the older .foot block under "Footer" above. */
.foot{position:relative;margin-top:84px;padding:0;border-top:0;color:var(--muted);font-size:.92rem;
	background:linear-gradient(180deg,rgba(6,5,4,.5),rgba(6,5,4,0)) 0 24px/100% 80px no-repeat,var(--bg-2)}
:root[data-theme="light"] .foot{background:linear-gradient(180deg,rgba(87,60,39,.16),rgba(87,60,39,0)) 0 24px/100% 80px no-repeat,var(--bg-2)}
/* a faint block grid in the stone, fading out as it goes down */
.foot::after{content:"";position:absolute;inset:24px 0 0;pointer-events:none;
	background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;
	-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
:root[data-theme="light"] .foot::after{background-image:linear-gradient(rgba(27,25,22,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(27,25,22,.045) 1px,transparent 1px)}

/* Grass and dirt in 4px "pixels" (the hero's block size), with block seams every 16px and a ragged lower edge.
   Each row is a repeating gradient with its own period, so the pattern never visibly repeats. */
.foot-ground{position:relative;height:24px;
	--g1:#478a3b;--g2:#3d7633;--g3:#33662b;--g4:#559a45;--d1:#573c27;--d2:#4b3321;--d3:#63452e;
	--b1:var(--g1);--b2:var(--g2);--b3:var(--g3);--f1:#e0533d;--f2:#f2d14b;--f3:#6fb3ee;--lit:rgba(210,255,170,.22);--glow:rgba(255,180,80,.32);
	--flame:#ffcf5c;--flame-core:#fff1c2;--stick:#6b4a2a;--torch-light:255,170,70;
	background:
		radial-gradient(60px 18px at calc(89% - 2px) 0,var(--glow),transparent) 0 0/100% 100% no-repeat,
		linear-gradient(var(--lit),var(--lit)) 0 0/100% 1px no-repeat,
		repeating-linear-gradient(90deg,var(--g1) 0 12px,var(--g2) 12px 20px,var(--g4) 20px 28px,var(--g2) 28px 36px,var(--g1) 36px 52px,var(--g3) 52px 56px) 0 0/100% 4px no-repeat,
		repeating-linear-gradient(90deg,var(--g2) 0 8px,transparent 8px 12px,var(--g3) 12px 16px,transparent 16px 24px,var(--g1) 24px 32px,transparent 32px 44px,var(--g2) 44px 48px,transparent 48px 60px) 0 4px/100% 4px no-repeat,
		repeating-linear-gradient(90deg,transparent 0 4px,var(--g3) 4px 8px,transparent 8px 28px,var(--g2) 28px 32px,transparent 32px 52px) 0 8px/100% 4px no-repeat,
		repeating-linear-gradient(90deg,transparent 0 15px,rgba(0,0,0,.2) 15px 16px) 0 4px/100% 16px no-repeat,
		repeating-linear-gradient(90deg,transparent 0 40px,var(--d3) 40px 44px,transparent 44px 68px) 0 8px/100% 4px no-repeat,
		repeating-linear-gradient(90deg,transparent 0 16px,var(--d2) 16px 20px,transparent 20px 36px,var(--d2) 36px 40px,transparent 40px 44px) 0 12px/100% 4px no-repeat,
		repeating-linear-gradient(90deg,transparent 0 8px,var(--d3) 8px 12px,transparent 12px 32px,var(--d2) 32px 40px,transparent 40px 56px) 0 16px/100% 4px no-repeat,
		repeating-linear-gradient(90deg,var(--d2) 0 12px,transparent 12px 20px,var(--d1) 20px 28px,transparent 28px 36px,var(--d2) 36px 48px,transparent 48px 64px) 0 20px/100% 4px no-repeat,
		linear-gradient(var(--d1),var(--d1)) 0 0/100% 20px no-repeat}
/* grass blades and a few flowers standing on the strip */
.foot-ground::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px;pointer-events:none;
	background:
		linear-gradient(90deg,transparent 0 59px,var(--f1) 59px 63px,transparent 63px 171px,var(--f2) 171px 175px,transparent 175px 283px,var(--f3) 283px 287px,transparent 287px) 0 0/340px 4px repeat-x,
		linear-gradient(90deg,transparent 0 60px,var(--b2) 60px 62px,transparent 62px 172px,var(--b2) 172px 174px,transparent 174px 284px,var(--b2) 284px 286px,transparent 286px) 0 4px/340px 8px repeat-x,
		linear-gradient(90deg,transparent 0 24px,var(--b3) 24px 26px,transparent 26px 128px,var(--b3) 128px 130px,transparent 130px 228px,var(--b2) 228px 230px,transparent 230px) 0 6px/340px 6px repeat-x,
		linear-gradient(90deg,transparent 0 20px,var(--b3) 20px 22px,transparent 22px 28px,var(--b3) 28px 30px,transparent 30px 124px,var(--b2) 124px 126px,transparent 126px 132px,var(--b2) 132px 134px,transparent 134px 224px,var(--b3) 224px 226px,transparent 226px 232px,var(--b3) 232px 234px,transparent 234px 310px,var(--b1) 310px 312px,transparent 312px 316px,var(--b1) 316px 318px,transparent 318px) 0 8px/340px 4px repeat-x}
/* one torch, flickering */
.foot-torch{position:absolute;bottom:100%;right:11%;width:4px;height:14px;pointer-events:none;
	background:linear-gradient(var(--flame-core),var(--flame-core)) 1px 1px/2px 2px no-repeat,linear-gradient(var(--flame),var(--flame)) 0 0/4px 4px no-repeat,linear-gradient(var(--stick),var(--stick)) 1px 4px/2px 10px no-repeat;
	filter:drop-shadow(0 0 5px rgba(var(--torch-light),.7));animation:torch 2.6s ease-in-out infinite}
@keyframes torch{30%{filter:drop-shadow(0 0 9px rgba(var(--torch-light),.95))}55%{filter:drop-shadow(0 0 4px rgba(var(--torch-light),.6))}80%{filter:drop-shadow(0 0 8px rgba(var(--torch-light),.9))}}

/* Brand block and link columns */
.foot .foot-main{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr);gap:48px;justify-content:normal;align-items:start;padding-top:46px;padding-bottom:40px}
.foot .foot-brand .brand{display:inline-flex;font-size:1.3rem;gap:12px;color:var(--text)}
.foot-brand .brand img{width:40px;height:40px}
.foot-pitch{margin:16px 0 6px;max-width:400px;color:var(--text);font-size:1.02rem;line-height:1.45}
.foot-pitch a{color:var(--link)}
.foot-note{margin:0 0 20px;max-width:400px;font-size:.88rem;line-height:1.55}
.foot-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.foot-col h2{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-family:var(--pixel);font-size:1.02rem;font-weight:700;letter-spacing:.03em;line-height:1.2;color:var(--text)}
.foot-col h2::before{content:"";width:10px;height:10px;flex:none;border-radius:2px;background:var(--gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 var(--gold-lo)}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.foot-links a{position:relative;display:inline-block;padding:5px 0;color:var(--muted);text-decoration:none;transition:color .15s,transform .15s}
.foot-links a::before{content:"";position:absolute;left:-13px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--gold);opacity:0;transform:scale(.3);transition:opacity .15s,transform .15s}
.foot-links a:hover{color:var(--link);transform:translateX(4px)}
.foot-links a:hover::before{opacity:1;transform:none}
.foot-links a.ext::after{content:" ↗";font-size:.85em;opacity:.65}
.foot-links code{font-size:.84em;color:inherit}

/* Language picker: inventory slots, the current language filled in gold */
.foot-sub{display:flex;align-items:center;gap:6px;margin:16px 0 4px;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.foot-sub .ico{width:14px;height:14px}
.foot-langs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.foot-langs a{display:inline-flex;align-items:center;gap:10px;padding:5px 0;color:var(--muted);text-decoration:none}
.foot-langs a::before{content:"";box-sizing:border-box;width:10px;height:10px;flex:none;border-radius:2px;border:2px solid var(--border-2);transition:border-color .15s}
.foot-langs a:hover::before{border-color:var(--gold)}
.foot-langs a[aria-current]{color:var(--text);font-weight:600}
.foot-langs a[aria-current]::before{border:0;background:var(--gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 var(--gold-lo)}

/* Bedrock bar with the small print */
.foot-bottom{position:relative;z-index:1;border-top:1px solid var(--border);
	background:repeating-conic-gradient(rgba(255,255,255,.02) 0 25%,transparent 0 50%) 0 0/16px 16px,rgba(0,0,0,.22)}
:root[data-theme="light"] .foot-bottom{background:repeating-conic-gradient(rgba(27,25,22,.025) 0 25%,transparent 0 50%) 0 0/16px 16px,rgba(27,25,22,.035)}
.foot .foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;padding-top:16px;padding-bottom:18px;font-size:.8rem;color:var(--faint)}
.foot-legal{margin:0;display:flex;flex-wrap:wrap;gap:2px 14px}
.foot .foot-top{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:auto;padding:6px 12px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface-2);
	color:var(--text);font-weight:600;text-decoration:none;box-shadow:0 2px 0 var(--border-2)}
.foot-top .ico{width:15px;height:15px;transform:rotate(-90deg);transition:transform .2s}
.foot-top:hover .ico{transform:rotate(-90deg) translateX(2px)}

@media (max-width:980px){
	.foot .foot-main{grid-template-columns:minmax(0,1fr);gap:34px}
	.foot-pitch,.foot-note{max-width:560px}
}
@media (max-width:620px){
	.foot{margin-top:64px}
	.foot .foot-main{padding-top:36px;padding-bottom:30px;gap:30px}
	.foot-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
	.foot-project{grid-column:1/-1}
	.foot-links a,.foot-langs a{padding:7px 0}
	.foot-project .foot-links,.foot-langs{flex-direction:row;flex-wrap:wrap;column-gap:22px}
	.foot .foot-bottom .wrap{flex-direction:column;align-items:flex-start;gap:12px}
	.foot .foot-top{margin-left:0}
}

/* ---------- /demo: the preview with sample plugins ----------
   A gold band above the header (not sticky, so the sticky header and tabs keep their offsets), a dashed gold line under
   the header, a "Sample" flag on every card and a disabled download button. Colours come from the theme tokens. */
.demo-banner{position:relative;z-index:31;background:var(--gold);color:var(--gold-ink);border-bottom:2px solid var(--gold-lo);font-size:.9rem;line-height:1.45}
.demo-banner .wrap{padding-top:9px;padding-bottom:9px;overflow-wrap:anywhere}
.demo-banner b{font-family:var(--pixel);font-weight:700;letter-spacing:.02em;margin-right:4px}
.demo-banner span{margin-right:6px}
.demo-banner a{color:var(--gold-ink);font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.demo-banner a:hover{text-decoration-thickness:2px}
body.is-demo header.top{border-bottom:2px dashed var(--gold)}
.flag.sample{background:rgba(15,14,12,.82);color:var(--gold-hi);border:1px dashed var(--gold)}
/* On cards it sits alone in the bottom-left corner of the cover, beside the icon: in the top row it would push "Updated" onto a second line over the icon. */
.cover > .flag.sample{position:absolute;left:10px;bottom:10px;z-index:2}
.featured-side .cover > .flag.sample{display:none}
.tag.demo{background:transparent;color:var(--link);border:1px dashed var(--gold)}
.btn.disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
.demo-foot{flex-basis:100%;color:var(--muted)}
.demo-foot a{color:var(--link)}
.first-slot .first-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0;max-width:none}

/* ---------- Hero worlds (2026-10): the Overworld by day, at sunset and at night, the Nether and the End ----------
   assets/app.js sets html[data-world] from the visitor's clock (or the dimension picked in the hero) and assets/world.js
   draws that scene. Until the canvas is ready the hero shows a matching sky; the footer strip turns into that world's ground. */
:root[data-world="day"] .hero{background:linear-gradient(180deg,#4a80da,#6b9be6 42%,#9cbfee 75%,#c6dcf4)}
:root[data-world="sunset"] .hero{background:linear-gradient(180deg,#1a1634,#2f2350 22%,#5f2f62 42%,#a3445f 56%,#d9603f 66%,#f08c45 74%,#fcb565 84%,#ffd28f)}
:root[data-world="nether"] .hero{background:radial-gradient(1100px 420px at 50% 108%,rgba(255,92,24,.3),transparent 70%),linear-gradient(180deg,#120303,#240606 30%,#3d0b09 62%,#56140b 85%,#6a1d0c)}
:root[data-world="end"] .hero{background:linear-gradient(180deg,#0d0913,#150f1e 60%,#1d1428)}

/* A shade behind the copy where the scene is bright or busy, so the light text keeps its contrast: a gradient that runs
   off the left edge and fades out to the right, at the top and at the bottom (no blur: it costs nothing to draw). By day
   and at sunset it deepens downwards, like those skies brighten; in the Nether it only darkens the lower part, over the
   glow of the lava; in the End it is a light veil over the pillars. */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-28px -120px -40px -100vw;pointer-events:none;opacity:0;transition:opacity .8s ease;
	-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 120px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);
	-webkit-mask-composite:source-in;
	mask-image:linear-gradient(90deg,#000 calc(100% - 120px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);
	mask-composite:intersect}
/* By day: a saturated zenith blue rather than navy (same darkness), with a long eased fade on the right; on wide screens
   it also fades in over 90 px from the top of the hero, so it has no visible top edge. */
:root[data-world="day"] .hero-copy::before{opacity:1;inset:-28px -200px -40px -100vw;background:linear-gradient(180deg,rgba(0,27,127,.5),rgba(0,27,127,.72) 38%,rgba(0,27,127,.78));
	-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 200px),rgba(0,0,0,.7) calc(100% - 130px),rgba(0,0,0,.28) calc(100% - 60px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);
	mask-image:linear-gradient(90deg,#000 calc(100% - 200px),rgba(0,0,0,.7) calc(100% - 130px),rgba(0,0,0,.28) calc(100% - 60px),transparent),linear-gradient(180deg,transparent,#000 28px,#000 calc(100% - 40px),transparent)}
@media (min-width:861px){
	:root[data-world="day"] .hero-copy::before{top:-64px;
		-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 200px),rgba(0,0,0,.7) calc(100% - 130px),rgba(0,0,0,.28) calc(100% - 60px),transparent),linear-gradient(180deg,transparent,#000 90px,#000 calc(100% - 40px),transparent);
		mask-image:linear-gradient(90deg,#000 calc(100% - 200px),rgba(0,0,0,.7) calc(100% - 130px),rgba(0,0,0,.28) calc(100% - 60px),transparent),linear-gradient(180deg,transparent,#000 90px,#000 calc(100% - 40px),transparent)}
}
:root[data-world="sunset"] .hero-copy::before{opacity:1;background:linear-gradient(180deg,rgba(30,12,36,.3),rgba(30,12,36,.5) 45%,rgba(30,12,36,.7))}
:root[data-world="nether"] .hero-copy::before{opacity:1;background:linear-gradient(180deg,transparent 0 60%,rgba(16,3,3,.55) 82%,rgba(16,3,3,.72))}
:root[data-world="end"] .hero-copy::before{opacity:1;background:rgba(9,6,14,.4)}
/* Under the bright skies the small muted labels take the colour of the lead, and the glass panels get darker. */
:root:is([data-world="day"],[data-world="sunset"]) :is(.hero .quick,.hero-stats span,.perks li > span:last-child > span,.showcase-title,.showcase .fc-text span,.showcase .fc-dl){color:#C9BFAE}
:root:is([data-world="day"],[data-world="sunset"],[data-world="end"]) :is(.perks li,.showcase){background:rgba(14,13,12,.86)} /* (the End: over the crystals and their beams) */
:root[data-world="nether"] :is(.perks li,.showcase){background:rgba(14,13,12,.92)} /* over the lava and the bright warped fungi */
/* The code chip in the lead sits on the scene in every theme, so it keeps its dark look in the light theme too. */
.hero code{background:rgba(0,0,0,.4);color:#E8E0D0}

/* Dimension buttons: a small hotbar in the top right corner of the hero, the current world in the selected slot. */
/* Opaque slots, so the glowstone and the clouds passing behind them never wash the icons out. */
.dims{position:absolute;top:14px;right:20px;z-index:2;display:flex;gap:2px;padding:3px;border-radius:3px;
	background:#0c0b0a;box-shadow:0 0 0 2px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
.dims[hidden]{display:none}
.dims button{position:relative;width:40px;height:40px;padding:0;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;cursor:pointer;
	background:#2a2826;box-shadow:inset 2px 2px 0 rgba(0,0,0,.4),inset -2px -2px 0 rgba(255,255,255,.1);-webkit-tap-highlight-color:transparent}
.dims svg{display:block;width:24px;height:24px;transition:transform .15s ease}
@media (hover:hover) and (pointer:fine){ /* a tap on a phone would leave the hover look stuck on the button */
	.dims button:hover{background:#34312e}
	.dims button:hover svg{transform:translateY(-2px)}
}
.dims button[aria-pressed="true"]{z-index:1;background:#3a3633;box-shadow:0 0 0 2px #e9e9e9,0 0 0 4px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4)}
.dims button[aria-pressed="true"] svg{transform:scale(1.12)}
.dims button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;z-index:2}
@media (max-width:860px){
	/* room for the buttons above the kicker (this also undoes .wrap's zero top padding under 520 px) */
	.hero > .hero-inner{padding-top:72px}
}
@media (max-width:520px){
	.dims{right:16px}
}

/* The footer strip follows the world: crimson nylium on netherrack with a soul torch, end stone with an end rod. */
:root[data-world="nether"] .foot-ground{--g1:#a82828;--g2:#901c1e;--g3:#6e1214;--g4:#c03a32;--d1:#6b2b29;--d2:#572220;--d3:#7f3633;
	--b1:#c9302b;--b2:#a11d1d;--b3:#7e1515;--f1:#a5262e;--f2:#f29a3a;--f3:#18a198;--lit:rgba(255,150,120,.3);--glow:rgba(90,210,240,.14);
	--flame:#5fd7f0;--flame-core:#e6fdff;--stick:#4a3426;--torch-light:90,210,240}
:root[data-world="end"] .foot-ground{--g1:#e8eab9;--g2:#dcdea4;--g3:#cdd093;--g4:#f2f4cc;--d1:#cfd295;--d2:#bfc185;--d3:#dfe1aa;
	--b1:#7d5a88;--b2:#5e3f69;--b3:#45304e;--f1:#c9a2d4;--f2:#ead6f0;--f3:#c9a2d4;--lit:rgba(255,255,240,.45);--glow:rgba(226,214,255,.35);
	--flame:#f6f1fb;--flame-core:#ffffff;--stick:#d8c8e6;--torch-light:220,200,255}
/* What stands on the strip: in the Nether crimson and warped fungi and tufts of nether wart (on an uneven 452 px period),
   in the End chorus plants (the End has no grass). In the light theme the end stone is a shade darker, so it shows on
   the cream footer. */
:root[data-world="nether"] .foot-ground::before{
	background:
		linear-gradient(90deg,transparent 0 59px,#f29a3a 59px 61px,transparent 61px 291px,#f29a3a 291px 293px,transparent 293px) 0 2px/452px 2px repeat-x,
		linear-gradient(90deg,transparent 0 55px,#a5262e 55px 67px,transparent 67px 285px,#18a198 285px 297px,transparent 297px) 0 2px/452px 4px repeat-x,
		linear-gradient(90deg,transparent 0 60px,#d8c49a 60px 62px,transparent 62px 290px,#d8c49a 290px 292px,transparent 292px) 0 6px/452px 6px repeat-x,
		linear-gradient(90deg,transparent 0 173px,#c22a2a 173px 176px,transparent 176px 393px,#c22a2a 393px 396px,transparent 396px) 0 2px/452px 3px repeat-x,
		linear-gradient(90deg,transparent 0 169px,#c22a2a 169px 172px,transparent 172px 177px,#c22a2a 177px 180px,transparent 180px 389px,#c22a2a 389px 392px,transparent 392px 397px,#c22a2a 397px 400px,transparent 400px) 0 4px/452px 3px repeat-x,
		linear-gradient(90deg,transparent 0 170px,#7e1515 170px 172px,transparent 172px 174px,#7e1515 174px 176px,transparent 176px 178px,#7e1515 178px 180px,transparent 180px 390px,#7e1515 390px 392px,transparent 392px 394px,#7e1515 394px 396px,transparent 396px 398px,#7e1515 398px 400px,transparent 400px) 0 6px/452px 6px repeat-x,
		linear-gradient(90deg,transparent 0 24px,var(--b3) 24px 26px,transparent 26px 128px,var(--b3) 128px 130px,transparent 130px 228px,var(--b2) 228px 230px,transparent 230px 340px,var(--b3) 340px 342px,transparent 342px) 0 6px/452px 6px repeat-x,
		linear-gradient(90deg,transparent 0 20px,var(--b3) 20px 22px,transparent 22px 28px,var(--b3) 28px 30px,transparent 30px 124px,var(--b2) 124px 126px,transparent 126px 132px,var(--b2) 132px 134px,transparent 134px 224px,var(--b3) 224px 226px,transparent 226px 232px,var(--b3) 232px 234px,transparent 234px 310px,var(--b1) 310px 312px,transparent 312px 316px,var(--b1) 316px 318px,transparent 318px) 0 8px/452px 4px repeat-x}
:root[data-world="end"] .foot-ground::before{height:16px;
	background:
		linear-gradient(90deg,transparent 0 40px,#ecdcf2 40px 42px,transparent 42px 150px,#ecdcf2 150px 152px,transparent 152px 262px,#ecdcf2 262px 264px,transparent 264px) 0 0/340px 2px repeat-x,
		linear-gradient(90deg,transparent 0 48px,#ecdcf2 48px 50px,transparent 50px 142px,#ecdcf2 142px 144px,transparent 144px 270px,#ecdcf2 270px 272px,transparent 272px) 0 2px/340px 2px repeat-x,
		linear-gradient(90deg,transparent 0 40px,#c9a2d4 40px 44px,transparent 44px 150px,#c9a2d4 150px 154px,transparent 154px 262px,#c9a2d4 262px 266px,transparent 266px) 0 0/340px 4px repeat-x,
		linear-gradient(90deg,transparent 0 48px,#c9a2d4 48px 52px,transparent 52px 142px,#c9a2d4 142px 146px,transparent 146px 270px,#c9a2d4 270px 274px,transparent 274px) 0 2px/340px 4px repeat-x,
		linear-gradient(90deg,transparent 0 40px,#7b5a86 40px 44px,transparent 44px 150px,#7b5a86 150px 154px,transparent 154px 262px,#7b5a86 262px 266px,transparent 266px) 0 4px/340px 12px repeat-x,
		linear-gradient(90deg,transparent 0 48px,#7b5a86 48px 52px,transparent 52px 142px,#7b5a86 142px 146px,transparent 146px 270px,#7b5a86 270px 274px,transparent 274px) 0 6px/340px 6px repeat-x,
		linear-gradient(90deg,transparent 0 44px,#6a4c75 44px 48px,transparent 48px 146px,#6a4c75 146px 150px,transparent 150px 266px,#6a4c75 266px 270px,transparent 270px) 0 8px/340px 4px repeat-x}
/* (the soul torch's light would only smudge the cream footer: its own flicker is enough) */
:root[data-theme="light"][data-world="nether"] .foot-ground{--glow:transparent}
:root[data-theme="light"][data-world="end"] .foot-ground{--g1:#d6d295;--g2:#c9c487;--g3:#bab577;--g4:#e2dea6;--d1:#c7c38a;--d2:#b8b47c;--d3:#d3cf96;
	--lit:rgba(60,50,20,.25);--flame:#efe6f7;--stick:#a993bd}
/* and the XP bar takes the colour of the dimension */
:root[data-world="nether"] .xpbar i{background:linear-gradient(90deg,#b8360f,#ff7a14 60%,#ffc24a);box-shadow:0 0 10px rgba(255,122,20,.7)}
:root[data-world="end"] .xpbar i{background:linear-gradient(90deg,#6a2bb0,#b56cf0 60%,#ecc8ff);box-shadow:0 0 10px rgba(190,110,255,.7)}

/* SEO pages: breadcrumbs, home FAQ */
.nowrap{white-space:nowrap}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;font-size:.85rem}
.crumbs li+li::before{content:"›";margin-right:6px;opacity:.6}
/* balanced columns in reading order (a row grid leaves gaps next to long answers) */
.faq-list{columns:2 340px;column-gap:40px}
.faq-item{break-inside:avoid;margin:0 0 18px}
.faq-item h3{margin:0 0 6px}
.faq-item p{margin:0}
/* the longer kicker fits one line on 360px phones */
@media(max-width:380px){.hero-copy > .kicker{font-size:.82rem;padding:4px 10px}}
.empty .cta-actions{justify-content:center}
.section-head p.small{font-size:.86rem}
/* in-page links (/#faq, /api#ci) land below the sticky header */
@media(min-width:861px){html{scroll-padding-top:84px}}