*{box-sizing:border-box}
body{margin:0;font-family:"Google Sans",Roboto,Arial,sans-serif;color:#e8eaed;background:#191919;color-scheme:dark}
header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 24px;background:#191919;border-bottom:1px solid #3c4043;z-index:5}
.brand-wrap{display:flex;flex-direction:column;align-items:flex-start}
header a.brand{font-size:22px;color:#e8eaed;text-decoration:none}
.byline{margin-left:18px;font-size:11px;color:#9aa0a6}
.byline a{color:inherit;text-decoration:none}
.byline a:hover{color:#ff4dfc;text-decoration:underline}
#menu-btn{background:none;border:0;font-size:26px;cursor:pointer;width:44px;height:44px;border-radius:50%;color:#bdc1c6}
#menu-btn:hover{background:#303134}
nav{position:fixed;right:-260px;top:0;bottom:0;width:260px;background:#202124;border-left:1px solid #3c4043;border-radius:0;box-shadow:-2px 0 6px rgba(0,0,0,.5);padding:24px 16px;transition:right .3s ease;z-index:10}
nav.open{right:0}
nav a{display:block;padding:12px 0;color:#e8eaed;text-decoration:none;font-size:15px;border-bottom:1px solid #3c4043}
nav a:last-child{border-bottom:none}
nav a:hover{background:#303134}
main{max-width:960px;margin:0 auto;padding:48px 24px}
h1{font-size:36px;font-weight:400;margin:0 0 32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card{display:block;padding:24px;border:1px solid #3c4043;border-radius:8px;background:#202124;color:inherit;text-decoration:none}
.card:hover{border-color:#5f6368}
.card h2{margin:0 0 8px;font-size:20px;font-weight:500}
.card p{margin:0;color:#9aa0a6;font-size:14px}
label{display:block;font-size:13px;color:#9aa0a6;margin:16px 0 4px}
input,select{font:inherit;font-size:15px;padding:10px 12px;border:1px solid #3c4043;border-radius:4px;width:100%;background:#202124;color:#e8eaed}
button.go,a.btn{background:#8ab4f8;color:#202124;border:0;cursor:pointer;padding:10px 24px;border-radius:4px;text-decoration:none;display:inline-block;font:inherit;font-size:15px;min-width:0}
button.go:disabled{opacity:.6;cursor:wait}
button.ghost{background:none;color:#8ab4f8;border:1px solid #3c4043}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cp{display:flex;gap:8px}.cp input[type=color]{width:44px;padding:2px;flex:none}
.btns{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;align-items:center}
#out{margin-top:32px;overflow-x:auto;border:1px solid #3c4043;border-radius:8px;padding:16px}
#out svg{max-width:100%;height:auto;display:block;margin:0 auto}
#msg{color:#f28b82;font-size:14px;margin-top:12px}
.chk{display:flex;align-items:center;gap:8px;margin:0;height:42px;font-size:15px;color:#e8eaed}.chk input{width:auto}
.chk[hidden]{display:none}
#empty p{margin:16px 0 0;font-size:15px;color:#e8eaed}
details.more{margin-top:8px}
details.more summary{cursor:pointer;font-size:14px;color:#8ab4f8;list-style:none;margin:8px 0 0}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:" ▾"}
details.more[open] summary::after{content:" ▴"}
details.more .row{margin-top:4px}
.toggles{display:flex;flex-wrap:wrap;gap:2px 20px;margin-top:18px}
.toggles .chk{height:auto}