.page-module__7qCodq__container{gap:var(--space-6);grid-template-columns:1fr;display:grid}@media (min-width:1024px){.page-module__7qCodq__container{grid-template-columns:1fr 400px}}.page-module__7qCodq__previewSection{gap:var(--space-4);flex-direction:column;display:flex}.page-module__7qCodq__preview{aspect-ratio:16/9;border-radius:var(--radius-xl);border:1px solid var(--border-primary);min-height:300px}.page-module__7qCodq__codeBlock{background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden}.page-module__7qCodq__codeHeader{padding:var(--space-2)var(--space-4);background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);justify-content:space-between;align-items:center;display:flex}.page-module__7qCodq__codeBlock code{padding:var(--space-4);font-family:Consolas,Monaco,monospace;font-size:var(--text-sm);color:var(--text-primary);word-break:break-all;display:block}.page-module__7qCodq__controls{gap:var(--space-6);flex-direction:column;display:flex}.page-module__7qCodq__controlGroup{gap:var(--space-3);flex-direction:column;display:flex}.page-module__7qCodq__label{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary)}.page-module__7qCodq__labelRow{justify-content:space-between;align-items:center;display:flex}.page-module__7qCodq__typeButtons{gap:var(--space-2);display:flex}.page-module__7qCodq__typeBtn{padding:var(--space-2)var(--space-3);background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);flex:1}.page-module__7qCodq__typeBtn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.page-module__7qCodq__typeBtn.page-module__7qCodq__active{background-color:var(--accent-light);border-color:var(--accent-primary);color:var(--accent-primary)}.page-module__7qCodq__directionGrid{gap:var(--space-2);grid-template-columns:repeat(4,1fr);display:grid}.page-module__7qCodq__dirBtn{aspect-ratio:1;background-color:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:var(--text-lg);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;display:flex}.page-module__7qCodq__dirBtn:hover{border-color:var(--accent-primary);color:var(--text-primary)}.page-module__7qCodq__dirBtn.page-module__7qCodq__active{background-color:var(--accent-light);border-color:var(--accent-primary);color:var(--accent-primary)}.page-module__7qCodq__angleControl{gap:var(--space-2);flex-direction:column;display:flex}.page-module__7qCodq__checkboxLabel{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary);cursor:pointer;display:flex}.page-module__7qCodq__checkboxLabel input{accent-color:var(--accent-primary)}.page-module__7qCodq__angleSlider{align-items:center;gap:var(--space-3);display:flex}.page-module__7qCodq__angleValue{font-size:var(--text-sm);color:var(--text-secondary);min-width:45px;font-family:Consolas,Monaco,monospace}.page-module__7qCodq__colorStops{gap:var(--space-3);flex-direction:column;display:flex}.page-module__7qCodq__colorStop{align-items:center;gap:var(--space-2);padding:var(--space-3);background-color:var(--bg-secondary);border-radius:var(--radius-lg);display:flex}.page-module__7qCodq__colorPicker{border-radius:var(--radius-md);cursor:pointer;border:none;width:40px;height:40px;padding:0}.page-module__7qCodq__colorPicker::-webkit-color-swatch-wrapper{padding:0}.page-module__7qCodq__colorPicker::-webkit-color-swatch{border:1px solid var(--border-primary);border-radius:var(--radius-md)}.page-module__7qCodq__colorInput{width:90px;padding:var(--space-2);background-color:var(--bg-tertiary);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-family:Consolas,Monaco,monospace;font-size:var(--text-sm);color:var(--text-primary);text-transform:uppercase}.page-module__7qCodq__colorInput:focus{border-color:var(--accent-primary);outline:none}.page-module__7qCodq__positionControl{align-items:center;gap:var(--space-2);flex:1;display:flex}.page-module__7qCodq__positionSlider{accent-color:var(--accent-primary);flex:1}.page-module__7qCodq__positionValue{font-size:var(--text-xs);color:var(--text-tertiary);min-width:35px;font-family:Consolas,Monaco,monospace}.page-module__7qCodq__addBtn{padding:var(--space-1)var(--space-2);border:1px dashed var(--border-primary);border-radius:var(--radius-md);font-size:var(--text-xs);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background-color:#0000}.page-module__7qCodq__addBtn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.page-module__7qCodq__removeBtn{border:1px solid var(--border-primary);border-radius:var(--radius-md);width:28px;height:28px;font-size:var(--text-lg);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);background-color:#0000;justify-content:center;align-items:center;display:flex}.page-module__7qCodq__removeBtn:hover{color:#ef4444;border-color:#ef4444}.page-module__7qCodq__presets{gap:var(--space-2);grid-template-columns:repeat(6,1fr);display:grid}@media (max-width:640px){.page-module__7qCodq__presets{grid-template-columns:repeat(4,1fr)}}.page-module__7qCodq__presetBtn{aspect-ratio:1;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);border:2px solid #0000}.page-module__7qCodq__presetBtn:hover{border-color:var(--accent-primary);transform:scale(1.05)}