body { font-family: system-ui, sans-serif; background: #14181f; color: #e6e9ef; margin: 0; }
main { max-width: 900px; margin: 0 auto; padding: 1rem; }
.card { background: #1d232d; border: 1px solid #2c3544; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
label { display: flex; flex-direction: column; font-size: .85rem; gap: .25rem; }
label.inline { flex-direction: row; align-items: center; gap: .4rem; }
select, input[type=text], input[type=number] { padding: .4rem; background: #11151b; color: inherit; border: 1px solid #3a4558; border-radius: 4px; }
.row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
button { padding: .5rem 1rem; background: #2f6fed; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
button:disabled { background: #3a4558; cursor: not-allowed; }
dl { display: grid; grid-template-columns: 12rem 2.5rem minmax(0, 1fr); gap: .1rem .4rem; align-items: start; }
dt { color: #9aa6ba; padding-top: .35rem; overflow-wrap: anywhere; }
dd { margin: 0; }
dd.value { padding-top: .35rem; overflow-wrap: anywhere; min-width: 0; }
.status { color: #9aa6ba; }
.status.error { color: #ff7b7b; }
.status.ok { color: #7bd88f; }
pre { overflow: auto; max-height: 24rem; background: #11151b; padding: .5rem; font-size: .75rem; }

.setup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lockBtn { width: 2.25rem; height: 2.25rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 1rem; line-height: 1; opacity: .75; }
.lockBtn:hover, .lockBtn:focus-visible { opacity: 1; background: #263041; border-color: #4a5870; }
.lockBtn:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #7bb0ff; outline-offset: 2px; }
.lockBtn[aria-pressed="true"] { opacity: 1; border-color: #4a7a58; }
.dev { border-style: dashed; border-color: #8a6d2f; }
@media (max-width: 640px) {
  .setup { grid-template-columns: 1fr 1fr; }
  dl { grid-template-columns: 6.5rem 2.5rem minmax(0, 1fr); }
}
@media (max-width: 420px) { .setup { grid-template-columns: 1fr; } }
.hint { color: #9aa6ba; font-size: .8rem; }
.heading { display: flex; align-items: center; gap: 1rem; }
.tag { display: inline-block; margin-left: .4rem; padding: 0 .4rem; border: 1px solid #4a5870; border-radius: .6rem; font-size: .7rem; color: #9aa6ba; }

/* Site shell */
.wrap, main { max-width: 900px; }
.wrap { margin: 0 auto; padding: 0 1rem; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: .5rem; background: #2f6fed; color: #fff; padding: .4rem .8rem; z-index: 10; }
a { color: #7bb0ff; } a:focus-visible { outline: 2px solid #7bb0ff; outline-offset: 2px; }
header.site, footer.site { background: #11151b; border-bottom: 1px solid #2c3544; }
footer.site { border-top: 1px solid #2c3544; border-bottom: 0; padding: 1rem 0; margin-top: 1rem; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { font-weight: 700; font-size: 1.2rem; color: #e6e9ef; text-decoration: none; letter-spacing: .04em; }
header nav, footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
header nav a[aria-current] { color: #fff; border-bottom: 2px solid #2f6fed; }
.support-link { margin-left: auto; font-size: .85rem; }
.hero h1 { margin: .5rem 0 .25rem; } .lead { font-size: 1.1rem; margin: .25rem 0; }
.muted { color: #9aa6ba; }
a.btn { display: inline-block; padding: .5rem 1rem; background: #2f6fed; color: #fff; border-radius: 4px; text-decoration: none; }
.prose section { margin-bottom: 1.5rem; scroll-margin-top: 1rem; } .prose { overflow-wrap: anywhere; }
'''|Add-Content css\style.css -Encoding utf8
@'