body, html {
    margin: 0;
    padding: 0;
    font-family: system-ui, sans-serif;
    background: #f5f5f5;
  }

  .page {
    display: flex;
    align-items: stretch; /* right column stretches to match left column's natural height */
    height: 100%;
  }

  /* LEFT COLUMN: a flex column whose width shrinks to fit its widest
     child. Since align-items defaults to "stretch", the other two
     divs will stretch to match whatever width the svg establishes. */
  .left {
    display: flex;
    flex-direction: column;
    width: fit-content; /* shrink-to-fit content, i.e. the svg's width */
  }

  .left > div {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .top {
    padding: 0.75rem 1rem;
    text-align: center;
  }

  /* No padding here: the textarea itself becomes the full-width/height
     box, so its dimensions can match the svg's rendered size exactly. */
  .bottom {
    padding: 0;
  }

  .bottom textarea {
    display: block;
    width: 100%;      /* matches .bottom's width, which the flex-stretch
                          already ties to the svg's width */
    box-sizing: border-box;
    border: none;
    border-radius: inherit;
    padding: 0.75rem 1rem;
    font: inherit;
    resize: none;      /* prevent the user from breaking the matched size */
  }

  .svg-wrap {
    padding: 0; /* let the svg define the box exactly */
    line-height: 0; /* avoid extra inline-svg whitespace gap */
  }

  .svg-wrap svg {
    display: block;
    /* intrinsic size set via width/height attributes below */
  }

  /* RIGHT COLUMN: takes remaining horizontal space AND stretches to
     match the left column's full height (via .page's align-items: stretch) */
  .right {
    flex: 1;
    display: flex;      /* so the iframe can fill 100% of it */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;   /* keep the iframe's corners inside the rounded border */
  }

  .right iframe {
     flex: 1;
     width: 100%;
     height: 100%;
     border: none;
   }