:root {
    --public-primary: 76 175 80;
    --public-primary-50: 232 245 233;
    --public-primary-100: 200 230 201;
    --public-primary-200: 165 214 167;
    --public-primary-300: 129 199 132;
    --public-primary-400: 102 187 106;
    --public-primary-500: 76 175 80;
    --public-primary-600: 67 160 71;
    --public-primary-700: 56 142 60;
    --public-primary-800: 46 125 50;
    --public-primary-900: 27 94 32;
    --public-background-light: 247 249 245;
    --public-background-dark: 18 26 19;
    --public-surface-light: 255 255 255;
    --public-surface-dark: 24 34 26;
    --public-border-light: 217 227 216;
    --public-border-dark: 45 59 48;
    --public-subtle-light: 238 244 236;
    --public-subtle-dark: 34 48 38;
    --public-text-light: 27 42 28;
    --public-text-dark: 247 249 245;
    --public-text-light-primary: 27 42 28;
    --public-text-light-secondary: 90 112 90;
    --public-text-dark-primary: 247 249 245;
    --public-text-dark-secondary: 160 179 161;
    --public-subtext-light: 90 112 90;
    --public-subtext-dark: 160 179 161;

    --dashboard-primary: 16 185 129;
    --dashboard-primary-50: 236 253 243;
    --dashboard-primary-100: 209 250 229;
    --dashboard-primary-500: 16 185 129;
    --dashboard-primary-600: 5 150 105;
    --dashboard-primary-700: 4 120 87;
    --dashboard-background-light: 248 250 252;
    --dashboard-background-dark: 11 27 15;
    --dashboard-surface-light: 255 255 255;
    --dashboard-surface-dark: 24 34 26;
    --dashboard-border-light: 219 228 238;
    --dashboard-border-dark: 49 65 84;
    --dashboard-subtle-light: 238 244 248;
    --dashboard-subtle-dark: 28 38 51;
    --dashboard-text-light: 15 23 42;
    --dashboard-text-dark: 248 250 252;
    --dashboard-text-light-primary: 15 23 42;
    --dashboard-text-light-secondary: 71 85 105;
    --dashboard-text-dark-primary: 248 250 252;
    --dashboard-text-dark-secondary: 148 163 184;
    --dashboard-subtext-light: 100 116 139;
    --dashboard-subtext-dark: 148 163 184;

    --theme-scrollbar: 203 213 225;
    --theme-scrollbar-hover: 148 163 184;
    --theme-overlay-dark: 15 23 42;
    --theme-ink-strong: 15 23 42;
    --theme-ink-muted: 51 65 85;
    --theme-danger: 185 28 28;
    --theme-success: 22 163 74;
    --theme-success-soft: 240 253 244;
    --theme-success-strong: 21 128 61;
    --theme-emerald: 16 185 129;
    --theme-emerald-soft: 236 253 245;
    --theme-slate-50: 248 250 252;
    --theme-slate-200: 226 232 240;
    --theme-slate-300: 203 213 225;
    --theme-slate-400: 148 163 184;
    --theme-slate-600: 71 85 105;
    --theme-slate-700: 51 65 85;
    --theme-slate-900: 15 23 42;
    --theme-home-hero: 17 26 17;
}

.image-display-area {
    display: none !important;
    position: relative;
}

#image1:checked ~ .image-display-container #image-display-1,
#image2:checked ~ .image-display-container #image-display-2,
#image3:checked ~ .image-display-container #image-display-3,
#image4:checked ~ .image-display-container #image-display-4,
#image5:checked ~ .image-display-container #image-display-5,
#image6:checked ~ .image-display-container #image-display-6,
#image7:checked ~ .image-display-container #image-display-7,
#image8:checked ~ .image-display-container #image-display-8 {
    display: block !important;
}

.image-display-container {
    position: relative;
}

.image-display-area iframe,
.image-display-area video {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 10;
    touch-action: manipulation;
}

input[name="gallery"] {
    display: none !important;
    pointer-events: none;
}

.image-gallery-thumbnails .image-gallery-thumbnail > div {
    border-width: 2px;
    border-color: transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.image-gallery-thumbnail:hover > div {
    transform: translateY(-1px);
}

.image-gallery-thumbnails {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.image-gallery-thumbnails::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.tabs-nav {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--theme-scrollbar)) transparent;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    padding-bottom: 0.35rem;
}

.tabs-nav::-webkit-scrollbar {
    height: 8px;
}

.tabs-nav::-webkit-scrollbar-track {
    background: transparent;
}

.tabs-nav::-webkit-scrollbar-thumb {
    background: rgb(var(--theme-scrollbar) / 0.95);
    border-radius: 999px;
}

.tabs-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--theme-scrollbar-hover) / 1);
}

#image1:checked ~ .image-gallery-thumbnails label[for="image1"] > div,
#image2:checked ~ .image-gallery-thumbnails label[for="image2"] > div,
#image3:checked ~ .image-gallery-thumbnails label[for="image3"] > div,
#image4:checked ~ .image-gallery-thumbnails label[for="image4"] > div,
#image5:checked ~ .image-gallery-thumbnails label[for="image5"] > div,
#image6:checked ~ .image-gallery-thumbnails label[for="image6"] > div,
#image7:checked ~ .image-gallery-thumbnails label[for="image7"] > div,
#image8:checked ~ .image-gallery-thumbnails label[for="image8"] > div {
    border-color: rgb(var(--theme-success));
    box-shadow: 0 0 0 2px rgb(var(--theme-success) / 0.25);
}

.tab-content {
    display: none;
}

#tab1:checked ~ .tab-content-container #tab-content-1 {
    display: block;
}

#tab2:checked ~ .tab-content-container #tab-content-2 {
    display: block;
}

#tab3:checked ~ .tab-content-container #tab-content-3 {
    display: block;
}

#tab4:checked ~ .tab-content-container #tab-content-4 {
    display: block;
}

#tab5:checked ~ .tab-content-container #tab-content-5 {
    display: block;
}

#tab6:checked ~ .tab-content-container #tab-content-6 {
    display: block;
}

.tab-label {
    border-bottom-width: 2px;
    border-color: transparent;
}

.project-comment.is-targeted {
    background: rgb(var(--theme-success-soft));
    box-shadow: 0 0 0 1px rgb(var(--theme-success) / 0.18);
}

.tabs-container {
    scroll-margin-top: 24px;
}

.tabs-container:has(#tab1:checked) .tabs-nav label[for="tab1"],
.tabs-container:has(#tab2:checked) .tabs-nav label[for="tab2"],
.tabs-container:has(#tab3:checked) .tabs-nav label[for="tab3"],
.tabs-container:has(#tab4:checked) .tabs-nav label[for="tab4"],
.tabs-container:has(#tab5:checked) .tabs-nav label[for="tab5"],
.tabs-container:has(#tab6:checked) .tabs-nav label[for="tab6"] {
    border-color: rgb(var(--theme-success));
    color: rgb(var(--theme-success));
    font-weight: 700;
}

#tab-content-1:target,
#tab-content-2:target,
#tab-content-3:target,
#tab-content-4:target,
#tab-content-5:target,
#tab-content-6:target {
    display: block !important;
}