:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #303740;
  color: #edf1f5;
  --surface: #383f49;
  --surface-raised: #424a55;
  --border: #515b67;
  --muted: #b5bec8;
  --accent: #8fb7e4;
  --accent-hover: #a8c8ec;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  padding: 2rem 0;
  background: radial-gradient(ellipse at top, #3b444f 0%, #303740 62%);
}
#code-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .27;
}
main {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 44rem);
  margin: 3rem auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  box-shadow: 0 24px 64px #11182042;
}
.brand {
  margin: 0 0 .2rem;
  line-height: 1.08;
}
.brand-title {
  display: inline-block;
  color: var(--accent);
  font-size: clamp(2.7rem, 9vw, 4.8rem);
  font-weight: 750;
  letter-spacing: -.045em;
}
.brand-tagline { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; letter-spacing: .02em; }
h1 {
  margin: .65rem 0 0;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.brand-title.is-scrambling {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.5rem, 8vw, 3.9rem);
  letter-spacing: -.08em;
  white-space: nowrap;
  text-shadow: 0 0 .45em #8fb7e455;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.intro { margin: .85rem 0 .4rem; color: #d5dce4; font-size: 1.06rem; line-height: 1.55; }
.expiry-note { margin: 0; color: var(--muted); font-size: .9rem; }
h2 { margin: 2.4rem 0 .8rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; }
p { line-height: 1.55; }
label { display: block; margin-bottom: .6rem; font-weight: 620; }
textarea, input {
  display: block;
  width: 100%;
  padding: .9rem 1rem;
  border: 1px solid #606b78;
  border-radius: .7rem;
  background: #2d343d;
  color: #f1f4f7;
  font: inherit;
}
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 11rem;
  resize: both;
  line-height: 1.55;
}
textarea::placeholder { color: #9da8b4; }
textarea:focus-visible, input:focus-visible {
  outline: 3px solid #87acd4;
  outline-offset: 2px;
  border-color: transparent;
}
input[readonly] { background: #303740; }
.link-options {
  margin: .9rem 0 1rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #ffffff06;
}
.link-options summary {
  padding: .75rem .9rem;
  color: #e4eaf0;
  font-size: .9rem;
  font-weight: 620;
  cursor: pointer;
}
.options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem 1rem;
  padding: .2rem .9rem .7rem;
}
.options-grid > label { min-width: 0; }
.expiry-control { display: flex; gap: .4rem; }
.expiry-control input { min-width: 0; }
.expiry-control select {
  min-width: 6.2rem;
  padding: .65rem;
  border: 1px solid #606b78;
  border-radius: .7rem;
  background: #2d343d;
  color: #f1f4f7;
  font: inherit;
}
.password-option { grid-column: 1 / -1; }
.checkbox-label { display: flex; align-items: center; gap: .55rem; margin: .35rem 0 .8rem; }
.checkbox-label input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.password-option #password-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1rem; }
.password-option #password-hint { grid-column: 1 / -1; margin: 0 0 .35rem; }
.password-option .hint { margin: 0 0 .4rem; }
.site-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .9rem 0 1.25rem;
}
.site-stats > div {
  min-width: 0;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: .7rem;
  background: var(--surface-raised);
}
.site-stats dt { color: var(--muted); font-size: .78rem; }
.site-stats dd { margin: .2rem 0 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.byte-meter { margin: .8rem 0 1.4rem; }
.progress-track {
  height: .52rem;
  overflow: hidden;
  border-radius: 999px;
  background: #252c34;
  box-shadow: inset 0 1px 2px #11182055;
}
.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 120ms ease-out, background-color 120ms ease-out;
}
.progress-track.over-limit .progress-fill { background: #e18e8e; }
.meter-labels { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; color: var(--muted); font-size: .82rem; }
.meter-labels #byte-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track.over-limit + .meter-labels #byte-count { color: #ffc0c0; }
button {
  min-height: 2.85rem;
  padding: .72rem 1.2rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  background: var(--accent);
  color: #18222e;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
button:hover { background: var(--accent-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .58; cursor: wait; }
button.button-secondary {
  border-color: #687380;
  background: transparent;
  color: #e7edf3;
}
button.button-secondary:hover { background: #ffffff12; }
:focus-visible { outline: 3px solid #a8c8ec; outline-offset: 3px; }
#create-status, #reveal-status { min-height: 1.5rem; color: #d5dce4; }
#share-result {
  margin-top: 1.5rem;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: var(--surface-raised);
}
#copy-link { margin-top: .85rem; }
#back-to-create { margin-top: 1rem; }
.hint { margin: .75rem 0 0; color: var(--muted); font-size: .88rem; }
.site-footer { margin-top: 2rem; border-top: 1px solid #ffffff14; padding-top: 1rem; }
.site-meta { margin: 0; color: var(--muted); font-size: .76rem; text-align: center; }
#plaintext-output {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 1.2rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: #2d343d;
  font: inherit;
  line-height: 1.6;
}
[hidden] { display: none !important; }
@media (max-width: 35rem) {
  body { padding: .5rem 0; }
  main { margin: .75rem auto; padding: 1.3rem; border-radius: .9rem; }
  button { width: 100%; }
  .meter-labels { font-size: .76rem; }
  .options-grid, .password-option #password-fields { grid-template-columns: 1fr; }
  .site-stats { gap: .4rem; }
  .site-stats > div { padding: .65rem .55rem; }
  .site-stats dt { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}