/* Lightweight syntax highlighting layered below the native text editor. */
.ap-code-area { position: relative; overflow: hidden; background: #081526; }
.ap-code-area pre, .ap-code-area textarea { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 1rem; border: 0; white-space: pre; overflow: auto; font: 14px/1.55 Consolas, monospace; tab-size: 2; }
.ap-code-area pre { pointer-events: none; color: #dff7ff; text-align: left; background: #081526; }
.ap-code-area textarea { resize: none; outline: 0; background: transparent; color: transparent; caret-color: #fff; }
.ap-code-area textarea::selection { background: rgba(0, 212, 255, .3); }
.ap-syntax-keyword { color: #ff93d5; }.ap-syntax-function { color: #6ae7ff; }.ap-syntax-number { color: #ffcb6b; }.ap-syntax-comment { color: #60809b; }

/* These panels use display:grid when visible, so explicitly respect HTML's hidden state. */
#welcomeOverlay[hidden], #celebration[hidden], #certificate[hidden] { display: none !important; }