body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 50px; background-color: #f0f0f0; }
#shadow-text { font-size: 48px; font-weight: bold; margin-bottom: 30px; transition: all 0.2s ease; padding: 20px; border-radius: 8px; }
.container { display: flex; gap: 20px; width: 100%; max-width: 800px; }
.controls { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 323px; display: grid; gap: 15px; }
.control-group { display: flex; align-items: center; gap: 10px; }
label { font-weight: bold; font-size: 0.9em; color: #333; min-width: 100px; }
input[type="range"] { flex: 1; cursor: pointer; }
input[type="color"] { width: 40px; height: 30px; border: none; cursor: pointer; }
.value-display { font-family: monospace; font-size: 0.9em; color: #007acc; min-width: 70px; text-align: right; }
.info { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 460px; font-size: 0.9em; color: #555; line-height: 1.5; }
.css-code { background: #f5f5f5; padding: 15px; border-radius: 4px; font-family: monospace; font-size: 0.95em; color: #d63384; margin-top: 10px; white-space: pre-wrap; word-break: break-all; border: none; text-align: left; cursor: pointer; width: 100%; }
.css-code:hover { background: #e9e9e9; }