/* ============================================
   📑 INDEX
   ============================================
   1. 🎨 Global Styles
   2. 🏗️ Layout & Structure
   3. 🚩 Flag Display
   4. 🌍 Language Selection
   5. 🎭 Background Shapes
   ============================================ */

/* ============================================
   1. 🎨 Global Styles
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

/* Local font aliasing:
   Browsers only use a font if the family name matches exactly.
   This maps common local family names to "GT-Era-Text-Light".
*/
@font-face {
    font-family: "GT-Era-Text-Light";
    src:
        url("assets/fonts/GT-Era-Text-Light.woff2") format("woff2"),
        url("assets/fonts/GT-Era-Text-Light.woff") format("woff"),
        url("assets/fonts/GT-Era-Text-Light.ttf") format("truetype"),
        url("assets/fonts/GT-Era-Text-Light.otf") format("opentype"),
        local("GT-Era-Text-Light"),
        local("GT Era Text Light"),
        local("GT Era Text-Light"),
        local("GT Era Text"),
        local("GTEraText-Light"),
        local("GT-Era-Text");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

body {
    font-family: "GT-Era-Text-Light", "GT Era Text Light", "GT Era Text", Arial, sans-serif;
    font-size: 10pt;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}

/* Typography override (user request):
   - One typeface everywhere
    - h1: 12pt
   - everything else: 10pt
*/
body,
body * {
    font-family: "GT-Era-Text-Light", "GT Era Text Light", "GT Era Text", Arial, sans-serif !important;
    font-weight: 300 !important;
}

body *:not(h1) {
    font-size: 10pt !important;
}

h1 {
    font-family: inherit;
    font-size: 12pt !important;
    font-weight: 300 !important;
    letter-spacing: normal !important;
    font-stretch: normal !important;
    transform: none !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 9px;
    margin: 0;
    padding: 0 54px;
    text-align: center;
    z-index: 900;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

#app button {
    background: rgba(255, 255, 255, 0.01);
    color: #111;
    border: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px !important;
}

* {
    outline: none;
}

*:focus {
    outline: none;
}

/* ============================================
   2. 🏗️ Layout & Structure
   🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️🏗️
   ============================================ */
#app {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #f4f4f4;
    padding: 9px;
    box-sizing: border-box;
}

.step {
    text-align: center;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Start page: use the title as a centered primary button */
#step-1:not(.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 18px;
    position: relative;
    margin: -9px;
    padding: 0;
    width: calc(100% + 18px);
}

/* Language page: centered like the start page */
#step-2:not(.hidden) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 18px;
    position: relative;
    margin: -9px;
    padding: 0;
    width: calc(100% + 18px);
    background-color: transparent;
    transition: background-color 700ms ease;
}

#step-2:not(.hidden)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.01);
    --lang-blur: 14px;
    --lang-blur-current: var(--lang-blur);
    backdrop-filter: blur(var(--lang-blur-current));
    -webkit-backdrop-filter: blur(var(--lang-blur-current));
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: none;
    will-change: opacity;
}

#step-2:not(.hidden)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) var(--wipe-stop, 100%),
        rgba(255, 255, 255, var(--white-alpha, 0)) calc(var(--wipe-stop, 100%) + 1%),
        rgba(255, 255, 255, var(--white-alpha, 0)) 100%
    );
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: none;
    will-change: opacity;
}

#step-2 .last-flag-display {
    transition: none;
    will-change: opacity, filter;
}

#step-2.blur-initial::before {
    --lang-blur-current: 0px;
    opacity: 0;
}

#step-2 .language-options {
    display: inline-flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    width: auto;
    margin: 0 !important;
    position: relative;
    z-index: 3;
}

#step-2 .language-btn.start-button {
    width: 100%;
}

.start-button {
    font-size: 30pt !important;
    padding: 27px 40px !important;
    color: #111 !important;
    background: rgba(255, 255, 255, 0.01) !important;
    border: none !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
    border-radius: 999px;
}

#restart-editor-overlay {
    color: #111 !important;
    background: rgba(255, 255, 255, 0.01) !important;
}

.back-button {
    position: fixed;
    top: auto;
    bottom: 9px;
    left: 9px;
    z-index: 1000;
    width: 54px;
    height: 54px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    font-size: 24pt;
}

.forward-button {
    position: fixed;
    top: auto;
    bottom: 9px;
    right: 9px;
    z-index: 1000;
    width: 54px;
    height: 54px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    line-height: 1;
    font-size: 24pt;
}

/* Nav button contrast switching */
body.nav-contrast-light .back-button,
body.nav-contrast-light .forward-button {
    color: #ffffff;
}

body.nav-contrast-dark .back-button,
body.nav-contrast-dark .forward-button {
    color: #111111;
}

/* Step title bubble (same height as back/forward buttons) */
.step h1 {
    position: fixed;
    left: 50% !important;
    right: auto !important;
    bottom: 9px;
    transform: translateX(-50%) !important;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    margin: 0;
    font-size: 16pt;
    font-weight: 300;
    color: #111;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    z-index: 1000;
    pointer-events: none;
    text-align: center;
    width: fit-content;
    max-width: calc(100vw - 120px);
    box-sizing: border-box;
}

/* Place H1 above the color palettes (replaces removed hint text) */
/* Color palette bubble title (moved into the bubble) */
.color-bubble h1 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 0 9px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    z-index: auto !important;
    pointer-events: none;
}

/* Remove hint texts (h3) as requested */
.step h3 {
    display: none !important;
}

/* Full-format flag follow page */
#step-9-full-flag {
    position: fixed;
    inset: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f4f4f4;
}

/* Never hide the full-format flag even if it temporarily gets the `flag-display` class. */
#step-9-full-flag .flag-display {
    display: block !important;
}

#step-9-full-flag .full-flag-display {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 0;
    background-color: #f4f4f4;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

#step-9-full-flag .full-flag-display #full-flag-addon-overlay {
    display: none;
}

#restart-editor-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3201;
    cursor: pointer;
}

/* Confetti overlay */
.confetti-canvas {
    position: fixed;
    inset: 0;
    z-index: 3200;
    pointer-events: none;
}

.hidden {
    display: none !important;
}

/* ============================================
   Layout overrides (User request)
   - Disable previews
   - Remove spacing between options
   - Max 4 options per row, full width
   ============================================ */

/* Vorschau deaktivieren (außer auf Farbauswahl-Seiten) */
.step .flag-display {
    display: none;
}

#step-1 .last-flag-display,
#step-2 .last-flag-display {
    display: block;
}

#step-1,
#step-2,
#step-7,
#step-8-obereck-color,
#step-8-addon-color {
    position: relative;
}

#step-1 .last-flag-display,
#step-2 .last-flag-display,
#step-7 .flag-display,
#step-8-obereck-color .flag-display,
#step-8-addon-color .flag-display,
#step-9-full-flag .full-flag-display {
    position: fixed;
    width: 100vw;
    height: calc(100vw * 2 / 3);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    border: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

#step-1 .last-flag-display,
#step-2 .last-flag-display {
    inset: auto;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#step-3a .flag-display,
#step-3b .flag-display,
#step-3c .flag-display,
#step-3d .flag-display,
#step-3e .flag-display,
#step-7 .flag-display,
#step-8-obereck-color .flag-display,
#step-8-addon-color .flag-display {
    display: block;
}

/* Step 8: base flag previews live inside option tiles */
.addon-tile-preview .flag-display {
    display: block;
}

/* 4-per-row, gapless option grids */
.language-options,
.background-options,
.stripe-options,
.color-pattern-options,
.color-options,
.proportion-options,
.proportion-options-5,
.proportion-options-3h,
.proportion-options-3v,
.proportion-options-5h,
.proportion-options-2v {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
}

/* Make option tiles fill grid cells */
.background-shape,
.stripe-option,
.proportion-option,
.proportion-option-5,
.color-option,
.color-option-cross,
.color-option-solid,
.color-option-obereck,
.color-option-2h,
.color-option-2v,
.color-option-3,
.color-pattern-option {
    width: 100%;
    /* Tile contour */
    border: 1pt solid #000;
    box-shadow: none;
    transform: none;
}

/* Disable hover scaling so tiles stay "connected" */
.background-shape:hover,
.stripe-option:hover,
.color-pattern-option:hover,
.color-option:hover,
.color-option-cross:hover {
    transform: none;
}

/* Zoom/scale effect globally disabled */
.proportion-option:hover,
.proportion-option-5:hover,
.proportion-option-3h:hover,
.proportion-option-3v:hover,
.proportion-option-5h:hover,
.proportion-option-2v:hover,
.proportion-preview-3h:hover,
.proportion-preview-3v:hover,
.proportion-preview-5h:hover,
.proportion-preview-2v:hover,
.background-shape:hover,
.stripe-option:hover,
.color-pattern-option:hover,
.color-option:hover,
.color-option-cross:hover,
.color-option-solid:hover,
.color-option-obereck:hover,
.color-option-2h:hover,
.color-option-2v:hover,
.color-option-3:hover {
    transform: none !important;
}

/* Zoom/scale on click (active) and selected states disabled */
.background-shape:active,
.stripe-option:active,
.color-pattern-option:active,
.color-option:active,
.color-option-cross:active,
.color-option-solid:active,
.color-option-obereck:active,
.color-option-2h:active,
.color-option-2v:active,
.color-option-3:active,
.proportion-option:active,
.proportion-option-5:active,
.proportion-option-3h:active,
.proportion-option-3v:active,
.proportion-option-5h:active,
.proportion-option-2v:active,
.background-shape.selected,
.stripe-option.selected,
.color-pattern-option.selected,
.color-option.selected,
.color-option-cross.selected,
.color-option-solid.selected,
.color-option-obereck.selected,
.color-option-2h.selected,
.color-option-2v.selected,
.color-option-3.selected,
.proportion-option.selected,
.proportion-option-5.selected,
.proportion-option-3h.selected,
.proportion-option-3v.selected,
.proportion-option-5h.selected,
.proportion-option-2v.selected {
    transform: none !important;
}

/* Hard overrides to beat legacy fixed sizing / margins */
#app .language-options,
#app .background-options,
#app .stripe-options,
#app .color-pattern-options,
#app .color-options,
#app .proportion-options,
#app .proportion-options-5,
#app .proportion-options-3h,
#app .proportion-options-3v,
#app .proportion-options-5h,
#app .proportion-options-2v {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Dynamic grid sizing: if a step only offers 2–3 options, fill the format (2/3 columns)
   instead of keeping the 4-column layout with empty slots. */
#app .language-options.grid-2,
#app .background-options.grid-2,
#app .stripe-options.grid-2,
#app .color-pattern-options.grid-2,
#app .color-options.grid-2,
#app .proportion-options.grid-2,
#app .proportion-options-5.grid-2,
#app .proportion-options-3h.grid-2,
#app .proportion-options-3v.grid-2,
#app .proportion-options-5h.grid-2,
#app .proportion-options-2v.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#app .language-options.grid-3,
#app .background-options.grid-3,
#app .stripe-options.grid-3,
#app .color-pattern-options.grid-3,
#app .color-options.grid-3,
#app .proportion-options.grid-3,
#app .proportion-options-5.grid-3,
#app .proportion-options-3h.grid-3,
#app .proportion-options-3v.grid-3,
#app .proportion-options-5h.grid-3,
#app .proportion-options-2v.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Step 2 (language): override global 4-column grid to a centered button block */
#app #step-2 .language-options {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: min(520px, 90vw) !important;
}

#app #step-2 .language-btn.start-button {
    flex: 1 1 0 !important;
    width: auto !important;
}

/* Typography (tile labels) pinned to bottom */
#app .background-shape > span,
#app .stripe-option > span,
#app .proportion-option > span,
#app .proportion-option-5 > span {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin-bottom: 0 !important;
}

#app .background-shape,
#app .stripe-option,
#app .proportion-option,
#app .proportion-option-5,
#app .proportion-option-3h,
#app .proportion-option-3v,
#app .proportion-option-5h,
#app .proportion-option-2v,
#app .color-option,
#app .color-option-cross,
#app .color-option-solid,
#app .color-option-obereck,
#app .color-option-2h,
#app .color-option-2v,
#app .color-option-3,
#app .color-pattern-option {
    width: 100% !important;
    border: 1pt solid #000 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Proportion tiles: make inner preview fill the whole tile */
#app .proportion-option-3h,
#app .proportion-option-3v,
#app .proportion-option-5h,
#app .proportion-option-2v {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

#app .proportion-preview-3h,
#app .proportion-preview-3v,
#app .proportion-preview-5h,
#app .proportion-preview-2v {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important; /* contour comes from the option tile */
}

/* Pattern tiles: make the visualization fill the whole tile */
#app .color-pattern-option {
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden;
}

#app .pattern-visualization,
#app .pattern-visualization.cross-viz {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important; /* contour comes from the option tile */
}

/* Remove default margins around major blocks so grids can hit the edge */
.grid-color-selection,
.cross-color-selection,
.solid-color-selection,
.stripe-color-selection-2h,
.stripe-color-selection-2v,
.stripe-color-selection-3 {
    margin: 0 !important;
    max-width: none !important;
}

/* Keep 120x80 look but responsive */
.background-shape,
.stripe-option,
.proportion-option,
.proportion-option-5,
.color-option,
.color-option-cross,
.color-option-solid,
.color-option-obereck,
.color-option-2h,
.color-option-2v,
.color-option-3,
.pattern-visualization,
.pattern-visualization.cross-viz,
.proportion-preview-3h,
.proportion-preview-3v,
.proportion-preview-5h,
.proportion-preview-2v {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important;
    box-shadow: none !important;
}

.proportion-preview-3h,
.proportion-preview-3v,
.proportion-preview-5h,
.proportion-preview-2v,
.pattern-visualization,
.pattern-visualization.cross-viz {
    width: 100%;
}

/* Place selection numbers inside the corresponding stripe/area (no center-only overlay) */
#app .color-option-2h .color-number,
#app .color-option-2v .color-number,
#app .color-option-3 .color-number,
#app .color-option-cross .color-number,
#app .color-option .color-number {
    position: absolute !important;
    inset: 0 !important;
}

/* User request: remove numeric overlays (deselection happens on the flag regions) */
#app .color-number,
#app .color-number .num {
    display: none !important;
    pointer-events: none !important;
}

#app .color-option-2h .color-number .num,
#app .color-option-2v .color-number .num,
#app .color-option-3 .color-number .num,
#app .color-option-cross .color-number .num,
#app .color-option .color-number .num {
    position: absolute;
}

/* 2 horizontal stripes: 1 in top stripe, 2 in bottom stripe */
#app .color-option-2h.selected .color-number .num[data-pos="1"] {
    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);
}

#app .color-option-2h.selected .color-number .num[data-pos="2"] {
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
}

/* 2 vertical stripes: 1 in left stripe, 2 in right stripe */
#app .color-option-2v.selected .color-number .num[data-pos="1"] {
    left: 25%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#app .color-option-2v.selected .color-number .num[data-pos="2"] {
    left: 75%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* 3+ stripes: position numbers in the center of their stripe (uses --pos and --stripe-count) */
#app .stripe-color-selection-3 {
    --stripe-count: 3;
}

#app .stripe-color-selection-3.orientation-horizontal .color-option-3.selected .color-number .num {
    left: 50%;
    top: calc((var(--pos) - 0.5) * (100% / var(--stripe-count)));
    transform: translate(-50%, -50%);
}

#app .stripe-color-selection-3.orientation-vertical .color-option-3.selected .color-number .num {
    top: 50%;
    left: calc((var(--pos) - 0.5) * (100% / var(--stripe-count)));
    transform: translate(-50%, -50%);
}

/* Cross selection: place numbers in quadrants */
#app .color-option-cross.selected .color-number .num[data-pos="1"] {
    left: 25%;
    top: 25%;
    transform: translate(-50%, -50%);
}

#app .color-option-cross.selected .color-number .num[data-pos="2"] {
    left: 75%;
    top: 25%;
    transform: translate(-50%, -50%);
}

#app .color-option-cross.selected .color-number .num[data-pos="3"] {
    left: 25%;
    top: 75%;
    transform: translate(-50%, -50%);
}

#app .color-option-cross.selected .color-number .num[data-pos="4"] {
    left: 75%;
    top: 75%;
    transform: translate(-50%, -50%);
}

/* Grid (checkerboard): place 1/2 into representative cells */
#app .grid-color-selection .color-option.selected .color-number .num[data-pos="1"] {
    left: 25%;
    top: 25%;
    transform: translate(-50%, -50%);
}

#app .grid-color-selection .color-option.selected .color-number .num[data-pos="2"] {
    left: 75%;
    top: 25%;
    transform: translate(-50%, -50%);
}

/* ============================================
   3. 🚩 Flag Display
   🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩🚩
   ============================================ */
.flag-display {
    width: 300px;
    height: 200px;
    border: 1pt solid #000;
    margin: 20px auto;
    background-color: #f4f4f4;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
}

#step-1 .last-flag-display,
#step-2 .last-flag-display {
    position: fixed;
    inset: auto;
    width: 100vw;
    height: calc(100vw * 2 / 3);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    border: 0;
    pointer-events: none;
    z-index: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

#flag-preview {
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Shape Styles for Flag Display */
.flag-display.shape1 {
    background: #f4f4f4;
}

.flag-display.shape2 {
    background: 
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.flag-display.shape3 {
    background: 
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.flag-display.shape4 {
    background: #f4f4f4;
}

.flag-display.shape4::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt));
}

.flag-display.shape5 {
    background: 
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.flag-display.shape6 {
    background: 
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.flag-display.shape7 {
    background: 
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

/* Diagonal bands */
.flag-display.shape12 {
    background:
        linear-gradient(45deg,
            transparent calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% + 0.375pt),
            transparent calc(50% - 10% + 0.375pt)
        ),
        linear-gradient(45deg,
            transparent calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% + 0.375pt),
            transparent calc(50% + 10% + 0.375pt)
        ),
        #f4f4f4;
}

.flag-display.shape13 {
    background:
        linear-gradient(-45deg,
            transparent calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% + 0.375pt),
            transparent calc(50% - 10% + 0.375pt)
        ),
        linear-gradient(-45deg,
            transparent calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% + 0.375pt),
            transparent calc(50% + 10% + 0.375pt)
        ),
        #f4f4f4;
}

/* Welle + Zacken (2-field horizontal split with decorative divider) */
.flag-display.shape14 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision"><path d="M0 0H300V100Q262.5 67 225 100Q187.5 133 150 100Q112.5 67 75 100Q37.5 133 0 100Z" fill="%23f4f4f4"/><path d="M0 200H300V100Q262.5 67 225 100Q187.5 133 150 100Q112.5 67 75 100Q37.5 133 0 100Z" fill="%23f4f4f4"/><path d="M0 100Q37.5 133 75 100Q112.5 67 150 100Q187.5 133 225 100Q262.5 67 300 100" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape15 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><path d="M0 0H300V67L225 133L150 67L75 133L0 67Z" fill="%23f4f4f4"/><path d="M0 200H300V67L225 133L150 67L75 133L0 67Z" fill="%23f4f4f4"/><path d="M0 133L75 67L150 133L225 67L300 133" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape16 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision"><path d="M150 0Q117 25 150 50Q183 75 150 100Q117 125 150 150Q183 175 150 200" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape17 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><path d="M100 0L200 50L100 100L200 150L100 200" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape8 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.flag-display.shape9 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 199" width="298" height="199" shape-rendering="crispEdges"><line x1="0" y1="199" x2="297.78" y2="99.5" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/><line x1="186.25" y1="0" x2="0" y2="199" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape9::before {
    content: none;
}

.flag-display.shape10 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 199" width="298" height="199" shape-rendering="crispEdges"><line x1="298" y1="199" x2="0.22" y2="99.5" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/><line x1="111.75" y1="0" x2="298" y2="199" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.flag-display.shape10::before {
    content: none;
}

.flag-display.shape11 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
}

.flag-display.shape11::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* Hide grid in main flag display */
}

/* ============================================
   4. 🌍 Language Selection
   🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍🌍
   ============================================ */
.language-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px;
}

.language-btn {
    padding: 0;
    font-size: inherit;
    background: transparent;
    cursor: pointer;
}

/* ============================================
   5. 🎭 Background Shapes
   🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭🎭
   ============================================ */
.background-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 20px;
}

/* Disable Raster (shape11) in the background selection UI (script remains intact). */
.background-options .background-shape.shape11 {
    display: none;
}

.background-shape {
    width: 120px;
    height: 80px;
    border: 1pt solid #333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.background-shape:hover {
    transform: scale(1.05);
    border-color: #0066cc;
}

.background-shape.selected {
    border-color: #0066cc;
}

.background-shape span {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 300;
    color: #111;
    border-radius: 999px;
    margin-bottom: 0;
}

/* Keep label bubbles 9px above the bottom edge of their option tiles */
.background-shape,
.stripe-option,
.proportion-option,
.proportion-option-5,
.proportion-option-3h,
.proportion-option-3v,
.proportion-option-5h,
.proportion-option-2v {
    padding-bottom: 9px;
    box-sizing: border-box;
}

/* Preview Styles for Shape Options */
.background-shape.shape1 {
    background: #f4f4f4;
}

.background-shape.shape2 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.background-shape.shape3 {
    background: 
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.background-shape.shape4 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.background-shape.shape5 {
    background: 
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.background-shape.shape6 {
    background: 
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.background-shape.shape12 {
    background:
        linear-gradient(45deg,
            transparent calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% + 0.375pt),
            transparent calc(50% - 10% + 0.375pt)
        ),
        linear-gradient(45deg,
            transparent calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% + 0.375pt),
            transparent calc(50% + 10% + 0.375pt)
        ),
        #f4f4f4;
}

.background-shape.shape13 {
    background:
        linear-gradient(-45deg,
            transparent calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% - 0.375pt),
            #000000 calc(50% - 10% + 0.375pt),
            transparent calc(50% - 10% + 0.375pt)
        ),
        linear-gradient(-45deg,
            transparent calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% - 0.375pt),
            #000000 calc(50% + 10% + 0.375pt),
            transparent calc(50% + 10% + 0.375pt)
        ),
        #f4f4f4;
}

.background-shape.shape7 {
    background: 
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.background-shape.shape8 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
    linear-gradient(to top right, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
    linear-gradient(to top left, transparent calc(50% - 0.375pt), #000000 calc(50% - 0.375pt), #000000 calc(50% + 0.375pt), transparent calc(50% + 0.375pt)),
        #f4f4f4;
}

.background-shape.shape9 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200" shape-rendering="crispEdges"><line x1="0" y1="200" x2="300" y2="100" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/><line x1="0" y1="200" x2="150" y2="0" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape9::before {
    content: none;
}

.background-shape.shape10 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" width="300" height="200" shape-rendering="crispEdges"><line x1="300" y1="200" x2="0" y2="100" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/><line x1="300" y1="200" x2="150" y2="0" stroke="%23000" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape10::before {
    content: none;
}

.background-shape.shape14 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision"><path d="M0 100Q37.5 133 75 100Q112.5 67 150 100Q187.5 133 225 100Q262.5 67 300 100" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape15 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><path d="M0 133L75 67L150 133L225 67L300 133" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape16 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision"><path d="M150 0Q117 25 150 50Q183 75 150 100Q117 125 150 150Q183 175 150 200" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape17 {
    background: #f4f4f4;
    background-image: url('data:image/svg+xml;utf8,<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><path d="M100 0L200 50L100 100L200 150L100 200" fill="none" stroke="black" stroke-width="1pt" vector-effect="non-scaling-stroke"/></svg>');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.background-shape.shape11 {
    position: relative;
    background: #f4f4f4;
    overflow: hidden;
}

.background-shape.shape11::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Horizontale Linien */
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        /* Vertikale Linien */
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt));
}

/* ============================================
   6. 📏 Stripe Options
   📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏📏
   ============================================ */
.stripe-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 20px;
}

.stripe-option {
    width: 120px;
    height: 80px;
    border: 1pt solid #333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.stripe-option:hover {
    transform: scale(1.05);
    border-color: #000;
}

.stripe-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
}

/* Zigzag direction step: always show Option 1 first */
#step-4t-direction .zigzag-direction-option[data-dir="up"] {
    order: 1;
}

#step-4t-direction .zigzag-direction-option[data-dir="down"] {
    order: 0;
}

/* Wave direction step: Option 1 first (hoch → runter), Option 2 second (runter → hoch) */
#step-4s-direction .wave-direction-option[data-dir="up"] {
    order: 0;
}

#step-4s-direction .wave-direction-option[data-dir="down"] {
    order: 1;
}

.addon-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    opacity: 1;
}

/* Step 8 Obereck color preview: keep overlay above the base flag */
#flag-preview-step-8-obereck-color {
    position: relative;
}

#flag-preview-step-8-obereck-color #obereck-color-overlay {
    z-index: 2;
    pointer-events: none;
}

/* Step 8 Add-on (Zusatzform) color preview: overlay above base flag */
#flag-preview-step-8-addon-color {
    position: relative;
}

#flag-preview-step-8-addon-color #addon-color-overlay {
    z-index: 2;
    pointer-events: none;
}

/* Step 8: stacked base flag + overlay inside each option tile */
.addon-tile-preview {
    position: absolute;
    inset: 0;
}

.addon-tile-preview [data-addon-tile-base="true"] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.addon-tile-preview .addon-preview {
    z-index: 1;
}

/* Make embedded flag previews fit tiles (no fixed 300x200 / margins) */
.addon-tile-preview .flag-display {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none !important;
}

/* Zusatzform tile previews: never show Kreuz/Raster guide contours inside the tile base flag */
.addon-tile-preview .flag-display.shape4::after {
    content: none !important;
    display: none !important;
}

.stripe-option span {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0;
    border-radius: 999px;
}

/* ============================================
   6a. 🎨 Color Pattern Options
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */
.color-pattern-options {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 20px;
    flex-wrap: wrap;
}

.color-pattern-option {
    cursor: pointer;
    transition: transform 0.2s;
}

.color-pattern-option:hover {
    transform: scale(1.05);
}

.color-pattern-option.selected .pattern-visualization {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.pattern-visualization {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    background: #f4f4f4;
    display: flex;
}

.pattern-visualization.vertical {
    flex-direction: row;
}

.pattern-visualization.horizontal {
    flex-direction: column;
}

.pattern-visualization.non-repeating-viz {
    background: #f4f4f4;
}

.pattern-stripe {
    flex: 1;
}

.pattern-visualization.vertical .pattern-stripe {
    border-right: 1pt solid #000;
}

.pattern-visualization.vertical .pattern-stripe:last-child {
    border-right: none;
}

.pattern-visualization.horizontal .pattern-stripe {
    border-bottom: 1pt solid #000;
}

.pattern-visualization.horizontal .pattern-stripe:last-child {
    border-bottom: none;
}

.pattern-stripe.gray,
.cross-quadrant.gray {
    background-color: #808080;
}

.pattern-stripe.white,
.cross-quadrant.white {
    background-color: #f4f4f4;
}

/* Cross pattern visualization */
.pattern-visualization.cross-viz {
    position: relative;
    width: 120px;
    height: 80px;
    display: block;
    overflow: hidden;
    border: 1pt solid #000;
}

.cross-quadrant {
    position: absolute;
    width: calc(50% - 0.5pt);
    height: calc(50% - 0.5pt);
}

.cross-top-left {
    top: 0;
    left: 0;
    border-right: 1pt solid #000;
    border-bottom: 1pt solid #000;
}

.cross-top-right {
    top: 0;
    right: 0;
    border-bottom: 1pt solid #000;
}

.cross-bottom-left {
    bottom: 0;
    left: 0;
    border-right: 1pt solid #000;
}

.cross-bottom-right {
    bottom: 0;
    right: 0;
}

/* Stripe patterns with equally spaced lines */
.stripe-preview.stripes-1 {
    background: #f4f4f4;
}

.stripes-2,
.stripe-preview.stripes-2 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-2 {
    background: 
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.stripes-3,
.stripe-preview.stripes-3 {
    background: 
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-3 {
    background: 
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-3 {
    background: 
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.stripes-4,
.stripe-preview.stripes-4 {
    background: 
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-4 {
    background: 
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.stripes-5,
.stripe-preview.stripes-5 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-5 {
    background: 
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.stripes-6,
.stripe-preview.stripes-6 {
    background: 
        linear-gradient(to bottom, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-6 {
    background: 
        linear-gradient(to right, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-7 {
    background: 
        linear-gradient(to right, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to right, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        #f4f4f4;
}

.stripes-7,
.stripe-preview.stripes-7 {
    background: 
        linear-gradient(to bottom, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        #f4f4f4;
}

.stripes-8,
.stripe-preview.stripes-8 {
    background: 
        linear-gradient(to bottom, transparent calc(12.5% - 0.5pt), #000000 calc(12.5% - 0.5pt), #000000 calc(12.5% + 0.5pt), transparent calc(12.5% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(37.5% - 0.5pt), #000000 calc(37.5% - 0.5pt), #000000 calc(37.5% + 0.5pt), transparent calc(37.5% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(62.5% - 0.5pt), #000000 calc(62.5% - 0.5pt), #000000 calc(62.5% + 0.5pt), transparent calc(62.5% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(87.5% - 0.5pt), #000000 calc(87.5% - 0.5pt), #000000 calc(87.5% + 0.5pt), transparent calc(87.5% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-8 {
    background: 
        linear-gradient(to right, transparent calc(12.5% - 0.5pt), #000000 calc(12.5% - 0.5pt), #000000 calc(12.5% + 0.5pt), transparent calc(12.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(37.5% - 0.5pt), #000000 calc(37.5% - 0.5pt), #000000 calc(37.5% + 0.5pt), transparent calc(37.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(62.5% - 0.5pt), #000000 calc(62.5% - 0.5pt), #000000 calc(62.5% + 0.5pt), transparent calc(62.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to right, transparent calc(87.5% - 0.5pt), #000000 calc(87.5% - 0.5pt), #000000 calc(87.5% + 0.5pt), transparent calc(87.5% + 0.5pt)),
        #f4f4f4;
}

.stripes-9,
.stripe-preview.stripes-9 {
    background: 
        linear-gradient(to bottom, transparent calc(11.11% - 0.5pt), #000000 calc(11.11% - 0.5pt), #000000 calc(11.11% + 0.5pt), transparent calc(11.11% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(22.22% - 0.5pt), #000000 calc(22.22% - 0.5pt), #000000 calc(22.22% + 0.5pt), transparent calc(22.22% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(44.44% - 0.5pt), #000000 calc(44.44% - 0.5pt), #000000 calc(44.44% + 0.5pt), transparent calc(44.44% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(55.55% - 0.5pt), #000000 calc(55.55% - 0.5pt), #000000 calc(55.55% + 0.5pt), transparent calc(55.55% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(77.77% - 0.5pt), #000000 calc(77.77% - 0.5pt), #000000 calc(77.77% + 0.5pt), transparent calc(77.77% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(88.88% - 0.5pt), #000000 calc(88.88% - 0.5pt), #000000 calc(88.88% + 0.5pt), transparent calc(88.88% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-9 {
    background: 
        linear-gradient(to right, transparent calc(11.11% - 0.5pt), #000000 calc(11.11% - 0.5pt), #000000 calc(11.11% + 0.5pt), transparent calc(11.11% + 0.5pt)),
        linear-gradient(to right, transparent calc(22.22% - 0.5pt), #000000 calc(22.22% - 0.5pt), #000000 calc(22.22% + 0.5pt), transparent calc(22.22% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(44.44% - 0.5pt), #000000 calc(44.44% - 0.5pt), #000000 calc(44.44% + 0.5pt), transparent calc(44.44% + 0.5pt)),
        linear-gradient(to right, transparent calc(55.55% - 0.5pt), #000000 calc(55.55% - 0.5pt), #000000 calc(55.55% + 0.5pt), transparent calc(55.55% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(77.77% - 0.5pt), #000000 calc(77.77% - 0.5pt), #000000 calc(77.77% + 0.5pt), transparent calc(77.77% + 0.5pt)),
        linear-gradient(to right, transparent calc(88.88% - 0.5pt), #000000 calc(88.88% - 0.5pt), #000000 calc(88.88% + 0.5pt), transparent calc(88.88% + 0.5pt)),
        #f4f4f4;
}

.stripes-10,
.stripe-preview.stripes-10 {
    background: 
        linear-gradient(to bottom, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-10 {
    background: 
        linear-gradient(to right, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to right, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

.stripes-11,
.stripe-preview.stripes-11 {
    background: 
        linear-gradient(to bottom, transparent calc(9.09% - 0.5pt), #000000 calc(9.09% - 0.5pt), #000000 calc(9.09% + 0.5pt), transparent calc(9.09% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(18.18% - 0.5pt), #000000 calc(18.18% - 0.5pt), #000000 calc(18.18% + 0.5pt), transparent calc(18.18% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(27.27% - 0.5pt), #000000 calc(27.27% - 0.5pt), #000000 calc(27.27% + 0.5pt), transparent calc(27.27% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(36.36% - 0.5pt), #000000 calc(36.36% - 0.5pt), #000000 calc(36.36% + 0.5pt), transparent calc(36.36% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(45.45% - 0.5pt), #000000 calc(45.45% - 0.5pt), #000000 calc(45.45% + 0.5pt), transparent calc(45.45% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(54.54% - 0.5pt), #000000 calc(54.54% - 0.5pt), #000000 calc(54.54% + 0.5pt), transparent calc(54.54% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(63.63% - 0.5pt), #000000 calc(63.63% - 0.5pt), #000000 calc(63.63% + 0.5pt), transparent calc(63.63% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(72.72% - 0.5pt), #000000 calc(72.72% - 0.5pt), #000000 calc(72.72% + 0.5pt), transparent calc(72.72% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(81.81% - 0.5pt), #000000 calc(81.81% - 0.5pt), #000000 calc(81.81% + 0.5pt), transparent calc(81.81% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90.90% - 0.5pt), #000000 calc(90.90% - 0.5pt), #000000 calc(90.90% + 0.5pt), transparent calc(90.90% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-11 {
    background: 
        linear-gradient(to right, transparent calc(9.09% - 0.5pt), #000000 calc(9.09% - 0.5pt), #000000 calc(9.09% + 0.5pt), transparent calc(9.09% + 0.5pt)),
        linear-gradient(to right, transparent calc(18.18% - 0.5pt), #000000 calc(18.18% - 0.5pt), #000000 calc(18.18% + 0.5pt), transparent calc(18.18% + 0.5pt)),
        linear-gradient(to right, transparent calc(27.27% - 0.5pt), #000000 calc(27.27% - 0.5pt), #000000 calc(27.27% + 0.5pt), transparent calc(27.27% + 0.5pt)),
        linear-gradient(to right, transparent calc(36.36% - 0.5pt), #000000 calc(36.36% - 0.5pt), #000000 calc(36.36% + 0.5pt), transparent calc(36.36% + 0.5pt)),
        linear-gradient(to right, transparent calc(45.45% - 0.5pt), #000000 calc(45.45% - 0.5pt), #000000 calc(45.45% + 0.5pt), transparent calc(45.45% + 0.5pt)),
        linear-gradient(to right, transparent calc(54.54% - 0.5pt), #000000 calc(54.54% - 0.5pt), #000000 calc(54.54% + 0.5pt), transparent calc(54.54% + 0.5pt)),
        linear-gradient(to right, transparent calc(63.63% - 0.5pt), #000000 calc(63.63% - 0.5pt), #000000 calc(63.63% + 0.5pt), transparent calc(63.63% + 0.5pt)),
        linear-gradient(to right, transparent calc(72.72% - 0.5pt), #000000 calc(72.72% - 0.5pt), #000000 calc(72.72% + 0.5pt), transparent calc(72.72% + 0.5pt)),
        linear-gradient(to right, transparent calc(81.81% - 0.5pt), #000000 calc(81.81% - 0.5pt), #000000 calc(81.81% + 0.5pt), transparent calc(81.81% + 0.5pt)),
        linear-gradient(to right, transparent calc(90.90% - 0.5pt), #000000 calc(90.90% - 0.5pt), #000000 calc(90.90% + 0.5pt), transparent calc(90.90% + 0.5pt)),
        #f4f4f4;
}

.stripes-12,
.stripe-preview.stripes-12 {
    background: 
        linear-gradient(to bottom, transparent calc(8.33% - 0.5pt), #000000 calc(8.33% - 0.5pt), #000000 calc(8.33% + 0.5pt), transparent calc(8.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(41.66% - 0.5pt), #000000 calc(41.66% - 0.5pt), #000000 calc(41.66% + 0.5pt), transparent calc(41.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(58.33% - 0.5pt), #000000 calc(58.33% - 0.5pt), #000000 calc(58.33% + 0.5pt), transparent calc(58.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(91.66% - 0.5pt), #000000 calc(91.66% - 0.5pt), #000000 calc(91.66% + 0.5pt), transparent calc(91.66% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-12 {
    background: 
        linear-gradient(to right, transparent calc(8.33% - 0.5pt), #000000 calc(8.33% - 0.5pt), #000000 calc(8.33% + 0.5pt), transparent calc(8.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(41.66% - 0.5pt), #000000 calc(41.66% - 0.5pt), #000000 calc(41.66% + 0.5pt), transparent calc(41.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(58.33% - 0.5pt), #000000 calc(58.33% - 0.5pt), #000000 calc(58.33% + 0.5pt), transparent calc(58.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to right, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(91.66% - 0.5pt), #000000 calc(91.66% - 0.5pt), #000000 calc(91.66% + 0.5pt), transparent calc(91.66% + 0.5pt)),
        #f4f4f4;
}

.stripes-13,
.stripe-preview.stripes-13 {
    background: 
        linear-gradient(to bottom, transparent calc(7.69% - 0.5pt), #000000 calc(7.69% - 0.5pt), #000000 calc(7.69% + 0.5pt), transparent calc(7.69% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(15.38% - 0.5pt), #000000 calc(15.38% - 0.5pt), #000000 calc(15.38% + 0.5pt), transparent calc(15.38% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(23.07% - 0.5pt), #000000 calc(23.07% - 0.5pt), #000000 calc(23.07% + 0.5pt), transparent calc(23.07% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(30.76% - 0.5pt), #000000 calc(30.76% - 0.5pt), #000000 calc(30.76% + 0.5pt), transparent calc(30.76% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(38.46% - 0.5pt), #000000 calc(38.46% - 0.5pt), #000000 calc(38.46% + 0.5pt), transparent calc(38.46% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(46.15% - 0.5pt), #000000 calc(46.15% - 0.5pt), #000000 calc(46.15% + 0.5pt), transparent calc(46.15% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(53.84% - 0.5pt), #000000 calc(53.84% - 0.5pt), #000000 calc(53.84% + 0.5pt), transparent calc(53.84% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(61.53% - 0.5pt), #000000 calc(61.53% - 0.5pt), #000000 calc(61.53% + 0.5pt), transparent calc(61.53% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(69.23% - 0.5pt), #000000 calc(69.23% - 0.5pt), #000000 calc(69.23% + 0.5pt), transparent calc(69.23% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(76.92% - 0.5pt), #000000 calc(76.92% - 0.5pt), #000000 calc(76.92% + 0.5pt), transparent calc(76.92% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(84.61% - 0.5pt), #000000 calc(84.61% - 0.5pt), #000000 calc(84.61% + 0.5pt), transparent calc(84.61% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(92.30% - 0.5pt), #000000 calc(92.30% - 0.5pt), #000000 calc(92.30% + 0.5pt), transparent calc(92.30% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-13 {
    background: 
        linear-gradient(to right, transparent calc(7.69% - 0.5pt), #000000 calc(7.69% - 0.5pt), #000000 calc(7.69% + 0.5pt), transparent calc(7.69% + 0.5pt)),
        linear-gradient(to right, transparent calc(15.38% - 0.5pt), #000000 calc(15.38% - 0.5pt), #000000 calc(15.38% + 0.5pt), transparent calc(15.38% + 0.5pt)),
        linear-gradient(to right, transparent calc(23.07% - 0.5pt), #000000 calc(23.07% - 0.5pt), #000000 calc(23.07% + 0.5pt), transparent calc(23.07% + 0.5pt)),
        linear-gradient(to right, transparent calc(30.76% - 0.5pt), #000000 calc(30.76% - 0.5pt), #000000 calc(30.76% + 0.5pt), transparent calc(30.76% + 0.5pt)),
        linear-gradient(to right, transparent calc(38.46% - 0.5pt), #000000 calc(38.46% - 0.5pt), #000000 calc(38.46% + 0.5pt), transparent calc(38.46% + 0.5pt)),
        linear-gradient(to right, transparent calc(46.15% - 0.5pt), #000000 calc(46.15% - 0.5pt), #000000 calc(46.15% + 0.5pt), transparent calc(46.15% + 0.5pt)),
        linear-gradient(to right, transparent calc(53.84% - 0.5pt), #000000 calc(53.84% - 0.5pt), #000000 calc(53.84% + 0.5pt), transparent calc(53.84% + 0.5pt)),
        linear-gradient(to right, transparent calc(61.53% - 0.5pt), #000000 calc(61.53% - 0.5pt), #000000 calc(61.53% + 0.5pt), transparent calc(61.53% + 0.5pt)),
        linear-gradient(to right, transparent calc(69.23% - 0.5pt), #000000 calc(69.23% - 0.5pt), #000000 calc(69.23% + 0.5pt), transparent calc(69.23% + 0.5pt)),
        linear-gradient(to right, transparent calc(76.92% - 0.5pt), #000000 calc(76.92% - 0.5pt), #000000 calc(76.92% + 0.5pt), transparent calc(76.92% + 0.5pt)),
        linear-gradient(to right, transparent calc(84.61% - 0.5pt), #000000 calc(84.61% - 0.5pt), #000000 calc(84.61% + 0.5pt), transparent calc(84.61% + 0.5pt)),
        linear-gradient(to right, transparent calc(92.30% - 0.5pt), #000000 calc(92.30% - 0.5pt), #000000 calc(92.30% + 0.5pt), transparent calc(92.30% + 0.5pt)),
        #f4f4f4;
}

.stripes-14,
.stripe-preview.stripes-14 {
    background: 
        linear-gradient(to bottom, transparent calc(7.14% - 0.5pt), #000000 calc(7.14% - 0.5pt), #000000 calc(7.14% + 0.5pt), transparent calc(7.14% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(21.42% - 0.5pt), #000000 calc(21.42% - 0.5pt), #000000 calc(21.42% + 0.5pt), transparent calc(21.42% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(35.71% - 0.5pt), #000000 calc(35.71% - 0.5pt), #000000 calc(35.71% + 0.5pt), transparent calc(35.71% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(64.28% - 0.5pt), #000000 calc(64.28% - 0.5pt), #000000 calc(64.28% + 0.5pt), transparent calc(64.28% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(78.57% - 0.5pt), #000000 calc(78.57% - 0.5pt), #000000 calc(78.57% + 0.5pt), transparent calc(78.57% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(92.85% - 0.5pt), #000000 calc(92.85% - 0.5pt), #000000 calc(92.85% + 0.5pt), transparent calc(92.85% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-14 {
    background: 
        linear-gradient(to right, transparent calc(7.14% - 0.5pt), #000000 calc(7.14% - 0.5pt), #000000 calc(7.14% + 0.5pt), transparent calc(7.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(21.42% - 0.5pt), #000000 calc(21.42% - 0.5pt), #000000 calc(21.42% + 0.5pt), transparent calc(21.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(35.71% - 0.5pt), #000000 calc(35.71% - 0.5pt), #000000 calc(35.71% + 0.5pt), transparent calc(35.71% + 0.5pt)),
        linear-gradient(to right, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(64.28% - 0.5pt), #000000 calc(64.28% - 0.5pt), #000000 calc(64.28% + 0.5pt), transparent calc(64.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(78.57% - 0.5pt), #000000 calc(78.57% - 0.5pt), #000000 calc(78.57% + 0.5pt), transparent calc(78.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        linear-gradient(to right, transparent calc(92.85% - 0.5pt), #000000 calc(92.85% - 0.5pt), #000000 calc(92.85% + 0.5pt), transparent calc(92.85% + 0.5pt)),
        #f4f4f4;
}

.stripes-15,
.stripe-preview.stripes-15 {
    background: 
        linear-gradient(to bottom, transparent calc(6.66% - 0.5pt), #000000 calc(6.66% - 0.5pt), #000000 calc(6.66% + 0.5pt), transparent calc(6.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(13.33% - 0.5pt), #000000 calc(13.33% - 0.5pt), #000000 calc(13.33% + 0.5pt), transparent calc(13.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(26.66% - 0.5pt), #000000 calc(26.66% - 0.5pt), #000000 calc(26.66% + 0.5pt), transparent calc(26.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(46.66% - 0.5pt), #000000 calc(46.66% - 0.5pt), #000000 calc(46.66% + 0.5pt), transparent calc(46.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(53.33% - 0.5pt), #000000 calc(53.33% - 0.5pt), #000000 calc(53.33% + 0.5pt), transparent calc(53.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(73.33% - 0.5pt), #000000 calc(73.33% - 0.5pt), #000000 calc(73.33% + 0.5pt), transparent calc(73.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(86.66% - 0.5pt), #000000 calc(86.66% - 0.5pt), #000000 calc(86.66% + 0.5pt), transparent calc(86.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(93.33% - 0.5pt), #000000 calc(93.33% - 0.5pt), #000000 calc(93.33% + 0.5pt), transparent calc(93.33% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.stripes-vertical-15 {
    background: 
        linear-gradient(to right, transparent calc(6.66% - 0.5pt), #000000 calc(6.66% - 0.5pt), #000000 calc(6.66% + 0.5pt), transparent calc(6.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(13.33% - 0.5pt), #000000 calc(13.33% - 0.5pt), #000000 calc(13.33% + 0.5pt), transparent calc(13.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(26.66% - 0.5pt), #000000 calc(26.66% - 0.5pt), #000000 calc(26.66% + 0.5pt), transparent calc(26.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(46.66% - 0.5pt), #000000 calc(46.66% - 0.5pt), #000000 calc(46.66% + 0.5pt), transparent calc(46.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(53.33% - 0.5pt), #000000 calc(53.33% - 0.5pt), #000000 calc(53.33% + 0.5pt), transparent calc(53.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(73.33% - 0.5pt), #000000 calc(73.33% - 0.5pt), #000000 calc(73.33% + 0.5pt), transparent calc(73.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to right, transparent calc(86.66% - 0.5pt), #000000 calc(86.66% - 0.5pt), #000000 calc(86.66% + 0.5pt), transparent calc(86.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(93.33% - 0.5pt), #000000 calc(93.33% - 0.5pt), #000000 calc(93.33% + 0.5pt), transparent calc(93.33% + 0.5pt)),
        #f4f4f4;
}

/* Grid patterns (NxN) */
.stripe-preview.grid-2x2 {
    background:
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-3x3 {
    background: 
        /* Horizontal lines */
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        /* Vertical lines */
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-4x4 {
    background: 
        linear-gradient(transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(90deg, transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-5x5 {
    background: 
        linear-gradient(transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(90deg, transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(90deg, transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(90deg, transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(90deg, transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-6x6 {
    background: 
        linear-gradient(transparent calc(16.666% - 0.5pt), #000 calc(16.666% - 0.5pt), #000 calc(16.666% + 0.5pt), transparent calc(16.666% + 0.5pt)),
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(transparent calc(83.333% - 0.5pt), #000 calc(83.333% - 0.5pt), #000 calc(83.333% + 0.5pt), transparent calc(83.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(16.666% - 0.5pt), #000 calc(16.666% - 0.5pt), #000 calc(16.666% + 0.5pt), transparent calc(16.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(83.333% - 0.5pt), #000 calc(83.333% - 0.5pt), #000 calc(83.333% + 0.5pt), transparent calc(83.333% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-7x7 {
    background: 
        linear-gradient(transparent calc(14.285% - 0.5pt), #000 calc(14.285% - 0.5pt), #000 calc(14.285% + 0.5pt), transparent calc(14.285% + 0.5pt)),
        linear-gradient(transparent calc(28.571% - 0.5pt), #000 calc(28.571% - 0.5pt), #000 calc(28.571% + 0.5pt), transparent calc(28.571% + 0.5pt)),
        linear-gradient(transparent calc(42.857% - 0.5pt), #000 calc(42.857% - 0.5pt), #000 calc(42.857% + 0.5pt), transparent calc(42.857% + 0.5pt)),
        linear-gradient(transparent calc(57.142% - 0.5pt), #000 calc(57.142% - 0.5pt), #000 calc(57.142% + 0.5pt), transparent calc(57.142% + 0.5pt)),
        linear-gradient(transparent calc(71.428% - 0.5pt), #000 calc(71.428% - 0.5pt), #000 calc(71.428% + 0.5pt), transparent calc(71.428% + 0.5pt)),
        linear-gradient(transparent calc(85.714% - 0.5pt), #000 calc(85.714% - 0.5pt), #000 calc(85.714% + 0.5pt), transparent calc(85.714% + 0.5pt)),
        linear-gradient(90deg, transparent calc(14.285% - 0.5pt), #000 calc(14.285% - 0.5pt), #000 calc(14.285% + 0.5pt), transparent calc(14.285% + 0.5pt)),
        linear-gradient(90deg, transparent calc(28.571% - 0.5pt), #000 calc(28.571% - 0.5pt), #000 calc(28.571% + 0.5pt), transparent calc(28.571% + 0.5pt)),
        linear-gradient(90deg, transparent calc(42.857% - 0.5pt), #000 calc(42.857% - 0.5pt), #000 calc(42.857% + 0.5pt), transparent calc(42.857% + 0.5pt)),
        linear-gradient(90deg, transparent calc(57.142% - 0.5pt), #000 calc(57.142% - 0.5pt), #000 calc(57.142% + 0.5pt), transparent calc(57.142% + 0.5pt)),
        linear-gradient(90deg, transparent calc(71.428% - 0.5pt), #000 calc(71.428% - 0.5pt), #000 calc(71.428% + 0.5pt), transparent calc(71.428% + 0.5pt)),
        linear-gradient(90deg, transparent calc(85.714% - 0.5pt), #000 calc(85.714% - 0.5pt), #000 calc(85.714% + 0.5pt), transparent calc(85.714% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-8x8 {
    background: 
        linear-gradient(transparent calc(12.5% - 0.5pt), #000 calc(12.5% - 0.5pt), #000 calc(12.5% + 0.5pt), transparent calc(12.5% + 0.5pt)),
        linear-gradient(transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(transparent calc(37.5% - 0.5pt), #000 calc(37.5% - 0.5pt), #000 calc(37.5% + 0.5pt), transparent calc(37.5% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(62.5% - 0.5pt), #000 calc(62.5% - 0.5pt), #000 calc(62.5% + 0.5pt), transparent calc(62.5% + 0.5pt)),
        linear-gradient(transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(transparent calc(87.5% - 0.5pt), #000 calc(87.5% - 0.5pt), #000 calc(87.5% + 0.5pt), transparent calc(87.5% + 0.5pt)),
        linear-gradient(90deg, transparent calc(12.5% - 0.5pt), #000 calc(12.5% - 0.5pt), #000 calc(12.5% + 0.5pt), transparent calc(12.5% + 0.5pt)),
        linear-gradient(90deg, transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(90deg, transparent calc(37.5% - 0.5pt), #000 calc(37.5% - 0.5pt), #000 calc(37.5% + 0.5pt), transparent calc(37.5% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(62.5% - 0.5pt), #000 calc(62.5% - 0.5pt), #000 calc(62.5% + 0.5pt), transparent calc(62.5% + 0.5pt)),
        linear-gradient(90deg, transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(90deg, transparent calc(87.5% - 0.5pt), #000 calc(87.5% - 0.5pt), #000 calc(87.5% + 0.5pt), transparent calc(87.5% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-9x9 {
    background: 
        linear-gradient(transparent calc(11.111% - 0.5pt), #000 calc(11.111% - 0.5pt), #000 calc(11.111% + 0.5pt), transparent calc(11.111% + 0.5pt)),
        linear-gradient(transparent calc(22.222% - 0.5pt), #000 calc(22.222% - 0.5pt), #000 calc(22.222% + 0.5pt), transparent calc(22.222% + 0.5pt)),
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(44.444% - 0.5pt), #000 calc(44.444% - 0.5pt), #000 calc(44.444% + 0.5pt), transparent calc(44.444% + 0.5pt)),
        linear-gradient(transparent calc(55.555% - 0.5pt), #000 calc(55.555% - 0.5pt), #000 calc(55.555% + 0.5pt), transparent calc(55.555% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(transparent calc(77.777% - 0.5pt), #000 calc(77.777% - 0.5pt), #000 calc(77.777% + 0.5pt), transparent calc(77.777% + 0.5pt)),
        linear-gradient(transparent calc(88.888% - 0.5pt), #000 calc(88.888% - 0.5pt), #000 calc(88.888% + 0.5pt), transparent calc(88.888% + 0.5pt)),
        linear-gradient(90deg, transparent calc(11.111% - 0.5pt), #000 calc(11.111% - 0.5pt), #000 calc(11.111% + 0.5pt), transparent calc(11.111% + 0.5pt)),
        linear-gradient(90deg, transparent calc(22.222% - 0.5pt), #000 calc(22.222% - 0.5pt), #000 calc(22.222% + 0.5pt), transparent calc(22.222% + 0.5pt)),
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(44.444% - 0.5pt), #000 calc(44.444% - 0.5pt), #000 calc(44.444% + 0.5pt), transparent calc(44.444% + 0.5pt)),
        linear-gradient(90deg, transparent calc(55.555% - 0.5pt), #000 calc(55.555% - 0.5pt), #000 calc(55.555% + 0.5pt), transparent calc(55.555% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(77.777% - 0.5pt), #000 calc(77.777% - 0.5pt), #000 calc(77.777% + 0.5pt), transparent calc(77.777% + 0.5pt)),
        linear-gradient(90deg, transparent calc(88.888% - 0.5pt), #000 calc(88.888% - 0.5pt), #000 calc(88.888% + 0.5pt), transparent calc(88.888% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-10x10 {
    background: 
        linear-gradient(transparent calc(10% - 0.5pt), #000 calc(10% - 0.5pt), #000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(transparent calc(30% - 0.5pt), #000 calc(30% - 0.5pt), #000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(transparent calc(70% - 0.5pt), #000 calc(70% - 0.5pt), #000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(transparent calc(90% - 0.5pt), #000 calc(90% - 0.5pt), #000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        linear-gradient(90deg, transparent calc(10% - 0.5pt), #000 calc(10% - 0.5pt), #000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(90deg, transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(90deg, transparent calc(30% - 0.5pt), #000 calc(30% - 0.5pt), #000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(90deg, transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(90deg, transparent calc(70% - 0.5pt), #000 calc(70% - 0.5pt), #000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(90deg, transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(90deg, transparent calc(90% - 0.5pt), #000 calc(90% - 0.5pt), #000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-11x11 {
    background: 
        linear-gradient(transparent calc(9.09% - 0.5pt), #000 calc(9.09% - 0.5pt), #000 calc(9.09% + 0.5pt), transparent calc(9.09% + 0.5pt)),
        linear-gradient(transparent calc(18.18% - 0.5pt), #000 calc(18.18% - 0.5pt), #000 calc(18.18% + 0.5pt), transparent calc(18.18% + 0.5pt)),
        linear-gradient(transparent calc(27.27% - 0.5pt), #000 calc(27.27% - 0.5pt), #000 calc(27.27% + 0.5pt), transparent calc(27.27% + 0.5pt)),
        linear-gradient(transparent calc(36.36% - 0.5pt), #000 calc(36.36% - 0.5pt), #000 calc(36.36% + 0.5pt), transparent calc(36.36% + 0.5pt)),
        linear-gradient(transparent calc(45.45% - 0.5pt), #000 calc(45.45% - 0.5pt), #000 calc(45.45% + 0.5pt), transparent calc(45.45% + 0.5pt)),
        linear-gradient(transparent calc(54.54% - 0.5pt), #000 calc(54.54% - 0.5pt), #000 calc(54.54% + 0.5pt), transparent calc(54.54% + 0.5pt)),
        linear-gradient(transparent calc(63.63% - 0.5pt), #000 calc(63.63% - 0.5pt), #000 calc(63.63% + 0.5pt), transparent calc(63.63% + 0.5pt)),
        linear-gradient(transparent calc(72.72% - 0.5pt), #000 calc(72.72% - 0.5pt), #000 calc(72.72% + 0.5pt), transparent calc(72.72% + 0.5pt)),
        linear-gradient(transparent calc(81.81% - 0.5pt), #000 calc(81.81% - 0.5pt), #000 calc(81.81% + 0.5pt), transparent calc(81.81% + 0.5pt)),
        linear-gradient(transparent calc(90.90% - 0.5pt), #000 calc(90.90% - 0.5pt), #000 calc(90.90% + 0.5pt), transparent calc(90.90% + 0.5pt)),
        linear-gradient(90deg, transparent calc(9.09% - 0.5pt), #000 calc(9.09% - 0.5pt), #000 calc(9.09% + 0.5pt), transparent calc(9.09% + 0.5pt)),
        linear-gradient(90deg, transparent calc(18.18% - 0.5pt), #000 calc(18.18% - 0.5pt), #000 calc(18.18% + 0.5pt), transparent calc(18.18% + 0.5pt)),
        linear-gradient(90deg, transparent calc(27.27% - 0.5pt), #000 calc(27.27% - 0.5pt), #000 calc(27.27% + 0.5pt), transparent calc(27.27% + 0.5pt)),
        linear-gradient(90deg, transparent calc(36.36% - 0.5pt), #000 calc(36.36% - 0.5pt), #000 calc(36.36% + 0.5pt), transparent calc(36.36% + 0.5pt)),
        linear-gradient(90deg, transparent calc(45.45% - 0.5pt), #000 calc(45.45% - 0.5pt), #000 calc(45.45% + 0.5pt), transparent calc(45.45% + 0.5pt)),
        linear-gradient(90deg, transparent calc(54.54% - 0.5pt), #000 calc(54.54% - 0.5pt), #000 calc(54.54% + 0.5pt), transparent calc(54.54% + 0.5pt)),
        linear-gradient(90deg, transparent calc(63.63% - 0.5pt), #000 calc(63.63% - 0.5pt), #000 calc(63.63% + 0.5pt), transparent calc(63.63% + 0.5pt)),
        linear-gradient(90deg, transparent calc(72.72% - 0.5pt), #000 calc(72.72% - 0.5pt), #000 calc(72.72% + 0.5pt), transparent calc(72.72% + 0.5pt)),
        linear-gradient(90deg, transparent calc(81.81% - 0.5pt), #000 calc(81.81% - 0.5pt), #000 calc(81.81% + 0.5pt), transparent calc(81.81% + 0.5pt)),
        linear-gradient(90deg, transparent calc(90.90% - 0.5pt), #000 calc(90.90% - 0.5pt), #000 calc(90.90% + 0.5pt), transparent calc(90.90% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-12x12 {
    background: 
        linear-gradient(transparent calc(8.333% - 0.5pt), #000 calc(8.333% - 0.5pt), #000 calc(8.333% + 0.5pt), transparent calc(8.333% + 0.5pt)),
        linear-gradient(transparent calc(16.666% - 0.5pt), #000 calc(16.666% - 0.5pt), #000 calc(16.666% + 0.5pt), transparent calc(16.666% + 0.5pt)),
        linear-gradient(transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(41.666% - 0.5pt), #000 calc(41.666% - 0.5pt), #000 calc(41.666% + 0.5pt), transparent calc(41.666% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(58.333% - 0.5pt), #000 calc(58.333% - 0.5pt), #000 calc(58.333% + 0.5pt), transparent calc(58.333% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(transparent calc(83.333% - 0.5pt), #000 calc(83.333% - 0.5pt), #000 calc(83.333% + 0.5pt), transparent calc(83.333% + 0.5pt)),
        linear-gradient(transparent calc(91.666% - 0.5pt), #000 calc(91.666% - 0.5pt), #000 calc(91.666% + 0.5pt), transparent calc(91.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(8.333% - 0.5pt), #000 calc(8.333% - 0.5pt), #000 calc(8.333% + 0.5pt), transparent calc(8.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(16.666% - 0.5pt), #000 calc(16.666% - 0.5pt), #000 calc(16.666% + 0.5pt), transparent calc(16.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(25% - 0.5pt), #000 calc(25% - 0.5pt), #000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(41.666% - 0.5pt), #000 calc(41.666% - 0.5pt), #000 calc(41.666% + 0.5pt), transparent calc(41.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(58.333% - 0.5pt), #000 calc(58.333% - 0.5pt), #000 calc(58.333% + 0.5pt), transparent calc(58.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(75% - 0.5pt), #000 calc(75% - 0.5pt), #000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(90deg, transparent calc(83.333% - 0.5pt), #000 calc(83.333% - 0.5pt), #000 calc(83.333% + 0.5pt), transparent calc(83.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(91.666% - 0.5pt), #000 calc(91.666% - 0.5pt), #000 calc(91.666% + 0.5pt), transparent calc(91.666% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-13x13 {
    background: 
        linear-gradient(transparent calc(7.692% - 0.5pt), #000 calc(7.692% - 0.5pt), #000 calc(7.692% + 0.5pt), transparent calc(7.692% + 0.5pt)),
        linear-gradient(transparent calc(15.384% - 0.5pt), #000 calc(15.384% - 0.5pt), #000 calc(15.384% + 0.5pt), transparent calc(15.384% + 0.5pt)),
        linear-gradient(transparent calc(23.076% - 0.5pt), #000 calc(23.076% - 0.5pt), #000 calc(23.076% + 0.5pt), transparent calc(23.076% + 0.5pt)),
        linear-gradient(transparent calc(30.769% - 0.5pt), #000 calc(30.769% - 0.5pt), #000 calc(30.769% + 0.5pt), transparent calc(30.769% + 0.5pt)),
        linear-gradient(transparent calc(38.461% - 0.5pt), #000 calc(38.461% - 0.5pt), #000 calc(38.461% + 0.5pt), transparent calc(38.461% + 0.5pt)),
        linear-gradient(transparent calc(46.153% - 0.5pt), #000 calc(46.153% - 0.5pt), #000 calc(46.153% + 0.5pt), transparent calc(46.153% + 0.5pt)),
        linear-gradient(transparent calc(53.846% - 0.5pt), #000 calc(53.846% - 0.5pt), #000 calc(53.846% + 0.5pt), transparent calc(53.846% + 0.5pt)),
        linear-gradient(transparent calc(61.538% - 0.5pt), #000 calc(61.538% - 0.5pt), #000 calc(61.538% + 0.5pt), transparent calc(61.538% + 0.5pt)),
        linear-gradient(transparent calc(69.230% - 0.5pt), #000 calc(69.230% - 0.5pt), #000 calc(69.230% + 0.5pt), transparent calc(69.230% + 0.5pt)),
        linear-gradient(transparent calc(76.923% - 0.5pt), #000 calc(76.923% - 0.5pt), #000 calc(76.923% + 0.5pt), transparent calc(76.923% + 0.5pt)),
        linear-gradient(transparent calc(84.615% - 0.5pt), #000 calc(84.615% - 0.5pt), #000 calc(84.615% + 0.5pt), transparent calc(84.615% + 0.5pt)),
        linear-gradient(transparent calc(92.307% - 0.5pt), #000 calc(92.307% - 0.5pt), #000 calc(92.307% + 0.5pt), transparent calc(92.307% + 0.5pt)),
        linear-gradient(90deg, transparent calc(7.692% - 0.5pt), #000 calc(7.692% - 0.5pt), #000 calc(7.692% + 0.5pt), transparent calc(7.692% + 0.5pt)),
        linear-gradient(90deg, transparent calc(15.384% - 0.5pt), #000 calc(15.384% - 0.5pt), #000 calc(15.384% + 0.5pt), transparent calc(15.384% + 0.5pt)),
        linear-gradient(90deg, transparent calc(23.076% - 0.5pt), #000 calc(23.076% - 0.5pt), #000 calc(23.076% + 0.5pt), transparent calc(23.076% + 0.5pt)),
        linear-gradient(90deg, transparent calc(30.769% - 0.5pt), #000 calc(30.769% - 0.5pt), #000 calc(30.769% + 0.5pt), transparent calc(30.769% + 0.5pt)),
        linear-gradient(90deg, transparent calc(38.461% - 0.5pt), #000 calc(38.461% - 0.5pt), #000 calc(38.461% + 0.5pt), transparent calc(38.461% + 0.5pt)),
        linear-gradient(90deg, transparent calc(46.153% - 0.5pt), #000 calc(46.153% - 0.5pt), #000 calc(46.153% + 0.5pt), transparent calc(46.153% + 0.5pt)),
        linear-gradient(90deg, transparent calc(53.846% - 0.5pt), #000 calc(53.846% - 0.5pt), #000 calc(53.846% + 0.5pt), transparent calc(53.846% + 0.5pt)),
        linear-gradient(90deg, transparent calc(61.538% - 0.5pt), #000 calc(61.538% - 0.5pt), #000 calc(61.538% + 0.5pt), transparent calc(61.538% + 0.5pt)),
        linear-gradient(90deg, transparent calc(69.230% - 0.5pt), #000 calc(69.230% - 0.5pt), #000 calc(69.230% + 0.5pt), transparent calc(69.230% + 0.5pt)),
        linear-gradient(90deg, transparent calc(76.923% - 0.5pt), #000 calc(76.923% - 0.5pt), #000 calc(76.923% + 0.5pt), transparent calc(76.923% + 0.5pt)),
        linear-gradient(90deg, transparent calc(84.615% - 0.5pt), #000 calc(84.615% - 0.5pt), #000 calc(84.615% + 0.5pt), transparent calc(84.615% + 0.5pt)),
        linear-gradient(90deg, transparent calc(92.307% - 0.5pt), #000 calc(92.307% - 0.5pt), #000 calc(92.307% + 0.5pt), transparent calc(92.307% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-14x14 {
    background: 
        linear-gradient(transparent calc(7.142% - 0.5pt), #000 calc(7.142% - 0.5pt), #000 calc(7.142% + 0.5pt), transparent calc(7.142% + 0.5pt)),
        linear-gradient(transparent calc(14.285% - 0.5pt), #000 calc(14.285% - 0.5pt), #000 calc(14.285% + 0.5pt), transparent calc(14.285% + 0.5pt)),
        linear-gradient(transparent calc(21.428% - 0.5pt), #000 calc(21.428% - 0.5pt), #000 calc(21.428% + 0.5pt), transparent calc(21.428% + 0.5pt)),
        linear-gradient(transparent calc(28.571% - 0.5pt), #000 calc(28.571% - 0.5pt), #000 calc(28.571% + 0.5pt), transparent calc(28.571% + 0.5pt)),
        linear-gradient(transparent calc(35.714% - 0.5pt), #000 calc(35.714% - 0.5pt), #000 calc(35.714% + 0.5pt), transparent calc(35.714% + 0.5pt)),
        linear-gradient(transparent calc(42.857% - 0.5pt), #000 calc(42.857% - 0.5pt), #000 calc(42.857% + 0.5pt), transparent calc(42.857% + 0.5pt)),
        linear-gradient(transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(transparent calc(57.142% - 0.5pt), #000 calc(57.142% - 0.5pt), #000 calc(57.142% + 0.5pt), transparent calc(57.142% + 0.5pt)),
        linear-gradient(transparent calc(64.285% - 0.5pt), #000 calc(64.285% - 0.5pt), #000 calc(64.285% + 0.5pt), transparent calc(64.285% + 0.5pt)),
        linear-gradient(transparent calc(71.428% - 0.5pt), #000 calc(71.428% - 0.5pt), #000 calc(71.428% + 0.5pt), transparent calc(71.428% + 0.5pt)),
        linear-gradient(transparent calc(78.571% - 0.5pt), #000 calc(78.571% - 0.5pt), #000 calc(78.571% + 0.5pt), transparent calc(78.571% + 0.5pt)),
        linear-gradient(transparent calc(85.714% - 0.5pt), #000 calc(85.714% - 0.5pt), #000 calc(85.714% + 0.5pt), transparent calc(85.714% + 0.5pt)),
        linear-gradient(transparent calc(92.857% - 0.5pt), #000 calc(92.857% - 0.5pt), #000 calc(92.857% + 0.5pt), transparent calc(92.857% + 0.5pt)),
        linear-gradient(90deg, transparent calc(7.142% - 0.5pt), #000 calc(7.142% - 0.5pt), #000 calc(7.142% + 0.5pt), transparent calc(7.142% + 0.5pt)),
        linear-gradient(90deg, transparent calc(14.285% - 0.5pt), #000 calc(14.285% - 0.5pt), #000 calc(14.285% + 0.5pt), transparent calc(14.285% + 0.5pt)),
        linear-gradient(90deg, transparent calc(21.428% - 0.5pt), #000 calc(21.428% - 0.5pt), #000 calc(21.428% + 0.5pt), transparent calc(21.428% + 0.5pt)),
        linear-gradient(90deg, transparent calc(28.571% - 0.5pt), #000 calc(28.571% - 0.5pt), #000 calc(28.571% + 0.5pt), transparent calc(28.571% + 0.5pt)),
        linear-gradient(90deg, transparent calc(35.714% - 0.5pt), #000 calc(35.714% - 0.5pt), #000 calc(35.714% + 0.5pt), transparent calc(35.714% + 0.5pt)),
        linear-gradient(90deg, transparent calc(42.857% - 0.5pt), #000 calc(42.857% - 0.5pt), #000 calc(42.857% + 0.5pt), transparent calc(42.857% + 0.5pt)),
        linear-gradient(90deg, transparent calc(50% - 0.5pt), #000 calc(50% - 0.5pt), #000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(90deg, transparent calc(57.142% - 0.5pt), #000 calc(57.142% - 0.5pt), #000 calc(57.142% + 0.5pt), transparent calc(57.142% + 0.5pt)),
        linear-gradient(90deg, transparent calc(64.285% - 0.5pt), #000 calc(64.285% - 0.5pt), #000 calc(64.285% + 0.5pt), transparent calc(64.285% + 0.5pt)),
        linear-gradient(90deg, transparent calc(71.428% - 0.5pt), #000 calc(71.428% - 0.5pt), #000 calc(71.428% + 0.5pt), transparent calc(71.428% + 0.5pt)),
        linear-gradient(90deg, transparent calc(78.571% - 0.5pt), #000 calc(78.571% - 0.5pt), #000 calc(78.571% + 0.5pt), transparent calc(78.571% + 0.5pt)),
        linear-gradient(90deg, transparent calc(85.714% - 0.5pt), #000 calc(85.714% - 0.5pt), #000 calc(85.714% + 0.5pt), transparent calc(85.714% + 0.5pt)),
        linear-gradient(90deg, transparent calc(92.857% - 0.5pt), #000 calc(92.857% - 0.5pt), #000 calc(92.857% + 0.5pt), transparent calc(92.857% + 0.5pt)),
        #f4f4f4;
}

.stripe-preview.grid-15x15 {
    background: 
        linear-gradient(transparent calc(6.666% - 0.5pt), #000 calc(6.666% - 0.5pt), #000 calc(6.666% + 0.5pt), transparent calc(6.666% + 0.5pt)),
        linear-gradient(transparent calc(13.333% - 0.5pt), #000 calc(13.333% - 0.5pt), #000 calc(13.333% + 0.5pt), transparent calc(13.333% + 0.5pt)),
        linear-gradient(transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(transparent calc(26.666% - 0.5pt), #000 calc(26.666% - 0.5pt), #000 calc(26.666% + 0.5pt), transparent calc(26.666% + 0.5pt)),
        linear-gradient(transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(transparent calc(46.666% - 0.5pt), #000 calc(46.666% - 0.5pt), #000 calc(46.666% + 0.5pt), transparent calc(46.666% + 0.5pt)),
        linear-gradient(transparent calc(53.333% - 0.5pt), #000 calc(53.333% - 0.5pt), #000 calc(53.333% + 0.5pt), transparent calc(53.333% + 0.5pt)),
        linear-gradient(transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(transparent calc(73.333% - 0.5pt), #000 calc(73.333% - 0.5pt), #000 calc(73.333% + 0.5pt), transparent calc(73.333% + 0.5pt)),
        linear-gradient(transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(transparent calc(86.666% - 0.5pt), #000 calc(86.666% - 0.5pt), #000 calc(86.666% + 0.5pt), transparent calc(86.666% + 0.5pt)),
        linear-gradient(transparent calc(93.333% - 0.5pt), #000 calc(93.333% - 0.5pt), #000 calc(93.333% + 0.5pt), transparent calc(93.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(6.666% - 0.5pt), #000 calc(6.666% - 0.5pt), #000 calc(6.666% + 0.5pt), transparent calc(6.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(13.333% - 0.5pt), #000 calc(13.333% - 0.5pt), #000 calc(13.333% + 0.5pt), transparent calc(13.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(20% - 0.5pt), #000 calc(20% - 0.5pt), #000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(90deg, transparent calc(26.666% - 0.5pt), #000 calc(26.666% - 0.5pt), #000 calc(26.666% + 0.5pt), transparent calc(26.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(33.333% - 0.5pt), #000 calc(33.333% - 0.5pt), #000 calc(33.333% + 0.5pt), transparent calc(33.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(40% - 0.5pt), #000 calc(40% - 0.5pt), #000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(90deg, transparent calc(46.666% - 0.5pt), #000 calc(46.666% - 0.5pt), #000 calc(46.666% + 0.5pt), transparent calc(46.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(53.333% - 0.5pt), #000 calc(53.333% - 0.5pt), #000 calc(53.333% + 0.5pt), transparent calc(53.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(60% - 0.5pt), #000 calc(60% - 0.5pt), #000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(90deg, transparent calc(66.666% - 0.5pt), #000 calc(66.666% - 0.5pt), #000 calc(66.666% + 0.5pt), transparent calc(66.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(73.333% - 0.5pt), #000 calc(73.333% - 0.5pt), #000 calc(73.333% + 0.5pt), transparent calc(73.333% + 0.5pt)),
        linear-gradient(90deg, transparent calc(80% - 0.5pt), #000 calc(80% - 0.5pt), #000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(90deg, transparent calc(86.666% - 0.5pt), #000 calc(86.666% - 0.5pt), #000 calc(86.666% + 0.5pt), transparent calc(86.666% + 0.5pt)),
        linear-gradient(90deg, transparent calc(93.333% - 0.5pt), #000 calc(93.333% - 0.5pt), #000 calc(93.333% + 0.5pt), transparent calc(93.333% + 0.5pt)),
        #f4f4f4;
}

/* Vertical stripe patterns */
.stripes-vertical-2 {
    background: 
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-3 {
    background: 
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-4 {
    background: 
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-5 {
    background: 
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-6 {
    background: 
        linear-gradient(to right, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-7 {
    background: 
        linear-gradient(to right, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to right, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-8 {
    background: 
        linear-gradient(to right, transparent calc(12.5% - 0.5pt), #000000 calc(12.5% - 0.5pt), #000000 calc(12.5% + 0.5pt), transparent calc(12.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(37.5% - 0.5pt), #000000 calc(37.5% - 0.5pt), #000000 calc(37.5% + 0.5pt), transparent calc(37.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(62.5% - 0.5pt), #000000 calc(62.5% - 0.5pt), #000000 calc(62.5% + 0.5pt), transparent calc(62.5% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to right, transparent calc(87.5% - 0.5pt), #000000 calc(87.5% - 0.5pt), #000000 calc(87.5% + 0.5pt), transparent calc(87.5% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-9 {
    background: 
        linear-gradient(to right, transparent calc(11.11% - 0.5pt), #000000 calc(11.11% - 0.5pt), #000000 calc(11.11% + 0.5pt), transparent calc(11.11% + 0.5pt)),
        linear-gradient(to right, transparent calc(22.22% - 0.5pt), #000000 calc(22.22% - 0.5pt), #000000 calc(22.22% + 0.5pt), transparent calc(22.22% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(44.44% - 0.5pt), #000000 calc(44.44% - 0.5pt), #000000 calc(44.44% + 0.5pt), transparent calc(44.44% + 0.5pt)),
        linear-gradient(to right, transparent calc(55.55% - 0.5pt), #000000 calc(55.55% - 0.5pt), #000000 calc(55.55% + 0.5pt), transparent calc(55.55% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(77.77% - 0.5pt), #000000 calc(77.77% - 0.5pt), #000000 calc(77.77% + 0.5pt), transparent calc(77.77% + 0.5pt)),
        linear-gradient(to right, transparent calc(88.88% - 0.5pt), #000000 calc(88.88% - 0.5pt), #000000 calc(88.88% + 0.5pt), transparent calc(88.88% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-10 {
    background: 
        linear-gradient(to right, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to right, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-11 {
    background: 
        linear-gradient(to right, transparent calc(9.09% - 0.5pt), #000000 calc(9.09% - 0.5pt), #000000 calc(9.09% + 0.5pt), transparent calc(9.09% + 0.5pt)),
        linear-gradient(to right, transparent calc(18.18% - 0.5pt), #000000 calc(18.18% - 0.5pt), #000000 calc(18.18% + 0.5pt), transparent calc(18.18% + 0.5pt)),
        linear-gradient(to right, transparent calc(27.27% - 0.5pt), #000000 calc(27.27% - 0.5pt), #000000 calc(27.27% + 0.5pt), transparent calc(27.27% + 0.5pt)),
        linear-gradient(to right, transparent calc(36.36% - 0.5pt), #000000 calc(36.36% - 0.5pt), #000000 calc(36.36% + 0.5pt), transparent calc(36.36% + 0.5pt)),
        linear-gradient(to right, transparent calc(45.45% - 0.5pt), #000000 calc(45.45% - 0.5pt), #000000 calc(45.45% + 0.5pt), transparent calc(45.45% + 0.5pt)),
        linear-gradient(to right, transparent calc(54.54% - 0.5pt), #000000 calc(54.54% - 0.5pt), #000000 calc(54.54% + 0.5pt), transparent calc(54.54% + 0.5pt)),
        linear-gradient(to right, transparent calc(63.63% - 0.5pt), #000000 calc(63.63% - 0.5pt), #000000 calc(63.63% + 0.5pt), transparent calc(63.63% + 0.5pt)),
        linear-gradient(to right, transparent calc(72.72% - 0.5pt), #000000 calc(72.72% - 0.5pt), #000000 calc(72.72% + 0.5pt), transparent calc(72.72% + 0.5pt)),
        linear-gradient(to right, transparent calc(81.81% - 0.5pt), #000000 calc(81.81% - 0.5pt), #000000 calc(81.81% + 0.5pt), transparent calc(81.81% + 0.5pt)),
        linear-gradient(to right, transparent calc(90.90% - 0.5pt), #000000 calc(90.90% - 0.5pt), #000000 calc(90.90% + 0.5pt), transparent calc(90.90% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-12 {
    background: 
        linear-gradient(to right, transparent calc(8.33% - 0.5pt), #000000 calc(8.33% - 0.5pt), #000000 calc(8.33% + 0.5pt), transparent calc(8.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(41.66% - 0.5pt), #000000 calc(41.66% - 0.5pt), #000000 calc(41.66% + 0.5pt), transparent calc(41.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(58.33% - 0.5pt), #000000 calc(58.33% - 0.5pt), #000000 calc(58.33% + 0.5pt), transparent calc(58.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to right, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(91.66% - 0.5pt), #000000 calc(91.66% - 0.5pt), #000000 calc(91.66% + 0.5pt), transparent calc(91.66% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-13 {
    background: 
        linear-gradient(to right, transparent calc(7.69% - 0.5pt), #000000 calc(7.69% - 0.5pt), #000000 calc(7.69% + 0.5pt), transparent calc(7.69% + 0.5pt)),
        linear-gradient(to right, transparent calc(15.38% - 0.5pt), #000000 calc(15.38% - 0.5pt), #000000 calc(15.38% + 0.5pt), transparent calc(15.38% + 0.5pt)),
        linear-gradient(to right, transparent calc(23.07% - 0.5pt), #000000 calc(23.07% - 0.5pt), #000000 calc(23.07% + 0.5pt), transparent calc(23.07% + 0.5pt)),
        linear-gradient(to right, transparent calc(30.76% - 0.5pt), #000000 calc(30.76% - 0.5pt), #000000 calc(30.76% + 0.5pt), transparent calc(30.76% + 0.5pt)),
        linear-gradient(to right, transparent calc(38.46% - 0.5pt), #000000 calc(38.46% - 0.5pt), #000000 calc(38.46% + 0.5pt), transparent calc(38.46% + 0.5pt)),
        linear-gradient(to right, transparent calc(46.15% - 0.5pt), #000000 calc(46.15% - 0.5pt), #000000 calc(46.15% + 0.5pt), transparent calc(46.15% + 0.5pt)),
        linear-gradient(to right, transparent calc(53.84% - 0.5pt), #000000 calc(53.84% - 0.5pt), #000000 calc(53.84% + 0.5pt), transparent calc(53.84% + 0.5pt)),
        linear-gradient(to right, transparent calc(61.53% - 0.5pt), #000000 calc(61.53% - 0.5pt), #000000 calc(61.53% + 0.5pt), transparent calc(61.53% + 0.5pt)),
        linear-gradient(to right, transparent calc(69.23% - 0.5pt), #000000 calc(69.23% - 0.5pt), #000000 calc(69.23% + 0.5pt), transparent calc(69.23% + 0.5pt)),
        linear-gradient(to right, transparent calc(76.92% - 0.5pt), #000000 calc(76.92% - 0.5pt), #000000 calc(76.92% + 0.5pt), transparent calc(76.92% + 0.5pt)),
        linear-gradient(to right, transparent calc(84.61% - 0.5pt), #000000 calc(84.61% - 0.5pt), #000000 calc(84.61% + 0.5pt), transparent calc(84.61% + 0.5pt)),
        linear-gradient(to right, transparent calc(92.30% - 0.5pt), #000000 calc(92.30% - 0.5pt), #000000 calc(92.30% + 0.5pt), transparent calc(92.30% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-14 {
    background: 
        linear-gradient(to right, transparent calc(7.14% - 0.5pt), #000000 calc(7.14% - 0.5pt), #000000 calc(7.14% + 0.5pt), transparent calc(7.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(14.28% - 0.5pt), #000000 calc(14.28% - 0.5pt), #000000 calc(14.28% + 0.5pt), transparent calc(14.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(21.42% - 0.5pt), #000000 calc(21.42% - 0.5pt), #000000 calc(21.42% + 0.5pt), transparent calc(21.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(35.71% - 0.5pt), #000000 calc(35.71% - 0.5pt), #000000 calc(35.71% + 0.5pt), transparent calc(35.71% + 0.5pt)),
        linear-gradient(to right, transparent calc(42.85% - 0.5pt), #000000 calc(42.85% - 0.5pt), #000000 calc(42.85% + 0.5pt), transparent calc(42.85% + 0.5pt)),
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(57.14% - 0.5pt), #000000 calc(57.14% - 0.5pt), #000000 calc(57.14% + 0.5pt), transparent calc(57.14% + 0.5pt)),
        linear-gradient(to right, transparent calc(64.28% - 0.5pt), #000000 calc(64.28% - 0.5pt), #000000 calc(64.28% + 0.5pt), transparent calc(64.28% + 0.5pt)),
        linear-gradient(to right, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        linear-gradient(to right, transparent calc(78.57% - 0.5pt), #000000 calc(78.57% - 0.5pt), #000000 calc(78.57% + 0.5pt), transparent calc(78.57% + 0.5pt)),
        linear-gradient(to right, transparent calc(85.71% - 0.5pt), #000000 calc(85.71% - 0.5pt), #000000 calc(85.71% + 0.5pt), transparent calc(85.71% + 0.5pt)),
        linear-gradient(to right, transparent calc(92.85% - 0.5pt), #000000 calc(92.85% - 0.5pt), #000000 calc(92.85% + 0.5pt), transparent calc(92.85% + 0.5pt)),
        #f4f4f4;
}

.stripes-vertical-15 {
    background: 
        linear-gradient(to right, transparent calc(6.66% - 0.5pt), #000000 calc(6.66% - 0.5pt), #000000 calc(6.66% + 0.5pt), transparent calc(6.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(13.33% - 0.5pt), #000000 calc(13.33% - 0.5pt), #000000 calc(13.33% + 0.5pt), transparent calc(13.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(26.66% - 0.5pt), #000000 calc(26.66% - 0.5pt), #000000 calc(26.66% + 0.5pt), transparent calc(26.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(46.66% - 0.5pt), #000000 calc(46.66% - 0.5pt), #000000 calc(46.66% + 0.5pt), transparent calc(46.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(53.33% - 0.5pt), #000000 calc(53.33% - 0.5pt), #000000 calc(53.33% + 0.5pt), transparent calc(53.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(73.33% - 0.5pt), #000000 calc(73.33% - 0.5pt), #000000 calc(73.33% + 0.5pt), transparent calc(73.33% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        linear-gradient(to right, transparent calc(86.66% - 0.5pt), #000000 calc(86.66% - 0.5pt), #000000 calc(86.66% + 0.5pt), transparent calc(86.66% + 0.5pt)),
        linear-gradient(to right, transparent calc(93.33% - 0.5pt), #000000 calc(93.33% - 0.5pt), #000000 calc(93.33% + 0.5pt), transparent calc(93.33% + 0.5pt)),
        #f4f4f4;
}

/* ============================================
   7. 📐 3-Stripe Proportion Options
   📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐📐
   ============================================ */
.proportion-options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 20px;
}

.proportion-option {
    width: 120px;
    height: 80px;
    border: 1pt solid #333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.proportion-option:hover {
    transform: scale(1.05);
    border-color: #000;
}

.proportion-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
}

.proportion-option span {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 0;
    border-radius: 999px;
}

/* 3-stripe proportion patterns */
.proportion-1-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.proportion-3-4-3 {
    background: 
        linear-gradient(to bottom, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        #f4f4f4;
}

.proportion-2-3-2 {
    background: 
        linear-gradient(to bottom, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(71.42% - 0.5pt), #000000 calc(71.42% - 0.5pt), #000000 calc(71.42% + 0.5pt), transparent calc(71.42% + 0.5pt)),
        #f4f4f4;
}

.proportion-1-2-1 {
    background: 
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.proportion-1-3-1 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-1-8-1 {
    background: 
        linear-gradient(to bottom, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

.proportion-2-1-2 {
    background: 
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        #f4f4f4;
}

.proportion-2-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

/* ============================================
   8. 📊 5-Stripe Proportion Options
   📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊📊
   ============================================ */
.proportion-options-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 20px;
}

.proportion-option-5 {
    width: 120px;
    height: 80px;
    border: 1pt solid #333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.proportion-option-5:hover {
    transform: scale(1.05);
    border-color: #000;
}

.proportion-preview-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
}

.proportion-option-5 span {
    position: relative;
    z-index: 1;
    background-color: rgba(244, 244, 244, 0.9);
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* 5-stripe proportion patterns */
.proportion-5-1-1-1-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-5-1-1-2-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(16.66% - 0.5pt), #000000 calc(16.66% - 0.5pt), #000000 calc(16.66% + 0.5pt), transparent calc(16.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(83.33% - 0.5pt), #000000 calc(83.33% - 0.5pt), #000000 calc(83.33% + 0.5pt), transparent calc(83.33% + 0.5pt)),
        #f4f4f4;
}

.proportion-5-3-5-16-5-3 {
    background: 
        linear-gradient(to bottom, transparent calc(9.375% - 0.5pt), #000000 calc(9.375% - 0.5pt), #000000 calc(9.375% + 0.5pt), transparent calc(9.375% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90.625% - 0.5pt), #000000 calc(90.625% - 0.5pt), #000000 calc(90.625% + 0.5pt), transparent calc(90.625% + 0.5pt)),
        #f4f4f4;
}

.proportion-5-2-1-4-1-2 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-5-3-1-8-1-3 {
    background: 
        linear-gradient(to bottom, transparent calc(18.75% - 0.5pt), #000000 calc(18.75% - 0.5pt), #000000 calc(18.75% + 0.5pt), transparent calc(18.75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(81.25% - 0.5pt), #000000 calc(81.25% - 0.5pt), #000000 calc(81.25% + 0.5pt), transparent calc(81.25% + 0.5pt)),
        #f4f4f4;
}

/* ============================================
   9. 🎨 Grid Color Selection
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */
.grid-color-selection {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

/* ============================================
   Color selection pages (UX override)
   - Preview uses full viewport width
   - Options are small color circles in one row
   - No flag previews inside option tiles
   ============================================ */

#step-3a .flag-display,
#step-3b .flag-display,
#step-3c .flag-display,
#step-3d .flag-display,
#step-3e .flag-display,
#step-7 .flag-display,
#step-8-obereck-color .flag-display,
#step-8-addon-color .flag-display {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0;
    border: 0;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#step-3a,
#step-3b,
#step-3c,
#step-3d,
#step-3e,
#step-7,
#step-8-obereck-color,
#step-8-addon-color {
    padding: 0;
    margin: -9px;
    width: calc(100% + 18px);
}

/* Floating color bubble (includes the label + circles) */
#step-3a .solid-color-selection,
#step-3b .stripe-color-selection-2h,
#step-3c .stripe-color-selection-3,
#step-3d .stripe-color-selection-2v,
#step-3e .cross-color-selection,
#step-7 .grid-color-selection,
#step-8-obereck-color .solid-color-selection,
#step-8-addon-color .solid-color-selection {
    position: fixed;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 9px;
    width: auto;
    max-width: calc(100vw - 18px);
    margin: 0;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 999px;
    box-sizing: border-box;
}

#step-3b .stripe-color-selection-2h h3,
#step-3c .stripe-color-selection-3 h3,
#step-3d .stripe-color-selection-2v h3,
#step-3e .cross-color-selection h3,
#step-7 .grid-color-selection h3 {
    margin: 0;
}

#step-3a .color-options,
#step-3b .color-options,
#step-3c .color-options,
#step-3d .color-options,
#step-3e .color-options,
#step-7 .color-options,
#step-8-obereck-color .color-options,
#step-8-addon-color .color-options {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    z-index: auto;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 40px;
    width: auto;
    max-width: calc(100vw - 18px);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    /* Beat legacy grid overrides */
    grid-template-columns: none !important;
}

/* Step 8 Farbwahl (Obereck + Zusatzform): bottom-centered circles in exactly 2 rows (6 per row) */
#step-8-obereck-color .color-options,
#step-8-addon-color .color-options {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    gap: 24px;
    width: auto;
    max-width: calc(100vw - 18px);
}

#step-3a .color-option-solid,
#step-8-obereck-color .color-option-obereck,
#step-8-addon-color .color-option-addon,
#step-3b .color-option-2h,
#step-3c .color-option-3,
#step-3d .color-option-2v,
#step-3e .color-option-cross,
#step-7 .color-option {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    border-radius: 9999px !important;
    border: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: none;
    transform: none;
    background-image: none !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Bubble styles moved to the selection wrapper to include the label */

/* Step 8 question: center the two choice tiles (Keine / Zusatzform) */
#step-8-question .stripe-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Selection markers: convert tiny points into larger circle badges */
#step-3b .color-option-2h .color-number,
#step-3c .color-option-3 .color-number,
#step-3d .color-option-2v .color-number,
#step-3e .color-option-cross .color-number,
#step-7 .color-option .color-number,
#step-8-addon-color .color-option-addon .color-number {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2pt !important;
    pointer-events: none !important;
}

#step-3b .color-option-2h .color-number .num,
#step-3c .color-option-3 .color-number .num,
#step-3d .color-option-2v .color-number .num,
#step-3e .color-option-cross .color-number .num,
#step-7 .color-option .color-number .num,
#step-8-addon-color .color-option-addon .color-number .num {
    width: 12pt;
    height: 12pt;
    border-radius: 9999px;
    background: #f4f4f4;
    border: 1pt solid #000;
    color: #000;
    font-size: 8pt;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Must be clickable: JS supports clearing a slot by clicking its number */
    pointer-events: auto !important;
    cursor: pointer;
    user-select: none;
}

#step-3b .color-option-2h:hover,
#step-3c .color-option-3:hover,
#step-3d .color-option-2v:hover,
#step-3e .color-option-cross:hover,
#step-7 .color-option:hover {
    transform: none;
    box-shadow: none;
}

/* Step 7: painted fields are clickable (SVG rects/polygons) */
#flag-preview-step-3e svg [data-idx],
#flag-preview-step-7 svg [data-idx] {
    cursor: pointer;
}

/* ============================================
   9a. 🎨 Cross Color Selection
   ============================================ */
.cross-color-selection {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

.cross-color-selection h3 {
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: bold;
}

.grid-color-selection h3 {
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: bold;
}

.color-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 900px;
    margin: 0 auto;
}

.color-option,
.color-option-cross {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f4f4f4;
}

.color-option:hover,
.color-option-cross:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.color-option.selected,
.color-option-cross.selected {
    border: 1pt solid #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.color-number {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 5px #000;
    display: none;
}

.color-option.selected .color-number,
.color-option-cross.selected .color-number {
    display: block;
}

/* ============================================
   10. 🎨 Solid Color Selection (Step 3a)
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

.solid-color-selection {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

.color-option-solid {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ============================================
   10.5 🎨 2-Stripe Horizontal Color Selection (Step 3b)
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

.stripe-color-selection-2h {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

.color-option-2h {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.color-option-2h .color-number {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    z-index: 10;
    pointer-events: auto;
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    display: none;
}

.color-option-2h.selected .color-number {
    display: block;
}

/* ============================================
   10.6 🎨 2-Stripe Vertical Color Selection (Step 3d)
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

.stripe-color-selection-2v {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

.color-option-2v {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.color-option-2v .color-number {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    z-index: 10;
    pointer-events: auto;
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    display: none;
}

.color-option-2v.selected .color-number {
    display: block;
}

/* ============================================
   10.7 🎨 3-Stripe Pattern Color Selection (Step 3c)
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

.stripe-color-selection-3 {
    margin: 20px auto;
    max-width: 800px;
    text-align: center;
}

.color-option-3 {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.color-option-3 .color-number {
    font-size: 36px;
    font-weight: bold;
    color: #000;
    z-index: 10;
    pointer-events: auto;
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
    display: none;
}

.color-number .num {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
}

.color-option-3.selected .color-number {
    display: block;
}

/* ============================================
   11. 🎨 3-Stripe Horizontal Proportions (Step 4c)
   🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨🎨
   ============================================ */

.proportion-options-3h {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 20px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.proportion-option-3h {
    cursor: pointer;
}

.proportion-preview-3h {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f4f4;
}

.proportion-option-3h.selected .proportion-preview-3h {
    border: 3px solid #000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   11a. ↗︎/↖︎ Diagonal Band Proportions (Step 4i/4j)
   ============================================ */
.diagonal-band-proportion-preview {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.diagonal-band-proportion-option.selected .diagonal-band-proportion-preview {
    border: 0;
    box-shadow: none;
}

/* ============================================
   11b. ↘︎/↙︎ Diagonal Division Proportions (Step 4k–4n)
   ============================================ */
.diagonal-division-proportion-preview {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.diagonal-division-proportion-option.selected .diagonal-division-proportion-preview {
    border: 0;
    box-shadow: none;
}

/* 3h Proportion Classes for Flag Previews */
.proportion-3h-1-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(33.33% - 0.5pt), #000000 calc(33.33% - 0.5pt), #000000 calc(33.33% + 0.5pt), transparent calc(33.33% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5pt), #000000 calc(66.66% - 0.5pt), #000000 calc(66.66% + 0.5pt), transparent calc(66.66% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-3-4-3 {
    background: 
        linear-gradient(to bottom, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-2-3-2 {
    background: 
        linear-gradient(to bottom, transparent calc(28.57% - 0.5pt), #000000 calc(28.57% - 0.5pt), #000000 calc(28.57% + 0.5pt), transparent calc(28.57% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(71.43% - 0.5pt), #000000 calc(71.43% - 0.5pt), #000000 calc(71.43% + 0.5pt), transparent calc(71.43% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-1-2-1 {
    background: 
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-1-3-1 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-2-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-2-1-2 {
    background: 
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        #f4f4f4;
}

.proportion-3h-1-8-1 {
    background: 
        linear-gradient(to bottom, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

/* 3-Stripe Vertical Proportions Styling */
.proportion-options-3v {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.proportion-preview-3v {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    background: #f4f4f4;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

.proportion-option-3v.selected {
    border: 3px solid #007aff;
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
}

/* 3v proportion classes with linear-gradients */
.proportion-3v-1-1-1 {
    background: 
        linear-gradient(to right, transparent calc(33.3333% - 0.5pt), #000000 calc(33.3333% - 0.5pt), #000000 calc(33.3333% + 0.5pt), transparent calc(33.3333% + 0.5pt)),
        linear-gradient(to right, transparent calc(66.6667% - 0.5pt), #000000 calc(66.6667% - 0.5pt), #000000 calc(66.6667% + 0.5pt), transparent calc(66.6667% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-3-4-3 {
    background: 
        linear-gradient(to right, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to right, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-2-3-2 {
    background: 
        linear-gradient(to right, transparent calc(28.5714% - 0.5pt), #000000 calc(28.5714% - 0.5pt), #000000 calc(28.5714% + 0.5pt), transparent calc(28.5714% + 0.5pt)),
        linear-gradient(to right, transparent calc(71.4286% - 0.5pt), #000000 calc(71.4286% - 0.5pt), #000000 calc(71.4286% + 0.5pt), transparent calc(71.4286% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-1-2-1 {
    background: 
        linear-gradient(to right, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-1-3-1 {
    background: 
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to right, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-2-1-1 {
    background: 
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        linear-gradient(to right, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-2-1-2 {
    background: 
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to right, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        #f4f4f4;
}

.proportion-3v-1-8-1 {
    background: 
        linear-gradient(to right, transparent calc(10% - 0.5pt), #000000 calc(10% - 0.5pt), #000000 calc(10% + 0.5pt), transparent calc(10% + 0.5pt)),
        linear-gradient(to right, transparent calc(90% - 0.5pt), #000000 calc(90% - 0.5pt), #000000 calc(90% + 0.5pt), transparent calc(90% + 0.5pt)),
        #f4f4f4;
}

/* 5-Stripe Horizontal Proportions Styling */
.proportion-options-5h {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.proportion-preview-5h {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    background: #f4f4f4;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.proportion-option-5h.selected {
    border: 3px solid #007aff;
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
}

/* 5h proportion classes with linear-gradients */
.proportion-5h-1-1-1-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(60% - 0.5pt), #000000 calc(60% - 0.5pt), #000000 calc(60% + 0.5pt), transparent calc(60% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-5h-2-1-4-1-2 {
    background: 
        linear-gradient(to bottom, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(30% - 0.5pt), #000000 calc(30% - 0.5pt), #000000 calc(30% + 0.5pt), transparent calc(30% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(70% - 0.5pt), #000000 calc(70% - 0.5pt), #000000 calc(70% + 0.5pt), transparent calc(70% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(80% - 0.5pt), #000000 calc(80% - 0.5pt), #000000 calc(80% + 0.5pt), transparent calc(80% + 0.5pt)),
        #f4f4f4;
}

.proportion-5h-3-5-16-5-3 {
    background: 
        linear-gradient(to bottom, transparent calc(9.375% - 0.5pt), #000000 calc(9.375% - 0.5pt), #000000 calc(9.375% + 0.5pt), transparent calc(9.375% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(90.625% - 0.5pt), #000000 calc(90.625% - 0.5pt), #000000 calc(90.625% + 0.5pt), transparent calc(90.625% + 0.5pt)),
        #f4f4f4;
}

.proportion-5h-1-1-2-1-1 {
    background: 
        linear-gradient(to bottom, transparent calc(16.6667% - 0.5pt), #000000 calc(16.6667% - 0.5pt), #000000 calc(16.6667% + 0.5pt), transparent calc(16.6667% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(33.3333% - 0.5pt), #000000 calc(33.3333% - 0.5pt), #000000 calc(33.3333% + 0.5pt), transparent calc(33.3333% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(66.6667% - 0.5pt), #000000 calc(66.6667% - 0.5pt), #000000 calc(66.6667% + 0.5pt), transparent calc(66.6667% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(83.3333% - 0.5pt), #000000 calc(83.3333% - 0.5pt), #000000 calc(83.3333% + 0.5pt), transparent calc(83.3333% + 0.5pt)),
        #f4f4f4;
}

.proportion-5h-3-1-8-1-3 {
    background: 
        linear-gradient(to bottom, transparent calc(18.75% - 0.5pt), #000000 calc(18.75% - 0.5pt), #000000 calc(18.75% + 0.5pt), transparent calc(18.75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(25% - 0.5pt), #000000 calc(25% - 0.5pt), #000000 calc(25% + 0.5pt), transparent calc(25% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(75% - 0.5pt), #000000 calc(75% - 0.5pt), #000000 calc(75% + 0.5pt), transparent calc(75% + 0.5pt)),
        linear-gradient(to bottom, transparent calc(81.25% - 0.5pt), #000000 calc(81.25% - 0.5pt), #000000 calc(81.25% + 0.5pt), transparent calc(81.25% + 0.5pt)),
        #f4f4f4;
}

/* 2-Stripe Vertical Proportions Styling */
.proportion-options-2v {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.proportion-preview-2v {
    width: 120px;
    height: 80px;
    border: 1pt solid #000;
    background: #f4f4f4;
    cursor: pointer;
    display: flex;
    flex-direction: row;
}

.proportion-option-2v.selected {
    border: 3px solid #007aff;
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
}

/* 2v proportion classes with linear-gradients */
.proportion-2v-1\:1 {
    background: 
        linear-gradient(to right, transparent calc(50% - 0.5pt), #000000 calc(50% - 0.5pt), #000000 calc(50% + 0.5pt), transparent calc(50% + 0.5pt)),
        #f4f4f4;
}

.proportion-2v-2\:3 {
    background: 
        linear-gradient(to right, transparent calc(40% - 0.5pt), #000000 calc(40% - 0.5pt), #000000 calc(40% + 0.5pt), transparent calc(40% + 0.5pt)),
        #f4f4f4;
}

.proportion-2v-1\:4 {
    background: 
        linear-gradient(to right, transparent calc(20% - 0.5pt), #000000 calc(20% - 0.5pt), #000000 calc(20% + 0.5pt), transparent calc(20% + 0.5pt)),
        #f4f4f4;
}