<style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .editor-container {
            display: flex;
            align-items: stretch;
            font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 14px;
            border: 1px solid #ccc;

            /* resizable editor box */
            resize: both;
            overflow: hidden;
            height: 250px;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Make gutter + code share the same text metrics */
        #gutter,
        #code {
            font-family: inherit;
            font-size: inherit;
            line-height: 1.4;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        /* Gutter (line numbers) */
        #gutter {
            margin: 0;
            padding-left: 8px;
            padding-right: 8px;
            text-align: right;
            background: #f5f5f5;
            color: #666;
            user-select: none;
            overflow: hidden;
            white-space: pre;
        }

        /* Code textarea */
        #code {
            margin: 0;
            padding-left: 8px;
            padding-right: 8px;
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            overflow: auto;
            white-space: pre;
            resize: none;
        }

        #output_pre {
            background: #fdfdfd;
            border: 1px solid #ccc;
            padding: 10px;
            font-family: monospace;
            white-space: pre;
            line-height: 1.3;
            height: 250px;
            overflow: auto;
            resize: both;
            box-sizing: border-box;
            max-width: 100%;
        }

        /* Wrap OFF (default): horizontal scroll allowed */
        .no-wrap {
            white-space: pre;
            overflow-x: auto;
        }

        /* Wrap ON: text wraps inside the pane */
        .wrap {
            white-space: pre-wrap;
            overflow-x: hidden;
        }

        /* ---------- DARK MODE ---------- */

        body.dark-mode {
            background: #111;
            color: #eee;
        }

        body.dark-mode .editor-container {
            border-color: #555;
        }

        body.dark-mode #gutter {
            background: #1e1e1e; 
            color: #aaa;
            border-right: 1px solid #333;
        }

        body.dark-mode #code {
            background: #1e1e1e;
            color: #eee;
        }

        body.dark-mode #output_pre {
            background: #181818;
            color: #eee;
            border-color: #555;
        }

        body.dark-mode button {
            background: #333;
            color: #eee;
            border: 1px solid #555;
        }

        body.dark-mode button:hover {
            background: #444;
        }

        button {
            background-color: #1A73E8;
            color: white;
            font-weight: 600;
            font-size: 15px;
            border: none;
            padding: 10px 26px;
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.18s ease, transform 0.12s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        button.btn-small {
            padding: 4px 12px;
            font-size: 12px;
            border-radius: 6px;
            margin-left: 10px;
        }

        .section-title {
            display: flex;
            align-items: center;
        }

        .title-left {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        /* pushes config controls to the far right */
        .toolbar-right {
            margin-left: auto;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .toolbar-spin {
            width: 56px;
        }

        button:hover {
            background-color: #1765CC;
        }

        button:active {
            background-color: #0F4FAC;
            transform: scale(0.97);
        }

        button:disabled {
            background-color: #BBD3F7;
            cursor: not-allowed;
        }

        /* Share button states */
        #share.url-ok {
            /* default look – could explicitly reset background if desired */
        }

        #share.url-near {
            background-color: #e67e22;
        }

        #share.url-over {
            background-color: #c0392b;
        }
    </style>

    <link rel="icon" href="data:,">
</head>
