html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: "HelveticaNeueW01-45Ligh", "HelveticaNeueW02-45Ligh", "HelveticaNeueW10-45Ligh", "Helvetica Neue", "Helvetica", "Arial", "\30E1\30A4\30EA\30AA", "meiryo", "\30D2\30E9\30AE\30CE\89D2\30B4 pro w3", "hiragino kaku gothic pro";
  color: #222;
  line-height: 1.2;
  padding: 5px 0 0 29px; }

body {
  font-size: 13px; }

:global(table.attributes) {
  width: calc(100% - 40px);
  padding: 20px;
  table-layout: fixed;
  border-collapse: collapse; }

:global(table.attributes tr) {
  border-bottom: 1px solid #ebebeb; }

:global(table.attributes th) {
  color: #000;
  font-weight: bolder;
  text-align: left; }

:global(table.attributes th, table.attributes td) {
  word-wrap: normal;
  height: 26px;
  padding: 0 10px; }

:global(table.attributes th, table.attributes td:first-child) {
  font-family: "HelveticaNeueW01-55Roma", "HelveticaNeueW02-55Roma", "HelveticaNeueW10-55Roma", "Helvetica Neue", "Helvetica", "Arial", "\30E1\30A4\30EA\30AA", "meiryo", "\30D2\30E9\30AE\30CE\89D2\30B4 pro w3", "hiragino kaku gothic pro"; }

pre {
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 95%;
  line-height: 140%;
  white-space: pre;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  margin-bottom: 0px; }

code {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 95%;
  line-height: 140%;
  white-space: pre;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  background: lightyellow;
  display: inline-block;
  padding: 10px;
  margin-left: 30px; }

#content code {
  display: block;
  padding: 0.5em 1em;
  border: 1px solid #bebab0; }

:global(.coderun) {
  margin-left: 30px; }

:global .style-list {
  list-style: none;
  padding: 0; }
  :global .style-list > li {
    padding: 10px 20px; }
    :global .style-list > li + li > h3 {
      margin-top: 2.5rem; }
  :global .style-list code {
    background-color: rgba(0, 0, 0, 0.05);
    color: #162d3d; }

:global .inverted {
  background-color: #c8c8c8; }
  :global .inverted code {
    background: rgba(255, 255, 255, 0.8); }

:global .interactive-playground {
  padding: 0 1rem;
  display: block; }
  :global .interactive-playground h2 {
    margin: 0; }
  :global .interactive-playground .playground-controls {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    padding: 0; }
    :global .interactive-playground .playground-controls legend {
      padding: 0 .5rem; }
    :global .interactive-playground .playground-controls > ul {
      list-style: none;
      padding: 1rem;
      margin: 0; }
      :global .interactive-playground .playground-controls > ul li + li {
        margin-top: .8rem; }
      :global .interactive-playground .playground-controls > ul label {
        padding: 0 5px; }