html,
body {
     margin: 0;
     padding: 0;
     background: #000;
     overflow: hidden;
     font-family: monospace;
     color: #0ff;
}

#info {
     position: absolute;
     top: 10px;
     left: 10px;
     font-size: 12px;
     opacity: 0.7;
}

#shape-nav {
     position: absolute;
     top: 10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
}

.shape-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, 0.3);
     color: rgba(0, 255, 255, 0.6);
     font-family: monospace;
     font-size: 11px;
     padding: 5px 12px;
     cursor: pointer;
     transition: all 0.2s;
}

.shape-btn:hover {
     border-color: rgba(0, 255, 255, 0.8);
     color: #0ff;
}

.shape-btn.active {
     border-color: #0ff;
     color: #0ff;
     background: rgba(0, 255, 255, 0.08);
}

/* ── Controls panel ── */
#controls {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 200px;
     background: rgba(0, 0, 0, 0.6);
     border: 1px solid rgba(0, 255, 255, 0.15);
     padding: 12px 14px;
     font-size: 11px;
     backdrop-filter: blur(4px);
}

.ctrl-title {
     font-size: 9px;
     letter-spacing: 3px;
     color: rgba(0, 255, 255, 0.4);
     text-transform: uppercase;
     margin-bottom: 7px;
}

.ctrl-btn {
     background: transparent;
     border: 1px solid rgba(0, 255, 255, 0.25);
     color: rgba(0, 255, 255, 0.5);
     font-family: monospace;
     font-size: 10px;
     padding: 4px 10px;
     cursor: pointer;
     transition: all 0.2s;
}

.ctrl-btn:hover {
     border-color: rgba(0, 255, 255, 0.7);
     color: #0ff;
}

.ctrl-btn.active {
     border-color: #0ff;
     color: #0ff;
     background: rgba(0, 255, 255, 0.08);
}


#matrix-display {
     font-size: 9px;
     line-height: 1.7;
     color: rgba(0, 255, 255, 0.55);
     letter-spacing: 1px;
     margin-top: 4px;
     white-space: pre;
}