@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
:root {
  --fix-oi-green-light: #b5efbe;
  --fix-oi-green-dark: #003d15;
  --fix-badge-a-light: #ffd800;
  --fix-badge-b-light: #c6c6c6;
  --fix-badge-c-light: #efa667;
  --fix-badge-d-light: #af81ff;
  --fix-badge-e-light: #728df4;
  --fix-badge-a-dark: #6b5b00;
  --fix-badge-b-dark: #2e2e2e;
  --fix-badge-c-dark: #502500;
  --fix-badge-d-dark: #2a0073;
  --fix-badge-e-dark: #001464;
  --fix-white: #ffffff;
  --fix-black: #000000;
}

.light {
  --oi-green-light: var(--fix-oi-green-light);
  --oi-green-dark: var(--fix-oi-green-dark);
  --badge-a-light: var(--fix-badge-a-light);
  --badge-b-light: var(--fix-badge-b-light);
  --badge-c-light: var(--fix-badge-c-light);
  --badge-d-light: var(--fix-badge-d-light);
  --badge-e-light: var(--fix-badge-e-light);
  --badge-a-dark: var(--fix-badge-a-dark);
  --badge-b-dark: var(--fix-badge-b-dark);
  --badge-c-dark: var(--fix-badge-c-dark);
  --badge-d-dark: var(--fix-badge-d-dark);
  --badge-e-dark: var(--fix-badge-e-dark);
  --white: var(--fix-white);
  --black: var(--fix-black);
}

.dark {
  --oi-green-light: var(--fix-oi-green-dark);
  --oi-green-dark: var(--fix-oi-green-light);
  --badge-a-light: var(--fix-badge-a-dark);
  --badge-b-light: var(--fix-badge-b-dark);
  --badge-c-light: var(--fix-badge-c-dark);
  --badge-d-light: var(--fix-badge-d-dark);
  --badge-e-light: var(--fix-badge-e-dark);
  --badge-a-dark: var(--fix-badge-a-light);
  --badge-b-dark: var(--fix-badge-b-light);
  --badge-c-dark: var(--fix-badge-c-light);
  --badge-d-dark: var(--fix-badge-d-light);
  --badge-e-dark: var(--fix-badge-e-light);
  --white: var(--fix-black);
  --black: var(--fix-white);
}

* {
  box-sizing: border-box;
}

.en .zh, .zh .en {
  display: none !important;
}

.light .dark, .dark .light {
  display: none !important;
}

body {
  font-family: "Outfit", "Noto Sans HK", sans-serif;
  text-align: justify;
  color: var(--oi-green-dark);
  line-height: 1.5;
  letter-spacing: 0.0125em;
  word-spacing: 0.125em;
  background-color: color-mix(in srgb, var(--oi-green-light) 5%, color-mix(in srgb, var(--black) 5%, var(--white)));
  transition: all 0.5s ease;
  transition-property: background-color, color;
  margin: 0;
  overflow: hidden scroll;
  --header-height: 5rem;
  --page-padding: clamp(1rem, 5%, 3rem);
}
body *::selection {
  color: var(--oi-green-dark);
  background-color: var(--oi-green-light);
}
body .logo {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: var(--oi-green-dark);
  transition: background-color 0.25s ease;
  display: block;
}
body .logo.junior.icon {
  aspect-ratio: 671/220.5;
  mask-image: url("/assets/junior/2026/logo_icon.svg");
}
body .logo.junior.word.horiz.zh {
  aspect-ratio: 3462.4827/220.5;
  mask-image: url("/assets/junior/2026/logo_word_horiz_zh.svg");
}
body .logo.junior.word.horiz.en {
  aspect-ratio: 4448.146/220.5;
  mask-image: url("/assets/junior/2026/logo_word_horiz_en.svg");
}
body .logo.junior.word.vert.zh {
  aspect-ratio: 2476.5238/389.67318;
  mask-image: url("/assets/junior/2026/logo_word_vert_zh.svg");
}
body .logo.junior.word.vert.en {
  aspect-ratio: 3463.2912/374.125;
  mask-image: url("/assets/junior/2026/logo_word_vert_en.svg");
}
body .logo.junior.full.horiz.zh {
  aspect-ratio: 4316.4827/220.5;
  mask-image: url("/assets/junior/2026/logo_full_horiz_zh.svg");
}
body .logo.junior.full.horiz.en {
  aspect-ratio: 5302.1468/220.5;
  mask-image: url("/assets/junior/2026/logo_full_horiz_en.svg");
}
body .logo.junior.full.vert.zh {
  aspect-ratio: 2476.5238/737.72118;
  mask-image: url("/assets/junior/2026/logo_full_vert_zh.svg");
}
body .logo.junior.full.vert.en {
  aspect-ratio: 3463.2912/737.12499;
  mask-image: url("/assets/junior/2026/logo_full_vert_en.svg");
}
body .logo.twgss {
  aspect-ratio: 386.53482/446.77902;
  mask-image: url("/assets/junior/2026/twgss_mono.svg");
}
body .logo.oi {
  aspect-ratio: 9/8;
  mask-image: url("/assets/junior/2026/oi.svg");
}
body .logo.contact-email {
  mask-image: url("/assets/junior/2026/contact_email.svg");
}
body .logo.contact-ig {
  mask-image: url("/assets/junior/2026/contact_ig.svg");
}
body .logo.theme-light {
  mask-image: url("/assets/junior/2026/theme_light.svg");
}
body .logo.theme-dark {
  mask-image: url("/assets/junior/2026/theme_dark.svg");
}
a:hover body .logo, body .logo:is(a):hover {
  background-color: var(--black);
}
body .logo:is(a) {
  padding: 0;
}
body a {
  color: unset;
  background-color: color-mix(in srgb, var(--oi-green-light) 50%, transparent);
  padding: 0.125em 0.375em;
  transition: background-color 0.25s ease;
  text-decoration: none;
}
body a:hover {
  background-color: color-mix(in srgb, var(--oi-green-light) 75%, transparent);
}
body .suffix {
  font-size: 0.75em;
}
body .block {
  position: relative;
}
body .block > * {
  opacity: 0;
  transition: opacity 0.5s 0.5s ease;
}
body .block:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--oi-green-light) 50%, transparent);
  transition: background-color 0.25s ease, mask-size 0.25s ease, mask-position 0.5s 0.25s ease;
  mask-image: url("/assets/junior/2026/block_top.svg"), url("/assets/junior/2026/block_bottom.svg");
  mask-position: center;
  mask-size: 10em;
  mask-repeat: no-repeat;
  z-index: -1;
}
body .block:hover:before {
  background-color: color-mix(in srgb, var(--oi-green-light) 75%, transparent);
  mask-size: 11.25em;
}
.show body .block.show > * {
  opacity: 1;
}
.show body .block.show:before {
  mask-position: top left, bottom right;
}
body .info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 1.25em;
  max-width: 100%;
}
body .info-grid > div:nth-child(2n+1) {
  font-size: 0.8125em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.5em 2em;
  border-right: var(--oi-green-light) 0.25em solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .info-grid > div:nth-child(2n) {
  font-size: 1.0625em;
  padding: 0.25em 2em;
}
@media only screen and (max-width: 960px) {
  body .info-grid {
    grid-template-columns: 1fr;
    row-gap: 0;
    justify-items: start;
  }
  body .info-grid > div:nth-child(2n+1) {
    border-right: unset;
    border-left: var(--oi-green-light) 0.25em solid;
    padding: 0.25em 1em;
  }
  body .info-grid > div:nth-child(2n) {
    padding: 0.5em 1em;
  }
  body .info-grid > div:nth-child(2n):not(:last-child) {
    margin-bottom: 1.5em;
  }
}
body .info-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5em;
  text-align: center;
}
body .prize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 1.25em;
}
body .prize-grid > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 0.5em;
  padding: 0.5em 2em;
  line-height: 1;
}
.en body .prize-grid > div {
  flex-direction: column-reverse;
}
body .prize-grid > div:nth-child(2n+1) {
  text-align: center;
  border-right: var(--oi-green-light) 0.2em solid;
  display: flex;
  align-items: center;
}
body .prize-grid > div:nth-child(2n) {
  font-size: 0.875em;
  display: flex;
}
@media only screen and (max-width: 960px) {
  body .prize-grid {
    grid-template-columns: 2fr 3fr;
  }
  body .prize-grid > div {
    padding: 0.5em 1em;
  }
  body .prize-grid > div:nth-child(2n+1) {
    padding-left: 0;
  }
  body .prize-grid > div:nth-child(2n) {
    text-align: left;
    padding-right: 0;
  }
}
body > :is(header, footer):before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--oi-green-light) 25%, color-mix(in srgb, var(--white) 50%, transparent));
  backdrop-filter: blur(1.5em) saturate(2);
  z-index: -1;
  mask-mode: luminance;
  transition: background-color 0.5s ease;
}
body > header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  transition: font-size 0.25s ease;
}
body > header:before {
  bottom: -2em;
  mask-image: linear-gradient(to top, black, white 4em);
}
body > header.blend > .logo-set {
  pointer-events: none;
}
body > header.blend > .logo-set > .logo {
  opacity: 0;
}
body > header.blend > .logo-set > .logo.icon {
  transform: translateY(0.25em);
}
body > header.blend > .logo-set > .logo.word {
  transform: translateY(0.25em);
}
body > header > .logo-set {
  display: flex;
  font-size: 1.125em;
  background-color: transparent;
}
body > header > .logo-set > .logo {
  height: 1em;
}
body > header > .logo-set > .logo.icon {
  mask-position: right;
}
body > header > .logo-set > .logo.word {
  mask-position: left;
  margin-left: 0.8299319728em;
}
.show body > header > .logo-set > .logo {
  transition: all 0.25s ease;
  transition-property: transform, opacity, background-color;
}
body > header > nav {
  display: flex;
  white-space: nowrap;
  column-gap: 1em;
  align-items: center;
}
body > header > nav > a {
  padding: 0.25em 0.75em;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease;
  background-color: unset;
  z-index: 1;
}
body > header > nav > a:before, body > header > nav > a:after {
  content: "";
  position: absolute;
  inset: 0;
}
body > header > nav > a:after {
  z-index: -2;
  background-color: color-mix(in srgb, var(--oi-green-light) 50%, transparent);
}
.show body > header > nav > a:after {
  transition: background-color 0.25s ease;
}
body > header > nav > a:before {
  z-index: -1;
  background-color: var(--oi-green-dark);
  transform: translateX(-105%);
  transition: transform 0.25s ease;
}
body > header > nav > a:hover:after {
  background-color: var(--oi-green-light);
}
.show body > header > nav > a.current {
  color: var(--oi-green-light);
}
.show body > header > nav > a.current:before {
  transform: none;
}
.hide body > header > nav > a.current:before {
  transform: translateX(105%);
}
body > header > nav > .toggles {
  display: flex;
  height: 1.625em;
  column-gap: 0.25em;
}
body > header > nav > .toggles > .toggle-theme {
  appearance: unset;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
  font-size: 0.75em;
  height: 100%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
}
body > header > nav > .toggles > .toggle-theme > .logo {
  position: absolute;
  inset: 17.5%;
  transition: transform 0.75s ease;
}
body > header > nav > .toggles > .toggle-theme > .logo.theme-light {
  transform-origin: 150% 150%;
}
.dark body > header > nav > .toggles > .toggle-theme > .logo.theme-light {
  transform: rotate(-90deg);
}
body > header > nav > .toggles > .toggle-theme > .logo.theme-dark {
  transform-origin: -150% -150%;
}
.light body > header > nav > .toggles > .toggle-theme > .logo.theme-dark {
  transform: rotate(-90deg);
}
body > header > nav > .toggles > .toggle-theme:hover {
  background-color: var(--oi-green-light);
}
body > header > nav > .toggles > .toggle-language {
  font-size: 0.75em;
  transition: background-color 0.25s ease;
  display: flex;
}
body > header > nav > .toggles > .toggle-language:hover {
  background-color: var(--oi-green-light);
}
body > header > nav > .toggles > .toggle-language > a {
  background-color: unset;
  padding: 0 0.75em;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 960px) {
  body > header {
    flex-direction: column;
    justify-content: flex-end;
    font-size: 0.875em;
  }
  body > header > .logo-set > .logo.word {
    display: none;
  }
  body > header > nav {
    column-gap: 0.75em;
  }
  body > header > nav > a {
    padding: 0.25em 0.625em;
  }
  body > header > nav > .toggles {
    display: grid;
    grid-template-rows: repeat(2, 1.625em);
    height: unset;
  }
  body > header > nav > .toggles > .toggle-theme {
    width: 100%;
  }
}
body > *:not(header, footer) {
  opacity: 0;
  transform: translateX(-5em);
  transition: opacity 0.25s ease, transform 0.75s ease;
}
body > *:not(header, footer):is(main, .hero) {
  min-height: calc(100vh - var(--header-height));
}
.show body > *:not(header, footer) {
  transition-delay: 0.25s, 0s;
  transform: none;
  opacity: 1;
}
.hide body > *:not(header, footer) {
  transition-delay: 0s;
  transform: translateX(5em);
}
body > main > section, body.index > section {
  width: 100%;
}
body > main > section > *, body.index > section > * {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}
body > main {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5em;
  padding: 0 var(--page-padding);
  padding-top: 2em;
}
body > main p, body > main h1, body > main h2, body > main h3 {
  margin: unset;
}
body > main > h1 {
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
body > main > section {
  display: flex;
  flex-direction: column;
  row-gap: 1.5em;
  padding: 2.5em 3.5em;
  align-items: center;
}
body > main > section > h2 {
  font-size: 1.25em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding-bottom: 0.5em;
  border-bottom: color-mix(in srgb, var(--oi-green-light) 50%, transparent) 0.25em solid;
}
body > main > section > section {
  border-left: color-mix(in srgb, var(--oi-green-light) 50%, transparent) 0.25em solid;
  padding: 0.25em 0 0.25em 1em;
  display: flex;
  flex-direction: column;
  row-gap: 0.75em;
}
body > main > section > section > h3 {
  margin: unset;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125em;
}
body > main > section > .info-grid {
  width: max-content;
}
@media only screen and (max-width: 960px) {
  body > main > section {
    padding: 5em 0.5em;
  }
}
body > main > .application-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1em;
  padding: 2em;
  text-align: center;
}
body > main > .application-form > div:first-child {
  font-size: 0.875em;
}
body > main > .application-form > iframe {
  height: calc(100vh - var(--header-height) - 2em);
  width: 100%;
  mask-image: linear-gradient(to bottom, black, white 1em, white calc(100% - 1em), black);
  mask-mode: luminance;
}
@media only screen and (max-width: 960px) {
  body > main > .application-form {
    padding: 5em 0.5em;
  }
  body > main > .application-form > iframe {
    width: 100vw;
    padding: 0 0.5em;
  }
}
body.index > *:not(header, .hero, footer) {
  margin-top: 4rem;
}
body.index > .hero {
  width: 100%;
  padding: 5em var(--page-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  row-gap: 3em;
}
.zh body.index > .hero * {
  letter-spacing: 0.125em;
}
body.index > .hero > div:nth-child(1) {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5em;
}
body.index > .hero > div:nth-child(1) > .logos {
  display: flex;
  align-items: center;
  column-gap: 0.75em;
}
body.index > .hero > div:nth-child(1) > .logos > .logo.twgss {
  height: 1.5em;
}
body.index > .hero > div:nth-child(1) > .logos > .logo.oi {
  height: 1.125em;
}
body.index > .hero > div:nth-child(1) > .name {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.index > .hero > div:nth-child(1) > .name > div:nth-child(1) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.25em;
  font-size: 1.125em;
}
body.index > .hero > div:nth-child(1) > .name > div:nth-child(2) {
  font-size: 0.875em;
}
body.index > .hero > div:nth-child(2) {
  display: flex;
  justify-content: center;
}
body.index > .hero > div:nth-child(2) > .logo {
  height: 6em;
}
body.index > .hero > div:nth-child(3) {
  font-size: 1.25em;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.index > .hero > div:nth-child(3) > div {
  background-color: color-mix(in srgb, var(--oi-green-light) 50%, transparent);
  padding: 0.25em 0.75em;
}
@media only screen and (max-width: 960px) {
  body.index > .hero > * {
    font-size: 0.75em;
  }
  body.index > .hero {
    padding: 5em var(--page-padding);
  }
}
body.index > :is(.news, .contact) {
  padding: 2em var(--page-padding);
  display: flex;
  flex-direction: column;
}
body.index > :is(.news, .contact) > .title {
  font-size: 1.125em;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.125em;
  text-align: center;
}
body.index > .news {
  max-height: 25em;
  row-gap: 1em;
}
body.index > .news > .info-grid {
  overflow-y: auto;
  padding: 1em 0;
  scrollbar-color: var(--oi-green-light) transparent;
  mask-image: linear-gradient(to bottom, black, white 1em, white calc(100% - 1em), black);
  mask-mode: luminance;
}
body.index > .news > .info-grid > div:nth-child(2n+1) {
  align-items: flex-start;
}
body.index > .news > .info-grid > div:nth-child(2n) {
  font-size: 0.9375em;
}
body.index > .contact {
  row-gap: 1.5em;
}
body.index > .contact > .contact-list {
  display: flex;
  width: max-content;
  gap: 1em 4em;
}
body.index > .contact > .contact-list > div {
  display: grid;
  grid-template: "icon label" max-content "icon link" max-content/max-content max-content;
  gap: 0.125em 1em;
  align-items: center;
}
body.index > .contact > .contact-list > div > *.logo {
  grid-area: icon;
  height: 1.5em;
  aspect-ratio: 1/1;
}
body.index > .contact > .contact-list > div > *:nth-child(2) {
  grid-area: label;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.125em;
}
body.index > .contact > .contact-list > div > *:is(a) {
  grid-area: link;
  padding: 0.125em 0.75em;
}
@media only screen and (max-width: 960px) {
  body.index > .contact > .contact-list {
    flex-direction: column;
  }
}
body.index > .links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0 var(--page-padding);
  column-gap: 1em;
  max-width: 2160px;
  margin-left: auto;
  margin-right: auto;
}
body.index > .links > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3em 4em;
  row-gap: 0.25em;
}
body.index > .links > div > .title {
  font-size: 1.125em;
  font-weight: bold;
}
body.index > .links > div > .content {
  flex: 1;
  font-size: 0.875em;
}
body.index > .links > div > .link {
  display: flex;
  width: 100%;
  margin-top: 1em;
  padding: 0 3em;
  font-size: 0.75em;
}
body.index > .links > div > .link > a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0;
}
@media only screen and (max-width: 1440px) {
  body.index > .links {
    grid-auto-flow: row;
  }
  body.index > .links > div {
    padding: 5em var(--page-padding);
  }
}
body > footer {
  display: flex;
  justify-content: space-between;
  margin-top: 4em;
  padding: 2em var(--page-padding);
  position: relative;
  opacity: 0;
  transition: opacity 0.25s ease;
}
body > footer:before {
  top: -2em;
  mask-image: linear-gradient(to bottom, black, white 4em);
}
body > footer > .logos {
  display: flex;
  align-items: center;
  column-gap: 0.875em;
}
body > footer > .logos > .logo.twgss {
  height: 1.75em;
}
body > footer > .logos > .logo.oi {
  height: 1.3125em;
}
body > footer > .text {
  text-align: right;
  display: flex;
  flex-direction: column;
}
body > footer > .text > div:nth-child(1) {
  font-size: 0.625em;
}
body > footer > .text > div:nth-child(2) {
  font-size: 0.75em;
}
.show body > footer {
  opacity: 1;
}