/* Shared site chrome: one full-width banner (name, pages, language, theme) on a single line with a rule under it. */
.sitebar{background:var(--card);border-bottom:3px solid var(--edge)}
.sitebar-in{max-width:1120px;margin:0 auto;padding:10px 18px;display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
.sitebar .brand{flex:none;font:700 17px/1.2 Unbounded,sans-serif;text-decoration:none;color:var(--ink);white-space:nowrap}
.sitenav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:2px 2px 5px}
.sitenav .chip.lk{flex:none;padding:4px 8px;font-size:13.5px;min-width:0;white-space:nowrap}
.sitenav .chip.lk.on{background:var(--acc);color:var(--accink);transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.sitebar .tbr{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-left:auto;padding-bottom:3px}
.sitebar .tbr .seg{flex-wrap:nowrap}
.sitebar{position:relative;z-index:50}
.sitebar .chip span{display:inline;font-size:inherit;color:inherit;margin:0}.sitenav .chip.lk{border-bottom-width:2px}
.dd{position:relative;flex:none}.dd summary.chip.lk{white-space:nowrap;font-size:13.5px}.dd summary{list-style:none}.dd summary::-webkit-details-marker{display:none}
.dd .car{display:inline-block;transition:transform .15s}.dd[open] .car{transform:rotate(180deg)}
.ddm{position:absolute;left:0;top:calc(100% + 8px);min-width:220px;background:var(--card);border:2px solid var(--edge);border-radius:7px;box-shadow:0 5px 0 var(--sh);padding:6px;display:grid;gap:2px}
.ddi{display:block;padding:8px 12px;border-radius:5px;text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.ddi:hover,.ddi:focus-visible{background:var(--line)}.ddi.on{background:var(--acc);color:var(--accink)}
.sitebar .tbr .seg button,.sitebar .tbr .sb{padding:4px 8px;font-size:13.5px;white-space:nowrap}
@media (max-width:1100px){.sitebar-in{gap:10px}.sitenav{gap:4px}.sitenav .chip.lk,.sitebar .tbr .seg button,.sitebar .tbr .sb{padding:4px 7px}.sitebar .tbr{gap:5px}.sitebar .brand{font-size:15px}}
@media (max-width:620px){.sitebar-in{flex-wrap:wrap;gap:8px 10px;padding:8px 12px}.sitebar .brand{font-size:14px}.sitenav{order:3;flex-basis:100%}}
.home{max-width:1120px;margin:0 auto;padding:22px 18px 56px}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:20px}
.tool{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--edge);border-radius:7px;background:var(--card);box-shadow:0 5px 0 var(--edge);padding:16px 18px 18px;transition:transform .08s,box-shadow .08s}
.tool:hover{border-color:var(--link)}.tool:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.tool b{display:block;font:600 17px/1.25 Unbounded,sans-serif;margin-bottom:8px}.tool span{color:var(--mute);font-size:14.5px}
.about h2{font:600 18px/1.3 Unbounded,sans-serif;margin:26px 0 8px}.about p{max-width:70ch}

/* faded logo behind every page, and the intro that settles into it (markup + script in base.html) */
:root{--logo-op:.13}
:root[data-theme="dark"]{--logo-op:.09}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo-op:.09}}
.bglogo,.splash{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none}
.bglogo{z-index:-1}
.bglogo img,.splash img{width:min(92vw,1000px,calc(88vh*910/768));height:auto}
.bglogo img{opacity:var(--logo-op);transition:opacity .3s}
.splash{z-index:1000;display:none}
.splashing .splash{display:grid}
.splashing .bglogo img{opacity:0;transition:none}
.splash::before{content:"";position:absolute;inset:0;background:var(--bg);animation:splashBg 2.6s ease forwards}
.splash img{position:relative;animation:splashLogo 2.6s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes splashBg{0%,50%{opacity:1}100%{opacity:0}}
@keyframes splashLogo{0%{transform:scale(.45) rotate(-6deg);opacity:0}18%{transform:scale(.7) rotate(2deg);opacity:1}26%{transform:scale(.66) rotate(0)}50%{transform:scale(.66);opacity:1}100%{transform:scale(1);opacity:var(--logo-op)}}