.home-page {
    --primary-color:var(--home-primary, #17694f);
    --ink:var(--home-ink, #183e32);
    --muted:var(--home-muted, #65756d);
    background:var(--home-page, #f7f8f4)!important;
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC",sans-serif;
}
.home-page .container {
    max-width:1180px;
}
.home-page .navbar {
    min-height:78px;
    box-shadow:none!important;
    background:var(--home-surface, #fffefb)!important;
}
.home-page .navbar-brand {
    font-size:1.2rem;
    letter-spacing:-.03em;
}
.home-page .nav-link {
    font-size:.9rem;
    padding-right:1.2rem!important;
}
.home-page .btn {
    border-radius:9px;
    font-weight:600;
}
.home-page .btn-primary {
    --bs-btn-bg:var(--home-primary, #17694f);
    --bs-btn-border-color:var(--home-primary, #17694f);
    --bs-btn-hover-bg:var(--home-hover, #10503b);
    --bs-btn-hover-border-color:var(--home-hover, #10503b);
    --bs-btn-active-bg:var(--home-hover, #10503b);
    --bs-btn-active-border-color:var(--home-hover, #10503b);
    background:var(--home-primary, #17694f);
    border-color:var(--home-primary, #17694f);
}
.home-page .btn-primary:hover {
    background:var(--home-hover, #10503b);
}
.home-page a:focus-visible,.home-page button:focus-visible,.home-page input:focus-visible {
    outline:3px solid #c08530;
    outline-offset:4px;
}
.home-hero {
    background:radial-gradient(ellipse at 83% 30%,var(--home-glow, #e3ebdc) 0,transparent 48%),var(--home-hero, #f5f4eb);
    border-bottom:1px solid var(--home-border, #dfe4d9);
    overflow:hidden;
}
.hero-grid {
    display:grid;
    grid-template-columns:1.08fr 1fr;
    gap:65px;
    padding-top:74px;
    align-items:center;
    padding-bottom:62px;
}
.eyebrow {
    font-size:.68rem;
    font-weight:750;
    letter-spacing:.16em;
    color:var(--home-accent, #47735e);
}
.live-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--home-accent, #418965);
    margin-right:7px;
}
.hero-copy .hero-heading {
    font-size:clamp(2.3rem,4.2vw,3.65rem);
    letter-spacing:-.045em;
    line-height:1.27;
    font-weight:800;
    margin:23px 0;
}
.hero-copy .hero-heading>span {
    color:var(--home-accent, #278362);
}
.hero-description {
    font-size:.97rem;
    color:var(--home-hero-muted, #667269);
    line-height:1.95;
}
.hero-actions {
    display:flex;
    align-items:center;
    gap:26px;
    margin-top:28px;
}
.hero-actions .btn {
    padding:13px 23px;
}
.hero-actions .bi {
    margin-left:18px;
}
.hero-guide {
    font-size:.87rem;
    color:var(--home-hero-link, #284d3d);
    text-decoration:none;
    font-weight:600;
}
.hero-guide span {
    margin-left:8px;
}
.hero-benefits {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:27px;
    font-size:.73rem;
    color:var(--home-hero-muted, #5c7063);
}
.hero-benefits i {
    color:var(--home-accent, #278362);
}
.code-scene {
    min-width:0;
    transform:rotate(-1deg);
}
.code-caption {
    display:flex;
    justify-content:space-between;
    font-size:.59rem;
    font-weight:650;
    letter-spacing:.13em;
    color:var(--home-hero-muted, #5c7162);
    margin:0 4px 13px;
}
.code-window {
    border-radius:13px;
    overflow:hidden;
    background:var(--home-code, #192c28);
    box-shadow:0 20px 40px #173e3220;
    border:1px solid var(--home-code-line, #354b3f);
    color:#e6ece8;
}
.code-titlebar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 19px;
    background:var(--home-code-bar, #243a32);
    color:#c1cec5;
    font:11px ui-monospace,monospace;
    border-bottom:1px solid var(--home-code-line, #3a4c41);
}
.window-dots {
    color:#b9be91;
    letter-spacing:3px;
}
.code-content {
    padding:26px 15px 26px 0;
    font:12px/2.25 ui-monospace,SFMono-Regular,Consolas,monospace;
    overflow-x:auto;
}
.code-content>div {
    white-space:pre;
}
.line-no {
    display:inline-block;
    width:42px;
    text-align:center;
    color:#85998e;
    user-select:none;
}
.code-comment {
    color:#94aa9b;
}
.code-purple {
    color:#d9b3e5;
}
.code-yellow {
    color:#eed49c;
}
.code-green {
    color:#a5d5b1;
}
.code-output {
    border-top:1px solid var(--home-code-line, #3a4c41);
    padding:15px 21px 8px;
    background:var(--home-terminal, #14251f);
}
.output-label {
    display:flex;
    justify-content:space-between;
    font:9px ui-monospace,monospace;
    letter-spacing:.09em;
    color:#a4b7aa;
}
.code-output p {
    font:12px ui-monospace,monospace;
    margin-top:15px;
    color:#d8e5d8;
}
.code-output p>span:first-child {
    color:#a9d890;
    margin-right:9px;
}
.code-cursor {
    display:inline-block;
    width:6px;
    height:12px;
    margin-left:8px;
    background:#b7ce88;
    vertical-align:middle;
}
.code-note {
    display:flex;
    align-items:center;
    gap:13px;
    padding:16px 18px;
    background:var(--home-surface, #fffefa);
    border:1px solid var(--home-border, #dde2d6);
    border-radius:11px;
    margin: -1px 20px 0;
    box-shadow:0 9px 24px #173e3209;
    transform:rotate(1deg);
}
.note-icon {
    background:var(--home-soft, #eaf1df);
    color:var(--home-soft-ink, #457b41);
    border-radius:50%;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
}
.code-note strong {
    font-size:.79rem;
}
.code-note small {
    display:block;
    font-size:.66rem;
    color:var(--home-muted, #758074);
    margin-top:4px;
}
.note-spark {
    margin-left:auto;
    font-size:24px;
    color:var(--home-soft-ink, #7a8a57);
}
.learning-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid var(--home-border, #dbe0d2);
    padding-top:21px;
    padding-bottom:23px;
    font-size:.8rem;
    color:var(--home-hero-muted, #536c5b);
}
.strip-title {
    font-weight:650;
    color:var(--home-hero-link, #234c39);
}
.learning-strip b {
    font-family:ui-monospace,monospace;
    font-size:.67rem;
    color:var(--home-hero-muted, #6e8662);
    margin-right:12px;
}
#courses {
    scroll-margin-top:90px;
}
.section-title {
    font-size:1.75rem;
    font-weight:750;
    letter-spacing:-.035em;
}
.course-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:28px 0 18px;
}
.catalog-label {
    font-size:.86rem;
    font-weight:600;
    border-bottom:2px solid var(--home-primary, #17694f);
    padding:13px 2px;
}
.course-search {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid var(--home-border, #d9e1d9);
    border-radius:9px;
    padding:10px 15px;
    color:var(--home-muted, #718177);
    width:300px;
}
.course-search input {
    border:0;
    background:transparent;
    width:100%;
    min-width:0;
    font-size:.84rem;
    color:var(--home-ink, #234b3a);
}
.course-search input::placeholder {
    color:var(--home-muted, #748076);
}
.course-card {
    border:1px solid var(--home-border, #dde4db);
    border-radius:13px;
    overflow:hidden;
    box-shadow:0 3px 5px #173e3203;
    transition:transform .2s,box-shadow .2s;
}
.course-card:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 26px #173e3210;
}
.card-header-stripe {
    height:91px;
    padding:19px 23px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:repeating-linear-gradient(0deg,transparent,transparent 21px,#ffffff30 22px),var(--home-soft, #e7eee0);
    color:var(--home-soft-ink, #496a45);
}
.card-header-stripe>span:first-child {
    font:700 32px ui-monospace,monospace;
    letter-spacing:-.13em;
}
.card-header-stripe>span:last-child {
    font-size:.52rem;
    letter-spacing:.12em;
}
.home-page [data-course]:nth-child(3n+2) .card-header-stripe {
    background-color:var(--home-soft2, #e3ecee);
    color:var(--home-soft2-ink, #4d7077);
}
.home-page [data-course]:nth-child(3n+3) .card-header-stripe {
    background-color:var(--home-soft3, #f1e9d7);
    color:var(--home-soft3-ink, #8b794f);
}
.home-page .course-card .card-body {
    padding:21px 23px 12px!important;
}
.home-page .course-card .card-title {
    line-height:1.6;
    color:var(--home-ink, #244634);
    font-size:1.12rem!important;
    margin-top:13px;
}
.home-page .card-text {
    min-height:42px;
}
.home-page .course-card .card-footer {
    padding:16px 23px 20px!important;
}
.home-page .card-footer>div {
    gap:12px;
    flex-wrap:wrap;
    border-top:1px solid #edf0e9;
    padding-top:15px;
}
.teacher-avatar {
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--home-soft, #edf0e7);
    color:var(--home-soft-ink, #526b4b);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.75rem;
    flex-shrink:0;
}
.enroll-badge {
    font-size:.67rem;
    font-weight:600;
    padding:5px 8px;
    border-radius:5px;
}
.course-card.hidden-course {
    background:#eef0ea;
}
.course-card.inactive .card-header-stripe {
    filter:grayscale(1);
}
.search-empty {
    text-align:center;
    padding:50px;
    background:white;
    border:1px solid var(--home-border, #dfe4d9);
    border-radius:12px;
}
.search-empty h3 {
    font-size:1.15rem;
    margin-top:15px;
}
.search-empty p {
    color:var(--home-muted, #65756d);
}
.home-page footer {
    background:var(--home-footer, #203c30)!important;
}
.demo-banner {
    padding:9px 16px;
    background:var(--home-soft, #eaf0db);
    color:var(--home-soft-ink, #3e5d34);
    font-size:.8rem;
    text-align:center;
}
.demo-banner a {
    color:inherit;
}
[hidden] {
    display:none!important;
}
@media(min-width:1400px) {
    .hero-grid {
        padding-top:90px;
        padding-bottom:78px;
    }
}
@media(max-width:991px) {
    .hero-grid {
        gap:30px;
    }
    .code-content {
        font-size:10px;
    }
    .hero-benefits {
        gap:10px;
    }
    .hero-actions {
        gap:16px;
    }
    .learning-strip {
        font-size:.73rem;
    }
    .hero-copy .hero-heading {
        font-size:2.6rem;
    }
}
@media(max-width:767px) {
    .home-page .navbar {
        min-height:65px;
    }
    .hero-grid {
        grid-template-columns:1fr;
        padding-top:40px;
        padding-bottom:35px;
        gap:35px;
    }
    .hero-copy .hero-heading {
        font-size:2.65rem;
    }
    .hero-description {
        font-size:.9rem;
    }
    .code-scene {
        max-width:500px;
        width:100%;
        margin:auto;
        transform:none;
    }
    .code-content {
        font-size:12px;
    }
    .learning-strip {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:12px;
        padding:18px 12px;
    }
    .strip-title {
        grid-column:1/-1;
    }
    .learning-strip b {
        margin-right:5px;
    }
    .course-toolbar {
        align-items:stretch;
    }
    .course-search {
        width:65%;
    }
    .section-title {
        font-size:1.45rem;
    }
    #courses>.d-flex {
        gap:15px;
    }
    #courses>.d-flex>span {
        white-space:nowrap;
    }
    .home-page footer {
        text-align:center;
    }
    .code-note {
        margin:0 8px;
    }
    .hero-copy .eyebrow {
        font-size:.59rem;
    }
}
@media(prefers-reduced-motion:reduce) {
    .course-card {
        transition:none;
    }
    .course-card:hover {
        transform:none;
    }
    html {
        scroll-behavior:auto;
    }
}
/* Hero carousel controls stay outside the moving slides. */
.hero-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
}
.hero-arrow, .hero-playback {
    border: 1px solid var(--home-border, #aebdae);
    background: var(--home-surface, #fffefb);
    color: var(--home-hero-link, #234c39);
    border-radius: 50%;
    min-width: 40px;
    min-height: 40px;
}
.hero-arrow:hover, .hero-playback:hover {
    background: var(--home-glow, #e3ebdc);
}
.hero-dots {
    display: flex;
    gap: 4px;
}
.hero-dots button {
    border: 0;
    padding: 0;
    width: 30px;
    height: 40px;
    background: transparent;
    display: grid;
    place-items: center;
}
.hero-dots button::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--home-dot, #9caa96);
    transition: width .3s;
}
.hero-dots button[aria-current="true"]::after {
    width: 25px;
    background: var(--home-primary, #17694f);
}
.hero-playback {
    border-radius: 20px;
    padding: 0 14px;
    font-size: .75rem;
}
@media (prefers-reduced-motion: reduce) {
    .hero-dots button::after {
        transition: none;
    }
}
.hero-artwork {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: contain;
    border: 1px solid var(--home-code-line, #354b3f);
    border-radius: 13px;
    box-shadow: 0 20px 40px #173e3220;
    background: var(--home-code, #192c28);
}
/* Keep administrator-authored copy and up to eight indicators within the viewport. */
.hero-copy { min-width: 0; }
.hero-heading, .hero-description, .hero-benefits, .code-caption, .code-note { overflow-wrap: anywhere; }
.hero-controls, .hero-dots { flex-wrap: wrap; }
.hero-dots { justify-content: center; }