/* Display Board by SWC, gradient and glow aesthetic */
:root{
  --bg1:#090b1a;
  --bg2:#131a4d;
  --fg1:#ffffff;
  --fg2:#d0d0ff;
  --glow:35px;
  --stroke:2px;
  --fs:120px;
  --ls:0px;
  --pad:2vmin;
  --lh:1.1;
  --align:center;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#f5f7ff;
  background: radial-gradient(120vmax 120vmax at 10% 10%, #101225 0%, #070912 40%, #000 100%),
              linear-gradient(120deg, var(--bg1), var(--bg2));
  background-blend-mode: screen, normal;
  font-family: ui-sans-serif, Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Noto Color Emoji;
}

.app-header, .app-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.8rem 1rem;
  background:linear-gradient(90deg, #0b102a, #101533);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.app-footer{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:none;
  justify-content:center;
  background:linear-gradient(90deg, #0b102a, #0b102a);
  color:#b9c0ff;
}
h1{font-size:1.1rem;margin:0;letter-spacing:.5px}
.header-actions button{margin-left:.4rem}

.app{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:12px;
  padding:12px;
  height:calc(100vh - 104px);
}

.controls{
  height:100%;
  overflow:auto;
  padding:12px;
  background:rgba(10,14,40,.6);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.4), inset 0 0 40px rgba(120,140,255,.1);
  backdrop-filter: blur(8px);
}
.controls section{margin-bottom:12px}
.controls label{display:block;font-size:.84rem;margin-bottom:6px;color:#d6dbff}
.controls input[type="range"], .controls select, .controls textarea{
  width:100%;
}
.controls textarea{
  resize:vertical;
  border-radius:10px;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.02);
  color:#fff;
}

.layout-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.preset-row{display:flex;flex-wrap:wrap;gap:6px}
.preset{padding:.4rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#0e1331;color:#e5e8ff;cursor:pointer}

.stage-wrap{
  position:relative;
  height:100%;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 120px rgba(100,120,255,.12);
  background:
    radial-gradient(50vmax 50vmax at 30% 20%, rgba(120,150,255,.25), transparent 60%),
    radial-gradient(60vmax 60vmax at 80% 80%, rgba(255,120,220,.18), transparent 60%),
    linear-gradient(120deg, var(--bg1), var(--bg2));
}

.stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:var(--pad);
  transform:scale(1);
}

.display{
  text-align: var(--align);
  font-size: var(--fs);
  letter-spacing: var(--ls);
  line-height: var(--lh);
  font-weight: 800;
  color: #fff;
  text-shadow:
    0 0 calc(var(--glow) * .25) var(--fg2),
    0 0 calc(var(--glow) * .6) var(--fg2),
    0 0 var(--glow) var(--fg1);
  background: linear-gradient(180deg, var(--fg1) 0%, var(--fg2) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
  padding:.2em .4em;
  -webkit-text-stroke: var(--stroke) rgba(255,255,255,.25);
  user-select: none;
  white-space: pre-line;
  max-width: 92%;
  word-break: break-word;
}

.display.marquee{
  animation: marquee var(--marqueeSpeed, 12s) linear infinite;
  white-space: nowrap;
  max-width: none;
}

.display.blink{ animation: blink calc(1s / var(--speed, 1)) steps(2, start) infinite }
.display.pulse{ animation: pulse calc(2.4s / var(--speed, 1)) ease-in-out infinite }

@keyframes marquee{
  from{ transform: translateX(50vw) }
  to{ transform: translateX(-100%) }
}
@keyframes blink{
  to{ opacity: 0 }
}
@keyframes pulse{
  0%{ filter: drop-shadow(0 0 0 rgba(255,255,255,.25)) }
  50%{ filter: drop-shadow(0 0 20px rgba(255,255,255,.8)) }
  100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,.25)) }
}

.controls-hidden .controls{display:none}
.controls-hidden .app{grid-template-columns: 1fr}
.controls-hidden header, .controls-hidden footer{opacity:.25}

button, select, input[type="color"], input[type="range"]{
  background:#0b1133;
  color:#e8eaff;
  border:1px solid rgba(255,255,255,.15);
  padding:.5rem .6rem;
  border-radius:12px;
}
button:hover{filter:brightness(1.1)}
.hint{opacity:.7;font-size:.8rem}