svg.knotskie {
    color-scheme: light dark;
    --color-1: light-dark(#2C3947, #E8EDF2);
    --color-2: light-dark(#547A95, #C2A56D);
    --color-3: light-dark(#C2A56D, #547A95);
    --color-4: light-dark(#E8EDF2, #2C3947);

    width: 100%;
    max-width: min(100vw, 75vh);
    max-height: min(100vw, 75vh);
    margin: 0 auto;
    display: block;

    polyline {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    polyline.puzzle {
        stroke: var(--color-1);
        stroke-width: 20px;
    }

    polyline.trace {
        --stretch: 1;
        stroke: var(--color-2);
        stroke-width: calc(4px * var(--stretch));
    }

    polyline.trace.hard {
        transition: stroke .5s;
        stroke: red;
    }

    circle.handle {
        fill: var(--color-2);
        stroke: color-mix(in srgb, var(--color-1) 50%, var(--color-2) 50%);
        stroke-width: 0;
        r: 0;
    }

    circle.handle.inactive {
        stroke-width: 18px;
        stroke-width: calc(18px / min(5in, 100vw) * 250px);
        r: 8px;
        r: calc(8px / min(5in, 100vw) * 250px);
        animation: knotskie-pulse 2s infinite ease-in-out;
    }

    .dot {
        r: 1;
        stroke: none;
        fill: var(--color-4);
    }

    .dot.inner, .dot.outer {
        fill: var(--color-2);
    }

    .outer {
        --color-2: var(--color-3);
    }

    path.ring {
        fill: none;
        stroke: color-mix(in srgb, var(--color-1) 50%, var(--color-4) 50%);
        stroke-width: 1px;
    }
}

@keyframes knotskie-pulse {
    0%, 100% {
        stroke-width: c18px;
        stroke-width: calc(18px / min(5in, 100vw) * 250px);
        r: 8px;
        r: calc(8px / min(5in, 100vw) * 250px);
    }

    50% {
        stroke-width: 8px;
        stroke-width: calc(8px / min(5in, 100vw) * 250px);
        r: 20px;
        r: calc(20px / min(5in, 100vw) * 250px);
    }
}