@font-face {
  font-family: SourceHanHeavy;
  src: url("../img/SourceHanSansCN-Heavy.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}
main {
  container-type: inline-size;
}
.screen {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.screen[hidden],
[hidden] {
  display: none !important;
}
.screen > .shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.screen button {
  color: inherit;
}
#rules {
  cursor: pointer;
}
.rules-copy {
  position: absolute;
  left: 9.33%;
  top: 24.2%;
  width: 81.33%;
  height: 61.5%;
  overflow-y: auto;
  scrollbar-width: thin;
  color: #404040;
  font: 2.65cqw/1.75 system-ui;
}
.rules-copy h3,
.section-label {
  margin: 0 0 2.1%;
  padding: 0 1.4%;
  background: linear-gradient(90deg, #ffe2af, transparent);
  font: 900 2.8cqw/1.5 SourceHanHeavy, system-ui;
  color: #304555;
}
.rules-copy h3:before,
.section-label:before {
  content: "▶";
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #ff8500;
  color: white;
  width: 4cqw;
  height: 4cqw;
  margin-right: 1cqw;
  font: 2cqw system-ui;
}
.rules-copy p {
  margin: 1.8% 5.7% 3%;
  text-align: justify;
}
.rules-copy .orange,
.rules-copy strong {
  color: #ff8200;
}
.rules-copy .category {
  margin: 1.5% 6% 2.5%;
  padding-bottom: 2.5%;
  border-bottom: 1px solid #ff8b21;
}
.rules-copy h4 {
  color: #ff8500;
  margin: 0;
  font-size: 2.7cqw;
}
.rules-copy .category p {
  margin: 1% 0;
  text-indent: 2em;
}
.rules-copy strong {
  font-size: 3.6cqw;
}
.rules-copy .award {
  text-indent: 2em;
}
.return-home {
  position: absolute;
  left: 4%;
  top: 2%;
  width: 27%;
  height: 6%;
  z-index: 4;
}
.tabs {
  position: absolute;
  left: 16.4%;
  top: 22.1%;
  width: 67.2%;
  height: 4.7%;
  display: flex;
  padding: 0.6%;
  border-radius: 2cqw;
  background: #f2f3f5;
}
.tabs button {
  position: static;
  flex: 1;
  border-radius: 1.6cqw;
  color: #727985;
  font: 2.8cqw system-ui;
}
.tabs button[aria-selected="true"] {
  background: white;
  box-shadow: 0 1px 5px #0001;
  color: #ff6b28;
  font-family: SourceHanHeavy, system-ui;
}
.upload-zone {
  position: absolute;
  left: 16.4%;
  top: 28.1%;
  width: 67.2%;
  height: 15.7%;
  border: 2px dashed #c8ccd3;
  border-radius: 2.5cqw;
  background: #fafbfc;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  padding: 2cqw;
  color: #202b38;
  font: 2.6cqw system-ui;
  overflow: hidden;
}
.upload-zone .upload-icon {
  color: #ff7234;
  background: #fff0e6;
  border-radius: 50%;
  padding: 1cqw;
  font-size: 5cqw;
  margin-bottom: 1cqw;
}
.upload-zone b {
  font-family: SourceHanHeavy, system-ui;
}
.upload-zone small {
  font: 2cqw/1.6 system-ui;
  color: #9ba1ac;
  margin-top: 1cqw;
}
.upload-note {
  position: absolute;
  left: 12%;
  top: 44.5%;
  width: 76%;
  text-align: center;
  color: #ff8100;
  font: 2.2cqw system-ui;
}
.profile-label {
  position: absolute;
  left: 9.4%;
  top: 48.5%;
  width: 81.2%;
  height: 2.4%;
}
.fields {
  position: absolute;
  left: 12.4%;
  top: 52.5%;
  width: 75.2%;
  height: 27.2%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 1cqw;
  color: #6d7582;
  font: 2.8cqw system-ui;
}
.fields label {
  display: block;
  margin-bottom: 2.4cqw;
}
.fields em {
  color: #ff4545;
  font-style: normal;
}
.fields input,
.fields textarea {
  display: block;
  width: 100%;
  border: 0;
  background: #f3f4f6;
  border-radius: 2cqw;
  padding: 2.2cqw 3cqw;
  margin-top: 1cqw;
  font: 3.2cqw/1.5 system-ui;
  color: #26303e;
  min-width: 0;
}
.fields input::placeholder,
.fields textarea::placeholder {
  color: #a2a7af;
}
.fields textarea {
  resize: vertical;
  min-height: 12cqw;
}
.submit-work {
  position: absolute;
  left: 35.3%;
  top: 82%;
  width: 29.4%;
  height: 4%;
  border-radius: 5cqw;
  background: #ff753a;
  color: white !important;
  font: 4cqw system-ui;
}
.consent {
  position: absolute;
  left: 11.3%;
  top: 87%;
  width: 77%;
  color: #444;
  font: 2.5cqw/1.6 system-ui;
  display: flex;
  gap: 1.2cqw;
}
.consent input {
  accent-color: #ff753a;
  width: 3.5cqw;
  height: 3.5cqw;
  flex-shrink: 0;
}
.consent button {
  position: static;
  display: inline;
  color: #ff722e !important;
  font: inherit;
}
.file-previews {
  display: flex;
  gap: 1cqw;
  width: 100%;
  overflow: auto;
  align-items: center;
}
.file-item {
  position: relative;
  flex-shrink: 0;
  width: 15cqw;
}
.file-item img,
.file-item video {
  width: 15cqw;
  height: 12cqw;
  object-fit: cover;
  border-radius: 1cqw;
}
.file-item button {
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  color: #ff6423;
  border-radius: 50%;
  width: 4cqw;
  height: 4cqw;
  font: 3cqw system-ui;
}
.file-item span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 1.7cqw system-ui;
}
.add-more {
  font-size: 5cqw;
  color: #ff753a;
  background: #fff0e6;
  border-radius: 1cqw;
  padding: 2cqw;
}
.modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #000b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-card {
  position: relative;
  width: 52.4%;
  border-radius: 2.5cqw;
  background: white;
  overflow: visible;
  color: #444;
}
.modal-title {
  background: #ff7536;
  padding: 4cqw 1cqw;
  text-align: center;
  color: white;
  border-radius: 2.5cqw 2.5cqw 0 0;
  font: 900 6cqw SourceHanHeavy, system-ui;
  text-shadow: 2px 2px #75401f, -1px -1px #75401f;
}
.modal-text {
  margin: 3.5cqw;
  padding: 2cqw;
  background: #f0f0f0;
  font: 2.4cqw/1.7 system-ui;
  max-height: 47cqw;
  overflow: auto;
  text-indent: 2em;
}
.modal-close {
  position: absolute;
  right: -2cqw;
  top: -2cqw;
  width: 5cqw;
  height: 5cqw;
  border: 2px solid white;
  border-radius: 50%;
  background: #3338;
  color: white !important;
  font: 4cqw/1 system-ui;
}
.success .modal-title {
  padding: 10cqw 0;
}
.success p {
  font: 2.4cqw/1.6 system-ui;
  text-align: center;
  padding: 0 2cqw;
}
.success small {
  display: block;
  color: #888;
  font: 1.8cqw system-ui;
  margin-top: 1cqw;
}
#form-message {
  position: absolute;
  z-index: 15;
  left: 10%;
  right: 10%;
  bottom: 50%;
  background: #22334def;
  color: white;
  border-radius: 2cqw;
  padding: 2cqw;
  text-align: center;
  font: 2.5cqw system-ui;
}

.screen .return-home {
  color: transparent;
}
.modal-title,
.success .modal-title {
  padding: 0;
  background: none;
}
.modal-title img {
  display: block;
  width: 100%;
  border-radius: 2.5cqw 2.5cqw 0 0;
}
.upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8cqw;
  height: 8cqw;
}
.upload-zone small {
  display: block;
}
.upload-note {
  font-family: system-ui;
}
.tabs button:focus-visible,
.submit-work:focus-visible {
  outline: 2px solid #ff753a;
}
.rules-copy,
.modal-text {
  font-family: SourceHanHeavy, system-ui;
}
.rules-copy {
  font-weight: normal;
}
.rules-copy h4 {
  font-family: SourceHanHeavy, system-ui;
}