:root {
  color-scheme: light;
  --paper: #fffdfb;
  --ink: #16182a;
  --muted: #5d5c6c;
  --orange: #ff8644;
  --accent: #ac3f16;
  --peach: #fff0e5;
  --chinese: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", var(--chinese);
  font-family: "Inter", var(--chinese);
}

*, *::before, *::after { box-sizing: border-box }
body { margin: 0; background: var(--paper); color: var(--ink) }
a { color: inherit }
:focus-visible { outline: 3px solid #6139b1; outline-offset: 4px }
.shell { width: min(1080px, calc(100% - 48px)); margin-inline: auto }
.masthead { min-height: 82px; display: flex; align-items: center }
.brand { display: inline-flex; align-items: center; gap: 9px }
.brand img { display: block; object-fit: contain }

.hero {
  display: grid;
  grid-template: "intro art" auto "actions art" auto / minmax(0, 1.13fr) minmax(0, 1fr);
  column-gap: 12px;
  padding: 64px 56px 66px;
  border: 1px solid #f8e4d4;
  border-radius: 32px;
  background: radial-gradient(ellipse at 89% 44%, #ffe3ce 0, transparent 54%), linear-gradient(126deg, #fff4eb, #fff0e5);
  overflow: hidden;
}

.intro { grid-area: intro }
.context {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 6px 11px;
  border: 1px solid #efc7af; border-radius: 999px; background: #fff9f3;
  color: #803716; font-size: 13px; font-weight: 650; line-height: 1.5;
}
.context img { width: 15px; height: 15px; object-fit: contain }
h1 { margin: 0; font-size: clamp(41px, 5.1vw, 67px); line-height: 1.03; letter-spacing: -.045em }
h1 .exam { display: block; font-family: var(--display); font-weight: 950; letter-spacing: -.075em }
h1 .promise { display: block; margin-top: 12px; font-size: .66em; letter-spacing: -.045em; line-height: 1.23; font-weight: 760 }
.intro > p:last-child { margin: 19px 0 0; max-width: 365px; color: var(--muted); font-size: 16px; line-height: 1.75 }
.actions { grid-area: actions; display: flex; gap: 12px; align-items: start; padding-top: 28px }
.cta {
  display: inline-flex; min-height: 55px; justify-content: center; align-items: center; gap: 9px;
  padding: 10px 19px; border: 1px solid transparent; border-radius: 14px;
  text-decoration: none; white-space: nowrap; font-size: 16px; font-weight: 730;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.cta img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) }
.cta .arrow { width: 16px; height: 16px; margin-left: 5px }
.primary { background: var(--orange); border-color: #f77a3b; box-shadow: 0 4px 0 #ed6b30 }
.primary:hover { background: #ff985c; box-shadow: 0 4px 0 #ed6b30, 0 7px 20px #d36e302e }
.secondary { background: #fffcf9; border-color: #e6c9b8 }
.secondary:hover { background: #fff5ed }

.art { grid-area: art; position: relative; min-width: 0; min-height: 298px; align-self: stretch; isolation: isolate }
.art::before {
  content: ""; position: absolute; inset: -1% -5% -3% -5%; z-index: -2;
  background: radial-gradient(circle, #da9764 1px, transparent 1.5px) 0 0 / 13px 13px;
  mask-image: radial-gradient(ellipse, #000 28%, transparent 70%); opacity: .48;
}
.orbit {
  position: absolute; z-index: -1; inset: 9% 1% 9% -2%;
  border: 1px solid #edb78e; border-radius: 50%; transform: rotate(-22deg);
}
.orbit::before, .orbit::after { position: absolute; content: ""; border-radius: 50%; background: #f49053 }
.orbit::before { width: 9px; height: 9px; top: 16%; left: 10% }
.orbit::after { width: 6px; height: 6px; bottom: 17%; right: 10% }
.sheet {
  position: absolute; z-index: 1; left: 4%; top: 23%; width: min(78%, 318px);
  padding: 19px 21px 15px; border-radius: 20px; border: 1px solid #f2dac8;
  background: #fffdfb; box-shadow: 0 12px 38px #8f461927; transform: rotate(-7deg);
}
.sheet::before {
  content: ""; position: absolute; z-index: -1; inset: 7px -8px -8px 7px;
  border: 1px solid #e6b795; border-radius: inherit; transform: rotate(3deg);
}
.sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 6px }
.sheet-category { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 12px; font-weight: 760 }
.sheet-category img { width: 15px; height: 15px }
.sheet-label { color: #786254; font-size: 11px; white-space: nowrap }
.sheet h2 { margin: 10px 0 5px; font: 800 25px/1.1 var(--display); letter-spacing: -.055em }
.sheet p { margin: 0; color: #555363; font: 500 13px/1.5 "Inter", "Helvetica Neue", sans-serif }
.wave { display: flex; align-items: center; gap: 3px; height: 31px; margin-top: 9px; padding-inline: 9px; border-radius: 8px; background: #fff2e9 }
.wave i { width: 3px; height: var(--bar, 7px); border-radius: 5px; background: #e7753e }
.hero-mascot {
  position: absolute; z-index: 2; right: -3%; bottom: 1%; width: min(53%, 214px); height: auto;
  filter: drop-shadow(0 8px 9px #ac4e2227); transform: rotate(8deg);
}

.skills { margin: 32px 0 0 }
.skills h2 { margin: 0 0 13px; font-size: 19px; font-weight: 750; letter-spacing: -.035em }
.skill-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none }
.skill {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; padding: 15px; border: 1px solid #eee7e3; border-radius: 15px; background: white;
}
.skill-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint) }
.skill-icon img { width: 20px; height: 20px }
.skill strong, .skill small { display: block }
.skill strong { font-size: 15px; line-height: 1.35 }
.skill small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3 }
footer { display: flex; justify-content: space-between; gap: 12px; padding: 25px 0 28px; color: #6c6871; font-size: 12px }
footer a { text-underline-offset: 3px }

@media (max-width: 790px) {
  .hero { padding: 45px 34px 47px }
  .sheet { left: 1%; width: 91%; padding: 15px 16px 13px }
  .hero-mascot { bottom: 8%; width: 59% }
}

@media (max-width: 650px) {
  .shell { width: calc(100% - 28px) }
  .masthead { min-height: 59px; padding-left: 3px }
  .brand img:first-child { width: 32px; height: 32px }
  .brand img:last-child { width: 130px; height: auto }
  .hero {
    grid-template: "intro" auto "art" auto "actions" auto / minmax(0, 1fr);
    padding: 24px 20px 23px; border-radius: 24px;
  }
  .context { margin-bottom: 13px; padding: 4px 9px; font-size: 12px }
  h1 { font-size: clamp(43px, 12vw, 62px) }
  h1 .promise { margin-top: 8px; font-size: .65em }
  .intro > p:last-child { margin-top: 11px; font-size: 14px; line-height: 1.65 }
  .art { width: min(100%, 360px); min-height: 182px; margin: 5px auto 0 }
  .orbit { inset: 14% 1% 5% 1% }
  .sheet { top: 16%; left: 4%; width: 73%; padding: 10px 13px 9px; border-radius: 14px }
  .sheet-category, .sheet-label { font-size: 10px }
  .sheet-category img { width: 13px; height: 13px }
  .sheet h2 { margin: 6px 0 4px; font-size: 19px }
  .sheet p { max-width: 80%; font-size: 11px; line-height: 1.35 }
  .wave { margin-top: 6px; height: 22px; gap: 2px }
  .wave i { height: calc(var(--bar, 7px) * .75) }
  .hero-mascot { bottom: 5%; right: -3%; width: min(44%, 150px) }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 4px }
  .cta { min-height: 49px; padding-inline: 7px; gap: 6px; font-size: 14px; border-radius: 12px }
  .cta img { width: 16px; height: 16px }
  .cta .arrow { width: 13px; height: 13px; margin-left: 1px }
  .skills { margin-top: 23px }
  .skills h2 { margin: 0 0 10px 2px; font-size: 17px }
  .skill-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .skill { padding: 10px; gap: 8px; border-radius: 12px }
  .skill-icon { width: 33px; height: 33px; border-radius: 9px }
  .skill-icon img { width: 17px; height: 17px }
  .skill strong { font-size: 13px }
  .skill small { margin-top: 3px; font-size: 11px }
  footer { padding: 19px 2px 22px }
}

@media (max-width: 360px) {
  .hero { padding-inline: 15px }
  .cta .arrow { display: none }
  .sheet { width: 78% }
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none } }