:root{
  --bg-color:#0d0d0d;
  --primary-color:#6a5e2b;    /* gold/earth */
  --secondary-color:#0e3d37;  /* deep teal */
  --text-color:#e5e5e5;

  --radius:18px;
  --pad:16px;
}

.dream-wrap{
  color:var(--text-color);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 860px;
  margin: 24px auto;
  margin-top: 2.5em;
}

.dream-label{
  display:block;
  font-size: .85rem;
  letter-spacing:.08em;
  text-transform: lowercase;
  opacity:.8;
  margin: 0 6px 8px 6px;
}

.dream-frame{
  position:relative;
  /*background:
    radial-gradient(1200px 400px at 10% 0%, color-mix(in srgb, var(--secondary-color) 22%, transparent) 0, transparent 60%),
    radial-gradient(800px 300px at 90% 100%, color-mix(in srgb, var(--primary-color) 18%, transparent) 0, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--secondary-color) 10%, transparent), transparent);*/
  border-radius: var(--radius);
  /*padding: calc(var(--pad) - 2px);*/
  overflow:hidden;
}

/* The textarea itself */
.dream-textarea{
  width:100%;
  min-height: 220px;
  max-height: 60vh;
  resize: vertical;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--secondary-color) 70%, #000 30%);
  background:
    linear-gradient(180deg, rgba(14,61,55,.10), rgba(14,61,55,.04) 60%, rgba(14,61,55,.10)),
    radial-gradient(600px 200px at 100% 0%, rgba(106,94,43,.10), transparent 60%),
    var(--bg-color);

  color: var(--text-color);
  line-height: 1.55;
  border-radius: calc(var(--radius) - 6px);
  outline: none;
  caret-color: color-mix(in srgb, var(--primary-color) 75%, #fff 25%);
  box-shadow:
    inset 0 0 0 1px rgba(229,229,229,.03),
    0 10px 30px rgba(0,0,0,.45);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  font-size: 1rem;
}

.dream-textarea::placeholder{
  color: color-mix(in srgb, var(--text-color) 50%, #000 50%);
  letter-spacing:.01em;
}

.dream-textarea:focus{
  border-color: color-mix(in srgb, var(--primary-color) 70%, #fff 10%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary-color) 45%, #fff 5%),
    0 0 0 2px color-mix(in srgb, var(--secondary-color) 40%, transparent),
    0 16px 40px rgba(14,61,55,.35);
  background:
    linear-gradient(180deg, rgba(14,61,55,.14), rgba(14,61,55,.06) 60%, rgba(14,61,55,.12)),
    radial-gradient(700px 240px at 100% 0%, rgba(106,94,43,.16), transparent 60%),
    var(--bg-color);
}

/* Animated border ring */
.dream-border{
  pointer-events:none;
  position:absolute; inset:6px;
  border-radius: calc(var(--radius) - 6px);
  padding: 1px;
  background:
    linear-gradient(180deg, rgba(229,229,229,.05), rgba(229,229,229,0)),
    conic-gradient(from 0deg,
      color-mix(in srgb, var(--primary-color) 65%, transparent) 0 25%,
      transparent 25% 50%,
      color-mix(in srgb, var(--secondary-color) 70%, transparent) 50% 75%,
      transparent 75% 100%);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: orbit 6s linear infinite;
  opacity:.55;
}

@keyframes orbit{
  to{ transform: rotate(360deg); }
}

/* Corners */
/*
.dream-corners .corner{
  position:absolute;
  width:18px; height:18px;
  border: 2px solid color-mix(in srgb, var(--secondary-color) 65%, #fff 5%);
  filter: drop-shadow(0 0 6px rgba(14,61,55,.35));
}
.corner.tl{ top:8px; left:8px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.corner.tr{ top:8px; right:8px; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.corner.bl{ bottom:8px; left:8px; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.corner.br{ bottom:8px; right:8px; border-left:0; border-top:0; border-radius:0 0 8px 0; }*/

/* Gentle scanlines */
.scanlines{
  pointer-events:none;
  position:absolute; inset:10px;
  border-radius: calc(var(--radius) - 10px);
  background-image:
    repeating-linear-gradient(
      180deg,
      rgba(229,229,229,.03) 0,
      rgba(229,229,229,.03) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: soft-light;
  opacity:.45;
  animation: drift 18s linear infinite;
  transform: translateZ(0);
}
@keyframes drift{
  0%{ background-position: 0 0; }
  100%{ background-position: 0 24px; }
}

/* Footer meta row */
.dream-meta{
  position:absolute;
  left:16px; right:16px; bottom:10px;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; user-select:none;
  font-size:.78rem; opacity:.7;
}
.dream-meta .hint{
  color: color-mix(in srgb, var(--text-color) 75%, #000 25%);
}
.dream-meta .count{
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--primary-color) 85%, #fff 10%);
}

/* Respect dark bg */
body{ background-color: var(--bg-color); }