/*
 * IDEASUN home code-lab composition v12
 * Desktop source canvas: 1672 × 941, including a 96px glass navigation bar.
 * The page is assembled from independent DOM/image modules and scaled as one
 * coordinate system so ultra-wide screens do not stretch only one axis.
 */

:root {
  --home-scale: 1;
  --home-frame-width: 1672px;
  --home-header-height: 96px;
  --home-stage-height: 845px;
}

body.home-exact-v12 {
  background: #fffdfc;
}

body.home-exact-v12 .topbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(22, 22, 24, .07);
  box-shadow: 0 10px 34px rgba(43, 32, 31, .035);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

@media (min-width: 901px), (min-width: 560px) and (orientation: landscape) {
  body.home-exact-v12 .topbar {
    height: var(--home-header-height);
  }

  body.home-exact-v12 .topbar .nav.shell {
    width: min(calc(1556px * var(--home-scale)), calc(100% - 32px));
    max-width: none;
    height: var(--home-header-height);
    min-height: 0;
    margin-inline: auto;
    padding: 0;
  }

  body.home-exact-v12 .topbar .brand {
    gap: calc(13px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .brand-mark {
    width: calc(55px * var(--home-scale));
    height: calc(56px * var(--home-scale));
    min-width: calc(55px * var(--home-scale));
    border-radius: calc(12px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .brand > span:last-child strong {
    font-size: calc(20px * var(--home-scale));
    line-height: 1.15;
  }

  body.home-exact-v12 .topbar .brand > span:last-child > span {
    margin-top: calc(4px * var(--home-scale));
    font-size: calc(15px * var(--home-scale));
    letter-spacing: .07em;
  }

  body.home-exact-v12 .topbar .nav-links {
    gap: calc(24px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .nav-links > .nav-item > a {
    min-height: calc(50px * var(--home-scale));
    padding: 0 calc(18px * var(--home-scale));
    border-radius: calc(14px * var(--home-scale));
    font-size: calc(16px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .nav-actions {
    gap: calc(16px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .search-shell,
  body.home-exact-v12 .topbar .search-toggle,
  body.home-exact-v12 .topbar .icon-btn {
    width: calc(56px * var(--home-scale));
    height: calc(56px * var(--home-scale));
    min-width: calc(56px * var(--home-scale));
  }

  body.home-exact-v12 .topbar .login-nav {
    width: calc(132px * var(--home-scale));
    min-width: calc(132px * var(--home-scale));
    height: calc(50px * var(--home-scale));
    padding: 0 calc(22px * var(--home-scale));
    border-radius: calc(25px * var(--home-scale));
    font-size: calc(16px * var(--home-scale));
  }

  body.home-exact-v12 .apple-hero.apple-ref-mode,
  body.home-exact-v12 .apple-hero.apple-ref-mode > .shell,
  body.home-exact-v12 #referenceHome,
  body.home-exact-v12 #referenceHome .ref-hero-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body.home-exact-v12 .apple-hero.apple-ref-mode {
    overflow: hidden;
    background: #fffdfc;
  }

  body.home-exact-v12 #referenceHome .ref-hero-wrap {
    position: relative;
    /* Keep the first screen complete on 16:10 and 4:3 displays. The artwork
       remains at its source aspect ratio; the wrapper absorbs extra height so
       the next screen cannot peek into the initial viewport. */
    height: var(--home-stage-height);
    min-height: var(--home-stage-height);
    height: max(var(--home-stage-height), calc(100svh - var(--home-header-height)));
    min-height: max(var(--home-stage-height), calc(100svh - var(--home-header-height)));
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      radial-gradient(ellipse 24% 68% at 0% 48%, rgba(255, 207, 213, .46) 0%, rgba(255, 236, 236, .24) 46%, rgba(255, 253, 252, 0) 100%),
      radial-gradient(ellipse 24% 68% at 100% 48%, rgba(255, 207, 213, .46) 0%, rgba(255, 236, 236, .24) 46%, rgba(255, 253, 252, 0) 100%),
      #fff9f8;
  }

  body.home-exact-v12 #referenceHome .ref-hero-wrap::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: #fff9f8 url("../assets/ideasun-code-lab-ai-side-fill-v2.png") center center / cover no-repeat;
  }

  body.home-exact-v12 #referenceHome .code-lab-hero {
    position: relative;
    z-index: 1;
    width: var(--home-frame-width);
    max-width: none;
    height: var(--home-stage-height);
    min-height: 0;
    margin: 0 auto;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-background {
    display: block;
    position: absolute;
    z-index: 0;
    top: calc(-96px * var(--home-scale));
    left: 0;
    width: var(--home-frame-width);
    height: calc(941px * var(--home-scale));
    max-width: none;
    object-fit: fill;
    opacity: 1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  }

  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-background {
    animation: none;
    opacity: 1;
  }

  body.home-exact-v12 #referenceHome .code-lab-grid,
  body.home-exact-v12 #referenceHome .code-lab-orb {
    display: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy {
    position: absolute;
    z-index: 7;
    top: calc(28px * var(--home-scale));
    left: calc(385px * var(--home-scale));
    width: calc(900px * var(--home-scale));
    height: auto;
    margin: 0;
    transform: none;
    text-align: center;
  }

  body.home-exact-v12 #referenceHome .ref-hero-content .code-lab-kicker {
    position: relative;
    top: calc(-2px * var(--home-scale));
    width: 100%;
    max-width: none;
    margin: 0 0 calc(14px * var(--home-scale));
    color: #ef2f3a;
    font-size: calc(16.5px * var(--home-scale));
    font-weight: 900;
    line-height: 1;
    letter-spacing: .31em;
    text-align: center;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 {
    position: relative;
    top: calc(-1px * var(--home-scale));
    width: 100%;
    max-width: none;
    margin: 0;
    color: #111113;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: calc(67px * var(--home-scale));
    font-weight: 900;
    line-height: calc(82px * var(--home-scale));
    letter-spacing: calc(-3.2px * var(--home-scale));
    white-space: nowrap;
    -webkit-text-stroke: calc(.35px * var(--home-scale)) currentColor;
    paint-order: stroke fill;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-line {
    position: relative;
    display: block;
    width: 100%;
    color: #111113;
    transform-origin: center top;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-line-one {
    left: calc(23px * var(--home-scale));
    transform: scaleX(1.127);
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-line-two {
    left: calc(25px * var(--home-scale));
    transform: scaleX(1.029);
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-emphasis {
    position: relative;
    display: inline-block;
    color: #ef2f3a;
    transform: translateX(calc(-5px * var(--home-scale))) scaleX(.98);
    transform-origin: left top;
  }

  body.home-exact-v12 #referenceHome .code-lab-emphasis-stroke {
    position: absolute;
    top: calc(29px * var(--home-scale));
    right: auto;
    bottom: auto;
    left: calc(74px * var(--home-scale));
    width: calc(188.4px * var(--home-scale));
    max-width: none;
    height: calc(69px * var(--home-scale));
    object-fit: fill;
    pointer-events: none;
  }

  body.home-exact-v12 #referenceHome .ref-hero-content .code-lab-summary {
    position: absolute;
    top: calc(207px * var(--home-scale));
    left: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    color: #5f5d60;
    font-size: calc(24px * var(--home-scale));
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: calc(.2px * var(--home-scale));
    text-align: center;
    transform: translateX(calc(-10px * var(--home-scale))) scaleX(1.06) !important;
    transform-origin: center top;
  }

  body.home-exact-v12 #referenceHome .code-lab-actions {
    position: absolute;
    top: calc(273px * var(--home-scale));
    left: calc(50% + calc(4px * var(--home-scale)));
    display: flex;
    justify-content: center;
    gap: 0;
    width: calc(452px * var(--home-scale));
    height: calc(59px * var(--home-scale));
    margin: 0;
    transform: translateX(-50%);
  }

  body.home-exact-v12 #referenceHome .code-lab-primary,
  body.home-exact-v12 #referenceHome .code-lab-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    flex: 0 0 auto;
    height: calc(59px * var(--home-scale));
    padding: 0;
    border-radius: calc(30px * var(--home-scale));
    font-size: calc(18px * var(--home-scale));
    font-weight: 700;
  }

  body.home-exact-v12 #referenceHome .code-lab-primary {
    width: calc(219px * var(--home-scale));
    gap: calc(17px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-lab-secondary {
    width: calc(205px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-lab-primary svg {
    width: calc(19px * var(--home-scale));
    height: calc(19px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-lab-boy {
    position: absolute;
    z-index: 3;
    top: calc(137px * var(--home-scale));
    left: calc(254px * var(--home-scale));
    width: calc(336px * var(--home-scale));
    height: auto;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-boy-figure {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  body.home-exact-v12 #referenceHome .code-lab-girl-visual {
    position: absolute;
    z-index: 3;
    top: calc(93px * var(--home-scale));
    right: calc(71px * var(--home-scale));
    width: calc(468px * var(--home-scale));
    height: auto;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-girl-visual .code-lab-girl-robot {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-code-badge {
    position: absolute;
    z-index: 4;
    top: calc(54px * var(--home-scale));
    right: calc(132px * var(--home-scale));
    width: calc(149px * var(--home-scale));
    height: calc(136px * var(--home-scale));
    max-width: none;
    object-fit: fill;
    transform: rotate(5deg);
  }

  body.home-exact-v12 #referenceHome .code-lab-sparkle {
    display: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-star-left,
  body.home-exact-v12 #referenceHome .code-lab-star-right {
    position: absolute;
    z-index: 4;
    max-width: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-star-left {
    top: calc(305px * var(--home-scale));
    left: calc(209px * var(--home-scale));
    width: calc(54px * var(--home-scale));
    height: calc(54px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-lab-star-right {
    top: calc(169px * var(--home-scale));
    right: calc(99px * var(--home-scale));
    width: calc(55px * var(--home-scale));
    height: calc(55px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-lab-scratch {
    position: absolute;
    z-index: 5;
    top: calc(101px * var(--home-scale));
    left: calc(202px * var(--home-scale));
    width: calc(108px * var(--home-scale));
    gap: calc(4px * var(--home-scale));
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-block {
    width: calc(108px * var(--home-scale));
    min-height: calc(43px * var(--home-scale));
    padding: 0 calc(10px * var(--home-scale));
    border-radius: calc(11px * var(--home-scale));
    font-size: calc(11px * var(--home-scale));
    line-height: 1.15;
    box-shadow: 0 calc(5px * var(--home-scale)) calc(11px * var(--home-scale)) rgba(66, 45, 52, .1);
  }

  body.home-exact-v12 #referenceHome .code-lab-block strong {
    min-width: calc(25px * var(--home-scale));
    padding: calc(3px * var(--home-scale)) calc(5px * var(--home-scale));
    font-size: calc(10px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-course-deck {
    position: absolute;
    z-index: 10;
    top: calc(399px * var(--home-scale));
    left: calc(53px * var(--home-scale));
    display: grid;
    grid-template-rows: calc(266px * var(--home-scale)) calc(84px * var(--home-scale));
    gap: calc(19px * var(--home-scale));
    width: calc(1567px * var(--home-scale));
    height: calc(416px * var(--home-scale));
    margin: 0;
    padding: calc(25px * var(--home-scale)) calc(29px * var(--home-scale)) calc(20px * var(--home-scale));
    overflow: visible;
    border: 1px solid rgba(232, 226, 224, .92);
    border-radius: calc(28px * var(--home-scale));
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 calc(18px * var(--home-scale)) calc(45px * var(--home-scale)) rgba(73, 52, 48, .1);
    -webkit-backdrop-filter: blur(calc(14px * var(--home-scale)));
    backdrop-filter: blur(calc(14px * var(--home-scale)));
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-course-grid {
    display: grid;
    grid-template-columns: 1fr .985fr 1.04fr;
    gap: calc(18px * var(--home-scale));
    min-height: 0;
  }

  body.home-exact-v12 #referenceHome .code-course-card,
  body.home-exact-v12 #referenceHome .code-course-card.is-scratch,
  body.home-exact-v12 #referenceHome .code-course-card.is-python,
  body.home-exact-v12 #referenceHome .code-course-card.is-cpp {
    position: relative;
    display: block;
    height: calc(266px * var(--home-scale));
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(226, 221, 220, .9);
    border-radius: calc(20px * var(--home-scale));
    box-shadow: none;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-course-card.is-scratch { background: #fff6ec; }
  body.home-exact-v12 #referenceHome .code-course-card.is-python { background: #eff4ff; }
  body.home-exact-v12 #referenceHome .code-course-card.is-cpp { background: #f7f0fe; }

  body.home-exact-v12 #referenceHome .course-scratch-cat {
    position: absolute;
    z-index: 1;
    top: calc(18px * var(--home-scale));
    left: calc(-16px * var(--home-scale));
    width: calc(202px * var(--home-scale));
    height: calc(216px * var(--home-scale));
    max-width: none;
    object-fit: fill;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-course-copy {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: calc(145px * var(--home-scale));
    height: auto;
    min-width: 0;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy {
    left: calc(190px * var(--home-scale));
    width: calc(128px * var(--home-scale));
    z-index: 4;
  }

  body.home-exact-v12 #referenceHome .is-python .code-course-copy,
  body.home-exact-v12 #referenceHome .is-cpp .code-course-copy {
    left: calc(31px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-course-copy h2,
  body.home-exact-v12 #referenceHome .code-course-copy > span,
  body.home-exact-v12 #referenceHome .code-course-copy p,
  body.home-exact-v12 #referenceHome .code-course-copy > strong,
  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy h2,
  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy > span,
  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy p,
  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy > strong {
    position: absolute;
    left: 0;
    margin: 0;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-course-copy h2 {
    top: calc(24px * var(--home-scale));
    font-size: calc(27px * var(--home-scale));
    line-height: 1.1;
  }

  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy h2 {
    top: calc(27px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-course-copy > span {
    top: calc(64px * var(--home-scale));
    padding: calc(6px * var(--home-scale)) calc(12px * var(--home-scale));
    border-radius: calc(15px * var(--home-scale));
    font-size: calc(12px * var(--home-scale));
    line-height: 1;
  }

  body.home-exact-v12 #referenceHome .code-course-copy p {
    top: calc(112px * var(--home-scale));
    width: calc(154px * var(--home-scale));
    font-size: calc(13px * var(--home-scale));
    line-height: 1.62;
  }

  body.home-exact-v12 #referenceHome .is-scratch .code-course-copy p {
    width: calc(142px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-course-copy > strong {
    bottom: calc(20px * var(--home-scale));
    display: grid;
    place-items: center;
    width: calc(45px * var(--home-scale));
    height: calc(45px * var(--home-scale));
    border-width: 1px;
  }

  body.home-exact-v12 #referenceHome .code-course-copy > strong svg {
    width: calc(19px * var(--home-scale));
    height: calc(19px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-blocks {
    position: absolute;
    z-index: 2;
    top: calc(10px * var(--home-scale));
    right: auto;
    left: calc(322px * var(--home-scale));
    width: calc(160px * var(--home-scale));
    height: calc(238px * var(--home-scale));
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .mini-blocks .mini-blocks-art {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
  }

  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i {
    position: absolute;
    z-index: 2;
    left: 30.5%;
    display: flex;
    align-items: center;
    width: 39%;
    min-height: 0;
    height: 14%;
    margin: 0;
    padding: 0 calc(3px * var(--home-scale));
    overflow: hidden;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: calc(10px * var(--home-scale));
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(1) { top: 12%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(2) { top: 29%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(3) { top: 46%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(4) { top: 63%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(5) { top: 80%; }

  /* Keep the text labels inside the real block shapes; later source-match rules
     intentionally use a wide desktop fallback, so the final composition needs
     to restore the measured stack width and zero out its extra offset. */
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i {
    width: 39% !important;
    min-height: 0 !important;
    height: 14% !important;
    margin-left: 0 !important;
    padding-inline: calc(3px * var(--home-scale)) !important;
    font-size: calc(10px * var(--home-scale)) !important;
  }

  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(1) { top: 13%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(2) { top: 27%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(3) { top: 41%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(4) { top: 55%; }
  body.home-exact-v12 #referenceHome .is-scratch .mini-blocks i:nth-of-type(5) { top: 71%; }

  body.home-exact-v12 #referenceHome .mini-editor {
    position: absolute;
    z-index: 2;
    top: calc(22px * var(--home-scale));
    right: calc(23px * var(--home-scale));
    width: calc(272px * var(--home-scale));
    height: calc(220px * var(--home-scale));
    min-height: 0;
    overflow: visible;
    color: #dce5f5;
    background: linear-gradient(145deg, #111b2c 0%, #111722 100%);
    box-shadow: 0 calc(10px * var(--home-scale)) calc(22px * var(--home-scale)) rgba(24, 31, 46, .17);
    border-radius: calc(15px * var(--home-scale));
    transform: none;
  }

  body.home-exact-v12 #referenceHome .is-cpp .mini-editor {
    right: calc(51px * var(--home-scale));
    width: calc(264px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-course-card.is-python .mini-editor,
  body.home-exact-v12 #referenceHome .code-course-card.is-cpp .mini-editor {
    transform: none;
  }

  body.home-exact-v12 #referenceHome .mini-editor b {
    height: calc(38px * var(--home-scale));
    display: flex;
    align-items: center;
    gap: calc(6px * var(--home-scale));
    padding: 0 calc(16px * var(--home-scale));
    color: #f4f6fb;
    background: linear-gradient(90deg, rgba(29, 40, 61, .88) 0, rgba(24, 34, 52, .88) calc(150px * var(--home-scale)), transparent calc(150px * var(--home-scale)));
    font-size: calc(12.5px * var(--home-scale));
    line-height: normal;
  }

  body.home-exact-v12 #referenceHome .mini-editor b img {
    width: calc(28px * var(--home-scale));
    height: calc(28px * var(--home-scale));
    flex: 0 0 calc(28px * var(--home-scale));
    border-radius: 50%;
    object-fit: cover;
  }

  body.home-exact-v12 #referenceHome .mini-editor code {
    display: block;
    padding: calc(17px * var(--home-scale)) calc(18px * var(--home-scale));
    color: #e9edf5;
    font-size: calc(14px * var(--home-scale));
    line-height: calc(20px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-editor code .code-line {
    display: block;
    height: calc(36px * var(--home-scale));
    color: #e9edf5;
    white-space: nowrap;
  }

  body.home-exact-v12 #referenceHome .mini-editor code em {
    width: calc(30px * var(--home-scale));
    color: #707b91;
  }

  body.home-exact-v12 #referenceHome .mini-editor code .tok-cyan { color: #55c4ff; }
  body.home-exact-v12 #referenceHome .mini-editor code .tok-purple { color: #d879ef; }
  body.home-exact-v12 #referenceHome .mini-editor code .tok-green { color: #a8d58a; }
  body.home-exact-v12 #referenceHome .mini-editor code .tok-orange { color: #ffb24a; }

  body.home-exact-v12 #referenceHome .is-cpp .mini-editor code {
    padding-top: calc(15px * var(--home-scale));
    font-size: calc(13px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .is-cpp .mini-editor code .code-line {
    height: calc(25px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .is-cpp .mini-editor code .code-line:nth-child(n + 3) {
    height: calc(25px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .is-cpp .mini-editor code .code-line:nth-child(3) {
    margin-top: calc(13px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play {
    right: calc(-3px * var(--home-scale));
    bottom: calc(-8px * var(--home-scale));
    width: calc(58px * var(--home-scale));
    height: calc(58px * var(--home-scale));
    border-radius: calc(14px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play svg {
    width: calc(22px * var(--home-scale));
    height: calc(22px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .course-cpp-badge {
    position: absolute;
    z-index: 5;
    right: calc(6px * var(--home-scale));
    bottom: calc(-3px * var(--home-scale));
    width: calc(111px * var(--home-scale));
    height: calc(111px * var(--home-scale));
    max-width: none;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-learning-path {
    display: grid;
    grid-template-columns:
      calc(260px * var(--home-scale))
      calc(267.6667px * var(--home-scale))
      calc(52px * var(--home-scale))
      calc(267.6667px * var(--home-scale))
      calc(52px * var(--home-scale))
      calc(267.6667px * var(--home-scale))
      calc(270px * var(--home-scale));
    align-items: center;
    width: 100%;
    height: calc(84px * var(--home-scale));
    min-height: 0;
    padding: 0 calc(26px * var(--home-scale));
    overflow: hidden;
    border: 1px solid rgba(237, 218, 216, .88);
    border-radius: calc(18px * var(--home-scale));
    background: rgba(255, 250, 249, .88);
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > strong,
  body.home-exact-v12 #referenceHome .code-learning-path > em,
  body.home-exact-v12 #referenceHome .code-learning-path > span {
    position: static;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > strong {
    position: relative;
    gap: calc(14px * var(--home-scale));
    color: #444246;
    font-size: calc(17px * var(--home-scale));
    font-weight: 800;
    transform: translate(calc(12px * var(--home-scale)), calc(1px * var(--home-scale)));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > strong::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(201px * var(--home-scale));
    width: 1px;
    height: calc(48px * var(--home-scale));
    background: rgba(232, 218, 216, .84);
    transform: translateY(-50%);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > strong > img {
    width: calc(63px * var(--home-scale));
    height: calc(55px * var(--home-scale));
    flex: 0 0 calc(63px * var(--home-scale));
    margin-right: calc(-18px * var(--home-scale));
    object-fit: fill;
    transform: translateX(calc(-10px * var(--home-scale)));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span {
    position: relative;
    display: block;
    height: calc(36px * var(--home-scale));
    min-height: calc(36px * var(--home-scale));
    color: #232326;
    font-size: calc(16px * var(--home-scale));
    font-weight: 800;
    line-height: 1.15;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span b {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: calc(36px * var(--home-scale));
    height: calc(36px * var(--home-scale));
    border-radius: 50%;
    color: #fff;
    font-size: calc(15px * var(--home-scale));
    transform: none;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(1) b {
    background: linear-gradient(145deg, #f7a13d, #ed7e12);
    box-shadow: 0 0 0 calc(5px * var(--home-scale)) rgba(242, 138, 34, .14);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(2) b {
    background: linear-gradient(145deg, #4a98f0, #2675d7);
    box-shadow: 0 0 0 calc(5px * var(--home-scale)) rgba(47, 125, 224, .13);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(3) b {
    background: linear-gradient(145deg, #a257ee, #7830d6);
    box-shadow: 0 0 0 calc(5px * var(--home-scale)) rgba(135, 63, 224, .12);
  }

  body.home-exact-v12 #referenceHome .code-learning-path small,
  body.home-exact-v12 #referenceHome .code-learning-path > em small {
    display: block;
    align-self: start;
    margin-top: calc(3px * var(--home-scale));
    color: #858184;
    font-size: calc(11px * var(--home-scale));
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
  }

  body.home-exact-v12 #referenceHome .code-learning-path .path-step-copy {
    position: absolute;
    top: calc(4px * var(--home-scale));
    left: calc(53px * var(--home-scale));
    display: block;
    font-size: calc(20px * var(--home-scale));
    font-weight: 800;
    line-height: calc(22px * var(--home-scale));
    white-space: nowrap;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(1) .path-step-copy { color: #f28a22; }
  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(2) .path-step-copy { color: #2f7de0; }
  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(3) .path-step-copy { color: #873fe0; }

  body.home-exact-v12 #referenceHome .code-learning-path .path-step-copy small {
    position: absolute;
    top: calc(30px * var(--home-scale));
    left: 0;
    margin: 0;
    color: #858184;
    font-size: calc(13.5px * var(--home-scale));
    font-weight: 500;
    line-height: calc(15px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > i {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > i img {
    width: calc(75px * var(--home-scale));
    height: calc(57px * var(--home-scale));
    max-width: none;
    object-fit: fill;
    opacity: 1;
    transform: translateX(calc(-7px * var(--home-scale)));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > i:nth-of-type(2) img {
    width: calc(80px * var(--home-scale));
    filter: none;
    transform: translateX(calc(-8px * var(--home-scale)));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(1) {
    transform: translate(calc(25px * var(--home-scale)), 0);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(2) {
    transform: translate(calc(45px * var(--home-scale)), 0);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > span:nth-of-type(3) {
    transform: translate(calc(39px * var(--home-scale)), 0);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > em {
    position: relative;
    justify-content: flex-end;
    gap: calc(15px * var(--home-scale));
    color: #373437;
    font-size: calc(14px * var(--home-scale));
    font-style: normal;
    font-weight: 800;
  }

  body.home-exact-v12 #referenceHome .code-learning-path > em::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(36px * var(--home-scale));
    width: 1px;
    height: calc(48px * var(--home-scale));
    background: rgba(232, 218, 216, .84);
    transform: translateY(-50%);
  }

  body.home-exact-v12 #referenceHome .code-learning-path > em > img {
    width: calc(59px * var(--home-scale));
    height: calc(58px * var(--home-scale));
    flex: 0 0 calc(59px * var(--home-scale));
    object-fit: fill;
    transform: translateX(calc(7px * var(--home-scale)));
  }

  body.home-exact-v12 #referenceHome .code-learning-path > em > span {
    display: block;
    min-width: calc(142px * var(--home-scale));
    transform: translate(calc(12px * var(--home-scale)), calc(-2px * var(--home-scale)));
  }

  /* Stable one-time reveals. Final geometry never changes after entrance. */
  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-copy {
    animation: homeV12CopyIn .62s .05s cubic-bezier(.22, .8, .22, 1) both !important;
  }

  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-boy,
  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-girl-visual {
    animation: homeV12FigureIn .66s .12s cubic-bezier(.22, .8, .22, 1) both !important;
  }

  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-scratch,
  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-code-badge,
  body.home-exact-v12.is-intro-settled #referenceHome .code-lab-star {
    animation: homeV12DecorIn .56s .18s cubic-bezier(.22, .8, .22, 1) both !important;
  }

  body.home-exact-v12.is-intro-settled #referenceHome .code-course-deck {
    animation: homeV12DeckIn .68s .24s cubic-bezier(.22, .8, .22, 1) both !important;
  }
}

@keyframes homeV12CopyIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes homeV12FigureIn {
  from { opacity: 0; transform: translateY(13px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes homeV12DecorIn {
  from { opacity: 0; transform: translateY(7px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes homeV12DeckIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Transparent, scalable language marks and a contained editor run control. */
body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark svg,
body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 0;
}

body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark.is-python {
  padding: 0;
  background: transparent;
}

body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark.is-cpp {
  padding: 0;
  background: transparent;
}

body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark.is-python img {
  filter: drop-shadow(0 2px 3px rgba(30, 80, 126, .24));
}

body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark.is-cpp img {
  transform: scale(1.08);
  filter: drop-shadow(0 2px 3px rgba(69, 38, 160, .3));
}

body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play {
  right: 10px;
  bottom: 10px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #5aa2ff, #2f78e8);
  box-shadow: 0 8px 18px rgba(20, 77, 175, .34);
}

body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

body.home-exact-v12 #referenceHome .course-python-badge {
  position: absolute;
  z-index: 5;
  right: 4px;
  bottom: -4px;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 10px 13px rgba(42, 100, 178, .22));
}

body.home-exact-v12 #referenceHome .course-python-badge svg,
body.home-exact-v12 #referenceHome .course-python-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(21, 53, 94, .16));
}

body.home-exact-v12 #referenceHome .code-course-card.is-python .mini-editor {
  overflow: visible;
}

@media (min-width: 901px), (min-width: 560px) and (orientation: landscape) {
  body.home-exact-v12 #referenceHome .mini-editor b .editor-file-mark {
    width: calc(26px * var(--home-scale));
    height: calc(26px * var(--home-scale));
    flex-basis: calc(26px * var(--home-scale));
    border-radius: calc(8px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play {
    right: calc(10px * var(--home-scale));
    bottom: calc(10px * var(--home-scale));
    width: calc(46px * var(--home-scale));
    height: calc(46px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .mini-editor .mini-editor-play svg {
    width: calc(18px * var(--home-scale));
    height: calc(18px * var(--home-scale));
    margin-left: calc(2px * var(--home-scale));
  }

  body.home-exact-v12 #referenceHome .course-python-badge {
    right: 0;
    bottom: calc(-7px * var(--home-scale));
    width: calc(90px * var(--home-scale));
    height: calc(90px * var(--home-scale));
    padding: 0;
    border-radius: 0;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  body.home-exact-v12 .topbar {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-line {
    display: block;
    width: 100%;
    color: #111113;
    white-space: normal;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy h1 .code-lab-title-emphasis {
    display: block;
    width: max-content;
    margin-inline: auto;
    color: #ef2f3a;
    white-space: nowrap;
  }

  body.home-exact-v12 #referenceHome .course-python-badge {
    right: -5px;
    bottom: -6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
  }
}

@media (min-width: 560px) and (orientation: landscape) {
  body.home-exact-v12 .topbar .nav-links {
    display: flex;
  }

  body.home-exact-v12 .topbar .mobile-menu-btn,
  body.home-exact-v12 .topbar .icon-btn.mobile-menu-btn {
    display: none;
  }
}

/* Homepage screen-by-screen scrolling and one-screen learning journey. */
body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card.motion-soft {
  --parallax-y: 0px !important;
  --parallax-scale: 1 !important;
  opacity: 1;
  transform: none;
  filter: none;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] {
  background: linear-gradient(180deg, #fff 0%, #f8f9fc 100%);
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-title,
body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-side {
  min-width: 0;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-kicker {
  display: block;
  margin-bottom: 10px;
  color: #ef2f3a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-learning-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-learning-flow li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #4f5159;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-learning-flow li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  margin-right: 1px;
  background: #d7d8df;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-learning-flow span {
  color: #ef2f3a;
  font-variant-numeric: tabular-nums;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card {
  isolation: isolate;
  border: 1px solid rgba(220, 222, 230, .96);
  color: #fff;
  background: #141820;
  box-shadow: 0 12px 32px rgba(23, 28, 40, .1);
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > picture,
body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > picture > img,
body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card::after {
  display: block;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(8, 11, 19, .88) 0%, rgba(8, 11, 19, .57) 31%, rgba(8, 11, 19, .08) 66%, transparent 100%),
    linear-gradient(90deg, rgba(8, 11, 19, .2), transparent 62%);
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy {
  z-index: 2;
  max-width: none;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .34);
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy .ui-icon {
  color: #ef2f3a;
  border-color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card b {
  color: #fff;
  background: rgba(239, 47, 58, .88);
  text-shadow: none;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card h3 {
  color: #fff;
}

body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card p {
  color: rgba(255, 255, 255, .86);
}

@media (min-width: 901px) and (min-height: 680px), (min-width: 560px) and (orientation: landscape) {
  html:has(body.home-exact-v12 .page-view[data-view="home"].is-active) {
    scroll-snap-type: y mandatory;
    scroll-padding-top: var(--home-header-height);
  }

  body.home-exact-v12 #referenceHome > .ref-hero-wrap,
  body.home-exact-v12 #referenceHome > .ref-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.home-exact-v12 #referenceHome > .ref-section {
    height: calc(100vh - var(--home-header-height));
    height: calc(100svh - var(--home-header-height));
    min-height: 0;
    padding: clamp(14px, 2.5vh, 28px) 0;
    display: grid;
    align-items: center;
    overflow: hidden;
  }

  body.home-exact-v12 #referenceHome > .ref-section > .ref-inner {
    width: min(1180px, calc(100% - 48px));
    max-height: 100%;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] > .ref-inner {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(10px, 1.8vh, 18px);
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading {
    margin: 0;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .68fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: center;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading h2 {
    max-width: 760px;
    font-size: clamp(30px, 3.05vw, 46px);
    line-height: 1.08;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-side > p {
    font-size: clamp(13px, 1.18vw, 16px);
    line-height: 1.55;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(0, 1.16fr) repeat(2, minmax(0, .92fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.25vw, 15px);
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card {
    min-height: 0;
    height: auto;
    border-radius: 18px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-primary {
    grid-row: 1 / span 2;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-wide {
    grid-column: 2 / span 2;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy {
    left: 20px;
    right: 20px;
    bottom: 19px;
    padding: 0;
    border-radius: 0;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy .ui-icon {
    width: 32px;
    height: 32px;
    margin: 0 8px 9px 0;
    display: inline-flex;
    vertical-align: middle;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card b {
    min-height: 23px;
    padding: 0 8px;
    font-size: 10px;
    vertical-align: middle;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card h3 {
    margin-top: 8px;
    font-size: clamp(21px, 2.05vw, 29px);
    line-height: 1.1;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card p {
    max-width: 42em;
    margin-top: 7px;
    font-size: clamp(11px, .95vw, 13px);
    line-height: 1.45;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-primary .copy {
    right: 28px;
    bottom: 24px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-primary h3 {
    font-size: clamp(28px, 2.7vw, 38px);
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-wide .copy {
    right: 30%;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-wide h3 {
    font-size: clamp(24px, 2.35vw, 33px);
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-compact .copy .ui-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 6px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-compact h3 {
    font-size: clamp(20px, 1.8vw, 25px);
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-compact p {
    display: none;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-primary > picture > img,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-primary > img {
    object-position: center 48%;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-wide > picture > img,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-wide > img {
    object-position: center 49%;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  html:has(body.home-exact-v12 .page-view[data-view="home"].is-active) {
    scroll-snap-type: y proximity;
    scroll-padding-top: 66px;
  }

  body.home-exact-v12 #referenceHome > .ref-hero-wrap,
  body.home-exact-v12 #referenceHome > .ref-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] {
    height: calc(100vh - 66px);
    height: calc(100svh - 66px);
    min-height: 610px;
    padding: 16px 0;
    display: grid;
    align-items: stretch;
    overflow: hidden;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] > .ref-inner {
    width: calc(100% - 20px);
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading {
    display: block;
    margin: 0;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-kicker {
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading h2 {
    font-size: clamp(24px, 7.8vw, 31px);
    line-height: 1.08;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-heading-side,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card p,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .mobile-home-more {
    display: none;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento {
    min-height: 0;
    height: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card {
    display: block;
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    height: auto;
    border-radius: 14px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > picture,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > img {
    position: absolute;
    height: 100%;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > picture > img,
  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card > img {
    object-position: center;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 0;
    border-radius: 0;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card .copy .ui-icon {
    display: none;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card b {
    min-height: 20px;
    padding: 0 7px;
    font-size: 8px;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card h3 {
    margin-top: 7px;
    font-size: clamp(16px, 4.35vw, 18px);
    line-height: 1.14;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card h3 br {
    display: none;
  }

  body.home-exact-v12 #referenceHome > .ref-section[aria-label="科技学习亮点"] .ref-bento-card::after {
    background: linear-gradient(0deg, rgba(8, 11, 19, .9) 0%, rgba(8, 11, 19, .5) 36%, rgba(8, 11, 19, .04) 72%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.home-exact-v12 .page-view[data-view="home"].is-active) {
    scroll-snap-type: none;
  }

  body.home-exact-v12 #referenceHome .code-lab-copy,
  body.home-exact-v12 #referenceHome .code-lab-boy,
  body.home-exact-v12 #referenceHome .code-lab-girl-visual,
  body.home-exact-v12 #referenceHome .code-lab-scratch,
  body.home-exact-v12 #referenceHome .code-lab-code-badge,
  body.home-exact-v12 #referenceHome .code-lab-star,
  body.home-exact-v12 #referenceHome .code-course-deck {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

body.home-exact-v12 .portrait-orientation-notice {
  display: none;
}

@media (max-width: 480px) and (orientation: portrait) {
  html:has(body.home-exact-v12) {
    min-width: 0;
    overflow: hidden;
    background: #fffdfc;
  }

  body.home-exact-v12 {
    min-height: 100svh;
    min-width: 0;
    overflow: hidden;
    background: #fffdfc;
  }

  body.home-exact-v12 > *:not(.portrait-orientation-notice) {
    display: none !important;
  }

  body.home-exact-v12 .portrait-orientation-notice {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    box-sizing: border-box;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    place-items: center;
    overscroll-behavior: none;
    background: #fffdfc;
    color: #171719;
  }

  body.home-exact-v12 .portrait-notice-stage {
    position: relative;
    width: auto;
    height: min(100%, 216.4103vw, 930px);
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 390 / 844;
    margin: 0 auto;
    overflow: hidden;
    background: #fffdfc url("ideasun-code-lab-background-v1.png") center / cover no-repeat;
    container: portrait-stage / inline-size;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    isolation: isolate;
  }

  body.home-exact-v12 .portrait-notice-stage::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 253, 252, .18);
    content: "";
    pointer-events: none;
  }

  body.home-exact-v12 .portrait-notice-brand {
    position: absolute;
    top: 2.25%;
    left: 4.8%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.795cqw;
  }

  body.home-exact-v12 .portrait-notice-brand img {
    width: 8.2cqw;
    aspect-ratio: 1;
    border-radius: 2.564cqw;
    box-shadow: 0 1.795cqw 4.103cqw rgba(239, 47, 58, .13);
  }

  body.home-exact-v12 .portrait-notice-brand span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
  }

  body.home-exact-v12 .portrait-notice-brand strong {
    color: #171719;
    font-size: 3.6cqw;
    font-weight: 850;
    letter-spacing: -.04em;
  }

  body.home-exact-v12 .portrait-notice-brand small {
    margin-top: 1.282cqw;
    color: #9a9a9e;
    font-size: 2.6cqw;
    font-weight: 800;
    letter-spacing: .08em;
  }

  body.home-exact-v12 .portrait-notice-hero {
    position: absolute;
    top: 12%;
    right: 4.6%;
    left: 4.6%;
    z-index: 4;
    text-align: center;
  }

  body.home-exact-v12 .portrait-notice-hero > p {
    margin: 0 0 4.615cqw;
    color: #ef2f3a;
    font-size: 2.55cqw;
    font-weight: 720;
    letter-spacing: .26em;
  }

  body.home-exact-v12 .portrait-notice-hero h1 {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    color: #101012;
    font-size: 13.4cqw;
    font-weight: 950;
    letter-spacing: -.075em;
    line-height: .98;
  }

  body.home-exact-v12 .portrait-notice-hero h1 span,
  body.home-exact-v12 .portrait-notice-hero h1 em {
    display: block;
    font-style: normal;
    white-space: nowrap;
  }

  body.home-exact-v12 .portrait-notice-hero h1 span {
    letter-spacing: -.105em;
  }

  body.home-exact-v12 .portrait-notice-hero h1 em {
    margin-top: 2.051cqw;
    color: #ef2f3a;
    letter-spacing: -.02em;
  }

  body.home-exact-v12 .portrait-notice-hero h1 img {
    position: absolute;
    right: -2%;
    bottom: -3.077cqw;
    width: 52%;
    height: 4.103cqw;
    object-fit: fill;
    opacity: .98;
  }

  body.home-exact-v12 .portrait-notice-hero > div {
    margin-top: 10.769cqw;
    color: #6c6c70;
    font-size: 4.25cqw;
    font-weight: 560;
    letter-spacing: .01em;
  }

  body.home-exact-v12 .portrait-maker-scene {
    position: absolute;
    top: 36.1%;
    right: 0;
    left: 0;
    z-index: 3;
    height: 41.7%;
  }

  body.home-exact-v12 .portrait-maker-girl {
    position: absolute;
    bottom: 0;
    left: 8.7%;
    width: 50.5%;
    max-height: 100%;
    object-fit: contain;
    object-position: bottom left;
    transform: scaleY(.93);
    transform-origin: bottom left;
    filter: drop-shadow(0 3.077cqw 5.128cqw rgba(59, 39, 46, .06));
  }

  body.home-exact-v12 .portrait-maker-drone {
    position: absolute;
    top: 13%;
    right: 12.5%;
    width: 28.5%;
    filter: drop-shadow(0 2.564cqw 3.846cqw rgba(229, 130, 25, .14));
    animation: portraitDroneFloat 3.2s ease-in-out infinite alternate;
  }

  body.home-exact-v12 .portrait-computer-card {
    position: absolute;
    right: 6.5%;
    bottom: 9.6%;
    display: flex;
    width: 30.8%;
    aspect-ratio: 1 / 1.13;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(241, 217, 220, .78);
    border-radius: 5.128cqw;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 3.077cqw 8.718cqw rgba(80, 42, 49, .055);
    color: #ef2f3a;
  }

  body.home-exact-v12 .portrait-computer-card > svg {
    width: 52%;
    height: auto;
    stroke-width: 1.65;
  }

  body.home-exact-v12 .portrait-computer-card span {
    margin-top: 3.077cqw;
    color: #69696d;
    font-size: 3.65cqw;
    font-weight: 680;
    letter-spacing: -.04em;
    white-space: nowrap;
  }

  body.home-exact-v12 .portrait-computer-card b {
    color: #ef2f3a;
    font-weight: 850;
  }

  body.home-exact-v12 .portrait-device-strip {
    position: absolute;
    right: 4.8%;
    bottom: 8.4%;
    left: 4.8%;
    z-index: 7;
    height: 13.8%;
    padding: 2.564cqw 2.821cqw 2.308cqw;
    border: 1px solid rgba(241, 217, 220, .76);
    border-radius: 5.128cqw;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 2.564cqw 7.179cqw rgba(71, 44, 49, .04);
    -webkit-backdrop-filter: blur(2.051cqw);
    backdrop-filter: blur(2.051cqw);
  }

  body.home-exact-v12 .portrait-device-strip ol {
    display: grid;
    grid-template-columns: 1fr 5.897cqw 1fr 5.897cqw 1fr;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.home-exact-v12 .portrait-device-strip li:not(.portrait-device-arrow) {
    display: grid;
    height: 100%;
    grid-template-rows: 6.41cqw 1fr auto;
    justify-items: center;
    color: var(--portrait-device-color);
  }

  body.home-exact-v12 .portrait-device-strip .is-pad { --portrait-device-color: #ef2f3a; }
  body.home-exact-v12 .portrait-device-strip .is-pc { --portrait-device-color: #1677eb; }
  body.home-exact-v12 .portrait-device-strip .is-mac { --portrait-device-color: #7437e6; }

  body.home-exact-v12 .portrait-device-number {
    display: grid;
    width: 6.41cqw;
    height: 6.41cqw;
    place-items: center;
    border-radius: 50%;
    background: var(--portrait-device-color);
    box-shadow: 0 1.538cqw 3.077cqw color-mix(in srgb, var(--portrait-device-color) 22%, transparent);
    color: #fff;
    font-size: 3.333cqw;
    font-weight: 850;
    line-height: 1;
  }

  body.home-exact-v12 .portrait-device-icon {
    display: grid;
    align-self: center;
    width: 14.615cqw;
    height: 11.538cqw;
    place-items: center;
    border-radius: 3.333cqw;
    background: transparent;
  }

  body.home-exact-v12 .portrait-device-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1.282cqw 2.051cqw color-mix(in srgb, var(--portrait-device-color) 13%, transparent));
  }

  body.home-exact-v12 .portrait-device-strip strong {
    color: #29292c;
    font-size: 3.9cqw;
    font-weight: 680;
    letter-spacing: -.03em;
    white-space: nowrap;
  }

  body.home-exact-v12 .portrait-device-arrow {
    display: grid;
    place-items: center;
    color: #b5b5b8;
  }

  body.home-exact-v12 .portrait-device-arrow svg {
    width: 5.385cqw;
    height: 5.385cqw;
    stroke-width: 1.9;
  }

  body.home-exact-v12 .portrait-complete-note {
    position: absolute;
    right: 17.6%;
    bottom: 2.35%;
    left: 17.6%;
    z-index: 8;
    display: flex;
    min-height: 5.7%;
    margin: 0;
    padding: 1.795cqw 2.564cqw;
    align-items: center;
    justify-content: center;
    gap: 2.051cqw;
    border: 1.5px solid #ef2f3a;
    border-radius: 999px;
    background: rgba(255, 255, 255, .77);
    color: #4e4e52;
    font-size: 3.05cqw;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
  }

  body.home-exact-v12 .portrait-complete-note svg {
    width: 4.615cqw;
    height: 4.615cqw;
    flex: none;
    color: #ef2f3a;
    stroke-width: 2;
  }

  @keyframes portraitDroneFloat {
    from { transform: translate3d(0, -2px, 0) rotate(-1deg); }
    to { transform: translate3d(0, 5px, 0) rotate(1.5deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    body.home-exact-v12 .portrait-maker-drone {
      animation: none !important;
    }
  }
}