.editor-layout.view-enter {
      opacity: 0;
      transform: translateY(14px);
    }

    .editor-layout {
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .nav-search {
      background: var(--surface);
      border-radius: var(--8px-radius);
      font-size: 16px;
      display: flex;
      flex-grow: 1;
      flex-shrink: 1;
      max-width: calc(50% + 100px);
      padding-left: 12px;
      align-items: center;
      min-width: 0;
      height: 36px;
    }

    .nav-search-group {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0;
      max-width: calc(50% + 100px);
    }

    .nav-search-row {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      width: 100%;
    }

    .nav-search-group .nav-search {
      max-width: none;
    }

    .nav-search-row .nav-search {
      width: 100%;
      padding-right: 12px;
    }

    .nav-search-group.editor-mode .nav-search-row .nav-search {
      padding-right: 92px;
    }

    .replace-row {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 1;
      width: 100%;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-6px);
      transition: 0.16s ease;
    }

    .replace-search {
      position: relative;
      width: 100%;
      height: 36px;
      display: flex;
      padding-right: 64px;
    }

    .nav-search-group.replace-mode .replace-row {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
    }

    .search-actions,
    .replace-actions {
      position: absolute;
      top: 50%;
      right: 4px;
      display: none;
      align-items: center;
      gap: 2px;
      transform: translateY(-50%);
    }

    .nav-search-group.editor-mode .search-actions,
    .replace-actions {
      display: flex;
    }

    .search-action-button {
      display: flex;
      flex: 0 0 24px;
      width: 24px;
      height: 26px;
      padding: 3px;
      background: transparent;
      color: var(--text);
      cursor: pointer;
    }

    .search-action-button svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
    }

    .search-action-button[aria-expanded="true"] {
      background: var(--accent-color);
    }

    .home-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: var(--surface-1);
      flex: 1 1 auto;
      min-height: 0;
      margin: 32px 0 0 0;
      overflow: visible;
    }

    .recents-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-template-rows: none;
      grid-auto-rows: minmax(150px, 200px);
      gap: 12px;
      border-radius: var(--12px-radius);
      padding: 16px;
      width: 100%;
      min-height: 200px;
      overflow: visible;
    }

    .recent-item {
      background: var(--surface-2);
      width: 100%;
      min-width: 200px;
      min-height: 150px;
      height: 100%;
      border-radius: var(--12px-radius);
      padding: 6px;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .recent-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    .recent-preview {
      width: 100%;
      height: calc(100% - 33.6px);
      background: var(--surface-1);
      border-radius: var(--6px-radius);
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.04);
      position: relative;
    }

    .recent-preview iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 300%;
      height: 300%;
      border: 0;
      pointer-events: none;
      background: white;
      transform: scale(calc(1 / 3));
      transform-origin: top left;
      transition: none;
    }

    .recent-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 33.6px;
    }

    .recent-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin: 0 0 0 6px;
    }

    .recent-preview {
      width: 100%;
      height: calc(100% - 33.6px);
      background: var(--surface-1);
      border-radius: var(--6px-radius);
    }

    .recent-options-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      height: 100%;
    }

    .recent-options-button {
      background: var(--surface-1);
      padding: 4px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      border-radius: var(--8px-radius);
    }

    .recent-options-button:hover {
      transform: translateY(-2px);
    }

    .recent-options-button svg {
      width: 90%;
      height: 90%;
      stroke: currentColor;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .recent-menu-wrap {
      position: relative;
    }

    .recent-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      min-width: 140px;
      background: var(--surface-1);
      border-radius: var(--10px-radius);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 20;
    }

    .recent-menu.hidden {
      display: none;
    }

    .recent-menu button {
      width: 100%;
      justify-content: flex-start;
      padding: 8px 10px;
      background: var(--surface-2);
      color: var(--text);
      border-radius: var(--8px-radius);
      font-size: 14px;
      font-weight: 600;
    }

    .recent-menu button:hover {
      background: var(--surface);
      scale: 0.98;
    }

    .recent-menu button:active {
      scale: 0.94;
    }

    .editor-layout {
      position: relative;
      z-index: 1;
      background: var(--surface-1);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      padding: 0;
      gap: 0;
      flex: 1 1 auto;
    }

    .editor-preview-divider {
      width: 12px;
      min-width: 12px;
      height: 100%;
      position: relative;
      cursor: col-resize;
      border: 1px solid transparent;
      flex-shrink: 0;
      transition: background 0.2s ease, box-shadow 0.2s ease;
      touch-action: none;
      user-select: none;
    }

    .editor-preview-divider::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 12px;
      bottom: 12px;
      width: 3px;
      background: var(--surface-2);
      transform: translateX(-50%);
      border-radius: var(--12px-radius);
    }

    .editor-layout.portrait {
      flex-direction: column;
    }

    .editor-layout.portrait .editor-preview-divider {
      width: 100%;
      min-width: 100%;
      height: 12px;
      min-height: 12px;
      cursor: row-resize;
      border-left: none;
      border-right: none;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .editor-layout.portrait .editor-preview-divider::before {
      left: 12px;
      right: 12px;
      top: 50%;
      bottom: auto;
      width: auto;
      height: 3px;
      transform: translateY(-50%);
    }

    .editor-layout.portrait .editor,
    .editor-layout.portrait .preview {
      width: 100%;
      min-width: 0;
    }

    @media (orientation: portrait) {
      .editor-layout {
        flex-direction: column;
      }

      .editor-preview-divider {
        width: 100%;
        min-width: 100%;
        height: 12px;
        min-height: 12px;
        cursor: row-resize;
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      }

      .editor-preview-divider::before {
        left: 12px;
        right: 12px;
        top: 50%;
        bottom: auto;
        width: auto;
        height: 2px;
        transform: translateY(-50%);
      }

      .editor,
      .preview {
        width: 100%;
        min-width: 0;
      }
    }

    .editor {
      width: 50%;
      height: 100%;
      background: var(--bg);
      border-radius: var(--16px-radius);
      box-shadow: inset 0 0 8px 4px rgba(0, 0, 0, 0.025);
      overflow: hidden;
      flex: 1 1 0;
      position: relative;
      min-width: 0;
    }

    .editor-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      background: var(--editor-bg);
      border-radius: var(--16px-radius);
      overflow: hidden;
    }

    .editor-shell .CodeMirror {
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      background: var(--editor-bg);
      color: var(--editor-text);
      font-family: "Fira Code", "Consolas", monospace;
      font-size: 14px;
      line-height: 1.5;
      border-radius: var(--16px-radius);
      z-index: 2;
    }

    .editor-shell .CodeMirror-scroll {
      height: 100%;
      overflow: auto !important;
    }

    .editor-shell .CodeMirror-gutters {
      display: none !important;
      background: transparent;
      border-right: none;
    }

    .editor-shell .CodeMirror-linenumbers {
      display: none !important;
    }

    .editor-shell .CodeMirror-cursor {
      border-left: 2px solid var(--editor-caret, currentColor) !important;
    }

    .editor-shell .CodeMirror.cm-s-default .cm-tag,
    .editor-shell .CodeMirror.cm-s-default .cm-attribute,
    .editor-shell .CodeMirror.cm-s-default .cm-string,
    .editor-shell .CodeMirror.cm-s-default .cm-keyword,
    .editor-shell .CodeMirror.cm-s-default .cm-comment,
    .editor-shell .CodeMirror.cm-s-default .cm-number,
    .editor-shell .CodeMirror.cm-s-default .cm-atom,
    .editor-shell .CodeMirror.cm-s-default .cm-def,
    .editor-shell .CodeMirror.cm-s-default .cm-variable,
    .editor-shell .CodeMirror.cm-s-default .cm-variable-2,
    .editor-shell .CodeMirror.cm-s-default .cm-variable-3,
    .editor-shell .CodeMirror.cm-s-default .cm-property,
    .editor-shell .CodeMirror.cm-s-default .cm-operator,
    .editor-shell .CodeMirror.cm-s-default .cm-meta,
    .editor-shell .CodeMirror.cm-s-default .cm-builtin,
    .editor-shell .CodeMirror.cm-s-default .cm-qualifier,
    .editor-shell .CodeMirror.cm-s-default .cm-bracket {
      color: var(--editor-text) !important;
    }

    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-tag,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-bracket {
      color: var(--editor-tag) !important;
    }

    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-attribute,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-variable,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-variable-2,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-property {
      color: var(--editor-attr) !important;
    }

    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-string {
      color: var(--editor-string) !important;
    }

    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-keyword,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-atom,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-number,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-def,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-meta,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-builtin,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-qualifier,
    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-operator {
      color: var(--editor-keyword) !important;
    }

    body[data-text-theme="colored"] .editor-shell .CodeMirror.cm-s-default .cm-comment {
      color: var(--editor-comment) !important;
    }

    .editor textarea {
      z-index: 2;
      resize: none;
      background: transparent;
      color: var(--editor-text);
      outline: none;
      caret-color: var(--editor-caret);
    }

    .editor textarea::selection {
      background: rgba(91, 157, 255, 0.4);
    }

    body[data-text-theme="colored"] .editor-highlight {
      opacity: 1;
    }

    body[data-text-theme="colored"] .editor textarea {
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .editor-highlight .token-tag,
    .editor-highlight .token-attr,
    .editor-highlight .token-string,
    .editor-highlight .token-keyword,
    .editor-highlight .token-comment,
    .editor-highlight .token-text {
      font-family: "Fira Code", "Consolas", monospace;
    }

    .editor-highlight .token-tag {
      color: var(--editor-tag);
    }

    .editor-highlight .token-attr {
      color: var(--editor-attr);
    }

    .editor-highlight .token-string {
      color: var(--editor-string);
    }

    .editor-highlight .token-keyword {
      color: var(--editor-keyword);
    }

    .editor-highlight .token-comment {
      color: var(--editor-comment);
    }

    .editor-highlight .token-text {
      color: var(--editor-text);
    }

    .preview {
      width: 50%;
      height: 100%;
      background: var(--bg);
      border-radius: var(--16px-radius);
      overflow: hidden;
      border: 0px solid transparent;
      flex: 1 1 0;
      min-width: 0;
    }

    .preview iframe {
      width: 100%;
      height: 100%;
      border: 0;
      background: white;
      transition: none;
    }

    @media (max-width: 768px) {
      .nav-search-group {
        max-width: none;
      }


      .editor-layout {
        flex-direction: column;
      }

      .editor {
        height: 50%;
        width: 100%;
      }

      .preview {
        height: 50%;
        width: 100%;
      }
    }

    @media (orientation: landscape) and (max-height: 499px) {
      .editor-layout {
        flex-direction: row;
        min-height: 0;
      }

      .editor-layout .editor,
      .editor-layout .preview {
        width: 50%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }

      .editor-layout .editor-preview-divider {
        width: 12px;
        min-width: 12px;
        height: 100%;
        min-height: 0;
        cursor: col-resize;
        border: 1px solid transparent;
      }

      .editor-layout .editor-preview-divider::before {
        left: 50%;
        right: auto;
        top: 12px;
        bottom: 12px;
        width: 3px;
        height: auto;
        transform: translateX(-50%);
      }
    }

    :root {
      --accent-color: #209040;
    }

    :root[data-theme="light"] {
      --editor-bg: #f3f3f3;
      --editor-text: #1f1f1f;
      --editor-caret: #111111;
      --editor-tag: #005cc5;
      --editor-attr: #794dcf;
      --editor-string: #a31515;
      --editor-keyword: #af00db;
      --editor-comment: #008000;
      color-scheme: light;
    }