* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}
::selection {
  color: #fff;
  background: hsl(80 40 40);
}
:root {
  --font-mono: "Iosevka", "Sarasa Term SC", ui-monospace, monospace;
  --transition: .2s ease-in-out;
}
html {
  font-size: 15px;
  text-rendering: optimizeLegibility;
  background: hsl(240 8 20);
  cursor: crosshair;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-color: #fff8 transparent;
  scrollbar-width: thin;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body {
  font: 1rem / 1.75 var(--font-mono);
  font-feature-settings: "ss14";
  color: #fff;
}
svg {
  display: block;
  width: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
a {
  color: inherit;
  text-decoration: none;
  transition: background var(--transition);
  @media (hover: hover) and (pointer: fine) {
    &:hover, &:focus-visible {
      background: hsl(240 40 80 / .2);
    }
  }
}
button, input, textarea {
  font: inherit;
  color: inherit;
  background: none;
}
button {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: var(--transition);
  transition-property: color, background;
  &:disabled {
    pointer-events: none;
  }
  &:disabled, &[value="confirm"] {
    color: transparent;
  }
  &:disabled svg, &[value="confirm"] svg {
    stroke: #fff;
  }
  svg {
    position: absolute;
    stroke: transparent;
    transition: stroke var(--transition);
  }
}
label {
  display: block;
  padding: .5rem 0;
}
ul {
  list-style: none;
}
main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 2rem 0;
  height: 100dvh;
  max-width: 40rem;
  > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 1.5rem;
  }
  > ul {
    padding: 1rem 1.5rem 0;
    mask: linear-gradient(to bottom, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
  }
  > ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0 1rem;
    max-height: 4.3rem;
    white-space: nowrap;
    transition: var(--transition);
    transition-property: max-height, opacity;
    &::before {
      content: "├";
      display: inline-block;
      width: .75rem;
      color: hsl(80 80 60);
    }
    &:last-child::before {
      content: "└";
    }
    &[aria-disabled] {
      pointer-events: none;
      opacity: .5;
    }
    &[aria-hidden] {
      max-height: 0;
      opacity: 0;
    }
    a {
      margin: 0 auto 0 0;
      padding: 0 .25rem;
    }
    a:empty::before {
      content: "untitled";
      color: hsl(240 8 80);
    }
    button {
      display: grid;
      margin: 0 0 0 .5rem;
    }
  }
  p {
    flex: 0 0 100%;
    margin: 0 0 0 1rem;
    font-size: .875rem;
    color: hsl(240 8 60);
    span:first-child::after {
      content: " ·";
      color: hsl(240 8 40);
    }
  }
}
h1 {
  padding: 0 1.5rem 1rem;
  font: inherit;
  &::before {
    content: "~ ";
    display: inline-block;
    width: 1rem;
    color: hsl(80 80 60);
  }
}
h2 {
  flex: 1;
  font: inherit;
  &::before {
    content: "$ ";
    display: inline-block;
    width: 1rem;
    color: hsl(80 80 60);
  }
  span:last-child {
    color: hsl(240 8 80);
  }
}
form {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: .25rem 0 0;
  padding: 1rem 1.5rem 0;
  color: hsl(240 8 90);
  &::before {
    content: attr(data-notice);
    position: absolute;
    inset: -5rem -1rem -1rem;
    display: grid;
    place-items: center;
    background: hsl(240 8 20 / .8);
    backdrop-filter: blur(.25rem);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  &.disabled::before {
    opacity: 1;
    pointer-events: auto;
  }
}
fieldset {
  display: grid;
  grid-template-columns: 1fr 7rem;
  grid-template-rows: max-content 1fr;
  gap: 1rem;
  height: 100%;
  label span {
    color: hsl(240 8 60);
    &::before {
      content: "> ";
      display: inline-block;
      width: 1rem;
      color: hsl(80 80 60);
    }
  }
}
footer {
  padding: .5rem 0;
  text-align: center;
  user-select: none;
  button {
    margin: 0 .25rem;
    form:has(textarea:invalid) &:first-child,
    form:has([name="key"][value=""]) &:last-child {
      color: hsl(240 8 60);
      pointer-events: none;
    }
  }
}
[aria-label] {
  cursor: text;
  border-top: 1px solid hsl(240 8 40);
  border-bottom: 1px solid hsl(240 8 40);
  transition: border var(--transition);
  &:focus-within {
    border-color: hsl(240 8 80);
  }
  input, textarea {
    padding: 0 0 0 1rem;
    width: 100%;
  }
  textarea {
    flex: 1;
    margin: .5rem 0;
    line-height: 1.5;
    resize: none;
    overflow: clip auto;
  }
}
[aria-label="expires"] {
  cursor: pointer;
  label {
    pointer-events: none;
  }
  button {
    display: block;
    margin: 0 0 0 1rem;
  }
  button:empty::before, ul li:nth-child(1)::before {
    content: "keep";
  }
  label:has( + ul li[hidden]) button:empty::before, ul:has(li[hidden]) li:nth-child(1)::before {
    content: "never";
  }
}
[aria-label="content"] {
  position: relative;
  grid-column: 1 / -1;
  &:has(textarea:invalid) button:last-child {
    color: hsl(240 8 60);
    pointer-events: none;
  }
  div {
    position: absolute;
    inset: .5rem 0 auto auto;
    user-select: none;
  }
  label {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: text;
  }
}
.u1 { color: hsl(60 80 80); }
.u2 { color: hsl(50 85 80); }
.u3 { color: hsl(40 90 80); }
.u4 { color: hsl(30 95 80); }
.button {
  position: relative;
  padding: 0 .75rem;
  line-height: 1.5;
  color: #fff;
  user-select: none;
  &::before, &::after {
    content: "";
    position: absolute;
    width: .25rem;
    border: 1px solid hsl(240 8 80 / .5);
  }
  &::before {
    inset: 0 auto 0 0;
    border-right: none;
  }
  &::after {
    inset: 0 0 0 auto;
    border-left: none;
  }
  @media (hover: hover) and (pointer: fine) {
    &:hover, &:focus-visible {
      background: hsl(240 40 80 / .2);
    }
  }
}
.select {
  position: relative;
  user-select: none;
  &:focus-within ul {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 1rem);
  }
  ul {
    position: absolute;
    left: 0;
    right: 0;
    background: hsl(240 8 20 / .8);
    backdrop-filter: blur(.25rem);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: var(--transition);
    transition-property: opacity, transform, pointer-events;
    transition-behavior: allow-discrete;
  }
  ul::after {
    content: "";
    margin: .5rem 0 0;
    width: 100%;
    border-bottom: 1px solid hsl(240 8 80);
    pointer-events: none;
  }
  li {
    padding: 0 1rem;
    cursor: pointer;
    transition: var(--transition);
    transition-property: color, background;
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background: hsl(240 40 80 / .2);
      }
    }
    &.active {
      background: hsl(240 40 80 / .2);
    }
    &[aria-selected="true"] {
      color: hsl(80 80 60);
    }
  }
}
@font-face {
  font-family:"Iosevka";
  src: local("Iosevka Term"), url("https://fontsapi.zeoseven.com/es/main.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}