:root {
      --bg: #ffffff;
      --fg: #1f2328;
      --muted: #6b7280;
      --accent: #1f6feb;
      --panel: #f5f7fb;
      --border: #d0d7de;
      --toolbar-bg: #f8fafc;
      --editor-bg: #ffffff;
      --mark-bg: #ffdb70;
      --mark-fg: #000;
      --btn: #f3f4f6;
      --btn-active: #e5e7eb;
      --btn-ink: #111827;
      --shadow: 0 1px 4px rgba(0,0,0,.08);
      --img-outline: #3b82f6;
      --img-handle: #ffffff;
      --img-handle-border: #2563eb;
    }
    [data-theme="dark"] {
      --bg: #0d1117;
      --fg: #e6edf3;
      --muted: #9aa4b2;
      --accent: #4ea3ff;
      --panel: #161b22;
      --border: #30363d;
      --toolbar-bg: #0d1117;
      --editor-bg: #0f1420;
      --mark-bg: #665c00;
      --mark-fg: #fff5b1;
      --btn: #1f2733;
      --btn-active: #273142;
      --btn-ink: #e6edf3;
      --shadow: 0 1px 4px rgba(0,0,0,.35);
      --img-outline: #93c5fd;
      --img-handle: #0b1220;
      --img-handle-border: #60a5fa;
    }
    * { box-sizing: border-box; }
    html, body { height:100%; }
    body {
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color: var(--fg);
      background: var(--bg);
    }
    header {
      display:flex; align-items:center; gap:.75rem;
      padding:.6rem 1rem; background:var(--panel); border-bottom:1px solid var(--border);
      position: sticky; top:0; z-index: 5;
    }
    header h1 { font-size:1.05rem; margin:0; font-weight:600; }
    header input[type="text"] {
      border:1px solid var(--border); background:var(--bg); color:var(--fg);
      padding:.4rem .6rem; border-radius:.5rem; min-width: 220px;
    }
    .toolbar {
      display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
      padding:.6rem; background:var(--toolbar-bg); border-bottom:1px solid var(--border);
      position: sticky; top:3.1rem; z-index: 4;
    }
    .group {
      display:flex; gap:.25rem; align-items:center; padding:.35rem; border:1px solid var(--border);
      border-radius:.5rem; background:var(--panel);
    }
    button, .split {
      appearance:none; border:1px solid var(--border); background:var(--btn); color:var(--btn-ink);
      border-radius:.4rem; padding:.35rem .5rem; cursor:pointer; line-height:1; box-shadow: var(--shadow);
    }
    button:hover { background: var(--btn-active); }
    button.active { outline:2px solid var(--accent); outline-offset:0; border-color: transparent; }
    select, input[type="color"], input[type="number"] {
      border:1px solid var(--border); background:var(--bg); color:var(--fg);
      border-radius:.4rem; padding:.35rem .45rem;
    }
    .toolbar label { font-size:.8rem; color:var(--muted); margin:0 .25rem; }
    #editor-wrap {
      margin: 1rem; background: var(--editor-bg);
      border:1px solid var(--border); border-radius:.75rem; overflow:hidden; box-shadow: var(--shadow);
    }
    #ruler {
      height: 32px; background: repeating-linear-gradient(90deg, var(--panel) 0 10px, transparent 10px 20px);
      border-bottom:1px dashed var(--border);
    }
    #editor {
      min-height: 60vh; padding: 1rem 1.25rem; outline:none; white-space: pre-wrap; overflow-wrap: break-word;
    }
    #editor:empty:before { content: attr(data-placeholder); color: var(--muted); }
    mark.search-hit { background: var(--mark-bg); color: var(--mark-fg); padding:0 .1em; border-radius:.15rem; }
    footer {
      display:flex; justify-content:space-between; align-items:center; gap:.75rem;
      padding:.5rem 1rem; border-top:1px solid var(--border); color: var(--muted);
      position: sticky; bottom:0; background: var(--panel); z-index: 3;
    }
    .status { display:flex; gap:1rem; flex-wrap:wrap; }
    .hidden { display:none !important; }

    /* ===== Image Resize UI ===== */
    .img-box {
      display: inline-block;
      position: relative;
      border: 2px solid transparent;
      line-height: 0;
      margin: 2px;
      user-select: none;
    }
    .img-box.selected {
      border-color: var(--img-outline);
      box-shadow: 0 0 0 2px color-mix(in oklab, var(--img-outline) 30%, transparent);
    }
    .img-box img {
      display: block;
      max-width: 100%;
      height: auto;
      pointer-events: none; /* so drag handles receive events */
    }
    .img-handle {
      position: absolute;
      width: 10px; height: 10px;
      background: var(--img-handle);
      border: 2px solid var(--img-handle-border);
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(0,0,0,.1);
      z-index: 2;
      cursor: nwse-resize;
    }
    .img-handle.nw { left:-7px; top:-7px; cursor:nwse-resize; }
    .img-handle.ne { right:-7px; top:-7px; cursor:nesw-resize; }
    .img-handle.sw { left:-7px; bottom:-7px; cursor:nesw-resize; }
    .img-handle.se { right:-7px; bottom:-7px; cursor:nwse-resize; }
    .img-handle.n  { left:50%; top:-7px; transform:translateX(-50%); cursor:ns-resize; }
    .img-handle.s  { left:50%; bottom:-7px; transform:translateX(-50%); cursor:ns-resize; }
    .img-handle.w  { left:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
    .img-handle.e  { right:-7px; top:50%; transform:translateY(-50%); cursor:ew-resize; }

    .img-toolbar {
      position: absolute;
      transform: translateY(-100%);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: .5rem;
      padding: .25rem;
      display: flex;
      gap: .25rem;
      box-shadow: var(--shadow);
      z-index: 3;
    }
    .img-toolbar button { padding: .25rem .4rem; font-size: .85rem; }
    .img-toolbar .kbd {
      font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      background: var(--btn);
      padding: 1px 6px; border:1px solid var(--border); border-radius: .35rem;
    }

    @media (max-width: 800px) {
      .toolbar { position: static; }
      header { position: static; }
    }
    @media print {
      header, .toolbar, footer, dialog, .img-handle, .img-toolbar { display:none !important; }
      body { background: #fff; color:#000; }
      #editor-wrap { border: none; box-shadow: none; margin:0; }
      #editor { padding:0; }
      mark.search-hit { background: transparent; color: inherit; }
    }

            body {
              margin: 0;
              font-family: Arial, Helvetica, sans-serif;
            }

            .topnav {
              overflow: hidden;
              background-color: #ffffff;
            }

            .topnav a {
              float: left;
              color: #1a1a1a;
              text-align: center;
              padding: 12px 14px;
              text-decoration: none;
              font-size: 17px;
            }

            .topnav a:hover {
              background-color: #ddd;
              color: black;
            }

            .topnav a.active {
              background-color: #ffffff;
              color: black;
            }
								   
            .topnav-right {
              float: right;
            }

            .imager img {
              border: 1px solid #ddd;
              width: 150px;
              border-radius: 10%;
              margin: 20px;
            }

            .imager img:hover {
              box-shadow: 0 0 2px 1px rgba(151, 161, 165, 0.5);
									   
            }