@charset "UTF-8";
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-block-size: 100vh;
    line-height: 1.5;
    margin: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
    max-inline-size: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

:root {
    --border-radius: 4px;
    --color-bg: #F8F4E3;
    --color-text: #555;
    --color-text-light: #888;
    --color-border-t1: rgb(from var(--skilltree-brown-1) r g b / 0.1);
    --color-border-t2: rgb(from var(--skilltree-brown-1) r g b / 0.2);
    --color-border-t3: rgb(from var(--skilltree-brown-1) r g b / 0.3);
    --color-border-t5: rgb(from var(--skilltree-brown-1) r g b / 0.5);
    --skilltree-brown-1: #6a665c;
    --skilltree-brown-2: #87837b;
    --skilltree-green-1: #24784c;
    --skilltree-green-2: #75bb7d;
    --skilltree-green-3: #96d696;
    --red-1: #cc0000;
    --blue-1: #31708f;
}

.event-log, .client, .coach-list, .ticket > ul, .class-units, .media-list, .event-list, .event__footer ul, .class__footer ul, .class__chapters .class__units, .event__info, .event__info li ul, .class-info, .chapter-selection__units, .series-events ul, .main-nav ul, .pagination ul, .member-nav ul, .unit-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.member-nav ul, .unit-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

    .member-nav ul a, .unit-nav a {
        text-decoration: none;
        background-color: var(--skilltree-brown-2);
        color: #fff;
        padding: 6px 12px;
        border-radius: 30px;
        white-space: nowrap;
    }

        .member-nav ul a.active, .unit-nav a.active {
            background-color: var(--skilltree-green-1);
        }

body {
    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, "Heiti TC", "Apple LiGothic Medium", "微軟正黑體", sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
    scroll-behavior: smooth;
}

html, body {
    block-size: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

main {
    container-type: inline-size;
}

a {
    color: var(--skilltree-green-2);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.7;
}

select {
    block-size: 35px;
    line-height: 35px;
    border-radius: var(--border-radius);
    border: var(--color-border-t2) 1px solid;
    background: #fff;
    min-inline-size: 120px;
}

input:where(:not([type=radio]):not([type=checkbox])), textarea, .input-fake {
    border-radius: var(--border-radius);
    padding: 6px 8px;
    border: 1px var(--color-border-t2) solid;
    accent-color: var(--skilltree-green-1);
    color: var(--color-text);
    background-color: #fff;
}

    input:disabled, textarea:disabled, .input-fake.disabled {
        background-color: #f1f1f1;
        color: #aaa;
    }

textarea {
    inline-size: 100%;
    block-size: 70px;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr {
    border: none;
    border-block-start: 1px solid var(--color-border-t2);
    margin: 3px 0 15px;
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

pre {
    overflow-x: auto;
}

.text--green {
    color: var(--skilltree-green-1);
}

.text--red, .text-danger {
    color: var(--red-1);
}

.text--blue {
    color: var(--blue-1);
}

.left-border--red {
    border-inline-start: 4px solid var(--red-1);
    padding-inline-start: 10px;
}

.left-border--green {
    border-inline-start: 4px solid var(--skilltree-green-1);
    padding-inline-start: 10px;
}

.left-border--blue {
    border-inline-start: 4px solid var(--blue-1);
    padding-inline-start: 10px;
}

.content-img {
    padding: 6px;
    background-color: #fff;
    border: 1px var(--color-border-t2) solid;
    margin: 20px auto;
}

.content-title {
    text-align: center;
}

    .content-title:first-child {
        margin-block-start: 0;
    }

h2.content-title {
    font-size: 1.8em;
    margin-block: 45px 30px;
    color: var(--skilltree-green-1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

    h2.content-title::before, h2.content-title::after {
        content: "";
        border-block-end: 2px solid var(--color-border-t1);
        position: relative;
        flex-grow: 1;
    }

h3.content-title {
    font-size: 1.4em;
    color: var(--skilltree-green-2);
    margin-block: 30px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    h3.content-title::before, h3.content-title::after {
        position: relative;
    }

    h3.content-title::before {
        content: "«";
    }

    h3.content-title::after {
        content: "»";
    }

.badge {
    line-height: 1em;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 30px;
    margin-inline: 8px;
    background-color: #eee;
    border: var(--color-border-t2) 1px solid;
    white-space: nowrap;
}

.badge--orange {
    background-color: #ff8a00;
    color: #fff;
    border: #ff7200 1px solid;
}

.btn {
    border-radius: var(--border-radius);
    padding: 6px 15px;
    border: 1px #888 solid;
    line-height: 1em;
    text-decoration: none;
    background-color: #f5f5f5;
    color: var(--color-text);
}

    .btn .svg-inline--fa {
        margin-inline-end: 5px;
    }

.btn--primary {
    background-color: var(--skilltree-green-1);
    color: #fff;
    border: none;
    border: var(--skilltree-green-1) 1px solid;
}

.btn--danger {
    background-color: var(--red-1);
    color: #fff;
    border: none;
    border: var(--red-1) 1px solid;
}

.btn--messenger {
    background-color: #0865fe;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 10px 20px;
}

.btn--email {
    background-color: var(--skilltree-green-1);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 10px 20px;
}

.btn--rss {
    background-color: #f38135;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 10px 20px;
}

.title--greenbase {
    margin: 0;
    background-color: var(--skilltree-green-1);
    color: #fff;
    padding: 15px;
    border-radius: var(--border-radius);
    border: 1px solid color-mix(in srgb, var(--skilltree-green-1) 90%, #000);
}

.title--underline, .event__content .title-h3 {
    border-block-end: var(--color-border-t2) 1px solid;
    font-size: 1.7rem;
    line-height: 1.2em;
    padding-block-end: 4px;
    margin-block-end: 16px;
}

    .title--underline::first-letter, .event__content .title-h3::first-letter {
        color: var(--skilltree-green-1);
    }

.title--square, .event__content .title-h4 {
    font-size: 1.3rem;
}

    .title--square::first-letter, .event__content .title-h4::first-letter {
        font-size: 1.4rem;
        background-color: var(--skilltree-green-1);
        border-radius: var(--border-radius);
        color: #fff;
        padding: 2px 4px;
        margin-inline-end: 2px;
    }

.title--bar {
    font-size: 1.5rem;
    position: relative;
    padding-inline-start: 18px;
}

    .title--bar::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inline-size: 10px;
        background: #ccc;
        inset-block: 0.25em;
    }

.title--greenbar {
    font-size: 1.3rem;
    position: relative;
    padding-inline-start: 11px;
    margin-block-end: 11px;
    margin-block-start: 22px;
}

    .title--greenbar::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inline-size: 4px;
        background: #75bb7d;
        inset-block: 0.25em;
    }

.note-block {
    padding: 10px 20px;
    border-radius: var(--border-radius);
    margin-block: 0 10px;
    background: #f9f9f9;
    border: 1px solid var(--color-border-t2);
}

.note-block--blue {
    background: #e8faff;
    border: 1px solid #a7dcff;
    color: #054060;
}

.note-block--yellow {
    background: #fff8e6;
    border: 1px solid #f2d48a;
    color: #6b4f00;
}

.note-block--green {
    background: #edf8f1;
    border: 1px solid #a7d9b8;
    color: #1f5a3a;
}

.note-block--red {
    background: #fdeeee;
    border: 1px solid #f3b1b1;
    color: #7a1f1f;
}

.note-block h4 {
    margin-block-start: 0;
}

    .note-block h4 i {
        margin-inline-end: 8px;
    }

    .note-block h4 + p {
        margin-block-start: 5px;
    }

.note-block p:first-child {
    margin-block-start: 0;
}

.normal-form input[type=email], .normal-form input[type=password], .normal-form input[type=tel], .normal-form input[type=text] {
    inline-size: 300px;
    max-inline-size: 100%;
}

.form-group {
    margin-block-end: 20px;
}

    .form-group label.checkbox, .form-group label.radio {
        display: block;
    }

    .form-group label:first-child:not(.radio):not(.checkbox) {
        display: block;
        color: #555;
        line-height: 33px;
        font-weight: 700;
    }

    .form-group input, .form-group textarea {
        border: var(--color-border-t2) 1px solid;
        padding: 8px;
        box-sizing: border-box;
    }

    .form-group .help-block {
        display: block;
        margin-block-start: 2px;
        color: var(--blue-1);
    }

.form-control.inline-rc {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
    gap: 10px;
}

.required, .requiredPrompt {
    color: #c00;
    margin-inline-start: 5px;
}

.dl-horizontal {
    margin: 1em 0;
}

    .dl-horizontal dt {
        float: inline-start;
        inline-size: 160px;
        overflow: hidden;
        clear: inline-start;
        text-align: end;
        color: var(--skilltree-green-1);
        font-weight: 700;
    }

    .dl-horizontal dd {
        margin-inline-start: 180px;
    }

@media (max-width: 480px) {
    .dl-horizontal dt {
        float: none;
        inline-size: auto;
        text-align: start;
    }

    .dl-horizontal dd {
        margin-inline-start: 0;
    }

        .dl-horizontal dd + dt {
            margin-block-start: 5px;
        }
}

.gmap iframe {
    inline-size: 100%;
    block-size: 400px;
    border: none;
    margin-block-start: 5px;
}

.code-block {
    display: block;
    padding: 8px 12px;
    border: var(--color-border-t2) 1px solid;
    background: #eee;
}

.input-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .input-wrapper .checked, .input-wrapper .uncheck {
        text-wrap: nowrap;
        border-radius: 30px;
        padding: 2px 12px;
    }

    .input-wrapper .checked {
        background-color: var(--skilltree-green-2);
        color: #fff;
        border: var(--skilltree-green-2) 1px solid;
    }

    .input-wrapper .uncheck {
        background-color: var(--color-border-t1);
        border: var(--color-border-t2) 1px solid;
    }

.wrapper--small-form, .login-wrapper {
    max-inline-size: 380px;
    margin: 0 auto;
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    padding: 15px 45px 30px;
    border-radius: var(--border-radius);
}

    .wrapper--small-form h2, .login-wrapper h2 {
        color: var(--skilltree-green-1);
        margin: 0 0 15px;
        font-size: 32px;
        text-align: center;
        border-block-end: var(--color-border-t2) 1px solid;
    }

    .wrapper--small-form .form-group, .login-wrapper .form-group {
        text-align: center;
    }

    .wrapper--small-form input, .login-wrapper input {
        inline-size: 100%;
    }

    .wrapper--small-form .btn--primary, .login-wrapper .btn--primary {
        display: block;
        padding-block: 10px;
        inline-size: 100%;
        margin: 30px auto 0;
    }

@media (max-width: 420px) {
    .wrapper--small-form, .login-wrapper {
        padding: 15px 15px 30px;
    }
}

.pagination {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .pagination ul {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination a, .pagination li.active > span {
        display: flex;
        inline-size: 32px;
        block-size: 32px;
        align-items: center;
        justify-content: center;
        background: var(--color-border-t1);
        border: var(--color-border-t2) 1px solid;
        border-inline-start: 0;
        text-decoration: none;
        color: var(--skilltree-green-1);
    }

        .pagination a:hover {
            text-decoration: none;
            background-color: var(--skilltree-green-2);
            color: #fff;
        }

    .pagination li.active > span {
        background: var(--skilltree-green-1);
        color: #fff;
    }

    .pagination li:first-child a, .pagination li:first-child.active > span {
        border-inline-start: var(--color-border-t2) 1px solid;
        border-radius: var(--border-radius) 0 0 var(--border-radius);
    }

    .pagination li:last-child a, .pagination li:last-child.active > span {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }

    .pagination li:only-child a, .pagination li:only-child.active > span {
        border-radius: var(--border-radius);
    }

.pagination__status {
    font-size: 0.8em;
    margin-block-start: 10px;
    color: #888;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay--hidden {
    opacity: 0;
    visibility: hidden;
}

.modal {
    background: #fff;
    border-radius: 8px;
    max-inline-size: 900px;
    max-block-size: 90vh;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: scale(1);
    transition: transform 0.3s ease;
}

.modal--hidden {
    transform: scale(0.95);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-block-end: 1px solid var(--color-border-t2);
}

    .modal__header h3 {
        margin: 0;
        color: var(--skilltree-green-1);
        font-size: 1.5rem;
    }

.modal__close {
    cursor: pointer;
    font-size: 1.2rem;
    color: #999;
    transition: color 0.2s ease;
}

    .modal__close:hover {
        color: #666;
    }

.modal__content {
    flex: 1;
    padding: 10px 20px;
    overflow-y: auto;
    min-block-size: 0;
}

.modal__footer {
    display: flex;
    gap: 15px;
    padding: 10px 20px;
    border-block-start: 1px solid var(--color-border-t2);
    justify-content: flex-end;
}

    .modal__footer .btn {
        block-size: 44px;
        min-inline-size: 120px;
        font-size: 1.2em;
    }

    .modal__footer .btn--secondary {
        background: #f5f5f5;
        color: var(--color-text-dark);
        border: 1px solid var(--color-border-t2);
    }

        .modal__footer .btn--secondary:hover {
            background: #e9e9e9;
        }

    .modal__footer .btn--primary {
        background: var(--skilltree-green-1);
        color: white;
    }

        .modal__footer .btn--primary:hover {
            background: color-mix(in srgb, var(--skilltree-green-1) 90%, black);
        }

@media (max-width: 768px) {
    .modal-overlay {
        padding: 15px;
    }

    .modal {
        max-block-size: 95vh;
    }

    .modal__header,
    .modal__content,
    .modal__footer {
        padding-inline: 20px;
    }

        .modal__footer .btn {
            min-inline-size: auto;
        }
}

@media (max-width: 480px) {
    .modal__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .modal__header .modal__close {
            position: absolute;
            inset-block-start: 20px;
            inset-inline-end: 25px;
        }

    .modal__footer {
        flex-direction: column;
        gap: 8px;
    }
}

.f-html {
    padding: 0;
    background: transparent;
}

.page-top-wrapper {
    flex: 1 0 auto;
}

.container {
    max-inline-size: clamp(300px, 90vw, 1100px);
    margin: 0 auto;
}

.wrapper--narrow {
    max-inline-size: 720px;
    margin: 0 auto;
}

.container-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-block-start: 20px;
}

    .container-actions .btn {
        padding: 12px 25px;
    }

.logo {
    margin: 10px 0 0;
    max-inline-size: 100%;
    overflow: hidden;
}

    .logo svg {
        block-size: 53px;
        inline-size: auto;
    }

#trunk {
    stroke-dasharray: 183;
    stroke-dashoffset: 183;
    animation: draw 0.6s ease-out forwards;
}

#branch1 {
    stroke-dasharray: 96;
    stroke-dashoffset: 96;
    animation: draw 0.4s ease-out forwards 0.3s;
}

#branch2 {
    stroke-dasharray: 88;
    stroke-dashoffset: 88;
    animation: draw 0.3s ease-out forwards 0.5s;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

#bud1 {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: budGrow 0.2s ease-out forwards;
    animation-delay: 0.7s;
}

#bud2 {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: budGrow 0.2s ease-out forwards;
    animation-delay: 0.8s;
}

#bud3 {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: budGrow 0.2s ease-out forwards;
    animation-delay: 0.9s;
}

@keyframes budGrow {
    to {
        transform: scale(1);
    }
}

.text-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 0.6s ease-out forwards 0.7s;
}

.page-header .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0 20px;
}

.main-nav {
    margin-block-start: 10px;
    border-block: 2px solid var(--color-border-t1);
    inline-size: 100%;
    font-weight: bold;
    position: relative;
}

    .main-nav #nav-toggle {
        display: none;
    }

    .main-nav button {
        display: none;
        border: none;
        background: none;
        color: var(--skilltree-brown-1);
        inline-size: 100%;
        text-align: center;
        font-size: 1.2em;
        cursor: pointer;
    }

        .main-nav button label {
            display: block;
            padding: 8px 10px;
            inline-size: 100%;
        }

        .main-nav button i {
            margin-inline-start: 5px;
            transition: transform 0.3s ease-out;
        }

    .main-nav ul {
        display: flex;
        gap: 55px;
        font-size: 1.2em;
        justify-content: center;
    }

    .main-nav a {
        text-decoration: none;
        display: block;
        padding: 5px 10px;
        position: relative;
        color: var(--skilltree-brown-1);
    }

        .main-nav a.active {
            color: var(--skilltree-green-1);
        }

        .main-nav a::before {
            position: absolute;
            inset-inline-start: -5px;
        }

        .main-nav a::after {
            position: absolute;
            inset-inline-end: -5px;
        }

        .main-nav a.active::before, .main-nav a:hover::before {
            content: "«";
        }

        .main-nav a.active::after, .main-nav a:hover::after {
            content: "»";
        }

        .main-nav a:hover::before, .main-nav a:hover::after {
            color: #aaa;
        }

@media (max-width: 1050px) {
    .main-nav ul {
        gap: 30px;
    }
}

@media (max-width: 840px) {
    .main-nav ul {
        gap: 20px;
    }

    .main-nav a {
        padding: 5px 8px;
    }
}

@media (max-width: 767px) {
    .main-nav button {
        display: block;
    }

    .main-nav #nav-toggle:checked ~ button i {
        transform: rotate(-180deg);
    }

    .main-nav ul {
        background: #e9e3d2;
        flex-direction: column;
        gap: 0;
        position: absolute;
        z-index: 9999;
        align-items: stretch;
        inline-size: 100%;
        max-block-size: 0;
        overflow: hidden;
        transition: max-block-size 0.3s ease-out;
    }

    .main-nav #nav-toggle:checked ~ ul {
        max-block-size: 258px;
    }

    .main-nav a {
        text-align: center;
    }

        .main-nav a::before {
            inset-inline-start: calc(50% - 2em - 20px);
        }

        .main-nav a::after {
            inset-inline-end: calc(50% - 2em - 20px);
        }
}

.page-footer {
    background: var(--skilltree-brown-2);
    color: #eee;
    margin-block-start: 45px;
}

    .page-footer > .container {
        display: flex;
        gap: 30px;
        padding-block-start: 30px;
        padding-block-end: 45px;
        justify-content: space-between;
    }

    .page-footer h3 {
        font-size: 1.4em;
        margin-block-start: 0;
        margin-block-end: 15px;
    }

.f-subscribe h4 {
    margin: 0 0 8px;
}

.email-input {
    display: flex;
    inline-size: 100%;
    margin-block-start: 12px;
}

    .email-input input[type=email] {
        border-radius: var(--border-radius) 0 0 var(--border-radius);
        flex-grow: 1;
        margin-inline-end: 0;
        border: none;
    }

    .email-input button.submit {
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        background-color: var(--skilltree-green-1);
        color: #fff;
        cursor: pointer;
        padding: 6px 15px;
        border: none;
    }

.subscribe-actions {
    display: flex;
    gap: 10px;
}

.footer-sub-block {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

    .footer-sub-block h4 {
        margin: 0 0 8px;
    }

        .footer-sub-block h4 a {
            font-weight: bold;
            text-decoration: none;
        }

@media (max-width: 1129px) {
    .page-footer > .container {
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px 0 30px;
    }

    .f-subscribe {
        inline-size: 100%;
        text-align: center;
    }

        .f-subscribe .subscribe-actions {
            justify-content: center;
        }

    .f-subscribe-email {
        flex-basis: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-block-end: 30px;
    }
}

@media (max-width: 624px) {
    .page-footer > .container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .page-footer .f-subscribe-email {
        margin-block-end: 0;
    }

    .page-footer .f-line {
        inline-size: 291px;
    }
}

.copyright-block {
    background: var(--skilltree-brown-1);
    text-align: center;
    padding: 5px 0;
}

    .copyright-block a {
        color: inherit;
    }

.event, .class {
    border: var(--color-border-t2) 1px solid;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    margin-block-end: 30px;
    flex-grow: 1;
}

    .event .svg-inline--fa, .class .svg-inline--fa {
        block-size: 18px;
    }

.event__title, .class__title {
    font-size: 1.4em;
    border-block-end: var(--color-border-t2) 1px solid;
    margin: 2px 15px 10px;
    padding: 5px 2px;
    display: flex;
    align-items: center;
    line-height: 1.4em;
}

    .event__title .icon, .class__title .icon {
        display: inline-flex;
        align-items: center;
    }

    .event__title .svg-inline--fa, .class__title .svg-inline--fa {
        inline-size: 21px;
        margin-inline-end: 8px;
        flex-shrink: 0;
        color: var(--skilltree-green-2);
    }

    .event__title a, .class__title a {
        display: inline-block;
        color: var(--skilltree-green-1);
        text-decoration: none;
        margin-inline-end: 4px;
        text-wrap: balance;
    }

    .event__title .badge, .class__title .badge {
        font-size: 0.7em;
        margin-inline: 0;
        position: relative;
        inset-block-start: -2px;
    }

.event__main, .class__main {
    padding: 0px 15px 15px;
    position: relative;
}

.event__img, .class__img {
    display: block;
}

    .event__img img, .class__img img {
        inline-size: 640px;
    }

.event__desc, .class__desc {
    overflow-y: auto;
    position: absolute;
    inset: 5px 15px 15px 685px;
}

    .event__desc p:first-child, .class__desc p:first-child {
        margin-block-start: 0;
    }

.event__footer, .class__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 15px;
    background: var(--color-border-t1);
    border-block-start: var(--color-border-t2) 1px solid;
    flex-wrap: wrap;
    gap: 5px 15px;
}

    .event__footer ul, .class__footer ul {
        display: flex;
        gap: 5px 15px;
        flex-wrap: wrap;
    }

    .event__footer li, .class__footer li {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .event__footer .svg-inline--fa, .class__footer .svg-inline--fa {
        margin-inline-end: 8px;
        color: var(--skilltree-green-1);
    }

    .event__footer .more-info, .class__footer .more-info {
        background: var(--skilltree-green-1);
        color: #fff;
        text-decoration: none;
        padding: 2px 15px;
        border-radius: 30px;
        flex-shrink: 0;
        margin-inline-start: auto;
    }

    .event__footer .badge, .class__footer .badge {
        background: #fafafa;
        margin-inline: 2px;
    }

@media (max-width: 1079px) {
    .event__img img {
        inline-size: 520px;
    }

    .event__desc {
        inset: 5px 15px 15px 565px;
    }
}

@media (max-width: 919px) {
    .event__img img {
        inline-size: 420px;
    }

    .event__desc {
        inset: 5px 15px 15px 465px;
    }
}

@media (max-width: 799px) {
    .event__img img {
        inline-size: 320px;
    }

    .event__desc {
        inset: 5px 15px 15px 365px;
    }
}

@media (max-width: 768px) {
    .event__main {
        display: block;
    }

    .event__img img {
        inline-size: 100%;
        block-size: auto;
    }

    .event__desc {
        position: static;
        inset: auto;
        margin: 15px 0 0;
    }
}

.class__video {
    position: relative;
    padding-block-start: 56.25%;
}

    .class__video iframe {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        border: none;
    }

.class__chapters {
    text-wrap: pretty;
}

    .class__chapters h4, .class__chapters h5 {
        margin: 0;
        line-height: 1.35em;
        text-wrap: pretty;
    }

    .class__chapters p:first-of-type {
        margin-block-start: 0;
    }

    .class__chapters .class__chapter {
        margin-block-end: 5px;
    }

    .class__chapters .class__length {
        font-size: 0.9em;
        color: var(--color-text-light);
        margin-inline-start: auto;
        padding-inline-start: 15px;
        text-wrap: nowrap;
    }

    .class__chapters .class__unit {
        border-block-start: var(--color-border-t2) 1px dotted;
        padding: 5px 15px 5px 25px;
    }

        .class__chapters .class__unit:first-child {
            border-block-start: none;
        }

    .class__chapters .class__unit-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--skilltree-brown-1);
        margin-block-end: 5px;
    }

        .class__chapters .class__unit-title h5 {
            font-size: 1em;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .class__chapters .class__unit-title .svg-inline--fa {
            color: var(--skilltree-green-2);
            font-size: 0.8em;
            position: relative;
            inset-block-start: 1px;
        }

    .class__chapters .class__unit-content {
        display: flex;
        align-items: flex-start;
    }

    .class__chapters .class__unit-desc {
        color: #666;
    }

    .class__chapters .class__unit-actions button {
        border: none;
        background: transparent;
        color: var(--skilltree-green-1);
        cursor: pointer;
        padding: 5px 4px;
    }

        .class__chapters .class__unit-actions button .svg-inline--fa {
            font-size: 20px;
        }

    .class__chapters summary::-webkit-details-marker {
        display: none;
    }

    .class__chapters summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        background-color: var(--color-border-t1);
        padding: 5px 15px 5px 8px;
        border-radius: var(--border-radius);
    }

        .class__chapters summary h4 {
            display: flex;
            align-items: center;
            gap: 8px;
        }

            .class__chapters summary h4::before {
                content: "";
                display: block;
                inline-size: 10px;
                block-size: 10px;
                background-color: var(--skilltree-brown-1);
                mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                transition: transform 0.2s ease;
            }

    .class__chapters details[open] summary h4::before {
        transform: rotate(90deg);
    }

@media (max-width: 580px) {
    .class__chapters .class__unit-title, .class__chapters summary {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.event--ended .event__img {
    filter: grayscale(100%);
    opacity: 0.8;
}

.event--ended .event__footer .svg-inline--fa {
    color: #666;
}

.event--ended .event__footer .more-info {
    background-color: #666;
}

.event--page img {
    inline-size: 100%;
    block-size: auto;
}

.event-wrapper, .class-wrapper {
    display: flex;
    gap: 45px;
    justify-content: center;
    align-items: flex-start;
}

.event-aside, .class-aside {
    flex: 0 0 340px;
}

    .event-aside .title--bar:first-child, .class-aside .title--bar:first-child {
        margin-block-start: 0;
    }

.class-aside {
    border: var(--color-border-t2) 1px solid;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 15px;
    position: sticky;
    inset-block-start: 15px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .class-aside h3 {
        margin: 0;
    }

    .class-aside .class__type {
        font-size: 0.9em;
        color: var(--color-text-light);
    }

    .class-aside .class__price {
        font-size: 36px;
        color: var(--red-1);
        line-height: 1.2;
    }

    .class-aside .ticket__btn {
        margin: 0;
        inline-size: 100%;
    }

        .class-aside .ticket__btn span {
            font-size: 1.2em;
        }

    .class-aside button {
        display: block;
        inline-size: 100%;
        block-size: 44px;
        line-height: 44px;
        font-size: 16px;
        padding: 0;
        cursor: pointer;
    }

@media (max-width: 1099px) {
    .event-aside, .class-aside {
        flex: 0 0 280px;
    }
}

@media (max-width: 899px) {
    .event-wrapper, .class-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .event-aside, .class-aside {
        flex: none;
        inline-size: 100%;
    }

    .class-aside {
        background: #fff;
        position: sticky;
        inset: auto 0 0;
        inline-size: 100cqw;
        margin: 0 0 -45px calc(50% - 50cqw);
        padding: 15px calc((100cqw - 90vw) / 2);
        border-radius: 0;
        border-inline: none;
        border-block-end: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
    }

        .class-aside h3 {
            line-height: 1.2;
            margin-inline-end: auto;
        }

        .class-aside ul {
            display: none;
        }

        .class-aside .btn {
            inline-size: 180px;
            margin: 0;
        }
}

@media (max-width: 559px) {
    .class-aside .class__price {
        font-size: 28px;
    }

    .class-aside .btn {
        inline-size: 120px;
    }

        .class-aside .btn > span:first-child {
            inline-size: 100%;
        }

        .class-aside .btn .icon {
            display: none;
        }
}

@media (max-width: 439px) {
    .class-aside {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-block: 10px;
    }

        .class-aside h3 {
            margin: 0;
            text-align: center;
        }

        .class-aside .class__price {
            text-align: center;
        }

        .class-aside .btn {
            inline-size: 100%;
        }
}

.current-events {
    background: rgba(255, 255, 255, 0.8);
}

    .current-events header {
        background: var(--skilltree-green-2);
        color: #fff;
    }

        .current-events header h4 {
            font-size: 1.2rem;
            padding: 2px 15px;
        }

    .current-events main {
        padding: 15px;
    }

        .current-events main img {
            margin: 0 auto;
        }

        .current-events main h5 {
            font-size: 1.1rem;
            margin: 5px 0;
        }

            .current-events main h5 a {
                text-decoration: none;
            }

        .current-events main p:first-of-type {
            margin-block-start: 0;
        }

        .current-events main p {
            color: var(--color-text-light);
        }

@media (max-width: 899px) {
    .current-events main {
        text-align: center;
    }
}

.event__info {
    margin-block-end: 15px;
}

    .event__info li .svg-inline--fa {
        margin-inline-end: 8px;
        color: var(--skilltree-green-1);
    }

    .event__info li li .svg-inline--fa {
        color: var(--skilltree-green-2);
    }

    .event__info li ul {
        margin-block-start: 5px;
        margin-inline-start: 20px;
    }

.class-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-block-end: 15px;
}

    .class-info li {
        display: flex;
        align-items: center;
    }

        .class-info li .svg-inline--fa {
            margin-inline-end: 5px;
            color: var(--skilltree-green-2);
        }

.event__level {
    background-color: var(--skilltree-brown-1);
    color: #fff;
    padding: 5px 8px;
}

.coach-block {
    display: flex;
    gap: 30px;
}

    .coach-block h4 {
        font-size: 1.2rem;
    }

        .coach-block h4 a {
            text-decoration: none;
        }

        .coach-block h4 i {
            margin-inline-end: 8px;
        }

    .coach-block img {
        block-size: 180px;
        inline-size: 180px;
        flex-shrink: 0;
        object-fit: cover;
        border-radius: 50%;
        border: var(--color-border-t1) 2px solid;
        margin-block-start: 20px;
    }

@media (max-width: 519px) {
    .coach-block {
        flex-direction: column-reverse;
        align-items: center;
        gap: 15px;
    }

        .coach-block h4 {
            margin-block-start: 0;
            text-align: center;
        }
}

.coach-block + h5 {
    font-size: 1.1rem;
    border-inline-start: var(--color-border-t2) 10px solid;
    padding-inline-start: 8px;
    margin-block-end: 20px;
}

.event__content .course-p__teacher-name {
    color: var(--skilltree-green-2);
    font-size: 21px;
    clear: both;
    margin: 33px 0 11px;
}

.event__content .course-p__teacher-photo {
    inline-size: 200px;
    block-size: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: var(--color-border-t1) 2px solid;
    margin: 0 0 20px 20px;
    float: inline-end;
}

.event__content .course-p__teacher-exp {
    font-size: 1.1rem;
    border-inline-start: var(--color-border-t2) 10px solid;
    padding-inline-start: 8px;
    margin-block-end: 20px;
}

@media (max-width: 519px) {
    .event__content .course-p__teacher-photo {
        float: none;
        display: block;
        margin: 0 auto 20px;
    }
}

.chapter-selection__chapter {
    margin-block-end: 30px;
}

    .chapter-selection__chapter:last-child {
        margin-block-end: 0;
    }

.chapter-selection__chapter-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 8px;
}

    .chapter-selection__chapter-header .chapter-checkbox {
        margin-block-start: 3px;
        accent-color: var(--skilltree-green-1);
        transform: scale(1.2);
        position: relative;
        inset: 4px 0 0 0;
    }

    .chapter-selection__chapter-header .chapter-selection__chapter-title {
        flex: 1;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .chapter-selection__chapter-header .chapter-selection__chapter-title h4 {
            margin: 0 0 5px 0;
            color: var(--skilltree-green-1);
            font-size: 1.2rem;
            line-height: 1.4;
        }

        .chapter-selection__chapter-header .chapter-selection__chapter-title .chapter-selection__length {
            color: var(--color-text-light);
            font-size: 0.9rem;
        }

.chapter-selection__units {
    margin-inline-start: 8px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--color-border-t2);
}

.chapter-selection__unit {
    margin-block-end: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .chapter-selection__unit:last-child {
        margin-block-end: 0;
    }

    .chapter-selection__unit .unit-checkbox {
        position: relative;
        inset-block-start: 5px;
        accent-color: var(--skilltree-green-1);
    }

.chapter-selection__unit-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

    .chapter-selection__unit-content:hover {
        background-color: rgba(var(--skilltree-green-1-rgb), 0.05);
    }

.chapter-selection__unit-title {
    inline-size: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .chapter-selection__unit-title h5 {
        margin: 0;
        font-size: 1rem;
        color: var(--color-text-dark);
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .chapter-selection__unit-title h5 .svg-inline--fa {
            color: var(--skilltree-green-2);
            font-size: 0.8em;
            position: relative;
            inset-block-start: 1px;
        }

    .chapter-selection__unit-title .chapter-selection__length {
        color: var(--color-text-light);
        font-size: 0.85rem;
    }

@media (max-width: 680px) {
    .chapter-selection__chapter-title, .chapter-selection__unit-title {
        flex-direction: column;
        gap: 4px;
    }

        .chapter-selection__chapter-title h4 {
            align-self: flex-start;
        }

        .chapter-selection__chapter-title .chapter-selection__length {
            align-self: flex-end;
        }

        .chapter-selection__unit-title h5 {
            align-self: flex-start;
        }

        .chapter-selection__unit-title .chapter-selection__length {
            align-self: flex-end;
        }
}

.chapter-selection__unit-desc p {
    margin: 8px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

    .chapter-selection__unit-desc p:first-child {
        margin-block-start: 0;
    }

@media (max-width: 768px) {
    .chapter-selection__unit-content {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .chapter-selection__unit-content .unit-checkbox {
            align-self: flex-start;
            margin-block-start: 0;
        }
}

.series-events {
    position: relative;
    border: 3px solid var(--skilltree-green-2);
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.8);
    margin: 30px 0 10px;
}

    .series-events header {
        position: absolute;
        inset-block-start: -45px;
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }

        .series-events header h4 {
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            background-color: var(--skilltree-green-2);
            color: #fff;
            padding: 0px 20px;
            border-radius: 20px;
        }

    .series-events main {
        padding: 15px 20px;
    }

.series-events__img {
    flex-shrink: 0;
}

.series-events__title {
    min-inline-size: 0;
    line-height: 1.3;
}

.series-events ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

    .series-events ul li img {
        block-size: 80px;
    }

    .series-events ul li a {
        text-decoration: none;
    }

    .series-events ul li h5 {
        font-size: 1.1rem;
        margin: 0;
        padding: 5px 0;
    }

@media (max-width: 450px) {
    .series-events main {
        padding-block: 10px;
    }

    .series-events ul {
        padding-block-start: 10px;
    }

        .series-events ul li {
            flex-direction: column;
            gap: 5px;
            margin-block-start: 5px;
        }

            .series-events ul li h5 {
                padding: 0;
                text-align: center;
            }

            .series-events ul li:first-child {
                margin-block-start: 0;
            }
}

.media-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.media {
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.media__main {
    padding: 8px 15px;
}

.media__title {
    margin: 0 0 4px;
    line-height: 1.5;
}

    .media__title a {
        color: var(--skilltree-green-1);
        text-decoration: none;
    }

.media__desc {
    inline-size: 100%;
    overflow: hidden;
    display: block;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.media__footer {
    border-block-start: var(--color-border-t2) 1px solid;
    padding: 6px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 980px) {
    .media-list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 580px) {
    .media-list {
        grid-template-columns: 1fr;
    }
}

:root {
    --diff: calc(100cqw - (100vh * 16 / 9));
    --not-wide: clamp(0, (200px - var(--diff)) * 1e18, 1);
}

.player-page .page-header {
    border-block-end: var(--color-border-t2) 1px solid;
}

    .player-page .page-header .logo {
        margin: 8px 0 0;
    }

        .player-page .page-header .logo svg {
            block-size: 40px;
        }

    .player-page .page-header .container {
        flex-direction: row;
        max-inline-size: 100%;
        justify-content: space-between;
        padding: 0 15px;
        position: relative;
    }

    .player-page .page-header .main-nav {
        inline-size: auto;
        border: none;
        margin: 8px 0 0;
    }

@media (max-width: 980px) {
    .player-page .main-nav ul {
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .player-page .main-nav ul {
        gap: 10px;
        font-size: 1.1em;
    }
}

@media (max-width: 767px) {
    .player-page .page-header .main-nav {
        position: static;
        align-self: stretch;
        margin: 0;
    }

        .player-page .page-header .main-nav button {
            block-size: 100%;
        }

        .player-page .page-header .main-nav ul {
            font-size: 1.2em;
            inset-inline: 0;
            gap: 0;
        }
}

.class-title {
    background: var(--skilltree-brown-1);
    color: #fff;
}

    .class-title h2 {
        margin: 0;
        padding: 0 15px;
    }

.player-wrapper {
    container-name: player-wrapper;
    container-type: inline-size;
    display: flex;
    background: #000;
    inline-size: 100%;
    block-size: calc(100vh - 106px);
    justify-content: center;
    transition: all 0.3s ease;
    overflow: hidden;
    justify-content: space-between;
    position: relative;
}

.player-main {
    flex-grow: 1;
    flex-shrink: 0;
    block-size: calc(100vh - 106px);
    aspect-ratio: 16/9;
    position: relative;
    transition: all 0.3s ease;
}

    .player-main iframe {
        inline-size: 100%;
        block-size: 100%;
    }

    .player-main .player-aside-toggle {
        position: absolute;
        inset-block-start: 0px;
        inset-inline-end: -77px;
        inline-size: 55px;
        block-size: 44px;
        line-height: 44px;
        background-color: buttonface;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 22px 0 0 22px;
        padding-inline-start: 6px;
        cursor: pointer;
        z-index: 10;
        transition: inset 0.3s ease;
        animation-delay: 0.3s;
    }

.player-aside {
    background: #fff;
    flex-grow: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    min-inline-size: 0;
    max-inline-size: calc(100cqw - (100vh - 106px) * 16 / 9);
    transition: max-inline-size 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 20;
}

    .player-aside > * {
        inline-size: calc(100cqw - (100vh - 106px) * 16 / 9);
    }

    .player-aside button, .player-aside .player-aside-toggle {
        display: block;
        inline-size: 100%;
        block-size: 44px;
        line-height: 44px;
        font-size: 16px;
        padding: 0;
        border: none;
        cursor: pointer;
    }

    .player-aside .player-aside-toggle {
        background-color: buttonface;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .player-aside .player-aside-toggle .svg-inline--fa {
            margin-inline-end: 8px;
        }

    .player-aside .class-progress {
        padding: 5px 15px;
        border-block-end: var(--color-border-t2) 1px solid;
    }

        .player-aside .class-progress h4 {
            margin: 0;
        }

        .player-aside .class-progress progress[value] {
            inline-size: 100%;
            accent-color: var(--skilltree-green-1);
        }

    .player-aside footer {
        margin-block-start: auto;
        text-align: center;
    }

        .player-aside footer .complete-unit .svg-inline--fa {
            margin-inline-end: 8px;
        }

        .player-aside footer .next-unit {
            background: var(--skilltree-green-1);
            color: #fff;
            overflow: hidden;
            position: relative;
            text-align: start;
        }

            .player-aside footer .next-unit > span:first-child {
                inline-size: calc(100% - 44px);
                block-size: 44px;
                display: inline-block;
                text-align: center;
            }

            .player-aside footer .next-unit span.icon {
                inline-size: 44px;
                text-align: center;
                background: color-mix(in srgb, var(--skilltree-green-1) 85%, #000);
                -webkit-transition: all 0.1s ease-in-out;
                transition: all 0.1s ease-in-out;
                display: block;
                position: absolute;
                inset-block-start: 0;
                inset-inline-end: 0;
            }

            .player-aside footer .next-unit .svg-inline--fa {
                block-size: 1em;
                margin-inline-end: 0;
            }

.player-wrapper:has(#aside-toggle:checked) .player-main .player-aside-toggle {
    inset-inline-end: 0;
}

.player-wrapper:has(#aside-toggle:checked) .player-aside {
    max-inline-size: 0;
}

@container player-wrapper (inline-size < calc((100vh - 106px) * 16 / 9 + 200px)) {
    .player-aside {
        position: absolute;
        max-inline-size: none;
        inline-size: 220px;
        inset-inline-end: 0;
        inset-block: 0;
    }

        .player-aside > * {
            inline-size: 100%;
        }

        .player-aside footer {
            position: absolute;
            inset-block-end: 0;
        }
}

@media (max-width: calc((100vh - 106px) * 16 / 9)) {
    .player-wrapper {
        flex-direction: column;
        inline-size: 100%;
        block-size: auto;
    }

    .player-main {
        inline-size: 100%;
        block-size: auto;
        aspect-ratio: 16/9;
    }

        .player-main .player-aside-toggle {
            display: none;
        }

    .player-aside {
        position: relative;
        inline-size: 100%;
        transition: max-block-size 0.3s ease;
    }

        .player-aside .player-aside-toggle .svg-inline--fa {
            transform: rotate(-90deg);
            transition: transform 0.3s ease;
        }

        .player-aside .class-progress {
            order: -1;
        }

        .player-aside footer {
            position: relative;
            order: -2;
        }

    .class-units-wrapper {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.3s ease;
    }

        .class-units-wrapper .class-units {
            overflow: hidden;
            min-block-size: 0;
        }

    .player-wrapper:has(#aside-toggle:checked) .player-main .player-aside-toggle {
        inset-inline-end: auto;
    }

    .player-wrapper:has(#aside-toggle:checked) .player-aside {
        max-block-size: none;
        max-inline-size: none;
    }

        .player-wrapper:has(#aside-toggle:checked) .player-aside .player-aside-toggle .svg-inline--fa {
            transform: rotate(90deg);
        }

    .player-wrapper:has(#aside-toggle:checked) .class-units-wrapper {
        grid-template-rows: 0fr;
    }
}

.class-units {
    flex: 1;
    overflow-y: auto;
}

    .class-units li {
        padding: 5px 15px;
        border-block-end: var(--color-border-t2) 1px solid;
        line-height: 1.5em;
    }

        .class-units li.active {
            background: var(--skilltree-green-1);
        }

            .class-units li.active a, .class-units li.active .svg-inline--fa {
                color: #fff;
            }

    .class-units a {
        text-decoration: none;
        color: var(--color-text-light);
        display: flex;
        align-items: center;
    }

    .class-units .svg-inline--fa {
        font-size: 1.2em;
        margin-inline-end: 8px;
        color: var(--skilltree-green-1);
    }

.unit-nav {
    margin: 30px 0;
    border-block-end: var(--color-border-t2) 1px solid;
    padding-block-end: 10px;
}

.ticket > ul li {
    background-color: #fff;
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-block-end: 10px;
}

.ticket h3 {
    margin: 0 0 8px;
    color: #111;
}

.ticket select {
    inline-size: 60px;
    min-inline-size: 0;
}

.ticket__top {
    margin-block-end: 12px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.ticket__info {
    color: #888;
}

.ticket__price strong {
    display: block;
    font-size: 1.8em;
    line-height: 1.2em;
    color: #c00;
    margin: 3px 0 5px;
    white-space: nowrap;
}

.ticket__points {
    color: #888;
    font-size: 0.9em;
}

.ticket__footer {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.ticket__quantity {
    flex-shrink: 0;
    text-align: end;
}

    .ticket__quantity.sold-out, .ticket__quantity.coming-soon {
        font-weight: bold;
    }

    .ticket__quantity.sold-out {
        color: var(--red-1);
    }

    .ticket__quantity.coming-soon {
        color: var(--blue-1);
    }

.ticket__btn {
    display: block;
    margin: 22px auto;
    background: var(--skilltree-green-1);
    border-radius: var(--border-radius);
    border: none;
    color: #fff;
    inline-size: 200px;
    block-size: 44px;
    line-height: 44px;
    font-size: 16px;
    padding: 0;
    overflow: hidden;
    position: relative;
    text-align: start;
    cursor: pointer;
}

    .ticket__btn > span:first-child {
        inline-size: calc(100% - 44px);
        block-size: 44px;
        display: inline-block;
        text-align: center;
    }

    .ticket__btn span.icon {
        inline-size: 44px;
        text-align: center;
        background: color-mix(in srgb, var(--skilltree-green-1) 85%, #000);
        -webkit-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
        display: block;
        position: absolute;
        inset-block-start: 0;
        inset-inline-end: 0;
    }

    .ticket__btn .svg-inline--fa {
        block-size: 1em;
        margin-inline-end: 0;
    }

    .ticket__btn.error {
        background: var(--red-1);
    }

        .ticket__btn.error span.icon {
            background: color-mix(in srgb, var(--red-1) 85%, #000);
        }

@media (max-width: 569px) {
    .ticket__top {
        flex-direction: column;
        gap: 10px;
        margin-block-end: 5px;
    }

    .ticket__price {
        text-align: end;
    }

    .ticket__footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
    }

    .ticket__code {
        text-align: end;
    }
}

.ticket-pre-order {
    margin: 0 auto;
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    padding: 20px 45px 30px;
    border-radius: var(--border-radius);
}

.order table {
    inline-size: 100%;
    margin-block-end: 12px;
}

    .order table thead {
        border-block-end: var(--color-border-t2) 1px solid;
        color: #333;
        font-weight: 700;
    }

    .order table th, .order table td {
        padding: 5px;
    }

    .order table .ticket__type {
        inline-size: 30%;
        text-align: start;
    }

    .order table .ticket__price {
        inline-size: 15%;
        text-align: end;
    }

    .order table .ticket__quantity {
        inline-size: 15%;
        text-align: end;
    }

.order-block {
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    padding: 15px;
    border-radius: var(--border-radius);
    margin-block-end: 40px;
}

    .order-block h4:first-child {
        margin-block-start: 0;
    }

.payment-method label.radio {
    margin-block-start: 10px;
}

    .payment-method label.radio:first-child {
        margin-block-start: 0;
    }

.payment-method .bank-list {
    margin-inline-start: 20px;
    margin-block-start: 5px;
    background: var(--color-border-t1);
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    padding: 5.5px;
}

.payment-total {
    border-block-start: var(--skilltree-green-1) 3px solid;
    border-block-end: var(--skilltree-green-1) 3px solid;
    padding: 11px;
    text-align: center;
    margin-block-end: 33px;
}

    .payment-total .price {
        font-size: 44px;
        line-height: 55px;
        color: #000;
    }

.service {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.service__block {
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service__icon {
    background-color: var(--skilltree-green-1);
    border-radius: 50%;
    block-size: 150px;
    inline-size: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .service__icon .svg-inline--fa {
        font-size: 80px;
        color: #fff;
    }

@media (max-width: 979px) {
    .service {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (609px < width <= 979px) {
    .service__block {
        flex-direction: row;
        gap: 30px;
    }

    .service__icon {
        flex-basis: 150px;
        flex-shrink: 0;
    }

    .service .content-title {
        margin: 0;
    }
}

.client {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    gap: 30px 0;
}

.client__block {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .client__block img {
        background-color: #fff;
        border: 1px var(--color-border-t2) solid;
    }

    .client__block h4 {
        margin-block-start: 10px;
    }

@media (1079px < width <= 1179px), (768px < width <= 889px), (499px < width <= 574px) {
    .client img {
        inline-size: 220px;
    }
}

@media (960px < width <= 1079px), (709px < width <= 768px), (469px < width <= 499px) {
    .client img {
        inline-size: 200px;
    }
}

@media (max-width: 959px) {
    .client {
        grid-template-columns: repeat(3, max-content);
        justify-content: center;
        gap: 20px;
    }
}

@media (max-width: 709px) {
    .client {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 469px) {
    .client {
        grid-template-columns: repeat(1, max-content);
    }
}

.coach-list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 75px;
    justify-content: center;
    margin-block-start: 30px;
}

    .coach-list li {
        flex-shrink: 0;
    }

        .coach-list li img {
            background-color: #fff;
            border-radius: 50%;
            block-size: 220px;
            inline-size: 220px;
            object-fit: cover;
        }

        .coach-list li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            text-decoration: none;
            color: var(--skilltree-green-1);
        }

@media (max-width: 959px) {
    .coach-list {
        gap: 30px;
    }

        .coach-list li img {
            block-size: 180px;
            inline-size: 180px;
        }
}

@media (max-width: 659px) {
    .coach-list {
        grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 439px) {
    .coach-list {
        grid-template-columns: repeat(1, max-content);
    }

        .coach-list li a {
            gap: 8px;
        }
}

.coach__info {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 0 auto;
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.5);
    margin-block-end: 30px;
    padding: 30px;
    gap: 45px;
}

    .coach__info h2 {
        color: var(--skilltree-green-1);
        font-size: 2em;
        display: flex;
        align-items: center;
    }

        .coach__info h2 .badge {
            font-size: 0.5em;
        }

    .coach__info h3 {
        border-inline-start: var(--skilltree-green-2) 5px solid;
        padding-inline-start: 8px;
    }

@media (max-width: 1019px) {
    .coach__info {
        display: block;
    }

        .coach__info img {
            float: inline-end;
            margin-inline-start: 30px;
            margin-block-end: 15px;
        }
}

@media (max-width: 619px) {
    .coach__info img {
        float: none;
        margin: 0 auto;
    }
}

.coach__img {
    border-radius: 50%;
    block-size: 250px;
    inline-size: 250px;
    object-fit: cover;
}

.class-top {
    display: flex;
    gap: 60px;
    margin-block-end: 45px;
    justify-content: center;
}

.class-top__right {
    flex: 0 0 340px;
}

.class-top h2:first-child {
    margin-block-start: 0;
}

@media (max-width: 1099px) {
    .class-top__right {
        flex: 0 0 280px;
    }
}

@media (max-width: 899px) {
    .class-top {
        flex-direction: column;
        gap: 0;
    }

    .class-top__right {
        flex: none;
        inline-size: 100%;
    }
}

.title--greenbase + .login-block {
    margin-block-start: 20px;
}

.member-nav {
    margin-block-end: 30px;
}

    .member-nav ul a.logout {
        opacity: 0.8;
    }

.event-log {
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    padding: 30px 45px;
    border-radius: var(--border-radius);
}

    .event-log > li {
        position: relative;
        border-inline-start: #e5e5e5 5px solid;
        margin-inline-start: 115px;
        padding: 0 0 32px;
    }

        .event-log > li::before {
            content: "";
            background: var(--skilltree-green-2);
            display: block;
            inline-size: 20px;
            block-size: 20px;
            position: absolute;
            inset-block-start: 12px;
            inset-inline-start: -12px;
            border-radius: 50%;
            border: #e5e5e5 5px solid;
        }

    .event-log .btn {
        padding: 6px 8px;
    }

        .event-log .btn .svg-inline--fa {
            margin-inline-end: 6px;
        }

.event-log__time {
    position: absolute;
    inset-block-start: 9px;
    inset-inline-start: -115px;
    color: #888;
    text-align: end;
}

.event-log__month {
    display: block;
    font-size: 28px;
}

.event-log__block {
    margin-inline-start: 33px;
    border: var(--color-border-t2) 1px solid;
}

.event-log__header {
    background: var(--color-border-t1);
    padding: 5px 15px;
    border-block-end: var(--color-border-t2) 1px solid;
    line-height: 27px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px 30px;
    flex-wrap: wrap;
}

    .event-log__header h3 {
        margin: 0;
        color: #333;
        position: relative;
        padding-inline-start: 25px;
    }

        .event-log__header h3 .svg-inline--fa {
            position: absolute;
            inset-block-start: 6px;
            inset-inline-start: 0;
            color: var(--skilltree-green-2);
        }

    .event-log__header .btn {
        flex-shrink: 0;
        margin-inline-start: auto;
    }

.event-log__detail {
    display: block;
    margin: 0 0 0 18px;
    padding: 8px 22px;
    list-style: none;
}

    .event-log__detail > li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
    }

.event-log__title {
    color: var(--skilltree-green-1);
    font-weight: bold;
    flex-shrink: 0;
}

.event-log__content {
    color: #888;
}

.event-log__error {
    color: #cc0000;
}

.event-log--fail {
    background: #f3f3f3;
}

@media (max-width: 768px) {
    .event-log > li {
        margin-inline-start: 0;
        padding-block-end: 15px;
    }

    .event-log__time {
        position: relative;
        inset-inline-start: 33px;
        inset-block-start: 0;
        text-align: start;
        padding-block-start: 8px;
        margin-block-end: 5px;
    }

    .event-log__month {
        display: none;
    }
}

@media (max-width: 480px) {
    .event-log {
        padding: 15px;
    }

    .event-log__time {
        inset-inline-start: 19px;
    }

    .event-log__block {
        margin-inline-start: 18px;
    }

    .event-log__detail li {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-block-end: 5px;
    }
}

.current-points {
    inline-size: 320px;
    margin: 45px auto 40px;
    border: var(--skilltree-green-1) 3px solid;
    background-color: #fff;
    border-radius: 50px;
    padding: 30px 15px 10px;
    position: relative;
    text-align: center;
}

    .current-points h3 {
        background-color: var(--skilltree-green-1);
        color: #fff;
        padding: 3px 15px;
        border-radius: 30px;
        display: inline-flex;
        position: absolute;
        inset-block-start: -35px;
        inset-inline-start: 50%;
        transform: translateX(-50%);
    }

    .current-points .points {
        font-size: 32px;
        color: var(--skilltree-green-2);
        line-height: 1em;
    }

@media (max-width: 360px) {
    .current-points {
        inline-size: 100%;
    }
}

.points-history {
    inline-size: 100%;
    background-color: #fff;
}

    .points-history th, .points-history td {
        border: var(--color-border-t2) 1px solid;
        padding: 10px 15px;
    }

    .points-history th {
        background-color: rgb(from var(--skilltree-green-2) r g b/0.3);
        text-align: center;
    }

    .points-history td.date {
        text-align: center;
        white-space: nowrap;
    }

    .points-history td.points {
        font-weight: bold;
        text-align: end;
    }

    .points-history .plus {
        color: var(--skilltree-green-1);
    }

    .points-history .minus {
        color: #cc0000;
    }

@media (max-width: 479px) {
    .points-history {
        display: block;
        background-color: transparent;
    }

        .points-history thead {
            display: none;
        }

        .points-history tbody, .points-history tr, .points-history td {
            display: block;
            border: none;
            padding: 0;
        }

        .points-history tr {
            margin-block-end: 5px;
            border: var(--color-border-t2) 1px solid;
            padding: 10px 15px;
            border-radius: var(--border-radius);
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 4px 0;
        }

        .points-history td.date {
            flex-basis: 49%;
            text-align: start;
        }

        .points-history td.points {
            flex-basis: 49%;
            text-align: end;
        }

        .points-history td:last-child {
            color: #888;
        }
}

.member-form {
    max-inline-size: 520px;
    margin: 0 auto;
    background: #fff;
    border: var(--color-border-t2) 1px solid;
    padding: 20px 45px 30px;
    border-radius: var(--border-radius);
}

.member-form__title {
    color: var(--skilltree-green-1);
    margin: 0 0 20px;
    font-size: 28px;
    text-align: center;
    border-block-end: var(--color-border-t2) 1px solid;
    padding-block-end: 10px;
}

.member-form .form-group {
    text-align: start;
}

.member-form input {
    inline-size: 100%;
}

.member-form .btn {
    display: block;
    padding-block: 10px;
    inline-size: 100%;
    margin: 25px auto 0;
}

.member-form .ingroup-actions {
    display: flex;
    text-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    margin-block-start: 2px;
}

    .member-form .ingroup-actions .btn {
        inline-size: auto;
        margin: 0;
    }

@media (max-width: 420px) {
    .member-form {
        padding: 15px 15px 30px;
        margin-block-end: 0;
    }
}

.operation-result {
    inline-size: 380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    inset-block-start: -30px;
}

.operation-result__icon {
    inline-size: 100px;
    block-size: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 48px;
    position: relative;
    inset-block-start: 50px;
}

.operation-result--success .operation-result__icon {
    background: var(--skilltree-green-1);
}

.operation-result--success h2 {
    color: var(--skilltree-green-1);
}

.operation-result--fail .operation-result__icon {
    background: var(--red-1);
}

.operation-result--fail h2 {
    color: var(--red-1);
}

.operation-result__desc {
    background-color: #fff;
    border: var(--color-border-t2) 1px solid;
    border-radius: var(--border-radius);
    padding: 50px 25px 25px;
    inline-size: 100%;
}

.operation-result h2 {
    text-align: center;
    margin-block: 5px 0 0;
}