body {
  margin: 0;
  background: #d9d6cc;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

a { color: #0000cc; }
a:visited { color: #551a8b; }

.browser {
  margin: 0;
  padding: 3px 8px;
  background: #ffffcc;
  border-bottom: 1px solid #c8b400;
  color: #333;
  font-size: 11px;
  text-align: center;
}

.wrap {
  width: min(820px, calc(100% - 16px));
  margin: 10px auto 24px;
  background: #fff;
  border: 1px solid #6b6b6b;
}

.mast {
  background: #1a3a5c;
  color: #fff;
  padding: 10px 12px;
}

.seal {
  display: inline-block;
  width: 46px;
  height: 46px;
  margin-right: 10px;
  border: 2px solid #c5d4e8;
  border-radius: 50%;
  background: #0d2744;
  color: #d6e4f5;
  font-size: 11px;
  font-weight: bold;
  line-height: 46px;
  text-align: center;
  vertical-align: middle;
}

.mast h1 {
  display: inline;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.mast p {
  margin: 2px 0 0 60px;
  color: #c5d4e8;
  font-size: 11px;
}

.nav {
  margin: 0;
  padding: 0;
  background: #2a5a8c;
  list-style: none;
  border-bottom: 2px solid #1a3a5c;
}

.nav li { display: inline; }

.nav a {
  display: inline-block;
  padding: 6px 12px;
  border-right: 1px solid #1a4a7a;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.nav a:visited { color: #fff; }
.nav a[aria-current="page"] { background: #16324f; }

.layout {
  display: table;
  width: 100%;
}

.side,
.main {
  display: table-cell;
  vertical-align: top;
}

.side {
  width: 210px;
  padding: 12px;
  background: #f3f1ea;
  border-right: 1px solid #c8c2b4;
}

.side h2 {
  margin: 12px 0 4px;
  color: #1a3a5c;
  font-size: 12px;
}

.side ul {
  margin: 0;
  padding-left: 16px;
}

.side li { margin: 3px 0; }

.box {
  margin-top: 12px;
  padding: 8px;
  border: 1px solid #c8a000;
  background: #fff8dc;
  font-size: 12px;
}

.main { padding: 14px 16px 18px; }

.main h2 {
  margin: 0 0 8px;
  padding: 4px 8px;
  background: #1a3a5c;
  color: #fff;
  font-size: 15px;
}

.notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 2px solid #8b1a1a;
  background: #fff5f5;
}

.notice strong { color: #8b1a1a; }

ol.steps { padding-left: 20px; }
ol.steps li { margin: 4px 0; }

.panel {
  margin: 12px 0;
  border: 1px solid #a89f8c;
  background: #f7f4ee;
}

.panel h3 {
  margin: 0;
  padding: 6px 8px;
  border-bottom: 1px solid #a89f8c;
  background: #e7e1d6;
  font-size: 13px;
}

.panel p,
.panel ul { margin: 8px; }

.faq { margin: 0 0 10px; border: 1px solid #a89f8c; }
.faq h3 {
  margin: 0;
  padding: 6px 8px;
  background: #e7e1d6;
  border-bottom: 1px solid #a89f8c;
  font-size: 13px;
}
.faq p { margin: 8px; }

form p { margin: 0 0 10px; }
label { display: block; font-weight: bold; }
input[type="text"],
input[type="email"] {
  width: min(360px, 100%);
  margin-top: 2px;
  padding: 3px;
  border: 1px solid #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.check { font-weight: normal; }
button {
  padding: 4px 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
.issued {
  margin-top: 12px;
  padding: 10px;
  border: 2px solid #1a3a5c;
  background: #f4f7fb;
}
.issued code {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}
.error { color: #8b1a1a; font-weight: bold; }

.foot {
  padding: 8px 12px;
  border-top: 1px solid #c8c2b4;
  background: #f3f1ea;
  color: #444;
  font-size: 11px;
}

.helper {
  position: fixed;
  z-index: 20;
  width: min(280px, calc(100vw - 24px));
  font-size: 12px;
}

.helper-bubble {
  position: relative;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 2px solid #8c7a00;
  background: #ffffe8;
  box-shadow: 2px 2px 0 #6a5a20;
}

.helper-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -10px -12px 8px;
  padding: 3px 6px;
  background: #1a3a5c;
  color: #fff;
  font-size: 11px;
}

.helper-bar button,
.helper-actions button,
.helper-ask button,
.helper-face {
  font-family: Arial, Helvetica, sans-serif;
  cursor: pointer;
}

.helper-bar button {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  border: 1px solid #888;
  background: #e0ddd0;
  font-size: 10px;
  line-height: 1;
}

.helper-line { margin: 0 0 8px; line-height: 1.45; }

.helper-ask {
  display: flex;
  gap: 4px;
  margin: 0 0 6px;
}

.helper-ask input {
  width: auto;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 2px 4px;
  border: 1px inset #a89f8c;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.helper-ask button,
.helper-actions button {
  padding: 2px 6px;
  border: 1px outset #a89f8c;
  background: #e0ddd0;
  font-size: 11px;
}

.helper-status {
  margin: 0 0 6px;
  color: #8b1a1a;
  font-family: "Courier New", Courier, monospace;
}

.helper-actions { display: flex; justify-content: flex-end; gap: 6px; }

.helper-body {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.helper-tag {
  margin-bottom: 8px;
  padding: 2px 6px;
  border: 1px solid #888;
  background: #fff;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  line-height: 1.3;
  box-shadow: 1px 1px 0 #888;
}

.helper-tag span { color: #8b1a1a; }

.helper-face {
  padding: 0;
  border: 0;
  background: transparent;
}

.helper-face img {
  display: block;
  width: 116px;
  height: auto;
  image-rendering: pixelated;
}

@media (max-width: 640px) {
  .layout,
  .side,
  .main { display: block; width: auto; }
  .side { border-right: 0; border-bottom: 1px solid #c8c2b4; }
  .mast p { margin-left: 0; }
}