body.home-screen {
  padding: 30px;
  background: #08080c;
  background: radial-gradient(circle at 20% 12%, #33304a 0, #15151f 34%, #08080c 100%);
}
.home-wrap {
  position: relative;
  height: calc(100vh - 60px);
  min-height: 540px;
  background: #191923;
  border: 2px solid #3d3426;
  box-shadow: 0 0 0 4px #08080c, 0 18px 42px rgba(0,0,0,.55);
  padding: 34px;
  overflow: hidden;
}
.home-head {
  height: 128px;
  border-bottom: 2px solid #3d3426;
  position: relative;
}
.kicker { color: #a99d85; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; }
h1 { margin: 8px 0 0 0; color: #ffb84d; font-size: 48px; line-height: 54px; letter-spacing: 2px; }
.sub { color: #d3c5a9; font-size: 20px; margin-top: 6px; }
.home-clock {
  position: absolute;
  right: 0;
  top: 16px;
  padding: 10px 16px;
  border: 2px solid #3d3426;
  background: #111118;
  color: #ffd36f;
  font-size: 22px;
  letter-spacing: 2px;
}
.category-grid { padding-top: 28px; }
.category-card {
  display: block;
  float: left;
  width: 31.333%;
  height: 164px;
  margin: 0 2% 22px 0;
  padding: 20px 22px;
  border: 2px solid #333342;
  background: #20202b;
  color: #f0e6ca;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 20px rgba(0,0,0,.32);
}
.category-card:hover, .category-card.focused {
  background: #252532;
  transform: scale(1.025);
}
.cat-icon {
  display: block;
  float: left;
  width: 54px;
  height: 54px;
  margin-right: 14px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.18);
  text-align: center;
  line-height: 50px;
  font-size: 30px;
}
.cat-title {
  display: block;
  color: #ffb84d;
  font-size: 29px;
  line-height: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-sub {
  display: block;
  clear: both;
  padding-top: 12px;
  color: #bfb49d;
  font-size: 17px;
  line-height: 22px;
  height: 58px;
  overflow: hidden;
}
.cat-theme {
  display: inline-block;
  position: absolute;
  left: 22px;
  bottom: 16px;
  padding: 5px 10px;
  background: #6d4318;
  color: #fff0c8;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.color-amber.category-card { background: linear-gradient(135deg, #25190e, #443018); border-color: #70502a; }
.color-violet.category-card { background: linear-gradient(135deg, #1c1428, #3a235f); border-color: #6a4a91; }
.color-red.category-card { background: linear-gradient(135deg, #271111, #4b1e1b); border-color: #8c3c35; }
.color-blue.category-card { background: linear-gradient(135deg, #101a29, #1b3f62); border-color: #3d6e9a; }
.color-green.category-card { background: linear-gradient(135deg, #0e1e18, #1e4836); border-color: #3e8062; }
.color-gold.category-card { background: linear-gradient(135deg, #30230d, #604416); border-color: #b3832f; }
.color-amber.category-card .cat-title { color: #ffb84d; }
.color-violet.category-card .cat-title { color: #c09aff; }
.color-red.category-card .cat-title { color: #ff796b; }
.color-blue.category-card .cat-title { color: #83caff; }
.color-green.category-card .cat-title { color: #8de0b4; }
.color-gold.category-card .cat-title { color: #ffd36f; }
.color-amber.category-card .cat-theme { background: #6d4318; }
.color-violet.category-card .cat-theme { background: #3a235f; }
.color-red.category-card .cat-theme { background: #622018; }
.color-blue.category-card .cat-theme { background: #1b3f62; }
.color-green.category-card .cat-theme { background: #1e4836; }
.color-gold.category-card .cat-theme { background: #5a4218; }
.home-help {
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 26px;
  text-align: center;
  color: #948a76;
  font-size: 16px;
  border-top: 1px solid #3d3426;
  padding-top: 14px;
}
@media (max-width: 900px) {
  body.home-screen { padding: 14px; overflow: auto; }
  .home-wrap { height: auto; min-height: 0; padding: 18px; }
  .home-head { height: auto; padding-bottom: 18px; }
  .home-clock { position: static; display: inline-block; margin-top: 14px; }
  .category-card { float: none; width: 100%; height: 136px; margin-right: 0; }
  .home-help { position: static; clear: both; padding-top: 20px; }
}
/* expanded home layout for many themes */
.category-card { width: 23%; height: 132px; margin: 0 2% 16px 0; padding: 16px 18px; }
.cat-icon { width: 46px; height: 46px; line-height: 42px; font-size: 25px; }
.cat-title { font-size: 23px; line-height: 28px; }
.cat-sub { padding-top: 8px; font-size: 15px; line-height: 19px; height: 44px; }
.cat-theme { left: 18px; bottom: 12px; font-size: 12px; padding: 4px 8px; }
.color-cyan.category-card { background: linear-gradient(135deg, #071117, #123845); border-color: #287887; }
.color-orange.category-card { background: linear-gradient(135deg, #1f1108, #5a2d0f); border-color: #a95719; }
.color-silver.category-card { background: linear-gradient(135deg, #15181f, #4a505a); border-color: #7f8792; }
.color-sepia.category-card { background: linear-gradient(135deg, #1d140c, #4a3219); border-color: #8a6839; }
.color-brass.category-card { background: linear-gradient(135deg, #24160a, #5a3814); border-color: #b6802d; }
.color-neon.category-card { background: linear-gradient(135deg, #111021, #3a1647); border-color: #ff4fd8; }
.color-terminal.category-card { background: linear-gradient(135deg, #020804, #07351a); border-color: #39ff88; }
.color-warm.category-card { background: linear-gradient(135deg, #211108, #5a2e13); border-color: #a86626; }
.color-purple.category-card { background: linear-gradient(135deg, #13081e, #3b1f59); border-color: #7a45a8; }
.color-cyan.category-card .cat-title { color: #41e7ff; }
.color-orange.category-card .cat-title { color: #ff8c2a; }
.color-silver.category-card .cat-title { color: #d8dee8; }
.color-sepia.category-card .cat-title { color: #e0b45c; }
.color-brass.category-card .cat-title { color: #d8a040; }
.color-neon.category-card .cat-title { color: #ff5fd7; }
.color-terminal.category-card .cat-title { color: #39ff88; }
.color-warm.category-card .cat-title { color: #ffb24d; }
.color-purple.category-card .cat-title { color: #b967ff; }
.color-cyan.category-card .cat-theme { background: #113b45; }
.color-orange.category-card .cat-theme { background: #5a2d0f; }
.color-silver.category-card .cat-theme { background: #444a55; }
.color-sepia.category-card .cat-theme { background: #4a3219; }
.color-brass.category-card .cat-theme { background: #533516; }
.color-neon.category-card .cat-theme { background: #4c1c55; }
.color-terminal.category-card .cat-theme { background: #07351a; color: #b6ffd1; }
.color-warm.category-card .cat-theme { background: #5a2e13; }
.color-purple.category-card .cat-theme { background: #3b1f59; }
@media (max-width: 900px) { .category-card { float: none; width: 100%; height: 136px; margin-right: 0; } }