.snell_container {
    position: relative;
    width: 400px;
    max-width: 100%;
    aspect-ratio: 1;

    margin: 0 auto 1em;
}

.snell_slider_aligner > label {
    min-width: 20px;

    user-select: none;
}

.snell_svg {
    width: 100%;
    height: 100%;

    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    background: white;
    background-image: radial-gradient(#f2f2f2 1px, transparent 0);
    background-size: 5px 5px;

    user-select: none;
}

body.dark .snell_svg {
    border: 1px solid #545454;

    background: #3e3e3e;
    background-image: radial-gradient(#454545 1px, transparent 0);
    background-size: 5px 5px;
}

.snell_controls {
    position: absolute;
    top: 10px;
    left: 9px;
    width: 140px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    padding: 8px 5px 8px 8px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

.snell_slider {
    --s: 15px;
    --w: 5px;
    
    height: var(--s); 
    flex: 1;
    margin: 0;
    appearance: none;
    background: none;

    background: linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.0) 35%,
        #2e8fff 45%,
        #2e8fff 55%,
        rgba(0, 0, 0, 0.0) 65%
    );

    width: 95px;
    cursor: pointer;
}

body.dark .snell_slider {
    --s: 15px;
    --w: 5px;
    
    height: var(--s); 
    flex: 1;
    margin: 0;
    appearance: none;
    background: none;

    background: linear-gradient(
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.0) 35%,
        #61a1eb 45%,
        #61a1eb 55%,
        rgba(0, 0, 0, 0.0) 65%
    );

    width: 95px;
    cursor: pointer;
}

.snell_slider::-webkit-slider-thumb {
    height: var(--s) !important;
    width: var(--w) !important;
    border: 1px gray solid;
    background-color: #eeeeee;
    border-radius: 2px !important;
    appearance: none;
}

.snell_slider::-moz-range-thumb {
    height: var(--s);
    width: var(--w);
    border-radius: 2;
    appearance: none;
}

.snell_slider_aligner {
    display: flex;
    align-items: center;
    font-size: 13px;
    width: 10%;
}

.snell_info_bg {
    fill: rgba(242, 242, 242, 0.9);
}

body.dark .snell_info_bg {
    fill: rgba(43, 43, 43, 0.9);
}

/* * * * * SVG Elements Light * * * * */

.snell_surface {
    fill: #f2f2f2;
    stroke: #444;
}
.snell_contact {
    fill: #9be18b; /* softer green */
    stroke: #333;
}

.snell_normal {
    stroke: #b5b5b5;
}
.snell_normal_tip {
    fill: #b5b5b5;
}
.snell_normal_text {
    fill: #919191;
}

.snell_tangent {
    stroke: #cdcdcd;
}
.snell_tangent_tip {
    fill: #cdcdcd;
}

.snell_L_t {
    stroke: #2f5fc0; /* deeper blue */
}
.snell_L_t_tip {
    fill: #2f5fc0;
}
.snell_L_t_text {
    fill: #2f5fc0;
}

.snell_L_r {
    stroke: #3f91d9; /* slightly lighter blue */
}
.snell_L_r_tip {
    fill: #3f91d9;
}
.snell_L_r_text {
    fill: #3f91d9;
}

.snell_L_i {
    stroke: #d94a3b; /* warmer red */
}
.snell_L_i_tip {
    fill: #d94a3b;
}
.snell_L_i_text {
    fill: #d94a3b;
}

.snell_phi_1 {
    fill: rgba(255, 190, 80, 0.25);
    stroke: rgba(165, 111, 10, 0.4);
}
.snell_phi_1_text {
    fill: rgba(100, 70, 20, 0.6);
}

.snell_phi_R {
    fill: rgba(255, 190, 80, 0.25);
    stroke: rgba(165, 111, 10, 0.4);
}
.snell_phi_R_text {
    fill: rgba(100, 70, 20, 0.6);
}

.snell_phi_t {
    fill: rgba(100, 170, 255, 0.25);
    stroke: rgba(12, 77, 163, 0.4);
}
.snell_phi_t_text {
    fill: rgba(30, 70, 110, 0.6);
}

.snell_info_label {
    fill: #666;
}

/* * * * * SVG Elements Dark * * * * */

body.dark .snell_surface {
    fill: #2b2b2b;
    stroke: #b8b9c0;
}
body.dark .snell_contact {
    fill: #66ff66;
    stroke: #010101;
}

body.dark .snell_normal {
    stroke: rgba(150, 150, 150, 0.9);
}
body.dark .snell_normal_tip {
    fill: rgba(150, 150, 150, 0.9);
}
body.dark .snell_normal_text {
    fill: rgba(172, 172, 172, 0.9);
}

body.dark .snell_tangent {
    stroke: rgba(90, 90, 90, 0.9);
}
body.dark .snell_tangent_tip {
    fill: rgba(90, 90, 90, 0.9);
}

body.dark .snell_L_t {
    stroke: rgba(88, 144, 255, 1);
}
body.dark .snell_L_t_tip {
    fill: rgba(88, 144, 255, 1);
}
body.dark .snell_L_t_text {
    fill: rgba(88, 144, 255, 1);
}

body.dark .snell_L_r {
    stroke: rgba(90, 190, 255, 1);
}
body.dark .snell_L_r_tip {
    fill: rgba(90, 190, 255, 1);
}
body.dark .snell_L_r_text {
    fill: rgba(90, 190, 255, 1);
}

body.dark .snell_L_i {
    stroke: rgb(255, 95, 80);
}
body.dark .snell_L_i_tip {
    fill: rgb(255, 95, 80);
}
body.dark .snell_L_i_text {
    fill: rgb(255, 95, 80);
}

body.dark .snell_phi_1 {
    fill: rgba(255, 191, 73, 0.25);
    stroke: rgba(255, 191, 73, 0.5);
}
body.dark .snell_phi_1_text {
    fill: rgba(255, 191, 73, 0.8);
}

body.dark .snell_phi_R {
    fill: rgba(255, 191, 73, 0.25);
    stroke: rgba(255, 191, 73, 0.5);
}
body.dark .snell_phi_R_text {
    fill: rgba(255, 191, 73, 0.8);
}

body.dark .snell_phi_t {
    fill: rgba(72, 157, 255, 0.25);
    stroke: rgba(72, 157, 255, 0.6);
}
body.dark .snell_phi_t_text {
    fill: rgba(160, 200, 255, 0.9);
}

body.dark .snell_info_label {
    fill: lightgray;
}