:root {
    --my-bg: #0A0A0A;
    --my-cyan: #E8001D;
    --my-slate: #888888;
    --my-text: #FFFFFF;
    --my-mono: "Inter", sans-serif;
    --my-title: "Bebas Neue", sans-serif;
}

body.my-page {
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 242, 255, 0.14), transparent 40%),
        linear-gradient(180deg, #080b10 0%, var(--my-bg) 45%, #090d13 100%);
    color: var(--my-text);
    overflow-x: clip;
}

.my-page nav {
    background: rgba(11, 14, 20, 0.72);
    border-bottom: 1px solid rgba(0, 242, 255, 0.16);
}

.my-page .logo,
.my-page h1,
.my-page h2,
.my-page h3 {
    font-family: var(--my-title);
}

.my-page p,
.my-page a,
.my-page li,
.my-page code {
    font-family: var(--my-mono);
}

.my-side-nav {
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 8px;
    border-radius: 18px;
    border: 1px solid rgba(0, 242, 255, 0.25);
    background: rgba(28, 36, 48, 0.32);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.4);
}

.my-side-nav a {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-decoration: none;
    color: rgba(216, 242, 255, 0.82);
    letter-spacing: 1px;
    font-size: 0.72rem;
    padding: 9px 5px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 180ms ease;
}

.my-side-nav a:hover,
.my-side-nav a.is-active {
    color: #bffbff;
    border-color: rgba(0, 242, 255, 0.45);
    background: rgba(0, 242, 255, 0.08);
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

.my-hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 24px;
    padding: 108px 7vw 54px 8vw;
}

.my-hero__left {
    max-width: 640px;
}

.my-kicker {
    font-family: var(--my-mono);
    color: rgba(170, 224, 240, 0.88);
    letter-spacing: 1px;
    font-size: 0.82rem;
    margin-bottom: 16px;
}

.my-hero h1 {
    font-size: clamp(2.4rem, 7vw, 6.7rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 0.9;
    color: #d9fbff;
    text-shadow: 0 0 28px rgba(0, 242, 255, 0.4);
}

.my-hero p {
    margin-top: 16px;
    max-width: 56ch;
    color: rgba(220, 236, 252, 0.86);
    line-height: 1.8;
}

.my-cta {
    margin-top: 30px;
    display: inline-block;
    text-decoration: none;
    color: #cbfdff;
    border: 1px solid rgba(0, 242, 255, 0.8);
    background: rgba(0, 242, 255, 0.06);
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.6px;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
    box-shadow: 0 0 0 rgba(0, 242, 255, 0), inset 0 0 20px rgba(0, 242, 255, 0.06);
}

.my-cta:hover {
    transform: translateY(-2px);
    background: rgba(0, 242, 255, 0.12);
    box-shadow: 0 0 22px rgba(0, 242, 255, 0.45), inset 0 0 26px rgba(0, 242, 255, 0.16);
}

.my-hero__right {
    min-height: 420px;
    border: 1px solid rgba(0, 242, 255, 0.2);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(0, 242, 255, 0.07), rgba(13, 18, 28, 0.9));
    box-shadow: inset 0 0 32px rgba(0, 242, 255, 0.08), 0 25px 70px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

#myPlanetCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.my-main {
    padding: 40px 7vw 80px 8vw;
}

.my-section {
    margin-bottom: 64px;
    scroll-margin-top: 100px;
}

.my-section h2 {
    border: none;
    margin-bottom: 18px;
    letter-spacing: 1px;
    color: #d5f8ff;
}

.my-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
}

.my-box {
    position: relative;
    border: 1px solid rgba(0, 242, 255, 0.2);
    border-radius: 18px;
    padding: 20px;
    background: linear-gradient(180deg, rgba(18, 26, 36, 0.95), rgba(11, 14, 20, 0.96));
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.my-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 242, 255, 0.05) 0px,
        rgba(0, 242, 255, 0.05) 1px,
        transparent 2px,
        transparent 4px
    );
    mix-blend-mode: screen;
    opacity: 0.3;
}

.my-box:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 242, 255, 0.48);
    box-shadow: 0 0 18px rgba(0, 242, 255, 0.2), 0 16px 28px rgba(0, 0, 0, 0.4);
}

.my-box h3 {
    margin-bottom: 8px;
    color: #e4fcff;
}

.my-box p {
    color: rgba(223, 235, 248, 0.86);
    line-height: 1.74;
}

.my-box--terrain { grid-column: span 4; }
.my-box--biome { grid-column: span 4; }
.my-box--meteor { grid-column: span 4; }

.my-blueprints {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.my-blueprint {
    border: 1px solid rgba(0, 242, 255, 0.2);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(14, 24, 38, 0.88), rgba(9, 15, 25, 0.9));
}

.my-blueprint h3 {
    margin-bottom: 8px;
}

.my-blueprint svg {
    width: 100%;
    height: auto;
    display: block;
}

.bp-frame,
.bp-shape,
.bp-wire,
.bp-mark {
    fill: none;
    stroke: rgba(0, 242, 255, 0.74);
    stroke-width: 2;
}

.bp-wire {
    stroke-dasharray: 5 5;
}

.bp-text {
    fill: rgba(183, 244, 255, 0.95);
    font-size: 14px;
    font-family: var(--my-mono);
}

.my-snippets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.my-code-card {
    border: 1px solid rgba(0, 242, 255, 0.16);
    border-radius: 14px;
    background: rgba(12, 18, 30, 0.9);
    padding: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 380ms ease, transform 380ms ease, border-color 220ms ease;
}

.my-code-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.my-code-card:hover {
    border-color: rgba(0, 242, 255, 0.44);
}

.my-code-head {
    margin-bottom: 10px;
    color: #c8fbff;
    font-weight: 600;
    font-family: var(--my-title);
}

.my-code-card pre {
    overflow-x: auto;
    padding: 10px;
    border-radius: 10px;
    background: rgba(7, 11, 19, 0.86);
}

.my-code-card code {
    font-size: 0.83rem;
    color: #c7eaff;
}

.my-challenges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.my-challenges article {
    border: 1px solid rgba(78, 92, 114, 0.6);
    border-radius: 14px;
    padding: 18px;
    background: rgba(16, 22, 34, 0.82);
}

.my-challenges h3 {
    margin-bottom: 8px;
    color: #d9f9ff;
}

.my-challenges p {
    color: rgba(214, 230, 245, 0.88);
}

@media (max-width: 1060px) {
    .my-side-nav { display: none; }
    .my-hero { grid-template-columns: 1fr; }
    .my-hero__right { min-height: 360px; }
}

@media (max-width: 820px) {
    .my-main,
    .my-hero {
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .my-bento,
    .my-blueprints,
    .my-snippets,
    .my-challenges {
        grid-template-columns: 1fr;
    }

    .my-box--terrain,
    .my-box--biome,
    .my-box--meteor {
        grid-column: span 1;
    }
}