/* era-2010.css: styles for when the time machine is set to 2010. only applies when <html data-era="2010">. */
/* ============================================================
   ~ julie's cauldron :: 2013 edition ~
   flat design + the tumblr dashboard era. navy page, white
   rounded "post" cards, flat orange/purple buttons, a slim
   top bar, a right-hand widget column. halloween survives as
   the accent colors.  theme by julie, powered by tumblr lol
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

html[data-era="2010"] {
  --t-navy: #36465d;
  --t-navy-dk: #2c3a4f;
  --t-navy-xdk: #243142;
  --t-ink: #444b54;
  --t-head: #2f3640;
  --t-muted: #8f9aa7;
  --t-line: #e7eaee;
  --t-soft: #f5f7f9;
  --t-orange: #ff7518;
  --t-orange-dk: #e2600b;
  --t-orange-ink: #d4570a;
  --t-purple: #9b30ff;
  --t-purple-dk: #7d1fe0;
  --t-purple-ink: #7a22d6;
  --t-green-ink: #23935a;
  --t-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-gutter: max(16px, calc((100% - 1020px) / 2));
  cursor: auto;
  background: #36465d;
}

/* ---------- the page ---------- */
html[data-era="2010"] body {
  background: var(--t-navy);
  color: #dfe6ee;
  font-family: var(--t-sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
html[data-era="2010"] #wrapper a,
html[data-era="2010"] #wrapper-bottom a,
html[data-era="2010"] .realm a,
html[data-era="2010"] .enter-box a { font-weight: 700; text-decoration: none; }
html[data-era="2010"] #wrapper a:hover,
html[data-era="2010"] #wrapper-bottom a:hover,
html[data-era="2010"] .realm a:hover { text-shadow: none; cursor: pointer; text-decoration: underline; }
html[data-era="2010"] #content a:not(.b88):not(.btn) { color: #ffa45c; }
html[data-era="2010"] ::selection { background: var(--t-orange); color: #fff; }
html[data-era="2010"] ::-webkit-scrollbar { width: 10px; }
html[data-era="2010"] ::-webkit-scrollbar-track { background: var(--t-navy-dk); }
html[data-era="2010"] ::-webkit-scrollbar-thumb { background: #5b6b82; border: 2px solid var(--t-navy-dk); border-radius: 6px; }

/* ============================================================
   LAYOUT: the wrapper becomes a grid. #layout + #sidebar
   dissolve (display: contents) so the nav can sit up top as a
   tab bar and the side boxes form a right-hand widget column.
   ============================================================ */
html[data-era="2010"] #wrapper {
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-era="2010"] #wrapper:not(.anime-top) {
  display: grid;
  grid-template-columns: minmax(16px, 1fr) minmax(0, 700px) 300px minmax(16px, 1fr);
  grid-template-rows: auto auto auto repeat(8, auto) 1fr auto;
  align-items: start;
}
html[data-era="2010"] #layout,
html[data-era="2010"] #sidebar { display: contents; }

html[data-era="2010"] #wrapper:not(.anime-top) > #header { grid-column: 1 / -1; grid-row: 1; }
html[data-era="2010"] #wrapper:not(.anime-top) #nav { grid-column: 1 / -1; grid-row: 2; }
html[data-era="2010"] #wrapper:not(.anime-top) > .marquee-strip { grid-column: 1 / -1; grid-row: 3; }
html[data-era="2010"] #wrapper:not(.anime-top) #content { grid-column: 2; grid-row: 4 / 13; }
html[data-era="2010"] #wrapper:not(.anime-top) .side-box { grid-column: 3; margin-left: 28px; }
html[data-era="2010"] #wrapper:not(.anime-top) > #footer { grid-column: 1 / -1; grid-row: 13; }
html[data-era="2010"] #sidebar .nav-title { display: none; }

html[data-era="2010"] #content { padding: 30px 0 10px; min-width: 0; }

/* ---------- header = slim flat top bar ---------- */
html[data-era="2010"] #header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  flex-wrap: wrap;
  text-align: left;
  padding: 12px var(--t-gutter);
  background: var(--t-navy-xdk);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
html[data-era="2010"] #header .header-gifs { display: block; }
html[data-era="2010"] #header .header-gifs img { display: none; }
html[data-era="2010"] #header .title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.5px;
  text-transform: lowercase;
  color: #fff;
  text-shadow: none;
  animation: none;
  text-align: left;
}
/* the "app icon": orange square w/ a long flat shadow */
html[data-era="2010"] #header .title::before {
  content: "j";
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--t-orange);
  color: #fff;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
  text-transform: lowercase;
  text-shadow: 1px 1px #cf5a0c, 2px 2px #cf5a0c, 3px 3px #cf5a0c, 4px 4px #cf5a0c, 5px 5px #cf5a0c, 6px 6px #cf5a0c,
    7px 7px #cf5a0c, 8px 8px #cf5a0c, 9px 9px #cf5a0c, 10px 10px #cf5a0c, 11px 11px #cf5a0c, 12px 12px #cf5a0c,
    13px 13px #cf5a0c, 14px 14px #cf5a0c, 15px 15px #cf5a0c, 16px 16px #cf5a0c, 17px 17px #cf5a0c, 18px 18px #cf5a0c,
    19px 19px #cf5a0c, 20px 20px #cf5a0c, 21px 21px #cf5a0c, 22px 22px #cf5a0c, 23px 23px #cf5a0c, 24px 24px #cf5a0c;
}
html[data-era="2010"] #header .title::after {
  content: ".";
  color: var(--t-orange);
  margin-left: -12px;
}
html[data-era="2010"] #header .subtitle {
  margin: 0;
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .3px;
  color: #93a2b5;
  text-shadow: none;
}

/* ---------- nav = flat tabs ---------- */
html[data-era="2010"] #nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2px;
  margin: 0;
  padding: 0 var(--t-gutter);
  list-style: none;
  background: var(--t-navy-dk);
  border: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
html[data-era="2010"] #nav li { margin: 0; }
html[data-era="2010"] #nav a {
  display: block;
  padding: 13px 14px 11px;
  font-family: var(--t-display);
  font-size: 14px;
  font-weight: 700;
  color: #b7c3d1;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  text-decoration: none;
  transition: color .15s, background .15s, border-color .15s;
}
html[data-era="2010"] #nav a::before { content: none; }
html[data-era="2010"] #nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); border-bottom-color: rgba(255, 255, 255, .25); text-decoration: none; }
html[data-era="2010"] #nav a.here { color: #fff; border-bottom-color: var(--t-orange); background: none; }

/* ---------- marquee = slim flat announcement bar ---------- */
html[data-era="2010"] .marquee-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px var(--t-gutter);
  background: var(--t-orange);
  color: #fff;
  border: 0;
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}
html[data-era="2010"] .marquee-strip::before {
  content: "news";
  flex: 0 0 auto;
  padding: 1px 9px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .18);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
html[data-era="2010"] .marquee-strip marquee { flex: 1; min-width: 0; }

/* ============================================================
   TYPE
   ============================================================ */
html[data-era="2010"] #wrapper h1,
html[data-era="2010"] #wrapper h2,
html[data-era="2010"] #wrapper h3,
html[data-era="2010"] #wrapper-bottom h2 {
  font-family: var(--t-display);
  font-weight: 900;
  letter-spacing: -.3px;
  text-shadow: none;
}
html[data-era="2010"] #content > h1 {
  font-size: 34px;
  color: #fff;
  margin: 0 0 18px;
  text-align: left;
  word-spacing: 2px;
}
html[data-era="2010"] #content h2 {
  font-size: 22px;
  color: #fff;
  margin: 36px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-era="2010"] #content h2::after {
  content: "";
  flex: 1;
  height: 2px;
  min-width: 20px;
  background: rgba(255, 255, 255, .1);
  border-radius: 2px;
}
html[data-era="2010"] #content h3 { font-size: 18px; color: #fff; font-weight: 700; margin: 18px 0 8px; }

/* tacky stuff -> tasteful flat */
html[data-era="2010"] #wrapper .rainbow,
html[data-era="2010"] #wrapper-bottom .rainbow,
html[data-era="2010"] .enter-box .rainbow {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--t-orange);
  animation: none;
  font-weight: 700;
}
html[data-era="2010"] #wrapper .blink,
html[data-era="2010"] .realm p.blink {
  animation: none;
}
html[data-era="2010"] #content span.blink {
  display: inline-block;
  padding: 0 7px;
  border-radius: 3px;
  background: var(--t-orange);
  color: #fff !important;
  font-family: var(--t-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 18px;
  vertical-align: 2px;
  text-shadow: none;
}
html[data-era="2010"] #wrapper .float,
html[data-era="2010"] #wrapper .wobble,
html[data-era="2010"] #wrapper .spin { animation: none; }

html[data-era="2010"] #wrapper .glow-green { color: #6fe39a; text-shadow: none; }
html[data-era="2010"] #wrapper .glow-purple { color: #cfa6ff; text-shadow: none; }
html[data-era="2010"] #wrapper .glow-orange { color: #ffa45c; text-shadow: none; }

html[data-era="2010"] #wrapper .terminal,
html[data-era="2010"] #wrapper .pixel,
html[data-era="2010"] #wrapper .papyrus { font-family: var(--t-sans); font-size: 15px; line-height: 1.65; }
html[data-era="2010"] #wrapper .times { font-family: Georgia, "Times New Roman", serif; }
html[data-era="2010"] #wrapper .small { font-size: 12px; }
html[data-era="2010"] #wrapper .tiny { font-size: 11px; }

/* ============================================================
   POSTS: panels become white dashboard cards
   ============================================================ */
html[data-era="2010"] #content .panel,
html[data-era="2010"] #content .gb-entry,
html[data-era="2010"] #content .webring {
  position: relative;
  background: #fff;
  color: var(--t-ink);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(16, 26, 40, .18);
}
html[data-era="2010"] #content .panel {
  padding: 18px 26px 0;
  margin: 0 0 22px;
}
/* post header: little avatar + blog name */
html[data-era="2010"] #content .panel::before {
  content: "juliescauldron";
  display: block;
  margin: 0 -26px 14px;
  padding: 0 26px 14px 66px;
  border-bottom: 1px solid var(--t-line);
  font-family: var(--t-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  text-align: left;
  color: var(--t-head);
  background:
    radial-gradient(circle at 40px 14px, #fff 0 3px, transparent 3.5px),
    radial-gradient(circle at 40px 14px, var(--t-orange) 0 14px, transparent 14.5px);
}
html[data-era="2010"] #content .panel.dashed::before { content: "juliescauldron  \00b7  text post"; }
html[data-era="2010"] #content .panel.orange::before {
  background:
    radial-gradient(circle at 40px 14px, #fff 0 3px, transparent 3.5px),
    radial-gradient(circle at 40px 14px, var(--t-purple) 0 14px, transparent 14.5px);
}
/* post footer: notes + reblog */
html[data-era="2010"] #content .panel::after {
  content: "\2665  127 notes   \00b7   reblog";
  display: block;
  clear: both;
  margin: 18px -26px 0;
  padding: 11px 26px;
  border-top: 1px solid var(--t-line);
  border-radius: 0 0 8px 8px;
  background: var(--t-soft);
  font-family: var(--t-display);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  white-space: pre;
  color: #a2abb6;
}
html[data-era="2010"] #content .panel:nth-of-type(2n)::after { content: "\2665  2,481 notes   \00b7   reblog"; }
html[data-era="2010"] #content .panel:nth-of-type(3n)::after { content: "\2665  56 notes   \00b7   reblog"; }
html[data-era="2010"] #content .panel:nth-of-type(5n)::after { content: "\2665  13,666 notes   \00b7   reblog"; }

/* text inside cards: dark + readable */
html[data-era="2010"] #content .panel h1,
html[data-era="2010"] #content .panel h2,
html[data-era="2010"] #content .panel h3,
html[data-era="2010"] #content .webring h2,
html[data-era="2010"] #content .webring h3 { color: var(--t-head); }
html[data-era="2010"] #content .panel h2::after { display: none; }
html[data-era="2010"] #content .panel a:not(.b88):not(.btn),
html[data-era="2010"] #content table a:not(.b88):not(.btn),
html[data-era="2010"] #content .gb-entry a,
html[data-era="2010"] #content .webring a:not(.btn):not(.b88) { color: var(--t-orange-ink); }
html[data-era="2010"] #content :is(.panel, .gb-entry, .webring, table.myspace) .glow-orange { color: var(--t-orange-ink); }
html[data-era="2010"] #content :is(.panel, .gb-entry, .webring, table.myspace) .glow-purple { color: var(--t-purple-ink); }
html[data-era="2010"] #content :is(.panel, .gb-entry, .webring, table.myspace) .glow-green { color: var(--t-green-ink); }
html[data-era="2010"] #content :is(.panel, .gb-entry, .webring, table.myspace) .rainbow { color: var(--t-orange-ink); }
html[data-era="2010"] #content .panel [style*="#ffae42"],
html[data-era="2010"] #content .panel [style*="#ff7518"] { color: var(--t-orange-ink) !important; }
html[data-era="2010"] #content .panel [style*="#9b30ff"] { color: var(--t-purple-ink) !important; }
html[data-era="2010"] #content .panel .papyrus[style] {
  font-family: var(--t-display) !important;
  font-weight: 900;
  font-size: 13px !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}
html[data-era="2010"] #content .panel .times[style] { font-size: 24px !important; color: var(--t-head); line-height: 1.4; }

/* ---------- images: rounded + a lil instagram filter ---------- */
html[data-era="2010"] #content img {
  border-radius: 6px;
  filter: sepia(.18) saturate(1.2) contrast(.94) brightness(1.04);
}
html[data-era="2010"] #content img.divider-img,
html[data-era="2010"] #footer img.divider-img { display: none; }
html[data-era="2010"] #content .gif-row {
  gap: 18px;
  margin: 18px 0 26px;
}
html[data-era="2010"] #wrapper .sticker,
html[data-era="2010"] .realm .sticker {
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

/* ---------- tables: clean striped ---------- */
html[data-era="2010"] #content table.myspace {
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  color: var(--t-ink);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
  margin: 0 0 22px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(16, 26, 40, .18);
}
html[data-era="2010"] #content table.myspace th,
html[data-era="2010"] #content table.myspace td {
  border: 0;
  border-bottom: 1px solid var(--t-line);
  padding: 12px 16px;
  vertical-align: top;
}
html[data-era="2010"] #content table.myspace tr:last-child > * { border-bottom: 0; }
html[data-era="2010"] #content table.myspace th {
  background: transparent;
  color: var(--t-purple-ink);
  font-family: var(--t-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-right: 1px solid var(--t-line);
}
html[data-era="2010"] #content table.myspace tr:nth-child(even) > * { background: var(--t-soft); }
html[data-era="2010"] #content table.myspace td { background: #fff; }
html[data-era="2010"] #content table.myspace img { vertical-align: middle; }

/* ---------- buttons: flat fills ---------- */
html[data-era="2010"] #wrapper .btn,
html[data-era="2010"] #content .btn,
html[data-era="2010"] .enter-box .btn {
  display: inline-block;
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  background: var(--t-orange);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 10px 18px;
  box-shadow: 0 3px 0 #c9560b;
  transition: background .15s, transform .1s, box-shadow .1s;
}
html[data-era="2010"] #wrapper .btn:hover,
html[data-era="2010"] #content .btn:hover { background: var(--t-orange-dk); text-decoration: none; color: #fff; }
html[data-era="2010"] #wrapper .btn:active,
html[data-era="2010"] #content .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c9560b; }
html[data-era="2010"] #wrapper .btn.purple,
html[data-era="2010"] #content .btn.purple { background: var(--t-purple); box-shadow: 0 3px 0 #6514b8; }
html[data-era="2010"] #wrapper .btn.purple:hover,
html[data-era="2010"] #content .btn.purple:hover { background: var(--t-purple-dk); }
html[data-era="2010"] #wrapper .btn.purple:active { box-shadow: 0 1px 0 #6514b8; }

/* ---------- fake 88x31s: flat badges ---------- */
html[data-era="2010"] .b88 {
  font-family: var(--t-display);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.25;
  border: 0;
  border-radius: 3px;
  margin: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
html[data-era="2010"] a.b88:hover { filter: brightness(1.1); text-decoration: none !important; }
html[data-era="2010"] .b88.b-orange { background: #ff7518; color: #fff; }
html[data-era="2010"] .b88.b-purple { background: #9b30ff; color: #fff; }
html[data-era="2010"] .b88.b-black  { background: #1e2733; color: #6fe39a; }
html[data-era="2010"] .b88.b-blue   { background: #3b5998; color: #fff; }
html[data-era="2010"] .b88.b-white  { background: #fff; color: #36465d; }
html[data-era="2010"] .b88.b-red    { background: #e74c3c; color: #fff; }
html[data-era="2010"] .b88.b-pink   { background: #ff5fa2; color: #fff; }
html[data-era="2010"] .b88.b-lain   { background: #15151c; color: #ff6fb5; font-family: var(--t-display); font-size: 11px; font-weight: 700; }

/* ============================================================
   WIDGETS: the right-hand dashboard column
   ============================================================ */
html[data-era="2010"] #sidebar .side-box {
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0 16px 16px;
  background: #fff;
  color: var(--t-ink);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(16, 26, 40, .18);
  font-size: 13px;
  text-align: center;
  overflow: hidden;
}
html[data-era="2010"] #sidebar .side-box ~ .side-box { margin-top: 18px; }
html[data-era="2010"] #sidebar .side-box:not(:has(.box-title)) { padding-top: 16px; }
html[data-era="2010"] #sidebar .box-title {
  margin: 0 -16px 14px;
  padding: 10px 16px;
  background: var(--t-soft);
  border: 0;
  border-bottom: 1px solid var(--t-line);
  color: #7b8796;
  font-family: var(--t-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-align: left;
  text-transform: uppercase;
}
html[data-era="2010"] #sidebar .box-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--t-orange);
  vertical-align: 0;
}
html[data-era="2010"] #sidebar .side-box:nth-of-type(odd) .box-title::before { background: var(--t-purple); }
html[data-era="2010"] #sidebar .side-box img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  filter: sepia(.18) saturate(1.2) contrast(.94) brightness(1.04);
}
html[data-era="2010"] #sidebar .side-box .glow-orange { color: var(--t-orange-ink); }
html[data-era="2010"] #sidebar .side-box .glow-purple,
html[data-era="2010"] #sidebar #mood { color: var(--t-purple-ink); }
html[data-era="2010"] #sidebar #mood { font-family: var(--t-display); font-size: 17px; font-weight: 900; }
html[data-era="2010"] #sidebar .side-box .tiny,
html[data-era="2010"] #sidebar .side-box .small { color: var(--t-muted); }

/* music widget */
html[data-era="2010"] #music-box img { display: block; width: 90px; margin: 0 auto 10px; }
html[data-era="2010"] #sidebar #music-box .btn { width: 100%; margin: 0 0 8px; }
html[data-era="2010"] #sidebar #now-playing {
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--t-ink);
  background: var(--t-soft);
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 4px;
}

/* hit counter: flat flip-tiles */
html[data-era="2010"] #wrapper .counter {
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
}
html[data-era="2010"] #wrapper .counter span {
  width: 22px;
  font-family: var(--t-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 30px;
  color: #fff;
  background: var(--t-navy);
  border-radius: 4px;
  text-shadow: none;
  box-shadow: inset 0 -15px 0 rgba(0, 0, 0, .12);
}

/* countdown */
html[data-era="2010"] #wrapper .countdown {
  font-family: var(--t-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--t-orange);
  text-shadow: none;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
html[data-era="2010"] #footer {
  margin-top: 40px;
  padding: 26px var(--t-gutter) 30px;
  background: var(--t-navy-xdk);
  border: 0;
  color: #8796a9;
  font-family: var(--t-display);
  font-size: 12px;
  text-align: center;
}
html[data-era="2010"] #footer p { margin: 10px 0 0; }
html[data-era="2010"] #footer .rainbow { color: var(--t-orange); }
html[data-era="2010"] #footer::after {
  content: "\00a9  2013 julie's cauldron   \00b7   theme by julie   \00b7   powered by tumblr";
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  white-space: pre-wrap;
  font-weight: 700;
  color: #6f7f94;
  letter-spacing: .3px;
}

/* ============================================================
   PAGE BITS
   ============================================================ */

/* ---------- guestbook ---------- */
html[data-era="2010"] #content .gb-form { gap: 12px 16px; }
html[data-era="2010"] #content .gb-form label {
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--t-head);
}
html[data-era="2010"] #content .gb-form input,
html[data-era="2010"] #content .gb-form textarea,
html[data-era="2010"] #content .gb-form select,
html[data-era="2010"] #content textarea {
  font-family: var(--t-sans) !important;
  font-size: 14px;
  background: #fff !important;
  color: var(--t-ink) !important;
  border: 1px solid #d5dae0 !important;
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
  outline: none;
  max-width: 100%;
  box-sizing: border-box;
}
html[data-era="2010"] #content .gb-form input:focus,
html[data-era="2010"] #content .gb-form textarea:focus,
html[data-era="2010"] #content .gb-form select:focus { border-color: var(--t-orange) !important; box-shadow: 0 0 0 3px rgba(255, 117, 24, .15); }
html[data-era="2010"] #content .gb-entry {
  padding: 16px 22px;
  margin: 0 0 16px;
  font-size: 14px;
}
html[data-era="2010"] #content .gb-entry .gb-head {
  border-bottom: 1px solid var(--t-line);
  padding-bottom: 10px;
  margin-bottom: 10px;
  align-items: baseline;
  gap: 4px 12px;
}
html[data-era="2010"] #content .gb-entry .gb-name {
  color: var(--t-head);
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 15px;
  padding-left: 34px;
  position: relative;
}
html[data-era="2010"] #content .gb-entry .gb-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--t-purple);
}
html[data-era="2010"] #content .gb-entry:nth-child(3n+2) .gb-name::before { background: var(--t-orange); }
html[data-era="2010"] #content .gb-entry:nth-child(3n) .gb-name::before { background: #39b980; }
html[data-era="2010"] #content .gb-entry .gb-meta { color: #a2abb6; font-size: 12px; }

/* ---------- webring ---------- */
html[data-era="2010"] #content .webring { padding: 22px; margin: 0 auto 22px; max-width: 520px; }
html[data-era="2010"] #content .webring .ring-title {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--t-head);
  margin-bottom: 8px;
}
html[data-era="2010"] #content .webring .btn { margin: 4px; }

/* ---------- enter page ---------- */
html[data-era="2010"] body.enter-page { background: var(--t-navy); }
html[data-era="2010"] .enter-box {
  background: #fff;
  color: var(--t-ink);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 20px 50px rgba(10, 18, 30, .35);
  padding: 34px 40px 30px;
  font-family: var(--t-sans);
}
html[data-era="2010"] .enter-box .title {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 52px;
  letter-spacing: -1.5px;
  text-transform: lowercase;
  color: var(--t-head);
  text-shadow: none;
  animation: none;
}
html[data-era="2010"] .enter-box .title::after { content: "."; color: var(--t-orange); }
html[data-era="2010"] .enter-box img { border-radius: 6px; animation: none; filter: sepia(.18) saturate(1.2) contrast(.94) brightness(1.04); }
html[data-era="2010"] .enter-box .papyrus { font-family: var(--t-display); font-weight: 700; }
html[data-era="2010"] .enter-box .glow-purple { color: var(--t-purple-ink); text-shadow: none; }
html[data-era="2010"] .enter-box .rainbow { color: var(--t-orange-ink); }
html[data-era="2010"] .enter-box .warning {
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #b33a2b;
  background: #fdf0ee;
  border: 0;
  border-left: 4px solid #e74c3c;
  border-radius: 4px;
  padding: 12px 16px;
  text-align: left;
}
html[data-era="2010"] .enter-box .enter-link {
  display: inline-block;
  font-family: var(--t-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: lowercase;
  color: #fff !important;
  background: var(--t-orange);
  border-radius: 5px;
  padding: 12px 38px;
  box-shadow: 0 4px 0 #c9560b;
  text-shadow: none;
  animation: none;
  text-decoration: none;
}
html[data-era="2010"] .enter-box .enter-link:hover { background: var(--t-orange-dk); }
html[data-era="2010"] .enter-box [style*="#888"] { color: #a2abb6 !important; }

/* ---------- misty ---------- */
html[data-era="2010"] #content .frame-gold {
  border: 0;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 26, 40, .3);
}
html[data-era="2010"] #content .certificate {
  border: 0;
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 8px #e4c787, 0 6px 18px rgba(16, 26, 40, .25);
  color: #4a3a10;
}
html[data-era="2010"] #content .certificate h3 { font-family: var(--t-display); font-weight: 900; color: var(--t-purple-ink); }
html[data-era="2010"] #content .diary {
  border-left: 0;
  border-radius: 8px;
  background: #fff repeating-linear-gradient(transparent 0 23px, #e5edf6 23px 24px);
  box-shadow: inset 4px 0 0 #ff9ec9, 0 6px 18px rgba(16, 26, 40, .25);
  font-family: var(--t-sans);
  color: var(--t-ink);
}
html[data-era="2010"] #content .stat-card {
  border: 0;
  border-radius: 8px;
  background: #2a3647;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
}
html[data-era="2010"] #content .laser-zone {
  border: 0;
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 117, 24, .22), transparent 60%),
    linear-gradient(#3b2a5c, #4a3370);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
html[data-era="2010"] #content .laser-hint { font-family: var(--t-display); font-size: 14px; font-weight: 700; letter-spacing: .5px; }
html[data-era="2010"] #content .laser-stats {
  background: #fff;
  color: var(--t-ink);
  border: 0;
  border-radius: 0 0 8px 8px;
  padding: 10px 16px;
  font-family: var(--t-display);
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(16, 26, 40, .25);
}
html[data-era="2010"] #content .laser-stats b { color: var(--t-orange-ink); }
html[data-era="2010"] #content .laser-zone img,
html[data-era="2010"] #content .laser-cat svg { filter: none; border-radius: 0; }

/* ---------- cryptids: flat case files ---------- */
html[data-era="2010"] #content .dossier {
  background: #fdfaf2;
  border: 0;
  border-radius: 8px;
  transform: none;
  margin: 0 0 22px;
  padding: 22px 26px;
  box-shadow: inset 0 4px 0 #c9b98d, 0 6px 18px rgba(16, 26, 40, .25);
  font-family: var(--t-sans);
  color: #3b3a36;
}
html[data-era="2010"] #content .dossier h3 { font-family: var(--t-display); font-weight: 900; color: #222; letter-spacing: 0; }
html[data-era="2010"] #content .dossier .stamp {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 2px;
  border-width: 3px;
  border-radius: 4px;
  color: #e74c3c;
  border-color: #e74c3c;
}
html[data-era="2010"] #content .dossier .photo { border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
html[data-era="2010"] #content .dossier .photo figcaption { font-family: var(--t-sans); color: #777; }
html[data-era="2010"] #content .dossier .redacted { border-radius: 2px; }
html[data-era="2010"] #content .dossier .redacted:hover { color: #e74c3c; }
html[data-era="2010"] #content .threat { border: 0; border-radius: 10px; background: #ebe5d5; overflow: hidden; }
html[data-era="2010"] #content .threat i { background: #e74c3c; border-radius: 10px; }

/* ---------- legends: corkboard ---------- */
html[data-era="2010"] #content .corkboard {
  border: 8px solid #fff;
  border-radius: 8px;
  background: #d6a676 radial-gradient(circle, rgba(0, 0, 0, .1) 1px, transparent 1px) 0 0 / 8px 8px;
  box-shadow: 0 6px 18px rgba(16, 26, 40, .3);
}
html[data-era="2010"] #content .note {
  font-family: var(--t-sans);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
html[data-era="2010"] #content .note b { font-family: var(--t-display); font-weight: 900; }
html[data-era="2010"] #content .note img { filter: none; }
html[data-era="2010"] #content .glitch { font-family: var(--t-display); font-weight: 900; font-size: 40px; letter-spacing: 2px; }

/* lain-ish wired box on legends/other pages */
html[data-era="2010"] #content .wired { border-radius: 8px; border-width: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }

/* ============================================================
   ANIME PAGE (shrines.html)
   ============================================================ */
html[data-era="2010"] #wrapper.anime-top { display: flex; flex-direction: column; margin: 0; }
html[data-era="2010"] #wrapper.anime-top > #header { order: 1; }
html[data-era="2010"] #wrapper.anime-top > #nav { order: 2; }
html[data-era="2010"] #wrapper.anime-top > .marquee-strip { order: 3; }
html[data-era="2010"] #nav.topnav { justify-content: flex-start; align-items: center; }
html[data-era="2010"] #nav.topnav li:last-child { margin-left: auto; padding: 8px 0; display: flex; gap: 6px; }
html[data-era="2010"] #nav.topnav .btn { font-size: 11px; padding: 7px 12px; box-shadow: none; margin: 0; }

/* the portal joins the navy */
html[data-era="2010"] #portal { --bg: #36465d; }
html[data-era="2010"] #portal::before { background: radial-gradient(circle at 50% 40%, rgba(255, 117, 24, .12), transparent 55%); }
html[data-era="2010"] #portal h1 {
  font-family: var(--t-display);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -1px;
  text-transform: lowercase;
  color: #fff;
  text-shadow: none;
}
html[data-era="2010"] #portal p { font-family: var(--t-sans); color: #cfd8e3; }
html[data-era="2010"] .realm-map { gap: 8px; }
html[data-era="2010"] .realm-map a {
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  transition: background .15s;
}
html[data-era="2010"] .realm-map a:hover { background: var(--t-orange); text-decoration: none; }
html[data-era="2010"] #portal .scroll-hint { font-family: var(--t-display); font-size: 15px; font-weight: 700; color: var(--t-orange); animation: none; }

/* realms keep their worlds, but cards go flat + rounded */
html[data-era="2010"] .realm .box,
html[data-era="2010"] .realm .toy,
html[data-era="2010"] .realm .navi,
html[data-era="2010"] .realm .eva-card {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 14px 34px rgba(0, 0, 0, .35);
}
html[data-era="2010"] #lain .box { border-width: 0; box-shadow: inset 0 3px 0 #ff3fa4, 0 14px 34px rgba(0, 0, 0, .5); }
html[data-era="2010"] #eva .box { border-width: 0; box-shadow: inset 0 3px 0 #8cff3c, 8px 8px 0 #ff8c1a; }
html[data-era="2010"] .realm .box { padding-bottom: 0; }
html[data-era="2010"] .realm .box.hud { padding-bottom: 16px; }
/* tumblr tags footer under each realm post */
html[data-era="2010"] .realm .box:not(.hud)::after {
  content: "#anime  #90s anime  #reblog if u agree";
  display: block;
  clear: both;
  margin: 16px -20px 0;
  padding: 10px 20px;
  border-top: 1px solid rgba(127, 127, 127, .25);
  font-family: var(--t-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: pre;
  opacity: .7;
}
html[data-era="2010"] #lain .box::after { content: "\2665  1,998 notes    #serial experiments lain    #the wired"; }
html[data-era="2010"] #eva .box::after { content: "\2665  3,014 notes    #evangelion    #get in the robot"; }
html[data-era="2010"] #bebop .box::after { content: "\2665  2,071 notes    #cowboy bebop    #see you space cowboy"; }
html[data-era="2010"] #spirited .box::after { content: "\2665  8,422 notes    #spirited away    #ghibli"; }
html[data-era="2010"] #totoro .box::after { content: "\2665  9,013 notes    #totoro    #ghibli    #catbus"; }
html[data-era="2010"] #yotsuba .box::after { content: "\2665  4,444 notes    #yotsuba    #manga"; }
html[data-era="2010"] #kuromi .box::after { content: "\2665  6,661 notes    #kuromi    #sanrio"; }
html[data-era="2010"] #junji .box::after { content: "\2665  6,666 notes    #junji ito    #uzumaki"; }

/* flat realm buttons, each in its world's color */
html[data-era="2010"] .realm .btn {
  font-family: var(--t-display);
  font-size: 13px;
  font-weight: 700;
  border: 0;
  border-radius: 4px;
  padding: 9px 16px;
  background: var(--t-orange);
  color: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
html[data-era="2010"] .realm .btn:hover { filter: brightness(.92); }
html[data-era="2010"] .realm .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
html[data-era="2010"] .realm .btn.purple { background: var(--t-purple); }
html[data-era="2010"] .realm .camo-btn { background: #1fae63; }
html[data-era="2010"] .realm #yotsuba-btn { background: #3cb043; }
html[data-era="2010"] .realm .grudge-form .btn { background: #ff4fa3; }
html[data-era="2010"] .realm .toy-label { font-family: var(--t-display); font-size: 11px; font-weight: 900; letter-spacing: 2px; }
html[data-era="2010"] .realm .world-no { font-family: var(--t-display); font-size: 11px; font-weight: 900; letter-spacing: 3px; }
html[data-era="2010"] .realm .deco-row img { border-radius: 8px; }
html[data-era="2010"] .realm .deco-row img:not(.static-img) { filter: sepia(.15) saturate(1.15) contrast(.95) brightness(1.04); }
html[data-era="2010"] .realm .navi-line input { border-radius: 4px; }

/* cleaner sans headings where the world can take it */
html[data-era="2010"] #gits h2,
html[data-era="2010"] #bebop h2,
html[data-era="2010"] #kuromi h2 { font-family: var(--t-display); font-weight: 900; letter-spacing: 2px; }
html[data-era="2010"] #totoro h2,
html[data-era="2010"] #spirited h2 { font-family: var(--t-display); font-weight: 900; letter-spacing: -.5px; }
html[data-era="2010"] .realm .tagline { font-family: var(--t-display); font-weight: 700; }

/* footer on the anime page */
html[data-era="2010"] #wrapper-bottom {
  width: auto;
  max-width: none;
  margin: 0;
  border: 0;
  box-shadow: none;
}
html[data-era="2010"] #wrapper-bottom #footer { margin-top: 0; }

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width: 900px) {
  html[data-era="2010"] #wrapper:not(.anime-top) {
    grid-template-columns: 14px minmax(0, 1fr) 14px;
    grid-template-rows: none;
  }
  html[data-era="2010"] #wrapper:not(.anime-top) > #header { grid-row: auto; order: 1; }
  html[data-era="2010"] #wrapper:not(.anime-top) #nav { grid-row: auto; order: 2; }
  html[data-era="2010"] #wrapper:not(.anime-top) > .marquee-strip { grid-row: auto; order: 3; }
  html[data-era="2010"] #wrapper:not(.anime-top) #content { grid-column: 2; grid-row: auto; order: 4; }
  html[data-era="2010"] #wrapper:not(.anime-top) .side-box { grid-column: 2; grid-row: auto; order: 5; margin-left: 0; }
  html[data-era="2010"] #wrapper:not(.anime-top) > #footer { grid-row: auto; order: 6; }
  html[data-era="2010"] #sidebar .side-box,
  html[data-era="2010"] #sidebar .side-box ~ .side-box { margin: 0 0 14px; }
  html[data-era="2010"] #content { padding-top: 22px; }
}
@media (max-width: 720px) {
  html[data-era="2010"] #nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  html[data-era="2010"] #nav a { white-space: nowrap; padding: 11px 10px 9px; font-size: 13px; }
  html[data-era="2010"] #nav.topnav { flex-wrap: wrap; overflow: visible; }
  html[data-era="2010"] #nav.topnav li:last-child { margin-left: 0; width: 100%; }
  html[data-era="2010"] #header .title { font-size: 22px; }
  html[data-era="2010"] #content > h1 { font-size: 28px; }
  html[data-era="2010"] #content .panel { padding: 16px 18px 0; }
  html[data-era="2010"] #content .panel::before { margin: 0 -18px 12px; padding: 0 18px 12px 58px; background-position: -8px 0; }
  html[data-era="2010"] #content .panel::after { margin: 16px -18px 0; padding: 10px 18px; }
  html[data-era="2010"] #content table.myspace th,
  html[data-era="2010"] #content table.myspace td { padding: 10px 10px; }
  html[data-era="2010"] .enter-box { padding: 26px 20px; }
  html[data-era="2010"] .enter-box .title { font-size: 38px; }
  html[data-era="2010"] #content .corkboard { border-width: 6px; }
  html[data-era="2010"] #portal h1 { font-size: 36px; }
  html[data-era="2010"] .realm .box:not(.hud)::after { white-space: normal; }
}

/* ---------- late fixes ---------- */
html[data-era="2010"] #content .panel table.myspace { box-shadow: 0 0 0 1px var(--t-line); margin: 10px 0 0; }
html[data-era="2010"] #content .note { font-size: 11.5px; line-height: 1.4; }
html[data-era="2010"] #content .note b { font-size: 13px; line-height: 1.25; }
html[data-era="2010"] #content .diary { background-position: 0 10px; }
/* anime page: music buttons live in the top bar on wide screens */
@media (min-width: 1000px) {
  html[data-era="2010"] #wrapper.anime-top { position: relative; }
  html[data-era="2010"] #wrapper.anime-top > #header { justify-content: flex-start; padding-right: calc(var(--t-gutter) + 240px); }
  html[data-era="2010"] #nav.topnav li:last-child { position: absolute; top: 15px; right: var(--t-gutter); padding: 0; margin: 0; }
}
@media (max-width: 720px) {
  html[data-era="2010"] #content h2::after { display: none; }
}

/* ============================================================
   NIGHT MODE (toggle built in js/era-2010.js)
   late-2010s "night mode": charcoal cards on a near-black navy
   ============================================================ */
/* the switch (flat ios 7 style) */
html[data-era="2010"] #header { position: relative; padding-right: calc(var(--t-gutter) + 140px); }
html[data-era="2010"] .e2010-night {
  position: absolute;
  top: 50%;
  right: var(--t-gutter);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 4px 2px;
  background: none;
  border: 0;
  color: #93a2b5;
  font-family: var(--t-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: lowercase;
  cursor: pointer;
  z-index: 5;
}
html[data-era="2010"] .e2010-night:hover { color: #fff; }
html[data-era="2010"] .e2010-night:focus-visible { outline: 2px solid var(--t-orange); outline-offset: 3px; border-radius: 14px; }
html[data-era="2010"] .e2010-track {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #4a5a70;
  transition: background .25s;
}
html[data-era="2010"] .e2010-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .25s;
}
html[data-era="2010"] .e2010-night[aria-pressed="true"] .e2010-track { background: var(--t-orange); }
html[data-era="2010"] .e2010-night[aria-pressed="true"] .e2010-knob { left: 20px; }
html[data-era="2010"] .e2010-night.e2010-float { position: fixed; top: 16px; right: 16px; transform: none; color: #cfd8e3; }
@media (min-width: 1000px) {
  html[data-era="2010"] #wrapper.anime-top > #header { padding-right: calc(var(--t-gutter) + 380px); }
  html[data-era="2010"] #wrapper.anime-top .e2010-night { right: calc(var(--t-gutter) + 236px); }
}
@media (max-width: 720px) {
  html[data-era="2010"] #header { padding-right: 16px; }
  html[data-era="2010"] #header .title { padding-right: 120px; }
  html[data-era="2010"] #header .e2010-night { top: 17px; transform: none; }
}

/* smooth flat color fade */
html[data-era="2010"] body,
html[data-era="2010"] #header,
html[data-era="2010"] #nav,
html[data-era="2010"] #footer,
html[data-era="2010"] #content .panel,
html[data-era="2010"] #content .gb-entry,
html[data-era="2010"] #content .webring,
html[data-era="2010"] #content table.myspace td,
html[data-era="2010"] #content table.myspace th,
html[data-era="2010"] #sidebar .side-box,
html[data-era="2010"] #sidebar .box-title,
html[data-era="2010"] #content .dossier,
html[data-era="2010"] #content .diary,
html[data-era="2010"] #content .certificate,
html[data-era="2010"] .enter-box {
  transition: background-color .3s, color .3s, border-color .3s;
}

/* palette swap */
html[data-era="2010"][data-dark="on"] {
  --t-navy: #15202b;
  --t-navy-dk: #111a24;
  --t-navy-xdk: #0b121a;
  --t-ink: #d3dbe4;
  --t-head: #f2f5f8;
  --t-muted: #8796a8;
  --t-line: #2e3b4c;
  --t-soft: #1b2532;
  --t-card: #232f3e;
  --t-orange-ink: #ff8f45;
  --t-purple-ink: #b98aff;
  --t-green-ink: #58d68f;
  background: #15202b;
}
html[data-era="2010"][data-dark="on"] body { background: var(--t-navy); color: #c9d3de; }
html[data-era="2010"][data-dark="on"] #nav { box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }

/* cards */
html[data-era="2010"][data-dark="on"] #content .panel,
html[data-era="2010"][data-dark="on"] #content .gb-entry,
html[data-era="2010"][data-dark="on"] #content .webring,
html[data-era="2010"][data-dark="on"] #content table.myspace,
html[data-era="2010"][data-dark="on"] #content table.myspace td,
html[data-era="2010"][data-dark="on"] #sidebar .side-box,
html[data-era="2010"][data-dark="on"] #content .laser-stats {
  background-color: var(--t-card);
}
html[data-era="2010"][data-dark="on"] #content .panel,
html[data-era="2010"][data-dark="on"] #content .gb-entry,
html[data-era="2010"][data-dark="on"] #content .webring,
html[data-era="2010"][data-dark="on"] #content table.myspace,
html[data-era="2010"][data-dark="on"] #sidebar .side-box {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .35);
}
html[data-era="2010"][data-dark="on"] #content table.myspace tr:nth-child(even) > * { background: var(--t-soft); }
html[data-era="2010"][data-dark="on"] #content .panel table.myspace { box-shadow: 0 0 0 1px var(--t-line); }
html[data-era="2010"][data-dark="on"] #content .panel::before {
  background:
    radial-gradient(circle at 40px 14px, var(--t-card) 0 3px, transparent 3.5px),
    radial-gradient(circle at 40px 14px, var(--t-orange) 0 14px, transparent 14.5px);
}
html[data-era="2010"][data-dark="on"] #content .panel.orange::before {
  background:
    radial-gradient(circle at 40px 14px, var(--t-card) 0 3px, transparent 3.5px),
    radial-gradient(circle at 40px 14px, var(--t-purple) 0 14px, transparent 14.5px);
}
html[data-era="2010"][data-dark="on"] #content .panel::after { color: #7f8c9c; }
html[data-era="2010"][data-dark="on"] #content .panel [style*="#9b30ff"] { color: var(--t-purple-ink) !important; }
html[data-era="2010"][data-dark="on"] #content .panel [style*="#ffae42"],
html[data-era="2010"][data-dark="on"] #content .panel [style*="#ff7518"] { color: var(--t-orange-ink) !important; }
html[data-era="2010"][data-dark="on"] #wrapper .sticker,
html[data-era="2010"][data-dark="on"] .realm .sticker { background: #2c3a4c; }

/* widgets */
html[data-era="2010"][data-dark="on"] #wrapper .counter span { background: #3a4d68; }
html[data-era="2010"][data-dark="on"] #sidebar .box-title { color: #9aa7b6; }

/* forms */
html[data-era="2010"][data-dark="on"] #content .gb-form input,
html[data-era="2010"][data-dark="on"] #content .gb-form textarea,
html[data-era="2010"][data-dark="on"] #content .gb-form select,
html[data-era="2010"][data-dark="on"] #content textarea {
  background: #16202b !important;
  color: #e3e9ef !important;
  border-color: #3a4a5e !important;
  box-shadow: none;
}
html[data-era="2010"][data-dark="on"] #content .gb-form input::placeholder,
html[data-era="2010"][data-dark="on"] #content .gb-form textarea::placeholder { color: #7f8c9c; }
html[data-era="2010"][data-dark="on"] #content .gb-form input:focus,
html[data-era="2010"][data-dark="on"] #content .gb-form textarea:focus,
html[data-era="2010"][data-dark="on"] #content .gb-form select:focus { border-color: var(--t-orange) !important; box-shadow: 0 0 0 3px rgba(255, 117, 24, .25); }
html[data-era="2010"][data-dark="on"] #content .gb-entry .gb-meta { color: #8796a8; }

/* misty */
html[data-era="2010"][data-dark="on"] #content .frame-gold { background: var(--t-card); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
html[data-era="2010"][data-dark="on"] #content .certificate {
  background: #29261d;
  color: #eadfc0;
  box-shadow: inset 0 0 0 6px #232f3e, inset 0 0 0 8px #8a7440, 0 6px 18px rgba(0, 0, 0, .4);
}
html[data-era="2010"][data-dark="on"] #content .certificate [style*="#6b0080"] { color: #c99bff !important; }
html[data-era="2010"][data-dark="on"] #content .diary {
  background: var(--t-card) repeating-linear-gradient(transparent 0 23px, #2f3d50 23px 24px) 0 10px;
  box-shadow: inset 4px 0 0 #ff7ab8, 0 6px 18px rgba(0, 0, 0, .4);
  color: var(--t-ink);
}
html[data-era="2010"][data-dark="on"] #content .diary .date { color: #ff7ab8; }
html[data-era="2010"][data-dark="on"] #content .laser-zone {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 117, 24, .18), transparent 60%),
    linear-gradient(#241a38, #2e2147);
}

/* cryptids */
html[data-era="2010"][data-dark="on"] #content .dossier {
  background: #262c33;
  color: #dcd6c8;
  box-shadow: inset 0 4px 0 #8a7a52, 0 6px 18px rgba(0, 0, 0, .4);
}
html[data-era="2010"][data-dark="on"] #content .dossier h3,
html[data-era="2010"][data-dark="on"] #content .dossier b { color: #f2ede2; }
html[data-era="2010"][data-dark="on"] #content .dossier .stamp { color: #ff6b5b; border-color: #ff6b5b; }
html[data-era="2010"][data-dark="on"] #content .dossier .photo { background: #ece6d8; }
html[data-era="2010"][data-dark="on"] #content .dossier .photo figcaption { color: #5c5648; }
html[data-era="2010"][data-dark="on"] #content .dossier .redacted { background: #05080b; color: #05080b; }
html[data-era="2010"][data-dark="on"] #content .dossier .redacted:hover { background: transparent; color: #ff6b5b; }
html[data-era="2010"][data-dark="on"] #content .threat { background: #3a4049; }

/* legends */
html[data-era="2010"][data-dark="on"] #content .corkboard { border-color: var(--t-card); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }

/* splash */
html[data-era="2010"][data-dark="on"] .enter-box { background: var(--t-card); color: var(--t-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
html[data-era="2010"][data-dark="on"] .enter-box .warning { background: #3a2427; color: #ffb0a6; border-left-color: #ff6b5b; }
html[data-era="2010"][data-dark="on"] .enter-box [style*="#888"] { color: #8796a8 !important; }

/* anime page */
html[data-era="2010"][data-dark="on"] #portal { --bg: #15202b; }