@charset "UTF-8";
/* 富文本 */
.rich-format {
  font-size: 14px;
  font-family: "Chinese Quote", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji";
  line-height: 1.74;
  letter-spacing: 0.05em;
  color: #262626; }

.rich-format h1, .rich-format h2, .rich-format h3, .rich-format h4, .rich-format h5, .rich-format h6 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  font-weight: bold;
  word-spacing: 1px;
  white-space: normal; }

.rich-format h1 {
  padding: 7px 0;
  font-size: 28px;
  line-height: 36px; }
.rich-format h2 {
  padding: 7px 0;
  font-size: 24px;
  line-height: 32px; }
.rich-format h3 {
  padding: 7px 0;
  font-size: 20px;
  line-height: 28px; }
.rich-format h4 {
  padding: 7px 0;
  font-size: 16px;
  line-height: 24px; }
.rich-format h5 {
  padding: 7px 0;
  font-size: 14px;
  line-height: 24px; }
.rich-format h6 {
  padding: 7px 0;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal; }

.rich-format ol, .rich-format ul {
  margin: 0 0 0 3px;
  padding: 0; }
.rich-format ol, .rich-format ol[data-indent="3"], .rich-format ol[data-indent="6"] {
  list-style-type: decimal; }
.rich-format ol[data-indent="1"], .rich-format ol[data-indent="4"], .rich-format ol[data-indent="7"] {
  list-style-type: lower-alpha; }
.rich-format ol[data-indent="2"], .rich-format ol[data-indent="5"], .rich-format ol[data-indent="8"] {
  list-style-type: lower-roman; }
.rich-format ol[data-indent="1"] {
  padding-left: 2em; }
.rich-format ol[data-indent="2"] {
  padding-left: 4em; }
.rich-format ol[data-indent="3"] {
  padding-left: 6em; }
.rich-format ol[data-indent="4"] {
  padding-left: 8em; }
.rich-format ol[data-indent="5"] {
  padding-left: 10em; }
.rich-format ol[data-indent="6"] {
  padding-left: 12em; }
.rich-format ol[data-indent="7"] {
  padding-left: 14em; }
.rich-format ol[data-indent="8"] {
  padding-left: 16em; }
.rich-format ul, .rich-format ul[data-indent="3"], .rich-format ul[data-indent="6"] {
  list-style-type: disc; }
.rich-format ul[data-indent="1"], .rich-format ul[data-indent="4"], .rich-format ul[data-indent="7"] {
  list-style-type: circle; }
.rich-format ul[data-indent="2"], .rich-format ul[data-indent="5"], .rich-format ul[data-indent="8"] {
  list-style-type: square; }
.rich-format ul[data-indent="1"] {
  padding-left: 2em; }
.rich-format ul[data-indent="2"] {
  padding-left: 4em; }
.rich-format ul[data-indent="3"] {
  padding-left: 6em; }
.rich-format ul[data-indent="4"] {
  padding-left: 8em; }
.rich-format ul[data-indent="5"] {
  padding-left: 10em; }
.rich-format ul[data-indent="6"] {
  padding-left: 12em; }
.rich-format ul[data-indent="7"] {
  padding-left: 14em; }
.rich-format ul[data-indent="8"] {
  padding-left: 16em; }
.rich-format li {
  margin-left: 23px;
  white-space: normal; }

.rich-format a {
  color: #096dd9;
  text-decoration: none;
  word-wrap: break-word; }
.rich-format b, .rich-format strong {
  font-weight: bolder; }
.rich-format p {
  margin: 0;
  white-space: normal; }
.rich-format blockquote {
  margin: 5px 0 5px 1em;
  padding-left: 1em;
  color: #8c8c8c;
  border-left: 3px solid #eee; }
.rich-format sub, .rich-format sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline; }
.rich-format sub {
  bottom: -0.25em; }
.rich-format sup {
  top: -0.5em; }
.rich-format hr {
  height: 2px;
  margin: 18px 0;
  background-color: #e8e8e8;
  border: none; }
.rich-format img {
  max-width: 100%;
  user-select: none; }
.rich-format pre {
  overflow: auto;
  font-family: "monospace"; }
.rich-format code {
  margin: 0 2px;
  padding: 0 2px;
  font-family: "monospace";
  font-size: inherit;
  line-height: inherit;
  word-wrap: break-word;
  color: #c7254e;
  text-indent: 0;
  background-color: #f9f2f4;
  border: 1px solid #efdce1;
  border-radius: 2px; }
.rich-format table {
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin: 0;
  font-weight: 400;
  word-break: normal;
  word-wrap: break-word;
  border: 1px solid #d9d9d9; }
.rich-format table tbody, .rich-format table tr, .rich-format table th, .rich-format table td {
  margin: 0;
  font-weight: 400; }
.rich-format table tr {
  height: 33px; }
.rich-format table tr th,
.rich-format table tr td {
  min-width: 90px;
  padding: 4px 8px;
  word-wrap: break-word;
  white-space: normal;
  vertical-align: top;
  border: 1px solid #d9d9d9; }

.ce {
  display: flex;
  flex-direction: column; }
  .ce-editor {
    flex: 1;
    height: 0; }
  .ce-quick {
    display: flex;
    box-sizing: border-box;
    height: 48px;
    padding: 6px 6px 6px 0;
    background-color: #f0f0f0; }
    .ce-quick .quick-btn, .ce-quick .quick-extra-btn {
      display: inline-block;
      box-sizing: border-box;
      min-width: 36px;
      padding: 0 6px;
      font-size: 14px;
      line-height: 36px;
      color: #262626;
      text-align: center;
      vertical-align: middle;
      background-color: #fff;
      border-radius: 6px; }
      .ce-quick .quick-btn:active, .ce-quick .quick-extra-btn:active {
        background-color: #bfbfbf; }
    .ce-quick .quick-extra-btn {
      color: #fff;
      background-color: #52c41a; }
      .ce-quick .quick-extra-btn:active {
        background-color: #389e0d; }
    .ce-quick-list {
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch; }
      .ce-quick-list::-webkit-scrollbar {
        display: none; }
      .ce-quick-list .quick-btn {
        margin-left: 6px; }
    .ce-quick-with-right .ce-quick-list {
      margin-right: 6px; }
  .ce .cm-s-dracula .CodeMirror-vscrollbar::-webkit-scrollbar, .ce .cm-s-dracula .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent; }
  .ce .cm-s-dracula .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .ce .cm-s-dracula .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #864d75; }
  .ce .cm-s-dracula .CodeMirror-vscrollbar:hover::-webkit-scrollbar-thumb, .ce .cm-s-dracula .CodeMirror-hscrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #ff79c5; }
  .ce .cm-s-monokai .CodeMirror-vscrollbar::-webkit-scrollbar, .ce .cm-s-monokai .CodeMirror-hscrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent; }
  .ce .cm-s-monokai .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .ce .cm-s-monokai .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #8f7e4e; }
  .ce .cm-s-monokai .CodeMirror-vscrollbar:hover::-webkit-scrollbar-thumb, .ce .cm-s-monokai .CodeMirror-hscrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #ffd866; }
  .ce .CodeMirror-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 9; }
  .ce .CodeMirror-foldmarker {
    color: blue;
    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
    font-family: arial;
    line-height: .3;
    cursor: pointer; }
  .ce .CodeMirror-foldgutter {
    width: .7em; }
  .ce .CodeMirror-foldgutter-open,
  .ce .CodeMirror-foldgutter-folded {
    cursor: pointer; }
  .ce .CodeMirror-foldgutter-open:after {
    content: "\25BE"; }
  .ce .CodeMirror-foldgutter-folded:after {
    content: "\25B8"; }

html, body {
  height: 100%; }

body {
  min-width: 992px;
  overflow: hidden; }

.play {
  height: calc(100% - 48px); }

.play-main {
  display: flex;
  height: 100%; }
  .play-main .cell-layout {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; }
    .play-main .cell-layout-nav {
      flex-shrink: 0;
      height: 48px;
      font-size: 15px;
      font-weight: 600;
      color: #31285d;
      line-height: 48px;
      background-color: #dbe7f9;
      user-select: none; }
    .play-main .cell-layout-content {
      flex: 1;
      min-height: 0;
      background-color: #fff; }
    .play-main .cell-layout-dragbar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
      width: 7px;
      cursor: col-resize; }
  .play-main .drag-control-left {
    flex-shrink: 0;
    width: 33.3333333333%;
    overflow: hidden; }
    .play-main .drag-control-left .cell-layout {
      min-width: 300px; }
  .play-main .drag-control-right {
    flex-shrink: 0;
    width: 66.6666666667%;
    display: flex; }
    .play-main .drag-control-right .cell-layout {
      flex-shrink: 0;
      width: 50%; }
    .play-main .drag-control-right.column {
      flex-direction: column; }
      .play-main .drag-control-right.column .cell-layout {
        width: 100%; }
      .play-main .drag-control-right.column .cell-layout:first-child {
        flex: 6; }
      .play-main .drag-control-right.column .cell-layout:last-child {
        flex: 4; }
  .play-main .editor-header, .play-main .result-header {
    display: flex;
    justify-content: space-between;
    padding: 0 16px; }
    .play-main .editor-header-operation, .play-main .result-header-operation {
      display: flex; }
      .play-main .editor-header-operation .operation-item, .play-main .result-header-operation .operation-item {
        margin-left: 8px; }
        .play-main .editor-header-operation .operation-item .i-icon, .play-main .result-header-operation .operation-item .i-icon {
          padding: 4px;
          vertical-align: baseline;
          cursor: pointer;
          transition: color 0.24s; }
  .play-main-tabs .cell-layout-nav {
    position: relative; }
  .play-main-tabs .tabs-nav {
    display: flex; }
    .play-main-tabs .tabs-nav .tabs-tab {
      flex: 1;
      margin: 0 12%;
      text-align: center;
      cursor: pointer; }
  .play-main-tabs .tabs-ink {
    position: absolute;
    left: 12%;
    bottom: 0;
    width: 26%;
    height: 2px;
    background-color: #675f8f;
    transition: left 0.24s ease-in-out; }
  .play-main-tabs .cell-layout-content {
    overflow: hidden; }
  .play-main-tabs .tabs-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: margin-left 0.32s cubic-bezier(0.645, 0.045, 0.355, 1);
    will-change: margin-left; }
  .play-main-tabs .tabs-panel {
    flex-shrink: 0;
    width: 50%;
    padding: 24px 16px;
    overflow-y: auto; }
    .play-main-tabs .tabs-panel::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: transparent; }
    .play-main-tabs .tabs-panel::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: transparent; }
    .play-main-tabs .tabs-panel:hover::-webkit-scrollbar-thumb {
      background-color: #d9d9d9; }
  .play-main-tabs .validate {
    display: flex;
    margin-top: 12px; }
    .play-main-tabs .validate:first-child {
      margin-top: 0; }
    .play-main-tabs .validate-icon .i-icon {
      font-size: 24px;
      vertical-align: top; }
      .play-main-tabs .validate-icon .i-icon.i-icon-checked {
        color: #4caf50; }
      .play-main-tabs .validate-icon .i-icon.i-icon-clear {
        color: #ff4d4f; }
    .play-main-tabs .validate-message {
      flex: 1;
      margin-left: 12px; }
    .play-main-tabs .validate.sort-list-move {
      transition: all 0.48s; }
  .play-main-tabs .addon-nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    font-weight: normal;
    background-color: #f5f5f5; }
    .play-main-tabs .addon-nav-btn {
      cursor: pointer; }
      .play-main-tabs .addon-nav-btn:hover {
        color: inherit; }
      .play-main-tabs .addon-nav-btn .i-icon {
        margin-right: 6px;
        font-size: 20px;
        vertical-align: -1.4px; }
  .play-main-editor[data-theme="dracula"] .cell-layout-nav {
    background-color: #2d3143; }
  .play-main-editor[data-theme="monokai"] .cell-layout-nav {
    background-color: #20211c; }
  .play-main-editor[data-theme="night"] .cell-layout-nav {
    background-color: #09001c; }
  .play-main-editor .cell-layout-nav {
    color: #d9d9d9; }
  .play-main-editor .editor-header-operation .operation-item .i-icon:hover {
    color: #fff; }
  .play-main-editor .editor-footer {
    display: flex; }
    .play-main-editor .editor-footer-btn {
      width: 20%;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.32s; }
      .play-main-editor .editor-footer-btn:hover {
        color: inherit;
        background-color: #4e39ff; }
      .play-main-editor .editor-footer-btn .i-icon {
        margin-right: 4px;
        vertical-align: baseline; }
      .play-main-editor .editor-footer-btn-primary {
        background-color: rgba(78, 57, 255, 0.64); }
  .play-main-result .result-header-operation .operation-item .i-icon:hover {
    color: #7e70c2; }
  .play-main-result .result-iframe {
    height: 100%; }
    .play-main-result .result-iframe-inner {
      height: 100%; }
      .play-main-result .result-iframe-inner .iframe {
        position: relative;
        height: 100%; }
        .play-main-result .result-iframe-inner .iframe-mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0; }
    .play-main-result .result-iframe[data-mode='mobile'] {
      padding: 24px 0;
      overflow-y: auto;
      text-align: center; }
      .play-main-result .result-iframe[data-mode='mobile']::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: transparent; }
      .play-main-result .result-iframe[data-mode='mobile']::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background-color: transparent; }
      .play-main-result .result-iframe[data-mode='mobile']:hover::-webkit-scrollbar-thumb {
        background-color: #d9d9d9; }
      .play-main-result .result-iframe[data-mode='mobile']::before {
        content: "";
        display: inline-block;
        height: 100%;
        vertical-align: middle; }
      .play-main-result .result-iframe[data-mode='mobile'] .result-iframe-inner {
        position: relative;
        display: inline-block;
        width: 324px;
        height: 662px;
        vertical-align: middle;
        background: url("/statics/images/codecamp/iPhoneXS.png") no-repeat 0 0/cover; }
        .play-main-result .result-iframe[data-mode='mobile'] .result-iframe-inner .iframe {
          position: absolute;
          top: 38px;
          left: 19px;
          width: 286px;
          height: 604px;
          overflow: hidden;
          background-color: transparent;
          border-radius: 4px 4px 28px 28px; }
  .play-main-result .result-console {
    display: flex;
    flex-direction: column;
    height: 100%; }
    .play-main-result .result-console-tip {
      padding: 16px 0; }
    .play-main-result .result-console-output {
      flex: 1;
      min-width: 0;
      min-height: 0; }

.play-record {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 48px;
  width: 576px;
  background-color: #fff;
  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03); }

.popup-mask, .popup-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000; }
.popup-mask {
  background-color: rgba(0, 0, 0, 0.45); }
.popup-wrap {
  overflow-y: auto; }
.popup-mask.fade-enter-active {
  animation: fadeIn 0.24s both; }
.popup-mask.fade-leave-active {
  animation: fadeIn 0.24s reverse both; }
.popup .drawer-close, .popup .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 54px;
  height: 54px;
  font-size: 16px;
  font-weight: 700;
  line-height: 54px;
  color: #8c8c8c;
  text-align: center;
  transition: color 0.24s;
  cursor: pointer; }
  .popup .drawer-close:hover, .popup .modal-close:hover {
    color: #262626; }
.popup .drawer-header, .popup .modal-header {
  padding: 16px 54px 16px 24px;
  color: #262626;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  word-wrap: break-word;
  border-bottom: 1px solid #f0f0f0; }
.popup .drawer-body, .popup .modal-body {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5715;
  word-break: break-word; }
.popup .drawer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  box-shadow: 6px 0 16px -8px rgba(0, 0, 0, 0.08), 9px 0 28px 0 rgba(0, 0, 0, 0.05), 12px 0 48px 16px rgba(0, 0, 0, 0.03); }
  .popup .drawer-body {
    height: calc(100% - 55px);
    overflow-y: auto; }
    .popup .drawer-body::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: transparent; }
    .popup .drawer-body::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background-color: #d9d9d9; }
  .popup .drawer.slideInLeft-enter, .popup .drawer.slideInLeft-leave-to {
    opacity: 0.2;
    transform: translateX(-100%); }
  .popup .drawer.slideInLeft-enter-active, .popup .drawer.slideInLeft-leave-active {
    transition: all 0.24s cubic-bezier(0.7, 0.3, 0.1, 1); }
  .popup .drawer.slideInLeft-enter-to, .popup .drawer.slideInLeft-leave {
    opacity: 1;
    transform: translateX(0); }
.popup .modal {
  color: #595959;
  background-color: #fff;
  border-top: 2px solid #fe6a00;
  border-radius: 4px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
  .popup .modal-wrap {
    position: relative;
    top: 100px;
    width: 520px;
    margin: 0 auto;
    padding-bottom: 32px; }
    .popup .modal-wrap.zoom-appear {
      opacity: 0;
      transform: none;
      user-select: none; }
    .popup .modal-wrap.zoom-enter-active {
      animation: zoomIn 0.36s both running; }
    .popup .modal-wrap.zoom-leave-active {
      animation: zoomIn 0.36s reverse both running; }
  .popup .modal-footer {
    padding: 10px 16px;
    font-size: 0;
    text-align: right;
    border-top: 1px solid #f0f0f0; }
  .popup .modal-btn {
    display: inline-block;
    height: 32px;
    padding: 4px 16px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.24s; }
    .popup .modal-btn:hover {
      color: #fe6a00;
      border-color: #fe6a00; }
  .popup .modal-btn-primary {
    border-color: #fe6a00;
    background-color: #fe6a00;
    color: #fff; }
    .popup .modal-btn-primary:hover {
      color: #fff;
      border-color: #ff8929;
      background-color: #ff8929; }
  .popup .modal .modal-btn + .modal-btn {
    margin-left: 8px; }
.popup .modal-centered {
  text-align: center; }
.popup .modal-centered::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle; }
.popup .modal-centered .modal-wrap {
  top: 16px;
  display: inline-block;
  text-align: left;
  vertical-align: middle; }

.select {
  position: relative; }
  .select-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    cursor: pointer; }
    .select-input-wrap {
      position: relative;
      overflow: hidden;
      height: 32px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      padding: 4px 11px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.24s; }
      .select-input-wrap.active {
        border-color: #fe6a00;
        box-shadow: 0 0 0 2px #fff4e6; }
      .select-input-wrap:hover {
        border-color: #fe6a00; }
  .select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2;
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
    .select-dropdown-option {
      padding: 4px 11px;
      cursor: pointer;
      transition: all 0.24s; }
      .select-dropdown-option:hover, .select-dropdown-option.active {
        background-color: #f5f5f5; }
    .select-dropdown.scaleDownIn-enter-active {
      animation: scaleDownIn 0.36s both; }
    .select-dropdown.scaleDownIn-leave-active {
      animation: scaleDownIn 0.36s reverse both; }

.record-drawer {
  width: 576px; }
  .record-drawer .drawer-body {
    padding: 24px 0; }
  .record-drawer .record-tip {
    margin-left: 24px;
    margin-bottom: 24px;
    padding-left: 1em;
    color: #8c8c8c;
    border-left: 3px solid #eee; }
  .record-drawer .record-item {
    height: 40px;
    margin-top: 8px;
    padding-left: 24px;
    padding-right: 24px;
    line-height: 40px;
    cursor: pointer;
    transition: color 0.24s; }
    .record-drawer .record-item.active {
      color: #fe6a00;
      background-color: #fff4e6;
      border-right: 3px solid #fe6a00; }
    .record-drawer .record-item:hover {
      color: #fe6a00; }
    .record-drawer .record-item:first-child {
      margin-top: 0; }
    .record-drawer .record-item .mark {
      position: relative;
      top: 8px;
      width: 24px;
      height: 24px;
      border-radius: 50%; }
      .record-drawer .record-item .mark .i-icon-checked {
        color: #4caf50;
        font-size: 24px;
        vertical-align: top; }
    .record-drawer .record-item .empty-mark {
      border: 2px solid #d9d9d9; }
    .record-drawer .record-item .title {
      margin-left: 40px; }

.setting-modal .setting-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px; }
  .setting-modal .setting-item:last-child {
    margin-bottom: 0; }
  .setting-modal .setting-item-label {
    width: 128px;
    text-align: right; }
    .setting-modal .setting-item-label::after {
      content: ":";
      position: relative;
      top: -0.5px;
      margin: 0 8px 0 2px; }
.setting-modal .select {
  flex: 1;
  min-width: 0; }

.help-modal .help-wechat {
  text-align: center; }
  .help-modal .help-wechat-qrcode {
    display: block;
    width: 256px;
    height: 256px;
    margin: 0 auto; }
  .help-modal .help-wechat-tip {
    font-size: 18px; }

.complete-modal .complete-check {
  text-align: center;
  animation: zoomInDown 1s both; }
  .complete-modal .complete-check .i-icon {
    font-size: 150px;
    color: #4caf50; }
.complete-modal .complete-extra {
  margin-top: 24px;
  text-align: center; }

.shortcut-modal .shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px; }
  .shortcut-modal .shortcut-item code {
    padding: 0 4px;
    font-family: "monospace";
    word-wrap: break-word;
    color: #595959;
    font-size: 12px;
    background-color: #f0f0f0;
    border: 1px solid #bfbfbf;
    border-radius: 4px; }

.popup .answer-modal {
  width: calc(100% - 32px);
  max-width: 992px; }
  .popup .answer-modal .modal {
    overflow: hidden;
    border-top: none;
    border-radius: 12px; }
  .popup .answer-modal .modal-close {
    color: #8c8c8c; }
    .popup .answer-modal .modal-close:hover {
      color: #fff; }
  .popup .answer-modal .modal-header {
    color: #fff;
    border-bottom: none; }
  .popup .answer-modal .modal-body {
    height: 662px;
    padding: 16px 24px; }
  .popup .answer-modal .modal-footer {
    color: #fff;
    border-top: none; }
    .popup .answer-modal .modal-footer .modal-btn {
      border-color: rgba(78, 57, 255, 0.6);
      background-color: rgba(78, 57, 255, 0.6); }
      .popup .answer-modal .modal-footer .modal-btn:hover {
        color: #fff;
        border-color: #4e39ff;
        background-color: #4e39ff; }
  .popup .answer-modal[data-theme="dracula"] .modal {
    color: #fff; }
  .popup .answer-modal[data-theme="dracula"] .modal-body {
    background-color: #282a36; }
  .popup .answer-modal[data-theme="dracula"] .modal-header, .popup .answer-modal[data-theme="dracula"] .modal-footer {
    background-color: #2d3143; }
  .popup .answer-modal[data-theme="monokai"] .modal {
    color: #fff; }
  .popup .answer-modal[data-theme="monokai"] .modal-body {
    background-color: #272822; }
  .popup .answer-modal[data-theme="monokai"] .modal-header, .popup .answer-modal[data-theme="monokai"] .modal-footer {
    background-color: #20211c; }
  .popup .answer-modal[data-theme="night"] .modal {
    color: #fff; }
  .popup .answer-modal[data-theme="night"] .modal-body {
    background-color: #0a001f; }
  .popup .answer-modal[data-theme="night"] .modal-header, .popup .answer-modal[data-theme="night"] .modal-footer {
    background-color: #09001c; }

.slideDown-enter-active {
  animation: slideDown 0.24s ease-out; }

.slideDown-leave-active {
  animation: slideDown 0.24s ease-in reverse; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes slideDown {
  from {
    opacity: 0.72;
    transform: translateY(-100%); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes scaleDownIn {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transform-origin: 50% 0; }
  100% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: 50% 0; } }
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.2); }
  100% {
    opacity: 1;
    transform: scale(1); } }
@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }
/* 重写 w3.css 的 头部、底部 */
#header_index {
  width: 100%;
  padding: 0 24px;
  height: 48px;
  line-height: 48px; }

#header_item {
  box-shadow: none; }

#header-l, #header_item .logo {
  height: 48px; }

#header_item .logo img, #header_index .h-right {
  margin: 6px 0; }

.h-right .mobile .i-icon {
  vertical-align: text-top; }

#footer_item, #toolbar {
  display: none !important; }

/*# sourceMappingURL=play.css.map */