/* Solward, Circuit Quay. Version 1.0.0. No remote fonts or assets. */
:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #f4f5ff; background: #101226; }
* { box-sizing: border-box; }
body { margin: 0; }
.workbench { max-width: 1000px; margin: auto; }
.preview { min-height: 300px; padding: 26px 30px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(ellipse at 50% 70%, #29224b, #0c1020 72%); border-bottom: 1px solid #48425f; }
.preview-label, .preview-foot { font: 12px/1.5 ui-monospace, monospace; letter-spacing: .12em; color: #a5acc5; }
.preview-foot { align-self: flex-end; }
#sign { --neon: #65eafa; --halo: 18px; color: var(--neon); font: 800 clamp(26px, 5vw, 56px)/1.18 system-ui, sans-serif; letter-spacing: .045em; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; margin: 30px auto; max-width: 850px; text-shadow: 0 0 var(--halo) var(--neon); }
.controls { padding: 24px 30px 12px; }
label { display: block; font-size: 16px; line-height: 1.5; }
label > span { color: #a5acc5; font-size: 14px; margin-left: 8px; }
input[type=text], select { width: 100%; margin-top: 8px; border: 1px solid #59617d; background: #191d34; color: #fff; border-radius: 6px; padding: 12px; font: 16px/1.4 system-ui, sans-serif; }
.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
input[type=range] { width: 100%; accent-color: #65eafa; min-height: 40px; margin: 5px 0; }
output { float: right; font: 16px/1.5 ui-monospace, monospace; color: #65eafa; }
.bottom-row { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.bottom-row p { color: #b7bed6; font-size: 14px; line-height: 1.6; }
button { border: 1px solid #68708e; border-radius: 6px; padding: 11px 16px; color: #fff; background: #262943; font: 15px system-ui, sans-serif; cursor: pointer; }
button:hover { background: #383c59; }
:focus-visible { outline: 3px solid #f0cf6a; outline-offset: 3px; }
#status { color: #b7bed6; min-height: 1.5em; margin: 4px 0; font-size: 14px; }
@media (max-width: 480px) { .preview { padding: 20px; min-height: 270px; } .controls { padding: 20px; } .control-row { grid-template-columns: 1fr; gap: 14px; } label > span { display: block; margin-left: 0; } }

#sign {
  --frame-halo: 0px;
  --frame-inset: 0px;
  border: 3px solid transparent;
  border-radius: 10px;
  padding: 14px 18px;
}

#sign[data-frame="single"] {
  border-color: var(--neon);
  box-shadow:
    0 0 var(--frame-halo) var(--neon),
    inset 0 0 var(--frame-inset) var(--neon);
}

#sign[data-frame="double"] {
  border-color: var(--neon);
  box-shadow:
    0 0 0 5px #0c1020,
    0 0 0 8px var(--neon),
    0 0 var(--frame-halo) var(--neon),
    inset 0 0 var(--frame-inset) var(--neon);
}
.workbench>h1{grid-column:1/-1;margin:0 0 10px;font-size:1.5rem}
#sign{box-sizing:border-box;overflow-wrap:anywhere}