:root {
    --ink: #16233e;
    --night: #101d36;
    --orange: #ff7828;
    --cream: #fff1d9;
    --muted: #6b7280
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    font-family: "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
    background: #fffdfa
}

.shell {
    width: min(1120px, calc(100% - 48px));
    margin: auto
}

.campus-section { background: #fff2f5; }
.campus-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.campus-panel h2, .start-section h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.5; margin: 0 0 20px; }
.campus-panel p, .start-section p { line-height: 1.9; }
.campus-panel .eyebrow { color: #b64873; }
.campus-character { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; padding: 18px; border-radius: 24px; background: linear-gradient(120deg,#ffdde9,#fff9f3); border: 1px solid #f1d6e1; }
.campus-character img { width: min(48%,180px); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 18px; }
.campus-character figcaption { display: grid; gap: 10px; }
.campus-character strong { font-size: clamp(22px,3vw,30px); color: #a63865; }
.campus-character span { font-size: 14px; color: #765b68; line-height: 1.7; }
.campus-panel .primary { background: #b64873; box-shadow: none; }
.campus-steps { display: grid; gap: 12px; }
.campus-steps article { background: #fff; border: 1px solid #f0dce4; border-radius: 16px; padding: 18px 22px; }
.campus-steps b { color: #b64873; float: left; margin-right: 18px; }
.campus-steps h3 { margin: 0 0 6px; }
.campus-steps article p { margin: 0; color: var(--muted); }
.content-note, .catalog-note { font-size: 13px; color: var(--muted); line-height: 1.9; }
.catalog-note { margin: 26px 0 0; }
.start-section { background: #fff5e6; }
.start-section .shell { max-width: 850px; }
.release-note { font-size: 13px; line-height: 1.9; color: #dce7ff; }
.discovery-section { background: radial-gradient(ellipse at center, #fff0d7, #fffaf1 70%); }
.discovery-heading { text-align: center; margin-bottom: 42px; }
.discovery-heading h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.3; margin: 0 0 22px; color: #192952; }
.discovery-heading h2 em { font-style: normal; color: #bd691c; }
.discovery-heading > p:last-child { font-size: clamp(14px, 2vw, 20px); line-height: 1.9; font-weight: 700; }
.discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 980px; margin: auto; }
.discovery-card { border-radius: 30px; overflow: hidden; background: white; box-shadow: 0 14px 35px #dfad6b28; border: 1px solid #fff; }
.discovery-art { display: flex; justify-content: center; padding: 24px 24px 0; background: linear-gradient(#eaf2ff, #fff); }
.money .discovery-art { background: linear-gradient(#ffe9d4, #fff); }
.english .discovery-art { background: linear-gradient(#f2e5ff, #fff); }
.growth .discovery-art { background: linear-gradient(#e8f1dd, #fff); }
.discovery-art img { display: block; width: min(100%, 300px); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 22px; }
.discovery-copy { padding: 26px 32px 30px; }
.discovery-copy span { font-size: 13px; color: #7b6e63; }
.discovery-copy h3 { font-size: 28px; margin: 10px 0; color: #192952; }
.discovery-copy p { line-height: 1.9; font-size: 15px; color: #596275; margin: 0; }
.discovery-note { text-align: center; margin: 28px auto 0; max-width: 800px; }
footer .shell { flex-wrap: wrap; gap: 16px; }
@media (max-width: 760px) {
    .campus-panel { grid-template-columns: 1fr; gap: 28px; }
    .trust { flex-wrap: wrap; row-gap: 10px; }
}
@media (max-width: 520px) {
    .discovery-grid { gap: 14px; }
    .discovery-card { border-radius: 20px; }
    .discovery-art { padding: 12px 12px 0; }
    .discovery-copy { padding: 18px 14px; }
    .discovery-copy h3 { font-size: 22px; }
    .discovery-copy span { font-size: 11px; }
    .discovery-copy p { font-size: 13px; }
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    color: white;
    background: radial-gradient(circle at 79% 22%, #47629c 0, transparent 22%), linear-gradient(128deg, #0c182c 0%, #172a4b 61%, #30467b 100%)
}

.hero:after {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    right: -320px;
    bottom: -440px;
    border-radius: 50%;
    background: #f7b34e;
    opacity: .18
}

.nav {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2
}

.brand {
    font-size: 22px;
    font-weight: 900;
    color: white;
    text-decoration: none;
    letter-spacing: 1px
}

.nav-links {
    display: flex;
    gap: 28px
}

.nav-links a {
    color: #dce7ff;
    text-decoration: none;
    font-size: 14px
}

.hero-grid {
    position: relative;
    z-index: 1;
    min-height: 620px;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center
}

.eyebrow {
    font-weight: 800;
    color: #b8d2ff;
    margin: 0 0 15px;
    letter-spacing: 1px;
    font-size: 15px
}

.eyebrow.warm {
    color: #c2771b
}

.hero h1 {
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.16;
    letter-spacing: 0;
    margin: 0;
    font-weight: 900
}

.hero h1 em {
    font-style: normal;
    color: #ffd181
}

.intro {
    max-width: 490px;
    font-size: 17px;
    line-height: 1.9;
    color: #d9e3f7;
    margin: 26px 0
}

.hero-actions {
    display: flex;
    gap: 14px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    padding: 14px 24px;
    border-radius: 8px;
    transition: transform .2s
}

.button:hover {
    transform: translateY(-2px)
}

.primary {
    background: var(--orange);
    color: white;
    box-shadow: 0 10px 20px #080e1d55
}

.ghost {
    color: white;
    border: 1px solid #ffffff55
}

.trust {
    display: flex;
    gap: 18px;
    margin-top: 27px;
    color: #c4d5ef;
    font-size: 13px
}

.trust span:before {
    content: "✦";
    color: #ffd181;
    margin-right: 6px
}

.hero-art {
    position: relative;
    height: 520px
}

.moon {
    position: absolute;
    right: 54px;
    top: 35px;
    width: 100px;
    height: 100px;
    background: #ffe6a0;
    border-radius: 50%;
    box-shadow: 0 0 35px #ffe6a088
}

.moon:after {
    content: "";
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #1c3054;
    left: 28px;
    top: -11px
}

.fairy {
    position: absolute;
    right: 40px;
    top: 130px;
    width: 130px;
    filter: drop-shadow(0 15px 14px #0005);
    animation: float 4s ease-in-out infinite
}

.hero-fox {
    position: absolute;
    width: 330px;
    bottom: 0;
    right: 82px;
    z-index: 2;
    filter: drop-shadow(0 26px 18px #08112188)
}

.hero-card {
    position: absolute;
    bottom: 65px;
    left: 5px;
    width: 230px;
    border: 1px solid #ffffff4d;
    background: #ffffff18;
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 8px;
    z-index: 3;
    display: grid;
    gap: 4px;
    font-size: 12px;
    color: #cfe0ff
}

.hero-card strong {
    font-size: 15px;
    color: white
}

.playing-dot {
    width: 8px;
    height: 8px;
    background: #ffd181;
    border-radius: 50%;
    position: absolute;
    right: 16px;
    top: 19px
}

.orbit {
    position: absolute;
    border: 1px solid #8ba9e855;
    border-radius: 50%;
    transform: rotate(-21deg)
}

.orbit-one {
    width: 410px;
    height: 210px;
    left: 35px;
    top: 206px
}

.orbit-two {
    width: 340px;
    height: 165px;
    left: 70px;
    top: 230px
}

.stars:before,
.stars:after {
    content: "✦  ·  ✦       ·   ✦  ·    ✦";
    position: absolute;
    color: #ffeaa3;
    letter-spacing: 28px;
    opacity: .8
}

.stars:before {
    left: 7%;
    top: 25%
}

.stars:after {
    right: 8%;
    bottom: 20%;
    transform: rotate(12deg)
}

.section {
    padding: 105px 0
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 42px
}

.section-heading h2,
.feature-copy h2,
.download h2 {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.25;
    letter-spacing: 0;
    margin: 0;
    font-weight: 900
}

.section-heading p {
    max-width: 360px;
    color: var(--muted);
    line-height: 1.8;
    margin: 0
}

.character-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px
}

.character-card {
    min-height: 354px;
    padding: 22px 19px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-shadow: 0 14px 25px #35231414
}

.character-card img {
    width: 180px;
    height: 190px;
    object-fit: contain;
    align-self: center;
    transition: transform .3s
}

.character-card:hover img {
    transform: translateY(-7px) scale(1.04)
}

.character-card span {
    font-size: 12px;
    font-weight: 800;
    color: #705a40
}

.character-card h3 {
    font-size: 28px;
    margin: 5px 0;
    font-weight: 900
}

.character-card p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #554b40
}

.fox {
    background: #ffe9cd
}

.bear {
    background: #eedcc7
}

.elephant {
    background: #dbe8ff
}

.pig {
    background: #ffe0e4
}

.features {
    background: #f4f6fb
}

.feature-layout {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 104px;
    align-items: center
}

.phone {
    width: 296px;
    height: 580px;
    background: #101d36;
    margin: auto;
    border: 10px solid #1c1c25;
    border-radius: 38px;
    padding: 12px;
    box-shadow: 0 26px 45px #2334514f;
    color: white
}

.phone-top {
    height: 25px;
    font-size: 12px;
    padding-left: 8px
}

.phone-screen {
    height: calc(100% - 25px);
    position: relative;
    text-align: center;
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(#202e58, #4b3270);
    padding-top: 45px
}

.sleep-moon {
    position: absolute;
    right: 23px;
    top: 15px;
    color: #ffe49c;
    font-size: 42px
}

.phone-screen p {
    margin: 0;
    font-size: 22px;
    font-weight: 900
}

.phone-screen h3 {
    margin: 5px 0 0;
    font-size: 19px
}

.phone-screen small {
    color: #b9c8ec
}

.phone-screen img {
    width: 210px;
    height: 240px;
    object-fit: contain;
    display: block;
    margin: 25px auto 0
}

.progress {
    height: 4px;
    background: #8290c3;
    margin: 0 18px
}

.progress i {
    display: block;
    height: 100%;
    background: #ffcc77;
    width: 42%
}

.player-control {
    display: inline-flex;
    width: 62px;
    height: 62px;
    margin: 23px 0 11px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #6d69a8;
    color: #ffe8d6;
    font-size: 25px;
    font-weight: 900
}

.sleep-message {
    font-size: 11px;
    margin: 0 14px;
    border-radius: 20px;
    background: #435290;
    padding: 9px
}

.feature-list {
    margin-top: 30px
}

.feature-list article {
    display: flex;
    gap: 18px;
    border-top: 1px solid #d9dfeb;
    padding: 19px 0
}

.feature-list b {
    font-size: 18px;
    color: var(--orange)
}

.feature-list h3 {
    margin: 0 0 5px;
    font-size: 19px
}

.feature-list p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7
}

.download {
    background: linear-gradient(110deg, #ff8b3f, #ef5d2b);
    color: white;
    padding: 76px 0
}

.download-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px
}

.download .eyebrow {
    color: #fff0d7
}

.download h2 {
    max-width: 620px
}

.download p:not(.eyebrow) {
    opacity: .9
}

.download-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.download-actions .button span {
    margin-left: 5px;
    opacity: .62;
    font-size: 12px
}

.light {
    background: white;
    color: #d94922;
    white-space: nowrap
}

footer {
    background: #111d34;
    color: #a5b2ca;
    font-size: 13px;
    padding: 27px 0
}

footer .shell {
    display: flex;
    justify-content: space-between;
    gap: 18px
}

footer span:first-child {
    font-weight: 900;
    color: white
}

footer a {
    color: #a5b2ca;
    text-decoration: none
}

@keyframes float {
    50% {
        transform: translateY(-12px) rotate(2deg)
    }
}

@media(max-width:760px) {
    .shell {
        width: min(100% - 32px, 560px)
    }

    .nav-links {
        display: none
    }

    .hero {
        min-height: 720px
    }

    .hero-grid {
        display: block;
        padding-top: 70px
    }

    .hero h1 {
        font-size: 47px
    }

    .intro {
        font-size: 15px
    }

    .hero-art {
        height: 335px;
        margin-top: 16px
    }

    .fairy {
        width: 95px;
        right: 5px;
        top: -49px
    }

    .moon {
        width: 65px;
        height: 65px;
        right: 116px;
        top: -37px
    }

    .moon:after {
        width: 61px;
        height: 61px;
        left: 18px;
        top: -7px
    }

    .hero-fox {
        width: 235px;
        right: 42px
    }

    .hero-card {
        left: 0;
        bottom: 30px;
        width: 196px
    }

    .orbit-one {
        width: 300px;
        height: 155px;
        left: 12px;
        top: 120px
    }

    .orbit-two {
        width: 250px;
        height: 125px;
        left: 39px;
        top: 137px
    }

    .section {
        padding: 68px 0
    }

    .section-heading {
        display: block
    }

    .section-heading p {
        margin-top: 16px
    }

    .character-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .character-card {
        min-height: 285px;
        padding: 15px
    }

    .character-card img {
        width: 130px;
        height: 145px
    }

    .character-card h3 {
        font-size: 22px
    }

    .character-card p {
        font-size: 11px
    }

    .feature-layout {
        grid-template-columns: 1fr;
        gap: 55px
    }

    .phone {
        width: 265px;
        height: 518px
    }

    .download-inner {
        display: block
    }

    .download h2 {
        font-size: 34px
    }

    .download .button {
        margin-top: 20px
    }

    .download-actions {
        align-items: flex-start
    }

    footer .shell {
        flex-wrap: wrap
    }

    .stars:before,
    .stars:after {
        font-size: 10px;
        letter-spacing: 15px
    }
}