html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  display: flex;
  height: 100vh;
  min-height: 0;
}
aside {
  margin-inline-start: 0px;
  padding: 0px;
  margin-bottom: 0px;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#output {
  flex: 1 1 0;
  min-height: 100px;
  resize: none;
  margin: 0;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-height: none;
}
#theme-toggle {
  margin-top: auto;
}
.main {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
main {
  padding-top: 0px;
  padding-bottom: 2px;
}
#editor {
  border: 1px solid #ccc;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
  padding: 8px;
  background: var(--bg);
  overflow-x: auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ProseMirror {
  flex: 1 1 0;
  min-height: 0;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid white;
  padding: 10px;
  background: var(--bg);
  overflow-x: auto;
  overflow-y: auto;
  display: block;
}
.ProseMirror-prompt input[type="text"] {
  color: black;
}
.ProseMirror-menubar {
  position: sticky;
  top: -8px;
  z-index: 20;
  color: var(--text);
  background: var(--accent-bg, #f5f7fa);
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.ProseMirror-menubar button:hover {
  color: black;
}
.ProseMirror-menubar button {
  margin-top: .3rem;
}
.ProseMirror p {
  margin: 0rem 0rem 1.2rem 0rem;
}
.ProseMirror ul p, .ProseMirror ol p {
  margin: 0px;
}
.ProseMirror code {
  color: var(--accent);
  background-color: var(--accent-bg);
  border: var(--border-width) solid var(--border);
  border-radius: 0.3em;
  padding: 4px 5px 6px;
}
.ProseMirror pre code {
  border: none;
}
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
  margin: 0.5em 0;
}
.ProseMirror table p {
  margin: 0;
}
.ProseMirror table td, .ProseMirror table th {
  min-width: 25px;
}
button.ProseMirror-icon.ProseMirror-menu-active {
    color: black;
}
.icon {
  width: 2em;
  height: 1.5em;
  vertical-align: -0.125em;
}
.sidebar__wrapper button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
}
#copy-confirm, #convert-confirm {
  display:none;
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:max-content;
  height:max-content;
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:0.7em 2em;
  border-radius:8px;
  font-size:1.2em;
  z-index:2000;
  pointer-events:none;
  text-align:center;
}
.title-container {
  margin-bottom: 1em;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  width: 100%;
}
.title-container img {
  height: 5em;
  width: auto;
  display: block;
  opacity: 1;
  margin-top: -30px;
}
.title-container h1 {
  margin: 0;
  text-align: center;
  width: min-content;
  text-shadow: 2px 2px 3px black;
  font-size: 1.3em;
}
#checkbox-sidebar-toggle {
  display: none;
}
aside {
  width: unset;
}
:root {
    --gray--primary: hsl(200, 10%, 50%);
    --gray--secondary: hsl(200, 14%, 30%);
    --dark--primary: hsl(203, 13%, 14%);
    --accent--primary: hsl(206, 90%, 56%);
    --collapsed: 3.25rem;
    --svg: 1.125rem;
    --item: 2.25rem;
    --brad-inner: calc(0.75rem - 0.5rem);
}
.vertical-sidebar {
    display: flex;
    overflow: hidden;
}
nav {
    min-width: var(--collapsed);
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    transition: flex-basis 300ms ease-out;
    padding: 0.5rem;
}
.vertical-sidebar :checked ~ nav {
    flex-basis: 16.875rem;
}
.vertical-sidebar :not(:checked) ~ nav {
    flex-basis: var(--collapsed);
}
.sidebar__toggle-container {
    block-size: var(--item);
    display: flex;
    justify-content: end;
}
.nav__toggle {
    block-size: 100%;
    background: none;
    transition: all 233ms ease-in;
    border-radius: var(--brad-inner);
    outline: 2px solid transparent;
    outline-offset: -2px;
    overflow: hidden;
}
.toggle--icons {
    block-size: inherit;
    aspect-ratio: 1;
    display: inline-grid;
    place-content: center;
    grid-template-areas: "svg";
    z-index: 10;
}
.toggle-svg-icon {
    grid-area: svg;
    fill: var(--gray--primary);
    transition: fill 233ms ease-in;
}
.nav__toggle:hover {
    outline: 2px solid var(--accent--primary);
}
.toggle--icons:hover .toggle-svg-icon {
    fill: var(--dark--primary);
}
.sidebar__wrapper {
    --list-gap: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--list-gap);
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.sidebar__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 0.125rem;
    overflow: hidden;
}
.sidebar__item {
    block-size: var(--item);
    border-radius: var(--brad-inner);
}
.item--heading {
    display: flex;
    align-items: end;
}
.sidebar__item--heading {
    margin-block-end: 0.4rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    font-weight: 500;
    color: var(--gray--primary);
    transition: color 200ms ease-in;
}
.sidebar__list:has(.sidebar__link):hover .sidebar__item--heading {
    color: var(--gray--secondary);
}
.sidebar__link {
    display: flex;
    text-decoration: none;
    block-size: 100%;
    align-items: center;
    gap: 0.5rem;
    outline: 2px solid transparent;
    border-radius: inherit;
}
.icon {
    aspect-ratio: 1;
    block-size: 100%;
    display: inline-grid;
    svg {
        place-self: center;
        inline-size: var(--svg);
        block-size: var(--svg);
        fill: var(--gray--primary);
    }
}
.text {
    pointer-events: none;
    color: var(--gray--secondary);
    font-size: 0.875em;
    font-weight: 500;
    transition: color 266ms ease-out;
}
.sidebar__link:hover {
    background: hsl(200, 7%, 84%);
    .icon svg {
        fill: var(--accent--primary);
    }
    .text {
        color: var(--dark--primary);
    }
}
.sidebar__link:focus {
    outline: 2px solid hsl(206, 79%, 58%);
    outline-offset: -2px;
    background: hsl(203, 100%, 100%);
    .icon svg {
        fill: var(--accent--primary);
    }
}
.sidebar__link:active {
    background-color: hsla(203, 86%, 93%, 0.7);
}
/* Toggle icon visibility based on sidebar state */
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav .toggle--open {
  display: none;
}
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav .toggle--close {
  display: none;
}
/* Optionally, fade out heading and figcaption when collapsed */
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav :where(figcaption, .item--heading) {
  opacity: 0;
}
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav :where(figcaption, .item--heading) {
  transition: opacity 300ms ease-in 200ms;
}
/* Fade out h1 in .title-container when sidebar is collapsed */
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav .title-container h1 {
  opacity: 0;
  display: none;
  transition: opacity 300ms ease-in 100ms;
  pointer-events: none;
}
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav .title-container h1 {
  opacity: 1;
  display: inline;
  transition: opacity 300ms ease-in 100ms;
  pointer-events: auto;
}
/* Fade out button text when sidebar is collapsed */
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav #convert > span,
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav #copy-output > span,
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav #theme-toggle > span,
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav #options-btn > span,
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav #show-output-modal-btn > span {
  display: none;
  transition: display 300ms ease-out 200ms;
}
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav .title-container > img {
  height: unset !important;
  margin-top: 0px;
}
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav .sidebar__toggle-container {
    justify-content: center;
    margin-bottom: .5rem;
}
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav #convert > span,
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav #copy-output > span,
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav #theme-toggle > span,
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav #options-btn > span,
.vertical-sidebar #checkbox-sidebar-toggle:checked ~ nav #show-output-modal-btn > span {
  display: inline;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: fixed;
  translate: calc(var(--item) * 1.5) calc(var(--item) * 0.125);
  border-radius: var(--brad-inner);
  padding: 0.5rem 0.75rem;
  color: #ddd;
  background-color: hsl(198 16 30);
  box-shadow: 0 6px 12px -6px #0003;
  opacity: 0;
  pointer-events: none;
  scale: 0 0;
  z-index: 999;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 350ms ease-out;
}
/* Show tooltips for sidebar buttons when collapsed */
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav [data-tooltip]:hover::before,
.vertical-sidebar #checkbox-sidebar-toggle:not(:checked) ~ nav [data-tooltip]:focus-visible::before {
  opacity: 1;
  scale: 1;
}
#options-modal, #output-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.35);
  justify-content: center;
  align-items: center;
}
#options-modal h3, #output-modal h3 {
  margin:0;
  font-size:1.25em;
  font-weight:600;
}
#options-modal span {
  font-size: 1.08em;
  font-weight: 500;
  margin-bottom: 0.2em;
}
#options-modal .options-container {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
#options-modal .options-container label {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
#options-dialog, #output-dialog {
  background: var(--bg, #fff);
  color: var(--text, #222);
  border-radius: 12px;
  box-shadow: 0 8px 32px #0004;
  padding: 2em 2.5em;
  min-width: 320px;
  max-width: 90vw;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
#close-options-modal, #close-output-modal {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  background: none;
  border: none;
  font-size: 1.5em;
  color: var(--text, #222);
  cursor: pointer;
}
#output-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  flex: 1 1 0;
}
#output-controls textarea {
  flex: 1 1 0;
  min-height: 100px;
  max-height: none;
  resize: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  margin-bottom: 8px;
  position: relative;
}
#output-modal-textarea {
  min-height:180px;
  width:100%;
  resize:vertical;
  font-family:monospace;
  font-size:1em;
  padding:0.7em;
  box-sizing:border-box;
}
#show-output-modal-btn {
  display:none;
  margin-bottom:0.5em;
  align-items:center;
  gap:0.5em;
}
#copy-output-modal {
  align-self:center;
  display:flex;
  align-items:center;
  gap:0.5em;
}