main {
  width: 100%;
  padding-inline: var(--site-gutter);
}

.tool-header {
  height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
}

.tool-header h1 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.direction-switch {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--white);
}

.direction-switch button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.direction-switch button + button {
  border-left: 1px solid var(--ink);
}

.direction-switch button[aria-pressed="true"] {
  background: var(--blue);
  color: var(--white);
}

.direction-switch button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

.direction-switch button[aria-pressed="true"]:focus-visible {
  outline-color: var(--white);
}

.workspace {
  height: calc(100dvh - var(--site-header-height) - 88px);
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(320px, 25vw) minmax(0, 1fr);
  margin-bottom: 16px;
  border: 1px solid var(--ink);
  background: var(--white);
}

.input-panel,
.canvas-panel {
  min-width: 0;
  min-height: 0;
  background: var(--white);
}

.input-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ink);
}

.canvas-panel {
  display: flex;
  flex-direction: column;
}

.panel-header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--ink);
}

.panel-header h2,
.panel-header p {
  margin: 0;
}

.panel-header h2 {
  font-size: 0.92rem;
  letter-spacing: -0.025em;
}

.text-button {
  padding: 4px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 0.62rem;
  font-weight: 700;
}

.text-button:hover,
.text-button:focus-visible {
  color: var(--blue);
  outline: 0;
}

.forward-controls,
.reverse-controls {
  min-height: 0;
  padding: 14px;
}

.forward-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.reverse-controls {
  overflow: auto;
}

.code-editor {
  min-height: 180px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  border: 1px solid var(--rule);
  background: var(--white);
}

.forward-controls > .code-editor {
  flex: 1;
}

.code-editor:focus-within {
  border-color: var(--blue);
  outline: 1px solid var(--blue);
}

.line-numbers,
.code-editor textarea {
  margin: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: pre;
}

.line-numbers {
  overflow: hidden;
  padding-right: 9px;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  color: var(--muted);
  text-align: right;
  user-select: none;
}

.code-editor textarea {
  width: 100%;
  height: 100%;
  resize: none;
  padding-right: 12px;
  padding-left: 12px;
  background: transparent;
  color: var(--ink);
  outline: 0;
  tab-size: 2;
}

.code-editor textarea::placeholder {
  color: var(--muted);
}

.editor-meta {
  min-height: 34px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.61rem;
  line-height: 1.35;
}

.editor-meta p {
  margin: 0;
}

.editor-meta p:last-child {
  flex: 0 0 auto;
}

.error-message {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
}

.file-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 2px 0 12px;
}

.file-row > label,
.output-heading label {
  font-size: 0.62rem;
  font-weight: 700;
}

.file-input-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ink);
}

.file-input-wrap:focus-within {
  border-color: var(--blue);
}

.file-input-wrap input {
  min-width: 0;
  flex: 1;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.72rem;
  outline: 0;
}

.file-input-wrap span {
  color: var(--muted);
  font-size: 0.68rem;
}

.primary-button,
.secondary-button,
.download-button,
.fullscreen-button {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 13px;
  border: 1px solid var(--blue);
  border-radius: 0;
  background: var(--blue);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
}

.primary-button {
  width: 100%;
}

.primary-button:hover:not(:disabled),
.primary-button:focus-visible,
.download-button:hover:not(:disabled),
.download-button:focus-visible {
  background: var(--white);
  color: var(--blue);
  outline: 0;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.48;
}

.download-button:disabled,
.fullscreen-button:disabled {
  display: none;
}

.primary-button svg,
.download-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.file-drop {
  min-height: 176px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--rule);
  background: var(--white);
  text-align: center;
}

.file-drop:hover,
.file-drop:focus-within,
.file-drop.is-dragging {
  border-color: var(--blue);
  color: var(--blue);
  outline: 1px solid var(--blue);
}

.file-drop svg {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.5;
}

.file-drop strong {
  font-size: 0.76rem;
}

.file-drop span {
  color: var(--muted);
  font-size: 0.65rem;
}

.reverse-error {
  margin-top: 12px;
}

.reverse-output {
  padding-top: 18px;
}

.output-heading {
  min-height: 28px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.output-heading p {
  margin: 0;
  color: var(--blue);
  font-size: 0.58rem;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
}

.output-editor {
  height: 290px;
}

.output-editor textarea {
  cursor: text;
}

.reverse-actions {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 8px;
}

.secondary-button {
  justify-content: center;
  background: var(--white);
  color: var(--blue);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  background: var(--blue);
  color: var(--white);
  outline: 0;
}

.canvas-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.conversion-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversion-status.is-working,
.conversion-status.is-ready,
.conversion-status.is-stale,
.conversion-status.is-error {
  color: var(--blue);
}

.canvas-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.download-button,
.fullscreen-button {
  min-height: 34px;
}

.download-button {
  min-width: 154px;
}

.fullscreen-button {
  border-color: var(--ink);
  background: var(--white);
  color: var(--ink);
}

.fullscreen-button:hover:not(:disabled),
.fullscreen-button:focus-visible {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
  outline: 0;
}

.fullscreen-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.icon-contract {
  display: none;
}

.canvas-panel.is-fullscreen .icon-expand {
  display: none;
}

.canvas-panel.is-fullscreen .icon-contract {
  display: inline;
}

.preview-stage {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: var(--white);
}

.preview-stage.is-loading::after {
  content: "Loading draw.io…";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / 94%);
  color: var(--blue);
  font-size: 0.64rem;
  font-weight: 700;
}

.preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.preview-empty p {
  max-width: 280px;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.frame-mount,
.drawio-frame {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.frame-mount {
  position: absolute;
  inset: 0;
}

.drawio-frame {
  display: block;
  border: 0;
  background: var(--white);
}

.canvas-footer {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 7px 14px;
  border-top: 1px solid var(--rule);
}

.canvas-message {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
}

.canvas-message span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-panel:fullscreen,
.canvas-panel:-webkit-full-screen,
.canvas-panel.is-fallback-fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  border: 0;
  background: var(--white);
}

.canvas-panel.is-fallback-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

body.has-fallback-fullscreen {
  overflow: hidden;
}

.canvas-panel:fullscreen .panel-header,
.canvas-panel:-webkit-full-screen .panel-header,
.canvas-panel.is-fallback-fullscreen .panel-header {
  min-height: 48px;
}

.canvas-panel:fullscreen .canvas-footer,
.canvas-panel:-webkit-full-screen .canvas-footer,
.canvas-panel.is-fallback-fullscreen .canvas-footer {
  display: none;
}

@media (max-width: 900px) {
  .workspace {
    height: auto;
    min-height: 0;
    display: block;
  }

  .input-panel {
    border-right: 0;
    border-bottom: 1px solid var(--ink);
  }

  .forward-controls {
    display: block;
  }

  .code-editor {
    height: clamp(260px, 38svh, 360px);
  }

  .output-editor {
    height: clamp(250px, 36svh, 320px);
  }

  .canvas-panel {
    height: clamp(460px, 58svh, 640px);
  }
}

@media (max-width: 600px) {
  main {
    padding-inline: 12px;
  }

  .tool-header {
    height: auto;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0 18px;
  }

  .tool-header h1 {
    font-size: 28px;
  }

  .direction-switch {
    width: 100%;
  }

  .direction-switch button {
    min-width: 0;
    flex: 1;
    padding-inline: 7px;
    font-size: 0.58rem;
  }

  .workspace {
    margin-bottom: 12px;
  }

  .forward-controls,
  .reverse-controls {
    padding: 12px;
  }

  .code-editor {
    height: clamp(240px, 34svh, 300px);
  }

  .canvas-panel {
    height: clamp(400px, 52svh, 520px);
  }

  .canvas-header {
    align-items: stretch;
    flex-direction: column;
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .canvas-heading {
    justify-content: space-between;
  }

  .canvas-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .download-button,
  .fullscreen-button {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding-inline: 9px;
    font-size: 0.58rem;
  }

  .preview-empty {
    padding: 14px;
  }

  .canvas-footer {
    padding-inline: 12px;
  }

  .canvas-message span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Content-led workspace: the source action stays above the editor. */
.tool-header { height: auto; min-height: 104px; padding-block: 20px; gap: 20px; }
.tool-header h1 { font-size: 30px; line-height: 1.15; }
.tool-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.direction-switch button { min-height: 44px; font-size: 13px; }
.workspace { height: calc(100dvh - var(--site-header-height) - 124px); min-height: 610px; grid-template-columns: minmax(340px, 30%) minmax(0, 1fr); border-color: var(--rule); }
.input-panel { border-color: var(--rule); }
.panel-header { min-height: 60px; border-color: var(--rule); padding-inline: 18px; }
.panel-header h2 { font-size: 15px; }
.source-actions { display: flex; gap: 16px; }
.text-button { min-height: 44px; font-size: 12px; border: 0; text-decoration: underline; text-underline-offset: 4px; }
.forward-controls, .reverse-controls { padding: 18px; overflow-y: auto; }
.forward-controls { flex: 1; }
.forward-controls > .code-editor { flex: 1; min-height: 220px; max-height: 360px; }
.forward-controls > .primary-button { flex: 0 0 auto; }
.processing-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 12px 0 18px; }
.line-numbers, .code-editor textarea { font-size: 14px; line-height: 1.6; }
.editor-meta { font-size: 12px; gap: 8px; flex-wrap: wrap; padding-block: 10px; }
.error-message { font-size: 13px; }
.file-row { grid-template-columns: 70px minmax(0, 1fr); margin: 8px 0 0; }
.file-row > label, .output-heading label { font-size: 12px; }
.file-input-wrap input { min-height: 44px; font-size: 14px; }
.file-input-wrap span { font-size: 12px; }
.primary-button, .secondary-button, .download-button, .fullscreen-button { min-height: 44px; font-size: 13px; }
.primary-button:disabled { opacity: .65; }
.download-button:disabled, .fullscreen-button:disabled { display: flex; background: var(--paper); color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.canvas-header { flex-wrap: wrap; padding-block: 8px; gap: 8px 16px; }
.canvas-heading { flex-direction: column; align-items: start; gap: 4px; }
.conversion-status { font-size: 12px; }
.canvas-actions { flex-wrap: wrap; }
.download-button { min-width: 0; }
.file-drop { text-align: left; justify-items: start; place-content: initial; align-content: center; min-height: 210px; cursor: pointer; }
.file-drop strong { font-size: 16px; }
.file-drop span { font-size: 13px; }
#drawio-file:focus-visible + .file-drop { outline: 2px solid var(--blue); outline-offset: 3px; }
.output-heading { min-height: 38px; }
.output-heading p { font-size: 11px; }
.preview-empty { align-items: center; padding: clamp(24px, 5vw, 72px); background: var(--paper); }
.empty-content { width: 100%; max-width: 480px; }
.preview-empty .empty-label { font-size: 12px; font-weight: 600; color: var(--blue); margin: 0 0 14px; }
.empty-content h2 { margin: 0 0 16px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; font-weight: 500; }
.preview-empty p { max-width: 390px; font-size: 15px; line-height: 1.6; }
.example-diagram { display: block; width: 100%; max-width: 440px; margin: 36px 0; color: var(--blue); font: 14px var(--sans); }
.empty-content .secondary-button { width: fit-content; }
.preview-empty .example-caption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.frame-mount:empty { display: none; }
.canvas-footer { min-height: 42px; }
.canvas-message { font-size: 12px; line-height: 1.45; }
.canvas-message span { white-space: normal; }
:where(.text-button, .primary-button, .secondary-button, .download-button, .fullscreen-button, .direction-switch button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 901px) {
  .tool-header { grid-template-columns: 1fr; gap: 14px; }
  .direction-switch { width: fit-content; }
  .workspace { height: auto; min-height: 640px; }
}
@media (max-width: 900px) {
  .workspace { height: auto; min-height: 0; }
  .forward-controls > .code-editor { height: 250px; min-height: 0; max-height: none; }
  .canvas-panel { height: 580px; }
}
@media (max-width: 600px) {
  .tool-header { padding-block: 24px 18px; gap: 16px; }
  .tool-header h1 { font-size: 28px; }
  .direction-switch { width: 100%; }
  .direction-switch button { padding-inline: 8px; font-size: 12px; }
  .panel-header { padding-inline: 14px; }
  .forward-controls, .reverse-controls { padding: 14px; }
  .canvas-heading { flex-direction: row; align-items: baseline; }
  .canvas-actions { display: grid; }
  .download-button, .fullscreen-button { font-size: 12px; }
  .preview-empty { padding: 24px; }
  .empty-content h2 { font-size: 28px; }
  .preview-empty p { font-size: 14px; }
  .example-diagram { margin-block: 28px; }
  .canvas-panel { height: 570px; }
  .processing-note { font-size: 13px; }
}