[data-bs-theme="dark"] {
    --bs-body-bg: #101114;
    --bs-body-bg-rgb: 16, 17, 20;
    --bs-body-color: #f5f4f1;
    --bs-body-color-rgb: 245, 244, 241;
    --bs-emphasis-color: #f5f4f1;
    --bs-emphasis-color-rgb: 245, 244, 241;
    --bs-secondary-color: #a5a5af;
    --bs-secondary-bg: #1b1c21;
    --bs-border-color: #303138;
    --bs-primary: #d8fc72;
    --bs-primary-rgb: 216, 252, 114;
    --bs-primary-text-emphasis: #d8fc72;
}

[data-bs-theme="light"] {
    --bs-body-bg: #f7f7f2;
    --bs-body-bg-rgb: 247, 247, 242;
    --bs-body-color: #1b1c21;
    --bs-body-color-rgb: 27, 28, 33;
    --bs-emphasis-color: #1b1c21;
    --bs-emphasis-color-rgb: 27, 28, 33;
    --bs-secondary-color: #62636d;
    --bs-secondary-bg: #fff;
    --bs-border-color: #deded8;
    --bs-primary: #c3ec56;
    --bs-primary-rgb: 195, 236, 86;
    --bs-primary-text-emphasis: #4e6b13;
}

:root { --surfstats-ink: #162000; }
body { display: flex; flex-direction: column; min-height: 100vh; }
a:focus-visible, button:focus-visible { outline: 3px solid #6585d6; outline-offset: 4px; }
.skip-link:focus { position: absolute; z-index: 2; padding: .5rem 1rem; background: var(--bs-secondary-bg); }
.wordmark { color: var(--bs-body-color); font-size: 1.2rem; font-weight: 750; text-decoration: none; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2.15rem;
    background: var(--bs-primary);
    color: var(--surfstats-ink);
    border-radius: .55rem;
    font-style: italic;
}
.site-header .nav-link { color: var(--bs-secondary-color); }
.site-header .nav-link:hover { color: var(--bs-body-color); }
.theme-toggle {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
    --bs-btn-font-size: .875rem;
    white-space: nowrap;
}
.theme-icon { margin-inline-end: .2rem; }
.hero { padding-block: clamp(3.4rem, 7vw, 6.5rem); }
.hero h1 {
    font-size: clamp(2.75rem, 7vw, 6.1rem);
    font-weight: 750;
    line-height: .98;
    letter-spacing: -.06em;
    margin-bottom: 1.45rem;
}
.hero em { color: var(--bs-primary-text-emphasis); font: italic 400 1em Georgia, serif; }
.hero p { max-width: 43rem; font-weight: 400; }
.section-title { font-size: 1.3rem; font-weight: 650; }
.product-card {
    --bs-card-bg: var(--bs-secondary-bg);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: 1rem;
    overflow: hidden;
}
.product-category { color: var(--bs-primary-text-emphasis); font-size: .875rem; font-weight: 650; }
.card-title { font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 700; letter-spacing: -.035em; }
.product-link {
    --bs-btn-color: var(--surfstats-ink);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--surfstats-ink);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 88%, var(--surfstats-ink));
    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: var(--bs-btn-hover-bg);
    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
    --bs-btn-font-weight: 650;
}
.product-link span { margin-inline-start: .25rem; }
.product-art { display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 2 / 1; }
.product-art--studio { background: radial-gradient(ellipse at 55% 30%, #785c76, #262239 65%, #181523); }
.film-window {
    position: absolute;
    inset: 13% 18% 27%;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #b3a0c7;
    border-radius: .5rem;
    background: radial-gradient(ellipse at 65% 55%, #fdc486, #985382 34%, #392447 68%);
}
.film-window i { position: absolute; inset: 58% -15% -60%; background: #252339; transform: rotate(-15deg); }
.film-window span { z-index: 1; color: white; background: #211c36bc; border-radius: 50%; padding: .35rem .65rem; }
.film-timeline { position: absolute; bottom: 13%; width: 64%; display: flex; gap: .25rem; }
.film-timeline b { flex: 1; height: .32rem; border-radius: 1rem; background: #c5a5ea; }
.film-timeline b:nth-child(2) { flex: .55; background: #ebaa88; }
.film-timeline b:nth-child(3) { flex: .7; background: #827bc7; }
.product-art--laser {
    background: repeating-linear-gradient(0deg, #ffffff10 0 1px, transparent 1px 18px),
                repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 18px),
                radial-gradient(ellipse, #453324, #231c19 76%);
}
.laser-target {
    display: grid;
    place-items: center;
    width: 33%;
    aspect-ratio: 1;
    border: 1px solid #ffcb83;
    border-radius: 24%;
    transform: rotate(45deg);
    box-shadow: 0 0 24px #ffab5540, inset 0 0 24px #ffab5525;
}
.laser-target i { width: 72%; aspect-ratio: 1; border: 1px dashed #ffcb83; border-radius: inherit; }
.laser-beam { position: absolute; width: 2px; height: 50%; top: 0; background: #ffbe76; box-shadow: 0 0 12px 2px #ff8235; }
.laser-beam::after { content: ""; position: absolute; bottom: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff2c9; translate: -3px 4px; }
.product-art--finstra { background: radial-gradient(ellipse at top, #335b4a, #172b26 73%); }
.finance-bars {
    display: flex;
    align-items: end;
    gap: 5%;
    width: 65%;
    height: 69%;
    padding: 0 5% 4%;
    border-bottom: 1px solid #9fc9a4;
    border-left: 1px solid #9fc9a4;
    background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #ffffff1a calc(25% - 1px) 25%);
}
.finance-bars i { flex: 1; height: var(--height); background: linear-gradient(#dbf89e, #679d78); border-radius: 4px 4px 0 0; }