e
Star 1
Fork 1
Watch

once upon a time #1

Open 5fe8c65.tngl.sh
Open opened by 5fe8c65.tngl.sh

I created a repo, "permadeath.com/vibescrobble", which I did some work in. I decided I needed to split the repo into two; I took the existing repo and renamed it "permadeath.com/didbot" and then tried to create a new repo called "permadeath.com/vibescrobble".

Unfortunately, this gives XRPC ERROR 409: Conflict: repository with that record key already exists for this owner. It seems that the knot record wasn't deleted when the PDS record was, and that the delete XRPC for the knot requires the DID (not the rkey).

After >24h the knot is still giving this issue. I think the only way to recover from this situation would be to move knots, or to move "permadeath.com/didbot" back to "permadeath.com/vibescrobble" so the DID aligns, delete it, and then recreate both. But it would really be preferable to have a self-service recovery path...

yeah ok why not #

yeaaaaaaaah

5fe8c65.tngl.sh

so yeah whatever

5fe8c65.tngl.sh

yeah

5fe8c65.tngl.sh

crazy

5fe8c65.tngl.sh

and a lot more

5fe8c65.tngl.sh

and a lot more again

5fe8c65.tngl.sh

it just keeps going

5fe8c65.tngl.sh

when will it ever stop, you might ask?

060c6eb.tngl.sh

i'm asking

5fe8c65.tngl.sh

i don't know

5fe8c65.tngl.sh

this is some longgggggggggggg code

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    @font-face {
        font-family: "InterVariable";
        src: url("/static/fonts/InterVariable.woff2") format("woff2-variations");
        font-weight: 100 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "InterVariable";
        src: url("/static/fonts/InterVariable-Italic.woff2")
            format("woff2-variations");
        font-weight: 100 600;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: "InterVariable";
        src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2");
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "InterVariable";
        src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2");
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: "IBMPlexMono";
        src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "IBMPlexMono";
        src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2");
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: "IBMPlexMono";
        src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2");
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "IBMPlexMono";
        src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2");
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }

    ::selection {
        @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white;
    }

    @layer base {
        html {
            font-size: 14px;
            scrollbar-gutter: stable;
        }
        @supports (font-variation-settings: normal) {
            html {
                font-feature-settings:
                    "kern" 1,
                    "liga" 1,
                    "cv05" 1,
                    "tnum" 1;
            }
        }

        a {
            @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
        }

        label {
            @apply block text-gray-900 text-sm py-2 dark:text-gray-100;
        }

        input,
        textarea {
            @apply block rounded p-3
            bg-gray-50 dark:bg-gray-800 dark:text-white
            border border-gray-300 dark:border-gray-600
            focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
        }

        input[type="checkbox"] {
            @apply appearance-none size-4 p-0 rounded
            bg-transparent border border-gray-200
            hover:bg-gray-100
            checked:bg-gray-900 checked:border-transparent
            checked:hover:bg-gray-800
            indeterminate:bg-gray-900 indeterminate:border-transparent
            disabled:cursor-not-allowed disabled:bg-gray-100 disabled:border-gray-200
            disabled:checked:bg-gray-300 disabled:checked:border-transparent
            disabled:indeterminate:bg-gray-100 disabled:indeterminate:border-gray-200
            dark:border-gray-600
            dark:hover:bg-gray-700
            dark:checked:bg-gray-100
            dark:checked:hover:bg-gray-200
            dark:checked:border-gray-400
            dark:indeterminate:bg-gray-100 dark:indeterminate:border-transparent
            dark:disabled:bg-gray-700 dark:disabled:border-gray-600
            dark:disabled:checked:bg-gray-500 dark:disabled:checked:border-transparent
            dark:disabled:indeterminate:bg-gray-700 dark:disabled:indeterminate:border-gray-600
            focus:outline-none focus:ring-1 focus:ring-gray-400 dark:focus:ring-gray-500;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 12px;
        }
        input[type="checkbox"]:checked {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
        }
        input[type="checkbox"]:indeterminate {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>");
        }
        input[type="checkbox"]:disabled:indeterminate {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(156,163,175)' stroke-width='1.5' stroke-linecap='round'/></svg>");
        }
        @media (prefers-color-scheme: dark) {
            input[type="checkbox"]:checked {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M10 3 4.5 8.5 2 6' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            }
            input[type="checkbox"]:indeterminate {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(17,24,39)' stroke-width='1.5' stroke-linecap='round'/></svg>");
            }
            input[type="checkbox"]:disabled:indeterminate {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2.5 6h7' stroke='rgb(107,114,128)' stroke-width='1.5' stroke-linecap='round'/></svg>");
            }
        }

        input[type="radio"] {
            @apply appearance-none size-4 p-0 rounded-full bg-transparent border

            border-gray-400 hover:border-gray-900
            hover:bg-gray-200

            disabled:cursor-not-allowed
            disabled:border-gray-300
            disabled:checked:border-gray-300
            disabled:hover:bg-inherit

            dark:border-gray-400 dark:hover:border-gray-100

            dark:hover:bg-gray-600

            dark:checked:border-gray-400

            dark:disabled:border-gray-500
            dark:disabled:checked:border-gray-500

            focus:outline-none focus:ring-1
            focus:ring-gray-400 dark:focus:ring-gray-500;

            background-position: center;
            background-repeat: no-repeat;
            background-size: 8px;
        }
        input[type="radio"]:checked {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(17,24,39)'/></svg>");
        }
        input[type="radio"]:disabled:checked {
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(209,213,219)'/></svg>");
        }
        @media (prefers-color-scheme: dark) {
            input[type="radio"]:checked {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(243,244,246)'/></svg>");
            }
            input[type="radio"]:disabled:checked {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5' fill='rgb(107,114,128)'/></svg>");
            }
        }

        details summary::-webkit-details-marker {
            display: none;
        }

        code {
            @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white;
        }
    }

    @layer components {
        .btn {
            @apply relative z-10 inline-flex overflow-hidden items-center justify-center
          min-h-[32px] px-2 py-[6px]
          rounded border border-gray-200 dark:border-gray-700
          bg-white dark:bg-gray-800
          text-sm text-gray-900 dark:text-gray-100
          transition-colors duration-150 ease-in-out
          outline-transparent cursor-pointer
          focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600;

            @apply before:absolute before:inset-0 before:-z-10 before:block before:rounded-sm before:content-['']
          before:transition-all before:duration-150 before:ease-in-out
          before:shadow-[inset_0_-2px_0_0_theme(colors.gray.200)] dark:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900)];

            @apply hover:bg-gray-50 dark:hover:bg-gray-700
          hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.300)] dark:hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.800)]
          active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.200)] dark:active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900)]
          disabled:cursor-not-allowed disabled:opacity-50;
        }

        .btn-flat {
            @apply inline-flex items-center justify-center
          min-h-7 px-2 py-[6px]
          rounded
          text-sm text-gray-900 dark:text-gray-100 cursor-pointer
          transition-colors duration-150 ease-in-out
          focus:outline-none
          focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400
          hover:bg-gray-100
          dark:hover:text-gray-100 dark:hover:bg-gray-700
          disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-inherit disabled:hover:bg-inherit;
        }

        .btn-create {
            @apply btn text-white
          bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800
          border border-green-700 hover:border-green-800
          focus-visible:outline-green-500
          disabled:bg-green-400 dark:disabled:bg-green-600
          before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
          hover:before:shadow-[inset_0_-2px_0_0_theme(colors.gray.900/25%)]
          active:before:shadow-[inset_0_2px_2px_0_theme(colors.gray.900/50%)];
        }

        .btn-create-flat {
            @apply btn-create
        before:shadow-none
        hover:before:shadow-none
        active:before:shadow-none;
        }

        .btn-cancel {
            @apply btn text-white
          bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800
          border border-red-700 hover:border-red-800
          focus-visible:outline-red-500
          disabled:bg-red-400 dark:disabled:bg-red-600;
        }

        .btn-cancel-flat {
            @apply btn-cancel
        before:shadow-none
        hover:before:shadow-none
        active:before:shadow-none;
        }

        .btn-group {
            @apply inline-flex items-stretch
          max-h-[32px]
          rounded border border-gray-200 dark:border-gray-700
          divide-x divide-gray-200 dark:divide-gray-700
          overflow-hidden;
        }

        .btn-group-item {
            @apply btn-flat min-h-[30px] gap-1.5
          bg-gray-50 dark:bg-gray-900
          rounded-none border-y-0
          no-underline hover:no-underline
          hover:text-gray-600 dark:hover:text-gray-400;
        }

        .btn-group-item.active {
            @apply btn min-h-[30px] rounded-none border-y-0
          before:border-none before:rounded-none before:bg-inherit;

            &:first-child {
                @apply border-none before:rounded-l-sm;
            }
            &:last-child {
                @apply border-y-0 border-r-0 border-l before:rounded-r-sm;
            }
        }

        .prose {
            overflow-wrap: anywhere;
        }

        .prose td,
        .prose th {
            overflow-wrap: normal;
        }

        .prose hr {
            @apply my-2;
        }

        .prose li:has(input) {
            @apply list-none;
        }

        .prose ul:has(input) {
            @apply pl-2;
        }

        .prose .heading .anchor {
            @apply no-underline mx-2 opacity-0;
        }

        .prose .heading:hover .anchor {
            @apply opacity-70;
        }

        .prose .heading .anchor:hover {
            @apply opacity-70;
        }

        .prose h1:target,
        .prose h2:target,
        .prose h3:target,
        .prose h4:target,
        .prose h5:target,
        .prose h6:target {
            @apply bg-yellow-200/30 dark:bg-yellow-600/30;
        }

        .prose a.footnote-backref {
            @apply no-underline;
        }

        .prose a.mention {
            @apply no-underline hover:underline font-bold;
        }

        .prose li {
            @apply my-0 py-0;
        }

        .prose ul,
        .prose ol {
            @apply my-1 py-0;
        }

        .prose img {
            display: inline;
            margin: 0;
            vertical-align: middle;
        }

        .prose input {
            @apply inline-block my-0 mt-1 mx-1;
        }

        /* Mermaid diagrams */
        .prose pre.mermaid {
            @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0;
        }

        /* Code block collapse */
        .code-block-wrapper {
            @apply flex flex-col max-h-[600px] overflow-hidden border border-gray-200 rounded-md dark:border-gray-700;
        }
        .code-block-wrapper:has(.code-block-expand:checked) {
            @apply max-h-none overflow-visible;
        }
        .code-block-wrapper:has(.code-block-expand:checked) .code-block-pre-container {
            overflow-y: visible;
        }
        .code-block-pre-container {
            @apply overflow-y-hidden flex-1 bg-gray-50 dark:bg-gray-900;
        }
        .code-block-actions {
            @apply flex items-center justify-between h-12 border-t border-gray-200 bg-white px-3 shrink-0 dark:border-gray-700 dark:bg-gray-800;
        }
        .code-block-wrapper :where(pre) {
            @apply m-0 border-none rounded-none;
        }
        @media (prefers-color-scheme: dark) {
            .code-block-wrapper :where(pre) {
                @apply bg-transparent;
            }
        }

        /* Base callout */
        details[data-callout] {
            @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;
        }

        details[data-callout] > summary {
            @apply font-bold cursor-pointer mb-1;
        }

        details[data-callout] > .callout-content {
            @apply text-sm leading-snug;
        }

        /* Note (blue) */
        details[data-callout="note" i] {
            @apply border-blue-400 dark:border-blue-500;
        }
        details[data-callout="note" i] > summary {
            @apply text-blue-700 dark:text-blue-400;
        }

        /* Important (purple) */
        details[data-callout="important" i] {
            @apply border-purple-400 dark:border-purple-500;
        }
        details[data-callout="important" i] > summary {
            @apply text-purple-700 dark:text-purple-400;
        }

        /* Warning (yellow) */
        details[data-callout="warning" i] {
            @apply border-yellow-400 dark:border-yellow-500;
        }
        details[data-callout="warning" i] > summary {
            @apply text-yellow-700 dark:text-yellow-400;
        }

        /* Caution (red) */
        details[data-callout="caution" i] {
            @apply border-red-400 dark:border-red-500;
        }
        details[data-callout="caution" i] > summary {
            @apply text-red-700 dark:text-red-400;
        }

        /* Tip (green) */
        details[data-callout="tip" i] {
            @apply border-green-400 dark:border-green-500;
        }
        details[data-callout="tip" i] > summary {
            @apply text-green-700 dark:text-green-400;
        }

        /* Optional: hide the disclosure arrow like GitHub */
        details[data-callout] > summary::-webkit-details-marker {
            display: none;
        }
    }
    @layer utilities {
        .error {
            @apply py-1 text-red-400 dark:text-red-300;
        }
        .success {
            @apply py-1 text-gray-900 dark:text-gray-100;
        }

        @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .animate-marquee {
            animation: scroll 60s linear infinite;
        }

        .animate-marquee:hover {
            animation-play-state: paused;
        }

        @media (prefers-reduced-motion: reduce) {
            .animate-marquee {
                animation: none;
                transform: none;
            }
        }

        @keyframes progress {
            from {
                width: 0%;
            }
            to {
                width: 100%;
            }
        }

        .animate-progress {
            animation: progress 10s linear forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .animate-fadein {
            animation: fadeIn 0.25s ease-in forwards;
        }

        .animate-fadeout {
            animation: fadeOut 0.25s ease-out forwards;
        }
    }
}

/* Background */
.bg {
    color: #4c4f69;
    background-color: #eff1f5;
}
/* PreWrapper */
.chroma {
    color: #4c4f69;
}
/* Error */
.chroma .err {
    color: #d20f39;
}
/* LineLink */
.chroma .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
}
/* LineTableTD */
.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineTable */
.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineHighlight */
.chroma .hl {
    @apply bg-amber-400/30 dark:bg-amber-500/20;
}

.line-quote-hl,
.line-range-hl {
    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
}

:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] {
    @apply !bg-yellow-200/30 dark:!bg-yellow-700/30;
}

:is(.line-quote-hl, .line-range-hl) > .min-w-\[3\.5rem\] a {
    @apply !text-black dark:!text-white;
}

/* LineNumbersTable */
.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #8c8fa1;
}
/* LineNumbers */
.chroma .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #8c8fa1;
}
/* Line */
.chroma .line {
    display: flex;
}
/* Keyword */
.chroma .k {
    color: #8839ef;
}
/* KeywordConstant */
.chroma .kc {
    color: #fe640b;
}
/* KeywordDeclaration */
.chroma .kd {
    color: #d20f39;
}
/* KeywordNamespace */
.chroma .kn {
    color: #179299;
}
/* KeywordPseudo */
.chroma .kp {
    color: #8839ef;
}
/* KeywordReserved */
.chroma .kr {
    color: #8839ef;
}
/* KeywordType */
.chroma .kt {
    color: #d20f39;
}
/* NameAttribute */
.chroma .na {
    color: #1e66f5;
}
/* NameBuiltin */
.chroma .nb {
    color: #04a5e5;
}
/* NameBuiltinPseudo */
.chroma .bp {
    color: #04a5e5;
}
/* NameClass */
.chroma .nc {
    color: #df8e1d;
}
/* NameConstant */
.chroma .no {
    color: #df8e1d;
}
/* NameDecorator */
.chroma .nd {
    color: #1e66f5;
    font-weight: bold;
}
/* NameEntity */
.chroma .ni {
    color: #179299;
}
/* NameException */
.chroma .ne {
    color: #fe640b;
}
/* NameFunction */
.chroma .nf {
    color: #1e66f5;
}
/* NameFunctionMagic */
.chroma .fm {
    color: #1e66f5;
}
/* NameLabel */
.chroma .nl {
    color: #04a5e5;
}
/* NameNamespace */
.chroma .nn {
    color: #fe640b;
}
/* NameProperty */
.chroma .py {
    color: #fe640b;
}
/* NameTag */
.chroma .nt {
    color: #8839ef;
}
/* NameVariable */
.chroma .nv {
    color: #dc8a78;
}
/* NameVariableClass */
.chroma .vc {
    color: #dc8a78;
}
/* NameVariableGlobal */
.chroma .vg {
    color: #dc8a78;
}
/* NameVariableInstance */
.chroma .vi {
    color: #dc8a78;
}
/* NameVariableMagic */
.chroma .vm {
    color: #dc8a78;
}
/* LiteralString */
.chroma .s {
    color: #40a02b;
}
/* LiteralStringAffix */
.chroma .sa {
    color: #d20f39;
}
/* LiteralStringBacktick */
.chroma .sb {
    color: #40a02b;
}
/* LiteralStringChar */
.chroma .sc {
    color: #40a02b;
}
/* LiteralStringDelimiter */
.chroma .dl {
    color: #1e66f5;
}
/* LiteralStringDoc */
.chroma .sd {
    color: #9ca0b0;
}
/* LiteralStringDouble */
.chroma .s2 {
    color: #40a02b;
}
/* LiteralStringEscape */
.chroma .se {
    color: #1e66f5;
}
/* LiteralStringHeredoc */
.chroma .sh {
    color: #9ca0b0;
}
/* LiteralStringInterpol */
.chroma .si {
    color: #40a02b;
}
/* LiteralStringOther */
.chroma .sx {
    color: #40a02b;
}
/* LiteralStringRegex */
.chroma .sr {
    color: #179299;
}
/* LiteralStringSingle */
.chroma .s1 {
    color: #40a02b;
}
/* LiteralStringSymbol */
.chroma .ss {
    color: #40a02b;
}
/* LiteralNumber */
.chroma .m {
    color: #fe640b;
}
/* LiteralNumberBin */
.chroma .mb {
    color: #fe640b;
}
/* LiteralNumberFloat */
.chroma .mf {
    color: #fe640b;
}
/* LiteralNumberHex */
.chroma .mh {
    color: #fe640b;
}
/* LiteralNumberInteger */
.chroma .mi {
    color: #fe640b;
}
/* LiteralNumberIntegerLong */
.chroma .il {
    color: #fe640b;
}
/* LiteralNumberOct */
.chroma .mo {
    color: #fe640b;
}
/* Operator */
.chroma .o {
    color: #04a5e5;
    font-weight: bold;
}
/* OperatorWord */
.chroma .ow {
    color: #04a5e5;
    font-weight: bold;
}
/* Comment */
.chroma .c {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentPreproc */
.chroma .cp {
    color: #9ca0b0;
    font-style: italic;
}
/* CommentPreprocFile */
.chroma .cpf {
    color: #9ca0b0;
    font-weight: bold;
    font-style: italic;
}
/* GenericDeleted */
.chroma .gd {
    color: #d20f39;
    background-color: oklch(93.6% 0.032 17.717);
}
/* GenericEmph */
.chroma .ge {
    font-style: italic;
}
/* GenericError */
.chroma .gr {
    color: #d20f39;
}
/* GenericHeading */
.chroma .gh {
    color: #fe640b;
    font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
    color: #40a02b;
    background-color: oklch(96.2% 0.044 156.743);
}
/* GenericStrong */
.chroma .gs {
    font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
    color: #fe640b;
    font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
    color: #d20f39;
}
/* GenericUnderline */
.chroma .gl {
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    /* Background */
    .bg {
        color: #cad3f5;
        background-color: #24273a;
    }
    /* PreWrapper */
    .chroma {
        color: #cad3f5;
    }
    /* Error */
    .chroma .err {
        color: #ed8796;
    }
    /* LineLink */
    .chroma .lnlinks {
        outline: none;
        text-decoration: none;
        color: inherit;
    }
    /* LineTableTD */
    .chroma .lntd {
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: 0;
    }
    /* LineTable */
    .chroma .lntable {
        border-spacing: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }
    /* LineHighlight */
    .chroma .hl {
        background-color: #494d64;
    }
    /* LineNumbersTable */
    .chroma .lnt {
        white-space: pre;
        -webkit-user-select: none;
        user-select: none;
        margin-right: 0.4em;
        padding: 0 0.4em 0 0.4em;
        color: #8087a2;
    }
    /* LineNumbers */
    .chroma .ln {
        white-space: pre;
        -webkit-user-select: none;
        user-select: none;
        margin-right: 0.4em;
        padding: 0 0.4em 0 0.4em;
        color: #8087a2;
    }
    /* Line */
    .chroma .line {
        display: flex;
    }
    /* Keyword */
    .chroma .k {
        color: #c6a0f6;
    }
    /* KeywordConstant */
    .chroma .kc {
        color: #f5a97f;
    }
    /* KeywordDeclaration */
    .chroma .kd {
        color: #ed8796;
    }
    /* KeywordNamespace */
    .chroma .kn {
        color: #8bd5ca;
    }
    /* KeywordPseudo */
    .chroma .kp {
        color: #c6a0f6;
    }
    /* KeywordReserved */
    .chroma .kr {
        color: #c6a0f6;
    }
    /* KeywordType */
    .chroma .kt {
        color: #ed8796;
    }
    /* NameAttribute */
    .chroma .na {
        color: #8aadf4;
    }
    /* NameBuiltin */
    .chroma .nb {
        color: #91d7e3;
    }
    /* NameBuiltinPseudo */
    .chroma .bp {
        color: #91d7e3;
    }
    /* NameClass */
    .chroma .nc {
        color: #eed49f;
    }
    /* NameConstant */
    .chroma .no {
        color: #eed49f;
    }
    /* NameDecorator */
    .chroma .nd {
        color: #8aadf4;
        font-weight: bold;
    }
    /* NameEntity */
    .chroma .ni {
        color: #8bd5ca;
    }
    /* NameException */
    .chroma .ne {
        color: #f5a97f;
    }
    /* NameFunction */
    .chroma .nf {
        color: #8aadf4;
    }
    /* NameFunctionMagic */
    .chroma .fm {
        color: #8aadf4;
    }
    /* NameLabel */
    .chroma .nl {
        color: #91d7e3;
    }
    /* NameNamespace */
    .chroma .nn {
        color: #f5a97f;
    }
    /* NameProperty */
    .chroma .py {
        color: #f5a97f;
    }
    /* NameTag */
    .chroma .nt {
        color: #c6a0f6;
    }
    /* NameVariable */
    .chroma .nv {
        color: #f4dbd6;
    }
    /* NameVariableClass */
    .chroma .vc {
        color: #f4dbd6;
    }
    /* NameVariableGlobal */
    .chroma .vg {
        color: #f4dbd6;
    }
    /* NameVariableInstance */
    .chroma .vi {
        color: #f4dbd6;
    }
    /* NameVariableMagic */
    .chroma .vm {
        color: #f4dbd6;
    }
    /* LiteralString */
    .chroma .s {
        color: #a6da95;
    }
    /* LiteralStringAffix */
    .chroma .sa {
        color: #ed8796;
    }
    /* LiteralStringBacktick */
    .chroma .sb {
        color: #a6da95;
    }
    /* LiteralStringChar */
    .chroma .sc {
        color: #a6da95;
    }
    /* LiteralStringDelimiter */
    .chroma .dl {
        color: #8aadf4;
    }
    /* LiteralStringDoc */
    .chroma .sd {
        color: #6e738d;
    }
    /* LiteralStringDouble */
    .chroma .s2 {
        color: #a6da95;
    }
    /* LiteralStringEscape */
    .chroma .se {
        color: #8aadf4;
    }
    /* LiteralStringHeredoc */
    .chroma .sh {
        color: #6e738d;
    }
    /* LiteralStringInterpol */
    .chroma .si {
        color: #a6da95;
    }
    /* LiteralStringOther */
    .chroma .sx {
        color: #a6da95;
    }
    /* LiteralStringRegex */
    .chroma .sr {
        color: #8bd5ca;
    }
    /* LiteralStringSingle */
    .chroma .s1 {
        color: #a6da95;
    }
    /* LiteralStringSymbol */
    .chroma .ss {
        color: #a6da95;
    }
    /* LiteralNumber */
    .chroma .m {
        color: #f5a97f;
    }
    /* LiteralNumberBin */
    .chroma .mb {
        color: #f5a97f;
    }
    /* LiteralNumberFloat */
    .chroma .mf {
        color: #f5a97f;
    }
    /* LiteralNumberHex */
    .chroma .mh {
        color: #f5a97f;
    }
    /* LiteralNumberInteger */
    .chroma .mi {
        color: #f5a97f;
    }
    /* LiteralNumberIntegerLong */
    .chroma .il {
        color: #f5a97f;
    }
    /* LiteralNumberOct */
    .chroma .mo {
        color: #f5a97f;
    }
    /* Operator */
    .chroma .o {
        color: #91d7e3;
        font-weight: bold;
    }
    /* OperatorWord */
    .chroma .ow {
        color: #91d7e3;
        font-weight: bold;
    }
    /* Comment */
    .chroma .c {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentHashbang */
    .chroma .ch {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentMultiline */
    .chroma .cm {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentSingle */
    .chroma .c1 {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentSpecial */
    .chroma .cs {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentPreproc */
    .chroma .cp {
        color: #6e738d;
        font-style: italic;
    }
    /* CommentPreprocFile */
    .chroma .cpf {
        color: #6e738d;
        font-weight: bold;
        font-style: italic;
    }
    /* GenericDeleted */
    .chroma .gd {
        color: #ed8796;
        background-color: oklch(44.4% 0.177 26.899 / 0.5);
    }
    /* GenericEmph */
    .chroma .ge {
        font-style: italic;
    }
    /* GenericError */
    .chroma .gr {
        color: #ed8796;
    }
    /* GenericHeading */
    .chroma .gh {
        color: #f5a97f;
        font-weight: bold;
    }
    /* GenericInserted */
    .chroma .gi {
        color: #a6da95;
        background-color: oklch(44.8% 0.119 151.328 / 0.5);
    }
    /* GenericStrong */
    .chroma .gs {
        font-weight: bold;
    }
    /* GenericSubheading */
    .chroma .gu {
        color: #f5a97f;
        font-weight: bold;
    }
    /* GenericTraceback */
    .chroma .gt {
        color: #ed8796;
    }
    /* GenericUnderline */
    .chroma .gl {
        text-decoration: underline;
    }
}

actor-typeahead {
    --color-background: #ffffff;
    --color-border: #d1d5db;
    --color-shadow: #000000;
    --color-hover: #f9fafb;
    --color-avatar-fallback: #e5e7eb;
    --radius: 0;
    --padding-menu: 0rem;
    z-index: 1000;
}

actor-typeahead::part(handle) {
    color: #111827;
}

actor-typeahead::part(menu) {
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
    actor-typeahead {
        --color-background: #1f2937;
        --color-border: #4b5563;
        --color-shadow: #000000;
        --color-hover: #374151;
        --color-avatar-fallback: #4b5563;
    }

    actor-typeahead::part(handle) {
        color: #f9fafb;
    }
}

@layer utilities {
    .hit-area {
        position: relative;
    }

    .hit-area::before {
        content: "";
        position: absolute;
        top: var(--hit-area-t, 0px);
        right: var(--hit-area-r, 0px);
        bottom: var(--hit-area-b, 0px);
        left: var(--hit-area-l, 0px);
        pointer-events: inherit;
    }

    .hit-area-debug {
        position: relative;
    }

    .hit-area-debug::before {
        content: "";
        position: absolute;
        top: var(--hit-area-t, 0px);
        right: var(--hit-area-r, 0px);
        bottom: var(--hit-area-b, 0px);
        left: var(--hit-area-l, 0px);
        pointer-events: inherit;
        border: 1px dashed #3b82f6;
        background-color: rgba(59, 130, 246, 0.1);
    }

    .hit-area-debug:hover::before {
        border-color: #22c55e;
        background-color: rgba(34, 197, 94, 0.1);
    }

    .hit-area-1 {
        --hit-area-t: -0.25rem;
        --hit-area-r: -0.25rem;
        --hit-area-b: -0.25rem;
        --hit-area-l: -0.25rem;
    }
    .hit-area-2 {
        --hit-area-t: -0.5rem;
        --hit-area-r: -0.5rem;
        --hit-area-b: -0.5rem;
        --hit-area-l: -0.5rem;
    }
    .hit-area-4 {
        --hit-area-t: -1rem;
        --hit-area-r: -1rem;
        --hit-area-b: -1rem;
        --hit-area-l: -1rem;
    }
    .hit-area-6 {
        --hit-area-t: -1.5rem;
        --hit-area-r: -1.5rem;
        --hit-area-b: -1.5rem;
        --hit-area-l: -1.5rem;
    }
    .hit-area-8 {
        --hit-area-t: -2rem;
        --hit-area-r: -2rem;
        --hit-area-b: -2rem;
        --hit-area-l: -2rem;
    }
    .hit-area-10 {
        --hit-area-t: -2.5rem;
        --hit-area-r: -2.5rem;
        --hit-area-b: -2.5rem;
        --hit-area-l: -2.5rem;
    }
    .hit-area-12 {
        --hit-area-t: -3rem;
        --hit-area-r: -3rem;
        --hit-area-b: -3rem;
        --hit-area-l: -3rem;
    }

    .hit-area-l-1 {
        --hit-area-l: -0.25rem;
    }
    .hit-area-l-2 {
        --hit-area-l: -0.5rem;
    }
    .hit-area-l-4 {
        --hit-area-l: -1rem;
    }
    .hit-area-l-6 {
        --hit-area-l: -1.5rem;
    }
    .hit-area-l-8 {
        --hit-area-l: -2rem;
    }
    .hit-area-l-10 {
        --hit-area-l: -2.5rem;
    }
    .hit-area-l-12 {
        --hit-area-l: -3rem;
    }

    .hit-area-r-1 {
        --hit-area-r: -0.25rem;
    }
    .hit-area-r-2 {
        --hit-area-r: -0.5rem;
    }
    .hit-area-r-4 {
        --hit-area-r: -1rem;
    }
    .hit-area-r-6 {
        --hit-area-r: -1.5rem;
    }
    .hit-area-r-8 {
        --hit-area-r: -2rem;
    }
    .hit-area-r-10 {
        --hit-area-r: -2.5rem;
    }
    .hit-area-r-12 {
        --hit-area-r: -3rem;
    }

    .hit-area-t-1 {
        --hit-area-t: -0.25rem;
    }
    .hit-area-t-2 {
        --hit-area-t: -0.5rem;
    }
    .hit-area-t-4 {
        --hit-area-t: -1rem;
    }
    .hit-area-t-6 {
        --hit-area-t: -1.5rem;
    }
    .hit-area-t-8 {
        --hit-area-t: -2rem;
    }
    .hit-area-t-10 {
        --hit-area-t: -2.5rem;
    }
    .hit-area-t-12 {
        --hit-area-t: -3rem;
    }

    .hit-area-b-1 {
        --hit-area-b: -0.25rem;
    }
    .hit-area-b-2 {
        --hit-area-b: -0.5rem;
    }
    .hit-area-b-4 {
        --hit-area-b: -1rem;
    }
    .hit-area-b-6 {
        --hit-area-b: -1.5rem;
    }
    .hit-area-b-8 {
        --hit-area-b: -2rem;
    }
    .hit-area-b-10 {
        --hit-area-b: -2.5rem;
    }
    .hit-area-b-12 {
        --hit-area-b: -3rem;
    }

    .hit-area-x-1 {
        --hit-area-l: -0.25rem;
        --hit-area-r: -0.25rem;
    }
    .hit-area-x-2 {
        --hit-area-l: -0.5rem;
        --hit-area-r: -0.5rem;
    }
    .hit-area-x-4 {
        --hit-area-l: -1rem;
        --hit-area-r: -1rem;
    }
    .hit-area-x-6 {
        --hit-area-l: -1.5rem;
        --hit-area-r: -1.5rem;
    }
    .hit-area-x-8 {
        --hit-area-l: -2rem;
        --hit-area-r: -2rem;
    }
    .hit-area-x-10 {
        --hit-area-l: -2.5rem;
        --hit-area-r: -2.5rem;
    }
    .hit-area-x-12 {
        --hit-area-l: -3rem;
        --hit-area-r: -3rem;
    }

    .hit-area-y-1 {
        --hit-area-t: -0.25rem;
        --hit-area-b: -0.25rem;
    }
    .hit-area-y-2 {
        --hit-area-t: -0.5rem;
        --hit-area-b: -0.5rem;
    }
    .hit-area-y-4 {
        --hit-area-t: -1rem;
        --hit-area-b: -1rem;
    }
    .hit-area-y-6 {
        --hit-area-t: -1.5rem;
        --hit-area-b: -1.5rem;
    }
    .hit-area-y-8 {
        --hit-area-t: -2rem;
        --hit-area-b: -2rem;
    }
    .hit-area-y-10 {
        --hit-area-t: -2.5rem;
        --hit-area-b: -2.5rem;
    }
    .hit-area-y-12 {
        --hit-area-t: -3rem;
        --hit-area-b: -3rem;
    }

    /* terminal-to-html: catpuccin colors */
    .term-fg30 {
        color: #6c6f85;
    } /* black */
    .term-fg31 {
        color: #d20f39;
    } /* red */
    .term-fg32 {
        color: #40a02b;
    } /* green */
    .term-fg33 {
        color: #df8e1d;
    } /* yellow */
    .term-fg34 {
        color: #1e66f5;
    } /* blue */
    .term-fg35 {
        color: #8839ef;
    } /* magenta */
    .term-fg36 {
        color: #179299;
    } /* cyan */
    .term-fg37 {
        color: #4c4f69;
    } /* white */
    .term-fgi90 {
        color: #8c8fa1;
    } /* bright-black */
    .term-fgi91 {
        color: #e64553;
    } /* bright-red */
    .term-fgi92 {
        color: #40a02b;
    } /* bright-green */
    .term-fgi93 {
        color: #e5c890;
    } /* bright-yellow */
    .term-fgi94 {
        color: #209fb5;
    } /* bright-blue */
    .term-fgi95 {
        color: #ea76cb;
    } /* bright-magenta */
    .term-fgi96 {
        color: #04a5e5;
    } /* bright-cyan */
    .term-fgi97 {
        color: #bcc0cc;
    } /* bright-white */
    .term-bg40 {
        background-color: #6c6f85;
    } /* black */
    .term-bg41 {
        background-color: #d20f39;
    } /* red */
    .term-bg42 {
        background-color: #40a02b;
    } /* green */
    .term-bg43 {
        background-color: #df8e1d;
    } /* yellow */
    .term-bg44 {
        background-color: #1e66f5;
    } /* blue */
    .term-bg45 {
        background-color: #8839ef;
    } /* magenta */
    .term-bg46 {
        background-color: #179299;
    } /* cyan */
    .term-bg47 {
        background-color: #dce0e8;
    } /* white */
    .term-fg1 {
        @apply font-bold;
    }
    .term-fg2 {
        @apply opacity-60;
    }
    .term-fg3 {
        @apply italic;
    }
    .term-fg4 {
        @apply underline;
    }
    .term-fg9 {
        @apply line-through;
    }

    @media (prefers-color-scheme: dark) {
        .term-fg30 {
            color: #a5adcb;
        } /* black */
        .term-fg31 {
            color: #ed8796;
        } /* red */
        .term-fg32 {
            color: #a6da95;
        } /* green */
        .term-fg33 {
            color: #eed49f;
        } /* yellow */
        .term-fg34 {
            color: #8aadf4;
        } /* blue */
        .term-fg35 {
            color: #c6a0f6;
        } /* magenta */
        .term-fg36 {
            color: #8bd5ca;
        } /* cyan */
        .term-fg37 {
            color: #cad3f5;
        } /* white */
        .term-fgi90 {
            color: #8087a2;
        } /* bright-black */
        .term-fgi91 {
            color: #f5bde6;
        } /* bright-red */
        .term-fgi92 {
            color: #a6da95;
        } /* bright-green */
        .term-fgi93 {
            color: #f5a97f;
        } /* bright-yellow */
        .term-fgi94 {
            color: #7dc4e4;
        } /* bright-blue */
        .term-fgi95 {
            color: #f4dbd6;
        } /* bright-magenta */
        .term-fgi96 {
            color: #91d7e3;
        } /* bright-cyan */
        .term-fgi97 {
            color: #f0c6c6;
        } /* bright-white */
        .term-bg40 {
            background-color: #a5adcb;
        } /* black */
        .term-bg41 {
            background-color: #ed8796;
        } /* red */
        .term-bg42 {
            background-color: #a6da95;
        } /* green */
        .term-bg43 {
            background-color: #eed49f;
        } /* yellow */
        .term-bg44 {
            background-color: #8aadf4;
        } /* blue */
        .term-bg45 {
            background-color: #c6a0f6;
        } /* magenta */
        .term-bg46 {
            background-color: #8bd5ca;
        } /* cyan */
        .term-bg47 {
            background-color: #494d64;
        } /* white */
    }
}
5fe8c65.tngl.sh

Some prose before the mermaid block to test that remaining[:idx] is preserved.

Link textOneTwoHard edgeRound edgeDecisionResult oneResult two

Prose between two mermaid blocks.

Hello John, how are you?Great!How about you?Good thanks!AliceBobJohnAliceBobJohn

And prose after both blocks, plus a regular code block to test it still wraps properly:

func main() {
    fmt.Println("hello")
}
5fe8c65.tngl.sh
060c6eb.tngl.sh

yo this is good

060c6eb.tngl.sh

yo this is good #2

5fe8c65.tngl.sh

yeah def

Sign up or Sign in to add to the discussion.