:root {
  --desktop: #008080; --face: #c0c0c0; --card: #fff; --text: #000; --muted: #404040;
  --track: #dfdfdf; --fill: #000080; --done: #008000; --warn: #b8860b; --border: #808080;
  --raised: #fff #404040 #404040 #fff;
  --sunken: #808080 #fff #fff #808080;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--desktop); color: var(--text);
  font: 14px/1.45 Tahoma, "MS Sans Serif", Verdana, Geneva, sans-serif;
}
main {
  max-width: 760px; margin: 24px auto; padding: 0 0 18px; background: var(--face);
  border: 2px solid; border-color: var(--raised); box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf, 3px 3px 0 rgba(0,0,0,.35);
}
main::before {
  content: "John Oler - Microsoft Internet Explorer"; display: block; margin: 3px 3px 16px; padding: 3px 8px;
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold;
}
main > * { margin-left: 16px; margin-right: 16px; }
@media (max-width: 560px) { main { margin: 8px; } main > * { margin-left: 10px; margin-right: 10px; } }
a { color: #0000ee; }
h1 { margin-top: 0; margin-bottom: 12px; font-size: 1.5rem; }
h2 { font-size: 1.1rem; margin-top: 22px; margin-bottom: 10px; }
.muted { color: var(--muted); margin: 4px 0 0; }
header { margin-bottom: 16px; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.tabs a {
  flex: 1; text-align: center; padding: 6px 10px; background: var(--face); color: var(--text); text-decoration: none; font-weight: bold;
  border: 2px solid; border-color: var(--raised); box-shadow: inset -1px -1px #808080;
}
.tabs a[aria-current="page"] { border-color: var(--sunken); box-shadow: inset 1px 1px #404040; background: #dfdfdf; }

.card {
  background: var(--card); padding: 12px 14px; margin-bottom: 12px;
  border: 2px solid; border-color: var(--sunken); box-shadow: inset 1px 1px #404040;
}
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.name { font-size: 1.05rem; font-weight: bold; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pct { font-size: 1.7rem; font-weight: bold; font-variant-numeric: tabular-nums; }
.pct.na { font-size: 1.2rem; color: var(--warn); }
.bar, .seg {
  height: 20px; background: var(--track); margin: 8px 0 10px; overflow: hidden;
  border: 2px solid; border-color: var(--sunken);
}
.fill { height: 100%; background: repeating-linear-gradient(90deg, var(--fill) 0 10px, transparent 10px 12px); }
.done .fill { background: repeating-linear-gradient(90deg, var(--done) 0 10px, transparent 10px 12px); }
.placeholder .fill, .check .fill { background: repeating-linear-gradient(-45deg, #000 0 4px, #ffd800 4px 8px); }
.tag {
  font-size: .68rem; font-weight: bold; text-transform: uppercase; padding: 1px 6px; background: var(--face); color: #000;
  border: 2px solid; border-color: var(--raised);
}
.tag.done { color: var(--done); }
.note { margin: 0; color: var(--muted); }
.subs { margin-top: 14px; padding-top: 2px; border-top: 2px groove #fff; }
.sub { margin-top: 12px; }
.sub .name { font-size: .95rem; }
.sub .pct { font-size: 1.2rem; }
.sub .bar { height: 16px; }

.hero { padding: 36px 0 20px; }
.hero h1 { font-size: 2rem; }
.lead { font-size: 1.05rem; margin: 10px 0 22px; }
.btn {
  display: inline-block; padding: 6px 18px; background: var(--face); color: #000; font-weight: bold; text-decoration: none;
  border: 2px solid; border-color: var(--raised); box-shadow: inset -1px -1px #808080;
}
.btn:active { border-color: var(--sunken); }
.tabs a { padding: 6px 4px; }
@media (max-width: 560px) { .tabs a { font-size: 12px; } }
.tabs a[aria-label="Home"] { font-size: 1.3rem; line-height: 1; padding-top: 5px; padding-bottom: 5px; }