/* Plain block layout: no flexbox/grid, works back to IE8. */
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #fff; color: #1d1d1f; font: 15px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: #0b57d0; }
h1, h2 { font-weight: 600; }
h2 { font-size: 1.15em; margin: 1.6em 0 .5em; }
.hide { display: none; }
.dim { color: #6b6b70; }
.err { color: #b3261e; }
.ok { color: #1b7f3b; }
.page { max-width: 40em; margin: 0 auto; padding: 1.5em 1em 3em; }
.logo { font-family: Menlo, Consolas, "Courier New", monospace; letter-spacing: -.02em; }
h1.logo { font-size: 2.4em; margin: .4em 0 .2em; }
h1.logo a { color: inherit; text-decoration: none; }
.foot { margin-top: 3em; font-size: .9em; color: #6b6b70; }
button, .btn { font: inherit; font-size: .9em; padding: .3em .7em; border: 1px solid #c4c4c8; border-radius: 4px; background: #f4f4f6; color: #1d1d1f; cursor: pointer; text-decoration: none; display: inline-block; *display: inline; zoom: 1; }
button:hover, .btn:hover { background: #e8e8ec; }
button.big { font-size: 1.3em; padding: .55em 1.4em; background: #0b57d0; border-color: #0b57d0; color: #fff; }
button.big:hover { background: #0a4cb6; }
input[type=text], input[type=password], .page textarea { font: inherit; width: 100%; max-width: 24em; padding: .35em .5em; border: 1px solid #c4c4c8; border-radius: 4px; background: #fff; color: inherit; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.page textarea { max-width: 100%; }
#list { padding-left: 1.2em; }
#list li { margin: .35em 0; }

/* pad page */
#pg-pad { overflow: hidden; }
#bar { position: absolute; top: 0; left: 0; right: 0; padding: .3em .6em; font-size: 13px; line-height: 1.9; border-bottom: 1px solid #e2e2e6; background: #fafafa; }
#bar .logo { font-weight: 700; color: inherit; text-decoration: none; margin-right: .6em; }
#bar span { margin-right: .7em; white-space: nowrap; }
#bar .btns { float: right; margin-right: 0; }
#bar button { font-size: 12px; padding: .15em .55em; }
#bar .btns a { margin-left: .3em; }
.st { font-weight: 600; }
.st-ok { color: #1b7f3b; }
.st-busy { color: #8a6d00; }
.st-off { color: #b3261e; }
#msg { position: absolute; top: 2.6em; left: 0; right: 0; padding: .5em .8em; background: #fff4ce; border-bottom: 1px solid #e8d48a; font-size: 14px; z-index: 2; }
#msg input { max-width: 30em; }
#wrap { position: absolute; top: 2.3em; left: 0; right: 0; bottom: 0; }
#ta { display: block; width: 100%; height: 100%; margin: 0; border: 0; padding: .8em 1em; resize: none; outline: none; background: #fff; color: #1d1d1f;
  font: 14px/1.5 Menlo, Consolas, "DejaVu Sans Mono", "Courier New", monospace; white-space: pre-wrap; word-wrap: break-word;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.over { color: #b3261e; font-weight: 600; }

@media (prefers-color-scheme: dark) {
  body { background: #161618; color: #e6e6e9; }
  a { color: #8ab4f8; }
  .dim, .foot { color: #9a9aa0; }
  .err, .st-off, .over { color: #f28b82; }
  .ok, .st-ok { color: #81c995; }
  .st-busy { color: #fdd663; }
  button, .btn { background: #2a2a2e; border-color: #444449; color: #e6e6e9; }
  button:hover, .btn:hover { background: #343439; }
  button.big { background: #3b78e7; border-color: #3b78e7; color: #fff; }
  input[type=text], input[type=password], .page textarea { background: #1f1f22; border-color: #444449; }
  #bar { background: #1c1c1f; border-color: #2e2e33; }
  #msg { background: #3a3220; border-color: #5c4d22; }
  #ta { background: #161618; color: #e6e6e9; }
}