export const SHADOW_STYLES = `
  :host {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.6;
    position: relative;
    container-type: inline-size;
    color-scheme: var(--ek-color-scheme, light dark);

    /* --- Semantic tokens: light-dark(light, dark) --- */
    --ek-text: light-dark(#1a1a1a, #e4e4e7);
    --ek-text-muted: light-dark(#6b7280, #a1a1aa);
    --ek-text-faint: light-dark(#9ca3af, #71717a);
    --ek-heading: light-dark(#111, #fafafa);
    --ek-heading-h6: light-dark(#555, #a1a1aa);
    --ek-link: light-dark(#2563eb, #60a5fa);
    --ek-accent: light-dark(#6366f1, #818cf8);
    --ek-accent-hover-bg: light-dark(#f5f3ff, #1e1b4b);
    --ek-accent-active-bg: light-dark(#ede9fe, #312e81);
    --ek-accent-active-border: light-dark(#c4b5fd, #6366f1);
    --ek-bg: light-dark(#fff, #18181b);
    --ek-bg-subtle: light-dark(#f3f4f6, #27272a);
    --ek-bg-muted: light-dark(#f3f4f6, #27272a);
    --ek-bg-editing: light-dark(#fefce8, #1c1a0e);
    --ek-border: light-dark(#e5e7eb, #3f3f46);
    --ek-border-muted: light-dark(#d1d5db, #52525b);
    --ek-code-bg: light-dark(#1e1e2e, #0f0f14);
    --ek-code-text: #cdd6f4;
    --ek-code-filepath: light-dark(#94a3b8, #71717a);
    --ek-inline-code-bg: light-dark(#f3f4f6, #27272a);
    --ek-danger: light-dark(#dc2626, #f87171);
    --ek-danger-border: light-dark(#fca5a5, #7f1d1d);
    --ek-danger-hover-bg: light-dark(#fef2f2, #1c0a0a);
    --ek-shadow: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
    --ek-shadow-soft: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
    --ek-shadow-med: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
    --ek-mono: 'SF Mono', Monaco, Consolas, monospace;

    color: var(--ek-text);
    background-color: var(--ek-bg);
  }

  /* --- Block content --- */
  [data-block-type="paragraph"] p { margin: 0.6em 0; line-height: 1.6; }
  [data-block-type="paragraph"] a,
  [data-block-type="heading"] a { color: var(--ek-link); text-decoration: none; }
  [data-block-type="paragraph"] a:hover,
  [data-block-type="heading"] a:hover { text-decoration: underline; }
  [data-block-type="paragraph"] code,
  [data-block-type="heading"] code {
    background: var(--ek-inline-code-bg); padding: 0.15em 0.35em; border-radius: 3px;
    font-family: var(--ek-mono); font-size: 0.9em;
  }
  [data-block-type="paragraph"] strong,
  [data-block-type="heading"] strong { font-weight: 600; }

  [data-block-type="heading"] h1, [data-block-type="heading"] h2, [data-block-type="heading"] h3,
  [data-block-type="heading"] h4, [data-block-type="heading"] h5, [data-block-type="heading"] h6 {
    color: var(--ek-heading); font-weight: 600; line-height: 1.25; margin: 0;
  }
  [data-block-type="heading"] h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--ek-border); margin-bottom: 0.5em; }
  [data-block-type="heading"] h2 { font-size: 1.5em; padding-bottom: 0.25em; border-bottom: 1px solid var(--ek-border); margin-bottom: 0.4em; }
  [data-block-type="heading"] h3 { font-size: 1.25em; }
  [data-block-type="heading"] h4 { font-size: 1em; }
  [data-block-type="heading"] h5 { font-size: 0.875em; }
  [data-block-type="heading"] h6 { font-size: 0.85em; color: var(--ek-heading-h6); }

  [data-block-type="code-block"] pre {
    background: var(--ek-code-bg); color: var(--ek-code-text); padding: 1em; border-radius: 6px;
    overflow-x: auto; margin: 0.8em 0; font-size: 0.875em; line-height: 1.5;
  }
  [data-block-type="code-block"] code { font-family: var(--ek-mono); }
  [data-block-type="code-block"] pre[data-filepath]::before {
    content: attr(data-filepath);
    display: block; margin-bottom: 0.4em;
    font-size: 0.85em; color: var(--ek-code-filepath);
    font-family: var(--ek-mono);
  }

  [data-block-type="hr"] hr { border: none; border-top: 1px solid var(--ek-border); margin: 1.5em 0; }

  [data-block-type="blockquote"] blockquote {
    border-left: 3px solid var(--ek-accent); padding-left: 1em;
    margin: 0.8em 0; color: var(--ek-text-muted);
  }

  [data-block-type="list"] ul, [data-block-type="list"] ol { margin: 0.6em 0; padding-left: 1.5em; }
  [data-block-type="list"] li { line-height: 1.6; margin: 0.25em 0; }

  [data-block-type="task-list"] .task-list { list-style: none; padding-left: 0; margin: 0.6em 0; }
  [data-block-type="task-list"] .task-list-item { line-height: 1.6; margin: 0.25em 0; }

  /* --- Table --- */
  table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
  th, td { padding: 0.4em 0.8em; border: 1px solid var(--ek-border); text-align: left; }
  th { background: var(--ek-bg-muted); font-weight: 600; }
  .table-error { color: var(--ek-danger); background: var(--ek-bg-muted); padding: 0.6em 1em; border-radius: 6px; }
  .align-center { text-align: center; }
  .align-right { text-align: right; }

  @container (inline-size < 400px) {
    [data-block-type="table"] { overflow-x: auto; }
  }

  /* --- HTML form controls --- */
  [data-block-type^="html:"] { margin: 0.4em 0; }
  [data-block-type^="html:"] input,
  [data-block-type^="html:"] select,
  [data-block-type^="html:"] textarea {
    display: block; width: 100%; box-sizing: border-box;
    padding: 0.5em 0.6em; font-family: inherit; font-size: inherit;
    line-height: 1.5; color: var(--ek-text); background: var(--ek-bg);
    border: 1px solid var(--ek-border); border-radius: 4px;
    outline: none;
  }
  [data-block-type^="html:"] input:focus,
  [data-block-type^="html:"] select:focus,
  [data-block-type^="html:"] textarea:focus {
    border-color: var(--ek-accent);
  }
  [data-block-type^="html:"] select { width: auto; min-width: 10em; max-width: 100%; }
  [data-block-type^="html:"] textarea { resize: vertical; field-sizing: content; min-height: 3em; }
  [data-block-type^="html:"] output {
    display: block; padding: 0.5em 0.6em; font-family: inherit;
    color: var(--ek-text-muted); background: var(--ek-bg-muted);
    border: 1px solid var(--ek-border); border-radius: 4px;
  }
  [data-block-type^="html:"] button {
    display: inline-block; padding: 0.5em 1.2em; font-family: inherit; font-size: inherit;
    color: var(--ek-text); background: var(--ek-bg);
    border: 1px solid var(--ek-border); border-radius: 4px; cursor: pointer;
  }
  [data-block-type^="html:"] button:hover { background: var(--ek-bg-muted); }
  [data-block-type^="html:"] meter,
  [data-block-type^="html:"] progress {
    display: block; width: 100%; height: 1.2em; border-radius: 4px;
  }


  /* --- Image --- */
  figure { margin: 0.8em 0; }
  figure img { max-width: 100%; height: auto; border-radius: 4px; }

  /* --- Footnotes --- */
  .footnotes { font-size: 0.9em; color: var(--ek-text-muted); border-top: 1px solid var(--ek-border); margin-top: 1.5em; padding-top: 0.8em; }
  .footnote-backref { text-decoration: none; color: var(--ek-link); }

  /* --- CSS Custom Highlight API --- */
  ::highlight(md-bold) { background-color: rgba(59, 130, 246, 0.12); }
  ::highlight(md-italic) { background-color: rgba(168, 85, 247, 0.12); }
  ::highlight(md-code) { background-color: rgba(107, 114, 128, 0.15); }
  ::highlight(md-link) { background-color: rgba(37, 99, 235, 0.12); }

  /* --- Insert handles --- */
  .insert-handle {
    height: 0; position: relative; margin: 0;
    opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s;
  }
  .insert-handle.visible { opacity: 1; visibility: visible; }
  .insert-handle:focus-within { opacity: 1; visibility: visible; }
  .insert-btn {
    position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--ek-border-muted); background: var(--ek-bg); color: var(--ek-text-faint);
    font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; transition: all 0.15s;
  }
  .insert-btn:hover { border-color: var(--ek-accent); color: var(--ek-accent); background: var(--ek-accent-hover-bg); }

  /* --- Insert menu --- */
  .insert-menu {
    position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
    background: var(--ek-bg); border: 1px solid var(--ek-border); border-radius: 8px;
    box-shadow: 0 4px 12px var(--ek-shadow); padding: 4px; z-index: 10;
    display: flex; gap: 2px;
  }
  .insert-menu button {
    padding: 6px 12px; border: none; background: none; border-radius: 6px;
    font-size: 0.8em; color: var(--ek-text); cursor: pointer; white-space: nowrap;
  }
  .insert-menu button:hover { background: var(--ek-bg-muted); }

  @container (inline-size < 400px) {
    .insert-menu { flex-wrap: wrap; justify-content: center; }
  }

  /* --- Block wrapper --- */
  .block-wrapper {
    position: relative; border-radius: 4px;
    transition: background 0.1s;
  }
  .block-wrapper:hover { background: var(--ek-bg-subtle); }
  .block-wrapper.editing { background: var(--ek-bg-editing); }

  /* --- Floating toolbar (inside paragraph/heading) --- */
  .floating-toolbar {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: -42px; z-index: 20;
    display: flex; gap: 2px; padding: 4px; background: var(--ek-bg);
    border: 1px solid var(--ek-border); border-radius: 6px;
    box-shadow: 0 4px 12px var(--ek-shadow-med);
  }
  .floating-toolbar button {
    padding: 4px 8px; border: 1px solid transparent; background: none;
    border-radius: 4px; font-size: 0.8em; cursor: pointer; color: var(--ek-text);
    font-family: inherit;
  }
  .floating-toolbar button:hover { background: var(--ek-bg-muted); }
  .floating-toolbar button.active { background: var(--ek-accent-active-bg); color: var(--ek-accent); border-color: var(--ek-accent-active-border); }

  /* --- Heading level selector --- */
  .heading-selector {
    display: flex; gap: 2px; margin-bottom: 4px;
  }
  .block-popup .heading-selector { margin-bottom: 0; margin-right: auto; }
  .heading-selector button {
    padding: 2px 8px; border: 1px solid var(--ek-border); background: var(--ek-bg);
    border-radius: 4px; font-size: 0.75em; font-weight: 600;
    cursor: pointer; color: var(--ek-text);
  }
  .heading-selector button.active {
    background: var(--ek-accent); color: #fff; border-color: var(--ek-accent);
  }
  .heading-selector button:hover:not(.active) { background: var(--ek-bg-muted); }

  /* --- Inline toolbar (text mode) --- */
  .toolbar {
    display: flex; gap: 2px; padding: 4px; background: var(--ek-bg);
    border: 1px solid var(--ek-border); border-radius: 6px;
    box-shadow: 0 2px 8px var(--ek-shadow-soft); margin-bottom: 4px;
  }
  .toolbar button {
    padding: 4px 8px; border: 1px solid transparent; background: none;
    border-radius: 4px; font-size: 0.8em; cursor: pointer; color: var(--ek-text);
    font-family: inherit;
  }
  .toolbar button:hover { background: var(--ek-bg-muted); }
  .toolbar button.active { background: var(--ek-accent-active-bg); color: var(--ek-accent); border-color: var(--ek-accent-active-border); }

  /* --- Edit input --- */
  .edit-input {
    width: 100%; padding: 0.4em 0.5em; border: 1.5px solid var(--ek-accent);
    border-radius: 4px; outline: none; font-family: inherit;
    font-size: inherit; line-height: 1.6; background: var(--ek-bg); color: var(--ek-text);
    box-sizing: border-box; resize: none;
    field-sizing: content; min-height: 2.4em;
  }
  .edit-input.code-editor {
    font-family: var(--ek-mono); font-size: 0.875em; min-height: 4em;
  }
  .copy-json {
    flex: none; padding: 0.25em 0.6em; font-size: 0.8em; cursor: pointer;
    border: 1px solid var(--ek-border-muted); border-radius: 4px;
    background: var(--ek-bg); color: var(--ek-text-faint);
  }
  .copy-json:hover {
    border-color: var(--ek-accent); color: var(--ek-accent);
    background: var(--ek-accent-hover-bg);
  }

  /* --- Code block meta inputs --- */
  .code-meta {
    display: flex; gap: 6px; margin-bottom: 4px;
  }
  .code-meta-input {
    flex: 1; font-size: 0.8em !important; padding: 0.3em 0.5em !important;
    min-height: unset !important; field-sizing: normal !important;
    font-family: var(--ek-mono);
  }

  /* --- Hidden utility --- */
  .hidden { display: none !important; }

  /* --- Document toolbar --- */
  .doc-toolbar {
    display: flex; gap: 2px; padding: 4px; margin-bottom: 8px;
    border-bottom: 1px solid var(--ek-border);
  }
  .doc-toolbar button {
    padding: 4px 12px; border: 1px solid transparent; background: none;
    border-radius: 4px; font-size: 0.8em; cursor: pointer; color: var(--ek-text-muted);
    font-family: inherit;
  }
  .doc-toolbar button:hover { background: var(--ek-bg-muted); color: var(--ek-text); }
  .doc-toolbar button.active {
    background: var(--ek-accent-active-bg); color: var(--ek-accent); border-color: var(--ek-accent-active-border);
  }

  /* --- Source editor --- */
  .source-editor {
    width: 100%; min-height: 20em; padding: 0.8em; border: 1.5px solid var(--ek-accent);
    border-radius: 6px; outline: none; background: var(--ek-code-bg); color: var(--ek-code-text);
    font-family: var(--ek-mono); font-size: 0.875em;
    line-height: 1.6; box-sizing: border-box; resize: vertical;
    field-sizing: content;
  }

  /* --- Block popup (popover toolbar above block) --- */
  .block-popup {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; margin: 0;
    background: var(--ek-bg); border: 1px solid var(--ek-border); border-radius: 6px;
    box-shadow: 0 2px 8px var(--ek-shadow-soft);
    font-family: inherit; font-size: inherit; color: var(--ek-text);
    /* Anchor to the editing block wrapper */
    inset: auto;
    position: fixed;
    position-anchor: --ek-editing-block;
    bottom: anchor(top);
    left: anchor(left);
    width: anchor-size(width);
    margin-bottom: 4px;
  }
  .block-popup-msg {
    font-size: 0.8em; color: var(--ek-text-muted); margin-right: auto;
  }
  .block-popup button {
    padding: 3px 10px; border: 1px solid var(--ek-border-muted); background: var(--ek-bg);
    border-radius: 4px; font-size: 0.75em; cursor: pointer; color: var(--ek-text);
    font-family: inherit; white-space: nowrap;
  }
  .block-popup button:hover { background: var(--ek-bg-muted); }
  .block-popup button.danger {
    color: var(--ek-danger); border-color: var(--ek-danger-border);
  }
  .block-popup button.danger:hover { background: var(--ek-danger-hover-bg); }
`;